`fix`

src/components/HomeComponents/countPage.vue

@@ -3,21 +3,43 @@
     <div class="titleBg">
       <div class="titleFont">今日统计</div>
     </div>
-    <div class="divContent" style="display: flex;flex-direction: row;justify-content: space-around;align-items: center;">
+    <div
+      class="divContent"
+      style="
+        display: flex;
+        flex-direction: row;
+        justify-content: space-around;
+        align-items: center;
+      "
+    >
       <div>
         <div class="divBackGround">
-          <div class="countFont" style="color: #16FF84;">{{ people }}</div>
+          <div class="countFont" style="color: #16ff84">{{ people }}</div>
         </div>
-        <div style="display: flex;flex-direction: row;justify-content: center;margin-top: 10px;">
+        <div
+          style="
+            display: flex;
+            flex-direction: row;
+            justify-content: center;
+            margin-top: 10px;
+          "
+        >
           <div class="titleClass">客流数</div>
           <div class="unitClass">（人）</div>
         </div>
       </div>
       <div>
         <div class="hldivBackGround">
-          <div class="countFont" style="color: #0EF7FF;">{{ goods }}</div>
+          <div class="countFont" style="color: #0ef7ff">{{ goods }}</div>
         </div>
-        <div style="display: flex;flex-direction: row;justify-content: center;margin-top: 10px">
+        <div
+          style="
+            display: flex;
+            flex-direction: row;
+            justify-content: center;
+            margin-top: 10px;
+          "
+        >
           <div class="titleClass">在格数</div>
           <div class="unitClass">（件）</div>
         </div>
@@ -27,119 +49,119 @@
 </template>
 
 <script setup name="CarInfo" lang="ts">
-import moment from 'moment';
-import { getCountData } from '@/api/gpsData';
+import moment from "moment";
+import { getCountData } from "@/api/gpsData";
 import { listGoodsOrder } from "@/api/goodsOrder";
-import { getpassenger1 } from '@/api/data'
-import { cabinetboxstatic } from '@/api/gpsData';
+import { getpassenger1 } from "@/api/data";
+import { cabinetboxstatic } from "@/api/gpsData";
 
-const people = ref(0)
-const goods = ref(0)
+const people = ref(0);
+const goods = ref(0);
 
-
-const getlist = () =>{
+const getlist = () => {
   getpassenger1({
-    "start":moment(new Date()).format('YYYY-MM-DD'),
-    "end":moment(new Date()).format('YYYY-MM-DD')
-}).then(res=>{
-  console.log(res)
-  people.value = res.data[0].flowCount.incount;
-  // goods.value = res.data[0].goodsOrderCount.ordercount;
-})
-
+    start: moment(new Date()).format("YYYY-MM-DD"),
+    end: moment(new Date()).format("YYYY-MM-DD"),
+  }).then((res) => {
+    console.log(res);
+    people.value = res.data[0].flowCount.incount;
+    // goods.value = res.data[0].goodsOrderCount.ordercount;
+  });
 
-cabinetboxstatic().then((res) => {
+  cabinetboxstatic().then((res) => {
     let totalcabinet = 0;
     let kxcabinet = 0;
     for (let key in res) {
       totalcabinet += res[key].total ?? 0;
       kxcabinet += res[key].unuse ?? 0;
     }
-    goods.value = totalcabinet-kxcabinet;
+    goods.value = totalcabinet - kxcabinet;
   });
-}
+};
 onMounted(() => {
-    // getList();
-      getlist();
+  // getList();
+  getlist();
 });
 </script>
 <style scoped lang="scss">
 .countHomeClass {
-    height: 20vh;
-    width: 20vw;
+  height: 20vh;
+  width: 20vw;
+  min-width: 400px;
 
-    .titleBg {
-        background: url("@/assets/images/homeImages/titleBg.png") no-repeat;
-        background-size: 100% 100%;
-    }
+  .titleBg {
+    background: url("@/assets/images/homeImages/titleBg.png") no-repeat;
+    background-size: 100% 100%;
+  }
 
-    .titleFont {
-        font-family: Source Han Sans CN, Source Han Sans CN;
-        font-weight: 400;
-        font-size: 18px;
-        color: #FFFFFF;
-        line-height: 4vh;
-        text-shadow: 0px 4px 0px rgba(10, 40, 95, 0.69);
-        text-align: left;
-        font-style: normal;
-        text-transform: none;
-        margin-left: 2vw;
-        letter-spacing: 5px;
-    }
+  .titleFont {
+    font-family: Source Han Sans CN, Source Han Sans CN;
+    font-weight: 400;
+    font-size: 18px;
+    color: #ffffff;
+    line-height: 4vh;
+    text-shadow: 0px 4px 0px rgba(10, 40, 95, 0.69);
+    text-align: left;
+    font-style: normal;
+    text-transform: none;
+    margin-left: 2vw;
+    letter-spacing: 5px;
+  }
 
-    .divContent {
-        background: url("@/assets/images/homeImages/contentBg.png") no-repeat;
-        background-size: 100% 100%;
-        width: 20vw;
-        height: 22vh;
-    }
+  .divContent {
+    background: url("@/assets/images/homeImages/contentBg.png") no-repeat;
+    background-size: 100% 100%;
+    width: 20vw;
+    height: 22vh;
+    min-width: 400px;
+  }
 
-    .divBackGround {
-        background: url("@/assets/images/homeImages/kl.png") no-repeat;
-        background-size: 100% 100%;
-        background-position: bottom center;
-        width: 4.5vw;
-        height: 13vh;
-    }
+  .divBackGround {
+    background: url("@/assets/images/homeImages/kl.png") no-repeat;
+    background-size: 100% 100%;
+    background-position: bottom center;
+    width: 80px;
+    height: 13vh;
+  }
 
-    .hldivBackGround{
-        background: url("@/assets/images/homeImages/wl.png") no-repeat;
-        background-size: 100% 100%;
-        background-position: bottom center;
-        width: 4.5vw;
-        height: 13vh;
-    }
+  .hldivBackGround {
+    background: url("@/assets/images/homeImages/wl.png") no-repeat;
+    background-size: 100% 100%;
+    background-position: bottom center;
+    width: 80px;
+    height: 13vh;
+  }
 
-    .countFont {
-        font-family: Source Han Sans CN, Source Han Sans CN;
-        font-weight: bold;
-        font-size: 42px;
-        line-height: 17px;
-        text-align: center !important;
-        font-style: normal;
-        text-transform: none;
-    }
+  .countFont {
+    font-family: Source Han Sans CN, Source Han Sans CN;
+    font-weight: bold;
+    font-size: 42px;
+    line-height: 17px;
+    text-align: center !important;
+    font-style: normal;
+    text-transform: none;
+  }
 
-    .titleClass {
-        font-family: Source Han Sans CN, Source Han Sans CN;
-        font-weight: 500;
-        font-size: 16px;
-        color: #FFFFFF;
-        line-height: 18px;
-        text-align: left;
-        font-style: normal;
-        text-transform: none;
-    }
+  .titleClass {
+    font-family: Source Han Sans CN, Source Han Sans CN;
+    font-weight: 500;
+    font-size: 16px;
+    color: #ffffff;
+    line-height: 18px;
+    text-align: left;
+    font-style: normal;
+    text-transform: none;
+  }
 
-    .unitClass {
-        font-family: Source Han Sans CN, Source Han Sans CN;
-        font-weight: 400;
-        font-size: 14px;
-        color: rgba(255, 255, 255,0.5);
-        line-height: 17px;
-        text-align: left;
-        font-style: normal;
-        text-transform: none;
-    }
+  .unitClass {
+    font-family: Source Han Sans CN, Source Han Sans CN;
+    font-weight: 400;
+    font-size: 14px;
+    color: rgba(255, 255, 255, 0.5);
+    line-height: 17px;
+    text-align: left;
+    font-style: normal;
+    text-transform: none;
+  }
 }
 </style>

src/components/HomeComponents/lineEcharts.vue

@@ -3,109 +3,94 @@
     <div class="titleBg">
       <div class="titleFont">驿站库存量</div>
     </div>
-    <div class="divContent"
-      style="display: flex;flex-direction: row;justify-content: space-around;align-items: center;">
-      <div ref="linechart" style="width:100%;height: 90%;"></div>
+    <div
+      class="divContent"
+      style="
+        display: flex;
+        flex-direction: row;
+        justify-content: space-around;
+        align-items: center;
+      "
+    >
+      <div ref="linechart" style="width: 100%; height: 90%"></div>
     </div>
   </div>
 </template>
 <script setup name="Index" lang="ts">
