plantScreen/src/components/warnPop.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;font-size: 10px;">
                    土壤温度（℃）已预警 <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;font-size: 10px;">
                    土壤湿度（℃）已预警 <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;font-size: 10px;">
                    土壤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;font-size: 10px;margin-bottom: 2px;">
                    土壤氮磷钾 已预警 <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;font-size: 10px;">
                    风速（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;font-size: 10px;">
                    环境温度（℃）已预警 <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;font-size: 10px;">
                    环境湿度（℃）已预警 <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;font-size: 10px;">
                    二氧化碳 已预警 <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, tits) => {

    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,
            confine:true,
            borderColor: "#9DBAE1", // 边框颜色
            // 选中线颜色
            axisPointer: {
                lineStyle: {
                    color: "#9DBAE1"
                }
            },
            // 字体颜色
            textStyle: {
                color: "#fff",
                fontSize: 8
            }
        },
        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: tits,
                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,
        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: "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>