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