精细分类根据级别显示村级矢量，点击某镇级高亮其他遮罩

src/views/crops/classify/Classify.vue

@@ -8,10 +8,8 @@
                         <span>作物分类面积统计</span>
                         <p @click="Deta()">
                             下载 &nbsp;
-                            <img
+                            <img src="@/assets/icons/svg/downloads.svg"
-                                src="@/assets/icons/svg/downloads.svg"
+                                style="width: 14px; height: 14px; cursor: pointer" />
-                                style="width: 14px; height: 14px; cursor: pointer"
-                            />
                         </p>
                     </div>
                     <div ref="areaDiv" class="areaDiv"></div>
@@ -21,10 +19,8 @@
                         <span>作物类型统计</span>
                         <p @click="Deta2()">
                             下载 &nbsp;
-                            <img
+                            <img src="@/assets/icons/svg/downloads.svg"
-                                src="@/assets/icons/svg/downloads.svg"
+                                style="width: 14px; height: 14px; cursor: pointer" />
-                                style="width: 14px; height: 14px; cursor: pointer"
-                            />
                         </p>
                     </div>
                     <div ref="typesofDiv" class="typesofDiv"></div>
@@ -46,36 +42,15 @@
                     </div>
                 </div>
                 <div class="leftFoldDiv" @click="leftFoldClick()">
-                    <el-tooltip
+                    <el-tooltip :disabled="leftWraFlag" :show-arrow="false" hide-after="0" show-after="200" class="box-item"
-                        :disabled="leftWraFlag"
+                        effect="dark" content="展开" placement="top">
-                        :show-arrow="false"
-                        hide-after="0"
-                        show-after="200"
-                        class="box-item"
-                        effect="dark"
-                        content="展开"
-                        placement="top"
-                    >
                         <!-- <el-icon v-if="!leftWraFlag"><ArrowRightBold /></el-icon> -->
                         <img v-if="!leftWraFlag" src="@/assets/images/close1.png" alt="" />
                     </el-tooltip>
-                    <el-tooltip
+                    <el-tooltip :disabled="!leftWraFlag" :show-arrow="false" hide-after="0" show-after="200"
-                        :disabled="!leftWraFlag"
+                        class="box-item" effect="dark" content="收起" placement="top">
-                        :show-arrow="false"
-                        hide-after="0"
-                        show-after="200"
-                        class="box-item"
-                        effect="dark"
-                        content="收起"
-                        placement="top"
-                    >
                         <!-- <el-icon v-if="leftWraFlag"><ArrowLeftBold /></el-icon> -->
-                        <img
+                        <img class="imgrotate" v-if="leftWraFlag" src="@/assets/images/close1.png" alt="" />
-                            class="imgrotate"
-                            v-if="leftWraFlag"
-                            src="@/assets/images/close1.png"
-                            alt=""
-                        />
                     </el-tooltip>
                 </div>
             </div>
@@ -85,10 +60,8 @@
                         <span>作物类型统计-高标准农田</span>
                         <p @click="Deta3()">
                             下载 &nbsp;
-                            <img
+                            <img src="@/assets/icons/svg/downloads.svg"
-                                src="@/assets/icons/svg/downloads.svg"
+                                style="width: 14px; height: 14px; cursor: pointer" />
-                                style="width: 14px; height: 14px; cursor: pointer"
-                            />
                         </p>
                     </div>
                     <div ref="farmlandDiv" class="farmlandDiv"></div>
@@ -99,57 +72,25 @@
                         <span>作物类型统计-行政区划</span>
                         <p @click="Deta4()">
                             下载 &nbsp;
-                            <img
+                            <img src="@/assets/icons/svg/downloads.svg"
-                                src="@/assets/icons/svg/downloads.svg"
+                                style="width: 14px; height: 14px; cursor: pointer" />
-                                style="width: 14px; height: 14px; cursor: pointer"
-                            />
                         </p>
                     </div>
-                    <el-select
+                    <el-select popper-class="select_city" @change="selectTab(item)" v-model="value" clearable
-                        popper-class="select_city"
+                        placeholder="全部">
-                        @change="selectTab(item)"
+                        <el-option v-for="item in Township.arr" :key="item.tomeCode" :label="item.tomeName"
-                        v-model="value"
+                            :value="item.tomeCode" />
-                        clearable
-                        placeholder="全部"
-                    >
-                        <el-option
-                            v-for="item in Township.arr"
-                            :key="item.tomeCode"
-                            :label="item.tomeName"
-                            :value="item.tomeCode"
-                        />
                     </el-select>
                     <div ref="ASdivisionDiv" class="ASdivision"></div>
                 </div>
                 <div class="rightFoldDiv" @click="rightFoldClick()">
