Commit d08ca234 authored by 李志鸣's avatar 李志鸣

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

parents 7fad61e5 5232448a
......@@ -15,7 +15,7 @@ module.exports = {
'/host': {
target: 'http://10.100.172.150:9108', //设置你调用的接口域名和端口号 别忘了加http
// target: 'http://192.168.43.244:8888', // 东伟服务器地址
// target: 'http://192.168.0.199:8080', // 训浩服务器
// target: 'http://192.168.0.126:8080', // 训浩服务器
changeOrigin: true,
pathRewrite: {
'^/host': ''//这里理解成用‘/host’代替target里面的地址,后面组件中我们掉接口时直接用api代替 比如我要调用'http://40.00.100.100:3002/user/add',直接写‘/api/user/add’即可
......
[0408/142129.522: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)
[1024/194707.205:ERROR:http_transport_win.cc(276)] WinHttpSendRequest: 操作成功完成。 (0x0)
......@@ -45,6 +45,7 @@ export default {
StationFloatingCoatRobot: '中涂机器人',
StationSurfaceVarnish: '面/清漆',
StationSprayDryingRoom: '喷漆/烘干室',
StationPaintingWorkShop: '涂装车间',
// 监控大屏
CenterControl: '监控大屏',
CenterControlIndex: '监控大屏'
......
......@@ -18,7 +18,9 @@ const whiteList = [
'/led/stationApplyArtificial',
'/led/stationFloatingCoatRobot',
'/led/stationSurfaceVarnish',
'/led/stationSprayDryingRoom'
'/led/stationSprayDryingRoom',
'/led/stationPaintingWorkShop',
'/monitor/monitorIndex'
]
NProgress.configure({
......
......@@ -24,7 +24,7 @@ import laboratoryRouter from './modules/laboratory'
// 涂装生产计划
import productionPlanRouter from './modules/productionPlan'
// AVI大屏
import monitorRouter from './modules/monitor'
// import monitorRouter from './modules/monitor'
// 监控大屏
import centerControl from './modules/centerControll'
// 系统管理
......@@ -65,7 +65,7 @@ export const constantRouterMap = [{
{
path: 'stationInsulatingAnticorrosive', //隔热防腐
component: () => import('@/views/Led/Station/insulatingAnticorrosive'),
name: 'stationInsulatingAnticorrosive',
name: 'StationInsulatingAnticorrosive',
meta: { title: 'stationInsulatingAnticorrosive', icon: 'template' }
},
{
......@@ -97,6 +97,75 @@ export const constantRouterMap = [{
component: () => import('@/views/Led/Station/sprayDryingRoom'),
name: 'StationSprayDryingRoom',
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
}
]
}]
......
......@@ -18,13 +18,13 @@ export default {
path: 'deviceBasic',
component: () => import('@/views/Basic/DeviceBasic/list'),
name: 'DeviceBasic',
meta: {title: 'DeviceBasic', icon: 'document', noCache: false}
meta: {title: 'DeviceBasic', icon: 'document', noCache: false, mark: '/Basic/DeviceBasic/list'}
},
{
path: 'laneBasic',
component: () => import('@/views/Basic/LaneBasic/list'),
name: 'LaneBasic',
meta: {title: 'LaneBasic', icon: 'document', noCache: false}
meta: {title: 'LaneBasic', icon: 'document', noCache: false, mark: '/Basic/LaneBasic/list'}
}
]
}
......@@ -10,7 +10,7 @@ export default {
path: 'index',
component: () => import('@/views/CenterControl/index'),
name: 'CenterControlIndex',
meta: { title: 'CenterControlIndex', icon: 'template' }
meta: { title: 'CenterControlIndex', icon: 'template', mark: '/CenterControl/index' }
}
]
}
......@@ -12,13 +12,13 @@ export default {
path: 'deviceRunningTime',
component: () => import('@/views/DeviceRunning/DeviceRunningTime/list'),
name: 'DeviceRunningTime',
meta: { title: 'DeviceRunningTime', icon: 'repairApplication', noCache: false }
meta: { title: 'DeviceRunningTime', icon: 'repairApplication', noCache: false, mark: '/DeviceRunning/DeviceRunningTime/list' }
},
{
path: 'deviceFaultRecord',
component: () => import('@/views/DeviceRunning/DeviceFaultRecord/list'),
name: 'DeviceFaultRecord',
meta: { title: 'DeviceFaultRecord', icon: 'repairApplication', noCache: false }
meta: { title: 'DeviceFaultRecord', icon: 'repairApplication', noCache: false, mark: '/DeviceRunning/DeviceFaultRecord/list' }
}
]
}
......@@ -9,19 +9,19 @@ export default {
path: 'pickling',
component: () => import('@/views/Laboratory/Pickling/list'),
name: 'Pickling',
meta: { title: 'Pickling', icon: 'deal', noCache: false }
meta: { title: 'Pickling', icon: 'template', noCache: false, mark: '/Laboratory/Pickling/list' }
},
{
path: 'electrophoresisTank',
component: () => import('@/views/Laboratory/ElectrophoresisTank/list'),
name: 'ElectrophoresisTank',
meta: { title: 'ElectrophoresisTank', icon: 'deal', noCache: false }
meta: { title: 'ElectrophoresisTank', icon: 'template', noCache: false, mark: '/Laboratory/ElectrophoresisTank/list' }
},
{
path: 'pretreatment',
component: () => import('@/views/Laboratory/Pretreatment/list'),
name: 'Pretreatment',
meta: { title: 'Pretreatment', icon: 'deal', noCache: false }
meta: { title: 'Pretreatment', icon: 'template', noCache: false, mark: '/Laboratory/Pretreatment/list' }
}
]
}
......@@ -11,7 +11,7 @@ export default {
path: 'monitorIndex',
component: () => import('@/views/Monitor/index'),
name: 'MonitorIndex',
meta: { title: 'MonitorIndex', icon: 'kanban' }
meta: { title: 'MonitorIndex', icon: 'kanban', mark: '/Monitor/index' }
},
{
path: 'monitorPutty',
......
......@@ -12,37 +12,37 @@ export default {
path: 'parts',
component: () => import('@/views/Workshop/Parts/list'),
name: 'Parts',
meta: { title: 'Parts', icon: 'wareHouse', noCache: false }
meta: { title: 'Parts', icon: 'wareHouse', noCache: false, mark: '/Workshop/Parts/list' }
},
{
path: 'welding',
component: () => import('@/views/Workshop/Welding/list'),
name: 'Welding',
meta: { title: 'Welding', icon: 'wareHouse', noCache: false }
meta: { title: 'Welding', icon: 'wareHouse', noCache: false, mark: '/Workshop/Welding/list' }
},
{
path: 'painting',
component: () => import('@/views/Workshop/Painting/list'),
name: 'Painting',
meta: { title: 'Painting', icon: 'wareHouse', noCache: false }
meta: { title: 'Painting', icon: 'wareHouse', noCache: false, mark: '/Workshop/Painting/list' }
},
{
path: 'chassis',
component: () => import('@/views/Workshop/Chassis/list'),
name: 'Chassis',
meta: { title: 'Chassis', icon: 'wareHouse', noCache: false }
meta: { title: 'Chassis', icon: 'wareHouse', noCache: false, mark: '/Workshop/Chassis/list' }
},
{
path: 'final',
component: () => import('@/views/Workshop/Final/list'),
name: 'Final',
meta: { title: 'Final', icon: 'wareHouse', noCache: false }
meta: { title: 'Final', icon: 'wareHouse', noCache: false, mark: '/Workshop/Final/list' }
},
{
path: 'trial',
component: () => import('@/views/Workshop/Trial/list'),
name: 'Trial',
meta: { title: 'Trial', icon: 'wareHouse', noCache: false }
meta: { title: 'Trial', icon: 'wareHouse', noCache: false, mark: '/Workshop/Trial/list' }
}
]
}
......@@ -43,6 +43,7 @@
import MachineWarning from './components/MachineWarning'
export default {
name: 'CenterControl',
components: {
MachineUtilizationRate,
MachineFailureRate,
......
<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="table-pack">
<div class="tr">
......@@ -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>
</div>
<div class="time">时间:{{ formatTime(timeNow,'YYYY-MM-DD HH:mm:ss') }}</div>
<div class="time">时间:{{ timeNow }}</div>
</div>
</div>
</div>
</template>
<script>
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import Moment from 'moment'
export default {
name: 'StationApplyArtificial',
components: {
swiper,
swiperSlide
......@@ -35,7 +38,7 @@
// 实时数据
timmingData: {},
// 报警数据
warningList: {},
warningList: [],
width: 0,
height: 0,
zoom: 'scale(0)',
......@@ -54,13 +57,12 @@
}
},
methods: {
// 时间日期格式化
formatTime (time, format) {
if (time !== null && time !== '') {
return Moment(time).format(format)
} else {
return '暂无'
}
// 实时时间
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 () {
......@@ -72,20 +74,18 @@
}
},
mounted () {
this.getData()
this.dataTimer = setInterval(() => {
this.getData()
}, 60000)
let vm = this
// 模拟时间运作
this.timer = setInterval(() => {
vm.timeNow = vm.formatTime()
}, 1000)
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})`
}, 3000)
console.log(this.zoom)
}, 0)
},
beforeDestroy () {
if (this.timer) {
......@@ -99,72 +99,81 @@
</script>
<style lang="scss" scoped>
.page-pack {
width: 1710px;
height: 860px;
.container {
width: 100%;
height: 100%;
background-color: #111;
.title-pack {
.page-pack {
width: 1710px;
height: 100px;
text-align: center;
color: yellow;
line-height: 100px;
font-weight: bold;
font-size: 60px;
}
height: 860px;
background-color: #111;
.table-pack {
overflow: hidden;
.tr {
.title-pack {
width: 1710px;
height: 102px;
height: 100px;
text-align: center;
color: yellow;
line-height: 100px;
font-weight: bold;
font-size: 60px;
}
.th-l {
width: 853px;
height: 100px;
.table-pack {
overflow: hidden;
.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-right: 2px solid yellow;
float: left;
text-align: center;
color: yellow;
line-height: 100px;
font-weight: bold;
font-size: 60px;
.swiper-slide{
word-wrap: break-word;
word-break: break-all;
}
}
.th-r {
width: 855px;
.time {
width: 1710px;
height: 100px;
border-top: 2px solid yellow;
float: left;
text-align: center;
color: yellow;
line-height: 100px;
font-weight: bold;
line-height: 100px;
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;
}
}
}
......
<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="table-pack">
<div class="tr">
......@@ -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>
</div>
<div class="time">时间:{{ formatTime(timeNow,'YYYY-MM-DD HH:mm:ss') }}</div>
<div class="time">时间:{{ timeNow }}</div>
</div>
</div>
</div>
</template>
<script>
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import Moment from 'moment'
export default {
name: 'StationElectrophoresis',
components: {
swiper,
swiperSlide
......@@ -35,7 +39,7 @@
// 工位实时数据
timmingData: {},
// 报警数据
warningList: {},
warningList: [],
width: 0,
height: 0,
zoom: 'scale(0)',
......@@ -54,14 +58,6 @@
}
},
methods: {
// 时间日期格式化
formatTime (time, format) {
if (time !== null && time !== '') {
return Moment(time).format(format)
} else {
return '暂无'
}
},
//获取工位实时信息
getData () {
this.$fetch('led-controller/ledInfo-get', {ledNo: '2'}).then(res => {
......@@ -69,19 +65,26 @@
this.warningList = res.warningList;
// console.log(this.warningList)
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 () {
this.getData()
this.dataTimer = setInterval(() => {
this.getData()
}, 60000)
// 模拟时间运作
this.timer = setInterval(() => {
this.timeNow = this.formatTime()
}, 1000)
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})`
......@@ -100,72 +103,81 @@
</script>
<style lang="scss" scoped>
.page-pack {
width: 1710px;
height: 860px;
.container {
width: 100%;
height: 100%;
background-color: #111;
.title-pack {
.page-pack {
width: 1710px;
height: 100px;
text-align: center;
color: yellow;
line-height: 100px;
font-weight: bold;
font-size: 60px;
}
.table-pack {
overflow: hidden;
height: 860px;
background-color: #111;
.tr {
.title-pack {
width: 1710px;
height: 102px;
height: 100px;
text-align: center;
color: yellow;
line-height: 100px;
font-weight: bold;
font-size: 60px;
}
.th-l {
width: 853px;
height: 100px;
.table-pack {
overflow: hidden;
.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-right: 2px solid yellow;
float: left;
text-align: center;
color: yellow;
line-height: 100px;
font-weight: bold;
font-size: 60px;
.swiper-slide{
word-wrap: break-word;
word-break: break-all;
}
}
.th-r {
width: 855px;
.time {
width: 1710px;
height: 100px;
border-top: 2px solid yellow;
float: left;
text-align: center;
color: yellow;
line-height: 100px;
font-weight: bold;
line-height: 100px;
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;
}
}
}
......
<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="table-pack">
<div class="tr">
......@@ -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>
</div>
<div class="time">时间:{{ formatTime(timeNow,'YYYY-MM-DD HH:mm:ss') }}</div>
<div class="time">时间:{{ timeNow }}</div>
</div>
</div>
</div>
</template>
<script>
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import Moment from 'moment'
export default {
name: 'StationFloatingCoatRobot',
components: {
swiper,
swiperSlide
......@@ -38,7 +41,7 @@
// 工位实时数据
timmingData: {},
// 报警数据
warningList: {},
warningList: [],
// 屏幕显示当前时间
timeNow: '',
// 定时器
......@@ -54,13 +57,12 @@
}
},
methods: {
// 时间日期格式化
formatTime (time, format) {
if (time !== null && time !== '') {
return Moment(time).format(format)
} else {
return '暂无'
}
// 实时时间
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 () {
......@@ -72,19 +74,18 @@
}
},
mounted () {
this.getData()
this.dataTimer = setInterval(() => {
this.getData()
}, 60000)
this.timer = setInterval(() => {
this.timeNow = this.formatTime()
// console.log(this.timeNow)
}, 1000)
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})`
}, 3000)
console.log(this.zoom)
}, 0)
},
beforeDestroy () {
if (this.timer) {
......@@ -98,72 +99,82 @@
</script>
<style lang="scss" scoped>
.page-pack {
width: 1710px;
height: 860px;
.container {
width: 100%;
height: 100%;
background-color: #111;
.title-pack {
.page-pack {
width: 1710px;
height: 100px;
text-align: center;
color: yellow;
line-height: 100px;
font-weight: bold;
font-size: 60px;
}
height: 860px;
background-color: #111;
.table-pack {
overflow: hidden;
.tr {
.title-pack {
width: 1710px;
height: 102px;
height: 100px;
text-align: center;
color: yellow;
line-height: 100px;
font-weight: bold;
font-size: 60px;
}
.th-l {
width: 853px;
height: 100px;
.table-pack {
overflow: hidden;
.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-right: 2px solid yellow;
float: left;
text-align: center;
color: yellow;
line-height: 100px;
font-weight: bold;
font-size: 60px;
.swiper-slide{
word-wrap: break-word;
word-break: break-all;
}
}
.th-r {
width: 855px;
.time {
width: 1710px;
height: 100px;
border-top: 2px solid yellow;
float: left;
text-align: center;
color: yellow;
line-height: 100px;
font-weight: bold;
line-height: 100px;
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;
}
}
}
......
<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="table-pack">
<div class="tr">
......@@ -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>
</div>
<div class="time">时间:{{ formatTime(timeNow,'YYYY-MM-DD HH:mm:ss') }}</div>
<div class="time">时间:{{ timeNow }}</div>
</div>
</div>
</div>
</template>
<script>
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import Moment from 'moment'
export default {
name: 'StationInsulatingAnticorrosive',
components: {
swiper,
swiperSlide
......@@ -54,13 +57,12 @@
}
},
methods: {
// 时间日期格式化
formatTime (time, format) {
if (time !== null && time !== '') {
return Moment(time).format(format)
} else {
return '暂无'
}
// 实时时间
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 () {
......@@ -73,20 +75,18 @@
}
},
mounted () {
this.getData()
this.dataTimer = setInterval(() => {
this.getData()
}, 60000)
// 模拟时间运作
this.timer = setInterval(() => {
this.timeNow = this.formatTime()
}, 1000)
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(`scale(${this.width / 1710})`)
}, 3000)
console.log(this.zoom)
}, 0)
},
beforeDestroy () {
if (this.timer) {
......@@ -100,72 +100,81 @@
</script>
<style lang="scss" scoped>
.page-pack {
width: 1710px;
height: 860px;
.container {
width: 100%;
height: 100%;
background-color: #111;
.title-pack {
.page-pack {
width: 1710px;
height: 100px;
text-align: center;
color: yellow;
line-height: 100px;
font-weight: bold;
font-size: 60px;
}
height: 860px;
background-color: #111;
.table-pack {
overflow: hidden;
.tr {
.title-pack {
width: 1710px;
height: 102px;
height: 100px;
text-align: center;
color: yellow;
line-height: 100px;
font-weight: bold;
font-size: 60px;
}
.th-l {
width: 853px;
height: 100px;
.table-pack {
overflow: hidden;
.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-right: 2px solid yellow;
float: left;
text-align: center;
color: yellow;
line-height: 100px;
font-weight: bold;
font-size: 60px;
.swiper-slide{
word-wrap: break-word;
word-break: break-all;
}
}
.th-r {
width: 855px;
.time {
width: 1710px;
height: 100px;
border-top: 2px solid yellow;
float: left;
text-align: center;
color: yellow;
line-height: 100px;
font-weight: bold;
line-height: 100px;
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;
}
}
}
......
<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
<template>
<div class="page-pack" :style="{transform: zoom}" style="transform-origin: 0 0">
<div class="title-pack">{{timmingData.name}}</div>
<div class="table-pack">
<div class="tr">
<div class="th-l">进车数</div>
<div class="th-r">{{timmingData.busIn}}</div>
</div>
<div class="tr">
<div class="th-l">出车数</div>
<div class="th-r">{{timmingData.busOut}}</div>
</div>
<div class="info">
设备报警信息:
<div>&nbsp;</div>
<swiper :options="swiperOption" ref="mySwiper">
<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>
<div class="time">时间:{{ formatTime(timeNow,'YYYY-MM-DD HH:mm:ss') }}</div>
</div>
<div class="container">
<div class="page-pack" :style="{transform: zoom}" style="transform-origin: 0 0">
<swiper :options="swiperOption2">
<swiper-slide>
<div class="title-pack">{{timmingData.name}}</div>
<div class="table-pack">
<div class="tr">
<div class="th-l">进车数</div>
<div class="th-r">{{timmingData.busIn}}</div>
</div>
<div class="tr">
<div class="th-l">出车数</div>
<div class="th-r">{{timmingData.busOut}}</div>
</div>
<div class="info">
设备报警信息:
<div>&nbsp;</div>
<swiper :options="swiperOption">
<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>
<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>
</template>
<script>
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import Moment from 'moment'
export default {
name: 'StationPutty',
components: {
swiper,
swiperSlide
},
data () {
return {
// Data轮询定时器
dataTimer: '',
mockArray: [0, 1, 2, 3, 4, 5, 6, 7],
// 工位实时数据
timmingData: {},
// 报警数据
warningList: {},
warningList: [],
width: 0,
height: 0,
zoom: 'scale(0)',
......@@ -48,116 +80,350 @@
autoplay: {
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: {
// 时间日期格式化
formatTime (time, format) {
if (time !== null && time !== '') {
return Moment(time).format(format)
} else {
return '暂无'
}
},
//获取工位实时信息
getData () {
this.$fetch('led-controller/ledInfo-get', {ledNo: '5'}).then(res => {
this.timmingData = res;
this.warningList = res.warningList;
this.timmingData = _.cloneDeep(res);
this.roomInfoList = _.cloneDeep(res.roomInfoList);
this.warningList = _.cloneDeep(res.warningList)
// console.log(this.warningList)
console.log(this.roomInfoList.length)
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 () {
this.getData()
let vm = this
// 模拟时间运作
this.timer = setInterval(() => {
vm.timeNow = this.formatTime()
}, 1000)
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})`
}, 3000)
console.log(this.zoom)
}, 0)
},
beforeDestroy () {
if (this.timer) {
clearInterval(this.timer); //在Vue实例销毁前,清除定时器
}
if (this.dataTimer) {
clearInterval(this.dataTimer); //在Vue实例销毁前,清除定时器
}
}
}
</script>
<style lang="scss" scoped>
.page-pack {
width: 1710px;
height: 860px;
.container {
height: 100%;
width: 100%;
background-color: #111;
.title-pack {
.page-pack {
width: 1710px;
height: 100px;
text-align: center;
color: yellow;
line-height: 100px;
font-weight: bold;
font-size: 60px;
}
height: 860px;
background-color: #111;
.table-pack {
overflow: hidden;
.tr {
.title-pack {
width: 1710px;
height: 102px;
height: 100px;
text-align: center;
color: yellow;
line-height: 100px;
font-weight: bold;
font-size: 60px;
}
.th-l {
width: 853px;
height: 100px;
.table-pack {
overflow: hidden;
.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-right: 2px solid yellow;
float: left;
text-align: center;
color: yellow;
line-height: 100px;
font-weight: bold;
font-size: 60px;
.swiper-slide{
word-wrap: break-word;
word-break: break-all;
}
}
.th-r {
width: 855px;
.time {
width: 1710px;
height: 100px;
border-top: 2px solid yellow;
float: left;
text-align: center;
color: yellow;
line-height: 100px;
font-weight: bold;
line-height: 100px;
font-size: 60px;
}
}
.info {
.sprayDrying {
width: 1710px;
height: 454px;
border-top: 2px solid yellow;
color: yellow;
font-weight: bold;
font-size: 60px;
}
height: 860px;
background-color: #111;
.time {
width: 1710px;
height: 100px;
border-top: 2px solid yellow;
color: yellow;
font-weight: bold;
line-height: 100px;
font-size: 60px;
.title-pack {
// width: 1710px;
// height: 100px;
text-align: center;
color: yellow;
line-height: 100px;
font-weight: bold;
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;
// }
}
}
}
}
......
......@@ -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>
</div>
<div class="time">时间:{{ formatTime(timeNow,'YYYY-MM-DD HH:mm:ss') }}</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="reponse.length > 8 ? 'ntr' : ''">
<div :class="reponse.length > 8 ? 'nth-1' : 'th-1'"></div>
<div :class="reponse.length > 8 ? 'nth-2' : 'th-2'">状态</div>
<div :class="reponse.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="reponse.length > 8" :class="reponse.length > 8 ? 'nth-5' : 'th-5'">状态</div>
<div v-if="reponse.length > 8" :class="reponse.length > 8 ? 'nth-6' : 'th-6'">作业时间</div>
<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="reponse.length >'8'? 'ntr' : ''">
<div :class="reponse.length > 8 ? 'nth-1' : 'th-1'">{{ judgeDataRnder(index) ? reponse[index].name: '' }}</div>
<div :class="reponse.length > 8 ? 'nth-2' : 'th-2'">{{ judgeDataRnder(index) ? reponse[index].stationState: '' }}</div>
<div :class="reponse.length > 8 ? 'nth-3' : 'th-3'">{{ judgeDataRnder(index) ? `${reponse[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="reponse.length > 8" :class="reponse.length > 8 ? 'nth-5' : 'th-5'">{{ judgeDataRnder(index + 8) ? reponse[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 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">时间:{{ formatTime(timeNow,'YYYY-MM-DD HH:mm:ss') }}</div>
<div class="time">时间:{{ timeNow }}</div>
</div>
</swiper-slide>
</swiper>
......@@ -87,94 +87,7 @@
}
},
// 面清漆室实时数据
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'
}
]
roomInfoList: []
}
},
methods: {
......@@ -187,19 +100,27 @@
// console.log(this.warningList)
console.log(this.roomInfoList.length)
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) {
if (time !== null && time !== '') {
return Moment(time).format(format)
} else {
return '暂无'
}
// 实时时间
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.reponse.length) {
if (index < this.roomInfoList.length) {
return true
} else {
return false
......@@ -207,25 +128,27 @@
}
},
mounted () {
this.getData()
this.dataTimer = setInterval(() => {
this.getData()
}, 60000)
// 模拟时间运作
this.timer = setInterval(() => {
this.timeNow = this.formatTime()
}, 1000)
setTimeout(() => {
this.getData()
// 实时时间
this.judgeTimeNow()
// 每一分钟请求一次数据
this.dataTimer = setInterval(() => {
this.getData()
}, 60000)
this.width = document.body.offsetWidth
this.height = document.body.offsetHeight
console.log(this.width, this.height)
this.zoom = `scale(${this.width / 1710})`
}, 3000)
console.log(this.zoom)
}, 0)
},
beforeDestroy () {
if (this.timer) {
clearInterval(this.timer); //在Vue实例销毁前,清除定时器
}
if (this.dataTimer) {
clearInterval(this.dataTimer); //在Vue实例销毁前,清除定时器
}
}
}
</script>
......@@ -292,6 +215,10 @@
color: yellow;
font-weight: bold;
font-size: 60px;
.swiper-slide{
word-wrap: break-word;
word-break: break-all;
}
}
.time {
......
<template>
<div class="page-pack" :style="{transform: zoom}" style="transform-origin: 0 0">
<div class="title-pack">{{timmingData.name}}</div>
<div class="table-pack">
<div class="tr">
<div class="th-l">进车数</div>
<div class="th-r">{{timmingData.busIn}}</div>
</div>
<div class="tr">
<div class="th-l">出车数</div>
<div class="th-r">{{timmingData.busOut}}</div>
</div>
<div class="info">
设备报警信息:
<div>&nbsp;</div>
<swiper :options="swiperOption" ref="mySwiper">
<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>
<div class="time">时间:{{ formatTime(timeNow,'YYYY-MM-DD HH:mm:ss') }}</div>
</div>
<div class="container">
<div class="page-pack" :style="{transform: zoom}" style="transform-origin: 0 0">
<swiper :options="swiperOption2">
<swiper-slide>
<div class="title-pack">{{timmingData.name}}</div>
<div class="table-pack">
<div class="tr">
<div class="th-l">进车数</div>
<div class="th-r">{{timmingData.busIn}}</div>
</div>
<div class="tr">
<div class="th-l">出车数</div>
<div class="th-r">{{timmingData.busOut}}</div>
</div>
<div class="info">
设备报警信息:
<div>&nbsp;</div>
<swiper :options="swiperOption">
<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>
<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>
</template>
<script>
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import Moment from 'moment'
export default {
name: 'StationSurfaceVarnish',
components: {
swiper,
swiperSlide
},
data () {
return {
// Data轮询定时器
dataTimer: '',
mockArray: [0, 1, 2, 3, 4, 5, 6, 7],
// 工位实时数据
timmingData: {},
// 报警数据
warningList: {},
warningList: [],
width: 0,
height: 0,
zoom: 'scale(0)',
......@@ -48,116 +80,360 @@
autoplay: {
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: {
// 时间日期格式化
formatTime (time, format) {
if (time !== null && time !== '') {
return Moment(time).format(format)
} else {
return '暂无'
}
},
//获取工位实时信息
getData () {
this.$fetch('led-controller/ledInfo-get', {ledNo: '6'}).then(res => {
this.timmingData = res;
this.warningList = res.warningList;
// console.log(this.warningList)
this.timmingData = _.cloneDeep(res);
this.roomInfoList = _.cloneDeep(res.roomInfoList);
this.warningList = _.cloneDeep(res.warningList)
console.log(this.roomInfoList.length)
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 () {
this.getData()
let vm = this
// 模拟时间运作
this.timer = setInterval(() => {
vm.timeNow = this.formatTime()
}, 1000)
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})`
}, 3000)
console.log(this.zoom)
}, 0)
},
beforeDestroy () {
if (this.timer) {
clearInterval(this.timer); //在Vue实例销毁前,清除定时器
}
if (this.dataTimer) {
clearInterval(this.dataTimer); //在Vue实例销毁前,清除定时器
}
}
}
</script>
<style lang="scss" scoped>
.page-pack {
width: 1710px;
height: 860px;
.container {
height: 100%;
width: 100%;
background-color: #111;
.title-pack {
.page-pack {
width: 1710px;
height: 100px;
text-align: center;
color: yellow;
line-height: 100px;
font-weight: bold;
font-size: 60px;
}
.table-pack {
overflow: hidden;
height: 860px;
background-color: #111;
.tr {
.title-pack {
width: 1710px;
height: 102px;
height: 100px;
text-align: center;
color: yellow;
line-height: 100px;
font-weight: bold;
font-size: 60px;
}
.th-l {
width: 853px;
height: 100px;
.table-pack {
overflow: hidden;
.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-right: 2px solid yellow;
float: left;
text-align: center;
color: yellow;
line-height: 100px;
font-weight: bold;
font-size: 60px;
.swiper-slide{
word-wrap: break-word;
word-break: break-all;
}
}
.th-r {
width: 855px;
.time {
width: 1710px;
height: 100px;
border-top: 2px solid yellow;
float: left;
text-align: center;
color: yellow;
line-height: 100px;
font-weight: bold;
line-height: 100px;
font-size: 60px;
}
}
.info {
.sprayDrying {
width: 1710px;
height: 454px;
border-top: 2px solid yellow;
color: yellow;
font-weight: bold;
font-size: 60px;
}
height: 860px;
background-color: #111;
.time {
width: 1710px;
height: 100px;
border-top: 2px solid yellow;
color: yellow;
font-weight: bold;
line-height: 100px;
font-size: 60px;
.title-pack {
// width: 1710px;
// height: 100px;
text-align: center;
color: yellow;
line-height: 100px;
font-weight: bold;
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;
// }
}
}
}
}
......
......@@ -552,6 +552,7 @@
*/
import Tooltip from './Tooltip';
export default {
name: 'MonitorComplexionPaint',
components: {
Tooltip
},
......
......@@ -448,6 +448,7 @@
<script>
import Tooltip from './Tooltip';
export default {
name: 'MonitorElectrophoresis',
components: {
Tooltip
},
......
......@@ -149,6 +149,7 @@
<script>
import Tooltip from './Tooltip';
export default {
name: 'MonitorFinishedCar',
components: {
Tooltip
},
......
......@@ -198,6 +198,7 @@
*/
import Tooltip from './Tooltip';
export default {
name: 'MonitorMiddleCoat',
components: {
Tooltip
},
......
......@@ -221,6 +221,7 @@
*/
import Tooltip from './Tooltip';
export default {
name: 'MonitorPutty',
components: {
Tooltip
},
......
......@@ -306,6 +306,7 @@
<script>
import Tooltip from './Tooltip';
export default {
name: 'MonitorSealedAnticorrosion',
components: {
Tooltip
},
......
......@@ -299,6 +299,7 @@
<script>
import Tooltip from './Tooltip';
export default {
name: 'MonitorSheetMetalCar',
components: {
Tooltip
},
......
......@@ -1562,6 +1562,7 @@
<script>
export default {
name: 'MonitorIndex',
data () {
return {
// 筛选条件工单号
......@@ -1807,10 +1808,28 @@
</script>
<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 {
overflow-x: hidden;
overflow-y: visible;
height: 1400px;
width: 100%;
background-color: #001927;
animation: identifier 10s infinite alternate;
// animation: identifier 8s infinite cubic-bezier(1,0,0.5,0);
.view-pack {
margin: 0 auto;
width: 1600px;
......@@ -3694,7 +3713,7 @@
}
.no-message {
font-size: 12px !important;
font-size: 6px !important;
font-weight: 400;
}
......@@ -3775,6 +3794,10 @@
}
}
::-webkit-scrollbar {
display: none ! important;
}
// 轻客车体样式
.monitor-car-external {
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