隧道模型

web/src/pinia/modules/screen.js

@@ -0,0 +1,15 @@
+import { defineStore } from 'pinia'
+import { reactive } from 'vue'
+
+export const useScreenStore = defineStore('screen',() => {
+    const controllerData = reactive({})
+
+    const setController = (val) => {
+        Object.assign(controllerData, val)
+    }
+
+    return {
+        controllerData,
+        setController
+    }
+})

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

@@ -18,7 +18,20 @@
               class="panel-slider"
               @change="changeTransparency"
           />
-          <div class="brightness">
+          <div class="brightness" style="margin: 90px 0 0 25px;">
+            <span>低</span>
+            <span>中</span>
+            <span>高</span>
+          </div>
+          <el-slider
+              v-model="transparencyTwo"
+              :step="50"
+              show-stops
+              :show-tooltip="false"
+              class="panel-slider2"
+              @change="changeTransparencyTwo"
+          />
+          <div class="brightness" style="margin: 50px 0 0 25px;">
             <span>低</span>
             <span>中</span>
             <span>高</span>
@@ -81,9 +94,15 @@ 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'
+// 单灯控制
+import { updateTunnelLamp } from "@/api/tunnel";
+// 四路控制
+import { deviceSwitch } from "@/api/device";
 // 标题图片
 import titleUrl from '@/assets/title_bg.png'
 
+const useScreen = useScreenStore()
 // 获取容器引用
 const container = ref(null);
 
@@ -110,7 +129,7 @@ const initThree = () => {
       0.1,
       1000
   );
-  camera.position.set(20, 20, 20);
+  camera.position.set(30, 20, 30);
 
   // 创建渲染器
   renderer = new THREE.WebGLRenderer({ antialias: true });
@@ -133,15 +152,17 @@ const initThree = () => {
 };
 
 // 存储模型数据
-let material = reactive({})
+let materialOne = reactive({})
+let materialTwo = reactive({})
+
 
 // 加载 GLB 模型
 const loadModel = () => {
   const loader = new GLTFLoader();
-  loader.load('../../public/智慧隧道.glb', function (gltf){
+  loader.load('../../public/隧道1.glb', function (gltf){
       let object = gltf.scene
-      object.children[0].children[1].material.opacity = 0.2
-      material = object.children[0].children[1].material
+      materialOne = object.children[0].children[3].material
+      materialTwo = object.children[19].children[3].material
       //gltf.scene获取gltf文件包含的模型数据
       scene.add(gltf.scene)
     }, function (xhr) {
@@ -149,7 +170,7 @@ const loadModel = () => {
         console.log((xhr.loaded / xhr.total * 100) + '% loaded');
       }, function (error) {
         // 加载错误回调
-        console.error('An error happened', error);
+        // console.error('An error happened', error);
       }
   )
 };
@@ -161,11 +182,79 @@ const animate = () => {
   renderer.render(scene, camera);
 };
 
+// 亮度调整
+const transparency = ref(0)
+const changeTransparency = (e) => {
+  let option = {
+    0: 0.8,
+    50: 0.5,
+    100: 0.2
+  }
+  materialOne.opacity = option[e]
+}
+
+const transparencyTwo = ref(0)
+const changeTransparencyTwo = (e) => {
+  let option = {
+    0: 0.8,
+    50: 0.5,
+    100: 0.2
+  }
+  materialTwo.opacity = option[e]
+}
+
+// 灯光数据
+const lampData = reactive({})
+
+const judgeLamp = () => {
+  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],
+    }
+    transparency.value = judge[val1][1]
+    materialOne.opacity = judge[val1][0]
+    transparencyTwo.value = judge[val1][1]
+    materialTwo.opacity = judge[val2][0]
+  } else if(lampData.switchType === '四路控制器') {
+      let deviceLamp1 = lampData.devices[0].deviceRelays
+      let deviceLamp2 = lampData.devices[1].deviceRelays
+      let count1 = 0
+      let count2 = 0
+      deviceLamp1.forEach(item => {
+        item.state ? count1++ : count1
+      })
+      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]
+      }
+    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 () {
+    judgeLamp()
+  },500)
 });
 
 // 组件卸载时清理资源
@@ -174,22 +263,6 @@ onUnmounted(() => {
     renderer.dispose();
   }
 });
-
-// 亮度调整
-
-const transparency = ref(0)
-
-
-const changeTransparency = (e) => {
-  let option = {
-    0: 0.8,
-    50: 0.5,
-    100: 0.2
-  }
-  material.opacity = option[e]
-}
-
-
 </script>
 
 <style scoped lang="less">
