fj-dc-ui/.svn/pristine/be/befddddeb4551bcec009d3008df7d7b69f1aec6d.svn-base

<template>
  <div id="kjrmap">
    <div class="process_line" style="padding-left:0;">
      <el-row style="margin-bottom:5px;">
        <el-col :span="24">
          <div class="grid-content bg-purple-light">
            <el-card class="kjr-card box-card" style="height:100%;">
              <el-row>
                <div style="padding:10px;">
                  <span style="font-size: 12px;">姓名：</span>
                  <el-input style="width:120px;" class="kjr-input" size="mini" v-model="model_peopleName"
                            placeholder="请输入姓名" @keydown.enter.native="searchPeople" clearable></el-input>
                  <span style="font-size: 12px;margin-left:10px;">证件号：</span>
                  <el-input style="width:120px;" class="kjr-input" size="mini" v-model="certificateCode"
                            placeholder="请输入工作证件号" @keydown.enter.native="searchPeople" clearable></el-input>
                  <span style="font-size: 12px;margin-left:10px;">名称：</span>
                  <el-input style="width:120px;" class="kjr-input" size="mini" v-model="deptName"
                            placeholder="请输入机构名称" @keydown.enter.native="searchPeople" clearable></el-input>
                  <el-button @click="searchPeople" size="mini" type="primary" style="margin-left:20px;">查询</el-button>
                  <el-checkbox v-model="model_peopleOnline" @change="bPeopleOnline" style="margin-left:20px;">是否在线</el-checkbox>
                </div>
              </el-row>
              <el-row>
                <el-col :span="7">
                  <el-tabs v-model="activeTabName" @tab-click="handleTabClick" type="border-card"
                           style="overflow:auto;">
                    <el-tab-pane v-if="bAdmin" label="机构" name="three">
                      <div class="grid-content bg-purple">
                        <el-tree :data="treeData3" node-key="orgId" :expand-on-click-node="false"
                                 :highlight-current="true" :current-node-key="curNode" :default-expanded-keys="['1']"
                                 :props="defaultProps3" @node-click="handleNodeClick3"></el-tree>
                      </div>
                    </el-tab-pane>
                    <el-tab-pane v-if="bAdmin" label="专项" name="second">
                      <div class="grid-content bg-purple">
                        <el-tree :data="treeData2" node-key="id" :expand-on-click-node="false"
                                 :highlight-current="true" :current-node-key="curNode" :default-expanded-keys="['1']"
                                 :props="defaultProps" @node-click="handleNodeClick"></el-tree>
                      </div>
                    </el-tab-pane>
                    <el-tab-pane v-if="!bAdmin" label="所在组成员" name="fourth">
                      <div class="grid-content bg-purple">
                        <el-tree :data="treeData4" node-key="id" :expand-on-click-node="false"
                                 :highlight-current="true" :current-node-key="curNode" :default-expanded-keys="['1']"
                                 :props="defaultProps" @node-click="handleNodeClick"></el-tree>
                      </div>
                    </el-tab-pane>
                  </el-tabs>
                </el-col>
                <el-col :span="17">
                  <div class="grid-content bg-purple-light">
                    <div style="padding:5px;">
                      <el-table :data="tableData_peopleList"
                                :default-sort="{prop: 'operateTime', order: 'descending'}"
                                @sort-change='people_sortEvent' height="500" border stripe style="width: 100%">
                        <el-table-column type="index" label="No." width="50" :index="indexMethod">
                        </el-table-column>
                        <el-table-column prop="operateTime" label="时间" width="100" align="center" sortable="custom" show-overflow-tooltip>
                        </el-table-column>
                        <el-table-column prop="persName" label="姓名" width="80" align="center">
                        </el-table-column>
                        <el-table-column prop="orgNm" label="单位/部门" width="100" align="center" show-overflow-tooltip>
                        </el-table-column>
                        <el-table-column prop="status" label="状态" width="60" align="center">
                          <template slot-scope="scope">
                            <span v-if="scope.row.state == '1'" style="width: 10px;height: 10px;border-radius: 5px;display: inline-block;background: #4cae4c;"></span>
                            <span v-if="scope.row.state == '0'" style="width: 10px;height: 10px;display: inline-block;border-radius: 5px;background: red;"></span>
                          </template>
                        </el-table-column>
                        <el-table-column
                          fixed="right"
                          label="操作"
                          min-width="160">
                          <template slot-scope="scope">
                            <el-button type="text" size="small" @click="peopleInfo(scope.row,'location')">定位</el-button>
                            <el-button type="text" size="small" @click="peopleInfo(scope.row,'track')">轨迹</el-button>
                            <el-button type="text" size="small" @click="peopleInfo(scope.row,'group')">工作情况</el-button>
                          </template>
                        </el-table-column>
                      </el-table>
                      <div class="block" style="margin-top:5px;">
                        <el-pagination background @size-change="handleSizeChange"
                                       @current-change="handleCurrentChange" :page-sizes="[10,50, 100, 200]"
                                       :page-size="15" layout="total,sizes, prev, pager, next" :pager-count="5"
                                       :total="recordTotal">
                        </el-pagination>
                      </div>
                    </div>
                  </div>
                </el-col>
              </el-row>
            </el-card>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>

