<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="leftbottom">
                    <div class="title">
                        <span>作物类型统计</span>
                        <p @click="Deta2()">
                            下载 &nbsp;
                            <img
                                src="@/assets/icons/svg/downloads.svg"
                                style="width: 14px; height: 14px; cursor: pointer"
                            />
                        </p>
                    </div>
                    <div ref="typesofDiv" class="typesofDiv"></div>
                </div>
                <div class="tableDiv">
                    <div>
                        <div v-for="(item, index) in typesofdata" :key="index" class="Crops">
                            <div>
                                <img src="@/assets/images/crops.png" alt="" />
                                {{ item.type }}
                            </div>
                            <div :style="{ color: item.content.color }">
                                {{ item.content.value }}亩
                            </div>
                            <div :style="{ color: item.content.color }">
                                {{ item.content.percent }}
                            </div>
                        </div>
                    </div>
                </div>
                <div class="leftFoldDiv" @click="leftFoldClick()">
                    <el-tooltip
                        :disabled="leftWraFlag"
                        :show-arrow="false"
                        hide-after="0"
                        show-after="200"
                        class="box-item"
                        effect="dark"
                        content="展开"
                        placement="top"
                    >
                        <!-- <el-icon v-if="!leftWraFlag"><ArrowRightBold /></el-icon> -->
                        <img v-if="!leftWraFlag" src="@/assets/images/close1.png" alt="" />
                    </el-tooltip>
                    <el-tooltip
                        :disabled="!leftWraFlag"
                        :show-arrow="false"
                        hide-after="0"
                        show-after="200"
                        class="box-item"
                        effect="dark"
                        content="收起"
                        placement="top"
                    >
                        <!-- <el-icon v-if="leftWraFlag"><ArrowLeftBold /></el-icon> -->
                        <img
                            class="imgrotate"
                            v-if="leftWraFlag"
                            src="@/assets/images/close1.png"
                            alt=""
                        />
                    </el-tooltip>
                </div>
            </div>
            <div class="rightWra">
                <div class="rightTop">
                    <div class="title">
                        <span>作物类型统计-高标准农田</span>
                        <p @click="Deta3()">
                            下载 &nbsp;
                            <img
                                src="@/assets/icons/svg/downloads.svg"
                                style="width: 14px; height: 14px; cursor: pointer"
                            />
                        </p>
                    </div>
                    <div ref="farmlandDiv" class="farmlandDiv"></div>
                    <!-- <div ref="ProgressBarDiv" class="ProgressBar"></div> -->
                </div>
                <div class="rightbottom">
                    <div class="title">
                        <span>作物类型统计-行政区划</span>
                        <p @click="Deta4()">
                            下载 &nbsp;
                            <img
                                src="@/assets/icons/svg/downloads.svg"
                                style="width: 14px; height: 14px; cursor: pointer"
                            />
                        </p>
                    </div>
                    <el-select popper-class="select_city" v-model="value" placeholder="全部">
                        <el-option
                            v-for="item in Township.arr"
                            :key="item.tomeCode"
                            :label="item.tomeName"
                            :value="item.tomeCode"
                        />
                    </el-select>
                    <div ref="ASdivisionDiv" class="ASdivision"></div>
                </div>
                <div class="rightFoldDiv" @click="rightFoldClick()">
                    <el-tooltip
                        :disabled="!rightWraFlag"
                        hide-after="0"
                        :show-arrow="false"
                        show-after="200"
                        class="box-item"
                        effect="dark"
                        content="收起"
                        placement="top"
                    >
                        <img v-if="rightWraFlag" src="@/assets/images/close1.png" alt="" />
                    </el-tooltip>
                    <el-tooltip
                        :disabled="rightWraFlag"
                        hide-after="0"
                        :show-arrow="false"
                        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>
            <el-collapse class="legend" accordion>
                <el-collapse-item name="1">
                    <template #title>图例</template>
                    <div class="mt-4">
                        <el-checkbox-group v-model="checkList" @change="change">
                            <el-checkbox
                                v-for="(value, item, key) in dic"
                                :key="key"
                                :style="{
                                    background: value.color,
                                    border: `1px solid ${value.color}`,
                                    width: `100%`,
                                }"
                                :v-model="value.disabled"
                                :disabled="value.disabled"
                                :label="item"
                            />
                        </el-checkbox-group>
                    </div>
                </el-collapse-item>
            </el-collapse>
            <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="pop"></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">{{ item.name }}：</span>
                        <span>{{ item.area }}（亩）</span>
                    </p>
                </div>
                <div id="popup-pagination"></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.yearMonth"
                            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.flag"
                            placeholder="请选择"
                        >
                            <el-option label="行政区划" value="2" />
                            <el-option label="高标准农田" value="1" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="镇:">
                        <el-select
                            v-model="formInline.divisions"
                            :disabled="formInline.flag == '2' ? false : true"
                            :placeholder="formInline.flag == '2' ? '全部' : '请选择'"
                            popper-class="selectCity"
                        >
                            <el-option
                                v-for="(item, index) in selectOption"
                                :key="index"
                                :label="item.tomeName"
                                :value="item.tomeCode"
                            />
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit">查询</el-button>
                        <el-button plain @click="resetForm">重置</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 tableItem"
                            :key="index"
                            :prop="item.value"
                            :label="index == 0 ? item.lable : item.lable + '(亩)'"
                            align="center"
                        />
                        <el-table-column prop="address" v-if="operate" align="center" label="操作">
                            <template #default="scope">
                                <span
                                    style="color: rgba(67, 181, 143, 1); cursor: pointer"
                                    @click="download(scope.row)"
                                >
                                    下载
                                </span>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
                <el-table
                    :data="tableNewData"
                    :header-cell-style="{ 'text-align': 'center' }"
                    height="90%"
                    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="index == 0 ? item.lable : item.lable + '(亩)'"
                        align="center"
                    />
                    <el-table-column prop="address" v-if="operate" align="center" label="操作">
                        <template #default="scope">
                            <span
                                style="color: rgba(67, 181, 143, 1); cursor: pointer"
                                @click="download(scope.row)"
                            >
                                下载
                            </span>
                        </template>
                    </el-table-column>
                </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, reactive, watch } from 'vue';
import { downLoadFile } from '@/utils/download.js';
import * as echarts from 'echarts';
import 'echarts-gl';
import TimeLine from '@/components/TimeLine/TimeLine.vue';
import { useEcharts } from '@/hooks/useEcharts';
import {
    getTownship,
    getvillage,
    getareas,
    getcropper,
    getcropTypeStatistics,
    gethighStandard,
    gettheTime,
    getlistMode,
    getgarrison,
    getAdministrativeChun,
} from '@/api/crops/classify.js';
import axios from 'axios';
import * as xlsx from 'xlsx'; // Vue3 版本
import { ElMessage } from 'element-plus';
import townJson from './town.json';
import { useRouter } from 'vue-router';
import moment from 'Moment';
// import {}

const router = useRouter();
let viewer = ref(null);
const areaDiv = ref(null);
const typesofDiv = ref(null);
const farmlandDiv = ref(null);
const chartModeDiv = ref(null);
const ASdivisionDiv = ref(null);
let Township = reactive({ arr: [], brr: [], crr: [] }); //街道
let selectOption = ref([]);
const value = ref('370211');
const clickInfoMap = ref({ info: [] });
let typesofdata = ref([]);
const flag = ref(false);
let leftWraFlag = ref(false);
let rightWraFlag = ref(false);
let operate = ref(true);
let currentPage = ref(1); //当前页
let pageSize = ref(14); //每页条数
const insectarr = ref([]);
let checkListdata = ref([]);
let timeArr = ref([]); //年数组
let SwitchFlag = ref(true);
let regionName = ref('');
let layers = ref(null); //村
let alterArr = ref([]);
let dataSource = ref([]);
let oldDatas = ref('');
let highStandard = [
    '高标准农田1.0',
    '高标准农田2.0',
    '高标准农田3.0',
    '高标准农田4.0',
    '高标准农田5.0',
    '高标准农田6.0',
    '高标准农田7.0',
];
let highStandarditem = {
    小麦: [],
    玉米: [],
    大豆: [],
    地瓜: [],
    花生: [],
    蓝莓: [],
    茶叶: [],
    马铃薯: [],
    白菜和萝卜: [],
    其他: [],
};
//搜索
let formInline = ref({
    yearMonth: '',
    flag: '2',
    divisions: '',
});

let amount = ref([]);

watch(
    () => operate.value,
    (val, oldVal) => {
        if (!val) {
            window.document.querySelector('.tableBox').style.height = '83%';
        } else {
            window.document.querySelector('.tableBox').style.height = '90%';
        }
    }
);
watch(
    () => oldDatas.value,
    (val, oldVal) => {
        console.log(oldDatas);
        value.value = '370211';
        getcroppers(value.value, oldDatas.value.name); //作物分类面积请求
        getcropTypeStatisticss(value.value, oldDatas.value.name); //作物类型统计百分比
        getvillages(value.value, oldDatas.value.name);
        getTownships(value.value, oldDatas.value.name);
        gethighStandards(oldDatas.value.name); //高标准农田
    }
);

