<template>
    <div class="center">
        <div style="width: 100%; height: 100%" id="cesiumContainer"></div>
        <div class="leftWra">
            <div class="leftTop">
                <div class="title"><span>作物分类面积统计</span></div>
                <div ref="areaDiv" class="areaDiv"></div>
            </div>
            <div class="leftbottom">
                <div class="title"><span>作物类型统计</span></div>
                <div ref="typesofDiv" class="typesofDiv"></div>
            </div>
        </div>
        <div class="rightWra">
            <div class="rightTop">
                <div class="title">
                    <span>作物类型统计-高标准农田</span>
                    <p>
                        下载 &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>
                        下载 &nbsp;
                        <img
                            src="@/assets/icons/svg/downloads.svg"
                            style="width: 14px; height: 14px; cursor: pointer"
                        />
                    </p>
                </div>
                <el-select @change="selectTab(item)" v-model="value" clearable placeholder="全部">
                    <el-option
                        v-for="item in Township.arr"
                        :key="item.properties.XZDM"
                        :label="item.properties.XZMC"
                        :value="item.properties.XZDM"
                    />
                </el-select>
                <div ref="ASdivisionDiv" class="ASdivision"></div>
            </div>
        </div>
        <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
                            style="
                                background: rgba(251, 171, 60, 1);
                                border: 1px solid rgba(251, 171, 60, 1);
                                width: 100%;
                            "
                            v-model="checked3"
                            label="小麦"
                        />
                        <el-checkbox
                            style="
                                background: rgba(251, 219, 13, 1);
                                border: 1px solid rgba(251, 219, 13, 1);
                                width: 100%;
                            "
                            v-model="checked4"
                            label="玉米"
                        />
                        <el-checkbox
                            style="
                                background: rgba(244, 218, 136, 1);
                                border: 1px solid rgba(244, 218, 136, 1);
                                width: 100%;
                            "
                            v-model="checked3"
                            label="大豆"
                        />
                        <el-checkbox
                            style="
                                background: rgba(174, 83, 110, 1);
                                border: 1px solid rgba(174, 83, 110, 1);
                                width: 100%;
                            "
                            v-model="checked4"
                            label="地瓜"
                        />
                        <el-checkbox
                            style="
                                background: rgba(242, 177, 167, 1);
                                border: 1px solid rgba(242, 177, 167, 1);
                                width: 100%;
                            "
                            v-model="checked3"
                            label="花生"
                        />
                        <el-checkbox
                            style="
                                background: rgba(50, 211, 235, 0.8);
                                border: 1px solid rgba(50, 211, 235, 1);
                                width: 100%;
                            "
                            v-model="checked4"
                            label="蓝莓"
                        />
                        <el-checkbox
                            style="
                                background: rgba(91, 196, 159, 1);
                                border: 1px solid rgba(91, 196, 159, 1);
                                width: 100%;
                            "
                            v-model="checked3"
                            label="茶叶"
                        />
                        <el-checkbox
                            style="
                                background: rgba(225, 153, 75, 1);
                                border: 1px solid rgba(225, 153, 75, 1);
                                width: 100%;
                            "
                            v-model="checked3"
                            label="马铃薯"
                        />
                        <el-checkbox
                            style="
                                background: rgba(166, 209, 82, 1);
                                border: 1px solid rgba(166, 209, 82, 1);
                                width: 100%;
                            "
                            v-model="checked3"
                            label="白菜和萝卜"
                        />
                        <el-checkbox
                            style="
                                background: rgba(175, 110, 250, 0.8);
                                border: 1px solid rgba(175, 110, 250, 0.8);
                                width: 100%;
                            "
                            v-model="checked3"
                            label="其他"
                        />
                    </el-checkbox-group>
                </div>
            </el-collapse-item>
        </el-collapse>
        <div class="bottom_center">
            <TimeLine />
        </div>
        <div class="tool">
            <span><img src="@/assets/images/LAYER.png" alt="" /></span>
            <span><img src="@/assets/images/amplify.png" alt="" /></span>
            <span><img src="@/assets/images/reduce.png" alt="" /></span>
            <span><img src="@/assets/images/measure.png" alt="" /></span>
            <span><img src="@/assets/images/face.png" alt="" /></span>
            <span><img src="@/assets/images/position.png" alt="" /></span>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted, inject } from 'vue';
