<template>
    <div class="fatherDiv">
        <div class="centerBox">
            <div style="width: 100%; height: 100%" id="cesiumContainer"></div>
            <div class="leftWra">
                <div class="leftTop">
                    <div class="title">
                        <span>作物产量预估</span>
                        <p @click="Deta()">
                            下载 &nbsp;

                            <img
                                src="@/assets/icons/svg/downloads.svg"
                                style="width: 14px; height: 14px; cursor: pointer"
                            />
                        </p>
                    </div>
                    <div ref="areaDiv" class="areaDiv"></div>
                </div>

                <div class="leftFoldDiv" @click="leftFoldClick()">
                    <el-tooltip
                        class="box-item"
                        :show-arrow="false"
                        :disabled="leftWraFlag"
                        hide-after="0"
                        show-after="200"
                        effect="dark"
                        content="展开"
                        placement="top"
                    >
                        <img v-if="!leftWraFlag" src="@/assets/images/close1.png" alt="" />
                    </el-tooltip>
                    <el-tooltip
                        :disabled="!leftWraFlag"
                        :show-arrow="false"
                        class="box-item"
                        show-after="200"
                        hide-after="0"
                        effect="dark"
                        content="收起"
                        placement="top"
                    >
                        <img
                            class="imgrotate"
                            v-if="leftWraFlag"
                            src="@/assets/images/close1.png"
                            alt=""
                        />
                    </el-tooltip>
                </div>
            </div>
            <div class="rightWra">
                <div class="tool" @click="Back()">
                    <img src="@/assets/images/fh.png" />
                    <span>返回</span>
                </div>
                <div class="rightTop">
                    <div class="title">
                        <span>作物产量预估-高标准农田</span>
                        <p @click="Deta2()" v-if="limits">
                            下载 &nbsp;
                            <img
                                src="@/assets/icons/svg/downloads.svg"
                                style="width: 14px; height: 14px; cursor: pointer"
                            />
                        </p>
                    </div>
                    <div ref="farmlandDiv" class="farmlandDiv"></div>
                    <div v-if="!limits">
                        <img src='@/assets/images/qx.png' />
                    </div>
                </div>
                <div class="rightbottom">
                    <div class="title">
                        <span>作物长势等级统计-行政区划</span>
                        <p @click="Deta3()">
                            下载 &nbsp;
                            <img
                                src="@/assets/icons/svg/downloads.svg"
                                style="width: 14px; height: 14px; cursor: pointer"
                            />
                        </p>
                    </div>
                    <div ref="ASdivisionDiv" class="ASdivision"></div>
                </div>
                <div class="rightFoldDiv" @click="rightFoldClick()">
                    <el-tooltip
                        :disabled="!rightWraFlag"
                        :show-arrow="false"
                        hide-after="0"
                        show-after="200"
                        class="box-item"
                        effect="dark"
                        content="收起"
                        placement="top"
                    >
                        <img v-if="rightWraFlag" src="@/assets/images/close1.png" alt="" />
                    </el-tooltip>
                    <el-tooltip
                        :disabled="rightWraFlag"
                        :show-arrow="false"
                        hide-after="0"
                        show-after="200"
                        class="box-item"
                        effect="dark"
                        content="展开"
                        placement="top"
                    >
                        <img
                            class="imgrotate"
                            v-if="!rightWraFlag"
                            src="@/assets/images/close1.png"
                            alt=""
                        />
                    </el-tooltip>
                </div>
            </div>

            <div class="bottom_center">
                <TimeLine
                    v-if="dataSource.length > 0"
                    :dataSource="dataSource"
                    @dataHandle="handleData"
                />
            </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;
                            color: rgba(246, 255, 255, 1);
                            line-height: 42px;
                            padding-left: 45px;
                        "
                    ></div>
                    <a href="#" id="popup-closer" class="ol-popup-closer"></a>
                </div>
                <div id="popup-content" style="padding: 30px">
                    <p v-for="(item, index) in alterArr" :key="index">
                        <img src="@/assets/images/icon.png" />
                        <span class="label">单产量：</span>
                        <span>{{ item.wheatUnitOutputValue }}(公斤/亩)</span>
                    </p>
                    <p v-for="(item, index) in alterArr" :key="index">
                        <img src="@/assets/images/icon.png" />
                        <span class="label">总产量：</span>
                        <span>{{ item.wheatOutput }}（吨）</span>
                    </p>
                </div>
                <div id="popup-pagination"></div>
            </div>
            <div id="pop">
                <div>
                    <div class="rowWra">
                        <span>地区：</span>
                        <span>{{ regionName }}</span>
                    </div>
                    <div v-for="(item, index) in clickInfoMap.info" :key="index" class="rowWra">
                        <span>单产量：</span>
                        <span>{{ item.wheatUnitOutputValue }}公斤/亩</span>
                    </div>
                    <div v-for="(item, index) in clickInfoMap.info" :key="index" class="rowWra">
                        <span>总产量：</span>
                        <span>{{ item.wheatOutput }}亩</span>
                    </div>
                </div>
                <div class="cancel" @click="hiddenOverlayChart">X</div>
            </div>
            <el-button v-if="flag" class="back_button" @click="back()">返回</el-button>
        </div>
        <div class="tabulation">
            <div class="searchDiv">
                <el-form :inline="true" :model="formInline" class="demo-form-inline">
                    <el-form-item label="时间:">
                        <el-select
                            popper-class="selectCity"
                            v-model="formInline.time"
                            placeholder="请选择"
                        >
                            <el-option
                                v-for="(item, index) in timeArr"
                                :key="index"
                                :label="Zitem"
                                :value="item"
                            />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="统计方式:">
                        <el-select
                            popper-class="selectCity"
                            v-model="formInline.statistical"
                            placeholder="请选择"
                        >
                            <el-option label="镇级" value="镇" />
                            <el-option v-if="limits" label="高标准农田" value="高标准农田" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="作物种类">
                        <el-select
                            v-model="formInline.droughtRating"
                            popper-class="selectCity"
                            placeholder="请选择"
                        >
                            <el-option label="玉米" value="玉米" />
                            <!-- <el-option label="玉米" value="玉米" />
                            <el-option label="大豆" value="大豆" />
                            <el-option label="花生" value="花生" /> -->
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit">查询</el-button>
                        <el-button plain @click="resetForm" :disabled="!SwitchFlag ? true : false">
                            重置
                        </el-button>
                        <el-button v-if="!operate" type="primary" text @click="dowcity">
                            <img src="@/assets/images/dow.png" alt="" />
                            下载
                        </el-button>
                    </el-form-item>
                </el-form>
                <div class="modeDiv" @click="SwitchMode">
                    <div :class="SwitchFlag ? 'Selected' : ''">表格模式</div>
                    <div :class="SwitchFlag ? '' : 'Selecteds'">图表模式</div>
                </div>
            </div>
            <div v-show="SwitchFlag" class="tableBox">
                <div class="tableBorder">
                    <el-table
                        :data="amount"
                        :header-cell-style="{ 'text-align': 'center' }"
                        style="width: 100%"
                        highlight-current-row
                        header-row-class-name="tabth"
                        v-if="!operate"
                    >
                        <el-table-column align="center" prop="合计" width="80" />
                        <el-table-column
                            v-for="(item, index) in tableItemAll"
                            :key="index"
                            :prop="item.value"
                            :label="item.lable"
                            align="center"
                        />
                    </el-table>
                </div>
                <el-table
                    :data="tableNewData"
                    :header-cell-style="{ 'text-align': 'center' }"
                    height="80%"
                    highlight-current-row
                    header-row-class-name="tabth"
                >
                    <el-table-column
                        type="index"
                        width="80"
                        align="center"
                        label="序号"
                        :index="Nindex"
                    />
                    <el-table-column
                        v-for="(item, index) in tableItem"
                        :key="index"
                        :prop="item.value"
                        :label="item.lable"
                        align="center"
                    />
                </el-table>
                <div class="example-pagination-block">
                    共{{ insectarr.length }}条
                    <el-pagination
                        background
                        layout="prev, pager, next"
                        :total="insectarr.length"
                        :current-page="currentPage"
                        :page-size="pageSize"
                        @current-change="handleCurrentChange"
                    />
                </div>
            </div>
            <div v-show="!SwitchFlag" class="chartMode">
                <div ref="chartModeDiv" class="chartModeDiv"></div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted, inject, reactive, watch } from 'vue';
