a

src/App.vue

@@ -5,49 +5,56 @@
 import { globalEventBus } from '@/common/eventBus'
 import { Push } from '@/common/push'
 import { areaObj } from "@/store/index.js"
+import { useRouter } from 'vue-router';
+const router=useRouter()
+
+
 const userInfoStore=areaObj()
 userInfoStore.changeUserInfoFn(510521)
 
-// var connection = new Push({
-//   url: 'ws://192.168.1.10:3131', // websocket地址
-//   app_key: 'aaea61749929eb53a4bd75a1474c1d27',
-// });
-// // 假设用户uid为1
-// var uid = 3;
-// // 浏览器监听user-2频道的消息，也就是用户uid为1的用户消息
-// var user_channel = connection.subscribe('user-' + uid);
+var connection = new Push({
+  url: 'wss://chat.lihaink.cn/tts', // websocket地址
+  app_key: 'aaea61749929eb53a4bd75a1474c1d27',
+});
+// 假设用户uid为1
+var uid = 3;
+// 浏览器监听user-2频道的消息，也就是用户uid为1的用户消息
+var user_channel = connection.subscribe('user-' + uid);
 
-// // 当user-2频道有message事件的消息时
-// user_channel.on('message', function (data) {
-//     globalEventBus.emit(data.content.event, data.content.data)
-
-
-//     console.log("收到消息",data)
-
-// });
-// // 断线事件
-// user_channel.on('close', function () {
-
-// });
+// 当user-2频道有message事件的消息时
+user_channel.on('message', function (data) {
 
 
 
-var ws = new WebSocket("ws://192.168.26.167:8080");
+    globalEventBus.emit(data.content.event, data.content.data)
+});
+// 断线事件
+user_channel.on('close', function () {
 
-//当WebSocket创建成功时，触发onopen事件
-ws.onopen = function () {
-  console.log("open");
-}
-//当客户端收到服务端发来的消息时，触发onmessage事件，参数e.data包含server传递过来的数据
-ws.onmessage = function (e) {
-
-  let data =JSON.parse(e.data)
-
-  globalEventBus.emit(data.event, data.data ||'')
+});
 
 
 
-}
+globalEventBus.on('refresh', data => {
+  router.go(0)
+})
+
+// var ws = new WebSocket("ws://192.168.26.167:8080");
+
+// //当WebSocket创建成功时，触发onopen事件
+// ws.onopen = function () {
+//   console.log("open");
+// }
+// //当客户端收到服务端发来的消息时，触发onmessage事件，参数e.data包含server传递过来的数据
+// ws.onmessage = function (e) {
+
+//   let data =JSON.parse(e.data)
+
+//   globalEventBus.emit(data.event, data.data ||'')
+
+
+
+// }
 
 </script>
 <template>

src/components/Header.vue

@@ -3,6 +3,7 @@
         <div class="logo" style="background-color: red;">
         </div>
 
+        <!-- <div style="color: red;">{{ areaStore.userInfo }}</div> -->
         <div class="right">
             <div class="rigth-li" @click="choseArea = true"> <img style="width: 1VW;height:1VW;margin-right: 0.5vw;"
                     :src="u('DW')" alt=""> {{ areaStore.userInfo.name|| '泸县' }}
@@ -39,8 +40,6 @@ import { areaObj } from "@/store/index.js"
 
 const areaStore = areaObj()
 
-
-
 const u = (name) => {
     return `/static/index/${name}.png`
 }

src/components/areaMap.vue

@@ -170,32 +170,6 @@ const initAreaMap = () => {
 
 
       },
