up

src/views/crops/area/index.vue

@@ -5,13 +5,19 @@
             <div class="leftTop">
                 <div class="title">
                     <span>种植面积时间统计</span>
-                    <p @click="Deta(
+                    <p
-                        'https://1912c.oss-cn-beijing.aliyuncs.com/egg-oss-demo/zhongzhimianjishijian.xlsx'
+                        @click="
-                    )
+                            Deta(
-                        ">
+                                'https://1912c.oss-cn-beijing.aliyuncs.com/egg-oss-demo/zhongzhimianjishijian.xlsx'
+                            )
+                        "
+                    >
                         下载 &nbsp;
 
-                        <img src="@/assets/icons/svg/downloads.svg" style="width: 14px; height: 14px; cursor: pointer" />
+                        <img
+                            src="@/assets/icons/svg/downloads.svg"
+                            style="width: 14px; height: 14px; cursor: pointer"
+                        />
                     </p>
                 </div>
                 <div ref="areaDiv" class="areaDiv"></div>
@@ -20,12 +26,18 @@
             <div class="leftbottom">
                 <div class="title">
                     <span>种植面积统计</span>
-                    <p @click="Deta(
+                    <p
-                            'https://1912c.oss-cn-beijing.aliyuncs.com/egg-oss-demo/zhongzhimianji%20.xlsx'
+                        @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" />
+                        <img
+                            src="@/assets/icons/svg/downloads.svg"
+                            style="width: 14px; height: 14px; cursor: pointer"
+                        />
                     </p>
                 </div>
                 <div ref="typesofDiv" class="typesofDiv"></div>
@@ -42,12 +54,18 @@
             <div class="rightTop">
                 <div class="title">
                     <span>作物类型统计-高标准农田</span>
-                    <p @click="Deta(
+                    <p
-                            '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'
+                        @click="
-                        )
+                            Deta(
-                        ">
+                                'https://1912c.oss-cn-beijing.aliyuncs.com/egg-oss-demo/81f3b011-7a5d-4a21-88aa-8ea51142e564_%E6%95%B0%E6%8D%AE%E5%AF%BC%E5%87%BA.xlsx'
+                            )
+                        "
+                    >
                         下载 &nbsp;
-                        <img src="@/assets/icons/svg/downloads.svg" style="width: 14px; height: 14px; cursor: pointer" />
+                        <img
+                            src="@/assets/icons/svg/downloads.svg"
+                            style="width: 14px; height: 14px; cursor: pointer"
+                        />
                     </p>
                 </div>
                 <div ref="farmlandDiv" class="farmlandDiv"></div>
@@ -56,17 +74,27 @@
             <div class="rightbottom">
                 <div class="title">
                     <span>作物类型统计-行政区划</span>
-                    <p @click="Deta(
+                    <p
-                            'https://1912c.oss-cn-beijing.aliyuncs.com/egg-oss-demo/0c0ff4cf-151a-470e-856a-b0fce0fde997_%E6%95%B0%E6%8D%AE%E5%AF%BC%E5%87%BA.xlsx'
+                        @click="
-                        )
+                            Deta(
-                        ">
+                                'https://1912c.oss-cn-beijing.aliyuncs.com/egg-oss-demo/0c0ff4cf-151a-470e-856a-b0fce0fde997_%E6%95%B0%E6%8D%AE%E5%AF%BC%E5%87%BA.xlsx'
+                            )
+                        "
+                    >
                         下载 &nbsp;
-                        <img src="@/assets/icons/svg/downloads.svg" style="width: 14px; height: 14px; cursor: pointer" />
+                        <img
+                            src="@/assets/icons/svg/downloads.svg"
+                            style="width: 14px; height: 14px; cursor: pointer"
+                        />
                     </p>
                 </div>
                 <el-select @change="selectTab(item)" v-model="value" clearable placeholder="全部">
-                    <el-option v-for="item in Township.arr" :key="item.properties.XZDM" :label="item.properties.XZMC"
+                    <el-option
-                        :value="item.properties.XZDM" />
+                        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>
@@ -75,42 +103,78 @@
             <p>图例</p>
             <div class="mt-4">
                 <el-checkbox-group @change="change()" v-model="checkedCities">
-                    <el-checkbox checked style="
+                    <el-checkbox
+                        checked
+                        style="
                             background: rgba(102, 142, 214, 0.8);
                             border: 1px solid rgba(102, 142, 214, 1);
