172 lines
4.5 KiB
Vue
172 lines
4.5 KiB
Vue
<template>
|
|
<el-container>
|
|
<el-header>
|
|
<div class="left-panel">
|
|
<el-button
|
|
type="primary"
|
|
icon="el-icon-refresh"
|
|
@click="syncData"
|
|
:loading="syncLoading"
|
|
>同步</el-button
|
|
>
|
|
</div>
|
|
<div class="right-panel">
|
|
<el-input
|
|
v-model="query.search"
|
|
placeholder="编号"
|
|
clearable
|
|
@keyup.enter="handleQuery"
|
|
></el-input>
|
|
<el-button
|
|
type="primary"
|
|
icon="el-icon-search"
|
|
@click="handleQuery"
|
|
></el-button>
|
|
</div>
|
|
</el-header>
|
|
<el-main class="nopadding">
|
|
<scTable
|
|
ref="table"
|
|
:apiObj="apiObj"
|
|
row-key="id"
|
|
:pageStr="pageStr"
|
|
:pageSizeStr="pageSizeStr"
|
|
:orderStr="orderStr"
|
|
:parseData="parseData"
|
|
@selection-change="selectionChange"
|
|
stripe
|
|
@resetQuery="resetQuery"
|
|
>
|
|
<el-table-column label="序号" type="index" width="50"></el-table-column>
|
|
<el-table-column
|
|
label="设备编号"
|
|
prop="deviceCode"
|
|
min-width="100"
|
|
></el-table-column>
|
|
<el-table-column
|
|
label="通道编号"
|
|
prop="channelCode"
|
|
min-width="150"
|
|
></el-table-column>
|
|
<el-table-column
|
|
label="通道名称"
|
|
prop="channelName"
|
|
min-width="250"
|
|
></el-table-column>
|
|
<el-table-column label="通道状态" prop="stat" min-width="80">
|
|
<template #default="scope">
|
|
<span v-if="scope.row.stat === 0" style="color:red">未启用</span>
|
|
<span v-else>启用</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="是否在线" prop="isOnline" min-width="180">
|
|
<template #default="scope">
|
|
<span v-if="scope.row.isOnline === 0"><el-tag type="warning">离线</el-tag></span>
|
|
<span v-else><el-tag type="success">在线</el-tag></span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column
|
|
label="创建时间"
|
|
prop="createTime"
|
|
width="160"
|
|
></el-table-column>
|
|
</scTable>
|
|
</el-main>
|
|
</el-container>
|
|
</template>
|
|
<script>
|
|
import videoChannelView from "./vchannel_view";
|
|
export default {
|
|
name: "monitor",
|
|
components: {
|
|
videoChannelView,
|
|
},
|
|
data() {
|
|
return {
|
|
syncLoading: false,
|
|
apiObj: this.$API.am.tdevice.dchannel,
|
|
pageStr: "pageNum",
|
|
pageSizeStr: "pageSize",
|
|
orderStr: "sort",
|
|
parseData: (res)=>{
|
|
return {
|
|
data: res, //分析无分页的数据字段结构
|
|
rows: res.pageData, //分析行数据字段结构
|
|
total: res.totalRows, //分析总数字段结构
|
|
}
|
|
},
|
|
dialogSave: false,
|
|
limitedVisible: false,
|
|
query: {},
|
|
selection: [],
|
|
search: {
|
|
keyword: null,
|
|
},
|
|
channelId: "",
|
|
};
|
|
},
|
|
methods: {
|
|
handlePosition(row) {
|
|
this.channelCode = row.channelCode;
|
|
this.channelName = row.channelName;
|
|
this.dialogSave = true;
|
|
},
|
|
//删除区域
|
|
async handleDel(row) {
|
|
await this.$API.am.area.delete.req(row.id).then((res) => {
|
|
if (res.err_msg) {
|
|
this.$message.error(res.err_msg);
|
|
} else {
|
|
this.$refs.table.refresh();
|
|
this.$message.success("删除成功");
|
|
}
|
|
});
|
|
},
|
|
|
|
//批量删除区域
|
|
async batch_del() {
|
|
this.$confirm(
|
|
`确定删除选中的 ${this.selection.length} 项吗？如果删除项中含有子集将会被一并删除`,
|
|
"提示",
|
|
{
|
|
type: "warning",
|
|
}
|
|
)
|
|
.then(() => {
|
|
const loading = this.$loading();
|
|
let params = { pk: { pks: this.selection } };
|
|
this.$API.am.area.deletes.req(params).then((res) => {
|
|
loading.close();
|
|
if (res.err_msg) {
|
|
this.$message.error(res.err_msg);
|
|
} else {
|
|
this.$refs.table.refresh();
|
|
this.$message.success("删除成功");
|
|
}
|
|
});
|
|
})
|
|
.catch(() => {});
|
|
},
|
|
//表格选择后回调事件
|
|
selectionChange(selection) {
|
|
this.selection = selection;
|
|
},
|
|
|
|
//搜索
|
|
handleQuery() {
|
|
this.$refs.table.queryData(this.query)
|
|
},
|
|
|
|
resetQuery() {
|
|
this.query = {};
|
|
},
|
|
async syncData() {
|
|
this.syncLoading = true;
|
|
var res = await this.$API.third.tdevice.dchannelSync.req({});
|
|
this.$refs.table.refresh();
|
|
this.syncLoading = false;
|
|
},
|
|
},
|
|
};
|
|
</script>
|