大屏组件

packages/bigscreen/designer/AppDesigner.vue

@@ -6,19 +6,13 @@
     <template slot="tabs">
       <el-tabs v-model="currIndex">
         <el-tab-pane v-for="(tab,i) in tabs" :key="i" :label="tab.label">
-          <component :urlPrefix="urlPrefix" :areaId="areaId" :ref="tab.name" v-if="currIndex == i" :is="tab.comp"
+          <component :urlPrefix="urlPrefix" :areaId="areaId" :ref="tab.name" v-if="currIndex == i" :is="tab.comp" @change="onChange" lazy :instance="instance" :dict="dict" :permissions="permissions" />
-                     @change="onChange" lazy
-                     :instance="instance" :dict="dict" :permissions="permissions"/>
         </el-tab-pane>
       </el-tabs>
     </template>
   </ai-list>
-  <Add v-else-if="componentName === 'Add'" :urlPrefix="urlPrefix" :areaId="areaId" :params="params" :instance="instance"
+  <Add v-else-if="componentName === 'Add'" :urlPrefix="urlPrefix" :areaId="areaId" :params="params" :instance="instance" :dict="dict" :permissions="permissions" @change="onChange"></Add>
-       :dict="dict"
+  <SourceData v-else-if="componentName === 'SourceData'" :urlPrefix="urlPrefix" :params="params" :instance="instance" :dict="dict" :permissions="permissions" @change="onChange"></SourceData>
-       :permissions="permissions" @change="onChange"></Add>
-  <SourceData v-else-if="componentName === 'SourceData'" :urlPrefix="urlPrefix" :params="params" :instance="instance"
-              :dict="dict"
-              :permissions="permissions" @change="onChange"></SourceData>
 </template>
 
 <script>
