feat(broadcast): support textColor and textBackgroundColor

src/api/user.js

@@ -22,7 +22,7 @@ export function getWechatQr (id) {
 
 export function getAppletQr (data) {
   return request({
-    url: `wxapplet/qrcode`,
+    url: 'wxapplet/qrcode',
     method: 'GET',
     params: data
   })
@@ -61,7 +61,7 @@ export function updateUser (data, message) {
 
 export function toggleUser (userId, enabled) {
   return messageSend({
-    url: `/admin/users/enabled`,
+    url: '/admin/users/enabled',
     method: 'PUT',
     data: addTenantKey({
       userId,

src/scss/bem/_utility.scss

@@ -224,3 +224,7 @@
     line-height: 1.6;
   }
 }
+
+.u-hidden {
+  display: none;
+}

src/views/ad/applet/api.js

@@ -19,7 +19,7 @@ export function getAssets (query, options) {
 
 export function resolveAsset ({ keyName }) {
   return resolve({
-    url: `/ad/tenant/asset/resolve`,
+    url: '/ad/tenant/asset/resolve',
     method: 'POST',
     data: { keyNames: [keyName] }
   })
@@ -27,7 +27,7 @@ export function resolveAsset ({ keyName }) {
 
 export function rejectAsset ({ keyName }, reason) {
   return messageSend({
-    url: `/ad/tenant/asset/reject`,
+    url: '/ad/tenant/asset/reject',
     method: 'POST',
     data: {
       keyName,
@@ -62,7 +62,7 @@ export function getOrdersByUser (query) {
 
 export function resolveOrder ({ id }) {
   return resolve({
-    url: `/ad/tenant/order/resolve`,
+    url: '/ad/tenant/order/resolve',
     method: 'POST',
     data: { orderId: id }
   })
@@ -70,7 +70,7 @@ export function resolveOrder ({ id }) {
 
 export function rejectOrder ({ id }, reason) {
   return messageSend({
-    url: `/ad/tenant/order/reject`,
+    url: '/ad/tenant/order/reject',
     method: 'POST',
     data: {
       orderId: id,

src/views/ad/applet/history/index.vue

@@ -20,6 +20,7 @@
 </template>
 
 <script>
+import { SCREEN_TIME_KEY } from '@/constant'
 import { transformOrderAssetToAsset } from '@/utils'
 import { getOrders } from '../api'
 
@@ -90,7 +91,7 @@ export default {
         deviceName: name,
         statusTag: this.getOrderTag(status, expand),
         startDate,
-        range: `${startTime}-${endTime}`,
+        range: startTime === SCREEN_TIME_KEY && endTime === SCREEN_TIME_KEY ? '开机期间' : `${startTime}-${endTime}`,
         freq: `${day}天 x ${duration}秒 x ${count}次`,
         price: (price / 100).toFixed(2),
         phoneNumber,

src/views/ad/applet/review-order/index.vue

@@ -51,7 +51,10 @@
 </template>
 
 <script>
-import { State } from '@/constant'
+import {
+  State,
+  SCREEN_TIME_KEY
+} from '@/constant'
 import { transformOrderAssetToAsset } from '@/utils'
 import {
   getOrders,
@@ -126,7 +129,7 @@ export default {
         id,
         deviceName: name,
         startDate,
-        range: `${startTime}-${endTime}`,
+        range: startTime === SCREEN_TIME_KEY && endTime === SCREEN_TIME_KEY ? '开机期间' : `${startTime}-${endTime}`,
         price: (price / 100).toFixed(2),
         freq: `${day}天 x ${duration}秒 x ${count}次`,
         phoneNumber,

src/views/broadcast/api.js

@@ -7,7 +7,7 @@ import {
 
 export function addBroadcastTemplate (data) {
   return request({
-    url: `/orchestration/broadcastTemplate`,
+    url: '/orchestration/broadcastTemplate',
     method: 'POST',
     data
   })
@@ -15,7 +15,7 @@ export function addBroadcastTemplate (data) {
 
 export function updateBroadcastTemplate (data) {
   return request({
-    url: `/orchestration/broadcastTemplate`,
+    url: '/orchestration/broadcastTemplate',
     method: 'PUT',
     data
   })
@@ -38,7 +38,7 @@ export function getBroadcastTemplate (id) {
 export function getBroadcastTemplates (query) {
   const { pageNum: pageIndex, pageSize, ...params } = query
   return request({
-    url: `/orchestration/broadcastTemplate/pageQuery`,
+    url: '/orchestration/broadcastTemplate/pageQuery',
     method: 'GET',
     params: {
       pageIndex, pageSize,
@@ -49,7 +49,7 @@ export function getBroadcastTemplates (query) {
 
 export function publishBroadcast (data) {
   return messageSend({
-    url: `/orchestration/broadcast`,
+    url: '/orchestration/broadcast',
     method: 'POST',
     data: addTenant(data)
   }, '发布', tenantRequest)
@@ -58,7 +58,7 @@ export function publishBroadcast (data) {
 export function getBroadcasts (query) {
   const { pageNum: pageIndex, pageSize, ...params } = query
   return tenantRequest({
-    url: `/orchestration/broadcast/pageQuery`,
+    url: '/orchestration/broadcast/pageQuery',
     method: 'GET',
     params: addTenant({
       pageIndex, pageSize,
@@ -76,7 +76,7 @@ export function disableBroadcast (id) {
 
 export function disableDeviceRelease (data) {
   return confirmAndSend('下架', '', {
-    url: `/orchestration/broadcast/deviceRelease/disable`,
+    url: '/orchestration/broadcast/deviceRelease/disable',
     method: 'PUT',
     data
   })

src/views/broadcast/deploy/index.vue

@@ -47,7 +47,7 @@
         <span class="c-grid-form__label u-required">位置</span>
         <el-select
           v-model="position"
-          class="u-width--xs"
+          class="u-width--sm"
         >
           <el-option
             v-for="option in positionOptions"
@@ -56,6 +56,31 @@
             :value="option.value"
           />
         </el-select>
+        <span class="c-grid-form__label u-required">字体颜色</span>
+        <el-select
+          v-model="textColor"
+          class="u-width--sm"
+        >
+          <el-option
+            v-for="option in textColorOptions"
+            :key="option.value"
+            :label="option.label"
+            :value="option.value"
+            :style="{ color: option.color || option.value }"
+          />
+        </el-select>
+        <span class="c-grid-form__label u-required">背景颜色</span>
+        <el-select
+          v-model="textBackgroundColor"
+          class="u-width--sm"
+        >
+          <el-option
+            v-for="option in textBackgroundColorOptions"
+            :key="option.value"
+            :label="option.label"
+            :value="option.value"
+          />
+        </el-select>
         <span class="c-grid-form__label">失效时间</span>
         <el-date-picker
           v-model="endDateTime"
@@ -105,6 +130,16 @@
         <div class="l-flex--row c-grid-form__option c-grid-form__text">{{ selectedDeviceName }}</div>
         <span class="c-grid-form__label">失效时间：</span>
         <div class="l-flex--row c-grid-form__option c-grid-form__text">{{ endDateTime || '不限定' }}</div>
+        <div class="c-grid-form__row c-preview-broadcast u-relative is-ratio--16_9">
+          <marquee
+            class="c-preview-broadcast__text"
+            :class="{ bottom: position === 1 }"
+            :style="{ color: textColor, 'background-color': backgroundColor }"
+            behavior="scroll"
+          >
+            {{ targetContent }}
+          </marquee>
+        </div>
       </div>
     </div>
   </wrapper>
@@ -139,7 +174,21 @@ export default {
       targetContent: '',
       endDateTime: '',
       keywordMap: [],
-      selectedDevices: []
+      selectedDevices: [],
+      textColor: '#FFFFFF',
+      textColorOptions: [
+        { label: '白色', value: '#FFFFFF', color: '#999' },
+        { label: '黑色', value: '#000000' },
+        { label: '蓝色', value: '#0000FF' },
+        { label: '黄色', value: '#FFFF00' },
+        { label: '红色', value: '#FF0000' }
+      ],
+      textBackgroundColor: '#C0000000',
+      textBackgroundColorOptions: [
+        { label: '黑色（75%）', value: '#C0000000' },
+        { label: '半透黑（50%）', value: '#7F000000' },
+        { label: '透明黑（25%）', value: '#40000000' }
+      ]
     }
   },
   computed: {
@@ -170,6 +219,14 @@ export default {
     },
     selectedDeviceName () {
       return this.selectedDevices.map(device => device.name).join(', ')
+    },
+    backgroundColor () {
+      const argb = /^#(.{2})(.{2})(.{2})(.{2})$/i.exec(this.textBackgroundColor)
+      if (argb) {
+        const alpha = parseInt(argb[1], 16)
+        return `rgba(${parseInt(argb[2], 16)}, ${parseInt(argb[3], 16)}, ${parseInt(argb[4], 16)}, ${alpha === 0 ? 0 : alpha === 255 ? 1 : Math.round(alpha / 255 * 100) / 100})`
+      }
+      return this.textBackgroundColor
     }
   },
   methods: {
@@ -267,10 +324,31 @@ export default {
           keywordMap,
           startTime: parseTime(Date.now(), '{y}-{m}-{d} {h}:{i}:{s}'),
           endTime: this.endDateTime,
-          deviceIds: this.selectedDevices.map(device => device.id)
+          deviceIds: this.selectedDevices.map(device => device.id),
+          textColor: this.textColor,
+          textBackgroundColor: this.textBackgroundColor
         })
       })
     }
   }
 }
 </script>
+
+<style lang="scss" scoped>
+.c-preview-broadcast {
+  background: url("~@/assets/program_bg.png") center center / 100% 100%
+    no-repeat;
+
+  &__text {
+    position: absolute;
+    top: $spacing--xs;
+    width: 100%;
+    padding: $padding--sm 0;
+
+    &.bottom {
+      top: auto;
+      bottom: $spacing--xs;
+    }
+  }
+}
+</style>

src/views/broadcast/history/index.vue

@@ -44,10 +44,10 @@ export default {
         ],
         cols: [
           { prop: 'name', label: '模板' },
-          { label: '位置', 'min-width': 60, render: ({ position }) => ['顶部', '底部'][position] },
+          { label: '位置', render: ({ position }) => ['顶部', '底部'][position], width: 100, align: 'center' },
           { prop: 'content', label: '内容', 'min-width': 120 },
-          { prop: 'startTime', label: '发布时间' },
-          { prop: 'endTime', label: '失效时间', render: ({ endTime }) => endTime || '-' },
+          { prop: 'startTime', label: '发布时间', width: 160 },
+          { prop: 'endTime', label: '失效时间', render: ({ endTime }) => endTime || '-', width: 160 },
           { type: 'tag', render: ({ releaseStatus }) => {
             return {
               type: ['warning', 'success'][releaseStatus],

src/views/external/mesh/index.vue

@@ -270,6 +270,7 @@ const ThirdPartyDeviceOption = {
       ThirdPartyDevice.SCREEN
     ],
     [ThirdPartyDevice.BOX]: [
+      ThirdPartyDevice.SCREEN,
       ThirdPartyDevice.SENDING_CARD,
       ThirdPartyDevice.PLC,
       ThirdPartyDevice.MULTI_FUNCTION_CARD,

src/views/realm/settings/api.js

@@ -39,11 +39,13 @@ export function updateInformStrategy (strategy) {
   })
 }
 
+const AUTORESTART = 'autorestart'
+
 export function getAutoRestartTime () {
   return send({
     url: '/tenant/attribute/query',
     method: 'GET',
-    params: addTenant({ attributeKey: 'autorestart' })
+    params: addTenant({ attributeKey: AUTORESTART })
   })
 }
 
@@ -52,7 +54,7 @@ export function updateAutoRestartTime (time) {
     url: '/tenant/attribute/save',
     method: 'POST',
     data: addTenant({
-      attributeKey: 'autorestart',
+      attributeKey: AUTORESTART,
       attributeValue: time
     })
   })