From 3be7075a0801674e92f782acc87af98da13b4b83 Mon Sep 17 00:00:00 2001
From: yanran200730 <yanran200830@163.com>
Date: Fri, 23 Sep 2022 09:18:41 +0800
Subject: [PATCH 1/4] =?UTF-8?q?=E6=B5=8B=E8=AF=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/bigscreen/dv/AppPdDv.vue | 58 ++++++++++++++++++++++++-------
 1 file changed, 46 insertions(+), 12 deletions(-)

diff --git a/packages/bigscreen/dv/AppPdDv.vue b/packages/bigscreen/dv/AppPdDv.vue
index 3d58519f..68be2114 100644
--- a/packages/bigscreen/dv/AppPdDv.vue
+++ b/packages/bigscreen/dv/AppPdDv.vue
@@ -65,24 +65,25 @@
                 </div>
               </div>
             </div>
-            <div class="chart2" style="width: 100%; height: 200px;"></div>
+            <div class="chart2" style="width: 100%; height: 160px;"></div>
           </div>
           <div class="item item-tags">
-            <div class="title">标签人群</div>
-            <div class="item-bottom">
-              <div class="item-bottom__item">
-                <h2>高龄老人</h2>
-                <span>{{ tagInfo.elderlyPeople || 0 }}</span>
+            <div class="title">宣发统计</div>
+            <div class="item-top xf">
+              <div class="item-top__item">
+                <h2>宣发任务数</h2>
+                <p>{{ groupChatNumber ? groupChatNumber.chatHasMsg : 0 }}</p>
               </div>
-              <div class="item-bottom__item">
-                <h2>精神病人</h2>
-                <span>{{ tagInfo.mentalIllness || 0 }}</span>
+              <div class="item-top__item">
+                <h2>执行宣发次数</h2>
+                <p>{{ groupChatNumber ? groupChatNumber.memberHasMsg : 0 }}</p>
               </div>
-              <div class="item-bottom__item">
-                <h2>贫困居民</h2>
-                <span>{{ tagInfo.poorResidents || 0 }}</span>
+              <div class="item-top__item">
+                <h2>触达人次</h2>
+                <p>{{ groupChatNumber ? groupChatNumber.msgTotal : 0 }}</p>
               </div>
             </div>
+            <div class="chart11" style="width: 336px; height: 120px;"></div>
           </div>
         </div>
         <div class="tab-content__item" v-show="leftIndex === 1">
@@ -655,6 +656,39 @@
       }
     }
 
+    .xf {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+
+      .item-top__item {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-direction: column;
+        width: 107px;
+        height: 52px;
+        line-height: 1;
+        cursor: pointer;
+        user-select: none;
+        background: url(https://cdn.cunwuyun.cn/dvcp/dv/pddv/ql4.png);
+        background-size: 100% 100%;
+
+        h2 {
+          margin-bottom: 8px;
+          color: #2AB7D1;
+          font-size: 12px;
+        }
+
+        p {
+          font-size: 14px;
+          color: #fff;
+          font-weight: bold;
+          font-style: oblique;
+        }
+      }
+    }
+
     .ql {
       display: flex;
       align-items: center;

From ece325a45ee6a2a222a7ab9e86d7936da28d5df8 Mon Sep 17 00:00:00 2001
From: yanran200730 <yanran200830@163.com>
Date: Fri, 23 Sep 2022 09:43:35 +0800
Subject: [PATCH 2/4] bug

---
 packages/bigscreen/dv/AppPdDv.vue | 28 +++++++++++++++++++++-------
 1 file changed, 21 insertions(+), 7 deletions(-)

diff --git a/packages/bigscreen/dv/AppPdDv.vue b/packages/bigscreen/dv/AppPdDv.vue
index 68be2114..308d4821 100644
--- a/packages/bigscreen/dv/AppPdDv.vue
+++ b/packages/bigscreen/dv/AppPdDv.vue
@@ -32,7 +32,7 @@
                 </div>
               </div>
             </div>
-            <div class="chart1" style="width: 100%; height: 200px;"></div>
+            <div class="chart1" style="width: 100%; height: 160px;"></div>
           </div>
           <div class="item">
             <div class="title">居民群统计</div>
@@ -72,18 +72,18 @@
             <div class="item-top xf">
               <div class="item-top__item">
                 <h2>宣发任务数</h2>
-                <p>{{ groupChatNumber ? groupChatNumber.chatHasMsg : 0 }}</p>
+                <p>{{ xfInfo.createCount || 0 }}</p>
               </div>
               <div class="item-top__item">
                 <h2>执行宣发次数</h2>
-                <p>{{ groupChatNumber ? groupChatNumber.memberHasMsg : 0 }}</p>
+                <p>{{ xfInfo.executeCount || 0 }}</p>
               </div>
               <div class="item-top__item">
                 <h2>触达人次</h2>
-                <p>{{ groupChatNumber ? groupChatNumber.msgTotal : 0 }}</p>
+                <p>{{ xfInfo.receiveCount || 0 }}</p>
               </div>
             </div>
-            <div class="chart11" style="width: 336px; height: 120px;"></div>
+            <div class="chart11" style="width: 336px; margin-top: 10px; height: 160px;"></div>
           </div>
         </div>
         <div class="tab-content__item" v-show="leftIndex === 1">
@@ -263,6 +263,7 @@
         groupChatNumber: {},
         dynamicList: [],
         rankList: [],
+        xfInfo: {},
         pointList: []
       }
     },
@@ -292,9 +293,22 @@
             this.pointList = res.data
           }
         })
