<template>
    <div class="fatherDiv">
        <div class="centerBox">
            <div ref="cesiumContainer" style="width: 100%; height: 100%" id="cesiumContainer"></div>
            <div class="leftWra">
                <div class="leftTop">
                    <div class="title">
                        <span>设备类型选择</span>
                        <p @click="ShowAll">展示全部</p>
                    </div>
                    <div class="types">
                        <div width="100%" class="types_left">
                            <img width="90" src="@/assets/images/insect.png" alt="" />
                            <p
                                @click="
                                    e => {
                                        sporeClick(e);
                                    }
                                "
                                :class="brightFlag == 1 || brightFlag == 4 ? 'sele_types' : ''"
                            >
                                智能孢子仪
                            </p>
                        </div>
                        <div width="100%" class="types_center">
                            <img width="90" src="@/assets/images/spore.png" alt="" />
                            <p
                                @click="
                                    e => {
                                        insectClick(e);
                                    }
                                "
                                :class="brightFlag == 2 || brightFlag == 4 ? 'sele_types' : ''"
                            >
                                虫情监测仪
                            </p>
                        </div>
                        <div width="100%" class="types_right">
                            <img width="90" src="@/assets/images/soil.png" alt="" />
                            <p
                                @click="
                                    e => {
                                        soilClick(e);
                                    }
                                "
                                :class="brightFlag == 3 || brightFlag == 4 ? 'sele_types' : ''"
                            >
                                土壤墒情、土质
                            </p>
                        </div>
                    </div>
                </div>
                <div v-if="brightFlag == 4 || brightFlag == 1" class="leftbottom">
                    <div class="title">
                        <span>智能孢子监测数据</span>
                        <p @click="bugarrsVisible">
                            历史数据 &nbsp;
                            <img
                                src="@/assets/icons/svg/downloads.svg"
                                style="width: 14px; height: 14px; cursor: pointer"
                            />
                        </p>
                    </div>
                    <div class="tableDiv">
                        <el-table
                            max-height="100%"
                            height="100%"
                            :data="tableData.arrs"
                            stripe
                            style="width: 100%"
                            :header-cell-style="{ 'text-align': 'center' }"
                            :cell-style="{ 'text-align': 'center' }"
                        >
                            <el-table-column width="90" prop="devCode" label="设备编号" />
                            <el-table-column prop="pictureTime" label="监测时间">
                                <template #default="scope">
                                    <div>{{ handleDate(scope.row.pictureTime) }}</div>
                                    <div>{{ handleTime(scope.row.pictureTime) }}</div>
                                </template>
                            </el-table-column>
                            <el-table-column
                                class="red"
                                prop="warning"
                                width="52"
                                :filters="[
                                    { text: '有', value: '有' },
                                    { text: '无', value: '无' },
                                ]"
                                :filter-method="filterHandler"
                                label="预警情况"
                            >
                                <template #default="scope">
                                    <span
                                        v-if="scope.row.warning === '有'"
                                        style="
                                            background-color: rgba(255, 62, 57, 1);
                                            padding: 2px 12px 2px 12px;
                                            border-radius: 2px;
                                        "
                                    >
                                        {{ scope.row.warning }}
                                    </span>
                                    <span
                                        v-else
                                        style="
                                            background-color: rgba(9, 222, 133, 1);
                                            padding: 2px 12px 2px 12px;
                                            border-radius: 2px;
                                        "
                                    >
                                        {{ scope.row.warning }}
                                    </span>
                                </template>
                            </el-table-column>
                            <el-table-column prop="picturePath" label="照片">
                                <template #default="scope">
                                    <div v-if="scope.row.warning === '无'">
                                        <image-preview
                                            append-to-body
                                            style="width: 60px; height: 60px"
                                            :src="scope.row.picturePath"
                                            :zoom-rate="1.2"
                                            fit="cover"
                                        >
                                            <div slot="error" class="image-slot">
                                                <i class="el-icon-picture-outline"></i>
                                            </div>
                                        </image-preview>
                                    </div>
                                    <div v-if="scope.row.warning === '有'">
                                        <el-image
                                            style="width: 60px; height: 60px"
                                            :src="scope.row.picturePath"
                                            :fit="fit"
                                        />
                                    </div>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </div>
                <div v-if="brightFlag == 2" class="leftbottom">
                    <div class="title">
                        <span>实时监测数据</span>
                        <p @click="bugarrsVisibles">
                            历史数据 &nbsp;
                            <img
                                src="@/assets/icons/svg/downloads.svg"
                                style="width: 14px; height: 14px; cursor: pointer"
                            />
                        </p>
                    </div>
                    <div class="tableDiv">
                        <el-table
                            @cell-click="cellClick"
                            max-height="100%"
                            height="100%"
                            :data="bugarrtime"
                            stripe
                            style="width: 100%"
                            :header-cell-style="{ 'text-align': 'center' }"
                            :cell-style="{ 'text-align': 'center' }"
                        >
                            <el-table-column width="90" prop="devCode" label="设备编号" />
                            <el-table-column prop="pictureTime" label="监测时间">
                                <template #default="scope">
                                    <div>{{ handleDate(scope.row.pictureTime) }}</div>
                                    <div>{{ handleTime(scope.row.pictureTime) }}</div>
                                </template>
                            </el-table-column>
                            <el-table-column
                                class="red"
                                prop="warning"
                                width="52"
                                :filters="[
                                    { text: '有', value: '有' },
                                    { text: '无', value: '无' },
                                ]"
                                :filter-method="filterHandler"
                                label="预警情况"
                            >
                                <template #default="scope">
                                    <span
                                        v-if="scope.row.warning === '有'"
                                        style="
                                            background-color: rgba(255, 62, 57, 1);
                                            padding: 2px 12px 2px 12px;
                                            border-radius: 2px;
                                        "
                                    >
                                        {{ scope.row.warning }}
                                    </span>
                                    <span
                                        v-else
                                        style="
                                            background-color: rgba(9, 222, 133, 1);
                                            padding: 2px 12px 2px 12px;
                                            border-radius: 2px;
                                        "
                                    >
                                        {{ scope.row.warning }}
                                    </span>
                                </template>
                            </el-table-column>
                            <el-table-column prop="picturePath" label="照片">
                                <template #default="scope">
                                    <div v-if="scope.row.warning === '无'">
                                        <image-preview
                                            append-to-body
                                            style="width: 60px; height: 60px"
                                            :src="scope.row.picturePath"
                                            :zoom-rate="1.2"
                                            fit="cover"
                                        >
                                            <div slot="error" class="image-slot">
                                                <i class="el-icon-picture-outline"></i>
                                            </div>
                                        </image-preview>
                                    </div>
                                    <div v-if="scope.row.warning === '有'">
                                        <el-image
                                            style="width: 60px; height: 60px"
                                            :src="scope.row.picturePath"
                                            :fit="fit"
                                        />
                                    </div>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </div>
                <div v-if="brightFlag == 3" class="leftbottom">
                    <div class="title">
                        <span>设备监测信息列表</span>
                        <p @click="bugarrsVisibless">
                            历史数据 &nbsp;
                            <img
                                src="@/assets/icons/svg/downloads.svg"
                                style="width: 14px; height: 14px; cursor: pointer"
                            />
                        </p>
                    </div>
                    <div class="tableDiv">
                        <el-table
                            max-height="100%"
                            height="100%"
                            :data="soilAll"
                            stripe
                            style="width: 100%"
                            :header-cell-style="{ 'text-align': 'center' }"
                            :cell-style="{ 'text-align': 'center' }"
                        >
                            <el-table-column label="监测数值" type="expand">
                                <template #default="props">
                                    <div class="selectdiv" m="4">
                                        <p>
                                            0cm湿度:
                                            <span
                                                v-if="
                                                    props.row.soilHumidity1 < 5 ||
                                                    props.row.soilHumidity1 > 60
                                                "
                                                style="color: red"
                                            >
                                                {{ props.row.soilHumidity1 }}
                                            </span>
                                            <span v-else>{{ props.row.soilHumidity1 }}</span>
                                        </p>
                                        <p>
                                            -10cm湿度:
                                            <span
                                                v-if="
                                                    props.row.soilHumidity2 < 0 ||
                                                    props.row.soilHumidity2 > 30
                                                "
                                                style="color: red"
                                            >
                                                {{ props.row.soilHumidity2 }}
                                            </span>
                                            <span v-else>{{ props.row.soilHumidity2 }}</span>
                                        </p>
                                        <p>
                                            -20cm湿度:
                                            <span
                                                v-if="
                                                    props.row.soilHumidity3 < 0 ||
                                                    props.row.soilHumidity3 > 30
                                                "
                                                style="color: red"
                                            >
                                                {{ props.row.soilHumidity3 }}
                                            </span>
                                            <span v-else>{{ props.row.soilHumidity3 }}</span>
                                        </p>
                                        <p>
                                            -30cm湿度:
                                            <span
                                                v-if="
                                                    props.row.soilHumidity4 < 0 ||
                                                    props.row.soilHumidity4 > 40
                                                "
                                                style="color: red"
                                            >
                                                {{ props.row.soilHumidity4 }}
                                            </span>
                                            <span v-else>{{ props.row.soilHumidity4 }}</span>
                                        </p>
                                        <p>
                                            -40cm湿度:
                                            <span
                                                v-if="
                                                    props.row.soilHumidity5 < 0 ||
                                                    props.row.soilHumidity5 > 40
                                                "
                                                style="color: red"
                                            >
                                                {{ props.row.soilHumidity5 }}
                                            </span>
                                            <span v-else>{{ props.row.soilHumidity5 }}</span>
                                        </p>
                                        <p>
                                            0cm温度:
                                            <span
                                                v-if="
                                                    props.row.soilTemperature1 < -10 ||
                                                    props.row.soilTemperature1 > 40
                                                "
                                                style="color: red"
                                            >
                                                {{ props.row.soilTemperature1 }}
                                            </span>
                                            <span v-else>{{ props.row.soilTemperature1 }}</span>
                                        </p>
                                        <p>
                                            -10cm温度:
                                            <span
                                                v-if="
                                                    props.row.soilTemperature2 < -5 ||
                                                    props.row.soilTemperature2 > 40
                                                "
                                                style="color: red"
                                            >
                                                {{ props.row.soilTemperature2 }}
                                            </span>
                                            <span v-else>{{ props.row.soilTemperature2 }}</span>
                                        </p>
                                        <p>
                                            -20cm温度:
                                            <span
                                                v-if="
                                                    props.row.soilTemperature3 < 0 ||
                                                    props.row.soilTemperature3 > 30
                                                "
                                                style="color: red"
                                            >
                                                {{ props.row.soilTemperature3 }}
                                            </span>
                                            <span v-else>{{ props.row.soilTemperature3 }}</span>
                                        </p>
                                        <p>
                                            -30cm温度:
                                            <span
                                                v-if="
                                                    props.row.soilTemperature4 < 0 ||
                                                    props.row.soilTemperature4 > 30
                                                "
                                                style="color: red"
                                            >
                                                {{ props.row.soilTemperature4 }}
                                            </span>
                                            <span v-else>{{ props.row.soilTemperature4 }}</span>
                                        </p>
                                        <p>
                                            -40cm温度:
                                            <span
                                                v-if="
                                                    props.row.soilTemperature5 < 0 ||
                                                    props.row.soilTemperature5 > 30
                                                "
                                                style="color: red"
                                            >
                                                {{ props.row.soilTemperature5 }}
                                            </span>
                                            <span v-else>{{ props.row.soilTemperature5 }}</span>
                                        </p>
                                        <p>
                                            PH值:
                                            <span
                                                v-if="
                                                    props.row.soilPh < 5.5 || props.row.soilPh > 7.5
                                                "
                                                style="color: red"
                                            >
                                                {{ props.row.soilPh }}
                                            </span>
                                            <span v-else>{{ props.row.soilPh }}</span>
                                        </p>
                                        <p>
                                            EC值:
                                            <span
                                                v-if="
                                                    props.row.soilEc < 0 || props.row.soilEc > 0.2
                                                "
                                                style="color: red"
                                            >
                                                {{ props.row.soilEc }}
                                            </span>
                                            <span>{{ props.row.soilEc }}</span>
                                        </p>
                                    </div>
                                </template>
                            </el-table-column>
                            <el-table-column width="90" prop="devCode" label="设备编号" />
                            <el-table-column
                                class="red"
                                prop="warning"
                                width="52"
                                :filters="[
                                    { text: '有', value: '有' },
                                    { text: '无', value: '无' },
                                ]"
                                :filter-method="filterHandler"
                                label="预警情况"
                            >
                                <template #default="scope">
                                    <span
                                        v-if="scope.row.warning === '有'"
                                        style="
                                            background-color: rgba(255, 62, 57, 1);
                                            padding: 2px 12px 2px 12px;
                                            border-radius: 2px;
                                        "
                                    >
                                        {{ scope.row.warning }}
                                    </span>
                                    <span
                                        v-else
                                        style="
                                            background-color: rgba(9, 222, 133, 1);
                                            padding: 2px 12px 2px 12px;
                                            border-radius: 2px;
                                        "
                                    >
                                        {{ scope.row.warning }}
                                    </span>
                                </template>
                            </el-table-column>
                            <el-table-column prop="dataTime" label="监测时间">
                                <template #default="scope">
                                    <div>{{ handleDate(scope.row.dataTime) }}</div>
                                    <div>{{ handleTime(scope.row.dataTime) }}</div>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </div>
                <div class="leftFoldDiv" @click="leftFoldClick()">
                    <el-tooltip
                        class="box-item"
                        :show-arrow="false"
                        :disabled="leftWraFlag"
                        hide-after="0"
                        show-after="200"
                        effect="dark"
                        content="展开"
                        placement="top"
                    >
                        <img v-if="!leftWraFlag" src="@/assets/images/close1.png" alt="" />
                    </el-tooltip>
                    <el-tooltip
                        :disabled="!leftWraFlag"
                        :show-arrow="false"
                        class="box-item"
                        show-after="200"
                        hide-after="0"
                        effect="dark"
                        content="收起"
                        placement="top"
                    >
                        <img
                            class="imgrotate"
                            v-if="leftWraFlag"
                            src="@/assets/images/close1.png"
                            alt=""
                        />
                    </el-tooltip>
                </div>
            </div>
            <div class="rightWra" v-show="brightFlags">
                <div class="rightTop">
                    <div class="title">
                        <span>墒情、土质监测数据</span>
                    </div>
                    <div ref="farmlandDiv" class="farmlandDiv"></div>
                    <div ref="Phdiv" class="Phdiv"></div>

                    <div class="depth">
                        <p :class="active == '1' ? 'SelectedDiv' : ''" @click="depthclick(1)">
                            0cm
                        </p>
                        <p :class="active == '2' ? 'SelectedDiv' : ''" @click="depthclick(2)">
                            -10cm
                        </p>
                        <p :class="active == '3' ? 'SelectedDiv' : ''" @click="depthclick(3)">
                            -20cm
                        </p>
                        <p :class="active == '4' ? 'SelectedDiv' : ''" @click="depthclick(4)">
                            -30cm
                        </p>
                        <p :class="active == '5' ? 'SelectedDiv' : ''" @click="depthclick(5)">
                            -40cm
                        </p>
                    </div>
                    <div ref="soilDiv" class="soilDiv"></div>
                </div>
                <div class="rightFoldDiv" @click="rightFoldClick()">
                    <el-tooltip
                        :disabled="!rightWraFlag"
                        :show-arrow="false"
                        hide-after="0"
                        show-after="200"
                        class="box-item"
                        effect="dark"
                        content="收起"
                        placement="top"
                    >
                        <img v-if="rightWraFlag" src="@/assets/images/close1.png" alt="" />
                    </el-tooltip>
                    <el-tooltip
                        :disabled="rightWraFlag"
                        :show-arrow="false"
                        hide-after="0"
                        show-after="200"
                        class="box-item"
                        effect="dark"
                        content="展开"
                        placement="top"
                    >
                        <img
                            class="imgrotate"
                            v-if="!rightWraFlag"
                            src="@/assets/images/close1.png"
                            alt=""
                        />
                    </el-tooltip>
                </div>
            </div>

            <div class="bottom_center" v-show="bottomFlags">
                <div class="left_bottom">
                    <div class="title">
                        <span>设备照片</span>
                    </div>
                    <div class="imgdiv">
                        <img
                            src="https://img.js.design/assets/img/641d73b4634e77963ddc9e3c.png#34e63fa85ea624d67ab959d24318b0e9"
                            alt=""
                        />
                    </div>
                </div>
                <div class="right_bottom">
                    <div class="title">
                        <span>虫情监测数据</span>
                        <p @click="bugarrsVisibles">
                            历史数据 &nbsp;
                            <img
                                src="@/assets/icons/svg/downloads.svg"
                                style="width: 14px; height: 14px; cursor: pointer"
                            />
                        </p>
                    </div>
                    <div class="tableDiv">
                        <el-table
                            max-height="100%"
                            height="100%"
                            :data="bugarr"
                            stripe
                            style="width: 100%"
                            :header-cell-style="{ 'text-align': 'center' }"
                            :cell-style="{ 'text-align': 'center' }"
                            @cell-click="cellClick"
                        >
                            <el-table-column width="90" prop="devCode" label="设备编号" />
                            <el-table-column prop="pictureTime" label="监测时间">
                                <template #default="scope">
                                    <div>{{ handleDate(scope.row.pictureTime) }}</div>
                                    <div>{{ handleTime(scope.row.pictureTime) }}</div>
                                </template>
                            </el-table-column>
                            <el-table-column
                                class="red"
                                prop="warning"
                                width="52"
                                :filters="[
                                    { text: '有', value: '有' },
                                    { text: '无', value: '无' },
                                ]"
                                :filter-method="filterHandler"
                                label="预警情况"
                            >
                                <template #default="scope">
                                    <span
                                        v-if="scope.row.warning === '有'"
                                        style="
                                            background-color: rgba(255, 62, 57, 1);
                                            padding: 2px 12px 2px 12px;
                                            border-radius: 2px;
                                        "
                                    >
                                        {{ scope.row.warning }}
                                    </span>
                                    <span
                                        v-else
                                        style="
                                            background-color: rgba(9, 222, 133, 1);
                                            padding: 2px 12px 2px 12px;
                                            border-radius: 2px;
                                        "
                                    >
                                        {{ scope.row.warning }}
                                    </span>
                                </template>
                            </el-table-column>
                            <el-table-column prop="picturePath" label="照片">
                                <template #default="scope">
                                    <div v-if="scope.row.warning === '无'">
                                        <image-preview
                                            append-to-body
                                            style="width: 60px; height: 60px"
                                            :src="scope.row.picturePath"
                                            :zoom-rate="1.2"
                                            fit="cover"
                                        >
                                            <div slot="error" class="image-slot">
                                                <i class="el-icon-picture-outline"></i>
                                            </div>
                                        </image-preview>
                                    </div>
                                    <div v-if="scope.row.warning === '有'">
                                        <el-image
                                            style="width: 60px; height: 60px"
                                            :src="scope.row.picturePath"
                                            :fit="fit"
                                        />
                                    </div>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </div>
                <div class="bottonFold" @click="bottomFoldClick">
                    <el-tooltip
                        :disabled="bottomFold"
                        :show-arrow="false"
                        hide-after="0"
                        show-after="200"
                        class="box-item"
                        effect="dark"
                        content="展开"
                        placement="top"
                    >
                        <img v-if="!bottomFold" src="@/assets/images/open2.png" alt="" />
                    </el-tooltip>
                    <el-tooltip
                        :disabled="!bottomFold"
                        :show-arrow="false"
                        hide-after="0"
                        show-after="200"
                        class="box-item"
                        effect="dark"
                        content="收起"
                        placement="top"
                    >
                        <img
                            class="imgrotate"
                            v-if="bottomFold"
                            src="@/assets/images/open2.png"
                            alt=""
                        />
                    </el-tooltip>
                </div>
            </div>
            <div class="tool">
                <span><img src="@/assets/images/LAYER.png" alt="" /></span>
                <span><img src="@/assets/images/amplify.png" alt="" /></span>
                <span><img src="@/assets/images/reduce.png" alt="" /></span>
                <span><img src="@/assets/images/measure.png" alt="" /></span>
                <span><img src="@/assets/images/face.png" alt="" /></span>
                <span><img src="@/assets/images/position.png" alt="" /></span>
            </div>
            <div id="popup" class="ol-popup">
                <div class="pophead" style="width: 100%; height: 0px">
                    <div
                        id="popup-title"
                        style="
                            font: bold 15px sans-serif;
                            align: left;
                            position: absolute;
                            top: 5px;
                            left: 8px;
                            color: #000000;
                        "
                    ></div>
                    <a
                        href="#"
                        id="popup-closer"
                        class="ol-popup-closer"
                        style="color: #8e908c"
                    ></a>
                </div>
                <div id="popup-content" style="padding: 10px"></div>
            </div>
            <div id="pop">
                <div class="content">
                    <div>
                        设备：
                        <p>{{ popdata.dev_code }}</p>
                    </div>
                    <div>
                        经度：
                        <p>{{ popdata.msLongitude }}</p>
                    </div>
                    <div>
                        纬度：
                        <p>{{ popdata.msLatitude }}</p>
                    </div>
                    <div>
                        设备状况：
                        <p>
                            <span
                                style="background-color: rgba(67, 207, 124, 1)"
                                v-if="popdata.equipment == '正常'"
                            >
                                {{ popdata.equipment }}
                            </span>
                            <span style="background: red" v-else>{{ popdata.equipment }}</span>
                        </p>
                    </div>
                </div>
                <div class="cancel" @click="hiddenOverlayChart">X</div>
            </div>
            <el-button v-if="flag" class="back_button" @click="back()">返回</el-button>
            <el-dialog destroy-on-close v-model="visible" :show-close="false">
                <template #header="{ close, titleId, titleClass }">
                    <div class="my-header">
                        <h4 :id="titleId" :class="titleClass">历史数据查询</h4>
                        <div class="buttonbox">
                            <el-button type="primary" @click="query">
                                <span style="vertical-align: middle">查询</span>
                            </el-button>
                            <el-button type="primary" @click="ondownload()">
                                <span style="vertical-align: middle">下载</span>
                            </el-button>
                            <el-button type="primary" @click="resetting">
                                <span style="vertical-align: middle">重置</span>
                            </el-button>
                            &emsp;
                            <el-icon style="cursor: pointer" @click="close"><Close /></el-icon>
                        </div>
                    </div>
                </template>
                <div class="select_div">
                    <div class="slele_time">
                        <div class="time_on">
                            开始时间：
                            <el-date-picker v-model="value1" type="datetime" placeholder="请选择" />
                        </div>
                        &emsp;
                        <div class="time_end">
                            结束时间：
                            <el-date-picker v-model="value2" type="datetime" placeholder="请选择" />
                        </div>
                        &emsp;
                        <div class="flag">
                            预警情况：
                            <el-select v-model="value3" class="m-2" placeholder="请选择">
                                <el-option
                                    v-for="item in flagarr"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                />
                            </el-select>
                        </div>
                    </div>
                    <div class="device">
                        <el-select v-model="deviceValue" class="m-2" placeholder="请选择">
                            <el-option
                                popper-class="device_item"
                                v-for="item in options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            />
                        </el-select>
                    </div>
                </div>
                <div class="tableDiv">
                    <el-table
                        :header-cell-style="{ 'text-align': 'center' }"
                        :cell-style="{ 'text-align': 'center' }"
                        :data="pagingarr"
                        stripe
                        style="width: 100%"
                    >
                        <el-table-column prop="id" label="编号" />
                        <el-table-column prop="devCode" label="设备号" />
                        <el-table-column prop="pictureTime" label="监测时间" />
                        <el-table-column class="red" prop="warning" width="52" label="预警情况">
                            <template #default="scope">
                                <span
                                    v-if="scope.row.warning === '有'"
                                    style="
                                        background-color: rgba(255, 62, 57, 1);
                                        padding: 2px 12px 2px 12px;
                                        border-radius: 2px;
                                    "
                                >
                                    {{ scope.row.warning }}
                                </span>
                                <span
                                    v-else
                                    style="
                                        background-color: rgba(9, 222, 133, 1);
                                        padding: 5px 10px;
                                        border-radius: 2px;
                                    "
                                >
                                    {{ scope.row.warning }}
                                </span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="picturePath" label="照片">
                            <template #default="scope">
                                <div v-if="scope.row.warning === '无'">
                                    <image-preview
                                        append-to-body
                                        style="width: 60px; height: 60px"
                                        :src="scope.row.picturePath"
                                        :zoom-rate="1.2"
                                        fit="cover"
                                    >
                                        <div slot="error" class="image-slot">
                                            <i class="el-icon-picture-outline"></i>
                                        </div>
                                    </image-preview>
                                </div>
                                <div v-if="scope.row.warning === '有'">
                                    <el-image
                                        style="width: 60px; height: 60px"
                                        :src="scope.row.picturePath"
                                        :fit="fit"
                                    />
                                </div>
                            </template>
                        </el-table-column>
                    </el-table>
                    <div class="block">
                        <el-pagination
                            background
                            layout="prev, pager, next"
                            :current-page="currentPage"
                            :page-size="pageSize"
                            @current-change="handleCurrentChange"
                            :total="tableData.arr.length"
                        />
                    </div>
                </div>
            </el-dialog>
            <el-dialog destroy-on-close v-model="visibles" :show-close="false">
                <template #header="{ close, titleId, titleClass }">
                    <div class="my-header">
                        <h4 :id="titleId" :class="titleClass">历史数据查询</h4>
                        <div class="buttonbox">
                            <el-button type="primary" @click="querys">
                                <span style="vertical-align: middle">查询</span>
                            </el-button>
                            <el-button type="primary" @click="ondownload2">
                                <span style="vertical-align: middle">下载</span>
                            </el-button>
                            <el-button @click="resettings" type="primary">
                                <span style="vertical-align: middle">重置</span>
                            </el-button>
                            &emsp;
                            <el-icon style="cursor: pointer" @click="close"><Close /></el-icon>
                        </div>
                    </div>
                </template>
                <div class="select_div">
                    <div class="slele_time">
                        <div class="time_on">
                            开始时间：
                            <el-date-picker v-model="value1" type="datetime" placeholder="请选择" />
                        </div>
                        &emsp;
                        <div class="time_end">
                            结束时间：
                            <el-date-picker v-model="value2" type="datetime" placeholder="请选择" />
                        </div>
                        &emsp;
                        <div class="flag">
                            预警情况：
                            <el-select v-model="value3" class="m-2" placeholder="请选择">
                                <el-option
                                    v-for="item in flagarr"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                />
                            </el-select>
                        </div>
                    </div>
                    <div class="device">
                        <el-select v-model="deviceValue" class="m-2" placeholder="请选择">
                            <el-option
                                popper-class="device_item"
                                v-for="item in options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            />
                        </el-select>
                    </div>
                </div>
                <div class="tableDiv">
                    <el-table
                        :header-cell-style="{ 'text-align': 'center' }"
                        :cell-style="{ 'text-align': 'center' }"
                        :data="bugarrs"
                        stripe
                        style="width: 100%"
                        @cell-click="cellClick"
                    >
                        <el-table-column prop="id" label="编号" />
                        <el-table-column prop="devCode" label="设备号" />
                        <el-table-column prop="pictureTime" label="监测时间" />
                        <el-table-column class="red" prop="warning" width="52" label="预警情况">
                            <template #default="scope">
                                <span
                                    v-if="scope.row.warning === '有'"
                                    style="
                                        background-color: rgba(255, 62, 57, 1);
                                        padding: 2px 12px 2px 12px;
                                        border-radius: 2px;
                                    "
                                >
                                    {{ scope.row.warning }}
                                </span>
                                <span
                                    v-else
                                    style="
                                        background-color: rgba(9, 222, 133, 1);
                                        padding: 5px 10px;
                                        border-radius: 2px;
                                    "
                                >
                                    {{ scope.row.warning }}
                                </span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="picturesMark2O1List" label="害虫名称">
                            <template #default="scope">
                                <span
                                    v-for="(item, index) in scope.row.picturesMark2O1List"
                                    :key="index"
                                >
                                    {{
                                        scope.row.picturesMark2O1List.length > 0
                                            ? item.pestName
                                            : '无'
                                    }},
                                </span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="pictureTime" label="害虫个数">
                            <template #default="scope">
                                <span>{{ scope.row.picturesMark2O1List.length }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="picturePath" label="照片">
                            <template #default="scope">
                                <div v-if="scope.row.warning === '无'">
                                    <image-preview
                                        append-to-body
                                        style="width: 60px; height: 60px"
                                        :src="scope.row.picturePath"
                                        :zoom-rate="1.2"
                                        fit="cover"
                                    >
                                        <div slot="error" class="image-slot">
                                            <i class="el-icon-picture-outline"></i>
                                        </div>
                                    </image-preview>
                                </div>
                                <div v-if="scope.row.warning === '有'">
                                    <el-image
                                        style="width: 60px; height: 60px"
                                        :src="scope.row.picturePath"
                                        :fit="fit"
                                    />
                                </div>
                            </template>
                        </el-table-column>
                    </el-table>
                    <div class="block">
                        <el-pagination
                            background
                            layout="prev, pager, next"
                            :current-page="currentPage"
                            :page-size="pageSize"
                            @current-change="handleCurrentChanges"
                            :total="bugarr.length"
                        />
                    </div>
                </div>
            </el-dialog>
            <el-dialog destroy-on-close v-model="visibless" :show-close="false">
                <template #header="{ close, titleId, titleClass }">
                    <div class="my-header">
                        <h4 :id="titleId" :class="titleClass">土壤历史数据查询</h4>
                        <div class="buttonbox">
                            <el-button type="primary" @click="queryss">
                                <span style="vertical-align: middle">查询</span>
                            </el-button>
                            <el-button type="primary" @click="ondownload3">
                                <span style="vertical-align: middle">下载</span>
                            </el-button>
                            <el-button @click="resettingss" type="primary">
                                <span style="vertical-align: middle">重置</span>
                            </el-button>
                            &emsp;
                            <el-icon style="cursor: pointer" @click="close"><Close /></el-icon>
                        </div>
                    </div>
                </template>
                <div class="select_div">
                    <div class="slele_time">
                        <div class="time_on">
                            开始时间：
                            <el-date-picker v-model="value1" type="datetime" placeholder="请选择" />
                        </div>
                        &emsp;
                        <div class="time_end">
                            结束时间：
                            <el-date-picker v-model="value2" type="datetime" placeholder="请选择" />
                        </div>
                        &emsp;
                        <div class="flag">
                            预警情况：
                            <el-select v-model="value3" class="m-2" placeholder="请选择">
                                <el-option
                                    v-for="item in flagarr"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                />
                            </el-select>
                        </div>
                    </div>
                    <div class="device">
                        <el-select v-model="deviceValue" class="m-2" placeholder="请选择">
                            <el-option
                                popper-class="device_item"
                                v-for="item in options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            />
                        </el-select>
                    </div>
                </div>
                <div class="tableDiv">
                    <el-table
                        :header-cell-style="{ 'text-align': 'center' }"
                        :cell-style="{ 'text-align': 'center' }"
                        :data="soilArr"
                        stripe
                        style="width: 100%"
                    >
                        <el-table-column prop="dataTime" label="日期" />
                        <el-table-column prop="soilTemperature1" label="0cm温度（℃）" />
                        <el-table-column prop="soilTemperature2" label="-10cm温度" />
                        <el-table-column prop="soilTemperature3" label="-20cm温度" />
                        <el-table-column prop="soilTemperature4" label="-30cm温度" />
                        <el-table-column prop="soilTemperature5" label="-40温度" />
                        <el-table-column prop="soilHumidity1" width="80" label="0cm湿度(%rh)" />
                        <el-table-column prop="soilHumidity2" label="-10cm湿度" />
                        <el-table-column prop="soilHumidity3" label="-20cm湿度" />
                        <el-table-column prop="soilHumidity4" label="-30cm湿度" />
                        <el-table-column prop="soilHumidity5" label="-40cm湿度" />
                        <el-table-column prop="soilPh" width="70" label="PH值（ph）" />
                        <el-table-column prop="soilEc" width="70" label="EC值(S/cm)" />

                        <el-table-column class="red" prop="warning" width="52" label="预警情况">
                            <template #default="scope">
                                <span
                                    v-if="scope.row.warning === '有'"
                                    style="
                                        background-color: rgba(255, 62, 57, 1);
                                        padding: 2px 12px 2px 12px;
                                        border-radius: 2px;
                                    "
                                >
                                    {{ scope.row.warning }}
                                </span>
                                <span
                                    v-else
                                    style="
                                        background-color: rgba(9, 222, 133, 1);
                                        padding: 2px 12px 2px 12px;
                                        border-radius: 2px;
                                    "
                                >
                                    {{ scope.row.warning }}
                                </span>
                            </template>
                        </el-table-column>
                    </el-table>
                    <div class="block">
                        <el-pagination
                            background
                            layout="prev, pager, next"
                            :current-page="currentPage"
                            :page-size="pageSize"
                            @current-change="handleCurrentChangess"
                            :total="soilAll.length"
                        />
                    </div>
                </div>
            </el-dialog>
            <div class="modelDiv">
                <el-dialog destroy-on-close v-model="dialogTableVisible" title="预警情况">
                    <image-preview
                        append-to-body
                        :src="gridData.picturePath"
                        :zoom-rate="1.2"
                        fit="cover"
                    >
                        <div slot="error" class="image-slot">
                            <i class="el-icon-picture-outline"></i>
                        </div>
                    </image-preview>

                    <!-- <el-image :src="gridData.picturePath">
                        <template #placeholder>
                            <div class="image-slot">
                                Loading
                                <span class="dot">...</span>
                            </div>
                        </template>
                    </el-image> -->
                    <div class="center">
                        <div class="header">识别结果</div>
                        <div v-for="(item, index) in gridArr" :key="index">
                            <span>害虫名称：{{ index }}</span>
                            <span>害虫个数：{{ item }}</span>
                        </div>
                    </div>
                </el-dialog>
            </div>
        </div>
        <div class="tabulation">
            <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
                <el-tab-pane label="全部" name="全部"></el-tab-pane>
                <el-tab-pane label="智能孢子仪" name="智能孢子仪" />
                <el-tab-pane label="虫情监测仪" name="虫情监测仪" />
                <el-tab-pane label="土壤墒情、土质" name="土壤墒情、土质" />
            </el-tabs>
            <div class="tabulationCente">
                <div class="left">
                    <p>
                        当前选择 ：
                        <span style="color: rgba(100, 195, 164, 1)">{{ label2 }}</span>
                    </p>

                    <el-tree
                        :data="devicesArr"
                        :props="defaultProps"
                        @node-click="handleNodeClick"
                    />
                </div>
                <div class="freckle">
                    <div class="searchDiv">
                        <el-form :inline="true" :model="formInline" class="demo-form-inline">
                            <el-form-item style="width: 180px" label="预警情况:">
                                <el-select
                                    popper-class="selectCity"
                                    v-model="formInline.flag"
                                    placeholder="请选择"
                                >
                                    <el-option label="有" value="有" />
                                    <el-option label="无" value="无" />
                                </el-select>
                            </el-form-item>
                            <el-form-item style="width: 300px" label="监测时间:">
                                <el-date-picker
                                    v-model="value1"
                                    type="daterange"
                                    range-separator="➡️"
                                    start-placeholder="开始日期"
                                    end-placeholder="结束日期"
                                />
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="onSubmit">查询</el-button>
                                <el-button plain @click="resetForm">重置</el-button>
                                <el-button v-if="!operate" type="primary" text @click="dowcity">
                                    <img src="@/assets/images/dow.png" alt="" />
                                    下载
                                </el-button>
                            </el-form-item>
                        </el-form>
                        <div class="modeDiv" @click="SwitchMode">
                            <div :class="SwitchFlag ? 'Selected' : ''">表格模式</div>
                            <div :class="SwitchFlag ? '' : 'Selecteds'">图表模式</div>
                        </div>
                    </div>
                    <div class="chartModeFather">
                        <div class="tableBox" v-show="SwitchFlag">
                            <el-table
                                :data="tableNewData"
                                :header-cell-style="{ 'text-align': 'center' }"
                                :cell-style="{ 'text-align': 'center' }"
                                header-row-class-name="tabth"
                                height="80%"
                                highlight-current-row
                            >
                                <el-table-column fixed="left" width="160" label="监测时间">
                                    <template #default="scope">
                                        <span v-if="label3 == '土壤墒情、土质'">
                                            {{ scope.row.dataTime }}
                                        </span>
                                        <span v-if="label3 !== '土壤墒情、土质'">
                                            {{ scope.row.pictureTime }}
                                        </span>
                                    </template>
                                </el-table-column>
                                <el-table-column class="red" label="预警情况">
                                    <template #default="scope">
                                        <span
                                            v-if="scope.row.warning === '有'"
                                            style="
                                                background-color: rgba(255, 62, 57, 1);
                                                color: rgba(255, 255, 255, 1);
                                                padding: 2px 12px 2px 12px;
                                                border-radius: 2px;
                                            "
                                        >
                                            {{ scope.row.warning }}
                                        </span>
                                        <span
                                            v-else
                                            style="
                                                background-color: rgba(9, 222, 133, 1);
                                                padding: 2px 12px 2px 12px;
                                                color: rgba(255, 255, 255, 1);
                                                border-radius: 2px;
                                            "
                                        >
                                            {{ scope.row.warning }}
                                        </span>
                                    </template>
                                </el-table-column>
                                <el-table-column
                                    v-for="(item, index) in tableItem"
                                    :key="index"
                                    :label="item.lable"
                                    width="120"
                                >
                                    <template #default="scope">
                                        <div v-if="label3 == '虫情监测仪'">
                                            <span
                                                v-if="scope.row.warning === '有'"
                                                style="color: red"
                                            >
                                                <span
                                                    v-for="(value, key) in scope.row.obj"
                                                    :key="key"
                                                >
                                                    {{ key }}：{{ value }}只
                                                    <br />
                                                </span>
                                                <!-- {{
                                                    scope.row.picturesMark2O1List[0].pestName +
                                                    ':' +
                                                    scope.row.picturesMark2O1List.length
                                                }}个 -->
                                            </span>
                                            <span v-else>
                                                {{ scope.row.warning }}
                                            </span>
                                        </div>
                                        <div v-if="label3 == '土壤墒情、土质'">
                                            <span
                                                v-if="
                                                    scope.row.style &&
                                                    scope.row.style.includes(item.value)
                                                "
                                                style="color: red"
                                            >
                                                {{ scope.row[item.value] }}
                                            </span>
                                            <span v-else>
                                                {{ scope.row[item.value] }}
                                            </span>
                                        </div>
                                    </template>
                                </el-table-column>
                                <el-table-column label="操作">
                                    <template #default="scope">
                                        <span
                                            style="color: rgba(100, 195, 164, 1); cursor: pointer"
                                            @click="onDetail(scope.row)"
                                        >
                                            查看详情
                                        </span>
                                    </template>
                                </el-table-column>
                            </el-table>
                            <div class="example-pagination-block">
                                共{{ tabulation.length }}条
                                <el-pagination
                                    background
                                    layout="prev, pager, next"
                                    :total="tabulation.length"
                                    :current-page="tabulationcurrentPage"
                                    :page-size="tabulationpageSize"
                                    @current-change="tabulationCurrentChange"
                                />
                            </div>
                        </div>
                        <div v-show="!SwitchFlag" class="chartMode">
                            <div v-if="label3 == '土壤墒情、土质'" class="depth">
                                <p
                                    :class="active == '1' ? 'SelectedDiv' : ''"
                                    @click="depthclick(1)"
                                >
                                    0cm
                                </p>
                                <p
                                    :class="active == '2' ? 'SelectedDiv' : ''"
                                    @click="depthclick(2)"
                                >
                                    -10cm
                                </p>
                                <p
                                    :class="active == '3' ? 'SelectedDiv' : ''"
                                    @click="depthclick(3)"
                                >
                                    -20cm
                                </p>
                                <p
                                    :class="active == '4' ? 'SelectedDiv' : ''"
                                    @click="depthclick(4)"
                                >
                                    -30cm
                                </p>
                                <p
                                    :class="active == '5' ? 'SelectedDiv' : ''"
                                    @click="depthclick(5)"
                                >
                                    -40cm
                                </p>
                                <p
                                    :class="active == '6' ? 'SelectedDiv' : ''"
                                    @click="depthclick(6)"
                                >
                                    EC值
                                </p>
                                <p
                                    :class="active == '7' ? 'SelectedDiv' : ''"
                                    @click="depthclick(7)"
                                >
                                    PH值
                                </p>
                            </div>
                            <div
                                v-show="label3 == '土壤墒情、土质'"
                                ref="chartModeDiv"
                                class="chartModeDiv"
                            ></div>
                            <div class="tableBoxs" v-if="label3 !== '土壤墒情、土质'">
                                <div class="insectDiv">
                                    <el-row class="gutters" :gutter="40">
                                        <el-col
                                            v-for="(item, index) in tableNewData"
                                            :key="index"
                                            :span="6"
                                        >
                                            <el-card :body-style="{ padding: '0px' }">
                                                <div class="ins">
                                                    <image-preview
                                                        append-to-body
                                                        :src="item.picturePath"
                                                        :zoom-rate="1.2"
                                                        fit="cover"
                                                    >
                                                        <div slot="error" class="image-slot">
                                                            <i class="el-icon-picture-outline"></i>
                                                        </div>
                                                    </image-preview>
                                                    <span
                                                        v-if="item.warning == '无'"
                                                        style="
                                                            background-color: rgba(67, 207, 124, 1);
                                                        "
                                                        class="yj"
                                                    >
                                                        无预警
                                                    </span>
                                                    <span
                                                        v-if="item.warning == '有'"
                                                        style="background-color: red"
                                                        class="yj"
                                                    >
                                                        有预警
                                                    </span>
                                                </div>

                                                <div style="font-size: 12px">
                                                    <div class="bottom">
                                                        <time class="time">
                                                            {{ item.pictureTime }}
                                                        </time>
                                                    </div>
                                                    <br />
                                                    <span
                                                        style="color: red"
                                                        v-if="item.warning == '有'"
                                                    >
                                                        <span
                                                            v-for="(value, key) in item.obj"
                                                            :key="key"
                                                        >
                                                            {{ key }}:{{ value }}只
                                                            <br />
                                                        </span>
                                                    </span>

                                                    <span
                                                        style="color: rgba(67, 207, 124, 1)"
                                                        v-if="item.warning == '无'"
                                                    >
                                                        正常
                                                    </span>
                                                </div>
                                            </el-card>
                                        </el-col>
                                    </el-row>
                                </div>
                                <div class="example-pagination-block">
                                    共{{ tabulation.length }}条
                                    <el-pagination
                                        background
                                        layout="prev, pager, next"
                                        :total="tabulation.length"
                                        :current-page="tabulationcurrentPage"
                                        :page-size="tabulationpageSize"
                                        @current-change="tabulationCurrentChange"
                                    />
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="centent">
                    <div class="arrow" @click="foldClick">
                        <p v-if="!flags">
                            <img style="width: 300%" src="@/assets/images/shouhui.png" />
                        </p>
                        <p v-if="flags">
                            <img style="width: 300%" src="@/assets/images/zhankai.png" />
                        </p>
                    </div>
                </div>
                <div v-show="!flags" class="cesiumContainersDiv">
                    <div id="cesiumContainers" class="detailed"></div>
                    <div id="pops">
                        <div class="content">
                            <div>
                                设备：
                                <p>{{ popdata.dev_code }}</p>
                            </div>
                            <div>
                                经度：
                                <p>{{ popdata.msLongitude }}</p>
                            </div>
                            <div>
                                纬度：
                                <p>{{ popdata.msLatitude }}</p>
                            </div>
                            <div>
                                设备状况：
                                <p>
                                    <span
                                        style="background-color: rgba(67, 207, 124, 1)"
                                        v-if="popdata.equipment == '正常'"
                                    >
                                        {{ popdata.equipment }}
                                    </span>
                                    <span style="background: red" v-else>
                                        {{ popdata.equipment }}
                                    </span>
                                </p>
                            </div>
                        </div>
                        <div class="cancel" @click="hiddenOverlayCharts">X</div>
                    </div>
                </div>
            </div>
            <el-dialog
                v-model="DetailVisible"
                title="监测结果详情"
                width="35%"
                :before-close="handleClose"
            >
                <div v-if="label3 !== '土壤墒情、土质'" class="rowContent">
                    <div class="rowContentTop">
                        <div class="rowContentchildren">
                            <p>
                                {{ DetailArr.devCode }}
                                <span
                                    v-if="DetailArr.warning == '有'"
                                    style="background: rgba(212, 48, 48, 1)"
                                >
                                    有预警
                                </span>
                                <span
                                    v-if="DetailArr.warning == '无'"
                                    style="background: rgba(67, 207, 124, 1)"
                                >
                                    无预警
                                </span>
                            </p>
                            <span>{{ DetailArr.pictureTime }}</span>
                        </div>
                        <div v-if="DetailArr.warning == '有'">
                            <span v-if="label3 == '虫情监测仪'">
                                <span v-for="(value, key) in DetailArr.obj" :key="key">
                                    {{ key }}:{{ value }}只,
                                </span>
                            </span>
                        </div>
                    </div>
                    <image-preview
                        v-if="label3 !== '土壤墒情、土质'"
                        append-to-body
                        :src="`${DetailArr.picturePath}`"
                        :zoom-rate="1.2"
                        fit="cover"
                    >
                        <div slot="error" class="image-slot">
                            <i class="el-icon-picture-outline"></i>
                        </div>
                    </image-preview>
                </div>
                <div class="rowContent_bottom" v-if="label3 == '土壤墒情、土质'">
                    <div class="rowContentTop">
                        <div class="rowContentchildren">
                            <p>
                                <span
                                    style="
                                        font-size: 16px;
                                        font-weight: 700;
                                        color: rgba(100, 195, 164, 1);
                                        margin-left: 0;
                                    "
                                >
                                    土壤墒情
                                </span>
                                <span
                                    v-if="DetailArr.warning == '有'"
                                    style="background: rgba(212, 48, 48, 1)"
                                >
                                    有预警
                                </span>
                                <span
                                    v-if="DetailArr.warning == '无'"
                                    style="background: rgba(67, 207, 124, 1)"
                                >
                                    无预警
                                </span>
                            </p>
                            <span>{{ DetailArr.dataTime }}</span>
                        </div>
                        <div v-if="DetailArr.warning == '有'">
                            <span
                                v-for="(item, index) in DetailArr.style"
                                :key="index"
                                style="font-size: 16px; font-weight: 00"
                            >
                                &emsp;
                                {{ dictionary[item] }} :
                                <span style="color: red; font-size: 18px; font-weight: 700">
                                    {{ DetailArr[item] }}
                                </span>
                            </span>
                        </div>
                    </div>
                    <p style="margin-left: 15px; font-size: 16px; font-weight: 700">土壤湿度</p>
                    <div class="rowContentTop">
                        <div>
                            <div class="rowContentTopChildren">
                                <div>
                                    0cm湿度(℃):
                                    <span
                                        style="
                                            color: rgba(67, 207, 124, 1);
                                            font-size: 18px;
                                            font-weight: 700;
                                        "
                                        v-if="
                                            DetailArr.soilHumidity1 >= 5 ||
                                            DetailArr.soilHumidity1 <= 60
                                        "
                                    >
                                        {{ DetailArr.soilHumidity1 }}
                                    </span>
                                    <span
                                        style="
                                            color: rgba(212, 48, 48, 1);
                                            font-size: 18px;
                                            font-weight: 700;
                                        "
                                        v-else
                                    >
                                        {{ DetailArr.soilHumidity1 }}
                                    </span>
                                </div>
                                <div>
                                    -10cm湿度(℃):
                                    <span
                                        style="
                                            color: rgba(67, 207, 124, 1);
                                            font-size: 18px;
                                            font-weight: 700;
                                        "
                                        v-if="
                                            DetailArr.soilHumidity2 >= 0 ||
                                            DetailArr.soilHumidity2 <= 30
                                        "
                                    >
                                        {{ DetailArr.soilHumidity2 }}
                                    </span>
                                    <span
                                        style="
                                            color: rgba(212, 48, 48, 1);
                                            font-size: 18px;
                                            font-weight: 700;
                                        "
                                        v-else
                                    >
                                        {{ DetailArr.soilHumidity2 }}
                                    </span>
                                </div>
                                <div>
                                    -20cm湿度(℃):
                                    <span
                                        style="
                                            color: rgba(67, 207, 124, 1);
                                            font-size: 18px;
                                            font-weight: 700;
                                        "
                                        v-if="
                                            DetailArr.soilHumidity3 >= 0 ||
                                            DetailArr.soilHumidity3 <= 30
                                        "
                                    >
                                        {{ DetailArr.soilHumidity3 }}
                                    </span>
                                    <span
                                        style="
                                            color: rgba(212, 48, 48, 1);
                                            font-size: 18px;
                                            font-weight: 700;
                                        "
                                        v-else
                                    >
                                        {{ DetailArr.soilHumidity3 }}
                                    </span>
                                </div>
                                <div>
                                    -30cm湿度(℃):
                                    <span
                                        style="
                                            color: rgba(67, 207, 124, 1);
                                            font-size: 18px;
                                            font-weight: 700;
                                        "
                                        v-if="
                                            DetailArr.soilHumidity4 >= 0 ||
                                            DetailArr.soilHumidity4 <= 40
                                        "
                                    >
                                        {{ DetailArr.soilHumidity4 }}
                                    </span>
                                    <span
                                        style="
                                            color: rgba(212, 48, 48, 1);
                                            font-size: 18px;
                                            font-weight: 700;
                                        "
                                        v-else
                                    >
                                        {{ DetailArr.soilHumidity4 }}
                                    </span>
                                </div>
                                <div>
                                    -40cm湿度(℃):
                                    <span
                                        style="
                                            color: rgba(67, 207, 124, 1);
                                            font-size: 18px;
                                            font-weight: 700;
                                        "
                                        v-if="
                                            DetailArr.soilHumidity5 >= 0 ||
                                            DetailArr.soilHumidity5 <= 40
                                        "
                                    >
                                        {{ DetailArr.soilHumidity5 }}
                                    </span>
                                    <span
                                        style="
                                            color: rgba(212, 48, 48, 1);
                                            font-size: 18px;
                                            font-weight: 700;
                                        "
                                        v-else
                                    >
                                        {{ DetailArr.soilHumidity5 }}
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <p style="margin-left: 15px; font-size: 16px; font-weight: 700">土壤温度</p>
                    <div class="rowContentTop">
                        <div>
                            <div class="rowContentTopChildren">
                                <div>
                                    0cm温度(℃):
                                    <span
                                        style="
                                            color: rgba(67, 207, 124, 1);
                                            font-size: 18px;
                                            font-weight: 700;
                                        "
                                        v-if="
                                            DetailArr.soilTemperature1 >= -10 &&
                                            DetailArr.soilTemperature1 <= 40
                                        "
                                    >
                                        {{ DetailArr.soilTemperature1 }}
                                    </span>
                                    <span
                                        style="
                                            color: rgba(212, 48, 48, 1);
                                            font-size: 18px;
                                            font-weight: 700;
                                        "
                                        v-else
                                    >
                                        {{ DetailArr.soilTemperature1 }}
                                    </span>
                                </div>
                                <div>
                                    -10cm温度(℃):
                                    <span
                                        style="
                                            color: rgba(67, 207, 124, 1);
                                            font-size: 18px;
                                            font-weight: 700;
                                        "
                                        v-if="
                                            DetailArr.soilTemperature2 >= -5 &&
                                            DetailArr.soilTemperature2 <= 40
                                        "
                                    >
                                        {{ DetailArr.soilTemperature2 }}
                                    </span>
                                    <span
                                        style="
                                            color: rgba(212, 48, 48, 1);
                                            font-size: 18px;
                                            font-weight: 700;
                                        "
                                        v-else
                                    >
                                        {{ DetailArr.soilTemperature2 }}
                                    </span>
                                </div>
                                <div>
                                    -20cm温度(℃):
                                    <span
                                        style="
                                            color: rgba(67, 207, 124, 1);
                                            font-size: 18px;
                                            font-weight: 700;
                                        "
                                        v-if="
                                            DetailArr.soilTemperature3 >= 0 &&
                                            DetailArr.soilTemperature3 <= 30
                                        "
                                    >
                                        {{ DetailArr.soilTemperature3 }}
                                    </span>
                                    <span
                                        style="
                                            color: rgba(212, 48, 48, 1);
                                            font-size: 18px;
                                            font-weight: 700;
                                        "
                                        v-else
                                    >
                                        {{ DetailArr.soilTemperature3 }}
                                    </span>
                                </div>
                                <div>
                                    -30cm温度(℃):
                                    <span
                                        style="
                                            color: rgba(67, 207, 124, 1);
                                            font-size: 18px;
                                            font-weight: 700;
                                        "
                                        v-if="
                                            DetailArr.soilTemperature4 >= 0 &&
                                            DetailArr.soilTemperature4 <= 30
                                        "
                                    >
                                        {{ DetailArr.soilTemperature4 }}
                                    </span>
                                    <span
                                        style="
                                            color: rgba(212, 48, 48, 1);
                                            font-size: 18px;
                                            font-weight: 700;
                                        "
                                        v-else
                                    >
                                        {{ DetailArr.soilTemperature4 }}
                                    </span>
                                </div>
                                <div>
                                    -40cm温度(℃):
                                    <span
                                        style="
                                            color: rgba(67, 207, 124, 1);
                                            font-size: 18px;
                                            font-weight: 700;
                                        "
                                        v-if="
                                            DetailArr.soilTemperature5 >= 0 &&
                                            DetailArr.soilTemperature5 <= 30
                                        "
                                    >
                                        {{ DetailArr.soilTemperature5 }}
                                    </span>
                                    <span
                                        style="
                                            color: rgba(212, 48, 48, 1);
                                            font-size: 18px;
                                            font-weight: 700;
                                        "
                                        v-else
                                    >
                                        {{ DetailArr.soilTemperature5 }}
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <p style="margin-left: 15px; font-size: 16px; font-weight: 700">土质</p>
                    <div class="rowContentTop">
                        <div>
                            <div class="rowContentTopChildren">
                                <div>
                                    土壤EC值:
                                    <span
                                        style="
                                            color: rgba(67, 207, 124, 1);
                                            font-size: 18px;
                                            font-weight: 700;
                                        "
                                        v-if="DetailArr.soilEc >= 0 && DetailArr.soilEc <= 0.2"
                                    >
                                        {{ DetailArr.soilEc }}
                                    </span>
                                    <span
                                        style="
                                            color: rgba(212, 48, 48, 1);
                                            font-size: 18px;
                                            font-weight: 700;
                                        "
                                        v-else
                                    >
                                        {{ DetailArr.soilEc }}
                                    </span>
                                </div>
                                <div>
                                    土壤PH值:
                                    <span
                                        style="
                                            color: rgba(67, 207, 124, 1);
                                            font-size: 18px;
                                            font-weight: 700;
                                        "
                                        v-if="DetailArr.soilPh > 5.5 && DetailArr.soilPh < 7.5"
                                    >
                                        {{ DetailArr.soilPh }}
                                    </span>
                                    <span
                                        style="
                                            color: rgba(212, 48, 48, 1);
                                            font-size: 18px;
                                            font-weight: 700;
                                        "
                                        v-else
                                    >
                                        {{ DetailArr.soilPh }}
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </el-dialog>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted, inject, reactive, watch } from 'vue';
import * as echarts from 'echarts';
import TimeLine from '@/components/TimeLine/TimeLine.vue';
import { downLoadFile } from '@/utils/download.js';
import { useEcharts } from '@/hooks/useEcharts';
// import MapInit from '.././components/tiandituapi/tianditu_api.js'
import { getarea, getTownship, getvillage, getareas, dow } from '@/api/crops/classify.js';
import {
    getSpore,
    getfindAllSoil,
    getinsect,
    getsporeEquipment,
    detectionLightsEquipment,
    getsporeEquipmentCondition,
    getequipmentCondition,
    geteqLightEquipmentCondition,
    soilEquipment,
    getdeviceNumber,
    getfindAllSoilTb,
} from '@/api/pestis/pestis.js';
import axios from 'axios';
import 'echarts-gl';
import moment from 'Moment';
import { useRouter } from 'vue-router';
import 'leaflet/dist/leaflet.css';
import L from 'leaflet';
import iconShadow from '/img/marker/mark.png';

