This commit is contained in:
parent
912d0fb4f7
commit
e88e3c2f84
|
|
@ -5,17 +5,19 @@
|
|||
<el-card class="card-box">
|
||||
<div class="title-tip">
|
||||
<i class="el-icon-pie-chart icon-tip" />
|
||||
<span>数据总览</span>
|
||||
<span
|
||||
>数据总览 <span class="left-tip">平台设备总数:{{ dataAll.totalSum }}</span></span
|
||||
>
|
||||
</div>
|
||||
<!-- 饼图 -->
|
||||
<div style="display: flex; justify-content: center">
|
||||
<div ref="chartRef" style="width: 490px; height: 280px"></div>
|
||||
<div ref="chartRef" style="width: 490px; height: 300px"></div>
|
||||
</div>
|
||||
<div style="display: flex; justify-content: space-between; margin-top: 15px">
|
||||
<!-- <div style="display: flex; justify-content: space-between; margin-top: 15px">
|
||||
<div class="left-tip">平台设备总数(不包含退役装备):{{ dataAll.totalSum }}</div>
|
||||
<div class="left-tip">装备总数:{{ dataAll.maNum }}</div>
|
||||
<div class="left-tip">工具总数:{{ dataAll.toolNum }}</div>
|
||||
</div>
|
||||
</div> -->
|
||||
</el-card>
|
||||
</div>
|
||||
|
||||
|
|
@ -353,6 +355,21 @@ export default {
|
|||
const chart = echarts.init(chartDom)
|
||||
|
||||
const option = {
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: (params) => {
|
||||
return `
|
||||
<div style="text-align:center;">
|
||||
<div style="font-size:14px;font-weight:600;">
|
||||
${params.name}
|
||||
</div>
|
||||
<div style="margin-top:4px;font-size:12px;color:#666;">
|
||||
数量:${params.value}
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
orient: 'horizontal',
|
||||
bottom: 0,
|
||||
|
|
@ -498,6 +515,7 @@ export default {
|
|||
gap: 20px;
|
||||
margin-bottom: 10px;
|
||||
.top-item {
|
||||
width: 33%;
|
||||
flex: 1;
|
||||
}
|
||||
.left-tip {
|
||||
|
|
|
|||
|
|
@ -5,17 +5,19 @@
|
|||
<el-card class="card-box">
|
||||
<div class="title-tip">
|
||||
<i class="el-icon-pie-chart icon-tip" />
|
||||
<span>数据总览</span>
|
||||
<span
|
||||
>数据总览 <span class="left-tip">平台设备总数:{{ dataAll.totalSum }}</span></span
|
||||
>
|
||||
</div>
|
||||
<!-- 饼图 -->
|
||||
<div style="display: flex; justify-content: center">
|
||||
<div ref="chartRef" style="width: 490px; height: 270px"></div>
|
||||
<div ref="chartRef" style="width: 490px; height: 300px"></div>
|
||||
</div>
|
||||
<div style="display: flex; justify-content: space-between; margin-top: 15px">
|
||||
<!-- <div style="display: flex; justify-content: space-between; margin-top: 15px">
|
||||
<div class="left-tip">平台设备总数(不包含退役装备):{{ dataAll.totalSum }}</div>
|
||||
<div class="left-tip">装备总数:{{ dataAll.maNum }}</div>
|
||||
<div class="left-tip">工具总数:{{ dataAll.toolNum }}</div>
|
||||
</div>
|
||||
</div> -->
|
||||
</el-card>
|
||||
</div>
|
||||
|
||||
|
|
@ -76,7 +78,13 @@
|
|||
<span>实时事件</span>
|
||||
</div>
|
||||
<!-- 滚动列表 -->
|
||||
<div class="scroll-wrapper" :class="{ 'is-hover': isHover}" ref="wrap" @mouseenter="pause" @mouseleave="resume">
|
||||
<div
|
||||
class="scroll-wrapper"
|
||||
:class="{ 'is-hover': isHover }"
|
||||
ref="wrap"
|
||||
@mouseenter="pause"
|
||||
@mouseleave="resume"
|
||||
>
|
||||
<ul class="scroll-list" ref="list">
|
||||
<li v-for="(item, index) in eventList" :key="item.id" :class="{ odd: index % 2 === 1 }">
|
||||
<div style="display: flex; align-items: center; justify-content: space-between">
|
||||
|
|
@ -129,7 +137,7 @@
|
|||
</el-table-column>
|
||||
</el-table>
|
||||
<!-- 柱状图 -->
|
||||
<div v-else ref="barRef" style="width: 100%; height: 340px; margin-top: 20px"></div>
|
||||
<div v-else ref="barRef" style="width: 100%; height: calc(100vh - 580px); margin-top: 20px"></div>
|
||||
</el-card>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -259,6 +267,21 @@ export default {
|
|||
const chart = echarts.init(chartDom)
|
||||
|
||||
const option = {
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: (params) => {
|
||||
return `
|
||||
<div style="text-align:center;">
|
||||
<div style="font-size:14px;font-weight:600;">
|
||||
${params.name}
|
||||
</div>
|
||||
<div style="margin-top:4px;font-size:12px;color:#666;">
|
||||
数量:${params.value}
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
orient: 'horizontal',
|
||||
bottom: 0,
|
||||
|
|
@ -403,6 +426,7 @@ export default {
|
|||
gap: 20px;
|
||||
margin-bottom: 10px;
|
||||
.top-item {
|
||||
width: 33%;
|
||||
flex: 1;
|
||||
}
|
||||
.left-tip {
|
||||
|
|
@ -416,7 +440,7 @@ export default {
|
|||
.card-box {
|
||||
width: 100%;
|
||||
border-radius: 15px;
|
||||
height: 360px;
|
||||
height: 350px;
|
||||
}
|
||||
.card-box2 {
|
||||
width: 100%;
|
||||
|
|
|
|||
Loading…
Reference in New Issue