-                    <el-tooltip
+                    <el-tooltip :disabled="!rightWraFlag" hide-after="0" :show-arrow="false" show-after="200"
-                        :disabled="!rightWraFlag"
+                        class="box-item" effect="dark" content="收起" placement="top">
-                        hide-after="0"
-                        :show-arrow="false"
-                        show-after="200"
-                        class="box-item"
-                        effect="dark"
-                        content="收起"
-                        placement="top"
-                    >
                         <img v-if="rightWraFlag" src="@/assets/images/close1.png" alt="" />
                     </el-tooltip>
-                    <el-tooltip
+                    <el-tooltip :disabled="rightWraFlag" hide-after="0" :show-arrow="false" show-after="200"
-                        :disabled="rightWraFlag"
+                        class="box-item" effect="dark" content="展开" placement="top">
-                        hide-after="0"
+                        <img class="imgrotate" v-if="!rightWraFlag" src="@/assets/images/close1.png" alt="" />
-                        :show-arrow="false"
-                        show-after="200"
-                        class="box-item"
-                        effect="dark"
-                        content="展开"
-                        placement="top"
-                    >
-                        <img
-                            class="imgrotate"
-                            v-if="!rightWraFlag"
-                            src="@/assets/images/close1.png"
-                            alt=""
-                        />
                     </el-tooltip>
                 </div>
             </div>
@@ -158,18 +99,11 @@
                     <template #title>图例</template>
                     <div class="mt-4">
                         <el-checkbox-group v-model="checkList" @change="change">
-                            <el-checkbox
+                            <el-checkbox v-for="(value, item, key) in dic" :key="key" :style="{
-                                v-for="(value, item, key) in dic"
-                                :key="key"
-                                :style="{
                                 background: value.color,
                                 border: `1px solid ${value.color}`,
                                 width: `100%`,
-                                }"
+                            }" :v-model="value.disabled" :disabled="value.disabled" :label="item" />
-                                :v-model="value.disabled"
-                                :disabled="value.disabled"
-                                :label="item"
-                            />
                         </el-checkbox-group>
                     </div>
                 </el-collapse-item>
@@ -217,42 +151,21 @@
             <div class="searchDiv">
                 <el-form :inline="true" :model="formInline" class="demo-form-inline">
                     <el-form-item label="时间:">
-                        <el-select
+                        <el-select popper-class="selectCity" v-model="formInline.yearMonth" placeholder="请选择">
-                            popper-class="selectCity"
+                            <el-option v-for="(item, index) in timeArr" :key="index" :label="Zitem" :value="item" />
-                            v-model="formInline.yearMonth"
-                            placeholder="请选择"
-                        >
-                            <el-option
-                                v-for="(item, index) in timeArr"
-                                :key="index"
-                                :label="Zitem"
-                                :value="item"
-                            />
                         </el-select>
                     </el-form-item>
                     <el-form-item label="统计方式:">
-                        <el-select
+                        <el-select popper-class="selectCity" v-model="formInline.flag" placeholder="请选择">
-                            popper-class="selectCity"
-                            v-model="formInline.flag"
-                            placeholder="请选择"
-                        >
                             <el-option label="行政区划" value="2" />
                             <el-option label="高标准农田" value="1" />
                         </el-select>
                     </el-form-item>
                     <el-form-item label="镇:">
-                        <el-select
+                        <el-select v-model="formInline.divisions" :disabled="formInline.flag == '2' ? false : true"
-                            v-model="formInline.divisions"
+                            :placeholder="formInline.flag == '2' ? '全部' : '请选择'" popper-class="selectCity">
-                            :disabled="formInline.flag == '2' ? false : true"
+                            <el-option v-for="(item, index) in selectOption" :key="index" :label="item.tomeName"
-                            :placeholder="formInline.flag == '2' ? '全部' : '请选择'"
+                                :value="item.tomeCode" />
-                            popper-class="selectCity"
-                        >
-                            <el-option
-                                v-for="(item, index) in selectOption"
-                                :key="index"
-                                :label="item.tomeName"
-                                :value="item.tomeCode"
-                            />
                         </el-select>
                     </el-form-item>
                     <el-form-item>
@@ -273,61 +186,28 @@
             </div>
             <div v-show="SwitchFlag" class="tableBox">
                 <div class="tableBorder">
