业务管理和门禁管理的出入记录

src/views/IntegratedMonitor/warning/warningFault.vue

@@ -421,7 +421,7 @@ export default {
     },
     closeHandleDialog() {
       this.handleDialog = false
-    },
+    }
     // changeTime(row, column) {
     //   const data = row[column.property]
     //   if (data === undefined) { return '' }

src/views/movingRingMonitoring/accessControl/accessRecord.vue

 <!--出入记录-->
 <template>
-
+  <div id="container_max" class="accessModule">
+    <div class="accessHead">
+      <span style="font-size:24px;margin-right: 10px ">门禁出入记录</span>
+    </div>
+    <div class="accessBody">
+      <el-select v-model="value" placeholder="请选择">
+        <el-option
+          v-for="item in options"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value">
+        </el-option>
+      </el-select>
+      <el-date-picker
+          v-model="dateTime"
+          type="daterange"
+          align="right"
+          unlink-panels
+          range-separator="至"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+          :picker-options="pickerOptions">
+        </el-date-picker>
+      <el-input
+        placeholder="请输入人员名称"
+        prefix-icon="el-icon-search"
+        v-model="inputPersonName"
+        style="width: 20%">
+      </el-input>
+      <el-button @click="exportAccess" style="float: right">导出</el-button>
+      <el-table
+        :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
+        border
+        style="width: 100%;padding-top: 20px"
+      >
+        <el-table-column label="序号" prop="idNum" show-overflow-tooltip />
+        <el-table-column label="人员姓名" prop="personName" show-overflow-tooltip />
+        <el-table-column label="通行标识" prop="trafficSigns" show-overflow-tooltip />
+        <el-table-column label="出/入" prop="outOrIn" show-overflow-tooltip />
+        <el-table-column label="门禁名称" prop="accessControlName" show-overflow-tooltip />\
+        <el-table-column label="采集时间" prop="takeTime" show-overflow-tooltip />\
+        <el-table-column label="备注" prop="remarks" show-overflow-tooltip />\
+      </el-table>
+      <el-pagination
+        align='center'
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+        :current-page="currentPage"
+        :page-sizes="[5,10,20]"
+        :page-size="pageSize"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="tableData.length">
+      </el-pagination>
+    </div>
+  </div>
 </template>
 
 <script>
