2023-12-01 18:22:09 +08:00
|
|
|
|
<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;">
|
2023-12-15 18:20:02 +08:00
|
|
|
|
土壤温度（℃）已预警 <span style="color: #B7555A;">{{ data.soil_temperature?.alarmCount }}</span> （次）
|
2023-12-01 18:22:09 +08:00
|
|
|
|
</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;">
|
2023-12-15 18:20:02 +08:00
|
|
|
|
土壤湿度（℃）已预警 <span style="color: #B7555A;">{{data.soil_moisture?.alarmCount }}</span> （次）
|
2023-12-01 18:22:09 +08:00
|
|
|
|
</div>
|
|
|
|
|
|
<div class="t" id="l_c"></div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div style="position: relative;padding-top: 5px;">
|
|
|
|
|
|
<div style="position: absolute;top: 0;">
|
2023-12-15 18:20:02 +08:00
|
|
|
|
土壤PH值 已预警 <span style="color: #B7555A;">{{data.soil_PH?.alarmCount }}</span> （次）
|
2023-12-01 18:22:09 +08:00
|
|
|
|
</div>
|
|
|
|
|
|
<div class="t" id="l_b"></div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="c">
|
|
|
|
|
|
<div>
|
|
|
|
|
|
|
|
|
|
|
|
<div style="position: absolute;top: 0;">
|
2023-12-15 18:20:02 +08:00
|
|
|
|
土壤氮磷钾 已预警 <span style="color: #B7555A;">{{data.soil_potassium_phosphate_nitrogen?.alarmCount }}</span> （次）
|
2023-12-01 18:22:09 +08:00
|
|
|
|
</div>
|
|
|
|
|
|
<div class="c-t" id="c_t"></div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="c-b">
|
|
|
|
|
|
|
|
|
|
|
|
<div style="position: absolute;top: 0;left: 5vw;">
|
2023-12-15 18:20:02 +08:00
|
|
|
|
风速（m/s） 已预警 <span style="color: #B7555A;">{{ data.wind_speed?.alarmCount }}</span> （次）
|
2023-12-01 18:22:09 +08:00
|
|
|
|
</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;">
|
2023-12-15 18:20:02 +08:00
|
|
|
|
环境温度（℃）已预警 <span style="color: #B7555A;">{{ data.ambient_temperature?.alarmCount }}</span> （次）
|
2023-12-01 18:22:09 +08:00
|
|
|
|
</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;">
|
2023-12-15 18:20:02 +08:00
|
|
|
|
环境湿度（℃）已预警 <span style="color: #B7555A;">{{ data.ambient_humidity?.alarmCount }}</span> （次）
|
2023-12-01 18:22:09 +08:00
|
|
|
|
</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;">
|
2023-12-15 18:20:02 +08:00
|
|
|
|
二氧化碳 已预警 <span style="color: #B7555A;">{{ data.carbon_dioxide?.alarmCount }}</span> （次）
|
2023-12-01 18:22:09 +08:00
|
|
|
|
</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 } from "vue"
|
2023-12-15 18:20:02 +08:00
|
|
|
|
import { landMonitorAlarmHistoryApi } from "@/api.js"
|
|
|
|
|
|
|
|
|
|
|
|
const data=reactive({})
|
2023-12-01 18:22:09 +08:00
|
|
|
|
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);
|
|
|
|
|
|
}
|
|
|
|
|
|
|
2023-12-15 18:20:02 +08:00
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
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({
|
|
|
|
|
|
areaCode: 510521,
|
|
|
|
|
|
streetCode: 510521100,
|
|
|
|
|
|
land_id: 18
|
|
|
|
|
|
}).then(res => {
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
for (let key in res.data.list){
|
|
|
|
|
|
data[key]=res.data.list[key]
|
|
|
|
|
|
}
|
|
|
|
|
|
console.log(data,5656)
|
|
|
|
|
|
|
|
|
|
|
|
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)
|
|
|
|
|
|
})
|
2023-12-01 18:22:09 +08:00
|
|
|
|
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_');
|
2023-12-15 18:20:02 +08:00
|
|
|
|
|
2023-12-01 18:22:09 +08:00
|
|
|
|
})
|
|
|
|
|
|
</script>
|
