地图编辑器

server/config.yaml

@@ -125,7 +125,7 @@ mysql:
     config: charset=utf8mb4&parseTime=True&loc=Local
     db-name: lc_tunnel
     username: root
-    password: root
+    password: 123456
     path: 127.0.0.1
     engine: ""
     log-mode: error

server/go.mod

@@ -2,7 +2,7 @@ module server
 
 go 1.22.2
 
-toolchain go1.23.0
+//toolchain go1.23.0
 
 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

@@ -5,6 +5,7 @@ VITE_BASE_API = /api
 VITE_FILE_API = /api
 //VITE_BASE_PATH = http://192.168.110.218
 //VITE_BASE_PATH = http://192.168.110.214
+//VITE_BASE_PATH = http://192.168.110.53
 VITE_BASE_PATH = http://127.0.0.1
 VITE_POSITION = close
 VITE_EDITOR = vscode

web/src/pinia/modules/screen.js

@@ -1,34 +1,40 @@
 import { defineStore } from 'pinia'
 import { reactive } from 'vue'
 
-export const useScreenStore = defineStore('screen',() => {
-    const controllerData = reactive({})
-    let placeList = []
-    const tunnelList = reactive([])
+export const useScreenStore = defineStore('screen', () => {
+  const controllerData = reactive({})
+  const placeList = [
+    {
+      styleId: 'marker1',
+      position: { lat: 28.7052848, lng: 113.5759597 },
+    },
+    {
+      styleId: 'marker2',
+      position: { lat: 28.7052848, lng: 113.6759597 },
+    },
+  ]
+  const tunnelList = reactive([])
 
-    const setController = (val) => {
-        Object.assign(controllerData, val)
-    }
+  const setController = (val) => {
+    Object.assign(controllerData, val)
+  }
 
-    const setTunnelList = (val) => {
-        placeList.length = 0;
-        val.forEach(item => {
-            console.log(item.latitude)
-            console.log(item.longitude)
-            placeList.push({
-                styleId: 'marker',
-                position: { lat: item.latitude, lng: item.longitude } ,
-            })
-        })
-        console.log(placeList)
-        tunnelList.length = 0
-        tunnelList.push(...val)
-    }
-    return {
-        controllerData,
-        setController,
-        tunnelList,
-        setTunnelList,
-        placeList
-    }
+  const setTunnelList = (val) => {
+    placeList.length = 0
+    val.forEach(item => {
+      placeList.push({
+        styleId: 'marker',
+        position: { lat: item.latitude, lng: item.longitude },
+      })
+    })
+    tunnelList.length = 0
+    tunnelList.push(...val)
+  }
+  return {
+    controllerData,
+    setController,
+    tunnelList,
+    setTunnelList,
+    placeList
+  }
 })

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

@@ -0,0 +1,15 @@
+<template>
+  <div>
+    <el-button>数据</el-button>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Info',
+}
+</script>
+
+<style scoped>
+
+</style>

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

@@ -1,19 +1,27 @@
 <template>
   <tlbs-map
-      ref="mapRef"
-      api-key="3SVBZ-6MYYZ-Q75X5-7YN43-BMIBZ-YABND"
-      :center="center"
-      :zoom="zoom"
-      :control="control"
-      class="mapBox"
-      @click="onClick"
-      @map_inited="onMapInited"
+    ref="mapRef"
+    api-key="3SVBZ-6MYYZ-Q75X5-7YN43-BMIBZ-YABND"
+    :center="center"
+    :zoom="zoom"
+    :control="control"
+    class="mapBox"
+    @click="onClick"
+    @map_inited="onMapInited"
   >
     <tlbs-multi-marker
-        ref="markerRef"
-        :geometries="geometries"
-        :styles="styles"
-        :options="options"
+      ref="markerRef"
+      :geometries="geometries"
+      :styles="styles"
+      :options="options"
+      @click="openInfo"
+    />
+    <tlbs-info-window
+      ref="infoWindowRef"
+      :visible="showInfoWindow"
+      :position="currentMarker"
+      :content="tunnelContent"
+      @closeclick="closeInfo"
     />
     <div class="control-container">
       <button @click.stop="getLayerInstance">
@@ -24,44 +32,99 @@
 </template>
 
 <script>
-import { defineComponent, ref} from 'vue-demi';
-import {useScreenStore} from "@/pinia/modules/screen";
+import { defineComponent, ref } from 'vue-demi'
+import { useScreenStore } from '@/pinia/modules/screen'
 const useScreen = useScreenStore()
-
 export default defineComponent({
   name: 'MarkerDemo',
   setup() {
-    const mapRef = ref(null);
-    const markerRef = ref(null);
-    const center = ref({ lat: 28.7052848, lng: 113.5759597 });
-    const zoom = ref(10);
-    const geometries = ref(useScreen.placeList)
+    const mapRef = ref(null)
+    const markerRef = ref(null)
+    const center = ref({ lat: 28.7052848, lng: 113.5759597 })
+    const zoom = ref(10)
+    const geometries = ref([
+      {
+        styleId: 3,
+        position: { lat: 28.7052848, lng: 113.5759597 },
+      },
+      {
+        styleId: 4,
+        position: { lat: 28.7052848, lng: 113.6759597 },
+      },
+    ])
+    const showInfoWindow = ref(false)
+    const currentMarker = ref({ lat: 28.7052848, lng: 113.5759597 })
+    const tunnelContent = ref('hello_world')
+    const infoWindowRef = ref(null)
     const onClick = (e) => {
-      console.log(e.latLng);
-      console.log(useScreen.tunnelList)
-      // geometries.value = [
-      //   {
-      //     styleId: 'marker',
-      //     position: { lat: 28.7052848, lng: 113.5759597 } ,
-      //   },
-      //   {
-      //     styleId: 'marker',
-      //     position: { lat: e.latLng.lat, lng: e.latLng.lng } ,
-      //   },
-      // ]
-    };
+      // console.log(e.latLng);
+      // console.log(useScreen.tunnelList)
+    }
 
     const onMapInited = () => {
       // 地图加载完成后，可以获取地图实例、点标记实例，调用地图实例、点标记实例方法
-      console.log(mapRef.value.map);
-      console.log(markerRef.value.marker);
-    };
+      console.log(mapRef.value.map)
+      console.log(markerRef.value.marker)
+    }
 
     const getLayerInstance = () => {
       // 可以获取点标记实例，调用点标记实例方法
-      console.log(markerRef.value.marker);
-    };
-
+      console.log(markerRef.value.marker)
+    }
+    const openInfo = (e) => {
+      currentMarker.value = e.latLng
+      showInfoWindow.value = true
+      const id = e.geometry.styleId
+      const list = useScreen.tunnelList
+      list.forEach(item => {
+        if (id === item.ID) {
+          console.log(item)
+          tunnelContent.value = `
+            <div style="width: 150px;height: 150px;font-size: 25px">
+              <div style="height: 15px"></div>
+              <div style="display: flex;justify-content: space-between;align-items: center">
+                <span style="font-size: 16px">名称：</span>
+                <span style="font-size: 16px">${item.name}</span>
+              </div>
+              <div style="height: 10px"></div>
+              <div style="display: flex;justify-content: space-between;align-items: center">
+                <span>类型：</span>
+                <span>${item.switchType}</span>
+              </div>
+              <div style="height: 15px"></div>
+              <div>
+                <button
+                  @click="openData"
+                  style="width: 150px;height: 25px;background-color: #00afff;color: #ffffff;border: 0;border-radius: 5px"
+                  >
+                  查看数据
+                 </button>
+              </div>
+              <div>
+              <div style="height: 15px"></div>
+                <button
+                  onclick="openModel"
+                  style="width: 150px;height: 25px;background-color: #00afff;color: #ffffff;border: 0;border-radius: 5px">
+                  查看模型
+                 </button>
+              </div>
+            </div>
+          `
+        }
+      })
+      // console.log(useScreen.tunnelList)
+    }
+    const closeInfo = () => {
+      showInfoWindow.value = false
+    }
+    const openData = () => {
+      console.log('数据')
+    }
+    const onContentMounted = () => {
+    }
+    // document.getElementById('data').addEventListener('click',function() {
+    //   alert('绑定事件监听函数')
+    // })
     return {
       center,
       zoom,
@@ -88,14 +151,27 @@ export default defineComponent({
         minZoom: 5,
         maxZoom: 15,
       },
-    };
+      openInfo,
+      showInfoWindow,
+      currentMarker,
+      tunnelContent,
+      infoWindowRef,
+      closeInfo,
+      openData,
+      onContentMounted
+    }
   },
