You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
409 lines
14 KiB
409 lines
14 KiB
<template> |
|
<basic-container> |
|
<avue-crud :option="option" :table-loading="loading" :data="data" :page.sync="page" ref="crud" |
|
:permission="permissionList" @search-change="searchChange" @search-reset="searchReset" |
|
@current-change="currentChange" @size-change="sizeChange" @refresh-change="refreshChange" @on-load="onLoad"> |
|
<template slot="menuLeft"> |
|
<el-button type="primary" icon="el-icon-plus" size="small" @click="handleAdd">新增</el-button> |
|
</template> |
|
<template #menu="{ row, index, size }"> |
|
<el-button type="text" :size="size" icon="el-icon-view" @click="$refs.crud.rowEdit(row, index)">详情</el-button> |
|
<el-button type="text" :size="size" icon="el-icon-edit" @click="$refs.crud.rowEdit(row, index)">编辑</el-button> |
|
<el-button type="text" :size="size" icon="el-icon-delete" @click="$refs.crud.rowDel(row, index)">删除</el-button> |
|
</template> |
|
</avue-crud> |
|
<!-- 关联摄像头/手持终端 --> |
|
<el-dialog title="报警点设置" :visible.sync="dialogVisible" :append-to-body="true" :close-on-click-modal="false" |
|
:close-on-press-escape="false" custom-class="dia_box"> |
|
<el-form ref="form" v-model="addForm" label-width="100px" :rules="rules"> |
|
<el-row :gutter="20"> |
|
<el-col :span="12"> |
|
<el-form-item label="报警点：" prop="warnName"> |
|
<el-input v-model="addForm.warnName" placeholder="请输入" :readonly="isDetail ? true : false" maxlength="30"> |
|
</el-input> |
|
</el-form-item> |
|
<el-form-item label="经度：" prop="longitude"> |
|
<el-input v-model="addForm.longitude" placeholder="请输入" :readonly="isDetail ? true : false" maxlength="30"> |
|
</el-input> |
|
</el-form-item> |
|
</el-col> |
|
<el-col :span="12"> |
|
<el-form-item label="所在区域：" prop="warnAddress"> |
|
<el-input v-model="addForm.warnAddress" placeholder="请输入" :readonly="isDetail ? true : false" maxlength="30"> |
|
</el-input> |
|
</el-form-item> |
|
<el-form-item label="纬度：" prop="latitude"> |
|
<el-input v-model="addForm.latitude" placeholder="请输入" :readonly="isDetail ? true : false" maxlength="30"> |
|
</el-input> |
|
</el-form-item> |
|
</el-col> |
|
</el-row> |
|
<el-tabs v-model="deviceType" type="card" @tab-click="handleClick"> |
|
<el-tab-pane label="摄像头" name="1"> |
|
<el-table class="table_box" ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%" height="250px" |
|
@selection-change="(data) => selectionChange(data, '1')" row-key="id" :size="small"> |
|
<el-table-column type="selection" width="55" align="center" :reserve-selection="true"> |
|
</el-table-column> |
|
<el-table-column prop="name" label="设备名称"> |
|
</el-table-column> |
|
<el-table-column prop="imei" label="设备编号"> |
|
</el-table-column> |
|
<el-table-column prop="deviceType" label="设备大类"> |
|
</el-table-column> |
|
<el-table-column prop="deviceArea" label="所在区域"> |
|
</el-table-column> |
|
<el-table-column prop="position" label="安装位置"> |
|
</el-table-column> |
|
</el-table> |
|
<div class="page_box"> |
|
<el-pagination @size-change="handleSizeChange1" @current-change="handleCurrentChange1" |
|
:current-page="page1.currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="page1.pageSize" background |
|
layout="total, sizes, prev, pager, next, jumper" :total="page1.total"> |
|
</el-pagination> |
|
</div> |
|
</el-tab-pane> |
|
<el-tab-pane label="手持终端" name="2"> |
|
<el-table class="table_box" ref="multipleTable2" :data="tableData2" tooltip-effect="dark" style="width: 100%;" height="250px" |
|
@selection-change="(data) => selectionChange(data, '2')" row-key="id" :size="small"> |
|
<el-table-column type="selection" width="55" align="center" :reserve-selection="true"> |
|
</el-table-column> |
|
<el-table-column prop="name" label="设备名称"> |
|
</el-table-column> |
|
<el-table-column prop="imei" label="设备编号"> |
|
</el-table-column> |
|
<el-table-column prop="deviceType" label="设备大类"> |
|
</el-table-column> |
|
<el-table-column prop="deviceArea" label="所在区域"> |
|
</el-table-column> |
|
<el-table-column prop="position" label="安装位置"> |
|
</el-table-column> |
|
</el-table> |
|
<div class="page_box"> |
|
<el-pagination @size-change="handleSizeChange2" @current-change="handleCurrentChange2" |
|
:current-page="page2.currentPage2" :page-sizes="[10, 20, 30, 40]" :page-size="page2.pageSize" background |
|
layout="total, sizes, prev, pager, next, jumper" :total="page2.total"> |
|
</el-pagination> |
|
</div> |
|
</el-tab-pane> |
|
</el-tabs> |
|
</el-form> |
|
<div slot="footer" class="dialog-footer"> |
|
<el-button @click="dialogVisible = false">取 消</el-button> |
|
<el-button type="primary" @click="submitForm">确 定</el-button> |
|
</div> |
|
</el-dialog> |
|
</basic-container> |
|
</template> |
|
|
|
<script> |
|
import { bizLogin, bizDeviceList, bizDeviceStatus, bizNodeType } from "@/api/wirelessintrusion/wirelessintrusion"; |
|
import { mapGetters } from "vuex"; |
|
|
|
export default { |
|
data() { |
|
return { |
|
addForm: {}, |
|
rules: { |
|
warnName: [ |
|
{ required: true, message: '请输入报警点名称', trigger: 'blur' } |
|
], |
|
warnAddress: [ |
|
{ required: true, message: '请输入报警位置', trigger: 'blur' } |
|
], |
|
longitude: [ |
|
{ required: true, message: '请输入经度', trigger: 'blur' } |
|
], |
|
latitude: [ |
|
{ required: true, message: '请输入纬度', trigger: 'blur' } |
|
] |
|
}, |
|
query: {}, |
|
loading: true, |
|
page: { |
|
pageSize: 10, |
|
currentPage: 1, |
|
total: 0 |
|
}, |
|
selectionList: [], |
|
selectionList2: [], |
|
option: { |
|
height: 'auto', |
|
calcHeight: 30, |
|
dialogWidth: 950, |
|
tip: false, |
|
searchShow: true, |
|
searchMenuSpan: 6, |
|
border: true, |
|
index: false, |
|
viewBtn: false, |
|
editBtn: false, |
|
delBtn: false, |
|
addBtn: false, |
|
dialogClickModal: false, |
|
column: [ |
|
{ |
|
label: "报警点", |
|
prop: "name", |
|
search: true, |
|
}, |
|
{ |
|
label: "所在区域", |
|
prop: "remark", |
|
search: true, |
|
}, |
|
{ |
|
label: "经纬度", |
|
prop: "name", |
|
}, |
|
{ |
|
label: "关联摄像头", |
|
prop: "node", |
|
}, |
|
{ |
|
label: "关联手持终端", |
|
prop: "nodeLabel", |
|
}, |
|
{ |
|
label: "创建时间", |
|
prop: "createTime", |
|
labelWidth: 120, |
|
}, { |
|
label: "最后更新时间", |
|
prop: "lastOnline", |
|
}, |
|
] |
|
}, |
|
dialogVisible: false, |
|
deviceType: '1',//关联设备类型 |
|
data: [], |
|
//摄像头设备 |
|
page1: { |
|
pageSize: 10, |
|
currentPage: 1, |
|
total: 0, |
|
}, |
|
tableData: [], |
|
//手持终端设备 |
|
page2: { |
|
pageSize: 10, |
|
currentPage: 1, |
|
total: 0, |
|
}, |
|
tableData2: [], |
|
nodeType: [],//节点类型 |
|
}; |
|
}, |
|
computed: { |
|
...mapGetters(["permission"]), |
|
permissionList() { |
|
return { |
|
addBtn: this.vaildData(this.permission.notice_add, false), |
|
viewBtn: this.vaildData(this.permission.notice_view, false), |
|
delBtn: this.vaildData(this.permission.notice_delete, false), |
|
editBtn: this.vaildData(this.permission.notice_edit, false) |
|
}; |
|
}, |
|
}, |
|
mounted() { |
|
}, |
|
methods: { |
|
//新增弹框 |
|
handleAdd() { |
|
this.addForm = {}; |
|
this.deviceType = '1'; |
|
this.selectionList = []; |
|
this.selectionList2 = []; |
|
this.dialogVisible = true; |
|
this.queryDeviceList(); |
|
}, |
|
//切换设备类型 |
|
handleClick(item) { |
|
this.queryDeviceList(); |
|
}, |
|
//设备查询 |
|
queryDeviceList() { |
|
let token = window.sessionStorage.getItem('bizToken'); |
|
if (token == 'undefined' || !token) { |
|
bizLogin({ appKey: 'Arf7bd4f26', appSecret: 'kb207044c8' }).then(res => { |
|
window.sessionStorage.setItem('bizToken', res.data.data.token); |
|
if (this.deviceType == '1') { |
|
bizDeviceList(res.data.data.token, { pageSize: this.page1.pageSize, pageNum: this.page1.currentPage }).then(res2 => { |
|
const data = res2.data; |
|
this.page1.total = data.total; |
|
this.tableData = data.rows; |
|
}); |
|
} else { |
|
bizDeviceList(res.data.data.token, { pageSize: this.page1.pageSize, pageNum: this.page1.currentPage, pid: 98 }).then(res2 => { |
|
const data = res2.data; |
|
this.page2.total = data.total; |
|
this.tableData2 = data.rows; |
|
}); |
|
} |
|
}) |
|
} else { |
|
if (this.deviceType == '1') { |
|
bizDeviceList(token, { pageSize: this.page1.pageSize, pageNum: this.page1.currentPage }).then(res2 => { |
|
const data = res2.data; |
|
this.page1.total = data.total; |
|
this.tableData = data.rows; |
|
}); |
|
} else { |
|
bizDeviceList(token, { pageSize: this.page1.pageSize, pageNum: this.page1.currentPage, pid: 98 }).then(res2 => { |
|
const data = res2.data; |
|
this.page2.total = data.total; |
|
this.tableData2 = data.rows; |
|
}); |
|
} |
|
} |
|
}, |
|
//新增、编辑 |
|
submitForm() { |
|
this.$refs.form.valid((valid) => { |
|
if(valid) { |
|
|
|
} |
|
}) |
|
}, |
|
rowDel(row) { |
|
this.$confirm("确定将选择数据删除?", { |
|
confirmButtonText: "确定", |
|
cancelButtonText: "取消", |
|
type: "warning" |
|
}) |
|
.then(() => { |
|
}) |
|
.then(() => { |
|
this.onLoad(this.page); |
|
this.$message({ |
|
type: "success", |
|
message: "操作成功!" |
|
}); |
|
}); |
|
}, |
|
searchReset() { |
|
this.query = {}; |
|
this.onLoad(this.page); |
|
}, |
|
searchChange(params, done) { |
|
this.query = params; |
|
this.page.currentPage = 1; |
|
this.onLoad(this.page, params); |
|
done(); |
|
}, |
|
selectionChange(list, type) { |
|
if (type == '2') { |
|
this.selectionList2 = list; |
|
} |
|
else { |
|
this.selectionList = list; |
|
} |
|
}, |
|
currentChange(currentPage) { |
|
this.page.currentPage = currentPage; |
|
}, |
|
sizeChange(pageSize) { |
|
this.page.pageSize = pageSize; |
|
}, |
|
refreshChange() { |
|
this.onLoad(this.page, this.query); |
|
}, |
|
onLoad(page, params = {}) { |
|
this.loading = false; |
|
// let values = { |
|
// ...params, |
|
// ...this.query, |
|
// pid: 98 |
|
// }; |
|
// let token = window.sessionStorage.getItem('bizToken'); |
|
// if (token == 'undefined' || !token) { |
|
// bizLogin({ appKey: 'Arf7bd4f26', appSecret: 'kb207044c8' }).then(res => { |
|
// window.sessionStorage.setItem('bizToken', res.data.data.token); |
|
// this.loading = true; |
|
// bizDeviceList(res.data.data.token, { ...values, pageSize: page.pageSize, pageNo: page.currentPage }).then(res2 => { |
|
// const data = res2.data; |
|
// this.page.total = data.total; |
|
// this.data = data.records; |
|
// this.loading = false; |
|
// }); |
|
// }) |
|
// } else { |
|
// this.loading = true; |
|
// bizDeviceList(token, { ...values, pageSize: page.pageSize, pageNo: page.currentPage }).then(res2 => { |
|
// this.loading = false; |
|
// this.selectionClear(); |
|
// if (res2.data.code == 401) { |
|
// console.log(res2.data.code) |
|
// window.sessionStorage.removeItem('bizToken'); |
|
// this.onLoad(); |
|
// } |
|
// else if (res2.data.code == 200) { |
|
// const data = res2.data; |
|
// this.page.total = data.total; |
|
// data.rows.map(item => { |
|
// item.node = item.bizProduct.node; |
|
// // item.nodeLabel = this.renderLabel(item.node,'node'); |
|
// // item.statusLabel = this.renderLabel(item.status,'status') |
|
// }) |
|
// this.data = data.rows; |
|
// } |
|
// }, err => { |
|
// this.loading = false; |
|
// }); |
|
// } |
|
}, |
|
//摄像头 |
|
handleCurrentChange1(currentPage) { |
|
this.page1.currentPage = currentPage; |
|
this.queryDeviceList(); |
|
}, |
|
handleSizeChange1(pageSize) { |
|
this.page1.currentPage = 1; |
|
this.page1.pageSize = pageSize; |
|
this.queryDeviceList(); |
|
}, |
|
//手持终端 |
|
handleCurrentChange2(currentPage) { |
|
this.page2.currentPage = currentPage; |
|
this.queryDeviceList(); |
|
}, |
|
handleSizeChange2(pageSize) { |
|
this.page2.currentPage = 1; |
|
this.page2.pageSize = pageSize; |
|
this.queryDeviceList(); |
|
}, |
|
} |
|
}; |
|
</script> |
|
|
|
<style lang="scss" scoped> |
|
.dia_box { |
|
height: 700px; |
|
overflow: auto; |
|
|
|
.el-table { |
|
width: 100% !important; |
|
border: 1px solid #D6D8DF; |
|
} |
|
|
|
.el-table th.el-table__cell { |
|
background: #F7F8FA; |
|
} |
|
|
|
.dialog-footer { |
|
width: 100%; |
|
height: 100%; |
|
display: flex; |
|
align-items: center; |
|
justify-content: center; |
|
} |
|
|
|
.page_box { |
|
width: 90%; |
|
margin-left: 9%; |
|
display: flex; |
|
align-items: center; |
|
justify-content: center; |
|
margin-top: 15px; |
|
} |
|
} |
|
</style>
|
|
|