-                    <el-table
+                    <el-table :data="amount" :header-cell-style="{ 'text-align': 'center' }" style="width: 100%"
-                        :data="amount"
+                        highlight-current-row header-row-class-name="tabth" v-if="!operate">
-                        :header-cell-style="{ 'text-align': 'center' }"
-                        style="width: 100%"
-                        highlight-current-row
-                        header-row-class-name="tabth"
-                        v-if="!operate"
-                    >
                         <el-table-column align="center" prop="合计" width="80" />
-                        <el-table-column
+                        <el-table-column v-for="(item, index) in tableItem" :key="index" :prop="item.value"
-                            v-for="(item, index) in tableItem"
+                            :label="index == 0 ? item.lable : item.lable + '(亩)'" align="center" />
-                            :key="index"
-                            :prop="item.value"
-                            :label="index == 0 ? item.lable : item.lable + '(亩)'"
-                            align="center"
-                        />
                         <el-table-column prop="address" v-if="operate" align="center" label="操作">
                             <template #default="scope">
-                                <span
+                                <span style="color: rgba(67, 181, 143, 1); cursor: pointer" @click="download(scope.row)">
-                                    style="color: rgba(67, 181, 143, 1); cursor: pointer"
-                                    @click="download(scope.row)"
-                                >
                                     下载
                                 </span>
                             </template>
                         </el-table-column>
                     </el-table>
                 </div>
-                <el-table
+                <el-table :data="tableNewData" :header-cell-style="{ 'text-align': 'center' }" height="90%"
-                    :data="tableNewData"
+                    highlight-current-row header-row-class-name="tabth">
-                    :header-cell-style="{ 'text-align': 'center' }"
+                    <el-table-column type="index" width="80" align="center" label="序号" :index="Nindex" />
-                    height="90%"
+                    <el-table-column v-for="(item, index) in tableItem" :key="index" :prop="item.value"
-                    highlight-current-row
+                        :label="index == 0 ? item.lable : item.lable + '(亩)'" align="center" />
-                    header-row-class-name="tabth"
-                >
-                    <el-table-column
-                        type="index"
-                        width="80"
-                        align="center"
-                        label="序号"
-                        :index="Nindex"
-                    />
-                    <el-table-column
-                        v-for="(item, index) in tableItem"
-                        :key="index"
-                        :prop="item.value"
-                        :label="index == 0 ? item.lable : item.lable + '(亩)'"
-                        align="center"
-                    />
                     <el-table-column prop="address" v-if="operate" align="center" label="操作">
                         <template #default="scope">
-                            <span
+                            <span style="color: rgba(67, 181, 143, 1); cursor: pointer" @click="download(scope.row)">
-                                style="color: rgba(67, 181, 143, 1); cursor: pointer"
-                                @click="download(scope.row)"
-                            >
                                 下载
                             </span>
                         </template>
@@ -335,14 +215,8 @@
                 </el-table>
                 <div class="example-pagination-block">
                     共{{ insectarr.length }}条
-                    <el-pagination
+                    <el-pagination background layout="prev, pager, next" :total="insectarr.length"
-                        background
+                        :current-page="currentPage" :page-size="pageSize" @current-change="handleCurrentChange" />
-                        layout="prev, pager, next"
-                        :total="insectarr.length"
-                        :current-page="currentPage"
-                        :page-size="pageSize"
-                        @current-change="handleCurrentChange"
-                    />
                 </div>
             </div>
             <div v-show="!SwitchFlag" class="chartMode">
@@ -372,6 +246,7 @@ import {
 import axios from 'axios';
 import * as xlsx from 'xlsx'; // Vue3 版本
 import { ElMessage } from 'element-plus';
+import townJson from './town.json'
 
 let viewer = ref(null);
 const areaDiv = ref(null);
@@ -659,7 +534,6 @@ const onSubmit = () => {
             (currentPage.value - 1) * pageSize.value,
             (currentPage.value - 1) * pageSize.value + pageSize.value
         );
-        console.log(tableNewData);
         const statInfo = chartModeDiv.value; // 获取图表元素
         statInfo.style.width = window.innerWidth - 100 + 'px'; //初始化echarts图表宽度
         statInfo.style.height = window.innerHeight - 100 + 'px';
@@ -797,7 +671,6 @@ const Deta4 = item => {
                     }
                 });
             });
-            console.log(brr);
             exportExcel(brr, `${region}作物长势等级统计-行政区划`, 'Sheet1');
         });
     }