import * as echarts from 'echarts';
import TimeLine from '@/components/TimeLine/TimeLine.vue';
import * as xlsx from 'xlsx'; // Vue3 版本
import { useEcharts } from '@/hooks/useEcharts';
import {
    getwheatTotalYearValue,
    getwheatHeightStandardFarmland,
    getwheatGetAllTowns,
    getwheatGetAllVillages,
    getparameterEstimationYear,
    getparameterEstimation,
} from '@/api/crops/wheat.js';
import { getgarrison } from '@/api/crops/site.js';
import axios from 'axios';
import 'echarts-gl';
import { downLoadFile } from '@/utils/download.js';
import { useRouter } from 'vue-router';
import elementResizeDetectorMaker from 'element-resize-detector';

const router = useRouter();
let viewer = ref(null);
const areaDiv = ref(null);
const farmlandDiv = ref(null);
const ASdivisionDiv = ref(null);
const value = ref('');
value.value = window.localStorage.getItem('divisions');
let Township = reactive({ arr: [], brr: [], crr: [] }); //街道
const clickInfoMap = ref({ name: '', value: '' });
const formLandRef = ref([]);
const flag = ref(false);
let leftWraFlag = ref(true);
let rightWraFlag = ref(true);
let standardArr = ref([]);
let estimate = ref({});
let administration = ref([]);
const insectarr = ref([]);
let SwitchFlag = ref(true);
let timeArr = ref([]);
let currentPage = ref(1); //当前页
let pageSize = ref(12); //每页条数
let tableNewData = ref([]);
let tableItem = ref([]);
let tableItemAll = ref([]);
const num = ref(1);
let operate = ref(true);
const chartModeDiv = ref(null);
let regionName = ref('');
let dataSource = ref([]);
let oldDatas = ref('');
let alterArr = ref([]);
let paramCode = ref('');
let limits = window.localStorage.getItem('divisions').length > 6 ? false : true;
let code =
    window.localStorage.getItem('deptName') == '青岛西海岸新区'
        ? '黄岛区'
        : window.localStorage.getItem('deptName');
let amount = ref([
    {
        wheatUnitOutputValue: 0,
        wheatOutput: 0,
    },
]);
let yearTime = ref('');
//搜索
let formInline = ref({
    time: '',
    statistical: '镇',
    droughtRating: '玉米',
    area: num.value,
});
let layers = ref(null); //村

// 组件挂载完成后执行
onMounted(() => {
    initonMounted();
});

function initonMounted() {
    getparameterEstimationYears(); //年
    //地图
    initmap();
    showDaChangArea();
    alter();
    ASdivision();
}
onUpdated(() => {
    if (localStorage.getItem(router.currentRoute.value.path) == 'false') {
        document.querySelector('.mode').style.display = 'block';
        document.querySelector('.mode').innerText = '地图模式';
    } else {
        document.querySelector('.mode').style.display = 'block';
        document.querySelector('.mode').innerText = '列表模式';
    }
});
watch(
    () => oldDatas.value,
    (val, oldVal) => {
        value.value = window.localStorage.getItem('divisions');
        getwheatTotalYearValues(value.value, oldDatas.value.name); //作物产量预估
        getwheatHeightStandardFarmlands(value.value, oldDatas.value.name); //高标准农田
        getwheatGetAllTownss(value.value, oldDatas.value.name); //镇级
    }
);
/*-------------地图------------------------*/
let map = ref(null);
let container = ref(null);
let content = ref(null);
let popupCloser = ref(null);
let overlay = ref(null);
let center = [
    { 海青镇: [119.55673590487976, 35.65921960953274] },
    { 大场镇: [119.62381239722713, 35.66588089759648] },
    { 泊里镇: [119.74667707697716, 35.64649984120179] },
    { 琅琊镇: [119.87030449159289, 35.66431631585516] },
    { 大村镇: [119.69265171077753, 35.81549722988757] },
    { 藏马镇: [119.78396543008807, 35.76160172256371] },
    { 张家楼街道: [119.87512724002988, 35.80195653922014] },
    { 滨海街道: [119.97581635161251, 35.77818590595386] },
    { 隐珠街道: [120.02465043714614, 35.86822190145625] },
    { 珠海街道: [119.9054471577447, 35.868205749221545] },
    { 六汪镇: [119.76550614744232, 35.952002955399706] },
    { 铁山街道: [119.9003966708421, 35.940916580021934] },
    { 胶南街道: [119.99585866840519, 35.92909063508609] },
    { 灵山岛省级自然保护区: [120.16665402696374, 35.76466422432871] },
    { 灵山卫街道: [120.09901058402102, 35.93194068930856] },
    { 宝山镇: [119.87425420478907, 36.00930267491887] },
    { 王台街道: [119.99939657505232, 36.055865563101804] },
    { 红石崖街道: [120.09213798349893, 36.069986617313006] },
    { 辛安街道: [120.14491642202691, 36.008342604564874] },
    { 长江路街道: [120.16674794518045, 35.961185596094154] },
    { 黄岛街道: [120.19699376304628, 36.04732099123903] },
    { 灵珠山街道: [120.07050399805128, 36.00779971701293] },
    { 薛家岛街道: [120.2165772076387, 35.95291190919208] },
];
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.Tianditu({
                    layerType: 'img',
                    key: '1d109683f4d84198e37a38c442d68311',
                }),
            }),
            //注记
            // new ol.layer.Tile({
            //     source: new ol.source.Tianditu({
            //         layerType: 'img',
            //         isLabel: true,
            //         key: '1d109683f4d84198e37a38c442d68311',
            //     }),
            // }),
        ],
    });
    zhen();
    map.on('singleclick', function (e) {
        var coodinate = e.coordinate;
        if (limits) {
            var lon = coodinate[0];
            var lat = coodinate[1];
            var view = map.getView();
            view.animate({
                center: [lon, lat],
                duration: 1000,
            });
            let tabFlag = false;
            let arr = ['XJQY3702112019WGS84'];
            arr.forEach(item => {
                map.getLayers()
                    .getArray()
                    .forEach((ite, index) => {
                        if (item == ite.A.name) {
                            tabFlag = true;
                            return;
                        }
                    });
            });
            if (tabFlag) {
                QueryData(
                    e,
                    'XJQY3702112019WGS84@huangdaoqu_bianjie',
                    'http://36.134.44.75:8090/iserver/services/map-huangdaoqu_bianjie/rest/maps/XJQY3702112019WGS84%40huangdaoqu_bianjie',
                    '镇'
                );
            } else {
                let url =
                    'http://36.134.44.75:8090/iserver/services/data-2019-2022gaobiaozhunnongtian/rest/data';
                let sqlParam = new ol.supermap.GetFeaturesBySQLParameters({
                    queryParameter: {
                        name: 'T2019_2022高标准农田片区@2019-2022gaobiaozhunnongtian',
                        attributeFilter: `DKMC = '${paramCode.value}'`,
                    },
                    datasetNames: ['2019-2022gaobiaozhunnongtian:T2019_2022高标准农田片区'],
                });
                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)) {
                                QueryData(
                                    e,
                                    'T2019_2022高标准农田片区@2019-2022gaobiaozhunnongtian',
                                    'http://36.134.44.75:8090/iserver/services/map-2019-2022gaobiaozhunnongtian/rest/maps/T2019_2022%E9%AB%98%E6%A0%87%E5%87%86%E5%86%9C%E7%94%B0%E7%89%87%E5%8C%BA@2019-2022gaobiaozhunnongtian',
                                    '高标准'
                                );
                            }
                        }
                    }
                );
            }
        } else {
            let url = 'http://36.134.44.75:8090/iserver/services/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,
                            });
                            QueryData(
                                e,
                                'XJQY3702112019WGS84@huangdaoqu_bianjie',
                                'http://36.134.44.75:8090/iserver/services/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 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 = [];
            getwheatGetAllTowns({
                divisions: '370211',
                yearMonth: oldDatas.value.name,
                type: '玉米',
            }).then(res => {
                res.data.forEach(item => {
                    if (item.subregion == code) {
                        name = item.subName;
                        arr.push(item);
                    }
                });
                alterArr.value = arr;
                alter();
            });
        } else if (
            item == '高标准' &&
            data.result.recordsets[0].features.features[0].properties.DKMC
        ) {
            let code = data.result.recordsets[0].features.features[0].properties.DKMC;
            let arr = [];
            getwheatHeightStandardFarmland({
                yearMonth: oldDatas.value.name,
                type: '玉米',
            }).then(res => {
                res.data.forEach(item => {
                    if (item.subName == code) {
                        arr.push(item);
                    }
                });
                name = code;
                alterArr.value = arr;
                alter('gao');
            });
        }
        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);
                var popups = document.querySelectorAll('.alerDiv');
                for (var i = 0; i < popups.length; i++) {
                    var popup = popups[i];
                    // popup.parentNode.removeChild(popup);
                    popup.style.display = 'none';
                }
            }
        }
    });
    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);
        var popups = document.querySelectorAll('.alerDiv');
        for (var i = 0; i < popups.length; i++) {
            var popup = popups[i];
            // popup.parentNode.removeChild(popup);
            popup.style.display = 'block';
        }
    });
}

