首页 发现 帮助
注册 登录
xu
/
lc_tunnel
1
0
派生 0
文件 工单管理 0 合并请求 0 Wiki
浏览代码

隧道模型

2545307760@qq.com 7 月之前
父节点
b6b47df98c
当前提交
c00315a7c4
共有 17 个文件被更改，包括 334 次插入 和 467 次删除
合并视图 显示文件统计
  1. 1 2
      web/index.html
  2. 2 2
      web/jsconfig.json
  3. 二进制
      web/src/assets/icons/device.png
  4. 二进制
      web/src/assets/icons/environment.png
  5. 二进制
      web/src/assets/icons/fourWays.png
  6. 二进制
      web/src/assets/icons/inductance.png
  7. 二进制
      web/src/assets/icons/logo.png
  8. 二进制
      web/src/assets/icons/power.png
  9. 二进制
      web/src/assets/icons/setting.png
  10. 二进制
      web/src/assets/icons/singleLamp.png
  11. 二进制
      web/src/assets/icons/sunlight.png
  12. 二进制
      web/src/assets/icons/title.png
  13. 二进制
      web/src/assets/icons/warn.png
  14. 312 450
      web/src/view/admin/dataDashboard/dataDashboard.vue
  15. 1 1
      web/src/view/screen/components/chart.vue
  16. 17 12
      web/src/view/screen/components/map.vue
  17. 1 0
      web/vite.config.js

+ 1 - 2
web/index.html
查看文件 

@@ -7,8 +7,7 @@
 
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 
     <meta content="Gin,Vue,Admin.Gin-Vue-Admin,GVA,gin-vue-admin,后台管理框架,vue后台管理框架,gin-vue-admin文档,gin-vue-admin首页,gin-vue-admin" name="keywords" />
 
     <meta content="Gin,Vue,Admin.Gin-Vue-Admin,GVA,gin-vue-admin,后台管理框架,vue后台管理框架,gin-vue-admin文档,gin-vue-admin首页,gin-vue-admin" name="keywords" />
 
     <link rel="icon" href="favicon.ico">
 
     <link rel="icon" href="favicon.ico">
 
-    <title></title>
 
-<!--    <script src="https://map.qq.com/api/gljs?v=1.exp&key=3SVBZ-6MYYZ-Q75X5-7YN43-BMIBZ-YABND"></script>-->
 
+    <title>龙弛智慧隧道</title>
 
 </head>
 
 </head>
 
 
 
 <body>
 
 <body>

+ 2 - 2
web/jsconfig.json
查看文件 

@@ -2,9 +2,9 @@
 
     "compilerOptions": {
 
     "compilerOptions": {
 
       "baseUrl": "./",
 
       "baseUrl": "./",
 
       "paths": {
 
       "paths": {
 
-        "@/*": ["src/*"],
 
+        "@/*": ["src/*"]
 
       }
 
       }
 
     },
 
     },
 
     "exclude": ["node_modules", "dist"],
 
     "exclude": ["node_modules", "dist"],
 
     "include": ["src/**/*"]
 
     "include": ["src/**/*"]
 
-  }
 
+  }

二进制
web/src/assets/icons/device.png
查看文件


二进制
web/src/assets/icons/environment.png
查看文件


二进制
web/src/assets/icons/fourWays.png
查看文件


二进制
web/src/assets/icons/inductance.png
查看文件


二进制
web/src/assets/icons/logo.png
查看文件


二进制
web/src/assets/icons/power.png
查看文件


二进制
web/src/assets/icons/setting.png
查看文件


二进制
web/src/assets/icons/singleLamp.png
查看文件


二进制
web/src/assets/icons/sunlight.png
查看文件


二进制
web/src/assets/icons/title.png
查看文件


二进制
web/src/assets/icons/warn.png
查看文件


+ 312 - 450
web/src/view/admin/dataDashboard/dataDashboard.vue
查看文件 

@@ -1,505 +1,367 @@
 
 <template>
 
 <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="screen">
 
-    <div style="height: 10px"></div>
 
-    <div class="titleImage">
 
-      <el-image :src="titleUrl" />
 
-      <span class="Heading">龙弛智慧隧道系统</span>
 
-    </div>
 
-    <div class="coreBox">
 
-      <div ref="container" class="three-container"></div>
 
-      <div class="formBox">
 
-        <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"
 
-          />
 
-          <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>
 
+    <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>
 
           </div>
 
-          <div class="panel-bottom"></div>
 
         </div>
 
         </div>
 
       </div>
 
       </div>
 
