890 lines
35 KiB
Vue
890 lines
35 KiB
Vue
<template>
|
|
<!-- 质量管理 -->
|
|
<!-- <div class="quality">
|
|
<vue-scroll>
|
|
<img src="@/assets/images/dataBoard/8.png" style="height:auto;width:100%"/>
|
|
</vue-scroll>
|
|
</div> -->
|
|
<div 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="70">
|
|
<!-- 检查项 -->
|
|
{{$t('message.dataBoard.checkedItem')}}
|
|
</th>
|
|
<th>
|
|
<!-- 检查内容 -->
|
|
{{$t('message.dataBoard.checkedContent')}}
|
|
</th>
|
|
<th>
|
|
<!-- 检查时间 -->
|
|
{{$t('message.dataBoard.checkedTime')}}
|
|
</th>
|
|
<th width="70">
|
|
<!-- 整改人 -->
|
|
{{$t('message.dataBoard.changePeople')}}
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr v-for="(item, index) in alarmList" :key="index">
|
|
<td>
|
|
{{ item.checkItem }}
|
|
</td>
|
|
<td>{{ item.checkContent }}</td>
|
|
<td>{{ item.inspectTime }}</td>
|
|
<td>{{ item.changeUserName }}</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 v-for="(item,index) in inspectTypeNameList" :key="index" class="descItem descItem1">
|
|
<p v-if="index == 0" class="text"><i class="dot red"></i>{{item.inspectTypeName}}</p>
|
|
<p v-if="index == 1" class="text"><i class="dot purple"></i>{{item.inspectTypeName}}</p>
|
|
<p v-if="index == 2" class="text"><i class="dot green"></i>{{item.inspectTypeName}}</p>
|
|
<p class="num">{{item.num}}</p>
|
|
</div>
|
|
<!-- <div class="descItem descItem1">-->
|
|
<!-- <p class="text"><i class="dot purple"></i>月检</p>-->
|
|
<!-- <p class="num">{{}}</p>-->
|
|
<!-- </div>-->
|
|
<!-- <div class="descItem">-->
|
|
<!-- <p class="text"><i class="dot green"></i>年检</p>-->
|
|
<!-- <p class="num">{{}}</p>-->
|
|
<!-- </div>-->
|
|
</div>
|
|
<div
|
|
class="placeholderBox placeholderBox2"
|
|
v-if="inspectTypeNameList.length == 0"
|
|
>
|
|
<img src="@/assets/images/noData3.png" alt="" srcset="" />
|
|
<p>
|
|
<!-- 暂无数据 -->
|
|
{{$t('message.dataBoard.nodata')}}
|
|
</p>
|
|
</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">
|
|
{{$t('message.dataBoard.hasOne')}}<!-- 有一条 -->{{item.dutyRegion}}{{item.dangerDesc}}{{$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>
|
|
<!-- 手工录入列表 -->
|
|
<el-dialog
|
|
:modal-append-to-body="false"
|
|
:title="$t('message.dataBoard.manualEntryList')"
|
|
:visible.sync="dialogVisible"
|
|
width="1622px"
|
|
top="0px"
|
|
>
|
|
<el-table
|
|
:data="tableData"
|
|
class="tables"
|
|
style="width: 100%"
|
|
height="600px"
|
|
>
|
|
<!-- 检查类型 -->
|
|
<el-table-column prop="inspectTypeName" :label="$t('message.dataBoard.checkedType')"></el-table-column>
|
|
<!-- 检查人 -->
|
|
<el-table-column prop="createUserName" :label="$t('message.dataBoard.checkedPeople')"></el-table-column>
|
|
<!-- 问题类型 -->
|
|
<el-table-column prop="checkContent" :label="$t('message.dataBoard.problemType')"></el-table-column>
|
|
<!-- 整改人 -->
|
|
<el-table-column prop="changeUserName" :label="$t('message.dataBoard.changePeople')"></el-table-column>
|
|
<!-- 检查结果 -->
|
|
<el-table-column prop="status" :label="$t('message.dataBoard.checkedResult')">
|
|
<template slot-scope="scope">
|
|
{{scope.row.status?statusArr1[scope.row.status-1]:''}}
|
|
<!-- {{ scope.row.status == 1?'待整改': scope.row.status == 2?'待审核':scope.row.status == 3?'已闭合':'无需整改'}}-->
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
<el-pagination
|
|
class="pagerBox"
|
|
@size-change="handleSizeChange"
|
|
@current-change="handleCurrentChange"
|
|
:current-page="pageNo"
|
|
:page-sizes="$store.state.PAGESIZRS"
|
|
:page-size="pageSize"
|
|
layout="total, sizes, prev, pager, next"
|
|
:total="total2"
|
|
background
|
|
></el-pagination>
|
|
</el-dialog>
|
|
<!-- 自动识别列表 -->
|
|
<el-dialog
|
|
:modal-append-to-body="false"
|
|
:title="$t('message.dataBoard.automaticRecognitionList')"
|
|
:visible.sync="dialogVisible2"
|
|
width="1622px"
|
|
top="0px"
|
|
>
|
|
<div style="margin-bottom: 25px">
|
|
<!-- 开始日期 结束日期 -->
|
|
<el-date-picker
|
|
style="color: #6ce9f0;border: 1px solid #6ce9f0"
|
|
class="serarch_picker"
|
|
size="medium"
|
|
v-model="valueTime"
|
|
value-format="yyyy-MM-dd"
|
|
type="daterange"
|
|
range-separator="-"
|
|
:start-placeholder="$t('message.dataBoard.startDate')"
|
|
:end-placeholder="$t('message.dataBoard.endDate')">
|
|
</el-date-picker>
|
|
<el-button style="margin-left: 30px;color: #6ce9f0;border: 1px solid #6ce9f0" type="primary" plain @click="selectAllAlarmList">
|
|
<!-- 查询 -->
|
|
{{$t('message.dataBoard.query')}}
|
|
</el-button>
|
|
<el-button style="margin-left: 30px;color: #6ce9f0;border: 1px solid #6ce9f0" type="primary" plain @click="Refresh">
|
|
<!-- 刷新 -->
|
|
{{$t('message.dataBoard.fresh')}}
|
|
</el-button>
|
|
</div>
|
|
<el-table
|
|
:data="tableData"
|
|
class="tables"
|
|
style="width: 100%"
|
|
height="600px"
|
|
>
|
|
<!-- 报警类别 -->
|
|
<el-table-column prop="alarmTypeName" :label="$t('message.dataBoard.alarmCate')"></el-table-column>
|
|
<!-- 报警原因 -->
|
|
<el-table-column prop="alarmReason" :label="$t('message.dataBoard.alarmreason')"></el-table-column>
|
|
<!-- 报警时间 -->
|
|
<el-table-column prop="alarmTime" :label="$t('message.dataBoard.alarmTime')"></el-table-column>
|
|
<!-- 报警设备 -->
|
|
<el-table-column prop="devName" :label="$t('message.dataBoard.alarmDev')"></el-table-column>
|
|
</el-table>
|
|
<el-pagination
|
|
class="pagerBox"
|
|
@size-change="handleSizeChangeTwo"
|
|
@current-change="handleCurrentChangeTwo"
|
|
:current-page="pageNo"
|
|
:page-sizes="$store.state.PAGESIZRS"
|
|
:page-size="pageSize"
|
|
layout="total, sizes, prev, pager, next"
|
|
:total="total2"
|
|
background
|
|
></el-pagination>
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import echarts from 'echarts4';;
|
|
import {
|
|
selectSecurityManageStatisticsApi,
|
|
selectRectifiedSecurityManageListApi,
|
|
getNewestSecurityManageDataListApi,
|
|
getAllAlarmTotalApi,//自动总数
|
|
selectAllAlarmListApi,//自动列表,
|
|
securityManageListApi,//手动识别列表
|
|
selectInspectTypeStatisticsListApi,//按照检查类型统计检查数
|
|
selectHiddenDangerSecurityManageStatisticsApi
|
|
} from "@/assets/js/api/dataBoard"
|
|
|
|
export default {
|
|
data(){
|
|
return{
|
|
// ['无需整改','待整改','待复查','合格','不合格'],
|
|
statusArr1:this.$t('message.dataBoard.statusArr1'),
|
|
inspectTypeNameList:[],
|
|
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'),
|
|
totalNum2:0,
|
|
|
|
pageNo: 1,
|
|
pageSize: 10,
|
|
total2: 0,
|
|
tableData: [],
|
|
dialogVisible2:false,
|
|
dialogVisible:false,
|
|
valueTime:''
|
|
}
|
|
},
|
|
mounted(){
|
|
this.projectSn=this.$store.state.projectSn
|
|
console.log('this.projectSn',this.projectSn)
|
|
this.getData1()
|
|
this.getActivity()
|
|
this.getNewestData()
|
|
},
|
|
methods:{
|
|
//手动录入
|
|
handleSizeChange(val) {
|
|
this.pageSize = val;
|
|
this.securityManageList();
|
|
},
|
|
handleCurrentChange(val) {
|
|
this.pageNo = val;
|
|
this.securityManageList();
|
|
},
|
|
//自动录入
|
|
handleSizeChangeTwo(val) {
|
|
this.pageSize = val;
|
|
this.selectAllAlarmList();
|
|
},
|
|
handleCurrentChangeTwo(val) {
|
|
this.pageNo = val;
|
|
this.selectAllAlarmList();
|
|
},
|
|
//手动录入
|
|
securityManageList(){
|
|
let data = {
|
|
pageNo: this.pageNo,
|
|
pageSize: this.pageSize,
|
|
projectSn: this.projectSn,
|
|
};
|
|
securityManageListApi(data).then((res) => {
|
|
this.tableData = res.result.records
|
|
this.total2 = res.result.total
|
|
console.log(res);
|
|
})
|
|
},
|
|
//自动录入
|
|
selectAllAlarmList(){
|
|
let data = {
|
|
startTime:this.valueTime?this.valueTime[0]:"",
|
|
endTime:this.valueTime?this.valueTime[1]:"",
|
|
pageNo: this.pageNo,
|
|
pageSize: this.pageSize,
|
|
projectSn: this.projectSn,
|
|
};
|
|
selectAllAlarmListApi(data).then((res) => {
|
|
this.tableData = res.result.records
|
|
this.total2 = res.result.total
|
|
console.log(res);
|
|
})
|
|
},
|
|
Refresh(){
|
|
this.valueTime = ''
|
|
this.pageNo = 1;
|
|
this.pageSize = 10;
|
|
this.total2 = 0;
|
|
this.selectAllAlarmList()
|
|
},
|
|
selectInspectTypeStatisticsList(){
|
|
let data = {
|
|
projectSn: this.projectSn,
|
|
};
|
|
selectInspectTypeStatisticsListApi(data).then((res) => {
|
|
this.inspectTypeNameList = res.result
|
|
console.log(res);
|
|
this.createPieChart(
|
|
[
|
|
{ value: this.inspectTypeNameList[0].num, name: "" },
|
|
{
|
|
value: this.inspectTypeNameList[1].num,
|
|
name: "",
|
|
},{
|
|
value: this.inspectTypeNameList[2].num,
|
|
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.inspectTypeNameList[0].num + this.inspectTypeNameList[1].num + this.inspectTypeNameList[2].num
|
|
);
|
|
})
|
|
},
|
|
//获取数据
|
|
// selectHiddenDangerSecurityManageStatistics(){
|
|
// let data = {
|
|
// projectSn: this.projectSn,
|
|
// };
|
|
// selectHiddenDangerSecurityManageStatisticsApi(data).then((res) => {
|
|
// console.log(res);
|
|
// })
|
|
// },
|
|
getData1(){
|
|
let data = {
|
|
projectSn: this.projectSn,
|
|
};
|
|
selectHiddenDangerSecurityManageStatisticsApi(data).then((res) => {
|
|
console.log(res);
|
|
this.total = res.result.total;
|
|
this.selectInspectTypeStatisticsList()
|
|
this.getAllAlarmTotal()
|
|
// this.selectHiddenDangerSecurityManageStatistics()
|
|
// this.createPieChart(
|
|
// [
|
|
// { value: 1, name: "" },
|
|
// {
|
|
// value: 0,
|
|
// name: "",
|
|
// },
|
|
// ],
|
|
// this.$refs.ratioChart1,
|
|
// ["#557DED", "rgba(68, 215, 182, 0.2)"],
|
|
// "问题总数",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.statusArr1')[2]+this.$t('message.dataBoard.problenNum'),this.total.reviewNum
|
|
);
|
|
// "待整改问题数"
|
|
this.createPieChart(
|
|
[
|
|
{ value: 1, name: "" },
|
|
{
|
|
value: 0,
|
|
name: "",
|
|
},
|
|
],
|
|
this.$refs.ratioChart3,
|
|
["#fe6c7f", "rgba(68, 215, 182, 0.2)"],
|
|
this.$t('message.dataBoard.statusArr1')[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.statusArr')[2]+this.$t('message.dataBoard.rate')/* "闭合率" */,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)
|
|
});
|
|
},
|
|
getAllAlarmTotal(){
|
|
getAllAlarmTotalApi({projectSn:this.projectSn}).then( res => {
|
|
this.totalNum2 = res.result
|
|
this.createPieChart1()
|
|
})
|
|
},
|
|
createPieChart1(){
|
|
let that = this;
|
|
let monitor = echarts.init(this.$refs.ratioChart1);
|
|
// monitor.clear();
|
|
var option = {
|
|
color: ["rgba(254, 108, 127, 1)","rgba(120, 111, 240, 1)"],
|
|
title: {
|
|
show: true,
|
|
text: this.total.totalNum + this.totalNum2,
|
|
x: "48%",
|
|
y: "36%",
|
|
z: 5,
|
|
textAlign: "center",
|
|
textStyle: {
|
|
color: "rgba(255, 255, 255, 1)",
|
|
fontSize: 20,
|
|
},
|
|
subtext: /* '问题总数', */this.$t('message.dataBoard.questionAllCounts'),
|
|
subtextStyle: {
|
|
color: "rgba(255, 255, 255, 0.8)",
|
|
fontSize: 13,
|
|
},
|
|
},
|
|
tooltip: {
|
|
data:/* ['手工录入', '自动录入'], */this.$t('message.dataBoard.enteringStatus'),
|
|
trigger: "item",
|
|
|
|
formatter: function(a, b) {
|
|
return (
|
|
`${this.$t('message.dataBoard.enteringStatus')[0]}:${that.total.totalNum}/${((that.total.totalNum/(that.total.totalNum + that.totalNum2))*100).toFixed(2)}% </br>${this.$t('message.dataBoard.enteringStatus')[1]}: ${that.totalNum2}/${((that.totalNum2/(that.total.totalNum + that.totalNum2))*100).toFixed(2)}%`
|
|
)
|
|
}
|
|
},
|
|
grid: {
|
|
right: 0,
|
|
},
|
|
legend: {
|
|
show: false,
|
|
},
|
|
series: [
|
|
{
|
|
type: "pie",
|
|
radius: ["50%", "70%"],
|
|
avoidLabelOverlap: false,
|
|
hoverAnimation: false,
|
|
label: {
|
|
show: false,
|
|
position: "center",
|
|
},
|
|
labelLine: {
|
|
show: false,
|
|
},
|
|
data:
|
|
[
|
|
{ value: this.total.totalNum, name: this.$t('message.dataBoard.enteringStatus')[0] },
|
|
{ value: this.totalNum2, name: this.$t('message.dataBoard.enteringStatus')[1]},
|
|
],
|
|
// minAngle: 10
|
|
},
|
|
|
|
],
|
|
};
|
|
// if(color){
|
|
// option.series[0].radius=["75%", "85%"]
|
|
// option.title.x="45%"
|
|
// option.legend.show=false
|
|
// }
|
|
monitor.setOption(option);
|
|
|
|
function eConsole(param) {
|
|
if(param.dataIndex == 1){
|
|
that.dialogVisible2 = true
|
|
that.pageNo = 1;
|
|
that.pageSize = 10;
|
|
that.total2 = 0;
|
|
that.tableData = [];
|
|
that.selectAllAlarmList()
|
|
//自动录入
|
|
}else if(param.dataIndex == 0){
|
|
//手动录入
|
|
that.dialogVisible = true
|
|
that.pageNo = 1;
|
|
that.pageSize = 10;
|
|
that.total2 = 0;
|
|
that.tableData = [];
|
|
that.securityManageList()
|
|
}
|
|
}
|
|
|
|
monitor.on("click", eConsole);
|
|
},
|
|
|
|
|
|
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(){
|
|
selectRectifiedSecurityManageListApi({projectSn: this.projectSn}).then(res=>{
|
|
console.log(res);
|
|
this.activityList=res.result
|
|
})
|
|
},
|
|
//查询最新20条待整改的安全管理数据
|
|
getNewestData(){
|
|
getNewestSecurityManageDataListApi({projectSn: this.projectSn}).then(res=>{
|
|
console.log(res);
|
|
this.alarmList=res.result
|
|
})
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
<style lang="less" scoped>
|
|
.pagerBox{
|
|
margin-top: 0px;
|
|
text-align: right;
|
|
}
|
|
/*#6ce9f0*/
|
|
/deep/.el-pager{
|
|
.number{
|
|
background-color: #262D47 !important;
|
|
color: #fff !important;
|
|
}
|
|
.active{
|
|
color: #5181F6 !important;
|
|
}
|
|
.el-icon{
|
|
background-color: #262D47 !important;
|
|
color: #fff !important;
|
|
}
|
|
}
|
|
/deep/.el-range-input{
|
|
background: #262D47;
|
|
color: #ffffff;
|
|
}
|
|
/deep/.el-range-separator{
|
|
color: #ffffff;
|
|
}
|
|
/deep/.btn-prev{
|
|
color: #ffffff !important;
|
|
}
|
|
/deep/.btn-next{
|
|
color: #ffffff !important;
|
|
}
|
|
/deep/ .el-input__inner{
|
|
height: 40px;
|
|
background-color: #262D47;
|
|
color: #ffffff;
|
|
}
|
|
/deep/ .el-table{
|
|
th{
|
|
background: #192135;
|
|
color: #ffffff;
|
|
}
|
|
td{
|
|
background: #192135;
|
|
color: #ffffff;
|
|
}
|
|
}
|
|
/deep/.tables{
|
|
tr:nth-child(2n-1) td{
|
|
background: #20263E;
|
|
color: #ffffff;
|
|
}
|
|
td{
|
|
background: #20263E;
|
|
color: #ffffff;
|
|
}
|
|
}
|
|
.el-dialog__wrapper {
|
|
/deep/ .el-dialog {
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translate(-50%,-50%);
|
|
margin: 0px;
|
|
.el-dialog__body{
|
|
background: #262D47;
|
|
padding: 30px 86px;
|
|
}
|
|
.el-dialog__header{
|
|
background: #262D47;
|
|
text-align: center;
|
|
.el-dialog__title{
|
|
color: #6ce9f0;
|
|
font-size: 17px;
|
|
font-weight: 900;
|
|
.el-dialog__headerbtn{
|
|
.el-dialog__close{
|
|
color: #262D47;
|
|
}
|
|
}
|
|
}
|
|
.el-dialog__title::before{
|
|
background: #262D47;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
// .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>
|