Merge branch 'dev-xiaole' into shenzhen-dev
This commit is contained in:
骆乐
commit
76bc1b8c53
BIN
src/assets/images/projectImg/numBgc.png
Normal file
BIN
src/assets/images/projectImg/numBgc.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.8 KiB |
@ -1,12 +1,13 @@
|
||||
<template>
|
||||
<!-- 实时数据 -->
|
||||
<div class="container">
|
||||
<div class="containerBox">
|
||||
<div class="titleTxt">{{ title }}</div>
|
||||
|
||||
<div ref="centerChart" class="centerChart"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import echarts from 'echarts4';
|
||||
export default {
|
||||
|
||||
props: {
|
||||
@ -17,16 +18,303 @@ export default {
|
||||
},
|
||||
data() {
|
||||
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>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.container {
|
||||
.containerBox {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: 1px solid #0081c3;
|
||||
@ -37,6 +325,10 @@ export default {
|
||||
margin-top: 5px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
.centerChart{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<!-- 趋势图 -->
|
||||
<div class="contentBox">
|
||||
<div class="titleTxt">{{ title }}</div>
|
||||
<!-- <div class="operateBar">
|
||||
<div class="operateBar">
|
||||
<span
|
||||
class="greenBtn"
|
||||
@click="switchingData(1)"
|
||||
@ -59,13 +59,16 @@
|
||||
/>
|
||||
{{ $t("message.environmentalOverview.e6SelectArr")[3].title }}
|
||||
</span>
|
||||
</div> -->
|
||||
</div>
|
||||
<div class="myChart" ref="myChart" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import echarts from "echarts4";
|
||||
import {
|
||||
getEnvironmentWarningInfo
|
||||
} from "@/assets/js/api/environmentManage";
|
||||
export default {
|
||||
props: {
|
||||
title: {
|
||||
@ -75,26 +78,77 @@ export default {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
data : [90, 85, 100, 96, 100, 150, 190, 125 ]
|
||||
data : [90, 85, 100, 96, 100, 150, 190, 125 ],
|
||||
checked:1,
|
||||
dustData_24:[],
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.initMyChart();
|
||||
},
|
||||
methods: {
|
||||
changeData(type){
|
||||
if(type == 1){
|
||||
this.data = [110, 65, 210, 96, 100, 160, 130, 220]
|
||||
}else if(type == 2){
|
||||
this.data = [90, 85, 100, 96, 100, 150, 190, 125]
|
||||
}else if(type == 3 ){
|
||||
this.data = [100, 160, 130, 220, 90, 85, 100, 96,]
|
||||
}else{
|
||||
this.data = [130, 220, 90, 85, 100, 65, 210, 96]
|
||||
}
|
||||
getEnvironmentWarningInfoApi(){
|
||||
// console.log('执行');
|
||||
getEnvironmentWarningInfo({
|
||||
deviceId: this.currentDevDetail.deviceId,
|
||||
projectSn: this.projectSn,
|
||||
warningType: 1
|
||||
}).then(res => {
|
||||
console.log(res.result);
|
||||
this.pm10Warning = res.result.pm10Warning
|
||||
this.pm25Warning = res.result.pm25Warning
|
||||
this.noiseWarning = res.result.noiseWarning
|
||||
this.windSpeedWarning = res.result.windSpeed
|
||||
this.createdEcharts2();
|
||||
})
|
||||
},
|
||||
//切换 24小时数据
|
||||
switchingData(value) {
|
||||
this.checked = value;
|
||||
this.initMyChart();
|
||||
},
|
||||
initMyChart() {
|
||||
const myChart = echarts.init(this.$refs.myChart);
|
||||
// this.dustData_24.forEach((element) => {
|
||||
// //
|
||||
// xdata.push(element.uploadDate.split(" ")[1]);
|
||||
// switch (this.checked) {
|
||||
// case 1:
|
||||
// ydata.push(element.pm25);
|
||||
// Alert = 'pm25'+this.$t('message.dataBoard.guard') + '(' + this.pm25Warning + ')'
|
||||
// AlertNumber = this.pm25Warning
|
||||
// break;
|
||||
// case 2:
|
||||
// ydata.push(element.pm10);
|
||||
// Alert = 'pm10'+this.$t('message.dataBoard.guard')+ '(' + this.pm10Warning + ')'
|
||||
// AlertNumber = this.pm10Warning
|
||||
// break;
|
||||
// case 3:
|
||||
// ydata.push(element.windspeed);
|
||||
// Alert = this.$t('message.dataBoard.windSpeed')+this.$t('message.dataBoard.guard')+ '(' + this.windSpeedWarning + ')'
|
||||
// AlertNumber = this.windSpeedWarning
|
||||
// break;
|
||||
// case 4:
|
||||
// ydata.push(element.noise);
|
||||
// Alert = this.$t('message.dataBoard.noise')+this.$t('message.dataBoard.guard')+ '(' + this.noiseWarning + ')'
|
||||
// AlertNumber = this.noiseWarning
|
||||
// break;
|
||||
// }
|
||||
// });
|
||||
switch (this.checked) {
|
||||
case 1:
|
||||
this.data = [90, 85, 100, 96, 100, 150, 190, 125 ]
|
||||
break;
|
||||
case 2:
|
||||
this.data = [ 100, 150, 190, 125,90, 85, 100, 96 ]
|
||||
break;
|
||||
case 3:
|
||||
this.data = [100, 96, 100, 150,90, 85, 190, 125 ]
|
||||
break;
|
||||
case 4:
|
||||
this.data = [90, 96, 100, 85, 100,150, 190, 125 ]
|
||||
break;
|
||||
}
|
||||
const option = {
|
||||
xAxis: {
|
||||
type: "category",
|
||||
@ -167,7 +221,10 @@ export default {
|
||||
}
|
||||
.myChart {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
height: 90%;
|
||||
}
|
||||
.operateBar{
|
||||
margin: 20px 0px 0px 20px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -2,7 +2,9 @@
|
||||
<!-- 环境监测 -->
|
||||
<div class="contentBox">
|
||||
<div class="titleTxt">{{ title }}</div>
|
||||
<airQulityChart ></airQulityChart>
|
||||
<div class="air" >
|
||||
<airQulityChart :show="true"></airQulityChart>
|
||||
</div>
|
||||
<!-- :show="true" -->
|
||||
</div>
|
||||
</template>
|
||||
@ -20,227 +22,8 @@ export default {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
lineColor: "#1FCCC6",
|
||||
todayAir: {
|
||||
analysisData: "0",
|
||||
analysisType: "优"
|
||||
}
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.createdEcharts3();
|
||||
},
|
||||
methods: {
|
||||
createdEcharts3() {
|
||||
let that = this;
|
||||
//项目进度
|
||||
let monitor = echarts.init(this.$refs.monitor);
|
||||
this.chart = monitor;
|
||||
monitor.clear();
|
||||
const 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"
|
||||
}, //刻度标签。
|
||||
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)"
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
monitor.setOption(this.option);
|
||||
}
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -256,31 +39,9 @@ export default {
|
||||
margin-top: 5px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
.monitor {
|
||||
.air{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.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;
|
||||
}
|
||||
height: 85%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -29,15 +29,16 @@ export default {
|
||||
const myChart = echarts.init(this.$refs.myChart);
|
||||
const option = {
|
||||
title: {
|
||||
subtext: "报警数量",
|
||||
textAlign: 'center',
|
||||
x: '29%',
|
||||
y: '43%',
|
||||
y: '38%',
|
||||
text:'27',
|
||||
textStyle: {
|
||||
fontSize: 20,
|
||||
fontWeight: 'normal',
|
||||
color: '#fff',
|
||||
},
|
||||
subtext: "报警数量",
|
||||
subtextStyle: {
|
||||
fontSize: 16,
|
||||
fontWeight: 'normal',
|
||||
@ -50,7 +51,7 @@ export default {
|
||||
legend: {
|
||||
type: 'scroll',
|
||||
orient: 'vertical',
|
||||
right: 50,
|
||||
right: 30,
|
||||
top: 'center',
|
||||
itemWidth: 10, // 设置宽度
|
||||
itemHeight: 10, // 设置高度
|
||||
@ -90,8 +91,8 @@ export default {
|
||||
show: false,
|
||||
},
|
||||
data: [
|
||||
{ value: 13, name: "扬尘噪声报警" },
|
||||
{ value: 14, name: "PM2.5超标报警" },
|
||||
{ value: 13, name: "扬尘噪声报警 : 13" },
|
||||
{ value: 14, name: "PM2.5超标报警 : 14" },
|
||||
],
|
||||
},
|
||||
],
|
||||
|
||||
@ -2,14 +2,6 @@
|
||||
<!-- 空气分析 -->
|
||||
<div class="contentBox">
|
||||
<div class="titleTxt">{{ title }}</div>
|
||||
<!-- <div>
|
||||
<el-progress :percentage="50" :color="customColor1"> 优</el-progress>
|
||||
<el-progress :percentage="55" :color="customColor2"> 良</el-progress>
|
||||
<el-progress :percentage="35" :color="customColor3">轻度污染</el-progress>
|
||||
<el-progress :percentage="35" :color="customColor4">中度污染</el-progress>
|
||||
<el-progress :percentage="30" :color="customColor5">重度污染</el-progress>
|
||||
<el-progress :percentage="5" :color="customColor6">严重污染</el-progress>
|
||||
</div> -->
|
||||
<div class="blockContent">
|
||||
<div class="operateBar">
|
||||
<span
|
||||
@ -52,6 +44,7 @@
|
||||
<ul>
|
||||
<li>
|
||||
<el-progress
|
||||
class="progressleft"
|
||||
:show-text="false"
|
||||
:stroke-width="4"
|
||||
:percentage="
|
||||
@ -59,16 +52,18 @@
|
||||
"
|
||||
:color="'#1FCCC6'"
|
||||
></el-progress>
|
||||
<span class="type type1">{{
|
||||
<div class="point" style="background-color: #1FCCC6;"></div>
|
||||
<span class="types">{{
|
||||
$t("message.environmentalOverview.typeList")[0]
|
||||
}}</span>
|
||||
<span
|
||||
<span class="day"
|
||||
>{{ airAnalysis.length > 0 ? airAnalysis[0].num : 0
|
||||
}}{{ $t("message.environmentalOverview.Days") }}</span
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<el-progress
|
||||
class="progressleft"
|
||||
:show-text="false"
|
||||
:stroke-width="4"
|
||||
:percentage="
|
||||
@ -76,10 +71,11 @@
|
||||
"
|
||||
:color="'#FFBB38'"
|
||||
></el-progress>
|
||||
<span class="type type2">{{
|
||||
<div class="point" style="background-color: #FFBB38;"></div>
|
||||
<span class="types">{{
|
||||
$t("message.environmentalOverview.typeList")[1]
|
||||
}}</span>
|
||||
<span
|
||||
<span class="day"
|
||||
>{{ airAnalysis.length > 0 ? airAnalysis[1].num : 0
|
||||
}}{{ $t("message.environmentalOverview.Days") }}</span
|
||||
>
|
||||
@ -87,16 +83,18 @@
|
||||
<li>
|
||||
<el-progress
|
||||
:show-text="false"
|
||||
class="progressleft"
|
||||
:stroke-width="4"
|
||||
:percentage="
|
||||
airAnalysis.length > 0 ? airAnalysis[2].num : 0
|
||||
"
|
||||
:color="'#FE7A18'"
|
||||
></el-progress>
|
||||
<span class="type type3">{{
|
||||
<div class="point" style="background-color: #FE7A18;"></div>
|
||||
<span class="types">{{
|
||||
$t("message.environmentalOverview.typeList")[2]
|
||||
}}</span>
|
||||
<span
|
||||
<span class="day"
|
||||
>{{ airAnalysis.length > 0 ? airAnalysis[2].num : 0
|
||||
}}{{ $t("message.environmentalOverview.Days") }}</span
|
||||
>
|
||||
@ -104,22 +102,25 @@
|
||||
<li>
|
||||
<el-progress
|
||||
:show-text="false"
|
||||
class="progressleft"
|
||||
:stroke-width="4"
|
||||
:percentage="
|
||||
airAnalysis.length > 0 ? airAnalysis[3].num : 0
|
||||
"
|
||||
:color="'#7718FE'"
|
||||
></el-progress>
|
||||
<span class="type type4">{{
|
||||
<div class="point" style="background-color: #7718FE;"></div>
|
||||
<span class="types">{{
|
||||
$t("message.environmentalOverview.typeList")[3]
|
||||
}}</span>
|
||||
<span
|
||||
<span class="day"
|
||||
>{{ airAnalysis.length > 0 ? airAnalysis[3].num : 0
|
||||
}}{{ $t("message.environmentalOverview.Days") }}</span
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<el-progress
|
||||
class="progressleft"
|
||||
:show-text="false"
|
||||
:stroke-width="4"
|
||||
:percentage="
|
||||
@ -127,16 +128,18 @@
|
||||
"
|
||||
:color="'#890EA1'"
|
||||
></el-progress>
|
||||
<span class="type type5">{{
|
||||
<div class="point" style="background-color: #890EA1;"></div>
|
||||
<span class="types">{{
|
||||
$t("message.environmentalOverview.typeList")[4]
|
||||
}}</span>
|
||||
<span
|
||||
<span class="day"
|
||||
>{{ airAnalysis.length > 0 ? airAnalysis[4].num : 0
|
||||
}}{{ $t("message.environmentalOverview.Days") }}</span
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<el-progress
|
||||
class="progressleft"
|
||||
:show-text="false"
|
||||
:stroke-width="4"
|
||||
:percentage="
|
||||
@ -144,10 +147,11 @@
|
||||
"
|
||||
:color="'#970C0C'"
|
||||
></el-progress>
|
||||
<span class="type type6">{{
|
||||
<div class="point" style="background-color: #970C0C;"></div>
|
||||
<span class="types">{{
|
||||
$t("message.environmentalOverview.typeList")[5]
|
||||
}}</span>
|
||||
<span
|
||||
<span class="day"
|
||||
>{{ airAnalysis.length > 0 ? airAnalysis[5].num : 0
|
||||
}}{{ $t("message.environmentalOverview.Days") }}</span
|
||||
>
|
||||
@ -172,21 +176,12 @@ export default {
|
||||
return {
|
||||
airType: 1,
|
||||
airAnalysis: [],
|
||||
// customColor1:"#36cd81",
|
||||
// customColor2:'#e2cd72',
|
||||
// customColor3:'#cf8755',
|
||||
// customColor4:'#6d70fb',
|
||||
// customColor5:'#e5524a',
|
||||
// customColor6:'#f84848'
|
||||
};
|
||||
},
|
||||
mounted(){
|
||||
this.getAirQualityStatistics();
|
||||
},
|
||||
methods: {
|
||||
// format(percentage) {
|
||||
// return percentage === 100 ? "满" : `${percentage}%`;
|
||||
// }
|
||||
//空气质量分析--统计
|
||||
getAirQualityStatistics() {
|
||||
let data = {
|
||||
@ -216,12 +211,41 @@ export default {
|
||||
margin-top: 5px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
.operateBar{
|
||||
margin-left: 20px;
|
||||
}
|
||||
.operateBar{
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.progressBox{
|
||||
margin-top: 20px;
|
||||
margin-top: 10px;
|
||||
margin-left: 20px;
|
||||
// width: 60%;
|
||||
font-size: 12px;
|
||||
.progressleft{
|
||||
display: inline-block;
|
||||
height: 10px;
|
||||
width:60%;
|
||||
}
|
||||
li{
|
||||
margin: 10px;
|
||||
}
|
||||
.point{
|
||||
display: inline-block;
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
margin-left: 10px;
|
||||
border-radius: 50%;
|
||||
background-color: #fff;
|
||||
}
|
||||
.types{
|
||||
margin-left: 15px;
|
||||
width: 120px;
|
||||
}
|
||||
.day{
|
||||
margin-left: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -0,0 +1,106 @@
|
||||
<template>
|
||||
<!-- 施工进度 -->
|
||||
<div class="construct">
|
||||
<div class="flex">
|
||||
<div class="box">
|
||||
<p class="title">基础工程</p>
|
||||
<div class="imgStyle">
|
||||
<img src="@/assets/images/projectImg/proGreen.png" />
|
||||
</div>
|
||||
<p class="timeText">开始时间：2022-01-01</p>
|
||||
<p class="timeText">结束时间：2022-02-01</p>
|
||||
</div>
|
||||
<div class="box">
|
||||
<p class="title">主体结构施工</p>
|
||||
<div class="imgStyle">
|
||||
<img src="@/assets/images/projectImg/proGreen.png" />
|
||||
</div>
|
||||
<p class="timeText">开始时间：2022-02-15</p>
|
||||
<p class="timeText">结束时间：2022-04-23</p>
|
||||
</div>
|
||||
<div class="box">
|
||||
<p class="title">屋面工程</p>
|
||||
<div class="imgStyle">
|
||||
<img src="@/assets/images/projectImg/proGreen.png" />
|
||||
</div>
|
||||
<p class="timeText">开始时间：2022-03-01</p>
|
||||
<p class="timeText">结束时间：2022-05-20</p>
|
||||
</div>
|
||||
<div class="box">
|
||||
<p class="title">机械设备安拆工程</p>
|
||||
<div class="imgStyle">
|
||||
<img src="@/assets/images/projectImg/proYellow.png" />
|
||||
</div>
|
||||
<p class="timeText">开始时间：2022-05-24</p>
|
||||
<p class="timeText">结束时间：2022-06-30</p>
|
||||
</div>
|
||||
<div class="box">
|
||||
<p>室内装饰装修工程</p>
|
||||
<div class="imgStyle">
|
||||
<img src="@/assets/images/projectImg/proGray.png" />
|
||||
</div>
|
||||
<p class="timeText">开始时间：2022-05-24</p>
|
||||
<p class="timeText">结束时间：2022-06-30</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
|
||||
};
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.construct {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.titleTxt {
|
||||
font-size: 18px;
|
||||
color: #6ee4f0;
|
||||
margin-top: 5px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
.flex{
|
||||
display: flex;
|
||||
margin-top: 3%;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
.box{
|
||||
text-align: center;
|
||||
margin-right: 5.5%;
|
||||
}
|
||||
.title{
|
||||
font-size: 14px;
|
||||
position: relative;
|
||||
}
|
||||
.title::before{
|
||||
content:'- - - - - - ';
|
||||
position: absolute;
|
||||
left: 120px;
|
||||
width: 80px;
|
||||
color: #465161;
|
||||
}
|
||||
.imgStyle{
|
||||
margin: 20px;
|
||||
width: 100px;
|
||||
height: 70px;
|
||||
// width: 20%;
|
||||
// height:20%;
|
||||
img{
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
.timeText{
|
||||
font-size: 12px;
|
||||
color: #465161;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,14 +1,15 @@
|
||||
<template>
|
||||
<!-- 施工进度 -->
|
||||
<div class="container">
|
||||
<div class="containerBox">
|
||||
<div class="titleTxt">{{ title }}</div>
|
||||
|
||||
<conProgress></conProgress>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import conProgress from '../jChart/pie/progress.vue'
|
||||
export default {
|
||||
|
||||
components:{conProgress},
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
@ -26,7 +27,7 @@ export default {
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.container {
|
||||
.containerBox {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: 1px solid #0081c3;
|
||||
|
||||
@ -17,7 +17,7 @@
|
||||
<centerTop title="甘特图" />
|
||||
</div>
|
||||
<div class="centerBottom">
|
||||
<centerTop title="施工进度" />
|
||||
<centerBottom title="施工进度" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,13 +1,51 @@
|
||||
<template>
|
||||
<!-- 进度总览 -->
|
||||
<div class="container">
|
||||
<div class="containerBox">
|
||||
<div class="titleTxt">{{ title }}</div>
|
||||
|
||||
<div class="content">
|
||||
<div class="num">
|
||||
679
|
||||
<p>完成任务数</p>
|
||||
</div>
|
||||
<div class="num">
|
||||
67%
|
||||
<p>完成率</p>
|
||||
</div>
|
||||
<div class="num">
|
||||
45
|
||||
<p>延期天数</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="charts">
|
||||
<div class="chart">
|
||||
<JRingChart title="89%" subTitle="总进度" :color="['#547ced','#162a51']"
|
||||
:data="[
|
||||
{ value: 7, name: '' },
|
||||
{ value: 3, name: '' }
|
||||
]"/>
|
||||
</div>
|
||||
<div class="chart">
|
||||
<JRingChart title="89%" subTitle="总进度" :color="['#5be1f5','#193f54']"
|
||||
:data="[
|
||||
{ value: 3, name: '' },
|
||||
{ value: 5, name: '' }
|
||||
]"/>
|
||||
</div>
|
||||
<div class="chart">
|
||||
<JRingChart title="89%" subTitle="总进度" :color="['#fe6b7e','#39273d']"
|
||||
:data="[
|
||||
{ value: 4, name: '' },
|
||||
{ value: 6, name: '' }
|
||||
]"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import JRingChart from '../jChart/pie/JRingChart.vue'
|
||||
export default {
|
||||
components: { JRingChart },
|
||||
|
||||
props: {
|
||||
title: {
|
||||
@ -26,7 +64,7 @@ export default {
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.container {
|
||||
.containerBox {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: 1px solid #0081c3;
|
||||
@ -37,6 +75,35 @@ export default {
|
||||
margin-top: 5px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
.content{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-top:20px;
|
||||
margin-left: 30px;
|
||||
}
|
||||
.num{
|
||||
width: 88px;
|
||||
line-height: 38px;
|
||||
height: 38px;
|
||||
text-align: center;
|
||||
margin-right: 35px;
|
||||
color: #47b1c4;
|
||||
background-image: url(~@/assets/images/projectImg/numBgc.png);
|
||||
p{
|
||||
color: #d3d5d9;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
.charts {
|
||||
padding: 10px 30px 0;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
.chart {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
@ -2,7 +2,8 @@
|
||||
<!-- 施工进度 -->
|
||||
<div class="constructProgress">
|
||||
<div class="titleTxt">{{ title }}</div>
|
||||
<div class="flex">
|
||||
<conProgress></conProgress>
|
||||
<!-- <div class="flex">
|
||||
<div class="box">
|
||||
<p class="title">基础工程</p>
|
||||
<div class="imgStyle">
|
||||
@ -12,7 +13,7 @@
|
||||
<p class="timeText">结束时间：2022-02-01</p>
|
||||
</div>
|
||||
<div class="box">
|
||||
<p>主体结构施工</p>
|
||||
<p class="title">主体结构施工</p>
|
||||
<div class="imgStyle">
|
||||
<img src="@/assets/images/projectImg/proGreen.png" />
|
||||
</div>
|
||||
@ -20,7 +21,7 @@
|
||||
<p class="timeText">结束时间：2022-04-23</p>
|
||||
</div>
|
||||
<div class="box">
|
||||
<p>屋面工程</p>
|
||||
<p class="title">屋面工程</p>
|
||||
<div class="imgStyle">
|
||||
<img src="@/assets/images/projectImg/proGreen.png" />
|
||||
</div>
|
||||
@ -28,7 +29,7 @@
|
||||
<p class="timeText">结束时间：2022-05-20</p>
|
||||
</div>
|
||||
<div class="box">
|
||||
<p>机械设备安拆工程</p>
|
||||
<p class="title">机械设备安拆工程</p>
|
||||
<div class="imgStyle">
|
||||
<img src="@/assets/images/projectImg/proYellow.png" />
|
||||
</div>
|
||||
@ -43,12 +44,14 @@
|
||||
<p class="timeText">开始时间：2022-05-24</p>
|
||||
<p class="timeText">结束时间：2022-06-30</p>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import conProgress from '../jChart/pie/progress.vue'
|
||||
export default {
|
||||
components:{conProgress},
|
||||
data() {
|
||||
return {
|
||||
|
||||
@ -75,28 +78,5 @@ export default {
|
||||
margin-top: 5px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
.flex{
|
||||
display: flex;
|
||||
margin-top: 50px;
|
||||
.box{
|
||||
text-align: center;
|
||||
margin-left: 40px;
|
||||
}
|
||||
.title{
|
||||
font-size: 14px;
|
||||
}
|
||||
.imgStyle{
|
||||
margin: 20px;
|
||||
width: 100px;
|
||||
height: 70px;
|
||||
img{
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
.timeText{
|
||||
font-size: 12px;
|
||||
color: #465161;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
x
Reference in New Issue
Block a user