472 lines
15 KiB
Vue
472 lines
15 KiB
Vue
<template>
|
||
<div class="box">
|
||
<div class="btn" @click="off">关闭</div>
|
||
|
||
<div class="l">
|
||
<div style="position: relative;padding-top: 5px;">
|
||
<div style="position: absolute;top: 0;">
|
||
土壤温度（℃）已预警 <span style="color: #B7555A;">{{ data.soil_temperature?.alarmCount }}</span> （次）
|
||
</div>
|
||
<div class="t" style="width: 15vw;" id="l_t"></div>
|
||
</div>
|
||
|
||
<div style="position: relative;padding-top: 5px;">
|
||
<div style="position: absolute;top: 0;">
|
||
土壤湿度（℃）已预警 <span style="color: #B7555A;">{{data.soil_moisture?.alarmCount }}</span> （次）
|
||
</div>
|
||
<div class="t" id="l_c"></div>
|
||
</div>
|
||
|
||
<div style="position: relative;padding-top: 5px;">
|
||
<div style="position: absolute;top: 0;">
|
||
土壤PH值 已预警 <span style="color: #B7555A;">{{data.soil_PH?.alarmCount }}</span> （次）
|
||
</div>
|
||
<div class="t" id="l_b"></div>
|
||
</div>
|
||
</div>
|
||
<div class="c">
|
||
<div>
|
||
|
||
<div style="position: absolute;top: 0;">
|
||
土壤氮磷钾 已预警 <span style="color: #B7555A;">{{data.soil_potassium_phosphate_nitrogen?.alarmCount }}</span> （次）
|
||
</div>
|
||
<div class="c-t" id="c_t"></div>
|
||
</div>
|
||
|
||
<div class="c-b">
|
||
|
||
<div style="position: absolute;top: 0;left: 5vw;">
|
||
风速（m/s） 已预警 <span style="color: #B7555A;">{{ data.wind_speed?.alarmCount }}</span> （次）
|
||
</div>
|
||
<div id="c_b" style="width: 100%;height: 100%;"></div>
|
||
</div>
|
||
</div>
|
||
<div class="l">
|
||
<div style="position: relative;padding-top: 5px;">
|
||
<div style="position: absolute;top: 0;">
|
||
环境温度（℃）已预警 <span style="color: #B7555A;">{{ data.ambient_temperature?.alarmCount }}</span> （次）
|
||
</div>
|
||
<div class="t" style="width: 14vw;" id="r_t"></div>
|
||
</div>
|
||
|
||
<div style="position: relative;padding-top: 5px;">
|
||
<div style="position: absolute;top: 0;">
|
||
环境湿度（℃）已预警 <span style="color: #B7555A;">{{ data.ambient_humidity?.alarmCount }}</span> （次）
|
||
</div>
|
||
<div class="t" id="r_c"></div>
|
||
</div>
|
||
<!-- <div class="l-c"></div> -->
|
||
|
||
<div style="position: relative;padding-top: 5px;">
|
||
<div style="position: absolute;top: 0;">
|
||
二氧化碳 已预警 <span style="color: #B7555A;">{{ data.carbon_dioxide?.alarmCount }}</span> （次）
|
||
</div>
|
||
<div class="t" id="r_b"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<style lang="scss" scoped>
|
||
.box {
|
||
position: absolute;
|
||
width: 47vw;
|
||
top: 9vh;
|
||
height: 19vh;
|
||
color: white;
|
||
font-size: 12px;
|
||
|
||
z-index: 1;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
backdrop-filter: blur(4px);
|
||
background-color: rgba(14, 53, 113, 0.6);
|
||
overflow: hidden;
|
||
|
||
.btn {
|
||
position: absolute;
|
||
right: 4px;
|
||
cursor: pointer;
|
||
z-index: 2;
|
||
|
||
}
|
||
|
||
.l {
|
||
|
||
height: 100%;
|
||
margin-right: 1vw;
|
||
margin-left: 1vw;
|
||
|
||
.t {
|
||
width: 100%;
|
||
height: 6.5vh;
|
||
transform: translate(-2.5vw, 0.5vh);
|
||
|
||
}
|
||
}
|
||
|
||
.c {
|
||
width: 14vw;
|
||
height: 100%;
|
||
|
||
margin-right: 1vw;
|
||
|
||
.c-t {
|
||
transform: translate(-5VW, 0vh);
|
||
|
||
width: 20vw;
|
||
height: 15vh;
|
||
}
|
||
|
||
.c-b {
|
||
transform: translate(-5vw, -3.1vh);
|
||
position: relative;
|
||
width: 20vw;
|
||
height: 10vh;
|
||
}
|
||
}
|
||
|
||
.r {
|
||
width: 14vw;
|
||
height: 100%;
|
||
background-color: white;
|
||
margin-right: 1vw;
|
||
}
|
||
}
|
||
</style>
|
||
<script setup>
|
||
import options from "@/view/option"
|
||
import * as echarts from 'echarts';
|
||
import { ref, reactive, onMounted, defineEmits,defineProps } from "vue"
|
||
import { landMonitorAlarmHistoryApi } from "@/api.js"
|
||
import { areaObj } from "@/store/index.js"
|
||
const userStore=areaObj()
|
||
|
||
const props = defineProps({
|
||
item:Object,
|
||
})
|
||
|
||
|
||
const data=reactive({})
|
||
const emit = defineEmits(['off'])
|
||
|
||
const off = () => {
|
||
emit('off')
|
||
|
||
}
|
||
|
||
// 图表
|
||
const initCharts = (tag, option) => {
|
||
var chartDom = document.getElementById(tag);
|
||
var myChart = echarts.init(chartDom);
|
||
myChart.setOption(option);
|
||
}
|
||
|
||
|
||
|
||
|
||
const setoptionsFn = (X, Y) => {
|
||
|
||
let data = {
|
||
color: ["#ffc20e", "#00ae9d"],
|
||
grid: {
|
||
top: "5%",
|
||
left: "2%",
|
||
right: "5%",
|
||
bottom: "5%",
|
||
containLabel: true
|
||
},
|
||
tooltip: {
|
||
trigger: "axis",
|
||
backgroundColor: "rgba(61, 85, 102, 0.2)",
|
||
borderWidth: 1,
|
||
borderColor: "#9DBAE1", // 边框颜色
|
||
// 选中线颜色
|
||
axisPointer: {
|
||
lineStyle: {
|
||
color: "#9DBAE1"
|
||
}
|
||
},
|
||
// 字体颜色
|
||
textStyle: {
|
||
color: "#fff",
|
||
fontSize: 10
|
||
}
|
||
},
|
||
legend: {
|
||
right: "3%",
|
||
icon: "circle",
|
||
itemWidth: 8,
|
||
itemGap: 20,
|
||
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: X
|
||
}
|
||
],
|
||
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, // 是否平滑曲线显示
|
||
// symbol:'circle', // 默认是空心圆（中间是白色的），改成实心圆
|
||
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: "rgba(22,84,158, 0.8)" },
|
||
{ offset: 1, color: "rgba(22,84,158, 0.8)" }
|
||
],
|
||
false
|
||
)
|
||
// shadowColor: "rgba(53,142,215, 0.9)", // 阴影颜色
|
||
// shadowBlur: 20 // shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
|
||
}
|
||
},
|
||
data: Y
|
||
},
|
||
|
||
]
|
||
}
|
||
return 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,
|
||
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: "rgba(22,84,156, 0.8)" },
|
||
{ offset: 1, color: "rgba(22,84,156, 0)" }
|
||
],
|
||
false
|
||
)
|
||
// 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: new echarts.graphic.LinearGradient(0, 0, 0, 1,
|
||
[
|
||
{ offset: 0, color: "rgba(22,84,156, 0.8)" },
|
||
{ offset: 1, color: "rgba(22,84,156, 0)" }
|
||
],
|
||
false
|
||
)
|
||
// 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: new echarts.graphic.LinearGradient(0, 0, 0, 1,
|
||
[
|
||
{ offset: 0, color: "rgba(22,84,156, 0.8)" },
|
||
{ offset: 1, color: "rgba(22,84,156, 0)" }
|
||
],
|
||
false
|
||
)
|
||
// shadowColor: "rgba(53,142,215, 0.9)", // 阴影颜色
|
||
// shadowBlur: 20 // shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
|
||
}
|
||
},
|
||
data: []
|
||
}
|
||
]
|
||
}
|
||
|
||
|
||
|
||
|
||
landMonitorAlarmHistoryApi({
|
||
...userStore.userInfo,
|
||
land_id: props.item.land_id
|
||
}).then(res => {
|
||
|
||
|
||
for (let key in res.data.list){
|
||
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_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))
|
||
initCharts('r_c', setoptionsFn(res.data.list.ambient_humidity.historyList[0].time, res.data.list.ambient_humidity.historyList[1].value))
|
||
initCharts('r_b', setoptionsFn(res.data.list.carbon_dioxide.historyList[0].time, res.data.list.carbon_dioxide.historyList[1].value))
|
||
CKP.xAxis[0].data = res.data.list.soil_potassium_phosphate_nitrogen.historyList[0].time
|
||
let value = res.data.list.soil_potassium_phosphate_nitrogen.historyList[1].value
|
||
value.forEach(item => {
|
||
CKP.series[0].data.push(item.soil_potassium_phosphate_nitrogen)
|
||
CKP.series[1].data.push(item.soil_potassium_phosphate_phosphorus)
|
||
CKP.series[2].data.push(item.soil_potassium_phosphate_potassium)
|
||
})
|
||
initCharts('c_t', CKP)
|
||
})
|
||
onMounted(() => {
|
||
document.getElementById("l_t").removeAttribute('_echarts_instance_');
|
||
document.getElementById("l_c").removeAttribute('_echarts_instance_');
|
||
document.getElementById("l_b").removeAttribute('_echarts_instance_');
|
||
document.getElementById("c_t").removeAttribute('_echarts_instance_');
|
||
document.getElementById("c_b").removeAttribute('_echarts_instance_');
|
||
document.getElementById("r_t").removeAttribute('_echarts_instance_');
|
||
document.getElementById("r_c").removeAttribute('_echarts_instance_');
|
||
document.getElementById("r_b").removeAttribute('_echarts_instance_');
|
||
|
||
})
|
||
</script> |