<template>
    <div class="center">
        <div style="width: 100%; height: 100%" id="cesiumContainer"></div>
        <div class="leftWra">
            <div class="leftTop">
                <div class="title">
                    <span>种植面积时间统计</span>
                    <p @click="Deta(
                        'https://1912c.oss-cn-beijing.aliyuncs.com/egg-oss-demo/zhongzhimianjishijian.xlsx'
                    )
                        ">
                        下载 &nbsp;

                        <img src="@/assets/icons/svg/downloads.svg" style="width: 14px; height: 14px; cursor: pointer" />
                    </p>
                </div>
                <div ref="areaDiv" class="areaDiv"></div>
                <div ref="leftProgressBarDiv" class="ProgressBar"></div>
            </div>
            <div class="leftbottom">
                <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 ref="typesofDiv" class="typesofDiv"></div>
                <div class="tableDiv">
                    <div class="Crops">
                        <div>
                            <img src="@/assets/images/crops.png" alt="" />
                            小麦
                        </div>
                        <div style="color: rgba(110, 209, 84, 1);">12364亩</div>
                        <div style="color: rgba(110, 209, 84, 1);">35%</div>
                    </div>
                    <div class="Crops">
                        <div>
                            <img src="@/assets/images/crops.png" alt="" />
                            玉米
                        </div>
                        <div style="color: rgba(229, 205, 38, 1);">12364亩</div>
                        <div style="color: rgba(229, 205, 38, 1);">35%</div>
                    </div>
                    <div class="Crops">
                        <div>
                            <img src="@/assets/images/crops.png" alt="" />
                            大豆
                        </div>
                        <div style="color: rgba(252, 169, 63, 1);">12364亩</div>
                        <div style="color: rgba(252, 169, 63, 1);">35%</div>
                    </div>
                    <div class="Crops">
                        <div>
                            <img src="@/assets/images/crops.png" alt="" />
                            地瓜
                        </div>
                        <div style="color: rgba(103, 153, 242, 1);">12364亩</div>
                        <div style="color: rgba(103, 153, 242, 1);">35%</div>
                    </div>
                    <div class="Crops">
                        <div>
                            <img src="@/assets/images/crops.png" alt="" />
                            花生
                        </div>
                        <div style="color: rgba(4, 179, 228, 1);">12364亩</div>
                        <div style="color: rgba(4, 179, 228, 1);">35%</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="rightWra">
            <div class="rightTop">
                <div class="title">
                    <span>作物类型统计-高标准农田</span>
                    <p @click="Deta(
                            'https://1912c.oss-cn-beijing.aliyuncs.com/egg-oss-demo/81f3b011-7a5d-4a21-88aa-8ea51142e564_%E6%95%B0%E6%8D%AE%E5%AF%BC%E5%87%BA.xlsx'
                        )
                        ">
                        下载 &nbsp;
                        <img src="@/assets/icons/svg/downloads.svg" style="width: 14px; height: 14px; cursor: pointer" />
                    </p>
                </div>
                <div ref="farmlandDiv" class="farmlandDiv"></div>
                <div ref="ProgressBarDiv" class="ProgressBar"></div>
            </div>
            <div class="rightbottom">
                <div class="title">
                    <span>作物类型统计-行政区划</span>
                    <p @click="Deta(
                            'https://1912c.oss-cn-beijing.aliyuncs.com/egg-oss-demo/0c0ff4cf-151a-470e-856a-b0fce0fde997_%E6%95%B0%E6%8D%AE%E5%AF%BC%E5%87%BA.xlsx'
                        )
                        ">
                        下载 &nbsp;
                        <img src="@/assets/icons/svg/downloads.svg" style="width: 14px; height: 14px; cursor: pointer" />
                    </p>
                </div>
                <el-select @change="selectTab(item)" v-model="value" clearable placeholder="全部">
                    <el-option v-for="item in Township.arr" :key="item.properties.XZDM" :label="item.properties.XZMC"
                        :value="item.properties.XZDM" />
                </el-select>
                <div ref="ASdivisionDiv" class="ASdivision"></div>
            </div>
        </div>
       
        <div class="bottom_center">
            <TimeLine />
        </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>
    </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 { useEcharts } from '@/hooks/useEcharts';
import { getarea, getTownship, getvillage, getareas, dow } from '@/api/crops/classify.js';
import axios from 'axios';
import { download } from '@/utils/request';

let viewer = ref(null);
const areaDiv = ref(null);
const typesofDiv = ref(null);
const farmlandDiv = ref(null);
const ProgressBarDiv = ref(null);
const ASdivisionDiv = ref(null);
const value = ref('');
const leftProgressBarDiv = ref(null);
let Township = reactive({ arr: [], brr: [], crr: [] }); //街道
let OptionArr = reactive({ arr: [] });
const clickInfoMap = ref({ name: '', value: '' });
const checkedCities = ref([]);
let dic = {
    小麦: 'rgba(102, 142, 214, 0.8)',
    玉米: 'rgba(255, 225, 104, 0.8)',
    大豆: 'rgba(156, 220, 130, 0.8)',
    地瓜: 'rgba(156, 220, 130, 0.8)',
    花生: 'rgba(212, 236, 89, 0.8)',
    蓝莓: 'rgba(50, 211, 235, 0.8)',
    茶叶: 'rgba(91, 196, 159, 0.8)',
    马铃薯: 'rgba(254, 182, 77, 0.8)',
    白菜和萝卜: 'rgba(250, 129, 109, 0.8)',
    其他: 'rgba(250, 129, 109, 0.8)',
};
watch(
    () => Township.arr,
    val => {
        console.log('val:', val);
    }
);
//行政区划数据
var data = {
    title: [],
};
let dd = {
    小麦: [],
    玉米: [],
    大豆: [],
    地瓜: [],
    花生: [],
    蓝莓: [],
    茶叶: [],
    马铃薯: [],
    白菜和萝卜: [],
    其他: [],
};
let areatext = '8383894';

