<template>
    <div class="center">
        <div ref="cesiumContainer" style="width: 100%; height: 100%" id="cesiumContainer"></div>
        <div class="leftWra">
            <div class="leftTop">
                <div class="title">
                    <span>设备类型选择</span>
                </div>
                <div class="types">
                    <div width="100%" class="types_left">
                        <img width="90" src="@/assets/images/spore.png" alt="" />
                        <p
                            @click="
                                e => {
                                    sporeClick(e);
                                }
                            "
                            class="sele_types"
                        >
                            智能孢子捕捉分析
                        </p>
                    </div>
                    <div width="100%" class="types_center">
                        <img width="90" src="@/assets/images/insect.png" alt="" />
                        <p
                            @click="
                                e => {
                                    insectClick(e);
                                }
                            "
                            class="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="sele_types"
                        >
                            土壤墒情、土质
                        </p>
                    </div>
                </div>
            </div>
            <div class="leftcenter">
                <div class="title">
                    <span>设备照片</span>
                </div>
                <div class="imgdiv">
                    <img
                        src="https://img.js.design/assets/img/641d73a7cece21d6b61bedf9.png#d27dd8c8c5369101dca2dcf160e5bba9"
                        alt=""
                    />
                </div>
            </div>
            <div class="leftbottom">
                <div class="title">
                    <span>智能孢子监测数据</span>
                    <p @click="visible = true">
                        历史数据 &nbsp;
                        <img
                            src="@/assets/icons/svg/downloads.svg"
                            style="width: 14px; height: 14px; cursor: pointer"
                        />
                    </p>
                </div>
                <div class="tableDiv">
                    <el-table max-height="200px" :data="tableData.arr" stripe style="width: 100%">
                        <el-table-column prop="devCode" label="设备编号" />
                        <el-table-column prop="pictureTime" label="监测时间" />
                        <el-table-column prop="warning" label="预警情况" />
                        <el-table-column prop="pictureName" label="照片">
                            <template #default="scope">
                                <el-image
                                    style="width: 100%; height: 100px"
                                    :src="scope"
                                    :preview-src-list="imageBox"
                                >
                                    <div slot="error" class="image-slot">
                                        <i class="el-icon-picture-outline"></i>
                                    </div>
                                </el-image>
                            </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">
            <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="SelectedDiv">0cm</p>
                    <p>-10cm</p>
                    <p>-20cm</p>
                    <p>-30cm</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">
            <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="
                            Deta(
                                'https://1912c.oss-cn-beijing.aliyuncs.com/egg-oss-demo/zhongzhimianji%20.xlsx'
                            )
                        "
                    >
                        历史数据 &nbsp;
                        <img
                            src="@/assets/icons/svg/downloads.svg"
                            style="width: 14px; height: 14px; cursor: pointer"
                        />
                    </p>
                </div>
                <div class="tableDiv">
                    <el-table max-height="200px" :data="tableData.arr" stripe style="width: 100%">
                        <el-table-column prop="devCode" label="设备编号" />
                        <el-table-column prop="pictureTime" label="监测时间" />
                        <el-table-column prop="warning" label="预警情况" />
                        <el-table-column prop="pictureName" label="照片">
                            <template #default="scope">
                                <el-image
                                    style="width: 100%; height: 100px"
                                    :src="scope"
                                    :preview-src-list="imageBox"
                                >
                                    <div slot="error" class="image-slot">
                                        <i class="el-icon-picture-outline"></i>
                                    </div>
                                </el-image>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </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">
            <div>{{ clickInfoMap.name }}：</div>
            <div>{{ clickInfoMap.value }}亩</div>
            <div class="cancel" @click="hiddenOverlayChart">X</div>
        </div>
        <div id="pop">
            <div v-for="(item, index) in townZuowu.label" :key="index">
                <div>{{ item.crop }}：</div>
                <div>{{ (item.Shape_Area / 666.67).toFixed(2) }} 亩</div>
            </div>
            <div v-if="townZuowu.XZQMC">
                <div>村名：</div>
                <div>{{ townZuowu.XZQMC }}</div>
            </div>
            <div class="cancel" @click="hiddenOverlayChart">X</div>
        </div>
        <el-button v-if="flag" class="back_button" @click="back()">返回</el-button>
        <el-dialog 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">
                            <span style="vertical-align: middle">查询</span>
                        </el-button>
                        <el-button type="primary">
                            <span style="vertical-align: middle">下载</span>
                        </el-button>
                        <el-button type="primary">
                            <span style="vertical-align: middle">重置</span>
                        </el-button>
                        &emsp;
                        <el-icon @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>
                </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 max-height="200px" :data="tableData.arr" style="width: 100%">
                    <el-table-column prop="date" label="设备编号" />
                    <el-table-column prop="name" label="监测时间" />
                    <el-table-column prop="address" label="预警情况">
                        <template #default="scope">
                            <div style="background-color: red">
                                {{ scope.row.name }}
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="address" label="照片" />
                </el-table>
                <div class="block">
                    <el-pagination background layout="prev, pager, next" :total="50" />
                </div>
            </div>
        </el-dialog>
    </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 * as turf from '@turf/turf';
import { useEcharts } from '@/hooks/useEcharts';
import { getarea, getTownship, getvillage, getareas, dow } from '@/api/crops/classify.js';
import { getSpore } from '@/api/pestis/pestis.js';
import axios from 'axios';
import 'echarts-gl';
import $ from 'jquery';
import { download } from '@/utils/request';
import { ElButton, ElDialog } from 'element-plus';
import { CircleCloseFilled } from '@element-plus/icons-vue';

const visible = ref(false); //历史数据弹框
let viewer = ref(null);
const cesiumContainer = ref(null);
const farmlandDiv = ref(null);
const Phdiv = ref(null);
const soilDiv = ref(null);
const ProgressBarDiv = ref(null);
const value = ref('370211');
const leftProgressBarDiv = ref(null);
let Township = reactive({ arr: [], brr: [], crr: [] }); //街道
let OptionArr = reactive({ arr: [] });
const clickInfoMap = ref({ name: '', value: '' });
const checkedCities = ref([]);
const formLandRef = ref([]);
const flag = ref(false);
let leftWraFlag = ref(true);
let rightWraFlag = ref(true);
const value1 = ref(''); //开始时间
const value2 = ref(''); //结束时间
const deviceValue = ref(''); //设备选择
const options = [
    {
        value: '设备1',
        label: '设备1',
    },
    {
        value: '设备2',
        label: '设备2',
    },
];
watch(
    () => Township.arr,
    val => {
        console.log('val:', val);
    }
);
//行政区划数据
var data = {
    title: [],
};
let dd = {
    小麦: [],
    玉米: [],
    大豆: [],
    地瓜: [],
    花生: [],
    蓝莓: [],
    茶叶: [],
    马铃薯: [],
    白菜和萝卜: [],
    其他: [],
};

//表格数据
let tableData =reactive({arr:[]}) ;

// 组件挂载完成后执行
onMounted(() => {
    getSpores(); //请求
    getaArea(); //面积
    getTownships();
    getvillages(); //村
    //地图
    initMap();
    farmland();
    getFarmland();
    Ph();
    soil();
    map();
    getSpores()
});

/*-------------地图------------------------*/
const mapOption = {
    url:
        'http://{s}.tianditu.gov.cn/img_c/wmts?service=wmts&request=GetTile&version=1.0.0' +
        '&LAYER=img&tileMatrixSet=c&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}' +
        '&style=default&format=tiles&tk=31091965e263284a501a723b8909f405',
    layer: 'tdtCva',
    style: 'default',
    format: 'tiles',
    tileMatrixSetID: 'c',
    subdomains: ['t0', 't1', 't2', 't3', 't4', 't5', 't6', 't7'],
    tilingScheme: new Cesium.GeographicTilingScheme(),
    tileMatrixLabels: [
        '1',
        '2',
        '3',
        '4',
        '5',
        '6',
        '7',
        '8',
        '9',
        '10',
        '11',
        '12',
        '13',
        '14',
        '15',
        '16',
        '17',
        '18',
        '19',
    ],
    maximumLevel: 18,
};
Cesium.Ion.defaultAccessToken =
    'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJiYzcwZmJmNi02MzQ5LTQ1MGEtODgzMy0yZTZiZGExY2MzMGMiLCJpZCI6MTAxOTgsInNjb3BlcyI6WyJhc2wiLCJhc3IiLCJnYyJdLCJpYXQiOjE1ODEzMDgxNTR9.NeJU4yfUi-SnLrNDOBYsQgmiSh3B4axCTi1m84Qw99c';