-import * as echarts from 'echarts';
-import { getpassenger } from "@/api/data"
+import * as echarts from "echarts";
+import moment from "moment";
 
 const linechart = ref();
+import { bagCount } from "@/api/data";
 
-const drawEchart = (kldata,hldata) => {
+const drawEchart = (arryData, total) => {
   let echartsObj = echarts.init(linechart.value, "macarons");
   var dateArray = getRecentDays();
-  var option = {
-    legend: {
-      top: '2%',
-      left: 'center',
-      icon: 'rect',
-      textStyle: {
-        color: 'rgba(255,255,255,0.5)'
-        // ...
-      }
-    },
-    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: "rgba(255,255,255,0.5)"
-        },
-      },
-    },
-    yAxis: {
-      show: true,
-      type: "value",
-      axisLine: {
-        show: false,
-        lineStyle: {
-          color: "#48A7EF",
-        },
-      },
-      axisLabel: {
+  var option = (option = {
+    title: [
+      {
+        text: "总数",
+        subtext: total + "",
         textStyle: {
-          color: "rgba(255,255,255,0.5)",
+          fontSize: 15,
+          color: "#fff",
         },
-      },
-      axisTick: {
-        show: false,
-      },
-      splitLine: {
-        lineStyle: {
-          color: "#353b5a",
+        subtextStyle: {
+          fontSize: 20,
+          color: "#fff",
         },
+        textAlign: "center",
+        x: "48%",
+        y: "35%",
       },
-    },
+    ],
     series: [
       {
-        name: "货流趋势",
-        type: "line",
-        data: kldata,
-        smooth: false,
-        symbol: 'none',
-        lineStyle: {
-          color: "#63FF8D",
-          width: 4,
+        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: 'none',
-        lineStyle: {
-          color: "#0A7DFA",
-          width: 4,
+        label: {
+          position: "outer",
+          alignTo: "none",
+          bleedMargin: 15,
+          color: "#fff",
+          formatter: " {b}\n{a|{c}}",
+          padding: -85,
+          rich: {
+            a: {
+              padding: [18, 0, 5, 0],
+              fontSize: 14,
+              color: "#fff",
+              lineHeight: 20,
+            },
+            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);
-}
+};
 
 const getRecentDays = () => {
   const oneDay = 24 * 60 * 60 * 1000; // 这里定义一天的毫秒数
@@ -119,33 +104,52 @@ const getRecentDays = () => {
     resultArray.push(formattedDate);
   }
   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();
-})
+  getbagCountData();
+});
 </script>
 <style scoped lang="scss">
 .lineEchartsClass {
   height: 28vh;
-
-
+  min-width: 400px;
   .titleBg {
     background: url("@/assets/images/homeImages/titleBg.png") no-repeat;
     background-size: 100% 100%;
@@ -155,7 +159,7 @@ onMounted(() => {
     font-family: Source Han Sans CN, Source Han Sans CN;
     font-weight: 400;
     font-size: 18px;
-    color: #FFFFFF;
+    color: #ffffff;
     line-height: 4vh;
     text-shadow: 0px 4px 0px rgba(10, 40, 95, 0.69);
     text-align: left;
@@ -170,6 +174,7 @@ onMounted(() => {
     background-size: 100% 100%;
     width: 20vw;
     height: 22vh;
+    min-width: 400px;
   }
 }
 </style>

src/components/HomeComponents/messageTable.vue

@@ -4,10 +4,22 @@
       <div class="titleFont">车辆报站</div>
     </div>
     <div class="divContent">
-      <div style="margin-left: 1vw;max-height: 30vh;overflow-y: scroll;" class="tableClass">
+      <div
+        style="margin-left: 1vw; max-height: 30vh; overflow-y: scroll"
+        class="tableClass"
+      >
         <div v-for="(item, index) in messageList" :key="index">
-          <div style="display: flex;flex-direction: row;justify-content: space-around;margin-top: 20px;">
-            <div :class="item.type == 1 ? 'carClass' : 'goodClass'">{{ item.carNum }}</div>
+          <div
+            style="
+              display: flex;
+              flex-direction: row;
+              justify-content: space-around;
+              margin-top: 20px;
+            "
+          >
+            <div :class="item.type == 1 ? 'carClass' : 'goodClass'" style="width: 80px">
+              {{ item.carNum }}
+            </div>
             <div class="contentClass">{{ "即将到达" }}</div>
             <div class="stationClass">{{ item.station }}</div>
             <div class="timeClass">{{ moment(item.time).format("MM/DD HH:mm") }}</div>
@@ -34,139 +46,141 @@
 </template>
 
 <script setup name="CarInfo" lang="ts">
-import moment from 'moment';
-import { playlist } from '@/api/gpsData';
+import moment from "moment";
+import { playlist } from "@/api/gpsData";
 
-const messageList = ref([
-]);
+const messageList = ref([]);
 
 const getList = () => {
-      playlist().then(res => {
-        res= res.sort((a,b)=>{return moment(b.time).unix() - moment(a.time).unix()})
-        messageList.value = res;
+  playlist().then((res) => {
+    res = res.sort((a, b) => {
+      return moment(b.time).unix() - moment(a.time).unix();
     });
+    messageList.value = res;
+  });
 };
 
-
 onMounted(() => {
-    getList();
+  getList();
 });
 </script>
 <style scoped lang="scss">
 .messagePageClass {
-    height: 34vh;
+  height: 34vh;
+  min-width: 400px;
 
-    .titleBg {
-        background: url("@/assets/images/homeImages/titleBg.png") no-repeat;
-        background-size: 100% 100%;
-    }
+  .titleBg {
+    background: url("@/assets/images/homeImages/titleBg.png") no-repeat;
+    background-size: 100% 100%;
+  }
 
-    .titleFont {
-        font-family: Source Han Sans CN, Source Han Sans CN;
-        font-weight: 400;
-        font-size: 18px;
-        color: #FFFFFF;
-        line-height: 4vh;
-        text-shadow: 0px 4px 0px rgba(10, 40, 95, 0.69);
-        text-align: left;
-        font-style: normal;
-        text-transform: none;
-        margin-left: 2vw;
-        letter-spacing: 5px;
-    }
+  .titleFont {
+    font-family: Source Han Sans CN, Source Han Sans CN;
+    font-weight: 400;
+    font-size: 18px;
+    color: #ffffff;
+    line-height: 4vh;
+    text-shadow: 0px 4px 0px rgba(10, 40, 95, 0.69);
+    text-align: left;
+    font-style: normal;
+    text-transform: none;
+    margin-left: 2vw;
+    letter-spacing: 5px;
+  }
 
-    .divContent {
-        background: url("@/assets/images/homeImages/tableDiv.png") no-repeat;
-        background-size: 100% 100%;
-        width: 20vw;
-        height: 30vh;
-        padding-right: 1vw;
-    }
+  .divContent {
+    background: url("@/assets/images/homeImages/tableDiv.png") no-repeat;
+    background-size: 100% 100%;
+    width: 20vw;
+    height: 30vh;
+    padding-right: 1vw;
+    min-width: 400px;
+  }
 }
 
-.el-divider--horizontal{
-     margin: 8px 0;
-     background: 0 0;
-     border-top: 1px dashed #e8eaec;
- }
+.el-divider--horizontal {
+  margin: 8px 0;
+  background: 0 0;
+  border-top: 1px dashed #e8eaec;
+}
 
 .tableClass::-webkit-scrollbar {
-    display: none;
+  display: none;
 }
 
 .contentClass {
-    font-family: Source Han Sans CN, Source Han Sans CN;
-    font-weight: 400;
-    font-size: 13px;
-    color: #FFFFFF;
-    line-height: 24px;
-    text-align: left;
-    font-style: normal;
-    text-transform: none;
+  font-family: Source Han Sans CN, Source Han Sans CN;
+  font-weight: 400;
+  font-size: 13px;
+  color: #ffffff;
+  line-height: 24px;
+  text-align: left;
+  font-style: normal;
+  text-transform: none;
 }
 
 .stationClass {
-    font-family: Source Han Sans CN, Source Han Sans CN;
-    font-weight: bold;
-    font-size: 13px;
-    color: #FFFFFF;
-    line-height: 24px;
-    text-align: left;
-    font-style: normal;
-    text-transform: none;
-     white-space: nowrap;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    max-width: 68px;
+  font-family: Source Han Sans CN, Source Han Sans CN;
+  font-weight: bold;
+  font-size: 13px;
+  color: #ffffff;
+  line-height: 24px;
+  text-align: left;
+  font-style: normal;
+  text-transform: none;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  max-width: 68px;
 }
 
 .timeClass {
-    font-family: Source Han Sans CN, Source Han Sans CN;
-    font-weight: 400;
-    font-size: 13px;
-    color: #C1D2E4;
-    line-height: 24px;
-    text-align: left;
-    font-style: normal;
-    text-transform: none;
+  font-family: Source Han Sans CN, Source Han Sans CN;
+  font-weight: 400;
+  font-size: 13px;
+  color: #c1d2e4;
+  line-height: 24px;
+  text-align: left;
+  font-style: normal;
+  text-transform: none;
 }
 
 .el-divider--horizontal {
-    margin-top: 10px;
-    margin-bottom: 0px;
+  margin-top: 10px;
+  margin-bottom: 0px;
 }
 
 .carClass {
-    background: url("@/assets/images/home/Bg(2).png") no-repeat;
-    background-size: 100% 100%;
-    font-family: Source Han Sans CN, Source Han Sans CN;
-    font-weight: 400;
-    font-size: 14px;
-    color: #FFFFFF;
-    line-height: 20px;
-    text-align: left;
-    font-style: normal;
-    text-transform: none;
-    width: 5vw;
-    text-align: center;
-    height: 24px;
-    line-height: 24px;
+  background: url("@/assets/images/home/Bg(2).png") no-repeat;
+  background-size: 100% 100%;
+  font-family: Source Han Sans CN, Source Han Sans CN;
+  font-weight: 400;
+  font-size: 14px;
+  color: #ffffff;
+  line-height: 20px;
+  text-align: left;
+  font-style: normal;
+  text-transform: none;
+  width: 5vw;
+  text-align: center;
+  height: 24px;
+  line-height: 24px;
 }
 
 .goodClass {
-    background: url("@/assets/images/home/Bg(3).png") no-repeat;
-    background-size: 100% 100%;
-    font-family: Source Han Sans CN, Source Han Sans CN;
-    font-weight: 400;
-    font-size: 14px;
-    color: #6A4119;
-    line-height: 20px;
-    text-align: left;
-    font-style: normal;
-    text-transform: none;
-    width: 5vw;
-    text-align: center;
-    height: 24px;
-    line-height: 24px;
+  background: url("@/assets/images/home/Bg(3).png") no-repeat;
+  background-size: 100% 100%;
+  font-family: Source Han Sans CN, Source Han Sans CN;
+  font-weight: 400;
+  font-size: 14px;
+  color: #6a4119;
+  line-height: 20px;
+  text-align: left;
+  font-style: normal;
+  text-transform: none;
+  width: 5vw;
+  text-align: center;
+  height: 24px;
+  line-height: 24px;
 }
 </style>

src/components/HomeComponents/pieEcharts.vue

@@ -1,178 +1,201 @@
 <template>
-    <div class="pieEchartsClass">
-        <div class="titleBg">
-            <div class="titleFont">车辆统计</div>
-        </div>
-        <div class="divContent" style="display: flex;flex-direction: row;justify-content: space-around;align-items: center;">
-            <div ref="piechart" style="width:100%;height: 90%;"></div>
-        </div>
+  <div class="pieEchartsClass">
+    <div class="titleBg">
+      <div class="titleFont">车辆统计</div>
     </div>
+    <div
+      class="divContent"
+      style="
+        display: flex;
+        flex-direction: row;
+        justify-content: space-around;
+        align-items: center;
+      "
+    >
+      <div ref="piechart" style="width: 100%; height: 90%"></div>
+    </div>
+  </div>
 </template>
 <script setup name="Index" lang="ts">
-import * as echarts from 'echarts';
-import { listCarInfo, getCarInfo, delCarInfo, addCarInfo, updateCarInfo } from '@/api/carInfo';
-import { getDicts } from '@/api/system/dict/data'
+import * as echarts from "echarts";
+import {
+  listCarInfo,
+  getCarInfo,
+  delCarInfo,
+  addCarInfo,
+  updateCarInfo,
+} from "@/api/carInfo";
+import { getDicts } from "@/api/system/dict/data";
 
 const piechart = ref();
 const carTypeList = ref([]);
 const bussinessTypeList = ref([]);
-const dataList = ref([])
-
+const dataList = ref([]);
 
 const initData = async () => {
-    const carTotal = await listCarInfo({ pageSize: 1000 });
-    var total = carTotal.total
-    const data = await getDicts('tbl_car_type')
-    carTypeList.value = data.data
-    var label = {
-        normal: {
-            formatter: '{c|{c}}' + "\n\n" + '{b|{b}} ',
-            padding: [0, -50],
-            rich: {
-                c: {
-                    fontSize: 18,
-                    color: '#09EFFF',
-                    align: 'center',
-                },
-                b: {
-                    fontSize: 14,
-                    color: '#ffffff',
-                    align: 'center',
-                    fontWeight: 'bolder'
-                },
-            }
-        }
-    }
+  const carTotal = await listCarInfo({ pageSize: 1000 });
+  var total = carTotal.total;
+  const data = await getDicts("tbl_car_type");
+  carTypeList.value = data.data;
+  var label = {
+    normal: {
+      formatter: "{c|{c}}" + "\n\n" + "{b|{b}} ",
+      padding: [0, -50],
+      rich: {
+        c: {
+          fontSize: 18,
+          color: "#09EFFF",
+          align: "center",
+        },
+        b: {
+          fontSize: 14,
+          color: "#ffffff",
+          align: "center",
+          fontWeight: "bolder",
+        },
+      },
+    },
+  };
 
-    var labelLine = {
-        length: 20,
-        length2: 50
-    }
-    for (var index in carTypeList.value) {
-
-        var obj = {
-            pageSize: 1000,
-            carType: carTypeList.value[index].dictValue
-        }
-        const res = await listCarInfo(obj);
-        total = total - res.total
-        var cObj = {
-            name: '客车' + carTypeList.value[index].dictLabel,
-            value: res.total,
-            label: label,
-            labelLine: labelLine
-        }
-        dataList.value.push(cObj)
-    }
-    // dataList.value.push({ name: '其它', value: total, label: label, labelLine: labelLine });
-    drawEchart();
-}
+  var labelLine = {
+    length: 20,
+    length2: 50,
+  };
+  for (var index in carTypeList.value) {
+    var obj = {
+      pageSize: 1000,
+      carType: carTypeList.value[index].dictValue,
+    };
+    const res = await listCarInfo(obj);
+    total = total - res.total;
+    var cObj = {
+      name: "客车" + carTypeList.value[index].dictLabel,
+      value: res.total,
+      label: label,
+      labelLine: labelLine,
+    };
+    dataList.value.push(cObj);
+  }
+  // dataList.value.push({ name: '其它', value: total, label: label, labelLine: labelLine });
+  drawEchart();
+};
 
 const getDictsData = (param, obj) => {
-    getDicts(param).then(res => {
-        obj.value = res.data;
-
-    })
-}
-
+  getDicts(param).then((res) => {
+    obj.value = res.data;
+  });
+};
 
 const drawEchart = () => {
-    let echartsObj = echarts.init(piechart.value, "macarons");
-    var dateArray = getRecentDays();
-    var option = {
-        series: [
-            {
-                color: [
-                    new echarts.graphic.LinearGradient(
-                        0, 1, 0, 0,       //4个参数用于配置渐变色的起止位置, 这4个参数依次对应右/下/左/上四个方位. 而0 0 0 1则代表渐变色从正上方开始
-                        [
-                            { offset: 1, color: '#B558F6' },
-                            { offset: 0, color: '#DB91FB' }
-                        ]
-                    ),
-                    new echarts.graphic.LinearGradient(
-                        0, 1, 0, 0,       //4个参数用于配置渐变色的起止位置, 这4个参数依次对应右/下/左/上四个方位. 而0 0 0 1则代表渐变色从正上方开始
-                        [
-                            { offset: 1, color: '#FFE400 ' },
-                            { offset: 0, color: '#FEC400' }
-                        ]
-                    ),
-                    new echarts.graphic.LinearGradient(
-                        0, 1, 0, 0,       //4个参数用于配置渐变色的起止位置, 这4个参数依次对应右/下/左/上四个方位. 而0 0 0 1则代表渐变色从正上方开始
-                        [
-                            { offset: 1, color: '#53E7C8' },
-                            { offset: 0, color: '#29CB97 ' }
-                        ]
-                    ),
-                    new echarts.graphic.LinearGradient(
-                        0, 1, 0, 0,       //4个参数用于配置渐变色的起止位置, 这4个参数依次对应右/下/左/上四个方位. 而0 0 0 1则代表渐变色从正上方开始
-                        [
-                            { offset: 1, color: '#FB9199 ' },
-                            { offset: 0, color: '#F65860 ' }
-                        ]
-                    )
-                ],
-                name: 'Nightingale Chart',
-                type: 'pie',
-                radius: '55%',
-                center: ['50%', '50%'],
-                roseType: 'radius',
-                data: dataList.value
-            }
-        ]
-    };
-    echartsObj.setOption(option);
-}
+  let echartsObj = echarts.init(piechart.value, "macarons");
+  var dateArray = getRecentDays();
+  var option = {
+    series: [
+      {
+        color: [
+          new echarts.graphic.LinearGradient(
+            0,
+            1,
+            0,
+            0, //4个参数用于配置渐变色的起止位置, 这4个参数依次对应右/下/左/上四个方位. 而0 0 0 1则代表渐变色从正上方开始
+            [
+              { offset: 1, color: "#B558F6" },
+              { offset: 0, color: "#DB91FB" },
+            ]
+          ),
+          new echarts.graphic.LinearGradient(
+            0,
+            1,
+            0,
+            0, //4个参数用于配置渐变色的起止位置, 这4个参数依次对应右/下/左/上四个方位. 而0 0 0 1则代表渐变色从正上方开始
+            [
+              { offset: 1, color: "#FFE400 " },
+              { offset: 0, color: "#FEC400" },
+            ]
+          ),
+          new echarts.graphic.LinearGradient(
+            0,
+            1,
+            0,
+            0, //4个参数用于配置渐变色的起止位置, 这4个参数依次对应右/下/左/上四个方位. 而0 0 0 1则代表渐变色从正上方开始
+            [
+              { offset: 1, color: "#53E7C8" },
+              { offset: 0, color: "#29CB97 " },
+            ]
+          ),
+          new echarts.graphic.LinearGradient(
+            0,
+            1,
+            0,
+            0, //4个参数用于配置渐变色的起止位置, 这4个参数依次对应右/下/左/上四个方位. 而0 0 0 1则代表渐变色从正上方开始
+            [
+              { offset: 1, color: "#FB9199 " },
+              { offset: 0, color: "#F65860 " },
+            ]
+          ),
+        ],
+        name: "Nightingale Chart",
+        type: "pie",
+        radius: "55%",
+        center: ["50%", "50%"],
+        roseType: "radius",
+        data: dataList.value,
+      },
+    ],
+  };
+  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);
-    }
-    return resultArray;
-}
-
+  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;
+};
 
 onMounted(() => {
-    // drawEchart();
-    initData();
-})
+  // drawEchart();
+  initData();
+});
 </script>
 <style scoped lang="scss">
 .pieEchartsClass {
-    height: 28vh;
-    width: 20vw;
+  height: 28vh;
+  width: 20vw;
+  min-width: 400px;
 
-    .titleBg {
-        background: url("@/assets/images/homeImages/titleBg.png") no-repeat;
-        background-size: 100% 100%;
-    }
+  .titleBg {
+    background: url("@/assets/images/homeImages/titleBg.png") no-repeat;
+    background-size: 100% 100%;
+  }
 
-    .titleFont {
-        font-family: Source Han Sans CN, Source Han Sans CN;
-        font-weight: 400;
-        font-size: 18px;
-        color: #FFFFFF;
-        line-height: 4vh;
-        text-shadow: 0px 4px 0px rgba(10, 40, 95, 0.69);
-        text-align: left;
-        font-style: normal;
-        text-transform: none;
-        margin-left: 2vw;
-        letter-spacing: 5px;
-    }
+  .titleFont {
+    font-family: Source Han Sans CN, Source Han Sans CN;
+    font-weight: 400;
+    font-size: 18px;
+    color: #ffffff;
+    line-height: 4vh;
+    text-shadow: 0px 4px 0px rgba(10, 40, 95, 0.69);
+    text-align: left;
+    font-style: normal;
+    text-transform: none;
+    margin-left: 2vw;
+    letter-spacing: 5px;
+  }
 
-    .divContent {
-        background: url("@/assets/images/homeImages/contentBg.png") no-repeat;
-        background-size: 100% 100%;
-        width: 20vw;
-        height: 22vh;
-    }
+  .divContent {
+    background: url("@/assets/images/homeImages/contentBg.png") no-repeat;
+    background-size: 100% 100%;
+    width: 20vw;
+    height: 22vh;
+    min-width: 400px;
+  }
 }
 </style>

src/components/HomeComponents/stationPie.vue

@@ -4,50 +4,163 @@
       <div class="titleBg">
         <div class="titleFont">电子站台统计</div>
       </div>
-      <div class="divContent" style="display: flex;flex-direction: row;justify-content: space-around;align-items: center;padding-right: 1vw;">
-        <div style="display: flex;flex-direction: row;margin-top: 1vh;padding-left: 1vw;">
-          <div ref="stationchart" style="width:10vw;height: 20vh;"></div>
-          <div style="display: flex;flex-direction: column;">
-            <div class="countDiv" style="display: flex;flex-direction: column;justify-content: space-between;position:relative;">
-              <div><img style="width: 2vw;height: 1vh;;position:absolute;top:0" src="@/assets/images/homeImages/up.png" /></div>
-              <div style="display: flex;flex-direction: row;justify-content: space-between;padding-left: 0.5vw;padding-right: 1vw;">
+      <div
+        class="divContent"
+        style="
+          display: flex;
+          flex-direction: row;
+          justify-content: space-around;
+          align-items: center;
+          padding-right: 1vw;
+        "
+      >
+        <div
+          style="display: flex; flex-direction: row; margin-top: 1vh; padding-left: 1vw"
+        >
+          <div
+            ref="stationchart"
+            style="width: 10vw; height: 20vh; min-width: 160px"
+          ></div>
+          <div style="display: flex; flex-direction: column">
+            <div
+              class="countDiv"
+              style="
+                display: flex;
+                flex-direction: column;
+                justify-content: space-between;
+                position: relative;
+              "
+            >
+              <div>
+                <img
+                  style="width: 2vw; height: 1vh; position: absolute; top: 0"
+                  src="@/assets/images/homeImages/up.png"
+                />
+              </div>
+              <div
+                style="
+                  display: flex;
+                  flex-direction: row;
+                  justify-content: space-between;
+                  padding-left: 0.5vw;
+                  padding-right: 1vw;
+                "
+              >
                 <div class="typeClass">总设备数</div>
-                <div class="countClass" style="color: #FEF822;">
-                  {{totaldevice }}
+                <div class="countClass" style="color: #fef822">
+                  {{ totaldevice }}
                 </div>
               </div>
-              <div style="margin-left: 6vw;">
-                <img style="width: 2vw;height: 1vh;position:absolute; bottom:0;right:0" src="@/assets/images/homeImages/bottom.png" />
+              <div style="margin-left: 6vw">
+                <img
+                  style="width: 2vw; height: 1vh; position: absolute; bottom: 0; right: 0"
+                  src="@/assets/images/homeImages/bottom.png"
+                />
               </div>
             </div>
-            <div class="countDiv" style="display: flex;flex-direction: column;justify-content: space-between;margin-top: 0.5vh;position:relative;">
-              <div><img style="width: 2vw;height: 1vh;position:absolute;top:0" src="@/assets/images/homeImages/up.png" /></div>
-              <div style="display: flex;flex-direction: row;justify-content: space-between;padding-left: 0.5vw;padding-right: 1vw;">
+            <div
+              class="countDiv"
+              style="
+                display: flex;
+                flex-direction: column;
+                justify-content: space-between;
+                margin-top: 0.5vh;
+                position: relative;
+              "
+            >
+              <div>
+                <img
+                  style="width: 2vw; height: 1vh; position: absolute; top: 0"
+                  src="@/assets/images/homeImages/up.png"
+                />
+              </div>
+              <div
+                style="
+                  display: flex;
+                  flex-direction: row;
+                  justify-content: space-between;
+                  padding-left: 0.5vw;
+                  padding-right: 1vw;
+                "
+              >
                 <div class="typeClass">在线设备</div>
-                <div class="countClass" style="color: #22FE31;">{{ onlinedevice }}</div>
+                <div class="countClass" style="color: #22fe31">{{ onlinedevice }}</div>
               </div>
-              <div style="margin-left: 6vw;">
-                <img style="width: 2vw;height: 1vh;position:absolute; bottom:0;right:0" src="@/assets/images/homeImages/bottom.png" />
+              <div style="margin-left: 6vw">
+                <img
+                  style="width: 2vw; height: 1vh; position: absolute; bottom: 0; right: 0"
+                  src="@/assets/images/homeImages/bottom.png"
+                />
               </div>
             </div>
-            <div class="countDiv" style="display: flex;flex-direction: column;justify-content: space-between;margin-top: 0.5vh;position:relative;">
-              <div><img style="width: 2vw;height: 1vh;position:absolute;top:0" src="@/assets/images/homeImages/up.png" /></div>
-              <div style="display: flex;flex-direction: row;justify-content: space-between;padding-left: 0.5vw;padding-right: 1vw;">
+            <div
+              class="countDiv"
+              style="
+                display: flex;
+                flex-direction: column;
+                justify-content: space-between;
+                margin-top: 0.5vh;
+                position: relative;
+              "
+            >
+              <div>
+                <img
+                  style="width: 2vw; height: 1vh; position: absolute; top: 0"
+                  src="@/assets/images/homeImages/up.png"
+                />
+              </div>
+              <div
+                style="
+                  display: flex;
+                  flex-direction: row;
+                  justify-content: space-between;
+                  padding-left: 0.5vw;
+                  padding-right: 1vw;
+                "
+              >
                 <div class="typeClass">箱体总数</div>
-                <div class="countClass" style="color: #FEF822;">{{ totalcabinet }}</div>
+                <div class="countClass" style="color: #fef822">{{ totalcabinet }}</div>
               </div>
-              <div style="margin-left: 6vw;">
-                <img style="width: 2vw;height: 1vh;position:absolute; bottom:0;right:0" src="@/assets/images/homeImages/bottom.png" />
+              <div style="margin-left: 6vw">
+                <img
+                  style="width: 2vw; height: 1vh; position: absolute; bottom: 0; right: 0"
+                  src="@/assets/images/homeImages/bottom.png"
+                />
               </div>
             </div>
-            <div class="countDiv" style="display: flex;flex-direction: column;justify-content: space-between;margin-top: 0.5vh;position:relative;">
-              <div><img style="width: 2vw;height: 1vh;position:absolute;top:0" src="@/assets/images/homeImages/up.png" /></div>
-              <div style="display: flex;flex-direction: row;justify-content: space-between;padding-left: 0.5vw;padding-right: 1vw;">
+            <div
+              class="countDiv"
+              style="
+                display: flex;
+                flex-direction: column;
+                justify-content: space-between;
+                margin-top: 0.5vh;
+                position: relative;
+              "
+            >
+              <div>
+                <img
+                  style="width: 2vw; height: 1vh; position: absolute; top: 0"
+                  src="@/assets/images/homeImages/up.png"
+                />
+              </div>
+              <div
+                style="
+                  display: flex;
+                  flex-direction: row;
+                  justify-content: space-between;
+                  padding-left: 0.5vw;
+                  padding-right: 1vw;
+                "
+              >
                 <div class="typeClass">空闲箱体</div>
-                <div class="countClass" style="color: #22FE31;">{{ kxcabinet }}</div>
+                <div class="countClass" style="color: #22fe31">{{ kxcabinet }}</div>
               </div>
-              <div style="margin-left: 6vw;">
-                <img style="width: 2vw;height: 1vh; position:absolute; bottom:0;right:0" src="@/assets/images/homeImages/bottom.png" />
+              <div style="margin-left: 6vw">
+                <img
+                  style="width: 2vw; height: 1vh; position: absolute; bottom: 0; right: 0"
+                  src="@/assets/images/homeImages/bottom.png"
+                />
               </div>
             </div>
           </div>
@@ -88,14 +201,13 @@
   </div>
 </template>
 <script setup name="Index" lang="ts">
-import * as echarts from 'echarts';
-import { getDicts } from '@/api/system/dict/data'
-import { getInfo, getInfoWait, getBoxInfo, getLock, openall } from "@/api/data"
-import { cabinetboxstatic,devicestatic } from '@/api/gpsData';
+import * as echarts from "echarts";
+import { getDicts } from "@/api/system/dict/data";
+import { getInfo, getInfoWait, getBoxInfo, getLock, openall } from "@/api/data";
+import { cabinetboxstatic, devicestatic } from "@/api/gpsData";
 
 const stationchart = ref();
 
-
 const totalcabinet = ref(0);
 const kxcabinet = ref(0);
 
@@ -111,7 +223,7 @@ const getBoxs = () => {
       kxcabinet.value += res[key].unuse ?? 0;
     }
   });
