521 lines
16 KiB
Vue
521 lines
16 KiB
Vue
<template>
|
|
<!-- 质量管理 -->
|
|
<!-- <div class="quality">
|
|
<vue-scroll>
|
|
<img src="@/assets/images/dataBoard/8.png" style="height:auto;width:100%"/>
|
|
</vue-scroll>
|
|
</div> -->
|
|
|
|
<div v-if="COMPANY != 'longguang'" class="fullHeight dataBoardIndex">
|
|
<div class="left fullHeight">
|
|
<div class="blockBox blockBox2">
|
|
<div class="blockTitle">
|
|
<!-- 安全问题 -->
|
|
{{$t('message.dataBoard.safetyProblem')}}
|
|
</div>
|
|
<div class="blockContent">
|
|
<div class="circleBox">
|
|
<div class="ratioChart" ref="ratioChart1"></div>
|
|
</div>
|
|
<div class="circleBox">
|
|
<div class="ratioChart" ref="ratioChart2"></div>
|
|
</div>
|
|
<div class="circleBox">
|
|
<div class="ratioChart" ref="ratioChart3"></div>
|
|
</div>
|
|
<div class="circleBox">
|
|
<div class="ratioChart" ref="ratioChart4"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="blockBox blockBox3" style="height:calc(66.66% - 25px)">
|
|
<div class="blockTitle">
|
|
<!-- 问题趋势 -->
|
|
{{$t('message.dataBoard.problemTrend')}}
|
|
</div>
|
|
<div class="blockContent">
|
|
<div class="lineChart" ref="lineChart"></div>
|
|
<div
|
|
class="placeholderBox placeholderBox2"
|
|
v-if="noData3"
|
|
>
|
|
<img src="@/assets/images/noData3.png" alt="" srcset="" />
|
|
<p>
|
|
<!-- 暂无数据 -->
|
|
{{$t('message.dataBoard.nodata')}}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="aside fullHeight">
|
|
<div class="blockBox">
|
|
<div class="blockTitle">
|
|
<!-- 待整改 -->
|
|
{{$t('message.dataBoard.awaitChange')}}
|
|
</div>
|
|
<div class="blockContent alarmBlockContent">
|
|
<vue-scroll>
|
|
<table class="greenTable">
|
|
<thead>
|
|
<tr>
|
|
<th width="150">
|
|
<!-- 检查项 -->
|
|
{{$t('message.dataBoard.checkedItem')}}
|
|
</th>
|
|
<th>
|
|
<!-- 检查内容 -->
|
|
{{$t('message.dataBoard.checkedContent')}}
|
|
</th>
|
|
<th>
|
|
<!-- 检查时间 -->
|
|
{{$t('message.dataBoard.checkedTime')}}
|
|
</th>
|
|
<th>
|
|
<!-- 整改人 -->
|
|
{{$t('message.dataBoard.changePeople')}}
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr v-for="(item, index) in alarmList" :key="index">
|
|
<td>
|
|
{{ item.checkPoints }}
|
|
</td>
|
|
<td>{{ item.checkContent }}</td>
|
|
<td>{{ item.checkTime }}</td>
|
|
<td>{{ item.rectifyPeopleAme }}</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<div
|
|
class="placeholderBox placeholderBox2"
|
|
v-if="alarmList.length == 0"
|
|
>
|
|
<img src="@/assets/images/noData3.png" alt="" srcset="" />
|
|
<p>
|
|
<!-- 暂无数据 -->
|
|
{{$t('message.dataBoard.nodata')}}
|
|
</p>
|
|
</div>
|
|
</vue-scroll>
|
|
</div>
|
|
</div>
|
|
<div class="blockBox">
|
|
<div class="blockTitle">
|
|
<!-- 问题占比 -->
|
|
{{$t('message.dataBoard.problemRatio')}}
|
|
</div>
|
|
<div class="blockContent">
|
|
<div class="safeTrainChart" ref="safeTrainChart"></div>
|
|
<div class="descBox fullHeight">
|
|
<div>
|
|
<div class="descItem descItem1">
|
|
<p class="text"><i class="dot red"></i>
|
|
<!-- 周检 -->
|
|
{{$t('message.dataBoard.weekChecked')}}
|
|
</p>
|
|
<p class="num">{{total.weekInspectNum}}</p>
|
|
</div>
|
|
<div class="descItem descItem1">
|
|
<p class="text"><i class="dot purple"></i>
|
|
<!-- 月检 -->
|
|
{{$t('message.dataBoard.monthChecked')}}
|
|
</p>
|
|
<p class="num">{{total.monthInspectNum}}</p>
|
|
</div>
|
|
<div class="descItem">
|
|
<p class="text"><i class="dot green"></i>
|
|
<!-- 其他 -->
|
|
{{$t('message.dataBoard.elseChecked')}}
|
|
</p>
|
|
<p class="num">{{total.otherInspectNum}}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="blockBox">
|
|
<div class="blockTitle">
|
|
<!-- 整改动态 -->
|
|
{{$t('message.dataBoard.changeDynamic')}}
|
|
</div>
|
|
<div class="blockContent">
|
|
<vue-scroll>
|
|
<ul class="greenTable dynamicList">
|
|
<li v-for="(item,index) in activityList" :key="index">
|
|
{{item.rectifyPeopleAme}}<!-- 有一条 -->{{$t('message.dataBoard.hasOne')}}{{statusArr[item.state-1]}}{{$t('message.dataBoard.problen')}}<!-- 的问题 -->
|
|
</li>
|
|
</ul>
|
|
<!-- <table class="greenTable">
|
|
<thead>
|
|
<tr>
|
|
<th>
|
|
{{ $t("message.environmentalOverview.table2.th1") }}
|
|
</th>
|
|
<th>
|
|
{{ $t("message.environmentalOverview.table2.th2") }}
|
|
</th>
|
|
<th>
|
|
{{ $t("message.environmentalOverview.table2.th3") }}
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr v-for="(item, index) in alarmList" :key="index">
|
|
<td>
|
|
{{ item.deviceName }}
|
|
</td>
|
|
<td>{{ item.alarmTime }}</td>
|
|
<td>{{ item.alarmTypeName }}</td>
|
|
</tr>
|
|
</tbody>
|
|
</table> -->
|
|
<div
|
|
class="placeholderBox placeholderBox2"
|
|
v-if="activityList.length == 0"
|
|
>
|
|
<img src="@/assets/images/noData3.png" alt="" srcset="" />
|
|
<p>
|
|
<!-- 暂无数据 -->
|
|
{{$t('message.dataBoard.nodata')}}
|
|
</p>
|
|
</div>
|
|
</vue-scroll>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<SecureTwo v-else></SecureTwo>
|
|
</template>
|
|
<script>
|
|
import echarts from 'echarts4';;
|
|
import {selectSecurityManageStatisticsApi,selectRectifiedSecurityManageList2Api,
|
|
getNewestSecurityManageDataList2Api} from "@/assets/js/api/dataBoard"
|
|
import SecureTwo from "./secureTwo";
|
|
export default {
|
|
data(){
|
|
return{
|
|
dataType1:1,
|
|
dataType2:1,
|
|
total:{
|
|
closeNum: 0,
|
|
monthInspectNum: 0,
|
|
notRectificationNum: 0,
|
|
otherInspectNum: 0,
|
|
rectificationNum: 1,
|
|
reviewedNum: 0,
|
|
totalNum: 1,
|
|
weekInspectNum: 1
|
|
},
|
|
noData1:true,
|
|
noData2:true,
|
|
noData3:true,
|
|
projectSn:'',
|
|
alarmList:[],
|
|
activityList:[],
|
|
statusArr:this.$t('message.dataBoard.statusArr'),
|
|
COMPANY:""
|
|
}
|
|
},
|
|
components: {
|
|
SecureTwo,
|
|
},
|
|
created(){
|
|
this.COMPANY = COMPANY
|
|
console.log(COMPANY);
|
|
},
|
|
mounted(){
|
|
this.projectSn=this.$store.state.projectSn
|
|
console.log('this.projectSn',this.projectSn)
|
|
this.getData1()
|
|
this.getActivity()
|
|
this.getNewestData()
|
|
},
|
|
methods:{
|
|
//获取数据
|
|
getData1(){
|
|
let data = {
|
|
projectSn: this.projectSn,
|
|
};
|
|
selectSecurityManageStatisticsApi(data).then((res) => {
|
|
|
|
this.total = res.result.total;
|
|
this.createPieChart(
|
|
[
|
|
{ value: this.total.weekInspectNum, name: "" },
|
|
{
|
|
value: this.total.monthInspectNum,
|
|
name: "",
|
|
},{
|
|
value: this.total.otherInspectNum,
|
|
name: "",
|
|
},
|
|
],
|
|
this.$refs.safeTrainChart,
|
|
["rgba(254, 108, 127, 1)","rgba(120, 111, 240, 1)", "rgba(68, 215, 182, 1)"],
|
|
this.$t('message.dataBoard.questionAllCounts') /* "问题总数" */,this.total.totalNum
|
|
);
|
|
this.createPieChart(
|
|
[
|
|
{ value: 1, name: "" },
|
|
{
|
|
value: 0,
|
|
name: "",
|
|
},
|
|
|
|
],
|
|
this.$refs.ratioChart1,
|
|
["#557DED", "rgba(68, 215, 182, 0.2)"],
|
|
this.$t('message.dataBoard.questionAllCounts')/* "问题总数" */,this.total.totalNum
|
|
);
|
|
this.createPieChart(
|
|
[
|
|
{ value: 1, name: "" },
|
|
{
|
|
value: 0,
|
|
name: "",
|
|
},
|
|
],
|
|
this.$refs.ratioChart2,
|
|
["#7718fe", "rgba(68, 215, 182, 0.2)"],
|
|
this.$t('message.dataBoard.statusArr')[1]+this.$t('message.dataBoard.problenNum') /* "待审核问题数" */,this.total.reviewedNum
|
|
);
|
|
this.createPieChart(
|
|
[
|
|
{ value: 1, name: "" },
|
|
{
|
|
value: 0,
|
|
name: "",
|
|
},
|
|
],
|
|
this.$refs.ratioChart3,
|
|
["#fe6c7f", "rgba(68, 215, 182, 0.2)"],
|
|
/* "待整改问题数" */this.$t('message.dataBoard.statusArr')[0]+this.$t('message.dataBoard.problenNum'),this.total.rectificationNum
|
|
);
|
|
var ratioNum = this.total.totalNum?((this.total.closeNum/this.total.totalNum)*100).toFixed(2):0
|
|
this.createPieChart(
|
|
[
|
|
{ value: ratioNum, name: "" },
|
|
{
|
|
value: 100-ratioNum,
|
|
name: "",
|
|
},
|
|
],
|
|
this.$refs.ratioChart4,
|
|
["rgba(68, 215, 182, 1)", "rgba(68, 215, 182, 0.2)"],
|
|
this.$t('message.dataBoard.onTimeChangeRate') /* "及时整改率" */,ratioNum+'%'
|
|
);
|
|
var arr = res.result.monthList
|
|
var xData=[],yData1=[]
|
|
if(arr.length>0){
|
|
arr.forEach(element => {
|
|
var date = element.titleName.substr(5,element.titleName.length)
|
|
xData.push(date)
|
|
yData1.push(element.num)
|
|
});
|
|
this.noData3=false
|
|
}else{
|
|
this.noData3=true
|
|
}
|
|
this.createLineChart(xData,yData1)
|
|
});
|
|
},
|
|
|
|
createPieChart(data, div, color, title,total) {
|
|
let that = this;
|
|
let monitor = echarts.init(div);
|
|
// monitor.clear();
|
|
var option = {
|
|
color: color ? color : ["#5181F6", "#61D2B9", "#F67F51", "#7851F6"],
|
|
title: {
|
|
show: true,
|
|
text: total,
|
|
x: "48%",
|
|
y: "36%",
|
|
z: 5,
|
|
textAlign: "center",
|
|
textStyle: {
|
|
color: "rgba(255, 255, 255, 1)",
|
|
fontSize: 20,
|
|
},
|
|
subtext: title,
|
|
subtextStyle: {
|
|
color: "rgba(255, 255, 255, 0.8)",
|
|
fontSize: 13,
|
|
},
|
|
},
|
|
grid: {
|
|
right: 0,
|
|
},
|
|
legend: {
|
|
show: false,
|
|
},
|
|
// tooltip: {
|
|
// // data: ['在线', '离线'],
|
|
// trigger: "item",
|
|
// formatter: "{a} <br/>{b}: {c} ({d}%)",
|
|
// },
|
|
series: [
|
|
{
|
|
name: "",
|
|
type: "pie",
|
|
radius: ["50%", "70%"],
|
|
avoidLabelOverlap: false,
|
|
hoverAnimation: false,
|
|
label: {
|
|
show: false,
|
|
position: "center",
|
|
},
|
|
|
|
labelLine: {
|
|
show: false,
|
|
},
|
|
data: data,
|
|
},
|
|
],
|
|
};
|
|
// if(color){
|
|
// option.series[0].radius=["75%", "85%"]
|
|
// option.title.x="45%"
|
|
// option.legend.show=false
|
|
// }
|
|
monitor.setOption(option);
|
|
},
|
|
createLineChart(xData,yData1){
|
|
let monitor = echarts.init(this.$refs.lineChart);
|
|
var option = option = {
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
position: function (pt) {
|
|
return [pt[0], '10%'];
|
|
}
|
|
},
|
|
grid: {
|
|
top: 30,
|
|
left: 20,
|
|
bottom: 20,
|
|
right: 20,
|
|
containLabel: true,
|
|
},
|
|
xAxis: {
|
|
boundaryGap: false,
|
|
type: 'category',
|
|
data: xData,
|
|
axisTick:{
|
|
show:false
|
|
},
|
|
axisLine:{
|
|
show:false
|
|
},
|
|
axisLabel: {
|
|
color: "#9fa2ad",
|
|
fontSize: 12,
|
|
},
|
|
},
|
|
yAxis: {
|
|
type: 'value',
|
|
splitLine:{
|
|
lineStyle:{
|
|
type: "dashed",
|
|
color: "rgba(231, 233, 243, 0.2)",
|
|
|
|
}
|
|
},
|
|
axisLine:{
|
|
show:false
|
|
},
|
|
axisLabel: {
|
|
color: "#9fa2ad",
|
|
},
|
|
},
|
|
color:['rgba(248, 195, 21, 1)'],
|
|
series: [{
|
|
name:/* '问题数', */this.$t('message.dataBoard.problenNum'),
|
|
data: yData1,
|
|
type: 'line',
|
|
smooth: true,
|
|
symbolSize:0,
|
|
areaStyle: {
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
|
offset: 0,
|
|
color: 'rgba(248, 195, 21, 0.3)'
|
|
}, {
|
|
offset: 1,
|
|
color: 'rgba(248, 195, 21, 0)'
|
|
}])
|
|
},
|
|
}]
|
|
};
|
|
monitor.setOption(option);
|
|
},
|
|
//获取动态
|
|
getActivity(){
|
|
selectRectifiedSecurityManageList2Api({projectSn: this.projectSn}).then(res=>{
|
|
this.activityList=res.result
|
|
})
|
|
},
|
|
//查询最新20条待整改的安全管理数据
|
|
getNewestData(){
|
|
getNewestSecurityManageDataList2Api({projectSn: this.projectSn}).then(res=>{
|
|
this.alarmList=res.result
|
|
})
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
<style lang="less" scoped>
|
|
// .quality{
|
|
// height: 100%;
|
|
// width:100%;
|
|
// text-align: center;
|
|
// }
|
|
.safeTrainChart {
|
|
width: 50%;
|
|
height: 100%;
|
|
float: left;
|
|
}
|
|
.lineChart{
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.circleBox{
|
|
width: 25%;
|
|
float: left;
|
|
text-align: center;
|
|
height: 100%;
|
|
}
|
|
.circleInner{
|
|
border: 16px solid #557DED;
|
|
width: 120px;
|
|
height: 120px;
|
|
border-radius: 50%;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
text-align: center;
|
|
.num{
|
|
color: white;
|
|
font-size: 24px;
|
|
margin-bottom: 5px;
|
|
}
|
|
.text{
|
|
font-size: 12px;
|
|
}
|
|
&.purple{
|
|
border-color: rgba(119, 24, 254, 1);
|
|
}
|
|
&.red{
|
|
border-color: rgba(254, 108, 127, 1);
|
|
}
|
|
}
|
|
.ratioChart{
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
.dynamicList{
|
|
text-align: center;
|
|
}
|
|
</style>
|