大屏组件

2022-05-05 15:18:18 +08:00
parent 890cbaa0b9
commit f757852ac4
4 changed files with 40 additions and 21 deletions
--- a/packages/bigscreen/designer/AppDesigner.vue
+++ b/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"
-                     @change="onChange" lazy
-                     :instance="instance" :dict="dict" :permissions="permissions"/>
+          <component :urlPrefix="urlPrefix" :areaId="areaId" :ref="tab.name" v-if="currIndex == i" :is="tab.comp" @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"
-       :dict="dict"
-       :permissions="permissions" @change="onChange"></Add>
-  <SourceData v-else-if="componentName === 'SourceData'" :urlPrefix="urlPrefix" :params="params" :instance="instance"
-              :dict="dict"
-              :permissions="permissions" @change="onChange"></SourceData>
+  <Add v-else-if="componentName === 'Add'" :urlPrefix="urlPrefix" :areaId="areaId" :params="params" :instance="instance" :dict="dict" :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>
@@ -27,12 +21,12 @@ import Add from './components/Add'
 import SourceData from './components/SourceData'
 import dvui from '../../../project/dvui/entries'
 import Vue from "vue";
-
+ 
 Vue.use(dvui)
 export default {
-  name: 'AppDesigner',
+  name: 'AppDesigner' ,
  label: '大屏设计',
-
+ 
  components: {
    List,
    Add,
--- a/packages/bigscreen/designer/components/Add.vue
+++ b/packages/bigscreen/designer/components/Add.vue
@@ -55,13 +55,13 @@
        </ai-card>
      </el-form>
      <Layout
-          v-if="isShowLayout"
-          :instance="instance"
-          :dict="dict"
-          :params="query"
-          @change="onChange"
-          :urlPrefix="urlPrefix"
-          @close="isShowLayout = false">
+        v-if="isShowLayout"
+        :instance="instance"
+        :dict="dict"
+        :params="query"
+        @change="onChange"
+        :urlPrefix="urlPrefix"
+        @close="isShowLayout = false">
      </Layout>
      <ai-dv-wrapper :views="[{label: '返回'}]" @change="screenId = false" v-if="screenId" :title="form.name">
        <AppGigscreenViewer :urlPrefix="urlPrefix" :instance="instance" :dict="dict" :id="screenId"></AppGigscreenViewer>
--- a/packages/bigscreen/designer/components/Layout.vue
+++ b/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: []
        },
--- a/packages/bigscreen/designer/components/RenderElement.vue
+++ b/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