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)
const bg = echarts.init(myChart)
bg.setOption(option);
bg.on('click', function (params) {
let longInfo = params.data.coord
areaStore.areaCodeList.forEach(item => {

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

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

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

@ -2,7 +2,7 @@
<div style="display: flex;justify-content: space-between;align-items: center;">
<span style="font-size: 15px;">种植总面积： </span>
<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 style="font-size: 15px;">种植种类 ：</div>

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

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

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

@ -50,11 +50,17 @@ plantProductCountApi(
}
).then(res => {
correctionListFn(res.data.list).forEach(item => {
console.log(item)
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>
<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>
</template>

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

@ -1,54 +1,34 @@
<template>
<div class="content" id="eq">
<div class="eq" v-for="item in productList" :key="item">
<div class="waterfall" id="eq">
<div class="column">
<div class="item" v-for="item in productList" :key="item">
<div class="eq-name"> {{ item.name }}</div>
<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 }}
<img :src="item.image" style="width: 100%; border-radius: 1vh;" alt="">
</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>
</template>
<style lang="scss">
.content {
width: 100%;
height: 100%;
transition: 1s;
.waterfall {
display: flex;
overflow-y: auto;
font-size: 14px;
// flex-wrap: wrap;
// display: flex;
// justify-content: space-between;
// background-color: red;
height: 100%;
/* 添加纵向滚动条 */
}
.eq {
float: left;
margin-right: 1vw;
margin-bottom: 1vh;
.column {
flex: 1;
column-width: 190px;
column-gap: 20px;
}
.item {
break-inside: avoid;
margin-bottom: 20px;
position: relative;
}
.eq-name {
.eq-name {
position: absolute;
width: 100%;
height: 4vh;
@ -65,28 +45,14 @@
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;
background-color: #153041;
}
.content::-webkit-scrollbar-track {
.waterfall::-webkit-scrollbar-track {
background-color: #153041;
}

2
src/components/scrollTable.vue
View File

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

6
src/components/videoFlv.vue
View File

@ -28,7 +28,7 @@
type="input"
autocomplete="on"
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-else @click="pause">停止</button>
@ -39,7 +39,9 @@
export default {
name: "DemoPlayer",
props: {},
props: {
src:String
},
data () {
return {
jessibuca: null,

378
src/components/warnPop.vue
View File

@ -170,17 +170,17 @@ const setoptionsFn = (X, Y, tits) => {
let data = {
color: ["#ffc20e", "#00ae9d"],
grid: {
top: "5%",
top: "10%",
left: "2%",
right: "5%",
bottom: "5%",
bottom: "10%",
containLabel: true
},
tooltip: {
trigger: "axis",
backgroundColor: "rgba(61, 85, 102, 0.2)",
borderWidth: 1,
confine:true,
confine: true,
borderColor: "#9DBAE1", // 边框颜色
// 选中线颜色
axisPointer: {
@ -263,144 +263,11 @@ const setoptionsFn = (X, Y, tits) => {
}
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 = {
// backgroundColor: "#21263A",
// color: ["#ffc20e", "#00ae9d",'red'],
grid: {
top: "5%",
top: "10%",
left: "2%",
right: "5%",
bottom: "5%",
@ -424,16 +291,6 @@ const CKP = {
fontSize: 10
}
},
legend: {
right: "3%",
icon: "circle",
itemWidth: 8,
itemGap: 20,
show: false,
textStyle: {
padding: [0, 0, 0, 5]
}
},
xAxis: [
{
show: false,
@ -454,27 +311,15 @@ const CKP = {
yAxis: [
{
show: false,
type: "value",
name: "",
axisLabel: {
color: "#33a3dc",
fontSize: 14
},
splitLine: {
lineStyle: {
type: "solid",
color: "rgba(255,255,255,.1)",
width: 1
}
}
type: 'value'
}
],
series: [
{
name: "氮",
type: "line",
smooth: true, // 是否平滑曲线显示
symbolSize: 0,
name: '氮',
type: 'line',
smooth: true,
symbolSize:0,
lineStyle: {
normal: {
color: "white" // 线条颜色
@ -486,7 +331,8 @@ const CKP = {
// 线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
color: new echarts.graphic.LinearGradient(0, 0, 0, 1,
[
{ offset: 0, color: "#306CDC" },
{ offset: 0, color: "#91CC75" },
],
false
)
@ -494,14 +340,18 @@ const CKP = {
// shadowBlur: 20 // shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
}
},
emphasis: {
focus: 'series'
},
data: []
},
{
name: "磷",
type: "line",
smooth: true, // 是否平滑曲线显示
// symbol:'circle', // 默认是空心圆（中间是白色的），改成实心圆
symbolSize: 0,
name: '磷',
type: 'line',
smooth: true,
stack: 'Total',
symbolSize:0,
lineStyle: {
normal: {
color: "white" // 线条颜色
@ -513,7 +363,8 @@ const CKP = {
// 线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
color: new echarts.graphic.LinearGradient(0, 0, 0, 1,
[
{ offset: 0, color: "#1B4BB5" },
{ offset: 0, color: "#1C6AA9" },
],
false
)
@ -521,13 +372,17 @@ const CKP = {
// shadowBlur: 20 // shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
}
},
emphasis: {
focus: 'series'
},
data: []
}, {
name: "钾",
type: "line",
smooth: true, // 是否平滑曲线显示
// symbol:'circle', // 默认是空心圆（中间是白色的），改成实心圆
symbolSize: 0,
},
{
name: '钾',
type: 'line',
stack: 'Total',
symbolSize:0,
smooth: true,
lineStyle: {
normal: {
color: "white" // 线条颜色
@ -539,7 +394,8 @@ const CKP = {
// 线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
color: new echarts.graphic.LinearGradient(0, 0, 0, 1,
[
{ offset: 0, color: "#5EAAE2" },
{ offset: 0, color: "#38A3D9" },
],
false
)
@ -547,10 +403,164 @@ const CKP = {
// shadowBlur: 20 // shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
}
},
emphasis: {
focus: 'series'
},
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]
}
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_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_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('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 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>
<script setup>
import { ref, reactive, onMounted } from "vue"
import { ref, reactive, onMounted, onBeforeUnmount } from "vue"
import farmerMap from "../components/farmerMap.vue";
import leftTop from "../components/detail/leftTop.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 JessibucaDemo from "@/components/videoFlv.vue"
import { landListApi } from "@/api.js"
const showVideo = ref(false)
const video_url = ref('')
const router = useRouter()
const route = useRoute()
@ -62,29 +63,58 @@ let data = reactive(
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)
landListApi({
const getDetail = () => {
showVideo.value = false
landListApi({
...data
}).then(res => {
console.log(res.data)
}).then(res => {
res.data.list.forEach(item => {
if (item.id == data.land_id) {
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>
<style lang="scss">
.box {

136
src/view/home.vue
View File

@ -2,7 +2,7 @@
<div class="box">
<div class="l">
<div class="top">
<leftTop :key="userInfoStore.userInfo.streetCode"></leftTop>
<!-- <leftTop :key="userInfoStore.userInfo.streetCode"></leftTop> -->
</div>
<div class="center top">
<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>
<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 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>
@ -42,15 +42,21 @@
<div class="bottoms">
<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" @click="choseUrl(item)" v-for="(item, index) in landlist" :key="index">{{
item.title }}</div>
</div>
</div>
<div class="video" style="height: 65%;">
<div class="video-tit "> 实时监测影像 </div>
<JessibucaDemo v-if="video_url" :src="video_url"></JessibucaDemo>
<div style="height: 100%;height: 100%;background-color: #0C2856;position: relative;" v-else>
<JessibucaDemo v-if="video_url && showVideo" :src="video_url" style="height: 80%;width: 95%;">
</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>
@ -60,7 +66,7 @@
</template>
<script setup>
import { ref, reactive, onMounted } from "vue"
import { ref, reactive, onMounted, watch,onBeforeUnmount } from "vue"
import leftTop from "@/components/index/leftTop.vue"
import leftCenter from "../components/index/leftCenter.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 { areaObj } from "@/store/index.js"
import { useRouter } from "vue-router"
const router=useRouter()
const userInfoStore= areaObj()
const router = useRouter()
const userInfoStore = areaObj()
// ...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({
...userInfoStore.userInfo
...userInfoStore.userInfo
}).then(res => {
for (let key in centerData){
centerData[key]=res.data[key]
}
for (let key in centerData) {
centerData[key] = res.data[key]
}
})
const centerData = reactive({
@ -97,28 +125,60 @@ const landlist = reactive([])
landListApi({
...userInfoStore.userInfo
}).then(res => {
res.data.list.forEach(item => { landlist.push(item) })
})
const video_url=ref('')
const choseUrl=(item)=>{
video_url.value=''
setTimeout( ()=>{
video_url.value=item.video_url
// 新建scoket 通知開始推流
const video_url = ref('')
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()
},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")
router.go(0)
}
const townName=ref("")
const getTowmName=(e)=>{
townName.value=e
const townName = ref("")
const getTowmName = (e) => {
townName.value = e
}
onBeforeUnmount(() => {
socket.close()
})
</script>
<style lang="scss">
.box {
@ -140,7 +200,7 @@ const getTowmName=(e)=>{
background-image: url('/static/index/SBGJTJ.png');
margin-top: 1vh;
box-sizing: border-box;
padding: 6vh 2vh 1vh 2vh;
padding: 6vh 2.8vh 1vh 2.5vh;
color: white;
font-size: 14px;
position: relative;
@ -220,10 +280,11 @@ const getTowmName=(e)=>{
.bottoms {
width: 25vw;
box-sizing: border-box;
padding-top: 6vh;
padding: 6vh 1vh 0;
// padding-top: 6vh;
// padding: 6vh 1vh 0;
height: 61vh;
background-size: 100% 100%;
padding: 6vh 0 0 1.3vw;
background-image: url('/static/index/MQ.png');
margin-top: 1vh;
@ -274,6 +335,7 @@ const getTowmName=(e)=>{
background-image: url('/static/index/YJCP.png');
margin-top: 1vh;
padding-top: 6vh;
padding-left: 1.4vw;
@ -284,12 +346,12 @@ const getTowmName=(e)=>{
.c-top-tits {
padding: 1vh 1vw;
font-size: 20px;
// border: 1px solid red;
cursor: pointer;
background-image: url('/static/detail/FHSY.png');
background-size: 100% 100%;
padding: 1vh 1vw;
font-size: 20px;
// border: 1px solid red;
cursor: pointer;
background-image: url('/static/detail/FHSY.png');
background-size: 100% 100%;
}

3
vite.config.js
View File

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