From b0524715dffc751db72ad63f53c0f6ce31e65a62 Mon Sep 17 00:00:00 2001
From: tianlong <17603473476@163.com>
Date: Mon, 24 Apr 2023 17:41:55 +0800
Subject: [PATCH] up

---
 src/views/crops/classify/index.vue | 136 ++++++++++++++++++++---------
 1 file changed, 97 insertions(+), 39 deletions(-)

diff --git a/src/views/crops/classify/index.vue b/src/views/crops/classify/index.vue
index 5a3a6b2..04fc839 100644
--- a/src/views/crops/classify/index.vue
+++ b/src/views/crops/classify/index.vue
@@ -17,7 +17,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>
@@ -28,12 +31,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>
@@ -43,11 +59,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);
@@ -137,7 +160,7 @@
             </div>
             <div class="cancel" @click="hiddenOverlayChart">X</div>
         </div>
-        <el-button class="back_button">111111</el-button>
+        <el-button v-if="flag" class="back_button" @click="back()">返回</el-button>
     </div>
 </template>
 
@@ -159,6 +182,7 @@ const ASdivisionDiv = ref(null);
 let Township = reactive({ arr: [], brr: [], crr: [] }); //街道
 const value = ref('370211');
 const clickInfoMap = ref({ info: [] });
+const flag = ref(false);
 let dd = {
     小麦: [],
     玉米: [],
@@ -712,7 +736,7 @@ function showOverlayChart(position) {
     pop.style.left = position.x + 10 + 'px';
     pop.style.zIndex = 99;
 }
-const formLandRef = ref([])
+const formLandRef = ref([]);
 // 获取高标准农田
 function getFarmland() {
     axios({
@@ -720,10 +744,16 @@ function getFarmland() {
             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 => { });
+    })
+        .then(res => {
+            console.log('农田：', res);
+            formLandRef.value = res.data.features;
+        })
+        .catch(err => {});
+}
+//返回
+function back() {
+    removeWms(['huangdaoqu_town'], true);
 }
 //接口
 const getArea = (item, index) => {
@@ -888,7 +918,7 @@ function areachar() {
             xAxis: [
                 {
                     type: 'category',
-                    data: ['小麦', '玉米', '大豆', '花生', '蓝莓'],
+                    data: ['小麦', '花生', '大豆', '花生', '蓝莓'],
                     axisLine: {
                         lineStyle: {
                             color: '#C0C4CC',
@@ -1024,7 +1054,7 @@ function typesof() {
             },
             {
                 // 数据项名称
-                name: '玉米',
+                name: '花生',
                 value: 56,
                 itemStyle: {
                     // 透明度
@@ -1221,9 +1251,7 @@ function typesof() {
             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>`;
+                        return `${params.seriesName}<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color};"></span>`;
                     }
                     return '';
                 },
@@ -1496,7 +1524,7 @@ function farmland() {
                 type: 'bar',
                 barWidth: 12,
                 stack: 'stack',
-                data: [160, 103, 155, 100, 50, 122, 98],
+                data: [200, 300, 0, 200, 0, 100, 300],
                 itemStyle: {
                     normal: {
                         barBorderRadius: 0,
@@ -1518,7 +1546,7 @@ function farmland() {
                 type: 'bar',
                 barWidth: 12,
                 stack: 'stack',
-                data: [160, 103, 155, 100, 50, 124, 168],
+                data: [200, 300, 200, 100, 0, 100, 300],
                 itemStyle: {
                     normal: {
                         barBorderRadius: 0,
@@ -1540,7 +1568,7 @@ function farmland() {
                 type: 'bar',
                 barWidth: 12,
                 stack: 'stack',
-                data: [160, 103, 155, 100, 50, 45, 321],
+                data: [200, 0, 200, 100, 300, 200, 0],
                 itemStyle: {
                     normal: {
                         barBorderRadius: 0,
@@ -1557,6 +1585,28 @@ function farmland() {
                     },
                 },
             },
+            {
+                name: '花生',
+                type: 'bar',
+                barWidth: 12,
+                stack: 'stack',
+                data: [0, 0, 200, 100, 300, 200, 0],
+                itemStyle: {
+                    normal: {
+                        barBorderRadius: 0,
+                        color: new echarts.graphic.LinearGradient(0, 0, 0.9, 0, [
+                            {
+                                offset: 1,
+                                color: 'rgba(4, 247, 227, 0.9)',
+                            },
+                            {
+                                offset: 0,
+                                color: 'rgba(4, 247, 227, 0.25)',
+                            },
+                        ]),
+                    },
+                },
+            },
         ],
     };
 
@@ -1566,17 +1616,21 @@ function farmland() {
 }
 // 图表点击事件
 function ChartClick(item) {
-    console.log('item:', item)
+    console.log('item:', item);
     // 移除作物
     removeWms(['huangdaoqu_town'], true);
     let layername = 'shuzisannong:farmland';
 
     // 判断是否存在避免重复添加
-    let cz = false
+    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 (
+            layers[f] &&
+            layers[f]._imageryProvider.customName &&
+            layers[f]._imageryProvider.customName === layername + 'gbznt'
+        ) {
+            cz = true;
         }
     }
     if (!cz) {
@@ -1584,12 +1638,12 @@ function ChartClick(item) {
         addWms(layername, layername + 'gbznt');
     }
     // 定位到地块
-    let features = formLandRef.value
+    let features = formLandRef.value;
     features.forEach(it => {
-        console.log('it.properties.name:',it.properties.name)
-        console.log('item.name:',item.name)
+        console.log('it.properties.name:', it.properties.name);
+        console.log('item.name:', item.name);
         if (it.properties.name === item.name) {
-            console.log('dingwei')
+            console.log('dingwei');
             viewer.camera.flyTo({
                 destination: Cesium.Rectangle.fromDegrees(
                     it.bbox[0],
@@ -1600,8 +1654,8 @@ function ChartClick(item) {
                 duration: 2,
             });
         }
-    })
-
+    });
+    flag.value = true;
 }
 
 function ASdivision() {
@@ -1821,11 +1875,11 @@ function ASdivision() {
                         colorStops: [
                             {
                                 offset: 0,
-                                color: 'rgba(255, 225, 104, 0.9)', // 0% 处的颜色
+                                color: 'rgba(4, 247, 227, 0.9)', // 0% 处的颜色
                             },
                             {
                                 offset: 1,
-                                color: 'rgba(255, 225, 104, 0.25)', // 100% 处的颜色
+                                color: 'rgba(4, 247, 227, 0.25)', // 100% 处的颜色
                             },
                         ],
                     },
@@ -1953,9 +2007,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;
@@ -2199,7 +2255,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);
@@ -2210,7 +2266,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;
@@ -2232,8 +2288,10 @@ $height: calc(100vh - 100px);
         cursor: pointer;
     }
 }
-.back_button{
+.back_button {
     position: absolute;
+    right: 30%;
+    top: 20px;
 }
 </style>