<template>
    <div class="center">
        <div style="width: 100%; height: 100%" id="cesiumContainer"></div>
        <div class="rightWra">
            <div class="tabar">
                <div :class="tabrFlag ? 'tabarS' : ''" @click="tabRightWra(true)">行政区划</div>
                <div :class="!tabrFlag ? 'tabarS' : ''" @click="tabRightWra(false)">高标准农田</div>
            </div>
            <div class="rightbottom" v-show="tabrFlag">
                <div class="title">
                    <div
                        style="
                            width: 3px;
                            height: 19px;
                            opacity: 1;
                            background: rgba(100, 195, 164, 1);
                            margin-right: 12px;
                        "
                    ></div>
                    <span>撂荒耕地面积统计</span>
                    <p @click="Deta()">
                        下载 &nbsp;
                        <img
                            src="@/assets/icons/svg/downloads.svg"
                            style="width: 14px; height: 14px; cursor: pointer"
                        />
                    </p>
                </div>
                <el-select
                    v-if="limits"
                    popper-class="select_city"
                    v-model="value"
                    clearable
                    placeholder="全部"
                >
                    <el-option
                        v-for="item in Township.arr"
                        :key="item.subregionCode"
                        :label="item.subregionName"
                        :value="item.subregionCode"
                    />
                </el-select>
                <div ref="ASdivisionDiv" class="ASdivision"></div>
            </div>
            <div class="rightbottom" v-show="tabrFlag">
                <div class="title">
                    <div
                        style="
                            width: 3px;
                            height: 19px;
                            opacity: 1;
                            background: rgba(100, 195, 164, 1);
                            margin-right: 12px;
                        "
                    ></div>
                    <span>撂荒耕地面积占比</span>
                </div>
                <div ref="typesofDiv" class="typesofDiv"></div>
            </div>
            <div v-show="!tabrFlag" class="rightTop">
                <div class="title">
                    <div
                        style="
                            width: 3px;
                            height: 19px;
                            opacity: 1;
                            background: rgba(100, 195, 164, 1);
                            margin-right: 12px;
                        "
                    ></div>
                    <span>高标准农田</span>
                    <p @click="Deta3()" v-if="limits">
                        下载 &nbsp;
                        <img
                            src="@/assets/icons/svg/downloads.svg"
                            style="width: 14px; height: 14px; cursor: pointer"
                        />
                    </p>
                </div>
                <div v-show="limits" ref="farmlandDiv" class="farmlandDiv"></div>
                <div v-if="!limits">
                    <img src="@/assets/images/qx.png" />
                </div>
            </div>
            <div class="rightFoldDiv" @click="rightFoldClick()">
                <el-tooltip
                    :disabled="!rightWraFlag"
                    hide-after="0"
                    :show-arrow="false"
                    show-after="200"
                    class="box-item"
                    effect="dark"
                    content="收起"
                    placement="top"
                >
                    <el-icon v-if="rightWraFlag">
                        <img src="@/assets/images/shouhuis.png" />
                    </el-icon>
                </el-tooltip>
                <el-tooltip
                    :disabled="rightWraFlag"
                    hide-after="0"
                    :show-arrow="false"
                    show-after="200"
                    class="box-item"
                    effect="dark"
                    content="展开"
                    placement="top"
                >
                    <el-icon v-if="!rightWraFlag">
                        <img src="@/assets/images/zhankaiss.png" />
                    </el-icon>
                </el-tooltip>
            </div>
        </div>
        <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"
                            :v-model="value.disabled"
                            :disabled="value.disabled"
                            :label="item"
                        >
                            <span
                                :style="{
                                    background: value.color,
                                    border: `1px solid ${value.color}`,
                                    width: `10px`,
                                    height: `10px`,
                                    display: `flex`,
                                    'margin-right': `5px`,
                                }"
                            ></span>
                            {{ item }}
                        </el-checkbox>
                    </el-checkbox-group>
                </div>
            </el-collapse-item>
        </el-collapse>
        <div class="bottom_center">
            <TimeLine
                v-if="dataSource.length > 0"
                :dataSource="dataSource"
                @dataHandle="handleData"
                :allCount="allCount"
                @getcurrentPage="getcurrentPage"
            />
        </div>
        <div class="tool">
            <span><img src="@/assets/images/LAYER.png" alt="" /></span>
            <span><img src="@/assets/images/amplify.png" alt="" /></span>
            <span><img src="@/assets/images/reduce.png" alt="" /></span>
            <span><img src="@/assets/images/measure.png" alt="" /></span>
            <span><img src="@/assets/images/face.png" alt="" /></span>
            <span><img src="@/assets/images/position.png" alt="" /></span>
        </div>
        <div id="popup" class="ol-popup">
            <div class="pophead" style="width: 100%">
                <div
                    id="popup-title"
                    style="
                        font-size: 20px;
                        font-weight: 400;
                        letter-spacing: 1px;
                        line-height: 42px;
                        padding-left: 15px;
                        border-radius: 8px;
                        margin: 20px;
                        background: rgba(100, 195, 164, 0.05);
                    "
                ></div>
                <a href="#" id="popup-closer" class="ol-popup-closer"></a>
            </div>
            <div id="popup-content" style="padding: 10px">
                <div class="perform" v-for="(item, index) in alterArr" :key="index">
                    <div class="perform_children">
                        <div class="label">撂荒地：</div>
                        <span>{{ Number(item.wasteland).toFixed(2) }}(亩)</span>
                    </div>
                </div>
            </div>
            <div id="popup-pagination"></div>
        </div>
        <el-button v-if="flag" class="back_button" @click="back()">返回</el-button>
    </div>
</template>

<script setup>
import { ref, onMounted, inject, watch } from 'vue';
import * as echarts from 'echarts';
import 'echarts-gl';
import TimeLine from '@/components/TimeLine/TimeLine.vue';
import { useEcharts } from '@/hooks/useEcharts';
import { downLoadFile } from '@/utils/download.js';
import {
    getAbandon,
    getNonFoodHuoChun,
    getAbandonChun,
    getCityAndCountZb,
    getLhdyear,
    getflHeith,
} from '@/api/plough/abandonedLand.js';
import axios from 'axios';
import elementResizeDetectorMaker from 'element-resize-detector';

