数据

web/src/router/index.js

@@ -21,7 +21,7 @@ const routes = [{
   meta: {
     closeTab: true,
   },
-  component: () => import('@/view/admin/dataDashboard/dataDashboard.vue')
+  component: () => import('@/view/screen/dataDashboard.vue')
 },
 {
   path: '/dataScreen',

web/src/view/layout/index.vue

@@ -262,7 +262,7 @@ const handleCommand = () => {
 }
 
 const jumpScreen = () => {
-  router.push('/dataScreen')
+  router.push('/dataDashboard')
 }
 
 onMounted(() => {

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

@@ -20,24 +20,73 @@
   </tlbs-map>
   <el-dialog
     v-model="dialogVisible"
-    width="250px"
+    width="350px"
     title="隧道信息"
     align-center
   >
-    <el-form>
+    <el-form
+      size="large"
+      label-width="70px"
+      label-position="left"
+      label-suffix=""
+    >
       <el-form-item label="名称：">
         <el-text size="large">{{ dialogData.name }}</el-text>
       </el-form-item>
       <el-form-item label="类型：">
         <el-text size="large">{{ dialogData.switchType }}</el-text>
       </el-form-item>
-      <el-form-item>
+      <el-form-item label="灯控1：">
+        <el-slider
+          v-if="dialogData.switchType === '单灯控制器'"
+          v-model="transparency"
+          :step="50"
+          show-stops
+          :show-tooltip="false"
+          @change="changeTransparency($event,'单灯','')"
+        />
+        <div
+          v-if="dialogData.switchType === '四路控制器'"
+          style="width: 100%;display: flex; justify-content: space-between"
+        >
+          <el-switch
+            v-for="item in relayList[0]"
+            :key="item.id"
+            v-model="item.state"
+            @change="changeTransparency($event,'四路',item)"
+          />
+        </div>
+      </el-form-item>
+      <el-form-item label="灯控2：">
+        <el-slider
+          v-if="dialogData.switchType === '单灯控制器'"
+          v-model="transparencyTwo"
+          :step="50"
+          show-stops
+          :show-tooltip="false"
+          @change="changeTransparencyTwo($event,'单灯','')"
+        />
+        <div
+          v-if="dialogData.switchType === '四路控制器'"
+          style="width: 100%;display: flex; justify-content: space-between"
+        >
+          <el-switch
+            v-for="item in relayList[1]"
+            :key="item.id"
+            v-model="item.state"
+            @change="changeTransparencyTwo($event,'四路',item)"
+          />
+        </div>
+      </el-form-item>
+      <el-form-item label-width="0">
         <div style="width: 100%; display: flex; justify-content: space-between">
           <el-button
             type="primary"
             @click="callParentMethod"
           >查看数据</el-button>
-          <!--          <el-button type="primary" @click="viewModel">查看模型</el-button>-->
+          <el-button
+            type="primary"
+          >查看模型</el-button>
         </div>
       </el-form-item>
     </el-form>
@@ -45,8 +94,11 @@
 </template>
 
 <script>
-import { defineComponent, ref } from 'vue-demi'
+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";
 const useScreen = useScreenStore()
 export default defineComponent({
   name: 'MarkerDemo',
@@ -63,16 +115,16 @@ export default defineComponent({
     })
     const onClick = (e) => {
       console.log(e.latLng)
-      geometries.value = [
-        {
-          styleId: 'marker',
-          position: { lat: 28.7052848, lng: 113.5759597 },
-        },
-        {
-          styleId: 'marker',
-          position: { lat: e.latLng.lat, lng: e.latLng.lng },
-        },
-      ]
+      // geometries.value = [
+      //   {
+      //     styleId: 'marker',
+      //     position: { lat: 28.7052848, lng: 113.5759597 },
+      //   },
+      //   {
+      //     styleId: 'marker',
+      //     position: { lat: e.latLng.lat, lng: e.latLng.lng },
+      //   },
+      // ]
     }
 
     const onMapInited = () => {
@@ -92,6 +144,7 @@ export default defineComponent({
       list.forEach(item => {
         if (item.ID === id) {
           dialogData.value = item
+          brightness(item)
         }
       })
     }
@@ -103,6 +156,70 @@ export default defineComponent({
     //   useScreen.setScreenType('pattern')
     //   dialogVisible.value = false
     // }
+    // 亮度调节
+    const transparency = ref(0)
+    const transparencyTwo = ref(0)
+    const materialOne = reactive({})
+    const materialTwo = reactive({})
+    const relayList = reactive([])
+    const lampData = reactive({})
+    const brightness = (item) => {
+      Object.assign(lampData, item)
+      if (item.switchType === '单灯控制器') {
+        const val1 = item.lampValue1
+        const val2 = item.lampValue2
+        const judge = {
+          0: [0.8, 0],
+          33: [0.8, 0],
+          66: [0.5, 50],
+          100: [0.2, 100],
+        }
+        transparency.value = judge[val1][1]
+        transparencyTwo.value = judge[val2][1]
+        materialOne.opacity = judge[val1][0]
+        materialTwo.opacity = judge[val2][0]
+      } else if (item.switchType === '四路控制器') {
+        relayList.length = 0
+        item.devices.forEach(option => {
+          if (option.genre === 6) {
+            relayList.push(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,
+          tunnelSn: lampData.tunnelSn,
+          lampValue2: option[e][1]
+        }).then(res => {
+          if (res.code === 0) {
+            ElMessage.success('已发送')
+          }
+        })
+      } 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('发送成功')
+        //   }
+        // })
+      }
+    }
+    const changeTransparencyTwo = () => {}
     return {
       center,
       zoom,
@@ -133,8 +250,16 @@ export default defineComponent({
       dialogVisible,
       dialogData,
       callParentMethod,
-      mapOption
-      // viewModel
+      mapOption,
+      // 亮度调节
+      transparency,
+      transparencyTwo,
+      materialOne,
+      materialTwo,
+      brightness,
+      changeTransparency,
+      changeTransparencyTwo,
+      relayList
     }
   },
 })
@@ -143,7 +268,7 @@ export default defineComponent({
 <style scoped lang="less">
 .mapBox{
   width: 1200px;
-  height: 700px;
+  height: 600px;
 }
 
 .infoDialog{

web/src/view/admin/dataDashboard/dataDashboard.vue

@@ -2,9 +2,8 @@
   <div style="background-color: #0e122d">
     <div class="screenTitle">
       <img
-        :src="Logo"
+        :src="topBg"
         alt=""
-        style="width: 60px;height: 60px;"
       >
       <span>龙弛智慧隧道系统</span>
     </div>
@@ -58,7 +57,7 @@
         </div>
       </div>
       <div class="centerBox">
-        <div style="width: 1150px;height: 600px">
+        <div style="width: 1200px;height: 600px">
           <Map />
         </div>
         <div class="centerBox_chart">
@@ -108,13 +107,13 @@ 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 Title from '@/assets/icons/title.png'
-import Logo from '@/assets/icons/logo.png'
+import topBg from '@/assets/icons/topbg.png'
 import Power from '@/assets/icons/power.png'
 import Warn from '@/assets/icons/warn.png'
 import Map from '@/view/screen/components/map.vue'
 import * as echarts from 'echarts'
 import { useScreenStore } from '@/pinia/modules/screen'
+import { queryTunnelList } from '@/api/tunnel'
 
 const useScreen = useScreenStore()
 
@@ -125,12 +124,26 @@ const deviceList = reactive([
   { url: singleLamp, label: '单灯：', value: '1/0' },
 ])
 
+const condition = {
+  pageInfo: {
+    page: 1,
+    pageSize: 1000
+  },
+  name: '',
+  regionId: 0,
+  userId: 1
+}
+
+const lampData = reactive({})
 onMounted(() => {
-  setTimeout(function() {
-    console.log('envData', useScreen.controllerData)
-    loading(useScreen.controllerData.envData)
-    loadingLamp(useScreen.controllerData.envData)
-  }, 1000)
+  queryTunnelList(condition).then(res => {
+    if (res.code === 0) {
+      useScreen.setTunnelList(res.data)
+      Object.assign(lampData, res.data.list[0])
+      loading(lampData.envData)
+      loadingLamp(lampData.envData)
+    }
+  })
 })
 
 const loading = (list) => {
@@ -268,7 +281,6 @@ const loadingLamp = (list) => {
 
   option && myChart.setOption(option)
 }
-
 </script>
 
 <style scoped lang="less">
@@ -293,14 +305,21 @@ const loadingLamp = (list) => {
   display: flex;
   justify-content: center;
   align-items: center;
-  background: linear-gradient(to bottom, #2583e0, #80aad8); /*设置渐变的方向从左到右 颜色从ff0000到ffff00*/
-  -webkit-background-clip: text;/*将设置的背景颜色限制在文字中*/
-  -webkit-text-fill-color: transparent;/*给文字设置成透明*/
+  //background: linear-gradient(to bottom, #2583e0, #80aad8); /*设置渐变的方向从左到右 颜色从ff0000到ffff00*/
+  //-webkit-background-clip: text;/*将设置的背景颜色限制在文字中*/
+  //-webkit-text-fill-color: transparent;/*给文字设置成透明*/
+  position: relative;
   span{
-    font-size: 50px;
-    color: #409eff;
+    position: absolute;
+    top: 30px;
+    left: 890px;
+    font-size: 30px;
+    color: #ffffff;
     padding-left: 20px;
-    letter-spacing: 20px;
+    letter-spacing: 10px;
+  }
+  img{
+    height: 80px;
   }
 }
 .screen{
@@ -308,6 +327,7 @@ const loadingLamp = (list) => {
   height: 1200px;
   background-color: #0e122d;
   display: flex;
+  margin-top: 20px;
   .leftBox {
     width: 20%;
     height: 1200px;