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;">
                    土壤温度（℃）已预警 <span style="color: #B7555A;">10</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;">10</span> （次）
                </div>
                <div class="t" id="l_c"></div>
            </div>
            <!-- <div class="l-c"></div> -->

            <div style="position: relative;padding-top: 5px;">
                <div style="position: absolute;top: 0;">
                    土壤PH值 已预警 <span style="color: #B7555A;">10</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;">10</span> （次）
                </div>
                <div class="c-t" id="c_t"></div>
            </div>

            <div class="c-b">

                <div style="position: absolute;top: 0;left: 5vw;">
                    土壤PH值 已预警 <span style="color: #B7555A;">10</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;">10</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;">10</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;">10</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 } from "vue"
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);
}

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_');
    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)

})
</script>