let viewer = ref(null);
const ASdivisionDiv = ref(null);
const typesofDiv = ref(null);
let Township = reactive({ arr: [], brr: [], crr: [] }); //街道
let townArr = ref([]);
const value = ref('370211');
const flag = ref(false);
let rightWraFlag = ref(false);
const checkList = ref([]);
let checkListdata = ref([]);
let alterArr = ref([]);
let dataSource = ref([]);
let oldDatas = ref('');
let allCount = ref([]);
let currentPageS = ref('');
let pageSizeS = ref(5);
let timeArr = ref([]);
const farmlandDiv = ref(null);
let standardArr = ref([]);
let tabrFlag = ref(true);
let limits = window.localStorage.getItem('divisions').length > 6 ? false : true;
let code =
    window.localStorage.getItem('deptName') == '青岛西海岸新区'
        ? '黄岛区'
        : window.localStorage.getItem('deptName');
//下载
/*---------------------------*/
const Deta = item => {
    if (value.value == '370211') {
        getAbandon({ yearMonth: oldDatas.value.name, whetherToDownload: true }).then(res => {
            downLoadFile(res.data[res.data.length - 1].downloadPath);
        });
    } else {
        getAbandonChun({
            divisions: value.value,
            yearMonth: oldDatas.value.name,
            whetherToDownload: true,
        }).then(res => {
            downLoadFile(res.data[res.data.length - 1].downloadPath);
        });
    }
};
let dic = {
    撂荒地: { color: 'rgba(175, 110, 250, 0.8)', disabled: false },
};
// 图层字典
let layersDic = {
    撂荒地: {
        setOf: '2022-12-31-liaohuang',
        name: 'T2022_12_31_liaohuang',
    },
};
let layers = ref(null); //村
var data = {
    title: ['区域一', '区域二', '区域三', '区域四', '区域五', '区域六', '区域七', '区域八'],
    corn: [333.3, null, 500, 500, 333.3, null, 333.3, 500],
    soybean: [333.3, null, null, null, 333.3, null, 333.3, null],
    peanut: [333.3, 500, 500, null, 333.3, 500, 333.3, null],
    wheat: [null, 500, null, 500, null, 500, null, null],
    Blueberries: [null, null, null, null, null, null, null, 500],
};
let classData = [302034, 243990, 42344, 34234, 304235];
const options = [
    {
        value: 'Option1',
        label: 'Option1',
    },
    {
        value: 'Option2',
        label: 'Option2',
    },
];
// 组件挂载完成后执行
onMounted(() => {
    initonMounted();
    // checkList.value = Object.keys(dic.filter(item => !item.disabled))
});
// 初始化

