|
@@ -1,211 +1,219 @@
|
|
<template>
|
|
<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 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 -->
|
|
|
|
- </el-col>
|
|
|
|
- <!-- 左侧end -->
|
|
|
|
- <!-- 右侧 -->
|
|
|
|
- <el-col :span="6" class="dia-right">
|
|
|
|
|
|
+ </div>
|
|
|
|
+ <!-- 底部工具栏end -->
|
|
|
|
+ </el-col>
|
|
|
|
+ <!-- 左侧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 :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>
|
|
|
|
|
|
- <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>
|
|
|
|
|
|
+ </el-col>
|
|
|
|
+ <!-- 左侧end -->
|
|
|
|
+ </el-row>
|
|
|
|
+ </div>
|
|
|
|
+ </el-dialog>
|
|
|
|
+ </div>
|
|
|
|
+ <vBottomMenu ref="bottomMenu"></vBottomMenu>
|
|
|
|
+ </div>
|
|
</template>
|
|
</template>
|
|
|
|
|
|
<script>
|
|
<script>
|
|
- import vheader from '@/components/v-header.vue' //一体化共用头部
|
|
|
|
- import vBottomMenu from '@/components/vBottomMenu.vue' //一体化公共底部菜单
|
|
|
|
- export default {
|
|
|
|
- components: {
|
|
|
|
- vheader,
|
|
|
|
- vBottomMenu,
|
|
|
|
- },
|
|
|
|
- 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: '',
|
|
|
|
|
|
+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() {
|
|
|
|
- this.eventDialog = true
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ methods: {
|
|
|
|
+ showEventDialog() {
|
|
|
|
+ this.eventDialog = true
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+}
|
|
</script>
|
|
</script>
|
|
|
|
|
|
<style>
|
|
<style>
|