修改摄像头名称超过两行导致预览摄像头样式串的问题

monitor_ui/src/views/centerMonitor/camera/index.vue

@@ -146,7 +146,16 @@
 
     <el-table v-loading="loading" :visible.sync="loading" :data="cameraList" @selection-change="handleSelectionChange">
       <el-table-column type="selection" width="55" align="center"/>
-      <el-table-column label="摄像头名称" align="center" prop="cameraName"/>
+      <el-table-column label="摄像头名称" align="center">
+        <template slot-scope="scope">
+          <span v-if="scope.row.cameraName && scope.row.cameraName.length <= 10">
+            {{ scope.row.cameraName }}
+          </span>
+          <el-tooltip v-else :content="scope.row.cameraName" placement="top">
+            <span>{{ scope.row.cameraName ? scope.row.cameraName.substring(0, 10) + '...' : '' }}</span>
+          </el-tooltip>
+        </template>
+      </el-table-column>
       <el-table-column label="ip" align="center" prop="cameraIp"/>
       <el-table-column label="摄像头厂家" align="center" prop="cameraFactory" width="100">
         <template slot-scope="scope">
@@ -595,7 +604,7 @@ import {
   listStateLog,
   synchronizeOfflineCamera
 } from '@/api/centerMonitor/camera/camera'
-import { listCamerachannel } from '@/api/centerMonitor/camera/camerachannel'
+import {listCamerachannel} from '@/api/centerMonitor/camera/camerachannel'
 import deptselector from '@/views/components/deptselector'
 import supermap from '@/views/components/supermap'
 import ISuperMap from '@/views/components/ISuperMap'
@@ -604,14 +613,14 @@ import camerastatelog from './camerastatelog'
 import aidevicedept from '@/views/centerMonitor/aidevicedept/aidevicedept'
 import aideviceevent from '@/views/centerMonitor/aideviceevent/aideviceevent'
 import haikangTVWalls from '@/views/components/haikangTVWalls.vue'
-import { checkNonnegativeInteger, checkLat, checkLon } from '@/api/system/rules'
+import {checkNonnegativeInteger, checkLat, checkLon} from '@/api/system/rules'
 import {
   selectConfigKey
 } from '@/api/system/config'
 
 // import moment from 'moment';
 /** ----------------------------------摄像头预览开始------------------------------------- */
