zcdsj
/
factory_web
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

sctable 修改 外加样式调整

This commit is contained in:
曹前明 2022-07-16 02:07:10 +08:00
parent ea1cffeff6
commit 0e1c21710a
10 changed files with 1284 additions and 747 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/api/model/am.js
View File

@ -99,9 +99,10 @@ export default {
video: { video: {
list: { list: {
name: "获取视频设备列表", name: "获取视频设备列表",
req: async function(){ req: async function(data){
return await http.post( return await http.post(
`${config.API_URL}/third/tdevice/vchannel/`, `${config.API_URL}/third/tdevice/vchannel/`,
data
); );
} }
}, },

29
src/api/model/third.js
View File

@ -4,7 +4,7 @@ import http from "@/utils/request"
export default { export default {
tdevice: { tdevice: {
list: { list: {
name: "三方喇叭接口", name: "三方设备接口",
req: async function(data){ req: async function(data){
return await http.get( return await http.get(
`${config.API_URL}/third/tdevice/`, `${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:{ blt:{
list:{ list:{

111
src/components/scTable/index.vue
View File

@ -83,7 +83,7 @@
></el-button> ></el-button>
<el-button <el-button
v-if="!hideRefresh" v-if="!hideRefresh"
@click="reload" @click="reload(null)"
icon="el-icon-refresh-right" icon="el-icon-refresh-right"
circle circle
style="margin-left: 15px" style="margin-left: 15px"
@ -175,6 +175,10 @@ export default {
stripe: { type: Boolean, default: false }, stripe: { type: Boolean, default: false },
pageSize: { type: Number, default: config.pageSize }, pageSize: { type: Number, default: config.pageSize },
pageSizes: { type: Array, default: config.pageSizes }, 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: "" }, rowKey: { type: String, default: "" },
summaryMethod: { type: Function, default: null }, summaryMethod: { type: Function, default: null },
column: { type: Object, default: () => {} }, column: { type: Object, default: () => {} },
@ -231,6 +235,7 @@ export default {
}; };
}, },
mounted() { mounted() {
console.log(this.parseData);
//判断是否开启自定义列 //判断是否开启自定义列
if (this.column) { if (this.column) {
this.getCustomColumn(); this.getCustomColumn();
@ -266,13 +271,13 @@ export default {
async getData() { async getData() {
this.loading = true; this.loading = true;
var reqData = { var reqData = {
[config.request.page]: this.currentPage, [this.pageStr]: this.currentPage,
[config.request.pageSize]: this.scPageSize, [this.pageSizeStr]: this.scPageSize,
// [config.request.prop]: this.prop, // [config.request.prop]: this.prop,
[config.request.order]: this.order, [this.orderStr]: this.order,
}; };
if (this.hidePagination) { if (this.hidePagination) {
reqData[config.request.page] = 0; reqData[this.pageStr] = 0;
// delete reqData[config.request.page] // delete reqData[config.request.page]
// delete reqData[config.request.pageSize] // delete reqData[config.request.pageSize]
} }
@ -283,12 +288,15 @@ export default {
if (res.length == 0) { if (res.length == 0) {
this.emptyText = "暂无数据"; this.emptyText = "暂无数据";
} }
if(this.$route.path==='/sys/dept'||this.$route.path==='/sys/perm'){ if (
this.tableData = this.redata(res); this.$route.path === "/sys/dept" ||
console.log(this.tableData) this.$route.path === "/sys/perm"
}else{ ) {
this.tableData = res || []; this.tableData = this.redata(res);
} console.log(this.tableData);
} else {
this.tableData = res || [];
}
this.loading = false; this.loading = false;
this.$refs.scTable.setScrollTop(0); this.$refs.scTable.setScrollTop(0);
this.$emit("dataChange", res, this.tableData); this.$emit("dataChange", res, this.tableData);
@ -299,22 +307,25 @@ export default {
return false; return false;
} }
try { try {
var response = config.parseData(res); var response = this.parseData(res);
if (response.total === 0) { if (response.total === 0) {
this.emptyText = "暂无数据"; this.emptyText = "暂无数据";
} }
let dataList = null; let dataList = null;
if (this.hidePagination) { if (this.hidePagination) {
dataList = response.data || []; dataList = response.data || [];
} else { } 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"
) {
this.tableData = this.redata(dataList);
console.log(this.tableData);
} else {
this.tableData = dataList || [];
} }
if(this.$route.path==='/sys/dept'||this.$route.path==='/ops/menu'){
this.tableData = this.redata(dataList);
console.log(this.tableData)
}else{
this.tableData = dataList || [];
}
this.total = response.total || 0; this.total = response.total || 0;
this.summary = response.summary || {}; this.summary = response.summary || {};
this.loading = false; this.loading = false;
@ -326,28 +337,28 @@ export default {
return false; return false;
} }
}, },
redata(postList){ redata(postList) {
let posts = []; let posts = [];
postList.forEach(item => { postList.forEach((item) => {
let obj = new Object(); let obj = new Object();
obj = {...item}; obj = { ...item };
obj.parentId = item.parent; 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 = []; let arr = [];
for (let item of posts) { for (let item of posts) {
if (item.parentId == null) { if (item.parentId == null) {
arr.push(item); arr.push(item);
continue continue;
} }
let parent = obj[item.parentId]; let parent = obj[item.parentId];
parent.children = parent.children ? parent.children : []; parent.children = parent.children ? parent.children : [];
parent.children.push(item); parent.children.push(item);
} }
console.log(arr); console.log(arr);
return arr; return arr;
}, },
//分页点击 //分页点击
paginationChange() { paginationChange() {
this.getData(); this.getData();
@ -362,17 +373,17 @@ export default {
this.$refs.scTable.clearSelection(); this.$refs.scTable.clearSelection();
this.getData(); this.getData();
}, },
//更新数据 合并上一次params //查询数据 追加query
upData(params, page = 1) { upData(query, page = 1) {
this.currentPage = page; this.currentPage = page;
this.$refs.scTable.clearSelection(); this.$refs.scTable.clearSelection();
Object.assign(this.tableParams, params || {}); Object.assign(this.tableParams, query);
this.getData(); this.getData();
}, },
//重载数据 替换params 保留sort //查询数据 追加query 去除列filter
queryData(params, page = 1) { queryData(query, page = 1) {
this.currentPage = page; this.currentPage = page;
this.tableParams = params || {}; Object.assign(this.tableParams, query);
this.$refs.scTable.clearSelection(); this.$refs.scTable.clearSelection();
this.$refs.scTable.clearFilter(); this.$refs.scTable.clearFilter();
this.getData(); this.getData();
@ -380,12 +391,12 @@ export default {
//重载数据 替换params //重载数据 替换params
reload(params, page = 1) { reload(params, page = 1) {
this.currentPage = page; this.currentPage = page;
this.tableParams = params || {}; this.tableParams = params || this.params;
this.$refs.scTable.clearSelection(); this.$refs.scTable.clearSelection();
this.$refs.scTable.clearSort(); this.$refs.scTable.clearSort();
this.$refs.scTable.clearFilter(); this.$refs.scTable.clearFilter();
this.getData(); this.getData();
this.$emit('resetQuery') this.$emit("resetQuery");
}, },
//自定义变化事件 //自定义变化事件
columnSettingChange(userColumn) { columnSettingChange(userColumn) {

253
src/layout/components/userselect.vue
View File

@ -1,13 +1,12 @@
<template> <template>
<div style="display:flex;row nowrap"> <div style="display:flex;row nowrap">
<!-- <el-tag
<!-- <el-tag
v-for="user in userData" v-for="user in userData"
:key="user.id" :key="user.id"
> >
{{ user.name }} {{ user.name }}
</el-tag>--> </el-tag>-->
<el-button <el-button
v-if="selectable" v-if="selectable"
type="primary" type="primary"
circle circle
@ -19,146 +18,120 @@
<el-dialog <el-dialog
title="选择人员" title="选择人员"
width="90%" width="80%"
height="100px"
v-model="dialoguser" v-model="dialoguser"
:before-close="handleClose" :before-close="handleClose"
:append-to-body="true" :append-to-body="true"
:close-on-click-modal="false" :close-on-click-modal="false"
> >
<el-card> <el-row>
<el-row> <el-col :md="8" :sm="24">
<el-col :md="8" :sm="24"> <el-main class="nopadding">
<el-main class="nopadding"> <el-tabs type="border-card" stretch="true">
<el-tabs type="border-card" stretch="true"> <el-tab-pane label="按部门分类">
<el-tab-pane label="按部门分类"> <el-input placeholder="输入关键字进行过滤" v-model="filterText">
<el-input placeholder="输入关键字进行过滤" v-model="filterText"> </el-input>
</el-input>
<el-tree <el-tree
class="filter-tree" class="filter-tree"
style="padding-top: 15px" style="padding-top: 15px"
:data="deptdata" :data="deptdata"
default-expand-all default-expand-all
:filter-node-method="filterNode" :filter-node-method="filterNode"
ref="tree" ref="tree"
@node-click="handleNodeClick" @node-click="handleNodeClick"
>
</el-tree>
</el-tab-pane>
<el-tab-pane label="按岗位分类">
<el-input
placeholder="输入关键字进行过滤"
v-model="filterTexts"
>
</el-input>
<el-tree
class="filter-tree"
style="padding-top: 15px"
:data="postdata"
default-expand-all
:filter-node-method="filterNodes"
ref="tree"
@node-click="handleNodeClicks"
>
</el-tree>
</el-tab-pane>
</el-tabs>
</el-main>
</el-col>
<el-col :md="16" :sm="24">
<el-header style="border-bottom: none">
<div class="left-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>
<div class="right-panel">
<el-button type="primary" icon="el-icon-plus" @click="addUser"
>添加选择</el-button
> >
</div> </el-tree>
</el-header> </el-tab-pane>
<el-main class="nopadding"> <el-tab-pane label="按岗位分类">
<scTable <el-input placeholder="输入关键字进行过滤" v-model="filterTexts">
ref="table" </el-input>
:data="apiObj"
row-key="id"
@selection-change="selectionChange"
stripe
:hidePagination="true"
hideDo
@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"></el-table-column>
<el-table-column label="手机号" prop="phone"></el-table-column> <el-tree
<el-table-column label="部门" prop="belong_dept"> class="filter-tree"
<template #default="scope"> style="padding-top: 15px"
<span v-if="scope.row.belong_dept_">{{ :data="postdata"
scope.row.belong_dept_.name default-expand-all
}}</span> :filter-node-method="filterNodes"
</template> ref="tree"
</el-table-column> @node-click="handleNodeClicks"
<el-table-column >
label="创建时间" </el-tree>
prop="create_time" </el-tab-pane>
></el-table-column> </el-tabs>
<!-- </el-main>
<el-table-column </el-col>
label="操作" <el-col :md="16" :sm="24">
fixed="right" <el-header style="border-bottom: none">
align="left" <div class="left-panel">
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 <el-input
style="width: 80%" v-model="search.keyword"
v-model="username" placeholder="姓名"
placeholder="选择人员的姓名"
clearable clearable
@click="upsearch"
></el-input> ></el-input>
<el-button @click="visible = false" style="float: right"
>取 消</el-button
>
<el-button <el-button
v-if="mode != 'show'"
style="float: right"
type="primary" type="primary"
:loading="isSaveing" icon="el-icon-search"
@click="submitfrom()" @click="upsearch"
>提 交</el-button ></el-button>
</div>
<div class="right-panel">
<el-button type="primary" icon="el-icon-plus" @click="addUser"
>添加选择</el-button
> >
</div> </div>
</el-col> </el-header>
</el-row> <el-main class="nopadding">
</el-card> <scTable
ref="table"
:data="apiObj"
row-key="id"
@selection-change="selectionChange"
stripe
hideDo
@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"></el-table-column>
<el-table-column label="手机号" prop="phone"></el-table-column>
<el-table-column label="部门" prop="belong_dept">
<template #default="scope">
<span v-if="scope.row.belong_dept_">{{
scope.row.belong_dept_.name
}}</span>
</template>
</el-table-column>
<el-table-column
label="创建时间"
prop="create_time"
></el-table-column>
</scTable>
</el-main>
<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'"
type="primary"
:loading="isSaveing"
@click="submitfrom()"
>提 交</el-button >
</el-col>
</el-row>
</el-col>
</el-row>
</el-dialog> </el-dialog>
</template> </template>
<script> <script>
@ -219,8 +192,6 @@ export default {
this.getUser(); this.getUser();
this.getDept(); this.getDept();
this.getPost(); this.getPost();
}, },
watch: { watch: {
filterText(val) { filterText(val) {
@ -229,28 +200,26 @@ export default {
filterTexts(val) { filterTexts(val) {
this.$refs.tree.filter(val); this.$refs.tree.filter(val);
}, },
dataValue(val) { dataValue(val) {
this.$emit("input", val); this.$emit("input", val);
console.log(val) console.log(val);
}, },
userData(val) { userData(val) {
if (val) { if (val) {
this.change(); this.change();
} }
}, },
}, },
methods: { methods: {
showDialog() { showDialog() {
this.dialoguser = true; this.dialoguser = true;
this.$nextTick(function () { this.$nextTick(function () {
this.apiObj.map(item => { this.apiObj.map((item) => {
if (item.id === this.user) { if (item.id === this.user) {
this.$refs.table.toggleRowSelection(item, true) this.$refs.table.toggleRowSelection(item, true);
} }
}) });
}) });
}, },
//加载人员 //加载人员
getUser() { getUser() {
@ -310,10 +279,10 @@ export default {
addUser() { addUser() {
this.username = []; this.username = [];
this.userData = []; this.userData = [];
if (!this.multiple && this.selection.length > 1) { if (!this.multiple && this.selection.length > 1) {
this.$message.error("对应的人员只允许选择一人！"); this.$message.error("对应的人员只允许选择一人！");
return; return;
} }
if (!this.selection || this.selection.length === 0) { if (!this.selection || this.selection.length === 0) {

383
src/style/fix.scss
View File

@ -22,60 +22,335 @@
--el-color-primary-dark-9: #060f19; --el-color-primary-dark-9: #060f19;
} }
.el-menu {border: none!important;} .el-menu {
.el-menu .el-menu-item a {color: inherit;text-decoration: none;display: block;width:100%;height:100%;position: absolute;top:0px;left:0px;} border: none !important;
.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);} .el-menu .el-menu-item a {
.adminui-tags li:hover {background-color: var(--el-color-primary-light-9);} color: inherit;
.adminui-tags li.active {background-color: var(--el-color-primary)!important;} text-decoration: none;
.contextmenu li:hover {background-color: var(--el-color-primary-light-9)!important;color: var(--el-color-primary-light-2)!important;} display: block;
.data-box .item-background {background-color: var(--el-color-primary)!important;} width: 100%;
.layout-setting,.diy-grid-setting {background-color: var(--el-color-primary)!important;} 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样式 */ /* 覆盖tinymce样式 */
.sceditor .tox-tinymce {border: 1px solid #DCDFE6;border-radius: 0;} .sceditor .tox-tinymce {
body .tox-tinymce-aux {z-index: 5700;} 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;
}

219
src/views/am/audio.vue
View File

@ -1,88 +1,143 @@
<template> <template>
<el-container> <el-container>
<el-header> <el-header>
<div class="left-panel"> <div class="left-panel">
<div class="right-panel-search"> <el-button type="primary" icon="el-icon-refresh" @click="syncData"
<el-input v-model="search.keyword" placeholder="编号" clearable @click="upsearch"></el-input> >同步</el-button
<el-button type="primary" icon="el-icon-search" @click="upsearch"></el-button> >
</div> </div>
</div> <div class="right-panel">
</el-header> <el-input
<el-main class="nopadding"> v-model="search.keyword"
<scTable ref="table" :apiObj="apiObj" row-key="id" @selection-change="selectionChange" stripe @resetQuery="resetQuery" > placeholder="编号"
<el-table-column type="selection" width="50"></el-table-column> clearable
<el-table-column label="序号" type="index" width="50"></el-table-column> @click="upsearch"
<el-table-column label="喇叭名称" prop="name" min-width="150"></el-table-column> ></el-input>
<el-table-column label="音量" prop="extra" min-width="100"> <el-button
<template #default="scope"> type="primary"
<span v-if="scope.row.extra&&scope.row.extra.player">{{scope.row.extra.player.EnvVolume}}</span> icon="el-icon-search"
</template> @click="upsearch"
</el-table-column> ></el-button>
<el-table-column label="设备sn" prop="sn" min-width="90"></el-table-column> </div>
<el-table-column label="ip" prop="extra" min-width="90"> </el-header>
<template #default="scope"> <el-main class="nopadding">
<span v-if="scope.row.extra">{{scope.row.extra.ip}}</span> <scTable
</template> ref="table"
</el-table-column> :apiObj="apiObj"
<el-table-column label="状态" prop="extra" min-width="90"> row-key="id"
<template #default="scope"> @selection-change="selectionChange"
<span v-if="scope.row.extra">{{scope.row.extra.online}}</span> stripe
</template> @resetQuery="resetQuery"
</el-table-column> >
<!--<el-table-column label="位置" prop="count_people" min-width="90"></el-table-column>--> <el-table-column type="selection" width="50"></el-table-column>
<el-table-column label="所在区域" prop="create_time" min-width="180"></el-table-column> <el-table-column label="序号" type="index" width="50"></el-table-column>
<el-table-column label="覆盖区域" prop="create_time" width="160"></el-table-column> <el-table-column
<el-table-column label="操作" fixed="right" align="center" width="160"> label="喇叭名称"
<template #default="scope"> prop="name"
<el-button-group> min-width="150"
<el-button text type="primary" size="small" @click="handlePosition(scope.row)">标记位置</el-button> ></el-table-column>
</el-button-group> <el-table-column label="音量" prop="extra" min-width="100">
</template> <template #default="scope">
</el-table-column> <span v-if="scope.row.extra && scope.row.extra.player">{{
</scTable> scope.row.extra.player.EnvVolume
</el-main> }}</span>
</el-container> </template>
<channel-view v-if="dialogSave" ref="saveDialog" :channelType="50" :channelCode="channelCode" :channelName="channelName" @closed="dialogSave=false"></channel-view> </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>
</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>
</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="操作" 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-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>
</template> </template>
<script> <script>
import channelView from './vchannel_view' import channelView from "./vchannel_view";
export default { export default {
name: 'audioVue', name: "audioVue",
components: { components: {
channelView channelView,
}, },
data() { data() {
return { return {
apiObj: this.$API.am.tdevice.speaker, syncLoading: false,
dialogSave: false, apiObj: this.$API.am.tdevice.speaker,
limitedVisible: false, dialogSave: false,
query: {}, limitedVisible: false,
selection: [], query: {},
search: { selection: [],
keyword: null search: {
}, keyword: null,
channelCode:'', },
channelName:'', channelCode: "",
} channelName: "",
}, };
methods: { },
handlePosition(row){ methods: {
this.channelCode = row.sn; handlePosition(row) {
this.channelName = row.name; this.channelCode = row.sn;
this.dialogSave = true; this.channelName = row.name;
}, this.dialogSave = true;
//表格选择后回调事件 },
selectionChange(selection){ //表格选择后回调事件
this.selection = selection; selectionChange(selection) {
}, this.selection = selection;
},
//搜索 //搜索
upsearch(){ upsearch() {},
},
resetQuery(){ resetQuery() {
this.query = {} this.query = {};
} },
} async syncData() {
} this.syncLoading = true;
var res = await this.$API.third.tdevice.vchannelSync.req({});
this.syncLoading = false;
},
},
};
</script> </script>

342
src/views/am/blt.vue
View File

@ -1,148 +1,202 @@
<template> <template>
<el-container> <el-container>
<el-header> <el-header>
<div class="left-panel"> <div class="left-panel">
<div class="right-panel-search"> <div class="right-panel-search">
<el-button type="primary" icon="el-icon-refresh" @click="updateData">同步</el-button> <el-button
</div> type="primary"
</div> icon="el-icon-refresh"
</el-header> @click="syncData"
<el-main class="nopadding"> :loading="syncLoading"
<scTable ref="table" :apiObj="apiObj" :params="query" row-key="id" @selection-change="selectionChange" stripe> >同步</el-button
<el-table-column type="selection" width="50"></el-table-column> >
<el-table-column label="序号" type="index" width="50"></el-table-column> </div>
<el-table-column label="id" prop="id" min-width="90"></el-table-column> </div>
<el-table-column label="mac" prop="code" min-width="90"></el-table-column> </el-header>
<el-table-column label="id" prop="id" min-width="90"></el-table-column> <el-main class="nopadding">
<el-table-column label="电量" prop="third_info" min-width="90"> <scTable
<template #default="scope"> ref="table"
<span v-if="scope.row.third_info">{{scope.row.third_info.battery}}%</span> :apiObj="apiObj"
</template> :params="apiParams"
</el-table-column> row-key="id"
<el-table-column label="状态" prop="third_info" min-width="90"> @selection-change="selectionChange"
<template #default="scope"> stripe
<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> <el-table-column label="序号" type="index" width="50"></el-table-column>
<span v-else>静止</span> <el-table-column label="id" prop="id" min-width="90"></el-table-column>
</template> <el-table-column
</el-table-column> label="mac"
<el-table-column label="在线" prop="third_info" min-width="90"> prop="code"
<template #default="scope"> min-width="90"
<span v-if="scope.row.third_info.online">在线</span> ></el-table-column>
<span v-else>离线</span> <el-table-column label="电量" prop="third_info" min-width="90">
</template> <template #default="scope">
</el-table-column> <span v-if="scope.row.third_info"
<el-table-column label="操作" fixed="right" align="center" width="160"> >{{ scope.row.third_info.battery }}%</span
<template #default="scope"> >
<el-button-group> </template>
<el-button v-if="scope.row.employee!==null" text type="warning" size="small" @click="handleBindBlt(20, scope.row)">解绑</el-button> </el-table-column>
<el-button v-else text type="primary" size="small" @click="handleBindBlt(10, scope.row)">绑定</el-button> <el-table-column label="状态" prop="third_info" min-width="90">
</el-button-group> <template #default="scope">
</template> <span
</el-table-column> v-if="
</scTable> scope.row.third_info && scope.row.third_info.workStatus === 0
</el-main> "
</el-container> ><el-tag>运动</el-tag></span
<el-Dialog >
title="绑定定位卡" <span
v-model="showBindBlt" v-else-if="
destroy-on-close scope.row.third_info && scope.row.third_info.workStatus === 2
@closed="closeDrawer" "
> ><el-tag type="warning">静止</el-tag></span
<el-form >
ref="dialogForm" <span v-else><el-tag type="warning">静止</el-tag></span>
:model="form" </template>
label-width="120px" </el-table-column>
> <el-table-column label="在线" prop="third_info" min-width="90">
<el-form-item label="卡号"> <template #default="scope">
{{form.blt}} <span v-if="scope.row.third_info.online"><el-tag type="success">在线</el-tag></span>
</el-form-item> <span v-else><el-tag type="warning">离线</el-tag></span>
<el-form-item label="绑定员工"> </template>
<el-select v-model="form.employee" style="width: 100%" :disabled="dis"> </el-table-column>
<el-option <el-table-column label="绑定对象" prop="employee" min-width="90">
v-for="item in employeeList" <template #default="scope">
:key="item.id" <span v-if="scope.row.employee">{{scope.row.employee_.name}}</span>
:label="item.name" </template>
:value="item.id" </el-table-column>
/> <el-table-column label="操作" fixed="right" align="center" width="160">
</el-select> <template #default="scope">
</el-form-item> <el-button-group>
<el-button
</el-form> v-if="scope.row.employee !== null"
<template #footer> text
<el-button v-if="form.type===10" type="primary" @click="submitBindBlt">绑定</el-button> type="warning"
<el-button v-if="form.type===20" type="primary" @click="submitBindBlt">解绑</el-button> size="small"
<el-button @click="showBindBlt = false">取消</el-button> @click="handleBindBlt(20, scope.row)"
</template> >解绑</el-button
</el-Dialog> >
<el-button
v-else
text
type="primary"
size="small"
@click="handleBindBlt(10, scope.row)"
>绑定</el-button
>
</el-button-group>
</template>
</el-table-column>
</scTable>
</el-main>
</el-container>
<el-Dialog
title="绑定定位卡"
v-model="showBindBlt"
destroy-on-close
@closed="closeDrawer"
>
<el-form ref="dialogForm" :model="form" label-width="120px">
<el-form-item label="卡号">
{{ 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">
<el-option
v-for="item in employeeList"
:key="item.id"
:label="item.name"
:value="item.id"
/>
</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 @click="showBindBlt = false">取消</el-button>
</template>
</el-Dialog>
</template> </template>
<script> <script>
import channelView from './vchannel_view' import channelView from "./vchannel_view";
export default { export default {
name: 'blt', name: "blt",
components: { components: {
channelView channelView,
}, },
data() { data() {
return { return {
apiObj: this.$API.third.tdevice.list, syncLoading: false,
query: { apiObj: this.$API.third.tdevice.list,
type:30, apiParams: {
}, type: 30,
selection: [], },
search: { selection: [],
keyword: null search: {
}, keyword: null,
dis: false, },
showBindBlt: false, dis: false,
employeeList: [], showBindBlt: false,
bindBltMac: '', employeeList: [],
form: { bindBltMac: "",
type: 10, form: {
blt: '', type: 10,
employee: '', blt: "",
}, employee: "",
} },
}, };
mounted(){ },
this.getEmployeeList(); mounted() {
}, this.getEmployeeList();
methods: { },
//表格选择后回调事件 methods: {
selectionChange(selection){ //表格选择后回调事件
this.selection = selection; selectionChange(selection) {
}, this.selection = selection;
//同步 },
updateData(){ //同步
this.$API.third.tdevice.list.req({}); async syncData() {
}, this.syncLoading = true;
getEmployeeList() { var res = await this.$API.third.tdevice.vchannelSync.req({});
let that = this; this.syncLoading = false;
that.$API.hrm.employee.list.req({job_state:10,page: 0}).then(res => { },
that.tdevice = res; getEmployeeList() {
that.employeeList = res; let that = this;
}) that.$API.hrm.employee.list
}, .req({ job_state: 10, page: 0 })
handleBindBlt(type, row) { .then((res) => {
this.dis = false; that.tdevice = res;
this.form.blt = row.id; that.employeeList = res;
this.bindBltMac = row.mac; });
this.form.type = type; },
if(type===20){ handleBindBlt(type, row) {
this.dis = true; this.dis = false;
this.form.employee = row.employee; this.form.blt = row.id;
} this.bindBltMac = row.code;
this.showBindBlt = true; this.form.type = type;
}, if (type === 20) {
submitBindBlt() { this.dis = true;
let that = this; this.form.employee = row.employee;
that.$API.third.tdevice.bltBind.req(this.form).then(res => { }
if(res.err_msg){}else{ this.showBindBlt = true;
that.showBindBlt = false; },
that.$refs.table.refresh(); submitBindBlt() {
} let that = this;
}) that.$API.third.tdevice.bltBind.req(this.form).then((res) => {
}, if (res.err_msg) {
} } else {
} that.showBindBlt = false;
that.$refs.table.refresh();
}
});
},
},
};
</script> </script>

266
src/views/am/em1.vue
View File

@ -1,104 +1,172 @@
<template> <template>
<el-container> <el-container>
<el-header> <el-header>
<div class="left-panel"> <div class="left-panel">
<div class="right-panel-search"> <el-button
<el-input v-model="search.keyword" placeholder="编号" clearable @click="upsearch"></el-input> type="primary"
<el-button type="primary" icon="el-icon-search" @click="upsearch"></el-button> icon="el-icon-refresh"
</div> @click="syncData"
</div> :loading="syncLoading"
</el-header> >同步</el-button
<el-main class="nopadding"> >
<scTable ref="table" :apiObj="apiObj" row-key="id" @selection-change="selectionChange" stripe @resetQuery="resetQuery" > </div>
<el-table-column type="selection" width="50"></el-table-column> <div class="right-panel">
<el-table-column label="序号" type="index" width="50"></el-table-column> <el-input
<el-table-column label="设备编号" prop="deviceCode" min-width="100"></el-table-column> v-model="search.keyword"
<el-table-column label="通道编号" prop="channelCode" min-width="100"></el-table-column> placeholder="编号"
<el-table-column label="通道名称" prop="channelName" min-width="150"></el-table-column> clearable
<el-table-column label="通道状态" prop="stat" min-width="150"></el-table-column> @click="upsearch"
<el-table-column label="通道类型" min-width="100"> ></el-input>
<template #default="scope">{{scope.row.channelType}}</template> <el-button
</el-table-column> type="primary"
<el-table-column label="设备类型" min-width="100"> icon="el-icon-search"
<template #default="scope">{{scope.row.cameraType}}</template> @click="upsearch"
</el-table-column> ></el-button>
<el-table-column label="是否在线" prop="isOnline" min-width="180"></el-table-column> </div>
<el-table-column label="创建时间" prop="createTime" width="160"></el-table-column> </el-header>
</scTable> <el-main class="nopadding">
</el-main> <scTable
</el-container> 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="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>
</el-table-column>
<el-table-column label="设备类型" min-width="100">
<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>
</scTable>
</el-main>
</el-container>
</template> </template>
<script> <script>
import videoChannelView from './vchannel_view' import videoChannelView from "./vchannel_view";
export default { export default {
name: 'monitor', name: "monitor",
components: { components: {
videoChannelView videoChannelView,
}, },
data() { data() {
return { return {
apiObj: this.$API.am.tdevice.dchannel, syncLoading: false,
dialogSave: false, apiObj: this.$API.am.tdevice.dchannel,
limitedVisible: false, pageStr: "pageNum",
query: {}, pageSizeStr: "pageSize",
selection: [], orderStr: "sort",
search: { parseData: (res)=>{
keyword: null return {
}, data: res, //分析无分页的数据字段结构
channelId:'', rows: res.pageData, //分析行数据字段结构
} total: res.totalRows, //分析总数字段结构
},
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;
},
//搜索
upsearch(){
},
resetQuery(){
this.query = {}
}
} }
} },
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;
},
//搜索
upsearch() {},
resetQuery() {
this.query = {};
},
async syncData() {
this.syncLoading = true;
var res = await this.$API.third.tdevice.vchannelSync.req({});
this.syncLoading = false;
},
},
};
</script> </script>

424
src/views/am/monitor.vue
View File

@ -1,183 +1,261 @@
<template> <template>
<el-container> <el-container>
<el-header> <el-header>
<div class="left-panel"> <div class="left-panel">
<div class="right-panel-search"> <el-button
<el-input v-model="search.keyword" placeholder="编号" clearable @click="upsearch"></el-input> type="primary"
<el-button type="primary" icon="el-icon-search" @click="upsearch"></el-button> icon="el-icon-refresh"
</div> @click="syncData"
</div> :loading="syncLoading"
</el-header> >同步</el-button
<el-main class="nopadding"> >
<scTable ref="table" :apiObj="apiObj" row-key="id" @selection-change="selectionChange" stripe </div>
@resetQuery="resetQuery"> <div class="right-panel">
<el-table-column type="selection" width="50"></el-table-column> <el-input
<el-table-column label="序号" type="index" width="50"></el-table-column> v-model="search.keyword"
<el-table-column label="设备编号" prop="deviceCode" min-width="100"></el-table-column> placeholder="编号"
<el-table-column label="通道编号" prop="channelCode" min-width="100"></el-table-column> clearable
<el-table-column label="通道名称" prop="channelName" min-width="150"></el-table-column> @click="upsearch"
<el-table-column label="通道状态" prop="stat" min-width="150"> ></el-input>
<template #default="scope"> <el-button
<span v-if="scope.row.stat===0">不启用</span> type="primary"
<span v-else>启用</span> icon="el-icon-search"
</template> @click="upsearch"
</el-table-column> ></el-button>
<el-table-column label="摄像头类型" min-width="100"> </div>
<template #default="scope">{{deviceTypes[scope.row.cameraType]}}</template> </el-header>
</el-table-column> <el-main class="nopadding">
<el-table-column label="是否在线" prop="isOnline" min-width="180"> <scTable
<template #default="scope"> ref="table"
<span v-if="scope.row.isOnline===0">离线</span> :apiObj="apiObj"
<span v-else>在线</span> row-key="id"
</template> :params="apiParams"
</el-table-column> :pageStr="pageStr"
<el-table-column label="创建时间" prop="createTime" min-width="160"></el-table-column> :pageSizeStr="pageSizeStr"
<el-table-column label="操作" fixed="right" align="center" width="260"> :orderStr="orderStr"
<template #default="scope"> :parseData="parseData"
<el-button-group> @selection-change="selectionChange"
<el-button text type="primary" size="small" @click="handlePosition(scope.row)">标记位置 stripe
</el-button> @resetQuery="resetQuery"
<el-button text type="primary" size="small" @click="handleView(scope.row)">实时监控</el-button> >
<el-popconfirm title="确定删除吗？" @confirm="handleDel(scope.row, scope.$index)"> <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="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-else>启用</span>
</template>
</el-table-column>
<el-table-column label="摄像头类型" min-width="100">
<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"><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="操作" 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>
<el-button
text
type="primary"
size="small"
@click="handleView(scope.row)"
>实时监控</el-button
>
<!-- <el-popconfirm title="确定删除吗？" @confirm="handleDel(scope.row, scope.$index)">
<template #reference> <template #reference>
<el-button text type="danger" size="small">删除</el-button> <el-button text type="danger" size="small">删除</el-button>
</template> </template>
</el-popconfirm> </el-popconfirm> -->
</el-button-group> </el-button-group>
</template> </template>
</el-table-column> </el-table-column>
</scTable> </scTable>
</el-main> </el-main>
</el-container> </el-container>
<el-dialog <el-dialog :title="channelName" v-model="limitedVisible" :width="745">
:title="channelName" <div style="height: 560px">
v-model="limitedVisible" <video id="videoElement" muted="muted"></video>
:width="745" </div>
>
<div style="height: 560px;">
<video id="videoElement" muted="muted"></video>
</div>
<template #footer> <template #footer>
<el-button @click="limitedVisible = false">关闭</el-button> <el-button @click="limitedVisible = false">关闭</el-button>
</template> </template>
</el-dialog> </el-dialog>
<channel-view v-if="dialogSave" ref="saveDialog" :channelType="60" :channelCode="channelCode" <channel-view
:channelName="channelName" @closed="dialogSave=false"></channel-view> v-if="dialogSave"
ref="saveDialog"
:channelType="60"
:channelCode="channelCode"
:channelName="channelName"
@closed="dialogSave = false"
></channel-view>
</template> </template>
<script> <script>
import channelView from './vchannel_view' import channelView from "./vchannel_view";
export default { export default {
name: 'monitor', name: "monitor",
components: { components: {
channelView channelView,
}, },
data() { data() {
return { return {
apiObj: this.$API.am.video.list, apiObj: this.$API.am.video.list,
dialogSave: false, apiParams: {
limitedVisible: false, "channelTypeList": ["1"]
query: {}, },
selection: [], pageStr: "pageNum",
search: { pageSizeStr: "pageSize",
keyword: null orderStr: "sort",
}, parseData: (res)=>{
channelId: '', return {
params: { data: res, //分析无分页的数据字段结构
json: { rows: res.pageData, //分析行数据字段结构
data: { total: res.totalRows, //分析总数字段结构
channelId: "",
streamType: "2",
type: "flv"
}
},
code: 'video_realtime'
},
deviceTypes: {
'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)
},
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 => {
debugger;
console.log(res);
this.url = res.url;
if (flvjs.isSupported()) {
let videoElement = document.getElementById('videoElement');
let flvPlayer = flvjs.createPlayer({
type: 'flv',
url: res.url
});
flvPlayer.attachMediaElement(videoElement);
flvPlayer.load();
flvPlayer.play();
}
})
},
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;
},
//搜索
upsearch() {
},
resetQuery() {
this.query = {}
}
} }
} },
dialogSave: false,
limitedVisible: false,
syncLoading: false,
query: {},
selection: [],
search: {
keyword: null,
},
channelId: "",
params: {
json: {
data: {
channelId: "",
streamType: "2",
type: "flv",
},
},
code: "video_realtime",
},
deviceTypes: {
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);
},
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) => {
debugger;
console.log(res);
this.url = res.url;
if (flvjs.isSupported()) {
let videoElement = document.getElementById("videoElement");
let flvPlayer = flvjs.createPlayer({
type: "flv",
url: res.url,
});
flvPlayer.attachMediaElement(videoElement);
flvPlayer.load();
flvPlayer.play();
}
});
},
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;
},
//搜索
upsearch() {},
resetQuery() {
this.query = {};
},
async syncData() {
this.syncLoading = true;
var res = await this.$API.third.tdevice.vchannelSync.req({});
this.syncLoading = false;
},
},
};
</script> </script>

1
src/views/vm/vistoradd.vue
View File

@ -112,7 +112,6 @@
:value="item.id" :value="item.id"
/> />
</el-select> </el-select>
<select-user <select-user
ref="form.receptionist" ref="form.receptionist"
:user="form.receptionist" :user="form.receptionist"