function initonMounted() {
    getLhdyears();
    initmap(); //地图
    showDaChangArea();
    alter();
    getCityAndCountZbs();
    for (const key in dic) {
        if (dic[key].disabled !== true) {
            checkListdata.value.push(key);
        }
    }
    checkList.value = checkListdata.value;
    let rightWra = document.querySelector('.rightWra');
    rightWra.style.transform = 'translate(101%,0)';
}
onUpdated(() => {
    document.querySelector('.mode').style.display = 'none';
    window.document.querySelector('#screenfull').style.display = 'block';
});
watch(
    () => oldDatas.value,
    (val, oldVal) => {
        value.value = window.localStorage.getItem('divisions');
        getCityAndCountZbs(value.value, oldDatas.value.name);
        if (limits) {
            getAbandons(oldDatas.value.name);
        } else {
            getAbandonChuns(value.value, oldDatas.value.name);
        }
    }
);
const tabRightWra = flag => {
    tabrFlag.value = flag;
    if (flag) {
        typesof();
        ASdivision();
    } else {
        farmland()
    }
};
/*-------------地图------------------------*/
let map = ref(null);
let container = ref(null);
let content = ref(null);
let popupCloser = ref(null);
let overlay = ref(null);
function initmap() {
    // 获取父元素和地图容器
    var parentElement = document.querySelector('.center');
    var mapContainer = document.getElementById('cesiumContainer');
    map = new ol.Map({
        target: 'cesiumContainer',
        controls: [],
        view: new ol.View({
            center: [119.86763411957472, 35.88435182141938],
            zoom: 11,
            // 设置最大缩放级别
            maxZoom: 16.5,
            projection: 'EPSG:4326',
        }),
        layers: [
            new ol.layer.Tile({
                source: new ol.source.XYZ({
                    url: `${serverAPI.tiandituLayers}`,
                    projection: serverAPI.tiandituLayers == 'http://59.206.203.34/tileservice/SdRasterPubMap?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=sdimg2017&STYLE=default&TILEMATRIXSET=img2017&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&FORMAT=application%2Fpng'?'EPSG:4326':'EPSG:3857',
                }),
                preload: 20, // 设置预加载的瓦片数，这里是预加载当前级别和2个级别更低的瓦片
            }),
            //注记
            // new ol.layer.Tile({
            //     source: new ol.source.Tianditu({
            //         layerType: 'img',
            //         isLabel: true,
            //         key: '1d109683f4d84198e37a38c442d68311',
            //     }),
            // }),
        ],
    });
    cun();
    zhen();
    //滚轮控制村级矢量
    map.on('moveend', function (e) {
        var zoom = map.getView().getZoom(); //获取当前地图的缩放级别
        if (zoom >= 13) {
            layers.setVisible(true); //显示图层
        } else {
            layers.setVisible(false);
        }
    });
    map.on('singleclick', function (e) {
        var coodinate = e.coordinate;
        if (limits) {
            var lon = coodinate[0];
            var lat = coodinate[1];
            var view = map.getView();
            var zoom = map.getView().getZoom();
            view.animate({
                center: [lon, lat],
                duration: 1000,
            });
            if (zoom >= 13) {
                QueryData(
                    e,
                    'CJQY3702112019WGS84@huangdaoqu_bianjie',
                    `${serverAPI.geoserverUrl}/map-huangdaoqu_bianjie/rest/maps/CJQY3702112019WGS84%40huangdaoqu_bianjie`,
                    '村'
                );
            } else {
                QueryData(
                    e,
                    'XJQY3702112019WGS84@huangdaoqu_bianjie',
                    `${serverAPI.geoserverUrl}/map-huangdaoqu_bianjie/rest/maps/XJQY3702112019WGS84%40huangdaoqu_bianjie`,
                    '镇'
                );
            }
        } else {
            let url = `${serverAPI.geoserverUrl}/data-huangdaoqu_bianjie/rest/data`;
            let sqlParam = new ol.supermap.GetFeaturesBySQLParameters({
                queryParameter: {
                    name: 'XJQY3702112019WGS84@huangdaoqu_bianjie',
                    attributeFilter: `XJQYMC = '${code}'`,
                },
                datasetNames: ['huangdaoqu_bianjie:XJQY3702112019WGS84'],
            });
            new ol.supermap.FeatureService(url).getFeaturesBySQL(
                sqlParam,
                function (serviceResult) {
                    let geojson = new ol.format.GeoJSON().readFeatures(
                        serviceResult.result.features
                    );
                    let selectFeatureSource = new ol.source.Vector();
                    selectFeatureSource.addFeatures(geojson);
                    let vectorQuery = new ol.layer.Vector({
                        source: selectFeatureSource,
                    });
                    let features = vectorQuery.getSource().getFeatures();
                    for (var i = 0; i < features.length; i++) {
                        let polygon = features[i].getGeometry();
                        if (polygon.intersectsCoordinate(coodinate)) {
                            var lon = coodinate[0];
                            var lat = coodinate[1];
                            var view = map.getView();
                            var zoom = map.getView().getZoom();
                            view.animate({
                                center: [lon, lat],
                                duration: 1000,
                            });
                            if (zoom >= 13) {
                                QueryData(
                                    e,
                                    'CJQY3702112019WGS84@huangdaoqu_bianjie',
                                    `${serverAPI.geoserverUrl}/map-huangdaoqu_bianjie/rest/maps/CJQY3702112019WGS84%40huangdaoqu_bianjie`,
                                    '村'
                                );
                            } else {
                                QueryData(
                                    e,
                                    'XJQY3702112019WGS84@huangdaoqu_bianjie',
                                    `${serverAPI.geoserverUrl}/map-huangdaoqu_bianjie/rest/maps/XJQY3702112019WGS84%40huangdaoqu_bianjie`,
                                    '镇'
                                );
                            }
                        }
                    }
                }
            );
        }
    });
    // 监听父元素大小变化
    var resizeObserver = new ResizeObserver(function (entries) {
        entries.forEach(function (entry) {
            // 获取父元素的新大小
            var newWidth = entry.contentRect.width;
            var newHeight = entry.contentRect.height;

            // 调整地图容器的大小
            mapContainer.style.width = newWidth + 'px';
            mapContainer.style.height = newHeight + 'px';

            // 重新渲染地图
            map.updateSize();
        });
    });
    // 开始监听父元素大小变化
    resizeObserver.observe(parentElement);
    SQLSearch(code);
}
//权限地图
function SQLSearch(name) {
    let names = '';
    let url = '';
    let setName = '';
    let setOf = '';
    let quyu = '';
    url = `${serverAPI.geoserverUrl}/data-huangdaoqu_bianjie/rest/data`;
    names = name;

    setName = 'XJQY3702112019WGS84';
    setOf = 'huangdaoqu_bianjie';
    quyu = 'XJQYMC';
    //SQL查询（模糊查询）
    // var url = 'http://192.168.0.113:8090/iserver/services/data-liangquhuadingWGS84/rest/data';
    var sqlParam = new ol.supermap.GetFeaturesBySQLParameters({
        queryParameter: {
            name: `${setName}@${setOf}`,
            attributeFilter: `${quyu} like '%${names}%'`,
        },
        datasetNames: [`${setOf}:${setName}`],
    });

    new ol.supermap.FeatureService(url).getFeaturesBySQL(sqlParam, function (serviceResult) {
        if (serviceResult.result.featureCount != 0) {
            var layerzhezhao = map
                .getLayers()
                .getArray()
                .find(layer => layer.get('id') === 'zhezhao');
            map.removeLayer(layerzhezhao);
            var layergaoliang = map
                .getLayers()
                .getArray()
                .find(layer => layer.get('id') === 'dianjigaoliang');
            map.removeLayer(layergaoliang);
            var geojson = new ol.format.GeoJSON().readFeatures(serviceResult.result.features);
            addConver(
                serviceResult.result.features.features[0].geometry.coordinates,
                'qu',
                'rgba( 105, 105, 105, 1)',
                9999
            );
            var selectFeatureSource = new ol.source.Vector();
            selectFeatureSource.addFeatures(geojson);
            //设置图层高亮样式
            const style = new ol.style.Style({
                // fill: new ol.style.Fill({
                //     color: 'rgba(0, 255, 0, 0.1)',
                // }),
                stroke: new ol.style.Stroke({
                    color: 'rgba(85, 255, 255, 1.0)',
                    // lineDash: [10, 10],
                    width: 2,
                }),
            });
            var vectorQuery = new ol.layer.Vector({
                id: 'dianjigaoliang',
                source: selectFeatureSource,
            });
            vectorQuery.setStyle(style);
            map.addLayer(vectorQuery);
            map.getView().fit(selectFeatureSource.getExtent());
        }
    });
}
const cun = () => {
    layers = new ol.layer.Tile({
        source: new ol.source.TileSuperMapRest({
            url: serverAPI.geoserverUrl + `/map-huangdaoqu_bianjie/rest/maps/CJQY3702112019WGS84%40huangdaoqu_bianjie`,
            cacheEnabled: false,
        }),
        name: 'CJQY3702112019WGS84',
        projection: 'EPSG:4326', //3857
        zIndex: 9999,
    });
    map.addLayer(layers);
};
const zhen = () => {
    var layer = new ol.layer.Tile({
        source: new ol.source.TileSuperMapRest({
            url: serverAPI.geoserverUrl + `/map-huangdaoqu_bianjie/rest/maps/XJQY3702112019WGS84%40huangdaoqu_bianjie`,
            cacheEnabled: false,
        }),
        name: 'XJQY3702112019WGS84',
        projection: 'EPSG:4326', //3857
        zIndex: 9999,
    });
    map.addLayer(layer);
};