-
-      // {
-      //   type: "map",
-      //   map: mapName,
-      //   zlevel: -1,
-      //   aspectScale: 1,
-      //   zoom: 1.2,
-      //   layoutCenter: ["50%", "51%"],
-      //   layoutSize: "110%",
-      //   roam: false,
-      //   silent: true,
-
-      //   itemStyle: {
-      //     normal: {
-      //       borderWidth: 1,
-      //       borderColor: "rgba(17, 149, 216,0.6)",
-      //       borderColor: "#5AD0E0",
-      //       shadowColor: "rgba(172, 122, 255,0.5)",
-      //       shadowOffsetY: 5,
-      //       shadowBlur: 15,
-      //       areaColor: "rgba(5,21,35,0.1)",
-      //     },
-      //   },
-      // },
-
-
       {
         type: "map",
         map: mapName,
@@ -315,7 +289,7 @@ const initAreaMap = () => {
     ],
   };
 
-  document.getElementById("chart2").removeAttribute('_echarts_instance_');
+  // document.getElementById("chart2").removeAttribute('_echarts_instance_');
   echarts.registerMap(mapName, geoJson)
   const bg = echarts.init(myChart)
   bg.setOption(option);
@@ -355,14 +329,9 @@ const initTownMap = async (name) => {
   })
 
   const townJson = deepCopy(geoJson)
-
-
-
   townJson.features = townJson.features.filter((item) => {
     return item.properties.name == name
   })
-  console.log(townJson,"res")
-
   var mapName = 'town';
   const myChart = document.getElementById("chart3")
   let option = {
@@ -555,8 +524,7 @@ const initTownMap = async (name) => {
 
 
     let longInfo = params.data.coord
-console.log(params)
-    return 
+    
     areaStore.areaCodeList.forEach(item => {
       if (item.name == name) {
         areaStore.changeUserInfoFn(510521, item.code)
@@ -568,29 +536,11 @@ console.log(params)
       }
 
     })
-
-    // console.log(params.data.coord)
-    // console.log(params.data.data)
   });
 }
-// watch(() => areaStore.address, (value, oldValue) => {
-//   if (value.city) {
-//     initAreaMap()
-//   }
-//   else if (value.area) {
-//     showArea.value = false
-//     initTownMap(value.area)
-//   }
-// }, {
-//   deep: true,
-// }
 
