epmet-work-pc/src/views/dataBoard/satisfactionEval/dissatisfied/detail.vue

<template>
  <el-dialog
      class="dissatisfied-detail"
      title=""
      :modal="false"
      :visible.sync="dialogVisible"
      width="1118px"
      :before-close="handleClose">
    <div class="content">
      <div class="main-title">
        <Title text="不满意事项详情" noBg/>
      </div>
      <el-row :gutter="20">
        <el-col :span="10">
          <div class="sub-title">事项详情</div>
          <div class="detail">
            <p>
              {{unsatisfiedMattersModel.reason}}
            </p>
            <ul>
              <li><span>事项来源：</span>{{satisfactionSourceOptions[unsatisfiedMattersModel.satisfactionSource]}}</li>
              <li><span>事项类型：</span>{{unsatisfiedMattersModel.satisfactionCategoryName}}</li>
              <li><span>所属月份：</span>{{unsatisfiedMattersModel.satisfactionCategoryName}}</li>
              <li><span>所属社区：</span>{{unsatisfiedMattersModel.organizationName}}</li>
              <li><span>提交人：</span>{{unsatisfiedMattersModel.name}}</li>
              <li><span>提交人电话：</span>{{unsatisfiedMattersModel.mobile}}</li>
            </ul>
          </div>
        </el-col>
        <el-col :span="10" :offset="4">
          <div class="sub-title">历史不满意事项</div>
          <div class="number-list">
            <div class="number-item">
              <div class="text">12345投诉</div>
              <div class="num">
                <span class="orange">{{unsatisfiedHisCount.satisfaction_12345}}</span>
                人
              </div>
            </div>
            <div class="number-item">
              <div class="text">省满意度调查</div>
              <div class="num">
                <span class="green">{{unsatisfiedHisCount.satisfaction_province}}</span>
                人
              </div>
            </div>
            <div class="number-item">
              <div class="text">社区满意度自评</div>
              <div class="num">
                <span class="light">{{unsatisfiedHisCount.satisfaction_community}}</span>
                人
              </div>
            </div>
          </div>
          <div class="sub-title">回访记录</div>
          <div class="log">
            <div class="log-item" v-for="(item,index) in followUpRecordDetails">
              <div class="name">{{item.followUpUser}}（{{item.roleName}}）</div>
              <div>{{item.followUpDate}}</div>
              <div>{{item.followUpWay}} <i class="el-icon-arrow-right"></i></div>
            </div>
          </div>

        </el-col>
      </el-row>
    </div>
  </el-dialog>
</template>

<script>
import Title from "@/views/dataBoard/satisfactionEval/components/Title"

export default {
  name: "DissatisfiedDetail",
  components: {Title},
  data() {
    return {
      dialogVisible: false,
      unsatisfiedMattersModel: '',
      unsatisfiedHisCount: '',
      followUpRecordDetails: '',
      satisfactionSourceOptions: {
        satisfaction_12345: '12345投诉',
        satisfaction_province: '省满意度调查',
        satisfaction_community: '社区满意度自查',
      }
    };
  },
  methods: {
    handleClose(done) {
      this.dialogVisible = false
    },
    open(id) {
      this.dialogVisible = true
      this.getDetail(id)
    },
    getDetail(id) {
      this.$http.post('/governance/satisfactionDetailList/getUnsatisfiedMattersDetailInfo', id).then(({data: {data}}) => {
        this.unsatisfiedMattersModel = data.unsatisfiedMattersModel
        this.unsatisfiedHisCount = data.unsatisfiedHisCount
        this.followUpRecordDetails = data.followUpRecordDetails
        if(this.unsatisfiedMattersModel.satisfactionSource) {
          this.unsatisfiedMattersModel.satisfactionSource = satisfactionSourceOptions.filter(item => item.value === this.unsatisfiedMattersModel.satisfactionSource)[0].label
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
.dissatisfied-detail {
  /deep/ .el-dialog {
    background: url("@/assets/images/manyidu/dialog_bg.png") no-repeat left top;
    width: 1118px;
    height: 506px;
    color: #fff;

    .el-dialog__header {
      border-bottom: none !important;
    }

    .el-dialog__headerbtn {
      top: 30px;
      right: 30px;

      .el-dialog__close {
        color: #fff;
      }
    }
  }

  .content {
    padding: 0 64px;
  }

  .main-title {
    margin-bottom: 40px;
  }

  .sub-title {
    background: url("@/assets/images/manyidu/icon_fk.png") no-repeat left center;
    font-size: 18px;
    font-weight: 500;
    color: #FFFFFF;
    line-height: 22px;
    padding-left: 26px;
    margin-bottom: 15px;
  }

  .detail {
    p {
      font-size: 14px;
      font-weight: 400;
      color: #FFFFFF;
      line-height: 32px;
      margin: 0 0 10px;
    }

    ul {
      margin: 0;
      padding: 0;
      list-style-type: none;
    }

    li {
      color: #FFFFFF;
      line-height: 32px;

      span {
        color: #9CB4D3
      }
    }
  }

  .number-list {
    padding-left: 26px;
    display: flex;
    justify-content: space-between;
    margin-bottom: 30px;

    .text {
      font-size: 14px;
      font-weight: 400;
      color: #A3B9DA;
      margin-bottom: 17px;
    }

    .num {
      font-size: 14px;
      font-weight: 400;
      color: #A3B9DA;

      span {
        font-size: 32px;
        font-weight: bold;
        font-style: italic;
      }
    }
  }

  .orange {
    color: #FFB73C;
  }

  .green {
    color: #08EBAE;
  }

  .light {
    color: #7FCEFF;
  }

  .log {
    padding-left: 26px;

    .log-item {
      display: flex;
      justify-content: space-between;
      width: 100%;
      color: #fff;
      background: url("@/assets/images/manyidu/hf_line.png") bottom center no-repeat;
      padding: 9px 0;

      .name {
        flex: 0 0 33.33333%;
      }
    }
  }

}
</style>