|
|
@@ -1,853 +0,0 @@
|
|
|
-<!-- eslint-disable vue/require-v-for-key -->
|
|
|
-<!-- eslint-disable indent -->
|
|
|
-<template>
|
|
|
- <div style="height:100%;">
|
|
|
- <title-name title="时效库"></title-name>
|
|
|
- <div class="main">
|
|
|
- <div class="column head" style="height:100%">
|
|
|
-
|
|
|
- <div class="panel">
|
|
|
- <div class="panel-footer"></div>
|
|
|
- <h2>堆垛机状态</h2>
|
|
|
- <div class="statusBox">
|
|
|
- <div class="statusLine" style="margin-top:-1rem;">
|
|
|
- <div class="statusItem">
|
|
|
- <i style="background:#0be10b;"></i>
|
|
|
- <span>自动</span>
|
|
|
- </div>
|
|
|
- <div class="statusItem">
|
|
|
- <i style="background:yellow;"></i>
|
|
|
- <span>手动/离线</span>
|
|
|
- </div>
|
|
|
- <div class="statusItem">
|
|
|
- <i style="background:red;"></i>
|
|
|
- <span>异常</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="rowBox" style="margin-top:-2rem;">
|
|
|
- <div class="panel" style="width: 32%;height:100%;margin-right:2%;">
|
|
|
- <h2 style="font-size:0.9rem;margin-bottom:0.1rem;margion-top:0.04rem;">一楼</h2>
|
|
|
- <div class="table">
|
|
|
- <div class="header">
|
|
|
- <span style="width:33%;">设备名</span>
|
|
|
- <span style="width:30%;">状态</span>
|
|
|
- <span style="width:36%;">剩余任务数</span>
|
|
|
- </div>
|
|
|
- <div class="center">
|
|
|
- <div class="item" v-for="item in ddjData[0]">
|
|
|
- <span style="width:33%;"> {{item.code}}</span>
|
|
|
- <span style="width:30%;">
|
|
|
- <div class="green-circle" v-if="item.equipState === '1'"></div>
|
|
|
- <div class="yellow-circle" v-if="item.equipState === '2'"></div>
|
|
|
- <div class="red-circle" v-if="item.equipState === '3'"></div>
|
|
|
- </span>
|
|
|
- <span style="width:36%;"> {{item.residueTask}}</span>
|
|
|
- </div>
|
|
|
-
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="panel" style="width: 32%;height:100%;margin-right:2%;top:-5px;">
|
|
|
- <h2 style="font-size:0.9rem;margin-bottom:0.1rem;margion-top:0.04rem;">二楼</h2>
|
|
|
- <div class="table">
|
|
|
- <div class="header">
|
|
|
- <span style="width:33%;">设备名</span>
|
|
|
- <span style="width:30%;">状态</span>
|
|
|
- <span style="width:36%;">剩余任务数</span>
|
|
|
- </div>
|
|
|
- <div class="center">
|
|
|
- <div class="item" v-for="item in ddjData[1]">
|
|
|
- <span style="width:33%;"> {{item.code}}</span>
|
|
|
- <span style="width:30%;">
|
|
|
-
|
|
|
- <div class="green-circle" v-if="item.equipState === '1'"></div>
|
|
|
- <div class="yellow-circle" v-if="item.equipState === '2'"></div>
|
|
|
- <div class="red-circle" v-if="item.equipState === '3'"></div>
|
|
|
- </span>
|
|
|
- <span style="width:36%;"> {{item.residueTask}}</span>
|
|
|
- </div>
|
|
|
-
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="panel" style="width: 32%;height:100%; top:-5px;">
|
|
|
- <h2 style="font-size:0.9rem;margin-bottom:0.1rem;margion-top:0.04rem;">三楼</h2>
|
|
|
- <div class="table">
|
|
|
- <div class="header">
|
|
|
- <span style="width:33%;">设备名</span>
|
|
|
- <span style="width:30%;">状态</span>
|
|
|
- <span style="width:36%;">剩余任务数</span>
|
|
|
- </div>
|
|
|
- <div class="center">
|
|
|
-
|
|
|
- <div class="item" v-for="item in ddjData[2]">
|
|
|
- <span style="width:33%;"> {{item.code}}</span>
|
|
|
- <span style="width:30%;">
|
|
|
- <div class="green-circle" v-if="item.equipState === '1'"></div>
|
|
|
- <div class="yellow-circle" v-if="item.equipState === '2'"></div>
|
|
|
- <div class="red-circle" v-if="item.equipState === '3'"></div>
|
|
|
- </span>
|
|
|
- <span style="width:36%;"> {{item.residueTask}}</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- </div>
|
|
|
- <!-- <div class="rowBox">
|
|
|
- <div class="rowItem">
|
|
|
- <div class="status_round" style="background:#0be10b">Srm001</div>
|
|
|
- <div class="task">剩余任务：<span>10</span></div>
|
|
|
- </div>
|
|
|
- <div class="rowItem">
|
|
|
- <div class="status_round" style="background:#0be10b">Srm001</div>
|
|
|
- <div class="task">剩余任务：<span>10</span></div>
|
|
|
- </div>
|
|
|
- <div class="rowItem">
|
|
|
- <div class="status_round" style="background:#0be10b">Srm001</div>
|
|
|
- <div class="task">剩余任务：<span>10</span></div>
|
|
|
- </div>
|
|
|
- <div class="rowItem">
|
|
|
- <div class="status_round" style="background:#0be10b">Srm001</div>
|
|
|
- <div class="task">剩余任务：<span>10</span></div>
|
|
|
- </div>
|
|
|
- <div class="rowItem">
|
|
|
- <div class="status_round" style="background:#0be10b">Srm001</div>
|
|
|
- <div class="task">剩余任务：<span>10</span></div>
|
|
|
- </div>
|
|
|
- <div class="rowItem">
|
|
|
- <div class="status_round" style="background:#0be10b">Srm001</div>
|
|
|
- <div class="task">剩余任务：<span>10</span></div>
|
|
|
- </div>
|
|
|
- <div class="rowItem">
|
|
|
- <div class="status_round" style="background:#0be10b">Srm001</div>
|
|
|
- <div class="task">剩余任务：<span>10</span></div>
|
|
|
- </div>
|
|
|
- <div class="rowItem">
|
|
|
- <div class="status_round" style="background:#0be10b">Srm001</div>
|
|
|
- <div class="task">剩余任务：<span>10</span></div>
|
|
|
- </div>
|
|
|
- <div class="rowItem">
|
|
|
- <div class="status_round" style="background:#0be10b">Srm001</div>
|
|
|
- <div class="task">剩余任务：<span>10</span></div>
|
|
|
- </div>
|
|
|
- <div class="rowItem">
|
|
|
- <div class="status_round" style="background:#0be10b">Srm001</div>
|
|
|
- <div class="task">剩余任务：<span>10</span></div>
|
|
|
- </div>
|
|
|
- <div class="rowItem">
|
|
|
- <div class="status_round" style="background:#0be10b">Srm001</div>
|
|
|
- <div class="task">剩余任务：<span>10</span></div>
|
|
|
- </div>
|
|
|
- <div class="rowItem">
|
|
|
- <div class="status_round" style="background:#0be10b">Srm001</div>
|
|
|
- <div class="task">剩余任务：<span>10</span></div>
|
|
|
- </div>
|
|
|
- <div class="rowItem">
|
|
|
- <div class="status_round" style="background:#0be10b">Srm001</div>
|
|
|
- <div class="task">剩余任务：<span>10</span></div>
|
|
|
- </div>
|
|
|
- <div class="rowItem">
|
|
|
- <div class="status_round" style="background:#0be10b">Srm001</div>
|
|
|
- <div class="task">剩余任务：<span>10</span></div>
|
|
|
- </div>
|
|
|
- <div class="rowItem">
|
|
|
- <div class="status_round" style="background:#0be10b">Srm001</div>
|
|
|
- <div class="task">剩余任务：<span>10</span></div>
|
|
|
- </div>
|
|
|
- <div class="rowItem">
|
|
|
- <div class="status_round" style="background:#0be10b">Srm001</div>
|
|
|
- <div class="task">剩余任务：<span>10</span></div>
|
|
|
- </div>
|
|
|
- <div class="rowItem">
|
|
|
- <div class="status_round" style="background:#0be10b">Srm001</div>
|
|
|
- <div class="task">剩余任务：<span>10</span></div>
|
|
|
- </div>
|
|
|
- <div class="rowItem">
|
|
|
- <div class="status_round" style="background:#0be10b">Srm001</div>
|
|
|
- <div class="task">剩余任务：<span>10</span></div>
|
|
|
- </div>
|
|
|
- <div class="rowItem">
|
|
|
- <div class="status_round" style="background:#0be10b">Srm001</div>
|
|
|
- <div class="task">剩余任务：<span>10</span></div>
|
|
|
- </div>
|
|
|
- <div class="rowItem">
|
|
|
- <div class="status_round" style="background:#0be10b">Srm001</div>
|
|
|
- <div class="task">剩余任务：<span>10</span></div>
|
|
|
- </div>
|
|
|
- <div class="rowItem">
|
|
|
- <div class="status_round" style="background:#0be10b">Srm001</div>
|
|
|
- <div class="task">剩余任务：<span>10</span></div>
|
|
|
- </div>
|
|
|
- <div class="rowItem">
|
|
|
- <div class="status_round" style="background:#0be10b">Srm001</div>
|
|
|
- <div class="task">剩余任务：<span>10</span></div>
|
|
|
- </div>
|
|
|
- <div class="rowItem">
|
|
|
- <div class="status_round" style="background:#0be10b">Srm001</div>
|
|
|
- <div class="task">剩余任务：<span>10</span></div>
|
|
|
- </div>
|
|
|
- <div class="rowItem">
|
|
|
- <div class="status_round" style="background:#0be10b">Srm001</div>
|
|
|
- <div class="task">剩余任务：<span>10</span></div>
|
|
|
- </div>
|
|
|
- <div class="rowItem">
|
|
|
- <div class="status_round" style="background:#0be10b">Srm001</div>
|
|
|
- <div class="task">剩余任务：<span>10</span></div>
|
|
|
- </div>
|
|
|
- <div class="rowItem">
|
|
|
- <div class="status_round" style="background:#0be10b">Srm001</div>
|
|
|
- <div class="task">剩余任务：<span>10</span></div>
|
|
|
- </div>
|
|
|
- </div> -->
|
|
|
-
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="panel">
|
|
|
-
|
|
|
- <div class="panel-footer"></div>
|
|
|
- <h2>报警信息</h2>
|
|
|
- <div class="warnBox">
|
|
|
- <div id="realSituationSSWarn">
|
|
|
- <div class="item" v-for="item in warnInfo">
|
|
|
- <span>{{item.dateTime}}</span>
|
|
|
- <span>{{item.message}}</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- </div>
|
|
|
-
|
|
|
- </div>
|
|
|
- <div class="column footer" style="height:100%">
|
|
|
- <div class="panel taskInfos" style="height:49%">
|
|
|
-
|
|
|
- <div class="panel-footer"></div>
|
|
|
- <h2>非控制盘信息</h2>
|
|
|
- <div class="table">
|
|
|
- <div class="header">
|
|
|
- <span style="width:10%;">SKU编码</span>
|
|
|
- <span style="width:25%;">物料描述</span>
|
|
|
- <span style="width:20%;">订单号</span>
|
|
|
- <span style="width:6%;">机器组</span>
|
|
|
- <span style="width:8%;">绕向(R/L)</span>
|
|
|
- <span style="width:10%;">黑盘数量(R/L)</span>
|
|
|
-
|
|
|
- <span style="width:6%;">质量等级</span>
|
|
|
- <span style="width:7%;">已装箱数</span>
|
|
|
- <span style="width:8%;">未装箱数</span>
|
|
|
- </div>
|
|
|
- <div class="center">
|
|
|
- <div id="realSituationSInvInfo">
|
|
|
- <div class="item" v-for="item in invInfo" :class="noBGfunc(item)">
|
|
|
- <span style="width:10%;">{{item.sku}}</span>
|
|
|
- <span style="width:25%;">{{item.matName}}</span>
|
|
|
- <span style="width:20%;">{{item.docNo}}</span>
|
|
|
-
|
|
|
- <span style="width:6%;">{{item.wbGroupCode}}</span>
|
|
|
- <span style="width:8%;">{{item.noBCount[0]}}/{{item.noBCount[1]}}</span>
|
|
|
- <span style="width:10%;">{{item.bCount[0]}}/{{item.bCount[1]}}</span>
|
|
|
-
|
|
|
- <span style="width:6%;">{{item.grade}}</span>
|
|
|
- <span style="width:7%;">{{item.finCount}}</span>
|
|
|
- <span style="width:8%;">{{item.noFinCount}}</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- </div>
|
|
|
-
|
|
|
- <!--
|
|
|
- <div class="panel taskInfos" style="height:49%">
|
|
|
-
|
|
|
- <div class="panel-footer"></div>
|
|
|
- <h2>控制盘信息</h2>
|
|
|
- <div class="table">
|
|
|
- <div class="header">
|
|
|
- <span style="width:10%;">SKU编码</span>
|
|
|
- <span style="width:30%;">物料描述</span>
|
|
|
- <span style="width:8%;">机器组</span>
|
|
|
- <span style="width:9%;">前天(R/L)</span>
|
|
|
- <span style="width:9%;">昨天(R/L)</span>
|
|
|
- <span style="width:9%;">今天(R/L)</span>
|
|
|
- <span style="width:17%;">是否有黑盘</span>
|
|
|
- <span style="width:8%;">等级</span>
|
|
|
-
|
|
|
- </div>
|
|
|
- <div class="center">
|
|
|
- <div id="realTaskInfoS">
|
|
|
- <div class="item" v-for="item in taskInfo" :class="BGfunc(item)">
|
|
|
- <span style="width:10%;">{{item.sku}}</span>
|
|
|
- <span style="width:30%;">{{item.matName}}</span>
|
|
|
- <span style="width:8%;">{{item.wbGroupCode}}</span>
|
|
|
- <span style="width:9%;">{{item.beforeYesterdayQty[0]}}/{{item.beforeYesterdayQty[1]}}</span>
|
|
|
- <span style="width:9%;">{{item.yesterdayQty[0]}}/{{item.yesterdayQty[1]}}</span>
|
|
|
- <span style="width:9%;">{{item.todayQty[0]}}/{{item.todayQty[1]}} </span>
|
|
|
- <span style="width:17%;">{{item.haveBlack[0]}}/{{item.haveBlack[1]}}/{{item.haveBlack[2]}}</span>
|
|
|
- <span style="width:8%;">{{item.grade}}</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div> -->
|
|
|
-
|
|
|
- <div class="opacity"></div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-</template>
|
|
|
-<script>
|
|
|
-// eslint-disable-next-line no-unused-vars
|
|
|
-import echarts from 'echarts'
|
|
|
-import TitleName from './components/TitleName'
|
|
|
-import Progress from './components/Progress'
|
|
|
-import {
|
|
|
- GetSXInfo
|
|
|
-} from '@/api/index'
|
|
|
-export default {
|
|
|
- components: {
|
|
|
- TitleName,
|
|
|
- // eslint-disable-next-line vue/no-unused-components
|
|
|
- Progress
|
|
|
- },
|
|
|
- data () {
|
|
|
- return {
|
|
|
- ddjData: [],
|
|
|
- taskInfo: [],
|
|
|
- warnInfo: [],
|
|
|
- locRateInfo: [],
|
|
|
- invInfo: [],
|
|
|
- timer1: null,
|
|
|
- timer2: null,
|
|
|
- timer3: null,
|
|
|
- timer4: null,
|
|
|
- t: null
|
|
|
- }
|
|
|
- },
|
|
|
- mounted () {
|
|
|
- this.getDdjInfo()
|
|
|
- this.getInvInfo()
|
|
|
- this.getTaskInfo()
|
|
|
- this.getWarnInfo()
|
|
|
- this.getLocRateInfo()
|
|
|
-
|
|
|
- var that = this
|
|
|
- this.timer1 = setInterval(() => {
|
|
|
- that.getDdjInfo()
|
|
|
- }, 3000)
|
|
|
- setTimeout(() => {
|
|
|
- that.loopGetData()
|
|
|
- }, 5000)
|
|
|
- },
|
|
|
- created () { },
|
|
|
- beforeDestroy () {
|
|
|
- clearInterval(this.timer1)
|
|
|
- clearInterval(this.timer2)
|
|
|
- clearInterval(this.timer3)
|
|
|
- clearInterval(this.t)
|
|
|
- clearInterval(this.timer4)
|
|
|
- },
|
|
|
- methods: {
|
|
|
- noBGfunc (item) {
|
|
|
- if ((item.noBCount[0] != '0R' && item.bCount[0] == '0R') || (item.noBCount[1] != '0L' && item.bCount[1] == '0L')) {
|
|
|
- return 'SelectBG'
|
|
|
- } else {
|
|
|
- return ''
|
|
|
- }
|
|
|
- },
|
|
|
- locWarnfunc (item) {
|
|
|
- // eslint-disable-next-line eqeqeq
|
|
|
- if (item.locRowColor == 'Red') {
|
|
|
- return 'SelectBG'
|
|
|
- // eslint-disable-next-line eqeqeq
|
|
|
- } else if (item.locRowColor == 'Yellow') {
|
|
|
- return 'WarnBG'
|
|
|
- } else {
|
|
|
- return ''
|
|
|
- }
|
|
|
- },
|
|
|
- BGfunc (item) {
|
|
|
- // eslint-disable-next-line eqeqeq
|
|
|
- if (item.beforeYesterdayQty[0] != '0R' || item.beforeYesterdayQty[1] != '0L') {
|
|
|
- const result = item.haveBlack[0].match(/\(([^)]*)\)/)
|
|
|
- if (result) {
|
|
|
- const arr = result[1].split('/')
|
|
|
- // eslint-disable-next-line eqeqeq
|
|
|
- if ((item.beforeYesterdayQty[0] != '0R' && arr[0] == '0R') || (item.beforeYesterdayQty[1] != '0L' && arr[1] == '0L')) {
|
|
|
- return 'SelectBG'
|
|
|
- } else {
|
|
|
- return ''
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- // eslint-disable-next-line eqeqeq
|
|
|
- if (item.yesterdayQty[0] != '0R' || item.yesterdayQty[1] != '0L') {
|
|
|
- const result = item.haveBlack[1].match(/\(([^)]*)\)/)
|
|
|
- if (result) {
|
|
|
- const arr = result[1].split('/')
|
|
|
- // eslint-disable-next-line eqeqeq
|
|
|
- if ((item.yesterdayQty[0] != '0R' && arr[0] == '0R') || (item.yesterdayQty[1] != '0L' && arr[1] == '0L')) {
|
|
|
- return 'SelectBG'
|
|
|
- } else {
|
|
|
- return ''
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- // eslint-disable-next-line eqeqeq
|
|
|
- if (item.todayQty[0] != '0R' || item.todayQty[1] != '0L') {
|
|
|
- const result = item.haveBlack[2].match(/\(([^)]*)\)/)
|
|
|
- if (result) {
|
|
|
- const arr = result[1].split('/')
|
|
|
- // eslint-disable-next-line eqeqeq
|
|
|
- if ((item.todayQty[0] != '0R' && arr[0] == '0R') || (item.todayQty[1] != '0L' && arr[1] == '0L')) {
|
|
|
- return 'SelectBG'
|
|
|
- } else {
|
|
|
- return ''
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- getDdjInfo () {
|
|
|
- const option = {
|
|
|
- strRequest: '1',
|
|
|
- workshop: 'sx',
|
|
|
- boardCode: ''
|
|
|
- }
|
|
|
- GetSXInfo(option).then(res => {
|
|
|
- this.ddjData = res[0]
|
|
|
- })
|
|
|
- },
|
|
|
- getTaskInfo () {
|
|
|
- const option = {
|
|
|
- strRequest: '3',
|
|
|
- workshop: 'sx',
|
|
|
- boardCode: ''
|
|
|
- }
|
|
|
- GetSXInfo(option).then(res => {
|
|
|
- this.taskInfo = res[2]
|
|
|
- })
|
|
|
- },
|
|
|
- getInvInfo () {
|
|
|
- const option = {
|
|
|
- strRequest: '2',
|
|
|
- workshop: 'sx',
|
|
|
- boardCode: ''
|
|
|
- }
|
|
|
- GetSXInfo(option).then(res => {
|
|
|
- this.invInfo = res[1]
|
|
|
- })
|
|
|
- },
|
|
|
- getWarnInfo () {
|
|
|
- const option = {
|
|
|
- strRequest: '4',
|
|
|
- workshop: 'sx',
|
|
|
- boardCode: ''
|
|
|
- }
|
|
|
- GetSXInfo(option).then(res => {
|
|
|
- this.warnInfo = res[3]
|
|
|
- })
|
|
|
- },
|
|
|
- getLocRateInfo () {
|
|
|
- const option = {
|
|
|
- strRequest: '5',
|
|
|
- workshop: 'sx',
|
|
|
- boardCode: ''
|
|
|
- }
|
|
|
- GetSXInfo(option).then(res => {
|
|
|
- this.locRateInfo = res[4]
|
|
|
- })
|
|
|
- },
|
|
|
- // 循环调用数据
|
|
|
- loopGetData () {
|
|
|
- const that = this
|
|
|
- this.$nextTick(() => {
|
|
|
- if (this.taskInfo.length <= 13) {
|
|
|
- this.timer2 = setInterval(() => {
|
|
|
- this.getTaskInfo()
|
|
|
- }, 60000)
|
|
|
- } else {
|
|
|
- setTimeout(() => {
|
|
|
- const oneBottomLeft = document.getElementById('realTaskInfoS')
|
|
|
- // eslint-disable-next-line camelcase
|
|
|
- let mt_value = 0
|
|
|
- const speed = 100
|
|
|
- const height = oneBottomLeft.clientHeight
|
|
|
- if (height > 150) {
|
|
|
- // eslint-disable-next-line no-inner-declarations
|
|
|
- function timer2 () {
|
|
|
- // eslint-disable-next-line camelcase
|
|
|
- if (mt_value >= height) {
|
|
|
- // eslint-disable-next-line camelcase
|
|
|
- mt_value = 0
|
|
|
- that.getTaskInfo()
|
|
|
- } else {
|
|
|
- // eslint-disable-next-line camelcase
|
|
|
- mt_value = mt_value + 1
|
|
|
- }
|
|
|
- // eslint-disable-next-line camelcase
|
|
|
- oneBottomLeft.style.marginTop = '-' + mt_value + 'px'
|
|
|
- }
|
|
|
- that.timer2 = setInterval(timer2, speed)
|
|
|
- }
|
|
|
- }, 60000)
|
|
|
- }
|
|
|
-
|
|
|
- if (this.invInfo.length <= 13) {
|
|
|
- this.timer4 = setInterval(() => {
|
|
|
- this.getInvInfo()
|
|
|
- }, 65000)
|
|
|
- } else {
|
|
|
- setTimeout(() => {
|
|
|
- const invoneBottomLeft = document.getElementById('realSituationSInvInfo')
|
|
|
- let invmt_value = 0
|
|
|
- const invspeed = 100
|
|
|
- const invheight = invoneBottomLeft.clientHeight
|
|
|
- if (invheight > 150) {
|
|
|
- function timer4 () {
|
|
|
- if (invmt_value >= invheight) {
|
|
|
- invmt_value = 0
|
|
|
- that.getInvInfo()
|
|
|
- } else {
|
|
|
- invmt_value = invmt_value + 1
|
|
|
- }
|
|
|
- invoneBottomLeft.style.marginTop = '-' + invmt_value + 'px'
|
|
|
- }
|
|
|
- that.timer4 = setInterval(timer4, invspeed)
|
|
|
- }
|
|
|
- }, 65000)
|
|
|
- }
|
|
|
-
|
|
|
- if (this.warnInfo.length <= 22) {
|
|
|
- this.timer3 = setInterval(() => {
|
|
|
- this.getWarnInfo()
|
|
|
- }, 5000)
|
|
|
- } else {
|
|
|
- setTimeout(() => {
|
|
|
- const oneBottomLeft = document.getElementById('realSituationSSWarn')
|
|
|
- let mt_value = 0
|
|
|
- const speed = 100
|
|
|
- const height = oneBottomLeft.clientHeight
|
|
|
- if (height > 150) {
|
|
|
- function timer3 () {
|
|
|
- if (mt_value >= height) {
|
|
|
- mt_value = 0
|
|
|
- that.getWarnInfo()
|
|
|
- } else {
|
|
|
- mt_value = mt_value + 1
|
|
|
- }
|
|
|
- oneBottomLeft.style.marginTop = '-' + mt_value + 'px'
|
|
|
- }
|
|
|
- that.timer3 = setInterval(timer3, speed)
|
|
|
- }
|
|
|
- }, 5000)
|
|
|
- }
|
|
|
- })
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-</script>
|
|
|
-<style lang="less">
|
|
|
- body {
|
|
|
- background-repeat: no-repeat;
|
|
|
- background-position: top center;
|
|
|
- background-image: url(../../assets/bg.jpg);
|
|
|
- line-height: 1.15;
|
|
|
- background-color: #010a37;
|
|
|
- }
|
|
|
-
|
|
|
- .main {
|
|
|
- position: relative;
|
|
|
- min-width: 1024px;
|
|
|
- max-width: 1920px;
|
|
|
- margin: 0 auto;
|
|
|
- height: 89%;
|
|
|
- padding: 0.5% 0.5%;
|
|
|
- box-box-sizing: border-box;
|
|
|
- display: flex;
|
|
|
- flex-direction: row;
|
|
|
- }
|
|
|
-
|
|
|
- .main .opacity {
|
|
|
- position: absolute;
|
|
|
- left: 0;
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- z-index: -1;
|
|
|
- background: rgba(46, 46, 46, 0.3);
|
|
|
- top: 0;
|
|
|
- }
|
|
|
-
|
|
|
- .main .column {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- }
|
|
|
-
|
|
|
- .main .column.head {
|
|
|
- width: 40%;
|
|
|
- justify-content: space-between;
|
|
|
- margin-right: 1%;
|
|
|
- }
|
|
|
-
|
|
|
- .main .column.footer {
|
|
|
- width: 60%;
|
|
|
- justify-content: space-between;
|
|
|
- }
|
|
|
-
|
|
|
- .main .column .panel {
|
|
|
- height: 100%;
|
|
|
- width: 100%;
|
|
|
- border: 0.0125rem rgba(25, 186, 139, 0.17) solid;
|
|
|
- padding: 0 0.1875rem 0.5rem;
|
|
|
- position: relative;
|
|
|
- }
|
|
|
-
|
|
|
- .main .column.head .panel:nth-child(1) {
|
|
|
- width: 100%;
|
|
|
- height: 49%;
|
|
|
- margin-bottom: 1.5%;
|
|
|
- }
|
|
|
-
|
|
|
- .main .column.head .panel:nth-child(2) {
|
|
|
- width: 100%;
|
|
|
- height: 49%;
|
|
|
- }
|
|
|
-
|
|
|
- .main .column.footer .panel:nth-child(1) {
|
|
|
- width: 100%;
|
|
|
- margin-bottom: 1.5%;
|
|
|
- }
|
|
|
-
|
|
|
- .main .column.footer .panel:nth-child(2) {
|
|
|
- width: 100%;
|
|
|
- }
|
|
|
-
|
|
|
- .main .column .panel::before {
|
|
|
- content: "";
|
|
|
- display: block;
|
|
|
- position: absolute;
|
|
|
- top: 0;
|
|
|
- left: 0;
|
|
|
- width: 10px;
|
|
|
- height: 10px;
|
|
|
- border-top: 2px #02a6b5 solid;
|
|
|
- border-left: 2px #02a6b5 solid;
|
|
|
- }
|
|
|
-
|
|
|
- .main .column .panel::after {
|
|
|
- content: "";
|
|
|
- display: block;
|
|
|
- position: absolute;
|
|
|
- top: 0;
|
|
|
- right: 0;
|
|
|
- width: 10px;
|
|
|
- height: 10px;
|
|
|
- border-top: 2px #02a6b5 solid;
|
|
|
- border-right: 2px #02a6b5 solid;
|
|
|
- }
|
|
|
-
|
|
|
- .main .column .panel .panel-footer {
|
|
|
- position: absolute;
|
|
|
- bottom: 0;
|
|
|
- left: 0;
|
|
|
- width: 100%;
|
|
|
- height: 10px;
|
|
|
- }
|
|
|
-
|
|
|
- .main .column .panel .panel-footer::before {
|
|
|
- content: "";
|
|
|
- display: block;
|
|
|
- position: absolute;
|
|
|
- top: 0;
|
|
|
- left: 0;
|
|
|
- width: 10px;
|
|
|
- height: 10px;
|
|
|
- border-bottom: 2px #02a6b5 solid;
|
|
|
- border-left: 2px #02a6b5 solid;
|
|
|
- }
|
|
|
-
|
|
|
- .main .column .panel .panel-footer::after {
|
|
|
- content: "";
|
|
|
- display: block;
|
|
|
- position: absolute;
|
|
|
- top: 0;
|
|
|
- right: 0;
|
|
|
- width: 10px;
|
|
|
- height: 10px;
|
|
|
- border-bottom: 2px #02a6b5 solid;
|
|
|
- border-right: 2px #02a6b5 solid;
|
|
|
- }
|
|
|
-
|
|
|
- .main .column .panel h2 {
|
|
|
- color: #fff;
|
|
|
- font-weight: normal;
|
|
|
- font-size: 1.1rem;
|
|
|
- margin: 0;
|
|
|
- text-align: center;
|
|
|
- margin-top: 0.8rem;
|
|
|
- margin-bottom: 12px;
|
|
|
- }
|
|
|
-
|
|
|
- .main .statusBox {
|
|
|
- padding: 0 12px;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- justify-content: space-around;
|
|
|
- align-items: center;
|
|
|
- height: 93%;
|
|
|
- }
|
|
|
-
|
|
|
- .main .statusLine {
|
|
|
- display: flex;
|
|
|
- flex-direction: row;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- }
|
|
|
-
|
|
|
- .main .statusBox .statusItem {
|
|
|
- display: flex;
|
|
|
- flex-direction: row;
|
|
|
- justify-content: flex-start;
|
|
|
- align-items: center;
|
|
|
- margin-right: 12px;
|
|
|
- }
|
|
|
-
|
|
|
- .main .statusBox .statusItem i {
|
|
|
- display: block;
|
|
|
- width: 18px;
|
|
|
- height: 18px;
|
|
|
- border-radius: 50%;
|
|
|
- margin-right: 4px;
|
|
|
- border: 1px solid #fff;
|
|
|
- }
|
|
|
-
|
|
|
- .main .rowBox {
|
|
|
- display: flex;
|
|
|
- flex-direction: row;
|
|
|
- justify-content: flex-start;
|
|
|
- align-items: center;
|
|
|
- width: 100%;
|
|
|
- flex-wrap: wrap;
|
|
|
- }
|
|
|
-
|
|
|
- .main .rowBox .rowItem {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- margin-right: 2.7%;
|
|
|
- margin-bottom: 2%;
|
|
|
- }
|
|
|
-
|
|
|
- .main .rowBox .rowItem:nth-child(8n) {
|
|
|
- margin-right: 0%;
|
|
|
- }
|
|
|
-
|
|
|
- .main .status_round {
|
|
|
- width: 50px;
|
|
|
- height: 50px;
|
|
|
- border-radius: 50%;
|
|
|
- text-align: center;
|
|
|
- line-height: 50px;
|
|
|
- font-size: 14px;
|
|
|
- margin-bottom: 6px;
|
|
|
- }
|
|
|
-
|
|
|
- .main .task {
|
|
|
- display: flex;
|
|
|
- flex-direction: row;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- font-size: 12px;
|
|
|
- }
|
|
|
-
|
|
|
- .main .task span {
|
|
|
- font-family: DIN-Bold;
|
|
|
- }
|
|
|
-
|
|
|
- .main .table {
|
|
|
- height: 90%;
|
|
|
- }
|
|
|
-
|
|
|
- .main .table .header {
|
|
|
- width: 100%;
|
|
|
- overflow: hidden;
|
|
|
- padding: 0 12px;
|
|
|
- margin-bottom: 12px;
|
|
|
- }
|
|
|
-
|
|
|
- .main .table .header span {
|
|
|
- display: inline-block;
|
|
|
- width: 16.6%;
|
|
|
- text-align: left;
|
|
|
- font-size: 14px;
|
|
|
- color: #bdbaba;
|
|
|
- padding-bottom: 6px;
|
|
|
- border-bottom: 1px solid #8d8686;
|
|
|
- }
|
|
|
-
|
|
|
- .main .table .center {
|
|
|
- padding: 0 12px;
|
|
|
- height: 87%;
|
|
|
- overflow: hidden;
|
|
|
- }
|
|
|
-
|
|
|
- .main .table .center .item {
|
|
|
- width: 100%;
|
|
|
- overflow: hidden;
|
|
|
- margin-bottom: 8px;
|
|
|
- }
|
|
|
-
|
|
|
- .main .table .center .item span {
|
|
|
- display: inline-block;
|
|
|
- width: 25%;
|
|
|
- text-align: left;
|
|
|
- font-size: 14px;
|
|
|
- color: #bdbaba;
|
|
|
- font-family: DIN-Bold;
|
|
|
- }
|
|
|
-
|
|
|
- .main .table.five .center .item span {
|
|
|
- width: 20%;
|
|
|
- }
|
|
|
-
|
|
|
- .warnBox {
|
|
|
- height: 90%;
|
|
|
- overflow: hidden;
|
|
|
- }
|
|
|
-
|
|
|
- .taskInfos {
|
|
|
- width: 100%;
|
|
|
- height: 49%;
|
|
|
- }
|
|
|
-
|
|
|
- .yellow-circle {
|
|
|
- width: 15px; /* 设置宽度 */
|
|
|
- height: 15px; /* 设置高度 */
|
|
|
- background-color: yellow; /* 设置背景颜色为黄色 */
|
|
|
- border-radius: 50%; /* 设置边界半径为50%，使得形状变成圆形 */
|
|
|
- }
|
|
|
-
|
|
|
- .red-circle {
|
|
|
- width: 15px; /* 设置宽度 */
|
|
|
- height: 15px; /* 设置高度 */
|
|
|
- background-color: red; /* 设置背景颜色为黄色 */
|
|
|
- border-radius: 50%; /* 设置边界半径为50%，使得形状变成圆形 */
|
|
|
- }
|
|
|
-
|
|
|
- .green-circle {
|
|
|
- width: 15px; /* 设置宽度 */
|
|
|
- height: 15px; /* 设置高度 */
|
|
|
- background-color: #0be10b; /* 设置背景颜色为黄色 */
|
|
|
- border-radius: 50%; /* 设置边界半径为50%，使得形状变成圆形 */
|
|
|
- }
|
|
|
- .SelectBG {
|
|
|
- background-color: #FF0000;
|
|
|
- }
|
|
|
- .WarnBG {
|
|
|
- background-color: #FFFF00;
|
|
|
- }
|
|
|
-</style>
|
