1. 解决设备中心页面整体布局修改后，设备监测、历史、操作历史无法共用设备类型的问题

manifest.json

@@ -1,6 +1,6 @@
 {
     "name" : "智能通风",
-    "appid" : "__UNI__8193760",
+    "appid" : "__UNI__2000523",
     "description" : "",
     "versionName" : "2.2.22",
     "versionCode" : 1,

pages/device/devicemenu/devicemenu.vue

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

pages/device/devicemenu/treeMenu/typeMenu.vue

@@ -0,0 +1,147 @@
+<template>
+  <view class="device-type-modal">
+    <scroll-view>
+      <!-- 通风设备 -->
+      <view v-for="(typeitem, index) in typeList" :key="index">
+        <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>
+              <image 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,
+      },
+      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",
+      },
+    };
+  },
+  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 defaultIconPath = "/static/sidebar/fireS/pulping.svg";
+
+      // 检查 iconMap 中是否存在对应的图标路径
+      if (itemValue && this.iconMap[itemValue]) {
+        return "/static/sidebar/" + itemValue + ".svg";
+      }
+      // 如果不存在对应的图标路径，则返回默认图标路径
+      return defaultIconPath;
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.device-type-modal {
+  margin-top: 30rpx;
+}
+.cu-list.grid > .cu-item {
+  padding: 0rpx 0rpx;
+  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: 60rpx;
+  height: 60rpx;
+}
+.icon {
+  position: absolute;
+  top: 5rpx;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 20rpx;
+  height: 20rpx;
+}
+</style>

pages/device/index.vue

@@ -1,62 +1,48 @@
 <template>
   <view>
+	  <!-- 建议放在外层 -->
+	  <u-navbar
+		title="设备中心"
+		@leftClick="devicemenuShow"
+		:safeAreaInsetTop="true"
+	  >
+		<view class="u-nav-slot" slot="left">
+		  <u-icon name="list" size="20"> </u-icon>
+		</view>
+	  </u-navbar>
+	  
+	  <view v-if="menushow" class="menupage">
+		<DeviceMenu @menuClick="menuClick"></DeviceMenu>
+	  </view>
 	<u-tabs class="devic-box-tab" :current="PageCur" :list="tabList" @click="NavChange"></u-tabs>
 	<view class="">
-		<home cur="home" v-if="PageCur == '0'" :key="0"></home>
+		<home cur="home" :showColum="showColum" v-if="PageCur == '0' && !menushow" :key="0" :deviceType="deviceType" @setMenushow="setMenushow"></home>
 		<history
 		  :key="1"
 		  cur="history"
-		  v-if="PageCur == '1'"
+		  :showColum="showColum"
+		  :deviceType="deviceType"
+		  v-if="PageCur == '1' && !menushow"
+		  @setMenushow="setMenushow"
 		></history>
-		<operation :key="2" cur="operation" v-if="PageCur == '2'"></operation>
+		<operation :key="2" :showColum="showColum" :deviceType="deviceType" cur="operation" v-if="PageCur == '2' && !menushow" @setMenushow="setMenushow"></operation>
 	</view>
-    
-    <!-- <u-tabbar
-      :value="PageCur"
-      @change="(name) => (PageCur = name)"
-      :fixed="true"
-      :placeholder="true"
-      :safeAreaInsetBottom="true"
-    >
-      <u-tabbar-item
-        text="设备监测"
-        name="home"
-        icon="list-dot"
-        @click="NavChange('home')"
-      ></u-tabbar-item>
-      <u-tabbar-item
-        text="历史数据"
-        name="history"
-        icon="calendar"
-        @click="NavChange('history')"
-      ></u-tabbar-item>
-      <u-tabbar-item
-        text="操作记录"
-        icon="setting"
-        name="operation"
-        @click="NavChange('operation')"
-      ></u-tabbar-item>
-      <u-tabbar-item
-        text="预警分析"
-        icon="plus-circle"
-        name="warndata"
-        @click="NavChange('warndata')"
-      ></u-tabbar-item>
-      <u-tabbar-item
-        text="文件中心"
-        icon="file-text"
-        name="filecenter"
-        @click="NavChange('filecenter')"
-      ></u-tabbar-item>
-    </u-tabbar> -->
   </view>
 </template>
 
 <script>
