承办单位备案展示

src/main/java/com/izouma/wenlvju/domain/Record.java

@@ -8,6 +8,7 @@ import lombok.AllArgsConstructor;
 import lombok.Builder;
 import lombok.Data;
 import lombok.NoArgsConstructor;
+import org.hibernate.annotations.Where;
 
 import javax.persistence.Entity;
 import java.time.LocalDate;
@@ -17,6 +18,7 @@ import java.time.LocalDate;
 @Entity
 @AllArgsConstructor
 @NoArgsConstructor
+@Where(clause = "del = 0")
 @ApiModel("备案管理")
 public class Record extends BaseEntity {
     @ApiModelProperty(value = "考级活动名称")

src/main/java/com/izouma/wenlvju/service/RecordService.java

@@ -40,7 +40,35 @@ public class RecordService {
     private RecordExpertRepo    recordExpertRepo;
 
     public Page<Record> all(PageQuery pageQuery) {
-        return recordRepo.findAll(JpaUtils.toSpecification(pageQuery, Record.class), JpaUtils.toPageRequest(pageQuery));
+        Map<String, Object> query = pageQuery.getQuery();
+        Object status = query.get("status");
+        Integer statusNum = null;
+        if (status != null) {
+            statusNum = Convert.convert(Integer.class, status);
+            query.remove("status");
+        }
+        Integer finalStatusNum = statusNum;
+        return recordRepo.findAll(((root, criteriaQuery, criteriaBuilder) -> {
+            List<Predicate> and = JpaUtils.toPredicates(pageQuery, Record.class, root, criteriaQuery, criteriaBuilder);
+            if (ObjectUtil.isNotNull(finalStatusNum)) {
+                LocalDate now = LocalDate.now();
+                switch (finalStatusNum) {
+                    case 1:
+                        // 未开考
+                        and.add(criteriaBuilder.greaterThan(root.get("examinationStartTime"), now));
+                        break;
+                    case 2:
+                        // 已开考
+                        and.add(criteriaBuilder.lessThan(root.get("examinationEndTime"), now));
+                        break;
+                    case 3:
+                        and.add(criteriaBuilder.lessThanOrEqualTo(root.get("examinationStartTime"), now));
+                        and.add(criteriaBuilder.greaterThanOrEqualTo(root.get("examinationEndTime"), now));
+                        break;
+                }
+            }
+            return criteriaBuilder.and(and.toArray(new Predicate[0]));
+        }), JpaUtils.toPageRequest(pageQuery));
     }
 
     public Page<Record> all2(PageQuery pageQuery) {

src/main/vue/src/router.js

@@ -543,6 +543,23 @@ const router = new Router({
                         title: '考场管理'
                     }
                 },
+                {
+                    path: '/historyRoomList',
+                    name: 'HistoryRoomList',
+                    component: () =>
+                        import(/* webpackChunkName: "historyRoomList" */ '@/views/video/HistoryRoomList.vue'),
+                    meta: {
+                        title: '视频管理'
+                    }
+                },
+                {
+                    path: '/showRoomList',
+                    name: 'ShowRoomList',
+                    component: () => import(/* webpackChunkName: "showRoomList" */ '@/views/video/ShowRoomList.vue'),
+                    meta: {
+                        title: '监控列表'
+                    }
+                },
                 {
                     path: '/recordInfo',
                     name: 'RecordInfo',

src/main/vue/src/views/ExamRoomList.vue

@@ -4,18 +4,10 @@
             <!-- <el-input placeholder="输入考场名称" v-model="search" clearable class="filter-item"></el-input>
             <el-button @click="getData" type="primary" icon="el-icon-search" class="filter-item">搜索 </el-button> -->
             <el-button @click="addRow" type="primary" icon="el-icon-plus" class="filter-item" v-if="organization"
-                >添加
+                >增加
             </el-button>
-            <el-button @click="showVideo" type="primary" icon="el-icon-video-camera" class="filter-item"
+            <!-- <el-button @click="showVideo" type="primary" icon="el-icon-video-camera" class="filter-item"
                 >监控平台
-            </el-button>
-            <!-- <el-button
-                @click="download"
-                type="primary"
-                icon="el-icon-download"
-                :loading="downloading"
-                class="filter-item"
-                >导出EXCEL
             </el-button> -->
         </div>
         <el-table
@@ -36,7 +28,7 @@
             <el-table-column prop="validateCode" label="设备验证码"> </el-table-column>
             <el-table-column prop="status" label="状态"
                 ><template slot-scope="{ row }"
-                    ><span v-if="row.status == 1">在线</span><span v-else>不在线</span></template
+                    ><span v-if="row.status == 1">正常</span><span v-else>异常</span></template
                 ></el-table-column
             >
             <el-table-column label="操作" align="center" fixed="right" min-width="150">

src/main/vue/src/views/record/RecordEdit.vue

@@ -11,7 +11,7 @@
         >
             <el-card shadow="hover" :body-style="{ padding: '20px' }">
                 <el-form-item prop="examinationName" label="考级活动名称">
-                    <el-input class="input1" v-model="formData.examinationName"></el-input>
+                    <el-input class="input1" v-model="formData.examinationName" readonly></el-input>
                 </el-form-item>
                 <el-form-item prop="examinationStartTime" label="考级活动时间">
                     <el-date-picker
@@ -22,38 +22,31 @@
                         start-placeholder="请选择开始时间"
                         end-placeholder="请选择结束时间"
                         range-separator="至"
+                        readonly
                     >
                     </el-date-picker>
                 </el-form-item>
                 <el-form-item prop="examinationAgency" label="考级机构名称">
-                    <el-input class="input1" v-model="formData.examinationAgency"></el-input>
+                    <el-input class="input1" v-model="formData.examinationAgency" readonly></el-input>
                 </el-form-item>
                 <el-form-item prop="category" label="单位类别">
-                    <!-- <el-select v-model="formData.category" clearable filterable placeholder="请选择">
-                    <el-option
-                        v-for="item in categoryOptions"
-                        :key="item.value"
-                        :label="item.label"
-                        :value="item.value"
-                    >
-                    </el-option>
-                </el-select> -->
-                    <el-input class="input1" v-model="formData.category"></el-input>
+                    <el-input class="input1" v-model="formData.category" readonly></el-input>
                 </el-form-item>
                 <el-form-item prop="organizer" label="承办单位名称">
-                    <el-input class="input1" v-model="formData.organizer"></el-input>
+                    <el-input class="input1" v-model="formData.organizer" readonly></el-input>
                 </el-form-item>
 
                 <el-collapse-transition>
                     <div v-show="showMore">
                         <el-form-item prop="uscc" label="统一社会信用代码">
-                            <el-input class="input1" v-model="formData.uscc"></el-input>
+                            <el-input class="input1" v-model="formData.uscc" readonly></el-input>
                         </el-form-item>
                         <el-form-item prop="examinationDistrict" label="考级地点">
                             <el-select
                                 class="input1"
                                 v-model="formData.district"
                                 style="margin-bottom: 10px;display:block"
+                                disabled
                             >
                                 <el-option
                                     v-for="item in district"
@@ -67,16 +60,25 @@
                                 class="input2"
                                 :rows="3"
                                 v-model="formData.examinationAddress"
+                                readonly
                             ></el-input>
                         </el-form-item>
                         <el-form-item prop="examCenterQuantity" label="考场数量">
-                            <el-input-number v-model="formData.examCenterQuantity" class="input1"></el-input-number>
+                            <el-input-number
+                                v-model="formData.examCenterQuantity"
+                                class="input1"
+                                disabled
+                            ></el-input-number>
                         </el-form-item>
                         <el-form-item prop="examQuantity" label="报考人数">
-                            <el-input-number v-model="formData.examQuantity" class="input1"></el-input-number>
+                            <el-input-number v-model="formData.examQuantity" class="input1" disabled></el-input-number>
                         </el-form-item>
                         <el-form-item prop="examinerQuantity" label="考官人数">
-                            <el-input-number v-model="formData.examinerQuantity" class="input1"></el-input-number>
+                            <el-input-number
+                                v-model="formData.examinerQuantity"
+                                class="input1"
+                                disabled
+                            ></el-input-number>
                         </el-form-item>
                         <el-form-item prop="examOwner" label="考点负责人">
                             <el-input
@@ -84,6 +86,7 @@
                                 suffix-icon="el-icon-user-solid"
                                 class="input1"
                                 placeholder="联系人"
+                                readonly
                             ></el-input>
                         </el-form-item>
                         <el-form-item prop="examOwnerPhone">
@@ -92,6 +95,7 @@
                                 suffix-icon="el-icon-phone"
                                 class="input1"
                                 placeholder="手机号"
+                                readonly
                             ></el-input>
                         </el-form-item>
 
@@ -101,6 +105,7 @@
                                 suffix-icon="el-icon-user-solid"
                                 class="input1"
                                 placeholder="联系人"
+                                readonly
                             ></el-input>
                         </el-form-item>
                         <el-form-item prop="securityOwnerPhone" label="">
@@ -109,6 +114,7 @@
                                 suffix-icon="el-icon-phone"
                                 class="input1"
                                 placeholder="手机号"
+                                readonly
                             ></el-input>
                         </el-form-item>
                         <el-form-item prop="recordTime" label="备案时间">
@@ -118,6 +124,7 @@
                                 type="date"
                                 value-format="yyyy-MM-dd"
                                 placeholder="选择日期"
+                                readonly
                             >
                             </el-date-picker>
                         </el-form-item>
@@ -182,16 +189,12 @@
                     <el-table-column prop="code" label="专业代码"> </el-table-column>
                     <el-table-column prop="level" label="总级数"> </el-table-column>
                     <el-table-column prop="numOfExam" label="考场数量"> </el-table-column>
-                    <el-table-column prop="examinerQuantity" label="考官人数">
-                        <template slot-scope="{ row }">
-                            <el-link @click="openDialog(row)">{{ row.examinerQuantity }}</el-link>
-                        </template>
-                    </el-table-column>
+                    <el-table-column prop="examinerQuantity" label="考官人数"></el-table-column>
                 </el-table>
                 <!-- card body -->
             </el-card>
+            <el-button @click="$router.go(-1)" style="margin-top: 10px">返回</el-button>
         </el-form>
-        <el-dialog :visible.sync="dialogVisible" width="700px"> </el-dialog>
     </div>
 </template>
 <script>
@@ -259,7 +262,6 @@ export default {
             district: [],
             dateRange: [],
             recordSpecialties: [],
-            dialogVisible: false,
             experts: new Map(),
             showMore: false
         };
@@ -327,18 +329,6 @@ export default {
                     experts.set(row.id, list);
                     this.experts = experts;
                 });
-        },
-        openDialog(row) {
-            this.dialogVisible = true;
-            this.$http
-                .post('recordExpert/bySpecialtyId', { recordSpecialtyId: row.id })
-                .then(res => {
-                    this.experts = res;
-                })
-                .catch(e => {
-                    console.log(e);
-                    this.$message.error(e.error);
-                });
         }
     }
 };
