305 lines
8.3 KiB
Vue
305 lines
8.3 KiB
Vue
<template>
|
||
<!-- <div class="home"> -->
|
||
<!-- <div class="box" @mouseout="out" @mouseover="over">
|
||
<div class="boxChild" v-for="(item, index) in list" v-show="listIndex === index"
|
||
:key="index">
|
||
<div class="fathBox"></div>
|
||
<div class="fath2Box">
|
||
<div style="margin-left: 21px;margin-top: 8px;">
|
||
<span style="color:#82DDDB;">派单时间：</span>
|
||
<span style="color:#fff;">{{item.value}}</span>
|
||
</div>
|
||
<div style="margin-left: 21px;margin-top: 8px;">
|
||
<span style="color:#82DDDB;width: 71px; text-align-last: justify;display: inline-block;">整改人：</span>
|
||
<span style="color:#fff;">陈晓红</span>
|
||
</div>
|
||
<div style="margin-left: 21px;margin-top: 8px;">
|
||
<span style="color:#82DDDB;width: 71px; text-align-last: justify;display: inline-block;">状态：</span>
|
||
<span style="color:#EAA505;">待处理</span>
|
||
</div>
|
||
<div style="margin-left: 21px;margin-top: 8px;">
|
||
<span style="color:#82DDDB;width: 71px; text-align-last: justify;display: inline-block;">隐患内容：</span>
|
||
<span style="color:#fff;">现场作业准备</span>
|
||
</div>
|
||
<div style="margin-left: 21px;margin-top: 8px;">
|
||
<span style="color:#82DDDB;width: 71px; text-align-last: justify;display: inline-block;">隐患内容：</span>
|
||
<span style="color:#fff;">上方悬挂摇晃</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<p class="left" @click="changePage(prevIndex)"></p>
|
||
<p class="right" @click="changePage(nextIndex)"></p>
|
||
</div> -->
|
||
<!-- </div> -->
|
||
<el-carousel indicator-position="1000" :autoplay="true" ref="carousel">
|
||
<el-carousel-item v-for="(item, index) in list" :key="index">
|
||
<div class="home">
|
||
<div class="box">
|
||
<div class="boxChild">
|
||
<div class="fathBox"></div>
|
||
<div class="fath2Box">
|
||
<div style="margin-left: 21px; margin-top: 8px">
|
||
<span style="color: #82dddb">派单时间：</span>
|
||
<span style="color: #fff">{{ item.allocateDate }}</span>
|
||
</div>
|
||
<div style="margin-left: 21px; margin-top: 8px">
|
||
<span
|
||
style="
|
||
color: #82dddb;
|
||
width: 71px;
|
||
text-align-last: justify;
|
||
display: inline-block;
|
||
"
|
||
>整改人：</span
|
||
>
|
||
<span style="color: #fff">{{ item.rectifier }}</span>
|
||
</div>
|
||
<div style="margin-left: 21px; margin-top: 8px">
|
||
<span
|
||
style="
|
||
color: #82dddb;
|
||
width: 71px;
|
||
text-align-last: justify;
|
||
display: inline-block;
|
||
"
|
||
>状态：</span
|
||
>
|
||
<span style="color: #eaa505">{{ item.status }}</span>
|
||
</div>
|
||
<div style="margin-left: 21px; margin-top: 8px">
|
||
<span
|
||
style="
|
||
color: #82dddb;
|
||
width: 71px;
|
||
text-align-last: justify;
|
||
display: inline-block;
|
||
"
|
||
>隐患内容：</span
|
||
>
|
||
<span style="color: #fff">{{ item.troubleContent }}</span>
|
||
</div>
|
||
<div style="margin-left: 21px; margin-top: 8px">
|
||
<span
|
||
style="
|
||
color: #82dddb;
|
||
width: 71px;
|
||
vertical-align: top;
|
||
text-align-last: justify;
|
||
display: inline-block;
|
||
"
|
||
>隐患内容：</span
|
||
>
|
||
<span style="color: #fff; display: inline-block; width: 90px">{{
|
||
item.troubleMark
|
||
}}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<p class="left" @click="changePage(1)"></p>
|
||
<p class="right" @click="changePage(2)"></p>
|
||
</div>
|
||
</el-carousel-item>
|
||
</el-carousel>
|
||
</template>
|
||
|
||
<script>
|
||
import { getResolveTroublePage } from "../api/api";
|
||
export default {
|
||
components: {},
|
||
props: {},
|
||
data() {
|
||
return {
|
||
list: [],
|
||
listIndex: 0, //默认显示第几张图片
|
||
timer: null, //定时器
|
||
};
|
||
},
|
||
computed: {
|
||
//上一张
|
||
prevIndex() {
|
||
if (this.listIndex == 0) {
|
||
return this.list.length - 1;
|
||
} else {
|
||
return this.listIndex - 1;
|
||
}
|
||
},
|
||
//下一张
|
||
nextIndex() {
|
||
if (this.listIndex == this.list.length - 1) {
|
||
return 0;
|
||
} else {
|
||
return this.listIndex + 1;
|
||
}
|
||
},
|
||
},
|
||
methods: {
|
||
getData() {
|
||
getResolveTroublePage({
|
||
projectId: sessionStorage.getItem("projectId"),
|
||
size: 100,
|
||
current: 1,
|
||
}).then((res) => {
|
||
this.list = Object.keys(res.data.data.records).map((item, index) => {
|
||
if (res.data.data.records[item].status == 0) {
|
||
res.data.data.records[item].status = "未完成";
|
||
} else {
|
||
res.data.data.records[item].status = "已完成";
|
||
}
|
||
return {
|
||
allocateDate: res.data.data.records[item].allocateDate,
|
||
rectifier: res.data.data.records[item].rectifier,
|
||
status: res.data.data.records[item].status,
|
||
troubleContent: res.data.data.records[item].troubleContent,
|
||
troubleMark: res.data.data.records[item].troubleMark,
|
||
};
|
||
});
|
||
});
|
||
},
|
||
changePage(index) {
|
||
if (index == 1) {
|
||
this.$refs.carousel.prev();
|
||
} else {
|
||
this.$refs.carousel.next();
|
||
}
|
||
// this.listIndex = index;
|
||
},
|
||
//移除
|
||
out() {
|
||
this.setTimer();
|
||
},
|
||
//移入
|
||
over() {
|
||
clearInterval(this.timer);
|
||
},
|
||
//1秒切图
|
||
setTimer() {
|
||
this.timer = setInterval(() => {
|
||
this.listIndex++;
|
||
if (this.listIndex == this.list.length) {
|
||
this.listIndex = 0;
|
||
}
|
||
}, 1000);
|
||
},
|
||
},
|
||
created() {
|
||
//定时器
|
||
this.setTimer();
|
||
},
|
||
mounted() {
|
||
this.getData();
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style scoped lang="less">
|
||
@marginLeft: 50px;
|
||
.home {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-left: @marginLeft;
|
||
.boxChild {
|
||
display: flex;
|
||
|
||
.fathBox {
|
||
width: 152px;
|
||
height: 146px;
|
||
background: url("~@/assets/pic/23.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
}
|
||
|
||
.fath2Box {
|
||
span {
|
||
font-size: 14px;
|
||
font-family: SourceHanSansCN-Medium, SourceHanSansCN;
|
||
font-weight: 500;
|
||
}
|
||
}
|
||
}
|
||
|
||
// .box {
|
||
// position: relative;
|
||
// width: 30px;
|
||
// height: 30px;
|
||
// img {
|
||
// width: 100%;
|
||
// height: 100%;
|
||
// z-index: 100;
|
||
// }
|
||
// p {
|
||
// cursor: pointer;
|
||
// color: white;
|
||
// font-size: 28px;
|
||
// display: flex;
|
||
// justify-content: center;
|
||
// align-items: center;
|
||
// width: 50px;
|
||
// height: 50px;
|
||
// background: rgba(0, 0, 0, 0.5);
|
||
// }
|
||
.left {
|
||
position: absolute;
|
||
top: 51px;
|
||
left: 10px;
|
||
width: 23px;
|
||
height: 32px;
|
||
background: url("~@/assets/pic/left.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
cursor: pointer;
|
||
|
||
@media only screen and (max-height: 1000px) {
|
||
top: 31px;
|
||
}
|
||
}
|
||
|
||
.right {
|
||
position: absolute;
|
||
top: 51px;
|
||
width: 23px;
|
||
background: url("~@/assets/pic/right.png") no-repeat;
|
||
height: 32px;
|
||
right: 10px;
|
||
cursor: pointer;
|
||
|
||
@media only screen and (max-height: 1000px) {
|
||
top: 31px;
|
||
}
|
||
}
|
||
|
||
// ul {
|
||
// list-style: none;
|
||
// display: flex;
|
||
// justify-content: space-around;
|
||
// align-items: center;
|
||
// position: absolute;
|
||
// width: 150px;
|
||
// height: 20px;
|
||
// top: 90%;
|
||
// right: 35%;
|
||
// .color {
|
||
// background: red;
|
||
// color: red;
|
||
// }
|
||
// li {
|
||
// cursor: pointer;
|
||
// width: 10px;
|
||
// height: 10px;
|
||
// background: white;
|
||
// border-radius: 50%;
|
||
// }
|
||
// }
|
||
// }
|
||
}
|
||
</style>
|
||
<style>
|
||
.el-carousel__arrow--left,
|
||
.el-carousel__arrow--right {
|
||
display: none;
|
||
}
|
||
.el-carousel__container {
|
||
position: relative;
|
||
height: 180px !important;
|
||
}
|
||
</style>
|