const change = () => {
    console.log(checkedCities.value);
};

//表格数据
let tableData = [
    {
        date: '小麦',
        name: '2934362亩',
        address: '35%',
    },
    {
        date: '玉米',
        name: '1676778亩',
        address: '20%',
    },
    {
        date: '大豆',
        name: '1257584亩',
        address: '15%',
    },
    {
        date: '地瓜',
        name: '1341423亩',
        address: '16%',
    },
    {
        date: '花生',
        name: '1592939亩',
        address: '19%',
    },
];
let TypeTime = {
    大豆: [1100, 1395, 1948, 2203, 3402, 1860, 2934, 2490, 2323],
    小麦: [1283, 2883, 2939, 1233, 1992, 1928, 3949, 1929, 3434],
    地瓜: [1823, 1948, 1928, 2294, 2302, 3903, 3493, 2323, 2545],
    花生: [2374, 1934, 3943, 3493, 2083, 1928, 2984, 3279, 1739],
};

// 组件挂载完成后执行
onMounted(() => {
    getArea(); //请求
    getaArea(); //面积
    getTownships();
    getvillages(); //村

    //地图
    initMap();
    areachar();
    typesof();
    farmland();
    ProgressBar();
    ASdivision();
});

/*-------------地图------------------------*/
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
        }),
    });
    //加载地图服务
    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);

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

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.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//保存数据
                                                    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);
}
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.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]);
            }
        }
    }
}

/*------------------接口--------------------*/
const getArea = () => {
    getarea({ time: '2023-04-19', subregion: '1', parent: '大场镇' }).then(res => {
        console.log(res);
    });
};
//镇
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)];
        ASdivision();
    });
};
//村
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);
                }
            });
        });
        ASdivision();
    });
};

const selectTab = () => {
    TypeTime = {
        大豆: [1034, 1295, 1348, 1203, 2402, 1160, 1934, 1490],
        小麦: [1083, 1883, 2139, 1033, 992, 1328, 2949, 1529],
        地瓜: [1223, 1548, 1828, 2094, 2202, 2903, 3293, 2023],
        花生: [1374, 1734, 3143, 2493, 1983, 1728, 2584, 3079],
    };

    if (value.value == '370211') {
        getTownships();
        tableData = [
            {
                date: '小麦',
                name: '2934362亩',
                address: '35%',
            },
            {
                date: '玉米',
                name: '1676778亩',
                address: '20%',
            },
            {
                date: '大豆',
                name: '1257584亩',
                address: '15%',
            },
            {
                date: '地瓜',
                name: '1341423亩',
                address: '16%',
            },
            {
                date: '花生',
                name: '1592939亩',
                address: '19%',
            },
        ];
        TypeTime = {
            大豆: [1100, 1395, 1948, 2203, 3402, 1860, 2934, 2490],
            小麦: [1283, 2883, 2939, 1233, 1992, 1928, 3949, 1929],
            地瓜: [1823, 1948, 1928, 2294, 2302, 3903, 3493, 2323],
            花生: [2374, 1934, 3943, 3493, 2083, 1928, 2984, 3279],
        };
        areatext = '8383894';
    }
    areatext = '1293842';
    tableData = [
        {
            date: '小麦',
            name: '414029亩',
            address: '32%',
        },
        {
            date: '玉米',
            name: '232891亩',
            address: '18%',
        },
        {
            date: '大豆',
            name: '194076亩',
            address: '15%',
        },
        {
            date: '地瓜',
            name: '207014亩',
            address: '16%',
        },
        {
            date: '花生',
            name: '245829亩',
            address: '19%',
        },
    ];
    let arr = [...Township.arr];
    console.log('arr:', arr);
    arr.forEach(item => {
        if (item.properties.XZDM == value.value) {
            viewer.camera.flyTo({
                destination: Cesium.Rectangle.fromDegrees(
                    item.bbox[0],
                    item.bbox[1],
                    item.bbox[2],
                    item.bbox[3]
                ),
                duration: 2,
            });
        }
        let arr = [...Township.brr];
        let brr = [];
        // console.log(Township.brr);
        arr.forEach(item => {
            if (item.properties.XZDM == value.value) {
                brr.push(item.properties.XZQMC);
            }
        });
        // console.log(brr);
        data.title = [...Object.values(brr)];
        ASdivision();
        areachar();
        typesof();
    });

    let town = [...Township.arr];
    const townData = town.find(item => item.properties.XZDM === value.value);
    if (townData) {
        // 移除镇高亮
        deleteEntityByName('townLine');
        // 高亮镇边界
        addBoundaryHandle(townData.geometry.coordinates, 'townLine', 'yellow');
    }
    // 移除以前村
    removeWms(['aaa']);
    // 添加村
    addvillage(`XZDM=${value.value}`, 'aaa');
};

//下载
/*---------------------------*/
const Deta = item => {
    downloadURL(item);
};

