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-11 23:11:35 +08:00
parent 3cf298bd1d
commit 844d783715
2 changed files with 63 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -3,7 +3,7 @@
<div class="top">
<div class="top-item">
<el-card class="card-box">
<div class="title">
<div class="title-tip">
<i class="el-icon-pie-chart icon-tip" />
<span>数据总览</span>
</div>
@ -12,7 +12,7 @@
<div ref="chartRef" style="width: 490px; height: 280px"></div>
</div>
<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.toolNum }}</div>
</div>
@ -21,7 +21,7 @@
<div class="top-item">
<el-card class="card-box">
<div class="title">
<div class="title-tip">
<i class="el-icon-bangzhu icon-tip" />
<span>告警</span>
</div>
@ -58,12 +58,12 @@
<div class="top-item">
<el-card class="card-box">
<div class="title">
<div class="title-tip">
<i class="el-icon-date icon-tip" />
<span>待办</span>
</div>
<!-- 滚动列表 -->
<div class="scroll-wrapper" 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
@ -89,7 +89,7 @@
<div class="top">
<div class="top-item">
<el-card class="card-box">
<div class="title">
<div class="title-tip">
<i class="el-icon-copy-document icon-tip" />
<span>当月出库数量</span>
</div>
@ -138,7 +138,7 @@
<div class="top-item">
<el-card class="card-box">
<div class="title">
<div class="title-tip">
<i class="el-icon-set-up icon-tip" />
<span>当月退库数量</span>
</div>
@ -175,7 +175,7 @@
<div class="top-item">
<el-card class="card-box">
<div class="title">
<div class="title-tip">
<i class="el-icon-setting icon-tip" />
<span>当月维修数量</span>
</div>
@ -194,13 +194,13 @@
</div>
</div>
<div class="content">
<div class="content-item content-item2">
<div class="content-item3" style="width: 48%">
<div class="item-box">
<div class="num2">{{ numData.repairRetireNum }}</div>
<div>本月维修退役数量</div>
</div>
</div>
<div class="" style="flex: 1"> </div>
<!-- <div class="" style="flex: 1"> </div> -->
</div>
</el-card>
</div>
@ -225,7 +225,8 @@ export default {
shareData: {},
eventList: [],
timer: null,
speed: 30,
speed: 60,
isHover: false,
numData: {
selfUseApplyNum: 0, // 自用申请数
selfUseAuditNum: 0, // 自用审核数
@ -369,7 +370,8 @@ export default {
show: true,
position: 'outside',
formatter: (params) => {
return `{a|${params.percent}%}\n{b|${params.name}}`
console.log('🚀 ~ params:', params)
return `{a|${params.percent || 0}%}\n{b|${params.name}}`
},
rich: {
a: {
@ -516,8 +518,9 @@ export default {
border-radius: 15px;
min-height: 430px;
}
.title {
.title-tip-tip {
font-weight: 900;
text-align: left;
}
.icon-tip {
margin-right: 10px;
@ -532,6 +535,7 @@ export default {
margin-top: 20px;
display: flex;
gap: 20px;
justify-content: center;
.content-item {
flex: 1;
@ -560,6 +564,33 @@ export default {
font-weight: 800;
}
}
.content-item3 {
border-radius: 8px;
height: 140px;
display: flex;
align-items: center;
overflow: hidden;
border-radius: 16px;
background: linear-gradient(180deg, #e8f9f3 0%, #fff 60.1%);
box-shadow: 0 0 0.5px 0 rgba(0, 0, 0, 0.3), 0 1px 3px 0 rgba(0, 0, 0, 0.15);
.item-box {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: #75787d;
font-size: 13px;
}
.num {
margin-bottom: 10px;
font-size: 21px;
color: red;
font-weight: 800;
}
}
.content-item2 {
background: linear-gradient(180deg, #e8f9f3 0%, #fff 60.1%);
box-shadow: 0 0 0.5px 0 rgba(0, 0, 0, 0.3), 0 1px 3px 0 rgba(0, 0, 0, 0.15);
@ -584,6 +615,9 @@ export default {
margin: 0;
list-style: none;
}
.is-hover {
overflow: auto;
}
.scroll-list li {
padding: 8px 12px;

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

@ -3,7 +3,7 @@
<div class="top">
<div class="top-item">
<el-card class="card-box">
<div class="title">
<div class="title-tip">
<i class="el-icon-pie-chart icon-tip" />
<span>数据总览</span>
</div>
@ -12,7 +12,7 @@
<div ref="chartRef" style="width: 490px; height: 270px"></div>
</div>
<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.toolNum }}</div>
</div>
@ -22,7 +22,7 @@
<!-- -->
<div class="top-item">
<el-card class="card-box">
<div class="title">
<div class="title-tip">
<i class="el-icon-bangzhu icon-tip" />
<span>使用情况</span>
</div>
@ -57,6 +57,7 @@
<div class="num">{{ useData.repairNum }}</div>
</div>
</div>
<div style="flex: 1"></div>
<div class="content-item" style="background: #fbedeb">
<div class="line" style="background: #e56d74" />
<div class="item-box">
@ -64,19 +65,18 @@
<div class="num">{{ useData.scrapNum }}</div>
</div>
</div>
<div style="flex: 1"></div>
</div>
</el-card>
</div>
<div class="top-item">
<el-card class="card-box">
<div class="title">
<div class="title-tip">
<i class="el-icon-date icon-tip" />
<span>实时事件</span>
</div>
<!-- 滚动列表 -->
<div class="scroll-wrapper" 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">
@ -98,7 +98,7 @@
<div class="bottom">
<el-card class="card-box2">
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px">
<div class="title">
<div class="title-tip">
<i class="el-icon-reading icon-tip" />
<span>装备对比</span>
</div>
@ -163,8 +163,8 @@ export default {
},
eventList: [],
timer: null,
speed: 30,
speed: 60,
isHover: false,
tableColumns: [
{ label: '公司名称', prop: 'companyName' },
{ label: '装备总数', prop: 'maNum' },
@ -243,10 +243,12 @@ export default {
},
pause() {
this.isHover = true
clearInterval(this.timer)
},
resume() {
this.isHover = false
this.startScroll()
},
handleExport() {
@ -421,8 +423,9 @@ export default {
border-radius: 15px;
min-height: 430px;
}
.title {
.title-tip {
font-weight: 900;
text-align: left;
}
.icon-tip {
margin-right: 10px;
@ -482,6 +485,9 @@ export default {
margin: 0;
list-style: none;
}
.is-hover {
overflow: auto;
}
.scroll-list li {
padding: 8px 12px;