JiangningUrbanManagePc/src/views/bigScreen/components/mapLeftContent.vue

<!--
 * @Descripttion: 
 * @version: 
 * @Author: JC9527
 * @Date: 2023-08-15 09:44:13
 * @LastEditors: JC9527
 * @LastEditTime: 2024-03-22 10:00:19
-->
<template>
  <div class="left-wai-box">
    <div class="left-box" v-show="!isUnfold">
      <div class="item left-list-title" :style="itemTwo">
        <title-box title="今日事件情况"></title-box>
        <div class="item-main">
          <div class="lists">
            <div class="bgc"></div>
            <div class="list-text"> · 上报事件总数</div>
            <div class="list-bottom">
              <img src="@/assets/images/incident.png" alt="">
              <div class="list-num">{{ MYsummarystatdata.total || "0" }}</div>
            </div>
          </div>
          <div class="lists">
            <div class="bgc"></div>
            <div class="list-text"> · 已受理事件</div>
            <div class="list-bottom">
              <img src="@/assets/images/incident.png" alt="">
              <div class="list-num">{{ Fnsummarystat(MYsummarystatdata.records ? MYsummarystatdata.records.filter(item =>
                item.status == 1) : []) }}</div>
            </div>
          </div>
          <div class="lists">
            <div class="bgc"></div>
            <div class="list-text"> · 未受理事件</div>
            <div class="list-bottom">
              <img src="@/assets/images/incident.png" alt="">
              <div class="list-num">{{ Fnsummarystat(MYsummarystatdata.records ? MYsummarystatdata.records.filter(item =>
                item.status == 0) : []) }}</div>
            </div>
          </div>
        </div>
      </div>
      <div class="item left-list-title" :style="itemTwo">
        <title-box title="今日任务情况"></title-box>
        <div class="item-main">
          <div class="lists">
            <div class="bgc"></div>
            <div class="list-text"> · 派发任务总数</div>
            <div class="list-bottom">
              <img src="@/assets/images/task.png" alt="">
              <div class="list-num">{{ tasksummarystatdata.total || '0' }}</div>
            </div>
          </div>
          <div class="lists">
            <div class="bgc"></div>
            <div class="list-text"> · 已处理任务数量</div>
            <div class="list-bottom">
              <img src="@/assets/images/task.png" alt="">
              <div class="list-num">{{ tasksummarystatdata.solved || '0' }}</div>
            </div>
          </div>
          <div class="lists">
            <div class="bgc"></div>
            <div class="list-text"> · 未处理任务数量</div>
            <div class="list-bottom">
              <img src="@/assets/images/task.png" alt="">
              <div class="list-num">{{ tasksummarystatdata.inProgress || "0" }}</div>
            </div>
          </div>
        </div>
      </div>
      <div class="item lfet-list-one" id="parent-getHeight" :style="itemOne">
        <title-box title="人员在线情况" :id="1"></title-box>
        <map-number title="在线人员总数" :onLine="personOnLine" :sum="perpsonNum" type="人" @unfold="unfold" :numberArray="peopleArray"
          :height="oneHeight" :id="1" v-on="$listeners"></map-number>
        <div style="display:flex;justify-content:flex-end;">
          <div class="pagesBtnChange">
            <div @click="changePage(1)"><i class="el-icon-arrow-left"></i></div>
            <div @click="changePage(2)"><i class="el-icon-arrow-right"></i></div>
          </div>
        </div>
      </div>
      <div class="item lfet-list-two" :style="itemOne">
        <title-box title="车辆在线情况"></title-box>
        <map-number title="在线车辆总数" :onLine="10" :sum="18" type="辆" :numberArray="vehicleArray" :height="oneHeight"
          :id="3" v-on="$listeners"></map-number>
      </div>
    </div>
    <div class="unfold-click" v-show="isUnfold" v-loading="mapLoading" element-loading-background="rgba(11, 34, 72, 0.8)">
      <div class="unfold-header">
        <div class="header-title">
          <div class="t-left">
            <img src="@/assets/images/soundWave.png" alt="">
            <span>组织人员</span>
          </div>
          <img class="t-right" @click="offUnfold" src="@/assets/images/dialogbg/close.png" alt="">
        </div>
        <!-- <el-autocomplete
          prefix-icon="el-icon-search"
          class="inline-input"
          v-model="unfoldInput"
          :fetch-suggestions="querySearch"
          placeholder="请输入关键字进行搜索"
          :trigger-on-focus="false"
          @select="handleSelect"
        ></el-autocomplete> -->
        <el-input 
          placeholder="请输入关键字进行搜索" 
          prefix-icon="el-icon-search" 
          v-model="unfoldInput"
          @input="inputChange"
        ></el-input>
      </div>
      <div class="unfold-middle" v-show="isBreadcrumb">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item v-for="item in breadcrumb" :key="item.id">
            <div class="zhuzijiagou-list" @click="breadcrumbClick(item)">
              <img :src="item.id == breadcrumb.length ? require('@/assets/images/organizationChart.png') : require('@/assets/images/organizationChartTwo.png')" alt="">
              <span :class="item.name.length > 5 ? 'spanText':''">{{ item.name }}</span>
            </div>
          </el-breadcrumb-item>
          <!-- <el-breadcrumb-item>
            <div class="zhuzijiagou-list">
              <img src="@/assets/images/organizationChart.png" alt="">
              <span>江宁开发区</span>
            </div>
          </el-breadcrumb-item> -->
        </el-breadcrumb>
      </div>
      <div class="unfold-foot" v-show="isPerson">
        <ul>
          <li @click="personInfo(item)" v-for="(item,index) in deptArr" :key="item.deptId">
            <img src="@/assets/images/organizationChart.png" alt="">
            <div>
              {{ item.deptName }}  <span v-if="item.zdsb">（<span>{{ item.online }}</span>/{{ item.allNumber }}）</span>
            </div>
            <i class="el-icon-arrow-right"></i>
          </li>
        </ul>
      </div>
      <div class="unfold-foot-two" v-show="!isPerson" v-loading="personLoading" element-loading-background="rgba(11, 34, 72, 0.8)">
        <div class="main-lists" v-for="(item,index) in personList" :key="item.imei" :class="(index+1) % 2 == 0? 'main-lists2':''">
          <div class="list-title">
            {{ item.userName }}
          </div>
          <div class="list-right">
            <div class="real-time-location" @click="realTimeLocation(item)">
              <img src="@/assets/images/location1.png" alt="">
              <span>实时定位</span>
            </div>
            <div class="route-track" @click="historicalRoute(item)">
              <img src="@/assets/images/track.png" alt="">
              <span>行程轨迹</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <personage-track ref="personageTrack"></personage-track>
  </div>