</template>

<script>
  import request from '../../../utils/gw_ajax_request'
  import { getDcryList } from '../js/duChaRenYuan'
  import personInGroupInfo from '../components/personInGroupInfo'

    export default {
        name: "InspectionPersonnel",
        props: [],
        components:{
          personInGroupInfo
        },
        data() {
            return {
              treeData3: [],
              treeData2: [{
                id: "1",
                pnm: '全国',
                children: []
              }],
              treeData4: [{
                id: "1",
                pnm: '所有成员',
                children: []
              }],
              curNode: "1",
              defaultProps: {
                children: 'children',
                label: 'pnm'
              },
              defaultProps3: {
                label: 'orgNm',
                children: 'children',
              },
              activeTabName: 'three',
              bAdmin: false,
              model_peopleName: "",
              model_idNum:'',
              model_jgName:'',
              tableData_peopleList:[],
              model_peopleOnline: false,
              rowIndex: 0,
              pageSize: 10,
              pageIndex: 1,
              recordTotal:0,
              showPersonInGroupInfo:false,
              currentPersName:'',
              currentIsAdmin:'',
              currentPersId:'',
              certificateCode:'',
              deptName:'',
              curId: "",
              curOrgId: "1",
              curBasin: "",
              curType: "",
              menuCount:0,
              menuOnLineCount:0


        }
        },
        beforeMount() {
          this.bAdmin = localStorage.getItem("isAdmin") == 1 ? true : false;
        },
        mounted(){
            this.initTree();
        },
        watch:{
          model_peopleName: function () {
            this.rowIndex = 0;
            this.pageSize = this.pageSize;
            // this.getOnlinePeoples();
            if (!this.bAdmin) {
              this.getOnlinePeoples();
            } else if (this.activeTabName == "three") {
              this.getOnlinePeoples2();
            } else {
              this.getOnlinePeoples();
            }
          },
        },
        computed: {
          recPersId() {
            return localStorage.getItem("userid") ? localStorage.getItem("userid") : ''
          }
        },
        methods:{

          handleTabClick(tab, event) {
            if (this.activeTabName == "three") {
              this.getOnlinePeoples2();
            } else {
              this.getOnlinePeoples();
            }
          },
          refreashOnline() {
            if (this.bAdmin) {
              this.activeTabName = "three";
              this.curOrgId = "1";
              this.initTree();
            }
            this.$message({
              message: '刷新成功！',
              type: 'success'
            });
          },
          handleNodeClick(data) {
            console.log("handleNodeClick...........", data);
            if (data) {
              if (!this.bAdmin && data.id == "1") {
                this.curId = data.id__;
              } else {
                if (data.id == "1") {
                  this.curId = "";
                } else {
                  this.curId = data.id;
                }
              }
              this.getOnlinePeoples();
              this.loadPoint_people("point_people");
            }
          },
          handleNodeClick3(data) {
            console.log(data);
            if (data) {
              if (data.orgId == "1") {
                this.curOrgId = "1";
              } else {
                this.curOrgId = data.orgId;
              }
              this.curNode = data.orgId;
              this.getOnlinePeoples2();
              this.loadPoint_people("point_people");
            }
          },
          people_sortEvent(column, prop, order) {
            console.log(column, prop, order)
            if (column.column == null)
              return;
            // this.orderField = column.prop;
            if (column.order == "ascending") {
              this.sortBy = "asc";
            } else if (column.order == "descending") {
              this.sortBy = "desc";
            }
            this.orderField = column.prop.replace(/\B([A-Z])/g, '_$1').toLowerCase()
            if (!this.bAdmin) {
              this.getOnlinePeoples();
            } else if (this.activeTabName == "three") {
              this.getOnlinePeoples2();
            } else {
              this.getOnlinePeoples();
            }
          },

          handleSizeChange: function (pageSize) {
            this.rowIndex = 0;
            this.pageSize = pageSize;
            // this.getOnlinePeoples();
            if (!this.bAdmin) {
              this.getOnlinePeoples();
            } else if (this.activeTabName == "one") {
              this.getOnlinePeoples2();
            } else {
              this.getOnlinePeoples();
            }
          },
          handleCurrentChange: function (pageNum) {
            this.rowIndex = 0;
            this.pageIndex = pageNum;
            // this.getOnlinePeoples();
            if (!this.bAdmin) {
              this.getOnlinePeoples();
            } else if (this.activeTabName == "three") {
              this.getOnlinePeoples2();
            } else {
              this.getOnlinePeoples();
            }
          },

          searchPeople() {
            if (this.activeTabName == "three") {
              this.getOnlinePeoples2();
            } else {
              this.getOnlinePeoples();
            }
          },

          getOnlinePeoples(flag = true) {
            request.get(`/pers/position/findPersListByClassify`, {
              params: {
                pageNum: this.pageIndex,
                pageSize: this.pageSize,
                count: false,
                orderBy: this.orderField + " " + this.sortBy,
                id: flag ? (this.bAdmin ? this.curId : (this.curId || "-")) : "-",
                persName: this.model_peopleName,
                certificateCode: this.certificateCode,
                deptName: this.deptName,
                status: this.model_peopleOnline ? "1" : ""
              }
            })
              .then((res) => {
                if (res.success) {
                  var obj = res.data;
                  this.tableData_peopleList = obj.list;
                  this.recordTotal = obj.total;
                }
              })
              .catch(function (error) {
                console.log(error);
              });
          },
          getOnlinePeoples2() {
            request.get(`/pers/position/findPersPageByOrgId`, {
              params: {
                pageNum: this.pageIndex,
                pageSize: this.pageSize,
                orderBy: this.orderField + " " + this.sortBy,
                orgId: this.curOrgId,
                persName: this.model_peopleName,
                certificateCode: this.certificateCode,
                deptName: this.deptName,
                status: this.model_peopleOnline ? "1" : ""
              }
            })
              .then((res) => {
                if(res.success){
                  this.tableData_peopleList = res.data.list;
                  this.recordTotal = res.data.total;
                }
              })
              .catch(function (error) {
                console.log(error);
              });
          },
          initTree() {
            if (this.bAdmin) {
              this.curOrgId = "1";
              this.getOnlinePeoples2();
            } else {
              // 权限
              this.activeTabName = 'fourth';
              request.get(`/pers/position/findNodeByPersId`,{
                params: {
                  persId: localStorage.getItem("userid")
                }
              }).then((res) => {
                  if (res.success) {
                    $.each(res.data, (index, e) => {
                      e.pnm = e.pnm + `(${e.onLineCount}/${e.count})`
                    })
                    var trData = this.transData(res.data, 'id', 'pid', 'children');
                    var total = 0;
                    var onlineTotal = 0;
                    var id = "";
                    $.each(trData, (index, e) => {
                      total += e.count;
                      onlineTotal += e.onLineCount;
                      id += `${e.id},`;
                    })
                    id = id.substring(0, id.length - 1);
                    this.treeData4[0].children = trData;
                    this.treeData4[0].id__ = id;
                    this.treeData4[0].pnm = this.treeData4[0].pnm + `(${onlineTotal}/${total})`;
                    console.log("权限tree。。。。", this.treeData4)
                    console.log("权限root-id。。。。", id)
                    this.curId = id || '-';
                    this.loadPoint_people('point_people')
                    if (!this.bAdmin)
                      this.getOnlinePeoples();
                  }
                })
                .catch(function (error) {
                  console.log(error);
                });
            }
            //专项
            request.get(`/pers/position/findClassify`, {
              params: {
                type: 1
              }
            })
              .then((res) => {
                if (res.success) {
                  this.treeData2 = [{
                    id: "1",
                    pnm: '全国',
                    children: []
                  }]
                  this.treeData2[0].children = res.data;
                  var total = 0;
                  var total2 = 0;
                  $.each(this.treeData2[0].children, (index, e) => {
                    e.pnm = `${e.pnm}(${e.onLineCount}/${e.count})`;
                    total += e.count;
                    total2 += e.onLineCount;
                  })
                  this.treeData2[0].pnm = `${this.treeData2[0].pnm}(${total2}/${total})`;
                }
              })
              .catch(function (error) {
                console.log(error);
              });

            //机构
            request.get(`/pers/position/findOrgList`, {
              params: {}
            })
              .then((res) => {
                if (res.success) {
                  console.log("机构。。。。", res)
                  $.each(res.data, (index, e) => {
                    e.orgNm = e.orgNm + `(${e.onLineCount}/${e.count})`
                  });
                  var trData = this.transData(res.data, 'orgId', 'orgPid', 'children');
                  this.treeData3 = trData;
                }
              })
              .catch(function (error) {
                console.log(error);
              });

          },
          transData(objs, idStr, pidStr, chindrenStr) {
            var a = objs;
            var r = [],
              hash = {},
              id = idStr,
              pid = pidStr,
              children = chindrenStr,
              i = 0,
              j = 0,
              len = a.length;
            for (; i < len; i++) {
              hash[a[i][id]] = a[i];
            }
            for (; j < len; j++) {
              var aVal = a[j],
                hashVP = hash[aVal[pid]];
              if (hashVP) {
                !hashVP[children] && (hashVP[children] = []);
                hashVP[children].push(aVal);
              } else {
                r.push(aVal);
              }
            }
            return r;
          },


          indexMethod(index) {
            return (index + 1) + this.pageSize * (this.pageIndex - 1)
          },
          bPeopleOnline(val) {
            // this.curId = "";
            if (this.activeTabName == "three") {
              this.getOnlinePeoples2();
              this.loadPoint_people("point_people");
            } else {
              this.getOnlinePeoples();
              this.loadPoint_people("point_people");
            }
          },
          //定位
          peopleInfo(row,info){
            this.$emit('peopleInfo',row,info);
          },
          // ryGroup(row){
          //   this.currentPersId = row.guid;
          //   this.currentIsAdmin = row.permission;
          //   this.currentPersName = row.persName;
          //   this.$emit('paramsEmit',this.currentPersId,this.currentIsAdmin,this.currentPersName)
          //   this.showPersonInGroupInfo = true;
          // },
          closeInfo(name){
            switch (name) {
              case 'groupInfo':
                this.showPersonInGroupInfo = false;
                break;
            }
          },
          loadPoint_people: function () {
            var _this = this;
            var params_ = {};
            if (this.activeTabName == "three") {
              params_ = {
                orgId: this.curOrgId,
              }
            } else {
              params_ = {
                id: this.curId,
              }
            }

          },
        }
    }
</script>

<style>
  #kjrmap .el-card__body .el-tabs__nav-scroll {
    background-color: #d4e5f7;
    padding: 0 16px;
  }
  #kjrmap .el-tabs--border-card {
    height: 532px!important;
  }
  #kjrmap .el-tree-node>.el-tree-node__children {
    overflow-x: auto!important;
  }
  #kjrmap .el-card__body {
    padding: 15px !important;
  }
</style>