企业应急-事件上报布局问题修改

陈泽平

2021-05-31 f3ab28fd376caec5b142145d9b779d846f9fbc10

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

@@ -1,111 +1,110 @@
<template>
    <div class="search-panel">
        <el-form ref="form" :model="form" label-width="90px" class="search-form">
            <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.pipelineType" @change="handlePipelineType"
                               :popper-class="'select-down'">
                        <el-option
                                v-for="item in items"
                                :key="item.code"
                                :label="item.name"
                                :value="item.name">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="事件状态：" size="mini">
                    <el-select style="width: 100%" v-model="form.dataType" value-key="code"
                               :popper-class="'select-down'" @change="handleDataType">
                        <el-option
                                v-for="item in subItems"
                                :key="item.code"
                                :label="item.name"
                                :value="item">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="事件类型：">
                    <el-radio-group v-model="form.transferData" class="levelOfRisk">
                        <el-radio v-for="(item,index) in form.levelOfRisk" :label="item.value" :key="index"
                                  @change="redioChange(item.name)">
                            <span class="levelOfRisk-type">{{ item.name }}</span>
                        </el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-button type="primary" small @click="dialogVisibleChange">事件上报</el-button>
                <div class="page_total">
                    <p>共计
                        <span>{{total}}</span>
                        条记录
                    </p>
                </div>
                <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>
        </el-form>
        <el-scrollbar style="height:286.22px">
            <!--            <div class="environmental-risk-list" v-for="(item,index) in list" :key="index" :class="activeNum===index?'hover':''" @click="accordPopup(item)">-->
            <!--                &lt;!&ndash;                <i class="state"></i>&ndash;&gt;-->
            <!--                <img class="state" :src="getImgSrc(item.properties.type)" style="background: none"/>-->
            <!--                <div>-->
            <!--                    <h3 @click="handleLocation(item,index)">事件名称: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>{{ item.properties.pipecode }}</span>-->
            <!--                        <el-button class="rt btn00fff6" size="mini" style="margin-right: 0.04rem;">事件管理-->
            <!--                        </el-button>-->
            <!--                    </p>-->
            <!--                </div>-->
            <!--            </div>-->
            <div class="environmental-risk-list">
                <i class="state"></i>
                <div>
                    <h3>
                        <span @click="disposalfx">件名称:XXX事件</span>
                        <el-button class="rt btn00fff6" size="mini" style="margin-right: 0.04rem;"
                                   @click="startAnalysis">
                            <span>开始分析</span>
                        </el-button>
                    </h3>
                    <h5>
                        <span>事件事件:2021年3月21日</span>
                        <el-button class="rt btn00fff6" size="mini" style="margin: 0.04rem 0.1rem;">删除</el-button>
                    </h5>
                    <p>
                        事件状态：<span>审批阶段</span>
                    </p>
                    <p>事件类型：<span>模拟管线事件</span>
                        <el-button class="rt btn00fff6" size="mini" style="margin-right: 0.04rem;"
                                   @click="accordPopup()">
                            <span>事件管理</span>
                        </el-button>
                    </p>
                </div>
            </div>
        </el-scrollbar>
        <div class="event-report">
            <el-dialog
                    custom-class="el-dialog--center"
                    title="事件上报"
                    :visible.sync="dialogVisible"
                    :append-to-body="true"
                    :modal="false"
                    v-dialogDragBottom
            >
                <EventsReported></EventsReported>
            </el-dialog>
        </div>
<!--        <Dialog ref="EReported" title="事件上报2">-->
<!--            <EventsReported></EventsReported>-->
<!--        </Dialog>-->
  <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.pipelineType" @change="handlePipelineType"
                   :popper-class="'select-down'">
          <el-option
              v-for="item in items"
              :key="item.code"
              :label="item.name"
              :value="item.name">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="事件状态：" size="mini">
        <el-select style="width: 100%" v-model="form.dataType" value-key="code"
                   :popper-class="'select-down'" @change="handleDataType">
          <el-option
              v-for="item in subItems"
              :key="item.code"
              :label="item.name"
              :value="item">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="事件类型：">
        <el-radio-group v-model="form.transferData" class="levelOfRisk">
          <el-radio v-for="(item,index) in form.levelOfRisk" :label="item.value" :key="index"
                    @change="redioChange(item.name)">
            <span class="levelOfRisk-type">{{ item.name }}</span>
          </el-radio>
        </el-radio-group>
      </el-form-item>
      <el-button type="primary" small @click="dialogVisibleChange">事件上报</el-button>
      <div class="page_total">
        <p>共计
          <span>{{ total }}</span>
          条记录
        </p>
      </div>
      <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>
    <el-scrollbar style="height:286.22px">
      <!--            <div class="environmental-risk-list">-->
      <!--                <i class="state"></i>-->
      <!--                <el-row>-->
      <!--                    <h3>-->
      <!--                        <span @click="handleLocation">事件名称:XXX事件</span>-->
      <!--                      <el-button class="rt btn00fff6" size="mini" @click="startAnalysis">开始分析</el-button>-->
      <!--                    </h3>-->
      <!--                    <h5>-->
      <!--                        <span>事件事件:2021年3月21日</span>-->
      <!--                      <el-button class="rt btn00fff6" size="mini">删除</el-button>-->
      <!--                    </h5>-->
      <!--                    <p>-->
      <!--                        事件状态：<span>审批阶段</span>-->
      <!--                      <el-button class="rt btn00fff6" size="mini" @click="accordPopup()">事件处置</el-button>-->
      <!--                    </p>-->
      <!--                    <p>事件类型：<span>模拟管线事件</span></p>-->
      <!--                </el-row>-->
      <!--            </div>-->
      <el-row class="environmental-risk-list" type="flex" justify="space-between">
        <el-col :span="4">
          <i class="state"></i>
        </el-col>
        <el-col :span="16">
