diff --git a/src/assets/images/insect.png b/src/assets/images/insect.png
new file mode 100755
index 0000000..fb21f83
Binary files /dev/null and b/src/assets/images/insect.png differ
diff --git a/src/assets/images/production.png b/src/assets/images/production.png
new file mode 100755
index 0000000..0f7ace2
Binary files /dev/null and b/src/assets/images/production.png differ
diff --git a/src/assets/images/soil.png b/src/assets/images/soil.png
new file mode 100755
index 0000000..dfc90d0
Binary files /dev/null and b/src/assets/images/soil.png differ
diff --git a/src/assets/images/spore.png b/src/assets/images/spore.png
new file mode 100755
index 0000000..b3ca671
Binary files /dev/null and b/src/assets/images/spore.png differ
diff --git a/src/assets/styles/ruoyi.css b/src/assets/styles/ruoyi.css
index b4bb296..80e4099 100644
--- a/src/assets/styles/ruoyi.css
+++ b/src/assets/styles/ruoyi.css
@@ -1,7 +1,7 @@
 @charset "UTF-8";
-/**
- * 通用css样式布局处理
- * Copyright (c) 2019 ruoyi
+/**
+ * 通用css样式布局处理
+ * Copyright (c) 2019 ruoyi
  */
 /** 基础通用 **/
 .pt5 {
diff --git a/src/views/crops/area/index.vue b/src/views/crops/area/index.vue
index 6267301..c4aa828 100644
--- a/src/views/crops/area/index.vue
+++ b/src/views/crops/area/index.vue
@@ -3084,6 +3084,13 @@ $height: calc(100vh - 100px);
             white-space: nowrap;
             text-overflow: ellipsis;
             overflow: hidden;
+            background: linear-gradient(
+                180deg,
+                rgba(255, 255, 255, 1) 33.33%,
+                rgba(41, 255, 219, 1) 100%
+            );
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
         }
 
         p {
diff --git a/src/views/crops/classify/index.vue b/src/views/crops/classify/index.vue
index 6d7810e..da296a2 100644
--- a/src/views/crops/classify/index.vue
+++ b/src/views/crops/classify/index.vue
@@ -38,7 +38,10 @@
                     <span>作物类型统计-高标准农田</span>
                     <p>
                         下载 &nbsp;
-                        <img src="@/assets/icons/svg/downloads.svg" style="width: 14px; height: 14px; cursor: pointer" />
+                        <img
+                            src="@/assets/icons/svg/downloads.svg"
+                            style="width: 14px; height: 14px; cursor: pointer"
+                        />
                     </p>
                 </div>
                 <div ref="farmlandDiv" class="farmlandDiv"></div>
@@ -49,12 +52,25 @@
                     <span>作物类型统计-行政区划</span>
                     <p>
                         下载 &nbsp;
-                        <img src="@/assets/icons/svg/downloads.svg" style="width: 14px; height: 14px; cursor: pointer" />
+                        <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
+                    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>
@@ -67,11 +83,18 @@
                 <template #title>图例</template>
                 <div class="mt-4">
                     <el-checkbox-group v-model="checkList" @change="change">
-                        <el-checkbox v-for="(value, item, key) in dic" :key="key" :style="{
+                        <el-checkbox
+                            v-for="(value, item, key) in dic"
+                            :key="key"
+                            :style="{
                                 background: value.color,
                                 border: `1px solid ${value.color}`,
                                 width: `100%`,
-                            }" v-model="checked3" :disabled="value.disabled" :label="item" />
+                            }"
+                            v-model="checked3"
+                            :disabled="value.disabled"
+                            :label="item"
+                        />
 
                         <!-- <el-checkbox style="
                                 background: rgba(251, 171, 60, 1);
@@ -825,7 +848,7 @@ function getFarmland() {
             console.log('农田：', res);
             formLandRef.value = res.data.features;
         })
