Skip to content

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

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

parent f2676ee2
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 766 additions and 26 deletions
src/views/Monitor/components/MiddleCoat.vue
View file @ 07bf007b
<template> <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> </template>
<script> <script>
/** /**
...@@ -18,6 +90,148 @@ export default { ...@@ -18,6 +90,148 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.page-body { .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> </style>
src/views/Monitor/components/Putty.vue
View file @ 07bf007b
<template> <template>
<div class="page-body"> <div class="page-body">
<div class="putty-content"> <div class="putty-content">
<div <div class="putty-row-1-1">
class="putty-row-1-1"
v-if="show"
>
<p>CDA233231231231321312</p> <p>CDA233231231231321312</p>
</div> </div>
<div class="putty-row-1-2"> <div class="putty-row-1-2">
...@@ -77,20 +74,28 @@ ...@@ -77,20 +74,28 @@
<p>CDA213</p> <p>CDA213</p>
</div> </div>
<div <div
v-popover:nasdsd
class="putty-row-5-6" class="putty-row-5-6"
@click="showPopover(data.pr56)" @click="showPopover(data, data.pr56, 'popover2')"
> >
<p>{{ data.pr56.name }}</p> <p>{{ data.pr56.name }}</p>
</div> </div>
</div> </div>
<el-popover <el-popover
placement="bottom" :ref="item.name"
title="标题" v-for="(item, index) in options"
width="200" :key="Math.random(index)"
placement="top"
width="300"
trigger="click" 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> </el-popover>
</div> </div>
</template> </template>
...@@ -105,12 +110,23 @@ export default { ...@@ -105,12 +110,23 @@ export default {
show: true, show: true,
data: { data: {
pr56: { pr56: {
name: 'SDE1111' name: 'nasdsd',
code: '这是编码啊',
no: '2233123',
time: '2019-09-29',
car: '中通客车'
}, },
pr561: {}, pr51: {
pr562: {}, name: 'qqqname',
pr536: {} code: 'qqq这是编码啊',
} no: 'qqq2233123',
time: '2222019-09-29',
car: '中通222客车'
}
},
query: {},
popover: null,
options: []
} }
}, },
...@@ -121,15 +137,25 @@ export default { ...@@ -121,15 +137,25 @@ export default {
* @method 点击展示popover * @method 点击展示popover
* @description * @description
*/ */
showPopover (val) { showPopover (data, val, item) {
console.log(val) 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> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.page-body { .page-body {
height: 100%; min-height: 100%;
background: rgba(0, 7, 12, 1); background: rgba(0, 7, 12, 1);
.putty-content { .putty-content {
...@@ -182,11 +208,6 @@ export default { ...@@ -182,11 +208,6 @@ export default {
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
} }
img {
width: 35px;
height: 18px;
}
} }
// ? 第一行top定位 // ? 第一行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