From d01700754282efce449ab8b8c1191a21419eb82f Mon Sep 17 00:00:00 2001
From: hanbaoshan <hanbaoshan@aiotlink.com>
Date: 星期五, 08 一月 2021 21:10:24 +0800
Subject: [PATCH] 朔黄视频分析项目添加

---
 src/pages/shuohuangMonitorAnalyze/components/transferMemo.vue          |   85 +
 src/pages/shuohuangMonitorAnalyze/index/mixins.ts                      |   28 
 vue.config.js                                                          |    4 
 src/pages/shuohuangMonitorAnalyze/components/searchForVideoAnalyze.vue |  943 +++++++++++++++++++++
 src/pages/shuohuangMonitorAnalyze/index/main.ts                        |   15 
 public/apps.json                                                       |   23 
 src/pages/shuohuangMonitorAnalyze/components/memberManage.vue          |  393 ++++++++
 src/api/shuohuang.ts                                                   |   16 
 src/pages/shuohuangMonitorAnalyze/components/configManage.vue          |  139 +++
 src/pages/shuohuangMonitorAnalyze/index/App.vue                        |  102 ++
 src/pages/shuohuangMonitorAnalyze/components/taskManage.vue            |  279 ++++++
 public/images/shuohuang/railroad.png                                   |    0 
 src/Pool/TreeData.ts                                                   |  313 +++---
 src/pages/shuohuangMonitorAnalyze/components/transferDeviceManage.vue  |  124 ++
 src/pages/shuohuangMonitorAnalyze/components/leftNav.vue               |  107 ++
 src/pages/panoramicView/components/TracePlot.vue                       |    2 
 src/pages/shuohuangMonitorAnalyze/components/topNav.vue                |   35 
 17 files changed, 2,448 insertions(+), 160 deletions(-)

diff --git a/public/apps.json b/public/apps.json
index 3117b98..140d262 100644
--- a/public/apps.json
+++ b/public/apps.json
@@ -391,6 +391,29 @@
       "installed": true,
       "isUpgrade": false,
       "progressMsg": ""
+    },{
+      
+      "id": "fa5674ee-70cf-4e22-8a06-c17429fb777",
+      "name": "涔樺姟鍛樺畨鍏ㄨ涓哄垎鏋�",
+      "package": "shuohuangMonitorAnalyze",
+      "type": "1",
+      "url": "/view/shuohuangMonitorAnalyze/",
+      "title": "涔樺姟鍛樺畨鍏ㄨ涓哄垎鏋�",
+      "width": 1500,
+      "height": 750,
+      "iconBlob": "",
+      "icon": "../../images/app-mid/visual.png",
+      "version": "1.0.0",
+      "create_time": "2020-10-09 14:00:08",
+      "create_by": "",
+      "update_time": "",
+      "update_by": "",
+      "isDelete": 0,
+      "isDefault": false,
+      "remoteVersion": "",
+      "installed": true,
+      "isUpgrade": false,
+      "progressMsg": ""
     }
   ],
   "msg": "璇锋眰澶勭悊鎴愬姛",
diff --git a/public/images/shuohuang/railroad.png b/public/images/shuohuang/railroad.png
new file mode 100644
index 0000000..1486b69
--- /dev/null
+++ b/public/images/shuohuang/railroad.png
Binary files differ
diff --git a/src/Pool/TreeData.ts b/src/Pool/TreeData.ts
index 7ab436f..cbb1fde 100644
--- a/src/Pool/TreeData.ts
+++ b/src/Pool/TreeData.ts
@@ -7,140 +7,136 @@
   updateAreaTreeData,
   refreshGB28181Tree,
   updateCameraArea
-} from "@/api/area";
-import {
-  findAllFile,
-  show,
-  changeEnable
-} from "@/api/localVedio";
+} from '@/api/area'
+import { findAllFile, show, changeEnable } from '@/api/localVedio'
 
 export default class TreeDataPool {
-  public openeds: Array<boolean>;
-  public treeData: Array<object>;
-  public clusterData: Array<object>;
-  public gb28181Data: Array<object>;
-  public treeDataPure: Array<object>;
-  public gb28181DataPure: Array<object>;
-  public clusterDataPure: Array<object>;
-  public videoArr: Array<string | undefined | object>;
-  public searchCamType: number;
-  public searchInput: string;
-  public activeVideoIndex: number | string;
-  public activeVideoId: number | string;
-  public activeForceChoose: boolean;
-  public readonly: boolean;
-  public gbReadonly: boolean;
-  public multiple: boolean;
-  public searchFrom: string = '';
-  public showTreeBox: boolean;
-  public selectedNodes: Array<string>;
-  public selectedNode: any;
+  public openeds: Array<boolean>
+  public treeData: Array<object>
+  public clusterData: Array<object>
+  public gb28181Data: Array<object>
+  public treeDataPure: Array<object>
+  public gb28181DataPure: Array<object>
+  public clusterDataPure: Array<object>
+  public videoArr: Array<string | undefined | object>
+  public searchCamType: number
+  public searchInput: string
+  public activeVideoIndex: number | string
+  public activeVideoId: number | string
+  public activeForceChoose: boolean
+  public readonly: boolean
+  public gbReadonly: boolean
+  public multiple: boolean
+  public searchFrom: string = ''
+  public showTreeBox: boolean
+  public selectedNodes: Array<string>
+  public selectedNode: any
   // 璁板綍褰撳墠鎿嶄綔鐨勬爲
-  public treeType: string;
+  public treeType: string
   // 璁板綍鏀惰捣鐨勮妭鐐�
-  public foldNodeList: object;
+  public foldNodeList: object
   //璁板綍宸︿晶tab锛歛ctiveName
-  public treeActiveName: string;
+  public treeActiveName: string
   //鏈湴瑙嗛锛氳棰戝垎鏋愬鐞�
-  public vedioAnaliyseSwitch: boolean;
+  public vedioAnaliyseSwitch: boolean
   //鏈湴瑙嗛鍒楄〃
-  public localVedioList: Array<any>;
+  public localVedioList: Array<any>
   //鏈湴瑙嗛褰撳墠椤�
-  public localCurrentPage: number;
+  public localCurrentPage: number
   //鏈湴瑙嗛姣忛〉鏌ヨ20鏉�
-  public localPageSize: number;
+  public localPageSize: number
   //鏈湴瑙嗛鎬绘潯鏁�
-  public localTotal: number;
+  public localTotal: number
   //鍕鹃�夌殑鏈湴瑙嗛
-  public checkedLocalVedio: Array<any>;
+  public checkedLocalVedio: Array<any>
   //褰撳墠閫変腑鐨勬湰鍦拌棰�
-  public clickLocalVideo: object;
+  public clickLocalVideo: object
   //鎺у埗寮�濮嬨�佹殏鍋滄寜閽樉绀虹姸鎬�
-  public btnStaus: string;
+  public btnStaus: string
   //鏈湴瑙嗛绫诲瀷
-  public searchLocalType: number;
+  public searchLocalType: number
   //璁板綍澶嶅埗鐨勬憚鍍忔満id
-  public ctrlCameraId: string;
+  public ctrlCameraId: string
   //璁板綍澶嶅埗鐨勬憚鍍忔満name
-  public ctrlCameraName: string;
+  public ctrlCameraName: string
 
   constructor() {
-    this.openeds = [true, true, false];
-    this.treeData = [];
-    this.gb28181Data = [];
-    this.clusterData = [];
-    this.treeDataPure = [];
-    this.gb28181DataPure = [];
-    this.clusterDataPure = [];
-    this.videoArr = [""];
-    this.searchCamType = 0;
-    this.searchInput = "";
-    this.activeVideoIndex = "";
-    this.activeVideoId = "";
-    this.activeForceChoose = false;
-    this.showTreeBox = true;
-    this.readonly = true;
-    this.gbReadonly = true;
-    this.multiple = false;
-    this.selectedNodes = [];
-    this.selectedNode = {};
-    this.treeType = "";
-    this.foldNodeList = {};
-    this.vedioAnaliyseSwitch = false;
-    this.treeActiveName = "camera";
-    this.searchLocalType = 0;
-    this.localVedioList = [];
-    this.checkedLocalVedio = [];
-    this.clickLocalVideo = {};
+    this.openeds = [true, true, false]
+    this.treeData = []
+    this.gb28181Data = []
+    this.clusterData = []
+    this.treeDataPure = []
+    this.gb28181DataPure = []
+    this.clusterDataPure = []
+    this.videoArr = ['']
+    this.searchCamType = 0
+    this.searchInput = ''
+    this.activeVideoIndex = ''
+    this.activeVideoId = ''
+    this.activeForceChoose = false
+    this.showTreeBox = true
+    this.readonly = true
+    this.gbReadonly = true
+    this.multiple = false
+    this.selectedNodes = []
+    this.selectedNode = {}
+    this.treeType = ''
+    this.foldNodeList = {}
+    this.vedioAnaliyseSwitch = false
+    this.treeActiveName = 'camera'
+    this.searchLocalType = 0
+    this.localVedioList = []
+    this.checkedLocalVedio = []
+    this.clickLocalVideo = {}
     //1:鏆傚仠鐘舵�侊紱2锛氱瓑寰呯姸鎬�;3:缃伆
-    this.btnStaus = "3";
-    this.localCurrentPage = 1;
-    this.localPageSize = 20;
-    this.localTotal = 0;
-    this.ctrlCameraId = "";
-    this.ctrlCameraName = "";
+    this.btnStaus = '3'
+    this.localCurrentPage = 1
+    this.localPageSize = 20
+    this.localTotal = 0
+    this.ctrlCameraId = ''
+    this.ctrlCameraName = ''
   }
 
   setVideoArr(index: number, value: object, vue: any): void {
-    vue.$set(this.videoArr, index, value);
-    this.activeForceChoose = false;
+    vue.$set(this.videoArr, index, value)
+    this.activeForceChoose = false
   }
 
   updateSelectedNodes() {
-    this.selectedNodes = [];
+    this.selectedNodes = []
     if (!this.multiple) {
-      this.selectedNodes = [this.selectedNode.id];
-      return;
+      this.selectedNodes = [this.selectedNode.id]
+      return
     }
-    let _selected = this.selectedNodes;
+    let _selected = this.selectedNodes
     console.log(this.selectedNodes)
     function nodeFilter(node: any) {
-      if (node.type === "4" && node.selected) {
-        _selected.push(node.id);
+      if (node.type === '4' && node.selected) {
+        _selected.push(node.id)
       }
       if (node.children) {
         node.children.forEach((n: any) => {
-          nodeFilter(n);
-        });
+          nodeFilter(n)
+        })
       }
     }
     if (this.selectedNode.cameraType === 0) {
       //鎽勫儚鏈烘爲
-      if(this.treeActiveName == "camera"){
+      if (this.treeActiveName == 'camera') {
         this.treeData.forEach((n: any) => {
-          nodeFilter(n);
-        });
-      }else if(this.treeActiveName == "cluster"){
+          nodeFilter(n)
+        })
+      } else if (this.treeActiveName == 'cluster') {
         //闆嗙兢鏍�
         this.clusterData.forEach((n: any) => {
-          nodeFilter(n);
-        });
+          nodeFilter(n)
+        })
       }
     }
     if (this.selectedNode.cameraType === 1) {
       this.gb28181Data.forEach((n: any) => {
-        nodeFilter(n);
-      });
+        nodeFilter(n)
+      })
     }
     // if (this.selectedNode.cameraType === -1) {
     //   this.clusterData.forEach((n: any) => {
