Skip to content

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

feat(模态框): 模态框封装组件

parent 54eb4af2
Hide whitespace changes
Inline Side-by-side
Showing with 564 additions and 7 deletions
src/views/Monitor/components/Electrophoresis.vue
View file @ b291ef13
<template> <template>
<div class="page-pack"> <div class="page-pack">
<div class="container-pack"></div> <div class="elect-content">
<!-- 第 1 行 -->
<div
class="elect-row-1-1"
@click="clickBtn()"
>
<p>CDA11323</p>
</div>
<div
class="elect-row-1-2"
@click="clickBtn()"
>
<p>CDA11323</p>
</div>
<div class="elect-row-1-3">
<p>CDA11323</p>
</div>
<!-- 第 2 行 -->
<div class="elect-row-2-1">
<p>CDA11323</p>
</div>
<div class="elect-row-2-2">
<p>CDA11323</p>
</div>
<div class="elect-row-2-3">
<p>CDA11323</p>
</div>
<!-- 第 3 行 -->
<div class="elect-row-3-1">
<p>CDA11323</p>
</div>
<div class="elect-row-3-2">
<p>CDA11323</p>
</div>
<div class="elect-row-3-3">
<p>CDA11323</p>
</div>
<!-- 第 4 行 -->
<div class="elect-row-4-1">
<p>CDA11323</p>
</div>
<div class="elect-row-4-2">
<p>CDA11323</p>
</div>
<div class="elect-row-4-3">
<p>CDA11323</p>
</div>
<!-- 第 5 行 -->
<div class="elect-row-5-1">
<p>CDA11323</p>
</div>
<div class="elect-row-5-2">
<p>CDA11323</p>
</div>
<div class="elect-row-5-3">
<p>CDA11323</p>
</div>
<!-- 第 6 行 -->
<div class="elect-row-6-1">
<p>CDA11323</p>
</div>
<div class="elect-row-6-2">
<p>CDA11323</p>
</div>
<div class="elect-row-6-3">
<p>CDA11323</p>
</div>
<!-- 6.5行 -->
<div class="elect-row-6-4">
<p>CDA11323</p>
</div>
<!-- 第 7 行 -->
<div class="elect-row-7-1">
<p>CDA11323</p>
</div>
<div class="elect-row-7-2">
<p>CDA11323</p>
</div>
<div class="elect-row-7-3">
<p>CDA11323</p>
</div>
<!-- 第 8 行 -->
<div class="elect-row-8-1">
<p>CDA11323</p>
</div>
<div class="elect-row-8-2">
<p>CDA11323</p>
</div>
<div class="elect-row-8-3">
<p>CDA11323</p>
</div>
<!-- 第 9 行 -->
<div class="elect-row-9-1">
<p>CDA11323</p>
</div>
<div class="elect-row-9-2">
<p>CDA11323</p>
</div>
<div class="elect-row-9-3">
<p>CDA11323</p>
</div>
<div class="elect-row-9-4">
<p>CDA11323</p>
</div>
<!-- 第 10 行 -->
<div class="elect-row-10-1">
<p>CDA11323</p>
</div>
<div class="elect-row-10-2">
<p>CDA11323</p>
</div>
<div class="elect-row-10-3">
<p>CDA11323</p>
</div>
<div class="elect-row-10-4">
<p>CDA11323</p>
</div>
<div class="elect-row-10-5">
<p>CDA11323</p>
</div>
<!-- 第 11 行 -->
<div class="elect-row-11-1">
<p>CDA11323</p>
</div>
<div class="elect-row-11-2">
<p>CDA11323</p>
</div>
<div class="elect-row-11-3">
<p>CDA11323</p>
</div>
<div class="elect-row-11-4">
<p>CDA11323</p>
</div>
<div class="elect-row-11-5">
<p>CDA11323</p>
</div>
<!-- 第 12 行 -->
<div class="elect-row-12-1">
<p>CDA11323</p>
</div>
<div class="elect-row-12-2">
<p>CDA11323</p>
</div>
<div class="elect-row-12-3">
<p>CDA11323</p>
</div>
<div class="elect-row-12-4">
<p>CDA11323</p>
</div>
<div class="elect-row-12-5">
<p>CDA11323</p>
</div>
<!-- 第 13 行 -->
<div class="elect-row-13-1">
<p>CDA11323</p>
</div>
<div class="elect-row-13-2">
<p>CDA11323</p>
</div>
<div class="elect-row-13-3">
<p>CDA11323</p>
</div>
<div class="elect-row-13-4">
<p>CDA11323</p>
</div>
<div class="elect-row-13-5">
<p>CDA11323</p>
</div>
<Tooltip
ref="toolRef"
:query="query"
></Tooltip>
</div>
</div> </div>
</template> </template>
<script> <script>
export default { import Tooltip from './Tooltip'
data () { export default {
return {} components: {
Tooltip
},
data () {
return {
query: {}
}
},
methods: {
clickBtn (row) {
this.$refs.toolRef.$refs.tooltip.style.visibility = 'visible'
let left = window.event.clientX
let top = window.event.clientY
this.$refs.toolRef.$refs.tooltip.style.top = top - 100 + 'px'
this.$refs.toolRef.$refs.tooltip.style.left = left - 100 + 'px'
this.query = {
name: '111',
code: '222'
}
} }
} }
}
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.page-pack { .page-pack {
min-height: 100%; min-height: 100%;
background: rgba(0, 7, 12, 1); background: rgba(0, 7, 12, 1);
.elect-content {
position: relative;
margin: 0 auto;
width: 1600px;
height: 900px;
background: url('../../../assets/images/Monitor/monitor_electrophoresis.png') no-repeat;
.elect-row-1-1,
.elect-row-1-2,
.elect-row-1-3,
.elect-row-2-1,
.elect-row-2-2,
.elect-row-2-3,
.elect-row-3-1,
.elect-row-3-2,
.elect-row-3-3,
.elect-row-4-1,
.elect-row-4-2,
.elect-row-4-3,
.elect-row-5-1,
.elect-row-5-2,
.elect-row-5-3,
.elect-row-6-1,
.elect-row-6-2,
.elect-row-6-3,
.elect-row-6-4,
.elect-row-7-1,
.elect-row-7-2,
.elect-row-7-3,
.elect-row-8-1,
.elect-row-8-2,
.elect-row-8-3,
.elect-row-9-1,
.elect-row-9-2,
.elect-row-9-3,
.elect-row-9-4,
.elect-row-10-1,
.elect-row-10-2,
.elect-row-10-3,
.elect-row-10-4,
.elect-row-10-5,
.elect-row-11-1,
.elect-row-11-2,
.elect-row-11-3,
.elect-row-11-4,
.elect-row-11-5,
.elect-row-12-1,
.elect-row-12-2,
.elect-row-12-3,
.elect-row-12-4,
.elect-row-12-5,
.elect-row-13-1,
.elect-row-13-2,
.elect-row-13-3,
.elect-row-13-4,
.elect-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
.elect-row-1-1,
.elect-row-1-2 {
top: 165px;
}
.elect-row-1-3 {
top: 180px;
}
// ?第一行 left
.elect-row-1-1,
.elect-row-2-1,
.elect-row-3-1,
.elect-row-4-1,
.elect-row-5-1,
.elect-row-6-1,
.elect-row-7-1,
.elect-row-8-1 {
left: 680px;
}
.elect-row-1-2,
.elect-row-2-2,
.elect-row-3-2,
.elect-row-4-2,
.elect-row-5-2,
.elect-row-6-2,
.elect-row-7-2,
.elect-row-8-2 {
left: 915px;
}
.elect-row-1-3,
.elect-row-2-3,
.elect-row-3-3,
.elect-row-4-3,
.elect-row-8-3 {
left: 1090px;
}
.elect-row-5-3,
.elect-row-6-3,
.elect-row-6-4,
.elect-row-7-3 {
left: 1130px;
}
// ?第二行top
.elect-row-2-1 {
top: 210px;
}
.elect-row-2-2 {
top: 240px;
}
.elect-row-2-3 {
top: 230px;
}
// ?第三行top
.elect-row-3-1 {
top: 255px;
}
.elect-row-3-2 {
top: 290px;
}
.elect-row-3-3 {
top: 278px;
}
// ?第四行
.elect-row-4-1 {
top: 342px;
}
.elect-row-4-2 {
top: 338px;
}
.elect-row-4-3 {
top: 325px;
}
// ?第五行
.elect-row-5-1,
.elect-row-5-2 {
top: 386px;
}
.elect-row-5-3 {
top: 370px;
}
// ?第六行
.elect-row-6-1,
.elect-row-6-2 {
top: 435px;
}
.elect-row-6-3 {
top: 405px;
}
.elect-row-6-4 {
top: 440px;
}
// ?第七行
.elect-row-7-1,
.elect-row-7-2,
.elect-row-7-3 {
top: 480px;
}
// ?第八行
.elect-row-8-1,
.elect-row-8-2,
.elect-row-8-3 {
top: 542px;
}
// ?第九行
.elect-row-9-1,
.elect-row-9-2,
.elect-row-9-3,
.elect-row-9-4 {
top: 596px;
}
.elect-row-9-1,
.elect-row-10-1,
.elect-row-11-1,
.elect-row-12-1,
.elect-row-13-1 {
left: 420px;
}
.elect-row-9-2 {
left: 725px;
}
.elect-row-9-3 {
left: 960px;
}
.elect-row-9-4 {
left: 1130px;
}
// ?第十行
.elect-row-10-1 {
top: 640px;
}
.elect-row-10-2,
.elect-row-10-3,
.elect-row-10-4,
.elect-row-10-5 {
top: 675px;
}
.elect-row-10-2,
.elect-row-11-2,
.elect-row-12-2 {
left: 660px;
}
.elect-row-10-3,
.elect-row-11-3 {
left: 797px;
}
.elect-row-10-4,
.elect-row-11-4 {
left: 935px;
}
.elect-row-10-5,
.elect-row-12-5 {
left: 1095px;
}
// ?第十一行
.elect-row-11-1 {
top: 685px;
}
.elect-row-11-2,
.elect-row-11-3,
.elect-row-11-4,
.elect-row-11-5 {
top: 732px;
}
.elect-row-11-5,
.elect-row-13-5 {
left: 1137px;
}
// ?第十二行
.elect-row-12-1 {
top: 729px;
}
.elect-row-12-2,
.elect-row-12-3,
.elect-row-12-4,
.elect-row-12-5 {
top: 782px;
}
.elect-row-12-3,
.elect-row-13-3 {
left: 840px;
}
.elect-row-12-4,
.elect-row-13-4 {
left: 975px;
}
// ?第十三行
.elect-row-13-1,
.elect-row-13-2,
.elect-row-13-3,
.elect-row-13-4,
.elect-row-13-5 {
top: 825px;
}
.elect-row-13-2 {
left: 708px;
}
} }
}
</style> </style>
src/views/Monitor/components/Tooltip.vue 0 → 100644
View file @ b291ef13
<template>
<div
class="tooltip"
ref="tooltip"
>
<p><span>销售订单号: </span><span>销售订单号</span></p>
<p><span>主计划工单号: </span><span>SCA11233</span></p>
<p><span>车间计划工单号: </span><span>SCA11233</span></p>
<p><span>车型: </span><span>SCA11233</span></p>
<p><span>订单数量: </span><span>SCA11233</span></p>
<p><span>单位: </span><span>SCA11233</span></p>
<p><span>车间: </span><span>SCA11233</span></p>
<p><span>产线: </span><span>SCA11233</span></p>
<p><span>计划完工时间: </span><span>SCA11233</span></p>
<div
class="close-btn"
@click="closeTooltip"
>
<i class="el-icon-circle-close"></i>
</div>
</div>
</template>
<script>
/**
* @author MARS <wangyunfan@vtstar.net>
* @fileoverview Tooltip封装
*/
export default {
props: {
query: {
type: Object,
default: () => {}
}
},
data () {
return {
data: {}
}
},
watch: {
query (v) {
this.data = _.cloneDeep(v)
console.log(this.data)
}
},
methods: {
closeTooltip () {
this.$refs.tooltip.style.visibility = 'hidden'
}
}
}
</script>
<style lang="scss" scoped>
.tooltip {
position: absolute;
padding: 20px 0 0 0;
width: 260px;
height: 233px;
border-radius: 9px;
background: #000000;
opacity: 0.8;
color: #ffffff;
visibility: hidden;
p {
margin: 5px 0;
font-size: 14px;
font-weight: bold;
span:nth-child(1) {
width: 120px;
float: left;
text-align: right;
}
span:nth-child(2) {
margin-left: 15px;
}
}
.close-btn {
position: relative;
top: 15px;
cursor: pointer;
text-align: center;
color: #ffffff;
font-weight: bold;
font-size: 18px;
}
}
</style>
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