-        .catch(err => { });
+        .catch(err => {});
 }
 //返回
 function back() {
@@ -924,7 +947,8 @@ const getaArea = () => {
 
 const selectTab = () => {
     areachar();
-    if (value.value == '370211') {//全部
+    if (value.value == '370211') {
+        //全部
         getTownships();
         classData = [302034, 243990, 42344, 34234, 304235];
         deleteEntityByName('townLine');
@@ -1095,7 +1119,6 @@ const selectTab = () => {
         ASdivision();
     });
 
-
     // const layers = viewer.imageryLayers._layers;
     // for (let f = layers.length - 1; f >= 0; f--) {
     //     if (layers[f]._imageryProvider.aaa === 'aaa') {
@@ -1120,11 +1143,7 @@ const selectTab = () => {
     // 移除镇高亮
     deleteEntityByName('townLine');
     // 添加新的
-    addvillage(
-        `XZDM=${value.value}`,
-        'village_CQL'
-    );
-
+    addvillage(`XZDM=${value.value}`, 'village_CQL');
 };
 
 //图表
@@ -2164,6 +2183,13 @@ $height: calc(100vh - 100px);
             white-space: nowrap;
             text-overflow: ellipsis;
             overflow: hidden;
+            background: linear-gradient(
+                180deg,
+                rgba(255, 255, 255, 1) 33.33%,
+                rgba(41, 255, 219, 1) 100%
+            );
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
         }
 
         p {
@@ -2171,9 +2197,11 @@ $height: calc(100vh - 100px);
             height: 25px;
             border-radius: 20px;
             font-size: 14px;
-            background: linear-gradient(180deg,
-                    rgba(16, 111, 111, 1) 0%,
-                    rgba(47, 214, 214, 1) 100%);
+            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;
@@ -2441,7 +2469,7 @@ $height: calc(100vh - 100px);
         display: flex;
         margin-bottom: 10px;
 
-        &>span:nth-child(1) {
+        & > span:nth-child(1) {
             font-weight: 400;
             letter-spacing: 0px;
             color: rgba(255, 255, 255, 1);
@@ -2452,7 +2480,7 @@ $height: calc(100vh - 100px);
             margin-right: 10px;
         }
 
-        &>span:nth-child(2) {
+        & > span:nth-child(2) {
             color: rgba(255, 255, 255, 1);
             width: 129px;
             height: 24px;
diff --git a/src/views/crops/output/wheat/index.vue b/src/views/crops/output/wheat/index.vue
index 85806e2..fd58fa9 100644
--- a/src/views/crops/output/wheat/index.vue
+++ b/src/views/crops/output/wheat/index.vue
@@ -20,8 +20,27 @@
                         />
                     </p>
                 </div>
+                <div class="production">
+                    <div class="leftProduction">
+                        <p>
+                            <span>900</span>
+                            吨
+                            <br />
+                            最小值
+                        </p>
+                    </div>
+                    <div class="rightProduction">
+                        <p>
+                            <span>960</span>
+                            吨
+                            <br />
+                            最小值
+                        </p>
+                    </div>
+                </div>
                 <div ref="areaDiv" class="areaDiv"></div>
             </div>
+
             <div class="leftFoldDiv" @click="leftFoldClick()">
                 <el-icon><ArrowRightBold /></el-icon>
             </div>
@@ -1326,6 +1345,7 @@ function areachar() {
             },
             axisLabel: {
                 show: true,
+                // interval:0,
             },
             data: ['2017年', '2018年', '2019年', '2020年', '2021年', '2022年', '2023年'],
         },
@@ -1603,6 +1623,8 @@ function farmland() {
                             ],
                             global: false, // 缺省为 false
                         },
+                        shadowColor: 'rgba(255, 255, 255, 0.5)',
+                        shadowBlur: 10,
                     },
                 },
                 data: [709, 1917, 2455, 2610, 1719, 1433],
@@ -1643,6 +1665,8 @@ function farmland() {
                             ],
                             global: false, // 缺省为 false
                         },
+                        shadowColor: 'rgba(255, 255, 255, 0.5)',
+                        shadowBlur: 10,
                     },
                 },
                 data: [300, 500, 700, 400, 600, 1200],
@@ -2305,6 +2329,13 @@ $height: calc(100vh - 100px);
             white-space: nowrap;
             text-overflow: ellipsis;
             overflow: hidden;
