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>鏁呴殰浠ｇ爜锛�</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