Merge remote-tracking branch 'origin/build' into build

packages/bigscreen/dv/AppQxnDv.vue

@@ -1,7 +1,8 @@
 <template>
   <div class="AppQxnDv">
     <div class="left">
-      <AiDvPanel style="width: 100%" border="border6" title="单位列表">
+      <AiDvPanel style="width: 100%; height: auto;" border="border6" title="单位列表">
+      </AiDvPanel>
       <div class="left-list">
         <div class="left-item" v-for="(item, index) in 16" :key="index">
           <i>{{ index + 1 }}</i>
@@ -19,7 +20,6 @@
           </div>
         </div>
       </div>
-      </AiDvPanel>
     </div>
     <div class="right">
       <div class="right-left">
@@ -82,7 +82,7 @@
                 <h2>单位成员关系人数</h2>
               </div>
               <ai-echart-v2
-                style="height: 220px; width: 100%;"
+                style="height: 236px; width: 100%;"
                 :ref="'chart2'"
                 :data="lineData1"
                 :ops="barChart8">
@@ -135,7 +135,7 @@
               <h2>近期成员使用分布</h2>
             </div>
             <ai-echart-v2
-              style="height: 220px; width: 100%;"
+              style="height: 236px; width: 100%;"
               :ref="'chart'"
               :data="lineData"
               :ops="lineChart1">
@@ -544,9 +544,6 @@
                   }
                 }
               },
-              startAngle: 90,
-              minAngle: 5,
-              avoidLabelOverlap: true,
               label: {
                 show: true,
                 normal: {
@@ -555,13 +552,6 @@
                     fontSize: 16
                   }
                 }
-              },
-              emphasis: {
-                itemStyle: {
-                  shadowBlur: 10,
-                  shadowOffsetX: 0,
-                  shadowColor: 'rgba(0, 0, 0, 0.5)'
-                }
               }
             }
           ]