+            background: linear-gradient(
+                180deg,
+                rgba(255, 255, 255, 1) 33.33%,
+                rgba(41, 255, 219, 1) 100%
+            );
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
         }
 
         p {
@@ -2334,6 +2365,7 @@ $height: calc(100vh - 100px);
     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;
@@ -2348,7 +2380,42 @@ $height: calc(100vh - 100px);
         width: 100%;
         display: flex;
         flex-direction: column;
-
+        .production {
+            width: 100%;
+            height: 125px;
+            padding: 0 37px;
+            display: flex;
+            font-size: 18px;
+            font-weight: 400;
+            letter-spacing: 0px;
+            color: rgba(255, 255, 255, 1);
+            text-align: center;
+            vertical-align: top;
+            span {
+                font-size: 48px;
+                font-weight: 700;
+                letter-spacing: 0px;
+                line-height: 48px;
+                color: rgba(255, 255, 255, 1);
+            }
+            .leftProduction {
+                flex: 1;
+                height: 100%;
+                margin-right: 20px;
+                background: url('@/assets/images/production.png');
+                background-repeat: no-repeat;
+                background-size: 100% 100%;
+                background-position-y: 20px;
+            }
+            .rightProduction {
+                flex: 1;
+                height: 100%;
+                background: url('@/assets/images/production.png');
+                background-repeat: no-repeat;
+                background-size: 100% 100%;
+                background-position-y: 20px;
+            }
+        }
         .areaDiv {
             width: 100%;
             height: 327px;
diff --git a/src/views/crops/site/index.vue b/src/views/crops/site/index.vue
index e13cfab..c2bac52 100644
--- a/src/views/crops/site/index.vue
+++ b/src/views/crops/site/index.vue
@@ -1339,13 +1339,7 @@ const downloadURL = url => {
 /*-------------echarts--------------*/
 function areachar() {
     const areaDivIntance = echarts.init(areaDiv.value);
-    let dataX = [
-        '好',
-        '较好',
-        '适中',
-        '较差',
-        '差',
-    ]; //名称
+    let dataX = ['好', '较好', '适中', '较差', '差']; //名称
     let dataY = [3598, 1235, 2354, 3251, 1652]; //数据
     let zoomShow = false;
     if (dataY.length > 14) {
@@ -2867,6 +2861,13 @@ $height: calc(100vh - 100px);
             white-space: nowrap;
             text-overflow: ellipsis;
             overflow: hidden;
+            background: linear-gradient(
+                180deg,
+                rgba(255, 255, 255, 1) 33.33%,
+                rgba(41, 255, 219, 1) 100%
+            );
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
         }
 
         p {
diff --git a/src/views/index.vue b/src/views/index.vue
index 2377efa..543b85d 100755
--- a/src/views/index.vue
+++ b/src/views/index.vue
@@ -3,19 +3,77 @@
         <div style="width: 100%; height: 100%" id="cesiumContainer"></div>
         <div class="leftWra">
             <div class="leftTop">
-                <div class="title"><span>作物分类面积统计</span></div>
-                <div ref="areaDiv" class="areaDiv"></div>
+                <div class="title">
+                    <span>作物长势等级面积统计</span>
+                </div>
+                <div class="types">
+                    <div width="100%" class="types_left">
+                        <img width="100%" src="@/assets/images/spore.png" alt="" />
+                        <p>智能孢子捕捉分析</p>
+                    </div>
+                    <div width="100%" class="types_center">
+                        <img width="100%" src="@/assets/images/insect.png" alt="" />
+                        <p>虫情监测仪</p>
+                    </div>
+                    <div width="100%" class="types_right">
+                        <img width="100%" src="@/assets/images/soil.png" alt="" />
+                        <p>土壤墒情、土质</p>
+                    </div>
+                </div>
+            </div>
+            <div class="leftcenter">
+                <div class="title">
+                    <span>设备照片</span>
+                </div>
+                <div class="imgdiv">
+                    <img
+                        width="100%"
+                        src="https://img.js.design/assets/img/641d73a7cece21d6b61bedf9.png#d27dd8c8c5369101dca2dcf160e5bba9"
+                        alt=""
+                    />
+                </div>
             </div>
             <div class="leftbottom">
-                <div class="title"><span>作物类型统计</span></div>
-                <div ref="typesofDiv" class="typesofDiv"></div>
+                <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 class="tableDiv">
+                    <el-table max-height="200px" :data="tableData" stripe style="width: 100%">
+                        <el-table-column prop="date" label="设备编号" />
+                        <el-table-column prop="name" label="监测时间" />
+                        <el-table-column prop="address" label="预警情况" />
+                        <el-table-column prop="address" label="照片" />
+                    </el-table>
+                </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>
+                    <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"
@@ -24,164 +82,222 @@
                     </p>
                 </div>
                 <div ref="farmlandDiv" class="farmlandDiv"></div>
-                <div ref="ProgressBarDiv" class="ProgressBar"></div>
             </div>
-            <div class="rightbottom">
-                <div class="title">
-                    <span>作物类型统计-行政区划</span>
-                    <p>
-                        下载 &nbsp;
-                        <img
-                            src="@/assets/icons/svg/downloads.svg"
-                            style="width: 14px; height: 14px; cursor: pointer"
-                        />
-                    </p>
-                </div>
-                <el-select v-model="value" clearable placeholder="Select">
-                    <el-option
-                        v-for="item in options"
-                        :key="item.value"
-                        :label="item.label"
-                        :value="item.value"
-                    />
-                </el-select>
-                <div ref="ASdivisionDiv" class="ASdivision"></div>
-            </div>
-        </div>
-        <div class="legend">
-            <p>图例</p>
-            <div class="mt-4">
-                <el-checkbox
-                    style="
-                        background: rgba(102, 142, 214, 0.8);
-                        border: 1px solid rgba(102, 142, 214, 1);
-                        width: 100%;
-                    "
-                    v-model="checked3"
-                    label="小麦"
-                />
-                <el-checkbox
-                    style="
-                        background: rgba(255, 225, 104, 0.8);
-                        border: 1px solid rgba(255, 225, 104, 1);
-                        width: 100%;
-                    "
-                    v-model="checked4"
-                    label="玉米"
-                />
-                <el-checkbox
-                    style="
-                        background: rgba(156, 220, 130, 0.8);
-                        border: 1px solid rgba(156, 220, 130, 1);
-                        width: 100%;
-                    "
-                    v-model="checked3"
-                    label="大豆"
-                />
-                <el-checkbox
-                    style="
-                        background: rgba(209, 91, 127, 0.8);
-                        border: 1px solid rgba(209, 91, 127, 1);
-                        width: 100%;
-                    "
-                    v-model="checked4"
-                    label="地瓜"
-                />
-                <el-checkbox
-                    style="
-                        background: rgba(212, 236, 89, 0.8);
-                        border: 1px solid rgba(212, 236, 89, 1);
-                        width: 100%;
-                    "
-                    v-model="checked3"
-                    label="花生"
-                />
-                <el-checkbox
-                    style="
-                        background: rgba(50, 211, 235, 0.8);
-                        border: 1px solid rgba(50, 211, 235, 1);
-                        width: 100%;
-                    "
-                    v-model="checked4"
-                    label="蓝莓"
-                />
-                <el-checkbox
-                    style="
-                        background: rgba(91, 196, 159, 0.8);
-                        border: 1px solid rgba(91, 196, 159, 1);
-                        width: 100%;
-                    "
-                    v-model="checked3"
-                    label="茶叶"
-                />
-                <el-checkbox
-                    style="
-                        background: rgba(254, 182, 77, 0.8);
-                        border: 1px solid rgba(254, 182, 77, 1);
-                        width: 100%;
-                    "
-                    v-model="checked4"
-                    label="马铃薯"
-                />
-                <el-checkbox
-                    style="
-                        background: rgba(250, 129, 109, 0.8);
-                        border: 1px solid rgba(250, 129, 109, 1);
-                        width: 100%;
-                    "
-                    v-model="checked3"
-                    label="白菜和萝卜"
-                />
+            <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 setup>
-import { ref, onMounted, inject } from 'vue';
+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('');
-let header = 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,
+            },
+        },
+    ],
+});
+watch(
+    () => Township.arr,
+    val => {
+        console.log('val:', val);
+    }
+);
+//行政区划数据
 var data = {
-    title: ['区域一', '区域二', '区域三', '区域四', '区域五', '区域六', '区域七', '区域八'],
-    corn: [333.3, null, 500, 500, 333.3, null, 333.3, 500],
-    soybean: [333.3, null, null, null, 333.3, null, 333.3, null],
-    peanut: [333.3, 500, 500, null, 333.3, 500, 333.3, null],
-    wheat: [null, 500, null, 500, null, 500, null, null],
-    Blueberries: [null, null, null, null, null, null, null, 500],
+    title: [],
 };
