87 lines
1.8 KiB
Vue
87 lines
1.8 KiB
Vue
|
<template>
|
||
|
|
<Card title="今日报警统计">
|
||
|
|
<div class="contentBox">
|
||
|
|
<div class="chart">
|
||
|
|
<JNestedRingChart
|
||
|
|
:title="{ text: '27', subTitle: '质量问题数' }"
|
||
|
|
:series="series"
|
||
|
|
:legend="{ show: false }"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
<div class="right">
|
||
|
|
<span class="point"></span>
|
||
|
|
<span>扬尘噪声报警<p class="num">13</p></span>
|
||
|
|
|
||
|
|
<span class="point point2"></span>
|
||
|
|
<span>PM2.5超标报警</span>
|
||
|
|
<div class="num">14</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</Card>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import Card from "../components/Card.vue";
|
||
|
|
import JNestedRingChart from "../../common/jChart/pie/JNestedRingChart.vue";
|
||
|
|
export default {
|
||
|
|
components: { Card, JNestedRingChart },
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
series: [
|
||
|
|
{
|
||
|
|
roseType: "area",
|
||
|
|
radius: ["60%", "65%"],
|
||
|
|
color: ["#182337", "#47939a"],
|
||
|
|
data: [50, 50],
|
||
|
|
startAngle:90,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
radius: ["70%", "82%"],
|
||
|
|
color: ["#65d3d8", "#e5612a"],
|
||
|
|
startAngle:90,
|
||
|
|
data: [
|
||
|
|
{ value: 13, name: "扬尘噪声报警" },
|
||
|
|
{ value: 14, name: "PM2.5超标报警" }
|
||
|
|
]
|
||
|
|
},
|
||
|
|
]
|
||
|
|
};
|
||
|
|
}
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="less" scoped>
|
||
|
|
.contentBox {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
.chart {
|
||
|
|
box-sizing: border-box;
|
||
|
|
// padding-top: 20px;
|
||
|
|
height: 100%;
|
||
|
|
width: 50%;
|
||
|
|
}
|
||
|
|
.right {
|
||
|
|
flex: 1;
|
||
|
|
margin-top: 30px;
|
||
|
|
.point {
|
||
|
|
width: 8px;
|
||
|
|
height: 8px;
|
||
|
|
border-radius: 50%;
|
||
|
|
display: inline-block;
|
||
|
|
background-color: #fb6a2e;
|
||
|
|
margin-right: 15px;
|
||
|
|
}
|
||
|
|
.point2{
|
||
|
|
background-color: #65d3d8;
|
||
|
|
}
|
||
|
|
.num{
|
||
|
|
color: #d2a104;
|
||
|
|
margin: 5px 0px 30px 25px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|