suojin
/
smartpark-front
14
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

图纸预览改版

Browse Source
main
zhangqun 2 years ago
parent 2b42311911
commit 5132b5ed7d
1 changed files with 170 additions and 118 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 288
      src/components/monitoring/clickCp.vue

288
src/components/monitoring/clickCp.vue
Unescape View File

@ -113,86 +113,48 @@
</div>
</div>
<!-- <div class="mapDom" :style="{opacity:isMapViewer}" style="position: absolute;left: 105px;top: 250px;width: 250px;height: 180px;"></div> -->
<!-- <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: 100px;
" size="small" @click="openPreview('peidian')">配电系统图</el-button>
<el-button style="
background-color: white;
color: rgb(23, 72, 167);
border: 0;
width: 100px;margin: 10px 0 0 0;
" size="small" @click="openPreview('peidianxiang')">配电箱系统图</el-button>
<el-button style="
background-color: rgb(1, 238, 255);
color: rgb(23, 72, 167);
border: 0;
width: 100px;margin: 10px 0 0 0;
" size="small" @click="openPreview('wuding')">屋顶平面图</el-button>
<el-button style="
background-color: white;
color: rgb(23, 72, 167);
border: 0;
width: 100px;margin: 10px 0 0 0;
" size="small" @click="openPreview('qita')">其他图纸</el-button>
</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: 100px;
" size="small" @click="openPreview(active)">平面图纸</el-button>
</div> -->
<div v-if="typeList.length != 0 && sbType != '水' && sbType != '电子围界'" style="position:absolute; top:40px;display: flex;
<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 style="
<el-button @click="previewImg" style="
background-color: #00BFB7;
color: #fff;
border: 0;
width:80px;
margin:5px;"
width:136px;
height: 30px;
border-radius:0;
text-align:left;
font-size:14px;"
size="small"
@click="previewImg">图纸预览</el-button>
>图纸预览<span style="margin-left:20px;">{{isShowType?'收起':'展开'}}</span></el-button>
</div>
<div v-show="isShowType" style="position:absolute; top:82px;display: flex;
flex-direction: column;"
<div v-show="isShowType" class="cadimg-box"
:style="{'left': bimModel == 1 ? '367px' : bimModel == 2 ? '217px' : ''}">
<el-button style="
background-color: rgba(255, 255, 255,0.3);
color: #142644;
border: 0;
width:80px;
margin:5px;"
size="small"
v-for="item in typeList"
:key="item.draweClassId"
@click="clickPreview(item)">{{item.draweClassName}}</el-button>
<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">
<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-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>
</el-select> -->
<!-- 图片预览 -->
<el-image style="width: 0; height: 0;opacity: 0;" ref="preview" :src="url" :preview-src-list="srcList"></el-image>
<el-image-viewer
<el-image style="width: 0; height: 0;opacity: 0;" ref="preview" :initial-index="initialIndex" :src="url" :preview-src-list="srcList"></el-image>
<!-- <el-image-viewer
v-if="showViewer"
: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>
</template>
<script>
import * as bfHelper from '../../util/bfHelper';
import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
// import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
import {getDrawList} from '@/api/equipment/drawManage'
export default {
components: { ElImageViewer },
// components: { ElImageViewer },
props: {
sbType: {
type: String
@ -245,8 +207,8 @@ export default {
url: '',
srcList: [],
active: '',
tower: null,
layer: null,
tower: null,//楼号
layer: null,//楼层
ttActive: '',
num: 0,
cameraPosition: bfHelper.cameraPosition,
@ -307,7 +269,25 @@ export default {
type:'',
// isMapViewer:0
typeList:[],
area:''
area:'',
sbTypeKeys:{
"电":1,
"水":2,
"热":3,
"监控":4,
"照明":5,
"消防":6,
"电梯":7,
"空调":8,
"电子门禁":9,
"电子围界":10
},//专业字典
page: {
current: 1,
pageCount: []
},//分页
cadingName: "",//预览图纸名称
initialIndex: 0,//初始预览图片索引
}
},
// watch:{
@ -322,30 +302,21 @@ export default {
setTimeout(() =>{
this.active = this.active == '' ? 25 : this.active
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)
if(this.area == 1){
this.getTypeList(this.active,this.type,this.area)
}else{
this.getTypeList(this.ttActive,this.type,this.area)
}
this.getTypeList(this.type)
},500)
},
methods: {
// 根据楼号获取分类列表
getTypeList(activeNum,type,area){
console.log('activeNum ====>',activeNum,'type =====>',type,'area ====>',area,'active ====>',this.active,'ttActive ===>',this.ttActive,'build ======>',this.build)
this.area = area
// this.active = active
getTypeList(type){
console.log('专业-区域-楼号-楼层 ====>',this.sbTypeKeys[this.sbType],this.bimModel,type,'active ====>',this.active,'ttActive ===>',this.ttActive, this.tower)
let _draweClass = this.sbTypeKeys[this.sbType];
if(type == 'build'){
this.typeList = [];
let val = (activeNum == '' && area == 1) ? this.active : (activeNum == '' && area == 2) ? this.ttActive : activeNum
getDrawList({current:1,size:200,type:area,build:val}).then(res =>{
console.log('res ======>',res)
let arr = this.removeDup(res.data.data.records)
console.log('arr ============>',arr)
let build = this.bimModel == 1 ? this.active : this.ttActive;
getDrawList({current:1,size:200,draweClass:_draweClass,region:_draweClass+'-'+this.bimModel,build:_draweClass+'-'+this.bimModel+'-'+build}).then(res =>{
let arr = res.data.data.records
if(arr.length == 0){
this.typeList = []
}else{
@ -353,21 +324,40 @@ export default {
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'){
this.typeList = [];
let val = (activeNum == '' && area == 1) ? this.active : (activeNum == '' && area == 2) ? this.ttActive : activeNum
getDrawList({current:1,size:200,type:area,floor:val}).then(res =>{
console.log('res ======>',res)
let arr = this.removeDup(res.data.data.records)
let build = this.bimModel == 1 ? (this.tower + 1) :3;
let layer = this.bimModel == 1 ? this.active : this.ttActive
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 = res.data.data.records
arr.map(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
},
previewImg(){
this.isShowType = !this.isShowType
this.isShowType = !this.isShowType;
if(this.isShowType) {
this.page.current = 1;
//展开重新拉取最新图纸列表
this.getTypeList(this.type);
}
},
//图纸
openPreview(key) {
@ -418,37 +413,46 @@ export default {
}, 500)
},
// 点击分类按钮获取图纸
clickPreview(item){
console.log('item ====>',item)
if(this.type == 'build'){
getDrawList({current:1,size:200,type:this.area,build:item.build,draweClassId:item.draweClassId}).then(res =>{
console.log('图纸res ======>',res)
let str = res.data.data.records.map((item) => {
return item.url
}).join(',')
let arr = str.split(',')
this.srcList = arr;
this.url = this.srcList[0]
setTimeout(() =>{
this.$refs.preview.clickHandler();
this.isShowType = false
},500)
})
}else if(this.type == 'floor'){
getDrawList({current:1,size:200,type:this.area,build:item.build,floor:item.floor,draweClassId:item.draweClassId}).then(res =>{
console.log('图纸res1 ======>',res)
let str = res.data.data.records.map((item) => {
return item.url
}).join(',')
let arr = str.split(',')
this.srcList = arr;
this.url = this.srcList[0]
setTimeout(() =>{
this.$refs.preview.clickHandler();
this.isShowType = false
},500)
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');
//自定义图纸名称dom标签
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)
},
closeViewer() {
this.showViewer = false;
@ -456,7 +460,6 @@ export default {
clickBtn(activeNum, tower, layer,type) {
console.log('进入此方法')
this.isShowType = false;
this.getTypeList(activeNum,type,1)
if (this.sbType == '空调' && activeNum <= 6) {
return false;
}
@ -491,6 +494,7 @@ export default {
this.active = activeNum;
this.tower = tower;
this.type = type
this.getTypeList(type);
if (this.sbType == '空开' && activeNum != 25) {
bfHelper.lookPipeline2(null, null, tower,
@ -968,4 +972,52 @@ export default {
height: 32px;
}
}
// 图纸
.cadimg-box{
position:absolute;
top:70px;
width: 107px;
display: flex;
flex-direction: column;
background: rgba(3,22,57,0.3);
color: #fff;
font-size: 14px;
padding: 0 15px 0 14px;
line-height: 36px;
height: 400px;
.cadimg-item{
display: flex;
align-items: center;
cursor: pointer;
&:hover,&.active{
color:#07a7ff;
}
.cadimg-name{
width: 100px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
}
.cadimg-pagination{
position: absolute;
left: 0;
right:0;
bottom: 15px;
display: flex;
justify-content: center;
.pagination-dot{
cursor: pointer;
display: inline-block;
width: 8px;
height:8px;
background: rgba(255,255,255,0.2);
border-radius:4px;
margin:0 5px;
&.active{
background:#c3e1ea;
}
}
}
}
</style>

Write Preview
Loading…
Cancel
Save