数据

web/src/router/index.js

@@ -16,20 +16,20 @@ const routes = [{
   },
   component: () => import('@/view/error/index.vue')
 },
-  {
-    path: '/dataDashboard',
-    meta: {
-      closeTab: true,
-    },
-    component: () => import('@/view/admin/dataDashboard/dataDashboard.vue')
+{
+  path: '/dataDashboard',
+  meta: {
+    closeTab: true,
+  },
+  component: () => import('@/view/admin/dataDashboard/dataDashboard.vue')
+},
+{
+  path: '/dataScreen',
+  meta: {
+    closeTab: true
   },
-  {
-    path: '/dataScreen',
-    meta: {
-      closeTab: true
-    },
-    component:() => import('@/view/screen/dataScreen.vue')
-  }
+  component: () => import('@/view/screen/dataScreen.vue')
+}
 ]
 
 const router = createRouter({

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

@@ -1,104 +1,142 @@
 <template>
-  <div class="screenTitle">
-    <img :src="Logo" alt="" style="width: 60px;height: 60px">
-    <img :src="Title" alt="" style="padding-left: 20px">
-  </div>
-  <div class="screen">
-    <div class="leftBox">
-      <div class="deviceSummary">
-        <div class="deviceSummary_title">
-          <img alt="" :src="Device" style="padding-left: 15px"/>
-          <span style="padding-left: 10px;">设备汇总</span>
-        </div>
-        <div class="deviceOptionBox">
-          <div class="deviceOption" v-for="item in deviceList">
-            <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 style="background-color: #0e122d">
+    <div class="screenTitle">
+      <img
+        :src="Logo"
+        alt=""
+        style="width: 60px;height: 60px;"
+      >
+      <span>龙弛智慧隧道系统</span>
+    </div>
+    <div class="screen">
+      <div class="leftBox">
+        <div class="deviceSummary">
+          <div class="deviceSummary_title">
+            <img
+              alt=""
+              :src="Device"
+              style="padding-left: 15px"
+            >
+            <span style="padding-left: 10px;">设备汇总</span>
+          </div>
+          <div class="deviceOptionBox">
+            <div
+              v-for="item in deviceList"
+              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>
           </div>
         </div>
-      </div>
-      <div class="inductance">
-        <div class="inductanceTitle">
-          <img alt="" :src="Power" style="padding-left: 15px"/>
-          <span style="padding-left: 10px;">电感检测</span>
+        <div class="inductance">
+          <div class="inductanceTitle">
+            <img
+              alt=""
+              :src="Power"
+              style="padding-left: 15px"
+            >
+            <span style="padding-left: 10px;">电感检测</span>
+          </div>
         </div>
-      </div>
-      <div class="warn">
-        <div class="warnTitle">
-          <img alt="" :src="Warn" style="padding-left: 15px">
-          <span style="padding-left: 10px;">警告列表</span>
+        <div class="warn">
+          <div class="warnTitle">
+            <img
+              alt=""
+              :src="Warn"
+              style="padding-left: 15px"
+            >
+            <span style="padding-left: 10px;">警告列表</span>
+          </div>
         </div>
       </div>
-    </div>
-    <div class="centerBox">
-      <div style="width: 1150px;height: 700px">
-        <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 class="centerBox_environment_chart" style="width: 500px" id="environment">
-          </div>
+      <div class="centerBox">
+        <div style="width: 1150px;height: 600px">
+          <Map />
         </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 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_chart" id="lamp" style="width: 500px">
+          <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>
-    <div class="rightBox">
-
+      <div class="rightBox" />
     </div>
   </div>
 </template>
 
 <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 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 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 { 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 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 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'
 
 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'},
+  { url: environments, label: '环境：', value: '1/0' },
+  { url: fourWays, label: '四路：', value: '1/0' },
+  { url: inductance, label: '电感：', value: '1/0' },
+  { url: singleLamp, label: '单灯：', value: '1/0' },
 ])
 
 onMounted(() => {
-  setTimeout(function (){
-    console.log('envData',useScreen.controllerData)
+  setTimeout(function() {
+    console.log('envData', useScreen.controllerData)
     loading(useScreen.controllerData.envData)
     loadingLamp(useScreen.controllerData.envData)
   }, 1000)
 })
 
-const loading = ((list) => {
-  let chartDom = document.getElementById('environment');
-  let myChart = echarts.init(chartDom);
-  let option;
-
-  option = {
+const loading = (list) => {
+  const chartDom = document.getElementById('environment')
+  const myChart = echarts.init(chartDom)
+  const option = {
     tooltip: {
       trigger: 'axis',
       axisPointer: {
@@ -114,13 +152,13 @@ const loading = ((list) => {
         {
           name: '温度',
           textStyle: {
-            color: '#0EFCFF'          // 图例文字颜色
+            color: '#0EFCFF' // 图例文字颜色
           }
         },
         {
           name: '湿度',
           textStyle: {
-            color: '#1b92fd'          // 图例文字颜色
+            color: '#1b92fd' // 图例文字颜色
           }
         }
       ],
@@ -129,21 +167,21 @@ const loading = ((list) => {
       type: 'time', // 使用时间类型的x轴
       boundaryGap: false,
       axisLine: {
-        show:true,
-        lineStyle:{
-          color:'#ffffff',
-          width:1,
-          type:'solid'
+        show: true,
+        lineStyle: {
+          color: '#ffffff',
+          width: 1,
+          type: 'solid'
         }
       }
     },
     yAxis: {
       axisLine: {
-        show:true,
-        lineStyle:{
-          color:'#ffffff',
-          width:1,
-          type:'solid'
+        show: true,
+        lineStyle: {
+          color: '#ffffff',
+          width: 1,
+          type: 'solid'
         }
       },
       splitLine: {
@@ -164,17 +202,15 @@ const loading = ((list) => {
         data: list.map(item => [new Date(item.CreatedAt).getTime(), item.humidity])
       }
     ],
-  };
-
-  option && myChart.setOption(option);
-})
+  }
 
-const loadingLamp = ((list) => {
-  let chartDom = document.getElementById('lamp');
-  let myChart = echarts.init(chartDom);
-  let option;
+  option && myChart.setOption(option)
+}
 
-  option = {
+const loadingLamp = (list) => {
+  const chartDom = document.getElementById('lamp')
+  const myChart = echarts.init(chartDom)
+  const option = {
     tooltip: {
       trigger: 'axis',
       axisPointer: {
@@ -189,7 +225,7 @@ const loadingLamp = ((list) => {
         {
           name: '光照度',
           textStyle: {
-            color: '#ffffff'          // 图例文字颜色
+            color: '#ffffff' // 图例文字颜色
           }
         },
       ]
@@ -198,21 +234,21 @@ const loadingLamp = ((list) => {
       type: 'time', // 使用时间类型的x轴
       boundaryGap: false,
       axisLine: {
-        show:true,
-        lineStyle:{
-          color:'#ffffff',
-          width:1,
-          type:'solid'
+        show: true,
+        lineStyle: {
+          color: '#ffffff',
+          width: 1,
+          type: 'solid'
         }
       }
     },
     yAxis: {
       axisLine: {
-        show:true,
-        lineStyle:{
-          color:'#ffffff',
-          width:1,
-          type:'solid'
+        show: true,
+        lineStyle: {
+          color: '#ffffff',
+          width: 1,
+          type: 'solid'
         }
       },
       splitLine: {
@@ -228,10 +264,10 @@ const loadingLamp = ((list) => {
         data: list.map(item => [new Date(item.CreatedAt).getTime(), item.illuminance])
       },
     ]
-  };
+  }
 
-  option && myChart.setOption(option);
-})
+  option && myChart.setOption(option)
+}
 
 </script>
 
@@ -253,20 +289,28 @@ const loadingLamp = ((list) => {
 //.....................
 .screenTitle{
   width: 100%;
-  height: 130px;
-  background-color: #0e122d;
+  height: 100px;
   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;/*给文字设置成透明*/
+  span{
+    font-size: 50px;
+    color: #409eff;
+    padding-left: 20px;
+    letter-spacing: 20px;
+  }
 }
 .screen{
   width: 100%;
-  height: 1100px;
+  height: 1200px;
   background-color: #0e122d;
   display: flex;
   .leftBox {
     width: 20%;
-    height: 1000px;
+    height: 1200px;
     .deviceSummary {
       height: 150px;
       .boxShape;
@@ -309,7 +353,7 @@ const loadingLamp = ((list) => {
       }
     }
     .warn {
-      height: 400px;
+      height: 470px;
       margin-top: 20px;
       .boxShape;
       .warnTitle {
@@ -325,13 +369,13 @@ const loadingLamp = ((list) => {
   }
   .centerBox {
     width: 60%;
-    height: 1000px;
+    height: 1200px;
     display: flex;
     flex-direction: column;
     align-items: center;
     .centerBox_chart {
-      width: 1150px;
-      height: 250px;
+      width: 1200px;
+      height: 220px;
       margin-top: 40px;
       display: flex;
       justify-content: space-between;
@@ -340,7 +384,7 @@ const loadingLamp = ((list) => {
     }
     .centerBox_environment{
       width: 500px;
-      height: 250px;
+      height: 220px;
       position: relative;
       .centerBox_environment_title {
         width: 500px;
@@ -360,7 +404,7 @@ const loadingLamp = ((list) => {
   }
   .rightBox {
     width: 20%;
-    height: 1000px;
+    height: 1200px;
   }
 }
 </style>

web/src/view/layout/index.vue

@@ -82,7 +82,12 @@
                           :key="item.path"
                         >{{ fmtTitle(item.meta.title,route) }}</el-breadcrumb-item>
                       </el-breadcrumb>
-                      <el-button :icon="Menu" text style="margin-left: 20px" @click="jumpScreen">数据大屏</el-button>
+                      <el-button
+                        :icon="Menu"
+                        text
+                        style="margin-left: 20px"
+                        @click="jumpScreen"
+                      >数据大屏</el-button>
                     </el-col>
                     <el-col
                       :xs="12"
@@ -201,7 +206,7 @@ import { useRouter, useRoute } from 'vue-router'
 import { useRouterStore } from '@/pinia/modules/router'
 import { fmtTitle } from '@/utils/fmtRouterTitle'
 import { useUserStore } from '@/pinia/modules/user'
-import { Menu } from "@element-plus/icons-vue";
+import { Menu } from '@element-plus/icons-vue'
 
 defineOptions({
   name: 'Layout',

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

@@ -1,25 +1,32 @@
 <template>
-  <img src="@/assets/main_top_left.png" alt="" class="imgStyle"/>
-  <div class="titleIcon"></div>
+  <img
+    src="@/assets/main_top_left.png"
+    alt=""
+    class="imgStyle"
+  >
+  <div class="titleIcon" />
   <div class="chartBox_title">温度/湿度</div>
-  <div id="environment" class="environment"></div>
+  <div
+    id="environment"
+    class="environment"
+  />
 </template>
 
 <script setup>
-import * as echarts from 'echarts';
+import * as echarts from 'echarts'
 import { onMounted, watch } from 'vue'
-import { useScreenStore } from "@/pinia/modules/screen";
+import { useScreenStore } from '@/pinia/modules/screen'
 const useScreen = useScreenStore()
 
 onMounted(() => {
-  setTimeout(function (){
-    const list  = useScreen.tunnelList[0].envData
+  setTimeout(function() {
+    const list = useScreen.tunnelList[0].envData
     chartLoading(list)
   }, 1000)
 })
 
 const chartLoading = (list) => {
-  let myChart = echarts.init(document.getElementById('environment'));
+  const myChart = echarts.init(document.getElementById('environment'))
   myChart.setOption({
     tooltip: {
       trigger: 'axis',
@@ -36,13 +43,13 @@ const chartLoading = (list) => {
         {
           name: '温度',
           textStyle: {
-            color: '#0EFCFF'          // 图例文字颜色
+            color: '#0EFCFF' // 图例文字颜色
           }
         },
         {
           name: '湿度',
           textStyle: {
-            color: '#0EFCFF'          // 图例文字颜色
+            color: '#0EFCFF' // 图例文字颜色
           }
         }
       ],
@@ -51,21 +58,21 @@ const chartLoading = (list) => {
       type: 'time', // 使用时间类型的x轴
       boundaryGap: false,
       axisLine: {
-        show:true,
-        lineStyle:{
-          color:'#0EFCFF',
-          width:1,
-          type:'solid'
+        show: true,
+        lineStyle: {
+          color: '#0EFCFF',
+          width: 1,
+          type: 'solid'
         }
       }
     },
     yAxis: {
       axisLine: {
-        show:true,
-        lineStyle:{
-          color:'#0EFCFF',
-          width:1,
-          type:'solid'
+        show: true,
+        lineStyle: {
+          color: '#0EFCFF',
+          width: 1,
+          type: 'solid'
         }
       },
       splitLine: {
@@ -129,5 +136,4 @@ const yourMethod = (value) => {
     top: 20px;
   }
 
-
 </style>

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

@@ -1,26 +1,33 @@
 <template>
-  <img src="@/assets/main_top_left.png" alt="" class="imgStyle"/>
-  <div class="titleIcon"></div>
+  <img
+    src="@/assets/main_top_left.png"
+    alt=""
+    class="imgStyle"
+  >
+  <div class="titleIcon" />
   <div class="chartBox_title">光照度</div>
-  <div id="light" class="environment"></div>
+  <div
+    id="light"
+    class="environment"
+  />
 </template>
 
 <script setup>
-import * as echarts from 'echarts';
+import * as echarts from 'echarts'
 import { onMounted, watch } from 'vue'
-import { useScreenStore } from "@/pinia/modules/screen";
+import { useScreenStore } from '@/pinia/modules/screen'
 const useScreen = useScreenStore()
 
 onMounted(() => {
-  setTimeout(function (){
-    const list  = useScreen.tunnelList[0].envData
+  setTimeout(function() {
+    const list = useScreen.tunnelList[0].envData
     chartLoading(list)
-  },1000)
+  }, 1000)
 })
 
 const chartLoading = (val) => {
-  //time: moment(item.CreatedAt).format('HH:mm')
-  let myChart = echarts.init(document.getElementById('light'));
+  // time: moment(item.CreatedAt).format('HH:mm')
+  const myChart = echarts.init(document.getElementById('light'))
   myChart.setOption({
     tooltip: {
       trigger: 'axis',
@@ -36,7 +43,7 @@ const chartLoading = (val) => {
         {
           name: '光照度',
           textStyle: {
-            color: '#0EFCFF'          // 图例文字颜色
+            color: '#0EFCFF' // 图例文字颜色
           }
         },
       ]
@@ -45,21 +52,21 @@ const chartLoading = (val) => {
       type: 'time', // 使用时间类型的x轴
       boundaryGap: false,
       axisLine: {
-        show:true,
-        lineStyle:{
-          color:'#0EFCFF',
-          width:1,
-          type:'solid'
+        show: true,
+        lineStyle: {
+          color: '#0EFCFF',
+          width: 1,
+          type: 'solid'
         }
       }
     },
     yAxis: {
       axisLine: {
-        show:true,
-        lineStyle:{
-          color:'#0EFCFF',
-          width:1,
-          type:'solid'
+        show: true,
+        lineStyle: {
+          color: '#0EFCFF',
+          width: 1,
+          type: 'solid'
         }
       },
       splitLine: {
@@ -117,5 +124,4 @@ const yourMethod = (value) => {
   top: 20px;
 }
 
-
 </style>

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

@@ -1,35 +1,43 @@
 <template>
   <tlbs-map
-      ref="mapRef"
-      api-key="3SVBZ-6MYYZ-Q75X5-7YN43-BMIBZ-YABND"
-      :center="center"
-      :zoom="zoom"
-      :control="control"
-      class="mapBox"
-      :options="mapOption"
-      @click="onClick"
-      @map_inited="onMapInited"
+    ref="mapRef"
+    api-key="3SVBZ-6MYYZ-Q75X5-7YN43-BMIBZ-YABND"
+    :center="center"
+    :zoom="zoom"
+    :control="control"
+    class="mapBox"
+    :options="mapOption"
+    @click="onClick"
+    @map_inited="onMapInited"
   >
     <tlbs-multi-marker
-        ref="markerRef"
-        :geometries="geometries"
-        :styles="styles"
-        :options="options"
-        @click="openInfo"
+      ref="markerRef"
+      :geometries="geometries"
+      :styles="styles"
+      :options="options"
+      @click="openInfo"
     />
   </tlbs-map>
-  <el-dialog v-model="dialogVisible" width="250px" title="隧道信息" align-center>
+  <el-dialog
+    v-model="dialogVisible"
+    width="250px"
+    title="隧道信息"
+    align-center
+  >
     <el-form>
       <el-form-item label="名称：">
-        <el-text size="large">{{dialogData.name}}</el-text>
+        <el-text size="large">{{ dialogData.name }}</el-text>
       </el-form-item>
       <el-form-item label="类型：">
-        <el-text size="large">{{dialogData.switchType}}</el-text>
+        <el-text size="large">{{ dialogData.switchType }}</el-text>
       </el-form-item>
       <el-form-item>
         <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"
+            @click="callParentMethod"
+          >查看数据</el-button>
+          <!--          <el-button type="primary" @click="viewModel">查看模型</el-button>-->
         </div>
       </el-form-item>
     </el-form>
@@ -37,46 +45,46 @@
 </template>
 
 <script>
-import { defineComponent, ref } from 'vue-demi';
-import { useScreenStore } from "@/pinia/modules/screen";
+import { defineComponent, ref } from 'vue-demi'
+import { useScreenStore } from '@/pinia/modules/screen'
 const useScreen = useScreenStore()
 export default defineComponent({
   name: 'MarkerDemo',
   setup() {
-    const mapRef = ref(null);
-    const markerRef = ref(null);
-    const center = ref({ lat: 28.7052848, lng: 113.5759597 });
-    const zoom = ref(10);
+    const mapRef = ref(null)
+    const markerRef = ref(null)
+    const center = ref({ lat: 28.7052848, lng: 113.5759597 })
+    const zoom = ref(10)
     const geometries = ref(useScreen.placeList)
     const dialogVisible = ref(false)
     const dialogData = ref({})
     const mapOption = ref({
-      mapStyleId:'style1'
+      mapStyleId: 'style1'
     })
     const onClick = (e) => {
-      console.log(e.latLng);
+      console.log(e.latLng)
       geometries.value = [
         {
           styleId: 'marker',
-          position: { lat: 28.7052848, lng: 113.5759597 } ,
+          position: { lat: 28.7052848, lng: 113.5759597 },
         },
         {
           styleId: 'marker',
-          position: { lat: e.latLng.lat, lng: e.latLng.lng } ,
+          position: { lat: e.latLng.lat, lng: e.latLng.lng },
         },
       ]
-    };
+    }
 
     const onMapInited = () => {
       // 地图加载完成后，可以获取地图实例、点标记实例，调用地图实例、点标记实例方法
-      console.log(mapRef.value.map);
-      console.log(markerRef.value.marker);
-    };
+      console.log(mapRef.value.map)
+      console.log(markerRef.value.marker)
+    }
 
     const getLayerInstance = () => {
       // 可以获取点标记实例，调用点标记实例方法
-      console.log(markerRef.value.marker);
-    };
+      console.log(markerRef.value.marker)
+    }
     const openInfo = (e) => {
       dialogVisible.value = true
       const id = e.geometry.styleId
@@ -127,14 +135,14 @@ export default defineComponent({
       callParentMethod,
       mapOption
       // viewModel
-    };
+    }
   },
-});
+})
 </script>
 
 <style scoped lang="less">
 .mapBox{
-  width: 1150px;
+  width: 1200px;
   height: 700px;
 }
 

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

@@ -1,62 +1,66 @@
 <template>
-  <div ref="container" class="three-container"></div>
+  <div
+    ref="container"
+    class="three-container"
+  />
 </template>
 
 <script setup>
-import * as THREE from 'three';
-import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
-import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
-import { onMounted, onUnmounted, reactive, ref } from 'vue';
+import * as THREE from 'three'
+import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'
+import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
+import { onMounted, onUnmounted, reactive, ref } from 'vue'
 import { useScreenStore } from '@/pinia/modules/screen'
 
 const useScreen = useScreenStore()
 // 获取容器引用
-const container = ref(null);
+const container = ref(null)
 
 // 定义 Three.js 相关变量
-let scene, camera, renderer, controls;
+let scene, camera, renderer, controls
 
 // 创建场景
-scene = new THREE.Scene();
+// eslint-disable-next-line prefer-const
+scene = new THREE.Scene()
 
 // 添加环境光
-const ambientLight = new THREE.AmbientLight(0xffffff, 1);
+const ambientLight = new THREE.AmbientLight(0xffffff, 1)
 
 // 初始化 Three.js 场景
 const initThree = () => {
-  scene.background = null;
+  scene.background = null
   // textureLoader.load('@/assets/OIP-C.jpg', (texture) => {
   //   // 将图片设置为场景的背景
   //   scene.background = texture;
   // });
   // 创建相机
   camera = new THREE.PerspectiveCamera(
-      75,
-      container.value.clientWidth / container.value.clientHeight,
-      0.1,
-      1000
-  );
-  camera.position.set(30, 20, 30);
+    75,
+    container.value.clientWidth / container.value.clientHeight,
+    0.1,
+    1000
+  )
+  camera.position.set(30, 20, 30)
 
   // 创建渲染器
-  renderer = new THREE.WebGLRenderer({ antialias: true });
-  renderer.setSize(container.value.clientWidth, container.value.clientHeight);
-  renderer.setClearAlpha(0);
+  renderer = new THREE.WebGLRenderer({ antialias: true })
+  renderer.setSize(container.value.clientWidth, container.value.clientHeight)
+  renderer.setClearAlpha(0)
   // renderer.setClearColor(222842);
-  container.value.appendChild(renderer.domElement);
+  container.value.appendChild(renderer.domElement)
 
   // 添加轨道控制器
-  controls = new OrbitControls(camera, renderer.domElement);
-  controls.enableDamping = true; // 启用阻尼效果
-  controls.dampingFactor = 0.05;
+  controls = new OrbitControls(camera, renderer.domElement)
+  controls.enableDamping = true // 启用阻尼效果
+  controls.dampingFactor = 0.05
 
-  scene.add(ambientLight);
+  scene.add(ambientLight)
 
   // 添加平行光
-  const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
-  directionalLight.position.set(5, 5, 5).normalize();
-  scene.add(directionalLight);
-};
+  const directionalLight = new THREE.DirectionalLight(0xffffff, 1)
+  directionalLight.position.set(5, 5, 5).normalize()
+  scene.add(directionalLight)
+}
 
 // 存储模型数据
 let materialOne = reactive({})
@@ -64,37 +68,36 @@ let materialTwo = reactive({})
 
 const relayList = reactive([])
 
-
 // 加载 GLB 模型
 const loadModel = () => {
-  const loader = new GLTFLoader();
-  loader.load('../../public/隧道1.glb', function (gltf){
-        let object = gltf.scene
-        object.children.forEach(item => {
-          if (item.name === '柱体') {
-            materialOne = item.children[3].material
-          } else if(item.name === '柱体001') {
-            materialTwo = item.children[3].material
-          }
-        })
-        //gltf.scene获取gltf文件包含的模型数据
-        scene.add(gltf.scene)
-      }, function (xhr) {
-        // 加载进度回调
-        // console.log((xhr.loaded / xhr.total * 100) + '% loaded');
-      }, function (error) {
-        // 加载错误回调
-        // console.error('An error happened', error);
+  const loader = new GLTFLoader()
+  loader.load('../../public/隧道1.glb', function(gltf) {
+    const object = gltf.scene
+    object.children.forEach(item => {
+      if (item.name === '柱体') {
+        materialOne = item.children[3].material
+      } else if (item.name === '柱体001') {
+        materialTwo = item.children[3].material
       }
+    })
+    // gltf.scene获取gltf文件包含的模型数据
+    scene.add(gltf.scene)
+  }, function(xhr) {
+    // 加载进度回调
+    // console.log((xhr.loaded / xhr.total * 100) + '% loaded');
+  }, function(error) {
+    // 加载错误回调
+    // console.error('An error happened', error);
+  }
   )
-};
+}
 
 // 动画循环
 const animate = () => {
-  requestAnimationFrame(animate);
-  controls.update(); // 更新控制器
-  renderer.render(scene, camera);
-};
+  requestAnimationFrame(animate)
+  controls.update() // 更新控制器
+  renderer.render(scene, camera)
+}
 
 // 亮度调整
 const transparency = ref(0)
@@ -107,25 +110,25 @@ const lampData = reactive({})
 const judgeLamp = () => {
   relayList.length = 0
   if (lampData.switchType === '单灯控制器') {
-    let val1 = lampData.lampValue1
-    let val2 = lampData.lampValue2
-    let judge = {
-      33: [0.8,0],
-      66: [0.5,50],
-      100: [0.2,100],
+    const val1 = lampData.lampValue1
+    const val2 = lampData.lampValue2
+    const judge = {
+      33: [0.8, 0],
+      66: [0.5, 50],
+      100: [0.2, 100],
     }
     transparency.value = judge[val1][1]
     materialOne.opacity = judge[val1][0]
     transparencyTwo.value = judge[val1][1]
     materialTwo.opacity = judge[val2][0]
-  } else if(lampData.switchType === '四路控制器') {
+  } else if (lampData.switchType === '四路控制器') {
     lampData.devices.forEach(item => {
       if (item.genre === 6) {
         relayList.push(item)
       }
     })
-    let deviceLamp1 = relayList[0].deviceRelays
-    let deviceLamp2 = relayList[1].deviceRelays
+    const deviceLamp1 = relayList[0].deviceRelays
+    const deviceLamp2 = relayList[1].deviceRelays
     let count1 = 0
     let count2 = 0
     deviceLamp1.forEach(item => {
@@ -134,37 +137,36 @@ const judgeLamp = () => {
     deviceLamp2.forEach(item => {
       item.state ? count2++ : count2
     })
-    let judgeWay = {
-      1: [0.8,0],
-      2: [0.5,50],
-      3: [0.2,100],
-      4: [0.2,100]
+    const judgeWay = {
+      1: [0.8, 0],
+      2: [0.5, 50],
+      3: [0.2, 100],
+      4: [0.2, 100]
     }
     transparency.value = judgeWay[count1][1]
     materialOne.opacity = judgeWay[count1][0]
     transparencyTwo.value = judgeWay[count2][1]
     materialTwo.opacity = judgeWay[count2][0]
   }
-
 }
 
 // 组件挂载时初始化
 onMounted(() => {
   Object.assign(lampData, useScreen.controllerData)
-  initThree();
-  loadModel();
-  animate();
-  setTimeout(function () {
+  initThree()
+  loadModel()
+  animate()
+  setTimeout(function() {
     judgeLamp()
-  },500)
-});
+  }, 500)
+})
 
 // 组件卸载时清理资源
 onUnmounted(() => {
   if (renderer) {
-    renderer.dispose();
+    renderer.dispose()
   }
-});
+})
 </script>
 
 <style scoped>

web/src/view/screen/dataScreen.vue

@@ -1,125 +1,172 @@
 <template>
   <div class="screen">
-    <div style="height: 10px"></div>
+    <div style="height: 10px" />
     <div class="titleImage">
       <el-image :src="titleUrl" />
       <span class="Heading">龙弛智慧隧道系统</span>
-      <div class="titleOption" style="left: 19%">
+      <div
+        class="titleOption"
+        style="left: 19%"
+      >
         <span>地图</span>
       </div>
-      <div class="titleOption" style="left: 76%">
+      <div
+        class="titleOption"
+        style="left: 76%"
+      >
         <span>模型</span>
       </div>
     </div>
-    <div style="height: 10px"></div>
+    <div style="height: 10px" />
     <el-row>
-      <el-col :span="5" style="height: 900px;">
+      <el-col
+        :span="5"
+        style="height: 900px;"
+      >
         <div class="deviceBox">
-          <img src="@/assets/main_top_left.png" alt=""/>
-          <div class="titleIcon"></div>
+          <img
+            src="@/assets/main_top_left.png"
+            alt=""
+          >
+          <div class="titleIcon" />
           <div class="deviceBox_title">设备汇总</div>
           <div class="deviceOptionBox">
-            <div class="deviceOption" v-for="item in deviceList">
-              <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
+              v-for="item in deviceList"
+              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>
           </div>
         </div>
         <div class="chartBox">
-          <Chart/>
+          <Chart />
         </div>
         <div class="chartBox">
-          <lightChart/>
+          <lightChart />
         </div>
       </el-col>
-      <el-col :span="14" style="display: flex;justify-content: center">
+      <el-col
+        :span="14"
+        style="display: flex;justify-content: center"
+      >
         <div class="centerBox">
-          <Map v-if="useScreen.screenType === 'map'"/>
-          <div v-if="useScreen.screenType === 'pattern'" style="position: relative">
+          <Map v-if="useScreen.screenType === 'map'" />
+          <div
+            v-if="useScreen.screenType === 'pattern'"
+            style="position: relative"
+          >
             <el-button
-                style="position: absolute;z-index: 1;"
-                type="info"
-                text
-                @click="returnMap"  icon="ArrowLeft">
+              style="position: absolute;z-index: 1;"
+              type="info"
+              text
+              icon="ArrowLeft"
+              @click="returnMap"
+            >
               返回地图
             </el-button>
-            <Pattern style="position: absolute;z-index: 2;pointer-events: none;"/>
+            <Pattern style="position: absolute;z-index: 2;pointer-events: none;" />
           </div>
         </div>
       </el-col>
-      <el-col :span="5" class="rightBox">
-        <div style="height: 20px"></div>
+      <el-col
+        :span="5"
+        class="rightBox"
+      >
+        <div style="height: 20px" />
         <div class="panel">
           <span class="panel-title">亮度调整</span>
           <el-slider
-              v-model="transparency"
-              :step="50"
-              show-stops
-              :show-tooltip="false"
-              class="panel-slider"
-              @change="changeTransparency"
+            v-model="transparency"
+            :step="50"
+            show-stops
+            :show-tooltip="false"
+            class="panel-slider"
+            @change="changeTransparency"
           />
-          <div class="brightness" style="margin: 90px 0 0 50px;">
+          <div
+            class="brightness"
+            style="margin: 90px 0 0 50px;"
+          >
             <span>低</span>
             <span>中</span>
             <span>高</span>
           </div>
           <el-slider
-              v-model="transparencyTwo"
-              :step="50"
-              show-stops
-              :show-tooltip="false"
-              class="panel-slider2"
-              @change="changeTransparencyTwo"
+            v-model="transparencyTwo"
+            :step="50"
+            show-stops
+            :show-tooltip="false"
+            class="panel-slider2"
+            @change="changeTransparencyTwo"
           />
-          <div class="brightness" style="margin: 50px 0 0 50px;">
+          <div
+            class="brightness"
+            style="margin: 50px 0 0 50px;"
+          >
             <span>低</span>
             <span>中</span>
             <span>高</span>
           </div>
-          <div class="panel-bottom"></div>
+          <div class="panel-bottom" />
         </div>
-<!--        <div class="vehicleBox">-->
-<!--          <div class="panel" style="height: 190px">-->
-<!--            <span class="panel-title">车辆检测器</span>-->
-<!--            <el-form style="position: absolute;left: 40px;top: 50px">-->
-<!--              <el-form-item label="交通量" label-width="110" label-position="left">-->
-<!--                <el-row style="width: 200px">-->
-<!--                  <el-col :span="15" class="vehicleData">-->
-<!--                    <span>123</span>-->
-<!--                  </el-col>-->
-<!--                  <el-col :span="9" class="vehicleUnit">-->
-<!--                    <span>辆</span>-->
-<!--                  </el-col>-->
-<!--                </el-row>-->
-<!--              </el-form-item>-->
-<!--              <el-form-item label="平均车速" label-width="110" label-position="left">-->
-<!--                <el-row style="width: 200px">-->
-<!--                  <el-col :span="15" class="vehicleData">-->
-<!--                    <span>66</span>-->
-<!--                  </el-col>-->
-<!--                  <el-col :span="9" class="vehicleUnit">-->
-<!--                    <span>km/h</span>-->
-<!--                  </el-col>-->
-<!--                </el-row>-->
-<!--              </el-form-item>-->
-<!--              <el-form-item label="车道占有量" label-width="110" label-position="left">-->
-<!--                <el-row style="width: 200px">-->
-<!--                  <el-col :span="15" class="vehicleData">-->
-<!--                    <span>12</span>-->
-<!--                  </el-col>-->
-<!--                  <el-col :span="9" class="vehicleUnit">-->
-<!--                    <span>%</span>-->
-<!--                  </el-col>-->
-<!--                </el-row>-->
-<!--              </el-form-item>-->
-<!--            </el-form>-->
-<!--            <div class="panel-bottom"></div>-->
-<!--          </div>-->
-<!--        </div>-->
+        <!--        <div class="vehicleBox">-->
+        <!--          <div class="panel" style="height: 190px">-->
+        <!--            <span class="panel-title">车辆检测器</span>-->
+        <!--            <el-form style="position: absolute;left: 40px;top: 50px">-->
+        <!--              <el-form-item label="交通量" label-width="110" label-position="left">-->
+        <!--                <el-row style="width: 200px">-->
+        <!--                  <el-col :span="15" class="vehicleData">-->
+        <!--                    <span>123</span>-->
+        <!--                  </el-col>-->
+        <!--                  <el-col :span="9" class="vehicleUnit">-->
+        <!--                    <span>辆</span>-->
+        <!--                  </el-col>-->
+        <!--                </el-row>-->
+        <!--              </el-form-item>-->
+        <!--              <el-form-item label="平均车速" label-width="110" label-position="left">-->
+        <!--                <el-row style="width: 200px">-->
+        <!--                  <el-col :span="15" class="vehicleData">-->
+        <!--                    <span>66</span>-->
+        <!--                  </el-col>-->
+        <!--                  <el-col :span="9" class="vehicleUnit">-->
+        <!--                    <span>km/h</span>-->
+        <!--                  </el-col>-->
+        <!--                </el-row>-->
+        <!--              </el-form-item>-->
+        <!--              <el-form-item label="车道占有量" label-width="110" label-position="left">-->
+        <!--                <el-row style="width: 200px">-->
+        <!--                  <el-col :span="15" class="vehicleData">-->
+        <!--                    <span>12</span>-->
+        <!--                  </el-col>-->
+        <!--                  <el-col :span="9" class="vehicleUnit">-->
+        <!--                    <span>%</span>-->
+        <!--                  </el-col>-->
+        <!--                </el-row>-->
+        <!--              </el-form-item>-->
+        <!--            </el-form>-->
+        <!--            <div class="panel-bottom"></div>-->
+        <!--          </div>-->
+        <!--        </div>-->
         <div class="warnBox">
-          <img :src="warn" alt="" class="warnBoxExternal" />
-          <img :src="warnTitle" alt="" class="warnBoxTitle"/>
+          <img
+            :src="warn"
+            alt=""
+            class="warnBoxExternal"
+          >
+          <img
+            :src="warnTitle"
+            alt=""
+            class="warnBoxTitle"
+          >
           <span>警告列表</span>
         </div>
       </el-col>
@@ -130,34 +177,34 @@
 <script setup>
 // 标题图片
 import titleUrl from '@/assets/title_bg.png'
-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 Chart from "./components/chart.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 Chart from './components/chart.vue'
 import warn from '@/assets/main_bottopm_top2.png'
 import Map from './components/map.vue'
 import Pattern from './components/pattern.vue'
 import warnTitle from '@/assets/warnTitle.png'
 import lightChart from './components/lightChart.vue'
 import { queryTunnelList } from '@/api/tunnel'
-import {reactive, onMounted, ref, watch} from 'vue'
+import { reactive, onMounted, ref, watch } from 'vue'
 // 单灯控制
-import { updateTunnelLamp } from "@/api/tunnel";
+import { updateTunnelLamp } from '@/api/tunnel'
 // 四路控制
-import { deviceSwitch } from "@/api/device";
-import {useScreenStore} from "@/pinia/modules/screen";
-import {ElMessage} from "element-plus";
+import { deviceSwitch } from '@/api/device'
+import { useScreenStore } from '@/pinia/modules/screen'
+import { ElMessage } from 'element-plus'
 
 // 灯光数据
 const lampData = reactive({})
 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'},
+  { 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 condition = {
@@ -171,14 +218,14 @@ const condition = {
 }
 
 // 存储模型数据
-let materialOne = reactive({})
-let materialTwo = reactive({})
+const materialOne = reactive({})
+const materialTwo = reactive({})
 
 // 亮度调整
 const transparency = ref(0)
 const relayList = reactive([])
 const changeTransparency = (e) => {
-  let option = {
+  const option = {
     0: [0.8, 33, 1],
     50: [0.5, 66, 2],
     100: [0.2, 100, 3]
@@ -195,9 +242,9 @@ const changeTransparency = (e) => {
       }
     })
   } else {
-    let relay = relayList[0].deviceRelays
+    const relay = relayList[0].deviceRelays
     for (let i = 0; i < relay.length; i++) {
-      relay[i].state = i < option[e][2];
+      relay[i].state = i < option[e][2]
     }
     for (let j = 0; j < relay.length; j++) {
       deviceSwitch({
@@ -216,7 +263,7 @@ const changeTransparency = (e) => {
 
 const transparencyTwo = ref(0)
 const changeTransparencyTwo = (e) => {
-  let option = {
+  const option = {
     0: [0.8, 33, 1],
     50: [0.5, 66, 2],
     100: [0.2, 100, 3]
@@ -233,9 +280,9 @@ const changeTransparencyTwo = (e) => {
       }
     })
   } else {
-    let relay = relayList[1].deviceRelays
+    const relay = relayList[1].deviceRelays
     for (let i = 0; i < relay.length; i++) {
-      relay[i].state = i < option[e][2];
+      relay[i].state = i < option[e][2]
     }
     for (let j = 0; j < relay.length; j++) {
       deviceSwitch({
@@ -245,37 +292,36 @@ const changeTransparencyTwo = (e) => {
         state: relay[j].state
       }).then(res => {
         if (res.code === 0) {
-          console.log('发送成功');
+          console.log('发送成功')
         }
       })
     }
   }
 }
 
-
 const brightness = () => {
   if (lampData.switchType === '单灯控制器') {
-    let val1 = lampData.lampValue1
-    let val2 = lampData.lampValue2
-    let judge = {
-      0:[0.8,0],
-      33: [0.8,0],
-      66: [0.5,50],
-      100: [0.2,100],
+    const val1 = lampData.lampValue1
+    const val2 = lampData.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[val1][1]
     materialOne.opacity = judge[val1][0]
     materialTwo.opacity = judge[val2][0]
-  } else if(lampData.switchType === '四路控制器') {
+  } else if (lampData.switchType === '四路控制器') {
     relayList.length = 0
     lampData.devices.forEach(item => {
       if (item.genre === 6) {
         relayList.push(item)
       }
     })
-    let deviceLamp1 = relayList[0].deviceRelays
-    let deviceLamp2 = relayList[1].deviceRelays
+    const deviceLamp1 = relayList[0].deviceRelays
+    const deviceLamp2 = relayList[1].deviceRelays
     let count1 = 0
     let count2 = 0
     deviceLamp1.forEach(item => {
@@ -284,12 +330,12 @@ const brightness = () => {
     deviceLamp2.forEach(item => {
       item.state ? count2++ : count2
     })
-    let judgeWay = {
-      0: [0.8,0],
-      1: [0.8,0],
-      2: [0.5,50],
-      3: [0.2,100],
-      4: [0.2,100]
+    const judgeWay = {
+      0: [0.8, 0],
+      1: [0.8, 0],
+      2: [0.5, 50],
+      3: [0.2, 100],
+      4: [0.2, 100]
     }
     transparency.value = judgeWay[count1][1]
     transparencyTwo.value = judgeWay[count2][1]