chengdandan
/
shigongsi
Template
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

详情页修改

This commit is contained in:
徐克 2022-08-04 18:19:34 +08:00
parent 9a0e800f49
commit 38757ba031
2 changed files with 281 additions and 82 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
src/components/BasicBox4/index.vue
View File

@ -18,6 +18,12 @@
</el-select> </el-select>
</template> </template>
</div> --> </div> -->
<div class="search-middle">
<div class="search-container" @click="search('111')">
<input type="text" name="" id="" placeholder="请输入名称点击查询" class="inputStyle">
<button>搜索</button>
</div>
</div>
<slot name="top"></slot> <slot name="top"></slot>
<ul v-if="dataSource"> <ul v-if="dataSource">
<li v-for="(item, index) in dataSource " :key="index"> <li v-for="(item, index) in dataSource " :key="index">
@ -59,7 +65,7 @@ export default {
}, },
mounted() { mounted() {
console.log(this.dataSource);
}, },
beforeDestroy() { beforeDestroy() {
@ -71,6 +77,10 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@import "~@/common/var.scss"; @import "~@/common/var.scss";
.timeStle1 { .timeStle1 {
@ -173,4 +183,54 @@ width: 100%;
} }
} }
.search-middle {
height: 45px;
background: rgba(16, 29, 37, 0.8);
border: 2px solid #29a3d3a1;
// width: 80%;
width: 95.6%;
float: right;
margin-right: 2%;
}
.search-middle .search-container {
position: relative;
width: 100%;
height: 100%;
}
.search-middle .search-container input:focus {
outline: none;
}
.search-middle .search-container input::-webkit-input-placeholder {
color: rgb(211, 245, 255);
}
.search-middle .search-container button {
width: 80px;
height: 100%;
position: absolute;
right: 0;
top: 0;
background-color: transparent;
background: 10px 10px url(../../assets/search-button.png) no-repeat;
border: 0;
border-radius: 0;
text-align: center;
line-height: 30px;
cursor: pointer;
padding-left: 20px;
color: #b4e9ff;
}
.inputStyle{
height: 40px;
background: rgba(16, 29, 37, 0.8);
border: 2px solid transparent;
// width: 80%;
width: 80%;
// float: right;
// margin-right: 2%;
color: #fff;
}
</style> </style>

287
src/views/land/children/index.vue
View File

