feat(deploy): self-adaption

src/components/dialog/EventTargetDialog/index.vue

@@ -8,7 +8,7 @@
     <template #default>
       <event-target-picker
         ref="eventTargetPicker"
-        class="l-flex__auto"
+        class="l-flex__fill"
         :ratio="ratio"
       />
     </template>
@@ -47,6 +47,7 @@ export default {
       if (value) {
         this.$emit('confirm', {
           value,
+          snapshot: this.$refs.eventTargetPicker.getSnapshot(),
           done
         })
       }

src/components/service/EventPicker/index.vue

@@ -105,6 +105,7 @@
       :event-target="eventTarget"
       class="l-flex__fill c-step__column"
       :simple="simple"
+      v-bind="$attrs"
     />
   </div>
 </template>
@@ -334,6 +335,9 @@ export default {
         ...this.createEvent(),
         target
       }
+    },
+    getEventTargetPicker () {
+      return this.$refs.eventTargetPicker
     }
   }
 }

src/components/service/EventTargetPicker/index.vue

@@ -83,6 +83,7 @@ import {
   AssetType
 } from '@/constant'
 import { getAssetDuration } from '@/utils'
+import { getRatios } from '@/api/device'
 import { getSchedules } from '@/api/calendar'
 import { getPrograms } from '@/api/program'
 import { assetTableMixin } from '@/mixins/asset-table'
@@ -144,8 +145,9 @@ export default {
 
       return {
         list: this.getListInvoke,
-        condition: { name: '' },
+        condition: { resolutionRatio: this.ratio, name: '' },
         filters: [
+          { key: 'resolutionRatio', type: 'select', placeholder: '分辨率', remote: getRatios },
           { key: 'name', type: 'search', placeholder: '名称' }
         ],
         cols: [
@@ -211,20 +213,18 @@ export default {
       this.currentTarget.detail = null
       this.currentTarget.assets = []
     },
-    getListInvoke ({ pageSize, pageNum, name }) {
+    getListInvoke (params) {
       switch (this.currentTarget.type) {
         case EventTarget.RECUR:
           return getSchedules({
-            pageSize, pageNum, name,
             type: ScheduleType.RECUR,
-            resolutionRatio: this.ratio,
-            status: State.AVAILABLE
+            status: State.AVAILABLE,
+            ...params
           })
         default:
           return getPrograms({
-            pageSize, pageNum, name,
-            resolutionRatio: this.ratio,
-            status: State.AVAILABLE
+            status: State.AVAILABLE,
+            ...params
           })
       }
     },
@@ -300,8 +300,15 @@ export default {
             })
           }
     },
+    getSnapshot () {
+      return this.currentTarget
+    },
     getValue () {
-      return this.createEventTarget()
+      const eventTarget = this.createEventTarget()
+      if (eventTarget && !this.isAssets && this.ratio && this.ratio !== this.currentTarget.detail.resolutionRatio) {
+        eventTarget.adaptive = 1
+      }
+      return eventTarget
     }
   }
 }

src/views/device/index.vue

@@ -11,12 +11,26 @@
       :schema="schema"
       @row-click="onRowClick"
     />
-    <event-target-dialog
+    <!-- <event-target-dialog
       ref="eventTargetDialog"
       title="默认播放配置"
       :ratio="ratio"
       @confirm="onConfirm"
-    />
+    /> -->
+    <confirm-dialog
+      ref="eventTargetDialog"
+      size="lg fixed"
+      title="默认播放配置"
+      @confirm="onConfirm"
+    >
+      <template #default>
+        <event-target-picker
+          ref="eventTargetPicker"
+          class="l-flex__fill"
+          :ratio="ratio"
+        />
+      </template>
+    </confirm-dialog>
     <dataset-config-dialog ref="datasetConfigDialog" />
   </wrapper>
 </template>
@@ -180,13 +194,22 @@ export default {
       }
       this.$refs.eventTargetDialog.show()
     },
