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-05-05 16:54:23 +08:00
parent 10dde79643
commit 91ebd23059
5 changed files with 88 additions and 152 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -5,19 +5,14 @@
<div class="leftTop"> <div class="leftTop">
<div class="title"> <div class="title">
<span>种植面积时间统计</span> <span>种植面积时间统计</span>
<p <p @click="
@click=" Deta(
Deta( 'https://1912c.oss-cn-beijing.aliyuncs.com/egg-oss-demo/zhongzhimianjishijian.xlsx'
'https://1912c.oss-cn-beijing.aliyuncs.com/egg-oss-demo/zhongzhimianjishijian.xlsx' )
) ">
"
>
下载 &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="areaDiv" class="areaDiv"></div> <div ref="areaDiv" class="areaDiv"></div>
@ -26,18 +21,13 @@
<div class="leftbottom"> <div class="leftbottom">
<div class="title"> <div class="title">
<span>种植面积统计</span> <span>种植面积统计</span>
<p <p @click="
@click=" Deta(
Deta( 'https://1912c.oss-cn-beijing.aliyuncs.com/egg-oss-demo/zhongzhimianji%20.xlsx'
'https://1912c.oss-cn-beijing.aliyuncs.com/egg-oss-demo/zhongzhimianji%20.xlsx' )
) ">
"
>
下载 &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="typesofDiv" class="typesofDiv"></div> <div ref="typesofDiv" class="typesofDiv"></div>
@ -105,34 +95,13 @@
</div> </div>
</div> </div>
<div class="leftFoldDiv" @click="leftFoldClick()"> <div class="leftFoldDiv" @click="leftFoldClick()">
<el-tooltip <el-tooltip class="box-item" :show-arrow="false" :disabled="leftWraFlag" hide-after="0" show-after="200"
class="box-item" effect="dark" content="展开" placement="top">
:show-arrow="false"
:disabled="leftWraFlag"
hide-after="0"
show-after="200"
effect="dark"
content="展开"
placement="top"
>
<img v-if="!leftWraFlag" src="@/assets/images/close1.png" alt="" /> <img v-if="!leftWraFlag" src="@/assets/images/close1.png" alt="" />
</el-tooltip> </el-tooltip>
<el-tooltip <el-tooltip :disabled="!leftWraFlag" :show-arrow="false" class="box-item" show-after="200" hide-after="0"
:disabled="!leftWraFlag" effect="dark" content="收起" placement="top">
:show-arrow="false" <img class="imgrotate" v-if="leftWraFlag" src="@/assets/images/close1.png" alt="" />
class="box-item"
show-after="200"
hide-after="0"
effect="dark"
content="收起"
placement="top"
>
<img
class="imgrotate"
v-if="leftWraFlag"
src="@/assets/images/close1.png"
alt=""
/>
</el-tooltip> </el-tooltip>
</div> </div>
</div> </div>
@ -140,18 +109,13 @@
<div class="rightTop"> <div class="rightTop">
<div class="title"> <div class="title">
<span>种植面积统计-高标准农田</span> <span>种植面积统计-高标准农田</span>
<p <p @click="
@click=" Deta(
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'
'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; 下载 &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>
@ -160,65 +124,29 @@
<div class="rightbottom"> <div class="rightbottom">
<div class="title"> <div class="title">
<span>种植面积统计-行政区划</span> <span>种植面积统计-行政区划</span>
<p <p @click="
@click=" Deta(
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'
'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; 下载 &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>
<div class="rightFoldDiv" @click="rightFoldClick()"> <div class="rightFoldDiv" @click="rightFoldClick()">
<el-tooltip <el-tooltip :disabled="!rightWraFlag" :show-arrow="false" hide-after="0" show-after="200" class="box-item"
:disabled="!rightWraFlag" effect="dark" content="收起" placement="top">
:show-arrow="false"
hide-after="0"
show-after="200"
class="box-item"
effect="dark"
content="收起"
placement="top"
>
<img v-if="rightWraFlag" src="@/assets/images/close1.png" alt="" /> <img v-if="rightWraFlag" src="@/assets/images/close1.png" alt="" />
</el-tooltip> </el-tooltip>
<el-tooltip <el-tooltip :disabled="rightWraFlag" :show-arrow="false" hide-after="0" show-after="200" class="box-item"
:disabled="rightWraFlag" effect="dark" content="展开" placement="top">
:show-arrow="false" <img class="imgrotate" v-if="!rightWraFlag" src="@/assets/images/close1.png" alt="" />
hide-after="0"
show-after="200"
class="box-item"
effect="dark"
content="展开"
placement="top"
>
<img
class="imgrotate"
v-if="!rightWraFlag"
src="@/assets/images/close1.png"
alt=""
/>
</el-tooltip> </el-tooltip>
</div> </div>
</div> </div>
@ -258,7 +186,7 @@
import { ref, onMounted, inject, reactive, watch } from 'vue'; import { ref, onMounted, inject, reactive, watch } from 'vue';
import * as echarts from 'echarts'; import * as echarts from 'echarts';
import TimeLine from '@/components/TimeLine/TimeLine.vue'; import TimeLine from '@/components/TimeLine/TimeLine.vue';
import * as turf from '@turf/turf'; // import * as turf from '@turf/turf';
import { useEcharts } from '@/hooks/useEcharts'; import { useEcharts } from '@/hooks/useEcharts';
import { getarea, getTownship, getvillage, getareas, dow } from '@/api/crops/classify.js'; import { getarea, getTownship, getvillage, getareas, dow } from '@/api/crops/classify.js';
import axios from 'axios'; import axios from 'axios';
@ -746,7 +674,7 @@ function getFarmland() {
console.log('农田：', res); console.log('农田：', res);
formLandRef.value = res.data.features; formLandRef.value = res.data.features;
}) })
.catch(err => {}); .catch(err => { });
} }
let townZuowu = ref({ label: [] }); //镇的作物 let townZuowu = ref({ label: [] }); //镇的作物
@ -764,6 +692,7 @@ function layerClick() {
let alti = viewer.camera.positionCartographic.height; let alti = viewer.camera.positionCartographic.height;
let level = getLevel(alti); let level = getLevel(alti);
const layers = viewer.imageryLayers._layers; const layers = viewer.imageryLayers._layers;
// 筛选出黄岛区服务
const index = layers.findIndex( const index = layers.findIndex(
item => item =>
item._imageryProvider._layers && item._imageryProvider._layers &&
@ -792,12 +721,15 @@ function layerClick() {
if (data.length > 0) { if (data.length > 0) {
let newData = data['0']; let newData = data['0'];
if (newData.properties && newData.properties.XZDM) { if (newData.properties && newData.properties.XZDM) {
console.log(XZDM); console.log('XZDM:', XZDM);
console.log('newData.properties.XZDM:', newData.properties.XZDM);
if (XZDM !== newData.properties.XZDM) { if (XZDM !== newData.properties.XZDM) {
//防止 //防止重复加载
XZDM = newData.properties.XZDM; XZDM = newData.properties.XZDM;
value.value = XZDM; // value.value = XZDM; //
selectTab(); // if (selectTab) {
selectTab(); //
}
let item = newData.data; let item = newData.data;
// 定位 // 定位
viewer.camera.flyTo({ viewer.camera.flyTo({
@ -831,7 +763,7 @@ function layerClick() {
if ( if (
entitys[na]._name && entitys[na]._name &&
entitys[na]._name === entitys[na]._name ===
'point' + newData.properties.XZDM 'point' + newData.properties.XZDM
) { ) {
let info = entitys[na]._info; let info = entitys[na]._info;
// entitys[na].label.show = true // entitys[na].label.show = true
@ -855,7 +787,7 @@ function layerClick() {
XZQDM = ''; XZQDM = '';
} else { } else {
// // 已经有镇了，监听村点击 // // 已经有镇了，监听村点击
villageClick(layers, xy, level, cartographic); villageClick(layers, xy, level, cartographic,movement);
} }
} else { } else {
removeWms(['village_CQL']); removeWms(['village_CQL']);
@ -873,7 +805,7 @@ function layerClick() {
} }
let XZQDM = ''; let XZQDM = '';
// 村点击高亮 // 村点击高亮
function villageClick(layers, xy, level, cartographic) { function villageClick(layers, xy, level, cartographic,movement) {
const index = layers.findIndex( const index = layers.findIndex(
item => item =>
item._imageryProvider._layers && item._imageryProvider._layers &&
@ -949,6 +881,12 @@ function villageClick(layers, xy, level, cartographic) {
], ],
}; };
townZuowu.value = info; //保存数据 townZuowu.value = info; //保存数据
// 展示弹窗
showOverlayChart(movement.position); // 添加地图移动监听：使地图移动弹窗跟着移动
viewer.scene.postRender.addEventListener(
infoWindowPostRender
);
} }
} }
} }
@ -1021,7 +959,7 @@ function leftFoldClick() {
leftWra ? (leftWra.style.transform = 'translate(0,0)') : ''; leftWra ? (leftWra.style.transform = 'translate(0,0)') : '';
} else { } else {
let leftWra = document.querySelector('.leftWra'); let leftWra = document.querySelector('.leftWra');
leftWra ? leftWra.style.transform = 'translate(-107%,0)':''; leftWra ? leftWra.style.transform = 'translate(-107%,0)' : '';
} }
} }
function rightFoldClick() { function rightFoldClick() {
@ -1928,11 +1866,9 @@ 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:${ };"></span>${option.series[params.seriesIndex].pieData.value}`;
params.color
};"></span>${option.series[params.seriesIndex].pieData.value}`;
} }
}, },
}, },
@ -2842,7 +2778,7 @@ function getAreaFenlei() {
}); });
}); });
}) })
.catch(err => {}); .catch(err => { });
} }
let fenleiRef = ref({}); let fenleiRef = ref({});
function mbHandle() { function mbHandle() {
@ -2866,7 +2802,7 @@ function mbHandle() {
fenleiRef.value = town; fenleiRef.value = town;
getAreaFenlei(); getAreaFenlei();
}) })
.catch(err => {}); .catch(err => { });
} }
/*------------------------------------------柱状图--------------------------------------------*/ /*------------------------------------------柱状图--------------------------------------------*/
@ -3086,7 +3022,7 @@ function infoWindowPostRender() {
// 隐藏弹窗 // 隐藏弹窗
function hiddenOverlayChart() { function hiddenOverlayChart() {
// 移除各种高亮 // 移除各种高亮
XZDM = ''; // XZDM = '';
XZQDM = ''; XZQDM = '';
removeWms(['village_CQL']); removeWms(['village_CQL']);
// removeWms(['aaa']); // removeWms(['aaa']);
@ -3131,9 +3067,11 @@ $height: calc(100vh - 100px);
.center { .center {
width: 100%; width: 100%;
height: 100%; height: 100%;
.imgrotate { .imgrotate {
transform: rotate(180deg); transform: rotate(180deg);
} }
.title { .title {
width: 100%; width: 100%;
height: 45px; height: 45px;
@ -3155,11 +3093,9 @@ $height: calc(100vh - 100px);
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
overflow: hidden; overflow: hidden;
background: linear-gradient( background: linear-gradient(180deg,
180deg, rgba(255, 255, 255, 1) 33.33%,
rgba(255, 255, 255, 1) 33.33%, rgba(41, 255, 219, 1) 100%);
rgba(41, 255, 219, 1) 100%
);
-webkit-background-clip: text; -webkit-background-clip: text;
-webkit-text-fill-color: transparent; -webkit-text-fill-color: transparent;
} }
@ -3169,11 +3105,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;
@ -3191,6 +3125,7 @@ $height: calc(100vh - 100px);
background: rgba(2, 31, 26, 0.85); background: rgba(2, 31, 26, 0.85);
box-shadow: inset 0px 0px 15px 6px rgba(41, 255, 255, 0.5); box-shadow: inset 0px 0px 15px 6px rgba(41, 255, 255, 0.5);
transition: transform 1s; transition: transform 1s;
.leftFoldDiv { .leftFoldDiv {
width: 30px; width: 30px;
height: 30px; height: 30px;
@ -3201,6 +3136,7 @@ $height: calc(100vh - 100px);
font-size: 30px; font-size: 30px;
color: #ccc; color: #ccc;
} }
.leftTop { .leftTop {
width: 100%; width: 100%;
display: flex; display: flex;
@ -3261,11 +3197,9 @@ $height: calc(100vh - 100px);
align-items: center; align-items: center;
justify-content: space-around; justify-content: space-around;
opacity: 1; opacity: 1;
background: linear-gradient( background: linear-gradient(90deg,
90deg, rgba(21, 173, 148, 0.1) 0%,
rgba(21, 173, 148, 0.1) 0%, rgba(21, 173, 148, 0) 100%);
rgba(21, 173, 148, 0) 100%
);
div { div {
display: flex; display: flex;
@ -3310,6 +3244,7 @@ $height: calc(100vh - 100px);
background: rgba(2, 31, 26, 0.85); background: rgba(2, 31, 26, 0.85);
box-shadow: inset 0px 0px 15px 6px rgba(41, 255, 255, 0.5); box-shadow: inset 0px 0px 15px 6px rgba(41, 255, 255, 0.5);
transition: transform 1s; transition: transform 1s;
.rightFoldDiv { .rightFoldDiv {
width: 30px; width: 30px;
height: 30px; height: 30px;
@ -3320,6 +3255,7 @@ $height: calc(100vh - 100px);
font-size: 30px; font-size: 30px;
color: #ccc; color: #ccc;
} }
.rightTop { .rightTop {
width: 100%; width: 100%;
height: 40%; height: 40%;
@ -3460,7 +3396,7 @@ $height: calc(100vh - 100px);
// align-items: flex-end; // align-items: flex-end;
padding: 30px 8px 20px 8px; padding: 30px 8px 20px 8px;
& > div:nth-child(1) { &>div: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);
@ -3468,7 +3404,7 @@ $height: calc(100vh - 100px);
line-height: 24px; line-height: 24px;
} }
& > div:nth-child(2) { &>div:nth-child(2) {
color: rgba(255, 255, 255, 1); color: rgba(255, 255, 255, 1);
width: 129px; width: 129px;
height: 24px; height: 24px;
@ -3507,11 +3443,11 @@ $height: calc(100vh - 100px);
cursor: pointer; cursor: pointer;
} }
& > div { &>div {
display: flex; display: flex;
margin-bottom: 10px; margin-bottom: 10px;
& > div:nth-child(1) { &>div: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);
@ -3520,7 +3456,7 @@ $height: calc(100vh - 100px);
margin-right: 10px; margin-right: 10px;
} }
& > div:nth-child(2) { &>div:nth-child(2) {
color: rgba(255, 255, 255, 1); color: rgba(255, 255, 255, 1);
width: 129px; width: 129px;
height: 24px; height: 24px;
@ -3535,14 +3471,14 @@ $height: calc(100vh - 100px);
} }
} }
} }
.back_button { .back_button {
position: absolute; position: absolute;
right: 30%; right: 30%;
top: 20px; top: 20px;
} }
:deep(.el-select__popper.el-popper) { :deep(.el-select__popper.el-popper) {}
}
</style> </style>
<style lang="scss"> <style lang="scss">
.select_city { .select_city {

2
src/views/crops/output/wheat/index.vue
View File

@ -206,7 +206,7 @@
import { ref, onMounted, inject, reactive, watch } from 'vue'; import { ref, onMounted, inject, reactive, watch } from 'vue';
import * as echarts from 'echarts'; import * as echarts from 'echarts';
import TimeLine from '@/components/TimeLine/TimeLine.vue'; import TimeLine from '@/components/TimeLine/TimeLine.vue';
import * as turf from '@turf/turf'; // import * as turf from '@turf/turf';
import { useEcharts } from '@/hooks/useEcharts'; import { useEcharts } from '@/hooks/useEcharts';
import { getarea, getTownship, getvillage, getareas, dow } from '@/api/crops/classify.js'; import { getarea, getTownship, getvillage, getareas, dow } from '@/api/crops/classify.js';
import axios from 'axios'; import axios from 'axios';

2
src/views/crops/site/index.vue
View File

@ -269,7 +269,7 @@
import { ref, onMounted, inject, reactive, watch } from 'vue'; import { ref, onMounted, inject, reactive, watch } from 'vue';
import * as echarts from 'echarts'; import * as echarts from 'echarts';
import TimeLine from '@/components/TimeLine/TimeLine.vue'; import TimeLine from '@/components/TimeLine/TimeLine.vue';
import * as turf from '@turf/turf'; // import * as turf from '@turf/turf';
import { useEcharts } from '@/hooks/useEcharts'; import { useEcharts } from '@/hooks/useEcharts';
import { getarea, getTownship, getvillage, getareas, dow } from '@/api/crops/classify.js'; import { getarea, getTownship, getvillage, getareas, dow } from '@/api/crops/classify.js';
import axios from 'axios'; import axios from 'axios';

2
src/views/index.vue
View File

@ -211,7 +211,7 @@
import { ref, onMounted, inject, reactive, watch } from 'vue'; import { ref, onMounted, inject, reactive, watch } from 'vue';
import * as echarts from 'echarts'; import * as echarts from 'echarts';
import TimeLine from '@/components/TimeLine/TimeLine.vue'; import TimeLine from '@/components/TimeLine/TimeLine.vue';
import * as turf from '@turf/turf'; // import * as turf from '@turf/turf';
import { useEcharts } from '@/hooks/useEcharts'; import { useEcharts } from '@/hooks/useEcharts';
import { getarea, getTownship, getvillage, getareas, dow } from '@/api/crops/classify.js'; import { getarea, getTownship, getvillage, getareas, dow } from '@/api/crops/classify.js';
import axios from 'axios'; import axios from 'axios';

2
src/views/plough/resources/index.vue
View File

@ -175,7 +175,7 @@
import { ref, onMounted, inject, reactive, watch } from 'vue'; import { ref, onMounted, inject, reactive, watch } from 'vue';
import * as echarts from 'echarts'; import * as echarts from 'echarts';
import TimeLine from '@/components/TimeLine/TimeLine.vue'; import TimeLine from '@/components/TimeLine/TimeLine.vue';
import * as turf from '@turf/turf'; // import * as turf from '@turf/turf';
import { useEcharts } from '@/hooks/useEcharts'; import { useEcharts } from '@/hooks/useEcharts';
import { getarea, getTownship, getvillage, getareas, dow } from '@/api/crops/classify.js'; import { getarea, getTownship, getvillage, getareas, dow } from '@/api/crops/classify.js';
import axios from 'axios'; import axios from 'axios';