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

shipin

This commit is contained in:
lxz 2024-01-06 15:51:01 +08:00
parent 9d361f07fa
commit 6a25cf106a
13 changed files with 474 additions and 396 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/components/areaMap.vue
View File

@ -546,6 +546,9 @@ const initTownMap = async (name) => {
echarts.registerMap(mapName, townJson) echarts.registerMap(mapName, townJson)
const bg = echarts.init(myChart) const bg = echarts.init(myChart)
bg.setOption(option); bg.setOption(option);
bg.on('click', function (params) { bg.on('click', function (params) {
let longInfo = params.data.coord let longInfo = params.data.coord
areaStore.areaCodeList.forEach(item => { areaStore.areaCodeList.forEach(item => {

79
src/components/detail/centerBottom.vue
View File

@ -1,37 +1,33 @@
<template> <template>
<div class="bottom-li" :class="(item.flag) ? '' : 'act', actList.includes(item.name) ? 'dbg' : ''"
v-for="(item, index) in environmentData">
<span style="flex: 2;" class="color-font">{{ item.name }}</span>
<span style="flex: 2;">{{ item.value }}{{ item.unit }}</span>
<span style="flex: 1;" v-if="item.flag">状态正常</span>
<span style="flex: 1;" v-else>状态异常</span>
<div class="bottom-li" :class="(item.flag) ? '' : 'act',actList.includes(item.name)?'dbg':''" v-for="(item, index) in environmentData"> </div>
<span class="color-font">{{ item.name }}</span>
<span>{{ item.value }}{{ item.unit }}</span>
<span v-if="item.flag">状态正常</span>
<span v-else>状态异常</span>
</div>
</template> </template>
<script setup> <script setup>
import { monitorInfoApi } from "@/api.js" import { monitorInfoApi } from "@/api.js"
import {ref,reactive} from "vue" import { ref, reactive } from "vue"
const actList=reactive([ const actList = reactive([
'环境湿度','环境温度','雨量','环境光照' '环境湿度', '环境温度', '雨量', '环境光照'
]) ])
const props = defineProps({ const props = defineProps({
data:Object, data: Object,
}) })
const statusFn=(min,max,item )=>{ const statusFn = (min, max, item) => {
if(item.value>=min&&item.value<=max ) item.flag=true if (item.value >= min && item.value <= max) item.flag = true
else item.flag=false else item.flag = false
} }
@ -41,22 +37,22 @@ monitorInfoApi(
} }
).then(res => { ).then(res => {
for (let key in res.data.monitorThreshold){ for (let key in res.data.monitorThreshold) {
monitorThreshold[key]=res.data.monitorThreshold[key] monitorThreshold[key] = res.data.monitorThreshold[key]
} }
for (let key in environmentData){ for (let key in environmentData) {
environmentData[key].value=res.data.landCollection[key] environmentData[key].value = res.data.landCollection[key]
} }
statusFn(monitorThreshold.wind_speed_min,monitorThreshold.wind_speed_max,environmentData.wind_speed ) statusFn(monitorThreshold.wind_speed_min, monitorThreshold.wind_speed_max, environmentData.wind_speed)
// statusFn(monitorThreshold.wind_speed_min,monitorThreshold.wind_speed_max,environmentData.wind_direction ) // statusFn(monitorThreshold.wind_speed_min,monitorThreshold.wind_speed_max,environmentData.wind_direction )
statusFn(monitorThreshold.air_mois_mix,monitorThreshold.air_mois_max,environmentData.ambient_humidity ) statusFn(monitorThreshold.air_mois_mix, monitorThreshold.air_mois_max, environmentData.ambient_humidity)
statusFn(monitorThreshold.air_temp_min,monitorThreshold.air_temp_max,environmentData.ambient_temperature ) statusFn(monitorThreshold.air_temp_min, monitorThreshold.air_temp_max, environmentData.ambient_temperature)
statusFn(monitorThreshold.air_co2_content_min,monitorThreshold.air_co2_content_max,environmentData.carbon_dioxide ) statusFn(monitorThreshold.air_co2_content_min, monitorThreshold.air_co2_content_max, environmentData.carbon_dioxide)
statusFn(monitorThreshold.ambient_air_pressure_min,monitorThreshold.ambient_air_pressure_max,environmentData.ambient_air_pressure ) statusFn(monitorThreshold.ambient_air_pressure_min, monitorThreshold.ambient_air_pressure_max, environmentData.ambient_air_pressure)
// statusFn(monitorThreshold.ambient_air_pressure_min,monitorThreshold.ambient_air_pressure_max,environmentData.rainfall ) // statusFn(monitorThreshold.ambient_air_pressure_min,monitorThreshold.ambient_air_pressure_max,environmentData.rainfall )
// statusFn(monitorThreshold.ambient_air_pressure_min,monitorThreshold.ambient_air_pressure_max,environmentData.ambient_lighting ) // statusFn(monitorThreshold.ambient_air_pressure_min,monitorThreshold.ambient_air_pressure_max,environmentData.ambient_lighting )
@ -110,24 +106,22 @@ const environmentData = reactive({
ambient_lighting: { ambient_lighting: {
name: "环境光照", name: "环境光照",
value: 10, value: 10,
unit: "%", unit: "Lux",
flag: true flag: true
}, },
} }
) )
const monitorThreshold=reactive({}) const monitorThreshold = reactive({})
</script> </script>
<style lang="scss"> <style lang="scss">
.bottom-li { .bottom-li {
// background-color: #fff; // background-color: #fff;
width: 49%; width: 49%;
height: 4vh; height: 4vh;
display: flex; display: flex;
box-sizing: border-box; box-sizing: border-box;
justify-content: space-between; // justify-content: space-between;
// border: 1px solid red; // border: 1px solid red;
background-image: url('/static/detail/ZC.png'); background-image: url('/static/detail/ZC.png');
background-size: 100% 100%; background-size: 100% 100%;
@ -137,15 +131,16 @@ const monitorThreshold=reactive({})
font-family: FZCYJ; font-family: FZCYJ;
padding: 0 1VW; padding: 0 1VW;
} }
.act { .act {
color: #C65956; color: #C65956;
} }
.dbg{
.dbg {
background-image: url('/static/detail/YC.png'); background-image: url('/static/detail/YC.png');
} }
</style> </style>

2
src/components/detail/leftTop.vue
View File

@ -2,7 +2,7 @@
<div style="display: flex;justify-content: space-between;align-items: center;"> <div style="display: flex;justify-content: space-between;align-items: center;">
<span style="font-size: 15px;">种植总面积： </span> <span style="font-size: 15px;">种植总面积： </span>
<div> <div>
<span class="area-num " v-for="item in plantData.totalArea"><span class="color-font">{{ item }}</span> </span> <span class="area-num " v-for="item in plantData.totalArea"><span class="color-font">{{ item }}</span> </span> <span style="font-size: 18px;">㎡</span>
</div> </div>
</div> </div>
<div style="font-size: 15px;">种植种类 ：</div> <div style="font-size: 15px;">种植种类 ：</div>

2
src/components/index/centerBottom.vue
View File

@ -34,7 +34,7 @@ const alignFn = (num) => {
const config = reactive({ const config = reactive({
header: ['地块名称', '土壤温度(℃)', '土壤湿度', '土壤PH值', '土壤氮磷钾', '风速（m/s）', '环境温度(℃)', '环境湿度', '二氧化碳（ppm）', '历史预警数据'], header: ['地块名称', '土壤温度(℃)', '土壤湿度', '土壤PH值', '土壤氮磷钾', '风速（m/s）', '环境温度(℃)', '环境湿度', '二氧化碳（ppm）', '历史预警数据'],
headerBGC: "#092757", headerBGC: "#092757",
font:'10px', font:'12px',
headerStyle: "background-image: url('/static/index/tableHead.png');font-family: FZCYJ;background-size: 100% 100%;", headerStyle: "background-image: url('/static/index/tableHead.png');font-family: FZCYJ;background-size: 100% 100%;",
oddRowBGC: "#0C2045", oddRowBGC: "#0C2045",
align: alignFn(10), align: alignFn(10),

8
src/components/index/leftBottom.vue
View File

@ -50,11 +50,17 @@ plantProductCountApi(
} }
).then(res => { ).then(res => {
correctionListFn(res.data.list).forEach(item => { correctionListFn(res.data.list).forEach(item => {
console.log(item)
config2.data.push( config2.data.push(
[item[0].kind, `<img src=${item[0].qr_code} style='width:25px;height:25px;transform: translateY(5PX);'/>`, item[1].kind, `<img src=${item[1].qr_code} style='width:25px;height:25px;transform: translateY(5PX);'/>`] [item[0].kind, `<img src=${item[0].qr_code} style='width:25px;height:25px;transform: translateY(5PX);'/>`,item[1]? item[1].kind:'', item[1]? `<img src=${item[1].qr_code} style='width:25px;height:25px;transform: translateY(5PX);'/>`:""]
) )
}) })
}) })

1
src/components/index/leftTop.vue
View File

@ -1,4 +1,5 @@
<template> <template>
<warnDetail v-if="showWarnDeatil" @off="showWarnDeatil = false" :data="popData"></warnDetail> <warnDetail v-if="showWarnDeatil" @off="showWarnDeatil = false" :data="popData"></warnDetail>
<scrollTable @click="hdClick3" :config="config3" style="width:100%;height:100%" v-if="config3.data.length"></scrollTable> <scrollTable @click="hdClick3" :config="config3" style="width:100%;height:100%" v-if="config3.data.length"></scrollTable>
</template> </template>

78
src/components/index/rightTop.vue
View File

@ -1,54 +1,34 @@
<template> <template>
<div class="content" id="eq"> <div class="waterfall" id="eq">
<div class="column">
<div class="item" v-for="item in productList" :key="item">
<div class="eq" v-for="item in productList" :key="item">
<div class="eq-name"> {{ item.name }}</div> <div class="eq-name"> {{ item.name }}</div>
<img :src="item.image" style="width: 100%; border-radius: 1vh;" alt="">
<img :src="item.image" style="width: 10vw; border-radius: 1vh;" alt="">
<!-- <div style="display: flex;flex-direction: column;justify-content: space-between;margin-left: 1vw;color: #CAD5E5;">
<div style="display: flex;align-items: center;">
<img src="/static/index/MC.png" style="width:1.7vw;height: 1.5vw;margin-right: 5px; " alt="">
{{ item.name }}
</div> </div>
<div style="display: flex;align-items: center;">
<img src="/static/index/JS.png" style="width:1.7vw;height: 1.5vw;margin-right: 5px; " alt="">
{{ item.desc }}
</div> </div>
</div> -->
</div>
</div> </div>
</template> </template>
<style lang="scss"> <style lang="scss">
.content { .waterfall {
width: 100%; display: flex;
height: 100%;
transition: 1s;
overflow-y: auto; overflow-y: auto;
font-size: 14px; height: 100%;
// flex-wrap: wrap; /* 添加纵向滚动条 */
// display: flex; }
// justify-content: space-between;
// background-color: red;
.eq { .column {
float: left; flex: 1;
margin-right: 1vw; column-width: 190px;
margin-bottom: 1vh; column-gap: 20px;
}
.item {
break-inside: avoid;
margin-bottom: 20px;
position: relative; position: relative;
}
.eq-name { .eq-name {
position: absolute; position: absolute;
width: 100%; width: 100%;
height: 4vh; height: 4vh;
@ -65,28 +45,14 @@
font-size: 14px; font-size: 14px;
}
// display: inline-block;
// margin-bottom: 2vh;
// min-height: 10vh;
// background-color: #fff;
// margin-bottom: 1vh;
// background-color: #092049;
// box-sizing: border-box;
// padding: 1vh;
// display: flex;
}
} }
.content::-webkit-scrollbar { .waterfall::-webkit-scrollbar {
width: 10px; width: 10px;
background-color: #153041; background-color: #153041;
} }
.content::-webkit-scrollbar-track { .waterfall::-webkit-scrollbar-track {
background-color: #153041; background-color: #153041;
} }

2
src/components/scrollTable.vue
View File

@ -444,6 +444,8 @@ export default {
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
transition: all 0.3s; transition: all 0.3s;
font-family: FZCYJ;
} }
.dv-scroll-board .rows { .dv-scroll-board .rows {

6
src/components/videoFlv.vue
View File

@ -28,7 +28,7 @@
type="input" type="input"
autocomplete="on" autocomplete="on"
ref="playUrl" ref="playUrl"
value="http://rtsp.lihaink.cn/live/lihai_lot_walnutpi_dev_1.live.flv?secret=YwDtp2llj80HA19JhMXL4Po99nsMAyNT" :value="src"
/> />
<button v-if="!playing" @click="play">播放</button> <button v-if="!playing" @click="play">播放</button>
<button v-else @click="pause">停止</button> <button v-else @click="pause">停止</button>
@ -39,7 +39,9 @@
export default { export default {
name: "DemoPlayer", name: "DemoPlayer",
props: {}, props: {
src:String
},
data () { data () {
return { return {
jessibuca: null, jessibuca: null,

378
src/components/warnPop.vue
View File

@ -170,17 +170,17 @@ const setoptionsFn = (X, Y, tits) => {
let data = { let data = {
color: ["#ffc20e", "#00ae9d"], color: ["#ffc20e", "#00ae9d"],
grid: { grid: {
top: "5%", top: "10%",
left: "2%", left: "2%",
right: "5%", right: "5%",
bottom: "5%", bottom: "10%",
containLabel: true containLabel: true
}, },
tooltip: { tooltip: {
trigger: "axis", trigger: "axis",
backgroundColor: "rgba(61, 85, 102, 0.2)", backgroundColor: "rgba(61, 85, 102, 0.2)",
borderWidth: 1, borderWidth: 1,
confine:true, confine: true,
borderColor: "#9DBAE1", // 边框颜色 borderColor: "#9DBAE1", // 边框颜色
// 选中线颜色 // 选中线颜色
axisPointer: { axisPointer: {
@ -263,144 +263,11 @@ const setoptionsFn = (X, Y, tits) => {
} }
return data return data
} }
// const CKP = {
// toolbox: {
// feature: {
// saveAsImage: {}
// }
// },
// grid: {
// left: '3%',
// right: '4%',
// bottom: '3%',
// containLabel: true
// },
// xAxis: [
// {
// show: false,
// type: "category",
// boundaryGap: false,
// axisLabel: {
// color: "#33a3dc",
// fontSize: 14
// },
// axisLine: {
// lineStyle: {
// color: "rgba(255,255,255,.1)"
// }
// },
// data: ["4月", "5月", "6月", "7月", "8月", "9月", "10月"]
// }
// ],
// yAxis: [
// {
// show:false,
// type: 'value'
// }
// ],
// series: [
// {
// name: 'Email',
// type: 'line',
// stack: 'Total',
// smooth: true,
// lineStyle: {
// normal: {
// color: "white" // 线条颜色
// }
// },
// areaStyle: {
// // 区域填充样式
// normal: {
// // 线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
// color: new echarts.graphic.LinearGradient(0, 0, 0, 1,
// [
// { offset: 0, color: "#1A4BB3" },
// ],
// false
// )
// // shadowColor: "rgba(53,142,215, 0.9)", // 阴影颜色
// // shadowBlur: 20 // shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
// }
// },
// emphasis: {
// focus: 'series'
// },
// data: [120, 132, 101, 134, 90, 230, 210]
// },
// {
// name: 'Union Ads',
// type: 'line',
// smooth: true,
// stack: 'Total',
// lineStyle: {
// normal: {
// color: "white" // 线条颜色
// }
// },
// areaStyle: {
// // 区域填充样式
// normal: {
// // 线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
// color: new echarts.graphic.LinearGradient(0, 0, 0, 1,
// [
// { offset: 0, color: "#1C6AA9" },
// ],
// false
// )
// // shadowColor: "rgba(53,142,215, 0.9)", // 阴影颜色
// // shadowBlur: 20 // shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
// }
// },
// emphasis: {
// focus: 'series'
// },
// data: [220, 182, 191, 234, 290, 330, 310]
// },
// {
// name: 'Video Ads',
// type: 'line',
// stack: 'Total',
// smooth: true,
// lineStyle: {
// normal: {
// color: "white" // 线条颜色
// }
// },
// areaStyle: {
// // 区域填充样式
// normal: {
// // 线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
// color: new echarts.graphic.LinearGradient(0, 0, 0, 1,
// [
// { offset: 0, color: "#38A3D9" },
// ],
// false
// )
// // shadowColor: "rgba(53,142,215, 0.9)", // 阴影颜色
// // shadowBlur: 20 // shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
// }
// },
// emphasis: {
// focus: 'series'
// },
// data: [150, 232, 201, 154, 190, 330, 410]
// },
// ]
// };
const CKP = { const CKP = {
// backgroundColor: "#21263A",
// color: ["#ffc20e", "#00ae9d",'red'],
grid: { grid: {
top: "5%", top: "10%",
left: "2%", left: "2%",
right: "5%", right: "5%",
bottom: "5%", bottom: "5%",
@ -424,16 +291,6 @@ const CKP = {
fontSize: 10 fontSize: 10
} }
}, },
legend: {
right: "3%",
icon: "circle",
itemWidth: 8,
itemGap: 20,
show: false,
textStyle: {
padding: [0, 0, 0, 5]
}
},
xAxis: [ xAxis: [
{ {
show: false, show: false,
@ -454,27 +311,15 @@ const CKP = {
yAxis: [ yAxis: [
{ {
show: false, show: false,
type: "value", type: 'value'
name: "",
axisLabel: {
color: "#33a3dc",
fontSize: 14
},
splitLine: {
lineStyle: {
type: "solid",
color: "rgba(255,255,255,.1)",
width: 1
}
}
} }
], ],
series: [ series: [
{ {
name: "氮", name: '氮',
type: "line", type: 'line',
smooth: true, // 是否平滑曲线显示 smooth: true,
symbolSize: 0, symbolSize:0,
lineStyle: { lineStyle: {
normal: { normal: {
color: "white" // 线条颜色 color: "white" // 线条颜色
@ -486,7 +331,8 @@ const CKP = {
// 线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。 // 线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, color: new echarts.graphic.LinearGradient(0, 0, 0, 1,
[ [
{ offset: 0, color: "#306CDC" }, { offset: 0, color: "#91CC75" },
], ],
false false
) )
@ -494,14 +340,18 @@ const CKP = {
// shadowBlur: 20 // shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。 // shadowBlur: 20 // shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
} }
}, },
emphasis: {
focus: 'series'
},
data: [] data: []
}, },
{ {
name: "磷", name: '磷',
type: "line", type: 'line',
smooth: true, // 是否平滑曲线显示 smooth: true,
// symbol:'circle', // 默认是空心圆（中间是白色的），改成实心圆 stack: 'Total',
symbolSize: 0, symbolSize:0,
lineStyle: { lineStyle: {
normal: { normal: {
color: "white" // 线条颜色 color: "white" // 线条颜色
@ -513,7 +363,8 @@ const CKP = {
// 线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。 // 线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, color: new echarts.graphic.LinearGradient(0, 0, 0, 1,
[ [
{ offset: 0, color: "#1B4BB5" }, { offset: 0, color: "#1C6AA9" },
], ],
false false
) )
@ -521,13 +372,17 @@ const CKP = {
// shadowBlur: 20 // shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。 // shadowBlur: 20 // shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
} }
}, },
emphasis: {
focus: 'series'
},
data: [] data: []
}, { },
name: "钾", {
type: "line", name: '钾',
smooth: true, // 是否平滑曲线显示 type: 'line',
// symbol:'circle', // 默认是空心圆（中间是白色的），改成实心圆 stack: 'Total',
symbolSize: 0, symbolSize:0,
smooth: true,
lineStyle: { lineStyle: {
normal: { normal: {
color: "white" // 线条颜色 color: "white" // 线条颜色
@ -539,7 +394,8 @@ const CKP = {
// 线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。 // 线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, color: new echarts.graphic.LinearGradient(0, 0, 0, 1,
[ [
{ offset: 0, color: "#5EAAE2" }, { offset: 0, color: "#38A3D9" },
], ],
false false
) )
@ -547,10 +403,164 @@ const CKP = {
// shadowBlur: 20 // shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。 // shadowBlur: 20 // shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
} }
}, },
emphasis: {
focus: 'series'
},
data: [] data: []
} },
] ]
} };
// const CKP = {
// // backgroundColor: "#21263A",
// // color: ["#ffc20e", "#00ae9d",'red'],
// grid: {
// top: "5%",
// left: "2%",
// right: "5%",
// bottom: "5%",
// containLabel: true
// },
// tooltip: {
// trigger: "axis",
// backgroundColor: "rgba(61, 85, 102, 0.2)",
// borderWidth: 1,
// confine:true,
// borderColor: "#9DBAE1", // 边框颜色
// // 选中线颜色
// axisPointer: {
// lineStyle: {
// color: "#9DBAE1"
// }
// },
// // 字体颜色
// textStyle: {
// color: "#fff",
// fontSize: 10
// }
// },
// legend: {
// right: "3%",
// icon: "circle",
// itemWidth: 8,
// itemGap: 20,
// show: false,
// textStyle: {
// padding: [0, 0, 0, 5]
// }
// },
// xAxis: [
// {
// show: false,
// type: "category",
// boundaryGap: false,
// axisLabel: {
// color: "#33a3dc",
// fontSize: 14
// },
// axisLine: {
// lineStyle: {
// color: "rgba(255,255,255,.1)"
// }
// },
// data: ["4月", "5月", "6月", "7月", "8月", "9月", "10月"]
// }
// ],
// yAxis: [
// {
// show: false,
// type: "value",
// name: "",
// axisLabel: {
// color: "#33a3dc",
// fontSize: 14
// },
// splitLine: {
// lineStyle: {
// type: "solid",
// color: "rgba(255,255,255,.1)",
// width: 1
// }
// }
// }
// ],
// series: [
// {
// name: "氮",
// type: "line",
// smooth: true, // 是否平滑曲线显示
// symbolSize: 0,
// lineStyle: {
// normal: {
// color: "white" // 线条颜色
// }
// },
// areaStyle: {
// // 区域填充样式
// normal: {
// // 线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
// // color: new echarts.graphic.LinearGradient(0, 0, 0, 1,
// // [
// // { offset: 0, color: "#306CDC" },
// // ],
// // false
// // )
// color:"#2E69D7"
// // shadowColor: "rgba(53,142,215, 0.9)", // 阴影颜色
// // shadowBlur: 20 // shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
// }
// },
// data: []
// },
// {
// name: "磷",
// type: "line",
// smooth: true, // 是否平滑曲线显示
// // symbol:'circle', // 默认是空心圆（中间是白色的），改成实心圆
// symbolSize: 0,
// lineStyle: {
// normal: {
// color: "white" // 线条颜色
// }
// },
// areaStyle: {
// // 区域填充样式
// normal: {
// // 线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
// color:"red"
// // shadowColor: "rgba(53,142,215, 0.9)", // 阴影颜色
// // shadowBlur: 20 // shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
// }
// },
// data: []
// }, {
// name: "钾",
// type: "line",
// smooth: true, // 是否平滑曲线显示
// // symbol:'circle', // 默认是空心圆（中间是白色的），改成实心圆
// symbolSize: 0,
// lineStyle: {
// normal: {
// color: "white" // 线条颜色
// }
// },
// areaStyle: {
// // 区域填充样式
// normal: {
// // 线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
// color:"green"
// // shadowColor: "rgba(53,142,215, 0.9)", // 阴影颜色
// // shadowBlur: 20 // shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
// }
// },
// data: []
// }
// ]
// }
@ -565,8 +575,8 @@ landMonitorAlarmHistoryApi({
data[key] = res.data.list[key] data[key] = res.data.list[key]
} }
initCharts('l_t', setoptionsFn(res.data.list.soil_temperature.historyList[0].time, res.data.list.soil_temperature.historyList[1].value),'土壤温度') initCharts('l_t', setoptionsFn(res.data.list.soil_temperature.historyList[0].time, res.data.list.soil_temperature.historyList[1].value), '土壤温度')
initCharts('l_c', setoptionsFn(res.data.list.soil_moisture.historyList[0].time, res.data.list.soil_moisture.historyList[1].value),'土壤湿度') initCharts('l_c', setoptionsFn(res.data.list.soil_moisture.historyList[0].time, res.data.list.soil_moisture.historyList[1].value), '土壤湿度')
initCharts('l_b', setoptionsFn(res.data.list.soil_PH.historyList[0].time, res.data.list.soil_PH.historyList[1].value)) initCharts('l_b', setoptionsFn(res.data.list.soil_PH.historyList[0].time, res.data.list.soil_PH.historyList[1].value))
initCharts('c_b', setoptionsFn(res.data.list.wind_speed.historyList[0].time, res.data.list.wind_speed.historyList[1].value)) initCharts('c_b', setoptionsFn(res.data.list.wind_speed.historyList[0].time, res.data.list.wind_speed.historyList[1].value))
initCharts('r_t', setoptionsFn(res.data.list.ambient_temperature.historyList[0].time, res.data.list.ambient_temperature.historyList[1].value)) initCharts('r_t', setoptionsFn(res.data.list.ambient_temperature.historyList[0].time, res.data.list.ambient_temperature.historyList[1].value))

62
src/view/detail.vue
View File

@ -9,7 +9,7 @@
</div> </div>
<div class="top center"> <div class="top center">
<JessibucaDemo v-if="video_url" :src="video_url"></JessibucaDemo> <JessibucaDemo v-if="video_url&&showVideo" :src="video_url"></JessibucaDemo>
@ -42,7 +42,7 @@
</template> </template>
<script setup> <script setup>
import { ref, reactive, onMounted } from "vue" import { ref, reactive, onMounted, onBeforeUnmount } from "vue"
import farmerMap from "../components/farmerMap.vue"; import farmerMap from "../components/farmerMap.vue";
import leftTop from "../components/detail/leftTop.vue"; import leftTop from "../components/detail/leftTop.vue";
import leftCenter from "../components/detail/leftCenter.vue"; import leftCenter from "../components/detail/leftCenter.vue";
@ -52,6 +52,7 @@ 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 JessibucaDemo from "@/components/videoFlv.vue"
import { landListApi } from "@/api.js" import { landListApi } from "@/api.js"
const showVideo = ref(false)
const video_url = ref('') const video_url = ref('')
const router = useRouter() const router = useRouter()
const route = useRoute() const route = useRoute()
@ -62,29 +63,58 @@ let data = reactive(
streetCode: JSON.parse(route.query.parmas).streetCode streetCode: JSON.parse(route.query.parmas).streetCode
} }
) )
const landName = ref(route.query.landName)
let socket = new WebSocket('wss://iot.lihaink.cn/test')
const pullStream = () => {
const onSocketOpen = (event) => {
console.log("scoket打开")
}
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 landName=ref(route.query.landName) const getDetail = () => {
showVideo.value = false
landListApi({ landListApi({
...data ...data
}).then(res => { }).then(res => {
console.log(res.data)
res.data.list.forEach(item => { res.data.list.forEach(item => {
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
let data = {
username: item.master_phone,
// device: 'lihai_lot_walnutpi_dev_' + item.id,
device: 'lihai_lot_walnutpi_dev_' + 5,
scene: 'screen'
}
socket.send(JSON.stringify(data))
} }
}) })
}) })
const changeLandFn = (item) => {
// console.log(item)
// return
data.land_id = item.id
landName.value=item.name
// route.query.townName=item.name
} }
getDetail()
onBeforeUnmount(() => {
socket.close()
})
const changeLandFn = (item) => {
data.land_id = item.id
landName.value = item.name
getDetail()
}
</script> </script>
<style lang="scss"> <style lang="scss">
.box { .box {

136
src/view/home.vue
View File

@ -2,7 +2,7 @@
<div class="box"> <div class="box">
<div class="l"> <div class="l">
<div class="top"> <div class="top">
<leftTop :key="userInfoStore.userInfo.streetCode"></leftTop> <!-- <leftTop :key="userInfoStore.userInfo.streetCode"></leftTop> -->
</div> </div>
<div class="center top"> <div class="center top">
<leftCenter :key="userInfoStore.userInfo.streetCode"></leftCenter> <leftCenter :key="userInfoStore.userInfo.streetCode"></leftCenter>
@ -18,12 +18,12 @@
<div class="c-top-tits" style="z-index: 99999;"><span class="color-font">{{ townName }}地块</span> </div> <div class="c-top-tits" style="z-index: 99999;"><span class="color-font">{{ townName }}地块</span> </div>
</div> </div>
<div class="c-top-tit" v-else> <div class="c-top-tit" v-else>
<div class="c-top-li">种植面积 <span class="color-font" <div class="c-top-li">种植面积 <span class="color-font" style="font-size: 18px;margin-left: 1vw; ">{{
style="font-size: 18px;margin-left: 1vw; ">{{ centerData.totalArea }}</span> ㎡</div> centerData.totalArea }}</span> ㎡</div>
<div class="c-top-li">种植种类 <span class="color-font" <div class="c-top-li">种植种类 <span class="color-font" style="font-size: 18px;margin-left: 1vw; ">{{
style="font-size: 18px;margin-left: 1vw; ">{{ centerData.plantCount }}</span> 种</div> centerData.plantCount }}</span> 种</div>
<div class="c-top-li">地块数量 <span class="color-font" <div class="c-top-li">地块数量 <span class="color-font" style="font-size: 18px;margin-left: 1vw; ">{{
style="font-size: 18px;margin-left: 1vw; ">{{ centerData.landCount }}</span> 块</div> centerData.landCount }}</span> 块</div>
</div> </div>
@ -42,15 +42,21 @@
<div class="bottoms"> <div class="bottoms">
<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">{{ item.title }}</div> <div class="land-li" @click="choseUrl(item)" v-for="(item, index) in landlist" :key="index">{{
item.title }}</div>
</div> </div>
</div> </div>
<div class="video" style="height: 65%;"> <div class="video" style="height: 65%;">
<div class="video-tit "> 实时监测影像 </div> <div class="video-tit "> 实时监测影像 </div>
<JessibucaDemo v-if="video_url" :src="video_url"></JessibucaDemo> <JessibucaDemo v-if="video_url && showVideo" :src="video_url" style="height: 80%;width: 95%;">
<div style="height: 100%;height: 100%;background-color: #0C2856;position: relative;" v-else> </JessibucaDemo>
<img src="/static/index/video.png" style="position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);width: 50px;height: 50px;" alt="">
<div style="width: 95%;height: 28vh;background-color: #0C2856;position: relative;" v-else>
<img src="/static/index/video.png"
style="position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);width: 50px;height: 50px;"
alt="">
</div> </div>
</div> </div>
@ -60,7 +66,7 @@
</template> </template>
<script setup> <script setup>
import { ref, reactive, onMounted } from "vue" import { ref, reactive, onMounted, watch,onBeforeUnmount } from "vue"
import leftTop from "@/components/index/leftTop.vue" import leftTop from "@/components/index/leftTop.vue"
import leftCenter from "../components/index/leftCenter.vue" import leftCenter from "../components/index/leftCenter.vue"
import leftBottom from "../components/index/leftBottom.vue" import leftBottom from "../components/index/leftBottom.vue"
@ -72,17 +78,39 @@ 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 // ...userInfoStore.userInfo
const showVideo = ref(false)
watch(
() => userInfoStore.userInfo.streetCode,
(value, oldValue) => {
showVideo.value = false
landListApi({
...userInfoStore.userInfo
}).then(res => {
landlist.splice(0, 99999)
res.data.list.forEach(item => { landlist.push(item) })
})
}, {
deep: true,
// immediate: true
}
)
centralCountApi({ centralCountApi({
...userInfoStore.userInfo ...userInfoStore.userInfo
}).then(res => { }).then(res => {
for (let key in centerData){ for (let key in centerData) {
centerData[key]=res.data[key] centerData[key] = res.data[key]
} }
}) })
const centerData = reactive({ const centerData = reactive({
@ -97,28 +125,60 @@ const landlist = reactive([])
landListApi({ landListApi({
...userInfoStore.userInfo ...userInfoStore.userInfo
}).then(res => { }).then(res => {
res.data.list.forEach(item => { landlist.push(item) }) res.data.list.forEach(item => { landlist.push(item) })
}) })
const video_url=ref('')
const choseUrl=(item)=>{ // 新建scoket 通知開始推流
video_url.value='' const video_url = ref('')
setTimeout( ()=>{ let socket = new WebSocket('wss://iot.lihaink.cn/test')
video_url.value=item.video_url const pullStream = () => {
const onSocketOpen = (event) => {
console.log("scoket打开")
}
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()
},500)
const choseUrl = (item) => {
video_url.value = ''
showVideo.value = false
setTimeout(() => {
let data = {
username: item.master_phone,
// device: 'lihai_lot_walnutpi_dev_' + item.id,
device: 'lihai_lot_walnutpi_dev_' + 5,
scene: 'screen'
}
socket.send(JSON.stringify(data))
video_url.value = item.video_url
showVideo.value = true
}, 500)
} }
const back=()=>{ const back = () => {
console.log("back") console.log("back")
router.go(0) router.go(0)
} }
const townName=ref("") const townName = ref("")
const getTowmName=(e)=>{ const getTowmName = (e) => {
townName.value=e townName.value = e
} }
onBeforeUnmount(() => {
socket.close()
})
</script> </script>
<style lang="scss"> <style lang="scss">
.box { .box {
@ -140,7 +200,7 @@ const getTowmName=(e)=>{
background-image: url('/static/index/SBGJTJ.png'); background-image: url('/static/index/SBGJTJ.png');
margin-top: 1vh; margin-top: 1vh;
box-sizing: border-box; box-sizing: border-box;
padding: 6vh 2vh 1vh 2vh; padding: 6vh 2.8vh 1vh 2.5vh;
color: white; color: white;
font-size: 14px; font-size: 14px;
position: relative; position: relative;
@ -220,10 +280,11 @@ const getTowmName=(e)=>{
.bottoms { .bottoms {
width: 25vw; width: 25vw;
box-sizing: border-box; box-sizing: border-box;
padding-top: 6vh; // padding-top: 6vh;
padding: 6vh 1vh 0; // padding: 6vh 1vh 0;
height: 61vh; height: 61vh;
background-size: 100% 100%; background-size: 100% 100%;
padding: 6vh 0 0 1.3vw;
background-image: url('/static/index/MQ.png'); background-image: url('/static/index/MQ.png');
margin-top: 1vh; margin-top: 1vh;
@ -274,6 +335,7 @@ const getTowmName=(e)=>{
background-image: url('/static/index/YJCP.png'); background-image: url('/static/index/YJCP.png');
margin-top: 1vh; margin-top: 1vh;
padding-top: 6vh; padding-top: 6vh;
padding-left: 1.4vw;
@ -284,12 +346,12 @@ const getTowmName=(e)=>{
.c-top-tits { .c-top-tits {
padding: 1vh 1vw; padding: 1vh 1vw;
font-size: 20px; font-size: 20px;
// border: 1px solid red; // border: 1px solid red;
cursor: pointer; cursor: pointer;
background-image: url('/static/detail/FHSY.png'); background-image: url('/static/detail/FHSY.png');
background-size: 100% 100%; background-size: 100% 100%;
} }

3
vite.config.js
View File

@ -5,7 +5,8 @@ import postCssPxToRem from 'postcss-pxtorem'
export default defineConfig({ export default defineConfig({
plugins: [vue()], plugins: [vue()],
server: { // ← ← ← ← ← ← server: { // ← ← ← ← ← ←
host: '0.0.0.0' // ← 新增内容 ← host: '0.0.0.0', // ← 新增内容 ←
port:"8888"
}, },
resolve: { resolve: {
//别名配置，引用src路径下的东西可以通过@如：import Layout from '@/layout/index.vue' //别名配置，引用src路径下的东西可以通过@如：import Layout from '@/layout/index.vue'