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

标准农田

Browse Source
This commit is contained in:
伊丽莎白 2023-04-24 16:16:27 +08:00
parent 182ce9dbb6
commit 4db5df3fae
1 changed files with 63 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -17,10 +17,7 @@
<span>作物类型统计-高标准农田</span> <span>作物类型统计-高标准农田</span>
<p> <p>
下载 &nbsp; 下载 &nbsp;
<img <img src="@/assets/icons/svg/downloads.svg" style="width: 14px; height: 14px; cursor: pointer" />
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>
@ -31,25 +28,12 @@
<span>作物类型统计-行政区划</span> <span>作物类型统计-行政区划</span>
<p> <p>
下载 &nbsp; 下载 &nbsp;
<img <img src="@/assets/icons/svg/downloads.svg" style="width: 14px; height: 14px; cursor: pointer" />
src="@/assets/icons/svg/downloads.svg"
style="width: 14px; height: 14px; cursor: pointer"
/>
</p> </p>
</div> </div>
<el-select <el-select popper-class="select_city" @change="selectTab(item)" v-model="value" clearable placeholder="全部">
popper-class="select_city" <el-option v-for="item in Township.arr" :key="item.properties.XZDM" :label="item.properties.XZMC"
@change="selectTab(item)" :value="item.properties.XZDM" />
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>
@ -59,18 +43,11 @@
<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 <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, 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);
@ -734,6 +711,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([])
// 获取高标准农田 // 获取高标准农田
function getFarmland() { function getFarmland() {
axios({ axios({
@ -741,11 +719,10 @@ 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
.catch(err => {}); }).catch(err => { });
} }
//接口 //接口
const getArea = (item, index) => { const getArea = (item, index) => {
@ -812,7 +789,7 @@ const selectTab = () => {
if (value.value == '370211') { if (value.value == '370211') {
getTownships(); getTownships();
classData = [302034, 243990, 42344, 34234, 304235]; classData = [302034, 243990, 42344, 34234, 304235];
} else if(value.value) { } else if (value.value) {
classData = [102034, 173990, 22344, 14234, 104235]; classData = [102034, 173990, 22344, 14234, 104235];
} }
@ -1243,10 +1220,8 @@ function typesof() {
tooltip: { tooltip: {
formatter: params => { formatter: params => {
if (params.seriesName !== 'mouseoutSeries') { if (params.seriesName !== 'mouseoutSeries') {
return `${ return `${params.seriesName
params.seriesName }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color
}<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${
params.color
};"></span>`; };"></span>`;
} }
return ''; return '';
@ -1512,7 +1487,7 @@ function farmland() {
color: 'rgba(255, 255, 255, 1)', color: 'rgba(255, 255, 255, 1)',
fontSize: 14, fontSize: 14,
}, },
data: ['片区一', '片区二', '片区三', '片区四', '片区五','片区六','片区七'], data: ['片区1', '片区2', '片区3', '片区4', '片区5', '片区6', '片区7'],
}, },
series: [ series: [
{ {
@ -1520,7 +1495,7 @@ function farmland() {
type: 'bar', type: 'bar',
barWidth: 12, barWidth: 12,
stack: 'stack', stack: 'stack',
data: [160, 103, 155, 100, 50,122,98], data: [160, 103, 155, 100, 50, 122, 98],
itemStyle: { itemStyle: {
normal: { normal: {
barBorderRadius: 0, barBorderRadius: 0,
@ -1542,7 +1517,7 @@ function farmland() {
type: 'bar', type: 'bar',
barWidth: 12, barWidth: 12,
stack: 'stack', stack: 'stack',
data: [160, 103, 155, 100, 50,124,168], data: [160, 103, 155, 100, 50, 124, 168],
itemStyle: { itemStyle: {
normal: { normal: {
barBorderRadius: 0, barBorderRadius: 0,
@ -1564,7 +1539,7 @@ function farmland() {
type: 'bar', type: 'bar',
barWidth: 12, barWidth: 12,
stack: 'stack', stack: 'stack',
data: [160, 103, 155, 100, 50,45,321], data: [160, 103, 155, 100, 50, 45, 321],
itemStyle: { itemStyle: {
normal: { normal: {
barBorderRadius: 0, barBorderRadius: 0,
@ -1589,12 +1564,43 @@ function farmland() {
useEcharts(farmlandDivIntance, option); useEcharts(farmlandDivIntance, option);
} }
// 图表点击事件 // 图表点击事件
function ChartClick() { function ChartClick(item) {
console.log('item:', item)
// 移除作物 // 移除作物
removeWms(['huangdaoqu_town'], true); removeWms(['huangdaoqu_town'], true);
let layername = 'shuzisannong:farmland'; let layername = 'shuzisannong:farmland';
// 判断是否存在避免重复添加
let cz = false
const layers = viewer.imageryLayers._layers;
for (let f = layers.length - 1; f >= 0; f--) {
if (layers[f] && layers[f]._imageryProvider.customName && layers[f]._imageryProvider.customName === layername + 'gbznt') {
cz = true
}
}
if (!cz) {
// 添加高标准农田服务 // 添加高标准农田服务
addWms(layername, layername + 'gbznt'); addWms(layername, layername + 'gbznt');
}
// 定位到地块
let features = formLandRef.value
features.forEach(it => {
console.log('it.properties.name:',it.properties.name)
console.log('item.name:',item.name)
if (it.properties.name === item.name) {
console.log('dingwei')
viewer.camera.flyTo({
destination: Cesium.Rectangle.fromDegrees(
it.bbox[0],
it.bbox[1],
it.bbox[2],
it.bbox[3]
),
duration: 2,
});
}
})
} }
function ASdivision() { function ASdivision() {
@ -1946,11 +1952,9 @@ $height: calc(100vh - 100px);
height: 25px; height: 25px;
border-radius: 20px; border-radius: 20px;
font-size: 14px; font-size: 14px;
background: linear-gradient( background: linear-gradient(180deg,
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;
@ -2152,7 +2156,10 @@ $height: calc(100vh - 100px);
.bottom_center { .bottom_center {
position: absolute; position: absolute;
left: calc(400px + 20px + 8vw); // left: calc(400px + 20px + 8vw);
left: 0;
right: 0;
margin: auto;
width: calc(100% - (400px * 2) - (10vw * 2)); width: calc(100% - (400px * 2) - (10vw * 2));
min-width: 380px; min-width: 380px;
bottom: 5%; bottom: 5%;
@ -2190,7 +2197,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);
@ -2201,7 +2208,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;