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
Download Patch File Download Diff File Expand all files Collapse all files

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