547 lines
22 KiB
HTML
547 lines
22 KiB
HTML
|
||
<!DOCTYPE html>
|
||
<html>
|
||
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<link rel="stylesheet" href="../../Contents/index.css">
|
||
<script src="../../Contents/vue.min.js"></script>
|
||
<script src="../../Contents/index.js"></script>
|
||
<script src="../../Contents/axios.min.js"></script>
|
||
<script src="../../Contents/qs.min.js"></script>
|
||
</head>
|
||
|
||
<body>
|
||
<div id="app" v-loading="loading">
|
||
<h3 style="text-align:center;">宁波既有建筑外墙脱落问卷调查结果-幢列表</h3>
|
||
<el-form label-position="left" ref="form" :model="form" label-width="120px" style="margin-top:15px;">
|
||
<el-form-item label="社区/小区：" prop="name">
|
||
<el-select v-model="form.communityId" filterable clearable placeholder="请选择" @change="selectCommunity">
|
||
<el-option v-for="item in communitys" :key="item.id" :label="item.name" :value="item.id">
|
||
</el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="手机号码：" prop="name">
|
||
<el-input v-model="form.submitCode" style="width:300px"></el-input>
|
||
</el-form-item>
|
||
<el-form-item>
|
||
<el-button type="primary" @click.prevent="onSubmit('form')">查询</el-button>
|
||
<el-button @click.prevent="reset('form')">重置</el-button>
|
||
</el-form-item>
|
||
</el-form>
|
||
<el-table :data="tableDataBuilding" style="width: 98%;margin:0 auto;" tooltip-effect="dark" @selection-change="handleSelectionChange" row-key="id"
|
||
:expand-row-keys="expandChilds" @row-click="clickRowHandleBuilding">
|
||
<el-table-column type="expand">
|
||
<template slot-scope="props">
|
||
<el-form label-position="left" class="demo-table-expand" :model="props.row" style="width: 90%;margin:0 auto;">
|
||
<el-form-item label="手机号码：">
|
||
<span style="font-weight:bold;">{{ props.row.submitCode }}</span>
|
||
</el-form-item>
|
||
<el-form-item label="社区/小区名称：">
|
||
<span style="font-weight:bold;">{{ props.row.communityName }}</span>
|
||
</el-form-item>
|
||
<el-form-item label="提交日期：">
|
||
<span style="font-weight:bold;">{{ dateFormat("mm-dd", props.row.createtime )}}</span>
|
||
</el-form-item>
|
||
<el-form-item label="幢名称：">
|
||
<span style="font-weight:bold;">{{ props.row.buildingName }}</span>
|
||
</el-form-item>
|
||
<el-form-item label="地址：">
|
||
<span style="font-weight:bold;">{{ props.row.address }}</span>
|
||
</el-form-item>
|
||
<el-form-item label="层数：">
|
||
<span style="font-weight:bold;">{{ props.row.levelCount }}</span>
|
||
</el-form-item>
|
||
<el-form-item label="总户数：">
|
||
<span style="font-weight:bold;">{{ props.row.houseHolds }}</span>
|
||
</el-form-item>
|
||
<el-form-item label="建设单位：">
|
||
<span style="font-weight:bold;">{{ props.row.buildingUnit }}</span>
|
||
</el-form-item>
|
||
<el-form-item label="设计单位：">
|
||
<span style="font-weight:bold;">{{ props.row.desingerUnit }}</span>
|
||
</el-form-item>
|
||
<el-form-item label="施工单位：">
|
||
<span style="font-weight:bold;">{{ props.row.constructionUnit }}</span>
|
||
</el-form-item>
|
||
<el-form-item label="监理单位：">
|
||
<span style="font-weight:bold;">{{ props.row.monitorUnit }}</span>
|
||
</el-form-item>
|
||
<el-form-item label="物业单位：">
|
||
<span style="font-weight:bold;">{{ props.row.wuYeUnit }}</span>
|
||
</el-form-item>
|
||
<el-form-item label="墙体问题的类型是：">
|
||
<span style="font-weight:bold;">{{ props.row.curwallproblems }}</span>
|
||
</el-form-item>
|
||
<el-form-item label="其他：">
|
||
<span style="font-weight:bold;">{{ props.row.curwallproblemother }}</span>
|
||
</el-form-item>
|
||
<el-form-item label="哪个问题最先开始出现？" v-if="props.row.curwallproblems?.length>1">
|
||
<span style="font-weight:bold;">{{ props.row.wallproblemsfirst }}</span>
|
||
</el-form-item>
|
||
<el-form-item label="第一次出现墙体问题是建成后____年？">
|
||
<span style="font-weight:bold;">{{ props.row.firstproblemdate }}</span>
|
||
</el-form-item>
|
||
<el-form-item label="墙体脱落发生频率如何？">
|
||
<span style="font-weight:bold;">{{ props.row.problemfrequency }}</span>
|
||
</el-form-item>
|
||
<el-form-item label="问题多发生在哪个季节？">
|
||
<span style="font-weight:bold;">{{ props.row.problemseason }}</span>
|
||
</el-form-item>
|
||
<el-form-item label="墙体问题发生的朝向是哪面？">
|
||
<span style="font-weight:bold;">{{ props.row.wallproblemtoward }}</span>
|
||
</el-form-item>
|
||
<el-form-item label="问题照片：">
|
||
<div class="blocks">
|
||
<div class="block" v-for="fit in props.row.outside_wall_building_photos" :key="fit" @click="handlePreview(fit,props.row.outside_wall_building_photos)">
|
||
<span class="title">{{ fit.toward }}</span>
|
||
<el-avatar shape="square" :size="100" fit="fill" :src="fit.preview"></el-avatar>
|
||
</div>
|
||
</div>
|
||
</el-form-item>
|
||
<el-form-item label="发生外墙问题的范围有多大？">
|
||
<span style="font-weight:bold;">{{ props.row.problemfanwei }}</span>
|
||
</el-form-item>
|
||
<el-form-item label="外墙问题发生在哪个高度？">
|
||
<span style="font-weight:bold;">{{ props.row.problemheight }}</span>
|
||
</el-form-item>
|
||
<el-form-item label="掉落物是什么？">
|
||
<span style="font-weight:bold;">{{ props.row.diaoluowu }}</span>
|
||
</el-form-item>
|
||
</el-form>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="手机号码" width="120"><template slot-scope="props">{{ props.row.submitCode}}</template></el-table-column>
|
||
<el-table-column label="社区/小区名称" width="200"><template slot-scope="props">{{ props.row.communityName}}</template></el-table-column>
|
||
<el-table-column label="提交日期" width="120"><template slot-scope="props">{{ dateFormat("mm-dd", props.row.createtime )}}</template></el-table-column>
|
||
<el-table-column label="幢名称"><template slot-scope="props">{{ props.row.buildingName}}</template></el-table-column>
|
||
<el-table-column label="地址"><template slot-scope="props">{{ props.row.address}}</template></el-table-column>
|
||
</el-table>
|
||
|
||
|
||
<h3 style="text-align:center;">
|
||
<el-button @click="toCommunityPage">查看社区统计</el-button>
|
||
<el-button type="primary" @click="export_excel" :loading="loading">导出Excel</el-button>
|
||
</h3>
|
||
<el-image ref="myImg" class="my-img" :src="dialogImageUrl" :preview-src-list="dialogImageUrls">
|
||
</el-image>
|
||
</div>
|
||
</body>
|
||
<script>
|
||
new Vue({
|
||
el: '#app',
|
||
data: function () {
|
||
return {
|
||
form: {
|
||
|
||
},
|
||
tableDataBuilding: [],
|
||
loading: false,
|
||
token: '',
|
||
communitys: [],
|
||
communityId: '',
|
||
// 获取row的key值
|
||
getRowKeys(row) {
|
||
return row.id;
|
||
},
|
||
// 要展开的行，数值的元素是row的key值
|
||
expands: [],
|
||
expandChilds: [],
|
||
childFileList: [],
|
||
dialogImageUrl: '',
|
||
dialogImageUrls: [],
|
||
}
|
||
},
|
||
created: function () {
|
||
this.check_login()
|
||
this.loading = true;
|
||
this.GetCommunitys('');
|
||
|
||
},
|
||
methods: {
|
||
handlePreview(src, srcs) {
|
||
this.loading = true;
|
||
console.log(src);
|
||
this.dialogImageUrl = src.preview;
|
||
this.dialogImageUrls = srcs.map(a => { return a.preview })
|
||
this.$refs.myImg.showViewer = true
|
||
const m = (e) => { e.preventDefault() };
|
||
document.body.style.overflow = 'hidden';
|
||
document.addEventListener("touchmove", m, false); // 禁止页面滑动
|
||
this.loading = false;
|
||
},
|
||
clickRowHandleBuilding(row, column, event) {
|
||
if (this.expandChilds.includes(row.id)) {
|
||
//return;
|
||
this.expandChilds = this.expandChilds.filter(val => val !== row.id);
|
||
} else {
|
||
this.expandChilds = [];
|
||
this.expandChilds.push(row.id);
|
||
}
|
||
},
|
||
clickRowHandle(row, column, event) {
|
||
if (this.expands.includes(row.id)) {
|
||
//return;
|
||
this.expands = this.expands.filter(val => val !== row.id);
|
||
//收缩
|
||
this.tableDataBuilding = [];
|
||
} else {
|
||
let _this = this;
|
||
const loading = this.$loading({
|
||
lock: true,
|
||
text: '加载中...请稍候',
|
||
spinner: 'el-icon-loading',
|
||
background: 'rgba(0, 0, 0, 0.7)'
|
||
});
|
||
axios({
|
||
headers: { 'Content-Type': 'application/json;charset=UTF-8' },
|
||
method: 'post',
|
||
url: `/gb/yjb/api/outsidewall/querybuilding`,
|
||
data: { wallId: row.id },
|
||
responseType: "json",
|
||
headers: {
|
||
Authorization: 'Bearer ' + _this.token
|
||
}
|
||
}).then(async response => {
|
||
this.expands = [];
|
||
this.expands.push(row.id);
|
||
if (response.data.success == true) {
|
||
_this.tableDataBuilding = response.data.data;
|
||
//_this.childFileList = [];
|
||
//_this.tableDataBuilding.forEach((a) => {
|
||
// _this.childFileList.push({ filelist1: a.outside_wall_building_photo1, filelist2: a.outside_wall_building_photo2, filelist3: outside_wall_building_photo3, filelist4: outside_wall_building_photo4 })
|
||
//});
|
||
} else {
|
||
_this.$alert(`<div>` + response.data.message + `</div>`, '错误', {
|
||
confirmButtonText: '确定', dangerouslyUseHTMLString: true, center: true, closeOnClickModal: true
|
||
}).then(a => { }).catch(err => { console.log(err) });
|
||
}
|
||
loading.close();
|
||
}).catch(async error => {
|
||
console.log(error)
|
||
_this.$message({
|
||
type: 'error',
|
||
message: error.message
|
||
});
|
||
loading.close();
|
||
})
|
||
}
|
||
},
|
||
handleSelectionChange(val) {
|
||
this.multipleSelection = val;
|
||
},
|
||
GetCommunitys(queryString) {
|
||
let _this = this;
|
||
axios({
|
||
headers: { 'Content-Type': 'application/json;charset=UTF-8' },
|
||
method: 'get',
|
||
url: `/gb/yjb/api/outsidewall/Communitys?access_token=${window.sessionStorage.getItem('__TOKEN')}&searchkey=` + queryString,
|
||
responseType: "json",
|
||
}).then(async response => {
|
||
_this.communitys = response.data.data
|
||
_this.loading = false;
|
||
}).catch(async error => {
|
||
console.log(error)
|
||
_this.$message({
|
||
type: 'error',
|
||
message: error.message
|
||
})
|
||
_this.loading = false;
|
||
})
|
||
},
|
||
selectCommunity(v) {
|
||
//this.form.communityName = this.getLabel(this.communitys, v);
|
||
this.communityId = v
|
||
},
|
||
onSubmit(formName) {
|
||
this.loading = true;
|
||
console.log('submit!');
|
||
let _this = this;
|
||
this.$refs[formName].validate((valid) => { // 为表单绑定验证功能
|
||
if (valid) {
|
||
//this.$alert("成功", "提示")
|
||
axios({
|
||
headers: { 'Content-Type': 'application/json;charset=UTF-8' },
|
||
method: 'post',
|
||
url: '/gb/yjb/api/outsidewall/querybuildings',
|
||
data: _this.form,
|
||
responseType: "json",
|
||
headers: {
|
||
Authorization: 'Bearer ' + _this.token
|
||
}
|
||
}).then(async response => {
|
||
if (response.data.success == true) {
|
||
_this.tableDataBuilding = response.data.data;
|
||
} else {
|
||
_this.$alert(`<div>` + response.data.message + `</div>`, '错误', {
|
||
confirmButtonText: '确定', dangerouslyUseHTMLString: true, center: true, closeOnClickModal: true
|
||
}).then(a => { }).catch(err => { console.log(err) });
|
||
}
|
||
_this.loading = false;
|
||
}).catch(async error => {
|
||
console.log(error)
|
||
_this.$message({
|
||
type: 'error',
|
||
message: error.message
|
||
})
|
||
_this.loading = false;
|
||
})
|
||
|
||
}
|
||
});
|
||
}, reset(formName) {
|
||
this.form = {}
|
||
},
|
||
export_excel() {
|
||
this.loading = true;
|
||
this.download('/gb/yjb/api/outsidewall/export_excel', this.dateFormat("YYYYmmddHHMMSS", new Date()) + "-问卷调查结果.xlsx", this.loading_false);
|
||
},
|
||
check_login() {
|
||
this.token = window.sessionStorage.getItem('__TOKEN');
|
||
if (!this.token)
|
||
location = '/202307/html/manage/login.html'
|
||
},
|
||
toCommunityPage() {
|
||
location = '/202307/html/OutsideWall/Result.html'
|
||
},
|
||
loading_false() { this.loading = false },
|
||
|
||
download(url, filename, callback) {
|
||
let _this = this;
|
||
axios({
|
||
headers: { 'Content-Type': 'application/json;charset=UTF-8' },
|
||
method: 'post',
|
||
url: url,
|
||
data: {},
|
||
responseType: "blob",
|
||
headers: {
|
||
Authorization: 'Bearer ' + _this.token
|
||
}
|
||
}).then(function (response) {
|
||
console.log(response);
|
||
//解析文件充blod中解析
|
||
const url = window.URL.createObjectURL(
|
||
new Blob([response.data], { type: "application/vnd.ms-excel" })
|
||
);
|
||
const link = document.createElement("a");
|
||
link.style.display = "none";
|
||
link.href = url;
|
||
link.setAttribute("download", filename);
|
||
document.body.appendChild(link);
|
||
link.click();
|
||
document.body.removeChild(link);
|
||
callback();
|
||
}).catch(function (error) {
|
||
callback();
|
||
console.log(error)
|
||
_this.$message({
|
||
type: 'error',
|
||
message: error.message
|
||
})
|
||
})
|
||
},
|
||
getMonthWeek(now) {
|
||
var a = now.getYear();
|
||
var b = now.getMonth() + 1;
|
||
var c = now.getDate();
|
||
/*
|
||
a = d = 当前日期
|
||
b = 6 - w = 当前周的还有几天过完(不算今天)
|
||
a + b 的和在除以7 就是当天是当前月份的第几周
|
||
*/
|
||
var date = new Date(a, parseInt(b) - 1, c), w = date.getDay(), d = date.getDate();
|
||
return Math.ceil(
|
||
(d + 6 - w) / 7
|
||
);
|
||
},
|
||
dateFormat(fmt, d) {
|
||
const date = new Date(d);
|
||
let ret;
|
||
const opt = {
|
||
"Y+": date.getFullYear().toString(), // 年
|
||
"m+": (date.getMonth() + 1).toString(), // 月
|
||
"d+": date.getDate().toString(), // 日
|
||
"H+": date.getHours().toString(), // 时
|
||
"M+": date.getMinutes().toString(), // 分
|
||
"S+": date.getSeconds().toString() // 秒
|
||
// 有其他格式化字符需求可以继续添加，必须转化成字符串
|
||
};
|
||
for (let k in opt) {
|
||
ret = new RegExp("(" + k + ")").exec(fmt);
|
||
if (ret) {
|
||
fmt = fmt.replace(ret[1], (ret[1].length == 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, "0")))
|
||
};
|
||
};
|
||
return fmt;
|
||
}
|
||
}
|
||
})
|
||
</script>
|
||
<style lang="less">
|
||
.my-img {
|
||
display: none;
|
||
width: 100px;
|
||
height: 100px;
|
||
}
|
||
</style>
|
||
<style scoped>
|
||
.demo-table-expand .el-form-item {
|
||
border-bottom: 1px solid rgb(204, 204, 204);
|
||
}
|
||
|
||
.blocks {
|
||
display: flex;
|
||
text-align: center;
|
||
justify-content: space-between;
|
||
flex-wrap: wrap;
|
||
max-width: 1000px;
|
||
}
|
||
|
||
.block {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
flex-grow: 0;
|
||
margin-right: 10px;
|
||
}
|
||
|
||
.block .title {
|
||
margin-bottom: 10px;
|
||
font-size: 14px;
|
||
color: #8492a6;
|
||
}
|
||
|
||
.el-avatar {
|
||
background: none !important;
|
||
}
|
||
|
||
.el-avatar img {
|
||
margin: 0 auto;
|
||
width: inherit;
|
||
height: auto !important;
|
||
}
|
||
|
||
.el-upload-list__item:first-child {
|
||
margin-top: 0 !important;
|
||
}
|
||
|
||
.el-upload-list__item {
|
||
margin-top: 0 !important;
|
||
}
|
||
|
||
.upload-demo {
|
||
margin-bottom: 20px;
|
||
border: 1px solid #ccc;
|
||
border-radius: 4px;
|
||
padding: 5px;
|
||
box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
|
||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
.el-upload-dragger {
|
||
width: 200px !important;
|
||
height: 50px !important;
|
||
}
|
||
|
||
.el-upload-dragger .el-icon-upload {
|
||
display: none !important;
|
||
}
|
||
|
||
.el-upload-dragger .el-upload__text {
|
||
line-height: 50px !important;
|
||
}
|
||
|
||
.el-upload__tip {
|
||
margin-top: -23px !important;
|
||
}
|
||
|
||
.demo-table-expand {
|
||
font-size: 0;
|
||
}
|
||
|
||
.demo-table-expand label {
|
||
/* width: 90px;*/
|
||
color: #99a9bf;
|
||
}
|
||
|
||
.demo-table-expand .el-form-item {
|
||
margin-right: 0;
|
||
margin-bottom: 5px;
|
||
width: 90%;
|
||
}
|
||
|
||
.buhuanhang {
|
||
white-space: nowrap;
|
||
width: 21%;
|
||
}
|
||
|
||
.text {
|
||
font-size: 14px;
|
||
}
|
||
|
||
.item {
|
||
padding: 18px 0;
|
||
}
|
||
|
||
.box-card {
|
||
width: 98%;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.el-card__body {
|
||
padding: 12px;
|
||
}
|
||
|
||
.el-card__body p {
|
||
margin: 0px;
|
||
margin-bottom: 5px;
|
||
line-height: 1.2;
|
||
}
|
||
|
||
.el-radio.is-bordered {
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.el-radio-button--small .el-radio-button__inner {
|
||
border-left: 1px solid #DCDFE6;
|
||
}
|
||
</style>
|
||
<style scoped>
|
||
.buhuanhang {
|
||
white-space: nowrap;
|
||
width: 21%;
|
||
}
|
||
|
||
.text {
|
||
font-size: 14px;
|
||
}
|
||
|
||
.item {
|
||
padding: 18px 0;
|
||
}
|
||
|
||
.box-card {
|
||
width: 98%;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.el-card__body {
|
||
padding: 12px;
|
||
}
|
||
|
||
.el-card__body p {
|
||
margin: 0px;
|
||
margin-bottom: 5px;
|
||
line-height: 1.2;
|
||
}
|
||
|
||
.el-radio.is-bordered {
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.el-radio-button--small .el-radio-button__inner {
|
||
border-left: 1px solid #DCDFE6;
|
||
}
|
||
</style>
|
||
|
||
</html> |