const addwms = name => {
    let layer = new ol.layer.Tile({
        source: new ol.source.TileSuperMapRest({
            // url: 'http://36.134.44.75:8090/iserver/services/map-huangdaoqu_village/rest/maps/huangdaoqu_village@huangdaoqu_village',
            url: serverAPI.geoserverUrl + `/map-${name.setOf}/rest/maps/${name.name}@${name.setOf}`,
            //rasterfunction: new SuperMap.NDVIParameter({ redIndex: 0, nirIndex: 2 }),
            cacheEnabled: false,
        }),
        name: name.name,
        projection: 'EPSG:4326', //3857
    });
    map.addLayer(layer);
};

function QueryData(e, name, url, item) {
    let newDataZh = [];
    var point = new ol.geom.Point(e.coordinate);
    var param = new ol.supermap.QueryByGeometryParameters({
        queryParams: {
            name: name,
        },
        geometry: point,
    });
    let titleDiv = document.querySelector('#popup-title');
    let layergaoliang = ref(null);
    let layerzhezhao = ref(null);
    new ol.supermap.QueryService(url).queryByGeometry(param, function (data) {
        layerzhezhao = map
            .getLayers()
            .getArray()
            .find(layer => layer.get('id') === 'zhezhao');
        map.removeLayer(layerzhezhao);
        let name = '';
        if (item == '镇' && data.result.recordsets[0].features.features[0].properties.XJQYDM) {
            let code = data.result.recordsets[0].features.features[0].properties.XJQYDM;
            value.value = code;
            let arr = [];
            getAbandon({ yearMonth: oldDatas.value.name }).then(res => {
                res.data.forEach(item => {
                    if (item.subregionCode == code) {
                        name = item.subregionName;
                        arr.push(item);
                    }
                });
                alter();
                alterArr.value = arr;
            });
        } else if (
            item == '村' &&
            data.result.recordsets[0].features.features[0].properties.CJQYDM
        ) {
            let code = data.result.recordsets[0].features.features[0].properties.CJQYDM;
            let arr = [];
            getNonFoodHuoChun({ divisions: code, yearMonth: oldDatas.value.name }).then(res => {
                res.data.forEach(item => {
                    if (item.subregionCode == code) {
                        name = item.subregionName;
                        arr.push(item);
                    }
                });
                alterArr.value = arr;
                alter();
            });
        }
        function alter() {
            if (data.result.currentCount > 0) {
                if (data.result.recordsets[0].features) {
                    overlay.setPosition(point.flatCoordinates);
                    titleDiv.innerHTML = name;
                }
                layergaoliang = map
                    .getLayers()
                    .getArray()
                    .find(layer => layer.get('id') === 'dianjigaoliang');
                map.removeLayer(layergaoliang);
                var llll = new ol.format.GeoJSON().readFeatures(data.result.recordsets[0].features);
                newDataZh = data.result.recordsets[0].features.features[0].geometry.coordinates;
                addConver(data.result.recordsets[0].features.features[0].geometry.coordinates);
                var selectFeatureSource = new ol.source.Vector();
                selectFeatureSource.addFeatures(llll);
                const style = new ol.style.Style({
                    // fill: new ol.style.Fill({
                    //     color: 'rgba(255, 219, 113, 0.3)',
                    // }),
                    stroke: new ol.style.Stroke({
                        color: 'rgba(255, 219, 113, 1.0)',
                        // lineDash: [10, 10],
                        width: 5,
                    }),
                });
                var vectorQuery = new ol.layer.Vector({
                    id: 'dianjigaoliang',
                    source: selectFeatureSource,
                    zIndex: 9999,
                });
                vectorQuery.setStyle(style);
                map.addLayer(vectorQuery);
            }
        }
    });
    popupCloser.addEventListener('click', function () {
        layerzhezhao = map
            .getLayers()
            .getArray()
            .find(layer => layer.get('id') === 'zhezhao');
        map.removeLayer(layerzhezhao);
        erase(newDataZh);
        value.value = window.localStorage.getItem('divisions');
        layergaoliang = map
            .getLayers()
            .getArray()
            .find(layer => layer.get('id') === 'dianjigaoliang');
        map.removeLayer(layergaoliang);
        overlay.setPosition(undefined);
    });
}
// 弹窗
const alter = () => {
    container = document.getElementById('popup');
    //拿到弹出框内容元素
    content = document.getElementById('popup-content');
    //拿到弹出框关闭元素
    popupCloser = document.getElementById('popup-closer');
    //创建弹出框容器
    overlay = new ol.Overlay({
        element: document.getElementById('popup'), // 弹框容器的id
        positioning: 'bottom-center',
        stopEvent: true,
        offset: [0, -10],
    });
    map.addOverlay(overlay);
};
//创建蒙层，凸显黄岛区域
function showDaChangArea() {
    axios.get('/json/huangdao.json').then(({ data }) => {
        const fts = new ol.format.GeoJSON().readFeatures(data);
        const ft = fts[0];
        // addConver(ft.getGeometry().getCoordinates(), 'huandao');
    });
}
//添加遮罩
function addConver(data, name, color, index) {
    let source = new ol.source.Vector();
    var converLayer = new ol.layer.Vector({
        id: name ? name : 'zhezhao',
        source: source,
        zIndex: index ? index : 50,
        style: new ol.style.Style({
            fill: new ol.style.Fill({
                color: color ? color : 'rgba( 105, 105, 105, 0.9)',
            }),
        }),
    });
    const converGeom = erase(data);
    const convertFt = new ol.Feature({
        geometry: converGeom,
    });
    converLayer.getSource().addFeature(convertFt);
    map.addLayer(converLayer);
}