-// )
 
 watch(() => areaStore.userInfo.areaCode, (value, oldValue) => {
-
-console.log(value,'value')
-
   if (value) {
     switch (value) {
       case "510503":
@@ -611,7 +561,6 @@ console.log(value,'value')
       case "510524":
         geoJson = geoJsonXuyong
         break;
-
       case "510525":
         geoJson = geoJsonGulin
         break;
@@ -630,33 +579,39 @@ console.log(value,'value')
 )
 
 
+/*    夏弥睡眼惺忪地抬起头来，脸上还有手表压出的印子，“居然睡着了……都快给高数折磨疯了。我说卡塞尔学院的高数课真是有够变态。”她是一边跟楚子航聊天一边啃课本的时候睡着的，这些天她常常在病房里混迹，好像这里是她的自习室。楚子航渐渐地也习惯了，如果他困了就会直接睡过去，当她不存在，有时候醒来夏弥还在，有时候夏弥走了。*/
 
 onMounted(async () => {
-  setTimeout(() => { initAreaMap() }, 1000)
+  setTimeout(() => { initAreaMap() }, 500)
 })
 
 globalEventBus.on('choserArea', data => {
-
   areaStore.changeUserInfoFn(data.code, '', data.name)
   
-  // console.log(areaStore.userInfo, "data")
+
 
 })
 globalEventBus.on('choseTown', data => {
   getTowmName(data.name)
-areaStore.areaCodeList.forEach(item => {
-      if (item.name == (data.name)) {
-        areaStore.changeUserInfoFn(areaStore.userInfo.areaCode, item.code,data.name)
-      }
-    })
-    areaStore.changeAddress('', data.name )
-    initTownMap(data.name)
+  areaStore.areaCodeList.forEach(item => {
+    if (item.name == (data.name)) {
+      areaStore.changeUserInfoFn(areaStore.userInfo.areaCode, item.code, data.name)
+    }
+  })
+  areaStore.changeAddress('', data.name)
+  initTownMap(data.name)
 
 })
 
 globalEventBus.on('choseLand', data => {
-
   router.push(`/detail?landId=${data.id}&town=${areaStore.userInfo.name}&parmas=${JSON.stringify(areaStore.userInfo)}&landName=${data.landName}`)
+})
 
+
+globalEventBus.on('initAreaMap', data => {
+  areaStore.changeUserInfoFn(areaStore.userInfo.areaCode, '', '')
+
+  console.log("chufa")
+  initAreaMap()
 })
 </script>

src/components/farmerMap.vue

@@ -32,20 +32,33 @@
 </style>
 
 <script setup>
-import { ref, onMounted, defineEmits } from "vue"
+import { ref, onMounted, defineEmits,watch } from "vue"
 import * as echarts from 'echarts';
 import "echarts-gl"
 import geoJsonLuxian from "/static/jsonData/luxian_geo.js"
-// import geoJson from "/static/jsonData/luxian_geo.js"
-import { useRoute } from "vue-router"
+import geoJsonGulin from "/static/jsonData/gulin_geo.js"
+import geoJsonHejiang from "/static/jsonData/hejiang_geo.js"
+import geoJsonJiangyang from "/static/jsonData/jiangyang_geo.js"
+import geoJsonLongmatan from "/static/jsonData/longmatan_geo.js"
+import geoJsonNaxi from "/static/jsonData/naxi_geo.js"
+import geoJsonXuyong from "/static/jsonData/xuyong_geo.js"
+import { useRoute,useRouter } from "vue-router"
 import { areaObj } from "@/store/index.js"
 import { landListApi } from "@/api.js"
 import { globalEventBus } from '@/common/eventBus'
+const router=useRouter()
+const route = useRoute()
 
+let geoJson ;
 const icon = "https:\/\/ceshi-worker-task.lihaink.cn\/uploads\/images\/20231204\/202312041608529c9e21252.png"
-
-
-let geoJson = geoJsonLuxian
+const areaStore = areaObj()
+if(JSON.parse(route.query.parmas).areaCode==510503) geoJson = geoJsonNaxi;
+if(JSON.parse(route.query.parmas).areaCode==510502) geoJson = geoJsonJiangyang;
+if(JSON.parse(route.query.parmas).areaCode==510504) geoJson = geoJsonLongmatan;
+if(JSON.parse(route.query.parmas).areaCode==510521) geoJson = geoJsonLuxian;
+if(JSON.parse(route.query.parmas).areaCode==510522) geoJson = geoJsonHejiang;
+if(JSON.parse(route.query.parmas).areaCode==510524) geoJson = geoJsonXuyong;
+if(JSON.parse(route.query.parmas).areaCode==510525) geoJson = geoJsonGulinc;
 
 
 
@@ -66,60 +79,27 @@ const pointerFn2 = (lists) => {
   })
   return list
 }
-const areaStore = areaObj()
 const deepCopy = (obj) => {
   if (typeof obj !== 'object' || obj === null) {
     return obj;
   }
 
   let copy = Array.isArray(obj) ? [] : {};
-
   for (let key in obj) {
     if (Object.prototype.hasOwnProperty.call(obj, key)) {
       copy[key] = deepCopy(obj[key]);
     }
   }
-
   return copy;
 }
-const route = useRoute()
-const townJson = deepCopy(geoJson)
+
+const townJson = deepCopy(JSON.parse( JSON.stringify(geoJson)) )
+townJson.features=geoJson.features
 townJson.features = townJson.features.filter((item) => {
   return item.properties.name == route.query.town
 })
 const lx = "https:\/\/ceshi-worker-task.lihaink.cn\/uploads\/images\/20231205\/20231205092709cfe148712.png"
-
-// const pointerFn2 = (lists) => {
-//   let list = []
-//   lists.forEach((item, index) => {
-//     list.push({
-//       coord: item.value,
-//       value: item.name,
-//       animation: true,
-//       data: lists,
-//       itemStyle: {
-//         normal: {
-//           borderColor: 'red',
-//           borderWidth: 1,            // 标注边线线宽，单位px，默认为1
-//           label: {
-//             show: false
-//           }
-//         },
-//         emphasis: {
-//           borderColor: 'red',
-//           borderWidth: 5,
-//           label: {
-//             show: false
-//           }
-//         }
-//       },
-
-
-//     },)
-//   })
-//   return list
-// }
-onMounted(async () => {
+const initMap=async ()=>{
   let center = []
   let pointerList = []
   let res = await landListApi({
@@ -135,8 +115,6 @@ onMounted(async () => {
     })
 
   })
-
-
   var mapName = 'lz';
   const myChart = document.getElementById("farmerchart")
   /*获取地图数据*/
@@ -340,7 +318,7 @@ onMounted(async () => {
       },
     ],
   };
-  document.getElementById("farmerchart").removeAttribute('_echarts_instance_');
+  // document.getElementById("farmerchart").removeAttribute('_echarts_instance_');
   echarts.registerMap(mapName, townJson)
   const bg = echarts.init(myChart)
   bg.setOption(option);
@@ -360,15 +338,18 @@ onMounted(async () => {
     })
   });
 
+
+}
+
+onMounted(async () => {
+  initMap()
+
 })
 
 
 
 globalEventBus.on('detail', data => {
-
   emit('changeLand', data)
-
-
 })
 
 

