大屏(绿色施工):今日报警统计
This commit is contained in:
骆乐
parent
f7bfeb81ff
commit
9b0994237c
@ -7,7 +7,7 @@
|
||||
{{$t('message.dataBoard.environmentMonitor')}}
|
||||
</div>
|
||||
<div class="blockContent">
|
||||
<airQulityChart :show='true' :size='small'></airQulityChart>
|
||||
<airQulityChart :show='true'></airQulityChart>
|
||||
</div>
|
||||
</div>
|
||||
<div class="blockBox">
|
||||
@ -488,31 +488,7 @@
|
||||
{{$t('message.dataBoard.todayAlarmStatistics')}}
|
||||
</div>
|
||||
<div class="blockContent">
|
||||
<div class="safeChart" ref="safeChart"></div>
|
||||
<div class="descBox fullHeight">
|
||||
<div>
|
||||
<div class="descItem descItem1">
|
||||
<p class="text"><i class="dot purple"></i>
|
||||
<!-- 噪声报警 -->
|
||||
{{$t('message.dataBoard.noiseAlarm')}}
|
||||
</p>
|
||||
<p class="num">{{alarmData.noiseNum}}</p>
|
||||
</div>
|
||||
<div class="descItem descItem1">
|
||||
<p class="text"><i style="background: #ffbb38;" class="dot"></i>{{'TSP'+$t('message.dataBoard.alarm')}}</p>
|
||||
<p class="num">{{alarmData.tspNum}}</p>
|
||||
</div>
|
||||
<div class="descItem descItem1">
|
||||
<p class="text"><i style="background: #fe6c7f;" class="dot"></i>{{'PM2.5'+$t('message.dataBoard.excessiveAlarm')}}</p>
|
||||
<p class="num">{{alarmData.pm25Num}}</p>
|
||||
</div>
|
||||
<div class="descItem">
|
||||
<p class="text"><i class="dot green"></i>{{'PM10'+$t('message.dataBoard.excessiveAlarm')}}</p>
|
||||
<p class="num">{{alarmData.pm10Num}}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<todayAlarm></todayAlarm>
|
||||
</div>
|
||||
</div>
|
||||
<div class="blockBox">
|
||||
@ -563,7 +539,8 @@
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import echarts from 'echarts4';;
|
||||
import echarts from 'echarts4';
|
||||
import todayAlarm from "./greenConstruct/todayAlarm"
|
||||
import airQulityChart from "@/components/chart/airQulityChart";
|
||||
import {
|
||||
environmentDevList,
|
||||
@ -576,9 +553,10 @@ import {
|
||||
sprayOperateDataApi,
|
||||
getEnvironmentWarningInfo
|
||||
} from "@/assets/js/api/environmentManage";
|
||||
import {selectEnvironmentAlarmCountTotalApi} from "@/assets/js/api/dataBoard"
|
||||
import {selectEnvironmentAlarmCountTotalApi} from "@/assets/js/api/dataBoard";
|
||||
|
||||
export default {
|
||||
components: { airQulityChart },
|
||||
components: { airQulityChart,todayAlarm },
|
||||
data() {
|
||||
return {
|
||||
devList: [],
|
||||
|
||||
@ -0,0 +1,64 @@
|
||||
<!-- 今日报警统计 -->
|
||||
<template>
|
||||
<div class="todayAlarm">
|
||||
<div class="alarmChart" ref="alarmChart" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { createPieChart } from '../homePage/index'
|
||||
import {selectEnvironmentAlarmCountTotalApi} from "@/assets/js/api/dataBoard"
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
alarmData:{
|
||||
humidityNum: 0,
|
||||
noiseNum: 0,
|
||||
pm10Num: 2,
|
||||
pm25Num: 2,
|
||||
temperatureNum: 0,
|
||||
totalAlarm: 4,
|
||||
tspNum: 0,
|
||||
windspeedNum: 0
|
||||
},
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.selectEnvironmentAlarmCountTotal();
|
||||
this.createPieChart()
|
||||
},
|
||||
methods: {
|
||||
selectEnvironmentAlarmCountTotal(){
|
||||
selectEnvironmentAlarmCountTotalApi({
|
||||
sn: this.$store.state.projectSn,
|
||||
selectType: 1
|
||||
}).then((res) => {
|
||||
this.alarmData=res.result
|
||||
console.log(res.result);
|
||||
createPieChart(
|
||||
[
|
||||
{ value: this.alarmData.noiseNum, name: `噪声报警 : ${this.alarmData.noiseNum}` },
|
||||
{ value: this.alarmData.pm25Num, name: `PM2.5超标报警 : ${this.alarmData.pm25Num}` },
|
||||
{ value: this.alarmData.pm10Num, name: `PM10超标报警 : ${this.alarmData.pm10Num}` },
|
||||
{ value: this.alarmData.tspNum, name: `TSP报警 : ${this.alarmData.tspNum}` },
|
||||
],
|
||||
this.$refs.alarmChart,
|
||||
["rgba(120, 111, 240, 1)","#fe6c7f","rgba(92, 226, 246, 1)","#ffbb38"],
|
||||
'报警总数'
|
||||
);
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.todayAlarm{
|
||||
width: 375px;
|
||||
height: 180px;
|
||||
.alarmChart{
|
||||
width: 370px;
|
||||
height: 150px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,15 +1,595 @@
|
||||
<template>
|
||||
<div class="environmentWatch">
|
||||
environmentWatch
|
||||
<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",
|
||||
}, //刻度标签。
|
||||
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>
|
||||
|
||||
</style>
|
||||
@ -113,7 +113,8 @@ export default {
|
||||
}
|
||||
.manager {
|
||||
.manager-title {
|
||||
margin-bottom: 15px;
|
||||
margin-top: 6px;
|
||||
margin-bottom: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
&::before {
|
||||
@ -127,10 +128,12 @@ export default {
|
||||
}
|
||||
.manager-persons {
|
||||
display: flex;
|
||||
margin-left: 20px;
|
||||
.person {
|
||||
position: relative;
|
||||
width: 86px;
|
||||
height: 86px;
|
||||
margin-right: 25px;
|
||||
background: url(~@/assets/images/dataBoard/fc857081d1aded7077e783a698bd1d6.png);
|
||||
&:nth-child(2) {
|
||||
background: url(~@/assets/images/dataBoard/9f4e0bd5a0baebf3e96d512b208527b.png);
|
||||
|
||||
@ -44,65 +44,6 @@ export default {
|
||||
}
|
||||
});
|
||||
},
|
||||
createPieChart(data,color, title) {
|
||||
let that = this;
|
||||
let myChart = echarts.init(this.$refs.safeChart);
|
||||
var option = {
|
||||
color: color ? color : ["#5181F6", "#61D2B9", "#F67F51", "#7851F6"],
|
||||
title: {
|
||||
show: true,
|
||||
text: data[0].value + data[1].value,
|
||||
x: "23%",
|
||||
y: "32%",
|
||||
z: 5,
|
||||
textAlign: "center",
|
||||
textStyle: {
|
||||
color: "rgba(255, 255, 255, 1)",
|
||||
fontSize: 20
|
||||
},
|
||||
subtext: title,
|
||||
subtextStyle: {
|
||||
color: "rgba(255, 255, 255, 0.8)",
|
||||
fontSize: 14
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
right: 0
|
||||
},
|
||||
legend: {
|
||||
type: 'scroll',
|
||||
orient: 'vertical',
|
||||
right: '50',
|
||||
top: 'center',
|
||||
itemWidth: 8, // 设置宽度
|
||||
itemHeight: 8, // 设置高度
|
||||
selectedMode: true,
|
||||
icon: 'circle',
|
||||
textStyle: {
|
||||
color: '#c7c7a7',
|
||||
fontSize: 14,
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "",
|
||||
type: "pie",
|
||||
radius: ["60%", "80%"],
|
||||
center: ['25%', '50%'],
|
||||
avoidLabelOverlap: false,
|
||||
label: {
|
||||
show: false,
|
||||
position: "center"
|
||||
},
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
data: data
|
||||
}
|
||||
]
|
||||
};
|
||||
myChart.setOption(option);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -6,8 +6,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import {createPieChart} from "./index"
|
||||
import echarts from "echarts4";
|
||||
import {createPieChart} from "./index"
|
||||
import { selectSecurityManageStatisticsApi } from "@/assets/js/api/dataBoard";
|
||||
export default {
|
||||
data() {
|
||||
@ -32,76 +31,17 @@ export default {
|
||||
let total = res.result.total;
|
||||
this.secureData.rectificationNum = total.rectificationNum;
|
||||
this.secureData.completeNum = total.totalNum - total.rectificationNum;
|
||||
this.createPieChart(
|
||||
createPieChart(
|
||||
[
|
||||
{ value: total.totalNum - total.rectificationNum, name: `已整改安全问题 : ${total.totalNum - total.rectificationNum}` },
|
||||
{ value: total.rectificationNum, name: `未整改安全问题 : ${ total.rectificationNum}` }
|
||||
],
|
||||
this.$refs.safeChart,
|
||||
["rgba(120, 111, 240, 1)", "rgba(254, 108, 127, 1)"],
|
||||
this.$t("message.companyDiagram.safeQuestion")
|
||||
);
|
||||
});
|
||||
},
|
||||
|
||||
createPieChart(data,color, title) {
|
||||
let that = this;
|
||||
let myChart = echarts.init(this.$refs.safeChart);
|
||||
var option = {
|
||||
color: color ? color : ["#5181F6", "#61D2B9", "#F67F51", "#7851F6"],
|
||||
title: {
|
||||
show: true,
|
||||
text: data[0].value + data[1].value,
|
||||
x: "23%",
|
||||
y: "32%",
|
||||
z: 5,
|
||||
textAlign: "center",
|
||||
textStyle: {
|
||||
color: "rgba(255, 255, 255, 1)",
|
||||
fontSize: 20
|
||||
},
|
||||
subtext: title,
|
||||
subtextStyle: {
|
||||
color: "rgba(255, 255, 255, 0.8)",
|
||||
fontSize: 14
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
right: 0
|
||||
},
|
||||
legend: {
|
||||
type: 'scroll',
|
||||
orient: 'vertical',
|
||||
right: '50',
|
||||
top: 'center',
|
||||
itemWidth: 8, // 设置宽度
|
||||
itemHeight: 8, // 设置高度
|
||||
selectedMode: true,
|
||||
icon: 'circle',
|
||||
textStyle: {
|
||||
color: '#c7c7a7',
|
||||
fontSize: 14,
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "",
|
||||
type: "pie",
|
||||
radius: ["60%", "80%"],
|
||||
center: ['25%', '50%'],
|
||||
avoidLabelOverlap: false,
|
||||
label: {
|
||||
show: false,
|
||||
position: "center"
|
||||
},
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
data: data
|
||||
}
|
||||
]
|
||||
};
|
||||
myChart.setOption(option);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -1,15 +1,327 @@
|
||||
|
||||
<template>
|
||||
<div class="smartDevices">
|
||||
smartDevices
|
||||
</div>
|
||||
<div ref="device1" class="device1"></div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import echarts from 'echarts4';;
|
||||
export default {
|
||||
props: ["title", "num", "totalDevNum"],
|
||||
data() {
|
||||
return {
|
||||
timer: null,
|
||||
option:null,
|
||||
chart:Object
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
//监听value的变化，进行相应的操作即可
|
||||
num: function (a, b) {
|
||||
console.log('设备数量',a)
|
||||
this.option.title.text="{a|" + this.num + "}\n{c| " + this.title + " }"
|
||||
this.option.series[6].data[0].value=this.num
|
||||
this.option.series[6].data[1].value=this.totalDevNum - this.num
|
||||
this.chart.setOption(this.option, true);
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.createdEchart();
|
||||
},
|
||||
beforeDestroy(){
|
||||
clearInterval(this.timer)
|
||||
},
|
||||
methods: {
|
||||
createdEchart() {
|
||||
let that = this;
|
||||
//设备统计 -- 塔吊设备数
|
||||
let tower = echarts.init(this.$refs.device1);
|
||||
this.chart=tower
|
||||
tower.clear();
|
||||
let angle = 0; //角度，用来做简单的动画效果的
|
||||
// let totalDevNum = this.statisticsCount.devcount.ufaceDevNum+
|
||||
// this.statisticsCount.devcount.videoNum+
|
||||
// +this.statisticsCount.devcount.environmentDevNum;
|
||||
|
||||
}
|
||||
this.option = {
|
||||
title: {
|
||||
text: "{a|" + this.num + "}\n{c| " + this.title + " }",
|
||||
x: "center",
|
||||
y: "center",
|
||||
textStyle: {
|
||||
rich: {
|
||||
a: {
|
||||
fontSize: 24,
|
||||
color: "#29EEF3",
|
||||
},
|
||||
|
||||
c: {
|
||||
fontSize: 12,
|
||||
lineHeight: 20,
|
||||
color: "rgba(255, 255, 254, 0.8)",
|
||||
// padding: [5,0]
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
series: [
|
||||
{
|
||||
name: "ring5",
|
||||
type: "custom",
|
||||
coordinateSystem: "none",
|
||||
renderItem: function (params, api) {
|
||||
return {
|
||||
type: "arc",
|
||||
shape: {
|
||||
cx: api.getWidth() / 2,
|
||||
cy: api.getHeight() / 2,
|
||||
r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.79,
|
||||
startAngle: ((0 + angle) * Math.PI) / 180,
|
||||
endAngle: ((90 + angle) * Math.PI) / 180,
|
||||
},
|
||||
style: {
|
||||
stroke: "#0CD3DB",
|
||||
fill: "transparent",
|
||||
lineWidth: 1.5,
|
||||
},
|
||||
silent: true,
|
||||
};
|
||||
},
|
||||
data: [0],
|
||||
},
|
||||
{
|
||||
name: "ring5",
|
||||
type: "custom",
|
||||
coordinateSystem: "none",
|
||||
renderItem: function (params, api) {
|
||||
return {
|
||||
type: "arc",
|
||||
shape: {
|
||||
cx: api.getWidth() / 2,
|
||||
cy: api.getHeight() / 2,
|
||||
r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.79,
|
||||
startAngle: ((180 + angle) * Math.PI) / 180,
|
||||
endAngle: ((270 + angle) * Math.PI) / 180,
|
||||
},
|
||||
style: {
|
||||
stroke: "#0CC1CD",
|
||||
fill: "transparent",
|
||||
lineWidth: 1.5,
|
||||
},
|
||||
silent: true,
|
||||
};
|
||||
},
|
||||
data: [0],
|
||||
},
|
||||
{
|
||||
name: "ring5",
|
||||
type: "custom",
|
||||
coordinateSystem: "none",
|
||||
renderItem: function (params, api) {
|
||||
return {
|
||||
type: "arc",
|
||||
shape: {
|
||||
cx: api.getWidth() / 2,
|
||||
cy: api.getHeight() / 2,
|
||||
r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.85,
|
||||
startAngle: ((270 + -angle) * Math.PI) / 180,
|
||||
endAngle: ((40 + -angle) * Math.PI) / 180,
|
||||
},
|
||||
style: {
|
||||
stroke: "#0CC1CD",
|
||||
fill: "transparent",
|
||||
lineWidth: 1.5,
|
||||
},
|
||||
silent: true,
|
||||
};
|
||||
},
|
||||
data: [0],
|
||||
},
|
||||
{
|
||||
name: "ring5",
|
||||
type: "custom",
|
||||
coordinateSystem: "none",
|
||||
renderItem: function (params, api) {
|
||||
return {
|
||||
type: "arc",
|
||||
shape: {
|
||||
cx: api.getWidth() / 2,
|
||||
cy: api.getHeight() / 2,
|
||||
r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.85,
|
||||
startAngle: ((90 + -angle) * Math.PI) / 180,
|
||||
endAngle: ((220 + -angle) * Math.PI) / 180,
|
||||
},
|
||||
style: {
|
||||
stroke: "#0CC1CD",
|
||||
fill: "transparent",
|
||||
lineWidth: 1.5,
|
||||
},
|
||||
silent: true,
|
||||
};
|
||||
},
|
||||
data: [0],
|
||||
},
|
||||
{
|
||||
name: "ring5",
|
||||
type: "custom",
|
||||
coordinateSystem: "none",
|
||||
renderItem: function (params, api) {
|
||||
let x0 = api.getWidth() / 2;
|
||||
let y0 = api.getHeight() / 2;
|
||||
let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.85;
|
||||
let point = that.getCirlPoint(x0, y0, r, 90 + -angle);
|
||||
return {
|
||||
type: "circle",
|
||||
shape: {
|
||||
cx: point.x,
|
||||
cy: point.y,
|
||||
r: 4,
|
||||
},
|
||||
style: {
|
||||
stroke: "#0CC1CD", //粉
|
||||
fill: "#0CD3DB",
|
||||
},
|
||||
silent: true,
|
||||
};
|
||||
},
|
||||
data: [0],
|
||||
},
|
||||
{
|
||||
name: "ring5", //绿点
|
||||
type: "custom",
|
||||
coordinateSystem: "none",
|
||||
renderItem: function (params, api) {
|
||||
let x0 = api.getWidth() / 2;
|
||||
let y0 = api.getHeight() / 2;
|
||||
let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.85;
|
||||
let point = that.getCirlPoint(x0, y0, r, 270 + -angle);
|
||||
return {
|
||||
type: "circle",
|
||||
shape: {
|
||||
cx: point.x,
|
||||
cy: point.y,
|
||||
r: 4,
|
||||
},
|
||||
style: {
|
||||
stroke: "#0CC1CD", //绿
|
||||
fill: "#0CD3DB",
|
||||
},
|
||||
silent: true,
|
||||
};
|
||||
},
|
||||
data: [0],
|
||||
},
|
||||
{
|
||||
type: "pie",
|
||||
radius: ["72%", "58%"],
|
||||
silent: true,
|
||||
clockwise: true,
|
||||
startAngle: 90,
|
||||
z: 0,
|
||||
zlevel: 0,
|
||||
label: {
|
||||
normal: {
|
||||
position: "center",
|
||||
},
|
||||
},
|
||||
data: [
|
||||
{
|
||||
value: this.num,
|
||||
name: "",
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: {
|
||||
// 完成的圆环的颜色
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: "#4FADFD", // 0% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "#28E8FA", // 100% 处的颜色
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
value: this.totalDevNum - this.num,
|
||||
name: "",
|
||||
label: {
|
||||
normal: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "#173164",
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
//划块线
|
||||
{
|
||||
name: "",
|
||||
type: "gauge",
|
||||
radius: "72%",
|
||||
center: ["50%", "50%"],
|
||||
startAngle: 0,
|
||||
endAngle: 359.9,
|
||||
splitNumber: 8,
|
||||
hoverAnimation: true,
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
splitLine: {
|
||||
length: 20,
|
||||
lineStyle: {
|
||||
width: 2,
|
||||
color: "#061740",
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
show: false,
|
||||
},
|
||||
pointer: {
|
||||
show: false,
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
opacity: 0,
|
||||
},
|
||||
},
|
||||
detail: {
|
||||
show: false,
|
||||
},
|
||||
data: [
|
||||
{
|
||||
value: 0,
|
||||
name: "",
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
this.timer=setInterval(() => {
|
||||
//用setInterval做动画感觉有问题
|
||||
angle = angle + 3;
|
||||
tower.setOption(this.option, true);
|
||||
}, 100);
|
||||
},
|
||||
getCirlPoint(x0, y0, r, angle) {
|
||||
let x1 = x0 + r * Math.cos((angle * Math.PI) / 180);
|
||||
let y1 = y0 + r * Math.sin((angle * Math.PI) / 180);
|
||||
return {
|
||||
x: x1,
|
||||
y: y1,
|
||||
};
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
|
||||
</style>
|
||||
@ -22,30 +22,30 @@
|
||||
ref="echart2"
|
||||
></div>
|
||||
<vue-scroll v-else :ops="ops">
|
||||
<devNumChart
|
||||
style="width: 50%; height: 100%; float: left"
|
||||
<smartDevices
|
||||
style="width: 50%; height: 100%; float: left"
|
||||
:title="$t('message.projectSummary.ufaceDevNum')"
|
||||
:num="statisticsCount.devcount.ufaceDevNum"
|
||||
:totalDevNum="totalDevNum"
|
||||
></devNumChart>
|
||||
<devNumChart
|
||||
style="width: 50%; height: 100%; float: left"
|
||||
></smartDevices>
|
||||
<smartDevices
|
||||
style="width: 50%; height: 100%; float: left"
|
||||
:title="$t('message.projectSummary.environmentDevNum')"
|
||||
:num="statisticsCount.devcount.environmentDevNum"
|
||||
:totalDevNum="totalDevNum"
|
||||
></devNumChart>
|
||||
<devNumChart
|
||||
style="width: 50%; height: 100%; float: left"
|
||||
></smartDevices>
|
||||
<smartDevices
|
||||
style="width: 50%; height: 100%; float: left"
|
||||
:title="$t('message.companyDiagram.videoDevNum')"
|
||||
:num="statisticsCount.devcount.videoNum"
|
||||
:totalDevNum="totalDevNum"
|
||||
></devNumChart>
|
||||
<devNumChart
|
||||
style="width: 50%; height: 100%; float: left"
|
||||
></smartDevices>
|
||||
<smartDevices
|
||||
style="width: 50%; height: 100%; float: left"
|
||||
:title="$t('message.companyDiagram.towerDevNum')"
|
||||
:num="statisticsCount.devcount.towerDevNum"
|
||||
:totalDevNum="totalDevNum"
|
||||
></devNumChart>
|
||||
></smartDevices>
|
||||
</vue-scroll>
|
||||
</div>
|
||||
</div>
|
||||
@ -63,6 +63,7 @@
|
||||
item.index == optionListIndex && enabledProjectV2 == 4
|
||||
}"
|
||||
v-for="(item, index) in $t('message.companyDiagram.optionList')"
|
||||
:key="index"
|
||||
>
|
||||
{{ item.name }}
|
||||
</div>
|
||||
@ -434,8 +435,7 @@
|
||||
class="blockContent"
|
||||
>
|
||||
<!-- 环境监测 -->
|
||||
<airQulity :show='true' :size='small'></airQulity>
|
||||
|
||||
<environmentWatch :show='true' :size='small'></environmentWatch>
|
||||
</div>
|
||||
<div v-else class="blockContent alarmBlockContent">
|
||||
<vue-scroll>
|
||||
@ -498,6 +498,8 @@ const echarts5 = require("echarts");
|
||||
import safeManage from "./homePage/safeManage"
|
||||
import qualityManage from "./homePage/qualityManage"
|
||||
import airQulity from "./components/airQulity"
|
||||
import smartDevices from "./homePage/smartDevices"
|
||||
import environmentWatch from "./homePage/environmentWatch.vue"
|
||||
import devNumChart from "@/components/chart/devNumChart";
|
||||
import airQulityChart from "@/components/chart/airQulityChart";
|
||||
import { getWorkerStatisticsCountApi } from "@/assets/js/api/company/project";
|
||||
@ -526,7 +528,7 @@ import ProjectInfo from './homePage/projectInfo'
|
||||
import PersonOverview from './homePage/personOverview'
|
||||
|
||||
export default {
|
||||
components: { devNumChart, airQulityChart, ProjectInfo, PersonOverview ,safeManage , qualityManage ,airQulity},
|
||||
components: { devNumChart, airQulityChart, ProjectInfo, PersonOverview ,safeManage , qualityManage ,airQulity,smartDevices ,environmentWatch},
|
||||
data() {
|
||||
return {
|
||||
COMPANY: '',
|
||||
@ -682,8 +684,6 @@ export default {
|
||||
this.enabledProjectV2 = enabledProjectV2
|
||||
|
||||
this.getWorkerStatisticsCount(1)
|
||||
// this.getSecureData()
|
||||
this.getQualityData()
|
||||
this.loadWeather()
|
||||
this.getAlarmList()
|
||||
this.getAlarmInfor()
|
||||
@ -932,51 +932,6 @@ export default {
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
//获取安全管理数据
|
||||
// getSecureData() {
|
||||
// let data = {
|
||||
// projectSn: this.$store.state.projectSn,
|
||||
// };
|
||||
// selectSecurityManageStatisticsApi(data).then((res) => {
|
||||
// let total = res.result.total;
|
||||
// this.secureData.rectificationNum = total.rectificationNum;
|
||||
// this.secureData.completeNum = total.totalNum - total.rectificationNum;
|
||||
// this.createPieChart(
|
||||
// [
|
||||
// { value: total.totalNum - total.rectificationNum, name: "" },
|
||||
// { value: total.rectificationNum, name: "" },
|
||||
// ],
|
||||
// this.$refs.safeChart,
|
||||
// ["rgba(120, 111, 240, 1)", "rgba(254, 108, 127, 1)"],
|
||||
// this.$t("message.companyDiagram.safeQuestion")
|
||||
// // "安全问题数"
|
||||
// );
|
||||
// });
|
||||
// },
|
||||
//获取质量管理数据
|
||||
getQualityData() {
|
||||
let data = {
|
||||
projectSn: this.$store.state.projectSn
|
||||
}
|
||||
selectQualityStatisticsApi(data).then((res) => {
|
||||
let total = res.result.total
|
||||
this.qualityData.rectificationNum = total.rectificationNum
|
||||
this.qualityData.completeNum = total.totalNum - total.rectificationNum
|
||||
if (COMPANY != 'longguang') {
|
||||
this.createPieChart(
|
||||
[
|
||||
{ value: total.totalNum - total.rectificationNum, name: '' },
|
||||
{ value: total.rectificationNum, name: '' }
|
||||
],
|
||||
this.$refs.qulityChart,
|
||||
['rgba(81, 129, 246, 1)', 'rgba(92, 226, 246, 1)'],
|
||||
this.$t('message.companyDiagram.qualityQuestion')
|
||||
// "质量问题数"
|
||||
)
|
||||
}
|
||||
})
|
||||
},
|
||||
//获取项目详情
|
||||
getDataDateils() {
|
||||
let data = {
|
||||
@ -1002,6 +957,7 @@ export default {
|
||||
(res) => {
|
||||
console.log(res)
|
||||
this.statisticsCount = res.result
|
||||
console.log('----------------',this.statisticsCount)
|
||||
this.totalDevNum =
|
||||
this.statisticsCount.devcount.ufaceDevNum +
|
||||
this.statisticsCount.devcount.videoNum +
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user