大屏(质量管理)：重构其他组件
This commit is contained in:
Jack
parent
e1f8328711
commit
3a8e0ebb8c
744
src/views/projectAdmin/dataBoard/quality/NotLongGuang.vue
Normal file
744
src/views/projectAdmin/dataBoard/quality/NotLongGuang.vue
Normal file
@ -0,0 +1,744 @@
|
||||
<template>
|
||||
<div class="fullHeight dataBoardIndex">
|
||||
<div class="left fullHeight">
|
||||
<div 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 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>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import echarts from 'echarts4'
|
||||
import { selectDangerTypeQualityCountApi, selectQualityStatisticsApi } from '@/assets/js/api/dataBoard'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
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: ''
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.projectSn = this.$store.state.projectSn
|
||||
console.log('this.projectSn', this.projectSn)
|
||||
this.getData1()
|
||||
this.getData2(1)
|
||||
this.getData2(2)
|
||||
console.log(this)
|
||||
},
|
||||
methods: {
|
||||
//获取数据
|
||||
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
|
||||
// if(!div){
|
||||
// return
|
||||
// }
|
||||
console.log(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) {
|
||||
// if(!this.$refs.lineChart){
|
||||
// return
|
||||
// }
|
||||
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) {
|
||||
// if(!el){
|
||||
// return
|
||||
// }
|
||||
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
|
||||
// if(!el){
|
||||
// return
|
||||
// }
|
||||
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>
|
||||
// .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>
|
||||
@ -1,763 +1,21 @@
|
||||
<template>
|
||||
<div v-if="COMPANY != 'longguang'" class="fullHeight dataBoardIndex">
|
||||
<div class="left fullHeight">
|
||||
<div 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 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>
|
||||
</div>
|
||||
<NotLongGuang v-if="COMPANY != 'longguang'"></NotLongGuang>
|
||||
<LongGuang v-else></LongGuang>
|
||||
</template>
|
||||
<script>
|
||||
import echarts from 'echarts4'
|
||||
import { selectDangerTypeQualityCountApi, selectQualityStatisticsApi } from '@/assets/js/api/dataBoard'
|
||||
import LongGuang from './LongGuang'
|
||||
import NotLongGuang from './NotLongGuang'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
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: '',
|
||||
COMPANY: ''
|
||||
}
|
||||
},
|
||||
components: {
|
||||
LongGuang
|
||||
},
|
||||
components: { LongGuang, NotLongGuang },
|
||||
created() {
|
||||
this.COMPANY = COMPANY
|
||||
console.log(COMPANY)
|
||||
},
|
||||
mounted() {
|
||||
// if (COMPANY) {
|
||||
//
|
||||
// }
|
||||
|
||||
this.projectSn = this.$store.state.projectSn
|
||||
console.log('this.projectSn', this.projectSn)
|
||||
this.getData1()
|
||||
this.getData2(1)
|
||||
this.getData2(2)
|
||||
console.log(this)
|
||||
},
|
||||
// updated() {
|
||||
// this.getData1();
|
||||
// this.getData2(1);
|
||||
// this.getData2(2);
|
||||
// },
|
||||
methods: {
|
||||
//获取数据
|
||||
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
|
||||
// if(!div){
|
||||
// return
|
||||
// }
|
||||
console.log(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) {
|
||||
// if(!this.$refs.lineChart){
|
||||
// return
|
||||
// }
|
||||
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) {
|
||||
// if(!el){
|
||||
// return
|
||||
// }
|
||||
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
|
||||
// if(!el){
|
||||
// return
|
||||
// }
|
||||
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)
|
||||
data() {
|
||||
return {
|
||||
COMPANY: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
</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%;
|
||||
}
|
||||
.switchBox {
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
top: -10px;
|
||||
span {
|
||||
cursor: pointer;
|
||||
font-size: 13px;
|
||||
&:first-child {
|
||||
margin-right: 20px;
|
||||
}
|
||||
&.active {
|
||||
color: #5bdff4;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style lang="less" scoped></style>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user