src/components/index/centerTop.vue

@@ -0,0 +1,52 @@
+<template>
+    <div style="display: flex;justify-content: space-between;" v-if="userInfoStore.userInfo.streetCode">
+        <div class="c-top-tits" style="z-index: 99999;"><span class="color-font" @click="back">返回首页</span></div>
+        <div class="c-top-tits" style="z-index: 99999;"><span class="color-font">{{ props.townName }}地块</span> </div>
+    </div>
+    <div class="c-top-tit" v-else>
+        <div class="c-top-li">种植面积 <span class="color-font" style="font-size: 18px;margin-left: 1vw; ">{{
+            centerData.totalArea }}</span> ㎡</div>
+        <div class="c-top-li">种植种类 <span class="color-font" style="font-size: 18px;margin-left: 1vw; ">{{
+            centerData.plantCount }}</span> 种</div>
+        <div class="c-top-li">地块数量 <span class="color-font" style="font-size: 18px;margin-left: 1vw; ">{{
+            centerData.landCount }}</span> 块</div>
+    </div>
+</template>
+<script setup>
+import {ref,reactive,defineProps} from "vue"
+import { centralCountApi } from "@/api.js"
+import { areaObj } from "@/store/index.js"
+import { globalEventBus } from '@/common/eventBus'
+
+
+
+
+const userInfoStore = areaObj()
+const props = defineProps({
+    townName: String,
+})
+
+centralCountApi({
+    ...userInfoStore.userInfo
+}).then(res => {
+    for (let key in centerData) {
+        centerData[key] = res.data[key]
+    }
+})
+
+const centerData = reactive({
+    landCount: "",
+    plantCount: "",
+    totalArea: "",
+
+})
+const back=(name)=>{
+    userInfoStore.changeUserInfoFn(userInfoStore.userInfo.areaCode, '', name)
+    globalEventBus.emit('initAreaMap')
+
+}
+globalEventBus.on('back', data => {
+    back()
+})
+
+</script>

src/components/index/rightBottom.vue

@@ -1,8 +1,9 @@
 <template>
     <div style="height: 35%;">
         <div class="landa">
