隧道模型

web/index.html

@@ -15,4 +15,4 @@
     <script type="module" src="./src/main.js"></script>
 </body>
 
-</html>
+</html>

web/src/style/iconfont.css

@@ -6,7 +6,7 @@
     font-display: swap;
 }
 .gvaIcon {
-    font-family: "gvaIcon" !important;
+    font-family: "gvaIcon", serif !important;
     font-size: 16px;
     font-style: normal;
     font-weight: 800;

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

@@ -162,6 +162,7 @@ const loadModel = () => {
   const loader = new GLTFLoader();
   loader.load('../../public/隧道1.glb', function (gltf){
       let object = gltf.scene
+      console.log(gltf.scene)
       materialOne = object.children[0].children[3].material
       materialTwo = object.children[19].children[3].material
       //gltf.scene获取gltf文件包含的模型数据
@@ -309,8 +310,6 @@ const judgeLamp = () => {
 
 }
 
-
-
 // 组件挂载时初始化
 onMounted(() => {
   Object.assign(lampData, useScreen.controllerData)

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

@@ -717,6 +717,7 @@ const changeTactics = (val) => {
 const tunnelTimeData = ref()
 const isControlPanel = ref(false)
 const tunnelControlPanel = (val) => {
+  console.log(val)
   isControlPanel.value = true
   const lampObj = {
     0: 0,
@@ -780,7 +781,7 @@ const lightBySn = ref()
 const tunnelDataPanel = (val) => {
   isDataPanel.value = true
   tunnelTimeData.value = val
-  console.log(val)
+  console.log('数据面板',val)
   groupedBySn.value = tunnelTimeData.value.envData.reduce((acc, current) => {
     const { sn } = current
     // 如果 acc（累加器）中没有当前 sn 对应的数组，则创建一个新的数组

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

@@ -2,14 +2,108 @@
   <img src="@/assets/main_top_left.png" alt="" class="imgStyle"/>
   <div class="titleIcon"></div>
   <div class="chartBox_title">数据图表</div>
+  <div id="environment" class="environment"></div>
 </template>
 
 <script setup>
+import * as echarts from 'echarts';
+import { onMounted } from 'vue'
+
+onMounted(() => {
+  let myChart = echarts.init(document.getElementById('environment'));
+  myChart.setOption({
+    legend:[
+      {
+        type:'scroll',
+        orient: 'vertical',
+        left: 450,
+        top:10,
+        data:['温度']
+      },
+      {
+        type:'scroll',
+        orient: 'vertical',
+        left: 550,
+        top:10,
+        data:['湿度']
+      },
+    ],
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        type: 'cross',
+        crossStyle: {
+          color: '#999'
+        }
+      },
+      formatter: function (params) {
+        let firstParams = params[0];
+        let sndParams = params[1];
+        return (
+            firstParams.name +
+            '  ' +
+            '<br>' +
+            '温度：' +
+            firstParams.data +
+            ' 摄氏度<br>湿度：' +
+            sndParams.data +
+            ' 度'
+        );
+      }
+    },
+    xAxis: [{
+      type: 'category',
+      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun', 'blg'],
+      axisLine: {
+        show:true,
+        lineStyle:{
+          color:'#0EFCFF',
+          width:1,
+          type:'solid'
+        }
+      }
+    }],
+    yAxis: [
+      {
+        position: 'left',
+        type: 'value',
+        name: '温度/湿度',
+        min: 0,
+        max: 100,
+        axisLine: {
+          show:true,
+          lineStyle:{
+            color:'#0EFCFF',
+            width:1,
+            type:'solid'
+          }
+        },
+        splitLine: {
+          lineStyle: {
+            color: ['#0EFCFF']
+          }
+        }
+      }
+    ],
+    series: [
+      {
+        data: [31, 23, 20, 74, 50, 70, 15],
+        type: 'line',
+        name: '温度'
+      },
+      {
+        data: [20, 50, 30, 25, 60, 17, 31],
+        type: 'line',
+        name: '湿度'
+      }
+    ]
+  })
+})
 
 </script>
 
-<style scoped lang="scss">
-  .imgStyle {
+<style scoped lang="less">
+  .imgStyle{
     width: 450px;
     height: 300px;
   }
@@ -28,4 +122,13 @@
     font-size: 20px;
     color: #0EFCFF;
   }
+  .environment{
+    width: 400px;
+    height: 300px;
+    position: absolute;
+    left: 20px;
+    top: 20px;
+  }
+
+
 </style>

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

@@ -1,12 +1,12 @@
 <template>
-<!--  <div ref="mapContainer" class="map-container"></div>-->
+  <div ref="mapContainer" class="map-container"></div>
 </template>
 
 <script setup>
-// import { ref, onMounted } from 'vue';
-//
+import { ref, onMounted, reactive } from 'vue';
+// import mapStyle from '../mapStyle.json'
 // const mapContainer = ref(null);
-//
+
 // const initMap = () => {
 //   // Check if TMap is fully loaded
 //   if (!window.TMap) {
@@ -19,6 +19,7 @@
 //   new TMap.Map(mapContainer.value, {
 //     center: center,
 //     zoom: 12,
+//     styles: mapStyle
 //   });
 // };
 //
@@ -35,16 +36,53 @@
 //   script.onload = initMap; // No need for TMap.ready()
 //   document.head.appendChild(script);
 // };
-//
-// onMounted(() => {
-//   loadTMapSDK();
-// });
-//.map-container {
-//  width: 100%;
-//  height: 820px;
-//}
+
+const mapContainer = ref(null)
+let map = null
+let styleId = 'custom-style' // 自定义样式ID
+const props = reactive({
+  bgColor: {
+    type: String,
+    default: '#f0f0f0' // 默认背景色
+  }
+})
+// 初始化地图
+const initMap = () => {
+  if (!window.TMap) {
+    console.error('腾讯地图JS API未加载')
+    return
+  }
+  // 定义地图样式
+  const style = new TMap.MapStyle({
+    id: styleId,
+    config: {
+      styleJson: {
+        version: "1.0",
+        settings: {
+          landColor: props.bgColor,    // 陆地颜色
+          waterColor: "#d4e6ff",      // 水域颜色
+          backgroundColor: props.bgColor // 背景颜色
+        }
+      }
+    }
+  })
+  // 创建地图实例
+  map = new TMap.Map(mapContainer.value, {
+    center: new TMap.LatLng(39.984120, 116.307484), // 北京坐标
+    zoom: 12,
+    styles: [style] // 应用自定义样式
+  })
+}
+
+onMounted(() => {
+  // loadTMapSDK();
+  initMap()
+});
 </script>
 
 <style scoped>
-
+.map-container {
+  width: 100%;
+  height: 820px;
+}
 </style>

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

@@ -1,11 +1,119 @@
+<template>
+  <div ref="container" class="model-container"></div>
+</template>
+
 <script setup>
+import { ref, onMounted, onBeforeUnmount } from 'vue'
+import * as THREE from 'three'
+import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
+import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'
 
-</script>
+const container = ref(null)
 
-<template>
+// 初始化场景
+const scene = new THREE.Scene()
+// 相机
+const camera = new THREE.PerspectiveCamera(
+    75,
+    window.innerWidth / window.innerHeight,
+    0.1,
+    1000
+)
+// 渲染器
+const renderer = new THREE.WebGLRenderer({
+  antialias: true,
+  alpha: true
+})
+
+// 添加光源
+const ambientLight = new THREE.AmbientLight(0xffffff, 2)
+
+let controls = null
+let model = null
+
+// 初始化场景
+const initScene = () => {
+  if (!container.value) return
+  camera.position.set(30, 30, 30);
+  scene.add(ambientLight)
+
+  // 设置渲染器
+  renderer.setSize(container.value.clientWidth, container.value.clientHeight)
+  renderer.setPixelRatio(window.devicePixelRatio)
+  renderer.outputEncoding = THREE.sRGBEncoding
+  container.value.appendChild(renderer.domElement)
 
-</template>
 
-<style scoped lang="scss">
+  const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8)
+  directionalLight.position.set(5, 5, 5)
+  scene.add(directionalLight)
+
+  // 添加轨道控制器
+  controls = new OrbitControls(camera, renderer.domElement);
+  controls.enableDamping = true; // 启用阻尼效果
+  controls.dampingFactor = 0.05;
+  scene.add(ambientLight);
+
+}
+
+// 加载模型
+const loadModel = () => {
+  const loader = new GLTFLoader()
+
+  loader.load(
+      '../public/隧道1.glb', // 模型路径
+      (gltf) => {
+        model = gltf.scene
+        scene.add(model)
+      },
+      undefined, // 进度回调（可选）
+      (error) => {
+        console.error('Error loading model:', error)
+      }
+  )
+}
+
+// 动画循环
+const animate = () => {
+  requestAnimationFrame(animate)
+  if (controls) controls.update()
+  renderer.render(scene, camera)
+}
+
+
+onMounted(() => {
+  initScene()
+  loadModel()
+  animate()
+})
+
+onBeforeUnmount(() => {
+  window.removeEventListener('resize', handleResize)
+  if (container.value && container.value.contains(renderer.domElement)) {
+    container.value.removeChild(renderer.domElement)
+  }
+
+  // 清理模型资源
+  if (model) {
+    scene.remove(model)
+    model.traverse((child) => {
+      if (child.isMesh) {
+        child.geometry.dispose()
+        if (Array.isArray(child.material)) {
+          child.material.forEach(m => m.dispose())
+        } else {
+          child.material.dispose()
+        }
+      }
+    })
+  }
+})
+</script>
 
+<style scoped>
+.model-container {
+  width: 100%;
+  height: 100vh;
+  position: relative;
+}
 </style>

web/src/view/screen/dataScreen.vue

@@ -23,7 +23,7 @@
             <div class="deviceBox_title">设备汇总</div>
             <div class="deviceOptionBox">
               <div class="deviceOption" v-for="item in deviceList">
-                <img :src="item.url" style="width: 40px;height: 40px" />
+                <img :src="item.url" style="width: 40px;height: 40px"  alt=""/>
                 <el-text style="padding-top: 8px;color: #ffffff">{{item.label + item.value}}</el-text>
               </div>
             </div>
@@ -47,10 +47,10 @@ 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 Map from './components/map.vue'
 import Chart from "./components/chart.vue";
 import warn from '@/assets/main_bottopm_top2.png'
-import warnTitle from '@/assets/warnTitle.png'
+import Map from './components/map.vue'
+// import warnTitle from '@/assets/warnTitle.png'
 import { reactive } from 'vue'
 
 const deviceList = reactive([
@@ -75,7 +75,7 @@ const jumpScreen = (type) => {
 }
 .screen{
   width: 100%;
-  height: 900px;
+  height: 1000px;
   //background-image: url("@/assets/back.jpeg");
   background-size:100% 100%;
   background: #2d407d url("@/assets/line.png");
@@ -108,22 +108,27 @@ const jumpScreen = (type) => {
       font-size: 16px;
     }
   }
+  // 地图层
   .substrate{
     width: 100%;
-    height: 820px;
+    height: 900px;
     position: absolute;
-    z-index: 1;
+    z-index: 0;
   }
+  // 数据层
   .upperLevel{
     width: 100%;
     height: 820px;
     position: absolute;
-    z-index: 2;
+    z-index: 1;
+    pointer-events: none;
+    background-color: transparent;
     .deviceBox{
       width: 450px;
       height: 200px;
       margin: 20px;
       position: relative;
+      pointer-events: auto;
       img {
         width: 450px;
         height: 200px;
@@ -166,6 +171,7 @@ const jumpScreen = (type) => {
       height: 200px;
       margin: 20px;
       position: relative;
+      pointer-events: auto;
     }
   }
 }

web/src/view/screen/mapStyle.json

@@ -0,0 +1,8 @@
+{
+  "version": "1.0",
+  "settings": {
+    "landColor": "#f0f0f0",
+    "waterColor": "#d4e6ff",
+    "backgroundColor": "#f0f0f0"
+  }
+}

web/tailwind.config.js

@@ -1,7 +1,6 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   content: [
-    "./index.html",
     "./src/**/*.{vue,js,ts,jsx,tsx}",
   ],
   important: true,