oms init

src/views/device/index.vue

@@ -0,0 +1,139 @@
+<template>
+<div class="app-container calendar-list-container">
+  <!-- 筛选条件 -->
+  <div class="filter-container">
+    <el-select class="filter-item" clearable v-model="params.search_eq_d$venueId" filterable placeholder="请选择篮球馆">
+      <el-option
+        v-for="item in venues"
+        :key="item.id"
+        :label="item.name"
+        :value="item.id">
+      </el-option>
+    </el-select>
+    <el-button class="filter-item" type="primary" v-waves icon="search" @click="handleSearch">搜索</el-button>
+    <el-button class="filter-item pull-right" type="success" icon="edit" @click="handleCreate">添加</el-button>
+  </div>
+
+  <!-- 列表数据 -->
+  <Pagination uri="/devices" :request-params="params" ref="pagination">
+
+      <!-- 设备名称 -->
+      <el-table-column align="center" label="名称">
+        <template scope="scope">
+          <span>{{scope.row.name}}</span>
+        </template>
+      </el-table-column>
+
+      <!-- 视频流地址 -->
+      <el-table-column align="center" label="视频流地址">
+        <template scope="scope">
+          <span>{{scope.row.stream}}</span>
+        </template>
+      </el-table-column>
+
+      <el-table-column align="center" label=状态>
+        <template scope="scope">
+           <DeviceStatus :status="scope.row.status"></DeviceStatus>
+          <!-- <span v-text="getStatus(scope.row.status)"></span> -->
+        </template>
+      </el-table-column>
+
+       <el-table-column align="center" label=篮球馆>
+        <template scope="scope">
+          <span v-text="scope.row.venueName"></span>
+        </template>
+      </el-table-column>
+
+    <el-table-column label="操作" align="center" width="150">
+      <template scope="scope">
+        <el-button size="small" type="text" @click="handleEdit(scope.row.id)">编辑</el-button>
+        <el-button size="small" type="text" class="danger" @click="handleDelete(scope.row)">删除</el-button>
+        <el-button size="small" v-if="scope.row.status == 0" type="text" @click="handleReconnect(scope.row.id)">重新连接</el-button>
+      </template>
+    </el-table-column>
+  </Pagination>
+</div>
+</template>
+
+<script>
+import { remove, reconnect } from '@/api//device'
+import waves from '@/directive/waves.js'// 水波纹指令
+import Pagination from '@/components/Pagination'
+import { findVenueByType } from '@/api//venue'
+import DeviceStatus from '@/components/DeviceStatus'
+export default {
+  name: 'device_list',
+  components: { Pagination, DeviceStatus },
+  directives: {
+    waves
+  },
+  data() {
+    return {
+      params: {
+        search_eq_d$venueId: undefined
+      },
+      venues: [],
+      intervalid1: undefined
+    }
+  },
+  created() {
+    findVenueByType(1).then(response => {
+      this.venues = response.venues
+    })
+    this.intervalid1 = setInterval(() => {
+      this.handleSearch(false)
+    }, 3000)
+  },
+  beforeDestroy () {
+    clearInterval(this.intervalid1)
+  },
+  methods: {
+    // getStatus(status) {
+    //   if (status === 0) {
+    //     return '未连接'
+    //   } else if (status === 1) {
+    //     return '正在重连'
+    //   } else if (status === 2) {
+    //     return '已连接'
+    //   }
+    // },
+    handleReconnect(id) {
+      reconnect(id).then(response => {
+        this.handleSearch()
+      })
+    },
+    /**
+     * 搜索门禁设备
+     */
+    handleSearch(flag) {
+      this.$refs.pagination.handleSearch(flag)
+    },
+
+    /**
+     * 编辑门禁设备
+     */
+    handleEdit(id) {
+      this.$router.push({ path: '/device/edit', query: { id: id }})
+    },
+
+    /**
+     * 创建门禁设备
+     */
+    handleCreate() {
+      this.$router.push({ path: '/device/edit' })
+    },
+
+    /**
+     * 删除门禁设备
+     */
+    handleDelete(row) {
+      this.$confirm('确认删除该门禁设备？').then(_ => {
+        remove(row.id).then(response => {
+          this.$refs.pagination.removeItem(row)
+        })
+      }).catch(_ => {})
+    }
+  }
+}
+</script>
+