湖里大屏(安全管理):简化隐患排查代码

This commit is contained in:
Jack 2022-08-08 10:45:00 +08:00
parent 5fd5ee9d3a
commit b18d7a807b

View File

@ -1,39 +1,37 @@
<template>
<div class="check-hidden">
<div class="title">{{ title }}</div>
<div class="content">
<div class="rates">
<div class="rate">
<div class="chart">
<JRingChart :title="{ text: '89%', y: '40%' }" :data="[{ value: 89 }, { value: 11 }]" :color="['#557DEE', '#182B53']" />
</div>
<div class="label">项目整改率</div>
<Card :title="title">
<div class="rates">
<div class="rate">
<div class="chart">
<JRingChart :title="{ text: '89%', y: '40%' }" :data="[{ value: 89 }, { value: 11 }]" :color="['#557DEE', '#182B53']" />
</div>
<div class="rate">
<div class="chart">
<JRingChart :title="{ text: '89%', y: '40%' }" :data="[{ value: 89 }, { value: 11 }]" :color="['#5BE2F6', '#193F54']" />
</div>
<div class="label">项目及时整改率</div>
<div class="label">项目整改率</div>
</div>
<div class="rate">
<div class="chart">
<JRingChart :title="{ text: '89%', y: '40%' }" :data="[{ value: 89 }, { value: 11 }]" :color="['#5BE2F6', '#193F54']" />
</div>
<div class="rate">
<div class="chart">
<JRingChart :title="{ text: '89%', y: '40%' }" :data="[{ value: 89 }, { value: 11 }]" :color="['#FF6C7F', '#39273D']" />
</div>
<div class="label">项目及时复查率</div>
<div class="label">项目及时整改率</div>
</div>
<div class="rate">
<div class="chart">
<JRingChart :title="{ text: '89%', y: '40%' }" :data="[{ value: 89 }, { value: 11 }]" :color="['#FF6C7F', '#39273D']" />
</div>
<div class="label">项目及时复查率</div>
</div>
</div>
</div>
</Card>
</template>
<script>
import Card from '../components/Card.vue'
import JRingChart from '../jChart/pie/JRingChart.vue'
export default {
components: { JRingChart },
components: { Card, JRingChart },
props: {
title: {
type: String,
default: 'default title'
default: ''
}
},
data() {
@ -43,32 +41,17 @@ export default {
</script>
<style lang="less" scoped>
.check-hidden {
width: 100%;
.rates {
height: 100%;
border: 1px solid #0081c3;
.title {
padding-left: 6px;
height: 30px;
line-height: 30px;
font-size: 18px;
color: #6ee4f0;
}
.content {
height: calc(100% - 30px);
.rates {
display: flex;
.rate {
width: 33%;
height: 70%;
.chart {
height: 100%;
display: flex;
.rate {
width: 33%;
height: 70%;
.chart {
height: 100%;
}
.label {
text-align: center;
}
}
}
.label {
text-align: center;
}
}
}