@ -19,39 +19,56 @@
<!-- <BasicBox2 class="basicInfo" :title="tit" :dataSource="workList" ></BasicBox2> <!-- <BasicBox2 class="basicInfo" :title="tit" :dataSource="workList" ></BasicBox2>
<BasicBox2 class="basicInfo" title="房产证信息" :dataSource="workListFCZ" v-show="fczShow"></BasicBox2> --> <BasicBox2 class="basicInfo" title="房产证信息" :dataSource="workListFCZ" v-show="fczShow"></BasicBox2> -->
<!-- <div v-for="item in floorInfo" :key="item.id" style="width:100px;height: auto;"> --> <!-- <div v-for="item in floorInfo" :key="item.id" style="width:100px;height: auto;"> -->
<div v-if="val"> <div v-show="val">
<div style=" margin-top: 4%;text-align: center;top: 1px;width: 182px;" @click=showChild() <div style=" margin-top: 4%;text-align: center;top: 1px;width: 182px;" v-show="!isShow"
v-show="!isShow"> v-for="(item,index) in floorNameQcData" :key="index">
<ul @click=showChild(item,index)>
<li class=" leftFloor">{{item}}</li>
</ul>
<ul> <ul>
<li class="leftFloor">{{floorInfo1.floor}}</li> <div style="margin-top: 4%;text-align: center;top: 1px;" v-show="isShow"
v-for="(item,index) in departQcData" :key="index">
<ul @click="departSearch(item)">
<li class="leftFloor1">{{item}}</li>
</ul> </ul>
</div> </div>
<div style="margin-top: 4%;text-align: center;top: 1px;width: 182px;" @click=showChild() v-show="isShow"> </ul>
</div>
<div style="margin-top: 4%;text-align: center;top: 1px;width: 182px;" v-show="isShow"
v-for="(item,index) in floorNameQcData" :key="index">
<ul @click=showChild()>
<li class="leftFloors">{{item}}</li>
</ul>
<ul> <ul>
<li class="leftFloors">{{floorInfo1.floor}}</li> <div style="margin-top: 4%;text-align: center;top: 1px;" v-show="isShow"
v-for="(item,index) in departQcData" :key="index">
<ul @click="departSearch(item)">
<li class="leftFloor1">{{item}}</li>
</ul>
</div>
</ul> </ul>
</div> </div>
</div> </div>
<div v-else-if="!val"> <div v-show="!val">
<div style=" margin-top: 4%;text-align: center;top: 1px;width: 182px;" @click=showChild() <div style=" margin-top: 4%;text-align: center;top: 1px;width: 182px;" v-show="!isShow">
v-show="!isShow"> <ul @click=showChild()>
<ul>
<li class="leftFloor">{{floorInfo}}</li> <li class="leftFloor">{{floorInfo}}</li>
</ul> </ul>
</div> </div>
<div style="margin-top: 4%;text-align: center;top: 1px;width: 182px;" @click=showChild() v-show="isShow"> <div style="margin-top: 4%;text-align: center;top: 1px;width: 182px;" v-show="isShow">
<ul> <ul @click=showChild()>
<li class="leftFloors">{{floorInfo}}</li> <li class="leftFloors">{{floorInfo}}</li>
</ul> </ul>
</div> </div>
<div style="margin-top: 4%;text-align: center;top: 1px;" v-show="isShow"
v-for="(item,index) in departQcData" :key="index">
<ul @click="departSearch(item)">
<li class="leftFloor1">{{item}}</li>
</ul>
</div>
</div> </div>
<div style="margin-top: 4%;text-align: center;top: 1px;" v-show="isShow"
v-for="(item,index) in departQcData" :key="index">
<ul>
<li class="leftFloor1">{{item}}</li>
</ul>
</div>
</div> </div>
<!-- <div class="center"> <!-- <div class="center">
@ -64,13 +81,15 @@
<BasicBox4 title="生产用房" :dataSource="false" :options="options" :valueData="valueData"> <BasicBox4 title="生产用房" :dataSource="false" :options="options" :valueData="valueData">
<!-- <template slot="top"> <template slot="top">
<customDvScrollBoard2 :config="config5 <customDvScrollBoard2 :config="config6
" :style="{ height: '650px', padding: '10px' }"></customDvScrollBoard2> " :style="{ height: '650px', padding: '10px' }" :key="componentKey1" v-show="!isShow1">
</template> --> </customDvScrollBoard2>
</template>
<template slot="top"> <template slot="top">
<customDvScrollBoard2 :config="config5 <customDvScrollBoard2 :config="config5
" :style="{ height: '650px', padding: '10px' }" :key="componentKey"></customDvScrollBoard2> " :style="{ height: '650px', padding: '10px' }" :key="componentKey" v-show="isShow1">
</customDvScrollBoard2>
</template> </template>
</BasicBox4> </BasicBox4>
</div> </div>
@ -95,14 +114,23 @@ export default {
mixins: [drawMixin], mixins: [drawMixin],
data() { data() {
return { return {
componentKey:0, arr: [],
componentKey: 0,
componentKey1: 0,
isShow1: true,
isShow2: true,
val: true, val: true,
isShow:true, isShow:false,
floorInfo: '', floorInfo: [],
floorInfo1: {}, floorInfo1: [],
departInfo: [], departInfo: [],
tableData:[], departInfo1: [],
departQcData:[], tableData: [],
tableData1: [],
tableData2: [],
departQcData: [],
departQcData1: [],
floorNameQcData: [],
unityUrl:"/Publish/city-build/index.html", unityUrl:"/Publish/city-build/index.html",
titleData:"城北基地", titleData:"城北基地",
valueData: '38', valueData: '38',
@ -276,6 +304,19 @@ export default {
], ],
columnWidth: [60], columnWidth: [60],
},
config6: {
header: ['部门', '楼层', '房号', '名称'],
rowNum: 12,
data:
// [['2019', '2', '16.67%'],
// ['2021', '2', '16.67%'],
// ['2022', '5', '66.67%'],['无', '无', '无'],]
[
],
columnWidth: [60],
}, },
type:'', type:'',
tit:"不动产产权证信息", tit:"不动产产权证信息",
@ -291,7 +332,6 @@ export default {
customDvScrollBoard2, customDvScrollBoard2,
}, },
mounted() { mounted() {
this.timeFn(); this.timeFn();
this.cancelLoading(); this.cancelLoading();
console.log("this.$route.params",this.$route.params.id) console.log("this.$route.params",this.$route.params.id)
@ -324,6 +364,12 @@ this.unityUrl="/Publish/city-build/index.html"
clearInterval(this.timing); clearInterval(this.timing);
}, },
methods: { methods: {
//更新的点击事件
// showChild(item,type) {
// let fn = `this.showChild${type}(${item})`;
// eval(fn);
// console.log(fn);
// },
//重新渲染 //重新渲染
forceRerender() { forceRerender() {
this.componentKey ++; this.componentKey ++;
@ -455,61 +501,89 @@ console.log("val",val)
axios.get('/json/'+val+ '.json') axios.get('/json/'+val+ '.json')
.then(result => { .then(result => {
console.log('val', result.data) console.log('val', result.data)
this.arr = result.data
for (var a = 0; a < result.data.length; a++) { for (var a = 0; a < result.data.length; a++) {
//拿到楼号 //拿到楼号
that.floorInfo1 = result.data[0] // that.floorInfo1.push(result.data[a].floorName)
// console.log(that.floorInfo1);
//判断楼号 //判断楼号
var str = that.floorInfo1.floor; // var str = that.floorInfo1.floor;
var spstr = str.split(""); // var spstr = str.split("");
//判断城南基地部分数字楼层拿到所有部门 //判断城南基地部分数字楼层拿到所有部门
if (spstr[spstr.length - 1] == 0) { // if (spstr[spstr.length - 1] == 0) {
for (let i = 0; i < result.data.length; i++) { for (let i = 0; i < result.data.length; i++) {
that.floorInfo1.floor = val + '主楼' // that.floorInfo1.floor = val + '主楼'
var str1 = result.data[i].floor // var str1 = result.data[i].floor
var spstr1 = str1.split(""); // var spstr1 = str1.split("");
if (spstr1[spstr1.length - 1] == 0) { // if (spstr1[spstr1.length - 1] == 0) {
that.departInfo.push(result.data[i].depart) // that.floorInfo.push(result.data[i].floorName)
that.floorInfo1.push(result.data[i].floorName)
// that.departInfo.push(result.data[i].depart)
// that.tableData.push(Object.values(result.data[i]))
// }
//表格数据
that.tableData.push(Object.values(result.data[i])) that.tableData.push(Object.values(result.data[i]))
} }
//表格数据
for (let v = 0; v < that.tableData.length; v++) {
that.departInfo.push(that.tableData[v].slice(0, 4))
} }
that.config5.data = that.tableData that.config5.data = that.departInfo
// for (let v = 0; v < that.config5.data.length; v++) { console.log(that.tableData);
// that.config5.data[v].pop() const qcData = new Set(that.config5.data)
that.departQcData = qcData
//去除部门数组中的空字符串
// var newArr1 = that.departInfo.filter(i => i && i.trim())
//楼号去重
const qcData1 = new Set(that.floorInfo1)
that.floorNameQcData = qcData1
//去重
// const qcData = new Set(newArr1)
// that.departQcData = qcData
//拿到对应楼号对应部门
// for (let j = 0; j < result.data.length; j++) {
// if (that.floorNameQcData == result.data[j].floorName) {
// console.log(8989898);
// that.departInfo.push(result.data[j].depart)
// //表格数据
// // that.departInfo.push(result.data[j].depart)
// }
// } // }
//去除部门数组中的空字符串 //去除部门数组中的空字符串
var newArr1 = that.departInfo.filter(i => i && i.trim()) // var newArr1 = that.departInfo.filter(i => i && i.trim())
//去重 //去重
const qcData = new Set(newArr1) // const qcData = new Set(newArr1)
that.departQcData = qcData // that.departQcData = qcData
} else { // } else {
//拿到对应楼层对应部门 //拿到对应楼层对应部门
for (let j = 0; j < result.data.length; j++) { // for (let j = 0; j < result.data.length; j++) {
if (that.floorInfo1.floor === result.data[j].floor) { // if (that.floorInfo1.floor === result.data[j].floor) {
that.departInfo.push(result.data[j].depart) // that.departInfo.push(result.data[j].depart)
//表格数据 // //表格数据
that.tableData.push(Object.values(result.data[j]))
} // }
} // }
// that.tableData.push(Object.values(result.data[]))
// that.config5.data = that.tableData
// for (let v = 0; v < that.config5.data.length; v++){
// that.config5.data[v].pop()
// }
that.config5.data = that.tableData // console.log("that.config5",that.config5);
for (let v = 0; v < that.config5.data.length; v++){ // //去除部门数组中的空字符串
that.config5.data[v].pop() // var newArr = that.departInfo.filter(i => i && i.trim())
} // // console.log(that.config5.data);
// //去重
console.log("that.config5",that.config5); // const qcData = new Set(newArr)
//去除部门数组中的空字符串 // that.departQcData = qcData
var newArr = that.departInfo.filter(i => i && i.trim())
// console.log(that.config5.data);
//去重
const qcData = new Set(newArr)
that.departQcData = qcData
var arr = Object.entries(result.data(a)) var arr = Object.entries(result.data(a))
console.log("arr", arr) console.log("arr", arr)
} // }
} }
@ -520,8 +594,8 @@ console.log("val",val)
// }else{ // }else{
// } // }
} else if (val == "健康中心（安仁街变）" || val == "老卫生所" || val == "龙吟广场" || val == "栖霞基地") { } else if (val == "健康中心" || val == "老卫生所" || val == "龙吟广场" || val == "栖霞基地") {
if (val == '健康中心（安仁街变）') { if (val == '健康中心') {
that.floorInfo = "健康中心主楼" that.floorInfo = "健康中心主楼"
} else { } else {
that.floorInfo = val + "主楼" that.floorInfo = val + "主楼"
@ -542,10 +616,11 @@ console.log("val",val)
//表格数据 //表格数据
that.tableData.push(Object.values(result.data[j])) that.tableData.push(Object.values(result.data[j]))
} }
that.config5.data = that.tableData for (let v = 0; v < that.tableData.length; v++) {
for (let v = 0; v < that.config5.data.length; v++) { that.departInfo1.push(that.tableData[v].slice(0, 4))
that.config5.data[v].pop()
} }
that.config5.data = that.departInfo1
//去除部门数组中的空字符串 //去除部门数组中的空字符串
var newArr = that.departInfo.filter(i => i && i.trim()) var newArr = that.departInfo.filter(i => i && i.trim())
//去重 //去重
@ -569,8 +644,60 @@ console.log("val",val)
this.loading = false; this.loading = false;
}, 500); }, 500);
}, },
showChild() { showChild(item, index) {
console.log(item);
this.isShow = !this.isShow this.isShow = !this.isShow
for (let i = 0; i < this.config5.data.length; i++) {
this.departInfo = this.config5.data[i]
// if (item == this.departInfo[2]) {
for (let a = 0; a < this.arr.length; a++) {
this.departQcData1.push(this.arr[a].depart)
console.log(this.arr[a].depart);
}
console.log(this.departQcData1);
//去除部门数组中的空字符串
var newArr = this.departQcData1.filter(i => i && i.trim())
// console.log(that.config5.data);
//去重
const qcData = new Set(newArr)
this.departQcData = qcData
console.log(this.departQcData);
}
// }
},
departSearch(item) {
console.log(item);
this.componentKey1++
this.isShow1 = false
var floorname = ''
this.floorNameQcData.forEach(function (item1, index, set) {
floorname = item1
})
if (floorname != '') {
for (let i = 0; i < this.config5.data.length; i++) {
this.tableData = this.config5.data[i]
if (item == this.tableData[0] && floorname == this.tableData[2]) {
this.tableData1.push(this.tableData)
}
}
this.config6.data = this.tableData1
console.log(this.config6.data);
this.tableData1 = []
} else {
for (let i = 0; i < this.config5.data.length; i++) {
this.tableData = this.config5.data[i]
if (item == this.tableData[0]) {
this.tableData1.push(this.tableData)
}
}
this.config6.data = this.tableData1
console.log(this.config6.data);
this.tableData1 = []
}
} }
}, },
}; };
@ -598,6 +725,8 @@ console.log("val",val)
@ -816,7 +945,7 @@ h1 {
cursor: pointer; cursor: pointer;
} }
.leftFloor1:hover { .leftFloor1:hover {
background: url("~@/assets/landRes2/按钮默认.png")no-repeat; // background: url("~@/assets/landRes2/按钮默认.png")no-repeat;
background-size: 100%; background-size: 100%;
width: 182px; width: 182px;
padding-top: 3%; padding-top: 3%;
@ -825,5 +954,15 @@ h1 {
font-weight: 700; font-weight: 700;
font-size: 14px; font-size: 14px;
cursor: pointer; cursor: pointer;
background: url("~@/assets/landRes/boxX.png") no-repeat;
li {
color: #00fcff;
text-shadow: 0 0 5px #00fcff,
0 0 10px #00fcff,
0 0 15px #00fcff,
0 0 20px #00fcff;
}
} }
</style> </style>