929 lines
36 KiB
Vue
929 lines
36 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="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>
|