数据

web/package.json

@@ -20,6 +20,7 @@
         "axios": "^1.4.0",
         "core-js": "^3.31.1",
         "echarts": "5.4.3",
+        "element-china-area-data": "^6.1.0",
         "element-plus": "^2.3.8",
         "highlight.js": "^11.8.0",
         "js-cookie": "^3.0.5",
@@ -42,6 +43,7 @@
         "tlbs-map-vue": "^1.3.1",
         "vue": "^3.4.21",
         "vue-demi": "^0.14.10",
+        "vue-jsonp": "^2.1.0",
         "vue-router": "^4.3.2",
         "vuedraggable": "^4.1.0"
     },

web/src/pinia/modules/coordinate.js

@@ -0,0 +1,13 @@
+import { defineStore } from 'pinia'
+import { ref } from 'vue'
+
+export const useCoordinateStore = defineStore('screen', () => {
+  const place = ref({ lat: 28.7052848, lng: 113.5759597 })
+  const changePlace = (val) => {
+    place.value = val
+  }
+  return {
+    place,
+    changePlace,
+  }
+})

web/src/pinia/modules/screen.js

@@ -21,13 +21,6 @@ export const useScreenStore = defineStore('screen', () => {
     })
     tunnelList.length = 0
     tunnelList.push(...val.list)
-    // const deviceList = val.list[0].devices
-    // powerList.length = 0
-    // deviceList.forEach(item => {
-    //   if (item.genre === 7) {
-    //     powerList.push(item)
-    //   }
-    // })
   }
 
   const setCurrentTunnel = (val) => {

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

@@ -0,0 +1,106 @@
+<template>
+  <el-form-item label="地区：">
+    <el-cascader
+      v-model="selectedOptions"
+      placeholder="请选择地区"
+      size="default"
+      :options="regionData"
+      @change="handleChange"
+    />
+  </el-form-item>
+  <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"
+      :options="options"
+      @click="openInfo"
+    />
+  </tlbs-map>
+</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}`
+  console.log(fullAddress)
+  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: 'GDFBZ-AXD6B-2TPUJ-JBLEX-STUGE-DGBZH'
+  }).then(res => {
+    console.log('返回经纬度', res.result.location)
+  }).catch(err => {
+    console.log('地图错误：', err)
+  })
+}
+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(useCoordinate.place)
+const zoom = ref(10)
+const mapOption = ref({
+  mapStyleId: 'style1'
+})
+const geometries = ref([{ styleId: 'marker', position: { lat: 39.91799, lng: 116.397027 }}])
+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 = () => {
+  // 地图加载完成后，可以获取地图实例、点标记实例，调用地图实例、点标记实例方法
+  // console.log(mapRef.value.map)
+  // console.log(markerRef.value.marker)
+}
+
+</script>
+

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

@@ -104,14 +104,7 @@
             <el-button
               type="primary"
               size="small"
-              @click="jumpScreen(scope.row)"
-            >
-              大屏
-            </el-button>
-            <el-button
-              type="primary"
-              size="small"
-              @click="tunnelData = scope.row ; tunnelEditDialog = true"
+              @click="openTunnelChange(scope.row)"
             >
               修改
             </el-button>
@@ -218,7 +211,7 @@
       </template>
     </el-dialog>
     <!--    隧道修改-->
-    <el-dialog
+    <el-drawer
       v-model="tunnelEditDialog"
       title="隧道修改"
       width="500"
@@ -263,6 +256,7 @@
             style="width: 200px;"
           />
         </el-form-item>
+        <Area />
       </el-form>
       <template #footer>
         <div class="dialog-footer">
@@ -275,7 +269,7 @@
           </el-button>
         </div>
       </template>
-    </el-dialog>
+    </el-drawer>
     <!--    隧道分配-->
     <el-dialog
       v-model="allocationRegionDialog"
@@ -463,7 +457,6 @@
 
 <script setup>
 import { ref, onMounted } from 'vue'
-import { useScreenStore } from '@/pinia/modules/screen'
 import { queryAllRegions } from '@/api/region'
 import {
   createTunnel,
@@ -477,13 +470,12 @@ import { ElMessage, ElMessageBox } from 'element-plus'
 import { nextTick } from 'vue'
 import { deviceSwitch, generateDeviceFile } from '@/api/device'
 import * as echarts from 'echarts'
+import Area from './components/area.vue'
 import { useUserStore } from '@/pinia/modules/user'
 const userData = useUserStore()
 const userInfo = userData.userInfo
-import { useRouter } from 'vue-router'
-const router = useRouter()
-
-const lampList = [33, 66, 100]
+import { useCoordinateStore } from '@/pinia/modules/coordinate'
+const useCoordinate = useCoordinateStore()
 const searchData = ref({
   pageInfo: {
     page: 1,
@@ -565,6 +557,17 @@ const tunnelAdd = async() => {
 
 const tunnelEditDialog = ref(false)
 
+const openTunnelChange = (row) => {
+  tunnelData.value = row
+  console.log(row)
+  const place = {
+    lat: row.latitude,
+    lng: row.longitude
+  }
+  useCoordinate.changePlace(place)
+  tunnelEditDialog.value = true
+}
+
 const tunnelEdit = async() => {
   await updateTunnel(tunnelData.value).then(res => {
     if (res.code === 0) {
@@ -934,13 +937,6 @@ const switchButton = async(device, relay, index) => {
   })
 }
 
-// 大屏
-const useScreen = useScreenStore()
-const jumpScreen = (row) => {
-  useScreen.setController(row)
-  router.push('/dataDashboard')
-}
-
 onMounted(() => {
   getData()
 })

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

@@ -119,7 +119,7 @@ export default defineComponent({
   setup() {
     const mapRef = ref(null)
     const markerRef = ref(null)
-    const center = ref({ lat: 28.7052848, lng: 113.5759597 })
+    const center = ref()
     const zoom = ref(10)
     const geometries = ref(useScreen.placeList)
     const dialogVisible = ref(false)
@@ -243,7 +243,6 @@ export default defineComponent({
       }
       const lamp1 = option[transparency.value][1]
       const lamp2 = option[transparencyTwo.value][1]
-      console.log(lamp1, lamp2)
       updateTunnelLamp({
         id: lampData.ID,
         tunnelSn: lampData.tunnelSn,