-      <div class="formBox_two">
 
-        <div class="panel" style="height: 100px">
 
-          <span class="panel-title">轴流式风机</span>
 
-          <span class="panelSwitchTitle">风机开关</span>
 
-          <el-switch class="panelSwitch" size="large"></el-switch>
 
-          <div class="panel-bottom"></div>
 
+      <div class="inductance">
 
+        <div class="inductanceTitle">
 
+          <img alt="" :src="Power" style="padding-left: 15px"/>
 
+          <span style="padding-left: 10px;">电感检测</span>
 
         </div>
 
         </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: 120px">
 
-                <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: 120px">
 
-                <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: 120px">
 
-                <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 class="warn">
 
+        <div class="warnTitle">
 
+          <img alt="" :src="Warn" style="padding-left: 15px">
 
+          <span style="padding-left: 10px;">警告列表</span>
 
         </div>
 
         </div>
 
       </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>
 
+        <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 class="centerBox_environment_chart" id="lamp" style="width: 500px">
 
+          </div>
 
+        </div>
 
+      </div>
 
+    </div>
 
+    <div class="rightBox">
 
+
 
+    </div>
 
   </div>
 
   </div>
 
 </template>
 
 </template>
 
 
 
 <script setup>
 
 <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 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 { useScreenStore } from '@/pinia/modules/screen'
 
 import { useScreenStore } from '@/pinia/modules/screen'
 
-// 单灯控制
 
-import { updateTunnelLamp } from "@/api/tunnel";
 
-// 四路控制
 
-import { deviceSwitch } from "@/api/device";
 
-// 标题图片
 
-import titleUrl from '@/assets/title_bg.png'
 
-import {ElMessage} from "element-plus";
 
 
 
 const useScreen = useScreenStore()
 
 const useScreen = useScreenStore()
 
-// 获取容器引用
 
-const container = ref(null);
 
-
 
-// 定义 Three.js 相关变量
 
-let scene, camera, renderer, controls;
 
-
 
-// 创建场景
 
-scene = new THREE.Scene();
 
-
 
-// 添加环境光
 
-const ambientLight = new THREE.AmbientLight(0xffffff, 1);
 
-
 
-// 初始化 Three.js 场景
 
-const initThree = () => {
 
-  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);
 
-
 
-  // 创建渲染器
 
-  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);
 
-
 
-  // 添加轨道控制器
 
-  controls = new OrbitControls(camera, renderer.domElement);
 
-  controls.enableDamping = true; // 启用阻尼效果
 
-  controls.dampingFactor = 0.05;
 
-
 
-  scene.add(ambientLight);
 
-
 
-  // 添加平行光
 
-  const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
 
-  directionalLight.position.set(5, 5, 5).normalize();
 
-  scene.add(directionalLight);
 
-};
 
 
 
-// 存储模型数据
 
-let materialOne = reactive({})
 
-let materialTwo = reactive({})
 
+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 relayList = reactive([])
 