const downloadURL = url => {
    let link = document.createElement('a');
    link.style.display = 'none';
    link.href = url;
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
};
/*-------------echarts--------------*/
function areachar() {
    const xAxisData = [
        '2023/01/06',
        '2023/02/06',
        '2023/03/06',
        '2023/04/06',
        '2023/05/06',
        '2023/06/06',
        '2023/07/06',
        '2023/08/06',
        '2023/09/06',
    ];
    const areaDivIntance = echarts.init(areaDiv.value);
    var option = {
        textStyle: {
            fontFamily: 'Din-Light',
        },
        color: [
            'rgba(252, 169, 63, 0.8)',
            'rgba(110, 209, 84, 0.8)',
            'rgba(103, 153, 242, 0.8)',
            'rgba(4, 199, 247, 0.9)',
            'rgba(229, 205, 38, 0.8)',
            '#46caff',
            '#a1e867',
            '#10b2b2',
            '#ec87f7',
            '#f4905a',
            '#00baba',
            '#facf24',
            '#e89d67',
            '#23c6c6',
            '#fa8699',
            '#40b7fc',
            '#006d75',
            '#595959',
            '#f4764f',
            '#a640fc',
            '#fda23f',
            '#2d7ae4',
            '#5092ff',
            '#9351ed',
            '#8a89fe',
            '#df89e8',
            '#2797ff',
            '#6ad089',
            '#7c92e8 ',
        ],
        title: {
            text: '',
            left: '47%',
            textStyle: {
                fontSize: 24,
            },
        },
        // legend: {
        //     show: true,
        //     top: '10',
        //     left: 'center',
        //     textStyle: { color: 'rgba(255,255,255,.9)' },
        //     itemWidth: 20,
        //     itemHeight: 12.5,
        //     icon: 'stack',
        // },

        tooltip: {
            trigger: 'axis',
            axisPointer: {
                lineStyle: {
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [
                            {
                                offset: 0,
                                color: 'rgba(0, 255, 233,0)',
                            },
                            {
                                offset: 0.5,
                                color: 'rgba(255, 255, 255,1)',
                            },
                            {
                                offset: 1,
                                color: 'rgba(0, 255, 233,0)',
                            },
                        ],
                        global: false,
                    },
                },
            },
        },
        grid: {
            left: 60,
            right: 10,
            top: 60,
            bottom: 50,
        },
        dataZoom: [
            {
                // start: 0,//默认为0
                // end: 100,//默认为100
                type: 'slider',
                show: false,
                // xAxisIndex: [0],
                handleSize: 0, //滑动条的 左右2个滑动条的大小
                startValue: 0, // 初始显示值
                endValue: 6, // 结束显示值
                height: 10, //组件高度
                left: '5%', //左边的距离
                right: '4%', //右边的距离
                bottom: 5, //底边的距离
                borderColor: '#000',
                fillerColor: '#269cdb',
                borderRadius: 5,
                backgroundColor: '#33384b', //两边未选中的滑动条区域的颜色
                showDataShadow: false, //是否显示数据阴影 默认auto
                showDetail: false, //即拖拽时候是否显示详细数值信息 默认true
                realtime: true, //是否实时更新
                filterMode: 'filter',
            },
            //下面这个属性是里面拖到
            {
                type: 'inside',
                show: true,
                // xAxisIndex: [0],
                start: 1, //默认为1
                end: 100, //默认为100
            },
        ],

        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: xAxisData,
            axisLabel: {
                color: 'rgba(255,255,255,0.7)',
                //X轴标签 label 做了特殊处理，防止左右溢出
                formatter: (value, index) => {
                    if (index === 0 || index === xAxisData.length - 1) {
                        return '';
                    }
                    return value;
                },
            },
            axisLine: {
                show: false,
            },
            axisTick: {
                show: false,
            },
        },
        yAxis: {
            name: '面积(亩)',
            nameTextStyle: {
                color: 'rgba(255, 255, 255, 0.8)',
                fontSize: 14,
            },
            type: 'value',
            axisLabel: {
                color: 'rgba(255,255,255,0.7)',
            },
            splitLine: {
                lineStyle: {
                    type: 'dashed',
                },
            },
            minInterval: 1,
            axisLine: {
                show: false,
            },
            axisTick: {
                show: false,
            },
        },
        series: [
            {
                name: '大豆',
                data: TypeTime.大豆,
                type: 'line',
                smooth: true,
                smoothMonotone: 'x',
                cursor: 'pointer',
                showSymbol: false,
                lineStyle: {
                    color: 'rgba(252, 169, 63, 0.8)',
                    shadowColor: 'rgba(18,61,172,0.5)',
                    shadowBlur: 10,
                },
                areaStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(
                            0,
                            0,
                            0,
                            1,
                            [
                                {
                                    offset: 0,
                                    color: 'rgba(252, 169, 63, 0.8)',
                                },
                                {
                                    offset: 1,
                                    color: 'rgba(252, 169, 63, 0)',
                                },
                            ],
                            false
                        ),
                    },
                },
            },
            {
                name: '小麦',
                data: TypeTime.小麦,
                type: 'line',
                smooth: true,
                smoothMonotone: 'x',
                cursor: 'pointer',
                showSymbol: false,
                lineStyle: {
                    color: 'rgba(110, 209, 84, 0.8)',
                    shadowColor: 'rgba(115,226,226,0.5)',
                    shadowBlur: 10,
                },
                areaStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(
                            0,
                            0,
                            0,
                            1,
                            [
                                {
                                    offset: 0,
                                    color: 'rgba(110, 209, 84, 0.8)',
                                },
                                {
                                    offset: 1,
                                    color: 'rgba(110, 209, 84, 0)',
                                },
                            ],
                            false
                        ),
                    },
                },
            },
            {
                name: '地瓜',
                data: TypeTime.地瓜,
                type: 'line',
                smooth: true,
                smoothMonotone: 'x',
                cursor: 'pointer',
                showSymbol: false,
                lineStyle: {
                    color: 'rgba(103, 153, 242, 0.8)',
                    shadowColor: 'rgba(255,126,133,0.5)',
                    shadowBlur: 10,
                },
                areaStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(
                            0,
                            0,
                            0,
                            1,
                            [
                                {
                                    offset: 0,
                                    color: 'rgba(103, 153, 242, 0.8)',
                                },
                                {
                                    offset: 1,
                                    color: 'rgba(103, 153, 242, 0)',
                                },
                            ],
                            false
                        ),
                    },
                },
            },
            {
                name: '花生',
                data: TypeTime.花生,
                type: 'line',
                smooth: true,
                smoothMonotone: 'x',
                cursor: 'pointer',
                showSymbol: false,
                lineStyle: {
                    color: 'rgba(4, 199, 247, 0.9)',
                    shadowColor: 'rgba(255,120,168,0.5)',
                    shadowBlur: 10,
                },
                areaStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(
                            0,
                            0,
                            0,
                            1,
                            [
                                {
                                    offset: 0,
                                    color: 'rgba(4, 199, 247, 0.9)',
                                },
                                {
                                    offset: 1,
                                    color: 'rgba(4, 199, 247, 0)',
                                },
                            ],
                            false
                        ),
                    },
                },
            },
            {
                name: '玉米',
                data: TypeTime.玉米,
                type: 'line',
                smooth: true,
                smoothMonotone: 'x',
                cursor: 'pointer',
                showSymbol: false,
                lineStyle: {
                    color: 'rgba(229, 205, 38, 0.8)',
                    shadowColor: 'rgba(255,120,168,0.5)',
                    shadowBlur: 10,
                },

                areaStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(
                            0,
                            0,
                            0,
                            1,
                            [
                                {
                                    offset: 0,
                                    color: 'rgba(229, 205, 38, 0.8)',
                                },
                                {
                                    offset: 1,
                                    color: 'rgba(229, 205, 38, 0)',
                                },
                            ],
                            false
                        ),
                    },
                },
            },
        ],
    };
    option && areaDivIntance.setOption(option);

    window.addEventListener('resize', function () {
        areaDivIntance.resize();
    });
}