@@ -842,6 +832,7 @@
       .left-list {
         flex: 1;
         overflow-y: auto;
+        width: 100%;
 
         .left-item {
           position: relative;

packages/bigscreen/dv/AppQxnEventDv.vue

@@ -1,7 +1,8 @@
 <template>
   <div class="AppQxnDv">
     <div class="left">
-      <AiDvPanel style="width: 100%" border="border6" title="单位列表">
+      <AiDvPanel style="width: 100%; height: auto;" border="border6" title="单位列表">
+      </AiDvPanel>
       <div class="left-list">
         <div class="left-item" v-for="(item, index) in 16" :key="index">
           <i>{{ index + 1 }}</i>
@@ -19,11 +20,10 @@
           </div>
         </div>
       </div>
-      </AiDvPanel>
     </div>
     <div class="right">
       <div class="right-left">
-        <AiDvPanel style="width: 100%" border="border6" title="微警务群概况">
+        <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>
@@ -33,72 +33,78 @@
               </div>
             </div>
           </div>
-          <div class="wrapper">
+          <div class="right-left__top">
-            <div class="AppQxnDv-title">
+            <div class="wrapper">
-              <h2>增长情况</h2>
+              <div class="AppQxnDv-title">
+                <h2>上报来源分布</h2>
+              </div>
+              <ai-echart-v2
+                style="height: 230px; width: 100%;"
+                :ref="'chart2'"
+                :data="lineData1"
+                :ops="lineChart1">
+              </ai-echart-v2>
+            </div>
+            <div class="wrapper">
+              <div class="AppQxnDv-title">
+                <h2>事件办理情況</h2>
+              </div>
+              <ai-echart-v2
+                style="height: 230px; width: 100%;"
+                :ref="'chart2'"
+                :data="lineData1"
+                :ops="lineChart1">
+              </ai-echart-v2>
             </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>
+                  <h2>事件受理率</h2>
                 </div>
                 <DoughnutChart :ratio="60"></DoughnutChart>
               </div>
               <div class="wrapper">
                 <div class="AppQxnDv-title">
-                  <h2>群标签化率</h2>
+                  <h2>事件办结率</h2>
                 </div>
                 <DoughnutChart :ratio="95"></DoughnutChart>
               </div>
             </div>
             <div class="right wrapper">
               <div class="AppQxnDv-title">
-                <h2>群标签情况</h2>
+                <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
+              <AiDvTable
-                style="height: 230px; width: 245px;"
+                style="margin-top: 16px; height: 220px;"
-                :ref="'chart2'"
+                stripe="1"
-                :data="lineData1"
+                :headerStyle="{
-                :ops="barChart8">
+                  color: '#02FEFF',
-              </ai-echart-v2>
+                  fontSize: '12px',
+                  fontWeight: '600',
+                  backgroundColor: 'rgba(33, 180, 253, 0.1)'
+                }"
+                :config="blConfig"
+                :data="bbTableData">
+              </AiDvTable>
             </div>
           </div>
           <div class="right-left__bottom">
-            <div class="wrapper">
+            <div class="AppQxnDv-title">
-              <div class="AppQxnDv-title">
+              <h2>增长情况</h2>
-                <h2>单位成员关系人数</h2>
-              </div>
-              <ai-echart-v2
-                style="height: 220px; width: 100%;"
-                :ref="'chart2'"
-                :data="lineData1"
-                :ops="barChart8">
-              </ai-echart-v2>
-            </div>
-            <div class="wrapper">
-              <div class="AppQxnDv-title">
-                <h2>群人数规模分布</h2>
-              </div>
-              <ai-echart-v2
-                style="height: 180px; width: 100%; margin-top: 20px;"
-                :ref="'chart2'"
-                :data="lineData1"
-                :ops="pieChart">
-              </ai-echart-v2>
             </div>
+            <ai-echart-v2
+              style="height: 236px; margin-top: 10px; width: 100%;"
+              :ref="'chart'"
+              :data="chart3Data"
+              :ops="chart3Config">
+            </ai-echart-v2>
           </div>
         </AiDvPanel>
       </div>
@@ -116,71 +122,29 @@
           <div class="wrapper">
             <DvMap style="width: 100%; height: 356px;"></DvMap>
           </div>
-          <div class="right-middle__middle">
-            <div class="wrapper">
-              <div class="AppQxnDv-title">
-                <h2>成员激活</h2>
-              </div>
-              <DoughnutChart :ratio="95"></DoughnutChart>
-            </div>
-            <div class="wrapper">
-              <div class="AppQxnDv-title">
-                <h2>日均活跃率</h2>
-              </div>
-              <DoughnutChart :ratio="95"></DoughnutChart>
-            </div>
-          </div>
           <div class="right-middle__bottom">
             <div class="AppQxnDv-title">
               <h2>近期成员使用分布</h2>
             </div>
-            <ai-echart-v2
+            <AiDvTable
-              style="height: 220px; width: 100%;"
+              style="margin-top: 16px; height: 430px;"
-              :ref="'chart'"
+              :heigth="'100%'"
-              :data="lineData"
+              stripe="1"
-              :ops="lineChart1">
+              :headerStyle="{
-            </ai-echart-v2>
+                color: '#02FEFF',
+                fontSize: '12px',
+                fontWeight: '600',
+                backgroundColor: 'rgba(33, 180, 253, 0.1)'
+              }"
+              isShowIndex="1"
+              :config="tableConfig"
+              :data="tableData">
+            </AiDvTable>
           </div>
         </AiDvPanel>
       </div>
       <div class="right-right">