@@ -242,13 +315,13 @@ const changeTransparency = (e) => {
     .formBox_two{
       position: absolute;
       right: 20px;
-      top: 150px;
+      top: 250px;
       z-index:2;
     }
     .vehicleBox{
       position: absolute;
       right: 20px;
-      top: 280px;
+      top: 380px;
       z-index:2;
       .vehicleData{
         display: flex;
@@ -272,7 +345,7 @@ const changeTransparency = (e) => {
     .panel{
       position: relative;
       width: 300px;
-      height: 120px;
+      height: 200px;
       border: 1px solid rgba(25,186,139,0.17);
       padding: 0 0.1875rem 0.5rem;
       margin-bottom: 0.1875rem;
@@ -334,8 +407,13 @@ const changeTransparency = (e) => {
         top: 60px;
         left: 25px;
       }
+      .panel-slider2{
+        width: 250px;
+        position: absolute;
+        top: 120px;
+        left: 25px;
+      }
       .brightness{
-        margin: 90px 0 0 25px;
         width: 250px;
         display: flex;
         justify-content: space-between;

web/src/view/admin/tunnel/tunnel.vue

@@ -75,18 +75,22 @@
             prop="switchType"
             label="开关类型"
             align="center"
+        />
+        <el-table-column
+            label="策略"
+            align="center"
         >
           <template #default="scope">
             <el-select
-              v-model="scope.row.tactics"
-              style="width: 100px"
-              @change="changeTactics(scope.row)"
+                v-model="scope.row.tactics"
+                style="width: 100px"
+                @change="changeTactics(scope.row)"
             >
               <el-option
-                v-for="item in tacticsOptions"
-                :key="item.value"
-                :label="item.label"
-                :value="item.value"
+                  v-for="item in tacticsOptions"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
               />
             </el-select>
           </template>
@@ -100,7 +104,7 @@
             <el-button
                 type="primary"
                 size="small"
-                @click="jumpScreen"
+                @click="jumpScreen(scope.row)"
             >
               大屏
             </el-button>
@@ -335,8 +339,9 @@
                 key="k"
                 v-model="v.state"
                 class="ml-2"
+                :disabled="k === 0"
                 style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
-                @click="switchButton(item, v)"
+                @click="switchButton(item, v, k)"
               />
             </div>
           </div>
@@ -344,7 +349,7 @@
             <div style="margin: 0 0 0 20px">
               <el-slider
                 v-model="tunnelTimeData.lampValue1"
-                :step="10"
+                :step="50"
                 style="width: 50%;"
                 show-stops
               />
@@ -352,7 +357,7 @@
             <div style="margin: 0 0 0 20px">
               <el-slider
                 v-model="tunnelTimeData.lampValue2"
-                :step="10"
+                :step="50"
                 style="width: 50%;"
                 show-stops
               />
@@ -415,6 +420,7 @@
 
 <script setup>
 import { ref, onMounted } from 'vue'
+import { useScreenStore } from '@/pinia/modules/screen'
 import { queryAllRegions } from '@/api/region'
 import {
   createTunnel,
@@ -480,7 +486,6 @@ const isTunnelAdd = () => {
 
 function getFormattedDateTime() {
   const now = new Date()
-
   const year = now.getFullYear()
   const month = String(now.getMonth() + 1).padStart(2, '0') // 月份从0开始，所以需要加1
   const day = String(now.getDate()).padStart(2, '0')
@@ -691,11 +696,17 @@ const editTunnelTiming = async() => {
 }
 
 const lampSet = async(val) => {
+  let judge = {
+    0: 33,
+    50: 66,
+    100: 100
+  }
+  console.log(judge[val.lampValue1],judge[val.lampValue2])
   await updateTunnelLamp({
     id: val.ID,
     tunnelSn: val.tunnelSn,
-    lampValue1: val.lampValue1,
-    lampValue2: val.lampValue2
+    lampValue1: judge[val.lampValue1],
+    lampValue2: judge[val.lampValue2]
   }).then(res => {
     if (res.code === 0) {
       ElMessage.success('已发送')
@@ -705,8 +716,10 @@ const lampSet = async(val) => {
 }
 
 // 开关
-const switchButton = async(device, relay) => {
-  console.log(device, relay)
+const switchButton = async(device, relay, index) => {
+  if (index === 0) {
+    return
+  }
   await deviceSwitch({
     tunnelSn: device.tunnel.tunnelSn,
     radarId: device.radarId,
@@ -721,10 +734,10 @@ const switchButton = async(device, relay) => {
 }
 
 // 大屏
-const jumpScreen = () => {
+const useScreen =  useScreenStore()
+const jumpScreen = (row) => {
+  useScreen.setController(row)
   router.push('/dataDashboard')
-  // const routeData = router.resolve({ name: 'dataDashboard' })
-  // window.open(routeData.href, '_blank')
 }
 
 onMounted(() => {