隧道模型

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

@@ -0,0 +1,31 @@
+<template>
+  <img src="@/assets/main_top_left.png" alt="" class="imgStyle"/>
+  <div class="titleIcon"></div>
+  <div class="chartBox_title">数据图表</div>
+</template>
+
+<script setup>
+
+</script>
+
+<style scoped lang="scss">
+  .imgStyle {
+    width: 450px;
+    height: 300px;
+  }
+  .titleIcon{
+    width: 5px;
+    height: 20px;
+    background-color: #0EFCFF;
+    position: absolute;
+    left: 20px;
+    top: 16px;
+  }
+  .chartBox_title{
+    position: absolute;
+    left: 30px;
+    top: 15px;
+    font-size: 20px;
+    color: #0EFCFF;
+  }
+</style>

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

@@ -0,0 +1,50 @@
+<template>
+<!--  <div ref="mapContainer" class="map-container"></div>-->
+</template>
+
+<script setup>
+// import { ref, onMounted } from 'vue';
+//
+// const mapContainer = ref(null);
+//
+// const initMap = () => {
+//   // Check if TMap is fully loaded
+//   if (!window.TMap) {
+//     console.error('TMap SDK not loaded!');
+//     return;
+//   }
+//
+//   // Initialize map
+//   const center = new TMap.LatLng(39.984104, 116.307503);
+//   new TMap.Map(mapContainer.value, {
+//     center: center,
+//     zoom: 12,
+//   });
+// };
+//
+// const loadTMapSDK = () => {
+//   // If already loaded, initialize directly
+//   if (window.TMap) {
+//     initMap();
+//     return;
+//   }
+//
+//   // Dynamically load SDK
+//   const script = document.createElement('script');
+//   script.src = `https://map.qq.com/api/gljs?v=1.exp&key=TOOBZ-FUPEI-LGNGT-UEIAH-JXZB3-LDFFX`;
+//   script.onload = initMap; // No need for TMap.ready()
+//   document.head.appendChild(script);
+// };
+//
+// onMounted(() => {
+//   loadTMapSDK();
+// });
+//.map-container {
+//  width: 100%;
+//  height: 820px;
+//}
+</script>
+
+<style scoped>
+
+</style>

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

@@ -0,0 +1,11 @@
+<script setup>
+
+</script>
+
+<template>
+
+</template>
+
+<style scoped lang="scss">
+
+</style>

web/src/view/screen/dataScreen.vue

@@ -4,167 +4,66 @@
     <div class="titleImage">
       <el-image :src="titleUrl" />
       <span class="Heading">龙弛智慧隧道系统</span>
+      <div class="titleOption" style="left: 19%" @click="jumpScreen('map')">
+        <span>地图</span>
+      </div>
+      <div class="titleOption" style="left: 76%" @click="jumpScreen('model')">
+        <span>模型</span>
+      </div>
+    </div>
+    <div class="substrate">
+      <Map/>
     </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 class="upperLevel">
+      <el-row>
+        <el-col :span="6">
+          <div class="deviceBox">
+            <img src="@/assets/main_top_left.png" alt=""/>
+            <div class="titleIcon"></div>
+            <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" />
+                <el-text style="padding-top: 8px;color: #ffffff">{{item.label + item.value}}</el-text>
+              </div>
+            </div>
           </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="chartBox">
+            <Chart/>
           </div>