//添加遮罩
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 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 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;
}
// 弹窗
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);
};
let Back = () => {
    document.querySelector('.tool').style.display = 'none';
    cun();
    layers.setVisible(false);
    zhen();
    let arrs = [
        '2019-2022gaobiaozhunnongtian',
        'gbz',
        'dianjigaoliang',
        'dianjigaoliangs',
        'gao',
        'zhezhao',
    ];
    arrs.forEach(item => {
        map.getLayers()
            .getArray()
            .forEach((ite, index) => {
                if (ite.A.name == item || ite.A.id == item) {
                    map.getLayers().removeAt(index);
                }
            });
    });
    // let layerzhezhao = map
    //     .getLayers()
    //     .getArray()
    //     .find(layer => layer.get('id') === 'zhezhao');
    // map.removeLayer(layerzhezhao);
    // let layerzhezhaos = map
    //     .getLayers()
    //     .getArray()
    //     .find(layer => layer.get('id') === 'gbz');
    // map.removeLayer(layerzhezhaos);
    // var layergaoliang = map
    //     .getLayers()
    //     .getArray()
    //     .find(layer => layer.get('id') === 'dianjigaoliang');
    // map.removeLayer(layergaoliang);
    // var layergaoliang = map
    //     .getLayers()
    //     .getArray()
    //     .find(layer => layer.get('id') === 'dianjigaoliangs');
    // map.removeLayer(layergaoliang);
    var view = map.getView();
    view.animate({
        center: ['119.88661841637813', '35.85667692242919'], // 设置新的地图中心点坐标
        duration: 1000, // 动画过渡时间
        zoom: 11, // 设置新的地图缩放级别
    });
    var popups = document.querySelectorAll('.alerDiv');
    for (var i = 0; i < popups.length; i++) {
        var popup = popups[i];
        // popup.parentNode.removeChild(popup);
        popup.style.display = 'block';
    }
};
//权限地图
function SQLSearch(name) {
    let names = '';
    let url = '';
    let setName = '';
    let setOf = '';
    let quyu = '';
    url = 'http://36.134.44.75:8090/iserver/services/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: 'http://36.134.44.75:8090/iserver/services/map-huangdaoqu_bianjie/rest/maps/CJQY3702112019WGS84%40huangdaoqu_bianjie',
            //rasterfunction: new SuperMap.NDVIParameter({ redIndex: 0, nirIndex: 2 }),
            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: 'http://36.134.44.75:8090/iserver/services/map-huangdaoqu_bianjie/rest/maps/XJQY3702112019WGS84%40huangdaoqu_bianjie',
            //rasterfunction: new SuperMap.NDVIParameter({ redIndex: 0, nirIndex: 2 }),
            cacheEnabled: false,
        }),
        name: 'XJQY3702112019WGS84',
        projection: 'EPSG:4326', //3857
        zIndex: 9999,
    });
    map.addLayer(layer);
};
function SQLData(name) {
    let names = '';
    let url = '';
    let setName = '';
    let setOf = '';
    let quyu = '';
    url = 'http://36.134.44.75:8090/iserver/services/data-2019-2022gaobiaozhunnongtian/rest/data';
    names = name;
    setName = 'T2019_2022高标准农田片区';
    setOf = '2019-2022gaobiaozhunnongtian';
    quyu = 'DKMC';
    //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 layerzhezhaos = map
                .getLayers()
                .getArray()
                .find(layer => layer.get('id') === 'dianjigaoliang');
            map.removeLayer(layerzhezhaos);
            var layerzhezhaoss = map
                .getLayers()
                .getArray()
                .find(layer => layer.get('id') === 'gbz');
            map.removeLayer(layerzhezhaoss);
            var layergaoliang = map
                .getLayers()
                .getArray()
                .find(layer => layer.get('id') === 'dianjigaoliangs');
            map.removeLayer(layergaoliang);
            var geojson = new ol.format.GeoJSON().readFeatures(serviceResult.result.features);
            addConver(
                serviceResult.result.features.features[0].geometry.coordinates,
                'gbz',
                '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 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 leftFoldClick() {
    leftWraFlag.value = !leftWraFlag.value;
    if (leftWraFlag.value) {
        let leftWra = document.querySelector('.leftWra');
        leftWra ? (leftWra.style.transform = 'translate(0,0)') : '';
    } else {
        let leftWra = document.querySelector('.leftWra');
        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 SwitchMode = () => {
    SwitchFlag.value = !SwitchFlag.value;
    const statInfo = chartModeDiv.value; // 获取图表元素
    statInfo.style.width = document.querySelector('.chartMode').offsetWidth + 'px'; //初始化echarts图表宽度
    statInfo.style.height = document.querySelector('.chartMode').offsetHeight + 'px';
    const myChart = echarts.init(statInfo);
    // 设置宽度自适应
    window.addEventListener('resize', () => {
        statInfo.style.width = document.querySelector('.chartMode').offsetWidth + 'px';
        statInfo.style.height = document.querySelector('.chartMode').offsetHeight + 'px';
        myChart.resize();
    });
    chartModes();
};

const resetForm = () => {
    (formInline.value.year = yearTime.value), (formInline.value.statistical = '镇');
    formInline.value.droughtRating = '玉米';
    formInline.value.area = num.value;
    onSubmit();
};

/*------------------接口--------------------*/

//列表模式年
const getparameterEstimationYears = () => {
    getparameterEstimationYear({ type: '玉米' }).then(res => {
        yearTime.value = { name: res.data[0] };
        oldDatas.value = { name: res.data[0] };
        res.data.forEach(item => {
            dataSource.value.push({ name: item });
        });
        formInline.value.time = res.data[res.data.length - 1];
        timeArr.value = res.data;
        onSubmit();
    });
};

//产量预估
const getwheatTotalYearValues = (city, time) => {
    getwheatTotalYearValue({ divisions: city, yearMonth: time, type: '玉米' }).then(res => {
        estimate.value = res.data;
        areachar();
    });
};
//高标准农田
const getwheatHeightStandardFarmlands = (city, time) => {
    getwheatHeightStandardFarmland({ divisions: city, yearMonth: time, type: '玉米' }).then(res => {
        standardArr.value = res.data;
        if (res.data.length > 0) {
            farmland();
        }
    });
};
//镇
const getwheatGetAllTownss = (city, time) => {
    getwheatGetAllTowns({ divisions: city, yearMonth: time, type: '玉米' }).then(res => {
        administration.value = res.data;
        Township.brr = JSON.parse(JSON.stringify(res.data));
        Township.arr = Township.brr.sort((a, b) => {
            return a.subName.length - b.subName.length;
        });
        Township.arr.unshift({
            subregion: '',
            subName: '全部',
        });
        let crr = [];
        let drr = [];
        Township.arr.forEach(item => {
            if (crr.indexOf(item.subName) == -1) {
                crr.push(item.subName);
                drr.push({
                    subName: item.subName,
                    subregion: item.subregion,
                    area: item.area,
                    type: item.type,
                });
            }
        });
        Township.arr = drr;
        ASdivision();

        let arr = [];
        center.forEach(item => {
            res.data.forEach((i, index) => {
                if (item[i.subName]) {
                    arr.push({
                        weizhi: item[i.subName],
                        dom1: `popup${index}`,
                        dom2: `popup-content${index}`,
                        subName: i.subName,
                        subregion: i.subRegion,
                        wheatOutput: i.wheatOutput,
                        wheatUnitOutputValue: i.wheatUnitOutputValue,
                    });
                }
            });
        });
        arr.forEach((data, index) => {
            // 创建一个新的div元素
            var innerDiv = document.createElement('div');
            innerDiv.setAttribute('class', 'alerDiv');
            innerDiv.id = data.dom2;
            // innerDiv.style.height = '100px';
            innerDiv.style.display = 'block';
            // 创建一个新的div元素
            var divElement = document.createElement('div');
            divElement.id = data.dom1;
            // 设置宽度和高度
            // divElement.style.width = '120px';
            // divElement.style.height = '100px';
            // divElement.style.backgroundColor = 'red'; // 设置背景颜色为红色
            divElement.style.display = 'block';
            // 将内层div元素添加到外层div元素中
            divElement.appendChild(innerDiv);
            // 将div元素添加到文档中的body元素中
            document.body.appendChild(divElement);
            var container = document.getElementById(data.dom1);
            var content = document.getElementById(data.dom2);
            content.innerHTML =
                '<div class="content-children">' +
                '<div>单产量: ' +
                '<span>' +
                data.wheatUnitOutputValue +
                '</span>' +
                '<span class="active">' +
                '公斤/亩' +
                '</span>' +
                '</div>' +
                '<div>总产量: ' +
                '<span>' +
                data.wheatOutput +
                '</span>' +
                '<span class="active">' +
                '吨' +
                '</span>' +
                '</div>' +
                '</div>';
            var overlay = new ol.Overlay({
                // id: 'fugai',
                element: container,
                autoPan: true,
                positioning: 'bottom-center',
                stopEvent: true,
                offset: [0, -10],
                autoPanAnimation: {
                    duration: 250,
                },
            });
            map.addOverlay(overlay);
            overlay.setPosition(data.weizhi);
        });
    });
};

//街道

const getwheatGetAllVillagess = city => {
    getwheatGetAllVillages({ divisions: city, type: '玉米' }).then(res => {
        administration.value = res.data;
        ASdivision();
    });
};

const selectTab = () => {
    getgarrison().then(res => {
        res.features.forEach(item => {
            if (item.properties.XZDM == value.value) {
                deleteEntityByName('townLine');
                addBoundaryHandle(item.geometry.coordinates, 'townLine', 'yellow');
            }
        });
    });
    // if (value.value == '') {
    //     getwheatGetAllTownss();
    //     removeWms(['village_CQL']);
    //     removeWms(['aaa']);
    // } else {
    //     getwheatGetAllVillagess(value.value);
    // }
    // getwheatTotalYearValues(value.value);
};

//下载
/*---------------------------*/
const Deta = item => {
    getwheatTotalYearValue({
        divisions: value.value,
        yearMonth: oldDatas.value.name,
        whetherToDownload: true,
        type: '玉米',
    }).then(res => {
        downLoadFile(res.data[res.data.length - 1].excelPath);
    });
};
const Deta2 = item => {
    getwheatHeightStandardFarmland({ yearMonth: oldDatas.value.name, type: '玉米' }).then(res => {
        exportExcel(res.data, `高标准农田`, 'Sheet1');
    });
};
const Deta3 = item => {
    if (value.value === '') {
        getwheatGetAllTowns({ yearMonth: oldDatas.value.name, type: '玉米' }).then(res => {
            exportExcel(res.data, `行政区划`, 'Sheet1');
        });
    } else {
        getwheatGetAllVillages({
            divisions: value.value,
            yearMonth: oldDatas.value.name,
            type: '玉米',
        }).then(res => {
            exportExcel(res.data, `行政区划`, 'Sheet1');
        });
    }
};
const dowcity = () => {
    let arr = JSON.parse(JSON.stringify(amount.value[0]));
    insectarr.value.push(arr);
    exportExcel(insectarr.value, '干旱面积统计表', 'Sheet1');
};

const onSubmit = () => {
    let arr = [];
    let brr = [];
    currentPage.value = 1;
    getparameterEstimation({
        year: formInline.value.time,
        statistical: formInline.value.statistical,
        type: formInline.value.droughtRating,
        area: formInline.value.area,
    }).then(res => {
        tableItem.value = [
            {
                lable: '地区',
                value: 'subName',
            },
            {
                lable: '单产量(公斤/亩)',
                value: 'wheatUnitOutputValue',
            },
            {
                lable: '总产量(吨)',
                value: 'wheatOutput',
            },
        ];
        tableItemAll.value = [
            {
                lable: '',
                value: 'subName',
            },
            {
                lable: '单产量(公斤/亩)',
                value: 'wheatUnitOutputValue',
            },
            {
                lable: '总产量(吨)',
                value: 'wheatOutput',
            },
        ];
        operate.value = false;
        insectarr.value = res.data;
        tableNewData.value = res.data.slice(
            (currentPage.value - 1) * pageSize.value,
            (currentPage.value - 1) * pageSize.value + pageSize.value
        );
        amount.value[0]['wheatUnitOutputValue'] = 0;
        amount.value[0]['wheatOutput'] = 0;
        amount.value[0]['subName'] = '合计';
        res.data.forEach(item => {
            item.wheatUnitOutputValue
                ? (amount.value[0]['wheatUnitOutputValue'] +=
                      Number(item.wheatUnitOutputValue) !== NaN
                          ? Number(item.wheatUnitOutputValue)/res.data.length
                          : 0)
                : 0;
            item.wheatOutput
                ? (amount.value[0]['wheatOutput'] +=
                      Number(item.wheatOutput) !== NaN ? Number(item.wheatOutput) : 0)
                : 0;
        });
        for (const key in amount.value[0]) {
            if (amount.value[0][key] !== '合计') {
                amount.value[0][key] = amount.value[0][key].toFixed(2);
            }
        }
        const statInfo = chartModeDiv.value; // 获取图表元素
        statInfo.style.width = document.querySelector('.app-main').offsetWidth - 50 + 'px'; //初始化echarts图表宽度
        statInfo.style.height = document.querySelector('.app-main').offsetHeight + 'px';
        const myChart = echarts.init(statInfo);
        // 设置宽度自适应
        window.addEventListener('resize', () => {
            statInfo.style.width = document.querySelector('.app-main').offsetWidth + 'px';
            statInfo.style.height = document.querySelector('.app-main').offsetHeight + 'px';
            myChart.resize();
        });
        chartModes();
    });
};

//表头数据切换  ----------前端生成excel
const changeTableHead = (tableData, fieldName) => {
    const list = tableData.map(item => {
        const obj = {};
        for (const k in item) {
            if (fieldName[k]) {
                obj[fieldName[k]] = item[k];
            }
        }
        return obj;
    });
    return list;
};
const exportExcel = (
    tableData,
    // tableData = [
    //     {
    //         region: '山东',
    //         湿润: '张三',
    //         适宜: 333,
    //         轻度干旱: 22,
    //         中度干旱: 22,
    //         重度干旱: 33,
    //         area: 44,
    //     },
    //     { index: 1, username: '李四', password: 444, age: 23 },
    // ],
    fileName = '用户列表',
    pageName = 'Sheet1'
) => {
    let fieldNameObj = {
        subName: '区域名称',
        wheatUnitOutputValue: '单产量(公斤/亩)',
        wheatOutput: '总产量(吨)',
    };
    const list = changeTableHead(tableData, fieldNameObj);
    // 创建工作表
    const data = xlsx.utils.json_to_sheet(list);
    // 创建工作簿
    const wb = xlsx.utils.book_new();
    // 将工作表放入工作簿中
    xlsx.utils.book_append_sheet(wb, data, pageName);
    // 生成文件并下载
    xlsx.writeFile(wb, `${fileName}.xlsx`);
};

//每页条数
const handleCurrentChange = val => {
    currentPage.value = val;
    tableNewData.value = insectarr.value.slice(
        (currentPage.value - 1) * pageSize.value,
        (currentPage.value - 1) * pageSize.value + pageSize.value
    );
};
const Nindex = index => {
    // 当前页数 - 1 * 每页数据条数 + 1
    const page = currentPage.value; // 当前页码
    const pagesize = pageSize.value; // 每页条数
    return index + 1 + (page - 1) * pagesize;
};

const handleData = oldData => {
    oldDatas.value = oldData;
};

/*-------------echarts--------------*/
function areachar() {
    const areaDivIntance = echarts.init(areaDiv.value);
    let data = {
        title: ['单产量', '总产量'],
        xData: [],
        yData: [
            {
                data: [],
                name: '单产量',
                type: 'line',
                yAxisIndex: 0,
                // smooth: true,
                // symbol: 'circle',
                symbolSize: 2,
            },
            {
                data: [],
                name: '总产量',
                type: 'line',
                yAxisIndex: 1,
                // smooth: true,
                // symbol: 'circle',
                symbolSize: 2,
            },
        ],
    };
    estimate.value.forEach(item => {
        data.xData.push(item.dataTime);
        data.yData[0].data.push(item.wheatUnitOutputValue);
        data.yData[1].data.push(item.wheatOutput);
    });

    //计算最大值
    const calMax = (arr, type = 0) => {
        let max = 0;
        arr.forEach(el => {
            el.yAxisIndex === type &&
                el.data.forEach(el1 => {
                    if (!(el1 === undefined || el1 === '')) {
                        if (max < el1) {
                            max = el1;
                        }
                    }
                });
        });
        let maxint = Math.ceil(max / 9.5); //不让最高的值超过最上面的刻度
        let maxval = maxint * 10; //让显示的刻度是整数
        return maxval;
    };

    // 绘制图表
    let option = {
        grid: {
            left: '15%', //距离左边的距离
            right: '22%', //距离右边的距离
            bottom: '14%', //距离下边的距离
            top: '22%', //距离上边的距离
        },
        color: ['rgba(205, 92, 92, 1)', 'rgba(0, 191, 255, 1)'],
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                // type: 'cross',
            },
        },
        legend: {
            icon: 'rect',
            // itemWidth: 12, //指标线长度
            // itemGap: 24, //指标距离
            // itemHeight: 1, //指标高度，为1可去掉圆点
            textStyle: {
                color: '#fff',
            },
            data: data.title,
            top: 40,
            x: 'center',
        },
        xAxis: [
            {
                type: 'category',
                data: data.xData,
                axisLine: {
                    lineStyle: {
                        color: '#fff',
                    },
                },
                axisTick: {
                    //刻度线显示
                    show: false,
                },
                axisLabel: {
                    textStyle: {
                        color: '#fff',
                    },
                },
                boundaryGap: false,
            },
        ],
        yAxis: [
            {
                type: 'value',
                name: '产量(公斤/亩)',
                // min: 0,
                // max: calMax(data.yData, 0),
                // interval: calMax(data.yData, 0) / 5,
                axisLabel: {
                    formatter: '{value}',
                    color: '#fff',
                },
                axisLine: {
                    lineStyle: {
                        color: '#fff',
                    },
                },
                axisTick: {
                    //刻度线显示
                    show: false,
                },
                splitLine: {
                    lineStyle: {
                        //分割线样式
                        // type: 'dashed',
                        color: '#fff',
                    },
                },
            },
            {
                type: 'value',
                name: '产量(吨)',
                // min: 0,
                // max: calMax(data.yData, 1),
                // interval: calMax(data.yData, 1) / 5,
                axisLabel: {
                    formatter: '{value}',
                    color: '#fff',
                },
                axisLine: {
                    lineStyle: {
                        color: '#fff',
                    },
                },
                axisTick: {
                    //刻度线显示
                    show: false,
                },
                splitLine: {
                    lineStyle: {
                        opacity: 0,
                    },
                },
            },
        ],
        series: data.yData,
    };
    option && areaDivIntance.setOption(option);
    let erd = elementResizeDetectorMaker();
    erd.listenTo(areaDiv.value, () => {
        nextTick(() => {
            areaDivIntance.resize();
        });
    });
}

function farmland() {
    const farmlandDivIntance = echarts.init(farmlandDiv.value);
    let subNameArr = [];
    let wheatUnitOutputValueArr = [];
    let wheatOutputArr = [];
    standardArr.value.forEach(item => {
        subNameArr.push(item.subName);
        wheatUnitOutputValueArr.push(item.wheatUnitOutputValue);
        wheatOutputArr.push(item.wheatOutput);
    });
    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: '15%',
        },
        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: '#fff',
                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(255, 255, 255, 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: '#fff',
                    },
                },
                splitLine: {
                    lineStyle: {
                        //分割线样式
                        // type: 'dashed',
                        color: 'rgba(255, 255, 255, 0.3)',
                    },
                },
                min: 0,
                position: 'top',
            },
            {
                type: 'value',
                name: '产量(公斤/亩)',
                min: 0,
                position: 'bottom',
                splitLine: {
                    show: false,
                },
                nameTextStyle: {
                    fontSize: 12,
                },
                axisLabel: {
                    formatter: value => {
                        if (value) {
                            value = value / 10000 + '万';
                        }
                        return value;
                    },
                },
                axisLine: {
                    lineStyle: {
                        color: '#fff',
                    },
                },
            },
        ],
        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(242, 252, 252, 1)', // 0% 处的颜色
                                },
                                {
                                    offset: 0.8,
                                    color: 'rgba(242, 252, 252, 0.2)', // 100% 处的颜色
                                },
                                {
                                    offset: 1,
                                    color: 'rgba(242, 252, 252, 0.1)', // 100% 处的颜色
                                },
                            ],
                            global: false, // 缺省为 false
                        },
                        // borderColor:'rgba(0, 170, 255, 0.9)',
                        shadowColor: 'rgba(255, 255, 255, 0.5)',
                        shadowBlur: 10,
                    },
                },
            },
            {
                name: '总产量',
                type: 'bar',
                yAxisIndex: 1,
                barWidth: '10%',
                data: wheatOutputArr,
                itemStyle: {
                    normal: {
                        barBorderRadius: 2,
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [
                                {
                                    offset: 0,
                                    color: 'rgba(143, 186, 243,1)', // 0% 处的颜色
                                },
                                {
                                    offset: 0.8,
                                    color: 'rgba(143, 186, 243, 0.2)', // 100% 处的颜色
                                },
                                {
                                    offset: 1,
                                    color: 'rgba(143, 186, 243, 0.1)', // 100% 处的颜色
                                },
                            ],
                            global: false, // 缺省为 false
                        },
                        // borderColor:'rgba(0, 170, 255, 0.9)',
                        shadowColor: 'rgba(255, 255, 255, 0.5)',
                        shadowBlur: 10,
                    },
                },
            },
        ],
    };

    farmlandDivIntance.on('click', function (param) {
        document.querySelector('.tool').style.display = 'block';
        paramCode.value = param.name;
        let arr = ['XJQY3702112019WGS84', 'CJQY3702112019WGS84'];
        SQLData(param.name);
        arr.forEach(item => {
            map.getLayers()
                .getArray()
                .forEach((ite, index) => {
                    if (ite.A.name == item) {
                        map.getLayers().removeAt(index);
                    }
                });
        });
        let arrs = ['2019-2022gaobiaozhunnongtian'];
        arrs.forEach(item => {
            map.getLayers()
                .getArray()
                .forEach((ite, index) => {
                    if (ite.A.name == item) {
                        map.getLayers().removeAt(index);
                    }
                });
        });
        var popups = document.querySelectorAll('.alerDiv');
        for (var i = 0; i < popups.length; i++) {
            var popup = popups[i];
            // popup.parentNode.removeChild(popup);
            popup.style.display = 'none';
        }
        let layerzhezhaos = map
            .getLayers()
            .getArray()
            .find(layer => layer.get('id') === 'gbz');
        map.removeLayer(layerzhezhaos);
        var layergaoliang = map
            .getLayers()
            .getArray()
            .find(layer => layer.get('id') === 'dianjigaoliang');
        map.removeLayer(layergaoliang);
        var layergaoliang = map
            .getLayers()
            .getArray()
            .find(layer => layer.get('id') === 'dianjigaoliangs');
        map.removeLayer(layergaoliang);
        layers = new ol.layer.Tile({
            source: new ol.source.TileSuperMapRest({
                url: 'http://36.134.44.75:8090/iserver/services/map-2019-2022gaobiaozhunnongtian/rest/maps/T2019_2022%E9%AB%98%E6%A0%87%E5%87%86%E5%86%9C%E7%94%B0%E7%89%87%E5%8C%BA@2019-2022gaobiaozhunnongtian',
                //rasterfunction: new SuperMap.NDVIParameter({ redIndex: 0, nirIndex: 2 }),
                cacheEnabled: false,
            }),
            name: '2019-2022gaobiaozhunnongtian',
            projection: 'EPSG:4326', //3857
            zIndex: 9999,
        });
        map.addLayer(layers);
    });

    option && farmlandDivIntance.setOption(option, { notMerge: true, grid: { bottom: 20 } });
    useEcharts(farmlandDivIntance, option);
    let erd = elementResizeDetectorMaker();
    erd.listenTo(farmlandDiv.value, () => {
        nextTick(() => {
            farmlandDivIntance.resize();
        });
    });
}
//返回
function back() {
    deleteEntityByName('townLine');
    deleteEntityByName('villageLine');
    viewer.camera.flyTo({
        destination: Cesium.Rectangle.fromDegrees(119.5091, 35.5671, 120.3285, 36.1455),
        duration: 2,
    });
    flag.value = false;
}
function ASdivision() {
    const ASdivisionDivIntance = echarts.init(ASdivisionDiv.value);
    administration.value.sort((a, b) => {
        return a.subName.length - b.subName.length;
    });
    let subNameArr = [];
    let wheatUnitOutputValueArr = [];
    let wheatOutputArr = [];
    administration.value.forEach(item => {
        subNameArr.push(item.subName);
        wheatUnitOutputValueArr.push(item.wheatUnitOutputValue);
        wheatOutputArr.push(item.wheatOutput);
    });

    var yName = subNameArr.sort((a, b) => {
        return a.length - b.length;
    });
    var data = [wheatUnitOutputValueArr, wheatOutputArr];

    var colorArry = [
        new echarts.graphic.LinearGradient(
            1,
            0,
            0,
            0,
            [
                {
                    offset: 0,
                    color: 'rgba(4, 247, 227, 1)', // 0% 处的颜色
                },
                {
                    offset: 1,
                    color: 'rgba(4, 247, 227, 1)', // 100% 处的颜色
                },
            ],
            false
        ),
        new echarts.graphic.LinearGradient(
            1,
            0,
            0,
            0,
            [
                {
                    offset: 0,
                    color: 'rgba(33, 187, 251, 1)', // 0% 处的颜色
                },
                {
                    offset: 1,
                    color: 'rgba(33, 187, 251, 1)', // 100% 处的颜色
                },
            ],
            false
        ),
    ];

    let option = {
        color: colorArry,
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow',
            },
        },
        grid: {
            left: '5%',
            right: '2%',
            bottom: '3%',
            top: '10%',
            containLabel: true,
        },
        // legend: {
        //     data: ['学期1', '学期2'],
        //     left: 0,
        //     top: 0,
        //     textStyle: {
        //         color: 'rgba(195, 240, 255, 1)',
        //     },
        // },
        calculable: true,
        dataZoom: [
            {
                type: 'slider',
                show: false,
                zoomLock: true, //禁止拉伸
                width: 8,
                yAxisIndex: [0],
                bottom: 30,
                top: 20,
                right: 10,
                startValue: 0,
                endValue: 4,
                handleIcon:
                    'M-292,322.2c-3.2,0-6.4-0.6-9.3-1.9c-2.9-1.2-5.4-2.9-7.6-5.1s-3.9-4.8-5.1-7.6c-1.3-3-1.9-6.1-1.9-9.3c0-3.2,0.6-6.4,1.9-9.3c1.2-2.9,2.9-5.4,5.1-7.6s4.8-3.9,7.6-5.1c3-1.3,6.1-1.9,9.3-1.9c3.2,0,6.4,0.6,9.3,1.9c2.9,1.2,5.4,2.9,7.6,5.1s3.9,4.8,5.1,7.6c1.3,3,1.9,6.1,1.9,9.3c0,3.2-0.6,6.4-1.9,9.3c-1.2,2.9-2.9,5.4-5.1,7.6s-4.8,3.9-7.6,5.1C-285.6,321.5-288.8,322.2-292,322.2z',
                handleSize: '100%',
                handleStyle: {
                    color: '#DBDBDB',
                    height: '100%',
                },
                backgroundColor: 'transparent',
                fillerColor: '#DBDBDB',
                textStyle: {
                    color: 'transparent',
                },
                dataBackground: {
                    lineStyle: {
                        color: 'transparent',
                    },
                    areaStyle: {
                        color: 'transparent',
                    },
                },
                borderColor: 'transparent',
            },
            {
                type: 'inside',
                id: 'insideY',
                yAxisIndex: 0,
                start: 0,
                end: 100,
                zoomOnMouseWheel: false,
                moveOnMouseMove: true,
                moveOnMouseWheel: true,
            },
        ],
        xAxis: [
            {
                type: 'value',
                boundaryGap: [0, 0.01],
                axisLabel: {
                    show: false,
                },
                axisTick: {
                    show: false,
                },
                axisLine: {
                    show: false,
                },
                splitLine: {
                    show: false,
                },
            },
        ],
        yAxis: [
            {
                type: 'category',
                name: '',
                inverse: true,
                data: yName,
                axisLabel: {
                    textStyle: {
                        fontSize: 13,
                        color: '#fff',
                    },
                },
                axisTick: {
                    show: false,
                },
                axisLine: {
                    show: false,
                },
            },
        ],
        series: [
            {
                name: '单产量(公斤/亩)',
                type: 'bar',
                barWidth: 5,
                data: data[0],
            },
            {
                name: '总产量(吨)',
                type: 'bar',
                barWidth: 5,
                data: data[1],
            },
        ],
    };

    useEcharts(ASdivisionDivIntance, option);
    let erd = elementResizeDetectorMaker();
    erd.listenTo(ASdivisionDiv.value, () => {
        nextTick(() => {
            ASdivisionDivIntance.resize();
        });
    });
}
function chartModes() {
    const ASdivisionDivIntance = echarts.init(chartModeDiv.value);
    let arr = [];
    let 单产量 = [];
    let 总产量 = [];
    insectarr.value.forEach(item => {
        arr.push(item.subName);
        item.wheatUnitOutputValue !== undefined
            ? 单产量.push(item.wheatUnitOutputValue)
            : 单产量.push(0);
        item.wheatOutput !== undefined ? 总产量.push(item.wheatOutput) : 总产量.push(0);
    });
    let ends = (10 / arr.length) * 100;
    let option = {
        // backgroundColor: 'rgba(5, 38, 75, 0.1)',
        color: ['rgba(4, 247, 227, 1)', 'rgba(33, 187, 251, 1)'],
        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: '5%',
            bottom: '20%',
        },
        // legend: {
        //     data: ['人群数量', '基金金额'],
        //     textStyle: {
        //         color: '#fff',
        //         fontSize: 12,
        //     },
        //     type: 'scroll',
        // },
        dataZoom: [
            {
                type: 'slider',
                width: '40%',
                zoomLock: true,
                top: '85%',
                start: 0,
                end: ends,
                showDataShadow: false,
                showDetail: false,
                fillerColor: 'rgba(64, 158, 255)',
                borderRadius: '50%',
                moveHandleSize: 0,
                moveHandleStyle: {},
                left: '30%',
                height: 12,
                handleSize: '80%',
                handleIcon: 'path://M512,512m-448,0a448,448,0,1,0,896,0a448,448,0,1,0,-896,0Z',
                handleStyle: {
                    borderWidth: 0,
                    color: 'rgba(64, 158, 255)',
                },
            },
            {
                type: 'inside',
            },
        ],
        xAxis: [
            {
                type: 'category',
                nameTextStyle: {
                    fontSize: 12,
                },
                axisLabel: {
                    fontSize: 14,
                    relativeSize: -2,
                },
                splitLine: {
                    show: false,
                },
                axisTick: {
                    show: false,
                },
                axisLine: {
                    lineStyle: {
                        color: 'rgba(102, 102, 102, 1)',
                    },
                },
                axisPointer: {
                    type: 'shadow',
                },
                data: arr,
            },
        ],
        yAxis: [
            {
                type: 'value',
                name: '单产量(公斤/亩)',
                splitLine: {
                    show: true,
                    lineStyle: {
                        type: 'dashed',
                    },
                },
                nameTextStyle: {
                    fontSize: 12,
                },
                axisLabel: {
                    fontSize: 14,
                    relativeSize: -2,
                    formatter: '{value}',
                },
                axisLine: {
                    lineStyle: {
                        color: 'rgba(102, 102, 102, 1)',
                    },
                },
                min: 0,
                position: 'top',
            },
            {
                type: 'value',
                name: '总产量(吨)',
                min: 0,
                position: 'bottom',
                splitLine: {
                    show: false,
                },
                nameTextStyle: {
                    fontSize: 12,
                },
                axisLabel: {
                    fontSize: 14,
                    relativeSize: -2,
                    formatter: '{value}',
                },
                axisLine: {
                    lineStyle: {
                        color: 'rgba(102, 102, 102, 1)',
                    },
                },
            },
        ],
        series: [
            {
                name: '单产量(公斤/亩)',
                type: 'bar',
                yAxisIndex: 0,
                data: 单产量,
            },
            {
                name: '总产量(吨)',
                type: 'bar',
                yAxisIndex: 1,
                data: 总产量,
            },
        ],
    };

    useEcharts(ASdivisionDivIntance, option);
}