-                        " label="小麦" />
+                        "
-                    <el-checkbox checked style="
+                        label="小麦"
+                    />
+                    <el-checkbox
+                        checked
+                        style="
                             background: rgba(255, 225, 104, 0.8);
                             border: 1px solid rgba(255, 225, 104, 1);
-                        " label="玉米" />
+                        "
-                    <el-checkbox checked style="
+                        label="玉米"
+                    />
+                    <el-checkbox
+                        checked
+                        style="
                             background: rgba(156, 220, 130, 0.8);
                             border: 1px solid rgba(156, 220, 130, 1);
-                        " label="大豆" />
+                        "
-                    <el-checkbox checked style="
+                        label="大豆"
+                    />
+                    <el-checkbox
+                        checked
+                        style="
                             background: rgba(209, 91, 127, 0.8);
                             border: 1px solid rgba(209, 91, 127, 1);
-                        " label="地瓜" />
+                        "
-                    <el-checkbox checked style="
+                        label="地瓜"
+                    />
+                    <el-checkbox
+                        checked
+                        style="
                             background: rgba(212, 236, 89, 0.8);
                             border: 1px solid rgba(212, 236, 89, 1);
-                        " label="花生" />
+                        "
-                    <el-checkbox checked style="
+                        label="花生"
+                    />
+                    <el-checkbox
+                        checked
+                        style="
                             background: rgba(50, 211, 235, 0.8);
                             border: 1px solid rgba(50, 211, 235, 1);
-                        " label="蓝莓" />
+                        "
-                    <el-checkbox checked style="
+                        label="蓝莓"
+                    />
+                    <el-checkbox
+                        checked
+                        style="
                             background: rgba(91, 196, 159, 0.8);
                             border: 1px solid rgba(91, 196, 159, 1);
-                        " label="茶叶" />
+                        "
-                    <el-checkbox checked style="
+                        label="茶叶"
+                    />
+                    <el-checkbox
+                        checked
+                        style="
                             background: rgba(254, 182, 77, 0.8);
                             border: 1px solid rgba(254, 182, 77, 1);
-                        " label="马铃薯" />
+                        "
-                    <el-checkbox checked style="
+                        label="马铃薯"
+                    />
+                    <el-checkbox
+                        checked
+                        style="
                             background: rgba(250, 129, 109, 0.8);
                             border: 1px solid rgba(250, 129, 109, 1);
-                        " label="白菜和萝卜" />
+                        "
+                        label="白菜和萝卜"
+                    />
                 </el-checkbox-group>
             </div>
         </div>
@@ -166,9 +230,12 @@ let dic = {
     白菜和萝卜: 'rgba(250, 129, 109, 0.8)',
     其他: 'rgba(250, 129, 109, 0.8)',
 };