import * as echarts from 'echarts';
import TimeLine from '@/components/TimeLine/TimeLine.vue';
import { useEcharts } from '@/hooks/useEcharts';
import { getarea, getTownship, getvillage, getareas, dow } from '@/api/crops/classify.js';

let viewer = ref(null);
const areaDiv = ref(null);
const typesofDiv = ref(null);
const farmlandDiv = ref(null);
const ProgressBarDiv = ref(null);
const ASdivisionDiv = ref(null);
let Township = reactive({ arr: [], brr: [], crr: [] }); //街道
const value = ref('');
let dd = {
    小麦: [],
    玉米: [],
    大豆: [],
    地瓜: [],
    花生: [],
    蓝莓: [],
    茶叶: [],
    马铃薯: [],
    白菜和萝卜: [],
    其他: [],
};
let dic = {
    小麦: 'rgba(102, 142, 214, 0.8)',
    玉米: 'rgba(255, 225, 104, 0.8)',
    大豆: 'rgba(156, 220, 130, 0.8)',
    地瓜: 'rgba(156, 220, 130, 0.8)',
    花生: 'rgba(212, 236, 89, 0.8)',
    蓝莓: 'rgba(50, 211, 235, 0.8)',
    茶叶: 'rgba(91, 196, 159, 0.8)',
    马铃薯: 'rgba(254, 182, 77, 0.8)',
    白菜和萝卜: 'rgba(250, 129, 109, 0.8)',
    其他: 'rgba(250, 129, 109, 0.8)',
};
var data = {
    title: ['区域一', '区域二', '区域三', '区域四', '区域五', '区域六', '区域七', '区域八'],
    corn: [333.3, null, 500, 500, 333.3, null, 333.3, 500],
    soybean: [333.3, null, null, null, 333.3, null, 333.3, null],
    peanut: [333.3, 500, 500, null, 333.3, 500, 333.3, null],
    wheat: [null, 500, null, 500, null, 500, null, null],
    Blueberries: [null, null, null, null, null, null, null, 500],
};
const options = [
    {
        value: 'Option1',
        label: 'Option1',
    },
    {
        value: 'Option2',
        label: 'Option2',
    },
];
// 组件挂载完成后执行
onMounted(() => {
    getaArea(); //面积
    getTownships();
    getvillages(); //村
    initMap(); //地图
    areachar(); //图表
    typesof(); //图表
    farmland(); //图表
    ProgressBar(); //图表
    ASdivision(); //图表
    getArea(); //请求
});
const mapOption = {
    url:
        'http://{s}.tianditu.gov.cn/img_c/wmts?service=wmts&request=GetTile&version=1.0.0' +
        '&LAYER=img&tileMatrixSet=c&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}' +
        '&style=default&format=tiles&tk=31091965e263284a501a723b8909f405',
    layer: 'tdtCva',
    style: 'default',
    format: 'tiles',
    tileMatrixSetID: 'c',
    subdomains: ['t0', 't1', 't2', 't3', 't4', 't5', 't6', 't7'],
    tilingScheme: new Cesium.GeographicTilingScheme(),
    tileMatrixLabels: [
        '1',
        '2',
        '3',
        '4',
        '5',
        '6',
        '7',
        '8',
        '9',
        '10',
        '11',
        '12',
        '13',
        '14',
        '15',
        '16',
        '17',
        '18',
        '19',
    ],
    maximumLevel: 18,
};
Cesium.Ion.defaultAccessToken =
    'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJiYzcwZmJmNi02MzQ5LTQ1MGEtODgzMy0yZTZiZGExY2MzMGMiLCJpZCI6MTAxOTgsInNjb3BlcyI6WyJhc2wiLCJhc3IiLCJnYyJdLCJpYXQiOjE1ODEzMDgxNTR9.NeJU4yfUi-SnLrNDOBYsQgmiSh3B4axCTi1m84Qw99c';
