异常情况

src/apps/AppEpidemicSituation/BackUserList.vue

@@ -2,19 +2,19 @@
   <div class="BackUserList">
     <div class="header">
       <div class="tab-item">
-        <h2 style="color:#2C51CE;">274</h2>
+        <h2 style="color:#2C51CE;">{{totalInfo.total}}</h2>
         <p>返乡人员</p>
       </div>
       <div class="tab-item">
-        <h2 style="color:#5AAD6A;">274</h2>
+        <h2 style="color:#5AAD6A;">{{totalInfo.today}}</h2>
         <p>今日返乡</p>
       </div>
       <div class="tab-item">
-        <h2 style="color:#F5A319;">274</h2>
+        <h2 style="color:#F5A319;">{{totalInfo.todayUnusual}}</h2>
         <p>今日异常</p>
       </div>
       <div class="tab-item">
-        <h2 style="color:#CD413A;border-right:0;">274</h2>
+        <h2 style="color:#CD413A;border-right:0;">{{totalInfo.release}}</h2>
         <p>异常处理</p>
       </div>
     </div>
@@ -58,6 +58,7 @@ export default {
       current: 1,
       list: [],
       name: '',
+      totalInfo: {}
     }
   },
   computed: { ...mapState(['user']) },
@@ -65,6 +66,10 @@ export default {
     this.areaId = this.user.areaId
     document.title = '疫情防控'
     this.getList()
+    this.getTotal()
+    uni.$on('updateList', () => {
+      this.getListInit()
+    })
   },
   methods: {
     areaSelect() {
@@ -91,6 +96,13 @@ export default {
         }
       })
     },
+    getTotal() {
+      this.$http.post(`/app/appepidemicbackhomerecord/statistic`).then((res) => {
+        if (res.code == 0) {
+          this.totalInfo = res.data
+        }
+      })
+    },
     toUser(row) {
       uni.navigateTo({url: `./UserInfo?id=${row.id}`})
     }

src/apps/AppEpidemicSituation/ErrorInfo.vue

@@ -1,47 +1,39 @@
 <template>
-  <div class="BackUserList">
+  <div class="ErrorInfo">
     <div class="header">
-      <div class="tab-item">
+      <div class="name">{{info.name}}<span @click="callPhone(info.phone)">{{info.phone}}</span><img :src="$cdn + 'common/phone.png'" alt="" @click="callPhone(info.phone)" class="phone-icon" /></div>
-        <h2 style="color:#2C51CE;">274</h2>
+      <p>身份证号：</p>
-        <p>返乡人员</p>
+      <p class="mar-b8" style="color: #333">{{info.idNumber}}</p>
-      </div>
+      <p>异常情况：</p>
-      <div class="tab-item">
+      <p style="color: #ff4466">
-        <h2 style="color:#5AAD6A;">274</h2>
+        <span v-for="(item, index) in info.health" :key="index">{{$dict.getLabel('epidemicRecentHealth', item)}}</span>
-        <p>今日返乡</p>
+      </p>
-      </div>
+    </div>
-      <div class="tab-item">
+    <div class="info">
-        <h2 style="color:#F5A319;">274</h2>
+      <div class="title">异常情况记录</div>
-        <p>今日异常</p>
+      <div class="error-list">
-      </div>
+        <div class="item" v-for="(item, index) in list" :key="index">
-      <div class="tab-item">
+          <p>{{item.content}}</p>
-        <h2 style="color:#CD413A;border-right:0;">274</h2>
+          <div>{{item.createTime}}<span>网格员: {{item.createUserName}}</span></div>
-        <p>异常处理</p>
+        </div>
+        <AiEmpty v-if="!list.length"></AiEmpty>
       </div>
     </div>