let map = L.Map;
const router = useRouter();
const visible = ref(false); //孢子历史数据弹框
const visibles = ref(false); //历史数据弹框
const url = '@/assets/images/shouhui.png';
let flags = ref(false);
const visibless = ref(false);
let dialogTableVisible = ref(false);
let viewer = ref(null);
let viewers = ref(null);
let viewers2 = ref(null);
let viewers3 = ref(null);
let viewers4 = ref(null);
const cesiumContainer = ref(null);
const farmlandDiv = ref(null);
const Phdiv = ref(null);
const soilDiv = ref(null);
const value = ref('370211');
let Township = reactive({ arr: [], brr: [], crr: [] }); //街道
let OptionArr = reactive({ arr: [] });
const clickInfoMap = ref({ name: '', value: '' });
let soilAll = ref([]);
const insectarr = ref([]);
const formLandRef = ref([]);
const flag = ref(false);
let brightFlag = ref('4');
let brightFlags = ref(true);
let bottomFlags = ref(true);
let leftWraFlag = ref(true);
let rightWraFlag = ref(true);
let bottomFold = ref(true);
let label1 = ref('');
let label2 = ref('');
let label3 = ref('');
const value1 = ref(''); //开始时间
const value2 = ref(''); //结束时间
let value3 = ref(''); //结束时间
let devicesArr = ref([]); //全部设备编号
let Site = ref([]); //站点标号
let SwitchFlag = ref(true);
let seachData = ref({});
let tableNewData = ref([]);
let tabulation = ref([]); //列表模式
let tableItem = ref([]);
let DetailVisible = ref(false);
let center = '';
let nums = ref(0);
const flagarr = ref([
    {
        value: '有',
        label: '有',
    },
    {
        value: '无',
        label: '无',
    },
]);
const deviceValue = ref(''); //设备选择
let currentPage = ref(1); //当前页
let pageSize = ref(5); //每页条数
let pagingarr = ref([]); //孢子当前页
let bugarr = ref([]); //孢子总条数
let bugarrs = ref([]); //虫情当前页
let bugarrtime = ref([]); //最近三天虫情
let soilArr = ref([]); //土壤当前页
let EcTimeArr = ref([]); //ec时间
let EcArr = ref([]); //ec值
let PhArr = ref([]); //ph值
let active = ref('1'); //厘米高亮
let temperature = ref([]); //温度集合
let temperature1 = ref([]); //温度集合
let temperature2 = ref([]); //温度集合
let temperature3 = ref([]); //温度集合
let temperature4 = ref([]); //温度集合
let temperature5 = ref([]); //温度集合
let humidity = ref([]); //湿度集合
let humidity1 = ref([]); //湿度集合
let humidity2 = ref([]); //湿度集合
let humidity3 = ref([]); //湿度集合
let humidity4 = ref([]); //湿度集合
let humidity5 = ref([]); //湿度集合
let soilPh = ref([]);
let soilEc = ref([]);
let popdata = ref({});
let gridData = ref([]);
const chartModeDiv = ref(null);
let tabulationcurrentPage = ref(1); //列表当前页
let tabulationpageSize = ref(12); //每页条数
const activeName = ref('全部'); //tabs
let DetailArr = ref([]);
let gridArr = ref({});

