首页数据

src/api/data.ts

@@ -55,6 +55,13 @@ export const openall = (code) => {
   });
 };
 
+export const bagCount = (query) => {
+  return request({
+    url: '/system/bag/list',
+    method: 'get',
+    params: query
+  });
+};
 // export const openall = (code) =>{
 //   return request({
 //     url: '/system/common/cabinet/{code}/box/{boxuuid}/clear',

src/components/HomeComponents/lineEcharts.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="lineEchartsClass">
     <div class="titleBg">
-      <div class="titleFont">七日趋势</div>
+      <div class="titleFont">驿站库存量</div>
     </div>
     <div class="divContent"
       style="display: flex;flex-direction: row;justify-content: space-around;align-items: center;">

src/components/HomeStatics/lineEcharts.vue

@@ -1,212 +1,155 @@
 <template>
   <div class="lineEchartsClass" style="padding-left: 1vw;padding-top: 1.5vh;">
-    <div class="title">七日趋势</div>
+    <div class="title">驿站库存量</div>
     <div ref="linechart" style="width:100%;height: 90%;"></div>
   </div>
 </template>
 <script setup name="Index" lang="ts">
-import * as echarts from 'echarts';
+  import * as echarts from 'echarts';
+  import moment from 'moment';
 
-const linechart = ref();
-import { getpassenger } from "@/api/data"
+  const linechart = ref();
+  import { bagCount } from "@/api/data"
 