function initMap() {
    viewer = new Cesium.Viewer('cesiumContainer', {
        baseLayerPicker: false,
        shouldAnimate: true, //自动播放
        infoBox: false, //信息框
        animation: false, //“动画”窗口小部件提供用于播放，暂停和倒退的按钮，以及当前时间和日期，并由“飞梭环”包围，用于控制动画的速度。cesium示例地图左下角那个
        timeline: false, //时间轴是用于显示和控制当前场景时间的小部件。
        geocoder: false, //查找，用于查找地址和地标，以及将照相机悬挂到它们。使用铯离子进行地址解析。,cesium示例地图右上角的放大镜
        homeButton: false, //主页按钮
        navigationHelpButton: false, //导航帮助按钮
        selectionIndicator: false, //原生选择绿框
        fullscreenButton: false, //右下角的全屏按钮
        // terrainProvider:new Cesium.createWorldTerrain(),
        terrainProvider: new Cesium.EllipsoidTerrainProvider({}),
        sceneModePicker: false, //是否显示投影方式控件
        contextOptions: {
            webgl: {
                alpha: true,
            },
        },

        imageryProvider: new Cesium.WebMapTileServiceImageryProvider({
            ...mapOption,
            // url: "http://service.sdmap.gov.cn/hisimage/weipian202209?tk=9cc3e9deb3cf643b6f133717c333d16d",
            // layer: "c",
            // style: ",c",
            // format: "image/png",
            // tileMatrixSetID: "EPSG:4490",
            // rectangle: Cesium.Rectangle.fromDegrees(114.8, 34.35, 122.82, 38.43),
            // // subdomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],
            // tilingScheme: new Cesium.GeographicTilingScheme(),
            // tileMatrixLabels: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19"],
            // // maximumLevel: 18
        }),
    });
    // 去除logo
    viewer.cesiumWidget.creditContainer.style.display = 'none';
    //加载地图服务
    // let map = new Cesium.WebMapServiceImageryProvider({
    //     url: `http://121.36.229.60:9080/geoserver/shuzisannong/wms`,
    //     layers: 'shuzisannong:huangdaoqu_town', //图层名
    //     parameters: {
    //         service: 'WMS',
    //         format: 'image/png',
    //         transparent: true, //是否透明
    //     },
    // });
    // viewer.imageryLayers.addImageryProvider(map);
    addWms('shuzisannong:huangdaoqu_town', 'tl');
    viewer.camera.flyTo({
        destination: Cesium.Rectangle.fromDegrees(119.5091, 35.5671, 120.3285, 36.1455),
        duration: 2,
    });

    // 图层点击事件
    layerClick();
    // 蒙版
    mbHandle();

    //加载黄岛区村级地图服务
    // Cesium.GeoJsonDataSource.load(
    //     'http://121.36.229.60:9080/geoserver/shuzisannong/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=shuzisannong%3Ahuangdaoqu_village&maxFeatures=1180&outputFormat=application%2Fjson',
    //     {
    //         stroke: Cesium.Color.fromCssColorString('red'), //轮廓颜色
    //         fill: Cesium.Color.fromCssColorString('rgba(0,0,0,0.1)'), //内部颜色
    //         strokeWidth: 3, //轮廓宽度    clampToGround: true,//是否贴地
    //     }
    // ).then(function (dataSource) {
    //     // dataSource.name = 'geojsonDataSource'//自定义属性，方便以后操作
    //     viewer.dataSources.add(dataSource); //添加
    //     viewer.flyTo(dataSource, {
    //         duration: 5,
    //         offset: {
    //             heading: 0.0,
    //             pitch: -90, //保持垂直视角
    //         },
    //     }); //移动到该位置
    // });
    //加载黄岛区镇级地图服务
    // Cesium.GeoJsonDataSource.load(
    //     'http://121.36.229.60:9080/geoserver/shuzisannong/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=shuzisannong%3Ahuangdaoqu_town&maxFeatures=50&outputFormat=application%2Fjson',
    //     {
    //         stroke: Cesium.Color.fromCssColorString('#fff'), //轮廓颜色
    //         fill: Cesium.Color.fromCssColorString('rgba(0,0,0,0.1)'), //内部颜色
    //         strokeWidth: 3, //轮廓宽度    clampToGround: true,//是否贴地
    //     }
    // ).then(function (dataSource) {
    //     // dataSource.name = 'geojsonDataSource'//自定义属性，方便以后操作
    //     viewer.dataSources.add(dataSource); //添加
    //     viewer.flyTo(dataSource, {
    //         duration: 5,
    //         offset: {
    //             heading: 0.0,
    //             pitch: -90, //保持垂直视角
    //         },
    //     }); //移动到该位置
    // });

    // axios({
    //     method: 'get',
    //     url: 'http://121.36.229.60:9080/geoserver/shuzisannong/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=shuzisannong%3Ahuangdaoqu_town&maxFeatures=50&outputFormat=application%2Fjson',
    // })
    //     .then(res => {
    //         res.data.features.forEach(item => {
    //             addBoundaryHandle(item.geometry.coordinates, '');
    //         });
    //     })
    //     .catch(error => {});

    //作物分类面积提取地图服务
    // let map2 = new Cesium.WebMapServiceImageryProvider({
    //     url: `http://121.36.229.60:9080/geoserver/shuzisannong/wms`,
    //     layers: 'shuzisannong:fenlei', //图层名
    //     parameters: {
    //         service: 'WMS',
    //         format: 'image/png',
    //         CQL_FILTER: `crop=${city_code}`,
    //         transparent: true, //是否透明
    //     },
    // });
    // viewer.imageryLayers.addImageryProvider(map2);

    // Cesium.GeoJsonDataSource.load(
    //     'http://121.36.229.60:9080/geoserver/shuzisannong/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=shuzisannong%3Afenlei&maxFeatures=50&outputFormat=application%2Fjson',
    //     {
    //         stroke: Cesium.Color.fromCssColorString('rgba(165,214,63,1)'), //轮廓颜色
    //         fill: Cesium.Color.fromCssColorString('rgba(0,0,0,0.1)'), //内部颜色
    //         strokeWidth: 3, //轮廓宽度    clampToGround: true,//是否贴地
    //     }
    // ).then(function (dataSource) {
    //     // dataSource.name = 'geojsonDataSource'//自定义属性，方便以后操作
    //     viewer.dataSources.add(dataSource); //添加
    //     viewer.flyTo(dataSource, {
    //         duration: 5,
    //         offset: {
    //             heading: 0.0,
    //             pitch: -90, //保持垂直视角
    //         },
    //     }); //移动到该位置
    // });
    //全球注记
    // let zhujiLayer = new Cesium.WebMapTileServiceImageryProvider({
    //     url: 'http://t0.tianditu.com/cia_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cia&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=5956e6519f2bb0ae8e57bc834298c9f1',
    //     layer: 'tdtImgBasicLayer',
    //     style: 'default',
    //     format: 'image/jpeg',
    //     tileMatrixSetID: 'GoogleMapsCompatible',
    //     show: false,
    // });
    // viewer.imageryLayers.addImageryProvider(zhujiLayer);

    // viewer.camera.flyTo(
    //     {
    //         destination: new Cesium.Cartesian3.fromDegrees(104.9, 36.35, 8000000),
    //         duration: 0,
    //     },
    //     {
    //         offset: {
    //             heading: Cesium.Math.toRadians(0.0),
    //             pitch: Cesium.Math.toRadians(-25),
    //         },
    //     }
    // );
}

// data数据数组
// name实体名称，方便以后删除
// color实体颜色
function addBoundaryHandle(data, name, color) {
    data.forEach(item => {
        let arr = [];
        item[0].forEach(mem => {
            arr.push(mem[0]);
            arr.push(mem[1]);
        });
        viewer.entities.add({
            name: name,
            polyline: {
                positions: Cesium.Cartesian3.fromDegreesArray(arr),
                width: 6,
                // material: new Cesium.PolylineDashMaterialProperty({//虚线
                material: new Cesium.PolylineGlowMaterialProperty({
                    //光晕
                    glowPower: 0.2,
                    color: color
                        ? Cesium.Color.fromCssColorString(color)
                        : Cesium.Color.fromBytes(250, 128, 114), //#FA8072
                }),
                // followSurface: false, //是否贴着地表
                clampToGround: true, //贴地
            },
        });
    });
}
function getLevel(height) {
    if (height > 48000000) {
        return 0;
    } else if (height > 24000000) {
        return 1;
    } else if (height > 12000000) {
        return 2;
    } else if (height > 6000000) {
        return 3;
    } else if (height > 3000000) {
        return 4;
    } else if (height > 1500000) {
        return 5;
    } else if (height > 750000) {
        return 6;
    } else if (height > 375000) {
        return 7;
    } else if (height > 187500) {
        return 8;
    } else if (height > 93750) {
        return 9;
    } else if (height > 46875) {
        return 10;
    } else if (height > 23437.5) {
        return 11;
    } else if (height > 11718.75) {
        return 12;
    } else if (height > 5859.38) {
        return 13;
    } else if (height > 2929.69) {
        return 14;
    } else if (height > 1464.84) {
        return 15;
    } else if (height > 732.42) {
        return 16;
    } else if (height > 366.21) {
        return 17;
    } else {
        return 18;
    }
}
function getFarmland() {
    axios({
        url:
            serverAPI.geoserverUrl +
            '/shuzisannong/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=shuzisannong%3Afarmland&maxFeatures=50&outputFormat=application%2Fjson',
        method: 'get',
    })
        .then(res => {
            console.log('农田：', res);
            formLandRef.value = res.data.features;
        })
        .catch(err => {});
}