-}
+};
 
 const getdevices = () => {
   devicestatic().then((res) => {
@@ -119,239 +231,242 @@ const getdevices = () => {
     onlinedevice.value = 0;
     for (let key in res) {
       if (res[key]["name"] == "快递柜") {
-         totaldevice.value += 1;
-         onlinedevice.value += res[key].offline =="1"?0:1;
+        totaldevice.value += 1;
+        onlinedevice.value += res[key].offline == "1" ? 0 : 1;
       }
-
     }
-    drawEchart()
+    drawEchart();
   });
-}
-
+};
 
 const device = ref({
-    total: 0,
-    online: 0,
-    boxs: 0,
-    kongxian: 0
-})
+  total: 0,
+  online: 0,
+  boxs: 0,
+  kongxian: 0,
+});
 
 const getDeviceData = () => {
-    getDicts('tbl_sites').then(res => {
-        initSiteData(res)
-    })
-}
+  getDicts("tbl_sites").then((res) => {
+    initSiteData(res);
+  });
+};
 
 const isJSON = (str) => {
-    if (typeof str == 'string') {
-        try {
-            var obj = JSON.parse(str);
-            if (typeof obj == 'object' && obj) {
-                return true;
-            } else {
-                return false;
-            }
-
-        } catch (e) {
-            return false;
-        }
+  if (typeof str == "string") {
+    try {
+      var obj = JSON.parse(str);
+      if (typeof obj == "object" && obj) {
+        return true;
+      } else {
+        return false;
+      }
+    } catch (e) {
+      return false;
     }
-}
+  }
+};
 
 const initSiteData = async (res) => {
-    console.log(device.value.total);
-    var total = 0
-    for (var index in res.data) {
-        // console.log(isNull(res.data[index].remark))
-        if (res.data[index].remark != null && res.data[index].remark != '' && isJSON(res.data[index].remark)) {
-            var devices = JSON.parse(res.data[index].remark)
-            total += devices.length
-            for (var i in devices) {
-                if (devices[i].type == 'cabinet') {
-                    let boxinfo = null
-                    try {
-                         boxinfo =  await getInfo(devices[i].code);
-                    }
-                    catch (e) {
-                        // TODO sth with e
-                    }
-                    if(boxinfo != null){
-                         console.log(boxinfo);
-                    }
-                }
-            }
+  console.log(device.value.total);
+  var total = 0;
+  for (var index in res.data) {
+    // console.log(isNull(res.data[index].remark))
+    if (
+      res.data[index].remark != null &&
+      res.data[index].remark != "" &&
+      isJSON(res.data[index].remark)
+    ) {
+      var devices = JSON.parse(res.data[index].remark);
+      total += devices.length;
+      for (var i in devices) {
+        if (devices[i].type == "cabinet") {
+          let boxinfo = null;
+          try {
+            boxinfo = await getInfo(devices[i].code);
+          } catch (e) {
+            // TODO sth with e
+          }
+          if (boxinfo != null) {
+            console.log(boxinfo);
+          }
         }
+      }
     }
-    // device.value.total = total
-}
+  }
+  // device.value.total = total
+};
 
 const drawEchart = () => {
-    let echartsObj = echarts.init(stationchart.value, "macarons");
-    var dateArray = getRecentDays();
-    var option = {
-        color: ['#707070', '#0EEFFF'],
-        title: {
-            // 图形标题(如果想要换行则使用ES6 `` 模板字符串)
-            // 例如： `示例
-            //   这里的文字会变为第二行(因为会保留格式)
-            text: `${((onlinedevice.value/totaldevice.value)*100).toFixed(0)}%`,
-            subtext: "在线率",
-            left: "center",//对齐方式居中
-            top: "40%",//距离顶部
-            textStyle: {//文字配置
-                color: "#ffffff",//文字颜色
-                fontSize: 30,//字号
-                align: "center"//对齐方式
-            },
-            subtextStyle: {
-                color: "#C1D2E4"
-            }
+  let echartsObj = echarts.init(stationchart.value, "macarons");
+  var dateArray = getRecentDays();
+  var option = {
+    color: ["#707070", "#0EEFFF"],
+    title: {
+      // 图形标题(如果想要换行则使用ES6 `` 模板字符串)
+      // 例如： `示例
+      //   这里的文字会变为第二行(因为会保留格式)
+      text: `${((onlinedevice.value / totaldevice.value) * 100).toFixed(0)}%`,
+      subtext: "在线率",
+      left: "center", //对齐方式居中
+      top: "40%", //距离顶部
+      textStyle: {
+        //文字配置
+        color: "#ffffff", //文字颜色
+        fontSize: 30, //字号
+        align: "center", //对齐方式
+      },
+      subtextStyle: {
+        color: "#C1D2E4",
+      },
+    },
+    series: [
+      {
+        name: "Access From",
+        type: "pie",
+        radius: ["65%", "80%"],
+        avoidLabelOverlap: false,
+        label: {
+          show: false,
+          position: "center",
         },
-        series: [
-            {
-                name: 'Access From',
-                type: 'pie',
-                radius: ['65%', '80%'],
-                avoidLabelOverlap: false,
-                label: {
-                    show: false,
-                    position: 'center'
-                },
-                labelLine: {
-                    show: false
-                },
-                data: [
-                    { value: totaldevice.value-onlinedevice.value, name: '在线' },
-                    { value: onlinedevice.value, name: '不在线' },
-                ]
-            }
-        ]
-    };
-    echartsObj.setOption(option);
-}
+        labelLine: {
+          show: false,
+        },
+        data: [
+          { value: totaldevice.value - onlinedevice.value, name: "在线" },
+          { value: onlinedevice.value, name: "不在线" },
+        ],
+      },
+    ],
+  };
+  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);
-    }
-    return resultArray;
-}
-
+  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;
+};
 
 onMounted(() => {
-    getBoxs();
+  getBoxs();
   getdevices();
-    getDeviceData();
-    drawEchart();
-})
+  getDeviceData();
+  drawEchart();
+});
 </script>
 <style lang="scss">
 .stationEchartsClass {
-    height: 20vh;
-    width: 20vw;
+  height: 20vh;
+  width: 20vw;
+  min-width: 400px;
 
-    .titleBg {
-        background: url("@/assets/images/homeImages/titleBg.png") no-repeat;
-        background-size: 100% 100%;
-    }
+  .titleBg {
+    background: url("@/assets/images/homeImages/titleBg.png") no-repeat;
+    background-size: 100% 100%;
+  }
 
-    .titleFont {
-        font-family: Source Han Sans CN, Source Han Sans CN;
-        font-weight: 400;
-        font-size: 18px;
-        color: #FFFFFF;
-        line-height: 4vh;
-        text-shadow: 0px 4px 0px rgba(10, 40, 95, 0.69);
-        text-align: left;
-        font-style: normal;
-        text-transform: none;
-        margin-left: 2vw;
-        letter-spacing: 5px;
-    }
-
-    .divContent {
-        background: url("@/assets/images/homeImages/contentBg.png") no-repeat;
-        background-size: 100% 100%;
-        width: 20vw;
-        height: 22vh;
-    }
+  .titleFont {
+    font-family: Source Han Sans CN, Source Han Sans CN;
+    font-weight: 400;
+    font-size: 18px;
+    color: #ffffff;
+    line-height: 4vh;
+    text-shadow: 0px 4px 0px rgba(10, 40, 95, 0.69);
+    text-align: left;
+    font-style: normal;
+    text-transform: none;
+    margin-left: 2vw;
+    letter-spacing: 5px;
+  }
 
+  .divContent {
+    background: url("@/assets/images/homeImages/contentBg.png") no-repeat;
+    background-size: 100% 100%;
+    width: 20vw;
+    height: 22vh;
+    min-width: 400px;
+  }
 }
 
 .countDiv {
-    width: 8vw;
-    height: 4vh;
-    background-color: #375785;
+  width: 8vw;
+  height: 4vh;
+  min-width: 200px;
+  background-color: #375785;
 }
 
 .countClass {
-    font-family: Source Han Sans CN, Source Han Sans CN;
-    font-weight: bold;
-    font-size: 18px;
-    letter-spacing: 5px;
-    text-align: right;
-    font-style: normal;
-    text-transform: none;
-    line-height: 1vh;
-    height: 1vh;
+  font-family: Source Han Sans CN, Source Han Sans CN;
+  font-weight: bold;
+  font-size: 18px;
+  letter-spacing: 5px;
+  text-align: right;
+  font-style: normal;
+  text-transform: none;
+  line-height: 1vh;
+  height: 1vh;
 }
 
 .typeClass {
-    font-family: SourceHanSansCN-Regular, SourceHanSansCN-Regular;
-    font-weight: normal;
-    font-size: 14px;
-    color: #FFFFFE;
-    line-height: 1vh;
-    height: 1vh;
-    letter-spacing: 2px;
-    text-align: left;
-    font-style: normal;
-    text-transform: none;
+  font-family: SourceHanSansCN-Regular, SourceHanSansCN-Regular;
+  font-weight: normal;
+  font-size: 14px;
+  color: #fffffe;
+  line-height: 1vh;
+  height: 1vh;
+  letter-spacing: 2px;
+  min-width: 100px;
+  text-align: left;
+  font-style: normal;
+  text-transform: none;
 }
 
 .stationkeyClass {
-    font-family: Source Han Sans CN, Source Han Sans CN;
-    font-weight: 400;
-    font-size: 14px;
-    color: #000000;
-    line-height: 1vh;
-    height: 1vh;
-    text-align: left;
-    font-style: normal;
-    text-transform: none;
+  font-family: Source Han Sans CN, Source Han Sans CN;
+  font-weight: 400;
+  font-size: 14px;
+  color: #000000;
+  line-height: 1vh;
+  height: 1vh;
+  text-align: left;
+  font-style: normal;
+  text-transform: none;
 }
 
 .stationvalueClass {
-    font-family: Source Han Sans CN, Source Han Sans CN;
-    font-weight: bold;
-    font-size: 24px;
-    color: #000000;
-    line-height: 11px;
-    text-align: right;
-    font-style: normal;
-    text-transform: none;
+  font-family: Source Han Sans CN, Source Han Sans CN;
+  font-weight: bold;
+  font-size: 24px;
+  color: #000000;
+  line-height: 11px;
+  text-align: right;
+  font-style: normal;
+  text-transform: none;
 }
 
 .stationunitClass {
-    font-family: Source Han Sans CN, Source Han Sans CN;
-    font-weight: 400;
-    font-size: 12px;
-    color: #000000;
-    line-height: 11px;
-    text-align: left;
-    font-style: normal;
-    text-transform: none;
+  font-family: Source Han Sans CN, Source Han Sans CN;
+  font-weight: 400;
+  font-size: 12px;
+  color: #000000;
+  line-height: 11px;
+  text-align: left;
+  font-style: normal;
+  text-transform: none;
 }
 
 .imageDiv {
-    width: 9vw;
-    margin-top: 1vh;
+  width: 9vw;
+  margin-top: 1vh;
 }
 </style>

