Project_yhfu/src/views/leader.vue

<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="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">
                <el-collapse accordion>
                  <el-collapse-item v-for="(item,index) in xunLinListOne">
                    <template slot="title">
                      <div class="d-l-con sj-collapse"
                           @click="getWaterRecord(item.id, item.patrolTrajectory)">
                        <div class="d-l-l-text">
                          <el-tooltip class="item" effect="dark" placement="left"
                                      style="width:10rem ;" :disabled="(item.taskName.length <= 20)">
                            <div slot="content">
                              <h4 class="collapse-title" style="width: 200px;">
                                {{ item.taskName}}</h4>
                            </div>
                            <h4 class="collapse-title" style="width: 100px;">
                              {{ item.taskName | ellipsis20}}</h4>
                          </el-tooltip>
                        </div>
                        <div class="d-l-l-count">({{ item.recordCount }}/{{ item.planCount }})
                        </div>
                      </div>
                    </template>
                    <div class="d-l-con this-child sj-collapse" @click="getWaterPoint(child.id)"
                         v-for="(child,index) in recordList">
                      <div class="d-l-l-text">
                        <h4>{{child.beginTime}} - {{child.endTime}}</h4>
                      </div>
                      <!--<div class="d-l-l-count">{{index}}</div>-->
                    </div>
                    <div class="d-l-con this-child sj-collapse"
                         v-if="showNothing && (recordList == null || recordList == '' || recordList == [])">
                      <div class="d-l-l-text">
                        <h4 class="text-gray">暂无信息</h4>
                      </div>
                    </div>
                  </el-collapse-item>
                </el-collapse>
								<!--<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">
                    <i class="i-small"></i>
                    <h4>{{ item.planName }}</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,
		getPlanList,
		getWaterRecord,
		getWaterPoint,
		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: [], //人员类型列表
        personId: null, //人员
				peopleList: [], //人员列表
				connectList: [], //画线
        patrolTrajectory: null, //任务画线
				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: {
			/** ----------------------------------底部按钮公用组件开始------------------------------------- */
      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
					}
				}

			},
			//选择图层
			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.personId = null;
				this.xunLinListOne = [];
				this.patrolTrajectory = null;
				this.$refs.supermap.clearC()
			},
			//点击左侧人员列表获取 巡林计划
			getPlanList(personId) {
			  if(this.personId == personId){//当前人员已经被点击一次 不再重复加载
			    return;
        }
        this.personId = personId;
				this.showNothing = false;
				this.recordList = [];
				getPlanList(personId).then(res => {
          console.log("点击左侧人员列表获取 巡林计划=", res.data)
					this.xunLinListOne = res.data;
				})
        this.patrolTrajectory = null;
				this.$refs.supermap.clearC();
			},
			//点击右侧巡林计划获取 巡查记录
			getWaterRecord(id, patrolTrajectory) {
				this.showNothing = false;
				this.recordList = [];
				getWaterRecord(id).then(res => {
				  console.log("点击右侧巡林计划获取 巡查记录res.data=", res.data)
					this.recordList = res.data;
				})
				this.$refs.supermap.clearC();
        this.setTaskPointList(patrolTrajectory);
			},
			//点击右侧巡查记录获取 巡查轨迹
			getWaterPoint(id) {
				getWaterPoint(id).then(res => {
					// console.log("落点",res.data);
					this.setPointList(res);
				})
			},
			//点击巡查人员 巡查任务落点
			setTaskPointList(patrolTrajectory) {
				console.log("巡查任务落点", typeof JSON.parse(patrolTrajectory));
        if(this.patrolTrajectory == patrolTrajectory){
          this.patrolTrajectory = null;
        }else {
          this.patrolTrajectory = patrolTrajectory;
          this.drawTaskPoint(this.patrolTrajectory);
        }
			},
      // 巡查任务落点
			drawTaskPoint(patrolTrajectory) {
        setTimeout(() => {
          this.$refs.supermap.clearC();
          this.$refs.supermap.setConnectList(JSON.parse(patrolTrajectory), '#04f');
        }, 1000)
			},
      //点击巡查轨迹时段 巡查轨迹落点
			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, '#f40')
					}, 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'
							}
						}]
					}]
				})
			}


		},
		//过滤器

		filters: {

			//标题截取前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';

	.h-27 {
		height: 27rem;
	}
</style>