<template>
<app-container>
<search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput" >
<!--一般查询条件-->
<search-item>
<el-input v-model.trim="listQuery.devCode" size="small" placeholder="设备号/SN码" clearable />
</search-item>
<search-item>
<el-input v-model.trim="listQuery.devName" size="small" placeholder="设备名称" clearable />
</search-item>
<search-item>
<el-input v-model.trim="listQuery.IP" size="small" placeholder="设备IP" clearable />
</search-item>
<search-item>
<el-select v-model="listQuery.status" size="small" placeholder="设备状态" clearable>
<el-option value="0" label="在线"/>
<el-option value="1" label="离线"/>
<el-option value="2" label="故障"/>
</el-select>
</search-item>
</search-area>
<normal-table :data="list" :head="tableOption.head" :query="listQuery" :total="total" :columns="columns" :list-loading="listLoading" :options="tableOption.options" :tools-option="tableOption.toolsOption" size="small" @change="changePage" @selectionChange="handleSelectionChange">
<template slot="btns">
<el-button size="small" class="edit_btn" icon="el-icon-edit" @click="add()">
添加
</el-button>
<el-button size="small" class="edit_btn" icon="el-icon-delete" @click="batchDel()">
删除
</el-button>
<download-template :filename="filename"/>
<el-upload
:limit="1"
:show-file-list="false"
:http-request="uploadFile"
:file-list="fileList"
action="string"
style="float:right; margin:0 0 0 3px;"
accept=".xls,.xlsx">
<el-button slot="trigger" size="small" icon="el-icon-folder-add">批量导入</el-button>
</el-upload>
</template>
<template slot="columns">
<el-table-column label="操作" align="center" width="200">
<template slot-scope="scope">
<el-button type="text" size="small" @click.stop="detail(scope.row)">
详情
</el-button>
<el-button type="text" size="small" @click.stop="edit(scope.row)">
编辑
</el-button>
<el-button type="text" size="small" @click.stop="del(scope.row)">
删除
</el-button>
<el-button type="text" size="small" @click.stop="status(scope.row)">
状态计算系数
</el-button>
</template>
</el-table-column>
</template>
</normal-table>
<edit-device v-show="dialogFormVisible" ref="editDevice" @watchChild="fetchData" />
<edit-status v-show="dialogFormVisible1" ref="editStatus" @watchChild="fetchData" />
</app-container>
</template>
<script>
import DownloadTemplate from '@/components/DownloadTemplate/index'
import NormalTable from '@/components/NormalTable'
import AppContainer from '@/components/layout/AppContainer'
import SearchArea from '@/components/SearchArea/SearchArea'
import SearchItem from '@/components/SearchArea/SearchItem'
import { getDeviceListPage, addDevice, updateDevice, delDevice, batchDelDevice, batchImportDevice } from '@/api/device'
import EditDevice from './editDevice'
import EditStatus from "./editStatus";
export default {
name: 'DeviceList',
components: {EditStatus, SearchItem, SearchArea, AppContainer, NormalTable, EditDevice ,DownloadTemplate},
data() {
return {
listQuery: {
devCode: '',
devName: '',
IP: '',
status: '',
offset: 1,
limit: 20
}, // 筛选条件
columns: [
{
text: '设备号/SN码',
value: 'devCode',
align: 'center',
width: 150
},
{
text: '设备名称',
value: 'devName',
align: 'center',
width: 150
},
{
text: '设备IP',
value: 'IP',
align: 'center',
width: 150
},
{
text: '设备类型',
value: 'devTypeName',
align: 'center',
width: 150
},
{
text: '设备状态',
value: 'statusName',
align: 'center',
width: 150
},
{
text: '设备位置',
value: 'position',
align: 'center'
},
{
text: '安装时间',
value: 'time',
align: 'center',
width: 150
},
{
text: '备注',
value: 'remarks',
align: 'center'
}
], // 显示列
dialogFormVisible: false, // 是否显示编辑框
dialogFormVisible1: false, // 是否显示编辑框
timeRange: [], // 时间范围
multipleSelection: [], // 多选选中项
list: [], // 列表数据
total: 0, // 数据总数
listLoading: true, // 列表加载动画
filename: 'device_template.xlsx',
fileList: [],
tableOption: {
head: {
show: true, // 是否需要标题栏，
text: '数据列表' // 标题名称
},
options: {
needIndex: true // 是否需要序号列
},
toolsOption: {
selectColumns: false, // 是否需要筛选列
refresh: false, // 是否需要刷新按钮
needCheckBox: true
}
} // 表格属性
}
},
created() {
this.fetchData()
},
methods: {
uploadFile(param) {
// 判断文件大小是否符合要求
const _file = param.file
const isLt5M = _file.size / 1024 / 1024 < 5
if (!isLt5M) {
this.$message.error('请上传5M以下的excel文件')
return false
}
// 全屏加载动画
const loading = this.$loading({
lock: true,
text: '导入中,请稍后...',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
})
// 发起导入请求
batchImportDevice(_file).then(res => {
loading.close() // 关闭加载动画
if (res.code === 200) {
this.$message.success('导入成功')
this.fetchData(false)
} else {
this.$message.error(res.message)
}
}).catch(() => {
loading.close() // 关闭加载动画
})
this.fileList = []
},
fetchData() {
this.listLoading = true
const map = ['在线','离线','故障']
// getDeviceListPage(this.listQuery).then(response => {
// if (response.code === 200) {
// this.list = response.data.rows.map(item =>{
// item.statusName = map[Number(item.status)]
// return item
// })
// this.total = parseInt(response.data.total)
// this.listLoading = false
// }
// })
const that = this
setTimeout(function() {
that.list = [
{ id:'', devCode: '00103001', devName: '视频监控设备1', IP: '172.0.9.1', devType:'1',devTypeName: '视频监控摄像头', status: '0', statusName: '在线', position: '广州************', time: '2022-05-06',remarks: '',MTTR: '1.5', MTBF:'2', repairTotalTime:'1.5', recoveryTotalTime:'2', failures: '1' },
{ id:'', devCode: '00103003', devName: '闸机3', IP: '172.0.9.1', devType:'0',devTypeName: '闸机', status: '0', statusName: '在线', position: '广州************', time: '2022-05-06',remarks: '',MTTR: '1.5', MTBF:'2', repairTotalTime:'1.5', recoveryTotalTime:'2', failures: '1' },
{ id:'', devCode: '00103001', devName: '视频监控设备1', IP: '172.0.9.1', devType:'1',devTypeName: '视频监控摄像头', status: '0', statusName: '在线', position: '广州************', time: '2022-05-06',remarks: '',MTTR: '1.5', MTBF:'2', repairTotalTime:'1.5', recoveryTotalTime:'2', failures: '1' },
{ id:'', devCode: '00103003', devName: '闸机3', IP: '172.0.9.1', devType:'0',devTypeName: '闸机', status: '0', statusName: '在线', position: '广州************', time: '2022-05-06',remarks: '',MTTR: '1.5', MTBF:'2', repairTotalTime:'1.5', recoveryTotalTime:'2', failures: '1' },
{ id:'', devCode: '00103001', devName: '视频监控设备1', IP: '172.0.9.1', devType:'1',devTypeName: '视频监控摄像头', status: '0', statusName: '在线', position: '广州************', time: '2022-05-06',remarks: '',MTTR: '1.5', MTBF:'2', repairTotalTime:'1.5', recoveryTotalTime:'2', failures: '1' },
{ id:'', devCode: '00103003', devName: '闸机3', IP: '172.0.9.1', devType:'0',devTypeName: '闸机', status: '0', statusName: '在线', position: '广州************', time: '2022-05-06',remarks: '',MTTR: '1.5', MTBF:'2', repairTotalTime:'1.5', recoveryTotalTime:'2', failures: '1' },
]
that.total = 200
that.listLoading = false
}, 100)
},
// 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
changePage(val) {
if (val && val.size) {
this.listQuery.limit = val.size
}
if (val && val.page) {
this.listQuery.offset = val.page
}
this.fetchData()
},
batchDel(){
const ids = this.multipleSelection.map(item => item.id)
if(ids.length === 0) {
this.$message.warning('请至少选择一行')
return
}
this.$confirm(
'确定要删除所选数据吗？',
'确认操作',
{
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}
).then(() => {
batchDelDevice(ids).then(response => {
if (response.code === 200) {
this.$message.success('删除成功')
this.fetchData()
}
})
})
},
// 打开详情对话框
detail(row) {
this.$refs.editDevice.initDialog('detail', row)
},
// 新增区域
add() {
this.dialogFormVisible = true
this.$refs.editDevice.initDialog('create')
},
// 编辑区域信息
edit(row) {
this.dialogFormVisible = true
this.$refs.editDevice.initDialog('update', row)
},
// 状态计算系数
status(row) {
this.dialogFormVisible1 = true
this.$refs.editStatus.initDialog('update', row)
},
del(row) {
this.$confirm(
'确定要删除该条数据吗？',
'确认操作',
{
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}
).then(() => {
delDevice(row.id).then(response => {
if (response.code === 200) {
this.$message.success('删除成功')
this.fetchData()
}
})
})
},
handleSelectionChange(val) {
this.multipleSelection = val
},
clearInput() {
this.listQuery = {
devCode: '',
devName: '',
IP: '',
status: '',
offset: 1,
limit: 20
}
this.fetchData()
}
}
}
</script>
<style scoped>
</style>