</template>
<script>
import titleBox from '../../components/title/index.vue'
import mapNumber from '../../components/mapLeftNumber/index.vue'
import { getTrend, summarystat, tasksummarystat } from '@/api/bigScreenApi/eventApi.js'
import { getQueryViewListPage, onlinePeople, onlineNumSize, getUserCount, getImeiUserOnline } from "@/api/bigScreenApi/index.js"
import personageTrack from "../../components/personagetrack/index.vue";
export default {
  name: 'mapLeftContent',
  components: { titleBox, mapNumber, personageTrack },
  data() {
    return {
      perpsonNum: 0,
      personOnLine: 0,
      peopleArray: [],
      peopleNewArray:[],
      vehicleArray: [],
      itemOne: {
        height: '',
      },
      itemTwo: {
        height: '',
      },
      oneHeight: 0,
      screenHeight: '',
      $listeners: false,
      eventList: {
        viewCode: "event-all-list",
        pageNo: "1",
        pageSize: "10"
      },
      page: 1,
      MYsummarystatdata: {
        records: []
      },//事件统计概况数据 
      tasksummarystatdata: {}, // 任务概况分类统计
      isUnfold:false,
      unfoldInput:"",
      isPerson:true,
      breadcrumb:[],
      deptArr: null,
      allDeptArr:null,
      myId: 1,
      personList:[],
      mapLoading:false,
      personLoading:false,
      isBreadcrumb:true,
    }
  },
  props: ['personLine', 'carLine'],
  watch: {
    // personLine: {
    //   handler(newPerson) {
    //     // console.log(newPerson,'在线人员情况');
    //     this.peopleArray = newPerson
    //     if (newPerson) {
    //       this.perpsonNum = newPerson.length;
    //       let line = 0;
    //       newPerson.forEach(element => {
    //         if (element.status == "1") {
    //           line += 1
    //         }
    //       });
    //       this.personOnLine = line
    //     }
    //   },
    //   immediate: true,
    // },
    carLine: {
      handler(newPerson) {
        // console.log(newPerson,'在线人员情况');
        this.vehicleArray = newPerson
      },
      immediate: true,
    }
  },
  methods: {
    getDomHeight() {
      this.$nextTick(() => {
        let dom = document.getElementsByClassName('lfet-list-one');
        let dom2 = document.getElementsByClassName('left-list-title');
        let height2 = dom2[0].getBoundingClientRect();
        let height = dom[0].getBoundingClientRect();
        let windowHeight = window.innerHeight;
        // let relativeHeight = (windowHeight - height.top) / 2 - 14;
        let relativeHeight = (windowHeight - height.top) / 2;
        let sum = relativeHeight * 2 - 2;
        // let relativeHeight2 = (windowHeight - height2.top - sum) / 2 - 55;
        let relativeHeight2 = (windowHeight - height2.top - sum) / 2 - 110;
        this.itemOne.height = relativeHeight + 'px';
        this.itemTwo.height = relativeHeight2 + 'px';
        this.oneHeight = Number(relativeHeight);
      })
    },
    getEvent() {
      onlinePeople({pageNum:1,pageSize:10}).then(res=>{
        // console.log(res,"res");
        this.perpsonNum = res.data.length;
        this.peopleNewArray = [...res.data];
        this.peopleArray = res.data.slice(0,10);
      })
    },

    getOnline(){
      onlineNumSize().then(res=>{
        this.personOnLine = res.data;
      })
    },

    changePage(id){
      if(id == 1) {
        if(this.page == 1) {
          this.$modal.msgError("已到第一页");
          return;
        }
        this.getOnline();
        this.peopleArray = this.peopleNewArray.slice((this.page-2)*10,(this.page-1)*10);
        this.page--;
        // onlinePeople({pageNum:--this.page,pageSize:10}).then(res=>{
        //   // this.personOnLine = res.rows;
        //   this.peopleArray = res.rows;
        // })
      } else if(id == 2) {
        if(this.page == parseInt(this.perpsonNum / 10) + 1){
          this.$modal.msgError("已到最后一页");
          return;
        }
        this.getOnline();
        this.peopleArray = this.peopleNewArray.slice(this.page*10,(this.page+1)*10);
        this.page++;
        // onlinePeople({pageNum:++this.page,pageSize:10}).then(res=>{
        //   // this.personOnLine = res.rows;
        //   this.peopleArray = res.rows;
        // })
      }
    },

    MYsummarystat() {
      //获取事件统计概况
      summarystat().then(res => {
        if (res.code == 200) this.MYsummarystatdata = res.data
      })
      // 任务概况分类统计
      tasksummarystat().then(res => {
        if (res.code == 200) this.tasksummarystatdata = res.data
      })
    },
    // 获取事件统计概况事件处理
    Fnsummarystat(data) {
      let mydata = data.length != 0 ? data[0].count : '0'
      return mydata
    },
    // 接收到展开按钮的信号
    unfold(){
      this.isUnfold = true;
      this.mapLoading = true;
      getUserCount().then(res=>{
        if(res.code == 200){
          let obj = {id:1,name:res.data[0].deptName}
          this.breadcrumb.push(obj);
          // console.log(res.data[0].children);
          this.deptArr = res.data[0].children;
          this.allDeptArr = [...res.data];
          this.mapLoading = false;
        }
      })
    },
    // 关闭展开
    offUnfold(){
      this.isUnfold = false;
      this.isPerson = true;
      this.breadcrumb = [];
    },
    // 搜索人员
    // querySearch(){},
    // handleSelect(){},
    // 点击指定中队展开的人员信息
    personInfo(item){
      if(item.children) {
        this.deptArr = item.children;
        this.isPerson = true;
      } else {
        this.isPerson = false;
        this.personList = item.zdsb;
      }
      if(item.parentId == 0) return
      let id = this.myId++;
      let obj = {id:++id,name:item.deptName}
      // console.log(obj,"obj");
      this.breadcrumb.push(obj);
    },
    // TODO:实时定位
    realTimeLocation(item){
      this.$emit("realTimeLocationClick", item,1);
    },
    // 历史轨迹
    historicalRoute(item){
      this.$refs.personageTrack.open("person", item);
    },
    // 面包屑点击
    breadcrumbClick(row){
      // if(row.id == 2 && this.breadcrumb.length > 2) {
      //   this.breadcrumb = this.breadcrumb.slice(0,row.id);
      //   this.isPerson = true;
      // }
      this.recursion(this.allDeptArr,row.name)
      this.myId = row.id;
      this.breadcrumb = this.breadcrumb.slice(0,row.id);
      this.isPerson = true;
    },
    // 递归拿到当前部门的信息
    recursion(item,name) {
      // item.map(item => {
      //   if(item.deptName == name) {
      //     this.deptArr = item.children;
      //   } else {
      //     this.recursion(item.children,name);
      //   }
      // })
      for (let i = 0; i < item.length; i++) {
        if (item[i].deptName === name) {
          this.deptArr = item[i].children;
          return;
        } else {
          let result = this.recursion(item[i].children,name);
          if (result) {
            return result;
          }
        }
      }
    },
    // 输入框的变化事件
    inputChange(value){
      if(value) {
        this.isPerson = false;
        this.personLoading = true;
        this.isBreadcrumb = false;
        const throttledSearch = this.throttle(()=>{
       getImeiUserOnline(value).then(res=>{
            this.personList = res.data;
            this.personLoading = false;
          })
        },500)
        throttledSearch(value)
      } else {
        this.isPerson = true;
        this.isBreadcrumb = true;
      }
    },
    // 节流函数
    throttle(fn, delay) {
      let timer = null;
      return () => {
        let context = this;
        let args = arguments;
        if (!timer) {
          timer = setTimeout(function() {
            fn.apply(context, args);
            timer = null;
          }, delay);
        }
      }
    }
  },
  mounted() {
    window.addEventListener("resize", () => {
      this.screenHeight = document.body.clientHeight;
      this.getDomHeight();
    });
    this.getDomHeight();
    this.getEvent();
    this.getOnline();
  },
  created() {
    this.MYsummarystat()

  }
}
</script>
<style lang="scss" scoped>
.left-wai-box {
  height: 100%;
}
.left-box {
  display: grid;
  grid-column: 1fr;
  grid-row-gap: 20px;
  height: 100%;

  .item {
    .pagesBtnChange {
      display: flex;
      align-items: center;
      z-index: 800;
      div {
        margin-top: 2px;
        font-size: 14px;
        display: flex;
        align-items: center;
        padding: 2px 10px;
        color: #52B1FF;
        border: 1px solid #52B1FF;
        cursor: pointer;
        margin-right: 5px;
        display: flex;
        align-items: center;
        font-size: 15px;
        line-height: 30px;
      }
    }
    // background: rgba(222, 225, 230, 0.6);
    .item-main {
      margin-top: 5px;
      display: flex;
      justify-content: space-between;
      padding-left: 17px;

      .lists {
        // padding: 5px;
        width: 141px;
        display: flex;
        flex-direction: column;
        // justify-content: space-between;
        position: relative;

        .bgc {
          position: absolute;
          left: 0;
          top: 0;
          right: 0;
          bottom: 0;
          width: 141px;
          background: linear-gradient(180deg, #0073FF 0%, rgba(0, 71, 129, 0) 100%);
          opacity: 0.5;
        }

        .list-text {
          font-size: 15px;
          height: 38px;
          font-family: 'Source Han Sans CN-Regular';
          font-weight: 400;
          color: #D3EEF2;
          line-height: 22px;
          background-image: url("../../../assets/images/masking.png");
          background-size: 100% 100%;
          padding: 16px 0 0 8px;
        }

        .list-bottom {
          display: flex;
          padding-left: 24px;
          margin-top: 11px;

          img {
            width: 37px;
            height: 40px;
            margin-right: 14px;
          }

          .list-num {
            font-size: 32px;
            font-family: 'D-DIN';
            font-weight: 400;
            color: #D3EEF2;
            line-height: 35px;
            letter-spacing: 1px
          }
        }
      }
    }
  }

  .lfet-list-one {
    height: 100%;
  }

  .left-list-title {
    height: 100%;
  }
}
.unfold-click {
  height: 100%;
  .unfold-header {
    padding: 10px 20px;
    .header-title {
      display: flex;
      align-items: center;
      margin-bottom: 10px;
      .t-left {
        flex: 1;
        display: flex;
        align-items: center;
        img {
          width: 25px;
          margin-right: 5px;
        }
        span {
          color: #05eef5;
        }
      }
      .t-right {
        width: 20px;
        cursor: pointer;
      }
    }
    ::v-deep .el-input {
      background-image: url("../../../assets/images/bgtongyongTwo.png");
      background-size: 100% 100%;
      .el-input__inner {
        background-color: transparent;
        // width: 222px;
        width: 100%;
        height: 38px;
        color: #fff;
        border: none;
      }
      .el-input__inner::placeholder {
        /* 在这里添加你想要修改的 placeholder 样式 */
        font-size: 14px;
        font-family: "Source Han Sans CN-Regular";
        font-weight: 400;
        color: #d3eef2;
        line-height: 20px;
      }
    }
    .el-input__suffix {
      line-height: 44px;
      color: #d3eef2;
      right: 10px;
      cursor: pointer;
      .el-icon-search:before {
        font-size: 24px;
        color: #d3eef2;
      }
    }
  }
  .unfold-middle {
    padding: 10px 20px;
    background: #2a67a4;
    ::v-deep .el-breadcrumb__item {
      display: flex;
      align-items: center;
      .el-breadcrumb__inner {
        display: inline-block;
        .zhuzijiagou-list {
          display: flex;
          align-items: center;
          cursor: pointer;
          img {
            width: 15px;
            margin-right: 5px;
          }
          span {
            color: #b8cce1;
          }
          .spanText {
            white-space:nowrap;/*强制单行显示*/
            text-overflow:ellipsis;/*超出部分省略号表示*/
            overflow:hidden;/*超出部分隐藏*/
            width: 80px;/*设置显示的最大宽度*/
          }
        }
      }
    }
  }
  .unfold-foot {
    padding: 10px 20px;
    ul {
      padding-left: 0;
      li {
        list-style: none;
        display: flex;
        align-items: center;
        margin: 10px 0;
        cursor: pointer;
        img {
          width: 15px;
          margin-right: 10px;
        }
        div {
          flex: 1;
          color: #ebeff5;
          span {
            color: #02f7fb;
          }
        }
        i {
          color: #ebeff5;
        }
      }
    }
  }
  .unfold-foot-two {
    padding: 10px 0;
    height: 100%;
    overflow-y: auto;
    .main-lists {
      display: flex;
      justify-content: space-between;
      background: rgba(216,216,216,0.05);
      height: 33px;
      align-items: center;
      padding: 0 20px;
      .list-title {
        flex: 1;
        font-size: 14px;
        font-family: 'Source Han Sans CN-Regular';
        font-weight: 400;
        color: #D3EEF2;
        line-height: 20px;
        // padding-left: 24px;
      }
      .list-right {
        // flex: 1;
        display: flex;
        align-items: center;
        font-size: 14px;
        font-family: 'Source Han Sans CN-Regular';
        font-weight: 400;
        color: #52B1FF;
        .real-time-location {
          margin-right: 22px;
        }
        .real-time-location,.route-track {
          display: flex;
          align-items: center;
          cursor: pointer;
          img {
            width: 18px;
            margin-right: 5px;
          }
        }
      }
    }
    .main-lists2 {
      background: rgba(187,220,255,0.2);
    }
  }
}
</style>