Merge branch 'master' of http://182.92.126.35:3000/msx/Vent-App

.hbuilderx/launch.json

@@ -2,7 +2,7 @@
     "version" : "1.0",
     "configurations" : [
         {
-            "playground" : "custom",
+            "playground" : "standard",
             "type" : "uni-app:app-android"
         },
         {

App.vue

@@ -1,284 +1,288 @@
 <style lang="scss">
-	/* 注意要写在第一行，同时给style标签加入lang="scss"属性 */
-	@import "@/uni_modules/uview-ui/index.scss";
+/* 注意要写在第一行，同时给style标签加入lang="scss"属性 */
+@import "@/uni_modules/uview-ui/index.scss";
 </style>
 <script>
-	import Vue from 'vue'
-	import appUpdate from 'common/util/appUpdate.js'
-	export default {
-		onLaunch: function() {
-			uni.getSystemInfo({
-				success: function(e) {
-					
-					// #ifdef APP-PLUS
-					// 检测升级
-					appUpdate()
-					// #endif
-					// #ifndef MP
-					Vue.prototype.StatusBar = e.statusBarHeight;
-					if (e.platform == 'android') {
-						Vue.prototype.CustomBar = e.statusBarHeight + 50;
-					} else {
-						Vue.prototype.CustomBar = e.statusBarHeight + 45;
-					};
-					// #endif
+import Vue from "vue";
+import appUpdate from "common/util/appUpdate.js";
+export default {
+  onLaunch: function () {
+    const savedIP = uni.getStorageSync("selectedIP");
+    if (!savedIP) {
+      uni.reLaunch({ url: "/pages/ipConfig/ipConfig" });
+      return;
+    } else {
+      uni.getSystemInfo({
+        success: function (e) {
+          // #ifdef APP-PLUS
+          // 检测升级
+          appUpdate();
+          // #endif
+          // #ifndef MP
+          Vue.prototype.StatusBar = e.statusBarHeight;
+          if (e.platform == "android") {
+            Vue.prototype.CustomBar = e.statusBarHeight + 50;
+          } else {
+            Vue.prototype.CustomBar = e.statusBarHeight + 45;
+          }
+          // #endif
 
-					// #ifdef MP-WEIXIN
-					Vue.prototype.StatusBar = e.statusBarHeight;
-					let custom = wx.getMenuButtonBoundingClientRect();
-					Vue.prototype.Custom = custom;
-					Vue.prototype.CustomBar = custom.bottom + custom.top - e.statusBarHeight;
-					// #endif		
+          // #ifdef MP-WEIXIN
+          Vue.prototype.StatusBar = e.statusBarHeight;
+          let custom = wx.getMenuButtonBoundingClientRect();
+          Vue.prototype.Custom = custom;
+          Vue.prototype.CustomBar =
+            custom.bottom + custom.top - e.statusBarHeight;
+          // #endif
 
-					// #ifdef MP-ALIPAY
-					Vue.prototype.StatusBar = e.statusBarHeight;
-					Vue.prototype.CustomBar = e.statusBarHeight + e.titleBarHeight;
-					// #endif
-					
-					// #ifdef APP-PLUS
-					//Vue.prototype.$api.listenTranMsg()
-			// 		var info = plus.push.getClientInfo();
-			
-			// 		/* 5+  push 消息推送 ps:使用:H5+的方式监听，实现推送*/
-			// 		plus.push.addEventListener("click", function(msg) {
-			// 			console.log("click:" + JSON.stringify(msg));
-			// 			console.log(msg.payload);
-			// 			console.log(JSON.stringify(msg));
-			// 			//这里可以写跳转业务代码
-			// 		}, false);
-			// 		// 监听在线消息事件    
-			// 		plus.push.addEventListener("receive", function(msg) {
-			// 			// plus.ui.alert(2);  
-			// 			//这里可以写跳转业务代码
-			// 			console.log("recevice:" + JSON.stringify(msg))
-			// 		}, false);
-					// #endif
-					
-					//Vue.prototype.$api.initLogin()
-					
-				}
-			})
-            Vue.prototype.NavBarColor='bg-gradual-blue'
-            Vue.prototype.Radio_Check_Size='scale(0.7)'
-			Vue.prototype.ColorList = [{
-					title: '嫣红',
-					name: 'red',
-					color: '#e54d42'
-				},
-				{
-					title: '桔橙',
-					name: 'orange',
-					color: '#f37b1d'
-				},
-				{
-					title: '明黄',
-					name: 'yellow',
-					color: '#fbbd08'
-				},
-				{
-					title: '橄榄',
-					name: 'olive',
-					color: '#8dc63f'
-				},
-				{
-					title: '森绿',
-					name: 'green',
-					color: '#39b54a'
-				},
-				{
-					title: '天青',
-					name: 'cyan',
-					color: '#1cbbb4'
-				},
-				{
-					title: '海蓝',
-					name: 'blue',
-					color: '#0081ff'
-				},
-				{
-					title: '姹紫',
-					name: 'purple',
-					color: '#6739b6'
-				},
-				{
-					title: '木槿',
-					name: 'mauve',
-					color: '#9c26b0'
-				},
-				{
-					title: '桃粉',
-					name: 'pink',
-					color: '#e03997'
-				},
-				{
-					title: '棕褐',
-					name: 'brown',
-					color: '#a5673f'
-				},
-				{
-					title: '玄灰',
-					name: 'grey',
-					color: '#8799a3'
-				},
-				{
-					title: '草灰',
-					name: 'gray',
-					color: '#aaaaaa'
-				},
-				{
-					title: '墨黑',
-					name: 'black',
-					color: '#333333'
-				},
-				{
-					title: '雅白',
-					name: 'white',
-					color: '#ffffff'
-				},
-			]
+          // #ifdef MP-ALIPAY
+          Vue.prototype.StatusBar = e.statusBarHeight;
+          Vue.prototype.CustomBar = e.statusBarHeight + e.titleBarHeight;
+          // #endif
 
-		},
-		onShow: function() {
-			console.log('App Show')
-		},
-		onHide: function() {
-			console.log('App Hide')
-			clearInterval(this.$store.state.timer); // 假设定时器存储在 Vuex 的状态管理中
-		},
+          // #ifdef APP-PLUS
+          //Vue.prototype.$api.listenTranMsg()
+          // 		var info = plus.push.getClientInfo();
 
-	}
+          // 		/* 5+  push 消息推送 ps:使用:H5+的方式监听，实现推送*/
+          // 		plus.push.addEventListener("click", function(msg) {
+          // 			console.log("click:" + JSON.stringify(msg));
+          // 			console.log(msg.payload);
+          // 			console.log(JSON.stringify(msg));
+          // 			//这里可以写跳转业务代码
+          // 		}, false);
+          // 		// 监听在线消息事件
+          // 		plus.push.addEventListener("receive", function(msg) {
+          // 			// plus.ui.alert(2);
+          // 			//这里可以写跳转业务代码
+          // 			console.log("recevice:" + JSON.stringify(msg))
+          // 		}, false);
+          // #endif
+
+          //Vue.prototype.$api.initLogin()
+        },
+      });
+      Vue.prototype.NavBarColor = "bg-gradual-blue";
+      Vue.prototype.Radio_Check_Size = "scale(0.7)";
+      Vue.prototype.ColorList = [
+        {
+          title: "嫣红",
+          name: "red",
+          color: "#e54d42",
+        },
+        {
+          title: "桔橙",
+          name: "orange",
+          color: "#f37b1d",
+        },
+        {
+          title: "明黄",
+          name: "yellow",
+          color: "#fbbd08",
+        },
+        {
+          title: "橄榄",
+          name: "olive",
+          color: "#8dc63f",
+        },
+        {
+          title: "森绿",
+          name: "green",
+          color: "#39b54a",
+        },
+        {
+          title: "天青",
+          name: "cyan",
+          color: "#1cbbb4",
+        },
+        {
+          title: "海蓝",
+          name: "blue",
+          color: "#0081ff",
+        },
+        {
+          title: "姹紫",
+          name: "purple",
+          color: "#6739b6",
+        },
+        {
+          title: "木槿",
+          name: "mauve",
+          color: "#9c26b0",
+        },
+        {
+          title: "桃粉",
+          name: "pink",
+          color: "#e03997",
+        },
+        {
+          title: "棕褐",
+          name: "brown",
+          color: "#a5673f",
+        },
+        {
+          title: "玄灰",
+          name: "grey",
+          color: "#8799a3",
+        },
+        {
+          title: "草灰",
+          name: "gray",
+          color: "#aaaaaa",
+        },
+        {
+          title: "墨黑",
+          name: "black",
+          color: "#333333",
+        },
+        {
+          title: "雅白",
+          name: "white",
+          color: "#ffffff",
+        },
+      ];
+    }
+  },
+  onShow: function () {
+    console.log("App Show");
+  },
+  onHide: function () {
+    console.log("App Hide");
+    clearInterval(this.$store.state.timer); // 假设定时器存储在 Vuex 的状态管理中
+  },
+};
 </script>
 
 <style>
-	@import "plugin/colorui/main.css";
-	@import "plugin/colorui/icon.css";
-    @import "plugin/colorui/animation.css";
-	.nav-list {
-		display: flex;
-		flex-wrap: wrap;
-		padding: 0px 40upx 0px;
-		justify-content: space-between;
-	}
+@import "plugin/colorui/main.css";
+@import "plugin/colorui/icon.css";
+@import "plugin/colorui/animation.css";
+.nav-list {
+  display: flex;
+  flex-wrap: wrap;
+  padding: 0px 40upx 0px;
+  justify-content: space-between;
+}
 
-	.nav-li {
-		padding: 30upx;
-		border-radius: 12upx;
-		width: 45%;
-		margin: 0 2.5% 40upx;
-		background-image: url(https://cdn.nlark.com/yuque/0/2019/png/280374/1552996358352-assets/web-upload/cc3b1807-c684-4b83-8f80-80e5b8a6b975.png);
-		background-size: cover;
-		background-position: center;
-		position: relative;
-		z-index: 1;
-	}
+.nav-li {
+  padding: 30upx;
+  border-radius: 12upx;
+  width: 45%;
+  margin: 0 2.5% 40upx;
+  background-image: url(https://cdn.nlark.com/yuque/0/2019/png/280374/1552996358352-assets/web-upload/cc3b1807-c684-4b83-8f80-80e5b8a6b975.png);
+  background-size: cover;
+  background-position: center;
+  position: relative;
+  z-index: 1;
+}
 
-	.nav-li::after {
-		content: "";
-		position: absolute;
-		z-index: -1;
-		background-color: inherit;
-		width: 100%;
-		height: 100%;
-		left: 0;
-		bottom: -10%;
-		border-radius: 10upx;
-		opacity: 0.2;
-		transform: scale(0.9, 0.9);
-	}
+.nav-li::after {
+  content: "";
+  position: absolute;
+  z-index: -1;
+  background-color: inherit;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  bottom: -10%;
+  border-radius: 10upx;
+  opacity: 0.2;
+  transform: scale(0.9, 0.9);
+}
 
-	.nav-li.cur {
-		color: #fff;
-		background: rgb(94, 185, 94);
-		box-shadow: 4upx 4upx 6upx rgba(94, 185, 94, 0.4);
-	}
+.nav-li.cur {
+  color: #fff;
+  background: rgb(94, 185, 94);
+  box-shadow: 4upx 4upx 6upx rgba(94, 185, 94, 0.4);
+}
 
-	.nav-title {
-		font-size: 32upx;
-		font-weight: 300;
-	}
+.nav-title {
+  font-size: 32upx;
+  font-weight: 300;
+}
 
-	.nav-title::first-letter {
-		font-size: 40upx;
-		margin-right: 4upx;
-	}
+.nav-title::first-letter {
+  font-size: 40upx;
+  margin-right: 4upx;
+}
 
-	.nav-name {
-		font-size: 28upx;
-		text-transform: Capitalize;
-		margin-top: 20upx;
-		position: relative;
-	}
+.nav-name {
+  font-size: 28upx;
+  text-transform: Capitalize;
+  margin-top: 20upx;
+  position: relative;
+}
 
-	.nav-name::before {
-		content: "";
-		position: absolute;
-		display: block;
-		width: 40upx;
-		height: 6upx;
-		background: #fff;
-		bottom: 0;
-		right: 0;
-		opacity: 0.5;
-	}
+.nav-name::before {
+  content: "";
+  position: absolute;
+  display: block;
+  width: 40upx;
+  height: 6upx;
+  background: #fff;
+  bottom: 0;
+  right: 0;
+  opacity: 0.5;
+}
 
-	.nav-name::after {
-		content: "";
-		position: absolute;
-		display: block;
-		width: 100upx;
-		height: 1px;
-		background: #fff;
-		bottom: 0;
-		right: 40upx;
-		opacity: 0.3;
-	}
+.nav-name::after {
+  content: "";
+  position: absolute;
+  display: block;
+  width: 100upx;
+  height: 1px;
+  background: #fff;
+  bottom: 0;
+  right: 40upx;
+  opacity: 0.3;
+}
 
-	.nav-name::first-letter {
-		font-weight: bold;
-		font-size: 36upx;
-		margin-right: 1px;
-	}
+.nav-name::first-letter {
+  font-weight: bold;
+  font-size: 36upx;
+  margin-right: 1px;
+}
 
-	.nav-li text {
-		position: absolute;
-		right: 30upx;
-		top: 30upx;
-		font-size: 52upx;
-		width: 60upx;
-		height: 60upx;
-		text-align: center;
-		line-height: 60upx;
-	}
+.nav-li text {
+  position: absolute;
+  right: 30upx;
+  top: 30upx;
+  font-size: 52upx;
+  width: 60upx;
+  height: 60upx;
+  text-align: center;
+  line-height: 60upx;
+}
 
-	.text-light {
-		font-weight: 300;
-	}
+.text-light {
+  font-weight: 300;
+}
 
-	@keyframes show {
-		0% {
-			transform: translateY(-50px);
-		}
+@keyframes show {
+  0% {
+    transform: translateY(-50px);
+  }
 
-		60% {
-			transform: translateY(40upx);
-		}
+  60% {
+    transform: translateY(40upx);
+  }
 
-		100% {
-			transform: translateY(0px);
-		}
-	}
+  100% {
+    transform: translateY(0px);
+  }
+}
 
-	@-webkit-keyframes show {
-		0% {
-			transform: translateY(-50px);
-		}
+@-webkit-keyframes show {
+  0% {
+    transform: translateY(-50px);
+  }
 
-		60% {
-			transform: translateY(40upx);
-		}
+  60% {
+    transform: translateY(40upx);
+  }
 
-		100% {
-			transform: translateY(0px);
-		}
-	}
+  100% {
+    transform: translateY(0px);
+  }
+}
 </style>

api/api.js

@@ -88,6 +88,11 @@ const apiService = {
   getDeviceMonitor(params) {
     return http.post("/monitor/device", params);
   },
+  //查询场景类型数据
+  getSysList(params) {
+    const url = buildURL("/safety/ventanalyManageSystem/list", params);
+    return http.get(url);
+  },
   //查询分页列表信息 通过分类查询 各类设备在app上是否展示的字段
   getShowColumList(params) {
     // const urlParams = new URLSearchParams(params);

common/router/modules/routes.js

@@ -7,6 +7,13 @@ const routes = [
     },
   },
   {
+    path: "/pages/ipConfig/ipConfig",
+    name: "ipConfig",
+    meta: {
+      title: "IP配置",
+    },
+  },
+  {
     //注意：path必须跟pages.json中的地址对应，最前面别忘了加'/'哦
     path: "/pages/index/index",
     name: "index",

common/service/config.service.js

@@ -1,6 +1,6 @@
 let BASE_URL = "";
 if (process.env.NODE_ENV == "development") {
-  BASE_URL = "http://182.92.126.35:9999"; // 开发环境
+  // BASE_URL = "http://182.92.126.35:9999"; // 开发环境
 } else {
   // BASE_URL = "http://182.92.126.35:9999"; // 开发环境
   // BASE_URL = "http://10.246.95.4:9999"; // 布尔台
@@ -16,12 +16,34 @@ if (process.env.NODE_ENV == "development") {
   // BASE_URL = "http://10.246.167.205:9999"; //上湾
 }
 let staticDomainURL = BASE_URL + "/sys/common/static";
-
 const configService = {
-  apiUrl: BASE_URL,
-  apiUrlP: 'http://10.246.167.205:6006',
+  apiUrl: uni.getStorageSync("apiUrl"),
+  apiUrlP: "http://10.246.167.205:6006",
   // apiUrlP: 'http://182.92.126.35:6006',
   staticDomainURL: staticDomainURL,
 };
 
 export default configService;
+
+// let BASE_URL = "";
+
+// // 开发环境直接使用预设 IP
+// if (process.env.NODE_ENV === "development") {
+//   BASE_URL = "http://182.92.126.35:9999";
+// } else {
+//   // 生产环境优先读取本地存储
+//   BASE_URL = uni.getStorageSync("apiUrl") || "";
+// }
+
+// // 判断是否需要跳转 IP 设置页
+// if (process.env.NODE_ENV !== "development" && !BASE_URL) {
+//   uni.reLaunch({ url: "/pages/ipConfig/ipConfig" });
+// }
+
+// const staticDomainURL = BASE_URL + "/sys/common/static";
+// const configService = {
+//   apiUrl: BASE_URL,
+//   apiUrlP: "http://10.246.167.205:6006",
+//   staticDomainURL: staticDomainURL,
+// };
+// export default configService;

common/service/service.js

@@ -1,32 +1,31 @@
-import Request from '@/common/luch-request/index.js'
-import { ACCESS_TOKEN } from '@/common/util/constants.js'
-import configService from './config.service.js'
-import tip from '@/common/util/tip.js';
-import store from '@/store/index.js';
+import Request from "@/common/luch-request/index.js";
+import { ACCESS_TOKEN } from "@/common/util/constants.js";
+import configService from "./config.service.js";
+import tip from "@/common/util/tip.js";
+import store from "@/store/index.js";
 
 let apiUrl = configService.apiUrl;
 
 const getTokenStorage = () => {
-  let token = ''
+  let token = "";
   try {
-    token = uni.getStorageSync(ACCESS_TOKEN)
+    token = uni.getStorageSync(ACCESS_TOKEN);
   } catch (e) {
     //TODO handle the exception
-    console.log("getTokenStorage", token)
+    console.log("getTokenStorage", token);
   }
-  return token
-}
+  return token;
+};
 
-
-
-const http = new Request()
-http.setConfig((config) => { /* 设置全局配置 */
-  config.baseUrl = apiUrl /* 根域名不同 */
+const http = new Request();
+http.setConfig((config) => {
+  /* 设置全局配置 */
+  config.baseUrl = apiUrl; /* 根域名不同 */
   config.header = {
-    ...config.header
-  }
-  return config
-})
+    ...config.header,
+  };
+  return config;
+});
 
 /**
  * 自定义验证器，如果返回true 则进入响应拦截器的响应成功函数(resolve)，否则进入响应拦截器的响应错误函数(reject)
@@ -35,84 +34,89 @@ http.setConfig((config) => { /* 设置全局配置 */
  */
 // 有默认，非必写
 http.validateStatus = (statusCode) => {
-  return statusCode === 200
-}
+  return statusCode === 200;
+};
 
-http.interceptor.request((config, cancel) => { /* 请求之前拦截器 */
-  console.log(config, 'config---')
+http.interceptor.request((config, cancel) => {
+  /* 请求之前拦截器 */
+  console.log(config, "config---");
+  config.baseUrl = "";
+  config.url = uni.getStorageSync("apiUrl") + config.url;
   config.header = {
     ...config.header,
-    'X-Access-Token': getTokenStorage()
-  }
+    "X-Access-Token": getTokenStorage(),
+  };
 
   /*
   if (!token) { // 如果token不存在，调用cancel 会取消本次请求，但是该函数的catch() 仍会执行
     cancel('token 不存在') // 接收一个参数，会传给catch((err) => {}) err.errMsg === 'token 不存在'
   }
   */
-  return config
-})
+  return config;
+});
 
 // 必须使用异步函数，注意
-var that = this
-http.interceptor.response(async (response) => { /* 请求之后拦截器 */
-  // if (response.data.code !== 200) { // 服务端返回的状态码不等于200，则reject()
-  //   return Promise.reject(response)
-  // }
-  return response
-}, (response) => {
-  // 请求错误做点什么
-  console.log("请求错误做点什么", response);
-  if (response) {
-    let data = response.data
-    const token = uni.getStorageSync(ACCESS_TOKEN)
-    console.log("------异常响应------", token)
-    console.log("------异常响应------", data.code)
-    switch (data.code) {
-      case 403:
-        tip.error('拒绝访问');
-        break
-      case 500:
-        if (!token || data.message == "Token失效，请重新登录") {
-          let timeout = setTimeout(tip.alert('登录已过期'), 1000);
-          store.dispatch('Logout').then(() => {
-            clearTimeout(timeout)
-            window.location.reload()
-          })
-        }
-        break
-      case 404:
-        break
-      case 504:
-        break
-      case 401:
-        console.log("------异常响应-401-----", 401)
+var that = this;
+http.interceptor.response(
+  async (response) => {
+    /* 请求之后拦截器 */
+    // if (response.data.code !== 200) { // 服务端返回的状态码不等于200，则reject()
+    //   return Promise.reject(response)
+    // }
+    return response;
+  },
+  (response) => {
+    // 请求错误做点什么
+    console.log("请求错误做点什么", response);
+    if (response) {
+      let data = response.data;
+      const token = uni.getStorageSync(ACCESS_TOKEN);
+      console.log("------异常响应------", token);
+      console.log("------异常响应------", data.code);
+      switch (data.code) {
+        case 403:
+          tip.error("拒绝访问");
+          break;
+        case 500:
+          if (!token || data.message == "Token失效，请重新登录") {
+            let timeout = setTimeout(tip.alert("登录已过期"), 1000);
+            store.dispatch("Logout").then(() => {
+              clearTimeout(timeout);
+              window.location.reload();
+            });
+          }
+          break;
+        case 404:
+          break;
+        case 504:
+          break;
+        case 401:
+          console.log("------异常响应-401-----", 401);
 
-        console.log("------uni-----", uni)
-        uni.navigateTo({
-          url: '/pages/login/login'
-        });
-        return
-        if (token) {
-          /* store.dispatch('Logout').then(() => {
+          console.log("------uni-----", uni);
+          uni.navigateTo({
+            url: "/pages/login/login",
+          });
+          return;
+          if (token) {
+            /* store.dispatch('Logout').then(() => {
              setTimeout(() => {
                window.location.reload()
              }, 1500)
            }) */
-        }
-        break
-      default:
-        tip.error({
-          duration: 0,
-          forbidClick: true,
-          message: data.message
-        });
-        break
+          }
+          break;
+        default:
+          tip.error({
+            duration: 0,
+            forbidClick: true,
+            message: data.message,
+          });
+          break;
+      }
     }
+    return response;
   }
-  return response
-})
+);
 
-export {
-  http
-}
+export { http };

pages.json

@@ -205,6 +205,10 @@
       "style": {
         "navigationBarTitleText": ""
       }
+    },
+    {
+      "path": "pages/ipConfig/ipConfig",
+      "style": {}
     }
   ],
   "globalStyle": {

pages/device/index.vue

@@ -17,6 +17,7 @@
       <DeviceMenu @menuClick="menuClick"></DeviceMenu>
     </view>
     <u-tabs
+      v-if="!menushow"
       class="devic-box-tab"
       :current="PageCur"
       :list="tabList"

pages/history/history.vue

@@ -129,7 +129,17 @@
                   class="datacard"
                   v-for="(showitem, index) in deviceShowList"
                   :key="index"
-                  v-if="showitem.appShow == 1"
+                  v-if="
+                    showitem.appShow == 1 &&
+                    showitem.monitorcode != 'strinstallpos' &&
+                    showitem.monitorcode != 'gdevicename' &&
+                    showitem.monitorcode != 'ginstallpos' &&
+                    showitem.monitorcode != 'netStatus' &&
+                    showitem.monitorcode != 'warnFlag' &&
+                    showitem.monitorcode != 'gcreatetime' &&
+                    showitem.monitorcode != 'ttime' &&
+                    showitem.monitorcode != 'time'
+                  "
                 >
                   <view
                     :class="TabCur"
@@ -295,6 +305,7 @@ export default {
       pageNo: 1, // 当前页码（用于请求数据时分页）
       stationType: "plc1", // 站点类型（用于请求数据时的参数）
       strType: "", //设备小类
+      sysId: "",
     };
   },
   components: {
@@ -324,8 +335,6 @@ export default {
   },
   created() {
     this.colums = this.showColum;
-    const key = this.TabCur + "_history";
-    this.deviceShowList = this.colums[key];
     const startTime = new Date().getTime() - 3600 * 1000 * 24 * 30;
     const endTime = new Date();
     this.StartTime = dayjs(startTime).format("YYYY-MM-DD HH:mm:ss");
@@ -333,7 +342,11 @@ export default {
   },
   mounted() {
     // this.TabCur = deviceType;
-    this.loadData(this.TabCur);
+    if (this.TabCur.startsWith("sys_")) {
+      this.loadNewData(this.TabCur);
+    } else {
+      this.loadData(this.TabCur);
+    }
   },
 
   computed: {},
@@ -360,6 +373,50 @@ export default {
           });
       });
     },