let townZuowu = ref({ label: [] }); //镇的作物
let XZDM = '';
// 图层点击事件
function layerClick() {
    var handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas);
    handler.setInputAction(function (movement) {
        var ray = viewer.camera.getPickRay(movement.position);
        var cartesian = viewer.scene.globe.pick(ray, viewer.scene);
        if (cartesian) {
            let cartographic = Cesium.Cartographic.fromCartesian(cartesian);
            if (cartographic) {
                let xy = new Cesium.Cartesian2();
                let alti = viewer.camera.positionCartographic.height;
                let level = getLevel(alti);
                const layers = viewer.imageryLayers._layers;
                const index = layers.findIndex(
                    item =>
                        item._imageryProvider._layers &&
                        item._imageryProvider._layers === 'shuzisannong:huangdaoqu_town'
                );
                if (index > -1) {
                    const providerPoint = layers[index];
                    // 拿取最后一个图层
                    let provider = providerPoint._imageryProvider;
                    if (
                        provider &&
                        provider.ready &&
                        provider._layers &&
                        providerPoint.show === true
                    ) {
                        xy = provider.tilingScheme.positionToTileXY(cartographic, level, xy);
                        let promise = provider.pickFeatures(
                            xy.x,
                            xy.y,
                            level,
                            cartographic.longitude,
                            cartographic.latitude
                        );
                        if (promise) {
                            promise.then(data => {
                                if (data.length > 0) {
                                    let newData = data['0'];
                                    if (newData.properties && newData.properties.XZDM) {
                                        if (XZDM !== newData.properties.XZDM) {
                                            //防止
                                            XZDM = newData.properties.XZDM;
                                            value.value = XZDM; //
                                            selectTab(); //
                                            let item = newData.data;
                                            // 定位
                                            viewer.camera.flyTo({
                                                destination: Cesium.Rectangle.fromDegrees(
                                                    item.bbox[0],
                                                    item.bbox[1],
                                                    item.bbox[2],
                                                    item.bbox[3]
                                                ),
                                                duration: 2,
                                            });
                                            // 移除高亮
                                            deleteEntityByName('townLine');
                                            // 高亮边界
                                            addBoundaryHandle(
                                                item.geometry && item.geometry.coordinates,
                                                'townLine',
                                                'yellow'
                                            );
                                            // 移除以前的
                                            removeWms(['village_CQL']);
                                            // 添加新的
                                            addvillage(
                                                `XZDM=${newData.properties.XZDM}`,
                                                'village_CQL'
                                            );

                                            // 显示该镇的种植结构
                                            let entitys = viewer.entities._entities._array;
                                            for (var na = entitys.length - 1; na >= 0; na--) {
                                                if (
                                                    entitys[na]._name &&
                                                    entitys[na]._name ===
                                                        'point' + newData.properties.XZDM
                                                ) {
                                                    let info = entitys[na]._info;
                                                    // entitys[na].label.show = true
                                                    townZuowu.value = info; //保存数据
                                                    console.log(
                                                        townZuowu.value,
                                                        '------------------'
                                                    );
                                                    showOverlayChart(movement.position); // 添加地图移动监听：使地图移动弹窗跟着移动
                                                    viewer.scene.postRender.addEventListener(
                                                        infoWindowPostRender
                                                    );
                                                } else {
                                                    // if (entitys[na].label) {
                                                    //     entitys[na].label.show = false
                                                    // }
                                                }
                                            }
                                            // 移除村高亮
                                            deleteEntityByName('villageLine');
                                            XZQDM = '';
                                        } else {
                                            // // 已经有镇了，监听村点击
                                            villageClick(layers, xy, level, cartographic);
                                        }
                                    } else {
                                        removeWms(['village_CQL']);
                                        // 移除框框
                                        hiddenOverlayChart(); // 清除监听事件
                                    }
                                }
                            });
                        }
                    }
                }
            }
        }
    }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
}

//智能孢子捕捉点击

const sporeClick = e => {
    if (e.target.className === 'sele_types') {
        e.target.className = '';
    } else {
        e.target.className = 'sele_types';
    }
};

//虫情监测点击事件
const insectClick = e => {
    let bottom = document.querySelector('.bottom_center');
    if (e.target.className === 'sele_types') {
        e.target.className = '';
        bottom.style.display = 'none';
    } else {
        e.target.className = 'sele_types';
        bottom.style.display = 'flex';
    }
};

//土壤点击事件
const soilClick = e => {
    let rightWra = document.querySelector('.rightWra');
    if (e.target.className === 'sele_types') {
        e.target.className = '';

        rightWra.style.display = 'none';
    } else {
        e.target.className = 'sele_types';
        rightWra.style.display = 'block';
    }
};

let XZQDM = '';
// 村点击高亮
function villageClick(layers, xy, level, cartographic) {
    const index = layers.findIndex(
        item =>
            item._imageryProvider._layers &&
            item._imageryProvider._layers === 'shuzisannong:huangdaoqu_village'
    );
    if (index > -1) {
        const providerPoint = layers[index];
        // 拿取最后一个图层
        let provider = providerPoint._imageryProvider;
        if (provider && provider.ready && provider._layers && providerPoint.show === true) {
            xy = provider.tilingScheme.positionToTileXY(cartographic, level, xy);
            let promise = provider.pickFeatures(
                xy.x,
                xy.y,
                level,
                cartographic.longitude,
                cartographic.latitude
            );
            if (promise) {
                promise.then(data => {
                    if (data.length > 0) {
                        let newData = data['0'];
                        if (newData.properties && newData.properties.XZQDM) {
                            if (XZQDM !== newData.properties.XZQDM) {
                                //防止
                                XZQDM = newData.properties.XZQDM;
                                let item = newData.data;
                                // 移除高亮
                                deleteEntityByName('villageLine');
                                // 高亮边界
                                addBoundaryHandle(
                                    item.geometry && item.geometry.coordinates,
                                    'villageLine',
                                    'yellow'
                                );
                                // townZuowu.value = info//保存数据

                                // 后插和村
                                if (newData.properties.XZQDM === '370211104217') {
                                    // console.log('后河岔村委会')
                                    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);
                                    let info = {
                                        lon: longitude,
                                        lat: latitude,
                                        ...item.properties,
                                        // XZQMC
                                        label: [
                                            { crop: '茶叶', Shape_Area: 2820 },
                                            { crop: '大豆', Shape_Area: 2767 },
                                            { crop: '花生', Shape_Area: 62356 },
                                            { crop: '蓝莓', Shape_Area: 5443 },
                                            { crop: '地瓜', Shape_Area: 897 },
                                            { crop: '小麦', Shape_Area: 20111 },
                                        ],
                                    };
                                    townZuowu.value = info; //保存数据
                                }
                            }
                        }
                    }
                });
            }
        }
    }
}
// 添加村
// CQL_FILTER:筛选的语句
// customName地图服务自定义属性名
function addvillage(CQL_FILTER, customName) {
    let map2 = new Cesium.WebMapServiceImageryProvider({
        url: `http://121.36.229.60:9080/geoserver/shuzisannong/wms`,
        layers: 'shuzisannong:huangdaoqu_village', //图层名
        parameters: {
            service: 'WMS',
            format: 'image/png',
            transparent: true, //是否透明
            // CQL_FILTER: `XZDM=${value.value}`,
            CQL_FILTER: CQL_FILTER,
        },
    });
    map2.customName = customName;
    viewer.imageryLayers.addImageryProvider(map2);
}
// 移除wms
// nameArry ：属性名数组（customName）
// isMohu ：是否模糊查询
function removeWms(nameArry, isMohu) {
    if (viewer) {
        // 倒叙遍历，customName是自定义的属性
        const layers = viewer.imageryLayers._layers;
        for (let f = layers.length - 1; f >= 0; f--) {
            nameArry.forEach(item => {
                if (layers[f]._imageryProvider && layers[f]._imageryProvider.customName) {
                    if (isMohu) {
                        if (layers[f]._imageryProvider.customName.indexOf(item) > -1) {
                            viewer.imageryLayers.remove(layers[f]);
                        }
                    } else {
                        if (layers[f]._imageryProvider.customName === item) {
                            viewer.imageryLayers.remove(layers[f]);
                        }
                    }
                }
            });
        }
    }
}

// 根据实体名字删除实体(模糊删除)
function deleteEntityByName(name) {
    if (viewer) {
        let entitys = viewer.entities._entities._array;
        for (var na = entitys.length - 1; na >= 0; na--) {
            if (entitys[na]._name && entitys[na]._name === name) {
                viewer.entities.remove(entitys[na]);
            }
        }
    }
}
//折叠

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

