|
|
@@ -1,8 +1,119 @@
|
|
|
<template>
|
|
|
+ <div class="visual-con">
|
|
|
+ <!--头部-->
|
|
|
+ <vheader></vheader>
|
|
|
+ <!--主体-->
|
|
|
+ <div class="visual-body">
|
|
|
+ <!-- 左侧 -->
|
|
|
+ <div class="leftbar" :class="indentleft" ref="left">
|
|
|
+
|
|
|
+ <div class="forthis">
|
|
|
+ <div class="this-title">
|
|
|
+ <span>人员分布</span>
|
|
|
+ <!-- <span>45</span> -->
|
|
|
+ </div>
|
|
|
+ <div class="i-list-con h-25">
|
|
|
+ <div id="personnel-chart" style="width: 100%;height:12vh;"></div>
|
|
|
+ <div class="d-l-con-icon">
|
|
|
+ <div class="icon-con w-50" v-for="(item,index) in allPeople">
|
|
|
+ <div class="icon icon-mid el-icon-user"></div>
|
|
|
+ <div class="icon-text">
|
|
|
+ <h5>{{item.job}}</h5>
|
|
|
+ <h6>{{item.number}}</h6>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="icon-con w-50 m-btm-no" v-for="(item,index) in allPeople" >
|
|
|
+ <div class="icon icon-mid el-icon-user"></div>
|
|
|
+ <div class="icon-text">
|
|
|
+ <h5>{{item.job}}</h5>
|
|
|
+ <h6>{{item.number}}</h6>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="forthis">
|
|
|
+ <div class="i-list-con h-27">
|
|
|
+ <div class="d-l-con-icon">
|
|
|
+ <div class="icon-con" v-for="(item,index) in peopleList">
|
|
|
+ <div class="icon icon-mid el-icon-user"></div>
|
|
|
+ <div class="icon-text">
|
|
|
+ <h6>{{item.count}}</h6>
|
|
|
+ <h5>{{item.resourceName}}</h5>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 地图 -->
|
|
|
+ <supermap ref="supermap" style="width: 100%;height: 100vh;" :mapDiv="'forestMap'" :mapSite="{doubleClickZoom:false}"
|
|
|
+ :codes="['9fa5']" :isSideBySide="false" @preview="preview" @showEventInfo_notProcessed="showEventInfo_notProcessed" @showEventInfo_Processed="showEventInfo_Processed"></supermap>
|
|
|
+ <!-- 右侧 -->
|
|
|
+ <div class="rightbar" :class="indentright" ref="right">
|
|
|
+ <div class="forthis">
|
|
|
+ <div class="this-title">
|
|
|
+ <span>巡林计划</span>
|
|
|
+ <!-- <span>23</span> -->
|
|
|
+ </div>
|
|
|
+ <div class="i-list-con h-73">
|
|
|
+
|
|
|
+ <div class="h-19 overflow-y">
|
|
|
+ <div class="d-l-con" v-for="(item,index) in xunLinListOne">
|
|
|
+ <div class="d-l-l-text">
|
|
|
+ <i class="i-small"></i>
|
|
|
+ <h4>{{item.name}}</h4>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+
|
|
|
+
|
|
|
+ </div>
|
|
|
+ <vBottomMenu ref="bottomMenu"></vBottomMenu>
|
|
|
+ <el-tooltip :content="indentText" placement="top" :disabled="indentdisabled">
|
|
|
+ <div class="mascot" ref="mascot" :class="indentStyle" @click="indent">
|
|
|
+ <img src="@/assets/images/mascot.png" /></div>
|
|
|
+ </el-tooltip>
|
|
|
+ </div>
|
|
|
+
|
|
|
+
|
|
|
+ <eventLocation ref="eventLocation"></eventLocation>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+ let echarts = require('echarts')
|
|
|
+ export default {
|
|
|
+
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ allPeople:[
|
|
|
+ { job:'网格长', number:'12345'},
|
|
|
+ { job:'网格长', number:'12345'},
|
|
|
+ ],
|
|
|
+ peopleList:[
|
|
|
+ { count:'姓名', resourceName:'部门'},
|
|
|
+ { count:'姓名', resourceName:'部门'},
|
|
|
+ { count:'姓名', resourceName:'部门'},
|
|
|
+ { count:'姓名', resourceName:'部门'},
|
|
|
+ { count:'姓名', resourceName:'部门'},
|
|
|
+ { count:'姓名', resourceName:'部门'},
|
|
|
+ { count:'姓名', resourceName:'部门'},
|
|
|
+ { count:'姓名', resourceName:'部门'},
|
|
|
+ { count:'姓名', resourceName:'部门'},
|
|
|
+ { count:'姓名', resourceName:'部门'},
|
|
|
+ ],
|
|
|
+ xunLinListOne:[{name:'第一计划'},{name:'第二计划'},{name:'第三计划'},{name:'第四计划'}]
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
</script>
|
|
|
|
|
|
-<style>
|
|
|
+<style rel="stylesheet/scss" lang="scss" scoped>
|
|
|
+ @import '@/assets/styles/base.scss';
|
|
|
+ .h-27{ height: 27rem;}
|
|
|
+
|
|
|
</style>
|
xiaoxue