-        this.instance.post(`app/appintegraluser/suffixWeekIntegralSort`).then(res => {
+        this.instance.post(`app/appintegraluser/userTotalIntegralSort`).then(res => {
           if (res.code === 0) {
-            this.rankList = res.data
+            this.pointList = res.data
+          }
+        })
+        this.instance.post(`app/appmasssendingtask/statisticsEffectByPidu`).then(res => {
+          if (res.code === 0) {
+            this.xfInfo = res.data
+            this.initBarChart('.chart11', {
+              x: res.data.trend.map(v => v.ymd),
+              value: res.data.trend.map(v => v.createCount),
+              name: '宣发统计'
+            }, [
+              {offset: 0, color: 'rgba(25, 179, 209, 1)'},
+              {offset: 1, color: 'rgba(25, 179, 209, 0)'}
+            ])
           }
         })
         this.instance.post(`/app/wxgroupstatistic/getCustommerNumber`).then(res => {

From dd662e8d2280b8e1922fa0d48a21c6d1ab5f33b1 Mon Sep 17 00:00:00 2001
From: yanran200730 <yanran200830@163.com>
Date: Fri, 23 Sep 2022 09:47:47 +0800
Subject: [PATCH 3/4] =?UTF-8?q?=E5=A4=A7=E5=B1=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/bigscreen/dv/AppPlyDv.vue | 1271 ++++++++++++++++++++++++++++
 1 file changed, 1271 insertions(+)
 create mode 100644 packages/bigscreen/dv/AppPlyDv.vue

diff --git a/packages/bigscreen/dv/AppPlyDv.vue b/packages/bigscreen/dv/AppPlyDv.vue
new file mode 100644
index 00000000..bb82da97
--- /dev/null
+++ b/packages/bigscreen/dv/AppPlyDv.vue
@@ -0,0 +1,1271 @@
+<template>
+  <div class="AppPdDv">
+    <div class="left">
+      <div class="appPdDv-title">企微数据库</div>
+      <div class="tab">
+        <div class="tab-item" :class="[leftIndex === 0 ? 'active' : '']" @click="leftIndex = 0">居民统计</div>
+        <div class="tab-item" :class="[leftIndex === 1 ? 'active' : '']" @click="leftIndex = 1">会话统计</div>
+      </div>
+      <div class="tab-content">
+        <div class="tab-content__item" v-show="leftIndex === 0">
+          <div class="item">
+            <div class="title">居民好友统计</div>
+            <div class="item-top jmhy">
+              <div class="item-top__item">
+                <h2>居民好友</h2>
+                <div class="bottom">
+                  <span>{{ residentInfo.customerTotal || 0 }}</span>
+                </div>
+              </div>
+              <div class="item-top__item">
+                <h2>昨日新增</h2>
+                <div class="bottom">
+                  <span>{{ residentInfo.addCustomerCount || 0 }}</span>
+                  <img src="https://cdn.cunwuyun.cn/dvcp/dv/pddv/arrow-rise.png" />
+                </div>
+              </div>
+              <div class="item-top__item">
+                <h2>昨日流失</h2>
+                <div class="bottom">
+                  <span>{{ residentInfo.removeCustomerCount || 0 }}</span>
+                  <img src="https://cdn.cunwuyun.cn/dvcp/dv/pddv/bottom.png" />
+                </div>
+              </div>
+            </div>
+            <div class="chart1" style="width: 100%; height: 160px;"></div>
+          </div>
+          <div class="item">
+            <div class="title">居民群统计</div>
+            <div class="item-top jmq">
+              <div class="item-top__item">
+                <h2>居民群</h2>
+                <div class="bottom">
+                  <span>{{ groupNumber.groupSum || 0 }}</span>
+                </div>
+              </div>
+              <div class="item-top__item">
+                <h2>群成员</h2>
+                <div class="bottom">
+                  <span>{{ groupNumber.totalSum || 0 }}</span>
+                </div>
+              </div>
+              <div class="item-top__item">
+                <h2>昨日新增</h2>
+                <div class="bottom">
+                  <span>{{ groupNumber.increaseSum || 0 }}</span>
+                  <img src="https://cdn.cunwuyun.cn/dvcp/dv/pddv/arrow-rise.png" />
+                </div>
+              </div>
+              <div class="item-top__item">
+                <h2>昨日流失</h2>
+                <div class="bottom">
+
+                  <span>{{ groupNumber.decreaseSum || 0 }}</span>
+                  <img src="https://cdn.cunwuyun.cn/dvcp/dv/pddv/bottom.png" />
+                </div>
+              </div>
+            </div>
+            <div class="chart2" style="width: 100%; height: 160px;"></div>
+          </div>
+          <div class="item item-tags">
+            <div class="title">宣发统计</div>
+            <div class="item-top xf">
+              <div class="item-top__item">
+                <h2>宣发任务数</h2>
+                <p>{{ xfInfo.createCount || 0 }}</p>
+              </div>
+              <div class="item-top__item">
+                <h2>执行宣发次数</h2>
+                <p>{{ xfInfo.executeCount || 0 }}</p>
+              </div>
+              <div class="item-top__item">
+                <h2>触达人次</h2>
+                <p>{{ xfInfo.receiveCount || 0 }}</p>
+              </div>
+            </div>
+            <div class="chart11" style="width: 336px; margin-top: 10px; height: 160px;"></div>
+          </div>
+        </div>
+        <div class="tab-content__item" v-show="leftIndex === 1">
+          <div class="item">
+            <div class="title">消息回复率</div>
+            <div class="item-top DonutChart-wrapper">
+              <DonutChart v-if="leftIndex === 1" :ratio="replyPercentage ? replyPercentage.replyPercentage : 0" text="昨日"></DonutChart>
+              <DonutChart v-if="leftIndex === 1" :ratio="replyPercentage ? replyPercentage.weekSum : 0" text="近7天"></DonutChart>
+              <DonutChart v-if="leftIndex === 1" :ratio="replyPercentage ? replyPercentage.monthSum : 0" text="近1个月"></DonutChart>
+            </div>
+          </div>
+          <div class="item">
+            <div class="title">单聊统计</div>
+            <div class="item-top dl">
+              <div class="item-top__item" @click="dlIndex = 0" :class="[dlIndex === 0 ? 'active' : '']">
+                <h2>单聊会话</h2>
+                <p>{{ userChatNumber ? userChatNumber.chatCnt : 0 }}</p>
+              </div>
+              <div class="item-top__item" @click="dlIndex = 1" :class="[dlIndex === 1 ? 'active' : '']">
+                <h2>单聊消息</h2>
+                <p>{{ userChatNumber ? userChatNumber.messageCnt : 0 }}</p>
+              </div>
+            </div>
+            <div class="chart3" v-show="dlIndex === 0" style="width: 336px; height: 200px;"></div>
+            <div class="chart4" v-show="dlIndex === 1" style="width: 336px; height: 200px;"></div>
+          </div>
+          <div class="item item-tags">
+            <div class="title">群聊统计</div>
+            <div class="item-top ql">
+              <div class="item-top__item" @click="qlIndex = 0" :class="[qlIndex === 0 ? 'active' : '']">
+                <h2>活跃群聊</h2>
+                <p>{{ groupChatNumber ? groupChatNumber.chatHasMsg : 0 }}</p>
+              </div>
+              <div class="item-top__item" @click="qlIndex = 1" :class="[qlIndex === 1 ? 'active' : '']">
+                <h2>活跃群成员</h2>
+                <p>{{ groupChatNumber ? groupChatNumber.memberHasMsg : 0 }}</p>
+              </div>
+              <div class="item-top__item" @click="qlIndex = 2" :class="[qlIndex === 2 ? 'active' : '']">
+                <h2>群聊消息</h2>
+                <p>{{ groupChatNumber ? groupChatNumber.msgTotal : 0 }}</p>
+              </div>
+            </div>
+            <div class="chart5" v-show="qlIndex === 0" style="width: 336px; height: 200px;"></div>
+            <div class="chart6" v-show="qlIndex === 1" style="width: 336px; height: 200px;"></div>
+            <div class="chart7" v-show="qlIndex === 2" style="width: 336px; height: 200px;"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="middle">
+      <div class="top">
+        <PdGrid :instance="instance" @nodeClick="onNodeClick"></PdGrid>
+      </div>
+      <div class="bottom">
+        <div class="bottom-title">
+          <img src="https://cdn.cunwuyun.cn/dvcp/dv/pddv/icon.png" />
+          <h2>网格动态</h2>
+        </div>
+        <div class="bottom-list">
+          <div class="item" v-for="item in dynamicList" :key="item.id">
+            <i>{{ item.createTime }}</i>
+            <em>{{ item.logDescription }}</em>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="appPdDv-title">网格信息</div>
+      <div class="right-item top-wrapper">
+        <div class="title" :title="girdInfo['网格名称']">{{ girdInfo['网格名称'] }}</div>
+        <div class="item-wrapper">
+          <div class="item-top__item">
+            <h2>{{ girdInfo['微网格长'] || 0 }}</h2>
+            <p>微网格长</p>
+          </div>
+          <div class="item-top__item">
+            <h2>{{ girdInfo['居民群'] || 0 }}</h2>
+            <p>居民群</p>
+          </div>
+          <div class="item-top__item">
+            <h2>{{ girdInfo['群成员'] || 0 }}</h2>
+            <p>群成员</p>
+          </div>
+          <div class="item-top__item">
+            <h2>{{ girdInfo['居民好友'] || 0 }}</h2>
+            <p>居民好友</p>
+          </div>
+        </div>
+      </div>
+      <div class="right-item middle-wrapper">
+        <div class="title">居民群统计</div>
+        <div class="item-table">
+          <div class="item-table__header">
+            <span style="width: 110px">居民群</span>
+            <span style="flex: 1; text-align: center;">群主</span>
+            <span style="width: 60px; text-align: right;">群人数</span>
+          </div>
+          <div class="item-table__body">
+            <div class="item-table__item" v-for="(item, index) in gridList" :key="index">
+              <span style="width: 110px" :title="item.name">{{ item.name || '未命名群聊' }}</span>
+              <span style="flex: 1; text-align: center;">{{ item.ownerName }}</span>
+              <span style="width: 60px; text-align: right;">{{ item.personCount }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="right-item bottom-wrapper">
+        <div class="title">积分排行</div>
+        <div class="item-wrapper">
+          <div class="tab">
+            <div :class="[rightIndex === 0 ? 'active' : '']" @click="rightIndex = 0">累计积分榜</div>
+            <div :class="[rightIndex === 1 ? 'active' : '']" @click="rightIndex = 1">上周积分榜</div>
+          </div>
+          <div class="tab-content">
+            <div class="tab-item" v-for="(item, index) in pointList" :key="index" v-show="rightIndex === 0">
+              <div class="left" :class="'left'+ index">{{ index + 1 }}</div>
+              <div class="middel">
+                <div class="top">
+                  <h2>{{ item.userName }}</h2>
+                  <!-- <span v-if="index === 0">网格长</span> -->
+                </div>
+                <p></p>
+              </div>
+              <i>{{ item.userIntegral }}</i>
+            </div>
+            <div class="tab-item" v-for="(item, index) in rankList" :key="index" v-show="rightIndex === 1">
+              <div class="left" :class="'left'+ index">{{ index + 1 }}</div>
+              <div class="middel">
+                <div class="top">
+                  <h2>{{ item.userName }}</h2>
+                  <!-- <span v-if="index === 0">网格长</span> -->
+                </div>
+                <p></p>
+              </div>
+              <i>{{ item.changeIntegral }}</i>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  import DonutChart from './components/DonutChart'
+  import PdGrid from './components/PdGrid'
+  import * as echarts from 'echarts'
+
+  export default {
+    name: 'AppPlyDv',
+    label: '彭浏阳大屏',
+
+    props: {
+      instance: Function,
+      dict: Object,
+    },
+
+    components: {
+      DonutChart,
+      PdGrid
+    },
+
+    data () {
+      return {
+        leftIndex: 0,
+        rightIndex: 0,
+        dlIndex: 0,
+        qlIndex: 0,
+        currGirdName: '',
+        girdInfo: {},
+        gridList: [],
+        userChatNumber: {},
+        residentInfo: {},
+        tagInfo: {},
+        groupNumber: {},
+        replyPercentage: {},
+        groupChatNumber: {},
+        dynamicList: [],
+        rankList: [],
+        xfInfo: {},
+        pointList: []
+      }
+    },
+
+    created () {
+      this.getInfo()
+      this.getGridInfo()
+    },
+
+    mounted () {
+      document.title = '彭浏阳大屏'
+      this.$nextTick(() => {
+        if (document.querySelector('.AiDvWrapper .viewPanel')) {
+          document.querySelector('.AiDvWrapper .viewPanel').style.backgroundImage = 'url(https://cdn.cunwuyun.cn/dvcp/dv/pddv/bg.png)'
+        }
+      })
+    },
+
+    methods: {
+      onNodeClick (e) {
+        this.getGridInfo(e)
+      },
+
+      getInfo () {
+        this.instance.post(`app/appintegraluser/userTotalIntegralSort`).then(res => {
+          if (res.code === 0) {
+            this.pointList = res.data
+          }
+        })
+        this.instance.post(`app/appintegraluser/userTotalIntegralSort`).then(res => {
+          if (res.code === 0) {
+            this.pointList = res.data
+          }
+        })
+        this.instance.post(`app/appmasssendingtask/statisticsEffectByPidu`).then(res => {
+          if (res.code === 0) {
+            this.xfInfo = res.data
+            this.initBarChart('.chart11', {
+              x: res.data.trend.map(v => v.ymd),
+              value: res.data.trend.map(v => v.createCount),
+              name: '宣发统计'
+            }, [
+              {offset: 0, color: 'rgba(25, 179, 209, 1)'},
+              {offset: 1, color: 'rgba(25, 179, 209, 0)'}
+            ])
+          }
+        })
+        this.instance.post(`/app/wxgroupstatistic/getCustommerNumber`).then(res => {
+          if (res.code === 0) {
+            this.residentInfo = res.data['居民统计']
+            this.initLineChart('.chart1', {
+              x: res.data['居民好友数'].map(v => v.month),
+              value: res.data['居民好友数'].map(v => v.totalNumber),
+              name: '居民好友'
+            })
+          }
+        })
+        this.instance.post(`/app/wxgroupstatistic/replyPercentage`).then(res => {
+          if (res.code === 0) {
+            this.replyPercentage = res.data
+          }
+        })
+        this.instance.post(`/app/appUserOperation/list?size=10000`).then(res => {
+          if (res.code === 0) {
+            this.dynamicList = res.data.records
+          }
+        })
+        this.instance.post(`/app/wxgroupstatistic/getGroupNumber`).then(res => {
+          if (res.code === 0) {
+            this.groupNumber = res.data['居民群统计']
+            this.initLineChart('.chart2', {
+              x: res.data['群成员数'].map(v => v.month),
+              value: res.data['群成员数'].map(v => v.totalNumber),
+              name: '居民数'
+            })
+          }
+        })
+        this.instance.post(`/app/wxgroupstatistic/getTagNumber`).then(res => {
+          if (res.code === 0) {
+            this.tagInfo = res.data
+          }
+        })
+        this.instance.post(`/app/wxgroupstatistic/getUserChatNumber`).then(res => {
+          if (res.code === 0) {
+            this.userChatNumber = res.data['单聊总和']
+            this.initBarChart('.chart4', {
+              x: res.data['条形统计'].map(v => v.dateDay),
+              value: res.data['条形统计'].map(v => v.messageCnt),
+              name: '单聊消息'
+            }, [
+              {offset: 0, color: 'rgba(66, 255, 254, 1)'},
+              {offset: 1, color: 'rgba(37, 255, 246, 0.2)'}
+            ])
+            this.initBarChart('.chart3', {
+              x: res.data['条形统计'].map(v => v.dateDay),
+              value: res.data['条形统计'].map(v => v.chatCnt),
+              name: '单聊会话'
+            }, [
+              {offset: 0, color: 'rgba(66, 187, 255, 1)'},
+              {offset: 1, color: 'rgba(37, 143, 255, 0.2)'}
+            ])
+          }
+        })
+        this.instance.post(`/app/wxgroupstatistic/getgroupChatNumber`).then(res => {
+          this.groupChatNumber = res.data['群聊总和']
+          if (res.code === 0) {
+            this.initBarChart('.chart5', {
+              x: res.data['条形统计'].map(v => v.dateDay),
+              value: res.data['条形统计'].map(v => v.chatHasMsg),
+              name: '活跃群聊'
+            }, [
+              {offset: 0, color: 'rgba(66, 255, 254, 1)'},
+              {offset: 1, color: 'rgba(66, 255, 254, 0.2)'}
+            ])
+            this.initBarChart('.chart6', {
+              x: res.data['条形统计'].map(v => v.dateDay),
+              value: res.data['条形统计'].map(v => v.memberHasMsg),
+              name: '活跃群成员'
+            }, [
+              {offset: 0, color: 'rgba(255, 190, 66, 1)'},
+              {offset: 1, color: 'rgba(255, 190, 66, 0.2)'}
+            ])
+            this.initBarChart('.chart7', {
+              x: res.data['条形统计'].map(v => v.dateDay),
+              value: res.data['条形统计'].map(v => v.msgTotal),
+              name: '群聊消息'
+            }, [
+              {offset: 0, color: 'rgba(66, 187, 255, 1)'},
+              {offset: 1, color: 'rgba(37, 143, 255, 0.2)'}
+            ])
+          }
+        })
+      },
+
+      getGridInfo (id) {
+        this.instance.post(`/app/appgirdinfo/piduGirdCount?girdId=${id || ''}`).then(res => {
+          if (res.code === 0) {
+            this.girdInfo = res.data
+          }
+        })
+        this.instance.post(`/app/wxcp/wxgroup/listBtGridId?size=1000&girdId=${id || ''}`).then(res => {
+          if (res.code === 0) {
+            this.gridList = res.data.records
+          }
+        })
+      },
+
+      initLineChart (el, data) {
+        var chartDom = document.querySelector(el)
+        var myChart = echarts.init(chartDom)
+        var option = {
+          xAxis: {
+            type: 'category',
+            data: data.x,
+            axisTick: {
+              show: false
+            },
+            axisLabel: {
+              textStyle: {
+                color: '#aeacaf'
+              }
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: '#fff'
+              }
+            },
+          },
+          yAxis: {
+            type: 'value',
+            nameGap: 23,
+            minInterval: 1,
+            splitLine: {lineStyle: {color: 'rgba(83, 165, 175, 0.6)', type: 'dashed'}},
+            axisLabel: {
+              textStyle: {
+                color: '#aeacaf'
+              }
+            },
+            axisPointer: {show: false}
+          },
+          color: [
+            {
+              type: 'linear',
+              x: 0,
+              x2: 0,
+              y: 0,
+              y2: 1,
+              colorStops: [
+                {offset: 0, color: 'rgba(47, 211, 241, 1)'},
+                {offset: 1, color: 'rgba(47, 211, 241, 0)'}
+              ]
+            }
+          ],
+          tooltip: {
+            trigger: 'axis',
+            axisPointer: {
+              type: 'shadow'
+            }
+          },
+          grid: {
+            top: '14%',
+            left: '1%',
+            right: '0%',
+            bottom: '0%',
+            containLabel: true
+          },
+          series: [
+            {
+              data: data.value,
+              type: 'line',
+              label: {
+                show: false,
+                position: 'top',
+                color: '#fff'
+              },
+              name: data.name,
+              areaStyle: {},
+              barWidth: 16,
+              barCategoryGap: 40,
+              itemStyle: {}
+            }
+          ]
+        }
+
+        option && myChart.setOption(option)
+      },
+
+      initBarChart (el, data, color) {
+        var chartDom = document.querySelector(el)
+        var myChart = echarts.init(chartDom)
+        var option
+
+        option = {
+          xAxis: {
+            type: 'category',
+            data: data.x,
+            axisTick: {
+              show: false
+            },
+            axisLabel: {
+              textStyle: {
+                color: '#aeacaf'
+              }
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: '#fff'
+              }
+            },
+          },
+          yAxis: {
+            type: 'value',
+            nameGap: 23,
+            minInterval: 1,
+            splitLine: {lineStyle: {color: 'rgba(83, 165, 175, 0.6)', type: 'dashed'}},
+            axisLabel: {
+              textStyle: {
+                color: '#aeacaf'
+              }
+            },
+            axisPointer: {show: false}
+          },
+          color: [
+            {
+              type: 'linear',
+              x: 0,
+              x2: 0,
+              y: 0,
+              y2: 1,
+              colorStops: color
+            }
+          ],
+          tooltip: {
+            trigger: 'axis',
+            axisPointer: {
+              type: 'shadow'
+            }
+          },
+          grid: {
+            top: '14%',
+            left: '1%',
+            right: '0%',
+            bottom: '0%',
+            containLabel: true
+          },
+          series: [
+            {
+              data: data.value,
+              name: data.name,
+              type: 'bar',
+              label: {
+                show: false,
+                position: 'top',
+                color: '#fff'
+              },
+              barWidth: 8,
+              barCategoryGap: 40,
+              itemStyle: {}
+            }
+          ]
+        }
+
+        option && myChart.setOption(option)
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .AppPdDv {
+    display: flex;
+    height: 100%;
+    padding-top: 24px;
+    background: url(https://cdn.cunwuyun.cn/dvcp/dv/pddv/bg.png);
+    background-size: 100% 100%;
+
+    ::-webkit-scrollbar {
+      width: 6px;
+    }
+
+    ::-webkit-scrollbar-track {
+      border-radius: 5px;
+      background: rgba(93, 163, 255, 0.1);
+    }
+
+    ::-webkit-scrollbar-thumb {
+      border-radius: 5px;
+      background: rgba(173, 208, 255, 0.5);
+    }
+
+    * {
+      box-sizing: border-box;
+    }
+
+    .DonutChart-wrapper {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      height: 84px;
+      margin-bottom: 20px;
+    }
+
+    .dl {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+
+      .item-top__item {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-direction: column;
+        width: 164px;
+        height: 52px;
+        line-height: 1;
+        cursor: pointer;
+        user-select: none;
+        background: url(https://cdn.cunwuyun.cn/dvcp/dv/pddv/dl3.png);
+        background-size: 100% 100%;
+
+        h2 {
+          margin-bottom: 4px;
+          color: #4488FB;
+          font-size: 12px;
+        }
+
+        &:nth-of-type(2) {
+          background: url(https://cdn.cunwuyun.cn/dvcp/dv/pddv/dl4.png);
+          background-size: 100% 100%;
+
+          h2 {
+            color: #2AB7D1;
+          }
+        }
+
+        p {
+          font-size: 14px;
+          color: #fff;
+          font-weight: bold;
+          font-style: oblique;
+        }
+
+        &.active {
+          &:nth-of-type(1) {
+            background: url(https://cdn.cunwuyun.cn/dvcp/dv/pddv/dl1.png);
+            background-size: 100% 100%;
+
+            h2 {
+              color: #fff;
+            }
+          }
+
+          &:nth-of-type(2) {
+            background: url(https://cdn.cunwuyun.cn/dvcp/dv/pddv/dl2.png);
+            background-size: 100% 100%;
+
+            h2 {
+              color: #fff;
+            }
+          }
+        }
+      }
+    }
+
+    .xf {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+
+      .item-top__item {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-direction: column;
+        width: 107px;
+        height: 52px;
+        line-height: 1;
+        cursor: pointer;
+        user-select: none;
+        background: url(https://cdn.cunwuyun.cn/dvcp/dv/pddv/ql4.png);
+        background-size: 100% 100%;
+
+        h2 {
+          margin-bottom: 8px;
+          color: #2AB7D1;
+          font-size: 12px;
+        }
+
+        p {
+          font-size: 14px;
+          color: #fff;
+          font-weight: bold;
+          font-style: oblique;
+        }
+      }
+    }
+
+    .ql {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+
+      .item-top__item {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-direction: column;
+        width: 107px;
+        height: 52px;
+        line-height: 1;
+        cursor: pointer;
+        user-select: none;
+        background: url(https://cdn.cunwuyun.cn/dvcp/dv/pddv/ql4.png);
+        background-size: 100% 100%;
+
+        h2 {
+          margin-bottom: 4px;
+          color: #2AB7D1;
+          font-size: 12px;
+        }
+
+        &:nth-of-type(2) {
+          background: url(https://cdn.cunwuyun.cn/dvcp/dv/pddv/ql5.png);
+          background-size: 100% 100%;
+
+          h2 {
+            color: #FFD458;
+          }
+        }
+
+        &:nth-of-type(3) {
+          background: url(https://cdn.cunwuyun.cn/dvcp/dv/pddv/ql6.png);
+          background-size: 100% 100%;
+
+          h2 {
+            color: #4488FB;
+          }
+        }
+
+        p {
+          font-size: 14px;
+          color: #fff;
+          font-weight: bold;
+          font-style: oblique;
+        }
+
+        &.active {
+          &:nth-of-type(1) {
+            background: url(https://cdn.cunwuyun.cn/dvcp/dv/pddv/ql1.png);
+            background-size: 100% 100%;
+
+            h2 {
+              color: #fff;
+            }
+          }
+
+          &:nth-of-type(2) {
+            background: url(https://cdn.cunwuyun.cn/dvcp/dv/pddv/ql2.png);
+            background-size: 100% 100%;
+
+            h2 {
+              color: #fff;
+            }
+          }
+
+          &:nth-of-type(3) {
+            background: url(https://cdn.cunwuyun.cn/dvcp/dv/pddv/ql3.png);
+            background-size: 100% 100%;
+
+            h2 {
+              color: #fff;
+            }
+          }
+        }
+      }
+    }
+
+    .appPdDv-title {
+      position: absolute;
+      top: 0;
+      left: 10px;
+      z-index: 1;
+      width: 146px;
+      height: 40px;
+      line-height: 40px;
+      padding-left: 10px;
+      font-family: YouSheBiaoTiHei;
+      color: #FFFFFF;
+      font-weight: bold;
+      transform: translateY(-50%);
+      background: url(https://cdn.cunwuyun.cn/dvcp/dv/pddv/b-title__bg.png);
+      background-size: 100% 100%;
+    }
+
+    .title {
+      width: 154px;
+      height: 42px;
+      margin-bottom: 8px;
+      padding: 4px 0 0 34px;
+      color: #fff;
+      font-size: 16px;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      background: url(https://cdn.cunwuyun.cn/dvcp/dv/pddv/title.png);
+      background-size: 100% 100%;
+    }
+
+    & > .left {
+      position: relative;
+      width: 360px;
+      height: 100%;
+      padding: 36px 12px 12px;
+      box-shadow: inset 0px 0px 5px 0px #D5E6FF;
+      border-radius: 8px;
+      border: 1px solid #030D1C;
+
+      .tab {
+        display: flex;
+        align-items: center;
+        height: 32px;
+        margin-bottom: 15px;
+        border: 1px solid #0E6EB5;
+
+        div {
+          flex: 1;
+          line-height: 32px;
+          text-align: center;
+          color: #fff;
+          font-size: 14px;
+          cursor: pointer;
+          user-select: none;
+
+          &.active {
+            background: #0F93B8;
+          }
+        }
+      }
+
+      .jmhy {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+
+        .item-top__item {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          flex-direction: column;
+          width: 107px;
+          height: 52px;
+          line-height: 1;
+          background: url(https://cdn.cunwuyun.cn/dvcp/dv/pddv/jm1.png);
+          background-size: 100% 100%;
+
+          h2 {
+            margin-bottom: 4px;
+            color: #2AB7D1;
+            font-size: 12px;
+          }
+
+          &:nth-of-type(2) {
+            background: url(https://cdn.cunwuyun.cn/dvcp/dv/pddv/jm2.png);
+            background-size: 100% 100%;
+
+            h2 {
+              color: #5ADA92;
+            }
+          }
+
+          &:nth-of-type(3) {
+            background: url(https://cdn.cunwuyun.cn/dvcp/dv/pddv/jm3.png);
+            background-size: 100% 100%;
+
+            h2 {
+              color: #FF5655;
+            }
+          }
+
+          .bottom {
+            display: flex;
+            align-items: center;
+
+            span {
+              margin-right: 2px;
+              font-size: 14px;
+              color: #fff;
+              font-weight: bold;
+              font-style: oblique;
+            }
+
+            img {
+              position: relative;
+              top: 2px;
+            }
+          }
+        }
+      }
+
+      .jmq {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 10px;
+
+        .item-top__item {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          flex-direction: column;
+          width: 78px;
+          height: 52px;
+          line-height: 1;
+          background: url(https://cdn.cunwuyun.cn/dvcp/dv/pddv/jmq1.png);
+          background-size: 100% 100%;
+
+          h2 {
+            margin-bottom: 4px;
+            color: #2AB7D1;
+            font-size: 12px;
+          }
+
+          &:nth-of-type(2) {
+            background: url(https://cdn.cunwuyun.cn/dvcp/dv/pddv/jmq2.png);
+            background-size: 100% 100%;
+
+            h2 {
+              color: #2AB7D1;
+            }
+          }
+
+          &:nth-of-type(3) {
+            background: url(https://cdn.cunwuyun.cn/dvcp/dv/pddv/jmq3.png);
+            background-size: 100% 100%;
+
+            h2 {
+              color: #5ADA92;
+            }
+          }
+
+          &:nth-of-type(4) {
+            background: url(https://cdn.cunwuyun.cn/dvcp/dv/pddv/jmq4.png);
+            background-size: 100% 100%;
+
+            h2 {
+              color: #FF5655;
+            }
+          }
+
+          .bottom {
+            display: flex;
+            align-items: center;
+
+            span {
+              margin-right: 2px;
+              font-size: 14px;
+              color: #fff;
+              font-weight: bold;
+              font-style: oblique;
+            }
+
+            img {
+              position: relative;
+              top: 2px;
+            }
+          }
+        }
+      }
+
+      .chart1 {
+        margin: 10px 0 18px;
+      }
+
+      .item-tags {
+        margin-top: 20px;
+
+        .item-bottom__item {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          width: 100%;
+          height: 36px;
+          padding: 0 20px 0 39px;
+          background: url(https://cdn.cunwuyun.cn/dvcp/dv/pddv/tag-title.png);
+          background-size: 100% 100%;
+
+          h2 {
+            color: #aeacaf;
+            font-size: 13px;
+          }
+
+          span {
+            color: #FFFFFF;
+            font-size: 16px;
+            font-weight: bold;
+          }
+        }
+      }
+    }
+
+    & > .middle {
+      display: flex;
+      flex-direction: column;
+      flex: 1;
+      height: 100%;
+      margin: 0 16px;
+
+      .top {
+        flex: 1;
+        margin-bottom: 29px;
+      }
+
+      .bottom {
+        width: 100%;
+        height: 160px;
+        padding: 20px 24px;
+        background: rgba(15,20,47,0.5000);
+        box-shadow: inset 0px 0px 24px 4px rgba(163,247,255,0.7000);
+        border-radius: 8px;
+
+        .bottom-title {
+          display: flex;
+          align-items: center;
+          margin-bottom: 10px;
+
+          h2 {
+            margin-left: 4px;
+            font-size: 16px;
+            font-family: MicrosoftYaHeiSemibold;
+            color: #FFFFFF;
+            text-shadow: 0px 0px 10px #1C2F92;
+          }
+        }
+
+        .bottom-list {
+          height: 80px;
+          overflow-y: auto;
+
+          .item {
+            display: flex;
+            align-items: center;
+            margin-bottom: 8px;
+            font-size: 14px;
+
+            &:last-child {
+              margin-bottom: 0;
+            }
+
+            i {
+              margin-right: 24px;
+              color: #aeacaf;
+              font-style: normal;
+              font-size: 14px;
+            }
+
+            span {
+              color: #FFD458;
+            }
+
+            em {
+              font-style: normal;
+              color: #2CF0F4;
+            }
+          }
+        }
+      }
+    }
+
+    & > .right {
+      position: relative;
+      width: 360px;
+      height: 100%;
+      padding: 36px 12px 12px;
+      box-shadow: inset 0px 0px 5px 0px #D5E6FF;
+      border-radius: 8px;
+      border: 1px solid #030D1C;
+
+      .top-wrapper {
+        margin-bottom: 23px;
+
+        .item-wrapper {
+          display: flex;
+          align-items: center;
+
+          .item-top__item {
+            display: flex;
+            align-items: center;
+            flex-direction: column;
+            justify-content: center;
+            flex: 1;
+            margin-right: 8px;
+            width: 78px;
+            height: 66px;
+            border-radius: 4px;
+            border: 1px solid #23A0AC;
+
+            h2 {
+              margin-bottom: 4px;
+              color: #fff;
+              font-size: 20px;
+            }
+
+            p {
+              color: #2AF0F8;
+              font-size: 12px;
+            }
+
+            &:last-child {
+              margin-right: 0;
+            }
+          }
+        }
+      }
+
+      .middle-wrapper {
+        margin-bottom: 23px;
+
+        .item-table {
+          .item-table__header {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            height: 40px;
+            padding: 0 24px;
+            color: #82C5FF;
+            font-size: 14px;
+            background: rgba(35,160,172,0.2000);
+          }
+
+          .item-table__body {
+            height: 280px;
+            overflow-y: overlay;
+
+            .item-table__item {
+              display: flex;
+              align-items: center;
+              justify-content: space-between;
+              height: 40px;
+              padding: 0 24px;
+              color: #fff;
+              font-size: 14px;
+              background: rgba(35,160,172,0.2000);
+
+              &:nth-of-type(2n - 1) {
+                background: transparent;
+              }
+
+              span {
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+              }
+            }
+          }
+        }
+      }
+
+      .bottom-wrapper {
+        .tab {
+          display: flex;
+          align-items: center;
+          height: 32px;
+          margin-bottom: 15px;
+          border: 1px solid #0E6EB5;
+
+          div {
+            flex: 1;
+            line-height: 32px;
+            text-align: center;
+            color: #fff;
+            font-size: 14px;
+            cursor: pointer;
+            user-select: none;
+
+            &.active {
+              background: #0F93B8;
+            }
+          }
+        }
+
+        .tab-content {
+          height: 230px;
+          overflow-y: auto;
+          .tab-item {
+            display: flex;
+            align-items: center;
+            margin-bottom: 8px;
+
+            &:last-child {
+              margin-bottom: 0;
+            }
+
+            .left {
+              width: 22px;
+              height: 24px;
+              line-height: 24px;
+              text-align: center;
+              color: #fff;
+              font-size: 14px;
+              background: url(https://cdn.cunwuyun.cn/dvcp/dv/pddv/right-icon3.png);
+              background-size: 100% 100%;
+
+              &.left0 {
+                background: url(https://cdn.cunwuyun.cn/dvcp/dv/pddv/right-icon1.png);
+                background-size: 100% 100%;
+              }
+
+              &.left1 {
+                background: url(https://cdn.cunwuyun.cn/dvcp/dv/pddv/right-icon2.png);
+                background-size: 100% 100%;
+              }
+            }
+
+            i {
+              position: relative;
+              color: #fff;
+              font-size: 12px;
+              font-style: normal;
+              transform: translateY(50%);
+            }
+
+            .middel {
+              width: 250px;
+              margin: 0 8px;
+
+              p {
+                width: 100%;
+                height: 8px;
+                background: linear-gradient(270deg, #51BF34 0%, #257718 100%);
+                border: 1px solid;
+                border-image: linear-gradient(270deg, rgba(96, 255, 99, 1), rgba(13, 156, 17, 1)) 1 1;
+              }
+
+              .top {
+                display: flex;
+                align-items: center;
+                margin-bottom: 4px;
+
+                h2 {
+                  margin-right: 4px;
+                  color: #FFFFFF;
+                  font-size: 14px;
+                }
+
+                span {
+                  width: 48px;
+                  height: 20px;
+                  line-height: 20px;
+                  text-align: center;
+                  color: #2AF0F8;
+                  font-size: 12px;
+                  background: linear-gradient(180deg, rgba(69,210,218,0.2500) 0%, rgba(69,210,218,0.1000) 100%);
+                  border: 1px solid;
+                  border-image: linear-gradient(180deg, rgba(5, 185, 203, 1), rgba(73, 214, 207, 1)) 1 1;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+</style>

From a50e13a8df5ea5abfa7055c603b26ed39aca10dd Mon Sep 17 00:00:00 2001
From: yanran200730 <yanran200830@163.com>
Date: Fri, 23 Sep 2022 11:12:26 +0800
Subject: [PATCH 4/4] =?UTF-8?q?=E5=A4=A7=E5=B1=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/bigscreen/dv/AppPlyDv.vue            |   6 +-
 .../AppCheckpointManage.vue                   |  65 +++++++
 .../AppCheckpointManage/components/Add.vue    |  92 +++++++++
 .../AppCheckpointManage/components/List.vue   | 181 ++++++++++++++++++
 .../apps/AppRiskArea/components/Add.vue       |  10 +-
 .../apps/AppRiskArea/components/List.vue      |   5 +-
 6 files changed, 351 insertions(+), 8 deletions(-)
 create mode 100644 project/pingchang/apps/AppCheckpointManage/AppCheckpointManage.vue
 create mode 100644 project/pingchang/apps/AppCheckpointManage/components/Add.vue
 create mode 100644 project/pingchang/apps/AppCheckpointManage/components/List.vue

diff --git a/packages/bigscreen/dv/AppPlyDv.vue b/packages/bigscreen/dv/AppPlyDv.vue
index bb82da97..1963dbf4 100644
--- a/packages/bigscreen/dv/AppPlyDv.vue
+++ b/packages/bigscreen/dv/AppPlyDv.vue
@@ -32,7 +32,7 @@
                 </div>
               </div>
             </div>
-            <div class="chart1" style="width: 100%; height: 160px;"></div>
+            <div class="chart1" style="width: 100%; height: 150px;"></div>
           </div>
           <div class="item">
             <div class="title">居民群统计</div>
@@ -65,7 +65,7 @@
                 </div>
               </div>
             </div>
-            <div class="chart2" style="width: 100%; height: 160px;"></div>
+            <div class="chart2" style="width: 100%; height: 150px;"></div>
           </div>
           <div class="item item-tags">
             <div class="title">宣发统计</div>
@@ -83,7 +83,7 @@
                 <p>{{ xfInfo.receiveCount || 0 }}</p>
               </div>
             </div>
-            <div class="chart11" style="width: 336px; margin-top: 10px; height: 160px;"></div>
+            <div class="chart11" style="width: 336px; margin-top: 10px; height: 150px;"></div>
           </div>
         </div>
         <div class="tab-content__item" v-show="leftIndex === 1">
diff --git a/project/pingchang/apps/AppCheckpointManage/AppCheckpointManage.vue b/project/pingchang/apps/AppCheckpointManage/AppCheckpointManage.vue
new file mode 100644
index 00000000..2a6099f0
--- /dev/null
+++ b/project/pingchang/apps/AppCheckpointManage/AppCheckpointManage.vue
@@ -0,0 +1,65 @@
+<template>
+  <div class="doc-circulation ailist-wrapper">
+    <keep-alive :include="['List']">
+      <component ref="component" :moduleName="moduleName" :moduleId="moduleId" :is="component" @change="onChange" :params="params" :instance="instance" :dict="dict"></component>
+    </keep-alive>
+  </div>
+</template>
+
+<script>
+  import List from './components/List'
+  import Add from './components/Add'
+
+  export default {
+    name: 'AppCheckpointManage',
+    label: '卡口管理',
+
+    props: {
+      instance: Function,
+      dict: Object
+    },
+
+    data () {
+      return {
+        component: 'List',
+        params: {},
+        moduleId: '',
+        include: [],
+        moduleName: ''
+      }
+    },
+
+    components: {
+      Add,
+      List
+    },
+
+    methods: {
+      onChange (data) {
+        if (data.type === 'Add') {
+          this.component = 'Add'
+          this.params = data.params
+        }
+
+        if (data.type === 'list') {
+          this.component = 'List'
+          this.params = data.params
+
+          this.$nextTick(() => {
+            if (data.isRefresh) {
+              this.$refs.component.getList()
+            }
+          })
+        }
+      }
+    }
+  }
+</script>
+
+<style lang="scss">
+  .doc-circulation {
+    height: 100%;
+    background: #F3F6F9;
+    overflow: auto;
+  }
+</style>
diff --git a/project/pingchang/apps/AppCheckpointManage/components/Add.vue b/project/pingchang/apps/AppCheckpointManage/components/Add.vue
new file mode 100644
index 00000000..c4dd5a32
--- /dev/null
+++ b/project/pingchang/apps/AppCheckpointManage/components/Add.vue
@@ -0,0 +1,92 @@
+<template>
+  <ai-detail class="content-add">
+    <template slot="title">
+      <ai-title :title="params.id ? '编辑卡口' : '添加卡口'" isShowBack isShowBottomBorder @onBackClick="cancel(false)">
+      </ai-title>
+    </template>
+    <template slot="content">
+      <ai-card title="基本信息">
+        <template #content>
+          <el-form class="ai-form" :model="form" label-width="120px" ref="form">
+            <el-form-item prop="name" style="width: 100%;" label="卡口名称" :rules="[{required: true, message: '请输入卡口名称', trigger: 'blur'}]">
+              <el-input size="small" v-model="form.name" placeholder="请输入卡口名称"></el-input>
+            </el-form-item>
+            <el-form-item prop="remark" style="width: 100%;" label="备注" :rules="[{required: true, message: '请输入备注', trigger: 'blur'}]">
+              <el-input size="small" type="textarea" :rows="5" placeholder="请输入备注" v-model="form.remark"></el-input>
+            </el-form-item>
+          </el-form>
+        </template>
+      </ai-card>
+    </template>
+    <template #footer>
+      <el-button @click="cancel">取消</el-button>
+      <el-button type="primary" @click="confirm">提交</el-button>
+    </template>
+  </ai-detail>
+</template>
+
+<script>
+  export default {
+    name: 'Add',
+
+    props: {
+      instance: Function,
+      dict: Object,
+      params: Object
+    },
+    data () {
+      return {
+        info: {},
+        form: {
+          name: '',
+          remark: ''
+        },
+        id: ''
+      }
+    },
+
+    created () {
+      if (this.params && this.params.id) {
+        this.id = this.params.id
+        this.getInfo(this.params.id)
+      }
+    },
+
+    methods: {
+      getInfo (id) {
+        this.instance.post(`/app/appepidemicpreventiongateway/queryDetailById?id=${id}`).then(res => {
+          if (res.code === 0) {
+            this.form = res.data
+          }
+        })
+      },
+
+      confirm () {
+        this.$refs.form.validate((valid) => {
+          if (valid) {
+            this.instance.post(`/app/appepidemicpreventiongateway/addOrUpdate`, {
+              ...this.form
+            }).then(res => {
+              if (res.code == 0) {
+                this.$message.success('提交成功')
+                setTimeout(() => {
+                  this.cancel(true)
+                }, 600)
+              }
+            })
+          }
+        })
+      },
+
+      cancel (isRefresh) {
+        this.$emit('change', {
+          type: 'list',
+          isRefresh: !!isRefresh
+        })
+      }
+    }
+  }
+</script>
+
+<style scoped lang="scss">
+</style>
diff --git a/project/pingchang/apps/AppCheckpointManage/components/List.vue b/project/pingchang/apps/AppCheckpointManage/components/List.vue
new file mode 100644
index 00000000..c4cf7388
--- /dev/null
+++ b/project/pingchang/apps/AppCheckpointManage/components/List.vue
@@ -0,0 +1,181 @@
+<template>
+  <ai-list class="notice">
+    <template slot="title">
+      <ai-title title="卡口管理" isShowBottomBorder></ai-title>
+    </template>
+    <template slot="content">
+      <ai-search-bar class="search-bar">
+        <template #left>
+          <el-button size="small" type="primary" icon="iconfont iconAdd" @click="toAdd('')">添加</el-button>
+        </template>
+        <template #right>
+          <el-input
+            v-model="search.name"
+            class="search-input"
+            size="small"
+            v-throttle="() => {search.current = 1, getList()}"
+            placeholder="卡口名称"
+            clearable
+            @clear="search.current = 1, search.name = '', getList()"
+            suffix-icon="iconfont iconSearch">
+          </el-input>
+        </template>
+      </ai-search-bar>
+      <ai-table
+        :tableData="tableData"
+        :col-configs="colConfigs"
+        :total="total"
+        style="margin-top: 6px;"
+        v-loading="isLoading"
+        :current.sync="search.current"
+        :size.sync="search.size"
+        @getList="getList">
+        <el-table-column slot="qrcode" width="200px" label="二维码" align="center">
+          <template slot-scope="{ row }">
+            <div class="qrcode">
+              <el-button type="text" @click="qrcode(row.qrCode, row.id)">{{ row.qrCode ? '预览' : '生成' }}</el-button>
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column slot="options" width="180px" fixed="right" label="操作" align="center">
+          <template slot-scope="{ row }">
+            <div class="table-options">
+              <el-button type="text" @click="downloadImg(row.qrCode)">下载二维码</el-button>
+              <el-button type="text" @click="toAdd(row.id)">编辑</el-button>
+              <el-button type="text" @click="remove(row.id)">删除</el-button>
+            </div>
+          </template>
+        </el-table-column>
+      </ai-table>
+      <div class="qrCode" v-viewer="{movable: true}" v-show="false">
+        <img :src="img">
+      </div>
+    </template>
+  </ai-list>
+</template>
+
+<script>
+  import Viewer from 'v-viewer'
+  import Vue from 'vue'
+  Vue.use(Viewer)
+  export default {
+    name: 'List',
+
+    props: {
+      instance: Function,
+      dict: Object
+    },
+
+    data() {
+      return {
+        search: {
+          current: 1,
+          size: 10,
+          name: ''
+        },
+        img: '',
+        isLoading: false,
+        total: 10,
+        colConfigs: [
+          { type: 'index',  label: '序号', align: 'left' },
+          { prop: 'name',  label: '卡口名称', align: 'center' },
+          { prop: 'remark', label: '备注', align: 'center' },
+          { slot: 'qrcode', label: '二维码', align: 'center' },
+          { slot: 'options', label: '操作', align: 'center' }
+        ],
+        tableData: []
+      }
+    },
+
+    created() {
+      this.getList()
+    },
+
+    methods: {
+      getList() {
+        this.instance.post(`/app/appepidemicpreventiongateway/list`, null, {
+          params: {
+            ...this.search
+          }
+        }).then(res => {
+          if (res.code == 0) {
+            this.tableData = res.data.records
+            this.total = res.data.total
+          }
+        })
+      },
+
+      downloadImg (url) {
+        if (!url) {
+          return this.$message.error('请先生成二维码')
+        }
+
+        this.isLoading = true
+        let image = new Image()
+        image.setAttribute('crossOrigin', 'anonymous')
+        image.onload = function () {
+          let canvas = document.createElement('canvas')
+          canvas.width = image.width
+          canvas.height = image.height
+          let context = canvas.getContext('2d')
+          context.drawImage(image, 0, 0, image.width, image.height)
+          let url = canvas.toDataURL("image/png")
+          let a = document.createElement("a")
+          let event = new MouseEvent("click")
+          a.download = '二维码'
+          a.href = url
+          a.dispatchEvent(event)
+        }
+        image.src = url
+        this.isLoading = false
+      },
+
+      qrcode (qrcode, id) {
+        if (!qrcode) {
+          this.isLoading = true
+          this.instance.post(`/app/appepidemicpreventiongateway/createQRCode?id=${id}&width=400&height=400`).then(res => {
+            if (res.code == 0) {
+              this.$message.success('二维码生成成功！')
+              this.getList()
+            }
+            this.isLoading = false
+          })
+        } else {
+          this.img = qrcode
+
+          this.$nextTick(() => {
+            setTimeout(() => {
+              const viewer = this.$el.querySelector('.qrCode').$viewer
+              viewer.view()
+            }, 600)
+          })
+        }
+      },
+
+      remove(id) {
+        this.$confirm('确定删除该数据？').then(() => {
+          this.instance.post(`/app/appepidemicpreventiongateway/delete?ids=${id}`).then(res => {
+            if (res.code == 0) {
+              this.$message.success('删除成功！')
+              this.getList()
+            }
+          })
+        })
+      },
+
+      toAdd(id) {
+        this.$emit('change', {
+          type: 'Add',
+          params: {
+            id: id || ''
+          }
+        })
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .notice {
+  }
+</style>
diff --git a/project/pingchang/apps/AppRiskArea/components/Add.vue b/project/pingchang/apps/AppRiskArea/components/Add.vue
index cefc6124..0bfa4934 100644
--- a/project/pingchang/apps/AppRiskArea/components/Add.vue
+++ b/project/pingchang/apps/AppRiskArea/components/Add.vue
@@ -11,6 +11,9 @@
             <el-form-item prop="areaId" style="width: 100%;" label="选择地区" :rules="[{required: true, message: '请选择地区', trigger: 'change'}]">
               <ai-area-select clearable @fullname="v => form.areaName = v" always-show :instance="instance" v-model="form.areaId"></ai-area-select>
             </el-form-item>
+            <el-form-item prop="address" style="width: 100%;" label="详细地址">
+              <el-input size="small" type="textarea" :rows="5" placeholder="请输入详细地址" v-model="form.address"></el-input>
+            </el-form-item>
             <el-form-item label="风险等级" style="width: 100%;" prop="level" :rules="[{required: true, message: '请选择风险等级', trigger: 'change'}]">
               <ai-select
                 v-model="form.level"
@@ -47,7 +50,8 @@
         form: {
           level: '',
           areaId: '',
-          areaName: ''
+          areaName: '',
+          address: ''
         },
         id: ''
       }
@@ -68,7 +72,7 @@
 
     methods: {
       getInfo (id) {
-        this.instance.post(`/app/appepidemicdangerousarea/queryDetailById?id=${id}`).then(res => {
+        this.instance.post(`/app/appepidemicpreventionriskarea/queryDetailById?id=${id}`).then(res => {
           if (res.code === 0) {
             this.form = res.data
           }
@@ -78,7 +82,7 @@
       confirm () {
         this.$refs.form.validate((valid) => {
           if (valid) {
-            this.instance.post(`/app/appepidemicdangerousarea/addOrUpdate`, {
+            this.instance.post(`/app/appepidemicpreventionriskarea/addOrUpdate`, {
               ...this.form
             }).then(res => {
               if (res.code == 0) {
diff --git a/project/pingchang/apps/AppRiskArea/components/List.vue b/project/pingchang/apps/AppRiskArea/components/List.vue
index 5e1fffd1..f32acfe2 100644
--- a/project/pingchang/apps/AppRiskArea/components/List.vue
+++ b/project/pingchang/apps/AppRiskArea/components/List.vue
@@ -77,6 +77,7 @@
           { prop: 'district', label: '区级', align: 'center' },
           { prop: 'town', label: '镇级', align: 'center' },
           { prop: 'village', label: '村级', align: 'center' },
+          { prop: 'address', label: '详细地址', align: 'center' },
           { prop: 'level', label: '等级', align: 'center', formart: v => this.dict.getLabel('epidemicDangerousAreaLevel', v) },
           { prop: 'createTime', label: '设置时间', align: 'center' },
           { prop: 'createUserName', label: '添加人', align: 'center' },
@@ -100,7 +101,7 @@
 
     methods: {
       getList() {
-        this.instance.post(`/app/appepidemicdangerousarea/list`, null, {
+        this.instance.post(`/app/appepidemicpreventionriskarea/list`, null, {
           params: {
             ...this.search
           }
@@ -114,7 +115,7 @@
 
       remove(id) {
         this.$confirm('确定删除该数据？').then(() => {
-          this.instance.post(`/app/appepidemicdangerousarea/delete?ids=${id}`).then(res => {
+          this.instance.post(`/app/appepidemicpreventionriskarea/delete?ids=${id}`).then(res => {
             if (res.code == 0) {
               this.$message.success('删除成功！')
               this.getList()