function typesof() {
    const typesofDivIntance = echarts.init(typesofDiv.value);
    var option = {
        title: [
            {
                text: '总面积',
                x: 'center',
                top: '32%',
                textStyle: {
                    color: 'rgba(255,255,255,1)',
                    fontSize: 14,
                    fontWeight: '400',
                },
            },
            {
                text: `${areatext}亩`,
                x: 'center',
                top: '50%',
                textStyle: {
                    fontSize: 18,
                    color: 'rgba(255, 213, 88, 1)',
                    foontWeight: '400',
                },
            },
        ],
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b}: {c} ({d}%)',
        },
        color: [
            'rgba(212,236,89,0.8)',
            'rgba(102,142,214,0.8)',
            'rgba(156,220,130,0.8)',
            'rgba(255,225,104,0.8)',
        ], // 指定饼图颜色
        legend: {
            selectedMode: true, //图例上的点击事件
            type: 'plain',
            orient: 'vertical',
            left: '85%',
            top: 'center',
            align: 'left',
            itemGap: 20,
            itemWidth: 12, // 设置宽度
            itemHeight: 7, // 设置高度
            symbolKeepAspect: false,
            textStyle: {
                color: 'rgba(255,255,255,0.7)',
                rich: {
                    name: {
                        verticalAlign: 'right',
                        align: 'left',
                        width: 90,
                        fontSize: 18,
                        color: '#D8DDE3',
                    },
                    value: {
                        align: 'left',
                        width: 50,
                        fontSize: 18,
                        color: '#D8DDE3',
                    },
                },
            },
        },
        series: [
            {
                name: '占比',
                type: 'pie',
                radius: ['50%', '70%'],
                avoidLabelOverlap: true,
                label: {
                    normal: {
                        show: false, //饼图label文字
                        position: 'left',
                        textStyle: {
                            color: 'rgba(41,255,219,1)',
                        },
                    },
                    emphasis: {
                        show: true,
                        textStyle: {
                            fontSize: '30',
                            fontWeight: 'bold',
                        },
                    },
                },
                labelLine: {
                    show: true,
                    normal: {
                        show: true,
                    },
                },
                data: [
                    { value: 25, name: '小麦' },
                    { value: 25, name: '玉米' },
                    { value: 25, name: '大豆' },
                    { value: 25, name: '地瓜' },
                    { value: 25, name: '花生' },
                ],
            },
        ],
    };

    // option && typesofDivIntance.setOption(option);
    useEcharts(typesofDivIntance, option);
}