@@ -386,4 +376,8 @@ export default {
     transform: translate(-50%, 50%);
     padding: 9px 9px;
 }
+/deep/.el-input.is-disabled .el-input__inner {
+    background-color: #ffffff;
+    color: #606266;
+}
 </style>

src/main/vue/src/views/record/RecordList.vue

@@ -76,7 +76,7 @@
             <el-table-column v-if="multipleMode" align="center" type="selection" width="50"></el-table-column>
             <!-- <el-table-column prop="id" label="ID" width="100"> </el-table-column> -->
             <el-table-column prop="examinationName" label="考级活动名称" min-width="150"></el-table-column>
-            <el-table-column prop="examinationStartTime" label="考级活动时间" show-overflow-tooltip min-width="160">
+            <el-table-column prop="examinationStartTime" label="考级活动时间" show-overflow-tooltip min-width="170">
                 <template slot-scope="{ row }">
                     <span>{{ row.examinationStartTime }} 至 {{ row.examinationEndTime }}</span>
                 </template>

src/main/vue/src/views/record/RecordOrganizationList.vue

@@ -37,10 +37,20 @@
                     </el-select>
                 </el-form-item>
                 <el-form-item label="考级详细地址">
-                    <el-input style="width: 200px" placeholder="输入考级详细地址"></el-input>
+                    <el-input style="width: 200px" placeholder="输入考级详细地址" class="filter-item"></el-input>
+                </el-form-item>
+                <el-form-item label="考级活动状态">
+                    <el-select v-model="status" class="filter-item" clearable>
+                        <el-option
+                            v-for="item in statusOptions"
+                            :key="item.value"
+                            :label="item.label"
+                            :value="item.value"
+                        ></el-option>
+                    </el-select>
                 </el-form-item>
                 <el-col :span="24">
