This commit is contained in:
2023-05-28 21:55:59 +08:00
parent 73cdbe7300
commit 44bdc44559
550 changed files with 2758 additions and 1061 deletions

View File

@ -1,12 +1,12 @@
<template>
<VScaleScreen width="100%" height="100%">
<div class="center">
<Headers />
<navbar v-if="Route.path!=='/login'" @setLayout="setLayout" />
<router-view />
<settings ref="settingRef" />
</div>
</VScaleScreen>
</template>
<script setup>

View File

@ -27,7 +27,7 @@ export function getcropTypeStatistics(query) { //作物类型统计百分比
export function getvillage(query) {
return request({
url: 'crops/administrativeDivisions',
url: 'crops/theTownship',
method: 'get',
params: query
})
@ -63,4 +63,19 @@ export function gethighStandard(query) { //高标准农田
method: 'get',
params: query
})
}
export function gettheTime(query) { //列表模式年
return request({
url: 'crops/theTime',
method: 'get',
params: query
})
}
export function getlistMode(query) { //列表模式table数据
return request({
url: 'crops/listMode',
method: 'get',
params: query
})
}

View File

@ -1,7 +1,7 @@
import request from '@/utils/request'
export function getyears(query) { //干旱等级面积统计
export function getydamageArea(query) { //农作物受灾面积统计
return request({
url: 'equipment/damageArea',
method: 'get',
@ -9,7 +9,7 @@ export function getyears(query) { //干旱等级面积统计
})
}
export function getequipment(query) { //农作物受灾面积占比
export function getproportion(query) { //农作物受灾面积占比
return request({
url: 'equipment/proportion',
method: 'get',
@ -17,10 +17,32 @@ export function getequipment(query) { //农作物受灾面积占比
})
}
export function gethighStandard(query) { //洪涝面积统计高标准农田
export function gethighStandard(query) { //高标准农田
return request({
url: 'equipment/highStandard',
method: 'get',
params: query
})
}
export function gettownInformation(query) { //行政区划 镇
return request({
url: 'equipment/townInformation',
method: 'get',
params: query
})
}
export function getvillage(query) { //行政区划 村
return request({
url: 'equipment/village',
method: 'get',
params: query
})
}
export function getgarrison() {//镇的地图服务
return request({
url: 'http://121.36.229.60:9080/geoserver/shuzisannong/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=shuzisannong%3Ahuangdaoqu_town&maxFeatures=50&outputFormat=application%2Fjson',
method: 'get',
})
}

View File

@ -22,4 +22,27 @@ export function getndPower(query) { //台风
method: 'get',
params: query
})
}
export function gettyphoonDamageSave(query) { //添加
return request({
url: 'equipment/typhoonDamageSave',
method: 'get',
params: query
})
}
export function gettyphoonDamageSelect(query) { //查看
return request({
url: 'equipment/typhoonDamageSelect',
method: 'get',
params: query
})
}
export function gettyphoonDamageDelete(query) { //删除
return request({
url: 'equipment/typhoonDamageDelete',
method: 'get',
params: query
})
}

View File

@ -39,3 +39,9 @@ export function getadministrative(query) { //村
params: query
})
}
export function getgarrison() {//镇的地图服务
return request({
url: 'http://121.36.229.60:9080/geoserver/shuzisannong/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=shuzisannong%3Ahuangdaoqu_town&maxFeatures=50&outputFormat=application%2Fjson',
method: 'get',
})
}

View File

@ -8,7 +8,7 @@
<template v-if="appStore.device !== 'mobile'">
<!-- <header-search id="header-search" class="right-menu-item" /> -->
<el-button class="mode">列表模式</el-button>
<el-button class="mode" @click="tabMode">列表模式</el-button>
<screenfull id="screenfull" class="right-menu-item hover-effect" />
<!-- <el-tooltip content="布局大小" effect="dark" placement="bottom">
@ -63,6 +63,8 @@ const appStore = useAppStore();
const userStore = useUserStore();
const settingsStore = useSettingsStore();
let flag = ref(true);
function toggleSideBar() {
appStore.toggleSideBar();
}
@ -98,6 +100,19 @@ const emits = defineEmits(['setLayout']);
function setLayout() {
emits('setLayout');
}
const tabMode = () => {
flag.value=!flag.value
if(!flag.value){
window.document.querySelector('.centerBox').style.display = 'none';
window.document.querySelector('.tabulation').style.display = 'block'
}else{
window.document.querySelector('.tabulation').style.display = 'none';
window.document.querySelector('.centerBox').style.display = 'block'
}
console.log();
};
</script>
<style lang="scss" scoped>
@ -144,8 +159,8 @@ function setLayout() {
&:focus {
outline: none;
}
.mode{
margin-top: 10px;
.mode {
margin-top: 10px;
}
.right-menu-item {

View File

@ -1,6 +1,8 @@
import { createApp } from 'vue'
import Cookies from 'js-cookie'
import JsonExcel from 'vue-json-excel'
import ElementPlus from 'element-plus'
import locale from 'element-plus/lib/locale/lang/zh-cn' // 中文语言
@ -64,6 +66,7 @@ app.component('FileUpload', FileUpload)
app.component('ImageUpload', ImageUpload)
app.component('ImagePreview', ImagePreview)
app.component('RightToolbar', RightToolbar)
app.component('downloadExcel', JsonExcel)
app.use(router)
app.use(store)

File diff suppressed because it is too large Load Diff

File diff suppressed because one or more lines are too long

View File

@ -31,9 +31,9 @@
<div ref="typesofDiv" class="typesofDiv"></div>
<div class="tableDiv">
<el-table :data="tableData" style="width: 100%">
<el-table-column prop="date" label="类型" />
<el-table-column prop="name" label="面积" />
<el-table-column prop="address" label="占比" />
<el-table-column prop="type" label="类型" />
<el-table-column prop="yesFlooding" label="面积" />
<el-table-column prop="zb" label="占比" />
</el-table>
</div>
</div>
@ -84,8 +84,8 @@
<div class="farmlandDiv">
<el-table :data="highStandardArr" style="width: 100%">
<el-table-column prop="region" label="区域名称" />
<el-table-column prop="area" width="130" label="洪涝面积(亩)" />
<el-table-column prop="dataTime" label="监测时间" />
<el-table-column prop="yesFlooding" width="120" label="洪涝面积(亩)" />
<el-table-column prop="createdTime" label="监测时间" />
</el-table>
</div>
<!-- <div ref="ProgressBarDiv" class="ProgressBar"></div> -->
@ -110,16 +110,20 @@
>
<el-option
v-for="item in Township.arr"
:key="item.properties.XZDM"
:label="item.properties.XZMC"
:value="item.properties.XZDM"
:key="item.subregion"
:label="item.name"
:value="item.subregion"
/>
</el-select>
<div class="ASdivision">
<el-table :data="tableData" style="width: 100%">
<el-table-column prop="date" label="区域名称" />
<el-table-column prop="name" width="130" label="洪涝面积(亩)" />
<el-table-column prop="address" label="监测时间" />
<el-table :data="ZoningData" style="width: 100%">
<el-table-column prop="name" label="区域名称" />
<el-table-column
prop="yesFloodingPercentage"
width="130"
label="洪涝面积(亩)"
/>
<el-table-column prop="createdTime" label="监测时间" />
</el-table>
</div>
</div>
@ -189,14 +193,24 @@
</el-collapse-item>
</el-collapse>
<div id="popup">
<div>{{ clickInfoMap.name }}</div>
<div>{{ clickInfoMap.value }}</div>
<div>
等级
<p>{{ clickInfoMap.grade }}</p>
</div>
<div>
经度
<p>{{ clickInfoMap.lon }}</p>
</div>
<div>
纬度
<p>{{ clickInfoMap.lat }}</p>
</div>
<div class="cancel" @click="hiddenOverlayChart">X</div>
</div>
<div id="pop">
<div v-for="(item, index) in townZuowu.label" :key="index">
<div>{{ item.crop }}</div>
<div>{{ (item.Shape_Area / 666.67).toFixed(2) }} </div>
<div>{{ item.Shape_Area }} </div>
</div>
<div v-if="townZuowu.XZQMC">
<div>村名</div>
@ -214,17 +228,14 @@ import * as echarts from 'echarts';
import TimeLine from '@/components/TimeLine/TimeLine.vue';
// import * as turf from '@turf/turf';
import { useEcharts } from '@/hooks/useEcharts';
import { getarea, getTownship, getvillage, getareas, dow } from '@/api/crops/classify.js';
import {
getyears,
getequipment,
getydamageArea,
getproportion,
gethighStandard,
gettownInformation,
getvillage,
getgarrison,
} from '@/api/meteorological/remoteSense/FloodExtraction.js';
import {
getstatisticsOfTheArea,
getproportionOfArea,
geteachFreezingGradeArea,
} from '@/api/meteorological/remoteSense/freeze.js';
import axios from 'axios';
import 'echarts-gl';
import { downLoadFile } from '@/utils/download.js';
@ -242,16 +253,12 @@ const flag = ref(false);
let leftWraFlag = ref(false);
let rightWraFlag = ref(false);
const checkList = ref(['false']);
let checkListdata = ref([]);
let areacharData = reactive({ lable: [], value: [] }); //
let typesofData = ref([]); //
let totalArea = ref(0); //
let highStandard = ['高标准农田1', '高标准农田2', '高标准农田3'];
let highStandarditem = {
无冻害: [],
轻度冻害: [],
中度冻害: [],
重度冻害: [],
};
let ZoningData = ref([]);
let dic = {
洪涝区: { color: 'rgba(9, 187, 222, 1)', disabled: false },
};
@ -278,6 +285,40 @@ let dd = {
白菜和萝卜: [],
其他: [],
};
watch(
() => checkList.value,
(val, oldVal) => {
if (val.length > oldVal.length) {
//
const newData = val.filter(item => {
const index = oldVal.findIndex(it => it === item);
if (index < 0) {
return item;
}
});
newData.forEach(item => {
switch (item) {
case '洪涝区':
addvillages(2, item);
break;
default:
break;
}
});
} else if (val.length < oldVal.length) {
//
const newData = oldVal.filter(item => {
const index = val.findIndex(it => it === item);
if (index < 0) {
return item;
}
});
newData.forEach(item => {
removeWms([item]);
});
}
}
);
let areatext = '8383894';
//
let tableData = ref([]);
@ -290,18 +331,21 @@ let TypeTime = {
//
onMounted(() => {
getstatisticsOfTheAreas('370211'); //
getproportionOfAreas('370211'); //
getydamageAreas('370211'); //
getproportions('370211'); //
gethighStandards(); //
getaArea(); //
getTownships();
getvillages(); //
gettownInformations('370211');
//
initMap();
areachar();
typesof();
getFarmland();
for (const key in dic) {
if (dic[key].disabled !== true) {
checkListdata.value.push(key);
}
}
checkList.value = checkListdata.value;
let leftWra = document.querySelector('.leftWra');
leftWra ? (leftWra.style.transform = 'translate(-107%,0)') : '';
let rightWra = document.querySelector('.rightWra');
@ -384,6 +428,8 @@ function initMap() {
viewer.cesiumWidget.creditContainer.style.display = 'none';
addWms('shuzisannong:huangdaoqu_town', 'tl');
addvillages(2, '洪涝区');
viewer.camera.flyTo({
destination: Cesium.Rectangle.fromDegrees(119.5091, 35.5671, 120.3285, 36.1455),
duration: 0,
@ -558,6 +604,7 @@ function layerClick() {
//
removeWms(['village_CQL']);
//
console.log(newData.properties.XZDM);
addvillage(
`XZDM=${newData.properties.XZDM}`,
'village_CQL'
@ -574,10 +621,6 @@ function layerClick() {
let info = entitys[na]._info;
// entitys[na].label.show = true
townZuowu.value = info; //
console.log(
townZuowu.value,
'------------------'
);
showOverlayChart(movement.position); // 使
viewer.scene.postRender.addEventListener(
infoWindowPostRender
@ -658,40 +701,8 @@ function villageClick(layers, xy, level, cartographic, movement) {
'villageLine',
'yellow'
);
// townZuowu.value = info//
//
if (newData.properties.XZQDM === '370211104217') {
// console.log('')
const rectangle = Cesium.Rectangle.fromDegrees(
item.bbox[0],
item.bbox[1],
item.bbox[2],
item.bbox[3]
);
const center = Cesium.Rectangle.center(rectangle); //(Cartographic)
let longitude = Cesium.Math.toDegrees(center.longitude); //
let latitude = Cesium.Math.toDegrees(center.latitude);
let info = {
lon: longitude,
lat: latitude,
...item.properties,
// XZQMC
label: [
{ crop: '茶叶', Shape_Area: 2820 },
{ crop: '大豆', Shape_Area: 2767 },
{ crop: '花生', Shape_Area: 62356 },
{ crop: '蓝莓', Shape_Area: 5443 },
{ crop: '地瓜', Shape_Area: 897 },
{ crop: '小麦', Shape_Area: 20111 },
],
};
townZuowu.value = info; //
//
showOverlayChart(movement.position); // 使
viewer.scene.postRender.addEventListener(infoWindowPostRender);
}
} else {
massif(layers, xy, level, cartographic, movement);
}
}
}
@ -700,6 +711,58 @@ function villageClick(layers, xy, level, cartographic, movement) {
}
}
}
function massif(layers, xy, level, cartographic, movement) {
console.log(cartographic);
const index = layers.findIndex(
item =>
item._imageryProvider._layers && item._imageryProvider._layers === 'shuzisannong:result'
);
if (index > -1) {
const providerPoint = layers[index];
//
let provider = providerPoint._imageryProvider;
if (provider && provider.ready && provider._layers && providerPoint.show === true) {
xy = provider.tilingScheme.positionToTileXY(cartographic, level, xy);
let promise = provider.pickFeatures(
xy.x,
xy.y,
level,
cartographic.longitude,
cartographic.latitude
);
if (promise) {
promise.then(data => {
if (data.length > 0) {
let newData = data['0'];
let grade = '';
switch (newData.properties.value) {
case 2:
grade = '洪涝区';
break;
default:
break;
}
let longitudeString = Cesium.Math.toDegrees(cartographic.longitude).toFixed(
6
);
let latitudeString = Cesium.Math.toDegrees(cartographic.latitude).toFixed(
6
);
clickInfoMap.value = {
lon: longitudeString,
lat: latitudeString,
grade: grade,
};
console.log(clickInfoMap.value);
showOverlayChart(movement.position); // 使
viewer.scene.postRender.addEventListener(infoWindowPostRender);
}
});
}
}
}
}
//
// CQL_FILTER:
// customName
@ -777,39 +840,56 @@ function rightFoldClick() {
}
}
function addvillages(value, customName) {
let map2 = new Cesium.WebMapServiceImageryProvider({
url: `http://121.36.229.60:9080/geoserver/shuzisannong/wms`,
layers: 'shuzisannong:result', //
parameters: {
service: 'WMS',
format: 'image/png',
transparent: true, //
// CQL_FILTER: `XZDM=${value.value}`,
CQL_FILTER: `value in (${value})`,
},
});
map2.customName = customName;
viewer.imageryLayers.addImageryProvider(map2);
}
/*------------------接口--------------------*/
//
const getstatisticsOfTheAreas = city => {
const getydamageAreas = city => {
areacharData = reactive({ lable: [], value: [] });
getyears({ divisions: city }).then(res => {
getydamageArea({ divisions: city }).then(res => {
console.log(res.data);
res.data.forEach(item => {
console.log(item);
areacharData.lable.push(item.type);
areacharData.value.push((item.area / 666.67).toFixed(2));
areacharData.value.push(item.yesFlooding);
});
areachar();
});
};
//
const getproportionOfAreas = city => {
const getproportions = city => {
typesofData = ref([]);
tableData = ref([]);
totalArea = ref(0);
getequipment({ divisions: city }).then(res => {
getproportion({ divisions: city }).then(res => {
console.log(res.data);
res.data.forEach(item => {
totalArea.value += Number(item.area);
totalArea.value += Number(item.yesFlooding);
typesofData.value.push({
name: item.type,
value: (item.area / 666.67).toFixed(2),
value: item.yesFlooding,
});
tableData.value.push({
date: item.type,
name: `${(item.area / 666.67).toFixed(2)}`,
address: `${(item.percentage * 100).toFixed(2)}%`,
type: item.type,
yesFlooding: `${item.yesFlooding}`,
zb: `${(item.zb * 100).toFixed(2)}%`,
});
});
console.log(typesofData.value);
console.log(tableData);
typesof();
});
};
@ -817,56 +897,84 @@ const getproportionOfAreas = city => {
//
const gethighStandards = () => {
gethighStandard().then(res => {
res.data.forEach(item => {
item.area = (item.area / 666.67).toFixed(2);
console.log(res.data);
highStandardArr.value = res.data;
res.data.forEach(item => {
highStandardArr.value.push({
region: item.region,
yesFlooding: item.yesFlooding,
createdTime: item.createdTime,
});
});
highStandardArr=res.data
});
};
//
const getTownships = () => {
getTownship().then(res => {
Township.arr = res.features.sort((a, b) => {
return a.properties.XZMC.length - b.properties.XZMC.length;
const gettownInformations = city => {
ZoningData = ref([]);
gettownInformation({ divisions: city }).then(res => {
Township.arr = res.data.sort((a, b) => {
return a.name.length - b.name.length;
});
Township.arr.forEach(item => {
ZoningData.value.push({
name: item.name,
subregion: item.subregion,
yesFloodingPercentage: item.yesFloodingPercentage,
createdTime: item.createdTime,
});
});
Township.arr.unshift({
bbox: [119.5091, 35.5671, 120.3285, 36.1455],
properties: {
XZDM: '370211',
XZMC: '全部',
},
subregion: '370211',
name: '全部',
});
let arr = [...res.features];
let brr = [];
arr.splice(0, 1);
arr.forEach(item => {
brr.push(item.properties.XZMC);
let crr = [];
let drr = [];
Township.arr.forEach(item => {
console.log(item);
if (crr.indexOf(item.name) == -1) {
crr.push(item.name);
drr.push({
name: item.name,
subregion: item.subregion,
area: item.area,
type: item.type,
});
}
});
data.title = [...Object.values(brr)];
Township.arr = drr;
});
};
//
const getvillages = () => {
getvillage().then(res => {
Township.brr = res.features;
});
};
//
const getaArea = () => {
getareas().then(res => {
Township.crr = res.features;
const getvillages = city => {
ZoningData = ref([]);
getvillage({ divisions: city }).then(res => {
Township.brr = res.data;
let arr = [...res.data];
let brr = [];
arr.splice(0, 1);
arr.forEach(item => {
if (brr.indexOf(item.name) == -1) {
brr.push(item.name);
}
ZoningData.value.push({
name: item.name,
subregion: item.subregion,
yesFloodingPercentage: item.yesFloodingPercentage,
createdTime: item.createdTime,
});
});
data.title = [...Object.values(brr)];
data.title.forEach((item, index) => {
let town = res.features.map(i => {
if (item === i.properties.town) {
return i.properties;
let town = res.data.map(i => {
if (item === i.name) {
return i;
}
});
Object.keys(dd).forEach(it => {
const index = town.findIndex(a => a && a.crop === it);
const index = town.findIndex(a => a && a.type === it);
if (index > -1) {
dd[it].push(town[index].Shape_Area);
dd[it].push(1);
} else {
dd[it].push(null);
}
@ -876,91 +984,120 @@ const getaArea = () => {
};
const selectTab = () => {
Township.arr.forEach(item => {
if (item.properties.XZDM == value.value) {
getstatisticsOfTheAreas(value.value); //
getproportionOfAreas(value.value);
}
});
if (value.value == '370211') {
removeWms(['village_CQL']);
XZDM = null;
removeWms(['aaa']);
getTownships();
hiddenOverlayChart();
ASdivision();
areachar();
typesof();
return;
}
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 => {
getgarrison().then(res => {
console.log(res);
res.features.forEach(item => {
if (item.properties.XZDM == value.value) {
brr.push(item.properties.XZQMC);
}
});
// console.log(brr);
data.title = [...Object.values(brr)];
});
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,
deleteEntityByName('townLine');
addBoundaryHandle(item.geometry.coordinates, 'townLine', 'yellow');
viewer.camera.flyTo({
destination: Cesium.Rectangle.fromDegrees(
item.bbox[0],
item.bbox[1],
item.bbox[2],
item.bbox[3]
),
duration: 0,
});
}
});
townZuowu.value = {
label: arr,
};
console.log();
console.log(arr);
showOverlayChart({ x: 642, y: 312 });
});
viewer.camera.flyTo({
destination: Cesium.Rectangle.fromDegrees(119.5091, 35.5671, 120.3285, 36.1455),
duration: 2,
});
deleteEntityByName('townLine');
getvillages(value.value);
getproportions(value.value);
getydamageAreas(value.value);
if (value.value == '370211') {
gettownInformations(value.value);
return;
}
// Township.arr.forEach(item => {
// if (item.properties.XZDM == value.value) {
// getstatisticsOfTheAreas(value.value); //
// getproportionOfAreas(value.value);
// }
// });
// if (value.value == '370211') {
// removeWms(['village_CQL']);
// XZDM = null;
// removeWms(['aaa']);
// getTownships();
// hiddenOverlayChart();
// ASdivision();
// areachar();
// typesof();
// return;
// }
// 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)];
// });
// 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 });
// });
};
//
/*---------------------------*/
const Deta = item => {
getyears({ divisions: value.value, whetherToDownload: true }).then(res => {
getydamageArea({ divisions: value.value, whetherToDownload: true }).then(res => {
downLoadFile(res.data[res.data.length - 1].downloadPath);
});
};
const Deta2 = item => {
getequipment({ divisions: value.value, whetherToDownload: true }).then(res => {
getproportion({ divisions: value.value, whetherToDownload: true }).then(res => {
downLoadFile(res.data[res.data.length - 1].downloadPath);
});
};
@ -970,6 +1107,11 @@ const Deta3 = item => {
downLoadFile(res.data[res.data.length - 1].downloadPath);
});
};
const Deta4 = item => {
gettownInformation({ divisions: value.value, whetherToDownload: true }).then(res => {
downLoadFile(res.data[res.data.length - 1].downloadPath);
});
};
const downloadURL = url => {
let link = document.createElement('a');
@ -982,6 +1124,7 @@ const downloadURL = url => {
/*-------------echarts--------------*/
function areachar() {
const areaDivIntance = echarts.init(areaDiv.value);
console.log(areacharData);
var option = {
textStyle: {
fontSize: 0,
@ -1129,7 +1272,7 @@ function typesof() {
],
title: {
text: '总面积',
subtext: `${(totalArea.value / 666.67).toFixed(2)}`,
subtext: `${totalArea.value}`,
textStyle: {
color: '#f2f2f2',
fontSize: 14,
@ -1339,6 +1482,9 @@ function addWms(layers, customName) {
}
//
function back() {
deleteEntityByName('villageLine');
removeWms(['village_CQL']);
deleteEntityByName('townLine');
delete townZuowu.value.XZQMC;
removeWms(['gbznt'], true);
removeWms(['aaa']);
@ -1449,40 +1595,40 @@ function getAreaFenlei() {
// label = label.join(' ')
// console.log('label:', index, label,fl[item.properties.XZMC],item.properties.XZMC)
//
viewer.entities.add({
name: 'point' + item.properties.XZDM,
position: Cesium.Cartesian3.fromDegrees(longitude, latitude),
point: new Cesium.PointGraphics({
show: true,
pixelSize: 10,
// heightReference: Cesium.HeightReference.NONE,
color: Cesium.Color.fromCssColorString('rgba(255, 255, 26, 1)'),
outlineColor: new Cesium.Color(0, 0, 0, 0),
outlineWidth: 0,
disableDepthTestDistance: Number.POSITIVE_INFINITY, //
heightReference: Cesium.HeightReference.CLAMP_TO_GROUND, //
}),
// label: {
// show: false,
// text: label.join(' '),
// font: '12px sans-serif',
// fillColor: Cesium.Color.WHITE,
// showBackground: true,
// backgroundColor: Cesium.Color.fromCssColorString('rgba(2, 31, 26, 0.6)'),//
// // style: Cesium.LabelStyle.FILL,
// outlineWidth: 3,
// verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
// horizontalOrigin: Cesium.HorizontalOrigin.LEFT,//
// pixelOffset: new Cesium.Cartesian2(-80, -10),
// },
info: {
label: label,
...item.properties,
// 便
lon: longitude,
lat: latitude,
},
});
// viewer.entities.add({
// name: 'point' + item.properties.XZDM,
// position: Cesium.Cartesian3.fromDegrees(longitude, latitude),
// point: new Cesium.PointGraphics({
// show: true,
// pixelSize: 10,
// // heightReference: Cesium.HeightReference.NONE,
// color: Cesium.Color.fromCssColorString('rgba(255, 255, 26, 1)'),
// outlineColor: new Cesium.Color(0, 0, 0, 0),
// outlineWidth: 0,
// disableDepthTestDistance: Number.POSITIVE_INFINITY, //
// heightReference: Cesium.HeightReference.CLAMP_TO_GROUND, //
// }),
// // label: {
// // show: false,
// // text: label.join(' '),
// // font: '12px sans-serif',
// // fillColor: Cesium.Color.WHITE,
// // showBackground: true,
// // backgroundColor: Cesium.Color.fromCssColorString('rgba(2, 31, 26, 0.6)'),//
// // // style: Cesium.LabelStyle.FILL,
// // outlineWidth: 3,
// // verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
// // horizontalOrigin: Cesium.HorizontalOrigin.LEFT,//
// // pixelOffset: new Cesium.Cartesian2(-80, -10),
// // },
// info: {
// label: label,
// ...item.properties,
// // 便
// lon: longitude,
// lat: latitude,
// },
// });
});
})
.catch(err => {});
@ -1515,12 +1661,11 @@ function mbHandle() {
// 
function infoWindowPostRender() {
// let viewer = viewers.value;
if (townZuowu.value && townZuowu.value.lon && townZuowu.value.lat) {
if (clickInfoMap.value.lon && clickInfoMap.value.lat) {
//
const gisPosition = Cesium.Cartesian3.fromDegrees(
Number(townZuowu.value.lon),
Number(townZuowu.value.lat),
Number(clickInfoMap.value.lon),
Number(clickInfoMap.value.lat),
0
); //
var windowPosition = Cesium.SceneTransforms.wgs84ToWindowCoordinates(
@ -1529,7 +1674,7 @@ function infoWindowPostRender() {
);
if (Cesium.defined(windowPosition)) {
const pop = document.getElementById('pop');
const pop = document.getElementById('popup');
if (pop) {
pop.style.top = windowPosition.y - 10 + 'px';
pop.style.left = windowPosition.x + 10 + 'px';
@ -1540,16 +1685,7 @@ function infoWindowPostRender() {
// 
function hiddenOverlayChart() {
delete townZuowu.value.XZQMC;
//
// XZDM = '';
XZQDM = '';
removeWms(['village_CQL']);
// removeWms(['aaa']);
deleteEntityByName('villageLine');
deleteEntityByName('townLine');
const pop = document.getElementById('pop');
const pop = document.getElementById('popup');
if (pop) {
pop.style.display = 'none'; // 
}
@ -1558,15 +1694,13 @@ function hiddenOverlayChart() {
}
//
function showOverlayChart(position) {
if (townZuowu.value.label.length) {
const pop = document.getElementById('pop');
if (pop) {
pop.style.display = 'block';
pop.style.position = 'absolute';
pop.style.top = position.y - 10 + 'px';
pop.style.left = position.x + 10 + 'px';
pop.style.zIndex = 99;
}
const pop = document.getElementById('popup');
if (pop) {
pop.style.display = 'block';
pop.style.position = 'absolute';
pop.style.top = position.y - 10 + 'px';
pop.style.left = position.x + 10 + 'px';
pop.style.zIndex = 99;
}
}
@ -1802,7 +1936,7 @@ $height: calc(100vh - 100px);
flex-direction: column;
padding: 5px 10px 5px 10px;
color: rgba(255, 255, 255, 1);
height: 95%;
height: 87%;
:deep(.el-table--fit) {
height: 100%;
}
@ -2074,24 +2208,48 @@ $height: calc(100vh - 100px);
font-weight: 400;
letter-spacing: 0px;
color: rgba(255, 255, 255, 1);
// margin-top: 20px;
line-height: 24px;
display: flex;
align-items: center;
p {
background: rgba(217, 231, 255, 0.2);
display: flex;
justify-content: center;
align-items: center;
padding: 2px 10px 2px 10px;
width: 140px;
}
}
& > div:nth-child(2) {
font-weight: 400;
letter-spacing: 0px;
color: rgba(255, 255, 255, 1);
width: 129px;
height: 24px;
opacity: 1;
border-radius: 2px;
background: rgba(217, 231, 255, 0.2);
display: flex;
justify-content: center;
align-items: center;
padding: 2px 10px 2px 10px;
// margin-top: 20px;
p {
background: rgba(217, 231, 255, 0.2);
display: flex;
justify-content: center;
align-items: center;
padding: 2px 10px 2px 10px;
width: 140px;
}
}
& > div:nth-child(3) {
font-weight: 400;
letter-spacing: 0px;
color: rgba(255, 255, 255, 1);
display: flex;
align-items: center;
p {
background: rgba(217, 231, 255, 0.2);
display: flex;
justify-content: center;
align-items: center;
padding: 2px 10px 2px 10px;
width: 140px;
}
}
.cancel {
position: absolute;
right: 10px;
@ -2183,4 +2341,7 @@ $height: calc(100vh - 100px);
.el-popper__arrow::before {
background: rgba(41, 255, 255, 0.7) !important;
}
:deep(.el-scrollbar__view el-select-dropdown__list) {
background: #fff;
}
</style>

View File

@ -20,6 +20,7 @@
<div class="leftbottom">
<div class="title">
<span>各干旱等级面积占比</span>
<p @click="Deta2()">
下载 &nbsp;
<img
@ -194,7 +195,7 @@
<div id="pop">
<div v-for="(item, index) in townZuowu.label" :key="index">
<div>{{ item.crop }}</div>
<div>{{ (item.Shape_Area / 666.67).toFixed(2) }} </div>
<div>{{ item.Shape_Area }} </div>
</div>
<div v-if="townZuowu.XZQMC">
<div>村名</div>
@ -223,6 +224,7 @@ import {
import axios from 'axios';
import 'echarts-gl';
import { downLoadFile } from '@/utils/download.js';
import * as xlsx from 'xlsx'; // Vue3
let viewer = ref(null);
const areaDiv = ref(null);
@ -813,6 +815,57 @@ function deleteEntityByName(name) {
}
}
}
// ----------excel
const changeTableHead = (tableData, fieldName) => {
const list = tableData.map(item => {
const obj = {};
for (const k in item) {
if (fieldName[k]) {
obj[fieldName[k]] = item[k];
}
}
return obj;
});
return list;
};
const exportExcel = (
tableData,
// tableData = [
// {
// region: '',
// 湿: '',
// : 333,
// : 22,
// : 22,
// : 33,
// area: 44,
// },
// { index: 1, username: '', password: 444, age: 23 },
// ],
fileName = '用户列表',
pageName = 'Sheet1'
) => {
let fieldNameObj = {
region: '区域名称',
湿润: '湿润',
适宜: '适宜',
轻度干旱: '轻度干旱',
中度干旱: '中度干旱',
重度干旱: '重度干旱',
area: '面积(亩)',
};
const list = changeTableHead(tableData, fieldNameObj);
//
const data = xlsx.utils.json_to_sheet(list);
// 簿
const wb = xlsx.utils.book_new();
// 簿
xlsx.utils.book_append_sheet(wb, data, pageName);
//
xlsx.writeFile(wb, `${fileName}.xlsx`);
};
//
function leftFoldClick() {
@ -893,7 +946,7 @@ const getareaStatisticsDroughts = city => {
getareaStatisticsDrought({ divisions: city }).then(res => {
res.data.forEach(item => {
areacharLable.value.push(item.level);
areacharPrice.value.push((item.area / 666.67).toFixed(2));
areacharPrice.value.push(item.area);
});
areachar();
});
@ -908,11 +961,11 @@ const getproportionOfAreas = city => {
totalArea.value += Number(item.area);
typesofData.value.push({
name: item.level,
value: (item.area / 666.67).toFixed(2),
value: item.area,
});
tableData.value.push({
date: item.level,
name: `${(item.area / 666.67).toFixed(2)}`,
name: `${Number(item.area).toFixed(2)}`,
address: `${(item.percentage * 100).toFixed(2)}%`,
});
});
@ -920,10 +973,11 @@ const getproportionOfAreas = city => {
});
};
//
// { region: '', 湿: '', : 333, : 22 ,:22,:33,area:44},
let excel = ref([{}]);
const geteachFreezingGradeAreas = () => {
geteachFreezingGradeArea().then(res => {
console.log(res.data);
highStandard.forEach((item, index) => {
let town = res.data.map(i => {
if (item === i.region) {
@ -1051,10 +1105,12 @@ const selectTab = () => {
});
}
});
//
//
});
viewer.camera.flyTo({
destination: Cesium.Rectangle.fromDegrees(119.5091, 35.5671, 120.3285, 36.1455),
duration: 2,
});
deleteEntityByName('townLine');
getareaStatisticsDroughts(value.value);
getproportionOfAreas(value.value);
if (value.value == '370211') {
@ -1135,6 +1191,7 @@ const selectTab = () => {
/*---------------------------*/
const Deta = item => {
getareaStatisticsDrought({ divisions: value.value, whetherToDownload: true }).then(res => {
console.log(res);
downLoadFile(res.data[res.data.length - 1].downloadPath);
});
};
@ -1144,18 +1201,90 @@ const Deta2 = item => {
});
};
const Deta3 = item => {
geteachFreezingGradeArea({ divisions: value.value, whetherToDownload: true }).then(res => {
downLoadFile(res.data[res.data.length - 1].downloadPath);
geteachFreezingGradeArea({ divisions: value.value, whetherToDownload: false }).then(res => {
let arr = [];
let brr = [];
res.data.forEach(item => {
if (arr.indexOf(item.region) == -1) {
arr.push(item.region);
}
});
arr.forEach(item => {
brr.push(
Object.create(null, {
regio: {
value: item,
},
})
);
});
brr.forEach(item => {
res.data.map(i => {
if (item.regio === i.region) {
item['region'] = i.region;
item[i.level] = i.area;
}
});
});
exportExcel(brr, '用户列表', 'Sheet1');
});
};
const Deta4 = item => {
if (value.value === '370211') {
getTownship({ divisions: value.value, whetherToDownload: true }).then(res => {
downLoadFile(res.data[res.data.length - 1].downloadPath);
getTownship({ divisions: value.value, whetherToDownload: false }).then(res => {
let arr = [];
let brr = [];
res.data.forEach(item => {
if (arr.indexOf(item.streetName) == -1) {
arr.push(item.streetName);
}
});
arr.forEach(item => {
brr.push(
Object.create(null, {
regio: {
value: item,
},
})
);
});
brr.forEach(item => {
res.data.map(i => {
if (item.regio === i.streetName) {
item['region'] = i.streetName;
item[i.type] = i.area;
}
});
});
exportExcel(brr, '用户列表', 'Sheet1');
});
} else {
getadministrative({ divisions: value.value, whetherToDownload: true }).then(res => {
downLoadFile(res.data[res.data.length - 1].downloadPath);
getadministrative({ divisions: value.value, whetherToDownload: false }).then(res => {
let arr = [];
let brr = [];
res.data.forEach(item => {
if (arr.indexOf(item.streetName) == -1) {
arr.push(item.streetName);
}
});
arr.forEach(item => {
brr.push(
Object.create(null, {
regio: {
value: item,
},
})
);
});
brr.forEach(item => {
res.data.map(i => {
if (item.regio === i.streetName) {
item['region'] = i.streetName;
item[i.type] = i.area;
}
});
});
exportExcel(brr, '用户列表', 'Sheet1');
});
}
};
@ -1308,7 +1437,7 @@ function typesof() {
],
title: {
text: '总面积',
subtext: `${(totalArea.value / 666.67).toFixed(2)}`,
subtext: `${(totalArea.value / 10000).toFixed(2)}`,
textStyle: {
color: '#f2f2f2',
fontSize: 14,
@ -1624,7 +1753,7 @@ function farmland() {
farmlandDivIntance.on('click', function (params) {
console.log(params.name);
});
farmlandDivIntance.on('click', param => ChartClick(param));
// farmlandDivIntance.on('click', param => ChartClick(param));
option && farmlandDivIntance.setOption(option, { notMerge: true, grid: { bottom: 20 } });
useEcharts(farmlandDivIntance, option);
}
@ -1802,13 +1931,13 @@ function ASdivision() {
Township.brr.forEach(item => {
if (item.type == params.seriesName && item.streetName == params.name) {
console.log(item.area);
a = item.area;
a = Number(item.area).toFixed(2);
}
});
return (
params.seriesName +
'<span style="font-size: 14px; color: #f00;">' +
(a / 666.67).toFixed(2) +
a +
'</span>' +
'亩'
);

File diff suppressed because one or more lines are too long

View File

@ -194,7 +194,7 @@
<div id="pop">
<div v-for="(item, index) in townZuowu.label" :key="index">
<div>{{ item.crop }}</div>
<div>{{ (item.Shape_Area / 666.67).toFixed(2) }} </div>
<div>{{ item.Shape_Area }} </div>
</div>
<div v-if="townZuowu.XZQMC">
<div>村名</div>
@ -219,10 +219,12 @@ import {
geteachFreezingGradeArea,
getTownship,
getadministrative,
getgarrison,
} from '@/api/meteorological/remoteSense/freeze.js';
import axios from 'axios';
import 'echarts-gl';
import { downLoadFile } from '@/utils/download.js';
import * as xlsx from 'xlsx'; // Vue3
let viewer = ref(null);
const areaDiv = ref(null);
@ -606,7 +608,6 @@ function layerClick() {
//
removeWms(['village_CQL']);
//
console.log(newData.properties.XZDM);
addvillage(
`XZDM=${newData.properties.XZDM}`,
'village_CQL'
@ -874,7 +875,7 @@ const getstatisticsOfTheAreas = city => {
getstatisticsOfTheArea({ divisions: city }).then(res => {
res.data.forEach(item => {
areacharData.lable.push(item.level);
areacharData.value.push((item.area / 666.67).toFixed(2));
areacharData.value.push(item.area);
});
areachar();
});
@ -890,11 +891,11 @@ const getproportionOfAreas = city => {
totalArea.value += Number(item.area);
typesofData.value.push({
name: item.level,
value: (item.area / 666.67).toFixed(2),
value: item.area,
});
tableData.value.push({
date: item.level,
name: `${(item.area / 666.67).toFixed(2)}`,
name: `${Number(item.area).toFixed(2)}`,
address: `${(item.percentage * 100).toFixed(2)}%`,
});
});
@ -1015,6 +1016,29 @@ const getadministratives = city => {
};
const selectTab = () => {
getgarrison().then(res => {
console.log(res);
res.features.forEach(item => {
if (item.properties.XZDM == value.value) {
deleteEntityByName('townLine');
addBoundaryHandle(item.geometry.coordinates, 'townLine', 'yellow');
viewer.camera.flyTo({
destination: Cesium.Rectangle.fromDegrees(
item.bbox[0],
item.bbox[1],
item.bbox[2],
item.bbox[3]
),
duration: 0,
});
}
});
});
viewer.camera.flyTo({
destination: Cesium.Rectangle.fromDegrees(119.5091, 35.5671, 120.3285, 36.1455),
duration: 2,
});
deleteEntityByName('townLine');
getstatisticsOfTheAreas(value.value); //
getproportionOfAreas(value.value);
getadministratives(value.value);
@ -1102,22 +1126,128 @@ const Deta2 = item => {
});
};
const Deta3 = item => {
geteachFreezingGradeArea({ divisions: value.value, whetherToDownload: true }).then(res => {
downLoadFile(res.data[res.data.length - 1].downloadPath);
geteachFreezingGradeArea({ divisions: value.value, whetherToDownload: false }).then(res => {
let arr = [];
let brr = [];
res.data.forEach(item => {
if (arr.indexOf(item.region) == -1) {
arr.push(item.region);
}
});
arr.forEach(item => {
brr.push(
Object.create(null, {
regio: {
value: item,
},
})
);
});
brr.forEach(item => {
res.data.map(i => {
if (item.regio === i.region) {
item['region'] = i.region;
item[i.level] = i.area;
}
});
});
console.log(brr);
exportExcel(brr, '用户列表', 'Sheet1');
});
};
const Deta4 = item => {
if (value.value === '370211') {
getTownship({ divisions: value.value, whetherToDownload: true }).then(res => {
downLoadFile(res.data[res.data.length - 1].downloadPath);
getTownship({ divisions: value.value, whetherToDownload: false }).then(res => {
let arr = [];
let brr = [];
res.data.forEach(item => {
if (arr.indexOf(item.streetName) == -1) {
arr.push(item.streetName);
}
});
arr.forEach(item => {
brr.push(
Object.create(null, {
regio: {
value: item,
},
})
);
});
brr.forEach(item => {
res.data.map(i => {
if (item.regio === i.streetName) {
item['region'] = i.streetName;
item[i.type] = i.area;
}
});
});
exportExcel(brr, '用户列表', 'Sheet1');
});
} else {
getadministrative({ divisions: value.value, whetherToDownload: true }).then(res => {
downLoadFile(res.data[res.data.length - 1].downloadPath);
getadministrative({ divisions: value.value, whetherToDownload: false }).then(res => {
let arr = [];
let brr = [];
res.data.forEach(item => {
if (arr.indexOf(item.streetName) == -1) {
arr.push(item.streetName);
}
});
arr.forEach(item => {
brr.push(
Object.create(null, {
regio: {
value: item,
},
})
);
});
brr.forEach(item => {
res.data.map(i => {
if (item.regio === i.streetName) {
item['region'] = i.streetName;
item[i.type] = i.area;
}
});
});
exportExcel(brr, '用户列表', 'Sheet1');
});
}
};
// ----------excel
const changeTableHead = (tableData, fieldName) => {
const list = tableData.map(item => {
const obj = {};
for (const k in item) {
if (fieldName[k]) {
obj[fieldName[k]] = item[k];
}
}
return obj;
});
return list;
};
const exportExcel = (tableData, fileName = '用户列表', pageName = 'Sheet1') => {
let fieldNameObj = {
region: '区域名称',
无冻害: '无冻害',
轻度冻害: '轻度冻害',
中度冻害: '中度冻害',
重度冻害: '重度冻害',
area: '面积(亩)',
};
const list = changeTableHead(tableData, fieldNameObj);
//
const data = xlsx.utils.json_to_sheet(list);
// 簿
const wb = xlsx.utils.book_new();
// 簿
xlsx.utils.book_append_sheet(wb, data, pageName);
//
xlsx.writeFile(wb, `${fileName}.xlsx`);
};
/*-------------echarts--------------*/
function areachar() {
const areaDivIntance = echarts.init(areaDiv.value);
@ -1268,7 +1398,7 @@ function typesof() {
],
title: {
text: '总面积',
subtext: `${(totalArea.value / 666.67).toFixed(2)}`,
subtext: `${(totalArea.value / 10000).toFixed(2)}`,
textStyle: {
color: '#f2f2f2',
fontSize: 14,
@ -1560,7 +1690,7 @@ function farmland() {
farmlandDivIntance.on('click', function (params) {
console.log(params.name);
});
farmlandDivIntance.on('click', param => ChartClick(param));
// farmlandDivIntance.on('click', param => ChartClick(param));
option && farmlandDivIntance.setOption(option, { notMerge: true, grid: { bottom: 20 } });
useEcharts(farmlandDivIntance, option);
}
@ -1654,7 +1784,10 @@ function addWms(layers, customName) {
}
//
function back() {
getTownships('370211');
delete townZuowu.value.XZQMC;
deleteEntityByName('townLine');
deleteEntityByName('villageLine');
removeWms(['gbznt'], true);
removeWms(['aaa']);
value.value = '370211';
@ -1736,13 +1869,13 @@ function ASdivision() {
let a = 0;
Township.brr.forEach(item => {
if (item.type == params.seriesName && item.streetName == params.name) {
a = item.area;
a = Number(item.area).toFixed(2)
}
});
return (
params.seriesName +
'<span style="font-size: 14px; color: #f00;">' +
(a / 666.67).toFixed(2) +
a +
'</span>' +
'亩'
);
@ -1879,11 +2012,11 @@ function ASdivision() {
colorStops: [
{
offset: 0,
color: 'rgba(4, 247, 227, 0.9)', // 0%
color: 'rgba(9, 187, 222, 1)', // 0%
},
{
offset: 1,
color: 'rgba(4, 247, 227, 0.25)', // 100%
color: 'rgba(9, 187, 222, 1)', // 100%
},
],
},
@ -1916,11 +2049,11 @@ function ASdivision() {
colorStops: [
{
offset: 0,
color: 'rgba(143, 186, 243, 0.9)', // 0%
color: 'rgba(255, 235, 59, 1)', // 0%
},
{
offset: 1,
color: 'rgba(143, 186, 243, 0.3)', // 100%
color: 'rgba(255, 235, 59, 1)', // 100%
},
],
},
@ -1954,11 +2087,11 @@ function ASdivision() {
colorStops: [
{
offset: 0,
color: 'rgba(4, 247, 227, 0.9)', // 0%
color: 'rgba(234, 165, 93, 1)', // 0%
},
{
offset: 1,
color: 'rgba(4, 247, 227, 0.25)', // 100%
color: 'rgba(234, 165, 93, 1)', // 100%
},
],
},
@ -1992,11 +2125,11 @@ function ASdivision() {
colorStops: [
{
offset: 0,
color: 'rgba(33, 187, 251, 0.9)', // 0%
color: 'rgba(215, 25, 28, 0.8)', // 0%
},
{
offset: 1,
color: 'rgba(33, 187, 251, 0.25)', // 100%
color: 'rgba(215, 25, 28, 0.8)', // 100%
},
],
},