-});
+})
 </script>
 
 <style scoped lang="less">
 .mapBox{
-  width: 1150px;
+  width: 1000px;
   height: 800px;
 }
+.infoBox{
+  width: 200px;
+  height: 60px;
+
+}
 </style>

web/src/view/screen/dataScreen.vue

@@ -1,77 +1,121 @@
 <template>
   <div class="screen">
-    <div style="height: 10px"></div>
+    <div style="height: 10px" />
     <div class="titleImage">
       <el-image :src="titleUrl" />
       <span class="Heading">龙弛智慧隧道系统</span>
-      <div class="titleOption" style="left: 19%" @click="jumpScreen('map')">
+      <div
+        class="titleOption"
+        style="left: 19%"
+        @click="jumpScreen('map')"
+      >
         <span>地图</span>
       </div>
-      <div class="titleOption" style="left: 76%" @click="jumpScreen('model')">
+      <div
+        class="titleOption"
+        style="left: 76%"
+        @click="jumpScreen('model')"
+      >
         <span>模型</span>
       </div>
     </div>
-    <div style="height: 10px"></div>
+    <div style="height: 10px" />
     <el-row>
-      <el-col :span="5" style="height: 900px;">
+      <el-col
+        :span="5"
+        style="height: 900px;"
+      >
         <div class="deviceBox">