/*------------------接口--------------------*/
const getSpores = () => {
    getSpore().then(res => {
        tableData.arr = res.data;
        console.log(tableData);
    });
};
//镇
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 getvillages = () => {
    getvillage().then(res => {
        Township.brr = res.features;
    });
};
//面积
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,iVBORw0KGgoAAAANSUhEUgAAAGUAAABMCAYAAAB033kxAAAAAXNSR0IArs4c6QAAAARzQklUCAgICHwIZIgAABElSURBVHic7ZtrjCXHVcd/p6rvax6efXjGOPFzFRuylkNMUISQiQcQAYlgCaEVEkgIQVA+IisgEUUwXgWIQEQRkpHCBz4GRfhjhIiihMzGS8SXjWWUbMBO1vtynOxovTs7uzv3dndV8aFO9e372Nm589oxzJFaXV23H6fqX+f8z6mqCwdyIAdyd5F78VG3euFFAOPNshx+eLleLyLP3QudAMTJyXH6DNfvuh579aEkbvXCi4IspWsz94gA+BsXv0Fgca/1GZZAOGnnHn1xWJ+k516I2asPJRm2BLd64cVw7dLifgBkQIb0CdcuLY6/cedlz0HZd50/JPfSfSbZe1AO5K5yAMo+lANQ9qFk91qBzUggnJzkfhF5br9z10ayv0ERls19j/ziVh4N1y4tBhO+sdMq7YXsa/clTiaykIFnDz+8PKmF7RfZ16B44xe38/x+CG+3IvsaFEGWtpq0udULL75beWV/cwoQTPiGX714r9XYU9nXlvL/VQ5A2YdyAMo+lANQ9qHse6KH8Rn9uz1r30j2NyibyOj96sWwV+rslexr97WZjP7dmrVvJPsalM1k9O/WrH0j2dfuS5ClsHqB0odT2aHHluu/ldfPL2ZGngv/B3nlnoNigBIn9g5GG5Ala4RwYzCrtwZ2i0wCyL0kqj0BJaRdMwHCjcHfvPeSIbvTwcGfEgmnAEKQ5xCzOVcXgBt3vWvXZNdACYzp6ZMILwxWGQOEUqC5o98Xys/w/WOfAeAMCPwlv/0/Hwm0/nwjcGTg1JcSJyEgtRt2zZh2hejvCMgY8T4IuB3dUyXlO7/Kt4/9NWtY5jA8rMe3fvK0vPXYR0X8qTvq7r3w8gb74UJ12rV9YDsKSoA4muqARDCE4whL4xriBZfvoB7lK/zXB78FZBzBco4Mq8eCXvv89J2eFgMcG+2XTMrYjpPavgAhILsBzrY7Q0mxD8ZJVRyElzEsISxjmEc4M/o9I15g+6AIxWkAyS/8LYfIOETGOzRo0uAoGUfJKMmYJ+M7T/7NHdvjgzA3rl9cbMdx+uBoB+w0ONvilDqBAxGQJeBlhGWEeeAMwgrCjDZmRJxB1u129BB39e947ZnPyU+/+smQPfQpHntj9B4TA6rg+3V+/Y3n7fd++ZXwMxev9W8MwjkyFkb0FGZV/2WE4zV/cBIIhAAiOxCzbJ/o+ypEQE5ieA6YRbiC4TzCNIJDWBkzAn1hyW826GxDBTP1rDR5ie8985LAS3T1h6Zq5wn4WBZPoEXgJsG2CHzg1U8P6uMNTRrD3yjdus3mMHQIfBeYJ8L7svZCHJAhhO0Ds2W3UZF531XF84MICxjWsBzC8B4s81jm1XWMvKi0lLdGOmEikc7Pcfzsv1AyRckUnikMHUqmKOhgho5AG6Htn/7PPwvZ0T8ZUkhojoaCmeSGc2SsYpnHsIDhjLrl42pB6tJC2J4r2xIoA4AcV0ASZzyM4QqGWQwrZBgyMhrcpIEdHYGEPMPc2nY8HMzMh3nkcx/BMIXVwzNFYBrPNIYpREEpmaLBlDTe88cjLxJvKGkNV7v8duQlT0aOZVUju4UaMPG/BNsGZiJQEqkPAAJwDcMKhjkMDgtKqkcUkB5NPC0C7ZGX+l7D5TdG67ci/nabghlghsAMlmkC07z3r56l0OtUF5imXD0z2khnKEadqZXbGVdocpMGhoyeAnNFgTmGYVn7c5sWMzmnDANyDENH+WMVw2EsBRbB0iOjjaVUi4FRQg95w7pb7e04YXntkY9VFxkzlKqpB5759mdDdv8H5OKnf40uAYMHAhYvrz39SQyen/rK74fO8T8AwDuLZWrkI/52gxZNAiUWwy0MDUpyhO8izOBZwCswvuIYkEkTzclASa+OEVa0kARIjuUKllks65oXNMjo0kDIaJJRjrov73tNw/r2LOWBFz5clX/0+bODMaFLA2FGbdzrb573fuopbyRIY+Fn+y9zFjMGlPJWkyYtWhi6lNynb5vDAbCq9y3gOY5wVsk/EIJMBsymQalMMVnJvBJ7AsRhMWTcJiMjo6CBoUGDBo4mJRkyhlN83sTd3kbsBeEnXviLVJYffv7jqRpDICgowgyGgMcjBN73pd8Msz//W8P+RfCGwPTIR9yt6H5LddENBEHwCA6YIwJzk6AcA2cViMBEWcxkRF+fKplFeAZhFsM0hlksQsY0GQ2aZDSBNtDG0cEzRTHaWAl5k7K7LVAGZOEPP4goZ8AMwSdQ+nWGacjvEFw4C8yMVt9uUdKhR5tAC0cLoUFQ1+ywHEOYV36dr4gfmGxaZlOgDLwwWUkH4VUMaxgKLKWC0lPLyFV56GjUM8WYbEQoGki+M0R//d++zpV/eovAFMIUgamQLCXViUZkP/i9r0t+eSTLDMHZcZbifbdFGmSeFo4mazTp0mAKWwXcLYSniIP25cHMf7OyOUupc8kJ/WAT4RjCei3iEjIcTSxN2jVLMTVgRt5dNHDbB0V6b56XNz/xH/7+33k/T536BId/9/0Y2gQf2yh0CEzx+Bd+PTz+hY8RmOL2dy6MvMh7SxjV09DrtwdaWJoa4kcrcVh+iGVNU4JzCCe0z1I0tklrmTz6WtZpk8gpcXRYtZZE6Ki1RDNvY2gRaOFH43+Cyzxla7sTR6H1+GPy+Eu/JIeefzYAPPrZx3jgjy5WI+rRf/iVcOQ3fqF64PipY2Hs6PUGGTO/4HvRUgJgCAgOgyfgQB20x/MOhlnN9mNfwa5FX32Cj3FMS8FpYcgwBB07aJSV0UBoIAqOUT880liXGe8aO7E4EQ49/+xARfvYI9VvdUCIII5/iTfIqJ4+lA0DrQqIkhJwCBmekjUsGY4GwlWd63sd4TChzi2bkc0Tfd11AVzVLs8QSgWmiyUnw1burFEdgSaBJte/+tWB96598xLvfPGtydTePZGVfzxFoCmrX/lavd78+O/fwJJB7YgtjW2fQbDVMBSeAD60NR22Nvf1BPAgcASwCEaPtlpQgSWMOSxG3vz41+iefxOAd778Ta7+82UCRi7+6Zfo/eDS1pqxMyLXv/wKK1+8DFhunD5P78I58kvflxv//q8D7Yjpo8HpUSD0FJTD+rLLOnjnJ8/qN/WA5ijxOKOTjbMYrqmbatCkS5tpWqzrHJPXaMspyScXlizG6DxSqMEa9BD9VkBqwyZFMX2dxw0pP6ZONLs3Vd4Q9E2+Khscoco6SjwlUBLIMfQQuji6BNYRbhNYx3CbBuv06AJdGuRMkXOVkiaOFTzzeBY1YZXNLSNvzVIe0hfP6vk20CCQAxmBErCEqsEhJXIE7WqvV0E7qn9YTe6o7gja0YN1UiuHu9SnRNLXAAmqe9IrfaP+HsFj8cojoRo2rnoP5LXysBybjOCTbG095Q3AEWeymsS1igxPD4/gaeAQHB6vd5Z4Mi074mBIVhD0TamzREe2QUCv0wpFvxT06k4itU4Hqk6XqtNjbcrwIyxJX4cokXttS2xDdFiZWpXHk2mbCwUsLZc9RGAVWJkcmEmiLzgOzOtHjhJYUUVi/BEPwdGgpKREKEAnJ40Gkn0HkqwndYapjghEPKcso+7KfAXGeFAGF5lCVZcA6buyZDvJbfUBiK6rAIqBc6CgpMRS0qCsQmPwtPCsE3AE3gAuQcUxE8gknBLvX66mEQwpCrE6z+VokWuCJbTJqqy+XYXEQgNPU5+LnBKdXp9X+oAIic8SKF7Pd5sWD0PAJJdYd42ia5L9cwLEAQWOEkOOJ0foAV0CXTK6lFpu0cXSoyTHUQAlLRyXcczjWSFwlsASm+aUyd3XIoEzBOYIrOK5gucQTqORkkwNOas6NKrhiNPmnhJDCdW8UYxoRLNiqVxbPEdAzAgg6XqcJP6oE3yyEFvNEidLiW7Iqqvqu6kCo5ZhFBShh6OHJ8eQYxSEHg6HZ0bd2Zp2/KJ+Z8It6JsDRUjrKH0X1iFwjsA8niaONQyWEq+AOESZIihDODwlMfIq8DpFEbCYChBbWYtRMPqcEi3H14BOlm4YjLoSZ9QBSVbiqQcbdUuJfIEOmmglhUZhOdDDkdOkR5ecNjklBT1KShwdHOu6lLeA53UCLwNngaWo7Wan7zcFihAXa4A4HX2cGHk9g+e/EW4gHMEREOaAHnGUdqvGu4p1hALRqZiYYFo8FmqgUAuN4/R4P0yWGiiD5UHpR2KJY/pHiv6iu0pkH/nEKp9kyotQ4NVaMnIKctoUlOR4CtoUCCVrusi1RtxY8SShshTG6Ldxf29Oxq6nJG6Z1Ww+kBGUZ4QGuXKNqQBo6BRMXC5Gc+J6YmYUEI+pXFhat0jAUANknAur5yPJWuo5SZ1LvJYzHG6I6PtkX+IpmCInUNClxFEQKAk62BYUmJSb1LkEmGSHy6Y5RSRun0kf0ZXH5JdhFqqtPSUpN4ghZg9HSzMYR6EOLhK8w9LE0CVTECIoVq3DKzBWQXFDkZetgeKqUtDAu28tgbqFxPzDK6dY1XMYGIcjU1AsJYUC1aCkR8ksJWs6R5ws5XX92tkaCBPm9JMR/TC3HMZzrebREzCzeK6r0+q7rwiCxSodWhrquiIPWQUgHrYCpE/41CylDwoVUKbWEf1yqBLZBE8ieFST5L6ccp/gKJVjvMZVbSV0g2NWAYvuLnLqOoHTBN7WA5gk4qrL5NFXBCYoMDIAzEME3ibuJckJPIjjMp4mBovFURKwZJgq2rLqpnItOwxNROO5uDwAQlkxTASg1LMbMw6DApGuekBzKOpyxNkDp8PC4WkrWVtiApwrCDE5dDTUmm6ou2vjKdRCTldgxAE6IbnXZSJQ0geCqFOoAzOPsKpOCTwLGK5jsHgKLLOUTGEoseQYwOI0JzHqrtIEX6ZW0iNOctY5pURokv5tNG7Vv5+jeI3COjVL8epWg55z7chMyw0cJXF2wuDICVgcXTz3K2hvE3gfMR24qc8fHrIQJuORoX7emgzs/4q7W+JK27IGADPEJeNZ4pLxOoYF4kplT6P8OUSj/RgOpNnmUjODxCOpHsBo/AZQKEB1SXNwqexrAAHqrvpTQ6nc0A7O8DTx5BrAxzDX01HQZpXIcwLrBNYIFanDtgGBbe4Ur4CB/qaKFJnNIpxDKnBuqlvqYqpVlgyhp5bRVB5ZVzB6CsQUEYheDZgcGbOtb1B8rVNqe4lpadnVjo6ee3imCXTwXCFOqvT0ep3ADJ5Ha2AsknKRHQMEdgIULQCDVgNxLSGuvvXBWdHzg8A54kaDBxDWFCSIwfMtvZ4FbtfAgv5ek/U76N8hcHOo3FEtHYEpAjeAaVJQGwG4T8/JIi4Dtwg8QOAmgWMKBsSJxhM13kodugO77rf1vxCBIBAqRZaUSE/gOUtgEa984+ngmNVJP4vjCo55DS1XKDlMQU7BEQpKCmYoaJNzlYIOOQ1yjtLjKD1a9MjJsfSwWndUy1Z/S3U9fbajR5ucFQp6+p2cgi4Fhyh0+idm83Oq69OarZ/A8SHNPxa1ff3AAWRnANFX7ZwMuLMkw9YD/dW45OIA/f8KlTUl6Wj5QeIS9LA0a3VHCPxojGI/Bg7Tn92+XOkROA+VJUB/DaTungBOaGCzNNTCLYS8d5MdBaUuI64NBnknSQLodWRgTbtTu+fCkJ5P1MqXh357qPbF4V1dj9Z+W6+VzxCnRZKkNZAEBAyCIdVpR8EYev3uyIbALNXq6lZ0Qs/LQ7q9XrvezIaE4f30Tw514CL9mYm6JJ6oz+zuISCwy/+jH8hrIF4Nmz/EmdRhWRm6Plx77hx98O4k5zZ434nau0a/nfixL7vgojaSXbWUjWSsFW0kd/jL96Zl3GAYJ3sMwB1U2F8ShnXaye6Rkct72vkHciAHciAHciAHciAHciAHciDvFvlfoYgLEgTKylIAAAAASUVORK5CYII=';
var chong =
    'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAF8AAABMCAYAAAALDmvAAAAAAXNSR0IArs4c6QAAAARzQklUCAgICHwIZIgAABQoSURBVHic7ZtrjF1Xdcd/a59z75074/H4gR0wydhxISFOQxMoFEocj6WWBJX0Q9U0UvhSFQkqUgigpoBEY49bCGoREkKiBQk+VVXBSEXQSqUVeJyJQhqaKCXYkEedeGxI4sGx52HP3HvP2bsf9trn7HvnjufheUSK19XVeZ+zzn+t/V9rr70PXJEr8loUWW8F8omTBwFEZJ/kMgwgm68ZWU+d1krWDfx84uRBQQ50O+Zww8nAzoOr/XzwRgdwzh011oyspeHXBfxLAR9ktQyw4LOFEclleC2MsObgu3OnhpxxR4rtCGQ7Mebic83A4IrqZyfHjuAYatspjMzZB4iV/attALOaN19IxMr+S3l3oIZY3LlTQ8t5VjfgHW7YbBzcbwYGRazsRxgpjkUOslqy5uC7xBVNvtOzzMCgdHp7PnHyYD5x8qCdGHN2Ysw5447YiTFnJ8eO2MmxI4sxhjt3aqgAXhhxuOE5J/3impfNxsH98bFuxl9JWXPaiTnX4YYFORBTTyctLUoW4OnY67vRiXuYL+H4BHCv7OWrBf0JI2bj4P4l6bIESVfrxouRYISQcQBYY4eki090equI7Cu82THkjBvKJ052D9KR189joO163uvCed3iwErLumQ7nfwrVvZbY4e8Qu2ZyEJZT+e9ugXp2JPnSyndUf5Q9vG9tnuusuevS8ANnakgzrgjghxYKP0EcA/z+/F2J0/bybFLUpYgBzppzY3yKQx3Q0d8WGVZH/A3XzNiBgYlzi7mnuSPxZTkRvlXHP/pRvlYfGoysPNgYQDHUGegjI+1bQPuB2wHvgDc40a5ty0h6HCSlZZ1TTXjNK8z1TMbB/eLlf0dzf4cAI5JADfKg26UI+4Y1UtRU+cxY03xHLmdM8CH6b/tv91vjf3xIuLDism613ZiWUyW4R5ij9zGcfcoV9HiJd39QdnLN2P+7+T+OXl+Z6vrOLaaXB9kXbOd+cQ5d7RYH+WLCO8F7pBb+ZXcxnEAeRcvu1HuAa6TvXwzXCfIUHyvIrVt6zvDfLzucMPJxtWtKwV5VYIfxH2fXuA+HCnCncDXoAi675Nb+eR81xaBd5HBcy2KeZ3yqgQ/BFm5k4tulPfhuEX2euABcPwTsN09xLTcxgOgHu5z/3DOUHzPOMi29RFYH+Dh1cb5ES873PB8JV73MB/HcTfwAdnLiUv1iucD1p07NeQSd2C+GPGak7iGE/6LvbbzOjsx5kLK6UZ4hxvlF50pavy81a7jdJN1TTU7ZY6HXqofEElX4ISR4n4JdwPXI3wEwI3yZTfKF5KBnQe79SfWSl5V4OcTJw+2AR51mIKXdgK9mIEZ2ctfAn+H5R43yh3Ax4BPuYd51wq/wpLkVcNzixlhwjHUFji71IHiffPy/Sh/C8zIXj63VnWcbvKqAH9OwFxGVTGUiuM4sdBoVGzwtRi56pRXBe201VO0pCBWFvZCHRgxA4MSgGsrsmmltHjOuVNDYQCms6Wtx4yJdff82OsFN8zAzrLoNTn2o7jWkuf2UGpkX2bd0XTTrpF57zk5ZosNYSRv2EMASc08ECjmNZvnO5DQGXJTJcCycbBoidn5F4YSY35UXGPzQ+bL1y6uynjfC/tIzANuEdQVDC7MKUCsuqx6DzcGuk2GveHlk/6txWc53hkOI+ntbii+TEzyAHs4xF3zPOhwtP5fux4Cfo/3vvBDxHRNIZ3NDxlkhE27RnCqZ/EwWAtjrLjnFy8xH+CBZQ/789ztY1nb9Tb7G/Pk7kMA3PL0PlxlnzPpXwPIs4PVeR/8eMf2dZEGtzztDSDV2wD4wbWHimN36XmhTXWW4FbRECsKflfg1cM5QAE428rnureNtdoUEnuUh3fdXux493Ofdab6WQB5YrC+oBIv6PKqSIudOI4Bu6N9U9H6EK5oOcdxa2WAlc12HKWKHnRhj/5HMGxD2I1hHMN2DG99qshonJv9XJ6N38HPdr2P7SRsJyEhRfJSxxt/vB9Pld3/46TsIGGHXr+dhJyECRKuJmFK/wMYZkjYrro8jmG36rdH9QYpHMeBc4hbYWe97JvN4fTh4gW8bEPoRziBsAHhZYRdQA3hLOJuG7sA4PILD5rRGx5kK5AiTCHc/NCtLn3jpzGVWwHkicHNi1IqizTqxxXbLRxNXd+q6w0cM7pvp65P4dpaw11tbgWAdI9kS5LLCrjORSAHPt+DsA3hGYTNCDMIVwNgyBF2qFdZhJ6y5ZmkupdtfJGLCP14A1R3fAYq7wHANh4hpwZgb3nifgAx/e8O18vML77I8TsfoY6jCdRxTAMzOHIcvThSBTEYxOp2ooY4huMCjndiOQycwxWx4zASU5JzyOXS0bI9fw7wexDuAkbU089gqCNMY6gizGKoIGxHmMGQIDQwvO257zqq7wEQ23jEZhOPmp/+9pcwCG/9ySddetUnAMhnHpV84lFXff3HL/lCF398N8/c/WMFFiyOmgKdR/8qlhxHDUuGo47lZRw9WPqxRYuYxhVGGMfNaQWXYYBlcX5X4LchPK5cPqVcu4WEzSRsJWULKVupcJEqFapk1LDUyM49VtzX1H5Xkr730KJOi3o+/dQTxXOS+rs6gRc7/ZjY6cfifa733d+yNzz8V+T0UqMHQ50GdRw9QA9CDz367CpVJqnRpMoMVWpU2EqKJWULCZswbMNwDYZ+fUeK/2XLksFvA54I+H6EAQwTJDQV9FeoYKhwRgFvUSOnxgV6cPTQQw8/e8c/tN2/9fIT1KmT0ms2vvO+bjrI7DNflycG38GTe+7lyT33kk20JZpSG/wLEnqZpY+cXgz1YlmjhxZ1egodakCNFlVqVLlIFUOFV6hgSWmqEc6oY9FhgMtg/iVx/hzgDyvw4xjA0ERokGD07/OVhE0ktEiwJLRIqZAgGDIScozMPvc11/OmDwNIZcvvcP0Pqq5+wwfnKJC98qT8783B+/vIERIc5Ek4TrrlZgBu+I+PcuyOb5DisFgcDkOuNJSTYcmxGHJ6yGmRk5LRJCcnJyHHIRgsDXJyhCo5xzHswUZaueXy/6KbT1tWE1PNuDbNfgyzCjKk1Em4EKWBNVKapKRqkCYpjgSDwZFw/b//meu96U8vqeyZf/w0L35+K5afYLlIQg34AJbvseMzb+CXD/6Ut3z3Htf3tg8AyP8M3o4pgLdYbLEUBVnIqZCRkQMZNTJmyfA5U0Y/GRfJmSTnjeRMYRnHsg3LOK4IwlIAumgDLJ524lseoEwhb0EK4M8r0AkVGlSpUkPoKZq6UKdJHzl9OP1nbCChj5//wXckG3+q7ZlTj5ZFg9ZLx3nx8zci3E/C35OwAcPHMfwRKffzqwefJ2GDs41acU3KBiz9wIbin+vzHH0k9GHoxdKHFPrVEXo0AlRpUNV3SpklYRrDBe0fhH7B8DwllAVk6alm8PrdmtE0MQxokDWqpFAhpwpUgCotKliqpKQ4Kpr0eUMJCRkGIeHJtz8oBsPrP7qHF7/yNAnibh7z1RxnEyzn8QRzAtiA40mEm3A8hqEPQHp2/maEwwbAIVjAaoLr851EPR8yEjIcLTJdGhJtI0Y1BIPQh+Ms8DogwfEMwnWUJQnHkkLx0sCP6eaELvu0twipqloho4rTLCKhiqVW7BcFPyElJ8WQaKZtgASD8NJXTmHow2Jonn6W6tVvprrjeixfxfEZYEaB/T+EA8rAGzA4V9nxFgCap5/F0YdRyhGssn8OWCAniejF0UJokqg+6JUzCHU8R5zH8UbthIFlMwI47QPAAZwDWSz1LAr8olsdimKPa+epH8MvNaDW1fObVIrMRqiRqiEyakgBfgXU+50GX9T7HQZBlEWFiz87SfXqNwPwG1+/kxMf+iFQj5VDPFTuhtEPFbtf+vqPROgFHE7BCtl+AB8F39ACmhhNM4UGTnVIgQs46tonaGK142bYoN7/YqHJkrx/Uac5p7zWGWS3kHCGlFQBzzV/hh4yejQg+qXv6lQjA4QX9R7fDrxP6cQThXv7WFnHP/dvR+X5j4wAuGu/OkTvjTu5eOwkm99flo5nn39Bfr7vm4jC7ZR6HFbpZi74QhOn+ZrQAGbJdQmzGBokNGjRBDK20OIVcvrJmcJxVNvfAdxiSw/LKy/cCEwgvIIvERgM0yRUlX5Q+vE8X1XgfT7tvb6CpVJQDtrMfVOXNu83iJz//qjbdOdeADa/f5/b/P59zJ4Yo2f3IAC1a3cF1aR54iTHhv4ZoVaAXpb8ykxHyPW53ujB4EDRUrzBMiDFkoF2HmvkTGGoYakjTOHYgy8/LEEur6pZQUgQbbD+7yIDGAXZUkEUdEdVW0C5jh5DzyvP9dc+f++jMnb/v7Q9OwAfy7nvPsJTQ98uYg8dz4iXnf+wPzzfKjWi1OhINEL5ssgkwlmEk5r1LUOW7vnPKN/nSkHTSiQgZBhybQkhf0/Uu0Jw9d5evpRRzs9JfFcl8nr/Sv7eZ7/1Kzn7rS+5LX9yDVf9uS+o9bzpamafO83Fp07LyfseAdD7e1/2/Ovbkm9NFvRpUIZFf67vcLmiNSSEfggaso06Ww5swbf+fDmwe1l+VfMcwrZou4nQgxDGmqyyuedt74uZGiW8SDgj0Ey5LcXS6L0ADMjZb/+Ss9/+TheNjHI8eq2nmkA4wZwhplgcqUJny/gSBX/vYD7oen1DRFihUZDlg7+5g9+qlCVa719+3fuSrxyGlC/RvBtyfWEPb/g0IgBUmkGidnBpXg3HXbQMvC9F+PV65NpCQjAOPWG0IFEtzi/frQdfsgY/JnBm2QguA/zrcGzHMYHPjnvxAxJB2QZWayc5NsqlE4W/bMJEFRJDGXCN+qg3IVCYZ2GP88YKxjdq/GAAq0tTZDplxhN09P0Ar3cIzI6cFKsDMd6or+jVyZIRLGR5nn9Ml9vwmXoVS5NcGb89hYuzmeDdEnkfyvku4vzY+4EO/vdSUlFcW3dFbiMKfPD6ON2EHFMA7fW0musLTSwtQo831bqPYMmwJPh8/4I63Y04ziwtywmydPCPAnvwwDdxZFhSLK0od26RaeP04bQkg5JuyrFXX+0U7c4nlHm+UY+Pud8QGyMkkf7upqAp36VKIuCNAm+0o2XbvL4FtMhpktIgpQE0yWnRilqGaFkiww+6bKQcglximgmLBV+iFzyMnwVQx3ICw2Z9mSoZTQWwotTiCl92tKK6imjuHDIeD7PPJWyb54fsBzVGaYBYHHNbgDe3jUKu1e28oJPSAK2il5vRpEIDQ4MmTYQWQkbI5RraVwgjYuBHuGDutJOVAF/wNQuG8V4/hdPajuUCwgA50xgaZGxQVVNQvrXMYqmQa8OtkCjwOSlJBH5erLf3csvOTzDKHAUL5yhTy/InUW3HO0AoMwSPbqk/t0jUAIYmVRpaMGlyoYgLOZOUJeXOySxLyPgXX88PFeuyqulHdzZpxzsjIdWOidEimtGRLNESc0pKTkWXZVGt5H1TLBPitLD0+oSS74MYhVJVJeT5IaMRyjq+ob2WHwyQkZEo11s1Qqr8X6dVgD+pcS0h5xSW63AMFZFmSbMalg5+uG4EUwyUBwNASi8JF9UITSr0FL1N7+0ZlaJymKnnG4waz8NUcr5RoMtUsxv4wesTfDEgNoArvN5p67NKOZZcR6/yyAgpLZpkVIognNFLqxhQMeT8GstNWtPpGFBZymDK4gNumYej9OO3tmMZAMaBBjCpTF0vgrAfmquocXwxInTX4/JtAgipxo1cWTYtoC8rMvNJhisMYJTRA+V47XNtCYH3vQlq0UiWp6WMBhl9ZMyQM0lGSo7B8mssfdhuwC9VlnTJvEOJYfB8XFtAHUOLhCqGKVJN0HzhzeoyK8oPodcblyY82I0I/DzyfoA8Wk8oO1RJxPUZaBnYk1eiub7RymauraBOXqTKjYhWPEn64xewnMcyjSv4Pp5GsppjuIsyQKCgKQyzGHox9CilVPWVWgpDL8JMAb4UvYRaEXJ94I6XAFW8f3ZKmKeTRuBb/LiZLyVYZnGFAXJtmb34wfSWpswB9FksdSwXsFTJizk8XYBf7uy1Jef5ReYDPrUKGRB4CqoXCnojbEGYIqeGYUYB7sEUaakot1fU0/0EKw92D77bk2jCVyP0EtrBr2iUaOAJrKLg+0q8Twk3aPANnaRpfK4+i6WKJcUxi6WGr8OG4FzFsR0/gFKPqCby+OXK6s1Yq+OrneMK6JQCnOJnrKUKdqLghtI0hNxHigy/Ea0vJGGG2gy0zVQL0wfDTDXP7O0z1sJczn4sT+OnDXbO3eycxXwZM9aWXVgT0fkqULYA8IF3CFcYYQDHSYS6+rkPuT6DaapB+oEpPXYBYSNwUQ0CFMuZBQxQ17B9Xtdn8bWni5RV+QblXM0Adpg0GwqBAzhuwpcNxgtgXRinjTFYLn5wmRNlRZSCXKTUcT04Dozj2IZwCuHtQB0/+KCXs0lbx9lon6eWYCAvW/DGWaiw1sDPSt6CL3xtxFdyahp8A9AQYoRjN45ngWndvzsCvf3DCccBCq5Yifn6K/9xRByMD1B+EHEcYR8Uoz4nEG4ETiK8GTit+2uRTsEob+jYnk+2RoA0o/XT+FoUwNUKdpgOHiR8LBFADy15hSimm6zoN1miJV1XDmaULcHXQERfznvyGfw8hAmlHvBGAT9OPIA3Trea+ct6XvwFSnzezg7w+3X7TThOR+eOR+eVxTFXzNRYYcBjWVHPj6WtFQSJPxGCslUECR+7jSyg1zNdjl93CYCGomPtHzzEuq3p91iwil8jhlYAkSE6X+743OuAEqxO4wTpHEUDH2O6SSfIcUuM5UC0vsqgR49Zeyn6CUt5veFF6LrEku5KBs/lyLqAfylx3XRaKjRd3mq9AL4iV+SKXJErckWuyBW5Ilfkiry25P8BwflGEbHO+d8AAAAASUVORK5CYII=';