src/components/HomeComponents/warnTable.vue

@@ -5,15 +5,25 @@
         <div class="titleFont">设备告警</div>
       </div>
       <div class="divContent">
-        <div style="padding-left: 1vw;max-height: 30vh;overflow-y: scroll;" class="tableClass">
-          <div v-for="(item, index) in messageList" style="margin-top:20px;" :key="index">
-            <div style="display: flex;flex-direction: row;justify-content: space-around;align-items: center;">
+        <div
+          style="padding-left: 1vw; max-height: 30vh; overflow-y: scroll"
+          class="tableClass"
+        >
+          <div v-for="(item, index) in messageList" style="margin-top: 20px" :key="index">
+            <div
+              style="
+                display: flex;
+                flex-direction: row;
+                justify-content: space-around;
+                align-items: center;
+              "
+            >
               <div>
                 <img v-if="item.type == 1" src="@/assets/images/home/Rectangle8.png" />
                 <img v-if="item.type == 2" src="@/assets/images/home/Rectangle8(1).png" />
               </div>
               <div class="contentClass">{{ item.content }}</div>
-              <div class="timeClass">{{moment(item.time).format("MM/DD HH:mm") }}</div>
+              <div class="timeClass">{{ moment(item.time).format("MM/DD HH:mm") }}</div>
             </div>
             <el-divider />
           </div>
