[Feat 0000] 列表页 详情页 侧边栏样式修改 接口对接

.hbuilderx/launch.json

@@ -0,0 +1,9 @@
+{
+    "version" : "1.0",
+    "configurations" : [
+        {
+            "playground" : "standard",
+            "type" : "uni-app:app-android"
+        }
+    ]
+}

api/api.js

@@ -33,6 +33,12 @@ const apiService = {
 	getDeviceMonitor(params){
 		return http.post('/monitor/device',params);
 	},
+	//查询分页列表信息 通过分类查询 各类设备在app上是否展示的字段
+	getShowColumList(params){
+		const urlParams = new URLSearchParams(params);
+		const url = '/safety/ventanalyShowColum/list?' + urlParams.toString();
+		return http.get(url);
+	},
 	
 	/**
 	 * 获取文件访问路径

pages/history/history.vue

@@ -1,180 +1,81 @@
 <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>
+	 <view class="container">
+		 <u-navbar
+		   title="历史数据"
+		   @leftClick="devicemenuShow"
+		   :safeAreaInsetTop="false"
+		   
+		 >
+		   <view class="u-nav-slot" slot="left">
+		     <u-icon name="list" size="20"> </u-icon>
+		   </view>
+		 </u-navbar>
+		 
+		<!-- <view v-show="menushow" class="menupage">
+		   <DeviceMenu @menuClick="menuClick"></DeviceMenu>
+		 </view> -->
+		 <view class="menupage">
+		   <u-picker mode="time" v-model="show" :params="params"></u-picker>
+		 </view>
+	 </view>
 </template>
 
 <script>
-	import { us,os } from '@/common/util/work.js'
-	import socket from '@/common/js-sdk/socket/socket.js'
+import DeviceMenu from "../home/devicemenu/devicemenu.vue";
+import api from "@/api/api";
 	export default {
-		name: 'home',
-		props:{
-			cur:String,
+		name: 'history',
+		components: {
+		  DeviceMenu,
 		},
 		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
-				}
+				menushow: false,
+				currentRoute:'',
+				TabCur: "gate",
+				params: {
+					year: true,
+					month: true,
+					day: true,
+					hour: false,
+					minute: false,
+					second: false
+				},
+				show: true
 			}
 		},
+		created() {
+			// 获取当前页面的路由路径
+			    const currentRoute = this.$route.path;
+			    
+			    // 检查路由路径是否包含 "home"
+			    if (currentRoute.includes('history')) {
+			      console.log('当前页面包含 "home"');
+			    } else {
+			      console.log('当前页面不包含 "home"');
+			    }
+		},
 		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})
+			devicemenuShow(e) {
+			  this.menushow = true;
 			},
-			// 启动webSocket
-			onSocketOpen() {
-				socket.init('websocket');
+			menuClick(id) {
+			  this.TabCur = id;
+			  // 选择设备分类，重新获取数据
+			  this.menushow = false;
 			},
-			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; 
+	.menupage {
+	  position: absolute;
+	  z-index: 2;
+	  top: 40rpx;
+	  height: calc(100% - 40rpx);
+	  width: 100%;
 	}
-    .line2-icon {
-	  width: 60px;
-	  height: 60px;
-    }
-	
 </style>

pages/home/detail/autodoor/autodoor.vue

@@ -1,138 +1,521 @@
 <template>
-	<view class="container">
-			<!-- 建议放在外层 -->
-		<u-navbar :title="name"  @leftClick="backPage" :bgImage="backPic" >
-			<view class="u-nav-slot" slot="left">
-				<u-icon name="arrow-left" size="20" >
-				</u-icon>
-			</view>
-		</u-navbar>
-		<view class="main">
-			<view class="u-page" >
-			  <div class="button-grid flcard">
-			    <u-button type="primary" shape="circle" text="打开前门"></u-button>
-			    <u-button type="primary" shape="circle" text="关闭前门"></u-button>
-			    <u-button type="primary" shape="circle" text="打开后门"></u-button>
-			    <u-button type="primary" shape="circle" text="关闭后门"></u-button>
-			    <u-button type="primary" shape="circle" text="打开前后门"></u-button>
-			    <u-button type="primary" shape="circle" text="关闭前后门"></u-button>
-				 <div class="additional-div">
-				   <span>控制模式：</span>
-				   <u-checkbox-group
-				       v-model="checked"
-				       iconPlacement="left" 
-				       placement="row"
-					   >
-				   	<u-checkbox type="primary" shape="circle" label="就地" style="margin-right: 20rpx;"></u-checkbox>
-				   	<u-checkbox type="primary" shape="circle" label="远程"></u-checkbox>
-				   </u-checkbox-group>
-				  </div>
-				    
-			  </div>
-			  <div class="flcard">
-				  测试 两扇风门
-			  </div>
-			  <div class="flcard">
-				  
-			  </div>
-		   </view>
-		</view>
-	</view>
+  <view class="container">
+    <!-- 建议放在外层 -->
+    <u-navbar :title="name" @leftClick="backPage" :bgImage="backPic">
+      <view class="u-nav-slot" slot="left">
+        <u-icon name="arrow-left" size="20"> </u-icon>
+      </view>
+    </u-navbar>
+    <view class="main">
+      <view class="u-page container">
+        <div class="button-grid flcard" v-if="this.TabCur == 'gate'">
+          <u-button type="primary" shape="circle" text="打开前门"></u-button>
+          <u-button type="primary" shape="circle" text="关闭前门"></u-button>
+          <u-button type="primary" shape="circle" text="打开后门"></u-button>
+          <u-button type="primary" shape="circle" text="关闭后门"></u-button>
+          <u-button type="primary" shape="circle" text="打开前后门"></u-button>
+          <u-button type="primary" shape="circle" text="关闭前后门"></u-button>
+          <!-- <div class="additional-div">
+            <span>控制模式：</span>
+            <u-checkbox-group
+              v-model="checked"
+              iconPlacement="left"
+              placement="row"
+            >
+              <u-checkbox
+                type="primary"
+                shape="circle"
+                label="就地"
+                style="margin-right: 20rpx"
+              ></u-checkbox>
+              <u-checkbox
+                type="primary"
+                shape="circle"
+                label="远程"
+              ></u-checkbox>
+            </u-checkbox-group>
+          </div> -->
+        </div>
+        <div class="button-grid flcard" v-if="this.TabCur == 'window'">
+          <u-button type="primary" shape="circle" text="设定面积"></u-button>
+        </div>
+        <div class="flcard door-container" v-if="this.TabCur == 'gate'">
+          <div class="door">
+            <div class="left_door" id="leftdoor"></div>
+            <div class="right_door" id="rightdoor"></div>
+            <div
+              style="
+                position: absolute;
+                top: 30%;
+                left: 25%;
+                transform: translate(-50%);
+                z-index: 5;
+                font-weight: 900px;
+                color: #00ff00;
+              "
+            >
+              <span style="font-size: 30px">前门</span>
+            </div>
+          </div>
+          <div class="door">
+            <div class="left_door" id="leftdoor1"></div>
+            <div class="right_door" id="rightdoor2"></div>
+            <div
+              style="
+                position: absolute;
+                top: 30%;
+                right: 13%;
+                transform: translate(-50%);
+                z-index: 5;
+                font-weight: 900px;
+                color: #00ff00;
+              "
+            >
+              <span style="font-size: 30px">后门</span>
+            </div>
+          </div>
+        </div>
+        <div class="flcard door-container" v-if="this.TabCur == 'window'">
+          <div class="autowindow_new">
+            <div
+              class="window_new_1"
+              id="subwindowpic11"
+              :style="`transform: rotateX(${frontAngle}deg)`"
+            ></div>
+            <div
+              class="window_new_2"
+              id="subwindowpic12"
+              :style="`transform: rotateX(${frontAngle}deg)`"
+            ></div>
+            <div
+              class="window_new_3"
+              id="subwindowpic13"
+              :style="`transform: rotateX(${frontAngle}deg)`"
+            ></div>
+            <div
+              class="window_new_4"
+              id="subwindowpic14"
+              :style="`transform: rotateX(${frontAngle}deg)`"
+            ></div>
+            <div
+              class="window_new_5"
+              id="subwindowpic15"
+              :style="`transform: rotateX(${frontAngle}deg)`"
+            ></div>
+          </div>
+          <div
+            style="
+              position: absolute;
+              top: 34%;
+              left: 25%;
+              transform: translate(-50%);
+              z-index: 5;
+              color: #6a7a9b;
+            "
+          >
+            <span style="font-size: 15px; font-weight: 50px">风窗动画</span>
+          </div>
+        </div>
+        <div class="flcard">
+          <div class="flex-container">
+            <div
+              class="itemback"
+              v-for="(item, index) in typeList"
+              :key="index"
+              v-show="item.appShow == 1"
+            >
+              <div class="datacardtime" v-if="item.monitorcode == 'readTime'">
+                <view
+                  class="demo-layout bg-purple-light"
+                  style="margin-top: 10rpx; color: #3787fe"
+                >
+                  {{ tableData[item.monitorcode] }}
+                </view>
+              </div>
+              <div class="datacard" v-if="item.monitorcode !== 'readTime'">
+                <div class="left-content">
+                  <view
+                    class="demo-layout bg-purple-light"
+                    style="margin-top: 10rpx; color: #3787fe"
+                  >
+                    {{ tableData[item.monitorcode] }}
+                  </view>
+                  <div class="spacer"></div>
+                  <!-- 间距 -->
+                  <view
+                    class="demo-layout bg-purple-light"
+                    style="color: #677799"
+                  >
+                    {{ item.des }}
+                  </view>
+                </div>
+                <div
+                  class="right-content"
+                  :style="{
+                    backgroundImage:
+                      item.monitorcode === 'frontRearDP' ||
+                      item.monitorcode === 'frontRearDifference'
+                        ? 'url(\'../../../../static/model/Pa.png\')'
+                        : item.monitorcode === 'sourcePressure'
+                        ? 'url(\'../../../../static/model/MPa.png\')'
+                        : item.monitorcode === 'frontGateOpen'
+                        ? 'url(\'../../../../static/model/doorNet.png\')'
+                        : item.monitorcode === 'rearGateOpen'
+                        ? 'url(\'../../../../static/model/doorNet.png\')'
+                        : item.monitorcode === 'warnFlag'
+                        ? 'url(\'../../../../static/model/9432.png\')'
+                        : item.monitorcode === 'netStatus'
+                        ? 'url(\'../../../../static/model/9431.png\')'
+                        : item.monitorcode === 'm3'
+                        ? 'url(\'../../../../static/model/windM3.png\')'
+                        : item.monitorcode === 'fsectarea'
+                        ? 'url(\'../../../../static/model/duanArea.png\')'
+						:item.monitorcode === 'incipientWindSpeed1' || item.monitorcode === 'incipientWindSpeed2' || item.monitorcode === 'incipientWindSpeed3'|| item.monitorcode === 'va'
+						? 'url(\'../../../../static/model/fengsu.png\')'
+                        : 'url(\'\')',
+                    backgroundSize: '100% 100%',
+                  }"
+                ></div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </view>
+    </view>
+  </view>
 </template>
 
 <script>
-	import api from "@/api/api";
-	export default {
-		data() {
-			return {
-				tableData:[],
-				itemId: '' ,// 初始化 itemId
-				name: '' ,// 初始化 name
-				TabCur: "gate",
-				checked: [],
-				backPic:"url(../../../../static/topnavbar.png)",
-			};
-		},
-		onLoad(query) {
-			 // query 中包含传递过来的id
-			const id = query.id;
-			const name = query.name;
-			//保存id到 data 中 可以在整个页面中使用
-			 this.itemId = id;
-			 this.name = name;
-		},
-		components: {
-		},
-		watch:{
-		},
-		created() {
-			this.getDeviceInfo(this.itemId);
-		},
-		methods: {
-			getDeviceInfo(ID){
-				  let IDString = String(ID); // 将 ID 转换为字符串
-				  new Promise((resolve, reject) => {
-				   api.getDeviceMonitor({devicetype: this.TabCur, ids:IDString}).then(response => {
-				      if(response.data.code ==200){ 
-						   this.tableData = response.data.result.msgTxt[0].datalist
-				      }else{
-				        resolve(response)
-				      }
-				    }).catch(error => {
-						console.log("catch===>response",response)
-				      reject(error)
-				    })
-				  })
-			},
-			backPage(){
-				uni.navigateBack({
-					delta:1
-				})
-			}
-		},
-		
-	}
+import api from "@/api/api";
+export default {
+  data() {
+    return {
+      tableData: [], //监测数据
+      typeList: [], //展示字段
+      itemId: "", // 初始化 itemId
+      name: "", // 初始化 name
+      TabCur: "",
+      checked: [],
+      backPic: "url(../../../../static/topnavbar.png)",
+      frontAngle: "", //风窗打开角度
+    };
+  },
+  onLoad(query) {
+    // query 中包含传递过来的id
+    const id = query.id;
+    const name = query.name;
+    const type = query.type;
+    //保存id到 data 中 可以在整个页面中使用
+    this.itemId = id;
+    this.name = name;
+    this.TabCur = type;
+    this.getShowList();
+  },
+  components: {},
+  watch: {},
+  created() {
+    this.getDeviceInfo(this.itemId);
+  },
+  methods: {
+    getShowList() {
+      const params = {
+        devicekind: this.TabCur,
+        pagetype: "detail",
+        pageNo: 1,
+        pageSize: 100,
+      };
+      new Promise((resolve, reject) => {
+        api
+          .getShowColumList(params)
+          .then((response) => {
+            if (response.data.code == 200) {
+              this.typeList = response.data.result.records;
+              console.log(this.typeList, "返回内容");
+            } else {
+              resolve(response);
+            }
+          })
+          .catch((error) => {
+            console.log("catch===>response", response);
+            reject(error);
+          });
+      });
+    },
+    getDeviceInfo(ID) {
+      let IDString = String(ID); // 将 ID 转换为字符串
+      new Promise((resolve, reject) => {
+        api
+          .getDeviceMonitor({ devicetype: this.TabCur, ids: IDString })
+          .then((response) => {
+            if (response.data.code == 200) {
+              this.tableData =
+                response.data.result.msgTxt[0].datalist[0].readData;
+              if (this.tableData.frontGateOpen == 1) {
+                this.tableData.frontGateOpen = "打开";
+              } else {
+                this.tableData.frontGateOpen = "关闭";
+              }
+              if (this.tableData.rearGateOpen == 1) {
+                rearGateOpen = "打开";
+              } else {
+                this.tableData.rearGateOpen = "关闭";
+              }
+              this.tableData.push(
+                response.data.result.msgTxt[0].datalist[0].readTime
+              );
+            } else {
+              resolve(response);
+            }
+          })
+          .catch((error) => {
+            console.log("catch===>response", response);
+            reject(error);
+          });
+      });
+    },
+    backPage() {
+      uni.navigateBack({
+        delta: 1,
+      });
+    },
+  },
+};
 </script>
 
 <style>
-	.top-nav{
-		background-image: url(../../../../static/topnavbar.png) ;
-		background-size: cover; /* 背景图片大小适应 */
-		height: 100%;
-	}
-	.top-nav2{
-		background-color:#ffffff
-	}
-	.main{
-		margin-top: 100rpx;
-		display: flex;
-		flex-direction: column;
-	}
-	.button-grid {
-	  display: grid;
-	  grid-template-columns: repeat(4, 1fr);
-	  gap: 10px; /* 可以根据需要调整行列之间的间距 */
-	}
-	.flcard{
-		padding: 20rpx;
-		background-color: #ffffff;
-		margin-bottom: 5rpx;
-	}
-	.additional-div {
-	  grid-column: span 2; /* 让附加内容跨越三列 */
-	  display: flex;
-	  align-items: center;
-	}
-	.checkbox-group {
-	  margin-left: 10px; /* 可以根据需要调整间距 */
-	}
-	.card{
-		background-color: #ffffff;
-		margin: auto;
-		margin-top: 20rpx;
-		width: 90%;
-		height: 280rpx;
-		border:1rpx solid #000000;
-		border-radius: 20rpx;
-	}
+.top-nav {
+  background-image: url(../../../../static/topnavbar.png);
+  background-size: cover; /* 背景图片大小适应 */
+  height: 100%;
+}
+.top-nav2 {
+  background-color: #ffffff;
+}
+.main {
+  margin-top: 100rpx;
+}
+.container {
+  display: flex;
+  flex-direction: column;
+  height: 90vh; /* 设置容器高度为视窗高度 */
+}
+.button-grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 5px; /* 可以根据需要调整行列之间的间距 */
+}
+
+.flcard {
+  padding: 20rpx;
+  background-color: #ffffff;
+  margin-bottom: 5rpx;
+}
+.door-container {
+  display: flex;
+}
+.door {
+  background-image: url(../../../../static/door.png);
+  background-size: 100% 100%;
+  display: inline-block;
+  vertical-align: top;
+  height: 24vh;
+  flex: 1;
+  margin-right: 10px; /* 可以根据需要调整间距 */
+}
+.left_door {
+  margin-left: 8%;
+  margin-top: 15%;
+  width: 42%;
+  height: calc(19.5vh + 3px);
+  box-sizing: border-box;
+  float: left;
+  z-index: 1;
+  transition: all 4s ease;
+  background-image: url(../../../../static/left.png);
+  background-size: 100% 100%;
+}
+.right_door {
+  margin-top: 15%;
+  width: 42%;
+  height: calc(19.5vh + 3px);
+  box-sizing: border-box;
+  float: left;
+  z-index: 1;
+  transition: all 4s ease;
+  background-image: url(../../../../static/right.png);
+  background-size: 100% 100%;
+}
+.left_door {
+  transform-origin: left center;
+  border-right: 1px solid rgb(8, 8, 8);
+}
+.right_door {
+  transform-origin: right center;
+  border-left: 1px solid rgb(8, 8, 8);
+}
+.additional-div {
+  grid-column: span 2; /* 让附加内容跨越三列 */
+  display: flex;
+  align-items: center;
+}
+.checkbox-group {
+  margin-left: 10px; /* 可以根据需要调整间距 */
+}
+.card {
+  background-color: #ffffff;
+  margin: auto;
+  margin-top: 20rpx;
+  width: 90%;
+  height: 280rpx;
+  border: 1rpx solid #000000;
+  border-radius: 20rpx;
+}
+.flex-containe {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+}
+.itemback {
+  flex: 0 0 calc(33.33% - 10px); /* 使用calc函数计算每个项目的宽度，减去间距 */
+  margin: 5px; /* 间距设置为5px */
+}
+.datacardtime {
+  display: flex;
+  width: 100%;
+  flex: 1;
+  margin: 1%;
+  float: left;
+  height: 50rpx;
+  text-align: center;
+  background: linear-gradient(
+    to right,
+    rgba(55, 135, 254, 0.08),
+    rgba(4, 184, 255, 0.08),
+    rgba(60, 161, 237, 0.08)
+  );
+}
+.datacard {
+  display: flex;
+  width: 48%;
+  flex: 1;
+  margin: 1%;
+  float: left;
+  height: 100rpx;
+  text-align: center;
+  background: linear-gradient(
+    to right,
+    rgba(55, 135, 254, 0.08),
+    rgba(4, 184, 255, 0.08),
+    rgba(60, 161, 237, 0.08)
+  );
+}
+.left-content {
+  width: 50%;
+  display: flex;
+  flex-direction: column;
+}
+.spacer {
+  height: 10rpx;
+}
+.right-content {
+  width: 50%; /* 右侧内容占据50%宽度 */
+  background-image: url(../../../../static/model/Pa.png);
+  background-size: 100% 125%;
+}
+
+/*风窗样式*/
+div.autowindow_new {
+  width: 200px;
+  height: 200px;
+  background-image: url(../../../../static/window/window-bk.png);
+  background-size: 100% 100%;
+  perspective: 800px;
+}
+/*风窗1 2 3 4*/
+
+div.window_new_1 {
+  margin-top: 12px;
+  margin-left: 15px;
+  width: 170px;
+  height: 30px;
+  background-color: crimson;
+  box-sizing: border-box;
+  float: left;
+  z-index: 1;
+  /* transition: all 2s; */
+  background-image: url(../../../../static/window/window_new1.png);
+  background-size: 100% 100%;
+}
+div.window_new_2 {
+  margin-top: 2px;
+  margin-left: 15px;
+  width: 170px;
+  height: 29px;
+  background-color: crimson;
+  box-sizing: border-box;
+  float: left;
+  z-index: 1;
+  /* transition: all 2s; */
+  background-image: url(../../../../static/window/window_new1.png);
+  background-size: 100% 100%;
+}
+div.window_new_3 {
+  margin-top: 2px;
+  margin-left: 15px;
+  width: 170px;
+  height: 29px;
+  background-color: crimson;
+  box-sizing: border-box;
+  float: left;
+  z-index: 1;
+  /* transition: all 2s; */
+  background-image: url(../../../../static/window/window_new1.png);
+  background-size: 100% 100%;
+}
+div.window_new_4 {
+  margin-top: 2px;
+  margin-left: 15px;
+  width: 170px;
+  height: 29px;
+  background-color: crimson;
+  box-sizing: border-box;
+  float: left;
+  z-index: 1;
+  /* transition: all 2s; */
+  background-image: url(../../../../static/window/window_new1.png);
+  background-size: 100% 100%;
+}
+div.window_new_5 {
+  margin-top: 2px;
+  margin-left: 15px;
+  width: 170px;
+  height: 29px;
+  background-color: crimson;
+  box-sizing: border-box;
+  float: left;
+  z-index: 1;
+  /* transition: all 2s; */
+  background-image: url(../../../../static/window/window_new1.png);
+  background-size: 100% 100%;
+}
+div.window_new_1 {
+  transition: all 2s ease;
+  transform-origin: center center;
+}
+div.window_new_2 {
+  transition: all 2s ease;
+  transform-origin: center center;
+}
+div.window_new_3 {
+  transition: all 2s ease;
+  transform-origin: center center;
+}
+div.window_new_4 {
+  transition: all 2s ease;
+  transform-origin: center center;
+}
+div.window_new_5 {
+  transition: all 2s ease;
+  transform-origin: center center;
+}
 </style>