+onMounted(() => {
 
+  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;
 
 
 
-// 加载 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
 
+  option = {
 
+    tooltip: {
 
+      trigger: 'axis',
 
+      axisPointer: {
 
+        type: 'cross',
 
+        crossStyle: {
 
+          color: '#ffffff'
 
         }
 
         }
 
-      })
 
-      //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);
 
-};
 
-
 
-// 亮度调整
 
-const transparency = ref(0)
 
-const changeTransparency = (e) => {
 
-  let option = {
 
-    0: [0.8, 33, 1],
 
-    50: [0.5, 66, 2],
 
-    100: [0.2, 100, 3]
 
-  }
 
-  materialOne.opacity = option[e][0]
 
-  if (lampData.switchType === '单灯控制器') {
 
-    updateTunnelLamp({
 
-      id: lampData.ID,
 
-      tunnelSn: lampData.tunnelSn,
 
-      lampValue1: option[e][1]
 
-    }).then(res => {
 
-      if (res.code === 0) {
 
-        ElMessage.success('已发送')
 
-      }
 
-    })
 
-  } else {
 
-    let relay = relayList[0].deviceRelays
 
-    for (let i = 0; i < relay.length; i++) {
 
-      relay[i].state = i < option[e][2];
 
-    }
 
-    for (let j = 0; j < relay.length; j++) {
 
-      deviceSwitch({
 
-        tunnelSn: lampData.tunnelSn,
 
-        radarId: relayList[0].radarId,
 
-        relayId: relay[j].relayId,
 
-        state: relay[j].state
 
-      }).then(res => {
 
-        if (res.code === 0) {
 
-          console.log('发送成功')
 
+      },
 
+    },
 
+    legend: {
 
+      data: [
 
+        // '待下发','处置中','已完成'
 
+        {
 
+          name: '温度',
 
+          textStyle: {
 
+            color: '#0EFCFF'          // 图例文字颜色
 
+          }
 
+        },
 
+        {
 
+          name: '湿度',
 
+          textStyle: {
 
+            color: '#1b92fd'          // 图例文字颜色
 
+          }
 
+        }
 
+      ],
 
+    },
 
+    xAxis: {
 
+      type: 'time', // 使用时间类型的x轴
 
+      boundaryGap: false,
 
+      axisLine: {
 
+        show:true,
 
+        lineStyle:{
 
+          color:'#ffffff',
 
+          width:1,
 
+          type:'solid'
 
         }
 
         }
 
-      })
 
-    }
 
-  }
 
-}
 
-
 
-const transparencyTwo = ref(0)
 
-const changeTransparencyTwo = (e) => {
 
-  let option = {
 
-    0: [0.8, 33, 1],
 
-    50: [0.5, 66, 2],
 
-    100: [0.2, 100, 3]
 
-  }
 
-  materialTwo.opacity = option[e][0]
 
-  if (lampData.switchType === '单灯控制器') {
 
-    updateTunnelLamp({
 
-      id: lampData.ID,
 
-      tunnelSn: lampData.tunnelSn,
 
-      lampValue2: option[e][1]
 
-    }).then(res => {
 
-      if (res.code === 0) {
 
-        ElMessage.success('已发送')
 
       }
 
       }
 
-    })
 
-  } else {
 
-    let relay = relayList[1].deviceRelays
 
-    for (let i = 0; i < relay.length; i++) {
 
-      relay[i].state = i < option[e][2];
 
-    }
 
-    for (let j = 0; j < relay.length; j++) {
 
-      deviceSwitch({
 
-        tunnelSn: lampData.tunnelSn,
 
-        radarId: relayList[1].radarId,
 
-        relayId: relay[j].relayId,
 
-        state: relay[j].state
 
-      }).then(res => {
 
-        if (res.code === 0) {
 
-          console.log('发送成功');
 
+    },
 
+    yAxis: {
 
+      axisLine: {
 
+        show:true,
 
+        lineStyle:{
 
+          color:'#ffffff',
 
+          width:1,
 
+          type:'solid'
 
         }
 
         }
 
-      })
 
-    }
 
-  }
 
-}
 
+      },
 
+      splitLine: {
 
+        lineStyle: {
 
+          color: ['#ffffff']
 
+        }
 
+      }
 
+    },
 
+    series: [
 
+      {
 
+        name: '温度',
 
+        type: 'line',
 
+        data: list.map(item => [new Date(item.CreatedAt).getTime(), item.temperature])
 
+      },
 
+      {
 
+        name: '湿度',
 
+        type: 'line',
 
+        data: list.map(item => [new Date(item.CreatedAt).getTime(), item.humidity])
 
+      }
 
+    ],
 
+  };
 
 
 
-// 灯光数据
 
-const lampData = reactive({})
 
+  option && myChart.setOption(option);
 
+})
 
 
 
-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],
 
-    }
 
-    transparency.value = judge[val1][1]
 
-    materialOne.opacity = judge[val1][0]
 
-    transparencyTwo.value = judge[val1][1]
 
-    materialTwo.opacity = judge[val2][0]
 