-          <div class="panel-bottom"></div>
-        </div>
-      </div>
+        </el-col>
+        <el-col :span="6" :offset="12">
+          <img :src="warn" alt="" style="width: 95%;height: 300px;">
+        </el-col>
+      </el-row>
     </div>
   </div>
 </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 { 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 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({})
-
-
-// 加载 GLB 模型
-const loadModel = () => {
-  const loader = new GLTFLoader();
-  loader.load('../../public/隧道1.glb', function (gltf){
-        let object = gltf.scene
-        materialOne = object.children[0].children[3].material
-        materialTwo = object.children[19].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);
-};
-
-// 亮度调整
-const transparency = ref(0)
-const changeTransparency = (e) => {
-  console.log(e)
-}
-
-const transparencyTwo = ref(0)
-const changeTransparencyTwo = (e) => {
-  console.log(e)
+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 { reactive } from 'vue'
+
+const deviceList = reactive([
+  {url: environments, label: '环境：', value: '2/1'},
+  {url: fourWays, label: '四路：', value: '2/1'},
+  {url: inductance, label: '电感：', value: '2/1'},
+  {url: singleLamp, label: '单灯：', value: '2/1'},
+])
+const jumpScreen = (type) => {
+  console.log(type)
 }
 
-// 灯光数据
-const lampData = reactive({})
 
-// 组件挂载时初始化
-onMounted(() => {
-  Object.assign(lampData, useScreen.controllerData)
-  initThree();
-  loadModel();
-  animate();
-});
-
-// 组件卸载时清理资源
-onUnmounted(() => {
-  if (renderer) {
-    renderer.dispose();
-  }
-});
 </script>
 
 <style scoped lang="less">
@@ -179,8 +78,7 @@ onUnmounted(() => {
   height: 900px;
   //background-image: url("@/assets/back.jpeg");
   background-size:100% 100%;
-  background: #1d2b56 url("@/assets/line.png");
-
+  background: #2d407d url("@/assets/line.png");
   .titleImage {
     width: 100%;
     height: 70px;
@@ -197,100 +95,86 @@ onUnmounted(() => {
       font-weight: bold;
       color: #0EFCFF;
     }
-  }
-  .coreBox{
-    width: 100%;
-    height: 800px;
-    margin-top: 20px;
-    position: relative;
-    .three-container {
-      z-index: 1;
+    .titleOption{
       position: absolute;
-      height: 800px;
-      width: 100%;
-    }
-    .formBox{
-      position: absolute;
-      right: 20px;
-      z-index:2;
+      top: 7px;
+      width: 100px;
+      height: 32px;
+      border: 1px solid #0EFCFF;
+      color: #0EFCFF;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 16px;
     }
-    .panel{
-      position: relative;
-      width: 300px;
+  }
+  .substrate{
+    width: 100%;
+    height: 820px;
+    position: absolute;
+    z-index: 1;
+  }
+  .upperLevel{
+    width: 100%;
+    height: 820px;
+    position: absolute;
+    z-index: 2;
+    .deviceBox{
+      width: 450px;
       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;
-        }
-        &::after{
-          .horn;
-          bottom: 0;
-          right: 0;
-          border-right: 2px solid #02a6b5;
-          border-bottom: 2px solid #02a6b5;
-        }
+      margin: 20px;
+      position: relative;
+      img {
+        width: 450px;
+        height: 200px;
       }
-      .panel-title{
+      .deviceBox_title {
         position: absolute;
-        left: 110px;
-        top: 10px;
+        left: 30px;
+        top: 15px;
         font-size: 20px;
-        font-weight: bold;
         color: #0EFCFF;
       }
-      .panel-slider{
-        width: 250px;
+      .deviceOptionBox{
         position: absolute;
-        top: 60px;
-        left: 25px;
+        top: 70px;
+        width: 450px;
+        height: 60px;
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+        .deviceOption{
+          width: 90px;
+          height: 60px;
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          color: #ffffff;
+        }
       }
-      .panel-slider2{
-        width: 250px;
+      .titleIcon{
+        width: 5px;
+        height: 20px;
+        background-color: #0EFCFF;
         position: absolute;
-        top: 120px;
-        left: 25px;
-      }
-      .brightness{
-        width: 250px;
-        display: flex;
-        justify-content: space-between;
-        color: #909399;
-        font-size: 14px;
+        left: 20px;
+        top: 16px;
       }
     }
+    .chartBox{
+      width: 450px;
+      height: 200px;
+      margin: 20px;
+      position: relative;
+    }
   }
 }
 
-/* ::v-deep是vue3提供的深度选择器，.el-form-item__label是element-plus官方定义的类 */
-/deep/ .el-form-item__label{
-  color: white;
-  font-size: 16px;
+.dataBox{
+  width: 200px;
+  height: 150px;
+  background-color: #283a72;
 }
 
-.el-slider__runway{ // 滑块的进度条颜色
-  background-color: #000000;
-}
 </style>