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

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

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