123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363 |
- <template>
- <div class="detail-info">
- <div class="eq-top">
- <img src="/static/img/backIcon.jpg" alt="" @click="back">
- <span>返回 </span>
- </div>
- <div class="detail-content">
- <div class="content-top">
- <p>{{roomInfo.infos.RoomLocalName}}的详情</p>
- <div><Checkbox v-model="isData" label="只显示有数据的信息" name="type" @on-change="onChange"></Checkbox>只显示有数据的信息</div>
- </div>
- <hr>
- <div class="content-bottom">
- <div class="content-left">
- <div>
- <ul>
- <li v-for="(list,index) in mainInfo" :key='index' :class="{changeStyle:changeColor == index}"
- @click="change(index)"><a :href="`#${list.href}`">{{list.name}}</a></li>
- </ul>
- </div>
- </div>
- <div class="content-right" @scroll="handleScroll">
- <p id="baseInfo" class="group"><span></span>基本信息</p>
- <ul>
- <li><span>空间ID</span>{{roomInfo.infos.RoomID}}</li>
- <li><span>空间名称</span>{{roomInfo.infos.RoomName || '--'}}</li>
- <li><span>空间本地编码</span>{{roomInfo.infos.RoomLocalID || '--'}}</li>
- <li><span>空间本地名称</span>{{roomInfo.infos.RoomLocalName || '--'}}</li>
- <li><span>空间二维码图片</span><i v-if="roomInfo.infos.RoomQRCode" @click="lookAt">查看</i></li>
- <li><span>BIM模型中编码</span>{{roomInfo.infos.BIMID || '--'}}</li>
- <li><span>空间功能区类型</span>{{roomInfo.infos.RoomFuncType || '--'}}</li>
- <li><span>进深</span>{{roomInfo.infos.Depth || '--'}} m</li>
- <li><span>面宽</span>{{roomInfo.infos.Width || '--'}} m</li>
- <li><span>建筑面积</span>{{roomInfo.infos.BuildArea || '--'}} m²</li>
- <li><span>使用面积</span>{{roomInfo.infos.NetArea || '--'}} m²</li>
- <li><span>高度</span>{{roomInfo.infos.Height || '--'}} m</li>
- <li><span>配电容量</span>{{roomInfo.infos.ElecCap || '--'}} A</li>
- <li><span>备注文字</span>{{roomInfo.infos.Intro || '--'}}</li>
- </ul>
- <p id="lesseeInfo" class="group"><span></span>租户信息</p>
- <ul>
- <li><span>租赁业态类型</span>{{roomInfo.infos.TenantType || '--'}}</li>
- <li><span>所属租户</span>{{roomInfo.infos.Tenant || '--'}}</li>
- </ul>
- <p id="peoplesInfo" class="group"><span></span>人员信息</p>
- <ul>
- <li><span>空间常驻人数</span>{{roomInfo.infos.PermanentPeopleNum || '--'}}</li>
- <li><span>逐时流出人数</span>{{roomInfo.infos.OutPeopleFlow || '--'}}</li>
- </ul>
- <p id="enviromentInfo" class="group"><span></span>环境参数</p>
- <ul>
- <enviroment-params v-show="roomInfo" :roomInfo='roomInfo' :isShowChange='isShowChange'></enviroment-params>
- </ul>
- <p id="eneryInfo" class="group"><span></span>能耗信息</p>
- <ul style="min-height: 590px">
- <enery-params v-show="roomInfo" :roomInfo='roomInfo' :isShowChange='isShowChange'></enery-params>
- </ul>
- </div>
- </div>
- </div>
- <div class="mask-bg"></div>
- <div class="mask">
- <message-modal @close='close' :isQR="isQR"></message-modal>
- </div>
- </div>
- </template>
- <script>
- import enviromentParams from './EnvirmentParams'
- import eneryParams from './EneryParams'
- import messageModal from '../spread/MessageModal'
- // import { log } from 'util'
- export default {
- components: {
- enviromentParams,
- eneryParams,
- messageModal
- },
- mixins: [],
- props: {
- },
- data () {
- return {
- isData: false,
- changeColor: 0,
- isShowChange: false, // 控制表格是否显示没数据的那一行
- roomInfo: {
- infos: {
- RoomLocalName: '--',
- RoomLocalID: '--',
- RoomQRCode: '--',
- BIMID: '--',
- RoomFuncType: '--',
- BIMLocation: '--',
- Depth: '--',
- Width: '--',
- Height: '--',
- BuildArea: '--',
- NetArea: '--',
- ElecCap: '--',
- TenantType: '--',
- Tenant: '--'
- },
- location: {
- building: '--',
- floor: '--'
- }
- },
- isQR: "",
- mainInfo: [
- {name: "基本信息", href: "baseInfo"},
- {name: "租户信息", href: "lesseeInfo"},
- {name: "人员信息", href: "peoplesInfo"},
- {name: "环境参数", href: "enviromentInfo"},
- {name: "能耗信息", href: 'eneryInfo'}
- ],
- groups: [],
- box: null // 滚动盒子
- }
- },
- computed: {
- },
- mounted () {
- this.getRouteParams()
- this.$nextTick(() => {
- this.box = document.querySelector(".content-right")
- this.groups = document.querySelectorAll(".content-right .group")
- })
- },
- methods: {
- // 滚动触发事件
- handleScroll () {
- let top = this.box.scrollTop
- let i = this.groups.length - 1
- for (; i >= 0; i--) {
- if (this.groups[i].offsetTop <= top) {
- this.changeColor = i
- break
- }
- }
- },
- change (index) {
- this.changeColor = index
- },
- back () {
- history.go(-1)
- },
- // 接受来自父组件路由传过来的参数
- getRouteParams () {
- this.roomInfo = JSON.parse(this.$route.query.obj)
- },
- // 下载弹框
- lookAt () {
- this.isQR = this.roomInfo.infos.RoomQRCode
- document.querySelector('body').style.overflow = 'hidden'
- document.querySelector('.mask-bg').style.display = 'block'
- document.querySelector('.mask').style.display = 'block'
- },
- close () {
- document.querySelector('body').style.overflow = 'auto'
- document.querySelector('.mask-bg').style.display = 'none'
- document.querySelector('.mask').style.display = 'none'
- },
- onChange (val) {
- if (val) {
- this.hiddenNoData()
- } else {
- this.showAllData()
- }
- },
- hiddenNoData () {
- this.isShowChange = true
- let arr = document.querySelectorAll('.content-right li')
- arr.forEach(i => {
- if (i.innerHTML.includes('--')) {
- i.style.display = 'none'
- }
- })
- },
- // 只显示有数据的
- showAllData () {
- this.isShowChange = false
- let arr = document.querySelectorAll('.content-right li')
- arr.forEach(i => {
- i.style.display = 'block'
- })
- }
- }
- }
- </script>
- <style scoped lang="less" >
- .detail-info {
- .eq-top {
- margin-bottom: 20px;
- margin-left: 20px;
- font-size: 7px;
- color: #212830;
- >img {
- //vertical-align: middle;
- cursor: pointer;
- border: 1px solid #CACACA;
- border-radius: 2px;
- }
- >span {
- font-size: 16px;
- color: #212830;
- }
- }
- .detail-content {
- box-shadow: 0 2px 10px 0 rgba(44,48,62,0.06);
- border-radius: 2px;
- background: #fff;
- padding-left:20px;
- .content-top {
- p {
- font-size: 18px;
- color: #212830;
- font-weight: bold;
- padding: 24px 0 20px 0;
- }
- }
- hr {
- margin-bottom: 0;
- }
- .content-bottom {
- padding-left: 10px;
- display: flex;
- margin-bottom: 20px;
- .content-left {
- width: 264px;
- border-radius: 2px;
- margin-right: 70px;
- padding-top: 10px;
- background: #FAFAFA;
- margin-bottom: 20px;
- div {
- li{
- font-size: 16px;
- padding:8px 0 8px 40px;
- font-weight: bold;
- cursor: pointer;
- &:hover {
- color:#6682E6;
- background: #fff;
- }
- a {
- color: #212830;
- &:hover {
- color:#6682E6;
- background: #fff;
- }
- }
- }
- }
- .active{
- color:#6682E6;
- background: #fff;
- }
- }
- .content-right {
- width: 1450px;
- height: 700px;
- overflow-y:auto;
- padding-top: 10px;
- position: relative;
- p {
- span {
- display: inline-block;
- width: 4px;
- height: 16px;
- background: #728DEE;
- margin-right: 10px;
- margin-bottom: -3px;
- }
- }
- ul {
- display: flex;
- flex-wrap: wrap;
- margin-left: 10px;
- margin-top: 20px;
- li {
- width: 50%;
- padding-bottom: 15px;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
- span {
- font-size: 14px;
- color: #6D747C;
- display: inline-block;
- width: 98px;
- margin-right: 20px;
- }
- i{
- color:#6682E6;
- cursor: pointer;
- }
- }
- }
- }
- }
- }
- .mask-bg{
- position: fixed;
- top: 0;
- bottom: 0;
- left: 0;
- right: 0;
- z-index: 99;
- background:rgba(0, 0, 0, .6);
- display: none;
- }
- .mask {
- width: 860px;
- height: 458px;
- background: #fff;
- position: fixed;
- z-index: 999;
- top: 120px;
- left: 30%;
- display: none;
- }
- .changeStyle{
- color: #6682E6!important;
- background: #fff;
- >a{
- color: #6682E6!important;
- }
- }
- }
- </style>
- <style lang="less">
- .detail-info {
- .ivu-table-wrapper {
- border: none;
- }
- .ivu-table td,
- .ivu-table th {
- border: none;
- }
- .ivu-table:before{
- height: 0;
- }
- .ivu-table:after{
- width:0;
- }
- .ivu-table-row .description-td>.ivu-table-cell>span{
- // overflow: hidden;
- // text-overflow: ellipsis;
- // white-space: nowrap;
- max-height: 100px;
- display: inline-block;
- }
- }
- </style>
|