fix: some problem

src/views/device/camera/components/Detail.vue

@@ -7,6 +7,12 @@
       class="el-icon-close closeDetail"
       @click="close"
     />
+    <div class="detail-top">
+      <div class="detail_text">
+        {{ detailobj.name }}人流量监测
+      </div>
+      <div class="detail_border" />
+    </div>
     <video
       ref="player"
       style="width: 100%"
@@ -78,7 +84,7 @@
               <span class="o-detail_title">设备名称：</span><span>{{ detailobj.name }}</span>
             </div>
             <div>
-              <span class="o-detail_title">ID：</span><span>{{ detailobj.id }}</span>
+              <span class="o-detail_title">ID：</span><span>{{ detailobj.deviceId }}</span>
             </div>
             <div>
               <span class="o-detail_title">用户名：</span><span>{{ detailobj.username }}</span>
@@ -431,7 +437,7 @@ export default {
       var option
       option = {
         title: {
-          text: '123',
+          text: '区域内人数',
           textStyle: {
             color: '#fff',
             fontWeight: 'bold'
@@ -515,11 +521,11 @@ export default {
   .closeDetail {
     position: absolute;
     right: 20px;
-    top: 20px;
+    top: 5px;
     cursor: pointer;
-    z-index: 2;
+    z-index: 3;
     font-size: 42px;
-    color: #000000;
+    color: #fff;
   }
   .video {
     width: 100%;
@@ -539,6 +545,7 @@ export default {
       line-height: 36px;
       height: 238px;
       position: relative;
+      border-radius: 4px;
       &_title {
         width: 72px;
         display: inline-block;
@@ -629,6 +636,39 @@ export default {
       }
     }
   }
+  .detail-top{
+    position: absolute;
+    top: 0;
+    width: 100%;
+    left: 0;
+    padding-top: 16px;
+    font-size: 24px;
+    text-align: center;
+    background-color: rgba(0, 62, 144, 0.8);
+    color: #fff;
+    z-index: 2;
+    .detail{
+      &_border{
+        position: absolute;
+        left: 50%;
+        transform: translateX(-50%);
+        width: 700px;
+        height: 0;
+        border-top:16px solid rgba(0, 62, 144, 0.8);
+        border-right:16px solid transparent;
+        border-bottom:16px solid transparent;
+        border-left:16px solid transparent;
+      }
+      &_text{
+        width: 600px;
+        margin: auto;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        height: 32px;
+      }
+    }
+  }
 }
 
 video::-webkit-media-controls-fullscreen-button {

src/views/device/camera/index.vue

@@ -187,13 +187,13 @@
           />
         </el-form-item>
         <el-form-item
-          v-if="!isEdit"
           label="ID"
           prop="deviceId"
         >
           <el-input
             v-model.number="camera.deviceId"
             maxlength="50"
+            :disabled="isEdit"
             class="c-form__item"
           />
         </el-form-item>
@@ -204,10 +204,12 @@
           <el-input
             v-model.number="camera.username"
             maxlength="50"
+            :disabled="isEdit"
             class="c-form__item"
           />
         </el-form-item>
         <el-form-item
+          v-if="!isEdit"
           label="密码"
           prop="password"
         >
@@ -269,8 +271,7 @@ import {
   getCamera,
   addCamera,
   updateCamera,
-  deleteCamera,
-  getOnline
+  deleteCamera
 } from '@/api/camera'
 import { createListOptions } from '@/utils'
 import Detail from './components/Detail'
@@ -383,12 +384,15 @@ export default {
                 (this.$refs.videoB[0].clientWidth * 9) / 16 + 'px'
               this.destroyPlayer()
               for (let i = 0; i < data.length; i++) {
-                getOnline(options.list[i].deviceId).then(({ data }) => {
-                  options.list[i].online = data
-                  if (data) {
-                    this.getflv(options.list[i].deviceId)
-                  }
-                })
+                if (options.list[i].online) {
+                  this.getflv(options.list[i].deviceId)
+                }
+                // getOnline(options.list[i].deviceId).then(({ data }) => {
+                //   options.list[i].online = data
+                //   if (data) {
+                //     this.getflv(options.list[i].deviceId)
+                //   }
+                // })
               }
             })
           },
@@ -451,6 +455,7 @@ export default {
       this.editOption = item
       this.camera = {
         name: item.name,
+        deviceId: item.deviceId,
         username: item.username,
         remark: item.remark
       }