-watch(() => Township.arr, (val) => {
+watch(
-    console.log('val:', val)
+    () => Township.arr,
-})
+    val => {
+        console.log('val:', val);
+    }
+);
 //行政区划数据
 var data = {
     title: [],
@@ -185,39 +252,47 @@ let dd = {
     白菜和萝卜: [],
     其他: [],
 };
+let areatext = '8383894';
 
 const change = () => {
     console.log(checkedCities.value);
 };
 
 //表格数据
-const tableData = [
+let tableData = [
     {
         date: '小麦',
-        name: '12364亩',
+        name: '2934362亩',
         address: '35%',
     },
     {
         date: '玉米',
-        name: '6823亩',
+        name: '1676778亩',
         address: '20%',
     },
     {
         date: '大豆',
-        name: '5682亩',
+        name: '1257584亩',
         address: '15%',
     },
     {
         date: '地瓜',
-        name: '8964亩',
+        name: '1341423亩',
         address: '16%',
     },
     {
         date: '花生',
-        name: '3550亩',
+        name: '1592939亩',
-        address: '14%',
+        address: '19%',
     },
 ];
+let TypeTime = {
+    大豆: [1100, 1395, 1948, 2203, 3402, 1860, 2934, 2490],
+    小麦: [1283, 2883, 2939, 1233, 1992, 1928, 3949, 1929],
+    地瓜: [1823, 1948, 1928, 2294, 2302, 3903, 3493, 2323],
+    花生: [2374, 1934, 3943, 3493, 2083, 1928, 2984, 3279],
+};
+
 // 组件挂载完成后执行
 onMounted(() => {
     getArea(); //请求
@@ -325,7 +400,7 @@ function initMap() {
     });
 
     // 图层点击事件
-    layerClick()
+    layerClick();
 
     //加载黄岛区村级地图服务
     // Cesium.GeoJsonDataSource.load(
@@ -504,7 +579,7 @@ function getLevel(height) {
     }
 }
 
-let XZDM = ''
+let XZDM = '';
 // 图层点击事件
 function layerClick() {
     var handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas);
@@ -519,42 +594,71 @@ function layerClick() {
                 let level = getLevel(alti);
                 const layers = viewer.imageryLayers._layers;
                 console.log('layers:', layers);
-                const index = layers.findIndex(item => item._imageryProvider._layers && item._imageryProvider._layers === 'shuzisannong:huangdaoqu_town')
+                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) {
+                    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);
+                        let promise = provider.pickFeatures(
+                            xy.x,
+                            xy.y,
+                            level,
+                            cartographic.longitude,
+                            cartographic.latitude
+                        );
                         if (promise) {
                             promise.then(data => {
                                 if (data.length > 0) {
-                                    console.log('data:', data)
+                                    console.log('data:', data);
-                                    let newData = data['0']
+                                    let newData = data['0'];
                                     if (newData.properties && newData.properties.XZDM) {
-                                        if (XZDM !== newData.properties.XZDM) {//防止
+                                        if (XZDM !== newData.properties.XZDM) {
-                                            XZDM = newData.properties.XZDM
+                                            //防止
-                                            console.log('111', newData)
+                                            XZDM = newData.properties.XZDM;
-                                            let item = newData.data
+                                            console.log('111', newData);
+                                            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]),
+                                                destination: Cesium.Rectangle.fromDegrees(
+                                                    item.bbox[0],
+                                                    item.bbox[1],
+                                                    item.bbox[2],
+                                                    item.bbox[3]
+                                                ),
                                                 duration: 2,
                                             });
                                             // 移除高亮
-                                            deleteEntityByName('townLine')
+                                            deleteEntityByName('townLine');
                                             // 高亮边界
-                                            addBoundaryHandle(item.geometry.coordinates, 'townLine', 'yellow')
+                                            addBoundaryHandle(
+                                                item.geometry.coordinates,
+                                                'townLine',
+                                                'yellow'
+                                            );
                                             // 移除以前的
-                                            removeWms(['village_CQL'])
+                                            removeWms(['village_CQL']);
                                             // 添加新的
-                                            addvillage(`XZDM=${newData.properties.XZDM}`, 'village_CQL')
+                                            addvillage(
+                                                `XZDM=${newData.properties.XZDM}`,
+                                                'village_CQL'
+                                            );
                                         }
                                     } else {
-                                        removeWms(['village_CQL'])
+                                        removeWms(['village_CQL']);
                                     }
-
                                 }
                             });
                         }
@@ -563,13 +667,12 @@ function layerClick() {
             }
         }
     }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
-
 }
 // 添加村
 // CQL_FILTER:筛选的语句
 // customName地图服务自定义属性名
 function addvillage(CQL_FILTER, customName) {
-    console.log('222')
+    console.log('222');
     let map2 = new Cesium.WebMapServiceImageryProvider({
         url: `http://121.36.229.60:9080/geoserver/shuzisannong/wms`,
         layers: 'shuzisannong:huangdaoqu_village', //图层名
@@ -578,7 +681,7 @@ function addvillage(CQL_FILTER, customName) {
             format: 'image/png',
             transparent: true, //是否透明
             // CQL_FILTER: `XZDM=${value.value}`,
-            CQL_FILTER: CQL_FILTER
+            CQL_FILTER: CQL_FILTER,
         },
     });
     map2.customName = customName;
@@ -590,21 +693,21 @@ function addvillage(CQL_FILTER, customName) {
 function removeWms(nameArry, isMohu) {
     if (viewer) {
         // 倒叙遍历，customName是自定义的属性
-        const layers = viewer.imageryLayers._layers
+        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])
+                            viewer.imageryLayers.remove(layers[f]);
                         }
                     } else {
                         if (layers[f]._imageryProvider.customName === item) {
-                            viewer.imageryLayers.remove(layers[f])
+                            viewer.imageryLayers.remove(layers[f]);
                         }
                     }
                 }
