This commit is contained in:
zmj 2024-01-22 14:40:21 +08:00
parent c2899beea1
commit c13e52d482
9 changed files with 192 additions and 221 deletions

View File

@ -5,49 +5,56 @@
import { globalEventBus } from '@/common/eventBus' import { globalEventBus } from '@/common/eventBus'
import { Push } from '@/common/push' import { Push } from '@/common/push'
import { areaObj } from "@/store/index.js" import { areaObj } from "@/store/index.js"
import { useRouter } from 'vue-router';
const router=useRouter()
const userInfoStore=areaObj() const userInfoStore=areaObj()
userInfoStore.changeUserInfoFn(510521) userInfoStore.changeUserInfoFn(510521)
// var connection = new Push({ var connection = new Push({
// url: 'ws://192.168.1.10:3131', // websocket url: 'wss://chat.lihaink.cn/tts', // websocket
// app_key: 'aaea61749929eb53a4bd75a1474c1d27', app_key: 'aaea61749929eb53a4bd75a1474c1d27',
// }); });
// // uid1 // uid1
// var uid = 3; var uid = 3;
// // user-2uid1 // user-2uid1
// var user_channel = connection.subscribe('user-' + uid); var user_channel = connection.subscribe('user-' + uid);
// // user-2message // user-2message
// user_channel.on('message', function (data) { user_channel.on('message', function (data) {
// globalEventBus.emit(data.content.event, data.content.data)
// console.log("",data)
// });
// // 线
// user_channel.on('close', function () {
// });
var ws = new WebSocket("ws://192.168.26.167:8080"); globalEventBus.emit(data.content.event, data.content.data)
});
// 线
user_channel.on('close', function () {
//WebSocketonopen });
ws.onopen = function () {
console.log("open");
}
//onmessagee.dataserver
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");
// //WebSocketonopen
// ws.onopen = function () {
// console.log("open");
// }
// //onmessagee.dataserver
// ws.onmessage = function (e) {
// let data =JSON.parse(e.data)
// globalEventBus.emit(data.event, data.data ||'')
// }
</script> </script>
<template> <template>

View File

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

View File

@ -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", type: "map",
map: mapName, map: mapName,
@ -315,7 +289,7 @@ const initAreaMap = () => {
], ],
}; };
document.getElementById("chart2").removeAttribute('_echarts_instance_'); // document.getElementById("chart2").removeAttribute('_echarts_instance_');
echarts.registerMap(mapName, geoJson) echarts.registerMap(mapName, geoJson)
const bg = echarts.init(myChart) const bg = echarts.init(myChart)
bg.setOption(option); bg.setOption(option);
@ -355,14 +329,9 @@ const initTownMap = async (name) => {
}) })
const townJson = deepCopy(geoJson) const townJson = deepCopy(geoJson)
townJson.features = townJson.features.filter((item) => { townJson.features = townJson.features.filter((item) => {
return item.properties.name == name return item.properties.name == name
}) })
console.log(townJson,"res")
var mapName = 'town'; var mapName = 'town';
const myChart = document.getElementById("chart3") const myChart = document.getElementById("chart3")
let option = { let option = {
@ -555,8 +524,7 @@ const initTownMap = async (name) => {
let longInfo = params.data.coord let longInfo = params.data.coord
console.log(params)
return
areaStore.areaCodeList.forEach(item => { areaStore.areaCodeList.forEach(item => {
if (item.name == name) { if (item.name == name) {
areaStore.changeUserInfoFn(510521, item.code) 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) => { watch(() => areaStore.userInfo.areaCode, (value, oldValue) => {
console.log(value,'value')
if (value) { if (value) {
switch (value) { switch (value) {
case "510503": case "510503":
@ -611,7 +561,6 @@ console.log(value,'value')
case "510524": case "510524":
geoJson = geoJsonXuyong geoJson = geoJsonXuyong
break; break;
case "510525": case "510525":
geoJson = geoJsonGulin geoJson = geoJsonGulin
break; break;
@ -630,16 +579,16 @@ console.log(value,'value')
) )
/* 夏弥睡眼惺忪地抬起头来,脸上还有手表压出的印子,“居然睡着了……都快给高数折磨疯了。我说卡塞尔学院的高数课真是有够变态。”她是一边跟楚子航聊天一边啃课本的时候睡着的,这些天她常常在病房里混迹,好像这里是她的自习室。楚子航渐渐地也习惯了,如果他困了就会直接睡过去,当她不存在,有时候醒来夏弥还在,有时候夏弥走了。*/
onMounted(async () => { onMounted(async () => {
setTimeout(() => { initAreaMap() }, 1000) setTimeout(() => { initAreaMap() }, 500)
}) })
globalEventBus.on('choserArea', data => { globalEventBus.on('choserArea', data => {
areaStore.changeUserInfoFn(data.code, '', data.name) areaStore.changeUserInfoFn(data.code, '', data.name)
// console.log(areaStore.userInfo, "data")
}) })
globalEventBus.on('choseTown', data => { globalEventBus.on('choseTown', data => {
@ -655,8 +604,14 @@ areaStore.areaCodeList.forEach(item => {
}) })
globalEventBus.on('choseLand', data => { globalEventBus.on('choseLand', data => {
router.push(`/detail?landId=${data.id}&town=${areaStore.userInfo.name}&parmas=${JSON.stringify(areaStore.userInfo)}&landName=${data.landName}`) 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> </script>

View File

@ -32,20 +32,33 @@
</style> </style>
<script setup> <script setup>
import { ref, onMounted, defineEmits } from "vue" import { ref, onMounted, defineEmits,watch } from "vue"
import * as echarts from 'echarts'; import * as echarts from 'echarts';
import "echarts-gl" import "echarts-gl"
import geoJsonLuxian from "/static/jsonData/luxian_geo.js" import geoJsonLuxian from "/static/jsonData/luxian_geo.js"
// import geoJson from "/static/jsonData/luxian_geo.js" import geoJsonGulin from "/static/jsonData/gulin_geo.js"
import { useRoute } from "vue-router" 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 { areaObj } from "@/store/index.js"
import { landListApi } from "@/api.js" import { landListApi } from "@/api.js"
import { globalEventBus } from '@/common/eventBus' 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" const icon = "https:\/\/ceshi-worker-task.lihaink.cn\/uploads\/images\/20231204\/202312041608529c9e21252.png"
const areaStore = areaObj()
if(JSON.parse(route.query.parmas).areaCode==510503) geoJson = geoJsonNaxi;
let geoJson = geoJsonLuxian 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 return list
} }
const areaStore = areaObj()
const deepCopy = (obj) => { const deepCopy = (obj) => {
if (typeof obj !== 'object' || obj === null) { if (typeof obj !== 'object' || obj === null) {
return obj; return obj;
} }
let copy = Array.isArray(obj) ? [] : {}; let copy = Array.isArray(obj) ? [] : {};
for (let key in obj) { for (let key in obj) {
if (Object.prototype.hasOwnProperty.call(obj, key)) { if (Object.prototype.hasOwnProperty.call(obj, key)) {
copy[key] = deepCopy(obj[key]); copy[key] = deepCopy(obj[key]);
} }
} }
return copy; 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) => { townJson.features = townJson.features.filter((item) => {
return item.properties.name == route.query.town return item.properties.name == route.query.town
}) })
const lx = "https:\/\/ceshi-worker-task.lihaink.cn\/uploads\/images\/20231205\/20231205092709cfe148712.png" const lx = "https:\/\/ceshi-worker-task.lihaink.cn\/uploads\/images\/20231205\/20231205092709cfe148712.png"
const initMap=async ()=>{
// 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, // 线线px1
// label: {
// show: false
// }
// },
// emphasis: {
// borderColor: 'red',
// borderWidth: 5,
// label: {
// show: false
// }
// }
// },
// },)
// })
// return list
// }
onMounted(async () => {
let center = [] let center = []
let pointerList = [] let pointerList = []
let res = await landListApi({ let res = await landListApi({
@ -135,8 +115,6 @@ onMounted(async () => {
}) })
}) })
var mapName = 'lz'; var mapName = 'lz';
const myChart = document.getElementById("farmerchart") 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) echarts.registerMap(mapName, townJson)
const bg = echarts.init(myChart) const bg = echarts.init(myChart)
bg.setOption(option); bg.setOption(option);
@ -360,15 +338,18 @@ onMounted(async () => {
}) })
}); });
}
onMounted(async () => {
initMap()
}) })
globalEventBus.on('detail', data => { globalEventBus.on('detail', data => {
emit('changeLand', data) emit('changeLand', data)
}) })

View File

@ -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>

View File

@ -1,7 +1,8 @@
<template> <template>
<div style="height: 35%;"> <div style="height: 35%;">
<div class="landa"> <div class="landa">
<div class="land-li" @click="choseUrl(item)" v-for="(item, index) in landlist" :key="index">{{ <div class="land-li" style="cursor: pointer;" @click="choseUrl(item)" v-for="(item, index) in landlist"
:key="index">{{
item.title }}</div> item.title }}</div>
</div> </div>
</div> </div>
@ -38,7 +39,14 @@ landListApi({
}) })
// scoket // scoket
const video_url = ref('') const video_url = ref('')
let socket = new WebSocket('wss://iot.lihaink.cn/test')
const showVideo = ref(false)
let socket;
const choseUrl = (item) => {
if (socket) socket.close()
socket = new WebSocket('wss://iot.lihaink.cn/test')
const pullStream = () => { const pullStream = () => {
const onSocketOpen = (event) => { const onSocketOpen = (event) => {
console.log("scoket打开,5565") console.log("scoket打开,5565")
@ -54,10 +62,6 @@ const pullStream = () => {
socket.addEventListener('error', onSocketError); socket.addEventListener('error', onSocketError);
} }
pullStream() pullStream()
const showVideo = ref(false)
const choseUrl = (item) => {
video_url.value = '' video_url.value = ''
showVideo.value = false showVideo.value = false
setTimeout(() => { setTimeout(() => {
@ -73,7 +77,7 @@ const choseUrl = (item) => {
} }
onBeforeUnmount(() => { onBeforeUnmount(() => {
socket.close() if(socket) socket.close()
}) })

View File

@ -18,7 +18,7 @@
</div> </div>
<div class="box-bottom"> <div class="box-bottom">
<div style="font-family: FZCYJ;">告警原因</div> <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> </div>

View File

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

View File

@ -13,19 +13,7 @@
</div> </div>
<div class="c"> <div class="c">
<div class="top"> <div class="top">
<div style="display: flex;justify-content: space-between;" v-if="userInfoStore.userInfo.streetCode"> <centerTop :townName="townName" :key="userInfoStore.userInfo.name"></centerTop>
<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>
<div class="map"> <div class="map">
<areaMap @getTowmName="getTowmName"></areaMap> <areaMap @getTowmName="getTowmName"></areaMap>
@ -54,46 +42,16 @@ import leftCenter from "../components/index/leftCenter.vue"
import leftBottom from "../components/index/leftBottom.vue" import leftBottom from "../components/index/leftBottom.vue"
import centerBottom from "../components/index/centerBottom.vue" import centerBottom from "../components/index/centerBottom.vue"
import rightBottom from "../components/index/rightBottom.vue" import rightBottom from "../components/index/rightBottom.vue"
import centerTop from "../components/index/centerTop.vue"
import { centralCountApi } from "@/api.js" import { centralCountApi } from "@/api.js"
import areaMap from "@/components/areaMap.vue" import areaMap from "@/components/areaMap.vue"
import { landListApi } from "@/api.js"
import rightTop from "../components/index/rightTop.vue" import rightTop from "../components/index/rightTop.vue"
import { areaObj } from "@/store/index.js" import { areaObj } from "@/store/index.js"
import { useRouter } from "vue-router" import { useRouter } from "vue-router"
const router = useRouter() const router = useRouter()
const userInfoStore = areaObj() 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 townName = ref("")
const getTowmName = (e) => { const getTowmName = (e) => {
townName.value = e townName.value = e
@ -101,7 +59,6 @@ const getTowmName = (e) => {
</script> </script>
<style lang="scss"> <style lang="scss">
.box { .box {