-            <div class="land-li" @click="choseUrl(item)" v-for="(item, index) in landlist" :key="index">{{
-                item.title }}</div>
+            <div class="land-li" style="cursor: pointer;" @click="choseUrl(item)" v-for="(item, index) in landlist"
+                :key="index">{{
+                    item.title }}</div>
         </div>
     </div>
     <div class="video" style="height: 65%;">
@@ -20,7 +21,7 @@
 <script setup>
 import JessibucaDemo from "@/components/videoFlv.vue"
 import { landListApi } from "@/api.js"
-import {ref,reactive,onBeforeUnmount} from "vue"
+import { ref, reactive, onBeforeUnmount } from "vue"
 import { areaObj } from "@/store/index.js"
 import { globalEventBus } from '@/common/eventBus'
 
@@ -38,26 +39,29 @@ landListApi({
 })
 // 新建scoket 通知開始推流
 const video_url = ref('')
-let socket = new WebSocket('wss://iot.lihaink.cn/test')
-const pullStream = () => {
-    const onSocketOpen = (event) => {
-        console.log("scoket打开,5565")
-    }
-    const onSocketClose = (event) => {
-        console.log('WebSocket连接已关闭');
-    }
-    const onSocketError = (event) => {
-        console.error('WebSocket连接发生错误');
-    }
-    socket.addEventListener('open', onSocketOpen);
-    socket.addEventListener('close', onSocketClose);
-    socket.addEventListener('error', onSocketError);
-}
-pullStream()
+
 const showVideo = ref(false)
 
