</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>