up
This commit is contained in:
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
@ -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>
|
||||
@ -20,6 +20,7 @@
|
||||
<div class="leftbottom">
|
||||
<div class="title">
|
||||
<span>各干旱等级面积占比</span>
|
||||
|
||||
<p @click="Deta2()">
|
||||
下载
|
||||
<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
@ -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% 处的颜色
|
||||
},
|
||||
],
|
||||
},
|
||||
Reference in New Issue
Block a user