分析检索/人员管理接口联调

hanbaoshan

2021-01-13 e6758ef29bd686e894b4679edf1bd88436b84148

分析检索/人员管理接口联调

 src/api/shuohuang.ts

@@ -1,16 +1,83 @@
import request from "@/scripts/httpRequest";
import request from '@/scripts/httpRequest'

//初始化查询
export const getlstInit = (query:any)=>request({
    url:'/data/api-c/lkg/findlstA',
    method:'get',
export const getlstInit = (query: any) =>
  request({
    url: '/data/api-c/lkg/getlstA',
    method: 'get',
    params: query
});
export const getShuohuangDepartTree = ()=>request({
  })
export const getlst = (query: any) =>
  request({
    url: '/data/api-c/lkg/getlstB',
    method: 'get',
    params: query
  })
export const getShuohuangDepartTree = () =>
  request({
    url: '/data/api-c/dept/getlstWithUser',
    method: 'get'
});
export const getOrganizeTree = ()=>request({
    url:'/data/api-c/dept/getlstWithOutUser',
  })
export const getOrganizeTree = () =>
  request({
    url: '/data/api-c/dept/getlstWithOutUser',
    method: 'get'
});
  })

export const updateVideoAnalyze = (data: any) =>
  request({
    url: '/data/api-c/lkg/update',
    method: 'post',
    data
  })
export const getRelatedVideoInfo = (query: any) =>
  request({
    url: '/data/api-c/lkg/getRelatedVideo',
    method: 'get',
    params: query
  })
export const getLabelMap = () =>
  request({
    url: '/data/api-c/lkg/getCode',
    method: 'get'
  })
export const delLabel = (data: any) =>
  request({
    url: '/data/api-c/lkg/delLable',
    method: 'post',
    data
  })
export const editLabel = (data: any) =>
  request({
    url: '/data/api-c/lkg/addLable',
    method: 'post',
    data
  })
export const getMemberList = (query: any) =>
  request({
    url: '/data/api-c/user/getlst',
    method: 'get',
    params: query
  })
export const updateUnit = (query: any) =>
  request({
    url: '/data/api-c/user/updateUnit',
    method: 'post',
    params: query
  })
  export const addMember = (data:any) => request({
    url: '/data/api-c/user/add',
    method: 'post',
    data
  })
export const updateMemberInfo = (data: any) =>
  request({
    url: '/data/api-c/user/update',
    method: 'post',
    data
  })
export const uploadMemberPic = (data:any) => request({
  url:'/data/api-c/user/upload',
  method:'post',
  data
})

 src/pages/shuohuangMonitorAnalyze/components/memberManage.vue

@@ -1,12 +1,20 @@
<template>
  <div class="member-manage">
    <div class="left">
      <div>
        <el-input placeholder="请输入" v-model="treeWord">
      <div style="margin-bottom:10px;">
        <el-input placeholder="请输入" v-model="treeWord" size="small">
          <el-button slot="append" icon="el-icon-search"></el-button>
        </el-input>
      </div>
      <el-tree :data="treeData" node-key="id" default-expand-all></el-tree>
      <el-tree
        :data="treeData"
        node-key="id"
        default-expand-all
        @node-click="checkNode"
        :expand-on-click-node="false"
        :check-on-click-node="true"
        :highlight-current="true"
      ></el-tree>
      <div class="menuList" v-show="showMenu" :style="{top:menuTop+'px',left:menuLeft+'px'}">
        <ul>
          <li>创建同级节点</li>
@@ -32,33 +40,58 @@
      <div class="table-area">
        <div class="actions">
          <el-button type="primary" size="small" @click="addMember">添加人员</el-button>
          <el-button type="primary" size="small" @click="toggleOrganize">换组织</el-button>
          <el-button
            type="primary"
            :disabled="multipleTableSelection.length<1"
            size="small"
            @click="toggleOrganize"
          >换组织</el-button>
          <el-button type="primary" size="small" @click="batchImport">批量导入</el-button>
          <el-button type="primary" size="small" @click="uploadPic">上传照片</el-button>
          <!-- <el-button type="primary" size="small" @click="uploadPic">上传照片</el-button> -->
        </div>
        <el-table class="thbg" :data="tableData" fit ref="elTable">
        <el-table
          class="thbg"
          :data="tableData"
          fit
          ref="elTable"
          @selection-change="tableSelection"
        >
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column label="姓名" prop="name" sortable>
          <el-table-column label="姓名" prop="Name" sortable>
            <template slot-scope="scope">
              <div style="cursor:pointer;">{{scope.row.name}}</div>
              <div style="cursor:pointer;">{{scope.row.Name}}</div>
            </template>
          </el-table-column>
          <el-table-column label="照片" prop="picture">
            <template>
              <div></div>
          <el-table-column label="照片" prop="Surface">
            <template slot-scope="scope">
              <div class="table-cell-pic">
                <img :src="`${CLIP}${scope.row.Surface}`" alt />
              </div>
            </template>
          </el-table-column>
          <el-table-column label="性别" prop="gender"></el-table-column>
          <el-table-column label="所属组织" prop="organization"></el-table-column>
          <el-table-column label="工号" prop="no"></el-table-column>
          <el-table-column label="手机号" prop="phone"></el-table-column>
          <el-table-column label="用户权限" prop="userpermission"></el-table-column>
          <el-table-column label="转储权限" prop="transferpermission"></el-table-column>
          <el-table-column label="操作">
            <template>
          <el-table-column label="性别" prop="Sex"></el-table-column>
          <el-table-column label="所属组织" prop="Org"></el-table-column>
          <el-table-column label="工号" prop="WorkID"></el-table-column>
          <el-table-column label="手机号" prop="Tel"></el-table-column>
          <el-table-column label="用户权限" prop="userpermission">
            <template slot-scope="scope">
              <div>
                <i class="el-icon-edit"></i>
                <i class="el-icon-delete"></i>
                <el-switch v-model="scope.row.UserPermissions" @change="memberUpdate(scope.row)"></el-switch>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="转储权限" prop="transferpermission">
            <template slot-scope="scope">
              <div>
                <el-switch v-model="scope.row.DumpPermissions" @change="memberUpdate(scope.row)"></el-switch>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <div class="operation">
                <i class="el-icon-edit" @click="editMember(scope.row)"></i>
                <i class="el-icon-delete" @click="delMember(scope.row)"></i>
              </div>
            </template>
          </el-table-column>