-  } else if(lampData.switchType === '四路控制器') {
 
-    lampData.devices.forEach(item => {
 
-      if (item.genre === 6) {
 
-        relayList.push(item)
 
+const loadingLamp = ((list) => {
 
+  let chartDom = document.getElementById('lamp');
 
+  let myChart = echarts.init(chartDom);
 
+  let option;
 
+
 
+  option = {
 
+    tooltip: {
 
+      trigger: 'axis',
 
+      axisPointer: {
 
+        type: 'cross',
 
+        crossStyle: {
 
+          color: '#ffffff'
 
+        }
 
+      },
 
+    },
 
+    legend: {
 
+      data: [
 
+        {
 
+          name: '光照度',
 
+          textStyle: {
 
+            color: '#ffffff'          // 图例文字颜色
 
+          }
 
+        },
 
+      ]
 
+    },
 
+    xAxis: {
 
+      type: 'time', // 使用时间类型的x轴
 
+      boundaryGap: false,
 
+      axisLine: {
 
+        show:true,
 
+        lineStyle:{
 
+          color:'#ffffff',
 
+          width:1,
 
+          type:'solid'
 
+        }
 
       }
 
       }
 
-    })
 
-    let deviceLamp1 = relayList[0].deviceRelays
 
-    let deviceLamp2 = relayList[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]
 
+    },
 
+    yAxis: {
 
+      axisLine: {
 
+        show:true,
 
+        lineStyle:{
 
+          color:'#ffffff',
 
+          width:1,
 
+          type:'solid'
 
+        }
 
+      },
 
+      splitLine: {
 
+        lineStyle: {
 
+          color: ['#ffffff']
 
+        }
 
       }
 
       }
 
-    transparency.value = judgeWay[count1][1]
 
-    materialOne.opacity = judgeWay[count1][0]
 
-    transparencyTwo.value = judgeWay[count2][1]
 
-    materialTwo.opacity = judgeWay[count2][0]
 
-  }
 
-
 
-}
 
+    },
 
+    series: [
 
+      {
 
+        name: '光照度',
 
+        type: 'bar',
 
+        data: list.map(item => [new Date(item.CreatedAt).getTime(), item.illuminance])
 
+      },
 
+    ]
 
+  };
 
 
 
-// 组件挂载时初始化
 
-onMounted(() => {
 
-  Object.assign(lampData, useScreen.controllerData)
 
-  initThree();
 
-  loadModel();
 
-  animate();
 
-  setTimeout(function () {
 
-    judgeLamp()
 
-  },500)
 
-});
 
+  option && myChart.setOption(option);
 
+})
 
 
 
-// 组件卸载时清理资源
 
-onUnmounted(() => {
 
-  if (renderer) {
 
-    renderer.dispose();
 
-  }
 
-});
 
 </script>
 
 </script>
 
 
 
 <style scoped lang="less">
 
 <style scoped lang="less">
 
