数据

web/.env.development

@@ -3,9 +3,9 @@ VITE_CLI_PORT = 8080
 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.218
 //VITE_BASE_PATH = http://192.168.110.214
-//VITE_BASE_PATH = http://127.0.0.1
+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/view/screen/components/map.vue

@@ -50,9 +50,10 @@
           style="width: 100%;display: flex; justify-content: space-between"
         >
           <el-switch
-            v-for="item in relayList[0]"
+            v-for="(item,index) in relayList[0].relay"
             :key="item.id"
             v-model="item.state"
+            :disabled="index === 0"
             @change="changeTransparency($event,'四路',item)"
           />
         </div>
@@ -71,13 +72,26 @@
           style="width: 100%;display: flex; justify-content: space-between"
         >
           <el-switch
-            v-for="item in relayList[1]"
+            v-for="(item,index) in relayList[1].relay"
             :key="item.id"
             v-model="item.state"
+            :disabled="index === 0"
             @change="changeTransparencyTwo($event,'四路',item)"
           />
         </div>
       </el-form-item>
+      <el-form-item
+        v-if="dialogData.switchType === '单灯控制器'"
+        label-width="0"
+      >
+        <el-button
+          type="primary"
+          style="width: 100%"
+          @click="singleLamp"
+        >
+          设定
+        </el-button>
+      </el-form-item>
       <el-form-item label-width="0">
         <div style="width: 100%; display: flex; justify-content: space-between">
           <el-button
@@ -98,7 +112,7 @@ import { defineComponent, ref, reactive } from 'vue-demi'
 import { useScreenStore } from '@/pinia/modules/screen'
 import { updateTunnelLamp } from '@/api/tunnel'
 import { ElMessage } from 'element-plus'