+    loadNewData(type) {
+      return new Promise((resolve, reject) => {
+        api
+          .getSysList({
+            strtype: type,
+            pagetype: "normal",
+          })
+          .then((response) => {
+            if (response.data.code == 200) {
+              this.sysId = response.data.result.records[0].id;
+              this.loadSysData({
+                devicetype: "sys",
+                systemID: this.sysId,
+              });
+            } else {
+              resolve(response);
+            }
+          })
+          .catch((error) => {
+            // console.log("catch===>response", response);
+            reject(error);
+          });
+      });
+    },
+    //加载场景类数据
+    loadSysData(data) {
+      new Promise((resolve, reject) => {
+        api
+          .getDeviceMonitor(data)
+          .then((response) => {
+            if (response.data.code == 200) {
+              this.deviceList[this.TabCur] =
+                response.data.result.msgTxt[0].datalist;
+              this.curlist = this.deviceList[this.TabCur];
+              this.setData(this.curlist);
+            } else {
+              resolve(response);
+            }
+          })
+          .catch((error) => {
+            reject(error);
+          });
+      });
+    },
     //选择设备选择器  保存对应的id
     setData(data) {
       this.devices = [];
@@ -380,10 +437,22 @@ export default {
       // this.deviceId = e.value[0].id;
       this.deviceID = e.value[0].ID;
       this.stationType = e.value[0].stationtype;
-      this.strType = e.value[0].strtype;
+      this.strType = e.value[0].type;
       this.deviceType1 = e.value[0].type;
       this.deviceName = e.value[0].strinstallpos;
       this.deviceShow = false;
+      let original = this.TabCur;
+      let newName = original.startsWith("sys_")
+        ? original.substring(4)
+        : original;
+      const key = newName + "_history";
+      const key1 = this.deviceType1 + "_history";
+      console.log(key1, "key1");
+      if (this.showColum?.[key1]?.length > 0) {
+        this.deviceShowList = this.showColum[key1];
+      } else {
+        this.deviceShowList = this.showColum[key] ?? [];
+      }
     },
     selectDevice1(e) {
       this.deviceNum = e.value[0].value;
@@ -419,7 +488,6 @@ export default {
       } else {
         this.getHistoryData2();
       }
-      // this.getHistoryData2();
     },
     // 查询历史数据
     getHistoryData() {
@@ -430,7 +498,7 @@ export default {
         skip: this.skip,
         pageNo: this.pageNo,
         pageSize: 10,
-        strtype: this.TabCur,
+        strtype: this.strType,
       };
       new Promise((resolve, reject) => {
         api
@@ -462,24 +530,32 @@ export default {
         isEmployee: this.TabCur.startsWith("vehicle") ? false : true,
         pageNum: 1,
         pageSize: 10,
-        strtype: this.TabCur + "*",
+        strtype:
+          (this.TabCur.startsWith("sys_")
+            ? this.TabCur.substring(4)
+            : this.TabCur) + "*",
       };
-      api
-        .getDeviceHistory2(params)
-        .then((response) => {
-          if (response.data.code === 200) {
-            const result1 = response.data.result;
-            if (result1.records.length != 0) {
-              this.historyData = result1.records;
+      if (this.TabCur.startsWith("sys")) {
+        params.sysId = this.sysId;
+      }
+      new Promise((resolve, reject) => {
+        api
+          .getDeviceHistory2(params)
+          .then((response) => {
+            if (response.data.code === 200) {
+              const result1 = response.data.result;
+              if (result1.records.length != 0) {
+                this.historyData = result1.records;
+              }
+              // this.pageNo = response1.data.result.datalist.current;
+            } else {
+              resolve(response);
             }
-            // this.pageNo = response1.data.result.datalist.current;
-          } else {
-            reject(new Error(`请求失败，错误码：${response.data.code}`));
-          }
-        })
-        .catch((error) => {
-          reject(error);
-        });
+          })
+          .catch((error) => {
+            reject(error);
+          });
+      });
     },
     async loadMoreData() {
       if (this.loading || !this.hasMoreData) return;

pages/home/detail/autodoor/autodoor.vue

@@ -98,7 +98,7 @@
           >
           </fanlocalAnimate>
         </div>
-        <!-- <div class="flcard" v-if="this.TabCur == 'fanmain'">
+        <div class="flcard" v-if="this.TabCur == 'fanmain'">
           <fanmainAnimate
             ref="fanpage"
             style="width: 100%"
@@ -110,7 +110,7 @@
             :fundoor2="fundoor2"
             :nowfengji="qidongfengji"
           ></fanmainAnimate>
-        </div> -->
+        </div>
         <div class="flcard" style="" v-if="this.TabCur == 'window'">
           <windowAnimate
             :windowAngle="windowAngle"
@@ -210,7 +210,7 @@
                 <div>主机</div>
                 <div
                   class="itemback"
-                  v-for="(item, index) in showColum[TabCur + '_monitor_left']"
+                  v-for="(item, index) in deviceShowList1"
                   :key="index"
                   v-show="item.appShow == 1"
                 >
@@ -300,7 +300,7 @@
                 <div>备机</div>
                 <div
                   class="itemback"
-                  v-for="(item, index) in showColum[TabCur + '_monitor_left']"
+                  v-for="(item, index) in deviceShowList1"
                   :key="index"
                   v-show="item.appShow == 1"
                 >
@@ -394,7 +394,7 @@
                 <div>主机</div>
                 <div
                   class="itemback"
-                  v-for="(item, index) in showColum[TabCur + '_monitor_right']"
+                  v-for="(item, index) in deviceShowList1"
                   :key="index"
                   v-show="item.appShow == 1"
                 >
@@ -484,7 +484,7 @@
                 <div>备机</div>
                 <div
                   class="itemback"
-                  v-for="(item, index) in showColum[TabCur + '_monitor_right']"
+                  v-for="(item, index) in deviceShowList1"
                   :key="index"
                   v-show="item.appShow == 1"
                 >
@@ -673,6 +673,7 @@ export default {
       cameraList: [], //摄像数据
       showColum: {},
       deviceShowList: [],
+      deviceShowList1: [],
       isFirstRequest: true, // 是否是第一次请求
       fanMsStatus: true,
       qidongfengji: "1",
@@ -700,10 +701,10 @@ export default {
     fanmainAnimate,
   },
   created() {
-    this.getShowColum();
     if (this.isFirstRequest) {
       this.getDeviceInfo(this.itemId);
     }
+    this.getShowColum();
   },
   mounted() {
     this.startTimer();
@@ -735,12 +736,34 @@ export default {
               var showlist = response.data.result;
               this.$store.commit("SET_SHOWCOLUM", showlist);
               this.showColum = showlist;
-              const key = this.TabCur + "_monitor";
-              const key1 = this.deviceType + "_monitor";
-              if (this.showColum?.[key1]?.length > 0) {
-                this.deviceShowList = this.showColum[key1];
+              let original = this.TabCur;
+              let newName = original.startsWith("sys_")
+                ? original.substring(4)
+                : original;
+              if (this.TabCur == "fanlocal") {
+                const key = this.TabCur + "_monitor_right";
+                const key1 = this.deviceType + "_monitor_right";
+                if (this.showColum?.[key1]?.length > 0) {
+                  this.deviceShowList1 = this.showColum[key1];
+                } else {
+                  this.deviceShowList1 = this.showColum[key] ?? [];
+                }
+              } else if (this.TabCur == "fanmain") {
+                const key = this.TabCur + "_monitor_left";
+                const key1 = this.deviceType + "_monitor_left";
+                if (this.showColum?.[key1]?.length > 0) {
+                  this.deviceShowList1 = this.showColum[key1];
+                } else {
+                  this.deviceShowList1 = this.showColum[key] ?? [];
+                }
               } else {
-                this.deviceShowList = this.showColum[key] ?? [];
+                const key = newName + "_monitor";
+                const key1 = this.deviceType + "_monitor";
+                if (this.showColum?.[key1]?.length > 0) {
+                  this.deviceShowList = this.showColum[key1];
+                } else {
+                  this.deviceShowList = this.showColum[key] ?? [];
+                }
               }
 
               // this.deviceShowList = this.showColum[key];
@@ -806,14 +829,27 @@ export default {
               this.doorNetStatus = result.netStatus;
               this.warnFlag = result.warnLevel_str;
               this.readTime = result.readTime;
-
-              this.qidongfengji = "1";
-              this.fundoor1 = 1;
-              this.door1 = 1;
-              this.topdoor1 = 1;
-              this.fundoor2 = 0;
-              this.door2 = 0;
-              this.topdoor2 = 0;
+              this.qidongfengji =
+                result.readData.Fan1MOT2_RunningStatus1 == "1" ||
+                result.readData.Fan1StartStatus == "1"
+                  ? "1"
+                  : "2";
+              if (this.qidongfengji == "1") {
+                this.fundoor1 = 1;
+                this.door1 = 1;
+                this.topdoor1 = 0;
+                this.fundoor2 = 0;
+                this.door2 = 0;
+                this.topdoor2 = 0;
+              } else if (this.qidongfengji == "2") {
+                this.fundoor1 = 0;
+                this.door1 = 0;
+                this.topdoor1 = 0;
+                this.fundoor2 = 1;
+                this.door2 = 1;
+                this.topdoor2 = 0;
+              }
+              this.$refs.fanpage.setQidongfengji(this.qidongfengji);
               var maxarea = result.maxarea;
               this.windowAngle =
                 (this.tableData.forntArea / maxarea) * 100 * 0.9;

pages/home/detail/fanmainAnimate/fanmainAnimate.vue

@@ -274,11 +274,7 @@
             ></div>
           </div>
           <!-- <div class="box-left" style="width:5.5%;height:14%;top: 15%;left: 20%;"></div> -->
-          <div
-            class="box"
-            style="top: 12.2%; left: 30.4%"
-            v-if="groupType != 'lh' && groupType !== 'wlyk'"
-          >
+          <div class="box" style="top: 12.2%; left: 30.4%">
             <div id="box2" :class="reverseVal ? 'fz' : 'zz'">
               <span></span>
               <span></span>
@@ -288,15 +284,7 @@
             <!-- <div class="box-right" style="width:6%;height:14%;top: 15%;left:32%;"> -->
             <!-- 风机旁边阀门 -->
           </div>
-          <div
-            class="box-s"
-            style="top: 12.2%; left: 34.5%"
-            :style="
-              groupType != 'lh' && groupType !== 'wlyk'
-                ? 'top: 12.2%;left: 34.5%;'
-                : 'top: 12.2%;left: 32.5%;'
-            "
-          >
+          <div class="box-s" style="top: 12.2%; left: 34.5%">
             <div id="box2-s" :class="reverseVal ? 'fz1' : 'zz1'">
               <span></span>
               <span></span>
@@ -305,11 +293,7 @@
             </div>
           </div>
           <!-- <div class="box-left" style="width:5.5%;height:14%;top: 80%;left: 20%;"></div> -->
-          <div
-            class="box"
-            style="bottom: 11.7%; left: 27.8%"
-            v-if="groupType != 'lh' && groupType !== 'wlyk'"
-          >
+          <div class="box" style="bottom: 11.7%; left: 27.8%">
             <div id="box1" :class="reverseVal ? 'fz' : 'zz'">
               <span></span>
               <span></span>
@@ -344,15 +328,7 @@
           </div>
           <!-- 风机 -->
           <!-- <div class="box-right" style="width:6%;height:14%;top: 80%;left:32.5%;"> -->
-          <div
-            class="box-s"
-            style="bottom: 11.7%; left: 32.4%"
-            :style="
-              groupType != 'lh' && groupType !== 'wlyk'
-                ? 'bottom: 11.7%;left:32.4%;'
-                : 'bottom: 11.7%;left:30.4%;'
-            "
-          >
+          <div class="box-s" style="bottom: 11.7%; left: 32.4%">
             <div id="box1-s" :class="reverseVal ? 'fz1' : 'zz1'">
               <span></span>
               <span></span>
@@ -411,7 +387,7 @@
         <span v-if="topindex == 2">1#风机</span>
         <span v-if="topindex == 1">2#风机</span>
       </div>
-      <div style="position: absolute; color: #fff; bottom: 19%; left: 31.4%">
+      <div style="position: absolute; color: #fff; top: 19%; left: 31.4%">
         <span v-if="topindex == 2">2#风机</span>
         <span v-if="topindex == 1">1#风机</span>
       </div>
@@ -536,6 +512,113 @@ div.ventilate {
   background-size: 100% 100%;
   perspective: 800px;
 }
+div.arrowpic1,
+div.arrowpic2,
+div.arrowpic3,
+div.arrowpic4,
+div.arrowpic5,
+div.arrowpic6,
+div.arrowpic7,
+div.arrowpic8,
+div.arrowpic9,
+div.arrowpic10,
+div.arrowpic1-2,
+div.arrowpic2-2,
+div.arrowpic3-2,
+div.arrowpic4-2,
+div.arrowpic5-2,
+div.arrowpic6-2,
+div.arrowpic7-2,
+div.arrowpic8-2,
+div.arrowpic9-2,
+div.arrowpic10-2,
+div.arrowpic1-3,
+div.arrowpic2-3,
+div.arrowpic3-3,
+div.arrowpic4-3,
+div.arrowpic5-3,
+div.arrowpic6-3,
+div.arrowpic7-3,
+div.arrowpic8-3,
+div.arrowpic9-3,
+div.arrowpic10-3,
+div.arrowpic1-4,
+div.arrowpic2-4,
+div.arrowpic3-4,
+div.arrowpic4-4,
+div.arrowpic5-4,
+div.arrowpic6-4,
+div.arrowpic7-4,
+div.arrowpic8-4,
+div.arrowpic9-4,
+div.arrowpic10-4 {
+  position: absolute;
+  right: 40px;
+  opacity: 0;
+  top: 96px;
+  width: 30px;
+  height: 15px;
+  box-sizing: border-box;
+  float: right;
+  z-index: 100;
+  transition: all 2s ease;
+  background-image: url(/static/mainfan/arrow-icon.png);
+  background-size: 100% 100%;
+}
+
+div.reverse-arrowpic1,
+div.reverse-arrowpic2,
+div.reverse-arrowpic3,
+div.reverse-arrowpic4,
+div.reverse-arrowpic5,
+div.reverse-arrowpic6,
+div.reverse-arrowpic7,
+div.reverse-arrowpic8,
+div.reverse-arrowpic9,
+div.reverse-arrowpic10,
+div.reverse-arrowpic1-2,
+div.reverse-arrowpic2-2,
+div.reverse-arrowpic3-2,
+div.reverse-arrowpic4-2,
+div.reverse-arrowpic5-2,
+div.reverse-arrowpic6-2,
+div.reverse-arrowpic7-2,
+div.reverse-arrowpic8-2,
+div.reverse-arrowpic9-2,
+div.reverse-arrowpic10-2,
+div.reverse-arrowpic1-3,
+div.reverse-arrowpic2-3,
+div.reverse-arrowpic3-3,
+div.reverse-arrowpic4-3,
+div.reverse-arrowpic5-3,
+div.reverse-arrowpic6-3,
+div.reverse-arrowpic7-3,
+div.reverse-arrowpic8-3,
+div.reverse-arrowpic9-3,
+div.reverse-arrowpic10-3,
+div.reverse-arrowpic1-4,
+div.reverse-arrowpic2-4,
+div.reverse-arrowpic3-4,
+div.reverse-arrowpic4-4,
+div.reverse-arrowpic5-4,
+div.reverse-arrowpic6-4,
+div.reverse-arrowpic7-4,
+div.reverse-arrowpic8-4,
+div.reverse-arrowpic9-4,
+div.reverse-arrowpic10-4 {
+  position: absolute;
+  right: 40px;
+  opacity: 0;
+  top: 96px;
+  width: 30px;
+  height: 15px;
+  box-sizing: border-box;
+  float: right;
+  z-index: 100;
+  transition: all 2s ease;
+  background-image: url(/static/mainfan/arrow-icon.png);
+  background-size: 100% 100%;
+}
 </style>
 <style scoped>
 @media screen and (max-width: 4096px) {
@@ -796,3 +879,1515 @@ div.box-left {
   }
 }
 </style>
+<style scoped>
+.arrowpic1 {
+  position: relative;
+  animation: myfirstani1 20s infinite linear;
+  /* Safari 和 Chrome */
+  -webkit-animation: myfirstani1 20s infinite linear;
+}
+
+@keyframes myfirstani1 {
+  0% {
+    right: 0%;
+    top: 48%;
+    -webkit-transform: rotate(0deg);
+    opacity: 1;
+  }
+  18% {
+    right: 12%;
+    top: 48%;
+    -webkit-transform: rotate(0deg);
+    opacity: 1;
+  }
+  20% {
+    right: 14%;
+    top: 46%;
+    -webkit-transform: rotate(30deg);
+    opacity: 1;
+  }
+  30% {
+    right: 22%;
+    top: 22%;
+    -webkit-transform: rotate(30deg);
+    opacity: 1;
+  }
+  32% {
+    right: 24%;
+    top: 20%;
+    -webkit-transform: rotate(0deg);
+    opacity: 1;
+  }
+  92% {
+    right: 86%;
+    top: 20%;
+    -webkit-transform: rotate(0deg);
+    opacity: 1;
+  }
+  94% {
+    right: 88%;
+    top: 18%;
+    -webkit-transform: rotate(90deg);
+    opacity: 1;
+  }
+  98% {
+    right: 88%;
+    top: 10%;
+    -webkit-transform: rotate(90deg);
+    opacity: 1;
+  }
+  100% {
+    right: 88%;
+    top: 0%;
+    -webkit-transform: rotate(90deg);
+    opacity: 0;
+  }
+}
+
+@-webkit-keyframes myfirstani1 /* Safari 和 Chrome */ {
+  0% {
+    right: 0%;
+    top: 48%;
+    -webkit-transform: rotate(0deg);
+    opacity: 1;
+  }
+  18% {
+    right: 12%;
+    top: 48%;
+    -webkit-transform: rotate(0deg);
+    opacity: 1;
+  }
+  20% {
+    right: 14%;
+    top: 46%;
+    -webkit-transform: rotate(30deg);
+    opacity: 1;
+  }
+  30% {
+    right: 22%;
+    top: 22%;
+    -webkit-transform: rotate(30deg);
+    opacity: 1;
+  }
+  32% {
+    right: 24%;
+    top: 20%;
+    -webkit-transform: rotate(0deg);
+    opacity: 1;
+  }
+  92% {
+    right: 94%;
+    top: 20%;
+    -webkit-transform: rotate(0deg);
+    opacity: 1;
+  }
+  94% {
+    right: 95%;
+    top: 18%;
+    -webkit-transform: rotate(90deg);
+    opacity: 1;
+  }
+  98% {
+    right: 95%;
+    top: 10%;
+    -webkit-transform: rotate(90deg);
+    opacity: 1;
+  }
+  100% {
+    right: 95%;
+    top: 7%;
+    -webkit-transform: rotate(90deg);
+    opacity: 0;
+  }
+}
+
+.arrowpic2 {
+  position: relative;
+  animation-delay: -18s;
+  animation: myfirstani1 20s infinite linear;
+  /* Safari 和 Chrome */
+  -webkit-animation: myfirstani1 20s infinite linear;
+  -webkit-animation-delay: -18s;
+}
+
+.arrowpic3 {
+  position: relative;
+  animation-delay: -16s;
+  animation: myfirstani1 20s infinite linear;
+  /* Safari 和 Chrome */
+  -webkit-animation: myfirstani1 20s infinite linear;
+  -webkit-animation-delay: -16s;
+}
+
+.arrowpic4 {
+  position: relative;
+  animation-delay: -14s;
+  animation: myfirstani1 20s infinite linear;
+  /* Safari 和 Chrome */
+  -webkit-animation: myfirstani1 20s infinite linear;
+  -webkit-animation-delay: -14s;
+}
+
+.arrowpic5 {
+  position: relative;
+  animation-delay: -12s;
+  animation: myfirstani1 20s infinite linear;
+  /* Safari 和 Chrome */
+  -webkit-animation: myfirstani1 20s infinite linear;
+  -webkit-animation-delay: -12s;
+}
+
+.arrowpic6 {
+  position: relative;
+  animation-delay: -10s;
+  animation: myfirstani1 20s infinite linear;
+  /* Safari 和 Chrome */
+  -webkit-animation: myfirstani1 20s infinite linear;
+  -webkit-animation-delay: -10s;
+}
+
+.arrowpic7 {
+  position: relative;
+  animation-delay: -8s;
+  animation: myfirstani1 20s infinite linear;
+  /* Safari 和 Chrome */
+  -webkit-animation: myfirstani1 20s infinite linear;
+  -webkit-animation-delay: -8s;
+}
+
+.arrowpic8 {
+  position: relative;
+  animation-delay: -6s;
+  animation: myfirstani1 20s infinite linear;
+  /* Safari 和 Chrome */
+  -webkit-animation: myfirstani1 20s infinite linear;
+  -webkit-animation-delay: -6s;
+}
+
+.arrowpic9 {
+  position: relative;
+  animation-delay: -4s;
+  animation: myfirstani1 20s infinite linear;
+  /* Safari 和 Chrome */
+  -webkit-animation: myfirstani1 20s infinite linear;
+  -webkit-animation-delay: -4s;
+}
+
+.arrowpic10 {
+  position: relative;
+  animation-delay: -2s;
+  animation: myfirstani1 20s infinite linear;
+  /* Safari 和 Chrome */
+  -webkit-animation: myfirstani1 20s infinite linear;
+  -webkit-animation-delay: -2s;
+}
+.arrowpic1-2 {
+  position: relative;
+  animation: myfirstani1-2 20s infinite linear;
+  /* Safari 和 Chrome */
+  -webkit-animation: myfirstani1-2 20s infinite linear;
+}
+
+@keyframes myfirstani1-2 {
+  0% {
+    right: 0%;
+    top: 48%;
+    -webkit-transform: rotate(0deg);
+    opacity: 1;
+  }
+  15% {
+    right: 12%;
+    top: 48%;
+    -webkit-transform: rotate(0deg);
+    opacity: 1;
+  }
+  17% {
+    right: 14%;
+    top: 50%;
+    -webkit-transform: rotate(-30deg);
+    opacity: 1;
+  }
+  29% {
+    right: 22%;
+    top: 68%;
+    -webkit-transform: rotate(-30deg);
+    opacity: 1;
+  }
+  31% {
+    right: 24%;
+    top: 69%;
+    -webkit-transform: rotate(0deg);
+    opacity: 1;
+  }
+
+  92% {
+    right: 94%;
+    top: 69%;
+    -webkit-transform: rotate(0deg);
+    opacity: 1;
+  }
+  94% {
+    right: 95%;
+    top: 67%;
+    -webkit-transform: rotate(90deg);
+    opacity: 1;
+  }
+  98% {
+    right: 95%;
+    top: 58%;
+    -webkit-transform: rotate(90deg);
+    opacity: 1;
+  }
+  100% {
+    right: 95%;
+    top: 45%;
+    -webkit-transform: rotate(90deg);
+    opacity: 0;
+  }
+}
+
+@-webkit-keyframes myfirstani1-2 /* Safari 和 Chrome */ {
+  0% {
+    right: 0%;
+    top: 48%;
+    -webkit-transform: rotate(0deg);
+    opacity: 1;
+  }
+  15% {
+    right: 12%;
+    top: 48%;
+    -webkit-transform: rotate(0deg);
+    opacity: 1;
+  }
+  17% {
+    right: 14%;
+    top: 50%;
+    -webkit-transform: rotate(-30deg);
+    opacity: 1;
+  }
+  29% {
+    right: 22%;
+    top: 68%;
+    -webkit-transform: rotate(-30deg);
+    opacity: 1;
+  }
+  31% {
+    right: 24%;
+    top: 69%;
+    -webkit-transform: rotate(0deg);
+    opacity: 1;
+  }
+
+  92% {
+    right: 94%;
+    top: 69%;
+    -webkit-transform: rotate(0deg);
+    opacity: 1;
+  }
+  94% {
+    right: 95%;
+    top: 67%;
+    -webkit-transform: rotate(90deg);
+    opacity: 1;
+  }
+  98% {
+    right: 95%;
+    top: 58%;
+    -webkit-transform: rotate(90deg);
+    opacity: 1;
+  }
+  100% {
+    right: 95%;
+    top: 45%;
+    -webkit-transform: rotate(90deg);
+    opacity: 0;
+  }
+}
+
+.arrowpic2-2 {
+  position: relative;
+  animation-delay: -18s;
+  animation: myfirstani1-2 20s infinite linear;
+  /* Safari 和 Chrome */
+  -webkit-animation: myfirstani1-2 20s infinite linear;
+  -webkit-animation-delay: -18s;
+}
+
+.arrowpic3-2 {
+  position: relative;
+  animation-delay: -16s;
+  animation: myfirstani1-2 20s infinite linear;
+  /* Safari 和 Chrome */
+  -webkit-animation: myfirstani1-2 20s infinite linear;
+  -webkit-animation-delay: -16s;
+}
+
+.arrowpic4-2 {
+  position: relative;
+  animation-delay: -14s;
+  animation: myfirstani1-2 20s infinite linear;
+  /* Safari 和 Chrome */
+  -webkit-animation: myfirstani1-2 20s infinite linear;
+  -webkit-animation-delay: -14s;
+}
+
+.arrowpic5-2 {
+  position: relative;
+  animation-delay: -12s;
+  animation: myfirstani1-2 20s infinite linear;
+  /* Safari 和 Chrome */
+  -webkit-animation: myfirstani1-2 20s infinite linear;
+  -webkit-animation-delay: -12s;
+}
+
+.arrowpic6-2 {
+  position: relative;
+  animation-delay: -10s;
+  animation: myfirstani1-2 20s infinite linear;
+  /* Safari 和 Chrome */
+  -webkit-animation: myfirstani1-2 20s infinite linear;
+  -webkit-animation-delay: -10s;
+}
+
+.arrowpic7-2 {
+  position: relative;
+  animation-delay: -8s;
+  animation: myfirstani1-2 20s infinite linear;
+  /* Safari 和 Chrome */
+  -webkit-animation: myfirstani1-2 20s infinite linear;
+  -webkit-animation-delay: -8s;
+}
+
+.arrowpic8-2 {
+  position: relative;
+  animation-delay: -6s;
+  animation: myfirstani1-2 20s infinite linear;
+  /* Safari 和 Chrome */
+  -webkit-animation: myfirstani1-2 20s infinite linear;
+  -webkit-animation-delay: -6s;
+}
+
+.arrowpic9-2 {
+  position: relative;
+  animation-delay: -4s;
+  animation: myfirstani1-2 20s infinite linear;
+  /* Safari 和 Chrome */
+  -webkit-animation: myfirstani1-2 20s infinite linear;
+  -webkit-animation-delay: -4s;
+}
+
+.arrowpic10-2 {
+  position: relative;
+  animation-delay: -2s;
+  animation: myfirstani1-2 20s infinite linear;
+  /* Safari 和 Chrome */
+  -webkit-animation: myfirstani1-2 20s infinite linear;
+  -webkit-animation-delay: -2s;
+}
+
+.arrowpic1-3 {
+  position: relative;
+  animation: myfirstani1-3 20s infinite linear;
+  /* Safari 和 Chrome */
+  -webkit-animation: myfirstani1-3 20s infinite linear;
+}
+
+@keyframes myfirstani1-3 {
+  0% {
+    right: 41.5%;
+    top: 0%;
+    -webkit-transform: rotate(-90deg);
+    opacity: 1;
+  }
+  5% {
+    right: 41.5%;
+    top: 16%;
+    -webkit-transform: rotate(-90deg);
+    opacity: 1;
+  }
+  8% {
+    right: 43.5%;
+    top: 20%;
+    -webkit-transform: rotate(0deg);
+    opacity: 1;
+  }
+
+  92% {
+    right: 94%;
+    top: 20%;
+    -webkit-transform: rotate(0deg);
+    opacity: 1;
+  }
+  94% {
+    right: 95%;
+    top: 18%;
+    -webkit-transform: rotate(90deg);
+    opacity: 1;
+  }
+  98% {
+    right: 95%;
+    top: 14%;
+    -webkit-transform: rotate(90deg);
+    opacity: 1;
+  }
+  100% {
+    right: 95%;
+    top: 11%;
+    -webkit-transform: rotate(90deg);
+    opacity: 0;
+  }
+}
+
+@-webkit-keyframes myfirstani1-3 /* Safari 和 Chrome */ {
+  0% {
+    right: 41.5%;
+    top: 0%;
+    -webkit-transform: rotate(-90deg);
+    opacity: 1;
+  }
+  5% {
+    right: 41.5%;
+    top: 16%;
+    -webkit-transform: rotate(-90deg);
+    opacity: 1;
+  }
+  8% {
+    right: 43.5%;
+    top: 20%;
+    -webkit-transform: rotate(0deg);
+    opacity: 1;
+  }
+
+  92% {
+    right: 94%;
+    top: 20%;
+    -webkit-transform: rotate(0deg);
+    opacity: 1;
+  }
+  94% {
+    right: 95%;
+    top: 18%;
+    -webkit-transform: rotate(90deg);
+    opacity: 1;
+  }
+  98% {
+    right: 95%;
+    top: 14%;
+    -webkit-transform: rotate(90deg);
+    opacity: 1;
+  }
+  100% {
+    right: 95%;
+    top: 11%;
+    -webkit-transform: rotate(90deg);
+    opacity: 0;
+  }
+}
+
+.arrowpic2-3 {
+  position: relative;
+  animation-delay: -18s;
+  animation: myfirstani1-3 20s infinite linear;
+  /* Safari 和 Chrome */
+  -webkit-animation: myfirstani1-3 20s infinite linear;
+  -webkit-animation-delay: -18s;
+}
+
+.arrowpic3-3 {
+  position: relative;
+  animation-delay: -16s;
+  animation: myfirstani1-3 20s infinite linear;
+  /* Safari 和 Chrome */
+  -webkit-animation: myfirstani1-3 20s infinite linear;
+  -webkit-animation-delay: -16s;
+}
+
+.arrowpic4-3 {
+  position: relative;
+  animation-delay: -14s;
+  animation: myfirstani1-3 20s infinite linear;
+  /* Safari 和 Chrome */
+  -webkit-animation: myfirstani1-3 20s infinite linear;
+  -webkit-animation-delay: -14s;
+}
+
+.arrowpic5-3 {
+  position: relative;
+  animation-delay: -12s;
+  animation: myfirstani1-3 20s infinite linear;
+  /* Safari 和 Chrome */
+  -webkit-animation: myfirstani1-3 20s infinite linear;
+  -webkit-animation-delay: -12s;
+}
+
+.arrowpic6-3 {
+  position: relative;
+  animation-delay: -10s;
+  animation: myfirstani1-3 20s infinite linear;
+  /* Safari 和 Chrome */
+  -webkit-animation: myfirstani1-3 20s infinite linear;
+  -webkit-animation-delay: -10s;
+}
+
+.arrowpic7-3 {
+  position: relative;
+  animation-delay: -8s;
+  animation: myfirstani1-3 20s infinite linear;
+  /* Safari 和 Chrome */
+  -webkit-animation: myfirstani1-3 20s infinite linear;
+  -webkit-animation-delay: -8s;
+}
+
+.arrowpic8-3 {
+  position: relative;
+  animation-delay: -6s;
+  animation: myfirstani1-3 20s infinite linear;
+  /* Safari 和 Chrome */
+  -webkit-animation: myfirstani1-3 20s infinite linear;
+  -webkit-animation-delay: -6s;
+}
+
+.arrowpic9-3 {
+  position: relative;
+  animation-delay: -4s;
+  animation: myfirstani1-3 20s infinite linear;
+  /* Safari 和 Chrome */
+  -webkit-animation: myfirstani1-3 20s infinite linear;
+  -webkit-animation-delay: -4s;
+}
+
+.arrowpic10-3 {
+  position: relative;
+  animation-delay: -2s;
+  animation: myfirstani1-3 20s infinite linear;
+  /* Safari 和 Chrome */
+  -webkit-animation: myfirstani1-3 20s infinite linear;
+  -webkit-animation-delay: -2s;
+}
+
+.arrowpic1-4 {
+  position: relative;
+  animation: myfirstani1-4 20s infinite linear;
+  /* Safari 和 Chrome */
+  -webkit-animation: myfirstani1-4 20s infinite linear;
+}
+
+@keyframes myfirstani1-4 {
+  0% {
+    right: 41.5%;
+    top: 67%;
+    -webkit-transform: rotate(-90deg);
+    opacity: 1;
+  }
+  6% {
+    right: 41.5%;
+    top: 81%;
+    -webkit-transform: rotate(-90deg);
+    opacity: 1;
+  }
+  8% {
+    right: 43.5%;
+    top: 84%;
+    -webkit-transform: rotate(0deg);
+    opacity: 1;
+  }
+
+  92% {
+    right: 94%;
+    top: 84%;
+    -webkit-transform: rotate(0deg);
+    opacity: 1;
+  }
+  94% {
+    right: 95%;
+    top: 82%;
+    -webkit-transform: rotate(90deg);
+    opacity: 1;
+  }
+  98% {
+    right: 95%;
+    top: 78%;
+    -webkit-transform: rotate(90deg);
+    opacity: 1;
+  }
+  100% {
+    right: 95%;
+    top: 75%;
+    -webkit-transform: rotate(90deg);
+    opacity: 0;
+  }
+}
+
+@-webkit-keyframes myfirstani1-4 /* Safari 和 Chrome */ {
+  0% {
+    right: 41.5%;
+    top: 67%;
+    -webkit-transform: rotate(-90deg);
+    opacity: 1;
+  }
+  6% {
+    right: 41.5%;
+    top: 81%;
+    -webkit-transform: rotate(-90deg);
+    opacity: 1;
+  }
+  8% {
+    right: 43.5%;
+    top: 84%;
+    -webkit-transform: rotate(0deg);
+    opacity: 1;
+  }
+  98% {
+    right: 97%;
+    top: 84%;
+    -webkit-transform: rotate(0deg);
+    opacity: 1;
+  }
+  100% {
+    right: 98%;
+    top: 84%;
+    -webkit-transform: rotate(0deg);
+    opacity: 0;
+  }
+}
+
+.arrowpic2-4 {
+  position: relative;
+  animation-delay: -18s;
+  animation: myfirstani1-4 20s infinite linear;
+  /* Safari 和 Chrome */
+  -webkit-animation: myfirstani1-4 20s infinite linear;
+  -webkit-animation-delay: -18s;
+}
+
+.arrowpic3-4 {
+  position: relative;
+  animation-delay: -16s;
+  animation: myfirstani1-4 20s infinite linear;
+  /* Safari 和 Chrome */
+  -webkit-animation: myfirstani1-4 20s infinite linear;
+  -webkit-animation-delay: -16s;
+}
+
+.arrowpic4-4 {
+  position: relative;
+  animation-delay: -14s;
+  animation: myfirstani1-4 20s infinite linear;
+  /* Safari 和 Chrome */
+  -webkit-animation: myfirstani1-4 20s infinite linear;
+  -webkit-animation-delay: -14s;
+}
+
+.arrowpic5-4 {
+  position: relative;
+  animation-delay: -12s;
+  animation: myfirstani1-4 20s infinite linear;
+  /* Safari 和 Chrome */
+  -webkit-animation: myfirstani1-4 20s infinite linear;
+  -webkit-animation-delay: -12s;
+}
+
+.arrowpic6-4 {
+  position: relative;
+  animation-delay: -10s;
+  animation: myfirstani1-4 20s infinite linear;
+  /* Safari 和 Chrome */
+  -webkit-animation: myfirstani1-4 20s infinite linear;
+  -webkit-animation-delay: -10s;
+}
+
+.arrowpic7-4 {
+  position: relative;
+  animation-delay: -8s;
+  animation: myfirstani1-4 20s infinite linear;
+  /* Safari 和 Chrome */
+  -webkit-animation: myfirstani1-4 20s infinite linear;
+  -webkit-animation-delay: -8s;
+}
+
+.arrowpic8-4 {
+  position: relative;
+  animation-delay: -6s;
+  animation: myfirstani1-4 20s infinite linear;
+  /* Safari 和 Chrome */
+  -webkit-animation: myfirstani1-4 20s infinite linear;
+  -webkit-animation-delay: -6s;
+}
+
+.arrowpic9-4 {
+  position: relative;
+  animation-delay: -4s;
+  animation: myfirstani1-4 20s infinite linear;
+  /* Safari 和 Chrome */
+  -webkit-animation: myfirstani1-4 20s infinite linear;
+  -webkit-animation-delay: -4s;
+}
+
+.arrowpic10-4 {
+  position: relative;
+  animation-delay: -2s;
+  animation: myfirstani1-4 20s infinite linear;
+  /* Safari 和 Chrome */
+  -webkit-animation: myfirstani1-4 20s infinite linear;
+  -webkit-animation-delay: -2s;
+}
+
+.reverse-arrowpic1 {
+  position: relative;
+  animation: reverse-myfirstani1 20s infinite linear;
+  /* Safari 和 Chrome */
+  -webkit-animation: reverse-myfirstani1 20s infinite linear;
+}
+
+@keyframes reverse-myfirstani1 {
+  0% {
+    right: 88%;
+    top: 0%;
+    -webkit-transform: rotate(270deg);
+    opacity: 0;
+  }
+  2% {
+    right: 88%;
+    top: 10%;
+    -webkit-transform: rotate(270deg);
+    opacity: 1;
+  }
+  6% {
+    right: 88%;
+    top: 18%;
+    -webkit-transform: rotate(180deg);
+    opacity: 1;
+  }
+  8% {
+    right: 86%;
+    top: 20%;
+    -webkit-transform: rotate(180deg);
+    opacity: 1;
+  }
+  68% {
+    right: 24%;
+    top: 20%;
+    -webkit-transform: rotate(180deg);
+    opacity: 1;
+  }
+  70% {
+    right: 22%;
+    top: 22%;
+    -webkit-transform: rotate(210deg);
+    opacity: 1;
+  }
+  80% {
+    right: 14%;
+    top: 46%;
+    -webkit-transform: rotate(210deg);
+    opacity: 1;
+  }
+  82% {
+    right: 12%;
+    top: 48%;
+    -webkit-transform: rotate(180deg);
+    opacity: 1;
+  }
+  100% {
+    right: 0%;
+    top: 48%;
+    -webkit-transform: rotate(180deg);
+    opacity: 1;
+  }
+}
+
+@-webkit-keyframes reverse-myfirstani1 /* Safari 和 Chrome */ {
+  0% {
+    right: 88%;
+    top: 0%;
+    -webkit-transform: rotate(270deg);
+    opacity: 0;
+  }
+  2% {
+    right: 88%;
+    top: 10%;
+    -webkit-transform: rotate(270deg);
+    opacity: 1;
+  }
+  6% {
+    right: 88%;
+    top: 18%;
+    -webkit-transform: rotate(180deg);
+    opacity: 1;
+  }
+  8% {
+    right: 86%;
+    top: 20%;
+    -webkit-transform: rotate(180deg);
+    opacity: 1;
+  }
+  68% {
+    right: 24%;
+    top: 20%;
+    -webkit-transform: rotate(180deg);
+    opacity: 1;
+  }
+  70% {
+    right: 22%;
+    top: 22%;
+    -webkit-transform: rotate(210deg);
+    opacity: 1;
+  }
+  80% {
+    right: 14%;
+    top: 46%;
+    -webkit-transform: rotate(210deg);
+    opacity: 1;
+  }
+  82% {
+    right: 12%;
+    top: 48%;
+    -webkit-transform: rotate(180deg);
+    opacity: 1;
+  }
+  100% {
+    right: 0%;
+    top: 48%;
+    -webkit-transform: rotate(180deg);
+    opacity: 1;
+  }
+}
+
+.reverse-arrowpic2 {
+  position: relative;
+  animation-delay: -18s;
+  animation: reverse-myfirstani1 20s infinite linear;
+  /* Safari 和 Chrome */
+  -webkit-animation: reverse-myfirstani1 20s infinite linear;
+  -webkit-animation-delay: -18s;
+}
+
+.reverse-arrowpic3 {
+  position: relative;
+  animation-delay: -16s;
+  animation: reverse-myfirstani1 20s infinite linear;
+  /* Safari 和 Chrome */
+  -webkit-animation: reverse-myfirstani1 20s infinite linear;
+  -webkit-animation-delay: -16s;
+}
+
+.reverse-arrowpic4 {
+  position: relative;
+  animation-delay: -14s;
+  animation: reverse-myfirstani1 20s infinite linear;
+  /* Safari 和 Chrome */
+  -webkit-animation: reverse-myfirstani1 20s infinite linear;
+  -webkit-animation-delay: -14s;
+}
+
+.reverse-arrowpic5 {
+  position: relative;
+  animation-delay: -12s;
+  animation: reverse-myfirstani1 20s infinite linear;
+  /* Safari 和 Chrome */
+  -webkit-animation: reverse-myfirstani1 20s infinite linear;
+  -webkit-animation-delay: -12s;
+}
+
+.reverse-arrowpic6 {
+  position: relative;
+  animation-delay: -10s;
+  animation: reverse-myfirstani1 20s infinite linear;
+  /* Safari 和 Chrome */
+  -webkit-animation: reverse-myfirstani1 20s infinite linear;
+  -webkit-animation-delay: -10s;
+}
+
+.reverse-arrowpic7 {
+  position: relative;
+  animation-delay: -8s;
+  animation: reverse-myfirstani1 20s infinite linear;
+  /* Safari 和 Chrome */
+  -webkit-animation: reverse-myfirstani1 20s infinite linear;
+  -webkit-animation-delay: -8s;
+}
+
+.reverse-arrowpic8 {
+  position: relative;
+  animation-delay: -6s;
+  animation: reverse-myfirstani1 20s infinite linear;
+  /* Safari 和 Chrome */
+  -webkit-animation: reverse-myfirstani1 20s infinite linear;
+  -webkit-animation-delay: -6s;
+}
+
+.reverse-arrowpic9 {
+  position: relative;
+  animation-delay: -4s;
+  animation: reverse-myfirstani1 20s infinite linear;
+  /* Safari 和 Chrome */
+  -webkit-animation: reverse-myfirstani1 20s infinite linear;
+  -webkit-animation-delay: -4s;
+}
+
+.reverse-arrowpic10 {
+  position: relative;
+  animation-delay: -2s;
+  animation: reverse-myfirstani1 20s infinite linear;
+  /* Safari 和 Chrome */
+  -webkit-animation: reverse-myfirstani1 20s infinite linear;
+  -webkit-animation-delay: -2s;
+}
+.reverse-arrowpic1-2 {
+  position: relative;
+  animation: reverse-myfirstani1-2 20s infinite linear;
+  /* Safari 和 Chrome */
+  -webkit-animation: reverse-myfirstani1-2 20s infinite linear;
+}
+
+@keyframes reverse-myfirstani1-2 {
+  0% {
+    right: 95%;
+    top: 45%;
+    -webkit-transform: rotate(270deg);
+    opacity: 0;
+  }
+  2% {
+    right: 95%;
+    top: 58%;
+    -webkit-transform: rotate(270deg);
+    opacity: 1;
+  }
+  6% {
+    right: 95%;
+    top: 67%;
+    -webkit-transform: rotate(270deg);
+    opacity: 1;
+  }
+  8% {
+    right: 94%;
+    top: 69%;
+    -webkit-transform: rotate(180deg);
+    opacity: 1;
+  }
+  69% {
+    right: 24%;
+    top: 69%;
+    -webkit-transform: rotate(180deg);
+    opacity: 1;
+  }
+  71% {
+    right: 22%;
+    top: 68%;
+    -webkit-transform: rotate(150deg);
+    opacity: 1;
+  }
+  83% {
+    right: 14%;
+    top: 50%;
+    -webkit-transform: rotate(150deg);
+    opacity: 1;
+  }
+  85% {
+    right: 12%;
+    top: 48%;
+    -webkit-transform: rotate(180deg);
+    opacity: 1;
+  }
+  100% {
+    right: 0%;
+    top: 48%;
+    -webkit-transform: rotate(180deg);
+    opacity: 1;
+  }
+}
+
+@-webkit-keyframes reverse-myfirstani1-2 /* Safari 和 Chrome */ {
+  0% {
+    right: 95%;
+    top: 45%;
+    -webkit-transform: rotate(270deg);
+    opacity: 0;
+  }
+  2% {
+    right: 95%;
+    top: 58%;
+    -webkit-transform: rotate(270deg);
+    opacity: 1;
+  }
+  6% {
+    right: 95%;
+    top: 67%;
+    -webkit-transform: rotate(270deg);
+    opacity: 1;
+  }
+  8% {
+    right: 94%;
+    top: 69%;
+    -webkit-transform: rotate(180deg);
+    opacity: 1;
+  }
+  69% {
+    right: 24%;
+    top: 69%;
+    -webkit-transform: rotate(180deg);
+    opacity: 1;
+  }
+  71% {
+    right: 22%;
+    top: 68%;
+    -webkit-transform: rotate(150deg);
+    opacity: 1;
+  }
+  83% {
+    right: 14%;
+    top: 50%;
+    -webkit-transform: rotate(150deg);
+    opacity: 1;
+  }
+  85% {
+    right: 12%;
+    top: 48%;
+    -webkit-transform: rotate(180deg);
+    opacity: 1;
+  }
+  100% {
+    right: 0%;
+    top: 48%;
+    -webkit-transform: rotate(180deg);
+    opacity: 1;
+  }
+}
+
+.reverse-arrowpic2-2 {
+  position: relative;
+  animation-delay: -18s;
+  animation: reverse-myfirstani1-2 20s infinite linear;
+  /* Safari 和 Chrome */
+  -webkit-animation: reverse-myfirstani1-2 20s infinite linear;
+  -webkit-animation-delay: -18s;
+}
+
+.reverse-arrowpic3-2 {
+  position: relative;
+  animation-delay: -16s;
+  animation: reverse-myfirstani1-2 20s infinite linear;
+  /* Safari 和 Chrome */
+  -webkit-animation: reverse-myfirstani1-2 20s infinite linear;
+  -webkit-animation-delay: -16s;
+}
+
+.reverse-arrowpic4-2 {
+  position: relative;
+  animation-delay: -14s;
+  animation: reverse-myfirstani1-2 20s infinite linear;
+  /* Safari 和 Chrome */
+  -webkit-animation: reverse-myfirstani1-2 20s infinite linear;
+  -webkit-animation-delay: -14s;
+}
+
+.reverse-arrowpic5-2 {
+  position: relative;
+  animation-delay: -12s;
+  animation: reverse-myfirstani1-2 20s infinite linear;
+  /* Safari 和 Chrome */
+  -webkit-animation: reverse-myfirstani1-2 20s infinite linear;
+  -webkit-animation-delay: -12s;
+}
+
+.reverse-arrowpic6-2 {
+  position: relative;
+  animation-delay: -10s;
+  animation: reverse-myfirstani1-2 20s infinite linear;
+  /* Safari 和 Chrome */
+  -webkit-animation: reverse-myfirstani1-2 20s infinite linear;
+  -webkit-animation-delay: -10s;
+}
+
+.reverse-arrowpic7-2 {
+  position: relative;
+  animation-delay: -8s;
+  animation: reverse-myfirstani1-2 20s infinite linear;
+  /* Safari 和 Chrome */
+  -webkit-animation: reverse-myfirstani1-2 20s infinite linear;
+  -webkit-animation-delay: -8s;
+}
+
+.reverse-arrowpic8-2 {
+  position: relative;
+  animation-delay: -6s;
+  animation: reverse-myfirstani1-2 20s infinite linear;
+  /* Safari 和 Chrome */
+  -webkit-animation: reverse-myfirstani1-2 20s infinite linear;
+  -webkit-animation-delay: -6s;
+}
+
+.reverse-arrowpic9-2 {
+  position: relative;
+  animation-delay: -4s;
+  animation: reverse-myfirstani1-2 20s infinite linear;
+  /* Safari 和 Chrome */
+  -webkit-animation: reverse-myfirstani1-2 20s infinite linear;
+  -webkit-animation-delay: -4s;
+}
+
+.reverse-arrowpic10-2 {
+  position: relative;
+  animation-delay: -2s;
+  animation: reverse-myfirstani1-2 20s infinite linear;
+  /* Safari 和 Chrome */
+  -webkit-animation: reverse-myfirstani1-2 20s infinite linear;
+  -webkit-animation-delay: -2s;
+}
+
+.reverse-arrowpic1-3 {
+  position: relative;
+  animation: reverse-myfirstani1-3 20s infinite linear;
+  /* Safari 和 Chrome */
+  -webkit-animation: reverse-myfirstani1-3 20s infinite linear;
+}
+
+@keyframes reverse-myfirstani1-3 {
+  0% {
+    right: 95%;
+    top: 11%;
+    -webkit-transform: rotate(270deg);
+    opacity: 0;
+  }
+  2% {
+    right: 95%;
+    top: 14%;
+    -webkit-transform: rotate(270deg);
+    opacity: 1;
+  }
+  6% {
+    right: 95%;
+    top: 18%;
+    -webkit-transform: rotate(270deg);
+    opacity: 1;
+  }
+  8% {
+    right: 94%;
+    top: 20%;
+    -webkit-transform: rotate(180deg);
+    opacity: 1;
+  }
+  92% {
+    right: 43.5%;
+    top: 20%;
+    -webkit-transform: rotate(180deg);
+    opacity: 1;
+  }
+  95% {
+    right: 41.5%;
+    top: 16%;
+    -webkit-transform: rotate(90deg);
+    opacity: 1;
+  }
+  100% {
+    right: 41.5%;
+    top: 0%;
+    -webkit-transform: rotate(90deg);
+    opacity: 1;
+  }
+}
+
+@-webkit-keyframes reverse-myfirstani1-3 /* Safari 和 Chrome */ {
+  0% {
+    right: 95%;
+    top: 11%;
+    -webkit-transform: rotate(270deg);
+    opacity: 0;
+  }
+  2% {
+    right: 95%;
+    top: 14%;
+    -webkit-transform: rotate(270deg);
+    opacity: 1;
+  }
+  6% {
+    right: 95%;
+    top: 18%;
+    -webkit-transform: rotate(270deg);
+    opacity: 1;
+  }
+  8% {
+    right: 94%;
+    top: 20%;
+    -webkit-transform: rotate(180deg);
+    opacity: 1;
+  }
+  92% {
+    right: 43.5%;
+    top: 20%;
+    -webkit-transform: rotate(180deg);
+    opacity: 1;
+  }
+  95% {
+    right: 41.5%;
+    top: 16%;
+    -webkit-transform: rotate(90deg);
+    opacity: 1;
+  }
+  100% {
+    right: 41.5%;
+    top: 0%;
+    -webkit-transform: rotate(90deg);
+    opacity: 1;
+  }
+}
+
+.reverse-arrowpic2-3 {
+  position: relative;
+  animation-delay: -18s;
+  animation: reverse-myfirstani1-3 20s infinite linear;
+  /* Safari 和 Chrome */
+  -webkit-animation: reverse-myfirstani1-3 20s infinite linear;
+  -webkit-animation-delay: -18s;
+}
+
+.reverse-arrowpic3-3 {
+  position: relative;
+  animation-delay: -16s;
+  animation: reverse-myfirstani1-3 20s infinite linear;
+  /* Safari 和 Chrome */
+  -webkit-animation: reverse-myfirstani1-3 20s infinite linear;
+  -webkit-animation-delay: -16s;
+}
+
+.reverse-arrowpic4-3 {
+  position: relative;
+  animation-delay: -14s;
+  animation: reverse-myfirstani1-3 20s infinite linear;
+  /* Safari 和 Chrome */
+  -webkit-animation: reverse-myfirstani1-3 20s infinite linear;
+  -webkit-animation-delay: -14s;
+}
+
+.reverse-arrowpic5-3 {
+  position: relative;
+  animation-delay: -12s;
+  animation: reverse-myfirstani1-3 20s infinite linear;
+  /* Safari 和 Chrome */
+  -webkit-animation: reverse-myfirstani1-3 20s infinite linear;
+  -webkit-animation-delay: -12s;
+}
+
+.reverse-arrowpic6-3 {
+  position: relative;
+  animation-delay: -10s;
+  animation: reverse-myfirstani1-3 20s infinite linear;
+  /* Safari 和 Chrome */
+  -webkit-animation: reverse-myfirstani1-3 20s infinite linear;
+  -webkit-animation-delay: -10s;
+}
+
+.reverse-arrowpic7-3 {
+  position: relative;
+  animation-delay: -8s;
+  animation: reverse-myfirstani1-3 20s infinite linear;
+  /* Safari 和 Chrome */
+  -webkit-animation: reverse-myfirstani1-3 20s infinite linear;
+  -webkit-animation-delay: -8s;
+}
+
+.reverse-arrowpic8-3 {
+  position: relative;
+  animation-delay: -6s;
+  animation: reverse-myfirstani1-3 20s infinite linear;
+  /* Safari 和 Chrome */
+  -webkit-animation: reverse-myfirstani1-3 20s infinite linear;
+  -webkit-animation-delay: -6s;
+}
+
+.reverse-arrowpic9-3 {
+  position: relative;
+  animation-delay: -4s;
+  animation: reverse-myfirstani1-3 20s infinite linear;
+  /* Safari 和 Chrome */
+  -webkit-animation: reverse-myfirstani1-3 20s infinite linear;
+  -webkit-animation-delay: -4s;
+}
+
+.reverse-arrowpic10-3 {
+  position: relative;
+  animation-delay: -2s;
+  animation: reverse-myfirstani1-3 20s infinite linear;
+  /* Safari 和 Chrome */
+  -webkit-animation: reverse-myfirstani1-3 20s infinite linear;
+  -webkit-animation-delay: -2s;
+}
+
+.reverse-arrowpic1-4 {
+  position: relative;
+  animation: reverse-myfirstani1-4 20s infinite linear;
+  /* Safari 和 Chrome */
+  -webkit-animation: reverse-myfirstani1-4 20s infinite linear;
+}
+
+@keyframes reverse-myfirstani1-4 {
+  0% {
+    right: 95%;
+    top: 75%;
+    -webkit-transform: rotate(270deg);
+    opacity: 0;
+  }
+  2% {
+    right: 95%;
+    top: 78%;
+    -webkit-transform: rotate(270deg);
+    opacity: 1;
+  }
+  6% {
+    right: 95%;
+    top: 82%;
+    -webkit-transform: rotate(270deg);
+    opacity: 1;
+  }
+  8% {
+    right: 94%;
+    top: 84%;
+    -webkit-transform: rotate(180deg);
+    opacity: 1;
+  }
+  92% {
+    right: 43.5%;
+    top: 84%;
+    -webkit-transform: rotate(180deg);
+    opacity: 1;
+  }
+  94% {
+    right: 41.5%;
+    top: 81%;
+    -webkit-transform: rotate(90deg);
+    opacity: 1;
+  }
+  100% {
+    right: 41.5%;
+    top: 67%;
+    -webkit-transform: rotate(90deg);
+    opacity: 1;
+  }
+}
+
+@-webkit-keyframes reverse-myfirstani1-4 /* Safari 和 Chrome */ {
+  0% {
+    right: 95%;
+    top: 75%;
+    -webkit-transform: rotate(270deg);
+    opacity: 0;
+  }
+  2% {
+    right: 95%;
+    top: 78%;
+    -webkit-transform: rotate(270deg);
+    opacity: 1;
+  }
+  6% {
+    right: 95%;
+    top: 82%;
+    -webkit-transform: rotate(270deg);
+    opacity: 1;
+  }
+  8% {
+    right: 94%;
+    top: 84%;
+    -webkit-transform: rotate(180deg);
+    opacity: 1;
+  }
+  92% {
+    right: 43.5%;
+    top: 84%;
+    -webkit-transform: rotate(180deg);
+    opacity: 1;
+  }
+  94% {
+    right: 41.5%;
+    top: 81%;
+    -webkit-transform: rotate(90deg);
+    opacity: 1;
+  }
+  100% {
+    right: 41.5%;
+    top: 67%;
+    -webkit-transform: rotate(90deg);
+    opacity: 1;
+  }
+}
+
+.reverse-arrowpic2-4 {
+  position: relative;
+  animation-delay: -18s;
+  animation: reverse-myfirstani1-4 20s infinite linear;
+  /* Safari 和 Chrome */
+  -webkit-animation: reverse-myfirstani1-4 20s infinite linear;
+  -webkit-animation-delay: -18s;
+}
+
+.reverse-arrowpic3-4 {
+  position: relative;
+  animation-delay: -16s;
+  animation: reverse-myfirstani1-4 20s infinite linear;
+  /* Safari 和 Chrome */
+  -webkit-animation: reverse-myfirstani1-4 20s infinite linear;
+  -webkit-animation-delay: -16s;
+}
+
+.reverse-arrowpic4-4 {
+  position: relative;
+  animation-delay: -14s;
+  animation: reverse-myfirstani1-4 20s infinite linear;
+  /* Safari 和 Chrome */
+  -webkit-animation: reverse-myfirstani1-4 20s infinite linear;
+  -webkit-animation-delay: -14s;
+}
+
+.reverse-arrowpic5-4 {
+  position: relative;
+  animation-delay: -12s;
+  animation: reverse-myfirstani1-4 20s infinite linear;
+  /* Safari 和 Chrome */
+  -webkit-animation: reverse-myfirstani1-4 20s infinite linear;
+  -webkit-animation-delay: -12s;
+}
+
+.reverse-arrowpic6-4 {
+  position: relative;
+  animation-delay: -10s;
+  animation: reverse-myfirstani1-4 20s infinite linear;
+  /* Safari 和 Chrome */
+  -webkit-animation: reverse-myfirstani1-4 20s infinite linear;
+  -webkit-animation-delay: -10s;
+}
+
+.reverse-arrowpic7-4 {
+  position: relative;
+  animation-delay: -8s;
+  animation: reverse-myfirstani1-4 20s infinite linear;
+  /* Safari 和 Chrome */
+  -webkit-animation: reverse-myfirstani1-4 20s infinite linear;
+  -webkit-animation-delay: -8s;
+}
+
+.reverse-arrowpic8-4 {
+  position: relative;
+  animation-delay: -6s;
+  animation: reverse-myfirstani1-4 20s infinite linear;
+  /* Safari 和 Chrome */
+  -webkit-animation: reverse-myfirstani1-4 20s infinite linear;
+  -webkit-animation-delay: -6s;
+}
+
+.reverse-arrowpic9-4 {
+  position: relative;
+  animation-delay: -4s;
+  animation: reverse-myfirstani1-4 20s infinite linear;
+  /* Safari 和 Chrome */
+  -webkit-animation: reverse-myfirstani1-4 20s infinite linear;
+  -webkit-animation-delay: -4s;
+}
+
+.reverse-arrowpic10-4 {
+  position: relative;
+  animation-delay: -2s;
+  animation: reverse-myfirstani1-4 20s infinite linear;
+  /* Safari 和 Chrome */
+  -webkit-animation: reverse-myfirstani1-4 20s infinite linear;
+  -webkit-animation-delay: -2s;
+}
+</style>

pages/home/home.vue

@@ -78,7 +78,8 @@
                         showitem.monitorcode != 'strinstallpos' &&
                         showitem.monitorcode != 'netStatus' &&
                         showitem.monitorcode != 'warnFlag' &&
-                        showitem.monitorcode != 'readTime'
+                        showitem.monitorcode != 'readTime' &&
+                        showitem.monitorcode != ''
                       "
                     >
                       <view
@@ -93,10 +94,7 @@
                         "
                       >
                         <view
-                          v-if="
-                            showitem.datatype == 1 &&
-                            showitem.monitorcode == 'doorUse'
-                          "
+                          v-if="showitem.monitorcode == 'doorUse'"
                           class="demo-layout bg-purple-light"
                           style="
                             margin-top: 10rpx;
@@ -114,24 +112,7 @@
                           }}
                         </view>
                         <view
-                          v-else-if="showitem.datatype == 1"
-                          class="demo-layout bg-purple-light"
-                          style="
-                            margin-top: 10rpx;
-                            color: #3787fe;
-                            font-size: 30rpx;
-                            margin-top: 20rpx;
-                          "
-                        >
-                          {{
-                            item[showitem.monitorcode] == null ||
-                            item[showitem.monitorcode] == ""
-                              ? "-"
-                              : item[showitem.monitorcode]
-                          }}
-                        </view>
-                        <view
-                          v-else-if="showitem.datatype == 2"
+                          v-else
                           class="demo-layout bg-purple-light"
                           style="
                             color: #3787fe;
@@ -146,7 +127,6 @@
                               : item.readData[showitem.monitorcode]
                           }}
                         </view>
-
                         <view
                           class="demo-layout bg-purple-light"
                           style="
@@ -190,28 +170,7 @@
                         "
                       >
                         <view
-                          v-if="
-                            showitem.datatype == 1 &&
-                            showitem.monitorcode == 'doorUse'
-                          "
-                          class="demo-layout bg-purple-light"
-                          style="
-                            margin-top: 10rpx;
-                            color: #3787fe;
-                            font-size: 30rpx;
-                            margin-top: 20rpx;
-                          "
-                        >
-                          {{
-                            item[showitem.monitorcode] == "2"
-                              ? "行人"
-                              : item[showitem.monitorcode] == "1"
-                              ? "行车"
-                              : "-"
-                          }}
-                        </view>
-                        <view
-                          v-else-if="showitem.datatype == 1"
+                          v-if="showitem.datatype == 1"
                           class="demo-layout bg-purple-light"
                           style="
                             margin-top: 10rpx;
@@ -314,28 +273,7 @@
                         "
                       >
                         <view
-                          v-if="
-                            showitem.datatype == 1 &&
-                            showitem.monitorcode == 'doorUse'
-                          "
-                          class="demo-layout bg-purple-light"
-                          style="
-                            margin-top: 10rpx;
-                            color: #3787fe;
-                            font-size: 30rpx;
-                            margin-top: 20rpx;
-                          "
-                        >
-                          {{
-                            item[showitem.monitorcode] == "2"
-                              ? "行人"
-                              : item[showitem.monitorcode] == "1"
-                              ? "行车"
-                              : "-"
-                          }}
-                        </view>
-                        <view
-                          v-else-if="showitem.datatype == 1"
+                          v-if="showitem.datatype == 1"
                           class="demo-layout bg-purple-light"
                           style="
                             margin-top: 10rpx;
@@ -430,14 +368,18 @@ import { computed } from "vue";
 export default {
   data() {
     return {
+      deviceShow1: false,
       menushow: false,
-      TabCur: "gate",
+      TabCur: "",
       curlist: [],
       deviceList: {},
+      List: [],
       colums: {},
       typeList: [], //详情页展示数据
       deviceShowList: [], //设备展示字段
       isWarnVisible: false,
+      deviceType1: "",
+      devices1: [],
     };
   },
   props: ["showColum", "deviceType"],
@@ -465,12 +407,9 @@ export default {
   },
   created() {
     this.colums = this.showColum;
-    const key = this.TabCur + "_monitor";
-    this.deviceShowList = this.colums[key];
-    this.loadData("gate");
+    // this.deviceShowList = this.colums[key];
   },
-  async mounted() {
-    await this.loadData(this.TabCur);
+  mounted() {
     this.startTimer();
   },
   methods: {
@@ -530,7 +469,22 @@ export default {
                 } else {
                   item.readData.midGateOpen = "关闭";
                 }
+                this.deviceType1 = item.deviceType;
+                let original = this.TabCur;
+                let newName = original.startsWith("sys_")
+                  ? original.substring(4)
+                  : original;
+                const key = newName + "_monitor";
+                const key1 = this.deviceType1 + "_monitor";
+                if (this.showColum?.[key1]?.length > 0) {
+                  this.deviceShowList = this.showColum[key1];
+                } else {
+                  this.deviceShowList = this.showColum[key] ?? [];
+                }
               });
+              if (this.TabCur == "sys_pulping") {
+                this.loadNewData(this.curlist[0].deviceID);
+              }
             } else {
               resolve(response);
             }
@@ -541,6 +495,32 @@ export default {
           });
       });
     },
+    loadNewData(ID) {
+      return new Promise((resolve, reject) => {
+        api
+          .getDeviceMonitor({
+            devicetype: "sys",
+            systemID: ID,
+          })
+          .then((response) => {
+            if (response.data.code == 200) {
+              this.curlist = [];
+              this.List = response.data.result.msgTxt;
+              this.List.forEach((item) => {
+                if (item.type === "pulping_auto") {
+                  this.curlist.push(item.datalist[0]);
+                }
+              });
+            } else {
+              resolve(response);
+            }
+          })
+          .catch((error) => {
+            // console.log("catch===>response", response);
+            reject(error);
+          });
+      });
+    },
     devicemenuShow(e) {
       this.menushow = !this.menushow;
     },
@@ -548,7 +528,7 @@ export default {
     getShowList(type) {
       const params = {
         devicekind: type,
-        pagetype: "detail",
+        pagetype: "monitor",
         pageNo: 1,
         pageSize: 100,
       };
@@ -575,14 +555,13 @@ export default {
         type: this.TabCur,
       };
       const reqparams = uni.$u.queryParams(reqData);
-      this.getShowList(this.TabCur).then(() => {
-        if (this.typeList.length > 0) {
-          this.$destroy();
-          uni.navigateTo({
-            url: `/pages/home/detail/autodoor/autodoor${reqparams}`,
-          });
-        }
-      });
+      // const key = this.deviceType1 + "_monitor";
+      if (this.deviceShowList.length > 0) {
+        this.$destroy();
+        uni.navigateTo({
+          url: `/pages/home/detail/autodoor/autodoor${reqparams}`,
+        });
+      }
       //   this.$destroy();
       //   uni.navigateTo({
       //     url: `/pages/home/detail/autodoor/autodoor?id=${params.deviceID}&name=${params.strinstallpos}&type=${this.TabCur}`,

pages/index/index.vue

@@ -25,14 +25,14 @@
         background: '#000',
       }"
     ></iframe>
-   <Device
-     v-show="PageCur == 'device'"
-     :style="{ marginTop: wvTop + 20 + 'px' }"
-   ></Device>
-   <filecenter :cur="PageCur" v-show="PageCur == 'filecenter'"></filecenter>
-   <warndata v-show="PageCur == 'warndata'" :cur="PageCur"></warndata>
-   <gasreport :cur="PageCur" v-show="PageCur == 'gasreport'"></gasreport>
-   <user :cur="PageCur" v-show="PageCur == 'user'"></user>
+    <Device
+      v-show="PageCur == 'device'"
+      :style="{ marginTop: wvTop + 20 + 'px' }"
+    ></Device>
+    <filecenter :cur="PageCur" v-show="PageCur == 'filecenter'"></filecenter>
+    <warndata v-show="PageCur == 'warndata'" :cur="PageCur"></warndata>
+    <gasreport :cur="PageCur" v-show="PageCur == 'gasreport'"></gasreport>
+    <user :cur="PageCur" v-show="PageCur == 'user'"></user>
     <u-tabbar
       :value="PageCur"
       @change="NavChange"
@@ -40,27 +40,31 @@
       :placeholder="true"
       :safeAreaInsetBottom="true"
     >
-     <u-tabbar-item v-show="menus.device != null"
-       text="设备中心"
-       name="device"
-       icon="calendar"
-     ></u-tabbar-item>
-     <u-tabbar-item v-show="menus.warndata != null"
-       text="预警分析"
-       name="warndata"
-       icon="plus-circle"
-     ></u-tabbar-item>
-     <u-tabbar-item v-show="menus.filecenter != null"
-       text="文件共享"
-       name="filecenter"
-       icon="file-text"
-     ></u-tabbar-item>
-     <u-tabbar-item v-show="menus.gasreport != null"
-       text="瓦斯日报"
-       name="gasreport"
-       icon="bell"
-     ></u-tabbar-item>
-     <u-tabbar-item text="我的" name="user" icon="bell"></u-tabbar-item>
+      <u-tabbar-item
+        v-show="menus.device != null"
+        text="设备中心"
+        name="device"
+        icon="calendar"
+      ></u-tabbar-item>
+      <u-tabbar-item
+        v-show="menus.warndata != null"
+        text="预警分析"
+        name="warndata"
+        icon="plus-circle"
+      ></u-tabbar-item>
+      <u-tabbar-item
+        v-show="menus.filecenter != null"
+        text="文件共享"
+        name="filecenter"
+        icon="file-text"
+      ></u-tabbar-item>
+      <u-tabbar-item
+        v-show="menus.gasreport != null"
+        text="瓦斯日报"
+        name="gasreport"
+        icon="bell"
+      ></u-tabbar-item>
+      <u-tabbar-item text="我的" name="user" icon="bell"></u-tabbar-item>
     </u-tabbar>
   </view>
 </template>
@@ -81,15 +85,14 @@ export default {
       wvWidth: getApp().globalData.windowWidth,
       wvTop: 0,
       iframeloading: false,
-	  menus:{}
+      menus: {},
     };
   },
   computed: {
     permission: function () {
       var data = uni.getStorageSync("menuPermission");
-      console.log(JSON.stringify(data));
-      if (data == null || data == "" || data.length == 0) 
-	  {
+      console.log(JSON.stringify(data), "data");
+      if (data == null || data == "" || data.length == 0) {
         data = [
           {
             redirect: null,
@@ -157,9 +160,9 @@ export default {
           },
         ];
       }
-	  for(var i=0;i<data.length;i++){
-		  this.menus[data[i].component] = data[i].component
-	  }
+      for (var i = 0; i < data.length; i++) {
+        this.menus[data[i].component] = data[i].component;
+      }
       return data;
     },
   },
@@ -170,8 +173,8 @@ export default {
         if (newV != null && newV != "") this.PageCur = newV[0].component;
       },
       immediate: true,
-  }
-},
+    },
+  },
   onLoad() {
     this.changeWV();
   },

