<template>
<div class="rightBottomWarp">
<!-- 标题-->
<div class="common-index-part-title">
<common-title title="检验周期">
<div slot="title-right">
</div>
</common-title>
</div>
<!-- 内容-->
<div class="common-index-part-content"
v-loading="isLoading"
element-loading-text="拼命加载中"
element-loading-background="rgba(0, 0, 0, 0.2)"
>
<!-- 图表-->
<div style="height: 50%;">
<div id="rightBottomChart" style="height: 100%;"></div>
</div>
<div style="height: 50%;">
<process :data="dataList"></process>
</div>
</div>
</div>
</template>
<script>
import process from '../../../common/process.vue'
import { examineCycleStatistics } from '@/api/statistic/index.js'
export default {
name: 'rightBottomWarp',
components: {process},
data () {
return {
isLoading: false,
chartData: [],
chart: null,
dataList: [],
}
},
mounted () {
this.getData()
},
methods: {
showDetail () {
},
getData () {
examineCycleStatistics().then(res=>{
var data = res.data.data
var val = ''
var list = []
data.map(item=>{
if (item.name == 'total') {
val = item.process
} else {
list.push(item)
}
})
this.dataList = list
this.initEchart(val)
})
},
initEchart (val) {
var option = {
backgroundColor: 'transparent',
title: {
text: '平均检验周期',
x: 'center',
y: '45%',
textStyle: {
fontSize: 14,
color: '#02fbff',
},
subtext: val,
subtextStyle: {
fontSize: 20,
color: '#02fbff',
},
},
series: [
{
type: 'gauge',
radius: '115%',
center: ['50%', '60%'],
z: 1,
min: 0,
max: 31,
startAngle: 218,
endAngle: -38,
// 进度的颜色
axisLine: {
roundCap: false,
lineStyle: {
width: 15,
color: [
[0.015, '#fff'],
[0.016, '#212d5f'],
[0.995, '#212d5f'],
[1, '#01faff'],
],
},
},
progress: {
show: false,
},
tooltip: {
show: false,
},
axisLabel: {
show: false,
},
axisTick: {
show: false,
},
splitLine: {
show: false,
},
pointer: {
length: '0',
width: 0,
},
},
{
type: 'gauge',
startAngle: 216,
endAngle: -36,
radius: '115%',
center: ['50%', '60%'],
min: 0,
max: 31,
z: 3,
// 外层圈
axisLine: {
roundCap: false,
lineStyle: {
width: 16,
color: [
[1, '#212d5f'],
],
},
},
pointer: {
length: '0',
width: 0,
},
progress: {
show: true,
roundCap: false,
width: 15,
itemStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: val / 30 / 1000,
color: '#01faff',
},
{
offset: 1,
color: '#1d9dff',
},
],
},
},
},
// 小刻度
axisTick: {
show: false,
},
// 大刻度
splitLine: {
show: false,
},
axisLabel: {
show: false,
formatter: (e) => {
if (e) {
return e
}
},
color: 'orange',
},
// 百分比
detail: {
show: false,
},
data: [
{
value: val,
},
],
},
{
type: 'pie',
radius: '80%',
center: ['50%', '60%'],
animation: false, // 此处的动画禁用是为了防止指针在初始化时候露出来尾巴
color: ['#1a3553', '#1a3553'],
startAngle: 180,
endAngle: 0,
silent: true,
label: {
normal: {
position: 'center',
},
},
labelLine: {
show: false,
},
data: [
{
value: 80,
itemStyle: {
shadowColor: 'rgba(29,157,255, .8)', // 阴影
shadowBlur: 2,
shadowOffsetY: -2,
},
},
{ value: 80 },
],
},
],
}
this.chart = this.$echarts.init(
document.getElementById('rightBottomChart')
)
this.chart.setOption(option, true)
},
},
}
</script>
进度条
<template>
<div class="process">
<div class="process-wrap scroll-hide">
<div class="process-part" v-for="(item, index) in data" :key="`chartData-${index}`">
<div class="process-part-chart">
<div class="process-part-chart-name">{{ item.name }}</div>
<div class="process-part-chart-wrap">
<div class="process-part-chart-wrap-progress" :style="{width: item.process + '%'}">
<div class="process-part-chart-wrap-progress-img"></div>
</div>
</div>
<div class="process-part-chart-num">{{ item.value }} 次</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
props: {
data: {
type: Array,
default: ()=>[],
},
},
data () {
return {
// listData: [
// {
// name: '台州市',
// progress: '90%',
// value: '22',
// },
// ],
}
},
}
</script>
<style scoped lang="scss">
.process {
width: 100%;
height: 100%;
padding: 12px 0;
&-wrap {
width: 100%;
height: 100%;
overflow-y: auto;
}
&-part {
width: 100%;
height: calc(100% / 5);
margin-bottom: 10px;
transition: all 0.28s;
cursor: pointer;
box-sizing: border-box;
&:hover {
padding: 0 10px;
.process-part-chart-wrap {
border-color: #fff;
}
}
&-chart {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
&-name {
margin-bottom: 4px;
font-size: 14px;
color: #FFFFFF;
width: 15%;
text-align: left;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
&-wrap {
position: relative;
width: 73%;
height: 20px;
// border: 1px solid rgba(255, 255, 255, 0.4);
background: #283b4a;
&-line {
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 0;
width: 100%;
height: 1px;
border: 1px solid #19B1FB;
background: #072B3C;
}
&-progress {
position: absolute;
top: 50%;
transform: translateY(-50%);
max-width: 85%;
height: 8px;
background: linear-gradient(62deg, #00B4FF 0%, #80D0C7 100%);
transition: width 5s linear;
@keyframes progressAni {
0% {
width: 0;
}
100% {
width: 100%;
}
}
&::after {
content: " ";
display: inline-block;
position: absolute;
right: 0px;
top: -5px;
width: 4px;
height: 18px;
background: #fff;
}
}
}
&-num {
width: 12%;
font-size: 16px;
font-weight: bold;
text-align: right;
color: #19B1FB;
}
}
}
}
::-webkit-scrollbar {
width:0px;
}
</style>