var tu =
    'data:image/png;base64,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';

function map() {
    const myChart = echarts.init(cesiumContainer.value);
    var uploadedDataURL = 'http://140.249.23.64:10000/jnSmartPark/js/huangdao.json';
    var icon1 = baozi;
    myChart.showLoading();
    $.getJSON(uploadedDataURL, function (geoJson) {
        echarts.registerMap('hebei', geoJson);
        myChart.hideLoading();
        var geoCoordMap = {
            泊里镇: [119.77662, 35.6745341],
            海青镇: [119.569741, 35.659232],
            王台镇: [120.012972, 36.0579441],
            灵珠山街道: [120.085354, 36.0163451],
            辛安街道: [120.139688, 36.039265],
            琅琊镇: [119.858827, 35.686819],
            滨海街道: [119.977144, 35.821489],
            黄岛街道: [120.223051, 36.044854],
            珠山街道: [119.952206, 35.901178],
            珠海街道: [119.969568, 35.868121],
            长江路街道: [120.156758, 35.969159],
            红石崖街道: [120.095262, 36.101767],
            薛家岛街道: [120.249532, 35.980284],
            藏马镇: [119.815722, 35.756631],
            张家楼镇: [119.876292, 35.793926],
            六汪镇: [119.784986, 35.944079],
            大场镇: [119.638675, 35.674932],
            大村镇: [119.72593, 35.805443],
            宝山镇: [119.895833, 36.001432],
            铁山街道: [119.90574, 35.932106],
            隐珠街道: [120.020412, 35.841401],
            灵山卫街道: [120.120558, 35.931005],
        };
        var data = [
            { name: '泊里镇', value: 199 },
            { name: '海青镇', value: 39 },
            { name: '王台镇', value: 152 },
            { name: '灵珠山街道', value: 299 },
            { name: '辛安街道', value: 89 },
            { name: '琅琊镇', value: 52 },
            { name: '滨海街道', value: 9 },
            { name: '黄岛街道', value: 352 },
            { name: '珠山街道', value: 99 },
            { name: '珠海街道', value: 39 },
            { name: '长江路街道', value: 480 },
            { name: '红石崖街道', value: 199 },
            { name: '薛家岛街道', value: 39 },
            { name: '藏马镇', value: 152 },
            { name: '张家楼镇', value: 299 },
            { name: '六汪镇', value: 89 },
            { name: '大场镇', value: 52 },
            { name: '大村镇', value: 9 },
            { name: '宝山镇', value: 352 },
            { name: '铁山街道', value: 99 },
            { name: '隐珠街道', value: 39 },
            { name: '灵山卫街道', value: 480 },
        ];
        var max = 480,
            min = 9; // todo
        var maxSize4Pin = 100,
            minSize4Pin = 20;

        var convertData = function (data) {
            var res = [];
            for (var i = 0; i < data.length; i++) {
                var geoCoord = geoCoordMap[data[i].name];
                if (geoCoord) {
                    res.push({
                        name: data[i].name,
                        value: geoCoord.concat(data[i].value),
                    });
                }
            }
            return res;
        };

        let option = {
            backgroundColor: '#1D346F',
            title: {
                text: '',
                subtext: '',
                x: 'center',
                textStyle: {
                    color: '#ccc',
                },
            },
            tooltip: {
                trigger: 'item',
                formatter: function (params) {
                    if (params.componentSubType == 'scatter') {
                        return params.name + ' : ' + params.value;
                    } else {
                        return '';
                    }
                },
            },

            visualMap: {
                show: false,
                min: 0,
                max: 500,
                left: 'left',
                top: 'bottom',
                text: ['高', '低'], // 文本，默认为数值文本
                calculable: true,
                seriesIndex: [1],
                inRange: {
                    // color: ['#3B5077', '#031525'] // 蓝黑
                    // color: ['#ffc0cb', '#800080'] // 红紫
                    // color: ['#3C3B3F', '#605C3C'] // 黑绿
                    // color: ['#0f0c29', '#302b63', '#24243e'] // 黑紫黑
                    // color: ['#23074d', '#cc5333'] // 紫红
                    // color: ['#00467F', '#A5CC82'] // 蓝绿
                    color: ['#1488CC', '#2B32B2'], // 浅蓝
                    // color: ['#00467F', '#A5CC82'] // 蓝绿
                    // color: ['#00467F', '#A5CC82'] // 蓝绿
                    // color: ['#00467F', '#A5CC82'] // 蓝绿
                    // color: ['#00467F', '#A5CC82'] // 蓝绿
                },
            },

            geo: {
                show: true,
                map: 'hebei',
                label: {
                    normal: {
                        show: true,
                        position: 'inside',
                        textStyle: {
                            color: '#fff',
                            fontSize: 14,
                        },
                    },
                },
                roam: false,
                itemStyle: {
                    areaColor: 'red',
                    borderColor: '#fff',
                    areaColor: '#30B07E', // 区域颜色
                    borderWidth: 0.5,
                },
                emphasis: {
                    // 高亮时
                    itemStyle: {
                        areaColor: '#69EDB7',
                    },
                    label: {
                        normal: {
                            show: true,
                            position: 'inside',
                            textStyle: {
                                color: '#fff',
                                fontSize: 9,
                            },
                        },
                    },
                },
            },
            series: [
                {
                    type: 'map',
                    map: 'shandong',
                    geoIndex: 0,
                    aspectScale: 0.75, //长宽比
                    showLegendSymbol: true, // 存在legend时显示
                    label: {
                        show: true,
                        normal: {
                            show: true,
                        },
                        emphasis: {
                            show: true,
                            textStyle: {
                                color: '#fff',
                            },
                        },
                    },
                    roam: false,
                    itemStyle: {
                        normal: {
                            areaColor: '#1D346F',
                            borderColor: '#D79D3D',
                        },
                        emphasis: {
                            areaColor: '#0f2c70',
                        },
                    },
                    animation: false,
                    data: data,
                },
                {
                    name: '点',
                    type: 'scatter',
                    coordinateSystem: 'geo',
                    symbol: 'image://' + icon1,
                    symbolSize: [40, 40],
                    // label: {
                    //     normal: {
                    //         show: true,
                    //         position: 'inside',
                    //         textStyle: {
                    //             color: 'red',
                    //             fontSize: 9,
                    //         },
                    //         formatter(value) {
                    //             return value.data.value[2];
                    //         },
                    //     },
                    // },
                    itemStyle: {
                        normal: {
                            areaColor: '#1D346F',
                            borderColor: '#D79D3D',
                        },
                        emphasis: {
                            areaColor: '#0f2c70',
                        },
                    },
                    data: convertData(data),
                    showEffectOn: 'render',
                    rippleEffect: {
                        brushType: 'stroke',
                    },
                    hoverAnimation: true,
                    zlevel: 6,
                },
                {
                    name: 'Top 5',
                    type: 'effectScatter',
                    coordinateSystem: 'geo',
                    data: convertData(
                        data
                            .sort(function (a, b) {
                                return b.value - a.value;
                            })
                            .slice(0, 11)
                    ),
                    symbolSize: [1, 1],
                    showEffectOn: 'render',
                    rippleEffect: {
                        brushType: 'stroke',
                    },
                    hoverAnimation: true,
                    // label: {
                    //     normal: {
                    //         formatter: '{b}',
                    //         position: 'right',
                    //         show: true,
                    //     },
                    // },
                    itemStyle: {
                        normal: {
                            areaColor: '#1D346F',
                            borderColor: '#D79D3D',
                        },
                        emphasis: {
                            areaColor: '#0f2c70',
                        },
                    },
                    zlevel: 1,
                },
            ],
        };
        useEcharts(myChart, option);
    });
}