@@ -1164,21 +1037,26 @@ function initMap() {
 
     // 图层点击事件
     layerClick();
+    // 监听相机移动，实现根据缩放级别村级矢量的显隐
+    cameraMove()
+    // 图层遮罩
+    maskLayer()
     // // 添加镇级矢量
     // addWms('shuzisannong:huangdaoqu_town', 'shuzisannong:huangdaoqu_town');
-    let cityDS = Cesium.GeoJsonDataSource.load(
-        `${serverAPI.geoserverUrl}/shuzisannong/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=shuzisannong%3Ahuangdaoqu_town&maxFeatures=50&outputFormat=application%2Fjson`,
-        {
-            fill: Cesium.Color.YELLOW.withAlpha(0.01),
-            strokeWidth: 3,
-            markerSymbol: '?',
-            clampToGround: true,
-            outline: true,
-            outlineColor: Cesium.Color.BLACK,
-        }
-    );
 
-    viewer.dataSources.add(cityDS);
+    // let cityDS = Cesium.GeoJsonDataSource.load(
+    //     `${serverAPI.geoserverUrl}/shuzisannong/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=shuzisannong%3Ahuangdaoqu_town&maxFeatures=50&outputFormat=application%2Fjson`,
+    //     {
+    //         fill: Cesium.Color.YELLOW.withAlpha(0.01),
+    //         strokeWidth: 3,
+    //         markerSymbol: '?',
+    //         clampToGround: true,
+    //         outline: true,
+    //         outlineColor: Cesium.Color.BLACK,
+    //     }
+    // );
+
+    // viewer.dataSources.add(cityDS);
     zoomInCenter(viewer);
 }
 
@@ -1227,7 +1105,6 @@ function getLevel(height) {
 }
 
 function change(e, a) {
-    // console.log('e:', e, a);
     // removeWms('crop');
     // addwms();
 }
@@ -1239,8 +1116,8 @@ function zoomInCenter(viewer) {
 
         if (!isNaN(Amount)) {
             viewer.scene.camera.zoomIn(Amount);
-            var ray = viewer.camera.getPickRay(movement.position);
+            // var ray = viewer.camera.getPickRay(movement.position);
-            var cartesian = viewer.scene.globe.pick(ray, viewer.scene);
+            // var cartesian = viewer.scene.globe.pick(ray, viewer.scene);
         }
     }, Cesium.ScreenSpaceEventType.WHEEL);
 }
@@ -1296,7 +1173,6 @@ function addWms(layers, customName, bottom) {
     map.customName = customName; //自己定义各种属性
     let dd = viewer.imageryLayers.addImageryProvider(map); //添加图层
     // if (customName.indexOf('gbznt') > -1) {
-    //     console.log('dididididi');
     //     // viewer.imageryLayers.lower(dd);//将图层下移一层
     //     viewer.imageryLayers.lowerToBottom(dd); //将图层移到最底层
     //     viewer.imageryLayers.raise(dd); //将图层上移一层
@@ -1306,10 +1182,114 @@ function addWms(layers, customName, bottom) {
         viewer.imageryLayers.raise(dd); //将图层上移一层
     }
 }
