企业应急-事件处置

yangdelong

2021-05-26 9766b1245e4cbc387eb53443094364dccb80d804

企业应急-事件处置

 src/Sgis.js

@@ -16,6 +16,8 @@
import '@components/plugin/pulse/Pulse.css' // marker 外圈波 css
import BasemapHelper from './components/helpers/BasemapHelper'
import VectorLayerHelper from './components/helpers/VectorLayerHelper'

import '@/components/plugin/leaflet-echart'
// import '@/components/plugin/flowline'
// import eventBus from './eventBus'


 src/components/base-page/enterprise-emergency/DisposalEvent.vue

@@ -34,9 +34,9 @@
            </el-form-item>
            <el-form-item label="附件：" prop="upload">
                <label>
                    <a href="javascript:;">附件</a>
                    <a href="javascript:">附件</a>
                    &nbsp;&nbsp;&nbsp;&nbsp;
                    <a href="javascript:;">附件</a>
                    <a href="javascript:">附件</a>
                </label>
            </el-form-item>
        </el-form>
@@ -48,12 +48,12 @@
            <el-table-column prop="classification" label="预案分类"></el-table-column>
            <el-table-column label="附件">
                <template>
                    <a href="javascript:;">预案</a>
                    <a href="javascript:">预案</a>
                </template>
            </el-table-column>
        </el-table>
        <div class="event-management">
            <el-button type="primary" size="mini" @click="ToManagement">事件管理</el-button>
            <el-button type="primary" size="mini" @click="ToManagement">事件处置</el-button>
            <el-button size="mini">关闭</el-button>
        </div>
    </div>

 src/components/base-page/enterprise-emergency/EffectiveVolumeCalc.vue

New file
@@ -0,0 +1,240 @@
<template>
  <el-dialog :visible.sync="isShow" class="effect-vol-calc" title="事故水有效容积计算" :modal="false" v-dialogDrag
             :before-close="handleClose">
    <div class="container">
      <el-row class="row-style" :span="24">
        <el-col class="label" :span="6">事故水流量(m3/h):</el-col>
        <el-col class="val-input" :span="6">
          <el-input-number @change="calculate" v-model="val.SGSLL" :precision="2" size="mini"></el-input-number>
        </el-col>
        <el-col class="label" :span="6">事故时间(h):</el-col>
        <el-col class="val-input" :span="6">
          <el-input-number @change="calculate" v-model="val.SGSJ" size="mini"></el-input-number>

        </el-col>
      </el-row>
      <el-row class="row-style">
        <el-col class="label" :span="6">事故物料量(m³):</el-col>
        <el-col class="val-input" :span="6">
          <el-input-number @change="calculate" v-model="val.SGWLL" :precision="2" size="mini"></el-input-number>
        </el-col>
        <el-col class="label" :span="6">转存量(m³):</el-col>
        <el-col class="val-input" :span="6">
          <el-input-number @change="calculate" v-model="val.ZCL" :precision="2" size="mini"></el-input-number>
        </el-col>
      </el-row>
      <el-row class="row-style">
        <el-col class="label" :span="6">消防水流量(m³):</el-col>
        <el-col class="val-input" :span="6">
          <el-input-number @change="calculate" v-model="val.XFSLL" :precision="2" size="mini"></el-input-number>

        </el-col>
        <el-col class="label" :span="6">消防时间(h):</el-col>
        <el-col class="val-input" :span="6">
          <el-input-number @change="calculate" v-model="val.XFSJ" size="mini"></el-input-number>

        </el-col>
      </el-row>
      <el-row class="row-style">
        <el-col class="label" :span="6">降雨量(mm):</el-col>
        <el-col class="val-input" :span="6">
          <el-input-number @change="calculate" v-model="val.JYL" :precision="2" size="mini"></el-input-number>
        </el-col>
        <el-col class="label" :span="6">汇水面积(㎡):</el-col>
        <el-col class="val-input" :span="6">
          <el-input-number @change="calculate" v-model="val.HSMJ" :precision="2" size="mini"></el-input-number>
        </el-col>
      </el-row>
      <el-row class="row-style .map-under-line">
        <el-col class="label" :span="6">生产废水量(m³):</el-col>
        <el-col class="val-input" :span="6">
          <el-input-number @change="calculate" v-model="val.SCFSL" :precision="2" size="mini"></el-input-number>
        </el-col>
        <el-col class="label" :span="6">收集池余量(m³):</el-col>
        <el-col class="val-input" :span="6">
          <el-input-number @change="calculate" v-model="val.SJCYL" :precision="2" size="mini"></el-input-number>
        </el-col>
      </el-row>
      <el-row class="row-style">
        <el-col class="label" :span="6">事故水容积(m³):</el-col>
        <el-col class="val-input res-highlight" :span="6"><span>{{ val.SGSRJ }}</span></el-col>
        <el-col class="label" :span="6">是否大于收集池余量:</el-col>
        <el-col class="val-input res-highlight" :span="6"><span>{{ val.SFDYSJCYL }}</span></el-col>
      </el-row>
      <div class="footer">
        <el-button type="primary" size="mini" @click="reSet">重置</el-button>
      </div>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: 'EffectiveVolumeCalc',
  data () {
    return {
      isShow: false,
      val: {}
    }
  },
  mounted () {
    this.reSet()
  },
  methods: {
    handleClose (done) {
      this.isShow = false
    },
    setVisible (s) {
      this.isShow = s
    },
    getVisible () {
      return this.isShow
    },
    reSet () {
      const val = {
        SGSLL: 0, // 事故水流量
        SGSJ: 0, // 事故时间
        SGWLL: 0, // 事故物料量
        ZCL: 0, // 转存量
        XFSLL: 0, // 消费水流量
        XFSJ: 0, // 消防时间
        JYL: 0, // 降雨量
        HSMJ: 0, // 汇水面积
        SCFSL: 0, // 生产废水量
        SJCYL: 0, // 收集池余量
        SGSRJ: 0, // 事故水容积
        SFDYSJCYL: '--'// 是否大于收集池余量
      }
      this.val = val
    },
    calculate () {
      const v = this.val

      v.SGSRJ = (v.SGWLL + v.XFSLL * v.XFSJ - v.ZCL) + v.SCFSL + v.JYL

      v.SFDYSJCYL = v.SGSRJ > v.SJCYL ? '是' : '否'
    }

  }
}
</script>