function farmland() {
    const farmlandDivIntance = echarts.init(farmlandDiv.value);
    var option = {
        grid: {
            top: '15%',
            left: '17%',
            right: '2%',
            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,
        },
        tooltip: {
            show: false,
        },
        xAxis: {
            data: ['06:00', '07:00', '08:00', '09:00', '10:00', '11:00', '12:00'],
            axisLine: {
                lineStyle: {
                    color: 'transparent', //底部边框颜色
                },
            },
            axisLabel: {
                textStyle: {
                    color: '#fff', //底部文字颜色
                    fontSize: 12,
                },
            },
        },
        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: [20, 80, 100, 40, 34, 90, 60, 20, 80, 100, 40, 34],
                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: [20, 80, 100, 40, 34, 90, 60, 20, 80, 100, 40, 34],
                z: 1,
                zlevel: 0,
            },
        ],
    };

    farmlandDivIntance.on('click', function (params) {
        console.log(params.name);
    });
    farmlandDivIntance.on('click', param => ChartClick(param));
    option && farmlandDivIntance.setOption(option, { notMerge: true, grid: { bottom: 20 } });
    useEcharts(farmlandDivIntance, option);
}
function Ph() {
    const PhDivIntance = echarts.init(Phdiv.value);
    let dataC1 = [20, 30, 60, 40, 50, 30];
    let dataC2 = [20, 30, 60, 40, 50, 30];
    let dataC3 = [20, 30, 60, 40, 50, 30];
    let xData = [
        '2023/03/0814:52:00',
        '2023/03/0814:52:00',
        '2023/03/0814:52:00',
        '2023/03/0814:52:00',
    ];

    var fontColor = '#30eee9';
    let option = {
        backgroundColor: 'transparent',
        grid: {
            left: '15%',
            right: '2%',
            top: '15%',
            bottom: '17%',
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow',
                lineStyle: {
                    color: '#57617B',
                },
            },
        },
        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: 0, //使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 = ['06:00', '06:30', '07:00', '07:30', '08:00', '08:30', '09:00'];
    var sportData = [688, 108, 2288, 188, 929, 3108, 1008];
    var sportTime = [1140, 2135, 125, 140, 1130, 138, 120];
    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: '4%',
            bottom: '15%',
            containLabel: true,
        },
        xAxis: [
            {
                type: 'category',
                data: time,
                axisLine: {
                    show: false,
                },
                axisLabel: {
                    textStyle: {
                        color: 'rgba(255, 255, 255, 0.7)',
                    },
                },
                boundaryGap: false,
                axisTick: {
                    //坐标轴刻度相关设置。
                    show: false,
                },
            },
        ],
        yAxis: [
            {
                name: 'PH值(ph)',
                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: 1,
                    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: 1,
                    color: 'rgba(168, 216, 234, 1)',
                },
            },
        ],
    };
    useEcharts(soilDivIntance, option);
}