@@ -30,7 +24,7 @@ import Vue from "vue";
  
 Vue.use(dvui)
 export default {
-  name: 'AppDesigner',
+  name: 'AppDesigner' ,
   label: '大屏设计',
  
   components: {

packages/bigscreen/designer/components/Layout.vue

@@ -63,6 +63,7 @@
               <ai-dv-wrapper style="height: 100%" :title="params.name">
                 <div style="width: 100%; height: 100%">
                   <AiDvBackground
+                    :theme="dashboard.theme"
                     v-if="dashboard.backgroundImage.length"
                     :src="dashboard.backgroundImage[0].url">
                   </AiDvBackground>
@@ -90,7 +91,7 @@
                       <div class="coordinate-top"></div>
                       <div class="coordinate-label">{{ item.left }}, {{ item.top }}</div>
                     </div>
-                    <RenderElement :data="item" :index="index"></RenderElement>
+                    <RenderElement :data="item" :theme="dashboard.theme" :index="index"></RenderElement>
                   </vue-draggable-resizable>
                 </div>
               </ai-dv-wrapper>
@@ -251,6 +252,15 @@
                 <el-input v-model="dashboard.title" size="mini"></el-input>
               </div>
             </div>
+            <div class="layout-config__item">
+              <label>主题设置</label>
+              <div class="layout-config__item--right">
+                <el-select size="mini" v-model="dashboard.theme" placeholder="请选择">
+                  <el-option label="默认" value="0"></el-option>
+                  <el-option label="党建" value="1"></el-option>
+                </el-select>
+              </div>
+            </div>
             <div class="layout-config__item">
               <label>背景图</label>
               <div class="layout-config__item--right layout-config__item--bg">
@@ -372,6 +382,7 @@
           title: '大屏',
           width: 1920,
           height: 1080,
+          theme: '0',
           backgroundColor: '',
           backgroundImage: []
         },

packages/bigscreen/designer/components/RenderElement.vue

@@ -12,18 +12,21 @@
         v-if="data.type === 'table'"
         :config="formatTable(data[data.dataType], data.isShowIndex, data.rowNum)"
         :key="data.height"
+        :theme="theme"
         :style="{height: data.height + 'px', width: '100%'}" />
       <ai-echart
         v-else-if="data.type === 'barChart1'"
         style="height: 100%; width: 100%;"
         :ref="'chart' + index"
         :key="`chart${index}`"
+        :theme="theme"
         :data="data[data.dataType]"
         :ops="data.config"/>
       <ai-echart
         v-else-if="data.type === 'barChart2'"
         style="height: 100%; width: 100%;"
         :ref="'chart' + index"
+        :theme="theme"
         :key="`chart${index}`"
         :data="data[data.dataType]"
         :ops="data.config"/>
@@ -32,6 +35,7 @@
         style="height: 100%; width: 100%;"
         :ref="'chart' + index"
         :key="`chart${index}`"
+        :theme="theme"
         :data="data[data.dataType]"
         :ops="data.config"/>
       <ai-echart
@@ -39,6 +43,7 @@
         style="height: 100%; width: 100%;"
         :ref="'chart' + index"
         :key="`chart${index}`"
+        :theme="theme"
         :data="data[data.dataType]"
         :ops="data.config"/>
       <ai-echart
@@ -46,6 +51,7 @@
         style="height: 100%; width: 100%;"
         :ref="'chart' + index"
         :key="`chart${index}`"
+        :theme="theme"
         :data="data[data.dataType]"
         :ops="data.config"/>
       <ai-echart
@@ -53,6 +59,7 @@
         style="height: 100%; width: 100%;"
         :ref="'chart' + index"
         :key="`chart${index}`"
+        :theme="theme"
         :data="data[data.dataType]"
         :ops="data.config"/>
       <ai-echart
@@ -60,6 +67,7 @@
         style="height: 100%; width: 100%;"
         :ref="'chart' + index"
         :key="`chart${index}`"
+        :theme="theme"
         :data="data[data.dataType]"
         :ops="data.config"/>
       <ai-echart
@@ -67,6 +75,7 @@
         style="height: 100%; width: 100%;"
         :ref="'chart' + index"
         :key="`chart${index}`"
+        :theme="theme"
         :data="data[data.dataType]"
         :ops="lineChart1"/>
       <ai-echart
@@ -74,6 +83,7 @@
         style="height: 100%; width: 100%;"
         :ref="'chart' + index"
         :key="`chart${index}`"
+        :theme="theme"
         :data="data[data.dataType]"
         :ops="lineChart2"/>
       <ai-echart
@@ -81,6 +91,7 @@
         style="height: 100%; width: 100%;"
         :ref="'chart' + index"
         :key="`chart${index}`"
+        :theme="theme"
         :data="data[data.dataType]"
         :ops="data.config"/>
       <ai-echart
@@ -88,6 +99,7 @@
         style="height: 100%; width: 100%;"
         :ref="'chart' + index"
         :key="`chart${index}`"
+        :theme="theme"
         :data="data[data.dataType]"
         :ops="data.config"/>
       <ai-echart
@@ -95,6 +107,7 @@
         style="height: 100%; width: 100%;"
         :ref="'chart' + index"
         :key="`chart${index}`"
+        :theme="theme"
         :data="data[data.dataType]"
         :ops="lineChart5"/>
       <ai-echart
@@ -102,6 +115,7 @@
         style="height: 100%; width: 100%;"
         :ref="'chart' + index"
         :key="`chart${index}`"
+        :theme="theme"
         :data="data[data.dataType]"
         :ops="pieChart"/>
       <ai-map :markers="data[data.dataType]" v-else-if="data.type=='map'" :mask="data.mask === '1'" :areaId="data.areaId || user.info.areaId" map-style="amap://styles/e51987628aee5206d4c9ca8c6e98b4f7"/>
@@ -122,7 +136,7 @@
   export default {
     name: 'RenderElement',
 
-    props: ['data', 'index'],
+    props: ['data', 'index', 'theme'],
 
     components: {
       AiSwiper