sctable 修改 外加样式调整
This commit is contained in:
曹前明
parent
ea1cffeff6
commit
0e1c21710a
|
|
@ -99,9 +99,10 @@ export default {
|
|||
video: {
|
||||
list: {
|
||||
name: "获取视频设备列表",
|
||||
req: async function(){
|
||||
req: async function(data){
|
||||
return await http.post(
|
||||
`${config.API_URL}/third/tdevice/vchannel/`,
|
||||
data
|
||||
);
|
||||
}
|
||||
},
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ import http from "@/utils/request"
|
|||
export default {
|
||||
tdevice: {
|
||||
list: {
|
||||
name: "三方喇叭接口",
|
||||
name: "三方设备接口",
|
||||
req: async function(data){
|
||||
return await http.get(
|
||||
`${config.API_URL}/third/tdevice/`,
|
||||
|
|
@ -30,6 +30,33 @@ export default {
|
|||
);
|
||||
}
|
||||
},
|
||||
speakerSync: {
|
||||
name: "同步喇叭",
|
||||
req: async function(data){
|
||||
return await http.post(
|
||||
`${config.API_URL}/third/tdevice/speaker_sync/`,
|
||||
data
|
||||
);
|
||||
}
|
||||
},
|
||||
dchannelSync: {
|
||||
name: "同步闸机",
|
||||
req: async function(data){
|
||||
return await http.post(
|
||||
`${config.API_URL}/third/tdevice/dchannel_sync/`,
|
||||
data
|
||||
);
|
||||
}
|
||||
},
|
||||
vchannelSync: {
|
||||
name: "同步监控",
|
||||
req: async function(data){
|
||||
return await http.post(
|
||||
`${config.API_URL}/third/tdevice/vchannel_sync/`,
|
||||
data
|
||||
);
|
||||
}
|
||||
},
|
||||
},
|
||||
blt:{
|
||||
list:{
|
||||
|
|
|
|||
|
|
@ -83,7 +83,7 @@
|
|||
></el-button>
|
||||
<el-button
|
||||
v-if="!hideRefresh"
|
||||
@click="reload"
|
||||
@click="reload(null)"
|
||||
icon="el-icon-refresh-right"
|
||||
circle
|
||||
style="margin-left: 15px"
|
||||
|
|
@ -175,6 +175,10 @@ export default {
|
|||
stripe: { type: Boolean, default: false },
|
||||
pageSize: { type: Number, default: config.pageSize },
|
||||
pageSizes: { type: Array, default: config.pageSizes },
|
||||
pageStr: { type: String, default: config.request.page },
|
||||
pageSizeStr: { type: String, default: config.request.pageSize },
|
||||
orderStr: { type: String, default: config.request.order },
|
||||
parseData: { type: Function, default: config.parseData },
|
||||
rowKey: { type: String, default: "" },
|
||||
summaryMethod: { type: Function, default: null },
|
||||
column: { type: Object, default: () => {} },
|
||||
|
|
@ -231,6 +235,7 @@ export default {
|
|||
};
|
||||
},
|
||||
mounted() {
|
||||
console.log(this.parseData);
|
||||
//判断是否开启自定义列
|
||||
if (this.column) {
|
||||
this.getCustomColumn();
|
||||
|
|
@ -266,13 +271,13 @@ export default {
|
|||
async getData() {
|
||||
this.loading = true;
|
||||
var reqData = {
|
||||
[config.request.page]: this.currentPage,
|
||||
[config.request.pageSize]: this.scPageSize,
|
||||
[this.pageStr]: this.currentPage,
|
||||
[this.pageSizeStr]: this.scPageSize,
|
||||
// [config.request.prop]: this.prop,
|
||||
[config.request.order]: this.order,
|
||||
[this.orderStr]: this.order,
|
||||
};
|
||||
if (this.hidePagination) {
|
||||
reqData[config.request.page] = 0;
|
||||
reqData[this.pageStr] = 0;
|
||||
// delete reqData[config.request.page]
|
||||
// delete reqData[config.request.pageSize]
|
||||
}
|
||||
|
|
@ -283,10 +288,13 @@ export default {
|
|||
if (res.length == 0) {
|
||||
this.emptyText = "暂无数据";
|
||||
}
|
||||
if(this.$route.path==='/sys/dept'||this.$route.path==='/sys/perm'){
|
||||
if (
|
||||
this.$route.path === "/sys/dept" ||
|
||||
this.$route.path === "/sys/perm"
|
||||
) {
|
||||
this.tableData = this.redata(res);
|
||||
console.log(this.tableData)
|
||||
}else{
|
||||
console.log(this.tableData);
|
||||
} else {
|
||||
this.tableData = res || [];
|
||||
}
|
||||
this.loading = false;
|
||||
|
|
@ -299,7 +307,7 @@ export default {
|
|||
return false;
|
||||
}
|
||||
try {
|
||||
var response = config.parseData(res);
|
||||
var response = this.parseData(res);
|
||||
if (response.total === 0) {
|
||||
this.emptyText = "暂无数据";
|
||||
}
|
||||
|
|
@ -307,12 +315,15 @@ export default {
|
|||
if (this.hidePagination) {
|
||||
dataList = response.data || [];
|
||||
} else {
|
||||
dataList = response.rows?response.rows:response.data.rows?response.data.rows:response.data.pageData?response.data.pageData:[];
|
||||
dataList = response.rows
|
||||
}
|
||||
if(this.$route.path==='/sys/dept'||this.$route.path==='/ops/menu'){
|
||||
if (
|
||||
this.$route.path === "/sys/dept" ||
|
||||
this.$route.path === "/ops/menu"
|
||||
) {
|
||||
this.tableData = this.redata(dataList);
|
||||
console.log(this.tableData)
|
||||
}else{
|
||||
console.log(this.tableData);
|
||||
} else {
|
||||
this.tableData = dataList || [];
|
||||
}
|
||||
this.total = response.total || 0;
|
||||
|
|
@ -326,20 +337,20 @@ export default {
|
|||
return false;
|
||||
}
|
||||
},
|
||||
redata(postList){
|
||||
redata(postList) {
|
||||
let posts = [];
|
||||
postList.forEach(item => {
|
||||
postList.forEach((item) => {
|
||||
let obj = new Object();
|
||||
obj = {...item};
|
||||
obj = { ...item };
|
||||
obj.parentId = item.parent;
|
||||
posts.push(obj)
|
||||
posts.push(obj);
|
||||
});
|
||||
let obj = posts.reduce((res, v) => (res[v.id] = v , res), {});//Object
|
||||
let obj = posts.reduce((res, v) => ((res[v.id] = v), res), {}); //Object
|
||||
let arr = [];
|
||||
for (let item of posts) {
|
||||
if (item.parentId == null) {
|
||||
arr.push(item);
|
||||
continue
|
||||
continue;
|
||||
}
|
||||
let parent = obj[item.parentId];
|
||||
parent.children = parent.children ? parent.children : [];
|
||||
|
|
@ -362,17 +373,17 @@ export default {
|
|||
this.$refs.scTable.clearSelection();
|
||||
this.getData();
|
||||
},
|
||||
//更新数据 合并上一次params
|
||||
upData(params, page = 1) {
|
||||
//查询数据 追加query
|
||||
upData(query, page = 1) {
|
||||
this.currentPage = page;
|
||||
this.$refs.scTable.clearSelection();
|
||||
Object.assign(this.tableParams, params || {});
|
||||
Object.assign(this.tableParams, query);
|
||||
this.getData();
|
||||
},
|
||||
//重载数据 替换params 保留sort
|
||||
queryData(params, page = 1) {
|
||||
//查询数据 追加query 去除列filter
|
||||
queryData(query, page = 1) {
|
||||
this.currentPage = page;
|
||||
this.tableParams = params || {};
|
||||
Object.assign(this.tableParams, query);
|
||||
this.$refs.scTable.clearSelection();
|
||||
this.$refs.scTable.clearFilter();
|
||||
this.getData();
|
||||
|
|
@ -380,12 +391,12 @@ export default {
|
|||
//重载数据 替换params
|
||||
reload(params, page = 1) {
|
||||
this.currentPage = page;
|
||||
this.tableParams = params || {};
|
||||
this.tableParams = params || this.params;
|
||||
this.$refs.scTable.clearSelection();
|
||||
this.$refs.scTable.clearSort();
|
||||
this.$refs.scTable.clearFilter();
|
||||
this.getData();
|
||||
this.$emit('resetQuery')
|
||||
this.$emit("resetQuery");
|
||||
},
|
||||
//自定义变化事件
|
||||
columnSettingChange(userColumn) {
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
<template>
|
||||
<div style="display:flex;row nowrap">
|
||||
|
||||
<!-- <el-tag
|
||||
v-for="user in userData"
|
||||
:key="user.id"
|
||||
|
|
@ -19,13 +18,13 @@
|
|||
|
||||
<el-dialog
|
||||
title="选择人员"
|
||||
width="90%"
|
||||
width="80%"
|
||||
height="100px"
|
||||
v-model="dialoguser"
|
||||
:before-close="handleClose"
|
||||
:append-to-body="true"
|
||||
:close-on-click-modal="false"
|
||||
>
|
||||
<el-card>
|
||||
<el-row>
|
||||
<el-col :md="8" :sm="24">
|
||||
<el-main class="nopadding">
|
||||
|
|
@ -46,10 +45,7 @@
|
|||
</el-tree>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="按岗位分类">
|
||||
<el-input
|
||||
placeholder="输入关键字进行过滤"
|
||||
v-model="filterTexts"
|
||||
>
|
||||
<el-input placeholder="输入关键字进行过滤" v-model="filterTexts">
|
||||
</el-input>
|
||||
|
||||
<el-tree
|
||||
|
|
@ -94,7 +90,6 @@
|
|||
row-key="id"
|
||||
@selection-change="selectionChange"
|
||||
stripe
|
||||
:hidePagination="true"
|
||||
hideDo
|
||||
@resetQuery="resetQuery"
|
||||
>
|
||||
|
|
@ -118,47 +113,25 @@
|
|||
label="创建时间"
|
||||
prop="create_time"
|
||||
></el-table-column>
|
||||
<!--
|
||||
<el-table-column
|
||||
label="操作"
|
||||
fixed="right"
|
||||
align="left"
|
||||
width="100"
|
||||
>
|
||||
<template #default="scope">
|
||||
<el-button-group>
|
||||
<el-button
|
||||
type="primary"
|
||||
icon="el-icon-plus"
|
||||
@click="handleForm('add', scope.row)"
|
||||
></el-button>
|
||||
</el-button-group>
|
||||
</template>
|
||||
</el-table-column>-->
|
||||
</scTable>
|
||||
</el-main>
|
||||
<div style="padding-top: 15px">
|
||||
<el-input
|
||||
style="width: 80%"
|
||||
v-model="username"
|
||||
placeholder="选择人员的姓名"
|
||||
clearable
|
||||
></el-input>
|
||||
<el-button @click="visible = false" style="float: right"
|
||||
>取 消</el-button
|
||||
>
|
||||
<el-row style="padding-top: 8px">
|
||||
<el-col :md="16" :sm="24">
|
||||
<span style="font-weight:bold">已选人员:</span>{{username}}
|
||||
</el-col>
|
||||
<el-col :md="8" :sm="24" style="text-align:right">
|
||||
<el-button @click="visible = false"
|
||||
>取 消</el-button>
|
||||
<el-button
|
||||
v-if="mode != 'show'"
|
||||
style="float: right"
|
||||
type="primary"
|
||||
:loading="isSaveing"
|
||||
@click="submitfrom()"
|
||||
>提 交</el-button
|
||||
>
|
||||
</div>
|
||||
>提 交</el-button >
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-card>
|
||||
</el-dialog>
|
||||
</template>
|
||||
<script>
|
||||
|
|
@ -219,8 +192,6 @@ export default {
|
|||
this.getUser();
|
||||
this.getDept();
|
||||
this.getPost();
|
||||
|
||||
|
||||
},
|
||||
watch: {
|
||||
filterText(val) {
|
||||
|
|
@ -231,26 +202,24 @@ export default {
|
|||
},
|
||||
dataValue(val) {
|
||||
this.$emit("input", val);
|
||||
console.log(val)
|
||||
console.log(val);
|
||||
},
|
||||
userData(val) {
|
||||
if (val) {
|
||||
this.change();
|
||||
}
|
||||
},
|
||||
|
||||
},
|
||||
methods: {
|
||||
showDialog() {
|
||||
this.dialoguser = true;
|
||||
this.$nextTick(function () {
|
||||
this.apiObj.map(item => {
|
||||
this.apiObj.map((item) => {
|
||||
if (item.id === this.user) {
|
||||
this.$refs.table.toggleRowSelection(item, true)
|
||||
this.$refs.table.toggleRowSelection(item, true);
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
});
|
||||
});
|
||||
},
|
||||
//加载人员
|
||||
getUser() {
|
||||
|
|
|
|||
|
|
@ -22,60 +22,335 @@
|
|||
--el-color-primary-dark-9: #060f19;
|
||||
}
|
||||
|
||||
.el-menu {border: none!important;}
|
||||
.el-menu .el-menu-item a {color: inherit;text-decoration: none;display: block;width:100%;height:100%;position: absolute;top:0px;left:0px;}
|
||||
.el-form-item-msg {font-size: 12px;color: #999;clear: both;width: 100%;}
|
||||
.el-container {height: 100%;}
|
||||
.el-aside {border-right: 1px solid var(--el-border-color-light);}
|
||||
.el-container + .el-aside {border-right: 0;border-left: 1px solid var(--el-border-color-light);}
|
||||
.el-header {background: #fff;border-bottom: 1px solid var(--el-border-color-light);padding:13px 15px;display: flex;justify-content: space-between;align-items: center;}
|
||||
.el-header .left-panel {display: flex;align-items: center;}
|
||||
.el-header .right-panel {display: flex;align-items: center;}
|
||||
.el-header .right-panel > * + * {margin-left:10px;}
|
||||
.el-footer {background: #fff;border-top: 1px solid var(--el-border-color-light);padding:13px 15px;height: 51px;}
|
||||
.el-main {padding:15px;}
|
||||
.el-main.nopadding {padding:0;background: #fff;}
|
||||
.el-drawer__body {overflow: auto;padding:0;}
|
||||
.el-popconfirm__main {margin: 14px 0;}
|
||||
.el-card__header {border-bottom: 0;font-size: 17px;font-weight: bold;padding:15px 20px 0px 20px;}
|
||||
.el-dialog__title {font-size: 17px;font-weight: bold;}
|
||||
.el-drawer__header>:first-child {font-size: 17px;font-weight: bold;}
|
||||
.el-tree.menu .el-tree-node__content {height:36px;}
|
||||
.el-tree.menu .el-tree-node__content .el-tree-node__label .icon {margin-right: 5px;}
|
||||
.el-progress__text {font-size: 12px!important;}
|
||||
.el-progress__text i {font-size: 14.4px!important;}
|
||||
.el-step.is-horizontal .el-step__line {height:1px;}
|
||||
.el-step__title {font-size: 14px;}
|
||||
.drawerBG {background: #f6f8f9;}
|
||||
.el-button+.el-dropdown {margin-left: 10px;}
|
||||
.el-button-group+.el-dropdown {margin-left: 10px;}
|
||||
.el-tag+.el-tag {margin-left: 10px;}
|
||||
.el-button-group+.el-button-group {margin-left: 10px;}
|
||||
.el-tabs__nav-wrap::after {height: 1px;}
|
||||
.el-table th.is-sortable {transition: .1s;}
|
||||
.el-table th.is-sortable:hover {background: #eee;}
|
||||
.el-table .el-table__body-wrapper {background: #f6f8f9;}
|
||||
.el-col .el-card {margin-bottom: 15px;}
|
||||
.el-main {flex-basis: 100%;}
|
||||
.el-main > .scTable .el-table--border::before {display: none;}
|
||||
.el-main > .scTable .el-table--border::after {display: none;}
|
||||
.el-main > .scTable .el-table--border .el-table__inner-wrapper::after {display: none;}
|
||||
.el-main > .scTable .el-table__border-left-patch {display: none;}
|
||||
.el-main > .scTable .el-table--border .el-table__inner-wrapper tr:first-child td:first-child {border-left: 0;}
|
||||
.el-main > .scTable .el-table--border .el-table__inner-wrapper tr:first-child th:first-child {border-left: 0;}
|
||||
.el-table.el-table--large {font-size: 14px;}
|
||||
.el-table.el-table--small {font-size: 12px;}
|
||||
.el-table {font-size: 12px;}
|
||||
.el-radio-button__inner {font-size: 12px;}
|
||||
.el-checkbox-button__inner {font-size: 12px;}
|
||||
.el-menu {
|
||||
border: none !important;
|
||||
}
|
||||
|
||||
.aminui-side-split li.active {background-color: var(--el-color-primary);}
|
||||
.adminui-tags li:hover {background-color: var(--el-color-primary-light-9);}
|
||||
.adminui-tags li.active {background-color: var(--el-color-primary)!important;}
|
||||
.contextmenu li:hover {background-color: var(--el-color-primary-light-9)!important;color: var(--el-color-primary-light-2)!important;}
|
||||
.data-box .item-background {background-color: var(--el-color-primary)!important;}
|
||||
.layout-setting,.diy-grid-setting {background-color: var(--el-color-primary)!important;}
|
||||
.el-menu .el-menu-item a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
}
|
||||
|
||||
.el-form-item-msg {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
clear: both;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.el-container {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.el-aside {
|
||||
border-right: 1px solid var(--el-border-color-light);
|
||||
}
|
||||
|
||||
.el-container+.el-aside {
|
||||
border-right: 0;
|
||||
border-left: 1px solid var(--el-border-color-light);
|
||||
}
|
||||
|
||||
.el-header {
|
||||
background: #fff;
|
||||
border-bottom: 1px solid var(--el-border-color-light);
|
||||
padding: 13px 15px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.el-header .left-panel {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.el-header .right-panel {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.el-header .right-panel>*+* {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.el-footer {
|
||||
background: #fff;
|
||||
border-top: 1px solid var(--el-border-color-light);
|
||||
padding: 13px 15px;
|
||||
height: 51px;
|
||||
}
|
||||
|
||||
.el-main {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.el-main.nopadding {
|
||||
padding: 0;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.el-drawer__body {
|
||||
overflow: auto;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.el-popconfirm__main {
|
||||
margin: 14px 0;
|
||||
}
|
||||
|
||||
.el-card__header {
|
||||
border-bottom: 0;
|
||||
font-size: 17px;
|
||||
font-weight: bold;
|
||||
padding: 15px 20px 0px 20px;
|
||||
}
|
||||
|
||||
.el-dialog__title {
|
||||
font-size: 17px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.el-drawer__header>:first-child {
|
||||
font-size: 17px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.el-tree.menu .el-tree-node__content {
|
||||
height: 36px;
|
||||
}
|
||||
|
||||
.el-tree.menu .el-tree-node__content .el-tree-node__label .icon {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.el-progress__text {
|
||||
font-size: 12px !important;
|
||||
}
|
||||
|
||||
.el-progress__text i {
|
||||
font-size: 14.4px !important;
|
||||
}
|
||||
|
||||
.el-step.is-horizontal .el-step__line {
|
||||
height: 1px;
|
||||
}
|
||||
|
||||
.el-step__title {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.drawerBG {
|
||||
background: #f6f8f9;
|
||||
}
|
||||
|
||||
.el-button+.el-dropdown {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.el-button-group+.el-dropdown {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.el-tag+.el-tag {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.el-button-group+.el-button-group {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.el-tabs__nav-wrap::after {
|
||||
height: 1px;
|
||||
}
|
||||
|
||||
.el-table th.is-sortable {
|
||||
transition: .1s;
|
||||
}
|
||||
|
||||
.el-table th.is-sortable:hover {
|
||||
background: #eee;
|
||||
}
|
||||
|
||||
.el-table .el-table__body-wrapper {
|
||||
background: #f6f8f9;
|
||||
}
|
||||
|
||||
.el-col .el-card {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.el-main {
|
||||
flex-basis: 100%;
|
||||
}
|
||||
|
||||
.el-main>.scTable .el-table--border::before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.el-main>.scTable .el-table--border::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.el-main>.scTable .el-table--border .el-table__inner-wrapper::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.el-main>.scTable .el-table__border-left-patch {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.el-main>.scTable .el-table--border .el-table__inner-wrapper tr:first-child td:first-child {
|
||||
border-left: 0;
|
||||
}
|
||||
|
||||
.el-main>.scTable .el-table--border .el-table__inner-wrapper tr:first-child th:first-child {
|
||||
border-left: 0;
|
||||
}
|
||||
|
||||
.el-table.el-table--large {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.el-table.el-table--small {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.el-table {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.el-radio-button__inner {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.el-checkbox-button__inner {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.aminui-side-split li.active {
|
||||
background-color: var(--el-color-primary);
|
||||
}
|
||||
|
||||
.adminui-tags li:hover {
|
||||
background-color: var(--el-color-primary-light-9);
|
||||
}
|
||||
|
||||
.adminui-tags li.active {
|
||||
background-color: var(--el-color-primary) !important;
|
||||
}
|
||||
|
||||
.contextmenu li:hover {
|
||||
background-color: var(--el-color-primary-light-9) !important;
|
||||
color: var(--el-color-primary-light-2) !important;
|
||||
}
|
||||
|
||||
.data-box .item-background {
|
||||
background-color: var(--el-color-primary) !important;
|
||||
}
|
||||
|
||||
.layout-setting,
|
||||
.diy-grid-setting {
|
||||
background-color: var(--el-color-primary) !important;
|
||||
}
|
||||
|
||||
/* 覆盖tinymce样式 */
|
||||
.sceditor .tox-tinymce {border: 1px solid #DCDFE6;border-radius: 0;}
|
||||
body .tox-tinymce-aux {z-index: 5700;}
|
||||
.sceditor .tox-tinymce {
|
||||
border: 1px solid #DCDFE6;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
body .tox-tinymce-aux {
|
||||
z-index: 5700;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.el-form-item {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.el-card,
|
||||
.el-message {
|
||||
border-radius: 0px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.el-card__body {
|
||||
padding: 6px;
|
||||
}
|
||||
|
||||
.el-card__header {
|
||||
padding: 6px;
|
||||
}
|
||||
|
||||
.el-tabs--border-card>.el-tabs__content {
|
||||
padding: 6px;
|
||||
}
|
||||
|
||||
.el-dialog__header {
|
||||
padding: 10px 10px 6px;
|
||||
}
|
||||
|
||||
.el-dialog {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: 0 !important;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
/*height:600px;*/
|
||||
max-height: calc(100% - 30px);
|
||||
max-width: calc(100% - 30px);
|
||||
}
|
||||
|
||||
.el-dialog__headerbtn {
|
||||
top: 8px;
|
||||
}
|
||||
|
||||
.el-dialog .el-dialog__body {
|
||||
flex: 1;
|
||||
overflow: auto;
|
||||
padding: 8px 12px;
|
||||
}
|
||||
|
||||
.el-drawer__header {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.el-drawer .el-drawer__body {
|
||||
flex: 1;
|
||||
overflow: auto;
|
||||
padding: 8px 12px;
|
||||
}
|
||||
|
||||
.el-form--label-top .el-form-item__label {
|
||||
line-height: 16px;
|
||||
}
|
||||
|
||||
.el-button+.el-button {
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
.el-tabs__header {
|
||||
margin: 0 0 6px;
|
||||
}
|
||||
|
||||
.pagination-container {
|
||||
padding: 0px 0px;
|
||||
}
|
||||
|
||||
body .el-table th.gutter {
|
||||
display: table-cell !important;
|
||||
}
|
||||
|
||||
.el-dialog__footer {
|
||||
padding: 6px 6px 6px;
|
||||
}
|
||||
|
|
@ -2,87 +2,142 @@
|
|||
<el-container>
|
||||
<el-header>
|
||||
<div class="left-panel">
|
||||
<div class="right-panel-search">
|
||||
<el-input v-model="search.keyword" placeholder="编号" clearable @click="upsearch"></el-input>
|
||||
<el-button type="primary" icon="el-icon-search" @click="upsearch"></el-button>
|
||||
<el-button type="primary" icon="el-icon-refresh" @click="syncData"
|
||||
>同步</el-button
|
||||
>
|
||||
</div>
|
||||
<div class="right-panel">
|
||||
<el-input
|
||||
v-model="search.keyword"
|
||||
placeholder="编号"
|
||||
clearable
|
||||
@click="upsearch"
|
||||
></el-input>
|
||||
<el-button
|
||||
type="primary"
|
||||
icon="el-icon-search"
|
||||
@click="upsearch"
|
||||
></el-button>
|
||||
</div>
|
||||
</el-header>
|
||||
<el-main class="nopadding">
|
||||
<scTable ref="table" :apiObj="apiObj" row-key="id" @selection-change="selectionChange" stripe @resetQuery="resetQuery" >
|
||||
<scTable
|
||||
ref="table"
|
||||
:apiObj="apiObj"
|
||||
row-key="id"
|
||||
@selection-change="selectionChange"
|
||||
stripe
|
||||
@resetQuery="resetQuery"
|
||||
>
|
||||
<el-table-column type="selection" width="50"></el-table-column>
|
||||
<el-table-column label="序号" type="index" width="50"></el-table-column>
|
||||
<el-table-column label="喇叭名称" prop="name" min-width="150"></el-table-column>
|
||||
<el-table-column
|
||||
label="喇叭名称"
|
||||
prop="name"
|
||||
min-width="150"
|
||||
></el-table-column>
|
||||
<el-table-column label="音量" prop="extra" min-width="100">
|
||||
<template #default="scope">
|
||||
<span v-if="scope.row.extra&&scope.row.extra.player">{{scope.row.extra.player.EnvVolume}}</span>
|
||||
<span v-if="scope.row.extra && scope.row.extra.player">{{
|
||||
scope.row.extra.player.EnvVolume
|
||||
}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="设备sn" prop="sn" min-width="90"></el-table-column>
|
||||
<el-table-column
|
||||
label="设备sn"
|
||||
prop="sn"
|
||||
min-width="90"
|
||||
></el-table-column>
|
||||
<el-table-column label="ip" prop="extra" min-width="90">
|
||||
<template #default="scope">
|
||||
<span v-if="scope.row.extra">{{scope.row.extra.ip}}</span>
|
||||
<span v-if="scope.row.extra">{{ scope.row.extra.ip }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="状态" prop="extra" min-width="90">
|
||||
<template #default="scope">
|
||||
<span v-if="scope.row.extra">{{scope.row.extra.online}}</span>
|
||||
<span v-if="scope.row.extra">{{ scope.row.extra.online }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<!--<el-table-column label="位置" prop="count_people" min-width="90"></el-table-column>-->
|
||||
<el-table-column label="所在区域" prop="create_time" min-width="180"></el-table-column>
|
||||
<el-table-column label="覆盖区域" prop="create_time" width="160"></el-table-column>
|
||||
<el-table-column
|
||||
label="所在区域"
|
||||
prop="create_time"
|
||||
min-width="180"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
label="覆盖区域"
|
||||
prop="create_time"
|
||||
width="160"
|
||||
></el-table-column>
|
||||
<el-table-column label="操作" fixed="right" align="center" width="160">
|
||||
<template #default="scope">
|
||||
<el-button-group>
|
||||
<el-button text type="primary" size="small" @click="handlePosition(scope.row)">标记位置</el-button>
|
||||
<el-button
|
||||
text
|
||||
type="primary"
|
||||
size="small"
|
||||
@click="handlePosition(scope.row)"
|
||||
>标记位置</el-button
|
||||
>
|
||||
</el-button-group>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</scTable>
|
||||
</el-main>
|
||||
</el-container>
|
||||
<channel-view v-if="dialogSave" ref="saveDialog" :channelType="50" :channelCode="channelCode" :channelName="channelName" @closed="dialogSave=false"></channel-view>
|
||||
<channel-view
|
||||
v-if="dialogSave"
|
||||
ref="saveDialog"
|
||||
:channelType="50"
|
||||
:channelCode="channelCode"
|
||||
:channelName="channelName"
|
||||
@closed="dialogSave = false"
|
||||
></channel-view>
|
||||
</template>
|
||||
<script>
|
||||
import channelView from './vchannel_view'
|
||||
export default {
|
||||
name: 'audioVue',
|
||||
import channelView from "./vchannel_view";
|
||||
export default {
|
||||
name: "audioVue",
|
||||
components: {
|
||||
channelView
|
||||
channelView,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
syncLoading: false,
|
||||
apiObj: this.$API.am.tdevice.speaker,
|
||||
dialogSave: false,
|
||||
limitedVisible: false,
|
||||
query: {},
|
||||
selection: [],
|
||||
search: {
|
||||
keyword: null
|
||||
keyword: null,
|
||||
},
|
||||
channelCode:'',
|
||||
channelName:'',
|
||||
}
|
||||
channelCode: "",
|
||||
channelName: "",
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
handlePosition(row){
|
||||
handlePosition(row) {
|
||||
this.channelCode = row.sn;
|
||||
this.channelName = row.name;
|
||||
this.dialogSave = true;
|
||||
},
|
||||
//表格选择后回调事件
|
||||
selectionChange(selection){
|
||||
selectionChange(selection) {
|
||||
this.selection = selection;
|
||||
},
|
||||
|
||||
//搜索
|
||||
upsearch(){
|
||||
},
|
||||
upsearch() {},
|
||||
|
||||
resetQuery(){
|
||||
this.query = {}
|
||||
}
|
||||
}
|
||||
}
|
||||
resetQuery() {
|
||||
this.query = {};
|
||||
},
|
||||
async syncData() {
|
||||
this.syncLoading = true;
|
||||
var res = await this.$API.third.tdevice.vchannelSync.req({});
|
||||
this.syncLoading = false;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -3,40 +3,86 @@
|
|||
<el-header>
|
||||
<div class="left-panel">
|
||||
<div class="right-panel-search">
|
||||
<el-button type="primary" icon="el-icon-refresh" @click="updateData">同步</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
icon="el-icon-refresh"
|
||||
@click="syncData"
|
||||
:loading="syncLoading"
|
||||
>同步</el-button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</el-header>
|
||||
<el-main class="nopadding">
|
||||
<scTable ref="table" :apiObj="apiObj" :params="query" row-key="id" @selection-change="selectionChange" stripe>
|
||||
<el-table-column type="selection" width="50"></el-table-column>
|
||||
<scTable
|
||||
ref="table"
|
||||
:apiObj="apiObj"
|
||||
:params="apiParams"
|
||||
row-key="id"
|
||||
@selection-change="selectionChange"
|
||||
stripe
|
||||
>
|
||||
<el-table-column label="序号" type="index" width="50"></el-table-column>
|
||||
<el-table-column label="id" prop="id" min-width="90"></el-table-column>
|
||||
<el-table-column label="mac" prop="code" min-width="90"></el-table-column>
|
||||
<el-table-column label="id" prop="id" min-width="90"></el-table-column>
|
||||
<el-table-column
|
||||
label="mac"
|
||||
prop="code"
|
||||
min-width="90"
|
||||
></el-table-column>
|
||||
<el-table-column label="电量" prop="third_info" min-width="90">
|
||||
<template #default="scope">
|
||||
<span v-if="scope.row.third_info">{{scope.row.third_info.battery}}%</span>
|
||||
<span v-if="scope.row.third_info"
|
||||
>{{ scope.row.third_info.battery }}%</span
|
||||
>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="状态" prop="third_info" min-width="90">
|
||||
<template #default="scope">
|
||||
<span v-if="scope.row.third_info&&scope.row.third_info.workStatus===0">运动</span>
|
||||
<span v-else-if="scope.row.third_info&&scope.row.third_info.workStatus===2">静止</span>
|
||||
<span v-else>静止</span>
|
||||
<span
|
||||
v-if="
|
||||
scope.row.third_info && scope.row.third_info.workStatus === 0
|
||||
"
|
||||
><el-tag>运动</el-tag></span
|
||||
>
|
||||
<span
|
||||
v-else-if="
|
||||
scope.row.third_info && scope.row.third_info.workStatus === 2
|
||||
"
|
||||
><el-tag type="warning">静止</el-tag></span
|
||||
>
|
||||
<span v-else><el-tag type="warning">静止</el-tag></span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="在线" prop="third_info" min-width="90">
|
||||
<template #default="scope">
|
||||
<span v-if="scope.row.third_info.online">在线</span>
|
||||
<span v-else>离线</span>
|
||||
<span v-if="scope.row.third_info.online"><el-tag type="success">在线</el-tag></span>
|
||||
<span v-else><el-tag type="warning">离线</el-tag></span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="绑定对象" prop="employee" min-width="90">
|
||||
<template #default="scope">
|
||||
<span v-if="scope.row.employee">{{scope.row.employee_.name}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" fixed="right" align="center" width="160">
|
||||
<template #default="scope">
|
||||
<el-button-group>
|
||||
<el-button v-if="scope.row.employee!==null" text type="warning" size="small" @click="handleBindBlt(20, scope.row)">解绑</el-button>
|
||||
<el-button v-else text type="primary" size="small" @click="handleBindBlt(10, scope.row)">绑定</el-button>
|
||||
<el-button
|
||||
v-if="scope.row.employee !== null"
|
||||
text
|
||||
type="warning"
|
||||
size="small"
|
||||
@click="handleBindBlt(20, scope.row)"
|
||||
>解绑</el-button
|
||||
>
|
||||
<el-button
|
||||
v-else
|
||||
text
|
||||
type="primary"
|
||||
size="small"
|
||||
@click="handleBindBlt(10, scope.row)"
|
||||
>绑定</el-button
|
||||
>
|
||||
</el-button-group>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
|
@ -49,13 +95,12 @@
|
|||
destroy-on-close
|
||||
@closed="closeDrawer"
|
||||
>
|
||||
<el-form
|
||||
ref="dialogForm"
|
||||
:model="form"
|
||||
label-width="120px"
|
||||
>
|
||||
<el-form ref="dialogForm" :model="form" label-width="120px">
|
||||
<el-form-item label="卡号">
|
||||
{{form.blt}}
|
||||
{{ form.blt }}
|
||||
</el-form-item>
|
||||
<el-form-item label="mac">
|
||||
{{ bindBltMac }}
|
||||
</el-form-item>
|
||||
<el-form-item label="绑定员工">
|
||||
<el-select v-model="form.employee" style="width: 100%" :disabled="dis">
|
||||
|
|
@ -67,68 +112,76 @@
|
|||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<el-button v-if="form.type===10" type="primary" @click="submitBindBlt">绑定</el-button>
|
||||
<el-button v-if="form.type===20" type="primary" @click="submitBindBlt">解绑</el-button>
|
||||
<el-button v-if="form.type === 10" type="primary" @click="submitBindBlt"
|
||||
>绑定</el-button
|
||||
>
|
||||
<el-button v-if="form.type === 20" type="primary" @click="submitBindBlt"
|
||||
>解绑</el-button
|
||||
>
|
||||
<el-button @click="showBindBlt = false">取消</el-button>
|
||||
</template>
|
||||
</el-Dialog>
|
||||
</template>
|
||||
<script>
|
||||
import channelView from './vchannel_view'
|
||||
export default {
|
||||
name: 'blt',
|
||||
import channelView from "./vchannel_view";
|
||||
export default {
|
||||
name: "blt",
|
||||
components: {
|
||||
channelView
|
||||
channelView,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
syncLoading: false,
|
||||
apiObj: this.$API.third.tdevice.list,
|
||||
query: {
|
||||
type:30,
|
||||
apiParams: {
|
||||
type: 30,
|
||||
},
|
||||
selection: [],
|
||||
search: {
|
||||
keyword: null
|
||||
keyword: null,
|
||||
},
|
||||
dis: false,
|
||||
showBindBlt: false,
|
||||
employeeList: [],
|
||||
bindBltMac: '',
|
||||
bindBltMac: "",
|
||||
form: {
|
||||
type: 10,
|
||||
blt: '',
|
||||
employee: '',
|
||||
blt: "",
|
||||
employee: "",
|
||||
},
|
||||
}
|
||||
};
|
||||
},
|
||||
mounted(){
|
||||
mounted() {
|
||||
this.getEmployeeList();
|
||||
},
|
||||
methods: {
|
||||
//表格选择后回调事件
|
||||
selectionChange(selection){
|
||||
selectionChange(selection) {
|
||||
this.selection = selection;
|
||||
},
|
||||
//同步
|
||||
updateData(){
|
||||
this.$API.third.tdevice.list.req({});
|
||||
async syncData() {
|
||||
this.syncLoading = true;
|
||||
var res = await this.$API.third.tdevice.vchannelSync.req({});
|
||||
this.syncLoading = false;
|
||||
},
|
||||
getEmployeeList() {
|
||||
let that = this;
|
||||
that.$API.hrm.employee.list.req({job_state:10,page: 0}).then(res => {
|
||||
that.$API.hrm.employee.list
|
||||
.req({ job_state: 10, page: 0 })
|
||||
.then((res) => {
|
||||
that.tdevice = res;
|
||||
that.employeeList = res;
|
||||
})
|
||||
});
|
||||
},
|
||||
handleBindBlt(type, row) {
|
||||
this.dis = false;
|
||||
this.form.blt = row.id;
|
||||
this.bindBltMac = row.mac;
|
||||
this.bindBltMac = row.code;
|
||||
this.form.type = type;
|
||||
if(type===20){
|
||||
if (type === 20) {
|
||||
this.dis = true;
|
||||
this.form.employee = row.employee;
|
||||
}
|
||||
|
|
@ -136,13 +189,14 @@
|
|||
},
|
||||
submitBindBlt() {
|
||||
let that = this;
|
||||
that.$API.third.tdevice.bltBind.req(this.form).then(res => {
|
||||
if(res.err_msg){}else{
|
||||
that.$API.third.tdevice.bltBind.req(this.form).then((res) => {
|
||||
if (res.err_msg) {
|
||||
} else {
|
||||
that.showBindBlt = false;
|
||||
that.$refs.table.refresh();
|
||||
}
|
||||
})
|
||||
});
|
||||
},
|
||||
}
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -2,103 +2,171 @@
|
|||
<el-container>
|
||||
<el-header>
|
||||
<div class="left-panel">
|
||||
<div class="right-panel-search">
|
||||
<el-input v-model="search.keyword" placeholder="编号" clearable @click="upsearch"></el-input>
|
||||
<el-button type="primary" icon="el-icon-search" @click="upsearch"></el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
icon="el-icon-refresh"
|
||||
@click="syncData"
|
||||
:loading="syncLoading"
|
||||
>同步</el-button
|
||||
>
|
||||
</div>
|
||||
<div class="right-panel">
|
||||
<el-input
|
||||
v-model="search.keyword"
|
||||
placeholder="编号"
|
||||
clearable
|
||||
@click="upsearch"
|
||||
></el-input>
|
||||
<el-button
|
||||
type="primary"
|
||||
icon="el-icon-search"
|
||||
@click="upsearch"
|
||||
></el-button>
|
||||
</div>
|
||||
</el-header>
|
||||
<el-main class="nopadding">
|
||||
<scTable ref="table" :apiObj="apiObj" row-key="id" @selection-change="selectionChange" stripe @resetQuery="resetQuery" >
|
||||
<el-table-column type="selection" width="50"></el-table-column>
|
||||
<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="100"></el-table-column>
|
||||
<el-table-column label="通道名称" prop="channelName" min-width="150"></el-table-column>
|
||||
<el-table-column label="通道状态" prop="stat" min-width="150"></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="150"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
label="通道状态"
|
||||
prop="stat"
|
||||
min-width="150"
|
||||
></el-table-column>
|
||||
<el-table-column label="通道类型" min-width="100">
|
||||
<template #default="scope">{{scope.row.channelType}}</template>
|
||||
<template #default="scope">{{ scope.row.channelType }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="设备类型" min-width="100">
|
||||
<template #default="scope">{{scope.row.cameraType}}</template>
|
||||
<template #default="scope">{{ scope.row.cameraType }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="是否在线" prop="isOnline" min-width="180"></el-table-column>
|
||||
<el-table-column label="创建时间" prop="createTime" width="160"></el-table-column>
|
||||
<el-table-column
|
||||
label="是否在线"
|
||||
prop="isOnline"
|
||||
min-width="180"
|
||||
></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',
|
||||
import videoChannelView from "./vchannel_view";
|
||||
export default {
|
||||
name: "monitor",
|
||||
components: {
|
||||
videoChannelView
|
||||
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
|
||||
keyword: null,
|
||||
},
|
||||
channelId:'',
|
||||
}
|
||||
channelId: "",
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
handlePosition(row){
|
||||
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){
|
||||
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{
|
||||
} else {
|
||||
this.$refs.table.refresh();
|
||||
this.$message.success("删除成功")
|
||||
this.$message.success("删除成功");
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
//批量删除区域
|
||||
async batch_del(){
|
||||
this.$confirm(`确定删除选中的 ${this.selection.length} 项吗？如果删除项中含有子集将会被一并删除`, '提示', {
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
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=>{
|
||||
let params = { pk: { pks: this.selection } };
|
||||
this.$API.am.area.deletes.req(params).then((res) => {
|
||||
loading.close();
|
||||
if(res.err_msg){
|
||||
if (res.err_msg) {
|
||||
this.$message.error(res.err_msg);
|
||||
}else{
|
||||
} else {
|
||||
this.$refs.table.refresh();
|
||||
this.$message.success("删除成功")
|
||||
this.$message.success("删除成功");
|
||||
}
|
||||
});
|
||||
}).catch(() => {
|
||||
})
|
||||
.catch(() => {});
|
||||
},
|
||||
//表格选择后回调事件
|
||||
selectionChange(selection){
|
||||
selectionChange(selection) {
|
||||
this.selection = selection;
|
||||
},
|
||||
|
||||
|
||||
//搜索
|
||||
upsearch(){
|
||||
upsearch() {},
|
||||
|
||||
resetQuery() {
|
||||
this.query = {};
|
||||
},
|
||||
|
||||
resetQuery(){
|
||||
this.query = {}
|
||||
}
|
||||
}
|
||||
}
|
||||
async syncData() {
|
||||
this.syncLoading = true;
|
||||
var res = await this.$API.third.tdevice.vchannelSync.req({});
|
||||
this.syncLoading = false;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -2,59 +2,110 @@
|
|||
<el-container>
|
||||
<el-header>
|
||||
<div class="left-panel">
|
||||
<div class="right-panel-search">
|
||||
<el-input v-model="search.keyword" placeholder="编号" clearable @click="upsearch"></el-input>
|
||||
<el-button type="primary" icon="el-icon-search" @click="upsearch"></el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
icon="el-icon-refresh"
|
||||
@click="syncData"
|
||||
:loading="syncLoading"
|
||||
>同步</el-button
|
||||
>
|
||||
</div>
|
||||
<div class="right-panel">
|
||||
<el-input
|
||||
v-model="search.keyword"
|
||||
placeholder="编号"
|
||||
clearable
|
||||
@click="upsearch"
|
||||
></el-input>
|
||||
<el-button
|
||||
type="primary"
|
||||
icon="el-icon-search"
|
||||
@click="upsearch"
|
||||
></el-button>
|
||||
</div>
|
||||
</el-header>
|
||||
<el-main class="nopadding">
|
||||
<scTable ref="table" :apiObj="apiObj" row-key="id" @selection-change="selectionChange" stripe
|
||||
@resetQuery="resetQuery">
|
||||
<el-table-column type="selection" width="50"></el-table-column>
|
||||
<scTable
|
||||
ref="table"
|
||||
:apiObj="apiObj"
|
||||
row-key="id"
|
||||
:params="apiParams"
|
||||
: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="100"></el-table-column>
|
||||
<el-table-column label="通道名称" prop="channelName" min-width="150"></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="150"
|
||||
></el-table-column>
|
||||
<el-table-column label="通道状态" prop="stat" min-width="150">
|
||||
<template #default="scope">
|
||||
<span v-if="scope.row.stat===0">不启用</span>
|
||||
<span v-if="scope.row.stat === 0">不启用</span>
|
||||
<span v-else>启用</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="摄像头类型" min-width="100">
|
||||
<template #default="scope">{{deviceTypes[scope.row.cameraType]}}</template>
|
||||
<template #default="scope">{{
|
||||
deviceTypes[scope.row.cameraType]
|
||||
}}</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="是否在线" prop="isOnline" min-width="180">
|
||||
<template #default="scope">
|
||||
<span v-if="scope.row.isOnline===0">离线</span>
|
||||
<span v-else>在线</span>
|
||||
<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" min-width="160"></el-table-column>
|
||||
<el-table-column
|
||||
label="创建时间"
|
||||
prop="createTime"
|
||||
min-width="160"
|
||||
></el-table-column>
|
||||
<el-table-column label="操作" fixed="right" align="center" width="260">
|
||||
<template #default="scope">
|
||||
<el-button-group>
|
||||
<el-button text type="primary" size="small" @click="handlePosition(scope.row)">标记位置
|
||||
<el-button
|
||||
text
|
||||
type="primary"
|
||||
size="small"
|
||||
@click="handlePosition(scope.row)"
|
||||
>标记位置
|
||||
</el-button>
|
||||
<el-button text type="primary" size="small" @click="handleView(scope.row)">实时监控</el-button>
|
||||
<el-popconfirm title="确定删除吗？" @confirm="handleDel(scope.row, scope.$index)">
|
||||
<el-button
|
||||
text
|
||||
type="primary"
|
||||
size="small"
|
||||
@click="handleView(scope.row)"
|
||||
>实时监控</el-button
|
||||
>
|
||||
<!-- <el-popconfirm title="确定删除吗？" @confirm="handleDel(scope.row, scope.$index)">
|
||||
<template #reference>
|
||||
<el-button text type="danger" size="small">删除</el-button>
|
||||
</template>
|
||||
</el-popconfirm>
|
||||
</el-popconfirm> -->
|
||||
</el-button-group>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</scTable>
|
||||
</el-main>
|
||||
</el-container>
|
||||
<el-dialog
|
||||
:title="channelName"
|
||||
v-model="limitedVisible"
|
||||
:width="745"
|
||||
>
|
||||
<div style="height: 560px;">
|
||||
<el-dialog :title="channelName" v-model="limitedVisible" :width="745">
|
||||
<div style="height: 560px">
|
||||
<video id="videoElement" muted="muted"></video>
|
||||
</div>
|
||||
|
||||
|
|
@ -62,71 +113,91 @@
|
|||
<el-button @click="limitedVisible = false">关闭</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
<channel-view v-if="dialogSave" ref="saveDialog" :channelType="60" :channelCode="channelCode"
|
||||
:channelName="channelName" @closed="dialogSave=false"></channel-view>
|
||||
<channel-view
|
||||
v-if="dialogSave"
|
||||
ref="saveDialog"
|
||||
:channelType="60"
|
||||
:channelCode="channelCode"
|
||||
:channelName="channelName"
|
||||
@closed="dialogSave = false"
|
||||
></channel-view>
|
||||
</template>
|
||||
<script>
|
||||
import channelView from './vchannel_view'
|
||||
import channelView from "./vchannel_view";
|
||||
|
||||
export default {
|
||||
name: 'monitor',
|
||||
export default {
|
||||
name: "monitor",
|
||||
components: {
|
||||
channelView
|
||||
channelView,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
apiObj: this.$API.am.video.list,
|
||||
apiParams: {
|
||||
"channelTypeList": ["1"]
|
||||
},
|
||||
pageStr: "pageNum",
|
||||
pageSizeStr: "pageSize",
|
||||
orderStr: "sort",
|
||||
parseData: (res)=>{
|
||||
return {
|
||||
data: res, //分析无分页的数据字段结构
|
||||
rows: res.pageData, //分析行数据字段结构
|
||||
total: res.totalRows, //分析总数字段结构
|
||||
}
|
||||
},
|
||||
dialogSave: false,
|
||||
limitedVisible: false,
|
||||
syncLoading: false,
|
||||
query: {},
|
||||
selection: [],
|
||||
search: {
|
||||
keyword: null
|
||||
keyword: null,
|
||||
},
|
||||
channelId: '',
|
||||
channelId: "",
|
||||
params: {
|
||||
json: {
|
||||
data: {
|
||||
channelId: "",
|
||||
streamType: "2",
|
||||
type: "flv"
|
||||
}
|
||||
type: "flv",
|
||||
},
|
||||
code: 'video_realtime'
|
||||
},
|
||||
code: "video_realtime",
|
||||
},
|
||||
deviceTypes: {
|
||||
'1': '枪机',
|
||||
'2': '球机',
|
||||
'3': '半球'
|
||||
}
|
||||
}
|
||||
1: "枪机",
|
||||
2: "球机",
|
||||
3: "半球",
|
||||
},
|
||||
};
|
||||
},
|
||||
created() {
|
||||
const scriptInfo = document.createElement("script");
|
||||
scriptInfo.setAttribute("data-callType", "callScript");
|
||||
scriptInfo.src = "https://cdn.bootcdn.net/ajax/libs/flv.js/1.6.2/flv.js";
|
||||
document.head.appendChild(scriptInfo)
|
||||
document.head.appendChild(scriptInfo);
|
||||
},
|
||||
methods: {
|
||||
handleView(row) {
|
||||
this.params.json.data.channelId = row.channelCode;
|
||||
this.channelName = row.channelName;
|
||||
this.limitedVisible = true;
|
||||
this.$API.am.video.item.req(this.params).then(res => {
|
||||
this.$API.am.video.item.req(this.params).then((res) => {
|
||||
debugger;
|
||||
console.log(res);
|
||||
this.url = res.url;
|
||||
if (flvjs.isSupported()) {
|
||||
let videoElement = document.getElementById('videoElement');
|
||||
let videoElement = document.getElementById("videoElement");
|
||||
let flvPlayer = flvjs.createPlayer({
|
||||
type: 'flv',
|
||||
url: res.url
|
||||
type: "flv",
|
||||
url: res.url,
|
||||
});
|
||||
flvPlayer.attachMediaElement(videoElement);
|
||||
flvPlayer.load();
|
||||
flvPlayer.play();
|
||||
}
|
||||
})
|
||||
});
|
||||
},
|
||||
handlePosition(row) {
|
||||
this.channelCode = row.channelCode;
|
||||
|
|
@ -135,49 +206,56 @@
|
|||
},
|
||||
//删除区域
|
||||
async handleDel(row) {
|
||||
await this.$API.am.area.delete.req(row.id).then(res => {
|
||||
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("删除成功")
|
||||
this.$message.success("删除成功");
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
//批量删除区域
|
||||
async batch_del() {
|
||||
this.$confirm(`确定删除选中的 ${this.selection.length} 项吗？如果删除项中含有子集将会被一并删除`, '提示', {
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
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 => {
|
||||
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("删除成功")
|
||||
this.$message.success("删除成功");
|
||||
}
|
||||
});
|
||||
}).catch(() => {
|
||||
})
|
||||
.catch(() => {});
|
||||
},
|
||||
//表格选择后回调事件
|
||||
selectionChange(selection) {
|
||||
this.selection = selection;
|
||||
},
|
||||
|
||||
|
||||
//搜索
|
||||
upsearch() {
|
||||
|
||||
},
|
||||
upsearch() {},
|
||||
|
||||
resetQuery() {
|
||||
this.query = {}
|
||||
}
|
||||
}
|
||||
}
|
||||
this.query = {};
|
||||
},
|
||||
async syncData() {
|
||||
this.syncLoading = true;
|
||||
var res = await this.$API.third.tdevice.vchannelSync.req({});
|
||||
this.syncLoading = false;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -112,7 +112,6 @@
|
|||
:value="item.id"
|
||||
/>
|
||||
</el-select>
|
||||
|
||||
<select-user
|
||||
ref="form.receptionist"
|
||||
:user="form.receptionist"
|
||||
|
|
|
|||
Loading…
Reference in New Issue