From 605f8a33f6aeafaef7f4157d857602db5cac7508 Mon Sep 17 00:00:00 2001
From: yanran200730 <yanran200830@163.com>
Date: Sun, 23 Apr 2023 17:50:29 +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

---
 packages/bigscreen/dv/AppQxnDv.vue            | 784 ++++++++++++++++++
 packages/bigscreen/dv/AppQxnEventDv.vue       |  22 +
 .../bigscreen/dv/components/DoughnutChart.vue | 185 +++++
 packages/bigscreen/dv/components/DvMap.vue    | 271 ++++++
 4 files changed, 1262 insertions(+)
 create mode 100644 packages/bigscreen/dv/AppQxnDv.vue
 create mode 100644 packages/bigscreen/dv/AppQxnEventDv.vue
 create mode 100644 packages/bigscreen/dv/components/DoughnutChart.vue
 create mode 100644 packages/bigscreen/dv/components/DvMap.vue

diff --git a/packages/bigscreen/dv/AppQxnDv.vue b/packages/bigscreen/dv/AppQxnDv.vue
new file mode 100644
index 00000000..67933864
--- /dev/null
+++ b/packages/bigscreen/dv/AppQxnDv.vue
@@ -0,0 +1,784 @@
+<template>
+  <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: 210px; 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: 160px; width: 100%;"
+                :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: 420px;"></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: 210px; width: 100%;"
+              :ref="'chart'"
+              :data="lineData"
+              :ops="lineChart1">
+            </ai-echart-v2>
+          </div>
+        </AiDvPanel>
+      </div>
+      <div class="right-right">
+        <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="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 style="width: 100%; height: 340px;" 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}]">
+          </AiDvTable>
+        </AiDvPanel>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  import DvMap from './components/DvMap'
+  import DoughnutChart from './components/DoughnutChart'
+  export default {
+    name: 'AppQxnDv',
+    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
+          }
+        ],
+        lineChart1: {
+          legend: { show: false },
+          grid: {
+            left: 50,
+            right: '2%'
+          },
+          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: {
+          yAxis: {
+            nameGap: 23,
+            minInterval: 1,
+            splitLine: { lineStyle: { color: 'rgba(255,255,255,.2)', type: 'dashed' } },
+            axisLabel: { color: '#C3C4C4' },
+            axisPointer: { show: false }
+          },
+          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%'
+          },
+          series: [
+            {
+              type: 'pie',
+              radius: ['50%', '66%'],
+              labelLine:{
+                normal:{
+                  length: 0.01,
+                  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)'
+                }
+              }
+            }
+          ]
+        }
+      }
+    },
+
+    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>
+  .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 {
+        flex: 1;
+
+        .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/AppQxnEventDv.vue b/packages/bigscreen/dv/AppQxnEventDv.vue
new file mode 100644
index 00000000..cbe0c569
--- /dev/null
+++ b/packages/bigscreen/dv/AppQxnEventDv.vue
@@ -0,0 +1,22 @@
+<template>
+  <div class="AppQxnEventDv"></div>
+</template>
+
+<script>
+  export default {
+    name: 'AppQxnEventDv',
+    label: '事件上报',
+
+    data ()  {
+      return {
+
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .AppQxnEventDv {
+
+  }
+</style>
diff --git a/packages/bigscreen/dv/components/DoughnutChart.vue b/packages/bigscreen/dv/components/DoughnutChart.vue
new file mode 100644
index 00000000..743b4bed
--- /dev/null
+++ b/packages/bigscreen/dv/components/DoughnutChart.vue
@@ -0,0 +1,185 @@
+<template>
+  <div class="DoughnutChart-wrapper">
+    <div class="DoughnutChart" :id="id">
+      <canvas :id="canvasId"></canvas>
+      <div class="DonutChart-text">
+        <span>{{ ratio }}%</span>
+      </div>
+    </div>
+    <div class="DoughnutChart-explain">
+      <div class="item">
+        <i></i>
+        <span>已激活成员</span>
+        <p>2142</p>
+      </div>
+      <div class="item">
+        <i></i>
+        <span>未激活成员</span>
+        <p>2142</p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    props: ['ratio'],
+
+    data () {
+      return {
+        id: `DonutChart-${Math.ceil(Math.random() * 10000)}`,
+        canvasId: `DonutChartCanvas-${Math.ceil(Math.random() * 10000)}`,
+        canvasWidth: 90,
+        canvasHeight: 90
+      }
+    },
+
+    mounted () {
+      this.$nextTick(() => {
+        this.init()
+      })
+    },
+
+    methods: {
+      drawLine(ctx, options) {
+        const { beginX, beginY, endX, endY, lineColor, lineWidth } = options
+        ctx.lineWidth = lineWidth
+        ctx.strokeStyle = lineColor
+        ctx.beginPath()
+        ctx.moveTo(beginX, beginY)
+        ctx.lineTo(endX, endY)
+        ctx.closePath()
+        ctx.stroke()
+      },
+
+      angle (a, i, ox, oy, or) {
+        var hudu = (2 * Math.PI / 360) * a * i
+        var x = ox + Math.sin(hudu) * or
+        var y = oy - Math.cos(hudu) * or
+        return x + '_' + y
+      },
+
+      mapColor (value) {
+        if (value < 25) {
+          return '#FFC139'
+        }
+
+        if (value < 50) {
+          return '#21E03E'
+        }
+
+        return '#05C8FF'
+      },
+
+      init () {
+        const ctx = document.querySelector(`#${this.canvasId}`).getContext('2d')
+        const canvasWidth = document.querySelector(`#${this.id}`).offsetWidth
+        const canvasHeight = document.querySelector(`#${this.id}`).offsetHeight
+        const angle = this.ratio / 100 * 2
+        let radian = 0
+
+        ctx.width = canvasWidth
+        ctx.height = canvasHeight
+        const x = canvasWidth / 2
+        const y = canvasHeight / 2
+        ctx.lineWidth = 4
+        ctx.strokeStyle = 'rgba(102, 121, 138, 0.3)'
+        ctx.beginPath();
+        ctx.arc(x, y, x - 8, 0, 2 * Math.PI)
+        ctx.stroke()
+
+        ctx.beginPath()
+        ctx.lineWidth = 4
+        var g = ctx.createLinearGradient(0, 0, 0, 80)
+        g.addColorStop(0, 'rgba(44, 150, 231, 0.8)')
+        g.addColorStop(1, 'rgba(92, 255, 243, 1)')
+        ctx.strokeStyle = g
+
+        if (this.ratio < 25) {
+          radian = 3 / 2 + angle
+          ctx.arc(x, y, x - 8, Math.PI + Math.PI / 2, Math.PI * radian, false)
+        } else if (this.ratio === 100) {
+          ctx.arc(x, y, x - 8, 0, Math.PI * 2)
+        } else {
+          radian = (this.ratio - 25) / 100 * 2
+          ctx.arc(x, y, x - 8, Math.PI + Math.PI / 2, Math.PI * radian, false)
+        }
+        ctx.stroke()
+
+        ctx.beginPath()
+        ctx.strokeStyle = 'rgba(102, 121, 138, 0.4)'
+        ctx.lineWidth = 1
+        ctx.arc(x, y, x - 15, 0, 2 * Math.PI)
+        ctx.stroke()
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .DoughnutChart-wrapper {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: 100%;
+    padding-top: 12px;
+
+    .DoughnutChart-explain {
+      flex: 1;
+      margin-left: 12px;
+
+      .item {
+        display: flex;
+        align-items: center;
+
+        i {
+          width: 8px;
+          height: 8px;
+          margin-right: 6px;
+          border-radius: 50%;
+          background: #5AF9F0;
+        }
+
+        span {
+          margin-right: 24px;
+          font-weight: 400;
+          font-size: 14px;
+          color: #9BB7D4;
+        }
+
+        p {
+          font-size: 14px;
+          color: #FFFFFF;
+        }
+
+        &:last-child i {
+          background: rgba(102, 121, 138, 0.3);
+        }
+      }
+    }
+
+
+    .DoughnutChart {
+      position: relative;
+      width: 90px;
+      height: 90px;
+      overflow: hidden;
+
+      .DonutChart-text {
+        display: flex;
+        position: absolute;
+        justify-content: center;
+        top: 50%;
+        left: 50%;
+        z-index: 1;
+        transform: translate(-50%, -50%);
+
+        span {
+          font-size: 18px;
+          font-weight: bold;
+          color: #02FEFF;
+        }
+      }
+    }
+  }
+</style>
diff --git a/packages/bigscreen/dv/components/DvMap.vue b/packages/bigscreen/dv/components/DvMap.vue
new file mode 100644
index 00000000..70da2729
--- /dev/null
+++ b/packages/bigscreen/dv/components/DvMap.vue
@@ -0,0 +1,271 @@
+<template>
+  <div class="AiDvMap" v-resize="onDomResize">
+    <div class="chart-map" :class="v" style="width: 100%; height: 100%"></div>
+  </div>
+</template>
+
+<script>
+import * as echarts from 'echarts'
+import http from "dui/lib/js/request";
+
+export default {
+  name: 'AiDvMap',
+  data() {
+    return {
+      timer: null,
+      v: `AiDvMap-${new Date().getTime()}`,
+      chart: null
+    }
+  },
+  directives: {
+    resize: {
+      bind(el, binding) {
+        let width = ''
+        let height = ''
+
+        function isReize() {
+          const style = document.defaultView.getComputedStyle(el)
+          if (width !== style.width || height !== style.height) {
+            binding.value({
+              width: style.width,
+              height: style.height
+            })
+          }
+          width = style.width
+          height = style.height
+        }
+
+        el.__vueSetInterval__ = setInterval(isReize, 300)
+      },
+
+      unbind(el) {
+        clearInterval(el.__vueSetInterval__)
+      }
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.initChart()
+    })
+  },
+
+  methods: {
+    onDomResize() {
+      this.$nextTick(() => {
+        this.chart.resize()
+      })
+    },
+
+    initChart() {
+      this.chart = echarts.init(document.querySelector(`.${this.v}`))
+      this.getData().then(res => {
+        if (res.code === 0) {
+          echarts.registerMap('黔西南', res.data)
+
+          let option = {
+            geo: [
+              {
+                map: "黔西南",
+                aspectScale: 1,
+                zoom: 0.65,
+                layoutCenter: ["50%", "50%"],
+                layoutSize: "180%",
+                show: true,
+                roam: false,
+                emphasis: {
+                  show: true,
+                  label: {
+                    textStyle: {
+                      color: "#FFFFFF"
+                    },
+                  },
+                  itemStyle: {
+                    // areaColor: '#fff'
+                  }
+                },
+                label: {
+                  normal: {
+                    show: true,
+                    color: '#fff',
+                    fontSize: '15'
+                  }
+                },
+                itemStyle: {
+                  normal: {
+                    borderColor: "rgba(2, 254, 255, 0.7)",
+                    borderWidth: 2,
+                    shadowColor: "rgba(2, 254, 255, 0.1)",
+                    shadowOffsetY: 10,
+                    shadowBlur: 120,
+                    areaColor: "#0f7295",
+                  },
+                }
+              },
+              // 重影
+              {
+                type: "map",
+                map: "黔西南",
+                zlevel: -1,
+                aspectScale: 1,
+                zoom: 0.65,
+                layoutCenter: ["50%", "51%"],
+                layoutSize: "180%",
+                roam: false,
+                silent: true,
+                itemStyle: {
+                  normal: {
+                    borderWidth: 1,
+                    // borderColor:"rgba(17, 149, 216,0.6)",
+                    borderColor: "rgba(2, 254, 255, 0.3)",
+                    shadowColor: "rgba(2, 254, 255, 0.3)",
+                    shadowOffsetY: 5,
+                    shadowBlur: 15,
+                    areaColor: "rgba(5,21,35,0.1)",
+                  },
+                },
+              },
+              {
+                type: "map",
+                map: "黔西南",
+                zlevel: -2,
+                aspectScale: 1,
+                zoom: 0.65,
+                layoutCenter: ["50%", "52%"],
+                layoutSize: "180%",
+                roam: false,
+                silent: true,
+                itemStyle: {
+                  normal: {
+                    borderWidth: 1,
+                    // borderColor: "rgba(57, 132, 188,0.4)",
+                    borderColor: "rgba(2, 254, 255, 0.2)",
+                    shadowColor: "rgba(2, 254, 255, 0.24)",
+                    shadowOffsetY: 5,
+                    shadowBlur: 15,
+                    areaColor: "transpercent",
+                  },
+                },
+              },
+              {
+                type: "map",
+                map: "黔西南",
+                zlevel: -3,
+                aspectScale: 1,
+                zoom: 0.65,
+                layoutCenter: ["50%", "53%"],
+                layoutSize: "180%",
+                roam: false,
+                silent: true,
+                itemStyle: {
+                  normal: {
+                    borderWidth: 1,
+                    // borderColor: "rgba(11, 43, 97,0.8)",
+                    borderColor: "rgba(2, 254, 255, 0.1)",
+                    shadowColor: "rgba(2, 254, 255, 0.1)",
+                    shadowOffsetY: 15,
+                    shadowBlur: 10,
+                    areaColor: "transpercent",
+                  },
+                },
+              }
+            ],
+            series: [
+              {
+                type: 'scatter',
+                map: "黔西南",
+                coordinateSystem: 'geo',
+                z: 3,
+                zlevel: 3,
+                // symbol: 'none',
+                symbolSize: 16,
+                rippleEffect: {
+                  period: 2,
+                  scale: 4,
+                  brushType: 'fill'
+                },
+                label: {
+                    show: false
+                },
+                roam: false,
+                itemStyle: {
+                  normal: {
+                    areaColor: '#000',
+                    borderColor: '#a18a3a',
+                    borderWidth: 1
+                  },
+                  emphasis: {
+                    show: false,
+                    areaColor: null
+                  }
+                },
+                // label: {
+                //   show: true,
+                //   formatter: e => {
+                //     const name = e.data[3]
+                //     const value = e.data[2]
+                //     return `{a|${name}}\n{b|${value}}`
+                //   },
+                //   fontSize: 16,
+                //   rich: {
+                //     a: {
+                //       width: '100%',
+                //       color: '#fff',
+                //       lineHeight: 20,
+                //       fontSize: 16
+                //     },
+                //     b: {
+                //       backgroundColor: {
+                //         // image: require('@/assets/images/point.png')
+                //       },
+                //       color: '#fff',
+                //       height: 56,
+                //       align: 'center',
+                //       width: 50,
+                //       fontSize: 16
+                //     }
+                //   }
+                // },
+                data: []
+              }
+            ]
+          }
+          this.chart.setOption(option)
+        }
+      })
+    },
+
+    convertData(data) {
+      return data.map(v => {
+        return [this.qqMapTransBMap(v.point[1], v.point[0]).lng, this.qqMapTransBMap(v.point[1], v.point[0]).lat, v.value, v.name]
+      })
+    },
+
+    qqMapTransBMap(lng, lat) {
+      const x_pi = 3.14159265358979324 * 3000.0 / 180.0
+      var x = lng
+      var y = lat
+      var z = Math.sqrt(x * x + y * y) + 0.00002 * Math.sin(y * x_pi)
+      var theta = Math.atan2(y, x) + 0.000003 * Math.cos(x * x_pi)
+
+      return {
+        lng: z * Math.cos(theta) + 0.0065,
+        lat: z * Math.sin(theta) + 0.006
+      }
+    },
+
+    getData() {
+      return http.post(`/app/appdvcpconfig/apiForward?url=${encodeURIComponent(`https://geo.datav.aliyun.com/areas_v3/bound/geojson?code=522300_full`)}`,)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.AiDvMap {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+}
+</style>