封装车次窗鼠标事件以及车次窗操作
This commit is contained in:
ival
parent
c14e0c6055
commit
30e590afc7
@ -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) {
|
||||
instance.mouseEnter(e);
|
||||
if (instance && instance.mouseEvent && instance.mouseEvent.mouseEnter) {
|
||||
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) {
|
||||
instance.mouseLeave(e);
|
||||
if (instance && instance.mouseEvent && instance.mouseEvent.mouseLeave) {
|
||||
instance.mouseEvent.mouseLeave(e);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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) {
|
||||
instance.mouseLeave(e);
|
||||
if (instance && instance.mouseEvent && instance.mouseEvent.mouseLeave) {
|
||||
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) {
|
||||
instance.mouseEnter(e);
|
||||
if (instance && instance.mouseEvent && instance.mouseEvent.mouseEnter) {
|
||||
instance.mouseEvent.mouseEnter(e);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
37
src/jmap/shape/TrainWindow/EMouse.js
Normal file
37
src/jmap/shape/TrainWindow/EMouse.js
Normal file
@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -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;
|
||||
|
||||
@ -175,7 +175,6 @@ export default {
|
||||
}
|
||||
},
|
||||
filterSelectChange(filterSelect) {
|
||||
this.$emit('changeFilter', filterSelect);
|
||||
if (this.isCascader) {
|
||||
// 设置二级联动组件
|
||||
localStore.set('cityCode', filterSelect[0]);
|
||||
|
||||
@ -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) {
|
||||
|
||||
@ -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');
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
@ -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
|
||||
});
|
||||
|
||||
@ -1,124 +1,141 @@
|
||||
<template>
|
||||
<el-card class="map-list-main" v-loading="loading">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>{{$t('global.mapList')}}</span>
|
||||
</div>
|
||||
<filter-city ref="filerCity" @filterSelectChange="refresh" filterEmpty :queryFunction="queryFunction">
|
||||
</filter-city>
|
||||
<el-input :placeholder="this.$t('global.filteringKeywords')" v-model="filterText" clearable> </el-input>
|
||||
<el-scrollbar wrapClass="scrollbar-wrapper" :style="{ height: (height-125) +'px' }">
|
||||
<el-tree ref="tree" :data="treeList" node-key="id" highlight-current
|
||||
:default-expanded-keys="defaultShowKeys" :props="defaultProps" @node-click="clickEvent"
|
||||
@node-contextmenu="showContextMenu" :span=22>
|
||||
<span slot-scope="{ node, data }">
|
||||
<span class="el-icon-tickets"
|
||||
:style="{color: data.valid ? 'green':''}"> {{ node.label }}</span>
|
||||
</span>
|
||||
</el-tree>
|
||||
</el-scrollbar>
|
||||
</el-card>
|
||||
<el-card v-loading="loading" class="map-list-main">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>{{ $t('global.mapList') }}</span>
|
||||
</div>
|
||||
<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
|
||||
ref="tree"
|
||||
:data="treeList"
|
||||
node-key="id"
|
||||
highlight-current
|
||||
:default-expanded-keys="defaultShowKeys"
|
||||
:props="defaultProps"
|
||||
:span="22"
|
||||
@node-click="clickEvent"
|
||||
@node-contextmenu="showContextMenu"
|
||||
>
|
||||
<span slot-scope="{ node:nd, data }">
|
||||
<span
|
||||
class="el-icon-tickets"
|
||||
:style="{color: data.valid ? 'green':''}"
|
||||
> {{ nd.label }}</span>
|
||||
</span>
|
||||
</el-tree>
|
||||
</el-scrollbar>
|
||||
</el-card>
|
||||
</template>
|
||||
<script>
|
||||
import FilterCity from '@/views/components/filterCity';
|
||||
import { listPublishMap } from '@/api/jmap/map';
|
||||
import { queryPermissionScreen } from '@/api/management/author';
|
||||
import { UrlConfig } from '@/router/index';
|
||||
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';
|
||||
|
||||
export default {
|
||||
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);
|
||||
}
|
||||
})
|
||||
import { UrlConfig } from '@/router/index';
|
||||
|
||||
this.treeList = this.filterText ?
|
||||
this.treeData.filter((res) => {
|
||||
return res.name.includes(this.filterText)
|
||||
})
|
||||
:
|
||||
this.treeData;
|
||||
export default {
|
||||
name: 'ExamDetailList',
|
||||
components: {
|
||||
FilterCity
|
||||
},
|
||||
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.$router.push({ path: `${UrlConfig.dp.prefix}/home` });
|
||||
} else {
|
||||
this.$nextTick(() => {
|
||||
let mapId = (this.treeList[0] || { id: 0 }).id;
|
||||
this.$router.push({ path: `${UrlConfig.dp.detail}/${mapId}` });
|
||||
this.$refs.tree.setCurrentKey(mapId); // value 绑定的node-key
|
||||
});
|
||||
}
|
||||
this.treeList = this.filterText
|
||||
? this.treeData.filter((res) => {
|
||||
return res.name.includes(this.filterText);
|
||||
})
|
||||
: this.treeData;
|
||||
|
||||
this.$nextTick(() => { this.loading = false; })
|
||||
}).catch(error => {
|
||||
this.loading = false;
|
||||
this.$messageBox(this.$t('error.refreshFailed'));
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
if (this.treeList.length == 0) {
|
||||
this.$router.push({ path: `${UrlConfig.dp.prefix}/home` });
|
||||
} else {
|
||||
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 {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user