+import api from "@/api/api";
+import DeviceMenu from "./devicemenu/devicemenu.vue";
 export default {
+	components: {
+	  DeviceMenu,
+	},
   data() {
     return {
       PageCur: "0",
+	  showColum: {},
+	  menushow: false,
+	  deviceType:'',
 	  tabList: [
 		  {
 			name: '设备监测'
@@ -67,21 +53,53 @@ export default {
 		  {
 			name: '操作记录'
 		  },
-		 //  {
-			// name: '预警分析'
-		 //  },
 	  ],
     };
   },
+  created() {
+    this.getShowColum();
+  },
   onLoad: function () {
     this.PageCur = "0";
   },
-
   methods: {
     NavChange: function (item) {
       this.PageCur = item.index;
+	  this.menushow = false
     },
-
+	devicemenuShow(e) {
+	  this.menushow = !this.menushow;
+	},
+	menuClick(id) {
+		debugger
+	  // this.TabCur = id;
+	  this.deviceType = id;
+	  this.menushow = false;
+	},
+	getShowColum() {
+	  new Promise((resolve, reject) => {
+	    api
+	      .getShowColum({})
+	      .then((response) => {
+	        if (response.data.code == 200) {
+	          var showlist = response.data.result;
+	          this.$store.commit("SET_SHOWCOLUM", showlist);
+	          this.showColum = showlist;
+	        } else {
+	          resolve(response);
+	        }
+	      })
+	      .catch((error) => {
+	        console.log("catch===>response", response);
+	        reject(error);
+	      });
+	  });
+	},
+	setMenushow(params) {
+		if(params){
+			this.menushow = params.menushow
+		}
+	}
   },
 };
 </script>

pages/history/Historymodel.vue

@@ -1,480 +0,0 @@
-<template>
-  <view class="container">
-    <!-- 建议放在外层 -->
-    <u-navbar
-      title="历史数据"
-      @leftClick="devicemenuShow"
-      :safeAreaInsetTop="true"
-    >
-      <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="flcard">
-          <div class="btns">
-            <u-button
-              type="primary"
-              shape="circle"
-              :text="StartTime ? StartTime : '起始时间'"
-              @click="dataShow = true"
-            ></u-button>
-            <u-button
-              type="primary"
-              shape="circle"
-              :text="EndTime ? EndTime : '结束时间'"
-              @click="dataShow1 = true"
-            ></u-button>
-          </div>
-          <div class="btns" style="margin-top: 10px">
-            <u-button
-              type="primary"
-              shape="circle"
-              :text="deviceName ? deviceName : '选择设备'"
-              @click="deviceShow = true"
-            ></u-button>
-            <u-button
-              type="primary"
-              shape="circle"
-              :text="lable ? lable : '间隔时间'"
-              @click="show = true"
-            ></u-button>
-            <u-button
-              type="primary"
-              shape="circle"
-              text="查询"
-              @click="checkHistory"
-            ></u-button>
-          </div>
-          <u-picker
-            :show="deviceShow"
-            :columns="[devices]"
-            @cancel="deviceShow = false"
-            @confirm="selectDevice"
-            keyName="strinstallpos"
-          >
-          </u-picker>
-          <u-picker
-            :show="show"
-            :columns="timeColumns"
-            @cancel="show = false"
-            keyName="label"
-            @confirm="selectSkipTime"
-          ></u-picker>
-          <u-datetime-picker
-            :show="dataShow"
-            mode="datetime"
-            @cancel="dataShow = false"
-            @confirm="selectStartTime"
-            v-model="dataTime"
-          ></u-datetime-picker>
-          <u-datetime-picker
-            :show="dataShow1"
-            mode="datetime"
-            @cancel="dataShow1 = false"
-            @confirm="selectEndTime"
-            v-model="dataTime"
-          ></u-datetime-picker>
-        </div>
-        <u-list>
-          <u-list-item
-            class="itemback"
-            v-for="(item, index) in historyData"
-            :key="index"
-          >
-            <u-row gutter="5" customStyle="margin-bottom: 10px">
-              <u-col span="24">
-                <u--text :text="item.ginstallpos"></u--text>
-              </u-col>
-            </u-row>
-            <u-row gutter="5" customStyle="margin-bottom: 10px">
-              <u-col span="2" style="margin-right: 15rpx">
-                <div v-if="item.netStatus == 0" class="error-tag1">
-                  <image
-                    src="/static/model/connectFalse.svg"
-                    alt=""
-                    class="icon-style"
-                  />
-                  <span style="float: right">断开</span>
-                </div>
-                <div v-else class="success-tag">
-                  <image
-                    src="/static/model/connectTrue.svg"
-                    alt=""
-                    class="icon-style"
-                  />
-                  <span style="float: right">连接</span>
-                </div>
-              </u-col>
-              <u-col span="2">
-                <div v-if="item.readData[warnFlag] == 0" class="success-tag">
-                  <image
-                    src="/static/model/alarmTrue.svg"
-                    alt=""
-                    class="icon-style"
-                  />
-                  <span style="float: right">{{ item.readData[warndes] }}</span>
-                </div>
-                <div v-else class="error-tag">
-                  <image
-                    src="/static/model/alarmFalse.svg"
-                    alt=""
-                    class="icon-style"
-                  />
-                  <span style="float: right">{{ item.readData[warndes] }}</span>
-                </div>
-              </u-col>
-              <u-col span="3"> </u-col>
-              <u-col span="5">
-                <u--text class="timetext" :text="item.ttime"></u--text>
-              </u-col>
-            </u-row>
-            <view v-if="colums[TabCur + '_monitor'] != null">
-              <view
-                class="datacard"
-                v-for="(showitem, index) in colums[TabCur + '_monitor']"
-                :key="index"
-                v-show="showitem.appShow == 1"
-              >
-                <view class="content">
-                  <view>
-                    <view
-                      v-if="
-                        showitem.datatype == 1 &&
-                        item.readData[showitem.monitorcode] !== null &&
-                        item.readData[showitem.monitorcode] !== undefined
-                      "
-                      class="demo-layout bg-purple-light"
-                      style="margin-top: 10rpx; color: #3787fe"
-                      >{{ item[showitem.monitorcode] }}</view
-                    >
-                    <view
-                      v-else-if="
-                        showitem.datatype == 2 &&
-                        item.readData[showitem.monitorcode] !== null &&
-                        item.readData[showitem.monitorcode] !== undefined
-                      "
-                      class="demo-layout bg-purple-light"
-                      style="color: #3787fe"
-                      >{{ item.readData[showitem.monitorcode] }}</view
-                    >
-                    <view
-                      v-else
-                      class="demo-layout bg-purple-light"
-                      style="color: #3787fe"
-                      >--</view
-                    >
-                    <view
-                      class="demo-layout bg-purple-light"
-                      style="margin-top: 10px; color: #677799"
-                      >{{ showitem.des }}</view
-                    >
-                  </view>
-                </view>
-              </view>
-            </view>
-          </u-list-item>
-        </u-list>
-      </view>
-    </view>
-  </view>
-</template>
-
-<script>
-import DeviceMenu from "./devicemenu/devicemenu.vue";
-import api from "@/api/api";
-import dayjs from "dayjs";
-export default {
-  data() {
-    return {
-      menushow: false,
-      TabCur: "gate",
-      curlist: [],
-      colums: {},
-      deviceList: {},
-      startDate: null,
-      endDate: null,
-      show: false,
-      deviceShow: false,
-      dataShow: false,
-      dataShow1: false,
-      StartTime: "", //起始时间
-      EndTime: "", //结束时间
-      devices: [], //设备类型数组
-      deviceName: "", //设备名称
-      timeS: "", //间隔时间
-      lable: "", //间隔时间
-      timeColumns: [
-        [
-          {
-            label: "1秒",
-            value: "1",
-          },
-          {
-            label: "5秒",
-            value: "2",
-          },
-          {
-            label: "10秒",
-            value: "3",
-          },
-          {
-            label: "30秒",
-            value: "4",
-          },
-          {
-            label: "1分钟",
-            value: "5",
-          },
-          {
-            label: "10分钟",
-            value: "6",
-          },
-          {
-            label: "30分钟",
-            value: "7",
-          },
-          {
-            label: "1小时",
-            value: "8",
-          },
-        ],
-      ],
-      deviceID: "", //设备ID
-      deviceType: "", //设备类型
-      skip: 8, //时间间隔
-      dataTime: dayjs().format("YYYY-MM-DD HH:mm:ss"),
-      historyData: [], //历史数据
-    };
-  },
-  components: {
-    DeviceMenu,
-  },
-  props: ["showColum"],
-  watch: {
-    showColum(data) {
-      this.colums = data;
-    },
-	menushow(newValue,oldValue){
-		console.log('menushow 变化了：', newValue);
-	}
-  },
-  created() {
-    this.colums = this.showColum;
-    const startTime =new Date().getTime() - 3600 * 1000 * 24 * 30;
-    const endTime = new Date();
-    this.StartTime = dayjs(startTime).format("YYYY-MM-DD HH:mm:ss");
-    this.EndTime = dayjs(endTime).format("YYYY-MM-DD HH:mm:ss");
-  },
-  mounted() {},
-  methods: {
-    loadData(type) {
-      new Promise((resolve, reject) => {
-        api
-          .getDeviceMonitor({
-            devicetype: type,
-            pagetype: "normal",
-            filterParams: {},
-          })
-          .then((response) => {
-            if (response.data.code == 200) {
-              this.deviceList[type] = response.data.result.msgTxt[0].datalist;
-              this.curlist = this.deviceList[type];
-              this.setData(this.curlist);
-            } else {
-              resolve(response);
-            }
-          })
-          .catch((error) => {
-            reject(error);
-          });
-      });
-    },
-    //选择设备选择器  保存对应的id
-    setData(data) {
-      this.devices = [];
-      data.forEach((element) => {
-        const deviceObj = {
-          id: element.deviceID,
-          strinstallpos: element.strinstallpos,
-          type: element.deviceType,
-        };
-        this.devices.push(deviceObj);
-      });
-    },
-    //选择设备  点击确定按钮  保存id
-    selectDevice(e) {
-      this.deviceID = e.value[0].id;
-      this.deviceType = e.value[0].type;
-      this.deviceName = e.value[0].strinstallpos;
-      this.deviceShow = false;
-    },
-    //选择起始时间
-    selectStartTime(e) {
-      const startTime = e.value;
-      const formattedTime = dayjs(startTime).format("YYYY-MM-DD HH:mm:ss");
-      this.StartTime = formattedTime;
-      this.dataShow = false;
-    },
-    //选择起始时间
-    selectEndTime(e) {
-      const endTime = e.value;
-      const formattedTime = dayjs(endTime).format("YYYY-MM-DD HH:mm:ss");
-      this.EndTime = formattedTime;
-      this.dataShow1 = false;
-    },
-    //选择间隔时间
-    selectSkipTime(e) {
-      this.skip = e.value[0].value;
-      this.lable = e.value[0].label;
-      this.show = false;
-    },
-    //查询历史数据 getDeviceHistory
-    checkHistory() {
-      const params = {
-        ttime_begin: this.StartTime,
-        ttime_end: this.EndTime,
-        gdeviceid: this.deviceID,
-        skip: this.skip,
-        pageNo: 1,
-        pageSize: 10000,
-        strtype: this.deviceType,
-      };
-      new Promise((resolve, reject) => {
-        api
-          .getDeviceHistory(params)
-          .then((response) => {
-            if (response.data.code == 200) {
-              this.historyData = response.data.result.datalist.records;
-              this.historyData.forEach((item) => {
-                if (item.readData.frontGateOpen == 1) {
-                  item.readData.frontGateOpen = "打开";
-                } else {
-                  item.readData.frontGateOpen = "关闭";
-                }
-                if (item.readData.rearGateOpen == 1) {
-                  item.readData.rearGateOpen = "打开";
-                } else {
-                  item.readData.rearGateOpen = "关闭";
-                }
-                if (item.readData.midGateOpen == 1) {
-                  item.readData.midGateOpen = "打开";
-                } else {
-                  item.readData.midGateOpen = "关闭";
-                }
-              });
-            } else {
-              resolve(response);
-            }
-          })
-          .catch((error) => {
-            reject(error);
-          });
-      });
-    },
-    devicemenuShow(e) {
-		this.menushow = !this.menushow;
-		console.log( this.menushow,'dainjichengg成都多大事');
-    },
-    menuClick(id) {
-      this.TabCur = id;
-      // 显示该分类的数据
-      this.curlist = this.deviceList[this.TabCur];
-      if (this.curlist == null) {
-        this.curlist = [];
-      }
-      // 选择设备分类，重新获取数据
-      this.loadData(this.TabCur);
-      this.menushow = false;
-    },
-  },
-  destroyed() {
-    // 停止定时器
-  },
-};
-</script>
-
-<style>
-.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;
-}
-.flcard {
-  padding: 20rpx;
-  background-color: #ffffff;
-  margin-bottom: 5rpx;
-}
-.itemback {
-  padding: 20rpx;
-  background-color: #ffffff;
-  margin-bottom: 5rpx;
-}
-.datacard {
-  width: 30%;
-  margin: 1%;
-  float: left;
-  height: 100rpx;
-  text-align: center;
-  background: linear-gradient(
-    to right,
-    rgba(55, 135, 254, 0.08),
-    rgba(4, 184, 255, 0.08),
-    rgba(60, 161, 237, 0.08)
-  );
-}
-.error-tag {
-  border-radius: 10%;
-  display: inline-block;
-  color: #e90000;
-  line-height: 50rpx;
-  font-size: 14px;
-  text-align: center;
-  width: 120rpx;
-  height: 50rpx;
-  background-color: rgba(233, 0, 0, 0.2);
-}
-.error-tag1 {
-  border-radius: 10%;
-  display: inline-block;
-  color: #696969;
-  line-height: 50rpx;
-  font-size: 14px;
-  text-align: center;
-  width: 120rpx;
-  height: 50rpx;
-  background-color: rgba(105, 105, 105, 0.2);
-}
-.success-tag {
-  border-radius: 10%;
-  color: #42c000;
-  line-height: 50rpx;
-  font-size: 14px;
-  width: 120rpx;
-  height: 50rpx;
-  display: inline-block;
-  background-color: rgba(226, 250, 214);
-}
-.icon-style {
-  margin: 15rpx;
-  width: 14px;
-  height: 14px;
-}
-</style>

pages/history/history.vue

@@ -1,77 +1,499 @@
-<template name="history">
-  <view>
-    <!-- 其他页面内容 -->
-    <Historymodel :showColum="showColum"></Historymodel>
+<template>
+  <view class="container">
+    <!-- 建议放在外层 -->
+<!--    <u-navbar
+      title="历史数据"
+      @leftClick="devicemenuShow"
+      :safeAreaInsetTop="true"
+    >
+      <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-if="!menushow" class="main">
+      <view class="u-page">
+        <div class="flcard">
+          <div class="btns">
+            <u-button
+              type="primary"
+              shape="circle"
+              :text="StartTime ? StartTime : '起始时间'"
+              @click="dataShow = true"
+            ></u-button>
+            <u-button
+              type="primary"
+              shape="circle"
+              :text="EndTime ? EndTime : '结束时间'"
+              @click="dataShow1 = true"
+            ></u-button>
+          </div>
+          <div class="btns" style="margin-top: 10px">
+            <u-button
+              type="primary"
+              shape="circle"
+              :text="deviceName ? deviceName : '选择设备'"
+              @click="deviceShow = true"
+            ></u-button>
+            <u-button
+              type="primary"
+              shape="circle"
+              :text="lable ? lable : '间隔时间'"
+              @click="show = true"
+            ></u-button>
+            <u-button
+              type="primary"
+              shape="circle"
+              text="查询"
+              @click="checkHistory"
+            ></u-button>
+          </div>
+          <u-picker
+            :show="deviceShow"
+            :columns="[devices]"
+            @cancel="deviceShow = false"
+            @confirm="selectDevice"
+            keyName="strinstallpos"
+          >
+          </u-picker>
+          <u-picker
+            :show="show"
+            :columns="timeColumns"
+            @cancel="show = false"
+            keyName="label"
+            @confirm="selectSkipTime"
+          ></u-picker>
+          <u-datetime-picker
+            :show="dataShow"
+            mode="datetime"
+            @cancel="dataShow = false"
+            @confirm="selectStartTime"
+            v-model="dataTime"
+          ></u-datetime-picker>
+          <u-datetime-picker
+            :show="dataShow1"
+            mode="datetime"
+            @cancel="dataShow1 = false"
+            @confirm="selectEndTime"
+            v-model="dataTime"
+          ></u-datetime-picker>
+        </div>
+        <u-list>
+          <u-list-item
+            class="itemback"
+            v-for="(item, index) in historyData"
+            :key="index"
+          >
+            <u-row gutter="5" customStyle="margin-bottom: 10px">
+              <u-col span="24">
+                <u--text :text="item.ginstallpos"></u--text>
+              </u-col>
+            </u-row>
+            <u-row gutter="5" customStyle="margin-bottom: 10px">
+              <u-col span="2" style="margin-right: 15rpx">
+                <div v-if="item.netStatus == 0" class="error-tag1">
+                  <image
+                    src="/static/model/connectFalse.svg"
+                    alt=""
+                    class="icon-style"
+                  />
+                  <span style="float: right">断开</span>
+                </div>
+                <div v-else class="success-tag">
+                  <image
+                    src="/static/model/connectTrue.svg"
+                    alt=""
+                    class="icon-style"
+                  />
+                  <span style="float: right">连接</span>
+                </div>
+              </u-col>
+              <u-col span="2">
+                <div v-if="item.readData[warnFlag] == 0" class="success-tag">
+                  <image
+                    src="/static/model/alarmTrue.svg"
+                    alt=""
+                    class="icon-style"
+                  />
+                  <span style="float: right">{{ item.readData[warndes] }}</span>
+                </div>
+                <div v-else class="error-tag">
+                  <image
+                    src="/static/model/alarmFalse.svg"
+                    alt=""
+                    class="icon-style"
+                  />
+                  <span style="float: right">{{ item.readData[warndes] }}</span>
+                </div>
+              </u-col>
+              <u-col span="3"> </u-col>
+              <u-col span="5">
+                <u--text class="timetext" :text="item.ttime"></u--text>
+              </u-col>
+            </u-row>
+            <view v-if="colums[TabCur + '_monitor'] != null">
+              <view
+                class="datacard"
+                v-for="(showitem, index) in colums[TabCur + '_monitor']"
+                :key="index"
+                v-show="showitem.appShow == 1"
+              >
+                <view class="content">
+                  <view>
+                    <view
+                      v-if="
+                        showitem.datatype == 1 &&
+                        item.readData[showitem.monitorcode] !== null &&
+                        item.readData[showitem.monitorcode] !== undefined
+                      "
+                      class="demo-layout bg-purple-light"
+                      style="margin-top: 10rpx; color: #3787fe"
+                      >{{ item[showitem.monitorcode] }}</view
+                    >
+                    <view
+                      v-else-if="
+                        showitem.datatype == 2 &&
+                        item.readData[showitem.monitorcode] !== null &&
+                        item.readData[showitem.monitorcode] !== undefined
+                      "
+                      class="demo-layout bg-purple-light"
+                      style="color: #3787fe"
+                      >{{ item.readData[showitem.monitorcode] }}</view
+                    >
+                    <view
+                      v-else
+                      class="demo-layout bg-purple-light"
+                      style="color: #3787fe"
+                      >--</view
+                    >
+                    <view
+                      class="demo-layout bg-purple-light"
+                      style="margin-top: 10px; color: #677799"
+                      >{{ showitem.des }}</view
+                    >
+                  </view>
+                </view>
+              </view>
+            </view>
+          </u-list-item>
+        </u-list>
+      </view>
+    </view>
   </view>
 </template>
 
 <script>
-import Historymodel from "../history/Historymodel.vue";
+import DeviceMenu from "./devicemenu/devicemenu.vue";
 import api from "@/api/api";
+import dayjs from "dayjs";
 export default {
-  components: {
-    Historymodel,
-  },
-  name: "history",
-  watch: {},
   data() {
     return {
-      showColum: {},
+      menushow: false,
+      TabCur: "gate",
+      curlist: [],
+      colums: {},
+      deviceList: {},
+      startDate: null,
+      endDate: null,
+      show: false,
+      deviceShow: false,
+      dataShow: false,
+      dataShow1: false,
+      StartTime: "", //起始时间
+      EndTime: "", //结束时间
+      devices: [], //设备类型数组
+      deviceName: "", //设备名称
+      timeS: "", //间隔时间
+      lable: "", //间隔时间
+      timeColumns: [
+        [
+          {
+            label: "1秒",
+            value: "1",
+          },
+          {
+            label: "5秒",
+            value: "2",
+          },
+          {
+            label: "10秒",
+            value: "3",
+          },
+          {
+            label: "30秒",
+            value: "4",
+          },
+          {
+            label: "1分钟",
+            value: "5",
+          },
+          {
+            label: "10分钟",
+            value: "6",
+          },
+          {
+            label: "30分钟",
+            value: "7",
+          },
+          {
+            label: "1小时",
+            value: "8",
+          },
+        ],
+      ],
+      deviceID: "", //设备ID
+      // deviceType: "", //设备类型
+      skip: 8, //时间间隔
+      dataTime: dayjs().format("YYYY-MM-DD HH:mm:ss"),
+      historyData: [], //历史数据
     };
   },
+  components: {
+    DeviceMenu,
+  },
+  props: ["showColum", 'deviceType'],
+  watch: {
+    showColum(data) {
+      this.colums = data;
+    },
+  	deviceType: {
+  		async handler (data) {
+  			if(data){
+  				this.TabCur = data;
+  				this.curlist = this.deviceList[this.TabCur];
+  				
+  				if (this.curlist == null) {
+  							this.curlist = [];
+  				}
+  				// 选择设备分类，重新获取数据
+  				await this.loadData(this.TabCur);
+  				this.$emit('setMenushow', {
+  				  								menushow: false
+  				});
+  			}
+  		  
+  		  
+  		},
+  		immediate: true
+  	}
+  },
+  created() {
+    this.colums = this.showColum;
+    const startTime =new Date().getTime() - 3600 * 1000 * 24 * 30;
+    const endTime = new Date();
+    this.StartTime = dayjs(startTime).format("YYYY-MM-DD HH:mm:ss");
+    this.EndTime = dayjs(endTime).format("YYYY-MM-DD HH:mm:ss");
+  },
+  mounted() {
+	  this.TabCur = this.deviceType;
+  },
   methods: {
-    getShowColum() {
+    loadData(type) {
       new Promise((resolve, reject) => {
         api
-          .getShowColum({})
+          .getDeviceMonitor({
+            devicetype: type,
+            pagetype: "normal",
+            filterParams: {},
+          })
           .then((response) => {
             if (response.data.code == 200) {
-              var showlist = response.data.result;
-              this.$store.commit("SET_SHOWCOLUM", showlist);
-              this.showColum = showlist;
+              this.deviceList[type] = response.data.result.msgTxt[0].datalist;
+              this.curlist = this.deviceList[type];
+              this.setData(this.curlist);
             } else {
               resolve(response);
             }
           })
           .catch((error) => {
-            console.log("catch===>response", response);
             reject(error);
           });
       });
     },
+    //选择设备选择器  保存对应的id
+    setData(data) {
+      this.devices = [];
+      data.forEach((element) => {
+        const deviceObj = {
+          id: element.deviceID,
+          strinstallpos: element.strinstallpos,
+          type: element.deviceType,
+        };
+        this.devices.push(deviceObj);
+      });
+    },
+    //选择设备  点击确定按钮  保存id
+    selectDevice(e) {
+      this.deviceID = e.value[0].id;
+      this.TabCur = e.value[0].type;
+      this.deviceName = e.value[0].strinstallpos;
+      this.deviceShow = false;
+    },
+    //选择起始时间
+    selectStartTime(e) {
+      const startTime = e.value;
+      const formattedTime = dayjs(startTime).format("YYYY-MM-DD HH:mm:ss");
+      this.StartTime = formattedTime;
+      this.dataShow = false;
+    },
+    //选择起始时间
+    selectEndTime(e) {
+      const endTime = e.value;
+      const formattedTime = dayjs(endTime).format("YYYY-MM-DD HH:mm:ss");
+      this.EndTime = formattedTime;
+      this.dataShow1 = false;
+    },
+    //选择间隔时间
+    selectSkipTime(e) {
+      this.skip = e.value[0].value;
+      this.lable = e.value[0].label;
+      this.show = false;
+    },
+    //查询历史数据 getDeviceHistory
+    checkHistory() {
+      const params = {
+        ttime_begin: this.StartTime,
+        ttime_end: this.EndTime,
+        gdeviceid: this.deviceID,
+        skip: this.skip,
+        pageNo: 1,
+        pageSize: 10000,
+        strtype: this.TabCur,
+      };
+      new Promise((resolve, reject) => {
+        api
+          .getDeviceHistory(params)
+          .then((response) => {
+            if (response.data.code == 200) {
+              this.historyData = response.data.result.datalist.records;
+              this.historyData.forEach((item) => {
+                if (item.readData.frontGateOpen == 1) {
+                  item.readData.frontGateOpen = "打开";
+                } else {
+                  item.readData.frontGateOpen = "关闭";
+                }
+                if (item.readData.rearGateOpen == 1) {
+                  item.readData.rearGateOpen = "打开";
+                } else {
+                  item.readData.rearGateOpen = "关闭";
+                }
+                if (item.readData.midGateOpen == 1) {
+                  item.readData.midGateOpen = "打开";
+                } else {
+                  item.readData.midGateOpen = "关闭";
+                }
+              });
+            } else {
+              resolve(response);
+            }
+          })
+          .catch((error) => {
+            reject(error);
+          });
+      });
+    },
+    devicemenuShow(e) {
+		this.menushow = !this.menushow;
+		console.log( this.menushow,'dainjichengg成都多大事');
+    },
+    menuClick(id) {
+      this.TabCur = id;
+      // 显示该分类的数据
+      this.curlist = this.deviceList[this.TabCur];
+      if (this.curlist == null) {
+        this.curlist = [];
+      }
+      // 选择设备分类，重新获取数据
+      this.loadData(this.TabCur);
+      this.menushow = false;
+    },
   },
-  created() {
-    this.getShowColum();
+  destroyed() {
+    // 停止定时器
   },
-  onLoad() {},
 };
 </script>
 
-<style scoped>
-.cu-list.grid > .cu-item {
-  padding: 0px 0px;
+<style>
+.main {
+  /* margin-top: 100rpx; */
+  display: flex;
+  flex-direction: column;
 }
-.line2-icon {
-  width: 60px;
-  height: 60px;
+.menupage {
+  position: absolute;
+  z-index: 2;
+  top: 40rpx;
+  height: calc(100% - 40rpx);
+  width: 100%;
 }
-.tab-bar {
+.btns {
   display: flex;
-  justify-content: space-around;
-  padding: 10px;
-  background-color: #eee;
 }
-
-.tab-bar view {
-  flex: 1;
+.flcard {
+  padding: 20rpx;
+  background-color: #ffffff;
+  margin-bottom: 5rpx;
+}
+.itemback {
+  padding: 20rpx;
+  background-color: #ffffff;
+  margin-bottom: 5rpx;
+}
+.datacard {
+  width: 30%;
+  margin: 1%;
+  float: left;
+  height: 100rpx;
   text-align: center;
-  padding: 10px;
-  border-radius: 5px;
-  cursor: pointer;
+  background: linear-gradient(
+    to right,
+    rgba(55, 135, 254, 0.08),
+    rgba(4, 184, 255, 0.08),
+    rgba(60, 161, 237, 0.08)
+  );
 }
-
-.tab-bar view.active {
-  background-color: #007bff;
-  color: #fff;
+.error-tag {
+  border-radius: 10%;
+  display: inline-block;
+  color: #e90000;
+  line-height: 50rpx;
+  font-size: 14px;
+  text-align: center;
+  width: 120rpx;
+  height: 50rpx;
+  background-color: rgba(233, 0, 0, 0.2);
+}
+.error-tag1 {
+  border-radius: 10%;
+  display: inline-block;
+  color: #696969;
+  line-height: 50rpx;
+  font-size: 14px;
+  text-align: center;
+  width: 120rpx;
+  height: 50rpx;
+  background-color: rgba(105, 105, 105, 0.2);
+}
+.success-tag {
+  border-radius: 10%;
+  color: #42c000;
+  line-height: 50rpx;
+  font-size: 14px;
+  width: 120rpx;
+  height: 50rpx;
+  display: inline-block;
+  background-color: rgba(226, 250, 214);
+}
+.icon-style {
+  margin: 15rpx;
+  width: 14px;
+  height: 14px;
 }
-</style>
+</style>

pages/home/firstmodel.vue

@@ -1,431 +0,0 @@
-<template>
-  <view class="container">
-    <!-- 建议放在外层 -->
-    <u-navbar
-      title="设备中心"
-      @leftClick="devicemenuShow"
-      :safeAreaInsetTop="true"
-    >
-      <view class="u-nav-slot" slot="left">
-        <u-icon name="list" size="20"> </u-icon>
-      </view>
-    </u-navbar>
-
-    <view v-show="menushow" class="menupage">
-      <DeviceMenu @menuClick="menuClick"></DeviceMenu>
-    </view>
-
-    <view v-show="!menushow" class="main">
-      <view class="u-page">
-        <u-list>
-          <u-list-item
-            class="itemback"
-            v-for="(item, index) in curlist"
-            :key="index"
-          >
-            <div @tap="openNewPage(item)">
-              <u-row gutter="5" customStyle="margin-bottom: 10px">
-                <u-col span="24">
-                  <image
-                    style="position: absolute; width: 18px; height: 18px"
-                    class="icon"
-                    :src="getIcon(TabCur)"
-                    alt="Icon"
-                  />
-                  <span class="title">{{ item.strinstallpos }}</span>
-                </u-col>
-              </u-row>
-              <u-row gutter="5" customStyle="margin-bottom: 10px">
-                <u-col span="3" style="margin-right: 5rpx">
-                  <div v-if="item.netStatus == 0" class="error-tag1">
-                    <image
-                      src="/static/model/connectFalse.svg"
-                      alt=""
-                      class="icon-style"
-                    />
-                    <span style="float: right">断开</span>
-                  </div>
-                  <div v-else class="success-tag">
-                    <image
-                      src="/static/model/connectTrue.svg"
-                      alt=""
-                      class="icon-style"
-                    />
-                    <span style="float: right">连接</span>
-                  </div>
-                </u-col>
-                <u-col span="4">
-                  <div v-if="item.warnFlag == 0" class="success-tag">
-                    <image
-                      src="/static/model/alarmTrue.svg"
-                      alt=""
-                      class="icon-style"
-                    />
-                    <span style="float: right">{{ item.warnLevel_str }}</span>
-                  </div>
-                  <div v-else class="error-tag">
-                    <image
-                      src="/static/model/alarmFalse.svg"
-                      alt=""
-                      class="icon-style"
-                    />
-                    <span style="float: right">{{ item.warnDes }}</span>
-                  </div>
-                </u-col>
-                <u-col span="5">
-                  <u--text class="timetext" :text="item.readTime"></u--text>
-                </u-col>
-              </u-row>
-              <view v-if="colums[TabCur + '_monitor'] != null">
-                <view
-                  class="datacard"
-                  v-for="(showitem, index) in colums[TabCur + '_monitor']"
-                  :key="index"
-                  v-show="
-                    showitem.appShow == 1 &&
-                    showitem.monitorcode != 'strinstallpos' &&
-                    showitem.monitorcode != 'netStatus' &&
-                    showitem.monitorcode != 'warnFlag' &&
-                    showitem.monitorcode != 'readTime' &&
-                    showitem.monitorcode != ''
-                  "
-                >
-                  <view
-                    :class="TabCur"
-                    style="padding-top: 10rpx; padding-bottom: 10rpx"
-                  >
-                    <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: 5rpx;
-                      "
-                    >
-                      {{
-                        item[showitem.monitorcode] == "2"
-                          ? "行人"
-                          : item[showitem.monitorcode] == "1"
-                          ? "行车"
-                          : "-"
-                      }}
-                    </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: 5rpx;
-                      "
-                    >
-                      {{
-                        item[showitem.monitorcode] == null ||
-                        item[showitem.monitorcode] == ""
-                          ? "-"
-                          : item[showitem.monitorcode]
-                      }}
-                    </view>
-                    <view
-                      v-else-if="showitem.datatype == 2"
-                      class="demo-layout bg-purple-light"
-                      style="color: #3787fe; font-size: 30rpx; margin-top: 5rpx"
-                    >
-                      {{
-                        item.readData[showitem.monitorcode] == null ||
-                        item.readData[showitem.monitorcode] == ""
-                          ? "-"
-                          : item.readData[showitem.monitorcode]
-                      }}
-                    </view>
-
-                    <view
-                      class="demo-layout bg-purple-light"
-                      style="
-                        margin-top: 6rpx;
-                        color: #677799;
-                        margin-bottom: 5rpx;
-                      "
-                    >
-                      {{ showitem.des }}
-                    </view>
-                  </view>
-                </view>
-              </view>
-            </div>
-          </u-list-item>
-        </u-list>
-      </view>
-    </view>
-  </view>
-</template>
-
-<script>
-import DeviceMenu from "./devicemenu/devicemenu.vue";
-import api from "@/api/api";
-export default {
-  data() {
-    return {
-      menushow: false,
-      TabCur: "gate",
-      curlist: [],
-      deviceList: {},
-      colums: {},
-    };
-  },
-  components: {
-    DeviceMenu,
-  },
-  props: ["showColum"],
-  watch: {
-    showColum(data) {
-      this.colums = data;
-    },
-  },
-  created() {
-    this.colums = this.showColum;
-  },
-  mounted() {
-    this.loadData(this.TabCur);
-    this.startTimer();
-  },
-  methods: {
-    startTimer() {
-      // 每隔一段时间执行某个操作
-      this.timer = setInterval(() => {
-        // 执行定时任务
-        this.loadData(this.TabCur);
-        console.log("定时任务执行中...");
-      }, 5000);
-    },
-    stopTimer() {
-      // 停止定时器
-      clearInterval(this.timer);
-    },
-    getIcon(itemValue) {
-      // 根据itemValue获取对应的图标路径，如果找不到对应关系则返回默认图标
-      return "/static/sidebar/" + itemValue + ".svg";
-    },
-    getValueIcon(itemValue) {
-      // 根据itemValue获取对应的图标路径，如果找不到对应关系则返回默认图标
-      return "/static/sidebar/" + itemValue + ".svg";
-    },
-    loadData(type) {
-      new Promise((resolve, reject) => {
-        api
-          .getDeviceMonitor({
-            devicetype: type,
-            pagetype: "normal",
-            filterParams: {},
-          })
-          .then((response) => {
-            if (response.data.code == 200) {
-              this.deviceList[type] = response.data.result.msgTxt[0].datalist;
-              this.curlist = this.deviceList[type];
-              this.curlist.forEach((item) => {
-                if (item.readData.frontGateOpen == 1) {
-                  item.readData.frontGateOpen = "打开";
-                } else {
-                  item.readData.frontGateOpen = "关闭";
-                }
-                if (item.readData.midGateOpen == 1) {
-                  item.readData.midGateOpen = "打开";
-                } else {
-                  item.readData.midGateOpen = "关闭";
-                }
-                if (item.readData.rearGateOpen == 1) {
-                  item.readData.rearGateOpen = "打开";
-                } else {
-                  item.readData.rearGateOpen = "关闭";
-                }
-                if (item.readData.midGateOpen == 1) {
-                  item.readData.midGateOpen = "打开";
-                } else {
-                  item.readData.midGateOpen = "关闭";
-                }
-              });
-            } else {
-              resolve(response);
-            }
-          })
-          .catch((error) => {
-            console.log("catch===>response", response);
-            reject(error);
-          });
-      });
-    },
-    devicemenuShow(e) {
-      this.menushow = !this.menushow;
-    },
-    menuClick(id) {
-      this.TabCur = id;
-      // 显示该分类的数据
-      this.curlist = this.deviceList[this.TabCur];
-
-      if (this.curlist == null) {
-        this.curlist = [];
-      }
-      // 选择设备分类，重新获取数据
-      this.loadData(this.TabCur);
-      this.menushow = false;
-    },
-    openNewPage(params) {
-      this.$destroy();
-      uni.navigateTo({
-        url: `/pages/home/detail/autodoor/autodoor?id=${params.deviceID}&name=${params.strinstallpos}&type=${this.TabCur}`,
-      });
-    },
-  },
-  destroyed() {
-    // 停止定时器
-    this.stopTimer();
-  },
-};
-</script>
-
-<style>
->>> .u-navbar--fixed {
-  /* margin-top: 20px; */
-}
-.main {
-  /* margin-top: 100rpx; */
-  display: flex;
-  flex-direction: column;
-}
-
-.card {
-  background-color: #ffffff;
-  margin: auto;
-  margin-top: 20rpx;
-  width: 10%;
-  height: 280rpx;
-  border: 1rpx solid #000000;
-  border-radius: 20rpx;
-}
-
-.menupage {
-  position: absolute;
-  z-index: 2;
-  width: 100%;
-}
-
-.timetext {
-  text-align: right;
-  float: right;
-}
-
-.itemback {
-  padding: 20rpx;
-  background-color: #ffffff;
-  margin-bottom: 5rpx;
-}
-
-.datacard .content {
-  width: 30rpx;
-  height: 30rpx;
-  left: 0rpx;
-  top: 0rpx;
-  position: absolute;
-}
-
-.datacard {
-  border-radius: 10rpx;
-  border: rgba(55, 135, 254, 0.28);
-  width: 30%;
-  margin: 1%;
-  float: left;
-  height: 105rpx;
-  text-align: center;
-  background: linear-gradient(
-    to right,
-    rgba(55, 135, 254, 0.08),
-    rgba(4, 184, 255, 0.08),
-    rgba(60, 161, 237, 0.08)
-  );
-}
-
-.datacard .gate {
-  background: linear-gradient(
-    to right,
-    rgba(75, 135, 254, 0.08),
-    rgba(24, 184, 255, 0.08),
-    rgba(80, 161, 237, 0.08)
-  );
-}
-
-.datacard .window {
-  background: linear-gradient(
-    to right,
-    rgba(55, 125, 254, 0.08),
-    rgba(4, 164, 255, 0.08),
-    rgba(60, 131, 237, 0.08)
-  );
-}
-
-.datacard .windrect {
-  background: linear-gradient(
-    to right,
-    rgba(85, 125, 254, 0.08),
-    rgba(34, 164, 255, 0.08),
-    rgba(90, 131, 237, 0.08)
-  );
-}
-
-.error-tag {
-  border-radius: 10%;
-  display: inline-block;
-  color: #e90000;
-  line-height: 50rpx;
-  font-size: 14px;
-  text-align: center;
-  float: left;
-  width: 180rpx;
-  height: 50rpx;
-  padding-right: 30rpx;
-  background-color: rgba(233, 0, 0, 0.2);
-}
-
-.error-tag1 {
-  border-radius: 10%;
-  display: inline-block;
-  color: #696969;
-  line-height: 50rpx;
-  font-size: 14px;
-  text-align: center;
-  margin-top: 10rpx;
-  float: left;
-  width: 120rpx;
-  height: 50rpx;
-  background-color: rgba(105, 105, 105, 0.2);
-}
-
-.success-tag {
-  border-radius: 10%;
-  color: #42c000;
-  line-height: 25px;
-  font-size: 14px;
-  width: 60px;
-  height: 26px;
-  padding-right: 15px;
-  background-color: rgba(226, 250, 214);
-}
-
-.icon-style {
-  margin: 7px;
-  width: 14px;
-  height: 14px;
-}
-
-.title {
-  margin-left: 40rpx;
-  float: left;
-  font-size: 28rpx;
-  font-weight: 400;
-}
-</style>

pages/home/home.vue

@@ -1,35 +1,276 @@
-<template name="home">
-  <view>
-    <!-- 其他页面内容 -->
-    <Firstmodel :showColum="showColum"></Firstmodel>
+<template>
+  <view class="container">
+    <!-- 建议放在外层 -->
+<!--    <u-navbar
+      title="设备中心"
+      @leftClick="devicemenuShow"
+      :safeAreaInsetTop="true"
+    >
+      <view class="u-nav-slot" slot="left">
+        <u-icon name="list" size="20"> </u-icon>
+      </view>
+    </u-navbar>
+
+    <view v-if="menushow" class="menupage">
+      <DeviceMenu @menuClick="menuClick"></DeviceMenu>
+    </view> -->
+
+    <view v-if="!menushow" class="main">
+      <view class="u-page">
+        <u-list>
+          <u-list-item
+            class="itemback"
+            v-for="(item, index) in curlist"
+            :key="index"
+          >
+            <div @tap="openNewPage(item)">
+              <u-row gutter="5" customStyle="margin-bottom: 10px">
+                <u-col span="24">
+                  <image
+                    style="position: absolute; width: 18px; height: 18px"
+                    class="icon"
+                    :src="getIcon(TabCur)"
+                    alt="Icon"
+                  />
+                  <span class="title">{{ item.strinstallpos }}</span>
+                </u-col>
+              </u-row>
+              <u-row gutter="5" customStyle="margin-bottom: 10px">
+                <u-col span="3" style="margin-right: 5rpx">
+                  <div v-if="item.netStatus == 0" class="error-tag1">
+                    <image
+                      src="/static/model/connectFalse.svg"
+                      alt=""
+                      class="icon-style"
+                    />
+                    <span style="float: right">断开</span>
+                  </div>
+                  <div v-else class="success-tag">
+                    <image
+                      src="/static/model/connectTrue.svg"
+                      alt=""
+                      class="icon-style"
+                    />
+                    <span style="float: right">连接</span>
+                  </div>
+                </u-col>
+                <u-col span="4">
+                  <div v-if="item.warnFlag == 0" class="success-tag">
+                    <image
+                      src="/static/model/alarmTrue.svg"
+                      alt=""
+                      class="icon-style"
+                    />
+                    <span style="float: right">{{ item.warnLevel_str }}</span>
+                  </div>
+                  <div v-else class="error-tag">
+                    <image
+                      src="/static/model/alarmFalse.svg"
+                      alt=""
+                      class="icon-style"
+                    />
+                    <span style="float: right">{{ item.warnDes }}</span>
+                  </div>
+                </u-col>
+                <u-col span="5">
+                  <u--text class="timetext" :text="item.readTime"></u--text>
+                </u-col>
+              </u-row>
+              <view v-if="colums[TabCur + '_monitor'] != null">
+                <view
+                  class="datacard"
+                  v-for="(showitem, index) in colums[TabCur + '_monitor']"
+                  :key="index"
+                  v-show="
+                    showitem.appShow == 1 &&
+                    showitem.monitorcode != 'strinstallpos' &&
+                    showitem.monitorcode != 'netStatus' &&
+                    showitem.monitorcode != 'warnFlag' &&
+                    showitem.monitorcode != 'readTime' &&
+                    showitem.monitorcode != ''
+                  "
+                >
+                  <view
+                    :class="TabCur"
+                    style="padding-top: 10rpx; padding-bottom: 10rpx"
+                  >
+                    <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: 5rpx;
+                      "
+                    >
+                      {{
+                        item[showitem.monitorcode] == "2"
+                          ? "行人"
+                          : item[showitem.monitorcode] == "1"
+                          ? "行车"
+                          : "-"
+                      }}
+                    </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: 5rpx;
+                      "
+                    >
+                      {{
+                        item[showitem.monitorcode] == null ||
+                        item[showitem.monitorcode] == ""
+                          ? "-"
+                          : item[showitem.monitorcode]
+                      }}
+                    </view>
+                    <view
+                      v-else-if="showitem.datatype == 2"
+                      class="demo-layout bg-purple-light"
+                      style="color: #3787fe; font-size: 30rpx; margin-top: 5rpx"
+                    >
+                      {{
+                        item.readData[showitem.monitorcode] == null ||
+                        item.readData[showitem.monitorcode] == ""
+                          ? "-"
+                          : item.readData[showitem.monitorcode]
+                      }}
+                    </view>
+
+                    <view
+                      class="demo-layout bg-purple-light"
+                      style="
+                        margin-top: 6rpx;
+                        color: #677799;
+                        margin-bottom: 5rpx;
+                      "
+                    >
+                      {{ showitem.des }}
+                    </view>
+                  </view>
+                </view>
+              </view>
+            </div>
+          </u-list-item>
+        </u-list>
+      </view>
+    </view>
   </view>
 </template>
 
 <script>
-import Firstmodel from "./firstmodel.vue";
-import { mapActions } from "vuex";
+import DeviceMenu from "./devicemenu/devicemenu.vue";
 import api from "@/api/api";
+import { nextTick } from "vue";
 export default {
-  components: {
-    Firstmodel,
-  },
-  name: "home",
-  watch: {},
   data() {
     return {
-      showColum: {},
+      menushow: false,
+      TabCur: "gate",
+      curlist: [],
+      deviceList: {},
+      colums: {},
     };
   },
+  components: {
+    DeviceMenu,
+  },
+  props: ["showColum", 'deviceType'],
+  watch: {
+    showColum(data) {
+      this.colums = data;
+    },
+	deviceType: {
+		async handler (data) {
+			if(data){
+				this.TabCur = data;
+				this.curlist = this.deviceList[this.TabCur];
+				
+				if (this.curlist == null) {
+							this.curlist = [];
+				}
+				// 选择设备分类，重新获取数据
+				await this.loadData(this.TabCur);
+				this.$emit('setMenushow', {
+									menushow: false
+				});
+			}
+		  
+		  
+		},
+		immediate: true
+	}
+  },
+  created() {
+    this.colums = this.showColum;
+  },
+  async mounted() {
+    await this.loadData(this.TabCur);
+    this.startTimer();
+  },
   methods: {
-    getShowColum() {
-      new Promise((resolve, reject) => {
+    startTimer() {
+      // 每隔一段时间执行某个操作
+      this.timer = setInterval(async() => {
+        // 执行定时任务
+        await this.loadData(this.deviceType);
+        console.log("定时任务执行中...");
+      }, 5000);
+    },
+    stopTimer() {
+      // 停止定时器
+      clearInterval(this.timer);
+    },
+    getIcon(itemValue) {
+      // 根据itemValue获取对应的图标路径，如果找不到对应关系则返回默认图标
+      return "/static/sidebar/" + itemValue + ".svg";
+    },
+    getValueIcon(itemValue) {
+      // 根据itemValue获取对应的图标路径，如果找不到对应关系则返回默认图标
+      return "/static/sidebar/" + itemValue + ".svg";
+    },
+    loadData(type) {
+      return new Promise((resolve, reject) => {
         api
-          .getShowColum({})
+          .getDeviceMonitor({
+            devicetype: type,
+            pagetype: "normal",
+            filterParams: {},
+          })
           .then((response) => {
             if (response.data.code == 200) {
-              var showlist = response.data.result;
-              this.$store.commit("SET_SHOWCOLUM", showlist);
-              this.showColum = showlist;
+              this.deviceList[type] = response.data.result.msgTxt[0].datalist;
+              this.curlist = this.deviceList[type];
+              this.curlist.forEach((item) => {
+                if (item.readData.frontGateOpen == 1) {
+                  item.readData.frontGateOpen = "打开";
+                } else {
+                  item.readData.frontGateOpen = "关闭";
+                }
+                if (item.readData.midGateOpen == 1) {
+                  item.readData.midGateOpen = "打开";
+                } else {
+                  item.readData.midGateOpen = "关闭";
+                }
+                if (item.readData.rearGateOpen == 1) {
+                  item.readData.rearGateOpen = "打开";
+                } else {
+                  item.readData.rearGateOpen = "关闭";
+                }
+                if (item.readData.midGateOpen == 1) {
+                  item.readData.midGateOpen = "打开";
+                } else {
+                  item.readData.midGateOpen = "关闭";
+                }
+              });
             } else {
               resolve(response);
             }
@@ -40,39 +281,172 @@ export default {
           });
       });
     },
+    devicemenuShow(e) {
+      this.menushow = !this.menushow;
+    },
+    // menuClick(id) {
+    //   this.TabCur = id;
+    //   // 显示该分类的数据
+    //   this.curlist = this.deviceList[this.TabCur];
+
+    //   if (this.curlist == null) {
+    //     this.curlist = [];
+    //   }
+    //   // 选择设备分类，重新获取数据
+    //   this.loadData(this.TabCur);
+    //   this.menushow = false;
+    // },
+    openNewPage(params) {
+      this.$destroy();
+      uni.navigateTo({
+        url: `/pages/home/detail/autodoor/autodoor?id=${params.deviceID}&name=${params.strinstallpos}&type=${this.TabCur}`,
+      });
+    },
   },
-  created() {
-    this.getShowColum();
+  destroyed() {
+    // 停止定时器
+    this.stopTimer();
   },
-  onLoad() {},
 };
 </script>
 
-<style scoped>
-.cu-list.grid > .cu-item {
-  padding: 0px 0px;
-}
-.line2-icon {
-  width: 60px;
-  height: 60px;
+<style>
+>>> .u-navbar--fixed {
+  /* margin-top: 20px; */
 }
-.tab-bar {
+.main {
+  /* margin-top: 100rpx; */
   display: flex;
-  justify-content: space-around;
-  padding: 10px;
-  background-color: #eee;
+  flex-direction: column;
+}
+
+.card {
+  background-color: #ffffff;
+  margin: auto;
+  margin-top: 20rpx;
+  width: 10%;
+  height: 280rpx;
+  border: 1rpx solid #000000;
+  border-radius: 20rpx;
 }
 
-.tab-bar view {
-  flex: 1;
+.menupage {
+  position: absolute;
+  z-index: 2;
+  width: 100%;
+}
+
+.timetext {
+  text-align: right;
+  float: right;
+}
+
+.itemback {
+  padding: 20rpx;
+  background-color: #ffffff;
+  margin-bottom: 5rpx;
+}
+
+.datacard .content {
+  width: 30rpx;
+  height: 30rpx;
+  left: 0rpx;
+  top: 0rpx;
+  position: absolute;
+}
+
+.datacard {
+  border-radius: 10rpx;
+  border: rgba(55, 135, 254, 0.28);
+  width: 30%;
+  margin: 1%;
+  float: left;
+  height: 105rpx;
   text-align: center;
-  padding: 10px;
-  border-radius: 5px;
-  cursor: pointer;
+  background: linear-gradient(
+    to right,
+    rgba(55, 135, 254, 0.08),
+    rgba(4, 184, 255, 0.08),
+    rgba(60, 161, 237, 0.08)
+  );
+}
+
+.datacard .gate {
+  background: linear-gradient(
+    to right,
+    rgba(75, 135, 254, 0.08),
+    rgba(24, 184, 255, 0.08),
+    rgba(80, 161, 237, 0.08)
+  );
+}
+
+.datacard .window {
+  background: linear-gradient(
+    to right,
+    rgba(55, 125, 254, 0.08),
+    rgba(4, 164, 255, 0.08),
+    rgba(60, 131, 237, 0.08)
+  );
+}
+
+.datacard .windrect {
+  background: linear-gradient(
+    to right,
+    rgba(85, 125, 254, 0.08),
+    rgba(34, 164, 255, 0.08),
+    rgba(90, 131, 237, 0.08)
+  );
+}
+
+.error-tag {
+  border-radius: 10%;
+  display: inline-block;
+  color: #e90000;
+  line-height: 50rpx;
+  font-size: 14px;
+  text-align: center;
+  float: left;
+  width: 180rpx;
+  height: 50rpx;
+  padding-right: 30rpx;
+  background-color: rgba(233, 0, 0, 0.2);
+}
+
+.error-tag1 {
+  border-radius: 10%;
+  display: inline-block;
+  color: #696969;
+  line-height: 50rpx;
+  font-size: 14px;
+  text-align: center;
+  margin-top: 10rpx;
+  float: left;
+  width: 120rpx;
+  height: 50rpx;
+  background-color: rgba(105, 105, 105, 0.2);
+}
+
+.success-tag {
+  border-radius: 10%;
+  color: #42c000;
+  line-height: 25px;
+  font-size: 14px;
+  width: 60px;
+  height: 26px;
+  padding-right: 15px;
+  background-color: rgba(226, 250, 214);
+}
+
+.icon-style {
+  margin: 7px;
+  width: 14px;
+  height: 14px;
 }
 
-.tab-bar view.active {
-  background-color: #007bff;
-  color: #fff;
+.title {
+  margin-left: 40rpx;
+  float: left;
+  font-size: 28rpx;
+  font-weight: 400;
 }
 </style>

pages/operation/operation.vue

@@ -1,77 +1,292 @@
-<template name="operation">
-  <view>
-    <!-- 其他页面内容 -->
-    <OperationModel :showColum="showColum"></OperationModel>
+<template>
+  <view class="container">
+    <!-- 建议放在外层 -->
+<!--    <u-navbar
+      title="操作历史"
+      @leftClick="devicemenuShow"
+      :safeAreaInsetTop="true"
+    >
+      <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-if="!menushow" class="main">
+      <view class="u-page">
+        <div class="flcard">
+          <div class="btns">
+            <u-button
+              type="primary"
+              shape="circle"
+              :text="StartTime ? StartTime : '起始时间'"
+              @click="dataShow = true"
+            ></u-button>
+            <u-button
+              type="primary"
+              shape="circle"
+              :text="EndTime ? EndTime : '结束时间'"
+              @click="dataShow1 = true"
+            ></u-button>
+            <u-icon
+              size="30"
+              color="#3c9cff"
+              name="search"
+              @click="checkHistoryData"
+            ></u-icon>
+          </div>
+          <u-datetime-picker
+            :show="dataShow"
+            mode="datetime"
+            @cancel="dataShow = false"
+            @confirm="selectStartTime"
+            v-model="dataTime"
+          ></u-datetime-picker>
+          <u-datetime-picker
+            :show="dataShow1"
+            mode="datetime"
+            @cancel="dataShow1 = false"
+            @confirm="selectEndTime"
+            v-model="dataTime"
+          ></u-datetime-picker>
+        </div>
+        <u-list>
+          <u-list-item
+            class="itemback"
+            v-for="(item, index) in historyData"
+            :key="index"
+          >
+            <view>
+              <view class="content flcard">
+                <view class="datacard user">
+                  <view style="margin: 20rpx 20rpx">
+                    <text class="text-style">{{ item.realname }}</text>
+                  </view>
+                  <view style="margin: 20rpx 20rpx; font-size: small"
+                    >用户</view
+                  >
+                </view>
+                <view class="datacard device">
+                  <view style="margin: 20rpx 20rpx">
+                    <text class="text-style">{{ item.devicename }}</text>
+                  </view>
+                  <view style="margin: 20rpx 20rpx; font-size: small"
+                    >操作设备</view
+                  >
+                </view>
+                <view class="datacard record">
+                  <view style="margin: 20rpx 20rpx">
+                    <text class="text-style">{{ item.strremark }}</text>
+                  </view>
+                  <view style="margin: 20rpx 20rpx; font-size: small"
+                    >操作记录</view
+                  >
+                </view>
+                <view class="datacard time">
+                  <view style="margin: 20rpx 20rpx">
+                    <text class="text-style">{{ item.createTime }}</text>
+                  </view>
+                  <view style="margin: 20rpx 20rpx; font-size: small"
+                    >操作时间</view
+                  >
+                </view>
+              </view>
+            </view>
+          </u-list-item>
+        </u-list>
+      </view>
+    </view>
   </view>
 </template>
 
 <script>
-import OperationModel from "./operationModel.vue";
+import DeviceMenu from "./devicemenu/devicemenu.vue";
 import api from "@/api/api";
+import dayjs from "dayjs";
 export default {
-  components: {
-    OperationModel,
-  },
-  name: "operation",
-  watch: {},
   data() {
     return {
-      showColum: {},
+      menushow: false,
+      TabCur: "gate",
+      dataShow: false,
+      dataShow1: false,
+      dataTime: dayjs().format("YYYY-MM-DD HH:mm:ss"),
+      // deviceType: "gate", //设备类型
+      StartTime: "",
+      EndTime: "",
+      historyData: [],
     };
   },
+  components: {
+    DeviceMenu,
+  },
+  props: ["showColum", 'deviceType'],
+  watch: {
+    showColum(data) {
+      this.colums = data;
+    },
+  	deviceType: {
+  		handler (data) {
+  			if(data){
+  				this.TabCur = data;
+  				// 选择设备分类，重新获取数据
+  				this.$emit('setMenushow', {
+					menushow: false
+  				});
+  			}
+  		  
+  		  
+  		},
+  		immediate: true
+  	}
+  },
+  created() {
+    this.colums = this.showColum;
+    const startTime =new Date().getTime() - 3600 * 1000 * 24 * 30;
+    const endTime = new Date();
+    this.StartTime = dayjs(startTime).format("YYYY-MM-DD HH:mm:ss");
+    this.EndTime = dayjs(endTime).format("YYYY-MM-DD HH:mm:ss");
+    this.checkHistoryData();
+  },
+  mounted() {
+	  this.TabCur = this.deviceType;
+  },
   methods: {
-    getShowColum() {
+    //选择起始时间
+    selectStartTime(e) {
+      const startTime = e.value;
+      const formattedTime = dayjs(startTime).format("YYYY-MM-DD HH:mm:ss");
+      this.StartTime = formattedTime;
+      this.dataShow = false;
+    },
+    //选择起始时间
+    selectEndTime(e) {
+      const endTime = e.value;
+      const formattedTime = dayjs(endTime).format("YYYY-MM-DD HH:mm:ss");
+      this.EndTime = formattedTime;
+      this.dataShow1 = false;
+    },
+    devicemenuShow(e) {
+      this.menushow = !this.menushow;
+    },
+    menuClick(id) {
+      this.TabCur = id;
+      this.menushow = false;
+    },
+    //查询历史数据
+    checkHistoryData() {
+      const params = {
+        createTime_begin: this.StartTime,
+        createTime_end: this.EndTime,
+        pageNo: 1,
+        pageSize: 10000,
+        devicetype: this.TabCur + "*",
+      };
       new Promise((resolve, reject) => {
         api
-          .getShowColum({})
+          .getOpreateHistory(params)
           .then((response) => {
             if (response.data.code == 200) {
-              var showlist = response.data.result;
-              this.$store.commit("SET_SHOWCOLUM", showlist);
-              this.showColum = showlist;
+              this.historyData = response.data.result.records;
             } else {
               resolve(response);
             }
           })
           .catch((error) => {
-            console.log("catch===>response", response);
             reject(error);
           });
       });
     },
   },
-  created() {
-    this.getShowColum();
-  },
-  onLoad() {},
+  destroyed() {},
 };
 </script>
 
-<style scoped>
-.cu-list.grid > .cu-item {
-  padding: 0px 0px;
+<style>
+.main {
+  display: flex;
+  flex-direction: column;
 }
-.line2-icon {
-  width: 60px;
-  height: 60px;
+.menupage {
+  position: absolute;
+  z-index: 2;
+  /* top: 40rpx; */
+  height: calc(100% - 40rpx);
+  width: 100%;
 }
-.tab-bar {
+.btns {
   display: flex;
-  justify-content: space-around;
-  padding: 10px;
-  background-color: #eee;
 }
-
-.tab-bar view {
-  flex: 1;
-  text-align: center;
-  padding: 10px;
-  border-radius: 5px;
-  cursor: pointer;
+.flcard {
+  padding: 20rpx;
+  background-color: #ffffff;
+  margin-bottom: 5rpx;
+}
+.text-style {
+  color: #3787fe;
+  font-weight: bold;
 }
 
-.tab-bar view.active {
-  background-color: #007bff;
-  color: #fff;
+.itemback {
+  padding: 20rpx;
+  background-color: #ffffff;
+  margin-bottom: 5rpx;
+}
+.datacard {
+  width: 48%;
+  margin: 1%;
+  float: left;
+  height: 120rpx;
+  border-radius: 10px;
+}
+.time {
+  background: url(/static/operation/operationTime.png),
+    linear-gradient(
+      to right,
+      rgba(55, 135, 254, 0.08),
+      rgba(4, 184, 255, 0.08),
+      rgba(60, 161, 237, 0.08)
+    );
+  background-size: auto 100%;
+  background-position: right;
+  background-repeat: no-repeat;
+}
+.record {
+  background: url(/static/operation/operationRecord.png),
+    linear-gradient(
+      to right,
+      rgba(55, 135, 254, 0.08),
+      rgba(4, 184, 255, 0.08),
+      rgba(60, 161, 237, 0.08)
+    );
+  background-size: auto 100%;
+  background-position: right;
+  background-repeat: no-repeat;
+}
+.user {
+  background: url(/static/operation/user.png),
+    linear-gradient(
+      to right,
+      rgba(55, 135, 254, 0.08),
+      rgba(4, 184, 255, 0.08),
+      rgba(60, 161, 237, 0.08)
+    );
+  background-size: auto 100%;
+  background-position: right;
+  background-repeat: no-repeat;
+}
+.device {
+  background: url(/static/operation/operationDevice.png),
+    linear-gradient(
+      to right,
+      rgba(55, 135, 254, 0.08),
+      rgba(4, 184, 255, 0.08),
+      rgba(60, 161, 237, 0.08)
+    );
+  background-size: auto 100%;
+  background-position: right;
+  background-repeat: no-repeat;
 }
 </style>