封装车次窗鼠标事件以及车次窗操作

src/jmap/shape/Section/EMouse.js

@@ -99,8 +99,8 @@ class EMouse extends Group {
 			this.sectionTextBorder && this.sectionTextBorder.show();
 			this.lineBorder && this.lineBorder.show();
 			const instance = this.getInstanceByCode(this.device.model.trainWindowCode);
-			if (instance && instance.mouseEnter) {
+			if (instance && instance.mouseEvent && instance.mouseEvent.mouseEnter) {
-				instance.mouseEnter(e);
+				instance.mouseEvent.mouseEnter(e);
 			}
 		}
 	}
@@ -118,8 +118,8 @@ class EMouse extends Group {
 				this.sectionTextBorder && this.sectionTextBorder.hide();
 				this.lineBorder && this.lineBorder.hide();
 				const instance = this.getInstanceByCode(this.device.model.trainWindowCode);
-				if (instance && instance.mouseLeave) {
+				if (instance && instance.mouseEvent && instance.mouseEvent.mouseLeave) {
-					instance.mouseLeave(e);
+					instance.mouseEvent.mouseLeave(e);
 				}
 			}
 		}

src/jmap/shape/Switch/EMouse.js

@@ -83,8 +83,8 @@ class EMouse extends Group {
 			const section = store.getters['map/getDeviceByCode'](this.device.model.sectionACode) || {};
 			const parentSection = store.getters['map/getDeviceByCode'](section.parentCode) || {};
 			const instance = this.getInstanceByCode(parentSection.trainWindowCode);
-			if (instance && instance.mouseLeave) {
+			if (instance && instance.mouseEvent && instance.mouseEvent.mouseLeave) {
-				instance.mouseLeave(e);
+				instance.mouseEvent.mouseLeave(e);
 			}
 		}
 	}
@@ -101,8 +101,8 @@ class EMouse extends Group {
 		const section = store.getters['map/getDeviceByCode'](this.device.model.sectionACode) || {};
 		const parentSection = store.getters['map/getDeviceByCode'](section.parentCode) || {};
 		const instance = this.getInstanceByCode(parentSection.trainWindowCode);
-		if (instance && instance.mouseEnter) {
+		if (instance && instance.mouseEvent && instance.mouseEvent.mouseEnter) {
-			instance.mouseEnter(e);
+			instance.mouseEvent.mouseEnter(e);
 		}
 	}
 

src/jmap/shape/TrainWindow/EMouse.js

@@ -0,0 +1,37 @@
+export default class EMouse {
+	constructor(device) {
+		this.device = device;
+	}
+
+	mouseover(e) {
+		if (this.device.prdType) {
+			this.device.setVisible(true);
+			const instance = this.device.getInstanceByCode(this.device.model.sectionCode);
+			if (instance && instance.mouseEvent && instance.mouseEvent.mouseover) {
+				instance.mouseEvent.mouseEnter(e);
+			}
+		}
+	}
+
+	mouseout(e) {
+		if (this.device.prdType) {
+			this.device.setVisible(false || this.device.model.trainWindowShow);
+			const instance = this.device.getInstanceByCode(this.device.model.sectionCode);
+			if (instance && instance.mouseEvent && instance.mouseEvent.mouseout) {
+				instance.mouseEvent.mouseLeave(e);
+			}
+		}
+	}
+
+	mouseEnter(e) {
+		if (this.device.prdType) {
+			this.device.setVisible(true);
+		}
+	}
+
+	mouseLeave(e) {
+		if (this.device.prdType ) {
+			this.device.setVisible(false);
+		}
+	}
+}

src/jmap/shape/TrainWindow/index.js

@@ -1,6 +1,7 @@
 /* 车次窗*/
 import Polygon from 'zrender/src/graphic/shape/Polygon';
 import Group from 'zrender/src/container/Group';
+import EMouse from './EMouse';
 import store from '@/store';
 
 class TrainWindow extends Group {
@@ -14,6 +15,7 @@ class TrainWindow extends Group {
 		this.z = 9;
 		this.prdType = store.state.training.prdType;
 		this.create(model);
+		this.createMouseEvent();
 		this.setState(model);
 	}
 	create(model) {
@@ -22,6 +24,12 @@ class TrainWindow extends Group {
 		}
 	}
 
+	createMouseEvent() {
+		this.mouseEvent = new EMouse(this);
+		this.on('mouseout', (e) => { this.mouseEvent.mouseout(e); });
+		this.on('mouseover', (e) => { this.mouseEvent.mouseover(e); });
+	}
+
 	/** 创建车次窗*/
 	createTrainWindow() {
 		const model = this.model;
@@ -44,9 +52,7 @@ class TrainWindow extends Group {
 				lineWidth: this.style.TrainWindow.lineWidth,
 				stroke: this.style.TrainWindow.lineColor,
 				fill: this.style.transparentColor
-			},
+			}
-			onmouseover: (e) => { this.mouseover(e); },
-			onmouseout: (e) => { this.mouseout(e); }
 		});
 		this.add(this.trainRect);
 	}
