企业应急

ChenZeping02609

2021-05-13 3cd5fc1c2fd8ac0fa52050b4c23bb7fd7cbf954a

企业应急

 src/components/LayerController/logic/EnterpriseEmergency.js

New file
@@ -0,0 +1,7 @@
/**
 * 企业应急
 */

module.exports = function () {

}

 src/components/panel/topicSearch/DischargeSearch.vue

@@ -1,124 +1,126 @@
<template>
  <div class="sewers-search" v-if="gdVisible">
    <div class="panel-title">{{title}}</div>
    <div class="search-panel ">
      <el-form ref="form" :model="form" label-width="90px" class="search-form">
        <el-form-item label="区域：" size="mini" class="search-panel-item">
          <el-select style="width: 100%"  v-model="form.areaVal" @change="areaType"  :popper-class="'select-down'">
            <el-option
                v-for="item in areaTypeOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <!--  <el-form-item label="企业名称" size="mini">
          <el-select style="width: 100%"  v-model="form.enterpriseVal"  @change="enterpriseType" :popper-class="'select-down'">
            <el-option
                    v-for="item in enterpriseTypeOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="二级单位" size="mini">
          <el-select style="width: 100%"  v-model="form.enterpriseSubunitsVal"  @change="enterpriseSubunitsType" :popper-class="'select-down'">
            <el-option
                    v-for="item in enterpriseSubunitsTypeOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
            </el-option>
          </el-select>
        </el-form-item> -->
        <!--   <el-form-item label="风险级别" size="mini"></el-form-item>
        <el-radio-group v-model="form.type" class="levelOfRisk">
          <el-radio  v-for="(item,index) in levelOfRisk" :label="item.value" :key="index"><span class="levelOfRisk-type">{{item.name}}<i :style="'background:'+item.color"></i></span></el-radio>
        </el-radio-group> -->
        <!--              <el-form-item >-->
        <div class="rightButtonSearch">
          <el-input  v-model="form.keyword" size="mini"  placeholder="在此输入关键字搜索"></el-input>
          <el-button class="el-icon-search" @click="handleSearch"></el-button>
    <div class="sewers-search" v-if="gdVisible">
        <div class="panel-title">{{title}}</div>
        <div class="search-panel ">
            <el-form ref="form" :model="form" label-width="90px" class="search-form">
                <el-form-item label="区域：" size="mini" class="search-panel-item">
                    <el-select style="width: 100%" v-model="form.areaVal" @change="areaType"
                               :popper-class="'select-down'">
                        <el-option
                                v-for="item in areaTypeOptions"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <!--  <el-form-item label="企业名称" size="mini">
                  <el-select style="width: 100%"  v-model="form.enterpriseVal"  @change="enterpriseType" :popper-class="'select-down'">
                    <el-option
                            v-for="item in enterpriseTypeOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="二级单位" size="mini">
                  <el-select style="width: 100%"  v-model="form.enterpriseSubunitsVal"  @change="enterpriseSubunitsType" :popper-class="'select-down'">
                    <el-option
                            v-for="item in enterpriseSubunitsTypeOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item> -->
                <!--   <el-form-item label="风险级别" size="mini"></el-form-item>
                <el-radio-group v-model="form.type" class="levelOfRisk">
                  <el-radio  v-for="(item,index) in levelOfRisk" :label="item.value" :key="index"><span class="levelOfRisk-type">{{item.name}}<i :style="'background:'+item.color"></i></span></el-radio>
                </el-radio-group> -->
                <!--              <el-form-item >-->
                <div class="rightButtonSearch">
                    <el-input v-model="form.keyword" size="mini" placeholder="在此输入关键字搜索"></el-input>
                    <el-button class="el-icon-search" @click="handleSearch"></el-button>
                </div>
            </el-form>
        </div>
      </el-form>
        <el-scrollbar style="height:416.44px">
            <div class="environmental-risk-list hover"><!-- v-for="(item,index) in list" :key="index" -->
                <i class="state"></i>
                <div>
                    <h3 @click="flyto">###炼化部</h3>
                    <p>所属部门：<span>炼化部</span></p>
                    <p>风险级别：<span>三级</span></p>
                </div>
            </div>
            <div class="environmental-risk-list"><!-- v-for="(item,index) in list" :key="index" -->
                <i class="state"></i>
                <div>
                    <h3>###炼化部</h3>
                    <p>所属部门：<span>炼化部</span></p>
                    <p>风险级别：<span>三级</span></p>
                </div>
            </div>
            <div class="environmental-risk-list"><!-- v-for="(item,index) in list" :key="index" -->
                <i class="state"></i>
                <div>
                    <h3>###炼化部</h3>
                    <p>所属部门：<span>炼化部</span></p>
                    <p>风险级别：<span>三级</span></p>
                </div>
            </div>
            <div class="environmental-risk-list"><!-- v-for="(item,index) in list" :key="index" -->
                <i class="state"></i>
                <div>
                    <h3>###炼化部</h3>
                    <p>所属部门：<span>炼化部</span></p>
                    <p>风险级别：<span>三级</span></p>
                </div>
            </div>
            <div class="environmental-risk-list"><!-- v-for="(item,index) in list" :key="index" -->
                <i class="state"></i>
                <div>
                    <h3>###炼化部</h3>
                    <p>所属部门：<span>炼化部</span></p>
                    <p>风险级别：<span>三级</span></p>
                </div>
            </div>
            <div class="environmental-risk-list"><!-- v-for="(item,index) in list" :key="index" -->
                <i class="state"></i>
                <div>
                    <h3>###炼化部</h3>
                    <p>所属部门：<span>炼化部</span></p>
                    <p>风险级别：<span>三级</span></p>
                </div>
            </div>
        </el-scrollbar>
        <!--   <span class="location-btn" @click="handleLocation(item)">588</span> -->
        <el-card class="footer-page" v-if="total > 10">
            <el-pagination
                    small
                    @current-change="handlePage"
                    :page-size=pageSize
                    layout="prev, pager, next"
                    :total=total
                    :current-page=current
                    class="warnPagination"
            >
            </el-pagination>
        </el-card>
    </div>
    <el-scrollbar style="height:416.44px">
      <div class="environmental-risk-list hover" ><!-- v-for="(item,index) in list" :key="index" -->
        <i class="state"></i>
        <div>
          <h3>###炼化部</h3>
          <p>所属部门：<span>炼化部</span></p>
          <p>风险级别：<span>三级</span></p>
        </div>
      </div>
      <div class="environmental-risk-list" ><!-- v-for="(item,index) in list" :key="index" -->
        <i class="state"></i>
        <div>
          <h3>###炼化部</h3>
          <p>所属部门：<span>炼化部</span></p>
          <p>风险级别：<span>三级</span></p>
        </div>
      </div>
      <div class="environmental-risk-list" ><!-- v-for="(item,index) in list" :key="index" -->
        <i class="state"></i>
        <div>
          <h3>###炼化部</h3>
          <p>所属部门：<span>炼化部</span></p>
          <p>风险级别：<span>三级</span></p>
        </div>
      </div>
      <div class="environmental-risk-list" ><!-- v-for="(item,index) in list" :key="index" -->
        <i class="state"></i>
        <div>
          <h3>###炼化部</h3>
          <p>所属部门：<span>炼化部</span></p>
          <p>风险级别：<span>三级</span></p>
        </div>
      </div>
      <div class="environmental-risk-list" ><!-- v-for="(item,index) in list" :key="index" -->
        <i class="state"></i>
        <div>
          <h3>###炼化部</h3>
          <p>所属部门：<span>炼化部</span></p>
          <p>风险级别：<span>三级</span></p>
        </div>
      </div>
      <div class="environmental-risk-list" ><!-- v-for="(item,index) in list" :key="index" -->
        <i class="state"></i>
        <div>
          <h3>###炼化部</h3>
          <p>所属部门：<span>炼化部</span></p>
          <p>风险级别：<span>三级</span></p>
        </div>
      </div>
    </el-scrollbar>
    <!--   <span class="location-btn" @click="handleLocation(item)">588</span> -->
    <el-card class="footer-page" v-if="total > 10">
      <el-pagination
          small
          @current-change="handlePage"
          :page-size=pageSize
          layout="prev, pager, next"
          :total=total
          :current-page=current
          class="warnPagination"
      >
      </el-pagination>
    </el-card>
  </div>
  <!--        <div class="monitor2" v-if="hbVisible">-->
  <!--          <env-protect-search></env-protect-search>-->
  <!--        </div>-->
  <!--        <div class="monitor2" v-if="pkVisible">-->
  <!--          <discharge-search></discharge-search>-->
  <!--        </div>-->
    <!--        <div class="monitor2" v-if="hbVisible">-->
    <!--          <env-protect-search></env-protect-search>-->
    <!--        </div>-->
    <!--        <div class="monitor2" v-if="pkVisible">-->
    <!--          <discharge-search></discharge-search>-->
    <!--        </div>-->
