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-07-24 18:07:54 +08:00
parent 79894eb7e8
commit 5bc7e7c3d1
461 changed files with 14666 additions and 8673 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -50,10 +50,11 @@
height="80%"
highlight-current-row
>
<el-table-column prop="dataTime" label="日期" width="150">
<el-table-column prop="dataTime" label="日期" width="160">
<template #default="scope">
<div>{{ handleDate(scope.row.dataTime) }}</div>
<div>{{ handleTime(scope.row.dataTime) }}</div>
<div>{{ scope.row.dataTime}}</div>
<!-- <div>{{ handleDate(scope.row.dataTime) }}</div>
<div>{{ handleTime(scope.row.dataTime) }}</div> -->
</template>
</el-table-column>
<el-table-column prop="airTemperature" label="空气温度(℃)" />
@ -118,7 +119,7 @@
:class="active == '6' ? 'SelectedDiv' : ''"
@click="depthclick(6)"
>
大气压力
大气压力
</p>
</div>
<div ref="chartDiv" class="chartDiv"></div>
@ -172,7 +173,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";
import elementResizeDetectorMaker from 'element-resize-detector';
let map = L.Map;
let tabulation = ref([]);
@ -182,6 +183,7 @@ let label1 = ref('');
let label2 = ref('全部');
let tableNewData = ref([]);
const chartDiv = ref(null);
let code = window.localStorage.getItem('deptName');
const dialogVisible = ref(false);
let value1 = ref('');
let formInline = ref({
@ -191,7 +193,7 @@ let formInline = ref({
});
let flags = ref(false);
let tabulationcurrentPage = ref(1); //列表当前页
let tabulationpageSize = ref(9); //每页条数
let tabulationpageSize = ref(11); //每页条数
let center = null; // 指定中心点
let chartData = ref({
airTemperature: [], //空气温度
@ -246,8 +248,7 @@ const initLeafletMap = () => {
/*-----------接口---------------*/
const getmeteorologicals = () => {
getmeteorological().then(res => {
console.log(res.data);
getmeteorological({ divisions: code }).then(res => {
res.data.forEach(item => {
devicesArr.value.push(item);
});
@ -259,6 +260,7 @@ const getmeteorologys = () => {
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'),
}).then(res => {
tabulation.value = res.data;
tableNewData.value = res.data.slice(
@ -266,8 +268,7 @@ const getmeteorologys = () => {
(tabulationcurrentPage.value - 1) * tabulationpageSize.value + tabulationpageSize.value
);
});
getMeteorological().then(res => {
console.log(res.data)
getMeteorological({ divisions: window.localStorage.getItem('divisions') }).then(res => {
res.data.forEach(item => {
center = L.latLng(item.msLatitude, item.msLongitude);
map.setView(center, 17);
@ -301,21 +302,21 @@ const getMeteorologyTbs = () => {
endTime: value1.value[1] ? moment(value1.value[1]).format('YYYY-MM-DD HH:mm:ss') : null,
}).then(res => {
res.data.forEach(item => {
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(
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(
item.photosyntheticEffectiveRadiation
);
chartData.value['dataTimeArr'].push(item.dataTime);
chartData.value['dataTimeArr'].unshift(item.dataTime);
});
chart()
chart();
});
};
/*------------事件----------------*/
@ -326,10 +327,8 @@ const handleNodeClick = (data, node, data1, data2) => {
// let oriFatherId = node.parent.parent.data;
// label1.value = oriFatherId.label;
// getCameraNames(label2.value);
console.log(label2.value);
city.value = label2.value;
getMeteorological().then(res => {
console.log(res.data);
getMeteorological({ divisions: window.localStorage.getItem('divisions') }).then(res => {
res.data.forEach(item => {
if (item.msName == label2.value) {
center = L.latLng(item.msLatitude, item.msLongitude);
@ -349,7 +348,7 @@ const handleNodeClick = (data, node, data1, data2) => {
const onSubmit = e => {
getmeteorologys();
getMeteorologyTbs();
chart()
chart();
};
//创建ICON构造函数，相当于继承于ICON，可以重新设置属性
@ -370,15 +369,14 @@ var greenIcon = new LeafIcon({
//列表模式模式切换
const SwitchMode = () => {
SwitchFlag.value = !SwitchFlag.value;
chart()
chart();
};
//
const chart=()=>{
const chart = () => {
const statInfo = chartDiv.value; // 获取图表元素
statInfo.style.width = document.querySelector('.chartModeFather').offsetWidth + 'px'; //初始化echarts图表宽度
statInfo.style.height = document.querySelector('.chartModeFather').offsetHeight - 100 + 'px';
console.log(document.querySelector('.chartModeFather').offsetWidth);
const myChart = echarts.init(statInfo);
// 设置宽度自适应
window.addEventListener('resize', () => {
@ -388,7 +386,7 @@ const chart=()=>{
myChart.resize();
});
farmland();
}
};
//折叠右侧地图
const foldClick = () => {
@ -429,7 +427,14 @@ const depthclick = item => {
farmland();
};
const dowcity = () => {
downLoadFile(tabulation.value[tabulation.value.length - 1].excelPath);
getmeteorology({
name: city.value,
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,
}).then(res => {
downLoadFile(res.data[res.data.length - 1].excelPath);
});
};
//chart
@ -440,7 +445,6 @@ function farmland() {
let arr1 = chartData.value.airTemperature;
let arr2 = chartData.value.airHumidity;
let color = 'rgba(255, 235, 59, 1)';
console.log(active.value);
switch (active.value) {
case 1:
leftY = '温度(℃)';
@ -477,7 +481,7 @@ function farmland() {
arr2 = chartData.value.evaporation;
color = 'rgba(0, 209, 195, 1)';
break;
case 6:
case 6:
leftY = '大气压力(hpa)';
rightY = '';
arr1 = chartData.value.atmosphericPressure;
@ -486,11 +490,9 @@ function farmland() {
break;
}
var time = chartData.value.dataTimeArr;
console.log(arr1);
console.log(arr2);
// var sportData = humidity.value;
// var sportTime = temperature.value;
let ends = (7 / time.length) * 100;
let ends = (30 / time.length) * 100;
let option = {
color: [color, 'rgba(199, 125, 231, 1)'],
tooltip: {
@ -553,6 +555,7 @@ function farmland() {
color: 'rgba(102, 102, 102, 1)',
},
interval: 0, //使x轴文字显示全
rotate: 45,
formatter: function (params) {
var newParamsName = '';
var paramsNameNumber = params.length;
@ -763,11 +766,11 @@ function farmland() {
// option && farmlandDivIntance.setOption(option, { notMerge: true, grid: { bottom: 20 } });
useEcharts(farmlandDivIntance, option);
let erd = elementResizeDetectorMaker();
erd.listenTo(chartDiv.value, () => {
nextTick(() => {
farmlandDivIntance.resize();
})
})
erd.listenTo(chartDiv.value, () => {
nextTick(() => {
farmlandDivIntance.resize();
});
});
}
</script>
@ -835,10 +838,10 @@ $height: calc(100vh - 100px);
.chartModeFather {
width: 100%;
height: 89%;
.chartDiv{
width: 100% !important;
height: 89% !important;
}
.chartDiv {
width: 100% !important;
height: 89% !important;
}
}
.demo-tabs {