<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 class="production">
                    <div class="leftProduction">
                        <p>
                            <span>900</span>
                            吨
                            <br />
                            最小值
                        </p>
                    </div>
                    <div class="rightProduction">
                        <p>
                            <span>960</span>
                            吨
                            <br />
                            最小值
                        </p>
                    </div>
                </div>
                <div ref="areaDiv" class="areaDiv"></div>
            </div>

            <div class="leftFoldDiv" @click="leftFoldClick()">
                <el-icon><ArrowRightBold /></el-icon>
            </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
                    popper-class="select_city"
                    @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 class="rightFoldDiv" @click="rightFoldClick()">
                <el-icon><ArrowLeftBold /></el-icon>
            </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>
        <el-button v-if="flag" class="back_button" @click="back()">返回</el-button>
        <el-collapse class="legend" accordion>
            <el-collapse-item name="1">
                <template #title>图例</template>
                <div class="mt-4">
                    <el-checkbox-group v-model="checkList" @change="change">
                        <!-- <el-checkbox
                            v-for="(value, item, key) in dic"
                            :key="key"
                            :style="{
                                background: value.color,
                                border: `1px solid ${value.color}`,
                                width: `100%`,
                            }"
                            v-model="checked3"
                            :disabled="value.disabled"
                            :label="item"
                        /> -->

                        <el-checkbox
                            style="
                                background: rgba(255, 238, 204, 1);
                                border: 1px solid rgba(251, 171, 60, 1);
                                width: 100%;
                            "
                            v-model="checked3"
                            label="0-200"
                        />
                        <el-checkbox
                            style="
                                background: rgba(255, 220, 153, 1);
                                border: 1px solid rgba(251, 219, 13, 1);
                                width: 100%;
                            "
                            v-model="checked4"
                            label="200-400"
                        />
                        <el-checkbox
                            style="
                                background: rgba(255, 203, 102, 1);
                                border: 1px solid rgba(244, 218, 136, 1);
                                width: 100%;
                            "
                            v-model="checked3"
                            label="400-600"
                        />
                        <el-checkbox
                            style="
                                background: rgba(255, 185, 51, 1);
                                border: 1px solid rgba(174, 83, 110, 1);
                                width: 100%;
                            "
                            v-model="checked4"
                            label="600-800"
                        />
                        <el-checkbox
                            style="
                                background: rgba(255, 168, 0, 1);
                                border: 1px solid rgba(242, 177, 167, 1);
                                width: 100%;
                            "
                            v-model="checked3"
                            label="800-1000"
                        />
                    </el-checkbox-group>
                </div>
            </el-collapse-item>
        </el-collapse>
    </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 axios from 'axios';
import 'echarts-gl';
import { download } from '@/utils/request';

let viewer = ref(null);
const areaDiv = ref(null);
const farmlandDiv = ref(null);
const ProgressBarDiv = ref(null);
const ASdivisionDiv = 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);
let ff = ref('{x:765,y:191}');
let Pie3D = reactive({
    arr: [
        {
            name: '小麦',
            value: 101,
            itemStyle: {
                opacity: 0.5,
                color: 'rgba(110, 209, 84, 0.9)',
            },
        },
        {
            // 数据项名称
            name: '花生',
            value: 156,
            itemStyle: {
                // 透明度
                opacity: 0.5,
                // 扇形颜色
                color: 'rgba(251, 201, 3, 1)',
            },
            label: {
                show: true,
            },
        },
        {
            // 数据项名称
            name: '大豆',
            value: 156,
            itemStyle: {
                // 透明度
                opacity: 0.5,
                // 扇形颜色
                color: 'rgba(240, 129, 31, 0.9)',
            },
            label: {
                show: true,
            },
        },
        {
            // 数据项名称
            name: '地瓜',
            value: 156,
            itemStyle: {
                // 透明度
                opacity: 0.5,
                // 扇形颜色
                color: 'rgba(27, 85, 222, 1)',
            },
            label: {
                show: true,
            },
        },
        {
            // 数据项名称
            name: '蓝莓',
            value: 56,
            itemStyle: {
                // 透明度
                opacity: 0.5,
                // 扇形颜色
                color: 'rgba(72, 102, 211, 0.9)',
            },
            label: {
                show: true,
            },
        },
        {
            // 数据项名称
            name: '茶叶',
            value: 56,
            itemStyle: {
                // 透明度
                opacity: 0.5,
                // 扇形颜色
                color: 'rgba(26, 255, 140, 1)',
            },
            label: {
                show: true,
            },
        },
    ],
});

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

