设备分类菜单

common/util/type.js

@@ -0,0 +1,87 @@
+/**
+ * 常用服务
+ * useful server
+ */
+const  icon_prefix="/static/home/128/"
+
+export const us = {
+  data:[
+    {
+      title:"风门",
+      icon:icon_prefix+"richang.png",
+      description:"记录每天的工作经验和心得",
+      useCount:1000,
+	  page:'helloWorld'
+    },{
+      title:"风窗",
+      icon:icon_prefix+"zhoubao.png",
+      description:"总结每周的工作情况和下周计划",
+      useCount:10000,
+	  page:'helloWorld'
+    },{
+      title:"测风设备",
+      icon:icon_prefix+"kaoqin.png",
+      description:"工作考勤",
+      useCount:10000,
+	  page:'helloWorld'
+    },{
+      title:"局部通风机",
+      icon:icon_prefix+"richeng.png",
+      description:"建立和查看个人工作安排",
+      useCount:10000,
+	  page:'helloWorld'
+    },{
+      title:"主通风机",
+      icon:icon_prefix+"qingjia1.png",
+      description:"请假申请",
+      useCount:10000,
+	  page:'helloWorld'
+    }
+  ]
+}
+
+
+/**
+ * other server 其他服务
+ */
+export const os = {
+  data:[
+    {
+      title:"光纤测温",
+      icon:icon_prefix+"xinwen.png",
+      description:"新闻中心",
+      useCount:10000,
+	  page:'helloWorld'
+    },{
+      title:"束管监测",
+      icon:icon_prefix+"toupiao.png",
+      description:"投票中心",
+      useCount:10000,
+	  page:'helloWorld'
+    },{
+      title:"注氮机",
+      icon:icon_prefix+"renwu.png",
+      description:"任务中心",
+      useCount:10000,
+	  page:'helloWorld'
+    },{
+      title:"注浆",
+      icon:icon_prefix+"wendang.png",
+      description:"文档中心",
+      useCount:10000,
+	  page:'helloWorld'
+    },{
+      title:"喷淋",
+      icon:icon_prefix+"hetong.png",
+      description:"合同",
+      useCount:10000,
+	  page:'helloWorld'
+    },{
+      title:"烟雾",
+      icon:icon_prefix+"huiyi.png",
+      description:"会议",
+      useCount:10000,
+	  page:'helloWorld'
+    }
+  ]
+}

pages.json

@@ -169,6 +169,24 @@
 			"path": "pages/warndata/warndata",
 			"style": {}
 		}