const onSubmit = () => {
    if (!formInline.value.yearMonth) {
        ElMessage.error('请选择时间');
        return;
    }
    let arr = [];
    let brr = [];
    getlistMode({
        yearMonth: formInline.value.yearMonth,
        flag: formInline.value.flag === '' ? 0 : formInline.value.flag,
        divisions: formInline.value.divisions,
    }).then(res => {
        amount.value = [
            {
                region: '高标准农田',
                其他: res.data[res.data.length - 1].otherSum,
                地瓜: res.data[res.data.length - 1].sweetPotatoSum,
                大豆: res.data[res.data.length - 1].soyBeanSum,
                小麦: res.data[res.data.length - 1].wheatSum,
                花生: res.data[res.data.length - 1].peanutSum,
                茶叶: res.data[res.data.length - 1].teaSum,
                蓝莓: res.data[res.data.length - 1].blueberrySum,
                合计: '合计',
            },
        ];
        if (formInline.value.flag == '1') {
            formInline.value.divisions = '';
            tableItem.value = [
                {
                    lable: '区域名称',
                    value: 'region',
                },
                {
                    lable: '小麦',
                    value: '小麦',
                },
                {
                    lable: '玉米',
                    value: '玉米',
                },
                {
                    lable: '大豆',
                    value: '大豆',
                },
                {
                    lable: '地瓜',
                    value: '地瓜',
                },
                {
                    lable: '花生',
                    value: '花生',
                },
                {
                    lable: '蓝莓',
                    value: '蓝莓',
                },
                {
                    lable: '茶叶',
                    value: '茶叶',
                },
                {
                    lable: '马铃薯',
                    value: '马铃薯',
                },
                {
                    lable: '白菜和萝卜',
                    value: '白菜和萝卜',
                },
                {
                    lable: '其他',
                    value: '其他',
                },
            ];
            res.data.forEach(item => {
                if (arr.indexOf(item.region) == -1) {
                    arr.push(item.region);
                }
            });
            arr.forEach(item => {
                brr.push(
                    Object.create(null, {
                        regio: {
                            value: item,
                        },
                    })
                );
            });
            brr.forEach(item => {
                res.data.map(i => {
                    if (item.regio === i.region) {
                        item['region'] = i.region;
                        item[i.name] = i.area;
                    }
                });
            });
            operate.value = false;
        } else if (formInline.value.flag == '2') {
            let data = [];
            let newData = [];
            getcropper({
                divisions: formInline.value.divisions ? formInline.value.divisions : '370211',
            }).then(res => {
                res.data.forEach(item => {
                    if (data.indexOf(item.tomeName) == -1) {
                        data.push(item.tomeName);
                    }
                });
                data.forEach(item => {
                    newData.push(
                        Object.create(null, {
                            regio: {
                                value: item,
                            },
                        })
                    );
                });
                newData.forEach(item => {
                    res.data.map(i => {
                        if (item.regio === i.tomeName) {
                            item['region'] = i.tomeName;
                            item[i.name] = i.area;
                        }
                    });
                });
                Township.arr.forEach(item => {
                    if (formInline.value.divisions == item.tomeCode) {
                        newData[0]['region'] = item.tomeName;
                        newData[0]['合计'] = '合计';
                        return;
                    } else if (item.tomeCode == '370211') {
                        newData[0]['region'] = '黄岛区';
                        newData[0]['合计'] = '合计';
                    }
                });
                amount.value = newData;
            });
            tableItem.value = [
                {
                    lable: '区域名称',
                    value: 'region',
                },
                {
                    lable: '小麦',
                    value: '小麦',
                },
                {
                    lable: '玉米',
                    value: '玉米',
                },
                {
                    lable: '大豆',
                    value: '大豆',
                },
                {
                    lable: '地瓜',
                    value: '地瓜',
                },
                {
                    lable: '花生',
                    value: '花生',
                },
                {
                    lable: '蓝莓',
                    value: '蓝莓',
                },
                {
                    lable: '茶叶',
                    value: '茶叶',
                },
                {
                    lable: '马铃薯',
                    value: '马铃薯',
                },
                {
                    lable: '白菜和萝卜',
                    value: '白菜和萝卜',
                },
                {
                    lable: '其他',
                    value: '其他',
                },
            ];
            res.data.forEach(item => {
                if (arr.indexOf(item.tomeName) == -1) {
                    arr.push(item.tomeName);
                }
            });
            arr.forEach(item => {
                brr.push(
                    Object.create(null, {
                        regio: {
                            value: item,
                        },
                    })
                );
            });
            brr.forEach(item => {
                res.data.map(i => {
                    if (item.regio === i.tomeName) {
                        item['region'] = i.tomeName;
                        item[i.name] = i.area;
                    }
                });
            });
            operate.value = false;
        } else if (formInline.value.flag == 0) {
            operate.value = true;
            brr = res.data;
            tableItem = ref([
                {
                    lable: '时间',
                    value: 'dateTime',
                },
                {
                    lable: '数据名称',
                    value: 'excelName',
                },
            ]);
        }
        insectarr.value = brr;
        tableNewData.value = brr.slice(
            (currentPage.value - 1) * pageSize.value,
            (currentPage.value - 1) * pageSize.value + pageSize.value
        );
        const statInfo = chartModeDiv.value; // 获取图表元素
        statInfo.style.width = window.innerWidth - 100 + 'px'; //初始化echarts图表宽度
        statInfo.style.height = window.innerHeight - 100 + 'px';
        const myChart = echarts.init(statInfo);
        // 设置宽度自适应
        window.addEventListener('resize', () => {
            statInfo.style.width = window.innerWidth - 200 + 'px';
            statInfo.style.height = window.innerHeight - 200 + 'px';
            myChart.resize();
        });
        chartModes();
    });
};
const resetForm = () => {
    formInline.yearMonth = timeArr.value[0];
    formInline.flag = 2;
    formInline.value.divisions = '';
    operate.value = true;
    onSubmit();
};

let tableItem = ref([
    {
        lable: '时间',
        value: 'dateTime',
    },
    {
        lable: '数据名称',
        value: 'excelName',
    },
]);
let tableNewData = ref([]);
//重置

//下载
/*---------------------------*/
const Deta = item => {
    getcropper({ divisions: value.value, whetherToDownload: true }).then(res => {
        downLoadFile(res.data[res.data.length - 1].downloadPath);
    });
};
const Deta2 = item => {
    getcropTypeStatistics({ divisions: value.value, whetherToDownload: true }).then(res => {
        downLoadFile(res.data[res.data.length - 1].downloadPath);
    });
};
const Deta3 = item => {
    gethighStandard({ divisions: value.value, whetherToDownload: false }).then(res => {
        let arr = [];
        let brr = [];
        res.data.forEach(item => {
            if (arr.indexOf(item.region) == -1) {
                arr.push(item.region);
            }
        });
        arr.forEach(item => {
            brr.push(
                Object.create(null, {
                    regio: {
                        value: item,
                    },
                })
            );
        });
        brr.forEach(item => {
            res.data.map(i => {
                if (item.regio === i.region) {
                    item['region'] = i.region;
                    item[i.name] = i.area;
                }
            });
        });
        exportExcel(brr, '作物类型统计-高标准农田', 'Sheet1');
    });
};
const Deta4 = item => {
    let region = '';
    Township.arr.forEach(item => {
        if (item.subregion == value.value) {
            region = item.subregionName == '全部' ? '黄岛区' : item.subregionName;
        }
    });
    if (value.value === '370211') {
        getTownship({ divisions: value.value, whetherToDownload: false }).then(res => {
            let arr = [];
            let brr = [];
            res.data.forEach(item => {
                if (arr.indexOf(item.tomeName) == -1) {
                    arr.push(item.tomeName);
                }
            });
            arr.forEach(ite => {
                brr.push(
                    Object.create(null, {
                        regio: {
                            value: ite,
                        },
                    })
                );
            });
            brr.forEach(item => {
                res.data.map(i => {
                    if (item.regio === i.tomeName) {
                        item['region'] = i.tomeName;
                        item[i.name] = i.area;
                    }
                });
            });

            exportExcel(brr, `${region}作物类型统计-行政区划`, 'Sheet1');
        });
    } else {
        getvillage({ divisions: value.value, whetherToDownload: false }).then(res => {
            let arr = [];
            let brr = [];
            res.data.forEach(item => {
                if (arr.indexOf(item.tomeName) == -1) {
                    arr.push(item.tomeName);
                }
            });
            arr.forEach(item => {
                brr.push(
                    Object.create(null, {
                        regio: {
                            value: item,
                        },
                    })
                );
            });
            brr.forEach(item => {
                res.data.map(i => {
                    if (item.regio === i.tomeName) {
                        item['region'] = i.tomeName;
                        item[i.name] = i.area;
                    }
                });
            });
            exportExcel(brr, `${region}作物类型统计-行政区划`, 'Sheet1');
        });
    }
};