pages/ipConfig/ipConfig.vue

@@ -0,0 +1,143 @@
+  <template>
+  <view class="zai-box">
+    <scroll-view scroll-y class="page">
+      <view class="IPSet">
+        <span class="text-style"
+          ><u-button
+            :plain="true"
+            color="#18a5ff"
+            size="small"
+            :text="IPSet ? IPSet : '选择IP地址'"
+            @tap="changeIP()"
+          ></u-button
+        ></span>
+        <u-picker
+          :show="ipShow"
+          :columns="IpConfig"
+          @cancel="ipShow = false"
+          @confirm="selectIpAddr"
+          keyName="label"
+        ></u-picker>
+      </view>
+    </scroll-view>
+  </view>
+</template>
+
+<script>
+import configService from "@/common/service/config.service.js";
+
+export default {
+  data() {
+    return {
+      ipShow: false,
+      IPSet: "",
+      IpConfig: [
+        [
+          { label: "大柳塔井", value: "http://10.248.135.10:9999" },
+          { label: "活鸡兔井", value: "http://10.248.135.121:9999" },
+          { label: "寸草塔二矿", value: "http://10.246.63.5:9999" },
+          { label: "乌兰木伦", value: "http://10.246.183.35:9999" },
+          { label: "哈拉沟煤矿", value: "http://10.248.223.12:9999" },
+          { label: "布尔台", value: "http://10.246.95.4:9999" },
+          { label: "上湾", value: "http://10.246.167.205:9999" },
+          { label: "锦界", value: "http://10.248.151.42:9999" },
+          { label: "补连塔", value: "http://10.246.175.16:9999" },
+          { label: "寸草塔", value: "http://10.246.23.171:9999" },
+          { label: "柳塔", value: "http://10.246.87.121:9999" },
+          { label: "石圪台", value: "http://10.246.191.13:9999" },
+          { label: "榆家梁", value: "http://10.248.143.211:9999" },
+          { label: "开发", value: "http://182.92.126.35:9999" },
+          { label: "测试", value: "http://182.92.126.35:9998" },
+        ],
+      ],
+      fromSetting: false, // 是否来自设置页
+      ip: "",
+    };
+  },
+  onLoad(options) {
+    this.fromSetting = options.from === "settings"; // 判断来源
+    this.ip = uni.getStorageSync("serverIP") || ""; // 读取已存IP
+  },
+  computed: {},
+  methods: {
+    selectIpAddr(e) {
+      this.ipShow = false;
+      this.ip = e.value[0].value;
+      const fullURL = e.value[0].value;
+      this.IPSet = e.value[0].label;
+      configService.apiUrl = fullURL;
+      uni.setStorageSync("selectedIP", true);
+      uni.setStorageSync("apiUrl", fullURL);
+      uni.setStorageSync("savedIP", true);
+      // uni.showModal({
+      //   title: "提示",
+      //   content: fullURL,
+      //   cancelText: "取消",
+      //   confirmText: "确认",
+      // });
+      uni.redirectTo({
+        url: "/pages/login/login?reload=" + 1,
+      });
+    },
+    changeIP() {
+      this.ipShow = true;
+    },
+  },
+  beforeDestroy() {},
+};
+</script>
+
+<style>
+.login-paddingtop {
+  padding-top: 300upx;
+}
+.zai-box {
+  height: 100vh;
+  background-image: url(/static/desk-img/loginBg.png);
+  background-size: cover;
+  padding: 0 20upx;
+  padding-top: 100upx;
+  position: relative;
+}
+
+.zai-logo {
+  width: 200upx;
+  height: 150px;
+}
+
+.zai-title {
+  margin-top: 20upx;
+  font-size: 58upx;
+  color: #000000;
+  text-align: center;
+}
+
+.input-placeholder,
+.zai-input {
+  color: #94afce;
+}
+
+.zai-btn {
+  background: #ff65a3;
+  color: #fff;
+  border: 0;
+  border-radius: 100upx;
+  font-size: 36upx;
+}
+
+.zai-btn:after {
+  border: 0;
+}
+
+/*按钮点击效果*/
+.zai-btn.button-hover {
+  transform: translate(1upx, 1upx);
+}
+.IPSet {
+  display: flex;
+  flex-direction: column;
+}
+.text-style {
+  margin: 20px;
+}
+</style>