function initMap() {
    viewer = new Cesium.Viewer('cesiumContainer', {
        baseLayerPicker: false,
        shouldAnimate: true, //自动播放
        infoBox: false, //信息框
        animation: false, //“动画”窗口小部件提供用于播放，暂停和倒退的按钮，以及当前时间和日期，并由“飞梭环”包围，用于控制动画的速度。cesium示例地图左下角那个
        timeline: false, //时间轴是用于显示和控制当前场景时间的小部件。
        geocoder: false, //查找，用于查找地址和地标，以及将照相机悬挂到它们。使用铯离子进行地址解析。,cesium示例地图右上角的放大镜
        homeButton: false, //主页按钮
        navigationHelpButton: false, //导航帮助按钮
        selectionIndicator: false, //原生选择绿框
        fullscreenButton: false, //右下角的全屏按钮
        // terrainProvider:new Cesium.createWorldTerrain(),
        terrainProvider: new Cesium.EllipsoidTerrainProvider({}),
        sceneModePicker: false, //是否显示投影方式控件
        contextOptions: {
            webgl: {
                alpha: true,
            },
        },

        imageryProvider: new Cesium.WebMapTileServiceImageryProvider({
            ...mapOption,
            // url: "http://service.sdmap.gov.cn/hisimage/weipian202209?tk=9cc3e9deb3cf643b6f133717c333d16d",
            // layer: "c",
            // style: ",c",
            // format: "image/png",
            // tileMatrixSetID: "EPSG:4490",
            // rectangle: Cesium.Rectangle.fromDegrees(114.8, 34.35, 122.82, 38.43),
            // // subdomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],
            // tilingScheme: new Cesium.GeographicTilingScheme(),
            // tileMatrixLabels: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19"],
            // // maximumLevel: 18
        }),
    });
    //加载地图服务
    let map = new Cesium.WebMapServiceImageryProvider({
        url: `http://121.36.229.60:9080/geoserver/shuzisannong/wms`,
        layers: 'shuzisannong:huangdaoqu_town', //图层名
        parameters: {
            service: 'WMS',
            format: 'image/png',
            transparent: true, //是否透明
        },
    });
    viewer.imageryLayers.addImageryProvider(map);

    viewer.camera.flyTo({
        destination: Cesium.Rectangle.fromDegrees(119.5091, 35.5671, 120.3285, 36.1455),
        duration: 2,
    });

    addwms();

    //加载黄岛区村级地图服务
    // Cesium.GeoJsonDataSource.load(
    //     'http://121.36.229.60:9080/geoserver/shuzisannong/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=shuzisannong%3Ahuangdaoqu_village&maxFeatures=1180&outputFormat=application%2Fjson',
    //     {
    //         stroke: Cesium.Color.fromCssColorString('red'), //轮廓颜色
    //         fill: Cesium.Color.fromCssColorString('rgba(0,0,0,0.1)'), //内部颜色
    //         strokeWidth: 3, //轮廓宽度    clampToGround: true,//是否贴地
    //     }
    // ).then(function (dataSource) {
    //     // dataSource.name = 'geojsonDataSource'//自定义属性，方便以后操作
    //     viewer.dataSources.add(dataSource); //添加
    //     viewer.flyTo(dataSource, {
    //         duration: 5,
    //         offset: {
    //             heading: 0.0,
    //             pitch: -90, //保持垂直视角
    //         },
    //     }); //移动到该位置
    // });
    //加载黄岛区镇级地图服务
    // Cesium.GeoJsonDataSource.load(
    //     'http://121.36.229.60:9080/geoserver/shuzisannong/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=shuzisannong%3Ahuangdaoqu_town&maxFeatures=50&outputFormat=application%2Fjson',
    //     {
    //         stroke: Cesium.Color.fromCssColorString('#fff'), //轮廓颜色
    //         fill: Cesium.Color.fromCssColorString('rgba(0,0,0,0.1)'), //内部颜色
    //         strokeWidth: 3, //轮廓宽度    clampToGround: true,//是否贴地
    //     }
    // ).then(function (dataSource) {
    //     // dataSource.name = 'geojsonDataSource'//自定义属性，方便以后操作
    //     viewer.dataSources.add(dataSource); //添加
    //     viewer.flyTo(dataSource, {
    //         duration: 5,
    //         offset: {
    //             heading: 0.0,
    //             pitch: -90, //保持垂直视角
    //         },
    //     }); //移动到该位置
    // });

    // axios({
    //     method: 'get',
    //     url: 'http://121.36.229.60:9080/geoserver/shuzisannong/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=shuzisannong%3Ahuangdaoqu_town&maxFeatures=50&outputFormat=application%2Fjson',
    // })
    //     .then(res => {
    //         res.data.features.forEach(item => {
    //             addBoundaryHandle(item.geometry.coordinates, '');
    //         });
    //     })
    //     .catch(error => {});

    //作物分类面积提取地图服务
    // let map2 = new Cesium.WebMapServiceImageryProvider({
    //     url: `http://121.36.229.60:9080/geoserver/shuzisannong/wms`,
    //     layers: 'shuzisannong:fenlei', //图层名
    //     parameters: {
    //         service: 'WMS',
    //         format: 'image/png',
    //         CQL_FILTER: `crop=${city_code}`,
    //         transparent: true, //是否透明
    //     },
    // });
    // viewer.imageryLayers.addImageryProvider(map2);

    // Cesium.GeoJsonDataSource.load(
    //     'http://121.36.229.60:9080/geoserver/shuzisannong/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=shuzisannong%3Afenlei&maxFeatures=50&outputFormat=application%2Fjson',
    //     {
    //         stroke: Cesium.Color.fromCssColorString('rgba(165,214,63,1)'), //轮廓颜色
    //         fill: Cesium.Color.fromCssColorString('rgba(0,0,0,0.1)'), //内部颜色
    //         strokeWidth: 3, //轮廓宽度    clampToGround: true,//是否贴地
    //     }
    // ).then(function (dataSource) {
    //     // dataSource.name = 'geojsonDataSource'//自定义属性，方便以后操作
    //     viewer.dataSources.add(dataSource); //添加
    //     viewer.flyTo(dataSource, {
    //         duration: 5,
    //         offset: {
    //             heading: 0.0,
    //             pitch: -90, //保持垂直视角
    //         },
    //     }); //移动到该位置
    // });
    //全球注记
    // let zhujiLayer = new Cesium.WebMapTileServiceImageryProvider({
    //     url: 'http://t0.tianditu.com/cia_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cia&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=5956e6519f2bb0ae8e57bc834298c9f1',
    //     layer: 'tdtImgBasicLayer',
    //     style: 'default',
    //     format: 'image/jpeg',
    //     tileMatrixSetID: 'GoogleMapsCompatible',
    //     show: false,
    // });
    // viewer.imageryLayers.addImageryProvider(zhujiLayer);

    // viewer.camera.flyTo(
    //     {
    //         destination: new Cesium.Cartesian3.fromDegrees(104.9, 36.35, 8000000),
    //         duration: 0,
    //     },
    //     {
    //         offset: {
    //             heading: Cesium.Math.toRadians(0.0),
    //             pitch: Cesium.Math.toRadians(-25),
    //         },
    //     }
    // );
}