<style lang="less">
.effect-vol-calc {
  width: 20rem;

  .container {
    padding: 0.15rem;

    .label {
      color: @color;
      text-align: end;
      line-height: 28px;
    }

    .val-input {
      text-align: center;
    }

    .res-highlight {
      color: @color-highlight;
      line-height: 28px;
    }
  }

  /deep/ .el-dialog {
    left: 810px;
  }

  .el-dialog__header {
    padding: 4px 10px;
  }

  .el-dialog__headerbtn {
    top: 10px;
  }

  .row-style {
    padding: 4px 0;
  }

  .el-input__inner {
    background: @background-color;
    border-color: @color;
  }

  .el-input__inner:focus, .el-input__inner:hover {
    border-color: @color-highlight;
    outline: 0;
  }

  .el-input-number span {
    color: @color;
  }

  .el-input-number__decrease {
    background: @background-color;
    border-right: 1px solid @color;

    &:hover {
      color: @color-highlight;
    }
  }

  .el-input-number__increase {
    background: @background-color;
    border-left: 1px solid @color;

    &:hover {
      color: @color-highlight;
    }
  }

  .el-input-number__decrease:hover:not(.is-disabled) ~ .el-input .el-input__inner:not(.is-disabled),
  .el-input-number__increase:hover:not(.is-disabled) ~ .el-input .el-input__inner:not(.is-disabled) {
    border-color: @color-highlight;
  }

  .el-date-table td.today span {
    color: @color-highlight;
  }

  .el-picker-panel__footer {
    background: @background-color;
    border-top-color: @color;
  }

  .el-date-table th {
    border-bottom-color: @color;
  }

  .el-button {
    background: @background-color;
    color: @color;
    border-color: @color;
  }

  .el-button--text {
    padding: 7px 15px;
  }

  .el-button:hover {
    background: @background-color;
    color: @color-highlight;
    border-color: @color-highlight;
  }

  .el-input__inner {
    color: #fff;
    text-align: center;
  }

  .el-date-picker__time-header {
    border-bottom-color: @background-color-split;
  }

  .el-date-picker__header-label {
    color: #fff
  }
}
</style>

 src/components/base-page/enterprise-emergency/event-handling/DisposalProposed.vue

