事件上报

src/project/qujing/AppPatrolReport/Add.vue

@@ -90,7 +90,7 @@ export default {
   },
   methods: {
     typeList() {
-      this.$http.post(`/app/appclapeventgroupweiyang/list`, null, {
+      this.$http.post(`/app/appclapeventgroupqujing/list`, null, {
         params: {
           size: 9999,
         },
@@ -135,7 +135,7 @@ export default {
         return this.$u.toast('请输入手机号')
       }
       this.flag = true
-      this.$http.post(`/app/appclapeventinfoweiyang/addOrUpdate`, {...this.forms, ...this.forms.mapInfo}).then((res) => {
+      this.$http.post(`/app/appclapeventinfoqujing/addOrUpdate`, {...this.forms, ...this.forms.mapInfo}).then((res) => {
         if (res.code == 0) {
           this.$u.toast('事件添加成功')
           uni.$emit('getListInit')

src/project/qujing/AppPatrolReport/Content.vue

@@ -113,7 +113,7 @@ export default {
     submit() {  //status 1转交  4拒绝受理  3我已办结
       var url = '', successText = '', params = ''
       if (this.status == 1) {
-        url = `/app/appclapeventinfoweiyang/transfer`
+        url = `/app/appclapeventinfoqujing/transfer`
         successText = '转交成功'
         params = {
           ...this.forms,
@@ -127,12 +127,12 @@ export default {
         // }
       }
       if (this.status == 4) {
-        url = `/app/appclapeventinfoweiyang/finish`
+        url = `/app/appclapeventinfoqujing/finish`
         successText = '拒绝成功'
         params = {...this.forms, eventStatus: this.status}
       }
       if (this.status == 3) {
-        url = `/app/appclapeventinfoweiyang/finish`
+        url = `/app/appclapeventinfoqujing/finish`
         successText = '办结成功'
         params = {...this.forms, eventStatus: this.status}
       }

src/project/qujing/AppPatrolReport/Detail.vue

@@ -13,7 +13,7 @@
     <div class="header-middle">
       <div class="titles">{{ data.content }}</div>
 
-      <span class="status" :class="`status`+data.eventStatus" v-if="data.eventStatus"> {{ $dict.getLabel('weiyangEventStatus', data.eventStatus) }}</span>
+      <span class="status" :class="`status`+data.eventStatus" v-if="data.eventStatus"> {{ $dict.getLabel('qujingEventStatus', data.eventStatus) }}</span>
 
       <div class="card">
         <span class="card-left">事件类型</span>
@@ -21,7 +21,7 @@
       </div>
       <div class="card">
         <span class="card-left">事件来源</span>
-        <span class="card-right">{{ $dict.getLabel('weiyangEventType', data.type) }}</span>
+        <span class="card-right">{{ $dict.getLabel('qujingEventType', data.type) }}</span>
       </div>
 
       <div class="card">
@@ -60,7 +60,7 @@
 
     <div class="header-middle" v-if="data.judgeName">
       <div class="text-title">事件研判</div>
-      <span class="risk-level" :class="`level`+data.judgeRiskLevel">{{ $dict.getLabel('weiyangRiskLevel', data.judgeRiskLevel) }}</span>
+      <span class="risk-level" :class="`level`+data.judgeRiskLevel">{{ $dict.getLabel('qujingRiskLevel', data.judgeRiskLevel) }}</span>
       <div class="card">
         <span class="card-left">当事人姓名</span>
         <span class="card-right">{{ data.judgeName }}</span>
@@ -84,7 +84,7 @@
         <span class="card-left">排查内容</span>
         <span class="card-right">
           <span v-for="(item, index) in data.judgeRiskList" :key="index">
-            <span v-if="index > 0">,</span>{{ $dict.getLabel('weiyangRisk', item) }}
+            <span v-if="index > 0">,</span>{{ $dict.getLabel('qujingRisk', item) }}
           </span>
         </span>
       </div>
@@ -129,7 +129,7 @@
         <div class="nav">
           <div>办理进度</div>
           <!-- <span> ({{ detailStatus.label }})</span> -->
-          <span :class="`status`+data.eventStatus" v-if="data.eventStatus"> ({{ $dict.getLabel('weiyangEventStatus', data.eventStatus) }})</span>
+          <span :class="`status`+data.eventStatus" v-if="data.eventStatus"> ({{ $dict.getLabel('qujingEventStatus', data.eventStatus) }})</span>
         </div>
 
         <div class="cards" v-for="(item, index) in process" :key="index">
@@ -197,7 +197,7 @@ export default {
       const status = !v.evaluation.id ? v.data.eventStatus : 'evaluation'
       return {
         cls: 'status' + status,
-        label: !v.evaluation.id ? v.$dict.getLabel('weiyangEventStatus', v.data.eventStatus) : "已评价"
+        label: !v.evaluation.id ? v.$dict.getLabel('qujingEventStatus', v.data.eventStatus) : "已评价"
       }
     },
     process() {
@@ -205,7 +205,7 @@ export default {
       const list = this.data.processList.map(e => ({
         ...e,
         avatar: getAvatar(e.girdMemberName),
-        statusLabel: this.$dict.getLabel('weiyangDoStatus', e.doStatus)
+        statusLabel: this.$dict.getLabel('qujingDoStatus', e.doStatus)
       }))
       if (this.evaluation.id) {
         const {id, createUserName, score, files, createTime: doTime, content: doExplain} = this.evaluation
@@ -224,7 +224,7 @@ export default {
   onLoad(o) {
     // this.isShowBtn = o.isShowBtn == 1 ? true : false
     this.id = o.id
-    this.$dict.load('weiyangEventStatus', 'weiyangDoStatus', 'weiyangEventType', 'sex', 'weiyangRisk', 'weiyangRiskLevel').then(() => {
+    this.$dict.load('qujingEventStatus', 'qujingDoStatus', 'qujingEventType', 'sex', 'qujingRisk', 'qujingRiskLevel').then(() => {
       this.getDetail()
     })
 
@@ -237,7 +237,7 @@ export default {
   },
   methods: {
     getDetail() {
-      this.$http.post(`/app/appclapeventinfoweiyang/queryDetailById?id=${this.id}`).then((res) => {
+      this.$http.post(`/app/appclapeventinfoqujing/queryDetailById?id=${this.id}`).then((res) => {
         if (res?.data) {
           this.data = res.data
           if(this.data.judgeRisk) {

src/project/qujing/AppPatrolReport/JudgeContent.vue

@@ -65,8 +65,8 @@ export default {
   },
   onLoad(option) {
     this.id = option.id
-    this.$dict.load('sex', 'weiyangRisk').then(() => {
+    this.$dict.load('sex', 'qujingRisk').then(() => {
-      this.riskList = this.$dict.getDict('weiyangRisk')
+      this.riskList = this.$dict.getDict('qujingRisk')
       this.riskList.map((item) => {
         item.isCheck = false
       })
@@ -114,7 +114,7 @@ export default {
       var params = {...this.forms}
       params.id = this.id
       params.judgeRisk = this.forms.judgeRiskList.join(',')
-      this.$http.post(`/app/appclapeventinfoweiyang/judge`, {...params}).then((res) => {
+      this.$http.post(`/app/appclapeventinfoqujing/judge`, {...params}).then((res) => {
         if (res.code == 0) {
           this.$u.toast('提交成功！')
           uni.$emit('updateDeatil')

src/project/qujing/AppPatrolReport/List.vue

@@ -23,7 +23,7 @@
         <template #custom>
           <div class="card-top">
             <div class="titles">{{ item.content }}</div>
-            <span class="item-type">{{ $dict.getLabel('weiyangEventType', item.type) }}</span>
+            <span class="item-type">{{ $dict.getLabel('qujingEventType', item.type) }}</span>
 
             <div class="types">
               <span>事件类型</span>
@@ -40,11 +40,11 @@
             <div class="status" :class="`status`+item.eventStatus">
               <span class="icon"></span>
               <span>
-                {{ $dict.getLabel('weiyangEventStatus', item.eventStatus) }}
+                {{ $dict.getLabel('qujingEventStatus', item.eventStatus) }}
               </span>
             </div>
             <div class="risk-level">
-              <span class="`level`+item.judgeRiskLevel">{{ $dict.getLabel('weiyangRiskLevel', item.judgeRiskLevel) }}</span>
+              <span class="`level`+item.judgeRiskLevel">{{ $dict.getLabel('qujingRiskLevel', item.judgeRiskLevel) }}</span>
             </div>
           </div>
         </template>
@@ -96,8 +96,8 @@ export default {
     this.getList()
   },
   created() {
-    this.$dict.load('weiyangEventStatus', 'weiyangEventType', 'weiyangRiskLevel').then(() => {
+    this.$dict.load('qujingEventStatus', 'qujingEventType', 'qujingRiskLevel').then(() => {
-      this.eventStatusList = this.$dict.getDict('weiyangEventStatus')
+      this.eventStatusList = this.$dict.getDict('qujingEventStatus')
       this.eventStatusList.unshift({dictName: '全部', dictValue: ''})
       this.getList()
       // this.getIsAdd()
@@ -114,7 +114,7 @@ export default {
     },
     getList() {
       let {current, eventStatus} = this
-      this.$http.post(`/app/appclapeventinfoweiyang/list`, null, {
+      this.$http.post(`/app/appclapeventinfoqujing/list`, null, {
         params: {
           size: 10,
           current, 

src/project/qujing/AppPatrolReport/MediateContent.vue

@@ -108,7 +108,7 @@ export default {
     submit() { 
       var params = {...this.forms}
       params.id = this.id
-      this.$http.post(`/app/appclapeventinfoweiyang/finish`, {...this.forms, id: this.id, eventStatus: '3'}).then((res) => {
+      this.$http.post(`/app/appclapeventinfoqujing/finish`, {...this.forms, id: this.id, eventStatus: '3'}).then((res) => {
         if (res.code == 0) {
           this.$u.toast('办结成功！')
           uni.$emit('updateDeatil')

src/project/qujing/AppPatrolReport/Statistics.vue

@@ -4,18 +4,17 @@
       <div class="select-gird">
         <AiPagePicker type="gird" valueObj nodeKey="id" formType="2" @select="handleSelectGird" class="right-span"
                       action="/app/apppatrolreportinfo/listByInfo">
-          <AiMore v-model="selectGird.girdName" icon="arrow-right" placeholder="选择网格"/>
+          <img src="./components/img/gird-icon.png" alt="" class="gird-png">
+          <span>{{selectGird.girdName || '所属网格'}}</span>
+          <u-icon name="arrow-down" color="#8A8A8A" size="24"></u-icon>
         </AiPagePicker>
       </div>
     </AiTopFixed>
     <div class="statstics-content">
-      <div class="info-content">
+      <div class="el-row">
-        <div class="title">概况总览</div>
+        <div class="item" v-for="(item, index) in todayList" :key="index" @click="toList(item)" :class="`item`+index" v-if="item.label != '累计办结'">
-        <div class="el-row">
+          <div><span class="circle"><span class="cir"></span></span>{{ item.label }}</div>
-          <div class="item" v-for="(item, index) in todayList" :key="index" @click="toList(item)">
+          <h2>{{ item.value }}</h2>
-            <h2>{{ item.value }}</h2>
-            <p>{{ item.label }}</p>
-          </div>
         </div>
       </div>
       <div class="info-content">
@@ -33,8 +32,8 @@
 
       <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> -->
+          <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"
+          <u-select v-model="show" :list="$dict.getDict('qujingEventStatus')" value-name="dictValue"
                     label-name="dictName" @confirm="selectStatus"></u-select>
         </div>
         <AiEmpty v-if="!typeData.length"></AiEmpty>
@@ -54,7 +53,7 @@ export default {
   data() {
     return {
       todayList: [],
-      selectGird: {id: '', girdName: ''},
+      selectGird: {id: '', girdName: '', girdCode: ''},
       finishChart: null,
       trendChart: null,
       typeChart: null,
@@ -78,7 +77,7 @@ export default {
   methods: {
     getStatistics() {
       this.todayList = [], this.finishData = [], this.trendDataX = [], this.trendData = [], this.typeData = [], this.showFinish = false
-      this.$http.post(`/app/apppatrolreportinfov2/countByGirdId?girdId=${this.selectGird.id}&eventStatus=${this.statusInfo.eventStatus}`).then((res) => {
+      this.$http.post(`/app/appclapeventinfoqujing/countByGirdCode?girdCode=${this.selectGird.girdCode}&eventStatus=${this.statusInfo.eventStatus}`).then((res) => {
         if (res.code == 0) {
 
           Object.keys(res.data.allCountMap).forEach((key) => {
@@ -89,19 +88,21 @@ export default {
             this.todayList.push(info)
           })
 
-          Object.keys(res.data.finishCountMap).forEach((key) => {
+          Object.keys(res.data.allCountMap).forEach((key) => {
-            var info = {
+            if(key == '累计办结' || key == '累计上报') {
-              name: key,
+              var info = {
-              value: res.data.finishCountMap[key]
+                name: key,
+                value: res.data.allCountMap[key]
+              }
+              if (res.data.allCountMap['累计上报'] > 0) {
+                this.showFinish = true
+              }
+              this.finishData.push(info)
             }
-            if (res.data.finishCountMap[key] > 0) {
-              this.showFinish = true
-            }
-            this.finishData.push(info)
           })
 
           if (this.showFinish) {
-            var num = res.data.finishCountMap['累计事件办结'] / res.data.finishCountMap['累计事件上报']
+            var num = res.data.allCountMap['累计办结'] / res.data.allCountMap['累计上报']
             this.finshNum = Number(num * 100).toFixed(2)
           }
 
@@ -139,7 +140,8 @@ export default {
         if (res.code == 0) {
           this.selectGird.girdName = res.data.girdName
           this.selectGird.id = res.data.id
-          this.$dict.load('clapEventStatusHistory').then(() => {
+          this.selectGird.girdCode = res.data.girdCode
+          this.$dict.load('qujingEventStatus').then(() => {
             this.getStatistics()
           })
         }
@@ -156,7 +158,7 @@ export default {
           {
             name: '事件办结率',
             type: 'pie',
-            radius: ['30%', '60%'],
+            radius: ['50%', '70%'],
             itemStyle: {
               normal: {
                 color: function (colors) {
@@ -269,7 +271,7 @@ export default {
           {
             name: '巡查事件分类',
             type: 'pie',
-            radius: ['0%', '70%'],
+            radius: ['40%', '70%'],
             itemStyle: {
               normal: {
                 color: function (colors) {
@@ -298,17 +300,18 @@ export default {
       this.getStatistics()
     },
     handleSelectGird(v) {
+      console.log(v)
       this.selectGird = v || {}
       this.getStatistics()
     },
-    toList(row) {
+    toList(row) {  //0、查询网格员待办事件；1、查询网格员历史事件；2、累计上报事件；3、今日上报事件；4、今日办结事件；5、办理中事件
       var searchType = '', typeList = ['', '', '累计上报', '今日上报', '今日办结', '办理中']
       typeList.map((item, index) => {
         if (item == row.label) {
           return searchType = index
         }
       })
-      uni.navigateTo({url: `./StatisticsList?title=${row.label}&searchType=${searchType}&girdId=${this.selectGird.id}`})
+      uni.navigateTo({url: `./StatisticsList?title=${row.label}&searchType=${searchType}&girdCode=${this.selectGird.girdCode}`})
     }
   },
 }
@@ -323,20 +326,121 @@ export default {
   }
 
   ::v-deep .AiTopFixed {
+    background-color: #f5f5f5!important;
+    .fixed {
+      background-color: #f5f5f5!important;
+    }
     .content {
-      background-color: #3975C6;
+      padding: 24px;
-      color: #fff;
+      box-sizing: border-box;
+      width: 686px;
+      height: 96px;
+      background: #FFF;
+      border-radius: 8px;
+      margin: 32px 32px 0;
     }
 
-    .icon-img {
+    .gird-png {
-      width: 48px;
+      width: 30px;
-      height: 48px;
+      height: 30px;
+      margin-right: 16px;
+      vertical-align: middle;
     }
+    span {
+      display: inline-block;
+      width: calc(100% - 84px);
+      font-family: PingFangSC-Medium;
+      font-weight: 500;
+      font-size: 32px;
+      color: #333;
+      letter-spacing: 0;
+      line-height: 48px;
+      vertical-align: middle;
+    }
+
   }
 
   ::v-deep .AiMore {
     span {
-      color: #fff;
+      font-family: PingFangSC-Medium;
+      font-weight: 500;
+      font-size: 32px;
+      color: #333;
+      letter-spacing: 0;
+      line-height: 48px;
+    }
+  }
+
+  .el-row {
+    margin-bottom: 16px;
+    .item {
+      display: inline-block;
+      width: calc(50% - 7px);
+      background-color: #fff;
+      padding: 24px;
+      box-sizing: border-box;
+      margin-bottom: 16px;
+      div {
+        line-height: 40px;
+        font-family: PingFangSC-Regular;
+        font-size: 28px;
+        color: #666;
+        margin-bottom: 8px;
+        .circle {
+          display: inline-block;
+          width: 16px;
+          height: 16px;
+          margin-right: 8px;
+          padding: 8px;
+          box-sizing: border-box;
+          border-radius: 50%;
+          position: relative;
+          .cir {
+            position: absolute;
+            top: 4px;
+            left: 4px;
+            width: 8px;
+            height: 8px;
+            border-radius: 50%;
+            background-color: #fff;
+          }
+        }
+      }
+      h2 {
+        padding-left: 32px;
+        font-family: PingFangSC-SNaNpxibold;
+        font-weight: 600;
+        font-size: 48px;
+        color: #333;
+        letter-spacing: 0;
+        line-height: 64px;
+      }
+    }
+    .item:nth-of-type(2n) {
+      margin-left: 7px;
+    }
+    .item:nth-of-type(2n-1) {
+      margin-right: 7px;
+    }
+    .item0 {
+      .circle {
+        background-color: #7A8EC5;
+      }
+    }
+    .item1 {
+      .circle {
+        background-color: #F6BD15;
+      }
+    }
+    .item2 {
+      .circle {
+        background-color: #5C8FFA;
+      }
+    }
+    .item3 {
+      .circle {
+        background-color: #60DCAA;
+      }
     }
   }
 
@@ -373,31 +477,7 @@ export default {
       }
     }
 
-    .el-row {
-      display: flex;
-      padding: 32px 0 60px 0;
 
-      .item {
-        flex: 1;
-        text-align: center;
-
-        h2 {
-          font-size: 64px;
-          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%;

src/project/qujing/AppPatrolReport/StatisticsList.vue

@@ -5,14 +5,11 @@
         <template #custom>
           <div class="card-top">
             <div class="titles">{{ item.content }}</div>
+            <span class="item-type">{{ $dict.getLabel('qujingEventType', item.type) }}</span>
 
             <div class="types">
               <span>事件类型</span>
-              <span class="types-right">{{ item.groupName }}</span>
+              <span class="gards-right">{{ item.groupName }}</span>
-            </div>
-            <div class="types">
-              <span>事件来源</span>
-              <span class="types-right">{{ $dict.getLabel('residentEventSource', item.eventSource) }}</span>
             </div>
 
             <div class="gards">
@@ -21,12 +18,16 @@
             </div>
           </div>
 
-          <div class="status" :class="item.eventStatus == 0 ? 'status0' : item.eventStatus == 1 ? 'status1' : item.eventStatus == 2 ? 'status2' : 'status3'"
+          <div class="bottom-flex">
-            v-if="item.eventStatus">
+            <div class="status" :class="`status`+item.eventStatus">
-            <span class="icon"></span>
+              <span class="icon"></span>
-            <span>
+              <span>
-              {{ $dict.getLabel('clapEventStatus', item.eventStatus) }}
+                {{ $dict.getLabel('qujingEventStatus', item.eventStatus) }}
-            </span>
+              </span>
+            </div>
+            <div class="risk-level">
+              <span class="`level`+item.judgeRiskLevel">{{ $dict.getLabel('qujingRiskLevel', item.judgeRiskLevel) }}</span>
+            </div>
           </div>
         </template>
       </AiCard>
@@ -44,33 +45,49 @@ export default {
   data() {
     return {
       datas: [],
+      tabList: [
+        {
+          name: '全部待办',
+        },
+        {
+          name: '办件历史',
+        },
+      ],
+      currentTabs: 0,
       current: 1,
       pages: 0,
-      searchType: '',
+      searchGrid: {girdName: '', girdCode: ''},
+      showType: false,
+      eventStatus: '',
+      eventStatusText: '',
+      isAdd: true,
+      eventStatusList: [],
       title: '',
-      girdId: ''
+      girdCode: '',
+      searchType: ''
     }
   },
   computed: {
     ...mapState(['user']),
-    listType() {
-      return this.$dict.getDict('clapEventStatusAll')
-    }
   },
-  onLoad(options) {
+  onLoad(option) {
-    console.log(options)
+    this.title = option.title
-    this.searchType = options.searchType
+    this.searchType = option.searchType
-    this.title = options.title
+    this.girdCode = option.girdCode
-    this.girdId = options.girdId
   },
   onShow() {
     document.title = this.title
+    // this.searchGrid.girdId = this.user.girdId
+    // this.searchGrid.girdName = this.user.girdName
     this.current = 1
     this.getList()
   },
   created() {
-    this.$dict.load('clapEventStatus', 'clapEventStatusAll', 'clapEventStatusHistory', 'residentEventSource').then(() => {
+    this.$dict.load('qujingEventStatus', 'qujingEventType', 'qujingRiskLevel').then(() => {
+      this.eventStatusList = this.$dict.getDict('qujingEventStatus')
+      this.eventStatusList.unshift({dictName: '全部', dictValue: ''})
       this.getList()
+      // this.getIsAdd()
     })
   },
   methods: {
@@ -83,13 +100,14 @@ export default {
       this.getList()
     },
     getList() {
-      let {current, girdId, searchType} = this
+      let {current} = this
-      this.$http.post(`/app/apppatrolreportinfov2/listByStatus`, null, {
+      this.$http.post(`/app/appclapeventinfoqujing/listByStatus`, null, {
         params: {
           size: 10,
           current, 
-          girdId,
+          // eventStatus: this.searchType, 
-          searchType
+          girdCode: this.searchGrid.girdCode,
+          searchType: this.searchType,
         },
       }).then((res) => {
         if (res.code == 0) {
@@ -99,13 +117,55 @@ export default {
         }
       })
     },
+
+    confirm(e) {
+      if (this.showType) {
+        this.eventStatus = e[0].value
+        this.eventStatusText = e[0].label
+      }
+      this.current = 1
+      this.getList()
+    },
+
+    handleSelectGird(v) {
+      console.log(v)
+      this.searchGrid = v
+      this.current = 1
+      this.getList()
+    },
+    clearGrid() {
+      this.searchGrid = {girdName: ''}
+      this.current = 1
+      this.getList()
+    },
+
     goDetail(item) {
-      uni.navigateTo({url: `./Detail?id=${item.id}&isShowBtn=0`})
+      uni.navigateTo({url: `./Detail?id=${item.id}&isShowBtn=1`})
+    },
+
+    change(index) {
+      this.current = 1
+      this.datas = []
+      this.eventStatus = ''
+      this.currentTabs = index
+      this.getList()
+    },
+
+    linkTo(url) {
+      uni.navigateTo({url})
+    },
+    add() {
+      uni.navigateTo({url: './Add'})
+    },
+
+    getIsAdd() {
+      this.$http.post(`/app/apppatrolreportinfov2/checkGirdMemberUser`).then((res) => {
+        if (res.code == 0) {
+          this.isAdd = res.data
+        }
+      })
     },
   },
-  onReachBottom() {
-    this.nextPage()
-  }
 }
 </script>
 
@@ -155,9 +215,11 @@ export default {
 
       .card-top {
         padding: 32px;
+        position: relative;
 
         .titles {
-          margin-bottom: 34px;
+          width: 480px;
+          margin-bottom: 24px;
           font-size: 32px;
           font-weight: 500;
           color: #333333;
@@ -170,22 +232,58 @@ export default {
           -webkit-box-orient: vertical;
         }
 
-        .types,
+        .item-type {
+          position: absolute;
+          top: 32px;
+          right: 32px;
+          padding: 4px 10px;
+          line-height: 34px;
+          font-family: PingFangSC-Regular;
+          font-size: 24px;
+          color: #3D88F5;
+          background-color: #EBF3FD;
+        }
+
         .gards {
           margin-top: 8px;
           font-size: 26px;
+        }
+        .gards-right {
+          margin-left: 32px;
+          color: #333333;
+        }
+      }
 
-          .types-right,
+      .bottom-flex {
-          .gards-right {
+        display: flex;
-            margin-left: 32px;
+        justify-content: space-between;
-            color: #333333;
+        border-top: 1px solid #dddddd;
-          }
+      }
+
+      .risk-level {
+        padding: 32px;
+        span {
+          display: inline-block;
+          line-height: 40px;
+          font-family: PingFangSC-Regular;
+          font-size: 28px;
+        }
+        .level1 {
+          color: #3D88F5;
+        }
+        .level2 {
+          color: #52C75B;
+        }
+        .level3 {
+          color: #FF883C;
+        }
+        .level4 {
+          color: #FF3C3C;
         }
       }
 
       .status {
         padding: 32px;
-        border-top: 1px solid #dddddd;
 
         .icon {
           display: inline-block;
@@ -198,31 +296,27 @@ export default {
 
       .status0 {
         color: #ff883c;
-
         .icon {
           background: #ff883c;
         }
       }
 
-      .status1 {
+      .status1, .status2 {
         color: #1aaaff;
-
         .icon {
           background: #1aaaff;
         }
       }
 
-      .status2 {
+      .status3 {
         color: #42d784;
-
         .icon {
           background: #42d784;
         }
       }
 
-      .status3 {
+      .status4 {
         color: #ff4466;
-
         .icon {
           background: #ff4466;
         }
@@ -243,4 +337,4 @@ export default {
     color: #333;
   }
 }
-</style>
+</style>