dai
3 years ago
7 changed files with 2844 additions and 0 deletions
@ -0,0 +1,201 @@ |
|||||
|
<template> |
||||
|
<div class="m-chart"> |
||||
|
<canvas id="myChart" :width="width" :height="height" /> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import nextTick from "dai-js/tools/nextTick"; |
||||
|
import F2 from "@antv/f2/lib/index-all"; |
||||
|
|
||||
|
// ios下字体渲染有bug |
||||
|
const fontFamily = "PingFang SC"; |
||||
|
const fontSize = 14; |
||||
|
|
||||
|
let chart; |
||||
|
let srcData = []; |
||||
|
|
||||
|
const iniChart = function (config, srcData, total, that) { |
||||
|
chart = new F2.Chart({ |
||||
|
id: "myChart", |
||||
|
pixelRatio: window.devicePixelRatio, |
||||
|
...config, |
||||
|
}); |
||||
|
|
||||
|
let data = [ |
||||
|
{ |
||||
|
const: "const", |
||||
|
name: "--", |
||||
|
count: 51.39, |
||||
|
}, |
||||
|
{ |
||||
|
const: "const", |
||||
|
name: "--", |
||||
|
count: 356.68, |
||||
|
}, |
||||
|
{ |
||||
|
const: "const", |
||||
|
name: "--", |
||||
|
count: 20.0, |
||||
|
}, |
||||
|
{ |
||||
|
const: "const", |
||||
|
name: "--", |
||||
|
count: 116.53, |
||||
|
}, |
||||
|
]; |
||||
|
console.log("-----------------------------------", srcData); |
||||
|
data = srcData; |
||||
|
|
||||
|
chart.source(data); |
||||
|
// chart.axis(false); |
||||
|
chart.legend(false); |
||||
|
// chart.legend({ |
||||
|
// position: "bottom", |
||||
|
// align: "center", |
||||
|
// }); |
||||
|
chart.tooltip(false); |
||||
|
|
||||
|
chart |
||||
|
.interval() |
||||
|
.position("name*count") |
||||
|
.color("name", [ |
||||
|
"#3e8ef7", |
||||
|
"#3e8ef7", |
||||
|
"#3e8ef7", |
||||
|
"#3e8ef7", |
||||
|
"#3e8ef7", |
||||
|
"#3e8ef7", |
||||
|
"#3e8ef7", |
||||
|
"#3e8ef7", |
||||
|
"#3e8ef7", |
||||
|
"#3e8ef7", |
||||
|
"#3e8ef7", |
||||
|
"#3e8ef7", |
||||
|
"#3e8ef7", |
||||
|
"#3e8ef7", |
||||
|
"#3e8ef7", |
||||
|
"#3e8ef7", |
||||
|
"#3e8ef7", |
||||
|
]); |
||||
|
|
||||
|
chart.render(); |
||||
|
|
||||
|
// 绘制柱状图文本 |
||||
|
const offset = -5; |
||||
|
const canvas = chart.get("canvas"); |
||||
|
const group = canvas.addGroup(); |
||||
|
const shapes = {}; |
||||
|
data.forEach(function (obj) { |
||||
|
const point = chart.getPosition(obj); |
||||
|
const text = group.addShape("text", { |
||||
|
attrs: { |
||||
|
x: point.x, |
||||
|
y: point.y + offset, |
||||
|
text: obj.count + "人", |
||||
|
textAlign: "center", |
||||
|
textBaseline: "bottom", |
||||
|
fill: "#808080", |
||||
|
}, |
||||
|
}); |
||||
|
|
||||
|
shapes[obj.name] = text; // 缓存该 shape, 便于后续查找 |
||||
|
}); |
||||
|
|
||||
|
// 配置柱状图点击交互 |
||||
|
chart.interaction("interval-select", { |
||||
|
selectAxisStyle: { |
||||
|
fill: "#000", |
||||
|
fontWeight: "bold", |
||||
|
}, |
||||
|
mode: "range", // range |
||||
|
// defaultSelected: { |
||||
|
// year: '1962 年', |
||||
|
// sales: 38 |
||||
|
// }, |
||||
|
onStart(ev) { |
||||
|
console.log(ev); |
||||
|
const data = ev.data, |
||||
|
selected = ev.selected; |
||||
|
if (data && selected) { |
||||
|
that.handleClickBar(data.name); |
||||
|
} else { |
||||
|
that.handleClickBar(); |
||||
|
} |
||||
|
}, |
||||
|
onEnd(ev) { |
||||
|
console.log("-------------------", ev); |
||||
|
}, |
||||
|
}); |
||||
|
|
||||
|
// 注意：需要把chart return 出来 |
||||
|
return chart; |
||||
|
}; |
||||
|
|
||||
|
export default { |
||||
|
name: "chart", |
||||
|
props: { |
||||
|
list: { |
||||
|
type: Array, |
||||
|
default: () => { |
||||
|
return []; |
||||
|
}, |
||||
|
}, |
||||
|
total: { |
||||
|
type: Number, |
||||
|
default: 0, |
||||
|
}, |
||||
|
config: { |
||||
|
type: Object, |
||||
|
default: () => { |
||||
|
return {}; |
||||
|
}, |
||||
|
}, |
||||
|
width: { |
||||
|
type: Number, |
||||
|
default: 400, |
||||
|
}, |
||||
|
height: { |
||||
|
type: Number, |
||||
|
default: 260, |
||||
|
}, |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
iniLoading: false, |
||||
|
}; |
||||
|
}, |
||||
|
watch: { |
||||
|
list(data) { |
||||
|
// chart.changeData(data); |
||||
|
srcData = data; |
||||
|
}, |
||||
|
}, |
||||
|
async created() { |
||||
|
await nextTick(200); |
||||
|
iniChart(this.config, this.list, this.total, this); |
||||
|
await nextTick(200); |
||||
|
this.iniLoading = true; |
||||
|
}, |
||||
|
|
||||
|
methods: { |
||||
|
setList(data) { |
||||
|
chart.changeData(data); |
||||
|
srcData = data; |
||||
|
}, |
||||
|
|
||||
|
handleClickBar(name) { |
||||
|
let code = ""; |
||||
|
if (name) { |
||||
|
let item = this.list.find((item) => item.name == name); |
||||
|
console.log(item); |
||||
|
code = item && item.code; |
||||
|
} |
||||
|
console.log(code); |
||||
|
this.$emit("clickBar", { code }); |
||||
|
}, |
||||
|
}, |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped></style> |
||||
@ -0,0 +1,213 @@ |
|||||
|
<template> |
||||
|
<div> |
||||
|
<div> |
||||
|
<el-form |
||||
|
ref="ref_form" |
||||
|
:inline="false" |
||||
|
:model="dataForm" |
||||
|
:disabled="formType === 'detail'" |
||||
|
class="form" |
||||
|
> |
||||
|
<el-form-item |
||||
|
label="所属小区：" |
||||
|
label-width="150px" |
||||
|
style="display: block" |
||||
|
> |
||||
|
<span>{{ dataForm.neighborHoodName }}</span> |
||||
|
</el-form-item> |
||||
|
|
||||
|
<el-form-item |
||||
|
label="所属楼栋：" |
||||
|
label-width="150px" |
||||
|
style="display: block" |
||||
|
> |
||||
|
<span>{{ dataForm.buildingName }}</span> |
||||
|
</el-form-item> |
||||
|
|
||||
|
<el-form-item |
||||
|
label="单元号：" |
||||
|
prop="buildingUnitId" |
||||
|
label-width="150px" |
||||
|
style="display: block" |
||||
|
> |
||||
|
<span>{{ dataForm.unitNum }}</span> |
||||
|
</el-form-item> |
||||
|
|
||||
|
<el-form-item |
||||
|
label="门牌号：" |
||||
|
prop="doorName" |
||||
|
label-width="150px" |
||||
|
style="display: block" |
||||
|
> |
||||
|
<span>{{ dataForm.doorName }}</span> |
||||
|
</el-form-item> |
||||
|
|
||||
|
<el-form-item |
||||
|
label="房屋类型：" |
||||
|
prop="houseType" |
||||
|
label-width="150px" |
||||
|
style="display: block" |
||||
|
> |
||||
|
<span>{{ dataForm.houseType }}</span> |
||||
|
</el-form-item> |
||||
|
|
||||
|
<el-form-item |
||||
|
label="房屋用途：" |
||||
|
prop="purpose" |
||||
|
label-width="150px" |
||||
|
style="display: block" |
||||
|
> |
||||
|
<span>{{ dataForm.purpose }}</span> |
||||
|
</el-form-item> |
||||
|
|
||||
|
<el-form-item |
||||
|
label="房屋状态：" |
||||
|
prop="rentFlag" |
||||
|
label-width="150px" |
||||
|
style="display: block" |
||||
|
> |
||||
|
<span>{{ dataForm.rentFlag }}</span> |
||||
|
</el-form-item> |
||||
|
|
||||
|
<el-form-item |
||||
|
label="房主姓名：" |
||||
|
prop="ownerName" |
||||
|
label-width="150px" |
||||
|
style="display: block" |
||||
|
> |
||||
|
<span>{{ dataForm.ownerName }}</span> |
||||
|
</el-form-item> |
||||
|
<el-form-item |
||||
|
label="房主电话：" |
||||
|
prop="ownerPhone" |
||||
|
label-width="150px" |
||||
|
style="display: block" |
||||
|
> |
||||
|
<span>{{ dataForm.ownerPhone }}</span> |
||||
|
</el-form-item> |
||||
|
<el-form-item |
||||
|
label="房主身份证：" |
||||
|
prop="ownerIdCard" |
||||
|
label-width="150px" |
||||
|
style="display: block" |
||||
|
> |
||||
|
<span>{{ dataForm.ownerIdCard }}</span> |
||||
|
</el-form-item> |
||||
|
</el-form> |
||||
|
</div> |
||||
|
<div class="div_btn"> |
||||
|
<el-button @click="handleCancle">关闭</el-button> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import { mapGetters } from "vuex"; |
||||
|
import { Loading } from "element-ui"; // 引入Loading服务 |
||||
|
import { requestPost } from "@/js/dai/request"; |
||||
|
|
||||
|
let loading; // 加载动画 |
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
formType: "detail", //表单操作类型 add新增，edit编辑，detail详情 |
||||
|
dataForm: { |
||||
|
neighborHoodId: "", // 所属小区ID |
||||
|
buildingId: "", //所属楼栋ID |
||||
|
buildingUnitId: "", //所属单元ID |
||||
|
doorName: "", //门牌号 |
||||
|
houseType: "", //房屋类型【楼房，平房，别墅】 |
||||
|
purpose: "", //房屋用途【住宅，商业，办公，工业，仓储，商住混用，其他】 |
||||
|
rentFlag: 1, //房屋状态【是：1，否：0】 |
||||
|
ownerPhone: "", //房主电话 |
||||
|
ownerName: "", //房主名字 |
||||
|
ownerIdCard: "", //房主身份证 |
||||
|
}, |
||||
|
}; |
||||
|
}, |
||||
|
components: {}, |
||||
|
mounted() {}, |
||||
|
|
||||
|
methods: { |
||||
|
async initForm(type, row) { |
||||
|
this.$refs.ref_form.resetFields(); |
||||
|
|
||||
|
this.formType = type; |
||||
|
if (row) { |
||||
|
this.dataForm = JSON.parse(JSON.stringify(row)); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
handleCancle() { |
||||
|
this.$emit("dialogCancle"); |
||||
|
this.resetData(); |
||||
|
}, |
||||
|
|
||||
|
resetData() { |
||||
|
this.dataForm = { |
||||
|
neighborHoodId: "", // 所属小区ID |
||||
|
buildingId: "", //所属楼栋ID |
||||
|
buildingUnitId: "", //所属单元ID |
||||
|
doorName: "", //门牌号 |
||||
|
houseType: "1", //房屋类型【楼房，平房，别墅】 |
||||
|
purpose: "1", //房屋用途【住宅，商业，办公，工业，仓储，商住混用，其他】 |
||||
|
rentFlag: 1, //房屋状态【是：1，否：0】 |
||||
|
ownerPhone: "", //房主电话 |
||||
|
ownerName: "", //房主名字 |
||||
|
ownerIdCard: "", //房主身份证 |
||||
|
}; |
||||
|
}, |
||||
|
// 开启加载动画 |
||||
|
startLoading() { |
||||
|
loading = Loading.service({ |
||||
|
lock: true, // 是否锁定 |
||||
|
text: "正在加载……", // 加载中需要显示的文字 |
||||
|
background: "rgba(0,0,0,.7)", // 背景颜色 |
||||
|
}); |
||||
|
}, |
||||
|
// 结束加载动画 |
||||
|
endLoading() { |
||||
|
// clearTimeout(timer); |
||||
|
if (loading) { |
||||
|
loading.close(); |
||||
|
} |
||||
|
}, |
||||
|
}, |
||||
|
computed: {}, |
||||
|
props: {}, |
||||
|
}; |
||||
|
</script> |
||||
|
<style lang="scss" scoped> |
||||
|
.item_width_1 { |
||||
|
width: 500px; |
||||
|
} |
||||
|
.item_width_2 { |
||||
|
width: 400px; |
||||
|
} |
||||
|
.item_width_3 { |
||||
|
margin-left: 10px; |
||||
|
width: 200px; |
||||
|
} |
||||
|
|
||||
|
.div_btn { |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
} |
||||
|
.el-tabs { |
||||
|
margin: 0 20px; |
||||
|
} |
||||
|
.el-upload__tip { |
||||
|
color: rgb(155, 155, 155); |
||||
|
margin: 0; |
||||
|
} |
||||
|
.form { |
||||
|
margin-top: 30px; |
||||
|
height: 60vh; |
||||
|
overflow-y: auto; |
||||
|
} |
||||
|
</style> |
||||
|
<style> |
||||
|
.el-dialog__body { |
||||
|
padding: 0 10px 20px !important; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,184 @@ |
|||||
|
<template> |
||||
|
<div class="m-chart"> |
||||
|
<canvas id="myChart" :width="width" :height="height" /> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import nextTick from "dai-js/tools/nextTick"; |
||||
|
import F2 from "@antv/f2/lib/index-all"; |
||||
|
|
||||
|
// ios下字体渲染有bug |
||||
|
const fontFamily = "PingFang SC"; |
||||
|
const fontSize = 14; |
||||
|
|
||||
|
let chart; |
||||
|
let srcData = []; |
||||
|
|
||||
|
const iniChart = function (config, srcData, total) { |
||||
|
chart = new F2.Chart({ |
||||
|
id: "myChart", |
||||
|
...config, |
||||
|
}); |
||||
|
|
||||
|
let data = [ |
||||
|
{ |
||||
|
const: "const", |
||||
|
name: "交通出行", |
||||
|
count: 51.39, |
||||
|
}, |
||||
|
{ |
||||
|
const: "const", |
||||
|
name: "饮食", |
||||
|
count: 356.68, |
||||
|
}, |
||||
|
{ |
||||
|
const: "const", |
||||
|
name: "生活日用", |
||||
|
count: 20.0, |
||||
|
}, |
||||
|
{ |
||||
|
const: "const", |
||||
|
name: "住房缴费", |
||||
|
count: 116.53, |
||||
|
}, |
||||
|
]; |
||||
|
console.log("-----------------------------------", srcData); |
||||
|
data = srcData; |
||||
|
|
||||
|
chart.source(data); |
||||
|
chart.coord("polar", { |
||||
|
transposed: true, |
||||
|
radius: 0.9, |
||||
|
innerRadius: 0.6, |
||||
|
}); |
||||
|
chart.axis(false); |
||||
|
chart.legend(false); |
||||
|
// chart.legend({ |
||||
|
// position: "bottom", |
||||
|
// align: "center", |
||||
|
// }); |
||||
|
chart.tooltip(false); |
||||
|
chart.guide().html({ |
||||
|
position: ["50%", "50%"], |
||||
|
html: `<div style="text-align: center;width:150px;height: 35px;">\n <p style="font-size: 18px;color: #999;margin: 0" id="title">总人数</p>\n <p style="font-size: 30px;color: #343434;margin: 0;font-weight: bold;" id="count">${total}</p>\n </div>`, |
||||
|
}); |
||||
|
chart |
||||
|
.interval() |
||||
|
.position("const*count") |
||||
|
.adjust("stack") |
||||
|
.color("name", [ |
||||
|
"#e70014", |
||||
|
"#ea6200", |
||||
|
"#f59701", |
||||
|
"#fcc900", |
||||
|
"#fef200", |
||||
|
"#cedc01", |
||||
|
"#8fc41e", |
||||
|
"#22ad38", |
||||
|
"#009b44", |
||||
|
"#009c6c", |
||||
|
"#019e97", |
||||
|
"#00a1be", |
||||
|
"#00a2c1", |
||||
|
"#00a0ea", |
||||
|
"#0085d2", |
||||
|
"#0067b6", |
||||
|
"#00469b", |
||||
|
"#1d2089", |
||||
|
"#5e1986", |
||||
|
"#920784", |
||||
|
"#bd0081", |
||||
|
"#e5007f", |
||||
|
"#e5026d", |
||||
|
"#e4024e", |
||||
|
"#e40031", |
||||
|
]); |
||||
|
chart.pieLabel({ |
||||
|
sidePadding: 30, |
||||
|
activeShape: true, |
||||
|
label1: function label1(data) { |
||||
|
return { |
||||
|
text: data.count + "人", |
||||
|
fill: "#343434", |
||||
|
fontWeight: "bold", |
||||
|
fontSize: 14 |
||||
|
}; |
||||
|
}, |
||||
|
label2: function label2(data) { |
||||
|
return { |
||||
|
text: data.name, |
||||
|
fill: "#999", |
||||
|
fontSize: 14 |
||||
|
}; |
||||
|
}, |
||||
|
onClick: function onClick(ev) { |
||||
|
const data = ev.data; |
||||
|
if (data) { |
||||
|
// $("#title").text(data.name); |
||||
|
// $("#count").text(data.count); |
||||
|
} |
||||
|
}, |
||||
|
}); |
||||
|
chart.render(); |
||||
|
|
||||
|
// 注意：需要把chart return 出来 |
||||
|
return chart; |
||||
|
}; |
||||
|
|
||||
|
export default { |
||||
|
name: "chart", |
||||
|
props: { |
||||
|
list: { |
||||
|
type: Array, |
||||
|
default: () => { |
||||
|
return []; |
||||
|
}, |
||||
|
}, |
||||
|
total: { |
||||
|
type: Number, |
||||
|
default: 0, |
||||
|
}, |
||||
|
config: { |
||||
|
type: Object, |
||||
|
default: () => { |
||||
|
return {}; |
||||
|
}, |
||||
|
}, |
||||
|
width: { |
||||
|
type: Number, |
||||
|
default: 400, |
||||
|
}, |
||||
|
height: { |
||||
|
type: Number, |
||||
|
default: 260, |
||||
|
}, |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
iniLoading: false, |
||||
|
}; |
||||
|
}, |
||||
|
watch: { |
||||
|
list(data) { |
||||
|
// chart.changeData(data); |
||||
|
srcData = data; |
||||
|
}, |
||||
|
}, |
||||
|
async created() { |
||||
|
await nextTick(200); |
||||
|
iniChart(this.config, this.list, this.total); |
||||
|
await nextTick(200); |
||||
|
this.iniLoading = true; |
||||
|
}, |
||||
|
|
||||
|
methods: { |
||||
|
setList(data) { |
||||
|
chart.changeData(data); |
||||
|
srcData = data; |
||||
|
}, |
||||
|
}, |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped></style> |
||||
@ -0,0 +1,708 @@ |
|||||
|
<template> |
||||
|
<div class="m-pop"> |
||||
|
<div class="wrap"> |
||||
|
<div class="btn-close" |
||||
|
@click="handleClose"> |
||||
|
<img src="@/assets/img/shuju/people/close.png" /> |
||||
|
</div> |
||||
|
<div class="wrap2"> |
||||
|
<div class="title"> |
||||
|
<span>更多信息</span> |
||||
|
</div> |
||||
|
<div v-if="view_real_data" |
||||
|
class="div_tuomin"> |
||||
|
<el-button size="mini" |
||||
|
class="diy-button--search" |
||||
|
@click="handleTuomin">显示脱敏信息</el-button> |
||||
|
</div> |
||||
|
|
||||
|
<div :key="'fieldSubList' + index" |
||||
|
v-for="(fieldSubList, index) in fieldList"> |
||||
|
<div class="list"> |
||||
|
<div class="item" |
||||
|
v-if="index == 0"> |
||||
|
<span class="item-field">所属网格：</span> |
||||
|
<span>{{ gridName }}</span> |
||||
|
</div> |
||||
|
<div class="item" |
||||
|
v-if="index == 0"> |
||||
|
<span class="item-field">所属小区：</span> |
||||
|
<span>{{ xiaoquName }}</span> |
||||
|
</div> |
||||
|
<div class="item" |
||||
|
v-if="index == 0"> |
||||
|
<span class="item-field">所属楼栋：</span> |
||||
|
<span>{{ louName }}-{{ danyuanName }}</span> |
||||
|
</div> |
||||
|
<div class="item" |
||||
|
v-if="index == 0"> |
||||
|
<span class="item-field">所属家庭：</span> |
||||
|
<span>{{ homeName }}</span> |
||||
|
</div> |
||||
|
<div class="item" |
||||
|
:key="field.itemId" |
||||
|
v-for="field in fieldSubList"> |
||||
|
<span class="item-field">{{ field.label }}：</span> |
||||
|
<span v-if="field.columnName==='MOBILE'||field.columnName==='ID_CARD'">{{ info[field.columnName]||'--'}}</span> |
||||
|
<span v-else-if=" |
||||
|
field.itemType == 'select' || |
||||
|
field.itemType == 'radio' || |
||||
|
field.itemType == 'checkbox' || |
||||
|
field.itemType == 'cascader' |
||||
|
">{{ |
||||
|
info[field.columnName] == null |
||||
|
? "--" |
||||
|
: getOptionLabel( |
||||
|
field.options, |
||||
|
info[field.columnName], |
||||
|
field.itemType |
||||
|
) |
||||
|
}}</span> |
||||
|
|
||||
|
<span v-else>{{ |
||||
|
info[field.columnName] == null ? "--" : info[field.columnName] |
||||
|
}}</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="line"></div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="tabs"> |
||||
|
<div class="tab-btn" |
||||
|
@click="subStartGroupIndex" |
||||
|
v-if="groupList.length > 9"> |
||||
|
<img src="@/assets/img/shuju/people/arrow-double-left.png" /> |
||||
|
</div> |
||||
|
<div v-show="index >= startGroupIndex && index < startGroupIndex + 9" |
||||
|
class="tab" |
||||
|
:class="groupIndex % groupList.length == index ? 'z-on' : ''" |
||||
|
:key="'tab' + index" |
||||
|
@click="groupIndex = index" |
||||
|
v-for="(item, index) in groupList"> |
||||
|
{{ item.label }} |
||||
|
</div> |
||||
|
<div class="tab-btn" |
||||
|
@click="addStartGroupIndex" |
||||
|
v-if="groupList.length > 9"> |
||||
|
<img src="@/assets/img/shuju/people/arrow-double-right.png" /> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div :key="'group' + index" |
||||
|
v-show="groupIndex % groupList.length == index" |
||||
|
v-for="(group, index) in groupList"> |
||||
|
<div v-if=" |
||||
|
group.tableName == 'ic_resi_demand' && |
||||
|
Array.isArray(allInfo.ic_resi_demand) && |
||||
|
allInfo.ic_resi_demand.length > 0 |
||||
|
"> |
||||
|
<div class="list" |
||||
|
:key="'ic_resi_demand' + infoIndex" |
||||
|
v-for="(infoItem, infoIndex) in allInfo.ic_resi_demand"> |
||||
|
<div class="item" |
||||
|
:key="field.itemId" |
||||
|
v-for="field in group.itemList"> |
||||
|
<span class="item-field">{{ field.label }}：</span> |
||||
|
<span v-if=" |
||||
|
field.itemType == 'select' || |
||||
|
field.itemType == 'radio' || |
||||
|
field.itemType == 'checkbox' || |
||||
|
field.itemType == 'cascader' |
||||
|
">{{ |
||||
|
infoItem[field.columnName] == null |
||||
|
? "--" |
||||
|
: getOptionLabel( |
||||
|
field.options, |
||||
|
infoItem[field.columnName], |
||||
|
field.itemType |
||||
|
) |
||||
|
}}</span> |
||||
|
|
||||
|
<span v-else>{{ |
||||
|
infoItem[field.columnName] == null |
||||
|
? "--" |
||||
|
: infoItem[field.columnName] |
||||
|
}}</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div v-else-if="group.tableName == 'ic_hs'" |
||||
|
style="margin-top: 10px; padding: 0 20px"> |
||||
|
<el-table class="table" |
||||
|
:data="natList" |
||||
|
border |
||||
|
height="400" |
||||
|
:header-cell-style="{ background: '#2195FE', color: '#FFFFFF' }" |
||||
|
style="width: 100%"> |
||||
|
<el-table-column label="序号" |
||||
|
header-align="center" |
||||
|
align="center" |
||||
|
type="index" |
||||
|
width="50"></el-table-column> |
||||
|
|
||||
|
<el-table-column prop="testTime" |
||||
|
header-align="center" |
||||
|
align="center" |
||||
|
label="检测时间" |
||||
|
width="150"> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="address" |
||||
|
header-align="center" |
||||
|
align="center" |
||||
|
label="检测机构" |
||||
|
show-overflow-tooltip |
||||
|
min-width="180"> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="result" |
||||
|
header-align="center" |
||||
|
align="center" |
||||
|
label="检测结果" |
||||
|
width="240"> |
||||
|
</el-table-column> |
||||
|
</el-table> |
||||
|
</div> |
||||
|
<div v-else-if="group.tableName == 'ic_xc'" |
||||
|
style="margin-top: 10px; padding: 0 20px"> |
||||
|
<el-table class="table" |
||||
|
:data="tripList" |
||||
|
border |
||||
|
height="400" |
||||
|
:header-cell-style="{ background: '#2195FE', color: '#FFFFFF' }" |
||||
|
style="width: 100%"> |
||||
|
<el-table-column label="序号" |
||||
|
header-align="center" |
||||
|
align="center" |
||||
|
type="index" |
||||
|
width="50"></el-table-column> |
||||
|
|
||||
|
<el-table-column prop="fromRegion" |
||||
|
header-align="center" |
||||
|
align="center" |
||||
|
label="来自地区" |
||||
|
show-overflow-tooltip |
||||
|
min-width="100"> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="arrivalTime" |
||||
|
header-align="center" |
||||
|
align="center" |
||||
|
label="来到本地时间" |
||||
|
width="140"> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="leaveTime" |
||||
|
header-align="center" |
||||
|
align="center" |
||||
|
label="离开本地时间" |
||||
|
width="140"> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="noticeTime" |
||||
|
header-align="center" |
||||
|
align="center" |
||||
|
label="最近一次通知时间" |
||||
|
width="140"> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="remark" |
||||
|
header-align="center" |
||||
|
align="center" |
||||
|
label="备注" |
||||
|
show-overflow-tooltip |
||||
|
width="120"> |
||||
|
</el-table-column> |
||||
|
</el-table> |
||||
|
</div> |
||||
|
<div v-else-if="group.tableName == 'ic_ym'" |
||||
|
style="margin-top: 10px; padding: 0 20px"> |
||||
|
<el-table v-if="vaccineList" |
||||
|
class="table" |
||||
|
:data="vaccineList" |
||||
|
border |
||||
|
height="400" |
||||
|
:header-cell-style="{ background: '#2195FE', color: '#FFFFFF' }" |
||||
|
style="width: 100%"> |
||||
|
<el-table-column label="序号" |
||||
|
header-align="center" |
||||
|
align="center" |
||||
|
type="index" |
||||
|
width="50"></el-table-column> |
||||
|
|
||||
|
<el-table-column prop="vaccinateTime" |
||||
|
header-align="center" |
||||
|
align="center" |
||||
|
label="接种时间" |
||||
|
show-overflow-tooltip |
||||
|
min-width="100"> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="address" |
||||
|
header-align="center" |
||||
|
align="center" |
||||
|
label="接种地点"> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="manufactor" |
||||
|
header-align="center" |
||||
|
align="center" |
||||
|
label="疫苗厂家"> |
||||
|
</el-table-column> |
||||
|
</el-table> |
||||
|
</div> |
||||
|
<div class="list" |
||||
|
v-else> |
||||
|
<div class="item" |
||||
|
:class="{ 'z-long': group.itemList.length == 1 }" |
||||
|
:key="field.itemId" |
||||
|
v-for="field in group.itemList"> |
||||
|
<span class="item-field">{{ field.label }}：</span> |
||||
|
<span v-if=" |
||||
|
field.itemType == 'select' || |
||||
|
field.itemType == 'radio' || |
||||
|
field.itemType == 'checkbox' || |
||||
|
field.itemType == 'cascader' |
||||
|
">{{ |
||||
|
!allInfo[group.tableName] || |
||||
|
allInfo[group.tableName][0][field.columnName] == null |
||||
|
? "--" |
||||
|
: getOptionLabel( |
||||
|
field.options, |
||||
|
allInfo[group.tableName][0][field.columnName], |
||||
|
field.itemType |
||||
|
) |
||||
|
}}</span> |
||||
|
|
||||
|
<span v-else>{{ |
||||
|
!allInfo[group.tableName] || |
||||
|
allInfo[group.tableName][0][field.columnName] == null |
||||
|
? "--" |
||||
|
: allInfo[group.tableName][0][field.columnName] |
||||
|
}}</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import cptCard from "@/views/modules/visual/cpts/card"; |
||||
|
import { requestPost } from "@/js/dai/request"; |
||||
|
|
||||
|
export default { |
||||
|
name: "peopleMore", |
||||
|
props: { |
||||
|
userId: { |
||||
|
type: String, |
||||
|
default: "", |
||||
|
}, |
||||
|
gridName: { |
||||
|
type: String, |
||||
|
default: "", |
||||
|
}, |
||||
|
view_real_data: {//显示【显示脱敏信息】按钮 |
||||
|
type: Boolean, |
||||
|
default: false, |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
components: { |
||||
|
cptCard, |
||||
|
}, |
||||
|
|
||||
|
data () { |
||||
|
return { |
||||
|
fieldList: [], |
||||
|
groupList: [], |
||||
|
groupIndex: 0, |
||||
|
startGroupIndex: 0, |
||||
|
info: {}, |
||||
|
allInfo: {}, |
||||
|
|
||||
|
xiaoquList: [], |
||||
|
louList: [], |
||||
|
danyuanList: [], |
||||
|
homeList: [], |
||||
|
natList: [], // 核酸检测 |
||||
|
tripList: [], // 行程信息 |
||||
|
|
||||
|
vaccineList: [], |
||||
|
}; |
||||
|
}, |
||||
|
|
||||
|
computed: { |
||||
|
isShundeju () { |
||||
|
return this.$store.state.user.customerId == "1550309684576591874"; |
||||
|
}, |
||||
|
|
||||
|
xiaoquName () { |
||||
|
const { |
||||
|
xiaoquList, |
||||
|
info: { VILLAGE_ID }, |
||||
|
} = this; |
||||
|
if (Array.isArray(xiaoquList) && xiaoquList.length > 0 && VILLAGE_ID) { |
||||
|
let item = xiaoquList.find((item) => item.value == VILLAGE_ID); |
||||
|
if (item) { |
||||
|
return item.label; |
||||
|
} |
||||
|
} |
||||
|
return ""; |
||||
|
}, |
||||
|
louName () { |
||||
|
const { |
||||
|
louList, |
||||
|
info: { BUILD_ID }, |
||||
|
} = this; |
||||
|
if (Array.isArray(louList) && louList.length > 0 && BUILD_ID) { |
||||
|
let item = louList.find((item) => item.value == BUILD_ID); |
||||
|
if (item) { |
||||
|
return item.label; |
||||
|
} |
||||
|
} |
||||
|
return ""; |
||||
|
}, |
||||
|
danyuanName () { |
||||
|
const { |
||||
|
danyuanList, |
||||
|
info: { UNIT_ID }, |
||||
|
} = this; |
||||
|
if (Array.isArray(danyuanList) && danyuanList.length > 0 && UNIT_ID) { |
||||
|
let item = danyuanList.find((item) => item.value == UNIT_ID); |
||||
|
if (item) { |
||||
|
return item.label; |
||||
|
} |
||||
|
} |
||||
|
return ""; |
||||
|
}, |
||||
|
danyuanName () { |
||||
|
const { |
||||
|
danyuanList, |
||||
|
info: { UNIT_ID }, |
||||
|
} = this; |
||||
|
if (Array.isArray(danyuanList) && danyuanList.length > 0 && UNIT_ID) { |
||||
|
let item = danyuanList.find((item) => item.value == UNIT_ID); |
||||
|
if (item) { |
||||
|
return item.label; |
||||
|
} |
||||
|
} |
||||
|
return ""; |
||||
|
}, |
||||
|
homeName () { |
||||
|
const { |
||||
|
homeList, |
||||
|
info: { HOME_ID }, |
||||
|
} = this; |
||||
|
if (Array.isArray(homeList) && homeList.length > 0 && HOME_ID) { |
||||
|
let item = homeList.find((item) => item.value == HOME_ID); |
||||
|
if (item) { |
||||
|
return item.label; |
||||
|
} |
||||
|
} |
||||
|
return ""; |
||||
|
}, |
||||
|
}, |
||||
|
|
||||
|
watch: { |
||||
|
userId () { |
||||
|
this.getApiData(); |
||||
|
}, |
||||
|
}, |
||||
|
|
||||
|
mounted () { |
||||
|
this.getApiData(); |
||||
|
}, |
||||
|
|
||||
|
methods: { |
||||
|
async handleTuomin () { |
||||
|
const url = "/data/aggregator/epmetuser/detailByType"; |
||||
|
|
||||
|
const { data, code, msg } = await requestPost(url, { |
||||
|
id: this.userId, |
||||
|
type: "checkIcResiUser", |
||||
|
}); |
||||
|
|
||||
|
if (code === 0) { |
||||
|
this.$set(this.info, 'MOBILE', data.mobile) |
||||
|
this.$set(this.info, 'ID_CARD', data.idCard) |
||||
|
} else { |
||||
|
this.$message.error(msg); |
||||
|
} |
||||
|
|
||||
|
|
||||
|
}, |
||||
|
addStartGroupIndex () { |
||||
|
const { startGroupIndex, groupList } = this; |
||||
|
if (startGroupIndex < groupList.length - 9) { |
||||
|
this.startGroupIndex = startGroupIndex + 1; |
||||
|
} else { |
||||
|
this.startGroupIndex = groupList.length - 9; |
||||
|
} |
||||
|
}, |
||||
|
subStartGroupIndex () { |
||||
|
const { startGroupIndex, groupList } = this; |
||||
|
if (startGroupIndex > 0) { |
||||
|
this.startGroupIndex = startGroupIndex - 1; |
||||
|
} else { |
||||
|
this.startGroupIndex = 0; |
||||
|
} |
||||
|
}, |
||||
|
handleClose () { |
||||
|
this.$emit("close"); |
||||
|
}, |
||||
|
|
||||
|
async getApiData () { |
||||
|
await this.getField(); |
||||
|
await this.getInfo(); |
||||
|
this.getDetailList(); |
||||
|
this.getXiaoquList(); |
||||
|
this.getLouList(); |
||||
|
this.getDanyuanList(); |
||||
|
this.getHomeList(); |
||||
|
}, |
||||
|
|
||||
|
getOptionLabel (options, value, type = "") { |
||||
|
if (Array.isArray(options)) { |
||||
|
let valueArr = value.split(","); |
||||
|
if (type == "cascader") { |
||||
|
let finalValue = []; |
||||
|
this.getNodePath(options, value, finalValue); |
||||
|
return finalValue.join("-"); |
||||
|
} else { |
||||
|
return valueArr |
||||
|
.map((val) => { |
||||
|
let item = options.find((item) => item.value == val); |
||||
|
if (item && item.label) { |
||||
|
return item.label; |
||||
|
} |
||||
|
return "--"; |
||||
|
}) |
||||
|
.join("、"); |
||||
|
} |
||||
|
} |
||||
|
return "--"; |
||||
|
}, |
||||
|
|
||||
|
getNodePath (node, val, path) { |
||||
|
// node:所有数据，val:后台返回的id, path:要渲染的数组id |
||||
|
for (let i = 0; i < node.length; i++) { |
||||
|
const ele = node[i]; |
||||
|
if (ele.value === val) { |
||||
|
path.push(ele.label); |
||||
|
return path; |
||||
|
} else if (ele.children && ele.children.length > 0) { |
||||
|
if (ele.children.some((row) => row.value === val)) { |
||||
|
path.unshift(ele.label); |
||||
|
this.getNodePath(ele.children, val, path); |
||||
|
} else { |
||||
|
this.getNodePath(ele.children, val, path); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
return path; |
||||
|
}, |
||||
|
|
||||
|
//加载组织数据 |
||||
|
async getField () { |
||||
|
const url = "/oper/customize/icform/getcustomerform"; |
||||
|
|
||||
|
const { data, code, msg } = await requestPost(url, { |
||||
|
dynamic: true, |
||||
|
formCode: "resi_base_info", |
||||
|
}); |
||||
|
|
||||
|
if (code === 0) { |
||||
|
this.groupList = data.groupList; |
||||
|
this.fieldList = (function (arr) { |
||||
|
let col = []; |
||||
|
let ele = []; |
||||
|
for (let i = 0; i < arr.length; i++) { |
||||
|
let item = arr[i]; |
||||
|
if (item.itemType == "divider" || i == arr.length - 1) { |
||||
|
col.push([...ele]); |
||||
|
ele = []; |
||||
|
} else { |
||||
|
ele.push(item); |
||||
|
} |
||||
|
} |
||||
|
return col; |
||||
|
})(data.itemList); |
||||
|
|
||||
|
this.fieldList.forEach((subList, index) => { |
||||
|
subList.forEach(async (item, subIndex) => { |
||||
|
if (item.optionSourceType == "remote" && item.optionSourceValue) { |
||||
|
this.fieldList[index][subIndex].options = await this.getOptions( |
||||
|
item.optionSourceValue |
||||
|
); |
||||
|
} |
||||
|
}); |
||||
|
}); |
||||
|
} else { |
||||
|
this.$message.error(msg); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
//加载组织数据 |
||||
|
async getInfo () { |
||||
|
const url = "/epmetuser/icresiuser/detail"; |
||||
|
|
||||
|
const { data, code, msg } = await requestPost(url, { |
||||
|
icResiUserId: this.userId, |
||||
|
formCode: "resi_base_info", |
||||
|
}); |
||||
|
|
||||
|
if (code === 0) { |
||||
|
this.info = data.ic_resi_user[0]; |
||||
|
this.allInfo = data; |
||||
|
|
||||
|
this.fieldList.forEach((subList, index) => { |
||||
|
subList.forEach((item, subIndex) => { |
||||
|
if ( |
||||
|
item.itemType == "radio" && |
||||
|
item.childGroup && |
||||
|
this.allInfo[item.tableName] && |
||||
|
this.allInfo[item.tableName][0][item.columnName] == "1" |
||||
|
) { |
||||
|
this.groupList = [...this.groupList, item.childGroup]; |
||||
|
} |
||||
|
}); |
||||
|
}); |
||||
|
|
||||
|
await Promise.all( |
||||
|
this.groupList.map((subList, index) => { |
||||
|
return Promise.all( |
||||
|
subList.itemList.map(async (item, subIndex) => { |
||||
|
if ( |
||||
|
item.optionSourceType == "remote" && |
||||
|
item.optionSourceValue |
||||
|
) { |
||||
|
this.groupList[index].itemList[subIndex].options = |
||||
|
await this.getOptions(item.optionSourceValue); |
||||
|
} |
||||
|
}) |
||||
|
); |
||||
|
}) |
||||
|
); |
||||
|
console.log("44444444", this.groupList); |
||||
|
let arr = [ |
||||
|
{ |
||||
|
groupId: "hs123", |
||||
|
itemList: [], |
||||
|
label: "核酸检测信息", |
||||
|
sort: 998, |
||||
|
supportAdd: false, |
||||
|
tableName: "ic_hs", |
||||
|
}, |
||||
|
]; |
||||
|
if (!this.isShundeju) { |
||||
|
arr = [ |
||||
|
...arr, |
||||
|
{ |
||||
|
groupId: "hs124", |
||||
|
itemList: [], |
||||
|
label: "行程信息", |
||||
|
sort: 999, |
||||
|
supportAdd: false, |
||||
|
tableName: "ic_xc", |
||||
|
}, |
||||
|
{ |
||||
|
groupId: "hs125", |
||||
|
itemList: [], |
||||
|
label: "疫苗信息", |
||||
|
sort: 999, |
||||
|
supportAdd: false, |
||||
|
tableName: "ic_ym", |
||||
|
}, |
||||
|
]; |
||||
|
this.groupList = [...this.groupList, ...arr]; |
||||
|
} else { |
||||
|
this.groupList = [...arr, ...this.groupList]; |
||||
|
} |
||||
|
} else { |
||||
|
this.$message.error(msg); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
//加载组织数据 |
||||
|
async getOptions (url) { |
||||
|
if (!url) return []; |
||||
|
|
||||
|
const { data, code, msg } = await requestPost(url, {}); |
||||
|
|
||||
|
if (code === 0) { |
||||
|
return data; |
||||
|
} else { |
||||
|
return []; |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
async getXiaoquList () { |
||||
|
const url = "/gov/org/icneighborhood/neighborhoodoption"; |
||||
|
|
||||
|
const { data, code, msg } = await requestPost(url, { |
||||
|
agencyId: this.info.AGENCY_ID, |
||||
|
gridId: this.info.GRID_ID, |
||||
|
}); |
||||
|
|
||||
|
if (code === 0) { |
||||
|
this.xiaoquList = data; |
||||
|
} else { |
||||
|
this.$message.error(msg); |
||||
|
} |
||||
|
}, |
||||
|
async getLouList () { |
||||
|
const url = "/gov/org/icbuilding/buildingoption"; |
||||
|
|
||||
|
const { data, code, msg } = await requestPost(url, { |
||||
|
neighborHoodId: this.info.VILLAGE_ID, |
||||
|
}); |
||||
|
|
||||
|
if (code === 0) { |
||||
|
this.louList = data; |
||||
|
} else { |
||||
|
this.$message.error(msg); |
||||
|
} |
||||
|
}, |
||||
|
async getDanyuanList () { |
||||
|
const url = "/gov/org/icbuildingunit/unitoption"; |
||||
|
|
||||
|
const { data, code, msg } = await requestPost(url, { |
||||
|
buildingId: this.info.BUILD_ID, |
||||
|
}); |
||||
|
|
||||
|
if (code === 0) { |
||||
|
this.danyuanList = data; |
||||
|
} else { |
||||
|
this.$message.error(msg); |
||||
|
} |
||||
|
}, |
||||
|
async getHomeList () { |
||||
|
const url = "/gov/org/ichouse/houseoption"; |
||||
|
|
||||
|
const { data, code, msg } = await requestPost(url, { |
||||
|
unitId: this.info.UNIT_ID, |
||||
|
}); |
||||
|
|
||||
|
if (code === 0) { |
||||
|
this.homeList = data; |
||||
|
} else { |
||||
|
this.$message.error(msg); |
||||
|
} |
||||
|
}, |
||||
|
async getDetailList () { |
||||
|
const url = "/epmetuser/epidemicPrevention/info"; |
||||
|
let params = { |
||||
|
id: this.userId, |
||||
|
}; |
||||
|
|
||||
|
const { data, code, msg } = await requestPost(url, params); |
||||
|
|
||||
|
if (code === 0) { |
||||
|
const { vaccineList, natList, tripList } = data; |
||||
|
this.vaccineList = vaccineList; |
||||
|
this.natList = natList; |
||||
|
this.tripList = tripList; |
||||
|
} else { |
||||
|
this.$message.error(msg); |
||||
|
} |
||||
|
}, |
||||
|
}, |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" src="@/assets/scss/people-info.scss" scoped></style> |
||||
@ -0,0 +1,125 @@ |
|||||
|
<template> |
||||
|
<div class="m-scoll-notice"> |
||||
|
<div class="wrapper"> |
||||
|
<div class="bar" ref="barparent"> |
||||
|
<div class="bartext" ref="barchild" :style="bartextStyle"> |
||||
|
<!-- <li |
||||
|
v-for="(item, index) in list" |
||||
|
:key="item.configId + item.buildingId + index" |
||||
|
@click="toNoticeInfo(item)" |
||||
|
> |
||||
|
{{ item.noticeContent }} |
||||
|
</li> --> |
||||
|
<slot></slot> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import { requestPost } from "@/js/dai/request"; |
||||
|
|
||||
|
export default { |
||||
|
props: { |
||||
|
list: { |
||||
|
type: Array, |
||||
|
default: [], |
||||
|
}, |
||||
|
}, |
||||
|
|
||||
|
data() { |
||||
|
return { |
||||
|
parentClientWidth: 100000, |
||||
|
beyond: false, |
||||
|
}; |
||||
|
}, |
||||
|
components: {}, |
||||
|
|
||||
|
computed: { |
||||
|
bartextStyle() { |
||||
|
let len = this.list.length; |
||||
|
let beyond = this.beyond; |
||||
|
return { |
||||
|
// paddingLeft: beyond ? this.parentClientWidth + "px" : "", |
||||
|
animation: beyond |
||||
|
? `move_left_right ${len * 5}s linear 0s infinite` |
||||
|
: "", |
||||
|
}; |
||||
|
}, |
||||
|
}, |
||||
|
mounted() { |
||||
|
this.move(); |
||||
|
}, |
||||
|
|
||||
|
methods: { |
||||
|
move() { |
||||
|
const parentClientWidth = this.$refs.barparent.clientWidth; |
||||
|
this.parentClientWidth = parentClientWidth; |
||||
|
//判断动画区域是否超出父元素宽度 宽则有动画，不宽则无 |
||||
|
const parent = this.$refs.barparent; |
||||
|
const child = this.$refs.barchild; |
||||
|
console.log("对比", child.clientWidth, parent.clientWidth); |
||||
|
this.beyond = child.clientWidth > parent.clientWidth; |
||||
|
}, |
||||
|
handleCancle() { |
||||
|
this.$emit("dialogCancle"); |
||||
|
this.resetData(); |
||||
|
}, |
||||
|
|
||||
|
resetData() { |
||||
|
this.dataForm = { |
||||
|
neighborHoodId: "", // 所属小区ID |
||||
|
buildingId: "", //所属楼栋ID |
||||
|
buildingUnitId: "", //所属单元ID |
||||
|
doorName: "", //门牌号 |
||||
|
houseType: "1", //房屋类型【楼房，平房，别墅】 |
||||
|
purpose: "1", //房屋用途【住宅，商业，办公，工业，仓储，商住混用，其他】 |
||||
|
rentFlag: 1, //是否出租【是：1，否：0】 |
||||
|
ownerPhone: "", //房主电话 |
||||
|
ownerName: "", //房主名字 |
||||
|
ownerIdCard: "", //房主身份证 |
||||
|
}; |
||||
|
}, |
||||
|
}, |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss"> |
||||
|
.m-scoll-notice { |
||||
|
.wrapper { |
||||
|
// padding: 0 15px; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
// background-color: "#FFF6EC"; |
||||
|
} |
||||
|
.bar { |
||||
|
width: 100%; |
||||
|
// height: 32px; |
||||
|
// line-height: 32px; |
||||
|
overflow: hidden; |
||||
|
box-sizing: border-box; |
||||
|
} |
||||
|
.bartext { |
||||
|
white-space: nowrap; |
||||
|
display: inline-block; |
||||
|
} |
||||
|
.bartext li { |
||||
|
white-space: nowrap; |
||||
|
display: inline-block; |
||||
|
color: red; |
||||
|
font-size: 14px; |
||||
|
} |
||||
|
.state-text-overflow { |
||||
|
animation: move_left_right 120s linear 0s infinite; |
||||
|
} |
||||
|
@keyframes move_left_right { |
||||
|
from { |
||||
|
transform: translateX(0%); |
||||
|
} |
||||
|
to { |
||||
|
transform: translateX(-100%); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,230 @@ |
|||||
|
<template> |
||||
|
<div> |
||||
|
<div> |
||||
|
<el-form |
||||
|
ref="ref_form" |
||||
|
:inline="false" |
||||
|
:model="dataForm" |
||||
|
:disabled="formType === 'detail'" |
||||
|
class="form" |
||||
|
> |
||||
|
<el-form-item label="状态：" label-width="150px" style="display: block"> |
||||
|
<span>{{ dataForm.statusName }}</span> |
||||
|
</el-form-item> |
||||
|
|
||||
|
<el-form-item |
||||
|
label="所属网格：" |
||||
|
label-width="150px" |
||||
|
style="display: block" |
||||
|
> |
||||
|
<span>{{ dataForm.gridName }}</span> |
||||
|
</el-form-item> |
||||
|
|
||||
|
<el-form-item |
||||
|
label="需求类型：" |
||||
|
label-width="150px" |
||||
|
style="display: block" |
||||
|
> |
||||
|
<span>{{ dataForm.categoryName }}</span> |
||||
|
</el-form-item> |
||||
|
|
||||
|
<el-form-item |
||||
|
label="需求内容：" |
||||
|
label-width="150px" |
||||
|
style="display: block" |
||||
|
> |
||||
|
<span>{{ dataForm.content }}</span> |
||||
|
</el-form-item> |
||||
|
|
||||
|
<el-form-item |
||||
|
label="上报类型：" |
||||
|
label-width="150px" |
||||
|
style="display: block" |
||||
|
> |
||||
|
<span>{{ dataForm.reportTypeName }}</span> |
||||
|
</el-form-item> |
||||
|
|
||||
|
<el-form-item label="上报人：" label-width="150px" style="display: block"> |
||||
|
<span>{{ dataForm.reportUserName }}</span> |
||||
|
</el-form-item> |
||||
|
|
||||
|
<el-form-item |
||||
|
label="上报时间：" |
||||
|
label-width="150px" |
||||
|
style="display: block" |
||||
|
> |
||||
|
<span>{{ dataForm.reportTime }}</span> |
||||
|
</el-form-item> |
||||
|
|
||||
|
<el-form-item label="需求人：" label-width="150px" style="display: block"> |
||||
|
<span>{{ dataForm.demandUserName }}</span> |
||||
|
</el-form-item> |
||||
|
|
||||
|
<el-form-item |
||||
|
v-if="dataForm.serviceShowName" |
||||
|
label="服务方：" |
||||
|
label-width="150px" |
||||
|
style="display: block" |
||||
|
> |
||||
|
<span>{{ dataForm.serviceShowName }}</span> |
||||
|
</el-form-item> |
||||
|
|
||||
|
<el-form-item |
||||
|
v-if="dataForm.wantServiceTime" |
||||
|
label="服务时间：" |
||||
|
label-width="150px" |
||||
|
style="display: block" |
||||
|
> |
||||
|
<span>{{ dataForm.wantServiceTime }}</span> |
||||
|
</el-form-item> |
||||
|
|
||||
|
<el-form-item |
||||
|
v-if=" |
||||
|
dataForm.serviceStartTime && |
||||
|
dataForm.serviceEndTime && |
||||
|
dataForm.status == 'finished' |
||||
|
" |
||||
|
label="实际服务时间：" |
||||
|
label-width="150px" |
||||
|
style="display: block" |
||||
|
> |
||||
|
<span |
||||
|
>{{ dataForm.serviceStartTime }}至{{ |
||||
|
dataForm.serviceEndTime |
||||
|
}}</span |
||||
|
> |
||||
|
</el-form-item> |
||||
|
|
||||
|
<el-form-item |
||||
|
v-if="dataForm.finishResult && dataForm.status == 'finished'" |
||||
|
label="完成情况：" |
||||
|
label-width="150px" |
||||
|
style="display: block" |
||||
|
> |
||||
|
<span>{{ |
||||
|
dataForm.finishResult == "resolved" ? "已解决" : "未解决" |
||||
|
}}</span> |
||||
|
</el-form-item> |
||||
|
|
||||
|
<el-form-item |
||||
|
v-if="dataForm.score && dataForm.status == 'finished'" |
||||
|
label="评价得分：" |
||||
|
label-width="150px" |
||||
|
style="display: block" |
||||
|
> |
||||
|
<span>{{ dataForm.score }}</span> |
||||
|
</el-form-item> |
||||
|
|
||||
|
<el-form-item |
||||
|
v-if="dataForm.finishDesc && dataForm.status == 'finished'" |
||||
|
label="评价备注：" |
||||
|
label-width="150px" |
||||
|
style="display: block" |
||||
|
> |
||||
|
<span>{{ dataForm.finishDesc }}</span> |
||||
|
</el-form-item> |
||||
|
|
||||
|
<el-form-item |
||||
|
v-if="dataForm.cancelTime && dataForm.status == 'canceled'" |
||||
|
label="取消时间：" |
||||
|
label-width="150px" |
||||
|
style="display: block" |
||||
|
> |
||||
|
<span>{{ dataForm.cancelTime }}</span> |
||||
|
</el-form-item> |
||||
|
</el-form> |
||||
|
</div> |
||||
|
<div class="div_btn"> |
||||
|
<el-button @click="handleCancle">关闭</el-button> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import { mapGetters } from "vuex"; |
||||
|
import { Loading } from "element-ui"; // 引入Loading服务 |
||||
|
import { requestPost } from "@/js/dai/request"; |
||||
|
|
||||
|
let loading; // 加载动画 |
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
formType: "detail", //表单操作类型 add新增，edit编辑，detail详情 |
||||
|
dataForm: {}, |
||||
|
}; |
||||
|
}, |
||||
|
components: {}, |
||||
|
mounted() {}, |
||||
|
|
||||
|
methods: { |
||||
|
async initForm(type, row) { |
||||
|
this.$refs.ref_form.resetFields(); |
||||
|
|
||||
|
this.formType = type; |
||||
|
if (row) { |
||||
|
this.dataForm = JSON.parse(JSON.stringify(row)); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
handleCancle() { |
||||
|
this.$emit("dialogCancle"); |
||||
|
this.resetData(); |
||||
|
}, |
||||
|
|
||||
|
resetData() { |
||||
|
this.dataForm = {}; |
||||
|
}, |
||||
|
// 开启加载动画 |
||||
|
startLoading() { |
||||
|
loading = Loading.service({ |
||||
|
lock: true, // 是否锁定 |
||||
|
text: "正在加载……", // 加载中需要显示的文字 |
||||
|
background: "rgba(0,0,0,.7)", // 背景颜色 |
||||
|
}); |
||||
|
}, |
||||
|
// 结束加载动画 |
||||
|
endLoading() { |
||||
|
// clearTimeout(timer); |
||||
|
if (loading) { |
||||
|
loading.close(); |
||||
|
} |
||||
|
}, |
||||
|
}, |
||||
|
computed: {}, |
||||
|
props: {}, |
||||
|
}; |
||||
|
</script> |
||||
|
<style lang="scss" scoped> |
||||
|
.item_width_1 { |
||||
|
width: 500px; |
||||
|
} |
||||
|
.item_width_2 { |
||||
|
width: 400px; |
||||
|
} |
||||
|
.item_width_3 { |
||||
|
margin-left: 10px; |
||||
|
width: 200px; |
||||
|
} |
||||
|
|
||||
|
.div_btn { |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
} |
||||
|
.el-tabs { |
||||
|
margin: 0 20px; |
||||
|
} |
||||
|
.el-upload__tip { |
||||
|
color: rgb(155, 155, 155); |
||||
|
margin: 0; |
||||
|
} |
||||
|
.form { |
||||
|
margin-top: 30px; |
||||
|
height: 60vh; |
||||
|
overflow-y: auto; |
||||
|
} |
||||
|
</style> |
||||
|
<style> |
||||
|
.el-dialog__body { |
||||
|
padding: 0 10px 20px !important; |
||||
|
} |
||||
|
</style> |
||||
File diff suppressed because it is too large
Loading…
Reference in new issue