fea(VOC LED): VOC LED小屏开发

config/index.js

@@ -16,7 +16,7 @@ module.exports = {
                 // target: 'http://10.100.172.150:9108',  // 设置你调用的接口域名和端口号 别忘了加http
                 // target: 'http://192.168.43.244:8888', // 东伟服务器地址
                 // target: 'http://192.168.43.153:8080', // 训浩服务器
-                target: 'http://192.168.43.98:8080', // 本地服务器
+                target: 'http://169.254.129.46:8082', // 本地服务器
                 changeOrigin: true,
                 pathRewrite: {
                     '^/host': ''//这里理解成用‘/host’代替target里面的地址，后面组件中我们掉接口时直接用api代替 比如我要调用'http://40.00.100.100:3002/user/add'，直接写‘/api/user/add’即可

src/interface/apis.js

@@ -5,6 +5,10 @@
 			"url": "/PDA/change/skid",
 			"method": "post"
 		},
+		"order-post": {
+			"url": "/PDA/elec/bound/order",
+			"method": "post"
+		},
 		"bound-post": {
 			"url": "/PDA/hanzhuang/bound",
 			"method": "post"
@@ -185,6 +189,10 @@
 		}
 	},
 	"led-controller": {
+		"VOC-get": {
+			"url": "/api/led/info/VOC",
+			"method": "get"
+		},
 		"ledInfo-get": {
 			"url": "/api/led/ledInfo",
 			"method": "get"

src/lang/zh/route.js

@@ -46,6 +46,7 @@ export default {
     StationSurfaceVarnish: '面/清漆',
     StationSprayDryingRoom: '喷漆/烘干室',
     WorkShopPaintingWorkShop: '涂装车间',
+    StationVoc: 'voc',
     // 监控大屏
     CenterControl: '监控大屏',
     CenterControlIndex: '监控大屏',

src/permission.js

@@ -20,6 +20,7 @@ const whiteList = [
     '/led/stationSurfaceVarnish',
     '/led/stationSprayDryingRoom',
     '/led/workShopPaintingWorkShop',
+    '/led/stationVoc',
     '/monitor/monitorIndex',
     '/monitor/monitorElectrophoresis',
     '/monitor/monitorSheetMetalCar',

src/router/index.js

@@ -126,6 +126,13 @@ export const constantRouterMap = [{
             component: () => import('@/views/Led/WorkShop/paintingWorkShop'),
             name: 'WorkShopPaintingWorkShop',
             meta: { title: 'WorkShopPaintingWorkShop', icon: 'template' }
+        },
+        {
+            // voc
+            path: 'stationVoc',
+            component: () => import('@/views/Led/Station/voc'),
+            name: 'StationVoc',
+            meta: { title: 'StationVoc', icon: 'template' }
         }
     ]
 }]

src/views/Led/Station/applyArtificial.vue

 <template>
   <div class="container">
-      <div class="page-pack" :style="{transform: zoom}" style="transform-origin: 0 0">
+    <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">
@@ -20,7 +20,7 @@
           </div>
           <div class="time">时间：{{ timeNow }}</div>
       </div>
-  </div>
+    </div>
   </div>
 </template>
 

src/views/Led/Station/voc.vue

+<template>
+    <div class="page-pack">
+        <div class="container">
+            <div class="tabla-pack">
+                <div class="tr">
+                    <div class="th-l">北进口VOC浓度</div>
+                    <div class="th-r">
+                        <span class="text">{{northCONC}}</span>
+                    </div>
+                </div>
+                <div class="tr">
+                    <div class="th-l">南进口VOC浓度</div>
+                    <div class="th-r">
+                        <span class="text">{{southCONC}}</span>
+                    </div>
+                </div>
+                <div class="tr">
+                    <div class="th-l">出口VOC浓度</div>
+                    <div class="th-r">
+                        <span class="text">{{exitCONC}}</span>
+                    </div>
+                </div>
+                <div class="time">时间: {{timeNow}}</div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+    import Moment from 'moment'
+
+    export default {
+        name: 'StationVoc',
+        data () {
+            return {
+                // 屏幕显示当前时间
+                timeNow: '',
+                // 当前时间定时器
+                nowTimer: '',
+                // 数据请求定时器
+                dataTimer: '',
+                // 出口VOC浓度
+                exitCONC: null,
+                // 北进口VOC浓度
+                northCONC: null,
+                // 南进口VOC浓度
+                southCONC: null
+            }
+        },
+        methods: {
+            // 计算实时时间
+            getTimeNow () {
+                this.timeNow = Moment().format('YYYY-MM-DD HH:mm:ss')
+                this.nowTimer = setInterval(() => {
+                    this.timeNow = Moment().format('YYYY-MM-DD HH:mm:ss')
+                }, 1000)
+            },
+            // 获取VOC实时数据
+            getVOCRealData () {
+                this.$fetch('led-controller/VOC-get', {}).then(response => {
+                    this.exitCONC = _.cloneDeep(response.exitCONC)
+                    this.northCONC = _.cloneDeep(response.northCONC)
+                    this.southCONC = _.cloneDeep(response.southCONC)
+                })
+            }
+        },
+        mounted () {
+            setTimeout(() => {
+                this.width = document.body.offsetWidth
+                this.height = document.body.offsetHeight
+                // 计算实时时间
+                this.getTimeNow()
+                // 获取VOC实时数据
+                this.getVOCRealData()
+                this.dataTimer = setInterval(() => {
+                    // 获取VOC实时数据
+                    this.getVOCRealData()
+                }, 60000)
+            }, 0)
+        },
+        beforeDestroy () {
+            clearInterval(this.nowTimer)
+            clearInterval(this.dataTimer)
+        }
+    }
+</script>
+
+<style lang="scss" scoped>
+    .page-pack {
+        width: 100%;
+        height: 100%;
+        .container {
+            width: 1842px;
+            height: 921px;
+            background-color: #111;
+            .tabla-pack {
+                overflow: hidden;
+                .tr {
+                    overflow: hidden;
+                    .th-l {
+                        height: 225px;
+                        width: 1218.5px;
+                        border-right: 5px solid yellow;
+                        border-bottom: 5px solid yellow;
+                        float: left;
+                        text-align: center;
+                        color: yellow;
+                        font-size: 150px;
+                        line-height: 225px;
+                    }
+                    .th-r {
+                        float: right;
+                        height: 225px;
+                        width: 618.5px;
+                        border-bottom: 5px solid yellow;
+                        text-align: center;
+                        color: yellow;
+                        line-height: 225px;
+                        .text {
+                            font-size: 150px;
+                        }
+                    }
+                }
+                .time {
+                    height: 225px;
+                    width: 1842px;
+                    color: yellow;
+                    font-size: 150px;
+                    line-height: 225px;
+                }
+            }
+        }      
+    }
+</style>
\ No newline at end of file