-        <AiDvPanel style="height: auto;" border="border6" title="微警务群概况">
+        <AiDvPanel class="bottom" style="" border="border6" title="办理排行">
-          <div class="right-left__total AppQxnDv-total">
-            <div class="item" v-for="(item, index) in 4" :key="index">
-              <h2>群动态概况</h2>
-              <div class="item-bottom">
-                <span>726,079</span>
-                <i>人</i>
-              </div>
-            </div>
-          </div>
-          <div class="right-right__top">
-            <div class="wrapper">
-              <div class="AppQxnDv-title">
-                <h2>群活跃率(7日）</h2>
-              </div>
-              <DoughnutChart :ratio="95"></DoughnutChart>
-            </div>
-            <div class="wrapper">
-              <div class="AppQxnDv-title">
-                <h2>人员活跃(7日）</h2>
-              </div>
-              <DoughnutChart :ratio="95"></DoughnutChart>
-            </div>
-          </div>
-          <div class="right-left__middle">
-            <div class="AppQxnDv-title">
-              <h2>各单位群主及群分布</h2>
-            </div>
-            <ai-echart-v2
-              style="height: 210px; width: 100%;"
-              :ref="'chart5'"
-              :data="barData"
-              :ops="barChart">
-            </ai-echart-v2>
-          </div>
-        </AiDvPanel>
-        <AiDvPanel class="bottom" style="" border="border6" title="群动态多维度排行">
           <AiDvTable
             :heigth="'100%'"
             stripe="1"
@@ -215,28 +179,6 @@
     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月",
@@ -270,20 +212,7 @@
             v10: '宗梦瑞'
           },
           {
-            name: '单位',
+            name: '己办结',
-            v1: '宗梦瑞',
-            v2: '宗梦瑞',
-            v3: '宗梦瑞',
-            v4: '宗梦瑞',
-            v5: '宗梦瑞',
-            v6: '宗梦瑞',
-            v7: '宗梦瑞',
-            v8: '宗梦瑞',
-            v9: '宗梦瑞',
-            v10: '宗梦瑞'
-          },
-          {
-            name: '群数量',
             v1: '12',
             v2: '12',
             v3: '123',
@@ -296,7 +225,7 @@
             v10: '1234'
           },
           {
-            name: '群人员',
+            name: '办理中',
             v1: '12',
             v2: '12',
             v3: '123',
@@ -309,7 +238,7 @@
             v10: '1234'
           },
           {
-            name: '新增群人员',
+            name: '上报数',
             v1: '12',
             v2: '12',
             v3: '123',
@@ -322,33 +251,7 @@
             v10: '1234'
           },
           {
-            name: '有消息的群',
+            name: '联系TA',
-            v1: '12',
-            v2: '12',
-            v3: '123',
-            v4: '123',
-            v5: '123',
-            v6: '123',
-            v7: '2',
-            v8: '123',
-            v9: '123',
-            v10: '1234'
-          },
-          {
-            name: '群聊人数',
-            v1: '12',
-            v2: '12',
-            v3: '123',
-            v4: '123',
-            v5: '123',
-            v6: '123',
-            v7: '2',
-            v8: '123',
-            v9: '123',
-            v10: '1234'
-          },
-          {
-            name: '群消息总数',
             v1: '12',
             v2: '12',
             v3: '123',
@@ -375,7 +278,7 @@
             type: "category",
             axisTick: {show: false},
             axisLine: {show: false},
-            axisLabel: {color: '#8FABBF', fontSize: 12},
+            axisLabel: {color: '#8FABBF', fontSize: 12}
           },
           yAxis: {
             nameGap: 23,
@@ -407,45 +310,109 @@
             }
           })
         },
