<template>
|
<!-- 操作按钮区域 -->
|
<div class="table-card" ref="tableCard" :bordered="false">
|
<div class="table-operator">
|
<a-form class="query-form" layout="inline" :form="queryParam" @keyup.enter.native="searchQuery">
|
<a-form-item label="网关名称">
|
<a-input style="width: 150px" placeholder="请输入网关名称" v-model="queryParam.searchKey"/>
|
</a-form-item>
|
<a-form-item label="状态">
|
<j-dict-select-tag
|
style="width: 150px"
|
v-model="queryParam.status"
|
placeholder="请选择"
|
dictCode="online_status"
|
/>
|
</a-form-item>
|
<a-button @click="searchQuery" type="primary" icon="search">查询</a-button>
|
<a-button @click="handleAdd" type="primary" icon="plus">新增</a-button>
|
<!--<a-upload-->
|
<!--name="file"-->
|
<!--:showUploadList="false"-->
|
<!--:multiple="false"-->
|
<!--:headers="tokenHeader"-->
|
<!--:action="importExcelUrl"-->
|
<!--@change="handleImportExcel"-->
|
<!-->-->
|
<!--<a-button type="primary" icon="import">导入</a-button>-->
|
<!--</a-upload>-->
|
</a-form>
|
</div>
|
<!-- table区域-begin -->
|
<div>
|
<split-pane :min-precent="10" :default-percent="17" split="vertical">
|
<template slot="paneL">
|
<div class="organ_tree_ct">
|
<organ-tree height="67vh" ref="orgTree" @tree-data-list="treeDataList"
|
@on-tree-node-select="onTreeNodeSelect"></organ-tree>
|
</div>
|
</template>
|
<template slot="paneR">
|
<a-table
|
class="infoTable"
|
ref="table"
|
size="middle"
|
rowKey="licenseNum"
|
:columns="columns"
|
:dataSource="dataSource"
|
:pagination="ipagination"
|
:loading="loading"
|
@change="handleTableChange"
|
>
|
<span slot="action" slot-scope="text, record">
|
<a @click="handleEdit(record)">编辑</a>
|
<a-divider type="vertical"/>
|
<a @click="pullCamera(record)">终端同步</a>
|
<a-divider type="vertical"/>
|
<a-popconfirm title="删除网关后自动删除关联终端，确定删除么？" @confirm="() => handleDelete(record.id)">
|
<a>删除</a>
|
</a-popconfirm>
|
</span>
|
<span slot="status" slot-scope="text, record" :style="{'color': record.status==1?'green':'red'}">
|
{{text}}
|
</span>
|
</a-table>
|
</template>
|
</split-pane>
|
</div>
|
<!-- table区域-end -->
|
<device-modal ref="deviceModal" @ok="modalFormOk"></device-modal>
|
</div>
|
</template>
|
<script>
|
import OrganTree from '../tools/OrganTree'
|
import {JeecgListMixin} from '@tievd/cube-block/lib/mixins/JeecgListMixin'
|
import splitPane from 'vue-splitpane'
|
import DeviceModal from "@views/jyz/modules/DeviceModal";
|
import _antDesignVue from "ant-design-vue";
|
import { getAction, putAction } from '@tievd/cube-block/lib/api/manage'
|
|
// 表头
|
const columns = [
|
{
|
title: '序号',
|
dataIndex: '',
|
key: 'rowIndex',
|
width: 60,
|
align: 'center',
|
customRender: function (t, r, index) {
|
return parseInt(index) + 1
|
},
|
},
|
{
|
title: '网关名称',
|
align: "center",
|
dataIndex: 'name',
|
},
|
{
|
title: '网关类型',
|
align: "center",
|
dataIndex: 'deviceType_dictText',
|
},
|
{
|
title: '序列号',
|
align: 'center',
|
dataIndex: 'sn',
|
},
|
{
|
title: 'IP地址',
|
align: "center",
|
dataIndex: 'deviceIp',
|
},
|
{
|
title: '所属机构',
|
align: "center",
|
dataIndex: 'orgCode_dictText',
|
},
|
{
|
title: '关联终端',
|
align: "center",
|
dataIndex: '',
|
customRender: function (t, r, index) {
|
return r.cameraOnlineCount + "/" + r.cameraCount
|
},
|
},
|
{
|
title: '状态',
|
align: "center",
|
dataIndex: 'status_dictText',
|
scopedSlots: { customRender: 'status' }
|
},
|
{
|
title: '操作',
|
align: 'center',
|
dataIndex: 'action',
|
scopedSlots: {customRender: 'action'},
|
},
|
]
|
|
export default {
|
name: 'DepartList',
|
mixins: [JeecgListMixin],
|
components: {
|
DeviceModal,
|
OrganTree,
|
splitPane,
|
},
|
// 页面数据
|
data() {
|
return {
|
iExpandedKeys: [],
|
loading: false,
|
autoExpandParent: true,
|
currFlowId: '',
|
currFlowName: '',
|
disable: true,
|
treeData: [],
|
visible: false,
|
departTree: [],
|
rightClickSelectedKey: '',
|
rightClickSelectedOrgCode: '',
|
hiding: true,
|
model: {},
|
dropTrigger: '',
|
columns: columns,
|
disableSubmit: false,
|
checkedKeys: [],
|
selectedKeys: [],
|
autoIncr: 1,
|
currSelected: {},
|
|
allTreeKeys: [],
|
checkStrictly: true,
|
|
form: this.$form.createForm(this),
|
labelCol: {
|
xs: {span: 24},
|
sm: {span: 5},
|
},
|
wrapperCol: {
|
xs: {span: 24},
|
sm: {span: 16},
|
},
|
graphDatasource: {
|
nodes: [],
|
edges: [],
|
},
|
validatorRules: {},
|
url: {
|
list: '/jyz/device/tables',
|
delete: '/jyz/device/delete',
|
importExcelUrl: 'jyz/device/importExcel'
|
},
|
orgCategoryDisabled: false,
|
/* 分页参数 */
|
ipagination: {
|
current: 1,
|
pageSize: 15,
|
pageSizeOptions: ['15', '30', '50'],
|
showTotal: function showTotal(total, range) {
|
return range[0] + '-' + range[1] + ' 共' + total + '条';
|
},
|
showQuickJumper: true,
|
showSizeChanger: true,
|
total: 0
|
},
|
queryParam:{
|
parentCode:JSON.parse(localStorage.getItem("userDepartInfo")).orgCode
|
}
|
}
|
},
|
// 计算属性
|
computed: {
|
importExcelUrl: function () {
|
return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`
|
}
|
},
|
// 方法
|
methods: {
|
handleImportExcel(info) {
|
var h = this.$createElement;
|
|
if (info.file.status !== 'uploading') {
|
console.log(info.file, info.fileList);
|
}
|
if (info.file.status === 'done') {
|
if (info.file.response.success) {
|
// this.$message.success(`${info.file.name} 文件上传成功`);
|
var _info$file$response = info.file.response,
|
name = _info$file$response.result,
|
_info$file$response$r = _info$file$response.result,
|
errorLines = _info$file$response$r.errorLines,
|
errorMessages = _info$file$response$r.errorMessages,
|
successLines = _info$file$response$r.successLines;
|
|
this.$message.success(name);
|
if (errorLines > 0) {
|
this.$warning({
|
title: '导入失败',
|
content: h('div', [errorMessages.map(function (item) {
|
return h(
|
'div',
|
{style: 'white-space:nowrap;overflow-x:scroll'},
|
[item]
|
);
|
})])
|
});
|
}
|
this.loadData();
|
} else {
|
this.$message.error(info.file.name + ' ' + info.file.response.message + '.');
|
}
|
} else if (info.file.status === 'error') {
|
if (info.file.response.status === 500) {
|
var data = info.file.response;
|
var token = _vue2.default.ls.get(_mutationTypes.ACCESS_TOKEN);
|
if (token && data.message.includes('Token失效')) {
|
_antDesignVue.Modal.error({
|
title: '登录已过期',
|
content: '很抱歉，登录已过期，请重新登录',
|
okText: '重新登录',
|
mask: false,
|
onOk: function onOk() {
|
_vue2.default.hackStore.dispatch('Logout').then(function () {
|
_vue2.default.ls.remove(_mutationTypes.ACCESS_TOKEN);
|
window.location.reload();
|
});
|
}
|
});
|
}
|
} else {
|
this.$message.error('\u6587\u4EF6\u4E0A\u4F20\u5931\u8D25');
|
}
|
}
|
},
|
|
onTreeNodeSelect(id, node) {
|
this.queryParam.parentCode = node.selectedNodes[0].data.props.orgCode
|
this.loadData()
|
},
|
handleEdit: function (record) {
|
this.$refs.deviceModal.edit(record)
|
this.$refs.deviceModal.title = '编辑'
|
},
|
handleAdd() {
|
this.$refs.deviceModal.add()
|
this.$refs.deviceModal.title = '新增'
|
},
|
modalFormOk() {
|
this.loadData();
|
},
|
treeDataList(data) {
|
if (data) {
|
this.queryParam.parentCode = data.orgCode
|
}
|
},
|
pullCamera(record) {
|
getAction("/jyz/device/syncData", {deviceSn: record.sn}).then((res) => {
|
if (res.code == 200) {
|
this.$message.success("同步成功")
|
}
|
})
|
},
|
},
|
created() {
|
},
|
// 在created后执行
|
mounted() {
|
},
|
|
// 监听
|
watch: {}
|
|
}
|
</script>
|
<style scoped lang="less">
|
@import '~@assets/less/common.less';
|
|
.organ_tree_ct {
|
height: 76vh;
|
}
|
.query-form{
|
display: flex;
|
align-items: center;
|
button{
|
margin-bottom: 0 !important;
|
}
|
}
|
</style>
|