pages/login/login.vue

@@ -1,7 +1,7 @@
   <template>
     <view class="zai-box">
-      <!-- <u-icon name="setting-fill" color="#2979ff" size="28" @tap="setIp()"></u-icon> -->
-      <scroll-view scroll-y class="page">
+      <u-icon name="setting-fill" color="#2979ff" size="28" @click="setIp"></u-icon>
+      <scroll-view scroll-y class="page" v-if="!ipShow">
         <view class="text-center" :style="[{ animation: 'show ' + 0.4 + 's 1' }]">
           <!-- <image src="/static/desk-img/logo.png" mode='aspectFit' class="zai-logo "></image> -->
               <image src="/static/dhz-logo.png" mode='aspectFit' class="zai-logo "></image>
@@ -46,7 +46,7 @@
         <view class="gray-text">登录中...</view>
       </view>
       <scroll-view scroll-y  class="page" v-if="ipShow">
-        <view class="IPSet">
+        <!-- <view class="IPSet">
             <span class="text-style">IP地址：  <u--input
               placeholder="请输入IP地址"
               border="surround"
@@ -58,7 +58,27 @@
               v-model="PortValue"
             ></u--input></span>
             <span class="text-style"><u-button :plain="true" color="#18a5ff" size="small" @tap="saveIP()">保存</u-button></span>
