feat(content-protection): support configuration

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

@@ -14,6 +14,37 @@
           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"
@@ -74,8 +105,18 @@ export default {
     return {
       config: {
         protect: false,
-        inputCards: []
-      }
+        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' }
+      ]
     }
   },
   computed: {
@@ -89,13 +130,17 @@ export default {
       this.$deviceId = id
       getContentProtection(id).then(({ data }) => {
         if (data) {
-          const { protect, inputCards } = data
-          this.config = { protect, inputCards }
+          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 {
           this.config = {
             protect: false,
+            x: 1,
+            y: 1,
             inputCards: [{ cardId: 0, srcId: 0 }]
           }
+          this.color = '#000000'
         }
         this.$refs.configDialog.show()
       }).finally(() => {
@@ -103,7 +148,7 @@ export default {
       })
     },
     onSave (done) {
-      const { protect, inputCards } = this.config
+      const { protect, inputCards, x, y } = this.config
       const map = {}
       const cards = []
       for (let i = 0; i < inputCards.length; i++) {
@@ -119,9 +164,13 @@ export default {
         map[key] = i + 1
         cards.push({ cardId, srcId })
       }
+      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
+        inputCards: cards,
+        x,
+        y,
+        color
       }).then(done)
     },
     onAdd () {

src/views/external/mesh/index.vue

@@ -280,8 +280,9 @@ const ThirdPartyDeviceOption = {
       ThirdPartyDevice.SCREEN
     ],
     [ThirdPartyDevice.BOX]: [
-      ThirdPartyDevice.SCREEN,
+      ThirdPartyDevice.RECEIVING_CARD,
       ThirdPartyDevice.SENDING_CARD,
+      ThirdPartyDevice.SCREEN,
       ThirdPartyDevice.PLC,
       ThirdPartyDevice.MULTI_FUNCTION_CARD,
       ...sensors
@@ -293,7 +294,8 @@ const ThirdPartyDeviceOption = {
   },
   ahead: {
     [ThirdPartyDevice.RECEIVING_CARD]: [
-      ThirdPartyDevice.SENDING_CARD
+      ThirdPartyDevice.SENDING_CARD,
+      ThirdPartyDevice.BOX
     ],
     [ThirdPartyDevice.SENDING_CARD]: [
       ThirdPartyDevice.BOX

src/views/realm/settings/components/TemperatureThresholdConfigDialog.vue

@@ -22,7 +22,7 @@
         step-strictly
       />
       <div />
-      <div class="u-color--error dark">二级预警，发送中级预警，开启风机；低于一级预警阈值后关闭风机</div>
+      <div class="u-color--error dark">二级预警，发送提示性预警，开启风机；低于一级预警阈值后关闭风机</div>
       <div class="c-grid-form__label">三级预警阈值</div>
       <el-input-number
         v-model="config.level3"
@@ -31,7 +31,7 @@
         step-strictly
       />
       <div />
-      <div class="u-color--error dark">三级预警，发送紧急预警</div>
+      <div class="u-color--error dark">三级预警，发送中级预警</div>
       <div class="c-grid-form__label">四级预警阈值</div>
       <el-input-number
         v-model="config.level4"