//表格数据
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();
    farmland();
    // ProgressBar();
    ASdivision();
    getFarmland();
});

/*-------------地图------------------------*/
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);
}
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 getArea = () => {
    getarea({ time: '2023-04-25', 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 = () => {
    getArea();
    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],
    };
    Pie3D.arr = [
        {
            name: '小麦',
            value: 20,
            itemStyle: {
                opacity: 0.5,
                color: 'rgba(110, 209, 84, 0.9)',
            },
        },
        {
            // 数据项名称
            name: '花生',
            value: 10,
            itemStyle: {
                // 透明度
                opacity: 0.5,
                // 扇形颜色
                color: 'rgba(251, 201, 3, 1)',
            },
            label: {
                show: true,
            },
        },
        {
            // 数据项名称
            name: '大豆',
            value: 13,
            itemStyle: {
                // 透明度
                opacity: 0.5,
                // 扇形颜色
                color: 'rgba(240, 129, 31, 0.9)',
            },
            label: {
                show: true,
            },
        },
        {
            // 数据项名称
            name: '地瓜',
            value: 18,
            itemStyle: {
                // 透明度
                opacity: 0.5,
                // 扇形颜色
                color: 'rgba(27, 85, 222, 1)',
            },
            label: {
                show: true,
            },
        },
        {
            // 数据项名称
            name: '茶叶',
            value: 16,
            itemStyle: {
                // 透明度
                opacity: 0.5,
                // 扇形颜色
                color: 'rgba(26, 255, 140, 1)',
            },
            label: {
                show: true,
            },
        },
    ];
    if (value.value == '370211') {
        removeWms(['village_CQL']);
        removeWms(['aaa']);
        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';
        Pie3D = reactive({
            arr: [
                {
                    name: '小麦',
                    value: 101,
                    itemStyle: {
                        opacity: 0.5,
                        color: 'rgba(110, 209, 84, 0.9)',
                    },
                },
                {
                    // 数据项名称
                    name: '花生',
                    value: 156,
                    itemStyle: {
                        // 透明度
                        opacity: 0.5,
                        // 扇形颜色
                        color: 'rgba(251, 201, 3, 1)',
                    },
                    label: {
                        show: true,
                    },
                },
                {
                    // 数据项名称
                    name: '大豆',
                    value: 156,
                    itemStyle: {
                        // 透明度
                        opacity: 0.5,
                        // 扇形颜色
                        color: 'rgba(240, 129, 31, 0.9)',
                    },
                    label: {
                        show: true,
                    },
                },
                {
                    // 数据项名称
                    name: '地瓜',
                    value: 156,
                    itemStyle: {
                        // 透明度
                        opacity: 0.5,
                        // 扇形颜色
                        color: 'rgba(27, 85, 222, 1)',
                    },
                    label: {
                        show: true,
                    },
                },
                {
                    // 数据项名称
                    name: '蓝莓',
                    value: 56,
                    itemStyle: {
                        // 透明度
                        opacity: 0.5,
                        // 扇形颜色
                        color: 'rgba(72, 102, 211, 0.9)',
                    },
                    label: {
                        show: true,
                    },
                },
                {
                    // 数据项名称
                    name: '茶叶',
                    value: 56,
                    itemStyle: {
                        // 透明度
                        opacity: 0.5,
                        // 扇形颜色
                        color: 'rgba(26, 255, 140, 1)',
                    },
                    label: {
                        show: true,
                    },
                },
            ],
        });
        hiddenOverlayChart();
    }
    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();
    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');
    getarea({ time: '2023-04-26', subregion: '1', parent: '黄岛区' }).then(res => {
        let arr = [];
        res.data.map((item, index) => {
            if (item.region == townData.properties.XZMC) {
                arr.push({
                    crop: item.type,
                    Shape_Area: item.area,
                });
            }
        });
        townZuowu.value = {
            label: arr,
        };
        console.log();
        console.log(arr);
        showOverlayChart({ x: 642, y: 312 });
    });
};

//下载
/*---------------------------*/
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 areaDivIntance = echarts.init(areaDiv.value);
    // 统计百分比
    var data1 = [2, 8, 5, 8, 10, 12, 11];
    var data2 = [1, 7, 2, 7, 9, 11, 10];
    var json = {
        chart0: {
            xcategory: ['2017年', '2018年', '2019年', '2020年', '2021年', '2022年', '2023年'],
            low: data1,
            lowLine: [],
        },
    };
    var json2 = {
        chart0: {
            xcategory: ['2017年', '2018年', '2019年', '2020年', '2021年', '2022年', '2023年'],
            low: data2,
            lowLine: [],
        },
    };
    var datacoords = [
        {
            coords: [],
        },
    ];
    var datacoords2 = [
        {
            coords: [],
        },
    ];
    for (var i = 0; i < json.chart0.xcategory.length; i++) {
        datacoords[0].coords.push([json.chart0.xcategory[i], data1[i]]);
    }
    for (var i = 0; i < json.chart0.xcategory.length; i++) {
        datacoords2[0].coords.push([json2.chart0.xcategory[i], data2[i]]);
    }

    var option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                lineStyle: {
                    color: '#15ecf4',
                },
            },
            backgroundColor: 'rgba(0,0,0,.8)',
            extraCssText: 'box-shadow: 4px 4px 10px rgba(21, 250, 255,.6);',
            formatter: function (params) {
                var result = params[0].name + '<br>';
                params.forEach(function (item) {
                    result +=
                        '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' +
                        item.color +
                        '"></span>';
                    // 判断设置增长还是降低
                    if (parseFloat(item.data) >= 50) {
                        result +=
                            item.seriesName +
                            ': ' +
                            '<span class="growth">' +
                            item.data +
                            '吨</span><br>';
                    } else if (parseFloat(item.data) < 50) {
                        result +=
                            item.seriesName +
                            ': ' +
                            '<span class="reduce">' +
                            item.data +
                            '吨</span><br>';
                    }
                });
                return result;
            },
        },
        legend: {
            data: ['最大值', '最小值'],
            textStyle: {
                fontSize: 12,
                color: 'rgb(0,253,255,0.6)',
            },
            top: '5%',
            right: '5%',
        },
        grid: {
            bottom: 50,
            left: 70,
            right: 50,
        },
        xAxis: {
            axisLine: {
                show: true,
                lineStyle: {
                    color: '#15faff',
                },
            },
            axisTick: {
                show: false,
            },
            axisLabel: {
                show: true,
                // interval:0,
            },
            data: ['2017年', '2018年', '2019年', '2020年', '2021年', '2022年', '2023年'],
        },
        yAxis: {
            axisLine: {
                show: false,
            },
            axisTick: {
                show: false,
            },
            splitLine: {
                lineStyle: {
                    type: 'dashed',
                    color: '#4b4d64',
                },
            },
            axisLabel: {
                formatter: '{value}',
                textStyle: {
                    //改变刻度字体样式
                    color: '#ffffff',
                },
            },
        },
        series: [
            {
                name: '最大值',
                type: 'line',
                // smooth: true,
                symbol: 'none',
                symbolSize: 10,
                areaStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(
                            0,
                            0,
                            0,
                            1,
                            [
                                {
                                    offset: 0,
                                    color: 'rgba(255, 204,1, .9)',
                                },
                                {
                                    offset: 0.8,
                                    color: 'rgba(6, 8, 41,.1)',
                                },
                            ],
                            false
                        ),
                        shadowColor: 'rgba(0, 0, 0, 0.1)',
                        shadowBlur: 10,
                    },
                },
                itemStyle: {
                    normal: {
                        color: '#ffcb00',
                    },
                },
                data: data1,
            },
            {
                name: '最大值',
                type: 'lines',
                coordinateSystem: 'cartesian2d',
                zlevel: 1,
                polyline: true,
                smooth: true,
                symbol: 'circle',
                effect: {
                    show: true,
                    trailLength: 0.4,
                    symbol: 'circle',
                    period: 8, //光点滑动速度
                    symbolSize: 8,
                },
                lineStyle: {
                    normal: {
                        color: '#ffcb00',
                        width: 0,
                        opacity: 0,
                        curveness: 0,
                    },
                },
                data: datacoords,
            },
            {
                name: '最小值',
                type: 'line',
                // smooth: true,
                symbol: 'none',
                symbolSize: 10,
                areaStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(
                            0,
                            0,
                            0,
                            1,
                            [
                                {
                                    offset: 0,
                                    color: 'rgba(21, 250, 255,.9)',
                                },
                                {
                                    offset: 0.8,
                                    color: 'rgba(6, 8, 41,.1)',
                                },
                            ],
                            false
                        ),
                        shadowColor: 'rgba(0, 0, 0, 0.1)',
                        shadowBlur: 10,
                    },
                },
                itemStyle: {
                    normal: {
                        color: '#15faff',
                    },
                },
                data: data2,
            },
            {
                name: '最小值',
                type: 'lines',
                coordinateSystem: 'cartesian2d',
                zlevel: 1,
                smooth: true,
                polyline: true,
                symbol: 'circle',
                effect: {
                    show: true,
                    trailLength: 0.4,
                    symbol: 'circle',
                    period: 8, //光点滑动速度
                    symbolSize: 8,
                },
                lineStyle: {
                    normal: {
                        color: '#15faff',
                        width: 0,
                        opacity: 0,
                        curveness: 0,
                    },
                },
                data: datacoords2,
            },
        ],
    };

    option && areaDivIntance.setOption(option);

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

