`统计设备与箱子`

src/api/gpsData/index.ts

@@ -34,7 +34,6 @@ export function playdevice(codes): AxiosPromise<any> {
   });
 }
 
-
 export function liststaticFlow(query): AxiosPromise<any> {
   return request({
     url: `/system/carInfo/liststaticFlow`,
@@ -43,11 +42,27 @@ export function liststaticFlow(query): AxiosPromise<any> {
   });
 }
 
-
 export function listsitesFlow(query): AxiosPromise<any> {
   return request({
     url: `/system/sites/flow`,
     params: query,
     method: 'get'
   });
-}
+}
+
+export function cabinetboxstatic(): AxiosPromise<any> {
+  return request({
+    url: `/system/common/cabinet/boxstatic`,
+    data: {},
+    method: 'post'
+  });
+}
+
+export function devicestatic(): AxiosPromise<any> {
+  return request({
+    url: `/system/common/station/devs`,
+    data: {},
+    method: 'post'
+  });
+}
+

src/components/HomeStatics/stationPie.vue

@@ -1,52 +1,83 @@
 <template>
-    <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 class="stationkeyClass">设备总数</div>
-                    <div class="stationvalueClass">80</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 class="stationkeyClass">在线设备</div>
-                    <div class="stationvalueClass">1</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 class="stationkeyClass">箱体总数</div>
-                    <div class="stationvalueClass">3200</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 class="stationkeyClass">空闲箱体</div>
-                    <div class="stationvalueClass">3100</div>
-                    <div class="stationunitClass">台</div>
-                </div>
-                <img class="imageDiv" src="@/assets/images/home/Bg(6).png"/>
-            </div>
+  <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 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 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 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 class="stationkeyClass">空闲箱体</div>
+          <div class="stationvalueClass">{{ kxcabinet }}</div>
+          <div class="stationunitClass">台</div>
+        </div>
+        <img class="imageDiv" src="@/assets/images/home/Bg(6).png" />
+      </div>
     </div>
+  </div>
 </template>
-<script setup name="Index" lang="ts">
+<script setup name="Index">
+import { cabinetboxstatic,devicestatic } from '@/api/gpsData';
 import * as echarts from 'echarts';
 
 const stationchart = ref();
 
+const totalcabinet = ref(0);
+const kxcabinet = ref(0);
+
+const totaldevice = ref(0);
+const onlinedevice = ref(0);
+
+
+const getBoxs = () => {
+  cabinetboxstatic().then((res) => {
+    totalcabinet.value = 0;
+    kxcabinet.value = 0;
+    for (let key in res) {
+      totalcabinet.value += res[key].total ?? 0;
+      kxcabinet.value += res[key].unuse ?? 0;
+    }
+  });
+}
+
+const getdevices = () => {
+  devicestatic().then((res) => {
+    totaldevice.value = 0;
+    onlinedevice.value = 0;
+    for (let key in res) {
+      totaldevice.value += 1;
+      onlinedevice.value += res[key].offline =="1"?0:1;
+    }
+    drawEchart()
+  });
+}
+
+
 const drawEchart = () => {
     let echartsObj = echarts.init(stationchart.value, "macarons");
-    var dateArray = getRecentDays();
     var option = {
         color:['#707070','#26EB96'],
         title: {
             // 图形标题(如果想要换行则使用ES6 `` 模板字符串)
             // 例如： `示例
             //   这里的文字会变为第二行(因为会保留格式)
-            text: '75%',
+            text: `${((onlinedevice.value/totaldevice.value)*100).toFixed(0)}%`,
             subtext: "在线率",
             left: "center",//对齐方式居中
             top: "35%",//距离顶部
@@ -73,8 +104,8 @@ const drawEchart = () => {
                     show: false
                 },
                 data: [
-                    { value: 25, name: 'Search Engine' },
-                    { value: 75, name: 'Direct' },
+                    { value: totaldevice.value-onlinedevice.value, name: '在线' },
+                    { value: onlinedevice.value, name: '不在线' },
                 ]
             }
         ]
@@ -98,6 +129,8 @@ const getRecentDays = () => {
 
 
 onMounted(() => {
+  getBoxs();
+  getdevices();
     drawEchart();
 })
 </script>
@@ -158,4 +191,4 @@ onMounted(() => {
     width: 9vw;
     margin-top: 1vh;
 }
-</style>
+</style>