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-09-11 21:56:39 +08:00
parent 7a43f39ec8
commit 4c2c1739fc
1719 changed files with 33351 additions and 103245 deletions
Download Patch File Download Diff File Expand all files Collapse all files

296
src/views/meteorological/monitor/information/index.vue
View File

@ -47,12 +47,12 @@
:header-cell-style="{ 'text-align': 'center' }"
:cell-style="{ 'text-align': 'center' }"
header-row-class-name="tabth"
height="80%"
height="90%"
highlight-current-row
>
<el-table-column prop="dataTime" label="日期" width="160">
<template #default="scope">
<div>{{ scope.row.dataTime}}</div>
<div>{{ scope.row.dataTime }}</div>
<!-- <div>{{ handleDate(scope.row.dataTime) }}</div>
<div>{{ handleTime(scope.row.dataTime) }}</div> -->
</template>
@ -72,11 +72,11 @@
/>
</el-table>
<div class="example-pagination-block">
共{{ tabulation.length }}条
共{{ tabulation }}条
<el-pagination
background
layout="prev, pager, next"
:total="tabulation.length"
:total="Number(tabulation)"
:current-page="tabulationcurrentPage"
:page-size="tabulationpageSize"
@current-change="tabulationCurrentChange"
@ -193,7 +193,7 @@ let formInline = ref({
});
let flags = ref(false);
let tabulationcurrentPage = ref(1); //列表当前页
let tabulationpageSize = ref(11); //每页条数
let tabulationpageSize = ref(14); //每页条数
let center = null; // 指定中心点
let chartData = ref({
airTemperature: [], //空气温度
@ -219,14 +219,13 @@ const data = reactive({
onMounted(() => {
getmeteorologicals();
initLeafletMap();
getmeteorologys();
getMeteorologyTbs();
});
onUpdated(() => {
document.querySelector('.mode').style.display = 'none';
window.document.querySelector('#screenfull').style.display = 'none';
});
let baseLayers = null;
const initLeafletMap = () => {
//加载地图
map = L.map('cesiumContainers', {
@ -235,20 +234,58 @@ const initLeafletMap = () => {
zoomControl: false, //禁用 + - 按钮
doubleClickZoom: false, // 禁用双击放大
attributionControl: false, // 移除右下角leaflet标识
maxZoom: 16,
crs: serverAPI.tiandituzhuji=='http://59.206.203.34/tileservice/SDRasterPubMapDJ?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=sdcia&STYLE=default&TILEMATRIXSET=sdcia&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&FORMAT=application%2Fpng' ? L.CRS.EPSG4326 : L.CRS.EPSG3857
});
// 渲染底图
L.tileLayer(
'http://t0.tianditu.com/DataServer?T=img_w&tk=5956e6519f2bb0ae8e57bc834298c9f1&x={x}&y={y}&l={z}'
).addTo(map);
L.tileLayer(
'http://t0.tianditu.com/DataServer?T=cia_w&tk=5956e6519f2bb0ae8e57bc834298c9f1&x={x}&y={y}&l={z}'
).addTo(map);
map._onResize();
// 创建底图图层
let imgBaseLayer = null;
let ciaBaseLayer = null;
if (
serverAPI.tiandituzhuji ==
'http://59.206.203.34/tileservice/SDRasterPubMapDJ?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=sdcia&STYLE=default&TILEMATRIXSET=sdcia&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&FORMAT=application%2Fpng'
) {
imgBaseLayer = L.tileLayer(serverAPI.tiandituLayers, {
maxZoom: 20,
tileSize: 256,
zoomOffset: 1,
});
ciaBaseLayer = L.tileLayer(serverAPI.tiandituzhuji, {
maxZoom: 20,
tileSize: 256,
zoomOffset: 1,
});
} else {
// 创建底图图层
imgBaseLayer = L.tileLayer(serverAPI.tiandituLayers, {
// maxZoom: 20,
// tileSize: 256,
// zoomOffset: 1,
});
ciaBaseLayer = L.tileLayer(serverAPI.tiandituzhuji, {
// maxZoom: 20,
// tileSize: 256,
// zoomOffset: 1,
});
}
// 将底图图层添加到地图
imgBaseLayer.addTo(map);
ciaBaseLayer.addTo(map);
baseLayers = {
'Image Base Map': imgBaseLayer,
'CIA Base Map': ciaBaseLayer,
};
L.Util.requestAnimFrame(map.invalidateSize, map, !1, map._container); //解决首次加载不完全问题
};
/*-----------接口---------------*/
const getmeteorologicals = () => {
getmeteorological({ divisions: code }).then(res => {
label2.value = res.data[0].children[0].label;
city.value = res.data[0].children[0].label;
getmeteorologys();
res.data.forEach(item => {
devicesArr.value.push(item);
});
@ -256,96 +293,142 @@ const getmeteorologicals = () => {
};
const getmeteorologys = () => {
getmeteorology({
msName: city.value,
whetherToDownload: false,
startTime: value1.value[0] ? moment(value1.value[0]).format('YYYY-MM-DD HH:mm:ss') : null,
endTime: value1.value[1] ? moment(value1.value[1]).format('YYYY-MM-DD HH:mm:ss') : null,
divisions: code,
pageNums:tabulationcurrentPage.value,
pageSizes:tabulationpageSize.value
}).then(res => {
tabulation.value = res.data[0] && res.data[0].pageCount;
tableNewData.value = res.data
});
getMeteorologyTbs();
// getMeteorological({ divisions: code }).then(res => {
// map.eachLayer(layer => {
// // 检查图层是否为底图
// const isBaseLayer = Object.values(baseLayers).includes(layer);
// // 如果不是底图，删除图层
// if (!isBaseLayer) {
// map.removeLayer(layer);
// }
// });
// res.data.forEach(item => {
// center = L.latLng(item.msLatitude, item.msLongitude);
// map.setView(center, 17);
// L.marker([item.msLatitude, item.msLongitude], { icon: greenIcon })
// .addTo(map)
// .bindPopup(
// `<b>${item.msName}</b><br><br>经度:${item.msLongitude}<br><br>纬度:${item.msLatitude}`
// )
// .openPopup();
// });
// });
};
const getMeteorologyTbs = () => {
getMeteorologyTb({
name: city.value,
whetherToDownload: false,
startTime: value1.value[0] ? moment(value1.value[0]).format('YYYY-MM-DD HH:mm:ss') : null,
endTime: value1.value[1] ? moment(value1.value[1]).format('YYYY-MM-DD HH:mm:ss') : null,
divisions: window.localStorage.getItem('divisions'),
divisions: code,
}).then(res => {
tabulation.value = res.data;
tableNewData.value = res.data.slice(
(tabulationcurrentPage.value - 1) * tabulationpageSize.value,
(tabulationcurrentPage.value - 1) * tabulationpageSize.value + tabulationpageSize.value
);
});
getMeteorological({ divisions: window.localStorage.getItem('divisions') }).then(res => {
res.data.forEach(item => {
center = L.latLng(item.msLatitude, item.msLongitude);
map.setView(center, 17);
L.marker([item.msLatitude, item.msLongitude], { icon: greenIcon })
.addTo(map)
.bindPopup(
`<b>${item.msName}</b><br><br>经度:${item.msLongitude}<br><br>纬度:${item.msLatitude}`
)
.openPopup();
});
});
};
const getMeteorologyTbs = () => {
(chartData.value['airTemperature'] = []), //空气温度
(chartData.value['airHumidity'] = []), //空气湿度
(chartData.value['windSpeed'] = []), //风速
(chartData.value['windDirection'] = []), //风向
(chartData.value['rainfall'] = []), //雨量
(chartData.value['atmosphericPressure'] = []), //大气压力
(chartData.value['evaporation'] = []), //蒸发
(chartData.value['lightIntensity'] = []), //光照强度
(chartData.value['sunlightHours'] = []), //日照时数
(chartData.value['photosyntheticEffectiveRadiation'] = []), //光合有效
(chartData.value['dataTimeArr'] = []),
getMeteorologyTb({
name: city.value,
whetherToDownload: false,
startTime: value1.value[0]
? moment(value1.value[0]).format('YYYY-MM-DD HH:mm:ss')
: null,
endTime: value1.value[1] ? moment(value1.value[1]).format('YYYY-MM-DD HH:mm:ss') : null,
}).then(res => {
(chartData.value['airTemperature'] = []), //空气温度
(chartData.value['airHumidity'] = []), //空气湿度
(chartData.value['windSpeed'] = []), //风速
(chartData.value['windDirection'] = []), //风向
(chartData.value['rainfall'] = []), //雨量
(chartData.value['atmosphericPressure'] = []), //大气压力
(chartData.value['evaporation'] = []), //蒸发
(chartData.value['lightIntensity'] = []), //光照强度
(chartData.value['sunlightHours'] = []), //日照时数
(chartData.value['photosyntheticEffectiveRadiation'] = []), //光合有效
(chartData.value['dataTimeArr'] = []),
res.data.forEach(item => {
chartData.value['airTemperature'].unshift(item.airTemperature);
chartData.value['airHumidity'].unshift(item.airHumidity);
chartData.value['windSpeed'].unshift(item.windSpeed);
chartData.value['windDirection'].unshift(item.windDirection);
chartData.value['rainfall'].unshift(item.rainfall);
chartData.value['atmosphericPressure'].unshift(item.atmosphericPressure);
chartData.value['evaporation'].unshift(item.evaporation);
chartData.value['lightIntensity'].unshift(item.lightIntensity);
chartData.value['sunlightHours'].unshift(item.sunlightHours);
chartData.value['photosyntheticEffectiveRadiation'].unshift(
chartData.value['airTemperature'].push(item.airTemperature);
chartData.value['airHumidity'].push(item.airHumidity);
chartData.value['windSpeed'].push(item.windSpeed);
chartData.value['windDirection'].push(item.windDirection);
chartData.value['rainfall'].push(item.rainfall);
chartData.value['atmosphericPressure'].push(item.atmosphericPressure);
chartData.value['evaporation'].push(item.evaporation);
chartData.value['lightIntensity'].push(item.lightIntensity);
chartData.value['sunlightHours'].push(item.sunlightHours);
chartData.value['photosyntheticEffectiveRadiation'].push(
item.photosyntheticEffectiveRadiation
);
chartData.value['dataTimeArr'].unshift(item.dataTime);
chartData.value['dataTimeArr'].push(item.dataTime);
});
chart();
});
chart();
});
};
/*------------事件----------------*/
watch(
() => label2.value,
(val, oldVal) => {
getMeteorological({ divisions: code }).then(res => {
map.eachLayer(layer => {
// 检查图层是否为底图
const isBaseLayer = Object.values(baseLayers).includes(layer);
// 如果不是底图，删除图层
if (!isBaseLayer) {
map.removeLayer(layer);
}
});
res.data.forEach(item => {
if (item.msName == label2.value) {
center = L.latLng(item.msLatitude, item.msLongitude);
map.setView(center, 17);
L.marker([item.msLatitude, item.msLongitude], { icon: greenIcon })
.addTo(map)
.bindPopup(
`<b>${item.msName}</b><br><br>经度:${item.msLongitude}<br><br>纬度:${item.msLatitude}`
)
.openPopup();
}
});
});
getMeteorologyTbs();
}
);
//树结构
const handleNodeClick = (data, node, data1, data2) => {
label2.value = data.label;
formInline.value.flag = '';
// let oriFatherId = node.parent.parent.data;
// label1.value = oriFatherId.label;
// getCameraNames(label2.value);
city.value = label2.value;
getMeteorological({ divisions: window.localStorage.getItem('divisions') }).then(res => {
res.data.forEach(item => {
if (item.msName == label2.value) {
center = L.latLng(item.msLatitude, item.msLongitude);
map.setView(center, 17);
L.marker([item.msLatitude, item.msLongitude], { icon: greenIcon })
.addTo(map)
.bindPopup(
`<b>${item.msName}</b><br><br>经度:${item.msLongitude}<br><br>纬度:${item.msLatitude}`
)
.openPopup();
}
});
});
tabulationcurrentPage.value = 1;
if (!data.children) {
label2.value = data.label;
formInline.value.flag = '';
value1.value = [];
city.value = label2.value;
// getMeteorological({ divisions: code }).then(res => {
// map.eachLayer(layer => {
// // 检查图层是否为底图
// const isBaseLayer = Object.values(baseLayers).includes(layer);
// // 如果不是底图，删除图层
// if (!isBaseLayer) {
// map.removeLayer(layer);
// }
// });
// res.data.forEach(item => {
// if (item.msName == label2.value) {
// center = L.latLng(item.msLatitude, item.msLongitude);
// map.setView(center, 17);
// L.marker([item.msLatitude, item.msLongitude], { icon: greenIcon })
// .addTo(map)
// .bindPopup(
// `<b>${item.msName}</b><br><br>经度:${item.msLongitude}<br><br>纬度:${item.msLatitude}`
// )
// .openPopup();
// }
// });
// });
getmeteorologys();
}
};
//查询
const onSubmit = e => {
tabulationcurrentPage.value = 1;
getmeteorologys();
getMeteorologyTbs();
chart();
@ -395,10 +478,17 @@ const foldClick = () => {
//分页
const tabulationCurrentChange = val => {
tabulationcurrentPage.value = val;
tableNewData.value = tabulation.value.slice(
(tabulationcurrentPage.value - 1) * tabulationpageSize.value,
(tabulationcurrentPage.value - 1) * tabulationpageSize.value + tabulationpageSize.value
);
getmeteorology({
msName: city.value,
whetherToDownload: false,
startTime: value1.value[0] ? moment(value1.value[0]).format('YYYY-MM-DD HH:mm:ss') : null,
endTime: value1.value[1] ? moment(value1.value[1]).format('YYYY-MM-DD HH:mm:ss') : null,
divisions: code,
pageNums:tabulationcurrentPage.value,
pageSizes:tabulationpageSize.value
}).then(res => {
tableNewData.value = res.data
});
};
//时间换行
const handleDate = timestamp => {
@ -419,6 +509,7 @@ const handleTime = timestamp => {
const resetForm = () => {
value1.value = '';
formInline.value.flag = '';
tabulationcurrentPage.value=1
getmeteorologys();
};
//图表切换
@ -432,6 +523,7 @@ const dowcity = () => {
whetherToDownload: true,
startTime: value1.value[0] ? moment(value1.value[0]).format('YYYY-MM-DD HH:mm:ss') : null,
endTime: value1.value[1] ? moment(value1.value[1]).format('YYYY-MM-DD HH:mm:ss') : null,
divisions: code,
}).then(res => {
downLoadFile(res.data[res.data.length - 1].excelPath);
});
@ -837,10 +929,10 @@ $height: calc(100vh - 100px);
}
.chartModeFather {
width: 100%;
height: 89%;
height: calc(100% - 140px);
.chartDiv {
width: 100% !important;
height: 89% !important;
height: calc(100% - 26px) !important;
}
}
@ -989,15 +1081,16 @@ $height: calc(100vh - 100px);
) {
color: rgba(0, 0, 0, 1);
}
height: 93%;
height: 100%;
:deep(.el-table__inner-wrapper) {
height: 96% !important;
height: 100% !important;
}
.example-pagination-block {
font-size: 14px;
display: flex;
align-items: center;
justify-content: flex-end;
margin-top: 20px;
}
:deep(.tabth) {
background-color: rgba(247, 247, 247, 1);
@ -1042,9 +1135,9 @@ $height: calc(100vh - 100px);
) {
color: rgba(0, 0, 0, 1);
}
height: 93%;
height: 100%;
:deep(.el-table__inner-wrapper) {
height: 96% !important;
height: 100% !important;
}
.example-pagination-block {
font-size: 14px;
@ -1146,6 +1239,15 @@ $height: calc(100vh - 100px);
width: 100%;
height: 100%;
}
:deep(.el-tree-node) {
//el-tree 换行展示
white-space: normal; //关键代码!!!!!!!!!
.el-tree-node__content {
height: 100%;
align-items: start;
}
}
</style>
<style lang="scss">
.video {