function farmland() {
    const farmlandDivIntance = echarts.init(farmlandDiv.value);
    let xData = ['区域一', '区域二', '区域三', '区域四', '区域五', '区域六'];
    let option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow',
                textStyle: {
                    color: '#fff',
                },
            },
        },
        calculable: true,
        legend: {
            // data: ["已完成", "进行中"],
            top: '7%',
            right: '5%',
            icon: 'rect',
            textStyle: {
                color: '#fff',
            },
        },
        grid: {
            left: '15%',
            // "top":0,
            bottom: '16%',
            right: '2%',
        },
        xAxis: [
            {
                type: 'category',
                axisLine: {
                    lineStyle: {
                        color: 'rgba(255,255,255,.5)',
                    },
                },
                splitLine: {
                    show: false,
                },
                axisTick: {
                    show: false,
                },
                splitArea: {
                    show: false,
                },
                axisLabel: {
                    interval: 0,
                    color: 'rgba(255,255,255,0.7)',
                    fontSize: 14,
                },
                data: xData,
            },
        ],
        yAxis: [
            {
                type: 'value',
                name: '产量(吨)',
                nameTextStyle: {
                    color: 'rgba(255,255,255,0.8)',
                    fontSize: 14,
                    padding: [0, 60, 0, 10],
                },
                splitLine: {
                    show: false,
                },
                axisLine: {
                    show: false,
                },
                axisTick: {
                    show: false,
                },
                axisLabel: {
                    interval: 0,
                    color: 'rgba(255,255,255,0.5)',
                    fontSize: 14,
                },
                splitArea: {
                    show: false,
                },
            },
        ],
        series: [
            {
                name: '最大值',
                type: 'bar',
                barWidth: 14,
                barGap: '85%',
                label: {
                    show: false,
                    position: 'top',
                    fontSize: 14,
                    // fontWeight: 'bold',
                    color: 'rgba(255, 255, 255, 1)',
                },
                itemStyle: {
                    normal: {
                        barBorderRadius: 2,
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [
                                {
                                    offset: 0,
                                    color: 'rgba(242, 252, 252, 0.5)', // 0% 处的颜色
                                },
                                {
                                    offset: 0.5,
                                    color: 'rgba(242, 252, 252, 0.3)', // 100% 处的颜色
                                },
                                {
                                    offset: 1,
                                    color: 'rgba(242, 252, 252, 0)', // 100% 处的颜色
                                },
                            ],
                            global: false, // 缺省为 false
                        },
                        shadowColor: 'rgba(255, 255, 255, 0.5)',
                        shadowBlur: 10,
                    },
                },
                data: [709, 1917, 2455, 2610, 1719, 1433],
            },
            {
                name: '最小值',
                type: 'bar',
                barWidth: 14,
                barGap: '85%',
                label: {
                    show: false,
                    position: 'top',
                    fontSize: 14,
                    // fontWeight: 'bold',
                    color: 'rgba(255, 255, 255, 1)',
                },
                itemStyle: {
                    normal: {
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [
                                {
                                    offset: 0,
                                    color: 'rgba(143, 186, 243, 0.5)', // 0% 处的颜色
                                },
                                {
                                    offset: 0.5,
                                    color: 'rgba(143, 186, 243, 0.3)', // 100% 处的颜色
                                },
                                {
                                    offset: 1,
                                    color: 'rgba(143, 186, 243, 0)', // 100% 处的颜色
                                },
                            ],
                            global: false, // 缺省为 false
                        },
                        shadowColor: 'rgba(255, 255, 255, 0.5)',
                        shadowBlur: 10,
                    },
                },
                data: [300, 500, 700, 400, 600, 1200],
            },
        ],
    };

    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);
}
// 添加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 ASdivision() {
    const ASdivisionDivIntance = echarts.init(ASdivisionDiv.value);
    let xData = ['区域一', '区域二', '区域三', '区域四', '区域五', '区域六'];
    let option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow',
                textStyle: {
                    color: '#fff',
                },
            },
        },
        calculable: true,
        legend: {
            // data: ["已完成", "进行中"],
            top: '7%',
            right: '5%',
            icon: 'rect',
            textStyle: {
                color: '#fff',
            },
        },
        grid: {
            left: '15%',
            // "top":0,
            bottom: '16%',
            right: '2%',
        },
        xAxis: [
            {
                type: 'category',
                axisLine: {
                    lineStyle: {
                        color: 'rgba(255,255,255,.5)',
                    },
                },
                splitLine: {
                    show: false,
                },
                axisTick: {
                    show: false,
                },
                splitArea: {
                    show: false,
                },
                axisLabel: {
                    interval: 0,
                    color: 'rgba(255,255,255,0.7)',
                    fontSize: 14,
                },
                data: xData,
            },
        ],
        yAxis: [
            {
                type: 'value',
                name: '产量(吨)',
                nameTextStyle: {
                    color: 'rgba(255,255,255,0.8)',
                    fontSize: 14,
                    padding: [0, 60, 0, 10],
                },
                splitLine: {
                    show: false,
                },
                axisLine: {
                    show: false,
                },
                axisTick: {
                    show: false,
                },
                axisLabel: {
                    interval: 0,
                    color: 'rgba(255,255,255,0.5)',
                    fontSize: 14,
                },
                splitArea: {
                    show: false,
                },
            },
        ],
        series: [
            {
                name: '最大值',
                type: 'bar',
                barWidth: 14,
                barGap: '85%',
                label: {
                    show: false,
                    position: 'top',
                    fontSize: 14,
                    // fontWeight: 'bold',
                    color: 'rgba(255, 255, 255, 1)',
                },
                itemStyle: {
                    normal: {
                        barBorderRadius: 2,
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [
                                {
                                    offset: 0,
                                    color: 'rgba(4, 247, 227, 1)', // 0% 处的颜色
                                },
                                {
                                    offset: 0.8,
                                    color: 'rgba(4, 247, 227, 0.5)', // 100% 处的颜色
                                },
                                {
                                    offset: 1,
                                    color: 'rgba(4, 247, 227, 0.0)', // 100% 处的颜色
                                },
                            ],
                            global: false, // 缺省为 false
                        },
                        // borderColor:'rgba(0, 170, 255, 0.9)',
                        shadowColor: 'rgba(255, 255, 255, 0.5)',
                        shadowBlur: 10,
                    },
                },
                data: [709, 1917, 2455, 2610, 1719, 1433],
            },
            {
                name: '最小值',
                type: 'bar',
                barWidth: 14,
                barGap: '85%',
                label: {
                    show: false,
                    position: 'top',
                    fontSize: 14,
                    // fontWeight: 'bold',
                    color: 'rgba(255, 255, 255, 1)',
                },
                itemStyle: {
                    normal: {
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [
                                {
                                    offset: 0,
                                    color: 'rgba(33, 187, 251, 0.5)', // 0% 处的颜色
                                },
                                {
                                    offset: 0.5,
                                    color: 'rgba(33, 187, 251, 0.3)', // 100% 处的颜色
                                },
                                {
                                    offset: 1,
                                    color: 'rgba(33, 187, 251, 0)', // 100% 处的颜色
                                },
                            ],
                            global: false, // 缺省为 false
                        },
                        shadowColor: 'rgba(255, 255, 255, 0.5)',
                        shadowBlur: 10,
                    },
                },
                data: [300, 500, 700, 400, 600, 1200],
            },
        ],
    };
    // 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.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 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() {
    // 移除各种高亮
    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;
}

