Project_yhfu/src/views/eventdetailsdialog.vue

<template>
  <div class="visual-con">
    <!--头部-->
    <vheader></vheader>
    <!--主体-->
    <div class="visual-body">
      <button @click="showEventDialog"
              style="position: absolute; left:50%;top: 50vh; transform: translateX(-50%);">触发事件详情</button>
      <!-- 弹层 -->
      <el-dialog title="事件详情" :visible.sync="eventDialog" v-if="eventDialog" width="90%"
                 @close="cancelEventShow()">
        <div class="dia-event-info">
          <el-row>
            <!-- 左侧 -->
            <el-col :span="18" class="dia-left">
              <!-- 应急预案 -->
              <div class="dia-left-top">
                <div class="dia-left-top-tit">应急预案</div>
                <div class="dia-left-top-carousel">
                  <el-carousel height="30px" direction="vertical" :interval="2000">
                    <el-carousel-item v-for="item in 3" :key="item">
                      <a href="#">这是一条应急预案</a>
                    </el-carousel-item>
                  </el-carousel>
                </div>
              </div>
              <!-- 应急预案end -->
              <!-- 左侧资源 -->
              <div class="leftbar w-10 top-2">
                <div class="forthis">
                  <dv-border-box-7 backgroundColor="#040b1f" :color="['#25335d', '#5baffd']">
                    <div class="i-list-con h-51">
                      <div class="d-l-con-icon">
                        <div class="icon-con" v-for="(item,index) in resourcesList">
                          <div class="iconfont icon icon-normal" :class="item.icon"></div>
                          <div class="icon-text">
                            <h6>{{ item.count }}</h6>
                            <h5>{{ item.resourceName }}</h5>
                          </div>
                        </div>
                      </div>
                    </div>
                  </dv-border-box-7>
                </div>
              </div>
              <!-- 左侧资源end -->
              <!-- 底部工具栏 -->
              <div class="dia-left-btm-tool">

              </div>
              <!-- 底部工具栏end -->
			  <!-- 地图 -->
			  <supermapDialog ref="supermapDialog" :dynamicPlotting="true"
			                  style="width:100% ;height: 75vh;" :mapDiv="'forestWarmSuperMap'"
			                  :mapSite="{doubleClickZoom:false}" :codes="['9fa5']" @preview="preview"
			                  :isSideBySide="false"></supermapDialog>
            </el-col>
            <!-- 左侧end -->
            <!-- 右侧 -->
            <el-col :span="6" class="dia-right">
              <div class="e-right">
                <div class="forthis">
                  <dv-border-box-7 backgroundColor="#040b1f" :color="['#25335d', '#5baffd']"
                                   style="padding-bottom:1rem ;">
                    <div class="i-list-con">
                      <div class="this-con h-45">
                        <div class="z-info-list" style="margin-top: 0;">
                          <el-timeline>
                            <el-timeline-item color="#2bacf7" timestamp="2018/4/12"
                                              placement="top" v-for="(item,index) in 5">
                              <el-card>
                                <div class="z-info-list-con">
                                  <div class="user-and-time flex-d">
                                    <span>中心管理员</span><span><i
                                    class="el-icon-location"></i> 定位</span>
                                  </div>
                                  <div class="z-info">
                                    <div class="this-con-list-info">
                                      请处理单位及时处理
                                    </div>
                                    <div>
                                      <el-image :src="url"
                                                :preview-src-list="srcList"
                                                style="width:3rem; height:3rem;margin: 2px;"
                                                v-for="(item,index) in 10">
                                      </el-image>
                                    </div>
                                  </div>
                                </div>
                              </el-card>
                            </el-timeline-item>
                          </el-timeline>
                        </div>
                      </div>
                    </div>
                  </dv-border-box-7>
                </div>
                <div class="forthis">
                  <dv-border-box-7 backgroundColor="#040b1f" :color="['#25335d', '#5baffd']">
                    <div class="i-list-con">
                      <div class="this-con h-25 no-padding">
                        <div class="z-info-list" style="margin-top: 0;">
                          <div class="z-info-btm-grp">
                            <div class="z-info-btm-grp-top">
                              <div class="z-info-btm-grp-left">
                                <el-button size="small" icon="el-icon-s-flag">责任制
                                </el-button>
                                <el-button size="small" icon="el-icon-upload">上传
                                </el-button>
                                <el-button size="small" icon="el-icon-download">保存
                                </el-button>
                              </div>
                              <div class="z-info-btm-grp-right">
                                <el-button size="small" icon="el-icon-mic">会议
                                </el-button>
                              </div>
                            </div>
                            <div class="z-info-btm-input">
                              <el-input type="textarea" v-model="feedback"
                                        :autosize="{ minRows: 7, maxRows: 7}" placeholder="请输入反馈信息">
                              </el-input>
                              <div class="z-info-btm-input-btn">
                                <el-button size="small" icon="el-icon-chat-dot-square">发送
                                </el-button>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </dv-border-box-7>
                </div>
              </div>

            </el-col>
            <!-- 左侧end -->
          </el-row>
        </div>
      </el-dialog>
    </div>
    <vBottomMenu ref="bottomMenu"></vBottomMenu>
  </div>
</template>

<script>
import supermapDialog from '@/components/supermap' //超图
import vheader from '@/components/v-header.vue' //一体化共用头部
import vBottomMenu from '@/components/vBottomMenu.vue' //一体化公共底部菜单
export default {
  components: {
    vheader,
    vBottomMenu,
    supermapDialog
  },
  data() {
    return {
      eventDialog: false,
      resourcesList: [{
        resourceName: '取水口',
        count: '1',
        icon: 'sj-icon-waterintake'
      },
        {
          resourceName: '水鹤',
          count: '1',
          icon: 'sj-icon-watercrane'
        },
        {
          resourceName: '消防栓',
          count: '1',
          icon: 'sj-icon-firehydrant'
        },
        {
          resourceName: '起降点',
          count: '1',
          icon: 'sj-icon-landing'
        },
        {
          resourceName: '检查站',
          count: '1',
          icon: 'sj-icon-checkpoint'
        },
        {
          resourceName: '防火队',
          count: '1',
          icon: 'sj-icon-fireteam'
        },
        {
          resourceName: '重点区域',
          count: '1',
          icon: 'sj-icon-tcqh'
        },
        {
          resourceName: '摄像头',
          count: '1',
          icon: 'sj-icon-jkzx'
        }
      ],
      //图片虚拟
      url: require('@/assets/images/visual/img-sample.png'),
      srcList: [
        require('@/assets/images/visual/img-sample.png'),
        require('@/assets/images/visual/img-sample2.png')
      ],
      //文本域
      feedback: ''

    }
  },
  methods: {
    showEventDialog(id) {
      alert(id)
      this.eventDialog = true
    }
  }
}
</script>

<style>
</style>