党建主题适配

components/AiDvRender.vue

@@ -2,26 +2,27 @@
   <div class="AiDvRender" style="width: 100%; height: 100%;">
     <ai-dv-display v-if="data.type === 'display'" :title="data.title" :list="values"></ai-dv-display>
     <ai-dv-panel
-        style="height: 100%; width: 100%;"
-        v-if="data.type !== 'display'"
-        :title="data.title"
-        :border="data.border || ''">
-      <AiDvSummary v-if="data.type === 'summary'" :summaryTitle="data.summaryTitle" :key="`summary${index}`" :type="data.display" :data="values"/>
+      style="height: 100%; width: 100%;"
+      v-if="data.type !== 'display'"
+      :title="data.title"
+      :theme="theme"
+      :border="data.border || ''">
+      <AiDvSummary v-if="data.type === 'summary'" :theme="theme" :summaryTitle="data.summaryTitle" :key="`summary${index}`" :type="data.display" :data="values"/>
       <AiSwiper v-else-if="data.type === 'swiper'" :heigth="'100%'" :data="values"/>
       <dv-scroll-board
-          v-if="data.type === 'table'"
-          :class="'dvScrollBoard' + theme"
-          :config="formatTable(values, data.isShowIndex, data.rowNum)"
-          :key="data.height"
-          :theme="theme"
-          :style="{height: data.height + 'px', width: '100%'}"/>
+        v-if="data.type === 'table'"
+        :class="'dvScrollBoard' + theme"
+        :config="formatTable(values, data.isShowIndex, data.rowNum)"
+        :key="data.height"
+        :theme="theme"
+        :style="{height: data.height + 'px', width: '100%'}"/>
       <ai-echart-v2 v-else-if="/Chart/.test(data.type)"
-                 style="height: 100%; width: 100%;"
-                 :ref="'chart' + index"
-                 :key="`chart${index}`"
-                 :theme="theme"
-                 :data="values"
-                 :ops="chartList[data.config]"/>
+        style="height: 100%; width: 100%;"
+        :ref="'chart' + index"
+        :key="`chart${index}`"
+        :theme="theme"
+        :data="values"
+        :ops="chartList[data.config]"/>
       <!-- <ai-q-map
         v-else-if="data.type=='map'"
         :area-id="data.areaId"
@@ -34,11 +35,13 @@
         v-else-if="data.type === 'AiDvTable'"
         :heigth="'100%'"
         :stripe="data.stripe"
+        :theme="theme"
         :isShowIndex="data.isShowIndex"
         :data="values">
       </AiDvTable>
       <AiRanking
         v-else-if="data.type === 'AiRanking'"
+        :theme="theme"
         :heigth="'100%'"
         :data="values">
       </AiRanking>

components/layout/AiDvPanel/AiDvPanel.vue

@@ -1,6 +1,6 @@
 <template>
   <section class="AiDvPanel">
-    <component :is="border" :title="title" v-if="border">
+    <component :is="border" :title="title" v-if="border" :theme="theme">
       <template v-if="$slots.title" #title>
         <slot name="title"/>
       </template>
