|
@@ -0,0 +1,258 @@
|
|
|
|
+<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-27">
|
|
|
|
+ <div class="d-l-con-icon">
|
|
|
|
+ <div class="icon-con" :class="{on:listCurrentIndex1==item.userId}"
|
|
|
|
+ v-for="(item,index) in visuTianzhangList" @click="getLeaderTrack(item.id)">
|
|
|
|
+ <div class="icon icon-mid el-icon-user"></div>
|
|
|
|
+ <div class="icon-text personnel-name">
|
|
|
|
+ <h6>姓名:{{ item.tianName }}</h6>
|
|
|
|
+ <h6>电话:{{ item.tianPhone }}</h6>
|
|
|
|
+ </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 visuTianzhangList" @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 visuTianzhangList"
|
|
|
|
+ @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 visuTianzhangList"
|
|
|
|
+ @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 {
|
|
|
|
+ getTianzhangList,
|
|
|
|
+} from '@/api/tianzhangzhi'
|
|
|
|
+
|
|
|
|
+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,
|
|
|
|
+ visuTianzhangList: [], //人员类型列表
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ 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 = ''
|
|
|
|
+ //获取田长列表
|
|
|
|
+ getTianzhangList().then(res => {
|
|
|
|
+ that.visuTianzhangList = res.data
|
|
|
|
+ })
|
|
|
|
+ },
|
|
|
|
+
|
|
|
|
+ //吉祥物收起左右框
|
|
|
|
+ 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';
|
|
|
|
+
|
|
|
|
+.h-27 {
|
|
|
|
+ height: 27rem;
|
|
|
|
+}
|
|
|
|
+</style>
|