up
This commit is contained in:
@ -169,7 +169,11 @@
|
||||
</el-collapse-item>
|
||||
</el-collapse>
|
||||
<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>
|
||||
@ -181,33 +185,26 @@
|
||||
</div>
|
||||
<div id="pop"></div>
|
||||
<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>
|
||||
<span>{{ item.name }}</span>
|
||||
:
|
||||
<span>{{ item.area }}(亩)</span>
|
||||
</p>
|
||||
</div>
|
||||
<div id="popup-content" style="padding: 30px">
|
||||
<p v-for="(item, index) in alterArr" :key="index">
|
||||
<img src="@/assets/images/icon.png" />
|
||||
<span class="label">{{ item.name }}：</span>
|
||||
<span>{{ item.area }}（亩）</span>
|
||||
</p>
|
||||
</div>
|
||||
<div id="popup-pagination"></div>
|
||||
</div>
|
||||
@ -374,6 +371,7 @@ import * as xlsx from 'xlsx'; // Vue3 版本
|
||||
import { ElMessage } from 'element-plus';
|
||||
import townJson from './town.json';
|
||||
import { useRouter } from 'vue-router';
|
||||
import moment from 'Moment';
|
||||
// import {}
|
||||
|
||||
const router = useRouter();
|
||||
@ -401,14 +399,16 @@ let SwitchFlag = ref(true);
|
||||
let regionName = ref('');
|
||||
let layers = ref(null); //村
|
||||
let alterArr = ref([]);
|
||||
let dataSource = ref([]);
|
||||
let oldDatas = ref('');
|
||||
let highStandard = [
|
||||
'高标准农田1',
|
||||
'高标准农田2',
|
||||
'高标准农田3',
|
||||
'高标准农田4',
|
||||
'高标准农田5',
|
||||
'高标准农田6',
|
||||
'高标准农田7',
|
||||
'高标准农田1.0',
|
||||
'高标准农田2.0',
|
||||
'高标准农田3.0',
|
||||
'高标准农田4.0',
|
||||
'高标准农田5.0',
|
||||
'高标准农田6.0',
|
||||
'高标准农田7.0',
|
||||
];
|
||||
let highStandarditem = {
|
||||
小麦: [],
|
||||
@ -441,6 +441,18 @@ watch(
|
||||
}
|
||||
}
|
||||
);
|
||||
watch(
|
||||
() => oldDatas.value,
|
||||
(val, oldVal) => {
|
||||
console.log(oldDatas);
|
||||
value.value = '370211';
|
||||
getcroppers(value.value, oldDatas.value.name); //作物分类面积请求
|
||||
getcropTypeStatisticss(value.value, oldDatas.value.name); //作物类型统计百分比
|
||||
getvillages(value.value, oldDatas.value.name);
|
||||
getTownships(value.value, oldDatas.value.name);
|
||||
gethighStandards(oldDatas.value.name); //高标准农田
|
||||
}
|
||||
);
|
||||
|
||||
const onSubmit = () => {
|
||||
if (!formInline.value.yearMonth) {
|
||||
@ -1090,19 +1102,16 @@ onMounted(() => {
|
||||
});
|
||||
// 初始化
|
||||
function initonMounted() {
|
||||
getcroppers('370211'); //作物分类面积请求
|
||||
getcropTypeStatisticss('370211'); //作物类型统计百分比
|
||||
theTimes(); //年
|
||||
getaArea(); //面积
|
||||
getTownships('370211');
|
||||
//地图
|
||||
initmap();
|
||||
showDaChangArea();
|
||||
areachar(); //图表
|
||||
typesof(); //图表
|
||||
farmland(); //图表
|
||||
ASdivision(); //图表
|
||||
// getFarmland();
|
||||
gethighStandards(); //高标准农田
|
||||
theTimes(); //年
|
||||
alter();
|
||||
for (const key in dic) {
|
||||
if (dic[key].disabled !== true) {
|
||||
@ -1176,36 +1185,22 @@ function initmap() {
|
||||
var lat = coodinate[1];
|
||||
var view = map.getView();
|
||||
var zoom = map.getView().getZoom();
|
||||
console.log(lon, lat);
|
||||
view.animate({
|
||||
center: [lon, lat],
|
||||
duration: 1000,
|
||||
});
|
||||
console.log(zoom, 'zoom========================');
|
||||
// if (zoom >= 15) {
|
||||
// checkList.value.forEach(item => {
|
||||
// if (layersDic[item]) {
|
||||
// QueryData(
|
||||
// e,
|
||||
// `${layersDic[item].name}@${layersDic[item].setOf}`,
|
||||
// `http://36.134.44.75:8090/iserver/services/map-${layersDic[item].setOf}/rest/maps/${layersDic[item].name}@${layersDic[item].setOf}`,
|
||||
// item
|
||||
// );
|
||||
// }
|
||||
// });
|
||||
// }
|
||||
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',
|
||||
'镇'
|
||||
);
|
||||
}
|
||||
@ -1228,6 +1223,14 @@ function initmap() {
|
||||
// 开始监听父元素大小变化
|
||||
resizeObserver.observe(parentElement);
|
||||
}
|
||||
//创建蒙层，凸显黄岛区域
|
||||
function showDaChangArea() {
|
||||
axios.get('/json/huangdao.json').then(({ data }) => {
|
||||
const fts = new ol.format.GeoJSON().readFeatures(data);
|
||||
const ft = fts[0];
|
||||
addConver(ft.getGeometry().getCoordinates());
|
||||
});
|
||||
}
|
||||
//添加遮罩
|
||||
function addConver(data) {
|
||||
let source = new ol.source.Vector();
|
||||
@ -1264,7 +1267,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,
|
||||
}),
|
||||
@ -1277,7 +1280,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,
|
||||
}),
|
||||
@ -1325,14 +1328,16 @@ function QueryData(e, name, url, item) {
|
||||
value.value = code;
|
||||
getTownships();
|
||||
let arr = [];
|
||||
Township.brr.forEach(item => {
|
||||
if (item.tomeCode == code) {
|
||||
name = item.tomeName;
|
||||
arr.push(item);
|
||||
}
|
||||
getTownship('370211').then(res => {
|
||||
res.data.forEach(item => {
|
||||
if (item.tomeCode == code) {
|
||||
name = item.tomeName;
|
||||
arr.push(item);
|
||||
}
|
||||
});
|
||||
alterArr.value = arr;
|
||||
alter();
|
||||
});
|
||||
alter();
|
||||
} else if (
|
||||
item == '村' &&
|
||||
data.result.recordsets[0].features.features[0].properties.CJQYDM
|
||||
@ -1585,9 +1590,14 @@ function rightFoldClick() {
|
||||
}
|
||||
}
|
||||
|
||||
const handleData = oldData => {
|
||||
oldDatas.value = oldData;
|
||||
};
|
||||
|
||||
//接口
|
||||
//镇
|
||||
const getTownships = city => {
|
||||
const getTownships = (city, time) => {
|
||||
console.log(time);
|
||||
dd = {
|
||||
小麦: [],
|
||||
玉米: [],
|
||||
@ -1600,7 +1610,7 @@ const getTownships = city => {
|
||||
白菜和萝卜: [],
|
||||
其他: [],
|
||||
};
|
||||
getTownship({ divisions: city }).then(res => {
|
||||
getTownship({ divisions: city, yearMonth: time }).then(res => {
|
||||
res.data.forEach((item, i) => {
|
||||
for (let index = 0; index < Object.values(item).length; index++) {
|
||||
if (Object.values(item)[index] == '0.0') {
|
||||
@ -1732,13 +1742,10 @@ const getaArea = () => {
|
||||
};
|
||||
|
||||
//作物分类面积统计
|
||||
const getcroppers = city => {
|
||||
console.log(111);
|
||||
classData = ref([]);
|
||||
namedata = ref([]);
|
||||
console.log(classData);
|
||||
getcropper({ divisions: city }).then(res => {
|
||||
console.log(res.data);
|
||||
const getcroppers = (city, time) => {
|
||||
getcropper({ divisions: city, yearMonth: time }).then(res => {
|
||||
classData = ref([]);
|
||||
namedata = ref([]);
|
||||
res.data.forEach(item => {
|
||||
classData.value.unshift(item.area);
|
||||
namedata.value.unshift(item.name);
|
||||
@ -1747,9 +1754,9 @@ const getcroppers = city => {
|
||||
});
|
||||
};
|
||||
//作物类型统计
|
||||
const getcropTypeStatisticss = city => {
|
||||
Pie3D.arr = [];
|
||||
getcropTypeStatistics({ divisions: city }).then(res => {
|
||||
const getcropTypeStatisticss = (city, time) => {
|
||||
getcropTypeStatistics({ divisions: city, yearMonth: time }).then(res => {
|
||||
Pie3D.arr = [];
|
||||
let arr = [];
|
||||
res.data.forEach(item => {
|
||||
for (let index = 0; index < dictionaryArr.length; index++) {
|
||||
@ -1779,8 +1786,8 @@ const getcropTypeStatisticss = city => {
|
||||
};
|
||||
//高标准农田//highStandarditem
|
||||
let highStandardArr = ref([]);
|
||||
const gethighStandards = () => {
|
||||
gethighStandard().then(res => {
|
||||
const gethighStandards = time => {
|
||||
gethighStandard({ yearMonth: time }).then(res => {
|
||||
highStandardArr.value = res.data;
|
||||
console.log(res.data);
|
||||
highStandard.forEach((item, indexs) => {
|
||||
@ -1792,7 +1799,7 @@ const gethighStandards = () => {
|
||||
Object.keys(dd).forEach(it => {
|
||||
const index = town.findIndex(a => a && a.name === it && Number(a.area) > 0);
|
||||
if (index > -1) {
|
||||
highStandarditem[it].push(100);
|
||||
highStandarditem[it].push(70);
|
||||
} else {
|
||||
highStandarditem[it].push(null);
|
||||
}
|
||||
@ -1804,22 +1811,30 @@ const gethighStandards = () => {
|
||||
|
||||
const selectTab = () => {
|
||||
if (value.value == '370211') {
|
||||
getTownships('370211');
|
||||
getcroppers('370211'); //作物分类面积请求
|
||||
getcropTypeStatisticss('370211'); //作物类型统计百分比
|
||||
getTownships('370211', oldDatas.value.name);
|
||||
getcroppers('370211', oldDatas.value.name); //作物分类面积请求
|
||||
getcropTypeStatisticss('370211', oldDatas.value.name); //作物类型统计百分比
|
||||
return;
|
||||
} else {
|
||||
getcroppers(value.value); //作物分类面积请求
|
||||
getcropTypeStatisticss(value.value); //作物类型统计百分比
|
||||
getvillages(value.value);
|
||||
console.log(oldDatas);
|
||||
|
||||
getcroppers(value.value, oldDatas.value.name); //作物分类面积请求
|
||||
getcropTypeStatisticss(value.value, oldDatas.value.name); //作物类型统计百分比
|
||||
getvillages(value.value, oldDatas.value.name);
|
||||
}
|
||||
};
|
||||
//列表模式-年
|
||||
const theTimes = () => {
|
||||
gettheTime().then(res => {
|
||||
oldDatas.value = { name: res.data[0] };
|
||||
timeArr.value = res.data;
|
||||
formInline.value.yearMonth = res.data[0];
|
||||
getlistModes(res.data[0]);
|
||||
res.data.forEach(item => {
|
||||
dataSource.value.push({ name: item });
|
||||
});
|
||||
console.log(dataSource.value);
|
||||
console.log('1111');
|
||||
});
|
||||
};
|
||||
//列表模式-默认展示
|
||||
@ -2510,6 +2525,72 @@ function farmland() {
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
name: '蓝莓',
|
||||
type: 'bar',
|
||||
barWidth: 12,
|
||||
stack: 'stack',
|
||||
data: highStandarditem.蓝莓,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
barBorderRadius: 0,
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0.9, 0, [
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgba(0, 153, 255, 1)',
|
||||
},
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgba(0, 153, 255, 1)',
|
||||
},
|
||||
]),
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
name: '地瓜',
|
||||
type: 'bar',
|
||||
barWidth: 12,
|
||||
stack: 'stack',
|
||||
data: highStandarditem.地瓜,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
barBorderRadius: 0,
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0.9, 0, [
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgba(255, 18, 18, 1)',
|
||||
},
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgba(255, 18, 18, 1)',
|
||||
},
|
||||
]),
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
name: '其他',
|
||||
type: 'bar',
|
||||
barWidth: 12,
|
||||
stack: 'stack',
|
||||
data: highStandarditem.其他,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
barBorderRadius: 0,
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0.9, 0, [
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgba(166, 224, 255, 1)',
|
||||
},
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgba(166, 224, 255, 1)',
|
||||
},
|
||||
]),
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
@ -3711,12 +3792,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;
|
||||
@ -3746,22 +3827,56 @@ $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-image: url('@/assets/images/bottom.png') !important;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% !important;
|
||||
width: 522px;
|
||||
height: 365px;
|
||||
opacity: 1;
|
||||
background: rgba(2, 31, 26, 0.7);
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
p {
|
||||
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-image: url('@/assets/images/duande.png') !important;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% !important;
|
||||
.label {
|
||||
color: rgba(47, 214, 214, 1);
|
||||
}
|
||||
span {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.back_button {
|
||||
|
||||
@ -112,7 +112,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>
|
||||
@ -375,10 +379,9 @@ let tableItemAll = ref([]);
|
||||
const num = ref(1);
|
||||
let operate = ref(true);
|
||||
const chartModeDiv = ref(null);
|
||||
let cunVar = ref(null);
|
||||
let zhenVar = ref(null);
|
||||
let regionName = ref('');
|
||||
let flags = ref(false);
|
||||
let dataSource = ref([]);
|
||||
let oldDatas = ref('');
|
||||
let amount = ref([
|
||||
{
|
||||
wheatUnitOutputValue: 0,
|
||||
@ -392,23 +395,8 @@ let formInline = ref({
|
||||
droughtRating: '小麦',
|
||||
area: num.value,
|
||||
});
|
||||
//行政区划数据
|
||||
var data = {
|
||||
title: [],
|
||||
};
|
||||
let dd = {
|
||||
小麦: [],
|
||||
玉米: [],
|
||||
大豆: [],
|
||||
地瓜: [],
|
||||
花生: [],
|
||||
蓝莓: [],
|
||||
茶叶: [],
|
||||
马铃薯: [],
|
||||
白菜和萝卜: [],
|
||||
其他: [],
|
||||
};
|
||||
let areatext = '8383894';
|
||||
let layers = ref(null); //村
|
||||
|
||||
|
||||
// 组件挂载完成后执行
|
||||
onMounted(() => {
|
||||
@ -416,16 +404,11 @@ onMounted(() => {
|
||||
});
|
||||
|
||||
function initonMounted() {
|
||||
getwheatTotalYearValues(); //作物产量预估
|
||||
getwheatHeightStandardFarmlands(); //高标准农田
|
||||
getwheatGetAllTownss(); //镇级
|
||||
getparameterEstimationYears(); //年
|
||||
//地图
|
||||
initMap();
|
||||
initmap();
|
||||
farmland();
|
||||
// ProgressBar();
|
||||
ASdivision();
|
||||
getFarmland();
|
||||
}
|
||||
onUpdated(() => {
|
||||
if (localStorage.getItem(router.currentRoute.value.path) == 'false') {
|
||||
@ -434,597 +417,147 @@ onUpdated(() => {
|
||||
document.querySelector('.mode').innerText = '列表模式';
|
||||
}
|
||||
});
|
||||
|
||||
watch(
|
||||
() => oldDatas.value,
|
||||
(val, oldVal) => {
|
||||
value.value = '370211';
|
||||
getwheatTotalYearValues(value.value,oldDatas.value.name); //作物产量预估
|
||||
getwheatHeightStandardFarmlands(value.value,oldDatas.value.name); //高标准农田
|
||||
getwheatGetAllTownss(value.value,oldDatas.value.name); //镇级
|
||||
}
|
||||
);
|
||||
/*-------------地图------------------------*/
|
||||
const mapOption = {
|
||||
url:
|
||||
'http://{s}.tianditu.gov.cn/img_c/wmts?service=wmts&request=GetTile&version=1.0.0' +
|
||||
'&LAYER=img&tileMatrixSet=c&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}' +
|
||||
'&style=default&format=tiles&tk=31091965e263284a501a723b8909f405',
|
||||
layer: 'tdtCva',
|
||||
style: 'default',
|
||||
format: 'tiles',
|
||||
tileMatrixSetID: 'c',
|
||||
subdomains: ['t0', 't1', 't2', 't3', 't4', 't5', 't6', 't7'],
|
||||
tilingScheme: new Cesium.GeographicTilingScheme(),
|
||||
tileMatrixLabels: [
|
||||
'1',
|
||||
'2',
|
||||
'3',
|
||||
'4',
|
||||
'5',
|
||||
'6',
|
||||
'7',
|
||||
'8',
|
||||
'9',
|
||||
'10',
|
||||
'11',
|
||||
'12',
|
||||
'13',
|
||||
'14',
|
||||
'15',
|
||||
'16',
|
||||
'17',
|
||||
'18',
|
||||
'19',
|
||||
],
|
||||
maximumLevel: 18,
|
||||
};
|
||||
Cesium.Ion.defaultAccessToken =
|
||||
'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJiYzcwZmJmNi02MzQ5LTQ1MGEtODgzMy0yZTZiZGExY2MzMGMiLCJpZCI6MTAxOTgsInNjb3BlcyI6WyJhc2wiLCJhc3IiLCJnYyJdLCJpYXQiOjE1ODEzMDgxNTR9.NeJU4yfUi-SnLrNDOBYsQgmiSh3B4axCTi1m84Qw99c';
|
||||
function initMap() {
|
||||
viewer = new Cesium.Viewer('cesiumContainer', {
|
||||
baseLayerPicker: false,
|
||||
shouldAnimate: true, //自动播放
|
||||
infoBox: false, //信息框
|
||||
animation: false, //“动画”窗口小部件提供用于播放，暂停和倒退的按钮，以及当前时间和日期，并由“飞梭环”包围，用于控制动画的速度。cesium示例地图左下角那个
|
||||
timeline: false, //时间轴是用于显示和控制当前场景时间的小部件。
|
||||
geocoder: false, //查找，用于查找地址和地标，以及将照相机悬挂到它们。使用铯离子进行地址解析。,cesium示例地图右上角的放大镜
|
||||
homeButton: false, //主页按钮
|
||||
navigationHelpButton: false, //导航帮助按钮
|
||||
selectionIndicator: false, //原生选择绿框
|
||||
fullscreenButton: false, //右下角的全屏按钮
|
||||
// terrainProvider:new Cesium.createWorldTerrain(),
|
||||
terrainProvider: new Cesium.EllipsoidTerrainProvider({}),
|
||||
sceneModePicker: false, //是否显示投影方式控件
|
||||
contextOptions: {
|
||||
webgl: {
|
||||
alpha: true,
|
||||
},
|
||||
},
|
||||
|
||||
imageryProvider: new Cesium.WebMapTileServiceImageryProvider({
|
||||
...mapOption,
|
||||
let map = ref(null);
|
||||
let container = ref(null);
|
||||
let content = ref(null);
|
||||
let popupCloser = ref(null);
|
||||
let overlay = ref(null);
|
||||
function initmap() {
|
||||
// 获取父元素和地图容器
|
||||
var parentElement = document.querySelector('.center');
|
||||
var mapContainer = document.getElementById('cesiumContainer');
|
||||
map = new ol.Map({
|
||||
target: 'cesiumContainer',
|
||||
controls: [],
|
||||
view: new ol.View({
|
||||
center: [119.86763411957472, 35.88435182141938],
|
||||
zoom: 11,
|
||||
projection: 'EPSG:4326',
|
||||
}),
|
||||
layers: [
|
||||
new ol.layer.Tile({
|
||||
source: new ol.source.Tianditu({
|
||||
layerType: 'img',
|
||||
key: '1d109683f4d84198e37a38c442d68311',
|
||||
}),
|
||||
}),
|
||||
//注记
|
||||
// new ol.layer.Tile({
|
||||
// source: new ol.source.Tianditu({
|
||||
// layerType: 'img',
|
||||
// isLabel: true,
|
||||
// key: '1d109683f4d84198e37a38c442d68311',
|
||||
// }),
|
||||
// }),
|
||||
],
|
||||
});
|
||||
// 去除logo
|
||||
viewer.cesiumWidget.creditContainer.style.display = 'none';
|
||||
//加载地图服务
|
||||
viewer.camera.flyTo({
|
||||
destination: Cesium.Rectangle.fromDegrees(119.5091, 35.5671, 120.3285, 36.1455),
|
||||
duration: 2,
|
||||
});
|
||||
|
||||
// 图层点击事件
|
||||
// layerClick();
|
||||
// 蒙版
|
||||
mbHandle();
|
||||
getAreaFenlei();
|
||||
|
||||
viewer.scene.screenSpaceCameraController.minimumZoomDistance = 450; //相机的高度的最小值
|
||||
viewer.scene.screenSpaceCameraController.maximumZoomDistance = 720000; //相机高度的最大值
|
||||
viewer.scene.screenSpaceCameraController._minimumZoomRate = 30000; // 设置相机缩小时的速率
|
||||
viewer.scene.screenSpaceCameraController._maximumZoomRate = 5906376272000; //设置相机放大时的速率
|
||||
|
||||
cun(); //添加村
|
||||
zhen(); //添加镇
|
||||
addWheelEvent(); //鼠标滚动控制村级矢量显示隐藏
|
||||
addEvent(); //点击事件
|
||||
}
|
||||
|
||||
//鼠标滑轮事件
|
||||
const addWheelEvent = () => {
|
||||
const handler = viewer.scene.preRender.addEventListener(() => {
|
||||
{
|
||||
//从Cesium中获取当前地图瓦片等级
|
||||
if (viewer.camera.positionCartographic.height <= 13000) {
|
||||
cunVar.show = true;
|
||||
} else {
|
||||
cunVar.show = false;
|
||||
zhenVar.show = true;
|
||||
}
|
||||
cun();
|
||||
zhen();
|
||||
//滚轮控制村级矢量
|
||||
map.on('moveend', function (e) {
|
||||
var zoom = map.getView().getZoom(); //获取当前地图的缩放级别
|
||||
if (zoom >= 13) {
|
||||
layers.setVisible(true); //显示图层
|
||||
} else {
|
||||
layers.setVisible(false);
|
||||
}
|
||||
});
|
||||
};
|
||||
map.on('singleclick', function (e) {
|
||||
var coodinate = e.coordinate;
|
||||
var lon = coodinate[0];
|
||||
var lat = coodinate[1];
|
||||
var view = map.getView();
|
||||
var zoom = map.getView().getZoom();
|
||||
console.log(lon, lat);
|
||||
view.animate({
|
||||
center: [lon, lat],
|
||||
duration: 1000,
|
||||
});
|
||||
if (zoom >= 13) {
|
||||
QueryData(
|
||||
e,
|
||||
'CJQY3702112019WGS84@huangdaoqu_bianjie',
|
||||
'http://36.134.44.75:8090/iserver/services/map-huangdaoqu_bianjie/rest/maps/CJQY3702112019WGS84%40huangdaoqu_bianjie',
|
||||
'村'
|
||||
);
|
||||
} else {
|
||||
QueryData(
|
||||
e,
|
||||
'XJQY3702112019WGS84@huangdaoqu_bianjie',
|
||||
'http://36.134.44.75:8090/iserver/services/map-huangdaoqu_bianjie/rest/maps/XJQY3702112019WGS84%40huangdaoqu_bianjie',
|
||||
'镇'
|
||||
);
|
||||
}
|
||||
});
|
||||
// 监听父元素大小变化
|
||||
var resizeObserver = new ResizeObserver(function (entries) {
|
||||
entries.forEach(function (entry) {
|
||||
// 获取父元素的新大小
|
||||
var newWidth = entry.contentRect.width;
|
||||
var newHeight = entry.contentRect.height;
|
||||
|
||||
// 调整地图容器的大小
|
||||
mapContainer.style.width = newWidth + 'px';
|
||||
mapContainer.style.height = newHeight + 'px';
|
||||
|
||||
// 重新渲染地图
|
||||
map.updateSize();
|
||||
});
|
||||
});
|
||||
// 开始监听父元素大小变化
|
||||
resizeObserver.observe(parentElement);
|
||||
}
|
||||
|
||||
const cun = () => {
|
||||
var shp = new Cesium.WebMapServiceImageryProvider({
|
||||
url: serverAPI.geoserverUrl + `/map-huangdaoqu_village/wms111/`,
|
||||
layers: 'huangdaoqu_village@huangdaoqu_village',
|
||||
tileWidth: '256', //图片宽高
|
||||
tileHeight: '256', //图片宽高
|
||||
//STYLES: 'landmarks',
|
||||
//SLD_BODY: yanshi,
|
||||
enablePickFeatures: true, //是否允许点击
|
||||
parameters: {
|
||||
service: 'WMS',
|
||||
format: 'image/png',
|
||||
srs: 'EPSG:4326',
|
||||
VERSION: '1.1.1',
|
||||
transparent: true, //是否透明
|
||||
exceptions: 'application/vnd.ogc.se_inimage',
|
||||
},
|
||||
layers = new ol.layer.Tile({
|
||||
source: new ol.source.TileSuperMapRest({
|
||||
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,
|
||||
}),
|
||||
name: 'huangdaoqu_village',
|
||||
projection: 'EPSG:4326', //3857
|
||||
zIndex: 9999,
|
||||
});
|
||||
cunVar = viewer.imageryLayers.addImageryProvider(shp);
|
||||
cunVar.show = false;
|
||||
map.addLayer(layers);
|
||||
};
|
||||
|
||||
const zhen = () => {
|
||||
var shp = new Cesium.WebMapServiceImageryProvider({
|
||||
url: serverAPI.geoserverUrl + '/map-huangdaoqu_town/wms111/',
|
||||
layers: 'huangdaoqu_town@huangdaoqu_town',
|
||||
tileWidth: '256', //图片宽高
|
||||
tileHeight: '256', //图片宽高
|
||||
//STYLES: 'landmarks',
|
||||
//SLD_BODY: yanshi,
|
||||
enablePickFeatures: true, //是否允许点击
|
||||
parameters: {
|
||||
service: 'WMS',
|
||||
format: 'image/png',
|
||||
srs: 'EPSG:4326',
|
||||
VERSION: '1.1.1',
|
||||
transparent: true, //是否透明
|
||||
exceptions: 'application/vnd.ogc.se_inimage',
|
||||
},
|
||||
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/XJQY3702112019WGS84%40huangdaoqu_bianjie',
|
||||
//rasterfunction: new SuperMap.NDVIParameter({ redIndex: 0, nirIndex: 2 }),
|
||||
cacheEnabled: false,
|
||||
}),
|
||||
projection: 'EPSG:4326', //3857
|
||||
zIndex: 9999,
|
||||
});
|
||||
zhenVar = viewer.imageryLayers.addImageryProvider(shp);
|
||||
map.addLayer(layer);
|
||||
};
|
||||
|
||||
const addEvent = () => {
|
||||
let handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
|
||||
handler.setInputAction(event => {
|
||||
// event.position 是鼠标获取的屏幕坐标，也就是2D笛卡尔点（Cartesian2）
|
||||
// 屏幕坐标转为世界坐标
|
||||
let cartesian = viewer.scene.globe.pick(
|
||||
viewer.camera.getPickRay(event.position),
|
||||
viewer.scene
|
||||
);
|
||||
// 世界坐标转换为弧度
|
||||
let ellipsoid = viewer.scene.globe.ellipsoid;
|
||||
let cartographic = ellipsoid.cartesianToCartographic(cartesian);
|
||||
// 弧度转换为经纬度
|
||||
let lon = Cesium.Math.toDegrees(cartographic.longitude); // 经度
|
||||
let lat = Cesium.Math.toDegrees(cartographic.latitude); // 纬度
|
||||
// console.log(lon ,lat)
|
||||
|
||||
//选择feature
|
||||
viewer.selectedEntity = undefined;
|
||||
var pickRay = viewer.camera.getPickRay(event.position);
|
||||
var featuresPromise = viewer.imageryLayers.pickImageryLayerFeatures(pickRay, viewer.scene);
|
||||
// 用 async 函数包装事件处理逻辑
|
||||
(async () => {
|
||||
if (!Cesium.defined(featuresPromise)) {
|
||||
console.log('No features picked.');
|
||||
} else {
|
||||
try {
|
||||
// 使用 await 处理异步结果
|
||||
const features = await featuresPromise;
|
||||
if (!features[features.length - 1].properties.XZQDM) {
|
||||
value.value = features[features.length - 1].properties.XZDM;
|
||||
regionName.value = features[features.length - 1].properties.XZMC;
|
||||
getwheatGetAllTowns({ divisions: value.value }).then(res => {
|
||||
let arr = [];
|
||||
res.data.forEach(item => {
|
||||
if (item.subName == features[features.length - 1].properties.XZMC) {
|
||||
arr.push(item);
|
||||
}
|
||||
});
|
||||
clickInfoMap.value = {
|
||||
info: arr,
|
||||
lon: lon,
|
||||
lat: lat,
|
||||
};
|
||||
});
|
||||
selectTab();
|
||||
} else {
|
||||
// value.value = features[features.length - 1].properties.XZDM;
|
||||
// regionName.value = features[features.length - 1].properties.XZQMC;
|
||||
// getvillage({
|
||||
// divisions: features[features.length - 1].properties.XZDM,
|
||||
// }).then(res => {
|
||||
// let arr = [];
|
||||
// res.data.forEach(item => {
|
||||
// if (
|
||||
// item.tomeName == features[features.length - 1].properties.XZQMC
|
||||
// ) {
|
||||
// arr.push(item);
|
||||
// }
|
||||
// });
|
||||
// clickInfoMap.value = {
|
||||
// info: arr,
|
||||
// lon: lon,
|
||||
// lat: lat,
|
||||
// };
|
||||
// });
|
||||
}
|
||||
showOverlayChart(event.position); // 添加地图移动监听：使地图移动弹窗跟着移动
|
||||
viewer.scene.postRender.addEventListener(infoWindowPostRender);
|
||||
// This function is called asynchronously when the list of picked features is available.
|
||||
} catch (error) {
|
||||
console.error('Error occurred:', error);
|
||||
}
|
||||
}
|
||||
})();
|
||||
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
|
||||
const addwms = name => {
|
||||
let layer = new ol.layer.Tile({
|
||||
source: new ol.source.TileSuperMapRest({
|
||||
// url: 'http://36.134.44.75:8090/iserver/services/map-huangdaoqu_village/rest/maps/huangdaoqu_village@huangdaoqu_village',
|
||||
url: serverAPI.geoserverUrl + `/map-${name.setOf}/rest/maps/${name.name}@${name.setOf}`,
|
||||
//rasterfunction: new SuperMap.NDVIParameter({ redIndex: 0, nirIndex: 2 }),
|
||||
cacheEnabled: false,
|
||||
}),
|
||||
name: name.name,
|
||||
projection: 'EPSG:4326', //3857
|
||||
});
|
||||
map.addLayer(layer);
|
||||
};
|
||||
|
||||
// data数据数组
|
||||
// name实体名称，方便以后删除
|
||||
// color实体颜色
|
||||
function addBoundaryHandle(data, name, color) {
|
||||
data.forEach(item => {
|
||||
let arr = [];
|
||||
item[0].forEach(mem => {
|
||||
arr.push(mem[0]);
|
||||
arr.push(mem[1]);
|
||||
});
|
||||
viewer.entities.add({
|
||||
name: name,
|
||||
polyline: {
|
||||
positions: Cesium.Cartesian3.fromDegreesArray(arr),
|
||||
width: 6,
|
||||
// material: new Cesium.PolylineDashMaterialProperty({//虚线
|
||||
material: new Cesium.PolylineGlowMaterialProperty({
|
||||
//光晕
|
||||
glowPower: 0.2,
|
||||
color: color
|
||||
? Cesium.Color.fromCssColorString(color)
|
||||
: Cesium.Color.fromBytes(250, 128, 114), //#FA8072
|
||||
}),
|
||||
// followSurface: false, //是否贴着地表
|
||||
clampToGround: true, //贴地
|
||||
},
|
||||
});
|
||||
});
|
||||
}
|
||||
function getLevel(height) {
|
||||
if (height > 48000000) {
|
||||
return 0;
|
||||
} else if (height > 24000000) {
|
||||
return 1;
|
||||
} else if (height > 12000000) {
|
||||
return 2;
|
||||
} else if (height > 6000000) {
|
||||
return 3;
|
||||
} else if (height > 3000000) {
|
||||
return 4;
|
||||
} else if (height > 1500000) {
|
||||
return 5;
|
||||
} else if (height > 750000) {
|
||||
return 6;
|
||||
} else if (height > 375000) {
|
||||
return 7;
|
||||
} else if (height > 187500) {
|
||||
return 8;
|
||||
} else if (height > 93750) {
|
||||
return 9;
|
||||
} else if (height > 46875) {
|
||||
return 10;
|
||||
} else if (height > 23437.5) {
|
||||
return 11;
|
||||
} else if (height > 11718.75) {
|
||||
return 12;
|
||||
} else if (height > 5859.38) {
|
||||
return 13;
|
||||
} else if (height > 2929.69) {
|
||||
return 14;
|
||||
} else if (height > 1464.84) {
|
||||
return 15;
|
||||
} else if (height > 732.42) {
|
||||
return 16;
|
||||
} else if (height > 366.21) {
|
||||
return 17;
|
||||
} else {
|
||||
return 18;
|
||||
}
|
||||
}
|
||||
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 townZuowu = ref({ label: [] }); //镇的作物
|
||||
let XZDM = '';
|
||||
let cartesians = ref([]);
|
||||
// 图层点击事件
|
||||
function layerClick() {
|
||||
var handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas);
|
||||
handler.setInputAction(function (movement) {
|
||||
var ray = viewer.camera.getPickRay(movement.position);
|
||||
var ellipsoid = viewer.scene.globe.ellipsoid; // 将屏幕坐标转为地理坐标
|
||||
var cartesian = viewer.scene.globe.pick(ray, viewer.scene);
|
||||
cartesians = cartesian;
|
||||
if (cartesian) {
|
||||
let cartographic = Cesium.Cartographic.fromCartesian(cartesian);
|
||||
if (cartographic) {
|
||||
let xy = new Cesium.Cartesian2();
|
||||
let alti = viewer.camera.positionCartographic.height;
|
||||
let level = getLevel(alti);
|
||||
const layers = viewer.imageryLayers._layers;
|
||||
const index = layers.findIndex(
|
||||
item =>
|
||||
item._imageryProvider._layers &&
|
||||
item._imageryProvider._layers === 'shuzisannong:huangdaoqu_town'
|
||||
);
|
||||
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'];
|
||||
if (newData.properties && newData.properties.XZDM) {
|
||||
if (XZDM !== newData.properties.XZDM) {
|
||||
//防止
|
||||
XZDM = newData.properties.XZDM;
|
||||
value.value = XZDM; //
|
||||
let item = newData.data;
|
||||
// 定位
|
||||
viewer.camera.flyTo({
|
||||
destination: Cesium.Rectangle.fromDegrees(
|
||||
item.bbox[0],
|
||||
item.bbox[1],
|
||||
item.bbox[2],
|
||||
item.bbox[3]
|
||||
),
|
||||
duration: 2,
|
||||
});
|
||||
// 移除高亮
|
||||
deleteEntityByName('townLine');
|
||||
// 高亮边界
|
||||
addBoundaryHandle(
|
||||
item.geometry && item.geometry.coordinates,
|
||||
'townLine',
|
||||
'yellow'
|
||||
);
|
||||
// 移除以前的
|
||||
removeWms(['village_CQL']);
|
||||
// 添加新的
|
||||
// addvillage(
|
||||
// `XZDM=${newData.properties.XZDM}`,
|
||||
// 'village_CQL'
|
||||
// );
|
||||
let entitys = viewer.entities._entities._array;
|
||||
insectarr.value.forEach(item => {
|
||||
for (var na = entitys.length - 1; na >= 0; na--) {
|
||||
if (newData.properties.XZDM == item.subregion) {
|
||||
clickInfoMap.value = item;
|
||||
let info = entitys[na]._info;
|
||||
|
||||
if (cartesian) {
|
||||
let cartographic =
|
||||
ellipsoid.cartesianToCartographic(
|
||||
cartesian
|
||||
);
|
||||
let longitudeString =
|
||||
Cesium.Math.toDegrees(
|
||||
cartographic.longitude
|
||||
).toFixed(6);
|
||||
let latitudeString =
|
||||
Cesium.Math.toDegrees(
|
||||
cartographic.latitude
|
||||
).toFixed(6);
|
||||
townZuowu.value = {
|
||||
lon: longitudeString,
|
||||
lat: latitudeString,
|
||||
};
|
||||
}
|
||||
showOverlayChart(movement.position); // 添加地图移动监听：使地图移动弹窗跟着移动
|
||||
viewer.scene.postRender.addEventListener(
|
||||
infoWindowPostRender
|
||||
);
|
||||
} else {
|
||||
// if (entitys[na].label) {
|
||||
// entitys[na].label.show = false
|
||||
// }
|
||||
}
|
||||
}
|
||||
});
|
||||
// 显示该镇的种植结构
|
||||
for (var na = entitys.length - 1; na >= 0; na--) {
|
||||
if (
|
||||
entitys[na]._name &&
|
||||
entitys[na]._name ===
|
||||
'point' + newData.properties.XZDM
|
||||
) {
|
||||
let info = entitys[na]._info;
|
||||
// entitys[na].label.show = true
|
||||
townZuowu.value = info; //保存数据
|
||||
showOverlayChart(movement.position); // 添加地图移动监听：使地图移动弹窗跟着移动
|
||||
viewer.scene.postRender.addEventListener(
|
||||
infoWindowPostRender
|
||||
);
|
||||
} else {
|
||||
// if (entitys[na].label) {
|
||||
// entitys[na].label.show = false
|
||||
// }
|
||||
}
|
||||
}
|
||||
// 移除村高亮
|
||||
// deleteEntityByName('villageLine');
|
||||
XZQDM = '';
|
||||
} else {
|
||||
// // 已经有镇了，监听村点击
|
||||
// villageClick(layers, xy, level, cartographic);
|
||||
}
|
||||
} else {
|
||||
removeWms(['village_CQL']);
|
||||
// 移除框框
|
||||
hiddenOverlayChart(); // 清除监听事件
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
|
||||
}
|
||||
let XZQDM = '';
|
||||
// 村点击高亮
|
||||
function villageClick(layers, xy, level, cartographic) {
|
||||
const index = layers.findIndex(
|
||||
item =>
|
||||
item._imageryProvider._layers &&
|
||||
item._imageryProvider._layers === 'shuzisannong:huangdaoqu_village'
|
||||
);
|
||||
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'];
|
||||
if (newData.properties && newData.properties.XZQDM) {
|
||||
if (XZQDM !== newData.properties.XZQDM) {
|
||||
//防止
|
||||
XZQDM = newData.properties.XZQDM;
|
||||
let item = newData.data;
|
||||
// 移除高亮
|
||||
deleteEntityByName('villageLine');
|
||||
// 高亮边界
|
||||
addBoundaryHandle(
|
||||
item.geometry && item.geometry.coordinates,
|
||||
'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; //保存数据
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// 添加村
|
||||
// CQL_FILTER:筛选的语句
|
||||
// customName地图服务自定义属性名
|
||||
function addvillage(CQL_FILTER, customName) {
|
||||
let map2 = new Cesium.WebMapServiceImageryProvider({
|
||||
url: `${serverAPI.geoserverUrl}/shuzisannong/wms`,
|
||||
layers: 'shuzisannong:huangdaoqu_village', //图层名
|
||||
parameters: {
|
||||
service: 'WMS',
|
||||
format: 'image/png',
|
||||
transparent: true, //是否透明
|
||||
// CQL_FILTER: `XZDM=${value.value}`,
|
||||
CQL_FILTER: CQL_FILTER,
|
||||
},
|
||||
});
|
||||
map2.customName = customName;
|
||||
viewer.imageryLayers.addImageryProvider(map2);
|
||||
}
|
||||
// 移除wms
|
||||
// nameArry ：属性名数组（customName）
|
||||
// isMohu ：是否模糊查询
|
||||
function removeWms(nameArry, isMohu) {
|
||||
if (viewer) {
|
||||
// 倒叙遍历，customName是自定义的属性
|
||||
const layers = viewer.imageryLayers._layers;
|
||||
for (let f = layers.length - 1; f >= 0; f--) {
|
||||
nameArry.forEach(item => {
|
||||
if (layers[f]._imageryProvider && layers[f]._imageryProvider.customName) {
|
||||
if (isMohu) {
|
||||
if (layers[f]._imageryProvider.customName.indexOf(item) > -1) {
|
||||
viewer.imageryLayers.remove(layers[f]);
|
||||
}
|
||||
} else {
|
||||
if (layers[f]._imageryProvider.customName === item) {
|
||||
viewer.imageryLayers.remove(layers[f]);
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 根据实体名字删除实体(模糊删除)
|
||||
function deleteEntityByName(name) {
|
||||
if (viewer) {
|
||||
let entitys = viewer.entities._entities._array;
|
||||
for (var na = entitys.length - 1; na >= 0; na--) {
|
||||
if (entitys[na]._name && entitys[na]._name === name) {
|
||||
viewer.entities.remove(entitys[na]);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
//折叠
|
||||
|
||||
function leftFoldClick() {
|
||||
@ -1069,7 +602,10 @@ const SwitchMode = () => {
|
||||
//列表模式年
|
||||
const getparameterEstimationYears = () => {
|
||||
getparameterEstimationYear().then(res => {
|
||||
console.log(res.data);
|
||||
oldDatas.value = { name: res.data[0] };
|
||||
res.data.forEach(item => {
|
||||
dataSource.value.push({ name: item });
|
||||
});
|
||||
formInline.value.time = res.data[res.data.length - 1];
|
||||
timeArr.value = res.data;
|
||||
onSubmit();
|
||||
@ -1077,22 +613,22 @@ const getparameterEstimationYears = () => {
|
||||
};
|
||||
|
||||
//产量预估
|
||||
const getwheatTotalYearValues = city => {
|
||||
getwheatTotalYearValue({ divisions: city }).then(res => {
|
||||
const getwheatTotalYearValues = (city,time) => {
|
||||
getwheatTotalYearValue({ divisions: city , yearMonth:time}).then(res => {
|
||||
estimate.value = res.data;
|
||||
areachar();
|
||||
});
|
||||
};
|
||||
//高标准农田
|
||||
const getwheatHeightStandardFarmlands = city => {
|
||||
getwheatHeightStandardFarmland({ divisions: city }).then(res => {
|
||||
const getwheatHeightStandardFarmlands = (city ,time)=> {
|
||||
getwheatHeightStandardFarmland({ divisions: city , yearMonth:time}).then(res => {
|
||||
standardArr.value = res.data;
|
||||
farmland();
|
||||
});
|
||||
};
|
||||
//镇
|
||||
const getwheatGetAllTownss = () => {
|
||||
getwheatGetAllTowns().then(res => {
|
||||
const getwheatGetAllTownss = (city ,time) => {
|
||||
getwheatGetAllTowns({ divisions: city , yearMonth:time}).then(res => {
|
||||
administration.value = res.data;
|
||||
Township.brr = JSON.parse(JSON.stringify(res.data));
|
||||
Township.arr = Township.brr.sort((a, b) => {
|
||||
@ -1243,7 +779,7 @@ const onSubmit = () => {
|
||||
}
|
||||
}
|
||||
const statInfo = chartModeDiv.value; // 获取图表元素
|
||||
statInfo.style.width = document.querySelector('.app-main').offsetWidth-50 + 'px'; //初始化echarts图表宽度
|
||||
statInfo.style.width = document.querySelector('.app-main').offsetWidth - 50 + 'px'; //初始化echarts图表宽度
|
||||
statInfo.style.height = document.querySelector('.app-main').offsetHeight + 'px';
|
||||
const myChart = echarts.init(statInfo);
|
||||
// 设置宽度自适应
|
||||
@ -1317,6 +853,9 @@ const Nindex = index => {
|
||||
return index + 1 + (page - 1) * pagesize;
|
||||
};
|
||||
|
||||
const handleData = oldData => {
|
||||
oldDatas.value = oldData;
|
||||
};
|
||||
|
||||
/*-------------echarts--------------*/
|
||||
function areachar() {
|
||||
|
||||
@ -31,7 +31,7 @@
|
||||
</div>
|
||||
<div ref="typesofDiv" class="typesofDiv"></div>
|
||||
<div class="tableDiv">
|
||||
<el-table :data="tableData" style="width: 100%">
|
||||
<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="占比" />
|
||||
@ -145,7 +145,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>
|
||||
@ -156,27 +160,54 @@
|
||||
<span><img src="@/assets/images/position.png" alt="" /></span>
|
||||
</div>
|
||||
<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>
|
||||
<div class="perform">
|
||||
<div class="perform_children">
|
||||
<img src="@/assets/images/icon.png" />
|
||||
<span class="label">好：</span>
|
||||
<span>{{ alterArr.good }}亩</span>
|
||||
</div>
|
||||
|
||||
<div class="perform_children">
|
||||
<img src="@/assets/images/icon.png" />
|
||||
<span class="label">较好：</span>
|
||||
<span>{{ alterArr.better }}亩</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="perform">
|
||||
<div class="perform_children">
|
||||
<img src="@/assets/images/icon.png" />
|
||||
<span class="label">适中：</span>
|
||||
<span>{{ alterArr.moderate }}亩</span>
|
||||
</div>
|
||||
<div class="perform_children">
|
||||
<img src="@/assets/images/icon.png" />
|
||||
<span class="label">较差：</span>
|
||||
<span>{{ alterArr.poor }}亩</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="perform">
|
||||
<div class="perform_children">
|
||||
<img src="@/assets/images/icon.png" />
|
||||
<span class="label">差：</span>
|
||||
<span>{{ alterArr.difference }}亩</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div>
|
||||
<p>
|
||||
<span>好</span>
|
||||
:
|
||||
@ -202,7 +233,7 @@
|
||||
:
|
||||
<span>{{ alterArr.difference }}(亩)</span>
|
||||
</p>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
<div id="popup-pagination"></div>
|
||||
</div>
|
||||
@ -369,7 +400,6 @@ import {
|
||||
gethighStandards,
|
||||
getgradeStatistics,
|
||||
getadministrativeDivisions,
|
||||
getgarrison,
|
||||
getgrowthTime,
|
||||
getgrowthList,
|
||||
getAdministrativeDivisionsChun,
|
||||
@ -416,6 +446,8 @@ let cunVar = ref(null);
|
||||
let zhenVar = ref(null);
|
||||
let regionName = ref('');
|
||||
let alterArr = ref([]);
|
||||
let dataSource = ref([]);
|
||||
let oldDatas = ref('');
|
||||
let amount = ref([
|
||||
{
|
||||
好: 0,
|
||||
@ -489,6 +521,16 @@ watch(
|
||||
selectTab();
|
||||
}
|
||||
);
|
||||
watch(
|
||||
() => oldDatas.value,
|
||||
(val, oldVal) => {
|
||||
value.value='370211'
|
||||
getfarmlands(value.value, oldDatas.value.name); //作物长势等级面积统计
|
||||
getstatisticss(value.value, oldDatas.value.name); //作物长势等级面积占比
|
||||
getTownships(value.value, oldDatas.value.name);
|
||||
gethighStandardss(oldDatas.value.name); //高标准农田
|
||||
}
|
||||
);
|
||||
// 农作物
|
||||
watch(
|
||||
() => checkList.value,
|
||||
@ -565,15 +607,10 @@ onMounted(() => {
|
||||
});
|
||||
|
||||
function initonMounted() {
|
||||
getfarmlands('370211'); //作物长势等级面积统计
|
||||
getstatisticss('370211'); //作物长势等级面积占比
|
||||
gethighStandardss(); //高标准农田
|
||||
getTownships('370211'); //镇
|
||||
getgrowthTimes(); //年
|
||||
|
||||
//地图
|
||||
initmap();
|
||||
getFarmland();
|
||||
showDaChangArea();
|
||||
alter();
|
||||
for (const key in dic) {
|
||||
if (dic[key].disabled !== true) {
|
||||
@ -606,13 +643,7 @@ function initmap() {
|
||||
var mapContainer = document.getElementById('cesiumContainer');
|
||||
map = new ol.Map({
|
||||
target: 'cesiumContainer',
|
||||
controls: ol.control
|
||||
.defaults({
|
||||
attributionOptions: {
|
||||
collapsed: true,
|
||||
},
|
||||
})
|
||||
.extend([new ol.supermap.control.Logo(), new ol.control.ScaleLine()]),
|
||||
controls: [],
|
||||
view: new ol.View({
|
||||
center: [119.86763411957472, 35.88435182141938],
|
||||
zoom: 11,
|
||||
@ -671,15 +702,15 @@ 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',
|
||||
'镇'
|
||||
);
|
||||
}
|
||||
@ -703,6 +734,15 @@ function initmap() {
|
||||
resizeObserver.observe(parentElement);
|
||||
}
|
||||
|
||||
//创建蒙层，凸显黄岛区域
|
||||
function showDaChangArea() {
|
||||
axios.get('/json/huangdao.json').then(({ data }) => {
|
||||
const fts = new ol.format.GeoJSON().readFeatures(data);
|
||||
const ft = fts[0];
|
||||
addConver(ft.getGeometry().getCoordinates());
|
||||
});
|
||||
}
|
||||
|
||||
function QueryData(e, name, url, item) {
|
||||
var point = new ol.geom.Point(e.coordinate);
|
||||
var param = new ol.supermap.QueryByGeometryParameters({
|
||||
@ -717,7 +757,7 @@ function QueryData(e, name, url, item) {
|
||||
let layerzhezhao = ref(null);
|
||||
new ol.supermap.QueryService(url).queryByGeometry(param, function (data) {
|
||||
let name = '';
|
||||
layerzhezhao= map
|
||||
layerzhezhao = map
|
||||
.getLayers()
|
||||
.getArray()
|
||||
.find(layer => layer.get('id') === 'zhezhao');
|
||||
@ -725,17 +765,17 @@ function QueryData(e, name, url, item) {
|
||||
if (item == '镇') {
|
||||
let code = data.result.recordsets[0].features.features[0].properties.XJQYDM;
|
||||
value.value = code;
|
||||
getTownships();
|
||||
let arr = [];
|
||||
Township.brr.forEach(item => {
|
||||
if (item.subregion == code) {
|
||||
name = item.subregionName;
|
||||
arr.push(item);
|
||||
alterArr.value = item;
|
||||
}
|
||||
console.log(arr);
|
||||
getgradeStatistics({ divisions: '370211', yearMonth: '2023-05' }).then(res => {
|
||||
res.data.forEach(item => {
|
||||
if (item.subregion == code) {
|
||||
name = item.subregionName;
|
||||
arr.push(item);
|
||||
alterArr.value = item;
|
||||
}
|
||||
});
|
||||
alter();
|
||||
});
|
||||
alter();
|
||||
} else if (item == '村') {
|
||||
let code = data.result.recordsets[0].features.features[0].properties.CJQYDM;
|
||||
let arr = [];
|
||||
@ -871,7 +911,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,
|
||||
}),
|
||||
@ -894,19 +934,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 townZuowu = ref({ label: [] }); //镇的作物
|
||||
|
||||
@ -1005,7 +1032,7 @@ const onSubmit = () => {
|
||||
);
|
||||
console.log(tableNewData.value);
|
||||
dowArr = ref([]);
|
||||
tableNewData.value.forEach(item => {
|
||||
res.data.forEach(item => {
|
||||
dowArr.value.push({
|
||||
区域名称: item.subName,
|
||||
好: item.good,
|
||||
@ -1015,6 +1042,7 @@ const onSubmit = () => {
|
||||
差: item.difference,
|
||||
});
|
||||
});
|
||||
console.log(dowArr.value)
|
||||
|
||||
amount.value[0]['好'] = 0;
|
||||
amount.value[0]['较好'] = 0;
|
||||
@ -1073,22 +1101,29 @@ const Nindex = index => {
|
||||
const pagesize = pageSize.value; // 每页条数
|
||||
return index + 1 + (page - 1) * pagesize;
|
||||
};
|
||||
|
||||
const handleData = oldData => {
|
||||
oldDatas.value = oldData;
|
||||
};
|
||||
/*------------------接口--------------------*/
|
||||
//获取年
|
||||
const getgrowthTimes = () => {
|
||||
getgrowthTime().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();
|
||||
});
|
||||
};
|
||||
|
||||
//作物长势等级面积统计
|
||||
const getfarmlands = city => {
|
||||
const getfarmlands = (city, time) => {
|
||||
areacharLable = ref([]);
|
||||
areacharPrice = ref([]);
|
||||
getfarmland({ divisions: city }).then(res => {
|
||||
getfarmland({ divisions: city, yearMonth: time }).then(res => {
|
||||
for (const key in res.data[0]) {
|
||||
if (res.data[0][key]) {
|
||||
areacharLable.value.push(key);
|
||||
@ -1099,32 +1134,30 @@ const getfarmlands = city => {
|
||||
});
|
||||
};
|
||||
//作物长势等级面积占比
|
||||
const getstatisticss = city => {
|
||||
typesofData = ref([]);
|
||||
tableData.value = [];
|
||||
totalArea = ref(0);
|
||||
getstatistics({ divisions: city }).then(res => {
|
||||
console.log(res.data);
|
||||
const getstatisticss = (city, time) => {
|
||||
getstatistics({ divisions: city, yearMonth: time }).then(res => {
|
||||
typesofData = ref([]);
|
||||
let brr=ref([]);
|
||||
totalArea = ref(0);
|
||||
res.data.forEach(item => {
|
||||
totalArea.value = Number(item.sum);
|
||||
console.log(item);
|
||||
for (const key in item) {
|
||||
if (key !== 'sum' && Number.isFinite(item[key])) {
|
||||
typesofData.value.push({
|
||||
name: key,
|
||||
value: item[key],
|
||||
});
|
||||
tableData.value.push({
|
||||
brr.value.push({
|
||||
date: key,
|
||||
name: item[key],
|
||||
});
|
||||
}
|
||||
tableData.value.forEach(it => {
|
||||
brr.value.forEach(it => {
|
||||
if (item[`${it.date}Zb`] !== undefined) {
|
||||
it['address'] = (item[`${it.date}Zb`] * 100).toFixed(2) + '%';
|
||||
}
|
||||
});
|
||||
let arr = JSON.parse(JSON.stringify(tableData.value));
|
||||
let arr = JSON.parse(JSON.stringify(brr.value));
|
||||
arr.forEach(it => {
|
||||
switch (it.date) {
|
||||
case 'good':
|
||||
@ -1148,6 +1181,8 @@ const getstatisticss = city => {
|
||||
}
|
||||
});
|
||||
tableData.value = arr;
|
||||
|
||||
console.log(tableData.value)
|
||||
}
|
||||
});
|
||||
typesof();
|
||||
@ -1155,9 +1190,9 @@ const getstatisticss = city => {
|
||||
};
|
||||
//高标准农田统计
|
||||
|
||||
const gethighStandardss = () => {
|
||||
const gethighStandardss = (time) => {
|
||||
farmlandData = ref([]);
|
||||
gethighStandards().then(res => {
|
||||
gethighStandards({yearMonth: time}).then(res => {
|
||||
highStandard.forEach((item, index) => {
|
||||
let town = res.data.map(i => {
|
||||
if (item === i.region) {
|
||||
@ -1174,13 +1209,13 @@ const gethighStandardss = () => {
|
||||
};
|
||||
|
||||
//镇
|
||||
const getTownships = city => {
|
||||
const getTownships = (city, time) => {
|
||||
dd.value['better'] = [];
|
||||
dd.value['difference'] = [];
|
||||
dd.value['good'] = [];
|
||||
dd.value['moderate'] = [];
|
||||
dd.value['poor'] = [];
|
||||
getgradeStatistics({ divisions: city, yearMonth: '2023-05' }).then(res => {
|
||||
getgradeStatistics({ divisions: city, yearMonth: time }).then(res => {
|
||||
console.log(res.data);
|
||||
Township.brr = res.data;
|
||||
Township.arr = res.data.sort((a, b) => {
|
||||
@ -1216,7 +1251,7 @@ const getTownships = city => {
|
||||
});
|
||||
};
|
||||
//村
|
||||
const getvillages = city => {
|
||||
const getvillages = (city,time) => {
|
||||
let newdd = {
|
||||
good: [],
|
||||
better: [],
|
||||
@ -1224,7 +1259,7 @@ const getvillages = city => {
|
||||
moderate: [],
|
||||
poor: [],
|
||||
};
|
||||
getadministrativeDivisions({ divisions: city }).then(res => {
|
||||
getadministrativeDivisions({ divisions: city , yearMonth: time}).then(res => {
|
||||
console.log(res.data);
|
||||
Township.brr = res.data;
|
||||
let arr = [...res.data];
|
||||
@ -1254,15 +1289,15 @@ const getvillages = city => {
|
||||
|
||||
const selectTab = () => {
|
||||
if (value.value !== '370211') {
|
||||
getvillages(value.value); //村
|
||||
getfarmlands(value.value); //作物长势等级面积统计
|
||||
getstatisticss(value.value); //作物长势等级面积占比
|
||||
getvillages(value.value,oldDatas.value.name); //村
|
||||
getfarmlands(value.value,oldDatas.value.name); //作物长势等级面积统计
|
||||
getstatisticss(value.value,oldDatas.value.name); //作物长势等级面积占比
|
||||
}
|
||||
|
||||
if (value.value == '370211') {
|
||||
getTownships('370211');
|
||||
getfarmlands('370211'); //作物长势等级面积统计
|
||||
getstatisticss('370211'); //作物长势等级面积占比
|
||||
getTownships('370211',oldDatas.value.name);
|
||||
getfarmlands('370211',oldDatas.value.name); //作物长势等级面积统计
|
||||
getstatisticss('370211',oldDatas.value.name); //作物长势等级面积占比
|
||||
}
|
||||
};
|
||||
|
||||
@ -1605,7 +1640,7 @@ function typesof() {
|
||||
}
|
||||
});
|
||||
var data = typesofData.value;
|
||||
|
||||
console.log(data);
|
||||
let option = {
|
||||
color: [
|
||||
'rgba(49, 235, 7, 1)',
|
||||
@ -2408,7 +2443,7 @@ function chartModes() {
|
||||
barWidth: 13,
|
||||
stack: '分类',
|
||||
itemStyle: {
|
||||
color: 'rgba(255, 141, 26, 1)',
|
||||
color: 'rgba(49, 235, 7, 1)',
|
||||
},
|
||||
data: 好,
|
||||
},
|
||||
@ -2418,7 +2453,7 @@ function chartModes() {
|
||||
barWidth: 13,
|
||||
stack: '分类',
|
||||
itemStyle: {
|
||||
color: 'rgba(255, 255, 26, 1)',
|
||||
color: 'rgba(84, 170, 255, 1)',
|
||||
},
|
||||
data: 较好,
|
||||
},
|
||||
@ -2428,7 +2463,7 @@ function chartModes() {
|
||||
barWidth: 13,
|
||||
stack: '分类',
|
||||
itemStyle: {
|
||||
color: 'rgba(255, 201, 148, 1)',
|
||||
color: 'rgba(255, 251, 0, 1)',
|
||||
},
|
||||
data: 适中,
|
||||
},
|
||||
@ -2438,7 +2473,7 @@ function chartModes() {
|
||||
barWidth: 13,
|
||||
stack: '分类',
|
||||
itemStyle: {
|
||||
color: 'rgba(255, 84, 84, 1)',
|
||||
color: 'rgba(255, 168, 8, 1)',
|
||||
},
|
||||
data: 较差,
|
||||
},
|
||||
@ -2448,7 +2483,7 @@ function chartModes() {
|
||||
barWidth: 13,
|
||||
stack: '分类',
|
||||
itemStyle: {
|
||||
color: 'rgba(255, 140, 255, 1)',
|
||||
color: 'rgba(255, 0, 255, 1)',
|
||||
},
|
||||
data: 差,
|
||||
},
|
||||
@ -2964,7 +2999,7 @@ $height: calc(100vh - 100px);
|
||||
}
|
||||
|
||||
:deep(.el-checkbox__label) {
|
||||
color: rgba(255, 255, 255, 1);
|
||||
color: black;
|
||||
}
|
||||
}
|
||||
|
||||
@ -3000,12 +3035,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;
|
||||
@ -3035,23 +3070,60 @@ $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: 410px;
|
||||
height: 175px;
|
||||
opacity: 1;
|
||||
background: rgba(2, 31, 26, 0.7);
|
||||
// display: flex;
|
||||
// flex-wrap: wrap;
|
||||
// align-items: center;
|
||||
// justify-content: space-between;
|
||||
.perform {
|
||||
width: 100%;
|
||||
margin: 20px 0;
|
||||
display: flex;
|
||||
}
|
||||
.perform_children {
|
||||
width: 195px;
|
||||
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-image: url('@/assets/images/duande.png') !important;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% !important;
|
||||
.label {
|
||||
color: rgba(47, 214, 214, 1);
|
||||
}
|
||||
span {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
#pop {
|
||||
border-radius: 5px;
|
||||
|
||||
@ -405,7 +405,7 @@
|
||||
>
|
||||
{{ props.row.soilEc }}
|
||||
</span>
|
||||
<span>{{ props.row.soilEc }}</span>
|
||||
<span v-else>{{ props.row.soilEc }}</span>
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
@ -689,24 +689,19 @@
|
||||
<span><img src="@/assets/images/position.png" alt="" /></span>
|
||||
</div>
|
||||
<div id="popup" class="ol-popup">
|
||||
<div class="pophead" style="width: 100%; height: 0px">
|
||||
<div class="pophead" style="width: 100%">
|
||||
<div
|
||||
id="popup-title"
|
||||
style="
|
||||
font: bold 15px sans-serif;
|
||||
align: left;
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
left: 8px;
|
||||
color: #000000;
|
||||
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>
|
||||
</div>
|
||||
@ -960,15 +955,8 @@
|
||||
</el-table-column>
|
||||
<el-table-column prop="picturesMark2O1List" label="害虫名称">
|
||||
<template #default="scope">
|
||||
<span
|
||||
v-for="(item, index) in scope.row.picturesMark2O1List"
|
||||
:key="index"
|
||||
>
|
||||
{{
|
||||
scope.row.picturesMark2O1List.length > 0
|
||||
? item.pestName
|
||||
: '无'
|
||||
}},
|
||||
<span v-for="(value, key) in scope.row.obj" :key="key">
|
||||
{{ key }},
|
||||
</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
@ -1165,6 +1153,7 @@
|
||||
<el-tab-pane label="智能孢子仪" name="智能孢子仪" />
|
||||
<el-tab-pane label="虫情监测仪" name="虫情监测仪" />
|
||||
<el-tab-pane label="土壤墒情、土质" name="土壤墒情、土质" />
|
||||
<el-tab-pane label="大田视频病害监测" name="大田视频病害监测" />
|
||||
</el-tabs>
|
||||
<div class="tabulationCente">
|
||||
<div class="left">
|
||||
@ -1590,7 +1579,7 @@
|
||||
style="font-size: 16px; font-weight: 00"
|
||||
>
|
||||
 
|
||||
{{ dictionary[item] }} :
|
||||
{{ dictionary[item] }}
|
||||
<span style="color: red; font-size: 18px; font-weight: 700">
|
||||
{{ DetailArr[item] }}
|
||||
</span>
|
||||
@ -2151,18 +2140,13 @@ onUpdated(() => {
|
||||
}
|
||||
});
|
||||
/*-------------地图------------------------*/
|
||||
|
||||
let maps = ref(null);
|
||||
var parentElement = document.querySelector('.fatherDiv');
|
||||
var mapContainer = document.getElementById('.fatherDiv');
|
||||
function initmap() {
|
||||
maps = 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,
|
||||
@ -2199,10 +2183,33 @@ function initmap() {
|
||||
alter();
|
||||
}
|
||||
|
||||
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';
|
||||
|
||||
// 重新渲染地图
|
||||
maps.updateSize();
|
||||
});
|
||||
});
|
||||
// 开始监听父元素大小变化
|
||||
resizeObserver.observe(parentElement);
|
||||
});
|
||||
|
||||
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,
|
||||
}),
|
||||
@ -2217,7 +2224,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,
|
||||
}),
|
||||
@ -2265,6 +2272,7 @@ const alter = () => {
|
||||
var content = document.getElementById('popup-content');
|
||||
//拿到弹出框关闭元素
|
||||
var popupCloser = document.getElementById('popup-closer');
|
||||
let titleDiv = document.querySelector('#popup-title');
|
||||
//创建弹出框容器
|
||||
var overlay1 = new ol.Overlay({
|
||||
//设置弹出框的容器
|
||||
@ -2283,12 +2291,10 @@ const alter = () => {
|
||||
maps.forEachFeatureAtPixel(pixel, function (feature) {
|
||||
var attr = feature.getProperties();
|
||||
console.log(attr);
|
||||
titleDiv.innerHTML = '<p>设备名称: ' + attr.name + '</p>';
|
||||
content.innerHTML =
|
||||
'<div>' +
|
||||
'<p>设备名称: ' +
|
||||
attr.name +
|
||||
'</p>' +
|
||||
'<p>经度:' +
|
||||
'<div class="content-children">' +
|
||||
`<p> <img src="@/assets/images/icon.png"/> 经度:` +
|
||||
attr.geometry.flatCoordinates[0] +
|
||||
'</p>' +
|
||||
'<p>纬度:' +
|
||||
@ -2963,11 +2969,22 @@ const querys = () => {
|
||||
equipment: deviceValue.value,
|
||||
}).then(res => {
|
||||
bugarr.value = res.data;
|
||||
// bugarrs.value=res.data
|
||||
res.data.forEach(i => {
|
||||
let arr = {};
|
||||
i.picturesMark2O1List.forEach(item => {
|
||||
if (!arr[item.pestName]) {
|
||||
arr[item.pestName] = 1;
|
||||
} else {
|
||||
arr[item.pestName] += 1;
|
||||
}
|
||||
});
|
||||
i['obj'] = arr;
|
||||
});
|
||||
bugarrs.value = res.data.slice(
|
||||
(currentPage.value - 1) * pageSize.value,
|
||||
(currentPage.value - 1) * pageSize.value + pageSize.value
|
||||
);
|
||||
console.log(bugarrs);
|
||||
});
|
||||
};
|
||||
|
||||
@ -3159,7 +3176,18 @@ const resettings = () => {
|
||||
deviceValue.value = '';
|
||||
getinsect().then(res => {
|
||||
bugarr.value = res.data;
|
||||
// bugarrs.value=res.data
|
||||
res.data.forEach(i => {
|
||||
let arr = {};
|
||||
i.picturesMark2O1List.forEach(item => {
|
||||
console.log(item);
|
||||
if (!arr[item.pestName]) {
|
||||
arr[item.pestName] = 1;
|
||||
} else {
|
||||
arr[item.pestName] += 1;
|
||||
}
|
||||
});
|
||||
i['obj'] = arr;
|
||||
});
|
||||
bugarrs.value = res.data.slice(
|
||||
(currentPage.value - 1) * pageSize.value,
|
||||
(currentPage.value - 1) * pageSize.value + pageSize.value
|
||||
@ -3178,6 +3206,7 @@ const resettingss = () => {
|
||||
(currentPage.value - 1) * pageSize.value,
|
||||
(currentPage.value - 1) * pageSize.value + pageSize.value
|
||||
);
|
||||
console.log(bugarrs.value);
|
||||
});
|
||||
};
|
||||
|
||||
@ -3221,7 +3250,17 @@ const bugarrsVisibles = () => {
|
||||
getinsect().then(res => {
|
||||
currentPage.value = 1;
|
||||
bugarr.value = res.data;
|
||||
// bugarrs.value=res.data
|
||||
res.data.forEach(i => {
|
||||
let arr = {};
|
||||
i.picturesMark2O1List.forEach(item => {
|
||||
if (!arr[item.pestName]) {
|
||||
arr[item.pestName] = 1;
|
||||
} else {
|
||||
arr[item.pestName] += 1;
|
||||
}
|
||||
});
|
||||
i['obj'] = arr;
|
||||
});
|
||||
bugarrs.value = res.data.slice(
|
||||
(currentPage.value - 1) * pageSize.value,
|
||||
(currentPage.value - 1) * pageSize.value + pageSize.value
|
||||
@ -3368,6 +3407,14 @@ const handleClick = (tab, event) => {
|
||||
},
|
||||
];
|
||||
getdeviceNumbers('3'); //所有设备列表
|
||||
} else if (tab.paneName == '大田视频病害监测') {
|
||||
tableItem.value = [
|
||||
{
|
||||
lable: '预警值',
|
||||
value: 'picturesMark201List',
|
||||
},
|
||||
];
|
||||
getdeviceNumbers('2'); //所有设备列表
|
||||
}
|
||||
};
|
||||
|
||||
@ -3552,7 +3599,17 @@ const getinsects = () => {
|
||||
startTime: moment().subtract(3, 'days').startOf('day').format('YYYY-MM-DD HH:mm:ss'),
|
||||
endTime: moment().format('YYYY-MM-DD HH:mm:ss'),
|
||||
}).then(res => {
|
||||
console.log(res.data);
|
||||
res.data.forEach(i => {
|
||||
let arr = {};
|
||||
i.picturesMark2O1List.forEach(item => {
|
||||
if (!arr[item.pestName]) {
|
||||
arr[item.pestName] = 1;
|
||||
} else {
|
||||
arr[item.pestName] += 1;
|
||||
}
|
||||
});
|
||||
i['obj'] = arr;
|
||||
});
|
||||
bugarr.value = res.data;
|
||||
bugarrtime.value = res.data;
|
||||
bugarrs.value = res.data.slice(
|
||||
@ -5074,50 +5131,7 @@ $height: calc(100vh - 110px);
|
||||
width: 100%;
|
||||
height: 89%;
|
||||
}
|
||||
/*设置弹出框样式*/
|
||||
.ol-popup {
|
||||
position: absolute;
|
||||
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;
|
||||
border-radius: 10px;
|
||||
border: 1px solid #cccccc;
|
||||
bottom: 12px;
|
||||
left: -50px;
|
||||
min-width: 280px;
|
||||
}
|
||||
.ol-popup:after,
|
||||
.ol-popup:before {
|
||||
top: 100%;
|
||||
border: solid transparent;
|
||||
content: ' ';
|
||||
height: 0;
|
||||
width: 0;
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
}
|
||||
.ol-popup:after {
|
||||
border-top-color: #eeeeee;
|
||||
border-width: 10px;
|
||||
left: 48px;
|
||||
margin-left: -10px;
|
||||
}
|
||||
.ol-popup:before {
|
||||
border-top-color: #cccccc;
|
||||
border-width: 11px;
|
||||
left: 48px;
|
||||
margin-left: -11px;
|
||||
}
|
||||
.ol-popup-closer {
|
||||
text-decoration: none;
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
right: 8px;
|
||||
}
|
||||
.ol-popup-closer:after {
|
||||
content: '✖';
|
||||
}
|
||||
|
||||
.chartMode {
|
||||
:deep(.el-table .el-table__header-wrapper th, .el-table .el-table__fixed-header-wrapper th) {
|
||||
color: rgba(0, 0, 0, 1);
|
||||
@ -5707,18 +5721,171 @@ $height: calc(100vh - 110px);
|
||||
display: none;
|
||||
}
|
||||
|
||||
#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);
|
||||
/*设置弹出框样式*/
|
||||
.ol-popup {
|
||||
position: absolute;
|
||||
// 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;
|
||||
border-radius: 10px;
|
||||
// border: 1px solid #cccccc;
|
||||
bottom: 12px;
|
||||
left: -50px;
|
||||
min-width: 280px;
|
||||
}
|
||||
|
||||
.ol-popup:before {
|
||||
top: 100%;
|
||||
border: solid transparent;
|
||||
content: ' ';
|
||||
height: 0;
|
||||
width: 0;
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
}
|
||||
.ol-popup:after {
|
||||
border-top-color: #eeeeee;
|
||||
border-width: 10px;
|
||||
left: 48px;
|
||||
margin-left: -10px;
|
||||
}
|
||||
.ol-popup:before {
|
||||
border-top-color: #cccccc;
|
||||
border-width: 11px;
|
||||
left: 48px;
|
||||
margin-left: -11px;
|
||||
display: none;
|
||||
}
|
||||
.ol-popup-closer {
|
||||
text-decoration: none;
|
||||
position: absolute;
|
||||
top: 29px;
|
||||
right: 8px;
|
||||
color: rgba(47, 214, 214, 1) !important;
|
||||
}
|
||||
.ol-popup-closer:after {
|
||||
content: '✖';
|
||||
}
|
||||
#popup {
|
||||
// width: 522px;
|
||||
// height: 365px;
|
||||
.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-background {
|
||||
background: url('@/assets/images/bottom.png') no-repeat rgba(2, 31, 26, 0.7) !important;
|
||||
background-size: 100% 100% !important;
|
||||
width: 522px;
|
||||
// height: 365px;
|
||||
opacity: 1;
|
||||
background: rgba(2, 31, 26, 0.7);
|
||||
}
|
||||
#popup-content {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
background: url('@/assets/images/bottom.png') no-repeat !important;
|
||||
background-size: 100% 100% !important;
|
||||
|
||||
:deep(.content-children) {
|
||||
width: 100%;
|
||||
|
||||
color: rgba(47, 214, 214, 1);
|
||||
|
||||
margin-bottom: 30px;
|
||||
p {
|
||||
width: 100%;
|
||||
height: 28px;
|
||||
line-height: 28px;
|
||||
padding-left: 24px;
|
||||
background: url('@/assets/images/duande.png') no-repeat !important;
|
||||
background-size: 100% !important;
|
||||
}
|
||||
#P-id {
|
||||
width: 100%;
|
||||
// background-image: url('@/assets/images/chande.png') !important;
|
||||
// background-repeat: no-repeat;
|
||||
// background-size: 100% !important;
|
||||
}
|
||||
}
|
||||
// .content-children{
|
||||
// width: 100%;
|
||||
// }
|
||||
div {
|
||||
width: 100%;
|
||||
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-image: url('@/assets/images/duande.png') !important;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% !important;
|
||||
.label {
|
||||
color: rgba(47, 214, 214, 1);
|
||||
}
|
||||
span {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
#popup-pagination {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translate(-50%, 0);
|
||||
bottom: 7px;
|
||||
#popup-prev {
|
||||
margin-right: 15px;
|
||||
width: 104px;
|
||||
height: 28px;
|
||||
opacity: 1;
|
||||
border-radius: 4px;
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
rgba(16, 111, 111, 1) 0%,
|
||||
rgba(47, 214, 214, 1) 100%
|
||||
);
|
||||
border: 1.5px solid rgba(23, 194, 180, 1);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 18px;
|
||||
color: rgba(255, 255, 255, 1);
|
||||
}
|
||||
#popup-next {
|
||||
width: 104px;
|
||||
height: 28px;
|
||||
opacity: 1;
|
||||
border-radius: 4px;
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
rgba(16, 111, 111, 1) 0%,
|
||||
rgba(47, 214, 214, 1) 100%
|
||||
);
|
||||
border: 1.5px solid rgba(23, 194, 180, 1);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 18px;
|
||||
color: rgba(255, 255, 255, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
#pop {
|
||||
opacity: 1;
|
||||
border-radius: 5px;
|
||||
|
||||
@ -231,7 +231,7 @@ const initLeafletMap = () => {
|
||||
});
|
||||
// 渲染底图
|
||||
L.tileLayer(
|
||||
'http://t0.tianditu.com/DataServer?T=vec_w&tk=5956e6519f2bb0ae8e57bc834298c9f1&x={x}&y={y}&l={z}'
|
||||
'http://t0.tianditu.com/DataServer?T=img_w&tk=5956e6519f2bb0ae8e57bc834298c9f1&x={x}&y={y}&l={z}'
|
||||
).addTo(map);
|
||||
L.tileLayer(
|
||||
'http://t0.tianditu.com/DataServer?T=cia_w&tk=5956e6519f2bb0ae8e57bc834298c9f1&x={x}&y={y}&l={z}'
|
||||
@ -262,6 +262,7 @@ const getmeteorologys = () => {
|
||||
);
|
||||
});
|
||||
getMeteorological().then(res => {
|
||||
console.log(res.data)
|
||||
res.data.forEach(item => {
|
||||
center = L.latLng(item.msLatitude, item.msLongitude);
|
||||
map.setView(center, 17);
|
||||
|
||||
@ -115,7 +115,7 @@
|
||||
/>
|
||||
</p>
|
||||
</div>
|
||||
<el-select
|
||||
<!-- <el-select
|
||||
popper-class="select_city"
|
||||
@change="selectTab(item)"
|
||||
v-model="value"
|
||||
@ -127,7 +127,7 @@
|
||||
:label="item.name"
|
||||
:value="item.subregion"
|
||||
/>
|
||||
</el-select>
|
||||
</el-select> -->
|
||||
<div class="ASdivision">
|
||||
<el-table
|
||||
:cell-style="{ textAlign: 'center' }"
|
||||
@ -179,7 +179,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>
|
||||
@ -211,32 +215,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>洪涝区</span>
|
||||
:
|
||||
<span>{{ item.yesFloodingPercentage }}(亩)</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="popup-pagination"></div>
|
||||
@ -367,8 +367,8 @@ let currentPage = ref(1); //当前页
|
||||
let pageSize = ref(12); //每页条数
|
||||
let timeArr = ref([]); //年数组
|
||||
const chartModeDiv = ref(null);
|
||||
let cunVar = ref(null);
|
||||
let zhenVar = ref(null);
|
||||
let dataSource = ref([]);
|
||||
let oldDatas = ref('');
|
||||
let layers = ref(null); //村
|
||||
let regionName = ref('');
|
||||
let zhengData = ref([]);
|
||||
@ -426,10 +426,6 @@ onMounted(() => {
|
||||
initonMounted();
|
||||
});
|
||||
function initonMounted() {
|
||||
getydamageAreas('370211'); //农作物受灾面积统计
|
||||
getproportions('370211'); //农作物受灾面积占比
|
||||
gethighStandards(); //高标准农田冷冻等级面积统计
|
||||
gettownInformations('370211');
|
||||
theTimes(); //年
|
||||
//地图
|
||||
initmap();
|
||||
@ -464,13 +460,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,
|
||||
@ -516,20 +506,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({
|
||||
@ -548,6 +560,7 @@ function QueryData(e, name, url, item) {
|
||||
.getLayers()
|
||||
.getArray()
|
||||
.find(layer => layer.get('id') === 'zhezhao');
|
||||
map.removeLayer(layerzhezhao);
|
||||
if (item == '镇' && data.result.recordsets[0].features.features[0].properties.XJQYDM) {
|
||||
let code = data.result.recordsets[0].features.features[0].properties.XJQYDM;
|
||||
let arr = [];
|
||||
@ -686,7 +699,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,
|
||||
}),
|
||||
@ -701,7 +714,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,
|
||||
}),
|
||||
@ -776,6 +789,16 @@ watch(
|
||||
}
|
||||
);
|
||||
|
||||
watch(
|
||||
() => oldDatas.value,
|
||||
(val, oldVal) => {
|
||||
value.value = '370211';
|
||||
getydamageAreas(value.value, oldDatas.value.name); //农作物受灾面积统计
|
||||
getproportions(value.value, oldDatas.value.name); //农作物受灾面积占比
|
||||
gethighStandards(oldDatas.value.name); //高标准农田冷冻等级面积统计
|
||||
gettownInformations(value.value, oldDatas.value.name);
|
||||
}
|
||||
);
|
||||
let townZuowu = ref({ label: [] }); //镇的作物
|
||||
//折叠
|
||||
|
||||
@ -825,11 +848,13 @@ const onSubmit = () => {
|
||||
let arr = [];
|
||||
let brr = [];
|
||||
getllistDroughtsDamage({
|
||||
time: formInline.value.time,
|
||||
yearMonth: formInline.value.time,
|
||||
statistical: formInline.value.statistical,
|
||||
droughtRating: formInline.value.droughtRating,
|
||||
area: formInline.value.area,
|
||||
}).then(res => {
|
||||
console.log(res.data);
|
||||
console.log(formInline.value.statistical);
|
||||
if (formInline.value.statistical == '行政区划') {
|
||||
res.data.forEach(item => {
|
||||
if (arr.indexOf(item.typeName) == -1) {
|
||||
@ -969,7 +994,10 @@ const resetForm = () => {
|
||||
//列表模式-年
|
||||
const theTimes = () => {
|
||||
getlistDroughtsDamageYear().then(res => {
|
||||
console.log(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();
|
||||
@ -977,9 +1005,9 @@ const theTimes = () => {
|
||||
};
|
||||
|
||||
//农作物受灾面积统计
|
||||
const getydamageAreas = city => {
|
||||
const getydamageAreas = (city, time) => {
|
||||
areacharData = reactive({ lable: [], value: [] });
|
||||
getydamageArea({ divisions: city, yearMonth: '2023-05' }).then(res => {
|
||||
getydamageArea({ divisions: city, yearMonth: time }).then(res => {
|
||||
res.data.forEach(item => {
|
||||
areacharData.lable.push(item.type);
|
||||
areacharData.value.push(item.yesFlooding);
|
||||
@ -989,11 +1017,11 @@ const getydamageAreas = city => {
|
||||
};
|
||||
|
||||
//农作物受灾面积占比
|
||||
const getproportions = city => {
|
||||
const getproportions = (city, time) => {
|
||||
typesofData = ref([]);
|
||||
tableData = ref([]);
|
||||
totalArea = ref(0);
|
||||
getproportion({ divisions: city, yearMonth: '2023-05' }).then(res => {
|
||||
getproportion({ divisions: city, yearMonth: time }).then(res => {
|
||||
res.data.forEach(item => {
|
||||
totalArea.value += Number(item.yesFlooding);
|
||||
typesofData.value.push({
|
||||
@ -1011,8 +1039,8 @@ const getproportions = city => {
|
||||
};
|
||||
|
||||
//高标准农田洪涝面积统计
|
||||
const gethighStandards = () => {
|
||||
gethighStandard({ yearMonth: '2023-05' }).then(res => {
|
||||
const gethighStandards = time => {
|
||||
gethighStandard({ yearMonth: time }).then(res => {
|
||||
console.log(res.data);
|
||||
highStandardArr.value = JSON.parse(JSON.stringify(res.data));
|
||||
// res.data.forEach(item => {
|
||||
@ -1027,9 +1055,9 @@ const gethighStandards = () => {
|
||||
};
|
||||
|
||||
//镇
|
||||
const gettownInformations = city => {
|
||||
const gettownInformations = (city, time) => {
|
||||
ZoningData = ref([]);
|
||||
gettownInformation({ divisions: city, yearMonth: '2023-05' }).then(res => {
|
||||
gettownInformation({ divisions: city, yearMonth: time }).then(res => {
|
||||
zhengData.value = JSON.parse(JSON.stringify(res.data));
|
||||
Township.arr = res.data.sort((a, b) => {
|
||||
return a.name.length - b.name.length;
|
||||
@ -1066,9 +1094,9 @@ const gettownInformations = city => {
|
||||
});
|
||||
};
|
||||
//村
|
||||
const getvillages = city => {
|
||||
const getvillages = (city, time) => {
|
||||
ZoningData = ref([]);
|
||||
getvillage({ divisions: city }).then(res => {
|
||||
getvillage({ divisions: city, yearMonth: time }).then(res => {
|
||||
Township.brr = res.data;
|
||||
let arr = [...res.data];
|
||||
let brr = [];
|
||||
@ -1104,26 +1132,6 @@ const getvillages = city => {
|
||||
};
|
||||
|
||||
const selectTab = () => {
|
||||
getgarrison().then(res => {
|
||||
console.log(res);
|
||||
res.features.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: 0,
|
||||
// });
|
||||
}
|
||||
});
|
||||
});
|
||||
viewer.camera.flyTo({
|
||||
destination: Cesium.Rectangle.fromDegrees(119.5091, 35.5671, 120.3285, 36.1455),
|
||||
duration: 2,
|
||||
});
|
||||
getvillages(value.value);
|
||||
getproportions(value.value);
|
||||
getydamageAreas(value.value);
|
||||
@ -1209,28 +1217,28 @@ const selectTab = () => {
|
||||
//下载
|
||||
/*---------------------------*/
|
||||
const Deta = item => {
|
||||
getydamageArea({ divisions: value.value, whetherToDownload: true }).then(res => {
|
||||
getydamageArea({ divisions: value.value, whetherToDownload: true ,yearMonth:oldDatas.value.name}).then(res => {
|
||||
downLoadFile(res.data[res.data.length - 1].downloadPath);
|
||||
});
|
||||
};
|
||||
const Deta2 = item => {
|
||||
getproportion({ divisions: value.value, whetherToDownload: true }).then(res => {
|
||||
getproportion({ divisions: value.value, whetherToDownload: true ,yearMonth:oldDatas.value.name}).then(res => {
|
||||
downLoadFile(res.data[res.data.length - 1].downloadPath);
|
||||
});
|
||||
};
|
||||
|
||||
const Deta3 = item => {
|
||||
gethighStandard({ divisions: value.value, whetherToDownload: true }).then(res => {
|
||||
gethighStandard({ divisions: value.value, whetherToDownload: true ,yearMonth:oldDatas.value.name}).then(res => {
|
||||
downLoadFile(res.data[res.data.length - 1].downloadPath);
|
||||
});
|
||||
};
|
||||
const Deta4 = item => {
|
||||
if (value.value == '370211') {
|
||||
gettownInformation({ divisions: value.value, whetherToDownload: true }).then(res => {
|
||||
gettownInformation({ divisions: value.value, whetherToDownload: true ,yearMonth:oldDatas.value.name}).then(res => {
|
||||
downLoadFile(res.data[res.data.length - 1].downloadPath);
|
||||
});
|
||||
} else {
|
||||
getvillage({ divisions: value.value, whetherToDownload: true }).then(res => {
|
||||
getvillage({ divisions: value.value, whetherToDownload: true ,yearMonth:oldDatas.value.name}).then(res => {
|
||||
downLoadFile(res.data[res.data.length - 1].downloadPath);
|
||||
});
|
||||
}
|
||||
@ -1287,6 +1295,9 @@ const exportExcel = (
|
||||
// 生成文件并下载
|
||||
xlsx.writeFile(wb, `${fileName}.xlsx`);
|
||||
};
|
||||
const handleData = oldData => {
|
||||
oldDatas.value = oldData;
|
||||
};
|
||||
/*-------------echarts--------------*/
|
||||
function areachar() {
|
||||
const areaDivIntance = echarts.init(areaDiv.value);
|
||||
@ -2544,12 +2555,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;
|
||||
@ -2579,22 +2590,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: 120px;
|
||||
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 {
|
||||
|
||||
@ -97,12 +97,7 @@
|
||||
/>
|
||||
</p>
|
||||
</div>
|
||||
<el-select
|
||||
popper-class="select_city"
|
||||
@change="selectTab(item)"
|
||||
v-model="value"
|
||||
placeholder="全部"
|
||||
>
|
||||
<el-select popper-class="select_city" v-model="value" placeholder="全部">
|
||||
<el-option
|
||||
v-for="item in Township.arr"
|
||||
:key="item.streetCode"
|
||||
@ -146,7 +141,11 @@
|
||||
</div>
|
||||
|
||||
<div class="bottom_center">
|
||||
<TimeLine />
|
||||
<TimeLine
|
||||
v-if="dataSource.length > 0"
|
||||
:dataSource="dataSource"
|
||||
@dataHandle="handleData"
|
||||
/>
|
||||
</div>
|
||||
<div class="tool">
|
||||
<span><img src="@/assets/images/LAYER.png" alt="" /></span>
|
||||
@ -178,32 +177,28 @@
|
||||
</el-collapse-item>
|
||||
</el-collapse>
|
||||
<div id="popup" class="ol-popup">
|
||||
<div class="pophead" style="width: 100%; height: 20px">
|
||||
<div class="pophead" style="width: 100%">
|
||||
<div
|
||||
id="popup-title"
|
||||
style="
|
||||
font: bold 15px sans-serif;
|
||||
align: left;
|
||||
position: absolute;
|
||||
/* top: 5px; */
|
||||
left: 17px;
|
||||
color: #fff;
|
||||
font-size: 20px;
|
||||
font-weight: 400;
|
||||
letter-spacing: 1px;
|
||||
color: rgba(246, 255, 255, 1);
|
||||
line-height: 42px;
|
||||
padding-left: 45px;
|
||||
"
|
||||
></div>
|
||||
<a
|
||||
href="#"
|
||||
id="popup-closer"
|
||||
class="ol-popup-closer"
|
||||
style="color: #8e908c"
|
||||
></a>
|
||||
<a href="#" id="popup-closer" class="ol-popup-closer"></a>
|
||||
</div>
|
||||
<div id="popup-content" style="padding: 10px">
|
||||
<div v-for="(item, index) in alterArr" :key="index">
|
||||
<p>
|
||||
<div class="perform" v-for="(item, index) in alterArr" :key="index">
|
||||
<div class="perform_children">
|
||||
<img src="@/assets/images/icon.png" />
|
||||
<span>{{ item.type }}</span>
|
||||
:
|
||||
<span>{{ Number(item.area).toFixed(2) }}(亩)</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="popup-pagination"></div>
|
||||
@ -291,7 +286,7 @@
|
||||
>
|
||||
<template #default="scope">
|
||||
<span
|
||||
style="color: rgba(255, 255, 0, 1); font-weight: 600"
|
||||
style="color: rgba(255, 168, 8, 0.4); font-weight: 600"
|
||||
v-if="item.value == '轻度干旱'"
|
||||
>
|
||||
{{ scope.row[item.value] }}
|
||||
@ -338,7 +333,7 @@
|
||||
>
|
||||
<template #default="scope">
|
||||
<span
|
||||
style="color: rgba(255, 255, 0, 1); font-weight: 600"
|
||||
style="color: rgba(255, 168, 8, 0.4); font-weight: 600"
|
||||
v-if="item.value == '轻度干旱'"
|
||||
>
|
||||
{{ scope.row[item.value] }}
|
||||
@ -427,8 +422,8 @@ let checkListdata = ref([]);
|
||||
let SwitchFlag = ref(true);
|
||||
let timeArr = ref([]); //年数组
|
||||
const num = ref(1);
|
||||
let cunVar = ref(null);
|
||||
let zhenVar = ref(null);
|
||||
let dataSource = ref([]);
|
||||
let oldDatas = ref('');
|
||||
let alterArr = ref([]);
|
||||
let regionName = ref('');
|
||||
let amount = ref([
|
||||
@ -520,10 +515,6 @@ onMounted(() => {
|
||||
});
|
||||
|
||||
function initonMounted() {
|
||||
getareaStatisticsDroughts('370211'); //干旱等级面积统计
|
||||
getproportionOfAreas('370211'); //干旱等级面积占比
|
||||
geteachFreezingGradeAreas(); //高标准农田干旱等级面积占比
|
||||
getTownships('370211'); //镇
|
||||
theTimes(); //年
|
||||
//地图
|
||||
initmap();
|
||||
@ -564,15 +555,12 @@ let content = ref(null);
|
||||
let popupCloser = ref(null);
|
||||
let overlay = ref(null);
|
||||
function initmap() {
|
||||
// 获取父元素和地图容器
|
||||
var parentElement = document.querySelector('.centerBox');
|
||||
var mapContainer = document.getElementById('cesiumContainer');
|
||||
map = new ol.Map({
|
||||
target: 'cesiumContainer',
|
||||
controls: ol.control
|
||||
.defaults({
|
||||
attributionOptions: {
|
||||
collapsed: true,
|
||||
},
|
||||
})
|
||||
.extend([new ol.supermap.control.Logo(), new ol.control.ScaleLine()]),
|
||||
controls: [],
|
||||
view: new ol.View({
|
||||
center: [119.86763411957472, 35.88435182141938],
|
||||
zoom: 11,
|
||||
@ -618,19 +606,37 @@ function initmap() {
|
||||
if (zoom >= 13) {
|
||||
QueryData(
|
||||
e,
|
||||
'huangdaoqu_village@huangdaoqu_bianjie',
|
||||
'http://36.134.44.75:8090/iserver/services/map-huangdaoqu_bianjie/rest/maps/huangdaoqu_village@huangdaoqu_bianjie',
|
||||
'CJQY3702112019WGS84@huangdaoqu_bianjie',
|
||||
'http://36.134.44.75:8090/iserver/services/map-huangdaoqu_bianjie/rest/maps/CJQY3702112019WGS84%40huangdaoqu_bianjie',
|
||||
'村'
|
||||
);
|
||||
} else {
|
||||
QueryData(
|
||||
e,
|
||||
'huangdaoqu_town@huangdaoqu_bianjie',
|
||||
'http://36.134.44.75:8090/iserver/services/map-huangdaoqu_bianjie/rest/maps/huangdaoqu_town@huangdaoqu_bianjie',
|
||||
'XJQY3702112019WGS84@huangdaoqu_bianjie',
|
||||
'http://36.134.44.75:8090/iserver/services/map-huangdaoqu_bianjie/rest/maps/XJQY3702112019WGS84%40huangdaoqu_bianjie',
|
||||
'镇'
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
// 监听父元素大小变化
|
||||
var resizeObserver = new ResizeObserver(function (entries) {
|
||||
entries.forEach(function (entry) {
|
||||
// 获取父元素的新大小
|
||||
var newWidth = entry.contentRect.width;
|
||||
var newHeight = entry.contentRect.height;
|
||||
|
||||
// 调整地图容器的大小
|
||||
mapContainer.style.width = newWidth + 'px';
|
||||
mapContainer.style.height = newHeight + 'px';
|
||||
|
||||
// 重新渲染地图
|
||||
map.updateSize();
|
||||
});
|
||||
});
|
||||
// 开始监听父元素大小变化
|
||||
resizeObserver.observe(parentElement);
|
||||
}
|
||||
function QueryData(e, name, url, item) {
|
||||
var point = new ol.geom.Point(e.coordinate);
|
||||
@ -654,17 +660,17 @@ function QueryData(e, name, url, item) {
|
||||
if (item == '镇' && data.result.recordsets[0].features.features[0].properties.XJQYDM) {
|
||||
let code = data.result.recordsets[0].features.features[0].properties.XJQYDM;
|
||||
value.value = code;
|
||||
getTownships();
|
||||
let arr = [];
|
||||
Township.brr.forEach(item => {
|
||||
console.log(item);
|
||||
if (item.streetCode == code) {
|
||||
name = item.streetName;
|
||||
arr.push(item);
|
||||
}
|
||||
alterArr.value = arr;
|
||||
getTownship().then(res => {
|
||||
res.data.forEach(item => {
|
||||
if (item.streetCode == code) {
|
||||
name = item.streetName;
|
||||
arr.push(item);
|
||||
}
|
||||
alterArr.value = arr;
|
||||
});
|
||||
alter();
|
||||
});
|
||||
alter();
|
||||
} else if (
|
||||
item == '村' &&
|
||||
data.result.recordsets[0].features.features[0].properties.CJQYDM
|
||||
@ -674,6 +680,7 @@ function QueryData(e, name, url, item) {
|
||||
getAdministrativeAreaChun({ divisions: code }).then(res => {
|
||||
res.data.forEach(item => {
|
||||
console.log(item);
|
||||
name = item.streetName;
|
||||
arr.push(item);
|
||||
});
|
||||
name = res.data[0].streetName;
|
||||
@ -786,7 +793,7 @@ const alter = () => {
|
||||
const cun = () => {
|
||||
layers = new ol.layer.Tile({
|
||||
source: new ol.source.TileSuperMapRest({
|
||||
url: 'http://36.134.44.75:8090/iserver/services/map-huangdaoqu_bianjie/rest/maps/huangdaoqu_village@huangdaoqu_bianjie',
|
||||
url: 'http://36.134.44.75:8090/iserver/services/map-huangdaoqu_bianjie/rest/maps/CJQY3702112019WGS84%40huangdaoqu_bianjie',
|
||||
//rasterfunction: new SuperMap.NDVIParameter({ redIndex: 0, nirIndex: 2 }),
|
||||
cacheEnabled: false,
|
||||
}),
|
||||
@ -801,7 +808,7 @@ const cun = () => {
|
||||
const zhen = () => {
|
||||
var layer = new ol.layer.Tile({
|
||||
source: new ol.source.TileSuperMapRest({
|
||||
url: 'http://36.134.44.75:8090/iserver/services/map-huangdaoqu_bianjie/rest/maps/huangdaoqu_town@huangdaoqu_bianjie',
|
||||
url: 'http://36.134.44.75:8090/iserver/services/map-huangdaoqu_bianjie/rest/maps/XJQY3702112019WGS84%40huangdaoqu_bianjie',
|
||||
//rasterfunction: new SuperMap.NDVIParameter({ redIndex: 0, nirIndex: 2 }),
|
||||
cacheEnabled: false,
|
||||
}),
|
||||
@ -904,6 +911,16 @@ watch(
|
||||
selectTab();
|
||||
}
|
||||
);
|
||||
watch(
|
||||
() => oldDatas.value,
|
||||
(val, oldVal) => {
|
||||
value.value = '370211';
|
||||
getareaStatisticsDroughts(value.value, oldDatas.value.name); //干旱等级面积统计
|
||||
getproportionOfAreas(value.value, oldDatas.value.name); //干旱等级面积占比
|
||||
geteachFreezingGradeAreas(oldDatas.value.name); //高标准农田干旱等级面积占比
|
||||
getTownships(value.value, oldDatas.value.name); //镇
|
||||
}
|
||||
);
|
||||
let nums = 0;
|
||||
// 农作物
|
||||
watch(
|
||||
@ -958,7 +975,7 @@ const onSubmit = () => {
|
||||
let brr = [];
|
||||
currentPage.value = 1;
|
||||
getlistDroughts({
|
||||
time: formInline.value.time,
|
||||
yearMonth: formInline.value.time,
|
||||
statistical: formInline.value.statistical,
|
||||
droughtRating: formInline.value.droughtRating,
|
||||
area: formInline.value.area,
|
||||
@ -1077,6 +1094,10 @@ const resetForm = () => {
|
||||
//列表模式-年
|
||||
const theTimes = () => {
|
||||
getlistDroughtsYear().then(res => {
|
||||
oldDatas.value = { name: res.data[0] };
|
||||
res.data.forEach(item => {
|
||||
dataSource.value.push({ name: item });
|
||||
});
|
||||
timeArr.value = res.data;
|
||||
formInline.value.time = res.data[0];
|
||||
onSubmit();
|
||||
@ -1084,10 +1105,10 @@ const theTimes = () => {
|
||||
};
|
||||
|
||||
//干旱等级面积统计
|
||||
const getareaStatisticsDroughts = city => {
|
||||
const getareaStatisticsDroughts = (city, time) => {
|
||||
areacharLable = ref([]);
|
||||
areacharPrice = ref([]);
|
||||
getareaStatisticsDrought({ divisions: city }).then(res => {
|
||||
getareaStatisticsDrought({ divisions: city, yearMonth: time }).then(res => {
|
||||
res.data.forEach(item => {
|
||||
areacharLable.value.push(item.level);
|
||||
areacharPrice.value.push(item.area);
|
||||
@ -1096,23 +1117,25 @@ const getareaStatisticsDroughts = city => {
|
||||
});
|
||||
};
|
||||
//干旱等级面积占比
|
||||
const getproportionOfAreas = city => {
|
||||
typesofData = ref([]);
|
||||
tableData = ref([]);
|
||||
totalArea = ref(0);
|
||||
getproportionOfArea({ divisions: city }).then(res => {
|
||||
const getproportionOfAreas = (city, time) => {
|
||||
let tableArr = ref([]);
|
||||
getproportionOfArea({ divisions: city, yearMonth: time }).then(res => {
|
||||
typesofData = ref([]);
|
||||
totalArea = ref(0);
|
||||
res.data.forEach(item => {
|
||||
totalArea.value += Number(item.area);
|
||||
typesofData.value.push({
|
||||
name: item.level,
|
||||
value: Number(item.area).toFixed(2),
|
||||
});
|
||||
tableData.value.push({
|
||||
tableArr.value.push({
|
||||
date: item.level,
|
||||
name: `${Number(item.area).toFixed(2)}`,
|
||||
address: `${(item.percentage * 100).toFixed(2)}%`,
|
||||
});
|
||||
});
|
||||
tableData.value = tableArr.value;
|
||||
console.log(tableData);
|
||||
typesof();
|
||||
});
|
||||
};
|
||||
@ -1120,8 +1143,8 @@ const getproportionOfAreas = city => {
|
||||
// { region: '山东', 湿润: '张三', 适宜: 333, 轻度干旱: 22 ,中度干旱:22,重度干旱:33,area:44},
|
||||
|
||||
let excel = ref([{}]);
|
||||
const geteachFreezingGradeAreas = () => {
|
||||
geteachFreezingGradeArea().then(res => {
|
||||
const geteachFreezingGradeAreas = time => {
|
||||
geteachFreezingGradeArea({ yearMonth: time }).then(res => {
|
||||
highStandard.forEach((item, index) => {
|
||||
let town = res.data.map(i => {
|
||||
if (item === i.region) {
|
||||
@ -1148,8 +1171,8 @@ const geteachFreezingGradeAreas = () => {
|
||||
};
|
||||
|
||||
//镇
|
||||
const getTownships = city => {
|
||||
getTownship({ divisions: city }).then(res => {
|
||||
const getTownships = (city, time) => {
|
||||
getTownship({ divisions: city, yearMonth: time }).then(res => {
|
||||
Township.brr = res.data;
|
||||
Township.arr = res.data.sort((a, b) => {
|
||||
return a.streetName.length - b.streetName.length;
|
||||
@ -1200,7 +1223,7 @@ const getTownships = city => {
|
||||
});
|
||||
};
|
||||
//村
|
||||
const getadministratives = city => {
|
||||
const getadministratives = (city, time) => {
|
||||
dd = {
|
||||
适宜: [],
|
||||
湿润: [],
|
||||
@ -1208,7 +1231,7 @@ const getadministratives = city => {
|
||||
中度干旱: [],
|
||||
重度干旱: [],
|
||||
};
|
||||
getadministrative({ divisions: city }).then(res => {
|
||||
getadministrative({ divisions: city, yearMonth: time }).then(res => {
|
||||
Township.brr = res.data;
|
||||
let arr = [...res.data];
|
||||
let brr = [];
|
||||
@ -1239,76 +1262,14 @@ const getadministratives = city => {
|
||||
|
||||
const selectTab = () => {
|
||||
if (value.value == '370211') {
|
||||
getTownships(); //更新镇的数据
|
||||
ASdivision();
|
||||
getareaStatisticsDroughts('370211');
|
||||
getproportionOfAreas('370211');
|
||||
areachar();
|
||||
typesof();
|
||||
return;
|
||||
getTownships(value.value, oldDatas.value.name); //更新镇的数据
|
||||
getareaStatisticsDroughts(value.value, oldDatas.value.name);
|
||||
getproportionOfAreas(value.value, oldDatas.value.name);
|
||||
} else {
|
||||
getadministratives(value.value);
|
||||
getareaStatisticsDroughts(value.value);
|
||||
getproportionOfAreas(value.value);
|
||||
getadministratives(value.value, oldDatas.value.name);
|
||||
getareaStatisticsDroughts(value.value, oldDatas.value.name);
|
||||
getproportionOfAreas(value.value, oldDatas.value.name);
|
||||
}
|
||||
|
||||
// let arr = [...Township.arr];
|
||||
// console.log('arr:', arr);
|
||||
// arr.forEach(item => {
|
||||
// if (item.properties.XZDM == value.value) {
|
||||
// viewer.camera.flyTo({
|
||||
// destination: Cesium.Rectangle.fromDegrees(
|
||||
// item.bbox[0],
|
||||
// item.bbox[1],
|
||||
// item.bbox[2],
|
||||
// item.bbox[3]
|
||||
// ),
|
||||
// duration: 2,
|
||||
// });
|
||||
// }
|
||||
// let arr = [...Township.brr];
|
||||
// let brr = [];
|
||||
// // console.log(Township.brr);
|
||||
// arr.forEach(item => {
|
||||
// if (item.properties.XZDM == value.value) {
|
||||
// brr.push(item.properties.XZQMC);
|
||||
// }
|
||||
// });
|
||||
// // console.log(brr);
|
||||
// data.title = [...Object.values(brr)];
|
||||
// });
|
||||
// ASdivision();
|
||||
// areachar();
|
||||
// typesof();
|
||||
// let town = [...Township.arr];
|
||||
// const townData = town.find(item => item.properties.XZDM === value.value);
|
||||
// if (townData) {
|
||||
// // 移除镇高亮
|
||||
// deleteEntityByName('townLine');
|
||||
// // 高亮镇边界
|
||||
// addBoundaryHandle(townData.geometry.coordinates, 'townLine', 'yellow');
|
||||
// }
|
||||
// 移除以前村
|
||||
// removeWms(['aaa']);
|
||||
// // 添加村
|
||||
// addvillage(`XZDM=${value.value}`, 'aaa');
|
||||
// getarea({ time: '2023-04-26', subregion: '1', parent: '黄岛区' }).then(res => {
|
||||
// let arr = [];
|
||||
// res.data.map((item, index) => {
|
||||
// if (item.region == townData.properties.XZMC) {
|
||||
// arr.push({
|
||||
// crop: item.type,
|
||||
// Shape_Area: item.area,
|
||||
// });
|
||||
// }
|
||||
// });
|
||||
// townZuowu.value = {
|
||||
// label: arr,
|
||||
// };
|
||||
// console.log();
|
||||
// console.log(arr);
|
||||
// showOverlayChart({ x: 642, y: 312 });
|
||||
// });
|
||||
};
|
||||
|
||||
//下载
|
||||
@ -1434,7 +1395,9 @@ const dowcity = () => {
|
||||
insectarr.value.push(arr);
|
||||
exportExcel(insectarr.value, '干旱面积统计表', 'Sheet1');
|
||||
};
|
||||
|
||||
const handleData = oldData => {
|
||||
oldDatas.value = oldData;
|
||||
};
|
||||
/*-------------echarts--------------*/
|
||||
function areachar() {
|
||||
const areaDivIntance = echarts.init(areaDiv.value);
|
||||
@ -3050,12 +3013,12 @@ $height: calc(100vh - 100px);
|
||||
/*设置弹出框样式*/
|
||||
.ol-popup {
|
||||
position: absolute;
|
||||
background-color: #eeeeee;
|
||||
// background-color: #eeeeee;
|
||||
-webkit-filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
|
||||
filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
|
||||
padding: 15px;
|
||||
// padding: 15px;
|
||||
border-radius: 10px;
|
||||
border: 1px solid #cccccc;
|
||||
// border: 1px solid #cccccc;
|
||||
bottom: 12px;
|
||||
left: -50px;
|
||||
min-width: 280px;
|
||||
@ -3085,22 +3048,59 @@ $height: calc(100vh - 100px);
|
||||
.ol-popup-closer {
|
||||
text-decoration: none;
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
top: 11px;
|
||||
right: 8px;
|
||||
color: rgba(47, 214, 214, 1) !important;
|
||||
}
|
||||
.ol-popup-closer:after {
|
||||
content: '✖';
|
||||
}
|
||||
#popup {
|
||||
border-radius: 5px;
|
||||
background: rgba(2, 31, 26, 1);
|
||||
// display: none;
|
||||
// justify-content: flex-start;
|
||||
// align-items: flex-end;
|
||||
padding: 30px 8px 20px 8px;
|
||||
color: #fff;
|
||||
box-shadow: inset 0px 0px 15px 6px rgba(41, 255, 255, 0.5);
|
||||
border: rgba(41, 255, 255, 1);
|
||||
.pophead {
|
||||
background-image: url('@/assets/images/top.png') !important;
|
||||
background-repeat: no-repeat;
|
||||
height: 42px;
|
||||
opacity: 1;
|
||||
background: linear-gradient(270deg, rgba(19, 92, 98, 0.4) 0%, rgba(19, 92, 98, 1) 100%);
|
||||
}
|
||||
#popup-content {
|
||||
background: url('@/assets/images/bottom.png') no-repeat !important;
|
||||
background-size: 100% 100% !important;
|
||||
width: 522px;
|
||||
height: 205px;
|
||||
opacity: 1;
|
||||
background: rgba(2, 31, 26, 0.7);
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
.perform {
|
||||
width: 50%;
|
||||
margin: 20px 0;
|
||||
display: flex;
|
||||
}
|
||||
.perform_children {
|
||||
width: 223px;
|
||||
height: 28px;
|
||||
line-height: 28px;
|
||||
font-size: 14px;
|
||||
background: linear-gradient(
|
||||
270deg,
|
||||
rgba(19, 92, 98, 0) 0%,
|
||||
rgba(33, 169, 169, 0.36) 100%
|
||||
);
|
||||
padding-left: 18px;
|
||||
display: flex;
|
||||
background: url('@/assets/images/duande.png') no-repeat !important;
|
||||
background-size: 100% 100% !important;
|
||||
.label {
|
||||
color: rgba(47, 214, 214, 1);
|
||||
}
|
||||
span {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#pop {
|
||||
|
||||
@ -233,13 +233,13 @@
|
||||
:size="formSize"
|
||||
status-icon
|
||||
>
|
||||
<el-form-item label="台风过境持续时间" prop="name">
|
||||
<el-form-item label="台风过境持续时间" prop="duration">
|
||||
<el-input v-model="ruleForm.duration">
|
||||
<template #append>小时</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="风力等级" prop="power">
|
||||
<el-input disabled v-model="ruleForm.power">
|
||||
<el-input v-model="ruleForm.power">
|
||||
<template #append>级</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
@ -394,49 +394,17 @@ const rules = reactive({
|
||||
power: [
|
||||
{
|
||||
required: true,
|
||||
message: 'Please select Activity zone',
|
||||
message: '请输入风力等级',
|
||||
trigger: 'change',
|
||||
},
|
||||
],
|
||||
count: [
|
||||
duration: [
|
||||
{
|
||||
required: true,
|
||||
message: 'Please select Activity count',
|
||||
message: '请输入过境时间',
|
||||
trigger: 'change',
|
||||
},
|
||||
],
|
||||
date1: [
|
||||
{
|
||||
type: 'date',
|
||||
required: true,
|
||||
message: 'Please pick a date',
|
||||
trigger: 'change',
|
||||
},
|
||||
],
|
||||
date2: [
|
||||
{
|
||||
type: 'date',
|
||||
required: true,
|
||||
message: 'Please pick a time',
|
||||
trigger: 'change',
|
||||
},
|
||||
],
|
||||
type: [
|
||||
{
|
||||
type: 'array',
|
||||
required: true,
|
||||
message: 'Please select at least one activity type',
|
||||
trigger: 'change',
|
||||
},
|
||||
],
|
||||
resource: [
|
||||
{
|
||||
required: true,
|
||||
message: 'Please select activity resource',
|
||||
trigger: 'change',
|
||||
},
|
||||
],
|
||||
desc: [{ required: true, message: 'Please input activity form', trigger: 'blur' }],
|
||||
});
|
||||
watch(
|
||||
() => value1.value,
|
||||
@ -456,33 +424,15 @@ watch(
|
||||
var data = {
|
||||
title: [],
|
||||
};
|
||||
let dd = {
|
||||
小麦: [],
|
||||
玉米: [],
|
||||
大豆: [],
|
||||
地瓜: [],
|
||||
花生: [],
|
||||
蓝莓: [],
|
||||
茶叶: [],
|
||||
马铃薯: [],
|
||||
白菜和萝卜: [],
|
||||
其他: [],
|
||||
};
|
||||
|
||||
let areatext = '8383894';
|
||||
//表格数据
|
||||
let tableData = ref([]);
|
||||
let TypeTime = {
|
||||
大豆: [1100, 1395, 1948, 2203, 3402, 1860, 2934, 2490, 2323],
|
||||
小麦: [1283, 2883, 2939, 1233, 1992, 1928, 3949, 1929, 3434],
|
||||
地瓜: [1823, 1948, 1928, 2294, 2302, 3903, 3493, 2323, 2545],
|
||||
花生: [2374, 1934, 3943, 3493, 2083, 1928, 2984, 3279, 1739],
|
||||
};
|
||||
|
||||
// 组件挂载完成后执行
|
||||
onMounted(() => {
|
||||
//地图
|
||||
initMap();
|
||||
getFarmland();
|
||||
getytyphoons(); //默认展示
|
||||
getyears(); //年
|
||||
gettyphoonDamageSelects();
|
||||
@ -568,11 +518,11 @@ function initMap() {
|
||||
viewer.cesiumWidget.creditContainer.style.display = 'none';
|
||||
|
||||
viewer.scene.screenSpaceCameraController.minimumZoomDistance = 450; //相机的高度的最小值
|
||||
viewer.scene.screenSpaceCameraController.maximumZoomDistance = 720000; //相机高度的最大值
|
||||
viewer.scene.screenSpaceCameraController._minimumZoomRate = 30000; // 设置相机缩小时的速率
|
||||
viewer.scene.screenSpaceCameraController._maximumZoomRate = 5906376272000; //设置相机放大时的速率
|
||||
// viewer.scene.screenSpaceCameraController.maximumZoomDistance = 720000; //相机高度的最大值
|
||||
// viewer.scene.screenSpaceCameraController._minimumZoomRate = 30000; // 设置相机缩小时的速率
|
||||
// viewer.scene.screenSpaceCameraController._maximumZoomRate = 5906376272000; //设置相机放大时的速率
|
||||
|
||||
addWms('huangdaoqu_town', 'huangdaoqu_town');
|
||||
addWms('huangdaoqu_bianjie', 'XJQY3702112019WGS84');
|
||||
viewer.camera.flyTo({
|
||||
destination: Cesium.Rectangle.fromDegrees(119.5091, 35.5671, 120.3285, 36.1455),
|
||||
duration: 0,
|
||||
@ -580,8 +530,6 @@ function initMap() {
|
||||
|
||||
// 图层点击事件
|
||||
// layerClick();
|
||||
// 蒙版
|
||||
mbHandle();
|
||||
}
|
||||
|
||||
// data数据数组
|
||||
@ -654,150 +602,9 @@ function getLevel(height) {
|
||||
return 18;
|
||||
}
|
||||
}
|
||||
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 townZuowu = ref({ label: [] }); //镇的作物
|
||||
let XZDM = '';
|
||||
// 图层点击事件
|
||||
function layerClick() {
|
||||
var handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas);
|
||||
handler.setInputAction(function (movement) {
|
||||
var ray = viewer.camera.getPickRay(movement.position);
|
||||
var cartesian = viewer.scene.globe.pick(ray, viewer.scene);
|
||||
if (cartesian) {
|
||||
let cartographic = Cesium.Cartographic.fromCartesian(cartesian);
|
||||
if (cartographic) {
|
||||
let xy = new Cesium.Cartesian2();
|
||||
let alti = viewer.camera.positionCartographic.height;
|
||||
let level = getLevel(alti);
|
||||
const layers = viewer.imageryLayers._layers;
|
||||
// 筛选出黄岛区服务
|
||||
const index = layers.findIndex(
|
||||
item =>
|
||||
item._imageryProvider._layers &&
|
||||
item._imageryProvider._layers === 'shuzisannong:huangdaoqu_town'
|
||||
);
|
||||
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'];
|
||||
if (newData.properties && newData.properties.XZDM) {
|
||||
console.log('XZDM:', XZDM);
|
||||
console.log(
|
||||
'newData.properties.XZDM:',
|
||||
newData.properties.XZDM
|
||||
);
|
||||
if (XZDM !== newData.properties.XZDM) {
|
||||
flag.value = true;
|
||||
//防止重复加载
|
||||
XZDM = newData.properties.XZDM;
|
||||
value.value = XZDM; //
|
||||
if (selectTab) {
|
||||
selectTab(); //
|
||||
}
|
||||
let item = newData.data;
|
||||
// 定位
|
||||
viewer.camera.flyTo({
|
||||
destination: Cesium.Rectangle.fromDegrees(
|
||||
item.bbox[0],
|
||||
item.bbox[1],
|
||||
item.bbox[2],
|
||||
item.bbox[3]
|
||||
),
|
||||
duration: 2,
|
||||
});
|
||||
// 移除高亮
|
||||
deleteEntityByName('townLine');
|
||||
// 高亮边界
|
||||
addBoundaryHandle(
|
||||
item.geometry && item.geometry.coordinates,
|
||||
'townLine',
|
||||
'yellow'
|
||||
);
|
||||
// 移除以前的
|
||||
removeWms(['village_CQL']);
|
||||
// 添加新的
|
||||
addvillage(
|
||||
`XZDM=${newData.properties.XZDM}`,
|
||||
'village_CQL'
|
||||
);
|
||||
|
||||
// 显示该镇的种植结构
|
||||
let entitys = viewer.entities._entities._array;
|
||||
for (var na = entitys.length - 1; na >= 0; na--) {
|
||||
if (
|
||||
entitys[na]._name &&
|
||||
entitys[na]._name ===
|
||||
'point' + newData.properties.XZDM
|
||||
) {
|
||||
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
|
||||
);
|
||||
} else {
|
||||
// if (entitys[na].label) {
|
||||
// entitys[na].label.show = false
|
||||
// }
|
||||
}
|
||||
}
|
||||
// 移除村高亮
|
||||
deleteEntityByName('villageLine');
|
||||
XZQDM = '';
|
||||
} else {
|
||||
// // 已经有镇了，监听村点击
|
||||
villageClick(layers, xy, level, cartographic, movement);
|
||||
}
|
||||
} else {
|
||||
removeWms(['village_CQL']);
|
||||
// 移除框框
|
||||
hiddenOverlayChart(); // 清除监听事件
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
|
||||
}
|
||||
let XZQDM = '';
|
||||
// 村点击高亮
|
||||
function villageClick(layers, xy, level, cartographic, movement) {
|
||||
@ -980,6 +787,9 @@ const submitForm = async formEl => {
|
||||
if (ruleForm.value.duration.length < 1) {
|
||||
ElMessage.error('请输入过境时间');
|
||||
return;
|
||||
}else if(ruleForm.value.power.length < 1){
|
||||
ElMessage.error('请输入风力等级');
|
||||
return;
|
||||
} else {
|
||||
centerDialogVisible.value = false;
|
||||
const loadingInstance = ElLoading.service({
|
||||
@ -2384,7 +2194,7 @@ function soil() {
|
||||
function addWms(layers, customName, bottom) {
|
||||
let map = new Cesium.WebMapServiceImageryProvider({
|
||||
url: serverAPI.geoserverUrl + `/map-${layers}/wms111/`,
|
||||
layers: layers + '@' + layers, //图层名
|
||||
layers: customName + '@' + layers, //图层名
|
||||
parameters: {
|
||||
service: 'WMS',
|
||||
format: 'image/png',
|
||||
@ -2502,29 +2312,6 @@ function getAreaFenlei() {
|
||||
.catch(err => {});
|
||||
}
|
||||
let fenleiRef = ref({});
|
||||
function mbHandle() {
|
||||
axios({
|
||||
url:
|
||||
serverAPI.geoserverUrl +
|
||||
'/shuzisannong/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=shuzisannong%3Afenlei&maxFeatures=137&outputFormat=application%2Fjson',
|
||||
})
|
||||
.then(res => {
|
||||
let features = res.data.features;
|
||||
let town = {};
|
||||
// 按镇分类
|
||||
features.forEach(item => {
|
||||
let key = item.properties.town;
|
||||
if (town[key]) {
|
||||
town[key].push(item);
|
||||
} else {
|
||||
town[key] = [item];
|
||||
}
|
||||
});
|
||||
fenleiRef.value = town;
|
||||
getAreaFenlei();
|
||||
})
|
||||
.catch(err => {});
|
||||
}
|
||||
|
||||
// 地图移动时弹窗跟随
|
||||
function infoWindowPostRender() {
|
||||
@ -2933,7 +2720,7 @@ $height: calc(100vh - 100px);
|
||||
flex-direction: column;
|
||||
padding: 5px 10px 5px 10px;
|
||||
color: rgba(255, 255, 255, 1);
|
||||
height: 100%;
|
||||
height: 95%;
|
||||
:deep(.el-table--fit) {
|
||||
height: 100;
|
||||
}
|
||||
@ -3355,7 +3142,7 @@ $height: calc(100vh - 100px);
|
||||
color: rgba(255, 255, 255, 1) !important;
|
||||
}
|
||||
:deep(.el-input__wrapper) {
|
||||
border-top-right-radius:0 ;
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
box-shadow: none;
|
||||
background: rgba(22, 94, 102, 1);
|
||||
@ -3364,6 +3151,9 @@ $height: calc(100vh - 100px);
|
||||
box-shadow: none;
|
||||
background: rgba(22, 94, 102, 1);
|
||||
}
|
||||
.el-form-item__label{
|
||||
color:#fff;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style lang="scss">
|
||||
|
||||
@ -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 {
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -95,7 +95,7 @@
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="!flags" class="cesiumContainersDiv">
|
||||
<div v-show="!flags" class="cesiumContainersDiv">
|
||||
<div id="cesiumContainers" class="detailed"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
1357
src/views/plough/agriculturization/index.vue
Normal file
1357
src/views/plough/agriculturization/index.vue
Normal file
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user