</template>

<script>
import WfsHelper from '@components/helpers/WfsHelper'
import AjaxUtils from '@utils/AjaxUtils'

export default {
  name: 'DischargeSearch',
  data () {
@@ -140,16 +142,36 @@
      isWaybillHover: true,
      isRouteHover: false,
      levelOfRisk: [
        { name: '重大风险', value: '1', color: 'red' },
        { name: '一级风险', value: '2', color: 'sandybrown' },
        { name: '二级风险', value: '3', color: 'yellow' },
        { name: '三级风险', value: '4', color: 'green' }
        {
          name: '重大风险',
          value: '1',
          color: 'red'
        },
        {
          name: '一级风险',
          value: '2',
          color: 'sandybrown'
        },
        {
          name: '二级风险',
          value: '3',
          color: 'yellow'
        },
        {
          name: '三级风险',
          value: '4',
          color: 'green'
        }
      ],
      areaTypeOptions: []
    }
  },
  props: ['title'],
  methods: {
    flyto () {
      const pos = [39.90751504898071, 116.38927817344666]
      window.map.flyTo(pos, 15)
    },
    // 区域筛选
    areaType (val) {
      this.pipelineTypeOptions.forEach((itm) => {

 src/components/panel/topicSearch/SewersSelect/EnterpriseEmergency/EventQuery.vue

@@ -38,43 +38,20 @@
            </el-form>
        </el-form>
        <el-scrollbar style="height:286.22px">
            <div class="environmental-risk-list">
                <i class="state"></i>
            <div class="environmental-risk-list" v-for="(item,index) in list" :key="index"
                 :class="activeNum===index?'hover':''">
                <!--                <i class="state"></i>-->
                <img class="state" :src="getImgSrc()" style="background: none"/>
                <div>
                    <h3>事件名称:XXX事件</h3>
                    <h5>事件事件:2021年3月21日
                        <el-button class="rt btn00fff6" size="mini" style="margin-right: 0.04rem;"
                                   @click="btnAffiliatedFacilities()">删除
                        </el-button>
                    <h3 @click="handleLocation()">事件名称:XXX事件</h3>
                    <h5>
                        事件事件:2021年3月21日
                        <el-button class="rt btn00fff6" size="mini" style="margin-right: 0.04rem;">删除</el-button>
                    </h5>
                    <p>事件状态：<span>审批阶段</span></p>
                    <p>事件类型：<span>真实事件</span>
                        <el-button class="rt btn00fff6" size="mini" style="margin-right: 0.04rem;"
                                   @click="btnAffiliatedFacilities()">事件管理
                        </el-button>
                    <p>
                        事件状态：<span>审批阶段</span>
                    </p>
                </div>
            </div>
            <div class="environmental-risk-list">
                <i class="state"></i>
                <div>
                    <h3>事件名称:XXX事件</h3>
                    <h5>事件事件:2021年3月21日</h5>
                    <p>事件状态：<span>审批阶段</span></p>
                    <p>事件类型：<span>真实事件</span>
                        <el-button class="rt btn00fff6" size="mini" style="margin-right: 0.04rem;"
                                   @click="btnAffiliatedFacilities()">事件管理
                        </el-button>
                    </p>
                </div>
            </div>
            <div class="environmental-risk-list">
                <i class="state"></i>
                <div>
                    <h3>事件名称:XXX事件</h3>
                    <h5>事件事件:2021年3月21日</h5>
                    <p>事件状态：<span>审批阶段</span></p>
                    <p>事件类型：<span>真实事件</span>
                    <p>事件类型：<span>{{ item.properties.pipecode }}</span>
                        <el-button class="rt btn00fff6" size="mini" style="margin-right: 0.04rem;"
                                   @click="btnAffiliatedFacilities()">事件管理
                        </el-button>
@@ -86,20 +63,98 @@
</template>

<script>
// import { LayerEntEmer } from '../../../../../conf/layers/LayerEntEmer'
import { LayerEntEmer } from '../../../../../conf/layers/LayerEntEmer'
// import { LayerEvent } from '../../../../../conf/layers/LayerEvent'
// import { LayerResources } from '../../../../../conf/layers/LayerResources'

import ReportPopup from './ReportPopup'

import WfsHelper from '@components/helpers/WfsHelper'
import AjaxUtils from '@utils/AjaxUtils'
import { SERVICE_TYPE } from '../../../../../conf/Constants'

export default {
  name: 'EventQuery',
  data () {
    return {
      list: [],
      items: [
        { name: '金陵石化' },
        { name: '南京化学' }
      ],
      subItems: ['事前阶段', '审批阶段', '事件完结'],
      activeNum: -1,
      LayerEvent: {
        code: 'njhx',
        name: '南京化学',
        checked: false, // 默认选中状态
        layers: [
          {
            code: 'sqjd',
            name: '南京化学事前阶段',
            sname: '事前阶段',
            checked: false,
            minZoom: 16,
            type: SERVICE_TYPE.WMS,
            wmsLayers: 'sewer:Aemergency',
            icon: 'sewers/窨井.png'
          },
          {
            code: 'spjd',
            name: '南京化学审批阶段',
            sname: '审批阶段',
            checked: false,
            minZoom: 16,
            type: '医院',
            typeName: 'sewer:Aemergency',
            // wfs: WFS_URL + '?TYPENAME=雨篦子',
            icon: 'sewers/雨篦子.png'
          },
          {
            code: 'sjwj',
            name: '南京化学事件完结',
            sname: '事件完结',
            minZoom: 16,
            type: SERVICE_TYPE.WMS,
            typeName: 'sewer:firedike',
            checked: false
          }
        ]
      },
      LayerResources: {
        code: 'jlsh',
        name: '金陵石化',
        checked: false, // 默认选中状态
        layers: [
          {
            code: 'yj',
            name: '事前阶段',
            sname: '事前阶段',
            checked: false,
            minZoom: 16,
            type: SERVICE_TYPE.WMS,
            wmsLayers: 'sewer:Aemergency',
            icon: 'sewers/窨井.png'
          },
          {
            code: 'ybz',
            name: '审批阶段',
            sname: '审批阶段',
            checked: false,
            minZoom: 16,
            type: SERVICE_TYPE.WMS,
            typeName: 'sewer:Aemergency',
            // wfs: WFS_URL + '?TYPENAME=雨篦子',
            icon: 'sewers/雨篦子.png'
          },
          {
            code: 'fht',
            name: '事件完结',
            sname: '事件完结',
            minZoom: 16,
            type: SERVICE_TYPE.WMS,
            typeName: 'sewer:firedike',
            checked: false
          }
        ]
      },
      items: [this.LayerEvent, this.LayerResources],
      subItems: LayerEntEmer.layers,
      form: {
        pipelineType: '',
        dataType: '',
@@ -115,18 +170,51 @@
            value: 2
          }
        ]
      }
      },
      WfsHelper: null
    }
  },
  mounted () {
    this.wfsHelper = new WfsHelper()
  },
  methods: {
    getImgSrc () {
      const icon = this.form.dataType.icon
      return icon ? 'assets/images/map/' + icon : ''
    },
    handleDataType () {
      console.log('ite')
      this.list = []
    },
    handlePipelineType () {
    handlePipelineType (val) {
      console.log('数据查询')
      this.list = []
      for (let i = 0; i < this.items.length; i++) {
        const item = this.items[i]
        if (val === item.name) {
          this.subItems = item.layers
          return
        }
      }
    },
    handleSearch () {
      console.log('item')
    async handleSearch () {
      this.list = []
      this.wfsHelper.clearFilter()
      // todo 现在企业应急还没区分开类型，后面改
      // this.wfsHelper.setTypeName([this.form.dataType.typeName])
      // this.wfsHelper.setTypeName([this.form.dataType])
      if (this.form.keyword) {
        this.wfsHelper.addLike('name', this.form.keyword)
      }
      const res = await AjaxUtils.GetDataAsynByUrl(this.wfsHelper.getUrl(), {})
      this.list = res.features
      if (res instanceof Object && Object.prototype.hasOwnProperty.call(res, 'features')) {
        this.list = res.features
      }
    },
    handleLocation (val, index) {
      this.activeNum = index
      // layer && layer.openPopup()
      window.layerFactory.flyByFeature(val, this.form.dataType.code)
    },
    btnAffiliatedFacilities () {
      console.log('item')
@@ -145,6 +233,6 @@
}
</script>

<style scoped>
<style lang="less" scoped>

</style>

 src/conf/Constants.js

@@ -20,6 +20,7 @@
  sewersAreaGs: 'Company.js',
  pipesegment: 'PipeLineAnimal.js',
  pollutionSources: 'SourcesPollution.js'
  // EnterpriseEmergency: 'EnterpriseEmergency.js'
}

export const STYLES = {

 src/conf/layers/LayerEntEmer.js

@@ -1,75 +1,91 @@
/**
 * 企业应急
 */
import { LayerHbss } from './LayerHbss'
import { LayerFsss } from './LayerFsss'
// import { LayerHbss } from './LayerHbss'
// import { LayerFsss } from './LayerFsss'

import { PIPELINE_WFS } from '../Constants'
import { LayerEvent } from './LayerEvent'
import { LayerResources } from './LayerResources'

const WFS_URL = PIPELINE_WFS
import { SERVICE_TYPE } from '../Constants'

export const LayerEntEmer = {
  code: 'reportEntemeage',
  code: 'EnterpriseEmergency',
  name: '企业应急',
  checked: false,
  type: 0,
  childLayer: [LayerFsss, LayerHbss],
  // childLayer: [LayerEvent, LayerResources],
  layers: [
    {
      code: 'rainline',
      name: '基础图层',
      sname: '管网',
      sname: '基础图层',
      checked: false,
      type: 0,
      wmsLayers: 'sewer:pipeline_rain',
      // wfs: WFS_URL + '?TYPENAME=管网&FILTER=<Filter xmlns="http://www.opengis.net/ogc"><PropertyIsEqualTo><PropertyName>mediumtype</PropertyName><Literal>雨水管线</Literal></PropertyIsEqualTo></Filter>',
      type: SERVICE_TYPE.WMS,
      layerGroup: 'sewer:pipeline_group',
      typeName: 'sewer:pipeline',
      icon: 'sewers/雨水线.png',
      color: '#0070ff',
      minZoom: 13,
      styles: {
        COLOR: '#0070ff',
        FILL_COLOR: '#0070ff'
      }
      },
      filter: 'mediumtype = \'基础图层\'',
      index: 1
    },
    {
      code: 'accidentline',
      name: '在线监测',
      sname: '事故水',
      sname: '在线监测',
      checked: false,
      // wmsLayers: 'sewer:pipeline_accident',
      type: 0,
      type: SERVICE_TYPE.WMS,
      layerGroup: 'sewer:pipeline_group',
      typeName: 'sewer:pipeline',
      minZoom: 13,
      wfs: WFS_URL + '?TYPENAME=事故水'
      filter: 'mediumtype = \'在线监测\'',
      index: 1
    },
    {
      code: 'oilline',
      name: '应急资源',
      sname: '含油污水',
      sname: '应急资源',
      checked: false,
      type: 0,
      type: SERVICE_TYPE.WMS,
      layerGroup: 'sewer:pipeline_group',
      typeName: 'sewer:pipeline',
      minZoom: 13,
      color: '#ffaa00',
      wmsLayers: 'sewer:pipeline_sewer',
      // wfs: 'http://xearth.cn:6240/geoserver/sewer/wfs?typeName=sewer:pipeline&maxFeatures=500&outputFormat=application%2Fjson&cql_filter=mediumtype=\'含油污水\'',
      filter: 'mediumtype = \'应急资源\'',
      styles: {
        COLOR: '#ffaa00',
        FILL_COLOR: '#ffaa00'
      }
      },
      index: 1
    },
    {
      code: 'oil',
      code: 'saltline',
      name: '周边环境',
      sname: '含油污水',
      sname: '周边环境',
      checked: false,
      type: 0,
      type: SERVICE_TYPE.WMS,
      layerGroup: 'sewer:pipeline_group',
      typeName: 'sewer:pipeline',
      minZoom: 13,
      color: '#ffaa00',
      wmsLayers: 'sewer:pipeline_sewer',
      // wfs: 'http://xearth.cn:6240/geoserver/sewer/wfs?typeName=sewer:pipeline&maxFeatures=500&outputFormat=application%2Fjson&cql_filter=mediumtype=\'含油污水\'',
      styles: {
        COLOR: '#ffaa00',
        FILL_COLOR: '#ffaa00'
      }
      filter: 'mediumtype = \'周边环境\'',
      index: 1
    },
    {
      code: 'alkaliline',
      name: '污水管线',
      sname: '污水管线',
      checked: false,
      type: SERVICE_TYPE.WMS,
      layerGroup: 'sewer:pipeline_group',
      typeName: 'sewer:pipeline',
      filter: 'mediumtype = \'污水管线\'',
      minZoom: 10,
      index: 1
    }
  ]
}

 src/conf/layers/LayerEvent.js

New file
@@ -0,0 +1,41 @@
/**
 * 企业应急 event
 */
import { SERVICE_TYPE } from '../Constants'
export const LayerEvent = {
  code: 'njhx',
  name: '南京化学',
  checked: false, // 默认选中状态
  layers: [
    {
      code: 'sqjd',
      name: '南京化学事前阶段',
      sname: '事前阶段',
      checked: false,
      minZoom: 16,
      type: SERVICE_TYPE.WMS,
      wmsLayers: 'sewer:Aemergency',
      icon: 'sewers/窨井.png'
    },
    {
      code: 'spjd',
      name: '南京化学审批阶段',
      sname: '审批阶段',
      checked: false,
      minZoom: 16,
      type: '医院',
      typeName: 'sewer:Aemergency',
      // wfs: WFS_URL + '?TYPENAME=雨篦子',
      icon: 'sewers/雨篦子.png'
    },
    {
      code: 'sjwj',
      name: '南京化学事件完结',
      sname: '事件完结',
      minZoom: 16,
      type: SERVICE_TYPE.WMS,
      typeName: 'sewer:firedike',
      checked: false
    }
  ]
}

 src/conf/layers/LayerResources.js

New file
@@ -0,0 +1,41 @@
/**
 * 企业应急 event
 */
import { SERVICE_TYPE } from '../Constants'
export const LayerResources = {
  code: 'jlsh',
  name: '金陵石化',
  checked: false, // 默认选中状态
  layers: [
    {
      code: 'yj',
      name: '事前阶段',
      sname: '事前阶段',
      checked: false,
      minZoom: 16,
      type: SERVICE_TYPE.WMS,
      wmsLayers: 'sewer:Aemergency',
      icon: 'sewers/窨井.png'
    },
    {
      code: 'ybz',
      name: '审批阶段',
      sname: '审批阶段',
      checked: false,
      minZoom: 16,
      type: SERVICE_TYPE.WMS,
      typeName: 'sewer:Aemergency',
      // wfs: WFS_URL + '?TYPENAME=雨篦子',
      icon: 'sewers/雨篦子.png'
    },
    {
      code: 'fht',
      name: '事件完结',
      sname: '事件完结',
      minZoom: 16,
      type: SERVICE_TYPE.WMS,
      typeName: 'sewer:firedike',
      checked: false
    }
  ]
}