// 添加wms
function addWms(layers, customName) {
    let map = new Cesium.WebMapServiceImageryProvider({
        url: serverAPI.geoserverUrl + `/shuzisannong/wms?`,
        layers: layers, //图层名
        parameters: {
            service: 'WMS',
            format: 'image/png',
            transparent: true, //是否透明
            // CQL_FILTER: `crop in (${name})`,
        },
    });
    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); //将图层上移一层
    }
}
//返回
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 ChartClick(item) {
    console.log('item:', item);
    // 移除作物
    removeWms(['huangdaoqu_town'], true);
    removeWms(['tl'], true);
    let layername = 'shuzisannong:farmland';

    // 判断是否存在避免重复添加
    let cz = false;
    const layers = viewer.imageryLayers._layers;
    for (let f = layers.length - 1; f >= 0; f--) {
        if (
            layers[f] &&
            layers[f]._imageryProvider.customName &&
            layers[f]._imageryProvider.customName === layername + 'gbznt'
        ) {
            cz = true;
        }
    }
    if (!cz) {
        // 添加高标准农田服务
        addWms(layername, layername + 'gbznt');
    }
    // 定位到地块
    let features = formLandRef.value;
    features.forEach(it => {
        console.log('it.properties.name:', it.properties.name);
        console.log('item.name:', item.name);
        if (it.properties.name === item.name) {
            console.log('dingwei');
            viewer.camera.flyTo({
                destination: Cesium.Rectangle.fromDegrees(
                    it.bbox[0],
                    it.bbox[1],
                    it.bbox[2],
                    it.bbox[3]
                ),
                duration: 2,
            });
        }
    });
    flag.value = true;

    townZuowu.value = {
        label: [
            { crop: '小麦', Shape_Area: '53000' },
            { crop: '地瓜', Shape_Area: '50000' },
        ],
    };
    console.log(townZuowu.label);
    showOverlayChart({ x: 642, y: 312 });
}