@@ -79,41 +112,41 @@
              class="avatar-uploader"
              action="https://jsonplaceholder.typicode.com/posts/"
              :show-file-list="false"
              :http-request="uploadMemberPic"
              :http-request="uploadMemberPicture"
            >
              <img
                v-if="memberEditForm.memberPicUrl"
                :src="memberEditForm.memberPicUrl"
                v-if="memberEditForm.Surface"
                :src="`/httpImage/`+memberEditForm.Surface"
                class="avatar"
              />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
          <el-form-item label="工号:" prop="no">
            <el-input v-model="memberEditForm.no" size="mini"></el-input>
          <el-form-item label="工号:" prop="WorkID">
            <el-input v-model="memberEditForm.WorkID" size="mini"></el-input>
          </el-form-item>
          <el-form-item label="照片标识:">
            <el-input v-model="memberEditForm.figure" size="mini"></el-input>
            <el-input v-model="memberEditForm.SurfaceName" size="mini"></el-input>
          </el-form-item>
          <el-form-item label="姓名:">
            <el-input v-model="memberEditForm.name" size="mini"></el-input>
            <el-input v-model="memberEditForm.Name" size="mini"></el-input>
          </el-form-item>
          <el-form-item label="用户名:">
            <el-input v-model="memberEditForm.UserName" size="mini"></el-input>
          </el-form-item>
          <el-form-item label="性别:">
            <el-radio v-model="memberEditForm.gender" label="1">女</el-radio>
            <el-radio v-model="memberEditForm.gender" label="2">男</el-radio>
            <el-radio v-model="memberEditForm.Sex" label="女">女</el-radio>
            <el-radio v-model="memberEditForm.Sex" label="男">男</el-radio>
          </el-form-item>
          <el-form-item label="身份证号:">
            <el-input v-model="memberEditForm.idCard" size="mini"></el-input>
            <el-input v-model="memberEditForm.OwnerID" size="mini"></el-input>
          </el-form-item>
          <el-form-item label="手机号:">
            <el-input v-model="memberEditForm.phone" size="mini"></el-input>
          </el-form-item>
          <el-form-item label="其他:">
            <el-input v-model="memberEditForm.other" size="mini"></el-input>
            <el-input v-model="memberEditForm.Tel" size="mini"></el-input>
          </el-form-item>
          <div class="btns">
            <el-button size="small">取消</el-button>
            <el-button size="small" type="primary">保存</el-button>
            <el-button size="small" @click="memberEditDialogVisible=false">取消</el-button>
            <el-button size="small" type="primary" @click="memberSave">保存</el-button>
          </div>
        </el-form>
      </div>
@@ -126,18 +159,22 @@
      @close="toggleOrganizeDialogVisible=false"
    >
      <div class="text-left">
        <div class="flex-box">
          <label>人员:</label>
          <span>lisi</span>
        </div>
        <el-input v-model="organizeKeyword" size="small">
          <el-button slot="append" icon="el-icon-search"></el-button>
          <el-button slot="append" icon="el-icon-search" @clcik="getOrganizeTreeData"></el-button>
        </el-input>
        <div>默认组织</div>
        <el-tree :data="organizeData" node-key="id" default-expand-all></el-tree>
        <el-tree
          :data="organizeData"
          node-key="id"
          default-expand-all
          @node-click="checkOrgNode"
          :expand-on-click-node="false"
          :check-on-click-node="true"
          :highlight-current="true"
        ></el-tree>
        <div slot="footer" class="btns">
          <el-button size="small">取消</el-button>
          <el-button size="small" type="primary">确定</el-button>
          <el-button size="small" @click="toggleOrganizeDialogVisible=false">取消</el-button>
          <el-button size="small" type="primary" @click="updateOrg">确定</el-button>
        </div>
      </div>
    </el-dialog>
@@ -175,6 +212,15 @@
          <el-table-column prop="time" label="上传时间"></el-table-column>
          <el-table-column prop="state" label="状态"></el-table-column>
        </el-table>
        <el-pagination
          @size-change="handleTableSizeChange"
          @current-change="renderMemberTable"
          :current-page.sync="PageIndex"
          :page-size="PageSize"
          :page-sizes="pageSizes"
          layout="total,sizes, prev, pager, next"
          :total="tableTotal"
        ></el-pagination>
      </div>
    </el-dialog>
  </div>
