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-24 17:41:55 +08:00
parent 626e8fdb18
commit b0524715df
1 changed files with 97 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -17,7 +17,10 @@
<span>作物类型统计-高标准农田</span> <span>作物类型统计-高标准农田</span>
<p> <p>
下载 &nbsp; 下载 &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> </p>
</div> </div>
<div ref="farmlandDiv" class="farmlandDiv"></div> <div ref="farmlandDiv" class="farmlandDiv"></div>
@ -28,12 +31,25 @@
<span>作物类型统计-行政区划</span> <span>作物类型统计-行政区划</span>
<p> <p>
下载 &nbsp; 下载 &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> </p>
</div> </div>
<el-select popper-class="select_city" @change="selectTab(item)" v-model="value" clearable placeholder="全部"> <el-select
<el-option v-for="item in Township.arr" :key="item.properties.XZDM" :label="item.properties.XZMC" popper-class="select_city"
:value="item.properties.XZDM" /> @change="selectTab(item)"
v-model="value"
clearable
placeholder="全部"
>
<el-option
v-for="item in Township.arr"
:key="item.properties.XZDM"
:label="item.properties.XZMC"
:value="item.properties.XZDM"
/>
</el-select> </el-select>
<div ref="ASdivisionDiv" class="ASdivision"></div> <div ref="ASdivisionDiv" class="ASdivision"></div>
</div> </div>
@ -43,11 +59,18 @@
<template #title>图例</template> <template #title>图例</template>
<div class="mt-4"> <div class="mt-4">
<el-checkbox-group v-model="checkList" @change="change"> <el-checkbox-group v-model="checkList" @change="change">
<el-checkbox v-for="(value, item, key) in dic" :key="key" :style="{ <el-checkbox
v-for="(value, item, key) in dic"
:key="key"
:style="{
background: value.color, background: value.color,
border: `1px solid ${value.color}`, border: `1px solid ${value.color}`,
width: `100%`, width: `100%`,
}" v-model="checked3" :disabled="value.disabled" :label="item" /> }"
v-model="checked3"
:disabled="value.disabled"
:label="item"
/>
<!-- <el-checkbox style=" <!-- <el-checkbox style="
background: rgba(251, 171, 60, 1); background: rgba(251, 171, 60, 1);
@ -137,7 +160,7 @@
</div> </div>
<div class="cancel" @click="hiddenOverlayChart">X</div> <div class="cancel" @click="hiddenOverlayChart">X</div>
</div> </div>
<el-button class="back_button">111111</el-button> <el-button v-if="flag" class="back_button" @click="back()">返回</el-button>
</div> </div>
</template> </template>
@ -159,6 +182,7 @@ const ASdivisionDiv = ref(null);
let Township = reactive({ arr: [], brr: [], crr: [] }); //街道 let Township = reactive({ arr: [], brr: [], crr: [] }); //街道
const value = ref('370211'); const value = ref('370211');
const clickInfoMap = ref({ info: [] }); const clickInfoMap = ref({ info: [] });
const flag = ref(false);
let dd = { let dd = {
小麦: [], 小麦: [],
玉米: [], 玉米: [],
@ -712,7 +736,7 @@ function showOverlayChart(position) {
pop.style.left = position.x + 10 + 'px'; pop.style.left = position.x + 10 + 'px';
pop.style.zIndex = 99; pop.style.zIndex = 99;
} }
const formLandRef = ref([]) const formLandRef = ref([]);
// 获取高标准农田 // 获取高标准农田
function getFarmland() { function getFarmland() {
axios({ axios({
@ -720,10 +744,16 @@ function getFarmland() {
serverAPI.geoserverUrl + serverAPI.geoserverUrl +
'/shuzisannong/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=shuzisannong%3Afarmland&maxFeatures=50&outputFormat=application%2Fjson', '/shuzisannong/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=shuzisannong%3Afarmland&maxFeatures=50&outputFormat=application%2Fjson',
method: 'get', method: 'get',
}).then(res => { })
.then(res => {
console.log('农田：', res); console.log('农田：', res);
formLandRef.value = res.data.features formLandRef.value = res.data.features;
}).catch(err => { }); })
.catch(err => {});
}
//返回
function back() {
removeWms(['huangdaoqu_town'], true);
} }
//接口 //接口
const getArea = (item, index) => { const getArea = (item, index) => {
@ -888,7 +918,7 @@ function areachar() {
xAxis: [ xAxis: [
{ {
type: 'category', type: 'category',
data: ['小麦', '玉米', '大豆', '花生', '蓝莓'], data: ['小麦', '花生', '大豆', '花生', '蓝莓'],
axisLine: { axisLine: {
lineStyle: { lineStyle: {
color: '#C0C4CC', color: '#C0C4CC',
@ -1024,7 +1054,7 @@ function typesof() {
}, },
{ {
// 数据项名称 // 数据项名称
name: '玉米', name: '花生',
value: 56, value: 56,
itemStyle: { itemStyle: {
// 透明度 // 透明度
@ -1221,9 +1251,7 @@ function typesof() {
tooltip: { tooltip: {
formatter: params => { formatter: params => {
if (params.seriesName !== 'mouseoutSeries') { if (params.seriesName !== 'mouseoutSeries') {
return `${params.seriesName return `${params.seriesName}<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color};"></span>`;
}<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color
};"></span>`;
} }
return ''; return '';
}, },
@ -1496,7 +1524,7 @@ function farmland() {
type: 'bar', type: 'bar',
barWidth: 12, barWidth: 12,
stack: 'stack', stack: 'stack',
data: [160, 103, 155, 100, 50, 122, 98], data: [200, 300, 0, 200, 0, 100, 300],
itemStyle: { itemStyle: {
normal: { normal: {
barBorderRadius: 0, barBorderRadius: 0,
@ -1518,7 +1546,7 @@ function farmland() {
type: 'bar', type: 'bar',
barWidth: 12, barWidth: 12,
stack: 'stack', stack: 'stack',
data: [160, 103, 155, 100, 50, 124, 168], data: [200, 300, 200, 100, 0, 100, 300],
itemStyle: { itemStyle: {
normal: { normal: {
barBorderRadius: 0, barBorderRadius: 0,
@ -1540,7 +1568,7 @@ function farmland() {
type: 'bar', type: 'bar',
barWidth: 12, barWidth: 12,
stack: 'stack', stack: 'stack',
data: [160, 103, 155, 100, 50, 45, 321], data: [200, 0, 200, 100, 300, 200, 0],
itemStyle: { itemStyle: {
normal: { normal: {
barBorderRadius: 0, barBorderRadius: 0,
@ -1557,6 +1585,28 @@ function farmland() {
}, },
}, },
}, },
{
name: '花生',
type: 'bar',
barWidth: 12,
stack: 'stack',
data: [0, 0, 200, 100, 300, 200, 0],
itemStyle: {
normal: {
barBorderRadius: 0,
color: new echarts.graphic.LinearGradient(0, 0, 0.9, 0, [
{
offset: 1,
color: 'rgba(4, 247, 227, 0.9)',
},
{
offset: 0,
color: 'rgba(4, 247, 227, 0.25)',
},
]),
},
},
},
], ],
}; };
@ -1566,17 +1616,21 @@ function farmland() {
} }
// 图表点击事件 // 图表点击事件
function ChartClick(item) { function ChartClick(item) {
console.log('item:', item) console.log('item:', item);
// 移除作物 // 移除作物
removeWms(['huangdaoqu_town'], true); removeWms(['huangdaoqu_town'], true);
let layername = 'shuzisannong:farmland'; let layername = 'shuzisannong:farmland';
// 判断是否存在避免重复添加 // 判断是否存在避免重复添加
let cz = false let cz = false;
const layers = viewer.imageryLayers._layers; const layers = viewer.imageryLayers._layers;
for (let f = layers.length - 1; f >= 0; f--) { for (let f = layers.length - 1; f >= 0; f--) {
if (layers[f] && layers[f]._imageryProvider.customName && layers[f]._imageryProvider.customName === layername + 'gbznt') { if (
cz = true layers[f] &&
layers[f]._imageryProvider.customName &&
layers[f]._imageryProvider.customName === layername + 'gbznt'
) {
cz = true;
} }
} }
if (!cz) { if (!cz) {
@ -1584,12 +1638,12 @@ function ChartClick(item) {
addWms(layername, layername + 'gbznt'); addWms(layername, layername + 'gbznt');
} }
// 定位到地块 // 定位到地块
let features = formLandRef.value let features = formLandRef.value;
features.forEach(it => { features.forEach(it => {
console.log('it.properties.name:',it.properties.name) console.log('it.properties.name:', it.properties.name);
console.log('item.name:',item.name) console.log('item.name:', item.name);
if (it.properties.name === item.name) { if (it.properties.name === item.name) {
console.log('dingwei') console.log('dingwei');
viewer.camera.flyTo({ viewer.camera.flyTo({
destination: Cesium.Rectangle.fromDegrees( destination: Cesium.Rectangle.fromDegrees(
it.bbox[0], it.bbox[0],
@ -1600,8 +1654,8 @@ function ChartClick(item) {
duration: 2, duration: 2,
}); });
} }
}) });
flag.value = true;
} }
function ASdivision() { function ASdivision() {
@ -1821,11 +1875,11 @@ function ASdivision() {
colorStops: [ colorStops: [
{ {
offset: 0, offset: 0,
color: 'rgba(255, 225, 104, 0.9)', // 0% 处的颜色 color: 'rgba(4, 247, 227, 0.9)', // 0% 处的颜色
}, },
{ {
offset: 1, offset: 1,
color: 'rgba(255, 225, 104, 0.25)', // 100% 处的颜色 color: 'rgba(4, 247, 227, 0.25)', // 100% 处的颜色
}, },
], ],
}, },
@ -1953,9 +2007,11 @@ $height: calc(100vh - 100px);
height: 25px; height: 25px;
border-radius: 20px; border-radius: 20px;
font-size: 14px; font-size: 14px;
background: linear-gradient(180deg, background: linear-gradient(
180deg,
rgba(16, 111, 111, 1) 0%, 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); border: 1.5px solid rgba(23, 194, 180, 1);
display: flex; display: flex;
justify-content: center; justify-content: center;
@ -2199,7 +2255,7 @@ $height: calc(100vh - 100px);
display: flex; display: flex;
margin-bottom: 10px; margin-bottom: 10px;
&>span:nth-child(1) { & > span:nth-child(1) {
font-weight: 400; font-weight: 400;
letter-spacing: 0px; letter-spacing: 0px;
color: rgba(255, 255, 255, 1); color: rgba(255, 255, 255, 1);
@ -2210,7 +2266,7 @@ $height: calc(100vh - 100px);
margin-right: 10px; margin-right: 10px;
} }
&>span:nth-child(2) { & > span:nth-child(2) {
color: rgba(255, 255, 255, 1); color: rgba(255, 255, 255, 1);
width: 129px; width: 129px;
height: 24px; height: 24px;
@ -2232,8 +2288,10 @@ $height: calc(100vh - 100px);
cursor: pointer; cursor: pointer;
} }
} }
.back_button{ .back_button {
position: absolute; position: absolute;
right: 30%;
top: 20px;
} }
</style> </style>