function farmland() {
    const farmlandDivIntance = echarts.init(farmlandDiv.value);
    var option = {
        title: {
            text: '',
            subtext: '',
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow',
            },
        },
        grid: {
            top: '15%',
            left: '16%',
            bottom: '19%',
        },
        xAxis: {
            type: 'category',
            data: ['区域一', '区域二', '区域三', '区域四', '区域五'],
            axisLine: {
                lineStyle: {
                    color: '#C0C4CC',
                    width: 1,
                },
            },
            axisTick: {
                show: false,
            },
            axisLabel: {
                margin: 10,
                color: 'rgba(255, 255, 255, 0.7)',
                textStyle: {
                    fontSize: 14,
                },
            },
        },
        yAxis: {
            name: '面积(亩)',
            nameTextStyle: {
                color: 'rgba(255, 255, 255, 0.8)',
                fontSize: 14,
            },
            type: 'value',
            splitLine: {
                lineStyle: {
                    color: 'rgba(192,196,204,1)',
                    type: 'dashed',
                },
            },
            axisLabel: {
                margin: 10,
                color: 'rgba(255, 255, 255, 0.7)',
                textStyle: {
                    fontSize: 14,
                },
            },
        },
        series: [
            {
                name: '小麦',
                type: 'bar',
                barWidth: 14,
                stack: '数量',
                data: [1666, 1666, 1666, 1666, 1666],
                itemStyle: {
                    normal: {
                        //颜色渐变
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            {
                                offset: 0,
                                color: 'rgba(102, 142, 214, 0.8)',
                            },
                            {
                                offset: 1,
                                color: 'rgba(102, 142, 214, 0.8)',
                            },
                        ]),
                    },
                },
            },
            {
                name: '玉米',
                type: 'bar',
                barWidth: 30,
                stack: '数量',
                data: [1666, 1666, 1666, 1666, 1666],
                itemStyle: {
                    normal: {
                        //颜色渐变
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            {
                                offset: 0,
                                color: 'rgba(255, 225, 104, 0.8)',
                            },
                            {
                                offset: 1,
                                color: 'rgba(255, 225, 104, 0.8)',
                            },
                        ]),
                    },
                },
            },
            {
                name: '大豆',
                type: 'bar',
                barWidth: 30,
                stack: '数量',
                data: [1666, 1666, 1666, 1666, 1666],
                itemStyle: {
                    normal: {
                        //颜色渐变
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            {
                                offset: 0,
                                color: 'rgba(209, 91, 127, 0.8)',
                            },
                            {
                                offset: 1,
                                color: 'rgba(209, 91, 127, 0.8)',
                            },
                        ]),
                    },
                },
            },
        ],
    };
    farmlandDivIntance.on('click', function (params) {
        console.log(params.name);
    });

    option && farmlandDivIntance.setOption(option, { notMerge: true, grid: { bottom: 20 } });
    useEcharts(farmlandDivIntance, option);
}
function ProgressBar() {
    const ProgressBarDivIntance = echarts.init(ProgressBarDiv.value);
    var option = {
        // backgroundColor: '#031d33',
        grid: {
            top: 0,
            bottom: 0,
            left: '10%',
            right: '10%',
        },
        xAxis: {
            show: false,
            type: 'value',
            boundaryGap: [0, 0],
        },
        yAxis: [
            {
                type: 'category',
                data: [''],
                axisLine: { show: false },
                axisTick: [
                    {
                        show: false,
                    },
                ],
            },
        ],
        series: [
            {
                name: '金额',
                type: 'bar',
                zlevel: 1,
                itemStyle: {
                    normal: {
                        barBorderRadius: 30,
                        color: new echarts.graphic.LinearGradient(1, 0, 0, 1, [
                            {
                                offset: 1,
                                color: 'rgba(7,99,84,0.95) ',
                            },
                            {
                                offset: 0,
                                color: 'rgba(71,179,161,0.95)',
                            },
                        ]),
                    },
                },
                barWidth: 20,
                data: [10],
            },
            {
                name: '背景',
                type: 'bar',
                barWidth: 20,
                barGap: '-100%',
                data: [20],
                itemStyle: {
                    normal: {
                        color: 'rgba(255, 255, 255, 0.2)',
                        barBorderRadius: 50,
                    },
                },
            },
        ],
    };
    // option && ProgressBarDivIntance.setOption(option);
    useEcharts(ProgressBarDivIntance, option);
}
function ASdivision() {
    const ASdivisionDivIntance = echarts.init(ASdivisionDiv.value);
    var option = {
        // 设置图表的位置
        grid: {
            bottom: '8%',
            left: '10%',
            right: '6%',
            top: '6%',
            containLabel: true,
        },
        dataZoom: [
            {
                type: 'slider',
                show: true,
                zoomLock: true, //禁止拉伸
                width: 8,
                yAxisIndex: [0],
                bottom: 30,
                top: 20,
                right: 10,
                startValue: 0,
                endValue: 4,
                handleIcon:
                    'M-292,322.2c-3.2,0-6.4-0.6-9.3-1.9c-2.9-1.2-5.4-2.9-7.6-5.1s-3.9-4.8-5.1-7.6c-1.3-3-1.9-6.1-1.9-9.3c0-3.2,0.6-6.4,1.9-9.3c1.2-2.9,2.9-5.4,5.1-7.6s4.8-3.9,7.6-5.1c3-1.3,6.1-1.9,9.3-1.9c3.2,0,6.4,0.6,9.3,1.9c2.9,1.2,5.4,2.9,7.6,5.1s3.9,4.8,5.1,7.6c1.3,3,1.9,6.1,1.9,9.3c0,3.2-0.6,6.4-1.9,9.3c-1.2,2.9-2.9,5.4-5.1,7.6s-4.8,3.9-7.6,5.1C-285.6,321.5-288.8,322.2-292,322.2z',
                handleSize: '100%',
                handleStyle: {
                    color: '#DBDBDB',
                    height: '100%',
                },
                backgroundColor: 'transparent',
                fillerColor: '#DBDBDB',
                textStyle: {
                    color: 'transparent',
                },
                dataBackground: {
                    lineStyle: {
                        color: 'transparent',
                    },
                    areaStyle: {
                        color: 'transparent',
                    },
                },
                borderColor: 'transparent',
            },
            {
                type: 'inside',
                id: 'insideY',
                yAxisIndex: 0,
                start: 0,
                end: 50,
                zoomOnMouseWheel: false,
                moveOnMouseMove: true,
                moveOnMouseWheel: true,
            },
        ],
        // X轴
        xAxis: {
            type: 'value', // 坐标轴类型,   'value' 数值轴，适用于连续数据
            // 坐标轴刻度
            axisTick: {
                show: false, // 是否显示坐标轴刻度 默认显示
            },
            // 坐标轴轴线
            axisLine: {
                // 是否显示坐标轴轴线 默认显示
                show: false, // 是否显示坐标轴轴线 默认显示
            },
            // 坐标轴在图表区域中的分隔线
            splitLine: {
                show: false, // 是否显示分隔线。默认数值轴显示
            },
            // 坐标轴刻度标签
            axisLabel: {
                show: false, // 是否显示刻度标签 默认显示
            },
        },
        // Y轴
        yAxis: [
            // 左侧Y轴
            {
                // 坐标轴类型,  'category' 类目轴，适用于离散的类目数据
                // 为该类型时必须通过 data 设置类目数据
                type: 'category',
                // 坐标轴刻度
                axisTick: {
                    show: false, // 是否显示坐标轴刻度 默认显示
                },
                // 坐标轴轴线
                axisLine: {
                    // 是否显示坐标轴轴线 默认显示
                    show: false, // 是否显示坐标轴轴线 默认显示
                    lineStyle: {
                        // 坐标轴线线的颜色
                        color: '#cdd3ee',
                    },
                },
                // 坐标轴在图表区域中的分隔线
                splitLine: {
                    show: false, // 是否显示分隔线。默认数值轴显示
                },
                // 坐标轴刻度标签
                axisLabel: {
                    show: true, // 是否显示刻度标签 默认显示
                    fontSize: 12, // 文字的字体大小
                    color: 'rgba(255, 255, 255, 1)', // 刻度标签文字的颜色
                    // 使用字符串模板，模板变量为刻度默认标签 {value}
                    formatter: '{value}',
                },
                // 类目数据，在类目轴（type: 'category'）中有效
                data: data.title,
                inverse: true,
            },
        ],
        // 系列列表
        series: [
            {
                type: 'bar', // 系列类型
                name: '玉米', // 系列名称, 用于tooltip的显示, legend 的图例筛选
                // 数据堆叠，同个类目轴上系列配置相同的stack值后，后一个系列的值会在前一个系列的值上相加
                stack: '总量',
                barMaxWidth: 30, // 柱条的最大宽度，不设时自适应
                // 图形上的文本标签
                label: {
                    show: true,
                    position: '',
                    textStyle: {
                        fontSize: 12,
                        fontWeight: 'bolder',
                        color: 'rgba(255,255,255,1)',
                    },
                },
                // 图形样式
                itemStyle: {
                    color: '#fdad3c',
                },
                data: dd.玉米, // 系列中的数据内容数组
            },
            {
                type: 'bar', // 系列类型
                name: '大豆', // 系列名称, 用于tooltip的显示, legend 的图例筛选
                // 数据堆叠，同个类目轴上系列配置相同的stack值后，后一个系列的值会在前一个系列的值上相加
                stack: '总量',
                barMaxWidth: 30, // 柱条的最大宽度，不设时自适应
                // 图形上的文本标签
                label: {
                    show: true,
                    position: 'inside',
                    // formatter: '',
                    textStyle: {
                        fontSize: 12,
                        fontWeight: 'bolder',
                        color: 'rgba(255,255,255,1)',
                    },
                },
                // 图形样式
                itemStyle: {
                    color: 'rgba(156, 220, 130, 0.8)',
                },
                data: dd.大豆, // 系列中的数据内容数组
            },
            {
                type: 'bar', // 系列类型
                name: '花生', // 系列名称, 用于tooltip的显示, legend 的图例筛选
                // 数据堆叠，同个类目轴上系列配置相同的stack值后，后一个系列的值会在前一个系列的值上相加
                stack: '总量',
                barMaxWidth: 30, // 柱条的最大宽度，不设时自适应
                // 图形上的文本标签
                label: {
                    show: true,
                    position: 'inside',
                    // formatter: 'f',
                    textStyle: {
                        fontSize: 12,
                        fontWeight: 'bolder',
                        color: 'rgba(255,255,255,1)',
                    },
                },
                // 图形样式
                itemStyle: {
                    color: 'rgba(212, 236, 89, 0.8)',
                },
                data: dd.花生, // 系列中的数据内容数组
            },
            {
                type: 'bar', // 系列类型
                name: '小麦', // 系列名称, 用于tooltip的显示, legend 的图例筛选
                // 数据堆叠，同个类目轴上系列配置相同的stack值后，后一个系列的值会在前一个系列的值上相加
                stack: '总量',
                barMaxWidth: 30, // 柱条的最大宽度，不设时自适应
                // 图形上的文本标签
                label: {
                    show: true,
                    position: 'inside',
                    // formatter: '',
                    textStyle: {
                        fontSize: 12,
                        fontWeight: 'bolder',
                        color: 'rgba(255,255,255,1)',
                    },
                },
                // 图形样式
                itemStyle: {
                    color: 'rgba(102, 142, 214, 0.8)',
                },
                data: dd.小麦, // 系列中的数据内容数组
            },
            {
                type: 'bar', // 系列类型
                name: '蓝莓', // 系列名称, 用于tooltip的显示, legend 的图例筛选
                // 数据堆叠，同个类目轴上系列配置相同的stack值后，后一个系列的值会在前一个系列的值上相加
                stack: '总量',
                barMaxWidth: 30, // 柱条的最大宽度，不设时自适应
                // 图形上的文本标签
                label: {
                    show: true,
                    position: 'inside',
                    // formatter: '',
                    textStyle: {
                        fontSize: 12,
                        fontWeight: 'bolder',
                        color: 'rgba(255,255,255,1)',
                    },
                },
                // 图形样式
                itemStyle: {
                    color: 'rgba(50, 211, 235, 0.8)',
                },
                data: dd.蓝莓, // 系列中的数据内容数组
            },
        ],
    };
    // option && ASdivisionDivIntance.setOption(option, true);
    useEcharts(ASdivisionDivIntance, option);
}