@@ -25,159 +35,157 @@
 </template>
 
 <script setup name="CarInfo" lang="ts">
-import { offlinelist } from '@/api/gpsData';
-import moment from 'moment';
+import { offlinelist } from "@/api/gpsData";
+import moment from "moment";
 
 const messageList = ref([]);
 
 const getList = () => {
-  offlinelist().then(res => {
+  offlinelist().then((res) => {
     let msg: any[] = [];
-    Object.keys(res).forEach(i => {
+    Object.keys(res).forEach((i) => {
       let d = res[i];
       if (d["station"].indexOf("闽") != -1) {
         d["type"] = 1;
         d["content"] = d["station"] + "Gps离线，请及时处理!";
       } else {
         d["type"] = 2;
-         d["content"] = d["station"] + "快递柜离线，请及时处理!";
+        d["content"] = d["station"] + "快递柜离线，请及时处理!";
       }
       msg.push(res[i]);
-    })
+    });
     //排序
     msg = msg.sort((a, b) => {
       return moment(b.time).unix() - moment(a.time).unix();
-    })
+    });
     messageList.value = msg;
-
-  })
+  });
 };
 
-
 onMounted(() => {
-    getList();
+  getList();
 });
 </script>
 <style scoped lang="scss">
 .warnPageClass {
-    height: 28vh;
-
-    .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;
-    }
-
-    .titleBg {
-        background: url("@/assets/images/homeImages/titleBg.png") no-repeat;
-        background-size: 100% 100%;
-    }
-
-    .titleFont {
-        font-family: Source Han Sans CN, Source Han Sans CN;
-        font-weight: 400;
-        font-size: 18px;
-        color: #FFFFFF;
-        line-height: 4vh;
-        text-shadow: 0px 4px 0px rgba(10, 40, 95, 0.69);
-        text-align: left;
-        font-style: normal;
-        text-transform: none;
-        margin-left: 2vw;
-        letter-spacing: 5px;
-    }
-
-    .divContent {
-        background: url("@/assets/images/homeImages/tableDiv.png") no-repeat;
-        background-size: 100% 100%;
-        width: 20vw;
-        height: 30vh;
-        padding-right: 1vw;
-    }
-}
-
-.el-divider--horizontal{
-     margin: 8px 0;
-     background: 0 0;
-     border-top: 1px dashed #e8eaec;
- }
-
-.tableClass::-webkit-scrollbar {
-    display: none;
-}
+  height: 28vh;
+  min-width: 400px;
 