-        </view>
+        </view> -->
+        <!-- <scroll-view scroll-y class="page"> -->
+      <view class="IPSet">
+        <span class="text-style"
+          ><u-button
+            :plain="true"
+            color="#18a5ff"
+            size="small"
+            :text="IPSet ? IPSet : '选择IP地址'"
+            @tap="changeIP()"
+          ></u-button
+        ></span>
+        <u-picker
+          :show="ipShow1"
+          :columns="IpConfig"
+          @cancel="ipShow = false"
+          @confirm="selectIpAddr"
+          keyName="label"
+        ></u-picker>
+      </view>
+    <!-- </scroll-view> -->
       </scroll-view>
     </view>
 
@@ -74,6 +94,7 @@ export default {
   data() {
     return {
       ipShow: false,
+      ipShow1: false,
       shape: "", //round 圆形
       loading: false,
       userName: "",
@@ -94,6 +115,26 @@ export default {
       IPValue: "",
       PortValue: "",
       fullIPVal: "", //完整IP地址
+      IPSet: "",
+      IpConfig: [
+        [
+          { label: "大柳塔井", value: "http://10.248.135.10:9999" },
+          { label: "活鸡兔井", value: "http://10.248.135.121:9999" },
+          { label: "寸草塔二矿", value: "http://10.246.63.5:9999" },
+          { label: "乌兰木伦", value: "http://10.246.183.35:9999" },
+          { label: "哈拉沟煤矿", value: "http://10.248.223.12:9999" },
+          { label: "布尔台", value: "http://10.246.95.4:9999" },
+          { label: "上湾", value: "http://10.246.167.205:9999" },
+          { label: "锦界", value: "http://10.248.151.42:9999" },
+          { label: "补连塔", value: "http://10.246.175.16:9999" },
+          { label: "寸草塔", value: "http://10.246.23.171:9999" },
+          { label: "柳塔", value: "http://10.246.87.121:9999" },
+          { label: "石圪台", value: "http://10.246.191.13:9999" },
+          { label: "榆家梁", value: "http://10.248.143.211:9999" },
+          { label: "开发", value: "http://182.92.126.35:9999" },
+          { label: "测试", value: "http://182.92.126.35:9998" },
+        ],
+      ],
     };
   },
   onLoad: function (option) {
@@ -220,7 +261,7 @@ export default {
             than.getPermissionList();
           })
           .catch((error) => {
-            debugger;
+            // debugger;
             console.log("catch===>response", error);
             // uni.navigateTo({
             //   url: "/pages/home/home",
@@ -256,7 +297,7 @@ export default {
       });
     },
     saveClientId() {
-          this.getPermissionList();
+      this.getPermissionList();
       // var info = plus.push.getClientInfo();
       // var cid = info.clientid;
       // this.$http
@@ -368,6 +409,11 @@ export default {
         url: "/pages/webview/webview?url=" + encodeURIComponent(url),
       });
     },
+    // setIp() {
+    //   uni.navigateTo({
+    //     url: "/pages/ipConfig/ipConfig",
+    //   });
+    // },
     //正则判断ip地址
     validateIP(ip) {
       const regex =
@@ -387,9 +433,11 @@ export default {
       this.validateIP(this.IPValue);
       this.validatePort(this.PortValue);
       if (this.validateIP(this.IPValue) && this.validatePort(this.PortValue)) {
+        this.ipShow = false;
         this.fullIPVal = `http://${this.IPValue}:${this.PortValue}`;
         configService.apiUrl = this.fullIPVal;
-        localStorage.setItem("apiUrl", apiUrl);
+        uni.setStorageSync("apiUrl", configService.apiUrl);
+        // localStorage.setItem("apiUrl", apiUrl);
       } else if (!this.validateIP(this.IPValue)) {
         alert("请填写正确的IP地址");
       } else if (!this.validatePort(this.PortValue)) {
@@ -398,6 +446,20 @@ export default {
         alert("请检查输入的IP地址或端口号");
       }
     },
+    changeIP() {
+      this.ipShow1 = true;
+    },
+    selectIpAddr(e) {
+      this.ipShow1 = false;
+      const fullURL = e.value[0].value;
+      this.IPSet = e.value[0].label;
+      configService.apiUrl = fullURL;
+      uni.setStorageSync("apiUrl", configService.apiUrl);
+      setTimeout(() => {
+        uni.getStorageSync("apiUrl");
+      }, 100);
+      uni.navigateTo({ url: "/pages/login/login" });
+    },
   },
   beforeDestroy() {
     if (this.smsCountInterval) {

store/index.js

@@ -1,112 +1,141 @@
-import Vue from 'vue'
-import Vuex from 'vuex'
-import api from "@/api/api"
-import MinCache from '@/common/util/MinCache.js'
-import { ACCESS_TOKEN, USER_NAME, USER_INFO } from "@/common/util/constants"
+import Vue from "vue";
+import Vuex from "vuex";
+import api from "@/api/api";
+import MinCache from "@/common/util/MinCache.js";
+import { ACCESS_TOKEN, USER_NAME, USER_INFO } from "@/common/util/constants";
 
-Vue.use(Vuex)
+Vue.use(Vuex);
 
 export default new Vuex.Store({
   state: {
-    token: '',
-    userid: '',
-    username: '',
-    realname: '',
-    welcome: '',
-    avatar: '',
-    dicts: '',
+    token: "",
+    userid: "",
+    username: "",
+    realname: "",
+    welcome: "",
+    avatar: "",
+    dicts: "",
     showColum: {},
-    nfcreadtxt:'',
+    nfcreadtxt: "",
   },
   mutations: {
-    setNfcReadTxt(state,nfcreadtxt){
-      state.nfcreadtxt = nfcreadtxt
-  },
+    setNfcReadTxt(state, nfcreadtxt) {
+      state.nfcreadtxt = nfcreadtxt;
+    },
     SET_TOKEN: (state, token) => {
-      state.token = token
+      state.token = token;
     },
     SET_NAME: (state, { username, realname, welcome }) => {
-      state.username = username
-      state.realname = realname
-      state.welcome = welcome
+      state.username = username;
+      state.realname = realname;
+      state.welcome = welcome;
     },
     SET_AVATAR: (state, avatar) => {
-      state.avatar = avatar
+      state.avatar = avatar;
     },
     SET_SHOWCOLUM: (state, showColum) => {
-      state.showColum = showColum
+      state.showColum = showColum;
     },
     SET_DICT: (state, dicts) => {
-      state.dicts = dicts
-    }
+      state.dicts = dicts;
+    },
   },
   actions: {
     // 登录
     mLogin({ commit }, userInfo) {
       return new Promise((resolve, reject) => {
-        api.login(userInfo).then(response => {
-          if (response.data.code == 200) {
-            const result = response.data.result
-            const userInfo = result.userInfo
-            uni.setStorageSync(ACCESS_TOKEN, result.token);
-            uni.setStorageSync(USER_INFO, userInfo);
-            commit('SET_TOKEN', result.token)
-            commit('SET_DICT', result.sysAllDictItems)
-            commit('SET_AVATAR', userInfo.avatar)
-            commit('SET_NAME', { username: userInfo.username, realname: userInfo.realname })
-            resolve(response)
-          } else {
-            resolve(response)
-          }
-        }).catch(error => {
-          console.log("catch===>response", response)
-          reject(error)
-        })
-      })
+        api
+          .login(userInfo)
+          .then((response) => {
+            if (response.data?.code == 200) {
+              const result = response.data.result;
+              const userInfo = result.userInfo;
+              uni.setStorageSync(ACCESS_TOKEN, result.token);
+              uni.setStorageSync(USER_INFO, userInfo);
+              commit("SET_TOKEN", result.token);
+              commit("SET_DICT", result.sysAllDictItems);
+              commit("SET_AVATAR", userInfo.avatar);
+              commit("SET_NAME", {
+                username: userInfo.username,
+                realname: userInfo.realname,
+              });
+              resolve(response);
+            } else {
+              resolve(response);
+            }
+          })
+          .catch((error) => {
+            console.log("catch===>response", response);
+            reject(error);
+          });
+      });
     },
     //手机号登录
     PhoneLogin({ commit }, userInfo) {
       return new Promise((resolve, reject) => {
-        api.phoneNoLogin(userInfo).then(response => {
-          if (response.data.code == 200) {
-            const result = response.data.result
-            const userInfo = result.userInfo
-            uni.setStorageSync(ACCESS_TOKEN, result.token);
-            uni.setStorageSync(USER_INFO, userInfo);
-            commit('SET_TOKEN', result.token)
-            commit('SET_NAME', { username: userInfo.username, realname: userInfo.realname })
-            commit('SET_AVATAR', userInfo.avatar)
-            resolve(response)
-          } else {
-            reject(response)
-          }
-        }).catch(error => {
-          reject(error)
-        })
-      })
+        api
+          .phoneNoLogin(userInfo)
+          .then((response) => {
+            if (response.data.code == 200) {
+              const result = response.data.result;
+              const userInfo = result.userInfo;
+              uni.setStorageSync(ACCESS_TOKEN, result.token);
+              uni.setStorageSync(USER_INFO, userInfo);
+              commit("SET_TOKEN", result.token);
+              commit("SET_NAME", {
+                username: userInfo.username,
+                realname: userInfo.realname,
+              });
+              commit("SET_AVATAR", userInfo.avatar);
+              resolve(response);
+            } else {
+              reject(response);
+            }
+          })
+          .catch((error) => {
+            reject(error);
+          });
+      });
     },
     // 登出
     Logout({ commit, state }) {
       return new Promise((resolve) => {
         let logoutToken = state.token;
-        commit('SET_TOKEN', '')
-        uni.removeStorageSync(ACCESS_TOKEN)
-        api.logout(logoutToken).then(() => {
-          resolve()
-        }).catch(() => {
-          resolve()
-        })
-      })
+        commit("SET_TOKEN", "");
+        uni.removeStorageSync(ACCESS_TOKEN);
+        api
+          .logout(logoutToken)
+          .then(() => {
+            resolve();
+          })
+          .catch(() => {
+            resolve();
+          });
+      });
     },