@@ -24,7 +24,11 @@ export default {
   components: { Border0, Border1, Border2, Border3, Border4, Border5, border6 },
   props: {
     title: {default: "请传入标题"},
-    border: {default: "border0"}
+    border: {default: "border0"},
+    theme: {
+      type: String,
+      default: '0'
+    }
   },
   mounted() {
   },

components/layout/AiDvPanel/borders/border6.vue

@@ -1,6 +1,9 @@
 <template>
-  <section class="border6">
-    <h2>{{ title }}</h2>
+  <section class="border6" :class="'border6-' + theme">
+    <div class="border6-title">
+      <img src="../asset/ic-badge.png" v-if="theme === '1'" />
+      <h2>{{ title }}</h2>
+    </div>
     <div class="slot">
       <slot/>
     </div>
@@ -10,9 +13,8 @@
 <script>
 export default {
   name: 'border6',
-  props: {
-    title: String
-  }
+
+  props: ['title', 'theme']
 }
 </script>
 
@@ -20,20 +22,33 @@ export default {
 .border6 {
   height: 100%;
 
-  h2 {
+  .border6-title {
+    display: flex;
     position: relative;
     height: 40px;
-    line-height: 26px;
+    // line-height: 26px;
     padding: 4px 0 0 22px;
-    color: #fff;
-    font-size: 22px;
-    font-weight: normal;
+    box-sizing: border-box;
     font-family: PingFangSC-Medium, PingFang SC;
     background-image: url(../asset/title6.png);
     background-position: bottom;
     background-size: 100% 7px;
     background-repeat: no-repeat;
 
+    h2 {
+      line-height: 1;
+      color: #fff;
+      font-size: 20px;
+      font-weight: normal;
+      letter-spacing: 1px;
+    }
+
+    img {
+      width: 28px;
+      height: 28px;
+      margin-right: 8px;
+    }
+
     &:after {
       position: absolute;
       top: 16px;
@@ -47,6 +62,15 @@ export default {
     }
   }
 
+  &.border6-1 .border6-title {
+    background-image: url(../asset/title-6-dj.png);
+    background-position: bottom;
+
+    &:after {
+      background: #FFA086;
+    }
+  }
+
   .slot {
     height: calc(100% - 40px);
     padding-top: 19px;

components/layout/AiDvSummary/AiDvSummary.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="AiSummary">
-    <component :is="type" :data="data" :keys="keys" :value="value" :summaryTitle="summaryTitle"></component>
+    <component :is="type" :theme="theme" :data="data" :keys="keys" :value="value" :summaryTitle="summaryTitle"></component>
   </div>
 </template>
 
@@ -65,6 +65,11 @@
       value: {
         type: String,
         default: 'value'
+      },
+
+      theme: {
+        type: String,
+        default: '0'
       }
     }
   }

components/layout/AiDvSummary/components/Summary12.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="summary12">
+  <div class="summary12" :class="'summary12-' + theme">
     <div class="summary12-item" v-for="(item, index) in data" :key="index" v-if="index < 4">
       <h2>{{ item[keys] }}</h2>
       <p>{{ item[value] }}</p>
@@ -25,6 +25,11 @@
       value: {
         type: String,
         default: 'value'
+      },
+
+      theme: {
+        type: String,
+        default: '0'
       }
     },
 
@@ -72,5 +77,11 @@
         text-align: left;
       }
     }
+
+    &.summary12-1 .summary12-item {
+      p {
+        color: #FAD88E;
+      }
+    }
   }
 </style>

components/layout/AiDvSummary/components/Summary13.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="summary13">
+  <div class="summary13" :class="'summary13-' + theme">
     <div class="summary13-item" v-for="(item, index) in data" :key="index" v-if="index < 4">
       <h2>{{ item[keys] }}：</h2>
       <p>{{ item[value] }}</p>
@@ -25,6 +25,11 @@
       value: {
         type: String,
         default: 'value'
+      },
+
+      theme: {
+        type: String,
+        default: '0'
       }
     },
 
@@ -98,5 +103,9 @@
         content: ' ';
       }
     }
+
+    &.summary13-1 {
+
+    }
   }
 </style>

components/layout/AiDvTable/AiDvTable.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="aiDvTable">
+  <div class="aiDvTable" :class="'aiDvTable-' + theme">
     <div class="header">
       <span
         v-for="(item, index) in header"
@@ -49,6 +49,11 @@
       stripe: {
         type: String,
         default: '1'
+      },
+
+      theme: {
+        type: String,
+        default: '0'
       }
     },
 