-const options = [
+let dd = {
+    小麦: [],
+    玉米: [],
+    大豆: [],
+    地瓜: [],
+    花生: [],
+    蓝莓: [],
+    茶叶: [],
+    马铃薯: [],
+    白菜和萝卜: [],
+    其他: [],
+};
+
+//表格数据
+let tableData = [
     {
-        value: 'Option1',
-        label: 'Option1',
+        date: '小麦',
+        name: '2934362亩',
+        address: '35%',
     },
     {
-        value: 'Option2',
-        label: 'Option2',
+        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();
-    header = document.querySelector('.headers');
+    // ProgressBar();
+    getFarmland();
 });
+
+/*-------------地图------------------------*/
 const mapOption = {
     url:
         'http://{s}.tianditu.gov.cn/img_c/wmts?service=wmts&request=GetTile&version=1.0.0' +
@@ -253,323 +369,681 @@ function initMap() {
             // // maximumLevel: 18
         }),
     });
-    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),
+    // 去除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 areachar() {
-    const areaDivIntance = echarts.init(areaDiv.value);
-    var option = {
-        // backgroundColor: 'rgba(255, 255, 255, 0.1)',
-        tooltip: {
-            trigger: 'axis',
-            axisPointer: {
-                type: 'shadow',
-            },
-        },
-        grid: {
-            top: '15%',
-            right: '3%',
-            left: '16%',
-            bottom: '12%',
-        },
-        xAxis: [
-            {
-                type: 'category',
-                data: ['小麦', '玉米', '大豆', '花生', '蓝莓'],
-                axisLine: {
-                    lineStyle: {
-                        color: '#C0C4CC',
-                        width: 1,
-                    },
-                },
-                axisTick: {
-                    show: false,
-                },
-                axisLabel: {
-                    margin: 10,
-                    color: 'rgba(255, 255, 255, 0.7)',
-                    textStyle: {
-                        fontSize: 14,
-                    },
-                },
-            },
-        ],
-        yAxis: [
-            {
-                axisLabel: {
-                    formatter: '{value}',
-                    color: 'rgba(255, 255, 255, 0.7)',
-                },
-                axisLine: {
-                    show: false,
-                },
-                axisTick: {
-                    show: false,
-                },
-                splitLine: {
-                    lineStyle: {
-                        color: 'rgba(192,196,204,1)',
-                        type: 'dashed',
-                    },
-                },
-                name: '面积(亩)',
-            },
-        ],
-        series: [
-            {
-                name: '面积',
-                type: 'bar',
-                data: [3598, 1235, 2354, 3251, 1652],
-                barWidth: '14px',
-                itemStyle: {
-                    normal: {
-                        color: new echarts.graphic.LinearGradient(
-                            0,
-                            0,
-                            0,
-                            1,
-                            [
-                                {
-                                    offset: 0,
-                                    color: 'rgba(71,179,161,0.8)', // 0% 处的颜色
-                                },
-                                {
-                                    offset: 1,
-                                    color: 'rgba(212,236,89,1) ', // 100% 处的颜色
-                                },
-                            ],
-                            false
-                        ),
-                        barBorderRadius: [30, 30, 30, 30],
-                        label: {
-                            show: true,
-                            position: 'top',
-                            formatter: '{c}',
-                            textStyle: {
-                                color: 'rgba(255, 255, 255, 0.8)',
-                                fontSize: '14',
-                            },
-                        },
-                    },
-                },
-            },
-        ],
-        legend: {
-            right: 0,
-            top: 14,
-            data: ['面积'],
-            textStyle: {
-                color: ' rgba(255,255,255,0.7)',
-                fontSize: '14',
-            },
-        },
-    };
-    // option && areaDivIntance.setOption(option);
-    useEcharts(areaDivIntance, option);
+// 根据实体名字删除实体(模糊删除)
+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)';
+    }
 }
 
