From 4db5df3fae6b49406216b975b9ee25dab0db496c Mon Sep 17 00:00:00 2001
From: unknown <2414074862@qq.com>
Date: Mon, 24 Apr 2023 16:16:27 +0800
Subject: [PATCH] =?UTF-8?q?=E6=A0=87=E5=87=86=E5=86=9C=E7=94=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/crops/classify/index.vue | 119 +++++++++++++++--------------
 1 file changed, 63 insertions(+), 56 deletions(-)

diff --git a/src/views/crops/classify/index.vue b/src/views/crops/classify/index.vue
index b6a2e0a..2f6df79 100644
--- a/src/views/crops/classify/index.vue
+++ b/src/views/crops/classify/index.vue
@@ -17,10 +17,7 @@
                     <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>
@@ -31,25 +28,12 @@
                     <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>
@@ -59,18 +43,11 @@
                 <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);
@@ -734,6 +711,7 @@ function showOverlayChart(position) {
     pop.style.left = position.x + 10 + 'px';
     pop.style.zIndex = 99;
 }
+const formLandRef = ref([])
 // 获取高标准农田
 function getFarmland() {
     axios({
@@ -741,11 +719,10 @@ 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);
-        })
-        .catch(err => {});
+    }).then(res => {
+        console.log('农田：', res);
+        formLandRef.value = res.data.features
+    }).catch(err => { });
 }
 //接口
 const getArea = (item, index) => {
@@ -812,7 +789,7 @@ const selectTab = () => {
     if (value.value == '370211') {
         getTownships();
         classData = [302034, 243990, 42344, 34234, 304235];
-    } else if(value.value) {
+    } else if (value.value) {
         classData = [102034, 173990, 22344, 14234, 104235];
     }
 
@@ -1243,11 +1220,9 @@ 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 '';
                 },
@@ -1512,7 +1487,7 @@ function farmland() {
                 color: 'rgba(255, 255, 255, 1)',
                 fontSize: 14,
             },
-            data: ['片区一', '片区二', '片区三', '片区四', '片区五','片区六','片区七'],
+            data: ['片区1', '片区2', '片区3', '片区4', '片区5', '片区6', '片区7'],
         },
         series: [
             {
@@ -1520,7 +1495,7 @@ function farmland() {
                 type: 'bar',
                 barWidth: 12,
                 stack: 'stack',
-                data: [160, 103, 155, 100, 50,122,98],
+                data: [160, 103, 155, 100, 50, 122, 98],
                 itemStyle: {
                     normal: {
                         barBorderRadius: 0,
@@ -1542,7 +1517,7 @@ function farmland() {
                 type: 'bar',
                 barWidth: 12,
                 stack: 'stack',
-                data: [160, 103, 155, 100, 50,124,168],
+                data: [160, 103, 155, 100, 50, 124, 168],
                 itemStyle: {
                     normal: {
                         barBorderRadius: 0,
@@ -1564,7 +1539,7 @@ function farmland() {
                 type: 'bar',
                 barWidth: 12,
                 stack: 'stack',
-                data: [160, 103, 155, 100, 50,45,321],
+                data: [160, 103, 155, 100, 50, 45, 321],
                 itemStyle: {
                     normal: {
                         barBorderRadius: 0,
@@ -1589,12 +1564,43 @@ function farmland() {
     useEcharts(farmlandDivIntance, option);
 }
 // 图表点击事件
-function ChartClick() {
+function ChartClick(item) {
+    console.log('item:', item)
     // 移除作物
     removeWms(['huangdaoqu_town'], true);
     let layername = 'shuzisannong:farmland';
-    // 添加高标准农田服务
-    addWms(layername, layername + 'gbznt');
+
+    // 判断是否存在避免重复添加
+    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,
+            });
+        }
+    })
+
 }
 
 function ASdivision() {
@@ -1946,11 +1952,9 @@ $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;
@@ -2152,7 +2156,10 @@ $height: calc(100vh - 100px);
 
 .bottom_center {
     position: absolute;
-    left: calc(400px + 20px + 8vw);
+    // left: calc(400px + 20px + 8vw);
+    left: 0;
+    right: 0;
+    margin: auto;
     width: calc(100% - (400px * 2) - (10vw * 2));
     min-width: 380px;
     bottom: 5%;
@@ -2190,7 +2197,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);
@@ -2201,7 +2208,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;