封装看板跳转页面

2024-08-26 09:56:43 +08:00
parent 6705e5ef98
commit 02d3e63121
14 changed files with 410 additions and 63 deletions
--- a/common/style/layout.styl
+++ b/common/style/layout.styl
@@ -13,39 +13,39 @@ uni-button:after {
 	border: none;
 }

-@font-face {
-  font-family: "YouSheBiaoTiHei";
-  src: url('./common/style/font/YouSheBiaoTiHei.ttf') format('truetype');
-}
-@font-face {
-  font-family: "SourceHanSansCN-Bold";
-  src: url('./common/style/font/SourceHanSansCN-Bold.otf') format('truetype');
-}
-@font-face {
-  font-family: "SourceHanSansCN-Regular";
-  src: url('./common/style/font/SourceHanSansCN-Regular.otf') format('truetype');
-}
-@font-face {
-  font-family: "SourceHanSansCN-Medium";
-  src: url('./common/style/font/SourceHanSansCN-Medium.otf') format('truetype');
-}
-@font-face {
-  font-family: "iconfont";
-  src: url('./common/style/iconfont/iconfont.woff2') format('woff2'),
-       url('./common/style/iconfont/iconfont.woff') format('woff'),
-       url('./common/style/iconfont/iconfont.ttf') format('truetype');
-}
-.iconfont {
-  font-family: "iconfont" !important;
-  font-size: 16px;
-  font-style: normal;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
+// @font-face {
+//   font-family: "YouSheBiaoTiHei";
+//   src: url('./common/style/font/YouSheBiaoTiHei.ttf') format('truetype');
+// }
+// @font-face {
+//   font-family: "SourceHanSansCN-Bold";
+//   src: url('./common/style/font/SourceHanSansCN-Bold.otf') format('truetype');
+// }
+// @font-face {
+//   font-family: "SourceHanSansCN-Regular";
+//   src: url('./common/style/font/SourceHanSansCN-Regular.otf') format('truetype');
+// }
+// @font-face {
+//   font-family: "SourceHanSansCN-Medium";
+//   src: url('./common/style/font/SourceHanSansCN-Medium.otf') format('truetype');
+// }
+// @font-face {
+//   font-family: "iconfont";
+//   src: url('./common/style/iconfont/iconfont.woff2') format('woff2'),
+//        url('./common/style/iconfont/iconfont.woff') format('woff'),
+//        url('./common/style/iconfont/iconfont.ttf') format('truetype');
+// }
+// .iconfont {
+//   font-family: "iconfont" !important;
+//   font-size: 16px;
+//   font-style: normal;
+//   -webkit-font-smoothing: antialiased;
+//   -moz-osx-font-smoothing: grayscale;
+// }

-/** 内容 */
-.container {
-	width: 100%;
-	height: 100%;
-	overflow: hidden;
-}
+// /** 内容 */
+// .container {
+// 	width: 100%;
+// 	height: 100%;
+// 	overflow: hidden;
+// }
--- a/common/style/reset.css
+++ b/common/style/reset.css
@@ -41,7 +41,7 @@ input[type="button"], input[type="submit"], input[type="search"], input[type="re
 	text-overflow: ellipsis;
 	white-space: nowrap;
 }
-.flexcol {
+/* .flexcol {
 	flex-direction: column;
 }
 .flexstart {
@@ -152,4 +152,4 @@ input[type="button"], input[type="submit"], input[type="search"], input[type="re
 }
 .pdt0 {
 	padding-top: 0 !important
-}
+} */
--- a/components/MyHeader.vue
+++ b/components/MyHeader.vue
@@ -1,6 +1,13 @@
 <template>
 	<view class="header">
 		<view class="header-title">车间物流监控</view>
+		<view class="data_box">
+			<view class="time">{{time}}</view>
+			<view class="date_item">
+				<view class="year">{{year}}</view>
+				<view class="year">{{ date }}</view>
+			</view>
+		</view>
 		<view class="exit_btn iconfont" @tap="toBack">&#xe85b;</view>
 	</view>
 </template>
@@ -10,15 +17,43 @@
 		name:"MyHeader",
 		data() {
 			return {
-				
+				timer: null,
+				time: '',
+				year: '',
+				date: '',
+				week: ''
 			};
 		},
+		mounted () {
+			this.timer = window.setInterval(this.updateTime, 1000)
+		},
 		methods: {
+			updateTime () {
+				let cd = new Date()
+				let year = cd.getFullYear()
+				let month = cd.getMonth() + 1 < 10 ? '0' + (cd.getMonth() + 1) : cd.getMonth() + 1
+				let date = cd.getDate() < 10 ? '0' + cd.getDate() : cd.getDate()
+				let hh = cd.getHours() < 10 ? '0' + cd.getHours() : cd.getHours()
+				let mm = cd.getMinutes() < 10 ? '0' + cd.getMinutes() : cd.getMinutes()
+				let ss = cd.getSeconds() < 10 ? '0' + cd.getSeconds() : cd.getSeconds()
+				var weekday = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
+				let myddy = new Date().getDay()
+				let week = weekday[myddy]
+				this.time = `${hh}:${mm}:${ss}`
+				this.year = `${year}`
+				this.date = `${month}.${date}`
+				this.week = `${week}`
+			},
 			toBack () {
 				uni.redirectTo({
 					url: '/pages/setup'
 				})
 			}
+		},
+		beforeDestroy () {
+			this.$once('hook:beforeDestroy', () => {
+				clearInterval(this.timer)
+			})
 		}
 	}
 </script>
@@ -29,19 +64,19 @@
 	left 0
 	top 0
 	width 100%
-	height 181px
+	height 96px
 	background center / 100% url('../static/image/header_bg.png') no-repeat
 .header-title
 	width: 50%;
 	height: 100%;
-	padding-top 26px
-	font-size: 60px;
+	padding-top: 14px;
+	font-size: 30px;
 	font-family: 'YouSheBiaoTiHei';
 	font-weight: 400;
 	color: transparent;
-	line-height: 44px;
+	line-height: 24px;
 	opacity: 0.89;
-	letter-spacing 10px
+	letter-spacing 5px
 	background: linear-gradient(0deg, #AAD0F6 0%, #D7E7F5 53.3154296875%, #E0EAF6 100%);
 	filter: drop-shadow(#092F6D 1px 4px 1px);
 	-webkit-background-clip: text;
@@ -50,8 +85,8 @@
 	margin: 0 auto;
 .exit_btn
 	position absolute
-	left 15px
-	top 29px
+	left 10px
+	top 10px
 	height 28px
 	width 28px
 	line-height 28px
@@ -59,4 +94,25 @@
 	color #aecaf5
 	text-align: center;
 	cursor: pointer;
+.data_box
+	position absolute
+	right 10px
+	top 10px
+	display: flex
+	justify-content: flex-end
+.time
+	font-size: 28px;
+	line-height: 28px;
+	font-family: 'YouSheBiaoTiHei';
+	color: #AECAF5;
+.date_item
+	margin-left 5px
+.year
+	font-size: 12px;
+	font-family: 'YouSheBiaoTiHei';
+	color: #AECAF5;
+	line-height: 21px;
+	opacity: 0.7;
+	&:last-child
+		line-height: 0px
 </style>
--- a/manifest.json
+++ b/manifest.json
@@ -1,7 +1,7 @@
 {
-    "name" : "车间物流监控",
+    "name" : "看板大屏",
    "appid" : "__UNI__86DFCBB",
-    "description" : "上电科车间物流监控看板",
+    "description" : "看板大屏",
    "versionName" : "1.0.0",
    "versionCode" : 100,
    "transformPx" : false,
@@ -22,7 +22,8 @@
        /* 模块配置 */
        "modules" : {
            "Barcode" : {},
-            "Camera" : {}
+            "Camera" : {},
+            "Webview-x5" : {}
        },
        /* 应用发布信息 */
        "distribute" : {
--- a/pages.json
+++ b/pages.json
@@ -1,12 +1,30 @@
 {
 	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
+		// {
+		//     "path" : "pages/setup",
+		//     "style" :                                                                                    
+		//     {
+		//         "navigationStyle": "custom"
+		//     }
+		    
+		// }
+		// ,{
+  //           "path" : "pages/screen",
+  //           "style" :                                                                                    
+  //           {
+  //               "navigationStyle": "custom"
+  //           }
+            
+  //       },
 		{
-			"path" : "pages/setup",
-		    "style": {
-				"navigationStyle": "custom"
+		    "path" : "pages/index",
+		    "style" :                                                                                    
+		    {
+		        "navigationStyle": "custom"
 		    }
-		}
-        ,{
+		    
+		}
+		,{
            "path" : "pages/home",
            "style" :                                                                                    
            {
--- a/pages/home.vue
+++ b/pages/home.vue
@@ -1,19 +1,18 @@
 <template>
-	<view class="container">
-		<my-header></my-header>
+	<view>
+		<web-view :src="url"></web-view>
 	</view>
 </template>

 <script>
-	import MyHeader from '@/components/MyHeader.vue'
 	export default {
-		components: {
-			MyHeader
-		},
 		data() {
 			return {
-				
+				url: ''
 			};
+		},
+		onLoad (options) {
+			this.url = options.url
 		}
 	}
 </script>
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -0,0 +1,64 @@
+<template>
+	<view class="container">
+		<view class="content">
+			<view class="zd-row">
+				<view class="zd-col-6 label">地址</view>
+				<view class="zd-col-17"><input type="text" class="inputStyle" v-model="val"></view>
+			</view>
+			<button class="button" @tap="toConfig">配置</button>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				val: this.$store.getters.baseUrl
+			};
+		},
+		methods: {
+			toConfig () {
+				let obj = {
+					baseUrl: this.val
+				}
+				this.$store.dispatch('setConfig', obj)
+				let url = '/pages/home' + '?url=' + this.val
+				uni.redirectTo({
+					url: url
+				})
+			}
+		}
+	}
+</script>
+
+<style lang="stylus" scoped>
+@import '../common/style/mixin.styl';
+.container
+	display flex
+	flex-direction column
+	justify-content center
+	align-items center
+	width 100%
+	height 100%
+.content
+	display flex
+	flex-direction column
+	justify-content center
+	width 500px
+	height 100%
+.label
+	_font(16px, 40px, #fff,,)
+.inputStyle
+	height 40px
+	_font(16px, 40px, #606266,,)
+	padding 0 15px
+	border none
+	background-color #ffffff
+.button
+	_wh(100%, 40px)
+	_font(18px, 40px, #fff,,center)
+	margin 30px 0 10px 0
+	background-color #2778f3
+	border-radius 3px
+</style>
--- a/pages/screen.vue
+++ b/pages/screen.vue
@@ -0,0 +1,209 @@
+<template>
+	<view class="container">
+		<my-header></my-header>
+		<view class="left_bg"></view>
+		<view class="right_bg"></view>
+		<view class="button_bg"></view>
+		<div class="n_body_container">
+			<div class="n_left_wraper">
+				<div class="w_wraper">
+					<div class="item_wraper">
+						<div class="title_wraper">
+							<p>原料库存</p>
+						</div>
+						<div class="content_wraper content_wraper_2">
+							<div class="pie_wraper">
+								<div id="home_1" style="width: 100%; height: 100%;"></div>
+							</div>
+						</div>
+					</div>
+					<div class="item_wraper">
+						<div class="title_wraper">
+							<p>当日出入</p>
+						</div>
+						<div class="content_wraper">
+							<div class="w_wraper">
+								<div id="home_2" style="width: 100%; height: 100%;"></div>
+							</div>
+						</div>
+					</div>
+					<div class="item_wraper">
+						<div class="title_wraper">
+							<p>历史分析</p>
+						</div>
+						<div class="content_wraper">
+							<div class="w_wraper">
+								<div id="home_3" style="width: 100%; height: 100%;"></div>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="n-center_wraper">
+				<div class="w_wraper">
+					<div class="item_wraper item_wraper_1">
+						<div class="title_wraper title_wraper_1">
+							<p>设备监控</p>
+						</div>
+						<div class="content_wraper content_wraper_3">
+							<div class="agv_wrap">
+								<div class="agv_item" v-for="(e , i) in agvList" :key="'agv' + i">
+									<div class="agv_left">
+										<div class="agv_img"></div>
+										<p class="p1">{{ e.device_name }}</p>
+									</div>
+									<div class="agv_info">
+										<div class="agv_txt">
+											<p class="p2">任务号</p>
+											<p class="p3">{{ e.task_code }}</p>
+										</div>
+										<div class="agv_txt">
+											<p class="p2">电量</p>
+											<p class="p3">{{ e.battery_level }}</p>
+										</div>
+										<div class="agv_txt">
+											<p class="p2">状态</p>
+											<p class="p3">{{ e.status }}</p>
+										</div>
+										<div class="agv_txt">
+											<p class="p2">提示信息</p>
+											<p class="p3">{{ e.message }}</p>
+										</div>
+									</div>
+								</div>
+							</div>
+							<div class="agv_wrap rgv_wrap">
+								<div class="agv_item rgv_item" v-for="(e , i) in rgvList" :key="'rgv' + i">
+								<div class="agv_left rgv_left">
+								<div class="agv_img rgv_img"></div>
+								<p class="p1">{{ e.device_name }}</p>
+								</div>
+			<div class="rgv_info">
+			<div class="agv_txt rgv_txt">
+			<p class="p2">当前位置</p>
+			<p class="p3">{{ e.current_loc }}</p>
+			</div>
+			<div class="agv_txt rgv_txt">
+			<p class="p2">目标位置
+			</p>
+			<p class="p3">{{ e.target_loc }}</p>
+			</div>
+			<div class="agv_txt rgv_txt">
+			<p class="p2">电量</p>
+			<p class="p3">{{ e.battery_level }}</p>
+			</div>
+			<div class="agv_txt rgv_txt">
+			<p class="p2">状态</p>
+			<p class="p3">{{ e.status }}</p>
+			</div>
+			<div class="agv_txt rgv_txt">
+			<p class="p2">提示信息</p>
+			<p class="p3">{{ e.message }}</p>
+			</div>
+			</div>
+			</div>
+			</div>
+			</div>
+			</div>
+			<div class="item_wraper">
+			<div class="title_wraper title_wraper_1">
+			<p>当日搬运任务</p>
+			</div>
+			<div class="content_wraper" style="padding: 0">
+			<div class="scroll_wrap">
+			<ul class="scroll_tab_1">
+			<li>创建时间</li>
+			<li>设备</li>
+			<li>起点位置</li>
+			<li>终点位置</li>
+			<li>任务号</li>
+			<li>任务状态</li>
+			</ul>
+			<div class="scroll_container_1">
+			<vue-seamless-scroll :data="taskList" :class-option="defaultOption1">
+			<ul class="scroll-ul_1">
+			<li v-for="(e, i) in taskList" :key="i">
+			<div class="scroll-ul_1_div">{{e.create_time}}</div>
+			<div class="scroll-ul_1_div">{{e.carno}}</div>
+			<!-- <div class="scroll-ul_1_div">
+			<span class="state" :class="'state_' + e.status"></span>
+			<p class="state_name">{{['关机', '待机', '生产中', '故障'][Number(e.status)]}}</p>
+			</div> -->
+			<div class="scroll-ul_1_div">{{e.start_point_code}}</div>
+			<div class="scroll-ul_1_div">{{e.next_point_code}}</div>
+			<div class="scroll-ul_1_div">{{e.task_code}}</div>
+			<div class="scroll-ul_1_div">{{e.task_status}}</div>
+			</li>
+			</ul>
+			</vue-seamless-scroll>
+			</div>
+			</div>
+			</div>
+			</div>
+			</div>
+			</div>
+			<div class="n_right_wraper">
+			<div class="w_wraper">
+			<div class="item_wraper">
+			<div class="title_wraper">
+			<p>当日生产统计</p>
+			</div>
+			<div class="content_wraper">
+			<div class="w_wraper">
+			<div id="home_4" style="width: 100%; height: 100%;"></div>
+			</div>
+			</div>
+			</div>
+			<div class="item_wraper item_wraper_1">
+			<div class="title_wraper">
+			<p>当日车间上下料</p>
+			</div>
+			<div class="content_wraper">
+			<div class="w_wraper">
+			<div id="home_5" style="width: 100%; height: 100%;"></div>
+			</div>
+			</div>
+			</div>
+			</div>
+			</div>
+			</div>
+	</view>
+</template>
+
+<script>
+	import MyHeader from '@/components/MyHeader.vue'
+	export default {
+		components: {
+			MyHeader
+		},
+		data() {
+			return {
+				
+			};
+		}
+	}
+</script>
+
+<style lang="stylus" scoped>
+.left_bg
+  position absolute
+  left 0
+  top 0
+  width 17px
+  height 100%
+  background center / 100% auto url('../static/image/bg-left.png') no-repeat
+.right_bg
+  position absolute
+  right 0
+  top 0
+  width 17px
+  height 100%
+  background center / 100% auto url('../static/image/bg-right.png') no-repeat
+.button_bg
+  position absolute
+  left 0
+  bottom 0
+  width 100%
+  height 20px
+  background center center / auto 100% url('../static/image/bg-button.png') no-repeat
+</style>
--- a/pages/setup.vue
+++ b/pages/setup.vue
@@ -39,7 +39,7 @@
 				}
 				this.$store.dispatch('setConfig', obj)
 				uni.redirectTo({
-					url: '/pages/home'
+					url: '/pages/screen'
 				})
 			}
 		}
--- a/static/image/bg-button.png
+++ b/static/image/bg-button.png
--- a/static/image/bg-center.png
+++ b/static/image/bg-center.png
--- a/static/image/bg-left.png
+++ b/static/image/bg-left.png
--- a/static/image/bg-right.png
+++ b/static/image/bg-right.png
--- a/vuex/modules/user.js
+++ b/vuex/modules/user.js
@@ -1,9 +1,9 @@
 import * as types from '../types'

-const baseUrl = process.env.NODE_ENV === 'development' ? 'http://192.168.81.162:8011' : 'http://192.168.81.162:8011'
+const baseUrl = process.env.NODE_ENV === 'development' ? 'http://10.44.101.112:8081/#/setup' : 'http://10.44.101.112:8081/#/setup'
 const state = {
 	baseUrl: uni.getStorageSync('baseUrl') || baseUrl,
-	setTime: uni.getStorageSync('setTime') || 5000,
+	setTime: uni.getStorageSync('setTime') || 50000,
 	loginName: uni.getStorageSync('loginName') ? uni.getStorageSync('loginName') : '',
 	userInfo: uni.getStorageSync('userInfo') ? uni.getStorageSync('userInfo') : '',
 	saveToken: uni.getStorageSync('saveToken') || ''