pages/home/devicemenu/treeMenu/typeMenu.vue

@@ -1,89 +1,141 @@
-<template name="history">
-	<view>
-		<scroll-view>
-			<!-- 通风设备 -->
-			<view v-for="(typeitem,index) in typeList">
-				
-				<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>{{typeitem.itemText}}
-					</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 typeitem.children" :key="index" @tap="goPage(item.itemValue)">
-						<view class="padding text-center">
-							<image :src="icon_prefix+'bottombg.png'" style="width:30px;height:20px;">
-							</image>
-							<view class="margin-top-xs">{{item.itemText}}</view>
-						</view>
-					</view>
-				</view>
-			</view>
-				
-		</scroll-view>
-		<view class="cu-tabbar-height margin-top"></view>
-	</view>
+<template>
+  <view>
+    <scroll-view>
+      <!-- 通风设备 -->
+      <view v-for="(typeitem, index) in typeList">
+        <view
+          class="cu-bar bg-white solid-bottom margin-top"
+          :style="[{ animation: 'show 0.5s 1' }]"
+        >
+          <view class="action">
+            <text style="font-weight: bold">{{ typeitem.itemText }}</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 typeitem.children"
+            :key="index"
+            @tap="goPage(item.itemValue)"
+          >
+            <view class="padding text-center">
+              <image
+                :src="icon_prefix + 'bottombg.png'"
+                style="width: 50px; height: 30px"
+              >
+              </image>
+              <img class="icon" :src="getIcon(item.itemValue)" alt="Icon" />
+              <view class="margin-top-xs">{{ item.itemText }}</view>
+            </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'
-	import api from "@/api/api";
-	export default {
-		name: 'home',
-		watch: {
-		},
-		data() {
-			return {
-				icon_prefix:"/static/sidebar/",
-				typeList:[],
-				usList:us.data,
-				osList:os.data,
-				dsList:os.data,
-				msgCount:0,
-				dot:{
-				  mailHome:false
-				}
-			}
-		},
-		created() {
-			this.loadData();
-		},
-		methods: {
-			loadData(){
-				  return new Promise((resolve, reject) => {
-				   api.getDeviceType({}).then(response => {
-				      if(response.data.code ==200){ 
-						  for(var i=0;i<response.data.result.length;i++){
-							  if(response.data.result[i].itemValue.indexOf("synthesizeS")==-1)
-							    this.typeList.push(response.data.result[i])
-						  }
-						  console.log(this.typeList,'ssssssss')
-				      }else{
-				        resolve(response)
-				      }
-				    }).catch(error => {
-						console.log("catch===>response",response)
-				      reject(error)
-				    })
-				  })
-			},
-			goPage(page){
-			   this.$emit("menuClick",page)
-			},
-		}
-	}
+import { us, os } from "@/common/util/type.js";
+import socket from "@/common/js-sdk/socket/socket.js";
+import api from "@/api/api";
+export default {
+  name: "home",
+  watch: {},
+  data() {
+    return {
+      icon_prefix: "/static/sidebar/",
+      typeList: [],
+      usList: us.data,
+      osList: os.data,
+      dsList: os.data,
+      msgCount: 0,
+      dot: {
+        mailHome: false,
+      },
+    };
+  },
+  created() {
+	  
+    this.loadData();
+  },
+  methods: {
+    loadData() {
+      return new Promise((resolve, reject) => {
+        api
+          .getDeviceType({})
+          .then((response) => {
+            if (response.data.code == 200) {
+              for (var i = 0; i < response.data.result.length; i++) {
+                if (
+                  response.data.result[i].itemValue.indexOf("synthesizeS") == -1
+                )
+                  this.typeList.push(response.data.result[i]);
+              }
+              console.log(this.typeList, "数据数据");
+            } else {
+              resolve(response);
+            }
+          })
+          .catch((error) => {
+            console.log("catch===>response", response);
+            reject(error);
+          });
+      });
+    },
+    goPage(page) {
+      this.$emit("menuClick", page);
+    },
+
+    getIcon(itemValue) {
+      const iconMap = {
+        gate: "/static/sidebar/ventS/gate.svg",
+        window: "/static/sidebar/ventS/window.svg",
+        windrect: "/static/sidebar/ventS/windrect.svg",
+        fanmain: "/static/sidebar/ventS/fanmain.svg",
+        fanlocal: "/static/sidebar/ventS/fanlocal.svg",
+        drilling: "/static/sidebar/gasS/drilling.svg",
+        gasmonitor: "/static/sidebar/gasS/gasmonitor.svg",
+        pump: "/static/sidebar/gasS/pump.svg",
+        unit: "/static/sidebar/gasS/unit.svg",
+        dusting: "/static/sidebar/dustS/dusting.svg",
+        spray: "/static/sidebar/dustS/spray.svg",
+        bundletube: "/static/sidebar/fireS/bundletube.svg",
+        fiber: "/static/sidebar/fireS/fiber.svg",
+        nitrogen: "/static/sidebar/fireS/nitrogen.svg",
+        obfurage: "/static/sidebar/fireS/obfurage.svg",
+        pulping: "/static/sidebar/fireS/pulping.svg",
+        atomizing: "/static/sidebar/dustS/atomizing.svg",
+      };
+      // 根据itemValue获取对应的图标路径，如果找不到对应关系则返回默认图标
+      return iconMap[itemValue];
+    },
+  },
+};
 </script>
 
 <style scoped>
