[feat 0000] 风窗详情页样式修改 历史数据页面

pages/history/Historymodel.vue

@@ -1,20 +1,132 @@
 <template>
-	<view class="container">
-	  <!-- 建议放在外层 -->
-	  <u-navbar
-	    title="历史数据"
-	    @leftClick="devicemenuShow"
-	    :safeAreaInsetTop="false"
-	  >
-	    <view class="u-nav-slot" slot="left">
-	      <u-icon name="list" size="20"> </u-icon>
-	    </view>
-	  </u-navbar>
-	  </view>
+  <view class="container">
+    <!-- 建议放在外层 -->
+    <u-navbar
+      title="历史数据"
+      @leftClick="devicemenuShow"
+      :safeAreaInsetTop="false"
+    >
+      <view class="u-nav-slot" slot="left">
+        <u-icon name="list" size="20"> </u-icon>
+      </view>
+    </u-navbar>
+    <!-- 侧边栏 -->
+    <view v-show="menushow" class="menupage">
+      <DeviceMenu @menuClick="menuClick"></DeviceMenu>
+    </view>
+
+    <!-- 历史数据列表页 -->
+    <view v-show="!menushow" class="main">
+      <view class="u-page">
+
+        <div class="btns">
+          <u-button type="primary" shape="circle" text="选择设备"></u-button>
+          <u-button
+            type="primary"
+            shape="circle"
+            text="选择间隔时间"
+            @click="show = true"
+          ></u-button>
+        </div>
+        <u-picker :show="show" :columns="columns" title="请选择设备"></u-picker>
+        <u-picker
+          :show="show"
+          :columns="timeColumns"
+          title="间隔时间"
+        ></u-picker>
+      </view>
+    </view>
+  </view>
 </template>
 
 <script>
+import DeviceMenu from "./devicemenu/devicemenu.vue";
+import api from "@/api/api";
+export default {
+  data() {
+    return {
+      menushow: false,
+      TabCur: "gate",
+      curlist: [],
+      deviceList: {},
+      scrollLeft: 0,
+      currentTab: 0,
+      startDate: null,
+      endDate: null,
+      show: false,
+      columns: [["中国", "美国", "日本"]],
+      timeColumns: [
+        ["1s", "5s", "10s", "30s", "1分钟", "10分钟", "30分钟", "1小时"],
+      ],
+    };
+  },
+  components: {
+    DeviceMenu,
+  },
+  props: ["showColum"],
+  watch: {
+    showColum(data) {
+      this.colums = data;
+      console.log(this.colums);
+    },
+  },
+  created() {},
+  mounted() {
+    this.startTimer();
+  },
+  methods: {
+    startTimer() {
+      // 每隔一段时间执行某个操作
+      this.timer = setInterval(() => {
+        // 执行定时任务
+        console.log("定时任务执行中...");
+      }, 5000);
+    },
+    stopTimer() {
+      // 停止定时器
+      clearInterval(this.timer);
+    },
+    tabSelect(e) {
+      this.currentTab = e.currentTarget.dataset.id;
+      this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60;
+    },
+    devicemenuShow(e) {
+      this.menushow = true;
+    },
+    menuClick(id) {
+      // 显示该分类的数据
+      this.menushow = false;
+    },
+  },
+  destroyed() {
+    // 停止定时器
+  },
+};
 </script>
 
 <style>
+.top-nav {
+  height: 100rpx;
+  line-height: 100rpx;
+  background-color: #2aa9f3;
+  color: #daaaa;
+}
+.top-nav2 {
+  background-color: #ffffff;
+}
+.main {
+  margin-top: 100rpx;
+  display: flex;
+  flex-direction: column;
+}
+.menupage {
+  position: absolute;
+  z-index: 2;
+  top: 40rpx;
+  height: calc(100% - 40rpx);
+  width: 100%;
+}
+.btns {
+  display: flex;
+}
 </style>

pages/history/devicemenu/devicemenu.vue

@@ -0,0 +1,32 @@
+<template>
+	<view class="bg">
+        <tree-menu @menuClick="menuClick" ></tree-menu>
+	</view>
+</template>
+ 
+<script>
+import TreeMenu from './treeMenu/typeMenu.vue'
+export default {
+	name: 'Study',
+	components: {
+		TreeMenu
+	},
+	data() {
+		return {
+		}
+	},
+	created() {
+		
+	},
+	methods:{
+		menuClick(id){
+			this.$emit("menuClick",id)
+		}
+	}
+}
+</script>
+<style>
+	.bg{
+		background-color: #ffffff;
+	}
+</style>