//擦除操作，生产遮罩范围
function erase(data) {
    const extent = [-180, -90, 180, 90];
    const polygonRing = ol.geom.Polygon.fromExtent(extent);
    const coords = data;
    coords.forEach(coord => {
        const linearRing = new ol.geom.LinearRing(coord[0]);
        polygonRing.appendLinearRing(linearRing);
    });
    return polygonRing;
}
watch(
    () => value.value,
    () => {
        selectTab();
    }
);
// 农作物
watch(
    () => checkList.value,
    (val, oldVal) => {
        if (val.length > oldVal.length) {
            // 挑选出增多的数据
            const newData = val.filter(item => {
                const index = oldVal.findIndex(it => it === item);
                if (index < 0) {
                    return item;
                }
            });
            newData.forEach(item => {
                if (layersDic[item]) {
                    addwms(layersDic[item]);
                }
            });
            // 添加镇级矢量
        } else if (val.length < oldVal.length) {
            // 挑选出减少的数据
            const newData = oldVal.filter(item => {
                const index = val.findIndex(it => it === item);
                if (index < 0) {
                    return item;
                }
            });
            newData.forEach(item => {
                if (layersDic[item]) {
                    // 假设要删除的图层为 layerToRemove
                    var index = map.getLayers().getArray().indexOf(layersDic[item].name);
                    map.getLayers()
                        .getArray()
                        .forEach((ite, index) => {
                            if (ite.A.name) {
                                if (ite.A.name == layersDic[item].name) {
                                    map.getLayers().removeAt(index);
                                }
                            }
                        });
                }
            });
        }
    }
);

//折叠
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(101%,0)';
    }
}

//接口
const getcurrentPage = params => {
    dataSource.value = timeArr.value.slice(
        (params - 1) * pageSizeS.value,
        params * pageSizeS.value
    );
};
//时间

const getLhdyears = () => {
    getLhdyear().then(res => {
        oldDatas.value = { name: res.data[res.data.length - 1] };
        let arr = [];
        res.data.forEach(item => {
            arr.push({ name: item });
        });
        timeArr.value = arr;
        allCount.value = Math.ceil(timeArr.value.length / 5); //总页数
        currentPageS = Math.ceil(arr.length / 5); //当前页
        dataSource.value = timeArr.value.slice(
            (currentPageS - 1) * pageSizeS.value,
            currentPageS * pageSizeS.value
        );
        getflHeiths();
    });
};
//非粮高标准
const getflHeiths = () => {
    getflHeith({ divisions: '370211', yearMonth: oldDatas.value.name }).then(res => {
        standardArr.value = res.data;
        if (res.data.length > 0) {
            farmland();
        }
    });
};

const Deta3 = item => {
    getflHeith({
        divisions: '370211',
        yearMonth: oldDatas.value.name,
        whetherToDownload: true,
    }).then(res => {
        downLoadFile(res.data[res.data.length - 1].downloadPath);
    });
};
//镇
const getAbandons = time => {
    getAbandon({ yearMonth: time }).then(res => {
        Township.arr = [];
        townArr.value = [];
        res.data.forEach(item => {
            if (item.wasteland > 0) {
                Township.arr.push(item);
                townArr.value.push(item);
            }
        });
        // Township.arr = res.data;
        Township.arr.unshift({
            subregionCode: '370211',
            subregionName: '全部',
        });
        let arr = [...res.data];
        let brr = [];
        arr.splice(0, 1);
        arr.forEach(item => {
            brr.push(item.subregionCode);
        });
        data.title = [...Object.values(brr)];
        ASdivision(Township.arr);
        typesof();
    });
};
//村
const getAbandonChuns = (city, time) => {
    getAbandonChun({ divisions: city, yearMonth: time }).then(res => {
        townArr.value = [];
        res.data.forEach(item => {
            if (item.wasteland > 0) {
                townArr.value.push(item);
            }
        });
        ASdivision();
        typesof();
    });
};
//占比
const getCityAndCountZbs = (city, time) => {
    getCityAndCountZb({ divisions: city, yearMonth: time }).then(res => {
        
    });
};

const selectTab = () => {
    if (value.value == '370211') {
        //全部
        getAbandons(oldDatas.value.name);
    } else if (value.value) {
        getAbandonChuns(value.value, oldDatas.value.name);
    }
};
const handleData = oldData => {
    oldDatas.value = oldData;
};
// 图表点击事件
function ChartClick(item) {
    // 移除镇边界
    removeWms(['huangdaoqu_town'], true);
    removeWms(['shuzisannong:huangdaoqu_town']);
    selectTab();
    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', true);
    }
    // 定位到地块
    let features = formLandRef.value;
    features.forEach(it => {
        if (it.properties.name === item.name) {
            viewer.camera.flyTo({
                destination: Cesium.Rectangle.fromDegrees(
                    it.bbox[0],
                    it.bbox[1],
                    it.bbox[2],
                    it.bbox[3]
                ),
                duration: 2,
            });
        }
    });
    flag.value = true;
}

