356 lines
10 KiB
Vue
356 lines
10 KiB
Vue
<template>
|
|
<div>
|
|
<el-dialog
|
|
v-if="dialogVisible"
|
|
v-loading="isLoading"
|
|
:visible.sync="dialogVisible"
|
|
width="65%"
|
|
:modal="false"
|
|
class="dlg-box"
|
|
>
|
|
<div>
|
|
<!-- 自定义title -->
|
|
<i class="close-btn" @click="dialogVisible = false" />
|
|
<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"
|
|
:data="tableList"
|
|
stripe
|
|
highlight-current-row
|
|
style="width: 100%"
|
|
height="546"
|
|
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"
|
|
>
|
|
<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
|
|
|
|
:total="total"
|
|
:page.sync="queryParams.pageNum"
|
|
:limit.sync="queryParams.pageSize"
|
|
@pagination="getList"
|
|
/>
|
|
</div>
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
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: '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,
|
|
}
|
|
},
|
|
created() {},
|
|
methods: {
|
|
openDialog() {
|
|
this.dialogVisible = true
|
|
this.getList()
|
|
},
|
|
async getList() {
|
|
try {
|
|
// 获取设备列表
|
|
const res = await getDeviceListAPI(this.queryParams)
|
|
this.tableList = res.data?.rows || []
|
|
this.total = res.data?.total || 0
|
|
} catch (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/all-dialog.png');
|
|
background-size: 100% 100%;
|
|
color: #fff;
|
|
}
|
|
::v-deep .el-dialog__header {
|
|
display: none;
|
|
}
|
|
// 输入框
|
|
::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);
|
|
}
|
|
::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 {
|
|
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>
|