大屏样式完成

components/AiDvRender.vue

@@ -4,6 +4,7 @@
     <ai-dv-panel
         style="height: 100%; width: 100%;"
         v-if="currentType !== 'display'"
+        :padding="data.padding"
         :title="data.title"
         :theme="theme"
         :border="data.border || ''">
@@ -56,6 +57,7 @@
       </ai-map>
       <ai-monitor :src="data.src" v-else-if="currentType === 'monitor'" :type="data.monitorType"/>
       <ai-monitor-carousel :list="data.list" v-else-if="currentType === 'monitorCarousel'"/>
+      <img v-else-if="currentType=='img'" :src="data.src" alt="" style="width: 100%; height: 100%; object-fit: fill;"/>
       <video style="width: 100%; height: 100%; object-fit: fill;" loop :src="data.src" autoplay
              v-else-if="currentType === 'video'"/>
       <AiDvPartyOrg style="width: 100%; height: 100%;" v-else-if="currentType === 'partyOrg'" :instance="instance"/>

components/layout/AiDvPanel/AiDvPanel.vue

@@ -4,9 +4,13 @@
       <template v-if="$slots.title" #title>
         <slot name="title"/>
       </template>
-      <slot/>
+      <div :style="{padding}">
+        <slot/>
+      </div>
     </component>
-    <slot style="width: 100%; height: 100%;" v-else></slot>
+    <div v-else :style="{padding}">
+      <slot style="width: 100%; height: 100%;"/>
+    </div>
   </section>
 </template>
 
@@ -54,7 +58,8 @@ export default {
     theme: {
       type: String,
       default: '0'
-    }
+    },
+    padding: {default: 0}
   },
   mounted() {
   },

components/layout/AiDvPanel/borders/border15.vue