-          <img src="@/assets/main_top_left.png" alt=""/>
-          <div class="titleIcon"></div>
+          <img
+            src="@/assets/main_top_left.png"
+            alt=""
+          >
+          <div class="titleIcon" />
           <div class="deviceBox_title">设备汇总</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
+              v-for="item in deviceList"
+              class="deviceOption"
+            >
+              <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>
         <div class="chartBox">
-          <Chart/>
+          <Chart />
         </div>
         <div class="chartBox">
-          <lightChart/>
+          <lightChart />
         </div>
       </el-col>
-      <el-col :span="14" style="display: flex;justify-content: center">
+      <el-col
+        :span="14"
+        style="display: flex;justify-content: center"
+      >
         <div class="centerBox">
-          <Map/>
+          <Map />
         </div>
       </el-col>
-      <el-col :span="5" class="rightBox">
-        <div style="height: 20px"></div>
+      <el-col
+        :span="5"
+        class="rightBox"
+      >
+        <div style="height: 20px" />
         <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 50px;">
+          <!--          <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"-->
-<!--          />-->
-          <div class="brightness" style="margin: 50px 0 0 50px;">
+          <!--          <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>
             <span>高</span>
           </div>
-          <div class="panel-bottom"></div>
+          <div class="panel-bottom" />
         </div>
         <div class="warnBox">
-          <img :src="warn" alt="" class="warnBoxExternal" />
-          <img :src="warnTitle" alt="" class="warnBoxTitle"/>
+          <img
+            :src="warn"
+            alt=""
+            class="warnBoxExternal"
+          >
+          <img
+            :src="warnTitle"
+            alt=""
+            class="warnBoxTitle"
+          >
           <span>警告列表</span>
         </div>
       </el-col>
@@ -82,25 +126,25 @@
 <script setup>
 // 标题图片
 import titleUrl from '@/assets/title_bg.png'
-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 Chart from "./components/chart.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 Chart from './components/chart.vue'
 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 lightChart from './components/lightChart.vue'
 import { queryAllTunnels } from '@/api/tunnel'
 import { reactive, onMounted } from 'vue'
-import {useScreenStore} from "@/pinia/modules/screen";
+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: '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)
@@ -108,6 +152,7 @@ const jumpScreen = (type) => {
 onMounted(() => {
   queryAllTunnels().then(res => {
     if (res.code === 0) {
+      console.log('标点数据',res.data)
       useScreen.setTunnelList(res.data)
     }
   })
@@ -323,7 +368,7 @@ onMounted(() => {
 }
 
 .centerBox{
-  width: 1150px;
+  width: 1000px;
   height: 700px;
   border-radius: 10px;
   margin-top: 20px;