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

263
src/views/meteorological/remoteSense/freeze/Freeze.vue
View File

@ -96,12 +96,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"
@ -145,7 +140,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>
@ -177,32 +176,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>
@ -374,7 +369,6 @@ import {
geteachFreezingGradeArea,
getTownship,
getadministrative,
getgarrison,
getfreezeWarningYear,
getfreezeWarning,
getvillageChun,
@ -416,7 +410,8 @@ let tableNewData = ref([]);
const chartModeDiv = ref(null);
let SwitchFlag = ref(true);
let layers = ref(null); //村
let regionName = ref('');
let dataSource = ref([]);
let oldDatas = ref('');
let alterArr = ref([]);
let amount = ref([
{
@ -479,6 +474,16 @@ watch(
selectTab();
}
);
watch(
() => oldDatas.value,
(val, oldVal) => {
value.value = '370211';
getstatisticsOfTheAreas(value.value, oldDatas.value.name); //冷冻等级面积统计
getproportionOfAreas(value.value, oldDatas.value.name); //冷冻等级面积占比
geteachFreezingGradeAreas(oldDatas.value.name); //高标准农田冷冻等级面积统计
getTownships(value.value, oldDatas.value.name); //镇
}
);
//行政区划数据
var data = {
title: [],
@ -504,20 +509,13 @@ onMounted(() => {
initonMounted();
});
function initonMounted() {
getstatisticsOfTheAreas('370211'); //冷冻等级面积统计
getproportionOfAreas('370211'); //冷冻等级面积占比
geteachFreezingGradeAreas(); //高标准农田冷冻等级面积统计
getTownships('370211'); //镇
theTimes(); //年
//地图
initmap();
areachar();
typesof();
farmland();
// ProgressBar();
ASdivision();
getFarmland();
alter();
for (const key in dic) {
if (dic[key].disabled !== true) {
@ -552,13 +550,7 @@ let map = ref(null);
function initmap() {
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,
@ -604,20 +596,42 @@ 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',
'镇'
);
}
});
}
onUpdated(() => {
// 获取父元素和地图容器
var parentElement = document.querySelector('.centerBox');
var mapContainer = document.getElementById('cesiumContainer');
// 监听父元素大小变化
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);
var param = new ol.supermap.QueryByGeometryParameters({
@ -642,15 +656,17 @@ function QueryData(e, name, url, item) {
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({ divisions: '370211' }).then(res => {
res.data.forEach(item => {
console.log(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
@ -773,7 +789,7 @@ function erase(data) {
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,
}),
@ -788,7 +804,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,
}),
@ -812,19 +828,6 @@ const addwms = name => {
map.addLayer(layer);
};
function getFarmland() {
axios({
url:
serverAPI.geoserverUrl +
'/shuzisannong/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=shuzisannong%3Afarmland&maxFeatures=50&outputFormat=application%2Fjson',
method: 'get',
})
.then(res => {
console.log('农田：', res);
formLandRef.value = res.data.features;
})
.catch(err => {});
}
let nums = 0;
// 农作物
watch(
@ -906,7 +909,7 @@ const onSubmit = () => {
let brr = [];
currentPage.value = 1;
getfreezeWarning({
time: formInline.value.time,
yearMonth: formInline.value.time,
statistical: formInline.value.statistical,
droughtRating: formInline.value.droughtRating,
area: formInline.value.area,
@ -1041,6 +1044,10 @@ const resetForm = () => {
//列表模式-年
const theTimes = () => {
getfreezeWarningYear().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();
@ -1048,10 +1055,10 @@ const theTimes = () => {
};
//冷冻等级面积统计
const getstatisticsOfTheAreas = city => {
const getstatisticsOfTheAreas = (city, time) => {
areacharData.lable = [];
areacharData.value = [];
getstatisticsOfTheArea({ divisions: city }).then(res => {
getstatisticsOfTheArea({ divisions: city, yearMonth: time }).then(res => {
console.log(areacharData.lable, areacharData.value);
res.data.forEach(item => {
areacharData.lable.push(item.level);
@ -1062,31 +1069,31 @@ const getstatisticsOfTheAreas = 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)}%`,
});
});
console.log(typesofData.value);
tableData.value = tableArr.value;
typesof();
});
};
//高标准农田冷冻等级面积统计
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) {
@ -1113,14 +1120,14 @@ const geteachFreezingGradeAreas = () => {
};
//镇
const getTownships = city => {
const getTownships = (city, time) => {
dd = {
无冻害: [],
轻度冻害: [],
中度冻害: [],
重度冻害: [],
};
getTownship({ divisions: city }).then(res => {
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;
@ -1170,14 +1177,14 @@ const getTownships = city => {
});
};
//村
const getadministratives = city => {
const getadministratives = (city, time) => {
dd = {
无冻害: [],
轻度冻害: [],
中度冻害: [],
重度冻害: [],
};
getadministrative({ divisions: city }).then(res => {
getadministrative({ divisions: city, yearMonth: time }).then(res => {
Township.brr = res.data;
let arr = [...res.data];
let brr = [];
@ -1209,19 +1216,13 @@ const getadministratives = city => {
const selectTab = () => {
if (value.value == '370211') {
getstatisticsOfTheAreas(value.value); //冷冻等级面积统计
getproportionOfAreas(value.value);
getTownships(); //更新镇的数据
ASdivision();
areachar();
typesof();
getstatisticsOfTheAreas(value.value, oldDatas.value.name); //冷冻等级面积统计
getproportionOfAreas(value.value, oldDatas.value.name);
getTownships(value.value, oldDatas.value.name); //更新镇的数据
} else {
getstatisticsOfTheAreas(value.value); //冷冻等级面积统计
getproportionOfAreas(value.value);
getadministratives(value.value);
ASdivision();
areachar();
typesof();
getstatisticsOfTheAreas(value.value, oldDatas.value.name); //冷冻等级面积统计
getproportionOfAreas(value.value, oldDatas.value.name);
getadministratives(value.value, oldDatas.value.name);
}
// let arr = [...Township.arr];
@ -1415,6 +1416,9 @@ const exportExcel = (tableData, fileName = '用户列表', pageName = 'Sheet1')
// 生成文件并下载
xlsx.writeFile(wb, `${fileName}.xlsx`);
};
const handleData = oldData => {
oldDatas.value = oldData;
};
/*-------------echarts--------------*/
function areachar() {
@ -1989,7 +1993,7 @@ function chartModes() {
barWidth: 13,
stack: '分类',
itemStyle: {
color: 'rgba(255, 141, 26, 1)',
color: 'rgba(32, 242, 255, 1)',
},
data: 无冻害,
},
@ -1999,7 +2003,7 @@ function chartModes() {
barWidth: 13,
stack: '分类',
itemStyle: {
color: 'rgba(255, 255, 26, 1)',
color: 'rgba(255, 255, 0, 1)',
},
data: 轻度冻害,
},
@ -2009,7 +2013,7 @@ function chartModes() {
barWidth: 13,
stack: '分类',
itemStyle: {
color: 'rgba(255, 201, 148, 1)',
color: 'rgba(255, 168, 8, 1)',
},
data: 中度冻害,
},
@ -2019,7 +2023,7 @@ function chartModes() {
barWidth: 13,
stack: '分类',
itemStyle: {
color: 'rgba(255, 84, 84, 1)',
color: 'rgba(224, 13, 15, 1)',
},
data: 重度冻害,
},
@ -2906,12 +2910,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;
@ -2941,22 +2945,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 {