monitor.git - Gitblit

			@@ -1,5 +1,6 @@
			<template>
			<view class="container">
			<!-- 宁波捷丰项目 -->
			<uni-transition :duration="duration" :mode-class="homeMode" :show="homeViewShow">
			<view class="home-view">
			<view class="head">
			@@ -28,8 +29,8 @@
			<image src="../../static/a1.png" mode="aspectFit"></image>
			<view class="flex-col" style="width: calc(100% - 5vw);">
			<view class="flex-row" style="position: relative;" >
			<view style="width: 2vw;padding-left: 5vw;;font-size: 2vw;">{{baseInfo.xDistance}}</view>
			<view style="position: absolute;bottom: 0;left: 7vw;">m</view>
			<view style="width: 2vw;padding-left: 2vw;;font-size: 2vw;">{{baseInfo.xDistance}}</view>
			<view style="position: absolute;bottom: 0;left: 10vw;">m</view>
			</view>
			<view style="height: 100%;text-align: left;text-indent: 2em;">累计走行距离(米)</view>
			</view>
			@@ -39,8 +40,8 @@
			<image src="../../static/b1.png" mode="aspectFit"></image>
			<view class="flex-col" style="width: calc(100% - 5vw);">
			<view class="flex-row" style="position: relative;" >
			<view style="width: 2vw;padding-left: 5vw;;font-size: 2vw;">{{baseInfo.yDistance}}</view>
			<view style="position: absolute;bottom: 0;left: 7vw;">m</view>
			<view style="width: 2vw;padding-left: 2vw;;font-size: 2vw;">{{baseInfo.yDistance}}</view>
			<view style="position: absolute;bottom: 0;left: 10vw;">m</view>
			</view>
			<view style="height: 100%;text-align: left;text-indent: 2em;">累计升降距离(米)</view>
			</view>
			@@ -50,8 +51,8 @@
			<image src="../../static/c1.png" mode="aspectFit"></image>
			<view class="flex-col" style="width: calc(100% - 5vw);">
			<view class="flex-row" style="position: relative;" >
			<view style="width: 2vw;padding-left: 5vw;;font-size: 2vw;">{{baseInfo.xDuration}}</view>
			<view style="position: absolute;bottom: 0;left: 7vw;">s</view>
			<view style="-width: 2vw;padding-left: 2vw;;font-size: 2vw;">{{baseInfo.xDuration}}</view>
			<view style="position: absolute;bottom: 0;left: 10vw;">s</view>
			</view>
			<view style="height: 100%;text-align: left;text-indent: 2em;">累计走行时长(秒)</view>
			</view>
			@@ -61,8 +62,8 @@
			<image src="../../static/d1.png" mode="aspectFit"></image>
			<view class="flex-col" style="width: calc(100% - 5vw);">
			<view class="flex-row" style="position: relative;" >
			<view style="width: 2vw;padding-left: 5vw;;font-size: 2vw;">{{baseInfo.yDuration}}</view>
			<view style="position: absolute;bottom: 0;left: 7vw;">s</view>
			<view style="width: 2vw;padding-left: 2vw;;font-size: 2vw;">{{baseInfo.yDuration}}</view>
			<view style="position: absolute;bottom: 0;left: 10vw;">s</view>
			</view>
			<view style="height: 100%;text-align: left;text-indent: 2em;">累计升降时长(秒)</view>
			</view>
			@@ -134,9 +135,9 @@

			<!-- null -->
			<view style="height: 2%;"></view>



			<view style="height: 43%;">
			<view style="height: 51%;">
			<y-box>
			<view class="box-item">
			<view class="flex-row" style="width: 100%;">
			@@ -155,39 +156,65 @@
			</view>
			</view>
			<view class="flex-row" style="width: 100%;">
			<!-- 左 -->
			<view class="charts-box-ring">
			<qiun-data-charts type="ring" :opts="{legend:{position:'bottom'}}" :eopts="ringOpts" :chartData="chartsDataPie2" :echartsH5="true" :echartsApp="true"/>
			</view>
			<!-- 右 -->
			<view>
			<!-- 库位使用情况 -->
			<!-- left -->
			<view style="margin-left: 5%;">
			<view class="flex-row sub-info">
			<image src="../../static/g1.png" mode="aspectFit"></image>
			<view style="width: 8vw;height: 4vw;line-height: 4vw;">在库</view>
			<view style="width: 8vw;height: 4vw;line-height: 4vw;font-size: 2vw;">10000</view>
			<view style="width: 8vw;height: 4vw;line-height: 4vw;">长总库位</view>
			<view style="width: 8vw;height: 4vw;line-height: 4vw;font-size: 2vw;">{{baseInfo.longAllLoc}}</view>
			</view>
			<view class="flex-row sub-info" style="margin-top: 2vh;">
			<view class="flex-row sub-info">
			<image src="../../static/g1.png" mode="aspectFit"></image>
			<view style="width: 8vw;height: 4vw;line-height: 4vw;">在库</view>
			<view style="width: 8vw;height: 4vw;line-height: 4vw;font-size: 2vw;">10000</view>
			<view style="width: 8vw;height: 4vw;line-height: 4vw;">使用库位</view>
			<view style="width: 8vw;height: 4vw;line-height: 4vw;font-size: 2vw;">{{baseInfo.longUseLoc}}</view>
			</view>
			<view class="flex-row sub-info" style="margin-top: 2vh;">
			<view class="flex-row sub-info">
			<image src="../../static/g1.png" mode="aspectFit"></image>
			<view style="width: 8vw;height: 4vw;line-height: 4vw;">在库</view>
			<view style="width: 8vw;height: 4vw;line-height: 4vw;font-size: 2vw;">10000</view>
			<view style="width: 8vw;height: 4vw;line-height: 4vw;">空库位</view>
			<view style="width: 8vw;height: 4vw;line-height: 4vw;font-size: 2vw;">{{baseInfo.longEmptyLoc}}</view>
			</view>
			<view class="flex-row sub-info">
			<image src="../../static/g1.png" mode="aspectFit"></image>
			<view style="width: 8vw;height: 4vw;line-height: 4vw;">禁用库位</view>
			<view style="width: 8vw;height: 4vw;line-height: 4vw;font-size: 2vw;">{{baseInfo.longXLoc}}</view>
			</view>
			</view>
			<view style="margin-left: 5%;">
			<view class="flex-row sub-info">
			<image src="../../static/g1.png" mode="aspectFit"></image>
			<view style="width: 8vw;height: 4vw;line-height: 4vw;">短总库位</view>
			<view style="width: 8vw;height: 4vw;line-height: 4vw;font-size: 2vw;">{{baseInfo.shortAllLoc}}</view>
			</view>
			<view class="flex-row sub-info">
			<image src="../../static/g1.png" mode="aspectFit"></image>
			<view style="width: 8vw;height: 4vw;line-height: 4vw;">使用库位</view>
			<view style="width: 8vw;height: 4vw;line-height: 4vw;font-size: 2vw;">{{baseInfo.shortUseLoc}}</view>
			</view>
			<view class="flex-row sub-info">
			<image src="../../static/g1.png" mode="aspectFit"></image>
			<view style="width: 8vw;height: 4vw;line-height: 4vw;">空库位</view>
			<view style="width: 8vw;height: 4vw;line-height: 4vw;font-size: 2vw;">{{baseInfo.shortEmptyLoc}}</view>
			</view>
			<view class="flex-row sub-info">
			<image src="../../static/g1.png" mode="aspectFit"></image>
			<view style="width: 8vw;height: 4vw;line-height: 4vw;">禁用库位</view>
			<view style="width: 8vw;height: 4vw;line-height: 4vw;font-size: 2vw;">{{baseInfo.shortXLoc}}</view>
			</view>
			</view>

			</view>
			</view>

			</y-box>
			</view>
			<view style="height: 2%;"></view>
			<view style="height: 18%;">
			<view style="height: 10%;">
			<y-box>
			<view class="flex-col" style="width: 100%;height: 100%;font-size: 4vh;justify-content: center;letter-spacing: 1vh;">
			<!-- 嘉善边锋机械股份有限公司 -->
			自动仓库WCS监控平台
			<!-- <image src="../../static/ruiyun.jpg" mode="" style="width: 100%;"></image> -->
			</view>
			</y-box>
			</view>
			@@ -212,12 +239,34 @@
			<view class="info-main">
			<view class="info-box">
			<y-box>
			<view class="info-box-text">
			<view class="flex-col info-box-text-item">目标站：{{infoText.staNo}}</view>
			<view class="flex-col info-box-text-item">商品编号：{{infoText.matnr}}</view>
			<view class="flex-col info-box-text-item">商品名称：{{infoText.maknx}}</view>
			<view class="flex-col info-box-text-item">商品规格：{{infoText.specs}}</view>
			<view class="flex-col info-box-text-item">数量：{{infoText.count}}</view>
			<!-- 文本容器 -->
			<view class="text-content">
			<!-- head -->
			<view class="swiper-head">
			<view style="width: 20%;">目标站：{{infoText.staNo}}</view>
			<view style="width: 30%;">商品编号</view>
			<view style="width: 20%;">商品名称</view>
			<view style="width: 20%;">规格</view>
			<view style="width: 10%;">数量</view>
			</view>
			<!-- body -->
			<view class="swiper-body">
			<!-- swiper 一些说明
			circular 是否采用衔接滑动，即播放到末尾后重新回到开头
			vertical 滑动方向是否为纵向
			display-multiple-items 同时显示的滑块数量 -->
			<swiper class="swiper-body-main" vertical="true"
			display-multiple-items="8"
			circular="true" :autoplay="true" :interval="3000" :duration="1000">
			<swiper-item class="swiper-item" v-for="(item,i) in swiperList" :key="i">
			<view style="width: 20%;">No:{{i+1}}</view>
			<view style="width: 30%;">{{item.matNo}}</view>
			<view style="width: 20%;">{{item.maknx}}</view>
			<view style="width: 20%;">{{item.specs}}</view>
			<view style="width: 10%;">{{item.count}}</view>
			</swiper-item>
			</swiper>
			</view>
			</view>
			</y-box>
			</view>
			@@ -314,7 +363,18 @@
			xDuration: 3,
			yDuration: 4,
			usedPr: 50,
			used: 3537
			used: 3537,
			stockCount: '',
			emptyCount: '',
			noneCount: '',
			longAllLoc: '',
			shortAllLoc: '',
			longEmptyLoc: '',
			shortEmptyLoc: '',
			longUseLoc: '',
			shortUseLoc: '',
			longXLoc: '',
			shortXLoc: '',
			},
			chartsData: {
			"Line": {
			@@ -346,17 +406,15 @@
			infoType: 0,
			text: '',
			infoText: {
			title: '全板出库',
			staNo: "200",
			matnr: "300",
			maknx: "400",
			specs: "500",
			count: "600",
			error: "利用立体仓库设备可实现仓库高层合理化、存取自动化、操作简便化；。"
			title: '',
			staNo: "",
			matnr: "",
			maknx: "",
			specs: "",
			count: "",
			error: ""
			},



			swiperList: []
			}
			},
			onShow() {
			@@ -377,32 +435,32 @@
			that.baseLedId = BaseLedId
			that.basePort = BasePort
			that.baseCrnId = BaseCrnId
			this.getUrl()
			console.log(that.commonUrl);
			// this.getUrl()
			},
			onLoad() {
			this.getServerData()
			this.getDate()
			setInterval(()=>{
			this.getServerData()
			this.initlineChart()
			this.initPieChart()
			this.getOther()
			this.getDate()
			this.getInfo()
			this.getError()
			// 测试用
			// this.getInfo2()
			// this.getError2()
			this.getUrl()
			this.controller()
			// 测试用

			},1000)
			setInterval(()=>{
			// this.controller()
			},2000)
			},
			methods: {
			getUrl() {
			this.commonUrl = this.baseHttp + this.baseIP + ':' +this.basePort + "/" +this.baseUrl
			},
			getServerData() {
			this.chartsDataLine1=JSON.parse(JSON.stringify(demodata.Line))
			this.chartsDataPie2=JSON.parse(JSON.stringify(demodata.PieA))
			this.chartsDataLine1=JSON.parse(JSON.stringify(this.chartsData.Line))
			this.chartsDataPie2=JSON.parse(JSON.stringify(this.chartsData.Pie))
			},
			// 获取错误信息
			getInfo2() {
			@@ -421,9 +479,11 @@
			that.infoText.title = '检料出库'
			}
			that.infoText.staNo = res.data[0].staNo
			that.infoText.specs = res.data[0].matDtos[0].specs
			that.infoText.maknx = res.data[0].matDtos[0].maknx
			that.infoText.count = res.data[0].matDtos[0].count
			that.swiperList = res.data[0].matDtos
			// that.infoText.matnr = res.data[0].matDtos[0].matnr
			// that.infoText.specs = res.data[0].matDtos[0].specs
			// that.infoText.maknx = res.data[0].matDtos[0].maknx
			// that.infoText.count = res.data[0].matDtos[0].count
			} else {
			if (that.infoType == 2 \|\| that.infoType == 3) {
			return;
			@@ -471,11 +531,15 @@
			that.infoText.title = '全板出库'
			} else if(res.data[0].ioType === 103) {
			that.infoText.title = '检料出库'
			} else if(res.data[0].ioType === 107) {
			that.infoText.title = '盘点出库'
			}
			that.infoText.staNo = res.data[0].staNo
			that.infoText.specs = res.data[0].matDtos[0].specs
			that.infoText.maknx = res.data[0].matDtos[0].maknx
			that.infoText.count = res.data[0].matDtos[0].count
			that.swiperList = res.data[0].matDtos
			// that.infoText.matnr = res.data[0].matDtos[0].matnr
			// that.infoText.specs = res.data[0].matDtos[0].specs
			// that.infoText.maknx = res.data[0].matDtos[0].maknx
			// that.infoText.count = res.data[0].matDtos[0].count
			} else {
			if (that.infoType == 2 \|\| that.infoType == 3) {
			return;
			@@ -490,6 +554,7 @@
			let that = this
			uni.request({
			url: that.commonUrl + "/monitor/led/error",
			data: {ledId:that.baseLedId},
			method:"GET",
			success(result) {
			var res = result.data
			@@ -497,12 +562,14 @@
			var errorInfo = res.data
			if (that.infoType == 1) {
			that.infoType = 3
			that.infoText.title = "异常"
			that.infoText.title = "其他信息"
			// that.infoText.title = "异常"
			that.infoText.error = errorInfo
			return
			}
			that.infoType = 2
			that.infoText.title = "异常"
			that.infoText.title = "其他信息"
			// that.infoText.title = "异常"
			that.infoText.error = errorInfo
			} else {
			if (that.infoType == 1) {
			@@ -648,75 +715,82 @@
			this.calendar = year + "年" + month + "月" + day + "日 " + hours + ":" + minutes + ":" + seconds + " " + weeks
			},
			getDateFormat(value) {
			var date = new Date();// 获取当前时间
			date.setDate(date.getDate() + value);// 设置天数 -1 天
			var m = date.getMonth() + 1
			var d = date.getDate()
			var newDate = m + '-' + d
			return newDate
			},
			var date = new Date();// 获取当前时间
			date.setDate(date.getDate() + value);// 设置天数 -1 天
			var m = date.getMonth() + 1
			var d = date.getDate()
			var newDate = m + '-' + d
			return newDate
			},
			/************* 折线图 ***************************************************************************************************/
			initlineChart() {
			let that = this
			uni.request({
			url: that.commonUrl + "/monitor/line/charts",
			method:'GET',
			success(result) {
			var res = result.data
			if (res.code === 200) {
			that.chartsData.Line.categories = [
			that.getDateFormat(-11),that.getDateFormat(-10),that.getDateFormat(-9),that.getDateFormat(-8),
			that.getDateFormat(-7),that.getDateFormat(-6),that.getDateFormat(-5),that.getDateFormat(-4),
			that.getDateFormat(-3),that.getDateFormat(-2),that.getDateFormat(-1),that.getDateFormat(0),]
			that.chartsData.Line.series = res.data.rows
			}
			}
			})
			},
			initlineChart() {
			let that = this
			uni.request({
			url: that.commonUrl + "/monitor/line/charts",
			method:'GET',
			success(result) {
			var res = result.data
			if (res.code === 200) {
			that.chartsData.Line.categories = [
			that.getDateFormat(-11),that.getDateFormat(-10),that.getDateFormat(-9),that.getDateFormat(-8),
			that.getDateFormat(-7),that.getDateFormat(-6),that.getDateFormat(-5),that.getDateFormat(-4),
			that.getDateFormat(-3),that.getDateFormat(-2),that.getDateFormat(-1),that.getDateFormat(0),]
			that.chartsData.Line.series = res.data.rows
			}
			}
			})
			},
			/************* 饼图 ***************************************************************************************************/
			initPieChart() {
			let that = this
			uni.request({
			url: that.commonUrl + "/monitor/loc/rep",
			method:'GET',
			success(result) {
			var res = result.data
			if (res.code === 200) {
			that.chartsData.Pie.series[0].data = res.data.pie
			that.stockCount = res.data.stockCunt
			that.emptyCount = res.data.emptyCount
			that.noneCount = res.data.noneCount
			that.used = res.data.used
			that.usedPr = res.data.usedPr
			}
			}
			})
			},
			getOther() {
			let that = this
			uni.request({
			// http://10.10.0.222:9090/jkwcs/monitor/led?ledId=186
			url: that.commonUrl + "/monitor/other",
			data: {
			crnId: that.baseCrnId,
			ledId: that.baseLedId,
			},
			success(result) {
			console.log(result);
			var res = result.data
			if (res.code === 200) {
			that.xDistance = res.data.xDistance
			that.yDistance = res.data.yDistance
			that.xDuration = res.data.xDuration
			that.yDuration = res.data.yDuration
			} else if (res.code === 403) {

			} else {

			}
			}
			})
			},
			initPieChart() {
			let that = this
			uni.request({
			url: that.commonUrl + "/monitor/loc/rep",
			method:'GET',
			data: {
			crnId: that.baseCrnId,
			},
			success(result) {
			var res = result.data
			if (res.code === 200) {
			console.log(res.data.pie);
			that.chartsData.Pie.series[0].data = res.data.pie
			that.baseInfo.longAllLoc = res.data.longAllLoc
			that.baseInfo.shortAllLoc = res.data.shortAllLoc
			that.baseInfo.longEmptyLoc = res.data.longEmptyLoc
			that.baseInfo.shortEmptyLoc = res.data.shortEmptyLoc
			that.baseInfo.longUseLoc = res.data.longUseLoc
			that.baseInfo.shortUseLoc = res.data.shortUseLoc
			that.baseInfo.longXLoc = res.data.longXLoc
			that.baseInfo.shortXLoc = res.data.shortXLoc
			that.baseInfo.used = res.data.used
			that.baseInfo.usedPr = res.data.usedPr
			}
			}
			})
			},
			getOther() {
			let that = this
			uni.request({
			url: that.commonUrl + "/monitor/other",
			data: {
			crnId: that.baseCrnId,
			ledId: that.baseLedId,
			},
			success(result) {
			var res = result.data
			if (res.code === 200) {
			that.baseInfo.xDistance = res.data.xDistance
			that.baseInfo.yDistance = res.data.yDistance
			that.baseInfo.xDuration = res.data.xDuration
			that.baseInfo.yDuration = res.data.yDuration
			} else if (res.code === 403) {

			} else {

			}
			}
			})
			},
			}

			}
			@@ -724,6 +798,7 @@

			<style>
			/* @import url("../../static/css/common.css"); */
			@import url("home.css");
			/* 列 */
			.flex-col {
			display: flex;
			@@ -844,6 +919,7 @@
			/* background-color: #00ffff; */
			}
			.sub-info {
			margin-top: 1vh;
			font-size: 1.5vw;
			}
			.sub-info image {