/*--------------------------------------------------------------------------------------------*/
function getAreaFenlei() {
    let fl = fenleiRef.value;
    console.log('fl:', fl);
    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 => {
            console.log('res1111:', 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;
                    });
                }
                // label = label.join(' ')
                // console.log('label:', index, label,fl[item.properties.XZMC],item.properties.XZMC)
                // 添加点
                viewer.entities.add({
                    name: 'point' + item.properties.XZDM,
                    position: Cesium.Cartesian3.fromDegrees(longitude, latitude),
                    point: new Cesium.PointGraphics({
                        show: true,
                        pixelSize: 10,
                        // heightReference: Cesium.HeightReference.NONE,
                        color: Cesium.Color.fromCssColorString('rgba(255, 255, 26, 1)'),
                        outlineColor: new Cesium.Color(0, 0, 0, 0),
                        outlineWidth: 0,
                        disableDepthTestDistance: Number.POSITIVE_INFINITY, //去掉地形遮挡
                        heightReference: Cesium.HeightReference.CLAMP_TO_GROUND, //贴地
                    }),
                    // label: {
                    //     show: false,
                    //     text: label.join(' '),
                    //     font: '12px sans-serif',
                    //     fillColor: Cesium.Color.WHITE,
                    //     showBackground: true,
                    //     backgroundColor: Cesium.Color.fromCssColorString('rgba(2, 31, 26, 0.6)'),//背景颜色
                    //     // style: Cesium.LabelStyle.FILL,
                    //     outlineWidth: 3,
                    //     verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
                    //     horizontalOrigin: Cesium.HorizontalOrigin.LEFT,//水平位置
                    //     pixelOffset: new Cesium.Cartesian2(-80, -10),
                    // },
                    info: {
                        label: label,
                        ...item.properties,
                        // 经纬度，以便监听
                        lon: longitude,
                        lat: latitude,
                    },
                });
            });
        })
        .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() {
    // let viewer = viewers.value;
    if (townZuowu.value && townZuowu.value.lon && townZuowu.value.lat) {
        //经纬度转为世界坐标

        const gisPosition = Cesium.Cartesian3.fromDegrees(
            Number(townZuowu.value.lon),
            Number(townZuowu.value.lat),
            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 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 showOverlayChart(position) {
    console.log(position);
    const pop = document.getElementById('pop');
    pop.style.display = 'block';
    pop.style.position = 'absolute';
    pop.style.top = position.y - 10 + 'px';
    pop.style.left = position.x + 10 + 'px';
    pop.style.zIndex = 99;
}

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

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

.center {
    width: 100%;
    height: 100%;
    .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;
        }
    }
}

.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;
                // 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);
            }
        }
    }
    .leftcenter {
        width: 100%;
        height: 30%;
        display: flex;
        flex-direction: column;
        margin-top: 20px;
        .imgdiv {
            width: 100%;
            height: calc(100% - 50px);
            display: flex;
            justify-content: center;
            padding: 14px;
        }
    }
    .leftbottom {
        width: 100%;
        height: 38%;
        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: 85%;
            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;
                ::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);
            }
        }
    }
}

.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;
            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);
    }
}
.block {
    display: flex;
    justify-content: flex-end;
}

.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);
    }
}

.bottom_center {
    position: absolute;
    left: 50%;
    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%;
    }
    .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;
    }
}

.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, 0.6);
    display: none;
    // justify-content: flex-start;
    // align-items: flex-end;
    padding: 30px 8px 20px 8px;

    & > div:nth-child(1) {
        font-weight: 400;
        letter-spacing: 0px;
        color: rgba(255, 255, 255, 1);
        // margin-top: 20px;
        line-height: 24px;
    }

    & > div:nth-child(2) {
        color: rgba(255, 255, 255, 1);
        width: 129px;
        height: 24px;
        opacity: 1;
        border-radius: 2px;
        background: rgba(217, 231, 255, 0.2);
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 2px 10px 2px 10px;
        // margin-top: 20px;
    }

    .cancel {
        position: absolute;
        right: 10px;
        top: 5px;
        color: rgba(255, 255, 255, 1);
        cursor: pointer;
    }
}

#pop {
    border-radius: 5px;
    background: rgba(2, 31, 26, 1);
    display: none;
    // justify-content: flex-start;
    // align-items: flex-end;
    padding: 30px 8px 20px 8px;

    .cancel {
        position: absolute;
        right: 10px;
        top: 5px;
        color: rgba(255, 255, 255, 1);
        cursor: pointer;
    }

    & > div {
        display: flex;
        margin-bottom: 10px;

        & > div:nth-child(1) {
            font-weight: 400;
            letter-spacing: 0px;
            color: rgba(255, 255, 255, 1);
            // margin-top: 20px;
            line-height: 24px;
            margin-right: 10px;
        }

        & > div:nth-child(2) {
            color: rgba(255, 255, 255, 1);
            width: 129px;
            height: 24px;
            opacity: 1;
            border-radius: 2px;
            background: rgba(217, 231, 255, 0.2);
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 2px 10px 2px 10px;
            // margin-top: 20px;
        }
    }
}
.back_button {
    position: absolute;
    right: 30%;
    top: 20px;
}

: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);
}
: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">
.select_city {
    background: rgba(2, 31, 26, 0.85);
    box-shadow: inset 0px 0px 15px 6px rgba(41, 255, 255, 0.5);

    .el-select-dropdown__item.hover {
        background: rgba(2, 31, 26, 0.95);
        box-shadow: inset 0px 0px 15px 6px rgba(41, 255, 255, 0.7);
    }

    .el-select-dropdown__item {
        color: #fff;
    }
}

.el-select__popper {
    border: none !important;
    background: transparent !important;
}

.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-around;
    .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;
}
</style>
