- 环境温度（℃）已预警 10 （次）
+ 环境温度（℃）已预警 {{ data.ambient_temperature?.alarmCount }} （次）
- 环境湿度（℃）已预警 10 （次）
+ 环境湿度（℃）已预警 {{ data.ambient_humidity?.alarmCount }} （次）
@@ -60,7 +59,7 @@
- 二氧化碳 已预警 10 （次）
+ 二氧化碳 已预警 {{ data.carbon_dioxide?.alarmCount }} （次）
@@ -138,6 +137,9 @@
import options from "@/view/option"
import * as echarts from 'echarts';
import { ref, reactive, onMounted, defineEmits } from "vue"
+import { landMonitorAlarmHistoryApi } from "@/api.js"
+
+const data=reactive({})
const emit = defineEmits(['off'])
const off = () => {
@@ -152,6 +154,305 @@ const initCharts = (tag, option) => {
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({
+ 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)
+})
onMounted(() => {
document.getElementById("l_t").removeAttribute('_echarts_instance_');
document.getElementById("l_c").removeAttribute('_echarts_instance_');
@@ -161,15 +462,6 @@ onMounted(() => {
document.getElementById("r_t").removeAttribute('_echarts_instance_');
document.getElementById("r_c").removeAttribute('_echarts_instance_');
document.getElementById("r_b").removeAttribute('_echarts_instance_');
- initCharts('l_t', options.plant_temp)
- initCharts('l_c', options.plant_temp)
- initCharts('l_b', options.plant_temp)
- initCharts('c_t', options.CKP)
- initCharts('c_b', options.plant_temp)
- initCharts('r_t', options.plant_temp)
- initCharts('r_c', options.plant_temp)
- initCharts('r_b', options.plant_temp)
- // initCharts('offline', options.offLine)
-
+
})
\ No newline at end of file
diff --git a/src/view/detail.vue b/src/view/detail.vue
index 0fe473f..18f4ea9 100644
--- a/src/view/detail.vue
+++ b/src/view/detail.vue
@@ -2,26 +2,10 @@
-
-
种植总面积：
-
- 2
- 2
- 2
- 2
-
-
-
种植种类：
-
+
-
-
-
+
-
-
-
-
-
- {{ item.name }}
- {{ item.value }}{{ item.unit }}
- 状态正常
- 状态正常
-
-
-
+
-
-
监控设备总数: 1528 台
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
在线设备统计：
1418 台
-
-
-
离线设备统计：
1418
- 台
-
-
-
+
-
-
-
-
-
-
-
-
-
- {{ item.name }}
- {{ item.value }} {{ item.unit }}
- 状态正常
- 状态异常
-
-
-
-
+
+ {{ item.name }}
+ 
+ {{ item.desc }}
+