From 4192cb142ff94b0949483d65943500b62e7f0976 Mon Sep 17 00:00:00 2001
From: tianlong <17603473476@163.com>
Date: Thu, 27 Apr 2023 11:44:35 +0800
Subject: [PATCH] up

---
 src/views/crops/area/index.vue         |   71 +-
 src/views/crops/classify/index.vue     |  303 ++-
 src/views/crops/output/wheat/index.vue | 2709 ++++++++++++++++++-
 src/views/crops/site/index.vue         | 3281 +++++++++++++++++++++++-
 4 files changed, 6240 insertions(+), 124 deletions(-)

diff --git a/src/views/crops/area/index.vue b/src/views/crops/area/index.vue
index dac7541..6267301 100644
--- a/src/views/crops/area/index.vue
+++ b/src/views/crops/area/index.vue
@@ -104,6 +104,9 @@
                     </div>
                 </div>
             </div>
+            <div class="leftFoldDiv" @click="leftFoldClick()">
+                <el-icon><ArrowRightBold /></el-icon>
+            </div>
         </div>
         <div class="rightWra">
             <div class="rightTop">
@@ -159,6 +162,9 @@
                 </el-select>
                 <div ref="ASdivisionDiv" class="ASdivision"></div>
             </div>
+            <div class="rightFoldDiv" @click="rightFoldClick()">
+                <el-icon><ArrowLeftBold /></el-icon>
+            </div>
         </div>
 
         <div class="bottom_center">
@@ -217,6 +223,8 @@ const clickInfoMap = ref({ name: '', value: '' });
 const checkedCities = ref([]);
 const formLandRef = ref([]);
 const flag = ref(false);
+let leftWraFlag = ref(true);
+let rightWraFlag = ref(true);
 let ff = ref('{x:765,y:191}');
 let Pie3D = reactive({
     arr: [
@@ -472,6 +480,8 @@ function initMap() {
             // // maximumLevel: 18
         }),
     });
+    // 去除logo
+    viewer.cesiumWidget.creditContainer.style.display = 'none';
     //加载地图服务
     // let map = new Cesium.WebMapServiceImageryProvider({
     //     url: `http://121.36.229.60:9080/geoserver/shuzisannong/wms`,
@@ -935,10 +945,32 @@ function deleteEntityByName(name) {
         }
     }
 }
+//折叠
+
+function leftFoldClick() {
+    leftWraFlag.value = !leftWraFlag.value;
+    if (leftWraFlag.value) {
+        let leftWra = document.querySelector('.leftWra');
+        leftWra.style.transform = 'translate(0,0)';
+    } else {
+        let leftWra = document.querySelector('.leftWra');
+        leftWra.style.transform = 'translate(-107%,0)';
+    }
+}
+function rightFoldClick() {
+    rightWraFlag.value = !rightWraFlag.value;
+    if (rightWraFlag.value) {
+        let rightWra = document.querySelector('.rightWra');
+        rightWra.style.transform = 'translate(0,0)';
+    } else {
+        let rightWra = document.querySelector('.rightWra');
+        rightWra.style.transform = 'translate(107%,0)';
+    }
+}
 
 /*------------------接口--------------------*/
 const getArea = () => {
-    getarea({ time: '2023-04-19', subregion: '1', parent: '黄岛区' }).then(res => {
+    getarea({ time: '2023-04-25', subregion: '1', parent: '黄岛区' }).then(res => {
         console.log(res);
     });
 };
@@ -1200,7 +1232,7 @@ const selectTab = () => {
                 },
             ],
         });
