中建四局(监控大屏):页面更改
This commit is contained in:
骆乐
parent
f4c8171e0b
commit
ebea2a21ec
BIN
src/views/projectAdmin/fourEngin/assets/temp/small.png
Normal file
BIN
src/views/projectAdmin/fourEngin/assets/temp/small.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 277 KiB |
@ -24,9 +24,9 @@ export default {
|
||||
height: 100%;
|
||||
.title {
|
||||
height: 34px;
|
||||
line-height: 28px;
|
||||
line-height: 25px;
|
||||
text-align: center;
|
||||
font-size: 20px;
|
||||
font-size: 14px;
|
||||
color: #ffffff;
|
||||
background-image: url('../assets/images/common/bg-card.png');
|
||||
background-size: 100% 100%;
|
||||
|
||||
@ -1,26 +1,35 @@
|
||||
<template>
|
||||
<div class="monitor">
|
||||
<!-- <div class="video" v-for="i in 12" :key="i"></div> -->
|
||||
<div class="left">
|
||||
<Left />
|
||||
</div>
|
||||
<div class="right">
|
||||
<Right />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {}
|
||||
import Left from "./left.vue";
|
||||
import Right from "./right.vue"
|
||||
export default {
|
||||
components: { Left,Right},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.monitor {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: url(../assets/temp/8.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
.video {
|
||||
width: 24.5%;
|
||||
height: 32%;
|
||||
border: 1px solid skyblue;
|
||||
.left{
|
||||
width: 15%;
|
||||
box-sizing: border-box;
|
||||
padding-right: 2%;
|
||||
}
|
||||
.right{
|
||||
width: 85%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
153
src/views/projectAdmin/fourEngin/monitor/left.vue
Normal file
153
src/views/projectAdmin/fourEngin/monitor/left.vue
Normal file
@ -0,0 +1,153 @@
|
||||
<template>
|
||||
<Card title="监控设备列表">
|
||||
<vue-scroll class="treeList">
|
||||
<div style="padding-top: 10px">
|
||||
<ul style="margin:20px" v-for="(name, index) in dataList" :key="index">
|
||||
<li :class="{ active: index == current && currentTwo == -1 }">
|
||||
<div
|
||||
class="clickName"
|
||||
@click="next(index, $event, name, 1)"
|
||||
style="display: inline-block"
|
||||
>
|
||||
<el-popover
|
||||
placement="top-start"
|
||||
v-model="name.visible"
|
||||
:content="name.dangerName"
|
||||
>
|
||||
<span
|
||||
slot="reference"
|
||||
@mouseenter="
|
||||
name.visible = name.dangerName.length > 9 ? true : false
|
||||
"
|
||||
@mouseleave="name.visible = false"
|
||||
>{{
|
||||
name.dangerName.length > 9
|
||||
? name.dangerName.substring(0, 8) + "..."
|
||||
: name.dangerName
|
||||
}}</span>
|
||||
</el-popover>
|
||||
<span class="imgbox" style="margin-left:145px">
|
||||
<i v-if="current != index" class="el-icon-arrow-right"></i>
|
||||
<i v-else class="el-icon-arrow-down"></i>
|
||||
</span>
|
||||
</div>
|
||||
</li>
|
||||
<ul
|
||||
style="margin:20px;color:#66D4D9;"
|
||||
v-for="(item, i) in name.list"
|
||||
id="child"
|
||||
v-if="current == index"
|
||||
:key="i"
|
||||
>
|
||||
<li
|
||||
:class="{ active: i == currentTwo && current != -1 }"
|
||||
@click="next2(item)"
|
||||
>
|
||||
<el-popover
|
||||
placement="top-start"
|
||||
v-model="item.visible"
|
||||
:content="item.dangerName"
|
||||
>
|
||||
<div
|
||||
slot="reference"
|
||||
@mouseenter="
|
||||
item.visible = item.dangerName.length > 9 ? true : false
|
||||
"
|
||||
@mouseleave="item.visible = false"
|
||||
style="display: inline-block; width: 60%"
|
||||
@click="showThree(item, i)"
|
||||
>
|
||||
{{
|
||||
item.dangerName.length > 10
|
||||
? item.dangerName.substring(0, 9) + "..."
|
||||
: item.dangerName
|
||||
}}
|
||||
</div>
|
||||
</el-popover>
|
||||
</li>
|
||||
</ul>
|
||||
</ul>
|
||||
<li
|
||||
class="title"
|
||||
style="text-align: center; line-height: 140px"
|
||||
v-show="dataList.length == 0"
|
||||
>
|
||||
暂无数据
|
||||
</li>
|
||||
</div>
|
||||
</vue-scroll>
|
||||
</Card>
|
||||
</template>
|
||||
<script>
|
||||
import Card from "../components/Card.vue";
|
||||
export default {
|
||||
components: { Card },
|
||||
data() {
|
||||
return {
|
||||
current: -1,
|
||||
threeIndex: -1,
|
||||
currentTwo: -1,
|
||||
dataList: [
|
||||
{ dangerName: "设备1", list: [{ dangerName: "塔吊设备" }] },
|
||||
{ dangerName: "设备2", list: [{ dangerName: "塔吊设备" }] },
|
||||
{ dangerName: "设备3", list: [{ dangerName: "塔吊设备" }] },
|
||||
],
|
||||
};
|
||||
},
|
||||
methods:{
|
||||
next2(item) {
|
||||
// this.secondId = item.id;
|
||||
// this.loadRigthtList();
|
||||
},
|
||||
next(index, $event, data, type) {
|
||||
console.log("data", data);
|
||||
this.currentTwo = -1;
|
||||
//
|
||||
if (this.current != index) {
|
||||
this.threeIndex = -1;
|
||||
}
|
||||
|
||||
this.threeData = [];
|
||||
this.type = type;
|
||||
this.parentid1 = data.id;
|
||||
if (this.current == index) {
|
||||
this.current = -1;
|
||||
} else {
|
||||
this.current = index;
|
||||
}
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.maxbox {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
font-size: 16px;
|
||||
box-sizing: border-box;
|
||||
padding-top: 8%;
|
||||
.treeList {
|
||||
background-color: rgb(255,255,255);
|
||||
height: calc(100% - 42px) !important;
|
||||
}
|
||||
li{
|
||||
cursor: pointer;
|
||||
font-size: 16px;
|
||||
line-height: 32px;
|
||||
letter-spacing: 1px;
|
||||
font-weight: bold;
|
||||
}
|
||||
li:hover,
|
||||
.active {
|
||||
background-color: rgba(81, 129, 246, 0.14);
|
||||
color: @--color-primary;
|
||||
}
|
||||
#child {
|
||||
li {
|
||||
font-size: 15px;
|
||||
padding-left: 39px;
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
83
src/views/projectAdmin/fourEngin/monitor/right.vue
Normal file
83
src/views/projectAdmin/fourEngin/monitor/right.vue
Normal file
@ -0,0 +1,83 @@
|
||||
<template>
|
||||
<Card title="视频监控">
|
||||
<div class="top">
|
||||
<el-select size="mini" v-model="value1" placeholder="请选择">
|
||||
<el-option
|
||||
v-for="item in typeList"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
<div class="maxbox">
|
||||
<div class="show"></div>
|
||||
<div class="show"></div>
|
||||
<div class="show"></div>
|
||||
<div class="show"></div>
|
||||
</div>
|
||||
</Card>
|
||||
</template>
|
||||
<script>
|
||||
import Card from '../components/Card.vue'
|
||||
export default {
|
||||
components: { Card },
|
||||
data() {
|
||||
return {
|
||||
value1:'2',
|
||||
typeList: [{
|
||||
value: '1',
|
||||
label: '2屏'
|
||||
}, {
|
||||
value: '2',
|
||||
label: '4屏'
|
||||
}, {
|
||||
value: '3',
|
||||
label: '9屏'
|
||||
}],
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.top{
|
||||
box-sizing: border-box;
|
||||
padding-top: 10px;
|
||||
padding-right: 20px;
|
||||
height: 6%;
|
||||
float: right;
|
||||
}
|
||||
.maxbox{
|
||||
width: 100%;
|
||||
height: 94%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
.show{
|
||||
width: 49%;
|
||||
font-size: 20px;
|
||||
margin-left: 1%;
|
||||
background-image: url(.././assets/temp/small.png);
|
||||
background-size: 100%;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
}
|
||||
::v-deep .el-input--mini .el-input__inner {
|
||||
height: 33px;
|
||||
width: 80px;
|
||||
color:#6ba8b1;
|
||||
}
|
||||
::v-deep .el-select,
|
||||
::v-deep .el-input,
|
||||
::v-deep .el-input__inner{
|
||||
background-color:#172337 ;
|
||||
background-image: url(../assets/images/common/num_bg.png);
|
||||
background-size: 100%;
|
||||
border:0px;
|
||||
border-radius:0px;
|
||||
text-align: center;
|
||||
}
|
||||
::v-deep .el-select .el-input .el-select__caret{
|
||||
color:#6ba8b1;
|
||||
}
|
||||
</style>
|
||||
Loading…
x
Reference in New Issue
Block a user