New file
@@ -0,0 +1,47 @@
<template>
  <div>
<!--    <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%">-->
<!--      <el-table-column prop="define" label="建议处置措施" show-overflow-tooltip></el-table-column>-->
<!--      <el-table-column type="selection" label="预览" width="55"></el-table-column>-->

<!--    </el-table>-->
    <el-card class="box-card">
      <div v-for="o in tableData" :key="o" class="text item">
        {{ o.content }}
      </div>
    </el-card>
    <div >
</div>

  </div>
</template>

<script>
export default {
  name: 'DisposalProposed',
  data () {
    return {
      tableData: [
        {
          name: '关闭阀门',
          content: '关闭阀门B、阀门C，对上游管道进行截流；关闭阀门D，对下游管道进行截流',
          type: 'closeFM',
          fmGxList: {
            // 上游阀门
            syfm: [{ name: '阀门B', lng: 114, lat: 32 }, { name: '阀门a', lng: 114, lat: 32 }],
            // 下游阀门
            xyfm: [{ name: '阀门E', lng: 114, lat: 32 }, { name: '阀门F', lng: 114, lat: 32 }]
          }
        }]

    }
  },
  methods: {

  }
}
</script>

<style scoped>

</style>

 src/components/base-page/enterprise-emergency/event-handling/EventBaseInfo.vue

New file
@@ -0,0 +1,29 @@
<template>
  <div>
    <div class="panel-title">事件基本信息</div>
    <ul>
      <li>
        <p>事件管线</p>
        <span>生产一区管线A</span>
        <span>含油污水</span>
        <span>直埋</span><span>无缝钢管</span><span>拦截设施：<i>a阀门</i></span>
      </li>
      <li>
        <p>事件上游管线</p>
        <span>生产一区管线A</span>
        <span>含油污水</span>
        <span>直埋</span><span>无缝钢管</span><span>拦截设施：<i>a阀门</i></span>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'EventBaseInfo'
}
</script>

<style scoped>

</style>

 src/components/base-page/enterprise-emergency/event-handling/EventHandling.vue

New file
@@ -0,0 +1,54 @@
<template>
  <div>

<!--&lt;!&ndash;    基本信息&ndash;&gt;-->
<!--    <event-base-info>-->

<!--    </event-base-info>-->
<!--    建议处置-->
    <disposal-proposed>

    </disposal-proposed>
    <!--    有效容积计算-->
    <div class="footer">
      <el-button type="primary" size="mini" @click="toggleShowCalc">事故水计算</el-button>
      <el-button type="primary" size="mini" @click="rimRes">周边资源</el-button>
      <el-button type="primary" size="mini" @click="report">生成报告</el-button>
      <el-button type="primary" size="mini" @click="close">返回</el-button>
    </div>
    <effective-volume-calc ref="effectVolCalc"></effective-volume-calc>
  </div>

</template>

<script>

import EventBaseInfo from '@components/base-page/enterprise-emergency/event-handling/EventBaseInfo'
import DisposalProposed from '@components/base-page/enterprise-emergency/event-handling/DisposalProposed'
import EffectiveVolumeCalc from '@components/base-page/enterprise-emergency/EffectiveVolumeCalc'
export default {
  name: 'EventHandling',
  components: { DisposalProposed, EventBaseInfo, EffectiveVolumeCalc },

  methods: {
    toggleShowCalc () {
      // this.isShowCalculate = !this.isShowCalculate
      const s = this.$refs.effectVolCalc.getVisible()
      console.log(s)
      this.$refs.effectVolCalc.setVisible(!s)
    },
    rimRes () {
      console.log('周边资源')
    },
    report () {
      console.log('生成报告')
    },
    close () { console.log('返回') }

  }
}
</script>

<style scoped>

</style>

 src/components/panel/topicSearch/enterprise-emergency/EventQuery.vue

