132 lines
3.8 KiB
Vue
132 lines
3.8 KiB
Vue
<template>
|
|
<section class="AppMonitorDevice">
|
|
<ai-list>
|
|
<ai-title slot="title" title="监控设备管理" isShowBottomBorder/>
|
|
<template #content>
|
|
<ai-search-bar>
|
|
<template #right>
|
|
<el-input prefix-icon="iconfont iconSearch" v-model="search.title" placeholder="设备名、MAC号" clearable
|
|
@clear="page.current = 1,search.title = '', getTableData()"
|
|
v-throttle="() => {page.current = 1, getTableData()}" size="small"/>
|
|
</template>
|
|
</ai-search-bar>
|
|
<ai-table :tableData="tableData" :colConfigs="colConfigs" :total="page.total" :current.sync="page.current"
|
|
:size.sync="page.size" @getList="getTableData">
|
|
<el-table-column label="操作" slot="options" align="center">
|
|
<el-row type="flex" slot-scope="{row}" align="middle" justify="center">
|
|
<ai-area v-model="row.areaId" :instance="instance" :inputClicker="false" customClicker
|
|
@change="handleSubmit(row)">
|
|
<el-button type="text">绑定</el-button>
|
|
</ai-area>
|
|
<el-button type="text" @click="handleLocate(row)">标绘</el-button>
|
|
<div/>
|
|
<el-button type="text" @click="handleShow(row)">设置</el-button>
|
|
</el-row>
|
|
</el-table-column>
|
|
</ai-table>
|
|
</template>
|
|
</ai-list>
|
|
<locate-dialog v-model="locate" :ins="instance" @confirm="v=>handleLocate(detail,v)"/>
|
|
<setting-dialog v-model="dialog" :ins="instance"/>
|
|
</section>
|
|
</template>
|
|
|
|
<script>
|
|
import LocateDialog from "../components/locateDialog";
|
|
import SettingDialog from "../components/settingDialog";
|
|
|
|
export default {
|
|
name: "AppMonitorDevice",
|
|
components: {SettingDialog, LocateDialog},
|
|
label: "监控设备管理",
|
|
props: {
|
|
instance: Function,
|
|
dict: Object,
|
|
permissions: Function
|
|
},
|
|
provide() {
|
|
return {
|
|
device: this
|
|
}
|
|
},
|
|
computed: {
|
|
colConfigs() {
|
|
return [
|
|
{type: 'selection'},
|
|
{label: "设备名", prop: "deviceName"},
|
|
{label: "上级归属", prop: "areaName"},
|
|
{label: "设备型号", prop: "devModel"},
|
|
{label: "MAC号", prop: "devMac"},
|
|
{label: "标绘状态", render: (h, {row}) => h('span', null, row?.lat ? '已绑定' : '待绑定')},
|
|
{slot: "options"}
|
|
]
|
|
},
|
|
isDetail() {
|
|
return !!this.$route.query?.id
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
search: {startTime: null, endTime: null, title: ""},
|
|
page: {current: 1, size: 10, total: 0},
|
|
tableData: [],
|
|
locate: false,
|
|
dialog: false,
|
|
detail: {}
|
|
}
|
|
},
|
|
created() {
|
|
this.dict.load("zyDeviceBindStatus")
|
|
if (this.isDetail) {
|
|
//TODO 待补充
|
|
} else this.getTableData()
|
|
},
|
|
methods: {
|
|
getTableData() {
|
|
this.instance.post("/app/appzyvideoequipment/getVideoList", null, {
|
|
params: {...this.search, ...this.page}
|
|
}).then(res => {
|
|
if (res?.data) {
|
|
this.tableData = res.data.records
|
|
this.page.total = res.data.total
|
|
}
|
|
})
|
|
},
|
|
handleSubmit(row) {
|
|
return this.instance.post("/app/appzyvideoequipment/addOrUpdate", {
|
|
...row, id: row.deviceId
|
|
}).then(res => {
|
|
if (res?.code == 0) {
|
|
this.$message.success("提交成功!")
|
|
this.getTableData()
|
|
}
|
|
})
|
|
},
|
|
handleShow(row) {
|
|
this.dialog = true
|
|
this.detail = row
|
|
},
|
|
handleLocate(row, locate) {
|
|
if (locate) {
|
|
let {lat, lng} = locate.location
|
|
this.handleSubmit({...row, lat, lng}).then(() => {
|
|
this.locate = false
|
|
this.getTableData()
|
|
})
|
|
} else {
|
|
this.locate = true
|
|
this.detail = row
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.AppMonitorDevice {
|
|
::v-deep .AiSearchBar {
|
|
margin-bottom: 10px;
|
|
}
|
|
}
|
|
</style>
|