1260 lines
45 KiB
Vue
1260 lines
45 KiB
Vue
<template>
|
||
<div class="fatherDiv">
|
||
<div class="tabulation">
|
||
<div class="tabulationCente">
|
||
<div class="left">
|
||
<p>
|
||
当前选择 ：
|
||
<span style="color: rgba(100, 195, 164, 1)">{{ label2 }}</span>
|
||
</p>
|
||
|
||
<el-tree
|
||
:data="devicesArr"
|
||
:props="defaultProps"
|
||
@node-click="handleNodeClick"
|
||
/>
|
||
</div>
|
||
<div class="freckle">
|
||
<div class="searchDiv">
|
||
<el-form :inline="true" :model="formInline" class="demo-form-inline">
|
||
<el-form-item style="width: 300px" label="监测时间:">
|
||
<el-date-picker
|
||
v-model="value1"
|
||
type="daterange"
|
||
range-separator="➡️"
|
||
start-placeholder="开始日期"
|
||
end-placeholder="结束日期"
|
||
/>
|
||
</el-form-item>
|
||
<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">
|
||
<div :class="SwitchFlag ? 'Selected' : ''">表格模式</div>
|
||
<div :class="SwitchFlag ? '' : 'Selecteds'">图表模式</div>
|
||
</div>
|
||
</div>
|
||
<div class="chartModeFather">
|
||
<div class="tableBox" v-show="SwitchFlag">
|
||
<el-table
|
||
:data="tableNewData"
|
||
:header-cell-style="{ 'text-align': 'center' }"
|
||
:cell-style="{ 'text-align': 'center' }"
|
||
header-row-class-name="tabth"
|
||
height="90%"
|
||
highlight-current-row
|
||
>
|
||
<el-table-column prop="dataTime" label="日期" width="160">
|
||
<template #default="scope">
|
||
<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="空气温度(℃)" />
|
||
<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="光合有效(umol)"
|
||
/>
|
||
</el-table>
|
||
<div class="example-pagination-block">
|
||
共{{ tabulation }}条
|
||
<el-pagination
|
||
background
|
||
layout="prev, pager, next"
|
||
:total="Number(tabulation)"
|
||
:current-page="tabulationcurrentPage"
|
||
:page-size="tabulationpageSize"
|
||
@current-change="tabulationCurrentChange"
|
||
/>
|
||
</div>
|
||
</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>
|
||
<p
|
||
:class="active == '6' ? 'SelectedDiv' : ''"
|
||
@click="depthclick(6)"
|
||
>
|
||
大气压力
|
||
</p>
|
||
</div>
|
||
<div ref="chartDiv" class="chartDiv"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="centent">
|
||
<div class="arrow" @click="foldClick">
|
||
<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">
|
||
<div id="cesiumContainers" class="detailed"></div>
|
||
</div>
|
||
</div>
|
||
<el-dialog
|
||
v-model="dialogVisible"
|
||
append-to-body
|
||
class="video"
|
||
destroy-on-close
|
||
title="实时监控"
|
||
width="30%"
|
||
:before-close="handleClose"
|
||
>
|
||
<div class="myVideo"><VideoJs :videoSrc="data.videoSrc" autoPlay /></div>
|
||
</el-dialog>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, onMounted, inject, reactive, watch } from 'vue';
|
||
import * as echarts from 'echarts';
|
||
import { useEcharts } from '@/hooks/useEcharts';
|
||
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';
|
||
import elementResizeDetectorMaker from 'element-resize-detector';
|
||
|
||
let map = L.Map;
|
||
let tabulation = ref([]);
|
||
let popdata = ref({});
|
||
let devicesArr = ref([]); //树结构数据
|
||
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({
|
||
yearMonth: '',
|
||
flag: '',
|
||
divisions: '',
|
||
});
|
||
let flags = ref(false);
|
||
let tabulationcurrentPage = ref(1); //列表当前页
|
||
let tabulationpageSize = ref(14); //每页条数
|
||
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',
|
||
});
|
||
onMounted(() => {
|
||
getmeteorologicals();
|
||
initLeafletMap();
|
||
getMeteorologyTbs();
|
||
});
|
||
onUpdated(() => {
|
||
document.querySelector('.mode').style.display = 'none';
|
||
window.document.querySelector('#screenfull').style.display = 'none';
|
||
});
|
||
let baseLayers = null;
|
||
const initLeafletMap = () => {
|
||
//加载地图
|
||
map = L.map('cesiumContainers', {
|
||
center: [36.4, 119.166326], // 地图中心
|
||
zoom: 7, //缩放比列
|
||
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
|
||
});
|
||
// 渲染底图
|
||
// 创建底图图层
|
||
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);
|
||
});
|
||
});
|
||
};
|
||
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: code,
|
||
}).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'].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();
|
||
});
|
||
};
|
||
/*------------事件----------------*/
|
||
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) => {
|
||
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();
|
||
};
|
||
|
||
//创建ICON构造函数，相当于继承于ICON，可以重新设置属性
|
||
var LeafIcon = L.Icon.extend({
|
||
options: {
|
||
// shadowUrl: './icon/leaf-shadow.png', //阴影地址
|
||
iconSize: [50, 50], //图标宽高
|
||
shadowSize: [50, 64], //阴影宽高
|
||
iconAnchor: [22, 94], //图标锚点
|
||
shadowAnchor: [4, 62], //阴影锚点
|
||
popupAnchor: [0, -86], //弹出框弹出位置，相对于图标锚点
|
||
},
|
||
});
|
||
//创建多个icon
|
||
var greenIcon = new LeafIcon({
|
||
iconUrl: iconShadow,
|
||
});
|
||
//列表模式模式切换
|
||
const SwitchMode = () => {
|
||
SwitchFlag.value = !SwitchFlag.value;
|
||
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';
|
||
const myChart = echarts.init(statInfo);
|
||
// 设置宽度自适应
|
||
window.addEventListener('resize', () => {
|
||
statInfo.style.width = document.querySelector('.chartModeFather').offsetWidth + 'px';
|
||
statInfo.style.height =
|
||
document.querySelector('.chartModeFather').offsetHeight - 100 + 'px';
|
||
myChart.resize();
|
||
});
|
||
farmland();
|
||
};
|
||
|
||
//折叠右侧地图
|
||
const foldClick = () => {
|
||
flags.value = !flags.value;
|
||
};
|
||
//分页
|
||
const tabulationCurrentChange = val => {
|
||
tabulationcurrentPage.value = val;
|
||
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 => {
|
||
var date = new Date(timestamp); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
|
||
var Y = date.getFullYear() + '-';
|
||
var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
|
||
var D = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
|
||
return Y + M + D;
|
||
};
|
||
const handleTime = timestamp => {
|
||
var date = new Date(timestamp); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
|
||
var h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
|
||
var m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
|
||
var s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
|
||
return h + m + s;
|
||
};
|
||
//重置
|
||
const resetForm = () => {
|
||
value1.value = '';
|
||
formInline.value.flag = '';
|
||
tabulationcurrentPage.value=1
|
||
getmeteorologys();
|
||
};
|
||
//图表切换
|
||
const depthclick = item => {
|
||
active.value = item;
|
||
farmland();
|
||
};
|
||
const dowcity = () => {
|
||
getmeteorology({
|
||
msName: 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,
|
||
divisions: code,
|
||
}).then(res => {
|
||
downLoadFile(res.data[res.data.length - 1].excelPath);
|
||
});
|
||
};
|
||
//chart
|
||
|
||
function farmland() {
|
||
const farmlandDivIntance = echarts.init(chartDiv.value);
|
||
let leftY = '温度(℃)';
|
||
let rightY = '湿度(%)';
|
||
let arr1 = chartData.value.airTemperature;
|
||
let arr2 = chartData.value.airHumidity;
|
||
let color = 'rgba(255, 235, 59, 1)';
|
||
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;
|
||
case 6:
|
||
leftY = '大气压力(hpa)';
|
||
rightY = '';
|
||
arr1 = chartData.value.atmosphericPressure;
|
||
arr2 = [];
|
||
color = 'rgba(9, 187, 222, 0.8)';
|
||
break;
|
||
}
|
||
var time = chartData.value.dataTimeArr;
|
||
// var sportData = humidity.value;
|
||
// var sportTime = temperature.value;
|
||
let ends = (30 / 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轴文字显示全
|
||
rotate: 45,
|
||
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);
|
||
let erd = elementResizeDetectorMaker();
|
||
erd.listenTo(chartDiv.value, () => {
|
||
nextTick(() => {
|
||
farmlandDivIntance.resize();
|
||
});
|
||
});
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
$height: calc(100vh - 100px);
|
||
|
||
.fatherDiv {
|
||
width: 100%;
|
||
height: 108%;
|
||
}
|
||
.tabulation,
|
||
.centerBox {
|
||
width: 100%;
|
||
height: 98%;
|
||
.imgrotate {
|
||
transform: rotate(180deg);
|
||
}
|
||
.title {
|
||
width: 100%;
|
||
height: 45px;
|
||
background: url('@/assets/images/title.png');
|
||
background-repeat: no-repeat;
|
||
background-size: 110% 100%;
|
||
color: #fff;
|
||
font-size: 18px;
|
||
font-weight: 700;
|
||
line-height: 45px;
|
||
padding-left: 46px;
|
||
display: flex;
|
||
cursor: pointer;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
|
||
span {
|
||
width: 80%;
|
||
white-space: nowrap;
|
||
text-overflow: ellipsis;
|
||
overflow: hidden;
|
||
background: linear-gradient(
|
||
180deg,
|
||
rgba(255, 255, 255, 1) 33.33%,
|
||
rgba(41, 255, 219, 1) 100%
|
||
);
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
}
|
||
|
||
p {
|
||
width: 110px;
|
||
height: 25px;
|
||
border-radius: 20px;
|
||
font-size: 14px;
|
||
background: linear-gradient(
|
||
180deg,
|
||
rgba(16, 111, 111, 1) 0%,
|
||
rgba(47, 214, 214, 1) 100%
|
||
);
|
||
border: 1.5px solid rgba(23, 194, 180, 1);
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
}
|
||
}
|
||
.chartModeFather {
|
||
width: 100%;
|
||
height: calc(100% - 140px);
|
||
.chartDiv {
|
||
width: 100% !important;
|
||
height: calc(100% - 26px) !important;
|
||
}
|
||
}
|
||
|
||
.demo-tabs {
|
||
// width: 100%;
|
||
// height: 98%;
|
||
:deep(.el-tabs__nav.is-top) {
|
||
transform: translateX(60px) !important;
|
||
}
|
||
}
|
||
.tabulationCente {
|
||
width: 100%;
|
||
height: 89%;
|
||
display: flex;
|
||
padding: 10px;
|
||
.left {
|
||
width: 15%;
|
||
height: 100%;
|
||
box-shadow: 0px 0px 9px 0px rgba(0, 0, 0, 0.08);
|
||
margin-right: 20px;
|
||
font-size: 14px;
|
||
color: rgba(0, 0, 0, 1);
|
||
padding: 10px 20px;
|
||
}
|
||
.cesiumContainersDiv {
|
||
width: 30%;
|
||
height: 100%;
|
||
background: #ccc;
|
||
box-shadow: 0px 0px 9px 0px rgba(0, 0, 0, 0.08);
|
||
position: relative;
|
||
overflow: hidden;
|
||
.VideoPlayDiv {
|
||
width: 100%;
|
||
}
|
||
.detailed {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
#pops {
|
||
opacity: 1;
|
||
border-radius: 5px;
|
||
background: rgba(2, 31, 26, 0.6);
|
||
display: none;
|
||
flex-direction: column;
|
||
justify-content: flex-start;
|
||
align-items: flex-end;
|
||
padding: 6px 8px 6px 8px;
|
||
color: rgba(255, 255, 255, 1);
|
||
font-size: 14px;
|
||
.content {
|
||
div {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
p {
|
||
width: 100px;
|
||
border-radius: 2px;
|
||
background: rgba(217, 231, 255, 0.2);
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
}
|
||
}
|
||
.cancel {
|
||
position: absolute;
|
||
right: 10px;
|
||
top: 5px;
|
||
color: rgba(255, 255, 255, 1);
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
}
|
||
|
||
.centent {
|
||
width: 20px;
|
||
height: 100%;
|
||
position: relative;
|
||
z-index: 99;
|
||
.arrow {
|
||
width: 22px;
|
||
height: 22px;
|
||
// background: #ccc;
|
||
position: absolute;
|
||
top: 50%;
|
||
transform: translate(-80%, -50%);
|
||
z-index: 99;
|
||
border-radius: 50%;
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
.freckle {
|
||
width: 50%;
|
||
flex: 1;
|
||
// background: #ccc;
|
||
box-shadow: 0px 0px 9px 0px rgba(0, 0, 0, 0.08);
|
||
:deep(.el-input__wrapper) {
|
||
opacity: 1;
|
||
border-radius: 4px;
|
||
background: #fff;
|
||
border: none;
|
||
box-shadow: 0px 3px 9px 0px rgba(0, 0, 0, 0.25);
|
||
width: 20%;
|
||
.el-input__inner {
|
||
color: rgba(170, 170, 170, 1);
|
||
}
|
||
}
|
||
.searchDiv {
|
||
margin: 20px;
|
||
display: flex;
|
||
.modeDiv {
|
||
width: 234px;
|
||
height: 26px;
|
||
opacity: 1;
|
||
border-radius: 8px;
|
||
display: flex;
|
||
justify-content: flex-start;
|
||
align-items: center;
|
||
text-align: center;
|
||
font-size: 14px;
|
||
// font-weight: 400;
|
||
border: 1px solid #ccc;
|
||
cursor: pointer;
|
||
div {
|
||
flex: 1;
|
||
height: 100%;
|
||
border-radius: 8px;
|
||
line-height: 26px;
|
||
}
|
||
.Selected {
|
||
background: rgba(100, 195, 164, 1);
|
||
border-radius: 8px 0px 0px 8px;
|
||
color: rgba(255, 255, 255, 1);
|
||
}
|
||
.Selecteds {
|
||
background: rgba(100, 195, 164, 1);
|
||
border-radius: 0px 8px 8px 0px;
|
||
color: rgba(255, 255, 255, 1);
|
||
}
|
||
}
|
||
}
|
||
.tableBox {
|
||
:deep(
|
||
.el-table .el-table__header-wrapper th,
|
||
.el-table .el-table__fixed-header-wrapper th
|
||
) {
|
||
color: rgba(0, 0, 0, 1);
|
||
}
|
||
height: 100%;
|
||
:deep(.el-table__inner-wrapper) {
|
||
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);
|
||
.el-table-fixed-column--left {
|
||
background: rgba(247, 247, 247, 1) !important;
|
||
}
|
||
}
|
||
.insectDiv {
|
||
width: 100%;
|
||
height: 90%;
|
||
overflow: hidden;
|
||
.gutters {
|
||
width: 100%;
|
||
height: 100%;
|
||
overflow-y: scroll;
|
||
.ins {
|
||
position: relative;
|
||
.yj {
|
||
color: rgba(255, 255, 255, 1);
|
||
position: absolute;
|
||
font-size: 14px;
|
||
border-radius: 0px 30px, 0px, 30px;
|
||
top: 0;
|
||
right: 0;
|
||
text-align: center;
|
||
line-height: 24px;
|
||
padding: 1px 5px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
:deep().el-dialog__body {
|
||
width: 300px;
|
||
height: 300px;
|
||
}
|
||
.chartMode {
|
||
:deep(
|
||
.el-table .el-table__header-wrapper th,
|
||
.el-table .el-table__fixed-header-wrapper th
|
||
) {
|
||
color: rgba(0, 0, 0, 1);
|
||
}
|
||
height: 100%;
|
||
:deep(.el-table__inner-wrapper) {
|
||
height: 100% !important;
|
||
}
|
||
.example-pagination-block {
|
||
font-size: 14px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: flex-end;
|
||
}
|
||
:deep(.tabth) {
|
||
background-color: rgba(247, 247, 247, 1);
|
||
}
|
||
.insectDiv {
|
||
width: 100%;
|
||
height: 90%;
|
||
overflow: hidden;
|
||
.gutters {
|
||
width: 100%;
|
||
height: 100%;
|
||
overflow-y: scroll;
|
||
.ins {
|
||
position: relative;
|
||
.yj {
|
||
color: rgba(255, 255, 255, 1);
|
||
position: absolute;
|
||
font-size: 14px;
|
||
border-radius: 0px 30px, 0px, 30px;
|
||
top: 0;
|
||
right: 0;
|
||
text-align: center;
|
||
line-height: 24px;
|
||
padding: 1px 5px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.tableBoxs {
|
||
width: 100%;
|
||
height: 100%;
|
||
overflow: hidden;
|
||
.gutters {
|
||
width: 100%;
|
||
height: 100%;
|
||
overflow-y: scroll;
|
||
.ins {
|
||
position: relative;
|
||
.yj {
|
||
color: rgba(255, 255, 255, 1);
|
||
position: absolute;
|
||
font-size: 14px;
|
||
border-radius: 0px 30px, 0px, 30px;
|
||
top: 0;
|
||
right: 0;
|
||
text-align: center;
|
||
line-height: 24px;
|
||
padding: 1px 5px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.chartModeDiv {
|
||
width: 100%;
|
||
height: 50%;
|
||
}
|
||
.depth {
|
||
width: 90%;
|
||
height: 26px;
|
||
opacity: 1;
|
||
border-radius: 4px;
|
||
font-size: 12px;
|
||
color: rgba(102, 102, 102, 1);
|
||
margin-top: 20px;
|
||
cursor: pointer;
|
||
background: linear-gradient(
|
||
180deg,
|
||
rgba(16, 111, 111, 0.1) 0%,
|
||
rgba(47, 214, 214, 0.1) 100%
|
||
);
|
||
|
||
border: 1px solid rgba(228, 231, 237, 1);
|
||
display: flex;
|
||
align-items: center;
|
||
p {
|
||
flex: 1;
|
||
text-align: center;
|
||
height: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
.SelectedDiv {
|
||
opacity: 1;
|
||
border-radius: 4px;
|
||
background: rgba(100, 195, 164, 1);
|
||
}
|
||
margin: 0 auto;
|
||
}
|
||
}
|
||
}
|
||
.myVideo {
|
||
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 {
|
||
.el-dialog__body {
|
||
width: 100%;
|
||
height: 400px;
|
||
}
|
||
}
|
||
</style>
|