@ -113,86 +113,48 @@
< / div > < / div >
< / div > < / div >
<!-- < div class = "mapDom" :style ="{opacity:isMapViewer}" style = "position: absolute;left: 105px;top: 250px;width: 250px;height: 180px;" > < / div > -- > < div v -if = " typeList.length ! = 0 " style = " position : absolute ; top : 40px ; display : flex ;
<!-- < div v-if ="active == 25" style="position:absolute;left:367px; top:40px;display: flex; flex-direction: column;" >
< el -button style = "
background - color : rgb ( 1 , 238 , 255 ) ;
color : rgb ( 23 , 72 , 167 ) ;
border : 0 ;
width : 100 px ;
" size=" small " @click=" openPreview ( 'peidian' ) " > 配电系统图 < / e l - b u t t o n >
< el -button style = "
background - color : white ;
color : rgb ( 23 , 72 , 167 ) ;
border : 0 ;
width : 100 px ; margin : 10 px 0 0 0 ;
" size=" small " @click=" openPreview ( 'peidianxiang' ) " > 配电箱系统图 < / e l - b u t t o n >
< el -button style = "
background - color : rgb ( 1 , 238 , 255 ) ;
color : rgb ( 23 , 72 , 167 ) ;
border : 0 ;
width : 100 px ; margin : 10 px 0 0 0 ;
" size=" small " @click=" openPreview ( 'wuding' ) " > 屋顶平面图 < / e l - b u t t o n >
< el -button style = "
background - color : white ;
color : rgb ( 23 , 72 , 167 ) ;
border : 0 ;
width : 100 px ; margin : 10 px 0 0 0 ;
" size=" small " @click=" openPreview ( 'qita' ) " > 其他图纸 < / e l - b u t t o n >
< / div >
< div v -else style = "position:absolute;left:367px; top:40px;display: flex; flex-direction: column;" >
< el -button style = "
background - color : rgb ( 1 , 238 , 255 ) ;
color : rgb ( 23 , 72 , 167 ) ;
border : 0 ;
width : 100 px ;
" size=" small " @click=" openPreview ( active ) " > 平面图纸 < / e l - b u t t o n >
< / div > -- >
< div v -if = " typeList.length ! = 0 & & sbType ! = ' 水 ' & & sbType ! = ' 电子围界 ' " style = " position : absolute ; top : 40px ; display : flex ;
flex - direction : column ; flex - direction : column ;
flex - wrap : wrap ; " flex - wrap : wrap ; "
: style = "{'left': bimModel == 1 ? '367px' : bimModel == 2 ? '217px' : ''}" > : style = "{'left': bimModel == 1 ? '367px' : bimModel == 2 ? '217px' : ''}" >
< el -button style = " < el -button @click ="previewImg" style = "
background - color : # 00 BFB7 ; background - color : # 00 BFB7 ;
color : # fff ; color : # fff ;
border : 0 ; border : 0 ;
width : 80 px ; width : 136 px ;
margin : 5 px ; " height : 30 px ;
border - radius : 0 ;
text - align : left ;
font - size : 14 px ; "
size = "small" size = "small"
@ click = "previewImg" > 图纸预览 < / e l - b u t t o n > > 图纸预览 < span style = "margin-left:20px;" > { { isShowType ? '收起' : '展开' } } < / span > < / e l - b u t t o n >
< / div > < / div >
< div v -show = " isShowType " style = " position : absolute ; top : 82px ; display : flex ; < div v -show = " isShowType " class = "cadimg-box"
flex - direction : column ; "
: style = "{'left': bimModel == 1 ? '367px' : bimModel == 2 ? '217px' : ''}" > : style = "{'left': bimModel == 1 ? '367px' : bimModel == 2 ? '217px' : ''}" >
< el -button style = " < div @click ="clickPreview(index)" v-for ="(item,index) in typeList" :key="item.id" class="cadimg-item" v-if="((page.current-1)*10) <= index && index < ((page.current-1)*10 + 10)" >
background - color : rgba ( 255 , 255 , 255 , 0.3 ) ; < div class = "cadimg-name" > { { item . originalName } } < / div >
color : # 142644 ; < i class = "el-icon-zoom-in" / >
border : 0 ; < / div >
width : 80 px ; <!-- 分页 -- >
margin : 5 px ; " < div class = "cadimg-pagination" >
size = "small" < span @ click = "page.current = index + 1" class = "pagination-dot" v-for ="(item,index) in page.pageCount" :class="(index+1) == page.current ? 'active':''" :key="'pageNo_'+index" > < / span >
v - for = "item in typeList" < / div >
: key = "item.draweClassId"
@ click = "clickPreview(item)" > { { item . draweClassName } } < / e l - b u t t o n >
< / div > < / div >
<!-- < el -select v-model ="imgType" @change="clickPreview" v-show="isShowType" style="position:absolute;left:372px;top:82px;" >
< el -option v-for ="item in typeList" :key="item.draweClassId" :value="item.draweClassId" :label="item.draweClassName" > < / el -option >
< / e l - s e l e c t > - - >
<!-- 图片预览 -- > <!-- 图片预览 -- >
< el -image style = "width: 0; height: 0;opacity: 0;" ref = "preview" :src ="url" :preview-src-list ="srcList" > < / e l - i m a g e > < el -image style = "width: 0; height: 0;opacity: 0;" ref = "preview" :initial-index ="initialIndex" :src ="url" :preview-src-list ="srcList" > < / e l - i m a g e >
< el -image -viewer <!-- < el -image -viewer
v - if = "showViewer" v - if = "showViewer"
: on - close = "closeViewer" : on - close = "closeViewer"
: url - list = "srcList" style = "width: 1000px;height:800px;left:50%;top:50%;margin-left:-500px;margin-top:-400px;overflow: hidden;" / > : url - list = "srcList" style = "width: 1000px;height:800px;left:50%;top:50%;margin-left:-500px;margin-top:-400px;overflow: hidden;" / > -- >
< / div > < / div >
< / template > < / template >
< script > < script >
import * as bfHelper from '../../util/bfHelper' ; import * as bfHelper from '../../util/bfHelper' ;
import ElImageViewer from 'element-ui/packages/image/src/image-viewer '/ / i m p o r t E l I m a g e V i e w e r f r o m ' e l e m e n t - u i / p a c k a g e s / i m a g e / s r c / i m a g e - v i e w e r '
import { getDrawList } from '@/api/equipment/drawManage' import { getDrawList } from '@/api/equipment/drawManage'
export default { export default {
components : { ElImageViewer } , / / c o m p o n e n t s : { E l I m a g e V i e w e r } ,
props : { props : {
sbType : { sbType : {
type : String type : String
@ -245,8 +207,8 @@ export default {
url : '' , url : '' ,
srcList : [ ] , srcList : [ ] ,
active : '' , active : '' ,
tower : null , tower : null , / / 楼 号
layer : null , layer : null , / / 楼 层
ttActive : '' , ttActive : '' ,
num : 0 , num : 0 ,
cameraPosition : bfHelper . cameraPosition , cameraPosition : bfHelper . cameraPosition ,
@ -307,7 +269,25 @@ export default {
type : '' , type : '' ,
/ / i s M a p V i e w e r : 0 / / i s M a p V i e w e r : 0
typeList : [ ] , typeList : [ ] ,
area : '' area : '' ,
sbTypeKeys : {
"电" : 1 ,
"水" : 2 ,
"热" : 3 ,
"监控" : 4 ,
"照明" : 5 ,
"消防" : 6 ,
"电梯" : 7 ,
"空调" : 8 ,
"电子门禁" : 9 ,
"电子围界" : 10
} , / / 专 业 字 典
page : {
current : 1 ,
pageCount : [ ]
} , / / 分 页
cadingName : "" , / / 预 览 图 纸 名 称
initialIndex : 0 , / / 初 始 预 览 图 片 索 引
} }
} , } ,
/ / w a t c h : { / / w a t c h : {
@ -322,30 +302,21 @@ export default {
setTimeout ( ( ) => { setTimeout ( ( ) => {
this . active = this . active == '' ? 25 : this . active this . active = this . active == '' ? 25 : this . active
this . ttActive = this . ttActive == '' ? 20 : this . ttActive this . ttActive = this . ttActive == '' ? 20 : this . ttActive
this . type = this . type == '' ? 'build' : this . type
this . area = this . area == '' ? 1 : this . area
console . log ( '进入此方法111111111111111' , this . active ) console . log ( '进入此方法111111111111111' , this . active )
if ( this . area == 1 ) { this . getTypeList ( this . type )
this . getTypeList ( this . active , this . type , this . area )
} else {
this . getTypeList ( this . ttActive , this . type , this . area )
}
} , 500 ) } , 500 )
} , } ,
methods : { methods : {
/ / 根 据 楼 号 获 取 分 类 列 表 / / 根 据 楼 号 获 取 分 类 列 表
getTypeList ( activeNum , type , area ) { getTypeList ( type ) {
console . log ( 'activeNum ====>' , activeNum , 'type =====>' , type , 'area ====>' , area , 'active ====>' , this . active , 'ttActive ===>' , this . ttActive , 'build ======>' , this . build ) console . log ( '专业-区域-楼号-楼层 ====>' , this . sbTypeKeys [ this . sbType ] , this . bimModel , type , 'active ====>' , this . active , 'ttActive ===>' , this . ttActive , this . tower )
this . area = area let _draweClass = this . sbTypeKeys [ this . sbType ] ;
/ / t h i s . a c t i v e = a c t i v e
if ( type == 'build' ) { if ( type == 'build' ) {
this . typeList = [ ] ; this . typeList = [ ] ;
let val = ( activeNum == '' && area == 1 ) ? this . active : ( activeNum == '' && area == 2 ) ? this . ttActive : activeNum let build = this . bimModel == 1 ? this . active : this . ttActive ;
getDrawList ( { current : 1 , size : 200 , type : area , build : val } ) . then ( res => { getDrawList ( { current : 1 , size : 200 , draweClass : _draweClass , region : _draweClass + '-' + this . bimModel , build : _draweClass + '-' + this . bimModel + '-' + build } ) . then ( res => {
console . log ( 'res ======>' , res ) let arr = res . data . data . records
let arr = this . removeDup ( res . data . data . records )
console . log ( 'arr ============>' , arr )
if ( arr . length == 0 ) { if ( arr . length == 0 ) {
this . typeList = [ ] this . typeList = [ ]
} else { } else {
@ -353,21 +324,40 @@ export default {
this . typeList . push ( item ) this . typeList . push ( item )
} ) } )
} }
console . log ( 'typeList ====>' , this . typeList ) / / 计 算 页 码
let pageCount = Math . ceil ( this . typeList . length / 10 ) ;
let _pageArr = [ ] ;
for ( let i = 1 ; i <= pageCount ; i ++ ) {
_pageArr . push ( i ) ;
}
this . page = {
current : 1 ,
pageCount : _pageArr
}
console . log ( 'typeList ====>' , this . typeList , this . page )
} ) } )
} else if ( type == 'floor' ) { } else if ( type == 'floor' ) {
this . typeList = [ ] ; this . typeList = [ ] ;
let val = ( activeNum == '' && area == 1 ) ? this . active : ( activeNum == '' && area == 2 ) ? this . ttActive : activeNum let build = this . bimModel == 1 ? ( this . tower + 1 ) : 3 ;
getDrawList ( { current : 1 , size : 200 , type : area , floor : val } ) . then ( res => { let layer = this . bimModel == 1 ? this . active : this . ttActive
console . log ( 'res ======>' , res ) getDrawList ( { current : 1 , size : 200 , draweClass : _draweClass , region : _draweClass + '-' + this . bimModel , build : _draweClass + '-' + this . bimModel + '-' + build , floor : _draweClass + '-' + this . bimModel + '-' + build + '-' + layer } ) . then ( res => {
let arr = this . removeDup ( res . data . data . records ) let arr = res . data . data . records
arr . map ( item => { arr . map ( item => {
this . typeList . push ( item ) this . typeList . push ( item )
} ) } )
console . log ( 'typeList ====>' , this . typeList ) / / 计 算 页 码
let pageCount = Math . ceil ( this . typeList . length / 10 ) ;
let _pageArr = [ ] ;
for ( let i = 1 ; i <= pageCount ; i ++ ) {
_pageArr . push ( i ) ;
}
this . page = {
current : 1 ,
pageCount : _pageArr
}
console . log ( 'typeList ====>' , this . typeList , this . page )
} ) } )
} }
console . log ( 'active ====>' , this . active )
} , } ,
/ / 数 组 去 重 / / 数 组 去 重
@ -384,7 +374,12 @@ export default {
return tempArr return tempArr
} , } ,
previewImg ( ) { previewImg ( ) {
this . isShowType = ! this . isShowType this . isShowType = ! this . isShowType ;
if ( this . isShowType ) {
this . page . current = 1 ;
/ / 展 开 重 新 拉 取 最 新 图 纸 列 表
this . getTypeList ( this . type ) ;
}
} , } ,
/ / 图 纸 / / 图 纸
openPreview ( key ) { openPreview ( key ) {
@ -418,37 +413,46 @@ export default {
} , 500 ) } , 500 )
} , } ,
/ / 点 击 分 类 按 钮 获 取 图 纸 / / 点 击 分 类 按 钮 获 取 图 纸
clickPreview ( item ) { clickPreview ( index ) {
console . log ( 'item ====>' , item ) let arr = this . typeList . map ( ( item ) => {
if ( this . type == 'build' ) { return item . url
getDrawList ( { current : 1 , size : 200 , type : this . area , build : item . build , draweClassId : item . draweClassId } ) . then ( res => { } )
console . log ( '图纸res ======>' , res ) this . srcList = arr ;
let str = res . data . data . records . map ( ( item ) => { this . initialIndex = index ;
return item . url this . url = this . srcList [ index ] ;
} ) . join ( ',' ) this . cadingName = this . typeList [ index ] . originalName ;
let arr = str . split ( ',' ) setTimeout ( ( ) => {
this . srcList = arr ; this . $refs . preview . clickHandler ( ) ;
this . url = this . srcList [ 0 ] this . $nextTick ( ( ) => {
setTimeout ( ( ) => { let wrapEle = document . getElementsByClassName ( 'el-image-viewer__wrapper' ) ;
this . $refs . preview . clickHandler ( ) ; let prevEle = document . getElementsByClassName ( 'el-image-viewer__prev' ) ;
this . isShowType = false let nextEle = document . getElementsByClassName ( 'el-image-viewer__next' ) ;
} , 500 ) let closeEle = document . getElementsByClassName ( 'el-image-viewer__close' ) ;
} ) / / 自 定 义 图 纸 名 称 d o m 标 签
} else if ( this . type == 'floor' ) { let divEle = document . createElement ( 'div' ) ;
getDrawList ( { current : 1 , size : 200 , type : this . area , build : item . build , floor : item . floor , draweClassId : item . draweClassId } ) . then ( res => { divEle . setAttribute ( 'class' , 'el-image-viewer-fixedname' ) ;
console . log ( '图纸res1 ======>' , res ) divEle . setAttribute ( 'style' , 'position:fixed;left:50%;top:60px;width:220px;color:#fff;text-align:center;background:#606266;border-radius:50px;padding:10px;margin-left:-120px;z-index:2002' ) ;
let str = res . data . data . records . map ( ( item ) => { wrapEle [ 0 ] . append ( divEle ) ;
return item . url let divEle2 = document . getElementsByClassName ( 'el-image-viewer-fixedname' ) ;
} ) . join ( ',' ) divEle2 [ 0 ] . innerText = this . cadingName ;
let arr = str . split ( ',' ) if ( prevEle != 'undefined' ) {
this . srcList = arr ; prevEle [ 0 ] . addEventListener ( 'click' , ( e ) => {
this . url = this . srcList [ 0 ] let src = document . getElementsByClassName ( 'el-image-viewer__canvas' ) [ 0 ] . children [ 0 ] . getAttribute ( 'src' ) ;
setTimeout ( ( ) => { let idx = this . typeList . findIndex ( item => item . url == src ) ;
this . $refs . preview . clickHandler ( ) ; this . cadingName = this . typeList [ idx ] . originalName ;
this . isShowType = false divEle2 [ 0 ] . innerText = this . cadingName ;
} , 500 ) } )
}
if ( nextEle != 'undefined' ) {
nextEle [ 0 ] . addEventListener ( 'click' , ( e ) => {
let src = document . getElementsByClassName ( 'el-image-viewer__canvas' ) [ 0 ] . children [ 0 ] . getAttribute ( 'src' ) ;
let idx = this . typeList . findIndex ( item => item . url == src ) ;
this . cadingName = this . typeList [ idx ] . originalName ;
divEle2 [ 0 ] . innerText = this . cadingName ;
} )
}
} ) } )
} } , 500 )
} , } ,
closeViewer ( ) { closeViewer ( ) {
this . showViewer = false ; this . showViewer = false ;
@ -456,7 +460,6 @@ export default {
clickBtn ( activeNum , tower , layer , type ) { clickBtn ( activeNum , tower , layer , type ) {
console . log ( '进入此方法' ) console . log ( '进入此方法' )
this . isShowType = false ; this . isShowType = false ;
this . getTypeList ( activeNum , type , 1 )
if ( this . sbType == '空调' && activeNum <= 6 ) { if ( this . sbType == '空调' && activeNum <= 6 ) {
return false ; return false ;
} }
@ -491,6 +494,7 @@ export default {
this . active = activeNum ; this . active = activeNum ;
this . tower = tower ; this . tower = tower ;
this . type = type this . type = type
this . getTypeList ( type ) ;
if ( this . sbType == '空开' && activeNum != 25 ) { if ( this . sbType == '空开' && activeNum != 25 ) {
bfHelper . lookPipeline2 ( null , null , tower , bfHelper . lookPipeline2 ( null , null , tower ,
@ -968,4 +972,52 @@ export default {
height : 32 px ; height : 32 px ;
} }
} }
/ / 图 纸
. cadimg - box {
position : absolute ;
top : 70 px ;
width : 107 px ;
display : flex ;
flex - direction : column ;
background : rgba ( 3 , 22 , 57 , 0.3 ) ;
color : # fff ;
font - size : 14 px ;
padding : 0 15 px 0 14 px ;
line - height : 36 px ;
height : 400 px ;
. cadimg - item {
display : flex ;
align - items : center ;
cursor : pointer ;
& : hover , & . active {
color : # 07 a7ff ;
}
. cadimg - name {
width : 100 px ;
overflow : hidden ;
white - space : nowrap ;
text - overflow : ellipsis ;
}
}
. cadimg - pagination {
position : absolute ;
left : 0 ;
right : 0 ;
bottom : 15 px ;
display : flex ;
justify - content : center ;
. pagination - dot {
cursor : pointer ;
display : inline - block ;
width : 8 px ;
height : 8 px ;
background : rgba ( 255 , 255 , 255 , 0.2 ) ;
border - radius : 4 px ;
margin : 0 5 px ;
& . active {
background : # c3e1ea ;
}
}
}
}
< / style > < / style >
zhangqun
2 years ago