up
This commit is contained in:
@ -29,6 +29,10 @@
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="onSubmit">查询</el-button>
|
||||
<el-button plain @click="resetForm">重置</el-button>
|
||||
<el-button v-if="!operate" type="primary" text @click="dowcity">
|
||||
<img src="@/assets/images/dow.png" alt="" />
|
||||
下载
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div class="modeDiv" @click="SwitchMode">
|
||||
@ -46,24 +50,24 @@
|
||||
height="80%"
|
||||
highlight-current-row
|
||||
>
|
||||
<el-table-column prop="dataTime" label="日期" width="180">
|
||||
<el-table-column prop="dataTime" label="日期" width="150">
|
||||
<template #default="scope">
|
||||
<div>{{ handleDate(scope.row.dataTime) }}</div>
|
||||
<div>{{ handleTime(scope.row.dataTime) }}</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="airTemperature" label="空气温度" />
|
||||
<el-table-column prop="airHumidity" label="空气湿度" />
|
||||
<el-table-column prop="windSpeed" label="风速" />
|
||||
<el-table-column prop="windDirection" label="风向" />
|
||||
<el-table-column prop="rainfall" label="雨量" />
|
||||
<el-table-column prop="atmosphericPressure" label="大气压力" />
|
||||
<el-table-column prop="evaporation" label="蒸发" />
|
||||
<el-table-column prop="lightIntensity" label="光照强度" />
|
||||
<el-table-column prop="airTemperature" label="空气温度(℃)" />
|
||||
<el-table-column prop="airHumidity" label="空气湿度(%)" />
|
||||
<el-table-column prop="windSpeed" label="风速(m/s)" />
|
||||
<el-table-column prop="windDirection" label="风向(°)" />
|
||||
<el-table-column prop="rainfall" label="雨量(mm)" />
|
||||
<el-table-column prop="atmosphericPressure" label="大气压力(hpa)" />
|
||||
<el-table-column prop="evaporation" label="蒸发(mm)" />
|
||||
<el-table-column prop="lightIntensity" label="光照强度(LUX)" />
|
||||
<el-table-column prop="sunlightHours" label="日照时数（h）" />
|
||||
<el-table-column
|
||||
prop="photosyntheticEffectiveRadiation"
|
||||
label="光合有效"
|
||||
label="光合有效(umol)"
|
||||
/>
|
||||
</el-table>
|
||||
<div class="example-pagination-block">
|
||||
@ -78,7 +82,41 @@
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div v-show="!SwitchFlag" class="chartMode"></div>
|
||||
<div v-show="!SwitchFlag" class="chartMode">
|
||||
<div class="depth">
|
||||
<p
|
||||
:class="active == '1' ? 'SelectedDiv' : ''"
|
||||
@click="depthclick(1)"
|
||||
>
|
||||
温度/湿度
|
||||
</p>
|
||||
<p
|
||||
:class="active == '2' ? 'SelectedDiv' : ''"
|
||||
@click="depthclick(2)"
|
||||
>
|
||||
风速/风向
|
||||
</p>
|
||||
<p
|
||||
:class="active == '3' ? 'SelectedDiv' : ''"
|
||||
@click="depthclick(3)"
|
||||
>
|
||||
光照强度/光合有效
|
||||
</p>
|
||||
<p
|
||||
:class="active == '4' ? 'SelectedDiv' : ''"
|
||||
@click="depthclick(4)"
|
||||
>
|
||||
日照时数
|
||||
</p>
|
||||
<p
|
||||
:class="active == '5' ? 'SelectedDiv' : ''"
|
||||
@click="depthclick(5)"
|
||||
>
|
||||
雨量/蒸发量
|
||||
</p>
|
||||
</div>
|
||||
<div ref="chartDiv" class="chartDiv"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="centent">
|
||||
@ -114,19 +152,20 @@
|
||||
import { ref, onMounted, inject, reactive, watch } from 'vue';
|
||||
import * as echarts from 'echarts';
|
||||
import { useEcharts } from '@/hooks/useEcharts';
|
||||
import { getarea, getTownship, getvillage, getareas, dow } from '@/api/crops/classify.js';
|
||||
import axios from 'axios';
|
||||
// import { getTreeData, getCameraName } from '../../../api/plough/VideoSurveillance';
|
||||
import {
|
||||
getmeteorological,
|
||||
getmeteorology,
|
||||
getMeteorological,
|
||||
getMeteorologyTb,
|
||||
} from '@/api/meteorological/monitor/weatherStation.js';
|
||||
import VideoJs from '@/components/video/video.vue';
|
||||
import 'leaflet/dist/leaflet.css';
|
||||
import L from 'leaflet';
|
||||
import iconShadow from '/img/marker/mark.png';
|
||||
import moment from 'Moment';
|
||||
import { downLoadFile } from '@/utils/download.js';
|
||||
|
||||
let map = L.Map;
|
||||
let tabulation = ref([]);
|
||||
@ -135,6 +174,7 @@ let devicesArr = ref([]); //树结构数据
|
||||
let label1 = ref('');
|
||||
let label2 = ref('全部');
|
||||
let tableNewData = ref([]);
|
||||
const chartDiv = ref(null);
|
||||
const dialogVisible = ref(false);
|
||||
let value1 = ref('');
|
||||
let formInline = ref({
|
||||
@ -146,8 +186,23 @@ let flags = ref(false);
|
||||
let tabulationcurrentPage = ref(1); //列表当前页
|
||||
let tabulationpageSize = ref(9); //每页条数
|
||||
let center = null; // 指定中心点
|
||||
let chartData = ref({
|
||||
airTemperature: [], //空气温度
|
||||
airHumidity: [], //空气湿度
|
||||
windSpeed: [], //风速
|
||||
windDirection: [], //风向
|
||||
rainfall: [], //雨量
|
||||
atmosphericPressure: [], //大气压力
|
||||
evaporation: [], //蒸发
|
||||
lightIntensity: [], //光照强度
|
||||
sunlightHours: [], //日照时数
|
||||
photosyntheticEffectiveRadiation: [], //光合有效
|
||||
dataTimeArr: [],
|
||||
});
|
||||
let city = ref('');
|
||||
let SwitchFlag = ref(true);
|
||||
let leftWraFlag = ref(true);
|
||||
let active = ref('1'); //切换图表
|
||||
const data = reactive({
|
||||
videoSrc:
|
||||
'http://cmgw-vpc.lechange.com:8888/LCO/9C023C5FACFE48F/0/1/20230530T033445/a44e6e04b0608347f0209ab2b25aa258.m3u8',
|
||||
@ -156,6 +211,7 @@ onMounted(() => {
|
||||
getmeteorologicals();
|
||||
initLeafletMap();
|
||||
getmeteorologys();
|
||||
getMeteorologyTbs();
|
||||
});
|
||||
|
||||
const initLeafletMap = () => {
|
||||
@ -186,9 +242,9 @@ const getmeteorologicals = () => {
|
||||
});
|
||||
});
|
||||
};
|
||||
const getmeteorologys = city => {
|
||||
const getmeteorologys = () => {
|
||||
getmeteorology({
|
||||
name: city,
|
||||
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,
|
||||
@ -212,16 +268,54 @@ const getmeteorologys = city => {
|
||||
});
|
||||
});
|
||||
};
|
||||
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 => {
|
||||
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(
|
||||
item.photosyntheticEffectiveRadiation
|
||||
);
|
||||
chartData.value['dataTimeArr'].push(item.dataTime);
|
||||
});
|
||||
chart()
|
||||
});
|
||||
};
|
||||
/*------------事件----------------*/
|
||||
//树结构
|
||||
const handleNodeClick = (data, node, data1, data2) => {
|
||||
label2.value = data.label;
|
||||
formInline.value.flag = '';
|
||||
let device = '';
|
||||
// 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);
|
||||
res.data.forEach(item => {
|
||||
@ -242,6 +336,8 @@ const handleNodeClick = (data, node, data1, data2) => {
|
||||
//查询
|
||||
const onSubmit = e => {
|
||||
getmeteorologys();
|
||||
getMeteorologyTbs();
|
||||
chart()
|
||||
};
|
||||
|
||||
//创建ICON构造函数，相当于继承于ICON，可以重新设置属性
|
||||
@ -262,9 +358,13 @@ var greenIcon = new LeafIcon({
|
||||
//列表模式模式切换
|
||||
const SwitchMode = () => {
|
||||
SwitchFlag.value = !SwitchFlag.value;
|
||||
const statInfo = chartModeDiv.value; // 获取图表元素
|
||||
statInfo.style.width = document.querySelector('.chartModeFather').offsetWidth + 'px'; //初始化echarts图表宽度
|
||||
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);
|
||||
@ -275,8 +375,8 @@ const SwitchMode = () => {
|
||||
document.querySelector('.chartModeFather').offsetHeight - 100 + 'px';
|
||||
myChart.resize();
|
||||
});
|
||||
chartModes();
|
||||
};
|
||||
farmland();
|
||||
}
|
||||
|
||||
//折叠右侧地图
|
||||
const foldClick = () => {
|
||||
@ -311,6 +411,340 @@ const resetForm = () => {
|
||||
formInline.value.flag = '';
|
||||
getmeteorologys();
|
||||
};
|
||||
//图表切换
|
||||
const depthclick = item => {
|
||||
active.value = item;
|
||||
farmland();
|
||||
};
|
||||
const dowcity = () => {
|
||||
downLoadFile(tabulation.value[tabulation.value.length - 1].excelPath);
|
||||
};
|
||||
//chart
|
||||
|
||||
function farmland() {
|
||||
const farmlandDivIntance = echarts.init(chartDiv.value);
|
||||
console.log(chartData);
|
||||
let leftY = '温度(℃)';
|
||||
let rightY = '湿度(%)';
|
||||
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 = '温度(℃)';
|
||||
rightY = '湿度(%)';
|
||||
arr1 = chartData.value.airTemperature;
|
||||
arr2 = chartData.value.airHumidity;
|
||||
color = 'rgba(0, 209, 195, 1)';
|
||||
break;
|
||||
case 2:
|
||||
leftY = '风速(m/s)';
|
||||
rightY = '风向(°)';
|
||||
arr1 = chartData.value.windSpeed;
|
||||
arr2 = chartData.value.windDirection;
|
||||
color = 'rgba(201, 255, 148, 1)';
|
||||
break;
|
||||
case 3:
|
||||
leftY = '光照强度(LUX)';
|
||||
rightY = '光合有效(umol)';
|
||||
arr1 = chartData.value.lightIntensity;
|
||||
arr2 = chartData.value.photosyntheticEffectiveRadiation;
|
||||
color = 'rgba(0, 209, 195, 1)';
|
||||
break;
|
||||
case 4:
|
||||
leftY = '日照时数（h）';
|
||||
rightY = '';
|
||||
arr1 = chartData.value.sunlightHours;
|
||||
arr2 = [];
|
||||
color = 'rgba(201, 255, 148, 1)';
|
||||
break;
|
||||
case 5:
|
||||
leftY = '雨量(mm)';
|
||||
rightY = '蒸发量(mm)';
|
||||
arr1 = chartData.value.rainfall;
|
||||
arr2 = chartData.value.evaporation;
|
||||
color = 'rgba(0, 209, 195, 1)';
|
||||
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 option = {
|
||||
color: [color, 'rgba(199, 125, 231, 1)'],
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
},
|
||||
grid: {
|
||||
top: '15%',
|
||||
left: '5%',
|
||||
right: '7%',
|
||||
bottom: '15%',
|
||||
containLabel: true,
|
||||
},
|
||||
legend: {
|
||||
show: true,
|
||||
top: '7%',
|
||||
x: 'center',
|
||||
textStyle: { color: 'black' },
|
||||
itemWidth: 20,
|
||||
itemHeight: 12.5,
|
||||
icon: 'rect',
|
||||
backgroundColor: 'transparent',
|
||||
},
|
||||
dataZoom: [
|
||||
{
|
||||
type: 'slider',
|
||||
width: '40%',
|
||||
zoomLock: true,
|
||||
top: '90%',
|
||||
start: 0,
|
||||
end: ends,
|
||||
showDataShadow: false,
|
||||
showDetail: false,
|
||||
fillerColor: 'rgba(64, 158, 255)',
|
||||
borderRadius: '50%',
|
||||
moveHandleSize: 0,
|
||||
moveHandleStyle: {},
|
||||
left: '35%',
|
||||
height: 12,
|
||||
handleSize: '80%',
|
||||
handleIcon: 'path://M512,512m-448,0a448,448,0,1,0,896,0a448,448,0,1,0,-896,0Z',
|
||||
handleStyle: {
|
||||
borderWidth: 0,
|
||||
color: 'rgba(64, 158, 255)',
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'inside',
|
||||
},
|
||||
],
|
||||
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
data: time,
|
||||
axisLine: {
|
||||
show: false,
|
||||
},
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
color: 'rgba(102, 102, 102, 1)',
|
||||
},
|
||||
interval: 0, //使x轴文字显示全
|
||||
formatter: function (params) {
|
||||
var newParamsName = '';
|
||||
var paramsNameNumber = params.length;
|
||||
var provideNumber = 10; //一行显示几个字
|
||||
var rowNumber = Math.ceil(paramsNameNumber / provideNumber);
|
||||
if (paramsNameNumber > provideNumber) {
|
||||
for (var p = 0; p < rowNumber; p++) {
|
||||
var tempStr = '';
|
||||
var start = p * provideNumber;
|
||||
var end = start + provideNumber;
|
||||
if (p == rowNumber - 1) {
|
||||
tempStr = params.substring(start, paramsNameNumber);
|
||||
} else {
|
||||
tempStr = params.substring(start, end) + '\n';
|
||||
}
|
||||
newParamsName += tempStr;
|
||||
}
|
||||
} else {
|
||||
newParamsName = params;
|
||||
}
|
||||
return newParamsName;
|
||||
},
|
||||
},
|
||||
boundaryGap: false,
|
||||
axisTick: {
|
||||
//坐标轴刻度相关设置。
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
name: leftY,
|
||||
type: 'value',
|
||||
axisLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: 'rgba(102, 102, 102, 1)',
|
||||
},
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
color: 'rgba(102, 102, 102, 1)', //左侧数标
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#ccc',
|
||||
type: 'solid',
|
||||
opacity: 1,
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
name: rightY,
|
||||
type: 'value',
|
||||
axisLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: 'rgba(102, 102, 102, 1)',
|
||||
},
|
||||
},
|
||||
position: 'right',
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
color: 'rgba(102, 102, 102, 1)', //右侧数标
|
||||
},
|
||||
formatter: '{value}',
|
||||
},
|
||||
splitLine: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: leftY,
|
||||
type: 'line',
|
||||
data: arr1,
|
||||
symbolSize: 10,
|
||||
itemStyle: {
|
||||
// 设置symbol的颜色
|
||||
// normal: {
|
||||
// color: function (param) {
|
||||
// //拐点颜色回调
|
||||
// if (active.value == 1) {
|
||||
// if (param.value >= -10 && param.value <= 40) {
|
||||
// return color;
|
||||
// } else {
|
||||
// return 'red';
|
||||
// }
|
||||
// } else if (active.value == 2) {
|
||||
// if (param.value >= -5 <= 40) {
|
||||
// return color;
|
||||
// } else {
|
||||
// return 'red';
|
||||
// }
|
||||
// } else if (active.value == 3) {
|
||||
// if (param.value >= 0 && param.value <= 30) {
|
||||
// return color;
|
||||
// } else {
|
||||
// return 'red';
|
||||
// }
|
||||
// } else if (active.value == 4) {
|
||||
// if (param.value >= 0 && param.value <= 30) {
|
||||
// return color;
|
||||
// } else {
|
||||
// return 'red';
|
||||
// }
|
||||
// } else if (active.value == 5) {
|
||||
// if (param.value >= 0 && param.value <= 30) {
|
||||
// return color;
|
||||
// } else {
|
||||
// return 'red';
|
||||
// }
|
||||
// } else if (active.value == 6) {
|
||||
// if (param.value >= 0 && param.value <= 0.2) {
|
||||
// return color;
|
||||
// } else {
|
||||
// return 'red';
|
||||
// }
|
||||
// } else if (active.value == 7) {
|
||||
// if (param.value >= 5.5 && param.value <= 7.5) {
|
||||
// return color;
|
||||
// } else {
|
||||
// return 'red';
|
||||
// }
|
||||
// }
|
||||
// },
|
||||
// },
|
||||
},
|
||||
|
||||
smooth: true,
|
||||
yAxisIndex: 0,
|
||||
showSymbol: true,
|
||||
symbol: 'circle',
|
||||
lineStyle: {
|
||||
width: 3,
|
||||
color: color,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: rightY,
|
||||
type: 'line',
|
||||
data: arr2,
|
||||
symbolSize: 10,
|
||||
yAxisIndex: 1,
|
||||
itemStyle: {
|
||||
// 设置symbol的颜色
|
||||
// normal: {
|
||||
// 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(199, 125, 231, 1)',
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
option && farmlandDivIntance.setOption(option, { notMerge: true, grid: { bottom: 20 } });
|
||||
useEcharts(farmlandDivIntance, option);
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@ -374,6 +808,10 @@ $height: calc(100vh - 100px);
|
||||
}
|
||||
}
|
||||
}
|
||||
.chartModeFather {
|
||||
width: 100%;
|
||||
height: 89%;
|
||||
}
|
||||
.demo-tabs {
|
||||
// width: 100%;
|
||||
// height: 98%;
|
||||
@ -638,7 +1076,7 @@ $height: calc(100vh - 100px);
|
||||
height: 50%;
|
||||
}
|
||||
.depth {
|
||||
width: 50%;
|
||||
width: 90%;
|
||||
height: 26px;
|
||||
opacity: 1;
|
||||
border-radius: 4px;
|
||||
|
||||
Reference in New Issue
Block a user