@@ -150,105 +146,105 @@
   }
 
   getCameraInfoByIp(ipaddr) {
-    let camera = null;
- 
+    let camera = null
+
     function nodeFilter(node: any) {
       if (node.rtsp && node.rtsp.indexOf(ipaddr) != -1) {
-        camera = node;
-        return;
+        camera = node
+        return
       }
       if (node.children) {
         node.children.forEach((n: any) => {
-          nodeFilter(n);
-        });
+          nodeFilter(n)
+        })
       }
     }
 
     this.treeData.forEach((n: any) => {
-      nodeFilter(n);
-    });
+      nodeFilter(n)
+    })
 
     if (!camera) {
       this.gb28181Data.forEach((n: any) => {
-        nodeFilter(n);
-      });
+        nodeFilter(n)
+      })
     }
 
-    return camera;
+    return camera
   }
 
   getCameraInfoById(id) {
-    let camera = null;
+    let camera = null
 
     function nodeFilter(node: any) {
       if (node.id === id) {
-        camera = node;
-        return;
+        camera = node
+        return
       }
       if (node.children) {
         node.children.forEach((n: any) => {
-          nodeFilter(n);
-        });
+          nodeFilter(n)
+        })
       }
     }
 
     this.treeData.forEach((n: any) => {
-      nodeFilter(n);
-    });
+      nodeFilter(n)
+    })
 
     if (!camera) {
       this.gb28181Data.forEach((n: any) => {
-        nodeFilter(n);
-      });
+        nodeFilter(n)
+      })
     }
 
-    return camera;
+    return camera
   }
 
   getParent(id: string, isGB: boolean): string {
-    let parent = "0";
+    let parent = '0'
 
     function nodeFilter(node: Array<any>): any {
       for (let i = 0; i < node.length; i++) {
         if (node[i].id == id) {
-          return true;
+          return true
         }
         if (node[i].children && node[i].children.length > 0) {
           if (nodeFilter(node[i].children)) {
-            parent = node[i].id;
+            parent = node[i].id
           }
         }
       }
-      return false;
+      return false
     }
 
     if (isGB) {
-      nodeFilter(this.gb28181Data);
+      nodeFilter(this.gb28181Data)
     } else {
-      nodeFilter(this.treeData);
+      nodeFilter(this.treeData)
     }
 
-    return parent;
+    return parent
   }
 
   clean() {
-    this.treeData = JSON.parse(JSON.stringify(this.treeDataPure));
-    this.gb28181Data = JSON.parse(JSON.stringify(this.gb28181DataPure));
+    this.treeData = JSON.parse(JSON.stringify(this.treeDataPure))
+    this.gb28181Data = JSON.parse(JSON.stringify(this.gb28181DataPure))
 
     this.isFold(this.treeData)
     this.isFold(this.gb28181Data)
-    this.selectedNodes = [];
-    this.selectedNode = {};
+    this.selectedNodes = []
+    this.selectedNode = {}
 
-    this.cleanLocalVedio();
+    this.cleanLocalVedio()
   }
 
   cleanTree(tree) {
-    if (tree === "localTree") {
-      this.treeData = JSON.parse(JSON.stringify(this.treeDataPure));
+    if (tree === 'localTree') {
+      this.treeData = JSON.parse(JSON.stringify(this.treeDataPure))
     }
-    if (tree === "gb28182Tree") {
-      this.gb28181Data = JSON.parse(JSON.stringify(this.gb28181DataPure));
+    if (tree === 'gb28182Tree') {
+      this.gb28181Data = JSON.parse(JSON.stringify(this.gb28181DataPure))
     }
   }
 
@@ -258,7 +254,7 @@
     }
     node.forEach(n => {
       if (this.foldNodeList[n.id]) {
-        n.opened = false;
+        n.opened = false
       }
       if (n.children && n.children.length > 0) {
         this.isFold(n.children)
@@ -274,8 +270,8 @@
       if (n.children && n.children.length > 0) {
         this.setDropDisable(n.children)
       } else {
-        if (n.type === "4") {
-          n.dropDisabled = true;
+        if (n.type === '4') {
+          n.dropDisabled = true
         }
       }
     })
@@ -285,17 +281,17 @@
     if (!node) {
       return
     }
-    node.sort(function (obj1: any, obj2: any) {
-      var val1 = obj1.name;
-      var val2 = obj2.name;
+    node.sort(function(obj1: any, obj2: any) {
+      var val1 = obj1.name
+      var val2 = obj2.name
       if (val1 < val2) {
-        return -1;
+        return -1
       } else if (val1 > val2) {
-        return 1;
+        return 1
       } else {
-        return 0;
+        return 0
       }
-    });
+    })
 
     node.forEach(n => {
       if (n.children && n.children.length > 0) {
@@ -307,13 +303,13 @@
   async fetchLocalTree() {
     let params: any = {
       searchType: this.searchCamType,
-      cameraName: this.searchInput,
+      cameraName: this.searchInput
       //isPlatform: 1
-    };
+    }
     if (this.searchFrom == 'cluster') {
       params.isPlatform = 1
     }
-    const rsp: any = await getLocalCameraTree(params);
+    const rsp: any = await getLocalCameraTree(params)
 
     if (rsp && rsp.success) {
       this.treeData = rsp.data ? rsp.data : []
@@ -323,23 +319,23 @@
 
       // 璁剧疆绂佹鎷栨嫿鎽勫儚鏈哄埌鎽勫儚鏈鸿妭鐐�
       this.setDropDisable(this.treeData)
-      this.treeDataPure = JSON.parse(JSON.stringify(this.treeData));
+      this.treeDataPure = JSON.parse(JSON.stringify(this.treeData))
       this.isFold(this.treeData)
     }
   }
-
+  
   async fetchClusterTree() {
     const rsp: any = await getClusterTree({
       searchType: this.searchCamType,
       cameraName: this.searchInput
-    });
+    })
     if (rsp && rsp.success) {
-      console.log(rsp.data);
+      console.log(rsp.data)
       this.clusterData = rsp.data ? rsp.data : []
       if (this.clusterData && this.clusterData.length > 0) {
         this.sortTreeData(this.clusterData)
       }
-      this.clusterDataPure = JSON.parse(JSON.stringify(this.clusterData));
+      this.clusterDataPure = JSON.parse(JSON.stringify(this.clusterData))
       this.isFold(this.clusterData)
     }
   }
@@ -348,7 +344,7 @@
     const rsp: any = await getGB28181CameraTree({
       searchType: this.searchCamType,
       cameraName: this.searchInput
-    });
+    })
 
     if (rsp && rsp.success) {
       this.gb28181Data = rsp.data ? rsp.data : []
@@ -356,7 +352,7 @@
         this.sortTreeData(this.gb28181Data)
       }
 
-      this.gb28181DataPure = JSON.parse(JSON.stringify(this.gb28181Data));
+      this.gb28181DataPure = JSON.parse(JSON.stringify(this.gb28181Data))
       this.isFold(this.gb28181Data)
     }
   }
@@ -376,17 +372,17 @@
     await addAreaTreeData({
       name: name,
       parentId: parent
-    });
+    })
 
-    this.fetchTreeData();
+    this.fetchTreeData()
   }
 
   async del(id: string) {
     await delAreaTreeData({
       id: id
-    });
+    })
 
-    this.fetchTreeData();
+    this.fetchTreeData()
   }
 
   async update(name: string, id: string, alias: string, isGb: boolean) {
@@ -395,9 +391,9 @@
       name: name,
       parentId: this.getParent(id, isGb),
       alias: alias
-    });
+    })
 
-    this.fetchTreeData();
+    this.fetchTreeData()
   }
 
   async refreshGB28181() {
@@ -406,8 +402,7 @@
   }
 
   async findAllFile(params: any) {
-    params.fileName = this.searchInput,
-      params.type = this.searchLocalType
+    ;(params.fileName = this.searchInput), (params.type = this.searchLocalType)
     params.page = this.localCurrentPage
     params.size = this.localPageSize
     let res: any = await findAllFile(params)
@@ -422,7 +417,7 @@
         }
         if (!i.snapshot_url) {
           // obj.snapshot_url = require('@/assets/nobody.png')
-          obj.snapshot_url = ""
+          obj.snapshot_url = ''
         } else {
           obj.snapshot_url = '/httpImage/' + obj.snapshot_url
         }
@@ -469,7 +464,7 @@
 
     if (this.checkedLocalVedio.length === 0) {
       this.btnStaus = '3'
-      return false;
+      return false
     }
     this.checkedLocalVedio.every((i, index) => {
       let t = ''
@@ -505,7 +500,7 @@
       i.clickStatus = false
     })
     this.checkedLocalVedio = []
-    this.btnStaus = "3"
+    this.btnStaus = '3'
   }
 
   async dropNode(cameraId, areaId) {
diff --git a/src/api/shuohuang.ts b/src/api/shuohuang.ts
new file mode 100644
index 0000000..c2a5273
--- /dev/null
+++ b/src/api/shuohuang.ts
@@ -0,0 +1,16 @@
+import request from "@/scripts/httpRequest";
+
+//鍒濆鍖栨煡璇�
+export const getlstInit = (query:any)=>request({
+    url:'/data/api-c/lkg/findlstA',
+    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',
+    method: 'get'
+});
diff --git a/src/pages/panoramicView/components/TracePlot.vue b/src/pages/panoramicView/components/TracePlot.vue
index a164bc0..966368a 100644
--- a/src/pages/panoramicView/components/TracePlot.vue
+++ b/src/pages/panoramicView/components/TracePlot.vue
@@ -127,7 +127,7 @@
         return;
       }
       //鍒ゆ柇鏄惁鏄煡鍘嗗彶鏁版嵁
