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-02 10:46:12 +08:00
parent 20ed6e09e3
commit 2e71ff521d
14 changed files with 675 additions and 142 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

75
src/views/screen/gwScreen/components/left/AllEquip.vue
View File

@ -476,6 +476,41 @@ export default {
::v-deep .el-dialog__header {
display: none;
}
::v-deep .el-table {
// 启用斑马纹
&.el-table--striped .el-table__body {
tr.el-table__row--striped td {
background-color: #0d214580 !important; // 浅紫色
}
}
.el-table__header {
background: transparent;
}
&.el-table--striped .el-table__body tr.el-table__row:hover > td.el-table__cell {
background-color: rgba(16, 37, 81, 0.9) !important;
}
}
::v-deep .el-table td,
::v-deep .el-table th.is-leaf {
border-bottom: none !important;
}
::v-deep .el-table::before,
.el-table--group::after,
.el-table--border::after {
background-color: transparent !important;
}
/* 隐藏表格滚动条 */
::v-deep .el-table__body-wrapper::-webkit-scrollbar {
width: 0 !important;
height: 0 !important;
}
::v-deep .el-table__body-wrapper {
scrollbar-width: none !important; /* Firefox */
-ms-overflow-style: none !important; /* IE/Edge */
}
// 输入框
::v-deep .el-input__inner {
background: rgba(3, 16, 44, 0.5) !important;
@ -535,6 +570,22 @@ export default {
::v-deep .el-pagination.is-background .btn-next {
background-color: rgba(16, 37, 81, 0.5);
}
::v-deep .el-select-dropdown {
background-color: #0c1837 !important;
border: 1px solid #0c1837 !important;
overflow: hidden;
}
::v-deep .el-scrollbar {
/* height: 184px !important; */
background-color: #0c1837 !important;
}
::v-deep .el-select-dropdown__item {
color: #fff !important;
}
::v-deep .el-select-dropdown__item.hover,
.el-select-dropdown__item:hover {
background: #0c1837 !important;
}
// --
.btn {
@ -578,3 +629,27 @@ export default {
}
}
</style>
<style lang="scss">
.my-cas {
background-color: #0c1837 !important;
}
.my-cas {
.el-cascader-menu {
color: #fff !important;
}
}
.my-cas {
.el-cascader-node:not(.is-disabled):hover,
.el-cascader-node:not(.is-disabled):focus {
background-color: #0c1837 !important;
}
}
.my-date {
background-color: #0c1837 !important;
}
.my-date {
.el-picker-panel {
color: #fff !important;
}
}
</style>

1
src/views/screen/gwScreen/components/left/EquipItem.vue
View File

@ -128,6 +128,7 @@ export default {
background: linear-gradient(to bottom, #f0f5f8, #5eb6f0);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-family: 'DIN';
}
.content {
display: flex;

62
src/views/screen/gwScreen/components/left/EquipStatusMore.vue
View File

@ -4,7 +4,7 @@
v-if="dialogVisible"
v-loading="isLoading"
:visible.sync="dialogVisible"
width="65%"
width="85%"
:modal="false"
class="dlg-box"
>
@ -16,7 +16,13 @@
<!-- 表单 -->
<el-form v-show="showSearch" :model="queryParams" ref="queryForm" size="small" inline @submit.native.prevent>
<el-form-item label="状态" prop="status">
<el-select v-model="queryParams.status" placeholder="请选择" clearable style="width: 240px">
<el-select
v-model="queryParams.status"
placeholder="请选择"
clearable
style="width: 240px"
:popper-append-to-body="false"
>
<el-option v-for="item in statusList" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</el-form-item>
@ -38,7 +44,7 @@
stripe
highlight-current-row
style="width: 100%"
:height="600"
:height="510"
class="table-container"
>
<el-table-column
@ -191,6 +197,41 @@ export default {
</script>
<style lang="scss" scoped>
::v-deep .el-table {
// 启用斑马纹
&.el-table--striped .el-table__body {
tr.el-table__row--striped td {
background-color: #0d214580 !important; // 浅紫色
}
}
.el-table__header {
background: transparent;
}
&.el-table--striped .el-table__body tr.el-table__row:hover > td.el-table__cell {
background-color: rgba(16, 37, 81, 0.9) !important;
}
}
::v-deep .el-table td,
::v-deep .el-table th.is-leaf {
border-bottom: none !important;
}
::v-deep .el-table::before,
.el-table--group::after,
.el-table--border::after {
background-color: transparent !important;
}
/* 隐藏表格滚动条 */
::v-deep .el-table__body-wrapper::-webkit-scrollbar {
width: 0 !important;
height: 0 !important;
}
::v-deep .el-table__body-wrapper {
scrollbar-width: none !important; /* Firefox */
-ms-overflow-style: none !important; /* IE/Edge */
}
::v-deep .el-dialog {
background: transparent !important;
}
@ -301,4 +342,19 @@ export default {
font-weight: 800;
}
}
::v-deep .el-select-dropdown {
background-color: #0C1837 !important;
border: 1px solid #0C1837 !important;
overflow: hidden;
}
::v-deep .el-scrollbar {
background-color: #0C1837 !important;
}
::v-deep .el-select-dropdown__item {
color: #fff !important;
}
::v-deep .el-select-dropdown__item.hover,
.el-select-dropdown__item:hover {
background: #0C1837 !important;
}
</style>

5
src/views/screen/gwScreen/components/left/TotalPriceMore.vue
View File

@ -4,7 +4,7 @@
v-if="dialogVisible"
v-loading="isLoading"
:visible.sync="dialogVisible"
width="36%"
width="45%"
:modal="false"
class="dlg-box"
>
@ -13,7 +13,7 @@
<i class="close-btn" @click="dialogVisible = false" />
<div class="dlg-title">总价值</div>
<div ref="category" style="height: 300px"></div>
<div ref="category" style="height: 600px"></div>
</div>
</el-dialog>
</div>
@ -110,6 +110,7 @@ export default {
::v-deep .el-dialog .el-dialog__body {
background-image: url('../../img/right-dialog.png');
background-size: 100% 100%;
height: 800px;
color: #fff;
}
::v-deep .el-dialog__header {

191
src/views/screen/gwScreen/components/left/UnitEquipConfig.vue
View File

@ -4,14 +4,33 @@
v-if="dialogVisible"
v-loading="isLoading"
:visible.sync="dialogVisible"
width="45%"
width="65%"
:modal="false"
class="dlg-box"
>
<div>
<!-- 自定义title -->
<i class="close-btn" @click="dialogVisible = false" />
<div class="dlg-title">单位装备配置</div>
<div class="dlg-title">装备状态</div>
<!-- 表单 -->
<el-form v-show="showSearch" :model="queryParams" ref="queryForm" size="small" inline @submit.native.prevent>
<el-form-item label="状态" prop="status">
<el-select v-model="queryParams.status" placeholder="请选择" clearable :popper-append-to-body="false" style="width: 240px">
<el-option v-for="item in statusList" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</el-form-item>
<!-- 表单按钮 -->
<el-form-item>
<el-button type="primary" icon="el-icon-search" @click="handleQuery">查询</el-button>
<el-button icon="el-icon-refresh" @click="handleReset" class="btn">重置</el-button>
</el-form-item>
</el-form>
<el-row :gutter="10" class="mb8">
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList" />
</el-row>
<el-table
v-loading="isLoading"
@ -37,48 +56,90 @@
:prop="column.prop"
align="center"
>
<template v-slot="{ row }" v-if="column.prop === 'price'">
<span>{{ row.price ? (row.price / 100000000).toFixed(4) : 0 }}</span>
<template v-slot="{ row }" v-if="column.prop == 'status'">
<span v-if="row.status == 1">在库</span>
<span v-if="row.status == 2">自用</span>
<span v-if="row.status == 3">共享</span>
<span v-if="row.status == 4">退役</span>
<span v-if="row.status == 5">维修</span>
</template>
<template v-slot="{ row }" v-else-if="/^feature(Item|Value)\d+$/.test(column.prop)">
<span>
{{ getFeatureValue(row, column.prop) }}
</span>
</template>
</el-table-column>
</el-table>
<!-- 分页 -->
<!-- <pagination
v-show="true"
:total="88"
<pagination
v-show="total > 0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getList"
/> -->
/>
</div>
</el-dialog>
</div>
</template>
<script>
import { getStatByTypeAndAgeByConfigurationApi } from '@/api/wsScreen'
import { getDeviceListAPI } from '@/api/EquipmentLedger/index.js'
export default {
data() {
return {
isLoading: false,
dialogVisible: false,
showSearch: true,
queryParams: {
pageNum: 1,
pageSize: 10,
status: '', // 状态
},
equipList: [
{ label: '全网省', value: 1 },
{ label: '合肥市', value: 2 },
],
statusList: [
{ label: '在库', value: 1 },
{ label: '自用', value: 2 },
{ label: '共享', value: 3 },
{ label: '退役', value: 4 },
{ label: '维修', value: 5 },
],
tableColumns: [
{ label: '单位名称', prop: 'name' },
{ label: '装备价值（亿元）', prop: 'price' },
{ label: '装备数量', prop: 'count' },
{ label: '线路数量（台）', prop: 'lineCount' },
{ label: '变电数量（台）', prop: 'substationCount' },
{ label: '电缆数量（台）', prop: 'cableCount' },
{ label: '配置率', prop: 'configRate' },
{ label: '线路配置率', prop: 'lineConfigRate' },
{ label: '变电配置率', prop: 'subStationConfigRate' },
{ label: '电缆配置率', prop: 'cableConfigRate' },
{ label: '施工装备', prop: 'major' },
{ label: '型号', prop: 'specificationModel' },
{ label: '数量', prop: 'count' },
{ label: '设备编码', prop: 'code' },
{ label: '特征项1', prop: 'featureItem1' },
{ label: '特征值1', prop: 'featureValue1' },
{ label: '特征项1', prop: 'featureItem2' },
{ label: '特征值2', prop: 'featureValue2' },
{ label: '特征项2', prop: 'featureItem3' },
{ label: '特征值3', prop: 'featureValue3' },
{ label: '特征项4', prop: 'featureItem4' },
{ label: '特征值4', prop: 'featureValue4' },
{ label: '特征项5', prop: 'featureItem5' },
{ label: '特征值5', prop: 'featureValue5' },
{ label: '特征项6', prop: 'featureItem6' },
{ label: '特征值6', prop: 'featureValue6' },
{ label: '特征项7', prop: 'featureItem7' },
{ label: '特征值7', prop: 'featureValue7' },
{ label: '特征项8', prop: 'featureItem8' },
{ label: '特征值8', prop: 'featureValue8' },
{ label: '特征项9', prop: 'featureItem9' },
{ label: '特征值9', prop: 'featureValue9' },
{ label: '产权单位', prop: 'propertyUnit' },
{ label: '资产原值（元）', prop: 'originalValue' },
{ label: '出厂日期', prop: 'productionDate' },
{ label: '使用项目', prop: 'usingProject' },
// { label: 'vlook的状态', prop: 'vlookStatus' },
{ label: '状态', prop: 'status' },
{ label: '下次维保日期', prop: 'nextMaintenanceDate' },
{ label: '生产厂家', prop: 'manufacturer' },
],
tableList: [],
total: 0,
@ -92,24 +153,85 @@ export default {
},
async getList() {
try {
const res = await getStatByTypeAndAgeByConfigurationApi()
console.log('🚀 ~ getList ~ res:', res)
this.tableList = res.data
// 获取设备列表
const res = await getDeviceListAPI(this.queryParams)
this.tableList = res.data?.rows || []
this.total = res.data?.total || 0
} catch (error) {
console.log('🚀 ~ getList ~ error:', error)
this.$message.error('获取设备列表失败：' + (error.message || '未知错误'))
console.error(error)
}
},
getFeatureValue(row, prop) {
const match = prop.match(/feature(Item|Value)(\d+)/)
if (!match) return '-'
const type = match[1] // 'Item' or 'Value'
const index = Number(match[2]) - 1
const list = row.propertyVoList || []
if (!list[index]) return '-'
return type === 'Item' ? list[index].propertyName : list[index].propertyValue
},
// 查询
handleQuery() {
this.queryParams.pageNum = 1
this.getList()
},
// 重置
handleReset() {
this.$refs.queryForm.resetFields()
this.queryParams.pageNum = 1
this.queryParams.pageSize = 10
this.getList()
},
},
}
</script>
<style lang="scss" scoped>
::v-deep .el-table {
// 启用斑马纹
&.el-table--striped .el-table__body {
tr.el-table__row--striped td {
background-color: #0d214580 !important; // 浅紫色
}
}
.el-table__header {
background: transparent;
}
&.el-table--striped .el-table__body tr.el-table__row:hover > td.el-table__cell {
background-color: rgba(16, 37, 81, 0.9) !important;
}
}
::v-deep .el-table td,
::v-deep .el-table th.is-leaf {
border-bottom: none !important;
}
::v-deep .el-table::before,
.el-table--group::after,
.el-table--border::after {
background-color: transparent !important;
}
/* 隐藏表格滚动条 */
::v-deep .el-table__body-wrapper::-webkit-scrollbar {
width: 0 !important;
height: 0 !important;
}
::v-deep .el-table__body-wrapper {
scrollbar-width: none !important; /* Firefox */
-ms-overflow-style: none !important; /* IE/Edge */
}
::v-deep .el-dialog {
background: transparent !important;
}
::v-deep .el-dialog .el-dialog__body {
background-image: url('../../img/unit-config-dialog.png');
background-image: url('../../img/all-dialog.png');
background-size: 100% 100%;
color: #fff;
}
@ -175,6 +297,22 @@ export default {
::v-deep .el-pagination.is-background .btn-next {
background-color: rgba(16, 37, 81, 0.5);
}
::v-deep .el-select-dropdown {
background-color: #0c1837 !important;
border: 1px solid #0c1837 !important;
overflow: hidden;
}
::v-deep .el-scrollbar {
/* height: 184px !important; */
background-color: #0c1837 !important;
}
::v-deep .el-select-dropdown__item {
color: #fff !important;
}
::v-deep .el-select-dropdown__item.hover,
.el-select-dropdown__item:hover {
background: #0c1837 !important;
}
// --
.btn {
@ -193,9 +331,6 @@ export default {
.table-container {
color: #fff;
background-color: #04112a80;
//#071934
/* background: url('../../img/tableTr.png') no-repeat center center;
background-size: 100% 100%; */
}
.dlg-box {
position: absolute;

28
src/views/screen/gwScreen/components/left/UnitEquipmentConfig.vue
View File

@ -16,13 +16,13 @@
<!-- 表体：使用 v-for 渲染数据 -->
<tbody>
<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: 180px">{{ row.deptName }}</td>
<td style="width: 110px">{{ row.totalValue }}</td>
<td class="num" style="width: 110px">{{ row.totalValue }}</td>
<!-- 装备数量 -->
<td>{{ row.totalEquipmentQuantity }}</td>
<td>{{ row.lineNum }}</td>
<td class="num">{{ row.totalEquipmentQuantity }}</td>
<td class="num">{{ row.lineNum }}</td>
</tr>
</tbody>
</table>
@ -131,6 +131,26 @@ tbody tr:hover {
background-image: url('../../img/table-hover.png');
cursor: pointer;
}
.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;
}
.scroll-container {
width: 100%;
height: 100%;

16
src/views/screen/gwScreen/components/left/index.vue
View File

@ -3,26 +3,26 @@
<div class="top-box">
<div class="title-tip">
<div>装备总览</div>
<div class="more" @click="">更多 ></div>
<div class="more" @click="handleEquipOverview">更多 ></div>
</div>
<div class="equip-box">
<div class="equip-item-1">装备总数</div>
<div class="equip-item-2" @click="">{{ equipData.total }} <span class="unit">台</span></div>
<div class="equip-item-2" @click="openSystemEquip">{{ equipData.total }} <span class="unit">台</span></div>
<div class="equip-item-3">总价值</div>
<div class="equip-item-4" @click="">
<div class="equip-item-4" @click="openTotalPrice">
{{ (equipData.totalPrice / 100000000).toFixed(4) }} <span class="unit">亿元</span>
</div>
</div>
<div class="item-box">
<el-row :gutter="20">
<el-col :span="8" :offset="0">
<EquipItem title="线路装备" :state="state1" :pieValues="list1" />
<EquipItem title="线路装备" :state="state1" :pieValues="list1" @openDialog="openEquipItemMore(2)"/>
</el-col>
<el-col :span="8" :offset="0">
<EquipItem title="变电装备" :state="state2" :pieValues="list2" />
<EquipItem title="变电装备" :state="state2" :pieValues="list2" @openDialog="openEquipItemMore(1)"/>
</el-col>
<el-col :span="8" :offset="0">
<EquipItem title="电缆装备" :state="state3" :pieValues="list3" />
<EquipItem title="电缆装备" :state="state3" :pieValues="list3" @openDialog="openEquipItemMore(3)"/>
</el-col>
</el-row>
</div>
@ -32,7 +32,7 @@
<div class="bottom-left">
<div class="title-tip">
<div class="tip-title">网省装备配置</div>
<div class="more" @click="">更多 ></div>
<div class="more" @click="openEquipConfig">更多 ></div>
</div>
<div class="bottom-list">
<UnitEquipmentConfig />
@ -51,7 +51,7 @@
<div class="bottom-right">
<div class="title-tip">
<div class="tip-title">装备状态</div>
<div class="more" @click="">更多 ></div>
<div class="more" @click="openStatusMore">更多 ></div>
</div>
<div class="equip-status">
<EquipStatus />

71
src/views/screen/gwScreen/components/right/EquipUsageRate.vue
View File

@ -1,8 +1,8 @@
<template>
<div>
<div class="title-tip">
<div>装备在用率统计</div>
<div class="more" @click="">更多 ></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">
<div :class="tabIndex == 0 ? 'topTab1 fs-24 active1' : 'topTab1 fs-24'" @click="changTab(0)">总体</div>
@ -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>
@ -37,43 +37,17 @@ export default {
data() {
return {
tabIndex: 0,
tableList: [
{
name: '张力机',
proportion: 64.58,
turnoverRate: 4.08,
},
{
name: '牵引机',
proportion: 53.13,
turnoverRate: 4.3,
},
{
name: '抱杆',
proportion: 46.88,
turnoverRate: 2.83,
},
{
name: '滤油机',
proportion: 17.71,
turnoverRate: 2.66,
},
{
name: '电缆输送机',
proportion: 13.54,
turnoverRate: 2.51,
},
],
tableList: [],
}
},
created() {
// this.getInfo()
this.getInfo()
},
methods: {
changTab(type) {
console.log('🚀 ~ changTab ~ type:', type)
this.tabIndex = type
// this.getInfo()
this.getInfo()
},
async getInfo() {
try {
@ -120,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%;
@ -183,7 +178,7 @@ export default {
}
.item-list {
margin-top: 30px;
margin-top: 15px;
display: flex;
align-items: center;
/* justify-content: space-between; */

36
src/views/screen/gwScreen/components/right/EquipUsageRateMore.vue
View File

@ -95,6 +95,41 @@ export default {
</script>
<style lang="scss" scoped>
::v-deep .el-table {
// 启用斑马纹
&.el-table--striped .el-table__body {
tr.el-table__row--striped td {
background-color: #0d214580 !important; // 浅紫色
}
}
.el-table__header {
background: transparent;
}
&.el-table--striped .el-table__body tr.el-table__row:hover > td.el-table__cell {
background-color: rgba(16, 37, 81, 0.9) !important;
}
}
::v-deep .el-table td,
::v-deep .el-table th.is-leaf {
border-bottom: none !important;
}
::v-deep .el-table::before,
.el-table--group::after,
.el-table--border::after {
background-color: transparent !important;
}
/* 隐藏表格滚动条 */
::v-deep .el-table__body-wrapper::-webkit-scrollbar {
width: 0 !important;
height: 0 !important;
}
::v-deep .el-table__body-wrapper {
scrollbar-width: none !important; /* Firefox */
-ms-overflow-style: none !important; /* IE/Edge */
}
::v-deep .el-dialog {
background: transparent !important;
}
@ -103,6 +138,7 @@ export default {
background-image: url('../../img/right-dialog.png');
background-size: 100% 100%;
color: #fff;
height: 850px;
}
::v-deep .el-dialog__header {
display: none;

36
src/views/screen/gwScreen/components/right/ProEquipMore.vue
View File

@ -123,6 +123,41 @@ export default {
</script>
<style lang="scss" scoped>
::v-deep .el-table {
// 启用斑马纹
&.el-table--striped .el-table__body {
tr.el-table__row--striped td {
background-color: #0d214580 !important; // 浅紫色
}
}
.el-table__header {
background: transparent;
}
&.el-table--striped .el-table__body tr.el-table__row:hover > td.el-table__cell {
background-color: rgba(16, 37, 81, 0.9) !important;
}
}
::v-deep .el-table td,
::v-deep .el-table th.is-leaf {
border-bottom: none !important;
}
::v-deep .el-table::before,
.el-table--group::after,
.el-table--border::after {
background-color: transparent !important;
}
/* 隐藏表格滚动条 */
::v-deep .el-table__body-wrapper::-webkit-scrollbar {
width: 0 !important;
height: 0 !important;
}
::v-deep .el-table__body-wrapper {
scrollbar-width: none !important; /* Firefox */
-ms-overflow-style: none !important; /* IE/Edge */
}
::v-deep .el-dialog {
background: transparent !important;
}
@ -131,6 +166,7 @@ export default {
background-image: url('../../img/right-dialog.png');
background-size: 100% 100%;
color: #fff;
height: 850px;
}
::v-deep .el-dialog__header {
display: none;

149
src/views/screen/gwScreen/components/right/ProEquipSituationList.vue
View File

@ -1,41 +1,61 @@
<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">
<el-option v-for="item in options" :key="item.proCode" :label="item.proName" :value="item.proCode" />
<el-select
v-model="proCodeList"
placeholder=""
clearable
multiple
collapse-tags
filterable
size="mini"
:popper-append-to-body="false"
@change="changeProCode"
style="width: 180px"
>
<el-option v-for="(item, index) in options" :key="index" :label="item.label" :value="item.value" />
</el-select>
</div> -->
<div style="margin-left: 50px" @click="">更多 ></div>
<div style="margin-left: 50px" @click="openDialog">更多 ></div>
</div>
</div>
<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">
<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">{{ 7695 }}</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">{{ 37746 }}</div>
<div class="num-y" style="font-size: 16px; font-weight: 800">{{ equipNum }}</div>
</div>
</div>
</el-col>
@ -61,11 +81,11 @@
<!-- 表体：使用 v-for 渲染数据 -->
<tbody>
<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: 120px">{{ row.inUser }}</td>
<td>{{ row.scale }}</td>
<!-- <td>{{ row.usage }}</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>
@ -74,12 +94,13 @@
</template>
<script>
import { getEquipmentUseApi } from '@/api/wsScreen'
import { getEquipmentUseApi, getVoltageLevelApi } from '@/api/wsScreen'
import { getUseProjectListAPI } from '@/api/EquipmentLedger/equ-out'
export default {
data() {
return {
proCodeList: [],
proCode: '',
options: [],
proNum: 0,
@ -137,12 +158,16 @@ export default {
},
async getProList() {
try {
const res = await getUseProjectListAPI()
const res = await getVoltageLevelApi()
this.options = res.data
} catch (error) {
console.log('🚀 ~ error:', error)
}
},
changeProCode(val) {
this.proCode = val.length > 0 ? val.join(',') : ''
this.getList()
},
openDialog() {
this.$emit('openDialog')
},
@ -169,6 +194,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;
@ -176,24 +223,41 @@ export default {
padding-left: 45px;
font-family: DS-TITLE;
.title-text {
background: linear-gradient(180deg, #FFF 19.35%, #5DCBFE 77.42%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background: linear-gradient(180deg, #fff 19.35%, #5dcbfe 77.42%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.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 {
display: flex;
align-items: center;
}
}
.table-list {
margin-top: -20px;
@ -267,11 +331,6 @@ th,
td {
padding: 10px;
text-align: center;
white-space: nowrap;
/* border: 1px solid rgba(255, 255, 255, 0.3); // 边框颜色可根据背景调整 */
background: linear-gradient(to bottom, #f0f5f8, #5eb6f0);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
th {
@ -281,6 +340,7 @@ th {
thead {
background-image: url('../../img/tableHeader.png');
background-size: 100% 100%;
color: #7bbbf8;
}
tbody tr {
@ -294,7 +354,40 @@ tbody tr:hover {
}
::v-deep .el-select .el-input__inner {
background-color: #0C1837 !important ;
color: #fff !important;
background-color: #0a3362 !important ;
color: #0c1837 !important;
}
::v-deep .el-select-dropdown {
background-color: #0a3362 !important;
/* left: -300px !important;
width: 400px !important;
height: 180px !important;
border: 1px solid #0c1837 !important;
overflow: hidden; */
}
::v-deep .el-scrollbar {
/* height: 184px !important; */
background-color: #0c1837 !important;
}
::v-deep .el-select-dropdown__item {
color: #0c1837 !important;
}
::v-deep .el-select-dropdown__item.hover,
.el-select-dropdown__item:hover {
background: #0c1837 !important;
}
::v-deep .el-select-dropdown.is-multiple .el-select-dropdown__item.selected {
background: #0c1837 !important;
}
::v-deep .el-select__tags {
flex-wrap: nowrap !important;
}
::v-deep .el-select__tags .el-tag {
background-color: #28406c !important;
color: #0c1837 !important; // 标签内文字颜色设置为 #0c1837
}
::v-deep .el-select__tags .el-tag__close {
color: #0c1837 !important; // 标签关闭按钮颜色也设置为 #0c1837
}
</style>

38
src/views/screen/gwScreen/components/right/UsageRateMore.vue
View File

@ -11,7 +11,7 @@
<div>
<!-- 自定义title -->
<i class="close-btn" @click="dialogVisible = false" />
<div class="dlg-title">各单位装备在用率情况</div>
<div class="dlg-title">各网省装备在用率情况</div>
<el-table
v-loading="isLoading"
@ -107,6 +107,41 @@ export default {
</script>
<style lang="scss" scoped>
::v-deep .el-table {
// 启用斑马纹
&.el-table--striped .el-table__body {
tr.el-table__row--striped td {
background-color: #0d214580 !important; // 浅紫色
}
}
.el-table__header {
background: transparent;
}
&.el-table--striped .el-table__body tr.el-table__row:hover > td.el-table__cell {
background-color: rgba(16, 37, 81, 0.9) !important;
}
}
::v-deep .el-table td,
::v-deep .el-table th.is-leaf {
border-bottom: none !important;
}
::v-deep .el-table::before,
.el-table--group::after,
.el-table--border::after {
background-color: transparent !important;
}
/* 隐藏表格滚动条 */
::v-deep .el-table__body-wrapper::-webkit-scrollbar {
width: 0 !important;
height: 0 !important;
}
::v-deep .el-table__body-wrapper {
scrollbar-width: none !important; /* Firefox */
-ms-overflow-style: none !important; /* IE/Edge */
}
::v-deep .el-dialog {
background: transparent !important;
}
@ -115,6 +150,7 @@ export default {
background-image: url('../../img/right-dialog.png');
background-size: 100% 100%;
color: #fff;
height: 850px;
}
::v-deep .el-dialog__header {
display: none;

63
src/views/screen/gwScreen/components/right/UsageRateSituationList.vue
View File

@ -1,8 +1,8 @@
<template>
<div class="table-style">
<div class="title-tip">
<div>各网省装备在用率情况</div>
<div class="more" @click="">更多 ></div>
<div class="small_title">各网省装备在用率情况</div>
<div class="more" @click="openDialog">更多 ></div>
</div>
<div class="table-list scroll-container">
@ -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>
@ -91,6 +93,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;
@ -103,11 +117,29 @@ export default {
.more {
margin-right: 20px;
color: #5fbbdb;
cursor: pointer;
font-weight: 600;
font-family: '';
color: #5b99ad;
cursor: pointer;
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;
@ -126,11 +158,7 @@ td {
padding: 10px;
text-align: center;
white-space: nowrap;
/* border: 1px solid rgba(255, 255, 255, 0.3); // 边框颜色可根据背景调整 */
background: linear-gradient(to bottom, #f0f5f8, #5eb6f0);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
line-height: 22px;
// border: 1px solid rgba(255, 255, 255, 0.3); // 边框颜色可根据背景调整
}
th {
@ -141,6 +169,7 @@ th {
thead {
background-image: url('../../img/tableHeader.png');
background-size: 100% 100%;
color: #7BBBF8;
}
tbody tr {
@ -162,13 +191,13 @@ tbody tr:hover {
overflow: auto;
/* 隐藏滚动条轨迹 */
-ms-overflow-style: none; /* IE / Edge */
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* IE / Edge */
scrollbar-width: none; /* Firefox */
}
/* Chrome / Safari */
.scroll-container::-webkit-scrollbar {
width: 0; /* 或者直接隐藏 */
width: 0; /* 或者直接隐藏 */
height: 0;
background: transparent; /* 背景透明 */
}

46
src/views/screen/gwScreen/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">
@ -21,18 +21,18 @@
</div>
<div class="top-bottom">
<div class="usage-rate">
<div class="usage-rate-item" @click="">
<div class="usage-rate-item" @click="openDialogEquip(1)">
<img src="../../img/usage-rate.png" alt="" />
<div style="margin: 0 10px">在用率</div>
<div style="width: 250px">
<SegmentProgress :value="51" :total="20" />
<SegmentProgress :value="proportion" :total="20" />
</div>
</div>
</div>
<div class="turnround-rate">
<div class="turnround-rate-title" @click="">
<span style="color: #ccc; font-size: 15px">周转率 </span>
{{ 2.41 }}
<div class="turnround-rate-title" @click="openDialogEquip(2)">
<span style="color: #ccc; font-size: 15px;margin-right: 10px;font-weight: 500;">周转率 </span>
{{ turnoverRate }}
<span class="unit"> 次/年</span></div
>
</div>
@ -42,12 +42,12 @@
<el-row :gutter="20">
<el-col :span="10" :offset="0">
<div class="usage-rate-situation">
<UsageRateSituationList />
<UsageRateSituationList @openDialog="openDialog" />
</div>
</el-col>
<el-col :span="14" :offset="0">
<div class="usage-rate-pro">
<ProEquipSituationList />
<ProEquipSituationList @openDialog="openDialogPro" />
</div>
</el-col>
</el-row>
@ -96,7 +96,7 @@ export default {
}
},
created() {
// this.getInfo()
this.getInfo()
},
methods: {
async getInfo() {
@ -141,11 +141,27 @@ 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 {
height: 180px;
@ -199,8 +215,12 @@ export default {
-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 {