From 09f394b74ddf1175e8c05e5eeebd93b78088f73a Mon Sep 17 00:00:00 2001 From: tianlong <17603473476@163.com> Date: Sun, 23 Apr 2023 18:22:13 +0800 Subject: [PATCH] up --- src/views/crops/area/index.vue | 384 ++++++++++++++++++++--------- src/views/crops/classify/index.vue | 4 + 2 files changed, 278 insertions(+), 110 deletions(-) diff --git a/src/views/crops/area/index.vue b/src/views/crops/area/index.vue index 6903812..634264a 100644 --- a/src/views/crops/area/index.vue +++ b/src/views/crops/area/index.vue @@ -5,13 +5,19 @@
种植面积时间统计 -

+

下载   - +

@@ -20,12 +26,18 @@
种植面积统计 -

+

下载   - +

@@ -42,12 +54,18 @@
作物类型统计-高标准农田 -

+

下载   - +

@@ -56,17 +74,27 @@
作物类型统计-行政区划 -

+

下载   - +

- +
@@ -75,42 +103,78 @@

图例

- - + - + - + - + - + - + - + - + + " + label="白菜和萝卜" + />
@@ -166,9 +230,12 @@ let dic = { 白菜和萝卜: 'rgba(250, 129, 109, 0.8)', 其他: 'rgba(250, 129, 109, 0.8)', }; -watch(() => Township.arr, (val) => { - console.log('val:', val) -}) +watch( + () => 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亩', - address: '14%', + name: '1592939亩', + 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) - let newData = data['0'] + console.log('data:', data); + let newData = data['0']; if (newData.properties && newData.properties.XZDM) { - if (XZDM !== newData.properties.XZDM) {//防止 - XZDM = newData.properties.XZDM - console.log('111', newData) - let item = newData.data + if (XZDM !== newData.properties.XZDM) { + //防止 + XZDM = newData.properties.XZDM; + 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] - const townData = town.find(item => item.properties.XZDM === value.value) + let town = [...Township.arr]; + 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: [ - 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, - ], + data: TypeTime.大豆, type: 'line', smooth: true, smoothMonotone: 'x', @@ -895,10 +1062,7 @@ function areachar() { }, { name: '小麦', - data: [ - 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, - ], + data: TypeTime.小麦, type: 'line', smooth: true, smoothMonotone: 'x', @@ -911,10 +1075,7 @@ function areachar() { }, { name: '地瓜', - data: [ - 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, - ], + data: TypeTime.地瓜, type: 'line', smooth: true, smoothMonotone: 'x', @@ -927,10 +1088,7 @@ function areachar() { }, { name: '花生', - data: [ - 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, - ], + data: TypeTime.花生, 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, - 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; @@ -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) { +} diff --git a/src/views/crops/classify/index.vue b/src/views/crops/classify/index.vue index a30ae99..18a1e21 100644 --- a/src/views/crops/classify/index.vue +++ b/src/views/crops/classify/index.vue @@ -696,6 +696,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: { @@ -1475,6 +1476,7 @@ $height: calc(100vh - 100px); opacity: 1; display: flex; padding: 1px; + justify-content: center } } .leftbottom { @@ -1558,6 +1560,7 @@ $height: calc(100vh - 100px); right: 25%; bottom: 7%; width: 129px; + border: 1px solid rgba(4, 153, 153, 1); // height: 50px; :deep(.el-collapse-item__header) { background: rgba(2, 31, 26, 0.6); @@ -1572,6 +1575,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; --el-collapse-content-bg-color: none;