const dictionary = ref({
    soilTemperature1: '0cm温度',
    soilTemperature2: '-10cm温度',
    soilTemperature3: '-20cm温度',
    soilTemperature4: '-30cm温度',
    soilTemperature5: '-40cm温度',
    soilHumidity1: '0cm湿度(%)',
    soilHumidity2: '-10cm湿度(%)',
    soilHumidity3: '-20cm湿度(%)',
    soilHumidity4: '-30cm湿度(%)',
    soilHumidity5: '-40cm湿度(%)',
    soilPh: 'PH值(ph)',
    soilEc: 'EC值(S/cm)',
});

let layers = ref(null); //村
let iconLayer = ref(null);

//搜索
let formInline = ref({
    yearMonth: '',
    flag: '',
    divisions: '',
});
var baozi =
    'data:image/png;base64,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';
var chong =
    'data:image/png;base64,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';
var tu =
    'data:image/png;base64,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';
//创建多个icon

const options = ref([
    {
        value: 'dev10101',
        label: 'dev10101',
    },
    {
        value: 'dev20101',
        label: 'dev20101',
    },
]);
watch(
    () => Township.arr,
    val => {
        console.log('val:', val);
    }
);
//行政区划数据
var data = {
    title: [],
};
let dd = {
    小麦: [],
    玉米: [],
    大豆: [],
    地瓜: [],
    花生: [],
    蓝莓: [],
    茶叶: [],
    马铃薯: [],
    白菜和萝卜: [],
    其他: [],
};
//表格数据
let tableData = reactive({ arr: [], arrs: [] });

