<template>
|
<div class="containerQYScrool">
|
<div class="DataTitle">
|
<div class="Dtitle">隐患照片</div>
|
<div class="Dtitle">检查人</div>
|
<div class="Dtitle" style="border-left: 0px;border-right:0px ;">隐患描述</div>
|
<div class="Dtitle">隐患类别</div>
|
<div class="Dtitle">整改时间</div>
|
</div>
|
<vueSeamlessScroll :data="list" class="seamless-warp warp" :class-option="defaultOption">
|
<div class="DataTitleMsg" v-for="item in list">
|
<div class="Dtitle Dtitle3" :title="item.picture">
|
<img :src="item.picture" /></div>
|
<div class="Dtitle Dtitle1" :title="item.name">
|
{{item.name.length>23?item.name.substring(0,23):item.name}}</div>
|
<div class="Dtitle Dtitle2" :title="item.description">
|
{{item.description.length>23?item.description.substring(0,23):item.description}}</div>
|
<div class="Dtitle Dtitle3" :title="item.checkTime">
|
{{item.checkTime.length>23?item.checkTime.substring(0,23):item.checkTime}}</div>
|
<div class="Dtitle Dtitle3" :title="item.finishTime">
|
{{item.finishTime.length>23?item.finishTime.substring(0,23):item.finishTime}}</div>
|
|
</div>
|
</vueSeamlessScroll>
|
</div>
|
</template>
|
|
<script>
|
import vueSeamlessScroll from 'vue-seamless-scroll'
|
export default {
|
components: {
|
vueSeamlessScroll
|
},
|
data() {
|
return {
|
list: [{
|
name: '李振军',
|
description: '还蒸二车间四工段16号炉真空泵排烟软管未接好',
|
checkTime: '一般隐患',
|
picture:require("../../../assets/images/企业隐患照片/1.png"),
|
finishTime:'2022/5/30'
|
},
|
{
|
name: '张帅',
|
description: '还蒸二车间六工段一楼走廊处电线未穿管',
|
checkTime: '一般隐患',
|
picture:require("../../../assets/images/企业隐患照片/2.png"),
|
finishTime:'2022/5/30'
|
},
|
{
|
name: '张浩',
|
description: '硫酰氯生产车间SIS阀门及截止阀缺少开、关标识',
|
checkTime: '一般隐患',
|
picture:require("../../../assets/images/企业隐患照片/3.png"),
|
finishTime:'2022/6/20'
|
},
|
{
|
name: '张浩',
|
description: '二氧化硫灌装车间室内消火栓未明确负责人',
|
checkTime: '一般隐患',
|
picture:require("../../../assets/images/企业隐患照片/4.png"),
|
finishTime:'2022/6/20'
|
},
|
{
|
name: '高佳奇',
|
description: '振动筛平台无盖板，存在安全隐患',
|
checkTime: '一般隐患',
|
picture:require("../../../assets/images/企业隐患照片/5.png"),
|
finishTime:'2022/6/9'
|
},
|
{
|
name: '高佳奇',
|
description: '振动筛平台西侧pp水管球阀漏水',
|
checkTime: '一般隐患',
|
picture:require("../../../assets/images/企业隐患照片/6.png"),
|
finishTime:'2022/6/2'
|
},
|
{
|
name: '叶策',
|
description: '装配车间切割机边角废料堵占安全通道 ',
|
checkTime: '一般隐患',
|
picture:require("../../../assets/images/企业隐患照片/7.png"),
|
finishTime:'2022/7/4'
|
},
|
],
|
}
|
|
|
},
|
|
computed: {
|
defaultOption() {
|
return {
|
step: 0.2, // 数值越大速度滚动越快
|
limitMoveNum: 2, // 开始无缝滚动的数据量 this.dataList.length
|
hoverStop: true, // 是否开启鼠标悬停stop
|
direction: 1, // 0向下 1向上 2向左 3向右
|
openWatch: true, // 开启数据实时监控刷新dom
|
singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
|
singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
|
waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
|
}
|
}
|
|
}
|
|
|
|
|
|
|
}
|
</script>
|
|
<style scoped="scoped" lang="less">
|
.containerQYScrool{
|
height: 100%;
|
width: 100%;
|
}
|
.DataTitle {
|
width: 100%;
|
height: 80px;
|
display: flex;
|
flex-direction: row;
|
align-items: center;
|
justify-content: space-around;
|
|
.Dtitle {
|
width: 33%;
|
height: 100%;
|
font-size: 30px;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
color: #FFFFFF;
|
border: solid 1px aqua;
|
// border-bottom:none ;
|
// border-right: 0;
|
}
|
}
|
|
.warp {
|
position: relative;
|
height: calc(100% - 162px);
|
width: 100%;
|
overflow-y: hidden;
|
}
|
|
|
.DataTitleMsg {
|
width: 100%;
|
height: 220px;
|
display: flex;
|
text-align: center;
|
flex-direction: row;
|
align-items: center;
|
justify-content: space-around;
|
//border: solid 1px #04589A;
|
|
.Dtitle {
|
width: 220px;
|
height: 100%;
|
font-size: 21px;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
color: #FFFFFF;
|
//border-bottom: none;
|
border: solid 1px #1a6caf;
|
|
}
|
|
.Dtitle1 {
|
color: aqua;
|
font-size: 30px;
|
}
|
.Dtitle2 {
|
font-size: 24px;
|
}
|
.Dtitle3 {
|
color: #00A4FF;
|
font-size: 30px;
|
|
}
|
}
|
</style>
|