@@ -24,6 +24,7 @@ export default {
     padding: 0 10px;
     background-image: linear-gradient(270deg, rgba(31, 67, 102, 0), rgba(31, 78, 102, 0.4));
     margin-bottom: 12px;
+    color: white;
   }
 
   .slot {

packages/bigscreen/designer/components/componentConfig.vue

@@ -17,6 +17,9 @@
             <el-input-number size="mini" :min="0" v-model="config.top" controls-position="right"/>
           </div>
         </div>
+        <config-item label="內边距">
+          <el-input size="mini" v-model="config.padding" clearable placeholder="请输入符合css的padding合法值"/>
+        </config-item>
       </div>
     </div>
     <div class="layout-right__content--wrapper">
@@ -53,6 +56,9 @@
             <el-input v-model="config.src" size="mini"></el-input>
           </div>
         </div>
+        <config-item label="图片URL" v-if="config.type=='img'">
+          <el-input v-model="config.src" size="mini" clearable placeholder="请输入图片URL"/>
+        </config-item>
         <div class="layout-config__item" v-if="config.type === 'monitor'">
           <label>视频类型</label>
           <div class="layout-config__item--right">
@@ -231,6 +237,7 @@
 import ConfigItem from "./configItem.vue";
 import AiDialogBtn from "dui/packages/layout/AiDialogBtn.vue";
 import {monitorTypes} from "../config";
+
 export default {
   name: 'componentConfig',
   components: {AiDialogBtn, ConfigItem},
@@ -242,7 +249,7 @@ export default {
   data() {
     return {
       borderList: ['border0', 'border1', 'border2', 'border3', 'border4', 'border5', 'border6', 'border7', 'border8', 'border9', 'border10',
-        'border11', 'border12', 'border13','border14','border15'],//边框待选项
+        'border11', 'border12', 'border13', 'border14', 'border15'],//边框待选项
       summaryList: ['summary0', 'summary1', 'summary2', 'summary3', 'summary4', 'summary6', 'summary5',
         'summary7', 'summary8', 'summary9', 'summary10', 'summary11', 'summary12', 'summary13', 'summary14',
         'summary15', 'summary16', 'summary17', 'summary18', 'summary19'],//汇总待选项

packages/bigscreen/designer/components/configItem.vue

@@ -78,7 +78,7 @@ export default {
     align-items: center;
     justify-content: flex-end;
     text-align: right;
-    margin-left: 30px;
+    margin-left: 27px;
 
     input, textarea {
       background: #262C33;

packages/bigscreen/designer/config.js

@@ -513,209 +513,240 @@ const components = [{
 },
   {
     label: "AI", list: [
-      {label: "AI助手", list: [{type: "aiAssist", label: "AI助手", width: 134, height: 140, zIndex: 1, title: "AI助手", thumb: "https://cdn.cunwuyun.cn/dvcp/dv/aiIcon.png"}]}
+      {
+        label: "AI助手",
+        list: [{
+          type: "aiAssist",
+          label: "AI助手",
+          width: 134,
+          height: 140,
+          zIndex: 1,
+          title: "AI助手",
+          thumb: "https://cdn.cunwuyun.cn/dvcp/dv/aiIcon.png"
+        }]
+      }
     ]
   },
   {
-    label: '其他', list: [{
+    label: '其他', list: [
-      label: '地图', type: 'map', list: [{
+      {
-        type: 'map',
+        label: "图片", list: [
-        label: '地图',
+          {
-        display: 'map',
+            label: "普通图片",
-        width: 840,
+            type: "img",
-        height: 534,
+            width: 500,
-        left: 0,
+            height: 400,
-        top: 0,
+            thumb: "https://cdn.cunwuyun.cn/dvcp/dv/img/display0-bg.png"
-        mask: '2',
+          }
-        pulseLines: '1',
+        ]
-        mapStyle: "e51987628aee5206d4c9ca8c6e98b4f7",
+      },
-        areaId: '',
+      {
-        zIndex: 1,
+        label: '地图', type: 'map', list: [{
-        apiData: [],
+          type: 'map',
-        dataType: 'staticData',
+          label: '地图',
-        dynamicData: [],
+          display: 'map',
-        staticData: [{
+          width: 840,
-          label: '中卫慧通', lng: 117.1339399, lat: 36.7190487,
+          height: 534,
-        }],
+          left: 0,
-        api: '',
+          top: 0,
-        thumb: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/map.png',
+          mask: '2',
-        is3dAround: '0',
+          pulseLines: '1',
-        limitArea: '0',
+          mapStyle: "e51987628aee5206d4c9ca8c6e98b4f7",
-        layers: 'vector'
+          areaId: '',
-      }, {
+          zIndex: 1,
-        type: 'AiDvMap',
+          apiData: [],
-        label: '地图',
+          dataType: 'staticData',
-        display: 'map',
+          dynamicData: [],
-        width: 840,
+          staticData: [{
-        height: 534,
+            label: '中卫慧通', lng: 117.1339399, lat: 36.7190487,
-        left: 0,
+          }],
-        top: 0,
+          api: '',
-        mask: '2',
+          thumb: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/map.png',
-        pulseLines: '1',
+          is3dAround: '0',
-        mapStyle: "e51987628aee5206d4c9ca8c6e98b4f7",
+          limitArea: '0',
-        areaId: '',
+          layers: 'vector'
-        zIndex: 1,
-        apiData: [],
-        dataType: 'staticData',
-        dynamicData: [],
-        staticData: [{
-          label: '中卫慧通', lng: 117.1339399, lat: 36.7190487,
-        }],
-        api: '',
-        thumb: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/map.png',
-        is3dAround: '0',
-        limitArea: '0',
-      }]
-    }, {
-      label: '党组织', type: 'partyOrg', list: [{
-        type: 'partyOrg',
-        label: '党组织',
-        width: 840,
-        height: 800,
-        zIndex: 1,
-        top: 0,
-        left: 0,
-        dataX: '',
-        dataY: [],
-        title: '党组织',
-        border: 'border3',
-        sourceDataId: '',
-        dataType: 'staticData',
-        staticData: [{
-          key: '个人服务办理', value: 247
         }, {
-          key: '同比上月', value: 247
+          type: 'AiDvMap',
-        }],
+          label: '地图',
-        dynamicData: [],
+          display: 'map',
-        thumb: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/total.png'
+          width: 840,
-      }]
+          height: 534,
-    }, {
+          left: 0,
-      label: '边框', type: 'panel', list: [{
+          top: 0,
-        type: 'panel',
+          mask: '2',
-        label: '边框',
+          pulseLines: '1',
-        title: '边框',
+          mapStyle: "e51987628aee5206d4c9ca8c6e98b4f7",
-        border: 'border0',
+          areaId: '',
-        width: 400,
+          zIndex: 1,
-        height: 400,
+          apiData: [],
-        isZoom: false,
+          dataType: 'staticData',
-        zIndex: 1,
+          dynamicData: [],
-        thumb: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/border.png'
+          staticData: [{
-      }]
+            label: '中卫慧通', lng: 117.1339399, lat: 36.7190487,
-    }, {
+          }],
-      label: '装饰', type: 'display', list: [{
+          api: '',
-        type: 'display',
+          thumb: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/map.png',
-        label: '装饰',
+          is3dAround: '0',
-        display: 'display0',
+          limitArea: '0',
-        width: 840,
-        height: 540,
-        isZoom: false,
-        zIndex: 1,
-        title: '标题',
-        thumb: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/display.png',
-        sourceDataId: '',
-        dataType: 'staticData',
-        staticData: [{
-          label: '个人服务办理', value: 247
-        }, {
-          label: '同比上月', value: 247
         }]
-      }]
-    }, {
-      label: '轮播图', list: [{
-        type: 'swiper',
-        label: '轮播图',
-        width: 400,
-        height: 300,
-        zIndex: 1,
-        border: 'border2',
-        dataType: 'staticData',
-        staticData: [{
-          img: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/pie.png', title: '湖羊', content: `歙县众城湖羊养殖专业合作社
-							徐晓红 - 18273645627
-							歙县郑村镇唐跃村碉墅`
-        }],
-        thumb: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/swiper.png'
       }, {
-        type: 'swiper',
+        label: '党组织', type: 'partyOrg', list: [{
-        label: '轮播图(点指示器)',
+          type: 'partyOrg',
-        width: 800,
+          label: '党组织',
-        height: 358,
+          width: 840,
-        zIndex: 1,
+          height: 800,
-        border: 'border14',
+          zIndex: 1,
-        dataType: 'staticData',
+          top: 0,
-        staticData: [{
+          left: 0,
-          content: `歙县众城湖羊养殖专业合作社
+          dataX: '',
+          dataY: [],
+          title: '党组织',
+          border: 'border3',
+          sourceDataId: '',
+          dataType: 'staticData',
+          staticData: [{
+            key: '个人服务办理', value: 247
+          }, {
+            key: '同比上月', value: 247
+          }],
+          dynamicData: [],
+          thumb: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/total.png'
+        }]
+      }, {
+        label: '边框', type: 'panel', list: [{
+          type: 'panel',
+          label: '边框',
+          title: '边框',
+          border: 'border0',
+          width: 400,
+          height: 400,
+          isZoom: false,
+          zIndex: 1,
+          thumb: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/border.png'
+        }]
+      }, {
+        label: '装饰', type: 'display', list: [{
+          type: 'display',
+          label: '装饰',
+          display: 'display0',
+          width: 840,
+          height: 540,
+          isZoom: false,
+          zIndex: 1,
+          title: '标题',
+          thumb: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/display.png',
+          sourceDataId: '',
+          dataType: 'staticData',
+          staticData: [{
+            label: '个人服务办理', value: 247
+          }, {
+            label: '同比上月', value: 247
+          }]
+        }]
+      }, {
+        label: '轮播图', list: [{
+          type: 'swiper',
+          label: '轮播图',
+          width: 400,
+          height: 300,
+          zIndex: 1,
+          border: 'border2',
+          dataType: 'staticData',
+          staticData: [{
+            img: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/pie.png', title: '湖羊', content: `歙县众城湖羊养殖专业合作社
 							徐晓红 - 18273645627
 							歙县郑村镇唐跃村碉墅`
+          }],
+          thumb: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/swiper.png'
         }, {
-          content: `歙县众城湖羊养殖专业合作社
+          type: 'swiper',
+          label: '轮播图(点指示器)',
+          width: 800,
+          height: 358,
+          zIndex: 1,
+          border: 'border14',
+          dataType: 'staticData',
+          staticData: [{
+            content: `歙县众城湖羊养殖专业合作社
 							徐晓红 - 18273645627
 							歙县郑村镇唐跃村碉墅`
-        },],
+          }, {
-        thumb: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/swiper.png',
+            content: `歙县众城湖羊养殖专业合作社
-        dotIndicator: true
+							徐晓红 - 18273645627
-      }]
+							歙县郑村镇唐跃村碉墅`
-    }, {
+          },],
-      label: '视频播放器', type: 'video', list: [{
+          thumb: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/swiper.png',
-        type: 'video',
+          dotIndicator: true
-        label: '视频播放器',
+        }]
-        width: 400,
+      }, {
-        height: 300,
+        label: '视频播放器', type: 'video', list: [{
-        zIndex: 1,
+          type: 'video',
-        src: '',
+          label: '视频播放器',
-        border: 'border2',
+          width: 400,
-        thumb: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/swiper.png'
+          height: 300,
-      }]
+          zIndex: 1,
-    }, {
-      label: '数据统计', type: 'summary', list: [{
-        type: 'summary',
-        label: '数据统计',
-        display: 'summary0',
-        width: 480,
-        height: 240,
-        zIndex: 1,
-        top: 0,
-        left: 0,
-        dataX: '',
-        dataY: [],
-        summaryTitle: '',
-        border: 'border3',
-        sourceDataId: '',
-        title: '数据统计',
-        dataType: 'staticData',
-        staticData: [{
-          key: '个人服务办理', value: 247
-        }, {
-          key: '同比上月', value: 247
-        }],
-        dynamicData: [],
-        thumb: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/total.png'
-      }]
-    }, {
-      label: '视频监控', list: [
-        {
-          type: 'monitor',
-          label: '视频监控',
           src: '',
+          border: 'border2',
+          thumb: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/swiper.png'
+        }]
+      }, {
+        label: '数据统计', type: 'summary', list: [{
+          type: 'summary',
+          label: '数据统计',
+          display: 'summary0',
           width: 480,
           height: 240,
           zIndex: 1,
           top: 0,
           left: 0,
-          title: '',
+          dataX: '',
-          moniterId: '',
+          dataY: [],
-          monitorType: 'cmcc',
+          summaryTitle: '',
-          api: '/app/appzyvideoequipment/list2',
+          border: 'border3',
-          border: 'border2',
           sourceDataId: '',
+          title: '数据统计',
           dataType: 'staticData',
-          staticData: '',
+          staticData: [{
-          dynamicData: '',
+            key: '个人服务办理', value: 247
-          thumb: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/video.png'
+          }, {
-        },
+            key: '同比上月', value: 247
-        {type: "monitorCarousel", label: "视频轮播", width: 480, height: 480, zIndex: 1, title: "视频轮播", thumb: "https://cdn.cunwuyun.cn/dvcp/dv/tpl/video.png"}
+          }],
-      ]
+          dynamicData: [],
-    }, customHtml]
+          thumb: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/total.png'
+        }]
+      }, {
+        label: '视频监控', list: [
+          {
+            type: 'monitor',
+            label: '视频监控',
+            src: '',
+            width: 480,
+            height: 240,
+            zIndex: 1,
+            top: 0,
+            left: 0,
+            title: '',
+            moniterId: '',
+            monitorType: 'cmcc',
+            api: '/app/appzyvideoequipment/list2',
+            border: 'border2',
+            sourceDataId: '',
+            dataType: 'staticData',
+            staticData: '',
+            dynamicData: '',
+            thumb: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/video.png'
+          },
+          {
+            type: "monitorCarousel",
+            label: "视频轮播",
+            width: 480,
+            height: 480,
+            zIndex: 1,
+            title: "视频轮播",
+            thumb: "https://cdn.cunwuyun.cn/dvcp/dv/tpl/video.png"
+          }
+        ]
+      }, customHtml]
   }]
 
 export {components}