-function typesof() {
-    const typesofDivIntance = echarts.init(typesofDiv.value);
-    var option = {
-        tooltip: {
-            trigger: 'item',
-            formatter: '{a} <br/>{b}: {c} ({d}%)',
-        },
-        color: [
-            'rgba(212,236,89,0.8)',
-            'rgba(102,142,214,0.8)',
-            'rgba(156,220,130,0.8)',
-            'rgba(255,225,104,0.8)',
-        ], // 指定饼图颜色
-        legend: {
-            orient: 'vertical', //图例方向分水平和垂直
-            icon: 'rect', //图例样式
-            x: 'center', //图例位置
-            bottom: 'bottom',
-            data: ['花生', '小麦', '大豆', '玉米'],
-            textStyle: {
-                color: ' rgba(255,255,255,0.7)',
-                fontSize: '14',
+/*------------------接口--------------------*/
+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: '全部',
             },
-        },
-        series: [
-            {
-                name: '占比',
-                type: 'pie',
-                radius: ['50%', '70%'],
-                avoidLabelOverlap: true,
-                label: {
-                    normal: {
-                        show: true,
-                        position: 'left',
-                        textStyle: {
-                            color: 'rgba(41,255,219,1)',
-                        },
-                    },
-                    emphasis: {
-                        show: true,
-                        textStyle: {
-                            fontSize: '30',
-                            fontWeight: 'bold',
-                        },
-                    },
-                },
-                labelLine: {
-                    show: true,
-                    normal: {
-                        show: true,
-                    },
-                },
-                data: [
-                    { value: 25, name: '花生' },
-                    { value: 25, name: '小麦' },
-                    { value: 25, name: '大豆' },
-                    { value: 25, name: '玉米' },
-                ],
-            },
-        ],
-    };
+        });
+        let arr = [...res.features];
+        let brr = [];
+        arr.splice(0, 1);
+        arr.forEach(item => {
+            brr.push(item.properties.XZMC);
+        });
+        data.title = [...Object.values(brr)];
+    });
+};
+//村
+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);
+                }
+            });
+        });
+    });
+};
 
