<template>
|
<div class="page_talk_detail">
|
<v-header title=""></v-header>
|
<div class="fl-co" style="padding-bottom: 10px">
|
<!-- 上报信息 -->
|
<div class="fl-co">
|
<div class="label-text-box">
|
<span class="fw-bold fz-9">设备详情</span>
|
</div>
|
<div class="fl-f mr-t-10">
|
<div class="fc-999 label-text-box">设备名称:</div>
|
<div class="label-text">{{ detail.name }}</div>
|
</div>
|
<div class="fl-f mr-t-10">
|
<div class="fc-999 label-text-box">设备编号:</div>
|
<div class="label-text">{{ detail.serialNo }}</div>
|
</div>
|
<div class="fl-f mr-t-10">
|
<div class="fc-999 label-text-box">居民名称:</div>
|
<div class="label-text">{{ detail.username }}</div>
|
</div>
|
<div class="fl-f mr-t-10">
|
<div class="fc-999 label-text-box">设备地址:</div>
|
<div class="label-text">{{ detail.position }}</div>
|
</div>
|
<div class="fl-f mr-t-10">
|
<div class="fc-999 label-text-box">设备类型:</div>
|
<div class="label-text" v-if="detail.type === 1">一键报警</div>
|
<div class="label-text" v-if="detail.type === 2">异常报警</div>
|
</div>
|
<div class="fl-f mr-t-10">
|
<div class="fc-999 label-text-box">创建时间:</div>
|
<div class="label-text">{{ showTime(detail.createTime) }}</div>
|
</div>
|
</div>
|
<!-- 操作 -->
|
<div class="fl-co mr-t-30">
|
<div class="fl-f mr-t-10">
|
<div class="fc-999 label-text-box"></div>
|
<div class="label-text">
|
<el-button size="mini" @click="$router.go(-1)">返 回</el-button>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import vUpload from "com/upload/upload1";
|
import { dateTime } from "../../../utils/common";
|
export default {
|
props: {},
|
components: { vUpload },
|
data() {
|
return {
|
detail: {},
|
type: false,
|
image: [],
|
talk: [],
|
form: {
|
feedbackContent: "",
|
},
|
repair_id: "",
|
repair_type: "",
|
showTextList: ["极差", "失望", "一般", "满意", "非常满意"],
|
};
|
},
|
watch: {},
|
methods: {
|
onScaleImage(i) {
|
this.$store.dispatch("setImage", {
|
time: Date.now(),
|
title: "[大图]",
|
foot: 1,
|
tool: 1,
|
pic: i,
|
list: this.image,
|
});
|
},
|
onCloseImage(i) {
|
this.image = this.image.filter((r) => {
|
return r !== i;
|
});
|
},
|
onPath(v) {
|
this.image.push(v);
|
},
|
init() {
|
this.$api.get("comPropertyEquipment/" + this.repair_id, {}, (e) => {
|
e.feedbackUrl = e.feedbackUrl ? e.feedbackUrl.split(",") : [];
|
e.replyUrl = e.replyUrl ? e.replyUrl.split(",") : [];
|
e.repairUrl = e.repairUrl ? e.repairUrl.split(",") : [];
|
e.replyScore = e.replyScore ? e.replyScore : 0;
|
this.detail = e;
|
});
|
},
|
showTime(t) {
|
return dateTime(t);
|
},
|
// 提交
|
submitHandle() {
|
if (this.form.feedbackContent === "" || !this.form.feedbackContent) {
|
demo.toast("请输入处理结果");
|
return;
|
}
|
if (this.image.length) {
|
this.form.feedbackUrl = this.image.join(",");
|
}
|
this.form.id = this.repair_id;
|
this.$api.post("propertyRepair/update", this.form, (e) => {
|
if (e) {
|
demo.toast("审核成功");
|
this.$router.go(-1);
|
}
|
});
|
},
|
},
|
mounted() {
|
this.repair_id = this.$route.query.id;
|
this.repair_type = this.$route.query.type;
|
this.init();
|
},
|
};
|
</script>
|
<style lang='less' scoped>
|
.page_talk_detail {
|
position: relative;
|
overflow-y: scroll;
|
.p {
|
margin: 2px 0 8px;
|
padding-left: 50px;
|
box-sizing: border-box;
|
p {
|
font-size: 14px;
|
margin-bottom: 5px;
|
line-height: 1.2;
|
b {
|
padding-right: 10px;
|
cursor: pointer;
|
}
|
}
|
}
|
.sec article {
|
line-height: 32px;
|
}
|
.cover-img {
|
width: 128px;
|
height: 72px;
|
display: inline-block;
|
margin: 0 5px 5px 0;
|
border-radius: 3px;
|
overflow: hidden;
|
}
|
.image {
|
img {
|
// width: 128px;
|
// height: 72px;
|
// display: inline-block;
|
// margin: 0 5px 5px 0;
|
width: 100%;
|
cursor: pointer;
|
}
|
}
|
.lit {
|
position: relative;
|
box-sizing: border-box;
|
&.lft {
|
padding-left: 80px;
|
min-height: 80px;
|
}
|
img {
|
position: absolute;
|
width: 60px;
|
height: 60px;
|
left: 5px;
|
top: 0;
|
border-radius: 5px;
|
cursor: pointer;
|
}
|
}
|
.progress {
|
.sec {
|
margin-bottom: 0;
|
}
|
ul {
|
padding: 0 30px;
|
}
|
li {
|
width: 400px;
|
margin-bottom: 10px;
|
b {
|
display: block;
|
margin-bottom: 2px;
|
font-size: 13px;
|
line-height: 1.3;
|
font-weight: 700;
|
}
|
}
|
}
|
}
|
.taln_add {
|
.up {
|
padding-top: 6px;
|
}
|
.list {
|
.el-input {
|
width: 80%;
|
}
|
li {
|
display: flex;
|
align-items: center;
|
margin-bottom: 8px;
|
.but-box {
|
height: 50px;
|
flex: 1;
|
display: flex;
|
padding-left: 4px;
|
align-items: center;
|
.but {
|
font-size: 12px;
|
display: flex;
|
align-items: center;
|
}
|
.image {
|
position: relative;
|
cursor: pointer;
|
width: 50px;
|
height: 50px;
|
&:hover .clear {
|
display: block;
|
}
|
.clear {
|
position: absolute;
|
top: 50%;
|
left: 50%;
|
transform: translate(-50%, -50%);
|
width: 25px;
|
height: 25px;
|
display: none;
|
}
|
img {
|
width: 50px;
|
height: 50px;
|
}
|
}
|
}
|
.circle {
|
display: block;
|
width: 30px;
|
height: 30px;
|
/*margin-left: 10px;*/
|
text-align: center;
|
font-size: 22px;
|
line-height: 30px;
|
border-radius: 10px;
|
border: 1px solid #999;
|
transform: scale(0.8);
|
cursor: pointer;
|
}
|
&.add {
|
text-align: center;
|
display: block;
|
width: 80%;
|
padding: 5px 0;
|
span {
|
height: 40px;
|
line-height: 40px;
|
cursor: pointer;
|
font-size: 14px;
|
letter-spacing: 2px;
|
font-weight: 450;
|
}
|
}
|
}
|
}
|
.flex {
|
display: flex;
|
flex-wrap: wrap;
|
.avatar {
|
margin: 0 10px 10px 0;
|
position: relative;
|
img {
|
display: block;
|
width: 100%;
|
height: 100%;
|
}
|
.close {
|
position: absolute;
|
right: -8px;
|
top: -8px;
|
width: 16px;
|
height: 16px;
|
border-radius: 50%;
|
background-color: tomato;
|
color: #fff;
|
cursor: pointer;
|
}
|
}
|
}
|
}
|
.img-item-box {
|
position: relative;
|
}
|
.close-btn {
|
position: absolute;
|
right: -5px;
|
top: -5px;
|
background-color: red;
|
color: #fff;
|
border-radius: 50%;
|
}
|
.label-text-box {
|
line-height: 1.5;
|
width: 120px;
|
text-align: right;
|
}
|
.label-text {
|
margin-left: 10px;
|
width: 700px;
|
line-height: 1.5;
|
}
|
.repair-img {
|
width: 120px;
|
height: 120px;
|
}
|
.img-style {
|
width: 104px;
|
height: 104px;
|
}
|
.textarea-width {
|
width: 400px;
|
}
|
.repair-state-label {
|
position: absolute;
|
right: 0;
|
top: 30px;
|
width: 150px;
|
height: 150px;
|
border-radius: 50%;
|
}
|
.state-1 {
|
border: 4px solid #999;
|
color: #999999;
|
}
|
.state-2 {
|
border: 4px solid #67c23a;
|
color: #67c23a;
|
}
|
.state-3 {
|
border: 4px solid #f56c6c;
|
color: #f56c6c;
|
}
|
</style>
|
