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-02 17:59:10 +08:00
parent e8c6fc28a4
commit 7d0b9cdb00
3 changed files with 47 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/views/projectAdmin/dataBoard/projectHuScreen/jChart/pie/JRingChart.vue
View File

@ -59,7 +59,7 @@ export default {
{ {
name: '', name: '',
type: 'pie', type: 'pie',
radius: ['50%', '70%'], radius: ['65%', '80%'],
avoidLabelOverlap: false, avoidLabelOverlap: false,
hoverAnimation: false, hoverAnimation: false,
label: { label: {

39
src/views/projectAdmin/dataBoard/projectHuScreen/qualityManage/centerTop.vue
View File

@ -1,10 +1,27 @@
<template> <template>
<!-- 质量问题 --> <!-- 质量问题 -->
<div class="container"> <div class="wrap">
<div class="titleTxt">{{ title }}</div> <div class="title">{{ title }}</div>
<div class="charts"> <div class="charts">
<div class="chart"> <div class="chart">
<JRingChart title="hello" subTitle="world" /> <JRingChart title="45" subTitle="问题总数" :color="['#3CABFD']" />
</div>
<div class="chart">
<JRingChart title="45" subTitle="未闭合问题" :color="['#557DEE']" />
</div>
<div class="chart">
<JRingChart title="45" subTitle="未整改问题" :color="['#FE6C7F']" />
</div>
<div class="chart">
<JRingChart
title="90%"
subTitle="即时整改问题"
:color="['#557DEE', '#43D7B5']"
:data="[
{ value: 1, name: '' },
{ value: 9, name: '' }
]"
/>
</div> </div>
</div> </div>
</div> </div>
@ -27,21 +44,25 @@ export default {
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.container { .wrap {
width: 100%; width: 100%;
height: 100%; height: 100%;
border: 1px solid #0081c3; border: 1px solid #0081c3;
.titleTxt { .title {
padding-left: 6px;
height: 30px;
line-height: 30px;
font-size: 18px; font-size: 18px;
color: #6ee4f0; color: #6ee4f0;
margin-top: 5px;
margin-left: 5px;
} }
.charts { .charts {
padding: 10px 30px 0;
display: flex;
justify-content: space-around;
.chart { .chart {
width: 300px; width: 200px;
height: 180px; height: 200px;
} }
} }
} }

28
src/views/projectAdmin/dataBoard/projectHuScreen/qualityManage/index.vue
View File

@ -1,23 +1,23 @@
<template> <template>
<!-- CIM --> <!-- CIM -->
<div class="container"> <div class="container">
<div class="leftBox"> <div class="leftBox">
<div class="leftTop"> <div class="leftTop">
<leftTop title="问题类型" /> <leftTop title="问题类型" />
</div> </div>
<div class="leftCenter"> <div class="leftCenter">
<leftCenter title="问题占比" /> <leftCenter title="问题占比" />
</div> </div>
<div class="leftBottom"> <div class="leftBottom">
<leftCenter title="频发问题" /> <leftCenter title="频发问题" />
</div> </div>
</div> </div>
<div class="centerBox"> <div class="centerBox">
<div class="centerTop"> <div class="centerTop">
<centerTop title="质量问题" /> <centerTop title="质量问题" />
</div> </div>
<div class="centerBottom"> <div class="centerBottom">
<centerTop title="问题趋势" /> <centerTop title="问题趋势" />
</div> </div>
</div> </div>
</div> </div>
@ -28,11 +28,15 @@ import leftTop from './leftTop'
import leftCenter from './leftCenter' import leftCenter from './leftCenter'
import leftBottom from './leftBottom' import leftBottom from './leftBottom'
import centerTop from './centerTop' import centerTop from './centerTop'
import centerBottom from './centerBottom'; import centerBottom from './centerBottom'
export default { export default {
components: { components: {
leftTop,leftCenter,leftBottom,centerTop,centerBottom leftTop,
}, leftCenter,
leftBottom,
centerTop,
centerBottom
}
} }
</script> </script>
@ -68,11 +72,11 @@ export default {
height: 100%; height: 100%;
margin-right: 15px; margin-right: 15px;
.centerTop { .centerTop {
height: 66%; height: 35%;
margin-bottom: 15px; margin-bottom: 15px;
} }
.centerBottom { .centerBottom {
height: 30%; height: 62%;
} }
} }
</style> </style>