function ASdivision() {
    const ASdivisionDivIntance = echarts.init(ASdivisionDiv.value);
    townArr.value.sort((a, b) => {
        return b.wasteland - a.wasteland;
    });
    var nameList = [];
    var dataList = [];
    townArr.value.forEach(item => {
        nameList.push(item.subregionName);
        dataList.push(Number(item.wasteland).toFixed(2));
    });
    let ends = (3 / townArr.value.length) * 100;
    var option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                // 坐标轴指示器，坐标轴触发有效
                type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
            },
            // formatter: function (params) {
            //     let dot =
            //         '<span style="display:inline-block;margin-right:5px;border-radius:50%;width:10px;height:10px;background-color:#02C4DD"></span>';
            //     return params[0].name + '<br>' + '办结率 ：' + params[0].value + '%';
            // },
        },
        legend: {
            show: true,
            top: '10',
            right: '5%',
            textStyle: { color: 'rgba(153, 153, 153, 1)' },
            itemWidth: 20,
            itemHeight: 12.5,
            icon: 'rect',
            backgroundColor: 'transparent',
        },
        dataZoom: [
            {
                type: 'slider',
                width: '40%',
                zoomLock: true,
                top: '90%',
                start: 0,
                end: ends,
                show: false,
                showDataShadow: false,
                showDetail: false,
                fillerColor: 'rgba(64, 158, 255)',
                borderRadius: '50%',
                moveHandleSize: 0,
                moveHandleStyle: {},
                left: '35%',
                height: 12,
                handleSize: '80%',
                handleIcon: 'path://M512,512m-448,0a448,448,0,1,0,896,0a448,448,0,1,0,-896,0Z',
                handleStyle: {
                    borderWidth: 0,
                    color: 'rgba(64, 158, 255)',
                },
            },
            {
                type: 'inside',
            },
        ],
        grid: {
            left: '5%',
            right: '5%',
            bottom: '9%',
            top: '10%',
            containLabel: true,
        },
        xAxis: {
            data: nameList,
            triggerEvent: true,
            axisTick: {
                show: false,
            },
            axisLine: {
                show: true,
                lineStyle: {
                    color: '#70F5FE',
                },
            },
            axisLabel: {
                show: true,
                rotate: 0,
                interval: 0,
                textStyle: {
                    padding: [8, 0, 0, 0],
                    fontSize: 14,
                    color: 'rgba(153, 153, 153, 1)',
                },
            },
        },
        yAxis: {
            name: '面积(亩)',
            triggerEvent: true,
            nameTextStyle: {
                color: 'rgba(255,255,255,1)',
                fontSize: 16,
                padding: [0, 0, 10, -20],
            },
            splitLine: {
                show: true,
                lineStyle: {
                    color: '#A6D9F6',
                    type: 'dashed',
                },
            },
            axisTick: {
                show: false,
            },
            axisLine: {
                show: false,
            },
            axisLabel: {
                show: true,
                textStyle: {
                    color: 'rgba(153, 153, 153, 1)',
                    fontSize: 14,
                },
            },
        },
        series: [
            {
                name: '面积(亩)',
                barMinHeight: 10,
                type: 'pictorialBar',
                barCategoryGap: '60%',
                symbolOffset: [1, -5],
                symbol: 'path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z',
                itemStyle: {
                    normal: {
                        //渐变色
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            {
                                offset: 0,
                                color: 'rgba(106, 137, 226, 1)',
                            },
                            {
                                offset: 0.7,
                                color: 'rgba(106, 137, 226, 1)',
                            },
                            {
                                offset: 1,
                                color: 'rgba(106, 137, 226, 0.05)',
                            },
                        ]),
                    },
                },
                label: {
                    show: true,
                    position: 'top',
                    textStyle: {
                        color: '#ffffff',
                    },
                },
                data: dataList,
                z: 0,
            },
        ],
    };
    // option && ASdivisionDivIntance.setOption(option, true);
    useEcharts(ASdivisionDivIntance, option);
    let erd = elementResizeDetectorMaker();
    erd.listenTo(ASdivisionDiv.value, () => {
        nextTick(() => {
            ASdivisionDivIntance.resize();
        });
    });
}
function typesof() {
    const typesofDivIntance = echarts.init(typesofDiv.value);
    let data = townArr.value;
    let totalArea = 0;
    data.forEach(item => {
        (item.name = item.subregionName), (item.value = Number(item.wasteland).toFixed(2));
        totalArea += item.wasteland;
    });
    let option = {
        color: [
            'rgba(49, 235, 7, 1)',
            'rgba(84, 170, 255, 1)',
            'rgba(255, 251, 0, 1)',
            'rgba(255, 168, 8, 1)',
            'rgba(255, 0, 255, 1)',
        ],
        title: {
            text: '撂荒耕地总面积',
            subtext: `${totalArea.toFixed(2)}亩`,
            textStyle: {
                color: 'rgba(51, 51, 51, 1)',
                fontSize: 14,
                // align: 'center'
            },
            subtextStyle: {
                fontSize: 14,
                color: ['#ff9d19'],
            },
            x: 'center',
            y: 'center',
        },
        grid: {
            top: 0,
        },
        // legend: {
        //     orient: 'vertical',
        //     top: 'middle',
        //     right: '2%',
        //     textStyle: {
        //         color: '#f2f2f2',
        //         fontSize: 14,
        //     },
        //     icon: 'roundRect',
        //     data: data,
        // },
        tooltip: {
            //提示框组件
            trigger: 'item', //item数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。
            axisPointer: {
                // 坐标轴指示器，坐标轴触发有效
                type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
            },
            formatter: '{a} <br/>{b} : {c}亩 <br/>百分比 : {d}%', //{a}（系列名称），{b}（数据项名称），{c}（数值）, {d}（百分比）
        },
        series: [
            // 主要展示层的
            {
                radius: ['50%', '71%'],
                center: ['50%', '50%'],
                type: 'pie',
                label: {
                    normal: {
                        show: false,
                    },
                },
                labelLine: {
                    normal: {
                        show: false,
                    },
                },
                name: '撂荒耕地面积占比',
                data: data,
            },
            // 边框的设置
            {
                radius: ['50%', '54%'],
                center: ['50%', '50%'],
                type: 'pie',
                label: {
                    normal: {
                        show: false,
                    },
                    emphasis: {
                        show: false,
                    },
                },
                labelLine: {
                    normal: {
                        show: false,
                    },
                    emphasis: {
                        show: false,
                    },
                },
                animation: false,
                tooltip: {
                    show: false,
                },
                data: [
                    {
                        value: 1,
                        itemStyle: {
                            color: 'rgba(250,250,250,0.3)',
                        },
                    },
                ],
            },
        ],
    };

    useEcharts(typesofDivIntance, option);
    let erd = elementResizeDetectorMaker();
    erd.listenTo(typesofDiv.value, () => {
        nextTick(() => {
            typesofDivIntance.resize();
        });
    });
}
function farmland() {
    const farmlandDivIntance = echarts.init(farmlandDiv.value);
    let subNameArr = [];
    let wheatUnitOutputValueArr = [];
    let wheatOutputArr = [];
    standardArr.value.forEach(item => {
        subNameArr.push(item.subregionName);
        wheatUnitOutputValueArr.push(item.wasteland);
    });
    let ends = (3 / subNameArr.length) * 100;
    let option = {
        tooltip: {
            trigger: 'axis',
            formatter: function (params, ticket, callback) {
                var res = params[0].name;

                for (var i = 0, l = params.length; i < l; i++) {
                    if (params[i].seriesType === 'line') {
                        res +=
                            '<br/>' +
                            params[i].seriesName +
                            ' : ' +
                            (params[i].value ? params[i].value : '-') +
                            'h';
                    } else {
                        res +=
                            '<br/>' +
                            params[i].seriesName +
                            ' : ' +
                            (params[i].value ? params[i].value : '-') +
                            '';
                    }
                }
                return res;
            },
        },
        grid: {
            top: '15%',
            bottom: '15%',
            left: '15%',
            right: '10%',
        },
        dataZoom: [
            {
                show: false, //隐藏或显示（true）组件
                type: 'slider',
                width: '40%',
                zoomLock: false,
                top: '90%',
                start: 0,
                end: ends,
                showDataShadow: false,
                showDetail: false,
                fillerColor: 'rgba(64, 158, 255)',
                borderRadius: '50%',
                moveHandleSize: 0,
                moveHandleStyle: {},
                left: '35%',
                height: 12,
                handleSize: '80%',
                handleIcon: 'path://M512,512m-448,0a448,448,0,1,0,896,0a448,448,0,1,0,-896,0Z',
                handleStyle: {
                    borderWidth: 0,
                    color: 'rgba(64, 158, 255)',
                },
            },
            {
                type: 'inside',
            },
        ],
        // legend: {
        //     data: ['单产量', '总产量'],
        //     textStyle: {
        //         color: 'rgba(153, 153, 153, 1)',
        //         fontSize: 12,
        //     },
        //     type: 'scroll',
        //     top: '3%',
        // },
        xAxis: [
            {
                type: 'category',
                nameTextStyle: {
                    fontSize: 12,
                },
                axisLabel: {
                    interval: 0,
                    formatter: function (value) {
                        var ret = ''; //拼接加\n返回的类目项
                        var maxLength = 5; //每项显示文字个数
                        var valLength = value.length; //X轴类目项的文字个数
                        var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数
                        if (rowN > 1) {
                            //如果类目项的文字大于5,
                            for (var i = 0; i < rowN; i++) {
                                var temp = ''; //每次截取的字符串
                                var start = i * maxLength; //开始截取的位置
                                var end = start + maxLength; //结束截取的位置
                                //这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
                                temp = value.substring(start, end) + '\n';
                                ret += temp; //凭借最终的字符串
                            }
                            return ret;
                        } else {
                            return value;
                        }
                    },
                },
                splitLine: {
                    show: false,
                },
                axisTick: {
                    show: false,
                },
                axisLine: {
                    lineStyle: {
                        color: 'rgba(153, 153, 153, 1)',
                    },
                },
                axisPointer: {
                    type: 'shadow',
                },
                data: subNameArr,
            },
        ],
        yAxis: [
            {
                type: 'value',
                name: '面积(亩)',
                splitLine: {
                    show: true,
                },
                nameTextStyle: {
                    fontSize: 12,
                },
                axisLabel: {
                    fontSize: 14,
                    relativeSize: -2,
                    formatter: '{value}',
                },
                axisLine: {
                    lineStyle: {
                        color: 'rgba(153, 153, 153, 1)',
                    },
                },
                splitLine: {
                    lineStyle: {
                        //分割线样式
                        type: 'dashed',
                        color: 'rgba(153, 153, 153, 1)',
                    },
                },
                min: 0,
                position: 'top',
            },
        ],
        series: [
            {
                name: '面积(亩)',
                type: 'bar',
                barWidth: '10%',
                yAxisIndex: 0,
                data: wheatUnitOutputValueArr,
                itemStyle: {
                    normal: {
                        barBorderRadius: 2,
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [
                                {
                                    offset: 0,
                                    color: 'rgba(64, 192, 87, 0.5)', // 0% 处的颜色
                                },
                                {
                                    offset: 1,
                                    color: 'rgba(64, 192, 87, 0.2)', // 100% 处的颜色
                                },
                            ],
                            global: false, // 缺省为 false
                        },
                        // borderColor:'rgba(0, 170, 255, 0.9)',
                        shadowColor: 'rgba(255, 255, 255, 0.5)',
                        shadowBlur: 10,
                    },
                },
            },
        ],
    };
    // areaDivIntance.off('click') //图表渲染前销毁点击事件,防止点击图标多次触发
    // farmlandDivIntance.on('click', param => ChartClick(param));
    option && farmlandDivIntance.setOption(option, { notMerge: true, grid: { bottom: 20 } });
    useEcharts(farmlandDivIntance, option);
    let erd = elementResizeDetectorMaker();
    erd.listenTo(farmlandDiv.value, () => {
        nextTick(() => {
            farmlandDivIntance.resize();
        });
    });
}
</script>

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