-	.cu-list.grid>.cu-item {
-	  padding: 0px 0px; 
-	  background: linear-gradient(to right, rgba(55, 135, 254, 0.08), rgba(4, 184, 255, 0.08), rgba(60, 161, 237, 0.08));
-	}
-    .line2-icon {
-	  width: 60px;
-	  height: 60px;
-    }
-	
+.cu-list.grid > .cu-item {
+  padding: 0px 0px;
+  background: linear-gradient(
+    to right,
+    rgba(55, 135, 254, 0.08),
+    rgba(4, 184, 255, 0.08),
+    rgba(60, 161, 237, 0.08)
+  );
+}
+.line2-icon {
+  width: 60px;
+  height: 60px;
+}
+.icon {
+  position: absolute;
+  top: 5px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 20px;
+  height: 20px;
+}
 </style>

pages/home/firstmodel.vue

@@ -1,195 +1,346 @@
 <template>
-	<view class="container">
-			<!-- 建议放在外层 -->
-		<u-navbar title="设备监测" @leftClick="devicemenuShow" :bgImage="backPic" :safeAreaInsetTop="false">
-			<view class="u-nav-slot" slot="left">
-				<u-icon name="list" size="20">
-						
-				</u-icon>
-			</view>
-		</u-navbar>
-		
-		<view v-show="menushow" class="menupage">
-			     <DeviceMenu @menuClick="menuClick"></DeviceMenu>
-		</view>
-		
-		<view v-show="!menushow" class="main" >
-			<view class="u-page" >
-				<u-list>
-					<u-list-item
-					   class="itemback"
-						v-for="(item, index) in curlist"
-						:key="index"
-					>
-						<div @tap="openNewPage(item)">
-							<u-row gutter="5" customStyle="margin-bottom: 10px">
-								<u-col span="24">
-								<u--text :text="item.strinstallpos"></u--text>
-							</u-col>
-							</u-row>
-							<u-row gutter="5" customStyle="margin-bottom: 10px">
-							<u-col span="2">
-							    <u-tag text="断开" v-if="item.netStatus==0" type="error" class="error-tag"></u-tag>
-							    <u-tag text="连接" v-else type="success" class="success-tag"></u-tag>
-							</u-col>
-							<u-col span="2">
-							    <u-tag v-if="item.warnFlag==0" class="success-tag">正常</u-tag>
-							    <u-tag :text="item.warnLevel_str" v-else type="error" class="error-tag" ></u-tag>
-							</u-col>
-							<u-col span="3">
-							</u-col>
-							<u-col span="5">
-							    <u--text class="timetext" :text="item.readTime"></u--text>
-							</u-col>
-							</u-row>
-							<view  v-if="colums[TabCur+'_monitor']!=null">
-							<view class="datacard" v-for="(showitem,index) in colums[TabCur+'_monitor']" v-show="showitem.appShow == 1 ">
-								<view  v-show="showitem.monitorcode != 'strinstallpos' && showitem.monitorcode != 'netStatus' && showitem.monitorcode != 'warnFlag' && showitem.monitorcode != 'readTime'">
-							    <view class="demo-layout bg-purple-light">{{showitem.des}}</view>
-							    <view v-if="showitem.datatype==1" class="demo-layout bg-purple-light">{{item[showitem.monitorcode]}}</view>
-							    <view v-if="showitem.datatype==2" class="demo-layout bg-purple-light">{{item.readData[showitem.monitorcode]}}</view>
-								</view>
-							</view>
-							</view>
-						</div>
-					</u-list-item>
-				</u-list>
-			</view>
-		</view>
-	</view>
+  <view class="container">
+    <!-- 建议放在外层 -->
+    <u-navbar
+      title="设备监测"
+      @leftClick="devicemenuShow"
+      :safeAreaInsetTop="false"
+    >
+      <view class="u-nav-slot" slot="left">
+        <u-icon name="list" size="20"> </u-icon>
+      </view>
+    </u-navbar>
+
+    <view v-show="menushow" class="menupage">
+      <DeviceMenu @menuClick="menuClick"></DeviceMenu>
+    </view>
+
+    <view v-show="!menushow" class="main">
+      <view class="u-page">
+        <u-list>
+          <u-list-item
+            class="itemback"
+            v-for="(item, index) in curlist"
+            :key="index"
+          >
+            <div @tap="openNewPage(item)">
+              <u-row gutter="5" customStyle="margin-bottom: 10px">
+                <u-col span="24">
+                  <u--text :text="item.strinstallpos"></u--text>
+                </u-col>
+              </u-row>
+              <u-row gutter="5" customStyle="margin-bottom: 10px">
+                <u-col span="2" style="margin-right: 15rpx;">
+                  <div
+                    v-if="item.netStatus == 0"
+                    class="error-tag1"
+                  >
+				    <img src="'../../../../static/model/connectFalse.svg "alt="" class="icon-style"/>
+				    <span style="float: right; ">断开</span>
+				  </div>
+                  <div
+                    v-else
+					 class="success-tag"
+                  >
+				    <img src="'../../../../static/model/connectTrue.svg "alt="" class="icon-style"/>
+				    <span style="float: right; ">连接</span>
+				  </div>
+                </u-col>
+                <u-col span="2">
+                  <div
+                    v-if="item.warnFlag == 0"
+                    class="success-tag"
+                  >
+				  <img src="'../../../../static/model/alarmTrue.svg "alt="" class="icon-style"/>
+				  <span  style="float: right; ">{{item.warnLevel_str}}</span></div>
+                  <div
+                    v-else
+                    class="error-tag"
+                  >
+					<img src="'../../../../static/model/alarmFalse.svg "alt="" class="icon-style"/>
+					<span style="float: right; ">{{item.warnLevel_str}}</span>
+				  </div>
+                </u-col>
+								 <u-col span="3"> </u-col>
+                <u-col span="5">
+                  <u--text class="timetext" :text="item.readTime"></u--text>
+                </u-col>
+              </u-row>
+              <view v-if="colums[TabCur + '_monitor'] != null">
+                <view
+                  class="datacard"
+                  v-for="(showitem, index) in colums[TabCur + '_monitor']"
+                  v-show="showitem.appShow == 1"
+                >
+                  <view class="content" :style="{
+                    backgroundImage:
+                      showitem.monitorcode === 'frontRearDP' ||
+                      showitem.monitorcode === 'frontRearDifference'
+                        ? 'url(\'../../../../static/model/Pa.png\')'
+                        : showitem.monitorcode === 'sourcePressure'
+                        ? 'url(\'../../../../static/model/MPa.png\')'
+                        : showitem.monitorcode === 'frontGateOpen'
+                        ? 'url(\'../../../../static/model/doorNet.png\')'
+                        : showitem.monitorcode === 'rearGateOpen'
+                        ? 'url(\'../../../../static/model/doorNet.png\')'
+                        : showitem.monitorcode === 'warnFlag'
+                        ? 'url(\'../../../../static/model/9432.png\')'
+                        : showitem.monitorcode === 'netStatus'
+                        ? 'url(\'../../../../static/model/9431.png\')'
+                        : showitem.monitorcode === 'm3'
+                        ? 'url(\'../../../../static/model/windM3.png\')'
+                        : showitem.monitorcode === 'fsectarea'
+                        ? 'url(\'../../../../static/model/duanArea.png\')'
+						:showitem.monitorcode === 'incipientWindSpeed1' || showitem.monitorcode === 'incipientWindSpeed2' || showitem.monitorcode === 'incipientWindSpeed3'|| showitem.monitorcode === 'va'
+						? 'url(\'../../../../static/model/fengsu.png\')'
+                        : 'url(\'\')',
+                    backgroundSize: '100% 100%',
+                  }">
+                  	<view
+                  	  v-show="
+                  	    showitem.monitorcode != 'strinstallpos' &&
+                  	    showitem.monitorcode != 'netStatus' &&
+                  	    showitem.monitorcode != 'warnFlag' &&
+                  	    showitem.monitorcode != 'readTime'&&
+                  	    showitem.monitorcode != ''
+                  	  "
+                  	>
+                  	  <view
+                  	    v-if="showitem.datatype == 1"
+                  	    class="demo-layout bg-purple-light"
+                  		style="margin-top: 10rpx; color: #3787fe"
+                  	    >{{ item[showitem.monitorcode] }}</view
+                  	  >
+                  	  <view
+                  	    v-if="showitem.datatype == 2"
+                  	    class="demo-layout bg-purple-light"
+                  		style="color: #3787fe"
+                  	    >{{ item.readData[showitem.monitorcode] }}</view
+                  	  >
+                  	  <view class="demo-layout bg-purple-light"  style="margin-top: 10px;color: #677799">{{
+                  	    showitem.des
+                  	  }}</view>
+                  	</view>
+                  </view>
+                </view>
+              </view>
+            </div>
+          </u-list-item>
+        </u-list>
+      </view>
+    </view>
+  </view>
 </template>
 
 <script>
