Iot接口联调

src/components/ColorDiv.vue

@@ -1,32 +1,33 @@
 <template>
   <div class="color-div">
-    <div
-      v-for="(item, index) in data"
-      :key="index"
-      :style="{ width: item.numRatio }"
-      class="small-div"
-    >
+    <template v-for="(item, index) in data" :key="index">
       <div
-        :style="{
-          borderBottomColor: colorData[index % data.length],
-          opacity: index != 0 ? 1 : 0
-        }"
-        class="left-border-item"
-      ></div>
-      <div
-        :style="{
-          background: colorData[index % data.length],
-        }"
-        class="color-item"
-      ></div>
-      <div
-        :style="{
-          borderTopColor: colorData[index % data.length],
-          opacity: index != data.length - 1 ? 1 : 0
-        }"
-        class="border-item"
-      ></div>
-    </div>
+        v-if="item.numRatio != '0'"
+        :style="{ width: getrealRatio(item.numRatio) }"
+        class="small-div"
+      >
+        <div
+          :style="{
+            borderBottomColor: colorData[index % data.length],
+            opacity: index != 0 ? 1 : 0,
+          }"
+          class="left-border-item"
+        ></div>
+        <div
+          :style="{
+            background: colorData[index % data.length],
+          }"
+          class="color-item"
+        ></div>
+        <div
+          :style="{
+            borderTopColor: colorData[index % data.length],
+            opacity: index != data.length - 1 ? 1 : 0,
+          }"
+          class="border-item"
+        ></div>
+      </div>
+    </template>
   </div>
 </template>
 
@@ -47,6 +48,14 @@ const props = defineProps({
     required: true,
   },
 });
+
+const getrealRatio = (numRatio) => {
+  const total = props.data
+    .map((item) => Number(item.numRatio))
+    .reduce((prev, curr) => prev + curr);
+  console.log(total);
+  return ((numRatio * 100) / total).toFixed(2) + "%";
+};
 </script>
 
 <style lang="scss">

src/views/IOTDataAnalysis/components/IOTLeft.vue

@@ -3,15 +3,27 @@
     <div class="left-box">
       <titleBgBox class="left-title-bg-box" title="基础情况">
         <div class="base-data">
-          <div class="base-box base-data-device">
+          <div
+            class="base-box base-data-device"
+            :class="{ 'base-data-active': deviceStatus == 'all' }"
+            @click="deviceStatusSelect('all')"
+          >
             <span class="name">物联设备</span>
             <span class="num">{{ basicsInfo.totalDevices }}</span>
           </div>
-          <div class="base-box base-data-online">
+          <div
+            class="base-box base-data-online"
+            :class="{ 'base-data-active': deviceStatus == 'online' }"
+            @click="deviceStatusSelect('online')"
+          >
             <span class="name">在线数</span>
             <span class="num">{{ basicsInfo.onlineDevices }}</span>
           </div>
-          <div class="base-box base-data-unline">
+          <div
+            class="base-box base-data-unline"
+            :class="{ 'base-data-active': deviceStatus == 'unline' }"
+            @click="deviceStatusSelect('unline')"
+          >
             <span class="name">离线数</span>
             <span class="num">{{ basicsInfo.offlineDevices }}</span>
           </div>
@@ -58,7 +70,7 @@
                   ? '#FFC85A'
                   : '',
               }"
-              >{{ item.numRatio }}</span
+              >{{ item.numRatio + '%' }}</span
             >
           </div>
         </div>
@@ -122,6 +134,9 @@ const basicsInfo = reactive({
 //设备分类当前项选中
 const selectDeviceType = ref([]);
 
+//设备在线状态选中
+const deviceStatus = ref(null);
+
 const getCount = (totalArr, num) => {
   const total = totalArr
     .map((item) => item.num)
@@ -149,26 +164,26 @@ const getListEquipment = () => {
     if (res.data.code == "200") {
       const data = res.data.data;
       const typeObj = {};
-      debugger
+      debugger;
       data.list.forEach((item) => {
         if (typeObj[item.monitorScene]) {
           typeObj[item.monitorScene].num++;
           //onlineState: 设备状态 0:未激活;1:在线;2:离线
-          item.onlineState == 1 && typeObj[item.monitorScene].onlineNum++;
-          item.onlineState == 2 && typeObj[item.monitorScene].unlineNum++;
         } else {
           typeObj[item.monitorScene] = {
             monitorScene: item.monitorScene, //监管场景
             serialNumber: item.serialNumber,
             district: item.district, //分布区域
             num: 1,
-            onlineNum: 1,
-            unlineNum: 1,
-            total: data.total
+            onlineNum: 0,
+            unlineNum: 0,
+            total: data.total,
           };
         }
+        item.onlineState === 1 && typeObj[item.monitorScene].onlineNum++;
+        item.onlineState === 2 && typeObj[item.monitorScene].unlineNum++;
       });
-      equipmentData.value = Object.values(typeObj)
+      equipmentData.value = Object.values(typeObj);
     }
   });
 };
@@ -176,6 +191,13 @@ const getListEquipment = () => {
 //获取设备分布数据
 const deviceDistrubuteArr = computed(() => {
   const deviceDistruibute = {};
+  //选择需要获取的字段
+  const numName =
+    deviceStatus.value == "online"
+      ? "onlineNum"
+      : deviceStatus.value == "unline"
+      ? "unlineNum"
+      : "num";
   equipmentData.value.forEach((item) => {
     if (
       selectDeviceType.value.length > 0 &&
@@ -183,26 +205,35 @@ const deviceDistrubuteArr = computed(() => {
     ) {
       return;
     }
+
+    //统计数量
     if (deviceDistruibute[item.district]) {
-      deviceDistruibute[item.district].num += item.num;
+      deviceDistruibute[item.district][numName] += item[numName];
     } else {
       deviceDistruibute[item.district] = {
         name: item.district,
-        num: item.num,
+        num: item[numName],
       };
     }
   });
   return Object.values(deviceDistruibute);
 });
 
+//获取设备类型数据
 const deviceTypeArr = computed(() => {
-  const result =  equipmentData.value.map((item) => {
+  const numName =
+    deviceStatus.value == "online"
+      ? "onlineNum"
+      : deviceStatus.value == "unline"
+      ? "unlineNum"
+      : "num";
+  const result = equipmentData.value.map((item) => {
     return {
       ...item,
-      numRatio: ((item.num * 100) / item.total).toFixed(0) + "%",
+      numRatio: ((item[numName] * 100) / item.total).toFixed(0),
     };
   });
-  return result
+  return result;
 });
 
 //设备类型选中
@@ -219,6 +250,11 @@ const selectCurrentKey = (params) => {
   selectDeviceType.value.push(params.monitorScene);
 };
 
+//基本情况设备状态选择
+const deviceStatusSelect = (status) => {
+  deviceStatus.value = status;
+};
+
 const init = () => {
   getBasicsInfo();
   getListEquipment();
@@ -296,6 +332,13 @@ onMounted(() => {
           // color: #ffd041;
         }
       }
+      .base-data-active {
+        .num,
+        .name {
+          color: #ffd041;
+        }
+      }
+
       .base-data-unline {
         position: absolute;
         right: 25px;

src/views/IOTDataAnalysis/components/IOTRight.vue

@@ -120,7 +120,7 @@ const deviceInfoOption = (xData, yData) => {
     ],
     series: [
       {
-        name: "Email",
+        name: "设备消息趋势",
         type: "line",
         stack: "Total",
         //   emphasis: {