const checkList = ref(Object.keys(dic));

function change(e) {
    console.log('e:', e);
    console.log('checkList:', checkList.value);
    removeWms('crop');
    addwms();
}

function removeWms(name) {
    // 倒叙遍历，customName是自定义的属性
    // let viewer = viewers.value
    const layers = viewer.imageryLayers._layers;
    for (let f = layers.length - 1; f >= 0; f--) {
        if (layers[f]._imageryProvider.customName === name) {
            viewer.imageryLayers.remove(layers[f]);
        }
    }
}
function addwms() {
    // let viewer = viewers.value
    const name = "'" + checkList.value.join("','") + "'";
    console.log('name:', name);
    let map = new Cesium.WebMapServiceImageryProvider({
        url: `http://121.36.229.60:9080/geoserver/shuzisannong/wms?`,
        layers: 'shuzisannong:fenlei', //图层名
        parameters: {
            service: 'WMS',
            format: 'image/png',
            transparent: true, //是否透明
            CQL_FILTER: `crop in (${name})`,
        },
    });
    map.customName = 'crop'; //自己定义各种属性
    viewer.imageryLayers.addImageryProvider(map); //添加图层
}

//接口
const getArea = () => {
    getarea({ time: '2023-04-19', subregion: '0', parent: '黄岛区' }).then(response => {
        console.log(response);
    });
};

//镇
const getTownships = () => {
    getTownship().then(res => {
        Township.arr = res.features;
        Township.arr.unshift({
            bbox: [119.5091, 35.5671, 120.3285, 36.1455],
            properties: {
                XZDM: '370211',
                XZMC: '全部',
            },
        });
        let arr = [...res.features];
        let brr = [];
        arr.splice(0, 1);
        arr.forEach(item => {
            brr.push(item.properties.XZMC);
        });
        data.title = [...Object.values(brr)];
        ASdivision();
    });
};
//村
const getvillages = () => {
    getvillage().then(res => {
        Township.brr = res.features;
    });
};
//面积
const getaArea = () => {
    let arr = [];
    getareas().then(res => {
        Township.crr = res.features;
        data.title.forEach((item, index) => {
            let town = res.features.map(i => {
                if (item === i.properties.town) {
                    return i.properties;
                }
            });
            Object.keys(dd).forEach(it => {
                const index = town.findIndex(a => a && a.crop === it);
                if (index > -1) {
                    dd[it].push(town[index].Shape_Area);
                } else {
                    dd[it].push(null);
                }
            });
        });
        console.log(dd);
        ASdivision();
    });
};