@@ -114,6 +119,26 @@
   .aiDvTable {
     height: 100%;
     overflow: hidden;
+
+    ::-webkit-scrollbar {
+      width: 5px;
+      height: 14px;
+    }
+
+    ::-webkit-scrollbar-corner {
+      background: transparent;
+    }
+
+    ::-webkit-scrollbar-thumb {
+      min-height: 20px;
+      background-clip: content-box;
+      box-shadow: 0 0 0 5px rgba(116, 148, 170, 0.5) inset;
+    }
+
+    ::-webkit-scrollbar-track {
+      box-shadow: 1px 1px 5px rgba(116, 148, 170, 0.5) inset;
+    }
+
     .header {
       display: flex;
       align-items: center;
@@ -196,5 +221,39 @@
         }
       }
     }
+
+    &.aiDvTable-1 {
+      ::-webkit-scrollbar {
+        width: 5px;
+        height: 14px;
+      }
+
+      ::-webkit-scrollbar-corner {
+        background: transparent;
+      }
+
+      ::-webkit-scrollbar-thumb {
+        min-height: 20px;
+        background-clip: content-box;
+        box-shadow: 0 0 0 5px rgba(250, 181, 108, 0.5) inset;
+      }
+
+      ::-webkit-scrollbar-track {
+        box-shadow: 1px 1px 5px rgba(50, 181, 108, 0.5) inset;
+      }
+      .header {
+        background: #6e2d2a;
+      }
+
+      .body {
+        div {
+          i {
+            color: #FFA086;
+            background: url(./asset/rankbg-dj.png) no-repeat;
+            background-size: 100% 100%;
+          }
+        }
+      }
+    }
   }
 </style>

components/layout/AiRanking/AiRanking.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="AiRanking">
+  <div class="AiRanking" :class="'AiRanking-' + theme">
     <div class="AiRanking-item" v-for="(item, index) in list" :key="index" :class="'AiRanking-item' + (index + 1)">
       <i>{{ index + 1 }}</i>
       <h2>{{ item.name }}</h2>
@@ -24,6 +24,11 @@
       data: {
         type: Array,
         default: () => []
+      },
+
+      theme: {
+        type: String,
+        default: '0'
       }
     },
 
@@ -162,5 +167,46 @@
         color: #fff;
       }
     }
+
+    &.AiRanking-1 {
+      .AiRanking-item {
+        background: url(./asset/ranking4-dj.png) no-repeat;
+        background-size: 100% 100%;
+
+        &.AiRanking-item1 {
+          background: url(./asset/ranking1-dj.png) no-repeat;
+          background-size: 100% 100%;
+        }
+
+        &.AiRanking-item2 {
+          background: url(./asset/ranking2-dj.png) no-repeat;
+          background-size: 100% 100%;
+        }
+
+        &.AiRanking-item3 {
+          background: url(./asset/ranking3-dj.png) no-repeat;
+          background-size: 100% 100%;
+        }
+        .AiRanking-item__rate {
+          position: relative;
+
+          .bar {
+            position: relative;
+            width: calc(100% - 6px);
+            height: 6px;
+            background: linear-gradient(90deg, #ffbb45ff 0%, #ff3e18ff 98%);
+
+            i {
+              border: 1px solid #AA9E93;
+            }
+
+            span {
+              background: #FAB56C;
+              box-shadow: 0 0 10px 0 #fab56c;
+            }
+          }
+        }
+      }
+    }
   }
 </style>

packages/bigscreen/designer/components/Layout.vue

@@ -63,32 +63,27 @@
                 style="height: 100%"
                 :title="$route.query.name"
                 :theme="dashboard.theme"
-                :background="dashboard.theme == 1 ? 'https://cdn.cunwuyun.cn/dvcp/dv/img/dj_bg.png' : (dashboard.backgroundImage[0].url || '')">
+                :background="dashboard.theme == 1 ? 'https://cdn.cunwuyun.cn/dvcp/dv/img/dj_bg.png' : (dashboard.backgroundImage.length ? dashboard.backgroundImage[0].url : '')">
                 <div style="width: 100%; height: 100%">
