Skip to content

platform / fanxing_new

Go to a project
Commit 94965512 by 潘建波
Options

提交codeAPI

1 parent ad552bac
Inline Side-by-side
Showing 18 changed files with 2127 additions and 610 deletions
src/api/apiList.js
......@@ -3,8 +3,9 @@ import login from "./login";
import task from "./task";
import show from "./show";
import search from "./search";
import device from "./device"
import resource from "./resource"
import device from "./device";
import resource from "./resource";
import codes from "./codes";
import ops from "./ops"
let wsIP = "vion-panda.51vip.biz:52510";
switch (process.env.NODE_ENV) {
......@@ -27,6 +28,7 @@ export default {
search,
device,
resource,
codes,
ops,
wsIP
};
src/api/codes/index.js 0 → 100644
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);
}
};
src/api/codes/urls.js 0 → 100644
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}`;
}
};
src/api/device/index.js
......@@ -4,6 +4,9 @@ export default {
getDev(params) {
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) {
return api.get(`${baseUrl}/api/v1/devconf_fx/ws_url?src_type=user&user_unid=${uid}&client_unid=${clientid}`);
},
......
src/api/login/index.js
import api from '../index'
import urls from './urls'
import api from "../index";
import urls from "./urls";
export default {
//登陆
login(params,id) {
return api.post(urls.login,params)
//登陆
login(params, id) {
return api.post(urls.login, params);
},
getMenus(params,id){
return api.get(urls.menus,params)
getMenus(params, id) {
return api.get(urls.menus, params);
},
algocombs(params,id){
return api.get(urls.algocombs,params)
algocombs(params, id) {
return api.get(urls.algocombs, params);
},
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)
},
}
storeconfs(params, id) {
return api.get(urls.storeconfs, params);
}
};
src/assets/css/public.css
......@@ -197,4 +197,16 @@ html,body{
.ol-popup img{
height :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
src/router/index.js
......@@ -169,7 +169,14 @@ export const asyncRouterMap = [
},
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",
......
src/views/Login.vue
......@@ -106,9 +106,9 @@ import types from '../store/types.js'
})
},
getCodeList(){
this.$api.login.cates().then(res => {
this.$api.codes.cates().then(res => {
res.list_data.forEach(item=>{
this.$api.login.codes({
this.$api.codes.codes({
},item.cate_unid).then(res => {
// 存储code列表
window.localStorage.setItem(item.name,JSON.stringify(res.list_data))
......@@ -123,7 +123,7 @@ import types from '../store/types.js'
})
},
getCustomCode(){
this.$api.login.customCode().then(res => {
this.$api.codes.customCode().then(res => {
if(res.list_data.length > 0) {
res.list_data.forEach((item) => {
window.localStorage.setItem(item.name + '-' + item.cate, item.unid);
......
src/views/ops/back.vue 0 → 100644
<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>
src/views/ops/equipment_manage.vue
<template>
<div>
<!-- 外层内容 -->
<div class="leftBox">
<div class="titles">分析设备列表</div>
<div class="treeBox">
<el-tree
:data="treeData"
:props="defaultProps"
accordion
highlight-current
:expand-on-click-node=false
@node-click="handleNodeClick">
</el-tree>
</div>
</div>
<div class="rightBox">
</div>
<div style="clear: both;"></div>
</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="content-box" id="eqcontentbox">
<div class="left-box">
<div class="master-box" v-if="devData.length > 0" @click="getSubDev(devData[0])">
<div>{{devData[0].device_name}}</div>
<div>{{devData[0].out_ip}}</div>
</div>
<div class="submast-box">
<div
:class="{ 'submast-item': true, 'top-line': true }"
v-for="(subitem, index) in subDevData"
: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 style="clear: both;"></div>
</div>
</template>
<script>
export default{
data(){
return{
treeData: [],
defaultProps: {
children: 'childs',
label: 'device_name'
},
dev_unid:sessionStorage.getItem('dev_unid')
}
},
mounted(){
console.log(this.setvisible)
},
methods:{
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);
},
}
}
export default {
data() {
return {
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: {
children: "childs",
label: "device_name"
},
bottomHeight: 0,
stylebottom: {},
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;
});
},
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;
},
dataInit: function() {
this.$api.device.getDev().then(res => {
this.parentData = res[0].dev_unid;
this.getDev();
});
},
getDev() {
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,
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">
.bofangIcon{
cursor: pointer;
color:#cccccc;
font-size:16px;
margin-left: 26px;
}
.moveIcon{
cursor: pointer;
color:#34b3a2;
font-size:16px;
}
.delIcon{
cursor: pointer;
color:#f2365a;
font-size:16px;
}
.leftBox{
width: 233px;
height: 630px;
border:1px solid rgba(229,229,229,1);
float: left;
}
.titles{
height: 30px;
line-height: 30px;
padding-left: 13px;
background: $title-backgroud;
font-size: 14px;
color: $title-color;
}
.treeBox{
padding: 6px;
}
.rightBox{
float: left;
margin-left: 14px;
}
.imgBox{
width: 587px;
height: 330px;
border:1px solid #444444;
margin-bottom: 14px;
}
.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: 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;
}
.submast-box {
position: absolute;
left: 12vw;
top: 70px;
padding: 0 0 10vh 0;
}
.submast-item,
.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;
width: 30px;
border-radius: 30px;
background: rgba(59, 183, 255, 1);
text-align: center;
line-height: 30px;
font-size: 20px;
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;
color: #000;
}
</style>
src/views/resource/Codes/codes.vue 0 → 100644
<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>
src/views/resource/Codes/eventcodes.vue 0 → 100644
<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>
src/views/resource/Codes/trfficcodes.vue 0 → 100644
<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>
src/views/sceneManage/index.vue
<template>
<el-row class="home-box" :gutter="10">
<el-col :span="3" class="ht100 tree-left">
<div class="tree-box">
<div class="tree-title">视频设备</div>
<div class=""></div>
<div class="tree-box">
<div class="tree-title">视频设备</div>
<div class=""></div>
<div class="">
<el-input class="search-input"
prefix-icon="el-icon-search"
placeholder="请输入内容"
v-model="searchInfo"
>
</el-input>
<el-input
class="search-input"
prefix-icon="el-icon-search"
placeholder="请输入内容"
v-model="searchInfo"
>
</el-input>
</div>
<ul class="tasklist">
<li v-for="(item,index) in taskdata" :key="index" @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>
<li
v-for="(item, index) in taskdata"
:key="index"
@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>
<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'>
<i class="el-icon-fanxin-yuandian icon"></i> {{subTask.subtask_name?subTask.subtask_name:subTask.name}}
</li>
</ol>
<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"
>
<i class="el-icon-fanxin-yuandian icon"></i>
{{ subTask.subtask_name ? subTask.subtask_name : subTask.name }}
</li>
</ol>
</li>
</ul>
</div>
......@@ -33,140 +64,148 @@
<videoplay ref="videoplay" :playurl="playurl"></videoplay>
</div>
<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>
</el-col>
<div>
<InfoDialog ref="displayInfo"></InfoDialog>
<InfoDialog ref="displayInfo"></InfoDialog>
</div>
<el-col :span="6" class="ht100">
<div class="show-box">
<eventtab ref="event" ></eventtab>
<eventtab ref="event"></eventtab>
</div>
</el-col>
</el-row>
</template>
<script>
import videoplay from '../public/videoPlay'
import InfoDialog from '../public/infodialog'
import setting from './setting'
import eventtab from './eventTab'
import videoplay from "../public/videoPlay";
import InfoDialog from "../public/infodialog";
import setting from "./setting";
import eventtab from "./eventTab";
export default {
components:{
videoplay,
InfoDialog,
setting,
eventtab
components: {
videoplay,
InfoDialog,
setting,
eventtab
},
data() {
return {
searchInfo: "",
taskdata: [],
subtaskdata: [],
subTasks: [],
subindex: -1,
playurl: "",
taskID: "",
currentSubtaskId: "",
defaultProps: {
children: "children",
label: "label"
},
timer: null,
searchstate: null
};
},
methods: {
selecttask(data, index) {
this.subTasks = [];
this.subindex = index;
this.$api.task.getSubTask(data.task_id).then(res => {
this.subTasks = res.list_data;
this.taskID = data.task_id;
});
},
data() {
return {
searchInfo:'',
taskdata: [],
subtaskdata:[],
subTasks:[],
subindex:-1,
playurl:'',
taskID:'',
currentSubtaskId:'',
defaultProps: {
children: 'children',
label: 'label'
},
timer:null,
searchstate:null
};
subTasksClick(vdata) {
this.$store.commit("setocxstate", 1);
this.currentSubtaskId = vdata.subtask_id;
this.subtaskdata = vdata;
this.$refs.setting.getTaskParams();
if (vdata.running_status != "Running") {
this.$refs.displayInfo.showInfo(
"该任务没有运行，无法获取分析视频和抓拍信息"
);
return;
}
this.pushSteam(vdata);
this.$refs.event.dataInit(this.currentSubtaskId, vdata.task_type);
},
methods: {
selecttask(data,index){
this.subTasks = []
this.subindex = index;
this.$api.task.getSubTask(data.task_id).then(res => {
this.subTasks = res.list_data
this.taskID = data.task_id
})
},
subTasksClick(vdata){
this.$store.commit('setocxstate',1)
this.currentSubtaskId = vdata.subtask_id;
this.subtaskdata = vdata
this.$refs.setting.getTaskParams()
if(vdata.running_status!='Running') {
this.$refs.displayInfo.showInfo('该任务没有运行，无法获取分析视频和抓拍信息')
return
}
this.pushSteam(vdata);
this.$refs.event.dataInit(this.currentSubtaskId,vdata.task_type);
},
getTask(data){
let that = this;
this.$api.task.getTask({
task_name: this.searchInfo,
}).then(res => {
that.taskdata = res.list_data
console.log(res)
})
},
//发送推流请求
pushSteam(vdata){
this.$api.task.getStream(this.dev_unid,vdata.vchan.vchan_id).then(m => {
console.log(m)
if (m.ecode) {
this.$message({
message: '发送推流请求失败：' + m.enote,
type: 'error'
});
} else {
console.log('请求推送分析流成功', JSON.stringify(m));
setTimeout(() => {
this.getPlayUrl();
}, 500);
}
getTask(data) {
let that = this;
this.$api.task
.getTask({
task_name: this.searchInfo
})
},
getPlayUrl: function() {
this.$api.task.getPlayUrl(this.currentSubtaskId).then(res => {
this.playurl = res
if(this.playurl.rtsp_url) {
this.$message({
message: '获取播放地址成功，请耐心等待视频加载',
type: 'success'
});
setTimeout(()=> {
this.$refs.videoplay.videoPlay()
}, 2000)
} else {
this.$message({
message: '获取rtsp播放地址失败!请重试!',
type: 'error'
});
setTimeout(() => {
alert('获取rtsp播放地址失败!请重试!');
}, 0);
}
.then(res => {
that.taskdata = res.list_data;
console.log(res);
});
},
getVchansIsSending(){
this.axios.get(this.API.task.getstream()).then(res => {
})
},
debounce(fn, wait) {
clearTimeout(this.timer)
this.timer = setTimeout(() => {
fn
}, wait);
},
},
watch: {
searchInfo(val){
this.debounce(this.getTask(),800)
}
//发送推流请求
pushSteam(vdata) {
this.$api.task.getStream(this.dev_unid, vdata.vchan.vchan_id).then(m => {
console.log(m);
if (m.ecode) {
this.$message({
message: "发送推流请求失败：" + m.enote,
type: "error"
});
} else {
console.log("请求推送分析流成功", JSON.stringify(m));
setTimeout(() => {
this.getPlayUrl();
}, 500);
}
});
},
created() {
this.getTask()
getPlayUrl: function() {
this.$api.task.getPlayUrl(this.currentSubtaskId).then(res => {
this.playurl = res;
if (this.playurl.rtsp_url) {
this.$message({
message: "获取播放地址成功，请耐心等待视频加载",
type: "success"
});
setTimeout(() => {
this.$refs.videoplay.videoPlay();
}, 2000);
} else {
this.$message({
message: "获取rtsp播放地址失败!请重试!",
type: "error"
});
setTimeout(() => {
alert("获取rtsp播放地址失败!请重试!");
}, 0);
}
});
},
};
getVchansIsSending() {
this.axios.get(this.API.task.getstream()).then(res => {});
},
debounce(fn, wait) {
clearTimeout(this.timer);
this.timer = setTimeout(() => {
fn;
}, wait);
}
},
watch: {
searchInfo(val) {
this.debounce(this.getTask(), 800);
}
},
created() {
this.getTask();
}
};
</script>
<style lang="stylus" scoped>
.home-box{
......
src/views/sceneManage/paramSet.vue
<template>
<div>
<el-dialog
ref="dialog"
title="提示"
:visible.sync="visible"
width="50%"
:before-close="handleClose">
<div>
<div class="leftCon">
<div class="searchBox">
<el-input
placeholder="输入关键字进行过滤"
v-model="filterText">
</el-input>
</div>
<el-tree
:data="data"
:props="defaultProps"
default-expand-all
:filter-node-method="filterNode"
ref="tree">
</el-tree>
</div>
<div class="rightCon">
<el-table
height="522"
:data="tableData"
stripe
border>
<el-table-column
align="center"
prop="num"
label="参数名">
</el-table-column>
<el-table-column
align="center"
prop="set"
label="预设位配置">
<template slot-scope="scope">
<span>{{scope.row.num}}</span>
</template>
</el-table-column>
<el-table-column
align="center"
prop="type"
label="说明">
<template slot-scope="scope">
<span>{{scope.row.num}}</span>
</template>
</el-table-column>
</el-table>
</div>
<div style="clear: both;"></div>
</div>
<span slot="footer" class="dialog-footer">
<el-button @click="visiblehide">取 消</el-button>
<el-button type="primary" @click="visiblehide">确 定</el-button>
</span>
</el-dialog>
</div>
<div>
<el-dialog
ref="dialog"
title="提示"
:visible.sync="visible"
width="50%"
:before-close="handleClose"
>
<div>
<div class="leftCon">
<div class="searchBox">
<el-input placeholder="输入关键字进行过滤" v-model="filterText">
</el-input>
</div>
<el-tree
:data="data"
:props="defaultProps"
default-expand-all
:filter-node-method="filterNode"
ref="tree"
>
</el-tree>
</div>
<div class="rightCon">
<el-table height="522" :data="tableData" stripe border>
<el-table-column align="center" prop="num" label="参数名">
</el-table-column>
<el-table-column align="center" prop="set" label="预设位配置">
<template slot-scope="scope">
<span>{{ scope.row.num }}</span>
</template>
</el-table-column>
<el-table-column align="center" prop="type" label="说明">
<template slot-scope="scope">
<span>{{ scope.row.num }}</span>
</template>
</el-table-column>
</el-table>
</div>
<div style="clear: both;"></div>
</div>
<span slot="footer" class="dialog-footer">
<el-button @click="visiblehide">取 消</el-button>
<el-button type="primary" @click="visiblehide">确 定</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
export default{
data(){
return{
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: {
children: 'children',
label: 'label'
}
}
},
props:{
visible:{
type:Boolean,
default:false
},
},
methods:{
filterNode(value, data) {
if (!value) return true;
return data.label.indexOf(value) !== -1;
},
handleClose(done){
this.$emit('update:visible',false);
},
visiblehide(){
this.$emit('update:visible',false)
},
getTypes(){
let params = {
offset: 0,
limit: ''
}
this.$api.task.getConftypes(params).then(res => {
this.types = res.list_data
})
}
},
created(){
this.getTypes()
}
}
export default {
data() {
return {
tableData: [],
defaultProps: {
children: "children",
label: "label"
}
};
},
props: {
visible: {
type: Boolean,
default: false
}
},
methods: {
filterNode(value, data) {
if (!value) return true;
return data.label.indexOf(value) !== -1;
},
handleClose(done) {
this.$emit("update:visible", false);
},
visiblehide() {
this.$emit("update:visible", false);
},
getTypes() {
let params = {
offset: 0,
limit: ""
};
this.$api.task.getConftypes(params).then(res => {
this.types = res.list_data;
});
}
},
created() {
this.getTypes();
}
};
</script>
<style scoped="scoped" lang="scss">
.rightCon{
width: 608px;
margin-left: 12px;
float: left;
}
.leftCon{
float: left;
width: 250px;
border: 1px solid #CCCCCC;
border-radius: 4px;
padding: 10px;
min-height: 500px;
}
.titles{
height:30px;
background:rgba(59,183,255,1);
color: $white-font-color;
font-size:14px;
padding-left: 13px;
line-height: 30px;
}
.searchBox{
padding: 10px;
}
.rightCon {
width: 608px;
margin-left: 12px;
float: left;
}
.leftCon {
float: left;
width: 250px;
border: 1px solid #cccccc;
border-radius: 4px;
padding: 10px;
min-height: 500px;
}
.titles {
height: 30px;
background: rgba(59, 183, 255, 1);
color: $white-font-color;
font-size: 14px;
padding-left: 13px;
line-height: 30px;
}
.searchBox {
padding: 10px;
}
</style>
src/views/sceneManage/setting/ytconfig.vue
......@@ -3,25 +3,25 @@
<div class="control-let-box">
<div>
<span
@mousedown="Ytontroller('36')"
@mouseup="stopYtontroller('36')"
@mousedown="Ytontroller('SIP_CTRL_PTZ_UPLEFT')"
@mouseup="stopYtontroller('SIP_CTRL_PTZ_UPLEFT')"
class="control-btn el-icon-top-left"
></span>
<span
@mousedown="Ytontroller('38')"
@mouseup="stopYtontroller('38')"
@mousedown="Ytontroller('SIP_CTRL_PTZ_UP')"
@mouseup="stopYtontroller('SIP_CTRL_PTZ_UP')"
class="control-btn el-icon-top"
></span>
<span
@mousedown="Ytontroller('33')"
@mouseup="stopYtontroller('33')"
@mousedown="Ytontroller('SIP_CTRL_PTZ_UPRIGHT')"
@mouseup="stopYtontroller('SIP_CTRL_PTZ_UPRIGHT')"
class="control-btn el-icon-top-right"
></span>
</div>
<div>
<span
@mousedown="Ytontroller('37')"
@mouseup="stopYtontroller('37')"
@mousedown="Ytontroller('SIP_CTRL_PTZ_LEFT')"
@mouseup="stopYtontroller('SIP_CTRL_PTZ_LEFT')"
class="control-btn el-icon-back"
></span>
<span
......@@ -30,15 +30,27 @@
class="control-btn el-icon-refresh"
></span>
<span
@mousedown="Ytontroller('39')"
@mouseup="stopYtontroller('39')"
@mousedown="Ytontroller('SIP_CTRL_PTZ_RIGHT')"
@mouseup="stopYtontroller('SIP_CTRL_PTZ_RIGHT')"
class="control-btn el-icon-right"
></span>
</div>
<div>
<span class="control-btn el-icon-bottom-left"></span>
<span class="control-btn el-icon-bottom"></span>
<span class="control-btn el-icon-bottom-right"></span>
<span
@mousedown="Ytontroller('SIP_CTRL_PTZ_DOWNLEFT')"
@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 class="control-right-box">
......@@ -101,18 +113,8 @@ export default {
* 控制云台
* @param {code}
*/
Ytontroller(code) {
var param = getControlParam(code);
setCameraSpeed(this.ballspeed);
// VionVideo.PtzSendCmd(param, pvalue, "");
controlDevice(param);
},
/**
* 停止云台控制
* @param {code}
*/
stopYtontroller(code) {
StopControlCamera();
Ytontroller(nType, nParam = null) {
VionVideo.VionPTZonrol(null, nType, nParam);
},
subset() {
let mtasks = this.allMask.mtasks;
......@@ -205,4 +207,4 @@ export default {
.subbtn {
margin: 1vh 0.3vw 0 2vw;
}
</style>
\ No newline at end of file
</style>
src/views/taskManage/editVideo.vue
......@@ -43,19 +43,48 @@
<videoplay ref="video" :playurl="play_url"></videoplay>
</div>
<div class="tableBox">
<el-table height="286" :data="tableData" 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="视频操作">
<el-table
height="286"
:data="tableData"
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">
<el-tooltip content="迁移" placement="bottom" effect="light" :visible-arrow="false">
<el-tooltip
content="迁移"
placement="bottom"
effect="light"
:visible-arrow="false"
>
<span
class="iconfont icon-Migration moveIcon"
@click="moveFun(scope.$index, scope.row)"
></span>
</el-tooltip>
<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
class="iconfont icon-detail delIcon"
@click="delFun(scope.$index, scope.row)"
......@@ -76,18 +105,18 @@
</div>
</template>
<script>
import videoplay from '../public/videoPlay'
import videoplay from "../public/videoPlay";
export default {
data() {
return {
innerVisible: false,
tableData: [],
play_url:'',
user_unid:'',
play_url: "",
user_unid: "",
formData: {},
editData: {},
setvisible:false,
props: {
setvisible: false,
props: {
id: "vchan_refid",
label: "name",
children: "zones",
......@@ -99,16 +128,15 @@ export default {
defaultProps: {
children: "children",
label: "label",
id:"vchan_refid"
id: "vchan_refid"
}
};
},
props: {
pedittype:{
type:String,
default:'add'
},
pedittype: {
type: String,
default: "add"
}
},
watch: {
parentData(val) {
......@@ -116,86 +144,83 @@ export default {
// this.editData = val;
}
},
components:{
components: {
videoplay
},
mounted() {
console.log(this.setvisible);
},
methods: {
showModal(val){
this.tableData = []
this.setvisible = true
showModal(val) {
this.tableData = [];
this.setvisible = true;
this.$store.commit("setocxstate", 1);
this.editData = val;
this.$api.task.getSubTask(val.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)
}
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);
}
this.tableData = ary;
this.checkvckan()
})
this.checkvckan();
});
},
handleCheckChange(data,node) {
debugger
console.log(node)
let staus = false
if(this.tableData.length > 0) {
for(let i = 0; i < this.tableData.length; i++){
if(this.tableData[i].vchan_id == data.vchan_id) {
this.tableData.splice(i,1)
staus = true
break
} else {
handleCheckChange(data, node) {
console.log(node);
let staus = false;
if (this.tableData.length > 0) {
for (let i = 0; i < this.tableData.length; i++) {
if (this.tableData[i].vchan_id == data.vchan_id) {
this.tableData.splice(i, 1);
staus = true;
break;
}
}
}
if(data.leaf && !staus){
this.editsubTask(data)
staus = false
}
if (data.leaf && !staus) {
this.editsubTask(data);
staus = false;
}
},
editsubTask(vchan){
let data = {
is_dome: false,
subtask_name: vchan.name,
vchan: {
vchan_refid: vchan.refid || vchan.vchan_refid,
vchan_duid: vchan.duid || vchan.vchan_duid,
vdev_unid: this.dev_unid,
vchan_name: vchan.name
}
}
this.$api.task.editSubTask(this.editData.task_id,data).then(res => {
this.tableData.push(vchan)
})
editsubTask(vchan) {
let data = {
is_dome: false,
subtask_name: vchan.name,
vchan: {
vchan_refid: vchan.refid || vchan.vchan_refid,
vchan_duid: vchan.duid || vchan.vchan_duid,
vdev_unid: this.dev_unid,
vchan_name: vchan.name
}
};
this.$api.task.editSubTask(this.editData.task_id, data).then(res => {
this.tableData.push(vchan);
});
},
playVideo(data) {
console.log("b", data);
},
delFun(index, data) {
debugger
this.$api.task.deleteSubTask(this.editData.task_id,data.subtask_id).then(res => {
this.tableData.splice(index,1)
})
this.checkvckan()
debugger;
this.$api.task
.deleteSubTask(this.editData.task_id, data.subtask_id)
.then(res => {
this.tableData.splice(index, 1);
});
this.checkvckan();
},
append(data) {
const newChild = { id: id++, label: "testtest", children: [] };
......@@ -204,16 +229,16 @@ export default {
}
data.children.push(newChild);
},
checkvckan(){
this.$refs.tree.setCheckedKeys([])
let arr = []
checkvckan() {
this.$refs.tree.setCheckedKeys([]);
let arr = [];
this.tableData.forEach(ele => {
arr.push(ele.vchan_refid)
})
this.$refs.tree.setCheckedKeys(arr)
arr.push(ele.vchan_refid);
});
this.$refs.tree.setCheckedKeys(arr);
},
loadNode(node, resolve) {
loadNode(node, resolve) {
if (node.level === 0) {
return resolve([
{
......@@ -240,13 +265,15 @@ export default {
]);
}
if (node.level === 1) {
// http请求
let params = {
offset: 0,
limit: ""
}
this.$api.device.getDevtree(this.dev_unid,node.data.name,params).then(data => {
debugger
// http请求
let params = {
offset: 0,
limit: ""
};
this.$api.device
.getDevtree(this.dev_unid, node.data.name, params)
.then(data => {
debugger;
let vchans = data.vchan_struct || data.list_data;
for (let i in vchans) {
const vchan = vchans[i];
......@@ -267,9 +294,9 @@ export default {
}
}
resolve(vchans);
setTimeout(()=>{
this.checkvckan()
},0)
setTimeout(() => {
this.checkvckan();
}, 0);
});
return;
}
......@@ -293,63 +320,63 @@ export default {
});
}
return resolve(node.data.childs);
},
vchanClick(node) {
},
vchanClick(node) {
if (!node.refid && !node.vchan_refid) {
return;
}
try {
window.clearTimeout(this.timeout1);
window.clearTimeout(this.timeout2);
} catch (err) { }
} catch (err) {}
// var e = e || window.event;
this.play_url = "";
// if (this.testIe.isIe) {
try {
let video_ocx = document.getElementById("VionVideo");
let stopRes = video_ocx.StopPlaySip(0);
let stopRtspRes = video_ocx.StopPlay(0);
console.log("视频新建任务,停止sip播放返回值:", stopRes);
console.log("视频新建任务,停止rtsp播放返回值:", stopRtspRes);
} catch (err) {
console.log("视频新建任务,停止异常:", err.message);
}
// 判断播放sip or rtsp
if (node.leafNode === "camera" || node.leafNode === "vfile") {
if (node.video_url) {
if (node.leafNode === "vfile") {
debugger
this.play_url = {
rtsp_url: node.video_url
};
} else {
this.play_url = {
rtsp_url: node.video_url
};
}
console.log("playURL:", JSON.stringify(this.play_url));
setTimeout(() => {
this.$refs.video.videoPlay();
}, 0);
try {
let video_ocx = document.getElementById("VionVideo");
let stopRes = video_ocx.StopPlaySip(0);
let stopRtspRes = video_ocx.StopPlay(0);
console.log("视频新建任务,停止sip播放返回值:", stopRes);
console.log("视频新建任务,停止rtsp播放返回值:", stopRtspRes);
} catch (err) {
console.log("视频新建任务,停止异常:", err.message);
}
// 判断播放sip or rtsp
if (node.leafNode === "camera" || node.leafNode === "vfile") {
if (node.video_url) {
if (node.leafNode === "vfile") {
debugger;
this.play_url = {
rtsp_url: node.video_url
};
} else {
alert("播放地址不存在!");
this.play_url = {
rtsp_url: node.video_url
};
}
console.log("playURL:", JSON.stringify(this.play_url));
setTimeout(() => {
this.$refs.video.videoPlay();
}, 0);
} else {
this.getSipSetting(node.refid);
alert("播放地址不存在!");
}
} else {
this.getSipSetting(node.refid);
}
// } else {
// this.getSendingCount = 1;
// this.isNeedRewriteIsSending = true;
// this.currentVchan = node.refid || node.vchan_refid;
// }
},
getSipSetting: function(refid) {
},
getSipSetting: function(refid) {
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) {
console.log('获取sip配置返回:', JSON.stringify(res.data));
console.log("获取sip配置返回:", JSON.stringify(res.data));
this.playUrl = res.res;
this.playUrl.devId = refid;
console.log("playUrl", JSON.stringify(res));
......@@ -357,9 +384,9 @@ export default {
if (this.playUrl[attr] === "") {
setTimeout(() => {
this.$message({
message: '获取播放地址失败,请前往配置sip服务!!请重试!',
type: 'error'
});
message: "获取播放地址失败,请前往配置sip服务!!请重试!",
type: "error"
});
}, 0);
return;
}
......@@ -368,12 +395,12 @@ export default {
this.$refs.video.videoPlay();
}, 0);
} else {
this.$message({
message: '获取播放地址失败,请前往配置sip服务!!请重试!',
type: 'error'
this.$message({
message: "获取播放地址失败,请前往配置sip服务!!请重试!",
type: "error"
});
}
})
});
} else {
console.log("运维ID获取失败");
this.$message({
......@@ -396,15 +423,13 @@ export default {
this.$store.commit("setocxstate", 0);
this.$refs.tree.setCheckedKeys([]);
},
save() {
},
save() {},
moveFun(index, row) {
this.innerVisible = true;
}
},
created(){
this.user_unid = window.localStorage.getItem('user_unid');
created() {
this.user_unid = window.localStorage.getItem("user_unid");
}
};
</script>
......@@ -431,7 +456,7 @@ export default {
height: 630px;
border: 1px solid rgba(229, 229, 229, 1);
float: left;
overflow:hidden;
overflow: hidden;
overflow-y: auto;
}
.titles {
......@@ -444,7 +469,7 @@ export default {
}
.treeBox {
padding: 6px;
overflow: auto
overflow: auto;
}
.rightBox {
float: left;
......
src/views/taskManage/index.vue
......@@ -71,8 +71,36 @@
:data="tableData"
stripe
border
ref="table"
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
align="center"
prop="num"
......@@ -237,7 +265,10 @@ export default {
videoShow: false,
editForm: {},
tableData: [],
pedittype: "add"
subTaskData: [],
pedittype: "add",
currentRow:{},
rowkey:["1"]
};
},
components: {
......@@ -248,6 +279,35 @@ export default {
this.getTaskList();
},
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) {
if (cellValue == "Running") {
return "工作中";
......@@ -329,6 +389,7 @@ export default {
this.tableData = [];
} else {
res.list_data.forEach(item => {
item.subTaskData = []
if (item.start_dt) {
//先转utc格式
let date = this.$moment.utc(item.start_dt).format();
......@@ -522,4 +583,35 @@ export default {
color: #f2365a;
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>
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!