const selectTab = () => {
    console.log(value.value);
    if (value.value == '370211') {
        getTownships();
    }
    let arr = [...Township.arr];
    arr.forEach(item => {
        if (item.properties.XZDM == value.value) {
            viewer.camera.flyTo({
                destination: Cesium.Rectangle.fromDegrees(
                    item.bbox[0],
                    item.bbox[1],
                    item.bbox[2],
                    item.bbox[3]
                ),
                duration: 2,
            });
        }
        let arr = [...Township.brr];
        let brr = [];
        // console.log(Township.brr);
        arr.forEach(item => {
            if (item.properties.XZDM == value.value) {
                brr.push(item.properties.XZQMC);
            }
        });
        // console.log(brr);
        data.title = [...Object.values(brr)];
        ASdivision();
    });
    const layers = viewer.imageryLayers._layers;
    for (let f = layers.length - 1; f >= 0; f--) {
        if (layers[f]._imageryProvider.aaa === 'aaa') {
            viewer.imageryLayers.remove(layers[f]);
        }
    }
    let map2 = new Cesium.WebMapServiceImageryProvider({
        url: `http://121.36.229.60:9080/geoserver/shuzisannong/wms`,
        layers: 'shuzisannong:huangdaoqu_village', //图层名
        parameters: {
            service: 'WMS',
            format: 'image/png',
            transparent: true, //是否透明
            CQL_FILTER: `XZDM=${value.value}`,
        },
    });
    map2.aaa = 'aaa';
    viewer.imageryLayers.addImageryProvider(map2);
};

//图表
function areachar() {
    const areaDivIntance = echarts.init(areaDiv.value);

    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],
            },
        },
        color: ['#00D7E9', 'rgba(0, 215, 233, 0.9)'],
        grid: {
            containLabel: true,
            left: 20,
            right: 20,
            bottom: 10,
            top: 40,
        },
        xAxis: [
            {
                type: 'category',
                data: ['小麦', '玉米', '大豆', '花生', '蓝莓'],
                axisLine: {
                    lineStyle: {
                        color: '#C0C4CC',
                        width: 1,
                    },
                },
                axisTick: {
                    show: false,
                },
                axisLabel: {
                    margin: 10,
                    color: 'rgba(255, 255, 255, 0.7)',
                    textStyle: {
                        fontSize: 14,
                    },
                },
            },
        ],
        yAxis: {
            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: [200, 85, 112, 275, 305],
                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) ',
                            },
                        ],
                    },
                },
                label: {
                    show: true,
                    position: 'top',
                    distance: 10,
                    color: '#fff',
                },
            },
            {
                data: [1, 1, 1, 1, 1],
                type: 'pictorialBar',
                barMaxWidth: '20',
                symbol: 'diamond',
                symbolOffset: [0, '50%'],
                symbolSize: [30, 15],
            },
            {
                data: [200, 85, 112, 275, 305],
                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);
    var option = {
        // tooltip: {
        //     trigger: 'item',
        //     formatter: '{a} <br/>{b}: {c} ({d}%)',
        // },
        color: [
            'rgba(212,236,89,0.8)',
            'rgba(102,142,214,0.8)',
            'rgba(156,220,130,0.8)',
            'rgba(255,225,104,0.8)',
        ], // 指定饼图颜色
        legend: {
            orient: 'vertical', //图例方向分水平和垂直
            icon: 'rect', //图例样式
            x: 'center', //图例位置
            bottom: 'bottom',
            data: ['花生', '小麦', '大豆', '玉米'],
            textStyle: {
                color: ' rgba(255,255,255,0.7)',
                fontSize: '14',
            },
        },
        series: [
            {
                name: '占比',
                type: 'pie',
                radius: ['50%', '70%'],
                avoidLabelOverlap: true,
                label: {
                    normal: {
                        show: true,
                        position: 'left',
                        textStyle: {
                            color: 'rgba(41,255,219,1)',
                        },
                    },
                    emphasis: {
                        show: true,
                        textStyle: {
                            fontSize: '30',
                            fontWeight: 'bold',
                        },
                    },
                },
                labelLine: {
                    show: true,
                    normal: {
                        show: true,
                    },
                },
                data: [
                    { value: 25, name: '花生' },
                    { value: 25, name: '小麦' },
                    { value: 25, name: '大豆' },
                    { value: 25, name: '玉米' },
                ],
            },
        ],
    };

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

