zmj
/
plantScreen
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

a

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

71
src/App.vue
View File

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

3
src/components/Header.vue
View File

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

87
src/components/areaMap.vue
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",
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 = {
@ -553,10 +522,9 @@ const initTownMap = async (name) => {
bg.on('click', function (params) {
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,11 +561,10 @@ console.log(value,'value')
case "510524":
geoJson = geoJsonXuyong
break;
case "510525":
geoJson = geoJsonGulin
break;
}
initAreaMap()
}
@ -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>

79
src/components/farmerMap.vue
View File

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

52
src/components/index/centerTop.vue Normal file
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>

48
src/components/index/rightBottom.vue
View File

@ -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,12 +77,12 @@ const choseUrl = (item) => {
}
onBeforeUnmount(() => {
socket.close()
if(socket) socket.close()
})
globalEventBus.on('indexrightbottom', data => {
choseUrl(data.item)
})
</script>

2
src/components/warnDetail.vue
View File

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

24
src/view/detail.vue
View File

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

47
src/view/home.vue
View File

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