-            })
+            });
         }
     }
 }
@@ -619,13 +722,11 @@ function deleteEntityByName(name) {
             }
         }
     }
-
 }
 
-
 /*------------------接口--------------------*/
 const getArea = () => {
-    getarea({ time: '2023-04-19', subregion: '0', parent: '黄岛区' }).then(res => {
+    getarea({ time: '2023-04-19', subregion: '1', parent: '大场镇' }).then(res => {
         console.log(res);
     });
 };
@@ -680,12 +781,80 @@ const getaArea = () => {
 };
 
 const selectTab = () => {
-    console.log(value.value);
+    TypeTime = {
+        大豆: [1034, 1295, 1348, 1203, 2402, 1160, 1934, 1490],
+        小麦: [1083, 1883, 2139, 1033, 992, 1328, 2949, 1529],
+        地瓜: [1223, 1548, 1828, 2094, 2202, 2903, 3293, 2023],
+        花生: [1374, 1734, 3143, 2493, 1983, 1728, 2584, 3079],
+    };
+
     if (value.value == '370211') {
         getTownships();
+        tableData = [
+            {
+                date: '小麦',
+                name: '2934362亩',
+                address: '35%',
+            },
+            {
+                date: '玉米',
+                name: '1676778亩',
+                address: '20%',
+            },
+            {
+                date: '大豆',
+                name: '1257584亩',
+                address: '15%',
+            },
+            {
+                date: '地瓜',
+                name: '1341423亩',
+                address: '16%',
+            },
+            {
+                date: '花生',
+                name: '1592939亩',
+                address: '19%',
+            },
+        ];
+        TypeTime = {
+            大豆: [1100, 1395, 1948, 2203, 3402, 1860, 2934, 2490],
+            小麦: [1283, 2883, 2939, 1233, 1992, 1928, 3949, 1929],
+            地瓜: [1823, 1948, 1928, 2294, 2302, 3903, 3493, 2323],
+            花生: [2374, 1934, 3943, 3493, 2083, 1928, 2984, 3279],
+        };
+        areatext = '8383894';
     }
+    areatext = '1293842';
+    tableData = [
+        {
+            date: '小麦',
+            name: '414029亩',
+            address: '32%',
+        },
+        {
+            date: '玉米',
+            name: '232891亩',
+            address: '18%',
+        },
+        {
+            date: '大豆',
+            name: '194076亩',
+            address: '15%',
+        },
+        {
+            date: '地瓜',
+            name: '207014亩',
+            address: '16%',
+        },
+        {
+            date: '花生',
+            name: '245829亩',
+            address: '19%',
+        },
+    ];
     let arr = [...Township.arr];
-    console.log('arr:', arr)
+    console.log('arr:', arr);
     arr.forEach(item => {
         if (item.properties.XZDM == value.value) {
             viewer.camera.flyTo({
@@ -709,21 +878,22 @@ const selectTab = () => {
         // console.log(brr);
         data.title = [...Object.values(brr)];
         ASdivision();
+        areachar();
+        typesof();
     });
 
-    let town = [...Township.arr]
+    let town = [...Township.arr];
-    const townData = town.find(item => item.properties.XZDM === value.value)
+    const townData = town.find(item => item.properties.XZDM === value.value);
     if (townData) {
         // 移除镇高亮
-        deleteEntityByName('townLine')
+        deleteEntityByName('townLine');
         // 高亮镇边界
-        addBoundaryHandle(townData.geometry.coordinates, 'townLine', 'yellow')
+        addBoundaryHandle(townData.geometry.coordinates, 'townLine', 'yellow');
     }
     // 移除以前村
-    removeWms(['aaa'])
+    removeWms(['aaa']);
     // 添加村
-    addvillage(`XZDM=${value.value}`, 'aaa')
+    addvillage(`XZDM=${value.value}`, 'aaa');
-
 };
 
 //下载
@@ -879,10 +1049,7 @@ function areachar() {
         series: [
             {
                 name: '大豆',
-                data: [
+                data: TypeTime.大豆,
-                    1200, 1700, 1340, 2460, 2790, 211, 124, 131, 124, 360, 124, 78, 160, 604, 17, 0,
-                    0, 0, 2, 8, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
-                ],
                 type: 'line',
                 smooth: true,
                 smoothMonotone: 'x',
@@ -895,10 +1062,7 @@ function areachar() {
             },
             {
                 name: '小麦',
-                data: [
+                data: TypeTime.小麦,
-                    2200, 1790, 2494, 3130, 2710, 3180, 2350, 3410, 51, 146, 31, 41, 61, 485, 5, 0,
-                    0, 0, 0, 3, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
-                ],
                 type: 'line',
                 smooth: true,
                 smoothMonotone: 'x',
@@ -911,10 +1075,7 @@ function areachar() {
             },
             {
                 name: '地瓜',
-                data: [
+                data: TypeTime.地瓜,
-                    2800, 1740, 3450, 2340, 2710, 1430, 3232, 42, 42, 115, 41, 33, 64, 312, 4, 0, 0,
-                    0, 3, 4, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
-                ],
                 type: 'line',
                 smooth: true,
                 smoothMonotone: 'x',
@@ -927,10 +1088,7 @@ function areachar() {
             },
             {
                 name: '花生',
-                data: [
+                data: TypeTime.花生,
-                    3500, 1400, 2342, 1299, 3420, 2233, 2321, 42, 42, 115, 41, 33, 64, 312, 4, 0, 0,
-                    0, 3, 4, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
-                ],
                 type: 'line',
                 smooth: true,
                 smoothMonotone: 'x',
@@ -1034,7 +1192,7 @@ function typesof() {
                 },
             },
             {
-                text: '123459亩',
+                text: `${areatext}亩`,
                 x: 'center',
                 top: '50%',
                 textStyle: {
@@ -1255,6 +1413,9 @@ function farmland() {
             },
         ],
     };
+    farmlandDivIntance.on('click', function (params) {
+          console.log(params.name)
+        })
 
     option && farmlandDivIntance.setOption(option, { notMerge: true, grid: { bottom: 20 } });
     useEcharts(farmlandDivIntance, option);
@@ -1836,9 +1997,11 @@ $height: calc(100vh - 100px);
             height: 25px;
             border-radius: 20px;
             font-size: 14px;
-            background: linear-gradient(180deg,
+            background: linear-gradient(
-                    rgba(16, 111, 111, 1) 0%,
+                180deg,
-                    rgba(47, 214, 214, 1) 100%);
+                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;
@@ -2062,7 +2225,7 @@ $height: calc(100vh - 100px);
     // align-items: flex-end;
     padding: 30px 8px 20px 8px;
 
-    &>div:nth-child(1) {
+    & > div:nth-child(1) {
         font-weight: 400;
         letter-spacing: 0px;
         color: rgba(255, 255, 255, 1);
@@ -2070,7 +2233,7 @@ $height: calc(100vh - 100px);
         line-height: 24px;
     }
 
-    &>div:nth-child(2) {
+    & > div:nth-child(2) {
         color: rgba(255, 255, 255, 1);
         width: 129px;
         height: 24px;
@@ -2093,5 +2256,6 @@ $height: calc(100vh - 100px);
     }
 }
 
-:deep(.el-select__popper.el-popper) {}
+:deep(.el-select__popper.el-popper) {
+}
 </style>

src/views/crops/classify/index.vue

@@ -850,6 +850,7 @@ function areachar() {
                 fontSize: 14,
                 padding: [2, 0, 0, 0],
             },
+            border: '1px solid rgba(4, 153, 153, 1)',
         },
         color: ['#00D7E9', 'rgba(0, 215, 233, 0.9)'],
         grid: {
@@ -1632,6 +1633,7 @@ $height: calc(100vh - 100px);
             opacity: 1;
             display: flex;
             padding: 1px;
+            justify-content: center
         }
     }
 
@@ -1726,8 +1728,7 @@ $height: calc(100vh - 100px);
     right: 25%;
     bottom: 7%;
     width: 129px;
-    border: 1px solid rgba(4, 153, 153, 1);
+    border: 1px solid rgba(4, 153, 153, 1);    
-
     // height: 50px;
     :deep(.el-collapse-item__header) {
         background: rgba(2, 31, 26, 0.6);
@@ -1744,6 +1745,7 @@ $height: calc(100vh - 100px);
     :deep(.el-collapse-item__content) {
         background: rgba(2, 31, 26, 0.6);
         padding: 0 10px;
+        padding-bottom: 10px;
     }
 
     --el-collapse-border-color: none;