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-25 16:58:29 +08:00
parent 8735684339
commit a83740afac
12 changed files with 414 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/api/wsScreen/index.js
View File

@ -198,4 +198,13 @@ export const getEquipmentDetailsApi = (data = {}) => {
method: 'get',
params: data,
})
}
// 电压等级
export const getVoltageLevelApi = (data = {}) => {
return request({
url: '/material-mall/decChange/getVoltageLevel',
method: 'post',
data: data,
})
}

16
src/views/screen/cityScreen-old/components/engineerUsing/index.vue
View File

@ -83,6 +83,7 @@
<script>
import { equipmentInUseInTheProjectApi,getVoltageLevelApi } from "@/api/screen/cityScreen";
import { getUsageStatisticsApi } from '@/api/wsScreen'
export default {
data() {
@ -130,13 +131,14 @@ export default {
console.log(response,'getVoltageLevelApi')
if(response.code==200){
if(response.data&&response.data.length>0){
response.data.forEach(item=>{
let obj = {
label:item.voltage+'kV',
value:item.voltage
}
this.options.push(obj)
})
// response.data.forEach(item=>{
// let obj = {
// label:item.voltage+'kV',
// value:item.voltage
// }
// this.options.push(obj)
// })
this.options = response.data
// this.$set(this,'selectId',response.data[0].voltage)
}
}

15
src/views/screen/cityScreen/components/engineerUsing/index.vue
View File

@ -134,13 +134,14 @@ export default {
console.log(response, 'getVoltageLevelApi')
if (response.code == 200) {
if (response.data && response.data.length > 0) {
response.data.forEach((item) => {
let obj = {
label: item.voltage + 'kV',
value: item.voltage
}
this.options.push(obj)
})
// response.data.forEach((item) => {
// let obj = {
// label: item.voltage + 'kV',
// value: item.voltage
// }
// this.options.push(obj)
// })
this.options = response.data
// this.$set(this,'selectId',response.data[0].voltage)
}
}

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

@ -5,16 +5,18 @@
<div class="more more-warp">
<div>
<el-select
v-model="proCode"
v-model="proCodeList"
placeholder=""
clearable
multiple
collapse-tags
filterable
size="mini"
:popper-append-to-body="false"
@change="getList"
style="width: 120px"
@change="changeProCode"
style="width: 130px"
>
<el-option v-for="(item, index) in options" :key="index" :label="item.proName" :value="item.proCode" />
<el-option v-for="(item, index) in options" :key="index" :label="item.label" :value="item.value" />
</el-select>
</div>
<!-- <div style="margin-left: 15px" @click="openDialog">更多 ></div> -->
@ -83,12 +85,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,
@ -123,12 +126,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')
},
@ -303,7 +310,7 @@ thead {
background-image: url('../../img/tableHeader.png');
background-size: 100% 100%;
font-size: 13px;
color: #7BBBF8;
color: #7bbbf8;
}
tbody tr {
@ -317,25 +324,32 @@ tbody tr:hover {
}
::v-deep .el-select .el-input__inner {
background-color: #0C1837 !important ;
background-color: #0c1837 !important ;
color: #fff !important;
}
::v-deep .el-select-dropdown {
background-color: #0C1837 !important;
left: -300px !important;
width: 400px !important;
background-color: #0c1837 !important;
/* left: -300px !important;
width: 400px !important; */
height: 180px !important;
border: 1px solid #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;
background: #0c1837 !important;
}
::v-deep .el-select-dropdown.is-multiple .el-select-dropdown__item.selected {
background: #28406c !important;
}
::v-deep .el-select__tags {
flex-wrap: nowrap !important;
}
</style>

2
src/views/screen/wsScreenWidescreen/components/center/index.vue
View File

@ -419,7 +419,7 @@ export default {
console.log('🚀 ~ initChart ~ this.$router:', this.$router)
this.$router.push({
path: '/screen/cityScreen',
path: '/screen/cityWidescreen',
query: {
cityName: city,
},

106
src/views/screen/wsScreenWidescreen/components/left/AllEquip.vue
View File

@ -28,6 +28,7 @@
v-model="queryParams.deptName"
placeholder="请选择"
clearable
:popper-append-to-body="false"
style="width: 240px"
@change="changeDept"
>
@ -35,7 +36,13 @@
</el-select>
</el-form-item>
<el-form-item label="产权单位" prop="propertyUnit">
<el-select v-model="queryParams.propertyUnit" placeholder="请选择" clearable style="width: 240px">
<el-select
v-model="queryParams.propertyUnit"
placeholder="请选择"
clearable
:popper-append-to-body="false"
style="width: 240px"
>
<el-option
v-for="item in companyNameList"
:key="item.deptId"
@ -49,6 +56,7 @@
v-model="queryParams.major"
placeholder="请选择"
clearable
:popper-append-to-body="false"
style="width: 240px"
@change="changeProType"
>
@ -57,6 +65,7 @@
</el-form-item>
<el-form-item label="装备类目" prop="deviceSeries">
<el-cascader
popper-class="my-cas"
v-model="deviceSeries"
:options="deviceSeriesList"
clearable
@ -77,12 +86,24 @@
<el-input v-model="queryParams.originalCode" placeholder="请输入" clearable style="width: 240px" />
</el-form-item>
<el-form-item label="装备状态" prop="changeStatus">
<el-select v-model="queryParams.changeStatus" placeholder="请选择" clearable style="width: 240px">
<el-select
v-model="queryParams.changeStatus"
placeholder="请选择"
clearable
:popper-append-to-body="false"
style="width: 240px"
>
<el-option v-for="item in changeStatusList" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</el-form-item>
<el-form-item label="所在项目" prop="onProject">
<el-select v-model="queryParams.onProject" placeholder="请选择" clearable style="width: 240px">
<el-select
v-model="queryParams.onProject"
placeholder="请选择"
clearable
:popper-append-to-body="false"
style="width: 240px"
>
<el-option
v-for="item in onProjectList"
:key="item.proCode"
@ -99,6 +120,7 @@
</el-form-item>
<el-form-item label="出厂日期" prop="productionDate">
<el-date-picker
popper-class="my-date"
v-model="queryParams.productionDate"
type="date"
placeholder="请选择"
@ -109,7 +131,13 @@
/>
</el-form-item>
<el-form-item label="使用年限" prop="maxServiceLifeYears">
<el-select v-model="queryParams.maxServiceLifeYears" placeholder="请选择" clearable style="width: 240px">
<el-select
v-model="queryParams.maxServiceLifeYears"
placeholder="请选择"
clearable
:popper-append-to-body="false"
style="width: 240px"
>
<el-option v-for="item in workingHoursList" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</el-form-item>
@ -118,6 +146,7 @@
</el-form-item>
<el-form-item label="下次检测日期" prop="nextMaintenanceDate">
<el-date-picker
popper-class="my-date"
v-model="queryParams.nextMaintenanceDate"
type="date"
placeholder="请选择"
@ -464,6 +493,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;
}
@ -535,6 +599,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 +658,21 @@ 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>

53
src/views/screen/wsScreenWidescreen/components/left/EquipStatusMore.vue
View File

@ -16,7 +16,7 @@
<!-- 表单 -->
<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 :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>
@ -191,6 +191,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;
}
@ -262,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 {

35
src/views/screen/wsScreenWidescreen/components/left/UnitEquipConfig.vue
View File

@ -104,6 +104,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;
}

35
src/views/screen/wsScreenWidescreen/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;
}

35
src/views/screen/wsScreenWidescreen/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;
}

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

@ -4,8 +4,19 @@
<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="openDialog">更多 ></div>
@ -14,7 +25,16 @@
<div>
<div class="topView">
<div style="width: 25%; height: 100%; display: flex; align-items: center; justify-content: space-between;margin-bottom:20px">
<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>
@ -22,10 +42,10 @@
<div>
<el-row :gutter="20">
<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" />
<div>
<div style="color: #ccc; font-size: 12px; margin-top: 10px;">项目数（个）</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>
@ -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,
@ -101,7 +122,7 @@ export default {
try {
const params = {
type: this.tabIndex,
proCode: this.proCode
proCode: this.proCode,
}
const res = await getEquipmentUseApi(params)
this.tableData = res.data.equipmentUse || []
@ -111,12 +132,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')
},
@ -172,10 +197,10 @@ 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 {
@ -196,11 +221,11 @@ export default {
margin-left: 10px;
font-size: 20px;
font-weight: 500;
background: linear-gradient(180deg, #FFF 19.35%, #5DCBFE 77.42%);
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;
@ -279,7 +304,6 @@ th,
td {
padding: 10px;
text-align: center;
}
th {
@ -289,7 +313,7 @@ th {
thead {
background-image: url('../../img/tableHeader.png');
background-size: 100% 100%;
color: #7BBBF8;
color: #7bbbf8;
}
tbody tr {
@ -303,7 +327,32 @@ tbody tr:hover {
}
::v-deep .el-select .el-input__inner {
background-color: #1f4a85 !important ;
background-color: #0c1837 !important ;
color: #fff !important;
}
::v-deep .el-select-dropdown {
background-color: #0c1837 !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: #fff !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: #28406c !important;
}
::v-deep .el-select__tags {
flex-wrap: nowrap !important;
}
</style>

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

@ -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;
}