<!--          <div>-->
            <el-row>
              <h3>
                <span @click="handleLocation">事件名称:XXX事件</span>
                <!--                    <el-button class="rt btn00fff6" size="mini" @click="startAnalysis">开始分析</el-button>-->
              </h3>
              <h5>
                <span>事件事件:2021年3月21日</span>
                <!--                    <el-button class="rt btn00fff6" size="mini">删除</el-button>-->
              </h5>
              <p>
                事件状态：<span>审批阶段</span>
                <!--                    <el-button class="rt btn00fff6" size="mini" @click="accordPopup()">事件处置</el-button>-->
              </p>
              <p>事件类型：<span>模拟管线事件</span></p>
            </el-row>
<!--          </div>-->
        </el-col>
        <el-col :span="4">
          <el-button class="rt btn00fff6" size="mini" @click="startAnalysis" style="margin: 0.01rem">开始分析</el-button>
          <el-button class="rt btn00fff6" size="mini">删除</el-button>
          <el-button class="rt btn00fff6" size="mini" @click="accordPopup()">事件处置</el-button>
        </el-col>
      </el-row>
    </el-scrollbar>
    <div class="event-report">
      <el-dialog
          custom-class="event-report-dialog"
          title="事件上报"
          :visible.sync="dialogVisible"
          :append-to-body="true"
          :modal="false"
          v-dialogDrag
      >
        <EventsReported></EventsReported>
      </el-dialog>
    </div>
  </div>
</template>

<script>
@@ -113,27 +112,23 @@
// import WfsHelper from '@components/helpers/WfsHelper'
// import AjaxUtils from '@utils/AjaxUtils'

import DisposalEvent from '../../../base-page/enterprise-emergency/DisposalEvent'
import eventBus from '../../../../eventBus'
import EventsReported from '../../../../components/base-page/enterprise-emergency/EventsReported'

// import Dialog from '../../../../views/popup/Dialog'
import DisposalEvent from '../../../base-page/enterprise-emergency/DisposalEvent'
import EventsReported from '../../../base-page/enterprise-emergency/events-reported/EventsReported'
// import EventHandling from '@components/base-page/enterprise-emergency/event-handling/EventHandling'

export default {
  name: 'EventQuery',
  components: {
    // Dialog,
    EventsReported
  },
  data () {
    return {
      // 弹框绑定 显示/隐藏 数据
      dialogVisible: false,
      reportIncident: false,
      list: [],
      total: 0,
      activeNum: -1,
      items: [],
      subItems: [],
      // wfs数据请求
      WfsHelper: null,
      // form 表单绑定数据
      form: {
        pipelineType: '',
        dataType: '',
@@ -150,35 +145,35 @@
          }
        ]
      },
      WfsHelper: null
      // active index
      activeNum: -1,
      // 图层
      items: [],
      subItems: [],
      // 请求数据展示列表
      list: [],
      // 分页功能 总数量
      total: 0
    }
  },
  mounted () {
    // this.wfsHelper = new WfsHelper()
    // 接收 数据 用来控制 弹出框 的隐藏
    eventBus.$on('event-report-popup', (obj) => {
      this.dialogVisible = obj
    })
  },
  methods: {
    // 事件上报按钮 点击事件 控制弹框的显示/隐藏
    dialogVisibleChange () {
      this.dialogVisible = !this.dialogVisible
    },
    // 点击事件管理
    accordPopup () {
      eventBus.$emit('disposal-analysis', true)
    },
    // 开始分析
    startAnalysis () {
      eventBus.$emit('start-analysis', true)
    },
    disposalfx () {
      window.$layer.open({
        content: {
          comp: DisposalEvent, // 组件
          parent: this, // 父组件
          data: { // 传递的参数
            // info: this.info
          }
        },
        title: '事件处置'
      })
      eventBus.$emit('event-handling', {})
    },
    // radio数据选择
    redioChange (item) {
@@ -211,24 +206,31 @@
    // 搜索的数据 de 点击事件
    handleLocation () {
      console.log('val')
      // 时间信息 弹出框
      window.$layer.open({
        content: {
          comp: DisposalEvent, // 组件
          parent: this, // 父组件
          data: { // 传递的参数
            // info: this.info
          }
        },
        title: '事件信息'
      })
    }
  }
}
</script>

<style lang="less" scoped>
    /*.event-report {*/
        /deep/ .el-dialog--center {
            /*left: 2rem !important;*/
            margin-left: 2rem !important;
            margin-top: 0.73979rem !important;
            /*bottom: 0 !important;*/
        }
    //}
    /*.event-report {*/
    /deep/ .el-dialog {
            /*width: 30%;*/
            width: 550px;
        }
    /*}*/
/deep/ .el-dialog {
  width: 3.343545rem;
}

/deep/ .event-report-dialog {
  left: 3rem;
  top: 1rem;
  margin-top: 2rem;
  margin-left: 2rem;
}
</style>