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-07-09 20:38:38 +08:00
parent 744d3920a8
commit d0eea9c22a
340 changed files with 9947 additions and 4147 deletions
Download Patch File Download Diff File Expand all files Collapse all files

300
src/views/meteorological/remoteSense/drought/Drought.vue
View File

@ -97,12 +97,7 @@
/>
</p>
</div>
<el-select
popper-class="select_city"
@change="selectTab(item)"
v-model="value"
placeholder="全部"
>
<el-select popper-class="select_city" v-model="value" placeholder="全部">
<el-option
v-for="item in Township.arr"
:key="item.streetCode"
@ -146,7 +141,11 @@
</div>
<div class="bottom_center">
<TimeLine />
<TimeLine
v-if="dataSource.length > 0"
:dataSource="dataSource"
@dataHandle="handleData"
/>
</div>
<div class="tool">
<span><img src="@/assets/images/LAYER.png" alt="" /></span>
@ -178,32 +177,28 @@
</el-collapse-item>
</el-collapse>
<div id="popup" class="ol-popup">
<div class="pophead" style="width: 100%; height: 20px">
<div class="pophead" style="width: 100%">
<div
id="popup-title"
style="
font: bold 15px sans-serif;
align: left;
position: absolute;
/* top: 5px; */
left: 17px;
color: #fff;
font-size: 20px;
font-weight: 400;
letter-spacing: 1px;
color: rgba(246, 255, 255, 1);
line-height: 42px;
padding-left: 45px;
"
></div>
<a
href="#"
id="popup-closer"
class="ol-popup-closer"
style="color: #8e908c"
></a>
<a href="#" id="popup-closer" class="ol-popup-closer"></a>
</div>
<div id="popup-content" style="padding: 10px">
<div v-for="(item, index) in alterArr" :key="index">
<p>
<div class="perform" v-for="(item, index) in alterArr" :key="index">
<div class="perform_children">
<img src="@/assets/images/icon.png" />
<span>{{ item.type }}</span>
:
<span>{{ Number(item.area).toFixed(2) }}(亩)</span>
</p>
</div>
</div>
</div>
<div id="popup-pagination"></div>
@ -291,7 +286,7 @@
>
<template #default="scope">
<span
style="color: rgba(255, 255, 0, 1); font-weight: 600"
style="color: rgba(255, 168, 8, 0.4); font-weight: 600"
v-if="item.value == '轻度干旱'"
>
{{ scope.row[item.value] }}
@ -338,7 +333,7 @@
>
<template #default="scope">
<span
style="color: rgba(255, 255, 0, 1); font-weight: 600"
style="color: rgba(255, 168, 8, 0.4); font-weight: 600"
v-if="item.value == '轻度干旱'"
>
{{ scope.row[item.value] }}
@ -427,8 +422,8 @@ let checkListdata = ref([]);
let SwitchFlag = ref(true);
let timeArr = ref([]); //年数组
const num = ref(1);
let cunVar = ref(null);
let zhenVar = ref(null);
let dataSource = ref([]);
let oldDatas = ref('');
let alterArr = ref([]);
let regionName = ref('');
let amount = ref([
@ -520,10 +515,6 @@ onMounted(() => {
});
function initonMounted() {
getareaStatisticsDroughts('370211'); //干旱等级面积统计
getproportionOfAreas('370211'); //干旱等级面积占比
geteachFreezingGradeAreas(); //高标准农田干旱等级面积占比
getTownships('370211'); //镇
theTimes(); //年
//地图
initmap();
@ -564,15 +555,12 @@ let content = ref(null);
let popupCloser = ref(null);
let overlay = ref(null);
function initmap() {
// 获取父元素和地图容器
var parentElement = document.querySelector('.centerBox');
var mapContainer = document.getElementById('cesiumContainer');
map = new ol.Map({
target: 'cesiumContainer',
controls: ol.control
.defaults({
attributionOptions: {
collapsed: true,
},
})
.extend([new ol.supermap.control.Logo(), new ol.control.ScaleLine()]),
controls: [],
view: new ol.View({
center: [119.86763411957472, 35.88435182141938],
zoom: 11,
@ -618,19 +606,37 @@ function initmap() {
if (zoom >= 13) {
QueryData(
e,
'huangdaoqu_village@huangdaoqu_bianjie',
'http://36.134.44.75:8090/iserver/services/map-huangdaoqu_bianjie/rest/maps/huangdaoqu_village@huangdaoqu_bianjie',
'CJQY3702112019WGS84@huangdaoqu_bianjie',
'http://36.134.44.75:8090/iserver/services/map-huangdaoqu_bianjie/rest/maps/CJQY3702112019WGS84%40huangdaoqu_bianjie',
'村'
);
} else {
QueryData(
e,
'huangdaoqu_town@huangdaoqu_bianjie',
'http://36.134.44.75:8090/iserver/services/map-huangdaoqu_bianjie/rest/maps/huangdaoqu_town@huangdaoqu_bianjie',
'XJQY3702112019WGS84@huangdaoqu_bianjie',
'http://36.134.44.75:8090/iserver/services/map-huangdaoqu_bianjie/rest/maps/XJQY3702112019WGS84%40huangdaoqu_bianjie',
'镇'
);
}
});
// 监听父元素大小变化
var resizeObserver = new ResizeObserver(function (entries) {
entries.forEach(function (entry) {
// 获取父元素的新大小
var newWidth = entry.contentRect.width;
var newHeight = entry.contentRect.height;
// 调整地图容器的大小
mapContainer.style.width = newWidth + 'px';
mapContainer.style.height = newHeight + 'px';
// 重新渲染地图
map.updateSize();
});
});
// 开始监听父元素大小变化
resizeObserver.observe(parentElement);
}
function QueryData(e, name, url, item) {
var point = new ol.geom.Point(e.coordinate);
@ -654,17 +660,17 @@ function QueryData(e, name, url, item) {
if (item == '镇' && data.result.recordsets[0].features.features[0].properties.XJQYDM) {
let code = data.result.recordsets[0].features.features[0].properties.XJQYDM;
value.value = code;
getTownships();
let arr = [];
Township.brr.forEach(item => {
console.log(item);
if (item.streetCode == code) {
name = item.streetName;
arr.push(item);
}
alterArr.value = arr;
getTownship().then(res => {
res.data.forEach(item => {
if (item.streetCode == code) {
name = item.streetName;
arr.push(item);
}
alterArr.value = arr;
});
alter();
});
alter();
} else if (
item == '村' &&
data.result.recordsets[0].features.features[0].properties.CJQYDM
@ -674,6 +680,7 @@ function QueryData(e, name, url, item) {
getAdministrativeAreaChun({ divisions: code }).then(res => {
res.data.forEach(item => {
console.log(item);
name = item.streetName;
arr.push(item);
});
name = res.data[0].streetName;
@ -786,7 +793,7 @@ const alter = () => {
const cun = () => {
layers = new ol.layer.Tile({
source: new ol.source.TileSuperMapRest({
url: 'http://36.134.44.75:8090/iserver/services/map-huangdaoqu_bianjie/rest/maps/huangdaoqu_village@huangdaoqu_bianjie',
url: 'http://36.134.44.75:8090/iserver/services/map-huangdaoqu_bianjie/rest/maps/CJQY3702112019WGS84%40huangdaoqu_bianjie',
//rasterfunction: new SuperMap.NDVIParameter({ redIndex: 0, nirIndex: 2 }),
cacheEnabled: false,
}),
@ -801,7 +808,7 @@ const cun = () => {
const zhen = () => {
var layer = new ol.layer.Tile({
source: new ol.source.TileSuperMapRest({
url: 'http://36.134.44.75:8090/iserver/services/map-huangdaoqu_bianjie/rest/maps/huangdaoqu_town@huangdaoqu_bianjie',
url: 'http://36.134.44.75:8090/iserver/services/map-huangdaoqu_bianjie/rest/maps/XJQY3702112019WGS84%40huangdaoqu_bianjie',
//rasterfunction: new SuperMap.NDVIParameter({ redIndex: 0, nirIndex: 2 }),
cacheEnabled: false,
}),
@ -904,6 +911,16 @@ watch(
selectTab();
}
);
watch(
() => oldDatas.value,
(val, oldVal) => {
value.value = '370211';
getareaStatisticsDroughts(value.value, oldDatas.value.name); //干旱等级面积统计
getproportionOfAreas(value.value, oldDatas.value.name); //干旱等级面积占比
geteachFreezingGradeAreas(oldDatas.value.name); //高标准农田干旱等级面积占比
getTownships(value.value, oldDatas.value.name); //镇
}
);
let nums = 0;
// 农作物
watch(
@ -958,7 +975,7 @@ const onSubmit = () => {
let brr = [];
currentPage.value = 1;
getlistDroughts({
time: formInline.value.time,
yearMonth: formInline.value.time,
statistical: formInline.value.statistical,
droughtRating: formInline.value.droughtRating,
area: formInline.value.area,
@ -1077,6 +1094,10 @@ const resetForm = () => {
//列表模式-年
const theTimes = () => {
getlistDroughtsYear().then(res => {
oldDatas.value = { name: res.data[0] };
res.data.forEach(item => {
dataSource.value.push({ name: item });
});
timeArr.value = res.data;
formInline.value.time = res.data[0];
onSubmit();
@ -1084,10 +1105,10 @@ const theTimes = () => {
};
//干旱等级面积统计
const getareaStatisticsDroughts = city => {
const getareaStatisticsDroughts = (city, time) => {
areacharLable = ref([]);
areacharPrice = ref([]);
getareaStatisticsDrought({ divisions: city }).then(res => {
getareaStatisticsDrought({ divisions: city, yearMonth: time }).then(res => {
res.data.forEach(item => {
areacharLable.value.push(item.level);
areacharPrice.value.push(item.area);
@ -1096,23 +1117,25 @@ const getareaStatisticsDroughts = city => {
});
};
//干旱等级面积占比
const getproportionOfAreas = city => {
typesofData = ref([]);
tableData = ref([]);
totalArea = ref(0);
getproportionOfArea({ divisions: city }).then(res => {
const getproportionOfAreas = (city, time) => {
let tableArr = ref([]);
getproportionOfArea({ divisions: city, yearMonth: time }).then(res => {
typesofData = ref([]);
totalArea = ref(0);
res.data.forEach(item => {
totalArea.value += Number(item.area);
typesofData.value.push({
name: item.level,
value: Number(item.area).toFixed(2),
});
tableData.value.push({
tableArr.value.push({
date: item.level,
name: `${Number(item.area).toFixed(2)}`,
address: `${(item.percentage * 100).toFixed(2)}%`,
});
});
tableData.value = tableArr.value;
console.log(tableData);
typesof();
});
};
@ -1120,8 +1143,8 @@ const getproportionOfAreas = city => {
// { region: '山东', 湿润: '张三', 适宜: 333, 轻度干旱: 22 ,中度干旱:22,重度干旱:33,area:44},
let excel = ref([{}]);
const geteachFreezingGradeAreas = () => {
geteachFreezingGradeArea().then(res => {
const geteachFreezingGradeAreas = time => {
geteachFreezingGradeArea({ yearMonth: time }).then(res => {
highStandard.forEach((item, index) => {
let town = res.data.map(i => {
if (item === i.region) {
@ -1148,8 +1171,8 @@ const geteachFreezingGradeAreas = () => {
};
//镇
const getTownships = city => {
getTownship({ divisions: city }).then(res => {
const getTownships = (city, time) => {
getTownship({ divisions: city, yearMonth: time }).then(res => {
Township.brr = res.data;
Township.arr = res.data.sort((a, b) => {
return a.streetName.length - b.streetName.length;
@ -1200,7 +1223,7 @@ const getTownships = city => {
});
};
//村
const getadministratives = city => {
const getadministratives = (city, time) => {
dd = {
适宜: [],
湿润: [],
@ -1208,7 +1231,7 @@ const getadministratives = city => {
中度干旱: [],
重度干旱: [],
};
getadministrative({ divisions: city }).then(res => {
getadministrative({ divisions: city, yearMonth: time }).then(res => {
Township.brr = res.data;
let arr = [...res.data];
let brr = [];
@ -1239,76 +1262,14 @@ const getadministratives = city => {
const selectTab = () => {
if (value.value == '370211') {
getTownships(); //更新镇的数据
ASdivision();
getareaStatisticsDroughts('370211');
getproportionOfAreas('370211');
areachar();
typesof();
return;
getTownships(value.value, oldDatas.value.name); //更新镇的数据
getareaStatisticsDroughts(value.value, oldDatas.value.name);
getproportionOfAreas(value.value, oldDatas.value.name);
} else {
getadministratives(value.value);
getareaStatisticsDroughts(value.value);
getproportionOfAreas(value.value);
getadministratives(value.value, oldDatas.value.name);
getareaStatisticsDroughts(value.value, oldDatas.value.name);
getproportionOfAreas(value.value, oldDatas.value.name);
}
// let arr = [...Township.arr];
// console.log('arr:', arr);
// arr.forEach(item => {
// if (item.properties.XZDM == value.value) {
// viewer.camera.flyTo({
// destination: Cesium.Rectangle.fromDegrees(
// item.bbox[0],
// item.bbox[1],
// item.bbox[2],
// item.bbox[3]
// ),
// duration: 2,
// });
// }
// let arr = [...Township.brr];
// let brr = [];
// // console.log(Township.brr);
// arr.forEach(item => {
// if (item.properties.XZDM == value.value) {
// brr.push(item.properties.XZQMC);
// }
// });
// // 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);
// if (townData) {
// // 移除镇高亮
// deleteEntityByName('townLine');
// // 高亮镇边界
// addBoundaryHandle(townData.geometry.coordinates, 'townLine', 'yellow');
// }
// 移除以前村
// removeWms(['aaa']);
// // 添加村
// addvillage(`XZDM=${value.value}`, 'aaa');
// getarea({ time: '2023-04-26', subregion: '1', parent: '黄岛区' }).then(res => {
// let arr = [];
// res.data.map((item, index) => {
// if (item.region == townData.properties.XZMC) {
// arr.push({
// crop: item.type,
// Shape_Area: item.area,
// });
// }
// });
// townZuowu.value = {
// label: arr,
// };
// console.log();
// console.log(arr);
// showOverlayChart({ x: 642, y: 312 });
// });
};
//下载
@ -1434,7 +1395,9 @@ const dowcity = () => {
insectarr.value.push(arr);
exportExcel(insectarr.value, '干旱面积统计表', 'Sheet1');
};
const handleData = oldData => {
oldDatas.value = oldData;
};
/*-------------echarts--------------*/
function areachar() {
const areaDivIntance = echarts.init(areaDiv.value);
@ -3050,12 +3013,12 @@ $height: calc(100vh - 100px);
/*设置弹出框样式*/
.ol-popup {
position: absolute;
background-color: #eeeeee;
// background-color: #eeeeee;
-webkit-filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
padding: 15px;
// padding: 15px;
border-radius: 10px;
border: 1px solid #cccccc;
// border: 1px solid #cccccc;
bottom: 12px;
left: -50px;
min-width: 280px;
@ -3085,22 +3048,59 @@ $height: calc(100vh - 100px);
.ol-popup-closer {
text-decoration: none;
position: absolute;
top: 2px;
top: 11px;
right: 8px;
color: rgba(47, 214, 214, 1) !important;
}
.ol-popup-closer:after {
content: '✖';
}
#popup {
border-radius: 5px;
background: rgba(2, 31, 26, 1);
// display: none;
// justify-content: flex-start;
// align-items: flex-end;
padding: 30px 8px 20px 8px;
color: #fff;
box-shadow: inset 0px 0px 15px 6px rgba(41, 255, 255, 0.5);
border: rgba(41, 255, 255, 1);
.pophead {
background-image: url('@/assets/images/top.png') !important;
background-repeat: no-repeat;
height: 42px;
opacity: 1;
background: linear-gradient(270deg, rgba(19, 92, 98, 0.4) 0%, rgba(19, 92, 98, 1) 100%);
}
#popup-content {
background: url('@/assets/images/bottom.png') no-repeat !important;
background-size: 100% 100% !important;
width: 522px;
height: 205px;
opacity: 1;
background: rgba(2, 31, 26, 0.7);
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
.perform {
width: 50%;
margin: 20px 0;
display: flex;
}
.perform_children {
width: 223px;
height: 28px;
line-height: 28px;
font-size: 14px;
background: linear-gradient(
270deg,
rgba(19, 92, 98, 0) 0%,
rgba(33, 169, 169, 0.36) 100%
);
padding-left: 18px;
display: flex;
background: url('@/assets/images/duande.png') no-repeat !important;
background-size: 100% 100% !important;
.label {
color: rgba(47, 214, 214, 1);
}
span {
color: #fff;
}
}
}
}
#pop {