-import {deviceSwitch} from "@/api/device";
+import { deviceSwitch } from '@/api/device'
 const useScreen = useScreenStore()
 export default defineComponent({
   name: 'MarkerDemo',
@@ -129,8 +143,8 @@ export default defineComponent({
 
     const onMapInited = () => {
       // 地图加载完成后，可以获取地图实例、点标记实例，调用地图实例、点标记实例方法
-      console.log(mapRef.value.map)
-      console.log(markerRef.value.marker)
+      // console.log(mapRef.value.map)
+      // console.log(markerRef.value.marker)
     }
 
     const getLayerInstance = () => {
@@ -182,44 +196,65 @@ export default defineComponent({
         relayList.length = 0
         item.devices.forEach(option => {
           if (option.genre === 6) {
-            relayList.push(option.deviceRelays)
+            relayList.push({ radarId: option.radarId, relay: option.deviceRelays })
           }
         })
       }
     }
     const changeTransparency = (e, type, data) => {
-      const option = {
-        0: [0.8, 33, 1],
-        50: [0.5, 66, 2],
-        100: [0.2, 100, 3]
-      }
       // materialOne.opacity = option[e][0]
       if (type === '单灯') {
-        updateTunnelLamp({
-          id: lampData.ID,
+        transparency.value = e
+      } else {
+        deviceSwitch({
           tunnelSn: lampData.tunnelSn,
-          lampValue2: option[e][1]
+          radarId: relayList[0].radarId,
+          relayId: data.relayId,
+          state: e
         }).then(res => {
           if (res.code === 0) {
-            ElMessage.success('已发送')
+            console.log('发送成功')
           }
         })
+      }
+    }
+    const changeTransparencyTwo = (e, type, data) => {
+      // materialOne.opacity = option[e][0]
+      if (type === '单灯') {
+        transparencyTwo.value = e
       } else {
-        console.log(relayList[0])
-        console.log(lampData, data.relayId, e)
-        // deviceSwitch({
-        //   tunnelSn: lampData.tunnelSn,
-        //   radarId: relayList[0].radarId,
-        //   relayId: data.relayId,
-        //   state: e
-        // }).then(res => {
-        //   if (res.code === 0) {
-        //     console.log('发送成功')
-        //   }
-        // })
+        deviceSwitch({
+          tunnelSn: lampData.tunnelSn,
+          radarId: relayList[1].radarId,
+          relayId: data.relayId,
+          state: e
+        }).then(res => {
+          if (res.code === 0) {
+            console.log('发送成功')
+          }
+        })
       }
     }
-    const changeTransparencyTwo = () => {}
+    const singleLamp = () => {
+      const option = {
+        0: [0.8, 33, 1],
+        50: [0.5, 66, 2],
+        100: [0.2, 100, 3]
+      }
+      const lamp1 = option[transparency.value][1]
+      const lamp2 = option[transparencyTwo.value][1]
+      console.log(lamp1, lamp2)
+      updateTunnelLamp({
+        id: lampData.ID,
+        tunnelSn: lampData.tunnelSn,
+        lampValue1: lamp1,
+        lampValue2: lamp2
+      }).then(res => {
+        if (res.code === 0) {
+          ElMessage.success('已发送')
+        }
+      })
+    }
     return {
       center,
       zoom,
@@ -259,7 +294,8 @@ export default defineComponent({
       brightness,
       changeTransparency,
       changeTransparencyTwo,
-      relayList
+      relayList,
+      singleLamp
     }
   },
 })

web/src/view/screen/dataDashboard.vue

@@ -20,18 +20,23 @@
           </div>
           <div class="deviceOptionBox">
             <div
-              v-for="item in deviceList"
+              v-for="item in deviceTypeList"
+              :key="item.id"
               class="deviceOption"
             >
-              <img
-                :src="item.url"
-                style="width: 35px;height: 35px"
-                alt=""
-              >
-              <el-text
-                style="padding-top: 8px;color: #ffffff"
-                size="small"
-              >{{ item.label + item.value }}</el-text>
+              <div class="deviceOption">
+                <div style="width: 35px;height: 35px">
+                  <img
+                      :src="item.url"
+                      style="width: 35px;height: 35px"
+                      alt=""
+                  >
+                </div>
+                <el-text
+                    style="padding-top: 8px;color: #ffffff"
+                    size="small"
+                >{{ item.label + item.value }}</el-text>
+              </div>
             </div>
           </div>
         </div>
@@ -57,7 +62,7 @@
         </div>
       </div>
       <div class="centerBox">
-        <div style="width: 1200px;height: 600px">
+        <div style="width: 1200px;height: 600px;border: 3px solid #1b92fd; padding: 2px">
           <Map />
         </div>
         <div class="centerBox_chart">
@@ -100,11 +105,11 @@
 
 <script setup>
 import Device from '@/assets/icons/device.png'
-import { reactive, onMounted } from 'vue'
-import environments from '@/assets/icons/environment.png'
-import fourWays from '@/assets/icons/fourWays.png'
-import inductance from '@/assets/icons/inductance.png'
-import singleLamp from '@/assets/icons/singleLamp.png'
+import { reactive, onMounted, watch } from 'vue'
+// import environments from '@/assets/icons/environment.png'
+// import fourWays from '@/assets/icons/fourWays.png'
+// import inductance from '@/assets/icons/inductance.png'
+// import singleLamp from '@/assets/icons/singleLamp.png'
 import Setting from '@/assets/icons/setting.png'
 import Sunlight from '@/assets/icons/sunlight.png'
 import topBg from '@/assets/icons/topbg.png'
@@ -114,15 +119,18 @@ import Map from '@/view/screen/components/map.vue'
 import * as echarts from 'echarts'
 import { useScreenStore } from '@/pinia/modules/screen'
 import { queryTunnelList } from '@/api/tunnel'
+import { queryAllDevices, queryAllDeviceGenres } from '@/api/device'
 
 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 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 = {
   pageInfo: {
@@ -144,6 +152,19 @@ onMounted(() => {
       loadingLamp(lampData.envData)
     }
   })
+  queryAllDevices().then(res => {
+    console.log('res', res)
+  })
+  queryAllDeviceGenres().then(res => {
+    if (res.code === 0) {
+      const result = []
+      for (let i = 0; i < res.data.length; i += 4) {
+        result.push(res.data.slice(i, i + 4))
+      }
+      deviceTypeList.push(...result)
+      console.log('设备类型', deviceTypeList)
+    }
+  })
 })
 
 const loading = (list) => {
@@ -281,6 +302,12 @@ const loadingLamp = (list) => {
 
   option && myChart.setOption(option)
 }
+
+watch(() => useScreen.currentTunnel, (newValue) => {
+  loading(newValue.envData)
+  loadingLamp(newValue.envData)
+})
+
 </script>
 
 <style scoped lang="less">
@@ -345,7 +372,7 @@ const loadingLamp = (list) => {
       }
       .deviceOptionBox {
         width: 370px;
-        height: 60px;
+        height: 120px;
         display: flex;
         margin-top: 20px;
         .deviceOption {