数据

web/.env.development

@@ -4,8 +4,8 @@ VITE_SERVER_PORT = 8888
 VITE_BASE_API = /api
 VITE_FILE_API = /api
 //VITE_BASE_PATH = http://192.168.110.218
-//VITE_BASE_PATH = http://192.168.110.214
-VITE_BASE_PATH = http://127.0.0.1
+VITE_BASE_PATH = http://192.168.110.214
+//VITE_BASE_PATH = http://127.0.0.1
 VITE_POSITION = close
 VITE_EDITOR = vscode
 // VITE_EDITOR = webstorm 如果使用webstorm开发且要使用dom定位到代码行功能 请先自定添加 webstorm到环境变量 再将VITE_EDITOR值修改为webstorm

web/src/pinia/modules/screen.js

@@ -1,45 +1,52 @@
 import { defineStore } from 'pinia'
 import { reactive, ref } from 'vue'
 
-export const useScreenStore = defineStore('screen',() => {
-    const controllerData = reactive({})
-    let placeList = []
-    const tunnelList = reactive([])
-    const currentTunnel = ref({})
-    const screenType = ref('map')
+export const useScreenStore = defineStore('screen', () => {
+  const controllerData = reactive({})
+  const placeList = []
+  const tunnelList = reactive([])
+  const currentTunnel = ref({})
+  const screenType = ref('map')
+  const powerList = reactive([])
+  const setController = (val) => {
+    Object.assign(controllerData, val)
+  }
 
-    const setController = (val) => {
-        Object.assign(controllerData, val)
-    }
+  const setTunnelList = (val) => {
+    placeList.length = 0
+    val.list.forEach(item => {
+      placeList.push({
+        styleId: item.ID,
+        position: { lat: item.latitude, lng: item.longitude },
+      })
+    })
+    tunnelList.length = 0
+    tunnelList.push(...val.list)
+    console.log('list', val.list[0])
+  }
 
-    const setTunnelList = (val) => {
-        placeList.length = 0;
-        val.list.forEach(item => {
-            placeList.push({
-                styleId: item.ID,
-                position: { lat: item.latitude, lng: item.longitude } ,
-            })
-        })
-        tunnelList.length = 0
-        tunnelList.push(...val.list)
-    }
+  const setCurrentTunnel = (val) => {
+    currentTunnel.value = val
+  }
 
-    const setCurrentTunnel = (val) => {
-        currentTunnel.value = val
-    }
-
-    const setScreenType = (val) => {
-        screenType.value = val
-    }
-    return {
-        controllerData,
-        setController,
-        tunnelList,
-        setTunnelList,
-        placeList,
-        currentTunnel,
-        setCurrentTunnel,
-        screenType,
-        setScreenType
-    }
+  const setScreenType = (val) => {
+    screenType.value = val
+  }
+  const changePowerList = (val) => {
+    powerList.length = 0
+    powerList.push(...val)
+  }
+  return {
+    controllerData,
+    setController,
+    tunnelList,
+    setTunnelList,
+    placeList,
+    currentTunnel,
+    setCurrentTunnel,
+    screenType,
+    setScreenType,
+    powerList,
+    changePowerList,
+  }
 })

web/src/view/admin/device/device.vue

@@ -193,7 +193,7 @@
           </el-select>
         </el-form-item>
         <el-form-item label="设备图标">
-          <icon
+          <typeIcon
             :meta="iconData"
             style="width: 100%"
           />
@@ -248,6 +248,12 @@
             />
           </el-select>
         </el-form-item>
+        <el-form-item label="类型图标">
+          <type-icon
+            style="width: 100%"
+            :meta="modifyIcon"
+          />
+        </el-form-item>
       </el-form>
       <template #footer>
         <div class="dialog-footer">
@@ -530,7 +536,7 @@ import {
   updateDeviceGenre
 } from '@/api/device'
 import { queryAllTunnels } from '@/api/tunnel'
-import icon from '@/view/superAdmin/menu/icon.vue'
+import typeIcon from '@/view/superAdmin/menu/icon.vue'
 
 // 搜索条件
 const deviceSearch = ref({
@@ -582,7 +588,8 @@ const deviceGenreDrawer = ref(false)
 const deviceGenreData = ref({
   id: 0,
   name: '',
-  type: ''
+  type: '',
+  iconAddress: ''
 })
 
 const genreOptions = [
@@ -631,10 +638,19 @@ const isDeviceGenreEditDialog = (val) => {
   deviceGenreData.value = val
 }
 const deviceGenreEdit = async() => {
+  deviceGenreData.value.iconAddress = modifyIcon.icon
   deviceGenreRef.value.validate(async(valid) => {
     if (valid) {
       await updateDeviceGenre(deviceGenreData.value).then(res => {
         deviceGenreEditDialog.value = false
+        Object.assign(modifyIcon, {
+          activeName: '',
+          title: '',
+          icon: '',
+          defaultMenu: false,
+          closeTab: false,
+          keepAlive: false,
+        })
         if (res.code === 0) {
           ElMessage.success('修改成功')
         }
@@ -796,6 +812,15 @@ const iconData = reactive({
   keepAlive: false,
 })
 
+const modifyIcon = reactive({
+  activeName: '',
+  title: '',
+  icon: '',
+  defaultMenu: false,
+  closeTab: false,
+  keepAlive: false,
+})
+
 onMounted(() => {
   getData()
 })

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

@@ -0,0 +1,63 @@
+<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

@@ -1,5 +1,5 @@
 <template>
-  <div style="background-color: #0e122d">
+  <div style="background-color: #0e122d;width: 100%;height: 1200px">
     <div class="screenTitle">
       <img
         :src="topBg"
@@ -30,17 +30,24 @@
                 class="deviceOption"
               >
                 <div style="width: 35px;height: 35px">
-                  <img
-                    :src="item.url"
-                    style="width: 35px;height: 35px"
-                    alt=""
+                  <el-tooltip
+                    :content="item2.name"
+                    placement="bottom"
+                    effect="light"
                   >
+                    <el-icon
+                      size="35"
+                      color="#1b92fd"
+                    >
+                      <component :is="item2.iconAddress" />
+                    </el-icon>
+                  </el-tooltip>
                 </div>
                 <el-text
                   style="padding-top: 8px;color: #ffffff"
                   size="small"
                 >
-                  1/0
+                  数量：{{ item2.Count }}
                 </el-text>
               </div>
             </div>
@@ -56,56 +63,69 @@
             <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 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">
           <Map />
         </div>
-        <div class="centerBox_chart">
-          <div class="centerBox_environment">
-            <div class="centerBox_environment_title">
-              <img
-                :src="Setting"
-                alt=""
-                style="padding-left: 10px"
-              >
-              <span style="padding-left: 15px;">环境</span>
-            </div>
-            <div
-              id="environment"
-              class="centerBox_environment_chart"
-              style="width: 500px"
-            />
-          </div>
-          <div class="centerBox_environment">
-            <div class="centerBox_environment_title">
-              <img
-                :src="Sunlight"
-                alt=""
-                style="padding-left: 10px"
-              >
-              <span style="padding-left: 15px;">光照度</span>
-            </div>
-            <div
-              id="lamp"
-              class="centerBox_environment_chart"
-              style="width: 500px"
-            />
-          </div>
-        </div>
       </div>
       <div class="rightBox" />
     </div>
+    <div class="centerBox_chart">
+      <div class="centerBox_environment">
+        <div class="centerBox_environment_title">
+          <img
+            :src="Setting"
+            alt=""
+            style="padding-left: 10px"
+          >
+          <span style="padding-left: 15px;">环境</span>
+        </div>
+        <div
+          id="environment"
+          class="centerBox_environment_chart"
+          style="width: 500px"
+        />
+      </div>
+      <div class="centerBox_environment">
+        <div class="centerBox_environment_title">
+          <img
+            :src="Sunlight"
+            alt=""
+            style="padding-left: 10px"
+          >
+          <span style="padding-left: 15px;">光照度</span>
+        </div>
+        <div
+          id="lamp"
+          class="centerBox_environment_chart"
+          style="width: 500px"
+        />
+      </div>
+      <div
+        class="centerBox_environment"
+      >
+        <div class="centerBox_environment_title">
+          <img
+            :src="Power"
+            alt=""
+            style="padding-left: 10px"
+          >
+          <span style="padding-left: 15px;">电感</span>
+        </div>
+        <inductance-chart />
+      </div>
+    </div>
   </div>
 </template>
 
@@ -126,16 +146,9 @@ 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 deviceList = reactive([
-//   { url: environments, label: '环境：', value: '1/0' },
-//   { url: fourWays, label: '四路：', value: '1/0' },
-//   { url: inductance, label: '电感：', value: '1/0' },
-//   { url: singleLamp, label: '单灯：', value: '1/0' },
-// ])
-
 const deviceTypeList = reactive([])
 
 const condition = {
@@ -354,13 +367,13 @@ watch(() => useScreen.currentTunnel, (newValue) => {
 }
 .screen{
   width: 100%;
-  height: 1200px;
+  height: 600px;
   background-color: #0e122d;
   display: flex;
   margin-top: 20px;
   .leftBox {
     width: 20%;
-    height: 1200px;
+    height: 600px;
     .deviceSummary {
       height: 240px;
       .boxShape;
@@ -396,6 +409,7 @@ watch(() => useScreen.currentTunnel, (newValue) => {
     .inductance {
       height: 200px;
       margin-top: 20px;
+      position: relative;
       .boxShape;
       .inductanceTitle {
         width: 370px;
@@ -424,43 +438,54 @@ watch(() => useScreen.currentTunnel, (newValue) => {
   }
   .centerBox {
     width: 60%;
-    height: 1200px;
+    height: 600px;
     display: flex;
     flex-direction: column;
     align-items: center;
-    .centerBox_chart {
-      width: 1200px;
-      height: 220px;
-      margin-top: 40px;
-      display: flex;
-      justify-content: space-between;
-      border: 1px solid rgba(27,146,253,0.5);
-      background: rgba(50, 72, 106, 0.2);
-    }
-    .centerBox_environment{
-      width: 500px;
-      height: 220px;
-      position: relative;
-      .centerBox_environment_title {
-        width: 500px;
-        height: 50px;
-        .title;
-        img {
-          width: 30px;
-          height: 30px;
-        }
-      }
-      .centerBox_environment_chart {
-        height: 250px;
-        position: absolute;
-        top: 5px;
-      }
-    }
   }
   .rightBox {
     width: 20%;
-    height: 1200px;
+    height: 600px;
   }
 }
+.centerBox_chart {
+  width: 2000px;
+  height: 220px;
+  margin-top: 40px;
+  margin-left: 20px;
+  display: flex;
+  justify-content: space-between;
+  border: 1px solid rgba(27,146,253,0.5);
+  background: rgba(50, 72, 106, 0.2);
+}
+.centerBox_environment{
+  width: 500px;
+  height: 220px;
+  position: relative;
+  .centerBox_environment_title {
+    width: 500px;
+    height: 50px;
+    .title;
+    img {
+      width: 30px;
+      height: 30px;
+    }
+  }
+  .centerBox_environment_chart {
+    height: 250px;
+    position: absolute;
+    top: 5px;
+  }
+}
+.el-popper.is-customized {
+  /* Set padding to ensure the height is 32px */
+  padding: 6px 12px;
+  background: #409eff;
+}
+
+.el-popper.is-customized .el-popper__arrow::before {
+  background: #409eff;
+  right: 0;
+}
 </style>