// 组件挂载完成后执行
onMounted(() => {
    initonMounted();
});
function initonMounted() {
    /*------------地图---------------- */
    // initMap();
    initmap();
    /*------------请求---------------- */
    getSporestime(); //孢子
    getsporeEquipmentConditions(); //孢子设备信息
    getfindAllSoils(); //土壤
    getinsects(); //虫情
    getaArea(); //面积
    initLeafletMap();
    // getTownships();
    getdeviceNumbers('0'); //所有设备列表
    farmland();
    Ph();
    soil();
    DefaultList(); //默认显示列表模式
    localStorage.setItem(router.currentRoute.value.path, false);
}
onUpdated(() => {
    if (localStorage.getItem(router.currentRoute.value.path) == 'true') {
        document.querySelector('.mode').innerText = '列表模式';
        window.document.querySelector('#screenfull').style.display = 'block';
    } else {
        document.querySelector('.mode').innerText = '地图模式';
        window.document.querySelector('#screenfull').style.display = 'none';
    }
});
/*-------------地图------------------------*/

let maps = ref(null);
function initmap() {
    maps = new ol.Map({
        target: 'cesiumContainer',
        controls: ol.control
            .defaults({
                attributionOptions: {
                    collapsed: true,
                },
            })
            .extend([new ol.supermap.control.Logo(), new ol.control.ScaleLine()]),
        view: new ol.View({
            center: [119.86763411957472, 35.88435182141938],
            zoom: 11,
            projection: 'EPSG:4326',
        }),
        layers: [
            new ol.layer.Tile({
                source: new ol.source.Tianditu({
                    layerType: 'img',
                    key: '1d109683f4d84198e37a38c442d68311',
                }),
            }),
            //注记
            // new ol.layer.Tile({
            //     source: new ol.source.Tianditu({
            //         layerType: 'img',
            //         isLabel: true,
            //         key: '1d109683f4d84198e37a38c442d68311',
            //     }),
            // }),
        ],
    });
    cun();
    zhen();
    //滚轮控制村级矢量
    maps.on('moveend', function (e) {
        var zoom = maps.getView().getZoom(); //获取当前地图的缩放级别
        if (zoom >= 13) {
            layers.setVisible(true); //显示图层
        } else {
            layers.setVisible(false);
        }
    });
    alter();
}

const cun = () => {
    layers = new ol.layer.Tile({
        source: new ol.source.TileSuperMapRest({
            url: 'http://36.134.44.75:8090/iserver/services/map-huangdaoqu_bianjie/rest/maps/huangdaoqu_village@huangdaoqu_bianjie',
            //rasterfunction: new SuperMap.NDVIParameter({ redIndex: 0, nirIndex: 2 }),
            cacheEnabled: false,
        }),
        name: 'huangdaoqu_village',
        projection: 'EPSG:4326', //3857
        zIndex: 9999,
    });
    maps.addLayer(layers);
    // var layersArray = map.getLayers();
    // layersArray.insertAt(999, layers);
};
const zhen = () => {
    var layer = new ol.layer.Tile({
        source: new ol.source.TileSuperMapRest({
            url: 'http://36.134.44.75:8090/iserver/services/map-huangdaoqu_bianjie/rest/maps/huangdaoqu_town@huangdaoqu_bianjie',
            //rasterfunction: new SuperMap.NDVIParameter({ redIndex: 0, nirIndex: 2 }),
            cacheEnabled: false,
        }),
        projection: 'EPSG:4326', //3857
        zIndex: 9999,
    });
    maps.addLayer(layer);
};

// 位置图标显示
let positionLayer = null;
let iconStyle = null;
let iconFeature = null;
let vectorSource = null;
const positionIcon = (center, img, name) => {
    iconFeature = new ol.Feature({
        geometry: new ol.geom.Point(center),
        name: name,
        population: 4000,
        rainfall: 500,
    });
    iconStyle = new ol.style.Style({
        image: new ol.style.Icon({
            anchor: [0.5, 46],
            scale: 0.4,
            anchorXUnits: 'fraction',
            anchorYUnits: 'pixels',
            src: img,
        }),
    });
    iconFeature.setStyle(iconStyle);
    vectorSource = new ol.source.Vector({
        features: [iconFeature],
    });
    positionLayer = new ol.layer.Vector({
        source: vectorSource,
    });
    maps.addLayer(positionLayer);
};

// 创建弹框 overlay
const alter = () => {
    var container = document.getElementById('popup');
    //拿到弹出框内容元素
    var content = document.getElementById('popup-content');
    //拿到弹出框关闭元素
    var popupCloser = document.getElementById('popup-closer');
    //创建弹出框容器
    var overlay1 = new ol.Overlay({
        //设置弹出框的容器
        element: container,
        //是否自动平移，即假如标记在屏幕边缘，弹出时自动平移地图使弹出框完全可见
        autoPan: true,
        autoPanAnimation: {
            duration: 250,
            //当Popup超出地图边界时，为了Popup全部可见，地图移动的速度.
        },
    });
    //点击图标显示自定义弹出框
    maps.on('click', function (e) {
        console.log(e.coordinate);
        var pixel = maps.getEventPixel(e.originalEvent);
        maps.forEachFeatureAtPixel(pixel, function (feature) {
            var attr = feature.getProperties();
            console.log(attr);
            content.innerHTML =
                '<div>' +
                '<p>设备名称: ' +
                attr.name +
                '</p>' +
                '<p>经度:' +
                attr.geometry.flatCoordinates[0] +
                '</p>' +
                '<p>纬度:' +
                attr.geometry.flatCoordinates[1] +
                '</p>' +
                '</div>';
            overlay1.setPosition(attr.geometry.flatCoordinates);
            maps.addOverlay(overlay1);
        });
    });
    //关闭弹出框操作
    popupCloser.addEventListener('click', function () {
        overlay1.setPosition(undefined);
    });
};

const initLeafletMap = () => {
    map = L.map('cesiumContainers', {
        center: [36.4, 119.166326], // 地图中心
        zoom: 7, //缩放比列
        zoomControl: false, //禁用 + - 按钮
        doubleClickZoom: false, // 禁用双击放大
        attributionControl: false, // 移除右下角leaflet标识
    });
    //   渲染底图
    L.tileLayer(
        'http://t0.tianditu.com/DataServer?T=img_w&tk=5956e6519f2bb0ae8e57bc834298c9f1&x={x}&y={y}&l={z}'
    ).addTo(map);
    L.tileLayer(
        'http://t0.tianditu.com/DataServer?T=cia_w&tk=5956e6519f2bb0ae8e57bc834298c9f1&x={x}&y={y}&l={z}'
    ).addTo(map);
    L.Util.requestAnimFrame(map.invalidateSize, map, !1, map._container); //解决首次加载不完全问题
};
let townZuowu = ref({ label: [] }); //镇的作物

const DefaultList = () => {
    document.querySelector('.mode').innerText = '地图模式';
    window.document.querySelector('.tabulation').style.display = 'block';
    window.document.querySelector('.centerBox').style.display = 'none';
    window.document.querySelector('#screenfull').style.display = 'none';
};

//智能孢子捕捉点击

const sporeClick = e => {
    brightFlag.value = '1';
    brightFlags.value = false;
    bottomFlags.value = false;
    getsporeEquipmentConditions();
};

//虫情监测点击事件
const insectClick = e => {
    brightFlag.value = '2';
    brightFlags.value = false;
    bottomFlags.value = false;
    geteqLightEquipmentConditions();
};

//土壤点击事件
const soilClick = e => {
    brightFlag.value = '3';
    brightFlags.value = true;
    bottomFlags.value = false;
    getequipmentConditions();
    getfindAllSoils();
};
//展示全部
const ShowAll = () => {
    brightFlag.value = '4';
    bottomFlags.value = true;
    brightFlags.value = true;
    getsporeEquipmentConditions();
};

//孢子切换当前页的容量
const handleCurrentChange = val => {
    currentPage.value = val;
    pagingarr.value = insectarr.value.slice(
        (currentPage.value - 1) * pageSize.value,
        (currentPage.value - 1) * pageSize.value + pageSize.value
    );
};
//列表模式模式切换
const SwitchMode = () => {
    SwitchFlag.value = !SwitchFlag.value;
    const statInfo = chartModeDiv.value; // 获取图表元素
    statInfo.style.width = document.querySelector('.chartModeFather').offsetWidth + 'px'; //初始化echarts图表宽度

    statInfo.style.height = document.querySelector('.chartModeFather').offsetHeight - 100 + 'px';
    console.log(document.querySelector('.chartModeFather').offsetWidth);
    const myChart = echarts.init(statInfo);
    // 设置宽度自适应
    window.addEventListener('resize', () => {
        statInfo.style.width = document.querySelector('.chartModeFather').offsetWidth + 'px';
        statInfo.style.height =
            document.querySelector('.chartModeFather').offsetHeight - 100 + 'px';
        myChart.resize();
    });
    chartModes();
};
//创建ICON构造函数，相当于继承于ICON，可以重新设置属性
var LeafIcon = L.Icon.extend({
    options: {
        // shadowUrl: './icon/leaf-shadow.png', //阴影地址
        iconSize: [50, 50], //图标宽高
        shadowSize: [50, 64], //阴影宽高
        iconAnchor: [22, 94], //图标锚点
        shadowAnchor: [4, 62], //阴影锚点
        popupAnchor: [0, -86], //弹出框弹出位置，相对于图标锚点
    },
});
//创建多个icon
var greenIcon = new LeafIcon({
    iconUrl: iconShadow,
});
const handleNodeClick = (data, node, data1, data2) => {
    value1.value = '';
    formInline.value.flag = '';
    if (!data.children) {
        let oriFatherId = node.parent.data;
        label1.value = oriFatherId.label;
        label2.value = data.label;
        console.log(oriFatherId);
        console.log(label2.value);
        console.log(node.parent);
        console.log(nums.value);
        if (nums.value == '0') {
            oriFatherId.children.forEach(item => {
                console.log(item.label, label2.value);
                if (item.label == label2.value) {
                    label3.value = label1.value;
                }
            });
        } else {
            // console.log(oriFatherId[0].children[0],label2.value);
            // oriFatherId[0].children.forEach(item => {
            //     if (item.label == label2.value) {
            //         label3.value = item.label;
            //     }
            // });
            console.log(nums.value);
            if (nums.value == '1') {
                label3.value = '智能孢子仪';
            } else if (nums.value == '2') {
                label3.value = '虫情监测仪';
            } else if (nums.value == '3') {
                label3.value = '土壤墒情、土质';
            }
        }
        if (label3.value == '智能孢子仪') {
            getSpore({ equipment: label2.value, whetherToDownload: true }).then(res => {
                tabulation.value = res.data;
                tableNewData.value = res.data.slice(
                    (tabulationcurrentPage.value - 1) * tabulationpageSize.value,
                    (tabulationcurrentPage.value - 1) * tabulationpageSize.value +
                        tabulationpageSize.value
                );
                tableItem.value = [];
            });
            // if (viewers.entities) {
            //     viewers.entities.removeAll();
            // }
            getsporeEquipmentCondition().then(res => {
                townZuowu.label = res.data;
                // 创建一个Entity对象加图片
                res.data.forEach((item, index) => {
                    center = L.latLng(item.msLatitude, item.msLongitude);
                    map.setView(center, 17);
                    L.marker([item.msLatitude, item.msLongitude], { icon: greenIcon })
                        .addTo(map)
                        .bindPopup(
                            `<b>智能孢子仪</b><br><br>经度:${item.msLongitude}<br><br>纬度:${item.msLatitude}`
                        )
                        .openPopup();
                });
            });
        } else if (label3.value == '虫情监测仪') {
            getinsect({ equipment: label2.value, whetherToDownload: true }).then(res => {
                tabulation.value = res.data;
                res.data.forEach(item => {
                    if (item.warning == '有') {
                        item.pestName = item.picturesMark2O1List[0].pestName;
                        res.data.forEach(i => {
                            let arr = {};
                            i.picturesMark2O1List.forEach(item => {
                                console.log(item);
                                if (!arr[item.pestName]) {
                                    arr[item.pestName] = 1;
                                } else {
                                    arr[item.pestName] += 1;
                                }
                            });
                            i['obj'] = arr;
                        });
                    }
                });
                tableNewData.value = res.data.slice(
                    (tabulationcurrentPage.value - 1) * tabulationpageSize.value,
                    (tabulationcurrentPage.value - 1) * tabulationpageSize.value +
                        tabulationpageSize.value
                );
                tableItem.value = [
                    {
                        lable: '预警值',
                        value: 'picturesMark201List',
                    },
                ];
            });
            // if (viewers.entities) {
            //     viewers.entities.removeAll();
            // }
            geteqLightEquipmentCondition().then(res => {
                console.log(res.data);
                townZuowu.label = res.data;
                // 创建一个Entity对象加图片
                res.data.forEach((item, index) => {
                    center = L.latLng(item.msLatitude, item.msLongitude);
                    map.setView(center, 17);
                    L.marker([item.msLatitude, item.msLongitude], { icon: greenIcon })
                        .addTo(map)
                        .bindPopup(
                            `<b>虫情监测仪</b><br><br>经度:${item.msLongitude}<br><br>纬度:${item.msLatitude}`
                        )
                        .openPopup();
                });
            });
        } else if (label3.value == '土壤墒情、土质') {
            getfindAllSoil({ equipment: label2.value, whetherToDownload: true }).then(res => {
                tabulation.value = res.data;
                res.data.forEach(item => {
                    item['style'] = [];
                    if (item.warning == '有') {
                        item.limitExceeded.forEach(i => {
                            for (const key in i) {
                                if (key !== 'eqSoilId') {
                                    if (i[key] != null) {
                                        item['style'].push(key);
                                    }
                                }
                            }
                        });
                    }
                });
                tableNewData.value = res.data.slice(
                    (tabulationcurrentPage.value - 1) * tabulationpageSize.value,
                    (tabulationcurrentPage.value - 1) * tabulationpageSize.value +
                        tabulationpageSize.value
                );
                tableItem.value = [
                    {
                        lable: '0cm湿度(%)',
                        value: 'soilHumidity1',
                    },
                    {
                        lable: '-10cm湿度(%)',
                        value: 'soilHumidity2',
                    },
                    {
                        lable: '-20cm湿度(%)',
                        value: 'soilHumidity3',
                    },
                    {
                        lable: '-30cm湿度(%)',
                        value: 'soilHumidity4',
                    },
                    {
                        lable: '-40cm湿度(%)',
                        value: 'soilHumidity5',
                    },
                    {
                        lable: '0cm温度',
                        value: 'soilTemperature1',
                    },
                    {
                        lable: '-10cm温度',
                        value: 'soilTemperature2',
                    },
                    {
                        lable: '-20cm温度',
                        value: 'soilTemperature3',
                    },
                    {
                        lable: '-30cm温度',
                        value: 'soilTemperature4',
                    },
                    {
                        lable: '-40cm温度',
                        value: 'soilTemperature5',
                    },
                    {
                        lable: '-30cm温度',
                        value: 'soilTemperature4',
                    },
                    {
                        lable: '-40cm温度',
                        value: 'soilTemperature5',
                    },
                    {
                        lable: 'PH值(ph)',
                        value: 'soilPh',
                    },
                    {
                        lable: 'EC值(S/cm)',
                        value: 'soilEc',
                    },
                ];
            });
            // if (viewers.entities) {
            //     viewers.entities.removeAll();
            // }
            getequipmentCondition().then(res => {
                townZuowu.label = res.data;
                // 创建一个Entity对象加图片
                res.data.forEach((item, index) => {
                    center = L.latLng(item.msLatitude, item.msLongitude);
                    map.setView(center, 17);
                    L.marker([item.msLatitude, item.msLongitude], { icon: greenIcon })
                        .addTo(map)
                        .bindPopup(
                            `<b>土壤墒情、土质</b><br><br>经度:${item.msLongitude}<br><br>纬度:${item.msLatitude}`
                        )
                        .openPopup();
                });
            });
        }
    }
};

//用经纬度控制视角
const angle = item => {
    let params = {
        lon: item.msLongitude,
        lat: item.msLatitude,
        alt: 10000,
        heading: Cesium.Math.toRadians(0.0),
        pitch: Cesium.Math.toRadians(-90.0),
        roll: 0.0,
        range: 0,
    };
    // viewers.camera.flyTo({
    //     // fromDegrees()将经纬度和高程转换为世界坐标
    //     destination: Cesium.Cartesian3.fromDegrees(params.lon, params.lat, params.alt),
    //     orientation: {
    //         // 指向
    //         heading: params.heading,
    //         // 视角
    //         pitch: params.pitch,
    //         roll: params.roll,
    //     },
    // });
};

