tianlong/Agriculture-front-end
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

up

Browse Source
This commit is contained in:
tianlong
2023-04-23 18:22:13 +08:00
parent 2a384502ab
commit 09f394b74d
2 changed files with 278 additions and 110 deletions
Download Patch File Download Diff File Expand all files Collapse all files

384
src/views/crops/area/index.vue
View File

@@ -5,13 +5,19 @@
<div class="leftTop">
<div class="title">
<span>种植面积时间统计</span>
<p @click="Deta(
'https://1912c.oss-cn-beijing.aliyuncs.com/egg-oss-demo/zhongzhimianjishijian.xlsx'
)
">
<p
@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(
'https://1912c.oss-cn-beijing.aliyuncs.com/egg-oss-demo/zhongzhimianji%20.xlsx'
)
">
<p
@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(
'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'
)
">
<p
@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(
'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'
)
">
<p
@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"
:value="item.properties.XZDM" />
<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>
@@ -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) => {
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) {
}
</style>

4
src/views/crops/classify/index.vue
View File

@@ -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;