-                    <el-button @click="getVideo" type="primary" icon="el-icon-search" class="filter-item"
+                    <el-button @click="getData" type="primary" icon="el-icon-search" class="filter-item"
                         >查询
                     </el-button>
                     <el-button
@@ -68,7 +78,7 @@
             <el-table-column v-if="multipleMode" align="center" type="selection" width="50"></el-table-column>
             <!-- <el-table-column prop="id" label="ID" width="100"> </el-table-column> -->
             <el-table-column prop="examinationName" label="考级活动名称" min-width="150"></el-table-column>
-            <el-table-column prop="examinationStartTime" label="考级活动时间" show-overflow-tooltip min-width="160">
+            <el-table-column prop="examinationStartTime" label="考级活动时间" show-overflow-tooltip min-width="170">
                 <template slot-scope="{ row }">
                     <span>{{ row.examinationStartTime }} 至 {{ row.examinationEndTime }}</span>
                 </template>
@@ -93,7 +103,7 @@
                 </template>
             </el-table-column>
             <!-- <el-table-column prop="recordTime" label="备案时间" min-width="90"></el-table-column> -->
-            <el-table-column label="操作" align="center" fixed="right" min-width="240">
+            <el-table-column label="操作" align="center" fixed="right" min-width="180">
                 <template slot-scope="{ row }">
                     <el-button @click="editRow(row)" size="mini" plain>查看</el-button>
                     <el-button
