实时影像

src/views/Real-time-image/index.scss

@@ -0,0 +1,105 @@
+.contain {
+  margin: 20px;
+  width: calc(100% - 40px);
+  height: calc(100vh - 105px);
+  display: flex;
+  color: #fff;
+  .contain-left {
+    width: 434px;
+    height: 100%;
+    background: #1e1f25;
+    position: relative;
+    .add_camera {
+      width: 394px;
+      height: 44px;
+      background: #3c4254;
+      border-radius: 4px 4px 4px 4px;
+      margin: 20px;
+      text-align: center;
+      line-height: 44px;
+      font-size: 18px;
+      color: #ffffff;
+      cursor: pointer;
+      span {
+        margin-right: 5px;
+        display: inline-block;
+      }
+    }
+    .camera-lists {
+      margin-left: 20px;
+      height: calc(100% - 200px);
+      overflow-y: auto;
+      .camera-lists-info {
+        width: 394px;
+        height: 44px;
+        line-height: 44px;
+        position: relative;
+        cursor: pointer;
+        display: flex;
+        .camera-lists-info-img {
+          width: 18px;
+          height: 18px;
+          margin-top: 13px;
+          margin-right: 10px;
+          margin-left: 15px;
+        }
+        .camera-lists-info-title {
+          font-size: 18px;
+          color: #bfc1cb;
+        }
+        .islistActive-title{
+            color: #fff;
+        }
+        .acquiesce {
+          width: 40px;
+          height: 24px;
+          background: #3c4254;
+          border-radius: 3px 3px 3px 3px;
+          font-size: 12px;
+          font-weight: 400;
+          color: #30e0a1;
+          text-align: center;
+          line-height: 24px;
+          margin-top: 10px;
+          margin-right: 10px;
+        }
+        .imgs-box{
+            display: flex;
+            position: absolute;
+            right: 20px;
+            img{
+                width: 24px;
+                height: 24px;
+                margin-top: 10px;
+            }
+            img:first-child{
+                margin-right: 10px;
+            }
+        }
+      }
+      .islistActive{
+        background-color: rgb(31, 43, 69);
+      }
+    }
+    .all-camera {
+      font-size: 16px;
+      color: #757b8c;
+      margin-left: 20px;
+      position: absolute;
+      bottom: 20px;
+      letter-spacing: 2px;
+      span {
+        color: #246cf9;
+        display: inline-block;
+        margin-left: 4px;
+        margin-right: 4px;
+      }
+    }
+  }
+  .contain-right {
+    height: 100%;
+    background: #1e1f25;
+    margin-left: 20px;
+    width: calc(100% - 454px);
+  }
+}

src/views/Real-time-image/index.vue

@@ -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>

src/views/equipment-monitoring/index.scss

@@ -214,6 +214,9 @@
             padding-right: 30px;
             font-size: 13px;
             padding-bottom: 10px;
+            position: absolute;
+            right: 20px;
+            margin-top: 12px;
             span{
                 padding: 0 6px;
             }