+        ,{
+            "path" : "pages/home/devicemenu/devicemenu",
+            "style" :                                                                                    
+            {
+                "navigationBarTitleText": "",
+                "enablePullDownRefresh": false
+            }
+            
+        }
+        ,{
+            "path" : "pages/home/devicemenu/treeMenu/treeMenu",
+            "style" :                                                                                    
+            {
+                "navigationBarTitleText": "",
+                "enablePullDownRefresh": false
+            }
+            
+        }
     ],
 	"globalStyle": {
 		"mp-alipay": {

pages/camera/camera.vue

@@ -0,0 +1,128 @@
+<template name="camera">
+	<view>
+		<scroll-view>
+			<!-- 综合报表 -->
+			<view class="cu-bar bg-white solid-bottom"  :style="[{animation: 'show 0.6s 1'}]">
+				<view class="action">
+					 <text class='cuIcon-title text-yellow'></text>综合报表
+				</view>
+			</view>
+			<!-- 通风设备 -->
+			<view class="cu-bar bg-white solid-bottom margin-top" :style="[{animation: 'show 0.5s 1'}]">
+				<view class="action">
+					<text class='cuIcon-title text-blue'></text>通风设备
+				</view>
+			</view>
+				
+				
+			<!-- 防灭火设备 -->
+			<view class="cu-bar bg-white solid-bottom margin-top"  :style="[{animation: 'show 0.6s 1'}]">
+				<view class="action">
+					 <text class='cuIcon-title text-yellow'></text>防灭火设备
+				</view>
+			</view>
+			<!-- 防尘设备 -->
+			<view class="cu-bar bg-white solid-bottom margin-top"  :style="[{animation: 'show 0.6s 1'}]">
+				<view class="action">
+					 <text class='cuIcon-title text-yellow'></text>防尘设备
+				</view>
+			</view>
+		</scroll-view>
+		<view class="cu-tabbar-height margin-top"></view>
+	</view>
+</template>
+
+<script>
+	import { us,os } from '@/common/util/work.js'
+	import socket from '@/common/js-sdk/socket/socket.js'
+	export default {
+		name: 'camera',
+		props:{
+			cur:String,
+		},
+		watch: {
+			cur: {
+				immediate: true,
+				handler:function(val,oldVal){
+					console.log('cur',val,oldVal)
+				    this.initMenu()
+				},
+			},
+		},
+		data() {
+			return {
+			}
+		},
+		methods: {
+			initMenu(){
+				console.log("-----------home------------")
+			    this.onSocketOpen()
+			    this.onSocketReceive()
+			    this.loadCount(0);
+			},
+			goPage(page){
+				if(!page){
+					return false;
+				}
+				if(page==='annotationList'){
+				  this.msgCount = 0
+				}
+				this.dot[page]=false
+				this.$Router.push({name: page})
+			},
+			// 启动webSocket
+			onSocketOpen() {
+				socket.init('websocket');
+			},
+			onSocketReceive() {
+				var _this=this
+				socket.acceptMessage = function(res){
+					// console.log("页面收到的消息", res);
+					if(res.cmd == "topic"){
+					  //系统通知
+					  _this.loadCount('1')
+					}else if(res.cmd == "user"){
+					  //用户消息
+					  _this.loadCount('2')
+					} else if(res.cmd == 'email'){
+					 //邮件消息
+					  _this.loadEmailCount()
+					}
+				}
+			},
+			loadCount(flag){
+				console.log("loadCount::flag",flag)
+				let url = '/sys/annountCement/listByUser';
+				this.$http.get(url).then(res=>{
+					console.log("res::",res)
+				  if(res.data.success){
+					let msg1Count = res.data.result.anntMsgTotal;
+					let msg2Count = res.data.result.sysMsgTotal;
+					this.msgCount = msg1Count + msg2Count
+					console.log("this.msgCount",this.msgCount)
+				  }
+				})
+			},
+			loadEmailCount(){
+				this.dot.mailHome = true
+			},
+			getTtemDotInfo(item){
+				if(item.page==='annotationList' && this.msgCount>0){
+				  return this.msgCount
+				}
+				return '';
+			}
+		}
+	}
+</script>
+
+<style scoped>
+	.cu-list.grid>.cu-item {
+	  padding: 0px 0px; 
+	}
+    .line2-icon {
+	  width: 60px;
+	  height: 60px;
+    }
+	
+</style>

pages/history/history.vue

@@ -0,0 +1,180 @@
+<template name="history">
+	<view>
+		<scroll-view>
+			<!-- 综合报表 -->
+			<view class="cu-bar bg-white solid-bottom"  :style="[{animation: 'show 0.6s 1'}]">
+				<view class="action">
+					 <text class='cuIcon-title text-yellow'></text>综合报表
+				</view>
+			</view>
+			<view class="cu-list grid col-4 text-sm">
+				<view class="cu-item animation-slide-bottom" :style="[{animationDelay: (index + 1)*0.1 + 's'}]" v-for="(item,index) in osList" :key="index" @tap="goPage(item.page)">
+					<view class="padding text-center">
+						<image :src="item.icon" style="width:28px;height:28px;"/>
+						<view class="margin-top-xs">{{item.title}}</view>
+					</view>
+				</view>
+			</view>		
+			<!-- 通风设备 -->
+			<view class="cu-bar bg-white solid-bottom margin-top" :style="[{animation: 'show 0.5s 1'}]">
+				<view class="action">
+					<text class='cuIcon-title text-blue'></text>通风设备
+				</view>
+			</view>
+				
+			<view class="cu-list grid col-4 text-sm">
+				<view class="cu-item animation-slide-bottom" :style="[{animationDelay: (index + 1)*0.05 + 's'}]" v-for="(item,index) in usList" :key="index" @tap="goPage(item.page)">
+					<view class="padding text-center">
+						<image :src="item.icon" style="width:28px;height:28px;">
+							<view class="cu-tag badge margin-top-sm" style="margin-left:1.2em" v-if="getTtemDotInfo(item)">
+							   <block v-if="getTtemDotInfo(item)">{{getTtemDotInfo(item)}}</block>
+							</view>
+						</image>
+						<view class="margin-top-xs">{{item.title}}</view>
+					</view>
+				</view>
+			</view>
+				
+			<!-- 防灭火设备 -->
+			<view class="cu-bar bg-white solid-bottom margin-top"  :style="[{animation: 'show 0.6s 1'}]">
+				<view class="action">
+					 <text class='cuIcon-title text-yellow'></text>防灭火设备
+				</view>
+			</view>
+			<view class="cu-list grid col-4 text-sm">
+				<view class="cu-item animation-slide-bottom" :style="[{animationDelay: (index + 1)*0.1 + 's'}]" v-for="(item,index) in osList" :key="index" @tap="goPage(item.page)">
+					<view class="padding text-center">
+						<image :src="item.icon" style="width:28px;height:28px;"/>
+						<view class="margin-top-xs">{{item.title}}</view>
+					</view>
+				</view>
+			</view>				
+			<!-- 防尘设备 -->
+			<view class="cu-bar bg-white solid-bottom margin-top"  :style="[{animation: 'show 0.6s 1'}]">
+				<view class="action">
+					 <text class='cuIcon-title text-yellow'></text>防尘设备
+				</view>
+			</view>
+			<view class="cu-list grid col-4 text-sm">
+				<view class="cu-item animation-slide-bottom" :style="[{animationDelay: (index + 1)*0.1 + 's'}]" v-for="(item,index) in osList" :key="index" @tap="goPage(item.page)">
+					<view class="padding text-center">
+						<image :src="item.icon" style="width:28px;height:28px;"/>
+						<view class="margin-top-xs">{{item.title}}</view>
+					</view>
+				</view>
+			</view>
+		</scroll-view>
+		<view class="cu-tabbar-height margin-top"></view>
+	</view>
+</template>
+
+<script>
+	import { us,os } from '@/common/util/work.js'
+	import socket from '@/common/js-sdk/socket/socket.js'
+	export default {
+		name: 'home',
+		props:{
+			cur:String,
+		},
+		watch: {
+			cur: {
+				immediate: true,
+				handler:function(val,oldVal){
+					console.log('cur',val,oldVal)
+				    this.initMenu()
+				},
+			},
+		},
+		data() {
+			return {
+			 swiperList: [
+				  {id:1,type: 'image',url: '/static/banner/banner1.png', link: ''},
+				  {id:2,type: 'image',url: '/static/banner/banner2.jpg', link: ''},
+				  {id:3,type: 'image',url: '/static/banner/banner3.jpg', link: ''},
+				  {id:4,type: 'image',url: '/static/banner/banner4.jpg', link: ''},
+				],
+				middleApps: [
+				  {icon: 'line2_icon1.png', title: '审批', 'text': '个人审批'},
+				  {icon: 'line2_icon2.png', title: '审批稿', 'text': '审批草稿箱'},
+				],
+				usList:us.data,
+				osList:os.data,
+				msgCount:0,
+				dot:{
+				  mailHome:false
+				}
+			}
+		},
+		methods: {
+			initMenu(){
+				console.log("-----------home------------")
+			    this.onSocketOpen()
+			    this.onSocketReceive()
+			    this.loadCount(0);
+			},
+			goPage(page){
+				if(!page){
+					return false;
+				}
+				if(page==='annotationList'){
+				  this.msgCount = 0
+				}
+				this.dot[page]=false
+				this.$Router.push({name: page})
+			},
+			// 启动webSocket
+			onSocketOpen() {
+				socket.init('websocket');
+			},
+			onSocketReceive() {
+				var _this=this
+				socket.acceptMessage = function(res){
+					// console.log("页面收到的消息", res);
+					if(res.cmd == "topic"){
+					  //系统通知
+					  _this.loadCount('1')
+					}else if(res.cmd == "user"){
+					  //用户消息
+					  _this.loadCount('2')
+					} else if(res.cmd == 'email'){
+					 //邮件消息
+					  _this.loadEmailCount()
+					}
+				}
+			},
+			loadCount(flag){
+				console.log("loadCount::flag",flag)
+				let url = '/sys/annountCement/listByUser';
+				this.$http.get(url).then(res=>{
+					console.log("res::",res)
+				  if(res.data.success){
+					let msg1Count = res.data.result.anntMsgTotal;
+					let msg2Count = res.data.result.sysMsgTotal;
+					this.msgCount = msg1Count + msg2Count
+					console.log("this.msgCount",this.msgCount)
+				  }
+				})
+			},
+			loadEmailCount(){
+				this.dot.mailHome = true
+			},
+			getTtemDotInfo(item){
+				if(item.page==='annotationList' && this.msgCount>0){
+				  return this.msgCount
+				}
+				return '';
+			}
+		}
+	}
+</script>
+
+<style scoped>
+	.cu-list.grid>.cu-item {
+	  padding: 0px 0px; 
+	}
+    .line2-icon {
+	  width: 60px;
+	  height: 60px;
+    }
+	
+</style>

pages/home/devicemenu/devicemenu.vue

@@ -0,0 +1,113 @@
+<template>
+	<view class="bg">
+        <tree-menu @menuClick="menuClick" v-for="item in treeData" :key="item.id" :item="item"></tree-menu>
+	</view>
+</template>
+ 
+<script>
+import TreeMenu from './treeMenu/typeMenu.vue'
+export default {
+	name: 'Study',
+	components: {
+		TreeMenu
+	},
+	data() {
+		return {
+			treeData: [
+				{
+					id: 1,
+					name: '通风',
+					children: [
+						{
+							id: 1001,
+							name: '风门',
+							children: []
+						},
+						{
+							id: 1002,
+							name: '风窗',
+							children: []
+						},
+						{
+							id: 1003,
+							name: '测风设备',
+							children: []
+						},
+						{
+							id: 1004,
+							name: '局部通风机',
+							children: []
+						},
+						{
+							id: 1005,
+							name: '主通风机',
+							children: []
+						},
+						{
+							id: 1006,
+							name: '压风机',
+							children: []
+						}
+					]
+				},
+				{
+					id: 2,
+					name: '防灭火',
+					children: []
+				},
+				{
+					id: 3,
+					name: '防尘',
+					children: []
+				},
+				{
+					id: 4,
+					name: '瓦斯',
+					children: []
+				},
+				{
+					id: 5,
+					name: '综合场景',
+					children: [
+						{
+							id: 5001,
+							name: '安全监控',
+							children: []
+						},
+						{
+							id: 5002,
+							name: '工作面',
+							children: []
+						},
+						{
+							id: 5003,
+							name: '关键通风路线',
+							children: []
+						},
+						{
+							id: 5004,
+							name: '硐室',
+							children: []
+						}]
+				}
+			],
+		}
+	},
+	created() {
+		
+	},
+	methods:{
+	
+		menuClick(id){
+			this.$emit("menuClick",id)
+		}
+	}
+}
+</script>
+<style>
+	.bg{
+		width: 100%;
+		height: 100%;
+		background-color: #ffffff;
+	}
+</style>

pages/home/devicemenu/treeMenu/treeMenu.vue

@@ -0,0 +1,42 @@
+ 
+<template>
+ 
+	<view>
+		<view  @click="toggleNodes(item)" style="display: flex;align-items: center;justify-content: start;">
+			<!-- <u-icon name="arrow-left" v-if="!expanded"></u-icon>
+			<u-icon name="arrow-down" v-else></u-icon> -->
+			<image style="width:80rpx;height:80rpx;float:left"  mode="">
+			</image>
+			{{ item.name }}
+		</view>
+		<view  @click="clickNodes(item)" :class="expanded == true ? 'expandedStyle' : ''" v-if="item.children && item.children.length && expanded">
+			<tree-menu  @click="clickNodes(child)" v-for="child in item.children" :key="child.id" :item="child"></tree-menu>
+		</view>
+	</view>
+</template>
+  
+<script>
+export default {
+	name: 'TreeMenu',
+	props: ['item'],
+	data() {
+		return {
+			expanded: true,
+		};
+	},
+	methods: {
+		toggleNodes(item) {
+			this.expanded = !this.expanded;
+		},
+		clickNodes(item) {
+			this.$emit("menuClick",item.id)
+		},
+	}
+}
+</script>
+ 
+<style lang="scss" scoped>
+.expandedStyle {
+	margin-left: 20px;
+}
+</style>

pages/home/devicemenu/treeMenu/typeMenu.vue

@@ -0,0 +1,144 @@
+<template name="history">
+	<view>
+		<scroll-view>
+			<!-- 通风设备 -->
+			<view class="cu-bar bg-white solid-bottom margin-top" :style="[{animation: 'show 0.5s 1'}]">
+				<view class="action">
+					<text class='cuIcon-title text-blue'></text>通风设备
+				</view>
+			</view>
+				
+			<view class="cu-list grid col-4 text-sm">
+				<view class="cu-item animation-slide-bottom" :style="[{animationDelay: (index + 1)*0.05 + 's'}]" v-for="(item,index) in usList" :key="index" @tap="goPage(item.page)">
+					<view class="padding text-center">
+						<image :src="item.icon" style="width:28px;height:28px;">
+							<view class="cu-tag badge margin-top-sm" style="margin-left:1.2em" v-if="getTtemDotInfo(item)">
+							   <block v-if="getTtemDotInfo(item)">{{getTtemDotInfo(item)}}</block>
+							</view>
+						</image>
+						<view class="margin-top-xs">{{item.title}}</view>
+					</view>
+				</view>
+			</view>
+				
+			<!-- 防灭火设备 -->
+			<view class="cu-bar bg-white solid-bottom margin-top"  :style="[{animation: 'show 0.6s 1'}]">
+				<view class="action">
+					 <text class='cuIcon-title text-yellow'></text>防灭火设备
+				</view>
+			</view>
+			<view class="cu-list grid col-4 text-sm">
+				<view class="cu-item animation-slide-bottom" :style="[{animationDelay: (index + 1)*0.1 + 's'}]" v-for="(item,index) in osList" :key="index" @tap="goPage(item.page)">
+					<view class="padding text-center">
+						<image :src="item.icon" style="width:28px;height:28px;"/>
+						<view class="margin-top-xs">{{item.title}}</view>
+					</view>
+				</view>
+			</view>				
+			<!-- 防尘设备 -->
+			<view class="cu-bar bg-white solid-bottom margin-top"  :style="[{animation: 'show 0.6s 1'}]">
+				<view class="action">
+					 <text class='cuIcon-title text-yellow'></text>防尘设备
+				</view>
+			</view>
+			<view class="cu-list grid col-4 text-sm">
+				<view class="cu-item animation-slide-bottom" :style="[{animationDelay: (index + 1)*0.1 + 's'}]" v-for="(item,index) in osList" :key="index" @tap="goPage(item.page)">
+					<view class="padding text-center">
+						<image :src="item.icon" style="width:28px;height:28px;"/>
+						<view class="margin-top-xs">{{item.title}}</view>
+					</view>
+				</view>
+			</view>
+		</scroll-view>
+		<view class="cu-tabbar-height margin-top"></view>
+	</view>
+</template>
+
+<script>
+	import { us,os } from '@/common/util/type.js'
+	import socket from '@/common/js-sdk/socket/socket.js'
+	export default {
+		name: 'home',
+		props:{
+			cur:String,
+		},
+		watch: {
+			cur: {
+				immediate: true,
+				handler:function(val,oldVal){
+					// console.log('cur',val,oldVal)
+				    // this.initMenu()
+				},
+			},
+		},
+		data() {
+			return {
+			 swiperList: [
+				  {id:1,type: 'image',url: '/static/banner/banner1.png', link: ''},
+				  {id:2,type: 'image',url: '/static/banner/banner2.jpg', link: ''},
+				  {id:3,type: 'image',url: '/static/banner/banner3.jpg', link: ''},
+				  {id:4,type: 'image',url: '/static/banner/banner4.jpg', link: ''},
+				],
+				middleApps: [
+				  {icon: 'line2_icon1.png', title: '审批', 'text': '个人审批'},
+				  {icon: 'line2_icon2.png', title: '审批稿', 'text': '审批草稿箱'},
+				],
+				usList:us.data,
+				osList:os.data,
+				msgCount:0,
+				dot:{
+				  mailHome:false
+				}
+			}
+		},
+		methods: {
+			initMenu(){
+				console.log("-----------home------------")
+			    // this.onSocketOpen()
+			    // this.onSocketReceive()
+			    // this.loadCount(0);
+			},
+			goPage(page){
+				// if(!page){
+				// 	return false;
+				// }
+				// if(page==='annotationList'){
+				//   this.msgCount = 0
+				// }
+				// this.dot[page]=false
+				// this.$Router.push({name: page})
+			   this.$emit("menuClick",1)
+			},
+			loadCount(flag){
+				console.log("loadCount::flag",flag)
+				let url = '/sys/annountCement/listByUser';
+				this.$http.get(url).then(res=>{
+					console.log("res::",res)
+				  if(res.data.success){
+					let msg1Count = res.data.result.anntMsgTotal;
+					let msg2Count = res.data.result.sysMsgTotal;
+					this.msgCount = msg1Count + msg2Count
+					console.log("this.msgCount",this.msgCount)
+				  }
+				})
+			},
+			getTtemDotInfo(item){
+				if(item.page==='annotationList' && this.msgCount>0){
+				  return this.msgCount
+				}
+				return '';
+			}
+		}
+	}
+</script>
+
+<style scoped>
+	.cu-list.grid>.cu-item {
+	  padding: 0px 0px; 
+	}
+    .line2-icon {
+	  width: 60px;
+	  height: 60px;
+    }
+	
+</style>

pages/home/firstmodel.vue

@@ -1,7 +1,13 @@
 <template>
 	<view>
-		<cu-custom><block slot="content">导航栏</block></cu-custom>
-		<view  scroll-x class="top-nav">
+		<view v-if="menushow" class="menupage">
+		     <DeviceMenu @menuClick="menuClick"></DeviceMenu>
+		</view>
+		<view v-if="!menushow" class="cu-form-group menubtn" @click="devicemenuShow">
+		     ≡
+		</view>
+		<cu-custom><block slot="content">设备监控</block></cu-custom>
+		<view v-show="!menushow"  scroll-x class="top-nav">
 			<view class="flex text-center">
 				<view class="cu-item flex-sub" :current= 'currentTab'  v-for="(item,index) in 4" :key="index" @tap="tabSelect" :data-id="index">
 					Tab{{index}}
@@ -13,7 +19,7 @@
 				</view>
 			</view>
 		</view>
-		<view class="main">
+		<view v-show="!menushow" class="main">
 			<view class="card" v-for="(item,index) in 4" :key="index">
 				<H1>Tab{{index}}</H1>
 			</view>
@@ -22,9 +28,11 @@
 </template>
 
 <script>
+	import DeviceMenu from './devicemenu/devicemenu.vue'
 	export default {
 		data() {
 			return {
+				menushow:false,
 				TabCur: 0,
 				scrollLeft: 0,
 				currentTab:0,
@@ -36,10 +44,19 @@
 				]
 			};
 		},
+		components: {
+		    DeviceMenu,
+		},
 		methods: {
 			tabSelect(e) {
 				this.currentTab = e.currentTarget.dataset.id;
 				this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
+			},
+			devicemenuShow(e){
+				this.menushow = true;
+			},
+			menuClick(id){
+				this.menushow = false;
 			}
 		}
 	}
@@ -69,4 +86,23 @@
 		border:1rpx solid #000000;
 		border-radius: 20rpx;
 	}
