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: 0.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.dict_sort }"
                  v-for="(item, index) in visuForestCloudRYBO"
                  @click="getRyListByJob(item.dict_sort, item.dictType)"
                >
                  <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: 0.4rem"
            />
            <div class="sj-search">
              <el-input
                v-model="name"
                placeholder="请输入姓名"
                clearable
                size="small"
                prefix-icon="el-icon-search"
              />
            </div>
            <div class="i-list-con" style="height: 40vh">
              <div class="d-l-con-icon">
                <div
                  class="icon-con"
                  :class="{ on: listCurrentIndex1 == item.userId }"
                  v-for="(item, index) in peopleList2"
                  @click="getPlanList(item.userId)"
                >
                  <div class="icon icon-mid el-icon-user"></div>
                  <div class="icon-text personnel-name">
                    <h6>
                      {{ item.name }}
                      <span v-if="item.phone != undefined">
                        - {{ item.phone }}</span
                      >
                    </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>-->
      <supermap ref="supermap" style="width: 100%; height: 100vh"></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: 0.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="getRecordList(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="getPointList(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,
  getRecordList,
  getPointList,
  getRy,
} from "@/api/leader";

import supermap from "@/components/supermap-2.5d"; //超图
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 { getRyList, getRyListByJob } from "@/api/forest";
import {getUserProfile} from "@/api/system/user"; //电视墙弹窗

