|
|
|
|
@ -1,69 +1,70 @@
|
|
|
|
|
<template>
|
|
|
|
|
<div class="monitor-container">
|
|
|
|
|
<!-- 左侧数据列表树 -->
|
|
|
|
|
<div class="sideBar">
|
|
|
|
|
<!-- <treeSide></treeSide> -->
|
|
|
|
|
<!-- <el-tree ref="tree" :data="barData" @node-click="handleNodeClick" :props="defaultProps"></el-tree> -->
|
|
|
|
|
<el-tree
|
|
|
|
|
:data="lineTreeData"
|
|
|
|
|
:props="defaultProps"
|
|
|
|
|
ref="tree"
|
|
|
|
|
node-key="id"
|
|
|
|
|
highlight-current
|
|
|
|
|
:default-expand-all="true"
|
|
|
|
|
@node-click="handleNodeClick"
|
|
|
|
|
:current-node-key="currentNodekey"
|
|
|
|
|
>
|
|
|
|
|
<span class="custom-tree-node" slot-scope="{ node, data }">
|
|
|
|
|
<span v-if="data.list" class="iconfont icon-dianli"> </span>
|
|
|
|
|
<span
|
|
|
|
|
v-else
|
|
|
|
|
class="iconfont icon-dianlihangye"
|
|
|
|
|
style="margin-right: 3px"
|
|
|
|
|
></span>
|
|
|
|
|
<span>{{ node.label }}</span>
|
|
|
|
|
</span>
|
|
|
|
|
</el-tree>
|
|
|
|
|
</div>
|
|
|
|
|
<!-- <router-view></router-view> -->
|
|
|
|
|
<!-- 中心内容 -->
|
|
|
|
|
|
|
|
|
|
<!-- <picturemain :photoData="photoData" v-if="showBigPic"></picturemain> -->
|
|
|
|
|
<!-- 带参数的中心内容右侧参数区 -->
|
|
|
|
|
<div class="picSetBox">
|
|
|
|
|
<div class="swiperBox">
|
|
|
|
|
<carouselChart :terminalPhoto="terminalPhoto"></carouselChart>
|
|
|
|
|
<div class="monitorBox">
|
|
|
|
|
<div class="monitor-container">
|
|
|
|
|
<!-- 左侧数据列表树 -->
|
|
|
|
|
<div class="sideBar">
|
|
|
|
|
<!-- <treeSide></treeSide> -->
|
|
|
|
|
<!-- <el-tree ref="tree" :data="barData" @node-click="handleNodeClick" :props="defaultProps"></el-tree> -->
|
|
|
|
|
<el-tree
|
|
|
|
|
:data="lineTreeData"
|
|
|
|
|
:props="defaultProps"
|
|
|
|
|
ref="tree"
|
|
|
|
|
node-key="id"
|
|
|
|
|
highlight-current
|
|
|
|
|
:default-expand-all="true"
|
|
|
|
|
@node-click="handleNodeClick"
|
|
|
|
|
:current-node-key="currentNodekey"
|
|
|
|
|
>
|
|
|
|
|
<span class="custom-tree-node" slot-scope="{ node, data }">
|
|
|
|
|
<span v-if="data.list" class="iconfont icon-dianli"> </span>
|
|
|
|
|
<span
|
|
|
|
|
v-else
|
|
|
|
|
class="iconfont icon-dianlihangye"
|
|
|
|
|
style="margin-right: 3px"
|
|
|
|
|
></span>
|
|
|
|
|
<span>{{ node.label }}</span>
|
|
|
|
|
</span>
|
|
|
|
|
</el-tree>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="parameterArea">
|
|
|
|
|
<div class="paramsDate">
|
|
|
|
|
<h3>日期选择</h3>
|
|
|
|
|
<el-date-picker
|
|
|
|
|
v-model="dateValue"
|
|
|
|
|
type="date"
|
|
|
|
|
placeholder="选择日期"
|
|
|
|
|
value-format="timestamp"
|
|
|
|
|
@change="changedate"
|
|
|
|
|
>
|
|
|
|
|
</el-date-picker>
|
|
|
|
|
<!-- <router-view></router-view> -->
|
|
|
|
|
<!-- 中心内容 -->
|
|
|
|
|
<!-- <picturemain :photoData="photoData" v-if="showBigPic"></picturemain> -->
|
|
|
|
|
<!-- 带参数的中心内容右侧参数区 -->
|
|
|
|
|
<div class="picSetBox">
|
|
|
|
|
<div class="swiperBox">
|
|
|
|
|
<carouselChart :terminalPhoto="terminalPhoto"></carouselChart>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="monitorItemBox">
|
|
|
|
|
<h3>通道</h3>
|
|
|
|
|
<el-select
|
|
|
|
|
v-model="channelValue"
|
|
|
|
|
placeholder="请选择"
|
|
|
|
|
@change="changeChannelId"
|
|
|
|
|
>
|
|
|
|
|
<el-option
|
|
|
|
|
v-for="item in channelOption"
|
|
|
|
|
:key="item.value"
|
|
|
|
|
:label="item.label"
|
|
|
|
|
:value="item.value"
|
|
|
|
|
<div class="parameterArea">
|
|
|
|
|
<div class="paramsDate">
|
|
|
|
|
<h3>日期选择</h3>
|
|
|
|
|
<el-date-picker
|
|
|
|
|
v-model="dateValue"
|
|
|
|
|
type="date"
|
|
|
|
|
placeholder="选择日期"
|
|
|
|
|
value-format="timestamp"
|
|
|
|
|
@change="changedate"
|
|
|
|
|
>
|
|
|
|
|
</el-option>
|
|
|
|
|
</el-select>
|
|
|
|
|
</el-date-picker>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="monitorItemBox">
|
|
|
|
|
<h3>通道</h3>
|
|
|
|
|
<el-select
|
|
|
|
|
v-model="channelValue"
|
|
|
|
|
placeholder="请选择"
|
|
|
|
|
@change="changeChannelId"
|
|
|
|
|
>
|
|
|
|
|
<el-option
|
|
|
|
|
v-for="item in channelOption"
|
|
|
|
|
:key="item.value"
|
|
|
|
|
:label="item.label"
|
|
|
|
|
:value="item.value"
|
|
|
|
|
>
|
|
|
|
|
</el-option>
|
|
|
|
|
</el-select>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<!-- <paramArea></paramArea> -->
|
|
|
|
|
</div>
|
|
|
|
|
<!-- <paramArea></paramArea> -->
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
@ -143,13 +144,13 @@ export default {
|
|
|
|
|
console.log(this.currentNodekey);
|
|
|
|
|
this.channelId = this.currentNodekey;
|
|
|
|
|
console.log(this.channelId);
|
|
|
|
|
this.getChannelList(this.channelId); //获取通道id接口
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
.catch((err) => {
|
|
|
|
|
console.log(err); //代码错误、请求失败捕获
|
|
|
|
|
});
|
|
|
|
|
this.getChannelList(this.channelId); //获取通道id接口
|
|
|
|
|
},
|
|
|
|
|
//点击获取当前点击的tree数据
|
|
|
|
|
handleNodeClick(data, node) {
|
|
|
|
|
@ -190,6 +191,7 @@ export default {
|
|
|
|
|
},
|
|
|
|
|
//获取图片
|
|
|
|
|
getTerminalPhotoList(id, date, termId) {
|
|
|
|
|
this.terminalPhoto = [];
|
|
|
|
|
console.log(id, date, termId);
|
|
|
|
|
getTerminalPhotoListJoggle({
|
|
|
|
|
channelid: id,
|
|
|
|
|
@ -198,6 +200,7 @@ export default {
|
|
|
|
|
})
|
|
|
|
|
.then((res) => {
|
|
|
|
|
console.log(res);
|
|
|
|
|
|
|
|
|
|
this.terminalPhoto = res.data.list;
|
|
|
|
|
console.log(this.terminalPhoto);
|
|
|
|
|
})
|
|
|
|
|
@ -213,6 +216,7 @@ export default {
|
|
|
|
|
return i.value === val;
|
|
|
|
|
});
|
|
|
|
|
console.log(channelObj);
|
|
|
|
|
|
|
|
|
|
this.getTerminalPhotoList(val, this.dateValue, channelObj.termid);
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
@ -220,59 +224,67 @@ export default {
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style lang="less">
|
|
|
|
|
.monitor-container {
|
|
|
|
|
display: flex;
|
|
|
|
|
height: 100%;
|
|
|
|
|
border: 1px solid @border-color-base;
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
background: @color-white;
|
|
|
|
|
.sideBar {
|
|
|
|
|
width: 300px;
|
|
|
|
|
border-right: 1px solid @border-color-base;
|
|
|
|
|
overflow: auto;
|
|
|
|
|
.el-tree {
|
|
|
|
|
.el-tree-node__content {
|
|
|
|
|
height: 40px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.el-tree--highlight-current
|
|
|
|
|
.el-tree-node.is-current
|
|
|
|
|
> .el-tree-node__content {
|
|
|
|
|
// 设置颜色
|
|
|
|
|
color: #fff;
|
|
|
|
|
background: #2d8cf0;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.picSetBox {
|
|
|
|
|
.monitorBox {
|
|
|
|
|
width: calc(100% - 16px);
|
|
|
|
|
height: calc(100% - 32px);
|
|
|
|
|
padding: 16px 8px;
|
|
|
|
|
background: #ffffff;
|
|
|
|
|
.monitor-container {
|
|
|
|
|
display: flex;
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
//background: #fcc;
|
|
|
|
|
flex: 1;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
.swiperBox {
|
|
|
|
|
-webkit-box-flex: 1;
|
|
|
|
|
-ms-flex: 1;
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
background: @color-white;
|
|
|
|
|
border: 1px solid #dddddd;
|
|
|
|
|
border-radius: 4px;
|
|
|
|
|
.sideBar {
|
|
|
|
|
width: 300px;
|
|
|
|
|
border-right: 1px solid @border-color-base;
|
|
|
|
|
overflow: auto;
|
|
|
|
|
padding: 16px 0px;
|
|
|
|
|
.el-tree {
|
|
|
|
|
.el-tree-node__content {
|
|
|
|
|
height: 40px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.el-tree--highlight-current
|
|
|
|
|
.el-tree-node.is-current
|
|
|
|
|
> .el-tree-node__content {
|
|
|
|
|
// 设置颜色
|
|
|
|
|
color: #fff;
|
|
|
|
|
background: #2d8cf0;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.picSetBox {
|
|
|
|
|
display: flex;
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
//background: #fcc;
|
|
|
|
|
flex: 1;
|
|
|
|
|
width: auto;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.parameterArea {
|
|
|
|
|
width: 300px;
|
|
|
|
|
padding: 16px 16px;
|
|
|
|
|
border-left: 1px solid #dcdfe6;
|
|
|
|
|
.monitorItemBox,
|
|
|
|
|
.paramsDate {
|
|
|
|
|
margin-bottom: 16px;
|
|
|
|
|
h3 {
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
font-weight: normal;
|
|
|
|
|
color: @color-text-primary;
|
|
|
|
|
margin-bottom: 8px;
|
|
|
|
|
.swiperBox {
|
|
|
|
|
-webkit-box-flex: 1;
|
|
|
|
|
-ms-flex: 1;
|
|
|
|
|
flex: 1;
|
|
|
|
|
width: auto;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
}
|
|
|
|
|
.el-date-editor.el-input {
|
|
|
|
|
width: 215px;
|
|
|
|
|
}
|
|
|
|
|
.parameterArea {
|
|
|
|
|
width: 220px;
|
|
|
|
|
padding: 16px 16px;
|
|
|
|
|
border-left: 1px solid #dcdfe6;
|
|
|
|
|
.monitorItemBox,
|
|
|
|
|
.paramsDate {
|
|
|
|
|
margin-bottom: 16px;
|
|
|
|
|
h3 {
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
font-weight: normal;
|
|
|
|
|
color: @color-text-primary;
|
|
|
|
|
margin-bottom: 8px;
|
|
|
|
|
}
|
|
|
|
|
.el-date-editor.el-input {
|
|
|
|
|
width: 215px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
fanluyan
2 years ago