feat(camera): support manufacturer

src/api/camera.js

@@ -1,49 +1,5 @@
 import request from '@/utils/request'
-import {
-  add,
-  update,
-  del,
-  addTenant
-} from './base'
-
-// 查询摄像头
-export function getCameras (query) {
-  const { pageNum: pageIndex, pageSize, ...params } = query
-  return request({
-    url: '/camera/list',
-    method: 'GET',
-    params: addTenant({
-      pageIndex, pageSize,
-      ...params
-    })
-  })
-}
-
-// 新增摄像头
-export function addCamera (data) {
-  return add({
-    url: '/camera',
-    method: 'POST',
-    data: addTenant(data)
-  })
-}
-
-// 编辑摄像头
-export function updateCamera (data) {
-  return update({
-    url: '/camera',
-    method: 'PUT',
-    data
-  })
-}
-
-// 删除摄像头
-export function deleteCamera (id) {
-  return del({
-    url: `/camera/${id}`,
-    method: 'DELETE'
-  }, '该摄像头')
-}
+import { update } from './base'
 
 // 获取摄像头人流量
 export function getStatistic (params) {
@@ -63,7 +19,7 @@ export function getVideoInfo (deviceId) {
 }
 
 // 获取摄像头可用的视频参数
-export function getAvailableParam () {
+export function getAvailableParams () {
   return request({
     url: `/camera/video/availableParam`,
     method: 'GET'
@@ -71,7 +27,7 @@ export function getAvailableParam () {
 }
 
 // 设置摄像头参数
-export function setCamera (data) {
+export function setCameraParams (data) {
   const { deviceId, ...params } = data
   return update({
     url: `/camera/${deviceId}/video/param`,

src/api/external.js

@@ -83,15 +83,6 @@ export function getReceivingCardTopology (id, options) {
   })
 }
 
-// 摄像头
-export function getCamerasByDevice (deviceId, params) {
-  return request({
-    url: `/device/bind/thirdPartyCamera/${deviceId}`,
-    method: 'GET',
-    params
-  })
-}
-
 // 厂商
 export function getManufacturers (query) {
   const { pageNum: pageIndex, pageSize, ...params } = query
@@ -406,3 +397,39 @@ export function plcCommand (deviceId, status) {
     data: { deviceId, status }
   }, '执行')
 }
+
+// 摄像头
+export function getCameras (query) {
+  const { pageNum: pageIndex, pageSize, ...params } = query
+  return request({
+    url: '/camera/list',
+    method: 'GET',
+    params: addTenant({
+      pageIndex, pageSize,
+      ...params
+    })
+  })
+}
+
+export function addCamera (data) {
+  return add({
+    url: '/camera',
+    method: 'POST',
+    data: addTenantAndOrg(data)
+  })
+}
+
+export function updateCamera (data) {
+  return update({
+    url: '/camera',
+    method: 'PUT',
+    data
+  })
+}
+
+export function deleteCamera (id) {
+  return del({
+    url: `/camera/${id}`,
+    method: 'DELETE'
+  }, '该摄像头')
+}

src/components/service/FullLink/index.vue

@@ -75,16 +75,16 @@ const LinkItems = Object.freeze([
     canClick: true
   },
   {
-    key: ThirdPartyDevice.TRAFFIC_CAMERA,
-    alias: 'traffic_camera',
-    label: '人流量监测摄像头',
+    key: ThirdPartyDevice.LED_CAMERA,
+    alias: 'led_camera',
+    label: 'LED屏监测摄像头',
     iconKey: 'camera',
     canClick: true
   },
   {
-    key: ThirdPartyDevice.LED_CAMERA,
-    alias: 'led_camera',
-    label: 'LED屏监测摄像头',
+    key: ThirdPartyDevice.TRAFFIC_CAMERA,
+    alias: 'traffic_camera',
+    label: '人流量监测摄像头',
     iconKey: 'camera',
     canClick: true
   },
@@ -111,9 +111,9 @@ const LineFromeTo = {
   4: [ThirdPartyDevice.RECEIVING_CARD, 'led'],
   5: ['msr', ThirdPartyDevice.GATEWAY],
   6: ['msr', ThirdPartyDevice.LED_CAMERA, ThirdPartyDevice.TRAFFIC_CAMERA],
-  7: ['msr', ThirdPartyDevice.LED_CAMERA],
-  8: ['msr', ThirdPartyDevice.LED_CAMERA],
-  9: ['msr', ThirdPartyDevice.TRAFFIC_CAMERA],
+  7: ['msr', ThirdPartyDevice.TRAFFIC_CAMERA],
+  8: ['msr', ThirdPartyDevice.TRAFFIC_CAMERA],
+  9: ['msr', ThirdPartyDevice.LED_CAMERA],
   10: [ThirdPartyDevice.GATEWAY, 'led'],
   11: ['msr', ThirdPartyDevice.GATEWAY, ThirdPartyDevice.LED_CAMERA, ThirdPartyDevice.TRAFFIC_CAMERA]
 }
@@ -334,12 +334,12 @@ export default {
         height: 138px;
       }
 
-      &.traffic_camera {
+      &.led_camera {
         top: 280px;
         left: 460px;
       }
 
-      &.led_camera {
+      &.traffic_camera {
         top: 400px;
         left: 290px;
       }
@@ -476,11 +476,11 @@ export default {
     @include getPosition(270px, 250px, 138px, 138px);
   }
 
-  &.traffic_camera {
+  &.led_camera {
     @include getPosition(480px, 156px, 80px, 80px);
   }
 
-  &.led_camera {
+  &.traffic_camera {
     @include getPosition(480px, 252px, 80px, 80px);
   }
 

src/components/service/external/camera/CameraDetail/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="c-camera-detail">
     <div class="l-flex--row center c-camera-detail__header u-color--white u-font-size--xl u-text--center">
-      {{ camera.name }}
+      {{ camera.remark }}
     </div>
     <video
       ref="video"
@@ -128,8 +128,8 @@ import * as echarts from 'echarts'
 import {
   getStatistic,
   getVideoInfo,
-  getAvailableParam,
-  setCamera,
+  getAvailableParams,
+  setCameraParams,
   isOnline
 } from '@/api/camera'
 import {
@@ -182,7 +182,7 @@ export default {
     }
   },
   created () {
-    this.getAvailableParam()
+    this.getAvailableParams()
   },
   mounted () {
     this.createPlayer()
@@ -225,9 +225,9 @@ export default {
         }
       )
     },
-    setCamera () {
+    setCameraParams () {
       this.hideSettingsMenu()
-      setCamera({
+      setCameraParams({
         deviceId: this.camera.identifier,
         ...this.infoData
       }).then(
@@ -240,7 +240,7 @@ export default {
         }
       )
     },
-    getAvailableParam () {
+    getAvailableParams () {
       if (this.$videoPramsLoading) {
         this.$message({
           type: 'warning',
@@ -249,7 +249,7 @@ export default {
         return
       }
       this.$videoPramsLoading = true
-      getAvailableParam().finally(() => {
+      getAvailableParams().finally(() => {
         this.$videoPramsLoading = false
       }).then(({ data }) => {
         this.videoSettings = {
@@ -275,7 +275,7 @@ export default {
     },
     onSettings () {
       if (!this.videoSettings) {
-        this.getAvailableParam()
+        this.getAvailableParams()
         return
       }
       if (!this.infoData) {
@@ -412,7 +412,7 @@ export default {
         default:
           break
       }
-      this.setCamera()
+      this.setCameraParams()
     },
     onTimeTypeChanged (type) {
       if (this.active === type) {

src/components/service/external/camera/CameraPlayer/index.vue

@@ -30,7 +30,7 @@
       v-if="controls"
       class="l-flex--row c-footer"
     >
-      <div class="l-flex__auto c-sibling-item u-ellipsis">{{ camera.name }}</div>
+      <div class="l-flex__auto c-sibling-item u-ellipsis">{{ camera.remark }}</div>
       <slot />
       <i
         v-if="online && !loading"

src/views/external/box/settings/components/Camera.vue

@@ -57,7 +57,7 @@ export default {
           data: data.filter(({ instance }) => instance).map(({ name, nodeType, instance }) => {
             return {
               ...instance,
-              name: `${ThirdPartyDeviceInfo[nodeType]}(${name})`
+              remark: `${ThirdPartyDeviceInfo[nodeType]}(${name})`
             }
           })
         }

src/views/external/box/settings/components/external/Camera.vue

@@ -12,18 +12,20 @@
       <div class="c-sibling-item--v">
         <template v-if="info.instance">
           <div class="l-flex--row c-info__block">
-            <!-- <div class="l-flex--row l-flex__fill c-sibling-item">
+            <div class="l-flex--row l-flex__fill c-sibling-item">
               <div class="l-flex__none c-info__title">厂商</div>
               <div class="l-flex__fill c-info__value">{{ info.instance.manufacturerName }}</div>
             </div>
             <div class="l-flex--row l-flex__fill c-sibling-item">
               <div class="l-flex__none c-info__title">型号</div>
               <div class="l-flex__fill c-info__value">{{ info.instance.model }}</div>
-            </div> -->
+            </div>
             <div class="l-flex--row l-flex__fill c-sibling-item">
               <div class="l-flex__none c-info__title">唯一标识</div>
               <div class="l-flex__fill c-info__value">{{ info.instance.identifier }}</div>
             </div>
+          </div>
+          <div class="l-flex--row c-info__block">
             <div class="l-flex--row l-flex__fill c-sibling-item">
               <div class="l-flex__none l-flex--row c-info__title">
                 <span class="c-sibling-item">状态</span>
@@ -35,7 +37,13 @@
               </div>
               <div class="l-flex__fill c-info__value u-color--blue">{{ info.instance.onlineStatus === 1 ? '在线' : '离线' }}</div>
             </div>
-            <div class="l-flex--row l-flex__fill c-sibling-item" />
+            <div
+              class="l-flex--row l-flex__fill c-sibling-item"
+              style="flex-grow: 2;"
+            >
+              <div class="l-flex__none c-info__title">备注</div>
+              <div class="l-flex__fill c-info__value">{{ info.remark }}</div>
+            </div>
           </div>
         </template>
         <div

src/views/external/camera/index.vue

@@ -23,11 +23,11 @@
           placeholder="请选择厂商"
           :schema="manufacturerSelectSchema"
         />
-        <span class="c-grid-form__label u-required">名称</span>
+        <span class="c-grid-form__label u-required">型号</span>
         <el-input
-          v-model.trim="item.name"
-          placeholder="最多30个字符"
-          maxlength="30"
+          v-model.trim="item.model"
+          placeholder="最多50个字符"
+          maxlength="50"
           clearable
         />
         <span class="c-grid-form__label u-required">标识</span>
@@ -44,6 +44,18 @@
           v-model.trim="item.password"
           class="u-password"
         />
+        <span class="c-grid-form__label">备注</span>
+        <div
+          class="has-info"
+          data-info="备注将用于多摄像头展示时的区分"
+        >
+          <el-input
+            v-model.trim="item.remark"
+            placeholder="最多30个字符"
+            maxlength="30"
+            clearable
+          />
+        </div>
       </div>
     </confirm-dialog>
     <camera-dialog ref="cameraDialog" />
@@ -52,15 +64,17 @@
 </template>
 
 <script>
-import { CameraToThirdPartyMap } from '@/constant'
 import {
-  getManufacturersByType,
-  getThirdPartyDevices
-} from '@/api/external'
+  ThirdPartyDeviceInfo,
+  CameraToThirdPartyMap
+} from '@/constant'
 import {
+  getManufacturersByType,
+  getCameras,
   addCamera,
+  updateCamera,
   deleteCamera
-} from '@/api/camera'
+} from '@/api/external'
 import MeshDialog from '../components/MeshDialog.vue'
 
 export default {
@@ -85,21 +99,30 @@ export default {
       item: {},
       manufacturerSelectSchema,
       schema: {
-        list: this.getThirdPartyDevices,
+        list: this.getCameras,
         buttons: [
           { type: 'add', on: this.onAdd }
         ],
         filters: [
+          { key: 'manufacturerKey', type: 'select', placeholder: '厂商', ...manufacturerSelectSchema },
           { key: 'boundFlag', type: 'select', placeholder: '使用情况', options: [
             { value: 0, label: '未使用' },
             { value: 1, label: '已使用' }
           ] },
-          { key: 'name', type: 'search', placeholder: '名称' }
+          { key: 'identifier', type: 'search', placeholder: '唯一标识' },
+          { key: 'remark', type: 'search', placeholder: '备注' }
         ],
         cols: [
           { type: 'refresh' },
-          { prop: 'name', label: '名称' },
+          { prop: 'manufacturerName', label: '厂商' },
+          { prop: 'model', label: '型号' },
           { prop: 'identifier', label: '唯一标识' },
+          { prop: 'remark', label: '备注', render: (data, h) => h('edit-input', {
+            props: {
+              value: `${data.remark}`
+            },
+            on: { edit: val => this.onEditRemark(data, val) }
+          }), 'class-name': 'c-edit-column', 'min-width': 120 },
           { type: 'tag', render: ({ onlineStatus }) => onlineStatus === 1
             ? { type: 'success', label: '在线' }
             : { type: 'danger', label: '离线' } },
@@ -119,10 +142,9 @@ export default {
     getManufacturersByType () {
       return getManufacturersByType(CameraToThirdPartyMap[this.type])
     },
-    getThirdPartyDevices (params) {
-      return getThirdPartyDevices({
+    getCameras (params) {
+      return getCameras({
         cameraType: this.type,
-        deviceType: CameraToThirdPartyMap[this.type],
         ...params
       })
     },
@@ -131,7 +153,8 @@ export default {
         cameraType: this.type,
         identifier: '',
         manufacturerKey: '',
-        name: '',
+        model: '',
+        remark: ThirdPartyDeviceInfo[CameraToThirdPartyMap[this.type]],
         username: '',
         password: ''
       }
@@ -145,24 +168,24 @@ export default {
         })
         return
       }
-      if (!this.item.name) {
+      if (!this.item.model) {
         this.$message({
           type: 'warning',
-          message: '请填写设备名称'
+          message: '请填写型号'
         })
         return
       }
       if (!this.item.identifier) {
         this.$message({
           type: 'warning',
-          message: '请填写设备标识'
+          message: '请填写唯一标识'
         })
         return
       }
       if (!/^[0-9a-zA-Z]+$/.test(this.item.identifier)) {
         this.$message({
           type: 'warning',
-          message: '设备标识格式错误仅支持数字和字母'
+          message: '唯一标识格式错误仅支持数字和字母'
         })
         return
       }
@@ -189,6 +212,19 @@ export default {
         done()
       })
     },
+    onEditRemark (camera, { newVal, oldVal }) {
+      if (newVal === oldVal) {
+        return
+      }
+      camera.remark = newVal
+      updateCamera({
+        id: camera.id,
+        username: camera.username,
+        remark: newVal
+      }).catch(() => {
+        camera.remark = oldVal
+      })
+    },
     onDel ({ id }) {
       deleteCamera(id).then(() => {
         this.$refs.table.decrease(1)

src/views/external/camera/snap/index.vue

@@ -77,11 +77,11 @@
 </template>
 
 <script>
+import { Camera } from '@/constant'
 import {
-  Camera,
-  CameraToThirdPartyMap
-} from '@/constant'
-import { getThirdPartyDevices } from '@/api/external'
+  getCameras,
+  updateCamera
+} from '@/api/external'
 import {
   AduitStatus,
   AduitStatusInfo,
@@ -99,15 +99,27 @@ export default {
   data () {
     return {
       schema: {
-        list: getThirdPartyDevices,
-        condition: { cameraType: Camera.LED, deviceType: CameraToThirdPartyMap[Camera.LED] },
+        list: getCameras,
+        condition: { cameraType: Camera.LED },
         filters: [
-          { key: 'name', type: 'search', placeholder: '名称' }
+          { key: 'boundFlag', type: 'select', placeholder: '使用情况', options: [
+            { value: 0, label: '未使用' },
+            { value: 1, label: '已使用' }
+          ] },
+          { key: 'identifier', type: 'search', placeholder: '唯一标识' },
+          { key: 'remark', type: 'search', placeholder: '备注' }
         ],
         cols: [
           { type: 'refresh' },
-          { prop: 'name', label: '名称' },
+          { prop: 'manufacturerName', label: '厂商' },
+          { prop: 'model', label: '型号' },
           { prop: 'identifier', label: '唯一标识' },
+          { prop: 'remark', label: '备注', render: (data, h) => h('edit-input', {
+            props: {
+              value: `${data.remark}`
+            },
+            on: { edit: val => this.onEditRemark(data, val) }
+          }), 'class-name': 'c-edit-column', 'min-width': 120 },
           { type: 'tag', render: ({ onlineStatus }) => onlineStatus === 1
             ? { type: 'success', label: '在线' }
             : { type: 'danger', label: '离线' } },
@@ -165,6 +177,19 @@ export default {
     }
   },
   methods: {
+    onEditRemark (camera, { newVal, oldVal }) {
+      if (newVal === oldVal) {
+        return
+      }
+      camera.remark = newVal
+      updateCamera({
+        id: camera.id,
+        username: camera.username,
+        remark: newVal
+      }).catch(() => {
+        camera.remark = oldVal
+      })
+    },
     onConfig (camera) {
       getSnapPicConfig(camera.identifier).then(({ data }) => {
         const { startTime, endTime, offset, preserveSecond, confirmDuration, enabled } = {

src/views/external/manufacturer/index.vue

@@ -27,6 +27,15 @@
           maxlength="30"
           clearable
         />
+        <span class="c-grid-form__label">唯一标识</span>
+        <el-input
+          v-model.trim="item.manufacturerKey"
+          class="has-info"
+          data-info="不填时采用默认标识"
+          placeholder="最多30个字符"
+          maxlength="30"
+          clearable
+        />
       </div>
     </confirm-dialog>
   </wrapper>

src/views/external/mesh/index.vue

@@ -219,7 +219,7 @@ import {
   getMultifunctionCards,
   getSensors,
   getPLCs,
-  getThirdPartyDevices
+  getCameras
 } from '@/api/external'
 import { getDevices } from '@/api/device'
 import * as echarts from 'echarts'
@@ -522,14 +522,18 @@ export default {
         case ThirdPartyDevice.LED_CAMERA:
         case ThirdPartyDevice.TRAFFIC_CAMERA:
           return {
-            list: getThirdPartyDevices,
-            condition: { boundFlag: 0, cameraType: ThirdPartyToCameraMap[this.thirdPartyType], deviceType: this.thirdPartyType },
+            list: getCameras,
+            condition: { boundFlag: 0, cameraType: ThirdPartyToCameraMap[this.thirdPartyType] },
             filters: [
-              { key: 'name', type: 'search', placeholder: '名称' }
+              { key: 'manufacturerKey', type: 'select', placeholder: '厂商', remote: this.getManufacturersByType, value: 'manufacturerKey', label: 'manufacturerName' },
+              { key: 'identifier', type: 'search', placeholder: '唯一标识' },
+              { key: 'remark', type: 'search', placeholder: '备注' }
             ],
             cols: [
-              { prop: 'name', label: '名称' },
-              { prop: 'identifier', label: '唯一标识' }
+              { prop: 'manufacturerName', label: '厂商' },
+              { prop: 'model', label: '型号' },
+              { prop: 'identifier', label: '唯一标识' },
+              { prop: 'remark', label: '备注' }
             ]
           }
         default:
@@ -718,7 +722,7 @@ export default {
             break
           case ThirdPartyDevice.LED_CAMERA:
           case ThirdPartyDevice.TRAFFIC_CAMERA:
-            tooltip += `<br/>唯一标识：${instance.identifier}<br/>设备名称：${instance.name}`
+            tooltip += `<br/>唯一标识：${instance.identifier}<br/>厂商：${instance.manufacturerName}<br/>型号：${instance.model}<br/>备注：${instance.remark}`
             break
           default:
             break