.center {
    width: 100%;
    height: 100%;
    .imgrotate {
        transform: rotate(180deg);
    }

    .title {
        width: 90%;
        margin: 15px;
        height: 37px;
        border-radius: 3px 3px, 0px, 0px;
        background: linear-gradient(90deg, rgba(208, 245, 233, 1) 0%, rgba(255, 255, 255, 1) 100%);
        font-size: 18px;
        font-weight: 700;
        line-height: 37px;
        padding-left: 16px;
        display: flex;
        align-items: center;
        cursor: pointer;

        span {
            width: 95%;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
            font-size: 16px;
            font-weight: 700;
            color: rgba(51, 51, 51, 1);
            background-clip: text;
            -webkit-background-clip: text;
        }

        p {
            width: 79px;
            height: 25px;
            border-radius: 20px;
            font-size: 14px;
            border-radius: 4px;
            background: rgba(100, 195, 164, 1);
            display: flex;
            color: rgba(255, 255, 255, 1);
            justify-content: center;
            align-items: center;
        }
    }
}

.leftWra {
    position: absolute;
    top: 10px;
    left: 20px;
    height: $height;
    width: 23%;
    background: rgba(2, 31, 26, 0.85);
    box-shadow: inset 0px 0px 15px 6px rgba(41, 255, 255, 0.5);
    transition: transform 1s;
    .leftFoldDiv {
        width: 30px;
        height: 30px;
        position: absolute;
        right: -14%;
        top: 50%;
        transform: translate(-50%, -50%);
        font-size: 30px;
        color: #ccc;
    }
    .leftTop {
        // height: 35%;
        max-width: calc(100% - 20px);
        display: flex;
        flex-direction: column;

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

    .leftbottom {
        height: 35%;
        display: flex;
        flex-direction: column;
        max-width: calc(100% - 7px);
        align-items: center;

        .typesofDiv {
            width: 375px;
            height: 397px;
            background: url('@/assets/images/bj1_00000_iSpt.png');
            background-repeat: no-repeat;
            background-size: 85% 85%;
            background-position: center;
        }
    }
}

.rightWra {
    position: absolute;
    top: 0px;
    right: 0px;
    width: 23%;
    height: calc(100vh - 98px);
    opacity: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: rgba(255, 255, 255, 1);
    box-shadow: -6px 0px 8px rgba(0, 0, 0, 0.1), 0px 0px 3px rgba(0, 0, 0, 0.09),
        0px 0px 6px rgba(0, 0, 0, 0.06), 0px 0px 9px rgba(0, 0, 0, 0.03);
    transition: transform 1s;
    .tabar {
        width: 90%;
        margin: 15px 15px 0 15px;
        height: 34px;
        display: flex;
        padding: 0 15px;
        justify-content: space-around;
        div {
            width: 45%;
            line-height: 34px;
            text-align: center;
            background: rgba(255, 255, 255, 1);
            border: 1px solid rgba(100, 195, 164, 1);
            font-size: 14px;
            font-weight: 400;
            letter-spacing: 0px;
            color: rgba(100, 195, 164, 1);
            border-radius: 4px;
            cursor: pointer;
        }
        .tabarS {
            background: rgba(100, 195, 164, 1);
            border: 1px solid rgba(100, 195, 164, 1);
            color: rgba(255, 255, 255, 1);
        }
    }
    .rightFoldDiv {
        width: 28px;
        height: 30px;
        position: absolute;
        left: 0;
        top: 50%;
        transform: translate(-100%, -50%);
        font-size: 30px;
        color: #ccc;
        cursor: pointer;
    }
    .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: calc(50% - 25px);
        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 #ccc !important;
            :deep(.el-input__wrapper) {
                // background-color: transparent;
                border-radius: 0;
                box-shadow: none;
            }
        }
        .typesofDiv {
            width: 100%;
            height: calc(100% - 67px);
            background-repeat: no-repeat;
            background-size: 85% 85%;
            background-position: center;
        }
        .ASdivision {
            width: 100%;
            height: calc(100% - 100px);
            opacity: 1;
            display: flex;
            justify-content: center;
        }

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

        :deep(.el-popper) {
            border: none !important;
            background: transparent !important;
        }
    }
}