-
-.contentClass {
-    font-family: Roboto, Roboto;
-    font-weight: 400;
-    font-size: 12px;
-    color: #C1D2E4;
-    line-height: 17px;
-    text-align: left;
-    font-style: normal;
-    text-transform: none;
-}
-
-.stationClass {
+  .title {
     font-family: Source Han Sans CN, Source Han Sans CN;
     font-weight: bold;
-    font-size: 13px;
-    color: #C1D2E4;
+    font-size: 20px;
+    color: #000000;
     line-height: 24px;
     text-align: left;
     font-style: normal;
     text-transform: none;
-}
+  }
 
-.timeClass {
+  .titleBg {
+    background: url("@/assets/images/homeImages/titleBg.png") no-repeat;
+    background-size: 100% 100%;
+  }
+
+  .titleFont {
     font-family: Source Han Sans CN, Source Han Sans CN;
     font-weight: 400;
-    font-size: 13px;
-    color: #C1D2E4;
-    line-height: 24px;
+    font-size: 18px;
+    color: #ffffff;
+    line-height: 4vh;
+    text-shadow: 0px 4px 0px rgba(10, 40, 95, 0.69);
     text-align: left;
     font-style: normal;
     text-transform: none;
+    margin-left: 2vw;
+    letter-spacing: 5px;
+  }
+
+  .divContent {
+    background: url("@/assets/images/homeImages/tableDiv.png") no-repeat;
+    background-size: 100% 100%;
+    width: 20vw;
+    height: 30vh;
+    min-width: 400px;
+    padding-right: 1vw;
+  }
+}
+
+.el-divider--horizontal {
+  margin: 8px 0;
+  background: 0 0;
+  border-top: 1px dashed #e8eaec;
+}
+
+.tableClass::-webkit-scrollbar {
+  display: none;
+}
+
+.contentClass {
+  font-family: Roboto, Roboto;
+  font-weight: 400;
+  font-size: 12px;
+  color: #c1d2e4;
+  line-height: 17px;
+  text-align: left;
+  font-style: normal;
+  text-transform: none;
+}
+
+.stationClass {
+  font-family: Source Han Sans CN, Source Han Sans CN;
+  font-weight: bold;
+  font-size: 13px;
+  color: #c1d2e4;
+  line-height: 24px;
+  text-align: left;
+  font-style: normal;
+  text-transform: none;
+}
+
+.timeClass {
+  font-family: Source Han Sans CN, Source Han Sans CN;
+  font-weight: 400;
+  font-size: 13px;
+  color: #c1d2e4;
+  line-height: 24px;
+  text-align: left;
+  font-style: normal;
+  text-transform: none;
 }
 
 .el-divider--horizontal {
-    margin-top: 10px;
-    margin-bottom: 0;
-    ;
+  margin-top: 10px;
+  margin-bottom: 0;
 }
 
 .carClass {
-    background: url("@/assets/images/home/Bg(2).png") no-repeat;
-    background-size: 100% 100%;
-    font-family: Source Han Sans CN, Source Han Sans CN;
-    font-weight: 400;
-    font-size: 13px;
-    color: #FFFFFF;
-    line-height: 20px;
-    text-align: left;
-    font-style: normal;
-    text-transform: none;
-    width: 5vw;
-    text-align: center;
+  background: url("@/assets/images/home/Bg(2).png") no-repeat;
+  background-size: 100% 100%;
+  font-family: Source Han Sans CN, Source Han Sans CN;
+  font-weight: 400;
+  font-size: 13px;
+  color: #ffffff;
+  line-height: 20px;
+  text-align: left;
+  font-style: normal;
+  text-transform: none;
+  width: 5vw;
+  text-align: center;
 }
 
 .goodClass {
-    background: url("@/assets/images/home/Bg(3).png") no-repeat;
-    background-size: 100% 100%;
-    font-family: Source Han Sans CN, Source Han Sans CN;
-    font-weight: 400;
-    font-size: 13px;
-    color: #6A4119;
-    line-height: 20px;
-    text-align: left;
-    font-style: normal;
-    text-transform: none;
-    width: 5vw;
-    text-align: center;
+  background: url("@/assets/images/home/Bg(3).png") no-repeat;
+  background-size: 100% 100%;
+  font-family: Source Han Sans CN, Source Han Sans CN;
+  font-weight: 400;
+  font-size: 13px;
+  color: #6a4119;
+  line-height: 20px;
+  text-align: left;
+  font-style: normal;
+  text-transform: none;
+  width: 5vw;
+  text-align: center;
 }
 </style>