/*--------------------------------------------------------------------------------------------*/
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.fromBytes(30, 144, 255),
                    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 getJson() {
//     let dic = {
//         小麦: 'rgba(102, 142, 214, 0.8)',
//         玉米: 'rgba(255, 225, 104, 0.8)',
//         大豆: 'rgba(156, 220, 130, 0.8)',
//         地瓜: 'rgba(156, 220, 130, 0.8)',
//         花生: 'rgba(212, 236, 89, 0.8)',
//         蓝莓: 'rgba(50, 211, 235, 0.8)',
//         茶叶: 'rgba(91, 196, 159, 0.8)',
//         马铃薯: 'rgba(254, 182, 77, 0.8)',
//         白菜和萝卜: 'rgba(250, 129, 109, 0.8)',
//         其他: 'rgba(250, 129, 109, 0.8)',
//     };
//     // let viewer = viewers.value;
//     axios({
//         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 => {
//             console.log('res:', res);
//             let data = res.data.features;
//             let name = Object.keys(dic);
//             data.forEach((item, index) => {
//                 // let hh = name[Math.floor((Math.random() * name.length))]
//                 // let height = random(1000, 5000)

//                 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') {
//                     //灵山卫街道
//                     let hh = name[Math.floor(Math.random() * name.length)];
//                     let height = random(2000, 500);

//                     longitude = 120.0863;
//                     latitude = 35.941;
//                     viewer.entities.add({
//                         position: Cesium.Cartesian3.fromDegrees(longitude + 0.01, latitude + 0.01),
//                         ellipse: {
//                             semiMinorAxis: 400.0, //短轴
//                             semiMajorAxis: 400.0, //长轴
//                             height: height, //拉伸高度
//                             extrudedHeight: 0, //离地高度
//                             rotation: Cesium.Math.toRadians(60), //旋转
//                             stRotation: Cesium.Math.toRadians(60), //旋转
//                             fill: true, //是否显示圆的填充
//                             material: Cesium.Color.fromCssColorString(`${dic[hh]}`), //圆的颜色,
//                             outline: false, //是否显示圆轮廓
//                             outlineColor: Cesium.Color.fromCssColorString(`rgba(255,255,0,1)`), //圆轮廓线的颜色,
//                         },
//                         info: {
//                             name: hh,
//                             value: height,
//                         },
//                     });
//                 } else if (item.properties.XZDM === '370211003') {
//                     //薛家岛街道
//                     longitude = 120.243682;
//                     latitude = 35.97123201;
//                     let hh = name[Math.floor(Math.random() * name.length)];
//                     let height = random(300, 5000);

//                     viewer.entities.add({
//                         position: Cesium.Cartesian3.fromDegrees(longitude + 0.01, latitude + 0.01),
//                         ellipse: {
//                             semiMinorAxis: 400.0, //短轴
//                             semiMajorAxis: 400.0, //长轴
//                             height: height, //拉伸高度
//                             extrudedHeight: 0, //离地高度
//                             rotation: Cesium.Math.toRadians(60), //旋转
//                             stRotation: Cesium.Math.toRadians(60), //旋转
//                             fill: true, //是否显示圆的填充
//                             material: Cesium.Color.fromCssColorString(`${dic[hh]}`), //圆的颜色,
//                             outline: false, //是否显示圆轮廓
//                             outlineColor: Cesium.Color.fromCssColorString(`rgba(255,255,0,1)`), //圆轮廓线的颜色,
//                         },
//                         info: {
//                             name: hh,
//                             value: height,
//                         },
//                     });
//                 } else if (index % 2 === 0) {
//                     let hh = name[Math.floor(Math.random() * name.length)];
//                     let height = random(100, 500);

//                     viewer.entities.add({
//                         position: Cesium.Cartesian3.fromDegrees(longitude + 0.01, latitude + 0.01),
//                         ellipse: {
//                             semiMinorAxis: 400.0, //短轴
//                             semiMajorAxis: 400.0, //长轴
//                             height: height, //拉伸高度
//                             extrudedHeight: 0, //离地高度
//                             rotation: Cesium.Math.toRadians(60), //旋转
//                             stRotation: Cesium.Math.toRadians(60), //旋转
//                             fill: true, //是否显示圆的填充
//                             material: Cesium.Color.fromCssColorString(`${dic[hh]}`), //圆的颜色,
//                             outline: false, //是否显示圆轮廓
//                             outlineColor: Cesium.Color.fromCssColorString(`rgba(255,255,0,1)`), //圆轮廓线的颜色,
//                         },
//                         info: {
//                             name: hh,
//                             value: height,
//                         },
//                     });
//                 }

//                 let hh = name[Math.floor(Math.random() * name.length)];
//                 let height = random(1000, 5000); //圆柱与圆高度为0时是圆

//                 viewer.entities.add({
//                     position: Cesium.Cartesian3.fromDegrees(longitude, latitude),
//                     ellipse: {
//                         semiMinorAxis: 400.0, //短轴
//                         semiMajorAxis: 400.0, //长轴
//                         height: height, //拉伸高度
//                         extrudedHeight: 0, //离地高度
//                         rotation: Cesium.Math.toRadians(60), //旋转
//                         stRotation: Cesium.Math.toRadians(60), //旋转
//                         fill: true, //是否显示圆的填充
//                         material: Cesium.Color.fromCssColorString(`${dic[hh]}`), //圆的颜色,
//                         outline: false, //是否显示圆轮廓
//                         outlineColor: Cesium.Color.fromCssColorString(`rgba(255,255,0,1)`), //圆轮廓线的颜色,
//                     },
//                     info: {
//                         name: hh,
//                         value: height,
//                     },
//                 }); //

//                 viewer.camera.flyTo({
//                     // destination: Cesium.Rectangle.fromDegrees(119.5091, 31.5671, 120.3285, 35.1455),
//                     // destination: new Cesium.Rectangle.fromDegrees(110.8, 30.8, 121.8, 30.9),
//                     destination: Cesium.Cartesian3.fromDegrees(119.9091, 35.0991, 55000),
//                     duration: 2,
//                     orientation: {
//                         pitch: Cesium.Math.toRadians(-30.0),
//                         roll: 0.0,
//                     },
//                 }); // viewer.camera.twistRight(Cesium.Math.toDegrees(0.005).toFixed(2));
//             });
//         })
//         .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 mapClick() {
//     // let viewer = viewers.value;
//     viewer.screenSpaceEventHandler.setInputAction(function (movement) {
//         const earthPosition = viewer.camera.pickEllipsoid(
//             movement.position,
//             viewer.scene.globe.ellipsoid
//         ); //当前世界坐标笛卡尔积
//         if (Cesium.defined(earthPosition)) {
//             let pick = viewer.scene.pick(movement.position); //返回最上层模型属性
//             let picks = viewer.scene.drillPick(movement.position); //返回所有模型属性
//             if (pick && pick.id && pick.id.info) {
//                 console.log('pick:', pick);
//                 const data = pick.id.info;
//                 console.log('data:', data);

//                 const coordinate = movement.position; //屏幕坐标 // 转为经纬度，保存，用于监听时转换坐标
//                 var ellipsoid = viewer.scene.globe.ellipsoid; // 将屏幕坐标转为地理坐标
//                 var cartesian = viewer.camera.pickEllipsoid(coordinate, ellipsoid);
//                 let newData = {
//                     ...data,
//                 };
//                 if (cartesian) {
//                     let cartographic = ellipsoid.cartesianToCartographic(cartesian);
//                     let longitudeString = Cesium.Math.toDegrees(cartographic.longitude).toFixed(6);
//                     let latitudeString = Cesium.Math.toDegrees(cartographic.latitude).toFixed(6);
//                     console.log('longitudeString:', longitudeString);
//                     newData.lon = longitudeString;
//                     newData.lat = latitudeString; /*保存（弹窗）的数据*/

//                     console.log('data:', newData);
//                     clickInfoMap.value = newData;
//                 }
//                 showOverlayChart(coordinate); // 添加地图移动监听：使地图移动弹窗跟着移动
//                 viewer.scene.postRender.addEventListener(infoWindowPostRender);
//             } else {
//                 hiddenOverlayChart(); // 清除监听事件 // viewer.scene.postRender.removeEventListener(infoWindowPostRender);
//             }
//         }
//     }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
// }

// 隐藏弹窗
function hiddenOverlayChart() {
    const pop = document.getElementById('pop');
    pop.style.display = 'none'; // 清除监听事件
    viewer.scene.postRender.removeEventListener(infoWindowPostRender);
}
//显示弹窗
function showOverlayChart(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;
}

// function random(min, max) {
//     return Math.floor(Math.random() * (max - min)) + min;
// }

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

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

.center {
    width: 100%;
    height: 100%;

    .title {
        width: 100%;
        height: 45px;
        background: url('@/assets/images/title.png');
        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;
        }

        p {
            width: 79px;
            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: 25%;
    background: rgba(2, 31, 26, 0.85);
    box-shadow: inset 0px 0px 15px 6px rgba(41, 255, 255, 0.5);

    .leftTop {
        max-width: calc(100% - 20px);
        display: flex;
        flex-direction: column;

        .areaDiv {
            width: 100%;
            height: 327px;
            opacity: 1;
            display: flex;
            padding: 1px;
        }

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

    .leftbottom {
        width: 100%;
        height: 455px;
        opacity: 1;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        padding-top: 13px;

        .typesofDiv {
            width: 100%;
            height: 200px;
        }

        .tableDiv {
            // background: rgba(255, 255, 255, 0.05);
            display: flex;
            justify-content: center;
            width: 85%;
            flex-direction: column;
            padding: 5px 10px 5px 10px;
            color: rgba(255, 255, 255, 1);

            .Crops {
                display: flex;
                width: 100%;
                margin-bottom: 10px;
                font-size: 14px;
                font-weight: 400;
                height: 31px;
                flex-direction: row;
                align-items: center;
                justify-content: space-around;
                opacity: 1;
                background: linear-gradient(90deg,
                        rgba(21, 173, 148, 0.1) 0%,
                        rgba(21, 173, 148, 0) 100%);

                div {
                    display: flex;
                    align-items: center;
                }
            }

            .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: 25%;
    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);

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

        .farmlandDiv {
            width: 100%;
            height: 340px;
            opacity: 1;
        }

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

        .ASdivision {
            width: 415px;
            height: 368px;
            opacity: 1;
        }
    }
}

.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: calc(400px + 12vw);
    width: calc(100% - (400px * 2) - (10vw * 2));
    min-width: 380px;
    bottom: 5%;
    height: 75px;
    opacity: 1;
    border-radius: 5px;
    background: rgba(2, 31, 26, 0.6);
    border: 1px solid rgba(4, 153, 153, 1);
}

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

#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, 0.6);
    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;
        }
    }
}

:deep(.el-select__popper.el-popper) {}
</style>
