Skip to content

Z
zhongtong-avi-web
Commit 07bf007b authored by 王云帆's avatar 王云帆
Browse files
Options

feat(avi): avi 静态界面开发完毕 🚧

parent f2676ee2
Expand all Show whitespace changes
Inline Side-by-side
Showing with 766 additions and 26 deletions
src/views/Monitor/components/MiddleCoat.vue
View file @ 07bf007b
<template>
<div class="page-body">中涂作业区</div>
<div class="page-body">
<div class="coat-content">
<div class="coat-row-1-1">
<p>CDA23323</p>
</div>
<div class="coat-row-1-2">
<p>CDA2333</p>
</div>
<div class="coat-row-1-3">
<p>CDA23</p>
</div>
<div class="coat-row-1-4">
<p>CDA2</p>
</div>
<div class="coat-row-1-5">
<p>CDA231312</p>
</div>
<!-- 第二行 -->
<div class="coat-row-2-1">
<p>CDA23323</p>
</div>
<div class="coat-row-2-2">
<p>CDA2333</p>
</div>
<div class="coat-row-2-3">
<p>CDA23</p>
</div>
<div class="coat-row-2-4">
<p>CDA2</p>
</div>
<div class="coat-row-2-5">
<p>CDA231312</p>
</div>
<div class="coat-row-2-6">
<p>CDA231312</p>
</div>
<!-- 第三行 -->
<div class="coat-row-3-1">
<p>CDA23323</p>
</div>
<div class="coat-row-3-2">
<p>CDA2333</p>
</div>
<div class="coat-row-3-3">
<p>CDA23</p>
</div>
<div class="coat-row-3-4">
<p>CDA2</p>
</div>
<div class="coat-row-3-5">
<p>CDA231312</p>
</div>
<div class="coat-row-3-6">
<p>CDA231312</p>
</div>
<!-- 第四行 -->
<div class="coat-row-4-1">
<p>CDA23323</p>
</div>
<div class="coat-row-4-2">
<p>CDA2333</p>
</div>
<div class="coat-row-4-3">
<p>CDA23</p>
</div>
<div class="coat-row-4-4">
<p>CDA2</p>
</div>
<div class="coat-row-4-5">
<p>CDA231312</p>
</div>
</div>
</div>
</template>
<script>
/**
......@@ -18,6 +90,148 @@ export default {
</script>
<style lang="scss" scoped>
.page-body {
background: #001927;
min-height: 100%;
background: rgba(0, 7, 12, 1);
.coat-content {
position: relative;
margin: 0 auto;
width: 1600px;
height: 900px;
background: url('../../../assets/images/Monitor/coat-bg.png') no-repeat;
.coat-row-1-1,
.coat-row-1-2,
.coat-row-1-3,
.coat-row-1-4,
.coat-row-1-5,
.coat-row-2-1,
.coat-row-2-2,
.coat-row-2-3,
.coat-row-2-4,
.coat-row-2-5,
.coat-row-2-6,
.coat-row-3-1,
.coat-row-3-2,
.coat-row-3-3,
.coat-row-3-4,
.coat-row-3-5,
.coat-row-3-6,
.coat-row-4-1,
.coat-row-4-2,
.coat-row-4-3,
.coat-row-4-4,
.coat-row-4-5 {
position: absolute;
width: 140px;
height: 50px;
cursor: pointer;
background: url('../../../assets/images/Monitor/monitor_car.png') no-repeat;
background-size: 35px 18px;
background-position: 0 16px;
p {
font-size: 14px;
margin: 0;
color: #ffffff;
font-weight: bold;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
// ? 第一行 top
.coat-row-1-1,
.coat-row-1-2,
.coat-row-1-3,
.coat-row-1-4,
.coat-row-1-5 {
top: 355px;
}
// ? 第一行 left
.coat-row-1-1,
.coat-row-3-1,
.coat-row-4-1 {
left: 172px;
}
.coat-row-1-2,
.coat-row-3-2 {
left: 348px;
}
.coat-row-1-3,
.coat-row-3-3,
.coat-row-4-2 {
left: 533px;
}
.coat-row-1-4,
.coat-row-3-4 {
left: 713px;
}
.coat-row-1-5,
.coat-row-3-5 {
left: 893px;
}
// ?第二行 top
.coat-row-2-1,
.coat-row-2-2,
.coat-row-2-3,
.coat-row-2-4,
.coat-row-2-5,
.coat-row-2-6 {
top: 425px;
}
// ?第二行 left
.coat-row-2-1 {
left: 217px;
}
.coat-row-2-2 {
left: 395px;
}
.coat-row-2-3 {
left: 575px;
}
.coat-row-2-4,
.coat-row-4-3 {
left: 755px;
}
.coat-row-2-5,
.coat-row-4-4 {
left: 935px;
}
.coat-row-2-6 {
left: 1260px;
}
// ?第三行 top
.coat-row-3-1,
.coat-row-3-2,
.coat-row-3-3,
.coat-row-3-4,
.coat-row-3-5 {
top: 495px;
}
.coat-row-3-6 {
top: 515px;
}
.coat-row-3-6 {
left: 1260px;
}
// ?第四行 top
.coat-row-4-1 {
top: 569px;
}
.coat-row-4-2,
.coat-row-4-3,
.coat-row-4-4 {
top: 589px;
}
.coat-row-4-5 {
top: 603px;
left: 1260px;
}
}
}
</style>
src/views/Monitor/components/Putty.vue
View file @ 07bf007b
<template>
<div class="page-body">
<div class="putty-content">
<div
class="putty-row-1-1"
v-if="show"
>
<div class="putty-row-1-1">
<p>CDA233231231231321312</p>
</div>
<div class="putty-row-1-2">
......@@ -77,20 +74,28 @@
<p>CDA213</p>
</div>
<div
v-popover:nasdsd
class="putty-row-5-6"
@click="showPopover(data.pr56)"
@click="showPopover(data, data.pr56, 'popover2')"
>
<p>{{ data.pr56.name }}</p>
</div>
</div>
<el-popover
placement="bottom"
title="标题"
width="200"
:ref="item.name"
v-for="(item, index) in options"
:key="Math.random(index)"
placement="top"
width="300"
trigger="click"
content='1111111111111111'
>
<el-button slot="reference">click 激活</el-button>
<div class="flex-content">
<p>111: <span>{{ item.car }}</span></p>
<p>111: <span>{{ item.code }}</span></p>
<p>111: <span>{{ item.name }}</span></p>
<p>111: <span>{{ item.no }}</span></p>
<p>111: <span>{{ item.time }}</span></p>
</div>
</el-popover>
</div>
</template>
......@@ -105,12 +110,23 @@ export default {
show: true,
data: {
pr56: {
name: 'SDE1111'
name: 'nasdsd',
code: '这是编码啊',
no: '2233123',
time: '2019-09-29',
car: '中通客车'
},
pr561: {},
pr562: {},
pr536: {}
pr51: {
name: 'qqqname',
code: 'qqq这是编码啊',
no: 'qqq2233123',
time: '2222019-09-29',
car: '中通222客车'
}
},
query: {},
popover: null,
options: []
}
},
......@@ -121,15 +137,25 @@ export default {
* @method 点击展示popover
* @description
*/
showPopover (val) {
console.log(val)
showPopover (data, val, item) {
let keys = []
let values = []
for (let key in data) {
keys.push(key)
values.push(data[key])
}
let newArr = []
newArr = _.cloneDeep(values)
this.options = newArr.filter(item => val.name === item.name)
console.log(this.options)
console.log(this.$refs.nasdsd)
}
}
}
</script>
<style lang="scss" scoped>
.page-body {
height: 100%;
min-height: 100%;
background: rgba(0, 7, 12, 1);
.putty-content {
......@@ -182,11 +208,6 @@ export default {
text-overflow: ellipsis;
white-space: nowrap;
}
img {
width: 35px;
height: 18px;
}
}
// ? 第一行top定位
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment