ibp盘调整

src/views/ibp/ibpDraft/ibpEdit/ibpOperate/index.vue

@@ -3,10 +3,15 @@
         <div class="map-control">
             <el-card type="border-card">
                 <div slot="header" class="clearfix">
-          <span>
-            车站名称
-            <b>请选择车站</b>
-          </span>
+          <span>车站名称</span>
+            <el-select v-model="stationCode" @change="changeStationCode" placeholder="请选择车站">
+                <el-option
+                    v-for="item in stationOptions"
+                    :key="item.value"
+                    :label="item.label"
+                    :value="item.value">
+                </el-option>
+            </el-select>
                     <el-button
                         type="text"
                         style="float: right; padding: 3px 0; margin-right: 5px;"
@@ -153,7 +158,18 @@
         data() {
             return {
                 enabledTab: 'BgImage',
-                data: ''
+                data: '',
+                stationOptions:[
+                    {
+                        value: 'Station_203_0.07533',
+                        label: '福州线一号车站'
+                    },
+                    {
+                        value: 'Station_209_0.95175',
+                        label: '福州线三号车站'
+                    }
+                ],
+                stationCode: ''
             };
         },
         watch: {
@@ -182,9 +198,12 @@
                 this.$store.dispatch('ibp/deleteIbpDevices', model);
             },
             handleSave() {
-                const data = JSON.stringify(this.$store.state.ibp.ibp)
+                const data = JSON.stringify(this.$store.state.ibp.ibp);
                 console.log(data);
             },
+            changeStationCode(e) {
+                this.$emit('ibpChange',e);
+            },
             handleTabClick() {
                 this.$refs.ibpline.initPage();
                 this.$refs.ibptext.initPage();

src/views/ibp/ibpDraft/ibpEdit/index.vue

@@ -5,7 +5,7 @@
         <ibp-plate ref="ibpPlate" :size="size"/>
       </div>
       <div class="map-draft">
-        <ibp-operate ref="ibpOperate" />
+        <ibp-operate ref="ibpOperate" @ibpChange="ibpChange" />
       </div>
     </div>
   </transition>
@@ -52,7 +52,11 @@ export default {
 		},
 		selectViewDraft(data) {
 			this.viewDraft = data;
-		}
+		},
+        ibpChange(stationCode) {
+            this.$refs.ibpPlate.show(stationCode);
+            this.$refs.ibpPlate.drawIbpInit();
+        }
 	}
 };
 </script>

src/views/ibp/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div :id="ibpId" :style="{ width: '100%', height: '100%' }" class="ibp-canvas" />
+    <div :id="ibpId" :style="{ width: '100%', height: '100%',background:'#000' }" class="ibp-canvas" />
     <el-button v-if="showBackButton" class="ibp-button" type="primary" @click="back">返回</el-button>
   </div>
 </template>
@@ -76,17 +76,17 @@ export default {
 		this.setWindowSize();
 	},
 	beforeDestroy() {
-		if (this.$ibp) {
-			this.$ibp.dispose();
-			this.$ibp = '';
-            Vue.prototype.$ibp = '';
-        }
+		this.ibpDestroy();
 	},
 	methods: {
 		show (deviceCode) {
+		    if (!deviceCode) {
+		        return;
+            }
 			document.getElementById(this.ibpId).oncontextmenu = function (e) {
 				return false;
 			};
+            this.ibpDestroy();
 			const data = parser(ibpData[deviceCode], {width: this.canvasWidth, height: this.canvasHeight});
 			this.$ibp = new IbpPan({
 				dom: document.getElementById(this.ibpId),
@@ -127,7 +127,7 @@ export default {
 		},
 		// 绘图时调用，元素可拖拽
 		drawIbpInit() {
-			this.$ibp.drawIbpInit();
+            this.$ibp&&this.$ibp.drawIbpInit();
 			this.showBackButton = false;
 		},
 		// 初始化电子表时间
@@ -154,7 +154,14 @@ export default {
 		},
 		back() {
 			this.$emit('hideIbp');
-		}
+		},
+        ibpDestroy() {
+            if (this.$ibp) {
+                this.$ibp.dispose();
+                this.$ibp = '';
+                Vue.prototype.$ibp = '';
+            }
+        }
 	}
 };
 </script>