const download = item => {
    downLoadFile(item.download);
};
const dowcity = () => {
    let arr = JSON.parse(JSON.stringify(amount.value[0]));
    arr.region = '合计';
    insectarr.value.push(arr);
    exportExcel(insectarr.value, '农作物种植面积统计表', 'Sheet1');
};
//表头数据切换  ----------前端生成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, fileName = '用户列表', pageName = 'Sheet1') => {
    let fieldNameObj = {
        region: '区域名称',
        小麦: '小麦(亩)',
        玉米: '玉米(亩)',
        大豆: '大豆(亩)',
        地瓜: '地瓜(亩)',
        花生: '花生(亩)',
        蓝莓: '蓝莓(亩)',
        茶叶: '茶叶(亩)',
        马铃薯: '马铃薯(亩)',
        白菜和萝卜: '白菜和萝卜(亩)',
        其他: '其他(亩)',
    };
    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`);
};
let dd = {
    小麦: [],
    玉米: [],
    大豆: [],
    地瓜: [],
    花生: [],
    蓝莓: [],
    茶叶: [],
    马铃薯: [],
    白菜和萝卜: [],
    其他: [],
};
let dic = {
    小麦: { color: 'rgba(25, 196, 22, 1)', disabled: false },
    玉米: { color: 'rgba(255, 240, 26, 1)', disabled: true },
    大豆: { color: 'rgba(255, 184, 148, 1)', disabled: false },
    地瓜: { color: 'rgba(255, 18, 18, 1)', disabled: false },
    花生: { color: 'rgba(255, 140, 255, 1)', disabled: false },
    蓝莓: { color: ' rgba(0, 153, 255, 1)', disabled: false },
    茶叶: { color: 'rgba(0, 209, 195, 1)', disabled: false },
    马铃薯: { color: 'rgba(253, 127, 1, 1)', disabled: true },
    白菜和萝卜: { color: 'rgba(201, 255, 148, 1)', disabled: true },
    其他: { color: 'rgba(166, 224, 255, 1)', disabled: false },
};
// 图层字典
let layersDic = {
    小麦: {
        setOf: '2023-05-30-nongzuowufenlei',
        name: 'T2023_05_30_xiaomai',
    },
    // 玉米: {
    //     setOf:'2023-05-30-nongzuowufenlei',
    //     name:'xiaomai_01',
    // },
    大豆: {
        setOf: '2023-05-30-nongzuowufenlei',
        name: 'T2023_05_30_dadou',
    },
    地瓜: {
        setOf: '2023-05-30-nongzuowufenlei',
        name: 'T2023_05_30_digua',
    },
    花生: {
        setOf: '2023-05-30-nongzuowufenlei',
        name: 'T2023_05_30_huasheng',
    },
    蓝莓: {
        setOf: '2023-05-30-nongzuowufenlei',
        name: 'T2023_05_30_lanmei',
    },
    茶叶: {
        setOf: '2023-05-30-nongzuowufenlei',
        name: 'T2023_05_30_chaye',
    },
    其他: {
        setOf: '2023-05-30-nongzuowufenlei',
        name: 'T2023_05_30_qitanongzuowu',
    },
    // 马铃薯: 'rgba(225, 153, 75, 1)',
    // 白菜和萝卜: 'rgba(166, 209, 82, 1)',
};
// 图层字典
let dictionary = {
    wheat: '小麦',
    sweet_potato: '玉米',
    soybean: '大豆',
    peanut: '花生',
    bluberry: '蓝莓',
    tea: '茶叶',
};
let dictionaryArr = [
    {
        name: '小麦',
        value: 0,
        itemStyle: {
            opacity: 0.8,
            color: 'rgba(25, 196, 22, 1)',
        },
        area: '',
    },
    {
        name: '玉米',
        value: 0,
        itemStyle: {
            opacity: 0.8,
            color: 'rgba(255, 240, 26, 1)',
        },
        area: '',
    },
    {
        // 数据项名称
        name: '花生',
        area: '',
        value: 0,
        itemStyle: {
            // 透明度
            opacity: 0.8,
            // 扇形颜色
            color: 'rgba(255, 140, 255, 1)',
        },
        label: {
            show: true,
        },
    },
    {
        // 数据项名称
        name: '大豆',
        area: '',
        value: 156,
        itemStyle: {
            // 透明度
            opacity: 0.8,
            // 扇形颜色
            color: 'rgba(255, 184, 148, 1)',
        },
        label: {
            show: true,
        },
    },
    {
        // 数据项名称
        name: '地瓜',
        area: '',
        value: 156,
        itemStyle: {
            // 透明度
            opacity: 0.8,
            // 扇形颜色
            color: 'rgba(255, 18, 18, 1)',
        },
        label: {
            show: true,
        },
    },
    {
        // 数据项名称
        name: '蓝莓',
        area: '',
        value: 56,
        itemStyle: {
            // 透明度
            opacity: 0.8,
            // 扇形颜色
            color: ' rgba(0, 153, 255, 1)',
        },
        label: {
            show: true,
        },
    },
    {
        // 数据项名称
        name: '茶叶',
        area: '',
        value: 56,
        itemStyle: {
            // 透明度
            opacity: 0.8,
            // 扇形颜色
            color: 'rgba(0, 209, 195, 1)',
        },
        label: {
            show: true,
        },
    },
    {
        // 数据项名称
        name: '马铃薯',
        area: '',
        value: 56,
        itemStyle: {
            // 透明度
            opacity: 0.8,
            // 扇形颜色
            color: 'rgba(253, 127, 1, 1)',
        },
        label: {
            show: true,
        },
    },
    {
        // 数据项名称
        name: '白菜和萝卜',
        area: '',
        value: 56,
        itemStyle: {
            // 透明度
            opacity: 0.8,
            // 扇形颜色
            color: 'rgba(201, 255, 148, 1)',
        },
        label: {
            show: true,
        },
    },
    {
        // 数据项名称
        name: '其他',
        area: '',
        value: 56,
        itemStyle: {
            // 透明度
            opacity: 0.8,
            // 扇形颜色
            color: 'rgba(166, 224, 255, 1)',
        },
        label: {
            show: true,
        },
    },
];
let Pie3D = reactive({
    arr: [],
});
var data = {
    title: ['区域一', '区域二', '区域三', '区域四', '区域五', '区域六', '区域七', '区域八'],
};
let classData = ref([]);
let namedata = ref([]);
const options = [
    {
        value: 'Option1',
        label: 'Option1',
    },
    {
        value: 'Option2',
        label: 'Option2',
    },
];

// 组件挂载完成后执行
onMounted(() => {
    initonMounted();
    // checkList.value = Object.keys(dic.filter(item => !item.disabled))
});
// 初始化
function initonMounted() {
    theTimes(); //年
    getaArea(); //面积
    //地图
    initmap();
    showDaChangArea();
    areachar(); //图表
    typesof(); //图表
    farmland(); //图表
    ASdivision(); //图表
    // getFarmland();
    alter();
    for (const key in dic) {
        if (dic[key].disabled !== true) {
            checkListdata.value.push(key);
        }
    }

    checkList.value = checkListdata.value;
    let leftWra = document.querySelector('.leftWra');
    leftWra ? (leftWra.style.transform = 'translate(-107%,0)') : '';
    let rightWra = document.querySelector('.rightWra');
    rightWra.style.transform = 'translate(107%,0)';
    localStorage.setItem(router.currentRoute.value.path, true);
}
onUpdated(() => {
    if (localStorage.getItem(router.currentRoute.value.path) == 'false') {
        document.querySelector('.mode').innerText = '地图模式';
        window.document.querySelector('#screenfull').style.display = 'none';
    } else {
        document.querySelector('.mode').innerText = '列表模式';
        window.document.querySelector('#screenfull').style.display = 'block';
    }
});
/*-------------地图------------------------*/
let map = ref(null);
let container = ref(null);
let content = ref(null);
let popupCloser = ref(null);
let overlay = ref(null);
function initmap() {
    // 获取父元素和地图容器
    var parentElement = document.querySelector('.centerBox');
    var mapContainer = document.getElementById('cesiumContainer');
    map = new ol.Map({
        target: 'cesiumContainer',
        controls: [],
        view: new ol.View({
            center: [119.86763411957472, 35.88435182141938],
            zoom: 11,
            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',
            //     }),
            // }),
        ],
    });
    //滚轮控制村级矢量
    map.on('moveend', function (e) {
        var zoom = map.getView().getZoom(); //获取当前地图的缩放级别
        if (zoom >= 13) {
            layers.setVisible(true); //显示图层
        } else {
            layers.setVisible(false);
        }
    });
    map.on('singleclick', function (e) {
        var coodinate = e.coordinate;
        var lon = coodinate[0];
        var lat = coodinate[1];
        var view = map.getView();
        var zoom = map.getView().getZoom();
        view.animate({
            center: [lon, lat],
            duration: 1000,
        });
        if (zoom >= 13) {
            QueryData(
                e,
                'CJQY3702112019WGS84@huangdaoqu_bianjie',
                'http://36.134.44.75:8090/iserver/services/map-huangdaoqu_bianjie/rest/maps/CJQY3702112019WGS84%40huangdaoqu_bianjie',
                '村'
            );
        } else {
            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);
}
//创建蒙层，凸显黄岛区域
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());
    });
}
//添加遮罩
function addConver(data) {
    let source = new ol.source.Vector();
    var converLayer = new ol.layer.Vector({
        id: 'zhezhao',
        source: source,
        style: new ol.style.Style({
            fill: new ol.style.Fill({
                color: 'rgba( 105, 105, 105, 0.9)',
            }),
        }),
    });
    const converGeom = erase(data);
    const convertFt = new ol.Feature({
        geometry: converGeom,
    });
    converLayer.getSource().addFeature(convertFt);
    map.addLayer(converLayer);
}

//擦除操作，生产遮罩范围
function erase(data) {
    console.log(data);
    const extent = [-180, -90, 180, 90];
    const polygonRing = ol.geom.Polygon.fromExtent(extent);
    const coords = data;
    console.log(coords);
    coords.forEach(coord => {
        const linearRing = new ol.geom.LinearRing(coord[0]);
        polygonRing.appendLinearRing(linearRing);
    });
    return polygonRing;
}
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: 'huangdaoqu_village',
        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,
        }),
        projection: 'EPSG:4326', //3857
        zIndex: 9999,
    });
    map.addLayer(layer);
};

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

function QueryData(e, name, url, item) {
    let newDataZh = [];
    var point = new ol.geom.Point(e.coordinate);
    var param = new ol.supermap.QueryByGeometryParameters({
        queryParams: {
            name: name,
        },
        geometry: point,
    });
    let titleDiv = document.querySelector('#popup-title');
    let layergaoliang = ref(null);
    let layerzhezhao = ref(null);
    new ol.supermap.QueryService(url).queryByGeometry(param, function (data) {
        layerzhezhao = map
            .getLayers()
            .getArray()
            .find(layer => layer.get('id') === 'zhezhao');
        map.removeLayer(layerzhezhao);
        let name = '';
        if (item == '镇' && data.result.recordsets[0].features.features[0].properties.XJQYDM) {
            let code = data.result.recordsets[0].features.features[0].properties.XJQYDM;
            value.value = code;
            getTownships();
            let arr = [];
            getTownship('370211').then(res => {
                res.data.forEach(item => {
                    if (item.tomeCode == code) {
                        name = item.tomeName;
                        arr.push(item);
                    }
                });
                alterArr.value = arr;
                alter();
            });
        } else if (
            item == '村' &&
            data.result.recordsets[0].features.features[0].properties.CJQYDM
        ) {
            let code = data.result.recordsets[0].features.features[0].properties.CJQYDM;
            let arr = [];
            getAdministrativeChun({ divisions: code }).then(res => {
                res.data.forEach(item => {
                    arr.push(item);
                });
                name = res.data[0].tomeName;
                alterArr.value = arr;
                alter();
            });
        }
        function alter() {
            if (data.result.currentCount > 0) {
                console.log(data.result.recordsets[0].features);
                if (data.result.recordsets[0].features) {
                    overlay.setPosition(point.flatCoordinates);
                    console.log(name);
                    titleDiv.innerHTML = name;
                }
                layergaoliang = map
                    .getLayers()
                    .getArray()
                    .find(layer => layer.get('id') === 'dianjigaoliang');
                map.removeLayer(layergaoliang);
                var llll = new ol.format.GeoJSON().readFeatures(data.result.recordsets[0].features);
                newDataZh = data.result.recordsets[0].features.features[0].geometry.coordinates;
                addConver(data.result.recordsets[0].features.features[0].geometry.coordinates);
                var selectFeatureSource = new ol.source.Vector();
                selectFeatureSource.addFeatures(llll);
                const style = new ol.style.Style({
                    // fill: new ol.style.Fill({
                    //     color: 'rgba(255, 219, 113, 0.3)',
                    // }),
                    stroke: new ol.style.Stroke({
                        color: 'rgba(255, 219, 113, 1.0)',
                        // lineDash: [10, 10],
                        width: 5,
                    }),
                });
                var vectorQuery = new ol.layer.Vector({
                    id: 'dianjigaoliang',
                    source: selectFeatureSource,
                    zIndex: 9999,
                });
                vectorQuery.setStyle(style);
                map.addLayer(vectorQuery);
            }
        }
    });
    popupCloser.addEventListener('click', function () {
        layerzhezhao = map
            .getLayers()
            .getArray()
            .find(layer => layer.get('id') === 'zhezhao');
        map.removeLayer(layerzhezhao);
        erase(newDataZh);
        value.value = '370211';
        layergaoliang = map
            .getLayers()
            .getArray()
            .find(layer => layer.get('id') === 'dianjigaoliang');
        map.removeLayer(layergaoliang);
        overlay.setPosition(undefined);
    });
}
// 弹窗
const alter = () => {
    container = document.getElementById('popup');
    //拿到弹出框内容元素
    content = document.getElementById('popup-content');
    //拿到弹出框关闭元素
    popupCloser = document.getElementById('popup-closer');
    //创建弹出框容器
    overlay = new ol.Overlay({
        element: document.getElementById('popup'), // 弹框容器的id
        positioning: 'bottom-center',
        stopEvent: true,
        offset: [0, -10],
    });
    map.addOverlay(overlay);
};

const checkList = ref(['false']);

let num = 0;
watch(
    () => value.value,
    () => {
        selectTab();
    }
);
// 农作物
watch(
    () => checkList.value,
    (val, oldVal) => {
        if (val.length > oldVal.length) {
            // 挑选出增多的数据
            const newData = val.filter(item => {
                const index = oldVal.findIndex(it => it === item);
                if (index < 0) {
                    return item;
                }
            });
            newData.forEach(item => {
                if (layersDic[item]) {
                    addwms(layersDic[item]);
                }
            });
            // 添加镇级矢量
        } else if (val.length < oldVal.length) {
            // 挑选出减少的数据
            const newData = oldVal.filter(item => {
                const index = val.findIndex(it => it === item);
                if (index < 0) {
                    return item;
                }
            });
            newData.forEach(item => {
                if (layersDic[item]) {
                    // 假设要删除的图层为 layerToRemove
                    var index = map.getLayers().getArray().indexOf(layersDic[item].name);
                    console.log(map.getLayers().getArray());
                    map.getLayers()
                        .getArray()
                        .forEach((ite, index) => {
                            if (ite.A.name) {
                                if (ite.A.name == layersDic[item].name) {
                                    map.getLayers().removeAt(index);
                                }
                            }
                        });
                }
            });
        }
        num++;
        if (num == 1) {
            cun(); //添加村
            zhen(); //添加镇
        }
    }
);

// 地图移动时弹窗跟随
function infoWindowPostRender() {
    // let viewer = viewers.value;
    if (clickInfoMap.value && 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('popup1');
            pop.style.top = windowPosition.y - 10 + 'px';
            pop.style.left = windowPosition.x + 10 + 'px';
        }
    }
}
// 隐藏弹窗
function hiddenOverlayChart() {
    const pop = document.getElementById('popup1');
    pop.style.display = 'none'; // 清除监听事件
    viewer.scene.postRender.removeEventListener(infoWindowPostRender);
    value.value = '370211';
    deleteEntityByName('townLine');
    selectTab();
}
//显示弹窗
function showOverlayChart(position) {
    const pop = document.getElementById('popup1');
    pop.style.position = 'absolute';
    pop.style.top = position.y - 10 + 'px';
    pop.style.left = position.x + 10 + 'px';
    pop.style.display = 'block';
    pop.style.zIndex = 99;
}

//列表模式模式切换
function SwitchMode() {
    SwitchFlag.value = !SwitchFlag.value;
    const statInfo = chartModeDiv.value; // 获取图表元素
    statInfo.style.width = window.innerWidth - 100 + 'px'; //初始化echarts图表宽度
    statInfo.style.height = window.innerHeight - 100 + 'px';
    const myChart = echarts.init(statInfo);
    // 设置宽度自适应
    window.addEventListener('resize', () => {
        statInfo.style.width = window.innerWidth - 200 + 'px';
        statInfo.style.height = window.innerHeight - 200 + 'px';
        myChart.resize();
    });
    chartModes();
}
const formLandRef = ref([]);
//每页条数
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;
};
//返回
function back() {
    value.value = '370211';
    // selectTab();
    deleteEntityByName('townLine');
    viewer.camera.flyTo({
        destination: Cesium.Rectangle.fromDegrees(119.5091, 35.5671, 120.3285, 36.1455),
        duration: 2,
    });
    flag.value = false;
}

//折叠

function leftFoldClick() {
    leftWraFlag.value = !leftWraFlag.value;
    if (leftWraFlag.value) {
        let leftWra = document.querySelector('.leftWra');
        leftWra.style.transform = 'translate(0,0)';
    } else {
        let leftWra = document.querySelector('.leftWra');
        leftWra.style.transform = 'translate(-107%,0)';
    }
}
function rightFoldClick() {
    rightWraFlag.value = !rightWraFlag.value;
    if (rightWraFlag.value) {
        let rightWra = document.querySelector('.rightWra');
        rightWra.style.transform = 'translate(0,0)';
    } else {
        let rightWra = document.querySelector('.rightWra');
        rightWra.style.transform = 'translate(107%,0)';
    }
}

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

//接口
//镇
const getTownships = (city, time) => {
    console.log(time);
    dd = {
        小麦: [],
        玉米: [],
        大豆: [],
        地瓜: [],
        花生: [],
        蓝莓: [],
        茶叶: [],
        马铃薯: [],
        白菜和萝卜: [],
        其他: [],
    };
    getTownship({ divisions: city, yearMonth: time }).then(res => {
        res.data.forEach((item, i) => {
            for (let index = 0; index < Object.values(item).length; index++) {
                if (Object.values(item)[index] == '0.0') {
                    res.data.splice(i, 1);
                }
            }
        });
        Township.brr = res.data;
        Township.arr = res.data.sort((a, b) => {
            return a.tomeName.length - b.tomeName.length;
        });
        Township.arr.unshift({
            tomeCode: '370211',
            tomeName: '全部',
        });

        let crr = [];
        let drr = [];
        Township.arr.forEach(item => {
            if (crr.indexOf(item.tomeName) == -1) {
                crr.push(item.tomeName);
                drr.push({
                    tomeName: item.tomeName,
                    tomeCode: item.tomeCode,
                    area: item.area,
                    type: item.type,
                });
            }
        });
        Township.arr = drr;
        selectOption.value = JSON.parse(JSON.stringify(Township.arr));
        selectOption.value[0].tomeCode = '';
        let arr = [...res.data];
        let brr = [];
        arr.splice(0, 1);
        arr.forEach(item => {
            if (brr.indexOf(item.tomeName) == -1) {
                brr.push(item.tomeName);
            }
        });
        data.title = [...Object.values(brr)];
        data.title.forEach((item, index) => {
            let town = res.data.map(i => {
                if (item === i.tomeName) {
                    return i;
                }
            });
            Object.keys(dd).forEach(it => {
                const index = town.findIndex(a => a && a.name === it);
                if (index > -1) {
                    dd[it].push(10);
                } else {
                    dd[it].push(null);
                }
            });
        });
        ASdivision();
    });
};
//村
const getvillages = city => {
    dd = {
        小麦: [],
        玉米: [],
        大豆: [],
        地瓜: [],
        花生: [],
        蓝莓: [],
        茶叶: [],
        马铃薯: [],
        白菜和萝卜: [],
        其他: [],
    };
    getvillage({ divisions: city }).then(res => {
        Township.brr = res.data;
        let arr = [...res.data];
        let brr = [];
        arr.splice(0, 1);
        arr.forEach(item => {
            if (brr.indexOf(item.tomeName) == -1) {
                brr.push(item.tomeName);
            }
        });
        data.title = [...Object.values(brr)];
        data.title.forEach((item, index) => {
            let town = res.data.map(i => {
                if (item === i.tomeName) {
                    return i;
                }
            });
            Object.keys(dd).forEach(it => {
                const index = town.findIndex(a => a && a.name === it && Number(a.area) > 0);
                if (index > -1) {
                    dd[it].push(1);
                } else {
                    dd[it].push(null);
                }
            });
        });
        ASdivision();
    });
};
//面积
const getaArea = () => {
    let arr = [];
    let a = {};
    getareas().then(res => {
        if (res.features) {
            Township.crr = res.features;
            data.title.forEach((item, indexs) => {
                let town = res.features.map(i => {
                    if (item === i.properties.town) {
                        return i.properties;
                    }
                });
                Object.keys(dd).forEach(it => {
                    const index = town.findIndex(a => a && a.crop === it);
                    if (index > -1) {
                        dd[it].push(1);
                    } else {
                        dd[it].push(null);
                    }
                });
            });
        }
        ASdivision();
        // selectTab();
    });
};

//作物分类面积统计
const getcroppers = (city, time) => {
    getcropper({ divisions: city, yearMonth: time }).then(res => {
        classData = ref([]);
        namedata = ref([]);
        res.data.forEach(item => {
            classData.value.unshift(item.area);
            namedata.value.unshift(item.name);
        });
        areachar();
    });
};
//作物类型统计
const getcropTypeStatisticss = (city, time) => {
    getcropTypeStatistics({ divisions: city, yearMonth: time }).then(res => {
        Pie3D.arr = [];
        let arr = [];
        res.data.forEach(item => {
            for (let index = 0; index < dictionaryArr.length; index++) {
                if (item.name == dictionaryArr[index].name) {
                    dictionaryArr[index].area = item.area;
                    dictionaryArr[index].value = 1;
                    for (const key in dic) {
                        if (key == item.name) {
                            arr.push({
                                type: item.name,
                                content: {
                                    value: item.area,
                                    percent: item.areaB,
                                    color: dic[key].color,
                                },
                            });
                        }
                    }

                    Pie3D.arr.push(dictionaryArr[index]);
                }
            }
            typesofdata.value = arr;
        });
        typesof();
    });
};
//高标准农田//highStandarditem
let highStandardArr = ref([]);
const gethighStandards = time => {
    gethighStandard({ yearMonth: time }).then(res => {
        highStandardArr.value = res.data;
        console.log(res.data);
        highStandard.forEach((item, indexs) => {
            let town = res.data.map(i => {
                if (item === i.region) {
                    return i;
                }
            });
            Object.keys(dd).forEach(it => {
                const index = town.findIndex(a => a && a.name === it && Number(a.area) > 0);
                if (index > -1) {
                    highStandarditem[it].push(70);
                } else {
                    highStandarditem[it].push(null);
                }
            });
        });
        farmland();
    });
};

const selectTab = () => {
    if (value.value == '370211') {
        getTownships('370211', oldDatas.value.name);
        getcroppers('370211', oldDatas.value.name); //作物分类面积请求
        getcropTypeStatisticss('370211', oldDatas.value.name); //作物类型统计百分比
        return;
    } else {
        console.log(oldDatas);

        getcroppers(value.value, oldDatas.value.name); //作物分类面积请求
        getcropTypeStatisticss(value.value, oldDatas.value.name); //作物类型统计百分比
        getvillages(value.value, oldDatas.value.name);
    }
};
//列表模式-年
const theTimes = () => {
    gettheTime().then(res => {
        oldDatas.value = { name: res.data[0] };
        timeArr.value = res.data;
        formInline.value.yearMonth = res.data[0];
        getlistModes(res.data[0]);
        res.data.forEach(item => {
            dataSource.value.push({ name: item });
        });
        console.log(dataSource.value);
        console.log('1111');
    });
};
//列表模式-默认展示
const getlistModes = value => {
    onSubmit();
    // getlistMode({ yearMonth: value, flag: '1', divisions: '370211' }).then(res => {
    //     insectarr.value = res.data;
    //     tableNewData.value = res.data.slice(
    //         (currentPage.value - 1) * pageSize.value,
    //         (currentPage.value - 1) * pageSize.value + pageSize.value
    //     );
    // });
};

//图表
function areachar() {
    if (areaDiv.value) {
        const areaDivIntance = echarts.init(areaDiv.value);
        console.log(classData);
        let option = {
            // backgroundColor: 'rgba(255, 255, 255, 0.1)',
            textStyle: {
                color: '#c0c3cd',
                fontSize: 14,
            },
            toolbox: {
                show: false,
                feature: {
                    saveAsImage: {
                        backgroundColor: '#031245',
                    },
                    restore: {},
                },
                iconStyle: {
                    borderColor: '#c0c3cd',
                },
            },
            legend: {
                top: 10,
                itemWidth: 8,
                itemHeight: 8,
                icon: 'circle',
                left: 'center',
                padding: 0,
                textStyle: {
                    color: '#c0c3cd',
                    fontSize: 14,
                    padding: [2, 0, 0, 0],
                },
                border: '1px solid rgba(4, 153, 153, 1)',
            },
            color: ['#00D7E9', 'rgba(0, 215, 233, 0.9)'],
            grid: {
                containLabel: true,
                left: 20,
                right: 20,
                bottom: 10,
                top: 40,
            },
            xAxis: [
                {
                    type: 'category',
                    data: namedata.value,
                    axisLine: {
                        lineStyle: {
                            color: '#C0C4CC',
                            width: 1,
                        },
                    },
                    axisTick: {
                        show: false,
                    },
                    axisLabel: {
                        margin: 10,
                        color: 'rgba(255, 255, 255, 0.7)',
                        textStyle: {
                            fontSize: 14,
                        },
                    },
                },
            ],
            yAxis: {
                nameTextStyle: {
                    color: '#c0c3cd',
                    padding: [0, 0, 0, 0],
                    fontSize: 14,
                },
                axisLabel: {
                    color: '#c0c3cd',
                    fontSize: 14,
                },
                axisTick: {
                    lineStyle: {
                        color: '#668092',
                        width: 1,
                    },
                    show: false,
                },
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: 'rgba(255, 255, 255, 0.7)',
                        type: 'dashed',
                    },
                },
                axisLine: {
                    lineStyle: {
                        color: 'rgba(255, 255, 255, 0.7)',
                        width: 1,
                        // "type": "dashed"
                    },
                    show: false,
                },
                name: '面积(亩)',
            },
            series: [
                {
                    data: classData.value,
                    type: 'bar',
                    barMaxWidth: 'auto',
                    barWidth: 30,
                    itemStyle: {
                        color: {
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            type: 'linear',
                            colorStops: [
                                {
                                    offset: 0,
                                    color: ' rgba(0, 208, 255, 0.1)',
                                },

                                {
                                    offset: 1,
                                    color: 'rgba(0, 208, 255, 0.9) ',
                                },
                            ],
                        },
                        borderWidth: 1,
                        borderColor: 'black',
                    },

                    label: {
                        show: false,
                        position: 'top',
                        distance: 10,
                        color: '#fff',
                    },
                    emphasis: {
                        itemStyle: {
                            // color: '#333FFF',
                            shadowBlur: 20, //发光图形阴影的模糊大小
                            shadowColor: 'rgba(0, 147, 252, 1)', //阴影颜色
                        },
                    },
                },
                {
                    data: [1, 1, 1, 1, 1],
                    type: 'pictorialBar',
                    barMaxWidth: '20',
                    symbol: 'diamond',
                    symbolOffset: [0, '50%'],
                    symbolSize: [30, 15],
                    tooltip: {
                        show: false,
                    },
                },
                {
                    data: classData.value,
                    type: 'pictorialBar',
                    barMaxWidth: '20',

                    symbolPosition: 'end',
                    symbol: 'diamond',
                    symbolOffset: [0, '-50%'],
                    symbolSize: [30, 12],
                    zlevel: 2,
                },
            ],
            tooltip: {
                show: true,
                formatter: '面积:{c0}',
            },
        };
        // option && areaDivIntance.setOption(option);
        useEcharts(areaDivIntance, option);
    }
}

function typesof() {
    const typesofDivIntance = echarts.init(typesofDiv.value);
    let isSelected = '';
    let isHovered = '';
    let hoveredIndex = '';
    let option = getPie3D(Pie3D.arr, 0);
    // 生成扇形的曲面参数方程
    function getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h) {
        // 计算
        const midRatio = (startRatio + endRatio) / 2;

        const startRadian = startRatio * Math.PI * 2;
        const endRadian = endRatio * Math.PI * 2;
        const midRadian = midRatio * Math.PI * 2;

        // 如果只有一个扇形，则不实现选中效果。
        if (startRatio === 0 && endRatio === 1) {
            // eslint-disable-next-line no-param-reassign
            isSelected = false;
        }

        // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
        // eslint-disable-next-line no-param-reassign
        k = typeof k !== 'undefined' ? k : 1 / 3;

        // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
        const offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
        const offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;

        // 计算高亮效果的放大比例（未高亮，则比例为 1）
        const hoverRate = isHovered ? 1.05 : 1;

        // 返回曲面参数方程
        return {
            u: {
                min: -Math.PI,
                max: Math.PI * 3,
                step: Math.PI / 32,
            },

            v: {
                min: 0,
                max: Math.PI * 2,
                step: Math.PI / 20,
            },

            x(u, v) {
                if (u < startRadian) {
                    return offsetX + Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate;
                }
                if (u > endRadian) {
                    return offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate;
                }
                return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
            },

            y(u, v) {
                if (u < startRadian) {
                    return offsetY + Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate;
                }
                if (u > endRadian) {
                    return offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate;
                }
                return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
            },

            z(u, v) {
                if (u < -Math.PI * 0.5) {
                    return Math.sin(u);
                }
                if (u > Math.PI * 2.5) {
                    return Math.sin(u) * h * 0.1;
                }
                // 当前图形的高度是Z根据h（每个value的值决定的）
                return Math.sin(v) > 0 ? 1 * h * 0.1 : -1;
            },
        };
    }
    // 生成模拟 3D 饼图的配置项
    function getPie3D(pieData, internalDiameterRatio) {
        const series = [];
        // 总和
        let sumValue = 0;
        let startValue = 0;
        let endValue = 0;
        const legendData = [];
        const k =
            typeof internalDiameterRatio !== 'undefined'
                ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
                : 1 / 3;

        // 为每一个饼图数据，生成一个 series-surface 配置
        for (let i = 0; i < pieData.length; i += 1) {
            sumValue += pieData[i].value;

            const seriesItem = {
                name: typeof pieData[i].name === 'undefined' ? `series${i}` : pieData[i].name,
                type: 'surface',
                parametric: true,
                wireframe: {
                    show: false,
                },
                pieData: pieData[i],
                pieStatus: {
                    selected: false,
                    hovered: false,
                    k,
                },
            };

            if (typeof pieData[i].itemStyle !== 'undefined') {
                const { itemStyle } = pieData[i];

                // eslint-disable-next-line no-unused-expressions
                typeof pieData[i].itemStyle.color !== 'undefined'
                    ? (itemStyle.color = pieData[i].itemStyle.color)
                    : null;
                // eslint-disable-next-line no-unused-expressions
                typeof pieData[i].itemStyle.opacity !== 'undefined'
                    ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
                    : null;

                seriesItem.itemStyle = itemStyle;
            }
            series.push(seriesItem);
        }
        // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
        // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
        for (let i = 0; i < series.length; i += 1) {
            endValue = startValue + series[i].pieData.value;

            series[i].pieData.startRatio = startValue / sumValue;
            series[i].pieData.endRatio = endValue / sumValue;
            series[i].parametricEquation = getParametricEquation(
                series[i].pieData.startRatio,
                series[i].pieData.endRatio,
                false,
                false,
                k,
                // 我这里做了一个处理，使除了第一个之外的值都是10
                series[i].pieData.value === series[0].pieData.value ? 35 : 10
            );

            startValue = endValue;

            legendData.push(series[i].name);
        }

        // 准备待返回的配置项，把准备好的 legendData、series 传入。
        const option = {
            // animation: false,
            legend: {
                show: true,
                bottom: 0,
                textStyle: { color: 'rgba(255,255,255,.9)' },
            },
            tooltip: {
                formatter: params => {
                    if (params.seriesName !== 'mouseoutSeries') {
                        let brr = '';
                        Pie3D.arr.forEach(item => {
                            if (item.name == params.seriesName) {
                                brr = item.area;
                            }
                        });
                        return `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${
                            params.color
                        };"></span>${params.seriesName}:${Number(brr)}亩`;
                    }
                    return '';
                },
            },

            xAxis3D: {
                min: -1,
                max: 1,
            },
            yAxis3D: {
                min: -1,
                max: 1,
            },
            zAxis3D: {
                min: -1,
                max: 1,
            },
            grid3D: {
                show: false,
                boxHeight: 10,
                top: '-10%',
                viewControl: {
                    // 3d效果可以放大、旋转等，请自己去查看官方配置
                    alpha: 35,
                    beta: 30,
                    rotateSensitivity: 1,
                    zoomSensitivity: 0,
                    panSensitivity: 0,
                    autoRotate: false,
                    distance: 300,
                },
                // 后处理特效可以为画面添加高光、景深、环境光遮蔽（SSAO）、调色等效果。可以让整个画面更富有质感。
                postEffect: {
                    // 配置这项会出现锯齿，请自己去查看官方配置有办法解决
                    enable: true,
                    bloom: {
                        enable: true,
                        bloomIntensity: 0.1,
                    },
                    SSAO: {
                        enable: true,
                        quality: 'medium',
                        radius: 2,
                    },
                    // temporalSuperSampling: {
                    //   enable: true,
                    // },
                },
            },
            series,
        };
        return option;
    }
    //  修正取消高亮失败的 bug
    // 监听 mouseover，近似实现高亮（放大）效果
    typesofDivIntance.on('mouseover', function (params) {
        // 准备重新渲染扇形所需的参数
        let isSelected;
        let isHovered;
        let startRatio;
        let endRatio;
        let k;
        let i;

        // 如果触发 mouseover 的扇形当前已高亮，则不做操作
        if (hoveredIndex === params.seriesIndex) {
            return;

            // 否则进行高亮及必要的取消高亮操作
        } else {
            // 如果当前有高亮的扇形，取消其高亮状态（对 option 更新）
            if (hoveredIndex !== '') {
                // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 false。
                isSelected = option.series[hoveredIndex].pieStatus.selected;
                isHovered = false;
                startRatio = option.series[hoveredIndex].pieData.startRatio;
                endRatio = option.series[hoveredIndex].pieData.endRatio;
                k = option.series[hoveredIndex].pieStatus.k;
                i =
                    option.series[hoveredIndex].pieData.value === option.series[0].pieData.value
                        ? 35
                        : 10;
                // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
                option.series[hoveredIndex].parametricEquation = getParametricEquation(
                    startRatio,
                    endRatio,
                    isSelected,
                    isHovered,
                    k,
                    i
                );
                option.series[hoveredIndex].pieStatus.hovered = isHovered;

                // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
                hoveredIndex = '';
            }

            // 如果触发 mouseover 的扇形不是透明圆环，将其高亮（对 option 更新）
            if (params.seriesName !== 'mouseoutSeries') {
                // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
                isSelected = option.series[params.seriesIndex].pieStatus.selected;
                isHovered = true;
                startRatio = option.series[params.seriesIndex].pieData.startRatio;
                endRatio = option.series[params.seriesIndex].pieData.endRatio;
                k = option.series[params.seriesIndex].pieStatus.k;

                // 对当前点击的扇形，执行高亮操作（对 option 更新）
                option.series[params.seriesIndex].parametricEquation = getParametricEquation(
                    startRatio,
                    endRatio,
                    isSelected,
                    isHovered,
                    k,
                    option.series[params.seriesIndex].pieData.value + 5
                );
                option.series[params.seriesIndex].pieStatus.hovered = isHovered;

                // 记录上次高亮的扇形对应的系列号 seriesIndex
                hoveredIndex = params.seriesIndex;
            }

            // 使用更新后的 option，渲染图表
            typesofDivIntance.setOption(option);
        }
    });

    // 修正取消高亮失败的 bug
    typesofDivIntance.on('globalout', function () {
        if (hoveredIndex !== '') {
            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
            isSelected = option.series[hoveredIndex].pieStatus.selected;
            isHovered = false;
            let k = option.series[hoveredIndex].pieStatus.k;
            startRatio = option.series[hoveredIndex].pieData.startRatio;
            endRatio = option.series[hoveredIndex].pieData.endRatio;
            // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
            i =
                option.series[hoveredIndex].pieData.value === option.series[0].pieData.value
                    ? 35
                    : 10;
            option.series[hoveredIndex].parametricEquation = getParametricEquation(
                startRatio,
                endRatio,
                isSelected,
                isHovered,
                k,
                i
            );
            option.series[hoveredIndex].pieStatus.hovered = isHovered;

            // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
            hoveredIndex = '';
        }

        // 使用更新后的 option，渲染图表
        typesofDivIntance.setOption(option);
    });

    // option && typesofDivIntance.setOption(option);
    useEcharts(typesofDivIntance, option);
}
// 高标准农田echarts
function farmland() {
    const farmlandDivIntance = echarts.init(farmlandDiv.value);
    let option = {
        // backgroundColor: '#333333',
        // tooltip: { show: true,},
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            top: '10%',
            containLabel: true,
        },
        // legend: {
        //     show: true,
        //     top: '10',
        //     left: 'center',
        //     textStyle: { color: 'rgba(255,255,255,.9)' },
        //     itemWidth: 20,
        //     itemHeight: 12.5,
        //     icon: 'stack',
        // },

        tooltip: {
            formatter: function (params) {
                // 自定义悬浮文字的格式，params.value 为当前柱状图的数值
                let a = 0;
                highStandardArr.value.forEach(item => {
                    if (item.name == params.seriesName && item.region == params.name) {
                        a = item.area;
                    }
                });
                return (
                    params.seriesName +
                    '<span style="font-size: 14px; color: #f00;">' +
                    a +
                    '</span>' +
                    '亩'
                );
            },
        },

        xAxis: {
            type: 'value',
            max: 500,
            show: false,
            // 不显示轴线
            axisLine: {
                show: false,
            },
            // 不显示刻度线
            axisTick: {
                show: false,
            },
            splitLine: {
                // 网格线为虚线
                show: false,
            },
            // axisLabel:{
            //     formatter:'{value}%'
            // }
        },
        yAxis: {
            type: 'category',
            inverse: true,
            splitLine: {
                show: false,
            },
            axisTick: {
                show: false,
            },
            axisLine: {
                show: false,
            },
            axisLabel: {
                interval: 0,
                color: 'rgba(255, 255, 255, 1)',
                fontSize: 14,
            },
            data: highStandard,
        },
        series: [
            {
                name: '小麦',
                type: 'bar',
                barWidth: 12,
                stack: 'stack',
                data: highStandarditem.小麦,
                itemStyle: {
                    normal: {
                        barBorderRadius: 0,
                        color: new echarts.graphic.LinearGradient(0, 0, 0.9, 0, [
                            {
                                offset: 1,
                                color: 'rgba(25, 196, 22, 1)',
                            },
                            {
                                offset: 0,
                                color: 'rgba(25, 196, 22, 1)',
                            },
                        ]),
                    },
                },
            },
            {
                name: '大豆',
                type: 'bar',
                barWidth: 12,
                stack: 'stack',
                data: highStandarditem.大豆,
                itemStyle: {
                    normal: {
                        barBorderRadius: 0,
                        color: new echarts.graphic.LinearGradient(0, 0, 0.9, 0, [
                            {
                                offset: 1,
                                color: 'rgba(255, 184, 148, 1)',
                            },
                            {
                                offset: 0,
                                color: 'rgba(255, 184, 148, 1)',
                            },
                        ]),
                    },
                },
            },
            {
                name: '茶叶',
                type: 'bar',
                barWidth: 12,
                stack: 'stack',
                data: highStandarditem.茶叶,
                itemStyle: {
                    normal: {
                        barBorderRadius: 0,
                        color: new echarts.graphic.LinearGradient(0, 0, 0.9, 0, [
                            {
                                offset: 1,
                                color: 'rgba(0, 209, 195, 1)',
                            },
                            {
                                offset: 0,
                                color: 'rgba(0, 209, 195, 1)',
                            },
                        ]),
                    },
                },
            },
            {
                name: '花生',
                type: 'bar',
                barWidth: 12,
                stack: 'stack',
                data: highStandarditem.花生,
                itemStyle: {
                    normal: {
                        barBorderRadius: 0,
                        color: new echarts.graphic.LinearGradient(0, 0, 0.9, 0, [
                            {
                                offset: 1,
                                color: 'rgba(255, 140, 255, 1)',
                            },
                            {
                                offset: 0,
                                color: 'rgba(255, 140, 255, 1)',
                            },
                        ]),
                    },
                },
            },
            {
                name: '蓝莓',
                type: 'bar',
                barWidth: 12,
                stack: 'stack',
                data: highStandarditem.蓝莓,
                itemStyle: {
                    normal: {
                        barBorderRadius: 0,
                        color: new echarts.graphic.LinearGradient(0, 0, 0.9, 0, [
                            {
                                offset: 1,
                                color: 'rgba(0, 153, 255, 1)',
                            },
                            {
                                offset: 0,
                                color: 'rgba(0, 153, 255, 1)',
                            },
                        ]),
                    },
                },
            },
             {
                name: '地瓜',
                type: 'bar',
                barWidth: 12,
                stack: 'stack',
                data: highStandarditem.地瓜,
                itemStyle: {
                    normal: {
                        barBorderRadius: 0,
                        color: new echarts.graphic.LinearGradient(0, 0, 0.9, 0, [
                            {
                                offset: 1,
                                color: 'rgba(255, 18, 18, 1)',
                            },
                            {
                                offset: 0,
                                color: 'rgba(255, 18, 18, 1)',
                            },
                        ]),
                    },
                },
            },
            {
                name: '其他',
                type: 'bar',
                barWidth: 12,
                stack: 'stack',
                data: highStandarditem.其他,
                itemStyle: {
                    normal: {
                        barBorderRadius: 0,
                        color: new echarts.graphic.LinearGradient(0, 0, 0.9, 0, [
                            {
                                offset: 1,
                                color: 'rgba(166, 224, 255, 1)',
                            },
                            {
                                offset: 0,
                                color: 'rgba(166, 224, 255, 1)',
                            },
                        ]),
                    },
                },
            },
        ],
    };

    // areaDivIntance.off('click') //图表渲染前销毁点击事件,防止点击图标多次触发
    // farmlandDivIntance.on('click', param => ChartClick(param));
    useEcharts(farmlandDivIntance, option);
}

