图纸

src/components/monitoring/clickCp.vue

@@ -1,5 +1,6 @@
 <template>
 	<div>
+		<div v-if="sbType != '水' && sbType != '电子围界'">
 			<div class="clickBox" v-if="bimModel == 1">
 				<div class="btnBox flex-center-center">
 					<div :class="[active == 1 ? 'active' : '', tower == 0 ? 'active2' : '']" class="btn tower"
@@ -99,8 +100,7 @@
 				<span :class="ttActive == 1 ? 'active1' : ''" @click="clickTt(1)">1F</span>
 				<span :class="ttActive == 2 ? 'active1' : ''" @click="clickTt(2)">2F</span>
 
-			<div :class="ttActive == 0 ? 'active1' : ''"
-				style="display: flex;align-items: center;justify-content: center;">
+				<div :class="ttActive == 0 ? 'active1' : ''" style="display: flex;align-items: center;justify-content: center;">
 					<img src="../../../public/img/monitoring/tower-build.png" alt="">
 					<span @click="clickTt(0)">塔楼</span>
 				</div>
@@ -112,14 +112,56 @@
 
 
 			</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>
+		<!-- 图片预览 -->
+		<el-image style="width: 0; height: 0;opacity: 0;" ref="preview" :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;" />
 	</div>
-
 </template>
 
 <script>
 import * as bfHelper from '../../util/bfHelper';