-
   },
   getters: {
-    token: state => state.token,
-    username: state => { state.userid = uni.getStorageSync(USER_INFO).username; return state.username },
-    nickname: state => { state.userid = uni.getStorageSync(USER_INFO).realname; return state.user.realname },
-    avatar: state => { state.userid = uni.getStorageSync(USER_INFO).avatar; return state.user.avatar },
-    userid: state => { state.userid = uni.getStorageSync(USER_INFO).id; return state.userid },
-    showColum: state => { state.userid = uni.getStorageSync(USER_INFO).showColum; return state.showColum },
-    nfcreadtxt: state => state.nfcreadtxt
-  }
-})
+    token: (state) => state.token,
+    username: (state) => {
+      state.userid = uni.getStorageSync(USER_INFO).username;
+      return state.username;
+    },
+    nickname: (state) => {
+      state.userid = uni.getStorageSync(USER_INFO).realname;
+      return state.user.realname;
+    },
+    avatar: (state) => {
+      state.userid = uni.getStorageSync(USER_INFO).avatar;
+      return state.user.avatar;
+    },
+    userid: (state) => {
+      state.userid = uni.getStorageSync(USER_INFO).id;
+      return state.userid;
+    },
+    showColum: (state) => {
+      state.userid = uni.getStorageSync(USER_INFO).showColum;
+      return state.showColum;
+    },
+    nfcreadtxt: (state) => state.nfcreadtxt,
+  },
+});