-      if (this.searchTime[1] < Date.now()) {
+      if (Date.parse(this.searchTime[1]) < Date.now()) {
         this.filterData()
       } else {
         this.activeObjHashMap = {};
diff --git a/src/pages/shuohuangMonitorAnalyze/components/configManage.vue b/src/pages/shuohuangMonitorAnalyze/components/configManage.vue
new file mode 100644
index 0000000..382d0b0
--- /dev/null
+++ b/src/pages/shuohuangMonitorAnalyze/components/configManage.vue
@@ -0,0 +1,139 @@
+<template>
+  <div class="config-manage">
+    <el-collapse v-model="activeNames" @change="handleChange">
+      <el-collapse-item title="瀛樺偍璁剧疆" name="1">
+        <div class="memory-setting">
+          <div class="flex-box">
+            <div>
+              <label>鍘熷瑙嗛淇濆瓨鍒板瓨鍌ㄦ湇鍔″櫒</label>
+              <el-switch
+                v-model="memoryServe"
+                active-color="#409eff"
+                inactive-color="#dcdfe6"
+                :active-value="true"
+                :inactive-value="false"
+                size="small"
+              ></el-switch>
+            </div>
+            <div>
+              <label>瀛樺偍鏃堕棿</label>
+              <el-select v-model="memoryTime" size="small">
+                <el-option value="week">涓�鍛�</el-option>
+                <el-option value="month">涓�涓湀</el-option>
+              </el-select>
+            </div>
+          </div>
+          <div class="flex-box">
+            <div>
+              <label>瑙嗛杞偍瀹屾垚鍚庢牸寮忓寲纭洏</label>
+              <el-switch
+                v-model="format"
+                active-color="#409eff"
+                inactive-color="#dcdfe6"
+                :active-value="true"
+                :inactive-value="false"
+                size="small"
+              ></el-switch>
+            </div>
+          </div>
+          <div class="flex-box">
+            <div>
+              <label>瑙嗛鏂囦欢瓒呭嚭鏃堕棿鑷姩鍒犻櫎</label>
+              <el-switch
+                v-model="autoRemove"
+                active-color="#409eff"
+                inactive-color="#dcdfe6"
+                :active-value="true"
+                :inactive-value="false"
+                size="small"
+              ></el-switch>
+            </div>
+            <div>
+              <label>鍒犻櫎鏃堕棿</label>
+              <el-select v-model="removeTime" size="small">
+                <el-option value="week">涓�鍛�</el-option>
+                <el-option value="month">涓�涓湀</el-option>
+              </el-select>
+            </div>
+          </div>
+        </div>
+      </el-collapse-item>
+      <el-collapse-item title="鍒嗘瀽璁剧疆" name="2">
+        <div class="analyze-setting">
+          <div class="flex-box">
+            <div>
+              <label>瑙嗛鍒嗘瀽鍛ㄦ湡:</label>
+              <el-input-number
+                v-model="analyzePeriod"
+                controls-position="right"
+                :min="1"
+                :max="10"
+                size="small"
+              ></el-input-number>
+            </div>
+          </div>
+        </div>
+      </el-collapse-item>
+      <el-collapse-item title="杞偍璁剧疆" name="3"></el-collapse-item>
+    </el-collapse>
+    <div class="btns text-right">
+      <el-button type="primary" size="small">淇濆瓨</el-button>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      activeNames: ['1', '2'],
+      memoryServe: false,
+      memoryTime: '',
+      format: false,
+      autoRemove: true,
+      removeTime: '',
+      analyzePeriod: '',
+    }
+  },
+  methods: {
+    handleChange () {
+
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.config-manage {
+  padding: 20px;
+  .el-collapse-item__header {
+    font-weight: bold;
+    font-size: 15px;
+  }
+  .flex-box {
+    margin-bottom: 10px;
+    & > div {
+      display: flex;
+      align-items: center;
+      margin-right: 10px;
+      & + div {
+        margin-left: 40px;
+      }
+      label {
+        padding-right: 10px;
+        color: #666;
+      }
+    }
+  }
+  .memory-setting {
+    padding-left: 60px;
+  }
+  .analyze-setting {
+    padding-left: 60px;
+  }
+  .btns {
+    text-align: right;
+    padding-top: 20px;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/pages/shuohuangMonitorAnalyze/components/leftNav.vue b/src/pages/shuohuangMonitorAnalyze/components/leftNav.vue
new file mode 100644
index 0000000..0653bbd
--- /dev/null
+++ b/src/pages/shuohuangMonitorAnalyze/components/leftNav.vue
@@ -0,0 +1,107 @@
+<template>
+  <div class="left-nav">
+    <h1>
+      <img class="icon" :src="`${publicPath}images/shuohuang/railroad.png`" style="height: 40px;" />
+      <span v-show="!isCollapse" style="padding-left: 6px;">鏈旈粍閾佽矾鏈鸿締鍒嗗叕鍙�</span>
+    </h1>
+    <el-menu
+      class="el-menu-vertical-demo"
+      @open="handleOpen"
+      @close="handleClose"
+      :collapse="isCollapse"
+      @select="handleSelect"
+    >
+      <el-menu-item index="1">
+        <i class="el-icon-menu"></i>
+        <span slot="title">棣栭〉</span>
+      </el-menu-item>
+      <el-menu-item index="searchForVideoAnalyze">
+        <i class="el-icon-menu"></i>
+        <span slot="title">瑙嗛鍒嗘瀽妫�绱�</span>
+      </el-menu-item>
+      <el-menu-item index="taskManage">
+        <i class="el-icon-menu"></i>
+        <span slot="title">浠诲姟绠＄悊</span>
+      </el-menu-item>
+      <el-menu-item index="memberManage">
+        <i class="el-icon-menu"></i>
+        <span slot="title">浜哄憳绠＄悊</span>
+      </el-menu-item>
+      <el-menu-item index="configManage">
+        <i class="el-icon-menu"></i>
+        <span slot="title">閰嶇疆绠＄悊</span>
+      </el-menu-item>
+
+      <el-submenu index="6">
+        <template slot="title">
+          <i class="el-icon-menu"></i>
+          <span slot="title">杞偍绠＄悊</span>
+        </template>
+        <el-menu-item index="transferMemo">瑙嗛杞偍璁板綍</el-menu-item>
+        <el-menu-item index="transferDeviceManage">杞偍璁惧绠＄悊</el-menu-item>
+      </el-submenu>
+      <el-submenu index="7">
+        <template slot="title">
+          <i class="el-icon-menu"></i>
+          <span slot="title">鍙鍖栧ぇ灞�</span>
+        </template>
+        <el-menu-item index="7-1">浠诲姟澶у睆</el-menu-item>
+        <el-menu-item index="7-2">闅愭偅澶у睆</el-menu-item>
+      </el-submenu>
+    </el-menu>
+  </div>
+</template>
+
+<script>
+
+//import railroadImg from '/images/shuohuang/railroad.png';
+export default {
+  props: {
+    isCollapse: {
+      type: Boolean,
+      default: true
+    },
+    menuChange: {
+      type: Function
+    }
+  },
+  data () {
+    return {
+      publicPath: process.env.BASE_URL,
+    }
+  },
+  methods: {
+    handleSelect(index,indePath){
+      this.$emit('menuChange',index);
+    },
+    handleOpen () {
+
+    },
+    handleClose () {
+
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.left-nav {
+  background: #fff;
+  h1 {
+    display: flex;
+    align-items: center;
+    height: 65px;
+    padding: 0 20px;
+    border-bottom: 1px solid #eee;
+    color: rgb(0, 150, 250);
+  }
+  .el-menu-vertical-demo:not(.el-menu--collapse){
+    width: 250px;
+  }
+  .el-menu-item,
+  .el-submenu__title {
+    text-align: left;
+  }
+  height: 100vh;
+}
+</style>
\ No newline at end of file
diff --git a/src/pages/shuohuangMonitorAnalyze/components/memberManage.vue b/src/pages/shuohuangMonitorAnalyze/components/memberManage.vue
new file mode 100644
index 0000000..5d7a0a9
--- /dev/null
+++ b/src/pages/shuohuangMonitorAnalyze/components/memberManage.vue
@@ -0,0 +1,393 @@
+<template>
+  <div class="member-manage">
+    <div class="left">
+      <div>
+        <el-input placeholder="璇疯緭鍏�" v-model="treeWord">
+          <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>
+      <div class="menuList" v-show="showMenu" :style="{top:menuTop+'px',left:menuLeft+'px'}">
+        <ul>
+          <li>鍒涘缓鍚岀骇鑺傜偣</li>
+          <li>鍒犻櫎鑺傜偣</li>
+          <li>閲嶅懡鍚嶈妭鐐�</li>
+          <li>鍏抽棴</li>
+        </ul>
+      </div>
+    </div>
+    <div class="right">
+      <div class="filter-bar">
+        <el-input class="keyword-input" placeholder="濮撳悕/缁勭粐鏈烘瀯/鎵嬫満鍙�" v-model="keyword" size="small"></el-input>
+        <el-select v-model="gender" size="small" placeholder="鎬у埆" style="margin: 0 10px;">
+          <el-option
+            v-for="item in genders"
+            :key="item.id"
+            :value="item.id"
+            :label="item.name"
+          >{{item.name}}</el-option>
+        </el-select>
+        <el-button type="primary" size="small" @click="dataSearch">鏌ヨ</el-button>
+      </div>
+      <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" size="small" @click="batchImport">鎵归噺瀵煎叆</el-button>
+          <el-button type="primary" size="small" @click="uploadPic">涓婁紶鐓х墖</el-button>
+        </div>
+        <el-table class="thbg" :data="tableData" fit ref="elTable">
+          <el-table-column type="selection" width="55"></el-table-column>
+          <el-table-column label="濮撳悕" prop="name" sortable>
+            <template slot-scope="scope">
+              <div style="cursor:pointer;">{{scope.row.name}}</div>
+            </template>
+          </el-table-column>
+          <el-table-column label="鐓х墖" prop="picture">
+            <template>
+              <div></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>
+              <div>
+                <i class="el-icon-edit"></i>
+                <i class="el-icon-delete"></i>
+              </div>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+    </div>
+    <el-dialog
+      :visible="memberEditDialogVisible"
+      class="member-edit-dialog"
+      :append-to-body="false"
+      title="娣诲姞/缂栬緫浜哄憳"
+      @close="memberEditDialogVisible=false"
+    >
+      <div class="text-center">
+        <el-form :model="memberEditForm">
+          <el-form-item>
+            <el-upload
+              class="avatar-uploader"
+              action="https://jsonplaceholder.typicode.com/posts/"
+              :show-file-list="false"
+              :http-request="uploadMemberPic"
+            >
+              <img
+                v-if="memberEditForm.memberPicUrl"
+                :src="memberEditForm.memberPicUrl"
+                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>
+          <el-form-item label="鐓х墖鏍囪瘑:">
+            <el-input v-model="memberEditForm.figure" size="mini"></el-input>
+          </el-form-item>
+          <el-form-item label="濮撳悕:">
+            <el-input v-model="memberEditForm.name" 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-form-item>
+          <el-form-item label="韬唤璇佸彿:">
+            <el-input v-model="memberEditForm.idCard" 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-form-item>
+          <div class="btns">
+            <el-button size="small">鍙栨秷</el-button>
+            <el-button size="small" type="primary">淇濆瓨</el-button>
+          </div>
+        </el-form>
+      </div>
+    </el-dialog>
+    <el-dialog
+      :visible="toggleOrganizeDialogVisible"
+      class="toggle-organize-dialog"
+      :append-to-body="false"
+      title="绉诲姩浜哄憳鍒板叾浠栫粍缁�"
+      @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-input>
+        <div>榛樿缁勭粐</div>
+        <el-tree :data="organizeData" node-key="id" default-expand-all></el-tree>
+        <div slot="footer" class="btns">
+          <el-button size="small">鍙栨秷</el-button>
+          <el-button size="small" type="primary">纭畾</el-button>
+        </div>
+      </div>
+    </el-dialog>
+    <el-dialog
+      :visible="batchImportDialogVisible"
+      class="batch-import-dialog"
+      :append-to-body="false"
+      title="鎵归噺瀵煎叆"
+      @close="batchImportDialogVisible=false"
+    >
+      <div class="text-left">
+        <div class="flex-box">
+          <label>涓婁紶鏂囦欢:</label>
+          <el-upload
+            class="upload-demo batch-upload"
+            action="https://jsonplaceholder.typicode.com/posts/"
+            :on-remove="handleRemove"
+            multiple
+            :limit="3"
+            :http-request="batchImportFiles"
+            :on-exceed="handleExceed"
+            :file-list="fileList"
+          >
+            <el-button size="small" type="primary">鐐瑰嚮涓婁紶</el-button>
+            <div slot="tip" class="el-upload__tip"></div>
+          </el-upload>
+          <p>
+            *璇锋寜鐓ф妯℃澘濉啓淇℃伅锛岀偣鍑讳笅杞芥ā鏉�
+            <a href="javascript:;">.excel</a>
+          </p>
+        </div>
+        <el-table class="thbg" :data="batchImportTableData" fit>
+          <el-table-column type="index" label="搴忓彿"></el-table-column>
+          <el-table-column prop="filename" label="鏂囦欢鍚嶇О"></el-table-column>
+          <el-table-column prop="time" label="涓婁紶鏃堕棿"></el-table-column>
+          <el-table-column prop="state" label="鐘舵��"></el-table-column>
+        </el-table>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+
+import { getShuohuangDepartTree, getOrganizeTree } from '@/api/shuohuang'
+
+export default {
+  data () {
+    return {
+      treeWord: '',
+      treeData: [],
+      showMenu: false,
+      menuTop: 0,
+      menuLeft: 0,
+      keyword: '',
+      gender: '',
+      genders: [{ name: '鐢�', id: 'g0' }, { name: '濂�', id: 'g1' }],
+      tableData: [],
+      organizeData: [],
+      memberEditDialogVisible: false,
+      toggleOrganizeDialogVisible: false,
+      batchImportDialogVisible: false,
+      fileList: [],
+      memberEditForm: {},
+      memberPicUrl: '',
+      batchImportTableData: [],
+    }
+  },
+  mounted () {
+    this.searchLeftTreeData();
+    this.getOrganizeTreeData();
+  },
+  methods: {
+    uploadPic(){
+
+    },
+    batchImportFiles () {
+
+    },
+    handleRemove () {
+
+    },
+    handleExceed () {
+
+    },
+    batchImport () {
+      this.batchImportDialogVisible = true;
+    },
+    toggleOrganize () {
+      this.toggleOrganizeDialogVisible = true;
+    },
+    uploadMemberPic () { },
+    openMenuList (t, l, frame) {
+      this.showMenu = true;
+      this.menuTop = t;
+      this.menuLeft = l;
+    },
+    closeMenuList () {
+      this.showMenu = false;
+    },
+    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;
+        });
+      }
+    },
+    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
+        })
+      })
+    },
+    searchLeftTreeData () {
+      let _this = this;
+      getShuohuangDepartTree().then(res => {
+        _this.treeData = 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
+        })
+      })
+    },
+    addMember () {
+      this.memberEditDialogVisible = true;
+    },
+    dataSearch () {
+
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.member-manage {
+  display: flex;
+  padding: 20px;
+  .avatar-uploader .el-upload {
+    border: 1px dashed #d9d9d9;
+    border-radius: 6px;
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+  }
+  .avatar-uploader .el-upload:hover {
+    border-color: #409eff;
+  }
+  .avatar-uploader-icon {
+    font-size: 28px;
+    color: #8c939d;
+    width: 178px;
+    height: 178px;
+    line-height: 178px;
+    text-align: center;
+  }
+  .avatar {
+    width: 178px;
+    height: 178px;
+    display: block;
+  }
+  .batch-upload{
+    text-align: left;
+    margin: 0 20px 20px 10px;
+  }
+  .member-edit-dialog {
+    .el-dialog {
+      width: 500px;
+      padding: 0 30px;
+      .el-form-item {
+        .el-form-item__label {
+          width: 100px;
+        }
+      }
+    }
+    .el-input {
+      width: 270px;
+    }
+  }
+  .toggle-organize-dialog {
+    .el-dialog {
+      width: 450px;
+      min-height: 500px;
+      .el-dialog__body {
+        padding-bottom: 0;
+        .btns {
+          margin-top: 50px;
+        }
+      }
+    }
+  }
+  .menuList {
+    background: #fff;
+    position: absolute;
+    z-index: 100;
+    width: 180px;
+    text-align: left;
+    border: 1px solid #ccc;
+  }
+  .menuList li {
+    line-height: 28px;
+    height: 28px;
+    padding-left: 24px;
+    background: #fff;
+  }
+  .menuList li:hover {
+    background: rgba(152, 170, 190, 0.7);
+  }
+  .right {
+    padding: 8px 0 0 20px;
+    .filter-bar {
+      display: flex;
+      margin-bottom: 20px;
+      .keyword-input {
+        width: 300px;
+      }
+    }
+    .table-area {
+      .actions {
+        text-align: left;
+      }
+      
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/pages/shuohuangMonitorAnalyze/components/searchForVideoAnalyze.vue b/src/pages/shuohuangMonitorAnalyze/components/searchForVideoAnalyze.vue
new file mode 100644
index 0000000..f1478cb
--- /dev/null
+++ b/src/pages/shuohuangMonitorAnalyze/components/searchForVideoAnalyze.vue
@@ -0,0 +1,943 @@
+<template>
+  <div class="search-for-video-analyze">
+    <div class="filter-area">
+      <div class="input-area">
+        <el-input
+          class="search-input"
+          size="small"
+          v-model="keyword"
+          placeholder="璇疯緭鍏ュ徃鏈恒�佽溅娆°�佹満杞﹀彿绛夊叧閿瘝杩涜鎼滅储"
+        ></el-input>
+        <el-date-picker
+          v-model="searchTime"
+          type="datetimerange"
+          size="small"
+          :picker-options="pickerOptions"
+          range-separator="鑷�"
+          start-placeholder="寮�濮嬫棩鏈�"
+          end-placeholder="缁撴潫鏃ユ湡"
+          align="right"
+        ></el-date-picker>
+        <el-button size="small" type="primary" @click="dataSearch">鎼滅储</el-button>
+      </div>
+      <div class="checked-config">
+        <span style="margin-top:3px;">宸查�夋潯浠�:</span>
+        <span
+          v-show="!checkedConfigs.length"
+          class="tip"
+          style="padding-left: 5px;margin-top:3px;"
+        >杩樻湭閫夋嫨绛涢�夋潯浠�</span>
+        <div class="config-item" v-for="(config,index) in checkedConfigs" :key="index">
+          <span class="title">{{config.title}}</span>&nbsp;:
+          <span class="val" v-for="option in config.data" :key="option.id">
+            <!-- <template>
+              <div>
+                
+              </div>
+            </template>-->
+            <span v-if="option.isChecked" class="val-show">
+              {{option.name}}
+              <i>銆�</i>
+            </span>
+          </span>
+          <i class="el-icon-close remove" @click="removeCheckedConfig(config)"></i>
+        </div>
+        <el-button
+          class="clear-config-btn"
+          v-if="checkedConfigs.length"
+          size="mini"
+          @click="clearCheckedConfigs"
+        >鍙栨秷閫夋嫨</el-button>
+      </div>
+      <div class="optional-config">
+        <div class="config" v-for="(config,index) in optionalConfigs" :key="index">
+          <template v-show="config.isShow">
+            <div class="title">{{config.title}}</div>
+            <div class="options-wrap">
+              <div
+                class="options"
+                :ref="'options'+config.id"
+                :style="{height:fixedOneLineHeight+'px'}"
+              >
+                <div class="option" v-for="(option,index) in config.data" :key="index">
+                  <div v-show="config.isMultCheck">
+                    <el-checkbox v-model="option.isChecked"></el-checkbox>
+                    <span>{{option.name}}</span>
+                  </div>
+                  <div v-show="!config.isMultCheck" @click="checkOption(config,option)">
+                    <span>{{option.name}}</span>
+                  </div>
+                </div>
+              </div>
+              <div class="btns text-center" v-show="config.isMultCheck">
+                <el-button size="mini" @click="cancleMultCheck(config)">鍙栨秷</el-button>
+                <el-button size="mini" type="primary" @click="checkOption(config)">纭畾</el-button>
+              </div>
+            </div>
+            <div class="right-btns">
+              <div class="more" v-if="config.showMore" @click="showMore(config)">
+                <span>鏇村</span>&nbsp;
+                <i :class="config.isShowMore?'el-icon-arrow-up':'el-icon-arrow-down'"></i>
+              </div>
+              <div
+                :class="[{'checked':config.isMultCheck},'multCheck']"
+                @click="toggleMultCheck(config)"
+              >
+                <i class="el-icon-plus"></i>&nbsp;
+                <span>澶氶��</span>
+              </div>
+            </div>
+          </template>
+        </div>
+        <div class="config">
+          <div class="title">楂樼骇閫夐」</div>
+          <div>
+            <el-menu class="el-menu-demo" mode="horizontal" @select="handleSelect">
+              <el-submenu
+                class="config-submenu"
+                :popper-append-to-body="false"
+                v-for="(config,index) in highLevelConfigs"
+                :key="index"
+                :index="index+''"
+              >
+                <template slot="title">{{config.title}}</template>
+                <el-menu-item
+                  v-for="(option,ind) in config.data"
+                  :key="ind"
+                  :index="index+'-'+ind"
+                  @click="checkOption(config,option)"
+                >{{option.name}}</el-menu-item>
+              </el-submenu>
+            </el-menu>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="data-list">
+      <div class="header-bar clearfix">
+        <div class="left">
+          <div>
+            <el-select v-model="watch" size="mini">
+              <el-option value label="鍏ㄩ儴"></el-option>
+              <el-option value="1" label="鏈叧娉�"></el-option>
+              <el-option value="2" label="宸插叧娉�"></el-option>
+            </el-select>
+          </div>
+          <div>
+            <el-select v-model="settle" size="mini">
+              <el-option value label="鍏ㄩ儴"></el-option>
+              <el-option value="1" label="鏈鐞�"></el-option>
+              <el-option value="2" label="宸插鐞�"></el-option>
+            </el-select>
+          </div>
+        </div>
+        <div class="right">
+          <div class="show-type">
+            <div class="type menu" :class="{'current':showType=='menu'}" @click="checkType('menu')">
+              <i class="el-icon-menu"></i>
+            </div>
+            <div class="type" :class="{'current':showType=='list'}" @click="checkType('list')">
+              <i class="el-icon-s-operation"></i>
+            </div>
+          </div>
+        </div>
+      </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">
+            <div class="card">
+              <div class="video-wrap" @click="checkVideo(data)">
+                <video src></video>
+              </div>
+              <div class="video-info">
+                <div class="base-info">
+                  <div>
+                    <label>杞﹀彿:</label>
+                    <span>{{data.no}}</span>
+                  </div>
+                  <div>
+                    <label>杞︽:</label>
+                    <span>{{data.frequency}}</span>
+                  </div>
+                  <div>
+                    <label>鏃堕棿:</label>
+                    <span>{{data.time}}</span>
+                  </div>
+                  <div>
+                    <label>鍙告満|鍓徃鏈�:</label>
+                    <span>{{data.driver}}</span>
+                  </div>
+                </div>
+                <div class="mark-info">
+                  <div class="abnormal" v-if="data.markType==1">
+                    <span v-for="(mark,index) in data.marks" :key="index">{{mark}}</span>
+                  </div>
+                  <div v-else>
+                    <span>鏃犲紓甯�</span>
+                  </div>
+                </div>
+                <div class="tag-info">
+                  <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>
+            </div>
+          </el-col>
+        </el-row>
+        <el-pagination
+          background
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+          :current-page.sync="curTabPage"
+          :page-size="tabPageSize"
+          layout="total, 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">
+            <template slot-scope="scope">
+              <div style="cursor:pointer;">{{scope.row.name}}</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="鎿嶄綔">
+            <template>
+              <div class="operation">
+                <i class="el-icon-star-off" style="font-size: 18px;"></i>
+              </div>
+            </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"
+          @current-change="handleCurrentChange"
+          :current-page.sync="curTablePage"
+          :page-size="tablePageSize"
+          layout="total, prev, pager, next"
+          :total="tableTotal">
+        </el-pagination>
+      </div>
+      <el-dialog
+        class="dialog-video"
+        :visible="videoDialogVisible"
+        @close="videoDialogVisible=false"
+        :append-to-body="false"
+      >
+        <div slot="title" class="title">
+          <div class="center">
+            <i class="el-icon-connection"></i>
+            <span>鎾斁瑙嗛</span>
+          </div>
+        </div>
+        <div class="content">
+          <div class="content-top">
+            <div class="grid-check">
+              <span
+                :class="guid === 1 ? 'iconfont icongongge1 activegongge':'iconfont icongongge1'"
+                @click="setGuid(1)"
+              ></span>
+              <span
+                :class="guid === 2 ? 'iconfont icongongge activegongge':'iconfont icongongge'"
+                @click="setGuid(2)"
+              ></span>
+              <span
+                :class="guid === 3 ? 'iconfont icongongge2 activegongge':'iconfont icongongge2'"
+                @click="setGuid(3)"
+              ></span>
+            </div>
+            <div class="video-area">
+              <div class="info-list block">
+                <p class="title-partment">鐩稿叧瑙嗛</p>
+                <!-- <div class="video-name" v-for="video in videoDetails.videoList" :key="video.id">
+                  <i class="el-icon-film"></i>
+                  <span>{{video.name}}</span>
+                </div>-->
+                <div class="video-name">
+                  <i class="el-icon-film"></i>
+                  <span>椹鹃┒瀹�</span>
+                </div>
+                <div class="video-name">
+                  <i class="el-icon-film"></i>
+                  <span>鏈烘埧</span>
+                </div>
+              </div>
+              <div class="players">
+                <div class="video-item" 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;">
+                <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-button
+                  icon="el-icon-plus"
+                  size="mini"
+                  v-show="hiddenDanger==2"
+                  type="primary"
+                  @click="addLabel(videoDetails)"
+                >娣诲姞鏍囨敞</el-button>
+              </div>
+            </div>
+            <div class="bot-right block">
+              <p class="title-partment">瑙嗛璇︽儏</p>
+              <div class="base-info">
+                <div>
+                  <label>杞﹀彿:</label>
+                  <span>{{videoDetails.no}}</span>
+                </div>
+                <div>
+                  <label>杞︽:</label>
+                  <span>{{videoDetails.frequency}}</span>
+                </div>
+                <div>
+                  <label>鏃堕棿:</label>
+                  <span>{{videoDetails.time}}</span>
+                </div>
+                <div>
+                  <label>鍙告満|鍓徃鏈�:</label>
+                  <span>{{videoDetails.driver}}</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </el-dialog>
+      <el-dialog
+        class="label-dialog"
+        :visible="labelDialogVisible"
+        @close="labelDialogVisible=false"
+        :append-to-body="false"
+      >
+        <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-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>
+        </div>
+      </el-dialog>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getlstInit } from '@/api/shuohuang';
+
+export default {
+  data () {
+    return {
+      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,
+      tabTotal: 0,
+      tablePageSize: 8,
+      tableTotal: 0,
+      currentPage: 1,
+      pickerOptions: {
+        shortcuts: [{
+          text: '浠婂ぉ',
+          onClick (picker) {
+            const end = new Date();
+            const start = new Date();
+            start.setHours(0, 0, 0);
+            picker.$emit('pick', [start, end]);
+          }
+        }, {
+          text: '鏄ㄥぉ',
+          onClick (picker) {
+            const end = new Date();
+            const start = new Date();
+            start.setTime(start.getTime() - 3600 * 1000 * 24);
+            start.setHours(0, 0, 0);
+            end.setTime(end.getTime() - 3600 * 1000 * 24);
+            end.setHours(23, 59, 59);
+            picker.$emit('pick', [start, end]);
+          }
+        }, {
+          text: '杩戜笁澶�',
+          onClick (picker) {
+            const end = new Date();
+            const start = new Date();
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 3);
+            picker.$emit('pick', [start, end]);
+          }
+        }, {
+          text: '杩戜竴鍛�',
+          onClick (picker) {
+            const end = new Date();
+            const start = new Date();
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
+            //start.setHours(0,0,0);
+            picker.$emit('pick', [start, end]);
+          }
+        }]
+      },
+      checkedConfigs: [],
+      optionalConfigs: [],
+      highLevelConfigs: [],
+      fixedOneLineHeight: 40,
+      watch: '',
+      settle: '',
+      showType: 'menu',
+      tableData: [
+        { 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: [
+        { 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 }
+      ],
+
+      videoDialogVisible: false,
+      videoDetails: {},
+      guid: 1,
+      videoWrapArr: [],
+      hiddenDanger: 1,
+      labelDialogVisible: false,
+      labelOptions: [{ id: 'whh', name: '鏈懠鍞ゃ�佸懠鍞や笉鏍囧噯' }, { id: 'jsbz', name: '绮剧涓嶆尟銆佽繍琛屼腑鐫¤' }, { id: 'xxsj', name: '瀛︿範鍙告満鏈簲绛�' }, { id: 'myhb', name: '娌℃湁鍚庨儴鐬湜銆佷笉鎸夎瀹氬仛闃叉簻鎺柦' }],
+      labelCheckedList: [],
+    }
+  },
+  mounted () {
+    // let mockConfigs = [
+    //   { id: 'jch', isHighLevel: false, title: '鏈鸿溅鍙�', data: [{ name: '鍏ㄩ儴', id: '' }, { name: 'K24', id: 'k24' }, { name: 'G172', id: 'g172' }, { name: 'K254', id: 'k254' }, { name: 'K264', id: 'k264' }, { name: 'G132', id: 'g132' }, { name: 'K257', id: 'k257' }, { name: 'K269', id: 'k269' }, { name: 'G176', id: 'g176' }, { name: 'G137', id: 'g137' }, { name: 'K297', id: 'k297' }, { name: 'K209', id: 'k209' }, { name: 'G777', id: 'g777' }, { name: 'G337', id: 'g337' }, { name: 'K277', id: 'k277' }, { name: 'K299', id: 'k299' }, { name: 'G866', id: 'g866' }, { name: 'K877', id: 'k877' }, { name: 'K699', id: 'k699' }, { name: 'G906', id: 'g906' }, { name: 'L677', id: 'l677' }, { name: 'M987', id: 'm987' }] },
+    //   { id: 'cc', isHighLevel: false, title: '杞︽', data: [{ name: '鍏ㄩ儴', id: '' }, { name: 'SS344', id: 'SS344' }, { name: 'SS345', id: 'SS345' }, { name: 'SS765', id: 'SS765' }, { name: 'SS776', id: 'SS776' }, { name: 'SS676', id: 'SS676' }, { name: 'SS876', id: 'SS876' }, { name: 'SS779', id: 'k779' }, { name: 'SS976', id: 'SS976' },] },
+    //   { id: 'sj', isHighLevel: true, title: '鍙告満', data: [{ name: '寮犱笁', id: 'zs' }, { name: '鏉庢柉', id: "ls" }, { name: '鏉庢柉鐗�', id: "lst" }] },
+    //   { id: 'lk', isHighLevel: true, title: '璺喌', data: [{ name: '鏍囩ず鐗�', id: 'bsp' }, { name: '淇″彿鏈�', id: "xhj" }, { name: '寮亾', id: "wd" }] }
+    // ];
+
+    // mockConfigs.forEach(config => {
+    //   this.$set(config, 'isShow', true);
+    //   config.data.forEach(item => {
+    //     this.$set(item, 'isChecked', false);
+    //   })
+    //   if (config.isHighLevel) {
+    //     this.highLevelConfigs.push(config);
+    //   } else {
+    //     this.$set(config, 'isMultCheck', false);
+    //     this.$set(config, 'showMore', false);
+    //     this.optionalConfigs.push(config);
+    //   }
+    // })
+    // this.$nextTick(() => {
+    //   this.optionalConfigs.forEach(config => {
+    //     if (this.$refs[`options${config.id}`][0].scrollHeight > this.fixedOneLineHeight) {
+    //       config.showMore = true;
+    //       this.$set(config, 'isShowMore', false);
+    //     } else {
+    //       config.showMore = false;
+    //     }
+    //   });
+    //   console.log(this.optionalConfigs);
+    // });
+    this.init();
+  },
+  methods: {
+    handleSizeChange(){
+
+    },
+    handleCurrentChange(){
+
+    },
+    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'
+      };
+      this.optionalConfigs = [];
+      this.highLevelConfigs = [];
+      getlstInit(query).then(res => {
+        debugger
+        if(_this.showType=='list'){
+          _this.tableTotal = res.total;
+        }else{
+          _this.tabTotal = res.total;
+        }
+
+        res.filterlst.forEach(config => {
+          this.$set(config, 'isShow', true);
+          config.data = Object.keys(config.Node).map(key => {
+            let obj = {};
+            obj.name = key;
+            obj.id = config.Node[key]
+            // item.id = item;
+            // item.name = k;
+            return obj
+          });
+          config.id = config.ID;
+          config.title = config.NameZn;
+          config.data.forEach(item => {
+            this.$set(item, 'isChecked', false);
+          });
+          if (config.IsAdvanced) {
+            this.highLevelConfigs.push(config);
+          } else {
+            this.$set(config, 'isMultCheck', false);
+            this.$set(config, 'showMore', false);
+            this.optionalConfigs.push(config)
+          }
+        });
+        this.$nextTick(() => {
+          this.optionalConfigs.forEach(config => {
+            if (this.$refs[`options${config.id}`][0].scrollHeight > this.fixedOneLineHeight) {
+              config.showMore = true;
+              this.$set(config, 'isShowMore', false);
+            } else {
+              config.showMore = false;
+            }
+          });
+          console.log(this.optionalConfigs);
+        });
+      })
+    },
+    delLabelChecked () {
+
+    },
+    cancelLabelChecked () {
+
+    },
+    submitLabelChecked () {
+
+    },
+    addLabel (videoDetails) {
+      debugger
+      this.labelDialogVisible = true;
+
+    },
+    setGuid (guid) {
+      this.videoWrapArr = Math.pow(guid, 2);
+
+    },
+    checkVideo (data) {
+      this.videoDialogVisible = true;
+      this.videoDetails = data;
+
+    },
+    checkFollow () {
+
+    },
+    checkType (type) {
+      this.showType = type;
+      this.init();
+    },
+    clearCheckedConfigs () {
+      this.checkedConfigs = [];
+    },
+    removeCheckedConfig (config) {
+      let index = this.checkedConfigs.findIndex(one => one.id == config.id);
+      this.checkedConfigs.splice(index, 1);
+    },
+    checkOption (config, option) {
+      if (option) {
+        option.isChecked = true;
+      }
+      this.checkedConfigs.push(config);
+
+      //config.isShow = false;
+
+      // this.dataSearch();
+      this.$nextTick(() => {
+        config.isShow = false;
+      })
+
+    },
+
+    cancleMultCheck (config) {
+      config.isMultCheck = false;
+      config.data.forEach(opt => {
+        opt.isChecked = false;
+      });
+    },
+    handleSelect (key, keyPath) {
+
+    },
+    showMore (config) {
+      config.isShowMore = !config.isShowMore;
+      this.$refs[`options${config.id}`][0].style.height = config.isShowMore ? this.$refs[`options${config.id}`][0].scrollHeight + 'px' : this.fixedOneLineHeight + 'px';
+    },
+    toggleMultCheck (config) {
+      config.isMultCheck = !config.isMultCheck;
+      this.optionalConfigs.forEach(conf => {
+        if (conf.id == config.id) {
+          return;
+        }
+        conf.isMultCheck = false;
+      })
+    },
+    dataSearch () {
+      console.log(this.checkedConfigs);
+      this.$forceUpdate();
+    },
+
+  }
+}
+</script>
+
+<style lang="scss">
+.search-for-video-analyze {
+  padding: 20px 30px;
+  .filter-area {
+    .input-area {
+      display: flex;
+      align-items: center;
+      height: 50px;
+      .search-input {
+        width: 408px;
+      }
+      .el-date-editor {
+        margin: 0 20px;
+      }
+    }
+    .checked-config {
+      display: flex;
+      text-align: left;
+      margin-bottom: 10px;
+      position: relative;
+      .config-item {
+        padding-left: 10px;
+        margin: 0 0 5px 5px;
+        background: #f3f3f3;
+        border: 1px solid #ddd;
+        .remove {
+          cursor: pointer;
+          padding: 5px 5px;
+          margin-left: 5px;
+        }
+        &:hover {
+          background: #fff;
+          border-color: #3d68e1;
+          .remove {
+            background: #3d68e1;
+            color: #fff;
+          }
+        }
+        .val-show {
+          &:last-child {
+            i {
+              display: none;
+            }
+          }
+        }
+      }
+      .clear-config-btn {
+        position: absolute;
+        right: 0;
+      }
+    }
+    .optional-config {
+      .config {
+        display: flex;
+        flex-wrap: no-wrap;
+        cursor: pointer;
+        border-bottom: 1px solid #ddd;
+        .title {
+          padding: 10px 20px;
+          width: 100px;
+          text-align: left;
+          background: #f3f3f3;
+        }
+        .options-wrap {
+          flex: 1;
+          .options {
+            display: flex;
+            flex-wrap: wrap;
+            height: 40px;
+            overflow: hidden;
+            .option {
+              padding: 10px 20px;
+              height: 20px;
+              line-height: 20px;
+              &:hover {
+                color: #6486e7;
+              }
+              .el-checkbox {
+                padding-right: 6px;
+              }
+            }
+          }
+          .btns {
+            margin: 20px 0;
+          }
+        }
+        .right-btns {
+          width: 158px;
+          display: flex;
+          user-select: none;
+          justify-content: flex-end;
+          .more {
+            margin-top: 6px;
+            padding: 0px 12px;
+            border: 1px solid #ccc;
+            margin-right: 10px;
+            width: 48px;
+            height: 26px;
+            line-height: 26px;
+            &:hover {
+              color: #6486e7;
+            }
+          }
+          .multCheck {
+            margin-top: 6px;
+            width: 48px;
+            height: 26px;
+            line-height: 26px;
+            padding: 0px 12px;
+            border: 1px solid #ccc;
+            &:hover {
+              color: #6486e7;
+              border-color: #6486e7;
+            }
+            &.checked {
+              color: #3d68e1;
+              border-color: #3d68e1;
+            }
+          }
+        }
+        .el-menu.el-menu--horizontal {
+          border: none;
+        }
+        .config-submenu {
+          .el-submenu__title {
+            height: 40px;
+            line-height: 40px;
+            border: none;
+          }
+          .el-menu--popup {
+            display: flex;
+            width: 900px;
+            li.el-menu-item {
+              display: inline-block;
+              min-width: auto;
+            }
+          }
+        }
+      }
+    }
+    .tip {
+      color: #ccc;
+    }
+  }
+  .data-list {
+    margin-top: 20px;
+    .header-bar {
+      padding-bottom: 5px;
+      border-bottom: 1px solid #ddd;
+      .left {
+        float: left;
+        display: flex;
+        > div {
+          margin-right: 10px;
+        }
+      }
+      .right {
+        float: right;
+        display: flex;
+        .show-type {
+          display: flex;
+          .type {
+            font-size: 20px;
+            padding: 2px 5px;
+            cursor: pointer;
+            border: 1px solid #eee;
+            border-radius: 3px;
+            &.menu {
+              margin-right: 10px;
+            }
+            &.current {
+              border-color: #3d68e1;
+            }
+          }
+        }
+      }
+    }
+    .content {
+      padding-top: 14px;
+      .el-col {
+        margin-bottom: 10px;
+      }
+      .card {
+        cursor: pointer;
+        position: relative;
+        text-align: left;
+        border: 1px solid #dedede;
+        border-radius: 5px;
+        .video-wrap {
+          background: aliceblue;
+          border-radius: 3px;
+          video {
+            border-radius: 3px;
+          }
+        }
+        .video-info {
+          padding: 10px;
+          .base-info {
+            > div {
+              margin-bottom: 5px;
+            }
+            label {
+              color: #999;
+              padding-right: 8px;
+            }
+          }
+          .mark-info {
+            margin: 10px 0;
+            color: #3d68e1;
+            .abnormal {
+              color: red;
+            }
+          }
+          .tag-info {
+            color: #999;
+            display: flex;
+            .tag {
+              padding: 2px 5px;
+              margin-right: 10px;
+              border-radius: 3px;
+              border: 1px solid #eee;
+            }
+          }
+        }
+        .star {
+          position: absolute;
+          font-size: 20px;
+          right: 10px;
+          bottom: 10px;
+          .follow {
+            color: #3d68e1;
+          }
+        }
+      }
+      .el-table {
+        border: 1px solid #dedede;
+        th {
+          background: #f5f5f5;
+          color: #333;
+        }
+        .operation {
+          cursor: pointer;
+        }
+      }
+    }
+    .dialog-video {
+      .el-dialog {
+        width: 1180px;
+      }
+      .el-dialog__body {
+        background: #f5f5f5;
+        padding: 0;
+      }
+      .title-partment {
+        font-size: 14px;
+        color: #333;
+        line-height: 18px;
+        margin-bottom: 8px;
+      }
+      .block {
+        background: #fff;
+        padding: 10px;
+        border-radius: 3px;
+      }
+      .title {
+        font-size: 18px;
+      }
+      .content {
+        padding: 15px;
+        text-align: left;
+        .content-top {
+          margin-bottom: 10px;
+          .grid-check {
+            text-align: right;
+            margin-bottom: 6px;
+            span {
+              font-size: 20px;
+              color: #cacaca;
+              padding-left: 12px;
+              cursor: pointer;
+            }
+          }
+          .video-area {
+            display: flex;
+            .info-list {
+              width: 160px;
+              margin-right: 10px;
+              .video-name {
+                color: #666;
+                margin-bottom: 10px;
+                &.current {
+                  color: #3d68e1;
+                }
+                i {
+                  padding-right: 4px;
+                }
+              }
+            }
+            .players {
+              width: 960px;
+              height: 540px;
+              display: flex;
+              .video-item {
+                flex: 1;
+                background: black;
+                border: 1px solid #fff;
+              }
+            }
+          }
+        }
+        .content-bottom {
+          display: flex;
+          .bot-left {
+            flex: 1;
+          }
+          .bot-right {
+            width: 210px;
+            margin-left: 10px;
+            label {
+              color: #999;
+              padding-right: 8px;
+            }
+          }
+        }
+      }
+    }
+    .label-dialog {
+      .el-dialog {
+        width: 700px;
+        .label-check {
+          min-height: 400px;
+          margin-bottom: 20px;
+          .el-checkbox-group {
+            display: flex;
+            flex-wrap: wrap;
+            > label {
+              width: 50%;
+              text-align: left;
+              margin: 0;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/pages/shuohuangMonitorAnalyze/components/taskManage.vue b/src/pages/shuohuangMonitorAnalyze/components/taskManage.vue
new file mode 100644
index 0000000..9374856
--- /dev/null
+++ b/src/pages/shuohuangMonitorAnalyze/components/taskManage.vue
@@ -0,0 +1,279 @@
+<template>
+  <div class="tab-task-manage">
+    <div class="top">
+      <div class="top-left partment">
+        <div class="header">
+          <div class="title">瑙嗛鍒楄〃</div>
+        </div>
+        <div class="body">
+          <div class="flex-box">
+            <div>
+              <el-date-picker
+                v-model="videoSearchTime"
+                type="datetimerange"
+                size="mini"
+                :picker-options="pickerOptions"
+                range-separator="鑷�"
+                start-placeholder="寮�濮嬫棩鏈�"
+                end-placeholder="缁撴潫鏃ユ湡"
+                align="right"
+              ></el-date-picker>
+            </div>
+            <div>
+              <el-input
+                class="keyword-input"
+                v-model="videoListSearchWord"
+                placeholder="璇疯緭鍏ユ満杞﹀彿锛屽涓敤','鍒嗛殧"
+                size="mini"
+                style="margin: 0 10px;"
+              ></el-input>
+            </div>
+            <div></div>
+            <el-button
+              type="primary"
+              @click="searchVideoList"
+              size="mini"
+              style="margin-right:10px;"
+            >鎼滅储</el-button>
+            <el-checkbox v-model="isShowUndistributedOnly">浠呮樉绀烘湭鍒嗛厤</el-checkbox>
+          </div>
+          <div class="video-list">
+            <el-collapse v-model="actCollapseName">
+              <el-collapse-item :name="trainNo.id" v-for="trainNo in trainNoList" :key="trainNo.id">
+                <template slot="title">
+                  <div>
+                    <el-checkbox v-model="trainNo.checked" style="padding-right:10px;"></el-checkbox>
+                    <span>{{trainNo.no}}({{trainNo.videos.length}})</span>
+                  </div>
+                </template>
+                <div v-for="video in trainNo.videos" :key="video.id">
+                  <i class="el-icon-film" style="margin-left: 20px;"></i>
+                  <span style="padding-left: 10px;">{{video.name}}</span>
+                </div>
+              </el-collapse-item>
+            </el-collapse>
+          </div>
+        </div>
+      </div>
+      <div class="top-right partment">
+        <div class="header">
+          <div class="title">浜哄憳鍒楄〃</div>
+        </div>
+        <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>
+          </div>
+          <div class="person-list">
+            <div class="person" v-for="person in personList" :key="person.id">
+              <el-checkbox v-model="person.personChecked">{{person.name}}</el-checkbox>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="devide"></div>
+    <div class="bot">
+      <div class="header">
+        <div class="title">浠诲姟鍒楄〃</div>
+        <div class="header-right flex-box">
+          <el-radio-group v-model="taskType" size="mini">
+            <el-radio-button label="1">寰呭垎閰�</el-radio-button>
+            <el-radio-button label="2">宸插垎閰�</el-radio-button>
+          </el-radio-group>
+          <el-input
+            class="keyword-input"
+            placeholder="璇疯緭鍏�"
+            v-model="keyWordOfTask"
+            size="mini"
+            style="margin-left: 10px;"
+          >
+            <el-button slot="append" icon="el-icon-search" @click="searchTask"></el-button>
+          </el-input>
+        </div>
+      </div>
+      <div class="body table-area">
+        <div class="actions">
+          <el-button type="primary" size="small" @click="distributeTask">鍒嗛厤浠诲姟</el-button>
+        </div>
+        <el-table class="thbg" :data="taskTableData" ref="elTable">
+          <el-table-column type="expand">
+            <template slot-scope="props">
+              <div class="video-item" v-for="video in props.videos" :key="video.id">{{video.name}}</div>
+            </template>
+          </el-table-column>
+          <el-table-column prop="trainNo" label="鏈鸿溅鍙�"></el-table-column>
+          <el-table-column label="瑙嗛鏁伴噺">
+            <template slot-scope="scope">
+              <div>{{scope.row.videos.length}}</div>
+            </template>
+          </el-table-column>
+          <el-table-column prop="person" label="鍒嗛厤浜�"></el-table-column>
+          <el-table-column prop="time" label="鍒嗛厤鏃堕棿"></el-table-column>
+          <el-table-column prop="handle" label="澶勭悊浜�"></el-table-column>
+          <el-table-column label="鎿嶄綔">
+            <template slot-scope="scope">
+              <div class="operation">
+                <span @click="cancelDistribute(scope.row)">鍙栨秷鍒嗛厤/鎸囨淳</span>
+                <span @click="toggleCollapse(scope.row)">鏌ョ湅/闅愯棌杞︽</span>
+              </div>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      taskType: '1',
+      keyWordOfTask: '',
+      videoSearchTime: [],
+      pickerOptions: {
+        shortcuts: [{
+          text: '浠婂ぉ',
+          onClick (picker) {
+            const end = new Date();
+            const start = new Date();
+            start.setHours(0, 0, 0);
+            picker.$emit('pick', [start, end]);
+          }
+        }, {
+          text: '鏄ㄥぉ',
+          onClick (picker) {
+            const end = new Date();
+            const start = new Date();
+            start.setTime(start.getTime() - 3600 * 1000 * 24);
+            start.setHours(0, 0, 0);
+            end.setTime(end.getTime() - 3600 * 1000 * 24);
+            end.setHours(23, 59, 59);
+            picker.$emit('pick', [start, end]);
+          }
+        }, {
+          text: '杩戜竴鍛�',
+          onClick (picker) {
+            const end = new Date();
+            const start = new Date();
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
+            //start.setHours(0,0,0);
+            picker.$emit('pick', [start, end]);
+          }
+        }]
+      },
+      isShowUndistributedOnly: false,
+      trainNoList: [
+        { no: 'SS4B115', id: 'SS4B115', videos: [{ id: 'SS4B115', name: 'SS4B115_06_B鑺備簩绔徃鏈哄_20201115_091500.mp4' }, { id: 'SS4B116', name: 'SS4B116_06_B鑺備簩绔徃鏈哄_20201115_091500.mp4' }] },
+        { no: 'SS5B115', id: 'SS5B115', videos: [{ id: 'SS5B116', name: 'SS5B116_06_B鑺備簩绔徃鏈哄_20201115_091500.mp4' }] }
+      ],
+      videoListSearchWord: '',
+      actCollapseName: '',
+      username: '',
+      personList: [
+        { name: '寮犱笁', id: 'zs' },
+        { name: '鏉庢柉', id: 'ls' }
+      ],
+      taskTableData: [],
+    }
+  },
+  mounted () {
+
+  },
+  methods: {
+    distributeTask () {
+
+    },
+    searchVideoList () {
+
+    },
+    searchPerson () {
+
+    },
+    searchTask () {
+
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.tab-task-manage {
+  .partment {
+    border: 1px solid #e8e8e8;
+    border-radius: 3px;
+    .header {
+      background: #fafafa;
+      border-bottom: 1px solid #e8e8e8;
+    }
+  }
+  .header {
+    height: 40px;
+    .title {
+      float: left;
+      padding-left: 20px;
+      height: 40px;
+      line-height: 40px;
+      font-size: 14px;
+      font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC';
+    }
+    .header-right {
+      float: right;
+    }
+  }
+  .body {
+    padding: 14px 20px 20px;
+  }
+  .flex-box {
+    align-items: center;
+    & > label {
+      padding-right: 8px;
+    }
+  }
+  .keyword-input {
+    width: 260px;
+  }
+  .top {
+    display: flex;
+    padding: 20px;
+    margin-bottom: 10px;
+    .top-left {
+      flex: 1;
+      margin-right: 10px;
+      .video-list {
+        margin-top: 14px;
+        text-align: left;
+      }
+    }
+    .top-right {
+      width: 360px;
+      .person-list {
+        padding-top: 14px;
+        .person {
+          text-align: left;
+          margin-bottom: 10px;
+          padding-bottom: 6px;
+          border-bottom: 1px solid #eee;
+        }
+      }
+    }
+  }
+  .devide {
+    height: 10px;
+    background: #f5f5f5;
+  }
+  .bot {
+    padding: 20px;
+    .table-area {
+      .actions {
+        text-align: left;
+      }
+      
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/pages/shuohuangMonitorAnalyze/components/topNav.vue b/src/pages/shuohuangMonitorAnalyze/components/topNav.vue
new file mode 100644
index 0000000..67805cd
--- /dev/null
+++ b/src/pages/shuohuangMonitorAnalyze/components/topNav.vue
@@ -0,0 +1,35 @@
+<template>
+  <div class="top-nav">
+    <div class="search-area">
+      <i class="el-icon-search"></i>
+    </div>
+    <div class="notify">
+      <i class="el-icon-bell"></i>
+    </div>
+    <div class="user-area">
+      <img src alt />
+      username
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style lang="scss">
+.top-nav {
+  display: flex;
+  height: 64px;
+  padding-right: 20px;
+  justify-content: flex-end;
+  align-items: center;
+  cursor: pointer;
+  i[class^='el-icon-']{
+    font-size: 20px;
+    padding: 14px;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/pages/shuohuangMonitorAnalyze/components/transferDeviceManage.vue b/src/pages/shuohuangMonitorAnalyze/components/transferDeviceManage.vue
new file mode 100644
index 0000000..3665b38
--- /dev/null
+++ b/src/pages/shuohuangMonitorAnalyze/components/transferDeviceManage.vue
@@ -0,0 +1,124 @@
+<template>
+  <div class="transfer-device-manage">
+    <div class="general-view">
+      <div
+        class="indicator"
+        :class="{'lastOne':index==generalIndicators.length-1}"
+        v-for="(indicator,index) in generalIndicators"
+        :key="indicator.id"
+      >
+        <div class="title">
+          <span class="dot"></span>
+          <span class="word">{{indicator.title}}</span>
+        </div>
+        <div class="indicator-val">{{indicator.val}}</div>
+      </div>
+    </div>
+    <div class="table-area">
+      <div class="filter-bar flex-box">
+        <div>
+          <label>璁惧鍦板潃:</label>
+          <div>
+            <el-input v-model="deviceAddr" size="small"></el-input>
+          </div>
+        </div>
+        <div>
+          <label>璁惧鐘舵��:</label>
+          <div>
+            <el-select v-model="deviceState" size="small">
+              <el-option></el-option>
+            </el-select>
+          </div>
+        </div>
+        <div class="btns">
+          <el-button type="primary" size="small">鏌ヨ</el-button>
+        </div>
+      </div>
+      <el-table class="thbg" :data="tableData" fit>
+        <el-table-column prop="name" label="杞偍璁惧鍚嶇О"></el-table-column>
+        <el-table-column prop="state" label="璁惧鐘舵��"></el-table-column>
+        <el-table-column prop="pic" label="鐜板満鍥剧墖"></el-table-column>
+        <el-table-column prop="addr" label="璁惧鍦板潃"></el-table-column>
+        <el-table-column prop="tel" label="鎶ヤ慨鐢佃瘽"></el-table-column>
+        <el-table-column label="鎿嶄綔">
+          <template slot-scope="scope">
+            <div class="operation">
+              <span @click="checkSlot(scope.row)">鏌ョ湅鎻掓Ы</span>
+            </div>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+
+  data () {
+    return {
+      generalIndicators: [{ id: 'gz', title: '鏈夋晠闅滆澶�', val: 156 }, { id: 'zc', title: '姝ｅ父璁惧', val: 5000 }, { id: 'dx', title: '璇诲啓涓�', val: 56 }, { id: 'kx', title: '绌洪棽涓�', val: 2000 }, { id: 'ccgz', title: '鎻掓Ы鏁呴殰', val: 1000 }],
+      deviceAddr: '',
+      deviceState: '',
+      tableData: []
+    }
+  },
+  methods: {
+    checkSlot(row){
+
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.transfer-device-manage {
+  padding: 20px;
+  .general-view {
+    display: flex;
+    padding: 30px;
+    .indicator {
+      flex: 1;
+      position: relative;
+      &:not(.lastOne):after {
+        content: '';
+        width: 1px;
+        height: 57px;
+        background: #e9e9e9;
+        position: absolute;
+        right: 0;
+        top: 50%;
+        transform: translateY(-50%);
+      }
+      .title {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 14px;
+        color: #999;
+        margin-bottom: 10px;
+        .dot {
+          width: 10px;
+          height: 10px;
+          margin-right: 5px;
+          border-radius: 50%;
+          background: rgb(94, 14, 243);
+        }
+      }
+      .indicator-val {
+        font-size: 24px;
+      }
+    }
+  }
+  .filter-bar.flex-box {
+    & > div {
+      display: flex;
+      align-items: center;
+      margin-right: 10px;
+      label {
+        padding-right: 10px;
+      }
+    }
+  }
+  
+}
+</style>
\ No newline at end of file
diff --git a/src/pages/shuohuangMonitorAnalyze/components/transferMemo.vue b/src/pages/shuohuangMonitorAnalyze/components/transferMemo.vue
new file mode 100644
index 0000000..9dbc0bc
--- /dev/null
+++ b/src/pages/shuohuangMonitorAnalyze/components/transferMemo.vue
@@ -0,0 +1,85 @@
+<template>
+  <div class="transfer-memo">
+    <div class="filter-bar flex-box">
+      <div>
+        <label>鎿嶄綔鏃堕棿:</label>
+        <div></div>
+      </div>
+      <div>
+        <label>鎿嶄綔浜�:</label>
+        <div>
+          <el-input v-model="operator" size="small"></el-input>
+        </div>
+      </div>
+      <div>
+        <label>杞偍鐘舵��:</label>
+        <div>
+          <el-select v-model="transferStatus" size="small">
+            <el-option
+              v-for="item in allTransferStatus"
+              :key="item.id"
+              :value="item.id"
+              :label="item.name"
+            ></el-option>
+          </el-select>
+        </div>
+      </div>
+      <div class="btns">
+        <el-button type="primary" size="small">鏌ヨ</el-button>
+      </div>
+    </div>
+    <div class="table-area">
+      <el-table :data="tableData" fit>
+        <el-table-column prop="time" label="鎿嶄綔鏃堕棿"></el-table-column>
+        <el-table-column prop="operator" label="鎿嶄綔浜�"></el-table-column>
+        <el-table-column prop="tranferDevice" label="杞偍璁惧鍚嶇О"></el-table-column>
+        <el-table-column prop="pos" label="鍗℃Ы浣嶇疆"></el-table-column>
+        <el-table-column prop="transferStatus" label="杞偍鐘舵��"></el-table-column>
+        <el-table-column prop="pic" label="鐜板満鍥剧墖"></el-table-column>
+        <el-table-column prop="content" label="杞偍鍐呭"></el-table-column>
+      </el-table>
+      <el-pagination background layout="prev, pager, next" :total="tableDataTotal"></el-pagination>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      transferStatus: '',
+      operator: '',
+      allTransferStatus: [],
+      tableData: [],
+      tableDataTotal: 5
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.transfer-memo {
+  padding: 20px;
+  .filter-bar.flex-box {
+    & > div {
+      display: flex;
+      align-items: center;
+      margin-right: 10px;
+      label {
+        padding-right: 10px;
+      }
+    }
+  }
+  .el-table {
+    border: 1px solid #dedede;
+    margin-top: 10px;
+    th {
+      background: #f5f5f5;
+      color: #333;
+    }
+    .operation {
+      cursor: pointer;
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/pages/shuohuangMonitorAnalyze/index/App.vue b/src/pages/shuohuangMonitorAnalyze/index/App.vue
new file mode 100644
index 0000000..30023bd
--- /dev/null
+++ b/src/pages/shuohuangMonitorAnalyze/index/App.vue
@@ -0,0 +1,102 @@
+<template>
+  <div class="main-view">
+    <div class="view-left">
+      <left-nav :isCollapse="isCollapse" @menuChange="menuChange"></left-nav>
+    </div>
+    <div class="right">
+      <div class="top">
+        <div class="collapse-trigger" @click="toggleCollapse">
+          <i :class="isCollapse?'el-icon-s-fold':'el-icon-s-unfold'"></i>
+        </div>
+        <top-nav></top-nav>
+      </div>
+      <div class="container">
+        <searchForVideoAnalyze v-if="actPage=='searchForVideoAnalyze'"></searchForVideoAnalyze>
+        <memberManage v-if="actPage=='memberManage'"></memberManage>
+        <taskManage v-if="actPage=='taskManage'"></taskManage>
+        <transferMemo v-if="actPage=='transferMemo'"></transferMemo>
+        <transferDeviceManage v-if="actPage=='transferDeviceManage'"></transferDeviceManage>
+        <configManage v-if="actPage=='configManage'"></configManage>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import LeftNav from '../components/leftNav';
+import TopNav from '../components/topNav';
+import SearchForVideoAnalyze from '../components/searchForVideoAnalyze';
+import MemberManage from '../components/memberManage';
+import TaskManage from '../components/taskManage';
+import TransferMemo from '../components/transferMemo';
+import TransferDeviceManage from '../components/transferDeviceManage';
+import ConfigManage from '../components/configManage';
+export default {
+  components: { LeftNav, TopNav, SearchForVideoAnalyze, MemberManage, TaskManage, TransferMemo, TransferDeviceManage, ConfigManage },
+  data () {
+    return {
+      isCollapse: false,
+      actPage: 'searchForVideoAnalyze',
+    }
+  },
+  mounted () {
+
+  },
+  methods: {
+    toggleCollapse () {
+      this.isCollapse = !this.isCollapse;
+      //閫氱煡褰撳墠娲诲姩椤祎able(濡傛灉鏈�) doLayout
+
+    },
+    menuChange (path) {
+      this.actPage = path;
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.flex-box{
+  display: flex;
+}
+.el-table.thbg {
+  border: 1px solid #dedede;
+  margin-top: 10px;
+  th {
+    background: #f5f5f5;
+    color: #333;
+  }
+  .operation {
+    cursor: pointer;
+  }
+}
+.main-view {
+  display: flex;
+  background: #f0f2f5;
+  .view-left {
+    z-index: 2;
+    box-shadow: 4px 0px 8px 0px rgba(0, 0, 0, 0.1);
+  }
+  .right {
+    flex: 1;
+    .top {
+      background: #fff;
+      position: relative;
+      .collapse-trigger {
+        position: absolute;
+        left: 20px;
+        top: 23px;
+        font-size: 20px;
+        cursor: pointer;
+      }
+    }
+    .container {
+      background: #fff;
+      margin: 10px;
+      box-sizing: border-box;
+      height: calc(100vh - 84px);
+      overflow-y: auto;
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/pages/shuohuangMonitorAnalyze/index/main.ts b/src/pages/shuohuangMonitorAnalyze/index/main.ts
new file mode 100644
index 0000000..ddd090c
--- /dev/null
+++ b/src/pages/shuohuangMonitorAnalyze/index/main.ts
@@ -0,0 +1,15 @@
+import Vue from 'vue';
+import App from './App.vue';
+import Mixin from "./mixins";
+import ElementUI from 'element-ui';
+import moment from 'moment';
+
+import 'element-ui/lib/theme-chalk/index.css';
+import "@/assets/css/element-variables.scss";
+Vue.use(ElementUI);
+Vue.mixin(Mixin);
+Vue.prototype.$moment = moment;
+new Vue({
+  el: '#app',
+  render: h => h(App)
+})
diff --git a/src/pages/shuohuangMonitorAnalyze/index/mixins.ts b/src/pages/shuohuangMonitorAnalyze/index/mixins.ts
new file mode 100644
index 0000000..163c814
--- /dev/null
+++ b/src/pages/shuohuangMonitorAnalyze/index/mixins.ts
@@ -0,0 +1,28 @@
+import VideoPhotoData from "@/Pool/VideoPhotoData";
+import VideoTaskData from "@/Pool/VideoTaskData";
+import TreeDataPool from "@/Pool/TreeData";
+import CardList from "@/Pool/CardList";
+import DataStackPool from "@/Pool/dataStack"
+import AuthData from '@/Pool/AuthData';
+
+/* eslint-disable */
+const onlyVideoPhotoData = new VideoPhotoData
+const onlyVideoTaskData = new VideoTaskData
+const onlyTreeDataPool = new TreeDataPool
+const onlyDataStack = new DataStackPool
+const onlyCardList = new CardList
+const onlyAuthData = new AuthData
+
+const mixin = {
+  data() {
+    return {
+      TreeDataPool: onlyTreeDataPool,
+      VideoPhotoData: onlyVideoPhotoData,
+      CardList: onlyCardList,
+      DataStackPool: onlyDataStack,
+      VideoTaskData: onlyVideoTaskData,
+      AuthData: onlyAuthData,
+    };
+  },
+};
+export default mixin;
\ No newline at end of file
diff --git a/vue.config.js b/vue.config.js
index f276d7a..ce1b779 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -86,6 +86,10 @@
           '^/data/api-v/app/findAllApp': 'apps.json'
         }
       },
+      "/api-c": {
+        target: 'http://192.168.20.113:8001',
+        changeOrigin: true
+      },
       "/api-v": {
         target: 'http://192.168.20.10:8000',
         changeOrigin: true

--
Gitblit v1.8.0