智能安全帽 添加 在线时长管理 页面

src/router/index.js

@@ -698,6 +698,15 @@ const routes2 = [{
                         "@/views/projectFront/smartSafeHat/deviceCentral/deviceCentral.vue"
                     ),
             },
+            // 智能安全帽--在线时长管理
+            {
+                path: "/project/smartSafeHat/onlineTime",
+                name: "智能安全帽_设备中台",
+                component: () =>
+                    import (
+                        "@/views/projectFront/smartSafeHat/onlineTime/onlineTime.vue"
+                    ),
+            },
             // 智能安全带--数据台账
             {
                 path: "/project/smartSeatBelts/dataPay",

src/views/projectFront/smartSafeHat/onlineTime/onlineTime.vue

@@ -0,0 +1,160 @@
+<template>
+  <div class="fullHeight">
+    <div class="searchBox whiteBlock">
+      <el-form :inline="true" ref="searchForm" :model="searchForm" size="medium">
+        <el-form-item>
+          <el-date-picker
+            v-model="dateTime"
+            type="daterange"
+            value-format="yyyy-MM-dd"
+            range-separator="至"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+          >
+          </el-date-picker>
+          <el-button type="primary" style="margin-left: 24px" @click="downloadFn">导出</el-button>
+        </el-form-item>
+      </el-form>
+    </div>
+    <div class="table_wrap whiteBlock">
+      <vue-scroll style="height: 100%">
+        <el-table class="tables" :data="tableData" @selection-change="handleSelectionChange">
+          <el-table-column type="selection" width="55" align="center"></el-table-column>
+          <el-table-column prop="workerName" align="center" label="人员名称" width="280"></el-table-column>
+          <el-table-column prop="devSn" align="center" label="设备序号"></el-table-column>
+          <el-table-column prop="fenceName" label="围栏名称" align="center">
+            <template slot-scope="scope">{{ scope.row.fenceName || '-' }}</template>
+          </el-table-column>
+        </el-table>
+      </vue-scroll>
+    </div>
+  </div>
+</template>
+<script>
+import { getSafeHatEquipmentCentralPageApi } from '@/assets/js/api/smartSafeHat/smartSafeHat.js'
+export default {
+  mounted() {},
+  created() {
+    this.getPage()
+  },
+  computed: {
+    headers() {
+      return { Authorization: this.$store.state.userInfo.token }
+    }
+  },
+  data() {
+    return {
+      pagInfo: {
+        pageNo: 1, //页数
+        pageSize: 10, //条数
+        total: 0 //总条数
+      },
+      dialogShow: false,
+      dateTime: [],
+      multipleSelection: [],
+      tableData: [],
+      searchForm: {},
+      messageList: []
+    }
+  },
+  methods: {
+    // 下载模板
+    downloadFn() {
+      if (!this.multipleSelection.length) {
+        return this.$message.error('请选择要导出的数据')
+      }
+      if (!this.dateTime.length) {
+        return this.$message.error('请选择时间范围')
+      }
+      const ids = this.multipleSelection.map(item => item.extUserId).filter(i=>i && i.trim()).join(',')
+      if (!ids) {
+        return this.$message.error('导出失败,用户信息有误')
+      }
+      let data = {
+        projectSn: this.$store.state.projectSn,
+        stime: this.dateTime[0],
+        etime: this.dateTime[1],
+        userId: ids
+      }
+      let api = this.$http.defaults.baseURL + 'xmgl/safetyHatData/exportUseHistory?'
+      //拼接url参数
+      const entries = Object.entries(data)
+      entries.map(([key, value], index) => {
+        api += `${key}=${value}${index + 1 < entries.length ? '&' : ''}`
+      })
+      console.log('api', api)
+      fetch(api, {
+        method: 'get',
+        headers: {
+          Authorization: this.$store.state.userInfo.token,
+          'Content-Type': 'application/json' // 设置请求头的内容类型为JSON
+        }
+      })
+        .then(response => {
+          // 处理响应
+          if (!response.ok) {
+            throw new Error('下载失败')
+          }
+          return response.blob()
+        })
+        .then(blob => {
+          // 创建一个下载链接X
+          const url = window.URL.createObjectURL(blob)
+          // 创建一个<a>元素
+          const link = document.createElement('a')
+          link.href = url
+          link.download = '在线统计时长.xlsx' // 指定下载文件的文件名
+          // 模拟点击下载链接
+          document.body.appendChild(link)
+          link.click()
+          document.body.removeChild(link)
+          // 释放URL对象
+          window.URL.revokeObjectURL(url)
+          // 处理导出的文件
+          // 这里可以使用blob对象来获取导出的文件内容或者将其保存到本地
+          console.log('下载', link, url)
+        })
+        .catch(error => {
+          // 处理错误
+          console.error(error)
+        })
+    },
+    async getPage() {
+      await getSafeHatEquipmentCentralPageApi({
+        pageNo: 1,
+        pageSize: 9999,
+        projectSn: this.$store.state.projectSn,
+        devSn: this.searchForm.devSn,
+        type: this.type
+      }).then(result => {
+        if (result.success) {
+          this.tableData = result.result.records
+        }
+      })
+    },
+    handleSelectionChange(val) {
+      console.info(val)
+      this.multipleSelection = val
+    }
+  }
+}
+</script>
+<style lang="less" scoped>
+.tables {
+  // min-height: 0;
+}
+.tables2 {
+  min-height: auto;
+}
+.textStyle {
+  width: 140px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.tableBtns {
+  display: flex;
+  justify-content: center;
+  align-item: center;
+}
+</style>