This commit is contained in:
2023-07-11 08:43:34 +08:00
parent d0eea9c22a
commit 79894eb7e8
257 changed files with 2056 additions and 1503 deletions

View File

@ -357,7 +357,6 @@ import { useEcharts } from '@/hooks/useEcharts';
import {
getTownship,
getvillage,
getareas,
getcropper,
getcropTypeStatistics,
gethighStandard,
@ -880,14 +879,14 @@ let dd = {
};
let dic = {
小麦: { color: 'rgba(25, 196, 22, 1)', disabled: false },
玉米: { color: 'rgba(255, 240, 26, 1)', disabled: true },
玉米: { color: 'rgba(255, 240, 26, 1)', disabled: false },
大豆: { color: 'rgba(255, 184, 148, 1)', disabled: false },
地瓜: { color: 'rgba(255, 18, 18, 1)', disabled: false },
花生: { color: 'rgba(255, 140, 255, 1)', disabled: false },
蓝莓: { color: ' rgba(0, 153, 255, 1)', disabled: false },
茶叶: { color: 'rgba(0, 209, 195, 1)', disabled: false },
马铃薯: { color: 'rgba(253, 127, 1, 1)', disabled: true },
白菜和萝卜: { color: 'rgba(201, 255, 148, 1)', disabled: true },
马铃薯: { color: 'rgba(253, 127, 1, 1)', disabled: false },
白菜和萝卜: { color: 'rgba(201, 255, 148, 1)', disabled: false },
其他: { color: 'rgba(166, 224, 255, 1)', disabled: false },
};
// 图层字典
@ -1103,7 +1102,6 @@ onMounted(() => {
// 初始化
function initonMounted() {
theTimes(); //年
getaArea(); //面积
//地图
initmap();
showDaChangArea();
@ -1128,9 +1126,11 @@ function initonMounted() {
}
onUpdated(() => {
if (localStorage.getItem(router.currentRoute.value.path) == 'false') {
document.querySelector('.mode').style.display = 'block';
document.querySelector('.mode').innerText = '地图模式';
window.document.querySelector('#screenfull').style.display = 'none';
} else {
document.querySelector('.mode').style.display = 'block';
document.querySelector('.mode').innerText = '列表模式';
window.document.querySelector('#screenfull').style.display = 'block';
}
@ -1228,14 +1228,14 @@ 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());
addConver(ft.getGeometry().getCoordinates(), 'huandao');
});
}
//添加遮罩
function addConver(data) {
function addConver(data, name) {
let source = new ol.source.Vector();
var converLayer = new ol.layer.Vector({
id: 'zhezhao',
id: name ? name : 'zhezhao',
source: source,
style: new ol.style.Style({
fill: new ol.style.Fill({
@ -1326,9 +1326,8 @@ 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 = [];
getTownship('370211').then(res => {
getTownship({ divisions: '370211', yearMonth: oldDatas.value.name }).then(res => {
res.data.forEach(item => {
if (item.tomeCode == code) {
name = item.tomeName;
@ -1344,7 +1343,7 @@ function QueryData(e, name, url, item) {
) {
let code = data.result.recordsets[0].features.features[0].properties.CJQYDM;
let arr = [];
getAdministrativeChun({ divisions: code }).then(res => {
getAdministrativeChun({ divisions: code, yearMonth: oldDatas.value.name }).then(res => {
res.data.forEach(item => {
arr.push(item);
});
@ -1671,7 +1670,7 @@ const getTownships = (city, time) => {
});
};
//村
const getvillages = city => {
const getvillages = (city, time) => {
dd = {
小麦: [],
玉米: [],
@ -1684,7 +1683,7 @@ const getvillages = city => {
白菜和萝卜: [],
其他: [],
};
getvillage({ divisions: city }).then(res => {
getvillage({ divisions: city, yearMonth: time }).then(res => {
Township.brr = res.data;
let arr = [...res.data];
let brr = [];
@ -1713,33 +1712,6 @@ const getvillages = city => {
ASdivision();
});
};
//面积
const getaArea = () => {
let arr = [];
let a = {};
getareas().then(res => {
if (res.features) {
Township.crr = res.features;
data.title.forEach((item, indexs) => {
let town = res.features.map(i => {
if (item === i.properties.town) {
return i.properties;
}
});
Object.keys(dd).forEach(it => {
const index = town.findIndex(a => a && a.crop === it);
if (index > -1) {
dd[it].push(1);
} else {
dd[it].push(null);
}
});
});
}
ASdivision();
// selectTab();
});
};
//作物分类面积统计
const getcroppers = (city, time) => {
@ -1853,7 +1825,6 @@ const getlistModes = value => {
function areachar() {
if (areaDiv.value) {
const areaDivIntance = echarts.init(areaDiv.value);
console.log(classData);
let option = {
// backgroundColor: 'rgba(255, 255, 255, 0.1)',
textStyle: {
@ -2018,7 +1989,7 @@ function areachar() {
],
tooltip: {
show: true,
formatter: '面积:{c0}',
// formatter: '面积:{c0}',
},
};
// option && areaDivIntance.setOption(option);
@ -2547,7 +2518,7 @@ function farmland() {
},
},
},
{
{
name: '地瓜',
type: 'bar',
barWidth: 12,
@ -2569,6 +2540,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(255, 240, 26, 1)',
},
{
offset: 0,
color: 'rgba(255, 240, 26, 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(253, 127, 1, 1)',
},
{
offset: 0,
color: 'rgba(253, 127, 1, 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(201, 255, 148, 1)',
},
{
offset: 0,
color: 'rgba(201, 255, 148, 1)',
},
]),
},
},
},
{
name: '其他',
type: 'bar',
@ -2960,6 +2997,120 @@ function ASdivision() {
},
data: dd.蓝莓, // 系列中的数据内容数组
},
{
type: 'bar', // 系列类型
name: '玉米', // 系列名称, 用于tooltip的显示, legend 的图例筛选
// 数据堆叠同个类目轴上系列配置相同的stack值后后一个系列的值会在前一个系列的值上相加
stack: '总量',
barMaxWidth: 30, // 柱条的最大宽度,不设时自适应
// 图形上的文本标签
label: {
show: true,
position: 'inside',
formatter: '玉米',
textStyle: {
fontSize: 12,
fontWeight: 'bolder',
color: 'black',
},
},
// 图形样式
itemStyle: {
barBorderRadius: [0, 0, 0, 0],
barBorderRadius: [0, 0, 0, 0], //
borderWidth: 1, // 设置边框宽度
borderColor: 'rgba(255, 240, 26, 1)', // 设置边框颜色
color: {
colorStops: [
{
offset: 0,
color: ' rgba(255, 240, 26, 1)', // 0% 处的颜色
},
{
offset: 1,
color: ' rgba(255, 240, 26, 1)', // 100% 处的颜色
},
],
},
},
data: dd.玉米, // 系列中的数据内容数组
},
{
type: 'bar', // 系列类型
name: '马铃薯', // 系列名称, 用于tooltip的显示, legend 的图例筛选
// 数据堆叠同个类目轴上系列配置相同的stack值后后一个系列的值会在前一个系列的值上相加
stack: '总量',
barMaxWidth: 30, // 柱条的最大宽度,不设时自适应
// 图形上的文本标签
label: {
show: true,
position: 'inside',
formatter: '马铃薯',
textStyle: {
fontSize: 12,
fontWeight: 'bolder',
color: 'black',
},
},
// 图形样式
itemStyle: {
barBorderRadius: [0, 0, 0, 0],
barBorderRadius: [0, 0, 0, 0], //
borderWidth: 1, // 设置边框宽度
borderColor: 'rgba(253, 127, 1, 1)', // 设置边框颜色
color: {
colorStops: [
{
offset: 0,
color: ' rgba(253, 127, 1, 1)', // 0% 处的颜色
},
{
offset: 1,
color: ' rgba(253, 127, 1, 1)', // 100% 处的颜色
},
],
},
},
data: dd.马铃薯, // 系列中的数据内容数组
},
{
type: 'bar', // 系列类型
name: '白菜和萝卜', // 系列名称, 用于tooltip的显示, legend 的图例筛选
// 数据堆叠同个类目轴上系列配置相同的stack值后后一个系列的值会在前一个系列的值上相加
stack: '总量',
barMaxWidth: 30, // 柱条的最大宽度,不设时自适应
// 图形上的文本标签
label: {
show: true,
position: 'inside',
formatter: '白菜和萝卜',
textStyle: {
fontSize: 12,
fontWeight: 'bolder',
color: 'black',
},
},
// 图形样式
itemStyle: {
barBorderRadius: [0, 0, 0, 0],
barBorderRadius: [0, 0, 0, 0], //
borderWidth: 1, // 设置边框宽度
borderColor: 'rgba(201, 255, 148, 1)', // 设置边框颜色
color: {
colorStops: [
{
offset: 0,
color: ' rgba(201, 255, 148, 1)', // 0% 处的颜色
},
{
offset: 1,
color: ' rgba(201, 255, 148, 1)', // 100% 处的颜色
},
],
},
},
data: dd.白菜和萝卜, // 系列中的数据内容数组
},
{
type: 'bar', // 系列类型
name: '其他', // 系列名称, 用于tooltip的显示, legend 的图例筛选
@ -3855,7 +4006,7 @@ $height: calc(100vh - 100px);
align-items: center;
justify-content: space-between;
p {
width: 223px;
width: 50%;
height: 28px;
line-height: 28px;
font-size: 14px;

View File

@ -388,6 +388,7 @@ let amount = ref([
wheatOutput: 0,
},
]);
let yearTime = ref('');
//搜索
let formInline = ref({
time: '',
@ -397,7 +398,6 @@ let formInline = ref({
});
let layers = ref(null); //村
// 组件挂载完成后执行
onMounted(() => {
initonMounted();
@ -412,8 +412,10 @@ function initonMounted() {
}
onUpdated(() => {
if (localStorage.getItem(router.currentRoute.value.path) == 'false') {
document.querySelector('.mode').style.display = 'block';
document.querySelector('.mode').innerText = '地图模式';
} else {
document.querySelector('.mode').style.display = 'block';
document.querySelector('.mode').innerText = '列表模式';
}
});
@ -421,9 +423,9 @@ 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); //镇级
getwheatTotalYearValues(value.value, oldDatas.value.name); //作物产量预估
getwheatHeightStandardFarmlands(value.value, oldDatas.value.name); //高标准农田
getwheatGetAllTownss(value.value, oldDatas.value.name); //镇级
}
);
/*-------------地图------------------------*/
@ -597,11 +599,19 @@ const SwitchMode = () => {
chartModes();
};
const resetForm = () => {
(formInline.value.year = yearTime.value), (formInline.value.statistical = '镇');
formInline.value.droughtRating = '小麦';
formInline.value.area = num.value;
onSubmit()
};
/*------------------接口--------------------*/
//列表模式年
const getparameterEstimationYears = () => {
getparameterEstimationYear().then(res => {
yearTime.value = { name: res.data[0] };
oldDatas.value = { name: res.data[0] };
res.data.forEach(item => {
dataSource.value.push({ name: item });
@ -613,22 +623,22 @@ const getparameterEstimationYears = () => {
};
//产量预估
const getwheatTotalYearValues = (city,time) => {
getwheatTotalYearValue({ divisions: city , yearMonth:time}).then(res => {
const getwheatTotalYearValues = (city, time) => {
getwheatTotalYearValue({ divisions: city, yearMonth: time }).then(res => {
estimate.value = res.data;
areachar();
});
};
//高标准农田
const getwheatHeightStandardFarmlands = (city ,time)=> {
getwheatHeightStandardFarmland({ divisions: city , yearMonth:time}).then(res => {
const getwheatHeightStandardFarmlands = (city, time) => {
getwheatHeightStandardFarmland({ divisions: city, yearMonth: time }).then(res => {
standardArr.value = res.data;
farmland();
});
};
//镇
const getwheatGetAllTownss = (city ,time) => {
getwheatGetAllTowns({ divisions: city , yearMonth:time}).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) => {
@ -709,7 +719,6 @@ const Deta3 = item => {
};
const dowcity = () => {
let arr = JSON.parse(JSON.stringify(amount.value[0]));
console.log(arr);
insectarr.value.push(arr);
exportExcel(insectarr.value, '干旱面积统计表', 'Sheet1');
};

View File

@ -318,7 +318,7 @@
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">查询</el-button>
<el-button plain @click="resetForm" :disabled="!SwitchFlag ? true : false">
<el-button plain @click="resetForm" >
重置
</el-button>
<el-button v-if="!operate" type="primary" text @click="dowcity">
@ -623,9 +623,11 @@ function initonMounted() {
onUpdated(() => {
if (localStorage.getItem(router.currentRoute.value.path) == 'false') {
document.querySelector('.mode').style.display = 'block';
document.querySelector('.mode').innerText = '地图模式';
window.document.querySelector('#screenfull').style.display = 'none';
} else {
document.querySelector('.mode').style.display = 'block';
document.querySelector('.mode').innerText = '列表模式';
window.document.querySelector('#screenfull').style.display = 'block';
}
@ -739,7 +741,7 @@ 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());
addConver(ft.getGeometry().getCoordinates(),'huandao');
});
}
@ -766,7 +768,7 @@ function QueryData(e, name, url, item) {
let code = data.result.recordsets[0].features.features[0].properties.XJQYDM;
value.value = code;
let arr = [];
getgradeStatistics({ divisions: '370211', yearMonth: '2023-05' }).then(res => {
getgradeStatistics({ divisions: '370211', yearMonth: oldDatas.value.name }).then(res => {
res.data.forEach(item => {
if (item.subregion == code) {
name = item.subregionName;
@ -779,7 +781,7 @@ function QueryData(e, name, url, item) {
} else if (item == '村') {
let code = data.result.recordsets[0].features.features[0].properties.CJQYDM;
let arr = [];
getAdministrativeDivisionsChun({ divisions: code }).then(res => {
getAdministrativeDivisionsChun({ divisions: code ,yearMonth: oldDatas.value.name }).then(res => {
console.log(res.data);
res.data.forEach(item => {
console.log(item);
@ -844,10 +846,10 @@ function QueryData(e, name, url, item) {
});
}
//添加遮罩
function addConver(data) {
function addConver(data,name) {
let source = new ol.source.Vector();
var converLayer = new ol.layer.Vector({
id: 'zhezhao',
id: name ? name : 'zhezhao',
source: source,
style: new ol.style.Style({
fill: new ol.style.Fill({
@ -2690,7 +2692,7 @@ $height: calc(100vh - 100px);
margin-right: 10px;
}
:deep(.el-input__wrapper) {
width: 100px;
width: 125px;
}
.modeDiv {
width: 234px;

View File

@ -1066,18 +1066,176 @@
style="width: 100%"
>
<el-table-column prop="dataTime" label="日期" />
<el-table-column prop="soilTemperature1" label="0cm温度" />
<el-table-column prop="soilTemperature2" label="-10cm温度" />
<el-table-column prop="soilTemperature3" label="-20cm温度" />
<el-table-column prop="soilTemperature4" label="-30cm温度" />
<el-table-column prop="soilTemperature5" label="-40温度" />
<el-table-column prop="soilHumidity1" width="80" label="0cm湿度(%rh)" />
<el-table-column prop="soilHumidity2" label="-10cm湿度" />
<el-table-column prop="soilHumidity3" label="-20cm湿度" />
<el-table-column prop="soilHumidity4" label="-30cm湿度" />
<el-table-column prop="soilHumidity5" label="-40cm湿度" />
<el-table-column prop="soilPh" width="70" label="PH值ph" />
<el-table-column prop="soilEc" width="70" label="EC值(S/cm)" />
<el-table-column prop="soilTemperature1" label="0cm温度">
<template #default="scope">
<span
v-if="
scope.row.soilTemperature1 >= '-10' &&
scope.row.soilTemperature1 <= '40'
"
>
{{ scope.row.soilTemperature1 }}
</span>
<span v-else style="color: rgba(255, 62, 57, 1)">
{{ scope.row.soilTemperature1 }}
</span>
</template>
</el-table-column>
<el-table-column prop="soilTemperature2" label="-10cm温度">
<template #default="scope">
<span
v-if="
scope.row.soilTemperature2 >= '-5' &&
scope.row.soilTemperature2 <= '40'
"
>
{{ scope.row.soilTemperature2 }}
</span>
<span v-else style="color: rgba(255, 62, 57, 1)">
{{ scope.row.soilTemperature2 }}
</span>
</template>
</el-table-column>
<el-table-column prop="soilTemperature3" label="-20cm温度">
<template #default="scope">
<span
v-if="
scope.row.soilTemperature3 >= '0' &&
scope.row.soilTemperature3 <= '30'
"
>
{{ scope.row.soilTemperature3 }}
</span>
<span v-else style="color: rgba(255, 62, 57, 1)">
{{ scope.row.soilTemperature3 }}
</span>
</template>
</el-table-column>
<el-table-column prop="soilTemperature4" label="-30cm温度">
<template #default="scope">
<span
v-if="
scope.row.soilTemperature4 >= '0' &&
scope.row.soilTemperature4 <= '30'
"
>
{{ scope.row.soilTemperature4 }}
</span>
<span v-else style="color: rgba(255, 62, 57, 1)">
{{ scope.row.soilTemperature4 }}
</span>
</template>
</el-table-column>
<el-table-column prop="soilTemperature5" label="-40温度">
<template #default="scope">
<span
v-if="
scope.row.soilTemperature5 >= '0' &&
scope.row.soilTemperature5 <= '30'
"
>
{{ scope.row.soilTemperature5 }}
</span>
<span v-else style="color: rgba(255, 62, 57, 1)">
{{ scope.row.soilTemperature5 }}
</span>
</template>
</el-table-column>
<el-table-column prop="soilHumidity1" width="80" label="0cm湿度(%rh)">
<template #default="scope">
<span
v-if="
scope.row.soilHumidity1 >= '5' &&
scope.row.soilHumidity1 <= '60'
"
>
{{ scope.row.soilHumidity1 }}
</span>
<span v-else style="color: rgba(255, 62, 57, 1)">
{{ scope.row.soilHumidity1 }}
</span>
</template>
</el-table-column>
<el-table-column prop="soilHumidity2" label="-10cm湿度">
<template #default="scope">
<span
v-if="
scope.row.soilHumidity2 >= '0' &&
scope.row.soilHumidity2 <= '30'
"
>
{{ scope.row.soilHumidity2 }}
</span>
<span v-else style="color: rgba(255, 62, 57, 1)">
{{ scope.row.soilHumidity2 }}
</span>
</template>
</el-table-column>
<el-table-column prop="soilHumidity3" label="-20cm湿度">
<template #default="scope">
<span
v-if="
scope.row.soilHumidity3 >= '0' &&
scope.row.soilHumidity3 <= '30'
"
>
{{ scope.row.soilHumidity3 }}
</span>
<span v-else style="color: rgba(255, 62, 57, 1)">
{{ scope.row.soilHumidity3 }}
</span>
</template>
</el-table-column>
<el-table-column prop="soilHumidity4" label="-30cm湿度">
<template #default="scope">
<span
v-if="
scope.row.soilHumidity4 >= '0' &&
scope.row.soilHumidity4 <= '40'
"
>
{{ scope.row.soilHumidity4 }}
</span>
<span v-else style="color: rgba(255, 62, 57, 1)">
{{ scope.row.soilHumidity4 }}
</span>
</template>
</el-table-column>
<el-table-column prop="soilHumidity5" label="-40cm湿度">
<template #default="scope">
<span
v-if="
scope.row.soilHumidity5 >= '0' &&
scope.row.soilHumidity5 <= '40'
"
>
{{ scope.row.soilHumidity5 }}
</span>
<span v-else style="color: rgba(255, 62, 57, 1)">
{{ scope.row.soilHumidity5 }}
</span>
</template>
</el-table-column>
<el-table-column prop="soilPh" width="70" label="PH值ph">
<template #default="scope">
<span v-if="scope.row.soilPh >= '5.5' && scope.row.soilPh <= '7.5'">
{{ scope.row.soilPh }}
</span>
<span v-else style="color: rgba(255, 62, 57, 1)">
{{ scope.row.soilPh }}
</span>
</template>
</el-table-column>
<el-table-column prop="soilEc" width="70" label="EC值(S/cm)">
<template #default="scope">
<span v-if="scope.row.soilEc >= '0' && scope.row.soilEc <= '0.2'">
{{ scope.row.soilEc }}
</span>
<span v-else style="color: rgba(255, 62, 57, 1)">
{{ scope.row.soilEc }}
</span>
</template>
</el-table-column>
<el-table-column class="red" prop="warning" width="52" label="预警情况">
<template #default="scope">
@ -1254,7 +1412,7 @@
v-for="(item, index) in tableItem"
:key="index"
:label="item.lable"
width="120"
width="180"
>
<template #default="scope">
<div v-if="label3 == '虫情监测仪'">
@ -1926,7 +2084,6 @@ import TimeLine from '@/components/TimeLine/TimeLine.vue';
import { downLoadFile } from '@/utils/download.js';
import { useEcharts } from '@/hooks/useEcharts';
// import MapInit from '.././components/tiandituapi/tianditu_api.js'
import { getarea, getTownship, getvillage, getareas, dow } from '@/api/crops/classify.js';
import {
getSpore,
getfindAllSoil,
@ -1947,6 +2104,7 @@ import { useRouter } from 'vue-router';
import 'leaflet/dist/leaflet.css';
import L from 'leaflet';
import iconShadow from '/img/marker/mark.png';
import elementResizeDetectorMaker from 'element-resize-detector';
let map = L.Map;
const router = useRouter();
@ -2120,7 +2278,6 @@ function initonMounted() {
getsporeEquipmentConditions(); //孢子设备信息
getfindAllSoils(); //土壤
getinsects(); //虫情
getaArea(); //面积
initLeafletMap();
// getTownships();
getdeviceNumbers('0'); //所有设备列表
@ -2132,10 +2289,12 @@ function initonMounted() {
}
onUpdated(() => {
if (localStorage.getItem(router.currentRoute.value.path) == 'true') {
document.querySelector('.mode').style.display = 'block';
document.querySelector('.mode').innerText = '列表模式';
window.document.querySelector('#screenfull').style.display = 'block';
} else {
document.querySelector('.mode').innerText = '地图模式';
document.querySelector('.mode').style.display = 'block';
window.document.querySelector('#screenfull').style.display = 'none';
}
});
@ -2294,10 +2453,10 @@ const alter = () => {
titleDiv.innerHTML = '<p>设备名称: ' + attr.name + '</p>';
content.innerHTML =
'<div class="content-children">' +
`<p> <img src="@/assets/images/icon.png"/> 经度:` +
`<p><img src="/img/icon.png" >经度:` +
attr.geometry.flatCoordinates[0] +
'</p>' +
'<p>纬度:' +
'<p><img src="/img/icon.png" >纬度:' +
attr.geometry.flatCoordinates[1] +
'</p>' +
'</div>';
@ -3202,7 +3361,7 @@ const resettingss = () => {
getfindAllSoil().then(res => {
bugarr.value = res.data;
// bugarrs.value=res.data
bugarrs.value = res.data.slice(
soilArr.value = res.data.slice(
(currentPage.value - 1) * pageSize.value,
(currentPage.value - 1) * pageSize.value + pageSize.value
);
@ -3653,27 +3812,7 @@ const getTownships = () => {
data.title = [...Object.values(brr)];
});
};
//面积
const getaArea = () => {
getareas().then(res => {
Township.crr = res.features;
data.title.forEach((item, index) => {
let town = res.features.map(i => {
if (item === i.properties.town) {
return i.properties;
}
});
Object.keys(dd).forEach(it => {
const index = town.findIndex(a => a && a.crop === it);
if (index > -1) {
dd[it].push(town[index].Shape_Area);
} else {
dd[it].push(null);
}
});
});
});
};
/*-------------echarts--------------*/
var baozi =
@ -4553,6 +4692,13 @@ function chartModes() {
],
};
useEcharts(ASdivisionDivIntance, option);
let erd = elementResizeDetectorMaker();
erd.listenTo(chartModeDiv.value, () => {
nextTick(() => {
ASdivisionDivIntance.resize();
});
});
}
// 添加wms
@ -5807,6 +5953,7 @@ $height: calc(100vh - 110px);
padding-left: 24px;
background: url('@/assets/images/duande.png') no-repeat !important;
background-size: 100% !important;
display: flex;
}
#P-id {
width: 100%;

View File

@ -174,7 +174,7 @@ import {
getsendSms,
getmeteorologyEquipment, meteorologicalsPeople, meteorology, zdmc,
} from '@/api/meteorological/monitor/information.js';
import { ElMessage } from 'element-plus'
import 'echarts-gl';
@ -345,7 +345,7 @@ let map = ref(null);
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@huangdaoqu_bianjie',
//rasterfunction: new SuperMap.NDVIParameter({ redIndex: 0, nirIndex: 2 }),
cacheEnabled: false,
}),
@ -360,7 +360,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@huangdaoqu_bianjie',
//rasterfunction: new SuperMap.NDVIParameter({ redIndex: 0, nirIndex: 2 }),
cacheEnabled: false,
}),
@ -381,6 +381,10 @@ onMounted(() => {
let rightWra = document.querySelector('.rightWra');
rightWra.style.transform = 'translate(107%,0)';
});
onUpdated(() => {
document.querySelector('.mode').style.display = 'none';
window.document.querySelector('#screenfull').style.display = 'block';
});
let alterData = ref([]);
let newArr = ref([]);
const zdmcList = ref([])
@ -841,9 +845,14 @@ const selectTime = () => {
};
const subText = () => {
//发送短信
getsendSms({meteorologicalStations: multipleSelection.value}).then(res => {
console.log(res.data);
});
getsendSms(multipleSelection.value).then(res => {
if (res.data.code == 'OK') {
ElMessage({
message: '发送成功',
type: 'success',
});
}
});
};
const handleSelectionChange = val => {
multipleSelection.value = val;

View File

@ -174,7 +174,7 @@ import {
getsendSms,
getmeteorologyEquipment, meteorologicalsPeople, meteorology, zdmc,
} from '@/api/meteorological/monitor/information.js';
import { ElMessage } from 'element-plus'
import 'echarts-gl';
@ -349,7 +349,7 @@ let map = ref(null);
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@huangdaoqu_bianjie',
//rasterfunction: new SuperMap.NDVIParameter({ redIndex: 0, nirIndex: 2 }),
cacheEnabled: false,
}),
@ -364,7 +364,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@huangdaoqu_bianjie',
//rasterfunction: new SuperMap.NDVIParameter({ redIndex: 0, nirIndex: 2 }),
cacheEnabled: false,
}),
@ -385,6 +385,10 @@ onMounted(() => {
let rightWra = document.querySelector('.rightWra');
rightWra.style.transform = 'translate(107%,0)';
});
onUpdated(() => {
document.querySelector('.mode').style.display = 'none';
window.document.querySelector('#screenfull').style.display = 'block';
});
let alterData = ref([]);
let newArr = ref([]);
const zdmcList = ref([])
@ -845,9 +849,14 @@ const selectTime = () => {
};
const subText = () => {
//发送短信
getsendSms({meteorologicalStations: multipleSelection.value}).then(res => {
console.log(res.data);
});
getsendSms(multipleSelection.value).then(res => {
if (res.data.code == 'OK') {
ElMessage({
message: '发送成功',
type: 'success',
});
}
});
};
const handleSelectionChange = val => {
multipleSelection.value = val;

File diff suppressed because one or more lines are too long

View File

@ -174,7 +174,7 @@ import {
getsendSms,
getmeteorologyEquipment, meteorologicalsPeople, meteorology, zdmc,
} from '@/api/meteorological/monitor/information.js';
import { ElMessage } from 'element-plus'
import 'echarts-gl';
@ -345,7 +345,7 @@ let map = ref(null);
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@huangdaoqu_bianjie',
//rasterfunction: new SuperMap.NDVIParameter({ redIndex: 0, nirIndex: 2 }),
cacheEnabled: false,
}),
@ -360,7 +360,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@huangdaoqu_bianjie',
//rasterfunction: new SuperMap.NDVIParameter({ redIndex: 0, nirIndex: 2 }),
cacheEnabled: false,
}),
@ -381,6 +381,10 @@ onMounted(() => {
let rightWra = document.querySelector('.rightWra');
rightWra.style.transform = 'translate(107%,0)';
});
onUpdated(() => {
document.querySelector('.mode').style.display = 'none';
window.document.querySelector('#screenfull').style.display = 'block';
});
let alterData = ref([]);
let newArr = ref([]);
const zdmcList = ref([])
@ -841,9 +845,15 @@ const selectTime = () => {
};
const subText = () => {
//发送短信
getsendSms({meteorologicalStations: multipleSelection.value}).then(res => {
console.log(res.data);
});
getsendSms(multipleSelection.value).then(res => {
console.log(res.data);
if (res.data.code == 'OK') {
ElMessage({
message: '发送成功',
type: 'success',
});
}
});
};
const handleSelectionChange = val => {
multipleSelection.value = val;

View File

@ -172,6 +172,7 @@ import L from 'leaflet';
import iconShadow from '/img/marker/mark.png';
import moment from 'Moment';
import { downLoadFile } from '@/utils/download.js';
import elementResizeDetectorMaker from "element-resize-detector";
let map = L.Map;
let tabulation = ref([]);
@ -219,6 +220,10 @@ onMounted(() => {
getmeteorologys();
getMeteorologyTbs();
});
onUpdated(() => {
document.querySelector('.mode').style.display = 'none';
window.document.querySelector('#screenfull').style.display = 'none';
});
const initLeafletMap = () => {
//加载地图
@ -430,7 +435,6 @@ const dowcity = () => {
function farmland() {
const farmlandDivIntance = echarts.init(chartDiv.value);
console.log(chartData);
let leftY = '温度(℃)';
let rightY = '湿度(%)';
let arr1 = chartData.value.airTemperature;
@ -756,8 +760,14 @@ function farmland() {
],
};
option && farmlandDivIntance.setOption(option, { notMerge: true, grid: { bottom: 20 } });
// option && farmlandDivIntance.setOption(option, { notMerge: true, grid: { bottom: 20 } });
useEcharts(farmlandDivIntance, option);
let erd = elementResizeDetectorMaker();
erd.listenTo(chartDiv.value, () => {
nextTick(() => {
farmlandDivIntance.resize();
})
})
}
</script>
@ -825,7 +835,12 @@ $height: calc(100vh - 100px);
.chartModeFather {
width: 100%;
height: 89%;
.chartDiv{
width: 100% !important;
height: 89% !important;
}
}
.demo-tabs {
// width: 100%;
// height: 98%;

View File

@ -429,6 +429,7 @@ function initonMounted() {
theTimes(); //年
//地图
initmap();
showDaChangArea()
alter();
areachar();
typesof();
@ -445,8 +446,10 @@ function initonMounted() {
}
onUpdated(() => {
if (localStorage.getItem(router.currentRoute.value.path) == 'false') {
document.querySelector('.mode').style.display = 'block';
document.querySelector('.mode').innerText = '地图模式';
} else {
document.querySelector('.mode').style.display = 'block';
document.querySelector('.mode').innerText = '列表模式';
}
});
@ -662,11 +665,20 @@ const alter = () => {
});
map.addOverlay(overlay);
};
//创建蒙层,凸显黄岛区域
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(),'huandao');
});
}
//添加遮罩
function addConver(data) {
function addConver(data,name) {
let source = new ol.source.Vector();
var converLayer = new ol.layer.Vector({
id: 'zhezhao',
id: name ? name : 'zhezhao',
source: source,
style: new ol.style.Style({
fill: new ol.style.Fill({
@ -842,7 +854,7 @@ const handleChange = value => {
formInline.value.area = value;
};
const onSubmit = () => {
if (formInline.value.statistical !== '行政区划') {
if (formInline.value.statistical == '行政区划') {
formInline.value.droughtRating = null;
}
let arr = [];
@ -850,7 +862,7 @@ const onSubmit = () => {
getllistDroughtsDamage({
yearMonth: formInline.value.time,
statistical: formInline.value.statistical,
droughtRating: formInline.value.droughtRating,
droughtRating: formInline.value.droughtRating == null ? '1' : formInline.value.droughtRating,
area: formInline.value.area,
}).then(res => {
console.log(res.data);

View File

@ -489,7 +489,7 @@ let tableData = ref([]);
// 图层字典
let layersDic = {
湿润: {
setOf: '2022-12-20-ganhan',
setOf: `2022-12-20-ganhan`,
name: 'T2022_12_20_shirun',
},
适宜: {
@ -518,6 +518,7 @@ function initonMounted() {
theTimes(); //年
//地图
initmap();
showDaChangArea();
typesof();
farmland();
// ProgressBar();
@ -530,7 +531,6 @@ function initonMounted() {
}
}
checkList.value = checkListdata.value;
let leftWra = document.querySelector('.leftWra');
leftWra ? (leftWra.style.transform = 'translate(-107%,0)') : '';
let rightWra = document.querySelector('.rightWra');
@ -539,9 +539,11 @@ function initonMounted() {
}
onUpdated(() => {
if (localStorage.getItem(router.currentRoute.value.path) == 'false') {
document.querySelector('.mode').style.display = 'block';
document.querySelector('.mode').innerText = '地图模式';
window.document.querySelector('#screenfull').style.display = 'none';
} else {
document.querySelector('.mode').style.display = 'block';
document.querySelector('.mode').innerText = '列表模式';
window.document.querySelector('#screenfull').style.display = 'block';
}
@ -661,7 +663,7 @@ function QueryData(e, name, url, item) {
let code = data.result.recordsets[0].features.features[0].properties.XJQYDM;
value.value = code;
let arr = [];
getTownship().then(res => {
getTownship({ divisions: '370211', yearMonth: oldDatas.value.name }).then(res => {
res.data.forEach(item => {
if (item.streetCode == code) {
name = item.streetName;
@ -677,16 +679,18 @@ function QueryData(e, name, url, item) {
) {
let code = data.result.recordsets[0].features.features[0].properties.CJQYDM;
let arr = [];
getAdministrativeAreaChun({ divisions: code }).then(res => {
res.data.forEach(item => {
console.log(item);
name = item.streetName;
arr.push(item);
});
name = res.data[0].streetName;
alterArr.value = arr;
alter();
});
getAdministrativeAreaChun({ divisions: code, yearMonth: oldDatas.value.name }).then(
res => {
res.data.forEach(item => {
console.log(item);
name = item.streetName;
arr.push(item);
});
name = res.data[0].streetName;
alterArr.value = arr;
alter();
}
);
}
function alter() {
if (data.result.currentCount > 0) {
@ -742,11 +746,20 @@ function QueryData(e, name, url, item) {
overlay.setPosition(undefined);
});
}
//创建蒙层,凸显黄岛区域
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(), 'huandao');
});
}
//添加遮罩
function addConver(data) {
function addConver(data, name) {
let source = new ol.source.Vector();
var converLayer = new ol.layer.Vector({
id: 'zhezhao',
id: name ? name : 'zhezhao',
source: source,
style: new ol.style.Style({
fill: new ol.style.Fill({
@ -838,7 +851,32 @@ const changeTableHead = (tableData, fieldName) => {
const list = tableData.map(item => {
const obj = {};
for (const k in item) {
if (fieldName[k]) {
if (fieldName[k] == '区域名称') {
obj[fieldName[k]] = item[k];
}
}
for (const k in item) {
if (fieldName[k] == '湿润 (亩)') {
obj[fieldName[k]] = item[k];
}
}
for (const k in item) {
if (fieldName[k] == '适宜(亩)') {
obj[fieldName[k]] = item[k];
}
}
for (const k in item) {
if (fieldName[k] == '轻度干旱(亩)') {
obj[fieldName[k]] = item[k];
}
}
for (const k in item) {
if (fieldName[k] == '中度干旱(亩)') {
obj[fieldName[k]] = item[k];
}
}
for (const k in item) {
if (fieldName[k] == '重度干旱(亩)') {
obj[fieldName[k]] = item[k];
}
}
@ -874,10 +912,12 @@ const exportExcel = (
};
const list = changeTableHead(tableData, fieldNameObj);
// 创建工作表
console.log(list);
const data = xlsx.utils.json_to_sheet(list);
// 创建工作簿
const wb = xlsx.utils.book_new();
// 将工作表放入工作簿中
console.log(data);
xlsx.utils.book_append_sheet(wb, data, pageName);
// 生成文件并下载
xlsx.writeFile(wb, `${fileName}.xlsx`);
@ -919,6 +959,35 @@ watch(
getproportionOfAreas(value.value, oldDatas.value.name); //干旱等级面积占比
geteachFreezingGradeAreas(oldDatas.value.name); //高标准农田干旱等级面积占比
getTownships(value.value, oldDatas.value.name); //镇
// let str = oldDatas.value.name;
// let str1 = str.replace(/-/g, '_');
// console.log(str1,)
// layersDic = {
// 湿润: {
// setOf: `${oldDatas.value.name}-ganhan`,
// name: 'T2023_01_03_shirun',
// },
// 适宜: {
// setOf: `${oldDatas.value.name}-ganhan`,
// name: 'T2023_01_03_shiyi',
// },
// 轻度干旱: {
// setOf: '2022-12-20-ganhan',
// name: 'T2022_12_20_qingduganhan',
// },
// 中度干旱: {
// setOf: '2022-12-20-ganhan',
// name: 'T2022_12_20_medium_ganhan',
// },
// 重度干旱: {
// setOf: '2022-12-20-ganhan',
// name: 'T2022_12_20_serious_ganhan',
// },
// };
// for (const key in checkList.value) {
// console.log();
// addwms(layersDic[checkList.value[key]]);
// }
}
);
let nums = 0;
@ -1350,6 +1419,7 @@ const Deta4 = item => {
brr = brr.sort((a, b) => {
return a.region.length - b.region.length;
});
console.log(brr);
exportExcel(brr, `${region}干旱等级面积-行政区划`, 'Sheet1');
});
} else {
@ -1384,12 +1454,12 @@ const Deta4 = item => {
}
});
});
console.log(brr);
exportExcel(brr, `${region}作物干旱等级统计-行政区划`, 'Sheet1');
});
}
};
const dowcity = () => {
console.log(insectarr);
let arr = JSON.parse(JSON.stringify(amount.value[0]));
arr.region = '合计';
insectarr.value.push(arr);

View File

@ -239,22 +239,22 @@
</el-input>
</el-form-item>
<el-form-item label="风力等级" prop="power">
<el-input v-model="ruleForm.power">
<el-input v-model="ruleForm.power">
<template #append></template>
</el-input>
</el-form-item>
<el-form-item label="台风过境风速" prop="speed">
<el-input disabled v-model="ruleForm.speed">
<el-input v-model="ruleForm.speed">
<template #append>/</template>
</el-input>
</el-form-item>
<el-form-item label="台风实时中心气压" prop="pressure">
<el-input disabled v-model="ruleForm.pressure">
<el-input v-model="ruleForm.pressure">
<template #append>百帕</template>
</el-input>
</el-form-item>
<el-form-item label="风圈半径" prop="radius">
<el-input disabled v-model="ruleForm.radius7">
<el-form-item label="风圈半径" prop="radius7">
<el-input v-model="ruleForm.radius7">
<template #append>千米</template>
</el-input>
</el-form-item>
@ -405,6 +405,27 @@ const rules = reactive({
trigger: 'change',
},
],
speed: [
{
required: true,
message: '请输入过境风速时间',
trigger: 'change',
},
],
pressure: [
{
required: true,
message: '请输台风实时中心气压',
trigger: 'change',
},
],
radius7: [
{
required: true,
message: '风圈半径',
trigger: 'change',
},
],
});
watch(
() => value1.value,
@ -441,6 +462,10 @@ onMounted(() => {
let rightWra = document.querySelector('.rightWra');
rightWra.style.transform = 'translate(107%,0)';
});
onUpdated(() => {
document.querySelector('.mode').style.display = 'none';
window.document.querySelector('#screenfull').style.display = 'block';
});
/*-------------地图------------------------*/
const mapOption = {
@ -783,11 +808,18 @@ const submitClick = () => {
submitForm(ruleFormRef);
};
const submitForm = async formEl => {
await formEl.validate((valid, fields) => {
if (valid) {
console.log('submit!');
} else {
console.log('error submit!', fields);
}
});
butFlag.value = true;
if (ruleForm.value.duration.length < 1) {
ElMessage.error('请输入过境时间');
return;
}else if(ruleForm.value.power.length < 1){
} else if (ruleForm.value.power.length < 1) {
ElMessage.error('请输入风力等级');
return;
} else {
@ -3151,8 +3183,8 @@ $height: calc(100vh - 100px);
box-shadow: none;
background: rgba(22, 94, 102, 1);
}
.el-form-item__label{
color:#fff;
.el-form-item__label {
color: #fff;
}
}
</style>

View File

@ -512,6 +512,7 @@ function initonMounted() {
theTimes(); //年
//地图
initmap();
showDaChangArea();
areachar();
typesof();
farmland();
@ -533,9 +534,11 @@ function initonMounted() {
onUpdated(() => {
console.log(localStorage.getItem(router.currentRoute.value.path));
if (localStorage.getItem(router.currentRoute.value.path) == 'false') {
document.querySelector('.mode').style.display = 'block';
document.querySelector('.mode').innerText = '地图模式';
window.document.querySelector('#screenfull').style.display = 'none';
} else {
document.querySelector('.mode').style.display = 'block';
document.querySelector('.mode').innerText = '列表模式';
window.document.querySelector('#screenfull').style.display = 'block';
}
@ -656,7 +659,7 @@ function QueryData(e, name, url, item) {
value.value = code;
getTownships();
let arr = [];
getTownship({ divisions: '370211' }).then(res => {
getTownship({ divisions: '370211', yearMonth: oldDatas.value.name }).then(res => {
res.data.forEach(item => {
console.log(item);
if (item.streetCode == code) {
@ -673,7 +676,7 @@ function QueryData(e, name, url, item) {
) {
let code = data.result.recordsets[0].features.features[0].properties.CJQYDM;
let arr = [];
getvillageChun({ divisions: code }).then(res => {
getvillageChun({ divisions: code, yearMonth: oldDatas.value.name }).then(res => {
console.log(res.data);
res.data.forEach(item => {
console.log(item);
@ -753,11 +756,20 @@ const alter = () => {
});
map.addOverlay(overlay);
};
//创建蒙层,凸显黄岛区域
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(), 'huandao');
});
}
//添加遮罩
function addConver(data) {
function addConver(data, name) {
let source = new ol.source.Vector();
var converLayer = new ol.layer.Vector({
id: 'zhezhao',
id: name ? name : 'zhezhao',
source: source,
style: new ol.style.Style({
fill: new ol.style.Fill({
@ -1390,7 +1402,27 @@ const changeTableHead = (tableData, fieldName) => {
const list = tableData.map(item => {
const obj = {};
for (const k in item) {
if (fieldName[k]) {
if (fieldName[k] == '区域名称') {
obj[fieldName[k]] = item[k];
}
}
for (const k in item) {
if (fieldName[k] == '无冻害(亩)') {
obj[fieldName[k]] = item[k];
}
}
for (const k in item) {
if (fieldName[k] == '轻度冻害(亩)') {
obj[fieldName[k]] = item[k];
}
}
for (const k in item) {
if (fieldName[k] == '中度冻害(亩)') {
obj[fieldName[k]] = item[k];
}
}
for (const k in item) {
if (fieldName[k] == '重度冻害(亩)') {
obj[fieldName[k]] = item[k];
}
}

View File

@ -209,8 +209,8 @@ onMounted(() => {
function initonMounted() {
getFlYears();
// getvillages(); //村
initmap(); //地图
showDaChangArea();
alter();
for (const key in dic) {
if (dic[key].disabled !== true) {
@ -219,7 +219,10 @@ function initonMounted() {
}
checkList.value = checkListdata.value;
}
onUpdated(() => {
document.querySelector('.mode').style.display = 'none';
window.document.querySelector('#screenfull').style.display = 'block';
});
watch(
() => oldDatas.value,
(val, oldVal) => {
@ -383,7 +386,7 @@ function QueryData(e, name, url, item) {
let code = data.result.recordsets[0].features.features[0].properties.XJQYDM;
value.value = code;
let arr = [];
getNonFood().then(res => {
getNonFood({ divisions: '370211', yearMonth: oldDatas.value.name }).then(res => {
res.data.forEach(item => {
if (item.subregionCode == code) {
name = item.subregionName;
@ -399,7 +402,7 @@ function QueryData(e, name, url, item) {
) {
let code = data.result.recordsets[0].features.features[0].properties.CJQYDM;
let arr = [];
getNonFoodHuoChun({ divisions: code, yearMonth: '2023-05' }).then(res => {
getNonFoodHuoChun({ divisions: code, yearMonth: oldDatas.value.name }).then(res => {
res.data.forEach(item => {
if (item.subregionCode == code) {
name = item.subregionName;
@ -481,11 +484,19 @@ const alter = () => {
});
map.addOverlay(overlay);
};
//创建蒙层,凸显黄岛区域
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(),'huandao');
});
}
//添加遮罩
function addConver(data) {
function addConver(data,name) {
let source = new ol.source.Vector();
var converLayer = new ol.layer.Vector({
id: 'zhezhao',
id: name ? name : 'zhezhao',
source: source,
style: new ol.style.Style({
fill: new ol.style.Fill({

View File

@ -154,7 +154,7 @@ onMounted(() => {
getCameraNames();
});
onUpdated(() => {
// document.querySelector('.mode').style.display = 'none';
document.querySelector('.mode').style.display = 'none';
window.document.querySelector('#screenfull').style.display = 'none';
});
const initLeafletMap = () => {

View File

@ -220,6 +220,7 @@ onMounted(() => {
function initonMounted() {
getLhdyears();
initmap(); //地图
showDaChangArea();
alter();
getCityAndCountZbs();
for (const key in dic) {
@ -231,6 +232,10 @@ function initonMounted() {
checkList.value = checkListdata.value;
console.log(checkList.value);
}
onUpdated(() => {
document.querySelector('.mode').style.display = 'none';
window.document.querySelector('#screenfull').style.display = 'block';
});
watch(
() => oldDatas.value,
(val, oldVal) => {
@ -393,7 +398,7 @@ function QueryData(e, name, url, item) {
let code = data.result.recordsets[0].features.features[0].properties.XJQYDM;
value.value = code;
let arr = [];
getAbandon().then(res => {
getAbandon({ divisions: '370211', yearMonth: oldDatas.value.name }).then(res => {
res.data.forEach(item => {
console.log(item.subregionCode, code);
if (item.subregionCode == code) {
@ -410,7 +415,7 @@ function QueryData(e, name, url, item) {
) {
let code = data.result.recordsets[0].features.features[0].properties.CJQYDM;
let arr = [];
getNonFoodHuoChun({ divisions: code, yearMonth: '2023-05' }).then(res => {
getNonFoodHuoChun({ divisions: code, yearMonth: oldDatas.value.name }).then(res => {
res.data.forEach(item => {
if (item.subregionCode == code) {
name = item.subregionName;
@ -492,11 +497,19 @@ const alter = () => {
});
map.addOverlay(overlay);
};
//创建蒙层,凸显黄岛区域
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(),'huandao');
});
}
//添加遮罩
function addConver(data) {
function addConver(data,name) {
let source = new ol.source.Vector();
var converLayer = new ol.layer.Vector({
id: 'zhezhao',
id: name ? name : 'zhezhao',
source: source,
style: new ol.style.Style({
fill: new ol.style.Fill({

View File

@ -135,6 +135,7 @@
<script setup>
import { ref, onMounted, inject, watch } from 'vue';
import axios from 'axios';
import * as echarts from 'echarts';
import 'echarts-gl';
import TimeLine from '@/components/TimeLine/TimeLine.vue';
@ -143,7 +144,7 @@ import {
getNonGrain,
getNonGrainChun,
getNonGrainHuoChun,
getFnYear
getFnYear,
} from '@/api/plough/agriculturization.js';
let viewer = ref(null);
@ -214,6 +215,7 @@ onMounted(() => {
function initonMounted() {
// getvillages(); //村
initmap(); //地图
showDaChangArea();
alter();
for (const key in dic) {
if (dic[key].disabled !== true) {
@ -222,7 +224,10 @@ function initonMounted() {
}
checkList.value = checkListdata.value;
}
onUpdated(() => {
document.querySelector('.mode').style.display = 'none';
window.document.querySelector('#screenfull').style.display = 'block';
});
watch(
() => oldDatas.value,
(val, oldVal) => {
@ -291,15 +296,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@huangdaoqu_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@huangdaoqu_bianjie',
'镇'
);
}
@ -326,7 +331,7 @@ function initmap() {
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@huangdaoqu_bianjie',
//rasterfunction: new SuperMap.NDVIParameter({ redIndex: 0, nirIndex: 2 }),
cacheEnabled: false,
}),
@ -339,7 +344,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@huangdaoqu_bianjie',
//rasterfunction: new SuperMap.NDVIParameter({ redIndex: 0, nirIndex: 2 }),
cacheEnabled: false,
}),
@ -386,7 +391,7 @@ function QueryData(e, name, url, item) {
let code = data.result.recordsets[0].features.features[0].properties.XJQYDM;
value.value = code;
let arr = [];
getNonGrain().then(res => {
getNonGrain({ divisions: '370211', yearMonth: oldDatas.value.name }).then(res => {
res.data.forEach(item => {
if (item.subregionCode == code) {
name = item.subregionName;
@ -402,7 +407,7 @@ function QueryData(e, name, url, item) {
) {
let code = data.result.recordsets[0].features.features[0].properties.CJQYDM;
let arr = [];
getNonGrainHuoChun({ divisions: code, yearMonth: '2023-05' }).then(res => {
getNonGrainHuoChun({ divisions: code, yearMonth: oldDatas.value.name }).then(res => {
res.data.forEach(item => {
if (item.subregionCode == code) {
name = item.subregionName;
@ -484,11 +489,19 @@ const alter = () => {
});
map.addOverlay(overlay);
};
//创建蒙层,凸显黄岛区域
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(), 'huandao');
});
}
//添加遮罩
function addConver(data) {
function addConver(data, name) {
let source = new ol.source.Vector();
var converLayer = new ol.layer.Vector({
id: 'zhezhao',
id: name ? name : 'zhezhao',
source: source,
style: new ol.style.Style({
fill: new ol.style.Fill({
@ -584,14 +597,14 @@ function rightFoldClick() {
//接口
//时间
const getFnYears=()=>{
getFnYear().then(res=>{
const getFnYears = () => {
getFnYear().then(res => {
oldDatas.value = { name: res.data[0] };
res.data.forEach(item => {
dataSource.value.push({ name: item });
});
})
}
});
};
//镇
const getNonGrains = time => {
Township.arr = [];

View File

@ -283,7 +283,7 @@
effect="dark"
content="测量线"
placement="left"
offset='1'
offset="1"
>
<img src="@/assets/images/measure.png" alt="" />
</el-tooltip>
@ -298,7 +298,7 @@
effect="dark"
content="测量面"
placement="left"
offset='1'
offset="1"
>
<img src="@/assets/images/face.png" alt="" />
</el-tooltip>
@ -313,7 +313,7 @@
effect="dark"
content="清除"
placement="left"
offset='1'
offset="1"
>
<img src="@/assets/images/shanchu.png" alt="" />
</el-tooltip>
@ -636,7 +636,10 @@ onMounted(() => {
villageNewDataFun();
getDistrictsBlockss('高标准农田');
});
onUpdated(() => {
document.querySelector('.mode').style.display = 'none';
window.document.querySelector('#screenfull').style.display = 'block';
});
/*-------------地图------------------------*/
let map = ref(null);
let container = ref(null);