事件上报

src/project/weiyang/AppPatrolReport/AppPatrolReport.vue

@@ -32,10 +32,10 @@ export default {
   customNavigation: true,
   data() {
     return {
-      component: 'Statistics',
+      component: 'List',
       params: {},
       refresh: true,
-      tabIndex: 1,
+      tabIndex: 0,
       tabs: [
         {
           img: 'https://cdn.sinoecare.com/i/2024/07/17/6697387277fa3.png',

src/project/weiyang/AppPatrolReport/Detail.vue

@@ -123,7 +123,7 @@ export default {
       id: '',
       doItShow: false,
       evaluation: {},
-      isShowBtn: false,
+      isShowBtn: false, //统计列表进页面不显示操作按钮
       backgroundNavbar: {
         background: 'url(https://cdn.sinoecare.com/i/2024/07/12/6690a1309c7d3.png) no-repeat',
         backgroundSize: 'cover',

src/project/weiyang/AppPatrolReport/List.vue

@@ -42,7 +42,7 @@
       </div>
       <ai-empty v-if="!datas.length" />
     </div>
-    <div class="ai-add" @click="toAdd"></div>
+    <div class="ai-add" v-if="isAdd" @click="toAdd"></div>
     <!-- <AiAdd @add="toAdd" /> -->
     
   </div>
@@ -185,7 +185,6 @@ export default {
   height: 100%;
   padding: 0;
   width: 100vw;
-  background-color: #F4F5FA;
 
   .top-tab {
     width: calc(100% - 64px);

src/project/weiyang/AppPatrolReport/Statistics.vue

@@ -14,38 +14,30 @@
       </AiPagePicker>
     </div>
     <div class="statstics-content">
-      <div class="info-content">
-        <div class="title">概况总览</div>
       <div class="el-row">
         <div class="item" v-for="(item, index) in todayList" :key="index" @click="toList(item)">
+          <div class="label"><span></span>{{ item.label }}</div>
           <h2>{{ item.value }}</h2>
-            <p>{{ item.label }}</p>
         </div>
       </div>
-      </div>
-      <div class="info-content">
       <div class="title">事件办结率</div>
-        <!-- <div class="echart-content" id="finish" v-if="showFinish"></div> -->
+      <div class="info-content">
-        <canvas canvas-id="finish" id="finish" class="echart-content" v-if="showFinish"/>
+        <canvas canvas-id="finish" id="finish" class="echart-content e-canvas" v-if="showFinish"/>
-        <div class="num" v-if="showFinish">{{ finshNum || 0 }}%</div>
         <AiEmpty v-else></AiEmpty>
       </div>
-
-      <div class="info-content">
       <div class="title">巡查上报趋势图</div>
+      <div class="info-content">
+        
         <AiEmpty v-if="!trendData.length"></AiEmpty>
-        <!-- <div class="echart-content" id="trend" v-else></div> -->
         <canvas canvas-id="trend" id="trend" class="echart-content" v-else/>
       </div>
-
-      <div class="info-content">
       <div class="title">巡查事件分类
           <!-- <div class="type-select" :style="statusInfo.name ? '' : 'color:#999;'" @click="show=true">{{statusInfo.name || '请选择'}}<u-icon name="arrow-right"></u-icon></div> -->
         <u-select v-model="show" :list="$dict.getDict('clapEventStatusHistory')" value-name="dictValue"
           label-name="dictName" @confirm="selectStatus"></u-select>
       </div>
+      <div class="info-content">
         <AiEmpty v-if="!typeData.length"></AiEmpty>
-        <!-- <div class="echart-content" id="type" v-else></div> -->
         <canvas canvas-id="type" id="type" class="echart-content" v-else/>
       </div>
       <div class="pad-b120"></div>
@@ -112,13 +104,10 @@ export default {
             var num = res.data.finishCountMap['累计事件办结'] / res.data.finishCountMap['累计事件上报']
             this.finshNum = Number(num * 100).toFixed(2)
           }
-
-
           res.data.dateCountList.map((item) => {
             this.trendData.push(item.ecount)
             this.trendDataX.push(item.ymd)
           })
-
           res.data.groupList.map((item) => {
             var info = {
               name: item.groupName,
@@ -127,64 +116,18 @@ export default {
             this.typeData.push(info)
           })
 
-          this.$nextTick(() => {
           if (this.showFinish) {
             this.finishChartInit('finish')
-              var finish = {
-                categories: ["2018","2019","2020","2021","2022","2023"],
-                series: [
-                  {
-                    name: "目标值",
-                    data: [35,36,31,33,13,34]
-                  },
-                  {
-                    name: "完成量",
-                    data: [18,27,21,24,6,28]
           }
-                ]
+          if (this.trendData.length) {
-              };
+            this.trendChartInit('trend')
-              this.drawCharts('finish', this.finishData)
           }
-            // if (this.trendData.length) {
+          if (this.typeData.length) {
-            //   this.trendChartInit()
+            this.typeChartInit('type')
-            // }
-            // if (this.typeData.length) {
-            //   this.typeChartInit()
-            // }
-          })
           }
-      })
-    },
 
-    drawCharts(id, data) {
+        }
-      const ctx = uni.createCanvasContext(id, this);
+      })
-      uChartsInstance[id] = new uCharts({
-        type: "ring",
-        context: ctx,
-        width: 346,
-        height: 232,
-        series: {series: data},
-        animation: true,
-        background: "#FFFFFF",
-        color: ["#4B87FE", "#4AC98E", "#FF8002"],
-        padding: [15, 10, 0, 15],
-        enableScroll: false,
-        legend: {},
-        xAxis: {
-          disableGrid: true,
-        },
-        yAxis: {
-          gridType: "dash",
-          dashLength: 2,
-        },
-        extra: {
-          line: {
-            type: "straight",
-            width: 2,
-            activeType: "hollow",
-          },
-        },
-      });
     },
 
     getGirdInfo() {
@@ -198,19 +141,18 @@ export default {
         }
       })
     },
-
     finishChartInit(id) {
-      console.log(this.finishData)
+      var ctx = uni.createCanvasContext(id, this);
-      console.log(new uCharts())
-      const ctx = uni.createCanvasContext(id, this);
       uChartsInstance[id] = new uCharts({
         type: "ring",
+        width: 350,
+        height: 250,
         context: ctx,
-        width: 346,
+        series: [
-        height: 232,
+          {
-        series: {
+            data: this.finishData
-          data: [{"name":"一班","value":50},{"name":"二班","value":30},{"name":"三班","value":20},{"name":"四班","value":18},{"name":"五班","value":8}]
+          }
-        },
+        ],
         animation: true,
         rotate: false,
         rotateLock: false,
@@ -221,147 +163,113 @@ export default {
         enableScroll: false,
         legend: {
           show: true,
-          position: "right",
+          position: "bottom",
           lineHeight: 25
         },
+        title: {
+          name: "办结率",
+          fontSize: 12,
+          color: "#222"
+        },
         subtitle: {
-          name: "70%",
+          name: this.finshNum+'%',
-          fontSize: 25,
+          fontSize: 20,
-          color: "#7cb5ec"
+          color: "#5C8FFA"
         },
         extra: {
           ring: {
-            ringWidth: 60,
+            ringWidth: 40,
             activeOpacity: 0.5,
             activeRadius: 10,
             offsetAngle: 0,
-            labelWidth: 15,
+            labelWidth: 5,
             border: false,
-            borderWidth: 3,
+            borderWidth: 2,
             borderColor: "#FFFFFF"
           }
         }
-      });
+      })
-    },
-
-    trendChartInit() {
-      this.trendChart = echarts.init(document.getElementById('trend'))
-      var option2 = {
-        grid: {
-          left: '5%',
-          right: '5%',
-          bottom: '3%',
-          containLabel: true
-        },
-        xAxis: {
-          type: 'category',
-          boundaryGap: false,
-          axisLine: {
-            lineStyle: {
-              color: '#E1E5EF', //x轴的颜色
-              width: 1, //轴线的宽度
-            },
-          },
-          axisLabel: {
-            show: true,
-            textStyle: {
-              color: '#666',
-            },
-          },
-          data: this.trendDataX
-        },
-        yAxis: {
-          axisLine: {       //y轴
-            show: false
-          },
-          axisTick: {
-            show: false
-          },
-          axisLabel: {
-            show: true,
-            textStyle: {
-              color: '#666',
-            },
-          },
-          type: 'value',
-        },
-        tooltip: {
-          trigger: 'axis'
     },
+    trendChartInit(id) {
+      const ctx = uni.createCanvasContext(id, this);
+      uChartsInstance[id] = new uCharts({
+        type: "line",
+        context: ctx,
+        width: 346,
+        height: 232,
+        categories: this.trendDataX,
         series: [
           {
-            data: this.trendData,
+            name: '',
-            type: 'line',
+            data: this.trendData
-            areaStyle: {//覆盖区域的渐变色
-              normal: {
-                color: {
-                  type: 'linear', x: 0, y: 0, x2: 0, y2: 1,
-                  colorStops: [
-                    {
-                      offset: 0, color: 'rgba(58,132,255, 0.8)' // 0% 处的颜色
-                    },
-                    {
-                      offset: 1, color: 'rgba(58,132,255, 0)' // 100% 处的颜色
           }
         ],
-                  global: false // 缺省为 false
+        animation: true,
+        background: "#FFFFFF",
+        color: ["#2891FF"],
+        padding: [15, 10, 0, 15],
+        enableScroll: false,
+        legend: {
+          show: false
         },
-              }
+        xAxis: {
+          disableGrid: true,
         },
-            lineStyle: {
+        yAxis: {
-              normal: {
+          gridType: "dash",
-                color: '#2891FF'
+          dashLength: 2,
-              }
         },
-            itemStyle: {
+        linearType: 'custom',
-              normal: {
+        serie: {
-                color: '#2891FF',
+          linearColor: '#5B8FF9'
-              }
-            }
-          }
-        ]
-      };
-      this.trendChart.setOption(option2)
         },
-
+        extra: {
-
+          line: {
-
+            type: "straight",
-
+            width: 2,
-
+            activeType: "hollow",
-
-
-
-    typeChartInit() {
-      this.typeChart = echarts.init(document.getElementById('type'))
-      var option3 = {
-        tooltip: {
-          trigger: 'item'
           },
+        },
+      });
+    },
+    typeChartInit(id) {
+      var ctx = uni.createCanvasContext(id, this);
+      uChartsInstance[id] = new uCharts({
+        type: "ring",
+        width: 350,
+        height: 250,
+        context: ctx,
         series: [
           {
-            name: '巡查事件分类',
+            data: this.typeData
-            type: 'pie',
-            radius: ['0%', '70%'],
-            itemStyle: {
-              normal: {
-                color: function (colors) {
-                  var colorList = ['#2891FF', '#FF8700', '#83B5F7', '#7E94F6', '#85E3D5', '#2891FF'];
-                  return colorList[colors.dataIndex];
           }
+        ],
+        animation: true,
+        rotate: false,
+        rotateLock: false,
+        background: "#FFFFFF",
+        color: ['#2891FF', '#FF8700', '#83B5F7', '#7E94F6', '#85E3D5', '#2891FF'],
+        padding: [5,5,5,5],
+        dataLabel: true,
+        enableScroll: false,
+        legend: {
+          show: true,
+          position: "bottom",
+          lineHeight: 25
         },
-            },
+        extra: {
-            data: this.typeData,
+          ring: {
-            emphasis: {
+            ringWidth: 40,
-              itemStyle: {
+            activeOpacity: 0.5,
-                shadowBlur: 10,
+            activeRadius: 10,
-                shadowOffsetX: 0,
+            offsetAngle: 0,
-                shadowColor: 'rgba(0, 0, 0, 0.5)',
+            labelWidth: 5,
+            border: false,
+            borderWidth: 2,
+            borderColor: "#FFFFFF"
           }
         }
-          }
+      })
-        ]
-      };
-      this.typeChart.setOption(option3)
     },
     selectStatus(e) {
       this.statusInfo.name = e[0].label
@@ -379,7 +287,7 @@ export default {
           return searchType = index
         }
       })
-      uni.navigateTo({url: `./StatisticsList?title=${row.label}&searchType=${searchType}&girdId=${this.selectGird.id}`})
+      uni.navigateTo({url: `./StatisticsList?searchType=${searchType}&girdId=${this.selectGird.id}`})
     }
   },
 }
@@ -387,6 +295,7 @@ export default {
 
 <style scoped lang="scss">
 .statistics {
+  padding-top: 16px;
   .select-gird {
     width: calc(100% - 64px);
     box-sizing: border-box;
@@ -416,31 +325,76 @@ export default {
   }
   .statstics-content {
     padding: 128px 30px 200px;
-  }
+    .el-row {
-
+      .item {
-
+        display: inline-block;
-  .info-content {
+        width: calc(50% - 8px);
-    width: 100%;
+        padding: 24px;
-    background: #FFF;
+        box-sizing: border-box;
+        background-color: #fff;
         border-radius: 16px;
-    margin-bottom: 24px;
+        margin: 0 16px 16px 0;
-    position: relative;
+        .label {
-    padding-bottom: 32px;
+          line-height: 40px;
-
+          font-family: PingFangSC-Regular;
+          font-size: 28px;
+          color: #666;
+          margin-bottom: 8px;
+          span {
+            display: inline-block;
+            width: 16px;
+            height: 16px;
+            margin-right: 8px;
+            border-radius: 50%;
+          }
+        }
+        h2 {
+          line-height: 64px;
+          font-family: PingFangSC-SNaNpxibold;
+          font-weight: 600;
+          font-size: 48px;
+          color: #333;
+          padding-left: 24px;
+        }
+      }
+      .item:nth-of-type(1) {
+        .label {
+          span {
+            border: 4px solid #7A8EC5;
+          }
+        }
+      }
+      .item:nth-of-type(2) {
+        margin-right: 0;
+        .label {
+          span {
+            border: 4px solid #F6BD15;
+          }
+        }
+      }
+      .item:nth-of-type(3) {
+        .label {
+          span {
+            border: 4px solid #5C8FFA;
+          }
+        }
+      }
+      .item:nth-of-type(4) {
+        margin-right: 0;
+        .label {
+          span {
+            border: 4px solid #60DCAA;
+          }
+        }
+      }
+    }
+  }
   .title {
     font-size: 32px;
     font-family: PingFangSC-Regular, PingFang SC;
-      font-weight: 400;
     color: #333;
     line-height: 48px;
-      padding: 24px 16px 24px 24px;
+    padding: 24px;
-
-      img {
-        float: right;
-        width: 40px;
-        height: 40px;
-      }
-
     .type-select {
       font-size: 26px;
       position: absolute;
@@ -451,36 +405,24 @@ export default {
       line-height: 48px;
     }
   }
-
+  .info-content {
-    .el-row {
+    width: 100%;
-      display: flex;
+    background: #FFF;
-      padding: 32px 0 60px 0;
+    border-radius: 16px;
-
+    margin-bottom: 32px;
-      .item {
+    position: relative;
-        flex: 1;
+    padding-bottom: 32px;
-        text-align: center;
+    img {
-
+      float: right;
-        h2 {
+      width: 40px;
-          font-size: 64px;
+      height: 40px;
-          font-family: DINAlternate-Bold, DINAlternate;
-          font-weight: bold;
-          color: #3B424A;
-          line-height: 64px;
-          margin-bottom: 8px;
-        }
-
-        p {
-          font-size: 28px;
-          font-family: PingFangSC-Regular, PingFang SC;
-          color: #999;
-          line-height: 40px;
-        }
-      }
     }
 
     .echart-content {
       width: 100%;
       height: 500px;
+      padding: 0 32px;
+      box-sizing: border-box;
     }
 
     .num {
@@ -494,7 +436,6 @@ export default {
       text-align: center;
     }
   }
-
   .pad-b120 {
     background-color: #F3F7F8;
     padding-bottom: 120px;

src/project/weiyang/AppPatrolReport/StatisticsList.vue

@@ -1,42 +1,35 @@
 <template>
-  <div class="list-content">
+  <div class="list">
-    <u-navbar back-icon-color="#000" title="事件上报" title-color="#000" title-width="300" title-size="32" 
+    <u-navbar back-icon-color="#000" :title="title" title-color="#000" title-width="300" title-size="32" 
       :title-bold="true" :background="backgroundNavbar" :is-fixed="true" height="44"></u-navbar>
     <div class="header-content-bg">
       <img src="https://cdn.sinoecare.com/i/2024/07/12/6690a1303d423.png" alt="">
     </div>
-    <template>
+    <div class="list-content">
-      <AiCard v-for="(item, i) in datas" :key="i" @click.native="goDetail(item, 1)">
+      <div class="item" v-for="(item, i) in datas" :key="i" @click.native="goDetail(item, 1)">
-        <template #custom>
         <div class="card-top">
           <div class="titles">{{ item.content }}</div>
-
+          <div class="source-type">{{ $dict.getLabel('residentEventSource', item.eventSource) }}</div>
-            <div class="types">
+          <div class="info">
             <span>事件类型</span>
-              <span class="types-right">{{ item.groupName }}</span>
+            <span class="value">{{ item.groupName }}</span>
           </div>
-            <div class="types">
+          <div class="info">
-              <span>事件来源</span>
-              <span class="types-right">{{ $dict.getLabel('residentEventSource', item.eventSource) }}</span>
-            </div>
-
-            <div class="gards">
             <span>所属网格</span>
-              <span class="gards-right">{{ item.girdName }}</span>
+            <span class="value">{{ item.girdName }}</span>
           </div>
         </div>
-
+        <div class="card-bottom">
-          <div class="status" :class="item.eventStatus == 0 ? 'status0' : item.eventStatus == 1 ? 'status1' : item.eventStatus == 2 ? 'status2' : 'status3'"
+          <div class="status" v-if="item.eventStatus"
-            v-if="item.eventStatus">
+            :class="item.eventStatus == 0 ? 'status0' : item.eventStatus == 1 ? 'status1' : item.eventStatus == 2 ? 'status2' : 'status3'">
             <span class="icon"></span>
-            <span>
+            <span>{{ $dict.getLabel('clapEventStatus', item.eventStatus) }}</span>
-              {{ $dict.getLabel('clapEventStatus', item.eventStatus) }}
+          </div>
-            </span>
+          <div class="level-type">中风险纠纷</div>
+        </div>
+      </div>
+      <AiEmpty v-if="!datas.length"/>
     </div>
-        </template>
-      </AiCard>
-      <AiEmpty v-if="!datas.length"></AiEmpty>
-    </template>
     <div class="pad-b120" v-if="datas.length"></div>
   </div>
 </template>
@@ -46,7 +39,6 @@ import {mapState} from 'vuex'
 
 export default {
   customNavigation: true,
-  props: {},
   data() {
     return {
       datas: [],
@@ -68,13 +60,13 @@ export default {
     }
   },
   onLoad(options) {
+    
     console.log(options)
     this.searchType = options.searchType
-    this.title = options.title
+    this.title = ['', '', '累计上报', '今日上报', '今日办结', '办理中'][options.searchType]
     this.girdId = options.girdId
   },
   onShow() {
-    // document.title = this.title
     this.current = 1
     this.getList()
   },
@@ -120,9 +112,12 @@ export default {
 </script>
 
 <style scoped lang="scss">
-.list-content {
+uni-page-body {
+  height: 100%;
+  background: #F4F5FA;
+}
+.list {
   height: 100%;
-  padding: 0;
   width: 100vw;
 
   .header-content-bg {
@@ -134,85 +129,83 @@ export default {
       height: 592px;
     }
   }
-
+  .list-content {
-  .select-top {
+    margin: 16px 0 0 32px;
-    background: #fff;
-    display: flex;
-    padding: 24px 0;
-
-    .tab-item {
-      flex: 1;
-      text-align: center;
-      line-height: 48px;
-      font-size: 26px;
-      font-family: PingFangSC-Regular, PingFang SC;
-      color: #666;
-
-      img {
-        width: 32px;
-        height: 32px;
-        margin-left: 8px;
-        vertical-align: middle;
-      }
   }
 
-    .tab-item:nth-of-type(1) {
+  .item {
-      border-right: 1px solid #eee;
+    width: calc(100% - 32px);
-    }
+    background: #FFF;
-  }
+    box-shadow: 0 0 4px 0 #00000005;
-
-  ::v-deep .AiTopFixed .content {
-    padding: 0;
-  }
-
-  ::v-deep .AiCard {
-    background: #f3f6f9;
-    padding: 24px 40px 0 32px;
-
-    .start {
-      background: #fff;
     border-radius: 16px;
-
+    margin-bottom: 32px;
     .card-top {
-        padding: 32px;
+      width: 100%;
-
+      padding: 32px 32px 24px 32px;
+      box-sizing: border-box;
+      position: relative;
       .titles {
-          margin-bottom: 34px;
+        width: calc(100% - 132px);
-          font-size: 32px;
-          font-weight: 500;
-          color: #333333;
-          line-height: 1.4;
         word-break: break-all;
         overflow: hidden;
         text-overflow: ellipsis;
         display: -webkit-box;
         -webkit-line-clamp: 2;
         -webkit-box-orient: vertical;
+        line-height: 44px;
+        font-family: PingFangSC-Medium;
+        font-weight: 500;
+        font-size: 32px;
+        color: #333;
+        margin-bottom: 24px;  
+      }
+      .source-type {
+        padding: 0 10px;
+        line-height: 44px;
+        background-color: #EBF3FE;
+        border-radius: 6px;
+        font-family: PingFangSC-Regular;
+        font-size: 24px;
+        color: #3D88F5;
+        position: absolute;
+        top: 32px;
+        right: 32px;
       }
 
-        .types,
+      .info {
-        .gards {
+        line-height: 40px;
-          margin-top: 8px;
+        font-family: PingFangSC-Regular;
-          font-size: 26px;
+        font-weight: 400;
+        font-size: 28px;
+        color: #999;
+        margin-bottom: 8px;
 
-          .types-right,
+        .value {
-          .gards-right {
+          display: inline-block;
-            margin-left: 32px;
+          margin-left: 24px;
-            color: #333333;
+          color: #333;
         }
       }
     }
 
+    .card-bottom {
+      display: flex;
+      justify-content: space-between;
+      padding: 32px;
+      border-top: 1px solid #ddd;
+      font-family: PingFangSC-Regular;
+      font-weight: 400;
+      font-size: 28px;
+    }
+
     .status {
-        padding: 32px;
-        border-top: 1px solid #dddddd;
-
       .icon {
         display: inline-block;
-          width: 8px;
+        width: 16px;
-          height: 8px;
+        height: 16px;
         vertical-align: middle;
-          margin-right: 8px;
+        margin-right: 16px;
+        border-radius: 50%;
       }
     }
 
@@ -247,20 +240,17 @@ export default {
         background: #ff4466;
       }
     }
+
+    .level-type0 {
+      color: #52C75B;
     }
+    .level-type1 {
+      color: #FF883C;
+    }
+    .level-type2 {
+      color: #FF3C3C;
     }
     
-  // ::v-deep .AiCard:last-child {
-  //   padding-bottom: 24px;
-  // }
-  .pad-b120 {
-    background-color: #f3f6f9;
-    padding-bottom: 120px;
-  }
-  .grid-name {
-    display: inline-block;
-    font-size: 32px;
-    color: #333;
   }
 }
 </style>

src/project/weiyang/AppPeopleList/PeopleList.vue

@@ -317,8 +317,6 @@ export default {
     border-top-right-radius: 16px;
   }
 
-
-
   // .top-tabs {
   //   width: 100%;
   //   padding: 0 32px;