-    <div class="search">
+    <div class="bg-line"></div>
-      <div class="left">
+    <div class="footer">
-        <AiAreaPicker v-model="areaId" all :areaId="user.areaId" @select="areaSelect" :name.sync="areaName" style="color: #666">
+      <div class="add" @click="show = true">新增记录</div>
-          <u-icon name="map-fill" color="#3192F4" size="20px" style="vertical-align: text-bottom"></u-icon>
+      <div class="confirm" @click="cancel()">解除异常</div>
-          <span style="margin-left: 4px" v-if="areaName">{{ areaName }}</span>
+    </div>
-          <span v-else>请选择</span>
+    <u-popup v-model="show" mode="bottom">
-          <u-icon name="arrow-down" color="#666" size="28" style="margin-left: 4px" />
+      <div class="textarea">
-        </AiAreaPicker>
+        <u-input v-model="value" type="textarea" :height="120" :auto-height="true" placeholder="异常情况记录" :clearable="false" />
+        <p>字数0/1000</p>
       </div>
-      <u-search v-model="keyword" :clearabled="true" placeholder="请输入姓名" :show-action="false" bg-color="#F5F5F5" search-icon-color="#999" color="#999" height="58" @search="handerSearch" @clear="handerClear"></u-search>
+      <div class="btn">
-    </div>
+        <span>清空内容</span>
-    <div class="tab-select">
+        <span class="confirm" @click="confirm">保存</span>
-      <div class="item active">返乡人员<span></span></div>
-      <div class="item">异常人员<span></span></div>
-    </div>
-    <div class="user-list">
-      <div class="item">
-        <h2 class="name">林益丰<span class="status">有异常</span></h2>
-        <p class="color-999">420107********3274</p>
-        <p><img src="./components/img/blue-icon.png" alt="">湖北省武汉市洪山区</p>
-        <p><img src="./components/img/org-icon.png" alt="">重庆市荣昌区</p>
-        <p><img src="./components/img/time-icon.png" alt="">2021-12-06 13:23</p>
       </div>
-    </div>
+    </u-popup>
   </div>
 </template>
 
@@ -49,130 +41,229 @@
 import { mapState } from 'vuex'
 
 export default {
+  components: {},
+  props: {},
   data() {
     return {
-      areaId: '',
+      show: false,
-      areaName: ''
+      value: '',
+      id: '',
+      list: [],
+      info: {}
     }
   },
-  computed: { ...mapState(['user']) },
+  computed: {
-  onShow() {},
+    ...mapState(['user']),
+  },
+  onShow() {
+    document.title = '异常情况处理'
+  },
+  onLoad(option) {
+    this.id = option.id
+    this.$dict.load('epidemicRecentHealth').then(() => {
+      this.getDetail()
+    })
+    this.getList()
+  },
   methods: {
-    areaSelect() {
+    getList() {
+      this.$http.post(`/app/appepidemicunusuallog/list?recordId=${this.id}`).then((res) => {
+        if (res.code == 0) {
+          this.list = res.data.records
+        }
+      })
+    },
+    getDetail() {
+      this.$http.post(`/app/appepidemicbackhomerecord/queryDetailById?id=${this.id}`).then((res) => {
+        if (res.code == 0) {
+          this.info = res.data
+          this.info.health = this.info.health.split(',')
+        }
+      })
+    },
+    cancel() {
+      this.$confirm(`是否解除该条异常信息？`).then(() => {
+        this.$http.post("/app/appepidemicbackhomerecord/release", {id: this.id}).then(res => {
+          if (res?.code == 0) {
+            this.$u.toast("解除成功!")
+            uni.$emit('updateDetail')
+            uni.$emit('updateList')
+            setTimeout(() => {
+              uni.navigateBack()
+            }, 600);
+          }
+        })
+      })
+    },
+    confirm() {
+      if(!this.value) {
+        return this.$u.toast('请输入异常情况')
+      }
 
-    }
+      var params = {
+        "content": this.value,
+        "createUserId": this.user.id,
+        "createUserName": this.user.name,
+        "recordId": this.id
+      }
+      this.$http.post("/app/appepidemicbackhomerecord/release", params).then(res => {
+        if (res.code == 0) {
+          this.$u.toast("新增成功!")
+          this.show = false
+          this.value = ''
+          this.getList()
+        }
+      })
+    },
+    callPhone(phone) {
+      uni.makePhoneCall({phoneNumber: phone})
+    },
   },
 }
 </script>
 