+// 根据根据级别显示村级矢量
+function cameraMove() {
+    if (viewer) {
+        viewer.scene.camera.moveEnd.addEventListener(function () {
+            // 获取级别
+            let alti = viewer.camera.positionCartographic.height;
+
+            if (alti && alti < 20000) {
+                // 根据中心点经纬度添加，前提是添加过镇的实体
+                // let centerResult = viewer.camera.pickEllipsoid(new Cesium.Cartesian2(viewer.canvas.clientWidth / 2, viewer.canvas.clientHeight / 2))
+                // if (Cesium.defined(centerResult)) {
+                //     let curPosition = Cesium.Ellipsoid.WGS84.cartesianToCartographic(centerResult)
+                //     let pick = viewer.scene.pick(curPosition)
+                //     if (pick) {
+                //         let info = pick.id.properties.XZDM || null
+                //         removeWms(['village'], false)
+                //         if (info) {
+                //             addvillage(
+                //                 `XZDM=${info._value}`,
+                //                 'village'
+                //             );
+                //         }
+                //     }
+                // }
+
+                // 添加全部
+                addWms('shuzisannong:huangdaoqu_village', 'village')
+            } else {
+                removeWms(['village'], false)
+            }
+        })
+    }
+}
+
+let previousPickedEntity = 1;
+// 图层遮罩鼠标移动高亮
+function maskLayer() {
+    // 添加矢量遮罩
+    if (viewer) {
+        // let url = `${serverAPI.geoserverUrl}/shuzisannong/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=shuzisannong%3Ahuangdaoqu_town&maxFeatures=50&outputFormat=application%2Fjson`
+        let url = townJson
+        Cesium.GeoJsonDataSource.load(url, {
+            stroke: Cesium.Color.fromCssColorString("rgba(22, 69, 153, 0)"), //轮廓颜色
+            fill: Cesium.Color.fromCssColorString("rgba(22, 69, 153, 0.01)"), //内部颜色
+            // strokeWidth: 3, //轮廓宽度,无效
+            // clampToGround: true,//是否贴地
+        }).then(function (dataSource) {
+            dataSource.name = 'geojsonDataSource'//自定义属性，方便以后操作
+            viewer.dataSources.add(dataSource); //添加
+            // let entities = dataSource.entities.values;
+            // for (var i = 0; i < entities.length; i++) {
+            //     let entity = entities[i];
+            //     entity.polygon.material = Cesium.Color.fromCssColorString("rgba(22, 69, 153, 0.8)")
+            // }
+        });
+
+
+
+
+        // 监听鼠标移动
+        let handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas)
+        handler.setInputAction(async function (movement) {
+            const earthPosition = viewer.camera.pickEllipsoid(movement.position, viewer.scene.globe.ellipsoid);//当前世界坐标笛卡尔积
+            if (Cesium.defined(earthPosition)) {
+                let pickedFeature = viewer.scene.pick(movement.position);//返回最上层模型属性
+                if (pickedFeature && typeof (pickedFeature) != "undefined") {
+                    // 取消先前要素高亮
+                    if (previousPickedEntity && Cesium.defined(previousPickedEntity)) {
+                        if (previousPickedEntity === 1) {
+                            // 第一次添加，全部加暗
+                            //layerName是加载时给geojson添加的属性
+                            const dataSources = viewer.dataSources._dataSources
+                            for (let k = dataSources.length - 1; k >= 0; k--) {
+                                // if (dataSources[k].name.indexOf('geojsonDataSource') > -1) {
+                                if (dataSources[k].name && dataSources[k].name === 'geojsonDataSource') {
+                                    // this.viewer.dataSources.remove(dataSources[k])
+                                    let entities = dataSources[k].entities.values;
+                                    for (var i = 0; i < entities.length; i++) {
+                                        let entity = entities[i];
+                                        entity.polygon.material = Cesium.Color.fromCssColorString("rgba(22, 69, 153, 0.4)")
+                                    }
+                                }
+                            }
+                        } else {
+                            previousPickedEntity.polygon.material = Cesium.Color.fromCssColorString("rgba(22, 69, 153, 0.4)");
+                            previousPickedEntity = null
+                        }
+                    }
+                    // 高亮当前选中要素
+                    if (Cesium.defined(pickedFeature.id) && Cesium.defined(pickedFeature.id.polygon)) {
+                        pickedFeature.id.polygon.material = Cesium.Color.fromCssColorString("rgba(22, 69, 153, 0)");
+                        previousPickedEntity = pickedFeature.id
+                    }
+
+
+                }
+            }
+        }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
+
+    }
+}
+
 // 图层点击事件