-                  <AiDvBackground
-                      :theme="dashboard.theme"
-                      v-if="dashboard.backgroundImage.length || dashboard.theme === '1'"
-                      :src="dashboard.theme === '1' ? 'https://cdn.cunwuyun.cn/dvcp/dv/img/dj-bg.png' : dashboard.backgroundImage[0].url">
-                  </AiDvBackground>
                   <vue-draggable-resizable
-                      :w="item.width"
-                      :h="item.height"
-                      :x="item.left"
-                      :y="item.top"
-                      :scale="heightScale"
-                      :z="item.zIndex || 0"
-                      :parent="true"
-                      :resizable="item.type !== 'display' || item.display === 'summary2' || item.display === 'summary3'"
-                      class-name-active="drag-active"
-                      :class="[activeIndex === index ? 'drag-active' : '']"
-                      class="draggable"
-                      @contextmenu.native.stop="e => onContextmenu(e, index)"
-                      @dragstop="(x, y) => onDrag(x, y,item)"
-                      @resizestop="(x, y, w, h) => onResizing(x, y, w, h, item)"
-                      @activated="onActivated(index)"
-                      @click.native.stop="activeIndex = index"
-                      v-for="(item, index) in componentList"
-                      :key="index">
+                    :w="item.width"
+                    :h="item.height"
+                    :x="item.left"
+                    :y="item.top"
+                    :scale="heightScale"
+                    :z="item.zIndex || 0"
+                    :parent="true"
+                    :resizable="item.type !== 'display' || item.display === 'summary2' || item.display === 'summary3'"
+                    class-name-active="drag-active"
+                    :class="[activeIndex === index ? 'drag-active' : '']"
+                    class="draggable"
+                    @contextmenu.native.stop="e => onContextmenu(e, index)"
+                    @dragstop="(x, y) => onDrag(x, y,item)"
+                    @resizestop="(x, y, w, h) => onResizing(x, y, w, h, item)"
+                    @activated="onActivated(index)"
+                    @click.native.stop="activeIndex = index"
+                    v-for="(item, index) in componentList"
+                    :key="index">
                     <div class="coordinate" v-show="activeIndex === index">
                       <div class="coordinate-left"></div>
                       <div class="coordinate-top"></div>

packages/bigscreen/designer/components/preview.vue

@@ -54,23 +54,5 @@ export default {
 
 <style lang="scss" scoped>
 .preview {
-  ::-webkit-scrollbar {
-    width: 5px;
-    height: 14px;
-  }
-
-  ::-webkit-scrollbar-corner {
-    background: transparent;
-  }
-
-  ::-webkit-scrollbar-thumb {
-    min-height: 20px;
-    background-clip: content-box;
-    box-shadow: 0 0 0 5px rgba(116, 148, 170, 0.5) inset;
-  }
-
-  ::-webkit-scrollbar-track {
-    box-shadow: 1px 1px 5px rgba(116, 148, 170, 0.5) inset;
-  }
 }
 </style>

ui/packages/tools/AiEchartV2.vue

@@ -48,7 +48,7 @@ export default {
         return ['#00F9FF', '#1890FF', '#B13BFF', '#FC3BFF', '#95FF44', '#ea7ccc']
       }
 
-      return ['#D4380D', '#CF1322', '#D55800', '#FA8C16', '#FFC53D', '#FFA940', '#FFC53D', '#780000']
+      return ['#00F9FF', '#1890FF', '#B13BFF', '#FC3BFF', '#95FF44', '#ea7ccc']
     },
 
     chartOptions() {
@@ -200,8 +200,6 @@ export default {
       this.initChart()
       this.getChartData()
     })
-
-    console.log(this.data)
   },
   beforeDestroy() {
     this.timer && clearInterval(this.timer)