function farmland() {
    const farmlandDivIntance = echarts.init(farmlandDiv.value);
    let option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                // 坐标轴指示器，坐标轴触发有效
                type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
            },
        },
        legend: {
            top: 10,
            left: 10,
            icon: 'rect',
            itemWidth: 4, // 图例图表宽度
            itemHeight: 12, // 图例图标高度
            data: ['餐费', '打车费', '零食', '日用品'],
        },
        grid: {
            left: '3%',
            right: '13%',
            bottom: '8%',
            top: '25%',
            containLabel: true,
        },
        xAxis: {
            type: 'category',
            // name: '日期',
            axisLabel: {
                fontSize: 14,
                interval: 0,
                // rotate: 40,//旋转
                margin: 10,
                color: 'rgba(255, 255, 255, 0.7)',
                textStyle: {
                    fontSize: 14,
                },
                formatter: function (params, index) {
                    return params;
                },
            },
            axisTick: {
                show: false, // 不显示x轴刻度
            },
            axisLine: {
                lineStyle: {
                    // color: '#cbeaf6', // x坐标轴线颜色
                },
            },
            data: ['区域一', '区域二', '区域三', '区域四', '区域五'],
        },
        yAxis: [
            {
                type: 'value',
                // name: '花费',
                axisLabel: {
                    // color: '#cbeaf6', // 坐标轴label文字颜色
                },
                axisLine: {
                    lineStyle: {
                        color: 'rgba(255, 255, 255, 0.7)',
                        // color: '#cbeaf6', // y坐标轴线颜色
                    },
                },
                splitLine: {
                    // 网格线
                    lineStyle: {
                        type: 'dashed', // 设置网格线类型 dotted：虚线   solid:实线
                        color: '#395367',
                    },
                    show: true, // 隐藏或显示
                },
            },
        ],
        series: [
            {
                name: '小麦',
                type: 'bar',
                barWidth: 13,
                stack: '分类',
                itemStyle: {
                    color: 'rgba(255, 141, 26, 1)',
                },
                data: [402, 35, 40, 30, 35, 50],
            },
            {
                name: '玉米',
                type: 'bar',
                barWidth: 13,
                stack: '分类',
                itemStyle: {
                    color: 'rgba(255, 255, 26, 1)',
                },
                data: [12, 13, 15, 12, 11, 12],
            },
            {
                name: '大豆',
                type: 'bar',
                barWidth: 13,
                stack: '分类',
                itemStyle: {
                    color: 'rgba(255, 201, 148, 1)',
                },
                data: [25, 23, 19, 20, 22, 30],
            },
            {
                name: '地瓜',
                type: 'bar',
                barWidth: 13,
                stack: '分类',
                itemStyle: {
                    color: 'rgba(255, 84, 84, 1)',
                },
                data: [12, 13, 12, 50, 10, 16],
            },
        ],
    };

    var series = option.series;
    var tooltip = option.tooltip;
    // 提示框自定义内容包括总合及文字
    function formatFun(params) {
        // console.log('params====>', 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>`;

                tipStr += dotHtml + params[i].seriesName + '</br>';
            }
        }
        return tipStr;
    }
    tooltip.formatter = formatFun;
    // 加载页面时候替换最后一个series的formatter
    option && farmlandDivIntance.setOption(option, { notMerge: true, grid: { bottom: 20 } });
    useEcharts(farmlandDivIntance, option);
}
function ProgressBar() {
    const ProgressBarDivIntance = echarts.init(ProgressBarDiv.value);
    var option = {
        // backgroundColor: '#031d33',
        grid: {
            top: 0,
            bottom: '10%',
            left: '10%',
            right: '10%',
        },
        xAxis: {
            show: false,
            type: 'value',
            boundaryGap: [0, 0],
        },
        yAxis: [
            {
                type: 'category',
                data: [''],
                axisLine: { show: false },
                axisTick: [
                    {
                        show: false,
                    },
                ],
            },
        ],
        series: [
            {
                name: '金额',
                type: 'bar',
                zlevel: 1,
                itemStyle: {
                    normal: {
                        barBorderRadius: 30,
                        color: new echarts.graphic.LinearGradient(1, 0, 0, 1, [
                            {
                                offset: 1,
                                color: 'rgba(7,99,84,0.95) ',
                            },
                            {
                                offset: 0,
                                color: 'rgba(71,179,161,0.95)',
                            },
                        ]),
                    },
                },
                barWidth: 20,
                data: [10],
            },
            {
                name: '背景',
                type: 'bar',
                barWidth: 20,
                barGap: '-100%',
                data: [20],
                itemStyle: {
                    normal: {
                        color: 'rgba(255, 255, 255, 0.2)',

                        barBorderRadius: 50,
                    },
                },
            },
        ],
    };
    option && ProgressBarDivIntance.setOption(option);
    useEcharts(ProgressBarDivIntance, option);
}

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

