@ -145,7 +145,36 @@
< / e l - p a g i n a t i o n > < / e l - p a g i n a t i o n >
< / div > < / div >
< / div > < / div >
<!-- 图纸列表 -- >
< div v -if = " typeList.length ! = 0 " style = " position : absolute ; top : 40px ; display : flex ;
flex - direction : column ;
flex - wrap : wrap ; "
: style = "{'left': bimModel == 1 ? '367px' : bimModel == 2 ? '217px' : ''}" >
< el -button @click ="previewImg" style = "
background - color : # 00 BFB7 ;
color : # fff ;
border : 0 ;
width : 136 px ;
height : 30 px ;
border - radius : 0 ;
text - align : left ;
font - size : 14 px ; "
size = "small"
> 图纸预览 < span style = "margin-left:20px;" > { { isShowType ? '收起' : '展开' } } < / span > < / e l - b u t t o n >
< / div >
< div v -show = " isShowType " class = "cadimg-box"
: style = "{'left': bimModel == 1 ? '367px' : bimModel == 2 ? '217px' : ''}" >
< 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)" >
< div class = "cadimg-name" > { { item . originalName } } < / div >
< i class = "el-icon-zoom-in" / >
< / div >
<!-- 分页 -- >
< div class = "cadimg-pagination" v-if ="typeList.length > 10" >
< 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 >
< / div >
< / div >
<!-- 图片预览 -- >
< 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 >
< / div > < / div >
< / template > < / template >
@ -162,6 +191,7 @@ import {
} from '@/api/garden/monitoring' ; } from '@/api/garden/monitoring' ;
import backHome from './backHome' ; import backHome from './backHome' ;
import { dateFormat } from "@/util/date" ; import { dateFormat } from "@/util/date" ;
import { getDrawList } from '@/api/equipment/drawManage'
export default { export default {
props : { props : {
dtState : { dtState : {
@ -243,6 +273,11 @@ export default {
tower : null , tower : null ,
layer : null , layer : null ,
liftArr : [ ] , liftArr : [ ] ,
typeList : [ ] ,
page : { } ,
isShowType : false ,
initialIndex : 0 , / / 初 始 预 览 图 片 索 引
srcList : [ ] ,
} }
} , } ,
watch : { watch : {
@ -267,6 +302,7 @@ export default {
bfHelper . setOpacityFun ( ) ; bfHelper . setOpacityFun ( ) ;
setTimeout ( ( ) => { setTimeout ( ( ) => {
this . setTowerLift ( ) ; this . setTowerLift ( ) ;
this . getList ( )
} , 300 ) ; } , 300 ) ;
bfHelper . setCameraStatus ( { bfHelper . setCameraStatus ( {
aspect : 1.889763779527559 , aspect : 1.889763779527559 ,
@ -302,6 +338,7 @@ export default {
this . setTowerLift ( ) ; this . setTowerLift ( ) ;
setTimeout ( ( ) => { setTimeout ( ( ) => {
this . liftCustom1 ( ) this . liftCustom1 ( )
this . getList ( )
} , 500 ) ; } , 500 ) ;
} }
} }
@ -346,6 +383,107 @@ export default {
bfHelper . clearComponent ( ) ; bfHelper . clearComponent ( ) ;
} , } ,
methods : { methods : {
/ / 获 取 图 纸 列 表
getList ( ) {
this . typeList = [ ]
if ( this . bimModel == 1 ) {
getDrawList ( { current : 1 , size : 200 , draweClass : '7' , region : '7-1' , build : '7-1-25' } ) . then ( res => {
let arr = res . data . data . records
if ( arr . length == 0 ) {
this . typeList = [ ]
} else {
arr . map ( item => {
this . typeList . push ( item )
} )
}
/ / 计 算 页 码
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 {
getDrawList ( { current : 1 , size : 200 , draweClass : '7' , region : '7-2' , } ) . then ( res => {
let arr = res . data . data . records
if ( arr . length == 0 ) {
this . typeList = [ ]
} else {
arr . map ( item => {
this . typeList . push ( item )
} )
}
/ / 计 算 页 码
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 )
} )
}
} ,
previewImg ( ) {
this . isShowType = ! this . isShowType ;
console . log ( 'isShowType ====>' , this . isShowType )
if ( this . isShowType ) {
this . page . current = 1 ;
/ / 展 开 重 新 拉 取 最 新 图 纸 列 表
this . getList ( ) ;
}
} ,
/ / 点 击 分 类 按 钮 获 取 图 纸
clickPreview ( index ) {
let arr = this . typeList . map ( ( item ) => {
return item . url
} )
this . srcList = arr ;
this . initialIndex = index ;
this . url = this . srcList [ index ] ;
this . cadingName = this . typeList [ index ] . originalName ;
setTimeout ( ( ) => {
this . $refs . preview . clickHandler ( ) ;
this . $nextTick ( ( ) => {
let wrapEle = document . getElementsByClassName ( 'el-image-viewer__wrapper' ) ;
let prevEle = document . getElementsByClassName ( 'el-image-viewer__prev' ) ;
let nextEle = document . getElementsByClassName ( 'el-image-viewer__next' ) ;
let closeEle = document . getElementsByClassName ( 'el-image-viewer__close' ) ;
/ / 自 定 义 图 纸 名 称 d o m 标 签
let divEle = document . createElement ( 'div' ) ;
divEle . setAttribute ( 'class' , 'el-image-viewer-fixedname' ) ;
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' ) ;
wrapEle [ 0 ] . append ( divEle ) ;
let divEle2 = document . getElementsByClassName ( 'el-image-viewer-fixedname' ) ;
divEle2 [ 0 ] . innerText = this . cadingName ;
if ( prevEle != 'undefined' ) {
prevEle [ 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 ;
} )
}
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 )
} ,
tableContext ( row , column , event ) { tableContext ( row , column , event ) {
event . preventDefault ( ) ; / / 阻 止 默 认 菜 单 event . preventDefault ( ) ; / / 阻 止 默 认 菜 单
const routerUrl = this . $router . resolve ( { path : '/equipment/index' , query : { code : row . code } } ) ; const routerUrl = this . $router . resolve ( { path : '/equipment/index' , query : { code : row . code } } ) ;
@ -1348,6 +1486,54 @@ export default {
} }
}
/ / 图 纸
. 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 >
< style scoped lang = "scss" > < style scoped lang = "scss" >
jinna
2 years ago