272 lines
6.7 KiB
Vue
272 lines
6.7 KiB
Vue
<template>
|
||
<div>
|
||
<el-dialog
|
||
v-if="dialogVisible"
|
||
v-loading="isLoading"
|
||
:visible.sync="dialogVisible"
|
||
width="60%"
|
||
:modal="false"
|
||
class="dlg-box"
|
||
>
|
||
<div>
|
||
<!-- 自定义title -->
|
||
<i class="close-btn" @click="dialogVisible = false" />
|
||
<div class="dlg-title">工程在用装备情况</div>
|
||
|
||
<!-- 表单 -->
|
||
<el-form :model="queryParams" ref="queryForm" size="small" inline @submit.native.prevent>
|
||
<el-form-item label="工程名称" prop="proName">
|
||
<el-input v-model="queryParams.proName" clearable placeholder="请输入" />
|
||
</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-table
|
||
v-loading="isLoading"
|
||
:data="tableList"
|
||
stripe
|
||
highlight-current-row
|
||
style="width: 100%"
|
||
:height="515"
|
||
class="table-container"
|
||
>
|
||
<el-table-column
|
||
type="index"
|
||
width="55"
|
||
label="序号"
|
||
align="center"
|
||
:index="(index) => (queryParams.pageNum - 1) * queryParams.pageSize + index + 1"
|
||
/>
|
||
<el-table-column
|
||
v-for="(column, index) in tableColumns"
|
||
show-overflow-tooltip
|
||
:key="index"
|
||
:label="column.label"
|
||
:prop="column.prop"
|
||
align="center"
|
||
>
|
||
</el-table-column>
|
||
</el-table>
|
||
|
||
<!-- 分页 -->
|
||
<pagination
|
||
v-show="total > 0"
|
||
:total="total"
|
||
:page.sync="queryParams.pageNum"
|
||
:limit.sync="queryParams.pageSize"
|
||
@pagination="getList"
|
||
/>
|
||
</div>
|
||
</el-dialog>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import { getEquipmentDetailsApi } from '@/api/wsScreen'
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
isLoading: false,
|
||
dialogVisible: false,
|
||
queryParams: {
|
||
pageNum: 1,
|
||
pageSize: 10,
|
||
proName: '', // 装备类型
|
||
},
|
||
tableColumns: [
|
||
{ label: '工程名称', prop: 'proName' },
|
||
{ label: '在用装备数量（台）', prop: 'inUser' },
|
||
{ label: '类型', prop: 'projectTypeName' },
|
||
{ label: '电压等级（kV）', prop: 'voltage' },
|
||
{ label: '规模（拆单公里）', prop: 'scale' },
|
||
{ label: '百公里线路装备使用情况', prop: 'usage' },
|
||
],
|
||
tableList: [],
|
||
total: 0,
|
||
}
|
||
},
|
||
created() {},
|
||
methods: {
|
||
openDialog() {
|
||
this.getList()
|
||
this.dialogVisible = true
|
||
},
|
||
async getList() {
|
||
try {
|
||
const res = await getEquipmentDetailsApi({ ...this.queryParams })
|
||
this.tableList = res.rows || []
|
||
this.total = res.total || 0
|
||
} catch (error) {
|
||
console.log('🚀 ~ error:', error)
|
||
}
|
||
},
|
||
// 查询
|
||
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-dialog {
|
||
background: transparent !important;
|
||
}
|
||
|
||
::v-deep .el-dialog .el-dialog__body {
|
||
background-image: url('../../img/right-dialog.png');
|
||
background-size: 100% 100%;
|
||
color: #fff;
|
||
}
|
||
::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;
|
||
}
|
||
::v-deep .el-button--primary {
|
||
background: #3165d6;
|
||
border-color: #3165d6;
|
||
}
|
||
::v-deep .el-button--mini.is-circle {
|
||
background-color: rgba(16, 37, 81, 0.5);
|
||
color: #fff;
|
||
}
|
||
// 表格 - 单元格
|
||
::v-deep .el-table th.el-table__cell {
|
||
color: #fff;
|
||
background-color: transparent !important;
|
||
}
|
||
// 表格 - 每一行
|
||
::v-deep .el-table tr {
|
||
background-color: transparent !important;
|
||
}
|
||
// 表头
|
||
::v-deep .el-table thead tr {
|
||
background: url('../../img/all-table-tr.png');
|
||
background-size: 100% 100%;
|
||
}
|
||
// 点击后背景色
|
||
::v-deep .el-table__body tr.current-row > td.el-table__cell,
|
||
.el-table__body tr.selection-row > td.el-table__cell {
|
||
background: #10264a;
|
||
}
|
||
// 鼠标移入
|
||
::v-deep .el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell {
|
||
background-color: rgba(16, 37, 81, 0.9);
|
||
}
|
||
// stripe - 斑马线
|
||
::v-deep .el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell {
|
||
background-color: #0d214580;
|
||
}
|
||
// 分页背景
|
||
::v-deep .pagination-container {
|
||
background-color: transparent;
|
||
}
|
||
// 分页-按钮-选中
|
||
::v-deep .el-pagination.is-background .el-pager li:not(.disabled).active {
|
||
background-color: #3165d6;
|
||
}
|
||
// 分页-按钮-未选中
|
||
::v-deep .el-pagination.is-background .el-pager li {
|
||
background-color: rgba(16, 37, 81, 0.5);
|
||
}
|
||
// 分页-上一页
|
||
::v-deep .el-pagination.is-background .btn-prev {
|
||
background-color: rgba(16, 37, 81, 0.5);
|
||
}
|
||
// 分页-下一页
|
||
::v-deep .el-pagination.is-background .btn-next {
|
||
background-color: rgba(16, 37, 81, 0.5);
|
||
}
|
||
|
||
// --
|
||
.btn {
|
||
background-color: rgba(16, 37, 81, 0.5);
|
||
color: #fff;
|
||
border: none;
|
||
// 选中颜色
|
||
&:hover {
|
||
background-color: rgba(16, 37, 81, 0.5);
|
||
}
|
||
// 点击颜色
|
||
&:active {
|
||
background-color: rgba(16, 37, 81, 0.5);
|
||
}
|
||
}
|
||
.table-container {
|
||
color: #fff;
|
||
background-color: #04112a80;
|
||
}
|
||
.dlg-box {
|
||
position: absolute;
|
||
.close-btn {
|
||
width: 39px;
|
||
height: 39px;
|
||
position: absolute;
|
||
right: 0;
|
||
top: 0;
|
||
cursor: pointer;
|
||
background-image: url('../../img/close.png');
|
||
background-size: 100% 100%;
|
||
}
|
||
.dlg-title {
|
||
margin-top: -25px;
|
||
margin-bottom: 45px;
|
||
font-size: 21px;
|
||
text-align: center;
|
||
font-weight: 800;
|
||
}
|
||
}
|
||
</style>
|