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

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