@@ -182,21 +228,30 @@

<script>

import { getShuohuangDepartTree, getOrganizeTree } from '@/api/shuohuang'
import { getShuohuangDepartTree, getOrganizeTree, getMemberList, updateMemberInfo, addMember, updateUnit, uploadMemberPic } from '@/api/shuohuang'

export default {
  data () {
    return {
      CLIP: 'http://192.168.20.113/',
      treeWord: '',
      treeData: [],
      showMenu: false,
      deptId: '',
      menuTop: 0,
      menuLeft: 0,
      keyword: '',
      gender: '',
      genders: [{ name: '男', id: 'g0' }, { name: '女', id: 'g1' }],
      tableData: [],
      multipleTableSelection: [],
      PageIndex: 1,
      pageSizes: [2, 8, 12, 24],
      tableTotal: 0,
      PageSize: 8,
      organizeData: [],
      checkedOrg: '',
      organizeKeyword: '',
      memberEditDialogVisible: false,
      toggleOrganizeDialogVisible: false,
      batchImportDialogVisible: false,
@@ -209,9 +264,105 @@
  mounted () {
    this.searchLeftTreeData();
    this.getOrganizeTreeData();
    this.renderMemberTable();
  },
  methods: {
    uploadPic(){
    checkOrgNode (a, b, c) {
      this.checkedOrg = a.id
    },
    updateOrg () {
      let ids = this.multipleTableSelection.map(row => {
        return row.ID
      });
      let params = {
        DeptID: this.checkedOrg,
        Users: ids.join(',')
      }
      updateUnit(params).then(res => {
        if (res.success) {
          this.$notify({
            type: 'success',
            message: res.msg
          });
          this.toggleOrganizeDialogVisible = false;
          this.renderMemberTable();
        }
      })

    },
    tableSelection (val) {
      this.multipleTableSelection = val;
    },
    memberSave () {
      if (this.memberEditForm.ID) {
        updateMemberInfo(this.memberEditForm).then(res => {
          if (res.success) {
            this.$notify({
              type: 'success',
              message: res.msg
            });
            this.memberEditDialogVisible = false;
            this.renderMemberTable();
          }
        })
      }else{
        addMember(this.memberEditForm).then(res=>{
          if(res.success){
            this.$notify({
              type:'success',
              message: res.msg
            })
            this.renderMemberTable();
          }
        })
      }

    },
    delMember (member) {
      member.IsDel = true;
      this.memberUpdate(member);
    },
    editMember (member) {
      debugger
      this.memberEditDialogVisible = true;
      this.memberEditForm = member;
    },
    memberUpdate (member) {
      updateMemberInfo(member).then(res => {
        if (res.success) {
          this.$notify({
            type: 'success',
            message: res.msg
          });
          this.renderMemberTable();
        }
      })
    },
    checkNode (a, b, c) {
      if (a.children) {
        this.deptId = a.id;
        this.renderMemberTable();
      }
    },
    handleTableSizeChange (size) {
      this.PageSize = size;
      this.renderMemberTable();
    },
    renderMemberTable () {
      let _this = this;
      let params = {
        DeptID: this.deptId,
        keyword: this.keyword,
        Sex: this.gender,
        PageIndex: this.PageIndex,
        PageSize: this.PageSize
      }
      getMemberList(params).then(res => {

        _this.tableData = res.data;
      })
    },
    uploadPic () {

    },
    batchImportFiles () {
@@ -229,7 +380,13 @@
    toggleOrganize () {
      this.toggleOrganizeDialogVisible = true;
    },
    uploadMemberPic () { },
    uploadMemberPicture (params) {
      let param = new FormData();
      param.append('file', params.file)
      uploadMemberPic(param).then(res => {
        this.$set(this.memberEditForm,'Surface',res.data)
      })
    },
    openMenuList (t, l, frame) {
      this.showMenu = true;
      this.menuTop = t;
@@ -326,7 +483,7 @@
    height: 178px;
    display: block;
  }
  .batch-upload{
  .batch-upload {
    text-align: left;
    margin: 0 20px 20px 10px;
  }
@@ -374,7 +531,7 @@
    background: rgba(152, 170, 190, 0.7);
  }
  .right {
    padding: 8px 0 0 20px;
    padding-left: 20px;
    .filter-bar {
      display: flex;
      margin-bottom: 20px;
@@ -386,7 +543,11 @@
      .actions {
        text-align: left;
      }
      
      .table-cell-pic {
        img {
          width: 70px;
        }
      }
    }
  }
}

 src/pages/shuohuangMonitorAnalyze/components/searchForVideoAnalyze.vue

@@ -18,7 +18,7 @@
          end-placeholder="结束日期"
          align="right"
        ></el-date-picker>
        <el-button size="small" type="primary" @click="dataSearch">搜索</el-button>
        <el-button size="small" type="primary" @click="init">搜索</el-button>
      </div>
      <div class="checked-config">
        <span style="margin-top:3px;">已选条件:</span>
@@ -51,7 +51,7 @@
      </div>
      <div class="optional-config">
        <div class="config" v-for="(config,index) in optionalConfigs" :key="index">
          <template v-show="config.isShow">
          <template v-if="config.isShow">
            <div class="title">{{config.title}}</div>
            <div class="options-wrap">
              <div
@@ -89,7 +89,7 @@
            </div>
          </template>
        </div>
        <div class="config">
        <div class="config" v-if="showAdvance">
          <div class="title">高级选项</div>
          <div>
            <el-menu class="el-menu-demo" mode="horizontal" @select="handleSelect">
@@ -144,32 +144,32 @@
      </div>
      <div class="content" v-show="showType=='menu'">
        <el-row :gutter="20">
          <el-col :xs="8" :sm="6" :md="6" :lg="6" v-for="data in menuList" :key="data.id">
          <el-col :xs="8" :sm="6" :md="6" :lg="6" v-for="data in tabData" :key="data.id">
            <div class="card">
              <div class="video-wrap" @click="checkVideo(data)">
                <video src></video>
              <div class="video-wrap" @click="checkVideoDetail(data)">
                <img :src="CLIP+data.VideoCover" alt />
              </div>
              <div class="video-info">
                <div class="base-info">
                  <div>
                    <label>车号:</label>
                    <span>{{data.no}}</span>
                    <span>{{data.CarNumber}}</span>
                  </div>
                  <div>
                    <label>车次:</label>
                    <span>{{data.frequency}}</span>
                    <span>{{data.TrainNumber}}</span>
                  </div>
                  <div>
                    <label>时间:</label>
                    <span>{{data.time}}</span>
                    <span>{{data.VideoDate}}</span>
                  </div>
                  <div>
                    <label>司机|副司机:</label>
                    <span>{{data.driver}}</span>
                    <span>{{data.Driver1}}|{{data.Driver2}}</span>
                  </div>
                </div>
                <div class="mark-info">
                  <div class="abnormal" v-if="data.markType==1">
                  <div class="abnormal" v-if="data.IsUnusual==='1'">
                    <span v-for="(mark,index) in data.marks" :key="index">{{mark}}</span>
                  </div>
                  <div v-else>
@@ -180,32 +180,33 @@
                  <div class="tag" v-for="(tag,index) in data.tags" :key="index">{{tag}}</div>
                </div>
              </div>
              <div class="star">
                <i :class="[data.follow?'follow':'','el-icon-star-off']"></i>
              <div class="star" @click="toggleFollow(data)">
                <i :class="[data.IsFollow?'follow':'','el-icon-star-off']"></i>
              </div>
            </div>
          </el-col>
        </el-row>
        <el-pagination
          background
          @size-change="handleSizeChange"
          @size-change="handleTabSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="curTabPage"
          :page-sizes="pageSizes"
          :page-size="tabPageSize"
          layout="total, prev, pager, next"
          :total="tabTotal">
        </el-pagination>
          layout="total,sizes, prev, pager, next"
          :total="tabTotal"
        ></el-pagination>
      </div>
      <div class="content" v-show="showType=='list'">
        <el-table :data="tableData" fit ref="elTable">
          <el-table-column label="名称" prop="name" sortable width="500">
          <el-table-column label="名称" prop="VideoName" sortable width="500">
            <template slot-scope="scope">
              <div style="cursor:pointer;">{{scope.row.name}}</div>
              <div style="cursor:pointer;">{{scope.row.VideoName}}</div>
            </template>
          </el-table-column>
          <el-table-column label="大小" prop="size" sortable></el-table-column>
          <el-table-column label="修改日期" prop="updateTime" sortable></el-table-column>
          <el-table-column label="创建日期" prop="createTime" sortable></el-table-column>
          <el-table-column label="大小" prop="VideoSize" sortable></el-table-column>
          <el-table-column label="修改日期" prop="UpdatedAt" sortable></el-table-column>
          <el-table-column label="创建日期" prop="CreatedAt" sortable></el-table-column>
          <el-table-column label="操作">
            <template>
              <div class="operation">
@@ -214,15 +215,15 @@
            </template>
          </el-table-column>
        </el-table>
        <!-- <el-pagination background layout="prev, pager, next" :page-size="pageSize" :total="tableListTotal"></el-pagination> -->
        <el-pagination
          @size-change="handleSizeChange"
          @size-change="handleTableSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="curTablePage"
          :page-size="tablePageSize"
          layout="total, prev, pager, next"
          :total="tableTotal">
        </el-pagination>
          :page-sizes="pageSizes"
          layout="total,sizes, prev, pager, next"
          :total="tableTotal"
        ></el-pagination>
      </div>
      <el-dialog
        class="dialog-video"
@@ -259,34 +260,82 @@
                  <i class="el-icon-film"></i>
                  <span>{{video.name}}</span>
                </div>-->
                <div class="video-name">
                <div
                  class="video-name"
                  :class="{'current':curVideo.ID==video.ID}"
                  @click="checkVideo(video,index)"
                  v-for="(video,index) in videoDetails.relativeVideos"
                  :key="video.ID"
                >
                  <i class="el-icon-film"></i>
                  <span>驾驶室</span>
                </div>
                <div class="video-name">
                  <i class="el-icon-film"></i>
                  <span>机房</span>
                  <span>{{video.Event}}</span>
                </div>
              </div>
              <div class="players">
                <div class="video-item" v-for="(item,index) in videoWrapArr" :key="index"></div>
              <div class="players" ref="playerWrap">
                <div
                  class="video-item"
                  :ref="`gridVideoItem_${index}`"
                  v-for="(item,index) in videoWrapArr"
                  :key="index"
                  
                >
                  <template v-if="index<=videoArrs.length-1">
                    <div :class="{'currentPlayer':curVideo.ID==videoArrs[index].ID}">
                      {{videoArrs[index].ID}}
                      <img
                        :src="CLIP+videoArrs[index].VideoCover"
                        style="width:100px"
                      />
                    </div>
                  </template>
                </div>
                <!-- <div
                  class="video-item"
                  :class="{'active':item.ID==curVideo.ID}"
                  :ref="`gridVideoItem_${index}`"
                  v-for="(item,index) in videoWrapArr"
                  :key="index"
                >
                  
                </div>-->
              </div>
            </div>
          </div>
          <div class="content-bottom">
            <div class="bot-left block">
              <p class="title-partment">快速标注</p>
              <div style="height:28px;">
              <div class="flex-box" style="height:28px;">
                <label style="padding-right:10px;">隐患问题:</label>
                <el-radio v-model="hiddenDanger" :label="1">无异常</el-radio>
                <el-radio v-model="hiddenDanger" :label="2">有异常</el-radio>
                <el-radio v-model="curVideo.IsUnusual" label="0">无异常</el-radio>
                <el-radio v-model="curVideo.IsUnusual" label="1">有异常</el-radio>
                <el-button
                  icon="el-icon-plus"
                  size="mini"
                  v-show="hiddenDanger==2"
                  v-show="curVideo.IsUnusual==1"
                  type="primary"
                  @click="addLabel(videoDetails)"
                  @click="addLabel(curVideo)"
                >添加标注</el-button>
              </div>
              <div class="flex-box">
                <label>标注信息:</label>
                <div class="mark-list">
                  <div class="mark" v-for="mark in curVideo.LableLst" :key="mark.ID">
                    <div class="time" v-if="mark.length">
                      <span>{{mark[0].Time}}</span>
                      <i class="el-icon-edit" @click="editCurLabel(mark)"></i>
                      <i
                        class="el-icon-delete"
                        @click="removeCurLabel(mark[0].ParentID,mark[0].Time)"
                      ></i>
                    </div>
                    <div class="label-content">
                      <span
                        v-for="content in mark"
                        :key="content.ID"
                      >{{findLabelNameById(content.CodeID)}}</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="bot-right block">
@@ -294,19 +343,19 @@
              <div class="base-info">
                <div>
                  <label>车号:</label>
                  <span>{{videoDetails.no}}</span>
                  <span>{{videoDetails.CarNumber}}</span>
                </div>
                <div>
                  <label>车次:</label>
                  <span>{{videoDetails.frequency}}</span>
                  <span>{{videoDetails.TrainNumber}}</span>
                </div>
                <div>
                  <label>时间:</label>
                  <span>{{videoDetails.time}}</span>
                  <span>{{videoDetails.VideoDate}}</span>
                </div>
                <div>
                  <label>司机|副司机:</label>
                  <span>{{videoDetails.driver}}</span>
                  <span>{{videoDetails.Driver1}}|{{videoDetails.Driver2}}</span>
                </div>
              </div>
            </div>
@@ -321,13 +370,12 @@
      >
        <div class="label-check">
          <el-checkbox-group v-model="labelCheckedList">
            <el-checkbox v-for="item in labelOptions" :key="item.id" :label="item.id">{{item.name}}</el-checkbox>
            <el-checkbox v-for="item in labelOptions" :key="item.ID" :label="item.ID">{{item.Name}}</el-checkbox>
          </el-checkbox-group>
        </div>
        <div class="btns">
          <el-button @click="delLabelChecked" size="small">删除</el-button>
          <el-button @click="cancelLabelChecked" size="small">取消</el-button>
          <el-button @click="submitLabelChecked(videoDetails)" size="small" type="primary">确定</el-button>
          <el-button @click="submitLabelChecked()" size="small" type="primary">确定</el-button>
        </div>
      </el-dialog>
    </div>
@@ -335,16 +383,18 @@
</template>

<script>
import { getlstInit } from '@/api/shuohuang';
import { getlstInit, updateVideoAnalyze, getlst, getRelatedVideoInfo, getLabelMap, delLabel, editLabel } from '@/api/shuohuang';

export default {
  data () {
    return {
      CLIP: 'http://192.168.20.113/',
      keyword: '',
      searchTime: [this.$moment(new Date().getTime() - 3600 * 1000 * 24 * 3).format("YYYY-MM-DD HH:mm:ss"), this.$moment(new Date()).format("YYYY-MM-DD HH:mm:ss")],
      curTabPage: 1,
      curTablePage: 1,
      tabPageSize: 8,
      pageSizes: [2, 8, 12, 24],
      tabTotal: 0,
      tablePageSize: 8,
      tableTotal: 0,
@@ -391,6 +441,7 @@
      checkedConfigs: [],
      optionalConfigs: [],
      highLevelConfigs: [],
      showAdvance: true,
      fixedOneLineHeight: 40,
      watch: '',
      settle: '',
@@ -399,7 +450,7 @@
        { name: 'SS4B115_06_B节二端司机室_20201115_091500.mp4', size: '17.66M', updateTime: '2020-11-04 15:41', createTime: '2020-11-04 15:41' },
        { name: 'SS4B115_06_B节二端司机室_20201115_091700.mp4', size: '17.76M', updateTime: '2020-11-04 15:41', createTime: '2020-11-07 17:41' }
      ],
      menuList: [
      tabData: [
        { id: 'ss1', no: 'SS4B115', frequency: '8084', time: '2020-09-21 20:45:08', driver: '张三', marks: ['未呼唤、呼唤不标准', '学习司机未应答'], markType: 1, tags: ['进出站', '司机离岗'], follow: true },
        { id: 'ss2', no: 'SS4B115', frequency: '8084', time: '2020-09-21 20:45:08', driver: '张三', marks: [], markType: 0, tags: ['进出站', '司机离岗'], follow: false }
      ],
@@ -407,11 +458,34 @@
      videoDialogVisible: false,
      videoDetails: {},
      guid: 1,
      curVideo: {},
      videoArrs: [],
      videoWrapArr: [],
      hiddenDanger: 1,
      labelDialogVisible: false,
      labelOptions: [{ id: 'whh', name: '未呼唤、呼唤不标准' }, { id: 'jsbz', name: '精神不振、运行中睡觉' }, { id: 'xxsj', name: '学习司机未应答' }, { id: 'myhb', name: '没有后部瞭望、不按规定做防溜措施' }],
      labelCheckedList: [],
    }
  },
  watch: {
    checkedConfigs: {
      handler (n, o) {
        // let filterQuerys = [];
        // n.forEach(config => {
        //   let checkedOpts = config.data.filter(option => option.isChecked);
        //   if (checkedOpts.length) {
        //     var linkOpts = checkedOpts.map(opt => opt.name);
        //     linkOpts = linkOpts.join(',');
        //     let obj = {};
        //     obj[config.NameEn] = linkOpts;
        //     filterQuerys.push(obj);
        //   }
        // })
        // console.log(filterQuerys)

        this.filterSearchData()
      },
      deep: true
    }
  },
  mounted () {
@@ -447,32 +521,106 @@
    //   console.log(this.optionalConfigs);
    // });
    this.init();
    this.renderLabelOpts();
  },
  methods: {
    handleSizeChange(){

    editCurLabel (mark) {
      let arr = [];
      mark.forEach(label => {
        arr.push(label.CodeID)
      });
      this.labelCheckedList = arr;
      this.labelDialogVisible = true;
    },
    handleCurrentChange(){

    removeCurLabel (ParentID, Time) {
      delLabel({ ParentID, Time }).then(res => {
        
      })
    },
    renderLabelOpts () {
      let _this = this;
      getLabelMap().then(res => {
        _this.labelOptions = res.data
      })
    },
    findLabelNameById (id) {
      debugger
      let label = this.labelOptions.find(label => label.ID == id);
      return label.Name;
    },
    checkVideo (video,index) {
      this.curVideo = video;
      debugger
      if(index>0&&this.guid==1){
        this.videoWrapArr
      }
    },
    handleTabSizeChange (size) {
      debugger
      this.tabPageSize = size;
      this.filterSearchData()
    },
    handleTableSizeChange (size) {
      this.tablePageSize = size;
      this.filterSearchData()
    },
    handleCurrentChange () {
      this.filterSearchData()
    },
    //二级查询
    filterSearchData () {
      let _this = this;
      let query = {
        KeyWord: this.keyword,
        StartDate: this.searchTime[0],
        EndDate: this.searchTime[1],
        PageIndex: this.showType == 'list' ? this.curTablePage : this.showType == 'list',
        PageSize: this.showType == 'list' ? this.tablePageSize : this.tabPageSize,
        IsDetail: this.showType == 'list'
      };
      let filterQuerys = [];
      this.checkedConfigs.forEach(config => {
        let checkedOpts = config.data.filter(option => option.isChecked);
        if (checkedOpts.length) {
          var linkOpts = checkedOpts.map(opt => opt.name);
          linkOpts = linkOpts.join(',');
          let obj = {};
          obj[config.NameEn] = linkOpts;
          filterQuerys.push(obj);
        }
      })
      Object.assign(query, ...filterQuerys);

      getlst(query).then(res => {
        if (_this.showType == 'list') {
          _this.tableTotal = res.total;
          _this.tableData = res.data;
        } else {
          _this.tabTotal = res.total;
          _this.tabData = res.data;
        }
      })
    },
    //一级查询
    init () {
      let _this = this;
      let query = {
        KeyWord: this.keyword,
        StartDate: this.searchTime[0],
        EndDate: this.searchTime[1],
        PageIndex: this.showType=='list'?this.curTablePage:this.showType=='list',
        PageSize: this.showType=='list'?this.tablePageSize:this.tabPageSize,
        IsDetail: this.showType=='list'
        PageIndex: this.showType == 'list' ? this.curTablePage : this.showType == 'list',
        PageSize: this.showType == 'list' ? this.tablePageSize : this.tabPageSize,
        IsDetail: this.showType == 'list'
      };
      this.optionalConfigs = [];
      this.highLevelConfigs = [];
      getlstInit(query).then(res => {
        debugger
        if(_this.showType=='list'){
        if (_this.showType == 'list') {
          _this.tableTotal = res.total;
        }else{
          _this.tableData = res.data;
        } else {
          _this.tabTotal = res.total;
          _this.tabData = res.data;
        }

        res.filterlst.forEach(config => {
@@ -481,8 +629,6 @@
            let obj = {};
            obj.name = key;
            obj.id = config.Node[key]
            // item.id = item;
            // item.name = k;
            return obj
          });
          config.id = config.ID;
@@ -509,42 +655,111 @@
          });
          console.log(this.optionalConfigs);
        });

      })
    },
    delLabelChecked () {

    toggleFollow (data) {
      data.IsFollow = !data.IsFollow;
      this.updataVideo(data);
      if (data.IsFollow) {
        this.$notify({
          type: 'success',
          message: '已添加关注!'
        });
      }
    },
    cancelLabelChecked () {
    updataVideo (data) {
      let _this = this;
      updateVideoAnalyze(data).then(res => {
        //二级查询
      });
    },

    cancelLabelChecked () {
      this.labelDialogVisible = false;
    },
    submitLabelChecked () {
      console.log(this.labelCheckedList)
      debugger
      //this.curVideo
      //this.curVideo.HotPoint[0].Time
      editLabel({ ParentID: this.curVideo.ID + '', Time: this.curVideo.HotPoint[0].Time, CodeID: this.labelCheckedList.join(',') }).then(res => {
        debugger

      })

    },
    addLabel (videoDetails) {
      debugger
    addLabel (video) {
      this.labelDialogVisible = true;

    },
    setGuid (guid) {
      let _this = this;
      // for(var i = 0; i < Math.pow(guid,2); i++){
      //   if(i>this.videoArrs.length-1){
      //       this.videoWrapArr[i] = this.videoArrs[i]
      //     }else{
      //       this.videoWrapArr[i] = {}
      //     }
      // }
      this.videoWrapArr = Math.pow(guid, 2);

    },
    checkVideo (data) {
      this.videoDialogVisible = true;
      this.videoDetails = data;
      this.$nextTick(() => {
        for (var i = 0; i < Math.pow(guid, 2); i++) {
          this.$refs[`gridVideoItem_${i}`][0].style.width = this.$refs['playerWrap'].offsetWidth / guid + 'px';
          this.$refs[`gridVideoItem_${i}`][0].style.height = this.$refs['playerWrap'].offsetHeight / guid + 'px';

        }
      })

    },
    checkVideoDetail (data) {
      this.videoDetails = data;
      let _this = this;
      getRelatedVideoInfo({ UniqeID: data.UniqeID }).then(res => {
        _this.videoDetails.relativeVideos = res.data;
        _this.curVideo = res.data[0];
        _this.videoArrs = res.data;
        // _this.videoWrapArr.push(res.data[0]);
        _this.setGuid(1)
        _this.videoDialogVisible = true;
      })
    },
    checkFollow () {

    },
    checkType (type) {
      this.showType = type;
      this.init();
      // let filterQuerys = [];
      // this.checkedConfigs.forEach(config => {
      //   let checkedOpts = config.data.filter(option => option.isChecked);
      //   if (checkedOpts.length) {
      //     var linkOpts = checkedOpts.map(opt => opt.name);
      //     linkOpts = linkOpts.join(',');
      //     let obj = {};
      //     obj[config.NameEn] = linkOpts;
      //     filterQuerys.push(obj);
      //   }
      // })
      this.filterSearchData()
    },
    clearCheckedConfigs () {
      this.checkedConfigs.forEach(config => {
        config.isShow = true;
        config.data.forEach(d => {
          d.isChecked = false
        });
      });
      this.checkedConfigs = [];
      this.showAdvance = true;
    },
    removeCheckedConfig (config) {
      config.isShow = true;
      if (config.IsAdvanced) {
        this.showAdvance = true;
      }
      config.data.forEach(d => {
        d.isChecked = false;
      });
      let index = this.checkedConfigs.findIndex(one => one.id == config.id);
      this.checkedConfigs.splice(index, 1);
    },
@@ -554,12 +769,14 @@
      }
      this.checkedConfigs.push(config);

      //config.isShow = false;

      // this.dataSearch();
      this.$nextTick(() => {
        config.isShow = false;
      })
      config.isShow = false;
      config.isMultCheck = false;
      if (config.IsAdvanced) {
        this.showAdvance = false;
      }
      // this.$nextTick(() => {
      //   this.$set(config, 'isShow', false)
      // })

    },

@@ -785,7 +1002,8 @@
        .video-wrap {
          background: aliceblue;
          border-radius: 3px;
          video {
          img {
            width: 100%;
            border-radius: 3px;
          }
        }
@@ -882,6 +1100,7 @@
              width: 160px;
              margin-right: 10px;
              .video-name {
                cursor: pointer;
                color: #666;
                margin-bottom: 10px;
                &.current {
@@ -896,10 +1115,14 @@
              width: 960px;
              height: 540px;
              display: flex;
              flex-wrap: wrap;
              .video-item {
                flex: 1;
                background: black;
                border: 1px solid #fff;
                box-sizing: border-box;
                .currentPlayer {
                  border: 2px solid aqua;
                }
              }
            }
          }
@@ -908,6 +1131,28 @@
          display: flex;
          .bot-left {
            flex: 1;
            .flex-box {
              align-items: baseline;
              label {
                padding-right: 10px;
              }
              .mark-list {
                .time {
                  cursor: pointer;
                  font-size: 15px;
                  font-weight: bold;
                  color: #409eff;
                  i[class^='el-icon'] {
                    padding: 3px;
                  }
                }
                .label-content {
                  font-size: 13px;
                  padding: 4px 0;
                  color: #888;
                }
              }
            }
          }
          .bot-right {
            width: 210px;

 src/pages/shuohuangMonitorAnalyze/components/taskManage.vue

@@ -62,10 +62,8 @@
        <div class="body">
          <div class="flex-box">
            <label>部门:</label>
            <el-select placeholder="全部" size="mini" style="width: 200px;margin-right: 10px;">
              <el-option></el-option>
            </el-select>
            <el-button type="primary" size="mini" @click="searchPerson">搜索</el-button>
            <span class="checked-org" :class="{'null':!checkedOrg.id}">{{checkedOrg.label||'全部'}}</span>
            <el-button type="primary" size="mini" @click="selOrg">选择部门</el-button>
          </div>
          <div class="person-list">
            <div class="person" v-for="person in personList" :key="person.id">
@@ -125,10 +123,28 @@
        </el-table>
      </div>
    </div>
    <el-dialog :visible="orgTreeDialogVisible">
      <div>
        <el-tree
          :data="organizeData"
          node-key="id"
          default-expand-all
          @node-click="checkOrgNode"
          :expand-on-click-node="false"
          :check-on-click-node="true"
          :highlight-current="true"
        ></el-tree>
        <div slot="footer" class="btns">
          <el-button size="small" @click="orgTreeDialogVisible=false">取消</el-button>
          <el-button size="small" type="primary" @click="searchMemberByOrg">确定</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getOrganizeTree } from '@/api/shuohuang';
export default {
  data () {
    return {
@@ -173,7 +189,10 @@
      ],
      videoListSearchWord: '',
      actCollapseName: '',
      username: '',
      checkedOrg: {},
      orgTreeDialogVisible: false,
      organizeData: [],

      personList: [
        { name: '张三', id: 'zs' },
        { name: '李斯', id: 'ls' }
@@ -182,17 +201,62 @@
    }
  },
  mounted () {

    this.getOrganizeTreeData();
  },
  methods: {
    searchMemberByOrg(){
      debugger
      
    },
    deepNodeChildren (node) {
      if (node.ChildDept && node.ChildDept.length > 0) {
        return node.ChildDept.map(child => {
          let childObj = {};
          childObj.id = child.ID;
          childObj.label = child.Name;
          childObj.Status = child.Status;
          if (child.ChildDept) {
            childObj.children = this.deepNodeChildren(child)
          }
          if (child.UserLst) {
            childObj.children = this.deepNodeChildren(child)
          }
          return childObj;
        });
      } else if (node.UserLst && node.UserLst.length > 0) {
        return node.UserLst.map(child => {
          let childObj = {};
          childObj.id = child.ID;
          childObj.label = child.Name;
          childObj.Status = child.Status;
          return childObj;
        });
      }
    },
    checkOrgNode (a, b, c) {
      this.checkedOrg = a
    },
    getOrganizeTreeData () {
      let _this = this;
      getOrganizeTree().then(res => {
        _this.organizeData = res.data.map(item => {
          let obj = {};
          obj.id = item.ID;
          obj.label = item.Name;
          obj.Status = item.Status;
          obj.children = _this.deepNodeChildren(item);
          return obj
        })
      })
    },
    distributeTask () {

    },
    searchVideoList () {

    },
    searchPerson () {

    selOrg () {
      this.orgTreeDialogVisible = true;
    },
    searchTask () {

@@ -251,6 +315,13 @@
    }
    .top-right {
      width: 360px;
      .checked-org {
        flex: 1;
        text-align: left;
        &.null {
          color: #999;
        }
      }
      .person-list {
        padding-top: 14px;
        .person {
@@ -272,7 +343,6 @@
      .actions {
        text-align: left;
      }
      
    }
  }
}

 src/pages/shuohuangMonitorAnalyze/index/App.vue

@@ -56,8 +56,16 @@
</script>

<style lang="scss">
.flex-box{
.flex-box {
  display: flex;
}
.el-button--primary.is-disabled,
.el-button--primary.is-disabled:hover,
.el-button--primary.is-disabled:focus,
.el-button--primary.is-disabled:active {
  color: #ffffff;
  background-color: #9eb4f0!important;
  border-color: #9eb4f0!important;
}
.el-table.thbg {
  border: 1px solid #dedede;
@@ -68,6 +76,11 @@
  }
  .operation {
    cursor: pointer;
    i[class^='el-icon'] {
      padding: 3px;
      font-size: 16px;
      color: #0096fa;
    }
  }
}
.main-view {

 vue.config.js

@@ -87,7 +87,7 @@
        }
      },
      "/api-c": {
        target: 'http://192.168.20.113:8001',
        target: 'http://192.168.20.113:8002',
        changeOrigin: true
      },
      "/api-v": {