let echarts = require("echarts");
export default {
  components: {
    supermap,
    vheader,
    vBottomMenu,
    eventLocation,
    TVWall,
  },
  data() {
    return {
      iconCurrentIndex1: "",
      listCurrentIndex1: "",
      listCurrentIndex2: "",
      //左右缩进
      indentStyle: "",
      indentleft: "",
      indentright: "",
      indentText: "收起左右栏",
      indentdisabled: false,
      visuForestCloudRYBO: [], //人员类型列表
      peopleList: [], //人员列表
      name: "",
      peopleList2: [], //人员列表
      connectList: [], //画线
      xunLinListOne: [], //巡林任务
      recordList: [], //巡查记录
      showNothing: false, //暂无信息
      zrs: 0, //总人数
      zxrs: 0, //在线人数
    };
  },
  created() {
    this.getRyList();
    // this.getInit()
    /** ----------------------------------底部按钮公用组件开始------------------------------------- */
    window.showDialog = this.showDialog;
    window.choseLayerSwitching = this.choseLayerSwitching;
    window.choseLayerSwitchingList = this.choseLayerSwitchingList;
    window.choseLayerSwitchingList_Data = this.choseLayerSwitchingList_Data;
    /** ----------------------------------底部按钮公用组件结束------------------------------------- */
  },
  mounted() {
    // 初始化地图数据
    this.getSuperMapUrl();

    this.bottomMenuList(); //获取底部公共组件消息和任务
  },
  watch: {
    name(val) {
      this.peopleList2 = [];
      for (let i in this.peopleList) {
        if (this.peopleList[i].name.indexOf(val) != -1) {
          this.peopleList2.push(this.peopleList[i]);
        }
      }
    },
  },
  methods: {
    //初始化地图数据
    getSuperMapUrl(){
      getUserProfile().then(response => {
        let mapDeptId=response.mapDeptId
        let num = 0;
        if (mapDeptId == "365") {
          num = 0;
        } else if (mapDeptId == "369") {
          num = 1;
        } else if (mapDeptId == "371") {
          num = 2;
        } else if (mapDeptId == "373") {
          num = 3;
        } else if (mapDeptId == "372") {
          num = 4;
        } else if (mapDeptId == "370") {
          num = 5;
        }
        this.$refs.supermap.removeAllviewer(num, -1);
      });
    },
    /** ----------------------------------底部按钮公用组件开始------------------------------------- */
    bottomMenuList() {
      this.$refs.bottomMenu.selectTaskList(); //获取任务列表
      this.$refs.bottomMenu.selectMessageList(); //获取消息列表
    },
    showDialog(click) {
      if (click == "eventLocation") {
        this.$refs.eventLocation.showEventLocation();
        this.$refs.bottomMenu.showMeasure = 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.bottomMenu.showMeasure) {
          this.$refs.bottomMenu.showMeasure = true;
        } else {
          this.$refs.bottomMenu.showMeasure = false;
        }
      } else if (click == "layerSwitching") {
        this.$refs.bottomMenu.showMeasure = 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.bottomMenu.showMeasure = false;
        this.$refs.bottomMenu.showChild = false;
        this.$refs.bottomMenu.showBanChild = false;
        this.$refs.bottomMenu.showChangChild = false;
      } else if (click == "forestban") {
        this.$refs.bottomMenu.showMeasure = 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.bottomMenu.showMeasure = 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);
    },
    /** ----------------------------------底部按钮公用组件结束------------------------------------- */
    // 获取人员信息（河长、路长、田长）
    getRyList() {
      let that = this;
      that.iconCurrentIndex1 = "";
      that.listCurrentIndex1 = "";
      that.listCurrentIndex2 = "";
      getRyList({
        leadType: "6",
      }).then(function (response) {
        // console.log(JSON.stringify(response.data));
        that.visuForestCloudRYBO = response.data.ryList;
        that.zrs = response.data.num;
        that.personnelChart();
      });
    },
    getRyListByJob(jobValue, jobType) {
      let that = this;
      that.listCurrentIndex1 = "";
      that.listCurrentIndex2 = "";
      that.iconCurrentIndex1 = jobValue;
      that.name = "";
      that.peopleList = [];
      that.peopleList2 = [];
      getRyListByJob({
        leadType: "6",
        dictType: jobType,
      }).then(function (response) {
        // console.log(JSON.stringify(response.data));
        that.peopleList = response.data;
        that.peopleList2 = response.data;
      });
    },
    //初始化 废弃
    // 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 = [];
      this.peopleList2 = [];
      getForestLeader(linJob, linType).then((res) => {
        this.peopleList = res.data;
        this.peopleList2 = res.data;
      });
      this.connectList = [];
      this.personId = null;
      this.xunLinListOne = [];
      this.patrolTrajectory = null;
      this.$refs.supermap.clearC();
      this.$refs.supermap.clearTwoC();
    },
    //点击左侧人员列表获取 巡林计划
    getPlanList(personId) {
      this.listCurrentIndex1 = personId;
      if (this.personId == personId) {
        //当前人员已经被点击一次 不再重复加载
        return;
      }
      this.personId = personId;
      this.showNothing = false;
      this.recordList = [];
      getPlanList(personId).then((res) => {
        this.xunLinListOne = res.data;
      });
      this.patrolTrajectory = null;
      this.$refs.supermap.clearC();
      this.$refs.supermap.clearTwoC();
    },
    //点击右侧巡林计划获取 巡查记录
    getRecordList(id, patrolTrajectory) {
      this.showNothing = false;
      this.recordList = [];
      getRecordList(id, this.personId).then((res) => {
        this.recordList = res.data;
      });
      this.$refs.supermap.clearC();
      this.$refs.supermap.clearTwoC();
      this.setTaskPointList(patrolTrajectory);
    },
    //点击右侧巡查记录获取 巡查轨迹
    getPointList(id) {
      getPointList(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) {
      let list = JSON.parse(patrolTrajectory);
      let data = [];
      for (var i = 0; i < list.length; i++) {
        data.push(list[i].lng);
        data.push(list[i].lat);
      }
      setTimeout(() => {
        this.$refs.supermap.clearC();
        this.$refs.supermap.clearTwoC();
        this.$refs.supermap.setConnectList(data, "#04f", 0.8);
      }, 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++) {
          that.connectList.push(res.data[i].longitude);
          that.connectList.push(res.data[i].latitude);
        }
        setTimeout(() => {
          that.$refs.supermap.clearTwoC();
          that.$refs.supermap.setConnectTwoList(this.connectList, "#f40", 0.8);
        }, 1000);
      } else {
        that.$refs.supermap.clearTwoC();
      }
    },
    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: handred+"人",
                  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>