zy-wcs.git - Gitblit

New file
			@@ -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() {
			//获取堆垛机list
			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>