From 4d8fd26dddf281193a5c3b1f4cc4d02247615dac Mon Sep 17 00:00:00 2001
From: yanran200730 <yanran200830@163.com>
Date: Mon, 24 Apr 2023 10:34:41 +0800
Subject: [PATCH] =?UTF-8?q?=E9=BB=94=E8=A5=BF=E5=8D=97=E5=A4=A7=E5=B1=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/layout/AiDvTable/AiDvTable.vue  |  15 +-
 packages/bigscreen/dv/AppQxnDv.vue         | 184 ++++-
 packages/bigscreen/dv/AppQxnEventDv.vue    | 884 ++++++++++++++++++++-
 packages/bigscreen/dv/components/DvMap.vue |   2 +-
 ui/packages/tools/AiEchartV2.vue           |   9 +-
 5 files changed, 1048 insertions(+), 46 deletions(-)

diff --git a/components/layout/AiDvTable/AiDvTable.vue b/components/layout/AiDvTable/AiDvTable.vue
index 8cd1dfc4..ea37e2c0 100644
--- a/components/layout/AiDvTable/AiDvTable.vue
+++ b/components/layout/AiDvTable/AiDvTable.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="aiDvTable" :class="'aiDvTable-' + theme">
-    <div class="header">
+    <div class="header" :style="headerStyle">
       <span
         v-for="(item, index) in header"
         :key="index"
@@ -20,6 +20,7 @@
           :style="{
             color: config[i].color,
             textAlign: config[i].align,
+            fontSize: config[i].fontSize,
             width: config[i].width ? config[i].width + 'px' : '',
             flex: config[i].width ? 'inherit' : 1
           }">
@@ -41,6 +42,11 @@
         default: () => []
       },
 
+      headerStyle: {
+        type: Object,
+        default: () => {}
+      },
+
       isShowIndex: {
         type: String,
         default: '0'
@@ -65,8 +71,7 @@
     data () {
       return {
         header: [],
-        body: [],
-        colorIndex: ''
+        body: []
       }
     },
 
@@ -144,14 +149,14 @@
       align-items: center;
       width: 100%;
       height: 40px;
+      font-size: 16px;
       padding: 0 16px;
+      color: rgba(255, 255, 255, 0.7);
       background: rgba(70, 70, 70, 0.35);
 
       span {
         flex: 1;
-        font-size: 16px;
         text-align: center;
-        color: rgba(255, 255, 255, 0.7);
         overflow: hidden;
         white-space: nowrap;
         text-overflow: ellipsis;
diff --git a/packages/bigscreen/dv/AppQxnDv.vue b/packages/bigscreen/dv/AppQxnDv.vue
index 67933864..f5858b81 100644
--- a/packages/bigscreen/dv/AppQxnDv.vue
+++ b/packages/bigscreen/dv/AppQxnDv.vue
@@ -82,7 +82,7 @@
                 <h2>单位成员关系人数</h2>
               </div>
               <ai-echart-v2
-                style="height: 210px; width: 100%;"
+                style="height: 220px; width: 100%;"
                 :ref="'chart2'"
                 :data="lineData1"
                 :ops="barChart8">
@@ -93,7 +93,7 @@
                 <h2>群人数规模分布</h2>
               </div>
               <ai-echart-v2
-                style="height: 160px; width: 100%;"
+                style="height: 180px; width: 100%; margin-top: 20px;"
                 :ref="'chart2'"
                 :data="lineData1"
                 :ops="pieChart">
@@ -114,7 +114,7 @@
             </div>
           </div>
           <div class="wrapper">
-            <DvMap style="width: 100%; height: 420px;"></DvMap>
+            <DvMap style="width: 100%; height: 356px;"></DvMap>
           </div>
           <div class="right-middle__middle">
             <div class="wrapper">
@@ -135,7 +135,7 @@
               <h2>近期成员使用分布</h2>
             </div>
             <ai-echart-v2
-              style="height: 210px; width: 100%;"
+              style="height: 220px; width: 100%;"
               :ref="'chart'"
               :data="lineData"
               :ops="lineChart1">
@@ -144,7 +144,7 @@
         </AiDvPanel>
       </div>
       <div class="right-right">
-        <AiDvPanel style="width: 100%" border="border6" title="微警务群概况">
+        <AiDvPanel style="height: auto;" border="border6" title="微警务群概况">
           <div class="right-left__total AppQxnDv-total">
             <div class="item" v-for="(item, index) in 4" :key="index">
               <h2>群动态概况</h2>
@@ -180,29 +180,19 @@
             </ai-echart-v2>
           </div>
         </AiDvPanel>
-        <AiDvPanel style="width: 100%; height: 340px;" border="border6" title="群动态多维度排行">
+        <AiDvPanel class="bottom" style="" border="border6" title="群动态多维度排行">
           <AiDvTable
             :heigth="'100%'"
-            stripe
-            :isShowIndex="true"
-            :config="[{
-                width: '',
-                color: '',
-                align: ''
-              },
-              {
-                width: '',
-                color: '',
-                align: ''
-              },
-              {
-                width: '',
-                color: '',
-                align: ''
-              }]"
-            :data="[{name: '列1', v: 23, v2: 3},
-              {name: '列2', v: 12, v2: 4},
-              {name: '列2', v: 12, v2: 4}]">
+            stripe="1"
+            :headerStyle="{
+              color: '#02FEFF',
+              fontSize: '12px',
+              fontWeight: '600',
+              backgroundColor: 'rgba(33, 180, 253, 0.1)'
+            }"
+            isShowIndex="1"
+            :config="tableConfig"
+            :data="tableData">
           </AiDvTable>
         </AiDvPanel>
       </div>
