From 34bfdfcac447c6ef9a08d3ffb6691f09cda66350 Mon Sep 17 00:00:00 2001
From: Junjie <fallin.jie@qq.com>
Date: 星期二, 28 十一月 2023 16:07:37 +0800
Subject: [PATCH] #设备监控页面

---
 src/main/webapp/views/deviceWatch/deviceWatch.html |  310 +++++++++++++++++++++++++++++++++++++++++++++++++++
 1 files changed, 310 insertions(+), 0 deletions(-)

diff --git a/src/main/webapp/views/deviceWatch/deviceWatch.html b/src/main/webapp/views/deviceWatch/deviceWatch.html
new file mode 100644
index 0000000..399ef71
--- /dev/null
+++ b/src/main/webapp/views/deviceWatch/deviceWatch.html
@@ -0,0 +1,310 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <title>璁惧鐩戞帶</title>
+    <link rel="stylesheet" href="../../static/wcs/css/element.css">
+    <script type="text/javascript" src="../../static/wcs/js/jquery/jquery-3.3.1.min.js"></script>
+    <script type="text/javascript" src="../../static/wcs/js/common.js"></script>
+    <script type="text/javascript" src="../../static/wcs/js/vue.min.js"></script>
+    <script type="text/javascript" src="../../static/wcs/js/element.js"></script>
+    <style>
+        .crnBox .el-carousel__item:nth-child(1n) {
+            background: #fff;
+            border: 1px solid #DCDFE6;
+            box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
+            color: #303133;
+        }
+
+        .devpBox .el-carousel__item:nth-child(1n) {
+            background: #fff;
+            border: 1px solid #DCDFE6;
+            box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
+            color: #303133;
+        }
+
+        .devpBox {
+            margin-top: 20px;
+        }
+
+        .deviceHeader {
+            text-align: center;
+            font-size: 24px;
+        }
+
+        .deviceBody {
+            display: flex;
+            justify-content: space-around;
+            align-items: center;
+            margin-top: 20px;
+            flex-wrap: wrap;
+        }
+
+        .deviceItem {
+            width: 300px;
+            height: 40px;
+        }
+
+        .devpDeviceBox {
+            width: 230px;
+        }
+
+        .devpDeviceItem {
+            width: 110px;
+        }
+    </style>
+</head>
+
+<body>
+<div id="app">
+    <el-card class="box-card crnBox">
+        <div slot="header" class="clearfix">
+            <span>鍫嗗灈鏈�</span>
+        </div>
+        <el-carousel :interval="4000" type="card" :height="crnListHeight">
+            <el-carousel-item v-for="(item,index) in crnList" :key="index">
+                <div ref="crnCarousel" class="deviceBox">
+                    <div class="deviceHeader">{{item.crnNo}}鍙峰爢鍨涙満</div>
+                    <div class="deviceBody">
+                        <div class="deviceItem">
+                            <span>鍫嗗灈鏈猴細</span>
+                            <span>{{ item.crnNo }}</span>
+                        </div>
+                        <div class="deviceItem">
+                            <span>宸ヤ綔鍙凤細</span>
+                            <span>{{ item.workNo }}</span>
+                        </div>
+                        <div class="deviceItem">
+                            <span>妯″紡锛�</span>
+                            <span><el-tag :type="item.statusType == '鑷姩' ? 'success':'danger'">{{ item.statusType }}</el-tag></span>
+                        </div>
+                        <div class="deviceItem">
+                            <span>浠诲姟鐘舵�侊細</span>
+                            <span><el-tag :type="item.wrkStatus == 0 ? '':'success'">{{ item.wrkStatus$ }}</el-tag></span>
+                        </div>
+                        <div class="deviceItem">
+                            <span>璁惧鐘舵�侊細</span>
+                            <span><el-tag :type="item.deviceStatus == '鑷姩' ? 'success':'danger'">{{ item.deviceStatus }}</el-tag></span>
+                        </div>
+                        <div class="deviceItem">
+                            <span>鏈夌墿锛�</span>
+                            <span><el-tag :type="item.loading == '鏃犵墿' ? '':'success'">{{ item.loading }}</el-tag></span>
+                        </div>
+                        <div class="deviceItem">
+                            <span>鍒楋細</span>
+                            <span>{{ item.bay }}</span>
+                        </div>
+                        <div class="deviceItem">
+                            <span>灞傦細</span>
+                            <span>{{ item.lev }}</span>
+                        </div>
+                        <div class="deviceItem">
+                            <span>鏁呴殰浠g爜锛�</span>
+                            <span>{{ item.warnCode }}</span>
+                        </div>
+                        <div class="deviceItem">
+                            <span>鏁呴殰鎻忚堪锛�</span>
+                            <span>{{ item.error }}</span>
+                        </div>
+                        <div class="deviceItem">
+                            <span>婧愮珯锛�</span>
+                            <span>{{ item.sourceStaNo }}</span>
+                        </div>
+                        <div class="deviceItem">
+                            <span>鐩爣绔欙細</span>
+                            <span>{{ item.staNo }}</span>
+                        </div>
+                        <div class="deviceItem">
+                            <span>婧愬簱浣嶏細</span>
+                            <span>{{ item.sourceLocNo }}</span>
+                        </div>
+                        <div class="deviceItem">
+                            <span>鐩爣搴撲綅锛�</span>
+                            <span>{{ item.locNo }}</span>
+                        </div>
+                        <div class="deviceItem">
+                            <span>璐у弶瀹氫綅锛�</span>
+                            <span>{{ item.forkOffset }}</span>
+                        </div>
+                        <div class="deviceItem">
+                            <span>杞借揣鍙板畾浣嶏細</span>
+                            <span>{{ item.liftPos }}</span>
+                        </div>
+                        <div class="deviceItem">
+                            <span>璧拌鍦ㄥ畾浣嶏細</span>
+                            <span>{{ item.walkPos }}</span>
+                        </div>
+                        <div class="deviceItem">
+                            <span>璧拌閫熷害(m/min)锛�</span>
+                            <span>{{ item.xspeed }}</span>
+                        </div>
+                        <div class="deviceItem">
+                            <span>鍗囬檷閫熷害(m/min)锛�</span>
+                            <span>{{ item.yspeed }}</span>
+                        </div>
+                        <div class="deviceItem">
+                            <span>鍙夌墮閫熷害(m/min)锛�</span>
+                            <span>{{ item.zspeed }}</span>
+                        </div>
+                        <div class="deviceItem">
+                            <span>璧拌璺濈(Km)锛�</span>
+                            <span>{{ item.xdistance }}</span>
+                        </div>
+                        <div class="deviceItem">
+                            <span>鍗囬檷璺濈(Km)锛�</span>
+                            <span>{{ item.ydistance }}</span>
+                        </div>
+                        <div class="deviceItem">
+                            <span>璧拌鏃堕暱(H)锛�</span>
+                            <span>{{ item.xduration }}</span>
+                        </div>
+                        <div class="deviceItem">
+                            <span>鍗囬檷鏃堕暱(H)锛�</span>
+                            <span>{{ item.yduration }}</span>
+                        </div>
+                    </div>
+                </div>
+            </el-carousel-item>
+        </el-carousel>
+    </el-card>
+
+    <el-card class="box-card devpBox">
+        <div slot="header" class="clearfix">
+            <span>杈撻�佺嚎</span>
+        </div>
+        <el-carousel :interval="4000" type="card" :height="devpListHeight">
+            <el-carousel-item v-for="(val,index) in devpList" :key="index" w>
+                <div style="display: flex;justify-content: space-around;width: 100%;">
+                    <div v-for="(item,idx) in val" :key="idx" class="devpDeviceBox">
+                        <div class="deviceHeader">{{item.devNo}}鍙风珯鐐�</div>
+                        <div class="deviceBody">
+                            <div class="devpDeviceItem">
+                                <span>绔欑偣锛�</span>
+                                <span>{{ item.devNo }}</span>
+                            </div>
+                            <div class="devpDeviceItem">
+                                <span>宸ヤ綔鍙凤細</span>
+                                <span>{{ item.workNo }}</span>
+                            </div>
+                            <div class="devpDeviceItem">
+                                <span>鑷姩锛�</span>
+                                <span>{{ item.autoing }}</span>
+                            </div>
+                            <div class="devpDeviceItem">
+                                <span>鏈夌墿锛�</span>
+                                <span>{{ item.loading }}</span>
+                            </div>
+                            <div class="devpDeviceItem">
+                                <span>鍙叆锛�</span>
+                                <span>{{ item.inEnable }}</span>
+                            </div>
+                            <div class="devpDeviceItem">
+                                <span>鍙嚭锛�</span>
+                                <span>{{ item.outEnable }}</span>
+                            </div>
+                            <div class="devpDeviceItem">
+                                <span>鍏ュ簱鏍囪锛�</span>
+                                <span>{{ item.pakMk }}</span>
+                            </div>
+                            <div class="devpDeviceItem">
+                                <span>绌烘澘淇″彿锛�</span>
+                                <span>{{ item.emptyMk }}</span>
+                            </div>
+                            <div class="devpDeviceItem">
+                                <span>鐩爣绔欙細</span>
+                                <span>{{ item.staNo }}</span>
+                            </div>
+                            <div class="devpDeviceItem">
+                                <span>楂樹綆搴撲綅锛�</span>
+                                <span>{{ item.locType1 }}</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </el-carousel-item>
+        </el-carousel>
+    </el-card>
+</div>
+<script>
+    var app = new Vue({
+        el: '#app',
+        data: {
+            crnList: [],
+            crnListHeight: '200px',
+            devpList: [],
+            devpListHeight: '200px',
+        },
+        created() {
+            this.init()
+        },
+        methods: {
+            init() {
+                this.getCrnList()
+                this.getDevpList()
+
+                setInterval(() => {
+                    this.getCrnList()
+                    this.getDevpList()
+                }, 1000)
+            },
+            getCrnList() {
+                //鑾峰彇鍫嗗灈鏈簂ist
+                let that = this
+                $.ajax({
+                    url: baseUrl + "/crn/list/auth",
+                    headers: {
+                        'token': localStorage.getItem('token')
+                    },
+                    data: {},
+                    dataType: 'json',
+                    contentType: 'application/json;charset=UTF-8',
+                    method: 'GET',
+                    success: function (res) {
+                        that.crnList = res.data
+
+                        that.$nextTick(()=>{
+                            that.crnListHeight = that.$refs.crnCarousel[0].offsetHeight + "px"
+                        })
+                    }
+                });
+            },
+            getDevpList() {
+                //鑾峰彇杈撻�佺嚎list
+                let that = this
+                $.ajax({
+                    url: baseUrl + "/site/list/auth",
+                    headers: {
+                        'token': localStorage.getItem('token')
+                    },
+                    data: {},
+                    dataType: 'json',
+                    contentType: 'application/json;charset=UTF-8',
+                    method: 'GET',
+                    success: function (res) {
+                        let list = []
+                        let tmp = []
+                        res.data.forEach((item,index) => {
+                            if (index % 3 == 0) {
+                                if (tmp.length != 0) {
+                                    list.push(tmp)
+                                }
+                                tmp = [];
+                            }
+
+                            tmp.push(item)
+                        })
+
+                        that.devpList = list
+                        that.$nextTick(()=>{
+                            that.crnListHeight = that.$refs.crnCarousel[0].offsetHeight + "px"
+                        })
+                    }
+                });
+            }
+        }
+    })
+</script>
+</body>
+
+</html>

--
Gitblit v1.9.1