Merge branch 'master' of http://git.xt.wenhq.top:8083/wenhongquan/khyznh-ui

# Conflicts:
#	src/views/statics/index.vue

src/api/data.ts

@@ -16,6 +16,14 @@ export const getpassenger1 = (data: any) => {
   });
 };
 
+export const getpassenger2 = (data: any) => {
+  return request({
+    url: '/statistic/passenger/flow1',
+    method: 'post',
+    data: JSON.stringify(data)
+  });
+};
+
 export const getInfo = (code) => {
   return request({
     url: '/system/common/cabinet/' + code + '/info',

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/components/HomeStatics/messageTable.vue

@@ -1,13 +1,34 @@
 <template>
-  <div class="countPageClass" style="padding-left: 1vw;padding-top: 1.5vh;padding-right: 2vw;">
+  <div
+    class="countPageClass"
+    style="padding-left: 1vw; padding-top: 1.5vh; padding-right: 2vw"
+  >
     <div>
-      <div class="title" style="padding-left: 0.5vw;">车辆报站</div>
-      <div style="margin-left: 1vw;max-height: 20vh;overflow-y: scroll;" class="tableClass">
+      <div class="title" style="padding-left: 0.5vw">车辆报站</div>
+      <div
+        style="margin-left: 1vw; max-height: 20vh; 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 class="contentClass">{{ "即将到达" }}</div>
-            <div class="stationClass">{{ item.station }}</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" style="width: 60px">{{ "即将到达" }}</div>
+            <div class="stationClass">
+              <el-popover placement="top-start" trigger="hover" :content="item.station">
+                <template #reference
+                  ><span>{{ item.station }}</span>
+                </template>
+              </el-popover>
+            </div>
             <div class="timeClass">{{ moment(item.time).format("MM/DD HH:mm") }}</div>
           </div>
           <el-divider />
@@ -18,121 +39,121 @@
 </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">
 .countPageClass {
-    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;
-    }
-}
-
-.tableClass::-webkit-scrollbar {
-      display: none;
-    }
+  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);
 
-.contentClass {
+  .title {
     font-family: Source Han Sans CN, Source Han Sans CN;
-    font-weight: 400;
-    font-size: 13px;
+    font-weight: bold;
+    font-size: 20px;
     color: #000000;
     line-height: 24px;
     text-align: left;
     font-style: normal;
     text-transform: none;
+  }
+}
+
+.tableClass::-webkit-scrollbar {
+  display: none;
+}
+
+.contentClass {
+  font-family: Source Han Sans CN, Source Han Sans CN;
+  font-weight: 400;
+  font-size: 13px;
+  color: #000000;
+  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: #000000;
-    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: #000000;
+  line-height: 24px;
+  text-align: left;
+  font-style: normal;
+  text-transform: none;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  width: 44px;
+  text-align: center;
 }
 
 .timeClass {
-    font-family: Source Han Sans CN, Source Han Sans CN;
-    font-weight: 400;
-    font-size: 13px;
-    color: #000000;
-    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: 10px;
+  color: #000000;
+  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: 10px;
-    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: 10px;
+  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: 10px;
-    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: 10px;
+  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/HomeStatics/stationPie.vue

@@ -1,28 +1,70 @@
 <template>
-  <div class="lineEchartsClass" style="padding-left: 1vw;padding-top: 1vh;">
+  <div class="lineEchartsClass" style="padding-left: 1vw; padding-top: 1vh">
     <div class="title">电子站台统计</div>
-    <div style="display: flex;flex-direction: row;margin-top: 1vh;padding-left: 1vw;">
-      <div ref="stationchart" style="width:11vw;height: 20vh;"></div>
-      <div style="width:10vw;margin-left: 1vw;padding-right: 1vw;height: 20vh;justify-content: center;display: flex;flex-direction: column;">
-        <div style="display: flex;flex-direction: row;justify-content: space-around;align-items: start;">
+    <div style="display: flex; flex-direction: row; margin-top: 1vh; padding-left: 1vw">
+      <div ref="stationchart" style="width: 11vw; height: 20vh; min-width: 170px"></div>
+      <div
+        style="
+          width: 10vw;
+          margin-left: 1vw;
+          padding-right: 1vw;
+          height: 20vh;
+          justify-content: center;
+          display: flex;
+          flex-direction: column;
+          min-width: 200px;
+        "
+      >
+        <div
+          style="
+            display: flex;
+            flex-direction: row;
+            justify-content: space-around;
+            align-items: start;
+          "
+        >
           <div class="stationkeyClass">设备总数</div>
           <div class="stationvalueClass">{{ totaldevice }}</div>
           <div class="stationunitClass">台</div>
         </div>
         <img class="imageDiv" src="@/assets/images/home/Bg(4).png" />
-        <div style="display: flex;flex-direction: row;justify-content: space-around;align-items: start;margin-top: 1vh;">
+        <div
+          style="
+            display: flex;
+            flex-direction: row;
+            justify-content: space-around;
+            align-items: start;
+            margin-top: 1vh;
+          "
+        >
           <div class="stationkeyClass">在线设备</div>
           <div class="stationvalueClass">{{ onlinedevice }}</div>
           <div class="stationunitClass">台</div>
         </div>
         <img class="imageDiv" src="@/assets/images/home/Bg(7).png" />
-        <div style="display: flex;flex-direction: row;justify-content: space-around;align-items: start;margin-top: 1vh;">
+        <div
+          style="
+            display: flex;
+            flex-direction: row;
+            justify-content: space-around;
+            align-items: start;
+            margin-top: 1vh;
+          "
+        >
           <div class="stationkeyClass">箱体总数</div>
           <div class="stationvalueClass">{{ totalcabinet }}</div>
           <div class="stationunitClass">台</div>
         </div>
         <img class="imageDiv" src="@/assets/images/home/Bg(5).png" />
-        <div style="display: flex;flex-direction: row;justify-content: space-around;align-items: start;margin-top: 1vh;">
+        <div
+          style="
+            display: flex;
+            flex-direction: row;
+            justify-content: space-around;
+            align-items: start;
+            margin-top: 1vh;
+          "
+        >
           <div class="stationkeyClass">空闲箱体</div>
           <div class="stationvalueClass">{{ kxcabinet }}</div>
           <div class="stationunitClass">台</div>
@@ -33,8 +75,8 @@
   </div>
 </template>
 <script setup name="Index">
-import { cabinetboxstatic,devicestatic } from '@/api/gpsData';
-import * as echarts from 'echarts';
+import { cabinetboxstatic, devicestatic } from "@/api/gpsData";
+import * as echarts from "echarts";
 
 const stationchart = ref();
 
@@ -44,7 +86,6 @@ const kxcabinet = ref(0);
 const totaldevice = ref(0);
 const onlinedevice = ref(0);
 
-
 const getBoxs = () => {
   cabinetboxstatic().then((res) => {
     totalcabinet.value = 0;
@@ -54,7 +95,7 @@ const getBoxs = () => {
       kxcabinet.value += res[key].unuse ?? 0;
     }
   });
-}
+};
 
 const getdevices = () => {
   devicestatic().then((res) => {
@@ -62,135 +103,133 @@ 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 drawEchart = () => {
-    let echartsObj = echarts.init(stationchart.value, "macarons");
-    var option = {
-        color:['#707070','#26EB96'],
-        title: {
-            // 图形标题(如果想要换行则使用ES6 `` 模板字符串)
-            // 例如： `示例
-            //   这里的文字会变为第二行(因为会保留格式)
-            text: `${((onlinedevice.value/totaldevice.value)*100).toFixed(0)}%`,
-            subtext: "在线率",
-            left: "center",//对齐方式居中
-            top: "35%",//距离顶部
-            textStyle: {//文字配置
-                color: "#000000",//文字颜色
-                fontSize: 30,//字号
-                align: "center"//对齐方式
-            },
-            subtextStyle:{
-                color:"#000000"
-            }
+  let echartsObj = echarts.init(stationchart.value, "macarons");
+  var option = {
+    color: ["#707070", "#26EB96"],
+    title: {
+      // 图形标题(如果想要换行则使用ES6 `` 模板字符串)
+      // 例如： `示例
+      //   这里的文字会变为第二行(因为会保留格式)
+      text: `${((onlinedevice.value / totaldevice.value) * 100).toFixed(0)}%`,
+      subtext: "在线率",
+      left: "center", //对齐方式居中
+      top: "35%", //距离顶部
+      textStyle: {
+        //文字配置
+        color: "#000000", //文字颜色
+        fontSize: 30, //字号
+        align: "center", //对齐方式
+      },
+      subtextStyle: {
+        color: "#000000",
+      },
+    },
+    series: [
+      {
+        name: "Access From",
+        type: "pie",
+        radius: ["80%", "100%"],
+        avoidLabelOverlap: false,
+        label: {
+          show: false,
+          position: "center",
         },
-        series: [
-            {
-                name: 'Access From',
-                type: 'pie',
-                radius: ['80%', '100%'],
-                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();
   getdevices();
-    drawEchart();
-})
+  drawEchart();
+});
 </script>
 <style lang="scss">
 .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;
-    }
-
-}
+  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);
 
-.stationkeyClass {
+  .title {
     font-family: Source Han Sans CN, Source Han Sans CN;
-    font-weight: 400;
-    font-size: 14px;
+    font-weight: bold;
+    font-size: 20px;
     color: #000000;
-    line-height: 15px;
+    line-height: 24px;
     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: 15px;
+  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;
+.imageDiv {
+  width: 9vw;
+  margin-top: 1vh;
 }
 </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,50 +1,58 @@
 <template>
   <div class="home">
-    <div style="display: flex;flex-direction: row;width: 100%;">
-      <div style="display: flex;flex-direction: column;width: 24%;">
-        <countPage style="width: 100%;"></countPage>
-        <lineEcharts style="width: 100%;margin-top: 1vh;"></lineEcharts>
-        <messageTable style="width: 100%;margin-top: 1vh;"></messageTable>
+    <div style="display: flex; flex-direction: row; width: 100%">
+      <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>
       </div>
-      <div style="width: 50%;margin-left: 1%;">
-        <mapDiv :showMarket="showMarket" :darkType="darkType" style="width:100%;height:86vh;padding: 0 0 0 0" ref="mapElm"></mapDiv>
+      <div style="width: 50%; margin-left: 1%">
+        <mapDiv
+          :showMarket="showMarket"
+          :darkType="darkType"
+          style="width: 100%; height: 86vh; padding: 0 0 0 0"
+          ref="mapElm"
+        ></mapDiv>
       </div>
-      <div style="width:24%;margin-left: 1%;">
+      <div style="width: 24%; margin-left: 1%; min-width: 400px">
         <pieEcharts></pieEcharts>
-        <stationPie style="width: 100%;margin-top: 1vh;"></stationPie>
-        <warnTable style="width: 100%;margin-top: 1vh;"></warnTable>
+        <stationPie style="width: 100%; margin-top: 1vh"></stationPie>
+        <warnTable style="width: 100%; margin-top: 1vh"></warnTable>
       </div>
     </div>
   </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 countPage from "@/components/HomeStatics/countPage.vue";
 import lineEcharts from "@/components/HomeStatics/lineEcharts.vue";
-import messageTable from '@/components/HomeStatics/messageTable.vue';
-import pieEcharts from '@/components/HomeStatics/pieEcharts.vue';
-import stationPie from '@/components/HomeStatics/stationPie.vue';
-import warnTable from '@/components/HomeStatics/warnTable.vue';
-
+import messageTable from "@/components/HomeStatics/messageTable.vue";
+import pieEcharts from "@/components/HomeStatics/pieEcharts.vue";
+import stationPie from "@/components/HomeStatics/stationPie.vue";
+import warnTable from "@/components/HomeStatics/warnTable.vue";
 
 const showMarket = ref(true);
 const darkType = ref(false);
 
 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 lang="scss">
 .home {
-
   height: 100%;
   width: 100%;
   padding: 1% 1% 1% 1% !important;
@@ -73,11 +81,7 @@ const goTarget = (url: string) => {
     margin: 0;
   }
 
-  font-family: "open sans",
-  "Helvetica Neue",
-  Helvetica,
-  Arial,
-  sans-serif;
+  font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
   font-size: 13px;
   color: #676a6c;
   overflow-x: hidden;
@@ -118,6 +122,6 @@ const goTarget = (url: string) => {
 }
 
 .app-main {
-  background-color: #eff1f3 !important
+  background-color: #eff1f3 !important;
 }
 </style>

src/views/statics/index.vue

@@ -6,14 +6,17 @@
         <div class="card-header">
           <div style="display: flex; flex-direction: row">
             <div style="width: 4px; height: 19px; opacity: 1; background: #409eff"></div>
-            <span style="
+            <span
+              style="
                 font-family: PingFang SC;
                 font-size: 14px;
                 font-weight: normal;
                 line-height: 19px;
                 height: 19px;
                 margin-left: 5px;
-              ">车辆列表</span>
+              "
+              >车辆列表</span
+            >
           </div>
         </div>
         <div style="margin-top: 20px; padding-left: 10px">
@@ -26,16 +29,30 @@
             placeholder="请选择归属部门"
             check-strictly
           /> -->
-          <el-input style="margin-top: 10px" v-model="filterText" placeholder="输入关键字" />
-          <div style="max-height: 80vh;overflow-y: scroll">
-            <lay-tree :data="data" ref="treeRef" :tail-node-icon="false" :onlyIconControl="true"
-              :default-expand-all="true" v-model:selectedKey="keys" :searchNodeMethod="filterNode"
-              @node-click="treeclick">
+          <el-input
+            style="margin-top: 10px"
+            v-model="filterText"
+            placeholder="输入关键字"
+          />
+          <div style="max-height: 80vh; overflow-y: scroll">
+            <lay-tree
+              :data="data"
+              ref="treeRef"
+              :tail-node-icon="false"
+              :onlyIconControl="true"
+              :default-expand-all="true"
+              v-model:selectedKey="keys"
+              :searchNodeMethod="filterNode"
+              @node-click="treeclick"
+            >
               <template #title="{ data }">
                 <div>
                   <span>{{ data.title }}</span>
-                  <el-tag v-if="data.time != undefined" style="margin-left: 20px"
-                    :type="data.time == '在线' ? 'success' : 'danger'">
+                  <el-tag
+                    v-if="data.time != undefined"
+                    style="margin-left: 20px"
+                    :type="data.time == '在线' ? 'success' : 'danger'"
+                  >
                     {{ data.time }}
                   </el-tag>
                 </div>
@@ -81,231 +98,220 @@
         <div class="card-header">
           <div style="display: flex; flex-direction: row; position: relative">
             <div style="width: 4px; height: 19px; opacity: 1; background: #409eff"></div>
-            <span style="
+            <span
+              style="
                 font-family: PingFang SC;
                 font-size: 14px;
                 font-weight: normal;
                 line-height: 19px;
                 height: 19px;
                 margin-left: 5px;
-              ">车辆视频</span>
+              "
+              >车辆视频</span
+            >
             <span style="margin-left: 30px; font-size: 14px">{{
               currentdata?.label
-              }}</span>
+            }}</span>
             <div style="margin-top: 20px"></div>
           </div>
         </div>
-        <ArrowRightBold v-if="videoList.length > 1 && videoIndex == 0" style="width: 20px; height: 20px; margin-left: 800px"
-          @click="playVideo(1)"></ArrowRightBold>
-        <ArrowLeftBold v-if="videoList.length > 1  && videoIndex == 1" style="width: 20px; height: 20px; margin-left: 800px"
-          @click="playVideo(0)"></ArrowLeftBold>
-        <div id="container" style="margin-top: 10px; width: 100%; height: 80vh"></div>
+        <div id="container" style="margin-top: 20px; width: 100%; height: 80vh"></div>
       </div>
     </div>
   </div>
 </template>
 
 <script setup>
-  import { listCarInfo } from "@/api/carInfo";
-  import moment from "moment";
-  import api from "@/api/system/user";
+import { listCarInfo } from "@/api/carInfo";
+import moment from "moment";
+import api from "@/api/system/user";
 
-  const carlist = ref([]);
-  const carData = ref([]);
+const carlist = ref([]);
+const carData = ref([]);
 
-  const showTree = ref(true);
+const showTree = ref(true);
 
-  const filterText = ref("");
-  const treeRef = ref(null);
+const filterText = ref("");
+const treeRef = ref(null);
 
-  const deptOptions = ref([]);
+const deptOptions = ref([]);
 
-  const deptId = ref([]);
-  const keys = ref();
-  const videoList = ref([]);
-  const videoIndex =ref(0)
+const deptId = ref([]);
+const keys = ref();
 
-  const gettreeheight = () => {
-    return document.body.clientHeight - 300;
-  };
+const gettreeheight = () => {
+  return document.body.clientHeight - 300;
+};
 
-  const getTreeSelect = async () => {
-    const res = await api.deptTreeSelect();
-    console.log(res);
-    deptOptions.value = res.data;
-  };
+const getTreeSelect = async () => {
+  const res = await api.deptTreeSelect();
+  console.log(res);
+  deptOptions.value = res.data;
+};
 
-  const initData = async () => {
-    getTreeSelect();
-    listCarInfo({ pageSize: 1000000 }).then((res) => {
-      carData.value = carlist.value = res.rows.filter((i) => {
-        var hsin = false;
-        if (i.deviceInfos) {
-          JSON.parse(i.deviceInfos).forEach((item) => {
-            if (item.type == "camera") {
-              hsin = true;
-              return true;
-            }
-          });
-        }
-        return hsin;
-      });
-
-      var keyp = [100];
-      var index = 0;
-      var all = 0;
-      var zx = 0;
+const initData = async () => {
+  getTreeSelect();
+  listCarInfo({ pageSize: 1000000 }).then((res) => {
+    carData.value = carlist.value = res.rows.filter((i) => {
+      var hsin = false;
+      if (i.deviceInfos) {
+        JSON.parse(i.deviceInfos).forEach((item) => {
+          if (item.type == "camera") {
+            hsin = true;
+            return true;
+          }
+        });
+      }
+      return hsin;
+    });
 
-      deptOptions.value[0].children.forEach((p) => {
-        p["children"] = (p.children ?? []).concat(
-          carlist.value
-            .filter((i) => JSON.parse(i.ext1).deptId == p.id)
-            .map((i) => {
-              keyp.push(p.id);
-              let ll = i.lastCountTime == null
+    var keyp = [100];
+    var index = 0;
+    var all = 0;
+    var zx = 0;
+    var depts = [];
+    if (deptOptions.value[0].children == undefined) {
+      depts = deptOptions.value;
+    } else {
+      depts = deptOptions.value[0].children;
+    }
+    depts.forEach((p) => {
+      p["children"] = (p.children ?? []).concat(
+        carlist.value
+          .filter((i) => JSON.parse(i.ext1).deptId == p.id)
+          .map((i) => {
+            keyp.push(p.id);
+            let ll =
+              i.lastCountTime == null
                 ? "离线"
                 : moment().unix() - moment(i.lastCountTime).unix() > 60 * 5
-                  ? "离线"
-                  : "在线";
-              if (ll == "在线") {
-                zx++;
-              }
-              all++;
-              return {
-                id: `car_${++index}`,
-                title: i.carNum,
-                deviceInfos: i.deviceInfos,
-                time:
-                  ll,
-              };
-            })
-        );
-        p["title"] = p.label + ` [ ${p["children"].filter(i => i.time.indexOf("在线") != -1).length}/${p["children"].length}]`;
-      });
-      deptOptions.value[0]["title"] = deptOptions.value[0]["label"] + ` [ ${zx}/${all}]`;
-      data.value = deptOptions.value;
-      keys.value = keyp;
-      setTimeout(() => {
-        treeRef.value.setExpandedKeys(keys.value);
-      }, 10000);
-
-      // carlist.value = res.rows.filter(i => {
-      //   var hsin = false;
-      //   if (i.deviceInfos) {
-      //     JSON.parse(i.deviceInfos).forEach(item => {
-      //       if (item.type == "camera") {
-      //         hsin = true;
-      //         return true;
-      //       }
-      //     })
-      //   }
-      //   return hsin
-
-      // });
+                ? "离线"
+                : "在线";
+            if (ll == "在线") {
+              zx++;
+            }
+            all++;
+            return {
+              id: `car_${++index}`,
+              title: i.carNum,
+              deviceInfos: i.deviceInfos,
+              time: ll,
+            };
+          })
+      );
+      p["title"] =
+        p.label +
+        ` [ ${p["children"].filter((i) => i.time.indexOf("在线") != -1).length}/${
+          p["children"].length
+        }]`;
     });
-  };
+    deptOptions.value[0]["title"] = deptOptions.value[0]["label"] + ` [ ${zx}/${all}]`;
+    data.value = deptOptions.value;
+    keys.value = keyp;
+    setTimeout(() => {
+      treeRef.value.setExpandedKeys(keys.value);
+    }, 10000);
 
-  const defaultProps = {
-    children: "children",
-    label: "label",
-    value: "id",
-  };
-  const treeIndent = ref(40);
+    // carlist.value = res.rows.filter(i => {
+    //   var hsin = false;
+    //   if (i.deviceInfos) {
+    //     JSON.parse(i.deviceInfos).forEach(item => {
+    //       if (item.type == "camera") {
+    //         hsin = true;
+    //         return true;
+    //       }
+    //     })
+    //   }
+    //   return hsin
 
-  watch(filterText, (val) => {
-    if (treeRef.value) {
-      treeRef.value.filter(val);
-    }
+    // });
   });
+};
 
-  const currenturl = ref("");
+const defaultProps = {
+  children: "children",
+  label: "label",
+  value: "id",
+};
+const treeIndent = ref(40);
 
-  const filterNode = (node, value) => {
-    if (node.id == 1) return true;
-    return node.title.indexOf(value) != -1;
-  };
+watch(filterText, (val) => {
+  if (treeRef.value) {
+    treeRef.value.filter(val);
+  }
+});
 
-  const currentdata = ref(null);
+const currenturl = ref("");
 
-  const treeclick = (data, node) => {
-    videoList.value = []
-    if (data.deviceInfos) {
-      // JSON.parse(data.deviceInfos).forEach((item) => {
-      //   if (item.type == "camera") {
-      //     currenturl.value = item.code;
-      //     jessibuca.play(currenturl.value);
-      //   }
-      // });
-      var deviceData = JSON.parse(data.deviceInfos)
-      for (var index in deviceData) {
-        var item = deviceData[index]
-        if (item.type == "camera") {
-          currenturl.value = item.code;
-          videoList.value.push(currenturl.value)
-        }
-      }
-      if (videoList.value.length > 0) {
-        jessibuca.play(videoList.value[0]);
-      }
-    }
-  };
+const filterNode = (node, value) => {
+  if (node.id == 1) return true;
+  return node.title.indexOf(value) != -1;
+};
 
-  const playVideo = (index) => {
-    videoIndex.value = index
-    jessibuca.play(videoList.value[index]);
-  }
+const currentdata = ref(null);
 
-  const data = ref([]);
-  var jessibuca = null;
-  onMounted(() => {
-    initData();
-    // getTreeSelect();
-    var $container = document.getElementById("container");
-    jessibuca = new Jessibuca({
-      container: $container,
-      videoBuffer: 0.2, // 缓存时长
-      isResize: false,
-      text: "",
-      decoder: "/jess/decoder.js",
-      loadingText: "",
-      useMSE: false,
-      debug: true,
-      showBandwidth: true, // 显示网速
-      operateBtns: {
-        fullscreen: true,
-        screenshot: false,
-        play: true,
-        audio: false,
-        recorder: false,
-      },
-      forceNoOffscreen: true,
-      isNotMute: false,
+const treeclick = (data, node) => {
+  if (data.deviceInfos) {
+    JSON.parse(data.deviceInfos).forEach((item) => {
+      if (item.type == "camera") {
+        currenturl.value = item.code;
+        jessibuca.play(currenturl.value);
+      }
     });
-    // if (treeRef.value) {
-    //   setTimeout(() => {
-    //     treeRef.value.expandNode(treeRef.value.getNode(1))
-    //   }, 100);
-    //   getSites();
-    //   initData();
-    //   // treeRef.value.expandNode(treeRef.value.getNode(1))
-    // }
+  }
+};
+
+const data = ref([]);
+var jessibuca = null;
+onMounted(() => {
+  initData();
+  // getTreeSelect();
+  var $container = document.getElementById("container");
+  jessibuca = new Jessibuca({
+    container: $container,
+    videoBuffer: 0.2, // 缓存时长
+    isResize: false,
+    text: "",
+    decoder: "/jess/decoder.js",
+    loadingText: "",
+    useMSE: false,
+    debug: true,
+    showBandwidth: true, // 显示网速
+    operateBtns: {
+      fullscreen: true,
+      screenshot: false,
+      play: true,
+      audio: false,
+      recorder: false,
+    },
+    forceNoOffscreen: true,
+    isNotMute: false,
   });
+  // if (treeRef.value) {
+  //   setTimeout(() => {
+  //     treeRef.value.expandNode(treeRef.value.getNode(1))
+  //   }, 100);
+  //   getSites();
+  //   initData();
+  //   // treeRef.value.expandNode(treeRef.value.getNode(1))
+  // }
+});
 </script>
 
 <style lang="scss" scoped>
-  #container {
-    background: rgba(13, 14, 27, 0.7);
-    width: 50vw;
-    height: 398px;
-  }
+#container {
+  background: rgba(13, 14, 27, 0.7);
+  width: 50vw;
+  height: 398px;
+}
 
-  .card-header {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-  }
+.card-header {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+}
 
-  .boxunused {
-    background: #3333332d;
-  }
-</style>
+.boxunused {
+  background: #3333332d;
+}
+</style>

src/views/statics/passengerFlow.vue

@@ -1,665 +1,778 @@
 <template>
-    <div class="p-2">
-        <el-tabs v-model="activeName" type="card" class="demo-tabs" @tab-click="handleClick">
-            <el-tab-pane label="车辆客流数据" name="first">
-                <div>
-                    <transition :enter-active-class="proxy?.animate.searchAnimate.enter"
-                        :leave-active-class="proxy?.animate.searchAnimate.leave">
-                        <div class="search" v-show="showSearch" style="display: flex;flex-direction: row;">
-                            <div style="width: 80%;">
-                                <el-form :model="queryParams" ref="queryFormRef" :inline="true" label-width="68px">
-                                    <!-- <el-form-item label="路线">
+  <div class="p-2">
+    <el-tabs v-model="activeName" type="card" class="demo-tabs" @tab-click="handleClick">
+      <el-tab-pane label="车辆客流数据" name="first">
+        <div>
+          <transition
+            :enter-active-class="proxy?.animate.searchAnimate.enter"
+            :leave-active-class="proxy?.animate.searchAnimate.leave"
+          >
+            <div
+              class="search"
+              v-show="showSearch"
+              style="display: flex; flex-direction: row"
+            >
+              <div style="width: 80%">
+                <el-form
+                  :model="queryParams"
+                  ref="queryFormRef"
+                  :inline="true"
+                  label-width="68px"
+                >
+                  <!-- <el-form-item label="路线">
                                         <el-select v-model="line" placeholder="请选择路线" style="width: 120px">
                                             <el-option v-for="item in carPathList" :key="item.id" :label="item.name"
                                                 :value="item.id" />
                                         </el-select>
                                     </el-form-item> -->
-                                    <el-form-item label="车辆">
-                                        <el-select v-model="queryParams.carNum" placeholder="请选择车辆"
-                                            style="width: 120px">
-                                            <el-option v-for="item in carInfoList" :key="item.carNum"
-                                                :label="item.carNum" :value="item.carNum" />
-                                        </el-select>
-                                    </el-form-item>
-                                    <el-form-item label="单位">
-                                        <el-tree-select v-model="deptId" :data="deptOptions"
-                                            :props="{ value: 'id', label: 'label', children: 'children' }"
-                                            value-key="id" placeholder="请选择归属部门" check-strictly />
-                                    </el-form-item>
-                                    <el-form-item label="时间" prop="carNum">
-                                        <el-date-picker v-model="dataValue" type="datetimerange" :shortcuts="shortcuts"
-                                            range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" />
-                                    </el-form-item>
-                                </el-form>
-                            </div>
-                            <div style="width: 20%;">
-                                <el-form-item>
-                                    <!-- <el-button type="primary" plain @click="goadd">今天</el-button>
+                  <el-form-item label="车辆">
+                    <el-select
+                      v-model="queryParams.carNum"
+                      placeholder="请选择车辆"
+                      style="width: 120px"
+                    >
+                      <el-option
+                        v-for="item in carInfoList"
+                        :key="item.carNum"
+                        :label="item.carNum"
+                        :value="item.carNum"
+                      />
+                    </el-select>
+                  </el-form-item>
+                  <el-form-item label="单位">
+                    <el-tree-select
+                      v-model="deptId"
+                      :data="deptOptions"
+                      :props="{ value: 'id', label: 'label', children: 'children' }"
+                      value-key="id"
+                      placeholder="请选择归属部门"
+                      check-strictly
+                    />
+                  </el-form-item>
+                  <el-form-item label="时间" prop="carNum">
+                    <el-date-picker
+                      v-model="dataValue"
+                      type="datetimerange"
+                      :shortcuts="shortcuts"
+                      range-separator="至"
+                      start-placeholder="开始时间"
+                      end-placeholder="结束时间"
+                    />
+                  </el-form-item>
+                </el-form>
+              </div>
+              <div style="width: 20%">
+                <el-form-item>
+                  <!-- <el-button type="primary" plain @click="goadd">今天</el-button>
                                     <el-button type="primary" plain @click="resetQuery">昨天</el-button>
                                     <el-button type="primary" plain @click="resetQuery">近三天</el-button> -->
-                                    <el-button type="primary" @click="searchCar">查询</el-button>
-                                    <!-- <el-button @click="resetQuery">重置</el-button> -->
-                                </el-form-item>
-                            </div>
-                        </div>
-                    </transition>
-                    <el-card shadow="never">
-                        <div style="display: flex;flex-direction: row;justify-content: space-around;width: 60%;">
-                            <div>上车总数：{{sctotal}}</div>
-                            <div>下车总数：{{xctotal}}</div>
-                            <div>总数：{{totalcount}}</div>
-                        </div>
-                        <tableElm @childToParent="childrenClick" :columns="columns1" ref="table1"
-                            style="margin-top: 10px;"></tableElm>
-                        <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
-                            v-model:limit="queryParams.pageSize" @pagination="searchCar" />
-                    </el-card>
-                </div>
-            </el-tab-pane>
-            <el-tab-pane label="站点客流数据" name="second">
-                <div>
-                    <transition :enter-active-class="proxy?.animate.searchAnimate.enter"
-                        :leave-active-class="proxy?.animate.searchAnimate.leave">
-                        <div class="search" v-show="showSearch" style="display: flex;flex-direction: row;">
-                            <div style="width: 80%;">
-                                <el-form :model="queryParams" ref="queryFormRef" :inline="true" label-width="68px">
-                                    <el-form-item label="路线">
-                                        <el-select v-model="queryParams2.line" placeholder="请选择路线" style="width: 120px"
-                                            @change="getSiteList">
-                                            <el-option v-for="item in carPathList" :key="item.id" :label="item.name"
-                                                :value="item.id" />
-                                        </el-select>
-                                    </el-form-item>
-                                    <el-form-item label="站点" prop="carNum">
-                                        <el-select v-model="queryParams2.site" placeholder="请选择站点" style="width: 300px">
-                                            <el-option v-for="item in sites" :key="item.dictLabel"
-                                                :label="item.dictLabel" :value="item.dictLabel" />
-                                        </el-select>
-                                    </el-form-item>
-                                    <el-form-item label="时间" prop="carNum">
-                                        <el-date-picker v-model="dataValue2" type="datetimerange" :shortcuts="shortcuts"
-                                            range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" />
-                                    </el-form-item>
-                                </el-form>
-                            </div>
-                            <div style="width: 20%;">
-                                <el-form-item>
-                                    <!-- <el-button type="primary" plain @click="goadd">今天</el-button>
+                  <el-button type="primary" @click="searchCar">查询</el-button>
+                  <!-- <el-button @click="resetQuery">重置</el-button> -->
+                </el-form-item>
+              </div>
+            </div>
+          </transition>
+          <el-card shadow="never">
+            <div
+              style="
+                display: flex;
+                flex-direction: row;
+                justify-content: space-around;
+                width: 60%;
+              "
+            >
+              <div>上车总数：{{ sctotal }}</div>
+              <div>下车总数：{{ xctotal }}</div>
+              <div>总数：{{ totalcount }}</div>
+            </div>
+            <tableElm
+              @childToParent="childrenClick"
+              :columns="columns1"
+              ref="table1"
+              style="margin-top: 10px"
+            ></tableElm>
+            <pagination
+              v-show="total > 0"
+              :total="total"
+              v-model:page="queryParams.pageNum"
+              v-model:limit="queryParams.pageSize"
+              @pagination="searchCar"
+            />
+          </el-card>
+        </div>
+      </el-tab-pane>
+      <el-tab-pane label="站点客流数据" name="second">
+        <div>
+          <transition
+            :enter-active-class="proxy?.animate.searchAnimate.enter"
+            :leave-active-class="proxy?.animate.searchAnimate.leave"
+          >
+            <div
+              class="search"
+              v-show="showSearch"
+              style="display: flex; flex-direction: row"
+            >
+              <div style="width: 80%">
+                <el-form
+                  :model="queryParams"
+                  ref="queryFormRef"
+                  :inline="true"
+                  label-width="68px"
+                >
+                  <el-form-item label="路线">
+                    <el-select
+                      v-model="queryParams2.line"
+                      placeholder="请选择路线"
+                      style="width: 120px"
+                      @change="getSiteList"
+                    >
+                      <el-option
+                        v-for="item in carPathList"
+                        :key="item.id"
+                        :label="item.name"
+                        :value="item.id"
+                      />
+                    </el-select>
+                  </el-form-item>
+                  <el-form-item label="站点" prop="carNum">
+                    <el-select
+                      v-model="queryParams2.site"
+                      placeholder="请选择站点"
+                      style="width: 300px"
+                    >
+                      <el-option
+                        v-for="item in sites"
+                        :key="item.dictLabel"
+                        :label="item.dictLabel"
+                        :value="item.dictLabel"
+                      />
+                    </el-select>
+                  </el-form-item>
+                  <el-form-item label="时间" prop="carNum">
+                    <el-date-picker
+                      v-model="dataValue2"
+                      type="datetimerange"
+                      :shortcuts="shortcuts"
+                      range-separator="至"
+                      start-placeholder="开始时间"
+                      end-placeholder="结束时间"
+                    />
+                  </el-form-item>
+                </el-form>
+              </div>
+              <div style="width: 20%">
+                <el-form-item>
+                  <!-- <el-button type="primary" plain @click="goadd">今天</el-button>
                                     <el-button type="primary" plain @click="resetQuery">昨天</el-button>
                                     <el-button type="primary" plain @click="resetQuery">近三天</el-button> -->
-                                    <el-button type="primary" @click="searchSite">查询</el-button>
-                                    <!-- <el-button @click="resetQuery">重置</el-button> -->
-                                </el-form-item>
-                            </div>
-                        </div>
-                    </transition>
-                    <el-card shadow="never">
-                        <tableElm @childToParent="childrenClick" :columns="columns2" ref="table2"></tableElm>
-                        <pagination v-show="total2 > 0" :total="total2" v-model:page="queryParams2.pageNum"
-                            v-model:limit="queryParams2.pageSize" @pagination="searchSite" />
-                    </el-card>
-                </div>
-            </el-tab-pane>
-        </el-tabs>
-    </div>
+                  <el-button type="primary" @click="searchSite">查询</el-button>
+                  <!-- <el-button @click="resetQuery">重置</el-button> -->
+                </el-form-item>
+              </div>
+            </div>
+          </transition>
+          <el-card shadow="never">
+            <tableElm
+              @childToParent="childrenClick"
+              :columns="columns2"
+              ref="table2"
+            ></tableElm>
+            <pagination
+              v-show="total2 > 0"
+              :total="total2"
+              v-model:page="queryParams2.pageNum"
+              v-model:limit="queryParams2.pageSize"
+              @pagination="searchSite"
+            />
+          </el-card>
+        </div>
+      </el-tab-pane>
+    </el-tabs>
+  </div>
 </template>
 
 <script setup name="CarInfo" lang="ts">
-    import { listCarInfo, getCarInfo, delCarInfo, addCarInfo, updateCarInfo } from '@/api/carInfo';
-    import { listCarSchedule, getCarSchedule, delCarSchedule, addCarSchedule, updateCarSchedule } from '@/api/carSchedule';
-    import { CarInfoVO, CarInfoQuery, CarInfoForm } from '@/api/carInfo/types';
-    import { updateData, listData } from "@/api/system/dict/data";
-    import { listCarPath, getCarPath, delCarPath, addCarPath, updateCarPath } from '@/api/carPath';
-    import api from "@/api/system/user"
-    import { liststaticFlow, listsitesFlow } from '@/api/gpsData';
-    import tableElm from "@/components/Public/table.vue";
-    import { useRoute, useRouter } from "vue-router";
-    import moment from 'moment';
-
-    const route = useRoute();
-    const router = useRouter();
-
-    const { proxy } = getCurrentInstance() as ComponentInternalInstance;
-
-    const carInfoList = ref < CarInfoVO[] > ([]);
-    const buttonLoading = ref(false);
-    const loading = ref(true);
-    const showSearch = ref(true);
-    const ids = ref < Array < string | number >> ([]);
-    const single = ref(true);
-    const multiple = ref(true);
-    const total = ref(0);
-    const total2 = ref(0);
-    const value2 = ref('')
-    const carPathList = ref([])
-
-    const queryFormRef = ref < ElFormInstance > ();
-    const carInfoFormRef = ref < ElFormInstance > ();
-    const siteFlowList = ref([])
-
-    const dataValue = ref < [Date, Date] > ([
-        new Date(new Date().getTime() - 3600 * 24 * 1000),
-        new Date(),
-    ])
-
-    const dataValue2 = ref < [Date, Date] > ([
-        new Date(new Date().getTime() - 3600 * 24 * 1000),
-        new Date(),
-    ])
-
-    const dialog = reactive < DialogOption > ({
-        visible: false,
-        title: ''
-    });
-
-    const sites = ref([]);
-    const siteList = ref([]);
-    const table = ref(tableElm)
-    const table1 = ref(tableElm)
-    const table2 = ref(tableElm)
-    const activeName = ref("first")
-    const carFlowList = ref([])
-    const lineFlowList = ref([])
-
-    const sctotal = ref(0)
-    const xctotal = ref(0)
-    const totalcount = ref(0)
-
-    const columns = ref([
-        // {label: '上层位置', prop: 'v', visible: true},
-        { label: '来源', prop: 'carNum', visible: true, isTemplate: false },
-        { label: '时间', prop: 'workTime', visible: true, isTemplate: false, },
-        { label: '内容', prop: 'workName', pprop: "ext1", visible: true, isTemplate: false },
-    ])
-
-    const columns1 = ref([
-        // {label: '上层位置', prop: 'v', visible: true},
-        { label: '车牌号', prop: 'carNum', visible: true, isTemplate: false },
-        { label: '开始时间', prop: 'startTime', visible: true, isTemplate: false, },
-        { label: '结束时间', prop: 'endTime', pprop: "ext1", visible: true, isTemplate: false },
-        { label: '上车总数', prop: 'others.incount', visible: true, isTemplate: false, },
-        { label: '下车总数', prop: 'others.outcount', pprop: "ext1", visible: true, isTemplate: false },
-    ])
-
-    const columns2 = ref([
-        // {label: '上层位置', prop: 'v', visible: true},
-        { label: '站点名', prop: 'dictLabel', visible: true, isTemplate: false },
-        { label: '开始时间', prop: 'startTime', visible: true, isTemplate: false, },
-        { label: '结束时间', prop: 'endTime', pprop: "ext1", visible: true, isTemplate: false },
-        { label: '上车总数', prop: 'others.incount', visible: true, isTemplate: false, },
-        { label: '下车总数', prop: 'others.outcount', pprop: "ext1", visible: true, isTemplate: false },
-    ])
-
-    const deptId = ref(null)
-    const deptOptions = ref([]);
-
-    const initFormData: CarInfoForm = {
-        id: undefined,
-        carNum: undefined,
-        carType: undefined,
-        deviceInfos: undefined,
-        repairInfo: undefined,
-        maintenanceInfo: undefined,
-        insuranceInfo: undefined,
-        inspectionInfo: undefined,
-        trafficAccidentInfo: undefined,
-        violationInfo: undefined,
-        changeInfo: undefined,
-        ext1: undefined,
-        ext2: undefined
+import {
+  listCarInfo,
+  getCarInfo,
+  delCarInfo,
+  addCarInfo,
+  updateCarInfo,
+} from "@/api/carInfo";
+import {
+  listCarSchedule,
+  getCarSchedule,
+  delCarSchedule,
+  addCarSchedule,
+  updateCarSchedule,
+} from "@/api/carSchedule";
+import { CarInfoVO, CarInfoQuery, CarInfoForm } from "@/api/carInfo/types";
+import { updateData, listData } from "@/api/system/dict/data";
+import {
+  listCarPath,
+  getCarPath,
+  delCarPath,
+  addCarPath,
+  updateCarPath,
+} from "@/api/carPath";
+import api from "@/api/system/user";
+import { liststaticFlow, listsitesFlow } from "@/api/gpsData";
+import tableElm from "@/components/Public/table.vue";
+import { useRoute, useRouter } from "vue-router";
+import moment from "moment";
+import { getpassenger2 } from "@/api/data";
+
+const route = useRoute();
+const router = useRouter();
+
+const { proxy } = getCurrentInstance() as ComponentInternalInstance;
+
+const carInfoList = ref<CarInfoVO[]>([]);
+const buttonLoading = ref(false);
+const loading = ref(true);
+const showSearch = ref(true);
+const ids = ref<Array<string | number>>([]);
+const single = ref(true);
+const multiple = ref(true);
+const total = ref(0);
+const total2 = ref(0);
+const value2 = ref("");
+const carPathList = ref([]);
+
+const queryFormRef = ref<ElFormInstance>();
+const carInfoFormRef = ref<ElFormInstance>();
+const siteFlowList = ref([]);
+
+const dataValue = ref<[Date, Date]>([
+  new Date(new Date().getTime() - 3600 * 24 * 1000),
+  new Date(),
+]);
+
+const dataValue2 = ref<[Date, Date]>([
+  new Date(new Date().getTime() - 3600 * 24 * 1000),
+  new Date(),
+]);
+
+const dialog = reactive<DialogOption>({
+  visible: false,
+  title: "",
+});
+
+const sites = ref([]);
+const siteList = ref([]);
+const table = ref(tableElm);
+const table1 = ref(tableElm);
+const table2 = ref(tableElm);
+const activeName = ref("first");
+const carFlowList = ref([]);
+const lineFlowList = ref([]);
+
+const sctotal = ref(0);
+const xctotal = ref(0);
+const totalcount = ref(0);
+
+const columns = ref([
+  // {label: '上层位置', prop: 'v', visible: true},
+  { label: "来源", prop: "carNum", visible: true, isTemplate: false },
+  { label: "时间", prop: "workTime", visible: true, isTemplate: false },
+  { label: "内容", prop: "workName", pprop: "ext1", visible: true, isTemplate: false },
+]);
+
+const columns1 = ref([
+  // {label: '上层位置', prop: 'v', visible: true},
+  { label: "车牌号", prop: "carNum", visible: true, isTemplate: false },
+  { label: "开始时间", prop: "startTime", visible: true, isTemplate: false },
+  { label: "结束时间", prop: "endTime", pprop: "ext1", visible: true, isTemplate: false },
+  { label: "上车总数", prop: "others.incount", visible: true, isTemplate: false },
+  {
+    label: "下车总数",
+    prop: "others.outcount",
+    pprop: "ext1",
+    visible: true,
+    isTemplate: false,
+  },
+]);
+
+const columns2 = ref([
+  // {label: '上层位置', prop: 'v', visible: true},
+  { label: "站点名", prop: "dictLabel", visible: true, isTemplate: false },
+  { label: "开始时间", prop: "startTime", visible: true, isTemplate: false },
+  { label: "结束时间", prop: "endTime", pprop: "ext1", visible: true, isTemplate: false },
+  { label: "上车总数", prop: "others.incount", visible: true, isTemplate: false },
+  {
+    label: "下车总数",
+    prop: "others.outcount",
+    pprop: "ext1",
+    visible: true,
+    isTemplate: false,
+  },
+]);
+
+const deptId = ref(null);
+const deptOptions = ref([]);
+
+const initFormData: CarInfoForm = {
+  id: undefined,
+  carNum: undefined,
+  carType: undefined,
+  deviceInfos: undefined,
+  repairInfo: undefined,
+  maintenanceInfo: undefined,
+  insuranceInfo: undefined,
+  inspectionInfo: undefined,
+  trafficAccidentInfo: undefined,
+  violationInfo: undefined,
+  changeInfo: undefined,
+  ext1: undefined,
+  ext2: undefined,
+};
+const data = reactive<PageData<CarInfoForm, CarInfoQuery>>({
+  form: { ...initFormData },
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    carNum: undefined,
+    carType: undefined,
+    deviceInfos: undefined,
+    repairInfo: undefined,
+    maintenanceInfo: undefined,
+    insuranceInfo: undefined,
+    inspectionInfo: undefined,
+    trafficAccidentInfo: undefined,
+    violationInfo: undefined,
+    changeInfo: undefined,
+    ext1: undefined,
+    ext2: undefined,
+    params: {},
+  },
+  queryParams2: {
+    pageNum: 1,
+    pageSize: 10,
+    site: "",
+    line: [],
+  },
+  rules: {
+    id: [{ required: true, message: "编号不能为空", trigger: "blur" }],
+    carNum: [{ required: true, message: "车牌号不能为空", trigger: "blur" }],
+    carType: [{ required: true, message: "车类型不能为空", trigger: "change" }],
+    deviceInfos: [
+      { required: true, message: "所有车载设备信息不能为空", trigger: "blur" },
+    ],
+    repairInfo: [{ required: true, message: "维修信息不能为空", trigger: "blur" }],
+    maintenanceInfo: [{ required: true, message: "保养信息不能为空", trigger: "blur" }],
+    insuranceInfo: [{ required: true, message: "保险信息不能为空", trigger: "blur" }],
+    inspectionInfo: [{ required: true, message: "年检信息不能为空", trigger: "blur" }],
+    trafficAccidentInfo: [
+      { required: true, message: "交通事故信息不能为空", trigger: "blur" },
+    ],
+    violationInfo: [{ required: true, message: "违章信息不能为空", trigger: "blur" }],
+    changeInfo: [{ required: true, message: "车辆变更信息不能为空", trigger: "blur" }],
+    ext1: [{ required: true, message: "扩展1不能为空", trigger: "blur" }],
+    ext2: [{ required: true, message: "扩展2不能为空", trigger: "blur" }],
+  },
+});
+
+const paramData = ref({
+  starttime: "",
+  endtime: "",
+});
+
+const { queryParams, queryParams2, form, rules } = toRefs(data);
+
+const goadd = () => {
+  router.push("/car/work/addWork");
+};
+
+const getSites = () => {
+  listData({ dictType: "tbl_sites" }).then((res2) => {
+    sites.value = res2.rows;
+    siteList.value = res2.rows;
+  });
+};
+
+const getTreeSelect = async () => {
+  const res = await api.deptTreeSelect();
+  console.log(res);
+  deptOptions.value = res.data;
+};
+
+const searchData = () => {
+  console.log(dataValue.value);
+};
+
+/** 查询车辆信息列表 */
+const getList = async () => {
+  // loading.value = true;
+  // const res = await listCarInfo(queryParams.value);
+  var res = {
+    rows: [
+      {
+        carNum: "苏A862123",
+        startTime: "2024-01-23 09:12:23",
+        endTime: "2024-01-23 09:13:23",
+        upCount: "10",
+        downCount: "9",
+      },
+      {
+        carNum: "苏A862123",
+        startTime: "2024-01-23 10:12:23",
+        endTime: "2024-01-23 10:13:23",
+        upCount: "10",
+        downCount: "9",
+      },
+    ],
+    total: 1,
+  };
+  var res1 = {
+    rows: [
+      {
+        siteName: "松罗客运站",
+        startTime: "2024-01-23 09:12:23",
+        endTime: "2024-01-23 09:13:23",
+        upCount: "10",
+        downCount: "9",
+      },
+      {
+        siteName: "福清客运站",
+        startTime: "2024-01-23 10:12:23",
+        endTime: "2024-01-23 10:13:23",
+        upCount: "10",
+        downCount: "9",
+      },
+    ],
+    total: 1,
+  };
+  var buttons = [{ type: "danger", text: "删除", func: "goAdd" }];
+  table1.value.setDataList(res.rows);
+  table1.value.setButton(buttons);
+  table2.value.setDataList(res1.rows);
+  table2.value.setButton(buttons);
+  total.value = res.total;
+  loading.value = false;
+};
+
+/** 取消按钮 */
+const cancel = () => {
+  reset();
+  dialog.visible = false;
+};
+
+/** 表单重置 */
+const reset = () => {
+  form.value = { ...initFormData };
+  carInfoFormRef.value?.resetFields();
+};
+
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  queryParams.value.pageNum = 1;
+  getList();
+};
+
+/** 重置按钮操作 */
+const resetQuery = () => {
+  queryFormRef.value?.resetFields();
+  handleQuery();
+};
+
+/** 多选框选中数据 */
+const handleSelectionChange = (selection: CarInfoVO[]) => {
+  ids.value = selection.map((item) => item.id);
+  single.value = selection.length != 1;
+  multiple.value = !selection.length;
+};
+
+/** 新增按钮操作 */
+const handleAdd = () => {
+  reset();
+  dialog.visible = true;
+  dialog.title = "添加车辆信息";
+};
+
+/** 修改按钮操作 */
+const handleUpdate = async (row?: CarInfoVO) => {
+  reset();
+  const _id = row?.id || ids.value[0];
+  const res = await getCarInfo(_id);
+  Object.assign(form.value, res.data);
+  dialog.visible = true;
+  dialog.title = "修改车辆信息";
+};
+
+const childrenClick = (data) => {
+  eval(data.func + "(data.data)");
+};
+
+const openDialog = () => {
+  dialog.visible = true;
+};
+
+/** 提交按钮 */
+const submitForm = () => {
+  carInfoFormRef.value?.validate(async (valid: boolean) => {
+    if (valid) {
+      buttonLoading.value = true;
+      if (form.value.id) {
+        await updateCarInfo(form.value).finally(() => (buttonLoading.value = false));
+      } else {
+        await addCarInfo(form.value).finally(() => (buttonLoading.value = false));
+      }
+      proxy?.$modal.msgSuccess("修改成功");
+      dialog.visible = false;
+      await getList();
     }
-    const data = reactive < PageData < CarInfoForm, CarInfoQuery>> ({
-        form: { ...initFormData },
-        queryParams: {
-            pageNum: 1,
-            pageSize: 10,
-            carNum: undefined,
-            carType: undefined,
-            deviceInfos: undefined,
-            repairInfo: undefined,
-            maintenanceInfo: undefined,
-            insuranceInfo: undefined,
-            inspectionInfo: undefined,
-            trafficAccidentInfo: undefined,
-            violationInfo: undefined,
-            changeInfo: undefined,
-            ext1: undefined,
-            ext2: undefined,
-            params: {
-            }
-        },
-        queryParams2: {
-            pageNum: 1,
-            pageSize: 10,
-            site: '',
-            line: [],
-        },
-        rules: {
-            id: [
-                { required: true, message: "编号不能为空", trigger: "blur" }
-            ],
-            carNum: [
-                { required: true, message: "车牌号不能为空", trigger: "blur" }
-            ],
-            carType: [
-                { required: true, message: "车类型不能为空", trigger: "change" }
-            ],
-            deviceInfos: [
-                { required: true, message: "所有车载设备信息不能为空", trigger: "blur" }
-            ],
-            repairInfo: [
-                { required: true, message: "维修信息不能为空", trigger: "blur" }
-            ],
-            maintenanceInfo: [
-                { required: true, message: "保养信息不能为空", trigger: "blur" }
-            ],
-            insuranceInfo: [
-                { required: true, message: "保险信息不能为空", trigger: "blur" }
-            ],
-            inspectionInfo: [
-                { required: true, message: "年检信息不能为空", trigger: "blur" }
-            ],
-            trafficAccidentInfo: [
-                { required: true, message: "交通事故信息不能为空", trigger: "blur" }
-            ],
-            violationInfo: [
-                { required: true, message: "违章信息不能为空", trigger: "blur" }
-            ],
-            changeInfo: [
-                { required: true, message: "车辆变更信息不能为空", trigger: "blur" }
-            ],
-            ext1: [
-                { required: true, message: "扩展1不能为空", trigger: "blur" }
-            ],
-            ext2: [
-                { required: true, message: "扩展2不能为空", trigger: "blur" }
-            ]
-        }
-    });
-
-    const paramData = ref({
-        starttime: '',
-        endtime: ''
-    })
-
-    const { queryParams, queryParams2, form, rules } = toRefs(data);
-
-    const goadd = () => {
-        router.push("/car/work/addWork")
+  });
+};
+
+/** 删除按钮操作 */
+const handleDelete = async (row?: CarInfoVO) => {
+  const _ids = row?.id || ids.value;
+  await proxy?.$modal
+    .confirm('是否确认删除车辆信息编号为"' + _ids + '"的数据项？')
+    .finally(() => (loading.value = false));
+  await delCarInfo(_ids);
+  proxy?.$modal.msgSuccess("删除成功");
+  await getList();
+};
+
+/** 导出按钮操作 */
+const handleExport = () => {
+  proxy?.download(
+    "system/carInfo/export",
+    {
+      ...queryParams.value,
+    },
+    `carInfo_${new Date().getTime()}.xlsx`
+  );
+};
+
+const getSiteList = () => {
+  console.log(queryParams2.value.line);
+  var lineData = [];
+  for (var index in carPathList.value) {
+    if (queryParams2.value.line == carPathList.value[index].id) {
+      lineData = JSON.parse(carPathList.value[index].stationList);
     }
-
-    const getSites = () => {
-        listData({ dictType: "tbl_sites" }).then(res2 => {
-            sites.value = res2.rows;
-            siteList.value = res2.rows
-        });
+  }
+  var site = [];
+  for (var i in lineData) {
+    site.push(lineData[i].data);
+    //  if(i == 0 || i == lineData.length - 1){
+    //     site.push(lineData[i].data)
+    //  }else{
+    //     site.push(lineData[i])
+    //  }
+  }
+  console.log(site);
+  sites.value = site;
+};
+
+const initData = async () => {
+  const res = await listCarPath({ pageSize: 1000 });
+  carPathList.value = res.rows;
+  const res2 = await listCarInfo({ pageSize: 1000 });
+  carInfoList.value = res2.rows;
+  var params = {
+    starttime: moment(dataValue2.value[0]).format("YYYY-MM-DD HH:mm:ss"),
+    endtime: moment(dataValue2.value[1]).format("YYYY-MM-DD HH:mm:ss"),
+  };
+  const res3 = await listCarSchedule({ pageSize: 1000, params: params });
+  getSites();
+  carFlowList.value = [];
+  siteFlowList.value = [];
+  searchCar();
+  searchSite();
+  // for (var index in carInfoList.value) {
+  //     if (carInfoList.value[index].deviceInfos != null) {
+  //         var deviceCode = JSON.parse(carInfoList.value[index].deviceInfos)[0].code
+  //         console.log(deviceCode)
+  //         await getFlowData(deviceCode, carInfoList.value[index].carNum)
+  //     }
+  //     //getFlowData();
+  // }
+  // for (var index in res3.data) {
+  //     if (res3.data[index].ext1 != null) {
+  //         var siteList = JSON.parse(res3.data[index].ext1)
+  //         var gpsCode = ''
+  //         for (var j in carInfoList.value) {
+  //             if (carInfoList.value[j].carNum == res3.data[index]) {
+  //                 gpsCode = JSON.parse(carInfoList.value[index].deviceInfos)[0].code
+  //             }
+  //         }
+  //         for (var key in siteList) {
+  //             var obj = siteList[key]
+  //             await getSiteData(key, gpsCode, obj.intime, obj.outtime);
+  //         }
+  //     }
+  // }
+  // table2.value.setButton([]);
+  // console.log(carFlowList.value)
+  // table2.value.setDataList(siteFlowList.value);
+};
+
+const searchCar = () => {
+  var obj = {
+    pageSize: queryParams.value.pageSize,
+    pageNum: queryParams.value.pageNum,
+    carNum: queryParams.value.carNum,
+    deviceInfos: "people_count",
+    params: {
+      starttime: moment(dataValue.value[0]).format("YYYY-MM-DD HH:mm:ss"),
+      endtime: moment(dataValue.value[1]).format("YYYY-MM-DD HH:mm:ss"),
+    },
+  };
+  if (deptId.value != null) {
+    obj.params["ext1$deptId"] = deptId.value;
+  }
+  liststaticFlow(obj).then((res) => {
+    total.value = res.total;
+    table1.value.setButton([]);
+    for (var index in res.rows) {
+      res.rows[index].startTime = moment(dataValue.value[0]).format(
+        "YYYY-MM-DD HH:mm:ss"
+      );
+      res.rows[index].endTime = moment(dataValue.value[1]).format("YYYY-MM-DD HH:mm:ss");
     }
-
-    const getTreeSelect = async () => {
-        const res = await api.deptTreeSelect();
-        console.log(res)
-        deptOptions.value = res.data;
+    table1.value.setDataList(res.rows);
+    var paramobj = {
+      pageSize: 10000,
+      carNum: queryParams.value.carNum,
+      deviceInfos: "people_count",
+      params: {
+        starttime: moment(dataValue.value[0]).format("YYYY-MM-DD HH:mm:ss"),
+        endtime: moment(dataValue.value[1]).format("YYYY-MM-DD HH:mm:ss"),
+      },
     };
-
-    const searchData = () => {
-        console.log(dataValue.value)
-    }
-
-    /** 查询车辆信息列表 */
-    const getList = async () => {
-        // loading.value = true;
-        // const res = await listCarInfo(queryParams.value);
-        var res = {
-            rows: [
-                {
-                    carNum: '苏A862123',
-                    startTime: "2024-01-23 09:12:23",
-                    endTime: "2024-01-23 09:13:23",
-                    upCount: "10",
-                    downCount: "9",
-                },
-                {
-                    carNum: '苏A862123',
-                    startTime: "2024-01-23 10:12:23",
-                    endTime: "2024-01-23 10:13:23",
-                    upCount: "10",
-                    downCount: "9",
-
-                }
-            ],
-            total: 1
-        }
-        var res1 = {
-            rows: [
-                {
-                    siteName: '松罗客运站',
-                    startTime: "2024-01-23 09:12:23",
-                    endTime: "2024-01-23 09:13:23",
-                    upCount: "10",
-                    downCount: "9",
-                },
-                {
-                    siteName: '福清客运站',
-                    startTime: "2024-01-23 10:12:23",
-                    endTime: "2024-01-23 10:13:23",
-                    upCount: "10",
-                    downCount: "9",
-
-                }
-            ],
-            total: 1
-        }
-        var buttons = [
-            { type: 'danger', text: '删除', func: "goAdd" },
-        ]
-        table1.value.setDataList(res.rows);
-        table1.value.setButton(buttons);
-        table2.value.setDataList(res1.rows);
-        table2.value.setButton(buttons);
-        total.value = res.total;
-        loading.value = false;
-    }
-
-    /** 取消按钮 */
-    const cancel = () => {
-        reset();
-        dialog.visible = false;
-    }
-
-    /** 表单重置 */
-    const reset = () => {
-        form.value = { ...initFormData };
-        carInfoFormRef.value?.resetFields();
-    }
-
-    /** 搜索按钮操作 */
-    const handleQuery = () => {
-        queryParams.value.pageNum = 1;
-        getList();
-    }
-
-    /** 重置按钮操作 */
-    const resetQuery = () => {
-        queryFormRef.value?.resetFields();
-        handleQuery();
-    }
-
-    /** 多选框选中数据 */
-    const handleSelectionChange = (selection: CarInfoVO[]) => {
-        ids.value = selection.map(item => item.id);
-        single.value = selection.length != 1;
-        multiple.value = !selection.length;
-    }
-
-    /** 新增按钮操作 */
-    const handleAdd = () => {
-        reset();
-        dialog.visible = true;
-        dialog.title = "添加车辆信息";
-    }
-
-    /** 修改按钮操作 */
-    const handleUpdate = async (row?: CarInfoVO) => {
-        reset();
-        const _id = row?.id || ids.value[0]
-        const res = await getCarInfo(_id);
-        Object.assign(form.value, res.data);
-        dialog.visible = true;
-        dialog.title = "修改车辆信息";
-    }
-
-    const childrenClick = (data) => {
-        eval(data.func + "(data.data)")
-    }
-
-    const openDialog = () => {
-        dialog.visible = true
-    }
-
-    /** 提交按钮 */
-    const submitForm = () => {
-        carInfoFormRef.value?.validate(async (valid: boolean) => {
-            if (valid) {
-                buttonLoading.value = true;
-                if (form.value.id) {
-                    await updateCarInfo(form.value).finally(() => buttonLoading.value = false);
-                } else {
-                    await addCarInfo(form.value).finally(() => buttonLoading.value = false);
-                }
-                proxy?.$modal.msgSuccess("修改成功");
-                dialog.visible = false;
-                await getList();
-            }
-        });
-    }
-
-    /** 删除按钮操作 */
-    const handleDelete = async (row?: CarInfoVO) => {
-        const _ids = row?.id || ids.value;
-        await proxy?.$modal.confirm('是否确认删除车辆信息编号为"' + _ids + '"的数据项？').finally(() => loading.value = false);
-        await delCarInfo(_ids);
-        proxy?.$modal.msgSuccess("删除成功");
-        await getList();
-    }
-
-    /** 导出按钮操作 */
-    const handleExport = () => {
-        proxy?.download('system/carInfo/export', {
-            ...queryParams.value
-        }, `carInfo_${new Date().getTime()}.xlsx`)
-    }
-
-    const getSiteList = () => {
-        console.log(queryParams2.value.line)
-        var lineData = []
-        for (var index in carPathList.value) {
-            if (queryParams2.value.line == carPathList.value[index].id) {
-                lineData = JSON.parse(carPathList.value[index].stationList)
-            }
-        }
-        var site = []
-        for (var i in lineData) {
-            site.push(lineData[i].data)
-            //  if(i == 0 || i == lineData.length - 1){
-            //     site.push(lineData[i].data)
-            //  }else{
-            //     site.push(lineData[i])
-            //  }
-        }
-        console.log(site)
-        sites.value = site
-    }
-
-    const initData = async () => {
-        const res = await listCarPath({ pageSize: 1000 });
-        carPathList.value = res.rows
-        const res2 = await listCarInfo({ pageSize: 1000 });
-        carInfoList.value = res2.rows
-        var params = {
-            starttime: moment(dataValue2.value[0]).format("YYYY-MM-DD HH:mm:ss"),
-            endtime: moment(dataValue2.value[1]).format("YYYY-MM-DD HH:mm:ss")
-        }
-        const res3 = await listCarSchedule({ pageSize: 1000, params: params })
-        getSites();
-        carFlowList.value = [];
-        siteFlowList.value = [];
-        searchCar();
-        searchSite();
-        // for (var index in carInfoList.value) {
-        //     if (carInfoList.value[index].deviceInfos != null) {
-        //         var deviceCode = JSON.parse(carInfoList.value[index].deviceInfos)[0].code
-        //         console.log(deviceCode)
-        //         await getFlowData(deviceCode, carInfoList.value[index].carNum)
-        //     }
-        //     //getFlowData();
-        // }
-        // for (var index in res3.data) {
-        //     if (res3.data[index].ext1 != null) {
-        //         var siteList = JSON.parse(res3.data[index].ext1)
-        //         var gpsCode = ''
-        //         for (var j in carInfoList.value) {
-        //             if (carInfoList.value[j].carNum == res3.data[index]) {
-        //                 gpsCode = JSON.parse(carInfoList.value[index].deviceInfos)[0].code
-        //             }
-        //         }
-        //         for (var key in siteList) {
-        //             var obj = siteList[key]
-        //             await getSiteData(key, gpsCode, obj.intime, obj.outtime);
-        //         }
-        //     }
-        // }
-        // table2.value.setButton([]);
-        // console.log(carFlowList.value)
-        // table2.value.setDataList(siteFlowList.value);
+    if (deptId.value != null) {
+      paramobj.params["ext1$deptId"] = deptId.value;
     }
-
-    const searchCar = () => {
-        var obj = {
-            pageSize: queryParams.value.pageSize,
-            pageNum: queryParams.value.pageNum,
-            carNum: queryParams.value.carNum,
-            deviceInfos: "people_count",
-            params: {
-                starttime: moment(dataValue.value[0]).format("YYYY-MM-DD HH:mm:ss"),
-                endtime: moment(dataValue.value[1]).format("YYYY-MM-DD HH:mm:ss")
-            }
-        }
-        if (deptId.value != null) {
-            obj.params["ext1$deptId"] = deptId.value
-        }
-        liststaticFlow(obj).then(res => {
-            total.value = res.total
-            table1.value.setButton([]);
-            for (var index in res.rows) {
-                res.rows[index].startTime = moment(dataValue.value[0]).format("YYYY-MM-DD HH:mm:ss")
-                res.rows[index].endTime = moment(dataValue.value[1]).format("YYYY-MM-DD HH:mm:ss")
-            }
-            table1.value.setDataList(res.rows);
-            var paramobj = {
-                pageSize: 10000,
-                carNum: queryParams.value.carNum,
-                deviceInfos: "people_count",
-                params: {
-                    starttime: moment(dataValue.value[0]).format("YYYY-MM-DD HH:mm:ss"),
-                    endtime: moment(dataValue.value[1]).format("YYYY-MM-DD HH:mm:ss")
-                }
-            }
-            if (deptId.value != null) {
-                paramobj.params["ext1$deptId"] = deptId.value
-            }
-            liststaticFlow(paramobj).then(response => {
-                xctotal.value = 0;
-                sctotal.value = 0;
-                for (var j in response.rows) {
-                    var resObj = response.rows[j];
-                    console.log(resObj.others)
-                    if (resObj.others != null) {
-                        xctotal.value += resObj.others.outcount
-                        sctotal.value += resObj.others.incount
-                    }
-                }
-                totalcount.value = xctotal.value + sctotal.value
-            })
-        })
-    }
-
-    const searchSite = () => {
-        var sites = []
-        for (var index in carPathList.value) {
-            if (queryParams2.value.line == carPathList.value[index].id) {
-                for (var j in JSON.parse(carPathList.value[index].stationList)) {
-                    var station = JSON.parse(carPathList.value[index].stationList)[j].data
-                    sites.push(station.dictLabel)
-                }
-            }
-        }
-        var params = {
-            starttime: moment(dataValue2.value[0]).format("YYYY-MM-DD HH:mm:ss"),
-            endtime: moment(dataValue2.value[1]).format("YYYY-MM-DD HH:mm:ss")
-        }
-        if (sites.length > 0) {
-            params.sites = sites.join(',')
-        }
-        var obj = {
-            dictLabel: queryParams2.value.site,
-            pageSize: queryParams2.value.pageSize,
-            pageNum: queryParams2.value.pageNum,
-            params: params
-        }
-        listsitesFlow(obj).then(res => {
-            total2.value = res.total
-            for (var index in res.rows) {
-                res.rows[index].startTime = moment(dataValue.value[0]).format("YYYY-MM-DD HH:mm:ss")
-                res.rows[index].endTime = moment(dataValue.value[1]).format("YYYY-MM-DD HH:mm:ss")
-                if (res.rows[index].others == null || res.rows[index].others == '') {
-                    var countData = {
-                        incount: 0,
-                        outcount: 0
-                    }
-                    res.rows[index].others = countData
-                }
-            }
-            console.log(res.rows)
-            table2.value.setButton([]);
-            table2.value.setDataList(res.rows);
-        })
-    }
-
-    const getFlowData = (carCode, carNum) => {
-        var obj = {
-            starttime: moment(dataValue.value[0]).format('YYYY-MM-DD'),
-            endtime: moment(dataValue.value[1]).format('YYYY-MM-DD')
-        }
-        getCountData({ devicecode: carCode, params: obj }).then(res => {
-            var data = {
-                carNum: carNum,
-                startTime: moment(dataValue.value[0]).format('YYYY-MM-DD'),
-                endTime: moment(dataValue.value[1]).format('YYYY-MM-DD'),
-                upCount: res.data.totalin,
-                downCount: res.data.totalout
-            }
-            carFlowList.value.push(data);
-        })
-    }
-
-    const getSiteData = (carCode, siteName, startTime, endTime) => {
-        var obj = {
-            starttime: startTime,
-            endtime: endTime
-        }
-        getCountData({ devicecode: carCode, params: obj }).then(res => {
-            var data = {
-                siteName: siteName,
-                startTime: moment(dataValue.value[0]).format('YYYY-MM-DD'),
-                endTime: moment(dataValue.value[1]).format('YYYY-MM-DD'),
-                upCount: res.data.totalin,
-                downCount: res.data.totalout
-            }
-            siteFlowList.value.push(data);
-        })
+    // liststaticFlow(paramobj).then((response) => {
+    //   xctotal.value = 0;
+    //   sctotal.value = 0;
+    //   for (var j in response.rows) {
+    //     var resObj = response.rows[j];
+    //     console.log(resObj.others);
+    //     if (resObj.others != null) {
+    //       xctotal.value += resObj.others.outcount;
+    //       sctotal.value += resObj.others.incount;
+    //     }
+    //   }
+    //   totalcount.value = xctotal.value + sctotal.value;
+    // });
+
+    getpassenger2({
+      start: moment(dataValue.value[0]).format("YYYY-MM-DD HH:mm:ss"),
+      end: moment(dataValue.value[1]).format("YYYY-MM-DD HH:mm:ss"),
+    }).then((res) => {
+      xctotal.value = 0;
+      sctotal.value = 0;
+      sctotal.value = res.data.flowCount.incount;
+      xctotal.value = res.data.flowCount.outcount;
+
+      totalcount.value = xctotal.value + sctotal.value;
+    });
+  });
+};
+
+const searchSite = () => {
+  var sites = [];
+  for (var index in carPathList.value) {
+    if (queryParams2.value.line == carPathList.value[index].id) {
+      for (var j in JSON.parse(carPathList.value[index].stationList)) {
+        var station = JSON.parse(carPathList.value[index].stationList)[j].data;
+        sites.push(station.dictLabel);
+      }
     }
-
-    const getStationData = (carCode, siteName) => {
-        var obj = {
-            starttime: moment(dataValue.value[0]).format('YYYY-MM-DD'),
-            endtime: moment(dataValue.value[1]).format('YYYY-MM-DD')
-        }
-        getCountData({ devicecode: carCode, params: obj }).then(res => {
-            var data = {
-                siteName: siteName,
-                startTime: moment(dataValue.value[0]).format('YYYY-MM-DD'),
-                endTime: moment(dataValue.value[1]).format('YYYY-MM-DD'),
-                upCount: res.data.totalin,
-                downCount: res.data.totalout
-            }
-            carFlowList.value.push(data);
-        })
+  }
+  var params = {
+    starttime: moment(dataValue2.value[0]).format("YYYY-MM-DD HH:mm:ss"),
+    endtime: moment(dataValue2.value[1]).format("YYYY-MM-DD HH:mm:ss"),
+  };
+  if (sites.length > 0) {
+    params.sites = sites.join(",");
+  }
+  var obj = {
+    dictLabel: queryParams2.value.site,
+    pageSize: queryParams2.value.pageSize,
+    pageNum: queryParams2.value.pageNum,
+    params: params,
+  };
+  listsitesFlow(obj).then((res) => {
+    total2.value = res.total;
+    for (var index in res.rows) {
+      res.rows[index].startTime = moment(dataValue.value[0]).format(
+        "YYYY-MM-DD HH:mm:ss"
+      );
+      res.rows[index].endTime = moment(dataValue.value[1]).format("YYYY-MM-DD HH:mm:ss");
+      if (res.rows[index].others == null || res.rows[index].others == "") {
+        var countData = {
+          incount: 0,
+          outcount: 0,
+        };
+        res.rows[index].others = countData;
+      }
     }
-
-    onMounted(() => {
-        initData();
-        getTreeSelect();
-    });
+    console.log(res.rows);
+    table2.value.setButton([]);
+    table2.value.setDataList(res.rows);
+  });
+};
+
+const getFlowData = (carCode, carNum) => {
+  var obj = {
+    starttime: moment(dataValue.value[0]).format("YYYY-MM-DD"),
+    endtime: moment(dataValue.value[1]).format("YYYY-MM-DD"),
+  };
+  getCountData({ devicecode: carCode, params: obj }).then((res) => {
+    var data = {
+      carNum: carNum,
+      startTime: moment(dataValue.value[0]).format("YYYY-MM-DD"),
+      endTime: moment(dataValue.value[1]).format("YYYY-MM-DD"),
+      upCount: res.data.totalin,
+      downCount: res.data.totalout,
+    };
+    carFlowList.value.push(data);
+  });
+};
+
+const getSiteData = (carCode, siteName, startTime, endTime) => {
+  var obj = {
+    starttime: startTime,
+    endtime: endTime,
+  };
+  getCountData({ devicecode: carCode, params: obj }).then((res) => {
+    var data = {
+      siteName: siteName,
+      startTime: moment(dataValue.value[0]).format("YYYY-MM-DD"),
+      endTime: moment(dataValue.value[1]).format("YYYY-MM-DD"),
+      upCount: res.data.totalin,
+      downCount: res.data.totalout,
+    };
+    siteFlowList.value.push(data);
+  });
+};
+
+const getStationData = (carCode, siteName) => {
+  var obj = {
+    starttime: moment(dataValue.value[0]).format("YYYY-MM-DD"),
+    endtime: moment(dataValue.value[1]).format("YYYY-MM-DD"),
+  };
+  getCountData({ devicecode: carCode, params: obj }).then((res) => {
+    var data = {
+      siteName: siteName,
+      startTime: moment(dataValue.value[0]).format("YYYY-MM-DD"),
+      endTime: moment(dataValue.value[1]).format("YYYY-MM-DD"),
+      upCount: res.data.totalin,
+      downCount: res.data.totalout,
+    };
+    carFlowList.value.push(data);
+  });
+};
+
+onMounted(() => {
+  initData();
+  getTreeSelect();
+});
 </script>
 
-<style></style>
+<style></style>

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>
@@ -164,14 +162,14 @@
         muted
       ></video>
       <video
-      v-if="showvideo"
-      style="width: 99%; margin-left: 0.5%"
-      ref="videoElement2"
-      class="centeredVideo"
-      controls
-      autoplay
-      muted
-    ></video>
+        v-if="showvideo"
+        style="width: 99%; margin-left: 0.5%"
+        ref="videoElement2"
+        class="centeredVideo"
+        controls
+        autoplay
+        muted
+      ></video>
     </el-dialog>
   </div>
 </template>
@@ -219,7 +217,7 @@ const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 const carInfoList = ref<CarInfoVO[]>([]);
 // const videoElement = ref(video)
 const buttonLoading = ref(false);
-const showvideo = ref(false)
+const showvideo = ref(false);
 const loading = ref(true);
 const showSearch = ref(true);
 const ids = ref<Array<string | number>>([]);
@@ -231,7 +229,7 @@ const flvPlayer = ref(null);
 const carScheduleList = ref<CarScheduleVO[]>([]);
 const timer = ref(null);
 const mapTimer = ref(null);
-const count = ref(0)
+const count = ref(0);
 
 const queryFormRef = ref<ElFormInstance>();
 const carInfoFormRef = ref<ElFormInstance>();
@@ -317,10 +315,10 @@ const openVideo = (item) => {
             findVideo = true;
             dialog.visible = true;
             setTimeout(() => {
-              if(i == 0){
+              if (i == 0) {
                 flvLoad(drivesInfo[j].code);
-                i++
-              }else{
+                i++;
+              } else {
                 showvideo.value = true;
                 setTimeout(() => {
                   flvLoad2(drivesInfo[j].code);
@@ -469,34 +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 += "$" + 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;
@@ -734,9 +751,9 @@ onMounted(() => {
     console.log(11111);
     getScheduleList();
     proxy.$forceUpdate();
-    return{
-      proxy
-    }// reloadData.value = false;
+    return {
+      proxy,
+    }; // reloadData.value = false;
     // setTimeout(() => {
     //   reloadData.value = true;
     // }, 500);