@@ -265,12 +255,114 @@
             "v1": 98
           }
         ],
+        tableData: [
+          {
+            name: '姓名',
+            v1: '宗梦瑞',
+            v2: '宗梦瑞',
+            v3: '宗梦瑞',
+            v4: '宗梦瑞',
+            v5: '宗梦瑞',
+            v6: '宗梦瑞',
+            v7: '宗梦瑞',
+            v8: '宗梦瑞',
+            v9: '宗梦瑞',
+            v10: '宗梦瑞'
+          },
+          {
+            name: '单位',
+            v1: '宗梦瑞',
+            v2: '宗梦瑞',
+            v3: '宗梦瑞',
+            v4: '宗梦瑞',
+            v5: '宗梦瑞',
+            v6: '宗梦瑞',
+            v7: '宗梦瑞',
+            v8: '宗梦瑞',
+            v9: '宗梦瑞',
+            v10: '宗梦瑞'
+          },
+          {
+            name: '群数量',
+            v1: '12',
+            v2: '12',
+            v3: '123',
+            v4: '123',
+            v5: '123',
+            v6: '123',
+            v7: '2',
+            v8: '123',
+            v9: '123',
+            v10: '1234'
+          },
+          {
+            name: '群人员',
+            v1: '12',
+            v2: '12',
+            v3: '123',
+            v4: '123',
+            v5: '123',
+            v6: '123',
+            v7: '2',
+            v8: '123',
+            v9: '123',
+            v10: '1234'
+          },
+          {
+            name: '新增群人员',
+            v1: '12',
+            v2: '12',
+            v3: '123',
+            v4: '123',
+            v5: '123',
+            v6: '123',
+            v7: '2',
+            v8: '123',
+            v9: '123',
+            v10: '1234'
+          },
+          {
+            name: '有消息的群',
+            v1: '12',
+            v2: '12',
+            v3: '123',
+            v4: '123',
+            v5: '123',
+            v6: '123',
+            v7: '2',
+            v8: '123',
+            v9: '123',
+            v10: '1234'
+          },
+          {
+            name: '群聊人数',
+            v1: '12',
+            v2: '12',
+            v3: '123',
+            v4: '123',
+            v5: '123',
+            v6: '123',
+            v7: '2',
+            v8: '123',
+            v9: '123',
+            v10: '1234'
+          },
+          {
+            name: '群消息总数',
+            v1: '12',
+            v2: '12',
+            v3: '123',
+            v4: '123',
+            v5: '123',
+            v6: '123',
+            v7: '2',
+            v8: '123',
+            v9: '123',
+            v10: '1234'
+          }
+        ],
         lineChart1: {
           legend: { show: false },
-          grid: {
-            left: 50,
-            right: '2%'
-          },
           tooltip: {
             trigger: 'axis',
             backgroundColor: 'rgba(0, 102, 154, 0.65)',
@@ -351,12 +443,16 @@
           }
         },
         barChart: {
+          xAxis: {
+            type: "category",
+            axisLabel: {color: '#8FABBF', fontSize: 12},
+          },
           yAxis: {
             nameGap: 23,
             minInterval: 1,
             splitLine: { lineStyle: { color: 'rgba(255,255,255,.2)', type: 'dashed' } },
-            axisLabel: { color: '#C3C4C4' },
-            axisPointer: { show: false }
+            axisPointer: { show: false },
+            axisLabel: {color: '#8FABBF', fontSize: 12}
           },
           axisPointer: {
             type: 'shadow',
@@ -435,13 +531,14 @@
             right: '6%',
             bottom: '6%'
           },
+          color: ['#59F7CA', '#62F2F8', '#F2B949', '#81C4E4', '#D8F2FD'],
           series: [
             {
               type: 'pie',
               radius: ['50%', '66%'],
               labelLine:{
                 normal:{
-                  length: 0.01,
+                  length: 2,
                   lineStyle: {
                     color: '#526D7A'
                   }
@@ -472,6 +569,20 @@
       }
     },
 
+    computed: {
+      tableConfig () {
+        return this.tableData.map((v, index) => {
+          return {
+            color: '#d0e1e8',
+            textAlign: '',
+            width: index === 0 ? '100' : '',
+            fontSize: '14px',
+            flex: ''
+          }
+        })
+      }
+    },
+
     methods: {
       Hex2RGBA(color, alpha = 1) {
         let hex = 0;
@@ -697,8 +808,15 @@
       }
 
       .right-right {
+        display: flex;
+        flex-direction: column;
         flex: 1;
 
+        .bottom {
+          padding-top: 16px;
+          overflow: hidden;
+        }
+
         .right-right__top {
           display: flex;
           margin-bottom: 16px;
diff --git a/packages/bigscreen/dv/AppQxnEventDv.vue b/packages/bigscreen/dv/AppQxnEventDv.vue
index cbe0c569..0b572930 100644
--- a/packages/bigscreen/dv/AppQxnEventDv.vue
+++ b/packages/bigscreen/dv/AppQxnEventDv.vue
@@ -1,22 +1,902 @@
 <template>
-  <div class="AppQxnEventDv"></div>
+  <div class="AppQxnDv">
+    <div class="left">
+      <AiDvPanel style="width: 100%" border="border6" title="单位列表">
+      <div class="left-list">
+        <div class="left-item" v-for="(item, index) in 16" :key="index">
+          <i>{{ index + 1 }}</i>
+          <div class="left-item__top">
+            <h2>黔西南州公安局</h2>
+            <el-select v-model="value" size="mini" placeholder="请选择派出所">
+              <el-option label="南京派出所" value="1"></el-option>
+              <el-option label="北京派出所" value="2"></el-option>
+              <el-option label="长安派出所" value="3"></el-option>
+            </el-select>
+          </div>
+          <div class="left-item__bottom">
+            <span>居民数量：17246</span>
+            <span>成员：2057</span>
+          </div>
+        </div>
+      </div>
+      </AiDvPanel>
+    </div>
+    <div class="right">
+      <div class="right-left">
+        <AiDvPanel style="width: 100%" border="border6" title="微警务群概况">
+          <div class="right-left__total AppQxnDv-total">
+            <div class="item" v-for="(item, index) in 4" :key="index">
+              <h2>全部人员数</h2>
+              <div class="item-bottom">
+                <span>726,079</span>
+                <i>人</i>
+              </div>
+            </div>
+          </div>
+          <div class="wrapper">
+            <div class="AppQxnDv-title">
+              <h2>增长情况</h2>
+            </div>
+            <ai-echart-v2
+              style="height: 200px; width: 500px;"
+              :ref="'chart'"
+              :data="lineData"
+              :ops="lineChart1">
+            </ai-echart-v2>
+          </div>
+          <div class="right-left__middle">
+            <div class="left">
+              <div class="wrapper">
+                <div class="AppQxnDv-title">
+                  <h2>覆盖率</h2>
+                </div>
+                <DoughnutChart :ratio="60"></DoughnutChart>
+              </div>
+              <div class="wrapper">
+                <div class="AppQxnDv-title">
+                  <h2>群标签化率</h2>
+                </div>
+                <DoughnutChart :ratio="95"></DoughnutChart>
+              </div>
+            </div>
+            <div class="right wrapper">
+              <div class="AppQxnDv-title">
+                <h2>群标签情况</h2>
+                <el-select v-model="value" style="width: 92px" size="mini" placeholder="专属">
+                  <el-option label="XXX派出所" value="1"></el-option>
+                  <el-option label="XXX派出所" value="2"></el-option>
+                  <el-option label="XXX派出所" value="3"></el-option>
+                </el-select>
+              </div>
+              <ai-echart-v2
+                style="height: 230px; width: 245px;"
+                :ref="'chart2'"
+                :data="lineData1"
+                :ops="barChart8">
+              </ai-echart-v2>
+            </div>
+          </div>
+          <div class="right-left__bottom">
+            <div class="wrapper">
+              <div class="AppQxnDv-title">
+                <h2>单位成员关系人数</h2>
+              </div>
+              <ai-echart-v2
+                style="height: 220px; width: 100%;"
+                :ref="'chart2'"
+                :data="lineData1"
+                :ops="barChart8">
+              </ai-echart-v2>
+            </div>
+            <div class="wrapper">
+              <div class="AppQxnDv-title">
+                <h2>群人数规模分布</h2>
+              </div>
+              <ai-echart-v2
+                style="height: 180px; width: 100%; margin-top: 20px;"
+                :ref="'chart2'"
+                :data="lineData1"
+                :ops="pieChart">
+              </ai-echart-v2>
+            </div>
+          </div>
+        </AiDvPanel>
+      </div>
+      <div class="right-middle">
+        <AiDvPanel style="width: 100%" border="border6" title="综合概况图">
+          <div class="right-left__total AppQxnDv-total">
+            <div class="item" v-for="(item, index) in 5" :key="index">
+              <h2>分局数量</h2>
+              <div class="item-bottom">
+                <span>726,079</span>
+                <i>人</i>
+              </div>
+            </div>
+          </div>
+          <div class="wrapper">
+            <DvMap style="width: 100%; height: 356px;"></DvMap>
+          </div>
+          <div class="right-middle__middle">
+            <div class="wrapper">
+              <div class="AppQxnDv-title">
+                <h2>成员激活</h2>
+              </div>
+              <DoughnutChart :ratio="95"></DoughnutChart>
+            </div>
+            <div class="wrapper">
+              <div class="AppQxnDv-title">
+                <h2>日均活跃率</h2>
+              </div>
+              <DoughnutChart :ratio="95"></DoughnutChart>
+            </div>
+          </div>
+          <div class="right-middle__bottom">
+            <div class="AppQxnDv-title">
+              <h2>近期成员使用分布</h2>
+            </div>
+            <ai-echart-v2
+              style="height: 220px; width: 100%;"
+              :ref="'chart'"
+              :data="lineData"
+              :ops="lineChart1">
+            </ai-echart-v2>
+          </div>
+        </AiDvPanel>
+      </div>
+      <div class="right-right">
+        <AiDvPanel style="height: auto;" border="border6" title="微警务群概况">
+          <div class="right-left__total AppQxnDv-total">
+            <div class="item" v-for="(item, index) in 4" :key="index">
+              <h2>群动态概况</h2>
+              <div class="item-bottom">
+                <span>726,079</span>
+                <i>人</i>
+              </div>
+            </div>
+          </div>
+          <div class="right-right__top">
+            <div class="wrapper">
+              <div class="AppQxnDv-title">
+                <h2>群活跃率(7日）</h2>
+              </div>
+              <DoughnutChart :ratio="95"></DoughnutChart>
+            </div>
+            <div class="wrapper">
+              <div class="AppQxnDv-title">
+                <h2>人员活跃(7日）</h2>
+              </div>
+              <DoughnutChart :ratio="95"></DoughnutChart>
+            </div>
+          </div>
+          <div class="right-left__middle">
+            <div class="AppQxnDv-title">
+              <h2>各单位群主及群分布</h2>
+            </div>
+            <ai-echart-v2
+              style="height: 210px; width: 100%;"
+              :ref="'chart5'"
+              :data="barData"
+              :ops="barChart">
+            </ai-echart-v2>
+          </div>
+        </AiDvPanel>
+        <AiDvPanel class="bottom" style="" border="border6" title="群动态多维度排行">
+          <AiDvTable
+            :heigth="'100%'"
+            stripe="1"
+            :headerStyle="{
+              color: '#02FEFF',
+              fontSize: '12px',
+              fontWeight: '600',
+              backgroundColor: 'rgba(33, 180, 253, 0.1)'
+            }"
+            isShowIndex="1"
+            :config="tableConfig"
+            :data="tableData">
+          </AiDvTable>
+        </AiDvPanel>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
+  import DvMap from './components/DvMap'
+  import DoughnutChart from './components/DoughnutChart'
   export default {
     name: 'AppQxnEventDv',
     label: '事件上报',
 
+    components: {
+      DvMap,
+      DoughnutChart
+    },
+
     data ()  {
       return {
+        value: '',
+        lineData: [
+          {
+            "name": "阿斯达",
+            "v1": 23,
+            "v2": 33
+          },
+          {
+            "name": "水电费",
+            "v1": 12,
+            "v2": 34
+          },
+          {
+            "name": "凡哥",
+            "v1": 67,
+            "v2": 25
+          },
+          {
+            "name": "党费",
+            "v1": 98,
+            "v2": 85
+          }
+        ],
+        lineData1: [
+          {
+            "name": "1月",
+            "v1": 23
+          },
+          {
+            "name": "2月",
+            "v1": 12
+          },
+          {
+            "name": "3月",
+            "v1": 67
+          },
+          {
+            "name": "4月",
+            "v1": 98
+          }
+        ],
+        tableData: [
+          {
+            name: '姓名',
+            v1: '宗梦瑞',
+            v2: '宗梦瑞',
+            v3: '宗梦瑞',
+            v4: '宗梦瑞',
+            v5: '宗梦瑞',
+            v6: '宗梦瑞',
+            v7: '宗梦瑞',
+            v8: '宗梦瑞',
+            v9: '宗梦瑞',
+            v10: '宗梦瑞'
+          },
+          {
+            name: '单位',
+            v1: '宗梦瑞',
+            v2: '宗梦瑞',
+            v3: '宗梦瑞',
+            v4: '宗梦瑞',
+            v5: '宗梦瑞',
+            v6: '宗梦瑞',
+            v7: '宗梦瑞',
+            v8: '宗梦瑞',
+            v9: '宗梦瑞',
+            v10: '宗梦瑞'
+          },
+          {
+            name: '群数量',
+            v1: '12',
+            v2: '12',
+            v3: '123',
+            v4: '123',
+            v5: '123',
+            v6: '123',
+            v7: '2',
+            v8: '123',
+            v9: '123',
+            v10: '1234'
+          },
+          {
+            name: '群人员',
+            v1: '12',
+            v2: '12',
+            v3: '123',
+            v4: '123',
+            v5: '123',
+            v6: '123',
+            v7: '2',
+            v8: '123',
+            v9: '123',
+            v10: '1234'
+          },
+          {
+            name: '新增群人员',
+            v1: '12',
+            v2: '12',
+            v3: '123',
+            v4: '123',
+            v5: '123',
+            v6: '123',
+            v7: '2',
+            v8: '123',
+            v9: '123',
+            v10: '1234'
+          },
+          {
+            name: '有消息的群',
+            v1: '12',
+            v2: '12',
+            v3: '123',
+            v4: '123',
+            v5: '123',
+            v6: '123',
+            v7: '2',
+            v8: '123',
+            v9: '123',
+            v10: '1234'
+          },
+          {
+            name: '群聊人数',
+            v1: '12',
+            v2: '12',
+            v3: '123',
+            v4: '123',
+            v5: '123',
+            v6: '123',
+            v7: '2',
+            v8: '123',
+            v9: '123',
+            v10: '1234'
+          },
+          {
+            name: '群消息总数',
+            v1: '12',
+            v2: '12',
+            v3: '123',
+            v4: '123',
+            v5: '123',
+            v6: '123',
+            v7: '2',
+            v8: '123',
+            v9: '123',
+            v10: '1234'
+          }
+        ],
+        lineChart1: {
+          legend: { show: false },
+          tooltip: {
+            trigger: 'axis',
+            backgroundColor: 'rgba(0, 102, 154, 0.65)',
+            borderColor: 'rgba(0, 102, 154, 0.65)',
+            textStyle: { color: '#fff' },
+            axisPointer: { type: 'cross' }
+          },
+          color: ['#7AA3CC', '#33CCCC'],
+          xAxis: {
+            type: "category",
+            axisTick: {show: false},
+            axisLine: {show: false},
+            axisLabel: {color: '#8FABBF', fontSize: 12},
+          },
+          yAxis: {
+            nameGap: 23,
+            minInterval: 1,
+            splitLine: { lineStyle: { color: 'rgba(108, 128, 151, 0.3)', type: 'dashed' } },
+            axisLabel: {color: '#8FABBF', fontSize: 12},
+            axisPointer: { snap: true }
+          },
+          daemon: (color) => ({
+            showSymbol: false,
+            smooth: true,
+            lineStyle: {
+              shadowBlur: 4,
+              shadowOffsetY: 2,
+              width: 2
+            },
+            areaStyle: {
+              color: {
+                type: 'linear',
+                x: 0,
+                x2: 0,
+                y: 0,
+                y2: 1,
+                colorStops: [
+                  { offset: 0, color: this.Hex2RGBA(color, 0.3) },
+                  { offset: 1, color: this.Hex2RGBA(color, 0.1) }
+                ]
+              }
+            }
+          })
+        },
+        barChart8: {
+          legend: {show: false},
+          tooltip: {
+            trigger: 'axis',
+            backgroundColor: 'rgba(0, 102, 154, 0.65)',
+            borderColor: 'rgba(0, 102, 154, 0.65)',
+            textStyle: { color: '#fff' },
+            axisPointer: { type: 'cross' }
+          },
+          yAxis: {
+            type: 'category',
+            axisLabel: {color: '#8FABBF', fontSize: 12},
+            axisTick: {show: false},
+            axisLine: {show: false},
+          },
+          xAxis: {
+            nameGap: 23, minInterval: 1,
+            splitLine: {lineStyle: {color: 'rgba(108, 128, 151, 0.3)', type: 'dashed'}},
+            axisLabel: {color: '#8FABBF', fontSize: 12},
+          },
+          daemon: {
+            type: 'bar', barWidth: 10, barGap: '40%',
+            label: {show: true, position: 'insideRight', color: '#fff', fontSize: 14},
+            showBackground: true,
+            backgroundStyle: {
+              color: 'rgba(123, 165, 255, .2)'
+            },
+            itemStyle: {
+              color: {
+                type: 'linear', x: 0, x2: 1, y: 0, y2: 0,
+                colorStops: [{offset: 0, color: 'rgba(0, 89, 84, 0)'}, {offset: 1, color: '#66E1DF'}]
+              }
+            }
+          }
+        },
+        barChart: {
+          xAxis: {
+            type: "category",
+            axisLabel: {color: '#8FABBF', fontSize: 12},
+          },
+          yAxis: {
+            nameGap: 23,
+            minInterval: 1,
+            splitLine: { lineStyle: { color: 'rgba(255,255,255,.2)', type: 'dashed' } },
+            axisPointer: { show: false },
+            axisLabel: {color: '#8FABBF', fontSize: 12}
+          },
+          axisPointer: {
+            type: 'shadow',
+            triggerTooltip: false,
+            shadowStyle: { color: 'rgba(46, 153, 255, .2)' }
+          },
+          color: [
+            {
+              type: 'linear',
+              x: 0,
+              x2: 0,
+              y: 0,
+              y2: 1,
+              colorStops: [
+                { offset: 0, color: 'rgba(51, 204, 204, 1)' },
+                { offset: 1, color: 'rgba(31, 89, 89, 0.25)' }
+              ]
+            },
+            {
+              type: 'linear',
+              x: 0,
+              x2: 0,
+              y: 0,
+              y2: 1,
+              colorStops: [
+                { offset: 0, color: 'rgba(219, 179, 110, 0.1)' },
+                { offset: 1, color: 'rgba(219, 179, 110, 1)' }
+              ]
+            }
+          ],
+          daemon: {
+            type: 'bar',
+            barWidth: 14,
+            barCategoryGap: 40,
+            itemStyle: {}
+          }
+        },
+        barData: [
+          {
+            "name": "兴仁公安局",
+            "v1": 223,
+            "v11": 23
+          },
+          {
+            "name": "兴仁公安局1",
+            "v1": 22,
+            "v11": 29
+          },
+          {
+            "name": "兴仁公安局2",
+            "v1": 67,
+            "v11": 23
+          },
+          {
+            "name": "兴仁公安局3",
+            "v1": 98,
+            "v11": 23
+          }
+        ],
+        pieData: [
+        { value: 1048, name: 'Search Engine' },
+        { value: 735, name: 'Direct' },
+        { value: 580, name: 'Email' },
+        { value: 484, name: 'Union Ads' },
+        { value: 300, name: 'Video Ads' }] ,
+        pieChart: {
+          tooltip: {
+            trigger: 'item'
+          },
+          legend: {
+            show: false
+          },
+          grid: {
+            left: '6%',
+            top: '6%',
+            right: '6%',
+            bottom: '6%'
+          },
+          color: ['#59F7CA', '#62F2F8', '#F2B949', '#81C4E4', '#D8F2FD'],
+          series: [
+            {
+              type: 'pie',
+              radius: ['50%', '66%'],
+              labelLine:{
+                normal:{
+                  length: 2,
+                  lineStyle: {
+                    color: '#526D7A'
+                  }
+                }
+              },
+              startAngle: 90,
+              minAngle: 5,
+              avoidLabelOverlap: true,
+              label: {
+                show: true,
+                normal: {
+                  textStyle: {
+                    color: '#9BB7D4',
+                    fontSize: 16
+                  }
+                }
+              },
+              emphasis: {
+                itemStyle: {
+                  shadowBlur: 10,
+                  shadowOffsetX: 0,
+                  shadowColor: 'rgba(0, 0, 0, 0.5)'
+                }
+              }
+            }
+          ]
+        }
+      }
+    },
 
+    computed: {
+      tableConfig () {
+        return this.tableData.map((v, index) => {
+          return {
+            color: '#d0e1e8',
+            textAlign: '',
+            width: index === 0 ? '100' : '',
+            fontSize: '14px',
+            flex: ''
+          }
+        })
+      }
+    },
+
+    methods: {
+      Hex2RGBA(color, alpha = 1) {
+        let hex = 0;
+        if (color.charAt(0) == "#") {
+          if (color.length == 4) {
+            //检测诸如#FFF简写格式
+            color = "#" + color.charAt(1).repeat(2) +
+                color.charAt(2).repeat(2) +
+                color.charAt(3).repeat(2);
+          }
+          hex = parseInt(color.slice(1), 16);
+        }
+        let r = hex >> 16 & 0xFF;
+        let g = hex >> 8 & 0xFF;
+        let b = hex & 0xFF;
+        return `rgba(${r},${g},${b},${alpha})`;
+      },
+      RGBtoHex(r, g, b) {
+        let hex = r << 16 | g << 8 | b;
+        return "#" + hex.toString(16);
       }
     }
   }
 </script>
 
 <style lang="scss" scoped>
-  .AppQxnEventDv {
+  .AppQxnDv {
+    display: flex;
+    height: 100%;
+    padding-top: 16px;
+    box-sizing: border-box;
+    background: #0c0c0c;
+    overflow: hidden;
 
+    .wrapper {
+      margin-bottom: 12px;
+    }
+
+    .AppQxnDv-title {
+      display: flex;
+      position: relative;
+      align-items: center;
+      justify-content: space-between;
+      height: 30px;
+      line-height: 30px;
+      color: rgba(172, 201, 230, 0.8);
+      background-image: linear-gradient(270deg, rgba(31, 67, 102, 0) 0%, rgba(31, 67, 102, 0.25) 100%);
+
+      h2 {
+        position: relative;
+        font-size: 16px;
+        font-weight: 500;
+        padding: 0 10px;
+
+        &::after {
+          position: absolute;
+          bottom: 0;
+          left: 27px;
+          z-index: 1;
+          width: 9px;
+          height: 2px;
+          background: rgba(41, 77, 102, 1);
+          content: ' ';
+        }
+      }
+
+      &::after {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        z-index: 1;
+        width: 9px;
+        height: 2px;
+        background: #5299CC;
+        content: ' ';
+      }
+
+      &::before {
+        position: absolute;
+        bottom: 0;
+        left: 14px;
+        z-index: 1;
+        width: 9px;
+        height: 2px;
+        background: rgba(41, 77, 102, 1);
+        content: ' ';
+      }
+    }
+
+    .AppQxnDv-total {
+      display: flex;
+      align-items: center;
+      margin-bottom: 16px;
+
+      .item {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-direction: column;
+        flex: 1;
+
+        h2 {
+          margin-bottom: 10px;
+          font-size: 14px;
+          font-weight: 500;
+          color: #FFFFFF;
+        }
+
+        .item-bottom {
+          display: flex;
+          align-items: baseline;
+
+          span {
+            font-weight: 700;
+            font-size: 18px;
+            color: #02FEFF;
+          }
+
+          i {
+            margin-left: 4px;
+            font-style: normal;
+            color: rgba(255, 255, 255, 0.5);
+            font-size: 12px;
+          }
+        }
+      }
+    }
+
+    :deep(.el-select) {
+      height: 24px;
+      line-height: 24px;
+
+      input {
+        width: 100%;
+        height: 24px;
+        line-height: 24px;
+        padding: 0 26px 0 6px;
+        font-size: 12px;
+        color: rgba(179, 229, 229, 1);
+        border: 1px solid #2A7A92;
+        border-radius: 2px;
+        background: transparent;
+
+        &::placeholder {
+          color: rgba(179, 229, 229, 0.6);
+        }
+      }
+
+      .el-input__suffix {
+        right: 1px;
+        top: 0px;
+      }
+
+      i {
+        color: #B3E5E5;
+      }
+    }
+
+    ::-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;
+    }
+
+    * {
+      box-sizing: border-box;
+    }
+
+    & > .right {
+      display: flex;
+      flex: 1;
+
+      .right-left {
+        width: 500px;
+
+        .right-left__middle {
+          display: flex;
+
+          .left {
+            width: 245px;
+            margin-right: 12px;
+          }
+
+          .right {
+            flex: 1;
+          }
+        }
+
+        .right-left__bottom {
+          display: flex;
+
+          div {
+            flex: 1;
+
+            &:first-child {
+              margin-right: 12px;
+            }
+          }
+        }
+      }
+      .right-middle {
+        width: 522px;
+        margin: 0 20px;
+
+        .right-middle__middle {
+          display: flex;
+          justify-content: space-between;
+          margin-bottom: 16px;
+        }
+      }
+
+      .right-right {
+        display: flex;
+        flex-direction: column;
+        flex: 1;
+
+        .bottom {
+          padding-top: 16px;
+          overflow: hidden;
+        }
+
+        .right-right__top {
+          display: flex;
+          margin-bottom: 16px;
+
+          & > div {
+            flex: 1;
+
+            &:first-child {
+              margin-right: 12px;
+            }
+          }
+        }
+      }
+    }
+
+    & > .left {
+      display: flex;
+      align-items: center;
+      flex-direction: column;
+      width: 240px;
+      margin-right: 14px;
+
+      .left-list {
+        flex: 1;
+        overflow-y: auto;
+
+        .left-item {
+          position: relative;
+          width: 100%;
+          margin-bottom: 10px;
+          padding: 30px 14px 14px;
+          background-image: linear-gradient(0deg, rgba(40, 182, 253, 0.08) 1%, rgba(0, 102, 154, 0.65) 100%);
+          border-radius: 6px;
+
+          i {
+            position: absolute;
+            left: 0;
+            top: 0;
+            width: 22px;
+            height: 21px;
+            line-height: 21px;
+            text-align: center;
+            font-weight: 600;
+            font-style: normal;
+            font-size: 14px;
+            color: #FFFFFF;
+            background-image: linear-gradient(177deg, #02eeee66 0%, #0190d866 100%);
+            border-radius: 6px 0 6px 0;
+          }
+
+          .left-item__bottom {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+
+            span {
+              color: #fff;
+              font-weight: 600;
+              font-size: 12px;
+            }
+          }
+
+          .left-item__top {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            margin-bottom: 10px;
+
+            .el-select {
+              width: 100px;
+            }
+
+            h2 {
+              font-weight: 600;
+              font-size: 14px;
+              color: #FFFFFF;
+            }
+          }
+        }
+      }
+    }
   }
 </style>
diff --git a/packages/bigscreen/dv/components/DvMap.vue b/packages/bigscreen/dv/components/DvMap.vue
index 70da2729..146b41d7 100644
--- a/packages/bigscreen/dv/components/DvMap.vue
+++ b/packages/bigscreen/dv/components/DvMap.vue
@@ -87,7 +87,7 @@ export default {
                   normal: {
                     show: true,
                     color: '#fff',
-                    fontSize: '15'
+                    fontSize: '14'
                   }
                 },
                 itemStyle: {
diff --git a/ui/packages/tools/AiEchartV2.vue b/ui/packages/tools/AiEchartV2.vue
index e0d90b93..1f044411 100644
--- a/ui/packages/tools/AiEchartV2.vue
+++ b/ui/packages/tools/AiEchartV2.vue
@@ -91,15 +91,15 @@ export default {
             }
           }
         },
-        legend, series, ...options,
-        color: colors,
         grid: {
           left: '0%',
           right: '0%',
           bottom: '0%',
-          top: '40px',
+          top: '26px',
           containLabel: true
-        }
+        },
+        legend, series, ...options,
+        color: colors
       }
       return ops
     },
@@ -197,7 +197,6 @@ export default {
   },
   mounted() {
     this.$nextTick(() => {
-    console.log(this.$refs[this.AiEchart])
       this.watchResize()
       this.initChart()
       this.getChartData()