|
|
@@ -1,13 +1,145 @@
|
|
|
<template>
|
|
|
- <div>123456</div>
|
|
|
+ <div class="contain">
|
|
|
+ <div class="contain-left">
|
|
|
+ <sub-title name="摄像头" statement="CAMERA" />
|
|
|
+ <div class="add_camera" @click="addCamera">
|
|
|
+ <span>+</span>添加摄像头
|
|
|
+ </div>
|
|
|
+ <div class="camera-lists">
|
|
|
+ <div v-for="(item, index) in cameraList" :key="index" class="camera-lists-info"
|
|
|
+ :class="islistActive == index ? 'islistActive' : ''" @click="activeInfo(item, index)">
|
|
|
+ <img class="camera-lists-info-img"
|
|
|
+ :src='islistActive == index ? require("@/assets/Frame-white.png") : require("@/assets/Frame-gray.png")'>
|
|
|
+ <div v-if="islistActive == index && index == 0" class="acquiesce">默认</div>
|
|
|
+ <div class="camera-lists-info-title" :class="islistActive == index ? 'islistActive-title' : ''">{{
|
|
|
+ item.title }}</div>
|
|
|
+ <div class="imgs-box" v-if="islistActive == index">
|
|
|
+ <img src="@/assets/edit-bi.png" @click="edit(item)">
|
|
|
+ <img src="@/assets/Group-del.png" @click="del(item)">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="all-camera">
|
|
|
+ 共<span>{{ cameraList.length }}</span>个摄像头
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 左侧结束 -->
|
|
|
+ <div class="contain-right">
|
|
|
+ <sub-title name="摄像头名称" statement="Real time imaging" />
|
|
|
+ </div>
|
|
|
+ <!-- 弹框 -->
|
|
|
+ <div class="rolemanage">
|
|
|
+ <el-dialog :title="dialogName" :visible.sync="dialogChargeVisible">
|
|
|
+ <div>
|
|
|
+ <el-form :model="fromData" ref="ExportForm">
|
|
|
+ <el-form-item label="摄像头名称:" label-width="100px">
|
|
|
+ <el-input v-model="fromData.cameraName" placeholder="请输入名称"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="访问地址:" label-width="100px">
|
|
|
+ <el-input v-model="fromData.cameraUrl" placeholder="请输入地址"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="默认摄像头:" label-width="100px">
|
|
|
+ <el-checkbox-group v-model="fromData.default">
|
|
|
+ <el-checkbox name="default"></el-checkbox>
|
|
|
+ </el-checkbox-group>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+ <div slot="footer" class="dialog-footer">
|
|
|
+ <el-button class="exit" @click="dialogChargeVisible = false">取消</el-button>
|
|
|
+ <el-button type="primary" class="save" @click="setCamera">确定</el-button>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+ <!-- 弹框结束 -->
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+import "./index.scss"
|
|
|
+import SubTitle from "@/views/equipment-monitoring/components/SubTitle.vue";
|
|
|
export default {
|
|
|
+ components: {
|
|
|
+ SubTitle
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ // 摄像头列表
|
|
|
+ cameraList: [
|
|
|
+ { title: '一层工厂内部摄像头1' },
|
|
|
+ { title: '一层工厂内部摄像头2' },
|
|
|
+ { title: '一层工厂内部摄像头3' },
|
|
|
+ { title: '一层工厂内部摄像头4' },
|
|
|
+ { title: '一层工厂内部摄像头5' },
|
|
|
+ { title: '一层工厂内部摄像头6' },
|
|
|
+ { title: '一层工厂内部摄像头7' },
|
|
|
+ { title: '一层工厂内部摄像头1' },
|
|
|
+ { title: '一层工厂内部摄像头2' },
|
|
|
+ { title: '一层工厂内部摄像头3' },
|
|
|
+ { title: '一层工厂内部摄像头4' },
|
|
|
+ { title: '一层工厂内部摄像头5' },
|
|
|
+ { title: '一层工厂内部摄像头6' },
|
|
|
+ { title: '一层工厂内部摄像头7' },
|
|
|
+ { title: '一层工厂内部摄像头2' },
|
|
|
+ { title: '一层工厂内部摄像头3' },
|
|
|
+ { title: '一层工厂内部摄像头4' },
|
|
|
+ { title: '一层工厂内部摄像头5' },
|
|
|
+ { title: '一层工厂内部摄像头6' },
|
|
|
+ { title: '一层工厂内部摄像头7' },
|
|
|
+ { title: '一层工厂内部摄像头2' },
|
|
|
+ { title: '一层工厂内部摄像头3' },
|
|
|
+ { title: '一层工厂内部摄像头4' },
|
|
|
+ { title: '一层工厂内部摄像头5' },
|
|
|
+ { title: '一层工厂内部摄像头6' },
|
|
|
+ ],
|
|
|
+ // 弹窗状态
|
|
|
+ dialogChargeVisible: false,
|
|
|
+ //是否点击 根据数组下标选中 默认为第一条
|
|
|
+ islistActive: 0,
|
|
|
+ //弹窗名字
|
|
|
+ dialogName: '添加摄像头',
|
|
|
+ //弹窗表单
|
|
|
+ fromData: {
|
|
|
+ cameraName: '',
|
|
|
+ cameraUrl: '',
|
|
|
+ default: true,
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ //添加摄像头
|
|
|
+ addCamera() {
|
|
|
+ this.dialogChargeVisible = true;
|
|
|
+ this.dialogName = '添加摄像头'
|
|
|
+ },
|
|
|
+ //修改摄像头
|
|
|
+ edit(item) {
|
|
|
+ this.dialogChargeVisible = true;
|
|
|
+ this.dialogName = '修改摄像头'
|
|
|
+ },
|
|
|
+ //删除摄像头
|
|
|
+ del(item) {
|
|
|
+ this.$confirm(`请确认删除？`, `确认删除`, {
|
|
|
+ confirmButtonText: '确认',
|
|
|
+ cancelButtonText: '取消',
|
|
|
+ type: 'warning'
|
|
|
+ }).then(async () => {
|
|
|
+ this.$message({
|
|
|
+ type: 'success',
|
|
|
+ message: '删除成功!',
|
|
|
+ })
|
|
|
|
|
|
+ }).catch(err => { console.log(err) })
|
|
|
+ },
|
|
|
+ // 点击对应摄像头
|
|
|
+ activeInfo(item, index) {
|
|
|
+ console.log(index)
|
|
|
+ this.islistActive = index
|
|
|
+ },
|
|
|
+ //弹窗保存
|
|
|
+ setCamera() {
|
|
|
+ this.dialogChargeVisible = false;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
</script>
|
|
|
-
|
|
|
-<style>
|
|
|
-
|
|
|
-</style>
|