@@ -101,22 +111,22 @@
                         size="mini"
                         type="warning"
                         plain
-                        v-if="currentTime >= row.examinationStartTime"
+                        v-if="currentTime < row.examinationStartTime"
                         >设置视频</el-button
                     >
                     <el-button
-                        @click="showVideo(row)"
+                        @click="showOnlineVideo(row)"
                         size="mini"
                         plain
                         type="success"
-                        v-if="currentTime < row.examinationStartTime || currentTime > row.examinationEndTime"
-                        >视频监控</el-button
+                        v-if="currentTime >= row.examinationStartTime && currentTime <= row.examinationEndTime"
+                        >线上监控</el-button
                     >
                     <el-button
-                        @click="showVideo(row)"
+                        @click="showHistoryVideo(row)"
                         size="mini"
                         plain
-                        v-if="currentTime <= row.examinationEndTime"
+                        v-if="currentTime > row.examinationEndTime"
                         type="primary"
                         >上传视频</el-button
                     >
@@ -173,16 +183,21 @@ export default {
             search: '',
             url: '/record/byOrganization',
             downloading: false,
-            categoryOptions: [{ label: '承办单位', value: 'ORGANIZER' }],
             district: [],
             districtId: '',
-            status: '',
             recordDateRange: '',
             agency: '',
             organizer: '',
             dateRange: '',
             dialogVisible: false,
-            currentTime: ''
+            currentTime: '',
+            statusOptions: [
+                { label: '未开考', value: 1 },
+                { label: '已开考', value: 2 },
+                { label: '考级中', value: 3 }
+            ],
+            status: '',
+            form: {}
         };
     },
     computed: {
@@ -200,14 +215,11 @@ export default {
             return '';
         },
         beforeGetData() {
-            return {
-                // search: this.search,
-                sort: 'recordTime,desc',
-                query: {
-                    uscc: this.organization.uscc,
-                    del: false
-                }
-            };
+            let data = { sort: 'recordTime,desc', query: { uscc: this.organization.uscc } };
+            if (this.status) {
+                data.query.status = this.status;
+            }
+            return data;
         },
         toggleMultipleMode(multipleMode) {
             this.multipleMode = multipleMode;
@@ -239,6 +251,22 @@ export default {
                 }
             });
         },
