能效诊断
This commit is contained in:
jiangyinzhi
@@ -0,0 +1,348 @@
|
||||
<template>
|
||||
<div class="userEvaluate">
|
||||
<Loading :loading="overlayShow"/>
|
||||
<div class="user-content">
|
||||
<div class="user-head" >
|
||||
<span>报告价值:</span>
|
||||
<div>
|
||||
<van-rate class="evaluate-rate" readonly v-model="reportLevel.reportValue" :size="20" allow-half color="#ffd21e" void-icon="star" void-color="#eee" />
|
||||
<span>{{reportLevel.valName}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="evaluate-main">
|
||||
|
||||
<div class="main-list" v-for="item in list" :key="item.id">
|
||||
|
||||
|
||||
<div class="evaluate-item">
|
||||
|
||||
<div v-if="item.image" class="item-pic">
|
||||
|
||||
<img :src="item.image" />
|
||||
|
||||
</div>
|
||||
|
||||
<div class="item-text-main">
|
||||
<div class="item-text evaluate">{{item.content}}</div>
|
||||
|
||||
<div class="item-user-time">
|
||||
|
||||
<div class="user-time">
|
||||
|
||||
<div class="item-user">
|
||||
|
||||
<span>评价人:</span>
|
||||
|
||||
<span>{{item.nickName}}</span>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="item-time">
|
||||
|
||||
<span>{{item.evaluateTime}}</span>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="btn" v-if="!item.showTextArea && !item.show" >
|
||||
<button @click="handelClickEvaluate(item)">评价回复</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="item-text-area" v-if="item.showTextArea">
|
||||
|
||||
<van-field v-model="item.message" rows="2" autosize type="textarea" maxlength="100" placeholder="请输入回复内容" show-word-limit />
|
||||
|
||||
<div class="btn" >
|
||||
<button @click="handelClickClose(item)">取消</button>
|
||||
<button @click="hanelClickReply(item)">回复</button>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<template v-if="item.show">
|
||||
<div class="item-text-main" v-for="v in item.nxzdEvaluateReplyDTOS" :key="v.replyId">
|
||||
|
||||
<div class="item-text reply">
|
||||
<div>评价回复:</div>
|
||||
<div>{{v.content}}</div>
|
||||
</div>
|
||||
|
||||
<div class="item-user-time">
|
||||
<div class="item-user">
|
||||
<span>回复人:</span>
|
||||
<span>{{v.replyName}}</span>
|
||||
</div>
|
||||
<div class="item-time">
|
||||
<span>{{v.replyTime}}</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getCurrentUserEvaluate, getCurrentUserEvaluateAdd } from '@/api/evaluateAndReply'
|
||||
import { Notify } from 'vant'
|
||||
import Loading from '@/components/loading'
|
||||
import { downloadUrl } from '@/settings'
|
||||
export default {
|
||||
name: 'userEvaluate',
|
||||
components: {
|
||||
Loading
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
//评价及回复的list
|
||||
list: [],
|
||||
|
||||
/**
|
||||
* loading及遮罩
|
||||
*/
|
||||
overlayShow: false,
|
||||
// 报告价值
|
||||
reportLevel: {},
|
||||
}
|
||||
},
|
||||
activated() {
|
||||
},
|
||||
computed: {
|
||||
|
||||
},
|
||||
created() {
|
||||
this.getuserEvaluate()
|
||||
},
|
||||
methods: {
|
||||
//获取评价列表
|
||||
async getuserEvaluate() {
|
||||
this.overlayShow = true
|
||||
const data = {
|
||||
taskId: this.$route.query.id
|
||||
}
|
||||
const res = await getCurrentUserEvaluate(data)
|
||||
try {
|
||||
if (res.code == 0) {
|
||||
if (res.data.list.length > 0) {
|
||||
res.data.list.forEach((v) => {
|
||||
if(v.nxzdEvaluateReplyDTOS && v.nxzdEvaluateReplyDTOS.length > 0) {
|
||||
v.show = true
|
||||
v.showTextArea = false
|
||||
} else if(!v.nxzdEvaluateReplyDTOS || v.nxzdEvaluateReplyDTOS.length == 0) {
|
||||
v.show = false
|
||||
v.showTextArea = false
|
||||
v.message = ''
|
||||
}
|
||||
if(v.image) {
|
||||
v.image = `${downloadUrl}${v.image}`
|
||||
}
|
||||
})
|
||||
this.list = res.data.list
|
||||
this.reportLevel = res.data.list[0]
|
||||
this.levelName(this.reportLevel.reportValue)
|
||||
|
||||
} else {
|
||||
Notify({ type: 'success', background: '#34baae', message: '暂无数据' })
|
||||
}
|
||||
}
|
||||
}
|
||||
finally {
|
||||
this.overlayShow = false
|
||||
}
|
||||
|
||||
},
|
||||
//评分等级中文展示
|
||||
levelName(val) {
|
||||
if(val == 5 || val == 4) {
|
||||
this.reportLevel.valName = '非常好'
|
||||
} else if(val == 3) {
|
||||
this.reportLevel.valName = '较好'
|
||||
} else if(val == 2) {
|
||||
this.reportLevel.valName = '一般'
|
||||
} else if(val == 1) {
|
||||
this.reportLevel.valName = '差'
|
||||
} else if(val == 0) {
|
||||
this.reportLevel.valName = '非常差'
|
||||
}
|
||||
},
|
||||
//点击评价回复按钮
|
||||
handelClickEvaluate(item) {
|
||||
item.showTextArea = true
|
||||
},
|
||||
//点击取消按钮
|
||||
handelClickClose(item) {
|
||||
item.show = false
|
||||
item.showTextArea = false
|
||||
},
|
||||
//点击回复按钮
|
||||
async hanelClickReply(item) {
|
||||
console.log(item);
|
||||
const name = this.$store.getters.username
|
||||
const time = this.currentTime()
|
||||
const data = {
|
||||
evaluateId: item.evaluateId,
|
||||
content: item.message,
|
||||
replyName: name,
|
||||
replyTime: time
|
||||
}
|
||||
const res = await getCurrentUserEvaluateAdd(data)
|
||||
if(res.code == 0) {
|
||||
this.getuserEvaluate()
|
||||
Notify({ type: 'success', background: '#34baae', message: '回复成功' })
|
||||
} else {
|
||||
Notify({ type: 'danger', message: res.msg })
|
||||
}
|
||||
|
||||
},
|
||||
//获取当前日期的年月日 时分秒
|
||||
currentTime() {
|
||||
const date = new Date()
|
||||
const y = date.getFullYear()
|
||||
const month = date.getMonth()+ 1
|
||||
const day = date.getDate()
|
||||
const m = month >= 10 ? month : '0' + month
|
||||
const d = day >= 10 ? day : '0' + day
|
||||
const Hours = date.getHours()
|
||||
const Minutes = date.getMinutes()
|
||||
const Seconds = date.getSeconds()
|
||||
const hh = Hours >=10 ? Hours : '0'+Hours
|
||||
const mm = Minutes >=10 ? Minutes : '0'+Minutes
|
||||
const ss = Seconds >=10 ? Seconds : '0'+Seconds
|
||||
const time = `${y}-${m}-${d} ${hh}:${mm}:${ss}`
|
||||
return time
|
||||
}
|
||||
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style lang='less' scoped>
|
||||
.userEvaluate {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
color: #333;
|
||||
background: #fff;
|
||||
.user-content{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 10px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.main-list{
|
||||
margin-top: 10px;
|
||||
background: #fff;
|
||||
|
||||
}
|
||||
.main-list:nth-child(1){
|
||||
margin-top: 0;
|
||||
}
|
||||
.user-head
|
||||
.evaluate-item {
|
||||
padding: 0 10px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.user-head {
|
||||
width: 100%;
|
||||
line-height: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: #fff;
|
||||
padding: 0 10px;
|
||||
box-sizing: border-box;
|
||||
.evaluate-rate {
|
||||
margin: 0 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.evaluate-main {
|
||||
flex: 1; // display: flex;
|
||||
// flex-direction: column;
|
||||
.evaluate-item {
|
||||
width: 100%;
|
||||
padding: 10px 10px;
|
||||
box-sizing: border-box;
|
||||
.item-pic {
|
||||
width: 4rem;
|
||||
height: 4rem;
|
||||
>img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
.item-text-main {
|
||||
margin-top: 10px;
|
||||
}
|
||||
.item-text {
|
||||
margin: 0 0 10px;
|
||||
}
|
||||
.reply {
|
||||
color: #34baae;
|
||||
display: flex;
|
||||
>div:nth-child(1) {
|
||||
width: 80px;
|
||||
}
|
||||
>div:nth-child(2) {
|
||||
flex: 1;
|
||||
white-space: normal;
|
||||
word-break: break-all;
|
||||
}
|
||||
}
|
||||
.item-user-time {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
font-size: 12px;
|
||||
align-items: center;
|
||||
color: #a1a1a1;
|
||||
.user-time {
|
||||
flex: 1;
|
||||
height: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.item-user{
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
.item-text-area {
|
||||
margin: 10px 0 0;
|
||||
.van-cell {
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.btn {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
button {
|
||||
padding: 4px 8px;
|
||||
background: #34baae;
|
||||
border: none;
|
||||
color: #fff;
|
||||
border-radius: 4px;
|
||||
font-size: 13px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
.evaluate-item:nth-child(2) {
|
||||
padding-top: 0;
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user