-    // option && typesofDivIntance.setOption(option);
-    useEcharts(typesofDivIntance, option);
-}
+
+//下载
+/*---------------------------*/
+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 farmland() {
     const farmlandDivIntance = echarts.init(farmlandDiv.value);
     var option = {
-        title: {
-            text: '',
-            subtext: '',
-        },
-        tooltip: {
-            trigger: 'axis',
-            axisPointer: {
-                type: 'shadow',
+    grid: {
+        top: '10%',
+        left: '15%',
+        right: '2%',
+        bottom: '14%',
+    },
+    tooltip: {
+        show: false,
+    },
+    xAxis: {
+        data: ['06:00', '07:00', '08:00', '09:00', '10:00', '11:00', '12:00'],
+        axisLine: {
+            lineStyle: {
+                color: 'transparent', //底部边框颜色
             },
         },
-        grid: {
-            top: '15%',
-            left: '16%',
-            bottom: '19%',
-        },
-        xAxis: {
-            type: 'category',
-            data: ['区域一', '区域二', '区域三', '区域四', '区域五'],
-            axisLine: {
-                lineStyle: {
-                    color: '#C0C4CC',
-                    width: 1,
-                },
-            },
-            axisTick: {
-                show: false,
-            },
-            axisLabel: {
-                margin: 10,
-                color: 'rgba(255, 255, 255, 0.7)',
-                textStyle: {
-                    fontSize: 14,
-                },
+        axisLabel: {
+            textStyle: {
+                color: '#fff', //底部文字颜色
+                fontSize: 12,
             },
         },
-        yAxis: {
+    },
+    yAxis: [
+        {
             type: 'value',
             splitLine: {
+                show: true,
                 lineStyle: {
-                    color: 'rgba(192,196,204,1)',
-                    type: 'dashed',
+                    color: 'rgba(255,255,255,0.2)', //网格线的颜色
+                    width: 1,
+                    type: 'solid',
+                },
+            },
+            axisLine: {
+                show: false,
+                lineStyle: {
+                    color: 'transparent', //左边框颜色
                 },
             },
             axisLabel: {
-                margin: 10,
-                color: 'rgba(255, 255, 255, 0.7)',
+                show: true,
+                fontSize: 12,
                 textStyle: {
-                    fontSize: 14,
+                    color: '#ADD6FF', //左文字颜色
                 },
             },
         },
-        series: [
-            {
-                name: '生活',
-                type: 'bar',
-                barWidth: 14,
-                stack: '数量',
-                data: [1666, 1666, 1666, 1666, 1666],
-                itemStyle: {
-                    normal: {
-                        //颜色渐变
-                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                            {
-                                offset: 0,
-                                color: 'rgba(102, 142, 214, 0.8)',
-                            },
-                            {
-                                offset: 1,
-                                color: 'rgba(102, 142, 214, 0.8)',
-                            },
-                        ]),
-                    },
+    ],
+    series: [
+        {
+            name: '毕业学员',
+            type: 'bar',
+            barWidth: 20,
+            showBackground: true,
+            backgroundStyle: {
+                color: 'rgba(255, 255, 255, 0.3)',
+            },
+            itemStyle: {
+                normal: {
+                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                            offset: 0,
+                            // color: '#00FFE3',//渐变1
+                            color: 'rgba(43, 224, 152, 1)', //渐变1
+                        },
+                        {
+                            offset: 1,
+                            // color: '#4693EC',//渐变2
+                            color: 'rgba(185, 250, 224, 1)', //渐变2
+                        },
+                    ]),
                 },
             },
-            {
-                name: '工业',
-                type: 'bar',
-                barWidth: 30,
-                stack: '数量',
-                data: [1666, 1666, 1666, 1666, 1666],
-                itemStyle: {
-                    normal: {
-                        //颜色渐变
-                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                            {
-                                offset: 0,
-                                color: 'rgba(255, 225, 104, 0.8)',
-                            },
-                            {
-                                offset: 1,
-                                color: 'rgba(255, 225, 104, 0.8)',
-                            },
-                        ]),
-                    },
+            data: [20, 80, 100, 40, 34, 90, 60, 20, 80, 100, 40, 34],
+            z: 0,
+            zlevel: 0,
+            // label: {
+            //     show: true,
+            //     position: 'top',
+            //     fontSize: 14,
+            //     color: '#fff', //柱状顶部文字颜色
+            //     formatter: function (params) {
+            //         return '20%';
+            //     },
+            // },
+        },
+        {
+            type: 'pictorialBar',
+            barWidth: 20,
+            itemStyle: {
+                normal: {
+                    color: 'rgba(2, 31, 26, 0.85)', //数据的间隔颜色
                 },
             },
-            {
-                name: '农业',
-                type: 'bar',
-                barWidth: 30,
-                stack: '数量',
-                data: [1666, 1666, 1666, 1666, 1666],
-                itemStyle: {
-                    normal: {
-                        //颜色渐变
-                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                            {
-                                offset: 0,
-                                color: 'rgba(209, 91, 127, 0.8)',
-                            },
-                            {
-                                offset: 1,
-                                color: 'rgba(209, 91, 127, 0.8)',
-                            },
-                        ]),
-                    },
-                },
-            },
-        ],
-    };
+            symbolRepeat: 'fixed',
+            symbolMargin: 3,
+            symbol: 'rect',
+            symbolSize: [30, 4],
+            symbolPosition: 'end',
+            symbolOffset: [0, 0],
+            data: [20, 80, 100, 40, 34, 90, 60, 20, 80, 100, 40, 34],
+            z: 1,
+            zlevel: 0,
+        },
+    ],
+};
 
+
+    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);
 }
@@ -579,7 +1053,7 @@ function ProgressBar() {
         // backgroundColor: '#031d33',
         grid: {
             top: 0,
-            bottom: '10%',
+            bottom: 0,
             left: '10%',
             right: '10%',
         },
@@ -632,238 +1106,306 @@ function ProgressBar() {
                 itemStyle: {
                     normal: {
                         color: 'rgba(255, 255, 255, 0.2)',
-
                         barBorderRadius: 50,
                     },
                 },
             },
         ],
     };
-    option && ProgressBarDivIntance.setOption(option);
+    // 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';
 