-const drawEchart = (kldata,hldata) => {
-  let echartsObj = echarts.init(linechart.value, "macarons");
-  var dateArray = getRecentDays();
-  var option = {
-    legend: {
-      top: '2%',
-      left: 'center',
-      textStyle: {
-        color: '#000000'
-        // ...
-      }
-    },
-    color: ['#3a9ede', '#2ACB97'],
-    grid: {
-      top: "15%",
-      left: "3%",
-      right: "8%",
-      bottom: "11%",
-      containLabel: true,
-    },
-    xAxis: {
-      type: "category",
-      boundaryGap: false,
-      data: dateArray,
-      axisLine: {
-        show: true,
-        lineStyle: {
-          color: "#353b5a",
-        },
-      },
-      axisTick: {
-        show: false,
-      },
-      axisLabel: {
-        // rotate: 60,
-        textStyle: {
-          color: "#000000"
-        },
-      },
-    },
-    yAxis: {
-      show: false,
-      type: "value",
-      nameTextStyle: {
-        color: "#000000",
-        padding: [0, 0, 0, -35],
-      },
-      name: "数量",
-      axisLine: {
-        show: true,
-        lineStyle: {
-          color: "#48A7EF",
-        },
-      },
-      axisLabel: {
-        textStyle: {
-          color: "#fff",
-        },
-      },
-      axisTick: {
-        show: false,
-      },
-      splitLine: {
-        lineStyle: {
-          color: "#353b5a",
-        },
-      },
-    },
-    series: [
+  const drawEchart = (arryData, total) => {
+    let echartsObj = echarts.init(linechart.value, "macarons");
+    var dateArray = getRecentDays();
+    var option = option = {
+      title: [
       {
-        name: "客流趋势",
-        type: "line",
-        data: kldata,
-        smooth: false,
-        symbol: 'circle',
-        itemStyle: {
-          normal: {
-            color: "#ffffff",
-            borderColor: '#3a9ede',
-            borderWidth: 1,
-          }
+        text: '总数',
+        subtext: total+"",
+        textStyle: {
+          fontSize: 15,
+          color: "black"
         },
-        lineStyle: {
-          color: "#3a9ede",
-          width: 2,
+        subtextStyle: {
+          fontSize: 20,
+          color: 'black'
         },
-        areaStyle: {
-          color: {
-            x: 0,
-            y: 1,
-            x2: 0,
-            y2: 0,
-            colorStops: [
-              {
-                offset: 0,
-                color: "rgba(72, 167, 239, 0.1)", // 0% 处的颜色
-              },
-              {
-                offset: 1,
-                color: "rgba(72, 167, 239, 0.7)", // 100% 处的颜色
-              },
-            ],
+        textAlign: "center",
+        x: '48%',
+        y: '35%',
+      }
+      ],
+      series: [
+        {
+          name: 'Access From',
+          type: 'pie',
+          radius: ['40%', '70%'],
+          labelLine: {
+            // length2: 55,
+            length: 15,
+            length2: 85,
+            lineStyle: {
+              // type: "dashed",
+              width: 2,
+            },
           },
-        },
-      },
-      {
-        name: "货流趋势",
-        type: "line",
-        data: hldata,
-        smooth: false,
-        symbol: 'circle',
-        itemStyle: {
-          normal: {
-            color: "#ffffff",
-            borderColor: '#2ACB97',
-            borderWidth: 1,
-          }
-        },
-        lineStyle: {
-          color: "#2ACB97",
-          width: 2,
-        },
-        areaStyle: {
-          color: {
-            x: 0,
-            y: 1,
-            x2: 0,
-            y2: 0,
-            colorStops: [
-              {
-                offset: 0,
-                color: "rgba(42, 203, 151, 0.1)", // 0% 处的颜色
+          label: {
+            position: 'outer',
+            alignTo: 'none',
+            bleedMargin: 15,
+            formatter: ' {b}\n{a|{c}人} {b|{d}%} ',
+            padding: -85,
+            rich: {
+              a: {
+                padding: [18, 0, 5, 0],
+                // fontSize: 14,
+                color: '#fff',
+                lineHeight: 20,
               },
-              {
-                offset: 1,
-                color: "rgba(42, 203, 151, 0.7)", // 100% 处的颜色
+              b: {
+                padding: [18, 0, 5, 0],
+                lineHeight: 20,
               },
-            ],
+            },
           },
+          data: arryData,
+          emphasis: {
+            itemStyle: {
+              shadowBlur: 10,
+              shadowOffsetX: 0,
+              shadowColor: 'rgba(0, 0, 0, 0.5)'
+            }
+          }
         },
-      },
-    ],
+      ]
+    };
+    echartsObj.setOption(option);
   }
-  echartsObj.setOption(option);
-}
 
-const getRecentDays = () => {
-  const oneDay = 24 * 60 * 60 * 1000; // 这里定义一天的毫秒数
-  const resultArray = [];
-  for (let i = 6; i >= 0; i--) {
-    const currentDate = new Date(Date.now() - i * oneDay); // 计算出每天的日期
-    const year = currentDate.getFullYear();
-    const month = String(currentDate.getMonth() + 1).padStart(2, "0"); // 月份需要补零
-    const day = String(currentDate.getDate()).padStart(2, "0"); // 日期也需要补零
-    const formattedDate = `${month}-${day}`; // 格式化日期为 yyyy-mm-dd 的形式
-    resultArray.push(formattedDate);
+  const getRecentDays = () => {
+    const oneDay = 24 * 60 * 60 * 1000; // 这里定义一天的毫秒数
+    const resultArray = [];
+    for (let i = 6; i >= 0; i--) {
+      const currentDate = new Date(Date.now() - i * oneDay); // 计算出每天的日期
+      const year = currentDate.getFullYear();
+      const month = String(currentDate.getMonth() + 1).padStart(2, "0"); // 月份需要补零
+      const day = String(currentDate.getDate()).padStart(2, "0"); // 日期也需要补零
+      const formattedDate = `${month}-${day}`; // 格式化日期为 yyyy-mm-dd 的形式
+      resultArray.push(formattedDate);
+    }
+    return resultArray;
   }
-  return resultArray;
-}
 
 
-const getpassengerData = () =>{
-  getpassenger().then(res=>{
-      var date = [];
-      var kldata = [];
-      var hldata = [];
-      for(var index in res.data){
-           if(index > 0){
-            date.push(res.data[index].end);
-            kldata.push(res.data[index].flowCount.incount + res.data[index].flowCount.outcount)
-            hldata.push(res.data[index].goodsOrderCount.ordercount)
-           }
+  const getbagCountData = () => {
+    var param = {
+      beginCreatedAt: moment().format("YYYY-MM-DD 00:00:00")
+    }
+    var obj = {
+      params: param,
+      pageSize: 1000
+    }
+    bagCount(obj).then(res => {
+      console.log(res)
+      var rkCount = 0;
+      var ckCount = 0;
+      var ycCount = 0;
+      var clCount = 0;
+      var total = res.total;
+      for (var index in res.rows) {
+        if (res.rows[index].bagStatus == 0) {
+          rkCount++;
+        } else if (res.rows[index].bagStatus == 1) {
+          ckCount++;
+        } else if (res.rows[index].bagStatus == 2) {
+          ycCount++;
+        } else if (res.rows[index].bagStatus == 3) {
+          clCount++;
+        }
       }
-      drawEchart(kldata,hldata)
-  })
-}
+      var arryData = [
+        { value: rkCount, name: '入库' },
+        { value: ckCount, name: '出库' },
+        { value: ycCount, name: '异常' },
+        { value: clCount, name: '已处理' }
+      ]
+      drawEchart(arryData, total)
+    })
+  }
 
-onMounted(() => {
-  getpassengerData();
-})
+  onMounted(() => {
+    getbagCountData();
+  })
 </script>
 <style>
-.lineEchartsClass {
-  height: 28vh;
-  background: rgba(255, 255, 255, 0.85);
-  border-radius: 8px 8px 8px 8px;
-  box-shadow: 6px 6px 6px 6px rgba(0, 0, 0, 0.3);
+  .lineEchartsClass {
+    height: 28vh;
+    background: rgba(255, 255, 255, 0.85);
+    border-radius: 8px 8px 8px 8px;
+    box-shadow: 6px 6px 6px 6px rgba(0, 0, 0, 0.3);
 
-  .title {
-    font-family: Source Han Sans CN, Source Han Sans CN;
-    font-weight: bold;
-    font-size: 20px;
-    color: #000000;
-    line-height: 24px;
-    text-align: left;
-    font-style: normal;
-    text-transform: none;
+    .title {
+      font-family: Source Han Sans CN, Source Han Sans CN;
+      font-weight: bold;
+      font-size: 20px;
+      color: #000000;
+      line-height: 24px;
+      text-align: left;
+      font-style: normal;
+      text-transform: none;
+    }
   }
-}
 </style>