const onSubmit = () => {
    console.log(label3.value);
    if (label3.value == '智能孢子仪') {
        getSpore({
            startTime: value1.value[0]
                ? moment(value1.value[0]).format('YYYY-MM-DD HH:mm:ss')
                : null,
            endTime: value1.value[1] ? moment(value1.value[1]).format('YYYY-MM-DD HH:mm:ss') : null,
            early: formInline.value.flag,
            equipment: label2.value,
            whetherToDownload: false,
        }).then(res => {
            tabulation.value = res.data;
            tableNewData.value = res.data.slice(
                (tabulationcurrentPage.value - 1) * tabulationpageSize.value,
                (tabulationcurrentPage.value - 1) * tabulationpageSize.value +
                    tabulationpageSize.value
            );
        });
    } else if (label3.value == '虫情监测仪') {
        getinsect({
            startTime: value1.value[0]
                ? moment(value1.value[0]).format('YYYY-MM-DD HH:mm:ss')
                : null,
            endTime: value1.value[1] ? moment(value1.value[1]).format('YYYY-MM-DD HH:mm:ss') : null,
            early: formInline.value.flag,
            equipment: label2.value,
            whetherToDownload: false,
        }).then(res => {
            res.data.forEach(item => {
                if (item.warning == '有') {
                    item.pestName = item.picturesMark2O1List[0].pestName;
                    res.data.forEach(i => {
                        let arr = {};
                        i.picturesMark2O1List.forEach(item => {
                            if (!arr[item.pestName]) {
                                arr[item.pestName] = 1;
                            } else {
                                arr[item.pestName] += 1;
                            }
                        });
                        i['obj'] = arr;
                    });
                }
            });
            tabulation.value = res.data;
            tableNewData.value = res.data.slice(
                (tabulationcurrentPage.value - 1) * tabulationpageSize.value,
                (tabulationcurrentPage.value - 1) * tabulationpageSize.value +
                    tabulationpageSize.value
            );
            console.log(tableNewData.value);
        });
    } else if (label3.value == '土壤墒情、土质') {
        EcTimeArr.value = [];
        EcArr.value = [];
        PhArr.value = [];
        temperature.value = [];
        temperature1.value = [];
        temperature2.value = [];
        temperature3.value = [];
        temperature4.value = [];
        temperature5.value = [];
        humidity.value = [];
        humidity1.value = [];
        humidity2.value = [];
        humidity3.value = [];
        humidity4.value = [];
        humidity5.value = [];
        soilPh.value = [];
        soilEc.value = [];
        getfindAllSoilTb({
            startTime: value1.value[0]
                ? moment(value1.value[0]).format('YYYY-MM-DD HH:mm:ss')
                : null,
            endTime: value1.value[1] ? moment(value1.value[1]).format('YYYY-MM-DD HH:mm:ss') : null,
            early: formInline.value.flag,
            equipment: label2.value,
        }).then(res => {
            let arr = res.data.reverse();
            arr.forEach((item, index) => {
                EcTimeArr.value.push(item.dataTime);
                EcArr.value.push(item.soilEc);
                PhArr.value.push(Number(item.soilPh));
                temperature.value.push(item.soilTemperature1);
                temperature1.value.push(item.soilTemperature1);
                temperature2.value.push(item.soilTemperature2);
                temperature3.value.push(item.soilTemperature3);
                temperature4.value.push(item.soilTemperature4);
                temperature5.value.push(item.soilTemperature5);
                humidity.value.push(item.soilHumidity1);
                humidity1.value.push(item.soilHumidity1);
                humidity2.value.push(item.soilHumidity2);
                humidity3.value.push(item.soilHumidity3);
                humidity4.value.push(item.soilHumidity4);
                humidity5.value.push(item.soilHumidity5);
                soilPh.value.push(item.soilPh);
                soilEc.value.push(item.soilEc);
            });
            const statInfo = chartModeDiv.value; // 获取图表元素
            statInfo.style.width = document.querySelector('.chartModeFather').offsetWidth + 'px'; //初始化echarts图表宽度
            statInfo.style.height =
                document.querySelector('.chartModeFather').offsetHeight - 100 + 'px';
            const myChart = echarts.init(statInfo);
            // 设置宽度自适应
            window.addEventListener('resize', () => {
                statInfo.style.width =
                    document.querySelector('.chartModeFather').offsetWidth + 'px';
                statInfo.style.height =
                    document.querySelector('.chartModeFather').offsetHeight - 100 + 'px';
                myChart.resize();
            });
            chartModes();
        });
        getfindAllSoil({
            startTime: value1.value[0]
                ? moment(value1.value[0]).format('YYYY-MM-DD HH:mm:ss')
                : null,
            endTime: value1.value[1] ? moment(value1.value[1]).format('YYYY-MM-DD HH:mm:ss') : null,
            early: formInline.value.flag,
            equipment: label2.value,
            whetherToDownload: false,
        }).then(res => {
            res.data.forEach(item => {
                item['style'] = [];
                if (item.warning == '有') {
                    item.limitExceeded.forEach(i => {
                        for (const key in i) {
                            if (key !== 'eqSoilId') {
                                if (i[key] != null) {
                                    item['style'].push(key);
                                }
                            }
                        }
                    });
                }
            });
            tabulation.value = res.data;
            tableNewData.value = res.data.slice(
                (tabulationcurrentPage.value - 1) * tabulationpageSize.value,
                (tabulationcurrentPage.value - 1) * tabulationpageSize.value +
                    tabulationpageSize.value
            );
            // res.data.forEach((item, index) => {
            //     // EcTimeArr.value.push(item.dataTime);
            //     EcArr.value.push(item.soilEc);
            //     PhArr.value.push(Number(item.soilPh));
            //     // temperature.value.push(item.soilTemperature1);
            //     temperature1.value.push(item.soilTemperature1);
            //     temperature2.value.push(item.soilTemperature2);
            //     temperature3.value.push(item.soilTemperature3);
            //     temperature4.value.push(item.soilTemperature4);
            //     temperature5.value.push(item.soilTemperature5);
            //     // humidity.value.push(item.soilHumidity1);
            //     humidity1.value.push(item.soilHumidity1);
            //     humidity2.value.push(item.soilHumidity2);
            //     humidity3.value.push(item.soilHumidity3);
            //     humidity4.value.push(item.soilHumidity4);
            //     humidity5.value.push(item.soilHumidity5);
            //     soilPh.value.push(item.soilPh);
            //     soilEc.value.push(item.soilEc);
            // });
            const statInfo = chartModeDiv.value; // 获取图表元素
            statInfo.style.width = document.querySelector('.chartModeFather').offsetWidth + 'px'; //初始化echarts图表宽度
            statInfo.style.height =
                document.querySelector('.chartModeFather').offsetHeight - 100 + 'px';
            const myChart = echarts.init(statInfo);
            // 设置宽度自适应
            window.addEventListener('resize', () => {
                statInfo.style.width =
                    document.querySelector('.chartModeFather').offsetWidth + 'px';
                statInfo.style.height =
                    document.querySelector('.chartModeFather').offsetHeight - 100 + 'px';
                myChart.resize();
            });
            chartModes();
        });
    }
};

const tabulationCurrentChange = val => {
    tabulationcurrentPage.value = val;
    tableNewData.value = tabulation.value.slice(
        (tabulationcurrentPage.value - 1) * tabulationpageSize.value,
        (tabulationcurrentPage.value - 1) * tabulationpageSize.value + tabulationpageSize.value
    );
};
//查看详情
const onDetail = row => {
    DetailVisible.value = true;
    DetailArr.value = row;
    if (label3 == '虫情监测仪') {
        DetailArr['pestName'] = row.picturesMark2O1List[0].pestName;
    }
    let arr = [];
    if (label3 == '土壤墒情、土质') {
        console.log(DetailArr.limitExceeded);
    }
    console.log(DetailArr);
};

//虫情切换当前页的容量
const handleCurrentChanges = val => {
    currentPage.value = val;
    bugarrs.value = bugarr.value.slice(
        (currentPage.value - 1) * pageSize.value,
        (currentPage.value - 1) * pageSize.value + pageSize.value
    );
};

//土壤切换当前页的容量
const handleCurrentChangess = val => {
    currentPage.value = val;
    soilArr.value = soilAll.value.slice(
        (currentPage.value - 1) * pageSize.value,
        (currentPage.value - 1) * pageSize.value + pageSize.value
    );
};
//详情
const cellClick = (row, column, cell, event) => {
    let arr = {};
    row.picturesMark2O1List.forEach(item => {
        console.log(item);
        if (!arr[item.pestName]) {
            arr[item.pestName] = 1;
        } else {
            arr[item.pestName] += 1;
        }
    });
    gridArr.value = arr;
    gridData.value = row;
    if (row.picturesMark2O1List.length > 0) {
        dialogTableVisible.value = true;
    }
};
//tabs
const foldClick = () => {
    flags.value = !flags.value;
    setTimeout(() => {
        const statInfo = chartModeDiv.value; // 获取图表元素
        statInfo.style.width = document.querySelector('.chartModeFather').offsetWidth + 'px'; //初始化echarts图表宽度
        statInfo.style.height = document.querySelector('.chartModeFather').offsetHeight - 50 + 'px';
        const myChart = echarts.init(statInfo);
        // 设置宽度自适应
        window.addEventListener('resize', () => {
            statInfo.style.width = document.querySelector('.chartModeFather').offsetWidth + 'px';
            statInfo.style.height =
                document.querySelector('.chartModeFather').offsetHeight - 50 + 'px';
            myChart.resize();
        });
        chartModes();
    }, 20);
};

//深度切换
const depthclick = item => {
    active.value = item;
    switch (item) {
        case 1:
            temperature = temperature1;
            humidity = humidity1;
            break;
        case 2:
            temperature = temperature2;
            humidity = humidity2;
            break;
        case 3:
            temperature = temperature3;
            humidity = humidity3;
            break;
        case 4:
            temperature = temperature4;
            humidity = humidity4;
            break;
        case 5:
            temperature = temperature5;
            humidity = humidity5;
            break;
        case 6:
            temperature = soilEc;
            humidity = [];
            break;
        case 7:
            temperature = soilPh;
            humidity = [];
            break;
        default:
            break;
    }
    if (localStorage.getItem(router.currentRoute.value.path) == 'true') {
        soil();
    } else {
        chartModes();
    }
};
//孢子查询数据
const query = () => {
    getSpore({
        startTime: value1.value ? time(value1) : null,
        endTime: value2.value ? time(value2) : null,
        early: value3.value,
        equipment: deviceValue.value,
    }).then(res => {
        tableData.arr = res.data;
        insectarr.value = res.data;
        pagingarr.value = res.data.slice(
            (currentPage.value - 1) * pageSize.value,
            (currentPage.value - 1) * pageSize.value + pageSize.value
        );
    });
};

//虫情询数据
const querys = () => {
    getinsect({
        startTime: value1.value ? time(value1) : null,
        endTime: value2.value ? time(value2) : null,
        early: value3.value,
        equipment: deviceValue.value,
    }).then(res => {
        bugarr.value = res.data;
        // bugarrs.value=res.data
        bugarrs.value = res.data.slice(
            (currentPage.value - 1) * pageSize.value,
            (currentPage.value - 1) * pageSize.value + pageSize.value
        );
    });
};

//土壤查询数据
const queryss = () => {
    getfindAllSoil({
        startTime: value1.value ? time(value1) : null,
        endTime: value2.value ? time(value2) : null,
        early: value3.value,
        equipment: deviceValue.value,
    }).then(res => {
        soilAll.value = res.data;
        // bugarrs.value=res.data
        soilArr.value = res.data.slice(
            (currentPage.value - 1) * pageSize.value,
            (currentPage.value - 1) * pageSize.value + pageSize.value
        );
    });
};
//下载
const ondownload = () => {
    getSpore({
        startTime: value1.value ? time(value1) : '',
        endTime: value2.value ? time(value2) : '',
        equipment: deviceValue.value,
        early: value3.value,
        whetherToDownload: true,
    }).then(res => {
        downLoadFile(res.data[res.data.length - 1].excelPath);
    });
};

const ondownload2 = () => {
    getinsect({
        startTime: value1.value ? time(value1) : '',
        endTime: value2.value ? time(value2) : '',
        equipment: deviceValue.value,
        early: value3.value,
        whetherToDownload: true,
    }).then(res => {
        downLoadFile(res.data[res.data.length - 1].excelPath);
    });
};
const ondownload3 = () => {
    getfindAllSoil({
        startTime: value1.value ? time(value1) : '',
        endTime: value2.value ? time(value2) : '',
        equipment: deviceValue.value,
        early: value3.value,
        whetherToDownload: true,
    }).then(res => {
        downLoadFile(res.data[res.data.length - 1].excelPath);
    });
};
const dowcity = () => {
    console.log(tabulation);

    if (label3.value == '智能孢子仪') {
        getSpore({ equipment: label2.value, whetherToDownload: true }).then(res => {
            downLoadFile(res.data[res.data.length - 1].excelPath);
        });
    } else if (label3.value == '虫情监测仪') {
        getinsect({ equipment: label2.value, whetherToDownload: true }).then(res => {
            downLoadFile(res.data[res.data.length - 1].excelPath);
        });
    } else if (label3.value == '土壤墒情、土质') {
        getfindAllSoil({ equipment: label2.value, whetherToDownload: true }).then(res => {
            downLoadFile(res.data[res.data.length - 1].excelPath);
        });
    }
};

//重置
const resetting = () => {
    value1.value = '';
    value2.value = '';
    value3.value = '';
    deviceValue.value = '';
    getSpores();
};
const resetForm = () => {
    value1.value = '';
    formInline.value.flag = '';
    if (label3.value == '智能孢子仪') {
        getSpore({ equipment: label2.value, whetherToDownload: false }).then(res => {
            tabulation.value = res.data;
            tableNewData.value = res.data.slice(
                (tabulationcurrentPage.value - 1) * tabulationpageSize.value,
                (tabulationcurrentPage.value - 1) * tabulationpageSize.value +
                    tabulationpageSize.value
            );
        });
    } else if (label3.value == '虫情监测仪') {
        getinsect({ equipment: label2.value, whetherToDownload: false }).then(res => {
            res.data.forEach(item => {
                if (item.warning == '有') {
                    item.pestName = item.picturesMark2O1List[0].pestName;
                    res.data.forEach(i => {
                        let arr = {};
                        i.picturesMark2O1List.forEach(item => {
                            console.log(item);
                            if (!arr[item.pestName]) {
                                arr[item.pestName] = 1;
                            } else {
                                arr[item.pestName] += 1;
                            }
                        });
                        i['obj'] = arr;
                    });
                }
            });
            tabulation.value = res.data;
            tableNewData.value = res.data.slice(
                (tabulationcurrentPage.value - 1) * tabulationpageSize.value,
                (tabulationcurrentPage.value - 1) * tabulationpageSize.value +
                    tabulationpageSize.value
            );
        });
    } else if (label3.value == '土壤墒情、土质') {
        getfindAllSoil({ equipment: label2.value, whetherToDownload: false }).then(res => {
            tabulation.value = res.data;
            tableNewData.value = res.data.slice(
                (tabulationcurrentPage.value - 1) * tabulationpageSize.value,
                (tabulationcurrentPage.value - 1) * tabulationpageSize.value +
                    tabulationpageSize.value
            );
        });
        getfindAllSoil({
            startTime: moment(new Date()).add('year', 0).format('YYYY-MM-DD'),
            endTime: moment().format('YYYY-MM-DD HH:mm:ss'),
            whetherToDownload: true,
        }).then(res => {
            tabulation.value = res.data;
            tableNewData.value = res.data.slice(
                (tabulationcurrentPage.value - 1) * tabulationpageSize.value,
                (tabulationcurrentPage.value - 1) * tabulationpageSize.value +
                    tabulationpageSize.value
            );
        });
        getfindAllSoilTb({
            startTime: value1.value[0]
                ? moment(value1.value[0]).format('YYYY-MM-DD HH:mm:ss')
                : null,
            endTime: value1.value[1] ? moment(value1.value[1]).format('YYYY-MM-DD HH:mm:ss') : null,
            early: formInline.value.flag,
            equipment: label2.value,
        }).then(res => {
            let arr = res.data.reverse();
            arr.forEach((item, index) => {
                EcTimeArr.value.push(item.dataTime);
                EcArr.value.push(item.soilEc);
                PhArr.value.push(Number(item.soilPh));
                temperature.value.push(item.soilTemperature1);
                temperature1.value.push(item.soilTemperature1);
                temperature2.value.push(item.soilTemperature2);
                temperature3.value.push(item.soilTemperature3);
                temperature4.value.push(item.soilTemperature4);
                temperature5.value.push(item.soilTemperature5);
                humidity.value.push(item.soilHumidity1);
                humidity1.value.push(item.soilHumidity1);
                humidity2.value.push(item.soilHumidity2);
                humidity3.value.push(item.soilHumidity3);
                humidity4.value.push(item.soilHumidity4);
                humidity5.value.push(item.soilHumidity5);
                soilPh.value.push(item.soilPh);
                soilEc.value.push(item.soilEc);
            });
            const statInfo = chartModeDiv.value; // 获取图表元素
            statInfo.style.width = document.querySelector('.chartModeFather').offsetWidth + 'px'; //初始化echarts图表宽度
            statInfo.style.height =
                document.querySelector('.chartModeFather').offsetHeight - 100 + 'px';
            const myChart = echarts.init(statInfo);
            // 设置宽度自适应
            window.addEventListener('resize', () => {
                statInfo.style.width =
                    document.querySelector('.chartModeFather').offsetWidth + 'px';
                statInfo.style.height =
                    document.querySelector('.chartModeFather').offsetHeight - 100 + 'px';
                myChart.resize();
            });
            chartModes();
        });
    }
};
const resettings = () => {
    value1.value = '';
    value2.value = '';
    value3.value = '';
    deviceValue.value = '';
    getinsect().then(res => {
        bugarr.value = res.data;
        // bugarrs.value=res.data
        bugarrs.value = res.data.slice(
            (currentPage.value - 1) * pageSize.value,
            (currentPage.value - 1) * pageSize.value + pageSize.value
        );
    });
};
const resettingss = () => {
    value1.value = '';
    value2.value = '';
    value3.value = '';
    deviceValue.value = '';
    getfindAllSoil().then(res => {
        bugarr.value = res.data;
        // bugarrs.value=res.data
        bugarrs.value = res.data.slice(
            (currentPage.value - 1) * pageSize.value,
            (currentPage.value - 1) * pageSize.value + pageSize.value
        );
    });
};

