隧道模型

server/go.mod

@@ -1,8 +1,6 @@
 module server
 
-go 1.22.2
-
-toolchain go1.23.0
+go 1.22.5
 
 require (
 	github.com/aliyun/aliyun-oss-go-sdk v3.0.2+incompatible

server/go.sum

@@ -289,8 +289,6 @@ github.com/redis/go-redis/v9 v9.7.0 h1:HhLSs+B6O021gwzl+locl0zEDnyNkxMtf/Z3NNBMa
 github.com/redis/go-redis/v9 v9.7.0/go.mod h1:f6zhXITC7JUJIlPEiBOTXxJgPLdZcA93GewI7inzyWw=
 github.com/remyoudompheng/bigfft v0.0.0-20230129092748-24d4a6f8daec h1:W09IVJc94icq4NjY3clb7Lk8O1qJ8BdBEF8z0ibU0rE=
 github.com/remyoudompheng/bigfft v0.0.0-20230129092748-24d4a6f8daec/go.mod h1:qqbHyh8v60DhA7CoWK5oRCqLrMHRGoxYCSS9EjAz6Eo=
-github.com/robfig/cron v1.2.0 h1:ZjScXvvxeQ63Dbyxy76Fj3AT3Ut0aKsyd2/tl3DTMuQ=
-github.com/robfig/cron v1.2.0/go.mod h1:JGuDeoQd7Z6yL4zQhZ3OPEVHB7fL6Ka6skscFHfmt2k=
 github.com/robfig/cron/v3 v3.0.1 h1:WdRxkvbJztn8LMz/QEvLN5sBU+xKpSqwwUO1Pjr4qDs=
 github.com/robfig/cron/v3 v3.0.1/go.mod h1:eQICP3HwyT7UooqI/z+Ov+PtYAWygg1TEWWzGIFLtro=
 github.com/rogpeppe/go-internal v1.3.0/go.mod h1:M8bDsm7K2OlrFYOpmOWEs/qY81heoFRclV5y23lUDJ4=

web/.env.development

@@ -3,9 +3,9 @@ VITE_CLI_PORT = 8080
 VITE_SERVER_PORT = 8888
 VITE_BASE_API = /api
 VITE_FILE_API = /api
-//VITE_BASE_PATH = http://192.168.110.218
+VITE_BASE_PATH = http://192.168.110.218
 //VITE_BASE_PATH = http://192.168.110.214
-VITE_BASE_PATH = http://127.0.0.1
+//VITE_BASE_PATH = http://127.0.0.1
 VITE_POSITION = close
 VITE_EDITOR = vscode
 // VITE_EDITOR = webstorm 如果使用webstorm开发且要使用dom定位到代码行功能 请先自定添加 webstorm到环境变量 再将VITE_EDITOR值修改为webstorm

web/package.json

@@ -28,6 +28,7 @@
         "less-loader": "^12.2.0",
         "marked": "4.3.0",
         "mitt": "^3.0.1",
+        "moment": "^2.30.1",
         "nprogress": "^0.2.0",
         "path": "^0.12.7",
         "pinia": "^2.1.4",

web/src/main.js

@@ -15,6 +15,7 @@ import { store } from '@/pinia'
 import App from './App.vue'
 import { initDom } from './utils/positionToCode'
 import TlbsMap from 'tlbs-map-vue';
+import moment from 'moment'
 
 initDom()
 /**
@@ -32,12 +33,11 @@ Nprogress.start()
 
 const app = createApp(App)
 app.config.productionTip = false
-
 app
   .use(run)
   .use(store)
   .use(auth)
-  .use(router).use(TlbsMap)
+  .use(router).use(TlbsMap).use(moment)
   .mount('#app')
 
 export default app

web/src/pinia/modules/screen.js

@@ -1,10 +1,11 @@
 import { defineStore } from 'pinia'
-import { reactive } from 'vue'
+import { reactive, ref } from 'vue'
 
 export const useScreenStore = defineStore('screen',() => {
     const controllerData = reactive({})
     let placeList = []
     const tunnelList = reactive([])
+    const currentTunnel = ref({})
 
     const setController = (val) => {
         Object.assign(controllerData, val)
@@ -12,23 +13,27 @@ export const useScreenStore = defineStore('screen',() => {
 
     const setTunnelList = (val) => {
         placeList.length = 0;
-        val.forEach(item => {
-            console.log(item.latitude)
-            console.log(item.longitude)
+        val.list.forEach(item => {
             placeList.push({
-                styleId: 'marker',
+                styleId: item.ID,
                 position: { lat: item.latitude, lng: item.longitude } ,
             })
         })
-        console.log(placeList)
         tunnelList.length = 0
-        tunnelList.push(...val)
+        tunnelList.push(...val.list)
+    }
+
+    const setCurrentTunnel = (val) => {
+        currentTunnel.value = val
+        console.log('执行2', currentTunnel.value)
     }
     return {
         controllerData,
         setController,
         tunnelList,
         setTunnelList,
-        placeList
+        placeList,
+        currentTunnel,
+        setCurrentTunnel
     }
 })

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

@@ -7,53 +7,49 @@
 
 <script setup>
 import * as echarts from 'echarts';
-import { onMounted } from 'vue'
+import { onMounted, watch } from 'vue'
+import { useScreenStore } from "@/pinia/modules/screen";
+const useScreen = useScreenStore()
 
 onMounted(() => {
+  setTimeout(function (){
+    const list  = useScreen.tunnelList[0].envData
+    chartLoading(list)
+  }, 1000)
+})
+
+const chartLoading = (list) => {
   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'
+          color: '#ffffff'
         }
       },
-      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'],
+    legend: {
+      data: [
+        // '待下发','处置中','已完成'
+        {
+          name: '温度',
+          textStyle: {
+            color: '#0EFCFF'          // 图例文字颜色
+          }
+        },
+        {
+          name: '湿度',
+          textStyle: {
+            color: '#0EFCFF'          // 图例文字颜色
+          }
+        }
+      ],
+    },
+    xAxis: {
+      type: 'time', // 使用时间类型的x轴
+      boundaryGap: false,
       axisLine: {
         show:true,
         lineStyle:{
@@ -62,44 +58,48 @@ onMounted(() => {
           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']
-          }
+    },
+    yAxis: {
+      axisLine: {
+        show:true,
+        lineStyle:{
+          color:'#0EFCFF',
+          width:1,
+          type:'solid'
+        }
+      },
+      splitLine: {
+        lineStyle: {
+          color: ['#0EFCFF']
         }
       }
-    ],
+    },
     series: [
       {
-        data: [31, 23, 20, 74, 50, 70, 15],
+        name: '温度',
         type: 'line',
-        name: '温度'
+        data: list.map(item => [new Date(item.CreatedAt).getTime(), item.temperature])
       },
       {
-        data: [20, 50, 30, 25, 60, 17, 31],
+        name: '湿度',
         type: 'line',
-        name: '湿度'
+        data: list.map(item => [new Date(item.CreatedAt).getTime(), item.humidity])
       }
-    ]
+    ],
   })
+}
+
+// 监听 ref 数据变化
+watch(() => useScreen.currentTunnel, (newValue, oldValue) => {
+  yourMethod(newValue) // 调用你的方法
 })
 
+const yourMethod = (value) => {
+  console.log('Method called with:', value)
+  chartLoading(value.envData)
+  // 你的逻辑代码
+}
+
 </script>
 
 <style scoped lang="less">
@@ -123,10 +123,10 @@ onMounted(() => {
     color: #0EFCFF;
   }
   .environment{
-    width: 360px;
+    width: 400px;
     height: 250px;
     position: absolute;
-    left: 20px;
+    left: 5px;
     top: 20px;
   }
 

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

@@ -7,53 +7,43 @@
 
 <script setup>
 import * as echarts from 'echarts';
-import { onMounted } from 'vue'
+import { onMounted, watch } from 'vue'
+import { useScreenStore } from "@/pinia/modules/screen";
+const useScreen = useScreenStore()
 
 onMounted(() => {
+  setTimeout(function (){
+    const list  = useScreen.tunnelList[0].envData
+    chartLoading(list)
+  },1000)
+})
+
+const chartLoading = (val) => {
+  //time: moment(item.CreatedAt).format('HH:mm')
   let myChart = echarts.init(document.getElementById('light'));
   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'
+          color: '#ffffff'
         }
       },
-      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'],
+    legend: {
+      data: [
+        {
+          name: '光照度',
+          textStyle: {
+            color: '#0EFCFF'          // 图例文字颜色
+          }
+        },
+      ]
+    },
+    xAxis: {
+      type: 'time', // 使用时间类型的x轴
+      boundaryGap: false,
       axisLine: {
         show:true,
         lineStyle:{
@@ -62,49 +52,47 @@ onMounted(() => {
           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']
-          }
+    },
+    yAxis: {
+      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],
+        name: '光照度',
         type: 'line',
-        name: '湿度'
+        data: val.map(item => [new Date(item.CreatedAt).getTime(), item.illuminance])
       }
-    ]
+    ],
   })
+}
+
+// 监听 ref 数据变化
+watch(() => useScreen.currentTunnel, (newValue, oldValue) => {
+  yourMethod(newValue) // 调用你的方法
 })
 
+const yourMethod = (value) => {
+  console.log('Method called with:', value)
+  chartLoading(value.envData)
+  // 你的逻辑代码
+}
 </script>
 
 <style scoped lang="less">
 .imgStyle{
-  width: 400px;
+  width: 450px;
   height: 250px;
 }
 .titleIcon{
@@ -123,7 +111,7 @@ onMounted(() => {
   color: #0EFCFF;
 }
 .environment{
-  width: 360px;
+  width: 450px;
   height: 250px;
   position: absolute;
   left: 20px;

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

@@ -14,20 +14,28 @@
         :geometries="geometries"
         :styles="styles"
         :options="options"
+        @click="openInfo"
     />
-    <div class="control-container">
-      <button @click.stop="getLayerInstance">
-        打印点标记实例
-      </button>
-    </div>
   </tlbs-map>
+  <el-dialog v-model="dialogVisible" width="250px" title="隧道信息" align-center>
+    <el-form>
+      <el-form-item label="名称：">
+        <el-text size="large">{{dialogData.name}}</el-text>
+      </el-form-item>
+      <el-form-item label="类型：">
+        <el-text size="large">{{dialogData.switchType}}</el-text>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="callParentMethod">查看数据</el-button>
+      </el-form-item>
+    </el-form>
+  </el-dialog>
 </template>
 
 <script>
-import { defineComponent, ref} from 'vue-demi';
+import { defineComponent, ref } from 'vue-demi';
 import {useScreenStore} from "@/pinia/modules/screen";
 const useScreen = useScreenStore()
-
 export default defineComponent({
   name: 'MarkerDemo',
   setup() {
@@ -36,9 +44,10 @@ export default defineComponent({
     const center = ref({ lat: 28.7052848, lng: 113.5759597 });
     const zoom = ref(10);
     const geometries = ref(useScreen.placeList)
+    const dialogVisible = ref(false)
+    const dialogData = ref({})
     const onClick = (e) => {
       console.log(e.latLng);
-      console.log(useScreen.tunnelList)
       // geometries.value = [
       //   {
       //     styleId: 'marker',
@@ -61,7 +70,20 @@ export default defineComponent({
       // 可以获取点标记实例，调用点标记实例方法
       console.log(markerRef.value.marker);
     };
-
+    const openInfo = (e) => {
+      dialogVisible.value = true
+      const id = e.geometry.styleId
+      const list = useScreen.tunnelList
+      list.forEach(item => {
+        if (item.ID === id) {
+          console.log(item)
+          dialogData.value = item
+        }
+      })
+    }
+    const callParentMethod = () => {
+      useScreen.setCurrentTunnel(dialogData.value)
+    }
     return {
       center,
       zoom,
@@ -88,6 +110,10 @@ export default defineComponent({
         minZoom: 5,
         maxZoom: 15,
       },
+      openInfo,
+      dialogVisible,
+      dialogData,
+      callParentMethod,
     };
   },
 });
@@ -98,4 +124,10 @@ export default defineComponent({
   width: 1150px;
   height: 800px;
 }
+
+.infoDialog{
+  width: 300px;
+  height: 100px;
+
+}
 </style>

web/src/view/screen/dataScreen.vue

@@ -34,34 +34,34 @@
       </el-col>
       <el-col :span="14" style="display: flex;justify-content: center">
         <div class="centerBox">
-          <Map/>
+          <Map @call-parent="parentMethod"/>
         </div>
       </el-col>
       <el-col :span="5" class="rightBox">
         <div style="height: 20px"></div>
         <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"-->
-<!--          />-->
+          <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 50px;">
             <span>低</span>
             <span>中</span>
             <span>高</span>
           </div>
-<!--          <el-slider-->
-<!--              v-model="transparencyTwo"-->
-<!--              :step="50"-->
-<!--              show-stops-->
-<!--              :show-tooltip="false"-->
-<!--              class="panel-slider2"-->
-<!--              @change="changeTransparencyTwo"-->
-<!--          />-->
+          <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 50px;">
             <span>低</span>
             <span>中</span>
@@ -91,22 +91,37 @@ import warn from '@/assets/main_bottopm_top2.png'
 import Map from './components/map.vue'
 import warnTitle from '@/assets/warnTitle.png'
 import lightChart from './components/lightChart.vue'
-import { queryAllTunnels } from '@/api/tunnel'
+import { queryTunnelList } from '@/api/tunnel'
 import { reactive, onMounted } from 'vue'
 import {useScreenStore} from "@/pinia/modules/screen";
 const useScreen = useScreenStore()
 
 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'},
+  {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 condition = {
+  pageInfo: {
+    page: 1,
+    pageSize: 1000
+  },
+  name: '',
+  regionId: 0,
+  userId: 1
+}
 const jumpScreen = (type) => {
   console.log(type)
 }
+
+const parentMethod = (e) => {
+  console.log('子组件调用了')
+  console.log(e)
+}
 onMounted(() => {
-  queryAllTunnels().then(res => {
+  queryTunnelList(condition).then(res => {
     if (res.code === 0) {
       useScreen.setTunnelList(res.data)
     }
@@ -201,7 +216,7 @@ onMounted(() => {
     top: 16px;
   }
   .chartBox{
-    width: 400px;
+    width: 450px;
     height: 250px;
     margin: 20px;
     position: relative;