+        showOnlineVideo(row) {
+            this.$router.push({
+                path: '/showRoomList',
+                query: {
+                    rid: row.id
+                }
+            });
+        },
+        showHistoryVideo(row) {
+            this.$router.push({
+                path: '/historyRoomList',
+                query: {
+                    rid: row.id
+                }
+            });
+        },
         download() {
             this.downloading = true;
             this.$axios

src/main/vue/src/views/video/HistoryRoomList.vue

@@ -0,0 +1,205 @@
+<template>
+    <div class="list-view">
+        <el-table
+            :data="tableData"
+            row-key="id"
+            ref="table"
+            header-row-class-name="table-header-row"
+            header-cell-class-name="table-header-cell"
+            row-class-name="table-row"
+            cell-class-name="table-cell"
+            :height="tableHeight"
+        >
+            <el-table-column v-if="multipleMode" align="center" type="selection" width="50"> </el-table-column>
+            <!-- <el-table-column prop="id" label="ID" width="100"> </el-table-column> -->
+            <el-table-column prop="name" label="考场名称"> </el-table-column>
+            <el-table-column prop="address" label="考场详细地址"> </el-table-column>
+            <el-table-column label="视频地址"></el-table-column>
+            <!-- <el-table-column prop="deviceSerial" label="设备序列号"> </el-table-column>
+            <el-table-column prop="validateCode" label="设备验证码"> </el-table-column> -->
+            <el-table-column prop="status" label="状态"
+                ><template slot-scope="{ row }"
+                    ><span v-if="row.status == 1">正常</span><span v-else>异常</span></template
+                ></el-table-column
+            >
+            <el-table-column label="操作" align="center" fixed="right" min-width="150">
+                <template slot-scope="{ row }">
+                    <!-- <el-button @click="editRow(row)" type="primary" size="mini" plain v-if="organization"
+                        >编辑</el-button
+                    > -->
+                    <el-button @click="monitor(row)" type="primary" size="mini" plain disabled>查看视频</el-button>
+                    <el-button @click="dialogVideoUrl = true" type="success" size="mini" plain>上传地址</el-button>
+                </template>
+            </el-table-column>
+        </el-table>
+        <div class="pagination-wrapper">
+            <!-- <div class="multiple-mode-wrapper">
+                <el-button v-if="!multipleMode" @click="toggleMultipleMode(true)">批量编辑</el-button>
+                <el-button-group v-else>
+                    <el-button @click="operation1">批量操作1</el-button>
+                    <el-button @click="operation2">批量操作2</el-button>
+                    <el-button @click="toggleMultipleMode(false)">取消</el-button>
+                </el-button-group>
+            </div> -->
+            <el-pagination
+                background
+                @size-change="onSizeChange"
+                @current-change="onCurrentChange"
+                :current-page="page"
+                :page-sizes="[10, 20, 30, 40, 50]"
+                :page-size="pageSize"
+                layout="total, sizes, prev, pager, next, jumper"
+                :total="totalElements"
+            >
+            </el-pagination>
+        </div>
+        <el-dialog title="监控" :visible.sync="dialogVisible" width="600px" center>
+            <EZUIKitJs ref="EZUIKitJs"></EZUIKitJs>
+        </el-dialog>
+        <el-dialog title="视频地址" :visible.sync="dialogVideoUrl" width="600px" center="">
+            <span style="margin-right: 20px;">输入视频地址</span><el-input style="width: 400px"></el-input>
+            <div style="margin: 20px 200px 0">
+                <el-button type="success" size="mini" plain>确定</el-button><el-button size="mini">取消</el-button>
+            </div>
+        </el-dialog>
+    </div>
+</template>
+<script>
+import { mapState } from 'vuex';
+import pageableTable from '@/mixins/pageableTable';
+import EZUIKitJs from '@/components/EZUIKitJs.vue';
+
+export default {
+    name: 'HistoryRoomList',
+    mixins: [pageableTable],
+    data() {
+        return {
+            multipleMode: false,
+            search: '',
+            url: '/examRoom/all',
+            downloading: false,
+            dialogVisible: false,
+            form: {
+                accessToken: '',
+                deviceSerial: ''
+            },
+            dialogVideoUrl: false
+        };
+    },
+    computed: {
+        selection() {
+            return this.$refs.table.selection.map(i => i.id);
+        },
+        ...mapState(['organization'])
+    },
+    methods: {
+        beforeGetData() {
+            let data = { query: {} };
+
+            if (this.search) {
+                data.search = this.search;
+            }
+            if (this.$route.query.rid) {
+                data.query.recordId = this.$route.query.rid;
+            }
+            return data;
+        },
+        toggleMultipleMode(multipleMode) {
+            this.multipleMode = multipleMode;
+            if (!multipleMode) {
+                this.$refs.table.clearSelection();
+            }
+        },
+        addRow() {
+            this.$router.push({
+                path: '/examRoomEdit',
+                query: {
+                    ...this.$route.query
+                }
+            });
+        },
+        editRow(row) {
+            this.$router.push({
+                path: '/examRoomEdit',
+                query: {
+                    id: row.id
+                }
+            });
+        },
+        download() {
+            this.downloading = true;
+            this.$axios
+                .get('/examRoom/excel', {
+                    responseType: 'blob',
+                    params: { size: 10000 }
+                })
+                .then(res => {
+                    console.log(res);
+                    this.downloading = false;
+                    const downloadUrl = window.URL.createObjectURL(new Blob([res.data]));
+                    const link = document.createElement('a');
+                    link.href = downloadUrl;
+                    link.setAttribute('download', res.headers['content-disposition'].split('filename=')[1]);
+                    document.body.appendChild(link);
+                    link.click();
+                    link.remove();
+                })
+                .catch(e => {
+                    console.log(e);
+                    this.downloading = false;
+                    this.$message.error(e.error);
+                });
+        },
+        operation1() {
+            this.$notify({
+                title: '提示',
+                message: this.selection
+            });
+        },
+        operation2() {
+            this.$message('操作2');
+        },
+        deleteRow(row) {
+            this.$alert('删除将无法恢复，确认要删除么？', '警告', { type: 'error' })
+                .then(() => {
+                    return this.$http.post(`/examRoom/del/${row.id}`);
+                })
+                .then(() => {
+                    this.$message.success('删除成功');
+                    this.getData();
+                })
+                .catch(e => {
+                    if (e !== 'cancel') {
+                        this.$message.error(e.error);
+                    }
+                });
+        },
+        monitor(row) {
+            this.dialogVisible = true;
+            this.form.deviceSerial = row.deviceSerial;
+            this.$http
+                .get('ezvizToken/getToken')
+                .then(res => {
+                    this.form.accessToken = res;
+                    this.$refs.EZUIKitJs.init(this.form);
+                })
+                .catch(e => {
+                    console.log(e);
+                    this.$message.error(e.error);
+                });
+        },
+        showVideo() {
+            this.$router.push({
+                path: '/videoOrganizationList',
+                query: {
+                    ...this.$route.query
+                }
+            });
+        }
+    },
+    components: {
+        EZUIKitJs
+    }
+};
+</script>
+<style lang="less" scoped></style>

src/main/vue/src/views/video/ShowRoomList.vue

@@ -0,0 +1,207 @@
+<template>
+    <div class="list-view">
+        <div class="filters-container">
+            <!-- <el-input placeholder="输入考场名称" v-model="search" clearable class="filter-item"></el-input>
+            <el-button @click="getData" type="primary" icon="el-icon-search" class="filter-item">搜索 </el-button> -->
+            <el-button @click="showVideo" type="primary" icon="el-icon-video-camera" class="filter-item"
+                >监控平台
+            </el-button>
+            <el-select>
+                <el-option>信息列表方式</el-option>
+                <el-option>视频列表方式</el-option>
+            </el-select>
+        </div>
+        <el-table
+            :data="tableData"
+            row-key="id"
+            ref="table"
+            header-row-class-name="table-header-row"
+            header-cell-class-name="table-header-cell"
+            row-class-name="table-row"
+            cell-class-name="table-cell"
+            :height="tableHeight"
+        >
+            <el-table-column v-if="multipleMode" align="center" type="selection" width="50"> </el-table-column>
+            <!-- <el-table-column prop="id" label="ID" width="100"> </el-table-column> -->
+            <el-table-column prop="name" label="考场名称"> </el-table-column>
+            <el-table-column prop="address" label="考场详细地址"> </el-table-column>
+            <el-table-column prop="deviceSerial" label="设备序列号"> </el-table-column>
+            <el-table-column prop="validateCode" label="设备验证码"> </el-table-column>
+            <el-table-column prop="status" label="状态"
+                ><template slot-scope="{ row }"
+                    ><span v-if="row.status == 1">正常</span><span v-else>异常</span></template
+                ></el-table-column
+            >
+            <el-table-column label="操作" align="center" fixed="right" min-width="150">
+                <template slot-scope="{ row }">
+                    <el-button @click="editRow(row)" type="primary" size="mini" plain v-if="organization"
+                        >编辑</el-button
+                    >
+                    <el-button @click="monitor(row)" type="success" size="mini" plain>查看视频</el-button>
+                </template>
+            </el-table-column>
+        </el-table>
+        <div class="pagination-wrapper">
+            <!-- <div class="multiple-mode-wrapper">
+                <el-button v-if="!multipleMode" @click="toggleMultipleMode(true)">批量编辑</el-button>
+                <el-button-group v-else>
+                    <el-button @click="operation1">批量操作1</el-button>
+                    <el-button @click="operation2">批量操作2</el-button>
+                    <el-button @click="toggleMultipleMode(false)">取消</el-button>
+                </el-button-group>
+            </div> -->
+            <el-pagination
+                background
+                @size-change="onSizeChange"
+                @current-change="onCurrentChange"
+                :current-page="page"
+                :page-sizes="[10, 20, 30, 40, 50]"
+                :page-size="pageSize"
+                layout="total, sizes, prev, pager, next, jumper"
+                :total="totalElements"
+            >
+            </el-pagination>
+        </div>
+        <el-dialog title="监控" :visible.sync="dialogVisible" width="600px" center>
+            <EZUIKitJs ref="EZUIKitJs"></EZUIKitJs>
+        </el-dialog>
+    </div>
+</template>
+<script>
+import { mapState } from 'vuex';
+import pageableTable from '@/mixins/pageableTable';
+import EZUIKitJs from '@/components/EZUIKitJs.vue';
+
+export default {
+    name: 'ShowRoomList',
+    mixins: [pageableTable],
+    data() {
+        return {
+            multipleMode: false,
+            search: '',
+            url: '/examRoom/all',
+            downloading: false,
+            dialogVisible: false,
+            form: {
+                accessToken: '',
+                deviceSerial: ''
+            }
+        };
+    },
+    computed: {
+        selection() {
+            return this.$refs.table.selection.map(i => i.id);
+        },
+        ...mapState(['organization'])
+    },
+    methods: {
+        beforeGetData() {
+            let data = { query: {} };
+
+            if (this.search) {
+                data.search = this.search;
+            }
+            if (this.$route.query.rid) {
+                data.query.recordId = this.$route.query.rid;
+            }
+            return data;
+        },
+        toggleMultipleMode(multipleMode) {
+            this.multipleMode = multipleMode;
+            if (!multipleMode) {
+                this.$refs.table.clearSelection();
+            }
+        },
+        addRow() {
+            this.$router.push({
+                path: '/examRoomEdit',
+                query: {
+                    ...this.$route.query
+                }
+            });
+        },
+        editRow(row) {
+            this.$router.push({
+                path: '/examRoomEdit',
+                query: {
+                    id: row.id
+                }
+            });
+        },
+        download() {
+            this.downloading = true;
+            this.$axios
+                .get('/examRoom/excel', {
+                    responseType: 'blob',
+                    params: { size: 10000 }
+                })
+                .then(res => {
+                    console.log(res);
+                    this.downloading = false;
+                    const downloadUrl = window.URL.createObjectURL(new Blob([res.data]));
+                    const link = document.createElement('a');
+                    link.href = downloadUrl;
+                    link.setAttribute('download', res.headers['content-disposition'].split('filename=')[1]);
+                    document.body.appendChild(link);
+                    link.click();
+                    link.remove();
+                })
+                .catch(e => {
+                    console.log(e);
+                    this.downloading = false;
+                    this.$message.error(e.error);
+                });
+        },
+        operation1() {
+            this.$notify({
+                title: '提示',
+                message: this.selection
+            });
+        },
+        operation2() {
+            this.$message('操作2');
+        },
+        deleteRow(row) {
+            this.$alert('删除将无法恢复，确认要删除么？', '警告', { type: 'error' })
+                .then(() => {
+                    return this.$http.post(`/examRoom/del/${row.id}`);
+                })
+                .then(() => {
+                    this.$message.success('删除成功');
+                    this.getData();
+                })
+                .catch(e => {
+                    if (e !== 'cancel') {
+                        this.$message.error(e.error);
+                    }
+                });
+        },
+        monitor(row) {
+            this.dialogVisible = true;
+            this.form.deviceSerial = row.deviceSerial;
+            this.$http
+                .get('ezvizToken/getToken')
+                .then(res => {
+                    this.form.accessToken = res;
+                    this.$refs.EZUIKitJs.init(this.form);
+                })
+                .catch(e => {
+                    console.log(e);
+                    this.$message.error(e.error);
+                });
+        },
+        showVideo() {
+            this.$router.push({
+                path: '/videoOrganizationList',
+                query: {
+                    ...this.$route.query
+                }
+            });
+        }
+    },
+    components: {
+        EZUIKitJs
+    }
+};
+</script>
+<style lang="less" scoped></style>