-	import DeviceMenu from './devicemenu/devicemenu.vue'
-	import api from "@/api/api";
-	export default {
-		data() {
-			return {
-				menushow:false,
-				TabCur: "gate",
-				curlist: [],
-				deviceList:{},
-				scrollLeft: 0,
-				currentTab:0,
-				colums:{},
-				backPic:"url(../../../../static/topnavbar.png)",
-			};
-		},
-		components: {
-		    DeviceMenu,
-		},
-		props:['showColum'],
-		watch:{
-			showColum(data){
-				this.colums = data;
-				console.log(this.colums)
-			}
-		},
-		created() {
+import DeviceMenu from "./devicemenu/devicemenu.vue";
+import api from "@/api/api";
+export default {
+  data() {
+    return {
+      menushow: false,
+      TabCur: "gate",
+      curlist: [],
+      deviceList: {},
+      scrollLeft: 0,
+      currentTab: 0,
+      colums: {},
+    };
+  },
+  components: {
+    DeviceMenu,
+  },
+  props: ["showColum"],
+  watch: {
+    showColum(data) {
+      this.colums = data;
+      console.log(this.colums);
+    },
+  },
+  created() {
+    this.colums = this.showColum;
+  },
+  mounted() {
+  	this.startTimer()
+  },
+  methods: {
+	startTimer() {
+	      // 每隔一段时间执行某个操作
+	      this.timer = setInterval(() => {
+	        // 执行定时任务
 			this.loadData(this.TabCur);
-			this.colums = this.showColum;
-		},
-		methods: {
-			loadData(type){
-				  new Promise((resolve, reject) => {
-				   api.getDeviceMonitor({devicetype: type, pagetype: "normal", filterParams: {}}).then(response => {
-				      if(response.data.code ==200){ 
-							  this.deviceList[type] = response.data.result.msgTxt[0].datalist
-							  this.curlist = this.deviceList[type]
-							  console.log(this.curlist,'aaaaaaaaaaaaaaaaaaaa')
-				      }else{
-				        resolve(response)
-				      }
-				    }).catch(error => {
-						console.log("catch===>response",response)
-				      reject(error)
-				    })
-				  })
-			},
-			tabSelect(e) {
-				this.currentTab = e.currentTarget.dataset.id;
-				this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
-			},
-			devicemenuShow(e){
-				this.menushow = true;
-			},
-			menuClick(id){
-				this.TabCur = id;
-				// 显示该分类的数据
-				this.curlist = this.deviceList[this.TabCur];
+	        console.log('定时任务执行中...');
+	      }, 5000);
+	    },
+	    stopTimer() {
+	      // 停止定时器
+	      clearInterval(this.timer);
+	    },
+	    restartTimer() {
+	      // 重新启动定时器
+	      this.stopTimer();
+	      this.startTimer();
+	    },
+    loadData(type) {
+      new Promise((resolve, reject) => {
+        api
+          .getDeviceMonitor({
+            devicetype: type,
+            pagetype: "normal",
+            filterParams: {},
+          })
+          .then((response) => {
+            if (response.data.code == 200) {
+              this.deviceList[type] = response.data.result.msgTxt[0].datalist;
+              this.curlist = this.deviceList[type];
+              this.curlist.forEach((item) => {
+                if (item.readData.frontGateOpen == 1) {
+                  item.readData.frontGateOpen = "打开";
+                } else {
+                  item.readData.frontGateOpen = "关闭";
+                }
+                if (item.readData.rearGateOpen == 1) {
+                  item.readData.rearGateOpen = "打开";
+                } else {
+                  item.readData.rearGateOpen = "关闭";
+                }
+              });
+            } else {
+              resolve(response);
+            }
+          })
+          .catch((error) => {
+            console.log("catch===>response", response);
+            reject(error);
+          });
+      });
+    },
+    tabSelect(e) {
+      this.currentTab = e.currentTarget.dataset.id;
+      this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60;
+    },
+    devicemenuShow(e) {
+      this.menushow = true;
+    },
+    menuClick(id) {
+      this.TabCur = id;
+      // 显示该分类的数据
+      this.curlist = this.deviceList[this.TabCur];
+
+      if (this.curlist == null) {
+        this.curlist = [];
+      }
+      // 选择设备分类，重新获取数据
+      this.loadData(this.TabCur);
+      this.menushow = false;
+    },
+    openNewPage(params) {
+      uni.navigateTo({
+        url: `/pages/home/detail/autodoor/autodoor?id=${params.deviceID}&name=${params.strinstallpos}&type=${this.TabCur}`,
+      });
+    },
+  },
+  onHide() {
+        // 页面隐藏时停止定时器
+        this.stopTimer();
+      },
+    onShow() {
+        // 页面显示时重新启动定时器
+        this.restartTimer();
+   }
+  
 
-				if(this.curlist == null){
-					this.curlist = [];
-				}
-				// 选择设备分类，重新获取数据
-				this.loadData(this.TabCur);
-				this.menushow = false;
-			},
-			openNewPage(params) {
-				  uni.navigateTo({
-				   url: `/pages/home/detail/autodoor/autodoor?id=${params.deviceID}&name=${params.strinstallpos}`
-				  })
-			}
-		}
-	}
+};
 </script>
 
 <style>
