This commit is contained in:
bb_pan 2025-12-17 18:20:08 +08:00
parent 912d0fb4f7
commit e88e3c2f84
2 changed files with 53 additions and 11 deletions

View File

@ -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 {

View File

@ -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%;