-let XZDM = '';
+let XZDM = ''
+
 function layerClick() {
-    var handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas);
+    let handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas)
+
     handler.setInputAction(async function (movement) {
         var ray = viewer.camera.getPickRay(movement.position);
         var cartesian = viewer.scene.globe.pick(ray, viewer.scene);
@@ -1321,11 +1301,7 @@ function layerClick() {
                 let level = getLevel(alti);
                 const layers = viewer.imageryLayers._layers;
                 // 获取镇的图层 （点击镇后，再点击种植结构）
-                const index = layers.findIndex(
+                const index = layers.findIndex(item => item._imageryProvider._layers && item._imageryProvider._layers === 'shuzisannong:huangdaoqu_town');
-                    item =>
-                        item._imageryProvider._layers &&
-                        item._imageryProvider._layers === 'shuzisannong:huangdaoqu_town'
-                );
                 if (index > -1) {
                     const providerPoint = layers[index];
                     // 拿取最后一个图层
@@ -1374,12 +1350,13 @@ function layerClick() {
                                                 'red'
                                             );
                                             // 移除以前的
-                                            removeWms(['village_CQL']);
+                                            // removeWms(['village_CQL']);
                                             // 添加新的
-                                            addvillage(
+                                            // 更改为根据级别添加村级矢量
-                                                `XZDM=${newData.properties.XZDM}`,
+                                            // addvillage(
-                                                'village_CQL'
+                                            //     `XZDM=${newData.properties.XZDM}`,
-                                            );
+                                            //     'village_CQL'
+                                            // );
                                             // 隐藏pop
                                             hiddenOverlayChart();
                                         } else {
@@ -1401,15 +1378,14 @@ function layerClick() {
         }
     }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
 }
+
 // 种植结构
 async function zuowuClick(layers, cartographic, level, xy, movement) {
     let newData = [];
     let promise = layers.map(async item => {
         if (item._imageryProvider._layers) {
             // 是种植结构图层
-            if (
+            if (Object.values(layersDic).findIndex(it => it === item._imageryProvider._layers) > -1) {
-                Object.values(layersDic).findIndex(it => it === item._imageryProvider._layers) > -1
-            ) {
                 const providerPoint = item;
                 // 拿取最后一个图层
                 let provider = providerPoint._imageryProvider;
@@ -1595,8 +1571,9 @@ function showOverlayChart(position) {
     pop.style.left = position.x + 10 + 'px';
     pop.style.zIndex = 99;
 }
+
 //列表模式模式切换
-const SwitchMode = () => {
+function SwitchMode() {
     SwitchFlag.value = !SwitchFlag.value;
     const statInfo = chartModeDiv.value; // 获取图表元素
     statInfo.style.width = window.innerWidth - 100 + 'px'; //初始化echarts图表宽度
@@ -1622,7 +1599,7 @@ function getFarmland() {
         .then(res => {
             formLandRef.value = res.data.features;
         })
-        .catch(err => {});
+        .catch(err => { });
 }
 //每页条数
 const handleCurrentChange = val => {
@@ -1777,6 +1754,7 @@ const getaArea = () => {
     let arr = [];
     let a = {};
     getareas().then(res => {
+        if (res.features) {
             Township.crr = res.features;
             data.title.forEach((item, indexs) => {
                 let town = res.features.map(i => {
@@ -1793,6 +1771,7 @@ const getaArea = () => {
                     }
                 });
             });
+        }
         ASdivision();
         // selectTab();
     });
@@ -1905,7 +1884,7 @@ const selectTab = () => {
     // 移除镇高亮
     deleteEntityByName('townLine');
     // 添加新的
-    addvillage(`XZDM=${value.value}`, 'village_CQL');
+    // addvillage(`XZDM=${value.value}`, 'village_CQL');
 };
 //列表模式-年
 const theTimes = () => {
@@ -2261,8 +2240,7 @@ function typesof() {
                                 brr = item.area;
                             }
                         });
-                        return `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${
+                        return `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color
-                            params.color
                             };"></span>${params.seriesName}:${Number(brr)}亩`;
                     }
                     return '';
@@ -2585,7 +2563,6 @@ function farmland() {
 }
 // 图表点击事件
 function ChartClick(item) {
-    console.log('item:', item);
     // 移除镇边界
     removeWms(['huangdaoqu_town'], true);
     removeWms(['shuzisannong:huangdaoqu_town']);
@@ -3294,7 +3271,6 @@ function chartModes() {
     var tooltip = option.tooltip;
     // 提示框自定义内容包括总合及文字
     function formatFun(params) {
-        // console.log('params====>', params)
         let tipStr = params[0].axisValueLabel + '</br>'; // 初始化提示框文字默认当前轴名称并换行
         let totalNum = 0; // 用于存储当前列总数
         // params为当前柱状图数组数量 遍历求和并添加类目label：value
@@ -3336,6 +3312,7 @@ $height: calc(100vh - 100px);
 .centerBox {
     width: 100%;
     height: 100%;
+
     .imgrotate {
         transform: rotate(180deg);
     }
@@ -3361,11 +3338,9 @@ $height: calc(100vh - 100px);
             white-space: nowrap;
             text-overflow: ellipsis;
             overflow: hidden;
-            background: linear-gradient(
+            background: linear-gradient(180deg,
-                180deg,
                     rgba(255, 255, 255, 1) 33.33%,
-                rgba(41, 255, 219, 1) 100%
+                    rgba(41, 255, 219, 1) 100%);
-            );
             background-clip: text;
             -webkit-background-clip: text;
             -webkit-text-fill-color: transparent;
@@ -3376,11 +3351,9 @@ $height: calc(100vh - 100px);
             height: 25px;
             border-radius: 20px;
             font-size: 14px;
-            background: linear-gradient(
+            background: linear-gradient(180deg,
-                180deg,
                     rgba(16, 111, 111, 1) 0%,
-                rgba(47, 214, 214, 1) 100%
+                    rgba(47, 214, 214, 1) 100%);
-            );
             border: 1.5px solid rgba(23, 194, 180, 1);
             display: flex;
             justify-content: center;
@@ -3388,14 +3361,18 @@ $height: calc(100vh - 100px);
         }
     }
 }
+
 .tabulation {
     display: none;
     padding: 20px;
+
     .tableBox {
         padding: 0 10px;
+
         .tableBorder {
             border-radius: 8px;
             margin-bottom: 10px;
+
             .el-table--fit {
                 border-radius: 8px;
                 border: 2px solid rgba(100, 195, 164, 0.8);
@@ -3403,39 +3380,47 @@ $height: calc(100vh - 100px);
                     0px 1px 2px 0px rgba(100, 195, 164, 0.8);
             }
         }
-        :deep(
+
-                .el-table .el-table__header-wrapper th,
+        :deep(.el-table .el-table__header-wrapper th,
-                .el-table .el-table__fixed-header-wrapper th
+            .el-table .el-table__fixed-header-wrapper th) {
-            ) {
             color: rgba(0, 0, 0, 1);
         }
+
         height: 90%;
+
         :deep(.el-table__inner-wrapper) {
             height: 96% !important;
         }
+
         .example-pagination-block {
             display: flex;
             align-items: center;
             justify-content: flex-end;
         }
+
         :deep(.tabth) {
             background-color: rgba(247, 247, 247, 1);
         }
     }
+
     .chartMode {
         width: 100%;
         height: 85%;
+
         .chartModeDiv {
             width: 100%;
             height: 100%;
         }
     }
+
     .searchDiv {
         display: flex;
+
         .dow {
             float: right;
             margin-right: 10px;
         }
+
         .modeDiv {
             width: 234px;
             height: 26px;
@@ -3456,11 +3441,13 @@ $height: calc(100vh - 100px);
                 border-radius: 8px;
                 line-height: 26px;
             }
+
             .Selected {
                 background: rgba(100, 195, 164, 1);
                 border-radius: 8px 0px 0px 8px;
                 color: rgba(255, 255, 255, 1);
             }
+
             .Selecteds {
                 background: rgba(100, 195, 164, 1);
                 border-radius: 0px 8px 8px 0px;
@@ -3469,6 +3456,7 @@ $height: calc(100vh - 100px);
         }
     }
 }
+
 .leftWra {
     position: absolute;
     top: 10px;
@@ -3478,6 +3466,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;
@@ -3488,6 +3477,7 @@ $height: calc(100vh - 100px);
         font-size: 30px;
         color: #ccc;
     }
+
     .leftTop {
         height: 40%;
         max-width: 100%;
@@ -3521,6 +3511,7 @@ $height: calc(100vh - 100px);
             margin-bottom: 10px;
         }
     }
+
     .tableDiv {
         // background: rgba(255, 255, 255, 0.05);
         width: 100%;
@@ -3528,24 +3519,30 @@ $height: calc(100vh - 100px);
         color: rgba(255, 255, 255, 1);
         height: 20%;
         overflow: hidden;
+
         ::-webkit-scrollbar {
             display: none;
         }
+
         :deep(.el-table tr) {
             background-color: transparent;
         }
+
         :deep(.el-table) {
             --el-table-border-color: none;
             color: rgba(255, 255, 255, 1);
         }
+
         :deep(.el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell) {
             background-color: revert;
         }
+
         div {
             width: 100%;
             height: 100%;
             overflow-y: auto;
         }
+
         .Crops {
             display: flex;
             width: 100%;
@@ -3557,11 +3554,9 @@ $height: calc(100vh - 100px);
             align-items: center;
             justify-content: space-around;
             opacity: 1;
-            background: linear-gradient(
+            background: linear-gradient(90deg,
-                90deg,
                     rgba(21, 173, 148, 0.1) 0%,
-                rgba(21, 173, 148, 0) 100%
+                    rgba(21, 173, 148, 0) 100%);
-            );
 
             div {
                 display: flex;
@@ -3606,6 +3601,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;
+
     .rightFoldDiv {
         width: 30px;
         height: 30px;
@@ -3616,6 +3612,7 @@ $height: calc(100vh - 100px);
         font-size: 30px;
         color: #ccc;
     }
+
     .rightTop {
         width: 100%;
         height: 40%;
@@ -3785,6 +3782,7 @@ $height: calc(100vh - 100px);
     align-items: flex-start;
     display: none;
 }
+
 #pop {
     border-radius: 5px;
     position: absolute;
@@ -3809,7 +3807,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);
@@ -3820,7 +3818,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;
@@ -3879,6 +3877,7 @@ $height: calc(100vh - 100px);
     background: rgba(41, 255, 255, 0.7) !important;
     display: none;
 }
+
 .selectCity {
     background: #fff;
 }

yarn-error.log

@@ -0,0 +1,87 @@
+Arguments: 
+  C:\Program Files\nodejs\node.exe D:\Program Files (x86)\Yarn\bin\yarn.js install
+
+PATH: 
+  D:\Python27\;D:\Python27\Scripts;C:\Program Files\Eclipse Adoptium\jdk-17.0.5.8-hotspot\bin;C:\WINDOWS\system32;C:\WINDOWS;C:\WINDOWS\System32\Wbem;C:\WINDOWS\System32\WindowsPowerShell\v1.0\;C:\WINDOWS\System32\OpenSSH\;%NVM_HOME%;%NVM_SYMLINK%;D:\Program Files\Git\cmd;C:\Program Files\Docker\Docker\resources\bin;D:\Program Files (x86)\Tencent\微信web开发者工具\dll;D:\Program Files (x86)\Yarn\bin\;D:\xshell\xftp\;D:\xshell\xshell\;C:\Users\HP\AppData\Local\Microsoft\WindowsApps;C:\Users\HP\AppData\Roaming\nvm;C:\Program Files\nodejs;D:\Program Files\Microsoft VS Code\bin;D:\Program Files\JetBrains\IntelliJ IDEA 2022.2\bin;;C:\Users\HP\AppData\Local\Yarn\bin;
+
+Yarn version: 
+  1.22.4
+
+Node version: 
+  14.20.0
+
+Platform: 
+  win32 x64
+
+Trace: 
+  SyntaxError: C:\Users\HP\AppData\Local\Yarn\Cache\v6\npm-@turf-center-mean-6.5.0-2dc329c003f8012ba9ae7812a61b5647e1ae86a2-integrity\node_modules\@turf\center-mean\.yarn-metadata.json: Unexpected end of JSON input
+      at JSON.parse (<anonymous>)
+      at D:\Program Files (x86)\Yarn\lib\cli.js:1625:59
+      at Generator.next (<anonymous>)
+      at step (D:\Program Files (x86)\Yarn\lib\cli.js:310:30)
+      at D:\Program Files (x86)\Yarn\lib\cli.js:321:13
+
+npm manifest: 
+  {
+      "name": "ruoyi",
+      "version": "3.8.4",
+      "description": "若依管理系统",
+      "author": "若依",
+      "license": "MIT",
+      "scripts": {
+          "dev": "vite",
+          "start": "vite",
+          "build:prod": "vite build",
+          "build:stage": "vite build --mode staging",
+          "preview": "vite preview"
+      },
+      "repository": {
+          "type": "git",
+          "url": "https://gitee.com/y_project/RuoYi-Vue.git"
+      },
+      "dependencies": {
+          "@element-plus/icons-vue": "2.0.10",
+          "@fit-screen/vue": "^0.2.0",
+          "@turf/turf": "^6.5.0",
+          "@vueuse/core": "9.5.0",
+          "axios": "0.27.2",
+          "echarts": "^5.3.0",
+          "echarts-gl": "^2.0.9",
+          "element-plus": "2.2.21",
+          "file-saver": "2.0.5",
+          "fuse.js": "6.6.2",
+          "jquery": "^3.6.4",
+          "js-cookie": "3.0.1",
+          "jsencrypt": "3.3.1",
+          "lib-flexible": "^0.3.2",
+          "moment": "^2.29.4",
+          "nprogress": "0.2.0",
+          "pinia": "2.0.22",
+          "postcss-px2rem": "^0.3.0",
+          "v-scale-screen": "^2.2.0",
+          "vue": "3.2.45",
+          "vue-cropper": "1.0.3",
+          "vue-json-excel": "^0.3.0",
+          "vue-router": "4.1.4",
+          "vue-video-player": "^6.0.0",
+          "vue3-image-preview": "^0.2.6",
+          "vue3-video-play": "^1.3.1-beta.6",
+          "xlsx": "^0.18.5"
+      },
+      "devDependencies": {
+          "@vitejs/plugin-vue": "3.1.0",
+          "@vue/compiler-sfc": "3.2.45",
+          "sass": "1.56.1",
+          "unplugin-auto-import": "0.11.4",
+          "vite": "3.2.3",
+          "vite-plugin-compression": "0.5.1",
+          "vite-plugin-svg-icons": "2.0.1",
+          "vite-plugin-vue-setup-extend": "0.4.0"
+      }
+  }
+
+yarn manifest: 
+  No manifest
+
+Lockfile: 
+  No lockfile