@@ -76,7 +76,7 @@
                    <p>事件类型：<span>模拟管线事件</span>
                        <el-button class="rt btn00fff6" size="mini" style="margin-right: 0.04rem;"
                                   @click="accordPopup()">
                            <span>事件管理</span>
                            <span>事件处置</span>
                        </el-button>
                    </p>
                </div>
@@ -91,6 +91,7 @@
// import AjaxUtils from '@utils/AjaxUtils'

import DisposalEvent from '../../../base-page/enterprise-emergency/DisposalEvent'
import EventHandling from '@components/base-page/enterprise-emergency/event-handling/EventHandling'
import eventBus from '../../../../eventBus'

export default {
@@ -132,9 +133,19 @@
    // this.wfsHelper = new WfsHelper()
  },
  methods: {
    // 点击事件管理
    // 点击事件处理
    accordPopup () {
      eventBus.$emit('disposal-analysis', true)
      // eventBus.$emit('disposal-analysis', true)
      window.$layer.open({
        content: {
          comp: EventHandling, // 组件
          parent: this, // 父组件
          data: { // 传递的参数
            // info: this.info
          }
        },
        title: '事件处置'
      })
    },
    // 开始分析
    startAnalysis () {
@@ -152,6 +163,7 @@
        title: '事件处置'
      })
    },

    // radio数据选择
    redioChange (item) {
      console.log(item)

 src/components/plugin/leaflet-echart.js

New file
@@ -0,0 +1,312 @@
/* eslint-disable */
/**
 * @class L.supermap.echartsLayer
 * @classdesc 百度ECharts图层类。
 * @category  Visualization ECharts
 * @extends L.Layer{@linkdoc-leaflet/#layer}
 * @param echartsOptions - {Object} 图表参数
 * @param options - {Object} 可选图层参数。<br>
 *        attribution - {string} 版权信息。<br>
 *        loadWhileAnimating - {boolean} 是否在移动时实时绘制。默认为false。
 */

var EchartsLayer = L.Layer.extend({

    includes: [],
    _echartsContainer: null,
    _map: null,
    _ec: null,
    _echartsOptions: null,

    options: {
        attribution: "© 2017 百度 ECharts",
        loadWhileAnimating: false
    },

    initialize: function initialize(echartsOptions, options) {
        L.Util.setOptions(this, options);
        this.setOption(echartsOptions);
    },
    /**
     * @function L.supermap.echartsLayer.prototype.setOption
     * @description 设置图表地图参数
     * @param echartsOptions - {Object} 图表参数
     * @param notMerge - {boolean} 是否合并参数
     * @param lazyUpdate - {string} 后台自动更新
     */
    setOption: function setOption(echartsOptions, notMerge, lazyUpdate) {
        var baseOption = echartsOptions.baseOption || echartsOptions;
        baseOption.LeafletMap = baseOption.LeafletMap || {
            roam: true
        };
        baseOption.animation = baseOption.animation === true;
        this._echartsOptions = echartsOptions;
        this._ec && this._ec.setOption(echartsOptions, notMerge, lazyUpdate);
    },
    getEcharts: function getEcharts() {
        return this._ec;
    },
    _disableEchartsContainer: function _disableEchartsContainer() {
        this._echartsContainer.style.visibility = "hidden";
    },
    _enableEchartsContainer: function _enableEchartsContainer() {
        this._echartsContainer.style.visibility = "visible";
    },

    /**
     * @private
     * @function L.supermap.echartsLayer.prototype.onAdd
     * @description 添加地图
     * @param map - {L.map} 待添加的地图
     */
    onAdd: function onAdd(map) {
        this._map = map;
        this._initEchartsContainer();
        this._ec = echarts.init(this._echartsContainer);
        echarts.leafletMap = map;
        var me = this;
        map.on("zoomstart", function () {
            me._disableEchartsContainer();
        });
        !me.options.loadWhileAnimating && map.on("movestart", function () {
            me._disableEchartsContainer();
        });
        echarts.registerAction({
            type: 'LeafletMapLayout',
            event: 'LeafletMapLayout',
            update: 'updateLayout'
        }, function (payload, ecModel) {// eslint-disable-line no-unused-vars

        });
        echarts.registerCoordinateSystem('leaflet', LeafletMapCoordSys);
        echarts.extendComponentModel({
            type: 'LeafletMap',
            getBMap: function getBMap() {
                return this.__LeafletMap;
            },
            defaultOption: {
                roam: false
            }
        });
        echarts.extendComponentView({
            type: 'LeafletMap',
            render: function render(LeafletMapModel, ecModel, api) {
                var rendering = true;
                var leafletMap = echarts.leafletMap;
                var viewportRoot = api.getZr().painter.getViewportRoot();

                var animated = leafletMap.options.zoomAnimation &&  L.Browser.any3d;
                viewportRoot.className = ' leaflet-layer leaflet-zoom-' + (animated ? 'animated' : 'hide') + ' echarts-layer';

                var originProp =  L.DomUtil.testProp(['transformOrigin', 'WebkitTransformOrigin', 'msTransformOrigin']);
                viewportRoot.style[originProp] = '50% 50%';

                var coordSys = LeafletMapModel.coordinateSystem;

                var ecLayers = api.getZr().painter.getLayers();

                var moveHandler = function moveHandler() {
                    if (rendering) {
                        return;
                    }
                    var offset = me._map.containerPointToLayerPoint([0, 0]);
                    var mapOffset = [offset.x || 0, offset.y || 0];
                    viewportRoot.style.left = mapOffset[0] + 'px';
                    viewportRoot.style.top = mapOffset[1] + 'px';
                    for (var item in ecLayers) {
                        if (!ecLayers.hasOwnProperty(item)) {
                            continue;
                        }
                        ecLayers[item] && clearContext(ecLayers[item].ctx);
                    }
                    if (!me.options.loadWhileAnimating) {
                        me._enableEchartsContainer();
                    }

                    coordSys.setMapOffset(mapOffset);
                    LeafletMapModel.__mapOffset = mapOffset;

                    api.dispatchAction({
                        type: 'LeafletMapLayout'
                    });
                };

                function clearContext(context) {
                    context && context.clearRect && context.clearRect(0, 0, context.canvas.width, context.canvas.height);
                }

                function zoomEndHandler() {
                    if (rendering) {
                        return;
                    }

                    api.dispatchAction({
                        type: 'LeafletMapLayout'
                    });
                    me._enableEchartsContainer();
                }
                if (this._oldMoveHandler) {
                    leafletMap.off(me.options.loadWhileAnimating ? 'move' : 'moveend', this._oldMoveHandler);
                }
                if (this._oldZoomEndHandler) {
                    leafletMap.off('zoomend', this._oldZoomEndHandler);
                }

                leafletMap.on(me.options.loadWhileAnimating ? 'move' : 'moveend', moveHandler);
                leafletMap.on('zoomend', zoomEndHandler);
                this._oldMoveHandler = moveHandler;
                this._oldZoomEndHandler = zoomEndHandler;
                rendering = false;
            }
        });
        this._ec.setOption(this._echartsOptions);
    },

    onRemove: function onRemove() {
        // 销毁echarts实例
        this._ec.dispose();
    },

    _initEchartsContainer: function _initEchartsContainer() {
        var size = this._map.getSize();

        var _div = document.createElement('div');
        _div.style.position = 'absolute';
        _div.style.height = size.y + 'px';
        _div.style.width = size.x + 'px';
        _div.style.zIndex = 10;
        this._echartsContainer = _div;

        this._map.getPanes().overlayPane.appendChild(this._echartsContainer);
        var me = this;
        this._map.on('resize', function (e) {
            var size = e.newSize;
            me._echartsContainer.style.width = size.x + 'px';
            me._echartsContainer.style.height = size.y + 'px';
            me._ec.resize();
        });
    }

});

/**
 * @class L.supermap.LeafletMapCoordSys
 * @private
 * @classdesc 地图坐标系统类
 * @param leafletMap - {L.map} 地图
 * @param api - {Object} 接口
 */
function LeafletMapCoordSys(leafletMap) {
    this._LeafletMap = leafletMap;
    this.dimensions = ['lng', 'lat'];
    this._mapOffset = [0, 0];
}

LeafletMapCoordSys.prototype.dimensions = ['lng', 'lat'];

LeafletMapCoordSys.prototype.setMapOffset = function (mapOffset) {
    this._mapOffset = mapOffset;
};

LeafletMapCoordSys.prototype.getBMap = function () {
    return this._LeafletMap;
};

LeafletMapCoordSys.prototype.prepareCustoms = function () {
    var zrUtil = echarts.util;

    var rect = this.getViewRect();
    return {
        coordSys: {
            // The name exposed to user is always 'cartesian2d' but not 'grid'.
            type: 'leaflet',
            x: rect.x,
            y: rect.y,
            width: rect.width,
            height: rect.height
        },
        api: {
            coord: zrUtil.bind(this.dataToPoint, this),
            size: zrUtil.bind(dataToCoordSize, this)
        }
    };

    function dataToCoordSize(dataSize, dataItem) {
        dataItem = dataItem || [0, 0];
        return zrUtil.map([0, 1], function (dimIdx) {
            var val = dataItem[dimIdx];
            var halfSize = dataSize[dimIdx] / 2;
            var p1 = [];
            var p2 = [];
            p1[dimIdx] = val - halfSize;
            p2[dimIdx] = val + halfSize;
            p1[1 - dimIdx] = p2[1 - dimIdx] = dataItem[1 - dimIdx];
            return Math.abs(this.dataToPoint(p1)[dimIdx] - this.dataToPoint(p2)[dimIdx]);
        }, this);
    }
};

LeafletMapCoordSys.prototype.dataToPoint = function (data) {
    //处理数据中的null值
    if (data[1] === null) {
        data[1] =  L.CRS.EPSG3857.projection.MAX_LATITUDE;
    }
    data[1] = this.fixLat(data[1]);

    var px = this._LeafletMap.latLngToLayerPoint([data[1], data[0]]);

    var mapOffset = this._mapOffset;
    return [px.x - mapOffset[0], px.y - mapOffset[1]];
};

LeafletMapCoordSys.prototype.fixLat = function (lat) {
    if (lat >= 90) {
        return 89.99999999999999;
    }
    if (lat <= -90) {
        return -89.99999999999999;
    }
    return lat;
};

LeafletMapCoordSys.prototype.pointToData = function (pt) {
    var mapOffset = this._mapOffset;
    var point = this._LeafletMap.layerPointToLatLng([pt[0] + mapOffset[0], pt[1] + mapOffset[1]]);
    return [point.lng, point.lat];
};

LeafletMapCoordSys.prototype.getViewRect = function () {
    var size = this._LeafletMap.getSize();
    return new echarts.graphic.BoundingRect(0, 0, size.x, size.y);
};

LeafletMapCoordSys.prototype.getRoamTransform = function () {
    return echarts.matrix.create();
};
LeafletMapCoordSys.dimensions = LeafletMapCoordSys.prototype.dimensions;

LeafletMapCoordSys.create = function (ecModel) {
    var coordSys = void 0;

    ecModel.eachComponent('LeafletMap', function (leafletMapModel) {
        if (!coordSys) {
            coordSys = new LeafletMapCoordSys(echarts.leafletMap);
        }
        leafletMapModel.coordinateSystem = coordSys;
        leafletMapModel.coordinateSystem.setMapOffset(leafletMapModel.__mapOffset || [0, 0]);
    });
    ecModel.eachSeries(function (seriesModel) {
        if (!seriesModel.get('coordinateSystem') || seriesModel.get('coordinateSystem') === 'leaflet') {
            if (!coordSys) {
                coordSys = new LeafletMapCoordSys(echarts.leafletMap);
            }
            seriesModel.coordinateSystem = coordSys;
            seriesModel.animation = seriesModel.animation === true;
        }
    });
};
var echartsLayer  = function echartsLayer(echartsOptions, options) {
    return new EchartsLayer(echartsOptions, options);
};

L.echartsLayer = echartsLayer;

 src/main.js

@@ -29,6 +29,7 @@
Vue.prototype.L = L
Vue.prototype.$config = appConfig
Vue.prototype.$echarts = echarts // 挂载echarts
window.echarts = echarts
window.Vue = Vue
window.$layer = layer(Vue)
// 注册指令7