修改大屏升降机

dev_xd
haha 2025-05-06 23:36:48 +08:00
parent 8a01cf3856
commit e440d52ebf
3 changed files with 660 additions and 690 deletions

View File

@ -27,25 +27,13 @@
</div> </div>
</div> </div>
<certificate-bar-chart <certificate-bar-chart :data="certificateData" :height="100"></certificate-bar-chart>
:data="certificateData"
:height="100"
></certificate-bar-chart>
<div class="rank-chart" style="height: calc(100% - 224px)"> <div class="rank-chart" style="height: calc(100% - 224px)">
<div class="rank-chart-title">监控列表</div> <div class="rank-chart-title">监控列表</div>
<div class="list-max" style="height: calc(100% - 63px)"> <div class="list-max" style="height: calc(100% - 63px)">
<div <div class="list-min" id="listMin" @mouseout="listMinMouseout" @mouseover="listMinMouseover">
class="list-min" <div class="list-for" :key="i" v-for="(item, i) in listData" @click="onTowerCraneList(i)">
id="listMin"
@mouseout="listMinMouseout"
@mouseover="listMinMouseover"
>
<div
class="list-for"
v-for="(item, i) in listData"
@click="onTowerCraneList(i)"
>
<div :class="index == i ? 'list-con active' : 'list-con'"> <div :class="index == i ? 'list-con active' : 'list-con'">
<div class="list-top"> <div class="list-top">
<div class="list-img"> <div class="list-img">
@ -53,16 +41,13 @@
</div> </div>
<div class="list-info"> <div class="list-info">
<div class="list-info-name"> <div class="list-info-name">
设备名称<span>{{ item.deviceName }}</span> 设备名称
<span>{{ item.deviceName }}</span>
</div> </div>
<div class="list-info-name"> <div class="list-info-name">
设备状态 设备状态
<span class="list-info-state" v-if="item.deviceState != 0" <span class="list-info-state" v-if="item.deviceState != 0">线</span>
>离线</span <span class="list-info-state active" v-if="item.deviceState == 0">线</span>
>
<span class="list-info-state active" v-if="item.deviceState == 0"
>在线</span
>
</div> </div>
</div> </div>
</div> </div>
@ -70,29 +55,34 @@
<el-row> <el-row>
<el-col :span="10"> <el-col :span="10">
<div class="list-details"> <div class="list-details">
司机<span v-cloak>{{ item.driverName }}</span> 司机
<span v-cloak>{{ item.driverName }}</span>
</div> </div>
</el-col> </el-col>
<el-col :span="14"> <el-col :span="14">
<div class="list-details"> <div class="list-details">
电话<span v-cloak>{{ item.driverPhone }}</span> 电话
<span v-cloak>{{ item.driverPhone }}</span>
</div> </div>
</el-col> </el-col>
<el-col :span="10"> <el-col :span="10">
<div class="list-details"> <div class="list-details">
安全员<span v-cloak>{{ item.safetyOfficerName }}</span> 安全员
<span v-cloak>{{ item.safetyOfficerName }}</span>
</div> </div>
</el-col> </el-col>
<el-col :span="14"> <el-col :span="14">
<div class="list-details"> <div class="list-details">
电话<span v-cloak>{{ item.safetyOfficerPhone }}</span> 电话
<span v-cloak>{{ item.safetyOfficerPhone }}</span>
</div> </div>
</el-col> </el-col>
</el-row> </el-row>
</div> </div>
<div class="list-time"> <div class="list-time">
最后一次启用时间<span v-cloak>{{ item.lastEnabledTime }}</span> 最后一次启用时间
<span v-cloak>{{ item.lastEnabledTime }}</span>
</div> </div>
</div> </div>
</div> </div>
@ -176,11 +166,7 @@
</el-col> </el-col>
</el-row> </el-row>
<div class="safe-tower-crane-max"> <div class="safe-tower-crane-max">
<div <div class="safe-tower-crane-min" @mouseout="listMinMouseout" @mouseover="listMinMouseover">
class="safe-tower-crane-min"
@mouseout="listMinMouseout"
@mouseover="listMinMouseover"
>
<el-row> <el-row>
<el-col :span="2"> <el-col :span="2">
<div class="safe-tower-left" @click="safeTowerLeft"></div> <div class="safe-tower-left" @click="safeTowerLeft"></div>
@ -228,20 +214,13 @@
<div class="survey-oil-hr"></div> <div class="survey-oil-hr"></div>
<div class="survey-oil-text">报警类型</div> <div class="survey-oil-text">报警类型</div>
</div> </div>
<div <div class="analyse-number-max" id="afootOverflowType" @mouseout="listMinMouseoutType" @mouseover="listMinMouseoverType">
class="analyse-number-max" <div :key="index" class="glr-login-number-max analyse-num-max" v-for="(item,index) in warningList">
id="afootOverflowType"
@mouseout="listMinMouseoutType"
@mouseover="listMinMouseoverType"
>
<div
class="glr-login-number-max analyse-num-max"
v-for="item in warningList"
>
<div class="glr-login-number-bgd glr-login-number-red-bgd"></div> <div class="glr-login-number-bgd glr-login-number-red-bgd"></div>
<div class="glr-login-number analyse-login-numbe"> <div class="glr-login-number analyse-login-numbe">
<div v-cloak> <div v-cloak>
<img src="images/text_red_spot.png" />{{ item.warnType }} <img src="images/text_red_spot.png" />
{{ item.warnType }}
</div> </div>
<div class="glr-rate-value glr-rate-red-value"> <div class="glr-rate-value glr-rate-red-value">
<span v-cloak>{{ item.warnCount }}</span> <span v-cloak>{{ item.warnCount }}</span>
@ -258,33 +237,17 @@
<div class="analyse-text">正在发生</div> <div class="analyse-text">正在发生</div>
</div> </div>
<div class="afoot-content safe-afoot-content"> <div class="afoot-content safe-afoot-content">
<div <div class="afoot-overflow safe-afoot-overflow" id="afootOverflow" @mouseout="warningListMinMouseout" @mouseover="warningListMinMouseover">
class="afoot-overflow safe-afoot-overflow"
id="afootOverflow"
@mouseout="warningListMinMouseout"
@mouseover="warningListMinMouseover"
>
<div v-if="warningData.length == 0" class="not-data"></div> <div v-if="warningData.length == 0" class="not-data"></div>
<div <div :key="idx" v-if="warningData.length > 0" class="afoot-con-for" style="height: 180px" v-for="(item,idx) in warningData">
v-if="warningData.length > 0" <div class="afoot-machinery-nam safe-afoot-machinery-nam" v-cloak>{{ item.warn_context }}</div>
class="afoot-con-for"
style="height: 180px"
v-for="item in warningData"
>
<div class="afoot-machinery-nam safe-afoot-machinery-nam" v-cloak>
{{ item.warn_context }}
</div>
<div class="afoot-machinery-info"> <div class="afoot-machinery-info">
<div class="afoot-machinery-img"> <div class="afoot-machinery-img">
<img :src="item.images" v-if="item.images" /> <img :src="item.images" v-if="item.images" />
</div> </div>
<div class="afoot-machinery-data"> <div class="afoot-machinery-data">
<div class="afoot-machinery-state" v-cloak> <div class="afoot-machinery-state" v-cloak>{{ item.warn_value }}</div>
预警值{{ item.warn_value }} <div class="afoot-machinery-time" v-cloak>{{ item.warn_time }}</div>
</div>
<div class="afoot-machinery-time" v-cloak>
{{ item.warn_time }}
</div>
</div> </div>
</div> </div>
</div> </div>
@ -309,7 +272,9 @@
</div> </div>
<div class="xhz-current-value-data"> <div class="xhz-current-value-data">
<div>高度</div> <div>高度</div>
<p><span v-cloak v-html="footInfo.foot0"></span> m</p> <p>
<span v-cloak v-html="footInfo.foot0"></span> m
</p>
</div> </div>
</div> </div>
</el-col> </el-col>
@ -322,7 +287,9 @@
</div> </div>
<div class="xhz-current-value-data"> <div class="xhz-current-value-data">
<div>楼层</div> <div>楼层</div>
<p><span v-cloak v-html="footInfo.foot1"></span> </p> <p>
<span v-cloak v-html="footInfo.foot1"></span>
</p>
</div> </div>
</div> </div>
</el-col> </el-col>
@ -335,7 +302,9 @@
</div> </div>
<div class="xhz-current-value-data"> <div class="xhz-current-value-data">
<div>当前人数</div> <div>当前人数</div>
<p><span v-cloak v-html="footInfo.foot2"></span> </p> <p>
<span v-cloak v-html="footInfo.foot2"></span>
</p>
</div> </div>
</div> </div>
</el-col> </el-col>
@ -348,7 +317,9 @@
</div> </div>
<div class="xhz-current-value-data"> <div class="xhz-current-value-data">
<div>当前载重</div> <div>当前载重</div>
<p><span v-cloak v-html="footInfo.foot3"></span> t</p> <p>
<span v-cloak v-html="footInfo.foot3"></span> t
</p>
</div> </div>
</div> </div>
</el-col> </el-col>
@ -361,7 +332,9 @@
</div> </div>
<div class="xhz-current-value-data"> <div class="xhz-current-value-data">
<div>倾角1</div> <div>倾角1</div>
<p><span v-cloak v-html="footInfo.foot4"></span> °</p> <p>
<span v-cloak v-html="footInfo.foot4"></span> °
</p>
</div> </div>
</div> </div>
</el-col> </el-col>
@ -374,7 +347,9 @@
</div> </div>
<div class="xhz-current-value-data"> <div class="xhz-current-value-data">
<div>倾角2</div> <div>倾角2</div>
<p><span v-cloak v-html="footInfo.foot5"></span> °</p> <p>
<span v-cloak v-html="footInfo.foot5"></span> °
</p>
</div> </div>
</div> </div>
</el-col> </el-col>
@ -387,7 +362,9 @@
</div> </div>
<div class="xhz-current-value-data"> <div class="xhz-current-value-data">
<div>风速</div> <div>风速</div>
<p><span v-cloak v-html="footInfo.foot6"></span> m/s</p> <p>
<span v-cloak v-html="footInfo.foot6"></span> m/s
</p>
</div> </div>
</div> </div>
</el-col> </el-col>
@ -400,7 +377,9 @@
</div> </div>
<div class="xhz-current-value-data"> <div class="xhz-current-value-data">
<div>速度</div> <div>速度</div>
<p><span v-cloak v-html="footInfo.foot7"></span> m/s</p> <p>
<span v-cloak v-html="footInfo.foot7"></span> m/s
</p>
</div> </div>
</div> </div>
</el-col> </el-col>
@ -413,7 +392,9 @@
</div> </div>
<div class="xhz-current-value-data"> <div class="xhz-current-value-data">
<div>速度方向</div> <div>速度方向</div>
<p><span v-cloak v-html="footInfo.foot8"></span></p> <p>
<span v-cloak v-html="footInfo.foot8"></span>
</p>
</div> </div>
</div> </div>
</el-col> </el-col>
@ -427,11 +408,7 @@
<div class="xhz-current-value-data"> <div class="xhz-current-value-data">
<div>前门状态</div> <div>前门状态</div>
<p> <p>
<span <span :class="footInfo.foot9 == '打开' ? 'open' : 'close'" v-cloak v-html="footInfo.foot9"></span>
:class="footInfo.foot9 == '打开' ? 'open' : 'close'"
v-cloak
v-html="footInfo.foot9"
></span>
</p> </p>
</div> </div>
</div> </div>
@ -446,11 +423,7 @@
<div class="xhz-current-value-data"> <div class="xhz-current-value-data">
<div>后门状态</div> <div>后门状态</div>
<p> <p>
<span <span :class="footInfo.foot10 == '打开' ? 'open' : 'close'" v-cloak v-html="footInfo.foot10"></span>
:class="footInfo.foot10 == '打开' ? 'open' : 'close'"
v-cloak
v-html="footInfo.foot10"
></span>
</p> </p>
</div> </div>
</div> </div>
@ -462,9 +435,11 @@
</template> </template>
<script> <script>
import debounce from "lodash.debounce"; import debounce from 'lodash.debounce'
import "@/components/tower-crane-value-1"; import '@/components/tower-crane-value-1'
import "@/components/tower-crane-value-2"; import '@/components/tower-crane-value-2'
import '@/components/dumbwaiter-1.js'
import '@/components/dumbwaiter-2.js'
export default { export default {
data() { data() {
return { return {
@ -477,8 +452,8 @@ export default {
index: 0, index: 0,
// //
dumbwaiterValue: {}, dumbwaiterValue: {},
comName: "dumbwaiter-1", comName: 'dumbwaiter-1',
direction: "right", direction: 'right',
deviceId: 0, deviceId: 0,
topInfo: { topInfo: {
top0: 0, top0: 0,
@ -500,8 +475,8 @@ export default {
foot6: 10, foot6: 10,
foot7: 10, foot7: 10,
foot8: 10, foot8: 10,
foot9: "", foot9: '',
foot10: "", foot10: '',
}, },
warningData: [], warningData: [],
dayWarnCount: 22, dayWarnCount: 22,
@ -513,114 +488,112 @@ export default {
warningInterval: undefined, warningInterval: undefined,
forIndex: 0, forIndex: 0,
warningData: [], warningData: [],
}; }
}, },
mounted() { mounted() {
this.$store.dispatch("ChangeNav", 308); this.$store.dispatch('ChangeNav', 308)
this.$bus.$on("projectChange", (prj) => { this.$bus.$on('projectChange', (prj) => {
this.selProject = prj; this.selProject = prj
this.init(); this.init()
}); })
this.selProject = this.$store.getters.selProject; this.selProject = this.$store.getters.selProject
this.init(); this.init()
}, },
created() {}, created() {},
methods: { methods: {
init() { init() {
this.certificateData = JSON.parse( this.certificateData = JSON.parse('[{"text":"在线数量","value":5},{"text":"离线数量","value":1}]')
'[{"text":"在线数量","value":5},{"text":"离线数量","value":1}]'
);
this.listData = JSON.parse( this.listData = JSON.parse(
'[{"createUserid":null,"ratedSpeed":"1.8","delFlag":"0","deviceId":"3223081738","deviceName":"2#-2","ratedPeopleCount":"9","entryTime":"2024-03-09 15:35:42","lastEnabledTime":"2024-03-09 15:35:42","safetyOfficerName":"马宁","maxHeight":120.5,"createTime":"2023-09-12 18:25:13","cageSize":"800*800","ratedLoad":"2000","safetyOfficerPhone":"18629159632","driverName":"张巧团","driverPhone":"17324808902","id":5,"deviceState":"0","projectId":"98"},{"createUserid":null,"ratedSpeed":"4.9","delFlag":"0","deviceId":"3223081741","deviceName":"3223081741","ratedPeopleCount":"9","entryTime":"2024-03-09 15:35:42","lastEnabledTime":"2024-03-10 10:32:49","safetyOfficerName":"马宁","maxHeight":160.2,"createTime":"2023-09-12 18:25:13","cageSize":"800*800","ratedLoad":"2000","safetyOfficerPhone":"18629159632","driverName":null,"driverPhone":null,"id":6,"deviceState":"0","projectId":"98"},{"createUserid":null,"ratedSpeed":"4.9","delFlag":"0","deviceId":"3223081748","deviceName":"3223081748","ratedPeopleCount":"9","entryTime":"2024-03-09 15:35:42","lastEnabledTime":"2024-03-10 10:46:36","safetyOfficerName":"马宁","maxHeight":187.2,"createTime":"2023-09-12 18:25:13","cageSize":"800*800","ratedLoad":"2000","safetyOfficerPhone":"18629159632","driverName":null,"driverPhone":null,"id":7,"deviceState":"0","projectId":"98"},{"createUserid":null,"ratedSpeed":"1.6","delFlag":"0","deviceId":"3223081722","deviceName":"3#-1","ratedPeopleCount":"9","entryTime":null,"lastEnabledTime":"2024-03-10 09:48:34","safetyOfficerName":"马宁","maxHeight":122.9,"createTime":"2023-09-12 18:25:13","cageSize":"800*800","ratedLoad":"2000","safetyOfficerPhone":"18629159632","driverName":"高军平","driverPhone":"15139573902","id":8,"deviceState":"0","projectId":"98"},{"createUserid":null,"ratedSpeed":"1.6","delFlag":"0","deviceId":"3223081749","deviceName":"3#-2","ratedPeopleCount":"9","entryTime":null,"lastEnabledTime":"2024-03-09 13:47:07","safetyOfficerName":"马宁","maxHeight":124.8,"createTime":"2023-09-12 18:25:13","cageSize":null,"ratedLoad":"2000","safetyOfficerPhone":"18629159632","driverName":"郭伟娟","driverPhone":"15239586568","id":9,"deviceState":"0","projectId":"98"}]' '[{"createUserid":null,"ratedSpeed":"1.8","delFlag":"0","deviceId":"3223081738","deviceName":"2#-2","ratedPeopleCount":"9","entryTime":"2024-03-09 15:35:42","lastEnabledTime":"2024-03-09 15:35:42","safetyOfficerName":"马宁","maxHeight":120.5,"createTime":"2023-09-12 18:25:13","cageSize":"800*800","ratedLoad":"2000","safetyOfficerPhone":"18629159632","driverName":"张巧团","driverPhone":"17324808902","id":5,"deviceState":"0","projectId":"98"},{"createUserid":null,"ratedSpeed":"4.9","delFlag":"0","deviceId":"3223081741","deviceName":"3223081741","ratedPeopleCount":"9","entryTime":"2024-03-09 15:35:42","lastEnabledTime":"2024-03-10 10:32:49","safetyOfficerName":"马宁","maxHeight":160.2,"createTime":"2023-09-12 18:25:13","cageSize":"800*800","ratedLoad":"2000","safetyOfficerPhone":"18629159632","driverName":null,"driverPhone":null,"id":6,"deviceState":"0","projectId":"98"},{"createUserid":null,"ratedSpeed":"4.9","delFlag":"0","deviceId":"3223081748","deviceName":"3223081748","ratedPeopleCount":"9","entryTime":"2024-03-09 15:35:42","lastEnabledTime":"2024-03-10 10:46:36","safetyOfficerName":"马宁","maxHeight":187.2,"createTime":"2023-09-12 18:25:13","cageSize":"800*800","ratedLoad":"2000","safetyOfficerPhone":"18629159632","driverName":null,"driverPhone":null,"id":7,"deviceState":"0","projectId":"98"},{"createUserid":null,"ratedSpeed":"1.6","delFlag":"0","deviceId":"3223081722","deviceName":"3#-1","ratedPeopleCount":"9","entryTime":null,"lastEnabledTime":"2024-03-10 09:48:34","safetyOfficerName":"马宁","maxHeight":122.9,"createTime":"2023-09-12 18:25:13","cageSize":"800*800","ratedLoad":"2000","safetyOfficerPhone":"18629159632","driverName":"高军平","driverPhone":"15139573902","id":8,"deviceState":"0","projectId":"98"},{"createUserid":null,"ratedSpeed":"1.6","delFlag":"0","deviceId":"3223081749","deviceName":"3#-2","ratedPeopleCount":"9","entryTime":null,"lastEnabledTime":"2024-03-09 13:47:07","safetyOfficerName":"马宁","maxHeight":124.8,"createTime":"2023-09-12 18:25:13","cageSize":null,"ratedLoad":"2000","safetyOfficerPhone":"18629159632","driverName":"郭伟娟","driverPhone":"15239586568","id":9,"deviceState":"0","projectId":"98"}]'
); )
this.warningList = [ this.warningList = [
{ warnType: "报警类型A", warnCount: 4 }, { warnType: '报警类型A', warnCount: 4 },
{ warnType: "报警类型B", warnCount: 4 }, { warnType: '报警类型B', warnCount: 4 },
{ warnType: "报警类型C", warnCount: 4 }, { warnType: '报警类型C', warnCount: 4 },
{ warnType: "报警类型D", warnCount: 4 }, { warnType: '报警类型D', warnCount: 4 },
{ warnType: "报警类型E", warnCount: 4 }, { warnType: '报警类型E', warnCount: 4 },
{ warnType: "报警类型F", warnCount: 4 }, { warnType: '报警类型F', warnCount: 4 },
{ warnType: "报警类型G", warnCount: 4 }, { warnType: '报警类型G', warnCount: 4 },
{ warnType: "报警类型H", warnCount: 4 }, { warnType: '报警类型H', warnCount: 4 },
]; ]
this.warningData = [ this.warningData = [
{ {
warn_value: "预警A", warn_value: '预警A',
images: ["images/831.jpg"], images: ['images/831.jpg'],
warn_context: "告警内容", warn_context: '告警内容',
warn_time: "24-02-02 14:00", warn_time: '24-02-02 14:00',
project_abbreviation: "xxx项目", project_abbreviation: 'xxx项目',
}, },
{ {
warn_value: "预警A", warn_value: '预警A',
images: ["images/831.jpg"], images: ['images/831.jpg'],
warn_context: "告警内容", warn_context: '告警内容',
time: "24-02-02 14:00", time: '24-02-02 14:00',
project_abbreviation: "xxx项目", project_abbreviation: 'xxx项目',
}, },
{ {
warn_value: "预警A", warn_value: '预警A',
images: ["images/831.jpg"], images: ['images/831.jpg'],
warn_context: "告警内容", warn_context: '告警内容',
time: "24-02-02 14:00", time: '24-02-02 14:00',
project_abbreviation: "xxx项目", project_abbreviation: 'xxx项目',
}, },
]; ]
//list //list
if (this.listData.length > 0) { if (this.listData.length > 0) {
this.interval = setInterval(this.automaticRoll, 10000); this.interval = setInterval(this.automaticRoll, 10000)
} }
// //
this.warningTypeInterval = setInterval(this.automaticRollType, 5000); this.warningTypeInterval = setInterval(this.automaticRollType, 5000)
// //
this.warningInterval = setInterval(this.safeAutomaticRoll, 5000); this.warningInterval = setInterval(this.safeAutomaticRoll, 5000)
this.index = 0; this.index = 0
this.deviceId = this.listData[0].id; this.deviceId = this.listData[0].id
this.updateDumbwaiterValue(); this.updateDumbwaiterValue()
}, },
onTowerCraneList(n) { onTowerCraneList(n) {
this.index = n; this.index = n
this.deviceId = this.listData[n].id; this.deviceId = this.listData[n].id
// //
this.direction = "right"; this.direction = 'right'
if (this.comName == "dumbwaiter-1") { if (this.comName == 'dumbwaiter-1') {
this.comName = "dumbwaiter-2"; this.comName = 'dumbwaiter-2'
} else { } else {
this.comName = "dumbwaiter-1"; this.comName = 'dumbwaiter-1'
} }
}, },
// //
listMinMouseover() { listMinMouseover() {
clearInterval(this.interval); clearInterval(this.interval)
}, },
listMinMouseout() { listMinMouseout() {
this.interval = setInterval(this.automaticRoll, 10000); this.interval = setInterval(this.automaticRoll, 10000)
}, },
automaticRoll() { automaticRoll() {
// //
if (this.direction == "right") { if (this.direction == 'right') {
if (this.index == this.listData.length - 1) { if (this.index == this.listData.length - 1) {
this.index = 0; this.index = 0
} else { } else {
this.index = this.index + 1; this.index = this.index + 1
} }
} else { } else {
if (this.index == 0) { if (this.index == 0) {
this.index = this.listData.length - 1; this.index = this.listData.length - 1
} else { } else {
this.index = this.index - 1; this.index = this.index - 1
} }
} }
if (this.comName == "dumbwaiter-1") { if (this.comName == 'dumbwaiter-1') {
this.comName = "dumbwaiter-2"; this.comName = 'dumbwaiter-2'
} else { } else {
this.comName = "dumbwaiter-1"; this.comName = 'dumbwaiter-1'
} }
var height = $(".list-for").innerHeight(); var height = $('.list-for').innerHeight()
$("#listMin").animate({ scrollTop: height * this.index + "px" }); $('#listMin').animate({ scrollTop: height * this.index + 'px' })
this.deviceId = this.listData[this.index].deviceId; this.deviceId = this.listData[this.index].deviceId
this.updateDumbwaiterValue(); this.updateDumbwaiterValue()
}, },
updateDumbwaiterValue() { updateDumbwaiterValue() {
this.dumbwaiterValue = { this.dumbwaiterValue = {
@ -631,57 +604,54 @@ export default {
liftingHeight: this.listData[this.index].ratedPeopleCount, liftingHeight: this.listData[this.index].ratedPeopleCount,
runningSpeed: this.listData[this.index].ratedSpeed, runningSpeed: this.listData[this.index].ratedSpeed,
enterTime: this.listData[this.index].entryTime, enterTime: this.listData[this.index].entryTime,
}; }
}, },
safeTowerLeft() { safeTowerLeft() {
this.direction = "left"; this.direction = 'left'
this.automaticRoll(); this.automaticRoll()
}, },
safeTowerRight() { safeTowerRight() {
// //
this.direction = "right"; this.direction = 'right'
this.automaticRoll(); this.automaticRoll()
}, },
// //
automaticRollType() { automaticRollType() {
var height = $(".glr-login-number-max").innerHeight(); var height = $('.glr-login-number-max').innerHeight()
if ( if ($('#afootOverflowType').scrollTop() == height * this.warningList.length - $('#afootOverflowType').innerHeight()) {
$("#afootOverflowType").scrollTop() == this.warningTypeIndex = 0
height * this.warningList.length - $("#afootOverflowType").innerHeight()
) {
this.warningTypeIndex = 0;
} else { } else {
this.warningTypeIndex = this.warningTypeIndex + 1; this.warningTypeIndex = this.warningTypeIndex + 1
} }
$("#afootOverflowType").animate({ $('#afootOverflowType').animate({
scrollTop: height * this.warningTypeIndex + "px", scrollTop: height * this.warningTypeIndex + 'px',
}); })
}, },
listMinMouseoverType() { listMinMouseoverType() {
clearInterval(this.warningTypeInterval); clearInterval(this.warningTypeInterval)
}, },
listMinMouseoutType() { listMinMouseoutType() {
this.warningTypeInterval = setInterval(this.automaticRollType, 5000); this.warningTypeInterval = setInterval(this.automaticRollType, 5000)
}, },
// //
safeAutomaticRoll() { safeAutomaticRoll() {
var height = $(".safe-afoot-overflow").innerHeight(); var height = $('.safe-afoot-overflow').innerHeight()
if (this.forIndex == this.warningData.length) { if (this.forIndex == this.warningData.length) {
this.forIndex = 0; this.forIndex = 0
} else { } else {
this.forIndex = this.forIndex + 1; this.forIndex = this.forIndex + 1
} }
$("#afootOverflow").animate({ scrollTop: height * this.forIndex + "px" }); $('#afootOverflow').animate({ scrollTop: height * this.forIndex + 'px' })
}, },
warningListMinMouseover() { warningListMinMouseover() {
clearInterval(this.warningInterval); clearInterval(this.warningInterval)
}, },
warningListMinMouseout() { warningListMinMouseout() {
this.warningInterval = setInterval(this.safeAutomaticRoll, 5000); this.warningInterval = setInterval(this.safeAutomaticRoll, 5000)
}, },
}, },
}; }
</script> </script>
<style lang="less"> <style lang="less">