src/views/home.vue

@@ -1,58 +1,78 @@
 <template>
   <div class="home">
-    <div class="header" style="position: absolute;z-index: 1000;">
+    <div class="header" style="position: absolute; z-index: 1000">
       <div class="headerTitle">农村客运系统</div>
     </div>
-    <countPageS style="position: absolute;top: 10vh;left: 1vw;z-index: 1000;"></countPageS>
-    <lineEchartsS style="position: absolute;top: 37vh;left: 1vw;z-index: 1000;"></lineEchartsS>
-    <messageTableS style="position: absolute;top: 65vh;left: 1vw;z-index: 1000;"></messageTableS>
-    <pieEchartsS style="position: absolute;top: 10vh;right: 1vw;z-index: 1000;"></pieEchartsS>
-    <stationPieS style="position: absolute;top:37vh;right: 1vw;z-index: 1000;"></stationPieS>
-    <warnTableS style="position: absolute;top: 65vh;right: 1vw;z-index: 1000;"></warnTableS>
-    <mapDiv :showMarket="showMarket" :darkType="darkType" style="width:100%;height:100vh;padding: 0 0 0 0" ref="mapElm"> </mapDiv>
+    <countPageS
+      style="position: absolute; top: 10vh; left: 1vw; z-index: 1000; min-width: 400px"
+    ></countPageS>
+    <lineEchartsS
+      style="position: absolute; top: 37vh; left: 1vw; z-index: 1000; min-width: 400px"
+    ></lineEchartsS>
+    <messageTableS
+      style="position: absolute; top: 65vh; left: 1vw; z-index: 1000; min-width: 400px"
+    ></messageTableS>
+    <pieEchartsS
+      style="position: absolute; top: 10vh; right: 1vw; z-index: 1000; min-width: 400px"
+    ></pieEchartsS>
+    <stationPieS
+      style="position: absolute; top: 37vh; right: 1vw; z-index: 1000; min-width: 400px"
+    ></stationPieS>
+    <warnTableS
+      style="position: absolute; top: 65vh; right: 1vw; z-index: 1000; min-width: 400px"
+    ></warnTableS>
+    <mapDiv
+      :showMarket="showMarket"
+      :darkType="darkType"
+      style="width: 100%; height: 100vh; padding: 0 0 0 0"
+      ref="mapElm"
+    >
+    </mapDiv>
   </div>
 </template>
 
 <script setup name="Index" lang="ts">
