bonus
/
bonus-ui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

优化

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
src/views/home/components/MunicipalCompany.vue
View File

@ -5,17 +5,19 @@
<el-card class="card-box"> <el-card class="card-box">
<div class="title-tip"> <div class="title-tip">
<i class="el-icon-pie-chart icon-tip" /> <i class="el-icon-pie-chart icon-tip" />
<span>数据总览</span> <span
>数据总览 <span class="left-tip">平台设备总数：{{ dataAll.totalSum }}</span></span
>
</div> </div>
<!-- 饼图 --> <!-- 饼图 -->
<div style="display: flex; justify-content: center"> <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>
<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.totalSum }}</div>
<div class="left-tip">装备总数：{{ dataAll.maNum }}</div> <div class="left-tip">装备总数：{{ dataAll.maNum }}</div>
<div class="left-tip">工具总数：{{ dataAll.toolNum }}</div> <div class="left-tip">工具总数：{{ dataAll.toolNum }}</div>
</div> </div> -->
</el-card> </el-card>
</div> </div>
@ -353,6 +355,21 @@ export default {
const chart = echarts.init(chartDom) const chart = echarts.init(chartDom)
const option = { 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: { legend: {
orient: 'horizontal', orient: 'horizontal',
bottom: 0, bottom: 0,
@ -498,6 +515,7 @@ export default {
gap: 20px; gap: 20px;
margin-bottom: 10px; margin-bottom: 10px;
.top-item { .top-item {
width: 33%;
flex: 1; flex: 1;
} }
.left-tip { .left-tip {

38
src/views/home/components/ProvincialCompany.vue
View File

@ -5,17 +5,19 @@
<el-card class="card-box"> <el-card class="card-box">
<div class="title-tip"> <div class="title-tip">
<i class="el-icon-pie-chart icon-tip" /> <i class="el-icon-pie-chart icon-tip" />
<span>数据总览</span> <span
>数据总览 <span class="left-tip">平台设备总数：{{ dataAll.totalSum }}</span></span
>
</div> </div>
<!-- 饼图 --> <!-- 饼图 -->
<div style="display: flex; justify-content: center"> <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>
<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.totalSum }}</div>
<div class="left-tip">装备总数：{{ dataAll.maNum }}</div> <div class="left-tip">装备总数：{{ dataAll.maNum }}</div>
<div class="left-tip">工具总数：{{ dataAll.toolNum }}</div> <div class="left-tip">工具总数：{{ dataAll.toolNum }}</div>
</div> </div> -->
</el-card> </el-card>
</div> </div>
@ -76,7 +78,13 @@
<span>实时事件</span> <span>实时事件</span>
</div> </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"> <ul class="scroll-list" ref="list">
<li v-for="(item, index) in eventList" :key="item.id" :class="{ odd: index % 2 === 1 }"> <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"> <div style="display: flex; align-items: center; justify-content: space-between">
@ -129,7 +137,7 @@
</el-table-column> </el-table-column>
</el-table> </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> </el-card>
</div> </div>
</div> </div>
@ -259,6 +267,21 @@ export default {
const chart = echarts.init(chartDom) const chart = echarts.init(chartDom)
const option = { 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: { legend: {
orient: 'horizontal', orient: 'horizontal',
bottom: 0, bottom: 0,
@ -403,6 +426,7 @@ export default {
gap: 20px; gap: 20px;
margin-bottom: 10px; margin-bottom: 10px;
.top-item { .top-item {
width: 33%;
flex: 1; flex: 1;
} }
.left-tip { .left-tip {
@ -416,7 +440,7 @@ export default {
.card-box { .card-box {
width: 100%; width: 100%;
border-radius: 15px; border-radius: 15px;
height: 360px; height: 350px;
} }
.card-box2 { .card-box2 {
width: 100%; width: 100%;