`fix`

src/components/HomeComponents/stationPie.vue

@@ -1,77 +1,50 @@
 <template>
-    <div class="stationEchartsClass">
-        <div class="lineEchartsClass">
-            <div class="titleBg">
-                <div class="titleFont">电子站台统计</div>
+  <div class="stationEchartsClass">
+    <div class="lineEchartsClass">
+      <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;">
+              <div><img style="width: 2vw;height: 1vh;" 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>
+              </div>
+              <div style="margin-left: 6vw;"><img style="width: 2vw;height: 1vh;" src="@/assets/images/homeImages/bottom.png" /></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;">
-                            <div><img style="width: 2vw;height: 1vh;" 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;">
-                                    {{device.total}}
-                                </div>
-                            </div>
-                            <div style="margin-left: 6vw;"><img style="width: 2vw;height: 1vh;"
-                                    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;">
-                            <div><img style="width: 2vw;height: 1vh;" 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;">
-                                    1
-                                </div>
-                            </div>
-                            <div style="margin-left: 6vw;"><img style="width: 2vw;height: 1vh;"
-                                    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;">
-                            <div><img style="width: 2vw;height: 1vh;" 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;">
-                                    3200
-                                </div>
-                            </div>
-                            <div style="margin-left: 6vw;"><img style="width: 2vw;height: 1vh;"
-                                    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;">
-                            <div><img style="width: 2vw;height: 1vh;" 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;">
-                                    3100
-                                </div>
-                            </div>
-                            <div style="margin-left: 6vw;"><img style="width: 2vw;height: 1vh;"
-                                    src="@/assets/images/homeImages/bottom.png"></div>
-                        </div>
-                    </div>
+            <div class="countDiv" style="display: flex;flex-direction: column;justify-content: space-between;margin-top: 0.5vh;">
+              <div><img style="width: 2vw;height: 1vh;" 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>
+              <div style="margin-left: 6vw;"><img style="width: 2vw;height: 1vh;" 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;">
+              <div><img style="width: 2vw;height: 1vh;" 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>
+              <div style="margin-left: 6vw;"><img style="width: 2vw;height: 1vh;" 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;">
+              <div><img style="width: 2vw;height: 1vh;" 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>
+              <div style="margin-left: 6vw;"><img style="width: 2vw;height: 1vh;" src="@/assets/images/homeImages/bottom.png" /></div>
+            </div>
+          </div>
 
-                    <!-- <div style="width:10vw;margin-left: 1vw;padding-right: 1vw;">
+          <!-- <div style="width:10vw;margin-left: 1vw;padding-right: 1vw;">
                         <div
                             style="display: flex;flex-direction: row;justify-content: space-around;align-items: start;">
                             <div class="stationkeyClass">设备总数</div>
@@ -101,239 +74,273 @@
                         </div>
                         <img class="imageDiv" src="@/assets/images/home/Bg(6).png" />
                     </div> -->
-                </div>
-            </div>
         </div>
+      </div>
     </div>
+  </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 * 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 stationchart = ref();
 
-    const device = ref({
-        total: 0,
-        online: 0,
-        boxs: 0,
-        kongxian: 0
-    })
 
-    const getDeviceData = () => {
-        getDicts('tbl_sites').then(res => {
-            initSiteData(res)
-        })
+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 isJSON = (str) => {
-        if (typeof str == 'string') {
-            try {
-                var obj = JSON.parse(str);
-                if (typeof obj == 'object' && obj) {
-                    return true;
-                } else {
-                    return false;
-                }
 
-            } catch (e) {
+const device = ref({
+    total: 0,
+    online: 0,
+    boxs: 0,
+    kongxian: 0
+})
+
+const getDeviceData = () => {
+    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;
         }
     }
+}
 
-    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);
-                        }
+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);
                     }
                 }
             }
         }
-        // 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: '75%',
-                subtext: "在线率",
-                left: "center",//对齐方式居中
-                top: "40%",//距离顶部
-                textStyle: {//文字配置
-                    color: "#ffffff",//文字颜色
-                    fontSize: 30,//字号
-                    align: "center"//对齐方式
-                },
-                subtextStyle: {
-                    color: "#C1D2E4"
-                }
+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"//对齐方式
             },
-            series: [
-                {
-                    name: 'Access From',
-                    type: 'pie',
-                    radius: ['65%', '80%'],
-                    avoidLabelOverlap: false,
-                    label: {
-                        show: false,
-                        position: 'center'
-                    },
-                    labelLine: {
-                        show: false
-                    },
-                    data: [
-                        { value: 25, name: 'Search Engine' },
-                        { value: 75, name: 'Direct' },
-                    ]
-                }
-            ]
-        };
-        echartsObj.setOption(option);
-    }
+            subtextStyle: {
+                color: "#C1D2E4"
+            }
+        },
+        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);
+}
 
-    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 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;
+}
 
 
-    onMounted(() => {
-        getDeviceData();
-        drawEchart();
-    })
+onMounted(() => {
+    getBoxs();
+  getdevices();
+    getDeviceData();
+    drawEchart();
+})
 </script>
 <style lang="scss">
-    .stationEchartsClass {
-        height: 20vh;
-        width: 20vw;
-
-        .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;
-        }
+.stationEchartsClass {
+    height: 20vh;
+    width: 20vw;
 
+    .titleBg {
+        background: url("@/assets/images/homeImages/titleBg.png") no-repeat;
+        background-size: 100% 100%;
     }
 
-    .countDiv {
-        width: 8vw;
-        height: 4vh;
-        background-color: #375785;
-    }
-
-    .countClass {
+    .titleFont {
         font-family: Source Han Sans CN, Source Han Sans CN;
-        font-weight: bold;
+        font-weight: 400;
         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;
+        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;
     }
 
-    .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;
+    .divContent {
+        background: url("@/assets/images/homeImages/contentBg.png") no-repeat;
+        background-size: 100% 100%;
+        width: 20vw;
+        height: 22vh;
     }
 
-    .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;
-    }
+}
 
-    .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;
-    }
+.countDiv {
+    width: 8vw;
+    height: 4vh;
+    background-color: #375785;
+}
 
-    .imageDiv {
-        width: 9vw;
-        margin-top: 1vh;
-    }
+.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;
+}
+
+.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;
+}
+
+.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;
+}
+
+.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;
+}
+
+.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;
+}
+
+.imageDiv {
+    width: 9vw;
+    margin-top: 1vh;
+}
 </style>