[Feat 0000] 完成操作历史接口对接 页面功能初步实现

api/api.js

@@ -69,6 +69,14 @@ const apiService = {
       urlParams.toString();
     return http.get(url);
   },
+  //获取操作历史
+  getOpreateHistory(params) {
+    const urlParams = new URLSearchParams(params);
+    const url =
+      "/ventanaly-device/safety/ventanalyDevicesetLog/list?" +
+      urlParams.toString();
+    return http.get(url);
+  },
   /**
    * 获取文件访问路径
    * @param avatar

pages/index/index.vue

@@ -12,6 +12,11 @@
       :key="commponent3Key"
     ></warndata>
     <operation v-if="PageCur == 'operation'" :key="commponent4Key"></operation>
+    <filecenter
+      :cur="PageCur"
+      v-if="PageCur == 'filecenter'"
+      :key="commponent5Key"
+    ></filecenter>
     <u-tabbar
       :value="PageCur"
       @change="(name) => (PageCur = name)"
@@ -22,28 +27,33 @@
       <u-tabbar-item
         text="设备监测"
         name="home"
-        icon="file-text"
+        icon="list-dot"
         @click="NavChange('home')"
       ></u-tabbar-item>
       <u-tabbar-item
         text="历史数据"
         name="history"
-        icon="home"
+        icon="calendar"
         @click="NavChange('history')"
       ></u-tabbar-item>
       <u-tabbar-item
         text="操作记录"
-        icon="account"
-        name="people"
+        icon="setting"
+        name="operation"
         @click="NavChange('operation')"
       ></u-tabbar-item>
       <u-tabbar-item
         text="预警分析"
-        icon="play-right"
+        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>

pages/operation/operationModel.vue

@@ -14,22 +14,92 @@
     <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="起始时间"
+              @click="dataShow = true"
+            ></u-button>
+            <u-button
+              type="primary"
+              shape="circle"
+              text="结束时间"
+              @click="dataShow1 = true"
+            ></u-button>
+            <u-button
+              type="primary"
+              shape="circle"
+              text="查询"
+              @click="checkHistoryData"
+            ></u-button>
+          </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 class="datacard">
+              <view class="content flcard">
+                <view
+                  class="demo-layout bg-purple-light"
+                  style="margin-top: 10rpx; color: #3787fe"
+                  >用户:{{ item.realname }}</view
+                >
+                <view
+                  class="demo-layout bg-purple-light"
+                  style="margin-top: 10rpx; color: #3787fe"
+                  >操作设备:{{ item.devicename }}</view
+                >
+                <view
+                  class="demo-layout bg-purple-light"
+                  style="margin-top: 10rpx; color: #3787fe"
+                  >操作记录:{{ item.strremark }}</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: [],
-      deviceList: {},
-      scrollLeft: 0,
-      currentTab: 0,
-      colums: {},
+      dataShow: false,
+      dataShow1: false,
+      dataTime: dayjs().toDate(),
+      deviceType: "", //设备类型
+      StartTime: "",
+      EndTime: "",
+      historyData: [],
     };
   },
   components: {
@@ -46,19 +116,77 @@ export default {
     this.colums = this.showColum;
   },
   mounted() {},
-  methods: {},
+  methods: {
+    //选择起始时间
+    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 = true;
+    },
+    menuClick(id) {
+      this.TabCur = id;
+      this.deviceType = this.TabCur;
+      this.menushow = false;
+    },
+    //查询历史数据
+    checkHistoryData() {
+      const params = {
+        createTime_begin: this.StartTime,
+        createTime_end: this.EndTime,
+        pageNo: 1,
+        pageSize: 10000,
+        devicetype: this.deviceType + "*",
+      };
+      new Promise((resolve, reject) => {
+        api
+          .getOpreateHistory(params)
+          .then((response) => {
+            if (response.data.code == 200) {
+              this.historyData = response.data.result.records;
+            } else {
+              resolve(response);
+            }
+          })
+          .catch((error) => {
+            reject(error);
+          });
+      });
+    },
+  },
   destroyed() {},
 };
 </script>
 
 <style>
-.top-nav {
-  height: 100rpx;
-  line-height: 100rpx;
-  background-color: #2aa9f3;
-  color: #ddaaaa;
+.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;
 }
-.top-nav2 {
+.flcard {
+  padding: 20rpx;
   background-color: #ffffff;
+  margin-bottom: 5rpx;
 }
 </style>