-import { initWebSocket } from '@/utils/websocket';
-import mapDiv from "@/components/Map/map.vue"
+import { initWebSocket } from "@/utils/websocket";
+import mapDiv from "@/components/Map/map.vue";
 import countPageS from "@/components/HomeComponents/countPage.vue";
 import lineEchartsS from "@/components/HomeComponents/lineEcharts.vue";
-import messageTableS from '@/components/HomeComponents/messageTable.vue';
-import pieEchartsS from '@/components/HomeComponents/pieEcharts.vue';
-import stationPieS from '@/components/HomeComponents/stationPie.vue';
-import warnTableS from '@/components/HomeComponents/warnTable.vue';
-
+import messageTableS from "@/components/HomeComponents/messageTable.vue";
+import pieEchartsS from "@/components/HomeComponents/pieEcharts.vue";
+import stationPieS from "@/components/HomeComponents/stationPie.vue";
+import warnTableS from "@/components/HomeComponents/warnTable.vue";
 
 const showMarket = ref(true);
 const darkType = ref(true);
 
 onMounted(() => {
-  let protocol = window.location.protocol === 'https:' ? 'wss://' : 'ws://'
-  initWebSocket(protocol + window.location.host + import.meta.env.VITE_APP_BASE_API + "/resource/websocket");
+  let protocol = window.location.protocol === "https:" ? "wss://" : "ws://";
+  initWebSocket(
+    protocol +
+      window.location.host +
+      import.meta.env.VITE_APP_BASE_API +
+      "/resource/websocket"
+  );
 });
 
 const goTarget = (url: string) => {
-  window.open(url, '__blank')
-}
+  window.open(url, "__blank");
+};
 </script>
 
 <style scoped lang="scss">
 .home {
-
   .header {
     background: url("@/assets/images/header.png") no-repeat;
     background-size: 100% 100%;
     width: 100%;
     height: 8vh;
-
   }
 
   .headerTitle {
     font-family: Source Han Sans CN, Source Han Sans CN;
     font-weight: bold;
     font-size: 42px;
-    color: #FFFFFF;
+    color: #ffffff;
     line-height: 8vh;
     letter-spacing: 10px;
     text-align: center;

src/views/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="home">
     <div style="display: flex; flex-direction: row; width: 100%">
-      <div style="display: flex; flex-direction: column; width: 24%; min-width: 300px">
+      <div style="display: flex; flex-direction: column; width: 24%; min-width: 400px">
         <countPage style="width: 100%"></countPage>
         <lineEcharts style="width: 100%; margin-top: 1vh"></lineEcharts>
         <messageTable style="width: 100%; margin-top: 1vh"></messageTable>

src/views/yunying/scheduling/index.vue

@@ -127,10 +127,8 @@
               </div>
             </div>
             <div style="position: absolute; bottom: 10px; right: 6px; font-size: 15px">
-              <span>客流：{{ gettotalpeople(item, 11) }}人 </span>
-              <span style="margin-left: 10px"
-                >乘客：{{ gettotalpeople(item, 0) }}人
-              </span>
+              <span>客流：{{ item.peoplecount.totalin }}人 </span>
+              <span style="margin-left: 10px">乘客：{{ item.peoplecount.total }}人 </span>
               <!-- <span style="margin-left: 10px;">货物：11个</span> -->
             </div>
           </div>
@@ -469,38 +467,53 @@ const getScheduleList = async () => {
   // carScheduleList.value = res.rows;
 
   res.rows.map((i) => {
+    var t = moment(i.scheduleDate).format("YYYY-MM-DD");
+    var r = "|" + t + " ";
+    var tt = t + " " + getTimeFormat(i.pathInfo).replaceAll("-", r);
     var pathLine = JSON.parse(i.pathInfo).pathLine;
     var endTime =
       moment(date).format("YYYY-MM-DD") + " " + pathLine[pathLine.length - 1].planInTime;
     // console.log(new Date().getTime() )
-    // console.log(new Date(endTime).getTime())
-    if (new Date().getTime() < new Date(endTime).getTime()) {
-      if (i.ext1 != undefined && i.ext1 != null) {
-        var datajson = JSON.parse(i.ext1);
-        var times = Object.values(datajson)
-          .map((j) => {
-            if (j.intime == undefined || j.outtime == undefined) return "";
-            return j.intime + "|" + j.outtime;
-          })
-          .filter((i) => i != "")
-          .join("$");
-        times +=
-          (times.length > 0 ? "$" : "") +
-          i.scheduleDate +
-          "|" +
-          moment().format("YYYY-MM-DD HH:mm:ss");
-        getCountData({ "params[times]": `${times}` }).then((res1) => {
-          var pcount = {};
-          var index = 0;
-          Object.keys(datajson).map((j) => {
-            pcount[j] = res1.data[index++];
-          });
-          pcount["total"] = res1.data[index];
-          i["peoplecount"] = pcount;
-        });
-      }
-      carScheduleList.value.push(i);
+    if (tt.indexOf("|") == -1 || new Date().getTime() > new Date(endTime).getTime()) {
+      return i;
     }
+
+    getCountData({ "params[times]": tt, carNum: i.carNum }).then((res1) => {
+      var p = {};
+      p["total"] = res1.data[0].totalin + res1.data[0].totalout;
+      p["totalin"] = res1.data[0].totalin + res1.data[0].totalout;
+      p["totalout"] = res1.data[0].totalin + res1.data[0].totalout;
+      i["peoplecount"] = p;
+      carScheduleList.value.push(i);
+    });
+
+    // if (new Date().getTime() < new Date(endTime).getTime()) {
+    //   if (i.ext1 != undefined && i.ext1 != null) {
+    //     var datajson = JSON.parse(i.ext1);
+    //     var times = Object.values(datajson)
+    //       .map((j) => {
+    //         if (j.intime == undefined || j.outtime == undefined) return "";
+    //         return j.intime + "|" + j.outtime;
+    //       })
+    //       .filter((i) => i != "")
+    //       .join("$");
+    //     times +=
+    //       (times.length > 0 ? "$" : "") +
+    //       i.scheduleDate +
+    //       "|" +
+    //       moment().format("YYYY-MM-DD HH:mm:ss");
+    //     getCountData({ "params[times]": `${times}` }).then((res1) => {
+    //       var pcount = {};
+    //       var index = 0;
+    //       Object.keys(datajson).map((j) => {
+    //         pcount[j] = res1.data[index++];
+    //       });
+    //       pcount["total"] = res1.data[index];
+    //       i["peoplecount"] = pcount;
+    //     });
+    //   }
+    //   carScheduleList.value.push(i);
+    // }
   });
   //测试用
   // carScheduleList.value = res.rows;