tianlong/Agriculture-front-end
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

up

Browse Source
This commit is contained in:
tianlong 2023-06-13 14:00:48 +08:00
parent 0b17a7ad2d
commit c2ce122a52
11 changed files with 394 additions and 397 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
public/config.js
View File

@ -1,6 +1,6 @@
window.serverAPI = { window.serverAPI = {
baseUrl: "http://8.142.26.238:6901", //线上 // baseUrl: "http://8.142.26.238:6901", //线上
// baseUrl: "http://192.168.2.46:8080", //本地 baseUrl: "http://192.168.2.46:8080", //本地
// geoserver // geoserver
geoserverUrl: "http://36.134.44.75:9080/geoserver", geoserverUrl: "http://36.134.44.75:9080/geoserver",
username: "admin", username: "admin",

BIN
src/assets/images/shouhui.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.6 KiB

BIN
src/assets/images/zhankai.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.6 KiB

1
src/views/crops/area/Area.vue
View File

@ -1531,6 +1531,7 @@ function areachar() {
// start: 0,//默认为0 // start: 0,//默认为0
// end: 100,//默认为100 // end: 100,//默认为100
type: 'slider', type: 'slider',
zoomLock: true, //禁止拉伸
show: false, show: false,
// xAxisIndex: [0], // xAxisIndex: [0],
handleSize: 0, //滑动条的 左右2个滑动条的大小 handleSize: 0, //滑动条的 左右2个滑动条的大小

8
src/views/crops/classify/Classify.vue
View File

@ -2241,6 +2241,13 @@ function areachar() {
distance: 10, distance: 10,
color: '#fff', color: '#fff',
}, },
emphasis: {
itemStyle: {
// color: '#333FFF',
shadowBlur: 20, //发光图形阴影的模糊大小
shadowColor: 'rgba(0, 147, 252, 1)', //阴影颜色
},
},
}, },
{ {
data: [1, 1, 1, 1, 1], data: [1, 1, 1, 1, 1],
@ -3288,6 +3295,7 @@ function chartModes() {
{ {
type: 'slider', type: 'slider',
width: '40%', width: '40%',
zoomLock: true, //禁止拉伸
top: '90%', top: '90%',
start: 0, start: 0,
end: ends, end: ends,

378
src/views/crops/output/wheat/index.vue
View File

@ -246,9 +246,6 @@
<el-option label="花生" value="花生" /> --> <el-option label="花生" value="花生" /> -->
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="面积(亩)>">
<el-input-number v-model="num" :min="1" @change="handleChange" />
</el-form-item>
<el-form-item> <el-form-item>
<el-button type="primary" @click="onSubmit">查询</el-button> <el-button type="primary" @click="onSubmit">查询</el-button>
<el-button plain @click="resetForm" :disabled="!SwitchFlag ? true : false"> <el-button plain @click="resetForm" :disabled="!SwitchFlag ? true : false">
@ -277,28 +274,18 @@
> >
<el-table-column align="center" prop="合计" width="80" /> <el-table-column align="center" prop="合计" width="80" />
<el-table-column <el-table-column
v-for="(item, index) in tableItem" v-for="(item, index) in tableItemAll"
:key="index" :key="index"
:prop="item.value" :prop="item.value"
:label="index == 0 ? item.lable : item.lable + '(亩)'" :label="item.lable"
align="center" align="center"
/> />
<el-table-column prop="address" v-if="operate" align="center" label="操作">
<template #default="scope">
<span
style="color: rgba(67, 181, 143, 1); cursor: pointer"
@click="download(scope.row)"
>
下载
</span>
</template>
</el-table-column>
</el-table> </el-table>
</div> </div>
<el-table <el-table
:data="tableNewData" :data="tableNewData"
:header-cell-style="{ 'text-align': 'center' }" :header-cell-style="{ 'text-align': 'center' }"
height="70%" height="80%"
highlight-current-row highlight-current-row
header-row-class-name="tabth" header-row-class-name="tabth"
> >
@ -313,19 +300,9 @@
v-for="(item, index) in tableItem" v-for="(item, index) in tableItem"
:key="index" :key="index"
:prop="item.value" :prop="item.value"
:label="index == 0 ? item.lable : item.lable + '(亩)'" :label="item.lable"
align="center" align="center"
/> />
<el-table-column prop="address" v-if="operate" align="center" label="操作">
<template #default="scope">
<span
style="color: rgba(67, 181, 143, 1); cursor: pointer"
@click="download(scope.row)"
>
下载
</span>
</template>
</el-table-column>
</el-table> </el-table>
<div class="example-pagination-block"> <div class="example-pagination-block">
共{{ insectarr.length }}条 共{{ insectarr.length }}条
@ -358,12 +335,14 @@ import {
getwheatGetAllTowns, getwheatGetAllTowns,
getwheatGetAllVillages, getwheatGetAllVillages,
getparameterEstimationYear, getparameterEstimationYear,
getparameterEstimation getparameterEstimation,
} from '@/api/crops/wheat.js'; } from '@/api/crops/wheat.js';
import axios from 'axios'; import axios from 'axios';
import 'echarts-gl'; import 'echarts-gl';
import { downLoadFile } from '@/utils/download.js'; import { downLoadFile } from '@/utils/download.js';
import { useRouter } from 'vue-router';
const router = useRouter();
let viewer = ref(null); let viewer = ref(null);
const areaDiv = ref(null); const areaDiv = ref(null);
const farmlandDiv = ref(null); const farmlandDiv = ref(null);
@ -385,16 +364,14 @@ let currentPage = ref(1); //当前页
let pageSize = ref(12); //每页条数 let pageSize = ref(12); //每页条数
let tableNewData = ref([]); let tableNewData = ref([]);
let tableItem = ref([]); let tableItem = ref([]);
let tableItemAll = ref([]);
const num = ref(1); const num = ref(1);
let operate = ref(true); let operate = ref(true);
const chartModeDiv = ref(null); const chartModeDiv = ref(null);
let amount = ref([ let amount = ref([
{ {
湿润: 0, wheatUnitOutputValue: 0,
适宜: 0, wheatOutput: 0,
轻度干旱: 0,
中度干旱: 0,
重度干旱: 0,
}, },
]); ]);
//搜索 //搜索
@ -424,6 +401,10 @@ let areatext = '8383894';
// 组件挂载完成后执行 // 组件挂载完成后执行
onMounted(() => { onMounted(() => {
initonMounted();
});
function initonMounted() {
getwheatTotalYearValues(); //作物产量预估 getwheatTotalYearValues(); //作物产量预估
getwheatHeightStandardFarmlands(); //高标准农田 getwheatHeightStandardFarmlands(); //高标准农田
getwheatGetAllTownss(); //镇级 getwheatGetAllTownss(); //镇级
@ -434,6 +415,13 @@ onMounted(() => {
// ProgressBar(); // ProgressBar();
ASdivision(); ASdivision();
getFarmland(); getFarmland();
}
onUpdated(() => {
if (localStorage.getItem(router.currentRoute.value.path) == 'false') {
document.querySelector('.mode').innerText = '地图模式';
} else {
document.querySelector('.mode').innerText = '列表模式';
}
}); });
/*-------------地图------------------------*/ /*-------------地图------------------------*/
@ -895,7 +883,7 @@ const getparameterEstimationYears = () => {
console.log(res.data); console.log(res.data);
formInline.value.time = res.data[res.data.length - 1]; formInline.value.time = res.data[res.data.length - 1];
timeArr.value = res.data; timeArr.value = res.data;
onSubmit() onSubmit();
}); });
}; };
@ -987,6 +975,13 @@ const Deta3 = item => {
}); });
} }
}; };
const dowcity = () => {
console.log(insectarr);
let arr = JSON.parse(JSON.stringify(amount.value[0]));
console.log(arr);
insectarr.value.push(arr);
exportExcel(insectarr.value, '干旱面积统计表', 'Sheet1');
};
const onSubmit = () => { const onSubmit = () => {
let arr = []; let arr = [];
@ -998,7 +993,6 @@ const onSubmit = () => {
type: formInline.value.droughtRating, type: formInline.value.droughtRating,
area: formInline.value.area, area: formInline.value.area,
}).then(res => { }).then(res => {
console.log(res.data)
tableItem.value = [ tableItem.value = [
{ {
lable: '地区', lable: '地区',
@ -1006,66 +1000,46 @@ const onSubmit = () => {
}, },
{ {
lable: '单产量(斤/亩)', lable: '单产量(斤/亩)',
value: '适宜', value: 'wheatUnitOutputValue',
}, },
{ {
lable: '总产量(吨)', lable: '总产量(吨)',
value: '湿润', value: 'wheatOutput',
}, },
]; ];
res.data.forEach(item => { tableItemAll.value = [
if (arr.indexOf(item.region) == -1) { {
arr.push(item.region); lable: '',
} value: 'subName',
});
arr.forEach(item => {
brr.push(
Object.create(null, {
regio: {
value: item,
}, },
}) {
); lable: '单产量(斤/亩)',
}); value: 'wheatUnitOutputValue',
brr.forEach(item => { },
res.data.map(i => { {
if (item.regio === i.region) { lable: '总产量(吨)',
item['region'] = i.region; value: 'wheatOutput',
item[i.level] = Number(i.area).toFixed(2); },
} ];
});
});
operate.value = false; operate.value = false;
insectarr.value = brr; insectarr.value = res.data;
tableNewData.value = brr.slice( tableNewData.value = res.data.slice(
(currentPage.value - 1) * pageSize.value, (currentPage.value - 1) * pageSize.value,
(currentPage.value - 1) * pageSize.value + pageSize.value (currentPage.value - 1) * pageSize.value + pageSize.value
); );
amount.value[0]['适宜'] = 0; amount.value[0]['wheatUnitOutputValue'] = 0;
amount.value[0]['湿润'] = 0; amount.value[0]['wheatOutput'] = 0;
amount.value[0]['轻度干旱'] = 0; amount.value[0]['subName'] = '合计';
amount.value[0]['中度干旱'] = 0; res.data.forEach(item => {
amount.value[0]['重度干旱'] = 0; item.wheatUnitOutputValue
amount.value[0]['region'] = '合计'; ? (amount.value[0]['wheatUnitOutputValue'] +=
brr.forEach(item => { Number(item.wheatUnitOutputValue) !== NaN
item.适宜 ? Number(item.wheatUnitOutputValue)
? (amount.value[0]['适宜'] += Number(item.适宜) !== NaN ? Number(item.适宜) : 0) : 0)
: 0; : 0;
item.湿润 item.wheatOutput
? (amount.value[0]['湿润'] += Number(item.湿润) !== NaN ? Number(item.湿润) : 0) ? (amount.value[0]['wheatOutput'] +=
: 0; Number(item.wheatOutput) !== NaN ? Number(item.wheatOutput) : 0)
item.轻度干旱
? (amount.value[0]['轻度干旱'] +=
Number(item.轻度干旱) !== NaN ? Number(item.轻度干旱) : 0)
: 0;
item.中度干旱
? (amount.value[0]['中度干旱'] +=
Number(item.中度干旱) !== NaN ? Number(item.中度干旱) : 0)
: 0;
item.重度干旱
? (amount.value[0]['重度干旱'] +=
Number(item.重度干旱) !== NaN ? Number(item.重度干旱) : 0)
: 0; : 0;
}); });
for (const key in amount.value[0]) { for (const key in amount.value[0]) {
@ -1074,6 +1048,7 @@ const onSubmit = () => {
amount.value[0][key] = amount.value[0][key].toFixed(2); amount.value[0][key] = amount.value[0][key].toFixed(2);
} }
} }
console.log(amount);
const statInfo = chartModeDiv.value; // 获取图表元素 const statInfo = chartModeDiv.value; // 获取图表元素
statInfo.style.width = window.innerWidth - 100 + 'px'; //初始化echarts图表宽度 statInfo.style.width = window.innerWidth - 100 + 'px'; //初始化echarts图表宽度
statInfo.style.height = window.innerHeight - 100 + 'px'; statInfo.style.height = window.innerHeight - 100 + 'px';
@ -1738,58 +1713,60 @@ function ASdivision() {
function chartModes() { function chartModes() {
const ASdivisionDivIntance = echarts.init(chartModeDiv.value); const ASdivisionDivIntance = echarts.init(chartModeDiv.value);
let arr = []; let arr = [];
let 湿润 = []; let 单产量 = [];
let 适宜 = []; let 总产量 = [];
let 轻度干旱 = [];
let 中度干旱 = [];
let 重度干旱 = [];
insectarr.value.forEach(item => { insectarr.value.forEach(item => {
console.log(item.重度干旱); arr.push(item.subName);
arr.push(item.region); item.wheatUnitOutputValue !== undefined
item.湿润 !== undefined ? 湿润.push(item.湿润) : 湿润.push(0); ? 单产量.push(item.wheatUnitOutputValue)
item.适宜 !== undefined ? 适宜.push(item.适宜) : 适宜.push(0); : 单产量.push(0);
item.轻度干旱 !== undefined ? 轻度干旱.push(item.轻度干旱) : 轻度干旱.push(0); item.wheatOutput !== undefined ? 总产量.push(item.wheatOutput) : 总产量.push(0);
item.中度干旱 !== undefined ? 中度干旱.push(item.中度干旱) : 中度干旱.push(0);
item.重度干旱 !== undefined ? 重度干旱.push(item.重度干旱) : 重度干旱.push(0);
}); });
let ends = (10 / arr.length) * 100; let ends = (10 / arr.length) * 100;
let option = { let option = {
// backgroundColor: 'rgba(5, 38, 75, 0.1)',
color: ['rgba(4, 247, 227, 1)', 'rgba(33, 187, 251, 1)'],
tooltip: { tooltip: {
trigger: 'axis', trigger: 'axis',
formatter: function (params) { formatter: function (params, ticket, callback) {
let tipStr = params[0].axisValueLabel + '</br>'; var res = params[0].name;
let totalNum = 0;
for (let i = 0; i < params.length; i++) { for (var i = 0, l = params.length; i < l; i++) {
totalNum += params[i].value; if (params[i].seriesType === 'line') {
if (params[i].seriesName !== '合计') { res +=
tipStr += params[i].seriesName + '：' + params[i].value + '</br>'; '<br/>' +
params[i].seriesName +
' : ' +
(params[i].value ? params[i].value : '-') +
'h';
} else {
res +=
'<br/>' +
params[i].seriesName +
' : ' +
(params[i].value ? params[i].value : '-');
} }
} }
for (let i = 0; i < params.length; i++) { return res;
totalNum += Number(params[i].value);
if (params[i].seriesName === '合计') {
tipStr += '合计：' + totalNum;
}
}
return tipStr;
},
axisPointer: {
// 坐标轴指示器，坐标轴触发有效
type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
}, },
}, },
legend: { grid: {
top: 5, top: '15%',
left: 10, bottom: '15%',
icon: 'rect',
itemWidth: 4, // 图例图表宽度
itemHeight: 12, // 图例图标高度
data: [],
}, },
// legend: {
// data: ['人群数量', '基金金额'],
// textStyle: {
// color: '#fff',
// fontSize: 12,
// },
// type: 'scroll',
// },
dataZoom: [ dataZoom: [
{ {
type: 'slider', type: 'slider',
width: '40%', width: '40%',
zoomLock: true,
top: '90%', top: '90%',
start: 0, start: 0,
end: ends, end: ends,
@ -1812,142 +1789,101 @@ function chartModes() {
type: 'inside', type: 'inside',
}, },
], ],
grid: { xAxis: [
left: '3%', {
right: '10%',
bottom: '15%',
top: '5%',
containLabel: true,
},
xAxis: {
type: 'category', type: 'category',
name: '区域', nameTextStyle: {
axisLabel: {
fontSize: 12, fontSize: 12,
interval: 0, },
rotate: 0, axisLabel: {
fontSize: 14,
relativeSize: -2,
},
splitLine: {
show: false,
},
axisTick: {
show: false,
}, },
axisLine: { axisLine: {
lineStyle: { lineStyle: {
// color: '#cbeaf6', // x坐标轴线颜色 color: 'rgba(102, 102, 102, 1)',
}, },
}, },
axisPointer: {
type: 'shadow',
},
data: arr, data: arr,
}, },
],
yAxis: [ yAxis: [
{ {
type: 'value', type: 'value',
name: '面积（亩）', name: '单产量(斤/亩)',
splitLine: {
show: true,
lineStyle: {
type: 'dashed',
},
},
nameTextStyle: {
fontSize: 12,
},
axisLabel: { axisLabel: {
// color: '#cbeaf6', // 坐标轴label文字颜色 fontSize: 14,
relativeSize: -2,
formatter: '{value}',
}, },
axisLine: { axisLine: {
lineStyle: { lineStyle: {
// color: '#cbeaf6', // y坐标轴线颜色 color: 'rgba(102, 102, 102, 1)',
}, },
}, },
min: 0,
position: 'top',
},
{
type: 'value',
name: '总产量(吨)',
min: 0,
position: 'bottom',
splitLine: { splitLine: {
// 网格线 show: false,
lineStyle: { },
// type: 'dashed', // 设置网格线类型 dotted：虚线 solid:实线 nameTextStyle: {
// color: '#395367', fontSize: 12,
},
axisLabel: {
fontSize: 14,
relativeSize: -2,
formatter: '{value}',
},
axisLine: {
lineStyle: {
color: 'rgba(102, 102, 102, 1)',
}, },
show: true, // 隐藏或显示
}, },
}, },
], ],
series: [ series: [
{ {
name: '湿润', name: '单产量(斤/亩)',
type: 'bar', type: 'bar',
barWidth: 13, yAxisIndex: 0,
stack: '分类', data: 单产量,
itemStyle: {
color: 'rgba(255, 141, 26, 1)',
},
data: 湿润,
}, },
{ {
name: '适宜', name: '总产量(吨)',
type: 'bar', type: 'bar',
barWidth: 13, yAxisIndex: 1,
stack: '分类', data: 总产量,
itemStyle: {
color: 'rgba(255, 255, 26, 1)',
},
data: 适宜,
},
{
name: '轻度干旱',
type: 'bar',
barWidth: 13,
stack: '分类',
itemStyle: {
color: 'rgba(255, 201, 148, 1)',
},
data: 轻度干旱,
},
{
name: '中度干旱',
type: 'bar',
barWidth: 13,
stack: '分类',
itemStyle: {
color: 'rgba(255, 84, 84, 1)',
},
data: 中度干旱,
},
{
name: '重度干旱',
type: 'bar',
barWidth: 13,
stack: '分类',
itemStyle: {
color: 'rgba(255, 140, 255, 1)',
},
data: 重度干旱,
}, },
], ],
}; };
var series = option.series;
var tooltip = option.tooltip;
// 提示框自定义内容包括总合及文字
function formatFun(params) {
// console.log('params====>', params)
let tipStr = params[0].axisValueLabel + '</br>'; // 初始化提示框文字默认当前轴名称并换行
let totalNum = 0; // 用于存储当前列总数
// params为当前柱状图数组数量 遍历求和并添加类目label：value
for (let i = 0; i < params.length; i++) {
if (params[i].seriesName !== '合计') {
const dotHtml = `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params[i].color}"></span>`;
totalNum += params[i].value;
tipStr += dotHtml + params[i].seriesName + '：' + params[i].value + '</br>';
}
}
// 添加最后的合计行 数据为每列总合
for (let i = 0; i < params.length; i++) {
if (params[i].seriesName === '合计') {
tipStr += '合计：' + totalNum;
}
}
return tipStr;
}
tooltip.formatter = formatFun;
// 指定函数计算总合
function fun(params) {
var dataSum = 0;
for (var i = 0; i < series.length; i++) {
dataSum += series[i].data[params.dataIndex];
}
return dataSum;
}
// 加载页面时候替换最后一个series的formatter
// series[series.length - 1].label.normal.formatter = fun;
useEcharts(ASdivisionDivIntance, option); useEcharts(ASdivisionDivIntance, option);
} }
/*--------------------------------------------------------------------------------------------*/ /*--------------------------------------------------------------------------------------------*/
function getAreaFenlei() { function getAreaFenlei() {
let fl = fenleiRef.value; let fl = fenleiRef.value;

8
src/views/crops/site/Site.vue
View File

@ -289,7 +289,7 @@
:data="tableNewData" :data="tableNewData"
:header-cell-style="{ 'text-align': 'center' }" :header-cell-style="{ 'text-align': 'center' }"
:cell-style="{ 'text-align': 'center' }" :cell-style="{ 'text-align': 'center' }"
height="70%" height="80%"
highlight-current-row highlight-current-row
header-row-class-name="tabth" header-row-class-name="tabth"
> >
@ -512,7 +512,6 @@ function initonMounted() {
} }
onUpdated(() => { onUpdated(() => {
console.log(localStorage.getItem(router.currentRoute.value.path));
if (localStorage.getItem(router.currentRoute.value.path) == 'false') { if (localStorage.getItem(router.currentRoute.value.path) == 'false') {
document.querySelector('.mode').innerText = '地图模式'; document.querySelector('.mode').innerText = '地图模式';
} else { } else {
@ -1507,6 +1506,7 @@ const Deta4 = item => {
getadministrativeDivisions({ divisions: value.value, whetherToDownload: false }).then( getadministrativeDivisions({ divisions: value.value, whetherToDownload: false }).then(
res => { res => {
res.data.forEach(item => { res.data.forEach(item => {
console.log(item)
arr.push({ arr.push({
region: item.subregionName, region: item.subregionName,
good: item.good, good: item.good,
@ -1534,9 +1534,7 @@ const dowcity = () => {
const changeTableHead = (tableData, fieldName) => { const changeTableHead = (tableData, fieldName) => {
const list = tableData.map(item => { const list = tableData.map(item => {
const obj = {}; const obj = {};
console.log(item);
for (const k in item) { for (const k in item) {
console.log(k);
if (fieldName[k]) { if (fieldName[k]) {
obj[fieldName[k]] = item[k]; obj[fieldName[k]] = item[k];
} }
@ -1678,6 +1676,7 @@ function areachar() {
//滚动条 //滚动条
{ {
show: zoomShow, show: zoomShow,
zoomLock: true, //禁止拉伸
type: 'slider', type: 'slider',
realtime: true, realtime: true,
startValue: 0, startValue: 0,
@ -2569,6 +2568,7 @@ function chartModes() {
type: 'slider', type: 'slider',
width: '40%', width: '40%',
top: '90%', top: '90%',
zoomLock: true, //禁止拉伸
start: 0, start: 0,
end: ends, end: ends,
showDataShadow: false, showDataShadow: false,

251
src/views/index.vue
View File

@ -1147,7 +1147,7 @@
<el-tab-pane label="全部" name="全部"></el-tab-pane> <el-tab-pane label="全部" name="全部"></el-tab-pane>
<el-tab-pane label="智能孢子仪" name="智能孢子仪" /> <el-tab-pane label="智能孢子仪" name="智能孢子仪" />
<el-tab-pane label="虫情监测仪" name="虫情监测仪" /> <el-tab-pane label="虫情监测仪" name="虫情监测仪" />
<el-tab-pane label="土壤土质" name="土壤土质" /> <el-tab-pane label="土壤墒情、土质" name="土壤墒情、土质" />
</el-tabs> </el-tabs>
<div class="tabulationCente"> <div class="tabulationCente">
<div class="left"> <div class="left">
@ -1201,15 +1201,15 @@
:header-cell-style="{ 'text-align': 'center' }" :header-cell-style="{ 'text-align': 'center' }"
:cell-style="{ 'text-align': 'center' }" :cell-style="{ 'text-align': 'center' }"
header-row-class-name="tabth" header-row-class-name="tabth"
height="90%" height="80%"
highlight-current-row highlight-current-row
> >
<el-table-column fixed="left" width="160" label="监测时间"> <el-table-column fixed="left" width="160" label="监测时间">
<template #default="scope"> <template #default="scope">
<span v-if="label3 == '土壤土质'"> <span v-if="label3 == '土壤墒情、土质'">
{{ scope.row.dataTime }} {{ scope.row.dataTime }}
</span> </span>
<span v-if="label3 !== '土壤土质'"> <span v-if="label3 !== '土壤墒情、土质'">
{{ scope.row.pictureTime }} {{ scope.row.pictureTime }}
</span> </span>
</template> </template>
@ -1262,9 +1262,9 @@
{{ scope.row.warning }} {{ scope.row.warning }}
</span> </span>
</div> </div>
<div v-if="label3 == '土壤土质'"> <div v-if="label3 == '土壤墒情、土质'">
<span <span
v-if="scope.row.style == item.value" v-if="scope.row.style.includes(item.value)"
style="color: red" style="color: red"
> >
{{ scope.row[item.value] }} {{ scope.row[item.value] }}
@ -1299,7 +1299,7 @@
</div> </div>
</div> </div>
<div v-show="!SwitchFlag" class="chartMode"> <div v-show="!SwitchFlag" class="chartMode">
<div v-if="label3 == '土壤土质'" class="depth"> <div v-if="label3 == '土壤墒情、土质'" class="depth">
<p <p
:class="active == '1' ? 'SelectedDiv' : ''" :class="active == '1' ? 'SelectedDiv' : ''"
@click="depthclick(1)" @click="depthclick(1)"
@ -1332,11 +1332,11 @@
</p> </p>
</div> </div>
<div <div
v-show="label3 == '土壤土质'" v-show="label3 == '土壤墒情、土质'"
ref="chartModeDiv" ref="chartModeDiv"
class="chartModeDiv" class="chartModeDiv"
></div> ></div>
<div class="tableBoxs" v-if="label3 !== '土壤土质'"> <div class="tableBoxs" v-if="label3 !== '土壤墒情、土质'">
<div class="insectDiv"> <div class="insectDiv">
<el-row class="gutters" :gutter="40"> <el-row class="gutters" :gutter="40">
<el-col <el-col
@ -1385,7 +1385,9 @@
style="color: red" style="color: red"
v-if="item.warning == '有'" v-if="item.warning == '有'"
> >
{{ item.pestName }} {{
`${item.pestName}:${item.recognition}只`
}}
</span> </span>
<span <span
@ -1416,8 +1418,12 @@
</div> </div>
<div class="centent"> <div class="centent">
<div class="arrow" @click="foldClick"> <div class="arrow" @click="foldClick">
<span v-if="!flags">➡️</span> <p v-if="!flags">
<span v-if="flags">⬅️</span> <img style="width: 300%" src="@/assets/images/shouhui.png" />
</p>
<p v-if="flags">
<img style="width: 300%" src="@/assets/images/zhankai.png" />
</p>
</div> </div>
</div> </div>
<div v-show="!flags" class="cesiumContainersDiv"> <div v-show="!flags" class="cesiumContainersDiv">
@ -1461,7 +1467,7 @@
width="35%" width="35%"
:before-close="handleClose" :before-close="handleClose"
> >
<div v-if="label3 !== '土壤土质'" class="rowContent"> <div v-if="label3 !== '土壤墒情、土质'" class="rowContent">
<div class="rowContentTop"> <div class="rowContentTop">
<div class="rowContentchildren"> <div class="rowContentchildren">
<p> <p>
@ -1490,7 +1496,7 @@
</div> </div>
</div> </div>
<image-preview <image-preview
v-if="label3 !== '土壤土质'" v-if="label3 !== '土壤墒情、土质'"
append-to-body append-to-body
:src="`${DetailArr.picturePath}`" :src="`${DetailArr.picturePath}`"
:zoom-rate="1.2" :zoom-rate="1.2"
@ -1501,7 +1507,7 @@
</div> </div>
</image-preview> </image-preview>
</div> </div>
<div class="rowContent_bottom" v-if="label3 == '土壤土质'"> <div class="rowContent_bottom" v-if="label3 == '土壤墒情、土质'">
<div class="rowContentTop"> <div class="rowContentTop">
<div class="rowContentchildren"> <div class="rowContentchildren">
<p> <p>
@ -1531,10 +1537,15 @@
<span>{{ DetailArr.dataTime }}</span> <span>{{ DetailArr.dataTime }}</span>
</div> </div>
<div v-if="DetailArr.warning == '有'"> <div v-if="DetailArr.warning == '有'">
<span style="font-size: 16px; font-weight: 00"> <span
{{ dictionary[DetailArr.style] }} : v-for="(item, index) in DetailArr.style"
:key="index"
style="font-size: 16px; font-weight: 00"
>
&emsp;
{{ dictionary[item] }} :
<span style="color: red; font-size: 18px; font-weight: 700"> <span style="color: red; font-size: 18px; font-weight: 700">
{{ DetailArr[DetailArr.style] }} {{ DetailArr[item] }}
</span> </span>
</span> </span>
</div> </div>
@ -1903,6 +1914,7 @@ let map = L.Map;
const router = useRouter(); const router = useRouter();
const visible = ref(false); //孢子历史数据弹框 const visible = ref(false); //孢子历史数据弹框
const visibles = ref(false); //历史数据弹框 const visibles = ref(false); //历史数据弹框
const url = '@/assets/images/shouhui.png';
let flags = ref(false); let flags = ref(false);
const visibless = ref(false); const visibless = ref(false);
let dialogTableVisible = ref(false); let dialogTableVisible = ref(false);
@ -2026,13 +2038,13 @@ const treeData = [
], ],
}, },
{ {
label: '土壤土质', label: '土壤墒情、土质',
children: [ children: [
{ {
label: '土壤土质监测仪001', label: '土壤墒情、土质监测仪001',
}, },
{ {
label: '土壤土质监测仪002', label: '土壤墒情、土质监测仪002',
}, },
], ],
}, },
@ -2549,13 +2561,14 @@ const SwitchMode = () => {
const statInfo = chartModeDiv.value; // 获取图表元素 const statInfo = chartModeDiv.value; // 获取图表元素
statInfo.style.width = document.querySelector('.chartModeFather').offsetWidth + 'px'; //初始化echarts图表宽度 statInfo.style.width = document.querySelector('.chartModeFather').offsetWidth + 'px'; //初始化echarts图表宽度
statInfo.style.height = document.querySelector('.chartModeFather').offsetHeight - 50 + 'px'; statInfo.style.height = document.querySelector('.chartModeFather').offsetHeight - 100 + 'px';
console.log(document.querySelector('.chartModeFather').offsetWidth); console.log(document.querySelector('.chartModeFather').offsetWidth);
const myChart = echarts.init(statInfo); const myChart = echarts.init(statInfo);
// 设置宽度自适应 // 设置宽度自适应
window.addEventListener('resize', () => { window.addEventListener('resize', () => {
statInfo.style.width = document.querySelector('.chartModeFather').offsetWidth + 'px'; statInfo.style.width = document.querySelector('.chartModeFather').offsetWidth + 'px';
statInfo.style.height = document.querySelector('.chartModeFather').offsetHeight - 50 + 'px'; statInfo.style.height =
document.querySelector('.chartModeFather').offsetHeight - 100 + 'px';
myChart.resize(); myChart.resize();
}); });
chartModes(); chartModes();
@ -2594,7 +2607,12 @@ const handleNodeClick = (data, node, data1, data2) => {
// 创建一个Entity对象加图片 // 创建一个Entity对象加图片
res.data.forEach((item, index) => { res.data.forEach((item, index) => {
L.marker([item.msLatitude, item.msLongitude]).addTo(map).bindPopup(`<b>智能孢子仪</b><br><br>经度:${item.msLongitude}<br><br>纬度:${item.msLatitude}`).openPopup(); L.marker([item.msLatitude, item.msLongitude])
.addTo(map)
.bindPopup(
`<b>智能孢子仪</b><br><br>经度:${item.msLongitude}<br><br>纬度:${item.msLatitude}`
)
.openPopup();
}); });
}); });
} else if (label3.value == '虫情监测仪') { } else if (label3.value == '虫情监测仪') {
@ -2625,21 +2643,29 @@ const handleNodeClick = (data, node, data1, data2) => {
townZuowu.label = res.data; townZuowu.label = res.data;
// 创建一个Entity对象加图片 // 创建一个Entity对象加图片
res.data.forEach((item, index) => { res.data.forEach((item, index) => {
L.marker([item.msLatitude, item.msLongitude]).addTo(map).bindPopup(`<b>虫情监测仪</b><br><br>经度:${item.msLongitude}<br><br>纬度:${item.msLatitude}`).openPopup(); L.marker([item.msLatitude, item.msLongitude])
.addTo(map)
.bindPopup(
`<b>虫情监测仪</b><br><br>经度:${item.msLongitude}<br><br>纬度:${item.msLatitude}`
)
.openPopup();
}); });
}); });
} else if (label3.value == '土壤土质') { } else if (label3.value == '土壤墒情、土质') {
getfindAllSoil({ equipment: label2.value }).then(res => { getfindAllSoil({ equipment: label2.value }).then(res => {
tabulation.value = res.data; tabulation.value = res.data;
res.data.forEach(item => { res.data.forEach(item => {
item['style'] = [];
if (item.warning == '有') { if (item.warning == '有') {
for (const key in item.limitExceeded[0]) { item.limitExceeded.forEach(i => {
for (const key in i) {
if (key !== 'eqSoilId') { if (key !== 'eqSoilId') {
if (item.limitExceeded[0][key] != null) { if (i[key] != null) {
item['style'] = key; item['style'].push(key);
} }
} }
} }
});
} }
}); });
tableNewData.value = res.data.slice( tableNewData.value = res.data.slice(
@ -2647,6 +2673,7 @@ const handleNodeClick = (data, node, data1, data2) => {
(tabulationcurrentPage.value - 1) * tabulationpageSize.value + (tabulationcurrentPage.value - 1) * tabulationpageSize.value +
tabulationpageSize.value tabulationpageSize.value
); );
console.log(tableNewData.value);
tableItem.value = [ tableItem.value = [
{ {
lable: '0cm湿度(%)', lable: '0cm湿度(%)',
@ -2704,25 +2731,14 @@ const handleNodeClick = (data, node, data1, data2) => {
getequipmentCondition().then(res => { getequipmentCondition().then(res => {
townZuowu.label = res.data; townZuowu.label = res.data;
// 创建一个Entity对象加图片 // 创建一个Entity对象加图片
// res.data.forEach((item, index) => { res.data.forEach((item, index) => {
// viewers.entities.add({ L.marker([item.msLatitude, item.msLongitude])
// name: item.dev_code, .addTo(map)
// position: Cesium.Cartesian3.fromDegrees( .bindPopup(
// parseFloat(item.msLongitude), `<b>土壤墒情、土质</b><br><br>经度:${item.msLongitude}<br><br>纬度:${item.msLatitude}`
// parseFloat(item.msLatitude) )
// ), .openPopup();
// billboard: { });
// image: tu,
// scale: 0.9,
// width: 35,
// height: 35,
// disableDepthTestDistance: Number.POSITIVE_INFINITY, //广告牌不进行深度检测
// // heightReference: Cesium.HeightReference.RELATIVE_TO_GROUND
// heightReference: Cesium.HeightReference.CLAMP_TO_GROUND, //设置HeightReference高度参考类型为CLAMP_TO_GROUND贴地类型
// },
// });
// angle(item);
// });
}); });
} }
} }
@ -2778,6 +2794,11 @@ const onSubmit = () => {
early: formInline.value.flag, early: formInline.value.flag,
equipment: label2.value, equipment: label2.value,
}).then(res => { }).then(res => {
res.data.forEach(item => {
if (item.warning == '有') {
item.pestName = item.picturesMark2O1List[0].pestName;
}
});
tabulation.value = res.data; tabulation.value = res.data;
tableNewData.value = res.data.slice( tableNewData.value = res.data.slice(
(tabulationcurrentPage.value - 1) * tabulationpageSize.value, (tabulationcurrentPage.value - 1) * tabulationpageSize.value,
@ -2785,7 +2806,7 @@ const onSubmit = () => {
tabulationpageSize.value tabulationpageSize.value
); );
}); });
} else if (label3.value == '土壤土质') { } else if (label3.value == '土壤墒情、土质') {
EcTimeArr.value = []; EcTimeArr.value = [];
EcArr.value = []; EcArr.value = [];
PhArr.value = []; PhArr.value = [];
@ -2810,14 +2831,17 @@ const onSubmit = () => {
equipment: label2.value, equipment: label2.value,
}).then(res => { }).then(res => {
res.data.forEach(item => { res.data.forEach(item => {
item['style'] = [];
if (item.warning == '有') { if (item.warning == '有') {
for (const key in item.limitExceeded[0]) { item.limitExceeded.forEach(i => {
for (const key in i) {
if (key !== 'eqSoilId') { if (key !== 'eqSoilId') {
if (item.limitExceeded[0][key] != null) { if (i[key] != null) {
item['style'] = key; item['style'].push(key);
} }
} }
} }
});
} }
}); });
tabulation.value = res.data; tabulation.value = res.data;
@ -2846,14 +2870,14 @@ const onSubmit = () => {
const statInfo = chartModeDiv.value; // 获取图表元素 const statInfo = chartModeDiv.value; // 获取图表元素
statInfo.style.width = document.querySelector('.chartModeFather').offsetWidth + 'px'; //初始化echarts图表宽度 statInfo.style.width = document.querySelector('.chartModeFather').offsetWidth + 'px'; //初始化echarts图表宽度
statInfo.style.height = statInfo.style.height =
document.querySelector('.chartModeFather').offsetHeight - 50 + 'px'; document.querySelector('.chartModeFather').offsetHeight - 100 + 'px';
const myChart = echarts.init(statInfo); const myChart = echarts.init(statInfo);
// 设置宽度自适应 // 设置宽度自适应
window.addEventListener('resize', () => { window.addEventListener('resize', () => {
statInfo.style.width = statInfo.style.width =
document.querySelector('.chartModeFather').offsetWidth + 'px'; document.querySelector('.chartModeFather').offsetWidth + 'px';
statInfo.style.height = statInfo.style.height =
document.querySelector('.chartModeFather').offsetHeight - 50 + 'px'; document.querySelector('.chartModeFather').offsetHeight - 100 + 'px';
myChart.resize(); myChart.resize();
}); });
chartModes(); chartModes();
@ -2876,7 +2900,7 @@ const onDetail = row => {
DetailArr['pestName'] = row.picturesMark2O1List[0].pestName; DetailArr['pestName'] = row.picturesMark2O1List[0].pestName;
} }
let arr = []; let arr = [];
if (label3 == '土壤土质') { if (label3 == '土壤墒情、土质') {
console.log(DetailArr.limitExceeded); console.log(DetailArr.limitExceeded);
} }
console.log(DetailArr); console.log(DetailArr);
@ -2909,6 +2933,7 @@ const cellClick = (row, column, cell, event) => {
//tabs //tabs
const foldClick = () => { const foldClick = () => {
flags.value = !flags.value; flags.value = !flags.value;
setTimeout(() => {
const statInfo = chartModeDiv.value; // 获取图表元素 const statInfo = chartModeDiv.value; // 获取图表元素
statInfo.style.width = document.querySelector('.chartModeFather').offsetWidth + 'px'; //初始化echarts图表宽度 statInfo.style.width = document.querySelector('.chartModeFather').offsetWidth + 'px'; //初始化echarts图表宽度
statInfo.style.height = document.querySelector('.chartModeFather').offsetHeight - 50 + 'px'; statInfo.style.height = document.querySelector('.chartModeFather').offsetHeight - 50 + 'px';
@ -2916,10 +2941,12 @@ const foldClick = () => {
// 设置宽度自适应 // 设置宽度自适应
window.addEventListener('resize', () => { window.addEventListener('resize', () => {
statInfo.style.width = document.querySelector('.chartModeFather').offsetWidth + 'px'; statInfo.style.width = document.querySelector('.chartModeFather').offsetWidth + 'px';
statInfo.style.height = document.querySelector('.chartModeFather').offsetHeight - 50 + 'px'; statInfo.style.height =
document.querySelector('.chartModeFather').offsetHeight - 50 + 'px';
myChart.resize(); myChart.resize();
}); });
chartModes(); chartModes();
}, 20);
}; };
//深度切换 //深度切换
@ -3061,6 +3088,11 @@ const resetForm = () => {
}); });
} else if (label3.value == '虫情监测仪') { } else if (label3.value == '虫情监测仪') {
getinsect({ equipment: label2.value }).then(res => { getinsect({ equipment: label2.value }).then(res => {
res.data.forEach(item => {
if (item.warning == '有') {
item.pestName = item.picturesMark2O1List[0].pestName;
}
});
tabulation.value = res.data; tabulation.value = res.data;
tableNewData.value = res.data.slice( tableNewData.value = res.data.slice(
(tabulationcurrentPage.value - 1) * tabulationpageSize.value, (tabulationcurrentPage.value - 1) * tabulationpageSize.value,
@ -3068,7 +3100,7 @@ const resetForm = () => {
tabulationpageSize.value tabulationpageSize.value
); );
}); });
} else if (label3.value == '土壤土质') { } else if (label3.value == '土壤墒情、土质') {
getfindAllSoil({ equipment: label2.value }).then(res => { getfindAllSoil({ equipment: label2.value }).then(res => {
tabulation.value = res.data; tabulation.value = res.data;
tableNewData.value = res.data.slice( tableNewData.value = res.data.slice(
@ -3182,11 +3214,11 @@ const bugarrsVisible = () => {
const bugarrsVisibles = () => { const bugarrsVisibles = () => {
currentPage.value = 1; currentPage.value = 1;
visibles.value = true; visibles.value = true;
getinsects();
(value1.value = ''), (value2.value = ''), (deviceValue.value = ''); (value1.value = ''), (value2.value = ''), (deviceValue.value = '');
detectionLightsEquipment().then(res => { // getinsects();
options.value = res.data; // detectionLightsEquipment().then(res => {
}); // options.value = res.data;
// });
getinsect().then(res => { getinsect().then(res => {
currentPage.value = 1; currentPage.value = 1;
bugarr.value = res.data; bugarr.value = res.data;
@ -3404,7 +3436,7 @@ const handleClick = (tab, event) => {
}, },
]; ];
getdeviceNumbers('2'); //所有设备列表 getdeviceNumbers('2'); //所有设备列表
} else if (tab.paneName == '土壤土质') { } else if (tab.paneName == '土壤墒情、土质') {
tableItem.value = [ tableItem.value = [
{ {
lable: '0cm湿度(%)', lable: '0cm湿度(%)',
@ -3485,73 +3517,40 @@ const getdeviceNumbers = num => {
getsporeEquipmentCondition().then(res => { getsporeEquipmentCondition().then(res => {
townZuowu.label = res.data; townZuowu.label = res.data;
// 创建一个Entity对象加图片 // 创建一个Entity对象加图片
// res.data.forEach((item, index) => { res.data.forEach((item, index) => {
// viewers.entities.add({ L.marker([item.msLatitude, item.msLongitude])
// name: item.dev_code, .addTo(map)
// position: Cesium.Cartesian3.fromDegrees( .bindPopup(
// parseFloat(item.msLongitude), `<b>智能孢子仪</b><br><br>经度:${item.msLongitude}<br><br>纬度:${item.msLatitude}`
// parseFloat(item.msLatitude) )
// ), .openPopup();
// billboard: { });
// image: chong,
// scale: 0.9,
// width: 35,
// height: 35,
// disableDepthTestDistance: Number.POSITIVE_INFINITY, //广告牌不进行深度检测
// // heightReference: Cesium.HeightReference.RELATIVE_TO_GROUND
// heightReference: Cesium.HeightReference.CLAMP_TO_GROUND, //设置HeightReference高度参考类型为CLAMP_TO_GROUND贴地类型
// },
// });
// angle(item);
// });
}); });
} else if (num == 2) { } else if (num == 2) {
geteqLightEquipmentCondition().then(res => { geteqLightEquipmentCondition().then(res => {
townZuowu.label = res.data; townZuowu.label = res.data;
// 创建一个Entity对象加图片 // 创建一个Entity对象加图片
res.data.forEach((item, index) => { res.data.forEach((item, index) => {
viewers.entities.add({ L.marker([item.msLatitude, item.msLongitude])
name: item.dev_code, .addTo(map)
position: Cesium.Cartesian3.fromDegrees( .bindPopup(
parseFloat(item.msLongitude), `<b>虫情监测仪</b><br><br>经度:${item.msLongitude}<br><br>纬度:${item.msLatitude}`
parseFloat(item.msLatitude) )
), .openPopup();
billboard: {
image: baozi,
scale: 0.9,
width: 35,
height: 35,
disableDepthTestDistance: Number.POSITIVE_INFINITY, //广告牌不进行深度检测
// heightReference: Cesium.HeightReference.RELATIVE_TO_GROUND
heightReference: Cesium.HeightReference.CLAMP_TO_GROUND, //设置HeightReference高度参考类型为CLAMP_TO_GROUND贴地类型
},
});
angle(item);
}); });
}); });
} else if (num == 3) { } else if (num == 3) {
getequipmentCondition().then(res => { getequipmentCondition().then(res => {
townZuowu.label = res.data; townZuowu.label = res.data;
// 创建一个Entity对象加图片 // 创建一个Entity对象加图片
// res.data.forEach((item, index) => { res.data.forEach((item, index) => {
// viewers.entities.add({ L.marker([item.msLatitude, item.msLongitude])
// name: item.dev_code, .addTo(map)
// position: Cesium.Cartesian3.fromDegrees( .bindPopup(
// parseFloat(item.msLongitude), `<b>土壤墒情、土质</b><br><br>经度:${item.msLongitude}<br><br>纬度:${item.msLatitude}`
// parseFloat(item.msLatitude) )
// ), .openPopup();
// billboard: { });
// image: tu,
// scale: 0.9,
// width: 35,
// height: 35,
// disableDepthTestDistance: Number.POSITIVE_INFINITY, //广告牌不进行深度检测
// // heightReference: Cesium.HeightReference.RELATIVE_TO_GROUND
// heightReference: Cesium.HeightReference.CLAMP_TO_GROUND, //设置HeightReference高度参考类型为CLAMP_TO_GROUND贴地类型
// },
// });
// angle(item);
// });
}); });
} }
}); });
@ -3700,7 +3699,6 @@ const geteqLightEquipmentConditions = () => {
} }
geteqLightEquipmentCondition().then(res => { geteqLightEquipmentCondition().then(res => {
townZuowu.label = res.data; townZuowu.label = res.data;
// 创建一个Entity对象加图片 // 创建一个Entity对象加图片
res.data.forEach((item, index) => { res.data.forEach((item, index) => {
viewer.entities.add({ viewer.entities.add({
@ -3801,6 +3799,7 @@ function farmland() {
// end: 100,//默认为100 // end: 100,//默认为100
type: 'slider', type: 'slider',
show: false, show: false,
zoomLock: true, //禁止拉伸
// xAxisIndex: [0], // xAxisIndex: [0],
handleSize: 0, //滑动条的 左右2个滑动条的大小 handleSize: 0, //滑动条的 左右2个滑动条的大小
startValue: 0, // 初始显示值 startValue: 0, // 初始显示值
@ -3997,6 +3996,7 @@ function Ph() {
// start: 0,//默认为0 // start: 0,//默认为0
// end: 100,//默认为100 // end: 100,//默认为100
type: 'slider', type: 'slider',
zoomLock: true, //禁止拉伸
show: false, show: false,
// xAxisIndex: [0], // xAxisIndex: [0],
handleSize: 0, //滑动条的 左右2个滑动条的大小 handleSize: 0, //滑动条的 左右2个滑动条的大小
@ -4171,6 +4171,7 @@ function soil() {
// start: 0,//默认为0 // start: 0,//默认为0
// end: 100,//默认为100 // end: 100,//默认为100
type: 'slider', type: 'slider',
zoomLock: true, //禁止拉伸
show: false, show: false,
// xAxisIndex: [0], // xAxisIndex: [0],
handleSize: 0, //滑动条的 左右2个滑动条的大小 handleSize: 0, //滑动条的 左右2个滑动条的大小
@ -4370,6 +4371,7 @@ function chartModes() {
{ {
type: 'slider', type: 'slider',
width: '40%', width: '40%',
zoomLock: true,
top: '90%', top: '90%',
start: 0, start: 0,
end: ends, end: ends,
@ -5075,14 +5077,15 @@ $height: calc(100vh - 110px);
width: 20px; width: 20px;
height: 100%; height: 100%;
position: relative; position: relative;
z-index: 99;
.arrow { .arrow {
width: 22px; width: 22px;
height: 22px; height: 22px;
// background: #ccc; // background: #ccc;
position: absolute; position: absolute;
top: 50%; top: 50%;
transform: translate(10%, -50%); transform: translate(-80%, -50%);
z-index: 1; z-index: 99;
border-radius: 50%; border-radius: 50%;
cursor: pointer; cursor: pointer;
} }
@ -5258,10 +5261,10 @@ $height: calc(100vh - 110px);
} }
} }
} }
// .chartModeDiv { .chartModeDiv {
// width: 100%; width: 100%;
// height: 100%; height: 50%;
// } }
.depth { .depth {
width: 50%; width: 50%;
height: 26px; height: 26px;

3
src/views/meteorological/remoteSense/FloodExtraction/FloodExtraction.vue
View File

@ -1762,6 +1762,7 @@ function chartModes() {
width: '40%', width: '40%',
top: '90%', top: '90%',
start: 0, start: 0,
zoomLock: true, //禁止拉伸
end: ends, end: ends,
showDataShadow: false, showDataShadow: false,
showDetail: false, showDetail: false,
@ -1795,7 +1796,7 @@ function chartModes() {
axisLabel: { axisLabel: {
fontSize: 12, fontSize: 12,
interval: 0, interval: 0,
rotate: 40, rotate: 0,
}, },
axisLine: { axisLine: {
lineStyle: { lineStyle: {

71
src/views/meteorological/remoteSense/drought/Drought.vue
View File

@ -283,14 +283,28 @@
:prop="item.value" :prop="item.value"
:label="index == 0 ? item.lable : item.lable + '(亩)'" :label="index == 0 ? item.lable : item.lable + '(亩)'"
align="center" align="center"
/> >
<el-table-column prop="address" v-if="operate" align="center" label="操作">
<template #default="scope"> <template #default="scope">
<span <span
style="color: rgba(67, 181, 143, 1); cursor: pointer" style="color: rgba(234, 165, 93, 0.8); font-weight: 600"
@click="download(scope.row)" v-if="item.value == '轻度干旱'"
> >
下载 {{ scope.row[item.value] }}
</span>
<span
style="color: rgba(205, 92, 92, 1); font-weight: 700"
v-else-if="item.value == '中度干旱'"
>
{{ scope.row[item.value] }}
</span>
<span
style="color: red; font-weight: 800"
v-else-if="item.value == '重度干旱'"
>
{{ scope.row[item.value] }}
</span>
<span v-else>
{{ scope.row[item.value] }}
</span> </span>
</template> </template>
</el-table-column> </el-table-column>
@ -299,7 +313,7 @@
<el-table <el-table
:data="tableNewData" :data="tableNewData"
:header-cell-style="{ 'text-align': 'center' }" :header-cell-style="{ 'text-align': 'center' }"
height="70%" height="80%"
highlight-current-row highlight-current-row
header-row-class-name="tabth" header-row-class-name="tabth"
> >
@ -316,14 +330,28 @@
:prop="item.value" :prop="item.value"
:label="index == 0 ? item.lable : item.lable + '(亩)'" :label="index == 0 ? item.lable : item.lable + '(亩)'"
align="center" align="center"
/> >
<el-table-column prop="address" v-if="operate" align="center" label="操作">
<template #default="scope"> <template #default="scope">
<span <span
style="color: rgba(67, 181, 143, 1); cursor: pointer" style="color: rgba(234, 165, 93, 0.8); font-weight: 600"
@click="download(scope.row)" v-if="item.value == '轻度干旱'"
> >
下载 {{ scope.row[item.value] }}
</span>
<span
style="color: rgba(205, 92, 92, 1); font-weight: 700"
v-else-if="item.value == '中度干旱'"
>
{{ scope.row[item.value] }}
</span>
<span
style="color: red; font-weight: 800"
v-else-if="item.value == '重度干旱'"
>
{{ scope.row[item.value] }}
</span>
<span v-else>
{{ scope.row[item.value] }}
</span> </span>
</template> </template>
</el-table-column> </el-table-column>
@ -464,7 +492,7 @@ let layersDic = {
// 组件挂载完成后执行 // 组件挂载完成后执行
onMounted(() => { onMounted(() => {
initonMounted() initonMounted();
}); });
function initonMounted() { function initonMounted() {
@ -494,7 +522,13 @@ function initonMounted() {
rightWra.style.transform = 'translate(107%,0)'; rightWra.style.transform = 'translate(107%,0)';
localStorage.setItem(router.currentRoute.value.path, true); localStorage.setItem(router.currentRoute.value.path, true);
} }
onUpdated(() => {
if (localStorage.getItem(router.currentRoute.value.path) == 'false') {
document.querySelector('.mode').innerText = '地图模式';
} else {
document.querySelector('.mode').innerText = '列表模式';
}
});
/*-------------地图------------------------*/ /*-------------地图------------------------*/
const mapOption = { const mapOption = {
@ -1354,6 +1388,13 @@ const getTownships = city => {
}; };
//村 //村
const getadministratives = city => { const getadministratives = city => {
dd = {
适宜: [],
湿润: [],
轻度干旱: [],
中度干旱: [],
重度干旱: [],
};
getadministrative({ divisions: city }).then(res => { getadministrative({ divisions: city }).then(res => {
Township.brr = res.data; Township.brr = res.data;
let arr = [...res.data]; let arr = [...res.data];
@ -1364,7 +1405,6 @@ const getadministratives = city => {
} }
}); });
data.title = [...Object.values(brr)]; data.title = [...Object.values(brr)];
console.log(res);
data.title.forEach((item, index) => { data.title.forEach((item, index) => {
let town = res.data.map(i => { let town = res.data.map(i => {
if (item === i.streetName) { if (item === i.streetName) {
@ -1372,7 +1412,7 @@ const getadministratives = city => {
} }
}); });
Object.keys(dd).forEach(it => { Object.keys(dd).forEach(it => {
const index = town.findIndex(a => a && a.type === it); const index = town.findIndex(a => a && a.type === it && a.area > 0);
if (index > -1) { if (index > -1) {
dd[it].push(1); dd[it].push(1);
} else { } else {
@ -2733,6 +2773,7 @@ function chartModes() {
type: 'slider', type: 'slider',
width: '40%', width: '40%',
top: '90%', top: '90%',
zoomLock: true, //禁止拉伸
start: 0, start: 0,
end: ends, end: ends,
showDataShadow: false, showDataShadow: false,

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

@ -1310,6 +1310,12 @@ const getTownships = city => {
}; };
//村 //村
const getadministratives = city => { const getadministratives = city => {
dd = {
无冻害: [],
轻度冻害: [],
中度冻害: [],
重度冻害: [],
};
getadministrative({ divisions: city }).then(res => { getadministrative({ divisions: city }).then(res => {
Township.brr = res.data; Township.brr = res.data;
let arr = [...res.data]; let arr = [...res.data];
@ -1328,7 +1334,7 @@ const getadministratives = city => {
} }
}); });
Object.keys(dd).forEach(it => { Object.keys(dd).forEach(it => {
const index = town.findIndex(a => a && a.type === it); const index = town.findIndex(a => a && a.type === it && a.area > 0);
if (index > -1) { if (index > -1) {
dd[it].push(1); dd[it].push(1);
} else { } else {
@ -2066,6 +2072,7 @@ function chartModes() {
type: 'slider', type: 'slider',
width: '40%', width: '40%',
top: '90%', top: '90%',
zoomLock: true, //禁止拉伸
start: 0, start: 0,
end: ends, end: ends,
showDataShadow: false, showDataShadow: false,
@ -2108,7 +2115,7 @@ function chartModes() {
axisLabel: { axisLabel: {
fontSize: 12, fontSize: 12,
interval: 0, interval: 0,
rotate: 40, rotate: 0,
}, },
axisLine: { axisLine: {
lineStyle: { lineStyle: {