-function ASdivision(params) {
-    const ASdivisionDivIntance = echarts.init(ASdivisionDiv.value);
-    var option = {
-        grid: {
-            bottom: '8%',
-            left: '10%',
-            right: '6%',
-            top: '6%',
-            containLabel: 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: 16, // 文字的字体大小
-                    color: 'rgba(255, 255, 255, 1)', // 刻度标签文字的颜色
-                    // 使用字符串模板，模板变量为刻度默认标签 {value}
-                    formatter: '{value}',
-                },
-                // 类目数据，在类目轴（type: 'category'）中有效
-                data: data.title,
-                inverse: true,
-            },
-        ],
-        // 系列列表
-        series: [
-            {
-                type: 'bar', // 系列类型
-                name: '玉米', // 系列名称, 用于tooltip的显示, legend 的图例筛选
-                // 数据堆叠，同个类目轴上系列配置相同的stack值后，后一个系列的值会在前一个系列的值上相加
-                stack: '总量',
-                barMaxWidth: 30, // 柱条的最大宽度，不设时自适应
-                // 图形上的文本标签
-                label: {
-                    show: true,
-                    position: 'inside',
-                    formatter: '玉米',
-                    textStyle: {
-                        fontSize: 14,
-                        fontWeight: 'bolder',
-                        color: 'rgba(255,255,255,1)',
-                    },
-                },
-                // 图形样式
-                itemStyle: {
-                    color: '#fdad3c',
-                },
-                data: data.corn, // 系列中的数据内容数组
-            },
-            {
-                type: 'bar', // 系列类型
-                name: '大豆', // 系列名称, 用于tooltip的显示, legend 的图例筛选
-                // 数据堆叠，同个类目轴上系列配置相同的stack值后，后一个系列的值会在前一个系列的值上相加
-                stack: '总量',
-                barMaxWidth: 30, // 柱条的最大宽度，不设时自适应
-                // 图形上的文本标签
-                label: {
-                    show: true,
-                    position: 'inside',
-                    formatter: '大豆',
-                    textStyle: {
-                        fontSize: 14,
-                        fontWeight: 'bolder',
-                        color: 'rgba(255,255,255,1)',
-                    },
-                },
-                // 图形样式
-                itemStyle: {
-                    color: 'rgba(156, 220, 130, 0.8)',
-                },
-                data: data.soybean, // 系列中的数据内容数组
-            },
-            {
-                type: 'bar', // 系列类型
-                name: '花生', // 系列名称, 用于tooltip的显示, legend 的图例筛选
-                // 数据堆叠，同个类目轴上系列配置相同的stack值后，后一个系列的值会在前一个系列的值上相加
-                stack: '总量',
-                barMaxWidth: 30, // 柱条的最大宽度，不设时自适应
-                // 图形上的文本标签
-                label: {
-                    show: true,
-                    position: 'inside',
-                    formatter: '花生',
-                    textStyle: {
-                        fontSize: 14,
-                        fontWeight: 'bolder',
-                        color: 'rgba(255,255,255,1)',
-                    },
-                },
-                // 图形样式
-                itemStyle: {
-                    color: 'rgba(212, 236, 89, 0.8)',
-                },
-                data: data.peanut, // 系列中的数据内容数组
-            },
-            {
-                type: 'bar', // 系列类型
-                name: '小麦', // 系列名称, 用于tooltip的显示, legend 的图例筛选
-                // 数据堆叠，同个类目轴上系列配置相同的stack值后，后一个系列的值会在前一个系列的值上相加
-                stack: '总量',
-                barMaxWidth: 30, // 柱条的最大宽度，不设时自适应
-                // 图形上的文本标签
-                label: {
-                    show: true,
-                    position: 'inside',
-                    formatter: '小麦',
-                    textStyle: {
-                        fontSize: 14,
-                        fontWeight: 'bolder',
-                        color: 'rgba(255,255,255,1)',
-                    },
-                },
-                // 图形样式
-                itemStyle: {
-                    color: 'rgba(102, 142, 214, 0.8)',
-                },
-                data: data.wheat, // 系列中的数据内容数组
-            },
-            {
-                type: 'bar', // 系列类型
-                name: '蓝莓', // 系列名称, 用于tooltip的显示, legend 的图例筛选
-                // 数据堆叠，同个类目轴上系列配置相同的stack值后，后一个系列的值会在前一个系列的值上相加
-                stack: '总量',
-                barMaxWidth: 30, // 柱条的最大宽度，不设时自适应
-                // 图形上的文本标签
-                label: {
-                    show: true,
-                    position: 'inside',
-                    formatter: '蓝莓',
-                    textStyle: {
-                        fontSize: 14,
-                        fontWeight: 'bolder',
-                        color: 'rgba(255,255,255,1)',
-                    },
-                },
-                // 图形样式
-                itemStyle: {
-                    color: 'rgba(50, 211, 235, 0.8)',
-                },
-                data: data.Blueberries, // 系列中的数据内容数组
-            },
+    // 判断是否存在避免重复添加
+    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' },
         ],
     };
-    option && ASdivisionDivIntance.setOption(option);
-    useEcharts(ASdivisionDivIntance, option);
+    console.log(townZuowu.label);
+    showOverlayChart({ x: 642, y: 312 });
 }
+
+/*--------------------------------------------------------------------------------------------*/
+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 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 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;
+}
+
+/*-------------------------------------------------------------------------------------------*/
 </script>
 
 <style lang="scss" scoped>
 $height: calc(100vh - 100px);
