830 lines
28 KiB
Vue
830 lines
28 KiB
Vue
<template>
|
||
<div id="index" ref="appRef">
|
||
<!-- <div class="bg" :style="{
|
||
backgroundImage:
|
||
'url(' + require(`@/assets/bg3.png`) + ')',
|
||
}"> -->
|
||
<div class="bg">
|
||
<iframe name="myframe" frameborder="0" width="100%" height="100%" style="position: absolute" ref="iframe"
|
||
:src="unityUrl" :key="unityUrl"></iframe>
|
||
<!-- <div class="body-left"></div>
|
||
<div class="body-right"></div>
|
||
<div class="body-bottom"></div> -->
|
||
<dv-loading v-if="loading">Loading...</dv-loading>
|
||
<div v-else class="host-body">
|
||
<HeaderIndex :cdata="{ title: titleData, margin: '26px auto' }" style="position: relative" />
|
||
<div class="main" style="margin-top:-80px">
|
||
<div class="left">
|
||
<!-- <h1>基础数据展示</h1> -->
|
||
<!-- <BasicBox2 class="basicInfo" :title="tit" :dataSource="workList" ></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-if="val">
|
||
<div style=" margin-top: 4%;text-align: center;top: 1px;width: 182px;" @click=showChild()
|
||
v-show="!isShow">
|
||
<ul>
|
||
<li class="leftFloor">{{floorInfo1.floor}}</li>
|
||
</ul>
|
||
</div>
|
||
<div style="margin-top: 4%;text-align: center;top: 1px;width: 182px;" @click=showChild() v-show="isShow">
|
||
<ul>
|
||
<li class="leftFloors">{{floorInfo1.floor}}</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div v-else-if="!val">
|
||
<div style=" margin-top: 4%;text-align: center;top: 1px;width: 182px;" @click=showChild()
|
||
v-show="!isShow">
|
||
<ul>
|
||
<li class="leftFloor">{{floorInfo}}</li>
|
||
</ul>
|
||
</div>
|
||
<div style="margin-top: 4%;text-align: center;top: 1px;width: 182px;" @click=showChild() v-show="isShow">
|
||
<ul>
|
||
<li class="leftFloors">{{floorInfo}}</li>
|
||
</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>
|
||
<li class="leftFloor1">{{item}}</li>
|
||
</ul>
|
||
</div>
|
||
|
||
</div>
|
||
<!-- <div class="center">
|
||
<div class="box" v-for="(item, index) in centerList" :key="index">
|
||
<p>{{ item.title }}</p>
|
||
</div>
|
||
</div> -->
|
||
<div class="right">
|
||
<!-- <h1>房地项目全生命周期管理</h1> -->
|
||
|
||
<BasicBox4 title="生产用房" :dataSource="false" :options="options" :valueData="valueData">
|
||
|
||
<!-- <template slot="top">
|
||
<customDvScrollBoard2 :config="config5
|
||
" :style="{ height: '650px', padding: '10px' }"></customDvScrollBoard2>
|
||
</template> -->
|
||
<template slot="top">
|
||
<customDvScrollBoard2 :config="config5
|
||
" :style="{ height: '650px', padding: '10px' }" :key="componentKey"></customDvScrollBoard2>
|
||
</template>
|
||
</BasicBox4>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import customDvScrollBoard2 from "@/components/customDvScrollBoard2"
|
||
import * as mockData from "./mock"
|
||
import drawMixin from "@/utils/drawMixin";
|
||
import headerIndex from "@/components/layout/header.vue";
|
||
import BasicBox4 from "@/components/BasicBox4"
|
||
import BasicBox2 from "@/components/BasicBox2"
|
||
import axios from 'axios'
|
||
import { FormItem } from "element-ui";
|
||
export default {
|
||
mixins: [drawMixin],
|
||
data() {
|
||
return {
|
||
componentKey:0,
|
||
val: true,
|
||
isShow:true,
|
||
floorInfo: '',
|
||
floorInfo1: {},
|
||
departInfo: [],
|
||
tableData:[],
|
||
departQcData:[],
|
||
unityUrl:"/Publish/city-build/index.html",
|
||
titleData:"城北基地",
|
||
valueData: '38',
|
||
backgroundPic: {
|
||
index: "landRes2/bg",
|
||
},
|
||
options: [
|
||
{ label: "智能化控制室", value: '01' },
|
||
{ label: "华群汽车", value: '02' },
|
||
{ label: "健康服务中心", value: '03' },
|
||
{ label: "华群物业", value: '04' },
|
||
{ label: "英大服务站", value: '05' },
|
||
{ label: "总值班室", value: '06' },
|
||
{ label: "公安办", value: '07' },
|
||
{ label: "接待室", value: '08'},
|
||
{ label: "会议中心", value: '09'},
|
||
{ label: "文印室", value: '10'},
|
||
{ label: "信通公司", value: '11'},
|
||
{ label: "党委党建部", value: '12'},
|
||
{ label: "工会", value: '13'},
|
||
{ label: "调度、信通", value: '14'},
|
||
{ label: "供电指挥中心", value: '15'},
|
||
{ label: "办公室", value: '16'},
|
||
{ label: "综合管理室", value: '17'},
|
||
{ label: "共用", value: '18'},
|
||
{ label: "备用", value: '19'},
|
||
{ label: "运维检修部", value: '20'},
|
||
{ label: "审计部", value: '21'},
|
||
{ label: "建设部", value: '22'},
|
||
{ label: "项目管理中心", value: '23'},
|
||
{ label: "财务部", value: '24'},
|
||
{ label: "纪委", value: '25'},
|
||
{ label: "经济技术研究所", value: '26'},
|
||
{ label: "物资部", value: '27'},
|
||
{ label: "发展策划部", value: '28'},
|
||
{ label: "人资部", value: '29'},
|
||
{ label: "人力资源服务室", value: '30'},
|
||
{ label: "江苏思极公司", value: '31'},
|
||
{ label: "科技互联网部", value: '32'},
|
||
{ label: "安质部", value: '33'},
|
||
{ label: "融媒体工作室", value: '34'},
|
||
{ label: "原电动汽车公司", value: '35'},
|
||
{ label: "电动汽车公司", value: '36'},
|
||
{ label: "能源服务公司", value: '37'},
|
||
{ label: "调度控制中心", value: '38'},
|
||
],
|
||
centerList: [
|
||
{ title: "智能化控制室", count: 0 },
|
||
{ title: "华群汽车", count: '无' },
|
||
{ title: "健康服务中心", count: 0 },
|
||
{ title: "华群物业", count: 2887935.73 },
|
||
{ title: "英大服务站", count: '无' },
|
||
{ title: "总值班室", count: '无' },
|
||
{ title: "公安办", count: '无' },
|
||
{ title: "接待室", count: '2735767.67元' },
|
||
],
|
||
//不动产数据
|
||
workList: [
|
||
{ key: "建筑物名称", value: "栖霞基地",name:"jd" },
|
||
{ key: "坐落地址", value: "南京市鼓楼区和燕路2号",name:"tudi" },
|
||
{ key: "不动产证号", value: "苏(2018)宁鼓不动产权第0008891号" ,name:"bdczh"},
|
||
{ key: "权利人", value: "国网江苏省电力有限公司南京供电公司",name:"qlr" },
|
||
{ key: "共有情况", value: "",name:"gyqk" },
|
||
{ key: "坐落", value: "鼓楼区和燕路2号" ,name:"zl"},
|
||
{ key: "不动产单元号", value: "320106013003GB00246F00010001" ,name:"bdcdyh"},
|
||
{ key: "权力类型", value: "国有建设用地使用权/房屋（建筑物）所有权" ,name:"qllx"},
|
||
{ key: "权力性质", value: "划拨/其它",name:"qlxz" },
|
||
{ key: "用途", value: "机关团体用地/办公",name:"yt" },
|
||
{ key: "面积", value: "宗地面积：2819.41平方米/建筑面积：9026.8平方米" ,name:"mj"},
|
||
{ key: "使用期限", value: "" ,name:"syqx"},
|
||
{ key: "房屋结构", value: "钢筋混凝土结构" ,name:"fwjg"},
|
||
{ key: "房屋总层数", value: "13层" ,name:"fwzcs"},
|
||
{ key: "所在层数", value: "-1-12" ,name:"szcs"},
|
||
{ key: "丘权号", value: "-684200-III-1" ,name:"qqh"},
|
||
{ key: "来源", value: "自建" ,name:"ly"},
|
||
],
|
||
workListData:[],
|
||
workListDatafcz:[],
|
||
//土地数据
|
||
workListNew: [
|
||
{ key: "建筑物名称", value: "城北基地",name:"jd" },
|
||
{ key: "坐落地址", value: "南京市鼓楼区定淮门石头城115号",name:"tudi" },
|
||
{ key: "土地证号", value: "宁鼓国（2007）09329号" ,name:"tdzh"},
|
||
{ key: "权利人", value: "江苏省电力公司南京供电公司",name:"tdsyqr" },
|
||
{ key: "共有情况", value: "鼓楼区石头城路115号",name:"zl" },
|
||
{ key: "坐落", value: "060010150023" ,name:"dh"},
|
||
{ key: "不动产单元号", value: "出让" ,name:"syqlx"},
|
||
{ key: "权力类型", value: "" ,name:"th"},
|
||
{ key: "权力性质", value: "工业",name:"dlyt" },
|
||
{ key: "用途", value: "11219.8平方米",name:"syqmj" },
|
||
{ key: "面积", value: "2045年03月26" ,name:"zzrq"},
|
||
],
|
||
workListFCZ: [
|
||
{ key: "建筑物名称", value: "城北基地",name:"jd" },
|
||
{ key: "坐落地址", value: "南京市鼓楼区定淮门石头城115号",name:"tudi" },
|
||
{ key: "房产证号", value: "鼓变字第316774号" ,name:"fczh"},
|
||
{ key: "房产使用权人", value: "江苏省电力公司南京供电公司",name:"fwsyqr" },
|
||
{ key: "坐落", value: "鼓楼区石头城路115号",name:"zl" },
|
||
{ key: "房屋用途", value: "全民单位房产" ,name:"fwcb"},
|
||
// { key: "不动产单元号", value: "597155-2" ,name:"qh"},
|
||
// { key: "不动产单元号", value: "3/4/5/13" ,name:"zh"},
|
||
// { key: "权力类型", value: "" ,name:"fh"},
|
||
{ key: "结构", value: "砖木/砖木/砖木/混合/混合",name:"jg" },
|
||
{ key: "房屋总层数", value: "1层/1层/1层/2层/6层平方米",name:"fwzcs" },
|
||
{ key: "面积", value: "726.45平方米/113.24平方米/61.07平方米/373.88平方米/1910.32平方米" ,name:"jzmj"},
|
||
{ key: "面积", value: "买受,自建" ,name:"cqly"},
|
||
],
|
||
fczShow:false,
|
||
config4: {
|
||
header: ['部门', '楼层', '房号','名称'],
|
||
rowNum: 12,
|
||
data:
|
||
// [['2019', '2', '16.67%'],
|
||
// ['2021', '2', '16.67%'],
|
||
// ['2022', '5', '66.67%'],['无', '无', '无'],]
|
||
[
|
||
['调度控制中心', '主楼十九楼', '1901', '监控验收调试室'],
|
||
['调度控制中心', '主楼十九楼', '1902', 'DTS学员室'],
|
||
['调度控制中心', '主楼十九楼', '1903', '供电服务指挥中心'],
|
||
['调度控制中心', '主楼十九楼', '1904', 'DTS教员室'],
|
||
['调度控制中心', '主楼十九楼', '1905', '方式计划室'],
|
||
['调度控制中心', '主楼十九楼', '1906', '会议室'],
|
||
['调度控制中心', '主楼十九楼', '1907', '方式计划室'],
|
||
['调度控制中心', '主楼十九楼', '1908', '张明劳模创新工作室'],
|
||
['调度控制中心', '主楼十九楼', '1909', '调度二次室'],
|
||
['调度控制中心', '主楼十九楼', '1910', '会议室'],
|
||
['调度控制中心', '主楼十九楼', '1911', '综合室'],
|
||
['调度控制中心', '主楼十九楼', '1913', '供电服务指挥中心'],
|
||
['调度控制中心', '主楼十九楼', '1915', '书记室'],
|
||
['调度控制中心', '主楼十九楼', '1917', '接待室'],
|
||
['调度控制中心', '主楼十九楼', '1919', '主任室'],
|
||
['调度控制中心', '主楼十九楼', '1921', '供电服务指挥中心'],
|
||
['调度控制中心', '主楼二十楼', '2010', '安全管理指挥中心 应急指挥中心'],
|
||
['调度控制中心', '主楼二十楼', '2011', '自动化运维班'],
|
||
['调度控制中心', '主楼二十楼', '2012', '自动化运维班'],
|
||
['调度控制中心', '主楼二十楼', '2013', '自动化运维班'],
|
||
['调度控制中心', '主楼二十楼', '2015', '调度自动化运行维护室'],
|
||
['调度控制中心', '主楼二十楼', '2017', '自动化运维班'],
|
||
['调度控制中心', '主楼二十楼', '2019', '配网抢修指挥班长室'],
|
||
['调度控制中心', '主楼二十楼', '2021', '资料室'],
|
||
['调度控制中心', '主楼二十楼', '2023', '职工小家党员活动室'],
|
||
['调度控制中心', '主楼二十楼', '2025', '调度自动化开发室'],
|
||
['调度控制中心', '主楼二十一楼', '2101', '供电服务指挥中心'],
|
||
['调度控制中心', '主楼二十一楼', '2102', '地区电网调控大厅'],
|
||
['调度控制中心', '主楼二十一楼', '2104', '配网调控大厅'],
|
||
['调度控制中心', '主楼二十一楼', '2105', '配网调控班'],
|
||
['调度控制中心', '主楼二十一楼', '2106', '运营检测（控）中心'],
|
||
['调度控制中心', '主楼二十一楼', '2107', '配网调控班'],
|
||
['调度控制中心', '主楼二十一楼', '2109', '无门牌'],
|
||
['调度控制中心', '主楼二十二楼', '2201', '就餐室'],
|
||
['调度控制中心', '主楼二十二楼', '2202', '休息室'],
|
||
['调度控制中心', '主楼二十二楼', '2203', '休息室'],
|
||
['调度控制中心', '主楼二十二楼', '2204', '休息室'],
|
||
['调度控制中心', '主楼二十二楼', '2205', '休息室'],
|
||
['调度控制中心', '主楼二十二楼', '2206', '气罐间'],
|
||
['调度控制中心', '主楼二十二楼', '2207', '休息室'],
|
||
['调度控制中心', '主楼二十二楼', '2208', '负控设备间'],
|
||
],
|
||
columnWidth: [60],
|
||
|
||
},
|
||
config5: {
|
||
header: ['部门', '楼层', '房号', '名称'],
|
||
rowNum: 12,
|
||
data:
|
||
// [['2019', '2', '16.67%'],
|
||
// ['2021', '2', '16.67%'],
|
||
// ['2022', '5', '66.67%'],['无', '无', '无'],]
|
||
[
|
||
|
||
],
|
||
columnWidth: [60],
|
||
|
||
},
|
||
type:'',
|
||
tit:"不动产产权证信息",
|
||
loading: false,
|
||
|
||
...mockData.default
|
||
};
|
||
},
|
||
components: {
|
||
HeaderIndex: headerIndex,
|
||
BasicBox4,
|
||
BasicBox2,
|
||
customDvScrollBoard2,
|
||
},
|
||
mounted() {
|
||
|
||
this.timeFn();
|
||
this.cancelLoading();
|
||
console.log("this.$route.params",this.$route.params.id)
|
||
this.titleData = this.$route.params.id.slice(0,4)
|
||
console.log("jdMain",this.$route.params)
|
||
if(this.$route.params.id=='公司大楼（市公司）'){
|
||
this.unityUrl="/Publish/city-build/index.html"
|
||
}else if(this.$route.params.id=='双闸变'){
|
||
this.unityUrl="/Publish/city-double/index.html"
|
||
}else if(this.$route.params.id=='雨花基地'){
|
||
this.unityUrl="/Publish/city-rain/index.html"
|
||
}else if(this.$route.params.id=='城北基地'){
|
||
this.unityUrl="/Publish/city-north/index.html"
|
||
}else{
|
||
this.unityUrl="/Publish/city-build/index.html"
|
||
}
|
||
this.type=this.$route.params.type
|
||
this.getJdData(this.type)
|
||
this.getListData(this.$route.params.id)
|
||
// this.getJdData()
|
||
window.OnSceneLoaded= function(scene){
|
||
console.log("scene",scene);
|
||
window.FloorUI('true')
|
||
}
|
||
window.setTimeout(e => {
|
||
this.forceRerender();
|
||
},200)
|
||
},
|
||
beforeDestroy() {
|
||
clearInterval(this.timing);
|
||
},
|
||
methods: {
|
||
//重新渲染
|
||
forceRerender() {
|
||
this.componentKey ++;
|
||
},
|
||
timeFn() {
|
||
// this.timing = setInterval(() => {
|
||
// this.dateDay = formatTime(new Date(), "HH: mm: ss");
|
||
// this.dateYear = formatTime(new Date(), "yyyy-MM-dd");
|
||
// this.dateWeek = this.weekday[new Date().getDay()];
|
||
// }, 1000);
|
||
},
|
||
//获取基地数据
|
||
getJdData(val){
|
||
console.log("val",val)
|
||
|
||
if(val == "不动产"){
|
||
console.log("val",val)
|
||
this.workListData=[]
|
||
axios.get('/json/jdData.json')
|
||
.then(result => {
|
||
console.log('getMenuData111', result.data)
|
||
for (var i = 0; i < result.data.length; i++) {
|
||
if(result.data[i].jd == this.$route.params.id){
|
||
console.log("result.data[i]",result.data[i])
|
||
this.workListData.push(result.data[i])
|
||
this.changeWorkList(result.data[i])
|
||
}
|
||
}
|
||
})
|
||
.catch(error => {
|
||
console.log(error)
|
||
})
|
||
}else if(val == "土地证"){
|
||
this.tit="土地证信息"
|
||
this.workListData=[]
|
||
this.fczShow=true
|
||
axios.get('/json/tdData.json')
|
||
.then(result => {
|
||
console.log('getMenuData111', result.data)
|
||
console.log('this.$route.params.id', this.$route.params.id)
|
||
for (var i = 0; i < result.data.length; i++) {
|
||
if(result.data[i].jd == this.$route.params.id){
|
||
console.log("result.data[i]",result.data[i])
|
||
this.workListData.push(result.data[i])
|
||
this.changeWorkListTd(result.data[i])
|
||
}
|
||
}
|
||
})
|
||
.catch(error => {
|
||
console.log(error)
|
||
})
|
||
this.workListDatafcz=[]
|
||
axios.get('/json/fczData.json')
|
||
.then(result => {
|
||
console.log('getMenuData111', result.data)
|
||
for (var i = 0; i < result.data.length; i++) {
|
||
if(result.data[i].jd == this.$route.params.id){
|
||
console.log("result.data[i]",result.data[i])
|
||
this.workListDatafcz.push(result.data[i])
|
||
this.changeWorkListfcz(result.data[i])
|
||
}
|
||
}
|
||
})
|
||
.catch(error => {
|
||
console.log(error)
|
||
})
|
||
}
|
||
},
|
||
//不动产
|
||
changeWorkList(data){
|
||
var entries = Object.entries(data);
|
||
var list = entries.map(function(item) {
|
||
return {
|
||
value: item[1],
|
||
name: item[0]
|
||
};
|
||
})
|
||
for (var i = 0; i < list.length; i++) {
|
||
for (var t = 0; t < this.workList.length; t++) {
|
||
if(list[i].name==this.workList[t].name){
|
||
this.workList[t].value=list[i].value
|
||
}
|
||
}
|
||
}
|
||
},
|
||
//土地证
|
||
changeWorkListTd(data){
|
||
console.log("data",data)
|
||
var entries = Object.entries(data);
|
||
var list = entries.map(function(item) {
|
||
return {
|
||
value: item[1],
|
||
name: item[0]
|
||
};
|
||
})
|
||
for (var i = 0; i < list.length; i++) {
|
||
for (var t = 0; t < this.workListNew.length; t++) {
|
||
if(list[i].name==this.workListNew[t].name){
|
||
this.workListNew[t].value=list[i].value
|
||
}
|
||
}
|
||
}
|
||
this.workList = this.workListNew
|
||
},
|
||
//房产证
|
||
changeWorkListfcz(data){
|
||
var entries = Object.entries(data);
|
||
var list = entries.map(function(item) {
|
||
return {
|
||
value: item[1],
|
||
name: item[0]
|
||
};
|
||
})
|
||
for (var i = 0; i < list.length; i++) {
|
||
for (var t = 0; t < this.workListFCZ.length; t++) {
|
||
if(list[i].name==this.workListFCZ[t].name){
|
||
this.workListFCZ[t].value=list[i].value
|
||
}
|
||
}
|
||
}
|
||
},
|
||
//获取列表数据
|
||
getListData(val) {
|
||
let that = this
|
||
// if(val == "城北基地"||val == "城南基地"||val =="公司大楼(市大楼)"||val =="健康中心"||val == "老卫生所"||val == "龙吟广场"||val == "栖霞基地"|| val == "雨花基地"){
|
||
if (val == "城北基地" || val == "城南基地" || val == "公司大楼(市大楼)" || val == "雨花基地") {
|
||
that.val = true
|
||
console.log("val",val)
|
||
axios.get('/json/'+val+ '.json')
|
||
.then(result => {
|
||
console.log('val', result.data)
|
||
for (var a = 0; a < result.data.length; a++) {
|
||
//拿到楼号
|
||
that.floorInfo1 = result.data[0]
|
||
//判断楼号
|
||
var str = that.floorInfo1.floor;
|
||
var spstr = str.split("");
|
||
//判断城南基地部分数字楼层拿到所有部门
|
||
if (spstr[spstr.length - 1] == 0) {
|
||
for (let i = 0; i < result.data.length; i++) {
|
||
that.floorInfo1.floor = val + '主楼'
|
||
var str1 = result.data[i].floor
|
||
var spstr1 = str1.split("");
|
||
if (spstr1[spstr1.length - 1] == 0) {
|
||
that.departInfo.push(result.data[i].depart)
|
||
that.tableData.push(Object.values(result.data[i]))
|
||
}
|
||
//表格数据
|
||
}
|
||
that.config5.data = that.tableData
|
||
// for (let v = 0; v < that.config5.data.length; v++) {
|
||
// that.config5.data[v].pop()
|
||
// }
|
||
//去除部门数组中的空字符串
|
||
var newArr1 = that.departInfo.filter(i => i && i.trim())
|
||
//去重
|
||
const qcData = new Set(newArr1)
|
||
that.departQcData = qcData
|
||
} else {
|
||
//拿到对应楼层对应部门
|
||
for (let j = 0; j < result.data.length; j++) {
|
||
if (that.floorInfo1.floor === result.data[j].floor) {
|
||
that.departInfo.push(result.data[j].depart)
|
||
//表格数据
|
||
that.tableData.push(Object.values(result.data[j]))
|
||
|
||
}
|
||
}
|
||
|
||
that.config5.data = that.tableData
|
||
for (let v = 0; v < that.config5.data.length; v++){
|
||
that.config5.data[v].pop()
|
||
}
|
||
|
||
console.log("that.config5",that.config5);
|
||
//去除部门数组中的空字符串
|
||
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))
|
||
console.log("arr", arr)
|
||
|
||
}
|
||
|
||
}
|
||
|
||
})
|
||
.catch(error => {
|
||
console.log(error)
|
||
})
|
||
// }else{
|
||
|
||
// }
|
||
} else if (val == "健康中心（安仁街变）" || val == "老卫生所" || val == "龙吟广场" || val == "栖霞基地") {
|
||
if (val == '健康中心（安仁街变）') {
|
||
that.floorInfo = "健康中心主楼"
|
||
} else {
|
||
that.floorInfo = val + "主楼"
|
||
}
|
||
that.val = false
|
||
console.log("val", val)
|
||
|
||
axios.get('/json/' + val + '.json')
|
||
.then(result => {
|
||
console.log('val', result.data)
|
||
for (var a = 0; a < result.data.length; a++) {
|
||
console.log(result.data)
|
||
// 不需要处理楼号
|
||
|
||
//拿到全部部门
|
||
for (let j = 0; j < result.data.length; j++) {
|
||
that.departInfo.push(result.data[j].depart)
|
||
//表格数据
|
||
that.tableData.push(Object.values(result.data[j]))
|
||
}
|
||
that.config5.data = that.tableData
|
||
for (let v = 0; v < that.config5.data.length; v++) {
|
||
that.config5.data[v].pop()
|
||
}
|
||
//去除部门数组中的空字符串
|
||
var newArr = that.departInfo.filter(i => i && i.trim())
|
||
//去重
|
||
const qcData = new Set(newArr)
|
||
that.departQcData = qcData
|
||
// that.departInfo = result.data[8]
|
||
|
||
// }
|
||
var arr = Object.entries(result.data(a))
|
||
console.log("arr", arr)
|
||
}
|
||
|
||
})
|
||
.catch(error => {
|
||
console.log(error)
|
||
})
|
||
}
|
||
},
|
||
cancelLoading() {
|
||
setTimeout(() => {
|
||
this.loading = false;
|
||
}, 500);
|
||
},
|
||
showChild() {
|
||
this.isShow = !this.isShow
|
||
}
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
@import "~@/common/var.scss";
|
||
@import "~@/assets/scss/index.scss";
|
||
|
||
.body-left{
|
||
background: url('../../../assets/left.png') no-repeat!important;
|
||
}
|
||
.body-right{
|
||
background: url('../../../assets/right.png') no-repeat!important;
|
||
}
|
||
|
||
.body-bottom{
|
||
background: url('../../../assets/down.png') no-repeat!important;
|
||
}
|
||
.main {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
.left,
|
||
.right {
|
||
width: 25%;
|
||
padding-right: 20px;
|
||
position: relative;
|
||
}
|
||
.left{
|
||
|
||
left: 2%;
|
||
}
|
||
.center {
|
||
width: 41%;
|
||
height: 20%;
|
||
padding: 0 10px;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
align-content: flex-start;
|
||
position: relative;
|
||
// left:30%;
|
||
top: 700px;
|
||
.box {
|
||
font-size: 14px;
|
||
// background: #11223289;
|
||
background: rgba(16,29,37,0.8);
|
||
border: 2px solid #29a3d3a1;
|
||
width: 23%;
|
||
margin: 1%;
|
||
text-align: center;
|
||
// li {
|
||
// padding: 20px 0;
|
||
// }
|
||
p {
|
||
&:first-child {
|
||
padding: 8px 0 10px 0;
|
||
font-weight: bold;
|
||
font-size: 18px;
|
||
|
||
}
|
||
|
||
&:nth-child(2) {
|
||
color: $default-font-color;
|
||
}
|
||
|
||
padding: 5px 0;
|
||
}
|
||
|
||
|
||
}
|
||
.box:hover{
|
||
background: rgba(76, 106, 124, 0.8);
|
||
}
|
||
}
|
||
.right {
|
||
right: 2%;
|
||
h1 {
|
||
left: 25%;
|
||
|
||
}
|
||
|
||
text-align: left;
|
||
|
||
.rtitle {
|
||
font-size: 20px;
|
||
padding-left: 20px;
|
||
height: 40px;
|
||
line-height: 40px;
|
||
background: url("~@/assets/landRes2/mask.png") no-repeat;
|
||
color: #B4E9FF;
|
||
background-size: cover;
|
||
}
|
||
}
|
||
|
||
.progress {
|
||
background: url("~@/assets/landRes2/process.png") no-repeat top;
|
||
margin: 20px 0 65px 0;
|
||
height: 165px;
|
||
width: 100%;
|
||
position: relative;
|
||
|
||
.safe {
|
||
color: #FECB12;
|
||
}
|
||
|
||
.safeIcon {
|
||
width: 20px;
|
||
height: 20px;
|
||
position: absolute;
|
||
display: inline-block;
|
||
left: 110px;
|
||
top: 99px;
|
||
background: url("~@/assets/landRes2/process-step.png") no-repeat center;
|
||
}
|
||
|
||
|
||
|
||
span {
|
||
color: #B3E8FE;
|
||
font-size: 13px;
|
||
position: absolute;
|
||
left: 85px;
|
||
top: 15px;
|
||
|
||
&:nth-child(6),
|
||
&:nth-child(2),
|
||
&:nth-child(9) {
|
||
left: 285px;
|
||
}
|
||
|
||
&:nth-child(1),
|
||
&:nth-child(5),
|
||
&:nth-child(8) {
|
||
left: 185px;
|
||
}
|
||
|
||
&:nth-child(n+4) {
|
||
top: 75px;
|
||
}
|
||
|
||
&:nth-child(n+7) {
|
||
top: 120px;
|
||
}
|
||
|
||
&:nth-child(n+10) {
|
||
top: 165px;
|
||
left: 185px
|
||
}
|
||
|
||
&:nth-child(11) {
|
||
top: 165px;
|
||
left: 285px
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
h1 {
|
||
text-align: center;
|
||
position: absolute;
|
||
top: -40px;
|
||
left: 35%;
|
||
font-size: 22px;
|
||
color: #A5E7ED;
|
||
font-weight: bolder;
|
||
mask-image: -webkit-gradient(linear, top, bottom, from(#ecf9fa), to(#ACF2F8));
|
||
|
||
}
|
||
.basicInfo{
|
||
li{
|
||
padding: 15px 0!important;
|
||
}
|
||
}
|
||
.leftFloor {
|
||
background: url("~@/assets/landRes2/楼背景.png")no-repeat;
|
||
background-size: 100%;
|
||
width: 182px;
|
||
padding-top: 8%;
|
||
height: 48px;
|
||
color: #8ec1d8;
|
||
font-weight: 700;
|
||
font-size: 17px;
|
||
cursor: pointer;
|
||
padding-left: 30px;
|
||
}
|
||
.leftFloor:hover {
|
||
background: url("~@/assets/landRes2/楼背景.png")no-repeat;
|
||
background-size: 100%;
|
||
width: 182px;
|
||
padding-top: 8%;
|
||
height: 48px;
|
||
color: rgb(1, 247, 251);
|
||
font-weight: 700;
|
||
font-size: 17px;
|
||
cursor: pointer;
|
||
padding-left: 30px;
|
||
}
|
||
.leftFloors {
|
||
background: url("~@/assets/landRes2/楼背景.png")no-repeat;
|
||
background-size: 100%;
|
||
width: 182px;
|
||
padding-top: 8%;
|
||
height: 48px;
|
||
color: rgb(1, 247, 251);
|
||
font-weight: 700;
|
||
font-size: 17px;
|
||
cursor: pointer;
|
||
padding-left: 30px;
|
||
}
|
||
.leftFloor1 {
|
||
background: url("~@/assets/landRes2/按钮默认.png")no-repeat;
|
||
background-size: 100%;
|
||
width: 182px;
|
||
padding-top: 3%;
|
||
height: 48px;
|
||
color: #B4E9FF;
|
||
font-weight: 700;
|
||
font-size: 14px;
|
||
cursor: pointer;
|
||
}
|
||
.leftFloor1:hover {
|
||
background: url("~@/assets/landRes2/按钮默认.png")no-repeat;
|
||
background-size: 100%;
|
||
width: 182px;
|
||
padding-top: 3%;
|
||
height: 48px;
|
||
color: rgb(1,247,251);
|
||
font-weight: 700;
|
||
font-size: 14px;
|
||
cursor: pointer;
|
||
}
|
||
</style>
|