// 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');
        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: 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: 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: -12%;
        top: 50%;
        transform: translate(-50%, -50%);
        font-size: 30px;
        color: #ccc;
    }
    .leftTop {
        width: 100%;
        display: flex;
        flex-direction: column;
        .production {
            width: 100%;
            height: 125px;
            padding: 0 37px;
            display: flex;
            font-size: 18px;
            font-weight: 400;
            letter-spacing: 0px;
            color: rgba(255, 255, 255, 1);
            text-align: center;
            vertical-align: top;
            span {
                font-size: 48px;
                font-weight: 700;
                letter-spacing: 0px;
                line-height: 48px;
                color: rgba(255, 255, 255, 1);
            }
            .leftProduction {
                flex: 1;
                height: 100%;
                margin-right: 20px;
                background: url('@/assets/images/production.png');
                background-repeat: no-repeat;
                background-size: 100% 100%;
                background-position-y: 20px;
            }
            .rightProduction {
                flex: 1;
                height: 100%;
                background: url('@/assets/images/production.png');
                background-repeat: no-repeat;
                background-size: 100% 100%;
                background-position-y: 20px;
            }
        }
        .areaDiv {
            width: 100%;
            height: 327px;
            opacity: 1;
            display: flex;
            padding: 1px;
            justify-content: center;
        }

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

        .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: 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: 40%;
        opacity: 1;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;

        .farmlandDiv {
            width: 100%;
            height: 340px;
            opacity: 1;
            display: flex;
            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);
            }
        }

        .ASdivision {
            width: 100%;
            height: 368px;
            opacity: 1;
            display: flex;
            justify-content: center;
        }
    }
}

.legend {
    position: absolute;
    right: 25%;
    bottom: 7%;
    width: 129px;
    border: 1px solid rgba(4, 153, 153, 1);

    // height: 50px;
    :deep(.el-collapse-item__header) {
        background: rgba(2, 31, 26, 0.6);
        color: rgba(255, 255, 255, 1);
        text-align: center;
        padding: 0 30px;
        font-size: 14px;
    }

    --el-collapse-content-bg-color {
        background: rgba(2, 31, 26, 0.6);
    }

    :deep(.el-collapse-item__content) {
        background: rgba(2, 31, 26, 0.6);
        padding: 0 10px;
        padding-bottom: 10px;
    }

    --el-collapse-border-color: none;
    --el-collapse-content-bg-color: none;

    // 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 + 20px + 8vw);
    left: -2%;
    right: 0;
    margin: auto;
    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;
    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) {
}
</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;
}
</style>