+	.menupage{
+		position: absolute;
+		z-index: 2;
+		top:40rpx;
+		overflow-y: scroll;
+		height: calc(100% - 40rpx);
+		width: 100%;
+	}
+	.menubtn{
+		position: absolute;
+		z-index: 2;
+		top:5rpx;
+		left:5rpx;
+		padding-left: 10rpx;
+		background-color: #007BFF;
+		border-radius: 10rpx;
+		height: 40rpx;
+		width: 40rpx;
+	}
 </style>

pages/test1/firstmodel.vue

@@ -1,6 +1,6 @@
 <template>
 	<view>
-		<cu-custom><block slot="content">导航栏</block></cu-custom>
+		<cu-custom><block slot="content">设备监控</block></cu-custom>
 		<view  scroll-x class="bg-white nav">
 			<view class="flex text-center">
 				<view class="cu-item flex-sub" :class="index==TabCur?'text-orange cur':''" v-for="(item,index) in 4" :key="index" @tap="tabSelect" :data-id="index">

pages/warndata/warndata.vue

@@ -0,0 +1,161 @@
+<template name="warndata">
+	<view>
+		<scroll-view>
+			<!-- 轮播 -->
+			<swiper class="screen-swiper square-dot"  :indicator-dots="true" :circular="true"
+			 :autoplay="true" interval="5000" duration="500" :style="[{animation: 'show 0.2s 1'}]">
+				<swiper-item v-for="(item,index) in swiperList" :key="index">
+					<image :src="item.url" mode="aspectFill" v-if="item.type=='image'"></image>
+					<video :src="item.url" autoplay loop muted :show-play-btn="false" :controls="false" objectFit="cover" v-if="item.type=='video'"></video>
+				</swiper-item>
+			</swiper>
+			
+			<!-- 常用服务 -->
+			<view class="cu-bar bg-white solid-bottom" :style="[{animation: 'show 0.5s 1'}]">
+				<view class="action">
+					<text class='cuIcon-title text-blue'></text>常用服务
+				</view>
+			</view>
+				
+			<view class="cu-list grid col-4 text-sm">
+				<view class="cu-item animation-slide-bottom" :style="[{animationDelay: (index + 1)*0.05 + 's'}]" v-for="(item,index) in usList" :key="index" @tap="goPage(item.page)">
+					<view class="padding text-center">
+						<image :src="item.icon" style="width:28px;height:28px;">
+							<view class="cu-tag badge margin-top-sm" style="margin-left:1.2em" v-if="getTtemDotInfo(item)">
+							   <block v-if="getTtemDotInfo(item)">{{getTtemDotInfo(item)}}</block>
+							</view>
+						</image>
+						<view class="margin-top-xs">{{item.title}}</view>
+					</view>
+				</view>
+			</view>
+				
+			<!-- 其他服务 -->
+			<view class="cu-bar bg-white solid-bottom margin-top"  :style="[{animation: 'show 0.6s 1'}]">
+				<view class="action">
+					 <text class='cuIcon-title text-yellow'></text>其他服务
+				</view>
+			</view>
+			<view class="cu-list grid col-4 text-sm">
+				<view class="cu-item animation-slide-bottom" :style="[{animationDelay: (index + 1)*0.1 + 's'}]" v-for="(item,index) in osList" :key="index" @tap="goPage(item.page)">
+					<view class="padding text-center">
+						<image :src="item.icon" style="width:28px;height:28px;"/>
+						<view class="margin-top-xs">{{item.title}}</view>
+					</view>
+				</view>
+			</view>
+		</scroll-view>
+		<view class="cu-tabbar-height margin-top"></view>
+	</view>
+</template>
+
+<script>
+	import { us,os } from '@/common/util/work.js'
+	import socket from '@/common/js-sdk/socket/socket.js'
+	export default {
+		name: 'home',
+		props:{
+			cur:String,
+		},
+		watch: {
+			cur: {
+				immediate: true,
+				handler:function(val,oldVal){
+					console.log('cur',val,oldVal)
+				    this.initMenu()
+				},
+			},
+		},
+		data() {
+			return {
+			 swiperList: [
+				  {id:1,type: 'image',url: '/static/banner/banner1.png', link: ''},
+				  {id:2,type: 'image',url: '/static/banner/banner2.jpg', link: ''},
+				  {id:3,type: 'image',url: '/static/banner/banner3.jpg', link: ''},
+				  {id:4,type: 'image',url: '/static/banner/banner4.jpg', link: ''},
+				],
+				middleApps: [
+				  {icon: 'line2_icon1.png', title: '审批', 'text': '个人审批'},
+				  {icon: 'line2_icon2.png', title: '审批稿', 'text': '审批草稿箱'},
+				],
+				usList:us.data,
+				osList:os.data,
+				msgCount:0,
+				dot:{
+				  mailHome:false
+				}
+			}
+		},
+		methods: {
+			initMenu(){
+				console.log("-----------home------------")
+			    this.onSocketOpen()
+			    this.onSocketReceive()
+			    this.loadCount(0);
+			},
+			goPage(page){
+				if(!page){
+					return false;
+				}
+				if(page==='annotationList'){
+				  this.msgCount = 0
+				}
+				this.dot[page]=false
+				this.$Router.push({name: page})
+			},
+			// 启动webSocket
+			onSocketOpen() {
+				socket.init('websocket');
+			},
+			onSocketReceive() {
+				var _this=this
+				socket.acceptMessage = function(res){
+					// console.log("页面收到的消息", res);
+					if(res.cmd == "topic"){
+					  //系统通知
+					  _this.loadCount('1')
+					}else if(res.cmd == "user"){
+					  //用户消息
+					  _this.loadCount('2')
+					} else if(res.cmd == 'email'){
+					 //邮件消息
+					  _this.loadEmailCount()
+					}
+				}
+			},
+			loadCount(flag){
+				console.log("loadCount::flag",flag)
+				let url = '/sys/annountCement/listByUser';
+				this.$http.get(url).then(res=>{
+					console.log("res::",res)
+				  if(res.data.success){
+					let msg1Count = res.data.result.anntMsgTotal;
+					let msg2Count = res.data.result.sysMsgTotal;
+					this.msgCount = msg1Count + msg2Count
+					console.log("this.msgCount",this.msgCount)
+				  }
+				})
+			},
+			loadEmailCount(){
+				this.dot.mailHome = true
+			},
+			getTtemDotInfo(item){
+				if(item.page==='annotationList' && this.msgCount>0){
+				  return this.msgCount
+				}
+				return '';
+			}
+		}
+	}
+</script>
+
+<style scoped>
+	.cu-list.grid>.cu-item {
+	  padding: 0px 0px; 
+	}
+    .line2-icon {
+	  width: 60px;
+	  height: 60px;
+    }
+	
+</style>