-import { getDahuaVideoServer } from '@/api/centerMonitor/dahua/dahua'
+import {getDahuaVideoServer} from '@/api/centerMonitor/dahua/dahua'
 import DHWs from '@/daHua/lib/DHWs'
 import {
   getHaiKangVideoServer
@@ -773,7 +782,7 @@ export default {
       // 表单校验
       rules: {
         cameraName: [
-          { required: true, message: '摄像头名称不能为空', trigger: 'blur' }
+          {required: true, message: '摄像头名称不能为空', trigger: 'blur'}
         ],
         // cameraIp: [
         //   {
@@ -868,45 +877,45 @@ export default {
         //   },
         // ],
         cameraCode: [
-          { required: true, message: '摄像头编码不能为空', trigger: 'blur' }
+          {required: true, message: '摄像头编码不能为空', trigger: 'blur'}
         ],
         convergencePlatform: [
-          { required: true, message: '融合平台不能为空', trigger: 'blur' }
+          {required: true, message: '融合平台不能为空', trigger: 'blur'}
         ],
         cameraFactory: [
-          { required: true, message: '摄像头厂家不能为空', trigger: 'blur' }
+          {required: true, message: '摄像头厂家不能为空', trigger: 'blur'}
         ],
         height: [
-          { required: true, message: '高度不能为空', trigger: 'blur' }
+          {required: true, message: '高度不能为空', trigger: 'blur'}
         ],
         cameraRegion: [
-          { required: true, message: '所属区域不能为空', trigger: 'blur' }
+          {required: true, message: '所属区域不能为空', trigger: 'blur'}
         ],
         cameraRadius: [
-          { required: true, message: '半径不能为空', trigger: 'blur' },
-          { validator: checkNonnegativeInteger, trigger: 'blur' }
+          {required: true, message: '半径不能为空', trigger: 'blur'},
+          {validator: checkNonnegativeInteger, trigger: 'blur'}
         ],
         longitude: [
-          { required: true, message: '经度不能为空', trigger: 'change' },
-          { validator: checkLon, trigger: 'blur' }
+          {required: true, message: '经度不能为空', trigger: 'change'},
+          {validator: checkLon, trigger: 'blur'}
         ],
         latitude: [
-          { required: true, message: '纬度不能为空', trigger: 'change' },
-          { validator: checkLat, trigger: 'blur' }
+          {required: true, message: '纬度不能为空', trigger: 'change'},
+          {validator: checkLat, trigger: 'blur'}
         ],
         list: [
-          { required: true, message: '可用系统不能为空', trigger: 'blur' }
+          {required: true, message: '可用系统不能为空', trigger: 'blur'}
         ],
         cameraType: [
-          { required: true, message: '摄像头类型不能为空', trigger: 'blur' }
+          {required: true, message: '摄像头类型不能为空', trigger: 'blur'}
         ],
         cameraUse: [
-          { required: true, message: '摄像头用途不能为空', trigger: 'blur' }
+          {required: true, message: '摄像头用途不能为空', trigger: 'blur'}
         ]
       }
     }
   },
-  activated: function() {
+  activated: function () {
     let startTime = this.$route.query.startTime // 从url中获取startTime参数
     let endTime = this.$route.query.endTime // 从url中获取endTime参数
     if (startTime && endTime) {
@@ -943,7 +952,7 @@ export default {
     isFormIncomplete() {
       return !this.form.cameraFactory || !this.form.cameraName || !this.form.cameraRegion || !this.form.cameraRadius || !this.form.height || !this.form.longitude || !this.form.latitude
     },
-    login: function(row) { // 调用登录接口
+    login: function (row) { // 调用登录接口
       console.log('row', row)
     },
     next() {
@@ -984,7 +993,7 @@ export default {
       if (this.sign === 2 || this.sign === 3) this.form.longitude = val.xiantude//this.form.longitude 换成对应的线或区域的字段
       this.ISuperMapvisible = false
     },
-    showLatLng: function(lat, lng) {
+    showLatLng: function (lat, lng) {
       this.form.latitude = lat
       this.form.longitude = lng
     },
@@ -1157,7 +1166,7 @@ export default {
     /** 删除按钮操作 */
     handleDelete(row) {
       const ids = row.id || this.ids
-      this.$modal.confirm('是否确认删除摄像头数据？').then(function() {
+      this.$modal.confirm('是否确认删除摄像头数据？').then(function () {
         return delCamera(ids)
       }).then(() => {
         this.getList()
@@ -1265,16 +1274,16 @@ export default {
 
 
     /** ----------------------------------大华摄像头预览开始------------------------------------- */
-    alertLogin: function() {
+    alertLogin: function () {
       this.$modal.msg('登录中....')
     },
-    alertLoginSuccess: function() {
+    alertLoginSuccess: function () {
       this.$modal.msgSuccess('登录成功！')
     },
-    alertLoginFailed: function() {
+    alertLoginFailed: function () {
       this.$modal.msgError('登陆失败！')
     },
-    alertReinstall: function() {
+    alertReinstall: function () {
       this.$modal.msgWarning('请重新安装客户端')
     },
     /** 预览按钮操作 */
@@ -1301,7 +1310,7 @@ export default {
                 // this.realTimeVideoDialog(channelCode)
                 let channelList = []
                 for (let i = 0; i < cameraCode.length; i++) {
-                  let code = { 'channelId': cameraCode }
+                  let code = {'channelId': cameraCode}
                   channelList.push(code)
                 }
                 // 构建参数对象
@@ -1328,7 +1337,7 @@ export default {
         })
       })
     },
-    careteListJson(cameraCode, cameraName, deviceCode=null, deviceSn=null, deviceProtocolType=null, deviceLoginType=null) {
+    careteListJson(cameraCode, cameraName, deviceCode = null, deviceSn = null, deviceProtocolType = null, deviceLoginType = null) {
       const treeLabels = [{
         'id': null,
         'labelCode': '999',
@@ -1353,16 +1362,16 @@ export default {
           'online': '1',
           'cameraCode': '1'
         };
-        if (deviceCode!== null) {
+        if (deviceCode !== null) {
           currentParams.deviceCode = deviceCode;
         }
-        if (deviceSn!== null) {
+        if (deviceSn !== null) {
           currentParams.deviceSn = deviceSn;
         }
-        if (deviceProtocolType!== null) {
+        if (deviceProtocolType !== null) {
           currentParams.deviceProtocolType = deviceProtocolType;
         }
-        if (deviceLoginType!== null) {
+        if (deviceLoginType !== null) {
           currentParams.deviceLoginType = deviceLoginType;
         }
         channelDates.push(currentParams);
@@ -1432,7 +1441,7 @@ export default {
     },
     customizeTree(tvListJson) { // 调用控件接口树
       const config = this.ws.config
-      const { loginIp, userCode } = config
+      const {loginIp, userCode} = config
       this.ws.postMessage('customizeTree', {
         loginIp,
         userCode,
@@ -1443,7 +1452,7 @@ export default {
     },
     playRealMonitorVideo(array) { // 自定义设备树自动播放指定通道编码视频
       const config = this.ws.config
-      const { loginIp, userCode } = config
+      const {loginIp, userCode} = config
       this.ws.postMessage('playRealMonitorVideo', {
         loginIp,
         userCode,
@@ -1477,7 +1486,7 @@ export default {
                 this.activePanel = 'key2'
                 let channelList = []
                 for (let i = 0; i < cameraCode.length; i++) {
-                  let code = { 'channelId': cameraCode }
+                  let code = {'channelId': cameraCode}
                   channelList.push(code)
                 }
                 this.create(this.careteListJson(cameraCode, cameraName, deviceCode, deviceSn, deviceProtocolType, deviceLoginType), channelList, 'dssPreview', 'playbackUI')
@@ -1497,12 +1506,12 @@ export default {
     preview_hik(row) {
       let that = this
       let cameraCode = row.cameraCode
-      getHaiKangVideoServer({ cameraCode: cameraCode }).then(newResponse => {
+      getHaiKangVideoServer({cameraCode: cameraCode}).then(newResponse => {
         if (newResponse.code == 200) {
           that.cameraVisible = true
           that.cameraTitle = '摄像头-' + newResponse.data.cameraName
           that.initPlugin(newResponse.data.appkey, newResponse.data.loginIp, newResponse.data.secret, newResponse.data.loginPort)
-          setTimeout(function() {
+          setTimeout(function () {
             that.playhk(newResponse.data.channelCode)
           }, 5000)
         }
@@ -1514,9 +1523,9 @@ export default {
       that.cameraVisible = true
       that.cameraTitle = '查看电视墙'
       that.initPluginTvWall()
-      setTimeout(function() {
+      setTimeout(function () {
         for (let j = 0; j < cameraCodes.length; j++) {
-          getHaiKangVideoServer({ cameraCode: cameraCodes[j] }).then(newResponse => {
+          getHaiKangVideoServer({cameraCode: cameraCodes[j]}).then(newResponse => {
             if (newResponse.code == 200) {
               that.playhk(newResponse.data.channelCode)
             }
@@ -1527,9 +1536,9 @@ export default {
     cancelEventLocationShow() {
       if (this.oWebControl != null) {
         this.oWebControl.JS_HideWnd()   // 先让窗口隐藏，规避可能的插件窗口滞后于浏览器消失问题
-        this.oWebControl.JS_Disconnect().then(function() {  // 断开与插件服务连接成功
+        this.oWebControl.JS_Disconnect().then(function () {  // 断开与插件服务连接成功
           },
-          function() {  // 断开与插件服务连接失败
+          function () {  // 断开与插件服务连接失败
           })
       }
       this.cameraIndexCodePlayBack = ''
@@ -1584,33 +1593,33 @@ export default {
         iServicePortStart: 15900,                           // 指定起止端口号，建议使用该值
         iServicePortEnd: 15909,
         szClassId: '23BF3B0A-2C56-4D97-9C03-0CB103AA8F11',   // 用于IE10使用ActiveX的clsid
-        cbConnectSuccess: function() {                     // 创建WebControl实例成功
+        cbConnectSuccess: function () {                     // 创建WebControl实例成功
           that.oWebControl.JS_StartService('window', {         // WebControl实例创建成功后需要启动服务
             dllPath: './VideoPluginConnect.dll'         // 值"./VideoPluginConnect.dll"写死
-          }).then(function() {                           // 启动插件服务成功
+          }).then(function () {                           // 启动插件服务成功
             that.oWebControl.JS_SetWindowControlCallback({   // 设置消息回调
               cbIntegrationCallBack: cbIntegrationCallBack
             })
-            that.oWebControl.JS_CreateWnd('playWndPlayBack', 1020, 600).then(function() { //JS_CreateWnd创建视频播放窗口，宽高可设定
+            that.oWebControl.JS_CreateWnd('playWndPlayBack', 1020, 600).then(function () { //JS_CreateWnd创建视频播放窗口，宽高可设定
               that.initPlayBack()  // 创建播放实例成功后初始化
             })
-          }, function() { // 启动插件服务失败
+          }, function () { // 启动插件服务失败
           })
         },
-        cbConnectError: function() { // 创建WebControl实例失败
+        cbConnectError: function () { // 创建WebControl实例失败
           that.oWebControl = null
           $('#playWndPlayBack').html('插件未启动，正在尝试启动，请稍候...')
           WebControl.JS_WakeUp('VideoWebPlugin://') // 程序未启动时执行error函数，采用wakeup来启动程序
           initCount++
           if (initCount < 3) {
-            setTimeout(function() {
+            setTimeout(function () {
               that.initPluginPlayBack()
             }, 3000)
           } else {
             $('#playWndPlayBack').html('插件启动失败，请检查插件是否安装！')
           }
         },
-        cbConnectClose: function(bNormalClose) {
+        cbConnectClose: function (bNormalClose) {
           // 异常断开：bNormalClose = false
           // JS_Disconnect正常断开：bNormalClose = true
           console.log('cbConnectClose')
@@ -1626,34 +1635,34 @@ export default {
         iServicePortStart: 15900,                           // 指定起止端口号，建议使用该值
         iServicePortEnd: 15909,
         szClassId: '23BF3B0A-2C56-4D97-9C03-0CB103AA8F11',   // 用于IE10使用ActiveX的clsid
-        cbConnectSuccess: function() {                     // 创建WebControl实例成功
+        cbConnectSuccess: function () {                     // 创建WebControl实例成功
           that.oWebControl.JS_StartService('window', {         // WebControl实例创建成功后需要启动服务
             dllPath: './VideoPluginConnect.dll'         // 值"./VideoPluginConnect.dll"写死
-          }).then(function() {                           // 启动插件服务成功
+          }).then(function () {                           // 启动插件服务成功
             that.oWebControl.JS_SetWindowControlCallback({   // 设置消息回调
               cbIntegrationCallBack: cbIntegrationCallBack
             })
 
-            that.oWebControl.JS_CreateWnd('playWnd', 1020, 600).then(function() { //JS_CreateWnd创建视频播放窗口，宽高可设定
+            that.oWebControl.JS_CreateWnd('playWnd', 1020, 600).then(function () { //JS_CreateWnd创建视频播放窗口，宽高可设定
               that.initTvWall()  // 创建播放实例成功后初始化
             })
-          }, function() { // 启动插件服务失败
+          }, function () { // 启动插件服务失败
           })
         },
-        cbConnectError: function() { // 创建WebControl实例失败
+        cbConnectError: function () { // 创建WebControl实例失败
           that.oWebControl = null
           $('#playWnd').html('插件未启动，正在尝试启动，请稍候...')
           WebControl.JS_WakeUp('VideoWebPlugin://') // 程序未启动时执行error函数，采用wakeup来启动程序
           initCount++
           if (initCount < 3) {
-            setTimeout(function() {
+            setTimeout(function () {
               that.initPluginTvWall()
             }, 3000)
           } else {
             $('#playWnd').html('插件启动失败，请检查插件是否安装！')
           }
         },
-        cbConnectClose: function(bNormalClose) {
+        cbConnectClose: function (bNormalClose) {
           // 异常断开：bNormalClose = false
           // JS_Disconnect正常断开：bNormalClose = true
           console.log('cbConnectClose')
@@ -1664,7 +1673,7 @@ export default {
     //初始化回放
     initPlayBack() {
       let that = this
-      this.getPubKey(function() {
+      this.getPubKey(function () {
         ////////////////////////////////// 请自行修改以下变量值	////////////////////////////////////
         var appkey = '24699060'                           //综合安防管理平台提供的appkey，必填
         var secret = that.setEncrypt('tt1pMbsrlwGZUWucdAPw')   //综合安防管理平台提供的secret，必填
@@ -1698,7 +1707,7 @@ export default {
             showSmart: showSmart,                      //是否显示智能信息
             buttonIDs: buttonIDs                       //自定义工具条按钮
           })
-        }).then(function(oData) {
+        }).then(function (oData) {
           that.oWebControl.JS_Resize(1020, 600)  // 初始化后resize一次，规避firefox下首次显示窗口后插件窗口未与DIV窗口重合问题
         })
       })
@@ -1706,7 +1715,7 @@ export default {
     //初始化电视墙
     initTvWall() {
       let that = this
-      this.getPubKey(function() {
+      this.getPubKey(function () {
         ////////////////////////////////// 请自行修改以下变量值	////////////////////////////////////
         var appkey = '24699060'                           //综合安防管理平台提供的appkey，必填
         var secret = that.setEncrypt('tt1pMbsrlwGZUWucdAPw')   //综合安防管理平台提供的secret，必填
@@ -1740,7 +1749,7 @@ export default {
             showSmart: showSmart,                      //是否显示智能信息
             buttonIDs: buttonIDs                       //自定义工具条按钮
           })
-        }).then(function(oData) {
+        }).then(function (oData) {
           that.oWebControl.JS_Resize(1020, 600)  // 初始化后resize一次，规避firefox下首次显示窗口后插件窗口未与DIV窗口重合问题
         })
       })
@@ -1753,34 +1762,34 @@ export default {
         iServicePortStart: 15900,                           // 指定起止端口号，建议使用该值
         iServicePortEnd: 15909,
         szClassId: '23BF3B0A-2C56-4D97-9C03-0CB103AA8F11',   // 用于IE10使用ActiveX的clsid
-        cbConnectSuccess: function() {                     // 创建WebControl实例成功
+        cbConnectSuccess: function () {                     // 创建WebControl实例成功
           that.oWebControl.JS_StartService('window', {         // WebControl实例创建成功后需要启动服务
             dllPath: './VideoPluginConnect.dll'         // 值"./VideoPluginConnect.dll"写死
-          }).then(function() {                           // 启动插件服务成功
+          }).then(function () {                           // 启动插件服务成功
             that.oWebControl.JS_SetWindowControlCallback({   // 设置消息回调
               cbIntegrationCallBack: cbIntegrationCallBack
             })
 
-            that.oWebControl.JS_CreateWnd('playWnd', 1020, 600).then(function() { //JS_CreateWnd创建视频播放窗口，宽高可设定
+            that.oWebControl.JS_CreateWnd('playWnd', 1020, 600).then(function () { //JS_CreateWnd创建视频播放窗口，宽高可设定
               that.init(newappkey, newloginIp, newsecret, newloginPort)  // 创建播放实例成功后初始化
             })
-          }, function() { // 启动插件服务失败
+          }, function () { // 启动插件服务失败
           })
         },
-        cbConnectError: function() { // 创建WebControl实例失败
+        cbConnectError: function () { // 创建WebControl实例失败
           that.oWebControl = null
           $('#playWnd').html('插件未启动，正在尝试启动，请稍候...')
           WebControl.JS_WakeUp('VideoWebPlugin://') // 程序未启动时执行error函数，采用wakeup来启动程序
           initCount++
           if (initCount < 3) {
-            setTimeout(function() {
+            setTimeout(function () {
               that.initPlugin(newappkey, newloginIp, newsecret, newloginPort)
             }, 3000)
           } else {
             $('#playWnd').html('插件启动失败，请检查插件是否安装！<a href="./public/hk/VideoWebPlugin.exe">点击下载插件</a>')
           }
         },
-        cbConnectClose: function(bNormalClose) {
+        cbConnectClose: function (bNormalClose) {
           // 异常断开：bNormalClose = false
           // JS_Disconnect正常断开：bNormalClose = true
           console.log('cbConnectClose')
@@ -1813,7 +1822,7 @@ export default {
     //初始化
     init(newappkey, newloginIp, newsecret, newloginPort) {
       let that = this
-      that.getPubKey(function() {
+      that.getPubKey(function () {
         ////////////////////////////////// 请自行修改以下变量值	////////////////////////////////////
         var appkey = newappkey                           //综合安防管理平台提供的appkey，必填
         var secret = that.setEncrypt(newsecret)   //综合安防管理平台提供的secret，必填
@@ -1847,7 +1856,7 @@ export default {
             showSmart: showSmart,                      //是否显示智能信息
             buttonIDs: buttonIDs                       //自定义工具条按钮
           })
-        }).then(function(oData) {
+        }).then(function (oData) {
           that.oWebControl.JS_Resize(1020, 600)  // 初始化后resize一次，规避firefox下首次显示窗口后插件窗口未与DIV窗口重合问题
         })
       })
@@ -1860,7 +1869,7 @@ export default {
         argument: JSON.stringify({
           keyLength: 1024
         })
-      }).then(function(oData) {
+      }).then(function (oData) {
         console.log(oData)
         if (oData.responseMsg.data) {
           that.pubKey = oData.responseMsg.data
@@ -1879,8 +1888,8 @@ export default {
       let that = this
       if (that.oWebControl != null) {
         that.oWebControl.JS_HideWnd()   // 先让窗口隐藏，规避可能的插件窗口滞后于浏览器消失问题
-        that.oWebControl.JS_Disconnect().then(function() {
-        }, function() {
+        that.oWebControl.JS_Disconnect().then(function () {
+        }, function () {
         })  // 断开与插件服务连接成功 // 断开与插件服务连接失败
       }
     },
@@ -1942,7 +1951,7 @@ export default {
       let that = this
       that.loading = true
       that.$modal.msgSuccess('开始同步')
-      synchronizeOfflineCamera().then(function(res) {
+      synchronizeOfflineCamera().then(function (res) {
         if (res.code == 200) {
           that.loading = false
           that.$modal.msgSuccess('设备状态同步成功')