|
|
@@ -1,78 +1,78 @@
|
|
|
<template>
|
|
|
- <div class="visual-con">
|
|
|
- <!--头部-->
|
|
|
- <vheader></vheader>
|
|
|
- <!--主体-->
|
|
|
- <div class="visual-body">
|
|
|
- <!-- 左侧 -->
|
|
|
- <div class="leftbar" :class="indentleft" ref="left">
|
|
|
- <div class="forthis">
|
|
|
- <dv-border-box-13 backgroundColor="rgba(12, 19, 38, .90)" style="padding-bottom: 1rem;">
|
|
|
- <img src="../assets/images/integrated/light.png" style="width: 100%; margin-top: .4rem;" />
|
|
|
- <div class="this-title">
|
|
|
- <span>人员分布</span>
|
|
|
- <dv-decoration-3 style="width:150px;height:15px;margin-right: 1rem;" />
|
|
|
- </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" :class="{on:iconCurrentIndex1==item.jobValue}"
|
|
|
- v-for="(item,index) in visuForestCloudRYBO"
|
|
|
- @click="getForestLeader(item.jobValue,item.jobType)">
|
|
|
- <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" :class="{on:listCurrentIndex1==item.jobType}" v-for="(item,index) in visuForestCloudRYBO" v-if="index%2!=0" @click="getForestLeader(item.jobValue,item.jobType)">
|
|
|
+ <div class="visual-con">
|
|
|
+ <!--头部-->
|
|
|
+ <vheader></vheader>
|
|
|
+ <!--主体-->
|
|
|
+ <div class="visual-body">
|
|
|
+ <!-- 左侧 -->
|
|
|
+ <div class="leftbar" :class="indentleft" ref="left">
|
|
|
+ <div class="forthis">
|
|
|
+ <dv-border-box-13 backgroundColor="rgba(12, 19, 38, .90)" style="padding-bottom: 1rem;">
|
|
|
+ <img src="../assets/images/integrated/light.png" style="width: 100%; margin-top: .4rem;" />
|
|
|
+ <div class="this-title">
|
|
|
+ <span>人员分布</span>
|
|
|
+ <dv-decoration-3 style="width:150px;height:15px;margin-right: 1rem;" />
|
|
|
+ </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" :class="{on:iconCurrentIndex1==item.jobValue}"
|
|
|
+ v-for="(item,index) in visuForestCloudRYBO"
|
|
|
+ @click="getTrafficLeader(item.jobValue,item.jobType)">
|
|
|
+ <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" :class="{on:listCurrentIndex1==item.jobType}" v-for="(item,index) in visuForestCloudRYBO" v-if="index%2!=0" @click="getTrafficLeader(item.jobValue,item.jobType)">
|
|
|
<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>
|
|
|
- </dv-border-box-13>
|
|
|
- </div>
|
|
|
- <!-- avatar: ""-->
|
|
|
- <!-- deptName: "锦程社区第一网格"-->
|
|
|
- <!-- nickName: "李猛"-->
|
|
|
- <!-- userId: 102-->
|
|
|
- <!-- userName: "limeng"-->
|
|
|
- <div class="forthis">
|
|
|
- <dv-border-box-13 backgroundColor="rgba(12, 19, 38, .90)" style="padding-bottom: 1rem;">
|
|
|
- <img src="../assets/images/integrated/light.png" style="width: 100%; margin-top: .4rem;" />
|
|
|
- <div class="i-list-con h-27">
|
|
|
- <div class="d-l-con-icon">
|
|
|
- <div class="icon-con" :class="{on:listCurrentIndex1==item.userId}"
|
|
|
- v-for="(item,index) in peopleList" @click="getPlanList(item.userId)">
|
|
|
- <div class="icon icon-mid el-icon-user"></div>
|
|
|
- <div class="icon-text personnel-name">
|
|
|
- <h6>{{ item.nickName }}</h6>
|
|
|
- <h5>{{ item.deptName }}</h5>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </dv-border-box-13>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <!-- 地图 -->
|
|
|
- <supermap ref="supermap" style="width: 100%;height: 100vh;" :mapDiv="'forestMap'" class="indexSupermapClass"
|
|
|
- :mapSite="{doubleClickZoom:false}" :codes="['9fa5']" :isSideBySide="false"></supermap>
|
|
|
- <!-- 右侧 -->
|
|
|
- <div class="rightbar" :class="indentright" ref="right">
|
|
|
- <div class="forthis">
|
|
|
- <dv-border-box-13 backgroundColor="rgba(12, 19, 38, .90)" style="padding-bottom: 1rem;">
|
|
|
- <img src="../assets/images/integrated/light.png" style="width: 100%; margin-top: .4rem;" />
|
|
|
- <div class="this-title">
|
|
|
- <span>巡林任务</span>
|
|
|
- <dv-decoration-3 style="width:150px;height:15px;margin-right: 1rem;" />
|
|
|
- </div>
|
|
|
- <div class="i-list-con h-73">
|
|
|
- <div class="h-73 overflow-y">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </dv-border-box-13>
|
|
|
+ </div>
|
|
|
+ <!-- avatar: ""-->
|
|
|
+ <!-- deptName: "锦程社区第一网格"-->
|
|
|
+ <!-- nickName: "李猛"-->
|
|
|
+ <!-- userId: 102-->
|
|
|
+ <!-- userName: "limeng"-->
|
|
|
+ <div class="forthis">
|
|
|
+ <dv-border-box-13 backgroundColor="rgba(12, 19, 38, .90)" style="padding-bottom: 1rem;">
|
|
|
+ <img src="../assets/images/integrated/light.png" style="width: 100%; margin-top: .4rem;" />
|
|
|
+ <div class="i-list-con h-27">
|
|
|
+ <div class="d-l-con-icon">
|
|
|
+ <div class="icon-con" :class="{on:listCurrentIndex1==item.userId}"
|
|
|
+ v-for="(item,index) in peopleList" @click="getPlanList(item.userId)">
|
|
|
+ <div class="icon icon-mid el-icon-user"></div>
|
|
|
+ <div class="icon-text personnel-name">
|
|
|
+ <h6>{{ item.nickName }}</h6>
|
|
|
+ <h5>{{ item.deptName }}</h5>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </dv-border-box-13>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 地图 -->
|
|
|
+ <supermap ref="supermap" style="width: 100%;height: 100vh;" :mapDiv="'forestMap'" class="indexSupermapClass"
|
|
|
+ :mapSite="{doubleClickZoom:false}" :codes="['9fa5']" :isSideBySide="false"></supermap>
|
|
|
+ <!-- 右侧 -->
|
|
|
+ <div class="rightbar" :class="indentright" ref="right">
|
|
|
+ <div class="forthis">
|
|
|
+ <dv-border-box-13 backgroundColor="rgba(12, 19, 38, .90)" style="padding-bottom: 1rem;">
|
|
|
+ <img src="../assets/images/integrated/light.png" style="width: 100%; margin-top: .4rem;" />
|
|
|
+ <div class="this-title">
|
|
|
+ <span>巡查任务</span>
|
|
|
+ <dv-decoration-3 style="width:150px;height:15px;margin-right: 1rem;" />
|
|
|
+ </div>
|
|
|
+ <div class="i-list-con h-73">
|
|
|
+ <div class="h-73 overflow-y">
|
|
|
<el-collapse accordion>
|
|
|
<el-collapse-item v-for="(item,index) in xunLinListOne">
|
|
|
<template slot="title">
|
|
|
@@ -108,7 +108,7 @@
|
|
|
</div>
|
|
|
</el-collapse-item>
|
|
|
</el-collapse>
|
|
|
- <!--<div class="d-l-con" :class="{on:listCurrentIndex2==item.planName}"
|
|
|
+ <!--<div class="d-l-con" :class="{on:listCurrentIndex2==item.planName}"
|
|
|
v-for="(item,index) in xunLinListOne"
|
|
|
@click="setConnectList(item.planLine,item.planName)">
|
|
|
<div class="d-l-l-text">
|
|
|
@@ -116,389 +116,357 @@
|
|
|
<h4>{{ item.planName }}</h4>
|
|
|
</div>
|
|
|
</div>-->
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </dv-border-box-13>
|
|
|
- </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </dv-border-box-13>
|
|
|
+ </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>
|
|
|
- <TVWall ref="TVWall"></TVWall>
|
|
|
- </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>
|
|
|
+ <TVWall ref="TVWall"></TVWall>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
- import {
|
|
|
- getForestLeader,
|
|
|
- getLeaderTrack,
|
|
|
- getPlanList,
|
|
|
- getRecordList,
|
|
|
- getPointList,
|
|
|
- getRy,
|
|
|
- getRemotelist
|
|
|
- } from '@/api/leader'
|
|
|
+ import {
|
|
|
+ getTrafficLeader,
|
|
|
+ getPlanList,
|
|
|
+ getRecordList,
|
|
|
+ getPointList,
|
|
|
+ getRy
|
|
|
+ } from '@/api/leader'
|
|
|
|
|
|
- import supermap from '@/components/supermap' //超图
|
|
|
- import vheader from '@/components/v-header.vue' //一体化共用头部
|
|
|
- import vBottomMenu from '@/components/vBottomMenu.vue' //一体化公共底部菜单
|
|
|
- import eventLocation from '@/components/eventLocation.vue' //事件定位弹窗
|
|
|
- import TVWall from '@/components/TVWall.vue' //电视墙弹窗
|
|
|
+ import supermap from '@/components/supermap' //超图
|
|
|
+ import vheader from '@/components/v-header.vue' //一体化共用头部
|
|
|
+ import vBottomMenu from '@/components/vBottomMenu.vue' //一体化公共底部菜单
|
|
|
+ import eventLocation from '@/components/eventLocation.vue' //事件定位弹窗
|
|
|
+ import TVWall from '@/components/TVWall.vue' //电视墙弹窗
|
|
|
|
|
|
- let echarts = require('echarts')
|
|
|
- export default {
|
|
|
- components: {
|
|
|
- supermap,
|
|
|
- vheader,
|
|
|
- vBottomMenu,
|
|
|
- eventLocation,
|
|
|
- TVWall
|
|
|
- },
|
|
|
- data() {
|
|
|
- return {
|
|
|
- iconCurrentIndex1: '1',
|
|
|
- listCurrentIndex1: '',
|
|
|
- listCurrentIndex2: '',
|
|
|
- //左右缩进
|
|
|
- indentStyle: '',
|
|
|
- indentleft: '',
|
|
|
- indentright: '',
|
|
|
- indentText: '收起左右栏',
|
|
|
- indentdisabled: false,
|
|
|
- visuForestCloudRYBO: [], //人员类型列表
|
|
|
- peopleList: [], //人员列表
|
|
|
- connectList: [], //画线
|
|
|
- xunLinListOne: [], //巡林任务
|
|
|
- recordList: [], //巡查记录
|
|
|
- showNothing: false, //暂无信息
|
|
|
- zrs: 0, //总人数
|
|
|
- zxrs: 0 //在线人数
|
|
|
- }
|
|
|
- },
|
|
|
- created() {
|
|
|
- this.getInit()
|
|
|
- /** ----------------------------------底部按钮公用组件开始------------------------------------- */
|
|
|
- window.showDialog = this.showDialog
|
|
|
- window.choseLayerSwitching = this.choseLayerSwitching
|
|
|
- window.choseLayerSwitchingList = this.choseLayerSwitchingList
|
|
|
+ let echarts = require('echarts')
|
|
|
+ export default {
|
|
|
+ components: {
|
|
|
+ supermap,
|
|
|
+ vheader,
|
|
|
+ vBottomMenu,
|
|
|
+ eventLocation,
|
|
|
+ TVWall
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ iconCurrentIndex1: '1',
|
|
|
+ listCurrentIndex1: '',
|
|
|
+ listCurrentIndex2: '',
|
|
|
+ //左右缩进
|
|
|
+ indentStyle: '',
|
|
|
+ indentleft: '',
|
|
|
+ indentright: '',
|
|
|
+ indentText: '收起左右栏',
|
|
|
+ indentdisabled: false,
|
|
|
+ visuForestCloudRYBO: [], //人员类型列表
|
|
|
+ peopleList: [], //人员列表
|
|
|
+ connectList: [], //画线
|
|
|
+ xunLinListOne: [], //巡查任务
|
|
|
+ recordList: [], //巡查记录
|
|
|
+ showNothing: false, //暂无信息
|
|
|
+ zrs: 0, //总人数
|
|
|
+ zxrs: 0 //在线人数
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.getInit()
|
|
|
+ /** ----------------------------------底部按钮公用组件开始------------------------------------- */
|
|
|
+ window.showDialog = this.showDialog
|
|
|
+ window.choseLayerSwitching = this.choseLayerSwitching
|
|
|
+ window.choseLayerSwitchingList = this.choseLayerSwitchingList
|
|
|
window.choseLayerSwitchingList_Data = this.choseLayerSwitchingList_Data
|
|
|
- /** ----------------------------------底部按钮公用组件结束------------------------------------- */
|
|
|
- },
|
|
|
+ /** ----------------------------------底部按钮公用组件结束------------------------------------- */
|
|
|
+ },
|
|
|
mounted(){
|
|
|
this.bottomMenuList() //获取底部公共组件消息和任务
|
|
|
},
|
|
|
- methods: {
|
|
|
- /** ----------------------------------底部按钮公用组件开始------------------------------------- */
|
|
|
+ methods: {
|
|
|
+ /** ----------------------------------底部按钮公用组件开始------------------------------------- */
|
|
|
bottomMenuList() {
|
|
|
this.$refs.bottomMenu.selectTaskList()//获取任务列表
|
|
|
this.$refs.bottomMenu.selectMessageList()//获取消息列表
|
|
|
},
|
|
|
- showDialog(click) {
|
|
|
- if (click == 'eventLocation') {
|
|
|
- this.$refs.eventLocation.showEventLocation()
|
|
|
- this.$refs.supermap.isEditableLayers = false
|
|
|
- this.$refs.bottomMenu.showChild = false
|
|
|
- this.$refs.bottomMenu.showBanChild = false
|
|
|
- this.$refs.bottomMenu.showChangChild = false
|
|
|
- } else if (click == 'editableLayers') {
|
|
|
- this.$refs.bottomMenu.showChild = false
|
|
|
- this.$refs.bottomMenu.showBanChild = false
|
|
|
- this.$refs.bottomMenu.showChangChild = false
|
|
|
- if (!this.$refs.supermap.isEditableLayers) {
|
|
|
- this.$refs.supermap.isEditableLayers = true
|
|
|
- } else {
|
|
|
- this.$refs.supermap.isEditableLayers = false
|
|
|
- }
|
|
|
- } else if (click == 'layerSwitching') {
|
|
|
- this.$refs.supermap.isEditableLayers = false
|
|
|
- this.$refs.bottomMenu.showBanChild = false
|
|
|
- this.$refs.bottomMenu.showChangChild = false
|
|
|
- if (!this.$refs.bottomMenu.showChild) {
|
|
|
- this.$refs.bottomMenu.showChild = true
|
|
|
- } else {
|
|
|
- this.$refs.bottomMenu.showChild = false
|
|
|
- }
|
|
|
- } else if (click == 'TVWall') {
|
|
|
- this.$refs.TVWall.showTVWall()
|
|
|
- this.$refs.supermap.isEditableLayers = false
|
|
|
- this.$refs.bottomMenu.showChild = false
|
|
|
- this.$refs.bottomMenu.showBanChild = false
|
|
|
- this.$refs.bottomMenu.showChangChild = false
|
|
|
- } else if (click == 'forestban') {
|
|
|
- this.$refs.supermap.isEditableLayers = false
|
|
|
- this.$refs.bottomMenu.showChild = false
|
|
|
- this.$refs.bottomMenu.showChangChild = false
|
|
|
- if (!this.$refs.bottomMenu.showBanChild) {
|
|
|
- this.$refs.bottomMenu.showBanChild = true
|
|
|
- } else {
|
|
|
- this.$refs.bottomMenu.showBanChild = false
|
|
|
- }
|
|
|
- } else if (click == 'forestchang') {
|
|
|
- this.$refs.supermap.isEditableLayers = false
|
|
|
- this.$refs.bottomMenu.showBanChild = false
|
|
|
- this.$refs.bottomMenu.showChild = false
|
|
|
- if (!this.$refs.bottomMenu.showChangChild) {
|
|
|
- this.$refs.bottomMenu.showChangChild = true
|
|
|
- } else {
|
|
|
- this.$refs.bottomMenu.showChangChild = false
|
|
|
- }
|
|
|
- }
|
|
|
+ showDialog(click) {
|
|
|
+ if (click == 'eventLocation') {
|
|
|
+ this.$refs.eventLocation.showEventLocation()
|
|
|
+ this.$refs.supermap.isEditableLayers = false
|
|
|
+ this.$refs.bottomMenu.showChild = false
|
|
|
+ this.$refs.bottomMenu.showBanChild = false
|
|
|
+ this.$refs.bottomMenu.showChangChild = false
|
|
|
+ } else if (click == 'editableLayers') {
|
|
|
+ this.$refs.bottomMenu.showChild = false
|
|
|
+ this.$refs.bottomMenu.showBanChild = false
|
|
|
+ this.$refs.bottomMenu.showChangChild = false
|
|
|
+ if (!this.$refs.supermap.isEditableLayers) {
|
|
|
+ this.$refs.supermap.isEditableLayers = true
|
|
|
+ } else {
|
|
|
+ this.$refs.supermap.isEditableLayers = false
|
|
|
+ }
|
|
|
+ } else if (click == 'layerSwitching') {
|
|
|
+ this.$refs.supermap.isEditableLayers = false
|
|
|
+ this.$refs.bottomMenu.showBanChild = false
|
|
|
+ this.$refs.bottomMenu.showChangChild = false
|
|
|
+ if (!this.$refs.bottomMenu.showChild) {
|
|
|
+ this.$refs.bottomMenu.showChild = true
|
|
|
+ } else {
|
|
|
+ this.$refs.bottomMenu.showChild = false
|
|
|
+ }
|
|
|
+ } else if (click == 'TVWall') {
|
|
|
+ this.$refs.TVWall.showTVWall()
|
|
|
+ this.$refs.supermap.isEditableLayers = false
|
|
|
+ this.$refs.bottomMenu.showChild = false
|
|
|
+ this.$refs.bottomMenu.showBanChild = false
|
|
|
+ this.$refs.bottomMenu.showChangChild = false
|
|
|
+ } else if (click == 'forestban') {
|
|
|
+ this.$refs.supermap.isEditableLayers = false
|
|
|
+ this.$refs.bottomMenu.showChild = false
|
|
|
+ this.$refs.bottomMenu.showChangChild = false
|
|
|
+ if (!this.$refs.bottomMenu.showBanChild) {
|
|
|
+ this.$refs.bottomMenu.showBanChild = true
|
|
|
+ } else {
|
|
|
+ this.$refs.bottomMenu.showBanChild = false
|
|
|
+ }
|
|
|
+ } else if (click == 'forestchang') {
|
|
|
+ this.$refs.supermap.isEditableLayers = false
|
|
|
+ this.$refs.bottomMenu.showBanChild = false
|
|
|
+ this.$refs.bottomMenu.showChild = false
|
|
|
+ if (!this.$refs.bottomMenu.showChangChild) {
|
|
|
+ this.$refs.bottomMenu.showChangChild = true
|
|
|
+ } else {
|
|
|
+ this.$refs.bottomMenu.showChangChild = false
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- },
|
|
|
- //选择图层
|
|
|
- choseLayerSwitching(url, isClear) {
|
|
|
- this.$refs.supermap.layerSwitching(url, isClear)
|
|
|
- },
|
|
|
- //选择图层(传递数组)
|
|
|
- choseLayerSwitchingList(urlList) {
|
|
|
- this.$refs.supermap.layerSwitchingList(urlList)
|
|
|
- },
|
|
|
+ },
|
|
|
+ //选择图层
|
|
|
+ choseLayerSwitching(url, isClear) {
|
|
|
+ this.$refs.supermap.layerSwitching(url, isClear)
|
|
|
+ },
|
|
|
+ //选择图层(传递数组)
|
|
|
+ choseLayerSwitchingList(urlList) {
|
|
|
+ this.$refs.supermap.layerSwitchingList(urlList)
|
|
|
+ },
|
|
|
//选择图层(传递数组) 带数据
|
|
|
choseLayerSwitchingList_Data(urlList) {
|
|
|
this.$refs.supermap.layerSwitchingList_Data(urlList)
|
|
|
},
|
|
|
- /** ----------------------------------底部按钮公用组件结束------------------------------------- */
|
|
|
+ /** ----------------------------------底部按钮公用组件结束------------------------------------- */
|
|
|
|
|
|
- //初始化
|
|
|
- getInit() {
|
|
|
- let that = this
|
|
|
- this.iconCurrentIndex1 = '1'
|
|
|
- this.listCurrentIndex1 = ''
|
|
|
- this.listCurrentIndex2 = ''
|
|
|
- //获取左侧菜单列表
|
|
|
- getRy().then(res => {
|
|
|
- that.visuForestCloudRYBO = res.data.visuForestCloudRYBO
|
|
|
- that.zrs = res.data.visuForestCloudRyZxBO.zrs
|
|
|
- that.zxrs = res.data.visuForestCloudRyZxBO.zxrs
|
|
|
- this.personnelChart()
|
|
|
- })
|
|
|
- },
|
|
|
- //获取左侧人员列表
|
|
|
- getForestLeader(linJob, linType) {
|
|
|
- this.listCurrentIndex1 = ''
|
|
|
- this.listCurrentIndex2 = ''
|
|
|
- this.iconCurrentIndex1 = linJob
|
|
|
- this.peopleList = []
|
|
|
- getForestLeader(linJob, linType).then(res => {
|
|
|
- this.peopleList = res.data
|
|
|
- })
|
|
|
- this.connectList = []
|
|
|
- this.$refs.supermap.clearC()
|
|
|
- },
|
|
|
- //点击左侧人员列表获取 巡林计划
|
|
|
- getPlanList(personId) {
|
|
|
- this.showNothing = false;
|
|
|
- this.recordList = [];
|
|
|
- getPlanList(personId).then(res => {
|
|
|
- this.xunLinListOne = res.data;
|
|
|
- })
|
|
|
- this.$refs.supermap.clearC()
|
|
|
- },
|
|
|
- //点击左侧人员列表获取轨迹
|
|
|
- getLeaderTrack(userId) {
|
|
|
- this.getRemotelist();
|
|
|
- this.listCurrentIndex1 = userId
|
|
|
- let that = this
|
|
|
- this.connectList = []
|
|
|
- getLeaderTrack(userId).then(res => {
|
|
|
- if (res.data != null && res.data.length > 0) {
|
|
|
- for (let i = 0; i < res.data.length; i++) {
|
|
|
- let latlng = {
|
|
|
- lat: res.data[i].latitude,
|
|
|
- lng: res.data[i].longitude
|
|
|
- }
|
|
|
- this.connectList.push(latlng)
|
|
|
- }
|
|
|
- setTimeout(() => {
|
|
|
- that.$refs.supermap.clearC()
|
|
|
- that.$refs.supermap.setConnectList(this.connectList, 'red')
|
|
|
- }, 1000)
|
|
|
- } else {
|
|
|
- that.$refs.supermap.clearC()
|
|
|
- }
|
|
|
- })
|
|
|
- },
|
|
|
- //点击右侧巡林计划获取 巡查记录
|
|
|
- getRecordList(id) {
|
|
|
- this.showNothing = false;
|
|
|
- this.recordList = [];
|
|
|
- getRecordList(id).then(res => {
|
|
|
- this.recordList = res.data;
|
|
|
- })
|
|
|
- this.$refs.supermap.clearC()
|
|
|
- },
|
|
|
- //点击右侧巡查记录获取 巡查轨迹
|
|
|
- getPointList(id) {
|
|
|
- getPointList(id).then(res => {
|
|
|
- // console.log("落点",res.data);
|
|
|
- this.setPointList(res);
|
|
|
- })
|
|
|
- },
|
|
|
- //点击左侧人员获取人员的巡林计划列表
|
|
|
- getRemotelist() {
|
|
|
- getRemotelist().then(res => {
|
|
|
- this.xunLinListOne = res.data;
|
|
|
- })
|
|
|
- },
|
|
|
- //点击巡查轨迹时段 巡查轨迹落点
|
|
|
- setPointList(res) {
|
|
|
- let that = this;
|
|
|
- this.connectList = [];
|
|
|
- console.log("落点", res.data)
|
|
|
- if (res.data != null && res.data.length > 0) {
|
|
|
- for (let i = 0; i < res.data.length; i++) {
|
|
|
- let latlng = {
|
|
|
- lat: res.data[i].latitude,
|
|
|
- lng: res.data[i].longitude
|
|
|
- }
|
|
|
- this.connectList.push(latlng)
|
|
|
- }
|
|
|
- setTimeout(() => {
|
|
|
- that.$refs.supermap.clearC()
|
|
|
- that.$refs.supermap.setConnectList(this.connectList, 'red')
|
|
|
- }, 1000)
|
|
|
- } else {
|
|
|
- that.$refs.supermap.clearC()
|
|
|
- }
|
|
|
- },
|
|
|
- setConnectList(points, planName) {
|
|
|
- this.listCurrentIndex2 = planName
|
|
|
- this.connectList = []
|
|
|
- if (points != null && points != '') {
|
|
|
- this.connectList = JSON.parse(points)
|
|
|
- this.$refs.supermap.setConnectTwoList(this.connectList, 'red')
|
|
|
- }
|
|
|
- },
|
|
|
+ //初始化
|
|
|
+ getInit() {
|
|
|
+ let that = this
|
|
|
+ this.iconCurrentIndex1 = '1'
|
|
|
+ this.listCurrentIndex1 = ''
|
|
|
+ this.listCurrentIndex2 = ''
|
|
|
+ //获取左侧菜单列表
|
|
|
+ getRy().then(res => {
|
|
|
+ that.visuForestCloudRYBO = res.data.visuForestCloudRYBO
|
|
|
+ that.zrs = res.data.visuForestCloudRyZxBO.zrs
|
|
|
+ that.zxrs = res.data.visuForestCloudRyZxBO.zxrs
|
|
|
+ this.personnelChart()
|
|
|
+ })
|
|
|
+ },
|
|
|
+ //获取左侧人员列表
|
|
|
+ getTrafficLeader(linJob, linType) {
|
|
|
+ this.listCurrentIndex1 = ''
|
|
|
+ this.listCurrentIndex2 = ''
|
|
|
+ this.iconCurrentIndex1 = linJob
|
|
|
+ this.peopleList = []
|
|
|
+ getTrafficLeader(linJob, linType).then(res => {
|
|
|
+ this.peopleList = res.data
|
|
|
+ })
|
|
|
+ this.connectList = []
|
|
|
+ this.$refs.supermap.clearC()
|
|
|
+ },
|
|
|
+ //点击左侧人员列表获取 巡查计划
|
|
|
+ getPlanList(personId) {
|
|
|
+ this.showNothing = false;
|
|
|
+ this.recordList = [];
|
|
|
+ getPlanList(personId).then(res => {
|
|
|
+ this.xunLinListOne = res.data;
|
|
|
+ })
|
|
|
+ this.$refs.supermap.clearC()
|
|
|
+ },
|
|
|
+ //点击右侧巡查计划获取 巡查记录
|
|
|
+ getRecordList(id) {
|
|
|
+ this.showNothing = false;
|
|
|
+ this.recordList = [];
|
|
|
+ getRecordList(id).then(res => {
|
|
|
+ this.recordList = res.data;
|
|
|
+ })
|
|
|
+ this.$refs.supermap.clearC()
|
|
|
+ },
|
|
|
+ //点击右侧巡查记录获取 巡查轨迹
|
|
|
+ getPointList(id) {
|
|
|
+ getPointList(id).then(res => {
|
|
|
+ // console.log("落点",res.data);
|
|
|
+ this.setPointList(res);
|
|
|
+ })
|
|
|
+ },
|
|
|
+ //点击巡查轨迹时段 巡查轨迹落点
|
|
|
+ setPointList(res) {
|
|
|
+ let that = this;
|
|
|
+ this.connectList = [];
|
|
|
+ console.log("落点", res.data)
|
|
|
+ if (res.data != null && res.data.length > 0) {
|
|
|
+ for (let i = 0; i < res.data.length; i++) {
|
|
|
+ let latlng = {
|
|
|
+ lat: res.data[i].latitude,
|
|
|
+ lng: res.data[i].longitude
|
|
|
+ }
|
|
|
+ this.connectList.push(latlng)
|
|
|
+ }
|
|
|
+ setTimeout(() => {
|
|
|
+ that.$refs.supermap.clearC()
|
|
|
+ that.$refs.supermap.setConnectList(this.connectList, 'red')
|
|
|
+ }, 1000)
|
|
|
+ } else {
|
|
|
+ that.$refs.supermap.clearC()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ setConnectList(points, planName) {
|
|
|
+ this.listCurrentIndex2 = planName
|
|
|
+ this.connectList = []
|
|
|
+ if (points != null && points != '') {
|
|
|
+ this.connectList = JSON.parse(points)
|
|
|
+ this.$refs.supermap.setConnectTwoList(this.connectList, 'red')
|
|
|
+ }
|
|
|
+ },
|
|
|
|
|
|
- //吉祥物收起左右框
|
|
|
- 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 = this.zrs
|
|
|
- let point = this.zxrs
|
|
|
- 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'
|
|
|
+ //吉祥物收起左右框
|
|
|
+ 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 = this.zrs
|
|
|
+ let point = this.zxrs
|
|
|
+ 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'
|
|
|
- }
|
|
|
- }]
|
|
|
- }]
|
|
|
- })
|
|
|
- }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ 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'
|
|
|
+ }
|
|
|
+ }]
|
|
|
+ }]
|
|
|
+ })
|
|
|
+ }
|
|
|
|
|
|
|
|
|
- },
|
|
|
- //过滤器
|
|
|
+ },
|
|
|
+ //过滤器
|
|
|
|
|
|
- filters: {
|
|
|
+ filters: {
|
|
|
|
|
|
- //标题截取前20
|
|
|
- ellipsis20(value) {
|
|
|
- if (!value) return '';
|
|
|
- if (value.length > 20) {
|
|
|
- return value.slice(0, 20) + '...'
|
|
|
- }
|
|
|
- return value
|
|
|
- }
|
|
|
- },
|
|
|
+ //标题截取前20
|
|
|
+ ellipsis20(value) {
|
|
|
+ if (!value) return '';
|
|
|
+ if (value.length > 20) {
|
|
|
+ return value.slice(0, 20) + '...'
|
|
|
+ }
|
|
|
+ return value
|
|
|
+ }
|
|
|
+ },
|
|
|
|
|
|
- }
|
|
|
+ }
|
|
|
</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>
|