@@ -72,38 +78,6 @@ class TrainWindow extends Group {
 	getInstanceByCode(code) {
 		return (store.getters['map/getDeviceByCode'](code) || {}).instance;
 	}
-
-	mouseout(e) {
-		if (this.prdType) {
-			this.setVisible(false);
-			const instance = this.getInstanceByCode(this.model.sectionCode);
-			if (instance && instance.mouseEvent && instance.mouseEvent.mouseout) {
-				instance.mouseEvent.mouseLeave(e);
-			}
-		}
-	}
-
-	mouseover(e) {
-		if (this.prdType) {
-			this.setVisible(true);
-			const instance = this.getInstanceByCode(this.model.sectionCode);
-			if (instance && instance.mouseEvent && instance.mouseEvent.mouseover) {
-				instance.mouseEvent.mouseEnter(e);
-			}
-		}
-	}
-
-	mouseEnter(e) {
-		if (this.prdType) {
-			this.setVisible(true);
-		}
-	}
-
-	mouseLeave(e) {
-		if (this.prdType ) {
-			this.setVisible(false);
-		}
-	}
 }
 
 export default TrainWindow;

src/views/components/filterCity/index.vue

@@ -175,7 +175,6 @@ export default {
 			}
 		},
 		filterSelectChange(filterSelect) {
-			this.$emit('changeFilter', filterSelect);
 			if (this.isCascader) {
 				// 设置二级联动组件
 				localStore.set('cityCode', filterSelect[0]);

src/views/demonstration/deomonList/index.vue

@@ -71,8 +71,6 @@ export default {
 			return true;
 		}
 	},
-	watch: {
-	},
 	methods: {
 		filterNode(value, data) {
 			if (!value) return true;
@@ -99,9 +97,6 @@ export default {
 		doClose() {
 			this.loading = false;
 			this.dialogShow = false;
-		},
-		handleWatch() {
-
 		},
 		async handleJoin() {
 			if (this.group) {

src/views/demonstration/list/demonList.vue

@@ -2,9 +2,8 @@
   <el-card v-loading="loading" class="map-list-main">
     <div slot="header" class="clearfix">
       <span>{{ $t('global.mapList') }}</span>
-      <!-- <div v-if="role" class="back-home" @click="backHome">返回首页</div> -->
     </div>
-    <filter-city ref="filerCity" filter-empty :query-function="queryFunction" @filterSelectChange="refresh" @changeFilter="clearMapSelect" />
+    <filter-city ref="filerCity" filter-empty :query-function="queryFunction" @filterSelectChange="refresh" />
     <el-input v-model="filterText" :placeholder="this.$t('global.filteringKeywords')" clearable />
     <el-scrollbar wrap-class="scrollbar-wrapper" :style="{ height: (height-125) +'px' }">
       <el-tree
@@ -31,8 +30,8 @@
 <script>
 import { getPublishMapTree } from '@/api/management/mapprd';
 import { UrlConfig } from '@/router/index';
-import FilterCity from '@/views/components/filterCity';
 import { getSessionStorage, setSessionStorage, removeSessionStorage } from '@/utils/auth';
+import FilterCity from '@/views/components/filterCity';
 
 export default {
 	name: 'ExamDetailList',
@@ -77,12 +76,9 @@ export default {
 		}
 	},
 	beforeDestroy () {
-		this.clearMapSelect();
+		removeSessionStorage('demonList');
 	},
 	methods: {
-		// backHome() {
-		// 	this.$router.push({ path: `/` });
-		// },
 		filterNode(value, data) {
 			if (!value) return true;
 			return data.name.indexOf(value) !== -1;
@@ -117,6 +113,7 @@ export default {
 				}
 				this.$nextTick(() => {
 					const mapId = getSessionStorage('demonList') || null;
+					console.log(mapId);
 					this.$refs.tree.setCurrentKey(mapId);
 					this.loading = false;
 				});
@@ -124,9 +121,6 @@ export default {
 				this.loading = false;
 				this.$messageBox(this.$t('error.refreshFailed'));
 			}
-		},
-		clearMapSelect() {
-			removeSessionStorage('demonList');
 		}
 	}
 };

src/views/planMonitor/planmanage/planList.vue

@@ -31,6 +31,7 @@
 import FilterCity from '@/views/components/filterCity';
 import { listPublishMap } from '@/api/jmap/map';
 import { queryPermissionScreen } from '@/api/management/author';
+import { getSessionStorage, setSessionStorage, removeSessionStorage } from '@/utils/auth';
 import { UrlConfig } from '@/router/index';
 
 export default {
@@ -72,6 +73,9 @@ export default {
 	created() {
 		this.getScreenLists();
 	},
+	beforeDestroy () {
+		removeSessionStorage('planMonitorList');
+	},
 	methods: {
 		async getScreenLists() {
 			const list = await queryPermissionScreen();
@@ -88,6 +92,7 @@ export default {
 			}
 		},
 		clickEvent(obj) {
+			setSessionStorage('planMonitorList', obj.id);
 			this.$router.push({ path: `${UrlConfig.plan.detail}/${obj.id}` });
 		},
 		refresh(filterSelect) {
@@ -114,7 +119,7 @@ export default {
 					this.$router.push({ path: `${UrlConfig.plan.prefix}/home` });
 				} else {
 					this.$nextTick(() => {
-						const mapId = (this.treeList[0] || { id: 0 }).id;
+						const mapId = getSessionStorage('planMonitorList') || (this.treeList[0] || { id: 0 }).id;
 						this.$router.push({ path: `${UrlConfig.plan.detail}/${mapId}` });
 						this.$refs.tree.setCurrentKey(mapId); // value 绑定的node-key
 					});

src/views/screenMonitor/list/demonList.vue

@@ -1,124 +1,141 @@
 <template>
-    <el-card class="map-list-main" v-loading="loading">
+  <el-card v-loading="loading" class="map-list-main">
-        <div slot="header" class="clearfix">
+    <div slot="header" class="clearfix">
-            <span>{{$t('global.mapList')}}</span>
+      <span>{{ $t('global.mapList') }}</span>
-        </div>
+    </div>
-        <filter-city ref="filerCity" @filterSelectChange="refresh" filterEmpty :queryFunction="queryFunction">
+    <filter-city ref="filerCity" filter-empty :query-function="queryFunction" @filterSelectChange="refresh" />
-        </filter-city>
+    <el-input v-model="filterText" :placeholder="this.$t('global.filteringKeywords')" clearable />
-        <el-input :placeholder="this.$t('global.filteringKeywords')" v-model="filterText" clearable> </el-input>
+    <el-scrollbar wrap-class="scrollbar-wrapper" :style="{ height: (height-125) +'px' }">
-        <el-scrollbar wrapClass="scrollbar-wrapper" :style="{ height: (height-125) +'px' }">
+      <el-tree
-            <el-tree ref="tree" :data="treeList" node-key="id" highlight-current
+        ref="tree"
-                :default-expanded-keys="defaultShowKeys" :props="defaultProps" @node-click="clickEvent"
+        :data="treeList"
-                @node-contextmenu="showContextMenu" :span=22>
+        node-key="id"
-                <span slot-scope="{ node, data }">
+        highlight-current
-                    <span class="el-icon-tickets"
+        :default-expanded-keys="defaultShowKeys"
-                        :style="{color: data.valid ? 'green':''}">&nbsp;{{ node.label }}</span>
+        :props="defaultProps"
-                </span>
+        :span="22"
-            </el-tree>
+        @node-click="clickEvent"
-        </el-scrollbar>
+        @node-contextmenu="showContextMenu"
-    </el-card>
+      >
+        <span slot-scope="{ node:nd, data }">
+          <span
+            class="el-icon-tickets"
+            :style="{color: data.valid ? 'green':''}"
+          >&nbsp;{{ nd.label }}</span>
+        </span>
+      </el-tree>
+    </el-scrollbar>
+  </el-card>
 </template>
 <script>
-    import FilterCity from '@/views/components/filterCity';
+import FilterCity from '@/views/components/filterCity';
-    import { listPublishMap } from '@/api/jmap/map';
+import { listPublishMap } from '@/api/jmap/map';
-    import { queryPermissionScreen } from '@/api/management/author';
+import { queryPermissionScreen } from '@/api/management/author';
-    import { UrlConfig } from '@/router/index';
+import { getSessionStorage, setSessionStorage, removeSessionStorage } from '@/utils/auth';
 
-    export default {
+import { UrlConfig } from '@/router/index';
-        name: 'ExamDetailList',
-        props: {
-            height: {
-                type: Number
-            }
-        },
-        components: {
-            FilterCity
-        },
-        data() {
-            return {
-                loading: true,
-                queryFunction: listPublishMap,
-                defaultShowKeys: [],
-                filterText: '',
-                treeData: [],
-                treeList: [],
-                selected: {},
-                defaultProps: {
-                    children: 'children',
-                    label: 'name'
-                },
-                node: {
-                },
-                screenList: [],
-            }
-        },
-        watch: {
-            filterText(val) {
-                this.treeList = this.treeData.filter((res) => {
-                    return res.name.includes(val)
-                })
-            }
-        },
-        created() {
-            this.getScreenLists();
-        },
-        methods: {
-            async getScreenLists() {
-                let list = await queryPermissionScreen();
-                this.screenList = list.data;
-            },
-            filterNode(value, data) {
-                if (!value) return true;
-                return data.name.indexOf(value) !== -1;
-            },
-            showContextMenu(e, obj, node, vueElem) {
-                if (obj) {
-                    this.node = node;
-                    this.selected = obj;
-                }
-            },
-            clickEvent(obj) {
-                this.$router.push({ path: `${UrlConfig.dp.detail}/${obj.id}` });
-            },
-            refresh(filterSelect) {
-                this.loading = true;
-                this.treeData = this.treeList = [];
-                listPublishMap().then(res => {
-                    (res.data || []).forEach(ele => {
-                        if (ele.cityCode == filterSelect) {
-                            ele.valid = false;
-                            if (this.screenList.length) {
-                                ele.valid = true;
-                            }
-                            this.treeData.push(ele);
-                        }
-                    })
 
-                    this.treeList = this.filterText ?
+export default {
-                        this.treeData.filter((res) => {
+	name: 'ExamDetailList',
-                            return res.name.includes(this.filterText)
+	components: {
-                        })
+		FilterCity
-                        :
+	},
-                        this.treeData;
+	props: {
+		height: {
+			type: Number,
+			required: true
+		}
+	},
+	data() {
+		return {
+			loading: true,
+			queryFunction: listPublishMap,
+			defaultShowKeys: [],
+			filterText: '',
+			treeData: [],
+			treeList: [],
+			selected: {},
+			defaultProps: {
+				children: 'children',
+				label: 'name'
+			},
+			node: {
+			},
+			screenList: []
+		};
+	},
+	watch: {
+		filterText(val) {
+			this.treeList = this.treeData.filter((res) => {
+				return res.name.includes(val);
+			});
+		}
+	},
+	created() {
+		this.getScreenLists();
+	},
+	beforeDestroy () {
+		removeSessionStorage('screenMonitorList');
+	},
+	methods: {
+		async getScreenLists() {
+			const list = await queryPermissionScreen();
+			this.screenList = list.data;
+		},
+		filterNode(value, data) {
+			if (!value) return true;
+			return data.name.indexOf(value) !== -1;
+		},
+		showContextMenu(e, obj, node, vueElem) {
+			if (obj) {
+				this.node = node;
+				this.selected = obj;
+			}
+		},
+		clickEvent(obj) {
+			setSessionStorage('screenMonitorList', obj.id);
+			this.$router.push({ path: `${UrlConfig.dp.detail}/${obj.id}` });
+		},
+		refresh(filterSelect) {
+			this.loading = true;
+			this.treeData = this.treeList = [];
+			listPublishMap().then(res => {
+				(res.data || []).forEach(ele => {
+					if (ele.cityCode == filterSelect) {
+						ele.valid = false;
+						if (this.screenList.length) {
+							ele.valid = true;
+						}
+						this.treeData.push(ele);
+					}
+				});
 
-                    if (this.treeList.length == 0) {
+				this.treeList = this.filterText
-                        this.$router.push({ path: `${UrlConfig.dp.prefix}/home` });
+					? this.treeData.filter((res) => {
-                    } else {
+						return res.name.includes(this.filterText);
-                        this.$nextTick(() => {
+					})
-                            let mapId = (this.treeList[0] || { id: 0 }).id;
+					: this.treeData;
-                            this.$router.push({ path: `${UrlConfig.dp.detail}/${mapId}` });
-                            this.$refs.tree.setCurrentKey(mapId); // value 绑定的node-key
-                        });
-                    }
 
-                    this.$nextTick(() => { this.loading = false; })
+				if (this.treeList.length == 0) {
-                }).catch(error => {
+					this.$router.push({ path: `${UrlConfig.dp.prefix}/home` });
-                    this.loading = false;
+				} else {
-                    this.$messageBox(this.$t('error.refreshFailed'));
+					this.$nextTick(() => {
-                });
+						const mapId = getSessionStorage('screenMonitorList')|| (this.treeList[0] || { id: 0 }).id;
-            }
+						this.$router.push({ path: `${UrlConfig.dp.detail}/${mapId}` });
-        }
+						this.$refs.tree.setCurrentKey(mapId); // value 绑定的node-key
-    }
+					});
+				}
+
+				this.$nextTick(() => {
+					this.loading = false;
+				});
+			}).catch(() => {
+				this.loading = false;
+				this.$messageBox(this.$t('error.refreshFailed'));
+			});
+		}
+	}
+};
 </script>
 <style>
     .el-tree {