//格式化时间
const time = value => {
    const dateObj = new Date(value.value);
    // 分别获取年、月、日、小时、分钟、秒数
    const year = dateObj.getFullYear();
    const month = dateObj.getMonth() + 1; // 月份从0开始，需要加1
    const date = dateObj.getDate();
    const hours = dateObj.getHours();
    const minutes = dateObj.getMinutes();
    const seconds = dateObj.getSeconds();
    // 将年、月、日、小时、分钟、秒数拼接成字符串，中间用-和:分隔
    const formattedDate = `${year}-${month.toString().padStart(2, '0')}-${date
        .toString()
        .padStart(2, '0')} ${hours.toString().padStart(2, '0')}:${minutes
        .toString()
        .padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
    return formattedDate;
};

//弹框
const bugarrsVisible = () => {
    currentPage.value = 1;
    visible.value = true;
    getSpores();
    (value1.value = ''), (value2.value = ''), (deviceValue.value = '');
    getsporeEquipment().then(res => {
        options.value = res.data;
    });
};
const bugarrsVisibles = () => {
    currentPage.value = 1;
    visibles.value = true;
    (value1.value = ''), (value2.value = ''), (deviceValue.value = '');
    // getinsects();
    // detectionLightsEquipment().then(res => {
    //     options.value = res.data;
    // });
    getinsect().then(res => {
        currentPage.value = 1;
        bugarr.value = res.data;
        // bugarrs.value=res.data
        bugarrs.value = res.data.slice(
            (currentPage.value - 1) * pageSize.value,
            (currentPage.value - 1) * pageSize.value + pageSize.value
        );
    });
};

const bugarrsVisibless = () => {
    visibless.value = true;
    (value1.value = ''), (value2.value = ''), (deviceValue.value = '');
    soilEquipment().then(res => {
        options.value = res.data;
    });
};
const filterHandler = (value, row, column) => {
    const property = column['property'];
    return row[property] === value;
};
const handleDate = timestamp => {
    var date = new Date(timestamp); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
    var Y = date.getFullYear() + '-';
    var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
    var D = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
    return Y + M + D;
};
const handleTime = timestamp => {
    var date = new Date(timestamp); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
    var h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
    var m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
    var s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
    return h + m + s;
};

let XZQDM = '';
//折叠

function leftFoldClick() {
    leftWraFlag.value = !leftWraFlag.value;
    if (leftWraFlag.value) {
        let leftWra = document.querySelector('.leftWra');
        leftWra.style.transform = 'translate(0,0)';
    } else {
        let leftWra = document.querySelector('.leftWra');
        leftWra.style.transform = 'translate(-107%,0)';
    }
}
function rightFoldClick() {
    rightWraFlag.value = !rightWraFlag.value;
    if (rightWraFlag.value) {
        let rightWra = document.querySelector('.rightWra');
        rightWra.style.transform = 'translate(0,0)';
    } else {
        let rightWra = document.querySelector('.rightWra');
        rightWra.style.transform = 'translate(107%,0)';
    }
}

function bottomFoldClick() {
    bottomFold.value = !bottomFold.value;
    if (bottomFold.value) {
        console.log(111);
        let bottom_center = document.querySelector('.bottom_center');
        bottom_center.style.transform = 'translate(0,0)';
    } else {
        let bottom_center = document.querySelector('.bottom_center');
        bottom_center.style.transform = 'translate(0,107%)';
    }
}

//tabs
const handleClick = (tab, event) => {
    tableItem.value = [];
    value1.value = '';
    formInline.value.flag = '';
    if (tab.paneName == '全部') {
        getdeviceNumbers('0'); //所有设备列表
    } else if (tab.paneName == '智能孢子仪') {
        getdeviceNumbers('1'); //所有设备列表
    } else if (tab.paneName == '虫情监测仪') {
        tableItem.value = [
            {
                lable: '预警值',
                value: 'picturesMark201List',
            },
        ];
        getdeviceNumbers('2'); //所有设备列表
    } else if (tab.paneName == '土壤墒情、土质') {
        tableItem.value = [
            {
                lable: '0cm湿度(%)',
                value: 'soilHumidity1',
            },
            {
                lable: '-10cm湿度(%)',
                value: 'soilHumidity2',
            },
            {
                lable: '-20cm湿度(%)',
                value: 'soilHumidity3',
            },
            {
                lable: '-30cm湿度(%)',
                value: 'soilHumidity4',
            },
            {
                lable: '-40cm湿度(%)',
                value: 'soilHumidity5',
            },
            {
                lable: '0cm温度',
                value: 'soilTemperature1',
            },
            {
                lable: '-10cm温度',
                value: 'soilTemperature2',
            },
            {
                lable: '-20cm温度',
                value: 'soilTemperature3',
            },
            {
                lable: '-30cm温度',
                value: 'soilTemperature4',
            },
            {
                lable: '-40cm温度',
                value: 'soilTemperature5',
            },
            {
                lable: '-30cm温度',
                value: 'soilTemperature4',
            },
            {
                lable: '-40cm温度',
                value: 'soilTemperature5',
            },
            {
                lable: 'PH值(ph)',
                value: 'soilPh',
            },
            {
                lable: 'EC值(S/cm)',
                value: 'soilEc',
            },
        ];
        getdeviceNumbers('3'); //所有设备列表
    }
};

/*------------------接口--------------------*/
//站点标号

//全部设备列表
const getdeviceNumbers = num => {
    devicesArr.value = [];
    // if (viewers.entities) {
    //     viewers.entities.removeAll();
    // }
    getdeviceNumber({ flag: num }).then(res => {
        nums.value = num;
        if (num == 0) {
            label2.value = res.data[0].children[0].children[0].label;
            label3.value = res.data[0].children[0].label;
        } else {
            label2.value = res.data[0].children[0].label;
        }
        if (num == '1') {
            label3.value = '智能孢子仪';
        } else if (num == '2') {
            label3.value = '虫情监测仪';
        } else if (num == '3') {
            label3.value = '土壤墒情、土质';
        }

        res.data.forEach(item => {
            devicesArr.value.push(item);
            tableNewData.value = res.data.slice(
                (tabulationcurrentPage.value - 1) * tabulationpageSize.value,
                (tabulationcurrentPage.value - 1) * tabulationpageSize.value +
                    tabulationpageSize.value
            );
        });
        onSubmit();
        if (num == 1 || num == 0) {
            getsporeEquipmentCondition().then(res => {
                townZuowu.label = res.data;
                // 创建一个Entity对象加图片
                res.data.forEach((item, index) => {
                    center = L.latLng(item.msLatitude, item.msLongitude);
                    map.setView(center, 17);
                    L.marker([item.msLatitude, item.msLongitude], { icon: greenIcon })
                        .addTo(map)
                        .bindPopup(
                            `<b>智能孢子仪</b><br><br>经度:${item.msLongitude}<br><br>纬度:${item.msLatitude}`
                        )
                        .openPopup();
                });
            });
        } else if (num == 2) {
            geteqLightEquipmentCondition().then(res => {
                townZuowu.label = res.data;
                // 创建一个Entity对象加图片
                res.data.forEach((item, index) => {
                    center = L.latLng(item.msLatitude, item.msLongitude);
                    map.setView(center, 17);
                    L.marker([item.msLatitude, item.msLongitude], { icon: greenIcon })
                        .addTo(map)
                        .bindPopup(
                            `<b>虫情监测仪</b><br><br>经度:${item.msLongitude}<br><br>纬度:${item.msLatitude}`
                        )
                        .openPopup();
                });
            });
        } else if (num == 3) {
            getequipmentCondition().then(res => {
                townZuowu.label = res.data;
                // 创建一个Entity对象加图片
                res.data.forEach((item, index) => {
                    center = L.latLng(item.msLatitude, item.msLongitude);
                    map.setView(center, 17);
                    L.marker([item.msLatitude, item.msLongitude], { icon: greenIcon })
                        .addTo(map)
                        .bindPopup(
                            `<b>土壤墒情、土质</b><br><br>经度:${item.msLongitude}<br><br>纬度:${item.msLatitude}`
                        )
                        .openPopup();
                });
            });
        }
    });
};

//孢子
const getSpores = () => {
    getSpore().then(res => {
        tableData.arr = res.data;
        tableData.arrs = res.data;
        insectarr.value = res.data;
        pagingarr.value = res.data.slice(
            (currentPage.value - 1) * pageSize.value,
            (currentPage.value - 1) * pageSize.value + pageSize.value
        );
    });
};
//最近三天孢子
const getSporestime = () => {
    getSpore({
        startTime: moment().subtract(3, 'days').startOf('day').format('YYYY-MM-DD HH:mm:ss'),
        endTime: moment().format('YYYY-MM-DD HH:mm:ss'),
    }).then(res => {
        tableData.arrs = res.data;
        insectarr.value = res.data;
        pagingarr.value = res.data.slice(
            (currentPage.value - 1) * pageSize.value,
            (currentPage.value - 1) * pageSize.value + pageSize.value
        );
    });
};
//
//孢子设备信息
const getsporeEquipmentConditions = () => {
    getsporeEquipmentCondition().then(res => {
        townZuowu.label = res.data;
        if (positionLayer) {
            maps.removeLayer(positionLayer);
        }
        // 创建一个Entity对象加图片
        res.data.forEach((item, index) => {
            console.log(item);
            positionIcon([item.msLongitude, item.msLatitude], chong, item.dev_code);
        });
    });
};
//土壤
const getfindAllSoils = () => {
    getfindAllSoil().then(res => {
        soilAll.value = res.data;
    });
    getfindAllSoil({
        startTime: moment(new Date()).add('year', 0).format('YYYY-MM-DD'),
        endTime: moment().format('YYYY-MM-DD HH:mm:ss'),
    }).then(res => {
        soilArr.value = soilAll.value.slice(
            (currentPage.value - 1) * pageSize.value,
            (currentPage.value - 1) * pageSize.value + pageSize.value
        );
        res.data.forEach((item, index) => {
            EcTimeArr.value.push(item.dataTime);
            EcArr.value.push(item.soilEc);
            PhArr.value.push(Number(item.soilPh));
            temperature.value.push(item.soilTemperature1);
            temperature1.value.push(item.soilTemperature1);
            temperature2.value.push(item.soilTemperature2);
            temperature3.value.push(item.soilTemperature3);
            temperature4.value.push(item.soilTemperature4);
            temperature5.value.push(item.soilTemperature5);
            humidity.value.push(item.soilHumidity1);
            humidity1.value.push(item.soilHumidity1);
            humidity2.value.push(item.soilHumidity2);
            humidity3.value.push(item.soilHumidity3);
            humidity4.value.push(item.soilHumidity4);
            humidity5.value.push(item.soilHumidity5);
        });
        farmland();
        Ph();
        soil();
    });
};
//土壤设备信息
const getequipmentConditions = () => {
    if (viewer.entities) {
        viewer.entities.removeAll();
    }
    getequipmentCondition().then(res => {
        townZuowu.label = res.data;
        if (positionLayer) {
            maps.removeLayer(positionLayer);
        }
        // // 创建一个Entity对象加图片
        res.data.forEach((item, index) => {
            positionIcon([item.msLongitude, item.msLatitude], tu, item.dev_code);
        });
    });
};
//虫子
const getinsects = () => {
    getinsect({
        startTime: moment().subtract(3, 'days').startOf('day').format('YYYY-MM-DD HH:mm:ss'),
        endTime: moment().format('YYYY-MM-DD HH:mm:ss'),
    }).then(res => {
        console.log(res.data);
        bugarr.value = res.data;
        bugarrtime.value = res.data;
        bugarrs.value = res.data.slice(
            (currentPage.value - 1) * pageSize.value,
            (currentPage.value - 1) * pageSize.value + pageSize.value
        );
    });
};

//虫情设备信息
const geteqLightEquipmentConditions = () => {
    geteqLightEquipmentCondition().then(res => {
        townZuowu.label = res.data;
        // 创建一个Entity对象加图片
        if (positionLayer) {
            maps.removeLayer(positionLayer);
        }
        res.data.forEach((item, index) => {
            positionIcon([item.msLongitude, item.msLatitude], baozi, item.dev_code);
        });
    });
};

//镇
const getTownships = () => {
    getTownship().then(res => {
        Township.arr = res.features;
        Township.arr.unshift({
            bbox: [119.5091, 35.5671, 120.3285, 36.1455],
            properties: {
                XZDM: '370211',
                XZMC: '全部',
            },
        });
        let arr = [...res.features];
        let brr = [];
        arr.splice(0, 1);
        arr.forEach(item => {
            brr.push(item.properties.XZMC);
        });
        data.title = [...Object.values(brr)];
    });
};
//面积
const getaArea = () => {
    getareas().then(res => {
        Township.crr = res.features;
        data.title.forEach((item, index) => {
            let town = res.features.map(i => {
                if (item === i.properties.town) {
                    return i.properties;
                }
            });
            Object.keys(dd).forEach(it => {
                const index = town.findIndex(a => a && a.crop === it);
                if (index > -1) {
                    dd[it].push(town[index].Shape_Area);
                } else {
                    dd[it].push(null);
                }
            });
        });
    });
};

/*-------------echarts--------------*/
var baozi =
    'data:image/png;base64,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';
var chong =
    'data:image/png;base64,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';
var tu =
    'data:image/png;base64,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';

function farmland() {
    const farmlandDivIntance = echarts.init(farmlandDiv.value);
    var option = {
        grid: {
            top: '15%',
            left: '17%',
            right: '7%',
            bottom: '14%',
        },
        legend: {
            data: ['EC值'],
            inactiveColor: 'rgba(92,200,255,0.35)',
            icon: 'roundRect',
            top: 0,
            right: 0,
            itemWidth: 20,
            itemHeight: 7,
            textStyle: {
                color: '#FFF',
            },
            show: true,
        },
        dataZoom: [
            {
                // start: 0,//默认为0
                // end: 100,//默认为100
                type: 'slider',
                show: false,
                zoomLock: true, //禁止拉伸
                // xAxisIndex: [0],
                handleSize: 0, //滑动条的 左右2个滑动条的大小
                startValue: 0, // 初始显示值
                endValue: 6, // 结束显示值
                height: 10, //组件高度
                left: '5%', //左边的距离
                right: '4%', //右边的距离
                bottom: 5, //底边的距离
                borderColor: '#000',
                fillerColor: '#269cdb',
                borderRadius: 5,
                backgroundColor: '#33384b', //两边未选中的滑动条区域的颜色
                showDataShadow: false, //是否显示数据阴影 默认auto
                showDetail: false, //即拖拽时候是否显示详细数值信息 默认true
                realtime: true, //是否实时更新
                filterMode: 'filter',
            },
            //下面这个属性是里面拖到
            {
                type: 'inside',
                show: true,
                // xAxisIndex: [0],
                start: 1, //默认为1
                end: 100, //默认为100
            },
        ],
        tooltip: {
            show: true,
        },
        xAxis: {
            data: EcTimeArr._rawValue,
            axisLine: {
                lineStyle: {
                    color: 'transparent', //底部边框颜色
                },
            },
            axisLabel: {
                //x轴文字的配置
                show: true,
                interval: 1, //使x轴文字显示全
                textStyle: {
                    color: 'rgba(219, 225, 255, 1)',
                },
                formatter: function (params) {
                    var newParamsName = '';
                    var paramsNameNumber = params.length;
                    var provideNumber = 10; //一行显示几个字
                    var rowNumber = Math.ceil(paramsNameNumber / provideNumber);
                    if (paramsNameNumber > provideNumber) {
                        for (var p = 0; p < rowNumber; p++) {
                            var tempStr = '';
                            var start = p * provideNumber;
                            var end = start + provideNumber;
                            if (p == rowNumber - 1) {
                                tempStr = params.substring(start, paramsNameNumber);
                            } else {
                                tempStr = params.substring(start, end) + '\n';
                            }
                            newParamsName += tempStr;
                        }
                    } else {
                        newParamsName = params;
                    }
                    return newParamsName;
                },
            },
        },
        yAxis: [
            {
                name: 'EC值(mS/cm) ',
                nameTextStyle: {
                    color: 'rgba(255, 255, 255, 0.8)',
                    fontSize: 14,
                },
                type: 'value',
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: 'rgba(255,255,255,0.2)', //网格线的颜色
                        width: 1,
                        type: 'solid',
                    },
                },
                axisLine: {
                    show: false,
                    lineStyle: {
                        color: 'transparent', //左边框颜色
                    },
                },
                axisLabel: {
                    show: true,
                    fontSize: 12,
                    textStyle: {
                        color: '#ADD6FF', //左文字颜色
                    },
                },
            },
        ],
        series: [
            {
                name: 'EC值',
                type: 'bar',
                barWidth: 20,
                showBackground: true,
                backgroundStyle: {
                    color: 'rgba(255, 255, 255, 0.3)',
                },
                itemStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            {
                                offset: 0,
                                // color: '#00FFE3',//渐变1
                                color: 'rgba(43, 224, 152, 1)', //渐变1
                            },
                            {
                                offset: 1,
                                // color: '#4693EC',//渐变2
                                color: 'rgba(185, 250, 224, 1)', //渐变2
                            },
                        ]),
                    },
                },
                data: EcArr._rawValue,
                z: 0,
                zlevel: 0,
                // label: {
                //     show: true,
                //     position: 'top',
                //     fontSize: 14,
                //     color: '#fff', //柱状顶部文字颜色
                //     formatter: function (params) {
                //         return '20%';
                //     },
                // },
            },
            {
                type: 'pictorialBar',
                barWidth: 20,
                itemStyle: {
                    normal: {
                        color: 'rgba(2, 31, 26, 0.85)', //数据的间隔颜色
                    },
                },
                symbolRepeat: 'fixed',
                symbolMargin: 3,
                symbol: 'rect',
                symbolSize: [30, 4],
                symbolPosition: 'end',
                symbolOffset: [0, 0],
                data: EcArr._rawValue,
                z: 1,
                zlevel: 0,
                tooltip: {
                    show: false,
                },
            },
        ],
    };

    farmlandDivIntance.on('click', function (params) {
        console.log(params.name);
    });
    option && farmlandDivIntance.setOption(option, { notMerge: true, grid: { bottom: 20 } });
    useEcharts(farmlandDivIntance, option);
}
function Ph() {
    const PhDivIntance = echarts.init(Phdiv.value);
    let dataC1 = PhArr._rawValue;
    let dataC2 = [20, 30, 60, 40, 50, 30];
    let dataC3 = [20, 30, 60, 40, 50, 30];
    let xData = EcTimeArr._rawValue;

    var fontColor = '#30eee9';
    let option = {
        backgroundColor: 'transparent',
        grid: {
            left: '15%',
            right: '7%',
            top: '15%',
            bottom: '17%',
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow',
                lineStyle: {
                    color: '#57617B',
                },
            },
        },
        dataZoom: [
            {
                // start: 0,//默认为0
                // end: 100,//默认为100
                type: 'slider',
                zoomLock: true, //禁止拉伸
                show: false,
                // xAxisIndex: [0],
                handleSize: 0, //滑动条的 左右2个滑动条的大小
                startValue: 0, // 初始显示值
                endValue: 6, // 结束显示值
                height: 10, //组件高度
                left: '5%', //左边的距离
                right: '4%', //右边的距离
                bottom: 5, //底边的距离
                borderColor: '#000',
                fillerColor: '#269cdb',
                borderRadius: 5,
                backgroundColor: '#33384b', //两边未选中的滑动条区域的颜色
                showDataShadow: false, //是否显示数据阴影 默认auto
                showDetail: false, //即拖拽时候是否显示详细数值信息 默认true
                realtime: true, //是否实时更新
                filterMode: 'filter',
            },
            //下面这个属性是里面拖到
            {
                type: 'inside',
                show: true,
                // xAxisIndex: [0],
                start: 1, //默认为1
                end: 100, //默认为100
            },
        ],
        xAxis: {
            type: 'category',
            axisLine: {
                show: true,
                lineStyle: {
                    color: 'rgba(255, 255, 255, 0.7)',
                },
            },
            offset: 12,
            axisTick: {
                show: false,

                alignWithLabel: true,
                lineStyle: {
                    color: '#dddddd',
                },
            },
            axisLabel: {
                //x轴文字的配置
                // show: true,
                interval: 1, //使x轴文字显示全
                textStyle: {
                    color: 'rgba(219, 225, 255, 1)',
                },
                formatter: function (params) {
                    var newParamsName = '';
                    var paramsNameNumber = params.length;
                    var provideNumber = 10; //一行显示几个字
                    var rowNumber = Math.ceil(paramsNameNumber / provideNumber);
                    if (paramsNameNumber > provideNumber) {
                        for (var p = 0; p < rowNumber; p++) {
                            var tempStr = '';
                            var start = p * provideNumber;
                            var end = start + provideNumber;
                            if (p == rowNumber - 1) {
                                tempStr = params.substring(start, paramsNameNumber);
                            } else {
                                tempStr = params.substring(start, end) + '\n';
                            }
                            newParamsName += tempStr;
                        }
                    } else {
                        newParamsName = params;
                    }
                    return newParamsName;
                },
            },

            data: xData,
        },
        yAxis: {
            name: 'PH值(ph)',
            type: 'value',
            axisLine: {
                show: false,
                lineStyle: {
                    color: '#dddddd',
                },
            },
            splitLine: {
                show: true,
                lineStyle: {
                    color: 'rgba(255,255,255,0.2)', //网格线的颜色
                    width: 1,
                    type: 'solid',
                },
            },
            axisTick: {
                show: false,
            },
            axisLabel: {
                fontSize: 16,
            },
            boundaryGap: ['20%', '20%'],
        },
        series: [
            {
                name: '',
                type: 'line',
                stack: '总量',
                smooth: true,
                symbol: 'none',
                showSymbol: false,
                symbolSize: 8,
                itemStyle: {
                    normal: {
                        areaStyle: {
                            //color: '#94C9EC'
                            color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                                {
                                    offset: 0.4,
                                    color: 'rgba(163, 198, 255, 0.4)',
                                },
                                {
                                    offset: 1,
                                    color: 'rgba(163, 198, 255, 0.01)',
                                },
                            ]),
                        },
                    },
                },
                markPoint: {
                    itemStyle: {
                        normal: {
                            color: 'red',
                        },
                    },
                },
                data: dataC1,
            },
        ],
    };
    useEcharts(PhDivIntance, option);
}
function soil() {
    const soilDivIntance = echarts.init(soilDiv.value);
    var time = EcTimeArr._rawValue;
    var sportData = humidity.value;
    var sportTime = temperature.value;
    let option = {
        // backgroundColor: '#2C313E',
        // legend: {
        //     icon: 'rect',
        //     top: 7,
        //     left: 'center',
        //     itemWidth: 20,
        //     itemHeight: 10,
        //     itemGap: 30,
        //     textStyle: {
        //         color: 'rgba(255, 255, 255, 0.7)',
        //     },
        // },
        tooltip: {
            trigger: 'axis',
        },
        grid: {
            top: '15%',
            left: '5%',
            right: '7%',
            bottom: '15%',
            containLabel: true,
        },
        dataZoom: [
            {
                // start: 0,//默认为0
                // end: 100,//默认为100
                type: 'slider',
                zoomLock: true, //禁止拉伸
                show: false,
                // xAxisIndex: [0],
                handleSize: 0, //滑动条的 左右2个滑动条的大小
                startValue: 0, // 初始显示值
                endValue: 6, // 结束显示值
                height: 10, //组件高度
                left: '5%', //左边的距离
                right: '4%', //右边的距离
                bottom: 5, //底边的距离
                borderColor: '#000',
                fillerColor: '#269cdb',
                borderRadius: 5,
                backgroundColor: '#33384b', //两边未选中的滑动条区域的颜色
                showDataShadow: false, //是否显示数据阴影 默认auto
                showDetail: false, //即拖拽时候是否显示详细数值信息 默认true
                realtime: true, //是否实时更新
                filterMode: 'filter',
            },
            //下面这个属性是里面拖到
            {
                type: 'inside',
                show: true,
                // xAxisIndex: [0],
                start: 1, //默认为1
                end: 100, //默认为100
            },
        ],
        xAxis: [
            {
                type: 'category',
                data: time,
                axisLine: {
                    show: false,
                },
                axisLabel: {
                    textStyle: {
                        color: 'rgba(255, 255, 255, 0.7)',
                    },
                    interval: 1, //使x轴文字显示全
                    formatter: function (params) {
                        var newParamsName = '';
                        var paramsNameNumber = params.length;
                        var provideNumber = 10; //一行显示几个字
                        var rowNumber = Math.ceil(paramsNameNumber / provideNumber);
                        if (paramsNameNumber > provideNumber) {
                            for (var p = 0; p < rowNumber; p++) {
                                var tempStr = '';
                                var start = p * provideNumber;
                                var end = start + provideNumber;
                                if (p == rowNumber - 1) {
                                    tempStr = params.substring(start, paramsNameNumber);
                                } else {
                                    tempStr = params.substring(start, end) + '\n';
                                }
                                newParamsName += tempStr;
                            }
                        } else {
                            newParamsName = params;
                        }
                        return newParamsName;
                    },
                },
                boundaryGap: false,
                axisTick: {
                    //坐标轴刻度相关设置。
                    show: false,
                },
            },
        ],
        yAxis: [
            {
                name: '土壤温度 (℃)',
                type: 'value',
                axisLine: {
                    show: false,
                    lineStyle: {
                        color: '#dddddd',
                    },
                },
                axisTick: {
                    show: false,
                },
                axisLabel: {
                    textStyle: {
                        color: 'rgba(255, 255, 255, 0.7)', //左侧数标
                    },
                },
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: '#ccc',
                        type: 'solid',
                        opacity: 1,
                    },
                },
            },
            {
                name: '土壤湿度(%RH)',
                type: 'value',
                axisLine: {
                    show: false,
                    lineStyle: {
                        color: '#dddddd',
                    },
                },
                position: 'right',
                axisTick: {
                    show: false,
                },
                axisLabel: {
                    textStyle: {
                        color: 'rgba(255, 255, 255, 0.7)', //右侧数标
                    },
                    formatter: '{value}',
                },
                splitLine: {
                    show: false,
                },
            },
        ],
        series: [
            {
                name: '土壤温度',
                type: 'line',
                data: sportTime,
                symbolSize: 1,
                // symbol: 'circle',
                itemStyle: {
                    // 设置symbol的颜色
                    normal: {
                        color: 'rgba(252, 186, 211, 1)',
                    },
                },

                smooth: true,
                yAxisIndex: 0,
                showSymbol: false,
                lineStyle: {
                    width: 3,
                    color: 'rgba(252, 186, 211, 1)',
                },
            },
            {
                name: '土壤湿度',
                type: 'line',
                data: sportData,
                symbolSize: 1,
                yAxisIndex: 1,
                // symbol: 'circle',
                itemStyle: {
                    // 设置symbol的颜色
                    normal: {
                        color: 'rgba(168, 216, 234, 1)',
                    },
                },
                smooth: true,
                showSymbol: false,
                lineStyle: {
                    width: 3,
                    color: 'rgba(168, 216, 234, 1)',
                },
            },
        ],
    };
    useEcharts(soilDivIntance, option);
}

function chartModes() {
    const ASdivisionDivIntance = echarts.init(chartModeDiv.value);
    let leftY = '土壤温度 (℃)';
    let leftYlabel = '';
    let color = 'rgba(255, 235, 59, 1)';
    switch (active.value) {
        case 6:
            leftY = 'EC值(S/cm)';
            leftYlabel = 'EC值';
            color = 'rgba(0, 209, 195, 1)';
            break;
        case 7:
            leftY = 'PH值(ph)';
            leftYlabel = 'PH值';
            color = 'rgba(201, 255, 148, 1)';
            break;
        default:
            leftY = '土壤温度 (℃)';
            leftYlabel = '土壤温度';
            break;
    }
    var time = EcTimeArr._rawValue;
    var sportData = humidity.value;
    var sportTime = temperature.value;
    let ends = (7 / temperature.value.length) * 100;
    let option = {
        color: [color, 'rgba(199, 125, 231, 1)'],
        tooltip: {
            trigger: 'axis',
        },
        grid: {
            top: '15%',
            left: '5%',
            right: '7%',
            bottom: '15%',
            containLabel: true,
        },
        legend: {
            show: true,
            top: '7%',
            x: 'center',
            textStyle: { color: 'black' },
            itemWidth: 20,
            itemHeight: 12.5,
            icon: 'rect',
            backgroundColor: 'transparent',
        },
        dataZoom: [
            {
                type: 'slider',
                width: '40%',
                zoomLock: true,
                top: '90%',
                start: 0,
                end: ends,
                showDataShadow: false,
                showDetail: false,
                fillerColor: 'rgba(64, 158, 255)',
                borderRadius: '50%',
                moveHandleSize: 0,
                moveHandleStyle: {},
                left: '35%',
                height: 12,
                handleSize: '80%',
                handleIcon: 'path://M512,512m-448,0a448,448,0,1,0,896,0a448,448,0,1,0,-896,0Z',
                handleStyle: {
                    borderWidth: 0,
                    color: 'rgba(64, 158, 255)',
                },
            },
            {
                type: 'inside',
            },
        ],

        xAxis: [
            {
                type: 'category',
                data: time,
                axisLine: {
                    show: false,
                },
                axisLabel: {
                    textStyle: {
                        color: 'rgba(102, 102, 102, 1)',
                    },
                    interval: 0, //使x轴文字显示全
                    formatter: function (params) {
                        var newParamsName = '';
                        var paramsNameNumber = params.length;
                        var provideNumber = 10; //一行显示几个字
                        var rowNumber = Math.ceil(paramsNameNumber / provideNumber);
                        if (paramsNameNumber > provideNumber) {
                            for (var p = 0; p < rowNumber; p++) {
                                var tempStr = '';
                                var start = p * provideNumber;
                                var end = start + provideNumber;
                                if (p == rowNumber - 1) {
                                    tempStr = params.substring(start, paramsNameNumber);
                                } else {
                                    tempStr = params.substring(start, end) + '\n';
                                }
                                newParamsName += tempStr;
                            }
                        } else {
                            newParamsName = params;
                        }
                        return newParamsName;
                    },
                },
                boundaryGap: false,
                axisTick: {
                    //坐标轴刻度相关设置。
                    show: false,
                },
            },
        ],
        yAxis: [
            {
                name: leftY,
                type: 'value',
                axisLine: {
                    show: false,
                    lineStyle: {
                        color: 'rgba(102, 102, 102, 1)',
                    },
                },
                axisTick: {
                    show: false,
                },
                axisLabel: {
                    textStyle: {
                        color: 'rgba(102, 102, 102, 1)', //左侧数标
                    },
                },
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: '#ccc',
                        type: 'solid',
                        opacity: 1,
                    },
                },
            },
            {
                name: '土壤湿度(%RH)',
                type: 'value',
                axisLine: {
                    show: false,
                    lineStyle: {
                        color: 'rgba(102, 102, 102, 1)',
                    },
                },
                position: 'right',
                axisTick: {
                    show: false,
                },
                axisLabel: {
                    textStyle: {
                        color: 'rgba(102, 102, 102, 1)', //右侧数标
                    },
                    formatter: '{value}',
                },
                splitLine: {
                    show: false,
                },
            },
        ],
        series: [
            {
                name: leftYlabel,
                type: 'line',
                data: sportTime,
                symbolSize: 10,
                itemStyle: {
                    // 设置symbol的颜色
                    normal: {
                        color: function (param) {
                            //拐点颜色回调
                            if (active.value == 1) {
                                if (param.value >= -10 && param.value <= 40) {
                                    return color;
                                } else {
                                    return 'red';
                                }
                            } else if (active.value == 2) {
                                if (param.value >= -5 <= 40) {
                                    return color;
                                } else {
                                    return 'red';
                                }
                            } else if (active.value == 3) {
                                if (param.value >= 0 && param.value <= 30) {
                                    return color;
                                } else {
                                    return 'red';
                                }
                            } else if (active.value == 4) {
                                if (param.value >= 0 && param.value <= 30) {
                                    return color;
                                } else {
                                    return 'red';
                                }
                            } else if (active.value == 5) {
                                if (param.value >= 0 && param.value <= 30) {
                                    return color;
                                } else {
                                    return 'red';
                                }
                            } else if (active.value == 6) {
                                if (param.value >= 0 && param.value <= 0.2) {
                                    return color;
                                } else {
                                    return 'red';
                                }
                            } else if (active.value == 7) {
                                if (param.value >= 5.5 && param.value <= 7.5) {
                                    return color;
                                } else {
                                    return 'red';
                                }
                            }
                        },
                    },
                },

                smooth: true,
                yAxisIndex: 0,
                showSymbol: true,
                symbol: 'circle',
                lineStyle: {
                    width: 3,
                    color: color,
                },
            },
            {
                name: '土壤湿度',
                type: 'line',
                data: sportData,
                symbolSize: 10,
                yAxisIndex: 1,
                itemStyle: {
                    // 设置symbol的颜色
                    normal: {
                        color: function (param) {
                            //拐点颜色回调
                            if (active.value == 1) {
                                if (param.value >= 5 && param.value <= 60) {
                                    return 'rgba(199, 125, 231, 1)';
                                } else {
                                    return 'red';
                                }
                            } else if (active.value == 2) {
                                if (param.value >= 0 <= 30) {
                                    return 'rgba(199, 125, 231, 1)';
                                } else {
                                    return 'red';
                                }
                            } else if (active.value == 3) {
                                if (param.value >= 0 && param.value <= 30) {
                                    return 'rgba(199, 125, 231, 1)';
                                } else {
                                    return 'red';
                                }
                            } else if (active.value == 4) {
                                if (param.value >= 0 && param.value <= 40) {
                                    return 'rgba(199, 125, 231, 1)';
                                } else {
                                    return 'red';
                                }
                            } else if (active.value == 5) {
                                if (param.value >= 0 && param.value <= 40) {
                                    return 'rgba(199, 125, 231, 1)';
                                } else {
                                    return 'red';
                                }
                            }
                        },
                    },
                },
                label: {
                    color: params => params.color,
                },
                smooth: true,
                showSymbol: true,
                symbol: 'circle',
                lineStyle: {
                    width: 3,
                    color: 'rgba(199, 125, 231, 1)',
                },
            },
            {
                name: '预警',
                type: 'bar',
                data: [],
                itemStyle: {
                    color: 'red', // 设置图例的图形颜色
                },
            },
        ],
    };
    useEcharts(ASdivisionDivIntance, option);
}

// 添加wms
// 添加wms
function addWms(layers, customName, bottom) {
    let map = new Cesium.WebMapServiceImageryProvider({
        url: serverAPI.geoserverUrl + `/map-${layers}/wms111/`,
        layers: layers + '@' + layers, //图层名
        parameters: {
            service: 'WMS',
            format: 'image/png',
            srs: 'EPSG:4326',
            VERSION: '1.1.1',
            transparent: true, //是否透明
            exceptions: 'application/vnd.ogc.se_inimage',
        },
    });
    map.customName = customName; //自己定义各种属性
    let dd = viewer.imageryLayers.addImageryProvider(map); //添加图层
    // if (customName.indexOf('gbznt') > -1) {
    //     // viewer.imageryLayers.lower(dd);//将图层下移一层
    //     viewer.imageryLayers.lowerToBottom(dd); //将图层移到最底层
    //     viewer.imageryLayers.raise(dd); //将图层上移一层
    // }
    if (bottom) {
        viewer.imageryLayers.lowerToBottom(dd); //将图层移到最底层
        viewer.imageryLayers.raise(dd); //将图层上移一层
    }
}

//返回
function back() {
    removeWms(['gbznt'], true);
    addWms('shuzisannong:huangdaoqu_town', 'tl');
    viewer.camera.flyTo({
        destination: Cesium.Rectangle.fromDegrees(119.5091, 35.5671, 120.3285, 36.1455),
        duration: 2,
    });
    flag.value = false;
}

/*--------------------------------------------------------------------------------------------*/
function getAreaFenlei() {
    let fl = fenleiRef.value;
    axios({
        url:
            serverAPI.geoserverUrl +
            '/shuzisannong/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=shuzisannong%3Ahuangdaoqu_town&maxFeatures=50&outputFormat=application%2Fjson',
    })
        .then(res => {
            let data = res.data.features;
            data.forEach((item, index) => {
                const rectangle = Cesium.Rectangle.fromDegrees(
                    item.bbox[0],
                    item.bbox[1],
                    item.bbox[2],
                    item.bbox[3]
                );
                const center = Cesium.Rectangle.center(rectangle); //获取视角范围中心点(得到的结果为弧度Cartographic)
                let longitude = Cesium.Math.toDegrees(center.longitude); //将弧度转为度
                let latitude = Cesium.Math.toDegrees(center.latitude);

                if (item.properties.XZDM === '370211011') {
                    //灵山卫街道
                    longitude = 120.0863;
                    latitude = 35.941;
                } else if (item.properties.XZDM === '370211003') {
                    //薛家岛街道
                    longitude = 120.243682;
                    latitude = 35.97123201;
                }
                const townData = fl[item.properties.XZMC];
                let label = [];
                if (townData) {
                    label = townData.map((it, inex) => {
                        // let dd = `${it.properties.crop} ：${(it.properties.Shape_Area / 666.67).toFixed(2)} 亩`
                        // return dd
                        return it.properties;
                    });
                }
            });
        })
        .catch(err => {});
}
let fenleiRef = ref({});
function mbHandle() {
    axios({
        url:
            serverAPI.geoserverUrl +
            '/shuzisannong/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=shuzisannong%3Afenlei&maxFeatures=137&outputFormat=application%2Fjson',
    })
        .then(res => {
            let features = res.data.features;
            let town = {};
            // 按镇分类
            features.forEach(item => {
                let key = item.properties.town;
                if (town[key]) {
                    town[key].push(item);
                } else {
                    town[key] = [item];
                }
            });
            fenleiRef.value = town;
            getAreaFenlei();
        })
        .catch(err => {});
}

// 地图移动时弹窗跟随
function infoWindowPostRender() {
    if (townZuowu.value && townZuowu.label[0].msLongitude && townZuowu.label[0].msLatitude) {
        //经纬度转为世界坐标
        const gisPosition = Cesium.Cartesian3.fromDegrees(
            Number(townZuowu.label[0].msLongitude),
            Number(townZuowu.label[0].msLatitude),
            0
        ); //转化为屏幕坐标
        var windowPosition = Cesium.SceneTransforms.wgs84ToWindowCoordinates(
            viewer.scene,
            gisPosition
        );

        if (Cesium.defined(windowPosition)) {
            const pop = document.getElementById('pop');
            pop.style.top = windowPosition.y - 10 + 'px';
            pop.style.left = windowPosition.x + 10 + 'px';
        }
    }
}
// function infoWindowPostRenders() {
//     if (townZuowu.value && townZuowu.label[0].msLongitude && townZuowu.label[0].msLatitude) {
//         //经纬度转为世界坐标
//         const gisPosition = Cesium.Cartesian3.fromDegrees(
//             Number(townZuowu.label[0].msLongitude),
//             Number(townZuowu.label[0].msLatitude),
//             0
//         ); //转化为屏幕坐标
//         var windowPosition = Cesium.SceneTransforms.wgs84ToWindowCoordinates(
//             viewers.scene,
//             gisPosition
//         );
//         if (Cesium.defined(windowPosition)) {
//             const pop = document.getElementById('pops');
//             pop.style.top = windowPosition.y - 10 + 'px';
//             pop.style.left = windowPosition.x + 10 + 'px';
//         }
//     }
// }

// 隐藏弹窗
function hiddenOverlayChart() {
    // // 移除各种高亮
    // XZDM = '';
    // XZQDM = '';
    // removeWms(['village_CQL']);
    // removeWms(['aaa']);

    // deleteEntityByName('villageLine');
    // deleteEntityByName('townLine');

    const pop = document.getElementById('pop');
    pop.style.display = 'none'; // 清除监听事件
    viewer.scene.postRender.removeEventListener(infoWindowPostRender);
    // // 重定位
    // viewer.camera.flyTo({
    //     destination: Cesium.Rectangle.fromDegrees(119.5091, 35.5671, 120.3285, 36.1455),
    //     duration: 2,
    // });
    // removeWms(['gbznt'], true);
    // // addWms('shuzisannong:huangdaoqu_town', 'tl');
    flag.value = false;
}
function hiddenOverlayCharts() {
    // 移除各种高亮
    XZDM = '';
    XZQDM = '';
    removeWms(['village_CQL']);
    removeWms(['aaa']);

    deleteEntityByName('villageLine');
    deleteEntityByName('townLine');

    const pop = document.getElementById('pops');
    pop.style.display = 'none'; // 清除监听事件
    // viewers.scene.postRender.removeEventListener(infoWindowPostRenders);
    // 重定位
    viewer.camera.flyTo({
        destination: Cesium.Rectangle.fromDegrees(119.5091, 35.5671, 120.3285, 36.1455),
        duration: 2,
    });
    removeWms(['gbznt'], true);
    // addWms('shuzisannong:huangdaoqu_town', 'tl');
    flag.value = false;
}
//显示弹窗
function showOverlayChart(position) {
    var coordinate = position;
    var pixel = maps.getPixelFromCoordinate(coordinate);
    console.log(pixel); // [259, 297]
    const pop = document.getElementById('pop');
    pop.style.display = 'block';
    pop.style.position = 'absolute';
    pop.style.top = pixel[0] - 10 + 'px';
    pop.style.left = pixel[1] + 10 + 'px';
    pop.style.zIndex = 99;
    console.log(pop);
}
function showOverlayCharts(position) {
    var coordinate = position;
    var pixel = maps.getPixelFromCoordinate(coordinate);
    console.log(pixel); // [259, 297]
    const pop = document.getElementById('pops');
    pop.style.display = 'block';
    pop.style.position = 'absolute';
    pop.style.top = pixel[0] - 10 + 'px';
    pop.style.left = pixel[1] + 10 + 'px';
    pop.style.zIndex = 99;
    console.log(pop);
}

/*-------------------------------------------------------------------------------------------*/
</script>

<style lang="scss" scoped>
$height: calc(100vh - 110px);

.fatherDiv {
    width: 100%;
    height: 100%;
}
.tabulation,
.centerBox {
    width: 100%;
    height: 98%;
    .imgrotate {
        transform: rotate(180deg);
    }
    .title {
        width: 100%;
        height: 45px;
        background: url('@/assets/images/title.png');
        background-repeat: no-repeat;
        background-size: 110% 100%;
        color: #fff;
        font-size: 18px;
        font-weight: 700;
        line-height: 45px;
        padding-left: 46px;
        display: flex;
        cursor: pointer;
        align-items: center;
        justify-content: space-between;

        span {
            width: 80%;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
            background: linear-gradient(
                180deg,
                rgba(255, 255, 255, 1) 33.33%,
                rgba(41, 255, 219, 1) 100%
            );
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        p {
            width: 110px;
            height: 25px;
            border-radius: 20px;
            font-size: 14px;
            background: linear-gradient(
                180deg,
                rgba(16, 111, 111, 1) 0%,
                rgba(47, 214, 214, 1) 100%
            );
            border: 1.5px solid rgba(23, 194, 180, 1);
            display: flex;
            justify-content: center;
            align-items: center;
        }
    }
}
.el-dialog__body {
    color: #fff;
}
.tabulation {
    display: none;
    :deep() .el-dialog {
        background: #fff;
    }
    :deep(.el-dialog__header) {
        opacity: 1;
        border-bottom: 1px solid rgba(219, 219, 219, 1);
        padding: 10px;
        font-size: 16px;
        font-weight: 700;
    }
    .rowContent {
        .rowContentTop {
            border-radius: 8px;
            background: rgba(248, 248, 248, 1);
            padding: 0 15px;
            margin-bottom: 10px;
            .rowContentchildren {
                display: flex;
                align-items: center;
                justify-content: space-between;
            }
            p {
                display: flex;
                align-items: center;
                color: rgba(100, 195, 164, 1);
                span {
                    width: 62px;
                    height: 24px;
                    opacity: 1;
                    border-radius: 0px 8px;
                    display: flex;
                    justify-content: flex-start;
                    align-items: flex-start;
                    padding: 5px 10px 5px 10px;
                    text-align: center;
                    margin-left: 20px;
                    color: rgba(255, 255, 255, 1);
                    line-height: 14px;
                }
            }
        }
    }
    .rowContent_bottom {
        .rowContentTop {
            border-radius: 8px;
            background: rgba(248, 248, 248, 1);
            padding: 0 15px;
            margin-bottom: 10px;
            .rowContentchildren {
                display: flex;
                align-items: center;
                justify-content: space-between;
                font-size: 18px;
            }
            p {
                display: flex;
                align-items: center;
                color: rgba(100, 195, 164, 1);
                span {
                    // width: 62px;
                    // height: 24px;
                    opacity: 1;
                    border-radius: 0px 8px;
                    display: flex;
                    justify-content: flex-start;
                    align-items: flex-start;
                    padding: 5px 10px 5px 10px;
                    text-align: center;
                    margin-left: 20px;
                    color: rgba(255, 255, 255, 1);
                    line-height: 14px;
                }
            }
            .rowContentTopChildren {
                font-size: 18px;
                display: flex;
                flex-wrap: wrap;
                div {
                    width: 33%;
                    text-align: right;
                    padding: 5px;
                }
            }
        }
    }

    .demo-tabs {
        // width: 100%;
        // height: 98%;
        :deep(.el-tabs__nav.is-top) {
            transform: translateX(60px) !important;
        }
    }
    :deep() .demo-tabs > .el-tabs__content {
        padding: 10px;
        color: #6b778c;
        font-size: 32px;
        font-weight: 600;
        display: none;
        // width: 100%;
        // height: 93%;
        .el-tab-pane {
            // width: 100%;
            // height: 100%;
        }
    }
    .tabulationCente {
        width: 100%;
        height: 92%;
        display: flex;
        padding: 10px;
        .left {
            width: 15%;
            height: 100%;
            box-shadow: 0px 0px 9px 0px rgba(0, 0, 0, 0.08);
            margin-right: 20px;
            font-size: 14px;
            color: rgba(0, 0, 0, 1);
            padding: 10px 20px;
        }
        .cesiumContainersDiv {
            width: 30%;
            height: 100%;
            background: #ccc;
            box-shadow: 0px 0px 9px 0px rgba(0, 0, 0, 0.08);
            position: relative;
            .detailed {
                width: 100%;
                height: 100%;
            }
            #pops {
                opacity: 1;
                border-radius: 5px;
                background: rgba(2, 31, 26, 0.6);
                display: none;
                flex-direction: column;
                justify-content: flex-start;
                align-items: flex-end;
                padding: 6px 8px 6px 8px;
                color: rgba(255, 255, 255, 1);
                font-size: 14px;
                .content {
                    div {
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        p {
                            width: 100px;
                            border-radius: 2px;
                            background: rgba(217, 231, 255, 0.2);
                            display: flex;
                            justify-content: center;
                            align-items: center;
                        }
                    }
                }
                .cancel {
                    position: absolute;
                    right: 10px;
                    top: 5px;
                    color: rgba(255, 255, 255, 1);
                    cursor: pointer;
                }
            }
        }

        .centent {
            width: 20px;
            height: 100%;
            position: relative;
            z-index: 99;
            .arrow {
                width: 22px;
                height: 22px;
                // background: #ccc;
                position: absolute;
                top: 50%;
                transform: translate(-80%, -50%);
                z-index: 99;
                border-radius: 50%;
                cursor: pointer;
            }
        }
        .freckle {
            width: 50%;
            flex: 1;
            // background: #ccc;
            box-shadow: 0px 0px 9px 0px rgba(0, 0, 0, 0.08);
            :deep(.el-input__wrapper) {
                opacity: 1;
                border-radius: 4px;
                background: #fff;
                border: none;
                box-shadow: 0px 3px 9px 0px rgba(0, 0, 0, 0.25);
                width: 20%;
                .el-input__inner {
                    color: rgba(170, 170, 170, 1);
                }
            }
            .searchDiv {
                margin: 20px;
                display: flex;
                .modeDiv {
                    width: 234px;
                    height: 26px;
                    opacity: 1;
                    border-radius: 8px;
                    display: flex;
                    justify-content: flex-start;
                    align-items: center;
                    text-align: center;
                    font-size: 14px;
                    // font-weight: 400;
                    border: 1px solid #ccc;
                    cursor: pointer;
                    div {
                        flex: 1;
                        height: 100%;
                        border-radius: 8px;
                        line-height: 26px;
                    }
                    .Selected {
                        background: rgba(100, 195, 164, 1);
                        border-radius: 8px 0px 0px 8px;
                        color: rgba(255, 255, 255, 1);
                    }
                    .Selecteds {
                        background: rgba(100, 195, 164, 1);
                        border-radius: 0px 8px 8px 0px;
                        color: rgba(255, 255, 255, 1);
                    }
                }
            }
            .tableBox {
                :deep(
                        .el-table .el-table__header-wrapper th,
                        .el-table .el-table__fixed-header-wrapper th
                    ) {
                    color: rgba(0, 0, 0, 1);
                }
                height: 93%;
                :deep(.el-table__inner-wrapper) {
                    height: 96% !important;
                }
                .example-pagination-block {
                    font-size: 14px;
                    display: flex;
                    align-items: center;
                    justify-content: flex-end;
                }
                :deep(.tabth) {
                    background-color: rgba(247, 247, 247, 1);
                    .el-table-fixed-column--left {
                        background: rgba(247, 247, 247, 1) !important;
                    }
                }
                .insectDiv {
                    width: 100%;
                    height: 90%;
                    overflow: hidden;
                    .gutters {
                        width: 100%;
                        height: 100%;
                        overflow-y: scroll;
                        .ins {
                            position: relative;
                            .yj {
                                color: rgba(255, 255, 255, 1);
                                position: absolute;
                                font-size: 14px;
                                border-radius: 0px 30px, 0px, 30px;
                                top: 0;
                                right: 0;
                                text-align: center;
                                line-height: 24px;
                                padding: 1px 5px;
                            }
                        }
                    }
                }
            }
        }
    }
}
.chartModeFather {
    width: 100%;
    height: 89%;
}
/*设置弹出框样式*/
.ol-popup {
    position: absolute;
    background-color: #eeeeee;
    -webkit-filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
    filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
    padding: 15px;
    border-radius: 10px;
    border: 1px solid #cccccc;
    bottom: 12px;
    left: -50px;
    min-width: 280px;
}
.ol-popup:after,
.ol-popup:before {
    top: 100%;
    border: solid transparent;
    content: ' ';
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}
.ol-popup:after {
    border-top-color: #eeeeee;
    border-width: 10px;
    left: 48px;
    margin-left: -10px;
}
.ol-popup:before {
    border-top-color: #cccccc;
    border-width: 11px;
    left: 48px;
    margin-left: -11px;
}
.ol-popup-closer {
    text-decoration: none;
    position: absolute;
    top: 2px;
    right: 8px;
}
.ol-popup-closer:after {
    content: '✖';
}
.chartMode {
    :deep(.el-table .el-table__header-wrapper th, .el-table .el-table__fixed-header-wrapper th) {
        color: rgba(0, 0, 0, 1);
    }
    height: 93%;
    :deep(.el-table__inner-wrapper) {
        height: 96% !important;
    }
    .example-pagination-block {
        font-size: 14px;
        display: flex;
        align-items: center;
        justify-content: flex-end;
    }
    :deep(.tabth) {
        background-color: rgba(247, 247, 247, 1);
    }
    .insectDiv {
        width: 100%;
        height: 90%;
        overflow: hidden;
        .gutters {
            width: 100%;
            height: 100%;
            overflow-y: scroll;
            .ins {
                position: relative;
                .yj {
                    color: rgba(255, 255, 255, 1);
                    position: absolute;
                    font-size: 14px;
                    border-radius: 0px 30px, 0px, 30px;
                    top: 0;
                    right: 0;
                    text-align: center;
                    line-height: 24px;
                    padding: 1px 5px;
                }
            }
        }
    }
    .tableBoxs {
        width: 100%;
        height: 100%;
        overflow: hidden;
        .gutters {
            width: 100%;
            height: 100%;
            overflow-y: scroll;
            .ins {
                position: relative;
                .yj {
                    color: rgba(255, 255, 255, 1);
                    position: absolute;
                    font-size: 14px;
                    border-radius: 0px 30px, 0px, 30px;
                    top: 0;
                    right: 0;
                    text-align: center;
                    line-height: 24px;
                    padding: 1px 5px;
                }
            }
        }
    }
    .chartModeDiv {
        width: 100%;
        height: 50%;
    }
    .depth {
        width: 50%;
        height: 26px;
        opacity: 1;
        border-radius: 4px;
        font-size: 12px;
        color: rgba(102, 102, 102, 1);
        margin-top: 20px;
        cursor: pointer;
        background: linear-gradient(
            180deg,
            rgba(16, 111, 111, 0.1) 0%,
            rgba(47, 214, 214, 0.1) 100%
        );

        border: 1px solid rgba(228, 231, 237, 1);
        display: flex;
        align-items: center;
        p {
            flex: 1;
            text-align: center;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .SelectedDiv {
            opacity: 1;
            border-radius: 4px;
            background: rgba(100, 195, 164, 1);
        }
        margin: 0 auto;
    }
}

.leftWra {
    position: absolute;
    top: 10px;
    left: 20px;
    height: $height;
    width: 23%;
    background: rgba(2, 31, 26, 0.85);
    box-shadow: inset 0px 0px 15px 6px rgba(41, 255, 255, 0.5);
    transition: transform 1s;
    .leftFoldDiv {
        width: 30px;
        height: 30px;
        position: absolute;
        right: -14%;
        top: 50%;
        transform: translate(-50%, -50%);
        font-size: 30px;
        color: #ccc;
    }
    .leftTop {
        width: 100%;
        height: 22%;
        display: flex;
        flex-direction: column;
        .types {
            width: 100%;
            height: 165px;
            display: flex;
            div {
                flex: 1;
            }
            font-size: 13px;
            font-weight: 700;
            letter-spacing: 0px;
            line-height: 20.27px;
            color: rgba(41, 255, 237, 1);
            text-align: center;
            p {
                height: 34px;
                width: 90%;
                opacity: 1;
                border-radius: 4px;
                cursor: pointer;
                // background: linear-gradient(
                //     180deg,
                //     rgba(16, 111, 111, 1) 0%,
                //     rgba(47, 214, 214, 1) 100%
                // );
                border: 1px solid rgba(23, 194, 180, 1);
                display: flex;
                justify-content: center;
                align-items: center;
                padding: 5px 5px 5px 5px;
                margin-left: 5px;
                overflow: hidden;
                // white-space: nowrap;
                // text-overflow: ellipsis;
                // word-break: keep-all;
            }
            .sele_types {
                background: linear-gradient(
                    180deg,
                    rgba(16, 111, 111, 1) 0%,
                    rgba(47, 214, 214, 1) 100%
                );
                color: rgba(255, 255, 255, 1);
            }
        }
    }
    .leftbottom {
        width: 100%;
        height: 75%;
        opacity: 1;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        padding-top: 13px;
        .tableDiv {
            // background: rgba(255, 255, 255, 0.05);
            width: 93%;
            height: 92%;
            padding: 5px 10px 5px 10px;
            color: rgba(255, 255, 255, 1);
            .el-table {
                --el-table-tr-bg-color: none;
                --el-table-border-color: none;
                ::v-deep .el-table__body tr.el-table__row--striped td {
                    background: rgba(38, 255, 255, 0.01);
                }
                // ::v-deep .el-table__row {
                //     background: linear-gradient(
                //         90deg,
                //         rgba(38, 255, 255, 0.15) 0%,
                //         rgba(38, 255, 255, 0.01) 100%
                //     );
                // }

                ::v-deep .el-table__body tr:hover > td {
                    background: linear-gradient(
                        90deg,
                        rgba(38, 255, 255, 0.15) 0%,
                        rgba(38, 255, 255, 0.01) 100%
                    ) !important;
                }
                color: rgba(255, 255, 255, 1);
            }

            .el-checkbox-group {
                display: flex;
                flex-direction: column;
            }

            :deep(.ones) {
                width: 100%;
                height: 171;
                display: flex;
                flex-direction: column;
                justify-content: flex-start;
                align-items: flex-start;
                --el-table-tr-bg-color: null;
                --el-table-border-color: null;
                font-size: 14px;
                font-weight: 400;
                letter-spacing: 0px;
                line-height: 0px;
                color: rgba(255, 255, 255, 1);
            }
        }
    }
}
:deep(.el-table .el-table__cell) {
    //解决图片被其他的表格干扰问题
    position: unset;
}
.time {
    font-size: 12px;
    color: #999;
}

.bottom {
    // margin-top: 13px;
    line-height: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.button {
    padding: 0;
    min-height: auto;
}

.image {
    width: 100%;
    display: block;
}
.rightWra {
    position: absolute;
    top: 10px;
    right: 20px;
    width: 23%;
    height: $height;
    opacity: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: rgba(2, 31, 26, 0.85);
    box-shadow: inset 0px 0px 15px 6px rgba(41, 255, 255, 0.5);
    transition: transform 1s;
    .rightFoldDiv {
        width: 30px;
        height: 30px;
        position: absolute;
        left: -8%;
        top: 50%;
        transform: translate(0, -50%);
        font-size: 30px;
        color: #ccc;
    }
    .rightTop {
        width: 100%;
        height: 100%;
        opacity: 1;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;

        .farmlandDiv {
            width: 100%;
            height: 30%;
            opacity: 1;
            display: flex;
            justify-content: center;
        }
        .Phdiv {
            width: 100%;
            display: flex;
            height: 30%;
            justify-content: center;
        }
        .depth {
            width: 90%;
            height: 26px;
            opacity: 1;
            border-radius: 4px;
            font-size: 12px;
            color: rgba(255, 255, 255, 1);
            margin-top: 20px;
            cursor: pointer;
            background: linear-gradient(
                180deg,
                rgba(16, 111, 111, 0.1) 0%,
                rgba(47, 214, 214, 0.1) 100%
            );

            border: 1px solid rgba(23, 194, 180, 0.3);
            display: flex;
            align-items: center;
            p {
                flex: 1;
                text-align: center;
                height: 100%;
                display: flex;
                align-items: center;
                justify-content: center;
            }
            .SelectedDiv {
                opacity: 1;
                border-radius: 4px;
                background: linear-gradient(
                    180deg,
                    rgba(16, 111, 111, 1) 0%,
                    rgba(47, 214, 214, 1) 100%
                );
            }
        }
        .soilDiv {
            width: 100%;
            display: flex;
            height: 30%;
            justify-content: center;
        }

        .ProgressBar {
            width: 100%;
            height: 9px;
            opacity: 1;
        }
    }

    .rightbottom {
        width: 100%;
        height: 490px;
        opacity: 1;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;

        .el-select {
            width: 80%;
            font-size: 14px;
            color: #333;
            background: rgba(22, 94, 102, 1);
            border: 1px solid rgba(4, 153, 153, 1) !important;
            margin-top: 20px;

            :deep(.el-input__wrapper) {
                background-color: transparent;
            }

            :deep(.el-input__inner) {
                color: rgba(255, 255, 255, 0.7);
            }
        }
    }
}
:deep(.el-input__wrapper) {
    opacity: 1;
    border-radius: 4px;
    background: rgba(22, 94, 102, 1);
    border: 1px solid rgba(4, 153, 153, 1);
    box-shadow: 0px 3px 9px 0px rgba(0, 0, 0, 0.25);
    width: 20%;
    .el-input__inner {
        color: rgba(255, 255, 255, 1);
    }
}
:deep(.el-table__expand-icon) {
    color: #fff;
}
.selectdiv {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    p {
        padding: 10px;
        width: 50%;
    }
}
.block {
    display: flex;
    justify-content: flex-end;
}
:deep(.el-table__expanded-cell) {
    background: linear-gradient(
        90deg,
        rgba(38, 255, 255, 0.15) 0%,
        rgba(38, 255, 255, 0.01) 100%
    ) !important;
}
.modelDiv {
    :deep(.el-dialog) {
        width: 50%;
        color: #fff;
        .el-dialog__title {
            color: #fff;
        }
        .center {
            color: #fff;
            div {
                display: flex;
                justify-content: space-between;
                margin: 10px;
            }
        }
    }
}
:deep(.el-image) {
    box-shadow: none;
}

.legend {
    position: absolute;
    right: 28%;
    bottom: 18%;
    width: 129px;
    height: 338px;
    opacity: 1;
    border-radius: 4px;
    background: rgba(2, 31, 26, 0.6);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding: 10px 10px 10px 10px;

    p {
        margin: 10px;
        font-size: 14px;
        font-weight: 400;
        letter-spacing: 0px;
        line-height: 0px;
        color: rgba(255, 255, 255, 1);
        text-align: center;
    }

    .mt-4 {
        .el-checkbox {
            height: 30px;
            width: 100%;
            margin-bottom: 2px;
            padding-left: 10px;
            font-size: 14px;
            font-weight: 400;
            letter-spacing: 0px;
            line-height: 0px;
            color: rgba(255, 255, 255, 1);
            text-align: left;
        }
    }

    :deep(.el-checkbox__label) {
        color: rgba(255, 255, 255, 1);
    }
}
.showBox {
    width: 285px;
    height: 173px;
    opacity: 1;
    border-radius: 5px;
    background: rgba(2, 31, 26, 0.6);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-end;
    padding: 6px 8px 6px 8px;
}
.bottom_center {
    position: absolute;
    left: 26%;
    // transform: translate(-50%);
    width: calc(100% - 50% - (1vw * 2));
    min-width: 380px;
    bottom: 6%;
    height: 30%;
    opacity: 1;
    border-radius: 5px;
    background: rgba(2, 31, 26, 0.6);
    border: 1px solid rgba(4, 153, 153, 1);
    display: flex;
    .left_bottom {
        width: 50%;
    }
    .right_bottom {
        width: 50%;
        .tableDiv {
            height: 81%;
            margin-bottom: 20px;
        }
    }
    .el-table {
        --el-table-tr-bg-color: none;
        --el-table-border-color: none;
        ::v-deep .el-table__body tr.el-table__row--striped td {
            background: rgba(38, 255, 255, 0.01);
        }
        // ::v-deep .el-table__row {
        //     background: linear-gradient(
        //         90deg,
        //         rgba(38, 255, 255, 0.15) 0%,
        //         rgba(38, 255, 255, 0.01) 100%
        //     );
        // }

        ::v-deep .el-table__body tr:hover > td {
            background: linear-gradient(
                90deg,
                rgba(38, 255, 255, 0.15) 0%,
                rgba(38, 255, 255, 0.01) 100%
            ) !important;
        }
        color: rgba(255, 255, 255, 1);
    }

    .el-checkbox-group {
        display: flex;
        flex-direction: column;
    }

    :deep(.ones) {
        width: 100%;
        height: 171;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        --el-table-tr-bg-color: null;
        --el-table-border-color: null;
        font-size: 14px;
        font-weight: 400;
        letter-spacing: 0px;
        line-height: 0px;
        color: rgba(255, 255, 255, 1);
    }
    .imgdiv {
        width: 100%;
        height: calc(100% - 50px);
        display: flex;
        justify-content: center;
        padding: 10px;
    }
    .bottonFold {
        position: absolute;
        left: 47%;
        top: -16%;
    }
}

.tool {
    position: absolute;
    right: 30%;
    top: 8%;
    width: 30px;
    height: 280px;
    opacity: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    display: none;
}

#popup {
    border-radius: 5px;
    background: rgba(2, 31, 26, 1);
    // display: none;
    // justify-content: flex-start;
    // align-items: flex-end;
    // padding: 30px 8px 20px 8px;
    color: #fff;
    box-shadow: inset 0px 0px 15px 6px rgba(41, 255, 255, 0.5);
    border: rgba(41, 255, 255, 1);
}

#pop {
    opacity: 1;
    border-radius: 5px;
    background: rgba(2, 31, 26, 0.6);
    display: none;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-end;
    padding: 6px 8px 6px 8px;
    color: rgba(255, 255, 255, 1);
    .content {
        div {
            display: flex;
            align-items: center;
            justify-content: space-between;
            p {
                width: 159px;
                border-radius: 2px;
                background: rgba(217, 231, 255, 0.2);
                display: flex;
                justify-content: center;
                align-items: center;
            }
        }
    }
    .cancel {
        position: absolute;
        right: 10px;
        top: 5px;
        color: rgba(255, 255, 255, 1);
        cursor: pointer;
    }
}
.back_button {
    position: absolute;
    right: 30%;
    top: 20px;
}
:deep(.el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell) {
    background: rgba(38, 255, 255, 0.1);
}
:deep(.el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell) {
    background: rgba(38, 255, 255, 0.01);
}
:deep(.el-select__popper.el-popper) {
}

:deep(.el-dialog) {
    opacity: 1;
    border-radius: 4px;
    background: rgba(3, 48, 54, 0.95);
    color: rgba(255, 255, 255, 1);
    --el-dialog-width: 70%;
}
:deep(.el-dialog__header) {
    opacity: 1;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    padding: 10px;
}
.my-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    color: rgba(255, 255, 255, 1);
    .buttonbox {
        display: flex;
        align-items: center;
    }
}
:deep(.el-dialog__header) {
    margin-right: 0;
    .my-header {
        align-items: center;
        .el-dialog__title {
            color: rgba(255, 255, 255, 1);
        }
    }
}
</style>
<style lang="scss">
.el-popper {
    border: none !important;
    background: transparent !important;
}

.el-popper__arrow::before {
    background: rgba(41, 255, 255, 0.7) !important;
    display: none;
}
.select_div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    padding: 0 10px;
    .slele_time {
        display: flex;
        align-items: center;
        div {
            display: flex;
            align-items: center;
        }
    }
    .device {
        width: 105px;
    }
}
.tableDiv {
    // background: rgba(255, 255, 255, 0.05);
    width: 100%;
    height: 100%;
    padding: 5px 10px 5px 10px;
    color: rgba(255, 255, 255, 1);
    .el-table {
        --el-table-tr-bg-color: none;
        --el-table-border-color: none;
        color: rgba(255, 255, 255, 1);
    }

    // margin: 20px auto;
}
.el-popper {
    background: #fff !important;
}
</style>