-	.top-nav{
-		height: 100rpx;
-		line-height: 100rpx;
-		background-color: #2aa9f3;
-		color: #daaaa;
-	}
-	.top-nav2{
-		background-color:#ffffff
-	}
-	.main{
-		margin-top: 100rpx;
-		display: flex;
-		flex-direction: column;
-	}
-	.card{
-		background-color: #ffffff;
-		margin: auto;
-		margin-top: 20rpx;
-		width: 90%;
-		height: 280rpx;
-		border:1rpx solid #000000;
-		border-radius: 20rpx;
-	}
-	.menupage{
-		position: absolute;
-		z-index: 2;
-		top:40rpx;
-		height: calc(100% - 40rpx);
-		width: 100%;
-	}
-	.timetext{
-		text-align: right;
-		float: right;
-	}
-	.itemback{
-		  cursor: pointer; /* 设置鼠标指针为手指状 */
-		padding: 20rpx;
-		background-color: #ffffff;
-		margin-bottom: 5rpx;
-	}
-	.datacard{
-		width: 23%;
-		margin: 1%;
-		float: left;
-		height: 70rpx;
-		text-align: center;
-		background: linear-gradient(to right, rgba(55, 135, 254, 0.08), rgba(4, 184, 255, 0.08), rgba(60, 161, 237, 0.08));
-	}
-	.error-tag {
-	    background-image: url('../../static/model/9432.png');
-	    background-color: #ff0000;
-	}
-	
-	.success-tag {
-	    background-image: url('../../static/model/9431.png');
-	    background-color: #00ff00;
-	}
+.top-nav {
+  height: 100rpx;
+  line-height: 100rpx;
+  background-color: #2aa9f3;
+  color: #daaaa;
+}
+.top-nav2 {
+  background-color: #ffffff;
+}
+.main {
+  margin-top: 100rpx;
+  display: flex;
+  flex-direction: column;
+}
+.card {
+  background-color: #ffffff;
+  margin: auto;
+  margin-top: 20rpx;
+  width: 90%;
+  height: 280rpx;
+  border: 1rpx solid #000000;
+  border-radius: 20rpx;
+}
+.menupage {
+  position: absolute;
+  z-index: 2;
+  top: 40rpx;
+  height: calc(100% - 40rpx);
+  width: 100%;
+}
+.timetext {
+  text-align: right;
+  float: right;
+}
+.itemback {
+  padding: 20rpx;
+  background-color: #ffffff;
+  margin-bottom: 5rpx;
+}
+.datacard {
+  width: 30%;
+  margin: 1%;
+  float: left;
+  height: 100rpx;
+  text-align: center;
+  background: linear-gradient(
+    to right,
+    rgba(55, 135, 254, 0.08),
+    rgba(4, 184, 255, 0.08),
+    rgba(60, 161, 237, 0.08)
+  );
+}
+.error-tag {
+	border-radius: 10%;
+	display: inline-block;
+  color:#E90000;
+  	line-height: 50rpx;
+  	font-size: 14px;
+  	text-align: center;
+  	width: 120rpx;
+  height: 50rpx;
+  background-color: rgba(233, 0, 0, 0.2);
+}
+.error-tag1{
+	border-radius: 10%;
+		display: inline-block;
+ color: #696969;
+ 	line-height: 50rpx;
+ 	font-size: 14px;
+ 	text-align: center;
+ 	width: 120rpx;
+ height: 50rpx;
+  background-color: rgba(105, 105, 105, 0.2);
+}
+.success-tag {
+	border-radius: 10%;
+	color: #42c000;
+	line-height: 50rpx;
+	font-size: 14px;
+	width: 120rpx;
+  height: 50rpx;
+  display: inline-block;
+  background-color: rgba(226, 250, 214);
+}
+.icon-style{
+	margin: 15rpx;
+	width: 14px;
+	height: 14px;
+}
 </style>

