621 lines
16 KiB
Vue
621 lines
16 KiB
Vue
<template>
|
|
<div style="width: 100%; height: 100%; position: relative">
|
|
<div ref="monitor" style="width: 100%; height: 100%"></div>
|
|
<div class="colour flex5" v-show = this.$props.show>
|
|
|
|
<div class="colour_content">
|
|
<div
|
|
class="bg"
|
|
style="
|
|
background: #1fccc6;
|
|
border-top-left-radius: 8px;
|
|
border-bottom-left-radius: 8px;
|
|
"
|
|
></div>
|
|
<div class="size">{{ $t("message.projectSummary.actor") }}</div>
|
|
</div>
|
|
<div class="colour_content">
|
|
<div class="bg" style="background: #FFBB38"></div>
|
|
<div class="size">{{ $t("message.projectSummary.fine") }}</div>
|
|
</div>
|
|
<div class="colour_content">
|
|
<div class="bg" style="background: #fe7a18"></div>
|
|
<div class="size">
|
|
{{ $t("message.projectSummary.mildContamination") }}
|
|
</div>
|
|
</div>
|
|
<div class="colour_content">
|
|
<div class="bg" style="background: #7718fe"></div>
|
|
<div class="size">
|
|
{{ $t("message.projectSummary.middleLevelPollution") }}
|
|
</div>
|
|
</div>
|
|
<div class="colour_content">
|
|
<div class="bg" style="background: #890ea1"></div>
|
|
<div class="size">
|
|
{{ $t("message.projectSummary.actheavyPollutionor") }}
|
|
</div>
|
|
</div>
|
|
<div class="colour_content">
|
|
<div
|
|
class="bg"
|
|
style="
|
|
background: #970c0c;
|
|
border-top-right-radius: 8px;
|
|
border-bottom-right-radius: 8px;
|
|
"
|
|
></div>
|
|
<div class="size">
|
|
{{ $t("message.projectSummary.severeContamination") }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import echarts from 'echarts4';
|
|
import {
|
|
getCurrentDayAirQualityApi
|
|
} from "@/assets/js/api/environmentManage";
|
|
export default {
|
|
props:["show"], // 控制空气质量条是否显示
|
|
data() {
|
|
return {
|
|
option: null,
|
|
chart: Object,
|
|
lineColor: "#1FCCC6",
|
|
todayAir:{
|
|
analysisData:'0',
|
|
analysisType:'优'
|
|
}
|
|
};
|
|
},
|
|
mounted() {
|
|
this.getAirQualityToday()
|
|
},
|
|
methods: {
|
|
//空气质量分析--当天
|
|
getAirQualityToday() {
|
|
let data = {
|
|
projectSn: this.$store.state.projectSn,
|
|
};
|
|
getCurrentDayAirQualityApi(data).then((res) => {
|
|
console.log(res)
|
|
if (res.code == 200) {
|
|
if(res.result){
|
|
this.todayAir = res.result;
|
|
this.getColor();
|
|
this.createdEcharts3();
|
|
}
|
|
}
|
|
});
|
|
},
|
|
getColor() {
|
|
switch (this.todayAir.analysisType) {
|
|
case "优":
|
|
this.lineColor = "#6ce9f0";
|
|
break;
|
|
case "良":
|
|
this.lineColor = "#468EFD";
|
|
break;
|
|
case "轻度污染":
|
|
this.lineColor = "#FE7A18";
|
|
break;
|
|
case "中度污染":
|
|
this.lineColor = "#7718FE";
|
|
break;
|
|
case "重度污染":
|
|
this.lineColor = "#890EA1";
|
|
break;
|
|
case "严重污染":
|
|
this.lineColor = "#970C0C";
|
|
break;
|
|
}
|
|
},
|
|
createdEcharts3() {
|
|
let that = this;
|
|
//项目进度
|
|
let monitor = echarts.init(this.$refs.monitor);
|
|
this.chart = monitor;
|
|
monitor.clear();
|
|
|
|
var text;
|
|
if(this.$props.show) {
|
|
this.option = {
|
|
title: {
|
|
show: true,
|
|
text: this.todayAir.analysisType,
|
|
x: "49%",
|
|
y: "55%",
|
|
z: 8,
|
|
textAlign: "center",
|
|
textStyle: {
|
|
color: " rgb(147,169,205) ",
|
|
fontSize: 12,
|
|
},
|
|
},
|
|
series: [
|
|
{
|
|
type: "gauge",
|
|
radius: "62%",
|
|
splitNumber: 10,
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: [
|
|
[this.todayAir.analysisData /100, this.lineColor],
|
|
[1, "#111F42"],
|
|
],
|
|
width: 6,
|
|
},
|
|
},
|
|
axisLabel: {
|
|
show: false,
|
|
},
|
|
axisTick: {
|
|
show: false,
|
|
},
|
|
splitLine: {
|
|
show: false,
|
|
},
|
|
|
|
pointer: {
|
|
show: false,
|
|
},
|
|
},
|
|
{
|
|
type: "gauge",
|
|
// center: ['20%', '50%'],
|
|
radius: "80%",
|
|
min: 0, //最小刻度
|
|
max: 100, //最大刻度
|
|
splitNumber: 10, //刻度数量
|
|
startAngle: 225,
|
|
endAngle: -45,
|
|
axisLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
width: 2,
|
|
color: [[1, "rgba(0,0,0,0)"]],
|
|
},
|
|
},
|
|
//仪表盘轴线
|
|
axisLabel: {
|
|
show: true,
|
|
color: "#4d5bd1",
|
|
// distance: 14,
|
|
// formatter: function (v) {
|
|
// switch (v + "") {
|
|
// case "0":
|
|
// return "0";
|
|
// case "50":
|
|
// return "50";
|
|
// case "100":
|
|
// return "100";
|
|
// case "150":
|
|
// return "150";
|
|
// case "200":
|
|
// return "200";
|
|
// case "250":
|
|
// return "250";
|
|
// case "300":
|
|
// return "300";
|
|
// case "350":
|
|
// return "350";
|
|
// case "400":
|
|
// return "400";
|
|
// case "450":
|
|
// return "450";
|
|
// case "500":
|
|
// return "500";
|
|
// }
|
|
// },
|
|
}, //刻度标签。
|
|
axisTick: {
|
|
show: true,
|
|
splitNumber: 7,
|
|
lineStyle: {
|
|
color: "#468EFD",
|
|
width: 2,
|
|
},
|
|
length: -4,
|
|
}, //刻度样式
|
|
splitLine: {
|
|
show: true,
|
|
length: -10,
|
|
lineStyle: {
|
|
color: "#468EFD",
|
|
},
|
|
}, //分隔线样式
|
|
detail: {
|
|
show: false,
|
|
},
|
|
pointer: {
|
|
show: false,
|
|
},
|
|
},
|
|
/*内部*/
|
|
{
|
|
type: "pie",
|
|
radius: ["0", "35%"],
|
|
center: ["50%", "50%"],
|
|
z: 8,
|
|
hoverAnimation: false,
|
|
data: [
|
|
{
|
|
value: this.todayAir.analysisData,
|
|
itemStyle: {
|
|
normal: {
|
|
color: "#091F4B",
|
|
},
|
|
},
|
|
label: {
|
|
normal: {
|
|
rich: {
|
|
a: {
|
|
color: this.lineColor,
|
|
align: "center",
|
|
fontSize: 31,
|
|
fontWeight: "bold",
|
|
},
|
|
},
|
|
formatter: function (params) {
|
|
return "{a|" + params.value + "}";
|
|
},
|
|
position: "center",
|
|
show: true,
|
|
},
|
|
},
|
|
labelLine: {
|
|
show: false,
|
|
},
|
|
},
|
|
],
|
|
},
|
|
/*外一层*/
|
|
{
|
|
type: "pie",
|
|
radius: "40%",
|
|
startAngle: 220,
|
|
endAngle: -40,
|
|
hoverAnimation: false,
|
|
center: ["50%", "50%"],
|
|
avoidLabelOverlap: false,
|
|
label: {
|
|
show: false,
|
|
},
|
|
labelLine: {
|
|
show: false,
|
|
},
|
|
data: [
|
|
{
|
|
value: 1,
|
|
},
|
|
],
|
|
itemStyle: {
|
|
normal: {
|
|
color: "rgba(69, 161, 255,0.8)",
|
|
},
|
|
},
|
|
},
|
|
//外二层圈
|
|
{
|
|
type: "pie",
|
|
radius: "45%",
|
|
center: ["50%", "50%"],
|
|
avoidLabelOverlap: false,
|
|
z: 0,
|
|
hoverAnimation: false,
|
|
label: {
|
|
show: false,
|
|
},
|
|
labelLine: {
|
|
show: false,
|
|
},
|
|
data: [
|
|
{
|
|
value: 1,
|
|
},
|
|
],
|
|
itemStyle: {
|
|
normal: {
|
|
color: "rgba(69, 161, 255,0.5)",
|
|
},
|
|
},
|
|
},
|
|
//最外层圈
|
|
{
|
|
type: "pie",
|
|
radius: "50%",
|
|
center: ["50%", "50%"],
|
|
avoidLabelOverlap: false,
|
|
z: 0,
|
|
hoverAnimation: false,
|
|
label: {
|
|
show: false,
|
|
},
|
|
labelLine: {
|
|
show: false,
|
|
},
|
|
data: [
|
|
{
|
|
value: 1,
|
|
},
|
|
],
|
|
itemStyle: {
|
|
normal: {
|
|
color: "rgba(69, 161, 255,0.3)",
|
|
},
|
|
},
|
|
},
|
|
],
|
|
};
|
|
}else { // 项目级看板配置
|
|
this.option = {
|
|
title: {
|
|
show: true,
|
|
text: this.todayAir.analysisType,
|
|
x: "49%",
|
|
y: "54%",
|
|
z: 8,
|
|
textAlign: "center",
|
|
textStyle: {
|
|
color: this.lineColor,
|
|
fontSize: 12,
|
|
},
|
|
},
|
|
series: [
|
|
{
|
|
type: "gauge",
|
|
radius: "43%",
|
|
splitNumber: 10,
|
|
data: [
|
|
{
|
|
value: 1,
|
|
},
|
|
],
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: [
|
|
[this.todayAir.analysisData /100, this.lineColor],
|
|
[1, "#111F42"],
|
|
],
|
|
width: 6,
|
|
},
|
|
},
|
|
axisLabel: {
|
|
show: false,
|
|
},
|
|
axisTick: {
|
|
show: false,
|
|
},
|
|
splitLine: {
|
|
show: false,
|
|
},
|
|
|
|
pointer: {
|
|
show: false,
|
|
},
|
|
},
|
|
{
|
|
type: "gauge",
|
|
// center: ['20%', '50%'],
|
|
radius: "55%",
|
|
min: 0, //最小刻度
|
|
max: 100, //最大刻度
|
|
splitNumber: 10, //刻度数量
|
|
startAngle: 225,
|
|
endAngle: -45,
|
|
axisLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
width: 2,
|
|
color: [[1, "rgba(0,0,0,0)"]],
|
|
},
|
|
},
|
|
//仪表盘轴线
|
|
axisLabel: {
|
|
show: true,
|
|
color: "rgba(77, 91, 209,0.5)",
|
|
textStyle: {
|
|
fontSize:12,
|
|
}
|
|
// rgba(77, 91, 209, 0.5)
|
|
// distance: 14,
|
|
// formatter: function (v) {
|
|
// switch (v + "") {
|
|
// case "0":
|
|
// return "0";
|
|
// case "50":
|
|
// return "50";
|
|
// case "100":
|
|
// return "100";
|
|
// case "150":
|
|
// return "150";
|
|
// case "200":
|
|
// return "200";
|
|
// case "250":
|
|
// return "250";
|
|
// case "300":
|
|
// return "300";
|
|
// case "350":
|
|
// return "350";
|
|
// case "400":
|
|
// return "400";
|
|
// case "450":
|
|
// return "450";
|
|
// case "500":
|
|
// return "500";
|
|
// }
|
|
// },
|
|
}, //刻度标签。
|
|
axisTick: {
|
|
show: true,
|
|
splitNumber: 7,
|
|
lineStyle: {
|
|
color: "#468EFD",
|
|
width: 2,
|
|
},
|
|
length: -4,
|
|
}, //刻度样式
|
|
splitLine: {
|
|
show: true,
|
|
length: -10,
|
|
lineStyle: {
|
|
color: "#468EFD",
|
|
},
|
|
|
|
}, //分隔线样式
|
|
detail: {
|
|
show: false,
|
|
},
|
|
pointer: {
|
|
show: false,
|
|
},
|
|
},
|
|
/*内部*/
|
|
{
|
|
type: "pie",
|
|
radius: ["0", "20%"],
|
|
center: ["50%", "50%"],
|
|
z: 8,
|
|
hoverAnimation: false,
|
|
data: [
|
|
{
|
|
value: this.todayAir.analysisData,
|
|
itemStyle: {
|
|
normal: {
|
|
color: "#091F4B",
|
|
},
|
|
},
|
|
label: {
|
|
normal: {
|
|
rich: {
|
|
a: {
|
|
color: this.lineColor,
|
|
align: "center",
|
|
fontSize: 28,
|
|
fontWeight: "bold",
|
|
},
|
|
},
|
|
formatter: function (params) {
|
|
return "{a|" + params.value + "}";
|
|
},
|
|
position: "center",
|
|
show: true,
|
|
},
|
|
},
|
|
labelLine: {
|
|
show: false,
|
|
},
|
|
},
|
|
],
|
|
},
|
|
/*外一层*/
|
|
{
|
|
type: "pie",
|
|
radius: "25%",
|
|
startAngle: 220,
|
|
endAngle: -40,
|
|
hoverAnimation: false,
|
|
center: ["50%", "50%"],
|
|
avoidLabelOverlap: false,
|
|
label: {
|
|
show: false,
|
|
},
|
|
labelLine: {
|
|
show: false,
|
|
},
|
|
data: [
|
|
{
|
|
value: 1,
|
|
},
|
|
],
|
|
itemStyle: {
|
|
normal: {
|
|
color: "rgba(69, 161, 255,0.8)",
|
|
},
|
|
},
|
|
},
|
|
//外二层圈
|
|
{
|
|
type: "pie",
|
|
radius: "30%",
|
|
center: ["50%", "50%"],
|
|
avoidLabelOverlap: false,
|
|
z: 0,
|
|
hoverAnimation: false,
|
|
label: {
|
|
show: false,
|
|
},
|
|
labelLine: {
|
|
show: false,
|
|
},
|
|
data: [
|
|
{
|
|
value: 1,
|
|
},
|
|
],
|
|
itemStyle: {
|
|
normal: {
|
|
color: "rgba(69, 161, 255,0.5)",
|
|
},
|
|
},
|
|
},
|
|
//最外层圈
|
|
{
|
|
type: "pie",
|
|
radius: "35%",
|
|
center: ["50%", "50%"],
|
|
avoidLabelOverlap: false,
|
|
z: 0,
|
|
hoverAnimation: false,
|
|
label: {
|
|
show: false,
|
|
},
|
|
labelLine: {
|
|
show: false,
|
|
},
|
|
data: [
|
|
{
|
|
value: 1,
|
|
},
|
|
],
|
|
itemStyle: {
|
|
normal: {
|
|
color: "rgba(69, 161, 255,0.3)",
|
|
},
|
|
},
|
|
},
|
|
],
|
|
};
|
|
}
|
|
|
|
monitor.setOption(this.option);
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
<style lang="less" scoped>
|
|
.colour {
|
|
position: absolute;
|
|
bottom: 0;
|
|
width: 100%;
|
|
font-size: 10px;
|
|
left: 2%;
|
|
.colour_content {
|
|
width: 16%;
|
|
text-align: center;
|
|
float: left;
|
|
.bg {
|
|
width: 100%;
|
|
height: 5px;
|
|
}
|
|
.size {
|
|
width: 100%;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
}
|
|
}
|
|
</style> |