let fenleiRef = ref({});

// 地图移动时弹窗跟随
function infoWindowPostRender() {
    if (clickInfoMap.value.lon && clickInfoMap.value.lat) {
        //经纬度转为世界坐标
        const gisPosition = Cesium.Cartesian3.fromDegrees(
            Number(clickInfoMap.value.lon),
            Number(clickInfoMap.value.lat),
            0
        ); //转化为屏幕坐标
        var windowPosition = Cesium.SceneTransforms.wgs84ToWindowCoordinates(
            viewer.scene,
            gisPosition
        );
        if (Cesium.defined(windowPosition)) {
            const pop = document.getElementById('pop');
            pop.style.top = windowPosition.y - 10 + 'px';
            pop.style.left = windowPosition.x + 10 + 'px';
        }
    }
}
// 隐藏弹窗
function hiddenOverlayChart() {
    // 移除各种高亮
    XZDM = '';
    XZQDM = '';
    const pop = document.getElementById('pop');
    pop.style.display = 'none'; // 清除监听事件
    value.value = '370211';
    viewer.scene.postRender.removeEventListener(infoWindowPostRender);
    deleteEntityByName('townLine');
}
//显示弹窗
function showOverlayChart(position) {
    const pop = document.getElementById('pop');
    pop.style.display = 'block';
    pop.style.position = 'absolute';
    pop.style.top = position.y - 10 + 'px';
    pop.style.left = position.x + 10 + 'px';
    pop.style.zIndex = 99;
}

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

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

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

        p {
            width: 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;
        }
    }
}
.tabulation {
    display: none;
    padding: 20px;
    .tableBox {
        padding: 0 10px;
        .tableBorder {
            border-radius: 8px;
            margin-bottom: 10px;
            .el-table--fit {
                border-radius: 8px;
                border: 2px solid rgba(100, 195, 164, 0.8);
                box-shadow: 0px 3px 9px 0px rgba(100, 195, 164, 0.25),
                    0px 1px 2px 0px rgba(100, 195, 164, 0.8);
            }
        }
        :deep(
                .el-table .el-table__header-wrapper th,
                .el-table .el-table__fixed-header-wrapper th
            ) {
            color: rgba(0, 0, 0, 1);
        }
        height: 84%;
        :deep(.el-table__inner-wrapper) {
            height: 96% !important;
        }
        .example-pagination-block {
            display: flex;
            align-items: center;
            justify-content: flex-end;
        }
        :deep(.tabth) {
            background-color: rgba(247, 247, 247, 1);
        }
    }
    .chartMode {
        width: 100%;
        height: 85%;
        .chartModeDiv {
            width: 100%;
            height: 100%;
            padding: 10px;
        }
    }
    .searchDiv {
        display: flex;
        .dow {
            float: right;
            margin-right: 10px;
        }
        :deep(.el-input__wrapper) {
            width: 100px;
        }
        .modeDiv {
            width: 234px;
            height: 26px;
            opacity: 1;
            border-radius: 8px;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            text-align: center;
            font-size: 14px;
            // font-weight: 400;
            border: 1px solid #ccc;
            cursor: pointer;
            div {
                flex: 1;
                height: 100%;
                border-radius: 8px;
                line-height: 26px;
            }
            .Selected {
                background: rgba(100, 195, 164, 1);
                border-radius: 8px 0px 0px 8px;
                color: rgba(255, 255, 255, 1);
            }
            .Selecteds {
                background: rgba(100, 195, 164, 1);
                border-radius: 0px 8px 8px 0px;
                color: rgba(255, 255, 255, 1);
            }
        }
    }
}