-.horn {
 
-  position: absolute;
 
-  content: "";
 
-  width: 10px;
 
-  height: 10px;
 
+// 公共样式
 
+.title {
 
+  display: flex;
 
+  align-items: center;
 
+  font-size: 20px;
 
+  font-family: PingFang-SC-Medium,serif;
 
+  color: rgba(27, 146, 253, 1);
 
+}
 
+.boxShape {
 
+  width: 370px;
 
+  border: 1px solid rgba(27,146,253,0.5);
 
+  background: rgba(50, 72, 106, 0.2);
 
+  margin-left: 20px;
 
+}
 
+//.....................
 
+.screenTitle{
 
+  width: 100%;
 
+  height: 130px;
 
+  background-color: #0e122d;
 
+  display: flex;
 
+  justify-content: center;
 
+  align-items: center;
 
 }
 
 }
 
 .screen{
 
 .screen{
 
   width: 100%;
 
   width: 100%;
 
-  height: 970px;
 
-  //background-image: url("@/assets/back.jpeg");
 
-  background-size:100% 100%;
 
-  background: #1d2b56 url("@/assets/line.png");
 
-
 
-  .titleImage {
 
-    width: 100%;
 
-    height: 70px;
 
-    display: flex;
 
-    align-items: center;
 
-    justify-content: center;
 
-    position: relative;
 
-    .Heading{
 
-      position: absolute;
 
-      left: 42%;
 
-      top: 25%;
 
-      text-align: center;
 
-      font-size: 1.7vw;
 
-      font-weight: bold;
 
-      color: #0EFCFF;
 
-    }
 
-  }
 
-  .coreBox{
 
-    width: 100%;
 
-    height: 900px;
 
-    margin-top: 20px;
 
-    position: relative;
 
-    .three-container {
 
-      z-index: 1;
 
-      position: absolute;
 
-      height: 800px;
 
-      width: 100%;
 
-    }
 
-    .formBox{
 
-      position: absolute;
 
-      right: 20px;
 
-      z-index:2;
 
-    }
 
-    .formBox_two{
 
-      position: absolute;
 
-      right: 20px;
 
-      top: 250px;
 
-      z-index:2;
 
-    }
 
-    .vehicleBox{
 
-      position: absolute;
 
-      right: 20px;
 
-      top: 380px;
 
-      z-index:2;
 
-      .vehicleData{
 
-        display: flex;
 
-        justify-content: end;
 
-        align-items: center;
 
-        span {
 
-          font-size: 18px;
 
-          font-weight: bold;
 
-          color: #0EFCFF;
 
+  height: 1100px;
 
+  background-color: #0e122d;
 
+  display: flex;
 
+  .leftBox {
 
+    width: 20%;
 
+    height: 1000px;
 
+    .deviceSummary {
 
+      height: 150px;
 
+      .boxShape;
 
+      .deviceSummary_title {
 
+        width: 370px;
 
+        height: 50px;
 
+        .title;
 
+        img{
 
+          width: 30px;
 
+          height: 30px;
 
         }
 
         }
 
       }
 
       }
 
-      .vehicleUnit{
 
+      .deviceOptionBox {
 
+        width: 370px;
 
+        height: 60px;
 
         display: flex;
 
         display: flex;
 
-        justify-content: end;
 
-        align-items: center;
 
-        span {
 
-          color: #909399;
 
+        margin-top: 20px;
 
+        .deviceOption {
 
+          width: 90px;
 
+          height: 60px;
 
+          display: flex;
 
+          flex-direction: column;
 
+          align-items: center;
 
+          color: #ffffff;
 
         }
 
         }
 
       }
 
       }
 
     }
 
     }
 
-    .panel{
 
-      position: relative;
 
-      width: 300px;
 
+    .inductance {
 
       height: 200px;
 
       height: 200px;
 
-      border: 1px solid rgba(25,186,139,0.17);
 
-      padding: 0 0.1875rem 0.5rem;
 
-      margin-bottom: 0.1875rem;
 
-      background: url(@/assets/line.png) rgba(255,255,255,0.04);
 
-      &::before{
 
-        .horn;
 
-        top: 0;
 
-        left: 0;
 
-        border-left: 2px solid #02a6b5;
 
-        border-top: 2px solid #02a6b5;
 
-      }
 
-      &::after{
 
-        .horn;
 
-        top: 0;
 
-        right: 0;
 
-        border-right: 2px solid #02a6b5;
 
-        border-top: 2px solid #02a6b5;
 
-      }
 
-      .panel-bottom{
 
-        &::before{
 
-          .horn;
 
-          bottom: 0;
 
-          left: 0;
 
-          border-left: 2px solid #02a6b5;
 
-          border-bottom: 2px solid #02a6b5;
 
+      margin-top: 20px;
 
+      .boxShape;
 
+      .inductanceTitle {
 
+        width: 370px;
 
+        height: 50px;
 
+        .title;
 
+        img{
 
+          width: 30px;
 
+          height: 30px;
 
         }
 
         }
 
-        &::after{
 
-          .horn;
 
-          bottom: 0;
 
-          right: 0;
 
-          border-right: 2px solid #02a6b5;
 
-          border-bottom: 2px solid #02a6b5;
 
-        }
 
-      }
 
-      .panel-title{
 
-        position: absolute;
 
-        left: 110px;
 
-        top: 10px;
 
-        font-size: 20px;
 
-        font-weight: bold;
 
-        color: #0EFCFF;
 
       }
 
       }
 
-      .panelSwitchTitle{
 
-        color: #ffffff;
 
-        font-size: 16px;
 
-        position: absolute;
 
-        bottom: 30px;
 
-        font-weight: bold;
 
-        left:25px;
 
-      }
 
-      .panelSwitch{
 
-        position: absolute;
 
-        right: 25px;
 
-        bottom: 20px;
 
+    }
 
+    .warn {
 
+      height: 400px;
 
+      margin-top: 20px;
 
+      .boxShape;
 
+      .warnTitle {
 
+        width: 370px;
 
+        height: 50px;
 
+        .title;
 
+        img{
 
+          width: 30px;
 
+          height: 30px;
 
+        }
 
       }
 
       }
 
-      .panel-slider{
 
-        width: 250px;
 
-        position: absolute;
 
-        top: 60px;
 
-        left: 25px;
 
+    }
 
+  }
 
+  .centerBox {
 
+    width: 60%;
 
+    height: 1000px;
 
+    display: flex;
 
+    flex-direction: column;
 
+    align-items: center;
 
+    .centerBox_chart {
 
+      width: 1150px;
 
+      height: 250px;
 
+      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: 250px;
 
+      position: relative;
 
+      .centerBox_environment_title {
 
+        width: 500px;
 
+        height: 50px;
 
+        .title;
 
+        img {
 
+          width: 30px;
 
+          height: 30px;
 
+        }
 
       }
 
       }
 
-      .panel-slider2{
 
-        width: 250px;
 
+      .centerBox_environment_chart {
 
+        height: 250px;
 
         position: absolute;
 
         position: absolute;
 
-        top: 120px;
 
-        left: 25px;
 
-      }
 
-      .brightness{
 
-        width: 250px;
 
-        display: flex;
 
-        justify-content: space-between;
 
-        color: #909399;
 
-        font-size: 14px;
 
+        top: 5px;
 
       }
 
       }
 
     }
 
     }
 
   }
 
   }
 
-}
 
-
 
-/* ::v-deep是vue3提供的深度选择器，.el-form-item__label是element-plus官方定义的类 */
 
-/deep/ .el-form-item__label{
 
-  color: white;
 
-  font-size: 16px;
 
-}
 
-
 
-.el-slider__runway{ // 滑块的进度条颜色
 
-  background-color: #000000;
 
+  .rightBox {
 
+    width: 20%;
 
+    height: 1000px;
 
+  }
 
 }
 
 }
 
 </style>
 
 </style>