+import moment from 'moment'
 export default {
-  name: 'AccessRecord'
+  name: 'AccessRecord',
+  data() {
+    return {
+      tableData: [{
+        idNum: '1',
+        personName: '张三',
+        trafficSigns: '',
+        outOrIn: '',
+        accessControlName: '',
+        takeTime: moment(Date()).format('YYYY-MM-DD HH:mm'),
+        remarks: ''
+      }, {
+        idNum: '2',
+        personName: '李四',
+        trafficSigns: '',
+        outOrIn: '',
+        accessControlName: '',
+        takeTime: moment(Date()).format('YYYY-MM-DD HH:mm'),
+        remarks: ''
+      }, {
+        idNum: '3',
+        personName: '王二',
+        trafficSigns: '',
+        outOrIn: '',
+        accessControlName: '',
+        takeTime: moment(Date()).format('YYYY-MM-DD HH:mm'),
+        remarks: ''
+      }, {
+        idNum: '4',
+        personName: '张三',
+        trafficSigns: '',
+        outOrIn: '',
+        accessControlName: '',
+        takeTime: moment(Date()).format('YYYY-MM-DD HH:mm'),
+        remarks: ''
+      }, {
+        idNum: '5',
+        personName: '王二',
+        trafficSigns: '',
+        outOrIn: '',
+        accessControlName: '',
+        takeTime: moment(Date()).format('YYYY-MM-DD HH:mm'),
+        remarks: ''
+      }, {
+        idNum: '6',
+        personName: '李四',
+        trafficSigns: '',
+        outOrIn: '',
+        accessControlName: '',
+        takeTime: moment(Date()).format('YYYY-MM-DD HH:mm'),
+        remarks: ''
+      }, {
+        idNum: '7',
+        personName: '李四',
+        trafficSigns: '',
+        outOrIn: '',
+        accessControlName: '',
+        takeTime: moment(Date()).format('YYYY-MM-DD HH:mm'),
+        remarks: ''
+      }, {
+        idNum: '8',
+        personName: '王二',
+        trafficSigns: '',
+        outOrIn: '',
+        accessControlName: '',
+        takeTime: moment(Date()).format('YYYY-MM-DD HH:mm'),
+        remarks: ''
+      }, {
+        idNum: '9',
+        personName: '张三',
+        trafficSigns: '',
+        outOrIn: '',
+        accessControlName: '',
+        takeTime: moment(Date()).format('YYYY-MM-DD HH:mm'),
+        remarks: ''
+      }, {
+        idNum: '10',
+        personName: '张三',
+        trafficSigns: '',
+        outOrIn: '',
+        accessControlName: '',
+        takeTime: moment(Date()).format('YYYY-MM-DD HH:mm'),
+        remarks: ''
+      }],
+      currentPage: 1, // 当前页码
+      total: 20, // 总条数
+      pageSize: 10, // 每页的数据条数
+      dateTime: '',
+      pickerOptions: {
+        shortcuts: [{
+          text: '最近一周',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近一个月',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '昨天',
+          onClick(picker) {
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 1)
+            picker.$emit('pick', [start, start])
+          }
+        }]
+      },
+      options: [{
+        value: 1,
+        label: '全部门禁'
+      }, {
+        value: 2,
+        label: '南大门'
+      }, {
+        value: 3,
+        label: '北大门'
+      }, {
+        value: 4,
+        label: '东大门'
+      }, {
+        value: 5,
+        label: '西大门'
+      }],
+      value: 1,
+      inputPersonName: ''
+    }
+  },
+  methods: {
+    handleSizeChange(val) {
+      console.log(`每页 ${val} 条`)
+      this.currentPage = 1
+      this.pageSize = val
+    },
+    handleCurrentChange(val) {
+      console.log(`当前页: ${val}`)
+      this.currentPage = val
+    },
+    exportAccess() {
+      this.$confirm('是否导出数据', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {})
+    }
+  }
 }
 </script>
 
-<style scoped>
-
+<style lang="scss">
+.accessModule {
+  .accessHead {
+    height: 58px;
+    padding: 15px 20px 10px 20px;
+    background-color: #edeef3 !important;
+    border-bottom: 1px solid #DBDDE3;
+  }
+  .accessBody {
+    padding: 15px;
+  }
+}
 </style>

src/views/movingRingMonitoring/accessControl/dataSourceConfiguration.vue