.leftWra {
    position: absolute;
    top: 10px;
    left: 20px;
    height: $height;
    width: 23%;
    background: rgba(2, 31, 26, 0.85);
    box-shadow: inset 0px 0px 15px 6px rgba(41, 255, 255, 0.5);
    transition: transform 1s;
    .leftFoldDiv {
        width: 30px;
        height: 30px;
        position: absolute;
        right: -14%;
        top: 50%;
        transform: translate(-50%, -50%);
        font-size: 30px;
        color: #ccc;
    }
    .leftTop {
        width: 100%;
        display: flex;
        flex-direction: column;
        .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);
            }
        }
    }
}
:deep(.alerDiv) {
    width: 186px;
    height: 62px;
    opacity: 1;
    background: linear-gradient(270deg, rgba(0, 0, 0, 1) 0%, rgba(34, 126, 129, 1) 100%);
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 0px;
    line-height: 16px;
    color: rgba(255, 255, 255, 1);
    text-align: left;
    vertical-align: top;
    background: url('@/assets/images/bgjt.png');
    background-size: 100% 110%;
    .content-children {
        width: 100%;
        height: 100%;
    }
    div {
        // display: flex;
        line-height: 16px;
        padding: 5px 5px;
        span {
            padding: 0 5px;
            color: rgba(0, 255, 255, 1);
            text-shadow: 0px 0px 6px rgba(0, 255, 255, 0.6);
            font-weight: 700;
        }
        .active {
            font-size: 12px;
            font-weight: 400;
            letter-spacing: 0px;
            line-height: 12px;
            color: rgba(255, 255, 255, 0.7);
        }
    }
}
.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;
    left: -95px;
    top: 0;
    width: 90px;
    height: 28px;
    opacity: 1;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    display: none;
    background: url('@/assets/images/bg.png') no-repeat;
    padding: 0 5px;
    font-size: 14px;
    cursor: pointer;
    span {
        float: right;
        line-height: 28px;
        margin-right: 20px;
        color: rgba(255, 255, 255, 1);
    }
}

