数据

web/src/pinia/modules/screen.js

@@ -7,7 +7,6 @@ export const useScreenStore = defineStore('screen', () => {
   const tunnelList = reactive([])
   const currentTunnel = ref({})
   const screenType = ref('map')
-  const powerList = reactive([])
   const setController = (val) => {
     Object.assign(controllerData, val)
   }
@@ -22,7 +21,13 @@ export const useScreenStore = defineStore('screen', () => {
     })
     tunnelList.length = 0
     tunnelList.push(...val.list)
-    console.log('list', val.list[0])
+    // const deviceList = val.list[0].devices
+    // powerList.length = 0
+    // deviceList.forEach(item => {
+    //   if (item.genre === 7) {
+    //     powerList.push(item)
+    //   }
+    // })
   }
 
   const setCurrentTunnel = (val) => {
@@ -32,10 +37,6 @@ export const useScreenStore = defineStore('screen', () => {
   const setScreenType = (val) => {
     screenType.value = val
   }
-  const changePowerList = (val) => {
-    powerList.length = 0
-    powerList.push(...val)
-  }
   return {
     controllerData,
     setController,
@@ -46,7 +47,5 @@ export const useScreenStore = defineStore('screen', () => {
     setCurrentTunnel,
     screenType,
     setScreenType,
-    powerList,
-    changePowerList,
   }
 })

web/src/view/screen/components/inductanceChart.vue

@@ -1,63 +0,0 @@
-<template>
-  <div
-    id="main"
-    class="inductanceBox"
-  />
-</template>
-
-<script setup>
-import { onMounted } from 'vue'
-import * as echarts from 'echarts'
-
-onMounted(() => {
-  const chartDom = document.getElementById('main')
-  const myChart = echarts.init(chartDom)
-  const option = {
-    xAxis: {
-      type: 'time', // 使用时间类型的x轴
-      boundaryGap: false,
-      axisLine: {
-        show: true,
-        lineStyle: {
-          color: '#ffffff',
-          width: 1,
-          type: 'solid'
-        }
-      }
-    },
-    yAxis: {
-      axisLine: {
-        show: true,
-        lineStyle: {
-          color: '#ffffff',
-          width: 1,
-          type: 'solid'
-        }
-      },
-      splitLine: {
-        lineStyle: {
-          color: ['#ffffff']
-        }
-      }
-    },
-    series: [
-      {
-        data: [820, 932, 901, 934, 1290, 1330, 1320],
-        type: 'line',
-        areaStyle: {}
-      }
-    ]
-  }
-
-  option && myChart.setOption(option)
-})
-</script>
-
-<style scoped lang="scss">
-.inductanceBox{
-  width: 400px;
-  height: 250px;
-  position: absolute;
-  top: 0;
-}
-</style>

web/src/view/screen/dataDashboard.vue

@@ -53,26 +53,16 @@
             </div>
           </div>
         </div>
-        <div class="inductance">
-          <div class="inductanceTitle">
+        <div class="warn">
+          <div class="warnTitle">
             <img
               alt=""
-              :src="Power"
+              :src="Warn"
               style="padding-left: 15px"
             >
-            <span style="padding-left: 10px;">电感检测</span>
+            <span style="padding-left: 10px;">警告列表</span>
           </div>
         </div>
-        <!--        <div class="warn">-->
-        <!--          <div class="warnTitle">-->
-        <!--            <img-->
-        <!--              alt=""-->
-        <!--              :src="Warn"-->
-        <!--              style="padding-left: 15px"-->
-        <!--            >-->
-        <!--            <span style="padding-left: 10px;">警告列表</span>-->
-        <!--          </div>-->
-        <!--        </div>-->
       </div>
       <div class="centerBox">
         <div style="width: 1200px;height: 600px;border: 3px solid #1b92fd; padding: 2px">
@@ -94,7 +84,7 @@
         <div
           id="environment"
           class="centerBox_environment_chart"
-          style="width: 500px"
+          style="width: 600px"
         />
       </div>
       <div class="centerBox_environment">
@@ -109,12 +99,10 @@
         <div
           id="lamp"
           class="centerBox_environment_chart"
-          style="width: 500px"
+          style="width: 600px"
         />
       </div>
-      <div
-        class="centerBox_environment"
-      >
+      <div class="centerBox_environment">
         <div class="centerBox_environment_title">
           <img
             :src="Power"
@@ -123,7 +111,21 @@
           >
           <span style="padding-left: 15px;">电感</span>
         </div>
-        <inductance-chart />
+        <div
+          id="main"
+          class="inductanceBox"
+        />
+        <div class="custom-select">
+          <select @change="changePowerDevice($event.target.value)">
+            <option
+              v-for="(item,index) in powerList"
+              :key="item.ID"
+              :value="index"
+            >
+              {{ item.name }}
+            </option>
+          </select>
+        </div>
       </div>
     </div>
   </div>
@@ -146,9 +148,8 @@ import * as echarts from 'echarts'
 import { useScreenStore } from '@/pinia/modules/screen'
 import { queryTunnelList } from '@/api/tunnel'
 import { queryAllDeviceGenres } from '@/api/device'
-import inductanceChart from '@/view/screen/components/inductanceChart.vue'
 const useScreen = useScreenStore()
-
+// .................................................................
 const deviceTypeList = reactive([])
 
 const condition = {
@@ -162,6 +163,7 @@ const condition = {
 }
 
 const lampData = reactive({})
+const powerList = reactive([])
 onMounted(() => {
   queryTunnelList(condition).then(res => {
     if (res.code === 0) {
@@ -169,6 +171,17 @@ onMounted(() => {
       Object.assign(lampData, res.data.list[0])
       loading(lampData.envData)
       loadingLamp(lampData.envData)
+      powerList.length = 0
+      lampData.devices.forEach(item => {
+        if (item.genre === 7) {
+          powerList.push(item)
+        }
+      })
+      if (powerList.length === 0) {
+        loadInductance([])
+        return
+      }
+      loadInductance(powerList[0].inductanceDetails)
     }
   })
   queryAllDeviceGenres().then(res => {
@@ -178,7 +191,6 @@ onMounted(() => {
         result.push(res.data.slice(i, i + 4))
       }
       deviceTypeList.push(...result)
-      console.log('设备类型', deviceTypeList)
     }
   })
 })
@@ -319,11 +331,89 @@ const loadingLamp = (list) => {
   option && myChart.setOption(option)
 }
 
+const loadInductance = (list) => {
+  const chartDom = document.getElementById('main')
+  const myChart = echarts.init(chartDom)
+  const option = {
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        type: 'cross',
+        crossStyle: {
+          color: '#ffffff'
+        }
+      },
+    },
+    legend: {
+      data: [
+        {
+          name: '电感',
+          textStyle: {
+            color: '#409eff' // 图例文字颜色
+          }
+        },
+      ],
+    },
+    xAxis: {
+      type: 'time', // 使用时间类型的x轴
+      boundaryGap: false,
+      axisLine: {
+        show: true,
+        lineStyle: {
+          color: '#ffffff',
+          width: 1,
+          type: 'solid'
+        }
+      }
+    },
+    yAxis: {
+      axisLine: {
+        show: true,
+        lineStyle: {
+          color: '#ffffff',
+          width: 1,
+          type: 'solid'
+        }
+      },
+      splitLine: {
+        lineStyle: {
+          color: ['#ffffff']
+        }
+      }
+    },
+    series: [
+      {
+        name: '电感',
+        data: list.map(item => [new Date(item.uploadTime), item.totalActivePower]),
+        type: 'line',
+        areaStyle: {}
+      }
+    ]
+  }
+
+  option && myChart.setOption(option)
+}
+
 watch(() => useScreen.currentTunnel, (newValue) => {
   loading(newValue.envData)
   loadingLamp(newValue.envData)
+  powerList.length = 0
+  newValue.devices.forEach(item => {
+    if (item.genre === 7) {
+      powerList.push(item)
+    }
+  })
+  if (powerList.length === 0) {
+    loadInductance([])
+    return
+  }
+  loadInductance(powerList[0].inductanceDetails)
 })
 
+const changePowerDevice = (e) => {
+  loadInductance(powerList[e].inductanceDetails)
+}
+
 </script>
 
 <style scoped lang="less">
@@ -422,7 +512,7 @@ watch(() => useScreen.currentTunnel, (newValue) => {
       }
     }
     .warn {
-      height: 400px;
+      height: 340px;
       margin-top: 20px;
       .boxShape;
       .warnTitle {
@@ -449,7 +539,7 @@ watch(() => useScreen.currentTunnel, (newValue) => {
   }
 }
 .centerBox_chart {
-  width: 2000px;
+  width: 2080px;
   height: 220px;
   margin-top: 40px;
   margin-left: 20px;
@@ -459,7 +549,7 @@ watch(() => useScreen.currentTunnel, (newValue) => {
   background: rgba(50, 72, 106, 0.2);
 }
 .centerBox_environment{
-  width: 500px;
+  width: 600px;
   height: 220px;
   position: relative;
   .centerBox_environment_title {
@@ -476,6 +566,48 @@ watch(() => useScreen.currentTunnel, (newValue) => {
     position: absolute;
     top: 5px;
   }
+  .inductanceBox {
+    width: 600px;
+    height: 250px;
+    position: absolute;
+    top: 5px;
+  }
+  .custom-select {
+    width: 150px;
+    position: absolute;
+    right: 20px;
+    top: 10px;
+  }
+
+  .custom-select select {
+    width: 100%;
+    padding: 10px;
+    background-color: rgba(50, 72, 106, 0.2);
+    color: #ecf0f1;
+    border: 2px solid rgba(27,146,253,0.5);
+    border-radius: 5px;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    background-image: url('data:image/svg+xml;utf8,<svg fill="%23ecf0f1" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/></svg>');
+    background-repeat: no-repeat;
+    background-position: right 10px center;
+    cursor: pointer;
+  }
+
+  .custom-select select:focus {
+    outline: none;
+    border-color: #3498db;
+  }
+
+  .custom-select option {
+    background-color: #2c3e50;
+    color: #ecf0f1;
+  }
+
+  .custom-select option:hover {
+    background-color: #3498db;
+  }
 }
 .el-popper.is-customized {
   /* Set padding to ensure the height is 32px */
@@ -487,5 +619,6 @@ watch(() => useScreen.currentTunnel, (newValue) => {
   background: #409eff;
   right: 0;
 }
+
 </style>