This commit is contained in:
tianlong 2023-06-08 20:34:27 +08:00
parent c995f921f0
commit a163876af8
5 changed files with 813 additions and 730 deletions

967
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -35,6 +35,7 @@
"pinia": "2.0.22",
"postcss-px2rem": "^0.3.0",
"v-scale-screen": "^2.2.0",
"vite-plugin-svg-icons": "^2.0.1",
"vue": "3.2.45",
"vue-cropper": "1.0.3",
"vue-json-excel": "^0.3.0",
@ -45,13 +46,13 @@
"xlsx": "^0.18.5"
},
"devDependencies": {
"@types/node": "^20.2.5",
"@vitejs/plugin-vue": "3.1.0",
"@vue/compiler-sfc": "3.2.45",
"sass": "1.56.1",
"unplugin-auto-import": "0.11.4",
"vite": "3.2.3",
"unplugin-auto-import": "^0.11.5",
"vite": "^3.2.7",
"vite-plugin-compression": "0.5.1",
"vite-plugin-svg-icons": "2.0.1",
"vite-plugin-vue-setup-extend": "0.4.0"
}
}

View File

@ -58,7 +58,7 @@ export const constantRoutes = [
hidden: true
},
{
path: '',
path: '/',
component: Layout,
redirect: '/crops/Classify',
// children: [

View File

@ -1062,7 +1062,7 @@
height="90%"
highlight-current-row
>
<el-table-column label="监测时间">
<el-table-column fixed="left" label="监测时间">
<template #default="scope">
<span v-if="label3 == '土壤土质'">
{{ scope.row.dataTime }}
@ -1104,7 +1104,11 @@
:label="item.lable"
>
<template #default="scope">
<span v-if="scope.row.warning === '有'" style="color: red">
<div v-if="label3 == '虫情监测仪'">
<span
v-if="scope.row.warning === '有'"
style="color: red"
>
{{
scope.row.picturesMark2O1List[0].pestName +
':' +
@ -1114,6 +1118,18 @@
<span v-else>
{{ scope.row.warning }}
</span>
</div>
<div v-if="label3 == '土壤土质'">
<span
v-if="scope.row.style == item.value"
style="color: red"
>
{{ scope.row[item.value] }}
</span>
<span v-else>
{{ scope.row[item.value] }}
</span>
</div>
</template>
</el-table-column>
<el-table-column label="操作">
@ -1299,7 +1315,7 @@
<el-dialog
v-model="DetailVisible"
title="监测结果详情"
width="30%"
width="35%"
:before-close="handleClose"
>
<div v-if="label3 !== '土壤土质'" class="rowContent">
@ -1342,11 +1358,20 @@
</div>
</image-preview>
</div>
<div class='rowContent_bottom' v-if="label3 == '土壤土质'">
<div class="rowContent_bottom" v-if="label3 == '土壤土质'">
<div class="rowContentTop">
<div class="rowContentchildren">
<p>
<span
style="
font-size: 16px;
font-weight: 700;
color: rgba(100, 195, 164, 1);
margin-left: 0;
"
>
土壤墒情
</span>
<span
v-if="DetailArr.warning == '有'"
style="background: rgba(212, 48, 48, 1)"
@ -1363,9 +1388,336 @@
<span>{{ DetailArr.dataTime }}</span>
</div>
<div v-if="DetailArr.warning == '有'">
<span>
{{ DetailArr}}
<span style="font-size: 16px; font-weight: 00">
{{ dictionary[DetailArr.style] }} :
<span style="color: red; font-size: 18px; font-weight: 700">
{{ DetailArr[DetailArr.style] }}
</span>
</span>
</div>
</div>
<p style="margin-left: 15px; font-size: 16px; font-weight: 700">土壤湿度</p>
<div class="rowContentTop">
<div>
<div class="rowContentTopChildren">
<div>
0cm湿度():
<span
style="
color: rgba(67, 207, 124, 1);
font-size: 18px;
font-weight: 700;
"
v-if="60 >= DetailArr.soilHumidity1 >= 5"
>
{{ DetailArr.soilHumidity1 }}
</span>
<span
style="
color: rgba(212, 48, 48, 1);
font-size: 18px;
font-weight: 700;
"
v-else
>
{{ DetailArr.soilHumidity1 }}
</span>
</div>
<div>
-10cm湿度():
<span
style="
color: rgba(67, 207, 124, 1);
font-size: 18px;
font-weight: 700;
"
v-if="
DetailArr.soilHumidity2 >= 0 &&
DetailArr.soilHumidity2 <= 30
"
>
{{ DetailArr.soilHumidity2 }}
</span>
<span
style="
color: rgba(212, 48, 48, 1);
font-size: 18px;
font-weight: 700;
"
v-else
>
{{ DetailArr.soilHumidity2 }}
</span>
</div>
<div>
-20cm湿度():
<span
style="
color: rgba(67, 207, 124, 1);
font-size: 18px;
font-weight: 700;
"
v-if="
DetailArr.soilHumidity3 >= 0 &&
DetailArr.soilHumidity3 <= 30
"
>
{{ DetailArr.soilHumidity3 }}
</span>
<span
style="
color: rgba(212, 48, 48, 1);
font-size: 18px;
font-weight: 700;
"
v-else
>
{{ DetailArr.soilHumidity3 }}
</span>
</div>
<div>
-30cm湿度():
<span
style="
color: rgba(67, 207, 124, 1);
font-size: 18px;
font-weight: 700;
"
v-if="
DetailArr.soilHumidity4 >= 0 &&
DetailArr.soilHumidity4 <= 40
"
>
{{ DetailArr.soilHumidity4 }}
</span>
<span
style="
color: rgba(212, 48, 48, 1);
font-size: 18px;
font-weight: 700;
"
v-else
>
{{ DetailArr.soilHumidity4 }}
</span>
</div>
<div>
-40cm湿度():
<span
style="
color: rgba(67, 207, 124, 1);
font-size: 18px;
font-weight: 700;
"
v-if="
DetailArr.soilHumidity5 >= 0 &&
DetailArr.soilHumidity5 <= 40
"
>
{{ DetailArr.soilHumidity5 }}
</span>
<span
style="
color: rgba(212, 48, 48, 1);
font-size: 18px;
font-weight: 700;
"
v-else
>
{{ DetailArr.soilHumidity5 }}
</span>
</div>
</div>
</div>
</div>
<p style="margin-left: 15px; font-size: 16px; font-weight: 700">土壤温度</p>
<div class="rowContentTop">
<div>
<div class="rowContentTopChildren">
<div>
0cm温度():
<span
style="
color: rgba(67, 207, 124, 1);
font-size: 18px;
font-weight: 700;
"
v-if="
DetailArr.soilTemperature1 >= -10 &&
DetailArr.soilTemperature1 <= 40
"
>
{{ DetailArr.soilTemperature1 }}
</span>
<span
style="
color: rgba(212, 48, 48, 1);
font-size: 18px;
font-weight: 700;
"
v-else
>
{{ DetailArr.soilTemperature1 }}
</span>
</div>
<div>
-10cm温度():
<span
style="
color: rgba(67, 207, 124, 1);
font-size: 18px;
font-weight: 700;
"
v-if="
DetailArr.soilTemperature2 >= -5 &&
DetailArr.soilTemperature2 <= 40
"
>
{{ DetailArr.soilTemperature2 }}
</span>
<span
style="
color: rgba(212, 48, 48, 1);
font-size: 18px;
font-weight: 700;
"
v-else
>
{{ DetailArr.soilTemperature2 }}
</span>
</div>
<div>
-20cm温度():
<span
style="
color: rgba(67, 207, 124, 1);
font-size: 18px;
font-weight: 700;
"
v-if="
DetailArr.soilTemperature3 >= 0 &&
DetailArr.soilTemperature3 <= 30
"
>
{{ DetailArr.soilTemperature3 }}
</span>
<span
style="
color: rgba(212, 48, 48, 1);
font-size: 18px;
font-weight: 700;
"
v-else
>
{{ DetailArr.soilTemperature3 }}
</span>
</div>
<div>
-30cm温度():
<span
style="
color: rgba(67, 207, 124, 1);
font-size: 18px;
font-weight: 700;
"
v-if="
DetailArr.soilTemperature4 >= 0 &&
DetailArr.soilTemperature4 <= 30
"
>
{{ DetailArr.soilTemperature4 }}
</span>
<span
style="
color: rgba(212, 48, 48, 1);
font-size: 18px;
font-weight: 700;
"
v-else
>
{{ DetailArr.soilTemperature4 }}
</span>
</div>
<div>
-40cm温度():
<span
style="
color: rgba(67, 207, 124, 1);
font-size: 18px;
font-weight: 700;
"
v-if="
DetailArr.soilTemperature5 >= 0 &&
DetailArr.soilTemperature5 <= 30
"
>
{{ DetailArr.soilTemperature5 }}
</span>
<span
style="
color: rgba(212, 48, 48, 1);
font-size: 18px;
font-weight: 700;
"
v-else
>
{{ DetailArr.soilTemperature5 }}
</span>
</div>
</div>
</div>
</div>
<p style="margin-left: 15px; font-size: 16px; font-weight: 700">土质</p>
<div class="rowContentTop">
<div>
<div class="rowContentTopChildren">
<div>
土壤EC值:
<span
style="
color: rgba(67, 207, 124, 1);
font-size: 18px;
font-weight: 700;
"
v-if="DetailArr.soilEc >= 0 && DetailArr.soilEc <= 0.2"
>
{{ DetailArr.soilEc }}
</span>
<span
style="
color: rgba(212, 48, 48, 1);
font-size: 18px;
font-weight: 700;
"
v-else
>
{{ DetailArr.soilEc }}
</span>
</div>
<div>
土壤PH值:
<span
style="
color: rgba(67, 207, 124, 1);
font-size: 18px;
font-weight: 700;
"
v-if="DetailArr.soilPh > 5.5 && DetailArr.soilPh < 7.5"
>
{{ DetailArr.soilPh }}
</span>
<span
style="
color: rgba(212, 48, 48, 1);
font-size: 18px;
font-weight: 700;
"
v-else
>
{{ DetailArr.soilPh }}
</span>
</div>
</div>
</div>
</div>
</div>
@ -1481,6 +1833,19 @@ let tabulationpageSize = ref(12); //每页条数
const activeName = ref('全部'); //tabs
let DetailArr = ref([]);
const dictionary = ref({
soilTemperature1: '0cm温度',
soilTemperature2: '-10cm温度',
soilTemperature3: '-20cm温度',
soilTemperature4: '-30cm温度',
soilTemperature5: '-40cm温度',
soilHumidity1: '0cm湿度(%)',
soilHumidity2: '-10cm湿度(%)',
soilHumidity3: '-20cm湿度(%)',
soilHumidity4: '-30cm湿度(%)',
soilHumidity5: '-40cm湿度(%)',
});
const treeData = [
{
label: '大场镇',
@ -2109,13 +2474,74 @@ const handleNodeClick = (data, node, data1, data2) => {
} else if (label3.value == '土壤土质') {
getfindAllSoil({ equipment: label2.value }).then(res => {
tabulation.value = res.data;
let arr = [];
res.data.forEach(item => {
if (item.warning == '有') {
for (const key in item.limitExceeded[0]) {
if (key !== 'eqSoilId') {
if (item.limitExceeded[0][key] != null) {
arr.push(key);
}
}
}
}
item['style'] = arr;
});
tableNewData.value = res.data.slice(
(tabulationcurrentPage.value - 1) * tabulationpageSize.value,
(tabulationcurrentPage.value - 1) * tabulationpageSize.value +
tabulationpageSize.value
);
console.log(tableNewData.value);
tableItem.value = [];
tableItem.value = [
{
lable: '0cm湿度(%)',
value: 'soilHumidity1',
},
{
lable: '-10cm湿度(%)',
value: 'soilHumidity2',
},
{
lable: '-20cm湿度(%)',
value: 'soilHumidity3',
},
{
lable: '-30cm湿度(%)',
value: 'soilHumidity4',
},
{
lable: '-40cm湿度(%)',
value: 'soilHumidity5',
},
{
lable: '0cm温度',
value: 'soilTemperature1',
},
{
lable: '-10cm温度',
value: 'soilTemperature2',
},
{
lable: '-20cm温度',
value: 'soilTemperature3',
},
{
lable: '-30cm温度',
value: 'soilTemperature4',
},
{
lable: '-40cm温度',
value: 'soilTemperature5',
},
{
lable: '-30cm温度',
value: 'soilTemperature4',
},
{
lable: '-40cm温度',
value: 'soilTemperature5',
},
];
});
if (viewers.entities) {
viewers.entities.removeAll();
@ -2228,6 +2654,17 @@ const onSubmit = () => {
early: formInline.value.flag,
equipment: label2.value,
}).then(res => {
res.data.forEach(item => {
if (item.warning == '有') {
for (const key in item.limitExceeded[0]) {
if (key !== 'eqSoilId') {
if (item.limitExceeded[0][key] != null) {
item['style'] = key;
}
}
}
}
});
tabulation.value = res.data;
tableNewData.value = res.data.slice(
(tabulationcurrentPage.value - 1) * tabulationpageSize.value,
@ -2504,7 +2941,6 @@ const resetForm = () => {
const statInfo = chartModeDiv.value; //
statInfo.style.width = document.querySelector('.chartModeFather').offsetWidth + 'px'; //echarts
statInfo.style.height = document.querySelector('.chartModeFather').offsetHeight + 'px';
console.log(document.querySelector('.chartModeFather').offsetWidth);
const myChart = echarts.init(statInfo);
//
window.addEventListener('resize', () => {
@ -3634,6 +4070,7 @@ function chartModes() {
var sportTime = temperature.value;
console.log(time, sportData, sportTime);
let option = {
color:['rgba(232, 125, 125, 1)','rgba(199, 125, 231, 1)',],
tooltip: {
trigger: 'axis',
},
@ -3644,6 +4081,16 @@ function chartModes() {
bottom: '15%',
containLabel: true,
},
legend: {
show: true,
top: '7%',
right: '40%',
textStyle: { color: 'black' },
itemWidth: 20,
itemHeight: 12.5,
icon: 'rect',
backgroundColor: 'transparent',
},
dataZoom: [
{
// start: 0,//0
@ -3775,17 +4222,42 @@ function chartModes() {
type: 'line',
data: sportTime,
symbolSize: 10,
// symbol: 'circle',
itemStyle: {
// symbol
normal: {
color: function (param) {
//
if (param.value < 25) {
return 'rgba(232, 125, 125, 0.95)';
} else if (param.value > 25) {
if (active.value == 1) {
if (param.value >= -10 && param.value <= 40) {
return 'rgba(232,125,125,1)';
} else {
return 'red';
}
} else if (active.value == 2) {
if (param.value >= -5 <= 40) {
return 'rgba(232,125,125,1)';
} else {
return 'red';
}
} else if (active.value == 3) {
if (param.value >= 0 && param.value <= 30) {
return 'rgba(232,125,125,1)';
} else {
return 'red';
}
} else if (active.value == 4) {
if (param.value >= 0 && param.value <= 30) {
return 'rgba(232,125,125,1)';
} else {
return 'red';
}
} else if (active.value == 5) {
if (param.value >= 0 && param.value <= 30) {
return 'rgba(232,125,125,1)';
} else {
return 'red';
}
}
},
},
},
@ -3793,9 +4265,10 @@ function chartModes() {
smooth: true,
yAxisIndex: 0,
showSymbol: true,
symbol: 'circle',
lineStyle: {
width: 3,
color: 'rgba(232, 125, 125, 0.95)',
color: 'rgba(232, 125, 125, 1)',
},
},
{
@ -3804,18 +4277,62 @@ function chartModes() {
data: sportData,
symbolSize: 10,
yAxisIndex: 1,
// symbol: 'circle',
itemStyle: {
// symbol
normal: {
color: 'rgba(168, 216, 234, 1)',
color: function (param) {
//
if (active.value == 1) {
if (param.value >= 5 && param.value <= 60) {
return 'rgba(199, 125, 231, 1)';
} else {
return 'red';
}
} else if (active.value == 2) {
if (param.value >= 0 <= 30) {
return 'rgba(199, 125, 231, 1)';
} else {
return 'red';
}
} else if (active.value == 3) {
if (param.value >= 0 && param.value <= 30) {
return 'rgba(199, 125, 231, 1)';
} else {
return 'red';
}
} else if (active.value == 4) {
if (param.value >= 0 && param.value <= 40) {
return 'rgba(199, 125, 231, 1)';
} else {
return 'red';
}
} else if (active.value == 5) {
if (param.value >= 0 && param.value <= 40) {
return 'rgba(199, 125, 231, 1)';
} else {
return 'red';
}
}
},
},
},
label:{
color:(params)=>params.color
},
smooth: true,
showSymbol: true,
symbol: 'circle',
lineStyle: {
width: 3,
color: 'rgba(168, 216, 234, 1)',
color: 'rgba(199, 125, 231, 1)',
},
},
{
name: '预警',
type: 'bar',
data: [],
itemStyle: {
color: 'red', //
},
},
],
@ -4173,8 +4690,8 @@ $height: calc(100vh - 110px);
align-items: center;
color: rgba(100, 195, 164, 1);
span {
width: 62px;
height: 24px;
// width: 62px;
// height: 24px;
opacity: 1;
border-radius: 0px 8px;
display: flex;
@ -4187,6 +4704,16 @@ $height: calc(100vh - 110px);
line-height: 14px;
}
}
.rowContentTopChildren {
font-size: 18px;
display: flex;
flex-wrap: wrap;
div {
width: 33%;
text-align: right;
padding: 5px;
}
}
}
}

View File

@ -91,7 +91,7 @@
:cell-style="{ textAlign: 'center' }"
:header-cell-style="{ 'text-align': 'center' }"
:data="highStandardArr"
style="width: 100%;font-size: 6px;"
style="width: 100%;font-size: 12px;"
>
<el-table-column prop="region" label="区域名称" />
<el-table-column
@ -133,7 +133,7 @@
:cell-style="{ textAlign: 'center' }"
:header-cell-style="{ 'text-align': 'center' }"
:data="ZoningData"
style="width: 100%;font-size: 6px;"
style="width: 100%;font-size: 12px;"
>
<el-table-column prop="name" label="区域名称" />
<el-table-column