admin/zhgdyun
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

湖里大屏(环境管理):实时数据模块

Browse Source
This commit is contained in:
骆乐 2022-08-03 14:33:21 +08:00
parent 48fac7a94c
commit 84344eb00b
1 changed files with 296 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

300
src/views/projectAdmin/dataBoard/projectHuScreen/envirManage/centerTop.vue
View File

@ -1,12 +1,13 @@
<template> <template>
<!-- 实时数据 --> <!-- 实时数据 -->
<div class="container"> <div class="containerBox">
<div class="titleTxt">{{ title }}</div> <div class="titleTxt">{{ title }}</div>
<div ref="centerChart" class="centerChart"></div>
</div> </div>
</template> </template>
<script> <script>
import echarts from 'echarts4';
export default { export default {
props: { props: {
@ -17,16 +18,303 @@ export default {
}, },
data() { data() {
return { return {
plantCap: [
{
name: "湿度",
values: "--",
id:1,
unit:'%RH'
},
{
name: "PM2.5",
values: "--",
id:2,
unit:'μg/m3'
},
{
name: "温度",
values: "30",
id:3,
unit:'°C'
},
{
name: "TSP",
values: "79",
id:4,
unit:'μg/m3'
},
{
name: "风速",
values: "--",
id:5,
unit:'m/s'
},
{
name: "PM10",
values: "30",
id:6,
unit:'μg/m3'
},
{
name: "风向",
values: "东",
id:7,
unit:'风'
},
{
name: "气压",
values: "101",
id:8,
unit:'kPa'
},
],
}; };
}, },
mounted(){
this.createCenterChart();
},
methods:{
//环境监测实时数据--图表
createCenterChart() {
let centerChart = echarts.init(this.$refs.centerChart);
console.log('this.$refs.centerChart')
console.log(this.$refs.centerChart.offsetHeight)
centerChart.clear();
let detailData = this.plantCap;
console.log('---detailData',detailData)
for (let i = 0; i < detailData.length; i++) {
if (detailData[i].id == 1) {
detailData[i].value = this.plantCap.humidity;
} else if (detailData[i].id == 2) {
detailData[i].value = this.plantCap.pm25;
} else if (detailData[i].id == 3) {
detailData[i].value = this.plantCap.temperature;
} else if (detailData[i].id == 4) {
detailData[i].value = this.plantCap.tsp;
} else if (detailData[i].id == 5) {
detailData[i].value = this.plantCap.windspeed;
} else if (detailData[i].id == 6) {
detailData[i].value = this.plantCap.pm10;
} else if (detailData[i].id == 7) {
detailData[i].value = this.plantCap.winddirectionName;
} else if (detailData[i].id == 8) {
detailData[i].value = this.plantCap.pressure?this.plantCap.pressure:'--';
}
detailData[i].values+=detailData[i].unit
// console.log('plantCap',detailData)
}
var plantCap = detailData;
var datalist = [
{
offset: [50, 55],
symbolSize: 100,
opacity: 0.95,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "#29c0fb",
},
{
offset: 1,
color: "#2dc5b9",
},
]),
},
{
offset: [30, 85],
symbolSize: 70,
opacity: 0.95,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "#35d17e",
},
{
offset: 1,
color: "#49ddb2",
},
]),
},
{
offset: [15, 50],
symbolSize: 80,
opacity: 0.95,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "#e5d273",
},
{
offset: 1,
color: "#e4a37f",
},
]),
},
{
offset: [40, 20],
symbolSize: 70,
opacity: 0.95,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "#277aec",
},
{
offset: 1,
color: "#57c5ec",
},
]),
},
{
offset: [85, 58],
symbolSize: 65,
opacity: 0.95,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "#e54948",
},
{
offset: 1,
color: "#f08456",
},
]),
},
{
offset: [76, 20],
symbolSize: 70,
opacity: 0.7,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "#11c46e",
},
{
offset: 1,
color: "#f08456",
},
]),
},
{
offset: [68, 82],
symbolSize: 65,
opacity: 0.68,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "#6367E0",
},
{
offset: 1,
color: "#B667F0",
},
]),
},
{
offset: [100, 35],
symbolSize: 50,
opacity: 0.68,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "#ea5d5f",
},
{
offset: 1,
color: "#B667F0",
},
]),
},
];
var datas = [];
for (var i = 0; i < plantCap.length; i++) {
var item = plantCap[i];
var itemToStyle = datalist[i];
datas.push({
name: item.values + "\n" + item.name,
value: itemToStyle.offset,
symbolSize: itemToStyle.symbolSize,
label: {
normal: {
textStyle: {
fontSize: 16,
fontWeight: 800,
lineHeight: 22,
},
},
},
itemStyle: {
normal: {
color: itemToStyle.color,
opacity: itemToStyle.opacity,
},
},
});
}
let option1 = {
grid: {
show: false,
top: 10,
bottom: 10,
},
xAxis: [
{
gridIndex: 0,
type: "value",
show: false,
min: 0,
max: 100,
nameLocation: "middle",
nameGap: 5,
},
],
yAxis: [
{
gridIndex: 0,
min: 0,
show: false,
max: 100,
nameLocation: "middle",
nameGap: 30,
},
],
series: [
{
type: "effectScatter",
// symbol: 'circle',
// symbolSize: 120,
hoverAnimation: true,
label: {
normal: {
show: true,
formatter: "{b}",
color: "#fff",
textStyle: {
fontSize: "20",
},
},
},
itemStyle: {
normal: {
color: "#00acea",
},
},
data: datas,
},
],
};
centerChart.setOption(option1);
window.onresize = centerChart.resize;
},
}
} }
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.container { .containerBox {
width: 100%; width: 100%;
height: 100%; height: 100%;
border: 1px solid #0081c3; border: 1px solid #0081c3;
@ -37,6 +325,10 @@ export default {
margin-top: 5px; margin-top: 5px;
margin-left: 5px; margin-left: 5px;
} }
.centerChart{
width: 100%;
height: 100%;
}
} }
</style> </style>