474 lines
18 KiB
Vue
474 lines
18 KiB
Vue
<template>
|
|
<div class="wrapper">
|
|
<el-dialog
|
|
style="margin-top: 5vh"
|
|
title=""
|
|
:visible.sync="open"
|
|
width="80%"
|
|
append-to-body
|
|
:close-on-click-modal="false"
|
|
@close="closeDialog"
|
|
>
|
|
<div class="content">
|
|
<!-- <TableDialog
|
|
ref="tableDialog"
|
|
:column-list="columnList"
|
|
>
|
|
|
|
</TableDialog>-->
|
|
<el-form
|
|
:model="queryParams"
|
|
ref="queryFormRef"
|
|
size="medium"
|
|
:inline="true"
|
|
label-width="80px"
|
|
style="margin-bottom: 20px"
|
|
>
|
|
<el-form-item
|
|
label="设备名称"
|
|
prop="devName"
|
|
v-if="status <= 8"
|
|
>
|
|
<el-input
|
|
v-model="queryParams.devName"
|
|
placeholder="请输入设备名称"
|
|
clearable
|
|
style="width: 240px"
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item
|
|
label="设备编号"
|
|
prop="devCode"
|
|
v-if="status <= 8"
|
|
>
|
|
<el-input
|
|
v-model="queryParams.devCode"
|
|
placeholder="请输入设备编号"
|
|
clearable
|
|
style="width: 240px"
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item
|
|
label="工程名称"
|
|
prop="proName"
|
|
v-if="status > 8"
|
|
>
|
|
<el-input
|
|
v-model="queryParams.proName"
|
|
placeholder="请输入工程名称"
|
|
clearable
|
|
style="width: 240px"
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item
|
|
label="工程类型"
|
|
prop="proType"
|
|
v-if="status === 9"
|
|
>
|
|
<el-select
|
|
v-model="queryParams.proType"
|
|
clearable
|
|
filterable
|
|
placeholder="请选择"
|
|
>
|
|
<el-option
|
|
v-for="item in proTypeRange"
|
|
:key="item.value"
|
|
:label="item.label"
|
|
:value="item.value"
|
|
/>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="日期" prop="date" v-if="status > 11">
|
|
<el-date-picker
|
|
v-model="queryParams.date"
|
|
style="width: 240px"
|
|
type="daterange"
|
|
value-format="yyyy-MM-dd"
|
|
range-separator="-"
|
|
start-placeholder="开始日期"
|
|
end-placeholder="结束日期"
|
|
/>
|
|
</el-form-item>
|
|
<el-button
|
|
style="margin-top: 3px"
|
|
type="primary"
|
|
icon="el-icon-search"
|
|
size="mini"
|
|
@click="getTableList(currentFunc)"
|
|
>搜索</el-button
|
|
>
|
|
</el-form>
|
|
|
|
<el-table
|
|
:data="tableList"
|
|
border
|
|
ref="tableRef"
|
|
style="width: 100%"
|
|
v-loading="loading"
|
|
:row-style="rowStyle"
|
|
:header-cell-style="{
|
|
background:
|
|
'linear-gradient(to bottom, #A0C9E8, #DDECFB)',
|
|
}"
|
|
>
|
|
<el-table-column
|
|
align="center"
|
|
width="80"
|
|
label="序号"
|
|
type="index"
|
|
/>
|
|
<el-table-column
|
|
v-for="(item, v) in columnList"
|
|
:key="v"
|
|
:label="item.t_label"
|
|
:prop="item.t_props"
|
|
:width="item.t_width"
|
|
align="center"
|
|
show-overflow-tooltip
|
|
>
|
|
<template slot-scope="scope">
|
|
<template v-if="item.t_slot === 'code'">
|
|
<span
|
|
>
|
|
{{ scope.row[item.t_props] }}
|
|
</span>
|
|
</template>
|
|
<template v-else-if="item.t_slot === 'warnType'">
|
|
{{ scope.row[item.t_props] }}异常
|
|
</template>
|
|
<template v-else>
|
|
{{ scope.row[item.t_props] || '-' }}
|
|
</template>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
|
|
<pagination
|
|
:total="total"
|
|
:page.sync="queryParams.pageNum"
|
|
:limit.sync="queryParams.pageSize"
|
|
@pagination="getTableList(currentFunc, currentParam)"
|
|
/>
|
|
</div>
|
|
</el-dialog>
|
|
|
|
<EnvirDialog
|
|
:if-open="envirOpen"
|
|
@closeDialog="envirOpen = false"
|
|
>
|
|
</EnvirDialog>
|
|
|
|
<DipDialog
|
|
:if-open="dipOpen"
|
|
@closeDialog="dipOpen = false"
|
|
>
|
|
</DipDialog>
|
|
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import Pagination from '../Pagination/index.vue'
|
|
import {
|
|
querySenseDeviceInfoApi,
|
|
queryRiskInfoApi,
|
|
queryProjListApi,
|
|
queryDeviceListApi
|
|
} from '@/api/tableApis'
|
|
import EnvirDialog from '@/components/dialog/envirDialog.vue'
|
|
import DipDialog from '@/components/dialog/dipDialog.vue'
|
|
export default {
|
|
name: 'commonDialog',
|
|
components: {
|
|
Pagination,
|
|
EnvirDialog,
|
|
DipDialog
|
|
},
|
|
data() {
|
|
return {
|
|
total: 0,
|
|
loading: false,
|
|
status: undefined,
|
|
queryParams: {
|
|
pageNum: 1,
|
|
pageSize: 10,
|
|
},
|
|
open: false,
|
|
tableList: [],
|
|
columnList: [],
|
|
additionalList: [],
|
|
currentFunc: undefined,
|
|
currentParam: undefined,
|
|
envirOpen: false,
|
|
dipOpen: false,
|
|
proTypeRange: [
|
|
{ label: '变电工程', value: '1' },
|
|
{ label: '线路工程', value: '2' },
|
|
{ label: '电缆工程', value: '3' },
|
|
]
|
|
}
|
|
},
|
|
methods: {
|
|
querySenseDeviceInfoApi,
|
|
queryRiskInfoApi,
|
|
queryProjListApi,
|
|
queryDeviceListApi,
|
|
setOpen(v) {
|
|
this.queryParams = {
|
|
pageNum: 1,
|
|
pageSize: 10,
|
|
}
|
|
this.open = v.open
|
|
this.status = v.param.order
|
|
switch (v.param.order) {
|
|
case 1:
|
|
this.columnList = [
|
|
{ t_props: 'devName', t_label: '设备名称' },
|
|
{ t_props: 'devCode', t_label: '设备编号' },
|
|
{ t_props: 'bdName', t_label: '边代名称' },
|
|
{ t_props: 'devStatusName', t_label: '工作状态' },
|
|
]
|
|
this.currentFunc = this.queryDeviceListApi
|
|
this.getTableList(this.queryDeviceListApi)
|
|
break;
|
|
case 2:
|
|
this.columnList = [
|
|
{ t_props: 'devName', t_label: '设备名称' },
|
|
{ t_props: 'devCode', t_label: '设备编号' },
|
|
{ t_props: 'bdName', t_label: '边代名称' },
|
|
{ t_props: 'devStatusName', t_label: '工作状态' },
|
|
]
|
|
this.currentFunc = this.queryDeviceListApi
|
|
this.currentParam = {
|
|
devStatus: 1
|
|
}
|
|
this.getTableList(this.queryDeviceListApi, {
|
|
devStatus: 1
|
|
})
|
|
break;
|
|
case 3:
|
|
this.columnList = [
|
|
{ t_props: 'devUserName', t_label: '使用人' },
|
|
{ t_props: 'devName', t_label: '设备名称' },
|
|
{ t_props: 'devCode', t_label: '设备编号', },
|
|
{ t_props: 'devTypeName', t_label: '设备类型' },
|
|
{ t_props: 'proName', t_label: '所属工程' },
|
|
{ t_props: 'bdDeviceName', t_label: '所属边代设备' },
|
|
{ t_props: 'devStatusName', t_label: '工作状态' },
|
|
]
|
|
this.currentFunc = this.querySenseDeviceInfoApi
|
|
this.currentParam = {
|
|
devTypeCode: 123
|
|
}
|
|
this.getTableList(this.querySenseDeviceInfoApi, {
|
|
devTypeCode: 123
|
|
})
|
|
break;
|
|
case 4:
|
|
this.columnList = [
|
|
{ t_props: 'devName', t_label: '设备名称' },
|
|
{ t_props: 'devCode', t_label: '设备编号', t_slot: 'code' },
|
|
{ t_props: 'devTypeName', t_label: '设备类型' },
|
|
{ t_props: 'proName', t_label: '所属工程' },
|
|
{ t_props: 'bdDeviceName', t_label: '所属边代设备' },
|
|
{ t_props: 'devStatusName', t_label: '工作状态' },
|
|
]
|
|
this.currentFunc = this.querySenseDeviceInfoApi
|
|
this.currentParam = {
|
|
devTypeCode: 116
|
|
}
|
|
this.getTableList(this.querySenseDeviceInfoApi, {
|
|
devTypeCode: 116
|
|
})
|
|
break;
|
|
case 5:
|
|
this.columnList = [
|
|
{ t_props: 'devName', t_label: '设备名称' },
|
|
{ t_props: 'devCode', t_label: '设备编号', t_slot: 'code' },
|
|
{ t_props: 'devTypeName', t_label: '设备类型' },
|
|
{ t_props: 'proName', t_label: '所属工程' },
|
|
{ t_props: 'bdDeviceName', t_label: '所属边代设备' },
|
|
{ t_props: 'devStatusName', t_label: '工作状态' },
|
|
]
|
|
this.currentFunc = this.querySenseDeviceInfoApi
|
|
this.currentParam = {
|
|
devTypeCode: 119
|
|
}
|
|
this.getTableList(this.querySenseDeviceInfoApi, {
|
|
devTypeCode: 119
|
|
})
|
|
break;
|
|
case 6:
|
|
this.columnList = [
|
|
{ t_props: 'devName', t_label: '设备名称' },
|
|
{ t_props: 'devCode', t_label: '设备编号', t_slot: 'code' },
|
|
{ t_props: 'devTypeName', t_label: '设备类型' },
|
|
{ t_props: 'proName', t_label: '所属工程' },
|
|
{ t_props: 'bdDeviceName', t_label: '所属边代设备' },
|
|
{ t_props: 'devStatusName', t_label: '工作状态' },
|
|
]
|
|
this.currentFunc = this.querySenseDeviceInfoApi
|
|
this.currentParam = {
|
|
devTypeCode: 117
|
|
}
|
|
this.getTableList(this.querySenseDeviceInfoApi, {
|
|
devTypeCode: 117
|
|
})
|
|
break;
|
|
case 7:
|
|
this.columnList = [
|
|
{ t_props: 'devName', t_label: '设备名称' },
|
|
{ t_props: 'devCode', t_label: '设备编号', t_slot: 'code' },
|
|
{ t_props: 'devTypeName', t_label: '设备类型' },
|
|
{ t_props: 'proName', t_label: '所属工程' },
|
|
{ t_props: 'bdDeviceName', t_label: '所属边代设备' },
|
|
{ t_props: 'devStatusName', t_label: '工作状态' },
|
|
]
|
|
this.currentFunc = this.querySenseDeviceInfoApi
|
|
this.currentParam = {
|
|
devTypeCode: 118
|
|
}
|
|
this.getTableList(this.querySenseDeviceInfoApi, {
|
|
devTypeCode: 118
|
|
})
|
|
break;
|
|
case 8:
|
|
this.columnList = [
|
|
{ t_props: 'devName', t_label: '设备名称' },
|
|
{ t_props: 'devCode', t_label: '设备编号', t_slot: 'code' },
|
|
{ t_props: 'devTypeName', t_label: '设备类型' },
|
|
{ t_props: 'proName', t_label: '所属工程' },
|
|
{ t_props: 'bdDeviceName', t_label: '所属边代设备' },
|
|
{ t_props: 'devStatusName', t_label: '工作状态' },
|
|
]
|
|
this.currentFunc = this.querySenseDeviceInfoApi
|
|
this.currentParam = {
|
|
devTypeCode: 124
|
|
}
|
|
this.getTableList(this.querySenseDeviceInfoApi, {
|
|
devTypeCode: 124
|
|
})
|
|
break;
|
|
case 9:
|
|
this.columnList = [
|
|
{ t_props: 'proName', t_label: '工程名称' },
|
|
{ t_props: 'relName', t_label: '电压等级' },
|
|
{ t_props: 'areaName', t_label: '建管单位' },
|
|
{ t_props: 'proTypeName', t_label: '工程类型' },
|
|
{ t_props: 'proStatusName', t_label: '工程状态' },
|
|
]
|
|
this.currentFunc = this.queryProjListApi
|
|
this.getTableList(this.queryProjListApi)
|
|
break;
|
|
case 10:
|
|
this.columnList = [
|
|
{ t_props: 'proName', t_label: '工程名称' },
|
|
{ t_props: 'relName', t_label: '电压等级' },
|
|
{ t_props: 'areaName', t_label: '建管单位' },
|
|
{ t_props: 'proTypeName', t_label: '工程类型' },
|
|
{ t_props: 'proStatusName', t_label: '工程状态' },
|
|
]
|
|
this.currentFunc = this.queryProjListApi
|
|
this.currentParam = {
|
|
proType: '1'
|
|
}
|
|
this.getTableList(this.queryProjListApi, {
|
|
proType: '1'
|
|
})
|
|
break;
|
|
case 11:
|
|
this.columnList = [
|
|
{ t_props: 'proName', t_label: '工程名称' },
|
|
{ t_props: 'relName', t_label: '电压等级' },
|
|
{ t_props: 'areaName', t_label: '建管单位' },
|
|
{ t_props: 'proTypeName', t_label: '工程类型' },
|
|
{ t_props: 'proStatusName', t_label: '工程状态' },
|
|
]
|
|
this.currentFunc = this.queryProjListApi
|
|
this.currentParam = {
|
|
proType: '2'
|
|
}
|
|
this.getTableList(this.queryProjListApi, {
|
|
proType: '2'
|
|
})
|
|
break;
|
|
case 12:
|
|
this.columnList = [
|
|
{ t_props: 'proName', t_label: '工程名称' },
|
|
{ t_props: 'warnTime', t_label: '预警时间' },
|
|
{ t_props: 'warnType', t_label: '预警内容' },
|
|
]
|
|
this.currentFunc = this.queryRiskInfoApi
|
|
this.getTableList(this.queryRiskInfoApi)
|
|
break;
|
|
case 13:
|
|
this.columnList = [
|
|
{ t_props: 'proName', t_label: '工程名称' },
|
|
{ t_props: 'warnTime', t_label: '预警时间' },
|
|
{ t_props: 'warnType', t_label: '预警内容', t_slot: 'warnType' },
|
|
]
|
|
this.currentFunc = this.queryRiskInfoApi
|
|
this.getTableList(this.queryRiskInfoApi)
|
|
break;
|
|
}
|
|
},
|
|
async getTableList(func, param) {
|
|
this.loading = true
|
|
if (this.queryParams.date) {
|
|
this.queryParams.startTime = this.queryParams.date[0]
|
|
this.queryParams.endTime = this.queryParams.date[1]
|
|
delete this.queryParams.date
|
|
}
|
|
if(param) {
|
|
Object.assign(this.queryParams, param)
|
|
}
|
|
let res = await func(this.queryParams)
|
|
/* res.rows.forEach(item => {
|
|
item.warnType = item.warnType + '异常'
|
|
}) */
|
|
if(res.data) {
|
|
this.tableList = res.data.rows
|
|
this.total = res.data.total
|
|
} else {
|
|
this.total = res.total
|
|
this.tableList = res.rows
|
|
}
|
|
this.loading = false
|
|
},
|
|
rowStyle(scope) {
|
|
if (scope.rowIndex % 2 === 0) {
|
|
return {
|
|
background: '#E1EEFF',
|
|
}
|
|
} else {
|
|
return {
|
|
background: '#EAF5FF',
|
|
}
|
|
}
|
|
},
|
|
closeDialog() {
|
|
this.queryParams = {
|
|
pageNum: 1,
|
|
pageSize: 10,
|
|
}
|
|
},
|
|
toggleCode(v) {
|
|
console.log(v)
|
|
if(v.devTypeName === '环境监测类') {
|
|
this.envirOpen = true
|
|
} else if(v.devTypeName === '基坑监测类') {
|
|
this.dipOpen = true
|
|
}
|
|
}
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.content {
|
|
box-sizing: border-box;
|
|
padding: 20px;
|
|
}
|
|
</style>
|