Skip to content

Z
zhongtong-avi-web
Commit d08ca234 authored by 李志鸣's avatar 李志鸣
Browse files
Options

fea(LED权限): 新增LED权限

parents 7fad61e5 5232448a
Hide whitespace changes
Inline Side-by-side
Showing with 1504 additions and 585 deletions
config/index.js
View file @ d08ca234
...@@ -15,7 +15,7 @@ module.exports = { ...@@ -15,7 +15,7 @@ module.exports = {
'/host': { '/host': {
target: 'http://10.100.172.150:9108', //设置你调用的接口域名和端口号 别忘了加http target: 'http://10.100.172.150:9108', //设置你调用的接口域名和端口号 别忘了加http
// target: 'http://192.168.43.244:8888', // 东伟服务器地址 // target: 'http://192.168.43.244:8888', // 东伟服务器地址
// target: 'http://192.168.0.199:8080', // 训浩服务器 // target: 'http://192.168.0.126:8080', // 训浩服务器
changeOrigin: true, changeOrigin: true,
pathRewrite: { pathRewrite: {
'^/host': ''//这里理解成用‘/host’代替target里面的地址，后面组件中我们掉接口时直接用api代替 比如我要调用'http://40.00.100.100:3002/user/add'，直接写‘/api/user/add’即可 '^/host': ''//这里理解成用‘/host’代替target里面的地址，后面组件中我们掉接口时直接用api代替 比如我要调用'http://40.00.100.100:3002/user/add'，直接写‘/api/user/add’即可
......
debug.log
View file @ d08ca234
[0408/142129.522:ERROR:http_transport_win.cc(276)] WinHttpSendRequest: 操作成功完成。 (0x0) [0408/142129.522:ERROR:http_transport_win.cc(276)] WinHttpSendRequest: 操作成功完成。 (0x0)
[0425/144329.683:ERROR:http_transport_win.cc(276)] WinHttpSendRequest: 操作成功完成。 (0x0) [0425/144329.683:ERROR:http_transport_win.cc(276)] WinHttpSendRequest: 操作成功完成。 (0x0)
[0514/182116.443:ERROR:http_transport_win.cc(276)] WinHttpSendRequest: 操作成功完成。 (0x0) [0514/182116.443:ERROR:http_transport_win.cc(276)] WinHttpSendRequest: 操作成功完成。 (0x0)
[1024/194707.205:ERROR:http_transport_win.cc(276)] WinHttpSendRequest: 操作成功完成。 (0x0)
src/lang/zh/route.js
View file @ d08ca234
...@@ -45,6 +45,7 @@ export default { ...@@ -45,6 +45,7 @@ export default {
StationFloatingCoatRobot: '中涂机器人', StationFloatingCoatRobot: '中涂机器人',
StationSurfaceVarnish: '面/清漆', StationSurfaceVarnish: '面/清漆',
StationSprayDryingRoom: '喷漆/烘干室', StationSprayDryingRoom: '喷漆/烘干室',
StationPaintingWorkShop: '涂装车间',
// 监控大屏 // 监控大屏
CenterControl: '监控大屏', CenterControl: '监控大屏',
CenterControlIndex: '监控大屏' CenterControlIndex: '监控大屏'
......
src/permission.js
View file @ d08ca234
...@@ -18,7 +18,9 @@ const whiteList = [ ...@@ -18,7 +18,9 @@ const whiteList = [
'/led/stationApplyArtificial', '/led/stationApplyArtificial',
'/led/stationFloatingCoatRobot', '/led/stationFloatingCoatRobot',
'/led/stationSurfaceVarnish', '/led/stationSurfaceVarnish',
'/led/stationSprayDryingRoom' '/led/stationSprayDryingRoom',
'/led/stationPaintingWorkShop',
'/monitor/monitorIndex'
] ]
NProgress.configure({ NProgress.configure({
......
src/router/index.js
View file @ d08ca234
...@@ -24,7 +24,7 @@ import laboratoryRouter from './modules/laboratory' ...@@ -24,7 +24,7 @@ import laboratoryRouter from './modules/laboratory'
// 涂装生产计划 // 涂装生产计划
import productionPlanRouter from './modules/productionPlan' import productionPlanRouter from './modules/productionPlan'
// AVI大屏 // AVI大屏
import monitorRouter from './modules/monitor' // import monitorRouter from './modules/monitor'
// 监控大屏 // 监控大屏
import centerControl from './modules/centerControll' import centerControl from './modules/centerControll'
// 系统管理 // 系统管理
...@@ -65,7 +65,7 @@ export const constantRouterMap = [{ ...@@ -65,7 +65,7 @@ export const constantRouterMap = [{
{ {
path: 'stationInsulatingAnticorrosive', //隔热防腐 path: 'stationInsulatingAnticorrosive', //隔热防腐
component: () => import('@/views/Led/Station/insulatingAnticorrosive'), component: () => import('@/views/Led/Station/insulatingAnticorrosive'),
name: 'stationInsulatingAnticorrosive', name: 'StationInsulatingAnticorrosive',
meta: { title: 'stationInsulatingAnticorrosive', icon: 'template' } meta: { title: 'stationInsulatingAnticorrosive', icon: 'template' }
}, },
{ {
...@@ -97,6 +97,75 @@ export const constantRouterMap = [{ ...@@ -97,6 +97,75 @@ export const constantRouterMap = [{
component: () => import('@/views/Led/Station/sprayDryingRoom'), component: () => import('@/views/Led/Station/sprayDryingRoom'),
name: 'StationSprayDryingRoom', name: 'StationSprayDryingRoom',
meta: { title: 'StationSprayDryingRoom', icon: 'template' } meta: { title: 'StationSprayDryingRoom', icon: 'template' }
},
{
path: 'stationPaintingWorkShop', //涂装车间
component: () => import('@/views/Led/Station/paintingWorkShop'),
name: 'StationPaintingWorkShop',
meta: { title: 'StationPaintingWorkShop', icon: 'template' }
}
]
},
{
path: '/monitor',
component: () => import('@/views/Layout/lsd'),
redirect: '/monitor/index',
meta: { title: 'Monitor', icon: 'kanban', openNewWindow: true },
children: [
{
path: 'monitorIndex',
component: () => import('@/views/Monitor/index'),
name: 'MonitorIndex',
meta: { title: 'MonitorIndex', icon: 'kanban', mark: '/Monitor/index' }
},
{
path: 'monitorPutty',
component: () => import('@/views/Monitor/components/Putty'),
name: 'MonitorPutty',
meta: { title: 'MonitorPutty', icon: 'kanban' },
hidden: true
},
{
path: 'monitorMiddleCoat',
component: () => import('@/views/Monitor/components/MiddleCoat'),
name: 'MonitorMiddleCoat',
meta: { title: 'MonitorMiddleCoat', icon: 'kanban' },
hidden: true
},
{
path: 'monitorComplexionPaint',
component: () => import('@/views/Monitor/components/ComplexionPaint'),
name: 'MonitorComplexionPaint',
meta: { title: 'MonitorComplexionPaint', icon: 'kanban' },
hidden: true
},
{
path: 'monitorElectrophoresis',
component: () => import('@/views/Monitor/components/Electrophoresis'),
name: 'MonitorElectrophoresis',
meta: { title: 'MonitorElectrophoresis', icon: 'kanban' },
hidden: true
},
{
path: 'monitorFinishedCar',
component: () => import('@/views/Monitor/components/FinishedCar'),
name: 'MonitorFinishedCar',
meta: { title: 'MonitorFinishedCar', icon: 'kanban' },
hidden: true
},
{
path: 'monitorSealedAnticorrosion',
component: () => import('@/views/Monitor/components/SealedAnticorrosion'),
name: 'MonitorSealedAnticorrosion',
meta: { title: 'MonitorSealedAnticorrosion', icon: 'kanban' },
hidden: true
},
{
path: 'monitorSheetMetalCar',
component: () => import('@/views/Monitor/components/SheetMetalCar'),
name: 'MonitorSheetMetalCar',
mate: { title: 'MonitorSheetMetalCar', icon: 'kanban' },
hidden: true
} }
] ]
}] }]
......
src/router/modules/basic.js
View file @ d08ca234
...@@ -18,13 +18,13 @@ export default { ...@@ -18,13 +18,13 @@ export default {
path: 'deviceBasic', path: 'deviceBasic',
component: () => import('@/views/Basic/DeviceBasic/list'), component: () => import('@/views/Basic/DeviceBasic/list'),
name: 'DeviceBasic', name: 'DeviceBasic',
meta: {title: 'DeviceBasic', icon: 'document', noCache: false} meta: {title: 'DeviceBasic', icon: 'document', noCache: false, mark: '/Basic/DeviceBasic/list'}
}, },
{ {
path: 'laneBasic', path: 'laneBasic',
component: () => import('@/views/Basic/LaneBasic/list'), component: () => import('@/views/Basic/LaneBasic/list'),
name: 'LaneBasic', name: 'LaneBasic',
meta: {title: 'LaneBasic', icon: 'document', noCache: false} meta: {title: 'LaneBasic', icon: 'document', noCache: false, mark: '/Basic/LaneBasic/list'}
} }
] ]
} }
src/router/modules/centerControll.js
View file @ d08ca234
...@@ -10,7 +10,7 @@ export default { ...@@ -10,7 +10,7 @@ export default {
path: 'index', path: 'index',
component: () => import('@/views/CenterControl/index'), component: () => import('@/views/CenterControl/index'),
name: 'CenterControlIndex', name: 'CenterControlIndex',
meta: { title: 'CenterControlIndex', icon: 'template' } meta: { title: 'CenterControlIndex', icon: 'template', mark: '/CenterControl/index' }
} }
] ]
} }
src/router/modules/deviceRunning.js
View file @ d08ca234
...@@ -12,13 +12,13 @@ export default { ...@@ -12,13 +12,13 @@ export default {
path: 'deviceRunningTime', path: 'deviceRunningTime',
component: () => import('@/views/DeviceRunning/DeviceRunningTime/list'), component: () => import('@/views/DeviceRunning/DeviceRunningTime/list'),
name: 'DeviceRunningTime', name: 'DeviceRunningTime',
meta: { title: 'DeviceRunningTime', icon: 'repairApplication', noCache: false } meta: { title: 'DeviceRunningTime', icon: 'repairApplication', noCache: false, mark: '/DeviceRunning/DeviceRunningTime/list' }
}, },
{ {
path: 'deviceFaultRecord', path: 'deviceFaultRecord',
component: () => import('@/views/DeviceRunning/DeviceFaultRecord/list'), component: () => import('@/views/DeviceRunning/DeviceFaultRecord/list'),
name: 'DeviceFaultRecord', name: 'DeviceFaultRecord',
meta: { title: 'DeviceFaultRecord', icon: 'repairApplication', noCache: false } meta: { title: 'DeviceFaultRecord', icon: 'repairApplication', noCache: false, mark: '/DeviceRunning/DeviceFaultRecord/list' }
} }
] ]
} }
src/router/modules/laboratory.js
View file @ d08ca234
...@@ -9,19 +9,19 @@ export default { ...@@ -9,19 +9,19 @@ export default {
path: 'pickling', path: 'pickling',
component: () => import('@/views/Laboratory/Pickling/list'), component: () => import('@/views/Laboratory/Pickling/list'),
name: 'Pickling', name: 'Pickling',
meta: { title: 'Pickling', icon: 'deal', noCache: false } meta: { title: 'Pickling', icon: 'template', noCache: false, mark: '/Laboratory/Pickling/list' }
}, },
{ {
path: 'electrophoresisTank', path: 'electrophoresisTank',
component: () => import('@/views/Laboratory/ElectrophoresisTank/list'), component: () => import('@/views/Laboratory/ElectrophoresisTank/list'),
name: 'ElectrophoresisTank', name: 'ElectrophoresisTank',
meta: { title: 'ElectrophoresisTank', icon: 'deal', noCache: false } meta: { title: 'ElectrophoresisTank', icon: 'template', noCache: false, mark: '/Laboratory/ElectrophoresisTank/list' }
}, },
{ {
path: 'pretreatment', path: 'pretreatment',
component: () => import('@/views/Laboratory/Pretreatment/list'), component: () => import('@/views/Laboratory/Pretreatment/list'),
name: 'Pretreatment', name: 'Pretreatment',
meta: { title: 'Pretreatment', icon: 'deal', noCache: false } meta: { title: 'Pretreatment', icon: 'template', noCache: false, mark: '/Laboratory/Pretreatment/list' }
} }
] ]
} }
src/router/modules/monitor.js
View file @ d08ca234
...@@ -11,7 +11,7 @@ export default { ...@@ -11,7 +11,7 @@ export default {
path: 'monitorIndex', path: 'monitorIndex',
component: () => import('@/views/Monitor/index'), component: () => import('@/views/Monitor/index'),
name: 'MonitorIndex', name: 'MonitorIndex',
meta: { title: 'MonitorIndex', icon: 'kanban' } meta: { title: 'MonitorIndex', icon: 'kanban', mark: '/Monitor/index' }
}, },
{ {
path: 'monitorPutty', path: 'monitorPutty',
......
src/router/modules/workshop.js
View file @ d08ca234
...@@ -12,37 +12,37 @@ export default { ...@@ -12,37 +12,37 @@ export default {
path: 'parts', path: 'parts',
component: () => import('@/views/Workshop/Parts/list'), component: () => import('@/views/Workshop/Parts/list'),
name: 'Parts', name: 'Parts',
meta: { title: 'Parts', icon: 'wareHouse', noCache: false } meta: { title: 'Parts', icon: 'wareHouse', noCache: false, mark: '/Workshop/Parts/list' }
}, },
{ {
path: 'welding', path: 'welding',
component: () => import('@/views/Workshop/Welding/list'), component: () => import('@/views/Workshop/Welding/list'),
name: 'Welding', name: 'Welding',
meta: { title: 'Welding', icon: 'wareHouse', noCache: false } meta: { title: 'Welding', icon: 'wareHouse', noCache: false, mark: '/Workshop/Welding/list' }
}, },
{ {
path: 'painting', path: 'painting',
component: () => import('@/views/Workshop/Painting/list'), component: () => import('@/views/Workshop/Painting/list'),
name: 'Painting', name: 'Painting',
meta: { title: 'Painting', icon: 'wareHouse', noCache: false } meta: { title: 'Painting', icon: 'wareHouse', noCache: false, mark: '/Workshop/Painting/list' }
}, },
{ {
path: 'chassis', path: 'chassis',
component: () => import('@/views/Workshop/Chassis/list'), component: () => import('@/views/Workshop/Chassis/list'),
name: 'Chassis', name: 'Chassis',
meta: { title: 'Chassis', icon: 'wareHouse', noCache: false } meta: { title: 'Chassis', icon: 'wareHouse', noCache: false, mark: '/Workshop/Chassis/list' }
}, },
{ {
path: 'final', path: 'final',
component: () => import('@/views/Workshop/Final/list'), component: () => import('@/views/Workshop/Final/list'),
name: 'Final', name: 'Final',
meta: { title: 'Final', icon: 'wareHouse', noCache: false } meta: { title: 'Final', icon: 'wareHouse', noCache: false, mark: '/Workshop/Final/list' }
}, },
{ {
path: 'trial', path: 'trial',
component: () => import('@/views/Workshop/Trial/list'), component: () => import('@/views/Workshop/Trial/list'),
name: 'Trial', name: 'Trial',
meta: { title: 'Trial', icon: 'wareHouse', noCache: false } meta: { title: 'Trial', icon: 'wareHouse', noCache: false, mark: '/Workshop/Trial/list' }
} }
] ]
} }
src/views/CenterControl/index.vue
View file @ d08ca234
...@@ -43,6 +43,7 @@ ...@@ -43,6 +43,7 @@
import MachineWarning from './components/MachineWarning' import MachineWarning from './components/MachineWarning'
export default { export default {
name: 'CenterControl',
components: { components: {
MachineUtilizationRate, MachineUtilizationRate,
MachineFailureRate, MachineFailureRate,
......
src/views/Led/Station/applyArtificial.vue
View file @ d08ca234
<template> <template>
<div class="page-pack" :style="{transform: zoom}" style="transform-origin: 0 0"> <div class="container">
<div class="page-pack" :style="{transform: zoom}" style="transform-origin: 0 0">
<div class="title-pack">{{timmingData.name}}</div> <div class="title-pack">{{timmingData.name}}</div>
<div class="table-pack"> <div class="table-pack">
<div class="tr"> <div class="tr">
...@@ -17,15 +18,17 @@ ...@@ -17,15 +18,17 @@
<swiper-slide v-for="(item, index) in warningList" :key="index">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{warningList[index].name}}：{{warningList[index].info}}</swiper-slide> <swiper-slide v-for="(item, index) in warningList" :key="index">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{warningList[index].name}}：{{warningList[index].info}}</swiper-slide>
</swiper> </swiper>
</div> </div>
<div class="time">时间：{{ formatTime(timeNow,'YYYY-MM-DD HH:mm:ss') }}</div> <div class="time">时间：{{ timeNow }}</div>
</div> </div>
</div> </div>
</div>
</template> </template>
<script> <script>
import { swiper, swiperSlide } from 'vue-awesome-swiper' import { swiper, swiperSlide } from 'vue-awesome-swiper'
import Moment from 'moment' import Moment from 'moment'
export default { export default {
name: 'StationApplyArtificial',
components: { components: {
swiper, swiper,
swiperSlide swiperSlide
...@@ -35,7 +38,7 @@ ...@@ -35,7 +38,7 @@
// 实时数据 // 实时数据
timmingData: {}, timmingData: {},
// 报警数据 // 报警数据
warningList: {}, warningList: [],
width: 0, width: 0,
height: 0, height: 0,
zoom: 'scale(0)', zoom: 'scale(0)',
...@@ -54,13 +57,12 @@ ...@@ -54,13 +57,12 @@
} }
}, },
methods: { methods: {
// 时间日期格式化 // 实时时间
formatTime (time, format) { judgeTimeNow () {
if (time !== null && time !== '') { this.timeNow = Moment().format('YYYY-MM-DD HH:mm:ss')
return Moment(time).format(format) this.timer = setInterval(() => {
} else { this.timeNow = Moment().format('YYYY-MM-DD HH:mm:ss')
return '暂无' }, 1000)
}
}, },
//获取工位实时信息 //获取工位实时信息
getData () { getData () {
...@@ -72,20 +74,18 @@ ...@@ -72,20 +74,18 @@
} }
}, },
mounted () { mounted () {
this.getData()
this.dataTimer = setInterval(() => {
this.getData()
}, 60000)
let vm = this
// 模拟时间运作
this.timer = setInterval(() => {
vm.timeNow = vm.formatTime()
}, 1000)
setTimeout(() => { setTimeout(() => {
this.getData()
// 实时时间
this.judgeTimeNow()
this.dataTimer = setInterval(() => {
this.getData()
}, 60000)
this.width = document.body.offsetWidth this.width = document.body.offsetWidth
this.height = document.body.offsetHeight this.height = document.body.offsetHeight
this.zoom = `scale(${this.width / 1710})` this.zoom = `scale(${this.width / 1710})`
}, 3000) console.log(this.zoom)
}, 0)
}, },
beforeDestroy () { beforeDestroy () {
if (this.timer) { if (this.timer) {
...@@ -99,72 +99,81 @@ ...@@ -99,72 +99,81 @@
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.page-pack { .container {
width: 1710px; width: 100%;
height: 860px; height: 100%;
background-color: #111; background-color: #111;
.page-pack {
.title-pack {
width: 1710px; width: 1710px;
height: 100px; height: 860px;
text-align: center; background-color: #111;
color: yellow;
line-height: 100px;
font-weight: bold;
font-size: 60px;
}
.table-pack { .title-pack {
overflow: hidden;
.tr {
width: 1710px; width: 1710px;
height: 102px; height: 100px;
text-align: center;
color: yellow;
line-height: 100px;
font-weight: bold;
font-size: 60px;
}
.th-l { .table-pack {
width: 853px; overflow: hidden;
height: 100px;
.tr {
width: 1710px;
height: 102px;
.th-l {
width: 853px;
height: 100px;
border-top: 2px solid yellow;
border-right: 2px solid yellow;
float: left;
text-align: center;
color: yellow;
line-height: 100px;
font-weight: bold;
font-size: 60px;
}
.th-r {
width: 855px;
height: 100px;
border-top: 2px solid yellow;
float: left;
text-align: center;
color: yellow;
line-height: 100px;
font-weight: bold;
font-size: 60px;
}
}
.info {
width: 1710px;
height: 353px;
border-top: 2px solid yellow; border-top: 2px solid yellow;
border-right: 2px solid yellow;
float: left;
text-align: center;
color: yellow; color: yellow;
line-height: 100px;
font-weight: bold; font-weight: bold;
font-size: 60px; font-size: 60px;
.swiper-slide{
word-wrap: break-word;
word-break: break-all;
}
} }
.th-r { .time {
width: 855px; width: 1710px;
height: 100px; height: 100px;
border-top: 2px solid yellow; border-top: 2px solid yellow;
float: left;
text-align: center;
color: yellow; color: yellow;
line-height: 100px;
font-weight: bold; font-weight: bold;
line-height: 100px;
font-size: 60px; font-size: 60px;
} }
}
.info {
width: 1710px;
height: 353px;
border-top: 2px solid yellow;
color: yellow;
font-weight: bold;
font-size: 60px;
}
.time {
width: 1710px;
height: 100px;
border-top: 2px solid yellow;
color: yellow;
font-weight: bold;
line-height: 100px;
font-size: 60px;
} }
} }
} }
......
src/views/Led/Station/electrophoresis.vue
View file @ d08ca234
<template> <template>
<div class="page-pack" :style="{transform: zoom}" style="transform-origin: 0 0;"> <div class="container">
<div class="page-pack" :style="{transform: zoom}" style="transform-origin: 0 0;">
<div class="title-pack">{{timmingData.name}}</div> <div class="title-pack">{{timmingData.name}}</div>
<div class="table-pack"> <div class="table-pack">
<div class="tr"> <div class="tr">
...@@ -17,15 +18,18 @@ ...@@ -17,15 +18,18 @@
<swiper-slide v-for="(item, index) in warningList" :key="index">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{warningList[index].name}}：{{warningList[index].info}}</swiper-slide> <swiper-slide v-for="(item, index) in warningList" :key="index">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{warningList[index].name}}：{{warningList[index].info}}</swiper-slide>
</swiper> </swiper>
</div> </div>
<div class="time">时间：{{ formatTime(timeNow,'YYYY-MM-DD HH:mm:ss') }}</div> <div class="time">时间：{{ timeNow }}</div>
</div> </div>
</div> </div>
</div>
</template> </template>
<script> <script>
import { swiper, swiperSlide } from 'vue-awesome-swiper' import { swiper, swiperSlide } from 'vue-awesome-swiper'
import Moment from 'moment' import Moment from 'moment'
export default { export default {
name: 'StationElectrophoresis',
components: { components: {
swiper, swiper,
swiperSlide swiperSlide
...@@ -35,7 +39,7 @@ ...@@ -35,7 +39,7 @@
// 工位实时数据 // 工位实时数据
timmingData: {}, timmingData: {},
// 报警数据 // 报警数据
warningList: {}, warningList: [],
width: 0, width: 0,
height: 0, height: 0,
zoom: 'scale(0)', zoom: 'scale(0)',
...@@ -54,14 +58,6 @@ ...@@ -54,14 +58,6 @@
} }
}, },
methods: { methods: {
// 时间日期格式化
formatTime (time, format) {
if (time !== null && time !== '') {
return Moment(time).format(format)
} else {
return '暂无'
}
},
//获取工位实时信息 //获取工位实时信息
getData () { getData () {
this.$fetch('led-controller/ledInfo-get', {ledNo: '2'}).then(res => { this.$fetch('led-controller/ledInfo-get', {ledNo: '2'}).then(res => {
...@@ -69,19 +65,26 @@ ...@@ -69,19 +65,26 @@
this.warningList = res.warningList; this.warningList = res.warningList;
// console.log(this.warningList) // console.log(this.warningList)
console.log(res) console.log(res)
console.log(this.width)
console.log(this.height)
}) })
},
// 实时时间
judgeTimeNow () {
this.timeNow = Moment().format('YYYY-MM-DD HH:mm:ss')
this.timer = setInterval(() => {
this.timeNow = Moment().format('YYYY-MM-DD HH:mm:ss')
}, 1000)
} }
}, },
mounted () { mounted () {
this.getData()
this.dataTimer = setInterval(() => {
this.getData()
}, 60000)
// 模拟时间运作
this.timer = setInterval(() => {
this.timeNow = this.formatTime()
}, 1000)
setTimeout(() => { setTimeout(() => {
this.getData()
// 实时时间
this.judgeTimeNow()
this.dataTimer = setInterval(() => {
this.getData()
}, 60000)
this.width = document.body.offsetWidth this.width = document.body.offsetWidth
this.height = document.body.offsetHeight this.height = document.body.offsetHeight
this.zoom = `scale(${this.width / 1710})` this.zoom = `scale(${this.width / 1710})`
...@@ -100,72 +103,81 @@ ...@@ -100,72 +103,81 @@
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.page-pack { .container {
width: 1710px; width: 100%;
height: 860px; height: 100%;
background-color: #111; background-color: #111;
.page-pack {
.title-pack {
width: 1710px; width: 1710px;
height: 100px; height: 860px;
text-align: center; background-color: #111;
color: yellow;
line-height: 100px;
font-weight: bold;
font-size: 60px;
}
.table-pack {
overflow: hidden;
.tr { .title-pack {
width: 1710px; width: 1710px;
height: 102px; height: 100px;
text-align: center;
color: yellow;
line-height: 100px;
font-weight: bold;
font-size: 60px;
}
.th-l { .table-pack {
width: 853px; overflow: hidden;
height: 100px;
.tr {
width: 1710px;
height: 102px;
.th-l {
width: 853px;
height: 100px;
border-top: 2px solid yellow;
border-right: 2px solid yellow;
float: left;
text-align: center;
color: yellow;
line-height: 100px;
font-weight: bold;
font-size: 60px;
}
.th-r {
width: 855px;
height: 100px;
border-top: 2px solid yellow;
float: left;
text-align: center;
color: yellow;
line-height: 100px;
font-weight: bold;
font-size: 60px;
}
}
.info {
width: 1710px;
height: 454px;
border-top: 2px solid yellow; border-top: 2px solid yellow;
border-right: 2px solid yellow;
float: left;
text-align: center;
color: yellow; color: yellow;
line-height: 100px;
font-weight: bold; font-weight: bold;
font-size: 60px; font-size: 60px;
.swiper-slide{
word-wrap: break-word;
word-break: break-all;
}
} }
.th-r { .time {
width: 855px; width: 1710px;
height: 100px; height: 100px;
border-top: 2px solid yellow; border-top: 2px solid yellow;
float: left;
text-align: center;
color: yellow; color: yellow;
line-height: 100px;
font-weight: bold; font-weight: bold;
line-height: 100px;
font-size: 60px; font-size: 60px;
} }
}
.info {
width: 1710px;
height: 454px;
border-top: 2px solid yellow;
color: yellow;
font-weight: bold;
font-size: 60px;
}
.time {
width: 1710px;
height: 100px;
border-top: 2px solid yellow;
color: yellow;
font-weight: bold;
line-height: 100px;
font-size: 60px;
} }
} }
} }
......
src/views/Led/Station/floatingCoatRobot.vue
View file @ d08ca234
<template> <template>
<div class="page-pack" :style="{transform: zoom}" style="transform-origin: 0 0"> <div class="container">
<div class="page-pack" :style="{transform: zoom}" style="transform-origin: 0 0">
<div class="title-pack">{{ timmingData.name }}</div> <div class="title-pack">{{ timmingData.name }}</div>
<div class="table-pack"> <div class="table-pack">
<div class="tr"> <div class="tr">
...@@ -17,15 +18,17 @@ ...@@ -17,15 +18,17 @@
<swiper-slide v-for="(item, index) in warningList" :key="index">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{warningList[index].name}}：{{warningList[index].info}}</swiper-slide> <swiper-slide v-for="(item, index) in warningList" :key="index">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{warningList[index].name}}：{{warningList[index].info}}</swiper-slide>
</swiper> </swiper>
</div> </div>
<div class="time">时间：{{ formatTime(timeNow,'YYYY-MM-DD HH:mm:ss') }}</div> <div class="time">时间：{{ timeNow }}</div>
</div> </div>
</div> </div>
</div>
</template> </template>
<script> <script>
import { swiper, swiperSlide } from 'vue-awesome-swiper' import { swiper, swiperSlide } from 'vue-awesome-swiper'
import Moment from 'moment' import Moment from 'moment'
export default { export default {
name: 'StationFloatingCoatRobot',
components: { components: {
swiper, swiper,
swiperSlide swiperSlide
...@@ -38,7 +41,7 @@ ...@@ -38,7 +41,7 @@
// 工位实时数据 // 工位实时数据
timmingData: {}, timmingData: {},
// 报警数据 // 报警数据
warningList: {}, warningList: [],
// 屏幕显示当前时间 // 屏幕显示当前时间
timeNow: '', timeNow: '',
// 定时器 // 定时器
...@@ -54,13 +57,12 @@ ...@@ -54,13 +57,12 @@
} }
}, },
methods: { methods: {
// 时间日期格式化 // 实时时间
formatTime (time, format) { judgeTimeNow () {
if (time !== null && time !== '') { this.timeNow = Moment().format('YYYY-MM-DD HH:mm:ss')
return Moment(time).format(format) this.timer = setInterval(() => {
} else { this.timeNow = Moment().format('YYYY-MM-DD HH:mm:ss')
return '暂无' }, 1000)
}
}, },
//获取工位实时信息 //获取工位实时信息
getData () { getData () {
...@@ -72,19 +74,18 @@ ...@@ -72,19 +74,18 @@
} }
}, },
mounted () { mounted () {
this.getData()
this.dataTimer = setInterval(() => {
this.getData()
}, 60000)
this.timer = setInterval(() => {
this.timeNow = this.formatTime()
// console.log(this.timeNow)
}, 1000)
setTimeout(() => { setTimeout(() => {
this.getData()
// 实时时间
this.judgeTimeNow()
this.dataTimer = setInterval(() => {
this.getData()
}, 60000)
this.width = document.body.offsetWidth this.width = document.body.offsetWidth
this.height = document.body.offsetHeight this.height = document.body.offsetHeight
this.zoom = `scale(${this.width / 1710})` this.zoom = `scale(${this.width / 1710})`
}, 3000) console.log(this.zoom)
}, 0)
}, },
beforeDestroy () { beforeDestroy () {
if (this.timer) { if (this.timer) {
...@@ -98,72 +99,82 @@ ...@@ -98,72 +99,82 @@
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.page-pack { .container {
width: 1710px; width: 100%;
height: 860px; height: 100%;
background-color: #111; background-color: #111;
.page-pack {
.title-pack {
width: 1710px; width: 1710px;
height: 100px; height: 860px;
text-align: center; background-color: #111;
color: yellow;
line-height: 100px;
font-weight: bold;
font-size: 60px;
}
.table-pack { .title-pack {
overflow: hidden;
.tr {
width: 1710px; width: 1710px;
height: 102px; height: 100px;
text-align: center;
color: yellow;
line-height: 100px;
font-weight: bold;
font-size: 60px;
}
.th-l { .table-pack {
width: 853px; overflow: hidden;
height: 100px;
.tr {
width: 1710px;
height: 102px;
.th-l {
width: 853px;
height: 100px;
border-top: 2px solid yellow;
border-right: 2px solid yellow;
float: left;
text-align: center;
color: yellow;
line-height: 100px;
font-weight: bold;
font-size: 60px;
}
.th-r {
width: 855px;
height: 100px;
border-top: 2px solid yellow;
float: left;
text-align: center;
color: yellow;
line-height: 100px;
font-weight: bold;
font-size: 60px;
}
}
.info {
width: 1710px;
height: 353px;
border-top: 2px solid yellow; border-top: 2px solid yellow;
border-right: 2px solid yellow;
float: left;
text-align: center;
color: yellow; color: yellow;
line-height: 100px;
font-weight: bold; font-weight: bold;
font-size: 60px; font-size: 60px;
.swiper-slide{
word-wrap: break-word;
word-break: break-all;
}
} }
.th-r { .time {
width: 855px; width: 1710px;
height: 100px; height: 100px;
border-top: 2px solid yellow; border-top: 2px solid yellow;
float: left;
text-align: center;
color: yellow; color: yellow;
line-height: 100px;
font-weight: bold; font-weight: bold;
line-height: 100px;
font-size: 60px; font-size: 60px;
} }
}
.info {
width: 1710px;
height: 353px;
border-top: 2px solid yellow;
color: yellow;
font-weight: bold;
font-size: 60px;
}
.time {
width: 1710px;
height: 100px;
border-top: 2px solid yellow;
color: yellow;
font-weight: bold;
line-height: 100px;
font-size: 60px;
} }
} }
} }
......
src/views/Led/Station/insulatingAnticorrosive.vue
View file @ d08ca234
<template> <template>
<div class="page-pack" :style="{transform: zoom}" style="transform-origin: 0 0;"> <div class="container">
<div class="page-pack" :style="{transform: zoom}" style="transform-origin: 0 0;">
<div class="title-pack">{{timmingData.name}}</div> <div class="title-pack">{{timmingData.name}}</div>
<div class="table-pack"> <div class="table-pack">
<div class="tr"> <div class="tr">
...@@ -17,15 +18,17 @@ ...@@ -17,15 +18,17 @@
<swiper-slide v-for="(item, index) in warningList" :key="index">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{warningList[index].name}}：{{warningList[index].info}}</swiper-slide> <swiper-slide v-for="(item, index) in warningList" :key="index">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{warningList[index].name}}：{{warningList[index].info}}</swiper-slide>
</swiper> </swiper>
</div> </div>
<div class="time">时间：{{ formatTime(timeNow,'YYYY-MM-DD HH:mm:ss') }}</div> <div class="time">时间：{{ timeNow }}</div>
</div> </div>
</div> </div>
</div>
</template> </template>
<script> <script>
import { swiper, swiperSlide } from 'vue-awesome-swiper' import { swiper, swiperSlide } from 'vue-awesome-swiper'
import Moment from 'moment' import Moment from 'moment'
export default { export default {
name: 'StationInsulatingAnticorrosive',
components: { components: {
swiper, swiper,
swiperSlide swiperSlide
...@@ -54,13 +57,12 @@ ...@@ -54,13 +57,12 @@
} }
}, },
methods: { methods: {
// 时间日期格式化 // 实时时间
formatTime (time, format) { judgeTimeNow () {
if (time !== null && time !== '') { this.timeNow = Moment().format('YYYY-MM-DD HH:mm:ss')
return Moment(time).format(format) this.timer = setInterval(() => {
} else { this.timeNow = Moment().format('YYYY-MM-DD HH:mm:ss')
return '暂无' }, 1000)
}
}, },
//获取工位实时信息 //获取工位实时信息
getData () { getData () {
...@@ -73,20 +75,18 @@ ...@@ -73,20 +75,18 @@
} }
}, },
mounted () { mounted () {
this.getData()
this.dataTimer = setInterval(() => {
this.getData()
}, 60000)
// 模拟时间运作
this.timer = setInterval(() => {
this.timeNow = this.formatTime()
}, 1000)
setTimeout(() => { setTimeout(() => {
this.getData()
// 实时时间
this.judgeTimeNow()
this.dataTimer = setInterval(() => {
this.getData()
}, 60000)
this.width = document.body.offsetWidth this.width = document.body.offsetWidth
this.height = document.body.offsetHeight this.height = document.body.offsetHeight
this.zoom = `scale(${this.width / 1710})` this.zoom = `scale(${this.width / 1710})`
console.log(`scale(${this.width / 1710})`) console.log(this.zoom)
}, 3000) }, 0)
}, },
beforeDestroy () { beforeDestroy () {
if (this.timer) { if (this.timer) {
...@@ -100,72 +100,81 @@ ...@@ -100,72 +100,81 @@
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.page-pack { .container {
width: 1710px; width: 100%;
height: 860px; height: 100%;
background-color: #111; background-color: #111;
.page-pack {
.title-pack {
width: 1710px; width: 1710px;
height: 100px; height: 860px;
text-align: center; background-color: #111;
color: yellow;
line-height: 100px;
font-weight: bold;
font-size: 60px;
}
.table-pack { .title-pack {
overflow: hidden;
.tr {
width: 1710px; width: 1710px;
height: 102px; height: 100px;
text-align: center;
color: yellow;
line-height: 100px;
font-weight: bold;
font-size: 60px;
}
.th-l { .table-pack {
width: 853px; overflow: hidden;
height: 100px;
.tr {
width: 1710px;
height: 102px;
.th-l {
width: 853px;
height: 100px;
border-top: 2px solid yellow;
border-right: 2px solid yellow;
float: left;
text-align: center;
color: yellow;
line-height: 100px;
font-weight: bold;
font-size: 60px;
}
.th-r {
width: 855px;
height: 100px;
border-top: 2px solid yellow;
float: left;
text-align: center;
color: yellow;
line-height: 100px;
font-weight: bold;
font-size: 60px;
}
}
.info {
width: 1710px;
height: 454px;
border-top: 2px solid yellow; border-top: 2px solid yellow;
border-right: 2px solid yellow;
float: left;
text-align: center;
color: yellow; color: yellow;
line-height: 100px;
font-weight: bold; font-weight: bold;
font-size: 60px; font-size: 60px;
.swiper-slide{
word-wrap: break-word;
word-break: break-all;
}
} }
.th-r { .time {
width: 855px; width: 1710px;
height: 100px; height: 100px;
border-top: 2px solid yellow; border-top: 2px solid yellow;
float: left;
text-align: center;
color: yellow; color: yellow;
line-height: 100px;
font-weight: bold; font-weight: bold;
line-height: 100px;
font-size: 60px; font-size: 60px;
} }
}
.info {
width: 1710px;
height: 454px;
border-top: 2px solid yellow;
color: yellow;
font-weight: bold;
font-size: 60px;
}
.time {
width: 1710px;
height: 100px;
border-top: 2px solid yellow;
color: yellow;
font-weight: bold;
line-height: 100px;
font-size: 60px;
} }
} }
} }
......
src/views/Led/Station/paintingWorkShop.vue 0 → 100644
View file @ d08ca234
<template>
<div class="container">
<div class="page-pack" style="transform-origin: 0 0">
<div class="title-pack">中通客车涂装车间</div>
<div class="table-pack">
<div class="tr clear-float">
<div class="th-l">昨日进车数量</div>
<div class="th-2">{{yesterdayDataIN.size}}</div>
<div class="th-3">昨日交车数量</div>
<div class="th-4">{{yesterdayDataOUT.size}}</div>
</div>
<div class="tr clear-float">
<div class="th-l">当日进车数量</div>
<div class="th-2">{{todayDataIN.size}}</div>
<div class="th-3">当日交车数量</div>
<div class="th-4">{{todayDataOUT.size}}</div>
</div>
<div class="tr clear-float">
<div class="th-l">电泳当日进车数量</div>
<div class="th-2">{{electrophoresesDataIN.size}}</div>
<div class="th-3">电泳当日交车数量</div>
<div class="th-4">{{electrophoresesDataOUT.size}}</div>
</div>
<div class="tr clear-float">
<div class="th-l">隔热防腐当日进车</div>
<div class="th-2">{{width}}</div>
<div class="th-3">隔热防腐当日交车</div>
<div class="th-4">{{height}}</div>
</div>
<div class="tr clear-float">
<div class="th-l">腻子当日进车数量</div>
<div class="th-2">{{height}}</div>
<div class="th-3">腻子当日交车数量</div>
<div class="th-4">{{width}}</div>
</div>
<div class="tr clear-float">
<div class="th-l">中涂当日进车数量</div>
<div class="th-2">{{height}}</div>
<div class="th-3">中涂当日交车数量</div>
<div class="th-4">{{width}}</div>
</div>
<div class="tr clear-float">
<div class="th-l borderBot">面/清漆当日进车数量</div>
<div class="th-2 borderBot">{{width}}</div>
<div class="th-3 borderBot">面/清漆当日交车数量</div>
<div class="th-4 borderBot">{{width}}</div>
</div>
<div class="time">时间：{{ timeNow }}</div>
</div>
</div>
</div>
</template>
<script>
import Moment from 'moment'
export default {
name: 'StationPaintingWorkShop',
data () {
return {
width: 0,
height: 0,
zoom: 'scale(0)',
// 屏幕显示当前时间
timeNow: '',
// Data轮询定时器
dataTimer: '',
// 当日进车数据
todayDataIN: {},
// 当日出车数据
todayDataOUT: {},
// 昨日进车数据
yesterdayDataIN: {},
// 昨日出车数据
yesterdayDataOUT: {},
// 电泳车辆进车数据
electrophoresesDataIN: {},
// 电泳车辆出车数据
electrophoresesDataOUT: {},
// 隔热防腐当日车辆进车数据
insulatingAnticorrosiveDataIN: {},
// 隔热防腐当日车辆出车数据
insulatingAnticorrosiveDataOUT: {},
// 腻子当日车辆进车数据
puttyDataIN: {},
// 腻子当日车辆出车数据
puttyDataOUT: {},
// 中涂当日车辆进车数据
floatingCoatDataIN: {},
// 中涂当日车辆出车数据
floatingCoatDataOUT: {},
// 面/清漆当日车辆进车数据
surfaceVarnishDataIN: {},
// 面/清漆当日车辆出车数据
surfaceVarnishDataOUT: {},
tempData: [
{
'id': null,
'areaNo': '0',
'dateType': 'YESTERDAY',
'busType': 'IN',
'size': 20
},
{
'id': null,
'areaNo': '0',
'dateType': 'YESTERDAY',
'busType': 'OUT',
'size': 20
},
{
'id': null,
'areaNo': '0',
'dateType': 'TODAY',
'busType': 'IN',
'size': 20
},
{
'id': null,
'areaNo': '0',
'dateType': 'TODAY',
'busType': 'OUT',
'size': 20
},
{
'id': null,
'areaNo': '2',
'dateType': 'TODAY',
'busType': 'OUT',
'size': 29
},
{
'id': null,
'areaNo': '4',
'dateType': 'TODAY',
'busType': 'OUT',
'size': 22
}
]
}
},
methods: {
judgeTimeNow () {
this.timeNow = Moment().format('YYYY-MM-DD HH-MM-SS')
this.timer = setInterval(() => {
this.timeNow = Moment().format('YYYY-MM-DD HH:mm:ss')
}, 1000)
},
getData () {
this.$fetch('area-controller/statistics-get', {}).then(res => {
console.log(res)
for (let item of this.tempData) {
if (item.areaNo === '0') {
// console.log(item)
if (item.dateType === 'YESTERDAY') {
if (item.busType === 'IN') {
this.yesterdayDataIN = _.cloneDeep(item);
} else {
this.yesterdayDataOUT = _.cloneDeep(item)
console.log(this.yesterdayDataOUT)
}
}
if (item.dateType === 'TODAY') {
if (item.busType === 'IN') {
this.todayDataIN = _.cloneDeep(item);
} else {
this.todayDataINOUT = _.cloneDeep(item)
console.log(this.todayDataINOUT)
}
}
}
// 判断电泳区域有无车辆数据
if (item.areaNo === '2') {
if (item.dateType === 'TODAY') {
if (item.busType === 'IN') {
this.electrophoresesDataIN = _.cloneDeep(item);
} else {
this.electrophoresesDataOUT = _.cloneDeep(item)
console.log(this.electrophoresesDataOUT)
}
}
}
// 判断隔热防腐区域有无车辆数据
if (item.areaNo === '3') {
if (item.dateType === 'TODAY') {
if (item.busType === 'IN') {
this.insulatingAnticorrosiveDataIN = _.cloneDeep(item);
} else {
this.insulatingAnticorrosiveDataOUT = _.cloneDeep(item)
console.log(this.insulatingAnticorrosiveDataOUT)
}
}
}
// 判断腻子区域有无车辆数据
if (item.areaNo === '4') {
if (item.dateType === 'TODAY') {
if (item.busType === 'IN') {
this.puttyDataIN = _.cloneDeep(item);
} else {
this.puttyDataOUT = _.cloneDeep(item)
console.log('65454555', this.puttyDataOUT)
}
}
}
// 判断中涂区域有无车辆数据
if (item.areaNo === '5') {
if (item.dateType === 'TODAY') {
if (item.busType === 'IN') {
this.floatingCoatDataIN = _.cloneDeep(item);
} else {
this.floatingCoatDataOUT = _.cloneDeep(item)
console.log(this.floatingCoatDataOUT)
}
}
}
// 判断面/清漆区域有无车辆数据
if (item.areaNo === '6') {
if (item.dateType === 'TODAY') {
if (item.busType === 'IN') {
this.surfaceVarnishDataIN = _.cloneDeep(item);
} else {
this.surfaceVarnishDataOUT = _.cloneDeep(item)
console.log(this.surfaceVarnishDataOUT)
}
}
}
}
})
}
},
mounted () {
this.getData()
setTimeout(() => {
this.getData()
// 实时时间
this.judgeTimeNow()
// 每一分钟请求一次数据
this.dataTimer = setInterval(() => {
this.getData()
}, 60000)
this.width = document.body.offsetWidth
this.height = document.body.offsetHeight
// this.zoom = `scale(${this.width / 1710})`
console.log(this.zoom)
}, 0)
}
}
</script>
<style lang="scss" scoped>
.container {
background-color: #111;
width: 100%;
height: 100%;
.page-pack {
width: 1556px;
height: 1037px;
background-color: #111;
.borderBot {
border-bottom: 2px solid yellow;
}
.title-pack {
width: 1556px;
height: 134px;
text-align: center;
color: yellow;
line-height: 134px;
font-weight: bold;
font-size: 60px;
}
.table-pack {
overflow: hidden;
.tr {
.th-l,.th-2,.th-3,.th-4 {
width: 30%;
height: 110.625px;
border-top: 2px solid yellow;
border-right: 2px solid yellow;
float: left;
text-align: center;
color: yellow;
line-height: 110.625px;
font-weight: bold;
font-size: 48px;
}
.th-2 {width: 20%; font-size:60px }
.th-3 {width: 29.5%;}
.th-4 {width: 20%;border-right: none; font-size:60px}
}
}
.time {
width: 1710px;
height: 110.625px;
border-top: 2px solid yellow;
color: yellow;
font-weight: bold;
line-height: 110.625px;
font-size: 48px;
}
}
}
</style>
\ No newline at end of file
src/views/Led/Station/putty.vue
View file @ d08ca234
<template> <template>
<div class="page-pack" :style="{transform: zoom}" style="transform-origin: 0 0"> <div class="container">
<div class="title-pack">{{timmingData.name}}</div> <div class="page-pack" :style="{transform: zoom}" style="transform-origin: 0 0">
<div class="table-pack"> <swiper :options="swiperOption2">
<div class="tr"> <swiper-slide>
<div class="th-l">进车数</div> <div class="title-pack">{{timmingData.name}}</div>
<div class="th-r">{{timmingData.busIn}}</div> <div class="table-pack">
</div> <div class="tr">
<div class="tr"> <div class="th-l">进车数</div>
<div class="th-l">出车数</div> <div class="th-r">{{timmingData.busIn}}</div>
<div class="th-r">{{timmingData.busOut}}</div> </div>
</div> <div class="tr">
<div class="info"> <div class="th-l">出车数</div>
设备报警信息： <div class="th-r">{{timmingData.busOut}}</div>
<div>&nbsp;</div> </div>
<swiper :options="swiperOption" ref="mySwiper"> <div class="info">
<swiper-slide v-for="(item, index) in warningList" :key="index">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{warningList[index].name}}：{{warningList[index].info}}</swiper-slide> 设备报警信息：
</swiper> <div>&nbsp;</div>
</div> <swiper :options="swiperOption">
<div class="time">时间：{{ formatTime(timeNow,'YYYY-MM-DD HH:mm:ss') }}</div> <swiper-slide v-for="(item, index) in warningList" :key="index">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{warningList[index].name}}：{{warningList[index].info}}</swiper-slide>
</div> </swiper>
</div>
<div class="time">时间：{{ timeNow }}</div>
</div>
</swiper-slide>
<swiper-slide>
<div class="title-pack">{{ timmingData.name }}</div>
<div class="sprayDrying">
<div class="tr clear-float" :class="roomInfoList.length > 8 ? 'ntr' : ''">
<div :class="roomInfoList.length > 8 ? 'nth-1' : 'th-1'"></div>
<div :class="roomInfoList.length > 8 ? 'nth-2' : 'th-2'">状态</div>
<div :class="roomInfoList.length > 8 ? 'nth-3' : 'th-3'">作业时间</div>
<div v-if="roomInfoList.length > 8" :class="roomInfoList.length > 8 ? 'nth-4' : 'th-4'"></div>
<div v-if="roomInfoList.length > 8" :class="roomInfoList.length > 8 ? 'nth-5' : 'th-5'">状态</div>
<div v-if="roomInfoList.length > 8" :class="roomInfoList.length > 8 ? 'nth-6' : 'th-6'">作业时间</div>
</div>
<div class="tr clear-float" v-for="(item, index) in mockArray" :key="index" :class="roomInfoList.length >'8'? 'ntr' : ''">
<div :class="roomInfoList.length > 8 ? 'nth-1' : 'th-1'">{{ judgeDataRnder(index) ? roomInfoList[index].name: '' }}</div>
<div :class="roomInfoList.length > 8 ? 'nth-2' : 'th-2'">{{ judgeDataRnder(index) ? roomInfoList[index].stationState: '' }}</div>
<div :class="roomInfoList.length > 8 ? 'nth-3' : 'th-3'">{{ judgeDataRnder(index) ? `${roomInfoList[index].workingHours}min`: '' }}</div>
<div v-if="roomInfoList.length > 8" :class="roomInfoList.length > 8 ? 'nth-4' : 'th-4'">{{ judgeDataRnder(index + 8) ? roomInfoList[index+8].name: '' }}</div>
<div v-if="roomInfoList.length > 8" :class="roomInfoList.length > 8 ? 'nth-5' : 'th-5'">{{ judgeDataRnder(index + 8) ? roomInfoList[index+8].stationState: '' }}</div>
<div v-if="roomInfoList.length > 8" :class="roomInfoList.length > 8 ? 'nth-6' : 'th-6'">{{ judgeDataRnder(index + 8) ? `${roomInfoList[index+8].workingHours}min`: '' }}</div>
</div>
<div class="time">时间：{{ timeNow }}</div>
</div>
</swiper-slide>
</swiper>
</div> </div>
</div>
</template> </template>
<script> <script>
import { swiper, swiperSlide } from 'vue-awesome-swiper' import { swiper, swiperSlide } from 'vue-awesome-swiper'
import Moment from 'moment' import Moment from 'moment'
export default { export default {
name: 'StationPutty',
components: { components: {
swiper, swiper,
swiperSlide swiperSlide
}, },
data () { data () {
return { return {
// Data轮询定时器
dataTimer: '',
mockArray: [0, 1, 2, 3, 4, 5, 6, 7],
// 工位实时数据 // 工位实时数据
timmingData: {}, timmingData: {},
// 报警数据 // 报警数据
warningList: {}, warningList: [],
width: 0, width: 0,
height: 0, height: 0,
zoom: 'scale(0)', zoom: 'scale(0)',
...@@ -48,116 +80,350 @@ ...@@ -48,116 +80,350 @@
autoplay: { autoplay: {
delay: 5000 //轮播频率 5s delay: 5000 //轮播频率 5s
} }
} },
swiperOption2: {
autoplay: {
delay: 10000 //轮播频率 5s
}
},
// 面清漆室实时数据
roomInfoList: [],
reponse: [
{
name: '喷漆飞机1',
stationState: '工作',
workingHours: '60'
},
{
name: '喷漆飞机2',
stationState: '工作',
workingHours: '60'
},
{
name: '喷漆飞机3',
stationState: '工作',
workingHours: '60'
},
{
name: '喷漆飞机4',
stationState: '工作',
workingHours: '60'
},
{
name: '喷漆飞机5',
stationState: '工作',
workingHours: '60'
},
{
name: '喷漆飞机6',
stationState: '工作',
workingHours: '60'
},
{
name: '喷漆飞机7',
stationState: '工作',
workingHours: '60'
},
{
name: '喷漆飞机8',
stationState: '工作',
workingHours: '60'
},
{
name: '喷漆飞机9',
stationState: '工作',
workingHours: '60'
},
{
name: '喷漆飞机10',
stationState: '工作',
workingHours: '60'
},
{
name: '喷漆飞机11',
stationState: '工作',
workingHours: '60'
},
{
name: '喷漆飞机12',
stationState: '工作',
workingHours: '60'
},
{
name: '喷漆飞机13',
stationState: '工作',
workingHours: '60'
},
{
name: '喷漆飞机14',
stationState: '工作',
workingHours: '60'
},
{
name: '喷漆飞机14',
stationState: '工作',
workingHours: '60'
},
{
name: '喷漆飞机15',
stationState: '工作',
workingHours: '60'
},
{
name: '喷漆飞机16',
stationState: '工作',
workingHours: '60'
}
]
} }
}, },
methods: { methods: {
// 时间日期格式化
formatTime (time, format) {
if (time !== null && time !== '') {
return Moment(time).format(format)
} else {
return '暂无'
}
},
//获取工位实时信息 //获取工位实时信息
getData () { getData () {
this.$fetch('led-controller/ledInfo-get', {ledNo: '5'}).then(res => { this.$fetch('led-controller/ledInfo-get', {ledNo: '5'}).then(res => {
this.timmingData = res; this.timmingData = _.cloneDeep(res);
this.warningList = res.warningList; this.roomInfoList = _.cloneDeep(res.roomInfoList);
this.warningList = _.cloneDeep(res.warningList)
// console.log(this.warningList) // console.log(this.warningList)
console.log(this.roomInfoList.length)
console.log(res) console.log(res)
for (let item of this.roomInfoList) {
console.log('item', item)
if (item.stationState === 'USE') {
item.stationState = '使用'
}
if (item.stationState === 'FREE') {
item.stationState = '空闲'
}
}
}) })
},
// 实时时间
judgeTimeNow () {
this.timeNow = Moment().format('YYYY-MM-DD HH:mm:ss')
this.timer = setInterval(() => {
this.timeNow = Moment().format('YYYY-MM-DD HH:mm:ss')
}, 1000)
},
// 判断数据是否需要渲染
judgeDataRnder (index) {
if (index < this.roomInfoList.length) {
return true
} else {
return false
}
} }
}, },
mounted () { mounted () {
this.getData()
let vm = this
// 模拟时间运作
this.timer = setInterval(() => {
vm.timeNow = this.formatTime()
}, 1000)
setTimeout(() => { setTimeout(() => {
this.getData()
// 实时时间
this.judgeTimeNow()
this.dataTimer = setInterval(() => {
this.getData()
}, 60000)
this.width = document.body.offsetWidth this.width = document.body.offsetWidth
this.height = document.body.offsetHeight this.height = document.body.offsetHeight
this.zoom = `scale(${this.width / 1710})` this.zoom = `scale(${this.width / 1710})`
}, 3000) console.log(this.zoom)
}, 0)
}, },
beforeDestroy () { beforeDestroy () {
if (this.timer) { if (this.timer) {
clearInterval(this.timer); //在Vue实例销毁前，清除定时器 clearInterval(this.timer); //在Vue实例销毁前，清除定时器
} }
if (this.dataTimer) {
clearInterval(this.dataTimer); //在Vue实例销毁前，清除定时器
}
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.page-pack { .container {
width: 1710px; height: 100%;
height: 860px; width: 100%;
background-color: #111; background-color: #111;
.title-pack { .page-pack {
width: 1710px; width: 1710px;
height: 100px; height: 860px;
text-align: center; background-color: #111;
color: yellow;
line-height: 100px;
font-weight: bold;
font-size: 60px;
}
.table-pack { .title-pack {
overflow: hidden;
.tr {
width: 1710px; width: 1710px;
height: 102px; height: 100px;
text-align: center;
color: yellow;
line-height: 100px;
font-weight: bold;
font-size: 60px;
}
.th-l { .table-pack {
width: 853px; overflow: hidden;
height: 100px;
.tr {
width: 1710px;
height: 102px;
.th-l {
width: 853px;
height: 100px;
border-top: 2px solid yellow;
border-right: 2px solid yellow;
float: left;
text-align: center;
color: yellow;
line-height: 100px;
font-weight: bold;
font-size: 60px;
}
.th-r {
width: 855px;
height: 100px;
border-top: 2px solid yellow;
float: left;
text-align: center;
color: yellow;
line-height: 100px;
font-weight: bold;
font-size: 60px;
}
}
.info {
width: 1710px;
height: 454px;
border-top: 2px solid yellow; border-top: 2px solid yellow;
border-right: 2px solid yellow;
float: left;
text-align: center;
color: yellow; color: yellow;
line-height: 100px;
font-weight: bold; font-weight: bold;
font-size: 60px; font-size: 60px;
.swiper-slide{
word-wrap: break-word;
word-break: break-all;
}
} }
.th-r { .time {
width: 855px; width: 1710px;
height: 100px; height: 100px;
border-top: 2px solid yellow; border-top: 2px solid yellow;
float: left;
text-align: center;
color: yellow; color: yellow;
line-height: 100px;
font-weight: bold; font-weight: bold;
line-height: 100px;
font-size: 60px; font-size: 60px;
} }
} }
.sprayDrying {
.info {
width: 1710px; width: 1710px;
height: 454px; height: 860px;
border-top: 2px solid yellow; background-color: #111;
color: yellow;
font-weight: bold;
font-size: 60px;
}
.time { .title-pack {
width: 1710px; // width: 1710px;
height: 100px; // height: 100px;
border-top: 2px solid yellow; text-align: center;
color: yellow; color: yellow;
font-weight: bold; line-height: 100px;
line-height: 100px; font-weight: bold;
font-size: 60px; font-size: 50px;
}
// .table-pack {
// overflow: hidden;
.tr {
width: 1708px;
// height: 30px;
.th-1,.th-2,.th-3,.th-4,.th-5,.th-6 {
width: 600px;
height: 60px;
border-top: 2px solid yellow;
border-right: 2px solid yellow;
float: left;
text-align: center;
color: yellow;
line-height: 60px;
font-weight: bold;
font-size: 50px;
}
.th-2 {width: 506px;}
.th-3 {
width: 598px;
border-right: 0px;
}
.th-4 {width: 17%;}
.th-5 {width: 15%;}
.th-6 {width: 17%;}
.th-r {
// width: 855px;
height: 100px;
border-top: 2px solid yellow;
float: left;
text-align: center;
color: yellow;
line-height: 100px;
font-weight: bold;
font-size: 60px;
}
}
// 数据量大于8条时
.ntr {
width: 1708px;
// height: 30px;
.nth-1,.nth-2,.nth-3,.nth-4,.nth-5,.nth-6 {
width: 16%;
height: 70px;
border-top: 2px solid yellow;
border-right: 2px solid yellow;
float: left;
text-align: center;
color: yellow;
line-height: 75px;
font-weight: bold;
font-size: 40px;
}
.nth-2 {width: 14%;}
.nth-3 {
width: 19.3%;
border-right: 2px solid yellow;
}
.nth-4 {width: 16%;}
.nth-5 {width: 14%;}
.nth-6 {
width: 19.3%;
border-right: none;
}
.nth-r {
// width: 855px;
height: 100px;
border-top: 2px solid yellow;
float: left;
text-align: center;
color: yellow;
line-height: 100px;
font-weight: bold;
font-size: 60px;
}
}
.time {
width: 1710px;
height: 100px;
border-top: 2px solid yellow;
color: yellow;
font-weight: bold;
line-height: 100px;
font-size: 60px;
// }
}
} }
} }
} }
......
src/views/Led/Station/sprayDryingRoom.vue
View file @ d08ca234
...@@ -20,29 +20,29 @@ ...@@ -20,29 +20,29 @@
<swiper-slide v-for="(item, index) in warningList" :key="index">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{warningList[index].name}}：{{warningList[index].info}}</swiper-slide> <swiper-slide v-for="(item, index) in warningList" :key="index">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{warningList[index].name}}：{{warningList[index].info}}</swiper-slide>
</swiper> </swiper>
</div> </div>
<div class="time">时间：{{ formatTime(timeNow,'YYYY-MM-DD HH:mm:ss') }}</div> <div class="time">时间：{{ timeNow }}</div>
</div> </div>
</swiper-slide> </swiper-slide>
<swiper-slide> <swiper-slide>
<div class="title-pack">{{ timmingData.name }}</div> <div class="title-pack">{{ timmingData.name }}</div>
<div class="sprayDrying"> <div class="sprayDrying">
<div class="tr clear-float" :class="reponse.length > 8 ? 'ntr' : ''"> <div class="tr clear-float" :class="roomInfoList.length > 8 ? 'ntr' : ''">
<div :class="reponse.length > 8 ? 'nth-1' : 'th-1'"></div> <div :class="roomInfoList.length > 8 ? 'nth-1' : 'th-1'"></div>
<div :class="reponse.length > 8 ? 'nth-2' : 'th-2'">状态</div> <div :class="roomInfoList.length > 8 ? 'nth-2' : 'th-2'">状态</div>
<div :class="reponse.length > 8 ? 'nth-3' : 'th-3'">作业时间</div> <div :class="roomInfoList.length > 8 ? 'nth-3' : 'th-3'">作业时间</div>
<div v-if="reponse.length > 8" :class="reponse.length > 8 ? 'nth-4' : 'th-4'"></div> <div v-if="roomInfoList.length > 8" :class="roomInfoList.length > 8 ? 'nth-4' : 'th-4'"></div>
<div v-if="reponse.length > 8" :class="reponse.length > 8 ? 'nth-5' : 'th-5'">状态</div> <div v-if="roomInfoList.length > 8" :class="roomInfoList.length > 8 ? 'nth-5' : 'th-5'">状态</div>
<div v-if="reponse.length > 8" :class="reponse.length > 8 ? 'nth-6' : 'th-6'">作业时间</div> <div v-if="roomInfoList.length > 8" :class="roomInfoList.length > 8 ? 'nth-6' : 'th-6'">作业时间</div>
</div> </div>
<div class="tr clear-float" v-for="(item, index) in mockArray" :key="index" :class="reponse.length >'8'? 'ntr' : ''"> <div class="tr clear-float" v-for="(item, index) in mockArray" :key="index" :class="roomInfoList.length >'8'? 'ntr' : ''">
<div :class="reponse.length > 8 ? 'nth-1' : 'th-1'">{{ judgeDataRnder(index) ? reponse[index].name: '' }}</div> <div :class="roomInfoList.length > 8 ? 'nth-1' : 'th-1'">{{ judgeDataRnder(index) ? roomInfoList[index].name: '' }}</div>
<div :class="reponse.length > 8 ? 'nth-2' : 'th-2'">{{ judgeDataRnder(index) ? reponse[index].stationState: '' }}</div> <div :class="roomInfoList.length > 8 ? 'nth-2' : 'th-2'">{{ judgeDataRnder(index) ? roomInfoList[index].stationState: '' }}</div>
<div :class="reponse.length > 8 ? 'nth-3' : 'th-3'">{{ judgeDataRnder(index) ? `${reponse[index].workingHours}min`: '' }}</div> <div :class="roomInfoList.length > 8 ? 'nth-3' : 'th-3'">{{ judgeDataRnder(index) ? `${roomInfoList[index].workingHours}min`: '' }}</div>
<div v-if="reponse.length > 8" :class="reponse.length > 8 ? 'nth-4' : 'th-4'">{{ judgeDataRnder(index + 8) ? reponse[index+8].name: '' }}</div> <div v-if="roomInfoList.length > 8" :class="roomInfoList.length > 8 ? 'nth-4' : 'th-4'">{{ judgeDataRnder(index + 8) ? roomInfoList[index+8].name: '' }}</div>
<div v-if="reponse.length > 8" :class="reponse.length > 8 ? 'nth-5' : 'th-5'">{{ judgeDataRnder(index + 8) ? reponse[index+8].stationState: '' }}</div> <div v-if="roomInfoList.length > 8" :class="roomInfoList.length > 8 ? 'nth-5' : 'th-5'">{{ judgeDataRnder(index + 8) ? roomInfoList[index+8].stationState: '' }}</div>
<div v-if="reponse.length > 8" :class="reponse.length > 8 ? 'nth-6' : 'th-6'">{{ judgeDataRnder(index + 8) ? `${reponse[index+8].workingHours}min`: '' }}</div> <div v-if="roomInfoList.length > 8" :class="roomInfoList.length > 8 ? 'nth-6' : 'th-6'">{{ judgeDataRnder(index + 8) ? `${roomInfoList[index+8].workingHours}min`: '' }}</div>
</div> </div>
<div class="time">时间：{{ formatTime(timeNow,'YYYY-MM-DD HH:mm:ss') }}</div> <div class="time">时间：{{ timeNow }}</div>
</div> </div>
</swiper-slide> </swiper-slide>
</swiper> </swiper>
...@@ -87,94 +87,7 @@ ...@@ -87,94 +87,7 @@
} }
}, },
// 面清漆室实时数据 // 面清漆室实时数据
roomInfoList: [], roomInfoList: []
reponse: [
{
name: '喷漆飞机1',
stationState: '工作',
workingHours: '60'
},
{
name: '喷漆飞机2',
stationState: '工作',
workingHours: '60'
},
{
name: '喷漆飞机3',
stationState: '工作',
workingHours: '60'
},
{
name: '喷漆飞机4',
stationState: '工作',
workingHours: '60'
},
{
name: '喷漆飞机5',
stationState: '工作',
workingHours: '60'
},
{
name: '喷漆飞机6',
stationState: '工作',
workingHours: '60'
},
{
name: '喷漆飞机7',
stationState: '工作',
workingHours: '60'
},
{
name: '喷漆飞机8',
stationState: '工作',
workingHours: '60'
},
{
name: '喷漆飞机9',
stationState: '工作',
workingHours: '60'
},
{
name: '喷漆飞机10',
stationState: '工作',
workingHours: '60'
},
{
name: '喷漆飞机11',
stationState: '工作',
workingHours: '60'
},
{
name: '喷漆飞机12',
stationState: '工作',
workingHours: '60'
},
{
name: '喷漆飞机13',
stationState: '工作',
workingHours: '60'
},
{
name: '喷漆飞机14',
stationState: '工作',
workingHours: '60'
},
{
name: '喷漆飞机14',
stationState: '工作',
workingHours: '60'
},
{
name: '喷漆飞机15',
stationState: '工作',
workingHours: '60'
},
{
name: '喷漆飞机16',
stationState: '工作',
workingHours: '60'
}
]
} }
}, },
methods: { methods: {
...@@ -187,19 +100,27 @@ ...@@ -187,19 +100,27 @@
// console.log(this.warningList) // console.log(this.warningList)
console.log(this.roomInfoList.length) console.log(this.roomInfoList.length)
console.log(res) console.log(res)
for (let item of this.roomInfoList) {
console.log('item', item)
if (item.stationState === 'USE') {
item.stationState = '使用'
}
if (item.stationState === 'FREE') {
item.stationState = '空闲'
}
}
}) })
}, },
// 时间日期格式化 // 实时时间
formatTime (time, format) { judgeTimeNow () {
if (time !== null && time !== '') { this.timeNow = Moment().format('YYYY-MM-DD HH:mm:ss')
return Moment(time).format(format) this.timer = setInterval(() => {
} else { this.timeNow = Moment().format('YYYY-MM-DD HH:mm:ss')
return '暂无' }, 1000)
}
}, },
// 判断数据是否需要渲染 // 判断数据是否需要渲染
judgeDataRnder (index) { judgeDataRnder (index) {
if (index < this.reponse.length) { if (index < this.roomInfoList.length) {
return true return true
} else { } else {
return false return false
...@@ -207,25 +128,27 @@ ...@@ -207,25 +128,27 @@
} }
}, },
mounted () { mounted () {
this.getData()
this.dataTimer = setInterval(() => {
this.getData()
}, 60000)
// 模拟时间运作
this.timer = setInterval(() => {
this.timeNow = this.formatTime()
}, 1000)
setTimeout(() => { setTimeout(() => {
this.getData()
// 实时时间
this.judgeTimeNow()
// 每一分钟请求一次数据
this.dataTimer = setInterval(() => {
this.getData()
}, 60000)
this.width = document.body.offsetWidth this.width = document.body.offsetWidth
this.height = document.body.offsetHeight this.height = document.body.offsetHeight
console.log(this.width, this.height)
this.zoom = `scale(${this.width / 1710})` this.zoom = `scale(${this.width / 1710})`
}, 3000) console.log(this.zoom)
}, 0)
}, },
beforeDestroy () { beforeDestroy () {
if (this.timer) { if (this.timer) {
clearInterval(this.timer); //在Vue实例销毁前，清除定时器 clearInterval(this.timer); //在Vue实例销毁前，清除定时器
} }
if (this.dataTimer) {
clearInterval(this.dataTimer); //在Vue实例销毁前，清除定时器
}
} }
} }
</script> </script>
...@@ -292,6 +215,10 @@ ...@@ -292,6 +215,10 @@
color: yellow; color: yellow;
font-weight: bold; font-weight: bold;
font-size: 60px; font-size: 60px;
.swiper-slide{
word-wrap: break-word;
word-break: break-all;
}
} }
.time { .time {
......
src/views/Led/Station/surfaceVarnish.vue
View file @ d08ca234
<template> <template>
<div class="page-pack" :style="{transform: zoom}" style="transform-origin: 0 0"> <div class="container">
<div class="title-pack">{{timmingData.name}}</div> <div class="page-pack" :style="{transform: zoom}" style="transform-origin: 0 0">
<div class="table-pack"> <swiper :options="swiperOption2">
<div class="tr"> <swiper-slide>
<div class="th-l">进车数</div> <div class="title-pack">{{timmingData.name}}</div>
<div class="th-r">{{timmingData.busIn}}</div> <div class="table-pack">
</div> <div class="tr">
<div class="tr"> <div class="th-l">进车数</div>
<div class="th-l">出车数</div> <div class="th-r">{{timmingData.busIn}}</div>
<div class="th-r">{{timmingData.busOut}}</div> </div>
</div> <div class="tr">
<div class="info"> <div class="th-l">出车数</div>
设备报警信息： <div class="th-r">{{timmingData.busOut}}</div>
<div>&nbsp;</div> </div>
<swiper :options="swiperOption" ref="mySwiper"> <div class="info">
<swiper-slide v-for="(item, index) in warningList" :key="index">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{warningList[index].name}}：{{warningList[index].info}}</swiper-slide> 设备报警信息：
</swiper> <div>&nbsp;</div>
</div> <swiper :options="swiperOption">
<div class="time">时间：{{ formatTime(timeNow,'YYYY-MM-DD HH:mm:ss') }}</div> <swiper-slide v-for="(item, index) in warningList" :key="index">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{warningList[index].name}}：{{warningList[index].info}}</swiper-slide>
</div> </swiper>
</div>
<div class="time">时间：{{ timeNow }}</div>
</div>
</swiper-slide>
<swiper-slide>
<div class="title-pack">{{ timmingData.name }}</div>
<div class="sprayDrying">
<div class="tr clear-float" :class="roomInfoList.length > 8 ? 'ntr' : ''">
<div :class="roomInfoList.length > 8 ? 'nth-1' : 'th-1'"></div>
<div :class="roomInfoList.length > 8 ? 'nth-2' : 'th-2'">状态</div>
<div :class="roomInfoList.length > 8 ? 'nth-3' : 'th-3'">作业时间</div>
<div v-if="roomInfoList.length > 8" :class="roomInfoList.length > 8 ? 'nth-4' : 'th-4'"></div>
<div v-if="roomInfoList.length > 8" :class="roomInfoList.length > 8 ? 'nth-5' : 'th-5'">状态</div>
<div v-if="roomInfoList.length > 8" :class="roomInfoList.length > 8 ? 'nth-6' : 'th-6'">作业时间</div>
</div>
<div class="tr clear-float" v-for="(item, index) in mockArray" :key="index" :class="roomInfoList.length >'8'? 'ntr' : ''">
<div :class="roomInfoList.length > 8 ? 'nth-1' : 'th-1'">{{ judgeDataRnder(index) ? roomInfoList[index].name: '' }}</div>
<div :class="roomInfoList.length > 8 ? 'nth-2' : 'th-2'">{{ judgeDataRnder(index) ? roomInfoList[index].stationState: '' }}</div>
<div :class="roomInfoList.length > 8 ? 'nth-3' : 'th-3'">{{ judgeDataRnder(index) ? `${roomInfoList[index].workingHours}min`: '' }}</div>
<div v-if="roomInfoList.length > 8" :class="roomInfoList.length > 8 ? 'nth-4' : 'th-4'">{{ judgeDataRnder(index + 8) ? roomInfoList[index+8].name: '' }}</div>
<div v-if="roomInfoList.length > 8" :class="roomInfoList.length > 8 ? 'nth-5' : 'th-5'">{{ judgeDataRnder(index + 8) ? roomInfoList[index+8].stationState: '' }}</div>
<div v-if="roomInfoList.length > 8" :class="roomInfoList.length > 8 ? 'nth-6' : 'th-6'">{{ judgeDataRnder(index + 8) ? `${roomInfoList[index+8].workingHours}min`: '' }}</div>
</div>
<div class="time">时间：{{ timeNow }}</div>
</div>
</swiper-slide>
</swiper>
</div> </div>
</div>
</template> </template>
<script> <script>
import { swiper, swiperSlide } from 'vue-awesome-swiper' import { swiper, swiperSlide } from 'vue-awesome-swiper'
import Moment from 'moment' import Moment from 'moment'
export default { export default {
name: 'StationSurfaceVarnish',
components: { components: {
swiper, swiper,
swiperSlide swiperSlide
}, },
data () { data () {
return { return {
// Data轮询定时器
dataTimer: '',
mockArray: [0, 1, 2, 3, 4, 5, 6, 7],
// 工位实时数据 // 工位实时数据
timmingData: {}, timmingData: {},
// 报警数据 // 报警数据
warningList: {}, warningList: [],
width: 0, width: 0,
height: 0, height: 0,
zoom: 'scale(0)', zoom: 'scale(0)',
...@@ -48,116 +80,360 @@ ...@@ -48,116 +80,360 @@
autoplay: { autoplay: {
delay: 5000 //轮播频率 5s delay: 5000 //轮播频率 5s
} }
} },
swiperOption2: {
autoplay: {
delay: 10000 //轮播频率 5s
}
},
// 面清漆室实时数据
roomInfoList: [],
reponse: [
{
name: '喷漆飞机1',
stationState: '工作',
workingHours: '60'
},
{
name: '喷漆飞机2',
stationState: '工作',
workingHours: '60'
},
{
name: '喷漆飞机3',
stationState: '工作',
workingHours: '60'
},
{
name: '喷漆飞机4',
stationState: '工作',
workingHours: '60'
},
{
name: '喷漆飞机5',
stationState: '工作',
workingHours: '60'
},
{
name: '喷漆飞机6',
stationState: '工作',
workingHours: '60'
},
{
name: '喷漆飞机7',
stationState: '工作',
workingHours: '60'
},
{
name: '喷漆飞机8',
stationState: '工作',
workingHours: '60'
},
{
name: '喷漆飞机9',
stationState: '工作',
workingHours: '60'
},
{
name: '喷漆飞机10',
stationState: '工作',
workingHours: '60'
},
{
name: '喷漆飞机11',
stationState: '工作',
workingHours: '60'
},
{
name: '喷漆飞机12',
stationState: '工作',
workingHours: '60'
},
{
name: '喷漆飞机13',
stationState: '工作',
workingHours: '60'
},
{
name: '喷漆飞机14',
stationState: '工作',
workingHours: '60'
},
{
name: '喷漆飞机14',
stationState: '工作',
workingHours: '60'
},
{
name: '喷漆飞机15',
stationState: '工作',
workingHours: '60'
},
{
name: '喷漆飞机16',
stationState: '工作',
workingHours: '60'
}
]
} }
}, },
methods: { methods: {
// 时间日期格式化
formatTime (time, format) {
if (time !== null && time !== '') {
return Moment(time).format(format)
} else {
return '暂无'
}
},
//获取工位实时信息 //获取工位实时信息
getData () { getData () {
this.$fetch('led-controller/ledInfo-get', {ledNo: '6'}).then(res => { this.$fetch('led-controller/ledInfo-get', {ledNo: '6'}).then(res => {
this.timmingData = res; this.timmingData = _.cloneDeep(res);
this.warningList = res.warningList; this.roomInfoList = _.cloneDeep(res.roomInfoList);
// console.log(this.warningList) this.warningList = _.cloneDeep(res.warningList)
console.log(this.roomInfoList.length)
console.log(res) console.log(res)
for (let item of this.roomInfoList) {
console.log('item', item)
if (item.stationState === 'USE') {
item.stationState = '使用'
}
if (item.stationState === 'FREE') {
item.stationState = '空闲'
}
}
}) })
},
// 实时时间
judgeTimeNow () {
this.timeNow = Moment().format('YYYY-MM-DD HH:mm:ss')
this.timer = setInterval(() => {
this.timeNow = Moment().format('YYYY-MM-DD HH:mm:ss')
}, 1000)
},
// 判断数据是否需要渲染
judgeDataRnder (index) {
if (index < this.roomInfoList.length) {
return true
} else {
return false
}
} }
}, },
mounted () { mounted () {
this.getData()
let vm = this
// 模拟时间运作
this.timer = setInterval(() => {
vm.timeNow = this.formatTime()
}, 1000)
setTimeout(() => { setTimeout(() => {
this.getData()
// 实时时间
this.judgeTimeNow()
// 每一分钟请求一次数据
this.dataTimer = setInterval(() => {
this.getData()
}, 60000)
this.width = document.body.offsetWidth this.width = document.body.offsetWidth
this.height = document.body.offsetHeight this.height = document.body.offsetHeight
this.zoom = `scale(${this.width / 1710})` this.zoom = `scale(${this.width / 1710})`
}, 3000) console.log(this.zoom)
}, 0)
}, },
beforeDestroy () { beforeDestroy () {
if (this.timer) { if (this.timer) {
clearInterval(this.timer); //在Vue实例销毁前，清除定时器 clearInterval(this.timer); //在Vue实例销毁前，清除定时器
} }
if (this.dataTimer) {
clearInterval(this.dataTimer); //在Vue实例销毁前，清除定时器
}
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.page-pack { .container {
width: 1710px; height: 100%;
height: 860px; width: 100%;
background-color: #111; background-color: #111;
.title-pack { .page-pack {
width: 1710px; width: 1710px;
height: 100px; height: 860px;
text-align: center; background-color: #111;
color: yellow;
line-height: 100px;
font-weight: bold;
font-size: 60px;
}
.table-pack {
overflow: hidden;
.tr { .title-pack {
width: 1710px; width: 1710px;
height: 102px; height: 100px;
text-align: center;
color: yellow;
line-height: 100px;
font-weight: bold;
font-size: 60px;
}
.th-l { .table-pack {
width: 853px; overflow: hidden;
height: 100px;
.tr {
width: 1710px;
height: 102px;
.th-l {
width: 853px;
height: 100px;
border-top: 2px solid yellow;
border-right: 2px solid yellow;
float: left;
text-align: center;
color: yellow;
line-height: 100px;
font-weight: bold;
font-size: 60px;
}
.th-r {
width: 855px;
height: 100px;
border-top: 2px solid yellow;
float: left;
text-align: center;
color: yellow;
line-height: 100px;
font-weight: bold;
font-size: 60px;
}
}
.info {
width: 1710px;
height: 454px;
border-top: 2px solid yellow; border-top: 2px solid yellow;
border-right: 2px solid yellow;
float: left;
text-align: center;
color: yellow; color: yellow;
line-height: 100px;
font-weight: bold; font-weight: bold;
font-size: 60px; font-size: 60px;
.swiper-slide{
word-wrap: break-word;
word-break: break-all;
}
} }
.th-r { .time {
width: 855px; width: 1710px;
height: 100px; height: 100px;
border-top: 2px solid yellow; border-top: 2px solid yellow;
float: left;
text-align: center;
color: yellow; color: yellow;
line-height: 100px;
font-weight: bold; font-weight: bold;
line-height: 100px;
font-size: 60px; font-size: 60px;
} }
} }
.sprayDrying {
.info {
width: 1710px; width: 1710px;
height: 454px; height: 860px;
border-top: 2px solid yellow; background-color: #111;
color: yellow;
font-weight: bold;
font-size: 60px;
}
.time { .title-pack {
width: 1710px; // width: 1710px;
height: 100px; // height: 100px;
border-top: 2px solid yellow; text-align: center;
color: yellow; color: yellow;
font-weight: bold; line-height: 100px;
line-height: 100px; font-weight: bold;
font-size: 60px; font-size: 50px;
}
// .table-pack {
// overflow: hidden;
.tr {
width: 1708px;
// height: 30px;
.th-1,.th-2,.th-3,.th-4,.th-5,.th-6 {
width: 600px;
height: 60px;
border-top: 2px solid yellow;
border-right: 2px solid yellow;
float: left;
text-align: center;
color: yellow;
line-height: 60px;
font-weight: bold;
font-size: 50px;
}
.th-2 {width: 506px;}
.th-3 {
width: 598px;
border-right: 0px;
}
.th-4 {width: 17%;}
.th-5 {width: 15%;}
.th-6 {width: 17%;}
.th-r {
// width: 855px;
height: 100px;
border-top: 2px solid yellow;
float: left;
text-align: center;
color: yellow;
line-height: 100px;
font-weight: bold;
font-size: 60px;
}
}
// 数据量大于8条时
.ntr {
width: 1708px;
// height: 30px;
.nth-1,.nth-2,.nth-3,.nth-4,.nth-5,.nth-6 {
width: 16%;
height: 70px;
border-top: 2px solid yellow;
border-right: 2px solid yellow;
float: left;
text-align: center;
color: yellow;
line-height: 75px;
font-weight: bold;
font-size: 40px;
}
.nth-2 {width: 14%;}
.nth-3 {
width: 19.3%;
border-right: 2px solid yellow;
}
.nth-4 {width: 16%;}
.nth-5 {width: 14%;}
.nth-6 {
width: 19.3%;
border-right: none;
}
.nth-r {
// width: 855px;
height: 100px;
border-top: 2px solid yellow;
float: left;
text-align: center;
color: yellow;
line-height: 100px;
font-weight: bold;
font-size: 60px;
}
}
// .info {
// width: 1710px;
// height: 454px;
// border-top: 2px solid yellow;
// color: yellow;
// font-weight: bold;
// font-size: 60px;
// }
.time {
width: 1710px;
height: 100px;
border-top: 2px solid yellow;
color: yellow;
font-weight: bold;
line-height: 100px;
font-size: 60px;
// }
}
} }
} }
} }
......
src/views/Monitor/components/ComplexionPaint.vue
View file @ d08ca234
...@@ -552,6 +552,7 @@ ...@@ -552,6 +552,7 @@
*/ */
import Tooltip from './Tooltip'; import Tooltip from './Tooltip';
export default { export default {
name: 'MonitorComplexionPaint',
components: { components: {
Tooltip Tooltip
}, },
......
src/views/Monitor/components/Electrophoresis.vue
View file @ d08ca234
...@@ -448,6 +448,7 @@ ...@@ -448,6 +448,7 @@
<script> <script>
import Tooltip from './Tooltip'; import Tooltip from './Tooltip';
export default { export default {
name: 'MonitorElectrophoresis',
components: { components: {
Tooltip Tooltip
}, },
......
src/views/Monitor/components/FinishedCar.vue
View file @ d08ca234
...@@ -149,6 +149,7 @@ ...@@ -149,6 +149,7 @@
<script> <script>
import Tooltip from './Tooltip'; import Tooltip from './Tooltip';
export default { export default {
name: 'MonitorFinishedCar',
components: { components: {
Tooltip Tooltip
}, },
......
src/views/Monitor/components/MiddleCoat.vue
View file @ d08ca234
...@@ -198,6 +198,7 @@ ...@@ -198,6 +198,7 @@
*/ */
import Tooltip from './Tooltip'; import Tooltip from './Tooltip';
export default { export default {
name: 'MonitorMiddleCoat',
components: { components: {
Tooltip Tooltip
}, },
......
src/views/Monitor/components/Putty.vue
View file @ d08ca234
...@@ -221,6 +221,7 @@ ...@@ -221,6 +221,7 @@
*/ */
import Tooltip from './Tooltip'; import Tooltip from './Tooltip';
export default { export default {
name: 'MonitorPutty',
components: { components: {
Tooltip Tooltip
}, },
......
src/views/Monitor/components/SealedAnticorrosion.vue
View file @ d08ca234
...@@ -306,6 +306,7 @@ ...@@ -306,6 +306,7 @@
<script> <script>
import Tooltip from './Tooltip'; import Tooltip from './Tooltip';
export default { export default {
name: 'MonitorSealedAnticorrosion',
components: { components: {
Tooltip Tooltip
}, },
......
src/views/Monitor/components/SheetMetalCar.vue
View file @ d08ca234
...@@ -299,6 +299,7 @@ ...@@ -299,6 +299,7 @@
<script> <script>
import Tooltip from './Tooltip'; import Tooltip from './Tooltip';
export default { export default {
name: 'MonitorSheetMetalCar',
components: { components: {
Tooltip Tooltip
}, },
......
src/views/Monitor/index.vue
View file @ d08ca234
...@@ -1562,6 +1562,7 @@ ...@@ -1562,6 +1562,7 @@
<script> <script>
export default { export default {
name: 'MonitorIndex',
data () { data () {
return { return {
// 筛选条件工单号 // 筛选条件工单号
...@@ -1807,10 +1808,28 @@ ...@@ -1807,10 +1808,28 @@
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
html {
position: relative;
}
@keyframes identifier {
0% { transform: translateY(0px);}
20% { transform: translateY(-70px);}
40% { transform: translateY(-140px);}
60% { transform: translateY(-210px);}
80% { transform: translateY(-280px);}
100% { transform: translateY(-350px);}
// 100% {transform: translateY(-450px);}
}
.monitor-pack { .monitor-pack {
overflow-x: hidden;
overflow-y: visible;
height: 1400px;
width: 100%; width: 100%;
background-color: #001927; background-color: #001927;
animation: identifier 10s infinite alternate;
// animation: identifier 8s infinite cubic-bezier(1,0,0.5,0);
.view-pack { .view-pack {
margin: 0 auto; margin: 0 auto;
width: 1600px; width: 1600px;
...@@ -3694,7 +3713,7 @@ ...@@ -3694,7 +3713,7 @@
} }
.no-message { .no-message {
font-size: 12px !important; font-size: 6px !important;
font-weight: 400; font-weight: 400;
} }
...@@ -3775,6 +3794,10 @@ ...@@ -3775,6 +3794,10 @@
} }
} }
::-webkit-scrollbar {
display: none ! important;
}
// 轻客车体样式 // 轻客车体样式
.monitor-car-external { .monitor-car-external {
background: url('../../assets/images/Monitor/monitor_car_external.png') !important; background: url('../../assets/images/Monitor/monitor_car_external.png') !important;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment