事件上报修改

陈泽平

2021-05-19 c6c504aeac112db2ee60f9af7a994a04b9fa4ed5

事件上报修改

 src/components/panel/RightSearchPanel.vue

@@ -60,7 +60,7 @@
import SoilGroundWaterSearch from '@components/panel/topicSearch/SoilGroundWaterSearch.vue'
import PipeChangesSearch from '@components/panel/topicSearch/pipeChangesSearch.vue'
import PipeInformationSearch from '@components/panel/topicSearch/pipeInformationSearch.vue'
import ReportSearch from './topicSearch/ReportSearch'
import EnterpriseEmergencySearch from './topicSearch/EnterpriseEmergencySearch'

import bus from '@/eventBus'

@@ -72,7 +72,7 @@
    SolidWasteSearch,
    EnvRiskSearch,
    DischargeSearch,
    ReportSearch
    EnterpriseEmergencySearch
  },
  data () {
    return {
@@ -155,7 +155,7 @@
          this.gcComp = PipeInformationSearch
          break
        case '企业应急':
          this.gcComp = ReportSearch
          this.gcComp = EnterpriseEmergencySearch
          break
      }
    },

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

@@ -77,18 +77,24 @@
                </div>
            </div>
        </el-scrollbar>
<!--        <reportPopup></reportPopup>-->
    </div>
</template>

<script>

import WfsHelper from '@components/helpers/WfsHelper'
// import WfsHelper from '@components/helpers/WfsHelper'
// import AjaxUtils from '@utils/AjaxUtils'
import reportPopup from './ReportPopup'

export default {
  name: 'EventQuery',
  components: {
    // reportPopup
  },
  data () {
    return {
      reportIncident: false,
      list: [],
      activeNum: -1,
      LayerEvent: {},
@@ -117,12 +123,21 @@
    }
  },
  mounted () {
    this.wfsHelper = new WfsHelper()
    // this.wfsHelper = new WfsHelper()
  },
  methods: {
    // 点击事件管理
    accordPopup () {
      console.log('item')
      window.$layer.open({
        content: {
          comp: reportPopup, // 组件
          parent: this, // 父组件
          data: { // 传递的参数
            // info: this.info
          }
        },
        title: '事件分析'
      })
    },
    // radio数据选择
    redioChange (item) {
@@ -150,9 +165,9 @@
    },
    // 数据搜索事件
    async handleSearch () {

      console.log('item')
    },
    // 搜索的数据点击事件
    // 搜索的数据 de 点击事件
    handleLocation () {
      console.log('val')
    }

 src/components/panel/topicSearch/EnterpriseEmergency/ReportPopup.vue

@@ -1,39 +1,51 @@
<template>
    <!--    <div class="public-bounced map-background">-->
    <!--        <div class="public-bounced-title panel-title">-->
    <!--            <span>上报事件</span>-->
    <!--            <i class="el-icon-circle-close" @click="closePopup"></i>-->
    <!--        </div>-->
    <div class="public-bounced-content">
        <!--        <el-dialog-->
        <!--                custom-class="public-bounced-content_dialog"-->
        <!--                title="上报事件"-->
        <!--                :visible.sync="dialogVisible"-->
        <!--                :append-to-body="true"-->
        <!--                :modal="false"-->
        <!--                v-dialogDragBottom-->
        <!--        >-->
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="search-form">
            <el-form-item label="事件名称" prop="nameEvent" class="input-event-name">
                <el-input v-model="ruleForm.nameEvent" placeholder="将事件命名"></el-input>
            <!--            事件名称-->
            <el-form-item class="input-event-name" label="事件名称" prop="nameOfEvent">
                <el-input v-model="ruleForm.nameOfEvent" placeholder="将事件命名"></el-input>
            </el-form-item>
            <el-form-item label="事件类型" prop="eventType">
                <el-radio-group v-model="ruleForm.eventType">
                    <el-radio v-for="(item,index) in ruleForm.eventTypeList" :label="item.value" :key="index">
            <!--            事件类型-->
            <el-form-item label="事件类型" prop="eventOfType">
                <el-radio-group v-model="ruleForm.eventOfType">
                    <el-radio v-for="(item,index) in ruleForm.eventOfTypeList" :label="item.value" :key="index">
                        <span>{{ item.name }}</span>
                    </el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="事件等级" prop="eventLevel">
                <el-radio-group v-model="ruleForm.eventLevel">
                    <el-radio v-for="(item,index) in ruleForm.eventLevelList" :label="item.value" :key="index">
            <!--            事件等级-->
            <el-form-item label="事件等级" prop="eventOfLevel">
                <el-radio-group v-model="ruleForm.eventOfLevel">
                    <el-radio v-for="(item,index) in ruleForm.eventOfLevelList" :label="item.value" :key="index">
                        <span>{{ item.name }}</span>
                    </el-radio>
                </el-radio-group>
            </el-form-item>
            <el-row>
                <!--                事发单位-->
                <el-col :span="12">
                    <el-form-item label="事发单位" prop="region">
                        <el-select v-model="ruleForm.region" placeholder="请选择活动区域">
                            <el-option label="单位位置1" value="shanghai"></el-option>
                            <el-option label="单位位置2" value="beijing"></el-option>
                    <el-form-item label="事发单位" prop="unit">
                        <el-select v-model="ruleForm.unit" placeholder="请选择活动区域">
                            <el-option
                                    v-for="item in ruleForm.unitList"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <!--                事发时间-->
                <el-col :span="12">
                    <el-form-item label="事发时间" prop="region" class="search-panel-item">
                    <el-form-item class="search-panel-item" label="事发时间" prop="atTime">
                        <el-date-picker
                                v-model="ruleForm.atTime"
                                type="datetime"
@@ -43,29 +55,35 @@
                </el-col>
            </el-row>
            <el-row>
                <!--                事发位置-->
                <el-col :span="12">
                    <el-form-item label="事发位置" prop="region" class="search-panel-item">
                        <el-input v-model="ruleForm.name" class="report-input"></el-input>
                    <el-form-item label="事发位置" prop="positionOf">
                        <el-input v-model="ruleForm.positionOf"></el-input>
                    </el-form-item>
                </el-col>
                <!--                位置描述-->
                <el-col :span="12">
                    <el-form-item label="位置描述" prop="name">
                        <el-input v-model="ruleForm.name" class="report-input"></el-input>
                    <el-form-item label="位置描述" prop="positionDescription">
                        <el-input v-model="ruleForm.positionDescription"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <!--                管线名称-->
                <el-col :span="12">
                    <el-form-item label="管线名称" prop="region" class="search-panel-item">
                        <el-input v-model="ruleForm.name" class="report-input"></el-input>
                    <el-form-item label="管线名称" prop="lineName" class="search-panel-item">
                        <el-input disabled v-model="ruleForm.lineName" placeholder="自动带出不可修改"
                                  class="report-input"></el-input>
                    </el-form-item>
                </el-col>
                <!--                管线类型-->
                <el-col :span="12">
                    <el-form-item label="管线类型" prop="name">
                        <label>自动带出不可修改</label>
                    <el-form-item label="管线类型" prop="lineType">
                        <label>{{ ruleForm.lineTypeText }}</label>
                    </el-form-item>
                </el-col>
            </el-row>
            <!--             点击上传-->
            <el-form-item>
                <el-upload
                        class="upload-demo"
@@ -80,12 +98,15 @@
                    <el-button size="small" type="primary">点击上传</el-button>
                </el-upload>
            </el-form-item>
            <!--            消息推送-->
            <el-form-item label="消息推送" prop="beingPush">
                <el-radio-group v-model="ruleForm.beingPush">
                    <el-radio v-for="(item,index) in ruleForm.beingPushList" :label="item.value" :key="index">
                        <span>{{ item.name }}</span>
                    </el-radio>
                </el-radio-group>
                <el-checkbox-group v-model="ruleForm.beingPushed" @change="infotsChange()">
                    <el-checkbox v-for="item in ruleForm.beingPushList"
                                 :key="item.name"
                                 :label="item.name"
                    >
                    </el-checkbox>
                </el-checkbox-group>
            </el-form-item>
            <div v-show="wayTo">
                <el-form-item label="事件描述" prop="desc">
@@ -101,21 +122,23 @@
            </el-form-item>
        </el-form>
    </div>
    <!--    </div>-->
</template>

<script>
import '@utils/dragBoxes'

export default {
  name: 'ReportPopup',
  data () {
    return {
      flag: false,
      dialogVisible: false,
      // 表单绑定数据
      ruleForm: {
        nameEvent: '',
        eventType: '',
        eventTypeList: [
        // 事件名称 绑定数据
        nameOfEvent: '',
        // 事件类型 绑定数据值
        eventOfType: '',
        // 事件类型可选择数据radio 绑定数据
        eventOfTypeList: [
          {
            name: '待补充',
            value: 1
@@ -129,8 +152,10 @@
            value: 3
          }
        ],
        eventLevel: '',
        eventLevelList: [
        // 事件等级
        eventOfLevel: '',
        // 事件等级可选择数据radio 绑定数据
        eventOfLevelList: [
          {
            name: '待补充',
            value: 1
@@ -144,60 +169,128 @@
            value: 3
          }
        ],
        // 事发单位 绑定数据值
        unit: '',
        unitList: [
          {
            label: '扬子',
            value: '1'
          },
          {
            label: '南京',
            value: '2'
          }
        ],
        // 事发时间 绑定数据
        atTime: '',
        beingPush: '',
        // 事发位置
        positionOf: '',
        // 位置描述
        positionDescription: '',
        // 管线名称
        lineName: '',
        // 管线类型
        lineType: '',
        lineTypeText: '自动带出不可修改',
        // 消息推送
        beingPushed: [],
        beingPushList: [
          {
            name: '短信推送',
            value: 1
            value: false
          },
          {
            name: '手机应用推送',
            value: 2
            value: false
          }
        ]
      },
      fileList: [],
      wayTo: false,
      // 表单验证
      rules: {
        name: [
        // 事件名称校验
        nameOfEvent: [
          {
            required: true,
            message: '请输入活动名称',
            trigger: 'blur'
          },
          }
        ],
        // 事件类型校验
        eventOfType: [
          {
            min: 3,
            max: 5,
            message: '长度在 3 到 5 个字符',
            required: true,
            message: '请选择事件类型',
            trigger: 'blur'
          }
        ],
        region: [
        // 事件等级校验
        eventOfLevel: [
          {
            required: true,
            message: '请选择事件等级',
            trigger: 'blur'
          }
        ],
        // 事发单位 绑定数据值
        unit: [
          {
            required: true,
            message: '请选择活动区域',
            trigger: 'change'
          }
        ],
        resource: [
        // 事发时间
        atTime: [
          {
            required: true,
            message: '请选择活动资源',
            trigger: 'change'
          }
        ],
        desc: [
        // 事件位置校验
        positionOf: [
          {
            required: true,
            message: '请填写活动形式',
            message: '请输入活动位置',
            trigger: 'blur'
          }
        ]
      }
        ],
        // 位置描述校验
        positionDescription: [
          {
            required: true,
            message: '请输入位置描述',
            trigger: 'blur'
          }
        ],
        // 管线名称
        lineName: [],
        // 管线类型
        lineType: []
      },
      wayTo: false,
      // 上传
      fileList: []
    }
  },
  methods: {
    // 消息推送 选择
    infotsChange () {
      this.wayTo = !this.wayTo
      console.log(this.ruleForm.beingPushed)
      // for (let i = 0; i < this.ruleForm.beingPushed.length; i++) {
      //   // console.log(this.ruleForm.beingPushed[i])
      //   if (this.ruleForm.beingPushed[i] === '短信推送' || this.ruleForm.beingPushed[i] === '手机应用推送') {
      //     this.wayTo = true
      //   } else {
      //     this.wayTo = !this.wayTo
      //   }
      // }
      // if (this.ruleForm.beingPushed[0] === '短信推送') {
      //   console.log('短信推送')
      //   this.wayTo = true
      // }
    },
    handleRemove (file, fileList) {
      console.log(file, fileList)
    },
@@ -231,11 +324,24 @@
</script>

<style lang="less" scoped>
    .public-bounced {
        z-index: 2000;
        position: absolute;
        top: 15%;
        left: 20%;

    /deep/ .el-form-item.is-required:not(.is-no-asterisk) .el-form-item__label-wrap>.el-form-item__label:before, .el-form-item.is-required:not(.is-no-asterisk)>.el-form-item__label:before {
        display: none;
    }

    /deep/ .el-form-item.is-required:not(.is-no-asterisk) .el-form-item__label-wrap > .el-form-item__label:before, .el-form-item.is-required:not(.is-no-asterisk) > .el-form-item__label:after {
        content: '*';
        color: #F56C6C;
        margin-left: 4px;
    }
    /deep/ .el-checkbox__label ::after {
        content: '*' !important;
        color: #F56C6C !important;
        margin-left: 4px !important;
    }

    /deep/ .el-checkbox__label {
        color: #00fff6 !important;
    }

    /deep/ input {
@@ -244,12 +350,21 @@
        border: solid 1px #00fff6;
        color: #C0C4CC;
        font-size: 0.01rem;
        padding: 0 15px;
        /*padding: 0 15px;*/
    }

    /deep/ .el-input.is-disabled .el-input__inner {
        border-radius: 0;
        background-color: rgba(0, 255, 246, 0.14);
        border: solid 1px #00fff6;
        color: #C0C4CC;
        font-size: 0.01rem;
        /*padding: 0 15px;*/
    }

    /deep/ .input-event-name {
        margin: 15px 0;
        width: 55%;
        width: 75%;

        .el-input__inner {
            width: 100%;

 src/components/panel/topicSearch/EnterpriseEmergency/ResourcesQuery.vue

@@ -53,18 +53,22 @@
</template>

<script>
// wfs ajax
import WfsHelper from '@components/helpers/WfsHelper'
import AjaxUtils from '@utils/AjaxUtils'
// 图层控制选择的数据
import { LayerEmergencySource } from '../../../../conf/layers/LayerEmergencySource'
import { LayerSurroundings } from '../../../../conf/layers/LayerSurroundings'
// import { pulseEffect } from '../../../../utils/utils'
import { locate } from '../../../helpers/LocateHelper'
// 引入的方法
import { pulseEffect } from '../../../../utils/utils'
// import { locate } from '../../../helpers/LocateHelper'
// import { fitBounds, highlight, locate, openPropsPopup } from '../../../helpers/LocateHelper'

export default {
  name: 'ResourcesQuery',
  data () {
    return {
      // form 表单绑定数据
      form: {
        eventName: '',
        pipelineType: LayerEmergencySource.name,
@@ -75,11 +79,16 @@
          { name: '南京化学' }
        ]
      },
      // 搜索到的数据绑定的active的样式
      activeNum: -1,
      // 搜索到的数据进行存储的list
      list: [],
      // form表单绑定的图层数据
      items: [LayerEmergencySource, LayerSurroundings],
      subItems: LayerEmergencySource.layers || LayerSurroundings.layers,
      // wfs
      WfsHelper: null,
      // 应急 || 周边 的区分绑定数据
      changeAmount: '资源'
    }
  },
@@ -87,11 +96,13 @@
    this.wfsHelper = new WfsHelper()
  },
  methods: {
    // 搜索展示图片根据返回值展示
    getImgSrc (type) {
      // console.log(type)
      // const icon = this.form.dataType.icon
      return 'assets/images/map/sewers/' + type + '.png'
    },
    // form 表单选择数据数据选择分配
    handlePipelineType (val) {
      // console.log(val)
      this.list = []
@@ -110,10 +121,12 @@
        this.changeAmount = '环境'
      }
    },
    // 二级from表单选择数据清空 已有展示数据
    handleDataType (val) {
      // console.log(val)
      this.list = []
    },
    // 点击搜索事件
    async handleSearch () {
      this.list = []
      this.wfsHelper.clearFilter()
@@ -136,13 +149,13 @@
    },
    // 查询定位功能
    handleLocation (val, index) {
      console.log(val)
      // console.log(val)
      this.activeNum = index
      const config = this.form.dataType
      locate(val, config)
      // const positionArea = [val.properties.y, val.properties.x]
      // window.map.setView(positionArea, 17)
      // pulseEffect(positionArea)
      const positionArea = [val.properties.y, val.properties.x]
      window.map.setView(positionArea, 17)
      pulseEffect(positionArea)
      // const config = this.form.dataType
      // locate(val, config)
      // fitBounds(val, this.form.dataType.code)
      // highlight(val, this.form.dataType)
    }

 src/components/panel/topicSearch/EnterpriseEmergencySearch.vue

File was renamed from src/components/panel/topicSearch/ReportSearch.vue
@@ -9,17 +9,15 @@
                <ResourcesQuery></ResourcesQuery>
            </el-tab-pane>
        </el-tabs>
        <!--        <ReportPopup></ReportPopup>-->
    </div>
</template>

<script>
import EventQuery from './EnterpriseEmergency/EventQuery'
import ResourcesQuery from './EnterpriseEmergency/ResourcesQuery'
// import ReportPopup from './SewersSelect/EnterpriseEmergency/ReportPopup'

export default {
  name: 'ReportSearch',
  name: 'EnterpriseEmergencySearch',
  props: ['title'],
  components: {
    EventQuery,
@@ -35,13 +33,6 @@
  methods: {
    handleClick (tab) {
      console.log(tab)
      if (tab.label === '分析') {
        // 关闭弹窗
        window.layerFactory.clickSwitch = false
      } else {
        // 打开弹窗
        window.layerFactory.clickSwitch = true
      }
    }
  }
}

 src/components/panel/topicSearch/SewersSearch.vue

@@ -135,6 +135,13 @@
    // tab切换
    handleClick (tab, event) {
      console.log(tab, event)
      if (tab.label === '分析') {
        // 关闭弹窗
        window.layerFactory.clickSwitch = false
      } else {
        // 打开弹窗
        window.layerFactory.clickSwitch = true
      }
    },
    // 根据返回数据 确认展示图片
    getImgSrc () {

 src/components/panel/topicSearch/SewersSelect/SewersAnalysis.vue

@@ -215,8 +215,6 @@
    // 连通性 起始管段 table列表数据 选择数据事件 的点击事件
    linkSelectStart (e) {
      // console.log(e)
      // console.log('选择起始管段')
      // this.$refs.singleTable.setCurrentRow(e)
      this.currentSelectStart = e
      if (this.currentSelectStartLine != null) {
        this.currentSelectStartLine.remove()

 src/conf/Topic.js

@@ -9,7 +9,7 @@
  envProtectSearch: () => import('@components/panel/topicSearch/EnvRiskSearch'),
  soilGroundWaterSearch: () => import('@components/panel/topicSearch/SoilGroundWaterSearch'),
  sewersSearch: () => import('@components/panel/topicSearch/SewersSearch.vue'),
  ReportSearchL: () => import('@components/panel/topicSearch/ReportSearch.vue')
  EnterpriseEmergencySearch: () => import('@components/panel/topicSearch/EnterpriseEmergencySearch.vue')
}

export const TopicList = [{