From e6758ef29bd686e894b4679edf1bd88436b84148 Mon Sep 17 00:00:00 2001
From: hanbaoshan <hanbaoshan@aiotlink.com>
Date: 星期三, 13 一月 2021 19:07:03 +0800
Subject: [PATCH] 分析检索/人员管理接口联调
---
src/pages/shuohuangMonitorAnalyze/index/App.vue | 15
vue.config.js | 2
src/pages/shuohuangMonitorAnalyze/components/taskManage.vue | 88 +++++
src/pages/shuohuangMonitorAnalyze/components/searchForVideoAnalyze.vue | 405 +++++++++++++++++++++-----
src/pages/shuohuangMonitorAnalyze/components/memberManage.vue | 263 ++++++++++++++---
src/api/shuohuang.ts | 87 +++++
6 files changed, 708 insertions(+), 152 deletions(-)
diff --git a/src/api/shuohuang.ts b/src/api/shuohuang.ts
index c2a5273..b6a83fe 100644
--- a/src/api/shuohuang.ts
+++ b/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
+})
\ No newline at end of file
diff --git a/src/pages/shuohuangMonitorAnalyze/components/memberManage.vue b/src/pages/shuohuangMonitorAnalyze/components/memberManage.vue
index 5d7a0a9..bc1be55 100644
--- a/src/pages/shuohuangMonitorAnalyze/components/memberManage.vue
+++ b/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;
+ }
+ }
}
}
}
diff --git a/src/pages/shuohuangMonitorAnalyze/components/searchForVideoAnalyze.vue b/src/pages/shuohuangMonitorAnalyze/components/searchForVideoAnalyze.vue
index f1478cb..e18d1f2 100644
--- a/src/pages/shuohuangMonitorAnalyze/components/searchForVideoAnalyze.vue
+++ b/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;
diff --git a/src/pages/shuohuangMonitorAnalyze/components/taskManage.vue b/src/pages/shuohuangMonitorAnalyze/components/taskManage.vue
index 9374856..c519390 100644
--- a/src/pages/shuohuangMonitorAnalyze/components/taskManage.vue
+++ b/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;
}
-
}
}
}
diff --git a/src/pages/shuohuangMonitorAnalyze/index/App.vue b/src/pages/shuohuangMonitorAnalyze/index/App.vue
index 30023bd..f1aec94 100644
--- a/src/pages/shuohuangMonitorAnalyze/index/App.vue
+++ b/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 {
diff --git a/vue.config.js b/vue.config.js
index ce1b779..021cdfc 100644
--- a/vue.config.js
+++ b/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": {
--
Gitblit v1.8.0