|
|
@@ -1,202 +1,326 @@
|
|
|
<template>
|
|
|
- <div class="visual-con">
|
|
|
- <!--头部-->
|
|
|
- <vheader></vheader>
|
|
|
- <!--主体-->
|
|
|
- <div class="visual-body">
|
|
|
- <!-- 左侧 -->
|
|
|
- <div class="leftbar" :class="indentleft" ref="left">
|
|
|
+ <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 personnel-name">
|
|
|
- <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="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 visuForestCloudRYBO" v-if="index%2==0">
|
|
|
+ <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 visuForestCloudRYBO" v-if="index%2!=0">
|
|
|
+ <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 personnel-name">
|
|
|
+ <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"></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 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>
|
|
|
|
|
|
|
|
|
- </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>
|
|
|
+ </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>
|
|
|
- import supermap from '@/components/supermap' //超图
|
|
|
- import vheader from '@/components/v-header.vue' //一体化共用头部
|
|
|
- import vBottomMenu from '@/components/vBottomMenu.vue' //一体化公共底部菜单
|
|
|
+ import {
|
|
|
+ getForestLeader
|
|
|
+ } from '@/api/leader'
|
|
|
+ import {
|
|
|
+ getBaseInfo
|
|
|
+ } from '@/api/forest'
|
|
|
+
|
|
|
+ import supermap from '@/components/supermap' //超图
|
|
|
+ import vheader from '@/components/v-header.vue' //一体化共用头部
|
|
|
+ import vBottomMenu from '@/components/vBottomMenu.vue' //一体化公共底部菜单
|
|
|
+ import eventLocation from '@/components/eventLocation.vue' //事件定位弹窗
|
|
|
+
|
|
|
+ let echarts = require('echarts')
|
|
|
+ export default {
|
|
|
+ components: {
|
|
|
+ supermap,
|
|
|
+ vheader,
|
|
|
+ vBottomMenu,
|
|
|
+ eventLocation
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ //左右缩进
|
|
|
+ indentStyle: '',
|
|
|
+ indentleft: '',
|
|
|
+ indentright: '',
|
|
|
+ indentText: '收起左右栏',
|
|
|
+ indentdisabled: false,
|
|
|
+ visuForestCloudRYBO: [],//人员类型列表
|
|
|
+ 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: '第四计划'
|
|
|
+ }]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.getInit()
|
|
|
+ /** ----------------------------------底部按钮公用组件开始------------------------------------- */
|
|
|
+ window.showDialog = this.showDialog
|
|
|
+ window.choseLayerSwitching = this.choseLayerSwitching
|
|
|
+ /** ----------------------------------底部按钮公用组件结束------------------------------------- */
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ /** ----------------------------------底部按钮公用组件开始------------------------------------- */
|
|
|
+ showDialog(click) {
|
|
|
+ if (click == 'eventLocation') {
|
|
|
+ this.$refs.eventLocation.showEventLocation()
|
|
|
+ } else if (click == 'editableLayers') {
|
|
|
+ if (!this.$refs.supermap.isEditableLayers) {
|
|
|
+ this.$refs.supermap.isEditableLayers = true
|
|
|
+ } else {
|
|
|
+ this.$refs.supermap.isEditableLayers = false
|
|
|
+ }
|
|
|
+ } else if (click == 'layerSwitching') {
|
|
|
+ if (!this.$refs.bottomMenu.showChild) {
|
|
|
+ this.$refs.bottomMenu.showChild = true
|
|
|
+ } else {
|
|
|
+ this.$refs.bottomMenu.showChild = false
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //选择图层
|
|
|
+ choseLayerSwitching(url) {
|
|
|
+ this.$refs.supermap.layerSwitching(url, true)
|
|
|
+ },
|
|
|
+ /** ----------------------------------底部按钮公用组件结束------------------------------------- */
|
|
|
+
|
|
|
+ //初始化
|
|
|
+ getInit() {
|
|
|
+ let that = this
|
|
|
+ //获取左侧菜单列表
|
|
|
+ getBaseInfo().then(res => {
|
|
|
+ that.visuForestCloudRYBO = res.data.visuForestCloudRYBO
|
|
|
+ console.log(that.visuForestCloudRYBO)
|
|
|
+ this.personnelChart()
|
|
|
+ })
|
|
|
+ },
|
|
|
+ //获取左侧菜单列表
|
|
|
+ getForestLeader() {
|
|
|
+ getForestLeader().then(res => {
|
|
|
+ console.log(res)
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ //吉祥物收起左右框
|
|
|
+ indent() {
|
|
|
+ let list = document.getElementsByClassName('el-tooltip__popper')
|
|
|
+ list[list.length - 1].style.display = 'none'
|
|
|
+ if (this.indentStyle == '') {
|
|
|
+ this.indentStyle = 'indent-style'
|
|
|
+ this.indentleft = 'indent-left'
|
|
|
+ this.indentright = 'indent-right'
|
|
|
+ this.indentText = '展开左右栏'
|
|
|
+ } else if (this.indentText == '展开左右栏') {
|
|
|
+ this.indentStyle = ''
|
|
|
+ this.indentleft = ''
|
|
|
+ this.indentright = ''
|
|
|
+ this.indentText = '收起左右栏'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //人员chart
|
|
|
+ personnelChart() {
|
|
|
+ // 基于准备好的dom，初始化echarts实例
|
|
|
+ let myChart = echarts.init(document.getElementById('personnel-chart'))
|
|
|
+ // 绘制图表
|
|
|
+ const handred = 100
|
|
|
+ let point = 66
|
|
|
+ myChart.setOption({
|
|
|
+ title: [{
|
|
|
+ text: '总人数：' + handred + '人' + '\n' + '\n' + '在线人数：' + point + '人',
|
|
|
+ x: '48%',
|
|
|
+ y: '25%',
|
|
|
+ textStyle: {
|
|
|
+ fontWeight: 'normal',
|
|
|
+ color: '#02d6fc',
|
|
|
+ fontSize: '14'
|
|
|
+ }
|
|
|
+ }],
|
|
|
+ series: [{
|
|
|
+ name: 'circle',
|
|
|
+ type: 'pie',
|
|
|
+ center: ['22%', '50%'],
|
|
|
+ radius: ['60%', '70%'],
|
|
|
+ clockWise: true,
|
|
|
+ label: {
|
|
|
+ normal: {
|
|
|
+ position: 'center'
|
|
|
+
|
|
|
+ }
|
|
|
+ },
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ label: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ labelLine: {
|
|
|
+ show: false
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data: [{
|
|
|
+ value: point,
|
|
|
+ name: '当前在线',
|
|
|
+ label: {
|
|
|
+ show: true, //单独显示该数据项
|
|
|
+ formatter: '{c}人',
|
|
|
+ labelLayout: {
|
|
|
+ top: '50%'
|
|
|
+ },
|
|
|
+ textStyle: {
|
|
|
+ color: '#02d6fc',
|
|
|
+ fontSize: 14
|
|
|
+ }
|
|
|
+ },
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ color: { // 完成的圆环的颜色
|
|
|
+ colorStops: [{
|
|
|
+ offset: 0,
|
|
|
+ color: '#02d6fc' // 0% 处的颜色
|
|
|
+ }, {
|
|
|
+ offset: 1,
|
|
|
+ color: '#367bec' // 100% 处的颜色
|
|
|
+ }]
|
|
|
+ },
|
|
|
+ label: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ labelLine: {
|
|
|
+ show: false
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }, {
|
|
|
+ value: handred - point,
|
|
|
+ itemStyle: {
|
|
|
+ color: '#666'
|
|
|
+ }
|
|
|
+ }]
|
|
|
+ }]
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- let echarts = require('echarts')
|
|
|
- export default {
|
|
|
- components: {
|
|
|
- supermap,
|
|
|
- vheader,
|
|
|
- vBottomMenu,
|
|
|
- },
|
|
|
- data() {
|
|
|
- return {
|
|
|
- //左右缩进
|
|
|
- indentStyle: '',
|
|
|
- indentleft: '',
|
|
|
- indentright: '',
|
|
|
- indentText: '收起左右栏',
|
|
|
- indentdisabled: false,
|
|
|
-
|
|
|
-
|
|
|
- //虚拟数据
|
|
|
- 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: '第四计划'
|
|
|
- }]
|
|
|
- }
|
|
|
- },
|
|
|
- methods:{
|
|
|
- //吉祥物收起左右框
|
|
|
- indent(){
|
|
|
- let list = document.getElementsByClassName('el-tooltip__popper')
|
|
|
- list[list.length - 1].style.display = 'none'
|
|
|
- if(this.indentStyle == ''){
|
|
|
- this.indentStyle = 'indent-style'
|
|
|
- this.indentleft = 'indent-left'
|
|
|
- this.indentright = 'indent-right'
|
|
|
- this.indentText = '展开左右栏'
|
|
|
- } else if (this.indentText == '展开左右栏'){
|
|
|
- this.indentStyle = ''
|
|
|
- this.indentleft = ''
|
|
|
- this.indentright = ''
|
|
|
- this.indentText = '收起左右栏'
|
|
|
- }
|
|
|
- },
|
|
|
- }
|
|
|
-
|
|
|
- }
|
|
|
+ }
|
|
|
</script>
|
|
|
|
|
|
<style rel="stylesheet/scss" lang="scss" scoped>
|
|
|
- @import '@/assets/styles/base.scss';
|
|
|
+ @import '@/assets/styles/base.scss';
|
|
|
|
|
|
- .h-27 {
|
|
|
- height: 27rem;
|
|
|
- }
|
|
|
+ .h-27 {
|
|
|
+ height: 27rem;
|
|
|
+ }
|
|
|
</style>
|
