|
|
@@ -1,155 +1,157 @@
|
|
|
<template>
|
|
|
- <el-row>
|
|
|
- <el-row>
|
|
|
- <el-button
|
|
|
- size="mini"
|
|
|
- type="warning"
|
|
|
- class="el-icon-document-add"
|
|
|
- @click="handleAdd"
|
|
|
- >添加</el-button>
|
|
|
- <el-table
|
|
|
- :data="dataList"
|
|
|
- style="width: 100%"
|
|
|
- >
|
|
|
- <el-table-column
|
|
|
- label="No"
|
|
|
- type="index"
|
|
|
- />
|
|
|
- <el-table-column
|
|
|
- prop="addAt"
|
|
|
- label="添加时间"
|
|
|
- width="150"
|
|
|
- />
|
|
|
- <el-table-column
|
|
|
- prop="camName"
|
|
|
- label="摄像头名字"
|
|
|
- width="150"
|
|
|
+ <el-row class="movie-list">
|
|
|
+ <el-col :md="18">
|
|
|
+ <el-row>
|
|
|
+ <el-button
|
|
|
+ size="mini"
|
|
|
+ type="warning"
|
|
|
+ class="el-icon-document-add"
|
|
|
+ @click="handleAdd"
|
|
|
+ >添加</el-button>
|
|
|
+ <el-table
|
|
|
+ :data="dataList"
|
|
|
+ style="width: 100%"
|
|
|
>
|
|
|
- <template slot-scope="scope">
|
|
|
- <router-link style="text-decoration-line: none" target="_blank" :to="`/cam/live/${scope.row.camId}`">
|
|
|
- {{ scope.row.camName }}
|
|
|
- </router-link>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- <el-table-column
|
|
|
- prop="state"
|
|
|
- label="状态"
|
|
|
+ <el-table-column
|
|
|
+ label="No"
|
|
|
+ type="index"
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ prop="addAt"
|
|
|
+ label="添加时间"
|
|
|
+ width="150"
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ prop="camName"
|
|
|
+ label="摄像头名字"
|
|
|
+ width="150"
|
|
|
+ >
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <router-link style="text-decoration-line: none" target="_blank" :to="`/cam/live/${scope.row.camId}`">
|
|
|
+ {{ scope.row.camName }}
|
|
|
+ </router-link>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="state"
|
|
|
+ label="状态"
|
|
|
+ >
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-tag v-if="scope.row.state" :type="'success'" disable-transitions>
|
|
|
+ 推流中
|
|
|
+ </el-tag>
|
|
|
+ <el-tag v-else :type="'danger'" disable-transitions>
|
|
|
+ 离线
|
|
|
+ </el-tag>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ label="操作"
|
|
|
+ >
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-button
|
|
|
+ size="mini"
|
|
|
+ type="success"
|
|
|
+ @click="goToCamRecord(scope.row)"
|
|
|
+ >历史录像</el-button>
|
|
|
+ <el-button
|
|
|
+ size="mini"
|
|
|
+ @click="handleEdit(scope.$index, scope.row)"
|
|
|
+ >修改名字</el-button>
|
|
|
+ <el-button
|
|
|
+ size="mini"
|
|
|
+ @click="handleDetail(scope.$index, scope.row)"
|
|
|
+ >推流地址</el-button>
|
|
|
+ <el-button
|
|
|
+ size="mini"
|
|
|
+ type="danger"
|
|
|
+ @click="handleDelete(scope.$index, scope.row)"
|
|
|
+ >删除</el-button>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ <!-- 添加摄像头对话框 -->
|
|
|
+ <el-dialog
|
|
|
+ append-to-body
|
|
|
+ :visible.sync="showEditScopeDialog"
|
|
|
+ width="50%"
|
|
|
+ center
|
|
|
>
|
|
|
- <template slot-scope="scope">
|
|
|
- <el-tag v-if="scope.row.state" :type="'success'" disable-transitions>
|
|
|
- 推流中
|
|
|
- </el-tag>
|
|
|
- <el-tag v-else :type="'danger'" disable-transitions>
|
|
|
- 离线
|
|
|
- </el-tag>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- <el-table-column
|
|
|
- label="操作"
|
|
|
+ <el-card class="box-card">
|
|
|
+ <div slot="header" class="clearfix">
|
|
|
+ <h3>添加摄像头</h3>
|
|
|
+ </div>
|
|
|
+ <div class="text item">
|
|
|
+ <el-form ref="form" :model="addCamForm" label-width="80px">
|
|
|
+ <el-form-item label="设备 ID">
|
|
|
+ <el-input v-model="addCamForm.deviceId" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="设备名字">
|
|
|
+ <el-input v-model="addCamForm.deviceName" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <el-button type="primary" @click="onAddCam">立即添加</el-button>
|
|
|
+ <el-button>取消</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+ </el-card>
|
|
|
+ </el-dialog>
|
|
|
+ <!-- 修改摄像头名字对话框 -->
|
|
|
+ <el-dialog
|
|
|
+ append-to-body
|
|
|
+ :visible.sync="showUpdateDialog"
|
|
|
+ width="50%"
|
|
|
+ center
|
|
|
>
|
|
|
- <template slot-scope="scope">
|
|
|
- <el-button
|
|
|
- size="mini"
|
|
|
- type="success"
|
|
|
- @click="goToCamRecord(scope.row)"
|
|
|
- >历史录像</el-button>
|
|
|
- <el-button
|
|
|
- size="mini"
|
|
|
- @click="handleEdit(scope.$index, scope.row)"
|
|
|
- >修改名字</el-button>
|
|
|
- <el-button
|
|
|
- size="mini"
|
|
|
- @click="handleDetail(scope.$index, scope.row)"
|
|
|
- >推流地址</el-button>
|
|
|
- <el-button
|
|
|
- size="mini"
|
|
|
- type="danger"
|
|
|
- @click="handleDelete(scope.$index, scope.row)"
|
|
|
- >删除</el-button>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- </el-table>
|
|
|
- <!-- 添加摄像头对话框 -->
|
|
|
- <el-dialog
|
|
|
- append-to-body
|
|
|
- :visible.sync="showEditScopeDialog"
|
|
|
- width="50%"
|
|
|
- center
|
|
|
- >
|
|
|
- <el-card class="box-card">
|
|
|
- <div slot="header" class="clearfix">
|
|
|
- <h3>添加摄像头</h3>
|
|
|
- </div>
|
|
|
- <div class="text item">
|
|
|
- <el-form ref="form" :model="addCamForm" label-width="80px">
|
|
|
- <el-form-item label="设备 ID">
|
|
|
- <el-input v-model="addCamForm.deviceId" />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="设备名字">
|
|
|
- <el-input v-model="addCamForm.deviceName" />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item>
|
|
|
- <el-button type="primary" @click="onAddCam">立即添加</el-button>
|
|
|
- <el-button>取消</el-button>
|
|
|
- </el-form-item>
|
|
|
- </el-form>
|
|
|
- </div>
|
|
|
- </el-card>
|
|
|
- </el-dialog>
|
|
|
- <!-- 修改摄像头名字对话框 -->
|
|
|
- <el-dialog
|
|
|
- append-to-body
|
|
|
- :visible.sync="showUpdateDialog"
|
|
|
- width="50%"
|
|
|
- center
|
|
|
- >
|
|
|
- <el-card class="box-card">
|
|
|
- <div slot="header" class="clearfix">
|
|
|
- <h3>修改摄像头名字</h3>
|
|
|
- </div>
|
|
|
- <div class="text item">
|
|
|
- <el-form ref="form" :model="updateNameForm" label-width="80px">
|
|
|
- <el-form-item label="新名字">
|
|
|
- <el-input v-model="updateNameForm.newName" />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item>
|
|
|
- <el-button type="primary" @click="onUpdateCam">立即修改</el-button>
|
|
|
- <el-button>取消</el-button>
|
|
|
- </el-form-item>
|
|
|
- </el-form>
|
|
|
- </div>
|
|
|
- </el-card>
|
|
|
- </el-dialog>
|
|
|
- <!-- 摄像头详情对话框 -->
|
|
|
- <el-dialog
|
|
|
- append-to-body
|
|
|
- :visible.sync="showDetailDialog"
|
|
|
- width="50%"
|
|
|
- center
|
|
|
- >
|
|
|
- <el-card class="box-card">
|
|
|
- <div slot="header" class="clearfix">
|
|
|
- <h3>推流地址</h3>
|
|
|
- </div>
|
|
|
- <div class="text item">
|
|
|
- <h3>{{ pushUrl }}</h3>
|
|
|
- </div>
|
|
|
- </el-card>
|
|
|
- </el-dialog>
|
|
|
- </el-row>
|
|
|
- <el-row>
|
|
|
- <el-pagination
|
|
|
- background
|
|
|
- :small="screenWidth <= 768"
|
|
|
- layout="prev, pager, next"
|
|
|
- :page-size="pageSize"
|
|
|
- :current-page="currentPage"
|
|
|
- :total="totalSize"
|
|
|
- @current-change="handleCurrentChange"
|
|
|
- @prev-click="handleCurrentChange"
|
|
|
- @next-click="handleCurrentChange"
|
|
|
- />
|
|
|
- </el-row>
|
|
|
+ <el-card class="box-card">
|
|
|
+ <div slot="header" class="clearfix">
|
|
|
+ <h3>修改摄像头名字</h3>
|
|
|
+ </div>
|
|
|
+ <div class="text item">
|
|
|
+ <el-form ref="form" :model="updateNameForm" label-width="80px">
|
|
|
+ <el-form-item label="新名字">
|
|
|
+ <el-input v-model="updateNameForm.newName" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <el-button type="primary" @click="onUpdateCam">立即修改</el-button>
|
|
|
+ <el-button>取消</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+ </el-card>
|
|
|
+ </el-dialog>
|
|
|
+ <!-- 摄像头详情对话框 -->
|
|
|
+ <el-dialog
|
|
|
+ append-to-body
|
|
|
+ :visible.sync="showDetailDialog"
|
|
|
+ width="50%"
|
|
|
+ center
|
|
|
+ >
|
|
|
+ <el-card class="box-card">
|
|
|
+ <div slot="header" class="clearfix">
|
|
|
+ <h3>推流地址</h3>
|
|
|
+ </div>
|
|
|
+ <div class="text item">
|
|
|
+ <h3>{{ pushUrl }}</h3>
|
|
|
+ </div>
|
|
|
+ </el-card>
|
|
|
+ </el-dialog>
|
|
|
+ </el-row>
|
|
|
+ <el-row>
|
|
|
+ <el-pagination
|
|
|
+ background
|
|
|
+ :small="screenWidth <= 768"
|
|
|
+ layout="prev, pager, next"
|
|
|
+ :page-size="pageSize"
|
|
|
+ :current-page="currentPage"
|
|
|
+ :total="totalSize"
|
|
|
+ @current-change="handleCurrentChange"
|
|
|
+ @prev-click="handleCurrentChange"
|
|
|
+ @next-click="handleCurrentChange"
|
|
|
+ />
|
|
|
+ </el-row>
|
|
|
+ </el-col>
|
|
|
</el-row>
|
|
|
</template>
|
|
|
|
|
|
@@ -323,4 +325,18 @@ export default {
|
|
|
</script>
|
|
|
|
|
|
<style>
|
|
|
+/*处于手机屏幕时*/
|
|
|
+@media screen and (max-width: 768px) {
|
|
|
+ .movie-list {
|
|
|
+ padding-top: 8px;
|
|
|
+ padding-left: 0.5%;
|
|
|
+ padding-right: 0.5%;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.movie-list {
|
|
|
+ padding-top: 15px;
|
|
|
+ padding-left: 6%;
|
|
|
+ padding-right: 6%;
|
|
|
+}
|
|
|
</style>
|