|
|
@@ -0,0 +1,453 @@
|
|
|
+<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 class="d-l-con-icon">
|
|
|
+ <div class="icon-con" :class="{on:listCurrentIndex1==item.userId}"
|
|
|
+ v-for="(item,index) in peopleList" @click="getLeaderTrack(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 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-27">
|
|
|
+ <div class="d-l-con-icon">
|
|
|
+ <div class="icon-con" :class="{on:listCurrentIndex1==item.userId}"
|
|
|
+ v-for="(item,index) in peopleList" @click="getLeaderTrack(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-27">
|
|
|
+ <div class="h-19 overflow-y">
|
|
|
+ <div class="d-l-con" :class="{on:listCurrentIndex2==item.planName}"
|
|
|
+ v-for="(item,index) in xunLinListOne"
|
|
|
+ @click="getPointList(item.id)">
|
|
|
+ <div class="d-l-l-text">
|
|
|
+ <i class="i-small"></i>
|
|
|
+ <h4>{{ item.timeBegin }} - {{ item.timeEnd }}</h4>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </dv-border-box-13>
|
|
|
+ </div>
|
|
|
+ <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-27">
|
|
|
+ <div class="h-19 overflow-y">
|
|
|
+ <div class="d-l-con" :class="{on:listCurrentIndex2==item.planName}"
|
|
|
+ v-for="(item,index) in xunLinListOne"
|
|
|
+ @click="getPointList(item.id)">
|
|
|
+ <div class="d-l-l-text">
|
|
|
+ <i class="i-small"></i>
|
|
|
+ <h4>{{ item.timeBegin }} - {{ item.timeEnd }}</h4>
|
|
|
+ </div>
|
|
|
+ </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>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import {
|
|
|
+ getForestLeader,
|
|
|
+ getLeaderTrack,
|
|
|
+ getTrackList,
|
|
|
+ getPointList,
|
|
|
+ getPlanList,
|
|
|
+ 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' //电视墙弹窗
|
|
|
+
|
|
|
+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: [], //巡林计划
|
|
|
+ zrs: 0, //总人数
|
|
|
+ zxrs: 0 //在线人数
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.getInit()
|
|
|
+ /** ----------------------------------底部按钮公用组件开始------------------------------------- */
|
|
|
+ window.showDialog = this.showDialog
|
|
|
+ window.choseLayerSwitching = this.choseLayerSwitching
|
|
|
+ window.choseLayerSwitchingList = this.choseLayerSwitchingList
|
|
|
+ /** ----------------------------------底部按钮公用组件结束------------------------------------- */
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ /** ----------------------------------底部按钮公用组件开始------------------------------------- */
|
|
|
+ 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)
|
|
|
+ },
|
|
|
+ /** ----------------------------------底部按钮公用组件结束------------------------------------- */
|
|
|
+
|
|
|
+ //初始化
|
|
|
+ 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()
|
|
|
+ })
|
|
|
+ //获取巡林计划
|
|
|
+ // getPlanList().then(res => {
|
|
|
+ // this.xunLinListOne = res.data
|
|
|
+ // })
|
|
|
+ // // 获取轨迹列表
|
|
|
+ // getTrackList().then(res => {
|
|
|
+ // this.xunLinListOne = res.data
|
|
|
+ // })
|
|
|
+ // 获取人员列表
|
|
|
+ // getForestLeader(linJob, linType).then(res => {
|
|
|
+ getForestLeader().then(res => {
|
|
|
+ this.peopleList = res.data;
|
|
|
+ console.log("人员",res.data)
|
|
|
+ })
|
|
|
+ this.connectList = []
|
|
|
+ // this.$refs.supermap.clearC() //clearC undefined
|
|
|
+ },
|
|
|
+ //获取左侧人员列表
|
|
|
+ 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()
|
|
|
+ },
|
|
|
+ //点击左侧人员列表获取轨迹
|
|
|
+ getLeaderTrack(personId) {
|
|
|
+ getTrackList(personId).then(res => {
|
|
|
+ console.log("轨迹",res.data);
|
|
|
+ if(res.data.length > 0){// 当前资源人员有巡查轨迹 获取最新一条轨迹
|
|
|
+ this.xunLinListOne = res.data;
|
|
|
+ this.getPointList(res.data[0].id);
|
|
|
+ }else {// 清空上一用户落点
|
|
|
+ this.xunLinListOne = [{"timeBegin": "当前资源人员", "timeEnd": "暂无巡查轨迹"}];
|
|
|
+ this.$refs.supermap.clearC()
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ getLeaderTrack_original(userId) {
|
|
|
+ this.listCurrentIndex1 = userId
|
|
|
+ let that = this
|
|
|
+ this.connectList = []
|
|
|
+ getLeaderTrack(userId).then(res => {
|
|
|
+ // this.xunLinListOne = res.data;
|
|
|
+ // 获取右侧轨迹列表
|
|
|
+ // getPlanList().then(res => {
|
|
|
+ // this.xunLinListOne = 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()
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ getPointList(trackId) {
|
|
|
+ let that = this;
|
|
|
+ this.connectList = [];
|
|
|
+ getPointList(trackId).then(res => {
|
|
|
+ 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'
|
|
|
+
|
|
|
+ }
|
|
|
+ },
|
|
|
+ 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'
|
|
|
+ }
|
|
|
+ }]
|
|
|
+ }]
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style rel="stylesheet/scss" lang="scss" scoped>
|
|
|
+@import '@/assets/styles/base.scss';
|
|
|
+
|
|
|
+.h-27 {
|
|
|
+ height: 27rem;
|
|
|
+}
|
|
|
+</style>
|
