Home Explore Help
Register Sign In
xu
/
lc_tunnel
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

隧道模型

2545307760@qq.com 7 months ago
parent
c03492fbd5
commit
5884457b80
6 changed files with 213 additions and 84 deletions
Unified View Show Diff Stats
  1. 1 0
      web/index.html
  2. BIN
      web/public/隧道1.glb
  3. 11 6
      web/src/view/admin/dataDashboard/dataDashboard.vue
  4. 134 0
      web/src/view/screen/components/lightChart.vue
  5. 24 73
      web/src/view/screen/components/map.vue
  6. 43 5
      web/src/view/screen/dataScreen.vue

+ 1 - 0
web/index.html
View File 

@@ -8,6 +8,7 @@
 
     <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>
 
     <title></title>
 
+    <script src="https://map.qq.com/api/gljs?v=1.exp&key=3SVBZ-6MYYZ-Q75X5-7YN43-BMIBZ-YABND"></script>
 
 </head>
 
 </head>
 
 
 
 <body>
 
 <body>

BIN
web/public/隧道1.glb
View File


+ 11 - 6
web/src/view/admin/dataDashboard/dataDashboard.vue
View File 

@@ -162,14 +162,19 @@ const loadModel = () => {
 
   const loader = new GLTFLoader();
 
   const loader = new GLTFLoader();
 
   loader.load('../../public/隧道1.glb', function (gltf){
 
   loader.load('../../public/隧道1.glb', function (gltf){
 
       let object = gltf.scene
 
       let object = gltf.scene
 
-      console.log(gltf.scene)
 
-      materialOne = object.children[0].children[3].material
 
-      materialTwo = object.children[19].children[3].material
 
+      console.log(object.children)
 
+      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文件包含的模型数据
 
       //gltf.scene获取gltf文件包含的模型数据
 
       scene.add(gltf.scene)
 
       scene.add(gltf.scene)
 
     }, function (xhr) {
 
     }, function (xhr) {
 
         // 加载进度回调
 
         // 加载进度回调
 
-        console.log((xhr.loaded / xhr.total * 100) + '% loaded');
 
+        // console.log((xhr.loaded / xhr.total * 100) + '% loaded');
 
       }, function (error) {
 
       }, function (error) {
 
         // 加载错误回调
 
         // 加载错误回调
 
         // console.error('An error happened', error);
 
         // console.error('An error happened', error);
 
@@ -338,7 +343,7 @@ onUnmounted(() => {
 
 }
 
 }
 
 .screen{
 
 .screen{
 
   width: 100%;
 
   width: 100%;
 
-  height: 900px;
 
+  height: 970px;
 
   //background-image: url("@/assets/back.jpeg");
 
   //background-image: url("@/assets/back.jpeg");
 
   background-size:100% 100%;
 
   background-size:100% 100%;
 
   background: #1d2b56 url("@/assets/line.png");
 
   background: #1d2b56 url("@/assets/line.png");
 
@@ -362,7 +367,7 @@ onUnmounted(() => {
 
   }
 
   }
 
   .coreBox{
 
   .coreBox{
 
     width: 100%;
 
     width: 100%;
 
-    height: 800px;
 
+    height: 900px;
 
     margin-top: 20px;
 
     margin-top: 20px;
 
     position: relative;
 
     position: relative;
 
     .three-container {
 
     .three-container {

+ 134 - 0
web/src/view/screen/components/lightChart.vue
View File 

@@ -0,0 +1,134 @@
 
+<template>
 
+  <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="less">
 
+.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;
 
+}
 
+.environment{
 
+  width: 400px;
 
+  height: 300px;
 
+  position: absolute;
 
+  left: 20px;
 
+  top: 20px;
 
+}
 
+
 
+
 
+</style>

+ 24 - 73
web/src/view/screen/components/map.vue
View File 

@@ -1,88 +1,39 @@
 
+//html
 
 <template>
 
 <template>
 
-  <div ref="mapContainer" class="map-container"></div>
 
+  <div id="container" style="overflow: hidden;"></div>
 
 </template>
 
 </template>
 
 
 
+
 
+
 
 <script setup>
 
 <script setup>
 
-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) {
 
-//     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,
 
-//     styles: mapStyle
 
-//   });
 
-// };
 
-//
 
-// 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);
 
-// };
 
+import { onMounted, reactive, ref , watch } from 'vue'
 
 
 
-const mapContainer = ref(null)
 
-let map = null
 
-let styleId = 'custom-style' // 自定义样式ID
 
-const props = reactive({
 
-  bgColor: {
 
-    type: String,
 
-    default: '#f0f0f0' // 默认背景色
 
-  }
 
-})
 
-// 初始化地图
 
+var center = ref(null)
 
+// 地图初始化
 
 const initMap = () => {
 
 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] // 应用自定义样式
 
-  })
 
+  //定义地图中心点坐标
 
+  center.value = new TMap.LatLng(30.589184, 114.29689)
 
+  //定义map变量，调用 TMap.Map() 构造函数创建地图
 
+
 
+  new TMap.Map(document.getElementById('container'), {
 
+    center: center.value,//设置地图中心点坐标
 
+    zoom: 7,   //设置地图缩放级别
 
+    mapStyleId: 'style1', //设置地图样式
 
+  });
 
 }
 
 }
 
 
 
-onMounted(() => {
 
-  // loadTMapSDK();
 
+onMounted(()=>{
 
   initMap()
 
   initMap()
 
-});
 
+})
 
+
 
 </script>
 
 </script>
 
 
 
-<style scoped>
 
-.map-container {
 
+
 
+<style>
 
+#container {
 
+  /*地图(容器)显示大小*/
 
   width: 100%;
 
   width: 100%;
 
-  height: 820px;
 
+  height: 100%;
 
 }
 
 }
 
 </style>
 
 </style>

+ 43 - 5
web/src/view/screen/dataScreen.vue
View File 

@@ -11,12 +11,13 @@
 
         <span>模型</span>
 
         <span>模型</span>
 
       </div>
 
       </div>
 
     </div>
 
     </div>
 
+    <div style="height: 10px"></div>
 
     <div class="substrate">
 
     <div class="substrate">
 
       <Map/>
 
       <Map/>
 
     </div>
 
     </div>
 
     <div class="upperLevel">
 
     <div class="upperLevel">
 
       <el-row>
 
       <el-row>
 
-        <el-col :span="6">
 
+        <el-col :span="6" style="height: 900px;background-color: rgba(45,64,125,0.5);">
 
           <div class="deviceBox">
 
           <div class="deviceBox">
 
             <img src="@/assets/main_top_left.png" alt=""/>
 
             <img src="@/assets/main_top_left.png" alt=""/>
 
             <div class="titleIcon"></div>
 
             <div class="titleIcon"></div>
 
@@ -32,8 +33,15 @@
 
             <Chart/>
 
             <Chart/>
 
           </div>
 
           </div>
 
         </el-col>
 
         </el-col>
 
-        <el-col :span="6" :offset="12">
 
-          <img :src="warn" alt="" style="width: 95%;height: 300px;">
 
+        <el-col :span="6" :offset="12" class="rightBox">
 
+          <div class="chartBox">
 
+            <lightChart/>
 
+          </div>
 
+          <div class="warnBox">
 
+            <img :src="warn" alt="" class="warnBoxExternal" />
 
+            <img :src="warnTitle" alt="" class="warnBoxTitle"/>
 
+            <span>警告列表</span>
 
+          </div>
 
         </el-col>
 
         </el-col>
 
       </el-row>
 
       </el-row>
 
     </div>
 
     </div>
 
@@ -50,7 +58,8 @@ import singleLamp from "@/assets/icons/singleLamp.png"
 
 import Chart from "./components/chart.vue";
 
 import Chart from "./components/chart.vue";
 
 import warn from '@/assets/main_bottopm_top2.png'
 
 import warn from '@/assets/main_bottopm_top2.png'
 
 import Map from './components/map.vue'
 
 import Map from './components/map.vue'
 
-// import warnTitle from '@/assets/warnTitle.png'
 
+import warnTitle from '@/assets/warnTitle.png'
 
+import lightChart from './components/lightChart.vue'
 
 import { reactive } from 'vue'
 
 import { reactive } from 'vue'
 
 
 
 const deviceList = reactive([
 
 const deviceList = reactive([
 
@@ -168,11 +177,40 @@ const jumpScreen = (type) => {
 
     }
 
     }
 
     .chartBox{
 
     .chartBox{
 
       width: 450px;
 
       width: 450px;
 
-      height: 200px;
 
+      height: 300px;
 
       margin: 20px;
 
       margin: 20px;
 
       position: relative;
 
       position: relative;
 
       pointer-events: auto;
 
       pointer-events: auto;
 
     }
 
     }
 
+    .rightBox{
 
+      height: 900px;
 
+      background-color: rgba(45,64,125,0.5);
 
+      .warnBox{
 
+        position: relative;
 
+        width: 90%;
 
+        height: 300px;
 
+        margin-top: 20px;
 
+        .warnBoxExternal{
 
+          width: 100%;
 
+          height: 300px;
 
+          padding-left: 5%
 
+        }
 
+        .warnBoxTitle{
 
+          width: 200px;
 
+          height: 35px;
 
+          position: absolute;
 
+          left: 40px;
 
+          top: 30px;
 
+        }
 
+        span{
 
+          color:#ffffff;
 
+          font-size: 18px;
 
+          position: absolute;
 
+          left: 70px;
 
+          top: 37px;
 
+        }
 
+      }
 
+    }
 
   }
 
   }
 
 }
 
 }