function ASdivision() {
    const ASdivisionDivIntance = echarts.init(ASdivisionDiv.value);
    var option = {
        // 设置图表的位置
        grid: {
            bottom: '8%',
            left: '10%',
            right: '6%',
            top: '6%',
            containLabel: true,
        },
        tooltip: {
            formatter: function (params) {
                // 自定义悬浮文字的格式，params.value 为当前柱状图的数值
                let a = 0;
                Township.brr.forEach(item => {
                    if (item.name == params.seriesName && item.tomeName == params.name) {
                        a = item.area;
                    }
                });
                return (
                    params.seriesName +
                    '<span style="font-size: 14px; color: #f00;">' +
                    a +
                    '</span>' +
                    '亩'
                );
            },
        },
        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: 50,
                zoomOnMouseWheel: false,
                moveOnMouseMove: true,
                moveOnMouseWheel: true,
            },
        ],
        // X轴
        xAxis: {
            type: 'value', // 坐标轴类型,   'value' 数值轴，适用于连续数据
            // 坐标轴刻度
            axisTick: {
                show: false, // 是否显示坐标轴刻度 默认显示
            },
            // 坐标轴轴线
            axisLine: {
                // 是否显示坐标轴轴线 默认显示
                show: false, // 是否显示坐标轴轴线 默认显示
            },
            // 坐标轴在图表区域中的分隔线
            splitLine: {
                show: false, // 是否显示分隔线。默认数值轴显示
            },
            // 坐标轴刻度标签
            axisLabel: {
                show: false, // 是否显示刻度标签 默认显示
            },
        },
        // Y轴
        yAxis: [
            // 左侧Y轴
            {
                // 坐标轴类型,  'category' 类目轴，适用于离散的类目数据
                // 为该类型时必须通过 data 设置类目数据
                type: 'category',
                // 坐标轴刻度
                axisTick: {
                    show: false, // 是否显示坐标轴刻度 默认显示
                },
                // 坐标轴轴线
                axisLine: {
                    // 是否显示坐标轴轴线 默认显示
                    show: false, // 是否显示坐标轴轴线 默认显示
                    lineStyle: {
                        // 坐标轴线线的颜色
                        color: '#cdd3ee',
                    },
                },
                // 坐标轴在图表区域中的分隔线
                splitLine: {
                    show: false, // 是否显示分隔线。默认数值轴显示
                },
                // 坐标轴刻度标签
                axisLabel: {
                    show: true, // 是否显示刻度标签 默认显示
                    fontSize: 12, // 文字的字体大小
                    color: 'rgba(255, 255, 255, 1)', // 刻度标签文字的颜色
                    // 使用字符串模板，模板变量为刻度默认标签 {value}
                    formatter: '{value}',
                },
                // 类目数据，在类目轴（type: 'category'）中有效
                data: data.title,
                inverse: true,
            },
        ],
        // 系列列表
        series: [
            {
                type: 'bar', // 系列类型
                name: '茶叶', // 系列名称, 用于tooltip的显示, legend 的图例筛选
                // 数据堆叠，同个类目轴上系列配置相同的stack值后，后一个系列的值会在前一个系列的值上相加
                stack: '总量',
                barMaxWidth: 30, // 柱条的最大宽度，不设时自适应
                // 图形上的文本标签
                label: {
                    show: true,
                    position: 'inside',
                    formatter: '茶叶',
                    textStyle: {
                        fontSize: 12,
                        fontWeight: 'bolder',
                        color: 'black',
                    },
                },
                // 图形样式
                itemStyle: {
                    barBorderRadius: [0, 0, 0, 0],
                    barBorderRadius: [0, 0, 0, 0], //
                    borderWidth: 1, // 设置边框宽度
                    borderColor: 'rgba(0, 209, 195, 1)', // 设置边框颜色
                    color: {
                        colorStops: [
                            {
                                offset: 0,
                                color: 'rgba(0, 209, 195, 1)', // 0% 处的颜色
                            },
                            {
                                offset: 1,
                                color: 'rgba(0, 209, 195, 1)', // 100% 处的颜色
                            },
                        ],
                    },
                },
                data: dd.茶叶, // 系列中的数据内容数组
            },
            {
                type: 'bar', // 系列类型
                name: '地瓜', // 系列名称, 用于tooltip的显示, legend 的图例筛选
                // 数据堆叠，同个类目轴上系列配置相同的stack值后，后一个系列的值会在前一个系列的值上相加
                stack: '总量',
                barMaxWidth: 30, // 柱条的最大宽度，不设时自适应
                // 图形上的文本标签
                label: {
                    show: true,
                    position: 'inside',
                    formatter: '地瓜',
                    textStyle: {
                        fontSize: 12,
                        fontWeight: 'bolder',
                        color: 'black',
                    },
                },
                // 图形样式
                itemStyle: {
                    barBorderRadius: [0, 0, 0, 0],
                    barBorderRadius: [0, 0, 0, 0], //
                    borderWidth: 1, // 设置边框宽度
                    borderColor: 'rgba(255, 18, 18, 1)', // 设置边框颜色
                    color: {
                        colorStops: [
                            {
                                offset: 0,
                                color: 'rgba(255, 18, 18, 1)', // 0% 处的颜色
                            },
                            {
                                offset: 1,
                                color: 'rgba(255, 18, 18, 1)', // 100% 处的颜色
                            },
                        ],
                    },
                },
                data: dd.地瓜, // 系列中的数据内容数组
            },
            {
                type: 'bar', // 系列类型
                name: '大豆', // 系列名称, 用于tooltip的显示, legend 的图例筛选
                // 数据堆叠，同个类目轴上系列配置相同的stack值后，后一个系列的值会在前一个系列的值上相加
                stack: '总量',
                barMaxWidth: 30, // 柱条的最大宽度，不设时自适应
                // 图形上的文本标签
                label: {
                    show: true,
                    position: 'inside',
                    formatter: '大豆',
                    textStyle: {
                        fontSize: 12,
                        fontWeight: 'bolder',
                        color: 'black',
                    },
                },
                // 图形样式
                itemStyle: {
                    barBorderRadius: [0, 0, 0, 0], //
                    borderWidth: 1, // 设置边框宽度
                    borderColor: 'rgba(255, 184, 148, 1)', // 设置边框颜色
                    color: {
                        colorStops: [
                            {
                                offset: 0,
                                color: 'rgba(255, 184, 148, 1)', // 0% 处的颜色
                            },
                            {
                                offset: 1,
                                color: 'rgba(255, 184, 148, 1)', // 100% 处的颜色
                            },
                        ],
                    },
                },
                data: dd.大豆, // 系列中的数据内容数组
            },
            {
                type: 'bar', // 系列类型
                name: '花生', // 系列名称, 用于tooltip的显示, legend 的图例筛选
                // 数据堆叠，同个类目轴上系列配置相同的stack值后，后一个系列的值会在前一个系列的值上相加
                stack: '总量',
                barMaxWidth: 30, // 柱条的最大宽度，不设时自适应
                // 图形上的文本标签
                label: {
                    show: true,
                    position: 'inside',
                    formatter: '花生',
                    textStyle: {
                        fontSize: 12,
                        fontWeight: 'bolder',
                        color: 'black',
                    },
                },
                // 图形样式
                itemStyle: {
                    barBorderRadius: [0, 0, 0, 0],
                    barBorderRadius: [0, 0, 0, 0], //
                    borderWidth: 1, // 设置边框宽度
                    borderColor: 'rgba(255, 140, 255, 1)', // 设置边框颜色
                    color: {
                        colorStops: [
                            {
                                offset: 0,
                                color: 'rgba(255, 140, 255, 1)', // 0% 处的颜色
                            },
                            {
                                offset: 1,
                                color: 'rgba(255, 140, 255, 1)', // 100% 处的颜色
                            },
                        ],
                    },
                },
                data: dd.花生, // 系列中的数据内容数组
            },
            {
                type: 'bar', // 系列类型
                name: '小麦', // 系列名称, 用于tooltip的显示, legend 的图例筛选
                // 数据堆叠，同个类目轴上系列配置相同的stack值后，后一个系列的值会在前一个系列的值上相加
                stack: '总量',
                barMaxWidth: 30, // 柱条的最大宽度，不设时自适应
                // 图形上的文本标签
                label: {
                    show: true,
                    position: 'inside',
                    formatter: '小麦',
                    textStyle: {
                        fontSize: 12,
                        fontWeight: 'bolder',
                        color: 'black',
                    },
                },
                // 图形样式
                itemStyle: {
                    barBorderRadius: [0, 0, 0, 0],
                    barBorderRadius: [0, 0, 0, 0], //
                    borderWidth: 1, // 设置边框宽度
                    borderColor: 'rgba(25, 196, 22, 1)', // 设置边框颜色
                    color: {
                        colorStops: [
                            {
                                offset: 0,
                                color: 'rgba(25, 196, 22, 1)', // 0% 处的颜色
                            },
                            {
                                offset: 1,
                                color: 'rgba(25, 196, 22, 1)', // 100% 处的颜色
                            },
                        ],
                    },
                },
                data: dd.小麦, // 系列中的数据内容数组
            },
            {
                type: 'bar', // 系列类型
                name: '蓝莓', // 系列名称, 用于tooltip的显示, legend 的图例筛选
                // 数据堆叠，同个类目轴上系列配置相同的stack值后，后一个系列的值会在前一个系列的值上相加
                stack: '总量',
                barMaxWidth: 30, // 柱条的最大宽度，不设时自适应
                // 图形上的文本标签
                label: {
                    show: true,
                    position: 'inside',
                    formatter: '蓝莓',
                    textStyle: {
                        fontSize: 12,
                        fontWeight: 'bolder',
                        color: 'black',
                    },
                },
                // 图形样式
                itemStyle: {
                    barBorderRadius: [0, 0, 0, 0],
                    barBorderRadius: [0, 0, 0, 0], //
                    borderWidth: 1, // 设置边框宽度
                    borderColor: ' rgba(0, 153, 255, 1)', // 设置边框颜色
                    color: {
                        colorStops: [
                            {
                                offset: 0,
                                color: ' rgba(0, 153, 255, 1)', // 0% 处的颜色
                            },
                            {
                                offset: 1,
                                color: ' rgba(0, 153, 255, 1)', // 100% 处的颜色
                            },
                        ],
                    },
                },
                data: dd.蓝莓, // 系列中的数据内容数组
            },
            {
                type: 'bar', // 系列类型
                name: '其他', // 系列名称, 用于tooltip的显示, legend 的图例筛选
                // 数据堆叠，同个类目轴上系列配置相同的stack值后，后一个系列的值会在前一个系列的值上相加
                stack: '总量',
                barMaxWidth: 30, // 柱条的最大宽度，不设时自适应
                // 图形上的文本标签
                label: {
                    show: true,
                    position: 'inside',
                    formatter: '其他',
                    textStyle: {
                        fontSize: 12,
                        fontWeight: 'bolder',
                        color: 'black',
                    },
                },
                // 图形样式
                itemStyle: {
                    barBorderRadius: [0, 0, 0, 0],
                    barBorderRadius: [0, 0, 0, 0], //
                    borderWidth: 1, // 设置边框宽度
                    borderColor: 'rgba(166, 224, 255, 1)', // 设置边框颜色
                    color: {
                        colorStops: [
                            {
                                offset: 0,
                                color: 'rgba(166, 224, 255, 1)', // 0% 处的颜色
                            },
                            {
                                offset: 1,
                                color: 'rgba(166, 224, 255, 1)', // 100% 处的颜色
                            },
                        ],
                    },
                },
                data: dd.其他, // 系列中的数据内容数组
            },
        ],
    };
    // ASdivisionDivIntance.on('click', param => ChartClickRB(param));
    // option && ASdivisionDivIntance.setOption(option, true);
    useEcharts(ASdivisionDivIntance, option);
}

