From 5132b5ed7dde55a71694ab4ce89cf09661a241f4 Mon Sep 17 00:00:00 2001
From: zhangqun <179111901@qq.com>
Date: Tue, 14 Nov 2023 14:58:23 +0800
Subject: [PATCH] =?UTF-8?q?=E5=9B=BE=E7=BA=B8=E9=A2=84=E8=A7=88=E6=94=B9?=
 =?UTF-8?q?=E7=89=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/monitoring/clickCp.vue | 288 +++++++++++++++-----------
 1 file changed, 170 insertions(+), 118 deletions(-)

diff --git a/src/components/monitoring/clickCp.vue b/src/components/monitoring/clickCp.vue
index d0aaef5..c6018b8 100644
--- a/src/components/monitoring/clickCp.vue
+++ b/src/components/monitoring/clickCp.vue
@@ -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>