-<style lang="scss" scoped>
+<style scoped lang="scss">
-.BackUserList {
+.ErrorInfo {
-  .header{
+  height: 100%;
-    padding: 54px 32px 48px 32px;
+  .header {
-    display: flex;
+    padding: 32px 48px;
-    background-color: #fff;
-    margin-bottom: 4px;
-    .tab-item{
-      flex: 1;
-      text-align: center;
-     
-      h2{
-        font-size: 52px;
-        font-family: DINAlternate-Bold, DINAlternate;
-        font-weight: bold;
-        height: 80px;
-        margin-bottom: 8px;
-        letter-spacing: -4px;
-        border-right: 1px solid #ddd;
-        line-height: 44px;
-      }
-      p{
-        font-size: 28px;
-        font-family: PingFangSC-Regular, PingFang SC;
-        color: #999;
-        line-height: 40px;
-        margin-top: -22px;
-      }
-    }
-    .tab-item:nth-last-of-type(1) {
-      border-right: 0;
-    }
-  }
-  .search{
-    width: 100%;
-    height: 112px;
-    padding: 32px;
     box-sizing: border-box;
-    background: #FFF;
+    background-color: #fff;
-    display: flex;
+    margin-bottom: 24px;
-    margin-bottom: 8px;
+    .name {
-    .left{
+      font-size: 36px;
-      width: calc(100% - 402px);
+      font-family: PingFangSC-Medium, PingFang SC;
-    }
+      font-weight: 500;
-  }
-  .tab-select{
-    width: 100%;
-    height: 96px;
-    background: #FFF;
-    display: flex;
-    margin-bottom: 4px;
-    .item{
-      flex: 1;
-      font-size: 32px;
-      line-height: 96px;
-      font-family: PingFangSC-Regular, PingFang SC;
       color: #333;
-      text-align: center;
+      line-height: 50px;
-    }
+      margin-bottom: 16px;
-    .active{
+      span {
-      color: #135AB8;
+        font-size: 32px;
-      position: relative;
-      span{
-        position: absolute;
-        bottom: 0;
-        left: 92px;
-        width: 192px;
-        border-bottom: 4px solid #135AB8;
-      }
-    }
-  }
-  .user-list{
-    .item{
-      padding: 32px 64px 24px;
-      background-color: #fff;
-      margin-bottom: 8px;
-      .name{
-        font-size: 36px;
         font-family: PingFangSC-Medium, PingFang SC;
         font-weight: 500;
-        color: #333;
+        color: #4181ff;
-        line-height: 50px;
+        line-height: 44px;
-        margin-bottom: 8px;
+        margin: 0 20px 0 32px;
-        .status{
+      }
-          float: right;
+      img {
+        width: 32px;
+        height: 32px;
+        vertical-align: middle;
+      }
+    }
+    p {
+      font-size: 30px;
+      font-family: PingFangSC-Regular, PingFang SC;
+      color: #999;
+      line-height: 42px;
+      color: #999;
+    }
+    .mar-b8 {
+      margin-bottom: 8px;
+    }
+  }
+  .info {
+    padding: 0 32px 32px;
+    background-color: #fff;
+    .title {
+      font-size: 38px;
+      font-family: PingFangSC-Semibold, PingFang SC;
+      font-weight: 600;
+      color: #333;
+      line-height: 116px;
+    }
+    .error-list {
+      .item {
+        width: 100%;
+        background: #f4f7fe;
+        border-radius: 8px;
+        padding: 24px 24px 18px 24px;
+        box-sizing: border-box;
+        margin-bottom: 16px;
+        p {
           font-size: 28px;
           font-family: PingFangSC-Regular, PingFang SC;
-          color: #FF4466;
+          color: #343d65;
           line-height: 40px;
+          word-break: break-all;
+          margin-bottom: 12px;
+        }
+        div {
+          font-size: 24px;
+          font-family: PingFangSC-Regular, PingFang SC;
+          color: #666;
+          line-height: 34px;
+          span {
+            display: inline-block;
+            margin-left: 32px;
+          }
         }
       }
-      p{
+    }
-        font-size: 28px;
+  }
-        font-family: PingFangSC-Regular, PingFang SC;
+  .footer {
-        color: #333;
+    position: fixed;
-        line-height: 40px;
+    bottom: 0;
-        margin-bottom: 8px;
+    left: 0;
-        img{
+    width: 100%;
-          width: 32px;
+    height: 112px;
-          height: 32px;
+    line-height: 112px;
-          margin-right: 18px;
+    background: #fff;
-          vertical-align: middle;
+    display: flex;
-        }
+    font-size: 36px;
-      }
+    font-family: PingFangSC-Regular, PingFang SC;
-      .color-999{
+    .add {
-        margin-bottom: 24px;
+      flex: 1;
-        color: #999;
+      color: #333;
-      }
+    }
+    .confirm {
+      flex: 2;
+      color: #fff;
+      background: #1365dd;
+    }
+    div {
+      text-align: center;
+    }
+  }
+  .bg-line {
+    width: 100%;
+    height: 130px;
+  }
+  .textarea {
+    margin: 32px 32px 24px;
+    width: calc(100% - 64px);
+    padding: 16px;
+    box-sizing: border-box;
+    background: #f7f7f7;
+    border-radius: 8px;
+    p {
+      font-size: 26px;
+      font-family: PingFangSC-Regular, PingFang SC;
+      color: #999;
+      line-height: 36px;
+      text-align: right;
+    }
+  }
+  .btn {
+    padding: 0 32px 24px;
+    height: 64px;
+    display: flex;
+    justify-content: space-between;
+    span {
+      display: inline-block;
+      line-height: 64px;
+      font-size: 26px;
+      font-family: PingFangSC-Regular, PingFang SC;
+      color: #666;
+    }
+    .confirm {
+      width: 144px;
+      text-align: center;
+      background: #1365dd;
+      border-radius: 32px;
+      font-size: 28px;
+      font-family: PingFangSC-Regular, PingFang SC;
+      color: #fff;
     }
   }
 }

src/apps/AppEpidemicSituation/UserInfo.vue

@@ -96,11 +96,14 @@
       </div>
       <div class="item-flex">
         <div class="label">当前健康状况</div>
-        <div class="value" :style=" info.health != 0 ? 'color:#FF4466;' : ''">{{$dict.getLabel('epidemicRecentHealth', info.health)}}</div>
+        <div class="value" >
+          <span v-for="(item, index) in info.health" :key="index" :style="item != 0 ? 'color:#FF4466;' : ''">{{$dict.getLabel('epidemicRecentHealth', item)}}</span>
+        </div>
       </div>
     </div>
     <div class="line-bg" style="padding-bottom: 56px;"></div>
-    <div class="footer" v-if="info.status != 1" @click="toError">异常情况处理</div>
+    <div class="footer" @click="toError">异常情况处理</div>
+    <!-- v-if="info.status != 1"  -->
   </div>
 </template>
 
@@ -123,6 +126,9 @@ export default {
       this.id = option.id
       this.getDetail()
     })
+    uni.$on('updateDetail', () => {
+      this.getDetail()
+    })
   },
   methods: {
     getDetail() {
@@ -130,6 +136,7 @@ export default {
         if (res.code == 0) {
           this.info = res.data
           this.info.checkPhoto = JSON.parse(this.info.checkPhoto)
+          this.info.health = this.info.health.split(',')
         }
       })
     },