Skip to content

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

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

parent f2676ee2
Hide whitespace changes
Inline Side-by-side
Showing with 766 additions and 26 deletions
src/views/Monitor/components/ComplexionPaint.vue
View file @ 07bf007b
<template> <template>
<div>面/漆</div> <div class="page-body">
<div class="paint-content">
<!-- 第一行 -->
<div class="paint-row-1-1">
<p>CDA23323</p>
</div>
<div class="paint-row-1-2">
<p>CDA2333</p>
</div>
<div class="paint-row-1-3">
<p>CDA23</p>
</div>
<div class="paint-row-1-4">
<p>CDA2</p>
</div>
<div class="paint-row-1-5">
<p>CDA231312</p>
</div>
<!-- 第二行 -->
<div class="paint-row-2-1">
<p>CDA23323</p>
</div>
<div class="paint-row-2-2">
<p>CDA2333</p>
</div>
<div class="paint-row-2-3">
<p>CDA23</p>
</div>
<div class="paint-row-2-4">
<p>CDA2</p>
</div>
<div class="paint-row-2-5">
<p>CDA231312</p>
</div>
<!-- 第三行 -->
<div class="paint-row-3-1">
<p>CDA23323</p>
</div>
<div class="paint-row-3-2">
<p>CDA2333</p>
</div>
<div class="paint-row-3-3">
<p>CDA23</p>
</div>
<div class="paint-row-3-4">
<p>CDA2</p>
</div>
<div class="paint-row-3-5">
<p>CDA231312</p>
</div>
<!-- 第四行 -->
<div class="paint-row-4-1">
<p>CDA23323</p>
</div>
<div class="paint-row-4-2">
<p>CDA2333</p>
</div>
<div class="paint-row-4-3">
<p>CDA23</p>
</div>
<div class="paint-row-4-4">
<p>CDA2</p>
</div>
<div class="paint-row-4-5">
<p>CDA231312</p>
</div>
<!-- 第五行 -->
<div class="paint-row-5-1">
<p>CDA23323</p>
</div>
<div class="paint-row-5-2">
<p>CDA2333</p>
</div>
<div class="paint-row-5-3">
<p>CDA23</p>
</div>
<div class="paint-row-5-4">
<p>CDA2</p>
</div>
<div class="paint-row-5-5">
<p>CDA231312</p>
</div>
<!-- 第六行 -->
<div class="paint-row-6-1">
<p>CDA23323</p>
</div>
<div class="paint-row-6-2">
<p>CDA2333</p>
</div>
<div class="paint-row-6-3">
<p>CDA23</p>
</div>
<div class="paint-row-6-4">
<p>CDA2</p>
</div>
<div class="paint-row-6-5">
<p>CDA231312</p>
</div>
<!-- 第七行 -->
<div class="paint-row-7-1">
<p>CDA23323</p>
</div>
<div class="paint-row-7-2">
<p>CDA2333</p>
</div>
<div class="paint-row-7-3">
<p>CDA23</p>
</div>
<div class="paint-row-7-4">
<p>CDA2</p>
</div>
<div class="paint-row-7-5">
<p>CDA231312</p>
</div>
<!-- 第八行 -->
<div class="paint-row-8-1">
<p>CDA23323</p>
</div>
<div class="paint-row-8-2">
<p>CDA2333</p>
</div>
<div class="paint-row-8-3">
<p>CDA23</p>
</div>
<div class="paint-row-8-4">
<p>CDA2</p>
</div>
<div class="paint-row-8-5">
<p>CDA231312</p>
</div>
<!-- 第九行 -->
<div class="paint-row-9-1">
<p>CDA23323</p>
</div>
<div class="paint-row-9-2">
<p>CDA2333</p>
</div>
<div class="paint-row-9-3">
<p>CDA23</p>
</div>
<div class="paint-row-9-4">
<p>CDA2</p>
</div>
<div class="paint-row-9-5">
<p>CDA231312</p>
</div>
<!-- 第十行 -->
<div class="paint-row-10-1">
<p>CDA23323</p>
</div>
<div class="paint-row-10-2">
<p>CDA2333</p>
</div>
<div class="paint-row-10-3">
<p>CDA23</p>
</div>
<div class="paint-row-10-4">
<p>CDA2</p>
</div>
<div class="paint-row-10-5">
<p>CDA231312</p>
</div>
<!-- 第十一行 -->
<div class="paint-row-11-1">
<p>CDA23323</p>
</div>
<div class="paint-row-11-2">
<p>CDA2333</p>
</div>
<div class="paint-row-11-3">
<p>CDA23</p>
</div>
<div class="paint-row-11-4">
<p>CDA2</p>
</div>
<div class="paint-row-11-5">
<p>CDA231312</p>
</div>
<!-- 第十一行 -->
<div class="paint-row-12-4">
<p>CDA2</p>
</div>
<div class="paint-row-12-5">
<p>CDA231312</p>
</div>
<!-- 第十一行 -->
<div class="paint-row-13-1">
<p>CDA2</p>
</div>
<div class="paint-row-13-2">
<p>CDA2</p>
</div>
<div class="paint-row-13-5">
<p>CDA231312</p>
</div>
</div>
</div>
</template> </template>
<script> <script>
/** /**
...@@ -17,4 +215,311 @@ export default { ...@@ -17,4 +215,311 @@ export default {
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.page-body {
min-height: 100%;
background: rgba(0, 7, 12, 1);
.paint-content {
position: relative;
margin: 0 auto;
width: 1600px;
height: 900px;
background: url('../../../assets/images/Monitor/paint-bg.png') no-repeat;
.paint-row-1-1,
.paint-row-1-2,
.paint-row-1-3,
.paint-row-1-4,
.paint-row-1-5,
.paint-row-2-1,
.paint-row-2-2,
.paint-row-2-3,
.paint-row-2-4,
.paint-row-2-5,
.paint-row-3-1,
.paint-row-3-2,
.paint-row-3-3,
.paint-row-3-4,
.paint-row-3-5,
.paint-row-4-1,
.paint-row-4-2,
.paint-row-4-3,
.paint-row-4-4,
.paint-row-4-5,
.paint-row-5-1,
.paint-row-5-2,
.paint-row-5-3,
.paint-row-5-4,
.paint-row-5-5,
.paint-row-6-1,
.paint-row-6-2,
.paint-row-6-3,
.paint-row-6-4,
.paint-row-6-5,
.paint-row-7-1,
.paint-row-7-2,
.paint-row-7-3,
.paint-row-7-4,
.paint-row-7-5,
.paint-row-8-1,
.paint-row-8-2,
.paint-row-8-3,
.paint-row-8-4,
.paint-row-8-5,
.paint-row-9-1,
.paint-row-9-2,
.paint-row-9-3,
.paint-row-9-4,
.paint-row-9-5,
.paint-row-10-1,
.paint-row-10-2,
.paint-row-10-3,
.paint-row-10-4,
.paint-row-10-5,
.paint-row-11-1,
.paint-row-11-2,
.paint-row-11-3,
.paint-row-11-4,
.paint-row-11-5,
.paint-row-12-4,
.paint-row-12-5,
.paint-row-13-1,
.paint-row-13-2,
.paint-row-13-5 {
position: absolute;
width: 140px;
height: 40px;
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
.paint-row-1-1,
.paint-row-1-2,
.paint-row-1-3,
.paint-row-1-4 {
top: 151px;
}
.paint-row-1-5 {
top: 142px;
}
// ?第一行 left
.paint-row-1-1,
.paint-row-2-1,
.paint-row-3-1,
.paint-row-4-1,
.paint-row-5-1,
.paint-row-6-1,
.paint-row-7-1,
.paint-row-8-1,
.paint-row-9-1,
.paint-row-10-1,
.paint-row-11-1,
.paint-row-13-1 {
left: 315px;
}
.paint-row-1-2,
.paint-row-5-2,
.paint-row-7-2,
.paint-row-8-2 {
left: 675px;
}
.paint-row-1-3,
.paint-row-2-3,
.paint-row-7-3,
.paint-row-11-3 {
left: 802px;
}
.paint-row-1-4,
.paint-row-3-4,
.paint-row-4-4,
.paint-row-6-4,
.paint-row-7-4,
.paint-row-9-4,
.paint-row-10-4,
.paint-row-11-4,
.paint-row-12-4 {
left: 961px;
}
.paint-row-1-5,
.paint-row-2-5,
.paint-row-3-5,
.paint-row-4-5,
.paint-row-5-5,
.paint-row-6-5,
.paint-row-7-5,
.paint-row-8-5,
.paint-row-9-5,
.paint-row-10-5,
.paint-row-11-5,
.paint-row-12-5,
.paint-row-13-5 {
left: 1295px;
}
// ?第二行 top
.paint-row-2-1,
.paint-row-2-2,
.paint-row-2-3,
.paint-row-2-4 {
top: 210px;
}
.paint-row-2-5 {
top: 202px;
}
// ?第二行 left
.paint-row-2-2,
.paint-row-3-2,
.paint-row-4-2,
.paint-row-6-2,
.paint-row-9-2,
.paint-row-10-2,
.paint-row-11-2,
.paint-row-13-2 {
left: 635px;
}
.paint-row-2-4,
.paint-row-5-4,
.paint-row-8-4 {
left: 995px;
}
// ?第三行 top
.paint-row-3-1,
.paint-row-3-2,
.paint-row-3-3,
.paint-row-3-4 {
top: 266px;
}
.paint-row-3-5 {
top: 256px;
}
.paint-row-3-3,
.paint-row-4-3,
.paint-row-5-3,
.paint-row-6-3,
.paint-row-8-3,
.paint-row-9-3,
.paint-row-10-3 {
left: 848px;
}
// ?第四行 top
.paint-row-4-1,
.paint-row-4-2,
.paint-row-4-3,
.paint-row-4-4 {
top: 325px;
}
.paint-row-4-5 {
top: 315px;
}
// ?第五行 top
.paint-row-5-1,
.paint-row-5-2,
.paint-row-5-3,
.paint-row-5-4 {
top: 382px;
}
.paint-row-5-5 {
top: 372px;
}
// ?第六行 top
.paint-row-6-1,
.paint-row-6-2,
.paint-row-6-3,
.paint-row-6-4 {
top: 438px;
}
.paint-row-6-5 {
top: 428px;
}
// ?第七行 top
.paint-row-7-1,
.paint-row-7-2,
.paint-row-7-3,
.paint-row-7-4 {
top: 495px;
}
.paint-row-7-5 {
top: 485px;
}
// ?第八行 top
.paint-row-8-1,
.paint-row-8-2,
.paint-row-8-3,
.paint-row-8-4 {
top: 550px;
}
.paint-row-8-5 {
top: 544px;
}
// ?第九行
.paint-row-9-1 {
top: 610px;
}
.paint-row-9-2,
.paint-row-9-3,
.paint-row-9-4,
.paint-row-9-5 {
top: 602px;
}
// ?第十行
.paint-row-10-1,
.paint-row-10-2,
.paint-row-10-3,
.paint-row-10-4,
.paint-row-10-5 {
top: 666px;
}
// ?第十一行
.paint-row-11-1 {
top: 723px;
}
.paint-row-11-2,
.paint-row-11-3,
.paint-row-11-4 {
top: 730px;
}
.paint-row-11-5 {
top: 713px;
}
// ?第十二行
.paint-row-12-4 {
top: 780px;
}
.paint-row-12-5 {
top: 759px;
}
// ?第十三行
.paint-row-13-1,
.paint-row-13-2 {
top: 816px;
}
.paint-row-13-5 {
top: 808px;
}
}
}
</style> </style>
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