|
@@ -1,35 +1,40 @@
|
|
|
<template>
|
|
|
<div class="trend-card">近三天报警趋势</div>
|
|
|
-
|
|
|
- <div class="home_count">
|
|
|
- <div class="ant-card-body">
|
|
|
- <div class="card-left">
|
|
|
- <img src="/src/assets/images/home/07.png" class="right-img" />
|
|
|
- <div class="left-title">前天</div>
|
|
|
- </div>
|
|
|
- <div class="card-right">
|
|
|
- <div class="echart" id="echart1"></div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="ant-card-body">
|
|
|
- <div class="card-left">
|
|
|
- <img src="/src/assets/images/home/08.png" class="right-img" />
|
|
|
- <div class="left-title">昨天</div>
|
|
|
+ <a-row>
|
|
|
+ <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="8">
|
|
|
+ <div class="ant-card-body">
|
|
|
+ <div class="card-left">
|
|
|
+ <img src="/src/assets/images/home/07.png" class="right-img" />
|
|
|
+ <div class="left-title">前天</div>
|
|
|
+ </div>
|
|
|
+ <div class="card-right">
|
|
|
+ <div class="echart" id="echart1"></div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <div class="card-right">
|
|
|
- <div class="echart" id="echart2"></div>
|
|
|
+ </a-col>
|
|
|
+ <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="8">
|
|
|
+ <div class="ant-card-body">
|
|
|
+ <div class="card-left">
|
|
|
+ <img src="/src/assets/images/home/08.png" class="right-img" />
|
|
|
+ <div class="left-title">昨天</div>
|
|
|
+ </div>
|
|
|
+ <div class="card-right">
|
|
|
+ <div class="echart" id="echart2"></div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- <div class="ant-card-body">
|
|
|
- <div class="card-left">
|
|
|
- <img src="/src/assets/images/home/09.png" class="right-img" />
|
|
|
- <div class="left-title">今天</div>
|
|
|
+ </a-col>
|
|
|
+ <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="8">
|
|
|
+ <div class="ant-card-body">
|
|
|
+ <div class="card-left">
|
|
|
+ <img src="/src/assets/images/home/09.png" class="right-img" />
|
|
|
+ <div class="left-title">今天</div>
|
|
|
+ </div>
|
|
|
+ <div class="card-right">
|
|
|
+ <div class="echart" id="echart3"></div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <div class="card-right">
|
|
|
- <div class="echart" id="echart3"></div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ </a-col>
|
|
|
+ </a-row>
|
|
|
</template>
|
|
|
|
|
|
<script setup name="SysTrendCard">
|
|
@@ -40,8 +45,6 @@
|
|
|
init()
|
|
|
})
|
|
|
|
|
|
- const data = ref([])
|
|
|
-
|
|
|
const init = () => {
|
|
|
alarmTrendApi.threeDays().then((res) => {
|
|
|
if (res && res.length > 0) {
|
|
@@ -59,7 +62,7 @@
|
|
|
}
|
|
|
|
|
|
const getEcharts1 = (val) => {
|
|
|
- let Echarts = echarts.init(document.getElementById('echart1'))
|
|
|
+ let Echarts1 = echarts.init(document.getElementById('echart1'))
|
|
|
const option = {
|
|
|
tooltip: {
|
|
|
trigger: 'axis',
|
|
@@ -141,15 +144,16 @@
|
|
|
]
|
|
|
}
|
|
|
// 绘制图表
|
|
|
- Echarts.setOption(option)
|
|
|
+ Echarts1.setOption(option)
|
|
|
// 自适应大小
|
|
|
- window.onresize = () => {
|
|
|
- Echarts.resize()
|
|
|
- }
|
|
|
+ Echarts1.resize()
|
|
|
+ window.addEventListener('resize', () => {
|
|
|
+ Echarts1.resize()
|
|
|
+ })
|
|
|
}
|
|
|
|
|
|
const getEcharts2 = (val) => {
|
|
|
- let Echarts = echarts.init(document.getElementById('echart2'))
|
|
|
+ let Echarts2 = echarts.init(document.getElementById('echart2'))
|
|
|
const option = {
|
|
|
tooltip: {
|
|
|
trigger: 'axis',
|
|
@@ -230,14 +234,15 @@
|
|
|
]
|
|
|
}
|
|
|
// 绘制图表
|
|
|
- Echarts.setOption(option)
|
|
|
+ Echarts2.setOption(option)
|
|
|
// 自适应大小
|
|
|
- window.onresize = () => {
|
|
|
- Echarts.resize()
|
|
|
- }
|
|
|
+ Echarts2.resize()
|
|
|
+ window.addEventListener('resize', () => {
|
|
|
+ Echarts2.resize()
|
|
|
+ })
|
|
|
}
|
|
|
const getEcharts3 = (val) => {
|
|
|
- let Echarts = echarts.init(document.getElementById('echart3'))
|
|
|
+ let Echarts3 = echarts.init(document.getElementById('echart3'))
|
|
|
const option = {
|
|
|
tooltip: {
|
|
|
trigger: 'axis',
|
|
@@ -318,11 +323,12 @@
|
|
|
]
|
|
|
}
|
|
|
// 绘制图表
|
|
|
- Echarts.setOption(option)
|
|
|
+ Echarts3.setOption(option)
|
|
|
// 自适应大小
|
|
|
- window.onresize = () => {
|
|
|
- Echarts.resize()
|
|
|
- }
|
|
|
+ Echarts3.resize()
|
|
|
+ window.addEventListener('resize', () => {
|
|
|
+ Echarts3.resize()
|
|
|
+ })
|
|
|
}
|
|
|
</script>
|
|
|
|
|
@@ -333,43 +339,37 @@
|
|
|
background: #ffffff;
|
|
|
}
|
|
|
|
|
|
- .home_count {
|
|
|
+ .ant-card-body {
|
|
|
width: 100%;
|
|
|
+ height: 250px;
|
|
|
+ padding: 0 20px;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ background-color: #ffffff;
|
|
|
+ border-radius: 5px;
|
|
|
display: flex;
|
|
|
- flex-wrap: wrap;
|
|
|
- justify-content: space-between;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
|
|
|
- .ant-card-body {
|
|
|
- flex: 1;
|
|
|
- width: 100%;
|
|
|
- height: 250px;
|
|
|
- padding: 0 20px;
|
|
|
- margin-bottom: 10px;
|
|
|
- box-sizing: border-box;
|
|
|
- background-color: #ffffff;
|
|
|
- border-radius: 5px;
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
-
|
|
|
- .card-left {
|
|
|
- width: 10%;
|
|
|
- text-align: center;
|
|
|
- .left-title {
|
|
|
- padding-top: 5px;
|
|
|
- }
|
|
|
+ .card-left {
|
|
|
+ width: 10%;
|
|
|
+ text-align: center;
|
|
|
+ .left-title {
|
|
|
+ padding-top: 5px;
|
|
|
}
|
|
|
+ }
|
|
|
|
|
|
- .card-right {
|
|
|
- width: 90%;
|
|
|
+ .card-right {
|
|
|
+ width: 90%;
|
|
|
+ height: 100%;
|
|
|
+ .echart {
|
|
|
+ width: 100%;
|
|
|
height: 100%;
|
|
|
- .echart {
|
|
|
- height: 100%;
|
|
|
- }
|
|
|
+ overflow: hidden;
|
|
|
}
|
|
|
}
|
|
|
- .ant-card-body:nth-child(5n) {
|
|
|
- margin-right: 0;
|
|
|
- }
|
|
|
+ }
|
|
|
+ .ant-card-body:nth-child(5n) {
|
|
|
+ margin-right: 0;
|
|
|
}
|
|
|
</style>
|