Commit 94965512 by 潘建波

提交codeAPI

1 parent ad552bac
...@@ -3,8 +3,9 @@ import login from "./login"; ...@@ -3,8 +3,9 @@ import login from "./login";
import task from "./task"; import task from "./task";
import show from "./show"; import show from "./show";
import search from "./search"; import search from "./search";
import device from "./device" import device from "./device";
import resource from "./resource" import resource from "./resource";
import codes from "./codes";
import ops from "./ops" import ops from "./ops"
let wsIP = "vion-panda.51vip.biz:52510"; let wsIP = "vion-panda.51vip.biz:52510";
switch (process.env.NODE_ENV) { switch (process.env.NODE_ENV) {
...@@ -27,6 +28,7 @@ export default { ...@@ -27,6 +28,7 @@ export default {
search, search,
device, device,
resource, resource,
codes,
ops, ops,
wsIP wsIP
}; };
import api from "../index";
import urls from "./urls";
export default {
//code
storeconfs(params, id) {
return api.get(urls.storeconfs, params);
},
cates(params, id) {
return api.get(urls.cates, params);
},
codes(params, id) {
return api.get(urls.codes + id + "/codes", params);
},
customCode(params, id) {
return api.get(urls.customCode, params);
},
eventCates(params) {
return api.get(urls.eventCates, params);
},
eventType(params, event_type_unid) {
return api.get(urls.eventType(event_type_unid), params);
},
eventTypes(params, id) {
return api.get(urls.eventTypes, params);
},
addEventTypes(params, id) {
return api.post(urls.eventTypes, params);
},
editEventType(params, event_unid) {
return api.post(urls.editEventType(event_unid), params);
},
deleteEventType(params, event_unid) {
return api.delete(urls.editEventType(event_unid), params);
}
};
import baseUrl from "../baseUrl";
export default {
cates: baseUrl + "/api/v1/codes/traffic/cates",
codes: baseUrl + "/api/v1/codes/traffic/cates/",
customCode: baseUrl + "/api/v1/codes/custom/cates",
menus: baseUrl + "/api/v1/auth/apps/0d88c025fafc5ad1189670655597c183/menus",
eventCates: baseUrl + "/api/v1/codes/event_cates",
eventTypes: baseUrl + "/api/v1/codes/event_types",
eventType(event_type_unid) {
return `${baseUrl}/api/v1/codes/event_types?event_cate=${event_type_unid}`;
},
editEventType(event_unid) {
return `${baseUrl}/api/v1/codes/event_types/${event_unid}`;
},
addTrafficCode(cate_unid) {
return `${baseUrl}/api/v1/codes/traffic/cates/${cate_unid}/codes`;
},
editTrafficCode(cate_unid, code_unid) {
return `${baseUrl}/api/v1/codes/traffic/cates/${cate_unid}}/codes/${code_unid}`;
}
};
...@@ -4,6 +4,9 @@ export default { ...@@ -4,6 +4,9 @@ export default {
getDev(params) { getDev(params) {
return api.get(`${baseUrl}/api/v1/devconf_fx/devs`); return api.get(`${baseUrl}/api/v1/devconf_fx/devs`);
}, },
getSubdev(pid, params) {
return api.get(`${baseUrl}/api/v1/devconf_fx/devs/${pid}/fx_devs`, params);
},
getGlobalWs(uid, clientid) { getGlobalWs(uid, clientid) {
return api.get(`${baseUrl}/api/v1/devconf_fx/ws_url?src_type=user&user_unid=${uid}&client_unid=${clientid}`); return api.get(`${baseUrl}/api/v1/devconf_fx/ws_url?src_type=user&user_unid=${uid}&client_unid=${clientid}`);
}, },
......
import api from '../index' import api from "../index";
import urls from './urls' import urls from "./urls";
export default { export default {
//登陆 //登陆
login(params,id) { login(params, id) {
return api.post(urls.login,params) return api.post(urls.login, params);
}, },
getMenus(params,id){ getMenus(params, id) {
return api.get(urls.menus,params) return api.get(urls.menus, params);
}, },
algocombs(params,id){ algocombs(params, id) {
return api.get(urls.algocombs,params) return api.get(urls.algocombs, params);
}, },
storeconfs(params,id){ storeconfs(params, id) {
return api.get(urls.storeconfs,params) return api.get(urls.storeconfs, params);
}, }
cates(params,id){ };
return api.get(urls.cates,params)
},
codes(params,id){
return api.get(urls.codes+id+'/codes',params)
},
customCode(params,id){
return api.get(urls.customCode,params)
},
}
...@@ -198,3 +198,15 @@ html,body{ ...@@ -198,3 +198,15 @@ html,body{
height :100%; height :100%;
width :100%; width :100%;
} }
.el-table__expanded-cell{
padding: 0px 50px!important;
}
.ml10{
margin-left: 10px;
}
.mt10{
margin-top: 10px;
}
.codes-tab-box .el-tabs__item{
width: 112px!important;
}
\ No newline at end of file \ No newline at end of file
...@@ -169,7 +169,14 @@ export const asyncRouterMap = [ ...@@ -169,7 +169,14 @@ export const asyncRouterMap = [
}, },
component: resolve => require(["../views/resource/store_confs.vue"], resolve), component: resolve => require(["../views/resource/store_confs.vue"], resolve),
}, },
{
path: "/resource/codes",
name: "字典管理",
meta: {
icon: "el-icon-location"
},
component: resolve => require(["../views/resource/Codes/codes.vue"], resolve),
},
] ]
},{ },{
path: "/ops", path: "/ops",
......
...@@ -106,9 +106,9 @@ import types from '../store/types.js' ...@@ -106,9 +106,9 @@ import types from '../store/types.js'
}) })
}, },
getCodeList(){ getCodeList(){
this.$api.login.cates().then(res => { this.$api.codes.cates().then(res => {
res.list_data.forEach(item=>{ res.list_data.forEach(item=>{
this.$api.login.codes({ this.$api.codes.codes({
},item.cate_unid).then(res => { },item.cate_unid).then(res => {
// 存储code列表 // 存储code列表
window.localStorage.setItem(item.name,JSON.stringify(res.list_data)) window.localStorage.setItem(item.name,JSON.stringify(res.list_data))
...@@ -123,7 +123,7 @@ import types from '../store/types.js' ...@@ -123,7 +123,7 @@ import types from '../store/types.js'
}) })
}, },
getCustomCode(){ getCustomCode(){
this.$api.login.customCode().then(res => { this.$api.codes.customCode().then(res => {
if(res.list_data.length > 0) { if(res.list_data.length > 0) {
res.list_data.forEach((item) => { res.list_data.forEach((item) => {
window.localStorage.setItem(item.name + '-' + item.cate, item.unid); window.localStorage.setItem(item.name + '-' + item.cate, item.unid);
......
<template>
<div class="setting-box">
<div class="search-box">
<el-col :span="4">
<el-input v-model="searchval"></el-input>
</el-col>
<el-col :span="2" class="ml10">
<el-button type="primary">查询</el-button>
</el-col>
</div>
<!-- 外层内容 -->
<div class="content-box" id="eqcontentbox">
<div class="left-box">
<div class="master-box">
master
</div>
<div class="submast-box">
<div
:class="{ 'sbumast-item': true, 'top-line': true }"
v-for="(item, index) in itemlength"
:key="item"
@click="getleval($event, index)"
:style="`background:rgba(${setsubcolor(index)},.2);borderColor:rgb(${setsubcolor(index)})`"
>
<div :class="{ 'sub-line': index == curindex }"></div>
{{ item }}
</div>
</div>
<!-- <div class="leval-box" :style="'top:'+topheihgt+'px;'" >
<div :class="{'sbumast-item':true,'top-line':istop,'bottom-line':!istop}" v-for="item in levallength" :key="item" @click="getleval($event)">
{{item}}
</div>
</div> -->
<div
v-if="istop"
:style="`top:${topheihgt}px;left:${item * 14 + 12}vw`"
v-for="item in 3"
:key="item"
class="leval-box"
>
<div
:class="{
'sbumast-item': true,
'leval-sbumast-item': true,
'top-line': istop,
'bottom-line': !istop
}"
v-for="item in levallength"
:key="item"
:style="`background:${curlevalcolor};borderColor:${curlevalbordercolor}`"
>
{{ '192.168.9.99' }}
</div>
</div>
<div
v-if="!istop"
:style="`bottom:${bottomHeight}px;left:${item * 14 + 12}vw`"
v-for="item in 3"
:key="item"
class="leval-bottom-box"
>
<div
ref="submast"
:class="{
'sbumast-item': true,
'leval-sbumast-item': true,
'top-line': istop,
'bottom-line': !istop
}"
v-for="item in levallength"
:key="item"
:style="`background:${curlevalcolor};borderColor:${curlevalbordercolor}`"
>
{{ '192.168.9.99' }}
</div>
</div>
</div>
<div class="right-box">
<span>xxxx</span>
</div>
</div>
<div style="clear: both;"></div>
</div>
</template>
<script>
export default {
data() {
return {
treeData: [],
itemlength: 10,
topheihgt: 120,
searchval: "",
styleheight: 0,
istop: true,
levallength: 5,
curindex: -1,
curlevalcolor: "#f0f0f0",
curlevalbordercolor: "#f0f0f0",
submastcolor:['48,210,255','86,183,202','237,140,36','181,184,41','104,182,69','105,199,187','71,157,248','0,105,255','116,96,238','232,84,30'],
defaultProps: {
children: "childs",
label: "device_name"
},
bottomHeight:0,
stylebottom:{
},
dev_unid: sessionStorage.getItem("dev_unid")
};
},
mounted() {
this.styleheight = 55 * 6;
this.itemlength = 39;
this.levallength = 6;
Math.ceil(9 / 6);
},
methods: {
getleval(ev, index) {
var eqc = document.getElementById("eqcontentbox").clientHeight;
console.log(ev);
this.curindex = index;
this.topheihgt = ev.toElement.offsetTop + 70 + 30;
if (index === 2) {
this.topheihgt = ev.toElement.offsetTop + 70 + 29;
}
if (index > 4) {
this.istop = false;
} else {
this.istop = true;
}
this.bottomHeight = eqc - ev.toElement.offsetTop - 62;
if (index % 3 == 0) {
this.bottomHeight = eqc - ev.toElement.offsetTop - 61;
}
this.curlevalcolor = ev.toElement.style.backgroundColor;
this.curlevalbordercolor = ev.toElement.style.borderColor;
let a = document.querySelectorAll(".leval-sbumast-item");
},
setsubcolor(index) {
let color = "";
if (index >= 10) {
let c = String(index);
let i = Number(c[c.length-1]);
color = this.submastcolor[i];
} else {
color = this.submastcolor[index];
}
return color;
},
getTree() {
this.$api.resource
.getDevsName(
{
is_leaf: 0
},
this.dev_unid
)
.then(res => {
this.treeData = res.list_data;
this.treeData.forEach(item => {
this.getChild(item.device_id);
});
});
},
getChild(id) {
this.$api.resource
.getDevsName(
{
limit: 9999,
offset: 0,
parent_id: id
},
this.dev_unid
)
.then(res => {
this.treeData.forEach(item => {
if (item.device_id == id) {
this.treeData.childs = res.list_data;
}
});
})
.catch(error => {});
},
handleNodeClick(data) {
console.log(data);
}
}
};
</script>
<style scoped="scoped" lang="scss">
.setting-box {
height: calc(100% - 58.5px);
width: 99%;
margin: 1.5vh auto 0;
background: #fff;
overflow: hidden;
border-radius: 2px;
}
.content-box {
display: flex;
height: 100%;
position: relative;
}
.search-box {
padding: 10px;
border-bottom: 1vh solid #f5f7f9;
overflow: hidden;
}
.left-box {
overflow: auto;
width: 65vw;
position: relative;
height: 100%;
margin: 0 0 12vh 0;
}
.left-box::-webkit-scrollbar {display:none}
.right-box {
width: 10vw;
height: 100%;
border-left: 10px solid #f5f7f9;
}
.master-box {
position: absolute;
height: 40px;
width: 140px;
line-height: 40px;
text-align: center;
background: rgba(18, 62, 108, 0.2);
border: 1px solid rgba(18, 62, 108, 1);
border-radius: 5px;
left: 20px;
top: 20px;
}
.submast-box {
position: absolute;
left: 12vw;
top: 70px;
padding: 0 0 10vh 0;
}
.sbumast-item {
position: relative;
height: 5vh;
width: 7vw;
text-align: center;
border-radius: 5px;
margin-top: 1vh;
border: 1px solid #333;
}
.sbumast-item::before {
content: "";
display: block;
position: absolute;
left: -5vw;
top: 2.5vh;
background: #123E6C;
width: 5vw;
height: 1px;
}
.sbumast-item::after {
content: "";
display: block;
position: absolute;
left: -5vw;
top: 1.5vh;
background: #123E6C;
width: 1px;
height: 7.3vh;
}
.top-line:first-child::after {
height: 10vh;
top: -2.2vh;
}
.sbumast-item:last-child::after {
height: 0;
}
.bottom-line:last-child::after {
height: 7.35vh;
}
.leval-box {
position: absolute;
}
.leval-box::before{
position: absolute;
content: "";
height: 1px;
width: 16.1vw;
left: -5vw;
top: -1.1vh;
background: #ED8C24;
}
.leval-box:last-child::before {
width: 0;
}
.leval-bottom-box {
position: absolute;
}
.leval-bottom-box::before {
position: absolute;
content:"";
height: 1px;
width: 15.1vw;
left: -4vw;
bottom: -3.8vh;
background: #ED8C24;
}
.leval-bottom-box:last-child::before {
width: 0;
}
.leval-bottom-box .sbumast-item::after {
height: 6.4vh;
top: 2.5vh;
background: #ED8C24;
}
.leval-bottom-box .sbumast-item::before,
.leval-box .sbumast-item::before {
left: -3vw;
background: #ED8C24;
width: 3vw;
height: 1px;
}
.leval-bottom-box .sbumast-item::after,
.leval-box .sbumast-item::after {
left: -3vw;
background: #ED8C24;
}
.sub-line {
position: absolute;
height: 1px;
width: 3vw;
right: -3vw;
background: #ED8C24;
top: 20px;
}
.leval-top-line {
position: absolute;
height: 1px;
top: -1.1vh;
width: 14vw;
left: -19vw;
background: #ED8C24;
}
</style>
<template> <template>
<div> <div class="setting-box">
<div class="search-box">
<el-col :span="4">
<el-input v-model="searchval"></el-input>
</el-col>
<el-col :span="2" class="ml10">
<el-button type="primary">查询</el-button>
</el-col>
</div>
<!-- 外层内容 --> <!-- 外层内容 -->
<div class="leftBox"> <div class="content-box" id="eqcontentbox">
<div class="titles">分析设备列表</div> <div class="left-box">
<div class="treeBox"> <div class="master-box" v-if="devData.length > 0" @click="getSubDev(devData[0])">
<el-tree <div>{{devData[0].device_name}}</div>
:data="treeData" <div>{{devData[0].out_ip}}</div>
:props="defaultProps" </div>
accordion <div class="submast-box">
highlight-current <div
:expand-on-click-node=false :class="{ 'submast-item': true, 'top-line': true }"
@node-click="handleNodeClick"> v-for="(subitem, index) in subDevData"
</el-tree> :key="subitem.device_id"
ref="subitem"
@click.stop="getleval($event, index, subitem)"
:style="
`background:rgba(${setsubcolor(
index
)},.2);borderColor:rgb(${setsubcolor(index)})`
"
>
<div
:class="{ 'sub-line': index == curindex && slaveData.length > 0 }"
:style="`background:${curlevalbordercolor}`"
></div>
<div>{{subitem.device_name}}</div>
<div>{{subitem.out_ip}}</div>
</div>
</div>
<!-- 叶子节点 -->
<div
v-if="istop && slaveData.length > 0"
:style="`top:${topheihgt}px;left:${loopitem * 14 + 12}vw`"
v-for="(loopitem, loopindex) in Math.ceil(slaveData.length / 6)"
:key="loopitem"
class="leval-box"
>
<span
class="leval-top-line"
:style="`background:${curlevalbordercolor}`"
></span>
<div
:class="{
'leval-submast-item': true,
'top-line': istop,
'bottom-line': !istop
}"
v-for="(item, cindex) in setslaveData(slaveData, loopindex)"
:key="item"
:style="
`background:${curlevalcolor};borderColor:${curlevalbordercolor}`
"
>
<span
class="left-line"
:style="`background:${curlevalbordercolor}`"
></span>
<span
class="vertical-line"
:style="`background:${curlevalbordercolor}`"
></span>
<span>{{ item }}</span>
</div>
</div>
<div
v-if="!istop && slaveData.length > 0"
:style="`bottom:${bottomHeight}px;left:${loopitem * 14 + 12}vw`"
v-for="(loopitem, loopindex) in Math.ceil(slaveData.length / 6)"
:key="loopitem"
class="leval-bottom-box"
>
<span
class="leval-bottom-line"
:style="`background:${curlevalbordercolor}`"
></span>
<div
ref="submast"
:class="{
'leval-submast-item': true,
'top-line': istop,
'bottom-line': !istop
}"
v-for="item in setslaveData(slaveData,loopindex)"
:key="item"
:style="
`background:${curlevalcolor};borderColor:${curlevalbordercolor}`
"
>
<span
class="left-line"
:style="`background:${curlevalbordercolor}`"
></span>
<span
class="vertical-line"
:style="`background:${curlevalbordercolor}`"
></span>
<span>{{ "1.9.99" }}</span>
</div>
</div>
</div>
<div class="right-box">
<div class="info-box">
<div class="info-title">
<span class="icon el-icon-star-off"></span>
<span class="title">设备信息</span>
</div>
<div class="info-content">
<div class="con-item">
<span class="con-label">平台类型:</span>
<span class="con-text">{{}}</span>
</div>
<div class="con-item">
<span class="con-label">设备类型:</span>
<span class="con-text"></span>
</div>
<div class="con-item">
<span class="con-label">设备名称:</span>
<span class="con-text">{{curDevData.device_name}}</span>
</div>
<div class="con-item">
<span class="con-label">设备ID:</span>
<span class="con-text">{{curDevData.device_id}}</span>
</div>
<div class="con-item">
<span class="con-label">内网信息:</span>
<span class="con-text">{{curDevData.in_ip}}</span>
</div>
<div class="con-item">
<span class="con-label">外网信息:</span>
<span class="con-text">{{curDevData.out_ip}}</span>
</div>
</div>
</div>
<div class="info-box">
<div class="info-title">
<span class="icon el-icon-star-off"></span>
<span class="title">系统版本</span>
</div>
<div class="info-content">
<div class="con-item">
<span class="con-label">系统版本:</span>
<span class="con-text">{{curDevData.system_version?curDevData.system_version:"无"}}</span>
</div>
<div class="con-item">
<span class="con-label">算法版本:</span>
<span class="con-text">{{curDevData.algorithm_version?curDevData.algorithm_version:"无"}}</span>
</div>
<div class="con-item">
<span class="con-label">软件版本:</span>
<span class="con-text">{{curDevData.software_version?curDevData.software_version:"无"}}</span>
</div>
<div class="con-item">
<span class="con-label">固件版本:</span>
<span class="con-text">{{curDevData.firmware_version?curDevData.firmware_version:"无"}}</span>
</div>
</div>
</div>
<div class="info-box">
<div class="info-title">
<span class="icon el-icon-star-off"></span>
<span class="title">系统信息</span>
</div>
<div class="info-content">
<div class="con-item">
<span class="con-label">分析设备数:</span>
<span class="con-text">{{ curDevData.picture_total ? parseInt(curDevData.picture_total)+parseInt(curDevData.video_total) : (curDevData.video_total ? parseInt(curDevData.picture_total)+parseInt(curDevData.video_total) : 0)}}</span>
</div>
<div class="con-item">
<span class="con-label">已用设备:</span>
<span class="con-text">{{ curDevData.picture_busy ? parseInt(curDevData.picture_busy)+parseInt(curDevData.video_busy) : (curDevData.video_busy ? parseInt(curDevData.picture_busy)+parseInt(curDevData.video_busy) : 0) }}</span>
</div>
<div class="con-item">
<span class="con-label">离线资源:</span>
<span class="con-text">{{ curDevData.picture_free ? parseInt(curDevData.picture_free)+parseInt(curDevData.video_free) : (curDevData.video_free ? parseInt(curDevData.picture_free)+parseInt(curDevData.video_free) : 0) }}</span>
</div>
</div>
</div> </div>
</div> </div>
<div class="rightBox">
</div> </div>
<div style="clear: both;"></div> <div style="clear: both;"></div>
</div> </div>
</template> </template>
<script> <script>
export default{ export default {
data(){ data() {
return{ return {
treeData: [], treeData: [],
subDevData: [],
topheihgt: 120,
searchval: "",
styleheight: 0,
istop: true,
levallength: 5,
curindex: -1,
curlevalcolor: "#f0f0f0",
curlevalbordercolor: "#f0f0f0",
parentData: {},
slaveData:[],
devData:[],
submastcolor: [
"48,210,255",
"86,183,202",
"237,140,36",
"181,184,41",
"104,182,69",
"105,199,187",
"71,157,248",
"0,105,255",
"116,96,238",
"232,84,30"
],
curDevData: {},
defaultProps: { defaultProps: {
children: 'childs', children: "childs",
label: 'device_name' label: "device_name"
},
bottomHeight: 0,
stylebottom: {},
dev_unid: sessionStorage.getItem("dev_unid")
};
}, },
dev_unid:sessionStorage.getItem('dev_unid') mounted() {
this.styleheight = 55 * 6;
this.subDevData = 0;
},
created() {
this.dataInit();
},
methods: {
getleval(ev, index, dev) {
this.curDevType = "sub";
let obj = {
parent_id: dev.device_id
};
this.curDevData = dev;
this.$api.device.getSubdev(this.parentData, obj).then(res => {
this.slaveData = res.list_data;
var eqc = document.getElementById("eqcontentbox").clientHeight;
console.log(ev);
this.curindex = index;
this.topheihgt = this.$refs.subitem[index].offsetTop + 70 + 30;
if (index === 2) {
this.topheihgt = this.$refs.subitem[index].offsetTop + 70 + 29;
}
if (this.topheihgt > 340) {
this.istop = false;
} else {
this.istop = true;
} }
this.bottomHeight = eqc - this.$refs.subitem[index].offsetTop - 62;
if (index % 3 == 0) {
this.bottomHeight = eqc - this.$refs.subitem[index].offsetTop - 61;
}
this.curlevalcolor = this.$refs.subitem[index].style.backgroundColor;
this.curlevalbordercolor = this.$refs.subitem[index].style.borderColor;
});
}, },
mounted(){ setsubcolor(index) {
console.log(this.setvisible) let color = "";
if (index >= 10) {
let c = String(index);
let i = Number(c[c.length - 1]);
color = this.submastcolor[i];
} else {
color = this.submastcolor[index];
}
return color;
}, },
methods:{ dataInit: function() {
getTree(){ this.$api.device.getDev().then(res => {
this.$api.resource.getDevsName({ this.parentData = res[0].dev_unid;
is_leaf: 0 this.getDev();
},this.dev_unid).then(res=>{ });
this.treeData=res.list_data;
this.treeData.forEach(item=>{
this.getChild(item.device_id)
})
})
}, },
getChild(id){ getDev() {
this.$api.resource.getDevsName({ this.$api.device.getSubdev(this.parentData).then(res => {
this.devData = res.list_data;
this.curDevType = "master";
this.curDevData = res.list_data[0];
console.log(this.curDevData);
});
},
getSubDev(dev) {
let obj = {
parent_id: dev.device_id
};
this.$api.device.getSubdev(this.parentData, obj).then(res => {
this.subDevData = res.list_data;
});
},
setslaveData(data, index){
return data.slice(index*6,6*(index+1))
},
getChild(id) {
this.$api.resource
.getDevsName(
{
limit: 9999, limit: 9999,
offset: 0, offset: 0,
parent_id: id, parent_id: id
},this.dev_unid).then((res)=>{ },
this.treeData.forEach(item=>{ this.dev_unid
if(item.device_id==id){ )
this.treeData.childs=res.list_data .then(res => {
this.treeData.forEach(item => {
if (item.device_id == id) {
this.treeData.childs = res.list_data;
} }
});
}) })
}).catch((error)=>{ .catch(error => {});
})
}, },
handleNodeClick(data) { handleNodeClick(data) {
console.log(data); console.log(data);
},
} }
} }
};
</script> </script>
<style scoped="scoped" lang="scss"> <style scoped="scoped" lang="scss">
.bofangIcon{ .setting-box {
cursor: pointer; height: calc(100% - 58.5px);
color:#cccccc; width: 99%;
font-size:16px; margin: 1.5vh auto 0;
margin-left: 26px; background: #fff;
} overflow: hidden;
.moveIcon{ border-radius: 2px;
cursor: pointer; }
color:#34b3a2; .content-box {
font-size:16px; display: flex;
} height: 100%;
.delIcon{ position: relative;
}
.search-box {
padding: 10px;
border-bottom: 1vh solid #f5f7f9;
overflow: hidden;
}
.left-box {
overflow: auto;
width: 63vw;
position: relative;
height: 100%;
margin: 0 0 12vh 0;
}
.left-box::-webkit-scrollbar {
display: none;
}
.right-box {
width: 10vw;
height: 100%;
border-left: 10px solid #f5f7f9;
}
.master-box {
position: absolute;
height: 40px;
width: 140px;
text-align: center;
background: rgba(18, 62, 108, 0.2);
border: 1px solid rgba(18, 62, 108, 1);
border-radius: 5px;
left: 30px;
top: 25px;
cursor: pointer; cursor: pointer;
color:#f2365a; }
font-size:16px;
} .submast-box {
.leftBox{ position: absolute;
width: 233px; left: 12vw;
height: 630px; top: 70px;
border:1px solid rgba(229,229,229,1); padding: 0 0 10vh 0;
float: left; }
} .submast-item,
.titles{ .leval-submast-item {
position: relative;
height: 5vh;
width: 7vw;
text-align: center;
border-radius: 5px;
margin-top: 1vh;
border: 1px solid #333;
}
.submast-item::before {
content: "";
display: block;
position: absolute;
left: -5vw;
top: 2.5vh;
background: #123e6c;
width: 5vw;
height: 1px;
}
.submast-item::after {
content: "";
display: block;
position: absolute;
left: -5vw;
top: 1.5vh;
background: #123e6c;
width: 1px;
height: 7.3vh;
}
.leval-submast-item .left-line {
display: block;
position: absolute;
left: -5vw;
top: 2.5vh;
background: #123e6c;
width: 5vw;
height: 1px;
}
.leval-submast-item .vertical-line {
position: absolute;
left: -3vw;
top: 2.1vh;
background: #123e6c;
width: 1px;
height: 6.5vh;
}
.top-line:first-child::after {
height: 10vh;
top: -1.5vh;
}
.top-line .vertical-line {
height: 11vh;
top: -2.2vh;
}
.submast-item:last-child::after {
height: 0;
}
.leval-box {
position: absolute;
}
.leval-bottom-box {
position: absolute;
}
.leval-bottom-box .left-line,
.leval-box .left-line {
left: -3vw;
background: #ed8c24;
width: 3vw;
height: 1px;
}
.leval-bottom-box .vertical-line,
.leval-box .vertical-line {
left: -3vw;
background: #ed8c24;
}
.leval-submast-item:last-child .vertical-line {
height: 0;
}
.leval-bottom-box .bottom-line .vertical-line {
height: 6.3vh;
top: 2.5vh;
}
.sub-line {
position: absolute;
height: 1px;
width: 3vw;
right: -3vw;
top: 20px;
}
.leval-top-line {
position: absolute;
height: 1px;
width: 16.1vw;
left: -5vw;
top: -1.1vh;
background: #ed8c24;
}
.leval-bottom-line {
position: absolute;
height: 1px;
width: 15.1vw;
left: -4vw;
bottom: -3.8vh;
background: #ed8c24;
}
.leval-bottom-box:last-child .leval-bottom-line {
width: 0;
}
.leval-box:last-child .leval-top-line {
width: 0;
}
.info-box {
padding: 1.5vw 0 0 1.5vw;
overflow: hidden;
}
.info-title .icon {
display: inline-block;
height: 30px; height: 30px;
width: 30px;
border-radius: 30px;
background: rgba(59, 183, 255, 1);
text-align: center;
line-height: 30px; line-height: 30px;
padding-left: 13px; font-size: 20px;
background: $title-backgroud; color: #fff;
}
.info-title .title {
padding: 0 0 0 20px;
vertical-align: top;
font-size: 16px;
color: #000;
}
.info-content {
margin-left: 50px;
font-size: 14px; font-size: 14px;
color: $title-color; color: #000;
} }
.treeBox{
padding: 6px;
}
.rightBox{
float: left;
margin-left: 14px;
}
.imgBox{
width: 587px;
height: 330px;
border:1px solid #444444;
margin-bottom: 14px;
}
</style> </style>
<template>
<div class="contentBox">
<div class="content">
<div>
<template>
<el-tabs
v-model="activeName"
@tab-click="tabClick"
class="codes-tab-box"
>
<el-tab-pane label="交通字典" name="trffic">
<trfficcodes></trfficcodes>
</el-tab-pane>
<el-tab-pane label="事件字典" name="event">
<eventcodes></eventcodes>
</el-tab-pane>
</el-tabs>
</template>
</div>
</div>
</div>
</template>
<script>
import trfficcodes from "./trfficcodes";
import eventcodes from "./eventcodes";
export default {
data() {
return {
activeName: "trffic"
};
},
components: {
trfficcodes,
eventcodes
},
methods: {
tabClick(){}
},
created() {}
};
</script>
<style lang="scss" scoped>
.topCon {
background: $white-back-color;
margin-bottom: 12px;
height: 100px;
.left {
display: inline-block;
margin: {
top: 22px;
left: 30px;
}
img {
width: 65px;
height: 55px;
margin-right: 11px;
}
.topText {
font-size: 24px;
font-family: MicrosoftYaHeiUI-Bold, MicrosoftYaHeiUI;
font-weight: bold;
margin-bottom: 4px;
}
.bottomText {
font-size: 14px;
font-family: MicrosoftYaHeiUI;
}
}
.right {
float: right;
.topText {
font-size: 28px;
font-family: MicrosoftYaHeiUI-Bold, MicrosoftYaHeiUI;
font-weight: bold;
}
.bottomText {
position: relative;
top: -1px;
font-size: 14px;
font-family: MicrosoftYaHeiUI;
}
}
.textCon {
display: inline-block;
vertical-align: top;
}
.border {
display: inline-block;
height: 40px;
border: {
left: 2px solid $border-color;
}
}
.rightBox {
margin-top: 14px;
display: inline-block;
img {
margin: {
top: 15px;
right: 22px;
}
}
}
.rightBox:nth-of-type(1) {
img {
width: 34px;
height: 34px;
}
.textCon {
margin-right: 114px;
}
}
.rightBox:nth-of-type(2) {
position: relative;
top: 4px;
img {
width: 40px;
height: 40px;
margin-left: 102px;
}
.textCon {
margin-right: 101px;
}
}
.rightBox:nth-of-type(3) {
img {
width: 34px;
height: 35px;
margin-left: 104px;
}
.textCon {
margin-right: 184px;
}
}
}
.resourceDiv {
display: inline-block;
margin-left: 10%;
span {
margin-right: 5%;
}
}
.content {
background: #ffffff;
}
.inputBox {
margin-right: 20px;
}
.selectBox {
margin-right: 20px;
}
.editIcon {
cursor: pointer;
color: #0069ff;
font-size: 16px;
}
.editIcon2 {
cursor: pointer;
color: #87d14b;
font-size: 16px;
}
.playIcon {
cursor: pointer;
color: #34b3a2;
font-size: 16px;
}
.pauseIcon {
cursor: pointer;
color: #ffc62e;
font-size: 14px;
}
.delIcon {
cursor: pointer;
color: #f2365a;
font-size: 16px;
}
.code-tab{
width: 112px;
}
</style>
<template>
<div class="contentBox">
<span>
<el-select
class="selectBox"
v-model="curcate"
placeholder="请选择"
@change="cateChange"
:popper-append-to-body="false"
>
<el-option
v-for="(item, index) in eventCateData"
:key="index"
:value="item.event_cate_unid"
:label="item.name"
></el-option>
</el-select>
</span>
<span class="code-btn">
<el-button type="primary" @click="addCodes">添加code</el-button>
</span>
<div class="content">
<div>
<el-table
height="574"
:data="tableData"
stripe
border
style="width: 100%"
>
<el-table-column type="index" label="#" align="center" width="40">
</el-table-column>
<el-table-column
align="center"
prop="event_type_unid"
label="event_type_unid"
>
</el-table-column>
<el-table-column prop="code" align="center" label="code">
</el-table-column>
<el-table-column align="center" prop="name" label="名称">
</el-table-column>
<el-table-column
align="center"
prop="event_cate_unid"
label="类型"
:formatter="cateFormatter"
>
</el-table-column>
<el-table-column align="center" prop="operation" label="操作">
<template slot-scope="scope">
<el-tooltip
content="编辑"
placement="bottom"
effect="light"
:visible-arrow="false"
>
<span
class="iconfont icon-xiugai editIcon"
@click="editCode(scope.$index, scope.row)"
></span>
</el-tooltip>
<el-tooltip
content="删除"
placement="bottom"
effect="light"
:visible-arrow="false"
>
<span
class="iconfont icon-detail delIcon del-btn"
@click="deleteCode(scope.$index, scope.row)"
></span>
</el-tooltip>
</template>
</el-table-column>
</el-table>
<div style="margin-top: 28px;">
<el-pagination
style="float: right;"
background
prev-text="上一页"
next-text="下一页"
:page-sizes="[20, 30, 50, 100, 200]"
layout="prev, pager, next,sizes"
:current-page="page"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:total="total"
>
</el-pagination>
<div style="clear: both;"></div>
</div>
</div>
</div>
<el-dialog title="设置CODE" :visible.sync="detailVisible" width="400px">
<el-form
ref="eventform"
:model="codeData"
label-position="left"
label-width="80px"
>
<el-form-item
label="类型"
prop="catename"
:rules="[
{ required: true, message: '类型不能为空!', trigger: 'blur' }
]"
>
<el-input v-model="codeData.catename" disabled></el-input>
</el-form-item>
<el-form-item
label="CODE"
prop="code"
:rules="[
{ required: true, message: 'code不能为空!', trigger: 'blur' }
]"
>
<el-input v-model="codeData.code"></el-input>
</el-form-item>
<el-form-item
label="名称"
prop="name"
:rules="[
{ required: true, message: '名称不能为空!', trigger: 'blur' }
]"
>
<el-input v-model="codeData.name"></el-input>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button size="small" @click="detailVisible = false">取 消</el-button>
<el-button size="small" type="primary" @click="saveCode"
>确 定</el-button
>
</span>
</el-dialog>
</div>
</template>
<script>
export default {
data() {
return {
total: 0,
page: 1,
pageSize: 20,
tableData: [],
detailVisible: false,
eventCateData: [],
curcate: "",
catename: "",
codeData: {
name: "",
code: "",
catename: ""
},
editStatus: 0,
event_type_unid: ""
};
},
components: {},
created() {
// this.getEventList();
this.getEventCate();
},
methods: {
getEventList() {
this.$api.codes.eventTypes({}).then(res => {
this.tableData = res.list_data;
});
},
cateChange() {
this.$api.codes.eventType({}, this.curcate).then(res => {
this.tableData = res.list_data;
});
},
getEventCate() {
this.$api.codes.eventCates({}).then(res => {
this.eventCateData = res.list_data;
});
},
addCodes() {
this.eventCateData.forEach(ele => {
if (ele.event_cate_unid === this.curcate) {
this.codeData.catename = ele.name;
}
});
this.detailVisible = true;
this.editStatus = 0;
},
cateFormatter(row) {
return this.getCateName(row.event_cate_unid);
},
editCode(index, row) {
this.event_type_unid = row.event_type_unid;
this.detailVisible = true;
this.editStatus = 1;
this.codeData = {
name: row.name,
code: row.code,
catename: this.getCateName(this.curcate),
event_cate_unid: row.event_cate_unid
};
},
deleteCode(index, row) {
this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
})
.then(() => {
this.$api.codes.deleteEventType({}, row.event_type_unid).then(res => {
this.$message({
type: "success",
message: "删除成功!"
});
this.cateChange();
});
})
.catch(() => {
this.$message({
type: "info",
message: "已取消删除"
});
});
},
getCateName(cateunid) {
let name = "";
this.eventCateData.forEach(ele => {
if (ele.event_cate_unid === cateunid) {
name = ele.name;
}
});
return name;
},
saveCode() {
this.$refs["eventform"].validate(valid => {
if (valid) {
if (this.editStatus === 0) {
this.saveAddCode();
}
if (this.editStatus === 1) {
this.saveEditCode();
}
} else {
console.log("error submit!!");
return false;
}
});
},
saveAddCode() {
let data = {
event_cate_unid: this.curcate,
code: this.codeData.code,
name: this.codeData.name
};
this.$api.codes.addEventTypes(data).then(res => {
this.detailVisible = false;
this.$refs["eventform"].resetFields();
this.cateChange();
});
},
saveEditCode() {
let obj = {
event_cate_unid: this.curcate,
code: this.codeData.code,
name: this.codeData.name,
note: ""
};
this.$api.codes
.editEventType(this.codeData, this.event_type_unid)
.then(res => {
this.detailVisible = false;
this.$refs["eventform"].resetFields();
this.cateChange();
this.editStatus = 0;
});
},
handleSizeChange(val) {
this.pageSize = val;
},
handleCurrentChange(val) {
this.page = val;
}
}
};
</script>
<style lang="scss" scoped>
.code-btn {
margin-bottom: 10px;
float: right;
margin-right: 10px;
}
.del-btn {
padding-left: 20px;
}
</style>
<template>
<div class="contentBox">
<div class="content">
<div>
<span class="selectBox">
<el-select
v-model="selectDevs"
placeholder="请选择"
@change="cateChange"
:popper-append-to-body="false"
>
<el-option
v-for="item in catesData"
:key="item"
:value="item.cate_unid"
:label="item.name"
></el-option>
</el-select>
</span>
<span class="addbox">
<el-button type="primary">添加code</el-button>
</span>
</div>
<div class="mt10">
<el-table
height="574"
:data="tableData"
stripe
border
style="width: 100%"
>
<el-table-column type="index" align="center" label="#" width="40"></el-table-column>
<el-table-column align="center" prop="code_unid" label="code_unid">
</el-table-column>
<el-table-column prop="code" align="center" label="code">
</el-table-column>
<el-table-column align="center" prop="name" label="名称">
</el-table-column>
</el-table>
<div style="margin-top: 28px;">
<el-pagination
style="float: right;"
background
prev-text="上一页"
next-text="下一页"
:page-sizes="[20, 30, 50, 100, 200]"
layout="prev, pager, next,sizes"
:current-page="page"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:total="total"
>
</el-pagination>
<div style="clear: both;"></div>
</div>
</div>
</div>
<el-dialog title="详情" :visible.sync="detailVisible" width="20%">
</el-dialog>
</div>
</template>
<script>
export default {
data() {
return {
detailData: [],
total: 0,
page: 1,
pageSize: 20,
tableData: [],
catesData: [],
selectDevs: "",
detailVisible: false
};
},
components: {},
created() {
this.getCates();
},
methods: {
cateChange(cateunid) {
let offset = (this.page - 1) * this.pageSize;
let obj = {
limit: this.pageSize,
offset: offset
}
this.$api.codes
.codes(obj, cateunid)
.then(res => {
this.tableData = res.list_data;
})
.catch(err => {});
},
getCates() {
this.$api.codes.cates().then(res => {
this.catesData = res.list_data;
});
},
handleSizeChange(val) {
this.pageSize = val;
},
handleCurrentChange(val) {
this.page = val;
}
}
};
</script>
<style lang="scss" scoped>
.addbox{
float: right;
margin-right: 10px;
}
</style>
...@@ -5,7 +5,8 @@ ...@@ -5,7 +5,8 @@
<div class="tree-title">视频设备</div> <div class="tree-title">视频设备</div>
<div class=""></div> <div class=""></div>
<div class=""> <div class="">
<el-input class="search-input" <el-input
class="search-input"
prefix-icon="el-icon-search" prefix-icon="el-icon-search"
placeholder="请输入内容" placeholder="请输入内容"
v-model="searchInfo" v-model="searchInfo"
...@@ -13,14 +14,44 @@ ...@@ -13,14 +14,44 @@
</el-input> </el-input>
</div> </div>
<ul class="tasklist"> <ul class="tasklist">
<li v-for="(item,index) in taskdata" :key="index" @click="selecttask(item,index)"> <li
<span :class="{'task-lsit':true,'runningtask':item.status == 'Running', 'stoptask':item.status != 'Running'}" > v-for="(item, index) in taskdata"
<i :class="{'el-icon-fanxin-yiyunhangrenwuliebiao':item.status == 'Running',' el-icon-fanxin-task-pause':item.status != 'Running', 'icon':true}"></i> :key="index"
<span class="task-title">{{item.task_name}}</span> @click="selecttask(item, index)"
>
<span
:class="{
'task-lsit': true,
runningtask: item.status == 'Running',
stoptask: item.status != 'Running'
}"
>
<i
:class="{
'el-icon-fanxin-yiyunhangrenwuliebiao':
item.status == 'Running',
' el-icon-fanxin-task-pause': item.status != 'Running',
icon: true
}"
></i>
<span class="task-title">{{ item.task_name }}</span>
</span> </span>
<ol v-if="index == subindex"> <ol v-if="index == subindex">
<li @click.stop='subTasksClick(subTask)' class="subtask" :title='subTask.subtask_name' v-for="subTask in subTasks" :key="subTask.subtask_id" :class="[{ subtaskActive: subTask.subtask_id == currentSubtaskId},{disabledColor:subTask.running_status!='Running'}]" :data-subtask='subTask.subtask_id' :id='subTask.vchan.vdev_unid+","+subTask.vchan.vchan_refid'> <li
<i class="el-icon-fanxin-yuandian icon"></i> {{subTask.subtask_name?subTask.subtask_name:subTask.name}} @click.stop="subTasksClick(subTask)"
class="subtask"
:title="subTask.subtask_name"
v-for="subTask in subTasks"
:key="subTask.subtask_id"
:class="[
{ subtaskActive: subTask.subtask_id == currentSubtaskId },
{ disabledColor: subTask.running_status != 'Running' }
]"
:data-subtask="subTask.subtask_id"
:id="subTask.vchan.vdev_unid + ',' + subTask.vchan.vchan_refid"
>
<i class="el-icon-fanxin-yuandian icon"></i>
{{ subTask.subtask_name ? subTask.subtask_name : subTask.name }}
</li> </li>
</ol> </ol>
</li> </li>
...@@ -33,7 +64,13 @@ ...@@ -33,7 +64,13 @@
<videoplay ref="videoplay" :playurl="playurl"></videoplay> <videoplay ref="videoplay" :playurl="playurl"></videoplay>
</div> </div>
<div class=""> <div class="">
<setting :taskid="taskID" ref="setting" :subtaskid="currentSubtaskId" :subtaskdata="subtaskdata" :playurl="playurl"></setting> <setting
:taskid="taskID"
ref="setting"
:subtaskid="currentSubtaskId"
:subtaskdata="subtaskdata"
:playurl="playurl"
></setting>
</div> </div>
</div> </div>
</el-col> </el-col>
...@@ -42,18 +79,18 @@ ...@@ -42,18 +79,18 @@
</div> </div>
<el-col :span="6" class="ht100"> <el-col :span="6" class="ht100">
<div class="show-box"> <div class="show-box">
<eventtab ref="event" ></eventtab> <eventtab ref="event"></eventtab>
</div> </div>
</el-col> </el-col>
</el-row> </el-row>
</template> </template>
<script> <script>
import videoplay from '../public/videoPlay' import videoplay from "../public/videoPlay";
import InfoDialog from '../public/infodialog' import InfoDialog from "../public/infodialog";
import setting from './setting' import setting from "./setting";
import eventtab from './eventTab' import eventtab from "./eventTab";
export default { export default {
components:{ components: {
videoplay, videoplay,
InfoDialog, InfoDialog,
setting, setting,
...@@ -61,112 +98,114 @@ export default { ...@@ -61,112 +98,114 @@ export default {
}, },
data() { data() {
return { return {
searchInfo:'', searchInfo: "",
taskdata: [], taskdata: [],
subtaskdata:[], subtaskdata: [],
subTasks:[], subTasks: [],
subindex:-1, subindex: -1,
playurl:'', playurl: "",
taskID:'', taskID: "",
currentSubtaskId:'', currentSubtaskId: "",
defaultProps: { defaultProps: {
children: 'children', children: "children",
label: 'label' label: "label"
}, },
timer:null, timer: null,
searchstate:null searchstate: null
}; };
}, },
methods: { methods: {
selecttask(data,index){ selecttask(data, index) {
this.subTasks = [] this.subTasks = [];
this.subindex = index; this.subindex = index;
this.$api.task.getSubTask(data.task_id).then(res => { this.$api.task.getSubTask(data.task_id).then(res => {
this.subTasks = res.list_data this.subTasks = res.list_data;
this.taskID = data.task_id this.taskID = data.task_id;
}) });
}, },
subTasksClick(vdata){ subTasksClick(vdata) {
this.$store.commit('setocxstate',1) this.$store.commit("setocxstate", 1);
this.currentSubtaskId = vdata.subtask_id; this.currentSubtaskId = vdata.subtask_id;
this.subtaskdata = vdata this.subtaskdata = vdata;
this.$refs.setting.getTaskParams() this.$refs.setting.getTaskParams();
if(vdata.running_status!='Running') { if (vdata.running_status != "Running") {
this.$refs.displayInfo.showInfo('该任务没有运行,无法获取分析视频和抓拍信息') this.$refs.displayInfo.showInfo(
return "该任务没有运行,无法获取分析视频和抓拍信息"
);
return;
} }
this.pushSteam(vdata); this.pushSteam(vdata);
this.$refs.event.dataInit(this.currentSubtaskId,vdata.task_type); this.$refs.event.dataInit(this.currentSubtaskId, vdata.task_type);
}, },
getTask(data){ getTask(data) {
let that = this; let that = this;
this.$api.task.getTask({ this.$api.task
task_name: this.searchInfo, .getTask({
}).then(res => { task_name: this.searchInfo
that.taskdata = res.list_data
console.log(res)
}) })
.then(res => {
that.taskdata = res.list_data;
console.log(res);
});
}, },
//发送推流请求 //发送推流请求
pushSteam(vdata){ pushSteam(vdata) {
this.$api.task.getStream(this.dev_unid,vdata.vchan.vchan_id).then(m => { this.$api.task.getStream(this.dev_unid, vdata.vchan.vchan_id).then(m => {
console.log(m) console.log(m);
if (m.ecode) { if (m.ecode) {
this.$message({ this.$message({
message: '发送推流请求失败:' + m.enote, message: "发送推流请求失败:" + m.enote,
type: 'error' type: "error"
}); });
} else { } else {
console.log('请求推送分析流成功', JSON.stringify(m)); console.log("请求推送分析流成功", JSON.stringify(m));
setTimeout(() => { setTimeout(() => {
this.getPlayUrl(); this.getPlayUrl();
}, 500); }, 500);
} }
}) });
}, },
getPlayUrl: function() { getPlayUrl: function() {
this.$api.task.getPlayUrl(this.currentSubtaskId).then(res => { this.$api.task.getPlayUrl(this.currentSubtaskId).then(res => {
this.playurl = res this.playurl = res;
if(this.playurl.rtsp_url) { if (this.playurl.rtsp_url) {
this.$message({ this.$message({
message: '获取播放地址成功,请耐心等待视频加载', message: "获取播放地址成功,请耐心等待视频加载",
type: 'success' type: "success"
}); });
setTimeout(()=> { setTimeout(() => {
this.$refs.videoplay.videoPlay() this.$refs.videoplay.videoPlay();
}, 2000) }, 2000);
} else { } else {
this.$message({ this.$message({
message: '获取rtsp播放地址失败!请重试!', message: "获取rtsp播放地址失败!请重试!",
type: 'error' type: "error"
}); });
setTimeout(() => { setTimeout(() => {
alert('获取rtsp播放地址失败!请重试!'); alert("获取rtsp播放地址失败!请重试!");
}, 0); }, 0);
} }
}); });
}, },
getVchansIsSending(){ getVchansIsSending() {
this.axios.get(this.API.task.getstream()).then(res => { this.axios.get(this.API.task.getstream()).then(res => {});
})
}, },
debounce(fn, wait) { debounce(fn, wait) {
clearTimeout(this.timer) clearTimeout(this.timer);
this.timer = setTimeout(() => { this.timer = setTimeout(() => {
fn fn;
}, wait); }, wait);
}, }
}, },
watch: { watch: {
searchInfo(val){ searchInfo(val) {
this.debounce(this.getTask(),800) this.debounce(this.getTask(), 800);
} }
}, },
created() { created() {
this.getTask() this.getTask();
}, }
}; };
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
.home-box{ .home-box{
......
...@@ -5,13 +5,12 @@ ...@@ -5,13 +5,12 @@
title="提示" title="提示"
:visible.sync="visible" :visible.sync="visible"
width="50%" width="50%"
:before-close="handleClose"> :before-close="handleClose"
>
<div> <div>
<div class="leftCon"> <div class="leftCon">
<div class="searchBox"> <div class="searchBox">
<el-input <el-input placeholder="输入关键字进行过滤" v-model="filterText">
placeholder="输入关键字进行过滤"
v-model="filterText">
</el-input> </el-input>
</div> </div>
<el-tree <el-tree
...@@ -19,34 +18,22 @@ ...@@ -19,34 +18,22 @@
:props="defaultProps" :props="defaultProps"
default-expand-all default-expand-all
:filter-node-method="filterNode" :filter-node-method="filterNode"
ref="tree"> ref="tree"
>
</el-tree> </el-tree>
</div> </div>
<div class="rightCon"> <div class="rightCon">
<el-table <el-table height="522" :data="tableData" stripe border>
height="522" <el-table-column align="center" prop="num" label="参数名">
:data="tableData"
stripe
border>
<el-table-column
align="center"
prop="num"
label="参数名">
</el-table-column> </el-table-column>
<el-table-column <el-table-column align="center" prop="set" label="预设位配置">
align="center"
prop="set"
label="预设位配置">
<template slot-scope="scope"> <template slot-scope="scope">
<span>{{scope.row.num}}</span> <span>{{ scope.row.num }}</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column <el-table-column align="center" prop="type" label="说明">
align="center"
prop="type"
label="说明">
<template slot-scope="scope"> <template slot-scope="scope">
<span>{{scope.row.num}}</span> <span>{{ scope.row.num }}</span>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
...@@ -62,117 +49,72 @@ ...@@ -62,117 +49,72 @@
</template> </template>
<script> <script>
export default{ export default {
data(){ data() {
return{ return {
tableData:[ tableData: [],
{
num:1
},
{
num:1
},{
num:1
}
],
filterText: '',
data: [{
id: 1,
label: '一级 1',
children: [{
id: 4,
label: '二级 1-1',
children: [{
id: 9,
label: '三级 1-1-1'
}, {
id: 10,
label: '三级 1-1-2'
}]
}]
}, {
id: 2,
label: '一级 2',
children: [{
id: 5,
label: '二级 2-1'
}, {
id: 6,
label: '二级 2-2'
}]
}, {
id: 3,
label: '一级 3',
children: [{
id: 7,
label: '二级 3-1'
}, {
id: 8,
label: '二级 3-2'
}]
}],
defaultProps: { defaultProps: {
children: 'children', children: "children",
label: 'label' label: "label"
}
} }
};
}, },
props:{ props: {
visible:{ visible: {
type:Boolean, type: Boolean,
default:false default: false
}, }
}, },
methods:{ methods: {
filterNode(value, data) { filterNode(value, data) {
if (!value) return true; if (!value) return true;
return data.label.indexOf(value) !== -1; return data.label.indexOf(value) !== -1;
}, },
handleClose(done){ handleClose(done) {
this.$emit('update:visible',false); this.$emit("update:visible", false);
}, },
visiblehide(){ visiblehide() {
this.$emit('update:visible',false) this.$emit("update:visible", false);
}, },
getTypes(){ getTypes() {
let params = { let params = {
offset: 0, offset: 0,
limit: '' limit: ""
} };
this.$api.task.getConftypes(params).then(res => { this.$api.task.getConftypes(params).then(res => {
this.types = res.list_data this.types = res.list_data;
}) });
} }
}, },
created(){ created() {
this.getTypes() this.getTypes();
}
} }
};
</script> </script>
<style scoped="scoped" lang="scss"> <style scoped="scoped" lang="scss">
.rightCon{ .rightCon {
width: 608px; width: 608px;
margin-left: 12px; margin-left: 12px;
float: left; float: left;
} }
.leftCon{ .leftCon {
float: left; float: left;
width: 250px; width: 250px;
border: 1px solid #CCCCCC; border: 1px solid #cccccc;
border-radius: 4px; border-radius: 4px;
padding: 10px; padding: 10px;
min-height: 500px; min-height: 500px;
} }
.titles{ .titles {
height:30px; height: 30px;
background:rgba(59,183,255,1); background: rgba(59, 183, 255, 1);
color: $white-font-color; color: $white-font-color;
font-size:14px; font-size: 14px;
padding-left: 13px; padding-left: 13px;
line-height: 30px; line-height: 30px;
} }
.searchBox{ .searchBox {
padding: 10px; padding: 10px;
} }
</style> </style>
...@@ -3,25 +3,25 @@ ...@@ -3,25 +3,25 @@
<div class="control-let-box"> <div class="control-let-box">
<div> <div>
<span <span
@mousedown="Ytontroller('36')" @mousedown="Ytontroller('SIP_CTRL_PTZ_UPLEFT')"
@mouseup="stopYtontroller('36')" @mouseup="stopYtontroller('SIP_CTRL_PTZ_UPLEFT')"
class="control-btn el-icon-top-left" class="control-btn el-icon-top-left"
></span> ></span>
<span <span
@mousedown="Ytontroller('38')" @mousedown="Ytontroller('SIP_CTRL_PTZ_UP')"
@mouseup="stopYtontroller('38')" @mouseup="stopYtontroller('SIP_CTRL_PTZ_UP')"
class="control-btn el-icon-top" class="control-btn el-icon-top"
></span> ></span>
<span <span
@mousedown="Ytontroller('33')" @mousedown="Ytontroller('SIP_CTRL_PTZ_UPRIGHT')"
@mouseup="stopYtontroller('33')" @mouseup="stopYtontroller('SIP_CTRL_PTZ_UPRIGHT')"
class="control-btn el-icon-top-right" class="control-btn el-icon-top-right"
></span> ></span>
</div> </div>
<div> <div>
<span <span
@mousedown="Ytontroller('37')" @mousedown="Ytontroller('SIP_CTRL_PTZ_LEFT')"
@mouseup="stopYtontroller('37')" @mouseup="stopYtontroller('SIP_CTRL_PTZ_LEFT')"
class="control-btn el-icon-back" class="control-btn el-icon-back"
></span> ></span>
<span <span
...@@ -30,15 +30,27 @@ ...@@ -30,15 +30,27 @@
class="control-btn el-icon-refresh" class="control-btn el-icon-refresh"
></span> ></span>
<span <span
@mousedown="Ytontroller('39')" @mousedown="Ytontroller('SIP_CTRL_PTZ_RIGHT')"
@mouseup="stopYtontroller('39')" @mouseup="stopYtontroller('SIP_CTRL_PTZ_RIGHT')"
class="control-btn el-icon-right" class="control-btn el-icon-right"
></span> ></span>
</div> </div>
<div> <div>
<span class="control-btn el-icon-bottom-left"></span> <span
<span class="control-btn el-icon-bottom"></span> @mousedown="Ytontroller('SIP_CTRL_PTZ_DOWNLEFT')"
<span class="control-btn el-icon-bottom-right"></span> @mouseup="stopYtontroller('SIP_CTRL_PTZ_DOWNLEFT')"
class="control-btn el-icon-bottom-left"
></span>
<span
@mousedown="Ytontroller('SIP_CTRL_PTZ_DOWN')"
@mouseup="stopYtontroller('SIP_CTRL_PTZ_DOWN')"
class="control-btn el-icon-bottom"
></span>
<span
@mousedown="Ytontroller('SIP_CTRL_PTZ_DOWNRIGHT')"
@mouseup="stopYtontroller('SIP_CTRL_PTZ_DOWNRIGHT')"
class="control-btn el-icon-bottom-right"
></span>
</div> </div>
</div> </div>
<div class="control-right-box"> <div class="control-right-box">
...@@ -101,18 +113,8 @@ export default { ...@@ -101,18 +113,8 @@ export default {
* 控制云台 * 控制云台
* @param {code} * @param {code}
*/ */
Ytontroller(code) { Ytontroller(nType, nParam = null) {
var param = getControlParam(code); VionVideo.VionPTZonrol(null, nType, nParam);
setCameraSpeed(this.ballspeed);
// VionVideo.PtzSendCmd(param, pvalue, "");
controlDevice(param);
},
/**
* 停止云台控制
* @param {code}
*/
stopYtontroller(code) {
StopControlCamera();
}, },
subset() { subset() {
let mtasks = this.allMask.mtasks; let mtasks = this.allMask.mtasks;
......
...@@ -43,19 +43,48 @@ ...@@ -43,19 +43,48 @@
<videoplay ref="video" :playurl="play_url"></videoplay> <videoplay ref="video" :playurl="play_url"></videoplay>
</div> </div>
<div class="tableBox"> <div class="tableBox">
<el-table height="286" :data="tableData" stripe border style="width: 100%"> <el-table
<el-table-column align="center" prop="name" label="视频源名称"></el-table-column> height="286"
<el-table-column align="center" prop="status" label="视频状态"></el-table-column> :data="tableData"
<el-table-column align="center" width="136" prop="operation" label="视频操作"> stripe
border
style="width: 100%"
>
<el-table-column
align="center"
prop="name"
label="视频源名称"
></el-table-column>
<el-table-column
align="center"
prop="status"
label="视频状态"
></el-table-column>
<el-table-column
align="center"
width="136"
prop="operation"
label="视频操作"
>
<template slot-scope="scope"> <template slot-scope="scope">
<el-tooltip content="迁移" placement="bottom" effect="light" :visible-arrow="false"> <el-tooltip
content="迁移"
placement="bottom"
effect="light"
:visible-arrow="false"
>
<span <span
class="iconfont icon-Migration moveIcon" class="iconfont icon-Migration moveIcon"
@click="moveFun(scope.$index, scope.row)" @click="moveFun(scope.$index, scope.row)"
></span> ></span>
</el-tooltip> </el-tooltip>
<span class="tableSpanBorder"></span> <span class="tableSpanBorder"></span>
<el-tooltip content="删除" placement="bottom" effect="light" :visible-arrow="false"> <el-tooltip
content="删除"
placement="bottom"
effect="light"
:visible-arrow="false"
>
<span <span
class="iconfont icon-detail delIcon" class="iconfont icon-detail delIcon"
@click="delFun(scope.$index, scope.row)" @click="delFun(scope.$index, scope.row)"
...@@ -76,17 +105,17 @@ ...@@ -76,17 +105,17 @@
</div> </div>
</template> </template>
<script> <script>
import videoplay from '../public/videoPlay' import videoplay from "../public/videoPlay";
export default { export default {
data() { data() {
return { return {
innerVisible: false, innerVisible: false,
tableData: [], tableData: [],
play_url:'', play_url: "",
user_unid:'', user_unid: "",
formData: {}, formData: {},
editData: {}, editData: {},
setvisible:false, setvisible: false,
props: { props: {
id: "vchan_refid", id: "vchan_refid",
label: "name", label: "name",
...@@ -99,16 +128,15 @@ export default { ...@@ -99,16 +128,15 @@ export default {
defaultProps: { defaultProps: {
children: "children", children: "children",
label: "label", label: "label",
id:"vchan_refid" id: "vchan_refid"
} }
}; };
}, },
props: { props: {
pedittype:{ pedittype: {
type:String, type: String,
default:'add' default: "add"
}, }
}, },
watch: { watch: {
parentData(val) { parentData(val) {
...@@ -116,63 +144,58 @@ export default { ...@@ -116,63 +144,58 @@ export default {
// this.editData = val; // this.editData = val;
} }
}, },
components:{ components: {
videoplay videoplay
}, },
mounted() { mounted() {
console.log(this.setvisible); console.log(this.setvisible);
}, },
methods: { methods: {
showModal(val){ showModal(val) {
this.tableData = [] this.tableData = [];
this.setvisible = true this.setvisible = true;
this.$store.commit("setocxstate", 1); this.$store.commit("setocxstate", 1);
this.editData = val; this.editData = val;
this.$api.task.getSubTask(val.task_id).then(res => { this.$api.task.getSubTask(val.task_id).then(res => {
let ary = [] let ary = [];
let data = res.list_data let data = res.list_data;
for(let i in data) { for (let i in data) {
if (data[i].vchan) { if (data[i].vchan) {
data[i].vchan.subtask_id = data[i].subtask_id data[i].vchan.subtask_id = data[i].subtask_id;
data[i].vchan.refid = data[i].vchan.vchan_refid data[i].vchan.refid = data[i].vchan.vchan_refid;
data[i].vchan.name = data[i].vchan.vchan_name data[i].vchan.name = data[i].vchan.vchan_name;
}else { } else {
data.vchan = { data.vchan = {
subtask_id: data[i].subtask_id, subtask_id: data[i].subtask_id,
refid:'', refid: "",
vchan_name:data[i].subtask_name, vchan_name: data[i].subtask_name,
name:data[i].subtask_name, name: data[i].subtask_name
} };
} }
ary.push(data[i].vchan) ary.push(data[i].vchan);
} }
this.tableData = ary; this.tableData = ary;
this.checkvckan() this.checkvckan();
}) });
}, },
handleCheckChange(data,node) { handleCheckChange(data, node) {
debugger console.log(node);
console.log(node) let staus = false;
let staus = false if (this.tableData.length > 0) {
if(this.tableData.length > 0) { for (let i = 0; i < this.tableData.length; i++) {
for(let i = 0; i < this.tableData.length; i++){ if (this.tableData[i].vchan_id == data.vchan_id) {
if(this.tableData[i].vchan_id == data.vchan_id) { this.tableData.splice(i, 1);
this.tableData.splice(i,1) staus = true;
staus = true break;
break
} else {
} }
} }
} }
if(data.leaf && !staus){ if (data.leaf && !staus) {
this.editsubTask(data) this.editsubTask(data);
staus = false staus = false;
} }
}, },
editsubTask(vchan){ editsubTask(vchan) {
let data = { let data = {
is_dome: false, is_dome: false,
subtask_name: vchan.name, subtask_name: vchan.name,
...@@ -182,20 +205,22 @@ export default { ...@@ -182,20 +205,22 @@ export default {
vdev_unid: this.dev_unid, vdev_unid: this.dev_unid,
vchan_name: vchan.name vchan_name: vchan.name
} }
} };
this.$api.task.editSubTask(this.editData.task_id,data).then(res => { this.$api.task.editSubTask(this.editData.task_id, data).then(res => {
this.tableData.push(vchan) this.tableData.push(vchan);
}) });
}, },
playVideo(data) { playVideo(data) {
console.log("b", data); console.log("b", data);
}, },
delFun(index, data) { delFun(index, data) {
debugger debugger;
this.$api.task.deleteSubTask(this.editData.task_id,data.subtask_id).then(res => { this.$api.task
this.tableData.splice(index,1) .deleteSubTask(this.editData.task_id, data.subtask_id)
}) .then(res => {
this.checkvckan() this.tableData.splice(index, 1);
});
this.checkvckan();
}, },
append(data) { append(data) {
const newChild = { id: id++, label: "testtest", children: [] }; const newChild = { id: id++, label: "testtest", children: [] };
...@@ -205,13 +230,13 @@ export default { ...@@ -205,13 +230,13 @@ export default {
data.children.push(newChild); data.children.push(newChild);
}, },
checkvckan(){ checkvckan() {
this.$refs.tree.setCheckedKeys([]) this.$refs.tree.setCheckedKeys([]);
let arr = [] let arr = [];
this.tableData.forEach(ele => { this.tableData.forEach(ele => {
arr.push(ele.vchan_refid) arr.push(ele.vchan_refid);
}) });
this.$refs.tree.setCheckedKeys(arr) this.$refs.tree.setCheckedKeys(arr);
}, },
loadNode(node, resolve) { loadNode(node, resolve) {
if (node.level === 0) { if (node.level === 0) {
...@@ -244,9 +269,11 @@ export default { ...@@ -244,9 +269,11 @@ export default {
let params = { let params = {
offset: 0, offset: 0,
limit: "" limit: ""
} };
this.$api.device.getDevtree(this.dev_unid,node.data.name,params).then(data => { this.$api.device
debugger .getDevtree(this.dev_unid, node.data.name, params)
.then(data => {
debugger;
let vchans = data.vchan_struct || data.list_data; let vchans = data.vchan_struct || data.list_data;
for (let i in vchans) { for (let i in vchans) {
const vchan = vchans[i]; const vchan = vchans[i];
...@@ -267,9 +294,9 @@ export default { ...@@ -267,9 +294,9 @@ export default {
} }
} }
resolve(vchans); resolve(vchans);
setTimeout(()=>{ setTimeout(() => {
this.checkvckan() this.checkvckan();
},0) }, 0);
}); });
return; return;
} }
...@@ -301,7 +328,7 @@ export default { ...@@ -301,7 +328,7 @@ export default {
try { try {
window.clearTimeout(this.timeout1); window.clearTimeout(this.timeout1);
window.clearTimeout(this.timeout2); window.clearTimeout(this.timeout2);
} catch (err) { } } catch (err) {}
// var e = e || window.event; // var e = e || window.event;
this.play_url = ""; this.play_url = "";
// if (this.testIe.isIe) { // if (this.testIe.isIe) {
...@@ -318,7 +345,7 @@ export default { ...@@ -318,7 +345,7 @@ export default {
if (node.leafNode === "camera" || node.leafNode === "vfile") { if (node.leafNode === "camera" || node.leafNode === "vfile") {
if (node.video_url) { if (node.video_url) {
if (node.leafNode === "vfile") { if (node.leafNode === "vfile") {
debugger debugger;
this.play_url = { this.play_url = {
rtsp_url: node.video_url rtsp_url: node.video_url
}; };
...@@ -347,9 +374,9 @@ export default { ...@@ -347,9 +374,9 @@ export default {
}, },
getSipSetting: function(refid) { getSipSetting: function(refid) {
if (this.dev_unid) { if (this.dev_unid) {
this.$api.device.setsip(this.dev_unid,this.user_unid).then(res => { this.$api.device.setsip(this.dev_unid, this.user_unid).then(res => {
if (!res.ecode) { if (!res.ecode) {
console.log('获取sip配置返回:', JSON.stringify(res.data)); console.log("获取sip配置返回:", JSON.stringify(res.data));
this.playUrl = res.res; this.playUrl = res.res;
this.playUrl.devId = refid; this.playUrl.devId = refid;
console.log("playUrl", JSON.stringify(res)); console.log("playUrl", JSON.stringify(res));
...@@ -357,8 +384,8 @@ export default { ...@@ -357,8 +384,8 @@ export default {
if (this.playUrl[attr] === "") { if (this.playUrl[attr] === "") {
setTimeout(() => { setTimeout(() => {
this.$message({ this.$message({
message: '获取播放地址失败,请前往配置sip服务!!请重试!', message: "获取播放地址失败,请前往配置sip服务!!请重试!",
type: 'error' type: "error"
}); });
}, 0); }, 0);
return; return;
...@@ -369,11 +396,11 @@ export default { ...@@ -369,11 +396,11 @@ export default {
}, 0); }, 0);
} else { } else {
this.$message({ this.$message({
message: '获取播放地址失败,请前往配置sip服务!!请重试!', message: "获取播放地址失败,请前往配置sip服务!!请重试!",
type: 'error' type: "error"
}); });
} }
}) });
} else { } else {
console.log("运维ID获取失败"); console.log("运维ID获取失败");
this.$message({ this.$message({
...@@ -396,15 +423,13 @@ export default { ...@@ -396,15 +423,13 @@ export default {
this.$store.commit("setocxstate", 0); this.$store.commit("setocxstate", 0);
this.$refs.tree.setCheckedKeys([]); this.$refs.tree.setCheckedKeys([]);
}, },
save() { save() {},
},
moveFun(index, row) { moveFun(index, row) {
this.innerVisible = true; this.innerVisible = true;
} }
}, },
created(){ created() {
this.user_unid = window.localStorage.getItem('user_unid'); this.user_unid = window.localStorage.getItem("user_unid");
} }
}; };
</script> </script>
...@@ -431,7 +456,7 @@ export default { ...@@ -431,7 +456,7 @@ export default {
height: 630px; height: 630px;
border: 1px solid rgba(229, 229, 229, 1); border: 1px solid rgba(229, 229, 229, 1);
float: left; float: left;
overflow:hidden; overflow: hidden;
overflow-y: auto; overflow-y: auto;
} }
.titles { .titles {
...@@ -444,7 +469,7 @@ export default { ...@@ -444,7 +469,7 @@ export default {
} }
.treeBox { .treeBox {
padding: 6px; padding: 6px;
overflow: auto overflow: auto;
} }
.rightBox { .rightBox {
float: left; float: left;
......
...@@ -71,8 +71,36 @@ ...@@ -71,8 +71,36 @@
:data="tableData" :data="tableData"
stripe stripe
border border
ref="table"
style="width: 100%" style="width: 100%"
@expand-change="expandchange"
:expand-row-keys="rowkey"
> >
<el-table-column type="expand">
<template slot-scope="props">
<div
v-for="(item, index) in props.row.subTaskData"
:key="index"
class="expande-table-row"
>
<span class="label">视频源文件</span>
<span class="subtask-info">{{item.vchan_name}}</span>
<span class="label">设备地址</span>
<span class="subtask-info">192.178.99.99</span>
<span class="label">已用资源</span>
<span class="subtask-info">22</span>
<span class="label">设备容量</span>
<span class="subtask-info">33</span>
<span class="label">指定设备下发</span>
<span class="subtask-info">
<el-select>
<el-option>sss</el-option>
</el-select>
</span>
<span class="label">确定</span>
</div>
</template>
</el-table-column>
<el-table-column <el-table-column
align="center" align="center"
prop="num" prop="num"
...@@ -237,7 +265,10 @@ export default { ...@@ -237,7 +265,10 @@ export default {
videoShow: false, videoShow: false,
editForm: {}, editForm: {},
tableData: [], tableData: [],
pedittype: "add" subTaskData: [],
pedittype: "add",
currentRow:{},
rowkey:["1"]
}; };
}, },
components: { components: {
...@@ -248,6 +279,35 @@ export default { ...@@ -248,6 +279,35 @@ export default {
this.getTaskList(); this.getTaskList();
}, },
methods: { methods: {
expandchange(row, prow) {
if (!row.isexpand) {
//打开获取子任务
row.isexpand = true;
this.$api.task.getSubTask(row.task_id).then(res => {
let ary = [];
let data = res.list_data;
for (let i in data) {
if (data[i].vchan) {
data[i].vchan.subtask_id = data[i].subtask_id;
data[i].vchan.refid = data[i].vchan.vchan_refid;
data[i].vchan.name = data[i].vchan.vchan_name;
} else {
data.vchan = {
subtask_id: data[i].subtask_id,
refid: "",
vchan_name: data[i].subtask_name,
name: data[i].subtask_name
};
}
ary.push(data[i].vchan);
}
row.subTaskData = ary;
});
} else {
//关闭主任务
row.isexpand = false;
}
},
statusFormatter(row, column, cellValue, index) { statusFormatter(row, column, cellValue, index) {
if (cellValue == "Running") { if (cellValue == "Running") {
return "工作中"; return "工作中";
...@@ -329,6 +389,7 @@ export default { ...@@ -329,6 +389,7 @@ export default {
this.tableData = []; this.tableData = [];
} else { } else {
res.list_data.forEach(item => { res.list_data.forEach(item => {
item.subTaskData = []
if (item.start_dt) { if (item.start_dt) {
//先转utc格式 //先转utc格式
let date = this.$moment.utc(item.start_dt).format(); let date = this.$moment.utc(item.start_dt).format();
...@@ -522,4 +583,35 @@ export default { ...@@ -522,4 +583,35 @@ export default {
color: #f2365a; color: #f2365a;
font-size: 16px; font-size: 16px;
} }
.expande-table-row {
span {
display: inline-block;
}
.label {
width: 7vw;
text-align: center;
border-left: 1px solid $border-color;
background: #f0f0f0;
}
.subtask-info {
border-left: 1px solid #f0f0f0;
text-align: center;
}
.subtask-info:nth-child(2) {
width: 8vw;
}
.subtask-info:nth-child(4) {
width: 6vw;
}
.subtask-info:nth-child(6) {
width: 4.5vw;
}
.subtask-info:nth-child(8) {
width: 4.5vw;
}
line-height: 40px;
border-bottom: 1px solid #f0f0f0;
}
</style> </style>
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!