Merge branch 'test' of https://git.code.tencent.com/lian-cbtc/jl-client into test

src/api/chat.js

@@ -96,10 +96,11 @@ export function deljointTrainRoom(group) {
 }
 
 // 查询有权限房间列表
-export function getjointTrainList() {
+export function getjointTrainList(params) {
     return request({
         url: `/api/jointTraining/room/list`,
-        method: 'get'
+        method: 'get',
+        params: params
     });
 }
 

src/api/simulation.js

@@ -461,6 +461,22 @@ export function getEveryDayRunPlanNew(group) {
     });
 }
 
+/** 新版地图按计划行车 */
+export function ranAsPlan(data, group) {
+    return request({
+        url: `/simulation/${group}/ranAsPlan`,
+        method: 'post',
+        data: data
+    });
+}
+/** 新版地图清理仿真 */
+export function clearSimulation(group) {
+    return request({
+        url: `/simulation/${group}/clear`,
+        method: 'delete'
+    });
+}
+
 /** 查询进路信息*/
 export function querySignalStatus(group, params) {
     return request({

src/i18n/langs/en/error.js

@@ -105,5 +105,8 @@ export default {
     checkTheValidityFirst: 'Please check the validity first!',
     permissionAtLeast:'At least one of the number of permissions is more than 0',
     permissionTimeError:'End time must be more than start time',
-    getRealDeviceFailed: 'Failed to get real device failed'
+    getRealDeviceFailed: 'Failed to get real device failed',
+    mapDataError: 'Map data error',
+    runningChartDataError: 'Running chart data error',
+    runningChartIsNotLoaded: 'Running chart is not loaded'
 };

src/i18n/langs/en/router.js

@@ -72,5 +72,7 @@ export default {
     newsBulletin: 'New bulletin',
     commandDictionary: 'Command dictionary',
     configLine: 'Line management',
-    deviceManage: 'Device management'
+    deviceManage: 'Device management',
+    iscsDraw: 'Iscs Draw',
+    iscsSystem: 'Iscs System'
 };

src/i18n/langs/zh/error.js

@@ -105,5 +105,8 @@ export default {
     checkTheValidityFirst: '请先进行有效性检查！',
     permissionAtLeast:'至少有一种权限的数量大于0',
     permissionTimeError:'结束时间必须大于开始时间',
-    getRealDeviceFailed: '获取真实设备失败！'
+    getRealDeviceFailed: '获取真实设备失败！',
+    mapDataError: '地图数据错误',
+    runningChartDataError: '运行图数据错误',
+    runningChartIsNotLoaded: '运行图未加载'
 };

src/i18n/langs/zh/router.js

@@ -73,5 +73,7 @@ export default {
     newsBulletin: '消息公告',
     commandDictionary: '指令字典',
     configLine: '线路管理',
-    deviceManage: '设备管理'
+    deviceManage: '设备管理',
+    iscsDraw: 'Iscs绘制',
+    iscsSystem: 'Iscs系统'
 };

src/iscs/constant/deviceRender.js

@@ -0,0 +1,169 @@
+import deviceType from './deviceType';
+
+const deviceRender = {};
+
+/** CheckBox渲染配置 */
+deviceRender[deviceType.CheckBox] = {
+    _type: deviceType.CheckBox,
+    zlevel: 10,
+    z: 0
+};
+/** 手动报警按钮渲染配置*/
+deviceRender[deviceType.ManualAlarmButton] = {
+    _type: deviceType.ManualAlarmButton,
+    zlevel: 1,
+    z: 4
+};
+/** 消火栓报警按钮渲染配置 */
+deviceRender[deviceType.FireHydranAlarmButton] = {
+    _type: deviceType.FireHydranAlarmButton,
+    zlevel: 1,
+    z: 4
+};
+/** 气体灭火渲染配置 */
+deviceRender[deviceType.GasFireControl] = {
+    _type: deviceType.GasFireControl,
+    zlevel: 1,
+    z: 4
+};
+/** 烟感探测器渲染配置 */
+deviceRender[deviceType.SmokeDetector] = {
+    _type: deviceType.SmokeDetector,
+    zlevel: 1,
+    z: 4
+};
+/** 温度探测器渲染配置 */
+deviceRender[deviceType.TemperatureDetector] = {
+    _type: deviceType.TemperatureDetector,
+    zlevel: 1,
+    z: 4
+};
+/** 屏蔽门渲染配置 */
+deviceRender[deviceType.PlatformScreenDoor] = {
+    _type: deviceType.PlatformScreenDoor,
+    zlevel: 1,
+    z: 4
+};
+
+/** 冷冻泵/冷却泵渲染配置 */
+deviceRender[deviceType.FrozenPump] = {
+    _type: deviceType.FrozenPump,
+    zlevel: 10,
+    z: 0
+};
+
+/** IbpText渲染配置*/
+deviceRender[deviceType.Vidicon] = {
+    _type: deviceType.Vidicon,
+    zlevel: 1,
+    z: 4
+};
+
+/** 排风机渲染配置*/
+deviceRender[deviceType.Ventilator] = {
+    _type: deviceType.Ventilator,
+    zlevel: 1,
+    z: 4
+};
+/** VidiconCloud渲染配置*/
+deviceRender[deviceType.VidiconCloud] = {
+    _type: deviceType.VidiconCloud,
+    zlevel: 1,
+    z: 4
+};
+
+/** 冷水机渲染配置*/
+deviceRender[deviceType.Chiller] = {
+    _type: deviceType.Chiller,
+    zlevel: 1,
+    z: 4
+};
+
+/** 冷却塔渲染配置*/
+deviceRender[deviceType.CoolTower] = {
+    _type: deviceType.CoolTower,
+    zlevel: 1,
+    z: 4
+};
+/** 端头门渲染配置*/
+deviceRender[deviceType.EndDoor] = {
+    _type: deviceType.EndDoor,
+    zlevel: 1,
+    z: 4
+};
+
+/** 圆角边框渲染配置 */
+deviceRender[deviceType.BorderRadius] = {
+    _type: deviceType.BorderRadius,
+    zlevel: 1,
+    z: 4
+};
+
+/** 轨道排风机 */
+deviceRender[deviceType.OrbitalVentilator] = {
+    _type: deviceType.OrbitalVentilator,
+    zlevel: 1,
+    z: 4
+};
+/** 射流风机 */
+deviceRender[deviceType.JetFan] = {
+    _type: deviceType.JetFan,
+    zlevel: 1,
+    z: 4
+};
+/** 隧道风机 */
+deviceRender[deviceType.TunnelFan] = {
+    _type: deviceType.TunnelFan,
+    zlevel: 1,
+    z: 4
+};
+/** 防火阀 */
+deviceRender[deviceType.FireDamper] = {
+    _type: deviceType.FireDamper,
+    zlevel: 1,
+    z: 4
+};
+/** 防烟防火阀 */
+deviceRender[deviceType.SmookProofFd] = {
+    _type: deviceType.SmookProofFd,
+    zlevel: 1,
+    z: 4
+};
+/** 闸机渲染配置 */
+deviceRender[deviceType.BrakeMachine] = {
+    _type: deviceType.BrakeMachine,
+    zlevel: 1,
+    z: 4
+};
+/** 门禁渲染配置 */
+deviceRender[deviceType.EntranceGuard] = {
+    _type: deviceType.EntranceGuard,
+    zlevel: 1,
+    z: 4
+};
+/** 自动售货机渲染配置 */
+deviceRender[deviceType.TicketMachine] = {
+    _type: deviceType.TicketMachine,
+    zlevel: 1,
+    z:4
+};
+/** 半自动售货机渲染配置 */
+deviceRender[deviceType.SemiAutomaticTicketMachine] = {
+    _type: deviceType.SemiAutomaticTicketMachine,
+    zlevel: 1,
+    z: 4
+};
+/** 空调机渲染配置 */
+deviceRender[deviceType.AirConditioner] = {
+    _type: deviceType.AirConditioner,
+    zlevel: 1,
+    z: 4
+};
+/** 风量调节阀 */
+deviceRender[deviceType.VolumeControlDamper] = {
+    _type: deviceType.VolumeControlDamper,
+    zlevel: 1,
+    z: 4
+};
+
+export default deviceRender;

src/iscs/constant/deviceType.js

@@ -0,0 +1,30 @@
+const deviceType = {
+    ManualAlarmButton: 'ManualAlarmButton',
+    Vidicon: 'Vidicon',
+    VidiconCloud: 'VidiconCloud',
+    CheckBox: 'CheckBox',
+    FrozenPump:'FrozenPump',
+    FireHydranAlarmButton: 'FireHydranAlarmButton',
+    GasFireControl: 'GasFireControl',
+    SmokeDetector: 'SmokeDetector',
+    TemperatureDetector: 'TemperatureDetector',
+    PlatformScreenDoor: 'PlatformScreenDoor',
+    Ventilator:'Ventilator',
+    Chiller:'Chiller',
+    CoolTower:'CoolTower',
+    BorderRadius: 'BorderRadius',
+    EndDoor: 'EndDoor',
+    AirConditioner:'AirConditioner',
+    OrbitalVentilator:'OrbitalVentilator',
+    JetFan:'JetFan',
+    TunnelFan:'TunnelFan',
+    FireDamper:'FireDamper',
+    SmookProofFd:'SmookProofFd',
+    BrakeMachine: 'BrakeMachine',
+    EntranceGuard: 'EntranceGuard',
+    SemiAutomaticTicketMachine: 'SemiAutomaticTicketMachine',
+    TicketMachine: 'TicketMachine',
+    VolumeControlDamper: 'VolumeControlDamper'
+};
+
+export default deviceType;

src/iscs/iscs.js

@@ -0,0 +1,302 @@
+import zrender from 'zrender';
+import localStore from 'storejs';
+import Options from './options';
+import MouseController from './mouseController';
+import Painter from './painter';
+import deviceType from './constant/deviceType';
+import {calculateDCenter, createBoundingRect, deviceFactory} from './utils/parser';
+import { updateIscsData } from './utils/parser';
+
+const renderer = 'canvas';
+const devicePixelRatio = 1;
+
+class Iscs {
+    constructor(opts) {
+        this.methods = opts.methods;
+
+        // 鼠标事件
+        this.events = { __Pan: 'pan', Selected: 'selected', Contextmenu: 'contextmenu'};
+
+        // 设备数据
+        this.iscsDevice = {};
+
+        // 展示的画布大小
+        this.canvasSize = {};
+
+        this.initIscsPage(opts);
+    }
+    initIscsPage(opts) {
+        const width = opts.config.width;
+        const height = opts.config.height;
+        this.isAllowDragging = false;
+        this.$iscsZr = zrender.init(opts.dom, Object.assign({ renderer, devicePixelRatio, width, height }, opts.config));
+        this.$options = new Options(Object.assign({ scaleRate: 1, offsetX: 0, offsetY: 0 }, opts.options || {})); // 缩放
+        this.$mouseController = new MouseController(this);
+
+        this.$mouseController.enable();
+
+        this.$painter = new Painter(this);
+        this.$painter.updateZrSize({width: this.$iscsZr.getWidth(), height: this.$iscsZr.getHeight()});
+        this.$painter.updateTransform(this.$options, this.canvasSize);
+
+        this.optionsHandler = this.setOptions.bind(this);
+
+        this.$mouseController.on(this.events.__Pan, this.optionsHandler);
+    }
+
+    setIscs(config, iscsDevice) {
+        // 保存平移缩放数据
+        if (config.config) {
+            this.$options.scaleRate = config.scaling;
+            this.$options.offsetX = config.origin.x;
+            this.$options.offsetY = config.origin.y;
+        }
+
+        // 保存原始数据
+        this.data = config;
+
+        // 保存需展现的画布大小
+        this.canvasSize = {
+            x: 0,
+            y: 0,
+            width: config.width,
+            height: config.height
+        };
+
+        // 地图数据
+        this.iscsDevice = iscsDevice;
+
+        // 数据加载完成 回调
+        if (this.methods.dataLoaded instanceof Function) { this.methods.dataLoaded(this.iscsDevice); }
+
+        // 初次渲染视图
+        this.$painter.repaint(this.iscsDevice);
+
+        // 视图加载完成 回调
+        if (this.methods.viewLoaded instanceof Function) { this.methods.viewLoaded(this.iscsDevice); }
+
+        this.$painter.updateTransform(this.$options, this.canvasSize);
+    }
+
+    setDefaultState() {
+        const list = [];
+        Object.values(this.mapDevice).forEach(elem => {
+            const type = elem.model._type;
+            list.push(deviceFactory(type, Object.assign(elem.model, this.defaultStateDict[type]) ));
+        });
+
+        this.update(list);
+        if (this.methods.stateLoaded instanceof Function) { this.methods.stateLoaded(list); }
+    }
+
+    setOptions(opts) {
+        const options = this.pullBack(opts);
+        this.$options.update(options);
+        this.$painter.updateTransform(this.$options, this.canvasSize);
+
+        if (this.$options.disabled == true) {
+            this.$mouseController.disable();
+        } else {
+            this.$mouseController.enable(opts);
+        }
+
+        if (this.methods.optionsUpdate instanceof Function) { this.methods.optionsUpdate(this.$options); }
+    }
+
+    setCenter(deviceCode) {
+        const device = this.iscsDevice[deviceCode];
+        if (device && device.instance) {
+            var rect = createBoundingRect(device.instance);
+            var dcenter = calculateDCenter(rect, { width: this.$iscsZr.getWidth(), height: this.$iscsZr.getHeight() });
+            this.setOptions(dcenter);
+        }
+    }
+
+    setLevelVisible(list) {
+        this.$painter.setLevelVisible(list);
+    }
+
+    render(list) {
+        (list || []).forEach(elem => {
+            const code = elem.code;
+            const type = elem._type;
+            updateIscsData(elem);
+            const oDevice = this.iscsDevice[code] || deviceFactory(type, elem);
+            const nDevice = deviceFactory(type, Object.assign(oDevice.model || {}, elem));
+            delete this.iscsDevice[code];
+            this.$painter.delete(oDevice);
+            if (!elem._dispose) {
+                this.iscsDevice[code] = nDevice;
+                this.$painter.add(nDevice);
+            }
+        });
+        if (this.methods.viewUpdate instanceof Function) { this.methods.viewUpdate(list); }
+    }
+
+    // 中间处理
+    hookHandle(model, elem) {
+        const code = elem.code;
+        const type = elem._type;
+        // 如果是延时计时，需要保存计数值到全局
+        if (type === deviceType.StationCounter) {
+            let val = '' + elem.val;
+            if (val === '0' || !elem.val) {
+                val = elem.val = localStore.get(code) || '0';
+            }
+
+            localStore(code, val);
+        }
+        for (var prop in elem) {
+            if (elem[prop] != model[prop]) {
+                Object.assign(model, elem);
+                return true;
+            }
+        }
+
+        return false;
+    }
+
+    update(list) {
+        (list || []).forEach(elem => {
+            const code = elem.code;
+            const oDevice = this.iscsDevice[code];
+            if (elem.dispose) {
+                this.$painter.delete(oDevice);
+            } else {
+                if (this.hookHandle(oDevice.model, elem)) {
+                    this.$painter.update(oDevice);
+                }
+            }
+        });
+
+        if (this.methods.stateUpdate instanceof Function) { this.methods.stateUpdate(list); }
+    }
+    setStatus(code, model) {
+        const oDevcie = this.iscsDevice[code].instance;
+        oDevcie.setStatus(model);
+    }
+    setDeviceStatus(list) {
+        const deviceList = Object.values(this.iscsDevice);
+        deviceList.forEach(elem =>{
+            (list || []).forEach(it =>{
+                if (elem.model.linkDevice === it.code) {
+                    elem.instance.setStatus(it);
+                }
+            });
+        });
+
+    }
+    drawIscsInit() {
+        this.$mouseController.setAllowDragging(true);
+    }
+
+    pullBack(payload) {
+        if (payload.type === 'zoom') {
+            const zrWidth = this.$iscsZr.getWidth();
+            const zrHeight = this.$iscsZr.getHeight();
+            const originX = payload.originX || zrWidth / 2;
+            const originY = payload.originY || zrHeight / 2;
+            const x = (this.$options.offsetX + originX) / this.$options.scaleRate;
+            const y = (this.$options.offsetY + originY) / this.$options.scaleRate;
+            const newScaleRate = this.$options.getScaleRate(payload.scale);
+            const dx = originX - (x * newScaleRate - this.$options.offsetX);
+            const dy = originY - (y * newScaleRate - this.$options.offsetY);
+            payload.dx = dx;
+            payload.dy = dy;
+        }
+
+        return payload || {};
+    }
+
+    getZr() {
+        return this.$iscsZr;
+    }
+
+    getEvents() {
+        return this.events;
+    }
+
+    getDeviceByCode(code) {
+        return this.iscsDevice[code];
+    }
+
+    resize(opt) {
+        this.$iscsZr.resize(opt);
+        this.$painter.updateZrSize(opt);
+    }
+
+    refresh() {
+        this.$painter.refresh();
+    }
+    clear() {
+        this.skinCode = '';
+        this.style = {};
+        this.iscsDevice = {};
+        this.$painter.clear();
+    }
+    dispose() {
+        this.off(this.events.Pan, this.optionsHandler);
+        this.off(this.events.Zoom, this.optionsHandler);
+
+        this.clear();
+
+        this.$mouseController.dispose();
+        this.$iscsZr && zrender.dispose(this.$iscsZr);
+        this.$painter.dispose();
+    }
+
+    on(eventname, cb, context) {
+        const idx = Object.values(this.events).indexOf(eventname);
+        if (idx >= 0) {
+            switch (eventname) {
+            case this.events.Selected:
+                this.$mouseController.on(this.events.Selected, cb, context);
+                break;
+            case this.events.Contextmenu:
+                this.$mouseController.on(this.events.Contextmenu, cb, context);
+                break;
+            case this.events.DataZoom:
+                this.$mouseController.on(this.events.DataZoom, cb, context);
+                break;
+            }
+        }
+    }
+
+    off(eventname, cb) {
+        const idx = Object.values(this.events).indexOf(eventname);
+        if (idx >= 0) {
+            switch (eventname) {
+            case this.events.Selected:
+                this.$mouseController.off(this.events.Selected, cb);
+                break;
+            case this.events.Contextmenu:
+                this.$mouseController.off(this.events.Contextmenu, cb);
+                break;
+            case this.events.DataZoom:
+                this.$mouseController.off(this.events.DataZoom, cb);
+                break;
+            }
+        }
+    }
+
+    renderCheckBox(model) {
+        const type = model._type;
+        const code = model.code;
+        const oDevice = this.iscsDevice[code] || deviceFactory(type, model);
+        const nDevice = deviceFactory(type, Object.assign(oDevice.model || {}, model));
+        delete this.iscsDevice[code];
+        this.$painter.delete(oDevice);
+        if (!model._dispose) {
+            this.iscsDevice[code] = nDevice;
+            this.$painter.add(nDevice);
+        }
+    }
+    deleteCheckBox(code) {
+        const oDevice = this.iscsDevice[code];
+        if (oDevice) {
+            delete this.iscsDevice[code];
+            this.$painter.delete(oDevice);
+        }
+    }
+}
+export default Iscs;

src/iscs/mouseController.js

@@ -0,0 +1,285 @@
+import deviceType from './constant/deviceType';
+import Eventful from 'zrender/src/mixin/Eventful';
+import * as eventTool from 'zrender/src/core/event';
+import store from '@/store';
+
+class EventModel {
+    constructor(e) {
+        this.clientX = e.event.clientX;
+        this.clientY = e.event.clientY;
+
+        let view = e.target;
+        while (view) {
+            if (Object.values(deviceType).includes(view._type)) {
+                this.deviceCode = view._code;
+                this.deviceType = view._type;
+                this.deviceModel = view.model;
+                this.eventTarget = view;
+                break;
+            }
+            view = view.parent;
+        }
+    }
+}
+
+class MouseController extends Eventful {
+    constructor(iscs) {
+        super();
+        this.$iscs = iscs;
+        this.$zr = iscs.getZr();
+        this.isAllowDragging = iscs.isAllowDragging || false; // 是否在绘图中，仅绘图状态下可拖拽
+        this.events = iscs.getEvents();
+        this._dragging = false; // 是否在拖拽状态
+        this.deviceList = [];
+        this.rightClickPoint = {
+            x: 0,
+            y: 0
+        }; // 右键点击坐标
+        this.initHandler(this.$zr);
+    }
+
+    initHandler(zr) {
+        if (zr) {
+            zr.on('contextmenu', this.contextmenu, this);
+            zr.on('mousemove', this.moveEvent, this);
+            zr.on('click', this.click, this);
+
+            this.enable = function (opts) {
+                opts = opts || {};
+                this._moveOnMouseMove = opts.moveOnMouseMove || true;
+                this._preventDefaultMouseMove = opts.preventDefaultMouseMove || true;
+
+                this.disable();
+
+                zr.on('mousedown', this.mousedown, this);
+                zr.on('mousemove', this.mousemove, this);
+                zr.on('mouseup', this.mouseup, this);
+                zr.on('touchstart', this.mousedown, this);
+                zr.on('touchmove', this.mousemove, this);
+                zr.on('touchend', this.mouseup, this);
+            };
+
+            this.disable = function () {
+                zr.off('mousedown', this.mousedown);
+                zr.off('mousemove', this.mousemove);
+                zr.off('mouseup', this.mouseup);
+                zr.off('touchstart', this.mousedown);
+                zr.off('touchmove', this.mousemove);
+                zr.off('touchend', this.mouseup);
+            };
+
+            this.dispose = function () {
+                zr.off('click', this.click);
+                zr.off('contextmenu', this.contextmenu);
+                zr.off('mousemove', this.moveEvent);
+                this.disable();
+            };
+
+            this.isDragging = function () { return this._dragging; };
+        }
+    }
+
+    setAllowDragging(data) {
+        this.isAllowDragging = data;
+    }
+
+    mousedown(e) {
+        e.event.preventDefault();
+        e.event.stopPropagation();
+        const em = new EventModel(e);
+        this.eventTarget = em.eventTarget;
+        this._offsetX = e.offsetX;
+        this._offsetY = e.offsetY;
+        this._x = e.offsetX;
+        this._y = e.offsetY;
+        this._dragging = true;
+        if (e.which === 3) {
+            this.handleMouseDownRight(e);
+        } else if (e.which === 1) {
+            this.handleMouseDownLeft(e);
+        } else if (e.which === 2) {
+            this.handleMouseDownWheel(e);
+        }
+    }
+
+    mousemove(e) {
+        const oldX = this._x;
+        const oldY = this._y;
+
+        const dx = e.offsetX - oldX;
+        const dy = e.offsetY - oldY;
+
+        this._x = e.offsetX;
+        this._y = e.offsetY;
+        if (e.which === 3) {
+            this.handleMouseMoveRight({x: e.offsetX, y: e.offsetY});
+        } else if (e.which === 1) {
+            this.handleMouseMoveLeft(e, dx, dy, oldX, oldY);
+        }
+    }
+
+    mouseup(e) {
+        if (eventTool.notLeftMouse(e) || !this.eventTarget ) {
+            return;
+        }
+        if (this.deviceList.length) {
+            this.deviceList.forEach(item => {
+                item.setModel(e.offsetX - this._offsetX, e.offsetY - this._offsetY);
+            });
+            this.deviceList = [];
+            this.$iscs.deleteCheckBox('check_box');
+            this.eventTarget = '';
+            this._dragging = false;
+            this.deviceList = [];
+            return;
+        }
+        if (this.isAllowDragging) {
+            this.eventTarget.setModel(e.offsetX - this._offsetX, e.offsetY - this._offsetY);
+            this.eventTarget.dirty();
+        }
+        if (this.eventTarget._type === deviceType.Background) {
+            this.eventTarget.setCursor('default');
+        }
+        this.eventTarget = '';
+        this._dragging = false;
+        this.deviceList = [];
+    }
+
+    contextmenu(e) {
+        var em = this.checkEvent(e);
+        this.trigger(this.events.Contextmenu, em);
+    }
+    click(e) {
+        var em = this.checkEvent(e);
+        this.trigger(this.events.Selected, em);
+    }
+    moveEvent(e) {
+        const newEm = new EventModel(e);
+        const trainDetails = store.state.map.trainDetails;
+        if (trainDetails) {
+            if (newEm.deviceType != deviceType.Train || trainDetails.code != newEm.deviceCode) {
+                var instance = (this.$iscs.getDeviceByCode(trainDetails.code) || {} ).instance;
+                instance && instance.removeTrainDetail && instance.removeTrainDetail();
+            }
+        }
+    }
+
+    checkEvent(e) {
+        var oldEm = new EventModel(this.$zr.curEvent || { event: {} });
+        var newEm = new EventModel(e);
+        if ([1, 3].includes(e.which)) {
+            // 查找之前和当前鼠标选中的实例
+            var oldDevice = this.$iscs.getDeviceByCode(oldEm.deviceCode) || {};
+            var newDevice = this.$iscs.getDeviceByCode(newEm.deviceCode) || {};
+            var oldInstance = (this.$iscs.getDeviceByCode(oldEm.deviceCode) || {}).instance || {};
+            var newInstance = (this.$iscs.getDeviceByCode(newEm.deviceCode) || {}).instance || {};
+
+            // 如果之前和当前选中的实例不一致
+            if (oldInstance != newInstance) {
+                // 如果实例有取消选择函数并且被点击，则执行取消选中函数
+                if (oldInstance.mouseEvent && oldInstance.mouseEvent.mouseout) {
+                    // 视图数据设置点击标志，同步执行
+                    oldDevice['down'] = false;
+                    oldInstance.mouseEvent['mouseout'](e);
+                }
+
+                // 如果实例有选中函数并且被点击，则执行选中函数
+                if (e.which == 3 && newInstance.mouseEvent && newInstance.mouseEvent.mouseover) {
+                    newDevice['down'] = true;
+                    newInstance.mouseEvent['mouseover'](e);
+                }
+            }
+
+            // 保存当前实例到全局
+            this.$zr.curEvent = e;
+        }
+
+        return newEm;
+    }
+    /** 处理鼠标右键按下事件 */
+    handleMouseDownRight(e) {
+        this.rightClickPoint.x = e.offsetX;
+        this.rightClickPoint.y = e.offsetY;
+    }
+    /** 处理鼠标左键按下事件 */
+    handleMouseDownLeft(e) {
+        if (this.eventTarget && this.eventTarget._type === deviceType.Background) {
+            this.eventTarget.setCursor('pointer');
+            this.$iscs.deleteCheckBox('check_box');
+        } else if (this.eventTarget && this.eventTarget._type === deviceType.CheckBox) {
+            this.handleBoundingRect(this.eventTarget);
+        } else {
+            this.$iscs.deleteCheckBox('check_box');
+        }
+    }
+    /** 处理滚轮按下事件 */
+    handleMouseDownWheel(e) {
+        this.deviceList = [];
+        Object.values(this.$iscs.iscsDevice).forEach(item => {
+            if (item.instance._type !== deviceType.Background) {
+                this.deviceList.push(item.instance);
+            }
+        });
+    }
+    /** 处理右键拖动事件--- 改变选中区域大小 */
+    handleMouseMoveRight(point2) {
+        const point1 = this.rightClickPoint;
+        const x = Math.min(point1.x, point2.x) + this.$iscs.$options.offsetX;
+        const y = Math.min(point1.y, point2.y) + this.$iscs.$options.offsetY;
+        const width = Math.abs(point1.x - point2.x);
+        const height = Math.abs(point1.y - point2.y);
+        this.$iscs.renderCheckBox({code: 'check_box', _type: 'CheckBox', point: {x: x, y: y}, width: width, height: height });
+    }
+    /** 处理左键拖动事件--- 图形移动 */
+    handleMouseMoveLeft(e, dx, dy, oldX, oldY) {
+        if (!this._moveOnMouseMove || !this._dragging || !this.isAllowDragging) {
+            return;
+        }
+        // 选中区域图形移动
+        if (this.deviceList.length) {
+            this.deviceList.forEach(item => {
+                item.grouper.drift(dx, dy, e);
+            });
+        } else if (this._dragging && this.eventTarget) { // 选中元素图形移动
+            if (( this.eventTarget._type === deviceType.Background) || !this.isAllowDragging) {
+                this._preventDefaultMouseMove && eventTool.stop(e.event);
+                this.trigger(this.events.__Pan, { dx, dy, oldX, oldY, newX: this._x, newY: this._y });
+            } else if (this.isAllowDragging) {
+                this.eventTarget.grouper.drift(dx, dy, e);
+            }
+        }
+    }
+    /** 通过包围盒筛选选中区域的元素 */
+    handleBoundingRect(eventTarget) {
+        this.deviceList = [];
+        let boundingRect = eventTarget.grouper.getBoundingRect();
+        boundingRect = this.createFakeBoundingRect(eventTarget, boundingRect);
+        const deviceList = Object.values(this.$iscs.iscsDevice);
+        const includeDeviceList = [];
+        deviceList.forEach( item =>{
+            if (item.instance._type !== deviceType.Background) {
+                let deviceBoundingRect = item.instance.grouper.getBoundingRect();
+                deviceBoundingRect = this.createFakeBoundingRect(item.instance, deviceBoundingRect);
+                if (this.whetherInclude(boundingRect, deviceBoundingRect )) {
+                    includeDeviceList.push(item.instance);
+                }
+            }
+        });
+        this.deviceList = includeDeviceList;
+    }
+    /** 创建假包围盒对象 */
+    createFakeBoundingRect(instance, boundingRect) {
+        return {
+            x1: instance.model.point.x + boundingRect.x,
+            y1: instance.model.point.y + boundingRect.y,
+            x2: instance.model.point.x + boundingRect.width,
+            y2: instance.model.point.y + boundingRect.height
+        };
+    }
+    /** 判断元素包围盒是否在选中区域 */
+    whetherInclude(boundingRect1, boundingRect2) {
+        return boundingRect1.x1 <= boundingRect2.x1 && boundingRect1.y1 <= boundingRect2.y1 && boundingRect1.x2 >= boundingRect2.x2 && boundingRect1.y2 >= boundingRect2.y2;
+    }
+}
+
+export default MouseController;

src/iscs/options.js

@@ -0,0 +1,100 @@
+class Options {
+    constructor(opts, trigger) {
+        this.scaleIndex = 0;
+        this.scaleList = [
+            0.5, 0.6, 0.7, 0.8, 0.9,
+            1, 1.2, 1.4, 1.6, 1.8,
+            2, 2.2, 2.4, 2.6, 2.8,
+            3, 3.2, 3.4, 3.6, 3.8,
+            4, 4.2, 4.4, 4.6, 4.8,
+            5, 5.2, 5.4, 5.6, 5.8,
+            6, 6.2, 6.4, 6.6, 6.8,
+            7, 7.2, 7.4, 7.6, 7.8,
+            8, 8.2, 8.4, 8.6, 8.8
+        ];
+
+        if (Number.isFinite(opts.scaleRate)) {
+            const idx = this.scaleList.indexOf(opts.scaleRate);
+            if (idx >= 0) {
+                this.scaleIndex = idx;
+            }
+        }
+
+        this.scaleRate = opts.scaleRate || this.scaleList[this.scaleIndex]; // 缩放比例
+
+        this.offsetX = opts.offsetX || 0; // x偏移
+
+        this.offsetY = opts.offsetY || 0; // y偏移
+
+        this.throttle = opts.throttle || 100; // 刷新频率
+
+        this.disabled = false;
+
+        this.moveOnMouseMove = true;
+
+        this.zoomOnMouseWheel = false;
+
+        this.preventDefaultMouseMove = true;
+
+        this.trigger = trigger;
+    }
+
+    update(payload) {
+        if (Number.isFinite(payload.dx)) {
+            this.offsetX -= payload.dx;
+        }
+        if (Number.isFinite(payload.dy)) {
+            this.offsetY -= payload.dy;
+        }
+
+        if (Number.isFinite(payload.offsetX)) {
+            this.offsetX = payload.offsetX;
+        }
+        if (Number.isFinite(payload.offsetY)) {
+            this.offsetY = payload.offsetY;
+        }
+
+        if (Number.isFinite(payload.scale)) {
+            if (Number.isFinite(payload.scale)) {
+                if ((this.scaleIndex + payload.scale) >= 0 && (this.scaleIndex + payload.scale) < this.scaleList.length) {
+                    this.scaleIndex = this.scaleIndex + payload.scale;
+                }
+            }
+            this.scaleRate = this.scaleList[this.scaleIndex];
+        }
+
+        if (Number.isFinite(payload.scaleRate)) {
+            const idx = this.scaleList.indexOf(payload.scaleRate);
+            if (idx < 0) {
+                return;
+            }
+            this.scaleIndex = idx;
+            this.scaleRate = payload.scaleRate;
+        }
+
+        if (payload.disabled === true || payload.disabled === false) {
+            this.disabled = payload.disabled;
+        }
+
+        if (payload.moveOnMouseMove === true || payload.moveOnMouseMove === false) {
+            this.moveOnMouseMove = payload.moveOnMouseMove;
+        }
+
+        if (payload.zoomOnMouseWheel === true || payload.zoomOnMouseWheel === false) {
+            this.zoomOnMouseWheel = payload.zoomOnMouseWheel;
+        }
+
+        if (this.trigger instanceof Function) { this.trigger(this); }
+    }
+
+    getScaleRate(scale) {
+        if (Number.isFinite(scale)) {
+            if ((this.scaleIndex + scale) >= 0 && (this.scaleIndex + scale) < this.scaleList.length) {
+                return this.scaleList[this.scaleIndex + scale];
+            }
+        }
+        return this.scaleList[this.scaleIndex];
+    }
+}
+
+export default Options;

src/iscs/painter.js

@@ -0,0 +1,179 @@
+import * as zrUtil from 'zrender/src/core/util';
+// import * as vector from 'zrender/src/core/vector';
+import Group from 'zrender/src/container/Group';
+import deviceType from './constant/deviceType';
+import shapefactory from './shape/factory';
+import TransformHandle from './transformHandle';
+
+class Painter {
+    constructor(iscs) {
+        // 父级实例
+        this.$iscs = iscs;
+        this.$iscsZr = iscs.getZr();
+
+        // 图层数据
+        this.iscsInstanceLevel = {};
+
+        // 初始图层
+        this.initLevels();
+
+        // 视图控制器
+        this.$transformHandle = new TransformHandle(this);
+    }
+
+    /**
+     * 初始绘图实例
+     * @param {*} dom
+     * @param {*} config
+     */
+    initLevels() {
+
+        // 添加父级图层
+        this.parentLevel = new Group({ name: '__parent__' });
+        this.$iscsZr.add(this.parentLevel);
+
+        // 添加子级图层
+        zrUtil.each(Object.values(deviceType), (type) => {
+            const level = new Group({ name: `__${type}__` });
+            this.iscsInstanceLevel[type] = level;
+            this.parentLevel.add(level);
+        });
+    }
+
+    /**
+     * 重绘视图
+     * @param {*} iscsDevice
+     */
+    repaint(iscsDevice) {
+        // 清空视图
+        this.clear();
+
+        // 创建视图
+        Object.values(iscsDevice).forEach(device => {
+            this.add(device);
+        });
+    }
+
+    /**
+     * 添加视图
+     * @param {*} device
+     */
+    add(device) {
+        try {
+            device = Object.assign(device, { event: this.$iscs.$mouseController });
+            const instance = shapefactory(device, this.$iscs);
+            if (instance) {
+                device.instance = instance;
+                this.$transformHandle.transformView(instance);
+                this.iscsInstanceLevel[device.model._type].add(instance);
+            }
+        } catch (error) {
+            console.error(error);
+        }
+    }
+
+    /**
+     * 删除视图
+     * @param {*} device
+     */
+    delete(device) {
+        const instance = device.instance;
+        if (instance) {
+            this.iscsInstanceLevel[device.model._type].remove(instance);
+        }
+    }
+
+    /**
+     * 更新视图
+     * @param {*} device
+     */
+    update(device) {
+        if (device) {
+            if (device.model._dispose) {
+                this.delete(device);
+            } else {
+                const instance = device.instance;
+                if (instance) {
+                    instance.setState(device);
+                }
+            }
+        }
+    }
+
+    /**
+     * 更新transform变化
+     * @param {*} opt
+     */
+    updateTransform(opt, canvasSize) {
+        this.$transformHandle.updateTransform(opt, canvasSize);
+    }
+
+    /**
+     * 更新zrender尺寸
+     * @param {*} opt
+     */
+    updateZrSize(opt) {
+        this.$transformHandle.updateZrSize(opt);
+    }
+
+    /**
+     * 设置图层可见
+     * @param {*} code
+     */
+    setLevelVisible(list) {
+        zrUtil.each(Object.values(deviceType), type => {
+            const level = this.iscsInstanceLevel[type];
+            if (list.includes(type)) {
+                level.show();
+            } else {
+                level.hide();
+            }
+        }, this);
+    }
+
+    /**
+     * 刷新图层
+     */
+    refresh() {
+        this.$iscsZr.refresh();
+    }
+
+    /**
+     * 清除图层
+     */
+    clearLevel(type) {
+        const level = this.iscsInstanceLevel[type];
+        if (level) {
+            level.removeAll();
+        }
+    }
+
+    /**
+     * 清除canvas
+     */
+    clear() {
+        zrUtil.each(Object.values(this.iscsInstanceLevel), (level) => {
+            level && level.removeAll();
+        }, this);
+
+        this.refresh();
+    }
+
+    /**
+     * 销毁图层
+     */
+    dispose() {
+        this.iscsInstanceLevel = {};
+        this.parentLevel = null;
+    }
+
+    /**
+     * 父级图层
+     */
+    getParentLevel() {
+        return this.parentLevel;
+    }
+
+}
+
+export default Painter;

src/iscs/shape/Vidicon.js

@@ -0,0 +1,87 @@
+import Group from 'zrender/src/container/Group';
+import Rect from 'zrender/src/graphic/shape/Rect';
+import Polyline from 'zrender/src/graphic/shape/Polyline';
+
+export default class Vidicon extends Group {
+    constructor(device) {
+        super();
+        this.model = device.model;
+        this._type = device.model._type;
+        this._code = device.model.code;
+        this.zlevel = device.model.zlevel;
+        this.z = device.model.zlevel;
+        this.create();
+    }
+    create() {
+        console.log(this.model);
+        this.grouper = new Group({
+            id: this.model.code,
+            position: [this.model.point.x, this.model.point.y]
+        });
+        const vidiconHeight = this.model.width / 2.5;
+        this.rect = new Rect({
+            zlevel: this.model.zlevel,
+            z: this.model.z,
+            shape: {
+                x: this.model.point.x,
+                y: this.model.point.y,
+                width: this.model.width,
+                height: vidiconHeight,
+                r:  [1, 1, 1, 1]
+            },
+            style: {
+                fill: '#00FF00'
+            }
+        });
+        const shotWidth = this.model.width / 5; // 镜头宽度
+        const shotHeight = vidiconHeight / 2; // 镜头高度
+        if (this.model.right) { // 镜头在右
+            this.PolylineRight = new Polyline({
+                zlevel: this.model.zlevel,
+                z: this.model.z + 1,
+                shape: {
+                    points: [
+                        [this.model.point.x + this.model.width, this.model.point.y + 3],
+                        [this.model.point.x + this.model.width + shotWidth, this.model.point.y],
+                        [this.model.point.x + this.model.width + shotWidth, this.model.point.y + 6 + shotHeight],
+                        [this.model.point.x + this.model.width, this.model.point.y + 3 + shotHeight]
+                    ],
+                    smooth: 0.2
+                },
+                style: {
+                    fill: '#00FF00'
+                }
+            });
+        } else { // 镜头在左
+            this.PolylineLeft = new Polyline({
+                zlevel: this.model.zlevel,
+                z: this.model.z + 1,
+                shape: {
+                    points: [
+                        [this.model.point.x, this.model.point.y + vidiconHeight - 3],
+                        [this.model.point.x - shotWidth, this.model.point.y + vidiconHeight],
+                        [this.model.point.x - shotWidth, this.model.point.y + vidiconHeight - 6 - shotHeight],
+                        [this.model.point.x, this.model.point.y + vidiconHeight - 3 - shotHeight]
+                    ],
+                    smooth: 0.2
+                },
+                style: {
+                    fill: '#00FF00'
+                }
+            });
+        }
+
+        this.grouper.add(this.rect);
+        if (this.model.right) {
+            this.grouper.add(this.PolylineRight);
+        } else {
+            this.grouper.add(this.PolylineLeft);
+        }
+        this.add(this.grouper);
+    }
+
+    setModel(dx, dy) {
+        this.model.point.x += dx;
+        this.model.point.y += dy;
+    }
+}

src/iscs/shape/VidiconCloud.js

@@ -0,0 +1,68 @@
+import Group from 'zrender/src/container/Group';
+import Sector from 'zrender/src/graphic/shape/Sector';
+import Polyline from 'zrender/src/graphic/shape/Polyline';
+// import createPathSvg from './components/pathsvg';
+
+export default class VidiconCloud extends Group {
+    constructor(device) {
+        super();
+        this.model = device.model;
+        this._type = device.model._type;
+        this._code = device.model.code;
+        this.zlevel = device.model.zlevel;
+        this.z = device.model.zlevel;
+        this.create();
+    }
+    create() {
+        this.grouper = new Group({
+            id: this.model.code,
+            position: [this.model.point.x, this.model.point.y]
+        });
+        this.semicircle = new Sector({
+            zlevel: this.model.zlevel,
+            z: this.model.z,
+            shape: {
+                cx: this.model.point.x,
+                cy: this.model.point.y,
+                r: this.model.r || 30,
+                startAngle: 0,
+                endAngle: Math.PI,
+                clockwise: true
+            },
+            style: {
+                stroke: '#00FF00',
+                lineWidth: 2,
+                fill: 'rgba(0,0,0,0)'
+            }
+        });
+        // this.path = createPathSvg(this.model);
+
+        this.Polyline = new Polyline({
+            zlevel: this.model.zlevel,
+            z: this.model.z + 1,
+            shape: {
+                points: [
+                    [this.model.point.x + this.model.r / 2, this.model.point.y],
+                    [this.model.point.x - Math.cos(45 * (Math.PI / 180)) * this.model.r, this.model.point.y + Math.sin(45 * (Math.PI / 180)) * this.model.r],
+                    [this.model.point.x - Math.cos(55 * (Math.PI / 180)) * this.model.r, this.model.point.y + Math.sin(55 * (Math.PI / 180)) * this.model.r],
+                    [this.model.point.x + this.model.r / 1.2, this.model.point.y]
+                ]
+            },
+            style: {
+                stroke: '#00FF00',
+                lineWidth: 2,
+                fill: '#00FF00'
+            }
+        });
+
+        this.grouper.add(this.semicircle);
+        this.grouper.add(this.Polyline);
+        // this.grouper.add(this.path);
+        this.add(this.grouper);
+    }
+
+    setModel(dx, dy) {
+        this.model.point.x += dx;
+        this.model.point.y += dy;
+    }
+}

src/iscs/shape/airConditioner.js

@@ -0,0 +1,27 @@
+import Group from 'zrender/src/container/Group';
+import createPathSvg from './components/pathsvg';
+
+export default class AirConditioner extends Group {
+    constructor(device) {
+        super();
+        this.model = device.model;
+        this.zlevel = device.model.zlevel;
+        this.z = device.model.z;
+        this._type = device.model._type;
+        this.code = device.model.code;
+        this.create();
+    }
+    create() {
+        this.grouper = new Group({
+            id: this.model.code,
+            position: [this.model.point.x, this.model.point.y]
+        });
+        this.path = createPathSvg(this.model);
+        this.add(this.grouper);
+        this.grouper.add(this.path);
+    }
+    setModel(dx, dy) {
+        this.model.point.x += dx;
+        this.model.point.y += dy;
+    }
+}

src/iscs/shape/bas/chiller.js

@@ -0,0 +1,146 @@
+import Group from 'zrender/src/container/Group';
+import Circle from 'zrender/src/graphic/shape/Circle';
+import Polygon from 'zrender/src/graphic/shape/Polygon';
+import Polyline from 'zrender/src/graphic/shape/Polyline';
+export default class chiller extends Group {
+    constructor(device) {
+        super();
+        this.model = device.model;
+        this._type = device.model._type;
+        this._code = device.model.code;
+        this.zlevel = device.model.zlevel;
+        this.z = device.model.zlevel;
+        this.create();
+    }
+    create() {
+        this.grouper = new Group({
+            id: this.model.code,
+            position: [this.model.point.x, this.model.point.y]
+        });
+        this.rect = new Polygon({
+            zlevel: this.model.zlevel,
+            z: this.model.z,
+            shape:{
+                points:[
+                    [0, 0],
+                    [this.model.width, 0],
+                    [this.model.width, this.model.width * 0.6],
+                    [0, this.model.width * 0.6],
+                    [0, 0]
+                ]
+            },
+            style: {
+                stroke:this.model.color,
+                lineWidth:2
+            }
+        });
+        this.circle1 = new Circle({
+            zlevel: this.model.zlevel,
+            z: this.model.z,
+            shape: {
+                cx: this.model.width * 0.29,
+                cy: this.model.width * 0.18,
+                r: this.model.width * 0.1
+            },
+            style: {
+                fill: this.model.color
+            }
+        });
+        this.circle2 = new Circle({
+            zlevel: this.model.zlevel,
+            z: this.model.z,
+            shape: {
+                cx: this.model.width * 0.68,
+                cy: this.model.width * 0.18,
+                r: this.model.width * 0.1
+            },
+            style: {
+                fill: this.model.color
+            }
+        });
+
+        this.polyline1 = new Polyline({
+            zlevel: this.model.zlevel,
+            z: this.model.z,
+            shape:{
+                points:[
+                    [this.model.width * 0.37, this.model.width * 0.33],
+                    [this.model.width * 0.21, this.model.width * 0.33],
+                    [this.model.width * 0.29, this.model.width * 0.20],
+                    [this.model.width * 0.37, this.model.width * 0.33],
+                    [this.model.width * 0.60, this.model.width * 0.33],
+                    [this.model.width * 0.68, this.model.width * 0.20],
+                    [this.model.width * 0.76, this.model.width * 0.33],
+                    [this.model.width * 0.60, this.model.width * 0.33],
+                    [this.model.width * 0.97, this.model.width * 0.33],
+                    [this.model.width * 0.97, this.model.width * 0.38],
+                    [this.model.width * 0.01, this.model.width * 0.38],
+                    [this.model.width * 0.01, this.model.width * 0.33],
+                    [this.model.width * 0.21, this.model.width * 0.33]
+                ]
+            },
+            style: {
+                stroke:this.model.color,
+                lineWidth:2
+            }
+        });
+
+        this.polyline2 = new Polyline({
+            zlevel: this.model.zlevel,
+            z: this.model.z,
+            shape:{
+                points:[
+                    [this.model.width * 0.07, this.model.width * 0.43],
+                    [this.model.width * 0.33, this.model.width * 0.43],
+                    [this.model.width * 0.33, this.model.width * 0.41],
+                    [this.model.width * 0.64, this.model.width * 0.41],
+                    [this.model.width * 0.64, this.model.width * 0.43],
+                    [this.model.width * 0.90, this.model.width * 0.43],
+                    [this.model.width * 0.64, this.model.width * 0.43],
+                    [this.model.width * 0.64, this.model.width * 0.45],
+                    [this.model.width * 0.33, this.model.width * 0.45],
+                    [this.model.width * 0.33, this.model.width * 0.43]
+                ]
+            },
+            style: {
+                stroke:this.model.color,
+                lineWidth:2
+            }
+        });
+
+        this.polyline3 = new Polyline({
+            zlevel: this.model.zlevel,
+            z: this.model.z,
+            shape:{
+                points:[
+                    [this.model.width * 0.07, this.model.width * 0.52],
+                    [this.model.width * 0.33, this.model.width * 0.52],
+                    [this.model.width * 0.33, this.model.width * 0.50],
+                    [this.model.width * 0.64, this.model.width * 0.50],
+                    [this.model.width * 0.64, this.model.width * 0.52],
+                    [this.model.width * 0.90, this.model.width * 0.52],
+                    [this.model.width * 0.64, this.model.width * 0.52],
+                    [this.model.width * 0.64, this.model.width * 0.54],
+                    [this.model.width * 0.33, this.model.width * 0.54],
+                    [this.model.width * 0.33, this.model.width * 0.52]
+                ]
+            },
+            style: {
+                stroke:this.model.color,
+                lineWidth:2
+            }
+        });
+
+        this.grouper.add(this.rect);
+        this.grouper.add(this.circle2);
+        this.grouper.add(this.circle1);
+        this.grouper.add(this.polyline1);
+        this.grouper.add(this.polyline2);
+        this.grouper.add(this.polyline3);
+        this.add(this.grouper);
+    }
+    setModel(dx, dy) {
+        this.model.point.x += dx;
+        this.model.point.y += dy;
+    }
+}

src/iscs/shape/bas/frozenPump.js

@@ -0,0 +1,56 @@
+import Group from 'zrender/src/container/Group';
+import Circle from 'zrender/src/graphic/shape/Circle';
+import Polygon from 'zrender/src/graphic/shape/Polygon';
+export default class frozenPump extends Group {
+    constructor(device) {
+        super();
+        this.model = device.model;
+        this._type = device.model._type;
+        this._code = device.model.code;
+        this.zlevel = device.model.zlevel;
+        this.z = device.model.zlevel;
+        this.create();
+    }
+    create() {
+        this.grouper = new Group({
+            id: this.model.code,
+            position: [this.model.point.x, this.model.point.y]
+        });
+        this.circleOutside = new Circle({
+            zlevel: this.model.zlevel,
+            z: this.model.z,
+            shape: {
+                cx: this.model.width / 2,
+                cy: this.model.width / 2,
+                r: this.model.width / 2
+            },
+            style: {
+                stroke: this.model.color,
+                lineWidth:2
+            }
+        });
+        this.triangle = new Polygon({
+            zlevel: this.model.zlevel,
+            z: this.model.z,
+            shape:{
+                points:[
+                    [this.model.width / 4, this.model.width / 2 * 0.133975],
+                    [this.model.width / 4, this.model.width / 2 * 1.866025],
+                    [this.model.width, this.model.width / 2],
+                    [this.model.width / 4, this.model.width / 2 * 0.133975]
+                ]
+            },
+            style: {
+                fill: this.model.color,
+                stroke:this.model.color
+            }
+        });
+        this.grouper.add(this.circleOutside);
+        this.grouper.add(this.triangle);
+        this.add(this.grouper);
+    }
+    setModel(dx, dy) {
+        this.model.point.x += dx;
+        this.model.point.y += dy;
+    }
+}

src/iscs/shape/bas/ventilator.js

@@ -0,0 +1,123 @@
+import Group from 'zrender/src/container/Group';
+import Polygon from 'zrender/src/graphic/shape/Polygon';
+import Polyline from 'zrender/src/graphic/shape/Polyline';
+export default class ventilator extends Group {
+    constructor(device) {
+        super();
+        this.model = device.model;
+        this._type = device.model._type;
+        this._code = device.model.code;
+        this.zlevel = device.model.zlevel;
+        this.z = device.model.zlevel;
+        this.create();
+    }
+    create() {
+        this.grouper = new Group({
+            id: this.model.code,
+            position: [this.model.point.x, this.model.point.y]
+        });
+
+        this.polyline1 = new Polyline({
+            zlevel: this.model.zlevel,
+            z: this.model.z,
+            shape:{
+                points:[
+                    [0, 0],
+                    [this.model.width * 0.086, this.model.width * 0.10],
+                    [this.model.width * 0.586, this.model.width * 0.10],
+                    [this.model.width * 0.606, this.model.width * 0.10],
+                    [this.model.width * 0.706, 0],
+                    [this.model.width * 0.706, this.model.width * 0.758],
+                    [this.model.width * 0.606, this.model.width * 0.638],
+                    [this.model.width * 0.606, this.model.width * 0.10],
+                    [this.model.width * 0.606, this.model.width * 0.638],
+                    [this.model.width * 0.086, this.model.width * 0.638],
+                    [0, this.model.width * 0.758],
+                    [0, 0],
+                    [this.model.width * 0.086, this.model.width * 0.10],
+                    [this.model.width * 0.086, this.model.width * 0.638]
+                ]
+            },
+            style: {
+                stroke:this.model.color,
+                lineWidth:2
+            }
+        });
+
+        this.rhombus1 = new Polygon({
+            zlevel: this.model.zlevel,
+            z: this.model.z,
+            shape:{
+                points:[
+                    [this.model.width * 0.336, this.model.width * 0.10],
+                    [this.model.width * 0.456, this.model.width * 0.2345],
+                    [this.model.width * 0.336, this.model.width * 0.369],
+                    [this.model.width * 0.216, this.model.width * 0.2345],
+                    [this.model.width * 0.336, this.model.width * 0.10]
+                ]
+            },
+            style: {
+                fill:this.model.color
+            }
+        });
+
+        this.rhombus2 = new Polygon({
+            zlevel: this.model.zlevel,
+            z: this.model.z,
+            shape:{
+                points:[
+                    [this.model.width * 0.336, this.model.width * 0.369],
+                    [this.model.width * 0.456, this.model.width * 0.5035],
+                    [this.model.width * 0.336, this.model.width * 0.638],
+                    [this.model.width * 0.216, this.model.width * 0.5035],
+                    [this.model.width * 0.336, this.model.width * 0.369]
+                ]
+            },
+            style: {
+                fill:this.model.color
+            }
+        });
+
+        this.triangle = new Polygon({
+            zlevel: this.model.zlevel,
+            z: this.model.z,
+            shape:{
+                points:[
+                    [this.model.width * 0.728, this.model.width * 0.08],
+                    [this.model.width * 1, this.model.width * 0.369],
+                    [this.model.width * 0.728, this.model.width * 0.640],
+                    [this.model.width * 0.728, this.model.width * 0.08]
+                ]
+            },
+            style: {
+                fill: this.model.color
+            }
+        });
+
+        this.line = new Polyline({
+            zlevel: this.model.zlevel,
+            z: this.model.z,
+            shape:{
+                points:[
+                    [this.model.width * 0.126, this.model.width * 0.369],
+                    [this.model.width * 0.546, this.model.width * 0.369]
+                ]
+            },
+            style: {
+                stroke:this.model.color,
+                lineWidth:2
+            }
+        });
+
+        this.grouper.add(this.polyline1);
+        this.grouper.add(this.rhombus1);
+        this.grouper.add(this.rhombus2);
+        this.grouper.add(this.triangle);
+        this.grouper.add(this.line);
+        this.add(this.grouper);
+    }
+    setModel(dx, dy) {
+        this.model.point.x += dx;
+        this.model.point.y += dy;
+    }
+}

src/iscs/shape/borderRadius.js

@@ -0,0 +1,104 @@
+import Group from 'zrender/src/container/Group';
+import Line from 'zrender/src/graphic/shape/Line';
+import Sector from 'zrender/src/graphic/shape/Sector';
+import Rect from 'zrender/src/graphic/shape/Rect';
+
+export default class BorderRadius extends Group {
+    constructor(device) {
+        super();
+        this.model = device.model;
+        this.zlevel = device.model.zlevel;
+        this.z = device.model.z;
+        this._type = device.model._type;
+        this._code = device.model.code;
+        this.create();
+    }
+    create() {
+        this.grouper = new Group({
+            id: this.model.code,
+            position: [this.model.point.x, this.model.point.y]
+        });
+        this.leftSector = new Sector({
+            zlevel: this.zlevel,
+            z: this.z,
+            shape: {
+                cx: this.model.height / 2,
+                cy: this.model.height / 2,
+                r: this.model.height / 2,
+                startAngle: Math.PI / 2,
+                endAngle: Math.PI * 3 / 2
+            },
+            style: {
+                fill: 'rgba(0, 0, 0, 0.1)',
+                stroke: '#EBEE0C'
+            }
+        });
+        this.rightSector = new Sector({
+            zlevel: this.zlevel,
+            z: this.z,
+            shape:{
+                cx: this.model.width - this.model.height / 2,
+                cy: this.model.height / 2,
+                r: this.model.height / 2,
+                startAngle: Math.PI * 3 / 2,
+                endAngle:  Math.PI / 2
+            },
+            style: {
+                fill: 'rgba(0, 0, 0, 0.1)',
+                stroke: '#EBEE0C'
+            }
+        });
+        this.rect = new Rect({
+            zlevel: this.zlevel,
+            z: this.z,
+            shape: {
+                x: this.model.height / 2,
+                y: 0,
+                width: this.model.width - this.model.height,
+                height: this.model.height
+            },
+            style: {
+                fill: '#000',
+                stroke: '#EBEE0C'
+            }
+        });
+        this.leftLine = new Line({
+            zlevel: this.zlevel,
+            z: this.z + 1,
+            shape: {
+                x1: this.model.height / 2,
+                y1: 0,
+                x2: this.model.height / 2,
+                y2: this.model.height
+            },
+            style: {
+                lineWidth: 3,
+                stroke: '#000'
+            }
+        });
+        this.rightLine = new Line({
+            zlevel: this.zlevel,
+            z: this.z + 1,
+            shape: {
+                x1: this.model.width - this.model.height / 2,
+                y1: 0,
+                x2: this.model.width - this.model.height / 2,
+                y2: this.model.height
+            },
+            style: {
+                lineWidth: 3,
+                stroke: '#000'
+            }
+        });
+        this.grouper.add(this.leftSector);
+        this.grouper.add(this.rightSector);
+        this.grouper.add(this.leftLine);
+        this.grouper.add(this.rightLine);
+        this.grouper.add(this.rect);
+        this.add(this.grouper);
+    }
+    setModel(dx, dy) {
+        this.model.point.x += dx;
+        this.model.point.y += dy;
+    }
+}

src/iscs/shape/brakeMachine.js

@@ -0,0 +1,27 @@
+import Group from 'zrender/src/container/Group';
+import createPathSvg from './components/pathsvg';
+
+export default class BrakeMachine extends Group {
+    constructor(device) {
+        super();
+        this.model = device.model;
+        this.zlevel = device.model.zlevel;
+        this.z = device.model.z;
+        this._type = device.model._type;
+        this.code = device.model.code;
+        this.create();
+    }
+    create() {
+        this.grouper = new Group({
+            id: this.model.code,
+            position: [this.model.point.x, this.model.point.y]
+        });
+        this.path = createPathSvg(this.model);
+        this.add(this.grouper);
+        this.grouper.add(this.path);
+    }
+    setModel(dx, dy) {
+        this.model.point.x += dx;
+        this.model.point.y += dy;
+    }
+}

src/iscs/shape/checkBox.js

@@ -0,0 +1,46 @@
+import Group from 'zrender/src/container/Group';
+import Rect from 'zrender/src/graphic/shape/Rect';
+
+export default class checkBox extends Group {
+    constructor(device) {
+        super();
+        this.model = device.model;
+        this._type = device.model._type;
+        this._code = device.model.code;
+        this.zlevel = device.model.zlevel;
+        this.z = device.model.z;
+        this.create();
+    }
+
+    create() {
+        const model = this.model;
+        this.grouper = new Group({
+            id: model.code,
+            position: [model.point.x, model.point.y]
+        });
+        this.box = new Rect({
+            zlevel: model.zlevel,
+            z: model.z,
+            draggable: false,
+            shape: {
+                x: 0,
+                y: 0,
+                width: this.model.width,
+                height: this.model.height
+            },
+            style: {
+                fill: 'rgb(135,206,250,0.2)'
+            }
+        });
+        this.grouper.add(this.box);
+        this.add(this.grouper);
+    }
+    setModel(dx, dy) {
+        this.model.point.x += dx;
+        this.model.point.y += dy;
+    }
+    setSize(width, height) {
+        this.model.width = width;
+        this.model.height = height;
+    }
+}

src/iscs/shape/components/pathsvg.js

@@ -0,0 +1,38 @@
+import * as path from 'zrender/src/tool/path';
+const map = {
+    VidiconCloud: {
+        scale: [0.02, 0.02],
+        path: 'M917.749663 10.405886C911.585184 3.624959 902.758306 0.937984 893.583268 0 431.820819 9.342974 145.285208 116.940772 41.943153 319.811507-35.676029 472.166287 16.281719 643.911525 70.123626 722.186067c6.225919 9.072638 16.609276 14.909436 27.627513 13.783036a31.850488 31.850488 0 0 0 26.316794-16.261116c63.201265-112.455653 187.985875-295.958457 368.517032-386.613155-68.669424 89.593834-177.418197 237.273031-282.726332 404.778911-10.301438 14.069757-87.388139 125.62429-48.435189 262.901697A31.913976 31.913976 0 0 0 192.041037 1023.999754a31.014905 31.014905 0 0 0 8.765438-1.228799 32.00204 32.00204 0 0 0 21.893114-39.546871c-22.958074-80.855021 6.901758-152.575963 25.661434-186.695635 128.880609 54.415347 249.40538 53.637107 350.085036-2.785279 172.380119-96.645097 282.562492-351.743916 327.454642-758.210379a32.255992 32.255992 0 0 0-8.151038-25.126905zM567.377907 737.873743c-81.51038 45.690869-177.029078 46.940149-284.385212 3.788799 15.421436-24.104954 30.822393-47.513589 46.141429-70.533103l219.197387-31.436793a32.01228 32.01228 0 0 0-9.011198-63.385584l-161.710041 23.203834c13.250557-19.169275 26.173434-37.580791 38.871031-55.521267a30.595065 30.595065 0 0 0 6.184958-0.614399l159.272922-31.989753a32.028664 32.028664 0 0 0 24.985594-37.662711 31.651832 31.651832 0 0 0-37.498871-25.108474l-98.488296 19.783676c81.96094-111.742949 141.066206-183.898068 142.069726-185.139156a32.11468 32.11468 0 0 0 2.375679-37.531639 31.743992 31.743992 0 0 0-34.815991-13.844477c-85.503979 22.001659-161.484761 63.657969-227.860426 114.608101v-58.490866a31.856632 31.856632 0 1 0-63.713264 0v112.672741c-22.630395 21.202939-43.868149 43.231222-63.713265 65.574896v-101.715943a31.846392 31.846392 0 1 0-63.692785 0v179.458004c0 0.24576 0.12288 0.43008 0.12288 0.67584-24.289274 32.665592-45.711349 64.614384-63.897585 94.064618-28.344313-67.071984-54.251507-181.637076 0.83968-289.761211C186.593358 176.322518 448.921615 78.374893 858.337197 64.968688c-44.646389 363.374505-142.479326 589.653874-290.95929 672.905055z m339.353518-145.653725c-10.874877-21.626875-45.957109-21.626875-56.852466 0-19.189755 38.256631-114.872292 232.120264-114.872293 294.625209 0 75.612142 64.286705 137.154527 143.298526 137.154527s143.319006-61.542385 143.319006-137.154527c0-62.504945-95.703017-256.368578-114.892773-294.625209z m-28.426233 367.574952c-43.909109 0-79.605741-32.727032-79.605741-72.949743 0-27.770873 40.44799-123.96541 79.605741-207.09371 39.157751 83.1283 79.626221 179.322837 79.626221 207.09371 0 40.22271-35.696631 72.949742-79.626221 72.949743z'
+    },
+    brakeMachine: {
+        width: 159,
+        path: 'M160,101H1V82l46.013-.289c8.016-5.064,38.681-23.717,63.8-29.188C85.244,47.006,53.8,27.621,46.55,23H1V4L160,3V23H141.512c1.7,4.784,3.5,23.827-9.675,29.436,12.815,5.166,11.856,22.742,10.254,28.676L160,81v20ZM22,87H10v9l12,0.083V87ZM22,9H10v9l12,0.083V9ZM154,9H29v9.132L154,19V9ZM132.222,23H58.7c9.442,5.485,55.744,31.358,70.3,20C134.869,38.421,132.945,26.523,132.222,23Zm-2.953,39c-14.3-11.122-59.136,13.454-69.891,19.633l73.284-.461C133.452,76.9,134.758,66.27,129.269,62ZM154,87H29v9.132L154,97V87Z'
+    },
+    ticketMachine: {
+        width: 107,
+        path: 'M102,42H96V24h6V42ZM83,27h6v9H83V27ZM22,38H16V29h6v9Zm7-4V27H44V43H26V36h5v2h8V32H34v2H29Zm32,0V27H76V43H58V36h5v2h8V32H66v2H61Zm24,6V50H14V42h4v4H81V40h4ZM95,61H89V45h6V61ZM85,21H25v6H19V16H91v8H85V21ZM12,60V52H85v8H81V56H16v4H12Zm98.509,65L91,138.919V140H4V63h6v3h8V61h5v5h8V61h5v5h5V61h5v5H57V61h5v5h7V58h5v8h4V63h5v8H10v2H85V63h6v68.548l14-9.988V9H20.251l-0.659,1H102V21H96V14H17V13.935L16.957,14H17V28H11V15.089L9.644,14.2,16,4.547V3h1.019l0.327-.5L18.1,3H111V125h-0.491ZM85,78H10v56H85V78ZM31,95l8,23H33l-1.826-6H25.826L24,118H18l8-23h5Zm-1.044,13L28.5,103.214,27.044,108h2.913Zm12.9-14L46.5,108.786,50.143,94H55l-6.476,23H44.476L38,94h4.857ZM60,95h4l4,13.333L72,95h5l2,22H75l-1.3-14.326L70,115H66l-3.7-12.326L61,117H57l2-22h1ZM10,59H4V31h6V59Z'
+    },
+    semiAutomaticTicketMachine: {
+        width: 107,
+        path: 'M169,104h-6V86h6v18ZM150,89h6v9h-6V89ZM89,100H83V91h6v9Zm7-4V89h15v16H93V98h5v2h8V94h-5v2H96Zm32,0V89h15v16H125V98h5v2h8V94h-5v2h-5Zm24,6v10H81v-8h4v4h63v-6h4Zm10,21h-6V107h6v16ZM152,83H92v6H86V78h72v8h-6V83ZM79,122v-8h73v8h-4v-4H83v4H79Zm98.509,65L158,200.919V202H71V125h6v3h8v-5h5v5h8v-5h5v5h5v-5h5v5h11v-5h5v5h7v-8h5v8h4v-3h5v8H77v2h75V125h6v68.548l14-9.988V71H87.251l-0.659,1H169V83h-6V76H84V75.935L83.957,76H84V90H78V77.089L76.644,76.2,83,66.547V65h1.019l0.327-.5L85.1,65H178V187h-0.491ZM152,140H77v56h75V140ZM98,164.882c-0.086,2.392-3.312,3.289-6.116,3.616a17.317,17.317,0,0,0-4.1.165,28.262,28.262,0,0,0,4.1-.165c3.22,0.281,6.956,1.758,5.638,7.378C96.7,179.378,85,178.968,85,178.968V158.359S98.327,155.743,98,164.882ZM88,176.176s6.134,0.926,6-2.823c-0.126-3.527-6-2.824-6-2.824v5.647Zm0-9.411s5.2,0.959,6-1.883c1.046-3.717-6-3.764-6-3.764v5.647ZM109.5,158c4.694,0,8.5,4.925,8.5,11s-3.806,11-8.5,11-8.5-4.925-8.5-11S104.806,158,109.5,158ZM109,176c3.3,0.056,5.091-3.366,5-8-0.076-3.884-1.747-5.728-4-6s-4.973,2.36-5,7C104.981,172.375,105.106,175.934,109,176Zm14-18h4l4,13.333L135,158h5l2,22h-4l-1.3-14.326L133,178h-4l-3.7-12.326L124,180h-4l2-22h1ZM77,121H71V93h6v28Z'
+    },
+    airConditioner: {
+        width: 147,
+        path: 'M3,77V2L150,3V78ZM24,14H17V65h7V14Zm7-8H28v4h3V6Zm0,8H28V65h3V14ZM147,6H35v4h8V68l-8,.06V72H31V68.09l-3,.022V72H24V68.142l-11,.082V10H24V6H6V74H147V6ZM35,14V65h5V14H35ZM76,68l-30,.224V10H76V68ZM59,56H52.625A8.285,8.285,0,0,0,59,60.912V56Zm0-3V45.225c-3.36.708-7.185,3.154-7,7.775h7Zm4,0h6c0-2.946-1.113-6.969-6-7.827V53Zm0,3v4.593A8.015,8.015,0,0,0,68.387,56H63ZM49,65H59V64.906a12.456,12.456,0,0,1-10-7.2V65Zm0-51v5.294A12.172,12.172,0,0,1,53.6,14H49Zm10,2.225c-3.36.708-7.185,3.154-7,7.775h7V16.225ZM59,27H52.625A8.285,8.285,0,0,0,59,31.912V27Zm4-10.827V24h6C69,21.054,67.887,17.031,63,16.173ZM63,27v4.593A8.015,8.015,0,0,0,68.387,27H63ZM73,53V14H67.4A11.87,11.87,0,0,1,73,24,12.258,12.258,0,0,1,60.5,36,12.522,12.522,0,0,1,49,28.706V48.294a12.456,12.456,0,0,1,10-7.2V41h4v0.241a11.914,11.914,0,0,1,0,23.518V65H73V53Zm28-35a19.912,19.912,0,0,1,7,1.284V19h23V39H120.95A19.984,19.984,0,0,1,101,58c-11.046,0-21-8.954-21-20S89.954,18,101,18Zm27,17V23H114.2a19.935,19.935,0,0,1,6.553,12H128ZM84,39c0.594,8.917,8.91,15.731,19,15,10.255-.743,14.645-9.489,15-15,0.594-9.238-6.151-16.7-17-17S83.406,30.083,84,39Zm17.707-9a8.5,8.5,0,0,1,0,17A8.755,8.755,0,0,1,93,38.5,8.755,8.755,0,0,1,101.707,30ZM96,39c0.246,3.79,1.817,4.311,6,4,4.252-.316,4.853-1.658,5-4,0.246-3.926-.5-4.874-5-5S95.754,35.21,96,39Z'
+    },
+    volumeControlDamper: {
+        width: 42,
+        path: 'M3,36H43V99H3V36Zm4,3H40V96H7V39Zm6,4H34V63H13V43Zm0,30H34V93H13V73Zm20,2h8v5H33V75Zm0-20h8v5H33V55ZM20,29h5v8H20V29ZM23,3C34.6,3,44,9.268,44,17S34.6,31,23,31,2,24.732,2,17,11.4,3,23,3Zm0,4c12.261,0,16,6.134,16,10s-3.72,8.837-15,9S8,20.866,8,17,10.74,7,23,7ZM14,25V7l4-1,6,7,4-6,5,1V26H28V16l-4,4-5-4V26ZM27,62h5V75H27V62ZM15.617,88.076l2.649,3.265L9.777,98.228,7.128,94.963ZM13.4,45.987l2.619-3.215L7.622,35.991,5,39.206Z'
+    }
+};
+
+export default function createPathSvg(model) {
+    const svg = path.createFromString(map[model._type].path, {
+        style: {
+            fill: model.fill || '#00FF00'
+        }
+    });
+    const scaleX = model.width / map[model._type].width;
+    svg.scale = [scaleX, scaleX];
+    return svg;
+}

src/iscs/shape/endDoor.js

@@ -0,0 +1,67 @@
+import Group from 'zrender/src/container/Group';
+import Rect from 'zrender/src/graphic/shape/Rect';
+import Circle from 'zrender/src/graphic/shape/Circle';
+
+export default class EndDoor extends Group {
+    constructor(device) {
+        super();
+        this.model = device.model;
+        this.zlevel = device.model.zlevel;
+        this.z = device.model.z;
+        this._type = device.model._type;
+        this._code = device.model.code;
+        this.create();
+    }
+    create() {
+        this.grouper = new Group({
+            id: this.model.code,
+            position: [this.model.point.x, this.model.point.y]
+        });
+        this.add(this.grouper);
+        this.door = new Rect({
+            zlevel: this.zlevel,
+            z: this.z,
+            shape: {
+                x: 0,
+                y: 0,
+                width: this.model.width,
+                height: this.model.width * 29 / 17
+            },
+            style: {
+                fill: '#33CC00'
+            }
+        });
+        this.doorWindow = new Rect({
+            zlevel: this.zlevel,
+            z: this.z,
+            shape: {
+                x: this.model.width * 2 / 17,
+                y: this.model.width * 6 / 17,
+                width: this.model.width * 13 / 17,
+                height: this.model.width * 4 / 17
+            },
+            style: {
+                fill: '#000'
+            }
+        });
+        this.doorknob = new Circle({
+            zlevel: this.zlevel,
+            z: this.z,
+            shape: {
+                cx: this.model.width * 13 / 17,
+                cy: this.model.width * 21 / 17,
+                r: this.model.width / 17
+            },
+            style: {
+                fill: '#000'
+            }
+        });
+        this.grouper.add(this.door);
+        this.grouper.add(this.doorWindow);
+        this.grouper.add(this.doorknob);
+    }
+    setModel(dx, dy) {
+        this.model.point.x += dx;
+        this.model.point.y += dy;
+    }
+}

src/iscs/shape/entranceGuard/close.js

@@ -0,0 +1,56 @@
+import Group from 'zrender/src/container/Group';
+import Rect from 'zrender/src/graphic/shape/Rect';
+import Circle from 'zrender/src/graphic/shape/Circle';
+
+export default class CloseEntranceGuard extends Group {
+    constructor(device) {
+        super();
+        this.model = device.model;
+        this.zlevel = device.model.zlevel;
+        this.z = device.model.z;
+        this.create();
+    }
+    create() {
+        this.door = new Rect({
+            zlevel: this.zlevel,
+            z: this.z,
+            shape: {
+                x: 0,
+                y: 0,
+                width: this.model.width,
+                height: this.model.width * 16 / 13
+            },
+            style: {
+                fill: '#33CC00'
+            }
+        });
+        this.doorWindow = new Rect({
+            zlevel: this.zlevel,
+            z: this.z,
+            shape: {
+                x: this.model.width / 8,
+                y: this.model.width * 4 / 13,
+                width: this.model.width * 3 / 4,
+                height: this.model.width * 6 / 17
+            },
+            style: {
+                fill: '#000'
+            }
+        });
+        this.doorknob = new Circle({
+            zlevel: this.zlevel,
+            z: this.z,
+            shape: {
+                cx: this.model.width * 9 / 13,
+                cy: this.model.width * 11 / 13,
+                r: this.model.width / 16
+            },
+            style: {
+                fill: '#000'
+            }
+        });
+        this.add(this.door);
+        this.add(this.doorWindow);
+        this.add(this.doorknob);
+    }
+}

src/iscs/shape/entranceGuard/index.js

@@ -0,0 +1,43 @@
+import Group from 'zrender/src/container/Group';
+import CloseEntranceGuard from './close';
+import OpenEntranceGuard from './open';
+
+export default class EntranceGuard extends Group {
+    constructor(device) {
+        super();
+        this.model = device.model;
+        this.zlevel = device.model.zlevel;
+        this.z = device.model.z;
+        this._type = device.model._type;
+        this._code = device.model.code;
+        this.create();
+    }
+    create() {
+        this.grouper = new Group({
+            id: this.model.code,
+            position: [this.model.point.x, this.model.point.y]
+        });
+        this.closeEntranceGuard = new CloseEntranceGuard({
+            model:{
+                zlevel: this.zlevel,
+                z: this.z,
+                width: this.model.width
+            }
+        });
+        this.openEntranceGuard = new OpenEntranceGuard({
+            model: {
+                zlevel: this.zlevel,
+                z: this.z,
+                width: this.model.width
+            }
+        });
+        this.add(this.grouper);
+        this.grouper.add(this.closeEntranceGuard);
+        this.grouper.add(this.openEntranceGuard);
+        this.closeEntranceGuard.hide();
+    }
+    setModel(dx, dy) {
+        this.model.point.x += dx;
+        this.model.point.y += dy;
+    }
+}

src/iscs/shape/entranceGuard/open.js

@@ -0,0 +1,44 @@
+import Group from 'zrender/src/container/Group';
+import Polygon from 'zrender/src/graphic/shape/Polygon';
+import Rect from 'zrender/src/graphic/shape/Rect';
+
+export default class openEntranceGuard extends Group {
+    constructor(device) {
+        super();
+        this.model = device.model;
+        this.zlevel = device.model.zlevel;
+        this.z = device.model.z;
+        this.create();
+    }
+    create() {
+        this.door = new Rect({
+            zlevel: this.zlevel,
+            z: this.z,
+            shape:{
+                x: 0,
+                y: 0,
+                width: this.model.width,
+                height: this.model.width * 16 / 13
+            },
+            style: {
+                lineWidth: 3,
+                fill: '#000',
+                stroke: '#0F0'
+            }
+        });
+        this.openDoor = new Polygon({
+            zlevel: this.zlevel,
+            z: this.z,
+            shape:{
+                points: [[0, 0], [this.model.width * 5 / 13, 0], [this.model.width * 11 / 13, this.model.width * 3 / 13], [this.model.width * 11 / 13, this.model.width * 19 / 13],
+                    [this.model.width * 5 / 13, this.model.width * 16 / 13], [0, this.model.width * 16 / 13]
+                ]
+            },
+            style: {
+                fill: '#0F0'
+            }
+        });
+        this.add(this.door);
+        this.add(this.openDoor);
+    }
+}

src/iscs/shape/factory.js

@@ -0,0 +1,67 @@
+import ManualAlarmButton from './manualAlarmButton';
+import Vidicon from './Vidicon';
+import VidiconCloud from './VidiconCloud';
+import deviceType from '../constant/deviceType';
+import CheckBox from './checkBox';
+import FrozenPump from './bas/frozenPump';
+import FireHydranAlarmButton from './fireHydrantAlarmButton';
+import GasFireControl from './gasFireControl';
+import SmokeDetector from './smokeDetector';
+import TemperatureDetector from './temperatureDetector';
+import PlatformScreenDoor from './psd/platformScreenDoor';
+import Ventilator from './bas/ventilator';
+import Chiller from './bas/chiller';
+import CoolTower from './bas/coolTower';
+import EndDoor from './endDoor';
+import BorderRadius from './borderRadius';
+import OrbitalVentilator from './bas/orbitalVentilator';
+import JetFan from './bas/jetFan';
+import TunnelFan from './bas/tunnelFan';
+import FireDamper from './bas/fireDamper';
+import SmookProofFd from './bas/smookProofFd';
+import BrakeMachine from './brakeMachine';
+import EntranceGuard from './entranceGuard/index';
+import SemiAutomaticTicketMachine from './semiAutomaticTicketMachine';
+import TicketMachine from './ticketMachine';
+import AirConditioner from './airConditioner';
+import VolumeControlDamper from './volumeControlDamper';
+
+const iscsShape = {};
+iscsShape[deviceType.ManualAlarmButton] = ManualAlarmButton;
+iscsShape[deviceType.Vidicon] = Vidicon;
+iscsShape[deviceType.VidiconCloud] = VidiconCloud;
+iscsShape[deviceType.CheckBox] = CheckBox;
+iscsShape[deviceType.FrozenPump] = FrozenPump;
+iscsShape[deviceType.FireHydranAlarmButton] = FireHydranAlarmButton;
+iscsShape[deviceType.GasFireControl] = GasFireControl;
+iscsShape[deviceType.SmokeDetector] = SmokeDetector;
+iscsShape[deviceType.TemperatureDetector] = TemperatureDetector;
+iscsShape[deviceType.PlatformScreenDoor] = PlatformScreenDoor;
+iscsShape[deviceType.Ventilator] = Ventilator;
+iscsShape[deviceType.Chiller] = Chiller;
+iscsShape[deviceType.CoolTower] = CoolTower;
+iscsShape[deviceType.EndDoor] = EndDoor;
+iscsShape[deviceType.BorderRadius] = BorderRadius;
+iscsShape[deviceType.AirConditioner] = AirConditioner;
+iscsShape[deviceType.OrbitalVentilator] = OrbitalVentilator;
+iscsShape[deviceType.JetFan] = JetFan;
+iscsShape[deviceType.TunnelFan] = TunnelFan;
+iscsShape[deviceType.FireDamper] = FireDamper;
+iscsShape[deviceType.SmookProofFd] = SmookProofFd;
+iscsShape[deviceType.BrakeMachine] = BrakeMachine;
+iscsShape[deviceType.EntranceGuard] = EntranceGuard;
+iscsShape[deviceType.SemiAutomaticTicketMachine] = SemiAutomaticTicketMachine;
+iscsShape[deviceType.TicketMachine] = TicketMachine;
+iscsShape[deviceType.AirConditioner] = AirConditioner;
+iscsShape[deviceType.VolumeControlDamper] = VolumeControlDamper;
+
+function shapefactory(device, iscs) {
+    const type = device.model._type;
+    const shape = iscsShape[type];
+    if (shape instanceof Function) {
+        // eslint-disable-next-line
+        return new shape(device, iscs.style);
+    }
+}
+
+export default shapefactory;

src/iscs/shape/fireHydrantAlarmButton.js

@@ -0,0 +1,63 @@
+import Group from 'zrender/src/container/Group';
+import Rect from 'zrender/src/graphic/shape/Rect';
+import Polygon from 'zrender/src/graphic/shape/Polygon';
+
+export default class FireHydrantAlarmButton extends Group {
+    constructor(device) {
+        super();
+        this.model = device.model;
+        this._type = device.model._type;
+        this._code = device.model.code;
+        this.zlevel = device.model.zlevel;
+        this.z = device.model.zlevel;
+        this.create();
+    }
+    create() {
+        this.grouper = new Group({
+            id: this.model.code,
+            position: [this.model.point.x, this.model.point.y]
+        });
+        this.add(this.grouper);
+        this.rect = new Rect({
+            zlevel: this.zlevel,
+            z: this.z,
+            shape: {
+                x: 0,
+                y: 0,
+                width: this.model.width,
+                height: this.model.width / 2
+            },
+            style: {
+                fill: '#0f0'
+            }
+        });
+        this.grouper.add(this.rect);
+        const width = this.model.width;
+        this.polygonTop = new Polygon({
+            zlevel: this.zlevel,
+            z: this.z,
+            shape: {
+                points: [[width / 4, width * 3 / 40], [width * 3 / 4, width * 3 / 40], [width * 3 / 5, width * 5 / 20], [width * 2 / 5, width * 5 / 20]]
+            },
+            style: {
+                color: '#000'
+            }
+        });
+        this.polygonBottom = new Polygon({
+            zlevel: this.zlevel,
+            z: this.z,
+            shape: {
+                points: [[width * 2 / 5, width * 3 / 10], [width * 3 / 5, width * 3 / 10], [width * 13 / 20, width * 2 / 5], [width * 7 / 20, width * 2 / 5]]
+            },
+            style: {
+                color: '#000'
+            }
+        });
+        this.grouper.add(this.polygonTop);
+        this.grouper.add(this.polygonBottom);
+    }
+    setModel(dx, dy) {
+        this.model.point.x += dx;
+        this.model.point.y += dy;
+    }
+}

src/iscs/shape/gasFireControl.js

@@ -0,0 +1,84 @@
+import Group from 'zrender/src/container/Group';
+import Rect from 'zrender/src/graphic/shape/Rect';
+import Isogon from 'zrender/src/graphic/shape/Isogon';
+import Circle from 'zrender/src/graphic/shape/Circle';
+
+export default class GasFireControl extends Group {
+    constructor(device) {
+        super();
+        this.model = device.model;
+        this.zlevel = device.model.zlevel;
+        this.z = device.z;
+        this._type = device.model._type;
+        this._code = device.model.code;
+        this.create();
+    }
+    create() {
+        this.grouper = new Group({
+            id: this.model.code,
+            position: [this.model.point.x, this.model.point.y]
+        });
+        this.add(this.grouper);
+        this.rect = new Rect({
+            zlevel: this.zlevel,
+            z: this.z,
+            shape: {
+                x: 0,
+                y: 0,
+                width: this.model.width,
+                height: this.model.width
+            },
+            style: {
+                lineWidth: 1,
+                stroke: '#0F0'
+            }
+        });
+        this.grouper.add(this.rect);
+        this.isogon = new Isogon({
+            zlevel: this.zlevel,
+            z: this.z,
+            shape: {
+                x: this.model.width / 3,
+                y: this.model.width / 2,
+                r: this.model.width / 4,
+                n: 3
+            },
+            style: {
+                fill: '#0F0'
+            }
+        });
+        this.isogon.origin = [this.model.width / 3, this.model.width / 2];
+        this.isogon.rotation = Math.PI / 180 * Number(90);
+        this.grouper.add(this.isogon);
+        this.circleTop = new Circle({
+            zlevel: this.zlevel,
+            z: this.z,
+            shape: {
+                cx: this.model.width * 2 / 3,
+                cy: this.model.width / 4,
+                r: this.model.width / 12
+            },
+            style: {
+                fill: '#0F0'
+            }
+        });
+        this.circleBottom = new Circle({
+            zlevel: this.zlevel,
+            z: this.z,
+            shape: {
+                cx: this.model.width * 2 / 3,
+                cy: this.model.width * 3 / 4,
+                r: this.model.width / 12
+            },
+            style: {
+                fill: '#0F0'
+            }
+        });
+        this.grouper.add(this.circleTop);
+        this.grouper.add(this.circleBottom);
+    }
+    setModel(dx, dy) {
+        this.model.point.x += dx;
+        this.model.point.y += dy;
+    }
+}

src/iscs/shape/manualAlarmButton.js

@@ -0,0 +1,87 @@
+import Group from 'zrender/src/container/Group';
+import Rect from 'zrender/src/graphic/shape/Rect';
+import Circle from 'zrender/src/graphic/shape/Circle';
+import Text from 'zrender/src/graphic/Text';
+
+export default class manualAlarmButton extends Group {
+    constructor(device) {
+        super();
+        this.model = device.model;
+        this._type = device.model._type;
+        this._code = device.model.code;
+        this.zlevel = device.model.zlevel;
+        this.z = device.model.zlevel;
+        this.create();
+    }
+    create() {
+        this.grouper = new Group({
+            id: this.model.code,
+            position: [this.model.point.x, this.model.point.y]
+        });
+        this.add(this.grouper);
+        this.rect = new Rect({
+            zlevel: this.model.zlevel,
+            z: this.model.z - 1,
+            shape: {
+                x: 0,
+                y: 0,
+                width: this.model.width,
+                height: this.model.width * 1.1
+            },
+            style: {
+                lineWidth: 1,
+                stroke: '#0F0'
+            }
+        });
+        this.grouper.add(this.rect);
+        this.text = new Text({
+            zlevel: this.model.zlevel,
+            z: this.model.z,
+            style: {
+                x: 0,
+                y: this.model.width * 2 / 5,
+                fontWeight: this.model.fontWeight || 300,
+                fontSize: this.model.fontSize || this.model.width,
+                fontFamily: this.model.fontFamily || 'consolas',
+                text: 'Y',
+                textStrokeWidth: this.model.textStrokeWidth,
+                textFill: this.model.textFill || '#0F0',
+                textAlign: this.model.textAlign,
+                textPosition: this.model.textPosition || 'inside',
+                textVerticalAlign: this.model.textVerticalAlign || null,
+                textLineHeight: this.model.fontSize || 14
+            }
+        });
+        this.grouper.add(this.text);
+        this.circleOutside = new Circle({
+            zlevel: this.model.zlevel,
+            z: this.model.z,
+            shape: {
+                cx: this.model.width * 2 / 3,
+                cy: this.model.width * 2.2 / 3,
+                r: this.model.width / 4
+            },
+            style: {
+                fill: '#0f0'
+            }
+        });
+        this.grouper.add(this.circleOutside);
+        this.circleInside = new Circle({
+            zlevel: this.model.zlevel,
+            z: this.model.z,
+            shape: {
+                cx: this.model.width * 2 / 3,
+                cy: this.model.width * 2.2 / 3,
+                r: this.model.width / 10
+            },
+            style: {
+                fill: '#000'
+            }
+        });
+        this.grouper.add(this.circleInside);
+    }
+    setModel(dx, dy) {
+        this.model.point.x += dx;
+        this.model.point.y += dy;
+    }
+}

src/iscs/shape/psd/platformScreenDoor.js

@@ -0,0 +1,100 @@
+import Group from 'zrender/src/container/Group';
+import Text from 'zrender/src/graphic/Text';
+import Rect from 'zrender/src/graphic/shape/Rect';
+import Line from 'zrender/src/graphic/shape/Line';
+import PsdClose from './psdClose';
+import PsdOpen from './psdOpen';
+import UnknownState from './unknownState';
+
+export default class PlatformScreenDoor extends Group {
+    constructor(device) {
+        super();
+        this.model = device.model;
+        this.zlevel = device.model.zlevel;
+        this.z = device.z;
+        this._type = device.model._type;
+        this._code = device.model.code;
+        this.create();
+    }
+    create() {
+        this.grouper = new Group({
+            id: this.model.code,
+            position: [this.model.point.x, this.model.point.y]
+        });
+        this.add(this.grouper);
+        this.glass = new Rect({
+            zlevel: this.zlevel,
+            z: this.z,
+            shape: {
+                x: 0,
+                y: 0,
+                width: this.model.width,
+                height: this.model.width / 2
+            },
+            style: {
+                fill: '#FFFFFF'
+            }
+        });
+        this.glassTopLine = new Line({
+            zlevel: this.zlevel,
+            z: this.z,
+            shape: {
+                x1: 0,
+                y1: this.model.width * 5 / 16,
+                x2: this.model.width,
+                y2: this.model.width * 5 / 16
+            },
+            style: {
+                lineWidth: 2,
+                stroke: '#CBCBCB'
+            }
+        });
+        this.glassBottomLine = new Line({
+            zlevel: this.zlevel,
+            z: this.z,
+            shape: {
+                x1: 0,
+                y1: this.model.width * 7 / 16,
+                x2: this.model.width,
+                y2: this.model.width * 7 / 16
+            },
+            style: {
+                lineWidth: 2,
+                stroke: '#CBCBCB'
+            }
+        });
+        this.psdClose = new PsdClose({
+            model: {
+                zlevel: this.zlevel,
+                z: this.z + 1,
+                width: this.model.width
+            }
+        });
+        this.psdOpen = new PsdOpen({
+            model: {
+                zlevel: this.zlevel,
+                z: this.z + 1,
+                width: this.model.width
+            }
+        });
+        this.unknownState = new UnknownState({
+            model: {
+                zlevel: this.zlevel,
+                z: this.z + 1,
+                width: this.model.width
+            }
+        });
+        this.grouper.add(this.glass);
+        this.grouper.add(this.glassTopLine);
+        this.grouper.add(this.glassBottomLine);
+        this.grouper.add(this.psdClose);
+        this.grouper.add(this.psdOpen);
+        this.grouper.add(this.unknownState);
+        this.unknownState.hide();
+        this.psdOpen.hide();
+    }
+    setModel(dx, dy) {
+        this.model.point.x += dx;
+        this.model.point.y += dy;
+    }
+}

src/iscs/shape/psd/psdClose.js

@@ -0,0 +1,104 @@
+import Group from 'zrender/src/container/Group';
+import Line from 'zrender/src/graphic/shape/Line';
+import Rect from 'zrender/src/graphic/shape/Rect';
+
+export default class PsdClose extends Group {
+    constructor(device) {
+        super();
+        this.model = device.model;
+        this.zlevel = device.model.zlevel;
+        this.z = device.model.z;
+        this.create();
+    }
+    create() {
+        this.door = new Rect({
+            zlevel: this.zlevel,
+            z: this.z,
+            shape: {
+                x: this.model.width / 4,
+                y: 0,
+                width: this.model.width / 2,
+                height: this.model.width / 2
+            },
+            style: {
+                fill: '#0F0'
+            }
+        });
+        this.doorLeftLine1 = new Line({
+            zlevel: this.zlevel,
+            z: this.z + 1,
+            shape: {
+                x1: this.model.width / 4 + 2,
+                y1: 2,
+                x2: this.model.width / 4 + 2,
+                y2: this.model.width / 2
+            },
+            style: {
+                stroke: '#000',
+                lineWidth: 0.5
+            }
+        });
+        this.doorLeftLine2 = new Line({
+            zlevel: this.zlevel,
+            z: this.z + 1,
+            shape: {
+                x1: this.model.width / 4 + 2,
+                y1: 2,
+                x2: this.model.width / 2 - 2,
+                y2: 2
+            },
+            style: {
+                stroke: '#000',
+                lineWidth: 0.5
+            }
+        });
+        this.doorRightLine1 = new Line({
+            zlevel: this.zlevel,
+            z: this.z + 1,
+            shape: {
+                x1: this.model.width / 2 + 2,
+                y1: 2,
+                x2: this.model.width * 3 / 4 - 2,
+                y2: 2
+            },
+            style: {
+                stroke: '#000',
+                lineWidth: 0.5
+            }
+        });
+        this.doorRightLine2 = new Line({
+            zlevel: this.zlevel,
+            z: this.z + 1,
+            shape: {
+                x1: this.model.width * 3 / 4 - 2,
+                y1: 2,
+                x2: this.model.width * 3 / 4 - 2,
+                y2: this.model.width / 2
+            },
+            style: {
+                stroke: '#000',
+                lineWidth: 0.5
+            }
+        });
+        this.doorCrack = new Line({
+            zlevel: this.zlevel,
+            z: this.z + 1,
+            shape: {
+                x1: this.model.width / 2,
+                y1: 2,
+                x2: this.model.width / 2,
+                y2: this.model.width / 2
+            },
+            style: {
+                stroke : '#000',
+                lineWidth: 2
+            }
+        });
+        this.add(this.door);
+        this.add(this.doorLeftLine1);
+        this.add(this.doorLeftLine2);
+        this.add(this.doorRightLine1);
+        this.add(this.doorRightLine2);
+        this.add(this.doorCrack);
+    }
+}

src/iscs/shape/psd/psdOpen.js

@@ -0,0 +1,98 @@
+import Group from 'zrender/src/container/Group';
+import Line from 'zrender/src/graphic/shape/Line';
+import Rect from 'zrender/src/graphic/shape/Rect';
+import Polygon from 'zrender/src/graphic/shape/Polygon';
+
+export default class PsdOpen extends Group {
+    constructor(device) {
+        super();
+        this.model = device.model;
+        this.zlevel = device.model.zlevel;
+        this.z = device.model.z;
+        this.create();
+    }
+    create() {
+        this.bgRect = new Rect({
+            zlevel: this.zlevel,
+            z: this.z - 1,
+            shape: {
+                x: this.model.width / 4,
+                y: 0,
+                width: this.model.width / 2,
+                height: this.model.width / 2
+            },
+            style: {
+                fill: '#000'
+            }
+        });
+        this.doorLeftFrame = new Line({
+            zlevel: this.zlevel,
+            z: this.z,
+            shape: {
+                x1: this.model.width / 4,
+                y1: 0,
+                x2: this.model.width / 4,
+                y2: this.model.width / 2
+            },
+            style: {
+                lineWidth: this.model.width / 40,
+                stroke: '#10F19A'
+            }
+        });
+        this.doorTopFrame = new Line({
+            zlevel: this.zlevel,
+            z: this.z,
+            shape: {
+                x1: this.model.width / 4,
+                y1: this.model.width / 80,
+                x2: this.model.width * 3 / 4,
+                y2: this.model.width / 80
+            },
+            style: {
+                lineWidth: this.model.width / 40,
+                stroke: '#10F19A'
+            }
+        });
+        this.doorRightFrame = new Line({
+            zlevel: this.zlevel,
+            z: this.z,
+            shape: {
+                x1: this.model.width * 3 / 4,
+                y1: 0,
+                x2: this.model.width * 3 / 4,
+                y2: this.model.width / 2
+            },
+            style: {
+                lineWidth: this.model.width / 40,
+                stroke: '#10F19A'
+            }
+        });
+        this.leftPolygon = new Polygon({
+            zlevel: this.zlevel,
+            z: this.z,
+            shape: {
+                points: [[this.model.width * 21 / 80, this.model.width * 3 / 80], [this.model.width * 5 / 12, this.model.width / 8], [this.model.width * 5 / 12, this.model.width * 37 / 80], [this.model.width * 21 / 80, this.model.width * 37 / 80]]
+            },
+            style: {
+                fill: '#00CC33'
+            }
+        });
+        this.rightPolygon = new Polygon({
+            zlevel: this.zlevel,
+            z: this.z,
+            shape: {
+                points: [
+                    [this.model.width * 7 / 12, this.model.width / 8], [this.model.width * 59 / 80, this.model.width * 3 / 80], [this.model.width * 59 / 80, this.model.width * 37 / 80], [this.model.width * 7 / 12, this.model.width * 37 / 80]]
+            },
+            style: {
+                fill: '#00CC33'
+            }
+        });
+        this.add(this.bgRect);
+        this.add(this.doorLeftFrame);
+        this.add(this.doorRightFrame);
+        this.add(this.doorTopFrame);
+        this.add(this.leftPolygon);
+        this.add(this.rightPolygon);
+    }
+}

src/iscs/shape/psd/unknownState.js

@@ -0,0 +1,45 @@
+import Group from 'zrender/src/container/Group';
+import Rect from 'zrender/src/graphic/shape/Rect';
+import Line from 'zrender/src/graphic/shape/Line';
+
+export default class UnknownState extends Group {
+    constructor(device) {
+        super();
+        this.model = device.model;
+        this.zlevel = device.model.zlevel;
+        this.z = device.model.z;
+        this.create();
+    }
+    create() {
+        this.doorFrame = new Rect({
+            zlevel: this.zlevel,
+            z: this.z,
+            shape: {
+                x: this.model.width / 4,
+                y: 0,
+                width: this.model.width / 2,
+                height: this.model.width / 2
+            },
+            style: {
+                stroke: '#10F19A',
+                fill: '#B5B201'
+            }
+        });
+        this.doorCrack = new Line({
+            zlevel: this.zlevel,
+            z: this.z + 1,
+            shape: {
+                x1: this.model.width / 2,
+                y1: 0,
+                x2: this.model.width / 2,
+                y2: this.model.width / 2
+            },
+            style: {
+                lineWidth: 2,
+                stroke: '#10F19A'
+            }
+        });
+        this.add(this.doorFrame);
+        this.add(this.doorCrack);
+    }
+}

src/iscs/shape/semiAutomaticTicketMachine.js

@@ -0,0 +1,27 @@
+import Group from 'zrender/src/container/Group';
+import createPathSvg from './components/pathsvg';
+
+export default class SemiAutomaticTicketMachine extends Group {
+    constructor(device) {
+        super();
+        this.model = device.model;
+        this.zlevel = device.model.zlevel;
+        this.z = device.model.z;
+        this._type = device.model._type;
+        this.code = device.model.code;
+        this.create();
+    }
+    create() {
+        this.grouper = new Group({
+            id: this.model.code,
+            position: [this.model.point.x, this.model.point.y]
+        });
+        this.path = createPathSvg(this.model);
+        this.add(this.grouper);
+        this.grouper.add(this.path);
+    }
+    setModel(dx, dy) {
+        this.model.point.x += dx;
+        this.model.point.y += dy;
+    }
+}

src/iscs/shape/smokeDetector.js

@@ -0,0 +1,59 @@
+import Group from 'zrender/src/container/Group';
+import Circle from 'zrender/src/graphic/shape/Circle';
+import Text from 'zrender/src/graphic/Text';
+
+export default class SmokeDetector extends Group {
+    constructor(device) {
+        super();
+        this.model = device.model;
+        this.zlevel = device.model.zlevel;
+        this.z = device.z;
+        this._type = device.model._type;
+        this._code = device.model.code;
+        this.create();
+    }
+    create() {
+        this.grouper = new Group({
+            id: this.model.code,
+            position: [this.model.point.x, this.model.point.y]
+        });
+        this.add(this.grouper);
+        this.circle = new Circle({
+            zlevel: this.zlevel,
+            z: this.z,
+            shape: {
+                cx: this.model.width / 2,
+                cy: this.model.width / 2,
+                r: this.model.width / 2
+            },
+            style: {
+                lineWidth: 1,
+                stroke: '#0F0'
+            }
+        });
+        this.grouper.add(this.circle);
+        this.text = new Text({
+            zlevel: this.model.zlevel,
+            z: this.model.z,
+            style: {
+                x: this.model.width / 4,
+                y: 0,
+                fontWeight: 300,
+                fontSize:  this.model.width,
+                fontFamily: 'Consolas',
+                text: 'Y',
+                textFill: this.model.textFill || '#0F0',
+                textPosition: this.model.textPosition || 'inside',
+                textLineHeight: this.model.fontSize || 14
+            }
+        });
+        const boundingRect = this.text.getBoundingRect();
+        const distance = this.model.width / 2 - boundingRect.y - boundingRect.height / 2;
+        this.text.setStyle('y', distance);
+        this.grouper.add(this.text);
+    }
+    setModel(dx, dy) {
+        this.model.point.x += dx;
+        this.model.point.y += dy;
+    }
+}

src/iscs/shape/stateTable.js

@@ -0,0 +1,39 @@
+import Group from 'zrender/src/container/Group';
+const mean = {
+    slidingDoorEmergencyDoorOpenMalfunction : '滑动门&应急门开门故障',
+    slidingDoorEmergencyDoorCloseMalfunction: '滑动门&应急门关门故障',
+    slidingDoorsInterlockAllClear: '滑动门互锁解除报警',
+    emergencyControlPanelOperation: '紧急控制盘操作',
+    emergencyControlPanelOperationOpenCommand: '紧急控制盘操作开门命令',
+    emergencyControlPanelOperationCloseCommand: '紧急控制盘操作关门命令',
+    localControlPanelOperation: '就地控制盘操作',
+    localControlPanelOperationOpenCommand: '就地控制盘操作开门命令',
+    localControlPanelOperationCloseCommand: '就地控制盘操作关门命令',
+    automaticOpenOrder: '自动开门命令',
+    automaticCloseOrder: '自动开门命令',
+    allDoorsOpenInPlace: '所有门开到位',
+    allDoorsCloseInPlace: '所有门关到位',
+    systemDrivePowerFailure: '系统驱动电源故障',
+    systemControlPowerFailure: '系统控制电源故障',
+    monitorPowerFailure: '监视电源故障',
+    fieldBusFault:'现场总线故障'
+};
+
+export default class StateTable extends Group {
+    constructor(device) {
+        super();
+        this.model = device.model;
+        this.zlevel = device.model.zlevel;
+        this.z = device.model.z;
+        this._type = device.model._type;
+        this._code = device.model.code;
+        this.create();
+    }
+    cerate() {
+        // this.header =
+    }
+    setModel(dx, dy) {
+        this.model.point.x += dx;
+        this.model.point.y += dy;
+    }
+}

src/iscs/shape/temperatureDetector.js

@@ -0,0 +1,59 @@
+import Group from 'zrender/src/container/Group';
+import Circle from 'zrender/src/graphic/shape/Circle';
+import Text from 'zrender/src/graphic/Text';
+
+export default class TemperatureDetector extends Group {
+    constructor(device) {
+        super();
+        this.model = device.model;
+        this.zlevel = device.model.zlevel;
+        this.z = device.z;
+        this._type = device.model._type;
+        this._code = device.model.code;
+        this.create();
+    }
+    create() {
+        this.grouper = new Group({
+            id: this.model.code,
+            position: [this.model.point.x, this.model.point.y]
+        });
+        this.add(this.grouper);
+        this.circle = new Circle({
+            zlevel: this.zlevel,
+            z: this.z,
+            shape: {
+                cx: this.model.width / 2,
+                cy: this.model.width / 2,
+                r: this.model.width / 2
+            },
+            style: {
+                lineWidth: 1,
+                stroke: '#0F0'
+            }
+        });
+        this.grouper.add(this.circle);
+        this.text = new Text({
+            zlevel: this.model.zlevel,
+            z: this.model.z,
+            style: {
+                x: this.model.width / 4,
+                y: 0,
+                fontWeight: 300,
+                fontSize:  this.model.width,
+                fontFamily: 'Consolas',
+                text: 'W',
+                textFill: this.model.textFill || '#0F0',
+                textPosition: this.model.textPosition || 'inside',
+                textLineHeight: this.model.fontSize || 14
+            }
+        });
+        const boundingRect = this.text.getBoundingRect();
+        const distance = this.model.width / 2 - boundingRect.y - boundingRect.height / 2;
+        this.text.setStyle('y', distance);
+        this.grouper.add(this.text);
+    }
+    setModel(dx, dy) {
+        this.model.point.x += dx;
+        this.model.point.y += dy;
+    }
+}

src/iscs/shape/ticketMachine.js

@@ -0,0 +1,27 @@
+import Group from 'zrender/src/container/Group';
+import createPathSvg from './components/pathsvg';
+
+export default class TicketMachine extends Group {
+    constructor(device) {
+        super();
+        this.model = device.model;
+        this.zlevel = device.model.zlevel;
+        this.z = device.model.z;
+        this._type = device.model._type;
+        this.code = device.model.code;
+        this.create();
+    }
+    create() {
+        this.grouper = new Group({
+            id: this.model.code,
+            position: [this.model.point.x, this.model.point.y]
+        });
+        this.path = createPathSvg(this.model);
+        this.add(this.grouper);
+        this.grouper.add(this.path);
+    }
+    setModel(dx, dy) {
+        this.model.point.x += dx;
+        this.model.point.y += dy;
+    }
+}

src/iscs/shape/volumeControlDamper.js

@@ -0,0 +1,27 @@
+import Group from 'zrender/src/container/Group';
+import createPathSvg from './components/pathsvg';
+
+export default class VolumeControlDamper extends Group {
+    constructor(device) {
+        super();
+        this.model = device.model;
+        this.zlevel = device.model.zlevel;
+        this.z = device.model.z;
+        this._type = device.model._type;
+        this.code = device.model.code;
+        this.create();
+    }
+    create() {
+        this.grouper = new Group({
+            id: this.model.code,
+            position: [this.model.point.x, this.model.point.y]
+        });
+        this.path = createPathSvg(this.model);
+        this.add(this.grouper);
+        this.grouper.add(this.path);
+    }
+    setModel(dx, dy) {
+        this.model.point.x += dx;
+        this.model.point.y += dy;
+    }
+}

src/iscs/transformHandle.js

@@ -0,0 +1,90 @@
+import deviceType from './constant/deviceType';
+import {createTransform, createBoundingRect} from './utils/parser';
+
+class TransformHandle {
+    constructor(painter) {
+        this.$painter = painter;
+
+        this.parentLevel = painter.getParentLevel();
+
+        this.rect = { x: 0, y: 0, width: 0, height: 0 };
+
+        this.transform = createTransform({ scaleRate: 1, offsetX: 0, offsetY: 0 });
+    }
+
+    checkVisible(view) {
+        return createBoundingRect(view).intersect(this.rect);
+    }
+
+    revisibleView(view) {
+        if (this.checkVisible(view) || view._type === deviceType.Background) {
+            view.show();
+        } else {
+            view.hide();
+        }
+
+        view.dirty();
+    }
+
+    // 视图进行缩放/平移
+    transformView(view) {
+        if (view) {
+            view.transform = this.transform;
+            view.decomposeTransform();
+            this.revisibleView(view);
+            view.transform = '';
+        }
+    }
+
+    // 处理所有视图缩放/平移
+    transformAll() {
+        this.traverse(this.transformView, this);
+    }
+
+    // 重新计算显示图形
+    revisibleAll() {
+        this.traverse(this.revisibleView, this);
+    }
+
+    // 更新偏移量
+    updateTransform(opts, canvasSize) {
+        if (canvasSize) {
+            const elRect = this.parentLevel.getBoundingRect();
+            const zrRect = this.rect;
+            if (canvasSize.x - opts.offsetX > 0) {
+                opts.offsetX = -elRect.x;
+            }
+
+            if (canvasSize.y - opts.offsetY > 0) {
+                opts.offsetY = -elRect.y;
+            }
+
+            if (elRect.x + canvasSize.width < zrRect.width) {
+                opts.offsetX -= zrRect.width - (elRect.x + canvasSize.width);
+            }
+
+            if (elRect.y + canvasSize.height < zrRect.height) {
+                opts.offsetY -= zrRect.height - (elRect.y + canvasSize.height);
+            }
+        }
+        this.transform = createTransform(opts);
+        this.transformAll();
+    }
+
+    // 更新画布尺寸
+    updateZrSize(opts) {
+        this.rect = { x: 0, y: 0, width: opts.width, height: opts.height };
+        this.revisibleAll();
+    }
+
+    // 遍历group执行回调
+    traverse(cb, context) {
+        this.parentLevel.eachChild(level => {
+            level.eachChild((view) => {
+                cb.call(context, view);
+            }, context);
+        }, context);
+    }
+}
+
+export default TransformHandle;

src/iscs/utils/Uid.js

@@ -0,0 +1,9 @@
+export function getUID(type, list) {
+    if (list && list.length > 0) {
+        const lastCode = list[list.length - 1].code;
+        const num = lastCode.split(type + '_')[1];
+        return type + `_${num + 1}`;
+    } else {
+        return type + `_1`;
+    }
+}

src/iscs/utils/parser.js

@@ -0,0 +1,225 @@
+import * as zrUtil from 'zrender/src/core/util';
+import * as matrix from 'zrender/src/core/matrix';
+import deviceType from '../constant/deviceType';
+import deviceRender from '../constant/deviceRender';
+import store from '@/store';
+import { deepClone } from '@/utils/index';
+
+export function createTransform(opts) {
+    let transform = matrix.create();
+    transform = matrix.scale(matrix.create(), transform, [opts.scaleRate, opts.scaleRate]);
+    transform = matrix.translate(matrix.create(), transform, [-opts.offsetX, -opts.offsetY]);
+    return transform;
+}
+
+export function createBoundingRect(view) {
+    const rect = view.getBoundingRect();
+    const scale = view.scale[0];
+    const offsetX = view.position[0];
+    const offsetY = view.position[1];
+    rect.x = rect.x * scale + offsetX;
+    rect.y = rect.y * scale + offsetY;
+    rect.width = rect.width * scale;
+    rect.height = rect.height * scale;
+    return rect;
+}
+
+export function calculateDCenter(viewRect, zrbound) {
+    var dx = (zrbound.width - viewRect.width) / 2 - viewRect.x;
+    var dy = 0;
+    return { dx: dx, dy: dy };
+}
+
+export function deviceFactory(type, elem) {
+    return Object.assign({instance: null, event: null, model: Object.assign(elem, deviceRender[type])});
+}
+
+export function parser(data) {
+    var iscsDevice = {};
+    if (data) {
+        zrUtil.each(data.manualAlarmButtonList || [], elem => {
+            iscsDevice[elem.code] = deviceFactory(deviceType.ManualAlarmButton, elem);
+        }, this);
+        zrUtil.each(data.vidiconList || [], elem => {
+            iscsDevice[elem.code] = deviceFactory(deviceType.vidiconList, elem);
+        }, this);
+        zrUtil.each(data.vidiconCloudList || [], elem => {
+            iscsDevice[elem.code] = deviceFactory(deviceType.vidiconCloudList, elem);
+        }, this);
+        zrUtil.each(data.frozenPumpList || [], elem => {
+            iscsDevice[elem.code] = deviceFactory(deviceType.FrozenPump, elem);
+        }, this);
+        zrUtil.each(data.fireHydranAlarmButtonList || [], elem => {
+            iscsDevice[elem.code] = deviceFactory(deviceType.FireHydranAlarmButton, elem);
+        }, this);
+
+        zrUtil.each(data.gasFireControlList || [], elem => {
+            iscsDevice[elem.code] = deviceFactory(deviceType.GasFireControl, elem);
+        }, this);
+
+        zrUtil.each(data.smokeDetectorList || [], elem => {
+            iscsDevice[elem.code] = deviceFactory(deviceType.SmokeDetector, elem);
+        }, this);
+
+        zrUtil.each(data.temperatureDetectorList || [], elem => {
+            iscsDevice[elem.code] = deviceFactory(deviceType.TemperatureDetector, elem);
+        });
+
+        zrUtil.each(data.platformScreenDoorList || [], elem =>{
+            iscsDevice[elem.code] = deviceFactory(deviceType.PlatformScreenDoor, elem);
+        });
+
+        zrUtil.each(data.ventilatorList || [], elem =>{
+            iscsDevice[elem.code] = deviceFactory(deviceType.Ventilator, elem);
+        });
+
+        zrUtil.each(data.chillerList || [], elem =>{
+            iscsDevice[elem.code] = deviceFactory(deviceType.Chiller, elem);
+        });
+
+        zrUtil.each(data.coolTowerList || [], elem =>{
+            iscsDevice[elem.code] = deviceFactory(deviceType.CoolTower, elem);
+        });
+        zrUtil.each(data.endDoorList || [], elem =>{
+            iscsDevice[elem.code] = deviceFactory(deviceType.EndDoor, elem);
+        });
+
+        zrUtil.each(data.borderRadiusList || [], elem =>{
+            iscsDevice[elem.code] = deviceFactory(deviceType.BorderRadius, elem);
+        } );
+
+        zrUtil.each(data.airConditionerList || [], elem =>{
+            iscsDevice[elem.code] = deviceFactory(deviceType.AirConditioner, elem);
+        } );
+        zrUtil.each(data.orbitalVentilatorList || [], elem =>{
+            iscsDevice[elem.code] = deviceFactory(deviceType.OrbitalVentilator, elem);
+        } );
+        zrUtil.each(data.jetFanList || [], elem =>{
+            iscsDevice[elem.code] = deviceFactory(deviceType.JetFan, elem);
+        } );
+        zrUtil.each(data.tunnelFanList || [], elem =>{
+            iscsDevice[elem.code] = deviceFactory(deviceType.TunnelFan, elem);
+        } );
+        zrUtil.each(data.fireDamperList || [], elem =>{
+            iscsDevice[elem.code] = deviceFactory(deviceType.FireDamper, elem);
+        } );
+        zrUtil.each(data.smookProofFdList || [], elem =>{
+            iscsDevice[elem.code] = deviceFactory(deviceType.SmookProofFd, elem);
+        } );
+        zrUtil.each(data.brakeMachineList || [], elem =>{
+            iscsDevice[elem.code] = deviceFactory(deviceType.BrakeMachine, elem);
+        });
+        zrUtil.each(data.entranceGuardList || [], elem =>{
+            iscsDevice[elem.code] = deviceFactory(deviceType.EntranceGuard, elem);
+        });
+        zrUtil.each(data.ticketMachineList || [], elem =>{
+            iscsDevice[elem.code] = deviceFactory(deviceType.TicketMachine, elem);
+        });
+        zrUtil.each(data.semiAutomaticTicketMachineList || [], elem =>{
+            iscsDevice[elem.code] = deviceFactory(deviceType.SemiAutomaticTicketMachine, elem);
+        });
+        zrUtil.each(data.volumeControlDamperList || [], elem => {
+            iscsDevice[elem.code] = deviceFactory(deviceType.VolumeControlDamper, elem);
+        });
+    }
+
+    return iscsDevice;
+}
+
+function updateIscsListByDevice(iscs, name, device) {
+    var list = iscs[name];
+    if (list) {
+        const index = list.findIndex(elem => { return elem.code == device.code; });
+        if (index >= 0) {
+            device._dispose ? list.splice(index, 1) : list[index] = deepClone(device);
+        } else {
+            list.push(deepClone(device));
+        }
+    } else {
+        iscs[name] = [device];
+    }
+    return list;
+}
+
+export function updateIscsData(device) {
+    const iscsData = store.state.iscs;
+    switch (device._type) {
+    case deviceType.vidiconList :
+        updateIscsListByDevice(iscsData, 'vidiconList', device);
+        break;
+    case deviceType.vidiconCloudList :
+        updateIscsListByDevice(iscsData, 'vidiconCloudList', device);
+        break;
+    case deviceType.ManualAlarmButton :
+        updateIscsListByDevice(iscsData, 'manualAlarmButtonList', device);
+        break;
+    case deviceType.FireHydranAlarmButton:
+        updateIscsListByDevice(iscsData, 'fireHydranAlarmButtonList', device);
+        break;
+    case deviceType.GasFireControl:
+        updateIscsListByDevice(iscsData, 'gasFireControlList', device);
+        break;
+    case deviceType.SmokeDetector:
+        updateIscsListByDevice(iscsData, 'smokeDetectorList', device);
+        break;
+    case deviceType.TemperatureDetector:
+        updateIscsListByDevice(iscsData, 'temperatureDetectorList', device);
+        break;
+    case deviceType.PlatformScreenDoor:
+        updateIscsListByDevice(iscsData, 'platformScreenDoorList', device);
+        break;
+    case deviceType.FrozenPump :
+        updateIscsListByDevice(iscsData, 'frozenPumpList', device);
+        break;
+    case deviceType.Ventilator :
+        updateIscsListByDevice(iscsData, 'ventilatorList', device);
+        break;
+    case deviceType.Chiller :
+        updateIscsListByDevice(iscsData, 'chillerList', device);
+        break;
+    case deviceType.CoolTower :
+        updateIscsListByDevice(iscsData, 'coolTowerList', device);
+        break;
+    case deviceType.EndDoor:
+        updateIscsListByDevice(iscsData, 'endDoorList', device);
+        break;
+    case deviceType.BorderRadius:
+        updateIscsListByDevice(iscsData, 'borderRadiusList', device);
+        break;
+    case deviceType.BrakeMachine:
+        updateIscsListByDevice(iscsData, 'brakeMachineList', device);
+        break;
+    case deviceType.EntranceGuard:
+        updateIscsListByDevice(iscsData, 'entranceGuardList', device);
+        break;
+    case deviceType.TicketMachine:
+        updateIscsListByDevice(iscsData, 'ticketMachineList', device);
+        break;
+    case deviceType.SemiAutomaticTicketMachine:
+        updateIscsListByDevice(iscsData, 'semiAutomaticTicketMachineList', device);
+        break;
+    case deviceType.AirConditioner:
+        updateIscsListByDevice(iscsData, 'airConditionerList', device);
+        break;
+    case deviceType.OrbitalVentilator:
+        updateIscsListByDevice(iscsData, 'orbitalVentilatorList', device);
+        break;
+    case deviceType.JetFan:
+        updateIscsListByDevice(iscsData, 'jetFanList', device);
+        break;
+    case deviceType.TunnelFan:
+        updateIscsListByDevice(iscsData, 'tunnelFanList', device);
+        break;
+    case deviceType.FireDamper:
+        updateIscsListByDevice(iscsData, 'fireDamperList', device);
+        break;
+    case deviceType.SmookProofFd:
+        updateIscsListByDevice(iscsData, 'smookProofFdList', device);
+        break;
+    case deviceType.VolumeControlDamper:
+        updateIscsListByDevice(iscsData, 'volumeControlDamperList', device);
+        break;
+    }
+
+    store.dispatch('iscs/setIscsData', iscsData);
+}

src/jmapNew/theme/chengdu_01/planConvert.js

@@ -14,10 +14,10 @@ export default {
     ExcelConfig: {
         beginRow: 1,
         beginCol: 0,
-        fieldNum: 8,
+        fieldNum: 10,
         sepField: '车次',
         columns: {
-            '车站名称': { key: 'stationName', formatter: (val) => { return val; } },
+            '车站名': { key: 'stationName', formatter: (val) => { return val; } },
             '到点': { key: 'arriveTime', formatter: (val) => { return val; } },
             '发点': { key: 'departureTime', formatter: (val) => { return val; } }
         }
@@ -25,31 +25,40 @@ export default {
 
     /** 解析exal数据转换为Json后台数据*/
     importData(Sheet, JsonData) {
-        var dataList = convertSheetToList(Sheet, false);
+        var dataList = convertSheetToList(Sheet, true);
         var needList = Object.keys(this.ExcelConfig.columns);
-        if (dataList && dataList.length) {
-            for (var rowIndex = this.ExcelConfig.beginRow; rowIndex < dataList.length; rowIndex += 1) {
-                for (var colIndex = this.ExcelConfig.beginCol; colIndex < dataList[this.ExcelConfig.beginCol].length; colIndex += this.ExcelConfig.fieldNum + 1) {
-                    var tripNew, tripObj;
-                    var stationObj = {};
 
-                    tripNew = tripObj = { code: '', arrivalList: [] };
+        if (dataList && dataList.length) {
+            for (var colIndex = this.ExcelConfig.beginCol; colIndex < dataList.length; colIndex += this.ExcelConfig.fieldNum + 1) {
+                var isContinue = true;
+                var tripObj = { code: '', arrivalList: [] };
+
+                for (var rowIndex = this.ExcelConfig.beginRow; isContinue; rowIndex += 1) {
+                    isContinue = false;
+
+                    var stationObj = {};
                     for (var index = 0; index < this.ExcelConfig.fieldNum; index += 1) {
-                        var title = dataList[0][colIndex + index];
+                        if (dataList[colIndex + index]) {
-                        var value = dataList[rowIndex][colIndex + index];
+                            var title = dataList[colIndex + index][0];
+                            var value = dataList[colIndex + index][rowIndex];
 
                             if (title && value) {
+                                // 数据列解析
+                                isContinue = true;
                                 var titleStr = `${title}`.trim();
                                 var valueStr = `${value}`.trim();
 
-                            if (titleStr.includes(this.ExcelConfig.sepField)) {
+                                if (titleStr == this.ExcelConfig.sepField) {
-                                tripObj.code = valueStr;
+                                    if (tripObj.code) {
-                                JsonData.forEach(elem => {
+                                        const length = tripObj.arrivalList.length;
-                                    if (elem.code == valueStr) {
+                                        if (length == 1) {
-                                        tripObj = elem;
+                                            tripObj.arrivalList[0]['flag'] = true;
-                                        return;
+                                        }
+                                        JsonData.push(tripObj);
+                                        tripObj = { code: valueStr, arrivalList: [] };
+                                    } else {
+                                        tripObj.code = valueStr;
                                     }
-                                });
                                 }
 
                                 // 取需要的字段
@@ -58,11 +67,21 @@ export default {
                                 }
                             }
                         }
-
-                    tripObj.arrivalList.push(stationObj);
-                    if (tripObj.code && tripObj == tripNew) {
-                        JsonData.push(tripObj);
                     }
+
+                    // 添加字段值
+                    if (Object.keys(stationObj).length) {
+                        tripObj.arrivalList.push(stationObj);
+                    }
+                }
+
+                // 添加最后那条没有车次的记录
+                if (tripObj.code) {
+                    const length = tripObj.arrivalList.length;
+                    if (length) {
+                        tripObj.arrivalList[length - 1]['flag'] = true;
+                    }
+                    JsonData.push(tripObj);
                 }
             }
         }
@@ -78,6 +97,7 @@ export default {
             /** 按服务遍历数据*/
             data.serviceNumberDataList.forEach((service) => {
                 /** 按车次遍历数据*/
+                var isBackup = true;
                 var opt = { name: '', markPointData: [], data: [] };
                 if (service.tripNumberDataList && service.tripNumberDataList.length) {
                     service.tripNumberDataList.forEach((train, j) => {
@@ -132,10 +152,12 @@ export default {
                                 opt = { name: '', markPointData: [], data: [] };
                             }
                         }
+
+                        isBackup = train.backup;
                     });
 
                     // 不是备用车，按服务添加线
-                    if (!service.backup) {
+                    if (!isBackup) {
                         /** 创建一条完成的服务数据*/
                         var model = createSeriesModel(opt, Object.assign({ color: hexColor.toCreate() }, lineStyle));
                         if (model) {
@@ -249,11 +271,11 @@ export default {
 
     /** 格式化y轴数据*/
     computedFormatYAxis(stations, params) {
-        var yText = '0m';
+        var yText = '';
 
         stations.forEach(elem => {
             if (elem.kmRange < parseInt(params.value) / this.CoordMultiple - this.EdgeHeight) {
-                yText = Math.floor(elem.kmRange) + 'm';
+                yText = elem.kmRange + 'm';
             }
         });
 

src/router/index.js

@@ -33,10 +33,13 @@ const ExistingSimulation = () => import('@/views/system/existingSimulation/index
 const CacheControl = () => import('@/views/system/cacheControl/index');
 const SystemGenerate = () => import('@/views/system/systemGenerate/index');
 const IbpDraw = () => import('@/views/system/ibpDraw/index');
+const IscsDraw = () => import('@/views/system/iscsDraw/index');
+const IscsDesign = () => import('@/views/system/iscsDesign/index');
 const News = () => import('@/views/system/news/index');
 const CommandDictionary = () => import('@/views/system/commandDictionary/index');
 const CommandDictionaryDetail = () => import('@/views/system/commandDictionary/edit');
 const configLine = () => import('@/views/system/configLine/index');
+const IscsSystem = () => import('@/views/system/iscsSystem/index');
 
 const Mapedit = () => import('@/views/mapdraft/index');
 
@@ -767,6 +770,27 @@ export const asyncRouter = [
                     i18n: 'router.ibpDraw'
                 }
             },
+            {
+                path:'iscs/design',
+                component: IscsDesign,
+                meta: {
+                    i18n: 'router.iscsDraw'
+                },
+                children: [
+                    {
+                        path: 'edit/:id/:mode',
+                        component: IscsDraw,
+                        hidden: true
+                    }
+                ]
+            },
+            {
+                path: 'iscs/system',
+                component: IscsSystem,
+                meta: {
+                    i18n: 'router.iscsSystem'
+                }
+            },
             {
                 path: 'dictionary',
                 component: Dictionary,

src/store/index.js

@@ -15,6 +15,7 @@ import socket from './modules/socket';
 import scriptRecord from './modules/scriptRecord';
 import ibp from './modules/ibp';
 import order from './modules/order';
+import iscs from './modules/iscs';
 
 import getters from './getters';
 
@@ -36,7 +37,8 @@ const store = new Vuex.Store({
         socket,
         scriptRecord,
         ibp,
-        order
+        order,
+        iscs
     },
     getters
 });

src/store/modules/iscs.js

@@ -0,0 +1,172 @@
+import Vue from 'vue';
+import {updateIscsData } from '@/iscs/utils/parser';
+/**
+ * iscs状态数据
+ */
+const iscs = {
+    namespaced: true,
+
+    state: {
+        iscs: null, 				// 数据
+        iscsDevice: {},			// 解析后的地图数据
+        iscsList: {}, 			// 数据列表
+        iscsIdList: {},			// 数据列表(以id为标识)
+        updateDeviceData: {}, // 修改的数据
+        rightClickCount: 0 // 右键点击设备
+    },
+
+    getters: {
+        iscsList: (state) => {
+            return state.iscsList;
+        },
+        iscs: (state) => {
+            return state.iscs;
+        },
+        version: (state) => {
+            if (state.iscs) {
+                return state.iscs.version;
+            } else {
+                return null;
+            }
+        },
+        updateDeviceData: (state) => {
+            return state.updateDeviceData;
+        },
+        vidiconList: (state) => {
+            if (state.iscs && state.iscs.vidiconList) {
+                return state.iscs.vidiconList;
+            } else {
+                return [];
+            }
+        },
+        vidiconCloudList: (state) => {
+            if (state.iscs && state.iscs.vidiconCloudList) {
+                return state.iscs.vidiconCloudList;
+            } else {
+                return [];
+            }
+        },
+        frozenPumpList:(state)=>{
+            if (state.iscs && state.iscs.frozenPumpList) {
+                return state.iscs.frozenPumpList;
+            } else {
+                return [];
+            }
+        },
+        airConditionerList:(state)=>{
+            if (state.iscs && state.iscs.airConditionerList) {
+                return state.iscs.airConditionerList;
+            } else {
+                return [];
+            }
+        },
+        tunnelFanList:(state)=>{
+            if (state.iscs && state.iscs.tunnelFanList) {
+                return state.iscs.tunnelFanList;
+            } else {
+                return [];
+            }
+        },
+        orbitalVentilatorList:(state)=>{
+            if (state.iscs && state.iscs.orbitalVentilatorList) {
+                return state.iscs.orbitalVentilatorList;
+            } else {
+                return [];
+            }
+        },
+        smookProofFdList:(state)=>{
+            if (state.iscs && state.iscs.smookProofFdList) {
+                return state.iscs.smookProofFdList;
+            } else {
+                return [];
+            }
+        },
+        chillerList:(state)=>{
+            if (state.iscs && state.iscs.chillerList) {
+                return state.iscs.chillerList;
+            } else {
+                return [];
+            }
+        },
+        coolTowerList:(state)=>{
+            if (state.iscs && state.iscs.coolTowerList) {
+                return state.iscs.coolTowerList;
+            } else {
+                return [];
+            }
+        },
+        fireDamperList:(state)=>{
+            if (state.iscs && state.iscs.fireDamperList) {
+                return state.iscs.fireDamperList;
+            } else {
+                return [];
+            }
+        },
+        jetFanList:(state)=>{
+            if (state.iscs && state.iscs.jetFanList) {
+                return state.iscs.jetFanList;
+            } else {
+                return [];
+            }
+        },
+        ventilatorList:(state)=>{
+            if (state.iscs && state.iscs.ventilatorList) {
+                return state.iscs.ventilatorList;
+            } else {
+                return [];
+            }
+        }
+    },
+
+    mutations: {
+        iscsRender: (state, devices) => {
+            if (devices && devices.length) {
+                if (state.iscs) {
+                    devices.forEach(elem => { updateIscsData(elem); });
+                }
+                if (Vue.prototype.$iscs) {
+                    Vue.prototype.$iscs.render(devices);
+                }
+            }
+        },
+        setIscsData: (state, iscs) => {
+            state.iscs = iscs;
+        },
+        setUpdateDeviceData: (state, model) => {
+            state.rightClickCount++;
+            state.updateDeviceData = model;
+        },
+        deleteIscsDevices: (state, devices) => {
+            Vue.prototype.$iscs && Vue.prototype.$iscs.render(devices);
+        }
+    },
+
+    actions: {
+        setIscsData: ({ commit }, iscs) => {
+            commit('setIscsData', iscs);
+        },
+        updateIscsDevices: ({ commit }, models) => {
+            return new Promise((resolve) => {
+                if (!(models instanceof Array)) {
+                    models = [models];
+                }
+
+                commit('iscsRender', models);
+                resolve(models);
+
+            });
+        },
+        setUpdateDeviceData: ({ commit }, models) => {
+            commit('setUpdateDeviceData', models);
+        },
+        deleteIscsDevices: ({ commit }, models ) => {
+            models = Object.assign(models, {_dispose: true});
+            if (!(models instanceof Array)) {
+                models = [models];
+            }
+            commit('deleteIscsDevices', models);
+        }
+    }
+};
+
+export default iscs;

src/views/demonstration/deomonList/index.vue

@@ -40,8 +40,10 @@
 
 <script>
 import { getjointTrainList, getjointTraining, putJointTrainingSimulationEntrance } from '@/api/chat';
+import { getSessionStorage } from '@/utils/auth';
 import { getPublishMapInfo } from '@/api/jmap/map';
 import { launchFullscreen } from '@/utils/screen';
+import { ProjectCode } from '@/scripts/ConstDic';
 
 export default {
     name: 'DeomonList',
@@ -89,7 +91,8 @@ export default {
                 this.pageLoading = true;
                 this.dialogShow = true;
                 this.loading = false;
-                const res = await getjointTrainList();
+                const project = getSessionStorage('project');
+                const res = await getjointTrainList({projectCode:ProjectCode[project]});
                 this.trainingList = res.data || [];
                 this.$nextTick(() => {
                     var training = this.trainingList[0] || {};

src/views/iscsSystem/index.vue

@@ -0,0 +1,209 @@
+<template>
+  <div>
+    <div :id="iscsId" v-loading="loading" :style="{ width: this.canvasWidth +'px', height: this.canvasHeight +'px',background:'#000' }" class="iscs-canvas" />
+    <el-button v-if="showBackButton" class="iscs-button" type="primary" @click="back">{{ $t('global.back') }}</el-button>
+  </div>
+</template>
+
+<script>
+import Vue from 'vue';
+import Iscs from '@/iscs/iscs';
+import { parser } from '@/iscs/utils/parser';
+import { mapGetters } from 'vuex';
+import { exitFullscreen } from '@/utils/screen';
+import { putJointTrainingSimulationUser } from '@/api/chat';
+import { handlerIscsEvent } from '@/api/simulation';
+import { IscsOperation } from '@/scripts/ConstDic';
+
+export default {
+    name: 'Iscs',
+    props: {
+        size: {
+            type: Object,
+            default() {
+                return null;
+            }
+        }
+    },
+    data() {
+        return {
+            dataZoom: {
+                offsetX: '0',
+                offsetY: '0',
+                scaleRate: '1'
+            },
+            config: {
+                scaleRate: '1',
+                origin: {
+                    x: 0,
+                    y: 0
+                }
+            },
+            showBackButton: true,
+            initTime: '',
+            started: false,
+            loading: false,
+            stationCode: '',
+            banUpOpenScreenDoor: false,
+            banDownOpenScreenDoor: false
+        };
+    },
+    computed: {
+        ...mapGetters([
+            'canvasWidth',
+            'canvasHeight'
+        ]),
+        iscsId() {
+            return ['iscs', (Math.random().toFixed(5)) * 100000].join('_');
+        },
+        width() {
+            return this.$store.state.config.width;
+        },
+        height() {
+            return this.$store.state.config.height;
+        }
+    },
+    watch: {
+        '$store.state.config.canvasSizeCount': function (val) {
+            this.reSize();
+        },
+        '$store.state.app.windowSizeCount': function() {
+            this.setWindowSize();
+        },
+        '$store.state.socket.equipmentStatus': function (val) {
+            if (val.length) {
+                this.statusMessage(val);
+            }
+        }
+    },
+    mounted() {
+    },
+    beforeDestroy() {
+        this.iscsDestroy();
+    },
+    methods: {
+        show () {
+            document.getElementById(this.iscsId).oncontextmenu = function (e) {
+                return false;
+            };
+            this.iscsDestroy();
+            this.loading = true;
+            const data = {};
+            this.$iscs = new Iscs({
+                dom: document.getElementById(this.iscsId),
+                config: {
+                    renderer: 'canvas',
+                    width: this.width,
+                    height: this.height
+                },
+                options: {
+                    scaleRate: 1,
+                    offsetX: 0,
+                    offsetY: 0
+                },
+                methods: {
+                    viewLoaded: this.handleViewLoaded
+                }
+            });
+            Vue.prototype.$iscs = this.$iscs;
+            this.$iscs.on('contextmenu', this.onContextMenu, this);
+            if (this.$route.query.group) {
+                this.$iscs.on('selected', this.onSelected, this);
+            }
+            this.setIscs(data, {});
+            this.$store.dispatch('iscs/setIscsData', {});
+            window.document.oncontextmenu = function () {
+                return false;
+            };
+        },
+        setIscs(data, oldData) {
+            this.$iscs.setIscs(oldData, data);
+        },
+        // 点击选择事件
+        onSelected(em) {
+            if (em.deviceModel.mean) {
+                switch (IscsOperation[em.deviceModel.mean].event) {
+                case 'UpHoldTrain':
+                case 'UpCancelHoldTrain':
+                case 'DownHoldTrain':
+                case 'DownCancelHoldTrain':
+                    handlerIscsEvent(this.$route.query.group, {operate:IscsOperation[em.deviceModel.mean].operate, stationCode:this.stationCode});
+                    break;
+                case 'BanUpOpenScreenDoor':
+                    this.banUpOpenScreenDoor = !this.banUpOpenScreenDoor;
+                    break;
+                case 'BanDownOpenScreenDoor':
+                    this.banDownOpenScreenDoor = !this.banDownOpenScreenDoor;
+                    break;
+                case 'UpOpenScreenDoor':
+                    this.openScreenDoor(this.banUpOpenScreenDoor, IscsOperation[em.deviceModel.mean].operate);
+                    break;
+                case 'DownOpenScreenDoor':
+                    this.openScreenDoor(this.banDownOpenScreenDoor, IscsOperation[em.deviceModel.mean].operate);
+                    break;
+                }
+            }
+        },
+        openScreenDoor(flag, operate) {
+            if (flag) {
+                handlerIscsEvent(this.$route.query.group, {operate: operate, stationCode:this.stationCode});
+            }
+        },
+        // 右键点击事件
+        onContextMenu(em) {
+            this.$store.dispatch('iscs/setUpdateDeviceData', em.eventTarget.model);
+        },
+        // 绘图时调用，元素可拖拽
+        drawIscsInit() {
+            this.$iscs && this.$iscs.drawIscsInit();
+            this.showBackButton = false;
+        },
+        reSize() {
+            this.$nextTick(() => {
+                this.width = this.$store.state.config.width;
+                this.height = this.$store.state.config.height;
+                this.$iscs && this.$iscs.resize({ width: this.width, height: this.height });
+            });
+        },
+        setWindowSize() {
+            this.$nextTick(() => {
+                const width = this.size ? this.size.width : this.$store.state.app.width;
+                const height = this.size ? this.size.height : this.$store.state.app.height;
+                this.$store.dispatch('config/resize', { width: width, height: height });
+            });
+        },
+        back() {
+            this.group = this.$route.query.group;
+            this.$store.dispatch('training/over').then(() => {
+                putJointTrainingSimulationUser(this.group).then(() => {
+                    this.$router.replace({ path: `/trainroom`, query: { group: this.group, lineCode:this.$route.query.lineCode } });
+                    exitFullscreen();
+                });
+            });
+        },
+        iscsDestroy() {
+            if (this.$iscs) {
+                this.$iscs.dispose();
+                this.$iscs = '';
+                Vue.prototype.$iscs = '';
+            }
+        },
+        handleViewLoaded() {
+            this.loading = false;
+        },
+        statusMessage(val) {
+            this.$iscs && this.$iscs.setDeviceStatus(val);
+        }
+    }
+};
+</script>
+<style rel="stylesheet/scss" lang="scss" scoped>
+    .iscs-button{
+        position: absolute;
+        float: right;
+        right: 20px;
+        bottom: 15px;
+    }
+    .iscs-canvas{
+    }
+</style>

src/views/jointTraining/menuDemon.vue

@@ -2,7 +2,7 @@
   <div>
     <div class="display-draft">
       <el-button-group>
-        <el-button v-if="isProject" type="primary" @click="setRelDevice">{{ $t('joinTraining.connectRealDevices') }}</el-button>
+        <el-button v-if="isShowRelDevice" type="primary" @click="setRelDevice">{{ $t('joinTraining.connectRealDevices') }}</el-button>
         <el-button v-if="isDriver" type="jumpjlmap3d" @click="jumpjlmap3d">{{ $t('joinTraining.driverPerspective') }}</el-button>
         <template v-if="isAdmin">
           <el-button type="success" :disabled="isDisable" @click="selectBeginTime">{{ $t('joinTraining.drivingByPlan') }}</el-button>
@@ -89,8 +89,8 @@ export default {
         isBigScreen() {
             return this.userRole == 'BigScreen';
         },
-        isProject() {
+        isShowRelDevice() {
-            return getSessionStorage('project').endsWith('gzb');
+            return getSessionStorage('project').endsWith('gzb') && this.userRole === 'Attendant';
         }
     },
     watch: {

src/views/login/floatPart.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="content_box">
     <span>本产品基于长安玖琏</span><span v-if="!project.startsWith('design')">城市轨道交通实训云平台设计开发</span><span v-else>城市轨道交通设计云平台设计开发</span>
-    <br><span>实训平台网址：</span><a target="_blank" href="https://joylink.club" style="color: #33F;text-decoration:underline;">https://joylink.club</a>
+    <br><span>实训平台网址：</span><a target="_blank" href="https://joylink.club/login" style="color: #33F;text-decoration:underline;">https://joylink.club</a>
-    <br><span>设计平台网址：</span><a target="_blank" href="https://joylink.club" style="color: #33F;text-decoration:underline;">https://joylink.club/design</a>
+    <br><span>设计平台网址：</span><a target="_blank" href="https://joylink.club/design/login" style="color: #33F;text-decoration:underline;">https://joylink.club/design</a>
   </div>
 </template>
 

src/views/newMap/displayNew/designIndex.vue

@@ -58,7 +58,7 @@ import AddQuest from './demon/addQuest';
 import Scheduling from './demon/scheduling';
 import { mapGetters } from 'vuex';
 import { setGoodsTryUse } from '@/api/management/goods';
-import { runDiagramQuit, getSimulationInfo } from '@/api/simulation';
+import { clearSimulation, getSimulationInfo } from '@/api/simulation';
 import { OperateMode, TrainingMode } from '@/scripts/ConstDic';
 import { checkLoginLine } from '@/api/login';
 import { loadMapDataById } from '@/utils/loaddata';
@@ -426,7 +426,7 @@ export default {
 
         // 销毁仿真
         async quit() {
-            await runDiagramQuit(this.group);
+            await clearSimulation(this.group);
             await this.$store.dispatch('training/over');
         },
         // 仿真错误时，被动退出时调用

src/views/newMap/displayNew/index.vue

@@ -57,7 +57,7 @@ import Scheduling from './demon/scheduling';
 import { mapGetters } from 'vuex';
 import { getTrainingDetail, getTrainingStepsDetail } from '@/api/jmap/training';
 import { setGoodsTryUse } from '@/api/management/goods';
-import { runDiagramQuit, loadScript, getSimulationInfoNew } from '@/api/simulation';
+import { clearSimulation, loadScript, getSimulationInfoNew } from '@/api/simulation';
 import { OperateMode, TrainingMode } from '@/scripts/ConstDic';
 import { checkLoginLine } from '@/api/login';
 import { loadNewMapDataByGroup } from '@/utils/loaddata';
@@ -428,7 +428,7 @@ export default {
 
         // 销毁仿真
         async quit() {
-            await runDiagramQuit(this.group);
+            await clearSimulation(this.group);
             await this.$store.dispatch('training/over');
         },
         // 仿真错误时，被动退出时调用

src/views/newMap/displayNew/menuDemon.vue

@@ -32,10 +32,11 @@
 import SetTime from './demon/setTime';
 import { Notification } from 'element-ui';
 import { getGoodsTryUse } from '@/api/management/goods';
-import { runDiagramStart, runDiagramOver, runDiagramGetTime } from '@/api/simulation';
+import { ranAsPlan, runDiagramOver, clearSimulation, runDiagramGetTime } from '@/api/simulation';
 import { PermissionType } from '@/scripts/ConstDic';
 import { getCountTime } from '@/utils/index';
 import { runDiagramIsStart, runDiagramQuit, quitScript } from '@/api/simulation';
+import { mapGetters } from 'vuex';
 // import { timeFormat } from '@/utils/date';
 // import { getToken } from '@/utils/auth';
 
@@ -81,6 +82,9 @@ export default {
         };
     },
     computed: {
+        ...mapGetters('map', [
+            'trainList'
+        ]),
         isShowQuest() {
             return this.questId;
         },
@@ -158,13 +162,23 @@ export default {
         },
         start(model) {
             this.isDisable = true;
-            runDiagramStart(model, this.group).then(res => {
+            const data = {
+                time: model.initTime,
+                loadNumber:this.trainList.length
+            };
+            ranAsPlan(data, this.group).then(res => {
                 this.$store.dispatch('training/simulationStart').then(() => {
                     this.$store.dispatch('training/setInitTime', +new Date(`${new Date().getFullYear()} ${model.initTime}`));
                 });
             }).catch(error => {
                 this.isDisable = false;
-                this.$messageBox(error.message + '，' + this.$t('display.demon.startSimulationFail'));
+                if (error.code == '5001') {
+                    this.$messageBox(this.$t('error.mapDataError') + '，' + this.$t('error.startSimulationFailed'));
+                } else if (error.code == '5002') {
+                    this.$messageBox(this.$t('error.runningChartDataError') + ',' + this.$t('error.startSimulationFailed'));
+                } else if (error.code == '5003') {
+                    this.$messageBox(this.$t('error.runningChartIsNotLoaded') + ',' + this.$t('error.startSimulationFailed'));
+                }
             });
         },
         end() {
@@ -190,7 +204,7 @@ export default {
             });
         },
         async back() {
-            await runDiagramQuit(this.group);
+            await clearSimulation(this.group);
             this.$store.dispatch('training/over').then(() => {
                 history.go(-1);
                 Notification.closeAll();

src/views/newMap/displayNew/menuScript.vue

@@ -20,7 +20,7 @@
 <script>
 import SetTime from './demon/setTime';
 import { Notification } from 'element-ui';
-import { runDiagramStart, runDiagramOver, runDiagramGetTime } from '@/api/simulation';
+import { ranAsPlan, runDiagramOver, runDiagramGetTime } from '@/api/simulation';
 import { runDiagramIsStart } from '@/api/simulation';
 import { timeFormat } from '@/utils/date';
 import { EventBus } from '@/scripts/event-bus';
@@ -98,13 +98,23 @@ export default {
         },
         start(model) {
             this.isDisable = true;
-            runDiagramStart(model, this.group).then(res => {
+            const data = {
+                time: model.initTime,
+                loadNumber:this.trainList.length
+            };
+            ranAsPlan(data, this.group).then(res => {
                 this.$store.dispatch('training/simulationStart').then(() => {
                     this.$store.dispatch('training/setInitTime', +new Date(`${new Date().getFullYear()} ${model.initTime}`));
                 });
-            }).catch(() => {
+            }).catch((error) => {
                 this.isDisable = false;
-                this.$messageBox('开始仿真失败，请返回重试');
+                if (error.code == '5001') {
+                    this.$messageBox(this.$t('error.mapDataError') + '，' + this.$t('error.startSimulationFailed'));
+                } else if (error.code == '5002') {
+                    this.$messageBox(this.$t('error.runningChartDataError') + ',' + this.$t('error.startSimulationFailed'));
+                } else if (error.code == '5003') {
+                    this.$messageBox(this.$t('error.runningChartIsNotLoaded') + ',' + this.$t('error.startSimulationFailed'));
+                }
             });
         },
         end() {

src/views/newMap/jointTrainingNew/menuDemon.vue

@@ -20,7 +20,7 @@
 <script>
 import QrCode from '@/components/QrCode';
 import SetTime from '@/views/display/demon/setTime';
-import { runDiagramIsStart, runDiagramStart, runDiagramOver, runDiagramGetTime } from '@/api/simulation';
+import { runDiagramIsStart, ranAsPlan, runDiagramOver, runDiagramGetTime } from '@/api/simulation';
 import { exitFullscreen } from '@/utils/screen';
 import { putJointTrainingSimulationUser } from '@/api/chat';
 import { timeFormat } from '@/utils/date';
@@ -287,13 +287,23 @@ export default {
         },
         start(model) {
             this.isDisable = true;
-            runDiagramStart(model, this.group).then(res => {
+            const data = {
+                time: model.initTime,
+                loadNumber:this.trainList.length
+            };
+            ranAsPlan(data, this.group).then(res => {
                 this.$store.dispatch('training/simulationStart').then(() => {
                     this.$store.dispatch('training/setInitTime', +new Date(`${new Date().getFullYear()} ${model.initTime}`));
                 });
-            }).catch(() => {
+            }).catch((error) => {
                 this.isDisable = false;
-                this.$messageBox(this.$t('error.startSimulationFailed'));
+                if (error.code == '5001') {
+                    this.$messageBox(this.$t('error.mapDataError') + '，' + this.$t('error.startSimulationFailed'));
+                } else if (error.code == '5002') {
+                    this.$messageBox(this.$t('error.runningChartDataError') + ',' + this.$t('error.startSimulationFailed'));
+                } else if (error.code == '5003') {
+                    this.$messageBox(this.$t('error.runningChartIsNotLoaded') + ',' + this.$t('error.startSimulationFailed'));
+                }
             });
         },
         end() {

src/views/system/configLine/config.vue

@@ -4,10 +4,20 @@
       <div style="height: 370px; overflow: auto;">
         <el-table :data="tableData" style="width: 100%;">
           <el-table-column prop="configKey" label="key" />
-          <el-table-column prop="configValue" label="value" />
+          <el-table-column prop="configValue" label="value">
-          <el-table-column prop="description" label="描述" />
+            <template slot-scope="scope">
-          <el-table-column>
+              <div v-if="!scope.row.boolean">
-            <template slot="header" slot-scope="scope">
+                <div v-if="!scope.row.focus" style="width: 100%;cursor: pointer;" @click="scope.row.focus = true">{{ scope.row.configValue }}</div>
+                <el-input v-if="scope.row.focus" v-model="scope.row.configValue" style="width: 100%" @blur="scope.row.focus = false" />
+              </div>
+              <div v-if="scope.row.boolean">
+                <el-checkbox v-model="scope.row.configValue">{{ scope.row.configValue }}</el-checkbox>
+              </div>
+            </template>
+          </el-table-column>
+          <!-- <el-table-column prop="description" label="描述" /> -->
+          <!-- <el-table-column>
+            <template slot="header">
               <div class="flex_box">
                 <span>操作</span>
                 <i class="el-icon-circle-plus-outline icon_font" @click="addModel(scope)" />
@@ -17,7 +27,7 @@
               <el-button type="text" size="small" @click="editModel(scope.row, scope.$index)">编辑</el-button>
               <el-button type="text" size="small" @click="delModel(scope.row, scope.$index)">删除</el-button>
             </template>
-          </el-table-column>
+          </el-table-column> -->
         </el-table>
       </div>
       <span slot="footer" class="dialog-footer">
@@ -25,18 +35,18 @@
         <el-button @click="dialogVisible = false">{{ $t('global.cancel') }}</el-button>
       </span>
     </el-dialog>
-    <edit-config ref="addConfig" type="ADD" @create="createModel" />
+    <!-- <edit-config ref="addConfig" type="ADD" @create="createModel" />
-    <edit-config ref="editConfig" type="EDIT" @update="updateModel" />
+    <edit-config ref="editConfig" type="EDIT" @update="updateModel" /> -->
   </div>
 </template>
 
 <script>
 import { getRealLineConfigList, putRealLineConfig } from '@/api/management/mapline';
-import EditConfig from './editConfig';
+// import EditConfig from './editConfig';
 export default {
     name: 'Config',
     components: {
-        EditConfig
+        // EditConfig
     },
     props: {
         type: {
@@ -49,7 +59,9 @@ export default {
             dialogVisible: false,
             index: 0,
             id: '',
-            tableData: []
+            tableData: [],
+            focus: false,
+            icloudList: ['lockFirst']
         };
     },
     computed: {
@@ -67,7 +79,24 @@ export default {
             try {
                 const res = await getRealLineConfigList(this.id);
                 if (res.data) {
-                    this.tableData = res.data;
+                    const keys = Object.keys(res.data);
+                    this.tableData = [];
+                    keys.forEach(key => {
+                        // let value = '';
+                        let boolean = false;
+                        if (this.icloudList.indexOf(key) >= 0) {
+                            // value = JSON.stringify(res.data[key]);
+                            boolean = true;
+                        } else {
+                            // value = res.data[key];
+                        }
+                        const param = {
+                            configKey: key,
+                            configValue: res.data[key],
+                            boolean: boolean
+                        };
+                        this.tableData.push(param);
+                    });
                 } else {
                     this.tableData = [];
                 }
@@ -105,7 +134,15 @@ export default {
             this.tableData.splice(this.index, 1, data);
         },
         save() {
-            putRealLineConfig(this.id, this.tableData).then(res => {
+            const param = {};
+            this.tableData.forEach(item => {
+                param[item.configKey] = item.configValue;
+                // if (item.boolean) {
+                //     const value = item.configValue == 'true';
+                //     param[item.configKey] = value;
+                // }
+            });
+            putRealLineConfig(this.id, param).then(res => {
                 this.$message.success(`保存配置项成功!`);
                 this.dialogVisible = false;
             }).catch(() => {

src/views/system/configLine/editConfig.vue

@@ -23,7 +23,8 @@ export default {
             formModel: {
                 configKey: '',
                 configValue: '',
-                description: ''
+                boolean: false
+                // description: ''
             }
         };
     },
@@ -32,25 +33,25 @@ export default {
             const form = {
                 labelWidth: '100px',
                 items: [
-                    { prop: 'configKey', label: 'key:', type: 'text' },
+                    { prop: 'configKey', label: 'key:', type: 'text' }
-                    { prop: 'configValue', label: 'value:', type: 'text' },
+                    // { prop: 'description', label: '描述:', type: 'text' }
-                    { prop: 'description', label: '描述:', type: 'text' }
                 ]
             };
             return form;
         },
         rules() {
-            return {
+            const rules = {
-                key: [
+                configKey: [
                     { required: true, message: '请输入key值', trigger: 'blur' }
                 ],
-                value: [
+                configValue: [
                     { required: true, message: '请输入value值', trigger: 'blur' }
-                ],
-                remarks: [
-                    { required: true, message: '请输入描述', trigger: 'blur' }
                 ]
+                // remarks: [
+                //     { required: true, message: '请输入描述', trigger: 'blur' }
+                // ]
             };
+            return rules;
         },
         title() {
             if (this.type === 'ADD') {
@@ -63,11 +64,12 @@ export default {
     methods: {
         show(row) {
             this.dialogVisible = true;
-            if (row && row.id) {
+            if (row && row.configKey) {
                 this.formModel = {
                     configKey: row.configKey,
-                    configValue: row.configValue,
+                    configValue: JSON.parse(row.configValue),
-                    description: row.description
+                    boolean: row.boolean
+                    // description: row.description
                 };
             }
         },
@@ -83,12 +85,9 @@ export default {
         },
         buildModel(data) {
             return {
-                configEg: data.configEg,
                 configKey: data.configKey,
-                configValue: data.configValue,
+                configValue: data.boolean ? JSON.stringify(data.configValue) : data.configValue,
-                description: data.description,
+                boolean: data.boolean
-                id: data.id,
-                lineCode: data.lineCode
             };
         },
         create() {
@@ -102,8 +101,8 @@ export default {
         handleClose(done) {
             this.formModel = {
                 configKey: '',
-                configValue: '',
+                configValue: ''
-                description: ''
+                // description: ''
             };
             this.$refs.dataform.resetForm();
             if (done) {

src/views/system/iscsDesign/demonList.vue

@@ -0,0 +1,198 @@
+<template>
+  <div v-loading="loading" class="joylink-card map-list-main">
+    <div class="clearfix">
+      <span>我的iscs系统列表</span>
+    </div>
+    <div class="text_item">
+      <el-input v-model="filterText" :placeholder="this.$t('global.filteringKeywords')" clearable />
+      <div class="tree_box">
+        <el-tree ref="tree" :data="treeList" node-key="id" :props="defaultProps" highlight-current :span="22" :filter-node-method="filterNode" @node-click="clickEvent" @node-contextmenu="showContextMenu">
+          <span slot-scope="{ node:tnode, data }">
+            <span class="el-icon-tickets" :style="{color: data.valid ? 'green':''}" />
+            <span>&nbsp;{{ tnode.label }}</span>
+          </span>
+        </el-tree>
+      </div>
+      <div class="buttonList">
+        <el-button size="small" type="primary" class="eachButton" @click="createMap">{{ $t('map.newConstruction') }}</el-button>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import { DeviceMenu } from '@/scripts/ConstDic';
+import { removeSessionStorage } from '@/utils/auth';
+
+export default {
+    name: 'UserMapList',
+    components: {
+    },
+    props: {
+        width: {
+            type: Number,
+            required: true
+        }
+    },
+    data() {
+        return {
+            loading: false,
+            defaultShowKeys: [],
+            filterText: '',
+            treeList: [],
+            selected: {},
+            defaultProps: {
+                children: 'children',
+                label: 'name'
+            },
+            point: {
+                x: 0,
+                y: 0
+            },
+            editModel: {},
+            lineCode: ''
+        };
+    },
+    computed: {
+        // role() {
+        //     return this.$store.state.user.roles.includes('04') ||
+        //             this.$store.state.user.roles.includes('05') ||
+        //             this.$store.state.user.roles.includes('01');
+        // }
+    },
+    watch: {
+        filterText(val) {
+            this.$refs.tree.filter(val);
+        }
+    },
+    beforeDestroy () {
+        removeSessionStorage('demonList');
+    },
+    mounted() {
+        this.loadInitData();
+    },
+    methods: {
+        filterNode(value, data) {
+            if (!value) return true;
+            return data.name.indexOf(value) !== -1;
+        },
+        createMap() {
+            this.$emit('createMap');
+        },
+        async loadInitData() {
+            this.treeList = [];
+            this.treeList = [
+                {
+                    name: 'iscs系统',
+                    id: 0,
+                    type: 'system',
+                    children: [
+                        {
+                            name: 'FAS界面',
+                            mode: 'fas',
+                            id: '1',
+                            type: 'interface'
+                        },
+                        {
+                            name: 'BAS界面',
+                            mode: 'bas',
+                            id: '2',
+                            type: 'interface'
+                        },
+                        {
+                            name: 'PSD界面',
+                            mode: 'psd',
+                            id: '3',
+                            type: 'interface'
+                        },
+                        {
+                            name: 'cctv界面',
+                            mode: 'cctv',
+                            id: '4',
+                            type: 'interface'
+                        },
+                        {
+                            name: 'AFC界面',
+                            mode: 'afc',
+                            id: '5',
+                            type: 'interface'
+                        },
+                        {
+                            name: 'ACS界面',
+                            mode: 'acs',
+                            id: '5',
+                            type: 'interface'
+                        }
+                    ]
+                }
+            ];
+        },
+        clickEvent(obj, data, ele) {
+            switch (obj.type) {
+            case 'system' :
+                break;
+            case 'interface':
+                this.$router.push({ path: `/system/iscs/design/edit/${obj.id}/${obj.mode}` });
+                break;
+            }
+        },
+        showContextMenu(e, obj, node, vueElem) {
+            if (obj && obj.type == 'map') {
+                e.preventDefault();
+                const menu = DeviceMenu.Map;
+
+                this.point = {
+                    x: e.clientX,
+                    y: e.clientY
+                };
+                this.editModel = obj;
+                this.editModel.lineCode = obj.lineCode;
+                this.$store.dispatch('menuOperation/setPopMenu', { position: this.point, menu: menu });
+            }
+        }
+    }
+};
+</script>
+<style lang="scss" scoped>
+	.clearfix{
+		padding: 0 20px;
+		border-bottom: 1px solid #EBEEF5;
+		box-sizing: border-box;
+		height: 47px;
+		line-height: 47px;
+	}
+    .text_item{
+        height: calc(100% - 47px);
+        .tree_box{
+            height: calc(100% - 89px);
+            overflow-y: auto;
+        }
+    }
+    .buttonList{
+        padding: 8px 0px 8px 0px;
+        border-top: 1px #ccc solid;
+    }
+    .eachButton{
+        margin-left:10px;
+    }
+    .uploadDemo {
+        position: relative;
+        overflow: hidden;
+        // float: right;
+        padding: 9px 15px;
+        margin-right: 3px;
+        cursor: pointer;
+        input {
+            width: 100%;
+            height: 100%;
+            position: absolute;
+            left: 0;
+            top: 0;
+            opacity: 0;
+            cursor: pointer;
+        }
+    }
+    .map-list-main{
+        text-align:left;
+		height: 100%;
+    }
+</style>

src/views/system/iscsDesign/index.vue

@@ -0,0 +1,100 @@
+<template>
+  <div class="app-wrapper">
+    <div v-show="listShow" class="examList" :style="{width: widthLeft+'px'}">
+      <demon-list ref="demonList" :width="widthLeft" @createMap="createMap" />
+    </div>
+    <drap-left :width-left="widthLeft" @drapWidth="drapWidth" />
+    <transition>
+      <router-view />
+    </transition>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+import demonList from './demonList';
+import drapLeft from '@/views/components/drapLeft/index';
+import { launchFullscreen } from '@/utils/screen';
+import localStore from 'storejs';
+import { getSessionStorage, setSessionStorage } from '@/utils/auth';
+
+export default {
+    name: 'DesignPlatform',
+    components: {
+        demonList,
+        drapLeft
+    },
+    data() {
+        return {
+            listShow: true,
+            widthLeft: Number(localStore.get('LeftWidth')) || 450,
+            lineCode: ''
+        };
+    },
+    computed: {
+        ...mapGetters([
+            'lessonbar'
+        ]),
+        width() {
+            return this.$store.state.app.width;
+        }
+    },
+    watch: {
+        'lessonbar.opened': function (val) {
+            this.listShow = val;
+        },
+        widthLeft(val) {
+            this.setMapResize(val);
+        },
+        '$store.state.app.windowSizeCount': function() {
+            this.resize();
+        }
+    },
+    created() {
+        this.resize();
+    },
+    mounted() {
+        const againEnter = getSessionStorage('againEnter') || null;
+        if (!againEnter) {
+            launchFullscreen();
+            setSessionStorage('againEnter', true);
+        }
+        this.widthLeft = Number(localStore.get('LeftWidth'));
+    },
+    methods: {
+        refresh() {
+            this.$refs && this.$refs.demonList && this.$refs.demonList.loadInitData();
+        },
+        drapWidth(width) {
+            this.widthLeft = Number(width);
+        },
+        resize() {
+            this.widthLeft = Number(localStore.get('LeftWidth')) || this.widthLeft;
+            const width = this.$store.state.app.width - 521 - this.widthLeft;
+            const height = this.$store.state.app.height - 90;
+            this.$store.dispatch('config/resize', { width: width, height: height });
+        },
+        setMapResize(LeftWidth) {
+            const widths = this.$store.state.app.width - 521 - LeftWidth;
+            const heights = this.$store.state.app.height - 90;
+            this.$store.dispatch('config/resize', { width: widths, height: heights });
+        }
+    }
+};
+</script>
+<style rel="stylesheet/scss" lang="scss" scoped>
+    @import "src/styles/mixin.scss";
+
+    .app-wrapper {
+        @include clearfix;
+        position: relative;
+        height: 100%;
+        width: 100%;
+        overflow: hidden;
+    }
+
+    .examList {
+        float: left;
+        height: 100%;
+    }
+</style>

src/views/system/iscsDraw/index.vue

@@ -0,0 +1,100 @@
+<template>
+  <transition name="el-zoom-in-center">
+    <div class="mapPaint">
+      <div class="map-view">
+        <iscs-plate ref="iscsPlate" />
+      </div>
+      <div class="map-draft">
+        <iscs-operate v-if="iscsMode==='fas'" ref="iscsOperate" @iscsChange="iscsChange" />
+        <iscs-bas-operate v-else-if="iscsMode==='bas'" ref="iscsBasOperate" @iscsChange="iscsChange" />
+        <iscs-psd-operate v-else-if="iscsMode==='psd'" ref="iscsPsdOperate" @iscsChange="iscsChange" />
+        <iscs-cctv-operate v-else-if="iscsMode==='cctv'" ref="iscsCctvOperate" @iscsChange="iscsChange" />
+        <iscs-afc-operate v-else-if="iscsMode==='afc'" ref="iscsAfcOperate" @iscsChange="iscsChange" />
+        <iscs-acs-operate v-else-if="iscsMode==='acs'" ref="iscsAcsOperate" @iscsChange="iscsChange" />
+      </div>
+    </div>
+  </transition>
+</template>
+<script>
+import IscsPlate from '@/views/iscsSystem/index';
+import IscsOperate from './iscsOperate/index';
+import IscsBasOperate from './iscsBasOperate/index';
+import IscsPsdOperate from './iscsPsdOperate/index';
+import IscsCctvOperate from './iscsCctvOperate/index';
+import IscsAfcOperate from './iscsAfcOperate/index';
+import IscsAcsOperate from './iscsAcsOperate/index';
+export default {
+    name: 'IscsView',
+    components: {
+        IscsPlate,
+        IscsOperate,
+        IscsBasOperate,
+        IscsPsdOperate,
+        IscsCctvOperate,
+        IscsAfcOperate,
+        IscsAcsOperate
+    },
+    data() {
+        return {
+            size: {
+                width: this.$store.state.app.width - 521,
+                height: this.$store.state.app.height - 60
+            }
+        };
+    },
+    computed:{
+        iscsMode() {
+            return this.$route.params.mode;
+        }
+    },
+    watch: {
+        $route(val) {
+
+        }
+    },
+    created() {
+    },
+    mounted() {
+        this.$refs.iscsPlate.show();
+        this.$refs.iscsPlate.drawIscsInit();
+    },
+    beforeDestroy() {
+
+    },
+    methods: {
+        iscsChange() {
+            this.$refs.iscsPlate.drawIscsInit();
+        }
+    }
+};
+</script>
+<style rel="stylesheet/scss" lang="scss" scoped>
+    @import "src/styles/mixin.scss";
+
+    .map-draft{
+        height:100%;
+        /deep/{
+            .v-modal{
+                opacity: 0;
+            }
+        }
+    }
+
+    .map-view {
+        float: left;
+        width: 60%;
+    }
+    .mapPaint{
+        height: 100%;
+        overflow: hidden;
+    }
+    .map-draft {
+        float: right;
+        width: 520px;
+
+    // /deep/ .el-scrollbar__view {
+       // width: 510px !important;
+       // height: calc(100% - 40px);
+       // }
+    }
+</style>

src/views/system/iscsDraw/iscsAcsOperate/entranceGuard.vue

@@ -0,0 +1,118 @@
+<template>
+  <div>
+    <el-form ref="form" :rule="rules" :model="addModel" label-width="100px">
+      <el-form-item v-if="isUpdate" label="按钮编号" prop="code">
+        <el-input v-model="addModel.code" :disabled="true" />
+      </el-form-item>
+      <el-form-item label="图形宽度" prop="width">
+        <el-input-number v-model="addModel.width" />
+      </el-form-item>
+      <el-form-item label="X轴坐标" prop="x">
+        <el-input-number v-model="addModel.x" />
+      </el-form-item>
+      <el-form-item label="Y轴坐标" prop="y">
+        <el-input-number v-model="addModel.y" />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="onSubmit('form')">{{ buttonText }}</el-button>
+        <el-button v-show="showDeleteButton" type="danger" @click="deleteDevice">{{ $t('global.delete') }}</el-button>
+        <el-button v-show="showDeleteButton" @click="initPage">{{ $t('global.cancel') }}</el-button>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+import {getUID} from '@/iscs/utils/Uid';
+export default {
+    name: 'EntranceGuard',
+    data() {
+        return {
+            addModel:{
+                code: '',
+                width: 25,
+                x: 10,
+                y: 10
+            },
+            rules: {
+                width:[{ required: true, message:'请输入设备图形宽度', trigger: 'blur' }],
+                x: [{ required: true, message: '请输入设备图形的X轴坐标', trigger: 'blur' }],
+                y: [{ required: true, message: '请输入设备图形的Y轴坐标', trigger: 'blur' }]
+            },
+            isUpdate:false,
+            showDeleteButton: false,
+            buttonText: '立即创建'
+        };
+    },
+    computed:{
+        ...mapGetters('iscs', [
+            'entranceGuardList'
+        ])
+    },
+    watch:{
+        '$store.state.iscs.rightClickCount': function (val) {
+            const model = this.$store.getters['iscs/updateDeviceData'];
+            if (model._type === 'EntranceGuard' ) {
+                this.buttonText = '修改';
+                this.showDeleteButton = true;
+                this.isUpdate = true;
+                this.form.code = model.code;
+                this.form.width = model.width;
+                this.form.x = model.point.x;
+                this.form.y = model.point.y;
+            }
+        }
+    },
+    methods: {
+        onSubmit(form) {
+            this.$refs[form].validate((valid) => {
+                if (valid) {
+                    const newModel = {
+                        point: {
+                            x: this.addModel.x,
+                            y: this.addModel.y
+                        },
+                        code: this.isUpdate ? this.form.code : getUID('EntranceGuard', this.entranceGuardList),
+                        _type: 'EntranceGuard',
+                        width: this.addModel.width
+                    };
+                    this.$emit('createDataModel', newModel);
+                    this.initPage();
+                } else {
+                    return false;
+                }
+            });
+        },
+        deleteDevice() {
+            const newModel = {
+                point: {
+                    x: this.addModel.x,
+                    y: this.addModel.y
+                },
+                code: this.addModel.code,
+                _type: 'EntranceGuard',
+                width: this.addModel.width
+            };
+            this.$emit('deleteDataModel', newModel);
+            this.initPage();
+        },
+        initPage() {
+            this.isUpdate = false;
+            this.buttonText = '立即创建';
+            this.showDeleteButton = false;
+            this.addModel = {
+                code: '',
+                width: 25,
+                x: 10,
+                y: 10
+            };
+        }
+    }
+
+};
+</script>
+
+<style scoped>
+
+</style>

src/views/system/iscsDraw/iscsAcsOperate/index.vue

@@ -0,0 +1,85 @@
+<template>
+  <transition name="el-zoom-in-center">
+    <div class="map-control heightClass ">
+      <el-card type="border-card" class="heightClass">
+        <div slot="header" class="clearfix">
+          <el-button
+            type="text"
+            style="float: right; padding: 3px 0; margin-right: 5px;"
+            @click="handleSave"
+          >{{ $t('ibp.save') }}</el-button>
+        </div>
+        <el-tabs v-model="enabledTab" class="mapEdit" type="card" @tab-click="handleTabClick">
+          <el-tab-pane label="门禁" name="entranceGuard">
+            <entrance-guard
+              ref="entranceGuard"
+              style="width: 90%;"
+              @createDataModel="createDataModel"
+              @deleteDataModel="deleteDataModel"
+            />
+          </el-tab-pane>
+        </el-tabs>
+      </el-card>
+    </div>
+  </transition>
+</template>
+<script>
+import {deviceFactory} from '@/iscs/utils/parser';
+import EntranceGuard from './entranceGuard';
+
+export default {
+    name: 'IscsAcsOperate',
+    components: {
+        EntranceGuard
+    },
+    mixins: [
+    ],
+    data() {
+        return {
+            enabledTab: 'entranceGuard',
+            data: '',
+            stationCode: ''
+        };
+    },
+    computed: {
+        height() {
+            return this.$store.state.config.height;
+        }
+    },
+    watch: {
+        '$store.state.iscs.rightClickCount': function (val) {
+            const model = this.$store.getters['iscs/updateDeviceData'];
+            this.enabledTab = model._type;
+        }
+    },
+    mounted() {
+    },
+    beforeDestroy() {
+
+    },
+    methods: {
+        createDataModel(model) {
+            const newModel = deviceFactory(model._type, model);
+            this.$store.dispatch('iscs/updateIscsDevices', newModel.model);
+        },
+        deleteDataModel(model) {
+            this.$store.dispatch('iscs/deleteIscsDevices', model);
+        },
+        handleSave() {
+            const data = JSON.stringify(this.$store.state.iscs.iscs);
+            console.log(data);
+        },
+        handleTabClick() {
+
+        }
+    }
+};
+</script>
+<style rel="stylesheet/scss" lang="scss" scoped>
+    @import "src/styles/mixin.scss";
+    .map-control {
+        float: right;
+        width: 100%;
+    }
+    .heightClass{height:100%;}
+</style>

src/views/system/iscsDraw/iscsAfcOperate/brakeMachine.vue

@@ -0,0 +1,118 @@
+<template>
+  <div>
+    <el-form ref="form" :rule="rules" :model="addModel" label-width="100px">
+      <el-form-item v-if="isUpdate" label="按钮编号" prop="code">
+        <el-input v-model="addModel.code" :disabled="true" />
+      </el-form-item>
+      <el-form-item label="图形宽度" prop="width">
+        <el-input-number v-model="addModel.width" />
+      </el-form-item>
+      <el-form-item label="X轴坐标" prop="x">
+        <el-input-number v-model="addModel.x" />
+      </el-form-item>
+      <el-form-item label="Y轴坐标" prop="y">
+        <el-input-number v-model="addModel.y" />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="onSubmit('form')">{{ buttonText }}</el-button>
+        <el-button v-show="showDeleteButton" type="danger" @click="deleteDevice">{{ $t('global.delete') }}</el-button>
+        <el-button v-show="showDeleteButton" @click="initPage">{{ $t('global.cancel') }}</el-button>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+import {getUID} from '@/iscs/utils/Uid';
+export default {
+    name: 'BrakeMachine',
+    data() {
+        return {
+            addModel:{
+                code: '',
+                width: 25,
+                x: 10,
+                y: 10
+            },
+            rules: {
+                width:[{ required: true, message:'请输入设备图形宽度', trigger: 'blur' }],
+                x: [{ required: true, message: '请输入设备图形的X轴坐标', trigger: 'blur' }],
+                y: [{ required: true, message: '请输入设备图形的Y轴坐标', trigger: 'blur' }]
+            },
+            isUpdate:false,
+            showDeleteButton: false,
+            buttonText: '立即创建'
+        };
+    },
+    computed:{
+        ...mapGetters('iscs', [
+            'brakeMachineList'
+        ])
+    },
+    watch:{
+        '$store.state.iscs.rightClickCount': function (val) {
+            const model = this.$store.getters['iscs/updateDeviceData'];
+            if (model._type === 'BrakeMachine' ) {
+                this.buttonText = '修改';
+                this.showDeleteButton = true;
+                this.isUpdate = true;
+                this.form.code = model.code;
+                this.form.width = model.width;
+                this.form.x = model.point.x;
+                this.form.y = model.point.y;
+            }
+        }
+    },
+    methods: {
+        onSubmit(form) {
+            this.$refs[form].validate((valid) => {
+                if (valid) {
+                    const maButtonModel = {
+                        point: {
+                            x: this.addModel.x,
+                            y: this.addModel.y
+                        },
+                        code: this.isUpdate ? this.form.code : getUID('BrakeMachine', this.brakeMachineList),
+                        _type: 'BrakeMachine',
+                        width: this.addModel.width
+                    };
+                    this.$emit('createDataModel', maButtonModel);
+                    this.initPage();
+                } else {
+                    return false;
+                }
+            });
+        },
+        deleteDevice() {
+            const maButtonModel = {
+                point: {
+                    x: this.addModel.x,
+                    y: this.addModel.y
+                },
+                code: this.addModel.code,
+                _type: 'BrakeMachine',
+                width: this.addModel.width
+            };
+            this.$emit('deleteDataModel', maButtonModel);
+            this.initPage();
+        },
+        initPage() {
+            this.isUpdate = false;
+            this.buttonText = '立即创建';
+            this.showDeleteButton = false;
+            this.addModel = {
+                code: '',
+                width: 25,
+                x: 10,
+                y: 10
+            };
+        }
+    }
+
+};
+</script>
+
+<style scoped>
+
+</style>

src/views/system/iscsDraw/iscsAfcOperate/index.vue

@@ -0,0 +1,105 @@
+<template>
+  <transition name="el-zoom-in-center">
+    <div class="map-control heightClass ">
+      <el-card type="border-card" class="heightClass">
+        <div slot="header" class="clearfix">
+          <el-button
+            type="text"
+            style="float: right; padding: 3px 0; margin-right: 5px;"
+            @click="handleSave"
+          >{{ $t('ibp.save') }}</el-button>
+        </div>
+        <el-tabs v-model="enabledTab" class="mapEdit" type="card" @tab-click="handleTabClick">
+          <el-tab-pane label="闸机" name="brakeMachine">
+            <brake-machine
+              ref="brakeMachine"
+              style="width: 90%;"
+              @createDataModel="createDataModel"
+              @deleteDataModel="deleteDataModel"
+            />
+          </el-tab-pane>
+          <el-tab-pane label="自动售货机" name="ticketMachine">
+            <ticket-machine
+              ref="ticketMachine"
+              style="width: 90%"
+              @createDataModel="createDataModel"
+              @deleteDataModel="deleteDataModel"
+            />
+          </el-tab-pane>
+          <el-tab-pane label="半自动售货机" name="semiAutomaticTicketMachine">
+            <semi-automatic-ticket-machine
+              ref="semiAutomaticTicketMachine"
+              style="width: 90%"
+              @createDataModel="createDataModel"
+              @deleteDataModel="deleteDataModel"
+            />
+          </el-tab-pane>
+        </el-tabs>
+      </el-card>
+    </div>
+  </transition>
+</template>
+<script>
+import {deviceFactory} from '@/iscs/utils/parser';
+import BrakeMachine from './brakeMachine';
+import TicketMachine from './ticketMachine';
+import SemiAutomaticTicketMachine from './semiAutomaticTicketMachine';
+
+export default {
+    name: 'IscsOperate',
+    components: {
+        BrakeMachine,
+        TicketMachine,
+        SemiAutomaticTicketMachine
+    },
+    mixins: [
+    ],
+    data() {
+        return {
+            enabledTab: 'brakeMachine',
+            data: '',
+            stationCode: ''
+        };
+    },
+    computed: {
+        height() {
+            return this.$store.state.config.height;
+        }
+    },
+    watch: {
+        '$store.state.iscs.rightClickCount': function (val) {
+            const model = this.$store.getters['iscs/updateDeviceData'];
+            this.enabledTab = model._type;
+        }
+    },
+    mounted() {
+    },
+    beforeDestroy() {
+
+    },
+    methods: {
+        createDataModel(model) {
+            const newModel = deviceFactory(model._type, model);
+            this.$store.dispatch('iscs/updateIscsDevices', newModel.model);
+        },
+        deleteDataModel(model) {
+            this.$store.dispatch('iscs/deleteIscsDevices', model);
+        },
+        handleSave() {
+            const data = JSON.stringify(this.$store.state.iscs.iscs);
+            console.log(data);
+        },
+        handleTabClick() {
+
+        }
+    }
+};
+</script>
+<style rel="stylesheet/scss" lang="scss" scoped>
+    @import "src/styles/mixin.scss";
+    .map-control {
+        float: right;
+        width: 100%;
+    }
+    .heightClass{height:100%;}
+</style>

src/views/system/iscsDraw/iscsAfcOperate/semiAutomaticTicketMachine.vue

@@ -0,0 +1,118 @@
+<template>
+  <div>
+    <el-form ref="form" :rule="rules" :model="addModel" label-width="100px">
+      <el-form-item v-if="isUpdate" label="按钮编号" prop="code">
+        <el-input v-model="addModel.code" :disabled="true" />
+      </el-form-item>
+      <el-form-item label="图形宽度" prop="width">
+        <el-input-number v-model="addModel.width" />
+      </el-form-item>
+      <el-form-item label="X轴坐标" prop="x">
+        <el-input-number v-model="addModel.x" />
+      </el-form-item>
+      <el-form-item label="Y轴坐标" prop="y">
+        <el-input-number v-model="addModel.y" />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="onSubmit('form')">{{ buttonText }}</el-button>
+        <el-button v-show="showDeleteButton" type="danger" @click="deleteDevice">{{ $t('global.delete') }}</el-button>
+        <el-button v-show="showDeleteButton" @click="initPage">{{ $t('global.cancel') }}</el-button>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+import {getUID} from '@/iscs/utils/Uid';
+export default {
+    name: 'SemiAutomaticTicketMachine',
+    data() {
+        return {
+            addModel:{
+                code: '',
+                width: 25,
+                x: 10,
+                y: 10
+            },
+            rules: {
+                width:[{ required: true, message:'请输入设备图形宽度', trigger: 'blur' }],
+                x: [{ required: true, message: '请输入设备图形的X轴坐标', trigger: 'blur' }],
+                y: [{ required: true, message: '请输入设备图形的Y轴坐标', trigger: 'blur' }]
+            },
+            isUpdate:false,
+            showDeleteButton: false,
+            buttonText: '立即创建'
+        };
+    },
+    computed:{
+        ...mapGetters('iscs', [
+            'semiAutomaticTicketMachineList'
+        ])
+    },
+    watch:{
+        '$store.state.iscs.rightClickCount': function (val) {
+            const model = this.$store.getters['iscs/updateDeviceData'];
+            if (model._type === 'SemiAutomaticTicketMachine' ) {
+                this.buttonText = '修改';
+                this.showDeleteButton = true;
+                this.isUpdate = true;
+                this.form.code = model.code;
+                this.form.width = model.width;
+                this.form.x = model.point.x;
+                this.form.y = model.point.y;
+            }
+        }
+    },
+    methods: {
+        onSubmit(form) {
+            this.$refs[form].validate((valid) => {
+                if (valid) {
+                    const maButtonModel = {
+                        point: {
+                            x: this.addModel.x,
+                            y: this.addModel.y
+                        },
+                        code: this.isUpdate ? this.form.code : getUID('VolumeControlDamper', this.semiAutomaticTicketMachineList),
+                        _type: 'SemiAutomaticTicketMachine',
+                        width: this.addModel.width
+                    };
+                    this.$emit('createDataModel', maButtonModel);
+                    this.initPage();
+                } else {
+                    return false;
+                }
+            });
+        },
+        deleteDevice() {
+            const maButtonModel = {
+                point: {
+                    x: this.addModel.x,
+                    y: this.addModel.y
+                },
+                code: this.addModel.code,
+                _type: 'SemiAutomaticTicketMachine',
+                width: this.addModel.width
+            };
+            this.$emit('deleteDataModel', maButtonModel);
+            this.initPage();
+        },
+        initPage() {
+            this.isUpdate = false;
+            this.buttonText = '立即创建';
+            this.showDeleteButton = false;
+            this.addModel = {
+                code: '',
+                width: 25,
+                x: 10,
+                y: 10
+            };
+        }
+    }
+
+};
+</script>
+
+<style scoped>
+
+</style>

src/views/system/iscsDraw/iscsAfcOperate/ticketMachine.vue

@@ -0,0 +1,118 @@
+<template>
+  <div>
+    <el-form ref="form" :rule="rules" :model="addModel" label-width="100px">
+      <el-form-item v-if="isUpdate" label="按钮编号" prop="code">
+        <el-input v-model="addModel.code" :disabled="true" />
+      </el-form-item>
+      <el-form-item label="图形宽度" prop="width">
+        <el-input-number v-model="addModel.width" />
+      </el-form-item>
+      <el-form-item label="X轴坐标" prop="x">
+        <el-input-number v-model="addModel.x" />
+      </el-form-item>
+      <el-form-item label="Y轴坐标" prop="y">
+        <el-input-number v-model="addModel.y" />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="onSubmit('form')">{{ buttonText }}</el-button>
+        <el-button v-show="showDeleteButton" type="danger" @click="deleteDevice">{{ $t('global.delete') }}</el-button>
+        <el-button v-show="showDeleteButton" @click="initPage">{{ $t('global.cancel') }}</el-button>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+import {getUID} from '@/iscs/utils/Uid';
+export default {
+    name: 'TicketMachine',
+    data() {
+        return {
+            addModel:{
+                code: '',
+                width: 25,
+                x: 10,
+                y: 10
+            },
+            rules: {
+                width:[{ required: true, message:'请输入设备图形宽度', trigger: 'blur' }],
+                x: [{ required: true, message: '请输入设备图形的X轴坐标', trigger: 'blur' }],
+                y: [{ required: true, message: '请输入设备图形的Y轴坐标', trigger: 'blur' }]
+            },
+            isUpdate:false,
+            showDeleteButton: false,
+            buttonText: '立即创建'
+        };
+    },
+    computed:{
+        ...mapGetters('iscs', [
+            'ticketMachineList'
+        ])
+    },
+    watch:{
+        '$store.state.iscs.rightClickCount': function (val) {
+            const model = this.$store.getters['iscs/updateDeviceData'];
+            if (model._type === 'TicketMachine' ) {
+                this.buttonText = '修改';
+                this.showDeleteButton = true;
+                this.isUpdate = true;
+                this.form.code = model.code;
+                this.form.width = model.width;
+                this.form.x = model.point.x;
+                this.form.y = model.point.y;
+            }
+        }
+    },
+    methods: {
+        onSubmit(form) {
+            this.$refs[form].validate((valid) => {
+                if (valid) {
+                    const maButtonModel = {
+                        point: {
+                            x: this.addModel.x,
+                            y: this.addModel.y
+                        },
+                        code: this.isUpdate ? this.form.code : getUID('TicketMachine', this.ticketMachineList),
+                        _type: 'TicketMachine',
+                        width: this.addModel.width
+                    };
+                    this.$emit('createDataModel', maButtonModel);
+                    this.initPage();
+                } else {
+                    return false;
+                }
+            });
+        },
+        deleteDevice() {
+            const maButtonModel = {
+                point: {
+                    x: this.addModel.x,
+                    y: this.addModel.y
+                },
+                code: this.addModel.code,
+                _type: 'TicketMachine',
+                width: this.addModel.width
+            };
+            this.$emit('deleteDataModel', maButtonModel);
+            this.initPage();
+        },
+        initPage() {
+            this.isUpdate = false;
+            this.buttonText = '立即创建';
+            this.showDeleteButton = false;
+            this.addModel = {
+                code: '',
+                width: 25,
+                x: 10,
+                y: 10
+            };
+        }
+    }
+
+};
+</script>
+
+<style scoped>
+
+</style>

src/views/system/iscsDraw/iscsBasOperate/airConditioner.vue

@@ -0,0 +1,128 @@
+<template>
+  <div>
+    <el-form ref="form" :rules="rules" :model="form" label-width="100px">
+      <el-form-item v-if="isUpdate" label="编号" prop="code">
+        <el-input v-model="form.code" :disabled="true" />
+      </el-form-item>
+      <el-form-item label="图形宽度" prop="width">
+        <el-input-number v-model="form.width" :min="40" />
+      </el-form-item>
+      <el-form-item label="X轴坐标" prop="x">
+        <el-input-number v-model="form.x" controls-position="right" :min="1" />
+      </el-form-item>
+      <el-form-item label="Y轴坐标" prop="y">
+        <el-input-number v-model="form.y" controls-position="right" :min="1" />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="onSubmit('form')">{{ buttonText }}</el-button>
+        <el-button v-show="showDeleteButton" type="danger" @click="deleteDevice">{{ $t('global.delete') }}</el-button>
+        <el-button v-show="showDeleteButton" @click="initPage">{{ $t('global.cancel') }}</el-button>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+<script>
+import { mapGetters } from 'vuex';
+import {getUID} from '@/iscs/utils/Uid';
+export default {
+    name:'AirConditioner',
+    data() {
+        return {
+            isUpdate:false,
+            showDeleteButton: false,
+            buttonText: '立即创建',
+            form:{
+                code:'',
+                width: 40,
+                x: 10,
+                y: 10
+            },
+            rules: {
+                code: [
+                    { required: true, message:'请生成设备图形的编码', trigger: 'blur' }
+                ],
+                width:[
+                    { required: true, message:'请输入设备图形宽度', trigger: 'blur' }
+                ],
+                x: [
+                    { required: true, message: '请输入设备图形的X轴坐标', trigger: 'blur' }
+                ],
+                y: [
+                    { required: true, message: '请输入设备图形的Y轴坐标', trigger: 'blur' }
+                ]
+            }
+        };
+    },
+    computed:{
+        ...mapGetters('iscs', [
+            'airConditionerList'
+        ])
+    },
+    watch:{
+        '$store.state.ibp.rightClickCount': function (val) {
+            const model = this.$store.getters['ibp/updateDeviceData'];
+            if (model._type === 'AirConditioner' ) {
+                this.buttonText = '修改';
+                this.showDeleteButton = true;
+                this.isUpdate = true;
+                this.form.code = model.code;
+                this.form.width = model.width;
+                this.form.x = model.point.x;
+                this.form.y = model.point.y;
+            }
+        }
+    },
+    mounted() {
+
+    },
+    methods:{
+        onSubmit(form) {
+            this.$refs[form].validate((valid) => {
+                if (valid) {
+                    const airConditionerModel = {
+                        point: {
+                            x: this.form.x,
+                            y: this.form.y
+                        },
+                        _type: 'AirConditioner',
+                        code: this.isUpdate ? this.form.code : getUID('AirConditioner', this.airConditionerList),
+                        width: this.form.width,
+                        color:'#00ff00'
+                    };
+                    this.$emit('createAirConditioner', airConditionerModel);
+                    this.initPage();
+                } else {
+                    return false;
+                }
+            });
+
+        },
+        initPage() {
+            this.isUpdate = false;
+            this.buttonText = '立即创建';
+            this.showDeleteButton = false;
+            this.form = {
+                code:'',
+                width: 40,
+                x: 10,
+                y: 10
+            };
+            this.$refs.form.resetFields();
+        },
+        deleteDevice() {
+            const airConditionerModel = {
+                point: {
+                    x: this.form.x,
+                    y: this.form.y
+                },
+                _type: 'AirConditioner',
+                code: this.form.code,
+                width: this.form.width,
+                color:'#00ff00'
+            };
+            this.$emit('deleteDataModel', airConditionerModel );
+            this.initPage();
+        }
+    }
+};
+</script>

src/views/system/iscsDraw/iscsBasOperate/chiller.vue

@@ -0,0 +1,128 @@
+<template>
+  <div>
+    <el-form ref="form" :rules="rules" :model="form" label-width="100px">
+      <el-form-item v-if="isUpdate" label="编号" prop="code">
+        <el-input v-model="form.code" :disabled="true" />
+      </el-form-item>
+      <el-form-item label="图形宽度" prop="width">
+        <el-input-number v-model="form.width" :min="60" />
+      </el-form-item>
+      <el-form-item label="X轴坐标" prop="x">
+        <el-input-number v-model="form.x" controls-position="right" :min="1" />
+      </el-form-item>
+      <el-form-item label="Y轴坐标" prop="y">
+        <el-input-number v-model="form.y" controls-position="right" :min="1" />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="onSubmit('form')">{{ buttonText }}</el-button>
+        <el-button v-show="showDeleteButton" type="danger" @click="deleteDevice">{{ $t('global.delete') }}</el-button>
+        <el-button v-show="showDeleteButton" @click="initPage">{{ $t('global.cancel') }}</el-button>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+<script>
+import { mapGetters } from 'vuex';
+import {getUID} from '@/iscs/utils/Uid';
+export default {
+    name:'Chiller',
+    data() {
+        return {
+            isUpdate:false,
+            showDeleteButton: false,
+            buttonText: '立即创建',
+            form:{
+                code:'',
+                width: 40,
+                x: 10,
+                y: 10
+            },
+            rules: {
+                code: [
+                    { required: true, message:'请生成设备图形的编码', trigger: 'blur' }
+                ],
+                width:[
+                    { required: true, message:'请输入设备图形宽度', trigger: 'blur' }
+                ],
+                x: [
+                    { required: true, message: '请输入设备图形的X轴坐标', trigger: 'blur' }
+                ],
+                y: [
+                    { required: true, message: '请输入设备图形的Y轴坐标', trigger: 'blur' }
+                ]
+            }
+        };
+    },
+    computed:{
+        ...mapGetters('iscs', [
+            'chillerList'
+        ])
+    },
+    watch:{
+        '$store.state.ibp.rightClickCount': function (val) {
+            const model = this.$store.getters['ibp/updateDeviceData'];
+            if (model._type === 'Chiller' ) {
+                this.buttonText = '修改';
+                this.showDeleteButton = true;
+                this.isUpdate = true;
+                this.form.code = model.code;
+                this.form.width = model.width;
+                this.form.x = model.point.x;
+                this.form.y = model.point.y;
+            }
+        }
+    },
+    mounted() {
+
+    },
+    methods:{
+        onSubmit(form) {
+            this.$refs[form].validate((valid) => {
+                if (valid) {
+                    const chillerModel = {
+                        point: {
+                            x: this.form.x,
+                            y: this.form.y
+                        },
+                        _type: 'Chiller',
+                        code: this.isUpdate ? this.form.code : getUID('Chiller', this.chillerList),
+                        width: this.form.width,
+                        color:'#00ff00'
+                    };
+                    this.$emit('createChiller', chillerModel);
+                    this.initPage();
+                } else {
+                    return false;
+                }
+            });
+
+        },
+        initPage() {
+            this.isUpdate = false;
+            this.buttonText = '立即创建';
+            this.showDeleteButton = false;
+            this.form = {
+                code:'',
+                width: 40,
+                x: 10,
+                y: 10
+            };
+            this.$refs.form.resetFields();
+        },
+        deleteDevice() {
+            const chillerModel = {
+                point: {
+                    x: this.form.x,
+                    y: this.form.y
+                },
+                _type: 'Chiller',
+                code: this.form.code,
+                width: this.form.width,
+                color:'#00ff00'
+            };
+            this.$emit('deleteDataModel', chillerModel );
+            this.initPage();
+        }
+    }
+};
+</script>

src/views/system/iscsDraw/iscsBasOperate/coolTower.vue

@@ -0,0 +1,128 @@
+<template>
+  <div>
+    <el-form ref="form" :rules="rules" :model="form" label-width="100px">
+      <el-form-item v-if="isUpdate" label="编号" prop="code">
+        <el-input v-model="form.code" :disabled="true" />
+      </el-form-item>
+      <el-form-item label="图形宽度" prop="width">
+        <el-input-number v-model="form.width" :min="20" />
+      </el-form-item>
+      <el-form-item label="X轴坐标" prop="x">
+        <el-input-number v-model="form.x" controls-position="right" :min="1" />
+      </el-form-item>
+      <el-form-item label="Y轴坐标" prop="y">
+        <el-input-number v-model="form.y" controls-position="right" :min="1" />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="onSubmit('form')">{{ buttonText }}</el-button>
+        <el-button v-show="showDeleteButton" type="danger" @click="deleteDevice">{{ $t('global.delete') }}</el-button>
+        <el-button v-show="showDeleteButton" @click="initPage">{{ $t('global.cancel') }}</el-button>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+<script>
+import { mapGetters } from 'vuex';
+import {getUID} from '@/iscs/utils/Uid';
+export default {
+    name:'CoolTower',
+    data() {
+        return {
+            isUpdate:false,
+            showDeleteButton: false,
+            buttonText: '立即创建',
+            form:{
+                code:'',
+                width: 25,
+                x: 10,
+                y: 10
+            },
+            rules: {
+                code: [
+                    { required: true, message:'请生成设备图形的编码', trigger: 'blur' }
+                ],
+                width:[
+                    { required: true, message:'请输入设备图形宽度', trigger: 'blur' }
+                ],
+                x: [
+                    { required: true, message: '请输入设备图形的X轴坐标', trigger: 'blur' }
+                ],
+                y: [
+                    { required: true, message: '请输入设备图形的Y轴坐标', trigger: 'blur' }
+                ]
+            }
+        };
+    },
+    computed:{
+        ...mapGetters('iscs', [
+            'coolTowerList'
+        ])
+    },
+    watch:{
+        '$store.state.ibp.rightClickCount': function (val) {
+            const model = this.$store.getters['ibp/updateDeviceData'];
+            if (model._type === 'CoolTower' ) {
+                this.buttonText = '修改';
+                this.showDeleteButton = true;
+                this.isUpdate = true;
+                this.form.code = model.code;
+                this.form.width = model.width;
+                this.form.x = model.point.x;
+                this.form.y = model.point.y;
+            }
+        }
+    },
+    mounted() {
+
+    },
+    methods:{
+        onSubmit(form) {
+            this.$refs[form].validate((valid) => {
+                if (valid) {
+                    const chillerModel = {
+                        point: {
+                            x: this.form.x,
+                            y: this.form.y
+                        },
+                        _type: 'CoolTower',
+                        code: this.isUpdate ? this.form.code : getUID('CoolTower', this.coolTowerList),
+                        width: this.form.width,
+                        color:'#00ff00'
+                    };
+                    this.$emit('createCoolTower', chillerModel);
+                    this.initPage();
+                } else {
+                    return false;
+                }
+            });
+
+        },
+        initPage() {
+            this.isUpdate = false;
+            this.buttonText = '立即创建';
+            this.showDeleteButton = false;
+            this.form = {
+                code:'',
+                width: 25,
+                x: 10,
+                y: 10
+            };
+            this.$refs.form.resetFields();
+        },
+        deleteDevice() {
+            const chillerModel = {
+                point: {
+                    x: this.form.x,
+                    y: this.form.y
+                },
+                _type: 'CoolTower',
+                code: this.form.code,
+                width: this.form.width,
+                color:'#00ff00'
+            };
+            this.$emit('deleteDataModel', chillerModel );
+            this.initPage();
+        }
+    }
+};
+</script>

src/views/system/iscsDraw/iscsBasOperate/fireDamper.vue

@@ -0,0 +1,128 @@
+<template>
+  <div>
+    <el-form ref="form" :rules="rules" :model="form" label-width="100px">
+      <el-form-item v-if="isUpdate" label="编号" prop="code">
+        <el-input v-model="form.code" :disabled="true" />
+      </el-form-item>
+      <el-form-item label="图形宽度" prop="width">
+        <el-input-number v-model="form.width" :min="40" />
+      </el-form-item>
+      <el-form-item label="X轴坐标" prop="x">
+        <el-input-number v-model="form.x" controls-position="right" :min="1" />
+      </el-form-item>
+      <el-form-item label="Y轴坐标" prop="y">
+        <el-input-number v-model="form.y" controls-position="right" :min="1" />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="onSubmit('form')">{{ buttonText }}</el-button>
+        <el-button v-show="showDeleteButton" type="danger" @click="deleteDevice">{{ $t('global.delete') }}</el-button>
+        <el-button v-show="showDeleteButton" @click="initPage">{{ $t('global.cancel') }}</el-button>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+<script>
+import { mapGetters } from 'vuex';
+import {getUID} from '@/iscs/utils/Uid';
+export default {
+    name:'FireDamper',
+    data() {
+        return {
+            isUpdate:false,
+            showDeleteButton: false,
+            buttonText: '立即创建',
+            form:{
+                code:'',
+                width: 40,
+                x: 10,
+                y: 10
+            },
+            rules: {
+                code: [
+                    { required: true, message:'请生成设备图形的编码', trigger: 'blur' }
+                ],
+                width:[
+                    { required: true, message:'请输入设备图形宽度', trigger: 'blur' }
+                ],
+                x: [
+                    { required: true, message: '请输入设备图形的X轴坐标', trigger: 'blur' }
+                ],
+                y: [
+                    { required: true, message: '请输入设备图形的Y轴坐标', trigger: 'blur' }
+                ]
+            }
+        };
+    },
+    computed:{
+        ...mapGetters('iscs', [
+            'fireDamperList'
+        ])
+    },
+    watch:{
+        '$store.state.ibp.rightClickCount': function (val) {
+            const model = this.$store.getters['ibp/updateDeviceData'];
+            if (model._type === 'FireDamper' ) {
+                this.buttonText = '修改';
+                this.showDeleteButton = true;
+                this.isUpdate = true;
+                this.form.code = model.code;
+                this.form.width = model.width;
+                this.form.x = model.point.x;
+                this.form.y = model.point.y;
+            }
+        }
+    },
+    mounted() {
+
+    },
+    methods:{
+        onSubmit(form) {
+            this.$refs[form].validate((valid) => {
+                if (valid) {
+                    const fireDamperModel = {
+                        point: {
+                            x: this.form.x,
+                            y: this.form.y
+                        },
+                        _type: 'FireDamper',
+                        code: this.isUpdate ? this.form.code : getUID('FireDamper', this.fireDamperList),
+                        width: this.form.width,
+                        color:'#00ff00'
+                    };
+                    this.$emit('createFireDamper', fireDamperModel);
+                    this.initPage();
+                } else {
+                    return false;
+                }
+            });
+
+        },
+        initPage() {
+            this.isUpdate = false;
+            this.buttonText = '立即创建';
+            this.showDeleteButton = false;
+            this.form = {
+                code:'',
+                width: 40,
+                x: 10,
+                y: 10
+            };
+            this.$refs.form.resetFields();
+        },
+        deleteDevice() {
+            const fireDamperModel = {
+                point: {
+                    x: this.form.x,
+                    y: this.form.y
+                },
+                _type: 'FireDamper',
+                code: this.form.code,
+                width: this.form.width,
+                color:'#00ff00'
+            };
+            this.$emit('deleteDataModel', fireDamperModel );
+            this.initPage();
+        }
+    }
+};
+</script>

src/views/system/iscsDraw/iscsBasOperate/frozenPump.vue

@@ -0,0 +1,142 @@
+<template>
+  <div>
+    <el-form ref="form" :rules="rules" :model="form" label-width="100px">
+      <el-form-item v-if="isUpdate" label="编号" prop="code">
+        <el-input v-model="form.code" :disabled="true" />
+      </el-form-item>
+      <el-form-item label="类型" prop="type">
+        <el-select v-model="form.type" placeholder="请选择类型">
+          <el-option label="冷冻泵" value="frozenPump" />
+          <el-option label="冷却泵" value="coolPump" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="图形宽度" prop="width">
+        <el-input-number v-model="form.width" :min="10" />
+      </el-form-item>
+      <el-form-item label="X轴坐标" prop="x">
+        <el-input-number v-model="form.x" controls-position="right" :min="1" />
+      </el-form-item>
+      <el-form-item label="Y轴坐标" prop="y">
+        <el-input-number v-model="form.y" controls-position="right" :min="1" />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="onSubmit('form')">{{ buttonText }}</el-button>
+        <el-button v-show="showDeleteButton" type="danger" @click="deleteDevice">{{ $t('global.delete') }}</el-button>
+        <el-button v-show="showDeleteButton" @click="initPage">{{ $t('global.cancel') }}</el-button>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+<script>
+import { mapGetters } from 'vuex';
+import {getUID} from '@/iscs/utils/Uid';
+export default {
+    name:'FrozenPump',
+    data() {
+        return {
+            isUpdate:false,
+            showDeleteButton: false,
+            buttonText: '立即创建',
+            form:{
+                code:'',
+                type:'',
+                width: 25,
+                x: 10,
+                y: 10
+            },
+            rules: {
+                code: [
+                    { required: true, message:'请生成设备图形的编码', trigger: 'blur' }
+                ],
+                width:[
+                    { required: true, message:'请输入设备图形宽度', trigger: 'blur' }
+                ],
+                x: [
+                    { required: true, message: '请输入设备图形的X轴坐标', trigger: 'blur' }
+                ],
+                y: [
+                    { required: true, message: '请输入设备图形的Y轴坐标', trigger: 'blur' }
+                ],
+                type: [
+                    { required: true, message: '请选择设备的类型', trigger: 'change' }
+                ]
+            }
+        };
+    },
+    computed:{
+        ...mapGetters('iscs', [
+            'frozenPumpList'
+        ])
+    },
+    watch:{
+        '$store.state.ibp.rightClickCount': function (val) {
+            const model = this.$store.getters['ibp/updateDeviceData'];
+            if (model._type === 'FrozenPump' ) {
+                this.buttonText = '修改';
+                this.showDeleteButton = true;
+                this.isUpdate = true;
+                this.form.code = model.code;
+                this.form.width = model.width;
+                this.form.pumpType = model.pumpType;
+                this.form.x = model.point.x;
+                this.form.y = model.point.y;
+            }
+        }
+    },
+    mounted() {
+
+    },
+    methods:{
+        onSubmit(form) {
+            this.$refs[form].validate((valid) => {
+                if (valid) {
+                    const frozenPumpModel = {
+                        point: {
+                            x: this.form.x,
+                            y: this.form.y
+                        },
+                        _type: 'FrozenPump',
+                        code: this.isUpdate ? this.form.code : getUID('FrozenPump', this.frozenPumpList),
+                        width: this.form.width,
+                        color:'#00ff00',
+                        pumpType:this.form.type
+                    };
+                    this.$emit('createFrozenPump', frozenPumpModel);
+                    this.initPage();
+                } else {
+                    return false;
+                }
+            });
+
+        },
+        initPage() {
+            this.isUpdate = false;
+            this.buttonText = '立即创建';
+            this.showDeleteButton = false;
+            this.form = {
+                code:'',
+                type:'',
+                width: 25,
+                x: 10,
+                y: 10
+            };
+            this.$refs.form.resetFields();
+        },
+        deleteDevice() {
+            const frozenPumpModel = {
+                point: {
+                    x: this.form.x,
+                    y: this.form.y
+                },
+                _type: 'FrozenPump',
+                code: this.form.code,
+                width: this.form.width,
+                color:'#00ff00',
+                pumpType:this.form.type
+            };
+            this.$emit('deleteDataModel', frozenPumpModel );
+            this.initPage();
+        }
+    }
+};
+</script>

src/views/system/iscsDraw/iscsBasOperate/index.vue

@@ -0,0 +1,153 @@
+<template>
+  <transition name="el-zoom-in-center">
+    <div class="map-control heightClass">
+      <el-card type="border-card" class="heightClass">
+        <div slot="header" class="clearfix">
+          <div style="display: inline-block;">111111</div>
+          <el-button
+            type="text"
+            style="float: right; padding: 3px 0; margin-right: 5px;"
+            @click="handleSave"
+          >{{ $t('ibp.save') }}</el-button>
+        </div>
+        <el-tabs v-model="enabledTab" class="mapEdit" type="card" @tab-click="handleTabClick">
+          <el-tab-pane label="冷冻泵/冷却泵" name="frozenPump">
+            <frozen-pump
+              ref="frozenPump"
+              style="width:90%"
+              @createFrozenPump="createDataModel"
+              @deleteDataModel="deleteDataModel"
+            />
+          </el-tab-pane>
+          <el-tab-pane label="冷水机组" name="chiller">
+            <chiller
+              ref="chiller"
+              style="width:90%"
+              @createChiller="createDataModel"
+              @deleteDataModel="deleteDataModel"
+            />
+          </el-tab-pane>
+          <el-tab-pane label="冷却塔" name="coolTower">
+            <cool-tower
+              ref="coolTower"
+              style="width:90%"
+              @createCoolTower="createDataModel"
+              @deleteDataModel="deleteDataModel"
+            />
+          </el-tab-pane>
+          <el-tab-pane label="排风机" name="ventilator">
+            <ventilator
+              ref="coolTower"
+              style="width:90%"
+              @createVentilator="createDataModel"
+              @deleteDataModel="deleteDataModel"
+            />
+          </el-tab-pane>
+          <el-tab-pane label="空调机" name="airConditioner">
+            <air-conditioner
+              ref="airConditioner"
+              style="width:90%"
+              @createAirConditioner="createDataModel"
+              @deleteDataModel="deleteDataModel"
+            />
+          </el-tab-pane>
+          <el-tab-pane label="轨道排风机" name="orbitalVentilator">
+            <orbital-ventilator
+              ref="orbitalVentilator"
+              style="width:90%"
+              @createOrbitalVentilator="createDataModel"
+              @deleteDataModel="deleteDataModel"
+            />
+          </el-tab-pane>
+          <el-tab-pane label="射流风机" name="jetFan">
+            <jet-fan
+              ref="jetFan"
+              style="width:90%"
+              @createJetFan="createDataModel"
+              @deleteDataModel="deleteDataModel"
+            />
+          </el-tab-pane>
+          <el-tab-pane label="隧道风机" name="tunnelFan">
+            <tunnel-fan
+              ref="tunnelFan"
+              style="width:90%"
+              @createTunnelFan="createDataModel"
+              @deleteDataModel="deleteDataModel"
+            />
+          </el-tab-pane>
+          <el-tab-pane label="防火阀" name="fireDamper">
+            <fire-damper
+              ref="fireDamper"
+              style="width:90%"
+              @createFireDamper="createDataModel"
+              @deleteDataModel="deleteDataModel"
+            />
+          </el-tab-pane>
+          <el-tab-pane label="防烟防火阀" name="smookProofFd">
+            <smook-proof-fd
+              ref="smookProofFd"
+              style="width:90%"
+              @createSmookProofFd="createDataModel"
+              @deleteDataModel="deleteDataModel"
+            />
+          </el-tab-pane>
+          <el-tab-pane>
+            <volume-control-damper
+              ref="volumeControlDamper"
+              style="width: 90%"
+              @createDataModel="createDataModel"
+              @deleteDataModel="deleteDataModel"
+            />
+          </el-tab-pane>
+        </el-tabs>
+      </el-card>
+    </div>
+  </transition>
+</template>
+<script>
+import {deviceFactory} from '@/iscs/utils/parser';
+import FrozenPump from './frozenPump';
+import Chiller from './chiller';
+import CoolTower from './coolTower';
+import Ventilator from './ventilator';
+import AirConditioner from './airConditioner';
+import OrbitalVentilator from './orbitalVentilator';
+import JetFan from './jetFan';
+import TunnelFan from './tunnelFan';
+import FireDamper from './fireDamper';
+import SmookProofFd from './smookProofFd';
+import VolumeControlDamper from './volumeControlDamper';
+
+export default {
+    name: 'IscsOperate',
+    components: {
+        FrozenPump,
+        Chiller,
+        CoolTower,
+        Ventilator,
+        AirConditioner,
+        OrbitalVentilator,
+        JetFan,
+        TunnelFan,
+        FireDamper,
+        SmookProofFd,
+        VolumeControlDamper
+    },
+    mixins: [
+    ],
+    data() {
+        return {
+            enabledTab: 'frozenPump'
+        };
+    },
+    methods:{
+        createDataModel(model) {
+            const newModel = deviceFactory(model._type, model);
+            this.$store.dispatch('iscs/updateIscsDevices', newModel.model);
+        }
+    }
+};
+</script>
+<style lang="scss" scoped>
+    .heightClass{height:100%;}
+</style>

src/views/system/iscsDraw/iscsBasOperate/jetFan.vue

@@ -0,0 +1,128 @@
+<template>
+  <div>
+    <el-form ref="form" :rules="rules" :model="form" label-width="100px">
+      <el-form-item v-if="isUpdate" label="编号" prop="code">
+        <el-input v-model="form.code" :disabled="true" />
+      </el-form-item>
+      <el-form-item label="图形宽度" prop="width">
+        <el-input-number v-model="form.width" :min="40" />
+      </el-form-item>
+      <el-form-item label="X轴坐标" prop="x">
+        <el-input-number v-model="form.x" controls-position="right" :min="1" />
+      </el-form-item>
+      <el-form-item label="Y轴坐标" prop="y">
+        <el-input-number v-model="form.y" controls-position="right" :min="1" />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="onSubmit('form')">{{ buttonText }}</el-button>
+        <el-button v-show="showDeleteButton" type="danger" @click="deleteDevice">{{ $t('global.delete') }}</el-button>
+        <el-button v-show="showDeleteButton" @click="initPage">{{ $t('global.cancel') }}</el-button>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+<script>
+import { mapGetters } from 'vuex';
+import {getUID} from '@/iscs/utils/Uid';
+export default {
+    name:'JetFan',
+    data() {
+        return {
+            isUpdate:false,
+            showDeleteButton: false,
+            buttonText: '立即创建',
+            form:{
+                code:'',
+                width: 40,
+                x: 10,
+                y: 10
+            },
+            rules: {
+                code: [
+                    { required: true, message:'请生成设备图形的编码', trigger: 'blur' }
+                ],
+                width:[
+                    { required: true, message:'请输入设备图形宽度', trigger: 'blur' }
+                ],
+                x: [
+                    { required: true, message: '请输入设备图形的X轴坐标', trigger: 'blur' }
+                ],
+                y: [
+                    { required: true, message: '请输入设备图形的Y轴坐标', trigger: 'blur' }
+                ]
+            }
+        };
+    },
+    computed:{
+        ...mapGetters('iscs', [
+            'jetFanList'
+        ])
+    },
+    watch:{
+        '$store.state.ibp.rightClickCount': function (val) {
+            const model = this.$store.getters['ibp/updateDeviceData'];
+            if (model._type === 'JetFan' ) {
+                this.buttonText = '修改';
+                this.showDeleteButton = true;
+                this.isUpdate = true;
+                this.form.code = model.code;
+                this.form.width = model.width;
+                this.form.x = model.point.x;
+                this.form.y = model.point.y;
+            }
+        }
+    },
+    mounted() {
+
+    },
+    methods:{
+        onSubmit(form) {
+            this.$refs[form].validate((valid) => {
+                if (valid) {
+                    const jetFanModel = {
+                        point: {
+                            x: this.form.x,
+                            y: this.form.y
+                        },
+                        _type: 'JetFan',
+                        code: this.isUpdate ? this.form.code : getUID('JetFan', this.jetFanList),
+                        width: this.form.width,
+                        color:'#00ff00'
+                    };
+                    this.$emit('createJetFan', jetFanModel);
+                    this.initPage();
+                } else {
+                    return false;
+                }
+            });
+
+        },
+        initPage() {
+            this.isUpdate = false;
+            this.buttonText = '立即创建';
+            this.showDeleteButton = false;
+            this.form = {
+                code:'',
+                width: 40,
+                x: 10,
+                y: 10
+            };
+            this.$refs.form.resetFields();
+        },
+        deleteDevice() {
+            const jetFanModel = {
+                point: {
+                    x: this.form.x,
+                    y: this.form.y
+                },
+                _type: 'JetFan',
+                code: this.form.code,
+                width: this.form.width,
+                color:'#00ff00'
+            };
+            this.$emit('deleteDataModel', jetFanModel );
+            this.initPage();
+        }
+    }
+};
+</script>

src/views/system/iscsDraw/iscsBasOperate/orbitalVentilator.vue

@@ -0,0 +1,128 @@
+<template>
+  <div>
+    <el-form ref="form" :rules="rules" :model="form" label-width="100px">
+      <el-form-item v-if="isUpdate" label="编号" prop="code">
+        <el-input v-model="form.code" :disabled="true" />
+      </el-form-item>
+      <el-form-item label="图形宽度" prop="width">
+        <el-input-number v-model="form.width" :min="40" />
+      </el-form-item>
+      <el-form-item label="X轴坐标" prop="x">
+        <el-input-number v-model="form.x" controls-position="right" :min="1" />
+      </el-form-item>
+      <el-form-item label="Y轴坐标" prop="y">
+        <el-input-number v-model="form.y" controls-position="right" :min="1" />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="onSubmit('form')">{{ buttonText }}</el-button>
+        <el-button v-show="showDeleteButton" type="danger" @click="deleteDevice">{{ $t('global.delete') }}</el-button>
+        <el-button v-show="showDeleteButton" @click="initPage">{{ $t('global.cancel') }}</el-button>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+<script>
+import { mapGetters } from 'vuex';
+import {getUID} from '@/iscs/utils/Uid';
+export default {
+    name:'OrbitalVentilator',
+    data() {
+        return {
+            isUpdate:false,
+            showDeleteButton: false,
+            buttonText: '立即创建',
+            form:{
+                code:'',
+                width: 40,
+                x: 10,
+                y: 10
+            },
+            rules: {
+                code: [
+                    { required: true, message:'请生成设备图形的编码', trigger: 'blur' }
+                ],
+                width:[
+                    { required: true, message:'请输入设备图形宽度', trigger: 'blur' }
+                ],
+                x: [
+                    { required: true, message: '请输入设备图形的X轴坐标', trigger: 'blur' }
+                ],
+                y: [
+                    { required: true, message: '请输入设备图形的Y轴坐标', trigger: 'blur' }
+                ]
+            }
+        };
+    },
+    computed:{
+        ...mapGetters('iscs', [
+            'orbitalVentilatorList'
+        ])
+    },
+    watch:{
+        '$store.state.ibp.rightClickCount': function (val) {
+            const model = this.$store.getters['ibp/updateDeviceData'];
+            if (model._type === 'OrbitalVentilator' ) {
+                this.buttonText = '修改';
+                this.showDeleteButton = true;
+                this.isUpdate = true;
+                this.form.code = model.code;
+                this.form.width = model.width;
+                this.form.x = model.point.x;
+                this.form.y = model.point.y;
+            }
+        }
+    },
+    mounted() {
+
+    },
+    methods:{
+        onSubmit(form) {
+            this.$refs[form].validate((valid) => {
+                if (valid) {
+                    const orbitalVentilatorModel = {
+                        point: {
+                            x: this.form.x,
+                            y: this.form.y
+                        },
+                        _type: 'OrbitalVentilator',
+                        code: this.isUpdate ? this.form.code : getUID('OrbitalVentilator', this.orbitalVentilatorList),
+                        width: this.form.width,
+                        color:'#00ff00'
+                    };
+                    this.$emit('createOrbitalVentilator', orbitalVentilatorModel);
+                    this.initPage();
+                } else {
+                    return false;
+                }
+            });
+
+        },
+        initPage() {
+            this.isUpdate = false;
+            this.buttonText = '立即创建';
+            this.showDeleteButton = false;
+            this.form = {
+                code:'',
+                width: 40,
+                x: 10,
+                y: 10
+            };
+            this.$refs.form.resetFields();
+        },
+        deleteDevice() {
+            const orbitalVentilatorModel = {
+                point: {
+                    x: this.form.x,
+                    y: this.form.y
+                },
+                _type: 'OrbitalVentilator',
+                code: this.form.code,
+                width: this.form.width,
+                color:'#00ff00'
+            };
+            this.$emit('deleteDataModel', orbitalVentilatorModel );
+            this.initPage();
+        }
+    }
+};
+</script>

src/views/system/iscsDraw/iscsBasOperate/smookProofFd.vue

@@ -0,0 +1,128 @@
+<template>
+  <div>
+    <el-form ref="form" :rules="rules" :model="form" label-width="100px">
+      <el-form-item v-if="isUpdate" label="编号" prop="code">
+        <el-input v-model="form.code" :disabled="true" />
+      </el-form-item>
+      <el-form-item label="图形宽度" prop="width">
+        <el-input-number v-model="form.width" :min="40" />
+      </el-form-item>
+      <el-form-item label="X轴坐标" prop="x">
+        <el-input-number v-model="form.x" controls-position="right" :min="1" />
+      </el-form-item>
+      <el-form-item label="Y轴坐标" prop="y">
+        <el-input-number v-model="form.y" controls-position="right" :min="1" />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="onSubmit('form')">{{ buttonText }}</el-button>
+        <el-button v-show="showDeleteButton" type="danger" @click="deleteDevice">{{ $t('global.delete') }}</el-button>
+        <el-button v-show="showDeleteButton" @click="initPage">{{ $t('global.cancel') }}</el-button>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+<script>
+import { mapGetters } from 'vuex';
+import {getUID} from '@/iscs/utils/Uid';
+export default {
+    name:'SmookProofFd',
+    data() {
+        return {
+            isUpdate:false,
+            showDeleteButton: false,
+            buttonText: '立即创建',
+            form:{
+                code:'',
+                width: 40,
+                x: 10,
+                y: 10
+            },
+            rules: {
+                code: [
+                    { required: true, message:'请生成设备图形的编码', trigger: 'blur' }
+                ],
+                width:[
+                    { required: true, message:'请输入设备图形宽度', trigger: 'blur' }
+                ],
+                x: [
+                    { required: true, message: '请输入设备图形的X轴坐标', trigger: 'blur' }
+                ],
+                y: [
+                    { required: true, message: '请输入设备图形的Y轴坐标', trigger: 'blur' }
+                ]
+            }
+        };
+    },
+    computed: {
+        ...mapGetters('iscs', [
+            'smookProofFdList'
+        ])
+    },
+    watch:{
+        '$store.state.ibp.rightClickCount': function (val) {
+            const model = this.$store.getters['ibp/updateDeviceData'];
+            if (model._type === 'SmookProofFd' ) {
+                this.buttonText = '修改';
+                this.showDeleteButton = true;
+                this.isUpdate = true;
+                this.form.code = model.code;
+                this.form.width = model.width;
+                this.form.x = model.point.x;
+                this.form.y = model.point.y;
+            }
+        }
+    },
+    mounted() {
+
+    },
+    methods:{
+        onSubmit(form) {
+            this.$refs[form].validate((valid) => {
+                if (valid) {
+                    const smookProofFdModel = {
+                        point: {
+                            x: this.form.x,
+                            y: this.form.y
+                        },
+                        _type: 'SmookProofFd',
+                        code: this.isUpdate ? this.form.code : getUID('SmookProofFd', this.smookProofFdList),
+                        width: this.form.width,
+                        color:'#00ff00'
+                    };
+                    this.$emit('createSmookProofFd', smookProofFdModel);
+                    this.initPage();
+                } else {
+                    return false;
+                }
+            });
+
+        },
+        initPage() {
+            this.isUpdate = false;
+            this.buttonText = '立即创建';
+            this.showDeleteButton = false;
+            this.form = {
+                code:'',
+                width: 40,
+                x: 10,
+                y: 10
+            };
+            this.$refs.form.resetFields();
+        },
+        deleteDevice() {
+            const smookProofFdModel = {
+                point: {
+                    x: this.form.x,
+                    y: this.form.y
+                },
+                _type: 'SmookProofFd',
+                code: this.form.code,
+                width: this.form.width,
+                color:'#00ff00'
+            };
+            this.$emit('deleteDataModel', smookProofFdModel );
+            this.initPage();
+        }
+    }
+};
+</script>

src/views/system/iscsDraw/iscsBasOperate/tunnelFan.vue

@@ -0,0 +1,127 @@
+<template>
+  <div>
+    <el-form ref="form" :rules="rules" :model="form" label-width="100px">
+      <el-form-item v-if="isUpdate" label="编号" prop="code">
+        <el-input v-model="form.code" :disabled="true" />
+      </el-form-item>
+      <el-form-item label="图形宽度" prop="width">
+        <el-input-number v-model="form.width" :min="40" />
+      </el-form-item>
+      <el-form-item label="X轴坐标" prop="x">
+        <el-input-number v-model="form.x" controls-position="right" :min="1" />
+      </el-form-item>
+      <el-form-item label="Y轴坐标" prop="y">
+        <el-input-number v-model="form.y" controls-position="right" :min="1" />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="onSubmit('form')">{{ buttonText }}</el-button>
+        <el-button v-show="showDeleteButton" type="danger" @click="deleteDevice">{{ $t('global.delete') }}</el-button>
+        <el-button v-show="showDeleteButton" @click="initPage">{{ $t('global.cancel') }}</el-button>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+<script>
+import { mapGetters } from 'vuex';
+import {getUID} from '@/iscs/utils/Uid';
+export default {
+    name:'TunnelFan',
+    data() {
+        return {
+            isUpdate:false,
+            showDeleteButton: false,
+            buttonText: '立即创建',
+            form:{
+                code:'',
+                width: 40,
+                x: 10,
+                y: 10
+            },
+            rules: {
+                code: [
+                    { required: true, message:'请生成设备图形的编码', trigger: 'blur' }
+                ],
+                width:[
+                    { required: true, message:'请输入设备图形宽度', trigger: 'blur' }
+                ],
+                x: [
+                    { required: true, message: '请输入设备图形的X轴坐标', trigger: 'blur' }
+                ],
+                y: [
+                    { required: true, message: '请输入设备图形的Y轴坐标', trigger: 'blur' }
+                ]
+            }
+        };
+    },
+    computed:{
+        ...mapGetters('iscs', [
+            'tunnelFanList'
+        ])
+    },
+    watch:{
+        '$store.state.ibp.rightClickCount': function (val) {
+            const model = this.$store.getters['ibp/updateDeviceData'];
+            if (model._type === 'TunnelFan' ) {
+                this.buttonText = '修改';
+                this.showDeleteButton = true;
+                this.isUpdate = true;
+                this.form.code = model.code;
+                this.form.width = model.width;
+                this.form.x = model.point.x;
+                this.form.y = model.point.y;
+            }
+        }
+    },
+    mounted() {
+
+    },
+    methods:{
+        onSubmit(form) {
+            this.$refs[form].validate((valid) => {
+                if (valid) {
+                    const tunnelFanModel = {
+                        point: {
+                            x: this.form.x,
+                            y: this.form.y
+                        },
+                        _type: 'TunnelFan',
+                        code: this.isUpdate ? this.form.code : getUID('TunnelFan', this.tunnelFanList),
+                        width: this.form.width,
+                        color:'#00ff00'
+                    };
+                    this.$emit('createTunnelFan', tunnelFanModel);
+                    this.initPage();
+                } else {
+                    return false;
+                }
+            });
+        },
+        initPage() {
+            this.isUpdate = false;
+            this.buttonText = '立即创建';
+            this.showDeleteButton = false;
+            this.form = {
+                code:'',
+                width: 40,
+                x: 10,
+                y: 10
+            };
+            this.$refs.form.resetFields();
+        },
+        deleteDevice() {
+            const tunnelFanModel = {
+                point: {
+                    x: this.form.x,
+                    y: this.form.y
+                },
+                _type: 'TunnelFan',
+                code: this.form.code,
+                width: this.form.width,
+                color:'#00ff00'
+            };
+            this.$emit('deleteDataModel', tunnelFanModel );
+            this.initPage();
+        }
+    }
+};
+</script>

src/views/system/iscsDraw/iscsBasOperate/ventilator.vue

@@ -0,0 +1,128 @@
+<template>
+  <div>
+    <el-form ref="form" :rules="rules" :model="form" label-width="100px">
+      <el-form-item v-if="isUpdate" label="编号" prop="code">
+        <el-input v-model="form.code" :disabled="true" />
+      </el-form-item>
+      <el-form-item label="图形宽度" prop="width">
+        <el-input-number v-model="form.width" :min="40" />
+      </el-form-item>
+      <el-form-item label="X轴坐标" prop="x">
+        <el-input-number v-model="form.x" controls-position="right" :min="1" />
+      </el-form-item>
+      <el-form-item label="Y轴坐标" prop="y">
+        <el-input-number v-model="form.y" controls-position="right" :min="1" />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="onSubmit('form')">{{ buttonText }}</el-button>
+        <el-button v-show="showDeleteButton" type="danger" @click="deleteDevice">{{ $t('global.delete') }}</el-button>
+        <el-button v-show="showDeleteButton" @click="initPage">{{ $t('global.cancel') }}</el-button>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+<script>
+import { mapGetters } from 'vuex';
+import {getUID} from '@/iscs/utils/Uid';
+export default {
+    name:'Ventilator',
+    data() {
+        return {
+            isUpdate:false,
+            showDeleteButton: false,
+            buttonText: '立即创建',
+            form:{
+                code:'',
+                width: 40,
+                x: 10,
+                y: 10
+            },
+            rules: {
+                code: [
+                    { required: true, message:'请生成设备图形的编码', trigger: 'blur' }
+                ],
+                width:[
+                    { required: true, message:'请输入设备图形宽度', trigger: 'blur' }
+                ],
+                x: [
+                    { required: true, message: '请输入设备图形的X轴坐标', trigger: 'blur' }
+                ],
+                y: [
+                    { required: true, message: '请输入设备图形的Y轴坐标', trigger: 'blur' }
+                ]
+            }
+        };
+    },
+    computed:{
+        ...mapGetters('iscs', [
+            'ventilatorList'
+        ])
+    },
+    watch:{
+        '$store.state.ibp.rightClickCount': function (val) {
+            const model = this.$store.getters['ibp/updateDeviceData'];
+            if (model._type === 'Ventilator' ) {
+                this.buttonText = '修改';
+                this.showDeleteButton = true;
+                this.isUpdate = true;
+                this.form.code = model.code;
+                this.form.width = model.width;
+                this.form.x = model.point.x;
+                this.form.y = model.point.y;
+            }
+        }
+    },
+    mounted() {
+
+    },
+    methods:{
+        onSubmit(form) {
+            this.$refs[form].validate((valid) => {
+                if (valid) {
+                    const chillerModel = {
+                        point: {
+                            x: this.form.x,
+                            y: this.form.y
+                        },
+                        _type: 'Ventilator',
+                        code: this.isUpdate ? this.form.code : getUID('Ventilator', this.ventilatorList),
+                        width: this.form.width,
+                        color:'#00ff00'
+                    };
+                    this.$emit('createVentilator', chillerModel);
+                    this.initPage();
+                } else {
+                    return false;
+                }
+            });
+
+        },
+        initPage() {
+            this.isUpdate = false;
+            this.buttonText = '立即创建';
+            this.showDeleteButton = false;
+            this.form = {
+                code:'',
+                width: 40,
+                x: 10,
+                y: 10
+            };
+            this.$refs.form.resetFields();
+        },
+        deleteDevice() {
+            const chillerModel = {
+                point: {
+                    x: this.form.x,
+                    y: this.form.y
+                },
+                _type: 'Ventilator',
+                code: this.form.code,
+                width: this.form.width,
+                color:'#00ff00'
+            };
+            this.$emit('deleteDataModel', chillerModel );
+            this.initPage();
+        }
+    }
+};
+</script>

src/views/system/iscsDraw/iscsBasOperate/volumeControlDamper.vue

@@ -0,0 +1,128 @@
+<template>
+  <div>
+    <el-form ref="form" :rules="rules" :model="form" label-width="100px">
+      <el-form-item v-if="isUpdate" label="编号" prop="code">
+        <el-input v-model="form.code" :disabled="true" />
+      </el-form-item>
+      <el-form-item label="图形宽度" prop="width">
+        <el-input-number v-model="form.width" :min="40" />
+      </el-form-item>
+      <el-form-item label="X轴坐标" prop="x">
+        <el-input-number v-model="form.x" controls-position="right" :min="1" />
+      </el-form-item>
+      <el-form-item label="Y轴坐标" prop="y">
+        <el-input-number v-model="form.y" controls-position="right" :min="1" />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="onSubmit('form')">{{ buttonText }}</el-button>
+        <el-button v-show="showDeleteButton" type="danger" @click="deleteDevice">{{ $t('global.delete') }}</el-button>
+        <el-button v-show="showDeleteButton" @click="initPage">{{ $t('global.cancel') }}</el-button>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+<script>
+import { mapGetters } from 'vuex';
+import {getUID} from '@/iscs/utils/Uid';
+export default {
+    name:'VolumeControlDamper',
+    data() {
+        return {
+            isUpdate:false,
+            showDeleteButton: false,
+            buttonText: '立即创建',
+            form:{
+                code:'',
+                width: 40,
+                x: 10,
+                y: 10
+            },
+            rules: {
+                code: [
+                    { required: true, message:'请生成设备图形的编码', trigger: 'blur' }
+                ],
+                width:[
+                    { required: true, message:'请输入设备图形宽度', trigger: 'blur' }
+                ],
+                x: [
+                    { required: true, message: '请输入设备图形的X轴坐标', trigger: 'blur' }
+                ],
+                y: [
+                    { required: true, message: '请输入设备图形的Y轴坐标', trigger: 'blur' }
+                ]
+            }
+        };
+    },
+    computed:{
+        ...mapGetters('iscs', [
+            'volumeControlDamperList'
+        ])
+    },
+    watch:{
+        '$store.state.iscs.rightClickCount': function (val) {
+            const model = this.$store.getters['iscs/updateDeviceData'];
+            if (model._type === 'VolumeControlDamper' ) {
+                this.buttonText = '修改';
+                this.showDeleteButton = true;
+                this.isUpdate = true;
+                this.form.code = model.code;
+                this.form.width = model.width;
+                this.form.x = model.point.x;
+                this.form.y = model.point.y;
+            }
+        }
+    },
+    mounted() {
+
+    },
+    methods:{
+        onSubmit(form) {
+            this.$refs[form].validate((valid) => {
+                if (valid) {
+                    const newModel = {
+                        point: {
+                            x: this.form.x,
+                            y: this.form.y
+                        },
+                        _type: 'AirConditioner',
+                        code: this.isUpdate ? this.form.code : getUID('VolumeControlDamper', this.volumeControlDamperList),
+                        width: this.form.width,
+                        color:'#00ff00'
+                    };
+                    this.$emit('createDataModel', newModel);
+                    this.initPage();
+                } else {
+                    return false;
+                }
+            });
+
+        },
+        initPage() {
+            this.isUpdate = false;
+            this.buttonText = '立即创建';
+            this.showDeleteButton = false;
+            this.form = {
+                code:'',
+                width: 40,
+                x: 10,
+                y: 10
+            };
+            this.$refs.form.resetFields();
+        },
+        deleteDevice() {
+            const newModel = {
+                point: {
+                    x: this.form.x,
+                    y: this.form.y
+                },
+                _type: 'VolumeControlDamper',
+                code: this.form.code,
+                width: this.form.width,
+                color:'#00ff00'
+            };
+            this.$emit('deleteDataModel', newModel );
+            this.initPage();
+        }
+    }
+};
+</script>

src/views/system/iscsDraw/iscsCctvOperate/index.vue

@@ -0,0 +1,95 @@
+<template>
+  <transition name="el-zoom-in-center">
+    <div class="map-control heightClass">
+      <el-card type="border-card" class="heightClass">
+        <div slot="header" class="clearfix">
+          <el-button
+            type="text"
+            style="float: right; padding: 3px 0; margin-right: 5px;"
+            @click="handleSave"
+          >{{ $t('ibp.save') }}</el-button>
+        </div>
+        <el-tabs v-model="enabledTab" class="mapEdit" type="card" @tab-click="handleTabClick">
+          <el-tab-pane label="固定摄像机" name="vidicon">
+            <vidicon
+              ref="vidiconCloud"
+              style="width:90%"
+              @createDataModel="createDataModel"
+              @deleteDataModel="deleteDataModel"
+            />
+          </el-tab-pane>
+          <el-tab-pane label="云台摄像机" name="vidiconCloud">
+            <vidicon-cloud
+              ref="vidicon"
+              style="width:90%"
+              @createDataModel="createDataModel"
+              @deleteDataModel="deleteDataModel"
+            />
+          </el-tab-pane>
+        </el-tabs>
+      </el-card>
+    </div>
+  </transition>
+</template>
+<script>
+import {deviceFactory} from '@/iscs/utils/parser';
+import Vidicon from './vidicon';
+import VidiconCloud from './vidiconCloud';
+
+export default {
+    name: 'IscsOperate',
+    components: {
+        Vidicon,
+        VidiconCloud
+    },
+    mixins: [
+    ],
+    data() {
+        return {
+            enabledTab: 'vidicon',
+            data: '',
+            stationCode: ''
+        };
+    },
+    computed: {
+        height() {
+            return this.$store.state.config.height;
+        }
+    },
+    watch: {
+        '$store.state.iscs.rightClickCount': function (val) {
+            const model = this.$store.getters['iscs/updateDeviceData'];
+            this.enabledTab = model._type;
+        }
+    },
+    mounted() {
+    },
+    beforeDestroy() {
+
+    },
+    methods: {
+        createDataModel(model) {
+            const newModel = deviceFactory(model._type, model);
+            this.$store.dispatch('iscs/updateIscsDevices', newModel.model);
+        },
+        deleteDataModel(model) {
+            this.$store.dispatch('iscs/deleteIscsDevices', model);
+        },
+        handleSave() {
+            const data = JSON.stringify(this.$store.state.iscs.iscs);
+            console.log(data);
+        },
+        handleTabClick() {
+
+        }
+    }
+};
+</script>
+<style rel="stylesheet/scss" lang="scss" scoped>
+    @import "src/styles/mixin.scss";
+    .map-control {
+        float: right;
+        width: 100%;
+    }
+    .heightClass{height:100%;}
+</style>

src/views/system/iscsDraw/iscsCctvOperate/vidicon.vue

@@ -0,0 +1,125 @@
+<template>
+  <div>
+    <el-form ref="form" :rule="rules" :model="addModel" label-width="100px">
+      <el-form-item label="宽度">
+        <el-input-number v-model="addModel.width" />
+      </el-form-item>
+      <el-form-item label="X轴坐标">
+        <el-input-number v-model="addModel.x" />
+      </el-form-item>
+      <el-form-item label="Y轴坐标">
+        <el-input-number v-model="addModel.y" />
+      </el-form-item>
+      <el-form-item label="镜头向右">
+        <el-checkbox v-model="addModel.right" />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="onSubmit()">{{ buttonText }}</el-button>
+        <el-button v-show="showDeleteButton" type="danger" @click="deleteDevice">{{ $t('global.delete') }}</el-button>
+        <!-- <el-button v-show="showDeleteButton" @click="initPage">{{ $t('global.cancel') }}</el-button> -->
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<script>
+// 车站摄像机
+import { mapGetters } from 'vuex';
+import {getUID} from '@/iscs/utils/Uid';
+
+export default {
+    name: 'ManualAlarmButton',
+    data() {
+        return {
+            addModel:{
+                code: '',
+                width: 50,
+                x: 10,
+                y: 10,
+                right: true
+            },
+            rules: {
+                width:[{ required: true, message:'请输入宽度', trigger: 'blur' }],
+                x: [{ required: true, message: '请输入X轴坐标', trigger: 'blur' }],
+                y: [{ required: true, message: '请输入Y轴坐标', trigger: 'blur' }]
+            },
+            showDeleteButton: false,
+            buttonText: '立即创建'
+        };
+    },
+    computed: {
+        ...mapGetters('iscs', [
+            'vidiconList'
+        ])
+    },
+    methods: {
+        onSubmit(form) {
+            this.$refs.form.validate((valid) => {
+                if (valid) {
+                    const Uid = getUID('Vidicon', this.vidiconList);
+                    const model = {
+                        _type: 'Vidicon',
+                        code: Uid,
+                        width: this.addModel.width,
+                        right: this.addModel.right,
+                        point: {
+                            x: this.addModel.x,
+                            y: this.addModel.y
+                        }
+                    };
+                    this.$emit('createDataModel', model);
+                    this.initPage();
+                } else {
+                    return false;
+                }
+            });
+        },
+        deleteDevice() {
+            // const selected = this.$store.getters['map/getDeviceByCode'](this.editModel.code);
+            // if (selected && selected._type.toUpperCase() === 'Psd'.toUpperCase()) {
+            //     const _that = this;
+            //     this.$confirm(this.$t('tip.confirmDeletion'), this.$t('tip.hint'), {
+            //         confirmButtonText: this.$t('tip.confirm'),
+            //         cancelButtonText: this.$t('tip.cancel'),
+            //         type: 'warning'
+            //     }).then(() => {
+            //         _that.$emit('updateMapModel', {...selected, _dispose: true});
+            //         _that.deviceSelect();
+            //         this.$refs.dataform.resetFields();
+            //     }).catch(() => {
+            //         _that.$message.info(this.$t('tip.cancelledDelete'));
+            //     });
+            // }
+            const model = {
+                _type: 'Vidicon',
+                code: this.addModel.code,
+                width: this.addModel.width,
+                right: this.addModel.right,
+                point: {
+                    x: this.addModel.x,
+                    y: this.addModel.y
+                }
+            };
+            this.$emit('deleteDataModel', model);
+            this.initPage();
+        },
+        initPage() {
+            this.isUpdate = false;
+            this.buttonText = '立即创建';
+            this.showDeleteButton = false;
+            this.addModel = {
+                code: '',
+                width: 50,
+                x: 10,
+                y: 10,
+                right: true
+            };
+        }
+    }
+
+};
+</script>
+
+<style scoped>
+
+</style>

src/views/system/iscsDraw/iscsCctvOperate/vidiconCloud.vue

@@ -0,0 +1,118 @@
+<template>
+  <div>
+    <el-form ref="form" :rule="rules" :model="addModel" label-width="100px">
+      <el-form-item label="半径">
+        <el-input-number v-model="addModel.r" />
+      </el-form-item>
+      <el-form-item label="X轴坐标">
+        <el-input-number v-model="addModel.x" />
+      </el-form-item>
+      <el-form-item label="Y轴坐标">
+        <el-input-number v-model="addModel.y" />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="onSubmit()">{{ buttonText }}</el-button>
+        <el-button v-show="showDeleteButton" type="danger" @click="deleteDevice">{{ $t('global.delete') }}</el-button>
+        <!-- <el-button v-show="showDeleteButton" @click="initPage">{{ $t('global.cancel') }}</el-button> -->
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<script>
+// 车站摄像机
+import { mapGetters } from 'vuex';
+import {getUID} from '@/iscs/utils/Uid';
+
+export default {
+    name: 'ManualAlarmButton',
+    data() {
+        return {
+            addModel:{
+                code: '',
+                r: 30,
+                x: 10,
+                y: 10
+            },
+            rules: {
+                width:[{ required: true, message:'请输入宽度', trigger: 'blur' }],
+                x: [{ required: true, message: '请输入X轴坐标', trigger: 'blur' }],
+                y: [{ required: true, message: '请输入Y轴坐标', trigger: 'blur' }]
+            },
+            showDeleteButton: false,
+            buttonText: '立即创建'
+        };
+    },
+    computed: {
+        ...mapGetters('iscs', [
+            'vidiconCloudList'
+        ])
+    },
+    methods: {
+        onSubmit(form) {
+            this.$refs.form.validate((valid) => {
+                if (valid) {
+                    const Uid = getUID('VidiconCloud', this.vidiconCloudList);
+                    const model = {
+                        _type: 'VidiconCloud',
+                        code: Uid,
+                        r: this.addModel.r,
+                        point: {
+                            x: this.addModel.x,
+                            y: this.addModel.y
+                        }
+                    };
+                    this.$emit('createDataModel', model);
+                    this.initPage();
+                } else {
+                    return false;
+                }
+            });
+        },
+        deleteDevice() {
+            // const selected = this.$store.getters['map/getDeviceByCode'](this.editModel.code);
+            // if (selected && selected._type.toUpperCase() === 'Psd'.toUpperCase()) {
+            //     const _that = this;
+            //     this.$confirm(this.$t('tip.confirmDeletion'), this.$t('tip.hint'), {
+            //         confirmButtonText: this.$t('tip.confirm'),
+            //         cancelButtonText: this.$t('tip.cancel'),
+            //         type: 'warning'
+            //     }).then(() => {
+            //         _that.$emit('updateMapModel', {...selected, _dispose: true});
+            //         _that.deviceSelect();
+            //         this.$refs.dataform.resetFields();
+            //     }).catch(() => {
+            //         _that.$message.info(this.$t('tip.cancelledDelete'));
+            //     });
+            // }
+            const model = {
+                point: {
+                    x: this.addModel.x,
+                    y: this.addModel.y
+                },
+                code: this.addModel.code,
+                _type: 'VidiconCloud',
+                width: this.addModel.width
+            };
+            this.$emit('deleteDataModel', model);
+            this.initPage();
+        },
+        initPage() {
+            this.isUpdate = false;
+            this.buttonText = '立即创建';
+            this.showDeleteButton = false;
+            this.addModel = {
+                code: '',
+                r: 30,
+                x: 10,
+                y: 10
+            };
+        }
+    }
+
+};
+</script>
+
+<style scoped>
+
+</style>

src/views/system/iscsDraw/iscsOperate/fireHydranAlarmButton.vue

@@ -0,0 +1,117 @@
+<template>
+  <div>
+    <el-form ref="form" :rule="rules" :model="addModel" label-width="100px">
+      <el-form-item v-if="isUpdate" label="按钮编号" prop="code">
+        <el-input v-model="addModel.code" :disabled="true" />
+      </el-form-item>
+      <el-form-item label="图形宽度" prop="width">
+        <el-input-number v-model="addModel.width" />
+      </el-form-item>
+      <el-form-item label="X轴坐标" prop="x">
+        <el-input-number v-model="addModel.x" />
+      </el-form-item>
+      <el-form-item label="Y轴坐标" prop="y">
+        <el-input-number v-model="addModel.y" />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="onSubmit('form')">{{ buttonText }}</el-button>
+        <el-button v-show="showDeleteButton" type="danger" @click="deleteDevice">{{ $t('global.delete') }}</el-button>
+        <el-button v-show="showDeleteButton" @click="initPage">{{ $t('global.cancel') }}</el-button>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+<script>
+import { mapGetters } from 'vuex';
+import {getUID} from '@/iscs/utils/Uid';
+export default {
+    name: 'FireHydranAlarmButton',
+    data() {
+        return {
+            addModel:{
+                code: '',
+                width: 25,
+                x: 10,
+                y: 10
+            },
+            rules: {
+                width:[{ required: true, message:'请输入设备图形宽度', trigger: 'blur' }],
+                x: [{ required: true, message: '请输入设备图形的X轴坐标', trigger: 'blur' }],
+                y: [{ required: true, message: '请输入设备图形的Y轴坐标', trigger: 'blur' }]
+            },
+            isUpdate: false,
+            showDeleteButton: false,
+            buttonText: '立即创建'
+        };
+    },
+    computed:{
+        ...mapGetters('iscs', [
+            'fireHydranAlarmButtonList'
+        ])
+    },
+    watch:{
+        '$store.state.iscs.rightClickCount': function (val) {
+            const model = this.$store.getters['iscs/updateDeviceData'];
+            if (model._type === 'FireHydranAlarmButton' ) {
+                this.buttonText = '修改';
+                this.showDeleteButton = true;
+                this.isUpdate = true;
+                this.form.code = model.code;
+                this.form.width = model.width;
+                this.form.x = model.point.x;
+                this.form.y = model.point.y;
+            }
+        }
+    },
+    methods: {
+        onSubmit(form) {
+            this.$refs[form].validate((valid) => {
+                if (valid) {
+                    const maButtonModel = {
+                        point: {
+                            x: this.addModel.x,
+                            y: this.addModel.y
+                        },
+                        code: this.isUpdate ? this.form.code : getUID('VolumeControlDamper', this.fireHydranAlarmButtonList),
+                        _type: 'FireHydranAlarmButton',
+                        width: this.addModel.width
+                    };
+                    this.$emit('createDataModel', maButtonModel);
+                    this.initPage();
+                } else {
+                    return false;
+                }
+            });
+        },
+        deleteDevice() {
+            const maButtonModel = {
+                point: {
+                    x: this.addModel.x,
+                    y: this.addModel.y
+                },
+                code: this.addModel.code,
+                _type: 'FireHydranAlarmButton',
+                width: this.addModel.width
+            };
+            this.$emit('deleteDataModel', maButtonModel);
+            this.initPage();
+        },
+        initPage() {
+            this.isUpdate = false;
+            this.buttonText = '立即创建';
+            this.showDeleteButton = false;
+            this.addModel = {
+                code: '',
+                width: 25,
+                x: 10,
+                y: 10
+            };
+        }
+    }
+
+};
+</script>
+
+<style scoped>
+
+</style>

src/views/system/iscsDraw/iscsOperate/gasFireControl.vue

@@ -0,0 +1,103 @@
+<template>
+  <div>
+    <el-form ref="form" :rule="rules" :model="addModel" label-width="100px">
+      <el-form-item v-if="addModel.code" label="按钮编号" prop="code">
+        <el-input v-model="addModel.code" />
+      </el-form-item>
+      <el-form-item label="图形宽度" prop="width">
+        <el-input-number v-model="addModel.width" />
+      </el-form-item>
+      <el-form-item label="X轴坐标" prop="x">
+        <el-input-number v-model="addModel.x" />
+      </el-form-item>
+      <el-form-item label="Y轴坐标" prop="y">
+        <el-input-number v-model="addModel.y" />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="onSubmit('form')">{{ buttonText }}</el-button>
+        <el-button v-show="showDeleteButton" type="danger" @click="deleteDevice">{{ $t('global.delete') }}</el-button>
+        <el-button v-show="showDeleteButton" @click="initPage">{{ $t('global.cancel') }}</el-button>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<script>
+export default {
+    name: 'GasFireControl',
+    data() {
+        return {
+            addModel:{
+                code: '',
+                width: 25,
+                x: 10,
+                y: 10
+            },
+            rules: {
+                width:[{ required: true, message:'请输入设备图形宽度', trigger: 'blur' }],
+                x: [{ required: true, message: '请输入设备图形的X轴坐标', trigger: 'blur' }],
+                y: [{ required: true, message: '请输入设备图形的Y轴坐标', trigger: 'blur' }]
+            },
+            showDeleteButton: false,
+            buttonText: '立即创建'
+        };
+    },
+    methods: {
+        onSubmit(form) {
+            if (!this.addModel.code) {
+                this.generateCode();
+            }
+            this.$refs[form].validate((valid) => {
+                if (valid) {
+                    const maButtonModel = {
+                        point: {
+                            x: this.addModel.x,
+                            y: this.addModel.y
+                        },
+                        code: this.addModel.code,
+                        _type: 'gasFireControl',
+                        width: this.addModel.width
+                    };
+                    this.$emit('createDataModel', maButtonModel);
+                    this.initPage();
+                } else {
+                    return false;
+                }
+            });
+        },
+        deleteDevice() {
+            const maButtonModel = {
+                point: {
+                    x: this.addModel.x,
+                    y: this.addModel.y
+                },
+                code: this.addModel.code,
+                _type: 'gasFireControl',
+                width: this.addModel.width
+            };
+            this.$emit('deleteDataModel', maButtonModel);
+            this.initPage();
+        },
+        initPage() {
+            this.isUpdate = false;
+            this.buttonText = '立即创建';
+            this.showDeleteButton = false;
+            this.addModel = {
+                code: '',
+                width: 25,
+                x: 10,
+                y: 10
+            };
+        },
+        generateCode() {
+            const mydate = new Date();
+            this.addModel.code = 'gasFireControl_' + mydate.getDay() + mydate.getHours() + mydate.getMinutes() + mydate.getSeconds() + mydate.getMilliseconds() + Math.round(Math.random() * 10000);
+        }
+    }
+
+};
+</script>
+
+<style scoped>
+
+</style>

src/views/system/iscsDraw/iscsOperate/index.vue

@@ -0,0 +1,125 @@
+<template>
+  <transition name="el-zoom-in-center">
+    <div class="map-control heightClass">
+      <el-card type="border-card" class="heightClass">
+        <div slot="header" class="clearfix">
+          <el-button
+            type="text"
+            style="float: right; padding: 3px 0; margin-right: 5px;"
+            @click="handleSave"
+          >{{ $t('ibp.save') }}</el-button>
+        </div>
+        <el-tabs v-model="enabledTab" class="mapEdit" type="card" @tab-click="handleTabClick">
+          <el-tab-pane label="手动报警按钮" name="maButton">
+            <manual-alarm-button
+              ref="maButton"
+              style="width:90%"
+              @createDataModel="createDataModel"
+              @deleteDataModel="deleteDataModel"
+            />
+          </el-tab-pane>
+          <el-tab-pane label="消火栓报警按钮" name="fhaButton">
+            <fire-hydran-alarm-button
+              ref="fhaButton"
+              style="width: 90%"
+              @createDataModel="createDataModel"
+              @deleteDataModel="deleteDataModel"
+            />
+          </el-tab-pane>
+          <el-tab-pane label="气体灭火" name="gasFireControl">
+            <gas-fire-control
+              ref="gasFireControl"
+              style="width: 90%;"
+              @createDataModel="createDataModel"
+              @deleteDataModel="deleteDataModel"
+            />
+          </el-tab-pane>
+          <el-tab-pane label="烟感探测器" name="smokeDetector">
+            <smoke-detector
+              ref="smokeDetector"
+              style="width: 90%;"
+              @createDataModel="createDataModel"
+              @deleteDataModel="deleteDataModel"
+            />
+          </el-tab-pane>
+          <el-tab-pane label="温度探测器" name="temperatureDetector">
+            <temperature-detector
+              ref="temperatureDetector"
+              style="width: 90%"
+              @createDataModel="createDataModel"
+              @deleteDataModel="deleteDataModel"
+            />
+          </el-tab-pane>
+        </el-tabs>
+      </el-card>
+    </div>
+  </transition>
+</template>
+<script>
+import {deviceFactory} from '@/iscs/utils/parser';
+import ManualAlarmButton from './manualAlarmButton';
+import FireHydranAlarmButton from './fireHydranAlarmButton';
+import GasFireControl from './gasFireControl';
+import SmokeDetector from './smokeDetector';
+import TemperatureDetector from './temperatureDetector';
+
+export default {
+    name: 'IscsOperate',
+    components: {
+        ManualAlarmButton,
+        FireHydranAlarmButton,
+        GasFireControl,
+        SmokeDetector,
+        TemperatureDetector
+    },
+    mixins: [
+    ],
+    data() {
+        return {
+            enabledTab: 'maButton',
+            data: '',
+            stationCode: ''
+        };
+    },
+    computed: {
+        height() {
+            return this.$store.state.config.height;
+        }
+    },
+    watch: {
+        '$store.state.iscs.rightClickCount': function (val) {
+            const model = this.$store.getters['iscs/updateDeviceData'];
+            this.enabledTab = model._type;
+        }
+    },
+    mounted() {
+    },
+    beforeDestroy() {
+
+    },
+    methods: {
+        createDataModel(model) {
+            const newModel = deviceFactory(model._type, model);
+            this.$store.dispatch('iscs/updateIscsDevices', newModel.model);
+        },
+        deleteDataModel(model) {
+            this.$store.dispatch('iscs/deleteIscsDevices', model);
+        },
+        handleSave() {
+            const data = JSON.stringify(this.$store.state.iscs.iscs);
+            console.log(data);
+        },
+        handleTabClick() {
+
+        }
+    }
+};
+</script>
+<style rel="stylesheet/scss" lang="scss" scoped>
+    @import "src/styles/mixin.scss";
+    .map-control {
+        float: right;
+        width: 100%;
+    }
+    .heightClass{height:100%;}
+</style>

src/views/system/iscsDraw/iscsOperate/manualAlarmButton.vue

@@ -0,0 +1,103 @@
+<template>
+  <div>
+    <el-form ref="form" :rule="rules" :model="addModel" label-width="100px">
+      <el-form-item v-if="addModel.code" label="按钮编号" prop="code">
+        <el-input v-model="addModel.code" />
+      </el-form-item>
+      <el-form-item label="图形宽度" prop="width">
+        <el-input-number v-model="addModel.width" />
+      </el-form-item>
+      <el-form-item label="X轴坐标" prop="x">
+        <el-input-number v-model="addModel.x" />
+      </el-form-item>
+      <el-form-item label="Y轴坐标" prop="y">
+        <el-input-number v-model="addModel.y" />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="onSubmit('form')">{{ buttonText }}</el-button>
+        <el-button v-show="showDeleteButton" type="danger" @click="deleteDevice">{{ $t('global.delete') }}</el-button>
+        <el-button v-show="showDeleteButton" @click="initPage">{{ $t('global.cancel') }}</el-button>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<script>
+export default {
+    name: 'ManualAlarmButton',
+    data() {
+        return {
+            addModel:{
+                code: '',
+                width: 25,
+                x: 10,
+                y: 10
+            },
+            rules: {
+                width:[{ required: true, message:'请输入设备图形宽度', trigger: 'blur' }],
+                x: [{ required: true, message: '请输入设备图形的X轴坐标', trigger: 'blur' }],
+                y: [{ required: true, message: '请输入设备图形的Y轴坐标', trigger: 'blur' }]
+            },
+            showDeleteButton: false,
+            buttonText: '立即创建'
+        };
+    },
+    methods: {
+        onSubmit(form) {
+            if (!this.addModel.code) {
+                this.generateCode();
+            }
+            this.$refs[form].validate((valid) => {
+                if (valid) {
+                    const maButtonModel = {
+                        point: {
+                            x: this.addModel.x,
+                            y: this.addModel.y
+                        },
+                        code: this.addModel.code,
+                        _type: 'manualAlarmButton',
+                        width: this.addModel.width
+                    };
+                    this.$emit('createDataModel', maButtonModel);
+                    this.initPage();
+                } else {
+                    return false;
+                }
+            });
+        },
+        deleteDevice() {
+            const maButtonModel = {
+                point: {
+                    x: this.addModel.x,
+                    y: this.addModel.y
+                },
+                code: this.addModel.code,
+                _type: 'manualAlarmButton',
+                width: this.addModel.width
+            };
+            this.$emit('deleteDataModel', maButtonModel);
+            this.initPage();
+        },
+        initPage() {
+            this.isUpdate = false;
+            this.buttonText = '立即创建';
+            this.showDeleteButton = false;
+            this.addModel = {
+                code: '',
+                width: 25,
+                x: 10,
+                y: 10
+            };
+        },
+        generateCode() {
+            const mydate = new Date();
+            this.addModel.code = 'manualAlarmButton_' + mydate.getDay() + mydate.getHours() + mydate.getMinutes() + mydate.getSeconds() + mydate.getMilliseconds() + Math.round(Math.random() * 10000);
+        }
+    }
+
+};
+</script>
+
+<style scoped>
+
+</style>

src/views/system/iscsDraw/iscsOperate/smokeDetector.vue

@@ -0,0 +1,103 @@
+<template>
+  <div>
+    <el-form ref="form" :rule="rules" :model="addModel" label-width="100px">
+      <el-form-item v-if="addModel.code" label="按钮编号" prop="code">
+        <el-input v-model="addModel.code" />
+      </el-form-item>
+      <el-form-item label="图形宽度" prop="width">
+        <el-input-number v-model="addModel.width" />
+      </el-form-item>
+      <el-form-item label="X轴坐标" prop="x">
+        <el-input-number v-model="addModel.x" />
+      </el-form-item>
+      <el-form-item label="Y轴坐标" prop="y">
+        <el-input-number v-model="addModel.y" />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="onSubmit('form')">{{ buttonText }}</el-button>
+        <el-button v-show="showDeleteButton" type="danger" @click="deleteDevice">{{ $t('global.delete') }}</el-button>
+        <el-button v-show="showDeleteButton" @click="initPage">{{ $t('global.cancel') }}</el-button>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<script>
+export default {
+    name: 'GasFireControl',
+    data() {
+        return {
+            addModel:{
+                code: '',
+                width: 25,
+                x: 10,
+                y: 10
+            },
+            rules: {
+                width:[{ required: true, message:'请输入设备图形宽度', trigger: 'blur' }],
+                x: [{ required: true, message: '请输入设备图形的X轴坐标', trigger: 'blur' }],
+                y: [{ required: true, message: '请输入设备图形的Y轴坐标', trigger: 'blur' }]
+            },
+            showDeleteButton: false,
+            buttonText: '立即创建'
+        };
+    },
+    methods: {
+        onSubmit(form) {
+            if (!this.addModel.code) {
+                this.generateCode();
+            }
+            this.$refs[form].validate((valid) => {
+                if (valid) {
+                    const maButtonModel = {
+                        point: {
+                            x: this.addModel.x,
+                            y: this.addModel.y
+                        },
+                        code: this.addModel.code,
+                        _type: 'smokeDetector',
+                        width: this.addModel.width
+                    };
+                    this.$emit('createDataModel', maButtonModel);
+                    this.initPage();
+                } else {
+                    return false;
+                }
+            });
+        },
+        deleteDevice() {
+            const maButtonModel = {
+                point: {
+                    x: this.addModel.x,
+                    y: this.addModel.y
+                },
+                code: this.addModel.code,
+                _type: 'smokeDetector',
+                width: this.addModel.width
+            };
+            this.$emit('deleteDataModel', maButtonModel);
+            this.initPage();
+        },
+        initPage() {
+            this.isUpdate = false;
+            this.buttonText = '立即创建';
+            this.showDeleteButton = false;
+            this.addModel = {
+                code: '',
+                width: 25,
+                x: 10,
+                y: 10
+            };
+        },
+        generateCode() {
+            const mydate = new Date();
+            this.addModel.code = 'smokeDetector_' + mydate.getDay() + mydate.getHours() + mydate.getMinutes() + mydate.getSeconds() + mydate.getMilliseconds() + Math.round(Math.random() * 10000);
+        }
+    }
+
+};
+</script>
+
+<style scoped>
+
+</style>

src/views/system/iscsDraw/iscsOperate/temperatureDetector.vue

@@ -0,0 +1,103 @@
+<template>
+  <div>
+    <el-form ref="form" :rule="rules" :model="addModel" label-width="100px">
+      <el-form-item v-if="addModel.code" label="按钮编号" prop="code">
+        <el-input v-model="addModel.code" />
+      </el-form-item>
+      <el-form-item label="图形宽度" prop="width">
+        <el-input-number v-model="addModel.width" />
+      </el-form-item>
+      <el-form-item label="X轴坐标" prop="x">
+        <el-input-number v-model="addModel.x" />
+      </el-form-item>
+      <el-form-item label="Y轴坐标" prop="y">
+        <el-input-number v-model="addModel.y" />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="onSubmit('form')">{{ buttonText }}</el-button>
+        <el-button v-show="showDeleteButton" type="danger" @click="deleteDevice">{{ $t('global.delete') }}</el-button>
+        <el-button v-show="showDeleteButton" @click="initPage">{{ $t('global.cancel') }}</el-button>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<script>
+export default {
+    name: 'TemperatureDetector',
+    data() {
+        return {
+            addModel:{
+                code: '',
+                width: 25,
+                x: 10,
+                y: 10
+            },
+            rules: {
+                width:[{ required: true, message:'请输入设备图形宽度', trigger: 'blur' }],
+                x: [{ required: true, message: '请输入设备图形的X轴坐标', trigger: 'blur' }],
+                y: [{ required: true, message: '请输入设备图形的Y轴坐标', trigger: 'blur' }]
+            },
+            showDeleteButton: false,
+            buttonText: '立即创建'
+        };
+    },
+    methods: {
+        onSubmit(form) {
+            if (!this.addModel.code) {
+                this.generateCode();
+            }
+            this.$refs[form].validate((valid) => {
+                if (valid) {
+                    const maButtonModel = {
+                        point: {
+                            x: this.addModel.x,
+                            y: this.addModel.y
+                        },
+                        code: this.addModel.code,
+                        _type: 'temperatureDetector',
+                        width: this.addModel.width
+                    };
+                    this.$emit('createDataModel', maButtonModel);
+                    this.initPage();
+                } else {
+                    return false;
+                }
+            });
+        },
+        deleteDevice() {
+            const maButtonModel = {
+                point: {
+                    x: this.addModel.x,
+                    y: this.addModel.y
+                },
+                code: this.addModel.code,
+                _type: 'temperatureDetector',
+                width: this.addModel.width
+            };
+            this.$emit('deleteDataModel', maButtonModel);
+            this.initPage();
+        },
+        initPage() {
+            this.isUpdate = false;
+            this.buttonText = '立即创建';
+            this.showDeleteButton = false;
+            this.addModel = {
+                code: '',
+                width: 25,
+                x: 10,
+                y: 10
+            };
+        },
+        generateCode() {
+            const mydate = new Date();
+            this.addModel.code = 'temperatureDetector_' + mydate.getDay() + mydate.getHours() + mydate.getMinutes() + mydate.getSeconds() + mydate.getMilliseconds() + Math.round(Math.random() * 10000);
+        }
+    }
+
+};
+</script>
+
+<style scoped>
+
+</style>

src/views/system/iscsDraw/iscsPsdOperate/borderRadius.vue

@@ -0,0 +1,111 @@
+<template>
+  <div>
+    <el-form ref="form" :rule="rules" :model="addModel" label-width="100px">
+      <el-form-item v-if="addModel.code" label="按钮编号" prop="code">
+        <el-input v-model="addModel.code" />
+      </el-form-item>
+      <el-form-item label="宽度" prop="width">
+        <el-input-number v-model="addModel.width" controls-position="right" />
+      </el-form-item>
+      <el-form-item label="高度" prop="height">
+        <el-input-number v-model="addModel.height" controls-position="right" />
+      </el-form-item>
+      <el-form-item label="X轴坐标" prop="x">
+        <el-input-number v-model="addModel.x" controls-position="right" />
+      </el-form-item>
+      <el-form-item label="Y轴坐标" prop="y">
+        <el-input-number v-model="addModel.y" controls-position="right" />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="onSubmit('form')">{{ buttonText }}</el-button>
+        <el-button v-show="showDeleteButton" type="danger" @click="deleteDevice">{{ $t('global.delete') }}</el-button>
+        <el-button v-show="showDeleteButton" @click="initPage">{{ $t('global.cancel') }}</el-button>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<script>
+export default {
+    name: 'PlatformScreenDoor',
+    data() {
+        return {
+            addModel:{
+                code: '',
+                width: 25,
+                height: 10,
+                x: 10,
+                y: 10
+            },
+            rules: {
+                width:[{ required: true, message:'请输入图形宽度', trigger: 'blur' }],
+                height:[{ required: true, message:'请输入图形宽度', trigger: 'blur' }],
+                x: [{ required: true, message: '请输入图形的X轴坐标', trigger: 'blur' }],
+                y: [{ required: true, message: '请输入图形的Y轴坐标', trigger: 'blur' }]
+            },
+            showDeleteButton: false,
+            buttonText: '立即创建'
+        };
+    },
+    methods: {
+        onSubmit(form) {
+            if (!this.addModel.code) {
+                this.generateCode();
+            }
+            this.$refs[form].validate((valid) => {
+                if (valid) {
+                    const maButtonModel = {
+                        point: {
+                            x: this.addModel.x,
+                            y: this.addModel.y
+                        },
+                        code: this.addModel.code,
+                        _type: 'borderRadius',
+                        width: this.addModel.width,
+                        height: this.addModel.height
+                    };
+                    this.$emit('createDataModel', maButtonModel);
+                    this.initPage();
+                } else {
+                    return false;
+                }
+            });
+        },
+        deleteDevice() {
+            const maButtonModel = {
+                point: {
+                    x: this.addModel.x,
+                    y: this.addModel.y
+                },
+                code: this.addModel.code,
+                _type: 'borderRadius',
+                width: this.addModel.width,
+                height: this.addModel.height
+            };
+            this.$emit('deleteDataModel', maButtonModel);
+            this.initPage();
+        },
+        initPage() {
+            this.isUpdate = false;
+            this.buttonText = '立即创建';
+            this.showDeleteButton = false;
+            this.addModel = {
+                code: '',
+                width: 25,
+                height: 10,
+                x: 10,
+                y: 10
+            };
+        },
+        generateCode() {
+            const mydate = new Date();
+            this.addModel.code = 'borderRadius_' + mydate.getDay() + mydate.getHours() + mydate.getMinutes() + mydate.getSeconds() + mydate.getMilliseconds() + Math.round(Math.random() * 10000);
+        }
+    }
+
+};
+</script>
+
+<style scoped>
+
+</style>

src/views/system/iscsDraw/iscsPsdOperate/endDoor.vue

@@ -0,0 +1,103 @@
+<template>
+  <div>
+    <el-form ref="form" :rule="rules" :model="addModel" label-width="100px">
+      <el-form-item v-if="addModel.code" label="按钮编号" prop="code">
+        <el-input v-model="addModel.code" />
+      </el-form-item>
+      <el-form-item label="图形宽度" prop="width">
+        <el-input-number v-model="addModel.width" />
+      </el-form-item>
+      <el-form-item label="X轴坐标" prop="x">
+        <el-input-number v-model="addModel.x" />
+      </el-form-item>
+      <el-form-item label="Y轴坐标" prop="y">
+        <el-input-number v-model="addModel.y" />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="onSubmit('form')">{{ buttonText }}</el-button>
+        <el-button v-show="showDeleteButton" type="danger" @click="deleteDevice">{{ $t('global.delete') }}</el-button>
+        <el-button v-show="showDeleteButton" @click="initPage">{{ $t('global.cancel') }}</el-button>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<script>
+export default {
+    name: 'PlatformScreenDoor',
+    data() {
+        return {
+            addModel:{
+                code: '',
+                width: 25,
+                x: 10,
+                y: 10
+            },
+            rules: {
+                width:[{ required: true, message:'请输入设备图形宽度', trigger: 'blur' }],
+                x: [{ required: true, message: '请输入设备图形的X轴坐标', trigger: 'blur' }],
+                y: [{ required: true, message: '请输入设备图形的Y轴坐标', trigger: 'blur' }]
+            },
+            showDeleteButton: false,
+            buttonText: '立即创建'
+        };
+    },
+    methods: {
+        onSubmit(form) {
+            if (!this.addModel.code) {
+                this.generateCode();
+            }
+            this.$refs[form].validate((valid) => {
+                if (valid) {
+                    const maButtonModel = {
+                        point: {
+                            x: this.addModel.x,
+                            y: this.addModel.y
+                        },
+                        code: this.addModel.code,
+                        _type: 'endDoor',
+                        width: this.addModel.width
+                    };
+                    this.$emit('createDataModel', maButtonModel);
+                    this.initPage();
+                } else {
+                    return false;
+                }
+            });
+        },
+        deleteDevice() {
+            const maButtonModel = {
+                point: {
+                    x: this.addModel.x,
+                    y: this.addModel.y
+                },
+                code: this.addModel.code,
+                _type: 'endDoor',
+                width: this.addModel.width
+            };
+            this.$emit('deleteDataModel', maButtonModel);
+            this.initPage();
+        },
+        initPage() {
+            this.isUpdate = false;
+            this.buttonText = '立即创建';
+            this.showDeleteButton = false;
+            this.addModel = {
+                code: '',
+                width: 25,
+                x: 10,
+                y: 10
+            };
+        },
+        generateCode() {
+            const mydate = new Date();
+            this.addModel.code = 'endDoor_' + mydate.getDay() + mydate.getHours() + mydate.getMinutes() + mydate.getSeconds() + mydate.getMilliseconds() + Math.round(Math.random() * 10000);
+        }
+    }
+
+};
+</script>
+
+<style scoped>
+
+</style>

src/views/system/iscsDraw/iscsPsdOperate/index.vue

@@ -0,0 +1,105 @@
+<template>
+  <transition name="el-zoom-in-center">
+    <div class="map-control heightClass ">
+      <el-card type="border-card" class="heightClass">
+        <div slot="header" class="clearfix">
+          <el-button
+            type="text"
+            style="float: right; padding: 3px 0; margin-right: 5px;"
+            @click="handleSave"
+          >{{ $t('ibp.save') }}</el-button>
+        </div>
+        <el-tabs v-model="enabledTab" class="mapEdit" type="card" @tab-click="handleTabClick">
+          <el-tab-pane label="屏蔽门" name="psd">
+            <platform-screen-door
+              ref="platformScreenDoor"
+              style="width: 90%;"
+              @createDataModel="createDataModel"
+              @deleteDataModel="deleteDataModel"
+            />
+          </el-tab-pane>
+          <el-tab-pane label="端头门" name="endDoor">
+            <end-door
+              ref="endDoor"
+              style="width: 90%;"
+              @createDataModel="createDataModel"
+              @deleteDataModel="deleteDataModel"
+            />
+          </el-tab-pane>
+          <el-tab-pane label="圆角边框" name="borderRadius">
+            <border-radius
+              ref="borderRadius"
+              style="width: 90%;"
+              @createDataModel="createDataModel"
+              @deleteDataModel="deleteDataModel"
+            />
+          </el-tab-pane>
+        </el-tabs>
+      </el-card>
+    </div>
+  </transition>
+</template>
+<script>
+import {deviceFactory} from '@/iscs/utils/parser';
+import PlatformScreenDoor from './platformScreenDoor';
+import EndDoor from './endDoor';
+import BorderRadius from './borderRadius';
+
+export default {
+    name: 'IscsOperate',
+    components: {
+        PlatformScreenDoor,
+        EndDoor,
+        BorderRadius
+    },
+    mixins: [
+    ],
+    data() {
+        return {
+            enabledTab: 'psd',
+            data: '',
+            stationCode: ''
+        };
+    },
+    computed: {
+        height() {
+            return this.$store.state.config.height;
+        }
+    },
+    watch: {
+        '$store.state.iscs.rightClickCount': function (val) {
+            const model = this.$store.getters['iscs/updateDeviceData'];
+            this.enabledTab = model._type;
+        }
+    },
+    mounted() {
+    },
+    beforeDestroy() {
+
+    },
+    methods: {
+        createDataModel(model) {
+            const newModel = deviceFactory(model._type, model);
+            this.$store.dispatch('iscs/updateIscsDevices', newModel.model);
+        },
+        deleteDataModel(model) {
+            this.$store.dispatch('iscs/deleteIscsDevices', model);
+        },
+        handleSave() {
+            const data = JSON.stringify(this.$store.state.iscs.iscs);
+            console.log(data);
+        },
+        handleTabClick() {
+
+        }
+    }
+};
+</script>
+<style rel="stylesheet/scss" lang="scss" scoped>
+    @import "src/styles/mixin.scss";
+    .map-control {
+        float: right;
+        width: 100%;
+    }
+    .heightClass{height:100%;}
+</style>

src/views/system/iscsDraw/iscsPsdOperate/platformScreenDoor.vue

@@ -0,0 +1,103 @@
+<template>
+  <div>
+    <el-form ref="form" :rule="rules" :model="addModel" label-width="100px">
+      <el-form-item v-if="addModel.code" label="按钮编号" prop="code">
+        <el-input v-model="addModel.code" />
+      </el-form-item>
+      <el-form-item label="图形宽度" prop="width">
+        <el-input-number v-model="addModel.width" />
+      </el-form-item>
+      <el-form-item label="X轴坐标" prop="x">
+        <el-input-number v-model="addModel.x" />
+      </el-form-item>
+      <el-form-item label="Y轴坐标" prop="y">
+        <el-input-number v-model="addModel.y" />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="onSubmit('form')">{{ buttonText }}</el-button>
+        <el-button v-show="showDeleteButton" type="danger" @click="deleteDevice">{{ $t('global.delete') }}</el-button>
+        <el-button v-show="showDeleteButton" @click="initPage">{{ $t('global.cancel') }}</el-button>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<script>
+export default {
+    name: 'PlatformScreenDoor',
+    data() {
+        return {
+            addModel:{
+                code: '',
+                width: 25,
+                x: 10,
+                y: 10
+            },
+            rules: {
+                width:[{ required: true, message:'请输入设备图形宽度', trigger: 'blur' }],
+                x: [{ required: true, message: '请输入设备图形的X轴坐标', trigger: 'blur' }],
+                y: [{ required: true, message: '请输入设备图形的Y轴坐标', trigger: 'blur' }]
+            },
+            showDeleteButton: false,
+            buttonText: '立即创建'
+        };
+    },
+    methods: {
+        onSubmit(form) {
+            if (!this.addModel.code) {
+                this.generateCode();
+            }
+            this.$refs[form].validate((valid) => {
+                if (valid) {
+                    const maButtonModel = {
+                        point: {
+                            x: this.addModel.x,
+                            y: this.addModel.y
+                        },
+                        code: this.addModel.code,
+                        _type: 'platformScreenDoor',
+                        width: this.addModel.width
+                    };
+                    this.$emit('createDataModel', maButtonModel);
+                    this.initPage();
+                } else {
+                    return false;
+                }
+            });
+        },
+        deleteDevice() {
+            const maButtonModel = {
+                point: {
+                    x: this.addModel.x,
+                    y: this.addModel.y
+                },
+                code: this.addModel.code,
+                _type: 'platformScreenDoor',
+                width: this.addModel.width
+            };
+            this.$emit('deleteDataModel', maButtonModel);
+            this.initPage();
+        },
+        initPage() {
+            this.isUpdate = false;
+            this.buttonText = '立即创建';
+            this.showDeleteButton = false;
+            this.addModel = {
+                code: '',
+                width: 25,
+                x: 10,
+                y: 10
+            };
+        },
+        generateCode() {
+            const mydate = new Date();
+            this.addModel.code = 'platformScreenDoor_' + mydate.getDay() + mydate.getHours() + mydate.getMinutes() + mydate.getSeconds() + mydate.getMilliseconds() + Math.round(Math.random() * 10000);
+        }
+    }
+
+};
+</script>
+
+<style scoped>
+
+</style>

src/views/system/iscsSystem/bottom.vue

@@ -0,0 +1,26 @@
+<template>
+  <div class="bottom-box">
+    111
+  </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            mes: '1111'
+        };
+    }
+};
+</script>
+
+<style lang="scss" scoped>
+.bottom-box{
+    width: 100%;
+    height: 95px;
+    background-color: #ACACAC;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+}
+</style>