-        barChart8: {
+        bbTableData: [
-          legend: {show: false},
+          {
-          tooltip: {
+            name: '时间',
-            trigger: 'axis',
+            v: '04/18',
-            backgroundColor: 'rgba(0, 102, 154, 0.65)',
+            v1: '04/18',
-            borderColor: 'rgba(0, 102, 154, 0.65)',
+            v2: '04/18',
-            textStyle: { color: '#fff' },
+            v3: '04/18',
-            axisPointer: { type: 'cross' }
+            v4: '04/18',
+            v5: '04/18'
           },
-          yAxis: {
+          {
-            type: 'category',
+            name: '姓名',
-            axisLabel: {color: '#8FABBF', fontSize: 12},
+            v: '宗梦瑞',
-            axisTick: {show: false},
+            v1: '宗梦瑞',
-            axisLine: {show: false},
+            v2: '宗梦瑞',
+            v3: '宗梦瑞',
+            v4: '宗梦瑞',
+            v5: '宗梦瑞'
           },
-          xAxis: {
+          {
-            nameGap: 23, minInterval: 1,
+            name: '事件名称',
-            splitLine: {lineStyle: {color: 'rgba(108, 128, 151, 0.3)', type: 'dashed'}},
+            v: '户籍办理',
-            axisLabel: {color: '#8FABBF', fontSize: 12},
+            v1: '户籍办理',
-          },
+            v2: '户籍办理',
-          daemon: {
+            v3: '户籍办理',
-            type: 'bar', barWidth: 10, barGap: '40%',
+            v4: '户籍办理',
-            label: {show: true, position: 'insideRight', color: '#fff', fontSize: 14},
+            v5: '户籍办理'
-            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: {
+        blConfig: [{
+          color: '#d0e1e8',
+          align: '',
+          width: '',
+          fontSize: '14px',
+          flex: ''
+        }, {
+          color: '#d0e1e8',
+          align: 'left',
+          width: '',
+          fontSize: '14px',
+          flex: ''
+        }, {
+            color: '#d0e1e8',
+            align: 'right',
+            fontSize: '14px',
+            flex: ''
+          }
+        ],
+        chart3Data: [
+          {
+            "name": "人员聚集",
+            "已办理": 223,
+            "待处理": 23,
+            "处理中": 223,
+            "已拒绝": 23
+          },
+          {
+            "name": "非法饲养动物",
+            "已办理": 223,
+            "待处理": 23,
+            "处理中": 223,
+            "已拒绝": 23
+          },
+          {
+            "name": "婚姻家庭纠纷",
+            "已办理": 223,
+            "待处理": 23,
+            "处理中": 223,
+            "已拒绝": 23
+          },
+          {
+            "name": "道路安全",
+            "已办理": 223,
+            "待处理": 23,
+            "处理中": 223,
+            "已拒绝": 23
+          },
+          {
+            "name": "其他",
+            "已办理": 223,
+            "待处理": 23,
+            "处理中": 223,
+            "已拒绝": 23
+          }
+        ] ,
+        chart3Config: {
           xAxis: {
             type: "category",
-            axisLabel: {color: '#8FABBF', fontSize: 12},
+            axisTick: {show: false},
+            axisLine: {show: false},
+            axisLabel: {color: '#8FABBF', fontSize: 12}
+          },
+          grid: {
+            left: '0%',
+            right: '0%',
+            bottom: '0%',
+            top: '40px',
+            containLabel: true
+          },
+          legend: {
+            textStyle: {
+              color: "#fff"
+            }
           },
           yAxis: {
             nameGap: 23,
@@ -478,8 +445,30 @@
               y: 0,
               y2: 1,
               colorStops: [
-                { offset: 0, color: 'rgba(219, 179, 110, 0.1)' },
+                { offset: 0, color: 'rgba(44, 151, 232, 1)' },
-                { offset: 1, color: 'rgba(219, 179, 110, 1)' }
+                { offset: 1, color: 'rgba(21, 154, 255, 0)' }
+              ]
+            },
+            {
+              type: 'linear',
+              x: 0,
+              x2: 0,
+              y: 0,
+              y2: 1,
+              colorStops: [
+                { offset: 0, color: 'rgba(191, 234, 255, 1)' },
+                { offset: 1, color: 'rgba(191, 234, 255, 0.1)' }
+              ]
+            },
+            {
+              type: 'linear',
+              x: 0,
+              x2: 0,
+              y: 0,
+              y2: 1,
+              colorStops: [
+                { offset: 0, color: 'rgba(219, 179, 110, 1)' },
+                { offset: 1, color: 'rgba(219, 179, 110, 0.1)' }
               ]
             }
           ],
@@ -489,82 +478,6 @@
             barCategoryGap: 40,
             itemStyle: {}
           }
-        },
-        barData: [
-          {
-            "name": "兴仁公安局",
-            "v1": 223,
-            "v11": 23
-          },
-          {
-            "name": "兴仁公安局1",
-            "v1": 22,
-            "v11": 29
-          },
-          {
-            "name": "兴仁公安局2",
-            "v1": 67,
-            "v11": 23
-          },
-          {
-            "name": "兴仁公安局3",
-            "v1": 98,
-            "v11": 23
-          }
-        ],
-        pieData: [
-        { value: 1048, name: 'Search Engine' },
-        { value: 735, name: 'Direct' },
-        { value: 580, name: 'Email' },
-        { value: 484, name: 'Union Ads' },
-        { value: 300, name: 'Video Ads' }] ,
-        pieChart: {
-          tooltip: {
-            trigger: 'item'
-          },
-          legend: {
-            show: false
-          },
-          grid: {
-            left: '6%',
-            top: '6%',
-            right: '6%',
-            bottom: '6%'
-          },
-          color: ['#59F7CA', '#62F2F8', '#F2B949', '#81C4E4', '#D8F2FD'],
-          series: [
-            {
-              type: 'pie',
-              radius: ['50%', '66%'],
-              labelLine:{
-                normal:{
-                  length: 2,
-                  lineStyle: {
-                    color: '#526D7A'
-                  }
-                }
-              },
-              startAngle: 90,
-              minAngle: 5,
-              avoidLabelOverlap: true,
-              label: {
-                show: true,
-                normal: {
-                  textStyle: {
-                    color: '#9BB7D4',
-                    fontSize: 16
-                  }
-                }
-              },
-              emphasis: {
-                itemStyle: {
-                  shadowBlur: 10,
-                  shadowOffsetX: 0,
-                  shadowColor: 'rgba(0, 0, 0, 0.5)'
-                }
-              }
-            }
-          ]
         }
       }
     },
@@ -574,7 +487,7 @@
         return this.tableData.map((v, index) => {
           return {
             color: '#d0e1e8',
-            textAlign: '',
+            align: '',
             width: index === 0 ? '100' : '',
             fontSize: '14px',
             flex: ''
@@ -769,7 +682,7 @@
       flex: 1;
 
       .right-left {
-        width: 500px;
+        width: 530px;
 
         .right-left__middle {
           display: flex;
@@ -784,7 +697,7 @@
           }
         }
 
-        .right-left__bottom {
+        .right-left__top {
           display: flex;
 
           div {
@@ -797,8 +710,8 @@
         }
       }
       .right-middle {
-        width: 522px;
+        width: 556px;
-        margin: 0 20px;
+        margin: 0 40px;
 
         .right-middle__middle {
           display: flex;
@@ -811,24 +724,6 @@
         display: flex;
         flex-direction: column;
         flex: 1;
-
-        .bottom {
-          padding-top: 16px;
-          overflow: hidden;
-        }
-
-        .right-right__top {
-          display: flex;
-          margin-bottom: 16px;
-
-          & > div {
-            flex: 1;
-
-            &:first-child {
-              margin-right: 12px;
-            }
-          }
-        }
       }
     }
 
@@ -837,11 +732,12 @@
       align-items: center;
       flex-direction: column;
       width: 240px;
-      margin-right: 14px;
+      margin-right: 20px;
 
       .left-list {
         flex: 1;
         overflow-y: auto;
+        width: 100%;
 
         .left-item {
           position: relative;