admin/zhgdyun
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

湖里大屏(质量管理)：简化问题占比代码

Browse Source
This commit is contained in:
Jack 2022-08-08 11:28:28 +08:00
parent 64bbbefa2d
commit 3fa112ccd8
1 changed files with 43 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

99
src/views/projectAdmin/dataBoard/projectHuScreen/qualityManage/leftCenter.vue
View File

@ -1,8 +1,6 @@
<template> <template>
<!-- 问题占比 --> <Card :title="title">
<div class="questionRate"> <div class="warp">
<div class="title">{{ title }}</div>
<div class="content">
<div class="chart"> <div class="chart">
<JRingChart <JRingChart
:title="{ text: 3412, subTitle: '问题总数' }" :title="{ text: 3412, subTitle: '问题总数' }"
@ -22,17 +20,18 @@
</div> </div>
</div> </div>
</div> </div>
</div> </Card>
</template> </template>
<script> <script>
import Card from '../components/Card.vue'
import JRingChart from '../jChart/pie/JRingChart.vue' import JRingChart from '../jChart/pie/JRingChart.vue'
export default { export default {
components: { JRingChart }, components: { Card, JRingChart },
props: { props: {
title: { title: {
type: String, type: String,
default: 'default title' default: ''
} }
}, },
data() { data() {
@ -42,58 +41,46 @@ export default {
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.questionRate { .warp {
width: 100%;
height: 100%; height: 100%;
border: 1px solid #0081c3; display: flex;
.title { .chart {
padding-left: 6px; width: 55%;
height: 30px; height: 100%;
line-height: 30px;
font-size: 18px;
color: #6ee4f0;
} }
.content { .count {
height: calc(100% - 30px); flex: 1;
display: flex; display: flex;
.chart { flex-direction: column;
width: 55%; justify-content: center;
height: 100%; align-items: center;
} .count-item {
.count { position: relative;
flex: 1; &::before {
display: flex; position: absolute;
flex-direction: column; left: -16px;
justify-content: center; top: 10px;
align-items: center; content: '';
.count-item { width: 6px;
position: relative; height: 6px;
&::before { border-radius: 50%;
position: absolute; }
left: -16px; &:first-child {
top: 10px; margin-bottom: 20px;
content: ''; }
width: 6px; &:first-child::before {
height: 6px; background-color: #557dee;
border-radius: 50%; }
} &:last-child::before {
&:first-child { background-color: #43d7b5;
margin-bottom: 20px; }
} .label {
&:first-child::before { margin-bottom: 8px;
background-color: #557dee; font-size: 14px;
} color: rgba(255, 255, 255, 0.7);
&:last-child::before { }
background-color: #43d7b5; .num {
} font-size: 18px;
.label {
margin-bottom: 8px;
font-size: 14px;
color: rgba(255, 255, 255, 0.7);
}
.num {
font-size: 18px;
}
} }
} }
} }