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 class="content">
<div> <div>
<div class="left-item"> <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 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 class="unit">（亿元）</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>
@ -112,16 +112,17 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.title { .title {
padding-left: 10px; padding-left: 12px;
font-weight: 800; font-size: 16px;
background-image: url('../../img/equip-title.png'); font-weight: 600;
background-size: 100% 100%; background-image: url('../../img/wsScreenTitleSmall.png');
// background-size: 100% 100%;
color: #f0f5f8; color: #f0f5f8;
cursor: pointer; cursor: pointer;
} }
.number { .number {
font-size: 20px; 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-background-clip: text;
-webkit-text-fill-color: transparent; -webkit-text-fill-color: transparent;
} }
@ -138,7 +139,16 @@ export default {
padding-top: 6px; padding-top: 6px;
padding-bottom: 15px; padding-bottom: 15px;
font-size: 14px; 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; margin-top: 16px;
padding: 4px 0; padding: 4px 0;
font-size: 14px; font-size: 14px;
font-weight: 600; font-weight: 500;
width: 160px; width: 160px;
text-align: center; text-align: center;
background-image: url('../../img/equip-title.png'); 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 yData = this.chartData.map((item) => item.value)
const option = { 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: { grid: {
left: '10%', left: '10%',
right: '10%', right: '10%',
@ -100,8 +146,21 @@ export default {
color: '#ccc', color: '#ccc',
formatter: (params) => { formatter: (params) => {
const proportion = this.chartData[params.dataIndex].proportion 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, data: yData,
}, },

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

@ -1,47 +1,45 @@
<template> <template>
<div class="scroll-container"> <div class="scroll-container">
<table cellspacing="0" cellpadding="8" style="width: 100%; border-collapse: collapse; text-align: center"> <table class="table-head">
<!-- 双层表头 --> <!-- 双层表头 -->
<thead> <thead>
<!-- 第一行：跨列合并 -->
<tr> <tr>
<th rowspan="2">序号</th> <th rowspan="2" style="width: 30px">序号</th>
<th rowspan="2">单位名称</th> <th rowspan="2" style="width: 120px">单位名称</th>
<th rowspan="2">装备价值（亿元）</th> <th rowspan="2" style="width: 62px">装备价值（亿元）</th>
<th colspan="4">装备数量（台）</th> <th colspan="4">装备数量（台）</th>
<th colspan="4">配置率</th> <th colspan="4">配置率</th>
</tr> </tr>
<!-- 第二行：子列 -->
<tr> <tr>
<th>总数</th> <th >总数</th>
<th>线路</th> <th >线路</th>
<th>变电</th> <th >变电</th>
<th>电缆</th> <th >电缆</th>
<th>总数</th> <th >总数</th>
<th>线路</th> <th >线路</th>
<th>变电</th> <th >变电</th>
<th>电缆</th> <th >电缆</th>
</tr> </tr>
</thead> </thead>
</table>
<!-- 表体：使用 v-for 渲染数据 --> <!-- 表体：使用 v-for 渲染数据 -->
<table class="table-body">
<tbody> <tbody>
<tr v-for="(row, index) in tableData" :key="index"> <tr v-for="(row, index) in tableData" :key="index">
<td style="width: 60px">{{ index + 1 }}</td> <td class="index-num" style="width: 30px">{{ index + 1 }}</td>
<td style="width: 180px">{{ row.deptName }}</td> <td style="width: 120px; font-size: 14px">{{ row.deptName }}</td>
<td style="width: 110px">{{ row.totalValue ? (row.totalValue / 100000000).toFixed(4) : 0 }}</td> <td class="num-yellow" style="width: 62px">{{ row.totalValue ? (row.totalValue / 100000000).toFixed(3) : 0 }}</td>
<!-- 装备数量 --> <td class="num-yellow" style="width: 42px;max-width:42px">{{ row.totalEquipmentQuantity }}</td>
<td>{{ row.totalEquipmentQuantity }}</td> <td class="index-num" style="width: 42px;max-width:42px">{{ row.lineNum }}</td>
<td>{{ row.lineNum }}</td> <td class="index-num" style="width: 42px;max-width:42px">{{ row.substationNum }}</td>
<td>{{ row.substationNum }}</td> <td class="index-num" style="width: 42px;max-width:42px">{{ row.cableNum }}</td>
<td>{{ row.cableNum }}</td>
<!-- 配置率 --> <td class="num-yellow" style="width: 42px;max-width:42px">{{ row.configRate }}</td>
<td>{{ row.configRate }}</td> <td class="index-num" style="width: 42px;max-width:42px">{{ row.valueA }}</td>
<td>{{ row.valueA }}</td> <td class="index-num" style="width: 42px;max-width:42px">{{ row.valueB }}</td>
<td>{{ row.valueB }}</td> <td class="index-num" style="width: 42px;max-width:42px">{{ row.valueC }}</td>
<td>{{ row.valueC }}</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
@ -76,8 +74,36 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
table { .table-head {
width: 100%;
border-collapse: collapse; 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%; width: 100%;
font-family: 'Alibaba-PuHuiTi-Regular'; font-family: 'Alibaba-PuHuiTi-Regular';
font-size: 11px; font-size: 11px;
@ -85,10 +111,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: 0.5px solid #254e7c; // 边框颜色可根据背景调整
} }
th { th {
@ -99,11 +125,15 @@ th {
thead { thead {
background-image: url('../../img/tableHeader.png'); background-image: url('../../img/tableHeader.png');
background-size: 100% 100%; background-size: 100% 100%;
height: 57px;
font-size: 12px;
color: #7BBBF8;
} }
tbody tr { tbody tr {
background-image: url('../../img/tableTr.png'); background-image: url('../../img/tableTr.png');
background-size: 100% 100%; background-size: 100% 100%;
height: 44px;
} }
/* 奇偶行颜色区分 */ /* 奇偶行颜色区分 */
@ -121,13 +151,13 @@ tbody tr:hover {
overflow: auto; overflow: auto;
/* 隐藏滚动条轨迹 */ /* 隐藏滚动条轨迹 */
-ms-overflow-style: none; /* IE / Edge */ -ms-overflow-style: none; /* IE / Edge */
scrollbar-width: none; /* Firefox */ scrollbar-width: none; /* Firefox */
} }
/* Chrome / Safari */ /* Chrome / Safari */
.scroll-container::-webkit-scrollbar { .scroll-container::-webkit-scrollbar {
width: 0; /* 或者直接隐藏 */ width: 0; /* 或者直接隐藏 */
height: 0; height: 0;
background: transparent; /* 背景透明 */ background: transparent; /* 背景透明 */
} }

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

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

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

@ -1,7 +1,7 @@
<template> <template>
<div> <div>
<div class="title-tip"> <div class="title-tip">
<div>装备在用率统计</div> <div class="small_title">装备在用率统计</div>
<div class="more" @click="openDialog">更多 ></div> <div class="more" @click="openDialog">更多 ></div>
</div> </div>
<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">
@ -13,12 +13,12 @@
<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: 20px">{{ item.name || '-' }}</div> <div style="text-align: center; margin-top: 20px;font-size: 14px;">{{ item.name || '-' }}</div>
<div style="margin: 112px 0 0 42px" <div style="margin: 109px 0 0 42px"
><span style="font-size: 12px; color: #ccc">在用率</span> {{ item.proportion || 0 }} %</div ><span style="font-size: 12px; color: #ccc;font-weight: 300;">在用率</span> <span class="num">{{ item.proportion || 0 }} %</span></div
> >
<div style="margin-left: 42px" <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>
</div> </div>
@ -94,12 +94,33 @@ export default {
.more { .more {
margin-right: 20px; margin-right: 20px;
color: #5fbbdb; color: #5b99ad;
cursor: pointer; cursor: pointer;
font-weight: 600; font-weight: 400;
font-family: ''; 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 { .topView {
width: 100%; width: 100%;
height: 16%; height: 16%;

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

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

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

@ -1,7 +1,7 @@
<template> <template>
<div class="table-style"> <div class="table-style">
<div class="title-tip"> <div class="title-tip">
<div>各单位装备在用率情况</div> <div class="small_title">各单位装备在用率情况</div>
<div class="more" @click="openDialog">更多 ></div> <div class="more" @click="openDialog">更多 ></div>
</div> </div>
@ -21,10 +21,12 @@
<!-- 表体：使用 v-for 渲染数据 --> <!-- 表体：使用 v-for 渲染数据 -->
<tbody> <tbody>
<tr v-for="(row, index) in tableData" :key="index"> <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 style="width: 200px">{{ row.name }}</td>
<td>{{ row.proportion }} %</td> <td class="num">{{ row.proportion }} %</td>
<td>{{ row.turnoverRate }} 次/年</td> <td>
<span class="num">{{ row.turnoverRate }}</span> <span style="font-size: 14px">次/年</span></td
>
</tr> </tr>
</tbody> </tbody>
</table> </table>
@ -65,6 +67,18 @@ export default {
.table-style { .table-style {
height: 350px; 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 { .title-tip {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
@ -77,11 +91,29 @@ export default {
.more { .more {
margin-right: 20px; margin-right: 20px;
color: #5fbbdb; color: #5b99ad;
cursor: pointer; cursor: pointer;
font-weight: 600; font-weight: 400;
font-family: ''; 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 { .table-list {
margin-top: 20px; margin-top: 20px;
@ -100,7 +132,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 {
@ -111,6 +143,7 @@ th {
thead { thead {
background-image: url('../../img/tableHeader.png'); background-image: url('../../img/tableHeader.png');
background-size: 100% 100%; background-size: 100% 100%;
color: #7BBBF8;
} }
tbody tr { tbody tr {

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

@ -2,7 +2,7 @@
<div class="right-warp"> <div class="right-warp">
<div class="top-box"> <div class="top-box">
<div class="title-tip"> <div class="title-tip">
<div>项目装备</div> <div class="small_title">项目装备</div>
<div class="more">更多 ></div> <div class="more">更多 ></div>
</div> </div>
<div class="equipment-list"> <div class="equipment-list">
@ -31,7 +31,7 @@
</div> </div>
<div class="turnround-rate"> <div class="turnround-rate">
<div class="turnround-rate-title" @click="openDialogEquip(2)"> <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 }} {{ turnoverRate }}
<span class="unit"> 次/年</span></div <span class="unit"> 次/年</span></div
> >
@ -141,11 +141,27 @@ export default {
.more { .more {
margin-right: 20px; margin-right: 20px;
color: #5fbbdb; color: #5b99ad;
cursor: pointer; cursor: pointer;
font-weight: 600; font-weight: 400;
font-family: ''; 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 { .top-box {
height: 180px; height: 180px;
@ -192,10 +208,18 @@ export default {
.number { .number {
font-size: 22px; font-size: 22px;
font-weight: 800; 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 { .unit {
font-size: 12px; font-size: 14px;
color: #878585; 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 { .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