dai
4 years ago
15 changed files with 2460 additions and 107 deletions
|
After Width: | Height: | Size: 425 B |
@ -0,0 +1,217 @@ |
|||
@import "../c/config"; |
|||
@import "../c/function"; |
|||
|
|||
.m-info { |
|||
padding: 0; |
|||
.wrap { |
|||
background-color: #fff; |
|||
border-radius: 10px; |
|||
padding: 30px 40px; |
|||
.logo { |
|||
margin-bottom: 30px; |
|||
img { |
|||
display: block; |
|||
margin: 0 auto; |
|||
} |
|||
} |
|||
|
|||
.search { |
|||
margin: 0 auto 30px; |
|||
width: 750px; |
|||
height: 53px; |
|||
border: 2px solid #0082fb; |
|||
border-radius: 8px; |
|||
display: flex; |
|||
align-items: center; |
|||
|
|||
.input { |
|||
position: relative; |
|||
select { |
|||
border: none; |
|||
font-size: 16px; |
|||
width: 90px; |
|||
line-height: 32px; |
|||
text-align: center; |
|||
color: #0082fb; |
|||
} |
|||
|
|||
input { |
|||
margin-left: 20px; |
|||
width: 500px; |
|||
border: none; |
|||
line-height: 24px; |
|||
font-size: 18px; |
|||
font-family: PingFang SC; |
|||
font-weight: 400; |
|||
color: #333; |
|||
} |
|||
|
|||
.close-btn { |
|||
position: absolute; |
|||
right: 0; |
|||
top: 0; |
|||
bottom: 0; |
|||
margin: auto 0; |
|||
width: 30px; |
|||
height: 30px; |
|||
background-color: #eee; |
|||
border-radius: 100%; |
|||
cursor: pointer; |
|||
|
|||
img { |
|||
display: block; |
|||
margin: 8px auto; |
|||
width: 14px; |
|||
height: 14px; |
|||
opacity: 0.3; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.btn { |
|||
margin-left: auto; |
|||
width: 120px; |
|||
line-height: 49px; |
|||
background: #0082fb; |
|||
border-radius: 0px 6 px 6 px 0px; |
|||
font-size: 22px; |
|||
text-align: center; |
|||
font-family: PingFang SC; |
|||
font-weight: 500; |
|||
color: #ffffff; |
|||
cursor: pointer; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
.m-panel { |
|||
padding: 0 10px; |
|||
|
|||
.operate { |
|||
text-align: right; |
|||
} |
|||
} |
|||
.m-list { |
|||
.list-title { |
|||
margin-bottom: 20px; |
|||
font-size: 24px; |
|||
font-family: PingFang SC; |
|||
font-weight: bold; |
|||
color: #333333; |
|||
} |
|||
|
|||
.list-title2 { |
|||
margin-bottom: 10px; |
|||
font-size: 16px; |
|||
font-family: PingFang SC; |
|||
font-weight: bold; |
|||
color: #333333; |
|||
} |
|||
|
|||
.list { |
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
|
|||
.item { |
|||
position: relative; |
|||
margin-right: 46px; |
|||
margin-bottom: 20px; |
|||
width: 80px; |
|||
text-align: center; |
|||
cursor: pointer; |
|||
|
|||
.corner-mark { |
|||
position: absolute; |
|||
top: -4px; |
|||
right: -4px; |
|||
color: #ccc; |
|||
font-size: 20px; |
|||
z-index: 1; |
|||
&.z-on { |
|||
color: #0082fb; |
|||
} |
|||
} |
|||
|
|||
.icon { |
|||
position: relative; |
|||
display: block; |
|||
margin: 0 auto; |
|||
width: 78px; |
|||
height: 78px; |
|||
|
|||
&::before { |
|||
content: ""; |
|||
position: absolute; |
|||
z-index: 0; |
|||
display: block; |
|||
top: 0; |
|||
left: 0; |
|||
right: 0; |
|||
bottom: 0; |
|||
margin: auto; |
|||
width: 64px; |
|||
height: 64px; |
|||
border-radius: 10px; |
|||
background-color: #f4f4f4; |
|||
} |
|||
|
|||
img { |
|||
position: relative; |
|||
width: 78px; |
|||
height: 78px; |
|||
object-fit: cover; |
|||
} |
|||
|
|||
.icon-svg { |
|||
position: relative; |
|||
display: block; |
|||
margin: auto; |
|||
width: 78px; |
|||
height: 78px; |
|||
object-fit: cover; |
|||
} |
|||
} |
|||
p { |
|||
margin: 0; |
|||
line-height: 24px; |
|||
font-size: 16px; |
|||
font-family: PingFang SC; |
|||
font-weight: 400; |
|||
color: #333333; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.m-tb { |
|||
margin-bottom: 20px; |
|||
} |
|||
|
|||
.m-data { |
|||
padding: 0; |
|||
margin-top: 20px; |
|||
|
|||
.wrap { |
|||
background-color: #fff; |
|||
border-radius: 10px; |
|||
padding: 30px 40px; |
|||
|
|||
.headline { |
|||
margin-bottom: 20px; |
|||
font-size: 24px; |
|||
font-family: PingFang SC; |
|||
font-weight: bold; |
|||
color: #333333; |
|||
} |
|||
|
|||
.cnt { |
|||
display: flex; |
|||
.chart { |
|||
width: 500px; |
|||
} |
|||
.tb { |
|||
width: calc(100% - 500px); |
|||
} |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,211 @@ |
|||
<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: flex-end; |
|||
} |
|||
.el-tabs { |
|||
margin: 0 20px; |
|||
} |
|||
.el-upload__tip { |
|||
color: rgb(155, 155, 155); |
|||
margin: 0; |
|||
} |
|||
.form { |
|||
margin-top: 30px; |
|||
} |
|||
</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,513 @@ |
|||
<template> |
|||
<div class="m-pop"> |
|||
<div class="wrap"> |
|||
<cpt-card> |
|||
<div class="title"> |
|||
<img src="@/assets/img/shuju/title-tip.png" /> |
|||
<span>更多信息</span> |
|||
</div> |
|||
|
|||
<div class="btn-close" @click="handleClose"> |
|||
<img src="@/assets/img/shuju/people/close.png" /> |
|||
</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.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 class="list" v-else> |
|||
<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' |
|||
" |
|||
>{{ |
|||
!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> |
|||
</cpt-card> |
|||
</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: "", |
|||
}, |
|||
}, |
|||
|
|||
components: { |
|||
cptCard, |
|||
}, |
|||
|
|||
data() { |
|||
return { |
|||
fieldList: [], |
|||
groupList: [], |
|||
groupIndex: 0, |
|||
startGroupIndex: 0, |
|||
info: {}, |
|||
allInfo: {}, |
|||
|
|||
xiaoquList: [], |
|||
louList: [], |
|||
danyuanList: [], |
|||
homeList: [], |
|||
}; |
|||
}, |
|||
|
|||
computed: { |
|||
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: { |
|||
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.getXiaoquList(); |
|||
this.getLouList(); |
|||
this.getDanyuanList(); |
|||
this.getHomeList(); |
|||
}, |
|||
|
|||
getOptionLabel(options, value, type = "") { |
|||
if (Array.isArray(options)) { |
|||
let valueArr = value.split(","); |
|||
if (type == "cascader") { |
|||
if (valueArr.length > 0) { |
|||
let level1 = options.find((item) => item.value == valueArr[0]); |
|||
if (level1) { |
|||
if (valueArr.length > 1 && level1.children) { |
|||
let level2 = level1.children.find( |
|||
(item) => item.value == valueArr[1] |
|||
); |
|||
if (level2) { |
|||
return level1.label + "-" + level2.label; |
|||
} |
|||
} |
|||
return level1.label; |
|||
} |
|||
} |
|||
} else { |
|||
return valueArr |
|||
.map((val) => { |
|||
let item = options.find((item) => item.value == val); |
|||
if (item && item.label) { |
|||
return item.label; |
|||
} |
|||
return "--"; |
|||
}) |
|||
.join("、"); |
|||
} |
|||
} |
|||
return "--"; |
|||
}, |
|||
|
|||
//加载组织数据 |
|||
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]; |
|||
} |
|||
}); |
|||
}); |
|||
console.log("1111111111111111111111111", this.groupList); |
|||
|
|||
this.groupList.forEach((subList, index) => { |
|||
subList.itemList.forEach(async (item, subIndex) => { |
|||
if (item.optionSourceType == "remote" && item.optionSourceValue) { |
|||
this.groupList[index].itemList[subIndex].options = |
|||
await this.getOptions(item.optionSourceValue); |
|||
} |
|||
}); |
|||
}); |
|||
} 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); |
|||
} |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style |
|||
lang="scss" |
|||
src="@/assets/scss/modules/visual/people.scss" |
|||
scoped |
|||
></style> |
|||
@ -0,0 +1,205 @@ |
|||
<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 |
|||
label="服务方" |
|||
label-width="150px" |
|||
style="display: block" |
|||
> |
|||
<span>{{ dataForm.serviceShowName }}</span> |
|||
</el-form-item> |
|||
|
|||
<el-form-item |
|||
label="服务时间" |
|||
label-width="150px" |
|||
style="display: block" |
|||
> |
|||
<span>{{ dataForm.wantServiceTime }}</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: flex-end; |
|||
} |
|||
.el-tabs { |
|||
margin: 0 20px; |
|||
} |
|||
.el-upload__tip { |
|||
color: rgb(155, 155, 155); |
|||
margin: 0; |
|||
} |
|||
.form { |
|||
margin-top: 30px; |
|||
} |
|||
</style> |
|||
<style> |
|||
.el-dialog__body { |
|||
padding: 0 10px 20px !important; |
|||
} |
|||
</style> |
|||
File diff suppressed because it is too large
Loading…
Reference in new issue