+<template>
+  <div id="container_max" class="accessModule">
+    <div class="accessHead">
+      <span style="font-size:24px;margin-right: 10px ">数据源配置</span>
+    </div>
+    <div class="accessBody">
+      <el-input
+        placeholder="数据源名称"
+        prefix-icon="el-icon-search"
+        v-model="inputDataName"
+        style="width: 20%">
+      </el-input>
+      <span style="margin-left: 20px">状态：</span>
+      <el-select v-model="value" placeholder="请选择">
+        <el-option
+          v-for="item in options"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value">
+        </el-option>
+      </el-select>
+      <el-button @click="addDataSource" style="margin-left: 300px" type="success">添加数据源</el-button>
+      <el-button @click="allStart" style="" type="success">批量启用</el-button>
+      <el-button @click="allEnd" style="" type="warning">批量停用</el-button>
+      <el-button @click="allDelete" style="" type="warning">批量删除</el-button>
+      <el-table
+        :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
+        border
+        style="width: 100%;padding-top: 20px"
+      >
+        <el-table-column
+          type="selection"
+          width="55">
+        </el-table-column>
+        <el-table-column label="序号" prop="idNum" show-overflow-tooltip />
+        <el-table-column label="数据源名称" prop="dataName" show-overflow-tooltip />
+        <el-table-column label="品牌" prop="brand" show-overflow-tooltip />
+        <el-table-column label="门禁数量" prop="accessNum" show-overflow-tooltip />
+        <el-table-column label="状态" width="55" prop="type" show-overflow-tooltip />\
+        <el-table-column label="备注描述" prop="remarks" show-overflow-tooltip />\
+        <el-table-column label="操作">
+          <template slot-scope="scope">
+            <el-link style="color: forestgreen" @click="stopRow(scope.row)">停用</el-link>
+            <el-link style="color: forestgreen" @click="updateRow(scope.row)">编辑</el-link>
+            <el-link style="color: forestgreen" @click="deleteRow(scope.row)">删除</el-link>
+            <el-link style="color: forestgreen" @click="queryAccess(scope.row)">查看门禁</el-link>
+          </template>
+        </el-table-column>
+      </el-table>
+      <el-pagination
+        align='center'
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+        :current-page="currentPage"
+        :page-sizes="[5,10,20]"
+        :page-size="pageSize"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="tableData.length">
+      </el-pagination>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'DataSourceConfiguration',
+  data() {
+    return {
+      inputDataName: '',
+      options: [
+        {
+          value: 1,
+          label: '全部'
+        },
+        {
+          value: 2,
+          label: '启用'
+        },
+        {
+          value: 3,
+          label: '停用'
+        }
+      ],
+      value: 1,
+      tableData: [
+        {
+          idNum: '1',
+          dataName: '3546.sdf',
+          brand: '测试品牌1',
+          accessNum: '22',
+          type: '启用',
+          remarks: ''
+        }, {
+          idNum: '2',
+          dataName: '54.fs',
+          brand: '测试品牌2',
+          accessNum: '34',
+          type: '停用',
+          remarks: ''
+        }, {
+          idNum: '3',
+          dataName: '23.dsa',
+          brand: '测试品牌3',
+          accessNum: '1',
+          type: '启用',
+          remarks: ''
+        }, {
+          idNum: '4',
+          dataName: '23.33.sss',
+          brand: '测试品牌4',
+          accessNum: '3',
+          type: '启用',
+          remarks: ''
+        }, {
+          idNum: '5',
+          dataName: 'z.ss.233',
+          brand: '测试品牌5',
+          accessNum: '54',
+          type: '停用',
+          remarks: ''
+        }, {
+          idNum: '6',
+          dataName: '33.33',
+          brand: '测试品牌6',
+          accessNum: '2',
+          type: '停用',
+          remarks: ''
+        }, {
+          idNum: '7',
+          dataName: '22.22',
+          brand: '测试品牌7',
+          accessNum: '32',
+          type: '停用',
+          remarks: ''
+        }, {
+          idNum: '8',
+          dataName: '1111',
+          brand: '测试品牌8',
+          accessNum: '22',
+          type: '停用',
+          remarks: ''
+        }
+      ],
+      currentPage: 1, // 当前页码
+      total: 20, // 总条数
+      pageSize: 10 // 每页的数据条数
+    }
+  },
+  methods: {
+    addDataSource() {},
+    allStart() {
+      this.$confirm('是否启用？', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {})
+    },
+    allEnd() {
+      this.$confirm('是否停用?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {})
+    },
+    allDelete() {
+      this.$confirm('此操作将删除数据, 是否继续?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {})
+    },
+    updateRow() {},
+    deleteRow() {
+      this.$confirm('此操作将删除该数据, 是否继续?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {})
+    },
+    stopRow() {
+      this.$confirm('是否停用?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {})
+    },
+    queryAccess() {},
+    handleSizeChange(val) {
+      console.log(`每页 ${val} 条`)
+      this.currentPage = 1
+      this.pageSize = val
+    },
+    handleCurrentChange(val) {
+      console.log(`当前页: ${val}`)
+      this.currentPage = val
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.accessModule {
+  .accessHead {
+    height: 58px;
+    padding: 15px 20px 10px 20px;
+    background-color: #edeef3 !important;
+    border-bottom: 1px solid #DBDDE3;
+  }
+  .accessBody {
+    padding: 15px;
+  }
+}
+</style>