/*设置弹出框样式*/
.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: 11px;
    right: 15px;
    color: #fff !important;
}
.ol-popup-closer:after {
    content: '✖';
    font-size: 18px;
}
#popup {
    .pophead {
        background-image: url('@/assets/images/top.png') !important;
        background-repeat: no-repeat;
        min-width: 315px;
        height: 42px;
        opacity: 1;
        background: linear-gradient(270deg, rgba(19, 92, 98, 0.4) 0%, rgba(19, 92, 98, 1) 100%);
    }
    #popup-content {
        background-image: url('@/assets/images/bottom.png') !important;
        background-repeat: no-repeat;
        background-size: 100% 100% !important;
        width: max-content;
        opacity: 1;
        width: 100% !important;
        background: rgba(2, 31, 26, 0.7);
        p {
            width: 100%;
            height: 28px;
            line-height: 28px;
            font-size: 14px;
            background: linear-gradient(
                270deg,
                rgba(19, 92, 98, 0) 0%,
                rgba(33, 169, 169, 0.36) 100%
            );
            padding-left: 18px;
            display: flex;
            background-image: url('@/assets/images/duande.png') !important;
            background-repeat: no-repeat;
            background-size: 100% !important;
            .label {
                color: rgba(47, 214, 214, 1);
            }
            span {
                color: #fff;
            }
        }
    }
}

#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;
    border: 2px solid rgba(4, 153, 153, 1);

    .rowWra {
        display: flex;
        margin-bottom: 10px;
        justify-content: space-between;
        & > span:nth-child(1) {
            font-weight: 400;
            letter-spacing: 0px;
            color: rgba(255, 255, 255, 1);
            // margin-top: 20px;
            line-height: 24px;
            // width: 3em;
            // font-size: 14px;
            margin-right: 10px;
        }

        & > span:nth-child(2) {
            color: rgba(255, 255, 255, 1);
            width: 169px;
            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;
        }
    }

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

:deep(.el-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__arrow::before {
    display: none;
}
.selectCity {
    background: #fff;
}
</style>
