Skip to content

D
digital-construction
Commit e7ffafdc authored by 张牧越's avatar 张牧越
Browse files
Options

扬尘噪音界面完成

parent 5f6531f2
Hide whitespace changes
Inline Side-by-side
Showing with 751 additions and 2 deletions
src/components/noise/Index.vue
View file @ e7ffafdc
<template> <template>
<div>test4</div> <div id="noise">
</template> <div class="side-area">
\ No newline at end of file <Title text="设备总览"></Title>
<ShadowContainer>
<div class="chart-container">
<img class="custom-chart" src="@/assets/chart.png" />
<div ref="deviceChart" id="device-chart"></div>
</div>
</ShadowContainer>
<Title text="近30日噪音"></Title>
<ShadowContainer>
<div class="chart-container">
<img class="custom-chart" src="@/assets/chart.png" />
<div ref="noiseChart" id="noise-chart"></div>
</div>
</ShadowContainer>
<Title text="近30日AQI"></Title>
<ShadowContainer>
<div v-for="(iType, index) in noiseTypes" :key="index" class="i-type">
<div class="i-type-name">
{{ iType.text }}
</div>
<div class="slider">
<el-progress
:percentage="50"
:color="customColors"
:show-text="false"
define-back-color="#183C6B"
></el-progress>
</div>
<div class="i-type-count">
<span>{{ iType.count }}</span>
天
</div>
</div>
</ShadowContainer>
</div>
<div class="mid-area">
<Title text="实时监测" type="long"></Title>
<ShadowContainer>
<div class="monitor">
<div class="lt-status">
<el-divider></el-divider>
<el-progress
type="circle"
:percentage="60"
:format="(value) => formatText(value, '40')"
:color="customMonitorColors"
stroke-width="12"
></el-progress>
<div class="status-unit">
pm 10 / <span style="font-size: 12px; color: #6d94bf">ug/m³</span>
</div>
<el-divider></el-divider>
<el-progress
type="circle"
:percentage="40"
:format="(value) => formatText(value, '35')"
:color="customMonitorColors"
stroke-width="12"
></el-progress>
<div class="status-unit">
pm 2.5 /
<span style="font-size: 12px; color: #6d94bf">ug/m³</span>
</div>
<el-divider></el-divider>
<el-progress
type="circle"
:percentage="10"
:format="(value) => formatText(value, '52')"
:color="customMonitorColors"
stroke-width="12"
></el-progress>
<div class="status-unit">
噪音 / <span style="font-size: 12px; color: #6d94bf">分贝</span>
</div>
<el-divider></el-divider>
</div>
<div class="mid-aqi">
<div class="aqi-background">
<div id="aqi-quality-chart" ref="aqiQualityChart"></div>
</div>
<div class="aqi-level">
<div class="aqi-level-line">
<div style="background: #18d7b9"></div>
<div style="background: #feba01"></div>
<div style="background: #ff754c"></div>
<div style="background: #f11b1f"></div>
<div style="background: #6339e6"></div>
<div style="background: #751dbf"></div>
</div>
<div class="aqi-level-text">
<div>优</div>
<div>良</div>
<div>轻度</div>
<div>中度</div>
<div>重度</div>
<div>严重</div>
</div>
</div>
</div>
<div class="rt-status">
<el-divider></el-divider>
<div class="rt-single-status">
<div class="left-des">
<div>温度</div>
<img src="@/assets/noise/icon_f_san@2x.png" alt="" />
</div>
<div class="rt-value"><span>14.5</span>℃</div>
</div>
<el-divider> </el-divider>
<div class="rt-single-status">
<div class="left-des">
<div>湿度</div>
<img src="@/assets/noise/icon_f_si@2x.png" alt="" />
</div>
<div class="rt-value"><span>36</span>%</div>
</div>
<el-divider> </el-divider>
<div class="rt-single-status">
<div class="left-des">
<div>风速</div>
<img src="@/assets/noise/icon_f_wu@2x.png" alt="" />
</div>
<div class="rt-value"><span>5</span>m/s</div>
</div>
<el-divider> </el-divider>
<div class="rt-single-status">
<div class="left-des">
<div>数据采集</div>
<img src="@/assets/noise/icon_f_liu@2x.png" alt="" />
</div>
<div class="rt-value" style="line-height: 36px">
2023-03-02
<br />
09:23:12
</div>
</div>
<el-divider> </el-divider>
</div>
</div>
</ShadowContainer>
<Title text="今日AQI" type="long"></Title>
<ShadowContainer>
<div id="aqi-chart" ref="aqiChart"></div>
</ShadowContainer>
</div>
<div class="side-area">
<Title text="报警信息"></Title>
<ShadowContainer>
<div
class="warn-title"
:style="{ borderColor: '#fff' }"
v-for="(warn, index) in warnings"
:key="index"
>
<div class="warn-text">{{ warn.text }}</div>
<div class="warn-time">{{ warn.time }}</div>
</div>
</ShadowContainer>
<Title text="扬尘噪音"></Title>
<ShadowContainer>
<div
class="noise-monitor"
v-for="(monitor, index) in noiseMonitors"
:key="index"
>
<img src="@/assets/noise/icon_e_qi@2x.png" alt="" />
{{ monitor.text }}
</div>
</ShadowContainer>
</div>
</div>
</template>
<script>
export default {
name: "Noise",
data() {
return {
pieChartData: [
{ value: 4, name: "在线总数" },
{ value: 2, name: "离线总数" },
],
noiseData: [
{ value: 4, name: "达标" },
{ value: 3, name: "超标" },
],
noiseTypes: [
{ text: "优", count: 13 },
{ text: "良", count: 17 },
{ text: "轻度污染", count: 0 },
{ text: "中度污染", count: 0 },
{ text: "重度污染", count: 0 },
{ text: "严重污染", count: 0 },
],
customColors: [
{ color: "#f56c6c", percentage: 20 },
{ color: "#e6a23c", percentage: 40 },
{ color: "#5cb87a", percentage: 60 },
{ color: "#1989fa", percentage: 80 },
{ color: "#6f7ad3", percentage: 100 },
],
customMonitorColors: [
{ color: "#18D7B9", percentage: 25 },
{ color: "#2CBCFF", percentage: 50 },
{ color: "#FF754C", percentage: 75 },
{ color: "#FF754C", percentage: 100 },
],
warnings: [
{
text: "报警标题：报警内容123123123报警标题：报警内容123123123报警标题：报警内容123123123",
time: "2023-02-12 09:12",
},
{ text: "报警标题：报警内容123123123", time: "2023-02-12 09:12" },
{ text: "报警标题：报警内容123123123", time: "2023-02-12 09:12" },
{ text: "报警标题：报警内容123123123", time: "2023-02-12 09:12" },
{ text: "报警标题：报警内容123123123", time: "2023-02-12 09:12" },
{ text: "报警标题：报警内容123123123", time: "2023-02-12 09:12" },
{ text: "报警标题：报警内容123123123", time: "2023-02-12 09:12" },
{ text: "报警标题：报警内容123123123", time: "2023-02-12 09:12" },
],
noiseMonitors: [
{ text: "料仓扬尘监测" },
{ text: "料仓扬尘监测" },
{ text: "料仓扬尘监测" },
{ text: "料仓扬尘监测" },
{ text: "料仓扬尘监测" },
{ text: "料仓扬尘监测" },
{ text: "料仓扬尘监测" },
{ text: "料仓扬尘监测" },
{ text: "料仓扬尘监测" },
{ text: "料仓扬尘监测" },
],
};
},
methods: {
renderDeviceChart() {
const chart = this.$echarts.init(this.$refs.deviceChart);
const option = {
title: {
x: "27%", //X坐标
y: "35%",
text: "6",
subtext: "总数",
textAlign: "center",
textStyle: {
//标题样式
fontSize: 30,
fontWeight: "bolder",
color: "#00fcff",
},
subtextStyle: {
//副标题样式
fontSize: 16,
fontWeight: "bolder",
color: "rgba(255,255,255,0.7)",
},
},
tooltip: {
trigger: "item",
},
legend: {
itemHeight: 12,
itemWidth: 12,
icon: "rect",
right: "10%",
top: "30%",
orient: "vertical",
itemGap: 40,
textStyle: {
color: "auto",
rich: {
a: {
fontSize: 14,
align: "left",
},
b: {
fontSize: 20,
align: "left",
lineHeight: 25,
},
},
},
formatter: (name) => {
let data = this.pieChartData;
let target;
for (let i = 0, l = data.length; i < l; i++) {
if (data[i].name == name) {
target = data[i].value;
}
}
let arr = [`{a|${name}}`, `{b|${target}} 台`];
return arr.join(" ");
},
},
series: [
{
type: "pie",
radius: ["80%", "90%"],
center: ["28%", "50%"],
avoidLabelOverlap: false,
itemStyle: {
borderRadius: 20,
borderWidth: 4,
},
label: {
show: false,
position: "center",
},
data: this.pieChartData,
},
],
};
chart.setOption(option);
},
renderNoiseChart() {
const chart = this.$echarts.init(this.$refs.noiseChart);
const option = {
title: {
x: "27%", //X坐标
y: "32%",
subtext: "近30日\n噪音情况",
textAlign: "center",
subtextStyle: {
//副标题样式
fontSize: 16,
fontWeight: "bolder",
lineHeight: 24,
color: "rgba(255,255,255,0.7)",
},
},
tooltip: {
trigger: "item",
},
legend: {
itemHeight: 12,
itemWidth: 12,
icon: "rect",
right: "10%",
top: "30%",
orient: "vertical",
itemGap: 40,
textStyle: {
color: "auto",
rich: {
a: {
fontSize: 14,
align: "left",
},
b: {
fontSize: 20,
align: "left",
lineHeight: 25,
},
},
},
formatter: (name) => {
let data = this.noiseData;
let target;
for (let i = 0, l = data.length; i < l; i++) {
if (data[i].name == name) {
target = data[i].value;
}
}
let arr = [`{a|${name}}`, `{b|${target}} 天`];
return arr.join(" ");
},
},
series: [
{
type: "pie",
radius: ["80%", "90%"],
center: ["28%", "50%"],
avoidLabelOverlap: false,
itemStyle: {
borderRadius: 20,
borderWidth: 4,
},
label: {
show: false,
position: "center",
},
data: this.noiseData,
},
],
};
chart.setOption(option);
},
renderAQIChart() {
const chart = this.$echarts.init(this.$refs.aqiChart);
const option = {
color: ["#5E97F6"],
grid: {
top: 30,
bottom: 30,
left: 30,
right: 30,
},
xAxis: {
type: "category",
data: ["09:00", "12:00", "13:00", "16:00", "19:00", "22:00", "01:00"],
axisTick: { show: false },
axisLabel: {
textStyle: {
fontSize: "12",
color: "#c6def9",
},
},
},
yAxis: {
type: "value",
axisLabel: {
textStyle: {
fontSize: "12",
color: "#c6def9",
},
},
splitNumber: 4,
splitLine: {
lineStyle: {
color: "rgba(95, 120, 144, 0.4)",
},
},
},
series: [
{
name: "NJBR-TD-01#",
data: [2, 5, 4, 4, 7, 5, 6],
type: "line",
smooth: true,
areaStyle: {
normal: {
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "#5E97F6",
},
{
offset: 1,
color: "rgba(0,0,0,0)",
},
]),
},
},
},
],
};
chart.setOption(option);
},
formatText(value, text) {
return text;
},
renderAqiQualityChart() {
const chart = this.$echarts.init(this.$refs.aqiQualityChart);
const option = {
title: {
x: "49%", //X坐标
y: "64%",
subtext: "优",
textAlign: "center",
subtextStyle: {
//副标题样式
fontSize: 24,
fontWeight: "bolder",
lineHeight: 24,
color: "rgba(255,255,255,0.7)",
},
},
series: [
{
type: "gauge",
center: ["50%", "60%"],
startAngle: 230,
endAngle: -50,
min: 0,
max: 300,
itemStyle: {
color: "#FFAB91",
},
progress: {
show: true,
width: 30,
},
pointer: {
show: false,
},
axisLine: {
lineStyle: {
width: 30,
color: [[1, "#183C6B"]],
},
},
axisTick: {
distance: -45,
splitNumber: 5,
lineStyle: {
width: 2,
color: "#183C6B",
},
},
splitLine: {
show: false,
},
axisLabel: {
show: false,
},
anchor: {
show: false,
},
title: {
show: false,
},
detail: {
valueAnimation: true,
width: "60%",
lineHeight: 40,
borderRadius: 8,
offsetCenter: [0, -10],
fontSize: 46,
fontWeight: "bolder",
formatter: "{value}",
color: "#fff",
},
data: [
{
value: 20,
},
],
},
],
};
chart.setOption(option);
},
},
mounted() {
this.renderDeviceChart();
this.renderNoiseChart();
this.renderAQIChart();
this.renderAqiQualityChart();
},
};
</script>
<style lang="less" scoped>
#noise {
padding: 12px 20px;
display: flex;
justify-content: space-between;
.side-area {
width: 25%;
}
.mid-area {
width: calc(50% - 40px);
margin: 0 20px;
}
}
.chart-container {
position: relative;
.custom-chart {
position: absolute;
width: 30%;
top: 50%;
transform: translateY(-50%);
left: 13%;
}
}
#device-chart,
#noise-chart {
width: 100%;
height: 210px;
}
.i-type {
display: flex;
font-size: 14px;
color: #c6def9;
padding: 4px;
.slider {
width: 70%;
vertical-align: top;
}
.i-type-name,
.i-type-count {
width: 15%;
vertical-align: top;
line-height: 30px;
text-align: right;
span {
font-size: 16px;
}
}
.i-type-count {
width: 12%;
}
.i-type-name {
padding-right: 12px;
}
}
.el-progress {
padding: 12px 0;
}
#aqi-chart {
width: 100%;
height: 234px;
}
.monitor {
display: flex;
justify-content: space-between;
.lt-status,
.rt-status {
width: 20%;
text-align: center;
}
}
.el-divider {
opacity: 0.3;
background: #7e8ed4;
}
::v-deep .el-progress-circle__track {
stroke: #183c6b;
}
::v-deep .el-progress__text {
font-size: 16px;
color: #c6def9 !important;
}
::v-deep .el-progress-circle {
width: 88px !important;
height: 88px !important;
}
.rt-single-status {
display: flex;
padding: 7px 0;
.left-des {
text-align: center;
width: 64px;
div {
margin-bottom: 12px;
font-size: 16px;
color: #22c3ed;
}
}
img {
width: 40px;
vertical-align: top;
}
.rt-value {
width: calc(100% - 64px);
font-size: 12px;
color: #c6def9;
opacity: 0.8;
line-height: 72px;
span {
font-size: 26px;
margin-right: 12px;
}
}
}
.status-unit {
font-size: 16px;
color: #c6def9;
text-align: center;
}
::v-deep .el-divider--horizontal {
margin: 16px 0;
}
.mid-aqi {
width: 60%;
}
.aqi-background {
height: 100%;
background: url("@/assets/noise/img_bj.png") no-repeat;
background-size: 80%;
background-position: 50% 15%;
zoom: 1.2;
}
#aqi-quality-chart {
width: 100%;
height: 300px;
}
.aqi-level {
transform: translateY(-80px);
}
.aqi-level-line {
width: 80%;
margin: 0 auto;
display: flex;
margin-bottom: 12px;
& > div {
width: calc(100% / 6);
height: 12px;
}
& > div:first-child {
border-top-left-radius: 6px;
border-bottom-left-radius: 6px;
}
& > div:last-child {
border-top-right-radius: 6px;
border-bottom-right-radius: 6px;
}
}
.aqi-level-text {
width: 80%;
display: flex;
margin: 0 auto;
font-size: 14px;
color: #c6def9;
opacity: 0.8;
& > div {
width: calc(100% / 6);
height: 12px;
text-align: center;
}
}
.warn-title {
border-left: 2px solid;
padding-left: 12px;
font-size: 14px;
color: #c6def9;
display: flex;
justify-content: space-between;
margin-bottom: 18px;
&:last-child {
margin-bottom: 0;
}
.warn-text {
width: 60%;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.warn-time {
width: 40%;
text-align: right;
}
}
.noise-monitor {
font-size: 14px;
color: #c6def9;
margin-bottom: 18px;
img {
width: 20px;
vertical-align: top;
}
&:last-child {
margin-bottom: 0;
}
}
</style>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment