diff --git a/riis-web/src/api/alarminterval/index.ts b/riis-web/src/api/alarminterval/index.ts
index bda12cd..f656888 100644
--- a/riis-web/src/api/alarminterval/index.ts
+++ b/riis-web/src/api/alarminterval/index.ts
@@ -2,7 +2,7 @@ import request from '@/utils/request';
 //获取所有角色
 export function getAlarm (queryParams:any){
     return request({
-      url: '/basedata/substation-device/getAlarmThresholdPage' ,
+      url: '/basedata/substation-device/getAlarmThresholdList' ,
       method: 'get',
       params:queryParams
     });
@@ -10,14 +10,14 @@ export function getAlarm (queryParams:any){
   //获取所有角色
 export function getSubstation (){
     return request({
-      url: '/basedata/substation/getSubstationTree' ,
+      url: '/basedata/substation/getSubstationBayTree' ,
       method: 'get',
     });
   }
   //批量修改警告阈值
 export function updateAlarm(params:any){
     return request({
-      url: 'basedata/substation-device/updateBatchDevice' ,
+      url: 'basedata/substation-device/updateAlarmThreshold' ,
       method: 'post',
       data:params
     });
diff --git a/riis-web/src/api/device/index.ts b/riis-web/src/api/device/index.ts
index a627601..94794af 100644
--- a/riis-web/src/api/device/index.ts
+++ b/riis-web/src/api/device/index.ts
@@ -9,7 +9,7 @@ export function getTreefirst() {
 //获取变电站信息
 export function getTreelist(params: any) {
   return request({
-    url: '/basedata/substation/getSubstationNaviTree',
+    url: '/basedata/substation/getSubstationTree',
     method: 'get',
     params: params
   });
@@ -17,9 +17,9 @@ export function getTreelist(params: any) {
 //获取table表格
 export function getdevicedata(params: any) {
   return request({
-    url: '/basedata/substation-device/getSubstationDevicePage',
-    method: 'get',
-    params: params
+    url: '/basedata/substation-device/getSubstationDeviceList',
+    method: 'post',
+    data: params
   });
 }
 //获取所属主设备select
@@ -49,7 +49,7 @@ export function getaccType(params: any) {
 //间隔下所属部件
 export function getBayType(params: any) {
   return request({
-    url: '/basedata/substation-maindevice/getComponentByCriteria',
+    url: '/basedata/substation-maindevice/getComponentByBay',
     method: 'get',
     params: params
   });
@@ -73,7 +73,7 @@ export function changeStatus(params: any) {
 //修改点位
 export function editPosition(params: any) {
   return request({
-    url: '/basedata/substation-device/updateSubstationDevice',
+    url: '/basedata/substation-device/updateSubstationDeviceById',
     method: 'post',
     data: params
   });
@@ -81,7 +81,7 @@ export function editPosition(params: any) {
 //删除
 export function delPosition(params: any) {
   return request({
-    url: '/basedata/substation-device/deleteSubstationDevice',
+    url: '/basedata/substation-device/deleteSubstationDeviceById',
     method: 'post',
     params: params
   });
@@ -132,7 +132,7 @@ export function getDeviceByType(params: any) {
 //根据条件获取部件(分页)
 export function getComponentByBayPage(params: any) {
   return request({
-    url: '/basedata/substation-maindevice/getComponentPage',
+    url: '/basedata/substation-maindevice/getComponentByBayPage',
     method: 'get',
     params: params
   });
diff --git a/riis-web/src/api/equipment/index.ts b/riis-web/src/api/equipment/index.ts
index db37eaf..d1e90bc 100644
--- a/riis-web/src/api/equipment/index.ts
+++ b/riis-web/src/api/equipment/index.ts
@@ -3,7 +3,7 @@ import request from '@/utils/request';
 //获取左侧导航树
 export function getTreeData(params:any){
   return request({
-    url: '/basedata/substation/getSubstationNaviTree' ,
+    url: '/basedata/substation/getSubstationTree' ,
     method: 'get',
     params:params
   });
diff --git a/riis-web/src/api/home/index.ts b/riis-web/src/api/home/index.ts
index 6660ace..86c82bb 100644
--- a/riis-web/src/api/home/index.ts
+++ b/riis-web/src/api/home/index.ts
@@ -70,4 +70,12 @@ export function getAlarmLogById(params:any){
     params:params
   });
 }
+//告警准确率
+export function getConfirmationRate(params:any){
+  return request({
+    url: '/patroltask/task-alarm/getConfirmationRate' ,
+    method: 'get',
+    params:params
+  });
+}
 
diff --git a/riis-web/src/api/makeTask/index.ts b/riis-web/src/api/makeTask/index.ts
index 84b95a9..0cb092e 100644
--- a/riis-web/src/api/makeTask/index.ts
+++ b/riis-web/src/api/makeTask/index.ts
@@ -2,7 +2,7 @@ import request from '@/utils/request';
 //获取表格数据
 export function getdata(params: any) {
     return request({
-        url: '/patroltasks/task/getTaskPage',
+        url: '/patroltasks/task/getTaskList',
         method: 'get',
         params: params
     });
@@ -34,7 +34,7 @@ export function changeSwitch(params: any) {
 //删除巡视任务
 export function delTask(params: any) {
     return request({
-        url: '/patroltasks/task/deleteTask',
+        url: '/patroltasks/task/deleteTaskById',
         method: 'post',
         params: params
     });
@@ -70,7 +70,7 @@ export function getSubstationNaviTree(params: any) {
 //获取主设备类型
 export function getmaintype() {
     return request({
-        url: '/basedata/substation-maindevice/getDeviceTypeList',
+        url: '/basedata/substation-maindevice/getDeviceType',
         method: 'get',
     });
 }
@@ -102,7 +102,7 @@ export function checkTask(params:any) {
 //巡视任务上报
 export function PatrolTask(params:any) {
     return request({
-        url: '/patroltasks/task/reportTask',
+        url: '/patroltasks/task/reportTaskById',
         method: 'post',
         params:params
     });
diff --git a/riis-web/src/api/monitordevice/index.ts b/riis-web/src/api/monitordevice/index.ts
index d1cfcc0..b1c7a6b 100644
--- a/riis-web/src/api/monitordevice/index.ts
+++ b/riis-web/src/api/monitordevice/index.ts
@@ -3,7 +3,7 @@ import request from '@/utils/request';
 //获取table表格
 export function getdata(params:any){
   return request({
-    url: '/basedata/substation-patroldevice/getPatrolDevicePage' ,
+    url: '/basedata/substation-patroldevice/getPatrolDeviceList' ,
     method: 'get',
     params:params
   });
@@ -19,7 +19,7 @@ export function addPosition(params:any){
 //修改设备
 export function editPosition(params:any){
   return request({
-    url: '/basedata/substation-patroldevice/updatePatrolDevice' ,
+    url: '/basedata/substation-patroldevice/updatePatrolDeviceById' ,
     method: 'post',
     data:params
   });
@@ -43,7 +43,7 @@ export function setDailyMonitorStatus(params:any){
 //删除
 export function delPosition(params:any){
   return request({
-    url: '/basedata/substation-patroldevice/deletePatrolDevice' ,
+    url: '/basedata/substation-patroldevice/deletePatrolDeviceById' ,
     method: 'post',
     params:params
   });
@@ -142,7 +142,7 @@ export function setEffectiveArea(params:any){
 //获取变电站下的区域
 export function getArea(params: any) {
   return request({
-    url: '/basedata/substation/getAreaByStationCode',
+    url: '/basedata/substation/getSubstationAreaByCode',
     method: 'get',
     params: params,
   });
diff --git a/riis-web/src/api/patrolreport/index.ts b/riis-web/src/api/patrolreport/index.ts
index 5135e6d..d1a4436 100644
--- a/riis-web/src/api/patrolreport/index.ts
+++ b/riis-web/src/api/patrolreport/index.ts
@@ -2,7 +2,7 @@ import request from '@/utils/request';
 //获取表格数据
 export function getdata(params: any) {
     return request({
-        url: '/patroltasks/task-todo/getTaskReportPage',
+        url: '/patroltasks/task-todo/getTaskReportList',
         method: 'get',
         params: params
     });
@@ -18,7 +18,7 @@ export function DelData(params:any) {
 //导出报告
 export function exportExcel(queryParams: any) {
     return request({
-      url: '/patroltasks/task-todo/exportTaskTodo',
+      url: '/patroltasks/task-todo/exportTaskTodoById',
       method: 'get',
       params: queryParams,
       responseType: 'arraybuffer'
@@ -36,7 +36,7 @@ export function getword(queryParams: any) {
 // 上报巡视报告
 export function uploadTaskTodoById(queryParams: any) {
   return request({
-    url: '/patroltasks/task-todo/uploadTaskTodo',
+    url: '/patroltasks/task-todo/uploadTaskTodoById',
     method: 'get',
     params: queryParams,
   });
diff --git a/riis-web/src/api/substation/index.ts b/riis-web/src/api/substation/index.ts
index 599857f..444da58 100644
--- a/riis-web/src/api/substation/index.ts
+++ b/riis-web/src/api/substation/index.ts
@@ -3,7 +3,7 @@ import request from '@/utils/request';
 //获取所有角色
 export function getdata(params:any){
   return request({
-    url: '/basedata/substation/getSubstationTree' ,
+    url: '/basedata/substation/getSubstationBayTree' ,
     method: 'get',
     params:params
   });
diff --git a/riis-web/src/api/videomonitor/index.ts b/riis-web/src/api/videomonitor/index.ts
index afdb967..70148ef 100644
--- a/riis-web/src/api/videomonitor/index.ts
+++ b/riis-web/src/api/videomonitor/index.ts
@@ -3,7 +3,7 @@ import request from '@/utils/request';
 //获取左侧导航树
 export function getCameraByArea(params:any){
   return request({
-    url: '/basedata/substation-patroldevice/getOnlyCamera' ,
+    url: '/basedata/substation-patroldevice/getCameraByArea' ,
     method: 'get',
     params:params
   });
diff --git a/riis-web/src/api/voiceprint/index.ts b/riis-web/src/api/voiceprint/index.ts
index 019e141..fc4bd40 100644
--- a/riis-web/src/api/voiceprint/index.ts
+++ b/riis-web/src/api/voiceprint/index.ts
@@ -3,9 +3,9 @@ import request from '@/utils/request';
 //获取table表格
 export function getdata(params:any){
   return request({
-    url: '/basedata/substation-patroldevice/getPatrolDevicePage' ,
-    method: 'get',
-    params:params
+    url: '/basedata/substation-patroldevice/getPatrolDeviceList' ,
+    method: 'post',
+    data:params
   });
 }
 
@@ -21,7 +21,7 @@ export function addPosition(params:any){
   //修改设备
   export function editPosition(params:any){
     return request({
-      url: '/basedata/substation-patroldevice/updatePatrolDevice' ,
+      url: '/basedata/substation-patroldevice/updatePatrolDeviceById' ,
       method: 'post',
       data:params
     });
@@ -29,7 +29,7 @@ export function addPosition(params:any){
 //根据机器人编码获取摄像头
 export function getCreamRoot(params:any){
     return request({
-      url: '/basedata/substation-patroldevice/getCameraByRobotCode' ,
+      url: '/basedata/substation-patroldevice/getCameraByRobot' ,
       method: 'get',
       params:params
     });
@@ -45,7 +45,7 @@ export function changeStatus(params:any){
 //删除
 export function delPosition(params:any){
   return request({
-    url: '/basedata/substation-patroldevice/deletePatrolDevice' ,
+    url: '/basedata/substation-patroldevice/deletePatrolDeviceById' ,
     method: 'post',
     params:params
   });
diff --git a/riis-web/src/assets/navigation/bfsb.png b/riis-web/src/assets/navigation/bfsb.png
new file mode 100644
index 0000000..e27a327
Binary files /dev/null and b/riis-web/src/assets/navigation/bfsb.png differ
diff --git a/riis-web/src/assets/navigation/gj.png b/riis-web/src/assets/navigation/gj.png
new file mode 100644
index 0000000..993a236
Binary files /dev/null and b/riis-web/src/assets/navigation/gj.png differ
diff --git a/riis-web/src/assets/navigation/gj1.png b/riis-web/src/assets/navigation/gj1.png
new file mode 100644
index 0000000..4edc4d7
Binary files /dev/null and b/riis-web/src/assets/navigation/gj1.png differ
diff --git a/riis-web/src/assets/navigation/hjjc_BK.png b/riis-web/src/assets/navigation/hjjc_BK.png
new file mode 100644
index 0000000..45dd645
Binary files /dev/null and b/riis-web/src/assets/navigation/hjjc_BK.png differ
diff --git a/riis-web/src/assets/navigation/hjjc_sj1.png b/riis-web/src/assets/navigation/hjjc_sj1.png
new file mode 100644
index 0000000..69095a9
Binary files /dev/null and b/riis-web/src/assets/navigation/hjjc_sj1.png differ
diff --git a/riis-web/src/assets/navigation/hjjc_sj2.png b/riis-web/src/assets/navigation/hjjc_sj2.png
new file mode 100644
index 0000000..69e7a64
Binary files /dev/null and b/riis-web/src/assets/navigation/hjjc_sj2.png differ
diff --git a/riis-web/src/assets/navigation/hjjc_sj3.png b/riis-web/src/assets/navigation/hjjc_sj3.png
new file mode 100644
index 0000000..b9e0c4c
Binary files /dev/null and b/riis-web/src/assets/navigation/hjjc_sj3.png differ
diff --git a/riis-web/src/assets/navigation/hjjc_sj4.png b/riis-web/src/assets/navigation/hjjc_sj4.png
new file mode 100644
index 0000000..949ac43
Binary files /dev/null and b/riis-web/src/assets/navigation/hjjc_sj4.png differ
diff --git a/riis-web/src/assets/navigation/hjjc_sj5.png b/riis-web/src/assets/navigation/hjjc_sj5.png
new file mode 100644
index 0000000..fdeb59c
Binary files /dev/null and b/riis-web/src/assets/navigation/hjjc_sj5.png differ
diff --git a/riis-web/src/assets/navigation/hjjc_sj6.png b/riis-web/src/assets/navigation/hjjc_sj6.png
new file mode 100644
index 0000000..2095547
Binary files /dev/null and b/riis-web/src/assets/navigation/hjjc_sj6.png differ
diff --git a/riis-web/src/assets/navigation/hjjc_sjbj.png b/riis-web/src/assets/navigation/hjjc_sjbj.png
new file mode 100644
index 0000000..388ab57
Binary files /dev/null and b/riis-web/src/assets/navigation/hjjc_sjbj.png differ
diff --git a/riis-web/src/assets/navigation/ht_ann.png b/riis-web/src/assets/navigation/ht_ann.png
new file mode 100644
index 0000000..8f56372
Binary files /dev/null and b/riis-web/src/assets/navigation/ht_ann.png differ
diff --git a/riis-web/src/assets/navigation/ht_ann1.png b/riis-web/src/assets/navigation/ht_ann1.png
new file mode 100644
index 0000000..ea95991
Binary files /dev/null and b/riis-web/src/assets/navigation/ht_ann1.png differ
diff --git a/riis-web/src/assets/navigation/ht_bj.png b/riis-web/src/assets/navigation/ht_bj.png
new file mode 100644
index 0000000..b1ee9f7
Binary files /dev/null and b/riis-web/src/assets/navigation/ht_bj.png differ
diff --git a/riis-web/src/assets/navigation/ht_bj1.png b/riis-web/src/assets/navigation/ht_bj1.png
new file mode 100644
index 0000000..155f9a8
Binary files /dev/null and b/riis-web/src/assets/navigation/ht_bj1.png differ
diff --git a/riis-web/src/assets/navigation/ht_cd.png b/riis-web/src/assets/navigation/ht_cd.png
new file mode 100644
index 0000000..9eac32b
Binary files /dev/null and b/riis-web/src/assets/navigation/ht_cd.png differ
diff --git a/riis-web/src/assets/navigation/ht_cd1.png b/riis-web/src/assets/navigation/ht_cd1.png
new file mode 100644
index 0000000..37ada94
Binary files /dev/null and b/riis-web/src/assets/navigation/ht_cd1.png differ
diff --git a/riis-web/src/assets/navigation/ht_czmm.png b/riis-web/src/assets/navigation/ht_czmm.png
new file mode 100644
index 0000000..b9c78e0
Binary files /dev/null and b/riis-web/src/assets/navigation/ht_czmm.png differ
diff --git a/riis-web/src/assets/navigation/ht_czmm1.png b/riis-web/src/assets/navigation/ht_czmm1.png
new file mode 100644
index 0000000..02b37b4
Binary files /dev/null and b/riis-web/src/assets/navigation/ht_czmm1.png differ
diff --git a/riis-web/src/assets/navigation/ht_daoc.png b/riis-web/src/assets/navigation/ht_daoc.png
new file mode 100644
index 0000000..2b3a4d3
Binary files /dev/null and b/riis-web/src/assets/navigation/ht_daoc.png differ
diff --git a/riis-web/src/assets/navigation/ht_daoc1.png b/riis-web/src/assets/navigation/ht_daoc1.png
new file mode 100644
index 0000000..c43239d
Binary files /dev/null and b/riis-web/src/assets/navigation/ht_daoc1.png differ
diff --git a/riis-web/src/assets/navigation/ht_fz.png b/riis-web/src/assets/navigation/ht_fz.png
new file mode 100644
index 0000000..b54b1f7
Binary files /dev/null and b/riis-web/src/assets/navigation/ht_fz.png differ
diff --git a/riis-web/src/assets/navigation/ht_fz1.png b/riis-web/src/assets/navigation/ht_fz1.png
new file mode 100644
index 0000000..f310e5a
Binary files /dev/null and b/riis-web/src/assets/navigation/ht_fz1.png differ
diff --git a/riis-web/src/assets/navigation/ht_gl.png b/riis-web/src/assets/navigation/ht_gl.png
new file mode 100644
index 0000000..cc82df3
Binary files /dev/null and b/riis-web/src/assets/navigation/ht_gl.png differ
diff --git a/riis-web/src/assets/navigation/ht_gl1.png b/riis-web/src/assets/navigation/ht_gl1.png
new file mode 100644
index 0000000..40cce69
Binary files /dev/null and b/riis-web/src/assets/navigation/ht_gl1.png differ
diff --git a/riis-web/src/assets/navigation/ht_hec.png b/riis-web/src/assets/navigation/ht_hec.png
new file mode 100644
index 0000000..231c3b7
Binary files /dev/null and b/riis-web/src/assets/navigation/ht_hec.png differ
diff --git a/riis-web/src/assets/navigation/ht_hec1.png b/riis-web/src/assets/navigation/ht_hec1.png
new file mode 100644
index 0000000..6e1d3f0
Binary files /dev/null and b/riis-web/src/assets/navigation/ht_hec1.png differ
diff --git a/riis-web/src/assets/navigation/ht_jg.png b/riis-web/src/assets/navigation/ht_jg.png
new file mode 100644
index 0000000..8739801
Binary files /dev/null and b/riis-web/src/assets/navigation/ht_jg.png differ
diff --git a/riis-web/src/assets/navigation/ht_jg1.png b/riis-web/src/assets/navigation/ht_jg1.png
new file mode 100644
index 0000000..6cdb8c8
Binary files /dev/null and b/riis-web/src/assets/navigation/ht_jg1.png differ
diff --git a/riis-web/src/assets/navigation/ht_jsyh.png b/riis-web/src/assets/navigation/ht_jsyh.png
new file mode 100644
index 0000000..f734bdf
Binary files /dev/null and b/riis-web/src/assets/navigation/ht_jsyh.png differ
diff --git a/riis-web/src/assets/navigation/ht_jsyh1.png b/riis-web/src/assets/navigation/ht_jsyh1.png
new file mode 100644
index 0000000..148f162
Binary files /dev/null and b/riis-web/src/assets/navigation/ht_jsyh1.png differ
diff --git a/riis-web/src/assets/navigation/ht_pdf.png b/riis-web/src/assets/navigation/ht_pdf.png
new file mode 100644
index 0000000..4491e61
Binary files /dev/null and b/riis-web/src/assets/navigation/ht_pdf.png differ
diff --git a/riis-web/src/assets/navigation/ht_qij.png b/riis-web/src/assets/navigation/ht_qij.png
new file mode 100644
index 0000000..36b7ad4
Binary files /dev/null and b/riis-web/src/assets/navigation/ht_qij.png differ
diff --git a/riis-web/src/assets/navigation/ht_qij1.png b/riis-web/src/assets/navigation/ht_qij1.png
new file mode 100644
index 0000000..ef6eec9
Binary files /dev/null and b/riis-web/src/assets/navigation/ht_qij1.png differ
diff --git a/riis-web/src/assets/navigation/ht_qj.png b/riis-web/src/assets/navigation/ht_qj.png
new file mode 100644
index 0000000..f97a25e
Binary files /dev/null and b/riis-web/src/assets/navigation/ht_qj.png differ
diff --git a/riis-web/src/assets/navigation/ht_qj1.png b/riis-web/src/assets/navigation/ht_qj1.png
new file mode 100644
index 0000000..66c93ac
Binary files /dev/null and b/riis-web/src/assets/navigation/ht_qj1.png differ
diff --git a/riis-web/src/assets/navigation/ht_qx.png b/riis-web/src/assets/navigation/ht_qx.png
new file mode 100644
index 0000000..8d7779f
Binary files /dev/null and b/riis-web/src/assets/navigation/ht_qx.png differ
diff --git a/riis-web/src/assets/navigation/ht_qx1.png b/riis-web/src/assets/navigation/ht_qx1.png
new file mode 100644
index 0000000..7fa2bcd
Binary files /dev/null and b/riis-web/src/assets/navigation/ht_qx1.png differ
diff --git a/riis-web/src/assets/navigation/ht_qy.png b/riis-web/src/assets/navigation/ht_qy.png
new file mode 100644
index 0000000..cffc4ba
Binary files /dev/null and b/riis-web/src/assets/navigation/ht_qy.png differ
diff --git a/riis-web/src/assets/navigation/ht_qy1.png b/riis-web/src/assets/navigation/ht_qy1.png
new file mode 100644
index 0000000..995645c
Binary files /dev/null and b/riis-web/src/assets/navigation/ht_qy1.png differ
diff --git a/riis-web/src/assets/navigation/ht_sc.png b/riis-web/src/assets/navigation/ht_sc.png
new file mode 100644
index 0000000..68a1e95
Binary files /dev/null and b/riis-web/src/assets/navigation/ht_sc.png differ
diff --git a/riis-web/src/assets/navigation/ht_sc1.png b/riis-web/src/assets/navigation/ht_sc1.png
new file mode 100644
index 0000000..c25499e
Binary files /dev/null and b/riis-web/src/assets/navigation/ht_sc1.png differ
diff --git a/riis-web/src/assets/navigation/ht_sh.png b/riis-web/src/assets/navigation/ht_sh.png
new file mode 100644
index 0000000..42da063
Binary files /dev/null and b/riis-web/src/assets/navigation/ht_sh.png differ
diff --git a/riis-web/src/assets/navigation/ht_sh1.png b/riis-web/src/assets/navigation/ht_sh1.png
new file mode 100644
index 0000000..18d7916
Binary files /dev/null and b/riis-web/src/assets/navigation/ht_sh1.png differ
diff --git a/riis-web/src/assets/navigation/ht_svwj.png b/riis-web/src/assets/navigation/ht_svwj.png
new file mode 100644
index 0000000..e643ff5
Binary files /dev/null and b/riis-web/src/assets/navigation/ht_svwj.png differ
diff --git a/riis-web/src/assets/navigation/ht_svwj1.png b/riis-web/src/assets/navigation/ht_svwj1.png
new file mode 100644
index 0000000..15a6c66
Binary files /dev/null and b/riis-web/src/assets/navigation/ht_svwj1.png differ
diff --git a/riis-web/src/assets/navigation/ht_wxjl.png b/riis-web/src/assets/navigation/ht_wxjl.png
new file mode 100644
index 0000000..aa397f6
Binary files /dev/null and b/riis-web/src/assets/navigation/ht_wxjl.png differ
diff --git a/riis-web/src/assets/navigation/ht_wxjl1.png b/riis-web/src/assets/navigation/ht_wxjl1.png
new file mode 100644
index 0000000..4fe2bc9
Binary files /dev/null and b/riis-web/src/assets/navigation/ht_wxjl1.png differ
diff --git a/riis-web/src/assets/navigation/ht_xg.png b/riis-web/src/assets/navigation/ht_xg.png
new file mode 100644
index 0000000..a1583d6
Binary files /dev/null and b/riis-web/src/assets/navigation/ht_xg.png differ
diff --git a/riis-web/src/assets/navigation/ht_xg1.png b/riis-web/src/assets/navigation/ht_xg1.png
new file mode 100644
index 0000000..0d11950
Binary files /dev/null and b/riis-web/src/assets/navigation/ht_xg1.png differ
diff --git a/riis-web/src/assets/navigation/ht_xin.png b/riis-web/src/assets/navigation/ht_xin.png
new file mode 100644
index 0000000..8c38c51
Binary files /dev/null and b/riis-web/src/assets/navigation/ht_xin.png differ
diff --git a/riis-web/src/assets/navigation/ht_xz.png b/riis-web/src/assets/navigation/ht_xz.png
new file mode 100644
index 0000000..b6b2954
Binary files /dev/null and b/riis-web/src/assets/navigation/ht_xz.png differ
diff --git a/riis-web/src/assets/navigation/ht_xz1.png b/riis-web/src/assets/navigation/ht_xz1.png
new file mode 100644
index 0000000..67cd910
Binary files /dev/null and b/riis-web/src/assets/navigation/ht_xz1.png differ
diff --git a/riis-web/src/assets/navigation/ht_yp.png b/riis-web/src/assets/navigation/ht_yp.png
new file mode 100644
index 0000000..810a681
Binary files /dev/null and b/riis-web/src/assets/navigation/ht_yp.png differ
diff --git a/riis-web/src/assets/navigation/ht_yp1.png b/riis-web/src/assets/navigation/ht_yp1.png
new file mode 100644
index 0000000..bd95292
Binary files /dev/null and b/riis-web/src/assets/navigation/ht_yp1.png differ
diff --git a/riis-web/src/assets/navigation/ht_yt.png b/riis-web/src/assets/navigation/ht_yt.png
new file mode 100644
index 0000000..dbfcdba
Binary files /dev/null and b/riis-web/src/assets/navigation/ht_yt.png differ
diff --git a/riis-web/src/assets/navigation/ht_yt1.png b/riis-web/src/assets/navigation/ht_yt1.png
new file mode 100644
index 0000000..6f5daf2
Binary files /dev/null and b/riis-web/src/assets/navigation/ht_yt1.png differ
diff --git a/riis-web/src/assets/navigation/ht_yw.png b/riis-web/src/assets/navigation/ht_yw.png
new file mode 100644
index 0000000..a6becad
Binary files /dev/null and b/riis-web/src/assets/navigation/ht_yw.png differ
diff --git a/riis-web/src/assets/navigation/ht_yw1.png b/riis-web/src/assets/navigation/ht_yw1.png
new file mode 100644
index 0000000..f124f8e
Binary files /dev/null and b/riis-web/src/assets/navigation/ht_yw1.png differ
diff --git a/riis-web/src/assets/navigation/ht_zml.png b/riis-web/src/assets/navigation/ht_zml.png
new file mode 100644
index 0000000..df93070
Binary files /dev/null and b/riis-web/src/assets/navigation/ht_zml.png differ
diff --git a/riis-web/src/assets/navigation/ht_zml1.png b/riis-web/src/assets/navigation/ht_zml1.png
new file mode 100644
index 0000000..5ac1582
Binary files /dev/null and b/riis-web/src/assets/navigation/ht_zml1.png differ
diff --git a/riis-web/src/assets/navigation/ht_zxqd.png b/riis-web/src/assets/navigation/ht_zxqd.png
new file mode 100644
index 0000000..c27dbaa
Binary files /dev/null and b/riis-web/src/assets/navigation/ht_zxqd.png differ
diff --git a/riis-web/src/assets/navigation/ht_zxqd1.png b/riis-web/src/assets/navigation/ht_zxqd1.png
new file mode 100644
index 0000000..9d8e379
Binary files /dev/null and b/riis-web/src/assets/navigation/ht_zxqd1.png differ
diff --git a/riis-web/src/assets/navigation/ht_zz.png b/riis-web/src/assets/navigation/ht_zz.png
new file mode 100644
index 0000000..40d54c9
Binary files /dev/null and b/riis-web/src/assets/navigation/ht_zz.png differ
diff --git a/riis-web/src/assets/navigation/ht_zz1.png b/riis-web/src/assets/navigation/ht_zz1.png
new file mode 100644
index 0000000..6cc53ea
Binary files /dev/null and b/riis-web/src/assets/navigation/ht_zz1.png differ
diff --git a/riis-web/src/assets/navigation/jia.png b/riis-web/src/assets/navigation/jia.png
new file mode 100644
index 0000000..01c26cf
Binary files /dev/null and b/riis-web/src/assets/navigation/jia.png differ
diff --git a/riis-web/src/assets/navigation/jia1.png b/riis-web/src/assets/navigation/jia1.png
new file mode 100644
index 0000000..885b862
Binary files /dev/null and b/riis-web/src/assets/navigation/jia1.png differ
diff --git a/riis-web/src/assets/navigation/jqr_1.png b/riis-web/src/assets/navigation/jqr_1.png
new file mode 100644
index 0000000..55163be
Binary files /dev/null and b/riis-web/src/assets/navigation/jqr_1.png differ
diff --git a/riis-web/src/assets/navigation/jqr_11.png b/riis-web/src/assets/navigation/jqr_11.png
new file mode 100644
index 0000000..c1e3fca
Binary files /dev/null and b/riis-web/src/assets/navigation/jqr_11.png differ
diff --git a/riis-web/src/assets/navigation/jqr_2.png b/riis-web/src/assets/navigation/jqr_2.png
new file mode 100644
index 0000000..d7474a9
Binary files /dev/null and b/riis-web/src/assets/navigation/jqr_2.png differ
diff --git a/riis-web/src/assets/navigation/jqr_21.png b/riis-web/src/assets/navigation/jqr_21.png
new file mode 100644
index 0000000..cbfe425
Binary files /dev/null and b/riis-web/src/assets/navigation/jqr_21.png differ
diff --git a/riis-web/src/assets/navigation/jqr_3.png b/riis-web/src/assets/navigation/jqr_3.png
new file mode 100644
index 0000000..f59a110
Binary files /dev/null and b/riis-web/src/assets/navigation/jqr_3.png differ
diff --git a/riis-web/src/assets/navigation/jqr_31.png b/riis-web/src/assets/navigation/jqr_31.png
new file mode 100644
index 0000000..97d1fee
Binary files /dev/null and b/riis-web/src/assets/navigation/jqr_31.png differ
diff --git a/riis-web/src/assets/navigation/jqr_4.png b/riis-web/src/assets/navigation/jqr_4.png
new file mode 100644
index 0000000..5844af0
Binary files /dev/null and b/riis-web/src/assets/navigation/jqr_4.png differ
diff --git a/riis-web/src/assets/navigation/jqr_41.png b/riis-web/src/assets/navigation/jqr_41.png
new file mode 100644
index 0000000..9a48629
Binary files /dev/null and b/riis-web/src/assets/navigation/jqr_41.png differ
diff --git a/riis-web/src/assets/navigation/jqr_5.png b/riis-web/src/assets/navigation/jqr_5.png
new file mode 100644
index 0000000..8344546
Binary files /dev/null and b/riis-web/src/assets/navigation/jqr_5.png differ
diff --git a/riis-web/src/assets/navigation/jqr_51.png b/riis-web/src/assets/navigation/jqr_51.png
new file mode 100644
index 0000000..079d401
Binary files /dev/null and b/riis-web/src/assets/navigation/jqr_51.png differ
diff --git a/riis-web/src/assets/navigation/lsrw.png b/riis-web/src/assets/navigation/lsrw.png
new file mode 100644
index 0000000..735bedd
Binary files /dev/null and b/riis-web/src/assets/navigation/lsrw.png differ
diff --git a/riis-web/src/assets/navigation/sp.png b/riis-web/src/assets/navigation/sp.png
new file mode 100644
index 0000000..acc8a20
Binary files /dev/null and b/riis-web/src/assets/navigation/sp.png differ
diff --git a/riis-web/src/assets/navigation/spjk_16p.png b/riis-web/src/assets/navigation/spjk_16p.png
new file mode 100644
index 0000000..a345478
Binary files /dev/null and b/riis-web/src/assets/navigation/spjk_16p.png differ
diff --git a/riis-web/src/assets/navigation/spjk_16p1.png b/riis-web/src/assets/navigation/spjk_16p1.png
new file mode 100644
index 0000000..6d41977
Binary files /dev/null and b/riis-web/src/assets/navigation/spjk_16p1.png differ
diff --git a/riis-web/src/assets/navigation/spjk_1p.png b/riis-web/src/assets/navigation/spjk_1p.png
new file mode 100644
index 0000000..a240832
Binary files /dev/null and b/riis-web/src/assets/navigation/spjk_1p.png differ
diff --git a/riis-web/src/assets/navigation/spjk_1p1.png b/riis-web/src/assets/navigation/spjk_1p1.png
new file mode 100644
index 0000000..1e4e1cc
Binary files /dev/null and b/riis-web/src/assets/navigation/spjk_1p1.png differ
diff --git a/riis-web/src/assets/navigation/spjk_4p1.png b/riis-web/src/assets/navigation/spjk_4p1.png
new file mode 100644
index 0000000..c45839c
Binary files /dev/null and b/riis-web/src/assets/navigation/spjk_4p1.png differ
diff --git a/riis-web/src/assets/navigation/spjk_9p.png b/riis-web/src/assets/navigation/spjk_9p.png
new file mode 100644
index 0000000..96ec709
Binary files /dev/null and b/riis-web/src/assets/navigation/spjk_9p.png differ
diff --git a/riis-web/src/assets/navigation/spjk_9p1.png b/riis-web/src/assets/navigation/spjk_9p1.png
new file mode 100644
index 0000000..6b816a2
Binary files /dev/null and b/riis-web/src/assets/navigation/spjk_9p1.png differ
diff --git a/riis-web/src/assets/navigation/spjk_dp.png b/riis-web/src/assets/navigation/spjk_dp.png
new file mode 100644
index 0000000..97b870b
Binary files /dev/null and b/riis-web/src/assets/navigation/spjk_dp.png differ
diff --git a/riis-web/src/assets/navigation/spjk_dp1.png b/riis-web/src/assets/navigation/spjk_dp1.png
new file mode 100644
index 0000000..0e99968
Binary files /dev/null and b/riis-web/src/assets/navigation/spjk_dp1.png differ
diff --git a/riis-web/src/assets/navigation/spjk_dy.png b/riis-web/src/assets/navigation/spjk_dy.png
new file mode 100644
index 0000000..58740fb
Binary files /dev/null and b/riis-web/src/assets/navigation/spjk_dy.png differ
diff --git a/riis-web/src/assets/navigation/spjk_fz.png b/riis-web/src/assets/navigation/spjk_fz.png
new file mode 100644
index 0000000..3ddd94f
Binary files /dev/null and b/riis-web/src/assets/navigation/spjk_fz.png differ
diff --git a/riis-web/src/assets/navigation/spjk_fz1.png b/riis-web/src/assets/navigation/spjk_fz1.png
new file mode 100644
index 0000000..535d8df
Binary files /dev/null and b/riis-web/src/assets/navigation/spjk_fz1.png differ
diff --git a/riis-web/src/assets/navigation/spjk_gb.png b/riis-web/src/assets/navigation/spjk_gb.png
new file mode 100644
index 0000000..5f2cdff
Binary files /dev/null and b/riis-web/src/assets/navigation/spjk_gb.png differ
diff --git a/riis-web/src/assets/navigation/spjk_gb1.png b/riis-web/src/assets/navigation/spjk_gb1.png
new file mode 100644
index 0000000..b364eab
Binary files /dev/null and b/riis-web/src/assets/navigation/spjk_gb1.png differ
diff --git a/riis-web/src/assets/navigation/spjk_hf.png b/riis-web/src/assets/navigation/spjk_hf.png
new file mode 100644
index 0000000..66a0dd5
Binary files /dev/null and b/riis-web/src/assets/navigation/spjk_hf.png differ
diff --git a/riis-web/src/assets/navigation/spjk_hf1.png b/riis-web/src/assets/navigation/spjk_hf1.png
new file mode 100644
index 0000000..526054a
Binary files /dev/null and b/riis-web/src/assets/navigation/spjk_hf1.png differ
diff --git a/riis-web/src/assets/navigation/spjk_jslx.png b/riis-web/src/assets/navigation/spjk_jslx.png
new file mode 100644
index 0000000..4320a03
Binary files /dev/null and b/riis-web/src/assets/navigation/spjk_jslx.png differ
diff --git a/riis-web/src/assets/navigation/spjk_jslx1.png b/riis-web/src/assets/navigation/spjk_jslx1.png
new file mode 100644
index 0000000..d54df57
Binary files /dev/null and b/riis-web/src/assets/navigation/spjk_jslx1.png differ
diff --git a/riis-web/src/assets/navigation/spjk_jt.png b/riis-web/src/assets/navigation/spjk_jt.png
new file mode 100644
index 0000000..f959869
Binary files /dev/null and b/riis-web/src/assets/navigation/spjk_jt.png differ
diff --git a/riis-web/src/assets/navigation/spjk_jt1.png b/riis-web/src/assets/navigation/spjk_jt1.png
new file mode 100644
index 0000000..5fceec7
Binary files /dev/null and b/riis-web/src/assets/navigation/spjk_jt1.png differ
diff --git a/riis-web/src/assets/navigation/spjk_ks.png b/riis-web/src/assets/navigation/spjk_ks.png
new file mode 100644
index 0000000..8fef764
Binary files /dev/null and b/riis-web/src/assets/navigation/spjk_ks.png differ
diff --git a/riis-web/src/assets/navigation/spjk_ks1.png b/riis-web/src/assets/navigation/spjk_ks1.png
new file mode 100644
index 0000000..e18439f
Binary files /dev/null and b/riis-web/src/assets/navigation/spjk_ks1.png differ
diff --git a/riis-web/src/assets/navigation/spjk_kslx.png b/riis-web/src/assets/navigation/spjk_kslx.png
new file mode 100644
index 0000000..040d589
Binary files /dev/null and b/riis-web/src/assets/navigation/spjk_kslx.png differ
diff --git a/riis-web/src/assets/navigation/spjk_kslx1.png b/riis-web/src/assets/navigation/spjk_kslx1.png
new file mode 100644
index 0000000..585a0e4
Binary files /dev/null and b/riis-web/src/assets/navigation/spjk_kslx1.png differ
diff --git a/riis-web/src/assets/navigation/spjk_qj.png b/riis-web/src/assets/navigation/spjk_qj.png
new file mode 100644
index 0000000..d73ddf0
Binary files /dev/null and b/riis-web/src/assets/navigation/spjk_qj.png differ
diff --git a/riis-web/src/assets/navigation/spjk_qj1.png b/riis-web/src/assets/navigation/spjk_qj1.png
new file mode 100644
index 0000000..cc4b1fd
Binary files /dev/null and b/riis-web/src/assets/navigation/spjk_qj1.png differ
diff --git a/riis-web/src/assets/navigation/spjk_qxj.png b/riis-web/src/assets/navigation/spjk_qxj.png
new file mode 100644
index 0000000..4aa697a
Binary files /dev/null and b/riis-web/src/assets/navigation/spjk_qxj.png differ
diff --git a/riis-web/src/assets/navigation/spjk_qxj1.png b/riis-web/src/assets/navigation/spjk_qxj1.png
new file mode 100644
index 0000000..de9fed5
Binary files /dev/null and b/riis-web/src/assets/navigation/spjk_qxj1.png differ
diff --git a/riis-web/src/assets/navigation/spjk_sc.png b/riis-web/src/assets/navigation/spjk_sc.png
new file mode 100644
index 0000000..aedecf1
Binary files /dev/null and b/riis-web/src/assets/navigation/spjk_sc.png differ
diff --git a/riis-web/src/assets/navigation/spjk_sx.png b/riis-web/src/assets/navigation/spjk_sx.png
new file mode 100644
index 0000000..349d829
Binary files /dev/null and b/riis-web/src/assets/navigation/spjk_sx.png differ
diff --git a/riis-web/src/assets/navigation/spjk_sx1.png b/riis-web/src/assets/navigation/spjk_sx1.png
new file mode 100644
index 0000000..ed026f1
Binary files /dev/null and b/riis-web/src/assets/navigation/spjk_sx1.png differ
diff --git a/riis-web/src/assets/navigation/spjk_sy.png b/riis-web/src/assets/navigation/spjk_sy.png
new file mode 100644
index 0000000..ee53bf6
Binary files /dev/null and b/riis-web/src/assets/navigation/spjk_sy.png differ
diff --git a/riis-web/src/assets/navigation/spjk_sy1.png b/riis-web/src/assets/navigation/spjk_sy1.png
new file mode 100644
index 0000000..49cb0f2
Binary files /dev/null and b/riis-web/src/assets/navigation/spjk_sy1.png differ
diff --git a/riis-web/src/assets/navigation/spjk_sy2.png b/riis-web/src/assets/navigation/spjk_sy2.png
new file mode 100644
index 0000000..72283e9
Binary files /dev/null and b/riis-web/src/assets/navigation/spjk_sy2.png differ
diff --git a/riis-web/src/assets/navigation/spjk_sy3.png b/riis-web/src/assets/navigation/spjk_sy3.png
new file mode 100644
index 0000000..7a612b9
Binary files /dev/null and b/riis-web/src/assets/navigation/spjk_sy3.png differ
diff --git a/riis-web/src/assets/navigation/spjk_sz.png b/riis-web/src/assets/navigation/spjk_sz.png
new file mode 100644
index 0000000..af353e8
Binary files /dev/null and b/riis-web/src/assets/navigation/spjk_sz.png differ
diff --git a/riis-web/src/assets/navigation/spjk_xp.png b/riis-web/src/assets/navigation/spjk_xp.png
new file mode 100644
index 0000000..fcefc7b
Binary files /dev/null and b/riis-web/src/assets/navigation/spjk_xp.png differ
diff --git a/riis-web/src/assets/navigation/spjk_xp1.png b/riis-web/src/assets/navigation/spjk_xp1.png
new file mode 100644
index 0000000..32ae1ed
Binary files /dev/null and b/riis-web/src/assets/navigation/spjk_xp1.png differ
diff --git a/riis-web/src/assets/navigation/spjk_zt.png b/riis-web/src/assets/navigation/spjk_zt.png
new file mode 100644
index 0000000..cf98584
Binary files /dev/null and b/riis-web/src/assets/navigation/spjk_zt.png differ
diff --git a/riis-web/src/assets/navigation/spjk_zt1.png b/riis-web/src/assets/navigation/spjk_zt1.png
new file mode 100644
index 0000000..5e858f7
Binary files /dev/null and b/riis-web/src/assets/navigation/spjk_zt1.png differ
diff --git a/riis-web/src/assets/navigation/ss.png b/riis-web/src/assets/navigation/ss.png
new file mode 100644
index 0000000..6f76bc4
Binary files /dev/null and b/riis-web/src/assets/navigation/ss.png differ
diff --git a/riis-web/src/assets/navigation/swxs_550.png b/riis-web/src/assets/navigation/swxs_550.png
new file mode 100644
index 0000000..7591d95
Binary files /dev/null and b/riis-web/src/assets/navigation/swxs_550.png differ
diff --git a/riis-web/src/assets/navigation/swxs_sxt.png b/riis-web/src/assets/navigation/swxs_sxt.png
new file mode 100644
index 0000000..4d24e65
Binary files /dev/null and b/riis-web/src/assets/navigation/swxs_sxt.png differ
diff --git a/riis-web/src/assets/navigation/swxs_sz_ch.png b/riis-web/src/assets/navigation/swxs_sz_ch.png
new file mode 100644
index 0000000..9427ffa
Binary files /dev/null and b/riis-web/src/assets/navigation/swxs_sz_ch.png differ
diff --git a/riis-web/src/assets/navigation/swxs_sz_cjrw.png b/riis-web/src/assets/navigation/swxs_sz_cjrw.png
new file mode 100644
index 0000000..171dd9f
Binary files /dev/null and b/riis-web/src/assets/navigation/swxs_sz_cjrw.png differ
diff --git a/riis-web/src/assets/navigation/swxs_sz_fw.png b/riis-web/src/assets/navigation/swxs_sz_fw.png
new file mode 100644
index 0000000..a3be47f
Binary files /dev/null and b/riis-web/src/assets/navigation/swxs_sz_fw.png differ
diff --git a/riis-web/src/assets/navigation/swxs_sz_fw1.png b/riis-web/src/assets/navigation/swxs_sz_fw1.png
new file mode 100644
index 0000000..b6e0344
Binary files /dev/null and b/riis-web/src/assets/navigation/swxs_sz_fw1.png differ
diff --git a/riis-web/src/assets/navigation/swxs_sz_gl.png b/riis-web/src/assets/navigation/swxs_sz_gl.png
new file mode 100644
index 0000000..7f836bf
Binary files /dev/null and b/riis-web/src/assets/navigation/swxs_sz_gl.png differ
diff --git a/riis-web/src/assets/navigation/swxs_sz_ks.png b/riis-web/src/assets/navigation/swxs_sz_ks.png
new file mode 100644
index 0000000..614ba99
Binary files /dev/null and b/riis-web/src/assets/navigation/swxs_sz_ks.png differ
diff --git a/riis-web/src/assets/navigation/swxs_sz_ks1.png b/riis-web/src/assets/navigation/swxs_sz_ks1.png
new file mode 100644
index 0000000..a6c1589
Binary files /dev/null and b/riis-web/src/assets/navigation/swxs_sz_ks1.png differ
diff --git a/riis-web/src/assets/navigation/swxs_sz_lx.png b/riis-web/src/assets/navigation/swxs_sz_lx.png
new file mode 100644
index 0000000..d4e5fd8
Binary files /dev/null and b/riis-web/src/assets/navigation/swxs_sz_lx.png differ
diff --git a/riis-web/src/assets/navigation/swxs_sz_my.png b/riis-web/src/assets/navigation/swxs_sz_my.png
new file mode 100644
index 0000000..b167997
Binary files /dev/null and b/riis-web/src/assets/navigation/swxs_sz_my.png differ
diff --git a/riis-web/src/assets/navigation/swxs_sz_qxgl.png b/riis-web/src/assets/navigation/swxs_sz_qxgl.png
new file mode 100644
index 0000000..fcd2bda
Binary files /dev/null and b/riis-web/src/assets/navigation/swxs_sz_qxgl.png differ
diff --git a/riis-web/src/assets/navigation/swxs_sz_sb.png b/riis-web/src/assets/navigation/swxs_sz_sb.png
new file mode 100644
index 0000000..f21c2e1
Binary files /dev/null and b/riis-web/src/assets/navigation/swxs_sz_sb.png differ
diff --git a/riis-web/src/assets/navigation/swxs_sz_sb1.png b/riis-web/src/assets/navigation/swxs_sz_sb1.png
new file mode 100644
index 0000000..1d3693a
Binary files /dev/null and b/riis-web/src/assets/navigation/swxs_sz_sb1.png differ
diff --git a/riis-web/src/assets/navigation/swxs_sz_sj.png b/riis-web/src/assets/navigation/swxs_sz_sj.png
new file mode 100644
index 0000000..c40d338
Binary files /dev/null and b/riis-web/src/assets/navigation/swxs_sz_sj.png differ
diff --git a/riis-web/src/assets/navigation/swxs_sz_sj1.png b/riis-web/src/assets/navigation/swxs_sz_sj1.png
new file mode 100644
index 0000000..5ee6857
Binary files /dev/null and b/riis-web/src/assets/navigation/swxs_sz_sj1.png differ
diff --git a/riis-web/src/assets/navigation/swxs_sz_sxt.png b/riis-web/src/assets/navigation/swxs_sz_sxt.png
new file mode 100644
index 0000000..38125c2
Binary files /dev/null and b/riis-web/src/assets/navigation/swxs_sz_sxt.png differ
diff --git a/riis-web/src/assets/navigation/swxs_sz_sxt1.png b/riis-web/src/assets/navigation/swxs_sz_sxt1.png
new file mode 100644
index 0000000..cfc0f8d
Binary files /dev/null and b/riis-web/src/assets/navigation/swxs_sz_sxt1.png differ
diff --git a/riis-web/src/assets/navigation/swxs_sz_tz.png b/riis-web/src/assets/navigation/swxs_sz_tz.png
new file mode 100644
index 0000000..41281b4
Binary files /dev/null and b/riis-web/src/assets/navigation/swxs_sz_tz.png differ
diff --git a/riis-web/src/assets/navigation/swxs_sz_tz1.png b/riis-web/src/assets/navigation/swxs_sz_tz1.png
new file mode 100644
index 0000000..071db2a
Binary files /dev/null and b/riis-web/src/assets/navigation/swxs_sz_tz1.png differ
diff --git a/riis-web/src/assets/navigation/swxs_sz_wc.png b/riis-web/src/assets/navigation/swxs_sz_wc.png
new file mode 100644
index 0000000..5f515f1
Binary files /dev/null and b/riis-web/src/assets/navigation/swxs_sz_wc.png differ
diff --git a/riis-web/src/assets/navigation/swxs_sz_wc1.png b/riis-web/src/assets/navigation/swxs_sz_wc1.png
new file mode 100644
index 0000000..605f3ec
Binary files /dev/null and b/riis-web/src/assets/navigation/swxs_sz_wc1.png differ
diff --git a/riis-web/src/assets/navigation/swxs_sz_wrc.png b/riis-web/src/assets/navigation/swxs_sz_wrc.png
new file mode 100644
index 0000000..2a60b7b
Binary files /dev/null and b/riis-web/src/assets/navigation/swxs_sz_wrc.png differ
diff --git a/riis-web/src/assets/navigation/swxs_sz_wrc1.png b/riis-web/src/assets/navigation/swxs_sz_wrc1.png
new file mode 100644
index 0000000..285242c
Binary files /dev/null and b/riis-web/src/assets/navigation/swxs_sz_wrc1.png differ
diff --git a/riis-web/src/assets/navigation/swxs_sz_xgmc.png b/riis-web/src/assets/navigation/swxs_sz_xgmc.png
new file mode 100644
index 0000000..c7d1216
Binary files /dev/null and b/riis-web/src/assets/navigation/swxs_sz_xgmc.png differ
diff --git a/riis-web/src/assets/navigation/swxs_sz_xz.png b/riis-web/src/assets/navigation/swxs_sz_xz.png
new file mode 100644
index 0000000..866f52a
Binary files /dev/null and b/riis-web/src/assets/navigation/swxs_sz_xz.png differ
diff --git a/riis-web/src/assets/navigation/swxs_sz_xz1.png b/riis-web/src/assets/navigation/swxs_sz_xz1.png
new file mode 100644
index 0000000..b705698
Binary files /dev/null and b/riis-web/src/assets/navigation/swxs_sz_xz1.png differ
diff --git a/riis-web/src/assets/navigation/swxs_sz_yd.png b/riis-web/src/assets/navigation/swxs_sz_yd.png
new file mode 100644
index 0000000..aa89e52
Binary files /dev/null and b/riis-web/src/assets/navigation/swxs_sz_yd.png differ
diff --git a/riis-web/src/assets/navigation/swxs_sz_yd1.png b/riis-web/src/assets/navigation/swxs_sz_yd1.png
new file mode 100644
index 0000000..d1474d0
Binary files /dev/null and b/riis-web/src/assets/navigation/swxs_sz_yd1.png differ
diff --git a/riis-web/src/assets/navigation/swxs_xsrw_ls.png b/riis-web/src/assets/navigation/swxs_xsrw_ls.png
new file mode 100644
index 0000000..e7b08c6
Binary files /dev/null and b/riis-web/src/assets/navigation/swxs_xsrw_ls.png differ
diff --git a/riis-web/src/assets/navigation/sxj_01.png b/riis-web/src/assets/navigation/sxj_01.png
new file mode 100644
index 0000000..c750eab
Binary files /dev/null and b/riis-web/src/assets/navigation/sxj_01.png differ
diff --git a/riis-web/src/assets/navigation/sxj_011.png b/riis-web/src/assets/navigation/sxj_011.png
new file mode 100644
index 0000000..61d5766
Binary files /dev/null and b/riis-web/src/assets/navigation/sxj_011.png differ
diff --git a/riis-web/src/assets/navigation/sxj_02.png b/riis-web/src/assets/navigation/sxj_02.png
new file mode 100644
index 0000000..b7d845c
Binary files /dev/null and b/riis-web/src/assets/navigation/sxj_02.png differ
diff --git a/riis-web/src/assets/navigation/sxj_022.png b/riis-web/src/assets/navigation/sxj_022.png
new file mode 100644
index 0000000..b18d172
Binary files /dev/null and b/riis-web/src/assets/navigation/sxj_022.png differ
diff --git a/riis-web/src/assets/navigation/sxj_03.png b/riis-web/src/assets/navigation/sxj_03.png
new file mode 100644
index 0000000..517c109
Binary files /dev/null and b/riis-web/src/assets/navigation/sxj_03.png differ
diff --git a/riis-web/src/assets/navigation/sxj_033.png b/riis-web/src/assets/navigation/sxj_033.png
new file mode 100644
index 0000000..aa95b91
Binary files /dev/null and b/riis-web/src/assets/navigation/sxj_033.png differ
diff --git a/riis-web/src/assets/navigation/sxj_04.png b/riis-web/src/assets/navigation/sxj_04.png
new file mode 100644
index 0000000..695e244
Binary files /dev/null and b/riis-web/src/assets/navigation/sxj_04.png differ
diff --git a/riis-web/src/assets/navigation/sxj_044.png b/riis-web/src/assets/navigation/sxj_044.png
new file mode 100644
index 0000000..cdb1b03
Binary files /dev/null and b/riis-web/src/assets/navigation/sxj_044.png differ
diff --git a/riis-web/src/assets/navigation/sxj_05.png b/riis-web/src/assets/navigation/sxj_05.png
new file mode 100644
index 0000000..4b72a0b
Binary files /dev/null and b/riis-web/src/assets/navigation/sxj_05.png differ
diff --git a/riis-web/src/assets/navigation/sxj_055.png b/riis-web/src/assets/navigation/sxj_055.png
new file mode 100644
index 0000000..7dae1c8
Binary files /dev/null and b/riis-web/src/assets/navigation/sxj_055.png differ
diff --git a/riis-web/src/assets/navigation/sxj_06.png b/riis-web/src/assets/navigation/sxj_06.png
new file mode 100644
index 0000000..0939074
Binary files /dev/null and b/riis-web/src/assets/navigation/sxj_06.png differ
diff --git a/riis-web/src/assets/navigation/sxj_066.png b/riis-web/src/assets/navigation/sxj_066.png
new file mode 100644
index 0000000..87ae399
Binary files /dev/null and b/riis-web/src/assets/navigation/sxj_066.png differ
diff --git a/riis-web/src/assets/navigation/sxj_07.png b/riis-web/src/assets/navigation/sxj_07.png
new file mode 100644
index 0000000..1f8dfee
Binary files /dev/null and b/riis-web/src/assets/navigation/sxj_07.png differ
diff --git a/riis-web/src/assets/navigation/sxj_077.png b/riis-web/src/assets/navigation/sxj_077.png
new file mode 100644
index 0000000..8cfc2b8
Binary files /dev/null and b/riis-web/src/assets/navigation/sxj_077.png differ
diff --git a/riis-web/src/assets/navigation/sxj_08.png b/riis-web/src/assets/navigation/sxj_08.png
new file mode 100644
index 0000000..0522819
Binary files /dev/null and b/riis-web/src/assets/navigation/sxj_08.png differ
diff --git a/riis-web/src/assets/navigation/sxj_088.png b/riis-web/src/assets/navigation/sxj_088.png
new file mode 100644
index 0000000..13875f2
Binary files /dev/null and b/riis-web/src/assets/navigation/sxj_088.png differ
diff --git a/riis-web/src/assets/navigation/sxj_09.png b/riis-web/src/assets/navigation/sxj_09.png
new file mode 100644
index 0000000..7f76e48
Binary files /dev/null and b/riis-web/src/assets/navigation/sxj_09.png differ
diff --git a/riis-web/src/assets/navigation/sxj_099.png b/riis-web/src/assets/navigation/sxj_099.png
new file mode 100644
index 0000000..4aca3c0
Binary files /dev/null and b/riis-web/src/assets/navigation/sxj_099.png differ
diff --git a/riis-web/src/assets/navigation/sxj_1.png b/riis-web/src/assets/navigation/sxj_1.png
new file mode 100644
index 0000000..e86bb14
Binary files /dev/null and b/riis-web/src/assets/navigation/sxj_1.png differ
diff --git a/riis-web/src/assets/navigation/sxj_11.png b/riis-web/src/assets/navigation/sxj_11.png
new file mode 100644
index 0000000..21c3d2a
Binary files /dev/null and b/riis-web/src/assets/navigation/sxj_11.png differ
diff --git a/riis-web/src/assets/navigation/sxj_2.png b/riis-web/src/assets/navigation/sxj_2.png
new file mode 100644
index 0000000..8f6f7d9
Binary files /dev/null and b/riis-web/src/assets/navigation/sxj_2.png differ
diff --git a/riis-web/src/assets/navigation/sxj_21.png b/riis-web/src/assets/navigation/sxj_21.png
new file mode 100644
index 0000000..a363f7e
Binary files /dev/null and b/riis-web/src/assets/navigation/sxj_21.png differ
diff --git a/riis-web/src/assets/navigation/sxj_3.png b/riis-web/src/assets/navigation/sxj_3.png
new file mode 100644
index 0000000..582a3f9
Binary files /dev/null and b/riis-web/src/assets/navigation/sxj_3.png differ
diff --git a/riis-web/src/assets/navigation/sxj_31.png b/riis-web/src/assets/navigation/sxj_31.png
new file mode 100644
index 0000000..ef9d49e
Binary files /dev/null and b/riis-web/src/assets/navigation/sxj_31.png differ
diff --git a/riis-web/src/assets/navigation/sxj_4.png b/riis-web/src/assets/navigation/sxj_4.png
new file mode 100644
index 0000000..41a086e
Binary files /dev/null and b/riis-web/src/assets/navigation/sxj_4.png differ
diff --git a/riis-web/src/assets/navigation/sxj_41.png b/riis-web/src/assets/navigation/sxj_41.png
new file mode 100644
index 0000000..68a2158
Binary files /dev/null and b/riis-web/src/assets/navigation/sxj_41.png differ
diff --git a/riis-web/src/assets/navigation/sxj_5.png b/riis-web/src/assets/navigation/sxj_5.png
new file mode 100644
index 0000000..4c831e7
Binary files /dev/null and b/riis-web/src/assets/navigation/sxj_5.png differ
diff --git a/riis-web/src/assets/navigation/sxj_51.png b/riis-web/src/assets/navigation/sxj_51.png
new file mode 100644
index 0000000..14e147f
Binary files /dev/null and b/riis-web/src/assets/navigation/sxj_51.png differ
diff --git a/riis-web/src/assets/navigation/sxj_6.png b/riis-web/src/assets/navigation/sxj_6.png
new file mode 100644
index 0000000..f542d2a
Binary files /dev/null and b/riis-web/src/assets/navigation/sxj_6.png differ
diff --git a/riis-web/src/assets/navigation/sxj_61.png b/riis-web/src/assets/navigation/sxj_61.png
new file mode 100644
index 0000000..504289d
Binary files /dev/null and b/riis-web/src/assets/navigation/sxj_61.png differ
diff --git a/riis-web/src/assets/navigation/sxj_7.png b/riis-web/src/assets/navigation/sxj_7.png
new file mode 100644
index 0000000..5c88290
Binary files /dev/null and b/riis-web/src/assets/navigation/sxj_7.png differ
diff --git a/riis-web/src/assets/navigation/sxj_71.png b/riis-web/src/assets/navigation/sxj_71.png
new file mode 100644
index 0000000..d07c910
Binary files /dev/null and b/riis-web/src/assets/navigation/sxj_71.png differ
diff --git a/riis-web/src/assets/navigation/sxj_8.png b/riis-web/src/assets/navigation/sxj_8.png
new file mode 100644
index 0000000..62da947
Binary files /dev/null and b/riis-web/src/assets/navigation/sxj_8.png differ
diff --git a/riis-web/src/assets/navigation/sxj_81.png b/riis-web/src/assets/navigation/sxj_81.png
new file mode 100644
index 0000000..58418d6
Binary files /dev/null and b/riis-web/src/assets/navigation/sxj_81.png differ
diff --git a/riis-web/src/assets/navigation/sxj_9.png b/riis-web/src/assets/navigation/sxj_9.png
new file mode 100644
index 0000000..8047512
Binary files /dev/null and b/riis-web/src/assets/navigation/sxj_9.png differ
diff --git a/riis-web/src/assets/navigation/sxj_91.png b/riis-web/src/assets/navigation/sxj_91.png
new file mode 100644
index 0000000..e0f2e96
Binary files /dev/null and b/riis-web/src/assets/navigation/sxj_91.png differ
diff --git a/riis-web/src/assets/navigation/tk_gb.png b/riis-web/src/assets/navigation/tk_gb.png
new file mode 100644
index 0000000..342301f
Binary files /dev/null and b/riis-web/src/assets/navigation/tk_gb.png differ
diff --git a/riis-web/src/assets/navigation/tk_you.png b/riis-web/src/assets/navigation/tk_you.png
new file mode 100644
index 0000000..c44df13
Binary files /dev/null and b/riis-web/src/assets/navigation/tk_you.png differ
diff --git a/riis-web/src/assets/navigation/tk_yous.png b/riis-web/src/assets/navigation/tk_yous.png
new file mode 100644
index 0000000..1dd708d
Binary files /dev/null and b/riis-web/src/assets/navigation/tk_yous.png differ
diff --git a/riis-web/src/assets/navigation/tk_youx.png b/riis-web/src/assets/navigation/tk_youx.png
new file mode 100644
index 0000000..2fe610e
Binary files /dev/null and b/riis-web/src/assets/navigation/tk_youx.png differ
diff --git a/riis-web/src/assets/navigation/tk_zuo.png b/riis-web/src/assets/navigation/tk_zuo.png
new file mode 100644
index 0000000..394b00b
Binary files /dev/null and b/riis-web/src/assets/navigation/tk_zuo.png differ
diff --git a/riis-web/src/assets/navigation/tk_zuos.png b/riis-web/src/assets/navigation/tk_zuos.png
new file mode 100644
index 0000000..c8bd05c
Binary files /dev/null and b/riis-web/src/assets/navigation/tk_zuos.png differ
diff --git a/riis-web/src/assets/navigation/tk_zuox.png b/riis-web/src/assets/navigation/tk_zuox.png
new file mode 100644
index 0000000..bc98381
Binary files /dev/null and b/riis-web/src/assets/navigation/tk_zuox.png differ
diff --git a/riis-web/src/assets/navigation/top_qp.png b/riis-web/src/assets/navigation/top_qp.png
new file mode 100644
index 0000000..ff50ac4
Binary files /dev/null and b/riis-web/src/assets/navigation/top_qp.png differ
diff --git a/riis-web/src/assets/navigation/top_qp1.png b/riis-web/src/assets/navigation/top_qp1.png
new file mode 100644
index 0000000..f47c9a8
Binary files /dev/null and b/riis-web/src/assets/navigation/top_qp1.png differ
diff --git a/riis-web/src/assets/navigation/xsjk_ckxq.png b/riis-web/src/assets/navigation/xsjk_ckxq.png
new file mode 100644
index 0000000..f1e3aca
Binary files /dev/null and b/riis-web/src/assets/navigation/xsjk_ckxq.png differ
diff --git a/riis-web/src/assets/navigation/xsjk_ckxq1.png b/riis-web/src/assets/navigation/xsjk_ckxq1.png
new file mode 100644
index 0000000..b39d6b7
Binary files /dev/null and b/riis-web/src/assets/navigation/xsjk_ckxq1.png differ
diff --git a/riis-web/src/assets/navigation/xsjk_hf.png b/riis-web/src/assets/navigation/xsjk_hf.png
new file mode 100644
index 0000000..9285ef8
Binary files /dev/null and b/riis-web/src/assets/navigation/xsjk_hf.png differ
diff --git a/riis-web/src/assets/navigation/xsjk_hf1.png b/riis-web/src/assets/navigation/xsjk_hf1.png
new file mode 100644
index 0000000..9918ae9
Binary files /dev/null and b/riis-web/src/assets/navigation/xsjk_hf1.png differ
diff --git a/riis-web/src/assets/navigation/xsjk_ks.png b/riis-web/src/assets/navigation/xsjk_ks.png
new file mode 100644
index 0000000..a7a13b0
Binary files /dev/null and b/riis-web/src/assets/navigation/xsjk_ks.png differ
diff --git a/riis-web/src/assets/navigation/xsjk_ks1.png b/riis-web/src/assets/navigation/xsjk_ks1.png
new file mode 100644
index 0000000..746f4d1
Binary files /dev/null and b/riis-web/src/assets/navigation/xsjk_ks1.png differ
diff --git a/riis-web/src/assets/navigation/xsjk_xz.png b/riis-web/src/assets/navigation/xsjk_xz.png
new file mode 100644
index 0000000..acbcb63
Binary files /dev/null and b/riis-web/src/assets/navigation/xsjk_xz.png differ
diff --git a/riis-web/src/assets/navigation/xsjk_xz1.png b/riis-web/src/assets/navigation/xsjk_xz1.png
new file mode 100644
index 0000000..bbe2da4
Binary files /dev/null and b/riis-web/src/assets/navigation/xsjk_xz1.png differ
diff --git a/riis-web/src/assets/navigation/xsjk_yl.png b/riis-web/src/assets/navigation/xsjk_yl.png
new file mode 100644
index 0000000..7f1fa76
Binary files /dev/null and b/riis-web/src/assets/navigation/xsjk_yl.png differ
diff --git a/riis-web/src/assets/navigation/xsjk_zt.png b/riis-web/src/assets/navigation/xsjk_zt.png
new file mode 100644
index 0000000..85d4000
Binary files /dev/null and b/riis-web/src/assets/navigation/xsjk_zt.png differ
diff --git a/riis-web/src/assets/navigation/xsjk_zt1.png b/riis-web/src/assets/navigation/xsjk_zt1.png
new file mode 100644
index 0000000..f5d8b93
Binary files /dev/null and b/riis-web/src/assets/navigation/xsjk_zt1.png differ
diff --git a/riis-web/src/assets/navigation/xsjk_zz.png b/riis-web/src/assets/navigation/xsjk_zz.png
new file mode 100644
index 0000000..e852364
Binary files /dev/null and b/riis-web/src/assets/navigation/xsjk_zz.png differ
diff --git a/riis-web/src/assets/navigation/xsjk_zz1.png b/riis-web/src/assets/navigation/xsjk_zz1.png
new file mode 100644
index 0000000..ea83f2f
Binary files /dev/null and b/riis-web/src/assets/navigation/xsjk_zz1.png differ
diff --git a/riis-web/src/assets/navigation/znwd_fs.png b/riis-web/src/assets/navigation/znwd_fs.png
new file mode 100644
index 0000000..8707a2e
Binary files /dev/null and b/riis-web/src/assets/navigation/znwd_fs.png differ
diff --git a/riis-web/src/assets/navigation/znwd_fz.png b/riis-web/src/assets/navigation/znwd_fz.png
new file mode 100644
index 0000000..a4fd0f9
Binary files /dev/null and b/riis-web/src/assets/navigation/znwd_fz.png differ
diff --git a/riis-web/src/assets/navigation/znwd_fz1.png b/riis-web/src/assets/navigation/znwd_fz1.png
new file mode 100644
index 0000000..960e601
Binary files /dev/null and b/riis-web/src/assets/navigation/znwd_fz1.png differ
diff --git a/riis-web/src/assets/navigation/znwd_lj.png b/riis-web/src/assets/navigation/znwd_lj.png
new file mode 100644
index 0000000..85824df
Binary files /dev/null and b/riis-web/src/assets/navigation/znwd_lj.png differ
diff --git a/riis-web/src/assets/navigation/znwd_sc.png b/riis-web/src/assets/navigation/znwd_sc.png
new file mode 100644
index 0000000..e5fd23c
Binary files /dev/null and b/riis-web/src/assets/navigation/znwd_sc.png differ
diff --git a/riis-web/src/assets/navigation/znwd_tw.png b/riis-web/src/assets/navigation/znwd_tw.png
new file mode 100644
index 0000000..f836931
Binary files /dev/null and b/riis-web/src/assets/navigation/znwd_tw.png differ
diff --git a/riis-web/src/assets/navigation/znwd_xg.png b/riis-web/src/assets/navigation/znwd_xg.png
new file mode 100644
index 0000000..08707f8
Binary files /dev/null and b/riis-web/src/assets/navigation/znwd_xg.png differ
diff --git a/riis-web/src/assets/navigation/znwd_xj.png b/riis-web/src/assets/navigation/znwd_xj.png
new file mode 100644
index 0000000..4552534
Binary files /dev/null and b/riis-web/src/assets/navigation/znwd_xj.png differ
diff --git a/riis-web/src/assets/navigation/znwd_zs.png b/riis-web/src/assets/navigation/znwd_zs.png
new file mode 100644
index 0000000..f866946
Binary files /dev/null and b/riis-web/src/assets/navigation/znwd_zs.png differ
diff --git a/riis-web/src/assets/navigation/zwsp.png b/riis-web/src/assets/navigation/zwsp.png
new file mode 100644
index 0000000..d317cf7
Binary files /dev/null and b/riis-web/src/assets/navigation/zwsp.png differ
diff --git a/riis-web/src/assets/navigation/zwtp.png b/riis-web/src/assets/navigation/zwtp.png
new file mode 100644
index 0000000..10006b1
Binary files /dev/null and b/riis-web/src/assets/navigation/zwtp.png differ
diff --git a/riis-web/src/components/seccmsdialog/eldialog.vue b/riis-web/src/components/seccmsdialog/eldialog.vue
index 435197c..174255a 100644
--- a/riis-web/src/components/seccmsdialog/eldialog.vue
+++ b/riis-web/src/components/seccmsdialog/eldialog.vue
@@ -35,16 +35,16 @@ const isdialog = true
 <template>
     <el-dialog v-model="isdialog" :close-on-click-modal="false" :before-close="closeChange" :title="''" append-to-body :width="width"  draggable class="newType newTopHeaderType"
     :class="elclass" :z-index="zIndex">
-      <img src="@/assets/tankuang/tk_zuos.png" alt="" style="position:absolute ;top:-2px;left: -2px;">
-      <img src="@/assets/tankuang/tk_yous.png" alt="" style="position:absolute ;top:-2px;right: -2px;">
-      <img src="@/assets/tankuang/tk_zuox.png" alt="" style="position:absolute ;bottom:-2px;left: -2px;">
-      <img src="@/assets/tankuang/tk_youx.png" alt="" style="position:absolute ;bottom:-2px;right: -2px;">
-      <img src="@/assets/tankuang/gb.png" alt="" style="position:absolute ;top:20px;right: 20px;z-index:9;cursor: pointer;"
+      <img src="@/assets/navigation/tk_zuos.png" alt="" style="position:absolute ;top:-2px;left: -2px;">
+      <img src="@/assets/navigation/tk_yous.png" alt="" style="position:absolute ;top:-2px;right: -2px;">
+      <img src="@/assets/navigation/tk_zuox.png" alt="" style="position:absolute ;bottom:-2px;left: -2px;">
+      <img src="@/assets/navigation/tk_youx.png" alt="" style="position:absolute ;bottom:-2px;right: -2px;">
+      <img src="@/assets/navigation/tk_gb.png" alt="" style="position:absolute ;top:20px;right: 20px;z-index:9;cursor: pointer;"
       @click="closeChange">
       <div class="tuanchutopbox">
-        <img src="@/assets/tankuang/tk_zuo.png" alt="">
+        <img src="@/assets/navigation/tk_zuo.png" alt="">
         <div class="tuanchutoptitle">{{ title }}</div>
-        <img src="@/assets/tankuang/tk_you.png" alt="">
+        <img src="@/assets/navigation/tk_you.png" alt="">
       </div>
       <div  style="position: relative;z-index: 20;">
         <slot name="PopFrameContent"></slot>
@@ -59,7 +59,7 @@ const isdialog = true
   position: relative;
   background: #001e55;
   border: 1px solid #008eaa;
-  border-radius: 40px;
+  /* border-radius: 40px; */
   /* background-image: url(@/assets/index/xsjk_yl_1.png); */
   /* background-size:100% 100% ; */
 }
diff --git a/riis-web/src/layout/components/Navbar.vue b/riis-web/src/layout/components/Navbar.vue
index fedb0a2..3093adb 100644
--- a/riis-web/src/layout/components/Navbar.vue
+++ b/riis-web/src/layout/components/Navbar.vue
@@ -469,6 +469,7 @@ watch(() => props.CloseNav, (newValue, oldValue) => {
       margin-left: -12px;
       position: absolute;
       top: 40px;
+      z-index:9999;
 
       .nav-son-list {
         width: 100%;
diff --git a/riis-web/src/views/collectmonitor/videomonitor/index.vue b/riis-web/src/views/collectmonitor/videomonitor/index.vue
index 1e92563..dcc07ef 100644
--- a/riis-web/src/views/collectmonitor/videomonitor/index.vue
+++ b/riis-web/src/views/collectmonitor/videomonitor/index.vue
@@ -1090,7 +1090,7 @@ const isGaoliang:any = ref("")
     height: calc(100vh - 115px);
     // border: 1px solid rgba(0, 249, 162, 0.2);
     // background: rgba(17, 52, 44, 0.9);
-    background: url(@/assets/videoimg/jcpz_260.png) no-repeat;
+    background: url(@/assets/navigation/ty_260x988.png);
     background-size: 100% 100%;
      padding:0 14px;
     .nav-box {
@@ -1251,7 +1251,7 @@ const isGaoliang:any = ref("")
   width: 300px;
   min-width: 300px;
   height: calc(100vh - 115px);
-  background: url(@/assets/videoimg/spjk_300.png) no-repeat center center;
+  background: url(@/assets/navigation/ty_260x988.png);
   background-size: 100% 100%;
   :deep(img){
     pointer-events:none;
diff --git a/riis-web/src/views/dashboard/index.vue b/riis-web/src/views/dashboard/index.vue
index 84b80a8..57bc73c 100644
--- a/riis-web/src/views/dashboard/index.vue
+++ b/riis-web/src/views/dashboard/index.vue
@@ -17,7 +17,7 @@
         </div>
         <div class="stationboard-left1">
           <div class="stationboard-box-title">
-            <img src="@/assets/sytlechange/left1.jpg" alt="">
+            <div class="img_txt"> <img src=@/assets/navigation/ty_bq.png alt=""><span>主设备信息</span></div>
           </div>
           <div class="one_box">
             <div class="one_box_all">
@@ -25,7 +25,7 @@
               <div class="all_text">
                 <div class="all_text_qian">变压器</div>
                 <div>
-                  <span class="all_text_hou_one">45</span>
+                  <span class="all_text_hou_one">{{ equipmentlist.transformer }}</span>
                   <span class="all_text_hou_two">个</span>
                 </div>
               </div>
@@ -33,9 +33,9 @@
             <div class="one_box_all">
               <div class="all_img"><img src="@/assets/sytlechange/one_right1.svg" alt=""></div>
               <div class="all_text">
-                <div class="all_text_qian">高压电抗器</div>
+                <div class="all_text_qian">干式电抗器</div>
                 <div>
-                  <span class="all_text_hou_one">45</span>
+                  <span class="all_text_hou_one">{{ equipmentlist.dryTypeReactor }}</span>
                   <span class="all_text_hou_two">个</span>
                 </div>
               </div>
@@ -45,7 +45,7 @@
               <div class="all_text">
                 <div class="all_text_qian">GIS</div>
                 <div>
-                  <span class="all_text_hou_one">45</span>
+                  <span class="all_text_hou_one">{{ equipmentlist.gis }}</span>
                   <span class="all_text_hou_two">个</span>
                 </div>
               </div>
@@ -55,7 +55,7 @@
               <div class="all_text">
                 <div class="all_text_qian">断路器</div>
                 <div>
-                  <span class="all_text_hou_one">45</span>
+                  <span class="all_text_hou_one">{{ equipmentlist.circuitBreaker }}</span>
                   <span class="all_text_hou_two">个</span>
                 </div>
               </div>
@@ -65,7 +65,7 @@
               <div class="all_text">
                 <div class="all_text_qian">隔离开关</div>
                 <div>
-                  <span class="all_text_hou_one">45</span>
+                  <span class="all_text_hou_one">{{ equipmentlist.disconnector }}</span>
                   <span class="all_text_hou_two">个</span>
                 </div>
               </div>
@@ -75,47 +75,29 @@
               <div class="all_text">
                 <div class="all_text_qian">电流互感器</div>
                 <div>
-                  <span class="all_text_hou_one">45</span>
-                  <span class="all_text_hou_two">个</span>
-                </div>
-              </div>
-            </div>
-            <div class="one_box_all">
-              <div class="all_img"><img src="@/assets/sytlechange/one_left4.svg" alt=""></div>
-              <div class="all_text">
-                <div class="all_text_qian">低压并联电抗器</div>
-                <div>
-                  <span class="all_text_hou_one">45</span>
+                  <span class="all_text_hou_one">{{ equipmentlist.currentTransformer }}</span>
                   <span class="all_text_hou_two">个</span>
                 </div>
               </div>
             </div>
+           
             <div class="one_box_all">
               <div class="all_img"><img src="@/assets/sytlechange/one_right4.svg" alt=""></div>
               <div class="all_text">
                 <div class="all_text_qian">电压互感器</div>
                 <div>
-                  <span class="all_text_hou_one">45</span>
-                  <span class="all_text_hou_two">个</span>
-                </div>
-              </div>
-            </div>
-            <div class="one_box_all">
-              <div class="all_img"><img src="@/assets/sytlechange/one_left5.svg" alt=""></div>
-              <div class="all_text">
-                <div class="all_text_qian">低压并联电容器</div>
-                <div>
-                  <span class="all_text_hou_one">45</span>
+                  <span class="all_text_hou_one">{{ equipmentlist.voltageTransformer }}</span>
                   <span class="all_text_hou_two">个</span>
                 </div>
               </div>
             </div>
+            
             <div class="one_box_all">
               <div class="all_img"><img src="@/assets/sytlechange/one_right5.svg" alt=""></div>
               <div class="all_text">
                 <div class="all_text_qian">避雷针</div>
                 <div>
-                  <span class="all_text_hou_one">45</span>
+                  <span class="all_text_hou_one">{{ equipmentlist.lightningRod }}</span>
                   <span class="all_text_hou_two">个</span>
                 </div>
               </div>
@@ -124,7 +106,7 @@
         </div>
         <div class="stationboard-left2">
           <div class="stationboard-box-title">
-            <img src="@/assets/sytlechange/left1.jpg" alt="">
+            <div class="img_txt"> <img src=@/assets/navigation/ty_bq.png alt=""><span>装置状态信息</span></div>
           </div>
           <div class="two_box">
             <div class="two_box_all">
@@ -133,15 +115,15 @@
                 <div class="two_text">
                   <div class="two_text_one">
                     <span class="one_one">摄像头</span>
-                    <span class="one_two">50<span class="one_three">/100</span></span>
+                    <span class="one_two">{{ patrolInfo.camera.online }}<span class="one_three">/{{ patrolInfo.camera.allCount }}</span></span>
                   </div>
                   <div class="two_text_two">
                     <span class="two_one">在线率:</span>
-                    <span class="two_two">70%</span>
+                    <span class="two_two">{{ patrolInfo.camera.onLineRate }}%</span>
                   </div>
                 </div>
                 <div class="two_img_all">
-                  <el-progress style="width: 100%;" :percentage="50" />
+                  <el-progress style="width: 100%;" :percentage="patrolInfo.camera.onLineRate" />
                 </div>
               </div>
             </div>
@@ -185,7 +167,7 @@
         </div>
         <div class="stationboard-left3">
           <div class="stationboard-box-title">
-            <img src="@/assets/sytlechange/left1.jpg" alt="">
+            <div class="img_txt"> <img src=@/assets/navigation/ty_bq.png alt=""><span>微气象信息</span></div>
           </div>
           <div class="three_body">
             <div class="three_box">
@@ -194,7 +176,7 @@
                 <div class="three_top_right"><img src="@/assets/sytlechange/three1.svg" alt=""></div>
               </div>
               <div class="three_bottom">
-                <span class="three_bottom_one">26</span>
+                <span class="three_bottom_one">{{ environmentInfo.temperature }}</span>
                 <span class="three_bottom_two">℃</span>
               </div>
             </div>
@@ -204,7 +186,7 @@
                 <div class="three_top_right"><img src="@/assets/sytlechange/three2.svg" alt=""></div>
               </div>
               <div class="three_bottom">
-                <span class="three_bottom_one">26</span>
+                <span class="three_bottom_one">{{ environmentInfo.humidity }}</span>
                 <span class="three_bottom_two">RH</span>
               </div>
             </div>
@@ -214,7 +196,7 @@
                 <div class="three_top_right"><img src="@/assets/sytlechange/three3.svg" alt=""></div>
               </div>
               <div class="three_bottom">
-                <span class="three_bottom_one">26</span>
+                <span class="three_bottom_one">{{ environmentInfo.windSpeed }}</span>
                 <span class="three_bottom_two">级</span>
               </div>
             </div>
@@ -224,7 +206,7 @@
                 <div class="three_top_right"><img src="@/assets/sytlechange/three4.svg" alt=""></div>
               </div>
               <div class="three_bottom">
-                <span class="three_bottom_one">26</span>
+                <span class="three_bottom_one">{{ environmentInfo.windDirection}}</span>
                 <span class="three_bottom_two">SW</span>
               </div>
             </div>
@@ -234,7 +216,7 @@
                 <div class="three_top_right"><img src="@/assets/sytlechange/three5.svg" alt=""></div>
               </div>
               <div class="three_bottom">
-                <span class="three_bottom_one">26</span>
+                <span class="three_bottom_one">{{ environmentInfo.pressure }}</span>
                 <span class="three_bottom_two">HPA</span>
               </div>
             </div>
@@ -244,7 +226,7 @@
                 <div class="three_top_right"><img src="@/assets/sytlechange/three6.svg" alt=""></div>
               </div>
               <div class="three_bottom">
-                <span class="three_bottom_one">26</span>
+                <span class="three_bottom_one">{{ environmentInfo.rainfall }}</span>
                 <span class="three_bottom_two">MM</span>
               </div>
             </div>
@@ -252,7 +234,7 @@
         </div>
         <div class="stationboard-right1" id="tableTr">
           <div class="stationboard-box-title">
-            <img src="@/assets/sytlechange/left1.jpg" alt="">
+            <div class="img_txt"> <img src=@/assets/navigation/ty_bq.png alt=""><span>告警列表</span></div>
           </div>
           <div class="table_body">
             <div class="table_th">
@@ -278,12 +260,12 @@
         </div>
         <div class="stationboard-right2">
           <div class="stationboard-box-title">
-            <img src="@/assets/sytlechange/left1.jpg" alt="">
+            <div class="img_txt"> <img src=@/assets/navigation/ty_bq.png alt=""><span>告警准确率</span></div>
           </div>
-          <div class="right2_body">
+          <div class="right2_body" v-if="rate">
             <div class="right2_box">
               <div class="box_text">
-                <div class="box_text_one">95%</div>
+                <div class="box_text_one">{{rate.confirmationRate || 0}}%</div>
                 <div class="box_text_two">报警准确率</div>
               </div>
             </div>
@@ -291,12 +273,12 @@
               <div class="box_text">
                 <div class="box_text1">告警总数</div>
                 <div class="box_text3"> <img src="@/assets/navigation/sysy_gjl2.png" alt=""></div>
-                <div class="box_text2">1000 <span class="span">件</span></div>
+                <div class="box_text2">{{rate.totalAlarms || 0}} <span class="span">件</span></div>
               </div>
               <div class="box_text" style="margin-top: 30px;">
                 <div class="box_text1">告警总数</div>
                 <div class="box_text3"> <img src="@/assets/navigation/sysy_gjl2.png" alt=""></div>
-                <div class="box_text2">1000 <span class="span">件</span></div>
+                <div class="box_text2">{{rate.confirmedCount || 0}} <span class="span">件</span></div>
               </div>
             </div>
           </div>
@@ -304,23 +286,23 @@
         </div>
         <div class="stationboard-right3">
           <div class="stationboard-box-title">
-            <img src="@/assets/sytlechange/left1.jpg" alt="">
+            <div class="img_txt"> <img src=@/assets/navigation/ty_bq.png alt=""><span>巡视任务统计</span></div>
             <div class="stationboard-box-title-right">
-              <span :class="tabs == 1 ? 'span1' : ''" @click="tabs = 1">年</span>
-              <span :class="tabs == 2 ? 'span1' : ''" @click="tabs = 2">月</span>
-              <span :class="tabs == 3 ? 'span1' : ''" @click="tabs = 3">周</span>
-              <span :class="tabs == 4 ? 'span1' : ''" @click="tabs = 4">日</span>
+              <span :class="tabs == 1 ? 'span1' : ''" @click="tourTaskInit(1)">年</span>
+              <span :class="tabs == 2 ? 'span1' : ''" @click="tourTaskInit(2)">月</span>
+              <span :class="tabs == 3 ? 'span1' : ''" @click="tourTaskInit(3)">周</span>
+              <span :class="tabs == 4 ? 'span1' : ''" @click="tourTaskInit(4)">日</span>
             </div>
           </div>
-          <div class="right_three_body">
+          <div class="right_three_body" v-loading ="loading2">
             <div class="three_left">
-              <div class="three_left_top">95%</div>
+              <div class="three_left_top">{{ tourTaskInfo.executeRate }}%</div>
               <div class="three_left_bottom">任务执行率</div>
             </div>
             <div class="three_right">
-              <div class="three_right1">任务总数 <span class="spanc1">15</span></div>
-              <div class="three_right2">已执行任务数<span class="spanc2">12</span></div>
-              <div class="three_right3">未执行任务数<span class="spanc3">13</span></div>
+              <div class="three_right1">任务总数 <span class="spanc1">{{ tourTaskInfo.allCount }}</span></div>
+              <div class="three_right2">已执行任务数<span class="spanc2">{{ tourTaskInfo.execute }}</span></div>
+              <div class="three_right3">未执行任务数<span class="spanc3">{{ tourTaskInfo.toBeExecute }}</span></div>
             </div>
           </div>
 
@@ -342,7 +324,7 @@ import Alarminformation from "@/views/monitorsystem/alarminformation.vue";
 import { getNotCheckAlarmCount } from '@/api/home';
 import { CountTo as BaseCountTo } from 'vue3-count-to'
 import { ref, onMounted, onBeforeUnmount, nextTick, reactive, watch } from "vue";
-import { getMainDeviceNumber, getPatrolDeviceOnLine, getWeatherLogList, getAlarmLogList, getExceptionEventStat, getTaskTodoStat } from "@/api/home";
+import { getMainDeviceNumber, getPatrolDeviceOnLine, getWeatherLogList, getAlarmLogList, getExceptionEventStat, getTaskTodoStat,getConfirmationRate } from "@/api/home";
 import Modelset from './3DModelSet.vue';
 import { getTaskTodoStatByMonth } from "@/api/areaboard";
 import { useUserStore } from '@/store/modules/user';
@@ -416,14 +398,23 @@ const patrolInfo: any = ref({
   robot: {},
   uav: {}
 })
-
+const equipmentlist: any = ref({})
+function getEquipment() {
+  let params = {
+    stationCode: userStore.stationCode
+  }
+  getMainDeviceNumber(params).then((res: any) => {
+    if (res.data != null) {
+      equipmentlist.value = res.data
+    }
+  })
+}
 
 function getInit() {
   let params = {
     stationId: userStore.stationId
   }
   getWeatherLogList(params).then((res: any) => {
-
     environmentInfo.value = res.data
     if (res.data.temperature == "") {
       environmentInfo.value.temperature = "无"
@@ -462,7 +453,7 @@ const ws1 = new WebSocket(userStore.wsApiBaseUrl + '/websocket/vibe_run_data_' +
 function setupWebSocket() {
 
   ws1.onopen = () => {
-
+    console.log('WebSocket连接成功');
   };
   ws1.onerror = (error: any) => {
   };
@@ -503,7 +494,12 @@ const environmentInfo = ref({
   pressure: ""
 })
 const environment = ref()
-
+const rate:any = ref()
+function getgetConfirmationRate(){
+  getConfirmationRate({stationId:userStore.stationId}).then((res:any)=>{
+    rate.value = res.data
+  })
+}
 onMounted(() => {
   clearInterval(tableTimer)
   isModelset.value = true
@@ -512,8 +508,10 @@ onMounted(() => {
   }
   bsGetProductProcess()
   getInit()
-  tourDayTaskInit()
+  tourTaskInit('1')
   setupWebSocket()
+  getEquipment()
+  getgetConfirmationRate()
 
   alarmCount.value = userStore.alarmCount
 });
@@ -675,25 +673,23 @@ const option = ref({
   ]
 })
 
-function tourDayTaskInit() {
-
+function tourTaskInit(type: any) {
+  tabs.value = type
   let params = {
     stationCode: userStore.stationCode,
-    type: '4'
+    type: type
   }
+  loading2.value = true
   getTaskTodoStat(params).then((res: any) => {
+    loading2.value = false
+    if (res.data == undefined) {
+      res.data.allCount = 0
+    }
     tourTaskInfo.value = res.data
-    // allCount
-    // execute
-    // executeRate
-    // toBeExecute
-    // toBeExecuteRate
-    // unExecute
-
+  }).catch(() => {
+    loading2.value = false
   })
-
 }
-
 //巡视计划统计tab切换
 const tabs = ref(1)
 </script>
@@ -1153,6 +1149,18 @@ const tabs = ref(1)
   display: flex;
   align-items: center;
   justify-content: space-between;
+  .img_txt{
+    display: flex;
+    align-items: center;
+    color: #fff !important;
+    font-size: 16px;
+    font-weight: bold;
+    img{
+      margin-right: 10px;
+      
+    }
+
+  }
 
   .stationboard-box-title-right {
     width: 150px;
@@ -1564,16 +1572,16 @@ const tabs = ref(1)
   bottom: 18px;
   right: 470px;
   z-index: 1;
-  width: 100px;
+  width: 80px;
   height: 33px;
   line-height: 33px;
   text-align: center;
   cursor: pointer;
-  background-image: url(@/assets/3d/an_d1.png);
-  background-repeat: no-repeat;
-  background-size: 100% 100%;
-
-  color: rgb(0, 249, 162);
+  border: 1px solid #0099ffcb;
+  background-color: #0099ff34;
+  border-radius: 5px;
+  // background-color: ;
+  color: #fff;
 }
 
 
diff --git a/riis-web/src/views/task/patrolmonitor/index.vue b/riis-web/src/views/task/patrolmonitor/index.vue
index 287bdf0..d713220 100644
--- a/riis-web/src/views/task/patrolmonitor/index.vue
+++ b/riis-web/src/views/task/patrolmonitor/index.vue
@@ -7,7 +7,7 @@ export default {
 import Page from '@/components/Pagination/page.vue'
 import { ref, onMounted, onBeforeUnmount, nextTick } from "vue";
 import { ElMessage } from "element-plus";
-import { getTaskToDoByDayPage, getTask, operate } from "@/api/patrolmonitor";
+import { getdata, getTask, operate } from "@/api/patrolmonitor";
 import { useUserStore } from '@/store/modules/user';
 import { useRouter } from 'vue-router';
 import { stationOnline } from '@/api/substation';
@@ -144,7 +144,7 @@ function getData(val: any, loading: any) {
   info.value['status'] = val
   info.value['taskName '] = taskName.value
   info.value['taskState '] = taskState.value
-  getTaskToDoByDayPage(info.value).then((res: any) => {
+  getdata(info.value).then((res: any) => {
     // getNowFormatDate()
     const flag = ref(false)
     tableloading.value = false
diff --git a/riis-web/src/views/videomonitor/videomonitor/index.vue b/riis-web/src/views/videomonitor/videomonitor/index.vue
new file mode 100644
index 0000000..1e92563
--- /dev/null
+++ b/riis-web/src/views/videomonitor/videomonitor/index.vue
@@ -0,0 +1,1533 @@
+<script lang="ts">
+export default {
+  name: "videomonitor", // 视频监控
+};
+</script>
+
+<script setup lang="ts">
+import { ref, onMounted, nextTick,onBeforeUnmount } from "vue";
+import {  ElMessage,ElMessageBox } from "element-plus";
+import { getCameraByArea, getSubstationDeviceById } from "@/api/videomonitor/index";
+import Cookies from 'js-cookie';
+import {getDeviceByType} from "@/api/device";
+import JessibucaPlayer from '@/components/jessibuca/index1.vue'
+import Classstyle from '@/components/jessibuca/cssindex.vue'
+import axios from 'axios';
+import { useUserStore } from '@/store/modules/user';
+import { localStorage } from '@/utils/localStorage';
+import { updatePersonalInfo,queryUserByID } from '@/api/user';
+import Eldialog from '@/components/seccmsdialog/eldialog.vue';
+import Videorecord from '@/views/videomonitor/videorecord/index.vue';
+const userStore = useUserStore();
+function getData() {
+  getInit()
+}
+const CameraName = ref("")
+const navlist: any = ref([])
+const treeData: any = ref([])
+navlist.value = [{
+  name: '全部'
+}, {
+  name: '在线'
+}, {
+  name: '离线'
+}]
+const activeIndex = ref(0)
+const status: any = ref(null)
+function navClick(index: any) {
+  activeIndex.value = index
+  if (activeIndex.value == 0) {
+    status.value = null
+  } else if (activeIndex.value == 1) {
+    status.value = 1
+  } else if (activeIndex.value == 2) {
+    status.value = 0
+  }
+  getInit()
+}
+function getInit() {
+  const params = {
+    stationId: userStore.stationId,
+    deviceName: CameraName.value,
+    status: status.value
+  }
+  getCameraByArea(params).then((res: any) => {
+    treeData.value = res.data
+  })
+}
+
+interface Tree {
+  id: string
+  label: string
+  children?: Tree[]
+}
+const defaultprops = {
+  label: "patroldeviceName",
+}
+
+const JessibucaList: any = ref([])
+
+
+const isLighting = ref("0")
+function lightingClick(row: any) { // 灯光方法 
+  if (cameraInfo.value.online != "1") {
+    return
+  }
+  if (channelId.value == "" || channelId.value == undefined) {
+    ElMessage({
+      type: 'error',
+      message: '暂时无法调试，请先检查视频监控是否正常！',
+    })
+    return
+  }
+  axios.post(userStore.webApiMonitorUrl + '/api/ptz/front_end_command/' + deviceId.value + '/' + channelId.value + '?cmdCode=10&parameter1=' + isLighting.value + '&parameter2=128&combindCode2=0', {}).then((res: any) => { })
+}
+const isInfrared = ref("0")
+function infraredClick(row: any) { // 红外方法
+  if (cameraInfo.value.online != "1") {
+    return
+  }
+  if (channelId.value == "" || channelId.value == undefined) {
+    ElMessage({
+      type: 'error',
+      message: '暂时无法调试，请先检查视频监控是否正常！',
+    })
+    return
+  }
+  axios.post(userStore.webApiMonitorUrl + '/api/ptz/front_end_command/' + deviceId.value + '/' + channelId.value + '?cmdCode=13&parameter1=' + isInfrared.value + '&parameter2=128&combindCode2=0', {}).then((res: any) => { })
+}
+const beforehandPosition = ref(1)
+const CameraActive = ref(-1)
+
+const screenNum = ref(1)
+for (let i = 0; i < 16; i++) {
+  JessibucaList.value.push({
+    id: i + 1,
+    urls: "",
+    hide: false,
+    deviceId: "",
+    channelId: "",
+    patroldeviceId: "",
+    issignal: false
+  })
+ 
+}
+function screenNumClick(num: any) {
+  screenNum.value = num
+  deviceId.value = JessibucaList.value[0].deviceId
+  channelId.value = JessibucaList.value[0].channelId
+  CameraActive.value = 0
+  CameraCLick(CameraActive.value)
+  currentPage.value = 1
+  pagingClick(CameraActive.value,num)
+  animationInfo()
+}
+const deviceId = ref("")  // 摄像头国标编号
+const channelId = ref("") // 通道国标编号
+const isswitch = ref(false) // 连击开关
+
+function videoInit(row: any) {
+
+  if (isswitch.value == true) {
+    ElMessage({
+      type: 'warning',
+      message: '正在加载监控视频！',
+    })
+    return
+  }
+  queryRecordDetails()
+  isswitch.value = true
+  for (let i = 0; i < JessibucaList.value.length; i++) {
+        if ((JessibucaList.value[i].deviceId == row.deviceId) && (JessibucaList.value[i].channelId == row.channelId)) {
+          JessibucaList.value[i].urls = ""
+          JessibucaList.value[i].videofmp4 = ""
+          JessibucaList.value[i].deviceId = ""
+          JessibucaList.value[i].channelId = ""
+          JessibucaList.value[i].patroldeviceId = ""
+          JessibucaList.value[i].hide = false
+          JessibucaList.value[i].issignal = false
+        }
+      }
+  setTimeout(()=>{
+    axios.get(userStore.webApiMonitorUrl + '/api/play/start/' + deviceId.value + '/' + channelId.value, {}).then((res: any) => {
+      isswitch.value = false
+      if (res.data.data != undefined) {
+        JessibucaList.value[CameraActive.value].urls = res.data.data.ws_flv
+        JessibucaList.value[CameraActive.value].videofmp4 = res.data.data.fmp4
+        JessibucaList.value[CameraActive.value].hide = true
+        JessibucaList.value[CameraActive.value].deviceId = row.deviceId
+        JessibucaList.value[CameraActive.value].channelId = row.channelId
+        JessibucaList.value[CameraActive.value].patroldeviceId = row.patroldeviceId
+      } else {
+        JessibucaList.value[CameraActive.value].urls = ""
+        JessibucaList.value[CameraActive.value].videofmp4 = ""
+        JessibucaList.value[CameraActive.value].hide = false
+        JessibucaList.value[CameraActive.value].deviceId = row.deviceId
+        JessibucaList.value[CameraActive.value].channelId = row.channelId
+        JessibucaList.value[CameraActive.value].patroldeviceId = row.patroldeviceId
+        JessibucaList.value[CameraActive.value].issignal = true
+      }
+    }).catch(function (error: any) {
+      isswitch.value = false
+    })
+  },100)
+
+}
+
+function handleNodeClick(data: any, node: any) {
+  if (data.children) {
+    node.isCurrent = false
+    currentNodeKey.value = ""
+    nextTick(() => {
+      // currentNodeKey.value = orgId.value
+    })
+  } else {
+    // loading.value = true
+    // Maindata.value = data
+    // orgId.value = data.bayId;
+    if (CameraActive.value == -1) {
+      ElMessage({
+        type: 'error',
+        message: '请先选中您所要摆放视频监控的区域！',
+      })
+      return
+    }
+    deviceId.value = data.deviceId
+    channelId.value = data.channelId
+    videoInit(data)
+    let patroldeviceId: any = data.patroldeviceId
+    const params = {
+      id: patroldeviceId,
+      channelid:data.channelId
+    }
+    getSubstationDeviceById(params).then((res: any) => {
+      if (res.data == null) {
+        cameraInfo.value = {
+          patroldeviceName: "",
+          type: null,
+          place: "",
+          duration:"",
+          rate:""
+        }
+      } else {
+        cameraInfo.value = res.data
+      }
+    })
+  }
+}
+const currentNodeKey = ref("")
+function updateVideoRecord(){
+  const obj = {
+    JessibucaList: JessibucaList.value,
+    screenNum: screenNum.value
+  }
+  const params = {
+    id: userStore.userId,
+    custom1: JSON.stringify(obj),
+  }
+  updatePersonalInfo(params).then((res:any) => {
+  })
+}
+
+onBeforeUnmount(() => {
+  updateVideoRecord()
+  if(timer.value !=null){
+    clearInterval(timer.value)
+  }
+  
+})
+function mouseleave(){
+  updateVideoRecord()
+}
+
+function videoRefresh() {
+  JessibucaList.value[CameraActive.value].urls = JessibucaList.value[CameraActive.value].urls + '?Math=' + Math.random()
+}
+const controSpeed = ref(100) // 摄像头转动速度默认值 30
+function ptzCamera(command: any) { // 监控视频控制方法\
+  isGaoliang.value = command
+  if (cameraInfo.value.online != "1") {
+    return
+  }
+  if (channelId.value == "" || channelId.value == undefined) {
+    ElMessage({
+      type: 'error',
+      message: '暂时无法调试，请先检查视频监控是否正常！',
+    })
+    return
+  }
+  axios.get(userStore.webApiBaseUrl + '/basedata/substation-patroldevice/isWorkingOfPatrolDevice?stationcode=' + userStore.stationCode + "&devicecode=" + deviceId.value, {}).then((res: any) => {
+    if (res.data.data == "0") {
+      axios.post(userStore.webApiMonitorUrl + '/api/ptz/control/' + deviceId.value + '/' + channelId.value + '?command=' + command +
+        '&horizonSpeed=' + controSpeed.value + '&verticalSpeed=' + controSpeed.value + '&zoomSpeed=' + controSpeed.value, {}).then((res: any) => { })
+    }
+  })
+
+}
+function presetPosition(cmdCode: any, presetPos: any) { // 预置位操作 ---设置、删除、调用
+  if (cameraInfo.value.online != "1") {
+    return
+  }
+  if (channelId.value == "" || channelId.value == undefined) {
+    ElMessage({
+      type: 'error',
+      message: '暂时无法调试，请先检查视频监控是否正常！',
+    })
+    return
+  }
+  axios.get(userStore.webApiBaseUrl + '/basedata/substation-patroldevice/isWorkingOfPatrolDevice?stationcode=' + userStore.stationCode + "&devicecode=" + deviceId.value, {}).then((res: any) => {
+    if (res.data.data == "0") {
+      axios.post(userStore.webApiMonitorUrl + '/api/ptz/front_end_command/' + deviceId.value + '/' + channelId.value + '?cmdCode=' + cmdCode + '&parameter1=0&parameter2=' + presetPos + '&combindCode2=0', {}).then((res: any) => { })
+    }
+  })
+
+}
+function quxiao(){
+  isGaoliang.value = ''
+}
+function condensationChang(command: any) { // 光聚方法  
+  const cmdCode = ref()
+  if (command == '加') {
+    cmdCode.value = 65
+    isGaoliang.value = '65'
+  } else if (command == '减') {
+    isGaoliang.value = '66'
+    cmdCode.value = 66
+  }
+  if (cameraInfo.value.online != "1") {
+    return
+  }
+  if (channelId.value == "" || channelId.value == undefined) {
+    ElMessage({
+      type: 'error',
+      message: '暂时无法调试，请先检查视频监控是否正常！',
+    })
+    return
+  }
+  // 近（42H ）    66    远（41H） 65
+  
+  axios.get(userStore.webApiBaseUrl + '/basedata/substation-patroldevice/isWorkingOfPatrolDevice?stationcode=' + userStore.stationCode + "&devicecode=" + deviceId.value, {}).then((res: any) => {
+    if (res.data.data == "0") {
+      axios.post(userStore.webApiMonitorUrl + '/api/ptz/front_end_command/' + deviceId.value + '/' + channelId.value + '?cmdCode=' + cmdCode.value + '&parameter1=80&parameter2=0&combindCode2=0', {}).then((res: any) => { })
+    }
+  })
+
+}
+function apertureChang(command: any) { // 光圈方法
+  const cmdCode = ref(72)
+  if (command == '加') {
+    cmdCode.value = 70
+    isGaoliang.value = '70'
+  } else if (command == '减') {
+    cmdCode.value = 72
+    isGaoliang.value = '72'
+  }
+  if (cameraInfo.value.online != "1") {
+    return
+  }
+  if (channelId.value == "" || channelId.value == undefined) {
+    ElMessage({
+      type: 'error',
+      message: '暂时无法调试，请先检查视频监控是否正常！',
+    })
+    return
+  }
+  // 缩小（48H ）    72    放大（44H） 70
+  
+  axios.get(userStore.webApiBaseUrl + '/basedata/substation-patroldevice/isWorkingOfPatrolDevice?stationcode=' + userStore.stationCode + "&devicecode=" + deviceId.value, {}).then((res: any) => {
+    if (res.data.data == "0") {
+      axios.post(userStore.webApiMonitorUrl + '/api/ptz/front_end_command/' + deviceId.value + '/' + channelId.value + '?cmdCode=' + cmdCode.value + '&parameter1=0&parameter2=80&combindCode2=0', {}).then((res: any) => { })
+    }
+  })
+}
+function closeVideo(index: any) { // 关闭视频
+  JessibucaList.value[index].urls = ""
+  JessibucaList.value[index].videofmp4 = ""
+  JessibucaList.value[index].hide = false
+  JessibucaList.value[index].deviceId = ""
+  JessibucaList.value[index].channelId = ""
+  JessibucaList.value[index].patroldeviceId = ""
+  JessibucaList.value[index].issignal = false
+}
+const playbackInfo:any = ref({})
+const dialogVisible:any = ref(false)
+function playbackVideo(index:any){
+  playbackInfo.value =  JessibucaList.value[index]
+//   channelId: "34020000001320000002"
+// deviceId:"34020000001320000002"
+// hide: true
+// id:1
+// issignal: false
+// patroldeviceId: "3f2c9db2bc994ed69c4c9ae2e040ae95"
+// urls: "ws://192.168.1.151:81/rtp/34020000001320000002_34020000001320000002.live.flv?0.5651038611217907"
+// videofmp4:"http://192.168.1.151:81/rtp/34020000001320000002_34020000001320000002.live.mp4"
+
+  if(playbackInfo.value.channelId != null){
+    dialogVisible.value = true
+  }
+  
+}
+function handleClose(){
+  dialogVisible.value = false
+}
+
+
+const cameraInfo: any = ref({
+  patroldeviceName: "",
+  type: null,
+  place: "",
+  duration:"",
+  rate:""
+})
+function CameraCLick(index:any) {
+  if(isswitch.value == true){
+    ElMessage({
+        type: 'error',
+        message: '正在加载监控视频,请耐心等待！',
+    })
+    return
+  }
+  CameraActive.value = index
+  deviceId.value = JessibucaList.value[CameraActive.value].deviceId
+  channelId.value = JessibucaList.value[CameraActive.value].channelId
+  queryRecordDetails()
+  const params = {
+    id: JessibucaList.value[CameraActive.value].patroldeviceId,
+    channelid:JessibucaList.value[CameraActive.value].channelId
+  }
+  getSubstationDeviceById(params).then((res: any) => {
+    if (res.data == null) {
+      cameraInfo.value = {
+        patroldeviceName: "",
+        type: null,
+        place: "",
+        duration:"",
+        rate:""
+      }
+    } else {
+      cameraInfo.value = res.data
+    }
+
+  })
+}
+
+const CameraTypeList: any = ref([])
+function getDict() {
+  const params = {
+    dictcode: 'CameraType'
+  }
+  getDeviceByType(params).then((res: any) => {
+    CameraTypeList.value = res.data
+  })
+}
+function currency(list: any, itemcode: any) {
+  let dictname = ''
+  list.forEach((element: any) => {
+    if (element.itemcode == itemcode) {
+      dictname = element.dictname
+    }
+  })
+  return dictname
+}
+
+function timeout(videoUrl: any) {
+  for (let i = 0; i < JessibucaList.value.length; i++) {
+    if (JessibucaList.value[i].urls == videoUrl) {
+      JessibucaList.value[i].hide = false
+      JessibucaList.value[i].issignal = true
+    }
+  }
+}
+function RefreshLoad(info: any) {
+  if(info.deviceId == ""){
+    return
+  }
+  deviceId.value = info.deviceId
+  channelId.value = info.channelId
+  if (isswitch.value == true) {
+    ElMessage({
+      type: 'warning',
+      message: '正在加载监控视频！',
+    })
+    return
+  }
+  isswitch.value = true
+  axios.get(userStore.webApiMonitorUrl + '/api/play/start/' + deviceId.value + '/' + channelId.value, {}).then((res: any) => {
+    isswitch.value = false
+    if (res.data.data != undefined) {
+      JessibucaList.value[CameraActive.value].urls = res.data.data.ws_flv
+      JessibucaList.value[CameraActive.value].videofmp4 = res.data.data.fmp4
+      JessibucaList.value[CameraActive.value].hide = true
+      JessibucaList.value[CameraActive.value].deviceId = info.deviceId
+      JessibucaList.value[CameraActive.value].channelId = info.channelId
+      JessibucaList.value[CameraActive.value].patroldeviceId = info.patroldeviceId
+    } else {
+      JessibucaList.value[CameraActive.value].urls = ""
+      JessibucaList.value[CameraActive.value].hide = false
+      JessibucaList.value[CameraActive.value].deviceId = info.deviceId
+      JessibucaList.value[CameraActive.value].channelId = info.channelId
+      JessibucaList.value[CameraActive.value].patroldeviceId = info.patroldeviceId
+      JessibucaList.value[CameraActive.value].issignal = true
+    }
+  }).catch(function (error: any) {
+    isswitch.value = false
+  })
+}
+function allRefresh() {
+  for (let i = 0; i < tableData.value.length; i++) {
+    if (JessibucaList.value[i + strlength.value].deviceId != '') {
+      axios.get(userStore.webApiMonitorUrl + '/api/play/start/' + JessibucaList.value[i + strlength.value].deviceId + '/' + JessibucaList.value[i + strlength.value].channelId, {}).then((res: any) => {
+        if (res.data.data != undefined) {
+          tableData.value[i].urls = res.data.data.ws_flv + '?' + Math.random()
+          tableData.value[i].videofmp4 = res.data.data.fmp4
+          tableData.value[i].hide = true
+          JessibucaList.value[i + strlength.value].urls = res.data.data.ws_flv + '?' + Math.random()
+          JessibucaList.value[i + strlength.value].videofmp4 = res.data.data.fmp4
+          JessibucaList.value[i + strlength.value].hide = true
+        } else {
+          tableData.value[i].urls = ""
+          tableData.value[i].videofmp4 = ""
+          tableData.value[i].hide = false
+          tableData.value[i].issignal = true
+          JessibucaList.value[i + strlength.value].urls = ""
+          JessibucaList.value[i + strlength.value].videofmp4 = ""
+          JessibucaList.value[i + strlength.value].hide = false
+          JessibucaList.value[i + strlength.value].issignal = true
+
+        }
+      }).catch(function (error: any) {
+        isswitch.value = false
+      })
+
+    }
+  }
+}
+
+function allClose() {
+  for (let i = 0; i < JessibucaList.value.length; i++) {
+    JessibucaList.value[i].urls = ""
+    JessibucaList.value[i].videofmp4 = ""
+    JessibucaList.value[i].hide = false
+    JessibucaList.value[i].deviceId = ""
+    JessibucaList.value[i].channelId = ""
+    JessibucaList.value[i].patroldeviceId = ""
+    JessibucaList.value[i].issignal = false
+  }
+}
+
+
+
+onMounted(() => {
+  setTimeout(() => {
+    const oBox = document.getElementById('telescopicids')
+    const leftid: any = document.getElementById('richleft')
+    const contentid: any = document.getElementById('contentid')
+    const rightid: any = document.getElementById('richright')
+    const idbox: any = document.getElementById('richboxid')
+    let X: any, oBoxW: any, oBoxW1: any, oBoxW2: any
+    if (oBox) {
+      oBox.onmousedown = (ev) => {
+        oBox.style.backgroundColor = "#fff"
+        var elem = document.createElement('div')
+        elem.style.cssText = 'position:absolute;top: 0;width:100%;height:100%;z-index:9999;cursor:w-resize'
+        elem.id = 'newMask'
+        document.body.appendChild(elem)
+        var oEvent = ev || event
+        X = oEvent.clientX
+        oBoxW = leftid.offsetWidth
+        oBoxW1 = contentid.offsetWidth
+        oBoxW2 = rightid.offsetWidth
+        // // 鼠标移动
+        document.onmousemove = (ev) => {
+          var oEvent = ev || event
+          var XX = oEvent.clientX
+          leftid.style.width = 100 / ((idbox.offsetWidth - oBoxW2 - 20) / (oBoxW + (XX - X))) + '%'
+          contentid.style.width = 100 / ((idbox.offsetWidth - oBoxW2 - 20) / (oBoxW1 + (X - XX))) + '%'
+        }
+        // 鼠标移开
+        document.onmouseup = (ev) => {
+          oBox.style.backgroundColor = ""
+          var newMask: any = document.getElementById('newMask')
+          if (newMask) {
+            newMask.parentNode.removeChild(newMask)
+          }
+          document.onmousedown = null
+          document.onmousemove = null
+          // basicsId.style.cursor = ''
+        }
+      }
+    }
+  }, 100)
+  getVideoList()
+  getDict()
+  getInit()
+})
+function getVideoList() {
+  const params = {
+    id: userStore.userId
+  }
+  queryUserByID(params).then((res: any) => {
+    if (res.data.custom1 != ''&&res.data.custom1 != null) {
+      let CookiesName: any =res.data.custom1;
+      JessibucaList.value = JSON.parse(CookiesName).JessibucaList
+      screenNum.value = JSON.parse(CookiesName).screenNum
+      deviceId.value = JessibucaList.value[0].deviceId
+      channelId.value = JessibucaList.value[0].channelId
+      CameraActive.value = 0
+      CameraCLick(CameraActive.value)
+      allRefresh()
+    } else {
+    CameraActive.value = 0
+    }
+    pagingClick(0,screenNum.value)
+  }).catch(()=>{
+    CameraActive.value = 0
+  })
+}
+const boxRefs: any = ref([]);
+const setRef = (el: any) => {
+  if (el) {
+    boxRefs.value.push(el);
+  }
+};
+const ishide = ref(true)
+function hideClick(is: any) {
+  isHideRight.value = is
+  let contentid: any = document.getElementById('contentid');
+  if (ishide.value == false) {
+    ishide.value = true
+    contentid.style.width = "calc(100vw - 630px)"
+  } else {
+    ishide.value = false
+    contentid.style.width = "calc(100vw - 325px)"
+  }
+
+}
+const isHideRight = ref(true)
+
+
+function GetDateTime(dayNum: any) {
+  var dateDay = new Date();
+  dateDay.setDate(dateDay.getDate() + dayNum) //获取dayNum天后的日期
+  var y = dateDay.getFullYear();
+  var m = (dateDay.getMonth() + 1) < 10 ? "0" + (dateDay.getMonth() + 1) : (dateDay.getMonth() + 1); //获取当前月份的日期，不足10补0
+  var d = dateDay.getDate() < 10 ? "0" + dateDay.getDate() : dateDay.getDate(); //获取当前几号，不足10补0
+  return y + "-" + m + "-" + d;
+}
+
+
+
+function queryRecordDetails(){
+  let startTime = GetDateTime(-90) +' 00:00:00'
+  let endTime = GetDateTime(0) +' 23:59:59'
+  if(deviceId.value == undefined || deviceId.value ==''){
+      return
+  }
+}
+
+function addVideo(){
+  ElMessageBox.confirm(
+    '确定新增视频组吗',
+    '新增提示',
+    {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    }
+  )
+  .then( async () => {
+
+    for (let i = 0; i < 16; i++) {
+      JessibucaList.value.push({
+        id: 1 + JessibucaList.value.length,
+        urls: "",
+        hide: false,
+        deviceId: "",
+        channelId: "",
+        patroldeviceId: "",
+        issignal: false
+      })
+    }
+    pagingClick(currentPage.value-1,screenNum.value)
+  })
+}
+
+function delVideo(){
+  ElMessageBox.confirm(
+    '确定删除视频组吗?',
+    '删除提示',
+    {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    }
+  )
+  .then( async () => {
+    JessibucaList.value.splice(JessibucaList.value.length-16,16)
+    pagingClick(0,screenNum.value)
+  })
+}
+const currentPage:any = ref(1)
+const tableData:any = ref([])
+const total:any = ref(0)
+const totalSize:any = ref(0)
+const isTimer=ref(false)
+const temporaryList:any=ref([])
+const strlength:any=ref(0)
+const endlength:any=ref(0)
+function pagingClick(pageIndex:any ,pageNum:any ){
+  
+  tableData.value=[]
+  temporaryList.value=[]
+  if(screenNum.value != 16){
+    let num = 0
+    for(let a=JessibucaList.value.length -1;a>=0;a--){
+      if(JessibucaList.value[a].urls !=""){
+        num = a
+        break
+      }
+    }
+    if(screenNum.value == 1){
+      for(let b=0;b<=num;b++){
+        temporaryList.value.push(JessibucaList.value[b])
+      }
+      total.value = num + 1
+    }else if(screenNum.value == 4 || screenNum.value == 9){
+      for(let b=0;b<=num;b++){
+        temporaryList.value.push(JessibucaList.value[b])
+      }
+      total.value = num + 1
+      let remainder = 0
+      
+      remainder = (num + 1)%screenNum.value
+      if((num + 1)<screenNum.value){
+        remainder = screenNum.value - remainder
+      }
+      for(let c=0;c<remainder;c++){
+        temporaryList.value.push({
+          id: 1 + temporaryList.value.length,
+          urls: "",
+          hide: false,
+          deviceId: "",
+          channelId: "",
+          patroldeviceId: "",
+          issignal: false
+        })
+      }
+    }
+
+  }else{
+    temporaryList.value= JessibucaList.value
+    total.value = JessibucaList.value.length
+  }
+  
+  strlength.value = pageNum * (pageIndex);
+  endlength.value = pageNum  * (pageIndex + 1);
+  totalSize.value = Math.ceil(temporaryList.value.length/pageNum)
+  if(endlength>temporaryList.value.length){
+    endlength.value = temporaryList.value.length
+    }
+  //第五步：循环获取当前页数的数据，放入展示的数组中
+  for (let i = strlength.value; i < endlength.value; i++) {
+    tableData.value.push(temporaryList.value[i]);
+  }
+  setTimeout(()=>{
+    allRefresh()
+  },100)
+
+  
+}
+const handleCurrentChange = (val: number) => {
+  pagingClick(val-1,screenNum.value)
+  CameraActive.value =screenNum.value * (val-1)
+}
+const timer:any =ref(null)
+//轮播动画
+function animationInfo(){
+  if(timer.value != null){
+    clearInterval(timer.value)
+  }
+  if(isTimer.value == true){
+    var tast = /^\+?[1-9][0-9]*$/; //正整数 
+    if(tast.test(minute.value) == false){
+      ElMessage({
+      type: 'error',
+      message: '请输入正整数',
+    })
+    minute.value = ''
+    isTimer.value = false
+    return false
+    }
+    var millisecond = JSON.parse(JSON.stringify(minute.value)) * 60000
+    timer.value = setInterval(()=>{
+      if(currentPage.value >= totalSize.value){
+        currentPage.value = 1
+      }else{
+        currentPage.value = currentPage.value + 1
+      }
+      pagingClick(currentPage.value-1,screenNum.value)
+      CameraActive.value =screenNum.value * (currentPage.value-1)
+    },millisecond)
+  }
+}
+const minute:any =  ref(2)
+const isGaoliang:any = ref("")
+</script>
+<template>
+  <div>
+    <div id="richboxid" class="videomonitor-box" @mouseleave="mouseleave">
+      <div id="richleft" class="videomonitor-left">
+        <div class="stationboard-box-title" style="padding-left: 0;">
+          <div class="imgname">摄像机列表</div>
+        </div>
+        <el-input v-model="CameraName" clearable placeholder="请输入摄像头名称" @clear="getData()" @keyup.enter="getData()"
+          style="width:100%;margin-top: 10px;" class="videomonitor-input">
+          <template #suffix>
+            <img src="@/assets/videoimg/u2937.png" style="cursor:pointer ;" @click="getData">
+          </template>
+        </el-input>
+        <div class="nav-box">
+          <div class="nav-list" v-for="(item, index) in navlist" :class="{ 'nav-active': activeIndex == index }"
+            @click="navClick(index)">
+            {{ item.name }}
+          </div>
+        </div>
+        <el-scrollbar style="margin-left:0px ;margin-top:10px ;" height="calc(100vh - 270px)">
+          <el-tree :data="treeData" :props="defaultprops" @node-click="handleNodeClick" default-expand-all
+            :current-node-key="currentNodeKey" node-key="bayId">
+            <template #default="{ node }">
+              <span v-if="node.data.type == 10 && node.data.useMode == 10">
+                <span v-if="node.level != 1" :style="{ color: node.data.online == '1' ? '#009bff' : 'red' }">
+                  <svg style="margin-right: 5px;" t="1682315445615" class="icon" viewBox="0 0 1024 1024" version="1.1"
+                    xmlns="http://www.w3.org/2000/svg" p-id="11437" xmlns:xlink="http://www.w3.org/1999/xlink" width="20"
+                    height="20">
+                    <path fill="currentColor" d="M218.3 124.6h77.8l635.8 415.2-223.8 165.5h-48.7L117.7 338.7v-51.9z"
+                      p-id="11438"></path>
+                    <path fill="currentColor"
+                      d="M701.6 799.3c-3.1 0-6.2-0.9-8.9-2.7L138.8 432.5c-7.5-4.9-9.6-15-4.6-22.5 4.9-7.5 15-9.6 22.5-4.6l542.9 356.9 29.6-29.6c6.3-6.3 16.6-6.3 22.9 0 6.3 6.3 6.3 16.6 0 22.9l-38.9 38.9c-3.3 3.2-7.4 4.8-11.6 4.8zM130.7 895.6c-9 0-16.2-7.3-16.2-16.2V530.1c0-9 7.3-16.2 16.2-16.2 9 0 16.2 7.3 16.2 16.2v349.3c0 9-7.3 16.2-16.2 16.2z"
+                      p-id="11439"></path>
+                    <path fill="currentColor"
+                      d="M292.9 721.5H130.7c-9 0-16.2-7.3-16.2-16.2s7.3-16.2 16.2-16.2h153l56.9-95.9c4.6-7.7 14.5-10.2 22.2-5.7 7.7 4.6 10.2 14.5 5.7 22.2l-61.6 103.8c-3 5-8.3 8-14 8z"
+                      p-id="11440"></path>
+                  </svg>
+                </span>
+              </span>
+              <span v-if="node.data.type == 10 && node.data.useMode == 11">
+                <span v-if="node.level != 1" :style="{ color: node.data.online == '1' ? '#009bff' : 'red' }">
+                  <svg t="1686725618148" class="icon" viewBox="0 0 1024 1024" version="1.1" style="margin-right: 5px;"
+                    xmlns="http://www.w3.org/2000/svg" p-id="2814" xmlns:xlink="http://www.w3.org/1999/xlink" width="18"
+                    height="18">
+                    <path fill="currentColor"
+                      d="M954.88 590.72a432.64 432.64 0 0 0-409.6-457.6V0H151.04v64h263.04v76.8c-201.6 38.4-344.96 203.52-344.96 448-1.28 0.64 887.04 4.48 885.76 1.92zM197.76 661.12C198.4 860.16 311.68 1024 512 1024s314.24-161.92 314.24-360.96H197.76zM512 912A85.76 85.76 0 0 1 420.48 832 86.4 86.4 0 0 1 512 752.64 86.4 86.4 0 0 1 603.52 832 85.76 85.76 0 0 1 512 912z"
+                      p-id="2815"></path>
+                  </svg>
+                </span>
+
+              </span>
+              <span>{{ node.data.name }}</span>
+              <span>{{ node.label }}</span>
+            </template>
+          </el-tree>
+        </el-scrollbar>
+      </div>
+      <div id="telescopicids" class="telescopicidsbgcolor"
+        style="margin-left: 8px; min-width: 4px !important;height: calc(100vh - 90px); cursor:w-resize; z-index:1"></div>
+      <div class="videomonitor-content" id="contentid">
+        <div class="videomonitor-content-nav">
+          <div style="display: flex;align-items: center;">
+            <img v-if="screenNum == 1" src="@/assets/videoimg/spjk_1p1.png" alt="">
+            <img v-else src="@/assets/monitorsystem/spjk_1p.png" alt="" @click="screenNumClick(1)">
+            <img v-if="screenNum == 4" src="@/assets/videoimg/spjk_4p1.png" alt="">
+            <img v-else src="@/assets/monitorsystem/spjk_4p.png" alt="" @click="screenNumClick(4)">
+            <img v-if="screenNum == 9" src="@/assets/videoimg/spjk_9p1.png" alt="">
+            <img v-else src="@/assets/monitorsystem/spjk_9p.png" alt="" @click="screenNumClick(9)">
+            <img v-if="screenNum == 16" src="@/assets/videoimg/spjk_16p1.png" alt="">
+            <img v-else src="@/assets/monitorsystem/spjk_16p.png" alt="" @click="screenNumClick(16)">
+          </div>
+          <div style="display: flex;align-items: center;">
+            <el-checkbox v-model="isTimer" label="轮播" size="large" @change="animationInfo" style="margin:0 10px 0px 30px">轮播</el-checkbox>
+            <el-input v-model="minute"  placeholder=""  oninput="value=value.replace(/^\.+|[^\d]/g,'')" 
+              style="margin-right:20px ;width: 80px;height: 28px;" class="videomonitor-input">
+              <template #suffix>
+                <span>分钟</span>
+              </template>
+            </el-input>
+            <el-pagination
+            class="paginationclass"
+              background
+              v-model:current-page="currentPage"
+              :page-size="screenNum"
+              :small="true"
+              layout="pager"
+              :total="total"
+              @current-change="handleCurrentChange"
+            />
+            <div title="添加视频版块" style="position: relative; margin-left:10px;margin-right:5px;cursor:pointer; width:24px;height:24px;font-size:18px;background:rgba(0, 155, 255, 1);color:#fff;display:flex;align-items:center;justify-content:center;border-radius:3px"
+              @click="addVideo" v-if="screenNum == 16" >
+              <!-- <el-icon><Plus /></el-icon> -->
+              <div style="
+                  width: 12px;
+                  height: 2px;
+                  background: inherit;
+                  background-color: #fff"></div>
+                  <div style="
+                  position: absolute;
+                  top: 6px;
+                  left: 11px;
+                  width: 2px;
+                  height: 12px;
+                  background: inherit;
+                  background-color: #fff"></div>
+            </div> 
+
+            <div title="删除视频版块" style="cursor:pointer; width:24px;height:24px;font-size:18px;background:rgba(0, 155, 255, 1);color:#fff;display:flex;align-items:center;justify-content:center;border-radius:3px"
+              @click="delVideo" v-if="screenNum == 16 && JessibucaList.length>16">
+              <div style="
+                width: 12px;
+                height: 2px;
+                background: inherit;
+                background-color: #fff"></div>
+            </div> 
+            <img title="监控视频全部重载" src="@/assets/monitorpublic/spjk_sx.png" style=""
+              @click="allRefresh" />
+            <img title="监控视频全部关闭" src="@/assets/monitorsystem/spjk_gb.png" style=""
+              @click="allClose" />
+
+          </div>
+          
+          
+          
+        </div>
+        <div class="Jessibuca-box">
+
+          <div class="Camera-img" v-if="screenNum == 1" v-for="(item, index) in tableData" :key="item.id"
+            :class="{ 'CameraActive': (item.id -1) == CameraActive }" @click="CameraCLick(item.id - 1)">
+           <div style="position: absolute;z-index: 99;color: #fff;
+            border-radius:50%;height:22px;width:22px;line-height:22px;text-align:center"> {{ item.id }}</div> 
+            <JessibucaPlayer v-if="JessibucaList[index + strlength].hide == true" :isClose="true" :ref="setRef" :_uid="JessibucaList[index + strlength].id" :visible.sync="true"
+            :devicechannelInfo="{'deviceId':JessibucaList[index + strlength].deviceId,'channelId':JessibucaList[index + strlength].channelId}" :videofmp4="JessibucaList[index + strlength].videofmp4" :videoUrl="JessibucaList[index + strlength].urls" :hasAudio="false" fluent autoplay live
+              @closeVideo="closeVideo" @timeout="timeout" @playbackVideo="playbackVideo"></JessibucaPlayer>
+            <Classstyle v-if="JessibucaList[index + strlength].hide == false" :_uid="JessibucaList[index + strlength].id" @closeVideo="closeVideo" :ref="setRef" :VideoInfo="JessibucaList[index + strlength]"
+              :issignal="JessibucaList[index + strlength].issignal" @RefreshLoad="RefreshLoad"></Classstyle>
+          </div>
+          <div class="Camera-img4" v-if="screenNum == 4" v-for="(item, index) in tableData" :key="item.id"
+            :class="{ 'CameraActive': (item.id -1) == CameraActive }" @click="CameraCLick(item.id - 1)">
+            <div style="position: absolute;z-index: 99;color: #fff;
+            border-radius:50%;height:22px;width:22px;line-height:22px;text-align:center"> {{ item.id }}</div> 
+            <JessibucaPlayer v-if="JessibucaList[index + strlength].hide == true" :isClose="true" :ref="setRef" :_uid="JessibucaList[index + strlength].id" :visible.sync="true"
+            :devicechannelInfo="{'deviceId':JessibucaList[index + strlength].deviceId,'channelId':JessibucaList[index + strlength].channelId}" :videofmp4="JessibucaList[index + strlength].videofmp4" :videoUrl="JessibucaList[index + strlength].urls" :hasAudio="false" fluent autoplay live
+              @closeVideo="closeVideo" @timeout="timeout" @playbackVideo="playbackVideo"></JessibucaPlayer>
+            <Classstyle v-if="JessibucaList[index + strlength].hide == false" :_uid="JessibucaList[index + strlength].id" @closeVideo="closeVideo" :ref="setRef" :VideoInfo="JessibucaList[index + strlength]"
+             :issignal="JessibucaList[index + strlength].issignal" @RefreshLoad="RefreshLoad"></Classstyle>
+          </div>
+          <div class="Camera-img9" v-if="screenNum == 9" v-for="(item, index) in tableData" :key="item.id"
+            :class="{ 'CameraActive': (item.id -1) == CameraActive }" @click="CameraCLick(item.id - 1)">
+           <div style="position: absolute;z-index: 99;color: #fff;
+            border-radius:50%;height:22px;width:22px;line-height:22px;text-align:center"> {{ item.id }}</div> 
+            <JessibucaPlayer v-if="JessibucaList[index + strlength].hide == true" :isClose="true" :ref="setRef" :_uid="JessibucaList[index + strlength].id" :visible.sync="true"
+            :devicechannelInfo="{'deviceId':JessibucaList[index + strlength].deviceId,'channelId':JessibucaList[index + strlength].channelId}" :videofmp4="JessibucaList[index + strlength].videofmp4" :videoUrl="JessibucaList[index + strlength].urls" :hasAudio="false" fluent autoplay live
+              @closeVideo="closeVideo" @timeout="timeout" @playbackVideo="playbackVideo"></JessibucaPlayer>
+            <Classstyle v-if="JessibucaList[index + strlength].hide == false" :_uid="JessibucaList[index + strlength].id" @closeVideo="closeVideo" :ref="setRef" :VideoInfo="JessibucaList[index + strlength]"
+              :issignal="JessibucaList[index + strlength].issignal" @RefreshLoad="RefreshLoad"></Classstyle>
+          </div>
+          <div class="Camera-img16" v-if="screenNum == 16" v-for="(item, index) in tableData" :key="item.id"
+            :class="{ 'CameraActive': (item.id -1) == CameraActive }" @click="CameraCLick(item.id - 1)">
+           <div style="position: absolute;z-index: 99;color: #fff;
+            border-radius:50%;height:22px;width:22px;line-height:22px;text-align:center"> {{ item.id }}</div> 
+            <!-- <video style="width:100%;height:100% ;" :src="'http://192.168.1.119:81/rtp/34020000001320000002_34020000001320000002.live.mp4'" autoplay controls /> -->
+            <JessibucaPlayer v-if="JessibucaList[index + strlength].hide == true" :isClose="true" :ref="setRef" :_uid="JessibucaList[index + strlength].id" :visible.sync="true"
+            :devicechannelInfo="{'deviceId':JessibucaList[index + strlength].deviceId,'channelId':JessibucaList[index + strlength].channelId}" :videofmp4="JessibucaList[index + strlength].videofmp4" :videoUrl="JessibucaList[index + strlength].urls" :hasAudio="false" fluent autoplay live
+              @closeVideo="closeVideo" @timeout="timeout" @playbackVideo="playbackVideo"></JessibucaPlayer>
+            <Classstyle v-if="JessibucaList[index + strlength].hide == false" :_uid="JessibucaList[index + strlength].id" :ref="setRef" @closeVideo="closeVideo" :VideoInfo="JessibucaList[index + strlength]"
+              :issignal="JessibucaList[index + strlength].issignal" @RefreshLoad="RefreshLoad"></Classstyle>
+          </div>
+        </div>
+
+      </div>
+      <div class="videomonitor-righthide" id="righthide">
+        <img v-if="isHideRight" style="cursor: pointer;" src="@/assets/publicimg/put1.png" alt="" @click="hideClick(false)">
+        <img v-if="!isHideRight" style="cursor: pointer;" src="@/assets/publicimg/putaway.png" alt="" @click="hideClick(true)">
+      </div>
+      <div class="videomonitor-right" id="richright" v-show="ishide">
+        <div class="stationboard-box-title">
+          <div class="imgname">云台控制</div>
+        </div>
+        <div class="Camera-buttons-box">
+            <div class="Camera-left-button1" @mousedown="ptzCamera('up')" @mouseup="ptzCamera('stop')"></div>
+            <div class="Camera-left-button2" @mousedown="ptzCamera('upright')" @mouseup="ptzCamera('stop')"></div>
+            <div class="Camera-left-button3" @mousedown="ptzCamera('right')" @mouseup="ptzCamera('stop')"></div>
+            <div class="Camera-left-button4" @mousedown="ptzCamera('downright')" @mouseup="ptzCamera('stop')"></div>
+            <div class="Camera-left-button5"  @mousedown="ptzCamera('down')" @mouseup="ptzCamera('stop')"></div>
+            <div class="Camera-left-button6" @mousedown="ptzCamera('downleft')" @mouseup="ptzCamera('stop')"></div>
+            <div class="Camera-left-button7" @mousedown="ptzCamera('left')" @mouseup="ptzCamera('stop')"></div>
+            <div class="Camera-left-button8"  @mousedown="ptzCamera('upleft')" @mouseup="ptzCamera('stop')"></div>
+            <div class="Camera-left-button9"  @click="presetPosition(130, beforehandPosition)"></div> 
+        </div>
+        <div class="focallengthbox">
+          <div class="focallength1" :class="{'gaolaing': isGaoliang=='zoomout'}" @mousedown="ptzCamera('zoomout')" @mouseup="ptzCamera('stop')">
+            <img src="@/assets/videoimg/left.png" style="width:8px;height:12px" alt="">
+          </div>
+          <div class="focallength2">缩放</div>
+          <div class="focallength1" :class="{'gaolaing': isGaoliang=='zoomin'}" @mousedown="ptzCamera('zoomin')" @mouseup="ptzCamera('stop')">
+            <img src="@/assets/videoimg/right.png" style="width:8px;height:12px" alt="">
+          </div>
+        </div>
+        <div class="focallengthbox">
+          <div class="focallength1" :class="{'gaolaing': isGaoliang=='66'}" @mousedown="condensationChang('减')" @mouseup="quxiao">
+            <img src="@/assets/videoimg/left.png" style="width:8px;height:12px" alt="">
+          </div>
+          <div class="focallength2">光聚</div>
+          <div class="focallength1" :class="{'gaolaing': isGaoliang=='65'}" @mousedown="condensationChang('加')" @mouseup="quxiao">
+            <img src="@/assets/videoimg/right.png" style="width:8px;height:12px" alt="">
+          </div>
+        </div>
+        <div class="focallengthbox">
+          <div class="focallength1" :class="{'gaolaing': isGaoliang=='72'}" @mousedown="apertureChang('减')" @mouseup="quxiao">
+            <img src="@/assets/videoimg/left.png" style="width:8px;height:12px" alt="">
+          </div>
+          <div class="focallength2">光圈</div>
+          <div class="focallength1" :class="{'gaolaing': isGaoliang=='70'}" @mousedown="apertureChang('加')" @mouseup="quxiao">
+            <img src="@/assets/videoimg/right.png" style="width:8px;height:12px" alt="">
+          </div>
+        </div>
+
+        <div style="display: flex;padding-top: 25px;padding-left: 30px;">
+          <span style="display: block;padding-left: 10px;font-size: 14px;     font-family: '微软雅黑';
+            font-weight: 400;
+            font-style: normal;
+            color: #FFFFFF;">灯光</span>
+          <el-switch style="display: block;margin-left:10px" v-model="isLighting" inline-prompt  @change="lightingClick" active-value="255" inactive-value="0" />
+          <span style="display: block;padding-left:70px;font-size: 14px; color: rgba(255, 255, 255, 0.8);">红外</span>
+          <el-switch style="display: block;margin-left:10px" v-model="isInfrared" inline-prompt  @change="infraredClick" active-value="255" inactive-value="0" />
+        </div>
+        <div style="display: flex;align-items: center; padding-top: 25px;padding-left: 15px;">
+          <span
+            style="display: block;padding-left: 10px;padding-right: 10px;font-size: 14px; color: rgba(255, 255, 255, 0.8);">预置位</span>
+            <el-input-number class="beforehandPosition-input" style="width: 75px" v-model="beforehandPosition" :min="1"
+            :max="10" controls-position="right" size="large" />
+          <div title="设置" class="Camera-operate-buttons" @click="presetPosition(129, beforehandPosition)">
+            <img src="@/assets/videoimg/u3366.png" alt="" style="cursor: pointer;">
+          </div>
+          <div title="删除" class="Camera-operate-buttons" @click="presetPosition(131, beforehandPosition)">
+            <img src="@/assets/videoimg/u3368.png" alt="">
+          </div>
+          <div title="调用"  class="Camera-operate-buttons" @click="presetPosition(130, beforehandPosition)">
+            <img src="@/assets/videoimg/u3370.png" alt="">
+          </div>
+        </div>
+        <div style="width: 250px;height: 1px;background: rgba(50, 177, 245, 0.2); margin: 20px;"></div>
+        <div style="padding-top:0px;padding-left:20px;padding-bottom:10px;font-family: 'Arial Normal', 'Arial'; 
+          font-weight: 400; font-style: normal; font-size: 14px;color: #009BFF;display: flex;
+          align-items: center;">
+          <div style="width: 4px;
+            height: 10px;
+            background: inherit;
+            background-color: #009BFF;margin-right: 5px;"></div>
+          <div>摄像机信息</div>
+        </div>
+        <div style="display:flex;padding-left:20px;">
+          <div class="informationtitle">摄像机名称</div>
+          <div class="informationcontent" :title="cameraInfo.patroldeviceName">{{ cameraInfo.patroldeviceName }}</div>
+        </div>
+        <div style="display:flex;padding-left:20px;">
+          <div class="informationtitle informationtop0">摄像机类型</div>
+          <div class="informationcontent informationtop0" :title="currency(CameraTypeList, cameraInfo.type)">
+            {{ currency(CameraTypeList, cameraInfo.type) }}</div>
+        </div>
+        <div style="display:flex;padding-left:20px;">
+          <div class="informationtitle informationtop0">安装位置</div>
+          <div class="informationcontent informationtop0" :title="cameraInfo.place">{{ cameraInfo.place }}</div>
+        </div>
+        <div style="display:flex;padding-left:20px;">
+          <div class="informationtitle informationtop0">录像时长</div>
+          <div class="informationcontent informationtop0">{{ cameraInfo.duration }}</div>
+        </div>
+        <div style="display:flex;padding-left:20px;">
+          <div class="informationtitle informationtop0">录像完整率</div>
+          <div class="informationcontent informationtop0">{{ cameraInfo.rate }}</div>
+        </div>
+      </div>
+    </div>
+
+
+    <Eldialog v-if="dialogVisible" :title="'视频回放'" :zIndex="2000" :width="'calc(100vw - 80px)'" 
+      @before-close="handleClose" :elclass="'ylclass'" >
+        <template v-slot:PopFrameContent>
+          <Videorecord v-if="dialogVisible" :playbackInfo="playbackInfo"> </Videorecord>
+        </template>
+      </Eldialog>
+  </div>
+</template>
+<style scoped lang="scss">
+.imgbg {
+  width: 100vw;
+  height: 100vh;
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+.videomonitor-box {
+  position: relative;
+  display: flex;
+  box-sizing: border-box;
+  padding: 15px;
+  padding-bottom: 0;
+  height: calc(100vh - 100px);
+
+  .telescopicidsbgcolor {
+    background: #409Eff !important;
+  }
+
+  .telescopicidsbgcolor:hover {
+    background: linear-gradient(to left, #b1b1b1, #ebebeb, #b1b1b1) !important;
+
+  }
+
+  .videomonitor-left {
+    width: 261px;
+    min-width: 261px;
+    height: calc(100vh - 115px);
+    // border: 1px solid rgba(0, 249, 162, 0.2);
+    // background: rgba(17, 52, 44, 0.9);
+    background: url(@/assets/videoimg/jcpz_260.png) no-repeat;
+    background-size: 100% 100%;
+     padding:0 14px;
+    .nav-box {
+      padding-top: 10px;
+      width: 100%;
+      display: flex;
+      justify-content: space-between;
+
+      .nav-list {
+        width: 65px;
+        height: 30px;
+        line-height: 30px;
+        font-family: 'MicrosoftYaHei Regular', 'MicrosoftYaHei';
+        font-weight: 400;
+        font-style: normal;
+        font-size: 14px;
+        text-align: center;
+        cursor: pointer;
+        background: transparent;
+        color: rgba(255, 255, 255, 0.5);
+        border: 1px solid #225b7e;
+      }
+
+      .nav-active {
+        // font-weight: bold;
+        // color: rgb(255, 255, 255);
+        color: #009bff !important;
+        border: 1px solid #009bff !important;
+        background: rgba(0, 155, 255, 0.2) !important;
+      }
+    }
+
+    .el-tree {
+      background: transparent;
+      color: #ffffff;
+      --el-tree-node-hover-bg-color: transparent;
+      --el-tree-text-color: rgba(50, 177, 245, 0.4);
+      // --el-tree-expand-icon-color: var(--el-text-color-placeholder);
+
+    }
+
+  }
+
+  .stationboard-box-title {
+    font-family: '阿里妈妈数黑体 Bold', '阿里妈妈数黑体';
+    font-weight: 700;
+    font-style: normal;
+    font-size: 16px;
+    color: #FFBD00;
+    height: 40px;
+    display: flex;
+    align-items: center;
+    padding-left: 15px;
+    padding-top: 25px;
+    padding-bottom: 20px;
+  }
+
+  .imgname {
+    color: #FFFFFF;
+  }
+
+  .titleline {
+    width: 100%;
+    height: 1px;
+    // background-image: linear-gradient(to right, rgb(0, 249, 162, 0.5), transparent);
+  }
+}
+
+.videomonitor-content {
+  margin: 0 8px;
+  width: calc(100vw - 630px);
+  // background: #000000;
+
+  .videomonitor-content-nav {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: 40px;
+    // background: #323030;
+
+    img {
+      // width: 20px;
+      // height: 20px;
+      // text-align: center;
+      // background: #00F9A2;
+      margin: 0 10px;
+      cursor: pointer;
+    }
+  }
+}
+
+.Camera-buttons-box {
+  position: relative;
+  height: 204px;
+  height: 204px;
+  margin-top:  20px;
+  margin-left:  50px;
+  margin-bottom: 10px;
+  // display: flex;
+  // flex-wrap: wrap;
+  // justify-content: center;
+}
+
+.Camera-img {
+  width: 100%;
+  height: calc(100vh - 155px);
+  border: 2px solid #fff;
+}
+
+.Jessibuca-box {
+  width: 100%;
+  height: calc(100% - 40px);
+  display: flex;
+  flex-wrap: wrap;
+  .Camera-img4 {
+    width: 50%;
+    height: 50%;
+    // border: 2px solid transparent;
+    border: 1px solid #fff;
+  }
+
+  .Camera-img9 {
+    width: 33.33%;
+    height: 33.33%;
+    border: 1px solid #fff;
+
+  }
+
+  .Camera-img16 {
+    width: 25%;
+    height: 25%;
+    border: 1px solid #fff;
+
+  }
+
+  .CameraActive {
+    border: 2px solid #409Eff;
+  }
+}
+
+.videomonitor-righthide {
+  width: 20px;
+  min-width: 20px;
+  height: calc(100vh - 115px);
+  // background: rgb(0, 255, 170,0.2);
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+}
+
+.videomonitor-righthide:hover {
+  // height: rgb(0, 255, 170);
+}
+
+.videomonitor-right {
+  position: relative;
+  width: 300px;
+  min-width: 300px;
+  height: calc(100vh - 115px);
+  background: url(@/assets/videoimg/spjk_300.png) no-repeat center center;
+  background-size: 100% 100%;
+  :deep(img){
+    pointer-events:none;
+    -webkit-touch-callout:none;  /*系统默认菜单被禁用*/  
+    -webkit-user-select:none; /*webkit浏览器*/  
+    -khtml-user-select:none; /*早期浏览器*/  
+    -moz-user-select:none;/*火狐*/  
+    -ms-user-select:none; /*IE10*/  
+    user-select:none;
+  }
+
+  .Camera-operate-buttons {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 16px;
+    height: 16px;
+    // border: 1px solid rgb(7, 162, 110);
+    cursor: pointer;
+    margin-left: 15px;
+  }
+
+  .Camera-operate-buttons:hover {
+    // background-color: rgba(33, 191, 149, 0.2);
+  }
+
+  .informationtitle {
+    width: 100px;
+    height: 36px;
+    line-height: 36px;
+    border: 1px solid rgba(50, 177, 245, 0.4);
+    border-right: 0;
+    padding-left: 10px;
+    font-size: 14px;
+    color: rgba(181, 215, 255, 0.5);
+    text-align: left;
+
+  }
+  .informationcontent {
+    width: 165px;
+    height: 36px;
+    line-height: 36px;
+    border: 1px solid rgba(50, 177, 245, 0.4);
+    padding-left: 10px;
+    font-size: 14px;
+    color: #FFFFFF;
+    text-align: left;
+    overflow: hidden;
+    /*内容超出后隐藏*/
+    text-overflow: ellipsis;
+    /* 超出内容显示为省略号*/
+    white-space: nowrap;
+    /*文本不进行换行*/
+  }
+
+  .informationtop0 {
+    border-top: 0;
+  }
+
+}
+
+:deep(.el-input__wrapper.is-focus) {
+  box-shadow: 0 0 0 1px rgba(50, 177, 245, 1) !important;
+}
+
+:deep(input::-webkit-input-placeholder) {
+
+  -webkit-text-fill-color: rgba(255, 255, 255, 0.3);
+
+}
+
+:deep(.el-input__inner) {
+  color: #fff !important;
+}
+
+:deep(.el-icon) {
+  transform: scale(1) !important;
+}
+
+// :deep(.el-input__wrapper) {
+//   background: transparent;
+//   box-shadow: 0 0 0 1px rgb(0, 249, 162, 0.3) inset;
+//   border-radius: 1px;
+// }
+
+// :deep(.el-input__wrapper:hover) {
+//   box-shadow: 0 0 0 1px rgba(0, 249, 162, 1) inset;
+// }
+
+// :deep(.el-input__wrapper .el-input__icon) {
+//   color: rgb(7, 168, 114);
+// }
+.paginationclass{
+  :deep(.el-pager li){
+    margin: 0 5px;
+  }
+  
+}
+
+  :deep(.is-checked .el-checkbox__inner::after) {
+    color: #ffffff;
+  }
+
+  :deep(.el-checkbox__label) {
+    color: rgba(255, 255, 255, 1) !important;
+  }
+  
+  .Camera-left-button1{
+    cursor: pointer;
+    position: absolute;
+    top: 3px;
+    left: 63px;
+    width: 74px;
+    height: 57px;
+    background: url(@/assets/videoimg/sxj_1.png) no-repeat center center;
+    background-size: 100% 100%;
+  }
+  .Camera-left-button2{
+    cursor: pointer;
+    position: absolute;
+    top: 10px;
+    left: 122px;
+    width: 73px;
+    height: 72px;
+    background: url(@/assets/videoimg/sxj_2.png) no-repeat center center;
+    background-size: 100% 100%;
+  }
+  .Camera-left-button3{
+    cursor: pointer;
+    position: absolute;
+    top: 62px;
+    left: 147px;
+    width: 57px;
+    height: 75px;
+    background: url(@/assets/videoimg/sxj_3.png) no-repeat center center;
+    background-size: 100% 100%;
+  }
+  .Camera-left-button4{
+    cursor: pointer;
+    position: absolute;
+    top: 121px;
+    left: 124px;
+    width: 73px;
+    height: 73px;
+    background: url(@/assets/videoimg/sxj_4.png) no-repeat center center;
+    background-size: 100% 100%;
+  }
+  .Camera-left-button5{
+    cursor: pointer;
+    position: absolute;
+    top: 147px;
+    left: 67px;
+    width: 74px;
+    height: 57px;
+    background: url(@/assets/videoimg/sxj_5.png) no-repeat center center;
+    background-size: 100% 100%;
+  }
+  .Camera-left-button6{
+    cursor: pointer;
+    position: absolute;
+    top: 125px;
+    left: 12px;
+    width: 72px;
+    height: 72px;
+    background: url(@/assets/videoimg/sxj_6.png) no-repeat center center;
+    background-size: 100% 100%;
+  }
+  .Camera-left-button7{
+    cursor: pointer;
+    position: absolute;
+    top: 69px;
+    left: 2px;
+    width: 57px;
+    height: 73px;
+    background: url(@/assets/videoimg/sxj_7.png) no-repeat center center;
+    background-size: 100% 100%;
+  }
+  .Camera-left-button8{
+    cursor: pointer;
+    position: absolute;
+    top: 12px;
+    left: 10px;
+    width: 72px;
+    height: 72px;
+    background: url(@/assets/videoimg/sxj_8.png) no-repeat center center;
+    background-size: 100% 100%;
+  }
+  .Camera-left-button9{
+    cursor: pointer;
+    position: absolute;
+    top: 58px;
+    left: 57px;
+    width: 91px;
+    height: 91px;
+    background: url(@/assets/videoimg/sxj_9.png) no-repeat center center;
+    background-size: 100% 100%;
+  }
+
+  .Camera-left-button1:hover{
+    background: url(@/assets/videoimg/sxj_1.png) no-repeat center center;
+    background: url(@/assets/videoimg/sxj_11.png) no-repeat center center;
+    background-size: 100% 100%;
+  }
+  .Camera-left-button2:hover{
+    background: url(@/assets/videoimg/sxj_2.png) no-repeat center center;
+    background: url(@/assets/videoimg/sxj_21.png) no-repeat center center;
+    background-size: 100% 100%;
+  }
+  .Camera-left-button3:hover{
+    background: url(@/assets/videoimg/sxj_3.png) no-repeat center center;
+    background: url(@/assets/videoimg/sxj_31.png) no-repeat center center;
+    background-size: 100% 100%;
+  }
+  .Camera-left-button4:hover{
+    background: url(@/assets/videoimg/sxj_4.png) no-repeat center center;
+    background: url(@/assets/videoimg/sxj_41.png) no-repeat center center;
+    background-size: 100% 100%;
+  }
+
+  .Camera-left-button5:hover{
+    background: url(@/assets/videoimg/sxj_5.png) no-repeat center center;
+    background: url(@/assets/videoimg/sxj_51.png) no-repeat center center;
+    background-size: 100% 100%;
+  }
+  .Camera-left-button6:hover{
+    background: url(@/assets/videoimg/sxj_6.png) no-repeat center center;
+    background: url(@/assets/videoimg/sxj_61.png) no-repeat center center;
+    background-size: 100% 100%;
+  }
+  .Camera-left-button7:hover{
+    background: url(@/assets/videoimg/sxj_7.png) no-repeat center center;
+    background: url(@/assets/videoimg/sxj_71.png) no-repeat center center;
+    background-size: 100% 100%;
+  }
+  .Camera-left-button8:hover{
+    background: url(@/assets/videoimg/sxj_8.png) no-repeat center center;
+    background: url(@/assets/videoimg/sxj_81.png) no-repeat center center;
+    background-size: 100% 100%;
+  }
+  .Camera-left-button9:hover{
+    background: url(@/assets/videoimg/sxj_9.png) no-repeat center center;
+    background: url(@/assets/videoimg/sxj_91.png) no-repeat center center;
+    background-size: 100% 100%;
+  }
+  .focallengthbox{
+    display: flex;
+    padding-left: 40px;
+    padding-top: 10px;
+    .focallength1{
+      border: 1px solid rgba(50, 177, 245,0.4);
+      width: 40px;
+      height: 40px;
+      display: flex;
+      justify-content: center;
+      align-items:center ;
+      cursor: pointer;
+    }
+    .focallength2{
+      pointer-events: none;
+      -webkit-user-select: none;
+      -moz-user-select: none;
+      -ms-user-select: none;
+      user-select: none;
+      border-top: 1px solid rgba(50, 177, 245,0.4);
+      border-bottom: 1px solid rgba(50, 177, 245,0.4);
+      width: 140px;
+      height: 40px;
+      display: flex;
+      justify-content: center;
+      align-items:center ;
+      font-size: 14px;
+      color: #B5D7FF;
+    }
+  }
+  .gaolaing{
+      background:rgba(50, 177, 245,0.4)
+    }
+</style>
+ 
diff --git a/riis-web/src/views/videomonitor/videorecord/index.vue b/riis-web/src/views/videomonitor/videorecord/index.vue
new file mode 100644
index 0000000..8cabe24
--- /dev/null
+++ b/riis-web/src/views/videomonitor/videorecord/index.vue
@@ -0,0 +1,599 @@
+<script lang="ts">
+export default {
+    name: "videorecord", // 视频回放
+};
+</script>
+
+<script setup lang="ts">
+  // import recordDownload from './recordDownload.vue'
+import { ref, onMounted, nextTick } from "vue";
+import { ElMessageBox, ElMessage } from "element-plus";
+import { getCameraByArea, getSubstationDeviceById } from "@/api/videomonitor/index";
+import moment  from 'moment'
+import { Search } from '@element-plus/icons-vue'
+import JessibucaPlayer from '@/components/jessibuca/index1.vue'
+import axios from 'axios';
+import { useUserStore } from '@/store/modules/user';
+const props = defineProps({
+  playbackInfo: {
+    type: Object,
+    default: false
+  }
+});
+
+const userStore = useUserStore();
+
+const clickNum = ref(0)
+const recordVideoPlayer:any = ref(null)
+
+const deviceId = ref("")  // 摄像头国标编号
+const channelId = ref("") // 通道国标编号
+
+function videoInit(row: any) {
+    deviceId.value = row.deviceId
+    channelId.value = row.channelId
+    queryRecordDetails()
+}
+
+
+
+const pictureList:any = ref([]) // 录像信息列表
+const pictureactive = ref(-1)
+
+const chooseFile = ref({})
+        
+function checkedFile(file:any,index:any){ // 点击播放录像
+  pictureactive.value = index
+  chooseFile.value = file;
+  setTime(file.startTime, file.endTime);
+  playRecord()
+}
+ const streamId = ref("")
+ const streamInfo:any = ref({})
+ const app = ref("")
+ const mediaServerId = ref("")
+ const ssrc = ref("")
+ const videoUrl = ref("")
+ function stopPlayRecord (callback:any) {
+  recordVideoPlayer.value.pause()
+        videoUrl.value = '';
+          axios.get(userStore.webApiMonitorUrl + '/api/playback/stop/' + playDeviceId.value + "/" + playChannelId.value + "/" + streamId.value, {}).then((res: any) => {
+          if (callback) callback()
+        })
+      }
+ function playRecord (){
+  clickNum.value = clickNum.value +1
+  if (streamId.value !== "") {
+          stopPlayRecord(()=> {
+            streamId.value = "";
+            playRecord();
+          })
+        } else {
+         axios.get(userStore.webApiMonitorUrl + '/api/playback/start/' +  playDeviceId.value + "/" + playChannelId.value + '?startTime=' + startTime.value + '&endTime=' + endTime.value, {}).then((res: any) => {
+         
+            if(res.data.code === 0) {
+              // 处理时间信息
+                streamInfo.value = res.data.data;
+                app.value = res.data.data.app;
+                streamId.value = res.data.data.stream;
+                mediaServerId.value = res.data.data.mediaServerId;
+                ssrc.value = res.data.data.ssrc;
+                videoUrl.value = getUrlByStreamInfo()
+
+            }
+          }).catch(function (error: any) {
+          });
+        }
+}
+function getUrlByStreamInfo(){
+  
+  if (location.protocol === "https:") {
+    videoUrl.value = streamInfo.value["wss_flv"]
+  }else {
+    videoUrl.value = streamInfo.value["ws_flv"]
+  }
+  return videoUrl.value;
+
+}
+const chooseDate = ref("")
+const playTime:any = ref([])
+const timeRange:any = ref([])
+
+const startTime = ref('')
+const endTime = ref('')
+const tmpTime = ref(0)
+const tmpStartTime = ref(0)
+function setTime(startTimes:any, endTimes:any){
+  startTime.value = startTimes;
+  endTime.value = endTimes;
+  let start:any = (new Date(startTime.value).getTime() - new Date(chooseDate.value + " 00:00:00").getTime())/1000;
+  let end:any = (new Date(endTime.value).getTime() - new Date(chooseDate.value + " 00:00:00").getTime())/1000;
+
+  playTime.value = [start, end];
+  timeRange.value = [startTime, endTime]
+  tmpTime.value = new Date(endTimes).getTime() - new Date(startTimes).getTime()
+  tmpStartTime.value = new Date(startTimes).getTime() 
+  Model_data_click(tmpTime.value)
+}
+const playEndTime = ref("00:00:00")
+function Model_data_click(tmp:any){
+    let xiaoshi = 0
+    let fen = 0
+    let miao = 0
+    let time =  parseInt((tmp/1000).toString())
+    if(time<=59){
+      miao = time
+    }else if(time>59&&time<=3599){
+      fen = parseInt((time/60).toString())
+      miao =parseInt((time-(fen*60)).toString())
+    }else if(time>3599){
+      xiaoshi =  parseInt((time/3600).toString())
+      fen  =parseInt(((time-(xiaoshi*60*60))/60).toString())
+      miao = parseInt(((time-(xiaoshi*60*60))-(fen*60)).toString())
+
+    }
+    if(xiaoshi<10){
+      xiaoshi = parseInt("0" + xiaoshi)
+    }
+    if(fen<10){
+      fen =parseInt("0" + fen)
+    }
+    if(miao<10){
+      miao =parseInt("0" + miao)
+    }
+    playEndTime.value = xiaoshi +":"+fen +":"+miao
+}
+const playDeviceId = ref("")
+const playChannelId = ref("")
+
+function queryRecordDetails(){
+  setTime(chooseDate.value + " 00:00:00", chooseDate.value  + " 23:59:59");
+  pictureList.value = [];
+  playDeviceId.value = ""
+  playChannelId.value = ""
+  axios.get(userStore.webApiMonitorUrl + '/api/gb_record/queryNvrRecord/' + deviceId.value + '/' +channelId.value + '?startTime=' + startTime.value + '&endTime=' + endTime.value, {}).then((res: any) => {
+    if(res.data.code === 0) {
+      // 处理时间信息
+      pictureList.value = res.data.data.recordList;
+      playDeviceId.value = res.data.data.deviceId
+      playChannelId.value = res.data.data.channelId
+    }
+  }).catch(function (error: any) {
+  })
+}
+const sliderMIn = ref(0)
+const sliderMax = ref(86400)
+const playTimeSliderMarks = ref({
+  0: "00:00",
+  3600: "01:00",
+  7200: "02:00",
+  10800: "03:00",
+  14400: "04:00",
+  18000: "05:00",
+  21600: "06:00",
+  25200: "07:00",
+  28800: "08:00",
+  32400: "09:00",
+  36000: "10:00",
+  39600: "11:00",
+  43200: "12:00",
+  46800: "13:00",
+  50400: "14:00",
+  54000: "15:00",
+  57600: "16:00",
+  61200: "17:00",
+  64800: "18:00",
+  68400: "19:00",
+  72000: "20:00",
+  75600: "21:00",
+  79200: "22:00",
+  82800: "23:00",
+  86400: "24:00",
+}) 
+function  playTimeFormat(val:any){
+        let h = parseInt((val/3600).toString());
+        let m = parseInt(((val - h*3600)/60).toString());
+        let s = parseInt((val - h*3600 - m*60).toString());
+        let hStr:any = h;
+        let mStr:any = m;
+        let sStr:any = s;
+        if (h < 10) {
+          hStr = "0" + hStr;
+        }
+        if (m < 10) {
+          mStr = "0" + mStr;s
+        }
+        if (s < 10) {
+          sStr = "0" + sStr;
+        }
+        return hStr + ":" + mStr + ":" + sStr
+      }
+
+
+function playTimeChange(val:any){
+  let startTimeStr = moment(new Date(chooseDate.value + " 00:00:00").getTime() + val[0]*1000).format("YYYY-MM-DD HH:mm:ss");
+  let endTimeStr = moment(new Date(chooseDate.value + " 00:00:00").getTime() + val[1]*1000).format("YYYY-MM-DD HH:mm:ss");
+  setTime(startTimeStr, endTimeStr)
+  playRecord();
+}
+function sliderChange(e:any){
+  if (streamId.value !== "") {
+    stopPlayRecord(()=> {
+      streamId.value = "";
+      sliderChange(e);
+    })
+  } else {
+  axios.get(userStore.webApiMonitorUrl + '/api/playback/start/' +  playDeviceId.value + "/" + playChannelId.value + '?startTime=' + e + '&endTime=' + endTime.value, {}).then((res: any) => {
+         
+    if(res.data.code === 0) {
+      // 处理时间信息
+        streamInfo.value = res.data.data;
+        app.value = res.data.data.app;
+        streamId.value = res.data.data.stream;
+        mediaServerId.value = res.data.data.mediaServerId;
+        ssrc.value = res.data.data.ssrc;
+        videoUrl.value = getUrlByStreamInfo()
+    }
+  }).catch(function (error: any) {
+  });
+}
+}
+function getTimeForFile(file:any){
+        let startTime = new Date(file.startTime);
+        let endTime = new Date(file.endTime);
+        return [startTime, endTime, endTime.getTime() - startTime.getTime()];
+      }
+function  getDataWidth(item:any){
+        let timeForFile:any = getTimeForFile(item);
+        let result = (timeForFile[2])/((86400 - 0)*1000)
+        return result*100
+      }
+function  getDataLeft(item:any){
+  let timeForFile:any = getTimeForFile(item);
+  let differenceTime:any = timeForFile[0].getTime() - new Date(chooseDate.value + " 00:00:00").getTime()
+  return parseFloat(((differenceTime - 0 * 1000)/((86400 - 0)*1000)).toString())*100  
+}
+const calenda:any = ref("")
+const calendar:any = ref("")
+const selectDate = (val: string) => {
+  calendar.value.selectDate(val)
+
+}
+function clickDay(row: any) {
+  chooseDate.value = row.day
+  if(channelId.value == "" || channelId.value == null){
+     return
+  }
+  queryRecordDetails()
+}
+
+function gbPlay(){// 视频回放播放功能
+  axios.get(userStore.webApiMonitorUrl + '/api/playback/resume/' + streamId.value, {}).then((res: any) => {
+    }).catch(function (error: any) {
+    });
+}
+function gbPause(){ // 视频回放暂停功能
+  axios.get(userStore.webApiMonitorUrl + '/api/playback/pause/' + streamId.value, {}).then((res: any) => {
+    }).catch(function (error: any) {
+    })
+}
+function downloadRecord(row:any){
+  axios.get(userStore.webApiMonitorUrl + 
+  
+  '/api/gb_record/downloadRecord/start/' + deviceId.value + '/' + channelId.value + '?startTime=' + row.startTime + '&endTime=' +
+  row.endTime + '&downloadSpeed=4', {}).then((res: any) => {
+    if (res.data.code === 0) {
+      let streamInfo = res.data.data;
+      // this.$refs.recordDownload.openDialog(this.deviceId, this.channelId, streamInfo.app, streamInfo.stream, streamInfo.mediaServerId);
+    }else{
+      ElMessage({
+             type: 'error',
+             message: res.data.msg,
+         })
+    }
+     
+    }).catch(function (error: any) {
+    })
+}
+
+function gbScale(row:any){
+  axios.get(userStore.webApiMonitorUrl + 
+  
+  `/api/playback/speed/${streamId.value }/${row}`, {}).then((res: any) => {
+   
+    }).catch(function (error: any) {
+    })
+}
+const ishide = ref(true)
+onMounted(() => {
+  chooseDate.value = moment().format('YYYY-MM-DD')
+  videoInit(props.playbackInfo)
+})
+</script>
+
+<template>
+  <div>
+    <div class="videomonitor-box">
+      <div class="videomonitor-right" id="richright">
+        <div class="stationboard-box-title">
+          <div class="imgname">回放时间</div>
+        </div>
+        <el-calendar ref="calendar" style="height:310px ;">
+            <template #header="{ date }">
+              <div style="z-index:100;cursor:pointer; " @click="selectDate('prev-month')"><img
+                 src="@/assets/videoimg/smallleft.png" style="z-index:100" alt=""></div>
+              <div style="z-index:100;cursor:pointer; color: #fff;" @click="selectDate('today')">{{ date }}
+              </div>
+              <div style="z-index:100;cursor:pointer;" @click="selectDate('next-month')"><img
+                 src="@/assets/videoimg/smallright.png" alt="" style="z-index:100"></div>
+            </template>
+            <template #dateCell="{ data }">
+              <div @click="clickDay(data)">
+                {{ data.day.split("-").slice(2).join("-") }}
+              </div>
+            </template>
+          </el-calendar>
+        <img src="@/assets/videoimg/u1227.png" style="height: 2px;margin: 25px 20px;" alt="" />
+        <div style="padding-left:20px;padding-bottom:10px;font-family: 'Arial Normal', 'Arial'; 
+          font-weight: 400; font-style: normal; font-size: 14px;color: rgb(0, 155, 255);display: flex;
+          align-items: center;">
+          <div style="width: 4px;
+            height: 10px;
+            background: inherit;
+            background-color:rgb(0, 155, 255);margin-right: 5px;"></div>
+          <div>录像信息</div>
+        </div>
+          <el-scrollbar height="calc(100vh - 580px )">
+            <div v-for="(item,index) in pictureList" :key="item.name" @click="checkedFile(item,index)" class="pictureli" 
+              :class="{'pictureactive':index == pictureactive}">
+                <div><span style="padding-right: 10px;">{{ item.startTime.split(' ')[0] }} </span> {{ item.startTime.split(' ')[1] }} - {{ item.endTime.split(' ')[1] }}</div>
+                <!-- <img src="@/assets/monitorsystem/lxhf_xz.png" alt="" @click.stop="downloadRecord(item)"> -->
+              </div>
+        </el-scrollbar>
+      </div>
+      <div class="videomonitor-content" id="contentid">
+        <div class="Jessibuca-box">
+          <div class="Camera-img">
+            <JessibucaPlayer ref="recordVideoPlayer" :isrecord="'playback'" :_uid="9999" :visible.sync="true" :videoUrl="videoUrl" height="100px" 
+            :playEndTime="playEndTime" :tmpTime="tmpTime" 
+            :endTime="endTime" :tmpStartTime="tmpStartTime"  :pictureList="pictureList" :chooseDate="chooseDate"
+            :hasAudio="false" fluent autoplay live @sliderChange="sliderChange"
+            :clickNum="clickNum"
+            @gbScale="gbScale"
+            @gbPlay="gbPlay" @gbPause="gbPause"></JessibucaPlayer>
+          </div>
+        </div>
+        <div class="videorecord-content-nav">
+          
+          <el-slider
+            :disabled="videoUrl ==''"
+            class="playtime-slider"
+            v-model="playTime"
+            id="playtimeSlider"
+    
+            :min="sliderMIn"
+            :max="sliderMax"
+            :range="true"
+            :format-tooltip="playTimeFormat"
+            @change="playTimeChange"
+            :marks="playTimeSliderMarks">
+          </el-slider>
+          <div class="slider-val-box">
+            <div class="slider-val" v-for="item of pictureList" :style="'width:' + getDataWidth(item) + '%; left:' + getDataLeft(item) + '%'"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<style scoped lang="scss">
+.videomonitor-box {
+  position: relative;
+  display: flex;
+  box-sizing: border-box;
+  padding:8px;
+  padding-bottom:0;
+  height: calc(100vh - 120px);
+  .stationboard-box-title {
+    font-family: '阿里妈妈数黑体 Bold', '阿里妈妈数黑体';
+    font-weight: 700;
+    font-style: normal;
+    font-size: 16px;
+    color: #FFFFFF;
+    height: 40px;
+    display: flex;
+    align-items: center;
+    padding-left: 10px;
+  }
+
+  .imgname {
+    padding-left: 10px;
+  }
+
+  .titleline {
+    width: 100%;
+    height: 1px;
+    // background-image: linear-gradient(to right, rgb(0, 249, 162, 0.5), transparent);
+  }
+}
+
+.videomonitor-content {
+  margin: 0 8px;
+
+  width: calc(100vw - 300px);
+  // background: #000000;
+
+  .videorecord-content-nav {
+    height: 40px;
+    width: calc(100% - 40px);
+    margin: auto;
+
+    img {
+      margin: 0 10px;
+      cursor: pointer;
+    }
+
+    :deep(.el-slider__bar) {
+      background-color: transparent;
+    }
+
+    :deep(.el-slider__button) {
+      border: solid 2px rgb(0, 155, 255);
+    }
+
+    :deep(.el-slider__runway.is-disabled .el-slider__bar) {
+      background-color: var(--el-slider-disabled-color);
+    }
+
+
+  }
+}
+
+.Camera-img {
+  width: 100%;
+  height: calc(100vh - 180px);
+}
+
+.Jessibuca-box {
+  width: 100%;
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.videomonitor-right {
+  position: relative;
+  width: 281px;
+  min-width: 281px;
+  height: calc(100vh - 140px);
+  background: url(@/assets/videoimg/xsjk_280.png) no-repeat center center;
+  background-size: 100% 100%;
+  :deep(.el-scrollbar) {
+    height: calc(100vh - 560px);
+    min-height: 100px;
+  }
+
+:deep(.el-input__icon) {
+  display: none;
+}
+  // 日历
+  :deep(.el-calendar) {
+    --el-calendar-cell-width: 30px;
+    background-color: #ffffff00;
+  }
+
+  :deep(.el-calendar-table .el-calendar-day) {
+    background: rgb(31, 41, 56) ;
+    border: 1px solid rgb(34, 55, 71) ;
+    padding: 0px !important;
+    line-height: 28px;
+    width: 32px;
+  }
+
+  :deep(.el-calendar-table__row) {
+    display: flex;
+  }
+
+  :deep(.el-calendar-table__row td) {
+    display: block;
+    border: none !important;
+    margin: 2px 2px;
+    z-index: 100;
+    color: #B5D7FF;
+    box-sizing: border-box;
+  }
+
+  :deep(.el-calendar-table__row td div div) {
+    border: 1px solid rgb(27,40, 56, 0) !important;
+    font-size: 14px;
+    text-align: center;
+  }
+
+  :deep(.el-calendar-table__row .is-today div div) {
+    color: #fff;
+    z-index: 100;
+
+  }
+
+  :deep(.el-calendar-table__row .is-selected) {
+    border-radius: 4px;
+  }
+
+  :deep(.el-calendar-table__row .is-selected div div) {
+    background-color: rgb(0,153,255);
+    border: 1px solid rgb(0,153,255) !important;
+    border-radius: 4px;
+  }
+  :deep(.el-calendar-table__row .is-selected div div:hover) {
+    color: #ffffff;
+  }
+  :deep(.el-calendar-table__row td :hover) {
+    box-sizing: border-box;
+    border-radius: 4px;
+  }
+
+  :deep(.el-calendar-table__row td div div:hover) {
+    color: rgba(0, 118, 253, 1);
+    box-sizing: border-box;
+    border-radius: 4px;
+  }
+  :deep(.el-calendar__body) {
+    padding: 12px 10px 35px;
+    padding-left: 14px;
+  }
+
+  :deep(.el-calendar-table thead th) {
+    display: block;
+    padding: 5px 0px;
+    margin: 0px 11px;
+    z-index: 100;
+    color: #fff;
+  }
+
+  :deep(.el-calendar-table thead) {
+    display: flex;
+  }
+
+  //日历
+
+    :deep(.el-calendar__header) {
+      justify-content: space-around !important;
+      align-items: center !important;
+      border: none;
+    }
+//日历
+  .pictureli {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 20px;
+    height: 36px;
+    font-family: "Arial Normal", Arial;
+    font-weight: 400;
+    font-style: normal;
+    font-size: 14px;
+    color: rgba(255, 255, 255, 0.9);
+    cursor: pointer;
+  }
+
+  .pictureli:hover {
+    color: #009BFF;
+  }
+
+  .pictureactive {
+    color: rgb(0, 155, 255);
+    background: -webkit-linear-gradient(left, rgba(0, 155, 255, 0.2), rgba(0, 249, 162, 0));
+  }
+}
+.slider-val-box{
+    height: 6px;
+    position: relative;
+    top: -19px;
+  }
+  .slider-val{
+    height: 6px;
+    background-color: rgb(0, 155, 255);
+    position: absolute;
+  }
+</style>
+ 
diff --git a/riis-web/src/views/videomonitor/videorecord/recordDownload.vue b/riis-web/src/views/videomonitor/videorecord/recordDownload.vue
new file mode 100644
index 0000000..2249724
--- /dev/null
+++ b/riis-web/src/views/videomonitor/videorecord/recordDownload.vue
@@ -0,0 +1,196 @@
+<template>
+<div id="recordDownload" >
+  <el-dialog :title="title" v-if="showDialog"  width="45rem" :append-to-body="true" :close-on-click-modal="false" :visible.sync="showDialog" :destroy-on-close="true" @close="close()" center>
+    <el-row>
+      <el-col :span="18" style="padding-top: 7px;">
+        <el-progress :percentage="percentage"></el-progress>
+      </el-col>
+      <el-col :span="6" >
+        <el-button icon="el-icon-download" v-if="percentage < 100" size="mini" title="点击下载可将以缓存部分下载到本地" @click="download()">停止缓存并下载</el-button>
+      </el-col>
+    </el-row>
+  </el-dialog>
+</div>
+</template>
+
+
+<script>
+
+import moment from "moment";
+
+export default {
+    name: 'recordDownload',
+    created() {
+
+
+    },
+    data() {
+        return {
+          title: "四倍速下载中...",
+          deviceId: "",
+          channelId: "",
+          app: "",
+          stream: "",
+          mediaServerId: "",
+          showDialog: false,
+          scale: 1,
+          percentage: 0.00,
+          streamInfo: null,
+          taskId: null,
+          getProgressRun: false,
+          getProgressForFileRun: false,
+          timer: null
+
+        };
+    },
+    methods: {
+        openDialog: function (deviceId, channelId, app, stream, mediaServerId) {
+            this.deviceId = deviceId;
+            this.channelId = channelId;
+            this.app = app;
+            this.stream = stream;
+            this.mediaServerId = mediaServerId;
+            this.showDialog = true;
+            this.getProgressRun = true;
+            this.percentage = 0.0;
+            this.getProgressTimer()
+        },
+        getProgressTimer: function (){
+          if (!this.getProgressRun) {
+            return;
+          }
+          if (this.percentage == 100 ) {
+            this.getFileDownload();
+            return;
+          }
+          setTimeout( ()=>{
+            if (!this.showDialog) return;
+            this.getProgress(this.getProgressTimer())
+          }, 5000)
+        },
+        getProgress: function (callback){
+          this.$axios({
+            method: 'get',
+            url: `/api/gb_record/download/progress/${this.deviceId}/${this.channelId}/${this.stream}`
+          }).then((res)=> {
+
+              if (res.data.code === 0) {
+                this.streamInfo = res.data.data;
+                if (parseFloat(res.data.progress) == 1) {
+                  this.percentage = 100;
+                }else {
+                  this.percentage = (parseFloat(res.data.data.progress)*100).toFixed(1);
+                }
+                if (callback)callback();
+              }else {
+                this.$message({
+                  showClose: true,
+                  message: res.data.msg,
+                  type: "error",
+                });
+                this.close();
+              }
+
+          }).catch((e) =>{
+          });
+        },
+        close: function (){
+          this.stopDownloadRecord();
+          if (this.timer !== null) {
+            window.clearTimeout(this.timer);
+            this.timer = null;
+          }
+          this.showDialog=false;
+          this.getProgressRun = false;
+          this.getProgressForFileRun = false;
+        },
+        gbScale: function (scale){
+          this.scale = scale;
+        },
+        download: function (){
+          this.getProgressRun = false;
+          if (this.streamInfo != null ) {
+            if (this.streamInfo.progress < 1) {
+              // 发送停止缓存
+              this.stopDownloadRecord((res)=>{
+                  this.getFileDownload()
+              })
+            }else {
+              this.getFileDownload()
+            }
+          }
+        },
+        stopDownloadRecord: function (callback) {
+          this.$axios({
+            method: 'get',
+            url: '/api/gb_record/download/stop/' + this.deviceId + "/" + this.channelId+ "/" + this.stream
+          }).then((res)=> {
+            if (callback) callback(res)
+          });
+        },
+        getFileDownload: function (){
+          this.$axios({
+            method: 'get',
+            url:`/record_proxy/${this.mediaServerId}/api/record/file/download/task/add`,
+            params: {
+              app: this.app,
+              stream: this.stream,
+              startTime: null,
+              endTime: null,
+            }
+          }).then((res) =>{
+            if (res.data.code === 0 ) {
+              // 查询进度
+              this.title = "录像文件处理中..."
+              this.taskId = res.data.data;
+              this.percentage = 0.0;
+              this.getProgressForFileRun = true;
+              this.getProgressForFileTimer();
+            }
+          }).catch(function (error) {
+          });
+        },
+        getProgressForFileTimer: function (){
+          if (!this.getProgressForFileRun || this.percentage == 100) {
+            return;
+          }
+          setTimeout( ()=>{
+            if (!this.showDialog) return;
+            this.getProgressForFile(this.getProgressForFileTimer())
+          }, 1000)
+        },
+        getProgressForFile: function (callback){
+          this.$axios({
+            method: 'get',
+            url:`/record_proxy/${this.mediaServerId}/api/record/file/download/task/list`,
+            params: {
+              app: this.app,
+              stream: this.stream,
+              taskId: this.taskId,
+              isEnd: true,
+            }
+          }).then((res) => {
+            if (res.data.code === 0) {
+              if (res.data.data.length === 0){
+                this.percentage = 0
+                return
+              }
+                this.percentage = parseFloat(res.data.data.percentage)*100
+                 if (res.data.data[0].percentage === '1') {
+                   this.getProgressForFileRun = false;
+                   window.open(res.data.data[0].downloadFile)
+                   this.close();
+                 }else {
+                   if (callback)callback()
+                 }
+            }
+          }).catch(function (error) {
+          });
+        }
+    }
+};
+</script>
+
+<style>
+
+</style>