-        hiddenOverlayChart()
+        hiddenOverlayChart();
     }
     areatext = '1293842';
     tableData = [
@@ -1271,7 +1303,7 @@ const selectTab = () => {
     removeWms(['aaa']);
     // 添加村
     addvillage(`XZDM=${value.value}`, 'aaa');
-    getarea({ time: '2023-04-19', subregion: '1', parent: '黄岛区' }).then(res => {
+    getarea({ time: '2023-04-26', subregion: '1', parent: '黄岛区' }).then(res => {
         let arr = [];
         res.data.map((item, index) => {
             if (item.region == townData.properties.XZMC) {
@@ -1315,7 +1347,6 @@ function areachar() {
         '2023/06/06',
         '2023/07/06',
         '2023/08/06',
-        '2023/09/06',
     ];
     const areaDivIntance = echarts.init(areaDiv.value);
     var option = {
@@ -2358,7 +2389,7 @@ function ASdivision() {
                 return (
                     params.seriesName +
                     '<span style="font-size: 14px; color: #f00;">' +
-                    params.value +
+                    (params.value / 66.72).toFixed(2) +
                     '</span>' +
                     '亩'
                 );
@@ -3036,6 +3067,8 @@ $height: calc(100vh - 100px);
         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;
@@ -3076,10 +3109,20 @@ $height: calc(100vh - 100px);
     top: 10px;
     left: 20px;
     height: $height;
-    width: 25%;
+    width: 23%;
     background: rgba(2, 31, 26, 0.85);
     box-shadow: inset 0px 0px 15px 6px rgba(41, 255, 255, 0.5);
-
+    transition: transform 1s;
+    .leftFoldDiv {
+        width: 30px;
+        height: 30px;
+        position: absolute;
+        right: -12%;
+        top: 50%;
+        transform: translate(-50%, -50%);
+        font-size: 30px;
+        color: #ccc;
+    }
     .leftTop {
         width: 100%;
         display: flex;
@@ -3180,7 +3223,7 @@ $height: calc(100vh - 100px);
     position: absolute;
     top: 10px;
     right: 20px;
-    width: 25%;
+    width: 23%;
     height: $height;
     opacity: 1;
     display: flex;
@@ -3188,7 +3231,17 @@ $height: calc(100vh - 100px);
     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%;
diff --git a/src/views/crops/classify/index.vue b/src/views/crops/classify/index.vue
index 50fb442..f5b6de4 100644
--- a/src/views/crops/classify/index.vue
+++ b/src/views/crops/classify/index.vue
@@ -28,6 +28,9 @@
                 </div>
                 <div ref="typesofDiv" class="typesofDiv"></div>
             </div>
+            <div class="leftFoldDiv" @click="leftFoldClick()">
+                <el-icon><ArrowRightBold /></el-icon>
+            </div>
         </div>
         <div class="rightWra">
             <div class="rightTop">
@@ -71,6 +74,9 @@
                 </el-select>
                 <div ref="ASdivisionDiv" class="ASdivision"></div>
             </div>
+            <div class="rightFoldDiv" @click="rightFoldClick()">
+                <el-icon><ArrowLeftBold /></el-icon>
+            </div>
         </div>
         <el-collapse class="legend" accordion>
             <el-collapse-item name="1">
@@ -201,6 +207,8 @@ let Township = reactive({ arr: [], brr: [], crr: [] }); //街道
 const value = ref('370211');
 const clickInfoMap = ref({ info: [] });
 const flag = ref(false);
+let leftWraFlag = ref(true);
+let rightWraFlag = ref(true);
 let dd = {
     小麦: [],
     玉米: [],
@@ -849,6 +857,30 @@ function back() {
     });
     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 getArea = (item, index) => {
     return getarea({ time: '2023-04-19', subregion: index, parent: item }).then(response => {
@@ -916,62 +948,146 @@ const selectTab = () => {
         classData = [302034, 243990, 42344, 34234, 304235];
         deleteEntityByName('townLine');
         removeWms(['village_CQL']);
+        Pie3D = reactive({
+            arr: [
+                {
+                    name: '小麦',
+                    value: 101,
+                    itemStyle: {
+                        opacity: 0.8,
+                        color: 'rgba(110, 209, 84, 0.9)',
+                    },
+                },
+                {
+                    // 数据项名称
+                    name: '花生',
+                    value: 156,
+                    itemStyle: {
+                        // 透明度
+                        opacity: 0.8,
+                        // 扇形颜色
+                        color: 'rgba(251, 201, 3, 1)',
+                    },
+                    label: {
+                        show: true,
+                    },
+                },
+                {
+                    // 数据项名称
+                    name: '大豆',
+                    value: 156,
+                    itemStyle: {
+                        // 透明度
+                        opacity: 0.8,
+                        // 扇形颜色
+                        color: 'rgba(240, 129, 31, 0.9)',
+                    },
+                    label: {
+                        show: true,
+                    },
+                },
+                {
+                    // 数据项名称
+                    name: '地瓜',
+                    value: 156,
+                    itemStyle: {
+                        // 透明度
+                        opacity: 0.8,
+                        // 扇形颜色
+                        color: 'rgba(27, 85, 222, 1)',
+                    },
+                    label: {
+                        show: true,
+                    },
+                },
+                {
+                    // 数据项名称
+                    name: '蓝莓',
+                    value: 56,
+                    itemStyle: {
+                        // 透明度
+                        opacity: 0.8,
+                        // 扇形颜色
+                        color: 'rgba(72, 102, 211, 0.9)',
+                    },
+                    label: {
+                        show: true,
+                    },
+                },
+            ],
+        });
     } else if (value.value) {
         classData = [102034, 173990, 22344, 14234, 104235];
+        Pie3D = reactive({
+            arr: [
+                {
+                    name: '小麦',
+                    value: 101,
+                    itemStyle: {
+                        opacity: 0.8,
+                        color: 'rgba(110, 209, 84, 0.9)',
+                    },
+                },
+                {
+                    // 数据项名称
+                    name: '花生',
+                    value: 156,
+                    itemStyle: {
+                        // 透明度
+                        opacity: 0.8,
+                        // 扇形颜色
+                        color: 'rgba(251, 201, 3, 1)',
+                    },
+                    label: {
+                        show: true,
+                    },
+                },
+                {
+                    // 数据项名称
+                    name: '大豆',
+                    value: 156,
+                    itemStyle: {
+                        // 透明度
+                        opacity: 0.8,
+                        // 扇形颜色
+                        color: 'rgba(240, 129, 31, 0.9)',
+                    },
+                    label: {
+                        show: true,
+                    },
+                },
+                {
+                    // 数据项名称
+                    name: '地瓜',
+                    value: 0,
+                    itemStyle: {
+                        // 透明度
+                        opacity: 0.8,
+                        // 扇形颜色
+                        color: 'rgba(27, 85, 222, 1)',
+                    },
+                    label: {
+                        show: false,
+                    },
+                },
+                {
+                    // 数据项名称
+                    name: '蓝莓',
+                    value: 156,
+                    itemStyle: {
+                        // 透明度
+                        opacity: 0.8,
+                        // 扇形颜色
+                        color: 'rgba(72, 102, 211, 0.9)',
+                    },
+                    label: {
+                        show: false,
+                    },
+                },
+            ],
+        });
     }
-
-    Pie3D.arr = [
-        {
-            name: '小麦',
-            value: 20,
-            itemStyle: {
-                opacity: 0.5,
-                color: 'rgba(110, 209, 84, 0.9)',
-            },
-        },
-        {
-            // 数据项名称
-            name: '花生',
-            value: 10,
-            itemStyle: {
-                // 透明度
-                opacity: 0.5,
-                // 扇形颜色
-                color: 'rgba(251, 201, 3, 1)',
-            },
-            label: {
-                show: true,
-            },
-        },
-        {
-            // 数据项名称
-            name: '大豆',
-            value: 13,
-            itemStyle: {
-                // 透明度
-                opacity: 0.5,
-                // 扇形颜色
-                color: 'rgba(240, 129, 31, 0.9)',
-            },
-            label: {
-                show: true,
-            },
-        },
-        {
-            // 数据项名称
-            name: '地瓜',
-            value: 18,
-            itemStyle: {
-                // 透明度
-                opacity: 0.5,
-                // 扇形颜色
-                color: 'rgba(27, 85, 222, 1)',
-            },
-            label: {
-                show: true,
-            },
-        },
-    ];
+    typesof();
     areachar();
     let arr = [...Township.arr];
     arr.forEach(item => {
@@ -1349,50 +1465,7 @@ function typesof() {
                     return '';
                 },
             },
-            // visualMap: [
-            //     {
-            //         show: false,
-            //         dimension: 2, // [x, y, z, u, v]
-            //         min: -1,
-            //         seriesIndex: 0,
-            //         max: 1,
-            //         inRange: {
-            //             color: ['#ff0', '#f00'],
-            //         },
-            //     },
-            //     {
-            //         show: false,
-            //         dimension: 4, // [x, y, z, u, v]
-            //         min: 0,
-            //         seriesIndex: 1,
-            //         max: Math.PI * 2,
-            //         inRange: {
-            //             color: ['#0bf', '#0f0', '#0bf'],
-            //         },
-            //     },
-            //     {
-            //         show: false,
-            //         dimension: 3, // [x, y, z, u, v]
-            //         min: 0,
-            //         seriesIndex: 2,
-            //         max: Math.PI * 2,
-            //         inRange: {
-            //             color: [
-            //                 '#a50026',
-            //                 '#d73027',
-            //                 '#f46d43',
-            //                 '#fdae61',
-            //                 '#fee090',
-            //                 '#ffffbf',
-            //                 '#e0f3f8',
-            //                 '#abd9e9',
-            //                 '#74add1',
-            //                 '#4575b4',
-            //                 '#313695',
-            //             ],
-            //         },
-            //     },
-            // ],
+
             xAxis3D: {
                 min: -1,
                 max: 1,
@@ -1713,7 +1786,7 @@ function ChartClick(item) {
     // 移除作物
     removeWms(['huangdaoqu_town'], true);
     removeWms(['shuzisannong:huangdaoqu_town']);
-    selectTab()
+    selectTab();
     let layername = 'shuzisannong:farmland';
 
     // 判断是否存在避免重复添加
@@ -2080,6 +2153,8 @@ $height: calc(100vh - 100px);
         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;
@@ -2123,7 +2198,17 @@ $height: calc(100vh - 100px);
     width: 23%;
     background: rgba(2, 31, 26, 0.85);
     box-shadow: inset 0px 0px 15px 6px rgba(41, 255, 255, 0.5);
-
+    transition: transform 1s;
+    .leftFoldDiv {
+        width: 30px;
+        height: 30px;
+        position: absolute;
+        right: -12%;
+        top: 50%;
+        transform: translate(-50%, -50%);
+        font-size: 30px;
+        color: #ccc;
+    }
     .leftTop {
         // height: 35%;
         max-width: calc(100% - 20px);
@@ -2134,8 +2219,8 @@ $height: calc(100vh - 100px);
             width: 100%;
             height: 327px;
             opacity: 1;
-            display: flex;
             padding: 1px;
+            display: flex;
             justify-content: center;
         }
     }
@@ -2170,7 +2255,17 @@ $height: calc(100vh - 100px);
     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%;
@@ -2184,6 +2279,8 @@ $height: calc(100vh - 100px);
             width: 100%;
             height: 340px;
             opacity: 1;
+            display: flex;
+            justify-content: center;
         }
 
         .ProgressBar {
@@ -2223,9 +2320,11 @@ $height: calc(100vh - 100px);
         }
 
         .ASdivision {
-            width: 415px;
+            width: 100%;
             height: 368px;
             opacity: 1;
+            display: flex;
+            justify-content: center;
         }
 
         :deep(.el-select__popper) {
diff --git a/src/views/crops/output/wheat/index.vue b/src/views/crops/output/wheat/index.vue
index 4d238c9..85806e2 100644
--- a/src/views/crops/output/wheat/index.vue
+++ b/src/views/crops/output/wheat/index.vue
@@ -1,10 +1,2709 @@
-/
 <template>
-    <div>小麦</div>
+    <div class="center">
+        <div style="width: 100%; height: 100%" id="cesiumContainer"></div>
+        <div class="leftWra">
+            <div class="leftTop">
+                <div class="title">
+                    <span>作物产量预估</span>
+                    <p
+                        @click="
+                            Deta(
+                                'https://1912c.oss-cn-beijing.aliyuncs.com/egg-oss-demo/zhongzhimianjishijian.xlsx'
+                            )
+                        "
+                    >
+                        下载 &nbsp;
+
+                        <img
+                            src="@/assets/icons/svg/downloads.svg"
+                            style="width: 14px; height: 14px; cursor: pointer"
+                        />
+                    </p>
+                </div>
+                <div ref="areaDiv" class="areaDiv"></div>
+            </div>
+            <div class="leftFoldDiv" @click="leftFoldClick()">
+                <el-icon><ArrowRightBold /></el-icon>
+            </div>
+        </div>
+        <div class="rightWra">
+            <div class="rightTop">
+                <div class="title">
+                    <span>作物产量预估-高标准农田</span>
+                    <p
+                        @click="
+                            Deta(
+                                'https://1912c.oss-cn-beijing.aliyuncs.com/egg-oss-demo/81f3b011-7a5d-4a21-88aa-8ea51142e564_%E6%95%B0%E6%8D%AE%E5%AF%BC%E5%87%BA.xlsx'
+                            )
+                        "
+                    >
+                        下载 &nbsp;
+                        <img
+                            src="@/assets/icons/svg/downloads.svg"
+                            style="width: 14px; height: 14px; cursor: pointer"
+                        />
+                    </p>
+                </div>
+                <div ref="farmlandDiv" class="farmlandDiv"></div>
+                <!-- <div ref="ProgressBarDiv" class="ProgressBar"></div> -->
+            </div>
+            <div class="rightbottom">
+                <div class="title">
+                    <span>作物长势等级统计-行政区划</span>
+                    <p
+                        @click="
+                            Deta(
+                                'https://1912c.oss-cn-beijing.aliyuncs.com/egg-oss-demo/0c0ff4cf-151a-470e-856a-b0fce0fde997_%E6%95%B0%E6%8D%AE%E5%AF%BC%E5%87%BA.xlsx'
+                            )
+                        "
+                    >
+                        下载 &nbsp;
+                        <img
+                            src="@/assets/icons/svg/downloads.svg"
+                            style="width: 14px; height: 14px; cursor: pointer"
+                        />
+                    </p>
+                </div>
+                <el-select
+                    popper-class="select_city"
+                    @change="selectTab(item)"
+                    v-model="value"
+                    clearable
+                    placeholder="全部"
+                >
+                    <el-option
+                        v-for="item in Township.arr"
+                        :key="item.properties.XZDM"
+                        :label="item.properties.XZMC"
+                        :value="item.properties.XZDM"
+                    />
+                </el-select>
+                <div ref="ASdivisionDiv" class="ASdivision"></div>
+            </div>
+            <div class="rightFoldDiv" @click="rightFoldClick()">
+                <el-icon><ArrowLeftBold /></el-icon>
+            </div>
+        </div>
+
+        <div class="bottom_center">
+            <TimeLine />
+        </div>
+        <div class="tool">
+            <span><img src="@/assets/images/LAYER.png" alt="" /></span>
+            <span><img src="@/assets/images/amplify.png" alt="" /></span>
+            <span><img src="@/assets/images/reduce.png" alt="" /></span>
+            <span><img src="@/assets/images/measure.png" alt="" /></span>
+            <span><img src="@/assets/images/face.png" alt="" /></span>
+            <span><img src="@/assets/images/position.png" alt="" /></span>
+        </div>
+        <div id="popup">
+            <div>{{ clickInfoMap.name }}：</div>
+            <div>{{ clickInfoMap.value }}亩</div>
+            <div class="cancel" @click="hiddenOverlayChart">X</div>
+        </div>
+        <div id="pop">
+            <div v-for="(item, index) in townZuowu.label" :key="index">
+                <div>{{ item.crop }}：</div>
+                <div>{{ (item.Shape_Area / 666.67).toFixed(2) }} 亩</div>
+            </div>
+            <div v-if="townZuowu.XZQMC">
+                <div>村名：</div>
+                <div>{{ townZuowu.XZQMC }}</div>
+            </div>
+            <div class="cancel" @click="hiddenOverlayChart">X</div>
+        </div>
+        <el-button v-if="flag" class="back_button" @click="back()">返回</el-button>
+    </div>
 </template>
 
-<script>
-export default {};
+<script setup>
+import { ref, onMounted, inject, reactive, watch } from 'vue';
+import * as echarts from 'echarts';
+import TimeLine from '@/components/TimeLine/TimeLine.vue';
+import * as turf from '@turf/turf';
+import { useEcharts } from '@/hooks/useEcharts';
+import { getarea, getTownship, getvillage, getareas, dow } from '@/api/crops/classify.js';
+import axios from 'axios';
+import 'echarts-gl';
+import { download } from '@/utils/request';
+
+let viewer = ref(null);
+const areaDiv = ref(null);
+const farmlandDiv = ref(null);
+const ProgressBarDiv = ref(null);
+const ASdivisionDiv = ref(null);
+const value = ref('370211');
+const leftProgressBarDiv = ref(null);
+let Township = reactive({ arr: [], brr: [], crr: [] }); //街道
+let OptionArr = reactive({ arr: [] });
+const clickInfoMap = ref({ name: '', value: '' });
+const checkedCities = ref([]);
+const formLandRef = ref([]);
+const flag = ref(false);
+let leftWraFlag = ref(true);
+let rightWraFlag = ref(true);
+let ff = ref('{x:765,y:191}');
+let Pie3D = reactive({
+    arr: [
+        {
+            name: '小麦',
+            value: 101,
+            itemStyle: {
+                opacity: 0.5,
+                color: 'rgba(110, 209, 84, 0.9)',
+            },
+        },
+        {
+            // 数据项名称
+            name: '花生',
+            value: 156,
+            itemStyle: {
+                // 透明度
+                opacity: 0.5,
+                // 扇形颜色
+                color: 'rgba(251, 201, 3, 1)',
+            },
+            label: {
+                show: true,
+            },
+        },
+        {
+            // 数据项名称
+            name: '大豆',
+            value: 156,
+            itemStyle: {
+                // 透明度
+                opacity: 0.5,
+                // 扇形颜色
+                color: 'rgba(240, 129, 31, 0.9)',
+            },
+            label: {
+                show: true,
+            },
+        },
+        {
+            // 数据项名称
+            name: '地瓜',
+            value: 156,
+            itemStyle: {
+                // 透明度
+                opacity: 0.5,
+                // 扇形颜色
+                color: 'rgba(27, 85, 222, 1)',
+            },
+            label: {
+                show: true,
+            },
+        },
+        {
+            // 数据项名称
+            name: '蓝莓',
+            value: 56,
+            itemStyle: {
+                // 透明度
+                opacity: 0.5,
+                // 扇形颜色
+                color: 'rgba(72, 102, 211, 0.9)',
+            },
+            label: {
+                show: true,
+            },
+        },
+        {
+            // 数据项名称
+            name: '茶叶',
+            value: 56,
+            itemStyle: {
+                // 透明度
+                opacity: 0.5,
+                // 扇形颜色
+                color: 'rgba(26, 255, 140, 1)',
+            },
+            label: {
+                show: true,
+            },
+        },
+    ],
+});
+
+let dic = {
+    小麦: 'rgba(102, 142, 214, 0.8)',
+    玉米: 'rgba(255, 225, 104, 0.8)',
+    大豆: 'rgba(156, 220, 130, 0.8)',
+    地瓜: 'rgba(156, 220, 130, 0.8)',
+    花生: 'rgba(212, 236, 89, 0.8)',
+    蓝莓: 'rgba(50, 211, 235, 0.8)',
+    茶叶: 'rgba(91, 196, 159, 0.8)',
+    马铃薯: 'rgba(254, 182, 77, 0.8)',
+    白菜和萝卜: 'rgba(250, 129, 109, 0.8)',
+    其他: 'rgba(250, 129, 109, 0.8)',
+};
+watch(
+    () => Township.arr,
+    val => {
+        console.log('val:', val);
+    }
+);
+//行政区划数据
+var data = {
+    title: [],
+};
+let dd = {
+    小麦: [],
+    玉米: [],
+    大豆: [],
+    地瓜: [],
+    花生: [],
+    蓝莓: [],
+    茶叶: [],
+    马铃薯: [],
+    白菜和萝卜: [],
+    其他: [],
+};
+let areatext = '8383894';
+
+//表格数据
+let tableData = [
+    {
+        date: '小麦',
+        name: '2934362亩',
+        address: '35%',
+    },
+    {
+        date: '玉米',
+        name: '1676778亩',
+        address: '20%',
+    },
+    {
+        date: '大豆',
+        name: '1257584亩',
+        address: '15%',
+    },
+    {
+        date: '地瓜',
+        name: '1341423亩',
+        address: '16%',
+    },
+    {
+        date: '花生',
+        name: '1592939亩',
+        address: '19%',
+    },
+];
+let TypeTime = {
+    大豆: [1100, 1395, 1948, 2203, 3402, 1860, 2934, 2490, 2323],
+    小麦: [1283, 2883, 2939, 1233, 1992, 1928, 3949, 1929, 3434],
+    地瓜: [1823, 1948, 1928, 2294, 2302, 3903, 3493, 2323, 2545],
+    花生: [2374, 1934, 3943, 3493, 2083, 1928, 2984, 3279, 1739],
+};
+
+// 组件挂载完成后执行
+onMounted(() => {
+    getArea(); //请求
+    getaArea(); //面积
+    getTownships();
+    getvillages(); //村
+
+    //地图
+    initMap();
+    areachar();
+    farmland();
+    // ProgressBar();
+    ASdivision();
+    getFarmland();
+});
+
+/*-------------地图------------------------*/
+const mapOption = {
+    url:
+        'http://{s}.tianditu.gov.cn/img_c/wmts?service=wmts&request=GetTile&version=1.0.0' +
+        '&LAYER=img&tileMatrixSet=c&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}' +
+        '&style=default&format=tiles&tk=31091965e263284a501a723b8909f405',
+    layer: 'tdtCva',
+    style: 'default',
+    format: 'tiles',
+    tileMatrixSetID: 'c',
+    subdomains: ['t0', 't1', 't2', 't3', 't4', 't5', 't6', 't7'],
+    tilingScheme: new Cesium.GeographicTilingScheme(),
+    tileMatrixLabels: [
+        '1',
+        '2',
+        '3',
+        '4',
+        '5',
+        '6',
+        '7',
+        '8',
+        '9',
+        '10',
+        '11',
+        '12',
+        '13',
+        '14',
+        '15',
+        '16',
+        '17',
+        '18',
+        '19',
+    ],
+    maximumLevel: 18,
+};
+Cesium.Ion.defaultAccessToken =
+    'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJiYzcwZmJmNi02MzQ5LTQ1MGEtODgzMy0yZTZiZGExY2MzMGMiLCJpZCI6MTAxOTgsInNjb3BlcyI6WyJhc2wiLCJhc3IiLCJnYyJdLCJpYXQiOjE1ODEzMDgxNTR9.NeJU4yfUi-SnLrNDOBYsQgmiSh3B4axCTi1m84Qw99c';
+function initMap() {
+    viewer = new Cesium.Viewer('cesiumContainer', {
+        baseLayerPicker: false,
+        shouldAnimate: true, //自动播放
+        infoBox: false, //信息框
+        animation: false, //“动画”窗口小部件提供用于播放，暂停和倒退的按钮，以及当前时间和日期，并由“飞梭环”包围，用于控制动画的速度。cesium示例地图左下角那个
+        timeline: false, //时间轴是用于显示和控制当前场景时间的小部件。
+        geocoder: false, //查找，用于查找地址和地标，以及将照相机悬挂到它们。使用铯离子进行地址解析。,cesium示例地图右上角的放大镜
+        homeButton: false, //主页按钮
+        navigationHelpButton: false, //导航帮助按钮
+        selectionIndicator: false, //原生选择绿框
+        fullscreenButton: false, //右下角的全屏按钮
+        // terrainProvider:new Cesium.createWorldTerrain(),
+        terrainProvider: new Cesium.EllipsoidTerrainProvider({}),
+        sceneModePicker: false, //是否显示投影方式控件
+        contextOptions: {
+            webgl: {
+                alpha: true,
+            },
+        },
+
+        imageryProvider: new Cesium.WebMapTileServiceImageryProvider({
+            ...mapOption,
+            // url: "http://service.sdmap.gov.cn/hisimage/weipian202209?tk=9cc3e9deb3cf643b6f133717c333d16d",
+            // layer: "c",
+            // style: ",c",
+            // format: "image/png",
+            // tileMatrixSetID: "EPSG:4490",
+            // rectangle: Cesium.Rectangle.fromDegrees(114.8, 34.35, 122.82, 38.43),
+            // // subdomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],
+            // tilingScheme: new Cesium.GeographicTilingScheme(),
+            // tileMatrixLabels: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19"],
+            // // maximumLevel: 18
+        }),
+    });
+    // 去除logo
+    viewer.cesiumWidget.creditContainer.style.display = 'none';
+    //加载地图服务
+    // let map = new Cesium.WebMapServiceImageryProvider({
+    //     url: `http://121.36.229.60:9080/geoserver/shuzisannong/wms`,
+    //     layers: 'shuzisannong:huangdaoqu_town', //图层名
+    //     parameters: {
+    //         service: 'WMS',
+    //         format: 'image/png',
+    //         transparent: true, //是否透明
+    //     },
+    // });
+    // viewer.imageryLayers.addImageryProvider(map);
+    addWms('shuzisannong:huangdaoqu_town', 'tl');
+    viewer.camera.flyTo({
+        destination: Cesium.Rectangle.fromDegrees(119.5091, 35.5671, 120.3285, 36.1455),
+        duration: 2,
+    });
+
+    // 图层点击事件
+    layerClick();
+    // 蒙版
+    mbHandle();
+
+    //加载黄岛区村级地图服务
+    // Cesium.GeoJsonDataSource.load(
+    //     'http://121.36.229.60:9080/geoserver/shuzisannong/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=shuzisannong%3Ahuangdaoqu_village&maxFeatures=1180&outputFormat=application%2Fjson',
+    //     {
+    //         stroke: Cesium.Color.fromCssColorString('red'), //轮廓颜色
+    //         fill: Cesium.Color.fromCssColorString('rgba(0,0,0,0.1)'), //内部颜色
+    //         strokeWidth: 3, //轮廓宽度    clampToGround: true,//是否贴地
+    //     }
+    // ).then(function (dataSource) {
+    //     // dataSource.name = 'geojsonDataSource'//自定义属性，方便以后操作
+    //     viewer.dataSources.add(dataSource); //添加
+    //     viewer.flyTo(dataSource, {
+    //         duration: 5,
+    //         offset: {
+    //             heading: 0.0,
+    //             pitch: -90, //保持垂直视角
+    //         },
+    //     }); //移动到该位置
+    // });
+    //加载黄岛区镇级地图服务
+    // Cesium.GeoJsonDataSource.load(
+    //     'http://121.36.229.60:9080/geoserver/shuzisannong/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=shuzisannong%3Ahuangdaoqu_town&maxFeatures=50&outputFormat=application%2Fjson',
+    //     {
+    //         stroke: Cesium.Color.fromCssColorString('#fff'), //轮廓颜色
+    //         fill: Cesium.Color.fromCssColorString('rgba(0,0,0,0.1)'), //内部颜色
+    //         strokeWidth: 3, //轮廓宽度    clampToGround: true,//是否贴地
+    //     }
+    // ).then(function (dataSource) {
+    //     // dataSource.name = 'geojsonDataSource'//自定义属性，方便以后操作
+    //     viewer.dataSources.add(dataSource); //添加
+    //     viewer.flyTo(dataSource, {
+    //         duration: 5,
+    //         offset: {
+    //             heading: 0.0,
+    //             pitch: -90, //保持垂直视角
+    //         },
+    //     }); //移动到该位置
+    // });
+
+    // axios({
+    //     method: 'get',
+    //     url: 'http://121.36.229.60:9080/geoserver/shuzisannong/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=shuzisannong%3Ahuangdaoqu_town&maxFeatures=50&outputFormat=application%2Fjson',
+    // })
+    //     .then(res => {
+    //         res.data.features.forEach(item => {
+    //             addBoundaryHandle(item.geometry.coordinates, '');
+    //         });
+    //     })
+    //     .catch(error => {});
+
+    //作物分类面积提取地图服务
+    // let map2 = new Cesium.WebMapServiceImageryProvider({
+    //     url: `http://121.36.229.60:9080/geoserver/shuzisannong/wms`,
+    //     layers: 'shuzisannong:fenlei', //图层名
+    //     parameters: {
+    //         service: 'WMS',
+    //         format: 'image/png',
+    //         CQL_FILTER: `crop=${city_code}`,
+    //         transparent: true, //是否透明
+    //     },
+    // });
+    // viewer.imageryLayers.addImageryProvider(map2);
+
+    // Cesium.GeoJsonDataSource.load(
+    //     'http://121.36.229.60:9080/geoserver/shuzisannong/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=shuzisannong%3Afenlei&maxFeatures=50&outputFormat=application%2Fjson',
+    //     {
+    //         stroke: Cesium.Color.fromCssColorString('rgba(165,214,63,1)'), //轮廓颜色
+    //         fill: Cesium.Color.fromCssColorString('rgba(0,0,0,0.1)'), //内部颜色
+    //         strokeWidth: 3, //轮廓宽度    clampToGround: true,//是否贴地
+    //     }
+    // ).then(function (dataSource) {
+    //     // dataSource.name = 'geojsonDataSource'//自定义属性，方便以后操作
+    //     viewer.dataSources.add(dataSource); //添加
+    //     viewer.flyTo(dataSource, {
+    //         duration: 5,
+    //         offset: {
+    //             heading: 0.0,
+    //             pitch: -90, //保持垂直视角
+    //         },
+    //     }); //移动到该位置
+    // });
+    //全球注记
+    // let zhujiLayer = new Cesium.WebMapTileServiceImageryProvider({
+    //     url: 'http://t0.tianditu.com/cia_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cia&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=5956e6519f2bb0ae8e57bc834298c9f1',
+    //     layer: 'tdtImgBasicLayer',
+    //     style: 'default',
+    //     format: 'image/jpeg',
+    //     tileMatrixSetID: 'GoogleMapsCompatible',
+    //     show: false,
+    // });
+    // viewer.imageryLayers.addImageryProvider(zhujiLayer);
+
+    // viewer.camera.flyTo(
+    //     {
+    //         destination: new Cesium.Cartesian3.fromDegrees(104.9, 36.35, 8000000),
+    //         duration: 0,
+    //     },
+    //     {
+    //         offset: {
+    //             heading: Cesium.Math.toRadians(0.0),
+    //             pitch: Cesium.Math.toRadians(-25),
+    //         },
+    //     }
+    // );
+}
+
+// data数据数组
+// name实体名称，方便以后删除
+// color实体颜色
+function addBoundaryHandle(data, name, color) {
+    data.forEach(item => {
+        let arr = [];
+        item[0].forEach(mem => {
+            arr.push(mem[0]);
+            arr.push(mem[1]);
+        });
+        viewer.entities.add({
+            name: name,
+            polyline: {
+                positions: Cesium.Cartesian3.fromDegreesArray(arr),
+                width: 6,
+                // material: new Cesium.PolylineDashMaterialProperty({//虚线
+                material: new Cesium.PolylineGlowMaterialProperty({
+                    //光晕
+                    glowPower: 0.2,
+                    color: color
+                        ? Cesium.Color.fromCssColorString(color)
+                        : Cesium.Color.fromBytes(250, 128, 114), //#FA8072
+                }),
+                // followSurface: false, //是否贴着地表
+                clampToGround: true, //贴地
+            },
+        });
+    });
+}
+function getLevel(height) {
+    if (height > 48000000) {
+        return 0;
+    } else if (height > 24000000) {
+        return 1;
+    } else if (height > 12000000) {
+        return 2;
+    } else if (height > 6000000) {
+        return 3;
+    } else if (height > 3000000) {
+        return 4;
+    } else if (height > 1500000) {
+        return 5;
+    } else if (height > 750000) {
+        return 6;
+    } else if (height > 375000) {
+        return 7;
+    } else if (height > 187500) {
+        return 8;
+    } else if (height > 93750) {
+        return 9;
+    } else if (height > 46875) {
+        return 10;
+    } else if (height > 23437.5) {
+        return 11;
+    } else if (height > 11718.75) {
+        return 12;
+    } else if (height > 5859.38) {
+        return 13;
+    } else if (height > 2929.69) {
+        return 14;
+    } else if (height > 1464.84) {
+        return 15;
+    } else if (height > 732.42) {
+        return 16;
+    } else if (height > 366.21) {
+        return 17;
+    } else {
+        return 18;
+    }
+}
+function getFarmland() {
+    axios({
+        url:
+            serverAPI.geoserverUrl +
+            '/shuzisannong/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=shuzisannong%3Afarmland&maxFeatures=50&outputFormat=application%2Fjson',
+        method: 'get',
+    })
+        .then(res => {
+            console.log('农田：', res);
+            formLandRef.value = res.data.features;
+        })
+        .catch(err => {});
+}
+
+let townZuowu = ref({ label: [] }); //镇的作物
+let XZDM = '';
+// 图层点击事件
+function layerClick() {
+    var handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas);
+    handler.setInputAction(function (movement) {
+        var ray = viewer.camera.getPickRay(movement.position);
+        var cartesian = viewer.scene.globe.pick(ray, viewer.scene);
+        if (cartesian) {
+            let cartographic = Cesium.Cartographic.fromCartesian(cartesian);
+            if (cartographic) {
+                let xy = new Cesium.Cartesian2();
+                let alti = viewer.camera.positionCartographic.height;
+                let level = getLevel(alti);
+                const layers = viewer.imageryLayers._layers;
+                const index = layers.findIndex(
+                    item =>
+                        item._imageryProvider._layers &&
+                        item._imageryProvider._layers === 'shuzisannong:huangdaoqu_town'
+                );
+                if (index > -1) {
+                    const providerPoint = layers[index];
+                    // 拿取最后一个图层
+                    let provider = providerPoint._imageryProvider;
+                    if (
+                        provider &&
+                        provider.ready &&
+                        provider._layers &&
+                        providerPoint.show === true
+                    ) {
+                        xy = provider.tilingScheme.positionToTileXY(cartographic, level, xy);
+                        let promise = provider.pickFeatures(
+                            xy.x,
+                            xy.y,
+                            level,
+                            cartographic.longitude,
+                            cartographic.latitude
+                        );
+                        if (promise) {
+                            promise.then(data => {
+                                if (data.length > 0) {
+                                    let newData = data['0'];
+                                    if (newData.properties && newData.properties.XZDM) {
+                                        if (XZDM !== newData.properties.XZDM) {
+                                            //防止
+                                            XZDM = newData.properties.XZDM;
+                                            value.value = XZDM; //
+                                            selectTab(); //
+                                            let item = newData.data;
+                                            // 定位
+                                            viewer.camera.flyTo({
+                                                destination: Cesium.Rectangle.fromDegrees(
+                                                    item.bbox[0],
+                                                    item.bbox[1],
+                                                    item.bbox[2],
+                                                    item.bbox[3]
+                                                ),
+                                                duration: 2,
+                                            });
+                                            // 移除高亮
+                                            deleteEntityByName('townLine');
+                                            // 高亮边界
+                                            addBoundaryHandle(
+                                                item.geometry && item.geometry.coordinates,
+                                                'townLine',
+                                                'yellow'
+                                            );
+                                            // 移除以前的
+                                            removeWms(['village_CQL']);
+                                            // 添加新的
+                                            addvillage(
+                                                `XZDM=${newData.properties.XZDM}`,
+                                                'village_CQL'
+                                            );
+
+                                            // 显示该镇的种植结构
+                                            let entitys = viewer.entities._entities._array;
+                                            for (var na = entitys.length - 1; na >= 0; na--) {
+                                                if (
+                                                    entitys[na]._name &&
+                                                    entitys[na]._name ===
+                                                        'point' + newData.properties.XZDM
+                                                ) {
+                                                    let info = entitys[na]._info;
+                                                    // entitys[na].label.show = true
+                                                    townZuowu.value = info; //保存数据
+                                                    console.log(
+                                                        townZuowu.value,
+                                                        '------------------'
+                                                    );
+                                                    showOverlayChart(movement.position); // 添加地图移动监听：使地图移动弹窗跟着移动
+                                                    viewer.scene.postRender.addEventListener(
+                                                        infoWindowPostRender
+                                                    );
+                                                } else {
+                                                    // if (entitys[na].label) {
+                                                    //     entitys[na].label.show = false
+                                                    // }
+                                                }
+                                            }
+                                            // 移除村高亮
+                                            deleteEntityByName('villageLine');
+                                            XZQDM = '';
+                                        } else {
+                                            // // 已经有镇了，监听村点击
+                                            villageClick(layers, xy, level, cartographic);
+                                        }
+                                    } else {
+                                        removeWms(['village_CQL']);
+                                        // 移除框框
+                                        hiddenOverlayChart(); // 清除监听事件
+                                    }
+                                }
+                            });
+                        }
+                    }
+                }
+            }
+        }
+    }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
+}
+let XZQDM = '';
+// 村点击高亮
+function villageClick(layers, xy, level, cartographic) {
+    const index = layers.findIndex(
+        item =>
+            item._imageryProvider._layers &&
+            item._imageryProvider._layers === 'shuzisannong:huangdaoqu_village'
+    );
+    if (index > -1) {
+        const providerPoint = layers[index];
+        // 拿取最后一个图层
+        let provider = providerPoint._imageryProvider;
+        if (provider && provider.ready && provider._layers && providerPoint.show === true) {
+            xy = provider.tilingScheme.positionToTileXY(cartographic, level, xy);
+            let promise = provider.pickFeatures(
+                xy.x,
+                xy.y,
+                level,
+                cartographic.longitude,
+                cartographic.latitude
+            );
+            if (promise) {
+                promise.then(data => {
+                    if (data.length > 0) {
+                        let newData = data['0'];
+                        if (newData.properties && newData.properties.XZQDM) {
+                            if (XZQDM !== newData.properties.XZQDM) {
+                                //防止
+                                XZQDM = newData.properties.XZQDM;
+                                let item = newData.data;
+                                // 移除高亮
+                                deleteEntityByName('villageLine');
+                                // 高亮边界
+                                addBoundaryHandle(
+                                    item.geometry && item.geometry.coordinates,
+                                    'villageLine',
+                                    'yellow'
+                                );
+                                // townZuowu.value = info//保存数据
+
+                                // 后插和村
+                                if (newData.properties.XZQDM === '370211104217') {
+                                    // console.log('后河岔村委会')
+                                    const rectangle = Cesium.Rectangle.fromDegrees(
+                                        item.bbox[0],
+                                        item.bbox[1],
+                                        item.bbox[2],
+                                        item.bbox[3]
+                                    );
+                                    const center = Cesium.Rectangle.center(rectangle); //获取视角范围中心点(得到的结果为弧度Cartographic)
+                                    let longitude = Cesium.Math.toDegrees(center.longitude); //将弧度转为度
+                                    let latitude = Cesium.Math.toDegrees(center.latitude);
+                                    let info = {
+                                        lon: longitude,
+                                        lat: latitude,
+                                        ...item.properties,
+                                        // XZQMC
+                                        label: [
+                                            { crop: '茶叶', Shape_Area: 2820 },
+                                            { crop: '大豆', Shape_Area: 2767 },
+                                            { crop: '花生', Shape_Area: 62356 },
+                                            { crop: '蓝莓', Shape_Area: 5443 },
+                                            { crop: '地瓜', Shape_Area: 897 },
+                                            { crop: '小麦', Shape_Area: 20111 },
+                                        ],
+                                    };
+                                    townZuowu.value = info; //保存数据
+                                }
+                            }
+                        }
+                    }
+                });
+            }
+        }
+    }
+}
+// 添加村
+// CQL_FILTER:筛选的语句
+// customName地图服务自定义属性名
+function addvillage(CQL_FILTER, customName) {
+    let map2 = new Cesium.WebMapServiceImageryProvider({
+        url: `http://121.36.229.60:9080/geoserver/shuzisannong/wms`,
+        layers: 'shuzisannong:huangdaoqu_village', //图层名
+        parameters: {
+            service: 'WMS',
+            format: 'image/png',
+            transparent: true, //是否透明
+            // CQL_FILTER: `XZDM=${value.value}`,
+            CQL_FILTER: CQL_FILTER,
+        },
+    });
+    map2.customName = customName;
+    viewer.imageryLayers.addImageryProvider(map2);
+}
+// 移除wms
+// nameArry ：属性名数组（customName）
+// isMohu ：是否模糊查询
+function removeWms(nameArry, isMohu) {
+    if (viewer) {
+        // 倒叙遍历，customName是自定义的属性
+        const layers = viewer.imageryLayers._layers;
+        for (let f = layers.length - 1; f >= 0; f--) {
+            nameArry.forEach(item => {
+                if (layers[f]._imageryProvider && layers[f]._imageryProvider.customName) {
+                    if (isMohu) {
+                        if (layers[f]._imageryProvider.customName.indexOf(item) > -1) {
+                            viewer.imageryLayers.remove(layers[f]);
+                        }
+                    } else {
+                        if (layers[f]._imageryProvider.customName === item) {
+                            viewer.imageryLayers.remove(layers[f]);
+                        }
+                    }
+                }
+            });
+        }
+    }
+}
+
+// 根据实体名字删除实体(模糊删除)
+function deleteEntityByName(name) {
+    if (viewer) {
+        let entitys = viewer.entities._entities._array;
+        for (var na = entitys.length - 1; na >= 0; na--) {
+            if (entitys[na]._name && entitys[na]._name === name) {
+                viewer.entities.remove(entitys[na]);
+            }
+        }
+    }
+}
+//折叠
+
+function leftFoldClick() {
+    leftWraFlag.value = !leftWraFlag.value;
+    if (leftWraFlag.value) {
+        let leftWra = document.querySelector('.leftWra');
+        leftWra.style.transform = 'translate(0,0)';
+    } else {
+        let leftWra = document.querySelector('.leftWra');
+        leftWra.style.transform = 'translate(-107%,0)';
+    }
+}
+function rightFoldClick() {
+    rightWraFlag.value = !rightWraFlag.value;
+    if (rightWraFlag.value) {
+        let rightWra = document.querySelector('.rightWra');
+        rightWra.style.transform = 'translate(0,0)';
+    } else {
+        let rightWra = document.querySelector('.rightWra');
+        rightWra.style.transform = 'translate(107%,0)';
+    }
+}
+
+/*------------------接口--------------------*/
+const getArea = () => {
+    getarea({ time: '2023-04-25', subregion: '1', parent: '黄岛区' }).then(res => {
+        console.log(res);
+    });
+};
+//镇
+const getTownships = () => {
+    getTownship().then(res => {
+        Township.arr = res.features;
+        Township.arr.unshift({
+            bbox: [119.5091, 35.5671, 120.3285, 36.1455],
+            properties: {
+                XZDM: '370211',
+                XZMC: '全部',
+            },
+        });
+        let arr = [...res.features];
+        let brr = [];
+        arr.splice(0, 1);
+        arr.forEach(item => {
+            brr.push(item.properties.XZMC);
+        });
+        data.title = [...Object.values(brr)];
+        ASdivision();
+    });
+};
+//村
+const getvillages = () => {
+    getvillage().then(res => {
+        Township.brr = res.features;
+    });
+};
+//面积
+const getaArea = () => {
+    getareas().then(res => {
+        Township.crr = res.features;
+        data.title.forEach((item, index) => {
+            let town = res.features.map(i => {
+                if (item === i.properties.town) {
+                    return i.properties;
+                }
+            });
+            Object.keys(dd).forEach(it => {
+                const index = town.findIndex(a => a && a.crop === it);
+                if (index > -1) {
+                    dd[it].push(town[index].Shape_Area);
+                } else {
+                    dd[it].push(null);
+                }
+            });
+        });
+        ASdivision();
+    });
+};
+
+const selectTab = () => {
+    getArea();
+    TypeTime = {
+        大豆: [1034, 1295, 1348, 1203, 2402, 1160, 1934, 1490],
+        小麦: [1083, 1883, 2139, 1033, 992, 1328, 2949, 1529],
+        地瓜: [1223, 1548, 1828, 2094, 2202, 2903, 3293, 2023],
+        花生: [1374, 1734, 3143, 2493, 1983, 1728, 2584, 3079],
+    };
+    Pie3D.arr = [
+        {
+            name: '小麦',
+            value: 20,
+            itemStyle: {
+                opacity: 0.5,
+                color: 'rgba(110, 209, 84, 0.9)',
+            },
+        },
+        {
+            // 数据项名称
+            name: '花生',
+            value: 10,
+            itemStyle: {
+                // 透明度
+                opacity: 0.5,
+                // 扇形颜色
+                color: 'rgba(251, 201, 3, 1)',
+            },
+            label: {
+                show: true,
+            },
+        },
+        {
+            // 数据项名称
+            name: '大豆',
+            value: 13,
+            itemStyle: {
+                // 透明度
+                opacity: 0.5,
+                // 扇形颜色
+                color: 'rgba(240, 129, 31, 0.9)',
+            },
+            label: {
+                show: true,
+            },
+        },
+        {
+            // 数据项名称
+            name: '地瓜',
+            value: 18,
+            itemStyle: {
+                // 透明度
+                opacity: 0.5,
+                // 扇形颜色
+                color: 'rgba(27, 85, 222, 1)',
+            },
+            label: {
+                show: true,
+            },
+        },
+        {
+            // 数据项名称
+            name: '茶叶',
+            value: 16,
+            itemStyle: {
+                // 透明度
+                opacity: 0.5,
+                // 扇形颜色
+                color: 'rgba(26, 255, 140, 1)',
+            },
+            label: {
+                show: true,
+            },
+        },
+    ];
+    if (value.value == '370211') {
+        removeWms(['village_CQL']);
+        removeWms(['aaa']);
+        getTownships();
+        tableData = [
+            {
+                date: '小麦',
+                name: '2934362亩',
+                address: '35%',
+            },
+            {
+                date: '玉米',
+                name: '1676778亩',
+                address: '20%',
+            },
+            {
+                date: '大豆',
+                name: '1257584亩',
+                address: '15%',
+            },
+            {
+                date: '地瓜',
+                name: '1341423亩',
+                address: '16%',
+            },
+            {
+                date: '花生',
+                name: '1592939亩',
+                address: '19%',
+            },
+        ];
+        TypeTime = {
+            大豆: [1100, 1395, 1948, 2203, 3402, 1860, 2934, 2490],
+            小麦: [1283, 2883, 2939, 1233, 1992, 1928, 3949, 1929],
+            地瓜: [1823, 1948, 1928, 2294, 2302, 3903, 3493, 2323],
+            花生: [2374, 1934, 3943, 3493, 2083, 1928, 2984, 3279],
+        };
+        areatext = '8383894';
+        Pie3D = reactive({
+            arr: [
+                {
+                    name: '小麦',
+                    value: 101,
+                    itemStyle: {
+                        opacity: 0.5,
+                        color: 'rgba(110, 209, 84, 0.9)',
+                    },
+                },
+                {
+                    // 数据项名称
+                    name: '花生',
+                    value: 156,
+                    itemStyle: {
+                        // 透明度
+                        opacity: 0.5,
+                        // 扇形颜色
+                        color: 'rgba(251, 201, 3, 1)',
+                    },
+                    label: {
+                        show: true,
+                    },
+                },
+                {
+                    // 数据项名称
+                    name: '大豆',
+                    value: 156,
+                    itemStyle: {
+                        // 透明度
+                        opacity: 0.5,
+                        // 扇形颜色
+                        color: 'rgba(240, 129, 31, 0.9)',
+                    },
+                    label: {
+                        show: true,
+                    },
+                },
+                {
+                    // 数据项名称
+                    name: '地瓜',
+                    value: 156,
+                    itemStyle: {
+                        // 透明度
+                        opacity: 0.5,
+                        // 扇形颜色
+                        color: 'rgba(27, 85, 222, 1)',
+                    },
+                    label: {
+                        show: true,
+                    },
+                },
+                {
+                    // 数据项名称
+                    name: '蓝莓',
+                    value: 56,
+                    itemStyle: {
+                        // 透明度
+                        opacity: 0.5,
+                        // 扇形颜色
+                        color: 'rgba(72, 102, 211, 0.9)',
+                    },
+                    label: {
+                        show: true,
+                    },
+                },
+                {
+                    // 数据项名称
+                    name: '茶叶',
+                    value: 56,
+                    itemStyle: {
+                        // 透明度
+                        opacity: 0.5,
+                        // 扇形颜色
+                        color: 'rgba(26, 255, 140, 1)',
+                    },
+                    label: {
+                        show: true,
+                    },
+                },
+            ],
+        });
+        hiddenOverlayChart();
+    }
+    areatext = '1293842';
+    tableData = [
+        {
+            date: '小麦',
+            name: '414029亩',
+            address: '32%',
+        },
+        {
+            date: '玉米',
+            name: '232891亩',
+            address: '18%',
+        },
+        {
+            date: '大豆',
+            name: '194076亩',
+            address: '15%',
+        },
+        {
+            date: '地瓜',
+            name: '207014亩',
+            address: '16%',
+        },
+        {
+            date: '花生',
+            name: '245829亩',
+            address: '19%',
+        },
+    ];
+
+    let arr = [...Township.arr];
+    console.log('arr:', arr);
+    arr.forEach(item => {
+        if (item.properties.XZDM == value.value) {
+            viewer.camera.flyTo({
+                destination: Cesium.Rectangle.fromDegrees(
+                    item.bbox[0],
+                    item.bbox[1],
+                    item.bbox[2],
+                    item.bbox[3]
+                ),
+                duration: 2,
+            });
+        }
+        let arr = [...Township.brr];
+        let brr = [];
+        // console.log(Township.brr);
+        arr.forEach(item => {
+            if (item.properties.XZDM == value.value) {
+                brr.push(item.properties.XZQMC);
+            }
+        });
+        // console.log(brr);
+        data.title = [...Object.values(brr)];
+    });
+    ASdivision();
+    areachar();
+    let town = [...Township.arr];
+    const townData = town.find(item => item.properties.XZDM === value.value);
+    if (townData) {
+        // 移除镇高亮
+        deleteEntityByName('townLine');
+        // 高亮镇边界
+        addBoundaryHandle(townData.geometry.coordinates, 'townLine', 'yellow');
+    }
+    // 移除以前村
+    removeWms(['aaa']);
+    // 添加村
+    addvillage(`XZDM=${value.value}`, 'aaa');
+    getarea({ time: '2023-04-26', subregion: '1', parent: '黄岛区' }).then(res => {
+        let arr = [];
+        res.data.map((item, index) => {
+            if (item.region == townData.properties.XZMC) {
+                arr.push({
+                    crop: item.type,
+                    Shape_Area: item.area,
+                });
+            }
+        });
+        townZuowu.value = {
+            label: arr,
+        };
+        console.log();
+        console.log(arr);
+        showOverlayChart({ x: 642, y: 312 });
+    });
+};
+
+//下载
+/*---------------------------*/
+const Deta = item => {
+    downloadURL(item);
+};
+
+const downloadURL = url => {
+    let link = document.createElement('a');
+    link.style.display = 'none';
+    link.href = url;
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+};
+/*-------------echarts--------------*/
+function areachar() {
+    const areaDivIntance = echarts.init(areaDiv.value);
+    // 统计百分比
+    var data1 = [2, 8, 5, 8, 10, 12, 11];
+    var data2 = [1, 7, 2, 7, 9, 11, 10];
+    var json = {
+        chart0: {
+            xcategory: ['2017年', '2018年', '2019年', '2020年', '2021年', '2022年', '2023年'],
+            low: data1,
+            lowLine: [],
+        },
+    };
+    var json2 = {
+        chart0: {
+            xcategory: ['2017年', '2018年', '2019年', '2020年', '2021年', '2022年', '2023年'],
+            low: data2,
+            lowLine: [],
+        },
+    };
+    var datacoords = [
+        {
+            coords: [],
+        },
+    ];
+    var datacoords2 = [
+        {
+            coords: [],
+        },
+    ];
+    for (var i = 0; i < json.chart0.xcategory.length; i++) {
+        datacoords[0].coords.push([json.chart0.xcategory[i], data1[i]]);
+    }
+    for (var i = 0; i < json.chart0.xcategory.length; i++) {
+        datacoords2[0].coords.push([json2.chart0.xcategory[i], data2[i]]);
+    }
+
+    var option = {
+        tooltip: {
+            trigger: 'axis',
+            axisPointer: {
+                lineStyle: {
+                    color: '#15ecf4',
+                },
+            },
+            backgroundColor: 'rgba(0,0,0,.8)',
+            extraCssText: 'box-shadow: 4px 4px 10px rgba(21, 250, 255,.6);',
+            formatter: function (params) {
+                var result = params[0].name + '<br>';
+                params.forEach(function (item) {
+                    result +=
+                        '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' +
+                        item.color +
+                        '"></span>';
+                    // 判断设置增长还是降低
+                    if (parseFloat(item.data) >= 50) {
+                        result +=
+                            item.seriesName +
+                            ': ' +
+                            '<span class="growth">' +
+                            item.data +
+                            '吨</span><br>';
+                    } else if (parseFloat(item.data) < 50) {
+                        result +=
+                            item.seriesName +
+                            ': ' +
+                            '<span class="reduce">' +
+                            item.data +
+                            '吨</span><br>';
+                    }
+                });
+                return result;
+            },
+        },
+        legend: {
+            data: ['最大值', '最小值'],
+            textStyle: {
+                fontSize: 12,
+                color: 'rgb(0,253,255,0.6)',
+            },
+            top: '5%',
+            right: '5%',
+        },
+        grid: {
+            bottom: 50,
+            left: 70,
+            right: 50,
+        },
+        xAxis: {
+            axisLine: {
+                show: true,
+                lineStyle: {
+                    color: '#15faff',
+                },
+            },
+            axisTick: {
+                show: false,
+            },
+            axisLabel: {
+                show: true,
+            },
+            data: ['2017年', '2018年', '2019年', '2020年', '2021年', '2022年', '2023年'],
+        },
+        yAxis: {
+            axisLine: {
+                show: false,
+            },
+            axisTick: {
+                show: false,
+            },
+            splitLine: {
+                lineStyle: {
+                    type: 'dashed',
+                    color: '#4b4d64',
+                },
+            },
+            axisLabel: {
+                formatter: '{value}',
+                textStyle: {
+                    //改变刻度字体样式
+                    color: '#ffffff',
+                },
+            },
+        },
+        series: [
+            {
+                name: '最大值',
+                type: 'line',
+                // smooth: true,
+                symbol: 'none',
+                symbolSize: 10,
+                areaStyle: {
+                    normal: {
+                        color: new echarts.graphic.LinearGradient(
+                            0,
+                            0,
+                            0,
+                            1,
+                            [
+                                {
+                                    offset: 0,
+                                    color: 'rgba(255, 204,1, .9)',
+                                },
+                                {
+                                    offset: 0.8,
+                                    color: 'rgba(6, 8, 41,.1)',
+                                },
+                            ],
+                            false
+                        ),
+                        shadowColor: 'rgba(0, 0, 0, 0.1)',
+                        shadowBlur: 10,
+                    },
+                },
+                itemStyle: {
+                    normal: {
+                        color: '#ffcb00',
+                    },
+                },
+                data: data1,
+            },
+            {
+                name: '最大值',
+                type: 'lines',
+                coordinateSystem: 'cartesian2d',
+                zlevel: 1,
+                polyline: true,
+                smooth: true,
+                symbol: 'circle',
+                effect: {
+                    show: true,
+                    trailLength: 0.4,
+                    symbol: 'circle',
+                    period: 8, //光点滑动速度
+                    symbolSize: 8,
+                },
+                lineStyle: {
+                    normal: {
+                        color: '#ffcb00',
+                        width: 0,
+                        opacity: 0,
+                        curveness: 0,
+                    },
+                },
+                data: datacoords,
+            },
+            {
+                name: '最小值',
+                type: 'line',
+                // smooth: true,
+                symbol: 'none',
+                symbolSize: 10,
+                areaStyle: {
+                    normal: {
+                        color: new echarts.graphic.LinearGradient(
+                            0,
+                            0,
+                            0,
+                            1,
+                            [
+                                {
+                                    offset: 0,
+                                    color: 'rgba(21, 250, 255,.9)',
+                                },
+                                {
+                                    offset: 0.8,
+                                    color: 'rgba(6, 8, 41,.1)',
+                                },
+                            ],
+                            false
+                        ),
+                        shadowColor: 'rgba(0, 0, 0, 0.1)',
+                        shadowBlur: 10,
+                    },
+                },
+                itemStyle: {
+                    normal: {
+                        color: '#15faff',
+                    },
+                },
+                data: data2,
+            },
+            {
+                name: '最小值',
+                type: 'lines',
+                coordinateSystem: 'cartesian2d',
+                zlevel: 1,
+                smooth: true,
+                polyline: true,
+                symbol: 'circle',
+                effect: {
+                    show: true,
+                    trailLength: 0.4,
+                    symbol: 'circle',
+                    period: 8, //光点滑动速度
+                    symbolSize: 8,
+                },
+                lineStyle: {
+                    normal: {
+                        color: '#15faff',
+                        width: 0,
+                        opacity: 0,
+                        curveness: 0,
+                    },
+                },
+                data: datacoords2,
+            },
+        ],
+    };
+
+    option && areaDivIntance.setOption(option);
+
+    window.addEventListener('resize', function () {
+        areaDivIntance.resize();
+    });
+}
+
+function farmland() {
+    const farmlandDivIntance = echarts.init(farmlandDiv.value);
+    let xData = ['区域一', '区域二', '区域三', '区域四', '区域五', '区域六'];
+    let option = {
+        tooltip: {
+            trigger: 'axis',
+            axisPointer: {
+                type: 'shadow',
+                textStyle: {
+                    color: '#fff',
+                },
+            },
+        },
+        calculable: true,
+        legend: {
+            // data: ["已完成", "进行中"],
+            top: '7%',
+            right: '5%',
+            icon: 'rect',
+            textStyle: {
+                color: '#fff',
+            },
+        },
+        grid: {
+            left: '15%',
+            // "top":0,
+            bottom: '16%',
+            right: '2%',
+        },
+        xAxis: [
+            {
+                type: 'category',
+                axisLine: {
+                    lineStyle: {
+                        color: 'rgba(255,255,255,.5)',
+                    },
+                },
+                splitLine: {
+                    show: false,
+                },
+                axisTick: {
+                    show: false,
+                },
+                splitArea: {
+                    show: false,
+                },
+                axisLabel: {
+                    interval: 0,
+                    color: 'rgba(255,255,255,0.7)',
+                    fontSize: 14,
+                },
+                data: xData,
+            },
+        ],
+        yAxis: [
+            {
+                type: 'value',
+                name: '产量(吨)',
+                nameTextStyle: {
+                    color: 'rgba(255,255,255,0.8)',
+                    fontSize: 14,
+                    padding: [0, 60, 0, 10],
+                },
+                splitLine: {
+                    show: false,
+                },
+                axisLine: {
+                    show: false,
+                },
+                axisTick: {
+                    show: false,
+                },
+                axisLabel: {
+                    interval: 0,
+                    color: 'rgba(255,255,255,0.5)',
+                    fontSize: 14,
+                },
+                splitArea: {
+                    show: false,
+                },
+            },
+        ],
+        series: [
+            {
+                name: '最大值',
+                type: 'bar',
+                barWidth: 14,
+                barGap: '85%',
+                label: {
+                    show: false,
+                    position: 'top',
+                    fontSize: 14,
+                    // fontWeight: 'bold',
+                    color: 'rgba(255, 255, 255, 1)',
+                },
+                itemStyle: {
+                    normal: {
+                        barBorderRadius: 2,
+                        color: {
+                            type: 'linear',
+                            x: 0,
+                            y: 0,
+                            x2: 0,
+                            y2: 1,
+                            colorStops: [
+                                {
+                                    offset: 0,
+                                    color: 'rgba(242, 252, 252, 0.5)', // 0% 处的颜色
+                                },
+                                {
+                                    offset: 0.5,
+                                    color: 'rgba(242, 252, 252, 0.3)', // 100% 处的颜色
+                                },
+                                {
+                                    offset: 1,
+                                    color: 'rgba(242, 252, 252, 0)', // 100% 处的颜色
+                                },
+                            ],
+                            global: false, // 缺省为 false
+                        },
+                    },
+                },
+                data: [709, 1917, 2455, 2610, 1719, 1433],
+            },
+            {
+                name: '最小值',
+                type: 'bar',
+                barWidth: 14,
+                barGap: '85%',
+                label: {
+                    show: false,
+                    position: 'top',
+                    fontSize: 14,
+                    // fontWeight: 'bold',
+                    color: 'rgba(255, 255, 255, 1)',
+                },
+                itemStyle: {
+                    normal: {
+                        color: {
+                            type: 'linear',
+                            x: 0,
+                            y: 0,
+                            x2: 0,
+                            y2: 1,
+                            colorStops: [
+                                {
+                                    offset: 0,
+                                    color: 'rgba(143, 186, 243, 0.5)', // 0% 处的颜色
+                                },
+                                {
+                                    offset: 0.5,
+                                    color: 'rgba(143, 186, 243, 0.3)', // 100% 处的颜色
+                                },
+                                {
+                                    offset: 1,
+                                    color: 'rgba(143, 186, 243, 0)', // 100% 处的颜色
+                                },
+                            ],
+                            global: false, // 缺省为 false
+                        },
+                    },
+                },
+                data: [300, 500, 700, 400, 600, 1200],
+            },
+        ],
+    };
+
+    farmlandDivIntance.on('click', function (params) {
+        console.log(params.name);
+    });
+    farmlandDivIntance.on('click', param => ChartClick(param));
+    option && farmlandDivIntance.setOption(option, { notMerge: true, grid: { bottom: 20 } });
+    useEcharts(farmlandDivIntance, option);
+}
+// 添加wms
+function addWms(layers, customName) {
+    let map = new Cesium.WebMapServiceImageryProvider({
+        url: serverAPI.geoserverUrl + `/shuzisannong/wms?`,
+        layers: layers, //图层名
+        parameters: {
+            service: 'WMS',
+            format: 'image/png',
+            transparent: true, //是否透明
+            // CQL_FILTER: `crop in (${name})`,
+        },
+    });
+    map.customName = customName; //自己定义各种属性
+    let dd = viewer.imageryLayers.addImageryProvider(map); //添加图层
+    if (customName.indexOf('gbznt') > -1) {
+        // viewer.imageryLayers.lower(dd);//将图层下移一层
+        viewer.imageryLayers.lowerToBottom(dd); //将图层移到最底层
+        viewer.imageryLayers.raise(dd); //将图层上移一层
+    }
+}
+//返回
+function back() {
+    removeWms(['gbznt'], true);
+    addWms('shuzisannong:huangdaoqu_town', 'tl');
+    viewer.camera.flyTo({
+        destination: Cesium.Rectangle.fromDegrees(119.5091, 35.5671, 120.3285, 36.1455),
+        duration: 2,
+    });
+    flag.value = false;
+}
+// 图表点击事件
+function ChartClick(item) {
+    console.log('item:', item);
+    // 移除作物
+    removeWms(['huangdaoqu_town'], true);
+    removeWms(['tl'], true);
+    let layername = 'shuzisannong:farmland';
+
+    // 判断是否存在避免重复添加
+    let cz = false;
+    const layers = viewer.imageryLayers._layers;
+    for (let f = layers.length - 1; f >= 0; f--) {
+        if (
+            layers[f] &&
+            layers[f]._imageryProvider.customName &&
+            layers[f]._imageryProvider.customName === layername + 'gbznt'
+        ) {
+            cz = true;
+        }
+    }
+    if (!cz) {
+        // 添加高标准农田服务
+        addWms(layername, layername + 'gbznt');
+    }
+    // 定位到地块
+    let features = formLandRef.value;
+    features.forEach(it => {
+        console.log('it.properties.name:', it.properties.name);
+        console.log('item.name:', item.name);
+        if (it.properties.name === item.name) {
+            console.log('dingwei');
+            viewer.camera.flyTo({
+                destination: Cesium.Rectangle.fromDegrees(
+                    it.bbox[0],
+                    it.bbox[1],
+                    it.bbox[2],
+                    it.bbox[3]
+                ),
+                duration: 2,
+            });
+        }
+    });
+    flag.value = true;
+
+    townZuowu.value = {
+        label: [
+            { crop: '小麦', Shape_Area: '53000' },
+            { crop: '地瓜', Shape_Area: '50000' },
+        ],
+    };
+    console.log(townZuowu.label);
+    showOverlayChart({ x: 642, y: 312 });
+}
+function ASdivision() {
+    const ASdivisionDivIntance = echarts.init(ASdivisionDiv.value);
+    let xData = ['区域一', '区域二', '区域三', '区域四', '区域五', '区域六'];
+    let option = {
+        tooltip: {
+            trigger: 'axis',
+            axisPointer: {
+                type: 'shadow',
+                textStyle: {
+                    color: '#fff',
+                },
+            },
+        },
+        calculable: true,
+        legend: {
+            // data: ["已完成", "进行中"],
+            top: '7%',
+            right: '5%',
+            icon: 'rect',
+            textStyle: {
+                color: '#fff',
+            },
+        },
+        grid: {
+            left: '15%',
+            // "top":0,
+            bottom: '16%',
+            right: '2%',
+        },
+        xAxis: [
+            {
+                type: 'category',
+                axisLine: {
+                    lineStyle: {
+                        color: 'rgba(255,255,255,.5)',
+                    },
+                },
+                splitLine: {
+                    show: false,
+                },
+                axisTick: {
+                    show: false,
+                },
+                splitArea: {
+                    show: false,
+                },
+                axisLabel: {
+                    interval: 0,
+                    color: 'rgba(255,255,255,0.7)',
+                    fontSize: 14,
+                },
+                data: xData,
+            },
+        ],
+        yAxis: [
+            {
+                type: 'value',
+                name: '产量(吨)',
+                nameTextStyle: {
+                    color: 'rgba(255,255,255,0.8)',
+                    fontSize: 14,
+                    padding: [0, 60, 0, 10],
+                },
+                splitLine: {
+                    show: false,
+                },
+                axisLine: {
+                    show: false,
+                },
+                axisTick: {
+                    show: false,
+                },
+                axisLabel: {
+                    interval: 0,
+                    color: 'rgba(255,255,255,0.5)',
+                    fontSize: 14,
+                },
+                splitArea: {
+                    show: false,
+                },
+            },
+        ],
+        series: [
+            {
+                name: '最大值',
+                type: 'bar',
+                barWidth: 14,
+                barGap: '85%',
+                label: {
+                    show: false,
+                    position: 'top',
+                    fontSize: 14,
+                    // fontWeight: 'bold',
+                    color: 'rgba(255, 255, 255, 1)',
+                },
+                itemStyle: {
+                    normal: {
+                        barBorderRadius: 2,
+                        color: {
+                            type: 'linear',
+                            x: 0,
+                            y: 0,
+                            x2: 0,
+                            y2: 1,
+                            colorStops: [
+                                {
+                                    offset: 0,
+                                    color: 'rgba(4, 247, 227, 1)', // 0% 处的颜色
+                                },
+                                {
+                                    offset: 0.8,
+                                    color: 'rgba(4, 247, 227, 0.5)', // 100% 处的颜色
+                                },
+                                {
+                                    offset: 1,
+                                    color: 'rgba(4, 247, 227, 0.0)', // 100% 处的颜色
+                                },
+                            ],
+                            global: false, // 缺省为 false
+                        },
+                        // borderColor:'rgba(0, 170, 255, 0.9)',
+                        shadowColor: 'rgba(255, 255, 255, 0.5)',
+                        shadowBlur: 10,
+                    },
+                },
+                data: [709, 1917, 2455, 2610, 1719, 1433],
+            },
+            {
+                name: '最小值',
+                type: 'bar',
+                barWidth: 14,
+                barGap: '85%',
+                label: {
+                    show: false,
+                    position: 'top',
+                    fontSize: 14,
+                    // fontWeight: 'bold',
+                    color: 'rgba(255, 255, 255, 1)',
+                },
+                itemStyle: {
+                    normal: {
+                        color: {
+                            type: 'linear',
+                            x: 0,
+                            y: 0,
+                            x2: 0,
+                            y2: 1,
+                            colorStops: [
+                                {
+                                    offset: 0,
+                                    color: 'rgba(33, 187, 251, 0.5)', // 0% 处的颜色
+                                },
+                                {
+                                    offset: 0.5,
+                                    color: 'rgba(33, 187, 251, 0.3)', // 100% 处的颜色
+                                },
+                                {
+                                    offset: 1,
+                                    color: 'rgba(33, 187, 251, 0)', // 100% 处的颜色
+                                },
+                            ],
+                            global: false, // 缺省为 false
+                        },
+                        shadowColor: 'rgba(255, 255, 255, 0.5)',
+                        shadowBlur: 10,
+                    },
+                },
+                data: [300, 500, 700, 400, 600, 1200],
+            },
+        ],
+    };
+    // option && ASdivisionDivIntance.setOption(option, true);
+    useEcharts(ASdivisionDivIntance, option);
+}
+
+/*--------------------------------------------------------------------------------------------*/
+function getAreaFenlei() {
+    let fl = fenleiRef.value;
+    console.log('fl:', fl);
+    axios({
+        url:
+            serverAPI.geoserverUrl +
+            '/shuzisannong/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=shuzisannong%3Ahuangdaoqu_town&maxFeatures=50&outputFormat=application%2Fjson',
+    })
+        .then(res => {
+            console.log('res1111:', res);
+            let data = res.data.features;
+            data.forEach((item, index) => {
+                const rectangle = Cesium.Rectangle.fromDegrees(
+                    item.bbox[0],
+                    item.bbox[1],
+                    item.bbox[2],
+                    item.bbox[3]
+                );
+                const center = Cesium.Rectangle.center(rectangle); //获取视角范围中心点(得到的结果为弧度Cartographic)
+                let longitude = Cesium.Math.toDegrees(center.longitude); //将弧度转为度
+                let latitude = Cesium.Math.toDegrees(center.latitude);
+
+                if (item.properties.XZDM === '370211011') {
+                    //灵山卫街道
+                    longitude = 120.0863;
+                    latitude = 35.941;
+                } else if (item.properties.XZDM === '370211003') {
+                    //薛家岛街道
+                    longitude = 120.243682;
+                    latitude = 35.97123201;
+                }
+                const townData = fl[item.properties.XZMC];
+                let label = [];
+                if (townData) {
+                    label = townData.map((it, inex) => {
+                        // let dd = `${it.properties.crop} ：${(it.properties.Shape_Area / 666.67).toFixed(2)} 亩`
+                        // return dd
+                        return it.properties;
+                    });
+                }
+                // label = label.join(' ')
+                // console.log('label:', index, label,fl[item.properties.XZMC],item.properties.XZMC)
+                // 添加点
+                viewer.entities.add({
+                    name: 'point' + item.properties.XZDM,
+                    position: Cesium.Cartesian3.fromDegrees(longitude, latitude),
+                    point: new Cesium.PointGraphics({
+                        show: true,
+                        pixelSize: 10,
+                        // heightReference: Cesium.HeightReference.NONE,
+                        color: Cesium.Color.fromCssColorString('rgba(255, 255, 26, 1)'),
+                        outlineColor: new Cesium.Color(0, 0, 0, 0),
+                        outlineWidth: 0,
+                        disableDepthTestDistance: Number.POSITIVE_INFINITY, //去掉地形遮挡
+                        heightReference: Cesium.HeightReference.CLAMP_TO_GROUND, //贴地
+                    }),
+                    // label: {
+                    //     show: false,
+                    //     text: label.join(' '),
+                    //     font: '12px sans-serif',
+                    //     fillColor: Cesium.Color.WHITE,
+                    //     showBackground: true,
+                    //     backgroundColor: Cesium.Color.fromCssColorString('rgba(2, 31, 26, 0.6)'),//背景颜色
+                    //     // style: Cesium.LabelStyle.FILL,
+                    //     outlineWidth: 3,
+                    //     verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
+                    //     horizontalOrigin: Cesium.HorizontalOrigin.LEFT,//水平位置
+                    //     pixelOffset: new Cesium.Cartesian2(-80, -10),
+                    // },
+                    info: {
+                        label: label,
+                        ...item.properties,
+                        // 经纬度，以便监听
+                        lon: longitude,
+                        lat: latitude,
+                    },
+                });
+            });
+        })
+        .catch(err => {});
+}
+let fenleiRef = ref({});
+function mbHandle() {
+    axios({
+        url:
+            serverAPI.geoserverUrl +
+            '/shuzisannong/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=shuzisannong%3Afenlei&maxFeatures=137&outputFormat=application%2Fjson',
+    })
+        .then(res => {
+            let features = res.data.features;
+            let town = {};
+            // 按镇分类
+            features.forEach(item => {
+                let key = item.properties.town;
+                if (town[key]) {
+                    town[key].push(item);
+                } else {
+                    town[key] = [item];
+                }
+            });
+            fenleiRef.value = town;
+            getAreaFenlei();
+        })
+        .catch(err => {});
+}
+
+/*------------------------------------------柱状图--------------------------------------------*/
+// function getJson() {
+//     let dic = {
+//         小麦: 'rgba(102, 142, 214, 0.8)',
+//         玉米: 'rgba(255, 225, 104, 0.8)',
+//         大豆: 'rgba(156, 220, 130, 0.8)',
+//         地瓜: 'rgba(156, 220, 130, 0.8)',
+//         花生: 'rgba(212, 236, 89, 0.8)',
+//         蓝莓: 'rgba(50, 211, 235, 0.8)',
+//         茶叶: 'rgba(91, 196, 159, 0.8)',
+//         马铃薯: 'rgba(254, 182, 77, 0.8)',
+//         白菜和萝卜: 'rgba(250, 129, 109, 0.8)',
+//         其他: 'rgba(250, 129, 109, 0.8)',
+//     };
+//     // let viewer = viewers.value;
+//     axios({
+//         url: 'http://121.36.229.60:9080/geoserver/shuzisannong/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=shuzisannong%3Ahuangdaoqu_town&maxFeatures=50&outputFormat=application%2Fjson',
+//     })
+//         .then(res => {
+//             console.log('res:', res);
+//             let data = res.data.features;
+//             let name = Object.keys(dic);
+//             data.forEach((item, index) => {
+//                 // let hh = name[Math.floor((Math.random() * name.length))]
+//                 // let height = random(1000, 5000)
+
+//                 const rectangle = Cesium.Rectangle.fromDegrees(
+//                     item.bbox[0],
+//                     item.bbox[1],
+//                     item.bbox[2],
+//                     item.bbox[3]
+//                 );
+//                 const center = Cesium.Rectangle.center(rectangle); //获取视角范围中心点(得到的结果为弧度Cartographic)
+//                 let longitude = Cesium.Math.toDegrees(center.longitude); //将弧度转为度
+//                 let latitude = Cesium.Math.toDegrees(center.latitude);
+
+//                 if (item.properties.XZDM === '370211011') {
+//                     //灵山卫街道
+//                     let hh = name[Math.floor(Math.random() * name.length)];
+//                     let height = random(2000, 500);
+
+//                     longitude = 120.0863;
+//                     latitude = 35.941;
+//                     viewer.entities.add({
+//                         position: Cesium.Cartesian3.fromDegrees(longitude + 0.01, latitude + 0.01),
+//                         ellipse: {
+//                             semiMinorAxis: 400.0, //短轴
+//                             semiMajorAxis: 400.0, //长轴
+//                             height: height, //拉伸高度
+//                             extrudedHeight: 0, //离地高度
+//                             rotation: Cesium.Math.toRadians(60), //旋转
+//                             stRotation: Cesium.Math.toRadians(60), //旋转
+//                             fill: true, //是否显示圆的填充
+//                             material: Cesium.Color.fromCssColorString(`${dic[hh]}`), //圆的颜色,
+//                             outline: false, //是否显示圆轮廓
+//                             outlineColor: Cesium.Color.fromCssColorString(`rgba(255,255,0,1)`), //圆轮廓线的颜色,
+//                         },
+//                         info: {
+//                             name: hh,
+//                             value: height,
+//                         },
+//                     });
+//                 } else if (item.properties.XZDM === '370211003') {
+//                     //薛家岛街道
+//                     longitude = 120.243682;
+//                     latitude = 35.97123201;
+//                     let hh = name[Math.floor(Math.random() * name.length)];
+//                     let height = random(300, 5000);
+
+//                     viewer.entities.add({
+//                         position: Cesium.Cartesian3.fromDegrees(longitude + 0.01, latitude + 0.01),
+//                         ellipse: {
+//                             semiMinorAxis: 400.0, //短轴
+//                             semiMajorAxis: 400.0, //长轴
+//                             height: height, //拉伸高度
+//                             extrudedHeight: 0, //离地高度
+//                             rotation: Cesium.Math.toRadians(60), //旋转
+//                             stRotation: Cesium.Math.toRadians(60), //旋转
+//                             fill: true, //是否显示圆的填充
+//                             material: Cesium.Color.fromCssColorString(`${dic[hh]}`), //圆的颜色,
+//                             outline: false, //是否显示圆轮廓
+//                             outlineColor: Cesium.Color.fromCssColorString(`rgba(255,255,0,1)`), //圆轮廓线的颜色,
+//                         },
+//                         info: {
+//                             name: hh,
+//                             value: height,
+//                         },
+//                     });
+//                 } else if (index % 2 === 0) {
+//                     let hh = name[Math.floor(Math.random() * name.length)];
+//                     let height = random(100, 500);
+
+//                     viewer.entities.add({
+//                         position: Cesium.Cartesian3.fromDegrees(longitude + 0.01, latitude + 0.01),
+//                         ellipse: {
+//                             semiMinorAxis: 400.0, //短轴
+//                             semiMajorAxis: 400.0, //长轴
+//                             height: height, //拉伸高度
+//                             extrudedHeight: 0, //离地高度
+//                             rotation: Cesium.Math.toRadians(60), //旋转
+//                             stRotation: Cesium.Math.toRadians(60), //旋转
+//                             fill: true, //是否显示圆的填充
+//                             material: Cesium.Color.fromCssColorString(`${dic[hh]}`), //圆的颜色,
+//                             outline: false, //是否显示圆轮廓
+//                             outlineColor: Cesium.Color.fromCssColorString(`rgba(255,255,0,1)`), //圆轮廓线的颜色,
+//                         },
+//                         info: {
+//                             name: hh,
+//                             value: height,
+//                         },
+//                     });
+//                 }
+
+//                 let hh = name[Math.floor(Math.random() * name.length)];
+//                 let height = random(1000, 5000); //圆柱与圆高度为0时是圆
+
+//                 viewer.entities.add({
+//                     position: Cesium.Cartesian3.fromDegrees(longitude, latitude),
+//                     ellipse: {
+//                         semiMinorAxis: 400.0, //短轴
+//                         semiMajorAxis: 400.0, //长轴
+//                         height: height, //拉伸高度
+//                         extrudedHeight: 0, //离地高度
+//                         rotation: Cesium.Math.toRadians(60), //旋转
+//                         stRotation: Cesium.Math.toRadians(60), //旋转
+//                         fill: true, //是否显示圆的填充
+//                         material: Cesium.Color.fromCssColorString(`${dic[hh]}`), //圆的颜色,
+//                         outline: false, //是否显示圆轮廓
+//                         outlineColor: Cesium.Color.fromCssColorString(`rgba(255,255,0,1)`), //圆轮廓线的颜色,
+//                     },
+//                     info: {
+//                         name: hh,
+//                         value: height,
+//                     },
+//                 }); //
+
+//                 viewer.camera.flyTo({
+//                     // destination: Cesium.Rectangle.fromDegrees(119.5091, 31.5671, 120.3285, 35.1455),
+//                     // destination: new Cesium.Rectangle.fromDegrees(110.8, 30.8, 121.8, 30.9),
+//                     destination: Cesium.Cartesian3.fromDegrees(119.9091, 35.0991, 55000),
+//                     duration: 2,
+//                     orientation: {
+//                         pitch: Cesium.Math.toRadians(-30.0),
+//                         roll: 0.0,
+//                     },
+//                 }); // viewer.camera.twistRight(Cesium.Math.toDegrees(0.005).toFixed(2));
+//             });
+//         })
+//         .catch(err => {});
+// }
+// 地图移动时弹窗跟随
+function infoWindowPostRender() {
+    // let viewer = viewers.value;
+    if (townZuowu.value && townZuowu.value.lon && townZuowu.value.lat) {
+        //经纬度转为世界坐标
+
+        const gisPosition = Cesium.Cartesian3.fromDegrees(
+            Number(townZuowu.value.lon),
+            Number(townZuowu.value.lat),
+            0
+        ); //转化为屏幕坐标
+        var windowPosition = Cesium.SceneTransforms.wgs84ToWindowCoordinates(
+            viewer.scene,
+            gisPosition
+        );
+
+        if (Cesium.defined(windowPosition)) {
+            const pop = document.getElementById('pop');
+            pop.style.top = windowPosition.y - 10 + 'px';
+            pop.style.left = windowPosition.x + 10 + 'px';
+        }
+    }
+}
+// function mapClick() {
+//     // let viewer = viewers.value;
+//     viewer.screenSpaceEventHandler.setInputAction(function (movement) {
+//         const earthPosition = viewer.camera.pickEllipsoid(
+//             movement.position,
+//             viewer.scene.globe.ellipsoid
+//         ); //当前世界坐标笛卡尔积
+//         if (Cesium.defined(earthPosition)) {
+//             let pick = viewer.scene.pick(movement.position); //返回最上层模型属性
+//             let picks = viewer.scene.drillPick(movement.position); //返回所有模型属性
+//             if (pick && pick.id && pick.id.info) {
+//                 console.log('pick:', pick);
+//                 const data = pick.id.info;
+//                 console.log('data:', data);
+
+//                 const coordinate = movement.position; //屏幕坐标 // 转为经纬度，保存，用于监听时转换坐标
+//                 var ellipsoid = viewer.scene.globe.ellipsoid; // 将屏幕坐标转为地理坐标
+//                 var cartesian = viewer.camera.pickEllipsoid(coordinate, ellipsoid);
+//                 let newData = {
+//                     ...data,
+//                 };
+//                 if (cartesian) {
+//                     let cartographic = ellipsoid.cartesianToCartographic(cartesian);
+//                     let longitudeString = Cesium.Math.toDegrees(cartographic.longitude).toFixed(6);
+//                     let latitudeString = Cesium.Math.toDegrees(cartographic.latitude).toFixed(6);
+//                     console.log('longitudeString:', longitudeString);
+//                     newData.lon = longitudeString;
+//                     newData.lat = latitudeString; /*保存（弹窗）的数据*/
+
+//                     console.log('data:', newData);
+//                     clickInfoMap.value = newData;
+//                 }
+//                 showOverlayChart(coordinate); // 添加地图移动监听：使地图移动弹窗跟着移动
+//                 viewer.scene.postRender.addEventListener(infoWindowPostRender);
+//             } else {
+//                 hiddenOverlayChart(); // 清除监听事件 // viewer.scene.postRender.removeEventListener(infoWindowPostRender);
+//             }
+//         }
+//     }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
+// }
+
+// 隐藏弹窗
+function hiddenOverlayChart() {
+    // 移除各种高亮
+    XZDM = '';
+    XZQDM = '';
+    removeWms(['village_CQL']);
+    removeWms(['aaa']);
+
+    deleteEntityByName('villageLine');
+    deleteEntityByName('townLine');
+
+    const pop = document.getElementById('pop');
+    pop.style.display = 'none'; // 清除监听事件
+    viewer.scene.postRender.removeEventListener(infoWindowPostRender);
+    // 重定位
+    viewer.camera.flyTo({
+        destination: Cesium.Rectangle.fromDegrees(119.5091, 35.5671, 120.3285, 36.1455),
+        duration: 2,
+    });
+    removeWms(['gbznt'], true);
+    // addWms('shuzisannong:huangdaoqu_town', 'tl');
+    flag.value = false;
+}
+//显示弹窗
+function showOverlayChart(position) {
+    console.log(position);
+    const pop = document.getElementById('pop');
+    pop.style.display = 'block';
+    pop.style.position = 'absolute';
+    pop.style.top = position.y - 10 + 'px';
+    pop.style.left = position.x + 10 + 'px';
+    pop.style.zIndex = 99;
+}
+
+// function random(min, max) {
+//     return Math.floor(Math.random() * (max - min)) + min;
+// }
+
+/*-------------------------------------------------------------------------------------------*/
 </script>
 
-<style></style>
+<style lang="scss" scoped>
+$height: calc(100vh - 100px);
+
+.center {
+    width: 100%;
+    height: 100%;
+
+    .title {
+        width: 100%;
+        height: 45px;
+        background: url('@/assets/images/title.png');
+        background-repeat: no-repeat;
+        background-size: 110% 100%;
+        color: #fff;
+        font-size: 18px;
+        font-weight: 700;
+        line-height: 45px;
+        padding-left: 46px;
+        display: flex;
+        cursor: pointer;
+        align-items: center;
+        justify-content: space-between;
+
+        span {
+            width: 80%;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+            overflow: hidden;
+        }
+
+        p {
+            width: 79px;
+            height: 25px;
+            border-radius: 20px;
+            font-size: 14px;
+            background: linear-gradient(
+                180deg,
+                rgba(16, 111, 111, 1) 0%,
+                rgba(47, 214, 214, 1) 100%
+            );
+            border: 1.5px solid rgba(23, 194, 180, 1);
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
+    }
+}
+
+.leftWra {
+    position: absolute;
+    top: 10px;
+    left: 20px;
+    height: $height;
+    width: 23%;
+    background: rgba(2, 31, 26, 0.85);
+    box-shadow: inset 0px 0px 15px 6px rgba(41, 255, 255, 0.5);
+    transition: transform 1s;
+    .leftFoldDiv {
+        width: 30px;
+        height: 30px;
+        position: absolute;
+        right: -12%;
+        top: 50%;
+        transform: translate(-50%, -50%);
+        font-size: 30px;
+        color: #ccc;
+    }
+    .leftTop {
+        width: 100%;
+        display: flex;
+        flex-direction: column;
+
+        .areaDiv {
+            width: 100%;
+            height: 327px;
+            opacity: 1;
+            display: flex;
+            padding: 1px;
+            justify-content: center;
+        }
+
+        .ProgressBar {
+            width: 100%;
+            height: 9px;
+            opacity: 1;
+        }
+    }
+
+    .leftbottom {
+        width: 100%;
+        height: 455px;
+        opacity: 1;
+        display: flex;
+        flex-direction: column;
+        justify-content: flex-start;
+        align-items: center;
+        padding-top: 13px;
+
+        .tableDiv {
+            // background: rgba(255, 255, 255, 0.05);
+            display: flex;
+            justify-content: center;
+            width: 85%;
+            flex-direction: column;
+            padding: 5px 10px 5px 10px;
+            color: rgba(255, 255, 255, 1);
+
+            .Crops {
+                display: flex;
+                width: 100%;
+                margin-bottom: 10px;
+                font-size: 14px;
+                font-weight: 400;
+                height: 31px;
+                flex-direction: row;
+                align-items: center;
+                justify-content: space-around;
+                opacity: 1;
+                background: linear-gradient(
+                    90deg,
+                    rgba(21, 173, 148, 0.1) 0%,
+                    rgba(21, 173, 148, 0) 100%
+                );
+
+                div {
+                    display: flex;
+                    align-items: center;
+                }
+            }
+
+            .el-checkbox-group {
+                display: flex;
+                flex-direction: column;
+            }
+
+            :deep(.ones) {
+                width: 100%;
+                height: 171;
+                display: flex;
+                flex-direction: column;
+                justify-content: flex-start;
+                align-items: flex-start;
+                --el-table-tr-bg-color: null;
+                --el-table-border-color: null;
+                font-size: 14px;
+                font-weight: 400;
+                letter-spacing: 0px;
+                line-height: 0px;
+                color: rgba(255, 255, 255, 1);
+            }
+        }
+    }
+}
+
+.rightWra {
+    position: absolute;
+    top: 10px;
+    right: 20px;
+    width: 23%;
+    height: $height;
+    opacity: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    background: rgba(2, 31, 26, 0.85);
+    box-shadow: inset 0px 0px 15px 6px rgba(41, 255, 255, 0.5);
+    transition: transform 1s;
+    .rightFoldDiv {
+        width: 30px;
+        height: 30px;
+        position: absolute;
+        left: -8%;
+        top: 50%;
+        transform: translate(0, -50%);
+        font-size: 30px;
+        color: #ccc;
+    }
+    .rightTop {
+        width: 100%;
+        height: 40%;
+        opacity: 1;
+        display: flex;
+        flex-direction: column;
+        justify-content: flex-start;
+        align-items: center;
+
+        .farmlandDiv {
+            width: 100%;
+            height: 340px;
+            opacity: 1;
+            display: flex;
+            justify-content: center;
+        }
+
+        .ProgressBar {
+            width: 100%;
+            height: 9px;
+            opacity: 1;
+        }
+    }
+
+    .rightbottom {
+        width: 100%;
+        height: 490px;
+        opacity: 1;
+        display: flex;
+        flex-direction: column;
+        justify-content: flex-start;
+        align-items: center;
+
+        .el-select {
+            width: 80%;
+            font-size: 14px;
+            color: #333;
+            background: rgba(22, 94, 102, 1);
+            border: 1px solid rgba(4, 153, 153, 1) !important;
+            margin-top: 20px;
+
+            :deep(.el-input__wrapper) {
+                background-color: transparent;
+            }
+
+            :deep(.el-input__inner) {
+                color: rgba(255, 255, 255, 0.7);
+            }
+        }
+
+        .ASdivision {
+            width: 100%;
+            height: 368px;
+            opacity: 1;
+            display: flex;
+            justify-content: center;
+        }
+    }
+}
+
+.legend {
+    position: absolute;
+    right: 28%;
+    bottom: 18%;
+    width: 129px;
+    height: 338px;
+    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 + 12vw);
+    width: calc(100% - (400px * 2) - (10vw * 2));
+    min-width: 380px;
+    bottom: 5%;
+    height: 75px;
+    opacity: 1;
+    border-radius: 5px;
+    background: rgba(2, 31, 26, 0.6);
+    border: 1px solid rgba(4, 153, 153, 1);
+}
+
+.tool {
+    position: absolute;
+    right: 30%;
+    top: 8%;
+    width: 30px;
+    height: 280px;
+    opacity: 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: flex-start;
+    display: none;
+}
+
+#popup {
+    border-radius: 5px;
+    background: rgba(2, 31, 26, 0.6);
+    display: none;
+    // justify-content: flex-start;
+    // align-items: flex-end;
+    padding: 30px 8px 20px 8px;
+
+    & > div:nth-child(1) {
+        font-weight: 400;
+        letter-spacing: 0px;
+        color: rgba(255, 255, 255, 1);
+        // margin-top: 20px;
+        line-height: 24px;
+    }
+
+    & > div:nth-child(2) {
+        color: rgba(255, 255, 255, 1);
+        width: 129px;
+        height: 24px;
+        opacity: 1;
+        border-radius: 2px;
+        background: rgba(217, 231, 255, 0.2);
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        padding: 2px 10px 2px 10px;
+        // margin-top: 20px;
+    }
+
+    .cancel {
+        position: absolute;
+        right: 10px;
+        top: 5px;
+        color: rgba(255, 255, 255, 1);
+        cursor: pointer;
+    }
+}
+
+#pop {
+    border-radius: 5px;
+    background: rgba(2, 31, 26, 1);
+    display: none;
+    // justify-content: flex-start;
+    // align-items: flex-end;
+    padding: 30px 8px 20px 8px;
+
+    .cancel {
+        position: absolute;
+        right: 10px;
+        top: 5px;
+        color: rgba(255, 255, 255, 1);
+        cursor: pointer;
+    }
+
+    & > div {
+        display: flex;
+        margin-bottom: 10px;
+
+        & > div:nth-child(1) {
+            font-weight: 400;
+            letter-spacing: 0px;
+            color: rgba(255, 255, 255, 1);
+            // margin-top: 20px;
+            line-height: 24px;
+            margin-right: 10px;
+        }
+
+        & > div:nth-child(2) {
+            color: rgba(255, 255, 255, 1);
+            width: 129px;
+            height: 24px;
+            opacity: 1;
+            border-radius: 2px;
+            background: rgba(217, 231, 255, 0.2);
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            padding: 2px 10px 2px 10px;
+            // margin-top: 20px;
+        }
+    }
+}
+.back_button {
+    position: absolute;
+    right: 30%;
+    top: 20px;
+}
+
+:deep(.el-select__popper.el-popper) {
+}
+</style>
+<style lang="scss">
+.select_city {
+    background: rgba(2, 31, 26, 0.85);
+    box-shadow: inset 0px 0px 15px 6px rgba(41, 255, 255, 0.5);
+
+    .el-select-dropdown__item.hover {
+        background: rgba(2, 31, 26, 0.95);
+        box-shadow: inset 0px 0px 15px 6px rgba(41, 255, 255, 0.7);
+    }
+
+    .el-select-dropdown__item {
+        color: #fff;
+    }
+}
+
+.el-select__popper {
+    border: none !important;
+    background: transparent !important;
+}
+
+.el-popper {
+    border: none !important;
+    background: transparent !important;
+}
+
+.el-popper__arrow::before {
+    background: rgba(41, 255, 255, 0.7) !important;
+}
+</style>
diff --git a/src/views/crops/site/index.vue b/src/views/crops/site/index.vue
index e00b9a9..e13cfab 100644
--- a/src/views/crops/site/index.vue
+++ b/src/views/crops/site/index.vue
@@ -1,15 +1,3280 @@
-/<template>
-  <div>
-    长势监测
-  </div>
+<template>
+    <div class="center">
+        <div style="width: 100%; height: 100%" id="cesiumContainer"></div>
+        <div class="leftWra">
+            <div class="leftTop">
+                <div class="title">
+                    <span>作物长势等级面积统计</span>
+                    <p
+                        @click="
+                            Deta(
+                                'https://1912c.oss-cn-beijing.aliyuncs.com/egg-oss-demo/zhongzhimianjishijian.xlsx'
+                            )
+                        "
+                    >
+                        下载 &nbsp;
+
+                        <img
+                            src="@/assets/icons/svg/downloads.svg"
+                            style="width: 14px; height: 14px; cursor: pointer"
+                        />
+                    </p>
+                </div>
+                <div ref="areaDiv" class="areaDiv"></div>
+                <div ref="leftProgressBarDiv" class="ProgressBar"></div>
+            </div>
+            <div class="leftbottom">
+                <div class="title">
+                    <span>作物长势等级面积占比</span>
+                    <p
+                        @click="
+                            Deta(
+                                'https://1912c.oss-cn-beijing.aliyuncs.com/egg-oss-demo/zhongzhimianji%20.xlsx'
+                            )
+                        "
+                    >
+                        下载 &nbsp;
+                        <img
+                            src="@/assets/icons/svg/downloads.svg"
+                            style="width: 14px; height: 14px; cursor: pointer"
+                        />
+                    </p>
+                </div>
+                <div ref="typesofDiv" class="typesofDiv"></div>
+                <div class="tableDiv">
+                    <div class="Crops">
+                        <div>
+                            <img src="@/assets/images/crops.png" alt="" />
+                            好 &nbsp;&nbsp;
+                        </div>
+                        <div style="color: rgba(110, 209, 84, 1)">
+                            {{ typesofdata.小麦.value }}亩
+                        </div>
+                        <div style="color: rgba(110, 209, 84, 1)">
+                            {{ typesofdata.小麦.percent }}
+                        </div>
+                    </div>
+                    <div class="Crops">
+                        <div>
+                            <img src="@/assets/images/crops.png" alt="" />
+                            较好
+                        </div>
+                        <div style="color: rgba(229, 205, 38, 1)">
+                            {{ typesofdata.花生.value }}亩
+                        </div>
+                        <div style="color: rgba(229, 205, 38, 1)">
+                            {{ typesofdata.花生.percent }}
+                        </div>
+                    </div>
+                    <div class="Crops">
+                        <div>
+                            <img src="@/assets/images/crops.png" alt="" />
+                            适中
+                        </div>
+                        <div style="color: rgba(252, 169, 63, 1)">
+                            {{ typesofdata.大豆.value }}亩
+                        </div>
+                        <div style="color: rgba(252, 169, 63, 1)">
+                            {{ typesofdata.大豆.percent }}
+                        </div>
+                    </div>
+                    <div class="Crops">
+                        <div>
+                            <img src="@/assets/images/crops.png" alt="" />
+                            较差
+                        </div>
+                        <div style="color: rgba(103, 153, 242, 1)">
+                            {{ typesofdata.地瓜.value }}亩
+                        </div>
+                        <div style="color: rgba(103, 153, 242, 1)">
+                            {{ typesofdata.地瓜.percent }}
+                        </div>
+                    </div>
+                    <div class="Crops">
+                        <div>
+                            <img src="@/assets/images/crops.png" alt="" />
+                            差 &nbsp;&nbsp;
+                        </div>
+                        <div style="color: rgba(4, 179, 228, 1)">
+                            {{ typesofdata.花生.value }}亩
+                        </div>
+                        <div style="color: rgba(4, 179, 228, 1)">
+                            {{ typesofdata.花生.percent }}
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="leftFoldDiv" @click="leftFoldClick()">
+                <el-icon><ArrowRightBold /></el-icon>
+            </div>
+        </div>
+        <div class="rightWra">
+            <div class="rightTop">
+                <div class="title">
+                    <span>高标准农田统计-作物长势等级</span>
+                    <p
+                        @click="
+                            Deta(
+                                'https://1912c.oss-cn-beijing.aliyuncs.com/egg-oss-demo/81f3b011-7a5d-4a21-88aa-8ea51142e564_%E6%95%B0%E6%8D%AE%E5%AF%BC%E5%87%BA.xlsx'
+                            )
+                        "
+                    >
+                        下载 &nbsp;
+                        <img
+                            src="@/assets/icons/svg/downloads.svg"
+                            style="width: 14px; height: 14px; cursor: pointer"
+                        />
+                    </p>
+                </div>
+                <div ref="farmlandDiv" class="farmlandDiv"></div>
+                <!-- <div ref="ProgressBarDiv" class="ProgressBar"></div> -->
+            </div>
+            <div class="rightbottom">
+                <div class="title">
+                    <span>作物长势等级统计-行政区划</span>
+                    <p
+                        @click="
+                            Deta(
+                                'https://1912c.oss-cn-beijing.aliyuncs.com/egg-oss-demo/0c0ff4cf-151a-470e-856a-b0fce0fde997_%E6%95%B0%E6%8D%AE%E5%AF%BC%E5%87%BA.xlsx'
+                            )
+                        "
+                    >
+                        下载 &nbsp;
+                        <img
+                            src="@/assets/icons/svg/downloads.svg"
+                            style="width: 14px; height: 14px; cursor: pointer"
+                        />
+                    </p>
+                </div>
+                <el-select
+                    popper-class="select_city"
+                    @change="selectTab(item)"
+                    v-model="value"
+                    clearable
+                    placeholder="全部"
+                >
+                    <el-option
+                        v-for="item in Township.arr"
+                        :key="item.properties.XZDM"
+                        :label="item.properties.XZMC"
+                        :value="item.properties.XZDM"
+                    />
+                </el-select>
+                <div ref="ASdivisionDiv" class="ASdivision"></div>
+            </div>
+            <div class="rightFoldDiv" @click="rightFoldClick()">
+                <el-icon><ArrowLeftBold /></el-icon>
+            </div>
+        </div>
+
+        <div class="bottom_center">
+            <TimeLine />
+        </div>
+        <div class="tool">
+            <span><img src="@/assets/images/LAYER.png" alt="" /></span>
+            <span><img src="@/assets/images/amplify.png" alt="" /></span>
+            <span><img src="@/assets/images/reduce.png" alt="" /></span>
+            <span><img src="@/assets/images/measure.png" alt="" /></span>
+            <span><img src="@/assets/images/face.png" alt="" /></span>
+            <span><img src="@/assets/images/position.png" alt="" /></span>
+        </div>
+        <div id="popup">
+            <div>{{ clickInfoMap.name }}：</div>
+            <div>{{ clickInfoMap.value }}亩</div>
+            <div class="cancel" @click="hiddenOverlayChart">X</div>
+        </div>
+        <div id="pop">
+            <div v-for="(item, index) in townZuowu.label" :key="index">
+                <div>{{ item.crop }}：</div>
+                <div>{{ (item.Shape_Area / 666.67).toFixed(2) }} 亩</div>
+            </div>
+            <div v-if="townZuowu.XZQMC">
+                <div>村名：</div>
+                <div>{{ townZuowu.XZQMC }}</div>
+            </div>
+            <div class="cancel" @click="hiddenOverlayChart">X</div>
+        </div>
+        <el-button v-if="flag" class="back_button" @click="back()">返回</el-button>
+    </div>
 </template>
 
-<script>
-export default {
+<script setup>
+import { ref, onMounted, inject, reactive, watch } from 'vue';
+import * as echarts from 'echarts';
+import TimeLine from '@/components/TimeLine/TimeLine.vue';
+import * as turf from '@turf/turf';
+import { useEcharts } from '@/hooks/useEcharts';
+import { getarea, getTownship, getvillage, getareas, dow } from '@/api/crops/classify.js';
+import axios from 'axios';
+import 'echarts-gl';
+import { download } from '@/utils/request';
 
+let viewer = ref(null);
+const areaDiv = ref(null);
+const typesofDiv = ref(null);
+const farmlandDiv = ref(null);
+const ProgressBarDiv = ref(null);
+const ASdivisionDiv = ref(null);
+const value = ref('370211');
+const leftProgressBarDiv = ref(null);
+let Township = reactive({ arr: [], brr: [], crr: [] }); //街道
+let OptionArr = reactive({ arr: [] });
+const clickInfoMap = ref({ name: '', value: '' });
+const checkedCities = ref([]);
+const formLandRef = ref([]);
+const flag = ref(false);
+let leftWraFlag = ref(true);
+let rightWraFlag = ref(true);
+let ff = ref('{x:765,y:191}');
+let Pie3D = reactive({
+    arr: [
+        {
+            name: '小麦',
+            value: 101,
+            itemStyle: {
+                opacity: 0.5,
+                color: 'rgba(110, 209, 84, 0.9)',
+            },
+        },
+        {
+            // 数据项名称
+            name: '花生',
+            value: 156,
+            itemStyle: {
+                // 透明度
+                opacity: 0.5,
+                // 扇形颜色
+                color: 'rgba(251, 201, 3, 1)',
+            },
+            label: {
+                show: true,
+            },
+        },
+        {
+            // 数据项名称
+            name: '大豆',
+            value: 156,
+            itemStyle: {
+                // 透明度
+                opacity: 0.5,
+                // 扇形颜色
+                color: 'rgba(240, 129, 31, 0.9)',
+            },
+            label: {
+                show: true,
+            },
+        },
+        {
+            // 数据项名称
+            name: '地瓜',
+            value: 156,
+            itemStyle: {
+                // 透明度
+                opacity: 0.5,
+                // 扇形颜色
+                color: 'rgba(27, 85, 222, 1)',
+            },
+            label: {
+                show: true,
+            },
+        },
+        {
+            // 数据项名称
+            name: '蓝莓',
+            value: 56,
+            itemStyle: {
+                // 透明度
+                opacity: 0.5,
+                // 扇形颜色
+                color: 'rgba(72, 102, 211, 0.9)',
+            },
+            label: {
+                show: true,
+            },
+        },
+        {
+            // 数据项名称
+            name: '茶叶',
+            value: 56,
+            itemStyle: {
+                // 透明度
+                opacity: 0.5,
+                // 扇形颜色
+                color: 'rgba(26, 255, 140, 1)',
+            },
+            label: {
+                show: true,
+            },
+        },
+    ],
+});
+
+let typesofdata = {
+    小麦: { value: '12364', percent: '20%' },
+    花生: { value: '12364', percent: '20%' },
+    大豆: { value: '12364', percent: '20%' },
+    地瓜: { value: '12364', percent: '20%' },
+    花生: { value: '12364', percent: '20%' },
+};
+let dic = {
+    小麦: 'rgba(102, 142, 214, 0.8)',
+    玉米: 'rgba(255, 225, 104, 0.8)',
+    大豆: 'rgba(156, 220, 130, 0.8)',
+    地瓜: 'rgba(156, 220, 130, 0.8)',
+    花生: 'rgba(212, 236, 89, 0.8)',
+    蓝莓: 'rgba(50, 211, 235, 0.8)',
+    茶叶: 'rgba(91, 196, 159, 0.8)',
+    马铃薯: 'rgba(254, 182, 77, 0.8)',
+    白菜和萝卜: 'rgba(250, 129, 109, 0.8)',
+    其他: 'rgba(250, 129, 109, 0.8)',
+};
+watch(
+    () => Township.arr,
+    val => {
+        console.log('val:', val);
+    }
+);
+//行政区划数据
+var data = {
+    title: [],
+};
+let dd = {
+    小麦: [],
+    玉米: [],
+    大豆: [],
+    地瓜: [],
+    花生: [],
+    蓝莓: [],
+    茶叶: [],
+    马铃薯: [],
+    白菜和萝卜: [],
+    其他: [],
+};
+let areatext = '8383894';
+
+const change = () => {
+    console.log(checkedCities.value);
+};
+
+//表格数据
+let tableData = [
+    {
+        date: '小麦',
+        name: '2934362亩',
+        address: '35%',
+    },
+    {
+        date: '玉米',
+        name: '1676778亩',
+        address: '20%',
+    },
+    {
+        date: '大豆',
+        name: '1257584亩',
+        address: '15%',
+    },
+    {
+        date: '地瓜',
+        name: '1341423亩',
+        address: '16%',
+    },
+    {
+        date: '花生',
+        name: '1592939亩',
+        address: '19%',
+    },
+];
+let TypeTime = {
+    大豆: [1100, 1395, 1948, 2203, 3402, 1860, 2934, 2490, 2323],
+    小麦: [1283, 2883, 2939, 1233, 1992, 1928, 3949, 1929, 3434],
+    地瓜: [1823, 1948, 1928, 2294, 2302, 3903, 3493, 2323, 2545],
+    花生: [2374, 1934, 3943, 3493, 2083, 1928, 2984, 3279, 1739],
+};
+
+// 组件挂载完成后执行
+onMounted(() => {
+    getArea(); //请求
+    getaArea(); //面积
+    getTownships();
+    getvillages(); //村
+
+    //地图
+    initMap();
+    areachar();
+    typesof();
+    farmland();
+    // ProgressBar();
+    ASdivision();
+    getFarmland();
+});
+
+/*-------------地图------------------------*/
+const mapOption = {
+    url:
+        'http://{s}.tianditu.gov.cn/img_c/wmts?service=wmts&request=GetTile&version=1.0.0' +
+        '&LAYER=img&tileMatrixSet=c&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}' +
+        '&style=default&format=tiles&tk=31091965e263284a501a723b8909f405',
+    layer: 'tdtCva',
+    style: 'default',
+    format: 'tiles',
+    tileMatrixSetID: 'c',
+    subdomains: ['t0', 't1', 't2', 't3', 't4', 't5', 't6', 't7'],
+    tilingScheme: new Cesium.GeographicTilingScheme(),
+    tileMatrixLabels: [
+        '1',
+        '2',
+        '3',
+        '4',
+        '5',
+        '6',
+        '7',
+        '8',
+        '9',
+        '10',
+        '11',
+        '12',
+        '13',
+        '14',
+        '15',
+        '16',
+        '17',
+        '18',
+        '19',
+    ],
+    maximumLevel: 18,
+};
+Cesium.Ion.defaultAccessToken =
+    'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJiYzcwZmJmNi02MzQ5LTQ1MGEtODgzMy0yZTZiZGExY2MzMGMiLCJpZCI6MTAxOTgsInNjb3BlcyI6WyJhc2wiLCJhc3IiLCJnYyJdLCJpYXQiOjE1ODEzMDgxNTR9.NeJU4yfUi-SnLrNDOBYsQgmiSh3B4axCTi1m84Qw99c';
+function initMap() {
+    viewer = new Cesium.Viewer('cesiumContainer', {
+        baseLayerPicker: false,
+        shouldAnimate: true, //自动播放
+        infoBox: false, //信息框
+        animation: false, //“动画”窗口小部件提供用于播放，暂停和倒退的按钮，以及当前时间和日期，并由“飞梭环”包围，用于控制动画的速度。cesium示例地图左下角那个
+        timeline: false, //时间轴是用于显示和控制当前场景时间的小部件。
+        geocoder: false, //查找，用于查找地址和地标，以及将照相机悬挂到它们。使用铯离子进行地址解析。,cesium示例地图右上角的放大镜
+        homeButton: false, //主页按钮
+        navigationHelpButton: false, //导航帮助按钮
+        selectionIndicator: false, //原生选择绿框
+        fullscreenButton: false, //右下角的全屏按钮
+        // terrainProvider:new Cesium.createWorldTerrain(),
+        terrainProvider: new Cesium.EllipsoidTerrainProvider({}),
+        sceneModePicker: false, //是否显示投影方式控件
+        contextOptions: {
+            webgl: {
+                alpha: true,
+            },
+        },
+
+        imageryProvider: new Cesium.WebMapTileServiceImageryProvider({
+            ...mapOption,
+            // url: "http://service.sdmap.gov.cn/hisimage/weipian202209?tk=9cc3e9deb3cf643b6f133717c333d16d",
+            // layer: "c",
+            // style: ",c",
+            // format: "image/png",
+            // tileMatrixSetID: "EPSG:4490",
+            // rectangle: Cesium.Rectangle.fromDegrees(114.8, 34.35, 122.82, 38.43),
+            // // subdomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],
+            // tilingScheme: new Cesium.GeographicTilingScheme(),
+            // tileMatrixLabels: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19"],
+            // // maximumLevel: 18
+        }),
+    });
+    // 去除logo
+    viewer.cesiumWidget.creditContainer.style.display = 'none';
+    //加载地图服务
+    // let map = new Cesium.WebMapServiceImageryProvider({
+    //     url: `http://121.36.229.60:9080/geoserver/shuzisannong/wms`,
+    //     layers: 'shuzisannong:huangdaoqu_town', //图层名
+    //     parameters: {
+    //         service: 'WMS',
+    //         format: 'image/png',
+    //         transparent: true, //是否透明
+    //     },
+    // });
+    // viewer.imageryLayers.addImageryProvider(map);
+    addWms('shuzisannong:huangdaoqu_town', 'tl');
+    viewer.camera.flyTo({
+        destination: Cesium.Rectangle.fromDegrees(119.5091, 35.5671, 120.3285, 36.1455),
+        duration: 2,
+    });
+
+    // 图层点击事件
+    layerClick();
+    // 蒙版
+    mbHandle();
+
+    //加载黄岛区村级地图服务
+    // Cesium.GeoJsonDataSource.load(
+    //     'http://121.36.229.60:9080/geoserver/shuzisannong/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=shuzisannong%3Ahuangdaoqu_village&maxFeatures=1180&outputFormat=application%2Fjson',
+    //     {
+    //         stroke: Cesium.Color.fromCssColorString('red'), //轮廓颜色
+    //         fill: Cesium.Color.fromCssColorString('rgba(0,0,0,0.1)'), //内部颜色
+    //         strokeWidth: 3, //轮廓宽度    clampToGround: true,//是否贴地
+    //     }
+    // ).then(function (dataSource) {
+    //     // dataSource.name = 'geojsonDataSource'//自定义属性，方便以后操作
+    //     viewer.dataSources.add(dataSource); //添加
+    //     viewer.flyTo(dataSource, {
+    //         duration: 5,
+    //         offset: {
+    //             heading: 0.0,
+    //             pitch: -90, //保持垂直视角
+    //         },
+    //     }); //移动到该位置
+    // });
+    //加载黄岛区镇级地图服务
+    // Cesium.GeoJsonDataSource.load(
+    //     'http://121.36.229.60:9080/geoserver/shuzisannong/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=shuzisannong%3Ahuangdaoqu_town&maxFeatures=50&outputFormat=application%2Fjson',
+    //     {
+    //         stroke: Cesium.Color.fromCssColorString('#fff'), //轮廓颜色
+    //         fill: Cesium.Color.fromCssColorString('rgba(0,0,0,0.1)'), //内部颜色
+    //         strokeWidth: 3, //轮廓宽度    clampToGround: true,//是否贴地
+    //     }
+    // ).then(function (dataSource) {
+    //     // dataSource.name = 'geojsonDataSource'//自定义属性，方便以后操作
+    //     viewer.dataSources.add(dataSource); //添加
+    //     viewer.flyTo(dataSource, {
+    //         duration: 5,
+    //         offset: {
+    //             heading: 0.0,
+    //             pitch: -90, //保持垂直视角
+    //         },
+    //     }); //移动到该位置
+    // });
+
+    // axios({
+    //     method: 'get',
+    //     url: 'http://121.36.229.60:9080/geoserver/shuzisannong/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=shuzisannong%3Ahuangdaoqu_town&maxFeatures=50&outputFormat=application%2Fjson',
+    // })
+    //     .then(res => {
+    //         res.data.features.forEach(item => {
+    //             addBoundaryHandle(item.geometry.coordinates, '');
+    //         });
+    //     })
+    //     .catch(error => {});
+
+    //作物分类面积提取地图服务
+    // let map2 = new Cesium.WebMapServiceImageryProvider({
+    //     url: `http://121.36.229.60:9080/geoserver/shuzisannong/wms`,
+    //     layers: 'shuzisannong:fenlei', //图层名
+    //     parameters: {
+    //         service: 'WMS',
+    //         format: 'image/png',
+    //         CQL_FILTER: `crop=${city_code}`,
+    //         transparent: true, //是否透明
+    //     },
+    // });
+    // viewer.imageryLayers.addImageryProvider(map2);
+
+    // Cesium.GeoJsonDataSource.load(
+    //     'http://121.36.229.60:9080/geoserver/shuzisannong/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=shuzisannong%3Afenlei&maxFeatures=50&outputFormat=application%2Fjson',
+    //     {
+    //         stroke: Cesium.Color.fromCssColorString('rgba(165,214,63,1)'), //轮廓颜色
+    //         fill: Cesium.Color.fromCssColorString('rgba(0,0,0,0.1)'), //内部颜色
+    //         strokeWidth: 3, //轮廓宽度    clampToGround: true,//是否贴地
+    //     }
+    // ).then(function (dataSource) {
+    //     // dataSource.name = 'geojsonDataSource'//自定义属性，方便以后操作
+    //     viewer.dataSources.add(dataSource); //添加
+    //     viewer.flyTo(dataSource, {
+    //         duration: 5,
+    //         offset: {
+    //             heading: 0.0,
+    //             pitch: -90, //保持垂直视角
+    //         },
+    //     }); //移动到该位置
+    // });
+    //全球注记
+    // let zhujiLayer = new Cesium.WebMapTileServiceImageryProvider({
+    //     url: 'http://t0.tianditu.com/cia_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cia&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=5956e6519f2bb0ae8e57bc834298c9f1',
+    //     layer: 'tdtImgBasicLayer',
+    //     style: 'default',
+    //     format: 'image/jpeg',
+    //     tileMatrixSetID: 'GoogleMapsCompatible',
+    //     show: false,
+    // });
+    // viewer.imageryLayers.addImageryProvider(zhujiLayer);
+
+    // viewer.camera.flyTo(
+    //     {
+    //         destination: new Cesium.Cartesian3.fromDegrees(104.9, 36.35, 8000000),
+    //         duration: 0,
+    //     },
+    //     {
+    //         offset: {
+    //             heading: Cesium.Math.toRadians(0.0),
+    //             pitch: Cesium.Math.toRadians(-25),
+    //         },
+    //     }
+    // );
 }
+
+// data数据数组
+// name实体名称，方便以后删除
+// color实体颜色
+function addBoundaryHandle(data, name, color) {
+    data.forEach(item => {
+        let arr = [];
+        item[0].forEach(mem => {
+            arr.push(mem[0]);
+            arr.push(mem[1]);
+        });
+        viewer.entities.add({
+            name: name,
+            polyline: {
+                positions: Cesium.Cartesian3.fromDegreesArray(arr),
+                width: 6,
+                // material: new Cesium.PolylineDashMaterialProperty({//虚线
+                material: new Cesium.PolylineGlowMaterialProperty({
+                    //光晕
+                    glowPower: 0.2,
+                    color: color
+                        ? Cesium.Color.fromCssColorString(color)
+                        : Cesium.Color.fromBytes(250, 128, 114), //#FA8072
+                }),
+                // followSurface: false, //是否贴着地表
+                clampToGround: true, //贴地
+            },
+        });
+    });
+}
+function getLevel(height) {
+    if (height > 48000000) {
+        return 0;
+    } else if (height > 24000000) {
+        return 1;
+    } else if (height > 12000000) {
+        return 2;
+    } else if (height > 6000000) {
+        return 3;
+    } else if (height > 3000000) {
+        return 4;
+    } else if (height > 1500000) {
+        return 5;
+    } else if (height > 750000) {
+        return 6;
+    } else if (height > 375000) {
+        return 7;
+    } else if (height > 187500) {
+        return 8;
+    } else if (height > 93750) {
+        return 9;
+    } else if (height > 46875) {
+        return 10;
+    } else if (height > 23437.5) {
+        return 11;
+    } else if (height > 11718.75) {
+        return 12;
+    } else if (height > 5859.38) {
+        return 13;
+    } else if (height > 2929.69) {
+        return 14;
+    } else if (height > 1464.84) {
+        return 15;
+    } else if (height > 732.42) {
+        return 16;
+    } else if (height > 366.21) {
+        return 17;
+    } else {
+        return 18;
+    }
+}
+function getFarmland() {
+    axios({
+        url:
+            serverAPI.geoserverUrl +
+            '/shuzisannong/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=shuzisannong%3Afarmland&maxFeatures=50&outputFormat=application%2Fjson',
+        method: 'get',
+    })
+        .then(res => {
+            console.log('农田：', res);
+            formLandRef.value = res.data.features;
+        })
+        .catch(err => {});
+}
+
+let townZuowu = ref({ label: [] }); //镇的作物
+let XZDM = '';
+// 图层点击事件
+function layerClick() {
+    var handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas);
+    handler.setInputAction(function (movement) {
+        var ray = viewer.camera.getPickRay(movement.position);
+        var cartesian = viewer.scene.globe.pick(ray, viewer.scene);
+        if (cartesian) {
+            let cartographic = Cesium.Cartographic.fromCartesian(cartesian);
+            if (cartographic) {
+                let xy = new Cesium.Cartesian2();
+                let alti = viewer.camera.positionCartographic.height;
+                let level = getLevel(alti);
+                const layers = viewer.imageryLayers._layers;
+                const index = layers.findIndex(
+                    item =>
+                        item._imageryProvider._layers &&
+                        item._imageryProvider._layers === 'shuzisannong:huangdaoqu_town'
+                );
+                if (index > -1) {
+                    const providerPoint = layers[index];
+                    // 拿取最后一个图层
+                    let provider = providerPoint._imageryProvider;
+                    if (
+                        provider &&
+                        provider.ready &&
+                        provider._layers &&
+                        providerPoint.show === true
+                    ) {
+                        xy = provider.tilingScheme.positionToTileXY(cartographic, level, xy);
+                        let promise = provider.pickFeatures(
+                            xy.x,
+                            xy.y,
+                            level,
+                            cartographic.longitude,
+                            cartographic.latitude
+                        );
+                        if (promise) {
+                            promise.then(data => {
+                                if (data.length > 0) {
+                                    let newData = data['0'];
+                                    if (newData.properties && newData.properties.XZDM) {
+                                        if (XZDM !== newData.properties.XZDM) {
+                                            //防止
+                                            XZDM = newData.properties.XZDM;
+                                            value.value = XZDM; //
+                                            selectTab(); //
+                                            let item = newData.data;
+                                            // 定位
+                                            viewer.camera.flyTo({
+                                                destination: Cesium.Rectangle.fromDegrees(
+                                                    item.bbox[0],
+                                                    item.bbox[1],
+                                                    item.bbox[2],
+                                                    item.bbox[3]
+                                                ),
+                                                duration: 2,
+                                            });
+                                            // 移除高亮
+                                            deleteEntityByName('townLine');
+                                            // 高亮边界
+                                            addBoundaryHandle(
+                                                item.geometry && item.geometry.coordinates,
+                                                'townLine',
+                                                'yellow'
+                                            );
+                                            // 移除以前的
+                                            removeWms(['village_CQL']);
+                                            // 添加新的
+                                            addvillage(
+                                                `XZDM=${newData.properties.XZDM}`,
+                                                'village_CQL'
+                                            );
+
+                                            // 显示该镇的种植结构
+                                            let entitys = viewer.entities._entities._array;
+                                            for (var na = entitys.length - 1; na >= 0; na--) {
+                                                if (
+                                                    entitys[na]._name &&
+                                                    entitys[na]._name ===
+                                                        'point' + newData.properties.XZDM
+                                                ) {
+                                                    let info = entitys[na]._info;
+                                                    // entitys[na].label.show = true
+                                                    townZuowu.value = info; //保存数据
+                                                    console.log(
+                                                        townZuowu.value,
+                                                        '------------------'
+                                                    );
+                                                    showOverlayChart(movement.position); // 添加地图移动监听：使地图移动弹窗跟着移动
+                                                    viewer.scene.postRender.addEventListener(
+                                                        infoWindowPostRender
+                                                    );
+                                                } else {
+                                                    // if (entitys[na].label) {
+                                                    //     entitys[na].label.show = false
+                                                    // }
+                                                }
+                                            }
+                                            // 移除村高亮
+                                            deleteEntityByName('villageLine');
+                                            XZQDM = '';
+                                        } else {
+                                            // // 已经有镇了，监听村点击
+                                            villageClick(layers, xy, level, cartographic);
+                                        }
+                                    } else {
+                                        removeWms(['village_CQL']);
+                                        // 移除框框
+                                        hiddenOverlayChart(); // 清除监听事件
+                                    }
+                                }
+                            });
+                        }
+                    }
+                }
+            }
+        }
+    }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
+}
+let XZQDM = '';
+// 村点击高亮
+function villageClick(layers, xy, level, cartographic) {
+    const index = layers.findIndex(
+        item =>
+            item._imageryProvider._layers &&
+            item._imageryProvider._layers === 'shuzisannong:huangdaoqu_village'
+    );
+    if (index > -1) {
+        const providerPoint = layers[index];
+        // 拿取最后一个图层
+        let provider = providerPoint._imageryProvider;
+        if (provider && provider.ready && provider._layers && providerPoint.show === true) {
+            xy = provider.tilingScheme.positionToTileXY(cartographic, level, xy);
+            let promise = provider.pickFeatures(
+                xy.x,
+                xy.y,
+                level,
+                cartographic.longitude,
+                cartographic.latitude
+            );
+            if (promise) {
+                promise.then(data => {
+                    if (data.length > 0) {
+                        let newData = data['0'];
+                        if (newData.properties && newData.properties.XZQDM) {
+                            if (XZQDM !== newData.properties.XZQDM) {
+                                //防止
+                                XZQDM = newData.properties.XZQDM;
+                                let item = newData.data;
+                                // 移除高亮
+                                deleteEntityByName('villageLine');
+                                // 高亮边界
+                                addBoundaryHandle(
+                                    item.geometry && item.geometry.coordinates,
+                                    'villageLine',
+                                    'yellow'
+                                );
+                                // townZuowu.value = info//保存数据
+
+                                // 后插和村
+                                if (newData.properties.XZQDM === '370211104217') {
+                                    // console.log('后河岔村委会')
+                                    const rectangle = Cesium.Rectangle.fromDegrees(
+                                        item.bbox[0],
+                                        item.bbox[1],
+                                        item.bbox[2],
+                                        item.bbox[3]
+                                    );
+                                    const center = Cesium.Rectangle.center(rectangle); //获取视角范围中心点(得到的结果为弧度Cartographic)
+                                    let longitude = Cesium.Math.toDegrees(center.longitude); //将弧度转为度
+                                    let latitude = Cesium.Math.toDegrees(center.latitude);
+                                    let info = {
+                                        lon: longitude,
+                                        lat: latitude,
+                                        ...item.properties,
+                                        // XZQMC
+                                        label: [
+                                            { crop: '茶叶', Shape_Area: 2820 },
+                                            { crop: '大豆', Shape_Area: 2767 },
+                                            { crop: '花生', Shape_Area: 62356 },
+                                            { crop: '蓝莓', Shape_Area: 5443 },
+                                            { crop: '地瓜', Shape_Area: 897 },
+                                            { crop: '小麦', Shape_Area: 20111 },
+                                        ],
+                                    };
+                                    townZuowu.value = info; //保存数据
+                                }
+                            }
+                        }
+                    }
+                });
+            }
+        }
+    }
+}
+// 添加村
+// CQL_FILTER:筛选的语句
+// customName地图服务自定义属性名
+function addvillage(CQL_FILTER, customName) {
+    let map2 = new Cesium.WebMapServiceImageryProvider({
+        url: `http://121.36.229.60:9080/geoserver/shuzisannong/wms`,
+        layers: 'shuzisannong:huangdaoqu_village', //图层名
+        parameters: {
+            service: 'WMS',
+            format: 'image/png',
+            transparent: true, //是否透明
+            // CQL_FILTER: `XZDM=${value.value}`,
+            CQL_FILTER: CQL_FILTER,
+        },
+    });
+    map2.customName = customName;
+    viewer.imageryLayers.addImageryProvider(map2);
+}
+// 移除wms
+// nameArry ：属性名数组（customName）
+// isMohu ：是否模糊查询
+function removeWms(nameArry, isMohu) {
+    if (viewer) {
+        // 倒叙遍历，customName是自定义的属性
+        const layers = viewer.imageryLayers._layers;
+        for (let f = layers.length - 1; f >= 0; f--) {
+            nameArry.forEach(item => {
+                if (layers[f]._imageryProvider && layers[f]._imageryProvider.customName) {
+                    if (isMohu) {
+                        if (layers[f]._imageryProvider.customName.indexOf(item) > -1) {
+                            viewer.imageryLayers.remove(layers[f]);
+                        }
+                    } else {
+                        if (layers[f]._imageryProvider.customName === item) {
+                            viewer.imageryLayers.remove(layers[f]);
+                        }
+                    }
+                }
+            });
+        }
+    }
+}
+
+// 根据实体名字删除实体(模糊删除)
+function deleteEntityByName(name) {
+    if (viewer) {
+        let entitys = viewer.entities._entities._array;
+        for (var na = entitys.length - 1; na >= 0; na--) {
+            if (entitys[na]._name && entitys[na]._name === name) {
+                viewer.entities.remove(entitys[na]);
+            }
+        }
+    }
+}
+//折叠
+
+function leftFoldClick() {
+    leftWraFlag.value = !leftWraFlag.value;
+    if (leftWraFlag.value) {
+        let leftWra = document.querySelector('.leftWra');
+        leftWra.style.transform = 'translate(0,0)';
+    } else {
+        let leftWra = document.querySelector('.leftWra');
+        leftWra.style.transform = 'translate(-107%,0)';
+    }
+}
+function rightFoldClick() {
+    rightWraFlag.value = !rightWraFlag.value;
+    if (rightWraFlag.value) {
+        let rightWra = document.querySelector('.rightWra');
+        rightWra.style.transform = 'translate(0,0)';
+    } else {
+        let rightWra = document.querySelector('.rightWra');
+        rightWra.style.transform = 'translate(107%,0)';
+    }
+}
+
+/*------------------接口--------------------*/
+const getArea = () => {
+    getarea({ time: '2023-04-25', subregion: '1', parent: '黄岛区' }).then(res => {
+        console.log(res);
+    });
+};
+//镇
+const getTownships = () => {
+    getTownship().then(res => {
+        Township.arr = res.features;
+        Township.arr.unshift({
+            bbox: [119.5091, 35.5671, 120.3285, 36.1455],
+            properties: {
+                XZDM: '370211',
+                XZMC: '全部',
+            },
+        });
+        let arr = [...res.features];
+        let brr = [];
+        arr.splice(0, 1);
+        arr.forEach(item => {
+            brr.push(item.properties.XZMC);
+        });
+        data.title = [...Object.values(brr)];
+        ASdivision();
+    });
+};
+//村
+const getvillages = () => {
+    getvillage().then(res => {
+        Township.brr = res.features;
+    });
+};
+//面积
+const getaArea = () => {
+    getareas().then(res => {
+        Township.crr = res.features;
+        data.title.forEach((item, index) => {
+            let town = res.features.map(i => {
+                if (item === i.properties.town) {
+                    return i.properties;
+                }
+            });
+            Object.keys(dd).forEach(it => {
+                const index = town.findIndex(a => a && a.crop === it);
+                if (index > -1) {
+                    dd[it].push(town[index].Shape_Area);
+                } else {
+                    dd[it].push(null);
+                }
+            });
+        });
+        ASdivision();
+    });
+};
+
+const selectTab = () => {
+    getArea();
+    TypeTime = {
+        大豆: [1034, 1295, 1348, 1203, 2402, 1160, 1934, 1490],
+        小麦: [1083, 1883, 2139, 1033, 992, 1328, 2949, 1529],
+        地瓜: [1223, 1548, 1828, 2094, 2202, 2903, 3293, 2023],
+        花生: [1374, 1734, 3143, 2493, 1983, 1728, 2584, 3079],
+    };
+    typesofdata = {
+        小麦: { value: '2435', percent: '20%' },
+        花生: { value: '2435', percent: '20%' },
+        大豆: { value: '2435', percent: '20%' },
+        地瓜: { value: '2435', percent: '20%' },
+        花生: { value: '2435', percent: '20%' },
+    };
+    Pie3D.arr = [
+        {
+            name: '小麦',
+            value: 20,
+            itemStyle: {
+                opacity: 0.5,
+                color: 'rgba(110, 209, 84, 0.9)',
+            },
+        },
+        {
+            // 数据项名称
+            name: '花生',
+            value: 10,
+            itemStyle: {
+                // 透明度
+                opacity: 0.5,
+                // 扇形颜色
+                color: 'rgba(251, 201, 3, 1)',
+            },
+            label: {
+                show: true,
+            },
+        },
+        {
+            // 数据项名称
+            name: '大豆',
+            value: 13,
+            itemStyle: {
+                // 透明度
+                opacity: 0.5,
+                // 扇形颜色
+                color: 'rgba(240, 129, 31, 0.9)',
+            },
+            label: {
+                show: true,
+            },
+        },
+        {
+            // 数据项名称
+            name: '地瓜',
+            value: 18,
+            itemStyle: {
+                // 透明度
+                opacity: 0.5,
+                // 扇形颜色
+                color: 'rgba(27, 85, 222, 1)',
+            },
+            label: {
+                show: true,
+            },
+        },
+        {
+            // 数据项名称
+            name: '茶叶',
+            value: 16,
+            itemStyle: {
+                // 透明度
+                opacity: 0.5,
+                // 扇形颜色
+                color: 'rgba(26, 255, 140, 1)',
+            },
+            label: {
+                show: true,
+            },
+        },
+    ];
+    if (value.value == '370211') {
+        removeWms(['village_CQL']);
+        removeWms(['aaa']);
+        getTownships();
+        tableData = [
+            {
+                date: '小麦',
+                name: '2934362亩',
+                address: '35%',
+            },
+            {
+                date: '玉米',
+                name: '1676778亩',
+                address: '20%',
+            },
+            {
+                date: '大豆',
+                name: '1257584亩',
+                address: '15%',
+            },
+            {
+                date: '地瓜',
+                name: '1341423亩',
+                address: '16%',
+            },
+            {
+                date: '花生',
+                name: '1592939亩',
+                address: '19%',
+            },
+        ];
+        TypeTime = {
+            大豆: [1100, 1395, 1948, 2203, 3402, 1860, 2934, 2490],
+            小麦: [1283, 2883, 2939, 1233, 1992, 1928, 3949, 1929],
+            地瓜: [1823, 1948, 1928, 2294, 2302, 3903, 3493, 2323],
+            花生: [2374, 1934, 3943, 3493, 2083, 1928, 2984, 3279],
+        };
+        areatext = '8383894';
+        typesofdata = {
+            小麦: { value: 12364, percent: '20%' },
+            花生: { value: 12364, percent: '20%' },
+            大豆: { value: 12364, percent: '20%' },
+            地瓜: { value: 12364, percent: '20%' },
+            花生: { value: 12364, percent: '20%' },
+        };
+        Pie3D = reactive({
+            arr: [
+                {
+                    name: '小麦',
+                    value: 101,
+                    itemStyle: {
+                        opacity: 0.5,
+                        color: 'rgba(110, 209, 84, 0.9)',
+                    },
+                },
+                {
+                    // 数据项名称
+                    name: '花生',
+                    value: 156,
+                    itemStyle: {
+                        // 透明度
+                        opacity: 0.5,
+                        // 扇形颜色
+                        color: 'rgba(251, 201, 3, 1)',
+                    },
+                    label: {
+                        show: true,
+                    },
+                },
+                {
+                    // 数据项名称
+                    name: '大豆',
+                    value: 156,
+                    itemStyle: {
+                        // 透明度
+                        opacity: 0.5,
+                        // 扇形颜色
+                        color: 'rgba(240, 129, 31, 0.9)',
+                    },
+                    label: {
+                        show: true,
+                    },
+                },
+                {
+                    // 数据项名称
+                    name: '地瓜',
+                    value: 156,
+                    itemStyle: {
+                        // 透明度
+                        opacity: 0.5,
+                        // 扇形颜色
+                        color: 'rgba(27, 85, 222, 1)',
+                    },
+                    label: {
+                        show: true,
+                    },
+                },
+                {
+                    // 数据项名称
+                    name: '蓝莓',
+                    value: 56,
+                    itemStyle: {
+                        // 透明度
+                        opacity: 0.5,
+                        // 扇形颜色
+                        color: 'rgba(72, 102, 211, 0.9)',
+                    },
+                    label: {
+                        show: true,
+                    },
+                },
+                {
+                    // 数据项名称
+                    name: '茶叶',
+                    value: 56,
+                    itemStyle: {
+                        // 透明度
+                        opacity: 0.5,
+                        // 扇形颜色
+                        color: 'rgba(26, 255, 140, 1)',
+                    },
+                    label: {
+                        show: true,
+                    },
+                },
+            ],
+        });
+        hiddenOverlayChart();
+    }
+    areatext = '1293842';
+    tableData = [
+        {
+            date: '小麦',
+            name: '414029亩',
+            address: '32%',
+        },
+        {
+            date: '玉米',
+            name: '232891亩',
+            address: '18%',
+        },
+        {
+            date: '大豆',
+            name: '194076亩',
+            address: '15%',
+        },
+        {
+            date: '地瓜',
+            name: '207014亩',
+            address: '16%',
+        },
+        {
+            date: '花生',
+            name: '245829亩',
+            address: '19%',
+        },
+    ];
+
+    let arr = [...Township.arr];
+    console.log('arr:', arr);
+    arr.forEach(item => {
+        if (item.properties.XZDM == value.value) {
+            viewer.camera.flyTo({
+                destination: Cesium.Rectangle.fromDegrees(
+                    item.bbox[0],
+                    item.bbox[1],
+                    item.bbox[2],
+                    item.bbox[3]
+                ),
+                duration: 2,
+            });
+        }
+        let arr = [...Township.brr];
+        let brr = [];
+        // console.log(Township.brr);
+        arr.forEach(item => {
+            if (item.properties.XZDM == value.value) {
+                brr.push(item.properties.XZQMC);
+            }
+        });
+        // console.log(brr);
+        data.title = [...Object.values(brr)];
+    });
+    ASdivision();
+    areachar();
+    typesof();
+    let town = [...Township.arr];
+    const townData = town.find(item => item.properties.XZDM === value.value);
+    if (townData) {
+        // 移除镇高亮
+        deleteEntityByName('townLine');
+        // 高亮镇边界
+        addBoundaryHandle(townData.geometry.coordinates, 'townLine', 'yellow');
+    }
+    // 移除以前村
+    removeWms(['aaa']);
+    // 添加村
+    addvillage(`XZDM=${value.value}`, 'aaa');
+    getarea({ time: '2023-04-26', subregion: '1', parent: '黄岛区' }).then(res => {
+        let arr = [];
+        res.data.map((item, index) => {
+            if (item.region == townData.properties.XZMC) {
+                arr.push({
+                    crop: item.type,
+                    Shape_Area: item.area,
+                });
+            }
+        });
+        townZuowu.value = {
+            label: arr,
+        };
+        console.log();
+        console.log(arr);
+        showOverlayChart({ x: 642, y: 312 });
+    });
+};
+
+//下载
+/*---------------------------*/
+const Deta = item => {
+    downloadURL(item);
+};
+
+const downloadURL = url => {
+    let link = document.createElement('a');
+    link.style.display = 'none';
+    link.href = url;
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+};
+/*-------------echarts--------------*/
+function areachar() {
+    const areaDivIntance = echarts.init(areaDiv.value);
+    let dataX = [
+        '好',
+        '较好',
+        '适中',
+        '较差',
+        '差',
+    ]; //名称
+    let dataY = [3598, 1235, 2354, 3251, 1652]; //数据
+    let zoomShow = false;
+    if (dataY.length > 14) {
+        zoomShow = true;
+    } else {
+        zoomShow = false;
+    }
+    var option = {
+        tooltip: {
+            trigger: 'axis',
+            axisPointer: {
+                type: 'shadow',
+            },
+        },
+        grid: {
+            top: '10%',
+            right: '5%',
+            left: '15%',
+            bottom: '10%',
+        },
+        xAxis: [
+            {
+                type: 'category',
+                data: dataX,
+                axisLine: {
+                    lineStyle: {
+                        color: 'rgba(66, 192, 255, .3)',
+                    },
+                },
+                axisLabel: {
+                    interval: 0,
+                    margin: 10,
+                    color: '#05D5FF',
+                    textStyle: {
+                        fontSize: 11,
+                    },
+                    rotate: '0',
+                },
+                axisTick: {
+                    //刻度
+                    show: false,
+                },
+            },
+        ],
+        yAxis: {
+            name: '面积(亩)',
+            nameTextStyle: {
+                color: 'rgba(255, 255, 255, 0.8)',
+                fontSize: 14,
+            },
+            type: 'value',
+            axisLabel: {
+                color: 'rgba(255,255,255,0.7)',
+            },
+            splitLine: {
+                // lineStyle: {
+                //     type: 'dashed',
+                // },
+                show: false,
+            },
+            minInterval: 1,
+            axisLine: {
+                show: false,
+            },
+            axisTick: {
+                show: false,
+            },
+        },
+        dataZoom: [
+            //滚动条
+            {
+                show: zoomShow,
+                type: 'slider',
+                realtime: true,
+                startValue: 0,
+                endValue: 14,
+                xAxisIndex: [0],
+                bottom: '10',
+                left: '30',
+                height: 10,
+                borderColor: 'rgba(0,0,0,0)',
+                textStyle: {
+                    color: '#05D5FF',
+                },
+            },
+        ],
+        series: [
+            {
+                type: 'bar',
+                data: dataY,
+                barWidth: '10',
+                itemStyle: {
+                    normal: {
+                        color: new echarts.graphic.LinearGradient(
+                            0,
+                            0,
+                            0,
+                            1,
+                            [
+                                {
+                                    offset: 0,
+                                    color: 'rgba(45, 204, 177, 1)', // 0% 处的颜色
+                                },
+                                {
+                                    offset: 0.98,
+                                    color: 'rgba(71, 179, 161, 0)', // 100% 处的颜色
+                                },
+                            ],
+                            false
+                        ),
+                        shadowColor: 'rgba(5, 213, 255, 1)',
+                        shadowBlur: 4,
+                    },
+                },
+                label: {
+                    normal: {
+                        show: true,
+                        lineHeight: 10,
+                        formatter: '{c}',
+                        position: 'top',
+                        textStyle: {
+                            color: '#fff',
+                            fontSize: 10,
+                        },
+                    },
+                },
+            },
+        ],
+    };
+
+    option && areaDivIntance.setOption(option);
+
+    window.addEventListener('resize', function () {
+        areaDivIntance.resize();
+    });
+}
+
+function typesof() {
+    const typesofDivIntance = echarts.init(typesofDiv.value);
+    let isSelected = '';
+    let isHovered = '';
+    let hoveredIndex = '';
+    let option = getPie3D(Pie3D.arr, 0.7);
+    // 生成扇形的曲面参数方程
+    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: {
+                orient: 'vertical', // 设置图例为垂直方向排列
+                right: 0, // 将图例放在右边
+                show: true,
+                top: 20,
+                textStyle: { color: 'rgba(255,255,255,.9)' },
+            },
+            tooltip: {
+                formatter: params => {
+                    if (params.seriesName !== 'mouseoutSeries') {
+                        return `${
+                            params.seriesName
+                        }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${
+                            params.color
+                        };"></span>${option.series[params.seriesIndex].pieData.value}`;
+                    }
+                },
+            },
+            xAxis3D: {
+                min: -1,
+                max: 1,
+            },
+            yAxis3D: {
+                min: -1,
+                max: 1,
+            },
+            zAxis3D: {
+                min: -1,
+                max: 1,
+            },
+            grid3D: {
+                show: false,
+                boxHeight: 10,
+                top: '-5%',
+                left: '-25',
+                viewControl: {
+                    // 3d效果可以放大、旋转等，请自己去查看官方配置
+                    alpha: 40,
+                    beta: 30,
+                    rotateSensitivity: 1,
+                    zoomSensitivity: 0,
+                    panSensitivity: 0,
+                    autoRotate: true,
+                    distance: 170,
+                },
+                // 后处理特效可以为画面添加高光、景深、环境光遮蔽（SSAO）、调色等效果。可以让整个画面更富有质感。
+                postEffect: {
+                    // 配置这项会出现锯齿，请自己去查看官方配置有办法解决
+                    enable: true,
+                    bloom: {
+                        enable: true,
+                        bloomIntensity: 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;
+            let startRatio = option.series[hoveredIndex].pieData.startRatio;
+            let endRatio = option.series[hoveredIndex].pieData.endRatio;
+            // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
+            let 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);
+}
+
+function farmland() {
+    const farmlandDivIntance = echarts.init(farmlandDiv.value);
+    var option = {
+        tooltip: {
+            trigger: 'axis',
+            axisPointer: {
+                // Use axis to trigger tooltip
+                type: 'shadow', // 'shadow' as default; can also be 'line' or 'shadow'
+            },
+        },
+        legend: {
+            // data: ["已完成", "进行中"],
+            top: '7%',
+            left: '17%',
+            icon: 'rect',
+            textStyle: {
+                color: '#fff',
+            },
+        },
+        grid: {
+            top: '15%',
+            left: '5%',
+            right: '5%',
+            bottom: '10%',
+            containLabel: true,
+        },
+        xAxis: {
+            type: 'value',
+            axisLine: {
+                lineStyle: {
+                    color: 'rgba(255,255,255,0.8)',
+                },
+            },
+            splitLine: {
+                lineStyle: {
+                    color: 'rgba(255,255,255,0.3)', // 分割线颜色
+                },
+            },
+        },
+        yAxis: {
+            type: 'category',
+            data: ['片区7', '片区6', '片区5', '片区4', '片区3', '片区2', '片区1'],
+            axisLabel: {
+                color: 'rgba(255,255,255,0.8)',
+            },
+            axisTick: {
+                lineStyle: {
+                    color: '#668092',
+                    width: 1,
+                },
+                show: false,
+            },
+        },
+        series: [
+            {
+                name: '小麦',
+                type: 'bar',
+                stack: 'total',
+                label: {
+                    show: false,
+                },
+                emphasis: {
+                    focus: 'series',
+                },
+                // data: [121, 828, 144, 368, 390],
+                barWidth: 12,
+                itemStyle: {
+                    label: {
+                        show: false,
+                    },
+                    labelLine: {
+                        show: false,
+                    },
+                    color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+                        { offset: 0, color: 'rgba(33, 187, 251, 0.05)' },
+                        { offset: 1, color: 'rgba(33, 187, 251, 0.9)' },
+                    ]),
+                    // borderColor: 'rgba(7,165,255,0.7)',
+                    shadowBlur: 16,
+                    shadowColor: 'rgba(7,165,255,1)',
+                },
+            },
+            {
+                name: '花生',
+                type: 'bar',
+                stack: 'total',
+                label: {
+                    show: false,
+                },
+                emphasis: {
+                    focus: 'series',
+                },
+                data: [271, 132, 413, 210, 521],
+                barWidth: 12,
+                itemStyle: {
+                    label: {
+                        show: false,
+                    },
+                    labelLine: {
+                        show: false,
+                    },
+                    color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+                        { offset: 0, color: 'rgba(4, 247, 227, 0.05)' },
+                        { offset: 1, color: 'rgba(4, 247, 227, 0.9)' },
+                    ]),
+                    // borderColor: '#a2f9f7',
+                    shadowBlur: 16,
+                    shadowColor: '#a2f9f7',
+                },
+            },
+            {
+                name: '大豆',
+                type: 'bar',
+                stack: 'total',
+                label: {
+                    show: false,
+                },
+                emphasis: {
+                    focus: 'series',
+                },
+                data: [271, 132, 413, 210, 521, 232, 343],
+                barWidth: 12,
+                itemStyle: {
+                    label: {
+                        show: false,
+                    },
+                    labelLine: {
+                        show: false,
+                    },
+                    color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+                        { offset: 0, color: 'rgba(143, 186, 243, 0.05)' },
+                        { offset: 1, color: 'rgba(143, 186, 243, 0.9)' },
+                    ]),
+                    // borderColor: '#a2f9f7',
+                    shadowBlur: 16,
+                    shadowColor: '#a2f9f7',
+                },
+            },
+            {
+                name: '地瓜',
+                type: 'bar',
+                stack: 'total',
+                label: {
+                    show: false,
+                },
+                emphasis: {
+                    focus: 'series',
+                },
+                data: [271, 132, 413, 210, 521, 234, 321],
+                barWidth: 12,
+                itemStyle: {
+                    label: {
+                        show: false,
+                    },
+                    labelLine: {
+                        show: false,
+                    },
+                    color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+                        { offset: 0, color: 'rgba(255, 225, 104, 0.05)' },
+                        { offset: 1, color: 'rgba(255, 225, 104, 1)' },
+                    ]),
+                    // borderColor: '#a2f9f7',
+                    shadowBlur: 16,
+                    shadowColor: '#a2f9f7',
+                },
+            },
+        ],
+        // dataset: {
+        //     source: [
+        //         { status: '片区七', value1: 33, value2: 93, value3: 9 },
+        //         { status: '配送中', value1: 53, value2: 32 },
+        //         { status: '已出库', value1: 78, value2: 65 },
+        //         { status: '采购中', value1: 12, value2: 35 },
+        //         { status: '接单中', value1: 90, value2: 52 },
+        //     ],
+        // },
+    };
+
+    farmlandDivIntance.on('click', function (params) {
+        console.log(params.name);
+    });
+    farmlandDivIntance.on('click', param => ChartClick(param));
+    option && farmlandDivIntance.setOption(option, { notMerge: true, grid: { bottom: 20 } });
+    useEcharts(farmlandDivIntance, option);
+}
+function ProgressBar() {
+    const ProgressBarDivIntance = echarts.init(ProgressBarDiv.value);
+    var option = {
+        // backgroundColor: '#031d33',
+        grid: {
+            top: 0,
+            bottom: 0,
+            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);
+}
+// 添加wms
+function addWms(layers, customName) {
+    let map = new Cesium.WebMapServiceImageryProvider({
+        url: serverAPI.geoserverUrl + `/shuzisannong/wms?`,
+        layers: layers, //图层名
+        parameters: {
+            service: 'WMS',
+            format: 'image/png',
+            transparent: true, //是否透明
+            // CQL_FILTER: `crop in (${name})`,
+        },
+    });
+    map.customName = customName; //自己定义各种属性
+    let dd = viewer.imageryLayers.addImageryProvider(map); //添加图层
+    if (customName.indexOf('gbznt') > -1) {
+        // viewer.imageryLayers.lower(dd);//将图层下移一层
+        viewer.imageryLayers.lowerToBottom(dd); //将图层移到最底层
+        viewer.imageryLayers.raise(dd); //将图层上移一层
+    }
+}
+//返回
+function back() {
+    removeWms(['gbznt'], true);
+    addWms('shuzisannong:huangdaoqu_town', 'tl');
+    viewer.camera.flyTo({
+        destination: Cesium.Rectangle.fromDegrees(119.5091, 35.5671, 120.3285, 36.1455),
+        duration: 2,
+    });
+    flag.value = false;
+}
+// 图表点击事件
+function ChartClick(item) {
+    console.log('item:', item);
+    // 移除作物
+    removeWms(['huangdaoqu_town'], true);
+    removeWms(['tl'], true);
+    let layername = 'shuzisannong:farmland';
+
+    // 判断是否存在避免重复添加
+    let cz = false;
+    const layers = viewer.imageryLayers._layers;
+    for (let f = layers.length - 1; f >= 0; f--) {
+        if (
+            layers[f] &&
+            layers[f]._imageryProvider.customName &&
+            layers[f]._imageryProvider.customName === layername + 'gbznt'
+        ) {
+            cz = true;
+        }
+    }
+    if (!cz) {
+        // 添加高标准农田服务
+        addWms(layername, layername + 'gbznt');
+    }
+    // 定位到地块
+    let features = formLandRef.value;
+    features.forEach(it => {
+        console.log('it.properties.name:', it.properties.name);
+        console.log('item.name:', item.name);
+        if (it.properties.name === item.name) {
+            console.log('dingwei');
+            viewer.camera.flyTo({
+                destination: Cesium.Rectangle.fromDegrees(
+                    it.bbox[0],
+                    it.bbox[1],
+                    it.bbox[2],
+                    it.bbox[3]
+                ),
+                duration: 2,
+            });
+        }
+    });
+    flag.value = true;
+
+    townZuowu.value = {
+        label: [
+            { crop: '小麦', Shape_Area: '53000' },
+            { crop: '地瓜', Shape_Area: '50000' },
+        ],
+    };
+    console.log(townZuowu.label);
+    showOverlayChart({ x: 642, y: 312 });
+}
+function ASdivision() {
+    const ASdivisionDivIntance = echarts.init(ASdivisionDiv.value);
+    var option = {
+        // 设置图表的位置
+        grid: {
+            bottom: '8%',
+            left: '10%',
+            right: '6%',
+            top: '12%',
+            containLabel: true,
+        },
+        legend: {
+            // data: ["已完成", "进行中"],
+            top: '5%',
+            left: '10%',
+            icon: 'rect',
+            textStyle: {
+                color: '#fff',
+            },
+        },
+        tooltip: {
+            formatter: function (params) {
+                // 自定义悬浮文字的格式，params.value 为当前柱状图的数值
+                return (
+                    params.seriesName +
+                    '<span style="font-size: 14px; color: #f00;">' +
+                    (params.value / 66.72).toFixed(2) +
+                    '</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: false,
+                    position: '玉米',
+                    textStyle: {
+                        fontSize: 12,
+                        fontWeight: 'bolder',
+                        color: 'rgba(255,255,255,1)',
+                    },
+                },
+                // 图形样式
+                itemStyle: {
+                    barBorderRadius: [0, 0, 0, 0],
+                    barBorderRadius: [0, 0, 0, 0], //
+                    // borderWidth: 1, // 设置边框宽度
+                    // borderColor: 'rgba(4, 247, 227, 0.8)', // 设置边框颜色
+                    color: {
+                        colorStops: [
+                            {
+                                offset: 0,
+                                color: 'rgba(4, 247, 227, 0.9)', // 0% 处的颜色
+                            },
+                            {
+                                offset: 1,
+                                color: 'rgba(4, 247, 227, 0.25)', // 100% 处的颜色
+                            },
+                        ],
+                    },
+                },
+                data: dd.玉米, // 系列中的数据内容数组
+            },
+            {
+                type: 'bar', // 系列类型
+                name: '大豆', // 系列名称, 用于tooltip的显示, legend 的图例筛选
+                // 数据堆叠，同个类目轴上系列配置相同的stack值后，后一个系列的值会在前一个系列的值上相加
+                stack: '总量',
+                barMaxWidth: 30, // 柱条的最大宽度，不设时自适应
+                // 图形上的文本标签
+                label: {
+                    show: false,
+                    position: 'inside',
+                    formatter: '大豆',
+                    textStyle: {
+                        fontSize: 12,
+                        fontWeight: 'bolder',
+                        color: 'rgba(255,255,255,1)',
+                    },
+                },
+                // 图形样式
+                itemStyle: {
+                    barBorderRadius: [0, 0, 0, 0], //
+                    // borderWidth: 1, // 设置边框宽度
+                    // borderColor: 'rgba(143, 186, 243, 0.8)', // 设置边框颜色
+                    color: {
+                        colorStops: [
+                            {
+                                offset: 0,
+                                color: 'rgba(143, 186, 243, 0.9)', // 0% 处的颜色
+                            },
+                            {
+                                offset: 1,
+                                color: 'rgba(143, 186, 243, 0.3)', // 100% 处的颜色
+                            },
+                        ],
+                    },
+                },
+                data: dd.大豆, // 系列中的数据内容数组
+            },
+            {
+                type: 'bar', // 系列类型
+                name: '花生', // 系列名称, 用于tooltip的显示, legend 的图例筛选
+                // 数据堆叠，同个类目轴上系列配置相同的stack值后，后一个系列的值会在前一个系列的值上相加
+                stack: '总量',
+                barMaxWidth: 30, // 柱条的最大宽度，不设时自适应
+                // 图形上的文本标签
+                label: {
+                    show: false,
+                    position: 'inside',
+                    formatter: '花生',
+                    textStyle: {
+                        fontSize: 12,
+                        fontWeight: 'bolder',
+                        color: 'rgba(255,255,255,1)',
+                    },
+                },
+                // 图形样式
+                itemStyle: {
+                    barBorderRadius: [0, 0, 0, 0],
+                    barBorderRadius: [0, 0, 0, 0], //
+                    // borderWidth: 1, // 设置边框宽度
+                    // borderColor: 'rgba(4, 247, 227, 0.9)', // 设置边框颜色
+                    color: {
+                        colorStops: [
+                            {
+                                offset: 0,
+                                color: 'rgba(4, 247, 227, 0.9)', // 0% 处的颜色
+                            },
+                            {
+                                offset: 1,
+                                color: 'rgba(4, 247, 227, 0.25)', // 100% 处的颜色
+                            },
+                        ],
+                    },
+                },
+                data: dd.花生, // 系列中的数据内容数组
+            },
+            {
+                type: 'bar', // 系列类型
+                name: '小麦', // 系列名称, 用于tooltip的显示, legend 的图例筛选
+                // 数据堆叠，同个类目轴上系列配置相同的stack值后，后一个系列的值会在前一个系列的值上相加
+                stack: '总量',
+                barMaxWidth: 30, // 柱条的最大宽度，不设时自适应
+                // 图形上的文本标签
+                label: {
+                    show: false,
+                    position: 'inside',
+                    formatter: '小麦',
+                    textStyle: {
+                        fontSize: 12,
+                        fontWeight: 'bolder',
+                        color: 'rgba(255,255,255,1)',
+                    },
+                },
+                // 图形样式
+                itemStyle: {
+                    barBorderRadius: [0, 0, 0, 0],
+                    barBorderRadius: [0, 0, 0, 0], //
+                    // borderWidth: 1, // 设置边框宽度
+                    // borderColor: 'rgba(33, 187, 251, 0.8)', // 设置边框颜色
+                    color: {
+                        colorStops: [
+                            {
+                                offset: 0,
+                                color: 'rgba(33, 187, 251, 0.9)', // 0% 处的颜色
+                            },
+                            {
+                                offset: 1,
+                                color: 'rgba(33, 187, 251, 0.25)', // 100% 处的颜色
+                            },
+                        ],
+                    },
+                },
+                data: dd.小麦, // 系列中的数据内容数组
+            },
+            {
+                type: 'bar', // 系列类型
+                name: '蓝莓', // 系列名称, 用于tooltip的显示, legend 的图例筛选
+                // 数据堆叠，同个类目轴上系列配置相同的stack值后，后一个系列的值会在前一个系列的值上相加
+                stack: '总量',
+                barMaxWidth: 30, // 柱条的最大宽度，不设时自适应
+                // 图形上的文本标签
+                label: {
+                    show: false,
+                    position: 'inside',
+                    formatter: '蓝莓',
+                    textStyle: {
+                        fontSize: 12,
+                        fontWeight: 'bolder',
+                        color: 'rgba(255,255,255,1)',
+                    },
+                },
+                // 图形样式
+                itemStyle: {
+                    barBorderRadius: [0, 0, 0, 0],
+                    barBorderRadius: [0, 0, 0, 0], //
+                    // borderWidth: 1, // 设置边框宽度
+                    // borderColor: 'rgba(14, 223, 255, 0.8)', // 设置边框颜色
+                    color: {
+                        colorStops: [
+                            {
+                                offset: 0,
+                                color: 'rgba(14, 223, 255, 0.9)', // 0% 处的颜色
+                            },
+                            {
+                                offset: 1,
+                                color: 'rgba(14, 223, 255, 0.25)', // 100% 处的颜色
+                            },
+                        ],
+                    },
+                },
+                data: dd.蓝莓, // 系列中的数据内容数组
+            },
+        ],
+    };
+    // option && ASdivisionDivIntance.setOption(option, true);
+    useEcharts(ASdivisionDivIntance, option);
+}
+
+/*--------------------------------------------------------------------------------------------*/
+function getAreaFenlei() {
+    let fl = fenleiRef.value;
+    console.log('fl:', fl);
+    axios({
+        url:
+            serverAPI.geoserverUrl +
+            '/shuzisannong/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=shuzisannong%3Ahuangdaoqu_town&maxFeatures=50&outputFormat=application%2Fjson',
+    })
+        .then(res => {
+            console.log('res1111:', res);
+            let data = res.data.features;
+            data.forEach((item, index) => {
+                const rectangle = Cesium.Rectangle.fromDegrees(
+                    item.bbox[0],
+                    item.bbox[1],
+                    item.bbox[2],
+                    item.bbox[3]
+                );
+                const center = Cesium.Rectangle.center(rectangle); //获取视角范围中心点(得到的结果为弧度Cartographic)
+                let longitude = Cesium.Math.toDegrees(center.longitude); //将弧度转为度
+                let latitude = Cesium.Math.toDegrees(center.latitude);
+
+                if (item.properties.XZDM === '370211011') {
+                    //灵山卫街道
+                    longitude = 120.0863;
+                    latitude = 35.941;
+                } else if (item.properties.XZDM === '370211003') {
+                    //薛家岛街道
+                    longitude = 120.243682;
+                    latitude = 35.97123201;
+                }
+                const townData = fl[item.properties.XZMC];
+                let label = [];
+                if (townData) {
+                    label = townData.map((it, inex) => {
+                        // let dd = `${it.properties.crop} ：${(it.properties.Shape_Area / 666.67).toFixed(2)} 亩`
+                        // return dd
+                        return it.properties;
+                    });
+                }
+                // label = label.join(' ')
+                // console.log('label:', index, label,fl[item.properties.XZMC],item.properties.XZMC)
+                // 添加点
+                viewer.entities.add({
+                    name: 'point' + item.properties.XZDM,
+                    position: Cesium.Cartesian3.fromDegrees(longitude, latitude),
+                    point: new Cesium.PointGraphics({
+                        show: true,
+                        pixelSize: 10,
+                        // heightReference: Cesium.HeightReference.NONE,
+                        color: Cesium.Color.fromCssColorString('rgba(255, 255, 26, 1)'),
+                        outlineColor: new Cesium.Color(0, 0, 0, 0),
+                        outlineWidth: 0,
+                        disableDepthTestDistance: Number.POSITIVE_INFINITY, //去掉地形遮挡
+                        heightReference: Cesium.HeightReference.CLAMP_TO_GROUND, //贴地
+                    }),
+                    // label: {
+                    //     show: false,
+                    //     text: label.join(' '),
+                    //     font: '12px sans-serif',
+                    //     fillColor: Cesium.Color.WHITE,
+                    //     showBackground: true,
+                    //     backgroundColor: Cesium.Color.fromCssColorString('rgba(2, 31, 26, 0.6)'),//背景颜色
+                    //     // style: Cesium.LabelStyle.FILL,
+                    //     outlineWidth: 3,
+                    //     verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
+                    //     horizontalOrigin: Cesium.HorizontalOrigin.LEFT,//水平位置
+                    //     pixelOffset: new Cesium.Cartesian2(-80, -10),
+                    // },
+                    info: {
+                        label: label,
+                        ...item.properties,
+                        // 经纬度，以便监听
+                        lon: longitude,
+                        lat: latitude,
+                    },
+                });
+            });
+        })
+        .catch(err => {});
+}
+let fenleiRef = ref({});
+function mbHandle() {
+    axios({
+        url:
+            serverAPI.geoserverUrl +
+            '/shuzisannong/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=shuzisannong%3Afenlei&maxFeatures=137&outputFormat=application%2Fjson',
+    })
+        .then(res => {
+            let features = res.data.features;
+            let town = {};
+            // 按镇分类
+            features.forEach(item => {
+                let key = item.properties.town;
+                if (town[key]) {
+                    town[key].push(item);
+                } else {
+                    town[key] = [item];
+                }
+            });
+            fenleiRef.value = town;
+            getAreaFenlei();
+        })
+        .catch(err => {});
+}
+
+/*------------------------------------------柱状图--------------------------------------------*/
+// function getJson() {
+//     let dic = {
+//         小麦: 'rgba(102, 142, 214, 0.8)',
+//         玉米: 'rgba(255, 225, 104, 0.8)',
+//         大豆: 'rgba(156, 220, 130, 0.8)',
+//         地瓜: 'rgba(156, 220, 130, 0.8)',
+//         花生: 'rgba(212, 236, 89, 0.8)',
+//         蓝莓: 'rgba(50, 211, 235, 0.8)',
+//         茶叶: 'rgba(91, 196, 159, 0.8)',
+//         马铃薯: 'rgba(254, 182, 77, 0.8)',
+//         白菜和萝卜: 'rgba(250, 129, 109, 0.8)',
+//         其他: 'rgba(250, 129, 109, 0.8)',
+//     };
+//     // let viewer = viewers.value;
+//     axios({
+//         url: 'http://121.36.229.60:9080/geoserver/shuzisannong/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=shuzisannong%3Ahuangdaoqu_town&maxFeatures=50&outputFormat=application%2Fjson',
+//     })
+//         .then(res => {
+//             console.log('res:', res);
+//             let data = res.data.features;
+//             let name = Object.keys(dic);
+//             data.forEach((item, index) => {
+//                 // let hh = name[Math.floor((Math.random() * name.length))]
+//                 // let height = random(1000, 5000)
+
+//                 const rectangle = Cesium.Rectangle.fromDegrees(
+//                     item.bbox[0],
+//                     item.bbox[1],
+//                     item.bbox[2],
+//                     item.bbox[3]
+//                 );
+//                 const center = Cesium.Rectangle.center(rectangle); //获取视角范围中心点(得到的结果为弧度Cartographic)
+//                 let longitude = Cesium.Math.toDegrees(center.longitude); //将弧度转为度
+//                 let latitude = Cesium.Math.toDegrees(center.latitude);
+
+//                 if (item.properties.XZDM === '370211011') {
+//                     //灵山卫街道
+//                     let hh = name[Math.floor(Math.random() * name.length)];
+//                     let height = random(2000, 500);
+
+//                     longitude = 120.0863;
+//                     latitude = 35.941;
+//                     viewer.entities.add({
+//                         position: Cesium.Cartesian3.fromDegrees(longitude + 0.01, latitude + 0.01),
+//                         ellipse: {
+//                             semiMinorAxis: 400.0, //短轴
+//                             semiMajorAxis: 400.0, //长轴
+//                             height: height, //拉伸高度
+//                             extrudedHeight: 0, //离地高度
+//                             rotation: Cesium.Math.toRadians(60), //旋转
+//                             stRotation: Cesium.Math.toRadians(60), //旋转
+//                             fill: true, //是否显示圆的填充
+//                             material: Cesium.Color.fromCssColorString(`${dic[hh]}`), //圆的颜色,
+//                             outline: false, //是否显示圆轮廓
+//                             outlineColor: Cesium.Color.fromCssColorString(`rgba(255,255,0,1)`), //圆轮廓线的颜色,
+//                         },
+//                         info: {
+//                             name: hh,
+//                             value: height,
+//                         },
+//                     });
+//                 } else if (item.properties.XZDM === '370211003') {
+//                     //薛家岛街道
+//                     longitude = 120.243682;
+//                     latitude = 35.97123201;
+//                     let hh = name[Math.floor(Math.random() * name.length)];
+//                     let height = random(300, 5000);
+
+//                     viewer.entities.add({
+//                         position: Cesium.Cartesian3.fromDegrees(longitude + 0.01, latitude + 0.01),
+//                         ellipse: {
+//                             semiMinorAxis: 400.0, //短轴
+//                             semiMajorAxis: 400.0, //长轴
+//                             height: height, //拉伸高度
+//                             extrudedHeight: 0, //离地高度
+//                             rotation: Cesium.Math.toRadians(60), //旋转
+//                             stRotation: Cesium.Math.toRadians(60), //旋转
+//                             fill: true, //是否显示圆的填充
+//                             material: Cesium.Color.fromCssColorString(`${dic[hh]}`), //圆的颜色,
+//                             outline: false, //是否显示圆轮廓
+//                             outlineColor: Cesium.Color.fromCssColorString(`rgba(255,255,0,1)`), //圆轮廓线的颜色,
+//                         },
+//                         info: {
+//                             name: hh,
+//                             value: height,
+//                         },
+//                     });
+//                 } else if (index % 2 === 0) {
+//                     let hh = name[Math.floor(Math.random() * name.length)];
+//                     let height = random(100, 500);
+
+//                     viewer.entities.add({
+//                         position: Cesium.Cartesian3.fromDegrees(longitude + 0.01, latitude + 0.01),
+//                         ellipse: {
+//                             semiMinorAxis: 400.0, //短轴
+//                             semiMajorAxis: 400.0, //长轴
+//                             height: height, //拉伸高度
+//                             extrudedHeight: 0, //离地高度
+//                             rotation: Cesium.Math.toRadians(60), //旋转
+//                             stRotation: Cesium.Math.toRadians(60), //旋转
+//                             fill: true, //是否显示圆的填充
+//                             material: Cesium.Color.fromCssColorString(`${dic[hh]}`), //圆的颜色,
+//                             outline: false, //是否显示圆轮廓
+//                             outlineColor: Cesium.Color.fromCssColorString(`rgba(255,255,0,1)`), //圆轮廓线的颜色,
+//                         },
+//                         info: {
+//                             name: hh,
+//                             value: height,
+//                         },
+//                     });
+//                 }
+
+//                 let hh = name[Math.floor(Math.random() * name.length)];
+//                 let height = random(1000, 5000); //圆柱与圆高度为0时是圆
+
+//                 viewer.entities.add({
+//                     position: Cesium.Cartesian3.fromDegrees(longitude, latitude),
+//                     ellipse: {
+//                         semiMinorAxis: 400.0, //短轴
+//                         semiMajorAxis: 400.0, //长轴
+//                         height: height, //拉伸高度
+//                         extrudedHeight: 0, //离地高度
+//                         rotation: Cesium.Math.toRadians(60), //旋转
+//                         stRotation: Cesium.Math.toRadians(60), //旋转
+//                         fill: true, //是否显示圆的填充
+//                         material: Cesium.Color.fromCssColorString(`${dic[hh]}`), //圆的颜色,
+//                         outline: false, //是否显示圆轮廓
+//                         outlineColor: Cesium.Color.fromCssColorString(`rgba(255,255,0,1)`), //圆轮廓线的颜色,
+//                     },
+//                     info: {
+//                         name: hh,
+//                         value: height,
+//                     },
+//                 }); //
+
+//                 viewer.camera.flyTo({
+//                     // destination: Cesium.Rectangle.fromDegrees(119.5091, 31.5671, 120.3285, 35.1455),
+//                     // destination: new Cesium.Rectangle.fromDegrees(110.8, 30.8, 121.8, 30.9),
+//                     destination: Cesium.Cartesian3.fromDegrees(119.9091, 35.0991, 55000),
+//                     duration: 2,
+//                     orientation: {
+//                         pitch: Cesium.Math.toRadians(-30.0),
+//                         roll: 0.0,
+//                     },
+//                 }); // viewer.camera.twistRight(Cesium.Math.toDegrees(0.005).toFixed(2));
+//             });
+//         })
+//         .catch(err => {});
+// }
+// 地图移动时弹窗跟随
+function infoWindowPostRender() {
+    // let viewer = viewers.value;
+    if (townZuowu.value && townZuowu.value.lon && townZuowu.value.lat) {
+        //经纬度转为世界坐标
+
+        const gisPosition = Cesium.Cartesian3.fromDegrees(
+            Number(townZuowu.value.lon),
+            Number(townZuowu.value.lat),
+            0
+        ); //转化为屏幕坐标
+        var windowPosition = Cesium.SceneTransforms.wgs84ToWindowCoordinates(
+            viewer.scene,
+            gisPosition
+        );
+
+        if (Cesium.defined(windowPosition)) {
+            const pop = document.getElementById('pop');
+            pop.style.top = windowPosition.y - 10 + 'px';
+            pop.style.left = windowPosition.x + 10 + 'px';
+        }
+    }
+}
+// function mapClick() {
+//     // let viewer = viewers.value;
+//     viewer.screenSpaceEventHandler.setInputAction(function (movement) {
+//         const earthPosition = viewer.camera.pickEllipsoid(
+//             movement.position,
+//             viewer.scene.globe.ellipsoid
+//         ); //当前世界坐标笛卡尔积
+//         if (Cesium.defined(earthPosition)) {
+//             let pick = viewer.scene.pick(movement.position); //返回最上层模型属性
+//             let picks = viewer.scene.drillPick(movement.position); //返回所有模型属性
+//             if (pick && pick.id && pick.id.info) {
+//                 console.log('pick:', pick);
+//                 const data = pick.id.info;
+//                 console.log('data:', data);
+
+//                 const coordinate = movement.position; //屏幕坐标 // 转为经纬度，保存，用于监听时转换坐标
+//                 var ellipsoid = viewer.scene.globe.ellipsoid; // 将屏幕坐标转为地理坐标
+//                 var cartesian = viewer.camera.pickEllipsoid(coordinate, ellipsoid);
+//                 let newData = {
+//                     ...data,
+//                 };
+//                 if (cartesian) {
+//                     let cartographic = ellipsoid.cartesianToCartographic(cartesian);
+//                     let longitudeString = Cesium.Math.toDegrees(cartographic.longitude).toFixed(6);
+//                     let latitudeString = Cesium.Math.toDegrees(cartographic.latitude).toFixed(6);
+//                     console.log('longitudeString:', longitudeString);
+//                     newData.lon = longitudeString;
+//                     newData.lat = latitudeString; /*保存（弹窗）的数据*/
+
+//                     console.log('data:', newData);
+//                     clickInfoMap.value = newData;
+//                 }
+//                 showOverlayChart(coordinate); // 添加地图移动监听：使地图移动弹窗跟着移动
+//                 viewer.scene.postRender.addEventListener(infoWindowPostRender);
+//             } else {
+//                 hiddenOverlayChart(); // 清除监听事件 // viewer.scene.postRender.removeEventListener(infoWindowPostRender);
+//             }
+//         }
+//     }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
+// }
+
+// 隐藏弹窗
+function hiddenOverlayChart() {
+    // 移除各种高亮
+    XZDM = '';
+    XZQDM = '';
+    removeWms(['village_CQL']);
+    removeWms(['aaa']);
+
+    deleteEntityByName('villageLine');
+    deleteEntityByName('townLine');
+
+    const pop = document.getElementById('pop');
+    pop.style.display = 'none'; // 清除监听事件
+    viewer.scene.postRender.removeEventListener(infoWindowPostRender);
+    // 重定位
+    viewer.camera.flyTo({
+        destination: Cesium.Rectangle.fromDegrees(119.5091, 35.5671, 120.3285, 36.1455),
+        duration: 2,
+    });
+    removeWms(['gbznt'], true);
+    // addWms('shuzisannong:huangdaoqu_town', 'tl');
+    flag.value = false;
+}
+//显示弹窗
+function showOverlayChart(position) {
+    console.log(position);
+    const pop = document.getElementById('pop');
+    pop.style.display = 'block';
+    pop.style.position = 'absolute';
+    pop.style.top = position.y - 10 + 'px';
+    pop.style.left = position.x + 10 + 'px';
+    pop.style.zIndex = 99;
+}
+
+// function random(min, max) {
+//     return Math.floor(Math.random() * (max - min)) + min;
+// }
+
+/*-------------------------------------------------------------------------------------------*/
 </script>
 
-<style>
+<style lang="scss" scoped>
+$height: calc(100vh - 100px);
 
-</style>
\ No newline at end of file
+.center {
+    width: 100%;
+    height: 100%;
+
+    .title {
+        width: 100%;
+        height: 45px;
+        background: url('@/assets/images/title.png');
+        background-repeat: no-repeat;
+        background-size: 110% 100%;
+        color: #fff;
+        font-size: 18px;
+        font-weight: 700;
+        line-height: 45px;
+        padding-left: 46px;
+        display: flex;
+        cursor: pointer;
+        align-items: center;
+        justify-content: space-between;
+
+        span {
+            width: 80%;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+            overflow: hidden;
+        }
+
+        p {
+            width: 79px;
+            height: 25px;
+            border-radius: 20px;
+            font-size: 14px;
+            background: linear-gradient(
+                180deg,
+                rgba(16, 111, 111, 1) 0%,
+                rgba(47, 214, 214, 1) 100%
+            );
+            border: 1.5px solid rgba(23, 194, 180, 1);
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
+    }
+}
+
+.leftWra {
+    position: absolute;
+    top: 10px;
+    left: 20px;
+    height: $height;
+    width: 23%;
+    background: rgba(2, 31, 26, 0.85);
+    box-shadow: inset 0px 0px 15px 6px rgba(41, 255, 255, 0.5);
+    transition: transform 1s;
+    .leftFoldDiv {
+        width: 30px;
+        height: 30px;
+        position: absolute;
+        right: -12%;
+        top: 50%;
+        transform: translate(-50%, -50%);
+        font-size: 30px;
+        color: #ccc;
+    }
+    .leftTop {
+        width: 100%;
+        display: flex;
+        flex-direction: column;
+
+        .areaDiv {
+            width: 100%;
+            height: 327px;
+            opacity: 1;
+            display: flex;
+            padding: 1px;
+            justify-content: center;
+        }
+
+        .ProgressBar {
+            width: 100%;
+            height: 9px;
+            opacity: 1;
+        }
+    }
+
+    .leftbottom {
+        width: 100%;
+        height: 455px;
+        opacity: 1;
+        display: flex;
+        flex-direction: column;
+        justify-content: flex-start;
+        align-items: center;
+        padding-top: 13px;
+
+        .typesofDiv {
+            width: 375px;
+            height: 397px;
+            background: url('@/assets/images/bj1_00000_iSpt.png');
+            background-repeat: no-repeat;
+            background-size: 85% 115%;
+            background-position: left;
+        }
+
+        .tableDiv {
+            // background: rgba(255, 255, 255, 0.05);
+            display: flex;
+            justify-content: center;
+            width: 85%;
+            flex-direction: column;
+            padding: 5px 10px 5px 10px;
+            color: rgba(255, 255, 255, 1);
+
+            .Crops {
+                display: flex;
+                width: 100%;
+                margin-bottom: 10px;
+                font-size: 14px;
+                font-weight: 400;
+                height: 31px;
+                flex-direction: row;
+                align-items: center;
+                justify-content: space-around;
+                opacity: 1;
+                background: linear-gradient(
+                    90deg,
+                    rgba(21, 173, 148, 0.1) 0%,
+                    rgba(21, 173, 148, 0) 100%
+                );
+
+                div {
+                    display: flex;
+                    align-items: center;
+                }
+            }
+
+            .el-checkbox-group {
+                display: flex;
+                flex-direction: column;
+            }
+
+            :deep(.ones) {
+                width: 100%;
+                height: 171;
+                display: flex;
+                flex-direction: column;
+                justify-content: flex-start;
+                align-items: flex-start;
+                --el-table-tr-bg-color: null;
+                --el-table-border-color: null;
+                font-size: 14px;
+                font-weight: 400;
+                letter-spacing: 0px;
+                line-height: 0px;
+                color: rgba(255, 255, 255, 1);
+            }
+        }
+    }
+}
+
+.rightWra {
+    position: absolute;
+    top: 10px;
+    right: 20px;
+    width: 23%;
+    height: $height;
+    opacity: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    background: rgba(2, 31, 26, 0.85);
+    box-shadow: inset 0px 0px 15px 6px rgba(41, 255, 255, 0.5);
+    transition: transform 1s;
+    .rightFoldDiv {
+        width: 30px;
+        height: 30px;
+        position: absolute;
+        left: -8%;
+        top: 50%;
+        transform: translate(0, -50%);
+        font-size: 30px;
+        color: #ccc;
+    }
+    .rightTop {
+        width: 100%;
+        height: 40%;
+        opacity: 1;
+        display: flex;
+        flex-direction: column;
+        justify-content: flex-start;
+        align-items: center;
+
+        .farmlandDiv {
+            width: 100%;
+            height: 340px;
+            opacity: 1;
+            display: flex;
+            justify-content: center;
+        }
+
+        .ProgressBar {
+            width: 100%;
+            height: 9px;
+            opacity: 1;
+        }
+    }
+
+    .rightbottom {
+        width: 100%;
+        height: 490px;
+        opacity: 1;
+        display: flex;
+        flex-direction: column;
+        justify-content: flex-start;
+        align-items: center;
+
+        .el-select {
+            width: 80%;
+            font-size: 14px;
+            color: #333;
+            background: rgba(22, 94, 102, 1);
+            border: 1px solid rgba(4, 153, 153, 1) !important;
+            margin-top: 20px;
+
+            :deep(.el-input__wrapper) {
+                background-color: transparent;
+            }
+
+            :deep(.el-input__inner) {
+                color: rgba(255, 255, 255, 0.7);
+            }
+        }
+
+        .ASdivision {
+            width: 100%;
+            height: 368px;
+            opacity: 1;
+            display: flex;
+            justify-content: center;
+        }
+    }
+}
+
+.legend {
+    position: absolute;
+    right: 28%;
+    bottom: 18%;
+    width: 129px;
+    height: 338px;
+    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 + 12vw);
+    width: calc(100% - (400px * 2) - (10vw * 2));
+    min-width: 380px;
+    bottom: 5%;
+    height: 75px;
+    opacity: 1;
+    border-radius: 5px;
+    background: rgba(2, 31, 26, 0.6);
+    border: 1px solid rgba(4, 153, 153, 1);
+}
+
+.tool {
+    position: absolute;
+    right: 30%;
+    top: 8%;
+    width: 30px;
+    height: 280px;
+    opacity: 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: flex-start;
+    display: none;
+}
+
+#popup {
+    border-radius: 5px;
+    background: rgba(2, 31, 26, 0.6);
+    display: none;
+    // justify-content: flex-start;
+    // align-items: flex-end;
+    padding: 30px 8px 20px 8px;
+
+    & > div:nth-child(1) {
+        font-weight: 400;
+        letter-spacing: 0px;
+        color: rgba(255, 255, 255, 1);
+        // margin-top: 20px;
+        line-height: 24px;
+    }
+
+    & > div:nth-child(2) {
+        color: rgba(255, 255, 255, 1);
+        width: 129px;
+        height: 24px;
+        opacity: 1;
+        border-radius: 2px;
+        background: rgba(217, 231, 255, 0.2);
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        padding: 2px 10px 2px 10px;
+        // margin-top: 20px;
+    }
+
+    .cancel {
+        position: absolute;
+        right: 10px;
+        top: 5px;
+        color: rgba(255, 255, 255, 1);
+        cursor: pointer;
+    }
+}
+
+#pop {
+    border-radius: 5px;
+    background: rgba(2, 31, 26, 1);
+    display: none;
+    // justify-content: flex-start;
+    // align-items: flex-end;
+    padding: 30px 8px 20px 8px;
+
+    .cancel {
+        position: absolute;
+        right: 10px;
+        top: 5px;
+        color: rgba(255, 255, 255, 1);
+        cursor: pointer;
+    }
+
+    & > div {
+        display: flex;
+        margin-bottom: 10px;
+
+        & > div:nth-child(1) {
+            font-weight: 400;
+            letter-spacing: 0px;
+            color: rgba(255, 255, 255, 1);
+            // margin-top: 20px;
+            line-height: 24px;
+            margin-right: 10px;
+        }
+
+        & > div:nth-child(2) {
+            color: rgba(255, 255, 255, 1);
+            width: 129px;
+            height: 24px;
+            opacity: 1;
+            border-radius: 2px;
+            background: rgba(217, 231, 255, 0.2);
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            padding: 2px 10px 2px 10px;
+            // margin-top: 20px;
+        }
+    }
+}
+.back_button {
+    position: absolute;
+    right: 30%;
+    top: 20px;
+}
+
+:deep(.el-select__popper.el-popper) {
+}
+</style>
+<style lang="scss">
+.select_city {
+    background: rgba(2, 31, 26, 0.85);
+    box-shadow: inset 0px 0px 15px 6px rgba(41, 255, 255, 0.5);
+
+    .el-select-dropdown__item.hover {
+        background: rgba(2, 31, 26, 0.95);
+        box-shadow: inset 0px 0px 15px 6px rgba(41, 255, 255, 0.7);
+    }
+
+    .el-select-dropdown__item {
+        color: #fff;
+    }
+}
+
+.el-select__popper {
+    border: none !important;
+    background: transparent !important;
+}
+
+.el-popper {
+    border: none !important;
+    background: transparent !important;
+}
+
+.el-popper__arrow::before {
+    background: rgba(41, 255, 255, 0.7) !important;
+}
+</style>