+ 1 - 1
web/src/view/screen/components/chart.vue
查看文件 

@@ -90,7 +90,7 @@ const chartLoading = (list) => {
 
 }
 
 }
 
 
 
 // 监听 ref 数据变化
 
 // 监听 ref 数据变化
 
-watch(() => useScreen.currentTunnel, (newValue, oldValue) => {
 
+watch(() => useScreen.currentTunnel, (newValue) => {
 
   yourMethod(newValue) // 调用你的方法
 
   yourMethod(newValue) // 调用你的方法
 
 })
 
 })

+ 17 - 12
web/src/view/screen/components/map.vue
查看文件 

@@ -6,6 +6,7 @@
 
       :zoom="zoom"
 
       :zoom="zoom"
 
       :control="control"
 
       :control="control"
 
       class="mapBox"
 
       class="mapBox"
 
+      :options="mapOption"
 
       @click="onClick"
 
       @click="onClick"
 
       @map_inited="onMapInited"
 
       @map_inited="onMapInited"
 
   >
 
   >
 
@@ -37,7 +38,7 @@
 
 
 
 <script>
 
 <script>
 
 import { defineComponent, ref } from 'vue-demi';
 
 import { defineComponent, ref } from 'vue-demi';
 
-import {useScreenStore} from "@/pinia/modules/screen";
 
+import { useScreenStore } from "@/pinia/modules/screen";
 
 const useScreen = useScreenStore()
 
 const useScreen = useScreenStore()
 
 export default defineComponent({
 
 export default defineComponent({
 
   name: 'MarkerDemo',
 
   name: 'MarkerDemo',
 
@@ -49,18 +50,21 @@ export default defineComponent({
 
     const geometries = ref(useScreen.placeList)
 
     const geometries = ref(useScreen.placeList)
 
     const dialogVisible = ref(false)
 
     const dialogVisible = ref(false)
 
     const dialogData = ref({})
 
     const dialogData = ref({})
 
+    const mapOption = ref({
 
+      mapStyleId:'style1'
 
+    })
 
     const onClick = (e) => {
 
     const onClick = (e) => {
 
       console.log(e.latLng);
 
       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 = () => {
 
     const onMapInited = () => {
 
@@ -121,6 +125,7 @@ export default defineComponent({
 
       dialogVisible,
 
       dialogVisible,
 
       dialogData,
 
       dialogData,
 
       callParentMethod,
 
       callParentMethod,
 
+      mapOption
 
       // viewModel
 
       // viewModel
 
     };
 
     };
 
   },
 
   },
 
@@ -130,7 +135,7 @@ export default defineComponent({
 
 <style scoped lang="less">
 
 <style scoped lang="less">
 
 .mapBox{
 
 .mapBox{
 
   width: 1150px;
 
   width: 1150px;
 
-  height: 800px;
 
+  height: 700px;
 
 }
 
 }
 
 
 
 .infoDialog{
 
 .infoDialog{

+ 1 - 0
web/vite.config.js
查看文件 

@@ -73,6 +73,7 @@ export default ({
 
       },
 
       },
 
     },
 
     },
 
     build: {
 
     build: {
 
+      charset:'utf8',
 
       minify: 'terser', // 是否进行压缩,boolean | 'terser' | 'esbuild',默认使用terser
 
       minify: 'terser', // 是否进行压缩,boolean | 'terser' | 'esbuild',默认使用terser
 
       manifest: false, // 是否产出manifest.json
 
       manifest: false, // 是否产出manifest.json
 
       sourcemap: false, // 是否产出sourcemap.json
 
       sourcemap: false, // 是否产出sourcemap.json