`fix`

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/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: 300px">
+        <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>

vite.config.ts

@@ -26,8 +26,8 @@ export default defineConfig(({ mode, command }: ConfigEnv): UserConfig => {
       open: true,
       proxy: {
         [env.VITE_APP_BASE_API]: {
-          target: 'http://localhost:8080',
-          // target: 'http://47.104.97.60/api',
+          // target: 'http://localhost:8080',
+          target: 'http://47.104.97.60/api',
           changeOrigin: true,
           ws: true,
           rewrite: (path) => path.replace(new RegExp('^' + env.VITE_APP_BASE_API), '')