pages/history/devicemenu/treeMenu/typeMenu.vue

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

pages/home/detail/windowAnimate/windowAnimate.vue

@@ -1,46 +1,47 @@
 <template>
   <view style="width: 100%; height: 100%">
     <div class="door-container">
-      <div style="display: flex" v-show="windowcount == 1">
+      <div v-show="windowcount == 1">
         <div
           class="autowindow_new"
           v-show="windowcount == 1"
           :style="{ height: height }"
+		 style=" margin: 0 auto;"
         >
-          <div
-            class="window_new_1"
-            :style="`transform: rotateX(${windowAngle}deg)`"
-            id="subwindowpic11"
-          ></div>
-          <div
-            class="window_new_2"
-            :style="`transform: rotateX(${windowAngle}deg)`"
-            id="subwindowpic12"
-          ></div>
-          <div
-            class="window_new_3"
-            :style="`transform: rotateX(${windowAngle}deg)`"
-            id="subwindowpic13"
-          ></div>
-          <div
-            class="window_new_4"
-            :style="`transform: rotateX(${windowAngle}deg)`"
-            id="subwindowpic14"
-          ></div>
-          <div
-            class="window_new_5"
-            :style="`transform: rotateX(${windowAngle}deg)`"
-            id="subwindowpic15"
-          ></div>
+			  <div
+			    class="window_new_1"
+			    :style="`transform: rotateX(${windowAngle}deg)`"
+			    id="subwindowpic11"
+			  ></div>
+			  <div
+			    class="window_new_2"
+			    :style="`transform: rotateX(${windowAngle}deg)`"
+			    id="subwindowpic12"
+			  ></div>
+			  <div
+			    class="window_new_3"
+			    :style="`transform: rotateX(${windowAngle}deg)`"
+			    id="subwindowpic13"
+			  ></div>
+			  <div
+			    class="window_new_4"
+			    :style="`transform: rotateX(${windowAngle}deg)`"
+			    id="subwindowpic14"
+			  ></div>
+			  <div
+			    class="window_new_5"
+			    :style="`transform: rotateX(${windowAngle}deg)`"
+			    id="subwindowpic15"
+			  ></div>
         </div>
-        <div style="flex: 1">
+        <div>
           <video controls style="width: 100%"></video>
         </div>
       </div>
-      <div style="" v-show="windowcount == 2">
+      <div v-show="windowcount == 2">
+		  <div style="display: flex; flex-wrap: nowrap;">
         <div
           class="autowindow_new"
-          v-show="windowcount == 2"
           :style="{ height: height }"
         >
           <div
@@ -71,7 +72,6 @@
         </div>
         <div
           class="autowindow_new"
-          v-show="windowcount == 2"
           :style="{ height: height }"
         >
           <div
@@ -100,6 +100,10 @@
             id="subwindowpic15"
           ></div>
         </div>
+		</div>
+		<div>
+		  <video controls style="width: 100%"></video>
+		</div>
       </div>
     </div>
   </view>
@@ -131,7 +135,6 @@ export default {
 <style scoped>
 /*风窗样式*/
 div.autowindow_new {
-  flex-shrink: 0;
   width: 50%;
   background-image: url(../../../../static/window/window-bk.png);
   background-size: 100% 100%;

pages/index/index.vue

@@ -13,8 +13,9 @@
 		>
 			<u-tabbar-item text="设备监测" name="home" icon="file-text" @click="NavChange('home')"></u-tabbar-item>
 			<u-tabbar-item text="历史数据" name="history" icon="home"  @click="NavChange('history')" ></u-tabbar-item>
-			<u-tabbar-item text="预警分析" icon="play-right" name="warndata" @click="NavChange('warndata')" ></u-tabbar-item>
 			<u-tabbar-item text="操作记录" icon="account" name="people" @click="NavChange('people')" ></u-tabbar-item>
+			<u-tabbar-item text="预警分析" icon="play-right" name="warndata" @click="NavChange('warndata')" ></u-tabbar-item>
+			<!-- 文件中心 -->
 		</u-tabbar>
 	</view>
 </template>