+
 .center {
     width: 100%;
     height: 100%;
+
     .title {
         width: 100%;
         height: 45px;
         background: url('@/assets/images/title.png');
-        background: linear-gradient(180deg, rgba(255, 255, 255, 1) 33.33%, rgba(41, 255, 219, 1) 100%);
-        -webkit-background-clip: text;
+        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;
-        -webkit-text-fill-color: transparent;
-
+            background: linear-gradient(
+                180deg,
+                rgba(255, 255, 255, 1) 33.33%,
+                rgba(41, 255, 219, 1) 100%
+            );
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
         }
+
         p {
-            width: 79px;
+            width: 110px;
             height: 25px;
             border-radius: 20px;
             font-size: 14px;
@@ -885,28 +1427,131 @@ $height: calc(100vh - 100px);
     top: 10px;
     left: 20px;
     height: $height;
-    width: 25%;
-    background: rgba(2, 31, 26, 0.3);
+    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);
+        width: 100%;
         display: flex;
         flex-direction: column;
-        .areaDiv {
+        .types {
             width: 100%;
-            height: 327px;
-            opacity: 1;
+            height: 165px;
             display: flex;
-            padding: 1px;
+            div {
+                flex: 1;
+            }
+            font-size: 14px;
+            font-weight: 700;
+            letter-spacing: 0px;
+            line-height: 20.27px;
+            color: rgba(255, 255, 255, 1);
+            text-align: center;
+            p {
+                height: 34px;
+                opacity: 1;
+                border-radius: 4px;
+                background: linear-gradient(
+                    180deg,
+                    rgba(16, 111, 111, 1) 0%,
+                    rgba(47, 214, 214, 1) 100%
+                );
+                border: 1px solid rgba(23, 194, 180, 1);
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                padding: 5px 5px 5px 5px;
+                margin-left: 5px;
+
+                white-space: nowrap;
+                // text-overflow: ellipsis;
+                // overflow: hidden;
+            }
+        }
+    }
+    .leftcenter {
+        width: 100%;
+        display: flex;
+        flex-direction: column;
+        margin-top: 20px;
+        .imgdiv {
+            width: 100%;
+            height: 248px;
+            display: flex;
+            justify-content: center;
+            padding: 10px;
         }
     }
     .leftbottom {
-        height: 35%;
+        width: 100%;
+        height: 38%;
+        opacity: 1;
         display: flex;
         flex-direction: column;
-        .typesofDiv {
-            width: 100%;
-            height: 267px;
+        justify-content: flex-start;
+        align-items: center;
+        padding-top: 13px;
+        .tableDiv {
+            // background: rgba(255, 255, 255, 0.05);
+            width: 85%;
+            height: 100%;
+            padding: 5px 10px 5px 10px;
+            color: rgba(255, 255, 255, 1);
+            .el-table {
+                --el-table-tr-bg-color: none;
+                --el-table-border-color: none;
+                ::v-deep .el-table__body tr.el-table__row--striped td {
+                    background: rgba(38, 255, 255, 0.01)
+                }
+                // ::v-deep .el-table__row {
+                //     background: linear-gradient(
+                //         90deg,
+                //         rgba(38, 255, 255, 0.15) 0%,
+                //         rgba(38, 255, 255, 0.01) 100%
+                //     );
+                // }
+
+                ::v-deep .el-table__body tr:hover > td {
+                    background: linear-gradient(
+                        90deg,
+                        rgba(38, 255, 255, 0.15) 0%,
+                        rgba(38, 255, 255, 0.01) 100%
+                    ) !important;
+                }
+                color: rgba(255, 255, 255, 1);
+            }
+
+            .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);
+            }
         }
     }
 }
@@ -915,13 +1560,25 @@ $height: calc(100vh - 100px);
     position: absolute;
     top: 10px;
     right: 20px;
-    width: 25%;
+    width: 23%;
     height: $height;
     opacity: 1;
     display: flex;
     flex-direction: column;
     align-items: center;
-    background: rgba(2, 31, 26, 0.3);
+    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%;
@@ -930,26 +1587,31 @@ $height: calc(100vh - 100px);
         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: 455px;
+        height: 490px;
         opacity: 1;
         display: flex;
         flex-direction: column;
         justify-content: flex-start;
         align-items: center;
-        padding-top: 13px;
+
         .el-select {
             width: 80%;
             font-size: 14px;
@@ -957,14 +1619,14 @@ $height: calc(100vh - 100px);
             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;
             }
-        }
-        .ASdivision {
-            width: 415px;
-            height: 368px;
-            opacity: 1;
+
+            :deep(.el-input__inner) {
+                color: rgba(255, 255, 255, 0.7);
+            }
         }
     }
 }
@@ -983,6 +1645,7 @@ $height: calc(100vh - 100px);
     justify-content: flex-start;
     align-items: center;
     padding: 10px 10px 10px 10px;
+
     p {
         margin: 10px;
         font-size: 14px;
@@ -992,6 +1655,7 @@ $height: calc(100vh - 100px);
         color: rgba(255, 255, 255, 1);
         text-align: center;
     }
+
     .mt-4 {
         .el-checkbox {
             height: 30px;
@@ -1006,6 +1670,7 @@ $height: calc(100vh - 100px);
             text-align: left;
         }
     }
+
     :deep(.el-checkbox__label) {
         color: rgba(255, 255, 255, 1);
     }
@@ -1013,7 +1678,7 @@ $height: calc(100vh - 100px);
 
 .bottom_center {
     position: absolute;
-    left: calc(400px + 20px + 12vw);
+    left: calc(400px + 12vw);
     width: calc(100% - (400px * 2) - (10vw * 2));
     min-width: 380px;
     bottom: 5%;
@@ -1023,4 +1688,139 @@ $height: calc(100vh - 100px);
     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>