-    onConfirm ({ value, done }) {
+    onConfirm (done) {
+      const eventTarget = this.$refs.eventTargetPicker.getValue()
+      if (!eventTarget) {
+        return
+      }
+      const { detail } = this.$refs.eventTargetPicker.getSnapshot()
       this.$confirm(
-        '设置后需审核生效，操作完成后请通知相关人员进行审核',
+        `${eventTarget.adaptive ? '<p class="u-color--error">上播内容与设备分辨率不一致，可能无法完全适配</p>' : ''}设置后需审核生效，操作完成后请通知相关人员进行审核`,
         '默认播放设置',
-        { type: 'warning' }
+        {
+          dangerouslyUseHTMLString: true,
+          type: 'warning',
+          confirmButtonText: '设置'
+        }
       ).then(() => publish(
-        value.type === EventTarget.ASSETS
+        eventTarget.type === EventTarget.ASSETS
           ? PublishType.ASSET_TO_DEVICE
           : PublishType.PROGRAM_TO_DEVICE,
         [this.$device.id],
@@ -196,12 +219,12 @@ export default {
             priority: EventPriority.SHIM,
             freq: EventFreq.ONCE,
             start: `${toDateStr(new Date())} 00:00:00`,
-            target: value
+            target: eventTarget
           }
         },
         {
-          programCalendarName: value.name,
-          resolutionRatio: this.ratio
+          programCalendarName: detail?.name,
+          resolutionRatio: detail?.resolutionRatio
         }
       )).then(done)
     },

src/views/screen/deploy/device/index.vue

@@ -92,6 +92,7 @@
           ref="picker"
           class="l-flex__fill c-step__column c-sibling-item--v"
           :priority="priority"
+          :ratio="ratio"
         >
           <div class="c-sibling-item--v">
             <div class="c-sibling-item--v u-font-size--sm u-bold">上播类型</div>
@@ -264,7 +265,7 @@ export default {
       if (devices.some(device => device.resolutionRatio !== ratio)) {
         this.ratio = ''
         this.$confirm(
-          '发布的内容可能无法完全适配，继续下一步？',
+          '上播内容可能无法完全适配，继续下一步？',
           '选择的设备分辨率不一致',
           { type: 'warning' }
         ).then(() => {
@@ -289,39 +290,52 @@ export default {
     },
     getPublishTarget () {
       if (this.eventOptions.type === PublishTargetType.CALENDAR) {
+        const { id, name, resolutionRatio } = this.eventOptions.target
         return Promise.resolve({
-          type: PublishTargetType.CALENDAR,
-          detail: this.eventOptions.target.id
+          publishType: PublishType.PROGRAM_TO_DEVICE,
+          publishTarget: {
+            type: PublishTargetType.CALENDAR,
+            detail: id
+          },
+          name,
+          resolutionRatio
         })
       }
       const event = this.$refs.picker.getValue()
       if (event) {
+        const { detail } = this.$refs.picker.getEventTargetPicker().getSnapshot()
         return Promise.resolve({
-          type: PublishTargetType.EVENT,
-          detail: event
+          publishType: event.target.type === EventTarget.ASSETS
+            ? PublishType.ASSET_TO_DEVICE
+            : PublishType.PROGRAM_TO_DEVICE,
+          publishTarget: {
+            type: PublishTargetType.EVENT,
+            detail: event
+          },
+          name: detail?.name,
+          resolutionRatio: detail?.resolutionRatio
         })
       }
       return Promise.reject()
     },
     publish () {
       return this.getPublishTarget().then(
-        publishTarget => this.$confirm(
-          '发布需审核生效，操作完成后请通知相关人员进行审核',
+        ({ publishType, publishTarget, name, resolutionRatio }) => this.$confirm(
+          `${resolutionRatio && (!this.radio || resolutionRatio !== this.radio) ? '<p class="u-color--error">上播内容与设备分辨率不一致，可能无法完全适配</p>' : ''}发布后需审核生效，操作完成后请通知相关人员进行审核`,
           '发布确认',
           {
+            dangerouslyUseHTMLString: true,
             type: 'warning',
             confirmButtonText: '发布'
           }
         ).then(
           () => publish(
-            publishTarget.type === PublishTargetType.EVENT && publishTarget.detail.target.type === EventTarget.ASSETS
-              ? PublishType.ASSET_TO_DEVICE
-              : PublishType.PROGRAM_TO_DEVICE,
+            publishType,
             this.selectedDevices.map(device => device.id),
             publishTarget,
             {
-              programCalendarName: this.eventOptions.target?.name,
-              resolutionRatio: this.ratio
+              programCalendarName: name,
+              resolutionRatio
             }
           )
         )