+import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
 export default {
+	components: { ElImageViewer },
 	props: {
 		sbType: {
 			type: String
@@ -143,6 +185,32 @@ export default {
 	},
 	data() {
 		return {
+			//图纸
+			//使用el-image图纸路径写法
+			cardImg: {
+				peidian: ['../../../img/cad/peidian/4DS001.png','../../../img/cad/peidian/4DS002.png','../../../img/cad/peidian/4DS003.png','../../../img/cad/peidian/4DS004.png','../../../img/cad/peidian/4DS005.png'],
+				peidianxiang: ['../../../img/cad/peidianxiang/6BS001.png','../../../img/cad/peidianxiang/6BS002.png','../../../img/cad/peidianxiang/6BS003.png','../../../img/cad/peidianxiang/6BS004.png','../../../img/cad/peidianxiang/6BS005.png','../../../img/cad/peidianxiang/6BS006.png','../../../img/cad/peidianxiang/6BS007.png','../../../img/cad/peidianxiang/6BS008.png','../../../img/cad/peidianxiang/6BS009.png','../../../img/cad/peidianxiang/6BS010.png'],
+				26: ['../../../img/cad/7Q/7QP001.png','../../../img/cad/7Q/7QP002.png'],
+				1: ['../../../img/cad/7Q/7QP003.png','../../../img/cad/7Q/7QP004.png','../../../img/cad/7Q/7QP005.png','../../../img/cad/7Q/7QP013.png','../../../img/cad/7Q/7QP014.png'],
+				2: ['../../../img/cad/7Q/7QP006.png','../../../img/cad/7Q/7QP007.png'],
+				3: ['../../../img/cad/7Q/7QP008.png','../../../img/cad/7Q/7QP009.png'],
+				wuding: ['../../../img/cad/7Q/7QP010.png','../../../img/cad/7Q/7QP011.png','../../../img/cad/7Q/7QP012.png'],
+				qita: ['../../../img/cad/5C/5CS001.png','../../../img/cad/5C/5CS002.png','../../../img/cad/5C/5CS003.png','../../../img/cad/5C/5CS004.png','../../../img/cad/5C/5CS005.png','../../../img/cad/peidianxaing/8LS001.png','../../../img/cad/peidianxaing/qiangdian.png','../../../img/cad/7Q/7QP012.png'],
+			},
+			//使用el-image-viewer图纸路径写法
+			// cardImg: {
+			// 	peidian: ['/img/cad/peidian/4DS001.png','/img/cad/peidian/4DS002.png','/img/cad/peidian/4DS003.png','/img/cad/peidian/4DS004.png','/img/cad/peidian/4DS005.png'],
+			// 	peidianxiang: ['/img/cad/peidianxiang/6BS001.png','/img/cad/peidianxiang/6BS002.png','/img/cad/peidianxiang/6BS003.png','/img/cad/peidianxiang/6BS004.png','/img/cad/peidianxiang/6BS005.png','/img/cad/peidianxiang/6BS006.png','/img/cad/peidianxiang/6BS007.png','/img/cad/peidianxiang/6BS008.png','/img/cad/peidianxiang/6BS009.png','/img/cad/peidianxiang/6BS010.png'],
+			// 	26: ['/img/cad/7Q/7QP001.png','/img/cad/7Q/7QP002.png'],
+			// 	1: ['/img/cad/7Q/7QP003.png','/img/cad/7Q/7QP004.png','/img/cad/7Q/7QP005.png','/img/cad/7Q/7QP013.png','/img/cad/7Q/7QP014.png'],
+			// 	2: ['/img/cad/7Q/7QP006.png','/img/cad/7Q/7QP007.png'],
+			// 	3: ['/img/cad/7Q/7QP008.png','/img/cad/7Q/7QP009.png'],
+			// 	wuding: ['/img/cad/7Q/7QP010.png','/img/cad/7Q/7QP011.png','/img/cad/7Q/7QP012.png'],
+			// 	qita: ['/img/cad/5C/5CS001.png','/img/cad/5C/5CS002.png','/img/cad/5C/5CS003.png','/img/cad/5C/5CS004.png','/img/cad/5C/5CS005.png','/img/cad/peidianxaing/8LS001.png','/img/cad/peidianxaing/qiangdian.png','/img/cad/7Q/7QP012.png'],
+			// },
+			showViewer: false,
+			url: '',
+			srcList: [],
 			active: 25,
 			tower: null,
 			layer: null,
@@ -207,6 +275,38 @@ export default {
 		}
 	},
 	methods: {
+		//图纸
+		openPreview(key) {
+			if([7,8,9,10,11,12].indexOf(key) > -1) {
+				//1F
+				this.url = this.cardImg[1][0];
+				this.srcList = this.cardImg[1];
+			} else if([13,14,15,16,17,18].indexOf(key) > -1) {
+				//2F
+				this.url = this.cardImg[2][0];
+				this.srcList = this.cardImg[2];
+			} else if([19,20,21,22,23,24].indexOf(key) > -1) {
+				//3F
+				this.url = this.cardImg[1][0];
+				this.srcList = this.cardImg[1];
+			} else if([1,2,3,4,5,6].indexOf(key) > -1) {
+				//整栋楼
+				this.url = this.cardImg[1][0];
+				this.srcList = this.srcList.concat(this.cardImg[1]).concat(this.cardImg[2]).concat(this.cardImg[3]);
+			}
+			else{
+				this.url = this.cardImg[key][0];
+				this.srcList = this.cardImg[key];
+			}
+			// this.showViewer = true;//使用el-image-viewer
+			// 使用el-image
+			setTimeout(() => {
+				this.$refs.preview.clickHandler();
+			}, 500)
+		},
+		closeViewer() {
+			this.showViewer = false;
+		},
 		clickBtn(activeNum, tower, layer) {
 			if (this.sbType == '空调' && activeNum <= 6) {
 				return false;

src/components/monitoring/lift.vue

@@ -179,8 +179,8 @@ export default {
 			pos: 0,
 			height: 5350,
 			offsetZ: 250,
-			path: "ws://192.168.1.3/blade-websocket/ws?lift",
-			// path: "ws://10.90.100.204/blade-websocket/ws?lift",
+			// path: "ws://192.168.1.3/blade-websocket/ws?lift",
+			path: "ws://10.90.100.204/blade-websocket/ws?lift",
 			socket: "",
 			arr: [], //电梯信息
 			listData: [],

src/components/monitoring/light.vue

@@ -281,8 +281,8 @@ export default {
   },
   data() {
     return {
-      // path:'ws://10.90.100.204/blade-websocket/ws?light_kk',//socket地址
-      path:'ws://192.168.1.3/blade-websocket/ws?light_kk',//socket地址
+      path:'ws://10.90.100.204/blade-websocket/ws?light_kk',//socket地址
+      // path:'ws://192.168.1.3/blade-websocket/ws?light_kk',//socket地址
       build: "00", //楼
       floored: null, //楼层
       controlAll: 2, //批量控制开关

src/components/monitoring/wall.vue

@@ -1,6 +1,8 @@
 <!-- 电子围界 -->
 <template>
   <div>
+    <!-- 各楼栋楼层切换 -->
+    <clickCp :bimModel="bimModel" sbType="电子围界" ref="clickcp"></clickCp>
     <!-- 返回主视角 -->
     <backHome :bimModel="bimModel" type="电子围界" dom=".mapDom"></backHome>
     <div style="position: absolute; left: 84px; top: 20px" v-if="bimModel == 1">
@@ -254,6 +256,7 @@
 </template>
 
 <script>
+import clickCp from "./clickCp";
 import * as bfHelper from "../../util/bfHelper";
 import * as commonValue from "../../util/commonValue";
 import backHome from "./backHome";
@@ -274,6 +277,7 @@ export default {
   },
   components: {
     backHome,
+    clickCp,
   },
   data() {
     return {

src/components/monitoring/water.vue

@@ -2,7 +2,7 @@
   <!-- 水 -->
   <div v-if="waterState" class="water">
     <!-- 各楼栋楼层切换 -->
-    <!-- <clickCp :bimModel="bimModel" sbType="水" ref="clickcp"></clickCp> -->
+    <clickCp :bimModel="bimModel" sbType="水" ref="clickcp"></clickCp>
     <!-- 返回主视角 -->
     <backHome :bimModel="bimModel" type="水" :waterModelOn="onList" :waterModelOff="offList" :waterModelAlarm="bjList"
       dom=".mapDom"></backHome>

vue.config.js

@@ -27,6 +27,7 @@ module.exports = {
     port: 1888,
     proxy: {
       "/bimfaceApi": {
+        // target: 'http://192.168.3.58:8001',
         target: 'http://192.168.1.106:8001',
         ws: true,
         pathRewrite: {