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

省级大屏-宽屏修改

This commit is contained in:
hongchao 2025-11-25 15:22:35 +08:00
parent 6e022a2f27
commit 7356bc7cce
9 changed files with 348 additions and 96 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
src/views/screen/wsScreenWidescreen/components/left/EquipItem.vue
View File

@ -4,11 +4,11 @@
<div class="content">
<div>
<div class="left-item">
<div class="left-tip">装备数 <span>（台）</span></div>
<div class="left-tip">装备数 <span class="unit">（台）</span></div>
<div class="number">{{ query.num || 0 }}</div>
</div>
<div class="left-item">
<div class="left-tip">装备价值 <span>（亿元）</span></div>
<div class="left-tip">装备价值 <span class="unit">（亿元）</span></div>
<div class="number">{{ query.price ? (query.price / 100000000).toFixed(4) : 0 }}</div>
</div>
</div>
@ -112,16 +112,17 @@ export default {
<style lang="scss" scoped>
.title {
padding-left: 10px;
font-weight: 800;
background-image: url('../../img/equip-title.png');
background-size: 100% 100%;
padding-left: 12px;
font-size: 16px;
font-weight: 600;
background-image: url('../../img/wsScreenTitleSmall.png');
// background-size: 100% 100%;
color: #f0f5f8;
cursor: pointer;
}
.number {
font-size: 20px;
background: linear-gradient(to bottom, #f0f5f8, #5eb6f0);
background: linear-gradient(180deg, #FFF 19.35%, #5DCBFE 77.42%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
@ -138,7 +139,16 @@ export default {
padding-top: 6px;
padding-bottom: 15px;
font-size: 14px;
font-weight: 600;
font-weight: 500;
}
.unit {
font-size: 14px;
font-weight: 300;
background: linear-gradient(180deg, #FFF 25.81%, #FFF 77.42%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
}
@ -147,7 +157,7 @@ export default {
margin-top: 16px;
padding: 4px 0;
font-size: 14px;
font-weight: 600;
font-weight: 500;
width: 160px;
text-align: center;
background-image: url('../../img/equip-title.png');

61
src/views/screen/wsScreenWidescreen/components/left/EquipStatus.vue
View File

@ -49,6 +49,52 @@ export default {
const yData = this.chartData.map((item) => item.value)
const option = {
title: [
{
text: '单位：台',
left: '0%',
top: 20,
textStyle: {
color: '#ccc',
fontSize: 12,
},
},
],
graphic: [
{
type: 'group',
right: '6%', // 右边距
top: 20, // 顶部距离
children: [
{
type: 'rect',
z: 100,
left: 0,
top: 23.5,
shape: {
width: 10,
height: 5,
},
style: {
fill: '#3BA9DC', // 你想要的色块颜色
stroke: null,
},
},
{
type: 'text',
z: 100,
left: 20,
top: 20,
style: {
text: '装备状态数',
fill: '#ccc',
font: '12px sans-serif',
},
},
],
},
],
grid: {
left: '10%',
right: '10%',
@ -100,8 +146,21 @@ export default {
color: '#ccc',
formatter: (params) => {
const proportion = this.chartData[params.dataIndex].proportion
return `${params.value}/${proportion}%`
return `{value|${params.value}}/{percent|${proportion}%}`
},
// 定义富文本样式
rich: {
value: {
color: '#5eb6f0',
fontFamily: 'DIN',
fontSize: 12
},
percent: {
color: '#ccc', // 保持百分比为原来的灰色
fontFamily: 'DIN',
fontSize: 12
}
}
},
data: yData,
},

76
src/views/screen/wsScreenWidescreen/components/left/UnitEquipmentConfig.vue
View File

@ -1,17 +1,15 @@
<template>
<div class="scroll-container">
<table cellspacing="0" cellpadding="8" style="width: 100%; border-collapse: collapse; text-align: center">
<table class="table-head">
<!-- 双层表头 -->
<thead>
<!-- 第一行：跨列合并 -->
<tr>
<th rowspan="2">序号</th>
<th rowspan="2">单位名称</th>
<th rowspan="2">装备价值（亿元）</th>
<th rowspan="2" style="width: 30px">序号</th>
<th rowspan="2" style="width: 120px">单位名称</th>
<th rowspan="2" style="width: 62px">装备价值（亿元）</th>
<th colspan="4">装备数量（台）</th>
<th colspan="4">配置率</th>
</tr>
<!-- 第二行：子列 -->
<tr>
<th >总数</th>
<th >线路</th>
@ -23,25 +21,25 @@
<th >电缆</th>
</tr>
</thead>
</table>
<!-- 表体：使用 v-for 渲染数据 -->
<table class="table-body">
<tbody>
<tr v-for="(row, index) in tableData" :key="index">
<td style="width: 60px">{{ index + 1 }}</td>
<td style="width: 180px">{{ row.deptName }}</td>
<td style="width: 110px">{{ row.totalValue ? (row.totalValue / 100000000).toFixed(4) : 0 }}</td>
<td class="index-num" style="width: 30px">{{ index + 1 }}</td>
<td style="width: 120px; font-size: 14px">{{ row.deptName }}</td>
<td class="num-yellow" style="width: 62px">{{ row.totalValue ? (row.totalValue / 100000000).toFixed(3) : 0 }}</td>
<!-- 装备数量 -->
<td>{{ row.totalEquipmentQuantity }}</td>
<td>{{ row.lineNum }}</td>
<td>{{ row.substationNum }}</td>
<td>{{ row.cableNum }}</td>
<td class="num-yellow" style="width: 42px;max-width:42px">{{ row.totalEquipmentQuantity }}</td>
<td class="index-num" style="width: 42px;max-width:42px">{{ row.lineNum }}</td>
<td class="index-num" style="width: 42px;max-width:42px">{{ row.substationNum }}</td>
<td class="index-num" style="width: 42px;max-width:42px">{{ row.cableNum }}</td>
<!-- 配置率 -->
<td>{{ row.configRate }}</td>
<td>{{ row.valueA }}</td>
<td>{{ row.valueB }}</td>
<td>{{ row.valueC }}</td>
<td class="num-yellow" style="width: 42px;max-width:42px">{{ row.configRate }}</td>
<td class="index-num" style="width: 42px;max-width:42px">{{ row.valueA }}</td>
<td class="index-num" style="width: 42px;max-width:42px">{{ row.valueB }}</td>
<td class="index-num" style="width: 42px;max-width:42px">{{ row.valueC }}</td>
</tr>
</tbody>
</table>
@ -76,8 +74,36 @@ export default {
</script>
<style lang="scss" scoped>
table {
.table-head {
width: 100%;
border-collapse: collapse;
}
.table-body {
width: 100%;
border-collapse: collapse;
border-spacing: 0 5px;
}
.index-num {
/* width: 30px; */
font-size: 13px;
font-weight: 800;
background: linear-gradient(to bottom, #f0f5f8, #5eb6f0);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-family: 'DIN';
}
.num-yellow {
font-size: 13px;
font-weight: 800;
background: linear-gradient(180deg, #FFF 25.81%, #FDF277 77.42%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
table {
width: 100%;
font-family: 'Alibaba-PuHuiTi-Regular';
font-size: 11px;
@ -85,10 +111,10 @@ table {
th,
td {
padding: 10px;
/* padding: 9px 3px; */
text-align: center;
white-space: nowrap;
border: 1px solid rgba(255, 255, 255, 0.3); // 边框颜色可根据背景调整
/* white-space: nowrap; */
border: 0.5px solid #254e7c; // 边框颜色可根据背景调整
}
th {
@ -99,11 +125,15 @@ th {
thead {
background-image: url('../../img/tableHeader.png');
background-size: 100% 100%;
height: 57px;
font-size: 12px;
color: #7BBBF8;
}
tbody tr {
background-image: url('../../img/tableTr.png');
background-size: 100% 100%;
height: 44px;
}
/* 奇偶行颜色区分 */

57
src/views/screen/wsScreenWidescreen/components/left/index.vue
View File

@ -2,7 +2,7 @@
<div class="left-warp">
<div class="top-box">
<div class="title-tip">
<div>装备总览</div>
<div class="small_title">装备总览</div>
<div class="more" @click="handleEquipOverview">更多 ></div>
</div>
<div class="equip-box">
@ -31,7 +31,7 @@
<el-col :span="13" :offset="0">
<div class="bottom-left">
<div class="title-tip">
<div class="tip-title">单位装备配置</div>
<div class="small_title">单位装备配置</div>
<div class="more" @click="openEquipConfig">更多 ></div>
</div>
<div class="bottom-list">
@ -50,14 +50,14 @@
<el-col :span="11" :offset="0">
<div class="bottom-right">
<div class="title-tip">
<div class="tip-title">装备状态</div>
<div class="small_title">装备状态</div>
<div class="more" @click="openStatusMore">更多 ></div>
</div>
<div class="equip-status">
<EquipStatus />
</div>
</div>
<div class="bottom-explain">
<div class="bottom-explainTwo">
<div>备注说明：再用装备包含于共享装备。</div>
</div>
</el-col>
@ -228,10 +228,26 @@ export default {
.more {
margin-right: 20px;
color: #5fbbdb;
color: #5b99ad;
cursor: pointer;
font-weight: 600;
font-weight: 400;
font-family: '';
font-size: 12px;
/* 清除背景渐变相关属性 */
background: none;
background-clip: unset;
-webkit-background-clip: unset;
-webkit-text-fill-color: #5b99ad;
}
.small_title {
margin-left: 10px;
font-size: 20px;
font-weight: 500;
background: linear-gradient(180deg, #FFF 19.35%, #5DCBFE 77.42%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
}
.top-box {
@ -249,12 +265,17 @@ export default {
position: relative;
.unit {
font-size: 15px;
color: #ccc;
margin-left : 6px;
font-size: 14px;
font-weight: 300;
background: linear-gradient(180deg, #fff 25.81%, #FFF 77.42%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.equip-item-1 {
position: relative;
left: 230px;
left: 240px;
top: 20px;
}
.equip-item-2 {
@ -265,10 +286,14 @@ export default {
font-size: 28px;
font-weight: 800;
cursor: pointer;
background: linear-gradient(180deg, #fff 25.81%, #fdf277 77.42%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.equip-item-3 {
position: relative;
left: 760px;
left: 770px;
top: -40px;
}
.equip-item-4 {
@ -278,6 +303,10 @@ export default {
color: #fefbdc;
font-size: 28px;
font-weight: 800;
background: linear-gradient(180deg, #fff 25.81%, #fdf277 77.42%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
cursor: pointer;
}
}
@ -295,6 +324,14 @@ export default {
display: flex;
cursor: pointer;
}
.bottom-explainTwo {
margin-top: 40px;
color: #97aad6;
font-size: 12px;
display: flex;
justify-content: center;
cursor: pointer;
}
.bottom-tip {
}
.bottom-left {

35
src/views/screen/wsScreenWidescreen/components/right/EquipUsageRate.vue
View File

@ -1,7 +1,7 @@
<template>
<div>
<div class="title-tip">
<div>装备在用率统计</div>
<div class="small_title">装备在用率统计</div>
<div class="more" @click="openDialog">更多 ></div>
</div>
<div style="width: 25%; height: 100%; display: flex; align-items: center; justify-content: space-between">
@ -13,12 +13,12 @@
<div class="item-list">
<div class="item" :class="`item-bg-${index + 1}`" v-for="(item, index) in tableList" :key="index">
<div style="text-align: center; margin-top: 20px">{{ item.name || '-' }}</div>
<div style="margin: 112px 0 0 42px"
><span style="font-size: 12px; color: #ccc">在用率</span> {{ item.proportion || 0 }} %</div
<div style="text-align: center; margin-top: 20px;font-size: 14px;">{{ item.name || '-' }}</div>
<div style="margin: 109px 0 0 42px"
><span style="font-size: 12px; color: #ccc;font-weight: 300;">在用率</span> <span class="num">{{ item.proportion || 0 }} %</span></div
>
<div style="margin-left: 42px"
><span style="font-size: 12px; color: #ccc">周转率</span> {{ item.turnoverRate || 0 }} 次/年</div
><span style="font-size: 12px; color: #ccc;font-weight: 300;">周转率</span> <span class="num" >{{ item.turnoverRate || 0 }}</span> <span style="font-size: 12px;font-weight: 300;">次/年</span></div
>
</div>
</div>
@ -94,12 +94,33 @@ export default {
.more {
margin-right: 20px;
color: #5fbbdb;
color: #5b99ad;
cursor: pointer;
font-weight: 600;
font-weight: 400;
font-family: '';
font-size: 12px;
/* 清除背景渐变相关属性 */
background: none;
background-clip: unset;
-webkit-background-clip: unset;
-webkit-text-fill-color: #5b99ad;
}
.small_title {
margin-left: 10px;
font-size: 20px;
font-weight: 500;
background: linear-gradient(180deg, #FFF 19.35%, #5DCBFE 77.42%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
}
.num {
font-size: 14px;
font-family: 'DIN';
}
.topView {
width: 100%;
height: 16%;

72
src/views/screen/wsScreenWidescreen/components/right/ProEquipSituationList.vue
View File

@ -1,7 +1,7 @@
<template>
<div class="table-style">
<div class="title-tip">
<div class="title-text">工程在用装备情况</div>
<div class="small_title">工程在用装备情况</div>
<div class="more more-warp">
<div>
<el-select v-model="proCode" placeholder="" clearable filterable size="mini" @change="getList">
@ -14,28 +14,28 @@
<div>
<div class="topView">
<div style="width: 25%; height: 100%; display: flex; align-items: center; justify-content: space-between">
<div style="width: 25%; height: 100%; display: flex; align-items: center; justify-content: space-between;margin-bottom:20px">
<div :class="tabIndex == 0 ? 'topTab1 fs-24 active1' : 'topTab1 fs-24'" @click="changTab(0)">线路</div>
<div :class="tabIndex == 2 ? 'topTab2 fs-24 active2' : 'topTab2 fs-24'" @click="changTab(2)">变电</div>
<div :class="tabIndex == 1 ? 'topTab3 fs-24 active3' : 'topTab3 fs-24'" @click="changTab(1)">电缆</div>
</div>
<div>
<el-row :gutter="20">
<el-col :span="12" :offset="0" style="width: 200px">
<div style="display: flex; text-align: center">
<el-col :span="12" :offset="0" style="width: 170px">
<div style="display: flex; text-align: center;">
<img src="../../img/icon3.png" class="icon" />
<div>
<div style="color: #ccc; font-size: 12px; margin-top: 10px">项目数（个）</div>
<div style="font-size: 16px; font-weight: 800">{{ proNum }}</div>
<div style="color: #ccc; font-size: 12px; margin-top: 10px;">项目数（个）</div>
<div class="num-y" style="font-size: 16px; font-weight: 800">{{ proNum }}</div>
</div>
</div>
</el-col>
<el-col :span="12" :offset="0" style="width: 220px">
<el-col :span="12" :offset="0" style="width: 190px">
<div style="display: flex; text-align: center">
<img src="../../img/icon1.png" class="icon" />
<div>
<div style="color: #ccc; font-size: 12px; margin-top: 10px">在用装备数（台）</div>
<div style="font-size: 16px; font-weight: 800">{{ equipNum }}</div>
<div class="num-y" style="font-size: 16px; font-weight: 800">{{ equipNum }}</div>
</div>
</div>
</el-col>
@ -61,11 +61,11 @@
<!-- 表体：使用 v-for 渲染数据 -->
<tbody>
<tr v-for="(row, index) in tableData" :key="index">
<td style="width: 60px">{{ index + 1 }}</td>
<td style="width: 200px">{{ row.projectName }}</td>
<td style="width: 120px">{{ row.inUser }}</td>
<td>{{ row.scale }}</td>
<td>{{ row.usage }}</td>
<td class="index-num num" style="width: 60px">{{ index + 1 }}</td>
<td style="width: 160px">{{ row.projectName }}</td>
<td class="num" style="width: 120px">{{ row.inUser }}</td>
<td class="num">{{ row.scale }}</td>
<td class="num">{{ row.usage }}</td>
</tr>
</tbody>
</table>
@ -143,6 +143,28 @@ export default {
height: 0;
background: transparent; /* 背景透明 */
}
.num {
font-size: 20px;
font-weight: 800;
font-family: 'DIN';
}
.num-y {
margin-left: 20px;
font-weight: 800;
font-family: 'DIN';
background: linear-gradient(180deg, #fff 25.81%, #fdf277 77.42%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.index-num {
background: linear-gradient(180deg, #fff 19.35%, #5dcbfe 77.42%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.title-tip {
display: flex;
justify-content: space-between;
@ -158,10 +180,26 @@ export default {
.more {
margin-right: 20px;
color: #5fbbdb;
color: #5b99ad;
cursor: pointer;
font-weight: 600;
font-weight: 400;
font-family: '';
font-size: 12px;
/* 清除背景渐变相关属性 */
background: none;
background-clip: unset;
-webkit-background-clip: unset;
-webkit-text-fill-color: #5b99ad;
}
.small_title {
margin-left: 10px;
font-size: 20px;
font-weight: 500;
background: linear-gradient(180deg, #FFF 19.35%, #5DCBFE 77.42%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.more-warp {
@ -241,8 +279,7 @@ th,
td {
padding: 10px;
text-align: center;
white-space: nowrap;
border: 1px solid rgba(255, 255, 255, 0.3); // 边框颜色可根据背景调整
}
th {
@ -252,6 +289,7 @@ th {
thead {
background-image: url('../../img/tableHeader.png');
background-size: 100% 100%;
color: #7BBBF8;
}
tbody tr {

47
src/views/screen/wsScreenWidescreen/components/right/UsageRateSituationList.vue
View File

@ -1,7 +1,7 @@
<template>
<div class="table-style">
<div class="title-tip">
<div>各单位装备在用率情况</div>
<div class="small_title">各单位装备在用率情况</div>
<div class="more" @click="openDialog">更多 ></div>
</div>
@ -21,10 +21,12 @@
<!-- 表体：使用 v-for 渲染数据 -->
<tbody>
<tr v-for="(row, index) in tableData" :key="index">
<td style="width: 60px">{{ index + 1 }}</td>
<td class="num index-num" style="width: 50px">{{ index + 1 }}</td>
<td style="width: 200px">{{ row.name }}</td>
<td>{{ row.proportion }} %</td>
<td>{{ row.turnoverRate }} 次/年</td>
<td class="num">{{ row.proportion }} %</td>
<td>
<span class="num">{{ row.turnoverRate }}</span> <span style="font-size: 14px">次/年</span></td
>
</tr>
</tbody>
</table>
@ -65,6 +67,18 @@ export default {
.table-style {
height: 350px;
}
.num {
font-size: 20px;
font-weight: 800;
font-family: 'DIN';
}
.index-num {
background: linear-gradient(180deg, #fff 19.35%, #5dcbfe 77.42%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.title-tip {
display: flex;
justify-content: space-between;
@ -77,11 +91,29 @@ export default {
.more {
margin-right: 20px;
color: #5fbbdb;
color: #5b99ad;
cursor: pointer;
font-weight: 600;
font-weight: 400;
font-family: '';
font-size: 12px;
/* 清除背景渐变相关属性 */
background: none;
background-clip: unset;
-webkit-background-clip: unset;
-webkit-text-fill-color: #5b99ad;
}
.small_title {
margin-left: 10px;
font-size: 20px;
font-weight: 500;
background: linear-gradient(180deg, #FFF 19.35%, #5DCBFE 77.42%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
}
.table-list {
margin-top: 20px;
@ -100,7 +132,7 @@ td {
padding: 10px;
text-align: center;
white-space: nowrap;
border: 1px solid rgba(255, 255, 255, 0.3); // 边框颜色可根据背景调整
// border: 1px solid rgba(255, 255, 255, 0.3); // 边框颜色可根据背景调整
}
th {
@ -111,6 +143,7 @@ th {
thead {
background-image: url('../../img/tableHeader.png');
background-size: 100% 100%;
color: #7BBBF8;
}
tbody tr {

36
src/views/screen/wsScreenWidescreen/components/right/index.vue
View File

@ -2,7 +2,7 @@
<div class="right-warp">
<div class="top-box">
<div class="title-tip">
<div>项目装备</div>
<div class="small_title">项目装备</div>
<div class="more">更多 ></div>
</div>
<div class="equipment-list">
@ -31,7 +31,7 @@
</div>
<div class="turnround-rate">
<div class="turnround-rate-title" @click="openDialogEquip(2)">
<span style="color: #ccc; font-size: 15px">周转率 </span>
<span style="color: #ccc; font-size: 15px;margin-right: 10px;font-weight: 500;">周转率 </span>
{{ turnoverRate }}
<span class="unit"> 次/年</span></div
>
@ -141,10 +141,26 @@ export default {
.more {
margin-right: 20px;
color: #5fbbdb;
color: #5b99ad;
cursor: pointer;
font-weight: 600;
font-weight: 400;
font-family: '';
font-size: 12px;
/* 清除背景渐变相关属性 */
background: none;
background-clip: unset;
-webkit-background-clip: unset;
-webkit-text-fill-color: #5b99ad;
}
.small_title {
margin-left: 10px;
font-size: 20px;
font-weight: 500;
background: linear-gradient(180deg, #FFF 19.35%, #5DCBFE 77.42%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
}
.top-box {
@ -192,10 +208,18 @@ export default {
.number {
font-size: 22px;
font-weight: 800;
background: linear-gradient(180deg, #FFF 25.81%, #FDF277 77.42%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.unit {
font-size: 12px;
color: #878585;
font-size: 14px;
font-weight: 300;
background: linear-gradient(180deg, #fff 25.81%, #FFF 77.42%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
}
.equip-item1 {

BIN
src/views/screen/wsScreenWidescreen/img/wsScreenTitleSmall.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 23 KiB