-
+let socket;
 const choseUrl = (item) => {
+    if (socket) socket.close()
+
+     socket = new WebSocket('wss://iot.lihaink.cn/test')
+    const pullStream = () => {
+        const onSocketOpen = (event) => {
+            console.log("scoket打开,5565")
+        }
+        const onSocketClose = (event) => {
+            console.log('WebSocket连接已关闭');
+        }
+        const onSocketError = (event) => {
+            console.error('WebSocket连接发生错误');
+        }
+        socket.addEventListener('open', onSocketOpen);
+        socket.addEventListener('close', onSocketClose);
+        socket.addEventListener('error', onSocketError);
+    }
+    pullStream()
     video_url.value = ''
     showVideo.value = false
     setTimeout(() => {
@@ -73,7 +77,7 @@ const choseUrl = (item) => {
 
 }
 onBeforeUnmount(() => {
-    socket.close()
+    if(socket) socket.close()
 })
 
 

src/components/warnDetail.vue

@@ -18,7 +18,7 @@
         </div>
         <div class="box-bottom">
             <div style="font-family: FZCYJ;">告警原因</div>
-            <div class="text" style="width: 10vw;">{{ props.data.content }}</div>
+            <div class="text" style="width: 10vw;margin-top: 10px;">{{ props.data.content }}</div>
 
         </div>
 

src/view/detail.vue

@@ -21,7 +21,7 @@
         <div class="center">
             <div class="top-c">
                 <div style="display: flex;justify-content: space-between;">
-                    <div class="  c-top-tits"><span class="color-font" @click="router.push('/')">返回首页</span></div>
+                    <div class="  c-top-tits"><span class="color-font" @click="back">返回首页</span></div>
                     <div class="  c-top-tits"><span class="color-font">{{ landName }}</span> </div>
                 </div>
                 <farmerMap @changeLand="changeLandFn"></farmerMap>
@@ -50,8 +50,13 @@ import centerBottom from "../components/detail/centerBottom.vue";
 import rightTop from "../components/detail/rightTop.vue";
 import rightBottom from "../components/detail/rightBottom.vue";
 import { useRouter, useRoute } from "vue-router"
-import JessibucaDemo from "@/components/videoFlv.vue"
 import { landListApi } from "@/api.js"
+import { globalEventBus } from '@/common/eventBus'
+import { areaObj } from "@/store/index.js"
+import JessibucaDemo from "@/components/videoFlv.vue"
+
+const areaStore=areaObj()
+
 const showVideo = ref(false)
 const video_url = ref('')
 const router = useRouter()
@@ -92,11 +97,12 @@ const getDetail = () => {
             if (item.id == data.land_id) {
                 video_url.value = item.video_url
                 showVideo.value = true
+                console.log(showVideo.value,video_url.value)
 
                 let data = {
                     username: item.master_phone,
-                    // device: 'lihai_lot_walnutpi_dev_' + item.id,
-                    device: 'lihai_lot_walnutpi_dev_' + 5,
+                    device: 'lihai_lot_walnutpi_dev_' + item.id,
+                    // device: 'lihai_lot_walnutpi_dev_' + 5,
                     scene: 'screen'
                 }
                 socket.send(JSON.stringify(data))
@@ -115,6 +121,16 @@ const changeLandFn = (item) => {
     getDetail()
 }
 
+const back = () => {
+    areaStore.changeUserInfoFn(areaStore.userInfo.areaCode, '','')
+    router.replace("/home")
+
+}
+
+globalEventBus.on('backHome', data => {
+    back()
+
+})
 </script>
 <style lang="scss">
 .box {

src/view/home.vue

@@ -13,19 +13,7 @@
         </div>
         <div class="c">
             <div class="top">
-                <div style="display: flex;justify-content: space-between;" v-if="userInfoStore.userInfo.streetCode">
-                    <div class="c-top-tits" style="z-index: 99999;"><span class="color-font" @click="back">返回首页</span></div>
-                    <div class="c-top-tits" style="z-index: 99999;"><span class="color-font">{{ townName }}地块</span> </div>
-                </div>
-                <div class="c-top-tit" v-else>
-                    <div class="c-top-li">种植面积 <span class="color-font" style="font-size: 18px;margin-left: 1vw; ">{{
-                        centerData.totalArea }}</span> ㎡</div>
-                    <div class="c-top-li">种植种类 <span class="color-font" style="font-size: 18px;margin-left: 1vw; ">{{
-                        centerData.plantCount }}</span> 种</div>
-                    <div class="c-top-li">地块数量 <span class="color-font" style="font-size: 18px;margin-left: 1vw; ">{{
-                        centerData.landCount }}</span> 块</div>
-                </div>
-
+                <centerTop :townName="townName"  :key="userInfoStore.userInfo.name"></centerTop>
 
                 <div class="map">
                     <areaMap @getTowmName="getTowmName"></areaMap>
@@ -54,46 +42,16 @@ import leftCenter from "../components/index/leftCenter.vue"
 import leftBottom from "../components/index/leftBottom.vue"
 import centerBottom from "../components/index/centerBottom.vue"
 import rightBottom from "../components/index/rightBottom.vue"
+import centerTop from "../components/index/centerTop.vue"
 import { centralCountApi } from "@/api.js"
 import areaMap from "@/components/areaMap.vue"
-import { landListApi } from "@/api.js"
 import rightTop from "../components/index/rightTop.vue"
 import { areaObj } from "@/store/index.js"
 import { useRouter } from "vue-router"
-
-
-
 const router = useRouter()
 const userInfoStore = areaObj()
-// ...userInfoStore.userInfo
-
-const showVideo = ref(false)
 
 
-centralCountApi({
-    ...userInfoStore.userInfo
-}).then(res => {
-
-    for (let key in centerData) {
-        centerData[key] = res.data[key]
-    }
-})
-
-const centerData = reactive({
-    landCount: "",
-    plantCount: "",
-    totalArea: "",
-
-})
-// 地块
-
-
-
-
-const back = () => {
-    console.log("back")
-    router.go(0)
-}
 const townName = ref("")
 const getTowmName = (e) => {
     townName.value = e
@@ -101,7 +59,6 @@ const getTowmName = (e) => {
 
 
 
-
 </script>
 <style lang="scss">
 .box {