|
|
<template>
|
|
|
<div class="home">
|
|
|
<div class="content" v-if="isBegin">
|
|
|
<img style="width: 100%;" :src="imageList[current]" alt="">
|
|
|
<div class="text">
|
|
|
<img class="success" src="../assets/success.png" alt="" v-if="isSuccessed">
|
|
|
<div class="title">电气</div>
|
|
|
<div class="tips">{{ massage }}</div>
|
|
|
</div>
|
|
|
<template v-if="current == 0">
|
|
|
<a-tooltip trigger="click" placement="left" :align="{
|
|
|
targetOffset: ['0%','0%'],
|
|
|
}">
|
|
|
<template slot="title">
|
|
|
<div class="tips-text">围墙基础、墙体及压顶变形缝未贯通。</div>
|
|
|
</template>
|
|
|
<div class="step image1-1" @click="find(1)">
|
|
|
<img style="width: 0.35rem;" src="../assets/1-1.png" alt="" v-if="findList.includes(1)">
|
|
|
</div>
|
|
|
</a-tooltip>
|
|
|
<a-tooltip trigger="click" placement="topRight" :align="{
|
|
|
targetOffset: ['0%','0%'],
|
|
|
}">
|
|
|
<template slot="title">
|
|
|
<div class="tips-text">建筑物沉降观测标志布置标高不足、固定不牢固。 </div>
|
|
|
</template>
|
|
|
<div class="step image1-2" @click="find(2)">
|
|
|
<img style="width: 0.3rem;" src="../assets/1-2.png" alt="" v-if="findList.includes(2)">
|
|
|
</div>
|
|
|
</a-tooltip>
|
|
|
<a-tooltip trigger="click" placement="leftBottom" :align="{
|
|
|
targetOffset: ['0%','0%'],
|
|
|
}">
|
|
|
<template slot="title">
|
|
|
<div class="tips-text">场区内安全标志牌未按照警告、禁止、指令、提示的顺序先左后右，先上后下排列。</div>
|
|
|
</template>
|
|
|
<div class="step image1-3" @click="find(3)">
|
|
|
<img style="width: 0.4rem;" src="../assets/1-3.png" alt="" v-if="findList.includes(3)">
|
|
|
</div>
|
|
|
</a-tooltip>
|
|
|
<a-tooltip trigger="click" placement="top" :align="{
|
|
|
targetOffset: ['0%','0%'],
|
|
|
}">
|
|
|
<template slot="title">
|
|
|
<div class="tips-text">户外排水管缺失</div>
|
|
|
</template>
|
|
|
<div class="step image1-4" @click="find(4)">
|
|
|
<img style="width: 0.3rem;" src="../assets/1-4.png" alt="" v-if="findList.includes(4)">
|
|
|
</div>
|
|
|
</a-tooltip>
|
|
|
</template>
|
|
|
<template v-else-if="current == 1">
|
|
|
<a-tooltip trigger="click" placement="left" :align="{
|
|
|
targetOffset: ['0%','0%'],
|
|
|
}">
|
|
|
<template slot="title">
|
|
|
<div class="tips-text">封闭母线外壳未采用专门敷设的接地线接地。</div>
|
|
|
</template>
|
|
|
<div class="step image2-1" @click="find(1)">
|
|
|
<img style="width: 0.35rem;" src="../assets/2-1.png" alt="" v-if="findList.includes(1)">
|
|
|
</div>
|
|
|
</a-tooltip>
|
|
|
<a-tooltip trigger="click" placement="rightTop" :align="{
|
|
|
targetOffset: ['0%','0%'],
|
|
|
}">
|
|
|
<template slot="title">
|
|
|
<div class="tips-text">室内消防栓箱内设施配置缺失，栓口不应安装门轴侧； 栓 口中心距地面 小于1.1m</div>
|
|
|
</template>
|
|
|
<div class="step image2-2" @click="find(2)">
|
|
|
<img style="width: 0.4rem;" src="../assets/2-2.png" alt="" v-if="findList.includes(2)">
|
|
|
</div>
|
|
|
</a-tooltip>
|
|
|
<a-tooltip trigger="click" placement="topRight" :align="{
|
|
|
targetOffset: ['0%','0%'],
|
|
|
}">
|
|
|
<template slot="title">
|
|
|
<div class="tips-text">变压器法兰间跨不规范，无跨接线</div>
|
|
|
</template>
|
|
|
<div class="step image2-3" @click="find(3)">
|
|
|
<img style="width: 0.3rem;" src="../assets/2-3.png" alt="" v-if="findList.includes(3)">
|
|
|
</div>
|
|
|
</a-tooltip>
|
|
|
<a-tooltip trigger="click" placement="right" :align="{
|
|
|
targetOffset: ['0%','0%'],
|
|
|
}">
|
|
|
<template slot="title">
|
|
|
<div class="tips-text">爬梯制作安装不符合规范，圆笼箍的大小不统一</div>
|
|
|
</template>
|
|
|
<div class="step image2-4" @click="find(4)">
|
|
|
<img style="width: 0.4rem;" src="../assets/2-4.png" alt="" v-if="findList.includes(4)">
|
|
|
</div>
|
|
|
</a-tooltip>
|
|
|
</template>
|
|
|
<template v-else-if="current == 2">
|
|
|
<a-tooltip trigger="click" placement="left" :align="{
|
|
|
targetOffset: ['0%','-30%'],
|
|
|
}">
|
|
|
<template slot="title">
|
|
|
<div class="tips-text">盘、柜内电缆芯线排列不整齐，备用芯线导体外</div>
|
|
|
</template>
|
|
|
<div class="step image3-1" @click="find(1)">
|
|
|
<img style="width: 0.35rem;" src="../assets/3-1.png" alt="" v-if="findList.includes(1)">
|
|
|
</div>
|
|
|
</a-tooltip>
|
|
|
<a-tooltip trigger="click" placement="topRight" :align="{
|
|
|
targetOffset: ['0%','0%'],
|
|
|
}">
|
|
|
<template slot="title">
|
|
|
<div class="tips-text">保护屏、端子箱等盘、柜内防火封堵工艺不良，封堵不严密。</div>
|
|
|
</template>
|
|
|
<div class="step image3-2" @click="find(2)">
|
|
|
<img style="width: 0.3rem;" src="../assets/3-2.png" alt="" v-if="findList.includes(2)">
|
|
|
</div>
|
|
|
</a-tooltip>
|
|
|
<a-tooltip trigger="click" placement="topRight" :align="{
|
|
|
targetOffset: ['0%','0%'],
|
|
|
}">
|
|
|
<template slot="title">
|
|
|
<div class="tips-text">没有两点接电</div>
|
|
|
</template>
|
|
|
<div class="step image3-3" @click="find(3)">
|
|
|
<img style="width: 0.3rem;" src="../assets/3-3.png" alt="" v-if="findList.includes(3)">
|
|
|
</div>
|
|
|
</a-tooltip>
|
|
|
<a-tooltip trigger="click" placement="top" :align="{
|
|
|
targetOffset: ['0%','0%'],
|
|
|
}">
|
|
|
<template slot="title">
|
|
|
<div class="tips-text">预埋件未设膨胀缝，短边大于 300mm 的预埋件，</div>
|
|
|
</template>
|
|
|
<div class="step image3-4" @click="find(4)">
|
|
|
<img style="width: 0.3rem;" src="../assets/3-4.png" alt="" v-if="findList.includes(4)">
|
|
|
</div>
|
|
|
</a-tooltip>
|
|
|
<a-tooltip trigger="click" placement="bottom" :align="{
|
|
|
targetOffset: ['0%','0%'],
|
|
|
}">
|
|
|
<template slot="title">
|
|
|
<div class="tips-text">柜子的高度不一致</div>
|
|
|
</template>
|
|
|
<div class="step image3-5" @click="find(5)">
|
|
|
<img style="width: 0.25rem;" src="../assets/3-5.png" alt="" v-if="findList.includes(5)">
|
|
|
</div>
|
|
|
</a-tooltip>
|
|
|
<a-tooltip trigger="click" placement="top" :align="{
|
|
|
targetOffset: ['0%','0%'],
|
|
|
}">
|
|
|
<template slot="title">
|
|
|
<div class="tips-text">地板边缘没有达到大于1/2板面积的要求</div>
|
|
|
</template>
|
|
|
<div class="step image3-6" @click="find(6)">
|
|
|
<img style="width: 0.35rem;" src="../assets/3-6.png" alt="" v-if="findList.includes(6)">
|
|
|
</div>
|
|
|
</a-tooltip>
|
|
|
</template>
|
|
|
<div class="bottom">
|
|
|
<div :class="current == 0 ? 'button disabled' : 'button'" @click="prev">上一篇</div>
|
|
|
<div class="button" @click="publish">公布答案</div>
|
|
|
<div class="button" @click="refresh">刷新</div>
|
|
|
<div :class="current == imageList.length - 1 ? 'button disabled' : 'button'" @click="next">下一篇</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="content" v-else>
|
|
|
<img style="width: 100%;" src="../assets/home-bg.jpg" alt="">
|
|
|
<div class="home-title">安全质量标准化常见问题通病库互动小程序(电气)</div>
|
|
|
<div class="entry" @click="isBegin = true">
|
|
|
<span>进入程序</span>
|
|
|
<img src="../assets/right.png" alt="">
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
export default {
|
|
|
// eslint-disable-next-line vue/multi-word-component-names
|
|
|
name: "MyHome",
|
|
|
data() {
|
|
|
// 这里存放数据
|
|
|
return {
|
|
|
isBegin: false,
|
|
|
imageList: [
|
|
|
require('../assets/bg1.png'),
|
|
|
require('../assets/bg2.png'),
|
|
|
require('../assets/bg3.png'),
|
|
|
],
|
|
|
current: 0,
|
|
|
isSuccessed: false,
|
|
|
findList: [],
|
|
|
massage: '请找找看，下面有几处违章？',
|
|
|
fourList: [0,1],
|
|
|
sixList: [2],
|
|
|
};
|
|
|
},
|
|
|
methods: {
|
|
|
prev() {
|
|
|
if (this.current === 0) {
|
|
|
return
|
|
|
}
|
|
|
this.current -= 1
|
|
|
this.refresh()
|
|
|
},
|
|
|
next() {
|
|
|
if (this.current === this.imageList.length - 1) {
|
|
|
return
|
|
|
}
|
|
|
this.current += 1
|
|
|
this.refresh()
|
|
|
},
|
|
|
find(val) {
|
|
|
if (!this.findList.includes(val)) {
|
|
|
this.findList.push(val)
|
|
|
}
|
|
|
if ((this.findList.length == 4 && this.fourList.includes(this.current)) || (this.findList.length == 6 && this.sixList.includes(this.current))) {
|
|
|
this.publish()
|
|
|
}
|
|
|
},
|
|
|
publish() {
|
|
|
this.isSuccessed = true
|
|
|
this.findList = this.findList.length == 4 ? [1,2,3,4] : [1,2,3,4,5,6]
|
|
|
this.massage = "恭喜您，找到了所有的问题点"
|
|
|
},
|
|
|
refresh() {
|
|
|
this.isSuccessed = false
|
|
|
this.findList = []
|
|
|
this.massage = "请找找看，下面有几处违章？"
|
|
|
}
|
|
|
},
|
|
|
// 生命周期 - 挂载完成（可以访问DOM元素）
|
|
|
mounted() { },
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
|
|
.home {
|
|
|
position: relative;
|
|
|
display: flex;
|
|
|
justify-content: center;
|
|
|
align-items: center;
|
|
|
min-height: 100vh;
|
|
|
background-color: whitesmoke;
|
|
|
}
|
|
|
.content {
|
|
|
overflow: 'hidden';
|
|
|
position: relative;
|
|
|
width: 100%;
|
|
|
}
|
|
|
|
|
|
.text {
|
|
|
position: absolute;
|
|
|
z-index: 1;
|
|
|
left: 0px;
|
|
|
top: 0px;
|
|
|
width: 100%;
|
|
|
height: 30%;
|
|
|
padding-left: 8%;
|
|
|
padding-top: 3%;
|
|
|
color: #fff;
|
|
|
background: linear-gradient(180deg, rgba(0, 0, 0, 0.6) 16%, rgba(0, 0, 0, 0) 100%);
|
|
|
letter-spacing: 0.03rem;
|
|
|
box-sizing: border-box;
|
|
|
}
|
|
|
|
|
|
.home-title {
|
|
|
position: absolute;
|
|
|
z-index: 1;
|
|
|
top: 15.4%;
|
|
|
left: 0;
|
|
|
right: 0;
|
|
|
width: 80%;
|
|
|
margin: 0 auto;
|
|
|
text-align: center;
|
|
|
font-size: 0.54rem;
|
|
|
color: #fff;
|
|
|
}
|
|
|
.entry {
|
|
|
position: absolute;
|
|
|
left: 0px;
|
|
|
right: 0;
|
|
|
bottom: 20%;
|
|
|
margin: 0 auto;
|
|
|
width: 20%;
|
|
|
height: 10%;
|
|
|
font-size: 0.26rem;
|
|
|
color: #000;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
text-align: center;
|
|
|
border-radius: 0.06rem;
|
|
|
background: #ECD8A4;
|
|
|
cursor: pointer;
|
|
|
}
|
|
|
|
|
|
.entry span {
|
|
|
margin-right: 0.1rem;
|
|
|
}
|
|
|
|
|
|
.entry img {
|
|
|
width: 0.16rem;
|
|
|
}
|
|
|
|
|
|
.success {
|
|
|
float: left;
|
|
|
margin-right: 0.16rem;
|
|
|
margin-top: -0.1rem;
|
|
|
width: 1.4rem;
|
|
|
}
|
|
|
.text .title {
|
|
|
font-size: 0.28rem;
|
|
|
line-height: 0.3rem;
|
|
|
}
|
|
|
.text .tips {
|
|
|
margin-top: 0.08rem;
|
|
|
font-size: 0.15rem;
|
|
|
}
|
|
|
.tips-title {
|
|
|
font-size: 0.18rem;
|
|
|
}
|
|
|
.tips-text {
|
|
|
font-size: 0.13rem;
|
|
|
}
|
|
|
.step {
|
|
|
position: absolute;
|
|
|
z-index: 8;
|
|
|
}
|
|
|
.image1-1 {
|
|
|
top: 22%;
|
|
|
right: 16.7%;
|
|
|
width: 0.8rem;
|
|
|
height: 1.2rem;
|
|
|
display: flex;
|
|
|
justify-content: start;
|
|
|
align-items: center;
|
|
|
}
|
|
|
|
|
|
.image1-2 {
|
|
|
bottom: 34%;
|
|
|
left: 40.9%;
|
|
|
width: 0.8rem;
|
|
|
height: 1.3rem;
|
|
|
display: flex;
|
|
|
justify-content: end;
|
|
|
align-items: start;
|
|
|
}
|
|
|
|
|
|
.image1-3 {
|
|
|
bottom: 17%;
|
|
|
right: 14.9%;
|
|
|
width: 2.4rem;
|
|
|
height: 1.3rem;
|
|
|
display: flex;
|
|
|
justify-content: start;
|
|
|
align-items: end;
|
|
|
}
|
|
|
|
|
|
.image1-4 {
|
|
|
bottom: 21%;
|
|
|
left: 21.9%;
|
|
|
width: 1.4rem;
|
|
|
height: 1.9rem;
|
|
|
display: flex;
|
|
|
justify-content: center;
|
|
|
align-items: start;
|
|
|
}
|
|
|
|
|
|
.image2-1 {
|
|
|
top: 15%;
|
|
|
right: 17.9%;
|
|
|
width: 1.1rem;
|
|
|
height: 1.5rem;
|
|
|
display: flex;
|
|
|
justify-content: start;
|
|
|
align-items: center;
|
|
|
}
|
|
|
|
|
|
.image2-2 {
|
|
|
bottom: 19%;
|
|
|
right: 34.9%;
|
|
|
width: 1.1rem;
|
|
|
height: 1.1rem;
|
|
|
display: flex;
|
|
|
justify-content: end;
|
|
|
align-items: center;
|
|
|
}
|
|
|
|
|
|
.image2-3 {
|
|
|
top: 32%;
|
|
|
left: 29.9%;
|
|
|
width: 1.1rem;
|
|
|
height: 1rem;
|
|
|
display: flex;
|
|
|
justify-content: end;
|
|
|
align-items: start;
|
|
|
}
|
|
|
|
|
|
.image2-4 {
|
|
|
bottom: 37%;
|
|
|
left: 10.9%;
|
|
|
width: 0.9rem;
|
|
|
height: 0.8rem;
|
|
|
display: flex;
|
|
|
justify-content: start;
|
|
|
align-items: end;
|
|
|
}
|
|
|
|
|
|
.image3-1 {
|
|
|
top: 20%;
|
|
|
left: 7.9%;
|
|
|
width: 1.1rem;
|
|
|
height: 1.3rem;
|
|
|
display: flex;
|
|
|
justify-content: end;
|
|
|
align-items: end;
|
|
|
}
|
|
|
|
|
|
.image3-2 {
|
|
|
bottom: 27%;
|
|
|
right: 40.9%;
|
|
|
width: 1.2rem;
|
|
|
height: 0.7rem;
|
|
|
display: flex;
|
|
|
justify-content: end;
|
|
|
align-items: center;
|
|
|
}
|
|
|
|
|
|
.image3-3 {
|
|
|
bottom: 13%;
|
|
|
right: 10.9%;
|
|
|
width: 0.7rem;
|
|
|
height: 0.5rem;
|
|
|
display: flex;
|
|
|
justify-content: start;
|
|
|
align-items: start;
|
|
|
}
|
|
|
|
|
|
.image3-4 {
|
|
|
bottom: 15%;
|
|
|
left: 7.8%;
|
|
|
width: 5.3rem;
|
|
|
height: 0.6rem;
|
|
|
display: flex;
|
|
|
justify-content: center;
|
|
|
align-items: end;
|
|
|
}
|
|
|
|
|
|
.image3-5 {
|
|
|
top: 10%;
|
|
|
right: 29.9%;
|
|
|
width: 1.1rem;
|
|
|
height: 0.5rem;
|
|
|
display: flex;
|
|
|
justify-content: start;
|
|
|
align-items: end;
|
|
|
}
|
|
|
|
|
|
.image3-6 {
|
|
|
bottom: 16%;
|
|
|
right: 19.9%;
|
|
|
width: 0.8rem;
|
|
|
height: 0.5rem;
|
|
|
display: flex;
|
|
|
justify-content: start;
|
|
|
align-items: center;
|
|
|
}
|
|
|
|
|
|
.bottom {
|
|
|
position: absolute;
|
|
|
z-index: 10;
|
|
|
opacity: 0.5;
|
|
|
width: 100%;
|
|
|
height: 14.4%;
|
|
|
bottom: 0;
|
|
|
display: flex;
|
|
|
justify-content: space-evenly;
|
|
|
align-items: start;
|
|
|
background: linear-gradient(0deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 100%);
|
|
|
}
|
|
|
.bottom .button {
|
|
|
font-size: 0.15rem;
|
|
|
width: 17%;
|
|
|
height: 54.3%;
|
|
|
color: #fff;
|
|
|
background-color: #D04010;
|
|
|
text-align: center;
|
|
|
border-radius: 60px;
|
|
|
line-height: 3;
|
|
|
}
|
|
|
.bottom .button.disabled {
|
|
|
background-color: #B0B0B0;
|
|
|
}
|
|
|
</style>
|