function chartModes() {
    const ASdivisionDivIntance = echarts.init(chartModeDiv.value);
    let arr = [];
    let WheatArr = [];
    let CornArr = [];
    let Soybean = [];
    let SweetPotato = [];
    let Peanuts = [];
    let Blueberries = [];
    let Tea = [];
    let Potatoes = [];
    let Cabbage = [];
    let Other = [];
    insectarr.value.forEach(item => {
        arr.push(item.region);
        item.小麦 !== undefined && WheatArr.push(item.小麦);
        item.玉米 !== undefined && CornArr.push(item.玉米);
        item.大豆 !== undefined && Soybean.push(item.大豆);
        item.地瓜 !== undefined && SweetPotato.push(item.地瓜);
        item.花生 !== undefined && Peanuts.push(item.花生);
        item.蓝莓 !== undefined && Blueberries.push(item.蓝莓);
        item.茶叶 !== undefined && Tea.push(item.茶叶);
        item.马铃薯 !== undefined && Potatoes.push(item.马铃薯);
        item.白菜和萝卜 !== undefined && Cabbage.push(item.白菜和萝卜);
        item.其他 !== undefined && Other.push(item.其他);
    });
    let ends = (10 / arr.length) * 100;
    let option = {
        tooltip: {
            trigger: 'axis',
            formatter: function (params) {
                let tipStr = params[0].axisValueLabel + '</br>';
                let totalNum = 0;
                for (let i = 0; i < params.length; i++) {
                    totalNum += params[i].value;
                    if (params[i].seriesName !== '合计') {
                        tipStr += params[i].seriesName + '：' + params[i].value + '</br>';
                    }
                }
                for (let i = 0; i < params.length; i++) {
                    totalNum += Number(params[i].value);
                    if (params[i].seriesName === '合计') {
                        tipStr += '合计：' + totalNum;
                    }
                }
                return tipStr;
            },
            axisPointer: {
                // 坐标轴指示器，坐标轴触发有效
                type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
            },
        },
        dataZoom: [
            {
                type: 'slider',
                width: '40%',
                zoomLock: true, //禁止拉伸
                top: '90%',
                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',
            },
        ],
        legend: {
            top: 10,
            left: 10,
            icon: 'rect',
            itemWidth: 4, // 图例图表宽度
            itemHeight: 12, // 图例图标高度
            data: [],
        },
        grid: {
            left: '3%',
            right: '13%',
            bottom: '15%',
            top: '10%',
            containLabel: true,
        },
        xAxis: {
            type: 'category',
            name: '区域',
            axisLabel: {
                fontSize: 12,
                interval: 0,
                rotate: 0,
            },
            axisLine: {
                lineStyle: {
                    // color: '#cbeaf6', // x坐标轴线颜色
                },
            },
            data: arr,
        },
        yAxis: [
            {
                type: 'value',
                name: '面积（亩）',
                axisLabel: {
                    // color: '#cbeaf6', // 坐标轴label文字颜色
                },
                axisLine: {
                    lineStyle: {
                        // color: '#cbeaf6', // y坐标轴线颜色
                    },
                },
                splitLine: {
                    // 网格线
                    lineStyle: {
                        // type: 'dashed', // 设置网格线类型 dotted：虚线   solid:实线
                        // color: '#395367',
                    },
                    show: true, // 隐藏或显示
                },
            },
        ],
        series: [
            {
                name: '小麦',
                type: 'bar',
                barWidth: 13,
                stack: '分类',
                itemStyle: {
                    color: 'rgba(25, 196, 22, 1)',
                },
                data: WheatArr,
            },
            {
                name: '玉米',
                type: 'bar',
                barWidth: 13,
                stack: '分类',
                itemStyle: {
                    color: 'rgba(255, 240, 26, 1)',
                },
                data: CornArr,
            },
            {
                name: '大豆',
                type: 'bar',
                barWidth: 13,
                stack: '分类',
                itemStyle: {
                    color: 'rgba(255, 184, 148, 1)',
                },
                data: Soybean,
            },
            {
                name: '地瓜',
                type: 'bar',
                barWidth: 13,
                stack: '分类',
                itemStyle: {
                    color: 'rgba(255, 18, 18, 1)',
                },
                data: SweetPotato,
            },
            {
                name: '花生',
                type: 'bar',
                barWidth: 13,
                stack: '分类',
                itemStyle: {
                    color: 'rgba(255, 140, 255, 1)',
                },
                data: Peanuts,
            },
            {
                name: '蓝莓',
                type: 'bar',
                barWidth: 13,
                stack: '分类',
                itemStyle: {
                    color: ' rgba(0, 153, 255, 1)',
                },
                data: Blueberries,
            },
            {
                name: '茶叶',
                type: 'bar',
                barWidth: 13,
                stack: '分类',
                itemStyle: {
                    color: 'rgba(0, 209, 195, 1)',
                },
                data: Tea,
            },
            {
                name: '马铃薯',
                type: 'bar',
                barWidth: 13,
                stack: '分类',
                itemStyle: {
                    color: 'rgba(253, 127, 1, 1)',
                },
                data: Potatoes,
            },
            {
                name: '白菜和萝卜',
                type: 'bar',
                barWidth: 13,
                stack: '分类',
                itemStyle: {
                    color: 'rgba(201, 255, 148, 1)',
                },
                data: Cabbage,
            },
            {
                name: '其他',
                type: 'bar',
                barWidth: 13,
                stack: '分类',
                itemStyle: {
                    color: 'rgba(166, 224, 255, 1)',
                },
                data: Other,
            },
            {
                name: '合计',
                type: 'bar',
                stack: '分类',
                label: {
                    normal: {
                        show: true,
                        position: 'top',
                        textStyle: {
                            color: '#ffffff',
                        },
                        formatter: '',
                    },
                },
                data: [],
            },
        ],
    };

    var series = option.series;
    var tooltip = option.tooltip;
    // 提示框自定义内容包括总合及文字
    function formatFun(params) {
        let tipStr = params[0].axisValueLabel + '</br>'; // 初始化提示框文字默认当前轴名称并换行
        let totalNum = 0; // 用于存储当前列总数
        // params为当前柱状图数组数量 遍历求和并添加类目label：value
        for (let i = 0; i < params.length; i++) {
            if (params[i].seriesName !== '合计') {
                const dotHtml = `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params[i].color}"></span>`;
                totalNum += params[i].value;
                tipStr += dotHtml + params[i].seriesName + '：' + params[i].value + '</br>';
            }
        }
        // 添加最后的合计行 数据为每列总合
        for (let i = 0; i < params.length; i++) {
            if (params[i].seriesName === '合计') {
                tipStr += '合计：' + totalNum;
            }
        }
        return tipStr;
    }
    tooltip.formatter = formatFun;
    // 指定函数计算总合
    function fun(params) {
        var dataSum = 0;
        for (var i = 0; i < series.length; i++) {
            dataSum += series[i].data[params.dataIndex];
        }
        return dataSum;
    }
    // 加载页面时候替换最后一个series的formatter
    series[series.length - 1].label.normal.formatter = fun;
    useEcharts(ASdivisionDivIntance, option);
}
</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;
        align-items: center;
        cursor: pointer;
        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%
            );
            background-clip: text;
            -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: 90%;

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

    .searchDiv {
        display: flex;

        .dow {
            float: right;
            margin-right: 10px;
        }

        .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 {
        height: 40%;
        max-width: 100%;
        display: flex;
        flex-direction: column;

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

    .leftbottom {
        height: 35%;
        display: flex;
        flex-direction: column;
        max-width: 100%;
        align-items: center;

        .typesofDiv {
            width: 375px;
            height: 397px;
            background-repeat: no-repeat;
            background-size: 85% 85%;
            background-position: center;
            margin-bottom: 10px;
        }
    }

    .tableDiv {
        // background: rgba(255, 255, 255, 0.05);
        width: 100%;
        padding: 5px 10px 5px 10px;
        color: rgba(255, 255, 255, 1);
        height: 20%;
        overflow: hidden;

        ::-webkit-scrollbar {
            display: none;
        }

        :deep(.el-table tr) {
            background-color: transparent;
        }

        :deep(.el-table) {
            --el-table-border-color: none;
            color: rgba(255, 255, 255, 1);
        }

        :deep(.el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell) {
            background-color: revert;
        }

        div {
            width: 100%;
            height: 100%;
            overflow-y: auto;
        }

        .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;
                justify-content: center;
            }
        }

        .el-checkbox-group {
            display: flex;
            flex-direction: column;
        }

        :deep(.ones) {
            width: 100%;
            height: 171;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            align-items: flex-start;
            --el-table-tr-bg-color: null;
            --el-table-border-color: null;
            font-size: 14px;
            font-weight: 400;
            letter-spacing: 0px;
            line-height: 0px;
            color: rgba(255, 255, 255, 1);
        }
    }
}