<style lang="scss" scoped>
$height: calc(100vh - 100px);
.center {
    width: 100%;
    height: 100%;
    .title {
        width: 100%;
        height: 45px;
        background: url('@/assets/images/title.png');
        color: #fff;
        font-size: 18px;
        font-weight: 700;
        line-height: 45px;
        padding-left: 46px;
        display: flex;
        align-items: center;
        cursor: pointer;
        justify-content: space-between;
        span {
            width: 80%;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
        }
        p {
            width: 79px;
            height: 25px;
            border-radius: 20px;
            font-size: 14px;
            background: linear-gradient(
                180deg,
                rgba(16, 111, 111, 1) 0%,
                rgba(47, 214, 214, 1) 100%
            );
            border: 1.5px solid rgba(23, 194, 180, 1);
            display: flex;
            justify-content: center;
            align-items: center;
        }
    }
}

.leftWra {
    position: absolute;
    top: 10px;
    left: 20px;
    height: $height;
    width: 23%;
    background: rgba(2, 31, 26, 0.85);
    box-shadow: inset 0px 0px 15px 6px rgba(41, 255, 255, 0.5);
    .leftTop {
        // height: 35%;
        max-width: calc(100% - 20px);
        display: flex;
        flex-direction: column;
        .areaDiv {
            width: 100%;
            height: 327px;
            opacity: 1;
            display: flex;
            padding: 1px;
        }
    }
    .leftbottom {
        height: 35%;
        display: flex;
        flex-direction: column;
        .typesofDiv {
            width: 100%;
            height: 267px;
        }
    }
}

.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);
    .rightTop {
        width: 100%;
        height: 40%;
        opacity: 1;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        .farmlandDiv {
            width: 100%;
            height: 340px;
            opacity: 1;
        }
        .ProgressBar {
            width: 100%;
            height: 9px;
            opacity: 1;
        }
    }
    .rightbottom {
        width: 100%;
        height: 455px;
        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;
            }
            :deep(.el-input__inner) {
                color: rgba(255, 255, 255, 0.7);
            }
        }
        .ASdivision {
            width: 415px;
            height: 368px;
            opacity: 1;
        }
    }
}

.legend {
    position: absolute;
    right: 25%;
    bottom: 7%;
    width: 129px;
    // 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;
    }
    --el-collapse-border-color: none;
    --el-collapse-content-bg-color: none;
    // opacity: 1;
    // border-radius: 4px;
    // background: rgba(2, 31, 26, 0.6);
    // display: flex;
    // flex-direction: column;
    // justify-content: flex-start;
    // align-items: center;
    // padding: 10px 10px 10px 10px;
    p {
        margin: 10px;
        font-size: 14px;
        font-weight: 400;
        letter-spacing: 0px;
        line-height: 0px;
        color: rgba(255, 255, 255, 1);
        text-align: center;
    }
    .mt-4 {
        .el-checkbox {
            height: 30px;
            width: 100%;
            margin-bottom: 2px;
            padding-left: 10px;
            font-size: 14px;
            font-weight: 400;
            letter-spacing: 0px;
            line-height: 0px;
            color: rgba(255, 255, 255, 1);
            text-align: left;
        }
    }
    :deep(.el-checkbox__label) {
        color: rgba(255, 255, 255, 1);
    }
}

.bottom_center {
    position: absolute;
    left: calc(400px + 20px + 8vw);
    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;
}
</style>