pages/home/home.vue

@@ -7,7 +7,6 @@
 
 <script>
 import Firstmodel from "./firstmodel.vue";
-import { us, os } from "@/common/util/work.js";
 import { mapActions } from "vuex";
 import api from "@/api/api";
 export default {
@@ -18,14 +17,7 @@ export default {
   watch: {},
   data() {
     return {
-      usList: us.data,
-      osList: os.data,
-      msgCount: 0,
       showColum: {},
-      dot: {
-        mailHome: false,
-      },
-      currentTab: 0, // 当前选中的选项卡索引
     };
   },
   methods: {

pages/index/index.vue

@@ -12,19 +12,8 @@
 			:placeholder="true"
 			:safeAreaInsetBottom="true"
 		>
-			<u-tabbar-item text="设备监测" name="home" icon="file-text" @click="NavChange('home')">
-				<!-- <image
-					class="u-page__item__slot-icon"
-					slot="active-icon"
-					src="https://cdn.uviewui.com/uview/common/bell-selected.png"
-				></image>
-				<image
-					class="u-page__item__slot-icon"
-					slot="inactive-icon"
-					src="https://cdn.uviewui.com/uview/common/bell.png"
-				></image> -->
-			</u-tabbar-item>
-			<u-tabbar-item text="历史数据" icon="photo" name="history" @click="NavChange('history')" ></u-tabbar-item>
+			<u-tabbar-item text="设备监测" name="home" icon="file-text" @click="NavChange('home')"></u-tabbar-item>
+			<u-tabbar-item text="历史数据" icon="home" name="history" @click="NavChange('history')" ></u-tabbar-item>
 			<u-tabbar-item text="预警分析" icon="play-right" name="warndata" @click="NavChange('warndata')" ></u-tabbar-item>
 			<u-tabbar-item text="操作记录" icon="account" name="people" @click="NavChange('people')" ></u-tabbar-item>
 		</u-tabbar>
@@ -48,7 +37,7 @@
 		},
 		methods: {
 			NavChange: function(e) {
-				this.PageCur = e.currentTarget.dataset.cur
+				this.PageCur = e
 			}
 			
 		}

static/model/alarmTrue.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="25.921" height="23.842" viewBox="0 0 25.921 23.842">
+  <path id="路径_55392" data-name="路径 55392" d="M25.776,62.885,14.192,41.7a1.406,1.406,0,0,0-2.475,0L.145,62.885A1.331,1.331,0,0,0,1.389,64.8H24.545a1.329,1.329,0,0,0,1.231-1.918ZM11.924,50.3A1.037,1.037,0,0,1,14,50.3v6.22a1.037,1.037,0,1,1-2.073,0V50.3Zm1.037,10.885a1.3,1.3,0,1,1,1.3-1.3A1.3,1.3,0,0,1,12.961,61.187Z" transform="translate(0 -40.96)" fill="#42c400"/>
+</svg>

static/model/connectFalse.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="23.103" height="23" viewBox="0 0 23.103 23">
+  <g id="组_9385" data-name="组 9385" transform="translate(-15.975 -28.073)">
+    <path id="路径_55387" data-name="路径 55387" d="M20.581,48.628a.775.775,0,0,1-.507-.179,11.551,11.551,0,1,1,14.9,0,.76.76,0,0,1-1.058-.089.73.73,0,0,1,.089-1.043,10.061,10.061,0,1,0-13.012,0,.745.745,0,0,1-.477,1.312Z" transform="translate(0)" fill="#696969"/>
+    <path id="路径_55388" data-name="路径 55388" d="M192.941,220.623a.73.73,0,0,1-.477-.179,7.691,7.691,0,1,1,9.941,0,.73.73,0,0,1-1.043-.075.76.76,0,0,1,.075-1.058,6.215,6.215,0,1,0-8.019,0,.76.76,0,0,1,.089,1.058A.715.715,0,0,1,192.941,220.623Z" transform="translate(-169.722 -174.647)" fill="#696969"/>
+    <path id="路径_55389" data-name="路径 55389" d="M362.141,383.8a3.741,3.741,0,1,1,3.741-3.741A3.741,3.741,0,0,1,362.141,383.8Zm0-5.962a2.236,2.236,0,1,0,0-.03Z" transform="translate(-334.45 -340.137)" fill="#696969"/>
+    <path id="路径_55390" data-name="路径 55390" d="M487.785,640.623a.745.745,0,0,1-.745-.745v-7.452a.745.745,0,1,1,1.49,0v7.452A.745.745,0,0,1,487.785,640.623Z" transform="translate(-460.094 -589.55)" fill="#696969"/>
+  </g>
+</svg>