.legend {
    position: absolute;
    right: 25%;
    bottom: 60px;
    width: 129px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 1);

    // height: 50px;
    :deep(.el-collapse-item__header) {
        border-radius: 4px;
        color: rgba(51, 51, 51, 1);
        font-size: 14px;
        font-weight: 400;
        text-align: center;
        padding: 0 30px;
        .el-icon {
            color: rgba(100, 195, 164, 1);
        }
    }

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

    :deep(.el-collapse-item__content) {
        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: #fff;
    // }
    :deep(.el-checkbox__label) {
        display: flex;
        align-items: center;
    }
}

.bottom_center {
    position: absolute;
    // left: calc(400px + 20px + 8vw);
    left: -2%;
    right: 0;
    margin: auto;
    width: 570px;
    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;
}

/*设置弹出框样式*/
.ol-popup {
    position: absolute;
    // background-color: #eeeeee;
    -webkit-filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
    filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
    // padding: 15px;
    border-radius: 10px;
    // border: 1px solid #cccccc;
    bottom: 12px;
    left: -50px;
    min-width: 280px;
}
.ol-popup:after,
.ol-popup:before {
    top: 100%;
    border: solid transparent;
    content: ' ';
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}
.ol-popup:after {
    border-top-color: #eeeeee;
    border-width: 10px;
    left: 48px;
    margin-left: -10px;
}
.ol-popup:before {
    border-top-color: #cccccc;
    border-width: 11px;
    left: 48px;
    margin-left: -11px;
}
.ol-popup-closer {
    text-decoration: none;
    position: absolute;
    top: 25px;
    right: 30px;
    color: rgba(100, 195, 164, 1) !important;
}
.ol-popup-closer:after {
    content: '✖';
    font-size: 18px;
}
#popup {
    border-radius: 8px;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 3px 6px -4px rgba(0, 0, 0, 0.12), 0px 6px 16px rgba(0, 0, 0, 0.08),
        0px 9px 28px 8px rgba(0, 0, 0, 0.05);
    .pophead {
        min-width: 315px;
        height: 42px;
        opacity: 1;
        border-radius: 8px;
        color: rgba(100, 195, 164, 1);
        .popup-title {
            min-width: 320px;
        }
    }
    #popup-content {
        width: 100% !important;
        width: max-content;
        opacity: 1;
        .perform_children {
            width: 195px;
            height: 28px;
            line-height: 28px;
            font-size: 14px;
            padding-left: 18px;
            display: flex;
            justify-content: flex-end;
            .label {
                color: rgba(63, 161, 128, 1);
            }
            span {
                color: rgba(51, 51, 51, 1);
                display: block;
                min-width: 100px;
                background: rgba(100, 195, 164, 0.1);
                box-shadow: inset 0px 1px 1px rgba(100, 195, 164, 0.5);
                text-align: center;
            }
        }
    }
}

.back_button {
    position: absolute;
    right: 30%;
    top: 20px;
}
</style>

<style lang="scss">
.select_city {
    background: #fff;
}

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

.el-popper {
    border: none !important;
    background: #fff !important;
    color: black !important;
}

.el-popper__arrow::before {
    display: none;
}
</style>