.rightWra {
    position: absolute;
    top: 10px;
    right: 20px;
    width: 23%;
    height: $height;
    opacity: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: rgba(2, 31, 26, 0.85);
    box-shadow: inset 0px 0px 15px 6px rgba(41, 255, 255, 0.5);
    transition: transform 1s;

    .rightFoldDiv {
        width: 30px;
        height: 30px;
        position: absolute;
        left: -8%;
        top: 50%;
        transform: translate(0, -50%);
        font-size: 30px;
        color: #ccc;
    }

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

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

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

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

        .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;
                border-radius: 0;
                box-shadow: none;
            }

            :deep(.el-input__inner) {
                color: rgba(255, 255, 255, 0.7);
            }
        }

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

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

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

.legend {
    position: absolute;
    right: 25%;
    bottom: 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: black;
    }
}

.bottom_center {
    position: absolute;
    // left: calc(400px + 20px + 8vw);
    left: -2%;
    right: 0;
    margin: auto;
    width: calc(100% - (400px * 2) - (10vw * 2));
    min-width: 380px;
    bottom: 5%;
    height: 75px;
    opacity: 1;
    border-radius: 5px;
    background: rgba(2, 31, 26, 0.6);
    border: 1px solid rgba(4, 153, 153, 1);
}

.tool {
    position: absolute;
    right: 30%;
    top: 8%;
    width: 30px;
    height: 280px;
    opacity: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    display: none;
}

#pop {
    border-radius: 5px;
    position: absolute;
    background: #fff;
    display: none;
    // justify-content: flex-start;
    // align-items: flex-end;
    padding: 8px;
    border: 2px solid rgba(4, 153, 153, 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: 8px;
    color: rgba(47, 214, 214, 1) !important;
}
.ol-popup-closer:after {
    content: '✖';
}
#popup {
    .pophead {
        background-image: url('@/assets/images/top.png') !important;
        background-repeat: no-repeat;
        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% !important;
        width: 522px;
        height: 365px;
        opacity: 1;
        background: rgba(2, 31, 26, 0.7);
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        p {
            width: 223px;
            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;
            }
        }
    }
}

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

<style lang="scss">
.select_city {
    background: rgba(2, 31, 26, 0.85);
    box-shadow: inset 0px 0px 15px 6px rgba(41, 255, 255, 0.5);

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

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

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

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

.el-popper__arrow::before {
    background: rgba(41, 255, 255, 0.7) !important;
    display: none;
}

.selectCity {
    background: #fff;
}
</style>
