fix: content protection configuration

src/api/external.js

@@ -166,25 +166,12 @@ export function getContentProtection (deviceId, options) {
   })
 }
 
-const contentProtectConfig = {
-  x: 1, y: 1,
-  colors: [
-    { order: 0, r: 0, g: 0, b: 0 },
-    { order: 1, r: 0, g: 0, b: 0 },
-    { order: 2, r: 0, g: 0, b: 0 },
-    { order: 3, r: 0, g: 0, b: 0 },
-    { order: 4, r: 0, g: 0, b: 0 },
-    { order: 5, r: 0, g: 0, b: 0 }
-  ]
-}
-
 export function updateContentProtection (deviceId, data) {
   return update({
     url: '/device/contentProtect',
     method: 'POST',
     data: {
       deviceId,
-      ...contentProtectConfig,
       ...data
     }
   })

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

@@ -4,92 +4,171 @@
     title="内容保护配置"
     @confirm="onSave"
   >
-    <div class="c-grid-form auto u-align-self--center">
-      <div class="l-flex--row c-grid-form__row">
-        <span class="c-sibling-item c-grid-form__label u-bold">启用</span>
-        <el-switch
-          v-model="config.protect"
-          class="c-sibling-item"
-          active-color="#13ce66"
-          inactive-color="#ff4949"
-        />
-      </div>
-      <span class="c-grid-form__label">颜色</span>
-      <el-select
-        v-model="color"
-        class="u-width--sm"
-      >
-        <el-option
-          v-for="option in colorOptions"
-          :key="option.value"
-          :label="option.label"
-          :value="option.value"
-          :style="{ color: option.color || option.value }"
-        />
-      </el-select>
-      <span class="c-grid-form__label">X</span>
-      <div class="l-flex--row">
-        <el-input-number
-          v-model="config.x"
-          class=" c-sibling-item"
-          controls-position="right"
-          :min="1"
-          step-strictly
-        />
-        <div class="c-sibling-item farther">Y</div>
-        <el-input-number
-          v-model="config.y"
-          class=" c-sibling-item far"
-          controls-position="right"
-          :min="1"
-          step-strictly
-        />
-      </div>
-      <div class="c-grid-form__row">
-        <button
-          class="c-sibling-item o-button"
-          @click="onAdd"
-        >
-          <i class="o-button__icon el-icon-circle-plus-outline" />
-          新增
-        </button>
-        <span class="c-sibling-item u-color--info">卡号 0~255</span>
-      </div>
-      <div
-        v-for="(item, index) in config.inputCards"
-        :key="index"
-        class="c-grid-form__row"
-      >
-        <div class="l-flex--row c-sibling-item--v u-bold">
-          <span class="c-sibling-item c-grid-form__label c-grid-form__text">配置{{ index + 1 }}</span>
-          <i
-            v-if="hasMore"
-            class="c-sibling-item far el-icon-delete has-active"
-            @click="onDel(index)"
+    <template #default>
+      <div class="c-grid-form auto u-align-self--center">
+        <div class="l-flex--row c-grid-form__row">
+          <span class="c-sibling-item c-grid-form__label u-bold">启用</span>
+          <el-switch
+            v-model="config.protect"
+            class="c-sibling-item"
+            active-color="#13ce66"
+            inactive-color="#ff4949"
           />
         </div>
-        <div class="l-flex--row c-sibling-item--v">
-          <span class="l-flex__none c-sibling-item c-grid-form__label">主卡</span>
-          <el-input-number
-            v-model="item.cardId"
-            class="l-flex__auto c-sibling-item"
-            controls-position="right"
-            :min="0"
-            :max="255"
-            step-strictly
-          />
-          <span class="l-flex__none c-sibling-item far c-grid-form__label">子卡</span>
-          <el-input-number
-            v-model="item.srcId"
-            class="l-flex__auto c-sibling-item"
-            controls-position="right"
-            :min="0"
-            :max="255"
-            step-strictly
-          />
+        <div class="l-flex--row c-grid-form__row">
+          <span class="c-sibling-item c-grid-form__label">厂商</span>
+          <el-select
+            v-model="config.receiverCardManufacture"
+            class="c-sibling-item u-width--sm"
+          >
+            <el-option
+              v-for="item in manufactureOptions"
+              :key="item.value"
+              :value="item.value"
+              :label="item.label"
+            />
+          </el-select>
         </div>
+        <template v-if="config.receiverCardManufacture === 0">
+          <div class="l-flex--row c-grid-form__row">
+            <span class="c-sibling-item c-grid-form__label">颜色</span>
+            <el-select
+              v-model="cpoint.color"
+              class="c-sibling-item u-width--sm"
+            >
+              <el-option
+                v-for="option in colorOptions"
+                :key="option.value"
+                :label="option.label"
+                :value="option.value"
+                :style="{ color: option.color || option.value }"
+              />
+            </el-select>
+          </div>
+          <div class="l-flex--row c-grid-form__row">
+            <span class="c-sibling-item c-grid-form__label">X</span>
+            <el-input-number
+              v-model="cpoint.x"
+              class=" c-sibling-item"
+              controls-position="right"
+              :min="1"
+              step-strictly
+            />
+            <span class="c-sibling-item farther c-grid-form__label">Y</span>
+            <el-input-number
+              v-model="cpoint.y"
+              class=" c-sibling-item far"
+              controls-position="right"
+              :min="1"
+              step-strictly
+            />
+          </div>
+          <div class="c-grid-form__row">
+            <button
+              class="c-sibling-item o-button"
+              @click="onAdd"
+            >
+              <i class="o-button__icon el-icon-circle-plus-outline" />
+              新增
+            </button>
+            <span class="c-sibling-item u-color--info">卡号 0~255</span>
+          </div>
+          <div
+            v-for="(item, index) in cpoint.inputCards"
+            :key="index"
+            class="c-grid-form__row"
+          >
+            <div class="l-flex--row c-sibling-item--v u-bold">
+              <span class="c-sibling-item c-grid-form__label c-grid-form__text">配置{{ index + 1 }}</span>
+              <i
+                v-if="hasMore"
+                class="c-sibling-item far el-icon-delete has-active"
+                @click="onDel(index)"
+              />
+            </div>
+            <div class="l-flex--row c-sibling-item--v">
+              <span class="l-flex__none c-sibling-item c-grid-form__label">主卡</span>
+              <el-input-number
+                v-model="item.cardId"
+                class="l-flex__auto c-sibling-item"
+                controls-position="right"
+                :min="0"
+                :max="255"
+                step-strictly
+              />
+              <span class="l-flex__none c-sibling-item far c-grid-form__label">子卡</span>
+              <el-input-number
+                v-model="item.srcId"
+                class="l-flex__auto c-sibling-item"
+                controls-position="right"
+                :min="0"
+                :max="255"
+                step-strictly
+              />
+            </div>
+          </div>
+        </template>
+        <template v-if="config.receiverCardManufacture === 1">
+          <div class="c-grid-form__row">
+            <button
+              class="c-sibling-item o-button"
+              @click="onAddPoint"
+            >
+              <i class="o-button__icon el-icon-circle-plus-outline" />
+              新增检测点
+            </button>
+            <span class="c-sibling-item u-color--info">连续的支持6个，离散的3个</span>
+          </div>
+          <div
+            v-for="(item, index) in points"
+            :key="index"
+            class="c-grid-form__row"
+          >
+            <div class="l-flex--row c-sibling-item--v u-bold">
+              <span class="c-sibling-item c-grid-form__label c-grid-form__text">检测点{{ index + 1 }}</span>
+              <i
+                v-if="hasMorePoint"
+                class="c-sibling-item far el-icon-delete has-active"
+                @click="onDelPoint(index)"
+              />
+            </div>
+            <div class="l-flex--row c-sibling-item--v">
+              <span class="l-flex__none c-sibling-item c-grid-form__label">颜色</span>
+              <el-select
+                v-model="item.color"
+                class="c-sibling-item u-width--sm"
+              >
+                <el-option
+                  v-for="option in colorOptions"
+                  :key="option.value"
+                  :label="option.label"
+                  :value="option.value"
+                  :style="{ color: option.color || option.value }"
+                />
+              </el-select>
+            </div>
+            <div class="l-flex--row c-sibling-item--v">
+              <span class="l-flex__none c-sibling-item c-grid-form__label">X</span>
+              <el-input-number
+                v-model="item.x"
+                class="l-flex__auto c-sibling-item"
+                controls-position="right"
+                :min="1"
+                step-strictly
+              />
+              <span class="l-flex__none c-sibling-item far c-grid-form__label">Y</span>
+              <el-input-number
+                v-model="item.y"
+                class="l-flex__auto c-sibling-item"
+                controls-position="right"
+                :min="1"
+                step-strictly
+              />
+            </div>
+          </div>
+        </template>
       </div>
-    </div>
+    </template>
   </confirm-dialog>
 </template>
 
@@ -103,44 +182,83 @@ export default {
   name: 'ContentProtectionConfigDialog',
   data () {
     return {
-      config: {
-        protect: false,
-        inputCards: [],
-        x: 1,
-        y: 1
-      },
-      color: '#000000',
       colorOptions: [
-        { label: '白色', value: '#FFFFFF', color: '#999' },
-        { label: '黑色', value: '#000000' },
-        { label: '蓝色', value: '#0000FF' },
-        { label: '黄色', value: '#FFFF00' },
-        { label: '红色', value: '#FF0000' }
-      ]
+        { value: '#000000', label: '黑色' },
+        { value: '#FFFFFF', label: '白色', color: '#999' },
+        { value: '#0000FF', label: '蓝色' },
+        { value: '#FFFF00', label: '黄色' },
+        { value: '#FF0000', label: '红色' }
+      ],
+      manufactureOptions: [
+        { value: 0, label: '凯视达' },
+        { value: 1, label: '诺瓦' }
+      ],
+      config: null,
+      cpoint: null,
+      points: null
     }
   },
   computed: {
     hasMore () {
-      return this.config.inputCards.length > 1
+      return this.cpoint?.inputCards.length > 1
+    },
+    hasMorePoint () {
+      return this.points?.length > 1
     }
   },
   methods: {
+    transfromToRGB ({ r, g, b }) {
+      return `#${r.toString(16).toUpperCase().padStart(2, '0')}${g.toString(16).toUpperCase().padStart(2, '0')}${b.toString(16).toUpperCase().padStart(2, '0')}`
+    },
+    transformToObjectRGB (color) {
+      return { r: parseInt(color.slice(1, 3), 16), g: parseInt(color.slice(3, 5), 16), b: parseInt(color.slice(5, 7), 16) }
+    },
     show ({ id }) {
       const loading = this.$showLoading()
       this.$deviceId = id
+      this.config = null
+      this.cpoint = null
+      this.points = null
       getContentProtection(id).then(({ data }) => {
         if (data) {
-          const { protect, inputCards, x, y, colors } = data
-          this.config = { protect, inputCards, x, y }
-          this.color = `#${colors[0].r.toString(16).toUpperCase().padStart(2, '0')}${colors[0].g.toString(16).toUpperCase().padStart(2, '0')}${colors[0].b.toString(16).toUpperCase().padStart(2, '0')}`
-        } else {
+          const { protect, inputCards, colors, receiverCardManufacture } = data
+          this.config = {
+            protect,
+            receiverCardManufacture
+          }
+          if (receiverCardManufacture === 0) {
+            this.cpoint = {
+              inputCards,
+              x: colors[0].x,
+              y: colors[0].y,
+              color: this.transfromToRGB(colors[0])
+            }
+          } else if (receiverCardManufacture === 1) {
+            this.points = colors.map(point => {
+              return {
+                x: point.x,
+                y: point.y,
+                color: this.transfromToRGB(point)
+              }
+            })
+          }
+        }
+        if (!this.config) {
           this.config = {
             protect: false,
+            receiverCardManufacture: this.manufactureOptions[0].value
+          }
+        }
+        if (!this.cpoint) {
+          this.cpoint = {
+            inputCards: [{ cardId: 0, srcId: 0 }],
             x: 1,
             y: 1,
-            inputCards: [{ cardId: 0, srcId: 0 }]
+            color: this.colorOptions[0].value
           }
-          this.color = '#000000'
+        }
+        if (!this.points) {
+          this.points = [{ x: 1, y: 1, color: this.colorOptions[0].value }]
         }
         this.$refs.configDialog.show()
       }).finally(() => {
@@ -148,36 +266,71 @@ export default {
       })
     },
     onSave (done) {
-      const { protect, inputCards, x, y } = this.config
-      const map = {}
-      const cards = []
-      for (let i = 0; i < inputCards.length; i++) {
-        const { cardId, srcId } = inputCards[i]
-        const key = `${cardId}-${srcId}`
-        if (map[key]) {
-          this.$message({
-            type: 'warning',
-            message: `配置${i + 1}与配置${map[key]}相同`
-          })
-          return
+      const { receiverCardManufacture } = this.config
+      const data = {}
+      if (receiverCardManufacture === 0) {
+        const { inputCards, x, y, color } = this.cpoint
+        const map = {}
+        const cards = []
+        for (let i = 0; i < inputCards.length; i++) {
+          const { cardId, srcId } = inputCards[i]
+          const key = `${cardId}-${srcId}`
+          if (map[key]) {
+            this.$message({
+              type: 'warning',
+              message: `配置${i + 1}与配置${map[key]}相同`
+            })
+            return
+          }
+          map[key] = i + 1
+          cards.push({ cardId, srcId })
         }
-        map[key] = i + 1
-        cards.push({ cardId, srcId })
+        data.inputCards = cards
+        const rgbColor = this.transformToObjectRGB(color)
+        data.colors = [
+          { x, y, ...rgbColor },
+          { x: x + 1, y, ...rgbColor },
+          { x: x + 2, y, ...rgbColor },
+          { x: x + 3, y, ...rgbColor },
+          { x: x + 4, y, ...rgbColor },
+          { x: x + 5, y, ...rgbColor }
+        ]
+      } else {
+        const colors = []
+        const map = {}
+        for (let i = 0; i < this.points.length; i++) {
+          const { x, y, color } = this.points[i]
+          const key = `${x}-${y}`
+          if (map[key]) {
+            this.$message({
+              type: 'warning',
+              message: `检测点${i + 1}与检测${map[key]}位置重复`
+            })
+            return
+          }
+          map[key] = i + 1
+          colors.push({ x, y, ...this.transformToObjectRGB(color) })
+        }
+        data.inputCards = []
+        data.colors = colors
       }
-      const color = { r: parseInt(this.color.slice(1, 3)), g: parseInt(this.color.slice(3, 5)), b: parseInt(this.color.slice(1, 3)) }
+
       updateContentProtection(this.$deviceId, {
-        protect,
-        inputCards: cards,
-        x,
-        y,
-        color
+        ...this.config,
+        ...data
       }).then(done)
     },
     onAdd () {
-      this.config.inputCards.push({ cardId: 0, srcId: 0 })
+      this.cpoint.inputCards.push({ cardId: 0, srcId: 0 })
     },
     onDel (index) {
-      this.config.inputCards.splice(index, 1)
+      this.cpoint.inputCards.splice(index, 1)
+    },
+    onAddPoint () {
+      this.points.push({ x: 1, y: 1, color: this.colorOptions[0].value })
+    },
+    onDelPoint (index) {
+      this.points.splice(index, 1)
     }
   }
 }