1052 lines
27 KiB
Vue
1052 lines
27 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
|
|
style="
|
|
width: 68%;
|
|
display: inline-block;
|
|
margin-right: 2%;
|
|
vertical-align: middle;
|
|
"
|
|
class="blockBox blockBox2"
|
|
>
|
|
<div class="blockTitle">
|
|
<!-- 质量问题 -->
|
|
{{ $t('message.dataBoard.qualityProblem') }}
|
|
</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
|
|
style="width: 30%; display: inline-block; vertical-align: middle"
|
|
class="blockBox"
|
|
>
|
|
<div class="blockTitle">
|
|
<!-- 负责人员 -->
|
|
{{ $t('message.dataBoard.functionary') }}
|
|
</div>
|
|
<div class="blockContent">
|
|
<vue-scroll v-if="personnelList.length != 0" style="height: 100%">
|
|
<div class="personnelList" style="height: 100%">
|
|
<div
|
|
@click="
|
|
selectItem(item.inspectManId)
|
|
Selectitem2 = index
|
|
"
|
|
@mouseenter="Selectitem = index"
|
|
@mouseleave="Selectitem = ''"
|
|
v-for="(item, index) in personnelList"
|
|
class="personnelList_item"
|
|
:class="{ SelectpersonnelList_item: Selectitem === index }"
|
|
>
|
|
<span>
|
|
<!-- 负责人: -->{{ $t('message.dataBoard.principal')
|
|
}}{{ item.inspectManName }}</span
|
|
>
|
|
<span
|
|
><!-- 质量问题数: -->{{
|
|
$t('message.dataBoard.qualityProblemNum')
|
|
}}{{ item.num }}</span
|
|
>
|
|
</div>
|
|
</div>
|
|
</vue-scroll>
|
|
<div class="placeholderBox placeholderBox2" v-else>
|
|
<img src="@/assets/images/noData3.png" alt="" srcset="" />
|
|
<p>
|
|
<!-- 暂无数据 -->
|
|
{{ $t('message.dataBoard.nodata') }}
|
|
</p>
|
|
</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.problemType') }}
|
|
</div>
|
|
<div class="blockContent">
|
|
<div class="switchBox">
|
|
<span
|
|
@click="
|
|
dataType1 = 1
|
|
getData2(1)
|
|
"
|
|
:class="dataType1 == 1 ? 'active' : ''"
|
|
>
|
|
<!-- 全部 -->
|
|
{{ $t('message.dataBoard.all') }}
|
|
</span>
|
|
<span
|
|
@click="
|
|
dataType1 = 2
|
|
getData2(1)
|
|
"
|
|
:class="dataType1 == 2 ? 'active' : ''"
|
|
>
|
|
<!-- 最近30天 -->
|
|
{{ $t('message.dataBoard.lately30days') }}
|
|
</span>
|
|
</div>
|
|
<div class="ratioChart" ref="groupChart"></div>
|
|
<div class="placeholderBox placeholderBox2" v-if="noData1">
|
|
<img src="@/assets/images/noData3.png" alt="" srcset="" />
|
|
<p>
|
|
<!-- 暂无数据 -->
|
|
{{ $t('message.dataBoard.nodata') }}
|
|
</p>
|
|
</div>
|
|
</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.improtanceProblem') }}
|
|
</p>
|
|
<p class="num">{{ total.jyUrgentLevelNum }}</p>
|
|
</div>
|
|
<div class="descItem descItem1">
|
|
<p class="text">
|
|
<i class="dot purple"></i>
|
|
<!-- 严重问题 -->
|
|
{{ $t('message.dataBoard.seriousnessProblem') }}
|
|
</p>
|
|
<p class="num">{{ total.yzUrgentLevelNum }}</p>
|
|
</div>
|
|
<div class="descItem">
|
|
<p class="text">
|
|
<i class="dot green"></i>
|
|
<!-- 一般问题 -->
|
|
{{ $t('message.dataBoard.commonProblem') }}
|
|
</p>
|
|
<p class="num">{{ total.ybUrgentLevelNum }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="blockBox">
|
|
<div class="blockTitle">
|
|
<!-- 频发问题 -->
|
|
{{ $t('message.dataBoard.frequentProblem') }}
|
|
</div>
|
|
<div class="blockContent">
|
|
<div class="switchBox">
|
|
<span
|
|
@click="
|
|
dataType2 = 1
|
|
getData2(2)
|
|
"
|
|
:class="dataType2 == 1 ? 'active' : ''"
|
|
>
|
|
<!-- 全部 -->
|
|
{{ $t('message.dataBoard.all') }}
|
|
</span>
|
|
<span
|
|
@click="
|
|
dataType2 = 2
|
|
getData2(2)
|
|
"
|
|
:class="dataType2 == 2 ? 'active' : ''"
|
|
>
|
|
<!-- 最近30天 -->
|
|
{{ $t('message.dataBoard.lately30days') }}
|
|
</span>
|
|
</div>
|
|
<div class="ratioChart" ref="frequentChart"></div>
|
|
<div class="placeholderBox placeholderBox2" v-if="noData2">
|
|
<img src="@/assets/images/noData3.png" alt="" srcset="" />
|
|
<p>
|
|
<!-- 暂无数据 -->
|
|
{{ $t('message.dataBoard.nodata') }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 负责人员 -->
|
|
<el-dialog
|
|
:modal-append-to-body="false"
|
|
:title="$t('message.dataBoard.principal')"
|
|
:visible.sync="dialogVisible"
|
|
width="1622px"
|
|
top="0px"
|
|
>
|
|
<el-table
|
|
:data="tableData"
|
|
class="tables"
|
|
style="width: 100%"
|
|
height="600px"
|
|
>
|
|
<!-- 检查部位 -->
|
|
<el-table-column
|
|
prop="regionName"
|
|
:label="$t('message.dataBoard.checkedPart')"
|
|
></el-table-column>
|
|
<!-- 问题分类 -->
|
|
<el-table-column
|
|
prop="dangerItemContent"
|
|
:label="$t('message.dataBoard.problemCate')"
|
|
></el-table-column>
|
|
<el-table-column
|
|
prop="level"
|
|
:label="$t('message.dataBoard.problemLevel')"
|
|
>
|
|
<template slot-scope="scope">
|
|
<!-- '一级' '二级' '三级' '四级' -->
|
|
{{
|
|
scope.row.level == 1
|
|
? $t('message.dataBoard.oneLevel')
|
|
: scope.row.level == 2
|
|
? $t('message.dataBoard.twoLevel')
|
|
: scope.row.level == 3
|
|
? $t('message.dataBoard.threeLevel')
|
|
: $t('message.dataBoard.fourLevel')
|
|
}}
|
|
</template>
|
|
</el-table-column>
|
|
<!-- 紧急程度 -->
|
|
<el-table-column
|
|
prop="urgentLevel"
|
|
:label="$t('message.dataBoard.urgencyDegree')"
|
|
>
|
|
<template slot-scope="scope">
|
|
<!-- '一般' '严重' '紧要'-->
|
|
{{
|
|
scope.row.level == 1
|
|
? $t('message.dataBoard.urgencyDegreeList')[0]
|
|
: scope.row.level == 2
|
|
? $t('message.dataBoard.urgencyDegreeList')[1]
|
|
: $t('message.dataBoard.urgencyDegreeList')[2]
|
|
}}
|
|
</template>
|
|
</el-table-column>
|
|
<!-- 负责人(检查人) -->
|
|
<el-table-column
|
|
prop="inspectManName"
|
|
:label="$t('message.dataBoard.principalOrChecker')"
|
|
></el-table-column>
|
|
<!-- 检查时间 -->
|
|
<el-table-column
|
|
prop="inspectTime"
|
|
:label="$t('message.dataBoard.checkedTime')"
|
|
></el-table-column>
|
|
<!-- 整改时限 -->
|
|
<el-table-column
|
|
prop="changeLimitTime"
|
|
:label="$t('message.dataBoard.changeTimeLimit')"
|
|
></el-table-column>
|
|
<!-- 整改人 -->
|
|
<el-table-column
|
|
prop="changeName"
|
|
:label="$t('message.dataBoard.changePeople')"
|
|
></el-table-column>
|
|
<!-- 问题状态 -->
|
|
<el-table-column
|
|
prop="status"
|
|
:label="$t('message.dataBoard.problemStatus')"
|
|
>
|
|
<template slot-scope="scope">
|
|
<!-- 无需整改 '待整改' '待复查'-->
|
|
{{
|
|
scope.row.status == 1
|
|
? $t('message.dataBoard.statusArr1')[0]
|
|
: scope.row.status == 2
|
|
? $t('message.dataBoard.statusArr1')[1]
|
|
: scope.row.status == 3
|
|
? $t('message.dataBoard.statusArr1')[2]
|
|
: scope.row.status == 4
|
|
? $t('message.dataBoard.statusArr1')[3]
|
|
: scope.row.status == 5
|
|
? $t('message.dataBoard.statusArr1')[3]
|
|
: $t('message.dataBoard.statusArr1')[4]
|
|
}}
|
|
</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="Number(total2)"
|
|
background
|
|
></el-pagination>
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import echarts from 'echarts4'
|
|
import {
|
|
selectDangerTypeQualityCountApi,
|
|
selectQualityStatisticsApi,
|
|
selectPersonChargeQualityInspectionCountListApi,
|
|
qualityInspectionRecordListApi
|
|
} from '@/assets/js/api/dataBoard'
|
|
export default {
|
|
data() {
|
|
return {
|
|
Selectitem: '',
|
|
Selectitem2: '',
|
|
dataType1: 1,
|
|
dataType2: 1,
|
|
total: {
|
|
closeNum: 3,
|
|
investigateNum: 0,
|
|
jyUrgentLevelNum: 0,
|
|
notCloseNum: 0,
|
|
overdueNotCloseNum: 0,
|
|
rectificationNum: 0,
|
|
reviewNum: 0,
|
|
totalNum: 3,
|
|
verificationNum: 0,
|
|
ybUrgentLevelNum: 2,
|
|
yzUrgentLevelNum: 1
|
|
},
|
|
noData1: true,
|
|
noData2: true,
|
|
noData3: true,
|
|
projectSn: '',
|
|
personnelList: '',
|
|
dialogVisible: false,
|
|
inspectManId: '',
|
|
pageNo: 1,
|
|
pageSize: 10,
|
|
total2: 0,
|
|
tableData: []
|
|
}
|
|
},
|
|
mounted() {
|
|
this.projectSn = this.$store.state.projectSn
|
|
console.log('this.projectSn', this.projectSn)
|
|
this.getData1()
|
|
this.getData2(1)
|
|
this.getData2(2)
|
|
this.selectCountList()
|
|
},
|
|
methods: {
|
|
handleSizeChange(val) {
|
|
this.pageSize = val
|
|
this.qualityInspectionRecordList()
|
|
},
|
|
handleCurrentChange(val) {
|
|
this.pageNo = val
|
|
this.qualityInspectionRecordList()
|
|
},
|
|
selectItem(ID) {
|
|
this.inspectManId = ID
|
|
this.dialogVisible = true
|
|
this.qualityInspectionRecordList()
|
|
},
|
|
qualityInspectionRecordList() {
|
|
let data = {
|
|
inspectManId: this.inspectManId,
|
|
pageNo: this.pageNo,
|
|
pageSize: this.pageSize,
|
|
projectSn: this.projectSn
|
|
}
|
|
qualityInspectionRecordListApi(data).then((res) => {
|
|
this.tableData = res.result.page.records
|
|
this.total2 = res.result.page.total
|
|
console.log(res)
|
|
})
|
|
},
|
|
selectCountList() {
|
|
let data = {
|
|
projectSn: this.projectSn
|
|
}
|
|
selectPersonChargeQualityInspectionCountListApi(data).then((res) => {
|
|
this.personnelList = res.result
|
|
console.log(res)
|
|
})
|
|
},
|
|
//获取数据
|
|
getData1() {
|
|
let data = {
|
|
projectSn: this.projectSn
|
|
}
|
|
selectQualityStatisticsApi(data).then((res) => {
|
|
this.total = res.result.total
|
|
/* "问题总数" */
|
|
this.createPieChart(
|
|
[
|
|
{ value: this.total.jyUrgentLevelNum, name: '' },
|
|
{
|
|
value: this.total.yzUrgentLevelNum,
|
|
name: ''
|
|
},
|
|
{
|
|
value: this.total.ybUrgentLevelNum,
|
|
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.statusArr2')[0] +
|
|
this.$t('message.dataBoard.problenNum'),
|
|
this.total.notCloseNum
|
|
)
|
|
/* "未整改问题数" */
|
|
this.createPieChart(
|
|
[
|
|
{ value: 1, name: '' },
|
|
{
|
|
value: 0,
|
|
name: ''
|
|
}
|
|
],
|
|
this.$refs.ratioChart3,
|
|
['#fe6c7f', 'rgba(68, 215, 182, 0.2)'],
|
|
this.$t('message.dataBoard.statusArr2')[1] +
|
|
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.statusArr2')[2],
|
|
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)
|
|
})
|
|
},
|
|
getData2(opType) {
|
|
let data = {
|
|
projectSn: this.$store.state.projectSn,
|
|
opType: opType
|
|
}
|
|
if (opType == 1) {
|
|
data.selectType = this.dataType1
|
|
} else {
|
|
data.selectType = this.dataType2
|
|
}
|
|
selectDangerTypeQualityCountApi(data).then((res) => {
|
|
var arr = res.result.list
|
|
if (opType == 1) {
|
|
if (arr.length == 0) {
|
|
this.noData1 = true
|
|
} else {
|
|
this.noData1 = false
|
|
}
|
|
} else {
|
|
if (arr.length == 0) {
|
|
this.noData2 = true
|
|
} else {
|
|
this.noData2 = false
|
|
}
|
|
}
|
|
var xData = [],
|
|
yData1 = [],
|
|
yData2 = []
|
|
var total = 0
|
|
arr.forEach((element) => {
|
|
xData.push(element.dangerName)
|
|
yData1.push(element.num)
|
|
total += element.num
|
|
})
|
|
arr.forEach((element) => {
|
|
yData2.push(total)
|
|
})
|
|
if (opType == 1) {
|
|
this.createGroupChart(xData, yData1, yData2, this.$refs.groupChart)
|
|
} else {
|
|
this.createdBarCharts(xData, yData1, this.$refs.frequentChart)
|
|
}
|
|
})
|
|
},
|
|
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)
|
|
},
|
|
//班组图表
|
|
createGroupChart(xData, yData1, yData2, el, legendData) {
|
|
let monitor = echarts.init(el)
|
|
var option = {
|
|
legend: {
|
|
show: false,
|
|
align: 'left',
|
|
top: 5,
|
|
left: 0,
|
|
itemWidth: 13,
|
|
itemHeight: 5,
|
|
textStyle: {
|
|
color: '#9fa2ad'
|
|
}
|
|
},
|
|
grid: {
|
|
left: '10',
|
|
right: '10',
|
|
bottom: '10',
|
|
top: '10',
|
|
containLabel: true
|
|
},
|
|
xAxis: {
|
|
type: 'value',
|
|
axisLabel: {
|
|
textStyle: {
|
|
color: '#fff'
|
|
},
|
|
formatter: function () {
|
|
return ''
|
|
}
|
|
},
|
|
splitLine: {
|
|
show: false
|
|
},
|
|
axisLine: {
|
|
show: false
|
|
},
|
|
axisTick: {
|
|
show: false
|
|
}
|
|
},
|
|
yAxis: {
|
|
type: 'category',
|
|
axisLine: {
|
|
show: false
|
|
},
|
|
axisTick: {
|
|
show: false
|
|
},
|
|
data: xData,
|
|
axisLabel: {
|
|
textStyle: {
|
|
fontSize: 13,
|
|
color: 'white'
|
|
}
|
|
}
|
|
},
|
|
series: [
|
|
{
|
|
name: /* "出勤人数", */ this.$t(
|
|
'message.dataBoard.attendanceOrTotal'
|
|
)[0],
|
|
type: 'bar',
|
|
barWidth: 13,
|
|
data: yData1,
|
|
itemStyle: {
|
|
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
|
{ offset: 0, color: '#4A90E2' },
|
|
{ offset: 1, color: '#4ADEE2' }
|
|
]),
|
|
barBorderRadius: 3
|
|
},
|
|
label: {
|
|
show: true,
|
|
position: 'right',
|
|
color: 'white',
|
|
textStyle: {
|
|
fontSize: 15
|
|
}
|
|
}
|
|
},
|
|
{
|
|
// For shadow
|
|
name: /* "总人数", */ this.$t(
|
|
'message.dataBoard.attendanceOrTotal'
|
|
)[1],
|
|
type: 'bar',
|
|
itemStyle: {
|
|
color: 'rgba(255,255,255,0.1)',
|
|
barBorderRadius: 3
|
|
},
|
|
barGap: '-100%',
|
|
barCategoryGap: '40%',
|
|
data: yData2,
|
|
animation: false,
|
|
barWidth: 13
|
|
// label: {
|
|
// show: true,
|
|
// position: "right",
|
|
// color: "white",
|
|
// textStyle: {
|
|
// fontSize: 15,
|
|
// },
|
|
// },
|
|
}
|
|
]
|
|
}
|
|
monitor.clear()
|
|
monitor.setOption(option)
|
|
},
|
|
//年龄结构---图表
|
|
createdBarCharts(xData, yData1, el) {
|
|
let that = this
|
|
let ageChart = echarts.init(el)
|
|
// ageChart.clear();
|
|
let option = {
|
|
grid: {
|
|
top: 10,
|
|
left: 0,
|
|
bottom: 5,
|
|
right: 20,
|
|
containLabel: true
|
|
},
|
|
color: ['#FE6C7F', '#5181F6'],
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
type: 'shadow'
|
|
}
|
|
},
|
|
// legend: {
|
|
// show: false,
|
|
// align: "left",
|
|
// top: 5,
|
|
// left: 0,
|
|
// itemWidth: 13,
|
|
// itemHeight: 5,
|
|
// textStyle: {
|
|
// color: "#9fa2ad",
|
|
// },
|
|
// },
|
|
|
|
xAxis: [
|
|
{
|
|
type: 'category',
|
|
data: xData,
|
|
boundaryGap: true,
|
|
axisTick: {
|
|
show: false
|
|
},
|
|
axisLine: {
|
|
show: false
|
|
},
|
|
axisLabel: {
|
|
color: '#9fa2ad',
|
|
fontSize: 12
|
|
}
|
|
}
|
|
],
|
|
|
|
yAxis: {
|
|
type: 'value',
|
|
axisTick: {
|
|
show: false
|
|
},
|
|
axisLine: {
|
|
show: false
|
|
},
|
|
splitLine: {
|
|
lineStyle: {
|
|
type: 'dashed',
|
|
color: 'rgba(231, 233, 243, 0.2)'
|
|
}
|
|
},
|
|
axisLabel: {
|
|
color: '#9fa2ad'
|
|
}
|
|
},
|
|
series: [
|
|
{
|
|
name: /* '数量', */ this.$t('message.dataBoard.num'),
|
|
type: 'bar',
|
|
data: yData1,
|
|
barWidth: 14
|
|
}
|
|
// {
|
|
// name: legendData[1],
|
|
// type: "bar",
|
|
// data: yData2,
|
|
// barWidth: 14,
|
|
// barGap: 0.1,
|
|
// },
|
|
]
|
|
}
|
|
ageChart.clear()
|
|
ageChart.setOption(option)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style lang="less" scoped>
|
|
.pagerBox {
|
|
margin-top: 0px;
|
|
text-align: right;
|
|
}
|
|
/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/.btn-prev {
|
|
color: #ffffff !important;
|
|
}
|
|
/deep/.btn-next {
|
|
color: #ffffff !important;
|
|
}
|
|
/deep/ .el-input__inner {
|
|
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;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.personnelList_item {
|
|
box-sizing: border-box;
|
|
height: 37px;
|
|
width: 347px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
font-size: 16px;
|
|
line-height: 37px;
|
|
/*background: #17284A;*/
|
|
background: #0a2124;
|
|
border-radius: 5px;
|
|
margin-bottom: 10px;
|
|
padding: 0px 25px;
|
|
}
|
|
.SelectpersonnelList_item {
|
|
background: #17284a;
|
|
}
|
|
// .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%;
|
|
}
|
|
.switchBox {
|
|
position: absolute;
|
|
right: 15px;
|
|
top: -10px;
|
|
span {
|
|
cursor: pointer;
|
|
font-size: 13px;
|
|
&:first-child {
|
|
margin-right: 20px;
|
|
}
|
|
&.active {
|
|
color: #5bdff4;
|
|
}
|
|
}
|
|
}
|
|
</style>
|