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

网省大屏

This commit is contained in:
bb_pan 2025-11-20 13:38:35 +08:00
parent c9d99d1855
commit 35f78eb949
9 changed files with 112 additions and 144 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
src/views/screen/wsScreen/components/left/EquipItem.vue
View File

@ -2,13 +2,13 @@
<div> <div>
<div class="title" @click="openDialog">{{ title }}</div> <div class="title" @click="openDialog">{{ title }}</div>
<div class="content"> <div class="content">
<div> <div class="left-wrap">
<div class="left-item"> <div class="left-item">
<div class="left-tip">装备数 <span>（台）</span></div> <div class="left-tip">装备数 <span>(台)</span></div>
<div class="number">{{ query.num || 0 }}</div> <div class="number">{{ query.num || 0 }}</div>
</div> </div>
<div class="left-item"> <div class="left-item">
<div class="left-tip">装备价值 <span>（亿元）</span></div> <div class="left-tip">装备价值 <span>(亿元)</span></div>
<div class="number">{{ query.price ? (query.price / 100000000).toFixed(4) : 0 }}</div> <div class="number">{{ query.price ? (query.price / 100000000).toFixed(4) : 0 }}</div>
</div> </div>
</div> </div>
@ -82,7 +82,7 @@ export default {
{ {
name: '装备年限', name: '装备年限',
type: 'pie', type: 'pie',
radius: '39%', radius: '55%',
avoidLabelOverlap: false, avoidLabelOverlap: false,
label: { label: {
show: true, show: true,
@ -91,8 +91,8 @@ export default {
}, },
labelLine: { labelLine: {
show: true, show: true,
length: 8, // 第一段线 length: 5, // 第一段线
length2: 5, // 第二段线 length2: 3, // 第二段线
}, },
data: this.pieData, data: this.pieData,
@ -126,10 +126,15 @@ export default {
-webkit-text-fill-color: transparent; -webkit-text-fill-color: transparent;
} }
.content { .content {
display: flex; /* display: flex; */
.left-wrap {
display: flex;
justify-content: space-between;
}
.left-item { .left-item {
margin-top: 16px; width: 48%;
height: 90px; margin-top: 6px;
height: 65px;
text-align: center; text-align: center;
background-image: url('../../img/equip-item.png'); background-image: url('../../img/equip-item.png');
background-size: 100% 100%; background-size: 100% 100%;
@ -137,26 +142,26 @@ export default {
.left-tip { .left-tip {
padding-top: 6px; padding-top: 6px;
padding-bottom: 15px; padding-bottom: 15px;
font-size: 11px; font-size: 10px;
font-weight: 600; font-weight: 600;
width: 50px; /* width: 50px; */
} }
} }
.right-tip { .right-tip {
margin-left: 10px; /* margin-left: 10px; */
margin-top: 16px; margin-top: 6px;
padding: 4px 0; padding: 4px 0;
font-size: 11px; font-size: 11px;
font-weight: 600; font-weight: 600;
width: 100px; width: 100%;
text-align: center; text-align: center;
background-image: url('../../img/equip-title.png'); background-image: url('../../img/equip-title.png');
background-size: 100% 100%; background-size: 100% 100%;
} }
.pie-chart { .pie-chart {
width: 120px; width: 140px;
height: 120px; height:100px;
} }
} }
</style> </style>

8
src/views/screen/wsScreen/components/left/EquipStatus.vue
View File

@ -50,9 +50,9 @@ export default {
const option = { const option = {
grid: { grid: {
left: '22%', left: '16%',
right: '10%', right: '6%',
top: '20%', top: '16%',
bottom: '15%', bottom: '15%',
}, },
xAxis: { xAxis: {
@ -141,7 +141,7 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.chart-container { .chart-container {
width: 100%; /* 宽度 */ width: 100%; /* 宽度 */
height: 300px; /* 高度 */ height: 230px; /* 高度 */
margin: 0 auto; margin: 0 auto;
} }
</style> </style>

4
src/views/screen/wsScreen/components/left/UnitEquipmentConfig.vue
View File

@ -85,10 +85,10 @@ table {
th, th,
td { td {
padding: 10px; padding: 9px 3px;
text-align: center; text-align: center;
white-space: nowrap; white-space: nowrap;
border: 1px solid rgba(255, 255, 255, 0.3); // 边框颜色可根据背景调整 /* border: 1px solid rgba(255, 255, 255, 0.3); // 边框颜色可根据背景调整 */
} }
th { th {

103
src/views/screen/wsScreen/components/left/index.vue
View File

@ -1,6 +1,5 @@
<template> <template>
<div> <div>
<div class="left-warp"> <div class="left-warp">
<div class="top-box"> <div class="top-box">
<div class="title-tip"> <div class="title-tip">
@ -34,41 +33,29 @@
</el-row> </el-row>
</div> </div>
<div class="bottom-box"> <div class="bottom-box">
<el-row :gutter="20"> <div class="bottom-left">
<el-col :span="13" :offset="0"> <div class="title-tip">
<div class="bottom-left"> <div class="tip-title">单位装备配置</div>
<div class="title-tip"> <div class="more" @click="openEquipConfig">更多 ></div>
<div class="tip-title">单位装备配置</div> </div>
<div class="more" @click="openEquipConfig">更多 ></div> <div class="bottom-list">
</div> <UnitEquipmentConfig />
<div class="bottom-list"> </div>
<UnitEquipmentConfig /> </div>
</div> </div>
</div> <div class="bottom-box">
<div class="bottom-explain" @click="openRemarkMore"> <div class="bottom-right">
<div>备注说明：</div> <div class="title-tip">
<div> <div class="tip-title">装备状态</div>
<div>施工装备配置率=∑ⁿ¹专用装备实际配置率+∑ⁿ¹新型装备实际配置率 </div> <div class="more" @click="openStatusMore">更多 ></div>
<div>装备实际配置率=实际装配配置数量÷基本配置标准数量×装备赋值×配置折算率 </div> </div>
<div>专用装备满分80分，创新装备满分20分，满分100分</div> <div class="equip-status">
</div> <EquipStatus />
</div> </div>
</el-col> <div class="bottom-explain">
<el-col :span="11" :offset="0"> <div>备注说明：再用装备包含于共享装备。</div>
<div class="bottom-right"> </div>
<div class="title-tip"> </div>
<div class="tip-title">装备状态</div>
<div class="more" @click="openStatusMore">更多 ></div>
</div>
<div class="equip-status">
<EquipStatus />
</div>
</div>
<div class="bottom-explain">
<div>备注说明：再用装备包含于共享装备。</div>
</div>
</el-col>
</el-row>
</div> </div>
</div> </div>
@ -168,27 +155,6 @@ export default {
this.list3[2] = item.ten this.list3[2] = item.ten
} }
}) })
// this.state1.num = data.line.num || 0
// this.state1.price = data.line.price || 0
// this.state2.num = data.cable.num || 0
// this.state2.price = data.cable.price || 0
// this.state3.num = data.substation.num || 0
// this.state3.price = data.substation.price || 0
// this.list1[0] = data.line.five
// this.list1[1] = data.line.fiveOrTen
// this.list1[2] = data.line.ten
// this.list2[0] = data.cable.five
// this.list2[1] = data.cable.fiveOrTen
// this.list2[2] = data.cable.ten
// this.list3[0] = data.substation.five
// this.list3[1] = data.substation.fiveOrTen
// this.list3[2] = data.substation.ten
// console.log('🚀 ~ getEquipList ~ this.list1:', this.list1)
// console.log('🚀 ~ getEquipList ~ this.list2:', this.list2)
// console.log('🚀 ~ getEquipList ~ this.list3:', this.list3)
// console.log('🚀 ~ getEquipList ~ this.state1:', this.state1)
// console.log('🚀 ~ getEquipList ~ this.state2:', this.state2)
// console.log('🚀 ~ getEquipList ~ this.state3:', this.state3)
} catch (error) { } catch (error) {
console.log('🚀 ~ getEquipList ~ error:', error) console.log('🚀 ~ getEquipList ~ error:', error)
} }
@ -220,7 +186,7 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.left-warp { .left-warp {
height: calc(100vh - 79px); height: calc(100vh - 100px);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-between; justify-content: space-between;
@ -244,15 +210,15 @@ export default {
} }
.top-box { .top-box {
/* height: 350px; */ /* height: 350px; */
height: 21%; height: 18%;
background-image: url('../../img/equipmentOverview.png'); background-image: url('../../img/equipmentOverview.png');
background-size: 100% 100%; background-size: 100% 100%;
.equip-box { .equip-box {
padding-left: 20px; padding-left: 20px;
margin-top: 20px; /* margin-top: 20px; */
margin-bottom: 13px; /* margin-bottom: 13px; */
height: 120px; height: 100px;
background-image: url('../../img/equipmentOverviewData.png'); background-image: url('../../img/equipmentOverviewData.png');
background-size: 100% 100%; background-size: 100% 100%;
/* position: relative; */ /* position: relative; */
@ -283,36 +249,35 @@ export default {
cursor: pointer; cursor: pointer;
} }
} }
} }
.item-box { .item-box {
padding: 0 20px; padding: 0 20px;
} }
.bottom-box { .bottom-box {
height: 49%;
.bottom-explain { .bottom-explain {
margin-top: 15px; margin-top: 15px;
color: #97aad6; color: #97aad6;
font-size: 12px; font-size: 12px;
display: flex; display: flex;
justify-content: center;
cursor: pointer; cursor: pointer;
} }
.bottom-tip { .bottom-tip {
} }
.bottom-left { .bottom-left {
/* height: 260px; */ height: 210px;
background-image: url('../../img/unit-equip.png'); background-image: url('../../img/unit-equip.png');
background-size: cover; background-size: 100% 100%;
.bottom-list { .bottom-list {
margin-top: 20px; margin: 5px 0 10px;
height: 250px; height: 165px;
overflow: auto; overflow: auto;
} }
} }
.bottom-right { .bottom-right {
/* height: 250px; */ /* height: 250px; */
background-image: url('../../img/equip-status.png'); background-image: url('../../img/equip-status.png');
background-size: cover; background-size: 100% 100%;
} }
} }
} }

17
src/views/screen/wsScreen/components/right/EquipUsageRate.vue
View File

@ -13,11 +13,11 @@
<div class="item-list"> <div class="item-list">
<div class="item" :class="`item-bg-${index + 1}`" v-for="(item, index) in tableList" :key="index"> <div class="item" :class="`item-bg-${index + 1}`" v-for="(item, index) in tableList" :key="index">
<div style="text-align: center; margin-top: 15px; font-size: 10px;">{{ item.name || '-' }}</div> <div style="text-align: center; margin-top: 25px; font-size: 10px;">{{ item.name || '-' }}</div>
<div style="margin: 115px 0 0 19px" <div style="margin: 90px 0 0 40px"
><span style="color: #ccc">在用率</span> {{ item.proportion || 0 }} %</div ><span style="color: #ccc">在用率</span> {{ item.proportion || 0 }} %</div
> >
<div style="margin-left: 19px" <div style="margin-left: 40px"
><span style="color: #ccc">周转率</span> {{ item.turnoverRate || 0 }} 次/年</div ><span style="color: #ccc">周转率</span> {{ item.turnoverRate || 0 }} 次/年</div
> >
</div> </div>
@ -63,8 +63,8 @@ export default {
} }
const res = await getUsageStatisticsApi({ type }) const res = await getUsageStatisticsApi({ type })
if (!res.data) return if (!res.data) return
if (res.data.length > 5) { if (res.data.length > 3) {
this.tableList = res.data.slice(0, 5) this.tableList = res.data.slice(0, 3)
} else { } else {
this.tableList = res.data this.tableList = res.data
} }
@ -160,11 +160,12 @@ export default {
padding: 10px 0; padding: 10px 0;
display: flex; display: flex;
align-items: center; align-items: center;
/* justify-content: space-between; */ justify-content: space-between;
width: 100%; width: 100%;
height: 200px;
.item { .item {
width: 25%; width: 30%;
height: 200px; height: 180px;
font-weight: bolder; font-weight: bolder;
margin-right: 10px; margin-right: 10px;
font-size: 10px; font-size: 10px;

15
src/views/screen/wsScreen/components/right/ProEquipSituationList.vue
View File

@ -13,7 +13,7 @@
@change="getList" @change="getList"
style="width: 80px" style="width: 80px"
> >
<el-option v-for="item in options" :key="item.proCode" :label="item.proName" :value="item.proCode" /> <el-option v-for="(item, index) in options" :key="index" :label="item.proName" :value="item.proCode" />
</el-select> </el-select>
</div> </div>
<div style="margin-left: 15px" @click="openDialog">更多 ></div> <div style="margin-left: 15px" @click="openDialog">更多 ></div>
@ -134,10 +134,13 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.table-style { .table-style {
/* height: 350px; */ margin-bottom: 10px;
height: 219px;
overflow: hidden;
} }
.scroll-container { .scroll-container {
width: 100%; width: 100%;
height: 219px;
overflow: auto; overflow: auto;
/* 隐藏滚动条轨迹 */ /* 隐藏滚动条轨迹 */
@ -152,11 +155,11 @@ export default {
background: transparent; /* 背景透明 */ background: transparent; /* 背景透明 */
} }
.title-tip { .title-tip {
font-size: 12px; font-size: 15px;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
padding-top: 10px; padding-top: 2px;
padding-left: 25px; padding-left: 40px;
font-family: DS-TITLE; font-family: DS-TITLE;
.title-text { .title-text {
background: linear-gradient(to bottom, #f0f5f8, #5eb6f0); background: linear-gradient(to bottom, #f0f5f8, #5eb6f0);
@ -260,7 +263,7 @@ td {
padding: 10px; padding: 10px;
text-align: center; text-align: center;
white-space: nowrap; white-space: nowrap;
border: 1px solid rgba(255, 255, 255, 0.3); // 边框颜色可根据背景调整 /* border: 1px solid rgba(255, 255, 255, 0.3); // 边框颜色可根据背景调整 */
} }
th { th {

14
src/views/screen/wsScreen/components/right/UsageRateSituationList.vue
View File

@ -66,11 +66,11 @@ export default {
/* height: 350px; */ /* height: 350px; */
} }
.title-tip { .title-tip {
font-size: 12px; font-size: 15px;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
padding-top: 10px; padding-top: 2px;
padding-left: 20px; padding-left: 40px;
font-family: DS-TITLE; font-family: DS-TITLE;
background: linear-gradient(to bottom, #f0f5f8, #5eb6f0); background: linear-gradient(to bottom, #f0f5f8, #5eb6f0);
-webkit-background-clip: text; -webkit-background-clip: text;
@ -86,9 +86,9 @@ export default {
} }
} }
.table-list { .table-list {
margin-top: 20px; margin: 3px 0 10px;
/* height: 280px; */ height: 145px;
height: 31vh; /* height: 31vh; */
overflow: auto; overflow: auto;
} }
table { table {
@ -103,7 +103,7 @@ td {
padding: 10px; padding: 10px;
text-align: center; text-align: center;
white-space: nowrap; white-space: nowrap;
border: 1px solid rgba(255, 255, 255, 0.3); // 边框颜色可根据背景调整 /* border: 1px solid rgba(255, 255, 255, 0.3); // 边框颜色可根据背景调整 */
} }
th { th {

52
src/views/screen/wsScreen/components/right/index.vue
View File

@ -9,7 +9,9 @@
<div class="equipment-list"> <div class="equipment-list">
<div class="equip-item1 item"> <div class="equip-item1 item">
<div class="title">年度总投资额</div> <div class="title">年度总投资额</div>
<div class="number">{{ annualTotal ? (annualTotal / 100000000).toFixed(4) : 0 }} <span class="unit">亿元</span></div> <div class="number"
>{{ annualTotal ? (annualTotal / 100000000).toFixed(4) : 0 }} <span class="unit">亿元</span></div
>
</div> </div>
<div class="equip-item2 item"> <div class="equip-item2 item">
<div class="title">在建工程数</div> <div class="title">在建工程数</div>
@ -24,7 +26,7 @@
<div class="usage-rate"> <div class="usage-rate">
<div class="usage-rate-item" @click="openDialogEquip(1)"> <div class="usage-rate-item" @click="openDialogEquip(1)">
<img src="../../img/usage-rate.png" alt="" /> <img src="../../img/usage-rate.png" alt="" />
<div style="margin: 0 6px; font-size: 14px; width: 42px;">在用率</div> <div style="margin: 0 6px; font-size: 14px; width: 42px">在用率</div>
<div style="width: 180px"> <div style="width: 180px">
<SegmentProgress :value="proportion" :total="13" /> <SegmentProgress :value="proportion" :total="13" />
</div> </div>
@ -39,19 +41,11 @@
</div> </div>
</div> </div>
</div> </div>
<div class="center-box"> <div class="usage-rate-situation">
<el-row :gutter="20"> <UsageRateSituationList @openDialog="openDialog" />
<el-col :span="10" :offset="0"> </div>
<div class="usage-rate-situation"> <div class="usage-rate-pro">
<UsageRateSituationList @openDialog="openDialog" /> <ProEquipSituationList @openDialog="openDialogPro" />
</div>
</el-col>
<el-col :span="14" :offset="0">
<div class="usage-rate-pro">
<ProEquipSituationList @openDialog="openDialogPro" />
</div>
</el-col>
</el-row>
</div> </div>
<div class="bottom-box"> <div class="bottom-box">
<EquipUsageRate /> <EquipUsageRate />
@ -160,20 +154,20 @@ export default {
.center-box { .center-box {
/* height: 350px; */ /* height: 350px; */
/* flex-grow: 1; */ /* flex-grow: 1; */
.usage-rate-situation { }
width: 100%; .usage-rate-situation {
height: 100%; width: 100%;
/* height: 350px; */ /* height: 100%; */
background-image: url('../../img/equip-usage.png'); /* height: 350px; */
background-size: 100% 100%; background-image: url('../../img/equip-usage.png');
} background-size: 100% 100%;
.usage-rate-pro { }
width: 100%; .usage-rate-pro {
height: 100%; width: 100%;
/* height: 350px; */ /* height: 100%; */
background-image: url('../../img/equip-usage.png'); /* height: 350px; */
background-size: 100% 100%; background-image: url('../../img/equip-usage.png');
} background-size: 100% 100%;
} }
.bottom-box { .bottom-box {
/* height: 310px; */ /* height: 310px; */

4
src/views/screen/wsScreen/index.vue
View File

@ -40,8 +40,8 @@ export default {
} }
#index { #index {
color: #d3d6dd; color: #d3d6dd;
width: 100vw; width: 100%;
height: 100vh; height: 100%;
/* width: 1920px; /* width: 1920px;
height: 1080px; */ height: 1080px; */
/* position: absolute; */ /* position: absolute; */