数据

web/src/pinia/modules/coordinate.js

@@ -1,13 +1,26 @@
 import { defineStore } from 'pinia'
 import { ref } from 'vue'
 
-export const useCoordinateStore = defineStore('screen', () => {
-  const place = ref({ lat: 28.7052848, lng: 113.5759597 })
+export const useCoordinateStore = defineStore('coordinate', () => {
+  const place = ref({})
+  const modifyPlace = ref({})
   const changePlace = (val) => {
     place.value = val
+    // console.log('改变的值', place.value)
+  }
+  const changeModifyPlace = (val) => {
+    modifyPlace.value = val
+  }
+  const addPlace = ref({ lat: 28.7052848, lng: 113.5759597 })
+  const changeAddPlace = (val) => {
+    addPlace.value = val
   }
   return {
     place,
     changePlace,
+    modifyPlace,
+    changeModifyPlace,
+    addPlace,
+    changeAddPlace
   }
 })

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

@@ -0,0 +1,99 @@
+<template>
+  <el-form-item label="经纬度：">
+    <el-cascader
+      v-model="selectedOptions"
+      placeholder="请选择地区"
+      size="default"
+      :options="regionData"
+      @change="handleChange"
+    />
+  </el-form-item>
+  <div style="width: 600px; height: 600px">
+    <tlbs-map
+        ref="mapRef"
+        api-key="3SVBZ-6MYYZ-Q75X5-7YN43-BMIBZ-YABND"
+        :center="center"
+        :zoom="zoom"
+        :control="control"
+        class="mapBox"
+        :options="mapOption"
+        @click="onClick"
+        @map_inited="onMapInited"
+    >
+      <tlbs-multi-marker
+          ref="markerRef"
+          :geometries="geometries"
+          :styles="styles"
+          @click="openInfo"
+      />
+    </tlbs-map>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+// 地区选择
+import { regionData, codeToText } from 'element-china-area-data'
+import { jsonp } from 'vue-jsonp'
+import { useCoordinateStore } from '@/pinia/modules/coordinate'
+const useCoordinate = useCoordinateStore()
+const handleChange = async(value) => {
+  const province = codeToText[value[0]] // 省-->
+  const city = codeToText[value[1]] // 市-->
+  const district = codeToText[value[2]] // 区-->
+  const fullAddress = `${province}${city}${district}`
+  if (value.length < 3) {
+    console.log('请选择完整的省市区')
+    return
+  }
+  // 3SVBZ-6MYYZ-Q75X5-7YN43-BMIBZ-YABND
+  jsonp('https://apis.map.qq.com/ws/geocoder/v1/?address=', {
+    output: 'jsonp',
+    address: fullAddress,
+    key: '3SVBZ-6MYYZ-Q75X5-7YN43-BMIBZ-YABND'
+  }).then(res => {
+    center.value = res.result.location
+  }).catch(err => {
+    console.log('地图错误：', err)
+  })
+}
+const openInfo = (val) => {
+}
+const selectedOptions = ref('')
+const control = {
+  scale: {},
+  zoom: {
+    position: 'topRight',
+  },
+}
+
+const styles = {
+  marker: {
+    width: 20,
+    height: 30,
+    anchor: { x: 10, y: 30 },
+  },
+}
+
+// 地图
+const mapRef = ref(null)
+const markerRef = ref(null)
+const center = ref({ lat: 28.7052848, lng: 113.5759597 })
+const zoom = ref(10)
+const mapOption = ref({
+  mapStyleId: 'style1'
+})
+const geometries = ref([{ styleId: 'marker', position: { lat: 28.7052848, lng: 113.5759597 }}])
+const onClick = (e) => {
+  geometries.value = [{ styleId: 'marker', position: { lat: e.latLng.lat, lng: e.latLng.lng }}]
+  useCoordinate.changeAddPlace({ lat: e.latLng.lat, lng: e.latLng.lng })
+}
+
+const onMapInited = () => {
+  // 地图加载完成后，可以获取地图实例、点标记实例，调用地图实例、点标记实例方法
+  // console.log(mapRef.value.map)
+  // console.log(markerRef.value.marker)
+}
+
+</script>
+

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

@@ -1,5 +1,5 @@
 <template>
-  <el-form-item label="地区：">
+  <el-form-item label="经纬度：">
     <el-cascader
       v-model="selectedOptions"
       placeholder="请选择地区"
@@ -23,14 +23,13 @@
       ref="markerRef"
       :geometries="geometries"
       :styles="styles"
-      :options="options"
       @click="openInfo"
     />
   </tlbs-map>
 </template>
 
 <script setup>
-import { ref } from 'vue'
+import { ref, watch } from 'vue'
 // 地区选择
 import { regionData, codeToText } from 'element-china-area-data'
 import { jsonp } from 'vue-jsonp'
@@ -41,7 +40,6 @@ const handleChange = async(value) => {
   const city = codeToText[value[1]] // 市-->
   const district = codeToText[value[2]] // 区-->
   const fullAddress = `${province}${city}${district}`
-  console.log(fullAddress)
   if (value.length < 3) {
     console.log('请选择完整的省市区')
     return
@@ -50,13 +48,15 @@ const handleChange = async(value) => {
   jsonp('https://apis.map.qq.com/ws/geocoder/v1/?address=', {
     output: 'jsonp',
     address: fullAddress,
-    key: 'GDFBZ-AXD6B-2TPUJ-JBLEX-STUGE-DGBZH'
+    key: '3SVBZ-6MYYZ-Q75X5-7YN43-BMIBZ-YABND'
   }).then(res => {
-    console.log('返回经纬度', res.result.location)
+    center.value = res.result.location
   }).catch(err => {
     console.log('地图错误：', err)
   })
 }
+const openInfo = (val) => {
+}
 const selectedOptions = ref('')
 const control = {
   scale: {},
@@ -81,19 +81,10 @@ const zoom = ref(10)
 const mapOption = ref({
   mapStyleId: 'style1'
 })
-const geometries = ref([{ styleId: 'marker', position: { lat: 39.91799, lng: 116.397027 }}])
+const geometries = ref([{ styleId: 'marker', position: useCoordinate.place }])
 const onClick = (e) => {
-  console.log(e.latLng)
-  // geometries.value = [
-  //   {
-  //     styleId: 'marker',
-  //     position: { lat: 28.7052848, lng: 113.5759597 },
-  //   },
-  //   {
-  //     styleId: 'marker',
-  //     position: { lat: e.latLng.lat, lng: e.latLng.lng },
-  //   },
-  // ]
+  geometries.value = [{ styleId: 'marker', position: { lat: e.latLng.lat, lng: e.latLng.lng }}]
+  useCoordinate.changeModifyPlace({ lat: e.latLng.lat, lng: e.latLng.lng })
 }
 
 const onMapInited = () => {
@@ -102,5 +93,10 @@ const onMapInited = () => {
   // console.log(markerRef.value.marker)
 }
 
+watch(() => useCoordinate.place, () => {
+  center.value = useCoordinate.place
+  geometries.value = [{ styleId: 'marker', position: useCoordinate.place }]
+})
+
 </script>
 

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

@@ -152,11 +152,9 @@
       </div>
     </el-main>
     <!--    隧道添加-->
-    <el-dialog
+    <el-drawer
       v-model="tunnelAddDialog"
       title="隧道添加"
-      width="500"
-      align-center
     >
       <el-form
         v-model="tunnelData"
@@ -197,6 +195,7 @@
             style="width: 200px;"
           />
         </el-form-item>
+        <add-area/>
       </el-form>
       <template #footer>
         <div class="dialog-footer">
@@ -209,13 +208,11 @@
           </el-button>
         </div>
       </template>
-    </el-dialog>
+    </el-drawer>
     <!--    隧道修改-->
     <el-drawer
       v-model="tunnelEditDialog"
       title="隧道修改"
-      width="500"
-      align-center
     >
       <el-form
         v-model="tunnelData"
@@ -330,7 +327,7 @@
         >
           <div v-if="tunnelTimeData.switchType === '四路控制器'">
             <div
-              v-for="(item, index) in tunnelTimeData.devices"
+              v-for="(item) in tunnelTimeData.devices"
               key="index"
               style="margin: 10px 0"
             >
@@ -444,7 +441,8 @@
           name="2"
         >
           <div
-            v-for="[sn, data] in Array.from(lightBySn)"
+            v-for="
+              [sn, data] in Array.from(lightBySn)"
             :id="'chart-' + sn"
             :key="sn"
             style="width: 600px; height: 400px; margin: 10px;"
@@ -471,6 +469,7 @@ import { nextTick } from 'vue'
 import { deviceSwitch, generateDeviceFile } from '@/api/device'
 import * as echarts from 'echarts'
 import Area from './components/area.vue'
+import addArea from './components/addArea.vue'
 import { useUserStore } from '@/pinia/modules/user'
 const userData = useUserStore()
 const userInfo = userData.userInfo
@@ -539,11 +538,16 @@ const tunnelData = ref({
   name: '',
   regionId: undefined,
   tunnelSn: '',
-  switchType: ''
+  switchType: '',
+  latitude: '',
+  longitude: ''
 })
 
 const tunnelAdd = async() => {
   tunnelData.value.id = 0
+  tunnelData.value.latitude = useCoordinate.addPlace.lat
+  tunnelData.value.longitude = useCoordinate.addPlace.lng
+  console.log('数据', tunnelData.value)
   await createTunnel(tunnelData.value).then(res => {
     if (res.code === 0) {
       ElMessage.success('添加成功')
@@ -559,7 +563,6 @@ const tunnelEditDialog = ref(false)
 
 const openTunnelChange = (row) => {
   tunnelData.value = row
-  console.log(row)
   const place = {
     lat: row.latitude,
     lng: row.longitude
@@ -569,6 +572,8 @@ const openTunnelChange = (row) => {
 }
 
 const tunnelEdit = async() => {
+  tunnelData.value.latitude = useCoordinate.modifyPlace.lat
+  tunnelData.value.longitude = useCoordinate.modifyPlace.lng
   await updateTunnel(tunnelData.value).then(res => {
     if (res.code === 0) {
       ElMessage.success('修改成功')

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

@@ -108,7 +108,7 @@
 </template>
 
 <script>
-import { defineComponent, ref, reactive } from 'vue-demi'
+import { defineComponent, ref, reactive, onMounted } from 'vue-demi'
 import { useScreenStore } from '@/pinia/modules/screen'
 import { updateTunnelLamp } from '@/api/tunnel'
 import { ElMessage } from 'element-plus'
@@ -119,7 +119,7 @@ export default defineComponent({
   setup() {
     const mapRef = ref(null)
     const markerRef = ref(null)
-    const center = ref()
+    const center = ref({ lat: 28.7052848, lng: 113.5759597 })
     const zoom = ref(10)
     const geometries = ref(useScreen.placeList)
     const dialogVisible = ref(false)
@@ -129,16 +129,6 @@ export default defineComponent({
     })
     const onClick = (e) => {
       console.log(e.latLng)
-      // geometries.value = [
-      //   {
-      //     styleId: 'marker',
-      //     position: { lat: 28.7052848, lng: 113.5759597 },
-      //   },
-      //   {
-      //     styleId: 'marker',
-      //     position: { lat: e.latLng.lat, lng: e.latLng.lng },
-      //   },
-      // ]
     }
 
     const onMapInited = () => {
@@ -166,10 +156,6 @@ export default defineComponent({
       useScreen.setCurrentTunnel(dialogData.value)
       dialogVisible.value = false
     }
-    // const viewModel = () => {
-    //   useScreen.setScreenType('pattern')
-    //   dialogVisible.value = false
-    // }
     // 亮度调节
     const transparency = ref(0)
     const transparencyTwo = ref(0)
@@ -254,6 +240,11 @@ export default defineComponent({
         }
       })
     }
+    onMounted(() => {
+      setTimeout(function() {
+        center.value = useScreen.placeList[0].position
+      }, 500)
+    })
     return {
       center,
       zoom,