Merge branch 'hi-ucs-dev' of http://192.168.124.50:3000/wuhongjian/hi-ucs into hi-ucs-dev

.gitignore

@@ -1,11 +1,13 @@
 back/dist-西海岸-后台管理.zip
 back/public/index.html
+back/node_modules
 back/dist-西海岸-后台管理-带配置文件.zip
 back/dist-市局-后台管理-带配置文件.zip
 back/dist-包头-后台管理.zip
 back/dist-市局-后台管理.zip
 back/dist-市局-后台管理-v0.8.2.1.zip
 front/public/index.html
+front/node_modules
 back/dist-西海岸-后台管理-v0.8.2.1.zip
 back/dist-市局-后台管理-v0.8.2.3.zip
 back/dist-西海岸-后台管理-v0.8.2.4.d.zip

front/.gitignore

@@ -4,7 +4,7 @@ dist
 package-lock.json
 yarn.lock
 *.zip
-
+/node_modules
 # local env files
 .env.local
 .env.*.local

front/public/static/config/basicConfig.js

@@ -2,7 +2,7 @@
  * @Author: hisense.wuhongjian
  * @Date: 2020-07-07 16:03:23
  * @LastEditors: hisense.wuhongjian
- * @LastEditTime: 2022-11-24 19:38:36
+ * @LastEditTime: 2022-11-27 23:42:04
  * @Description: 系统静态参数配置
  */
 var _global = {}

front/public/static/config/location.js

@@ -2,38 +2,42 @@
  * @Author: hisense.wuhongjian
  * @Date: 2020-07-07 16:03:23
  * @LastEditors: hisense.wuhongjian
- * @LastEditTime: 2022-10-13 20:53:24
+ * @LastEditTime: 2022-11-26 18:40:08
  * @Description: 数据资源参数配置
  */
 // eslint-disable-next-line no-undef
 const newLocation = CONFIGITEM.version
-    // const newLocation = 'baotou'
-    // const newLocation = 'xihaian'
+// const newLocation = 'baotou'
+// const newLocation = 'xihaian'
 
 // 数据资源数据
 const whoShow = {}
 const launchedDataNumObject = {}
-    // 导航数据
+// 导航数据
 const navListManagement = {}
-    // 无人机单兵数据
+// 无人机单兵数据
 const uavAndIndividualSoldier = {}
-    // 基础设施
+// 基础设施
 const infrastructure = {}
-    // 区市站点数据
+// 区市站点数据
 const mapTestNum = {}
-    // 底部数据
+// 底部数据
 const footerDataList = {}
-    // 西海岸--特殊用户
+// 西海岸--特殊用户
 const xhaHasPermissionUser = {}
-    // qingdao
+// qingdao
 if (newLocation !== 'baotou' && newLocation !== 'xihaian') {
   whoShow.itShowQingDao = true
   infrastructure.deptName = '青岛市大数据发展管理局'
   infrastructure.deptId = '1067246875800000066'
   navListManagement.navList = [
     { name: '共享门户', key: 'home' },
-        { name: '能力集市', key: 'DetailsPageconetent', innerKey: 'algorithmCompare' },
-        // { name: '能力云图', key: 'capabilityCloud' },
+    {
+      name: '能力集市',
+      key: 'DetailsPageconetent',
+      innerKey: 'algorithmCompare',
+    },
+    { name: '能力云图', key: 'capabilityCloud' },
     { name: '能力统计', key: 'abilityStatistics' },
     // { name: '开发指南', key: 'developmentGuide' },
     { name: '新手指南', key: 'instructionManual' },
@@ -50,7 +54,8 @@ if (newLocation !== 'baotou' && newLocation !== 'xihaian') {
       left: '青岛市大数据发展管理局',
       right: '政府标识码3702000106',
     },
-        address: [{
+    address: [
+      {
         name: '邮编: 266071',
         value: 'Email: QDDSJJ@qingdao.shandong.cn',
       },
@@ -64,7 +69,8 @@ if (newLocation !== 'baotou' && newLocation !== 'xihaian') {
       },
     ],
   }
-    mapTestNum.lsNum = [{
+  mapTestNum.lsNum = [
+    {
       name: '基础设施',
       key: 'lsjcss',
       num: '20135个',
@@ -80,7 +86,8 @@ if (newLocation !== 'baotou' && newLocation !== 'xihaian') {
       num: '28个',
     },
   ]
-    mapTestNum.xhaNum = [{
+  mapTestNum.xhaNum = [
+    {
       name: '基础设施',
       key: 'xhajcss',
       num: '35282个',
@@ -105,7 +112,8 @@ if (newLocation !== 'baotou' && newLocation !== 'xihaian') {
 // baotou
 else if (newLocation === 'baotou') {
   whoShow.itShowBaoTou = true
-    launchedDataNumObject.launchedDataNum = [{
+  launchedDataNumObject.launchedDataNum = [
+    {
       num: 10372,
     },
     {
@@ -132,7 +140,8 @@ else if (newLocation === 'baotou') {
       left: '包头市工业和信息化局大数据中心建设',
       right: '海信网络科技股份有限公司',
     },
-        address: [{
+    address: [
+      {
         name: '蒙ICP备05003330-1号',
         value: '政府标识码1502000040',
       },
@@ -153,32 +162,41 @@ else if (newLocation === 'xihaian') {
   infrastructure.deptName = '西海岸新区大数据发展'
   // infrastructure.deptId = '1067246875800000066'
   uavAndIndividualSoldier.num = 4
-    uavAndIndividualSoldier.uavList = [{
+  uavAndIndividualSoldier.uavList = [
+    {
       name: '经纬 M300 RTK-1',
       url: '',
-            details: [{
+      details: [
+        {
           name: '飞行器',
           attribute: {
             尺寸: '尺寸（展开，不包含桨叶）：810×670×430 mm（长×宽×高）；尺寸（折叠，包含桨叶）：430×420×430 mm（长×宽×高）',
             对称电机轴距: '895 mm',
-                        '重量（含下置单云台支架）:空机重量（不含电池）': '3.6 kg；空机重量（含双电池）：6.3 kg',
+            '重量（含下置单云台支架）:空机重量（不含电池）':
+              '3.6 kg；空机重量（含双电池）：6.3 kg',
             单云台减震球最大负重: '930g',
             最大起飞重量: '9 kg',
             工作频率: '2.4000-2.4835 GHz；5.725-5.850 GHz',
-                        '发射功率（EIRP）': '2.4000-2.4835 GHz：29.5 dBm（FCC）、18.5dBm（CE）、18.5 dBm（SRRC）、18.5dBm（MIC）；5.725-5.850 GHz：28.5 dBm（FCC）、12.5dBm（CE）、28.5 dBm（SRRC）',
-                        '悬停精度（P-GPS）': '垂直：±0.1 m（视觉定位正常工作时）、±0.5 m（GPS 正常工作时）、±0.1 m（RTK 定位正常工作时）；水平：±0.3 m（视觉定位正常工作时）、±1.5 m（GPS 正常工作时）、±0.1 m（RTK 定位正常工作时）',
-                        'RTK 位置精度': '在 RTK FIX 时：1 cm+1 ppm（水平）、1.5 cm + 1 ppm（垂直）',
+            '发射功率（EIRP）':
+              '2.4000-2.4835 GHz：29.5 dBm（FCC）、18.5dBm（CE）、18.5 dBm（SRRC）、18.5dBm（MIC）；5.725-5.850 GHz：28.5 dBm（FCC）、12.5dBm（CE）、28.5 dBm（SRRC）',
+            '悬停精度（P-GPS）':
+              '垂直：±0.1 m（视觉定位正常工作时）、±0.5 m（GPS 正常工作时）、±0.1 m（RTK 定位正常工作时）；水平：±0.3 m（视觉定位正常工作时）、±1.5 m（GPS 正常工作时）、±0.1 m（RTK 定位正常工作时）',
+            'RTK 位置精度':
+              '在 RTK FIX 时：1 cm+1 ppm（水平）、1.5 cm + 1 ppm（垂直）',
             最大旋转角速度: '俯仰轴：300°/s、航向轴：100°/s',
             最大俯仰角度: '30° （P模式且前视视觉系统启用：25°）',
             最大上升速度: 'S 模式：6 m/s、P 模式：5 m/s',
             '最大下降速度（垂直）': 'S 模式：5 m/s、P 模式：4 m/s',
             最大倾斜下降速度: 'S 模式：7 m/s',
             最大水平飞行速度: 'S 模式：23 m/s、P 模式：17 m/s',
-                        最大飞行海拔高度: '5000 m（2110 桨叶，起飞重量≤7 kg）/ 7000 m（2195 高原静音桨叶，起飞重量≤7 kg）',
+            最大飞行海拔高度:
+              '5000 m（2110 桨叶，起飞重量≤7 kg）/ 7000 m（2195 高原静音桨叶，起飞重量≤7 kg）',
             最大可承受风速: '15m/s（起飞及降落阶段为12m/s）',
             最大飞行时间: '55 min',
-                        '适配 DJI 云台': '禅思 XT2、禅思 XT S、禅思 Z30、禅思 H20、禅思 H20T、DJI P1、DJI L1',
-                        支持云台安装方式: '下置单云台、上置单云台、下置双云台、下置单云台+上置单云台、下置双云台+上置单云台',
+            '适配 DJI 云台':
+              '禅思 XT2、禅思 XT S、禅思 Z30、禅思 H20、禅思 H20T、DJI P1、DJI L1',
+            支持云台安装方式:
+              '下置单云台、上置单云台、下置双云台、下置单云台+上置单云台、下置双云台+上置单云台',
             'IP 防护等级': 'IP45',
             GNSS: 'GPS+GLONASS+BeiDou+Galileo',
             工作环境温度: '-20°C 至 50°C',
@@ -188,10 +206,14 @@ else if (newLocation === 'xihaian') {
           name: '遥控器',
           attribute: {
             工作频率: '2.4000-2.4835 GHz、5.725-5.850 GHz',
-                        '最大信号有效距离（无干扰、无遮挡）': 'NCC/FCC：15 km、CE/MIC：8 km、SRRC：8 km',
-                        '等效全向辐射功率（EIRP）': '2.4000-2.4835 GHz：29.5 dBm（FCC）；18.5dBm（CE）、18.5 dBm（SRRC）；18.5dBm（MIC）；5.725-5.850 GHz：28.5 dBm（FCC）；12.5dBm（CE）、20.5 dBm（SRRC）',
-                        外置电池: '名称：WB37 智能电池；容量：4920 mAh；电压：7.6 V；电池类型：LiPo；能量：37.39 Wh；充电时间（使用 BS60 智能电池箱）：70 分钟（15°C 至 45°C）；130 分钟（0°C 至 15°C）',
-                        内置电池: '类型：18650 锂离子电池 （5000 mAh @ 7.2 V）；充电方式：使用规格为 12V/2A 的 USB 充电器；额定功率：17 W；充电时间：2 小时 15 分钟（使用规格为12V/2A 的 USB 充电器）',
+            '最大信号有效距离（无干扰、无遮挡）':
+              'NCC/FCC：15 km、CE/MIC：8 km、SRRC：8 km',
+            '等效全向辐射功率（EIRP）':
+              '2.4000-2.4835 GHz：29.5 dBm（FCC）；18.5dBm（CE）、18.5 dBm（SRRC）；18.5dBm（MIC）；5.725-5.850 GHz：28.5 dBm（FCC）；12.5dBm（CE）、20.5 dBm（SRRC）',
+            外置电池:
+              '名称：WB37 智能电池；容量：4920 mAh；电压：7.6 V；电池类型：LiPo；能量：37.39 Wh；充电时间（使用 BS60 智能电池箱）：70 分钟（15°C 至 45°C）；130 分钟（0°C 至 15°C）',
+            内置电池:
+              '类型：18650 锂离子电池 （5000 mAh @ 7.2 V）；充电方式：使用规格为 12V/2A 的 USB 充电器；额定功率：17 W；充电时间：2 小时 15 分钟（使用规格为12V/2A 的 USB 充电器）',
             续航时间: '内置电池：约 2.5 小时内置电池+外置电池：约 4.5 小时',
             'USB-A 接口供电电压/电流': '5 V / 1.5 A',
             工作环境温度: '-20° 至 40° C',
@@ -202,7 +224,8 @@ else if (newLocation === 'xihaian') {
           attribute: {
             障碍物感知范围: '前后左右：0.7-40 m、上下：0.6-30 m',
             FOV: '前后下：65°（H），50°（V）、左右上：75°（H），60°（V）',
-                        使用环境: '表面有丰富纹理，光照条件充足（>15 lux，室内日光灯正常照射环境）',
+            使用环境:
+              '表面有丰富纹理，光照条件充足（>15 lux，室内日光灯正常照射环境）',
           },
         },
         {
@@ -238,8 +261,10 @@ else if (newLocation === 'xihaian') {
             电池整体重量: '约 1.35 kg',
             工作环境温度: '-20℃ 至 50℃',
             理想存放环境温度: '22℃ 至 30℃',
-                        充电环境温度: '-20°C 至 40°C（当环境温度低于 5°C时，电池会启动自加热功能，在低温环境下充电有可能会降低电池使用寿命）',
-                        充电时间: '使用 BS60 智能电池箱时，使用 220 V 电源：完全充满两块 TB60 智能飞行电池约需 60 分钟，从 20% 充到 90% 约需 30 分钟；使用 110 V 电源：完全充满两块 TB60 智能飞行电池约需 70 分钟，从 20% 充到 90% 约需 40 分钟',
+            充电环境温度:
+              '-20°C 至 40°C（当环境温度低于 5°C时，电池会启动自加热功能，在低温环境下充电有可能会降低电池使用寿命）',
+            充电时间:
+              '使用 BS60 智能电池箱时，使用 220 V 电源：完全充满两块 TB60 智能飞行电池约需 60 分钟，从 20% 充到 90% 约需 30 分钟；使用 110 V 电源：完全充满两块 TB60 智能飞行电池约需 70 分钟，从 20% 充到 90% 约需 40 分钟',
           },
         },
         {
@@ -259,29 +284,37 @@ else if (newLocation === 'xihaian') {
     {
       name: '经纬 M300 RTK-2',
       url: '',
-            details: [{
+      details: [
+        {
           name: '飞行器',
           attribute: {
             尺寸: '尺寸（展开，不包含桨叶）：810×670×430 mm（长×宽×高）；尺寸（折叠，包含桨叶）：430×420×430 mm（长×宽×高）',
             对称电机轴距: '895 mm',
-                        '重量（含下置单云台支架）:空机重量（不含电池）': '3.6 kg；空机重量（含双电池）：6.3 kg',
+            '重量（含下置单云台支架）:空机重量（不含电池）':
+              '3.6 kg；空机重量（含双电池）：6.3 kg',
             单云台减震球最大负重: '930g',
             最大起飞重量: '9 kg',
             工作频率: '2.4000-2.4835 GHz；5.725-5.850 GHz',
-                        '发射功率（EIRP）': '2.4000-2.4835 GHz：29.5 dBm（FCC）、18.5dBm（CE）、18.5 dBm（SRRC）、18.5dBm（MIC）；5.725-5.850 GHz：28.5 dBm（FCC）、12.5dBm（CE）、28.5 dBm（SRRC）',
-                        '悬停精度（P-GPS）': '垂直：±0.1 m（视觉定位正常工作时）、±0.5 m（GPS 正常工作时）、±0.1 m（RTK 定位正常工作时）；水平：±0.3 m（视觉定位正常工作时）、±1.5 m（GPS 正常工作时）、±0.1 m（RTK 定位正常工作时）',
-                        'RTK 位置精度': '在 RTK FIX 时：1 cm+1 ppm（水平）、1.5 cm + 1 ppm（垂直）',
+            '发射功率（EIRP）':
+              '2.4000-2.4835 GHz：29.5 dBm（FCC）、18.5dBm（CE）、18.5 dBm（SRRC）、18.5dBm（MIC）；5.725-5.850 GHz：28.5 dBm（FCC）、12.5dBm（CE）、28.5 dBm（SRRC）',
+            '悬停精度（P-GPS）':
+              '垂直：±0.1 m（视觉定位正常工作时）、±0.5 m（GPS 正常工作时）、±0.1 m（RTK 定位正常工作时）；水平：±0.3 m（视觉定位正常工作时）、±1.5 m（GPS 正常工作时）、±0.1 m（RTK 定位正常工作时）',
+            'RTK 位置精度':
+              '在 RTK FIX 时：1 cm+1 ppm（水平）、1.5 cm + 1 ppm（垂直）',
             最大旋转角速度: '俯仰轴：300°/s、航向轴：100°/s',
             最大俯仰角度: '30° （P模式且前视视觉系统启用：25°）',
             最大上升速度: 'S 模式：6 m/s、P 模式：5 m/s',
             '最大下降速度（垂直）': 'S 模式：5 m/s、P 模式：4 m/s',
             最大倾斜下降速度: 'S 模式：7 m/s',
             最大水平飞行速度: 'S 模式：23 m/s、P 模式：17 m/s',
-                        最大飞行海拔高度: '5000 m（2110 桨叶，起飞重量≤7 kg）/ 7000 m（2195 高原静音桨叶，起飞重量≤7 kg）',
+            最大飞行海拔高度:
+              '5000 m（2110 桨叶，起飞重量≤7 kg）/ 7000 m（2195 高原静音桨叶，起飞重量≤7 kg）',
             最大可承受风速: '15m/s（起飞及降落阶段为12m/s）',
             最大飞行时间: '55 min',
-                        '适配 DJI 云台': '禅思 XT2、禅思 XT S、禅思 Z30、禅思 H20、禅思 H20T、DJI P1、DJI L1',
-                        支持云台安装方式: '下置单云台、上置单云台、下置双云台、下置单云台+上置单云台、下置双云台+上置单云台',
+            '适配 DJI 云台':
+              '禅思 XT2、禅思 XT S、禅思 Z30、禅思 H20、禅思 H20T、DJI P1、DJI L1',
+            支持云台安装方式:
+              '下置单云台、上置单云台、下置双云台、下置单云台+上置单云台、下置双云台+上置单云台',
             'IP 防护等级': 'IP45',
             GNSS: 'GPS+GLONASS+BeiDou+Galileo',
             工作环境温度: '-20°C 至 50°C',
@@ -291,10 +324,14 @@ else if (newLocation === 'xihaian') {
           name: '遥控器',
           attribute: {
             工作频率: '2.4000-2.4835 GHz、5.725-5.850 GHz',
-                        '最大信号有效距离（无干扰、无遮挡）': 'NCC/FCC：15 km、CE/MIC：8 km、SRRC：8 km',
-                        '等效全向辐射功率（EIRP）': '2.4000-2.4835 GHz：29.5 dBm（FCC）；18.5dBm（CE）、18.5 dBm（SRRC）；18.5dBm（MIC）；5.725-5.850 GHz：28.5 dBm（FCC）；12.5dBm（CE）、20.5 dBm（SRRC）',
-                        外置电池: '名称：WB37 智能电池；容量：4920 mAh；电压：7.6 V；电池类型：LiPo；能量：37.39 Wh；充电时间（使用 BS60 智能电池箱）：70 分钟（15°C 至 45°C）；130 分钟（0°C 至 15°C）',
-                        内置电池: '类型：18650 锂离子电池 （5000 mAh @ 7.2 V）；充电方式：使用规格为 12V/2A 的 USB 充电器；额定功率：17 W；充电时间：2 小时 15 分钟（使用规格为12V/2A 的 USB 充电器）',
+            '最大信号有效距离（无干扰、无遮挡）':
+              'NCC/FCC：15 km、CE/MIC：8 km、SRRC：8 km',
+            '等效全向辐射功率（EIRP）':
+              '2.4000-2.4835 GHz：29.5 dBm（FCC）；18.5dBm（CE）、18.5 dBm（SRRC）；18.5dBm（MIC）；5.725-5.850 GHz：28.5 dBm（FCC）；12.5dBm（CE）、20.5 dBm（SRRC）',
+            外置电池:
+              '名称：WB37 智能电池；容量：4920 mAh；电压：7.6 V；电池类型：LiPo；能量：37.39 Wh；充电时间（使用 BS60 智能电池箱）：70 分钟（15°C 至 45°C）；130 分钟（0°C 至 15°C）',
+            内置电池:
+              '类型：18650 锂离子电池 （5000 mAh @ 7.2 V）；充电方式：使用规格为 12V/2A 的 USB 充电器；额定功率：17 W；充电时间：2 小时 15 分钟（使用规格为12V/2A 的 USB 充电器）',
             续航时间: '内置电池：约 2.5 小时内置电池+外置电池：约 4.5 小时',
             'USB-A 接口供电电压/电流': '5 V / 1.5 A',
             工作环境温度: '-20° 至 40° C',
@@ -305,7 +342,8 @@ else if (newLocation === 'xihaian') {
           attribute: {
             障碍物感知范围: '前后左右：0.7-40 m、上下：0.6-30 m',
             FOV: '前后下：65°（H），50°（V）、左右上：75°（H），60°（V）',
-                        使用环境: '表面有丰富纹理，光照条件充足（>15 lux，室内日光灯正常照射环境）',
+            使用环境:
+              '表面有丰富纹理，光照条件充足（>15 lux，室内日光灯正常照射环境）',
           },
         },
         {
@@ -341,8 +379,10 @@ else if (newLocation === 'xihaian') {
             电池整体重量: '约 1.35 kg',
             工作环境温度: '-20℃ 至 50℃',
             理想存放环境温度: '22℃ 至 30℃',
-                        充电环境温度: '-20°C 至 40°C（当环境温度低于 5°C时，电池会启动自加热功能，在低温环境下充电有可能会降低电池使用寿命）',
-                        充电时间: '使用 BS60 智能电池箱时，使用 220 V 电源：完全充满两块 TB60 智能飞行电池约需 60 分钟，从 20% 充到 90% 约需 30 分钟；使用 110 V 电源：完全充满两块 TB60 智能飞行电池约需 70 分钟，从 20% 充到 90% 约需 40 分钟',
+            充电环境温度:
+              '-20°C 至 40°C（当环境温度低于 5°C时，电池会启动自加热功能，在低温环境下充电有可能会降低电池使用寿命）',
+            充电时间:
+              '使用 BS60 智能电池箱时，使用 220 V 电源：完全充满两块 TB60 智能飞行电池约需 60 分钟，从 20% 充到 90% 约需 30 分钟；使用 110 V 电源：完全充满两块 TB60 智能飞行电池约需 70 分钟，从 20% 充到 90% 约需 40 分钟',
           },
         },
         {
@@ -360,7 +400,8 @@ else if (newLocation === 'xihaian') {
       ],
     },
   ]
-    uavAndIndividualSoldier.individualSoldier = [{
+  uavAndIndividualSoldier.individualSoldier = [
+    {
       name: 'T950天通-1',
       type: '单兵设备',
       details: {
@@ -370,9 +411,11 @@ else if (newLocation === 'xihaian') {
           CPU: '展锐 Makalu T7510;虎贲T710+春藤IVY510',
           存储: '标配:6GB ROM +128G RAM',
           显示屏: '6.52吋水滴屏;HD+，1600*720(20:9)',
-                    后置摄像头: '后置为4800万主摄+200万微距+200万红外三摄组合，支持闪光灯',
+          后置摄像头:
+            '后置为4800万主摄+200万微距+200万红外三摄组合，支持闪光灯',
           前置摄像头: '1600万',
-                    传感器相关: '指纹|光线传感器|距离传感器|加速度传感器|地磁传感器|陀螺仪|气压传感器',
+          传感器相关:
+            '指纹|光线传感器|距离传感器|加速度传感器|地磁传感器|陀螺仪|气压传感器',
           WLAN: '802.11a/b/g/n/AC 支持MIMO',
           电池: '6000mAh@3.8V，内置不可拆卸，支持18W快充',
           工作时间: '待机时长180h，卫星通话时长16h',
@@ -414,9 +457,11 @@ else if (newLocation === 'xihaian') {
           CPU: '展锐 Makalu T7510;虎贲T710+春藤IVY510',
           存储: '标配:6GB ROM +128G RAM',
           显示屏: '6.52吋水滴屏;HD+，1600*720(20:9)',
-                    后置摄像头: '后置为4800万主摄+200万微距+200万红外三摄组合，支持闪光灯',
+          后置摄像头:
+            '后置为4800万主摄+200万微距+200万红外三摄组合，支持闪光灯',
           前置摄像头: '1600万',
-                    传感器相关: '指纹|光线传感器|距离传感器|加速度传感器|地磁传感器|陀螺仪|气压传感器',
+          传感器相关:
+            '指纹|光线传感器|距离传感器|加速度传感器|地磁传感器|陀螺仪|气压传感器',
           WLAN: '802.11a/b/g/n/AC 支持MIMO',
           电池: '6000mAh@3.8V，内置不可拆卸，支持18W快充',
           工作时间: '待机时长180h，卫星通话时长16h',
@@ -467,7 +512,8 @@ else if (newLocation === 'xihaian') {
       // eslint-disable-next-line no-undef
       right: CONFIGITEM.vNum,
     },
-        address: [{
+    address: [
+      {
         name: '鲁IC备00000000号',
         value: '政府标识码3702000106',
       },

front/src/router/index.js

@@ -425,6 +425,16 @@ export const constantRoutes = [
       icon: 'error-warning-line',
     },
   },
+    // 资金报表
+    {
+      path: '/assertReport',
+      name: 'assertReport',
+      component: () => import('@/views/assertReport'),
+      meta: {
+        title: '能力云图',
+        icon: 'error-warning-line',
+      },
+    },
   // 赋能案例详情
   {
     path: '/AssignCaseDetailPage',

front/src/supermap/map-showResource.js

@@ -66,15 +66,6 @@ function createMarkerClusterLayer(layerClassName, mapObj) {
     } else {
         // 使用默认图标
         markerClusterLayer = L.markerClusterGroup({
-            // iconCreateFunction(cluster) {
-            //     const markers = cluster.getAllChildMarkers()
-            //     let n = 0
-            //     for (let i = 0; i < markers.length; i++) {
-            //         n += markers[i].number
-            //     }
-            //     return L.divIcon({ html: markers.length, className: "topic-marker-cluster-video" })
-            // },
-            // 是否允许指定 PolylineOptions 样式 spider
             spiderfyOnMaxZoom: false,
             // 是否显示标记的边界
             showCoverageOnHover: true,

front/src/utils/request.js

@@ -92,9 +92,9 @@ instance.interceptors.request.use(
  */
 instance.interceptors.response.use(
   (response) => {
-    console.log('接口返回', response)
-    console.log('接口返回headers', response.headers)
-    console.log('接口返回REDIRECT', response.headers.redirect)
+    // console.log('接口返回', response)
+    // console.log('接口返回headers', response.headers)
+    // console.log('接口返回REDIRECT', response.headers.redirect)
     response['Access-Control-Expose-Headers'] = 'redirect'
     const { code, message } = response.data
 
@@ -154,14 +154,14 @@ instance.interceptors.response.use(
     // }
   },
   (error) => {
-    console.log('接口error', error)
+    // console.log('接口error', error)
     if (loadingInstance) loadingInstance.close()
 
     const { response, myMessage } = error
     if (error.response) {
-      console.log('接口返回', response)
-      console.log('接口返回headers', response.headers)
-      console.log('接口返回REDIRECT', response.headers.redirect)
+      // console.log('接口返回', response)
+      // console.log('接口返回headers', response.headers)
+      // console.log('接口返回REDIRECT', response.headers.redirect)
       const { status, data } = response
 
       handleCode(status, data.msg || myMessage, response.headers.redirect)

front/src/views/assertReport/components/ReservoirLeft.vue

@@ -0,0 +1,426 @@
+
+<template>
+  <div class="reservoir-survey">
+
+    <!-- 最上面 组件资源 -->
+    <div class="platform-overview-top">
+    <div class="top"><span class="title">组件资源</span></div>
+    <div class="bottom">
+      <div class="jiesheng"> <img src="../image/xing1.png" /><span style="padding-left:2px;">共节省XX万元 </span><img src="../image/xing1.png" /></div>
+      <div class="left">
+        <div class="item">
+          <div class="content1">
+          <div class="img"> </div>
+            <div class="num">智能算法</div> 
+        </div>
+          <div class="content">
+            <div class="name">节省</div>
+            <div claSS="num">123万元</div>
+          </div>
+          <div class="content">
+            <div class="name">数量</div>
+            <div claSS="num">123个</div>
+          </div>
+          <div class="content">
+            <div class="name">共申请</div>
+            <div claSS="num">123次</div>
+          </div>
+        </div>
+        <div class="item">
+          <div class="content1">
+          <div class="img"> </div>
+            <div class="num">图层服务</div> 
+        </div>
+          <div class="content">
+            <div class="name">节省</div>
+            <div claSS="num">123万元</div>
+          </div>
+          <div class="content">
+            <div class="name">数量</div>
+            <div claSS="num">123个</div>
+          </div>
+          <div class="content">
+            <div class="name">共申请</div>
+            <div claSS="num">123次</div>
+          </div>
+        </div>
+        <div class="item">
+          <div class="content1">
+          <div class="img"> </div>
+            <div class="num">开发组件</div> 
+        </div>
+          <div class="content">
+            <div class="name">节省</div>
+            <div claSS="num">123万元</div>
+          </div>
+          <div class="content">
+            <div class="name">数量</div>
+            <div claSS="num">123个</div>
+          </div>
+          <div class="content">
+            <div class="name">共申请</div>
+            <div claSS="num">123次</div>
+          </div>
+        </div>
+        <div class="item">
+          <div class="content1">
+          <div class="img"> </div>
+            <div class="num">业务组件</div> 
+        </div>
+          <div class="content">
+            <div class="name">节省</div>
+            <div claSS="num">123万元</div>
+          </div>
+          <div class="content">
+            <div class="name">数量</div>
+            <div claSS="num">123个</div>
+          </div>
+          <div class="content">
+            <div class="name">共申请</div>
+            <div claSS="num">123次</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+
+    <!-- 中间 应用资源-->
+    <div class="platform-overview-mid">
+    <div class="top"><span class="title">应用资源</span></div>
+    <div class="bottom">
+    <div class="jiesheng"> <img src="../image/xing1.png" /><span style="padding-left:2px;">共节省XX万元 </span><img src="../image/xing1.png" /></div>
+    <div class="component-services-content-right-right-bottom-right">
+              <div>
+                <span>排行</span>
+                <span>资源名称</span>
+                <span >提供部门</span>
+                <span >次数</span>
+                <span >贡献金额</span>
+              </div>
+              <div v-for="(item, index) in dataList" :key="index">
+                <span>{{ index + 1 }}</span>
+                <a-tooltip>
+                  <template #title>{{ item.name }}</template>
+                  <span>{{ item.name }}</span>
+                </a-tooltip>
+                <span>{{ item.count || 0 }}</span>
+                <span>{{ item.count || 0 }}</span>
+                <span>{{ item.count || 0 }}</span>
+              </div>
+            </div>
+    </div>
+  </div>
+
+    <!-- 最下方 基础设施 -->
+    <div class="platform-overview-bottom">
+    <div class="top"><span class="title">基础设施</span></div>
+    <div class="bottom">
+      <div class="jiesheng"> <img src="../image/xing1.png" /><span style="padding-left:2px;">共节省XX万元 </span><img src="../image/xing1.png" /></div>
+    <div class="huiketing">
+      <div style="float:left;width:30%">
+      <img :src="leftImg" alt="" /> 
+    </div>
+    <div style="float:left;width:70%;margin-top: 30px;">
+      <span style="font-size:22x">会客厅</span> 
+      <span style="font-size:22px">节省 </span>
+      <span style="margin-right:10px;font-size:24px;  color: #1ef6f5;"> 453</span>
+        <span style="font-size:20px"> 万元</span>
+      </div>
+    </div>
+    </div>
+    
+    </div>
+
+
+  </div>
+</template>
+
+<script>
+//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
+//例如：import 《组件名称》 from '《组件路径》';
+
+import ResourceOverviewAnimation from "@/views/assertReport/components/ResourceOverviewAnimation.vue";
+export default {
+  //import引入的组件需要注入到对象中才能使用
+  components: {
+    ResourceOverviewAnimation
+  },
+  created() {
+   
+  },
+
+  mounted() {
+
+  },
+  data() {
+
+    return {
+      leftImg:require('@/assets/capabilityCloud/resources-left.png'),
+      dataList:[{name:'第一个',count:43},{name:'第二个',count:43},
+      {name:'第三个',count:43},{name:'第四个',count:43},{name:'第五个',count:43}]
+
+    };
+  },
+
+  methods: {
+ 
+
+  },
+
+ 
+};
+</script>
+<style lang='less' scoped>
+
+@keyframes topup50 {
+  from {
+    top: 50%;
+  }
+  to {
+    top: -100%;
+  }
+}
+.jiesheng{
+       text-align: center;
+    margin-bottom: 5px;
+    color: #f4fcfe; border-color: #107bb0;
+      box-shadow: 1px 1px 5px 1px RGB(16, 123, 176, 0.8) inset
+      }
+.reservoir-survey {
+
+
+  width: 520px;
+  height: 100%;
+  color: #f0fafa;
+  font-size: 18px;
+  display: flex;
+  flex-direction: column;
+
+ 
+.platform-overview-top {
+   width: 100%;
+    height: 3.8rem;
+    background: rgba(0, 108, 188, 0.2);
+    border-radius: 2px;
+    border: 1px solid rgba(0, 108, 188, 0.7);
+    text-decoration: none;
+    outline: none;
+    -webkit-transition: all 100ms ease-out;
+    -moz-transition: all 100ms ease-out;
+    transition: all 100ms ease-out;
+    .top {
+      font-size: 24px;
+      background: url(~@/assets/capabilityCloud/top_bg.png) no-repeat;
+      background-size: 100% 100%;
+      text-align: center;
+    }
+    .bottom {
+    
+   
+      padding: 0.1rem;
+      .left {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        .item {
+          width: 100%;
+          height: 0.6rem;
+          background: linear-gradient(
+            to bottom,
+            rgba(33, 54, 88, 0.5),
+            rgba(33, 54, 88, 0)
+          );
+          margin-top: 0.14rem;
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          .content1 {
+            width: 1.8rem;
+            .img {
+            width: 0.36rem;
+            height: 0.36rem;
+            margin-left: 0.2rem;
+            margin-right: 0.2rem;
+            text-decoration: none;
+            outline: none;
+            -webkit-transition: all 800ms ease-out;
+            -moz-transition: all 800ms ease-out;
+            transition: all 800ms ease-out;
+          }
+          .img:hover {
+            width: 0.4rem;
+            height: 0.4rem;
+            -webkit-transform: rotateY(180deg);
+            -moz-transform: rotateY(180deg);
+            transform: rotateY(180deg);
+            -webkit-transition-delay: 0.2s;
+            -moz-transition-delay: 0.2s;
+            transition-delay: 0.2s;
+          }
+            .num {
+              font-size: 18px;
+              color: #1ef6f5;
+              margin-left: 10px;
+            }
+          }
+        
+          .content {
+            width: 1.5rem;
+            .name {
+              font-size: 14px;
+              color: #fff;
+            }
+            .num {
+              font-size: 18px;
+              color: #1ef6f5;
+            }
+          }
+        }
+        .item:nth-of-type(1) {
+          margin-top: 10px;
+          .img {
+            background: url('~@/assets/capabilityCloud/zyys.png') no-repeat;
+            background-size: 100% 100%;
+          }
+        }
+        .item:nth-of-type(2) .img {
+          background: url('~@/assets/capabilityCloud/jszyys.png') no-repeat;
+          background-size: 100% 100%;
+        }
+        .item:nth-of-type(3) .img {
+          background: url('~@/assets/capabilityCloud/tyyys.png') no-repeat;
+          background-size: 100% 100%;
+        }
+        .item:nth-of-type(4) .img {
+          background: url('~@/assets/capabilityCloud/jszyys.png') no-repeat;
+          background-size: 100% 100%;
+        }
+      }
+    }
+  }
+  .platform-overview-mid {
+    margin-top:20px;
+    width: 100%;
+    height: 2.8rem;
+    background: rgba(0, 108, 188, 0.2);
+    border-radius: 2px;
+    border: 1px solid rgba(0, 108, 188, 0.7);
+    text-decoration: none;
+    outline: none;
+    -webkit-transition: all 100ms ease-out;
+    -moz-transition: all 100ms ease-out;
+    transition: all 100ms ease-out;
+    .top {
+      font-size: 24px;
+      background: url(~@/assets/capabilityCloud/top_bg.png) no-repeat;
+      background-size: 100% 100%;
+      text-align: center;
+      margin-bottom: 8px;
+    }
+    .bottom {
+      
+      
+      align-items: center;
+      padding: 0rem  0.1rem;
+      .component-services-content-right-right-bottom-right {
+              width: 100%;
+              font-size: 0.16rem;
+              border: 0.01rem rgba(0, 108, 188, 0.7) solid;
+              color: rgba(255, 255, 255, 0.8);
+              & > div {
+                height: 0.32rem;
+                & > span {
+                  display: inline-block;
+                  height: 0.32rem;
+                  line-height: 0.32rem;
+                  border-right: 0.01rem rgba(0, 108, 188, 0.7) solid;
+                  border-bottom: 0.01rem rgba(0, 108, 188, 0.7) solid;
+                  overflow: hidden;
+                  text-overflow: ellipsis;
+                  white-space: nowrap;
+                  -webkit-line-clamp: 1;
+                  -webkit-box-orient: vertical;
+                  word-break: break-all;
+                }
+                & > span:first-child {
+                  width: 0.47rem;
+                  text-align: center;
+                }
+                & > span:nth-child(2) {
+                  width: 1.47rem;
+                  padding-left: 0.05rem;
+                }
+                & > span:nth-child(3) {
+                  width: 0.8rem;
+                  padding-left: 0.05rem;
+                }
+                & > span:nth-child(4) {
+                  width: 1rem;
+                  padding-left: 0.05rem;
+                }
+                & > span:last-child {
+                  width: 0.8rem;
+                  color: #1ffefd;
+                  text-align: center;
+                  border-right: 0;
+                }
+              }
+              & > div:first-child {
+                color: #1ffefd;
+                background: #27528c;
+              }
+            }
+    }
+  }
+
+  .platform-overview-bottom {
+    margin-top:20px;
+    width: 100%;
+    height: 1.8rem;
+    background: rgba(0, 108, 188, 0.2);
+    border-radius: 2px;
+    border: 1px solid rgba(0, 108, 188, 0.7);
+    text-decoration: none;
+    outline: none;
+    -webkit-transition: all 100ms ease-out;
+    -moz-transition: all 100ms ease-out;
+    transition: all 100ms ease-out;
+    .top {
+      font-size: 24px;
+      background: url(~@/assets/capabilityCloud/top_bg.png) no-repeat;
+      background-size: 100% 100%;
+      text-align: center;
+    }
+    .bottom {
+     
+      align-items: center;
+      padding: 0.1rem;
+      .huiketing{
+        display: flex;
+    
+        img {
+          width: 90px;
+          width: 90px;
+          position: absolute;
+          // left: 50%;
+          // bottom: -1.38rem;
+          // margin-left: -45%;
+          animation: move 5s linear 0s infinite;
+          @keyframes move {
+            from {
+              transform: rotateY(360deg);
+            }
+            to {
+              transform: rotateY(0deg);
+            }
+          }
+        }
+
+      }
+   
+    }
+  }
+}
+
+</style>

front/src/views/assertReport/components/ReservoirRight.vue

@@ -0,0 +1,356 @@
+
+<template>
+  <div class="right-survey">
+    <!--最上面 部门排行榜-->
+    <div class="platform-overview-top">
+      <div class="top"><span class="title">部门排行榜</span></div>
+      <div class="bottom">
+        <div class="bottom-item">
+          <div class="inner-title">
+            <p style="width: 220px">市级部门共享贡献资金排行</p>
+          </div>
+          <div class="left-list">
+            <div class="left-list1">排行</div>
+            <div class="left-list2">部门名称</div>
+            <div class="left-list1">提供资源</div>
+            <div class="left-list1">贡献总量</div>
+          </div>
+          <div class="left-list" v-for="item in top5AreaList">
+            <div class="left-list1" v-if="item.img">
+              <img :src="item.img" />
+            </div>
+            <div class="left-list1" v-else>{{ item.name }}</div>
+            <div
+              :class="selectArea === item.areaId ? 'active-item' : 'left-list2'"
+              @click="chooseSelectArea(item)"
+            >
+              {{ item.areaName }}
+            </div>
+            <div class="left-list1">{{ item.num }}</div>
+            <div class="left-list1">{{ item.num }}</div>
+          </div>
+        </div>
+        <div class="bottom-item">
+          <div class="inner-title">
+            <p style="width: 220px">市级部门审评节省资金排行</p>
+          </div>
+          <div class="left-list">
+            <div class="left-list1">排行</div>
+            <div class="left-list2">部门名称</div>
+            <div class="left-list1">提供资源</div>
+            <div class="left-list1">贡献总量</div>
+          </div>
+          <div class="left-list" v-for="item in top5AreaList">
+            <div class="left-list1" v-if="item.img">
+              <img :src="item.img" />
+            </div>
+            <div class="left-list1" v-else>{{ item.name }}</div>
+            <div
+              :class="selectArea === item.areaId ? 'active-item' : 'left-list2'"
+              @click="chooseSelectArea(item)"
+            >
+              {{ item.areaName }}
+            </div>
+            <div class="left-list1">{{ item.num }}</div>
+            <div class="left-list1">{{ item.num }}</div>
+          </div>
+        </div>
+      </div>
+      <div class="bottom">
+        <div class="bottom-item">
+          <div class="inner-title">
+            <p style="width: 220px">区市部门共享贡献资金排行</p>
+          </div>
+          <div class="left-list">
+            <div class="left-list1">排行</div>
+            <div class="left-list2">部门名称</div>
+            <div class="left-list1">提供资源</div>
+            <div class="left-list1">贡献总量</div>
+          </div>
+          <div class="left-list" v-for="item in top5AreaList">
+            <div class="left-list1" v-if="item.img">
+              <img :src="item.img" />
+            </div>
+            <div class="left-list1" v-else>{{ item.name }}</div>
+            <div
+              :class="selectArea === item.areaId ? 'active-item' : 'left-list2'"
+              @click="chooseSelectArea(item)"
+            >
+              {{ item.areaName }}
+            </div>
+            <div class="left-list1">{{ item.num }}</div>
+            <div class="left-list1">{{ item.num }}</div>
+          </div>
+        </div>
+        <div class="bottom-item">
+          <div class="inner-title">
+            <p style="width: 220px">区市部门申请节省资金排行</p>
+          </div>
+          <div class="left-list">
+            <div class="left-list1">排行</div>
+            <div class="left-list2">部门名称</div>
+            <div class="left-list1">提供资源</div>
+            <div class="left-list1">贡献总量</div>
+          </div>
+          <div class="left-list" v-for="item in top5AreaList">
+            <div class="left-list1" v-if="item.img">
+              <img :src="item.img" />
+            </div>
+            <div class="left-list1" v-else>{{ item.name }}</div>
+            <div
+              :class="selectArea === item.areaId ? 'active-item' : 'left-list2'"
+              @click="chooseSelectArea(item)"
+            >
+              {{ item.areaName }}
+            </div>
+            <div class="left-list1">{{ item.num }}</div>
+            <div class="left-list1">{{ item.num }}</div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="platform-overview-bottom">
+      <div class="top"><span class="title">资源汇聚总量</span></div>
+      <div class="bottom">
+        <div
+          v-for="(item, index) in servicesSnum"
+          :key="index"
+          class="component-services-content-right-left-content-son"
+        >
+          <p>{{ item.type }}</p>
+          <p class="num">{{ item.amount }}</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  //import引入的组件需要注入到对象中才能使用
+  components: {},
+  created() {},
+  destroyed() {},
+
+  mounted() {},
+  data() {
+    //这里存放数据
+    return {
+      top5AreaList: [
+        {
+          title: 'TOP1',
+          img: require('../image/one.png'),
+          areaName: '台东商圈',
+          areaId: '1',
+          num: '12',
+        },
+        {
+          title: 'TOP2',
+          img: require('../image/two.png'),
+          areaName: '李村商圈',
+          areaId: '2',
+          num: '8',
+        },
+        {
+          title: 'TOP3',
+          img: require('../image/three.png'),
+          areaName: '五四广场',
+          areaId: '3',
+          num: '7',
+        },
+        {
+          title: '4',
+          img: require('../image/four.png'),
+          areaName: '第一海水浴场',
+          areaId: '4',
+          num: '5',
+        },
+        {
+          title: '5',
+          img: require('../image/five.png'),
+          areaName: '石老人海水浴场',
+          areaId: '5',
+          num: '4',
+        },
+      ],
+      servicesSnum: [
+        { type: '组件服务', amount: 124 },
+        { type: '应用资源', amount: 34244 },
+        { type: '基础设施', amount: 125555 },
+        { type: '数据资源', amount: 5555 },
+      ],
+    }
+  },
+
+  methods: {},
+}
+</script>
+<style lang='less' scoped>
+.top5-content::-webkit-scrollbar {
+  width: 6px;
+  /*height: 4px;*/
+}
+
+.top5-content::-webkit-scrollbar-thumb {
+  background-color: #00deff;
+}
+.map-search-result::-webkit-scrollbar-track,
+.top5-content::-webkit-scrollbar-track {
+  background-color: #424748;
+}
+@keyframes topup50 {
+  from {
+    top: 50%;
+  }
+  to {
+    top: -100%;
+  }
+}
+.right-survey {
+  width: 620px;
+  height: 100%;
+  color: #f0fafa;
+  font-size: 18px;
+  display: flex;
+  flex-direction: column;
+
+  .platform-overview-top {
+    width: 100%;
+    height: 6.8rem;
+    background: rgba(0, 108, 188, 0.2);
+    border-radius: 2px;
+    border: 1px solid rgba(0, 108, 188, 0.7);
+    text-decoration: none;
+    outline: none;
+    -webkit-transition: all 100ms ease-out;
+    -moz-transition: all 100ms ease-out;
+    transition: all 100ms ease-out;
+    .top {
+      font-size: 24px;
+      background: url(~@/assets/capabilityCloud/top_bg.png) no-repeat;
+      background-size: 100% 100%;
+      text-align: center;
+    }
+    .bottom {
+      margin-top: 4px;
+      // margin-top:10px;
+      width: 100%;
+      display: table;
+      justify-content: space-between;
+      align-items: center;
+      :hover.bottom-item{
+        background: rgba(0, 108, 188, 0.5);
+      }
+      .bottom-item {
+        background: rgba(0, 108, 188, 0.4);
+    border-radius: 3px;
+        margin: 4px 5px;
+        .inner-title {
+          margin-top: 10px;
+          margin-bottom: 10px;
+          margin-right: 5px;
+         
+          font-weight: bold;
+          color: #ffffff;
+          p {
+            font-size: 16px;
+            line-height: 27px;
+            background: linear-gradient(
+              90deg,
+              #041d2f 0,
+              rgba(8, 115, 193, 0)  90%
+            );
+            color: #1ffefd;
+            width: auto;
+            padding-left: 5px;
+          }
+        }
+   
+        display: inline-table;
+        width: 48%;
+        height: 3rem;
+        .left-list {
+          text-align: center;
+          color: #fff;
+          width: 100%;
+          height: 24px;
+          margin-right: 10px;
+          margin-top: 5px;
+          font-size: 14px;
+          .left-list1 {
+            font-size: 14x;
+            float: left;
+            width: 20%;
+          }
+          .left-list2 {
+            cursor: pointer;
+            font-size: 14px;
+            float: left;
+            width: 40%;
+            &:hover {
+              color: rgb(0 255 255);
+            }
+          }
+          .active-item {
+            cursor: pointer;
+            font-size: 14px;
+            float: left;
+            width: 40%;
+            color: rgb(0 255 255);
+            font-weight: bold;
+            text-decoration: underline;
+          }
+        }
+      }
+    }
+  }
+  .platform-overview-bottom {
+    margin-top: 20px;
+    width: 100%;
+    height: 1.8rem;
+    background: rgba(0, 108, 188, 0.2);
+    border-radius: 2px;
+    border: 1px solid rgba(0, 108, 188, 0.7);
+    text-decoration: none;
+    outline: none;
+    -webkit-transition: all 100ms ease-out;
+    -moz-transition: all 100ms ease-out;
+    transition: all 100ms ease-out;
+    .top {
+      font-size: 24px;
+      background: url(~@/assets/capabilityCloud/top_bg.png) no-repeat;
+      background-size: 100% 100%;
+      text-align: center;
+      margin-bottom: 20px;
+    }
+    .bottom {
+      margin-top: 20px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 0.2rem;
+      .component-services-content-right-left-content-son {
+        background: url('~@/assets/capabilityCloud/Component_services_snum.png')
+          no-repeat;
+        background-size: 1.1rem 0.59rem;
+        background-position: center;
+        text-align: center;
+        & > p:first-child {
+          color: #ffffff;
+          font-size: 0.16rem;
+          line-height: 0.16rem;
+          margin-bottom: 0.12rem;
+        }
+        & > p:last-child {
+          color: #1ef6f5;
+          font-size: 0.28rem;
+          line-height: 0.28rem;
+          padding-bottom: 0.24rem;
+          margin: 0;
+        }
+      }
+    }
+  }
+}
+</style>

front/src/views/assertReport/components/ReservoirThumbnail.vue

@@ -0,0 +1,548 @@
+<!--
+* @Author: hisense.xiaoshangqing
+* @Date: 2022-7-26 10:00:48
+* @LastEditors: xiaoshangqing
+* @LastEditTime: 2022-07-27 16:56:55
+* @Description: 水库专题首页缩略图 -->
+<template>
+  <div class="river-course-view">
+    <div ref="qdCityMap" class="city-map-content-echarts"></div>
+    <div class="topic-animation1 display-animation1"></div>
+    <div class="topic-animation2 display-animation2"></div>
+    <div class="topic-animation3 display-animation3"></div>
+    <div class="topic-animation4 display-animation4"></div>
+    <div class="topic-animation5 display-animation5"></div>
+    <div class="topic-animation6 display-animation6"></div>
+
+
+  </div>
+</template>
+
+<script>
+//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
+//例如：import 《组件名称》 from '《组件路径》';
+import axios from 'axios'
+const echarts = require("echarts");
+export default {
+//import引入的组件需要注入到对象中才能使用
+  components: {},
+  data() {
+//这里存放数据
+    return {
+
+      districtData: [
+        {
+          name: "市南区",
+          value: [120.395966, 36.070892],
+          num:232,
+        },
+        {
+          name: "市北区",
+          value: [120.355026, 36.083819],
+          num:232,
+        },
+        {
+          name: "李沧区",
+          value: [120.421236, 36.160023],
+          num:232,
+        },
+        {
+          name: "崂山区",
+          value: [120.467393, 36.102569],
+          num:232,
+        },
+        {
+          name: "城阳区",
+          value: [120.389135, 36.306833],
+          num:232,
+        },
+        {
+          name: "即墨区",
+          value: [120.447352, 36.390847],
+          num:232,
+        },
+        {
+          name: "莱西市",
+          value: [120.526226, 36.86509],
+          num:232,
+        },
+        {
+          name: "胶州市",
+          value: [120.006202, 36.285878],
+          num:232,
+        },
+        {
+          name: "平度市",
+          value: [119.959012, 36.788828],
+          num:232,
+        },
+        {
+          name: "西海岸",
+          value: [119.995518, 35.875138],
+          num:232,
+        },
+      ],//青岛市区划坐标数据
+      reservoirTypeArr:[
+        {
+          id: 1,
+          type: "warning",
+          name: "超汛限",
+        },
+        {
+          id: 2,
+          type: "normal",
+          name: "正常",
+        }
+      ],
+      // 1、菜单切换功能
+      tabs: [
+        { name: "降雨量图" },
+        { name: "人口热力图" },
+        { name: "水库等级图" },
+        { name: "水库告警分布" },
+      ],
+      selectedTabIndex: 3,
+    };
+  },
+//监听属性 类似于data概念
+  computed: {},
+//监控data中的数据变化
+  watch: {},
+//生命周期 - 创建完成（可以访问当前this实例）
+  created() {},
+//生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {
+    this.findAllInfo();
+  // this.initMap();
+  },
+//方法集合
+  methods: {
+    findAllInfo(){
+   let data=this.districtData
+  //  let result=[]
+  //  for(let i=0;i<data.length;i++){
+  //           let value=[]
+  //           let d=res.data.data[i]
+  //           value.push(d["longitude"])
+  //           value.push(d["latitude"])
+  //           d["value"]=value
+  //         }
+   this.initMap(data)
+     
+},
+    initMap(data) {
+      this.loadedDataUrl = "./static/qingdao.json";
+       let _this=this
+      axios.get(_this.loadedDataUrl, {}) .then(geoJson =>{
+
+        _this.myChart = echarts.init(_this.$refs.qdCityMap);
+        echarts.registerMap("qingdao", geoJson.data);
+        const imgBack = new Image();
+        imgBack.src = "./static/assets/map-back.png";
+        const img = new Image();
+        img.src = "./static/assets/echarts-map-bak.png";
+        const typeImg = new Image();
+        typeImg.src = "./static/assets/reservoir-type-bak.png";
+
+        _this.option = {
+          visualMap: {
+            show: false,
+            max: 100,
+            seriesIndex: 1,
+            inRange: {
+              color: ["#000000", "yellow", "pink"],
+            },
+          },
+          geo: [
+            {
+              map: "qingdao",
+              roam: true, // 是否允许缩放
+              aspectScale: 0.8,
+              zoom: 1.1, // 默认显示级别
+              top: 100,
+              z: 6,
+              label: {
+                show: true, //是否显示市
+                textStyle: {
+                  color: "#ffffff", //文字颜色
+                  fontSize: 16, //文字大小
+                  fontFamily: "微软雅黑",
+                  backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                },
+              },
+              itemStyle: {
+                borderColor: "#25e8ff",
+                borderWidth: 2,
+                /* areaColor: "#004d8e", //rgba设置透明度0
+                  shadowColor: "#10daff",
+                shadowBlur: 10,
+                shadowOffsetX: 10,
+                opacity: 0.53, */
+                areaColor: {
+                  image: img,
+                  repeat: "repeat",
+                },
+              },
+              emphasis: {
+                disabled: false,
+                focus: "none",
+                itemStyle: {
+                  color: null,
+                },
+                label: {
+                  show: true,
+                  //color: "#fff",
+                },
+              },
+            },
+            {
+              map: "qingdao",
+              aspectScale: 0.8,
+              roam: true, // 是否允许缩放
+              zoom: 1.1, // 默认显示级别
+              top: 105,
+              z: 4,
+              itemStyle: {
+                areaColor: "#1864a5",
+                borderColor: "transparent",
+              },
+              silent: true,
+              tooltip: {
+                show: false,
+              },
+            },
+            {
+              map: "qingdao",
+              aspectScale: 0.8,
+              roam: true, // 是否允许缩放
+              zoom: 1.1, // 默认显示级别
+              top: 110,
+              z: 3,
+              itemStyle: {
+                areaColor: "#1864a5",
+                borderColor: "transparent",
+                borderWidth: 2,
+              },
+              silent: true,
+              tooltip: {
+                show: false,
+              },
+            },
+            {
+              map: "qingdao",
+              aspectScale: 0.8,
+              roam: true, // 是否允许缩放
+              zoom: 1.1, // 默认显示级别
+              top: 115,
+              z: 2,
+              itemStyle: {
+                areaColor: "#1864a5",
+                //borderColor: "#0f3866",
+                borderColor: "transparent",
+                borderWidth: 1,
+                shadowColor: "#808080", // 外部阴影
+                shadowBlur: "10",
+              },
+              silent: true,
+              tooltip: {
+                show: false,
+              },
+            },
+          ],
+          series: [
+            // {
+            //   tooltip: {
+            //     show: false,
+            //   },
+            //   type: "effectScatter",
+            //   coordinateSystem: "geo",
+            //   rippleEffect: {
+            //     scale: 3,
+            //     brushType: "stroke",
+            //   },
+            //   showEffectOn: "render",
+            //   itemStyle: {
+            //     normal: {
+            //       shadowColor: "#ffffff",
+            //       shadowBlur: 10,
+            //       shadowOffsetX: 0,
+            //       shadowOffsetY: 0,
+            //       color: "#df1818",
+            //     },
+            //   },
+            //   label: {
+            //     normal: {
+            //       color: "#fff",
+            //     },
+            //   },
+            //   symbol: "circle",
+            //   symbolSize: [10, 5],
+            //   data:data,  //地标闪烁小圆点
+            //   zlevel: 1,
+            // },
+            // {
+            //   type: "scatter",
+            //   coordinateSystem: "geo",
+            //   symbol: function (value, params) {
+            //     return    'image://static/assets/warning-reservoir.png';
+            //   },
+            //   symbolSize: [25, 35],
+            //   symbolOffset: [0, -20],
+            //   z: 9999,
+            //   data:data, //企业图片
+            // },
+            {
+              type: 'scatter',
+              coordinateSystem: 'geo',
+              label: {
+                normal: {
+                  show: true,
+                  formatter: function (params) {
+                    var name = params.data.num;
+                    var text = `{fline|${name}}`;
+                    return text;
+                  },
+                  color: '#fff',
+                  rich: {
+                    fline: {
+                      padding: [0, 25],
+                      color: '#dcc52f',
+                      textShadowColor: '#030615',
+                      textShadowBlur: '0',
+                      textShadowOffsetX: 1,
+                      textShadowOffsetY: 1,
+                      fontSize: 14,
+                      fontWeight: 400,
+                    },
+                    tline: {
+                      padding: [0, 27],
+                      color: '#afd31d',
+                      fontSize: 12,
+                    },
+                  },
+                },
+                emphasis: {
+                  show: true,
+                },
+              },
+              itemStyle: {
+                color: '#e3e00a',
+              },
+              symbol: "image://static/assets/reservoir-type-bak.png",
+              symbolSize: [84, 28],
+              symbolOffset: [0, -20],
+              z: 999,
+              data: data,   //企业名称
+            },
+
+
+
+          ],
+        };
+        _this.myChart.setOption(_this.option);
+        _this.myChart.on("click", (params) => {
+         //  console.log("点的是什么", params);
+          // //进入对应区的三维地图
+          // //跟右下角菜单切换触发调用方法一样，但是要传递区划参数，区划name
+          // const index = _this.districtData.findIndex((item) => {
+          //   return item.name === params.name ;
+          // });
+          // //console.log('rrrrrrrr5555',index);
+          // let districtObject = {
+          //   name:params.name,
+          //   longitude:_this.districtData[index].value[0],
+          //   latitude:_this.districtData[index].value[1],
+          // };
+          // _this.$emit('jumpIntoMap',districtObject);
+        });
+      });
+    },
+
+
+
+  },
+
+  beforeCreate() {}, //生命周期 - 创建之前
+  beforeMount() {}, //生命周期 - 挂载之前
+  beforeUpdate() {}, //生命周期 - 更新之前
+  updated() {}, //生命周期 - 更新之后
+  beforeDestroy() {}, //生命周期 - 销毁之前
+  destroyed() {}, //生命周期 - 销毁完成
+  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
+};
+</script>
+<style lang='less' scoped>
+//@import url(); 引入公共css类
+
+.river-course-view {
+  position: relative;
+  width:100%;
+  height: 100%;
+  background: url("~@/assets/common/homePage/big-bak.png") no-repeat;
+  background-size: 100% 100%;
+  .city-map-content-echarts {
+    width: 11rem;
+    height: 9rem;
+    top: 80px;
+    left: 400px;
+    bottom: 60px;
+    position: absolute;
+    z-index: 1000;
+  }
+  .map-menu {
+    position: absolute;
+    right: 486px;
+    bottom: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items:flex-end;
+    pointer-events: none;
+    z-index:99999;
+    .map-tab {
+      // 1、菜单切换功能
+      display: flex;
+      pointer-events: auto;
+      .tab-item {
+        flex: 1;
+        cursor: pointer;
+        min-width: 1.4rem;
+        height: 30px;
+        line-height: 30px;
+        text-align: center;
+        border: 1px solid #2ab1e9;
+        border-left: 0;
+        font-size: 16px;
+        padding: 0px 20px;
+        background-color: #0d284f;
+        color: #35cffc;
+        &.active {
+          color: #fefefe;
+          background: linear-gradient(to bottom, rgba(0, 0, 0, 0), #1eafda);
+        }
+        &:first-child {
+          border-left: 1px solid #2ab1e9;
+        }
+      }
+    }
+  }
+  .reservoirType-list{
+    position: absolute;
+    right: 486px;
+    width: 122px;
+    height: 100px;
+    top: 164px;
+    padding: 10px 0 0 10px;
+    display: flex;
+    flex-direction: column;
+    background-color: rgba(13,40,79,0.5);
+    border:1px solid #0d284f;
+    padding-top:22px;
+    .type-legend{
+      margin-bottom:20px;
+      margin-left: 10px;
+      display:flex;
+      flex-direction:row;
+      .legend-color{
+        width:12px;
+        height:12px;
+        border-radius: 50%;
+        text-align: center;
+        line-height: 12px;
+      }
+      .color-normal{
+        background-color:#00ebac ;
+      }
+      .color-warning{
+        background-color:#ff3537 ;
+      }
+      .legend-text{
+        margin-left: 10px;
+        span{
+          color:#ffffff;
+          font-size: 16px;
+        }
+      }
+    }
+  }
+  .topic-animation1 {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+
+    margin: 0px auto;
+    background-image: url("~@/assets/common/homePage/animation1.png");
+    background-size: cover;
+  }
+  .display-animation1 {
+    animation: topup1 5s linear 1s infinite;
+  }
+  .topic-animation2 {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+
+    margin: 0px auto;
+    background-image: url("~@/assets/common/homePage/animation2.png");
+    background-size: cover;
+  }
+  .display-animation2 {
+    animation: topup1 5s linear 2s infinite;
+  }
+  .topic-animation3 {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+
+    margin: 0px auto;
+    background-image: url("~@/assets/common/homePage/animation3.png");
+    background-size: cover;
+  }
+  .display-animation3 {
+    animation: topup1 5s linear 3s infinite;
+  }
+  .topic-animation4 {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+
+    margin: 0px auto;
+    background-image: url("~@/assets/common/homePage/animation4.png");
+    background-size: cover;
+  }
+  .display-animation4 {
+    animation: topup1 5s linear infinite;
+  }
+  .topic-animation5 {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+
+    margin: 0px auto;
+    background-image: url("~@/assets/common/homePage/animation5.png");
+    background-size: cover;
+  }
+  .display-animation5 {
+    animation: topup1 5s linear 4s infinite;
+  }
+  .topic-animation6 {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+
+    margin: 0px auto;
+    background-image: url("~@/assets/common/homePage/animation6.png");
+    background-size: cover;
+  }
+  .display-animation6 {
+    animation: topup1 5s linear infinite;
+  }
+  @keyframes topup1 {
+    from {
+      top: 0%;
+    }
+    to {
+      top: -100%;
+    }
+  }
+}
+</style>

front/src/views/assertReport/components/ResourceOverviewAnimation.vue

@@ -0,0 +1,675 @@
+<!--
+ * @Author: hisense.fanchunxiang
+ * @Date: 2021-10-26 15:16:59
+ * @LastEditors: hisense.fanchunxiang
+ * @LastEditTime: 2021-10-29 17:38:29
+ * @Description: file mountainData
+-->
+<template>
+  <div class="team-distribution-ball">
+    <div class="bg-ball" />
+    <div class="rotating-ring" />
+    <div class="sum-ball">
+      <div class="top">
+      </div>
+      <div class="bottom">企业</div>
+    </div>
+    <div class="num-wrap">
+      <div
+        v-for="(item, index) in resourceTypeData"
+        :key="index"
+        @click="handleClick(item, index)"
+      >
+        <p>{{item.typeNum}}个</p>
+        <p class="num-wrap-bottom">{{item.typeName}}</p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+
+
+export default {
+  components: {},
+  props: {
+    // 选择查询的时间段
+    selectedPeriod: {
+      type: Number,
+      default: '',
+    },
+  },
+  data() {
+    return {
+      nums: 0,
+      stationList: [],
+      // startTime: moment().subtract(12, "h").format("YYYY-MM-DD HH:mm:ss"),
+      // endTime: moment().format("YYYY-MM-DD HH:mm:ss"),
+      resourceType: ["石油化工", "有机化工", "精细化工", "化肥农药"],
+      detailTimer: null,
+      arr: [],
+      animationLock: true,
+      resourceTypeData: [
+        {
+          typeName: "石油化工",
+          typeNum: "17",
+        },
+        {
+          typeName: "有机化工",
+          typeNum: "329",
+        },
+        {
+          typeName: "精细化工",
+          typeNum: "432",
+        },
+        {
+          typeName: "化肥农药",
+          typeNum: "20",
+        }
+      ],
+      resourceData:{}
+    };
+  },
+  computed: {},
+  watch: {},
+  created() {},
+  mounted() {
+    this.arr.push(document.querySelectorAll(".num-wrap div"));
+    console.log("===============>", this.arr);
+    this.setTimer();
+    this.setRotateTimer();
+    this.getResourceTypeData();
+  },
+  destroyed() {
+    // 每次离开当前界面时，清除定时器
+    clearInterval(this.detailTimer);
+    this.detailTimer = null;
+  },
+  methods: {
+    handleClick(item, index) {
+      if (this.animationLock) {
+        // console.log(item);
+        if(item.typeName == "应急专家"){
+          bus.$emit('refreshChartData', 'expert', this.resourceData.expertData.expertDistribution);
+        }
+        else if(item.typeName == "物资储备库"){
+          bus.$emit('refreshChartData', 'storage', this.resourceData.storageData.storageDistribution);
+        }
+        else if(item.typeName == "应急预案") {
+          bus.$emit('refreshChartData', 'plan', this.resourceData.planData);
+        }
+        else {
+          bus.$emit('refreshChartData', 'resource', this.resourceData.planData);
+        }
+        if (index > 0 && this.resourceTypeData.length - index >= 1) {
+          let i = 1;
+          clearInterval(this.rotateTimer);
+          this.animationFun2();
+          if (this.resourceTypeData.length - index === 1) {
+            this.setRotateTimer();
+            return;
+          }
+          this.rotateTimer2 = setInterval(() => {
+            this.animationFun2();
+            i++;
+            // console.log(i, this.mountainData.length - index)
+            if (i === (this.resourceTypeData.length - index)) {
+              clearInterval(this.rotateTimer2);
+              this.setRotateTimer();
+            }
+          }, 1050);
+        }
+      }
+    },
+    //进入页面获取资源类别各自的总数,得到所有的统计数据，应急物资选中之后下面的图表显示什么？？？
+    getResourceTypeData(){
+      // Promise.all([
+      //   this.getExpertStatisticsData(),
+      //   this.getResourceStatisticsData(),
+      //   this.getStorageStatisticsData(),
+      //   this.getPlanStatisticsData(),
+      // ]).then((result)=>{
+      //   //给球赋值、给图表赋值//调用父页面显示某一个图表数据
+      //   //console.log('this.resourceData',this.resourceData);
+      //   this.resourceTypeData.forEach(item => {
+      //     if(item.typeName == "应急专家")
+      //     {item.typeNum = this.resourceData.expertData.expertNum
+      //     }
+      //     else if(item.typeName=="物资储备库"){
+      //       item.typeNum = this.resourceData.storageData.storageNum
+      //     }
+      //     else if(item.typeName=="应急预案"){
+      //       item.typeNum = this.resourceData.planData.city.length + this.resourceData.planData.country.length + this.resourceData.planData.province.length;
+      //     }
+      //     else {
+      //       item.typeNum = 540;
+      //     }
+
+        // });
+        // bus.$emit('refreshChartData', 'expert', this.resourceData.expertData.expertDistribution);
+   //   })
+    },
+
+    // 每五分钟获取一次资源数据
+    setTimer() {
+      this.clearTimer();
+      this.timer = setInterval(() => {
+        this.getResourceTypeData();
+      }, 5 * 60 * 1000);
+    },
+    animationFun() {
+      // console.log(this.arr[0][0].classList)
+      if (this.animationLock) {
+        this.animationLock = !this.animationLock;
+        this.arr[0][0].classList.add("animation1");
+        this.arr[0][1].classList.add("animation2");
+        this.arr[0][2].classList.add("animation3");
+        this.arr[0][3].classList.add("animation4");
+        setTimeout(() => {
+          for (var i = 0; i < this.resourceTypeData.length - 1; i++) {
+            // 改变展示点击的山体
+            this.resourceTypeData.push(this.resourceTypeData.shift());
+            this.resourceTypeData.push(this.resourceTypeData.shift());
+          }
+          this.arr[0][0].classList.remove("animation1");
+          this.arr[0][1].classList.remove("animation2");
+          this.arr[0][2].classList.remove("animation3");
+          this.arr[0][3].classList.remove("animation4");
+          //更新图表数据  bus.$emit('refreshChartData', val);
+          // if(this.resourceTypeData[0].typeName == '应急专家'){
+          //   bus.$emit('refreshChartData', 'expert', this.resourceData.expertData.expertDistribution);
+          // }else if(this.resourceTypeData[0].typeName == '物资储备库'){
+          //   bus.$emit('refreshChartData', 'storage', this.resourceData.storageData.storageDistribution);
+          //
+          // }else if(this.resourceTypeData[0].typeName == '应急预案'){
+          //   bus.$emit('refreshChartData', 'plan', this.resourceData.planData);
+          // }else{
+          // }
+          this.animationLock = !this.animationLock;
+        }, 2000);
+      }
+    },
+    animationFun2() {
+      // console.log(this.arr[0][0].classList)
+      this.animationLock = !this.animationLock;
+      this.arr[0][0].classList.add("animation2-1");
+      this.arr[0][1].classList.add("animation2-2");
+      this.arr[0][2].classList.add("animation2-3");
+      this.arr[0][3].classList.add("animation2-4");
+      setTimeout(() => {
+        for (var i = 0; i < this.resourceTypeData.length - 1; i++) {
+          // 改变展示点击的山体
+          let selectedData={};
+          bus.$emit('refreshChartData',selectedData);
+          this.resourceTypeData.push(this.resourceTypeData.shift());
+        }
+        this.arr[0][0].classList.remove("animation2-1");
+        this.arr[0][1].classList.remove("animation2-2");
+        this.arr[0][2].classList.remove("animation2-3");
+        this.arr[0][3].classList.remove("animation2-4");
+        this.animationLock = !this.animationLock;
+      }, 1000);
+    },
+    //每8秒旋转一次
+    setRotateTimer() {
+      this.clearTimer();
+      // this.animationFun();
+      this.rotateTimer = setInterval(() => {
+        this.animationFun();
+      },8*1000);
+    },
+    clearTimer() {
+      clearInterval(this.timer);
+      clearInterval(this.rotateTimer);
+      this.timer = null;
+      this.rotateTimer = null;
+    },
+  },
+};
+</script>
+<style lang="less" scoped>
+.team-distribution-ball {
+  width: 466px;
+  height: 230px;
+  position: relative;
+  left: -10px;
+  .bg-ball {
+    width: 466px;
+    height: 230px;
+    position: absolute;
+    left: 60%;
+    margin-left: -210px;
+    margin-top: 30px;
+    background: url("~@/assets/common/homePage/bg_ball.png")
+    no-repeat;
+    background-size: 70%;
+  }
+  .rotating-ring {
+    width: 230px;
+    height: 230px;
+    position: absolute;
+    border-radius: 50%;
+    background: url("~@/assets/common/homePage/rotating-ring2.png");
+    background-size: 100%;
+    transform: rotateX(30deg);
+    animation: spin1 3s linear infinite;
+    top: -5%;
+    left: 25%;
+  }
+  .sum-ball {
+    width: 150px;
+    height: 75px;
+    position: absolute;
+    left: 50%;
+    margin-left: -70px;
+    top: 50px;
+    text-align: center;
+    display: flex;
+    flex-direction: column;
+    .top {
+      width: 36px;
+      height: 36px;
+      background-image: url("~@/assets/common/homePage/ball-bak.png");
+      margin-left: 55px;
+      font-size: 16px;
+      color: #fff;
+      span {
+        font-size: 60px;
+        color: #fff;
+      }
+    }
+    .bottom {
+      font-size: 18px;
+      color: #fff;
+    }
+  }
+  @keyframes spin1 {
+    0% {
+      transform: rotateX(65deg) rotateZ(0deg);
+    }
+    50% {
+      transform: rotateX(65deg) rotateZ(180deg);
+    }
+    100% {
+      transform: rotateX(65deg) rotateZ(360deg);
+    }
+  }
+  .num-wrap {
+    z-index: 1002;
+    width: 100%;
+    height: 100%;
+    position: relative;
+
+    & > div {
+      position: absolute;
+      text-align: center;
+      cursor: pointer;
+    }
+    & > div:nth-child(1) {
+      background: url("~@/assets/common/homePage/ball-active.png");
+      background-size: 99%;
+      background-repeat: no-repeat;
+      background-position: center;
+      position: absolute;
+      width: 125px;
+      height: 190px;
+      right: 96px;
+      bottom: -23px;
+      p:nth-child(1) {
+        font-size: 24px;
+        color: #fff;
+        margin: 60px 0px 12px 0px;
+        padding-top: 20px;
+      }
+      p:nth-child(2) {
+        font-size: 16px;
+        color: #fff;
+        margin: 5px 0px 12px 0px;
+        padding-top: 12px;
+      }
+    }
+    & > div:nth-child(2) {
+      background: url("~@/assets/common/homePage/ball-front.png");
+      background-size: 70%;
+      background-repeat: no-repeat;
+      background-position: center;
+      width: 106px;
+      height: 132px;
+      left: 55px;
+      bottom: 45%;
+      margin-bottom: -80px;
+      p:nth-child(1) {
+        font-size: 20px;
+        color: #fff;
+        margin: 32px 0px 0px 0px;
+        padding-top: 20px;
+      }
+      p:nth-child(2) {
+        font-size: 14px;
+        color: #fff;
+        margin: 15px 0px 0px 0px;
+        padding-top: 12px;
+      }
+    }
+    & > div:nth-child(3) {
+      background: url("~@/assets/common/homePage/ball-back.png");
+      background-size: 70%;
+      background-repeat: no-repeat;
+      background-position: center;
+      width: 76px;
+      color: #53ceff;
+      height: 96px;
+      left: 95px;
+      top: 15px;
+      p:nth-child(1) {
+        font-size: 18px;
+        margin: 32px 0px 0px 0px;
+        color: #53ceff;
+      }
+      p:nth-child(2) {
+        font-size: 14px;
+        margin: 12px 0px 0px 0px;
+        color: #53ceff;
+      }
+    }
+    & > div:nth-child(4) {
+      background: url("~@/assets/common/homePage/ball-back.png");
+      background-size: 70%;
+      background-repeat: no-repeat;
+      background-position: center;
+      width: 76px;
+      color: #53ceff;
+      height: 96px;
+      right: 70px;
+      top: 20px;
+      p:nth-child(1) {
+        margin: 32px 0px 0px 0px;
+        font-size: 18px;
+        color: #53ceff;
+      }
+      p:nth-child(2) {
+        margin: 12px 0px 0px 0px;
+        font-size: 16px;
+        color: #53ceff;
+      }
+    }
+    & > div:nth-child(5) {
+      background: url("~@/assets/common/homePage/ball-front.png");
+      background-size: 70%;
+      background-repeat: no-repeat;
+      background-position: center;
+      width: 106px;
+      height: 132px;
+      right: 120px;
+      bottom: 43%;
+      margin-bottom: -80px;
+      p:nth-child(1) {
+        margin: 32px 0px 0px 0px;
+        padding-top: 12px;
+        color: #d9eeff;
+        font-size: 20px;
+      }
+      p:nth-child(2) {
+        margin: 12px 0px 0px 0px;
+        padding-top: 12px;
+        color: #d9eeff;
+        font-size: 16px;
+      }
+    }
+    /*依次设置图像盒子中每个图像旋转后位置*/
+    .animation1 {
+      animation: run1 2s linear both;
+      p:nth-child(1) {
+        animation: run1-test1 2s linear both;
+      }
+      p:nth-child(2) {
+        animation: run1-test 2s linear both;
+      }
+    }
+    .animation2 {
+      animation: run2 2s linear both;
+      p:nth-child(1) {
+        animation: run1-test2 2s linear both;
+      }
+      p:nth-child(2) {
+        animation: run2-test 2s linear both;
+      }
+    }
+    .animation3 {
+      animation: run3 2s linear both;
+      p:nth-child(1) {
+        animation: run1-test3 2s linear both;
+      }
+      p:nth-child(2) {
+        animation: run3-test 2s linear both;
+      }
+    }
+    .animation4 {
+      animation: run4 2s linear both;
+      p:nth-child(1) {
+        animation: run1-test4 2s linear both;
+      }
+      p:nth-child(2) {
+        animation: run4-test 2s linear both;
+      }
+    }
+    .animation5 {
+      animation: run5 2s linear both;
+      p:nth-child(1) {
+        animation: run1-test5 2s linear both;
+      }
+      p:nth-child(2) {
+        animation: run5-test 2s linear both;
+      }
+    }
+    .animation2-1 {
+      animation: run1 1s linear both;
+      p:nth-child(1) {
+        animation: run1-test1 2s linear both;
+      }
+      p:nth-child(2) {
+        animation: run1-test 1s linear both;
+      }
+    }
+    .animation2-2 {
+      animation: run2 1s linear both;
+      p:nth-child(1) {
+        animation: run1-test2 2s linear both;
+      }
+      p:nth-child(2) {
+        animation: run2-test 1s linear both;
+      }
+    }
+    .animation2-3 {
+      animation: run3 1s linear both;
+      p:nth-child(1) {
+        animation: run1-test3 2s linear both;
+      }
+      p :nth-child(2) {
+        animation: run3-test 1s linear both;
+      }
+    }
+    .animation2-4 {
+      animation: run4 1s linear both;
+      p:nth-child(1) {
+        animation: run1-test4 2s linear both;
+      }
+      p:nth-child(2) {
+        animation: run4-test 1s linear both;
+      }
+    }
+    .animation2-5 {
+      animation: run5 1s linear both;
+      p:nth-child(1) {
+        animation: run1-test5 2s linear both;
+      }
+      p:nth-child(2) {
+        animation: run5-test 1s linear both;
+      }
+    }
+  }
+}
+/*采用@keyframes 规则创建run动画。*/
+@keyframes run1 {
+  0% {
+    transform: translateX(0px) translateY(0px);
+  }
+  25% {
+    transform: translateX(-37px) translateY(-4px);
+  }
+  50% {
+    transform: translateX(-93px) translateY(-21px);
+  }
+  75% {
+    transform: translateX(-120px) translateY(-34px);
+  }
+  100% {
+    transform: translateX(-150px) translateY(-52px);
+    background: url("~@/assets/common/homePage/ball-front.png");
+    background-size: 70%;
+    background-repeat: no-repeat;
+    background-position: center;
+    width: 106px;
+    height: 132px;
+  }
+}
+@keyframes run1-test1 {
+  0% {
+  }
+  100% {
+    font-size: 20px;
+    margin: 37px 0px 0px 0px;
+    color: #fff;
+  }
+}
+@keyframes run1-test {
+  0% {
+  }
+  100% {
+    font-size: 14px;
+    color: #fff;
+    margin: 10px 0px 0px 0px;
+  }
+}
+@keyframes run2 {
+  0% {
+    transform: translateX(0px) translateY(0px);
+  }
+  25% {
+    transform: translateX(-15px) translateY(-8px);
+  }
+  50% {
+    transform: translateX(-30px) translateY(-36px);
+  }
+  75% {
+    transform: translateX(-15px) translateY(-64px);
+  }
+  100% {
+    transform: translateX(5px) translateY(-102px);
+    background: url("~@/assets/common/homePage/ball-back.png");
+    background-size: 70%;
+    background-repeat: no-repeat;
+    background-position: center;
+    width: 76px;
+    height: 96px;
+  }
+}
+@keyframes run1-test2 {
+  0% {
+  }
+  100% {
+    font-size: 20px;
+    margin: 17px 0px 0px 0px;
+    color: #53ceff;
+  }
+}
+@keyframes run2-test {
+  0% {
+  }
+  100% {
+    font-size: 14px;
+    margin: 12px 0px 0px 0px;
+    color: #53ceff;
+  }
+}
+@keyframes run3 {
+  0% {
+    transform: translateX(-100px) translateY(0px);
+  }
+  25% {
+    transform: translateX(-20px) translateY(-15px);
+  }
+  50% {
+    transform: translateX(60.5px) translateY(-30px);
+  }
+  75% {
+    transform: translateX(240.75px) translateY(-15px);
+  }
+  100% {
+    transform: translateX(200px) translateY(5px);
+    background: url("~@/assets/common/homePage/ball-back.png");
+    background-size: 70%;
+    background-repeat: no-repeat;
+  }
+}
+@keyframes run1-test3 {
+  0% {
+  }
+  100% {
+    font-size: 20px;
+    margin: 17px 0px 0px 0px;
+    color: #53ceff;
+  }
+}
+@keyframes run3-test {
+  0% {
+  }
+  100% {
+    margin: 12px 0px 0px 0px;
+    font-size: 16px;
+    color: #53ceff;
+  }
+}
+@keyframes run4 {
+  0% {
+    transform: translateX(0px) translateY(0px);
+  }
+  25% {
+    transform: translateX(5px) translateY(18px);
+  }
+  50% {
+    transform: translateX(0px) translateY(36px);
+  }
+  75% {
+    transform: translateX(-5px) translateY(54px);
+  }
+  100% {
+    transform: translateX(-10px) translateY(78px);
+    background: url("~@/assets/common/homePage/ball-front.png");
+    background-size: 70%;
+    background-repeat: no-repeat;
+    background-position: center;
+    width: 106px;
+    height: 132px;
+  }
+}
+@keyframes run1-test4 {
+  0% {
+  }
+  100% {
+    font-size: 20px;
+    margin: 37px 0px 0px 0px;
+    color: #fff;
+  }
+}
+@keyframes run4-test {
+  0% {
+  }
+  100% {
+    margin: 22px 0px 0px 0px;
+    padding-top: 12px;
+    color: #d9eeff;
+    font-size: 16px;
+  }
+}
+</style>

front/src/views/assertReport/index.vue

@@ -0,0 +1,306 @@
+<!--  -->
+<template>
+
+
+ <div class="capability-cloud">
+
+    <div class="header">
+      <span class="title" @click="goHome">城市云脑通用能力服务平台</span>
+    </div>
+    <div class="header1">
+      <div style=" color:#fff; font-size: 24px">累计节省财政资金</div>
+      <div style=" color:#fff; font-size: 24px">2451.0万元</div>
+      <div style=" color:#fff; font-size: 18px">注：资源参考价格由部门提供或参考市场价格设定</div>
+      </div>
+    <!--左侧-->
+    <div class="reservoir-left">
+      <!-- 左侧内容 -->
+    <reservoir-left />
+    </div>
+     <!--右侧-->
+    <div class="reservoir-right">
+      <reservoir-right />
+    </div>
+    <div class="reservoir-map">
+      <!-- 中间地图 -->
+      <reservoir-thumbnail
+                           @changeThumbnailMap="changeThumbnailMap"
+                           @jumpIntoMap="jumpIntoMap"
+      />
+    </div>
+
+  </div>
+
+</template>
+
+<script>
+
+
+import ReservoirThumbnail from "./components/ReservoirThumbnail.vue";
+
+import ReservoirLeft from "./components/ReservoirLeft";
+  import ReservoirRight from "./components/ReservoirRight";
+export default {
+  //import引入的组件需要注入到对象中才能使用
+  components: {
+    ReservoirThumbnail,
+    ReservoirLeft,
+    ReservoirRight
+
+  },
+  data() {
+    //这里存放数据
+    return {
+      model: "common",
+      dialogTitle: "周边视频",
+      videoAnalysisDialogVisible: false, //视频分析弹窗显示标志位
+      riverCourseHistoryDialogVisible: false, //河道历史弹窗
+      riverDetailInfo: {}, //河道具体信息用于历史弹窗显示数据
+      dialogType: "add",
+      dialogData: {},
+      dangerReportDialogVisible: false,
+      positionInfo: null,
+      reservoirDialogVisible: false, //新增修改积水点弹窗显示标志位
+      districtOptions: [], //区划数组
+      isThumbnail:true,    //是否为地图缩略图
+      tabindex:0,      //3d地图选中的tab。
+      listType:"",//水库列表的类型，普通列表 “”，预警列表 warnig
+      basicInfo: {},  //水库详情信息
+      type: '',
+      callSource:"indexPage",
+    };
+  },
+  //监听属性 类似于data概念
+  computed: {},
+  //监控data中的数据变化
+  watch: {},
+  //方法集合
+  methods: {
+    changeModel(model, waterPointInfo) {
+      this.model = model;
+      if(model == 'common') {
+        this.basicInfo = {};
+      }
+      this.listType ="";
+      // if (this.model == "common") {
+      //   this.$refs.riverCourseMap.isMapMenu = true;
+      //   this.$refs.riverCourseMap.choseTab(1);
+      // }
+      //点击水库险情时
+      if(this.model == "dangerlist") {
+        this.isThumbnail=false;
+        //水库险情上图。
+        this.$nextTick(() => {
+          bus.$emit('reservoirMapDangerList');
+        })
+      }
+      //点击水库险情时
+      // if(this.model == "dangerlist") {
+      //   this.isThumbnail=false;
+      //   //水库险情上图。
+      //   this.$nextTick(() => {
+      //     bus.$emit('reservoirMapDangerList');
+      //   })
+      // }
+    },
+    //从缩略图下沉跳转至三维地图
+    jumpIntoMap(data) {
+      this.isThumbnail = false;
+      //地图到具体的区划
+      this.$nextTick(() => {
+        bus.$emit('reservoirMapLonLat',data);
+      })
+    },
+    //点击所有水库上图。
+    listOnMap(data){
+      this.isThumbnail = false;
+      console.log("所有水库列表",data);
+      //地图到具体的区划
+      this.$nextTick(() => {
+        bus.$emit('reservoirMapList',data);
+      })
+
+    },
+    // 获取区市单位数据
+    async getDistrict() {
+      const res = await selectByType("districtType");
+      this.districtOptions = res.data;
+    },
+    //视频弹窗显示。
+    openVideoAnalysisAndData(item, isShow) {
+      console.log("为啥不显示", item);
+      this.positionInfo = item;
+      this.videoAnalysisDialogVisible = isShow;
+    },
+    //新增险情
+    addNewDanger(type, data){
+      console.log("type",type);
+      if (type == "add") {
+        this.dialogData = {};
+        this.dialogType = "add";
+      } else {
+        this.dialogData = data;
+        this.dialogType = "edit";
+      }
+      this.reservoirDialogVisible = true;
+    },
+    //3d 跳转缩略图
+    changeMap(isshow){
+      this.isThumbnail=isshow;
+    },
+    // 缩略图跳转3d
+    changeThumbnailMap(isshow,index){
+      console.log('isshow',isshow);
+      console.log('index',index);
+      this.isThumbnail=isshow;
+      this.tabindex=index;
+    }
+  },
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() {},
+  //生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {
+
+
+
+  },
+  beforeCreate() {}, //生命周期 - 创建之前
+  beforeMount() {}, //生命周期 - 挂载之前
+  beforeUpdate() {}, //生命周期 - 更新之前
+  updated() {}, //生命周期 - 更新之后
+  beforeDestroy() {}, //生命周期 - 销毁之前
+  destroyed() {}, //生命周期 - 销毁完成
+  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
+};
+</script>
+<style lang="less">
+  @font-face {
+    font-family: 'SourceHanSansCN-Regular';
+    src: url('~@/assets/capabilityCloud/font/SourceHanSansCN-Regular.otf');
+  }
+  @font-face {
+    font-family: 'DIN-Bold';
+    src: url('~@/assets/capabilityCloud/font/DIN-Bold.otf');
+  }
+  @font-face {
+    font-family: 'ZhiheiJ-W5.ttf';
+    src: url('~@/assets/capabilityCloud/font/ZhiheiJ-W5.ttf');
+  }
+  .capability-cloud {
+    font-family: SourceHanSansCN-Regular;
+    .title {
+      font-family: ZhiheiJ-W5;
+      background: -webkit-linear-gradient(90deg, #99a8d0, #fff);
+      font-weight: 600;
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+    }
+    .num {
+      font-family: DIN-Bold;
+    }
+  }
+</style>
+<style lang='less' scoped>
+// 此处去掉scoped为修改date-picker背景色，所以业务样式都应放在reservoir层级中，避免影响
+//@import url(); 引入公共css类
+.module-header-container {
+  position: absolute;
+  z-index: 1000;
+  top: 0px;
+  width: 100%;
+  pointer-events: none;
+}
+.capability-cloud {
+    height: 10.8rem;
+    background: url('~@/assets/capabilityCloud/bg.png') no-repeat;
+    background-size: 100% 100%;
+    overflow: hidden;
+    & > .header {
+      height: 1.04rem;
+      text-align: center;
+      background: url('~@/assets/capabilityCloud/header.png') no-repeat;
+      font-size: 0.46rem;
+    }
+    .header1 {
+      top: 78px;
+      position: absolute;
+    left: 795px;
+    align-items: center;
+    z-index: 1004;
+    text-align: center;
+    }
+ 
+  //position: relative;
+  .reservoir-left {
+    position: absolute;
+    left: 0.1rem;
+    z-index: 1300;
+    top: 0.8rem;
+    height: calc(100% - 0.8rem);
+  }
+  .reservoir-right {
+    position: absolute;
+    z-index: 1001;
+    right: 0.1rem;
+    top: 0.8rem;
+    height: calc(100% - 0.8rem);
+  }
+  .reservoir-map {
+    position: absolute;
+    width: 100%;
+
+    height: 100%;
+  }
+}
+// 日期时间组件
+.phone-date-picker {
+  color: #fff;
+  //border: 1px solid #e4e7ed;
+  border: 1px solid #008fbb;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  //background: #000;
+  background: #123d68;
+  //background:rgba(0, 0, 0, 0);
+  line-height: 30px;
+  margin: 5px 0;
+  .el-date-table td.disabled div {
+    background: #305156 !important;
+  }
+  .el-picker-panel__footer {
+    //background-color: rgba(0, 0, 0, 0.8);
+    background: #123d68;
+    color: #fff;
+    .el-picker-panel__link-btn:first-of-type {
+      display: none;
+    }
+  }
+  .el-date-table td.in-range div {
+    background: #009ab3;
+  }
+  .el-input__inner {
+    //background-color: rgba(0, 0, 0, 0.8);
+    background: #123d68;
+    color: #fff;
+  }
+  .el-date-picker__header > button,
+  span {
+    color: #fff;
+  }
+  .el-picker-panel__content > .el-date-table > tbody > tr > th {
+    color: #fff;
+  }
+  .el-button.is-plain:hover,
+  .el-button.is-plain:focus {
+    background: #009ab3;
+  }
+  .el-button--default {
+    border-radius: 0;
+    background: #009ab3;
+    //border: 1px solid #dcdfe6;
+    border: 1px solid #008fbb;
+    border-color: #009ab3;
+  }
+}
+
+
+</style>

front/src/views/home/DetailsPageconetent.vue

@@ -1651,8 +1651,9 @@
         })
       }
       const showFlag = ref(true)
-      mybus.on('getCameraByParentId', (ids) => {
-        paramsGetResources2.value.regionId = ids
+      mybus.on('getCameraByParentId', (val) => {
+        console.log('倒腾位置2')
+        paramsGetResources2.value.regionId = val.id
         getAppResources()
       })
       mybus.on('changeShowFlag', (flag) => {

front/src/views/home/apply.vue

@@ -296,17 +296,29 @@
       const num = ref(0)
       // 过期时间
       const expireDateOptions = [
+        {
+          value: moment().add(7, 'days').format('YYYY-MM-DD HH:mm:ss'),
+          label: '7天',
+        },
         {
           value: moment().add(30, 'days').format('YYYY-MM-DD HH:mm:ss'),
-          label: '30天',
+          label: '1个月',
         },
         {
-          value: moment().add(60, 'days').format('YYYY-MM-DD HH:mm:ss'),
-          label: '60天',
+          value: moment().add(180, 'days').format('YYYY-MM-DD HH:mm:ss'),
+          label: '6个月',
         },
         {
-          value: moment().add(90, 'days').format('YYYY-MM-DD HH:mm:ss'),
-          label: '90天',
+          value: moment().add(365, 'days').format('YYYY-MM-DD HH:mm:ss'),
+          label: '1年',
+        },
+        {
+          value: moment().add(730, 'days').format('YYYY-MM-DD HH:mm:ss'),
+          label: '2年',
+        },
+        {
+          value: moment().add(1095, 'days').format('YYYY-MM-DD HH:mm:ss'),
+          label: '3年',
         },
       ]
       const apiURL = window.SITE_CONFIG.apiURL

front/src/views/home/components/H5Player.vue

@@ -2,10 +2,10 @@
 海康H5Player
 -->
 <template>
-  <div id="player" style="width: 800px; height: 600px; z-index: 9999"></div>
+  <div :id="videoId" style="width: 800px; height: 600px; z-index: 9999"></div>
 </template>
 <script>
-  const IS_MOVE_DEVICE = document.body.clientWidth < 992 // 是否移动设备
+  // const IS_MOVE_DEVICE = document.body.clientWidth < 992 // 是否移动设备
   const MSE_IS_SUPPORT = !!window.MediaSource // 是否支持mse
   import { message } from 'ant-design-vue'
   import mybus from '@/myplugins/mybus'
@@ -16,6 +16,10 @@
         type: String,
         default: '',
       },
+      videoId: {
+        type: String,
+        default: 'player',
+      },
       index: {
         type: Number,
         default: 0,
@@ -24,11 +28,16 @@
         type: Boolean,
         default: false,
       },
+      unStopable: {
+        type: Boolean,
+        default: false,
+      },
     },
     data() {
       return {
         player: null,
         splitNum: 1,
+        realTime: true,
         mseSupport: MSE_IS_SUPPORT,
         // tabActive: MSE_IS_SUPPORT ? 'mse' : 'decoder',
         tabActive: 'decoder',
@@ -65,8 +74,13 @@
       mybus.emit('closeLoading', true)
       this.createPlayer()
       this.arrangeWindow()
-      //videoUrl this.realplay(this.videoUrl,0);//循环传过来的数组进行播放，index根据选中的个数
+      if (this.unStopable) {
+        this.videoPlay(this.videoUrl, 0)
+      } else {
         this.realplay(this.videoUrl, 0)
+      }
+      //videoUrl this.realplay(this.videoUrl,0);//循环传过来的数组进行播放，index根据选中的个数
+
       //this.realplay('wss://10.134.135.44:6014/proxy/10.10.20.14:559/openUrl/y3mFfcA',0);
     },
     watch: {
@@ -76,7 +90,16 @@
           console.log('oldVal:', oldVal)
           console.log('newVal:', newVal)
           if (newVal) {
+            if (!this.player) {
+              setTimeout(() => {
+                this.init()
+                this.createPlayer()
+                this.arrangeWindow()
                 this.realplay(newVal, 0)
+              }, 1000)
+            } else {
+              this.realplay(newVal, 0)
+            }
           }
         },
         // 立即处理 进入页面就触发
@@ -92,12 +115,13 @@
         })
       },
       createPlayer() {
-        //console.log('this.index',this.index);
+        console.log('初始化id', this.videoId)
         this.player = new window.JSPlugin({
           //szId: 'player'+this.index,
-          szId: 'player',
+          szId: this.videoId,
           szBasePath: '/util/', //引入静态资源地址，我这里静态资源在public/js文件存放，所以设置为js
           iMaxSplit: 4,
+          iWidth: '800px',
           iCurrentSplit: 4,
           openDebug: true,
           oStyle: {
@@ -141,8 +165,10 @@
               iWidth,
               iHeight
             )
-            // 首帧绘制完成后停止
+            // 如果是录像播放，首帧绘制完成后停止
+            if (!that.realTime) {
               that.pausePlay(iWndIndex)
+            }
             mybus.emit('closeLoading', false)
           },
           performanceLack: function () {
@@ -165,10 +191,13 @@
       // 初始化结束
       // 视频预览
       realplay(playURL, index1) {
+        this.realTime = false
         mybus.emit('closeLoading', true)
+        setTimeout(() => {
+          mybus.emit('closeLoading', false)
+        }, 3000)
         this.mode = 0 //解码方式：0普通模式 1高级模式
-        const { player, mode, urls } = this,
-          index = player.currentWindowIndex
+        const { player, mode, urls } = this
         // playURL = this.realplay
         console.log('视频播放地址', playURL)
         // const startTime = {
@@ -195,6 +224,41 @@
             }
           )
       },
+      // 实时播放
+      videoPlay(playURL, index1) {
+        let that = this
+        this.realTime = true
+        mybus.emit('closeLoading', true)
+        setTimeout(() => {
+          mybus.emit('closeLoading', false)
+        }, 3000)
+        if (!that.unStopable) {
+          message.warning('预览将在约6s后停止')
+          setTimeout(() => {
+            that.stopAllPlay()
+          }, 6000)
+        }
+        this.mode = 0 //解码方式：0普通模式 1高级模式
+        const { player, mode, urls } = this
+        // playURL = this.realplay
+        console.log('视频播放地址', playURL)
+        // const startTime = {
+        //   startTime: ,
+        // }
+        // const endTime = {
+        //   endTime: ,
+        // }
+        player.JS_Play(playURL, { playURL, mode }, index1).then(
+          () => {
+            console.log('realplay success')
+            // 预览时6s停止播放
+          },
+          (e) => {
+            console.error(e)
+            // message.error('错误代码:' + e)
+          }
+        )
+      },
       // 关闭所有视频
       stopAllPlay() {
         this.player.JS_StopRealPlayAll().then(
@@ -210,12 +274,15 @@
       },
       // 暂停单个视频
       pausePlay(index) {
+        let that = this
         this.player.JS_Pause(index).then(
           () => {
             console.log('暂停成功')
           },
           (e) => {
             console.error(e)
+            // 暂停失败切换为实时播放
+            that.videoPlay(that.videoUrl, 0)
           }
         )
       },

front/src/views/home/detailsPageInfrastructureTree.vue

@@ -2,7 +2,11 @@
   <div class="wrapper">
     <div class="wrapper-title-left-tree" :key="showKey">
       <div v-for="item in treeData" :key="item.id" class="primaryNode">
-        <div class="top" @click="showBottom(item)" :class="item.show ? 'topSelect' : ''">
+        <div
+          class="top"
+          @click="showBottom(item)"
+          :class="item.show ? 'topSelect' : ''"
+        >
           {{ item.name }}
           ({{ item.channelCount }})
           <DownOutlined v-show="!item.show" />
@@ -10,13 +14,28 @@
         </div>
         <div class="bottom" v-show="item.show">
           <div v-for="val in item.children" :key="val.id" class="item">
-            <div class="up" :class="selectId == val.id ? 'select' : ''"
-              @click="showDown(item, val), onSelect(item, val)">
+            <div
+              class="up"
+              :class="selectId == val.id ? 'select' : ''"
+              @click="showDown(item, val), onSelect(item, val)"
+            >
               <div>
-                <svg t="1654068878091" class="icon" viewBox="0 0 1024 1024" version="1.1"
-                  xmlns="http://www.w3.org/2000/svg" p-id="2156" width="0.25rem" height="0.25rem"
-                  v-show="selectId == val.id">
-                  <path d="M512 624a112 112 0 1 0 0-224 112 112 0 0 0 0 224z" p-id="2157" fill="#0058e1"></path>
+                <svg
+                  t="1654068878091"
+                  class="icon"
+                  viewBox="0 0 1024 1024"
+                  version="1.1"
+                  xmlns="http://www.w3.org/2000/svg"
+                  p-id="2156"
+                  width="0.25rem"
+                  height="0.25rem"
+                  v-show="selectId == val.id"
+                >
+                  <path
+                    d="M512 624a112 112 0 1 0 0-224 112 112 0 0 0 0 224z"
+                    p-id="2157"
+                    fill="#0058e1"
+                  ></path>
                 </svg>
                 <span class="name">{{ val.name }}({{ val.channelCount }})</span>
               </div>
@@ -27,13 +46,30 @@
               </span>
             </div>
             <div class="down" v-show="val.show">
-              <div v-for="child in val.children" :key="child.id" class="child"
-                :class="selectId == child.id ? 'select2' : ''" @click="onSelect(item, child, child)">
+              <div
+                v-for="child in val.children"
+                :key="child.id"
+                class="child"
+                :class="selectId == child.id ? 'select2' : ''"
+                @click="onSelect(item, child, child)"
+              >
                 <div>
-                  <svg t="1654068878091" class="icon" viewBox="0 0 1024 1024" version="1.1"
-                    xmlns="http://www.w3.org/2000/svg" p-id="2156" width="0.25rem" height="0.25rem"
-                    v-show="selectId == child.id">
-                    <path d="M512 624a112 112 0 1 0 0-224 112 112 0 0 0 0 224z" p-id="2157" fill="#0058e1"></path>
+                  <svg
+                    t="1654068878091"
+                    class="icon"
+                    viewBox="0 0 1024 1024"
+                    version="1.1"
+                    xmlns="http://www.w3.org/2000/svg"
+                    p-id="2156"
+                    width="0.25rem"
+                    height="0.25rem"
+                    v-show="selectId == child.id"
+                  >
+                    <path
+                      d="M512 624a112 112 0 1 0 0-224 112 112 0 0 0 0 224z"
+                      p-id="2157"
+                      fill="#0058e1"
+                    ></path>
                   </svg>
                   <span class="name">
                     {{ child.name }}
@@ -49,15 +85,15 @@
   </div>
 </template>
 <script>
-import { defineComponent, ref, watch } from 'vue'
-import { getCameraAllOrgan } from '@/api/videoSurveillance'
-import { getCameraInfoByAreaId } from '@/api/file'
-import mybus from '@/myplugins/mybus'
-import { useRouter } from 'vue-router'
-import { UpOutlined, DownOutlined } from '@ant-design/icons-vue'
-import { DETAIL_PAGE_CONTENT_DEFAULT_TAB } from '@/global/GlobalConfig.js'
+  import { defineComponent, ref, watch } from 'vue'
+  import { getCameraAllOrgan } from '@/api/videoSurveillance'
+  import { getCameraInfoByAreaId } from '@/api/file'
+  import mybus from '@/myplugins/mybus'
+  import { useRouter } from 'vue-router'
+  import { UpOutlined, DownOutlined } from '@ant-design/icons-vue'
+  import { DETAIL_PAGE_CONTENT_DEFAULT_TAB } from '@/global/GlobalConfig.js'
 
-export default defineComponent({
+  export default defineComponent({
     setup() {
       const router = useRouter()
       const whoShow1 = ref(whoShow)
@@ -72,7 +108,9 @@ export default defineComponent({
           'router.currentRoute.value.query.select',
           router.currentRoute.value.query.select
         )
-      let select = router.currentRoute.value.query.select || DETAIL_PAGE_CONTENT_DEFAULT_TAB
+        let select =
+          router.currentRoute.value.query.select ||
+          DETAIL_PAGE_CONTENT_DEFAULT_TAB
         if (select === '123') {
           select = ''
         }
@@ -81,18 +119,20 @@ export default defineComponent({
           router.currentRoute.value.query.select
         )
         if (select == '基础设施') {
-        let res = {};
+          let res = {}
           if (whoShow1.value && !whoShow1.value.itShowXiHaiAn) {
-          res = await getCameraAllOrgan({ parentId: 'S4NbecfYB1DBH8HNULGS34' })
+            res = await getCameraAllOrgan({
+              parentId: 'S4NbecfYB1DBH8HNULGS34',
+            })
           } else {
             // 西海岸
             res = await getCameraInfoByAreaId({
               areaId: '70be8c5b664f4bcf869d82f2e8335051',
             })
           }
-        treeData.value = res.data && res.data.data || []
+          treeData.value = (res.data && res.data.data) || []
           // 只有一个，默认展开到二级菜单
-        if(res.data && res.data.data.length == 1) {
+          if (res.data && res.data.data.length == 1) {
             showBottom(treeData.value[0])
           }
         }
@@ -102,10 +142,12 @@ export default defineComponent({
       })
 
       const onSelect = async (item, val, child) => {
-      console.log('item--------onSelect---->', item);
-      console.log('val------onSelect------>', val);
-      console.log('child-----onSelect------->', child);
-      mybus.emit('getCameraByParentId', val.id)
+        console.log('item--------onSelect---->', item)
+        console.log('val------onSelect------>', val)
+        console.log('child-----onSelect------->', child)
+        mybus.emit('getCameraByParentId', {
+          id: val.id,
+        })
         mybus.emit('getListByParentId', val.id)
         let res = {}
         if (whoShow1.value && !whoShow1.value.itShowXiHaiAn) {
@@ -131,14 +173,16 @@ export default defineComponent({
 
       watch(selectId, (newVal) => {
         if (newVal == '') {
-        mybus.emit('getCameraByParentId', '')
+          mybus.emit('getCameraByParentId', {
+            id: '',
+          })
           mybus.emit('getListByParentId', '')
         }
       })
 
       const showBottom = async (item) => {
-      item.show = !item.show;
-      let res = {};
+        item.show = !item.show
+        let res = {}
         if (whoShow1.value && !whoShow1.value.itShowXiHaiAn) {
           res = await getCameraAllOrgan({ parentId: item.id })
         } else {
@@ -148,17 +192,17 @@ export default defineComponent({
 
         treeData.value.map((treeDataItem, index) => {
           if (item.id == treeDataItem.id) {
-          treeData.value[index].children = res.data && res.data.data || []
+            treeData.value[index].children = (res.data && res.data.data) || []
             console.log('treeData.value.[index]', treeData.value[index])
           }
         })
       }
       const showDown = (item, val) => {
         selectId.value = val.id
-      console.log('item---showDown--------->', item);
-      console.log('val----showDown-------->', val);
+        console.log('item---showDown--------->', item)
+        console.log('val----showDown-------->', val)
         if (item.children) {
-        val.show = !val.show;
+          val.show = !val.show
           // 取消选中
           if (!val.show) {
             selectId.value = ''
@@ -182,10 +226,10 @@ export default defineComponent({
       UpOutlined,
       DownOutlined,
     },
-})
+  })
 </script>
 <style lang="less" scoped>
-.primaryNode {
+  .primaryNode {
     .top {
       width: 100%;
       height: 0.4rem;
@@ -232,7 +276,7 @@ export default defineComponent({
         border-top: 0.01rem solid #ccc;
         padding: 0 0.1rem;
 
-      &>div {
+        & > div {
           display: flex;
           justify-content: flex-start;
         }
@@ -289,7 +333,7 @@ export default defineComponent({
           align-items: center;
           padding: 0 0.1rem;
 
-        &>div {
+          & > div {
             display: flex;
             justify-content: flex-start;
           }
@@ -332,5 +376,5 @@ export default defineComponent({
         }
       }
     }
-}
+  }
 </style>

front/src/views/home/detailsPageInfrastructureTreeXha.vue

@@ -157,7 +157,9 @@
           }
         } else {
           if (selectId.value !== '') {
-            mybus.emit('getCameraByParentId', selectId.value)
+            mybus.emit('getCameraByParentId', {
+              id: selectId.value,
+            })
           } else {
             mybus.emit('clearLeftSelect')
           }
@@ -228,14 +230,21 @@
             selectId.value = ''
           } else {
             selectId.value = child.id
-            mybus.emit('getCameraByParentId', val.id)
+            // 查询数据并上图
+            const param = {
+              id: val.id,
+              reset: true,
+            }
+            mybus.emit('getCameraByParentId', param)
           }
         }
       }
 
       watch(selectId, (newVal) => {
         if (newVal == '') {
-          mybus.emit('getCameraByParentId', '70be8c5b664f4bcf869d82f2e8335051')
+          mybus.emit('getCameraByParentId', {
+            id: '70be8c5b664f4bcf869d82f2e8335051',
+          })
         }
       })
 
@@ -261,7 +270,9 @@
             selectId.value = ''
             // mybus.emit('clearLeftSelect')
           } else {
-            mybus.emit('getCameraByParentId', val.id)
+            mybus.emit('getCameraByParentId', {
+              id: val.id,
+            })
           }
         }
       }

front/src/views/home/infrastructureApplication.vue

@@ -1,12 +1,12 @@
 <!--
  * @Author: Light
  * @Date: 2022-11-18 11:53:43
- * @LastEditors: Light
- * @LastEditTime: 2022-11-25 20:05:47
+ * @LastEditors: hisense.wuhongjian
+ * @LastEditTime: 2022-11-26 16:30:51
  * @Description: 告诉大家这是什么
 -->
 <template>
-  <div class="infrastructureApplication" v-if="showFlag">
+  <div class="infrastructureApplication" v-show="showFlag">
     <div class="top">
       <a-list size="small" bordered :data-source="dataList.toBeApplied">
         <template #renderItem="{ item }">
@@ -47,7 +47,7 @@
             </div>
             <a-tag
               color="cyan"
-              style="margin-right: 0"
+              style="margin-right: 0; cursor: pointer"
               @click="selectItem(item)"
             >
               {{
@@ -88,6 +88,7 @@
     </div>
   </div>
   <a-modal
+    v-if="!dataList.selectItem.cameraInfo"
     :width="800"
     v-model:visible="visible"
     title="撤销申请"
@@ -110,28 +111,27 @@
     </a-table>
   </a-modal>
   <a-modal
-    v-if="dataList.selectItem.cameraInfo"
+    v-else
     v-model:visible="showVisible"
     :title="dataList.selectItem.cameraInfo.channelName"
     :footer="null"
+    :width="845"
+    destroyOnClose
     @cancel="clear"
   >
-    <div style="width: 100%; display: flex; justify-content: center">
-      <div style="width: 100%; height: 100%; position: relative">
-        <div class="waterMark waterMark-left-top">
-          {{ userInfo.usernameShow }}
-        </div>
-        <div class="waterMark waterMark-right-top">
-          {{ userInfo.realNameShow }}
-        </div>
-        <div class="waterMark waterMark-left-bottom">
-          {{ userInfo.usernameShow }}
-        </div>
-        <div class="waterMark waterMark-right-bottom">
-          {{ userInfo.realNameShow }}
-        </div>
-        <h5-player :video-url="videoUrl"></h5-player>
-      </div>
+    <div
+      style="
+        width: 800px;
+        height: 600px;
+        display: flex;
+        justify-content: center;
+      "
+    >
+      <h5-player
+        videoId="preview"
+        unStopable="true"
+        :video-url="videoUrl"
+      ></h5-player>
     </div>
   </a-modal>
 </template>
@@ -209,6 +209,10 @@
     }
   }
   const apply = () => {
+    if (dataList.toBeApplied.length === 0) {
+      message.warning('待申请列表为空!')
+      return
+    }
     let obj = {
       arr: [
         {
@@ -286,6 +290,7 @@
       getVideoUrl(item.cameraInfo)
     } else {
       dataList.selectItem = {}
+      message.info('请耐心等待审核通过')
       showVisible.value = false
     }
   }
@@ -347,8 +352,10 @@
       //console.log('555555rrrrr',res)
       if (res.data.data) {
         videoUrl.value = res.data.data.url
-      }
         showVisible.value = true
+      } else {
+        message.warning('申请内容已失效，请撤销后重新进行申请！')
+      }
     })
   }
   mybus.on('selectCamera', (obj) => {

front/src/views/home/infrastructurePageXha.vue

@@ -403,7 +403,14 @@
     </div>
     <div v-if="room">
       <!-- 地图 -->
-      <div class="map-contain" v-if="showMap">
+      <div
+        class="map-contain"
+        v-if="showMap"
+        v-loading="spinningHome"
+        element-loading-text="Loading..."
+        element-loading-svg-view-box="-10, -10, 50, 50"
+        element-loading-background="rgba(122, 122, 122, 0.8)"
+      >
         <video-surveillance></video-surveillance>
       </div>
       <!-- 表格 -->
@@ -691,6 +698,8 @@
   import { Form } from 'ant-design-vue'
   import moment from 'moment'
   import { useStore } from 'vuex'
+  import debounce from 'lodash/debounce'
+  import { stubFalse } from 'lodash'
   const store = useStore()
   const username = store.getters['user/username']
   const props = defineProps({
@@ -698,6 +707,7 @@
     searchValue: { type: String, default: '' },
     searchType: { type: String, default: '' },
   })
+  const spinningHome = ref(false)
   const current = ref(1)
   const videoTotal = ref(0)
   const router = useRouter()
@@ -1971,7 +1981,8 @@
   const wrjFlag = ref(false)
   // 西海岸-视频资源loading
   const loadingCamera = ref(false)
-  const getCamera = (flag, str) => {
+  const getCamera = debounce(
+    function (flag, str) {
       loadingCamera.value = true
       if (flag) {
         mapSearchParam.value.cameraName = str
@@ -2034,9 +2045,12 @@
             }
           }
         }
+        console.log('位置1')
+        spinningHome.value = true
         getCameraByCondition(params)
           .then((res) => {
             console.log('res--查询摄像头---------->', res)
+            spinningHome.value = false
             loadingCamera.value = false
             dataSource.value = res.data.data
             pagination.value.total = res.data.count
@@ -2046,7 +2060,10 @@
             message.error(err)
           })
       }
-  }
+    },
+    1000,
+    { leading: true, trailing: false }
+  )
   defineExpose({
     getCamera,
     reSetSearch,

front/src/views/home/videoSurveillance/index.vue

@@ -1,10 +1,19 @@
 <template>
   <div class="ucs-leaflet-map">
-    <div id="contain">
-      <div class="map-box">
+
+    <div id="contain" >
+
+      <div class="map-box" >
+
         <div :id="mapId" class="normal-map-content">
-          <tiled-map :hi-map="hiMap" :map-id="mapId" />
+
+          <tiled-map v-loading="spinning" element-loading-text="Loading..."
+    element-loading-svg-view-box="-10, -10, 50, 50"
+    element-loading-background="rgba(122, 122, 122, 0.8)"
+     :hi-map="hiMap" :map-id="mapId" />
+
         </div>
+
       </div>
 
       <div class="searchPoint">
@@ -41,6 +50,7 @@
             :fetch-suggestions="querySearch"
             clearable
             class="input-with-select"
+            @change = "changeComplete"
             placeholder="请输入关键字"
             @select="
               (addressItem) => {
@@ -104,7 +114,7 @@
 </template>
 
 <script>
-import { ElMessage } from 'element-plus'
+  import { ElMessage, ElLoading } from 'element-plus'
   import { message } from 'ant-design-vue'
   import { HieimpMap } from '@/supermap/map-init'
   import TiledMap from './components/tiledMap'
@@ -121,6 +131,7 @@ import { ElMessage } from 'element-plus'
     selectByChannelName,
   } from '@/api/videoSurveillance'
   import { getCameraByCondition,getListForPOI,CameraConditionPlaceType } from '@/api/file'
+  import debounce from 'lodash/debounce'
   import mybus from '@/myplugins/mybus'
   import * as turf from '@turf/turf';
 
@@ -133,6 +144,7 @@ import { ElMessage } from 'element-plus'
         checkboxGroup: [],
         tabList: [],
         state: '',
+        spinning: false,
         timeout: null,
         camreaTree: [],
         camreaTreeIsShow: true,
@@ -192,9 +204,14 @@ import { ElMessage } from 'element-plus'
       // this.getMapPoint()
       // 点击左侧根据parentId查询摄像头列表
       mybus.off('getCameraByParentId')
-      mybus.on('getCameraByParentId', (parentId) => {
+      mybus.on('getCameraByParentId', (val) => {
         debugger
-        this.mapSearchParam.parentId = parentId
+        console.log('倒腾位置1')
+        // 判断是否重置位置
+        if (val.reset) {
+          this.hiMapFun.mapFlyTo({lat:'36.017043',lng: '119.922772'}, 9)
+        }
+        this.mapSearchParam.parentId = val.id
         this.mapSearchParam.type = "1"
         this.mapSearchParam.pageSize = 10000
         this.getCameraByParentId('','department')
@@ -233,6 +250,12 @@ import { ElMessage } from 'element-plus'
       })
     },
     methods: {
+      changeComplete(val) {
+        if (val === '') {
+          // console.log('触发清空点位')
+          this.hiMapFun.removeLayerByLayerName('potcon');
+        }
+      },
       //查询标签视频
       queryCameraConditionPlace(data) {
           let params = {
@@ -366,19 +389,12 @@ import { ElMessage } from 'element-plus'
               this.mapSearchParam.gpsY = e.layer._latlng.lat
               this.mapSearchParam.radius = radius
               this.mapSearchParam.type = 1
-              const params = {
-                gpsX: this.mapSearchParam.gpsX,
-                gpsY: this.mapSearchParam.gpsY,
-                radius: radius,
-                type: this.mapSearchParam.type,
-              }
-              // mybus.emit('getListByMap', params)
               this.getCameraByParentId('map')
             }
           }
         })
       },
-      getCameraByParentId(type,dataName) {
+      getCameraByParentId : debounce(function(type,dataName) {
         if (!this.whoShow1.itShowXiHaiAn) {
           getCameraByParentId(this.mapSearchParam).then((res) => {
             console.log('根据parent查询摄像头', res.data.data)
@@ -386,14 +402,11 @@ import { ElMessage } from 'element-plus'
             this.addResourceTomap('videoMap', res.data.data)
           })
         } else {
-          this.hiMapFun.mapFlyTo({lat:'36.017043',lng: '119.922772'}, 9)
-            console.log('根据parent查询摄像头111111',this.mapSearchParam)
+          // this.hiMapFun.mapFlyTo({lat:'36.017043',lng: '119.922772'}, 9)
           let params = {
             regionId:
               this.mapSearchParam.parentId ||
               '70be8c5b664f4bcf869d82f2e8335051',
-            // pageNum: this.mapSearchParam.pageNum,
-            // pageSize: this.mapSearchParam.type!=0?this.mapSearchParam.pageSize:10,
             name: this.mapSearchParam.cameraName || '',
             longitude: this.mapSearchParam.gpsX || '',
             latitude: this.mapSearchParam.gpsY || '',
@@ -419,8 +432,11 @@ import { ElMessage } from 'element-plus'
           if(dataName){
               params.type='0';
           }
+          console.log('位置2')
+          this.spinning = true;
           getCameraByCondition(params).then((res) => {
             //console.log('根据parent查询摄像头44444', res.data.data)
+            this.spinning = false;
             if(type=='map'){
               let params = this.mapSearchParam;
               params.dataSource = res.data.data||0;
@@ -428,15 +444,15 @@ import { ElMessage } from 'element-plus'
               mybus.emit('getListByMap', params);
             }
             this.pointAllData = res.data.data;
-            if(this.mapSearchParam.type!=0)
+            // if(this.mapSearchParam.type!=0)
               this.addResourceTomap('videoMap', res.data.data)
 
-            else
-            this.addResourceTomap('videoMap', [])  //查询全部时不打点}
+            // else
+            // this.addResourceTomap('videoMap', [])  //查询全部时不打点}
 
           })
         }
-      },
+      }, 1000, { 'leading': true, 'trailing': false }),
       // 初始化地址匹配服务
       initAddressMatchService() {
         this.L = window.L || {}
@@ -508,6 +524,7 @@ import { ElMessage } from 'element-plus'
       async searchAddressByKeyWord(queryString, cb, indexX) {
         console.log('querySearch',queryString, cb,this.restaurants)
         if(queryString){
+          console.log('位置3')
           getCameraByCondition({
             // pageNum: 1,
             // pageSize: 40000,
@@ -534,7 +551,7 @@ import { ElMessage } from 'element-plus'
           cb([])
         }
       },
-      getCameraAllPage(page) {
+      getCameraAllPage: debounce(function(page) {
         let params = {
         regionId: "70be8c5b664f4bcf869d82f2e8335051",
         borderPolygonList: []
@@ -546,7 +563,7 @@ import { ElMessage } from 'element-plus'
           // let t2 = new Date().getTime();
           // console.log("时间#############" + (t2 - t1));
         })
-      },
+      },1000, { 'leading': true, 'trailing': false }),
       getCameraAllLabel() {},
       tabChange(item) {
         if (this.checkboxGroup.indexOf(item.labelName) !== -1) {
@@ -778,7 +795,7 @@ import { ElMessage } from 'element-plus'
     .leaflet-control-attribution {
       display: none;
     }
-    svg,.icon-poylon {
+    .icon, .icon-poylon {
       position: absolute;
       bottom: 0.1rem;
       right: 0.1rem;

front/src/views/personalCenter/components/AbilityApplication.vue

@@ -2,7 +2,7 @@
  * @Author: hisense.liangjunhua
  * @Date: 2022-07-12 09:42:44
  * @LastEditors: hisense.wuhongjian
- * @LastEditTime: 2022-10-26 18:15:01
+ * @LastEditTime: 2022-11-26 14:47:12
  * @Description:我的申请 能力申请 查看详情
 -->
 <template>
@@ -172,7 +172,6 @@
                   >
                     附件下载
                   </a-button>
-                  
                 </div>
               </div>
             </div>
@@ -225,11 +224,17 @@
                     style="cursor: pointer"
                     @click="
                       openView(
-                        'http://10.134.135.92:9537/data_service/getCamera/getCameraLiveStream?cameraIndexCode=' + val.channelCode+'&protocol=wss&transmode=1&streamType=1'
+                        'http://10.134.135.92:9537/data_service/getCamera/getCameraLiveStream?cameraIndexCode=' +
+                          val.channelCode +
+                          '&protocol=wss&transmode=1&streamType=1'
                       )
                     "
                   >
-                    {{ 'http://10.134.135.92:9537/data_service/getCamera/getCameraLiveStream?cameraIndexCode=' + val.channelCode+'&protocol=wss&transmode=1&streamType=1' }}
+                    {{
+                      'http://10.134.135.92:9537/data_service/getCamera/getCameraLiveStream?cameraIndexCode=' +
+                      val.channelCode +
+                      '&protocol=wss&transmode=1&streamType=1'
+                    }}
                   </span>
                 </div>
               </div>
@@ -245,7 +250,7 @@
                     border-radius: 5px;
                     font-size: 14px;
                     color: #fff;
-              cursor:pointer;
+                    cursor: pointer;
                   "
                   href="/static/download/InstallRootCert.exe"
                 >
@@ -262,8 +267,8 @@
                     border-radius: 5px;
                     font-size: 14px;
                     color: #fff;
-              margin-left:40px;
-              cursor:pointer;
+                    margin-left: 40px;
+                    cursor: pointer;
                   "
                   @click="downLoadClient()"
                 >
@@ -280,7 +285,7 @@
       wrapClassName="single-preview-modal"
       v-model:visible="visible"
       title="视频预览"
-      :width="1000"
+      :width="850"
       destroyOnClose
     >
       <template #footer></template>
@@ -300,7 +305,11 @@
             {{ userInfo.realNameShow }}
           </div>
           <!-- <vue3VideoPlay v-bind="options" /> -->
-          <h5-player :video-url="videoUrl"></h5-player>
+          <h5-player
+            unStopable="true"
+            :video-id="videoId"
+            :video-url="videoUrl"
+          ></h5-player>
         </div>
       </div>
     </a-modal>
@@ -315,7 +324,7 @@
   import { getStreamByChannelCode } from '@/api/videoSurveillance'
   import { getUser } from '@/api/home'
   import H5Player from '@/views/home/components/H5Player.vue'
-  import {getCameraLiveStream} from '@/api/file'
+  import { getCameraLiveStream } from '@/api/file'
   const router = useRouter()
   const backUrl = ref(window.SITE_CONFIG.apiURL + '/')
   const props = defineProps({
@@ -323,6 +332,7 @@
   })
   const whoShow1 = ref(whoShow)
   let visible = ref(false)
+  const videoId = ref('111111111111')
   const options = reactive({
     width: '912px', //播放器宽度
     height: '513px', //播放器高度
@@ -359,7 +369,7 @@
     dept.deptName = infrastructure.deptName
   }
   const showThis = () => {
-    console.log('props.refObj.enclosure',props.refObj);
+    console.log('props.refObj.enclosure', props.refObj)
     window.open(
       window.SITE_CONFIG.previewUrl +
         'hisense_office/onlinePreview?url=' +
@@ -368,8 +378,9 @@
   }
   //下载海康客户端
   const downLoadClient = () => {
-      let url = "https://open.hikvision.com/download/5c67f1e2f05948198c909700?type=10";
-    window.open( url, '_blank')
+    let url =
+      'https://open.hikvision.com/download/5c67f1e2f05948198c909700?type=10'
+    window.open(url, '_blank')
   }
   const showArr = ref([])
   console.log(props.refObj, '=====================================')
@@ -517,13 +528,13 @@
 
   const videoUrl = ref('')
   //获取视频控件所需播放地址
-   const getVideoUrl = (data) =>{
+  const getVideoUrl = (data) => {
     debugger
-      let param = data;
+    let param = data
     getCameraLiveStream(param).then((res) => {
       //console.log('555555rrrrr',res)
-      if(res.data.data){
-        videoUrl.value = res.data.data.url;
+      if (res.data.data) {
+        videoUrl.value = res.data.data.url
       }
       visible.value = true
     })
@@ -578,7 +589,7 @@
       })
   }
   const openView = (url) => {
-    console.log('valval',url);
+    console.log('valval', url)
     //http://10.134.135.92:9537/data_service/getCamera/getCameraLiveStream?cameraIndexCode=37021100421318000090&protocol=wss&transmode=1&streamType=1
     window.open(url, '_blank')
   }
@@ -628,7 +639,7 @@
           width: 2.5rem;
         }
       }
-      .downButton{
+      .downButton {
         display: flex;
         justify-content: normal;
       }
@@ -658,7 +669,7 @@
         .box {
           margin-left: 0.1rem;
           .ability {
-            height: 2.0rem;
+            height: 2rem;
             display: flex;
             border-bottom: 1px #eee solid;
             padding: 0.1rem 0;
@@ -766,7 +777,7 @@
                   position: relative;
                 }
               }
-              .button-bottom{
+              .button-bottom {
                 margin-top: 0;
                 margin-bottom: 10px;
               }

front/vue.config.js

@@ -29,8 +29,8 @@ const productionGzipExtensions = [
   'ico',
 ]
 // 是否开启gzip压缩
-// const isPro = process.env.NODE_ENV === 'production'
-const isPro = false
+const isPro = process.env.NODE_ENV === 'production'
+// const isPro = false
 if (donation) donationConsole()
 const { version, author } = require('./package.json')
 const Webpack = require('webpack')

node_modules/.package_versions.json

@@ -1 +0,0 @@
-{}

node_modules/_animate.css@4.1.1@animate.css/LICENSE

@@ -1,21 +0,0 @@
-The MIT License (MIT)
-
-Copyright (c) 2020 Daniel Eden
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.

node_modules/_animate.css@4.1.1@animate.css/README.md

@@ -1,48 +0,0 @@
-# Animate.css
-
-[![GitHub Version](https://img.shields.io/github/release/daneden/animate.css.svg?style=for-the-badge)](https://github.com/daneden/animate.css) [![Github Star](https://img.shields.io/github/stars/daneden/animate.css.svg?style=for-the-badge)](https://github.com/daneden/animate.css) [![Github Fork](https://img.shields.io/github/forks/daneden/animate.css.svg?style=for-the-badge)](https://github.com/daneden/animate.css) [![License](https://img.shields.io/github/license/daneden/animate.css.svg?style=for-the-badge)](https://github.com/daneden/animate.css)
-
-> If you need the old docs - v3.x.x and under - you can find it [here](https://github.com/animate-css/animate.css/tree/a8d92e585b1b302f7749809c3308d5e381f9cb17).
-
-## _Just-add-water CSS animation_
-
-## Installation
-
-Install with npm:
-
-```shell
-npm install animate.css --save
-```
-
-Install with yarn:
-
-```shell
-yarn add animate.css
-```
-
-## Getting started
-
-You can find the Animate.css documentation on the [website](https://animate.style/).
-
-## Accessibility
-
-Animate.css supports the [`prefers-reduced-motion` media query](https://webkit.org/blog/7551/responsive-design-for-motion/) so that users with motion sensitivity can opt out of animations. On supported platforms (currently all the majors browsers and OS), users can select "reduce motion" on their operating system preferences and it will turn off CSS transitions for them without any further work required.
-
-## Core team
-
-| ![](https://avatars2.githubusercontent.com/u/439365?s=460&u=512b4cc5324938ae40bbb8f3b7769d335953cd3a&v=4) | ![](https://avatars2.githubusercontent.com/u/5007208?s=460&u=418401ee605824272e5dcb955fd64ea24546a857&v=4) | ![](https://avatars1.githubusercontent.com/u/15052701?s=460&u=9e58364978379536d3f26c4ce5cae1a2a449a0e4&v=4) |
-| --- | --- | --- |
-| [Daniel Eden](https://github.com/daneden) | [Elton Mesquita](https://github.com/eltonmesquita) | [Waren Gonzaga](https://github.com/WarenGonzaga) |
-| Animate.css creator | Maintainer | Core contributor |
-
-## License
-
-Animate.css is licensed under the MIT license. <https://opensource.org/licenses/MIT>
-
-## Code of Conduct
-
-This project and everyone participating in it is governed by the [Contributor Covenant Code of Conduct](CODE_OF_CONDUCT.md). By participating, you are expected to uphold this code. Please report unacceptable behavior to [callmeelton@gmail.com](mailto:callmeelton@gmail.com).
-
-## Contributing
-
-Pull requests are the way to go here. We only have two rules for submitting a pull request: match the naming convention (camelCase, categorised [fades, bounces, etc]) and let us see a demo of submitted animations in a [pen](https://codepen.io). That **last one is important**.

node_modules/_animate.css@4.1.1@animate.css/package.json

@@ -1,78 +0,0 @@
-{
-  "name": "animate.css",
-  "version": "4.1.1",
-  "main": "animate.css",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/animate-css/animate.css.git"
-  },
-  "author": {
-    "name": "Animate.css"
-  },
-  "homepage": "https://animate.style/",
-  "license": "MIT",
-  "animateConfig": {
-    "prefix": "animate__"
-  },
-  "scripts": {
-    "start": "npm-run-all raw prod compat",
-    "compat": "npx postcss source/animate.css -o animate.compat.css --no-map --env compat",
-    "dev": "npx postcss source/animate.css -o animate.css --no-map --env development -w",
-    "raw": "npx postcss source/animate.css -o animate.css --no-map --env development",
-    "prod": "npx postcss source/animate.css -o animate.min.css --no-map --env production",
-    "format": "prettier --write \"**/*.{js,json,md,css}\"",
-    "precommit": "lint-staged",
-    "docs:library": "npx postcss source/animate.css -o ./docs/animate.min.css --no-map --env production",
-    "docs:pages": "node ./docsSource/index.js",
-    "docs": "npm-run-all docs:library docs:pages",
-    "version": "npm-run-all start docs && git add -A docs animate.css animate.min.css animate.compat.css",
-    "postversion": "git push && git push --tags"
-  },
-  "browserslist": [
-    "> 3%",
-    "last 2 versions"
-  ],
-  "style": "./animate.css",
-  "jspm": {
-    "main": "animate.css!",
-    "format": "global",
-    "directories": {
-      "lib": "./"
-    }
-  },
-  "devDependencies": {
-    "autoprefixer": "^9.7.6",
-    "cssnano": "^4.1.10",
-    "eslint": "^7.8.1",
-    "husky": "^4.2.5",
-    "lint-staged": "^10.3.0",
-    "markdown-it": "^11.0.0",
-    "npm-run-all": "^4.1.5",
-    "postcss": "^7.0.27",
-    "postcss-cli": "^7.1.2",
-    "postcss-header": "^2.0.0",
-    "postcss-import": "^12.0.1",
-    "postcss-prefixer": "^2.1.2",
-    "postcss-preset-env": "^6.7.0",
-    "prettier": "^2.1.1"
-  },
-  "lint-staged": {
-    "*.{js,json,md,css}": [
-      "prettier --write"
-    ]
-  },
-  "husky": {
-    "hooks": {
-      "pre-commit": "npm-run-all start precommit"
-    }
-  },
-  "files": [
-    "animate.compat.css",
-    "animate.min.css",
-    "animate.css",
-    "source/**/*.css"
-  ],
-  "__npminstall_done": true,
-  "_from": "animate.css@4.1.1",
-  "_resolved": "https://registry.npmmirror.com/animate.css/-/animate.css-4.1.1.tgz"
-}

node_modules/_animate.css@4.1.1@animate.css/source/_base.css

@@ -1,68 +0,0 @@
-.animated {
-  animation-duration: var(--animate-duration);
-  animation-fill-mode: both;
-}
-
-.animated.infinite {
-  animation-iteration-count: infinite;
-}
-
-.animated.repeat-1 {
-  animation-iteration-count: var(--animate-repeat);
-}
-
-.animated.repeat-2 {
-  animation-iteration-count: calc(var(--animate-repeat) * 2);
-}
-
-.animated.repeat-3 {
-  animation-iteration-count: calc(var(--animate-repeat) * 3);
-}
-
-.animated.delay-1s {
-  animation-delay: var(--animate-delay);
-}
-
-.animated.delay-2s {
-  animation-delay: calc(var(--animate-delay) * 2);
-}
-
-.animated.delay-3s {
-  animation-delay: calc(var(--animate-delay) * 3);
-}
-
-.animated.delay-4s {
-  animation-delay: calc(var(--animate-delay) * 4);
-}
-
-.animated.delay-5s {
-  animation-delay: calc(var(--animate-delay) * 5);
-}
-
-.animated.faster {
-  animation-duration: calc(var(--animate-duration) / 2);
-}
-
-.animated.fast {
-  animation-duration: calc(var(--animate-duration) * 0.8);
-}
-
-.animated.slow {
-  animation-duration: calc(var(--animate-duration) * 2);
-}
-
-.animated.slower {
-  animation-duration: calc(var(--animate-duration) * 3);
-}
-
-@media print, (prefers-reduced-motion: reduce) {
-  .animated {
-    animation-duration: 1ms !important;
-    transition-duration: 1ms !important;
-    animation-iteration-count: 1 !important;
-  }
-
-  .animated[class*='Out'] {
-    opacity: 0;
-  }
-}

node_modules/_animate.css@4.1.1@animate.css/source/_vars.css

@@ -1,5 +0,0 @@
-:root {
-  --animate-duration: 1s;
-  --animate-delay: 1s;
-  --animate-repeat: 1;
-}

node_modules/_animate.css@4.1.1@animate.css/source/animate.css

@@ -1,131 +0,0 @@
-@import '_vars.css';
-@import '_base.css';
-
-/* Attention seekers  */
-@import 'attention_seekers/bounce.css';
-@import 'attention_seekers/flash.css';
-@import 'attention_seekers/pulse.css';
-@import 'attention_seekers/rubberBand.css';
-@import 'attention_seekers/shakeX.css';
-@import 'attention_seekers/shakeY.css';
-@import 'attention_seekers/headShake.css';
-@import 'attention_seekers/swing.css';
-@import 'attention_seekers/tada.css';
-@import 'attention_seekers/wobble.css';
-@import 'attention_seekers/jello.css';
-@import 'attention_seekers/heartBeat.css';
-
-/* Back entrances */
-@import 'back_entrances/backInDown.css';
-@import 'back_entrances/backInLeft.css';
-@import 'back_entrances/backInRight.css';
-@import 'back_entrances/backInUp.css';
-
-/* Back exits */
-@import 'back_exits/backOutDown.css';
-@import 'back_exits/backOutLeft.css';
-@import 'back_exits/backOutRight.css';
-@import 'back_exits/backOutUp.css';
-
-/* Bouncing entrances  */
-@import 'bouncing_entrances/bounceIn.css';
-@import 'bouncing_entrances/bounceInDown.css';
-@import 'bouncing_entrances/bounceInLeft.css';
-@import 'bouncing_entrances/bounceInRight.css';
-@import 'bouncing_entrances/bounceInUp.css';
-
-/* Bouncing exits  */
-@import 'bouncing_exits/bounceOut.css';
-@import 'bouncing_exits/bounceOutDown.css';
-@import 'bouncing_exits/bounceOutLeft.css';
-@import 'bouncing_exits/bounceOutRight.css';
-@import 'bouncing_exits/bounceOutUp.css';
-
-/* Fading entrances  */
-@import 'fading_entrances/fadeIn.css';
-@import 'fading_entrances/fadeInDown.css';
-@import 'fading_entrances/fadeInDownBig.css';
-@import 'fading_entrances/fadeInLeft.css';
-@import 'fading_entrances/fadeInLeftBig.css';
-@import 'fading_entrances/fadeInRight.css';
-@import 'fading_entrances/fadeInRightBig.css';
-@import 'fading_entrances/fadeInUp.css';
-@import 'fading_entrances/fadeInUpBig.css';
-@import 'fading_entrances/fadeInTopLeft.css';
-@import 'fading_entrances/fadeInTopRight.css';
-@import 'fading_entrances/fadeInBottomLeft.css';
-@import 'fading_entrances/fadeInBottomRight.css';
-
-/* Fading exits */
-@import 'fading_exits/fadeOut.css';
-@import 'fading_exits/fadeOutDown.css';
-@import 'fading_exits/fadeOutDownBig.css';
-@import 'fading_exits/fadeOutLeft.css';
-@import 'fading_exits/fadeOutLeftBig.css';
-@import 'fading_exits/fadeOutRight.css';
-@import 'fading_exits/fadeOutRightBig.css';
-@import 'fading_exits/fadeOutUp.css';
-@import 'fading_exits/fadeOutUpBig.css';
-@import 'fading_exits/fadeOutTopLeft.css';
-@import 'fading_exits/fadeOutTopRight.css';
-@import 'fading_exits/fadeOutBottomRight.css';
-@import 'fading_exits/fadeOutBottomLeft.css';
-
-/* Flippers */
-@import 'flippers/flip.css';
-@import 'flippers/flipInX.css';
-@import 'flippers/flipInY.css';
-@import 'flippers/flipOutX.css';
-@import 'flippers/flipOutY.css';
-
-/* Lightspeed */
-@import 'lightspeed/lightSpeedInRight.css';
-@import 'lightspeed/lightSpeedInLeft.css';
-@import 'lightspeed/lightSpeedOutRight.css';
-@import 'lightspeed/lightSpeedOutLeft.css';
-
-/* Rotating entrances */
-@import 'rotating_entrances/rotateIn.css';
-@import 'rotating_entrances/rotateInDownLeft.css';
-@import 'rotating_entrances/rotateInDownRight.css';
-@import 'rotating_entrances/rotateInUpLeft.css';
-@import 'rotating_entrances/rotateInUpRight.css';
-
-/* Rotating exits */
-@import 'rotating_exits/rotateOut.css';
-@import 'rotating_exits/rotateOutDownLeft.css';
-@import 'rotating_exits/rotateOutDownRight.css';
-@import 'rotating_exits/rotateOutUpLeft.css';
-@import 'rotating_exits/rotateOutUpRight.css';
-
-/* Specials */
-@import 'specials/hinge.css';
-@import 'specials/jackInTheBox.css';
-@import 'specials/rollIn.css';
-@import 'specials/rollOut.css';
-
-/* Zooming entrances */
-@import 'zooming_entrances/zoomIn.css';
-@import 'zooming_entrances/zoomInDown.css';
-@import 'zooming_entrances/zoomInLeft.css';
-@import 'zooming_entrances/zoomInRight.css';
-@import 'zooming_entrances/zoomInUp.css';
-
-/* Zooming exits */
-@import 'zooming_exits/zoomOut.css';
-@import 'zooming_exits/zoomOutDown.css';
-@import 'zooming_exits/zoomOutLeft.css';
-@import 'zooming_exits/zoomOutRight.css';
-@import 'zooming_exits/zoomOutUp.css';
-
-/* Sliding entrances */
-@import 'sliding_entrances/slideInDown.css';
-@import 'sliding_entrances/slideInLeft.css';
-@import 'sliding_entrances/slideInRight.css';
-@import 'sliding_entrances/slideInUp.css';
-
-/* Sliding exits */
-@import 'sliding_exits/slideOutDown.css';
-@import 'sliding_exits/slideOutLeft.css';
-@import 'sliding_exits/slideOutRight.css';
-@import 'sliding_exits/slideOutUp.css';

node_modules/_animate.css@4.1.1@animate.css/source/attention_seekers/bounce.css

@@ -1,34 +0,0 @@
-@keyframes bounce {
-  from,
-  20%,
-  53%,
-  to {
-    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
-    transform: translate3d(0, 0, 0);
-  }
-
-  40%,
-  43% {
-    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-    transform: translate3d(0, -30px, 0) scaleY(1.1);
-  }
-
-  70% {
-    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-    transform: translate3d(0, -15px, 0) scaleY(1.05);
-  }
-
-  80% {
-    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
-    transform: translate3d(0, 0, 0) scaleY(0.95);
-  }
-
-  90% {
-    transform: translate3d(0, -4px, 0) scaleY(1.02);
-  }
-}
-
-.bounce {
-  animation-name: bounce;
-  transform-origin: center bottom;
-}

node_modules/_animate.css@4.1.1@animate.css/source/attention_seekers/flash.css

@@ -1,16 +0,0 @@
-@keyframes flash {
-  from,
-  50%,
-  to {
-    opacity: 1;
-  }
-
-  25%,
-  75% {
-    opacity: 0;
-  }
-}
-
-.flash {
-  animation-name: flash;
-}

node_modules/_animate.css@4.1.1@animate.css/source/attention_seekers/headShake.css

@@ -1,30 +0,0 @@
-@keyframes headShake {
-  0% {
-    transform: translateX(0);
-  }
-
-  6.5% {
-    transform: translateX(-6px) rotateY(-9deg);
-  }
-
-  18.5% {
-    transform: translateX(5px) rotateY(7deg);
-  }
-
-  31.5% {
-    transform: translateX(-3px) rotateY(-5deg);
-  }
-
-  43.5% {
-    transform: translateX(2px) rotateY(3deg);
-  }
-
-  50% {
-    transform: translateX(0);
-  }
-}
-
-.headShake {
-  animation-timing-function: ease-in-out;
-  animation-name: headShake;
-}

node_modules/_animate.css@4.1.1@animate.css/source/attention_seekers/heartBeat.css

@@ -1,27 +0,0 @@
-@keyframes heartBeat {
-  0% {
-    transform: scale(1);
-  }
-
-  14% {
-    transform: scale(1.3);
-  }
-
-  28% {
-    transform: scale(1);
-  }
-
-  42% {
-    transform: scale(1.3);
-  }
-
-  70% {
-    transform: scale(1);
-  }
-}
-
-.heartBeat {
-  animation-name: heartBeat;
-  animation-duration: calc(var(--animate-duration) * 1.3);
-  animation-timing-function: ease-in-out;
-}

node_modules/_animate.css@4.1.1@animate.css/source/attention_seekers/jello.css

@@ -1,40 +0,0 @@
-@keyframes jello {
-  from,
-  11.1%,
-  to {
-    transform: translate3d(0, 0, 0);
-  }
-
-  22.2% {
-    transform: skewX(-12.5deg) skewY(-12.5deg);
-  }
-
-  33.3% {
-    transform: skewX(6.25deg) skewY(6.25deg);
-  }
-
-  44.4% {
-    transform: skewX(-3.125deg) skewY(-3.125deg);
-  }
-
-  55.5% {
-    transform: skewX(1.5625deg) skewY(1.5625deg);
-  }
-
-  66.6% {
-    transform: skewX(-0.78125deg) skewY(-0.78125deg);
-  }
-
-  77.7% {
-    transform: skewX(0.390625deg) skewY(0.390625deg);
-  }
-
-  88.8% {
-    transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
-  }
-}
-
-.jello {
-  animation-name: jello;
-  transform-origin: center;
-}

node_modules/_animate.css@4.1.1@animate.css/source/attention_seekers/pulse.css

@@ -1,20 +0,0 @@
-/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
-
-@keyframes pulse {
-  from {
-    transform: scale3d(1, 1, 1);
-  }
-
-  50% {
-    transform: scale3d(1.05, 1.05, 1.05);
-  }
-
-  to {
-    transform: scale3d(1, 1, 1);
-  }
-}
-
-.pulse {
-  animation-name: pulse;
-  animation-timing-function: ease-in-out;
-}

node_modules/_animate.css@4.1.1@animate.css/source/attention_seekers/rubberBand.css

@@ -1,33 +0,0 @@
-@keyframes rubberBand {
-  from {
-    transform: scale3d(1, 1, 1);
-  }
-
-  30% {
-    transform: scale3d(1.25, 0.75, 1);
-  }
-
-  40% {
-    transform: scale3d(0.75, 1.25, 1);
-  }
-
-  50% {
-    transform: scale3d(1.15, 0.85, 1);
-  }
-
-  65% {
-    transform: scale3d(0.95, 1.05, 1);
-  }
-
-  75% {
-    transform: scale3d(1.05, 0.95, 1);
-  }
-
-  to {
-    transform: scale3d(1, 1, 1);
-  }
-}
-
-.rubberBand {
-  animation-name: rubberBand;
-}

node_modules/_animate.css@4.1.1@animate.css/source/attention_seekers/shake.css

@@ -1,25 +0,0 @@
-@keyframes shake {
-  from,
-  to {
-    transform: translate3d(0, 0, 0);
-  }
-
-  10%,
-  30%,
-  50%,
-  70%,
-  90% {
-    transform: translate3d(-10px, 0, 0);
-  }
-
-  20%,
-  40%,
-  60%,
-  80% {
-    transform: translate3d(10px, 0, 0);
-  }
-}
-
-.shake {
-  animation-name: shake;
-}

node_modules/_animate.css@4.1.1@animate.css/source/attention_seekers/shakeX.css

@@ -1,25 +0,0 @@
-@keyframes shakeX {
-  from,
-  to {
-    transform: translate3d(0, 0, 0);
-  }
-
-  10%,
-  30%,
-  50%,
-  70%,
-  90% {
-    transform: translate3d(-10px, 0, 0);
-  }
-
-  20%,
-  40%,
-  60%,
-  80% {
-    transform: translate3d(10px, 0, 0);
-  }
-}
-
-.shakeX {
-  animation-name: shakeX;
-}

node_modules/_animate.css@4.1.1@animate.css/source/attention_seekers/shakeY.css

@@ -1,25 +0,0 @@
-@keyframes shakeY {
-  from,
-  to {
-    transform: translate3d(0, 0, 0);
-  }
-
-  10%,
-  30%,
-  50%,
-  70%,
-  90% {
-    transform: translate3d(0, -10px, 0);
-  }
-
-  20%,
-  40%,
-  60%,
-  80% {
-    transform: translate3d(0, 10px, 0);
-  }
-}
-
-.shakeY {
-  animation-name: shakeY;
-}

node_modules/_animate.css@4.1.1@animate.css/source/attention_seekers/swing.css

@@ -1,26 +0,0 @@
-@keyframes swing {
-  20% {
-    transform: rotate3d(0, 0, 1, 15deg);
-  }
-
-  40% {
-    transform: rotate3d(0, 0, 1, -10deg);
-  }
-
-  60% {
-    transform: rotate3d(0, 0, 1, 5deg);
-  }
-
-  80% {
-    transform: rotate3d(0, 0, 1, -5deg);
-  }
-
-  to {
-    transform: rotate3d(0, 0, 1, 0deg);
-  }
-}
-
-.swing {
-  transform-origin: top center;
-  animation-name: swing;
-}

node_modules/_animate.css@4.1.1@animate.css/source/attention_seekers/tada.css

@@ -1,31 +0,0 @@
-@keyframes tada {
-  from {
-    transform: scale3d(1, 1, 1);
-  }
-
-  10%,
-  20% {
-    transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
-  }
-
-  30%,
-  50%,
-  70%,
-  90% {
-    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
-  }
-
-  40%,
-  60%,
-  80% {
-    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
-  }
-
-  to {
-    transform: scale3d(1, 1, 1);
-  }
-}
-
-.tada {
-  animation-name: tada;
-}

node_modules/_animate.css@4.1.1@animate.css/source/attention_seekers/wobble.css

@@ -1,35 +0,0 @@
-/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
-
-@keyframes wobble {
-  from {
-    transform: translate3d(0, 0, 0);
-  }
-
-  15% {
-    transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
-  }
-
-  30% {
-    transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
-  }
-
-  45% {
-    transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
-  }
-
-  60% {
-    transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
-  }
-
-  75% {
-    transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
-  }
-
-  to {
-    transform: translate3d(0, 0, 0);
-  }
-}
-
-.wobble {
-  animation-name: wobble;
-}

node_modules/_animate.css@4.1.1@animate.css/source/back_entrances/backInDown.css

@@ -1,20 +0,0 @@
-@keyframes backInDown {
-  0% {
-    transform: translateY(-1200px) scale(0.7);
-    opacity: 0.7;
-  }
-
-  80% {
-    transform: translateY(0px) scale(0.7);
-    opacity: 0.7;
-  }
-
-  100% {
-    transform: scale(1);
-    opacity: 1;
-  }
-}
-
-.backInDown {
-  animation-name: backInDown;
-}

node_modules/_animate.css@4.1.1@animate.css/source/back_entrances/backInLeft.css

@@ -1,20 +0,0 @@
-@keyframes backInLeft {
-  0% {
-    transform: translateX(-2000px) scale(0.7);
-    opacity: 0.7;
-  }
-
-  80% {
-    transform: translateX(0px) scale(0.7);
-    opacity: 0.7;
-  }
-
-  100% {
-    transform: scale(1);
-    opacity: 1;
-  }
-}
-
-.backInLeft {
-  animation-name: backInLeft;
-}

node_modules/_animate.css@4.1.1@animate.css/source/back_entrances/backInRight.css

@@ -1,20 +0,0 @@
-@keyframes backInRight {
-  0% {
-    transform: translateX(2000px) scale(0.7);
-    opacity: 0.7;
-  }
-
-  80% {
-    transform: translateX(0px) scale(0.7);
-    opacity: 0.7;
-  }
-
-  100% {
-    transform: scale(1);
-    opacity: 1;
-  }
-}
-
-.backInRight {
-  animation-name: backInRight;
-}

node_modules/_animate.css@4.1.1@animate.css/source/back_entrances/backInUp.css

@@ -1,20 +0,0 @@
-@keyframes backInUp {
-  0% {
-    transform: translateY(1200px) scale(0.7);
-    opacity: 0.7;
-  }
-
-  80% {
-    transform: translateY(0px) scale(0.7);
-    opacity: 0.7;
-  }
-
-  100% {
-    transform: scale(1);
-    opacity: 1;
-  }
-}
-
-.backInUp {
-  animation-name: backInUp;
-}

node_modules/_animate.css@4.1.1@animate.css/source/back_exits/backOutDown.css

@@ -1,20 +0,0 @@
-@keyframes backOutDown {
-  0% {
-    transform: scale(1);
-    opacity: 1;
-  }
-
-  20% {
-    transform: translateY(0px) scale(0.7);
-    opacity: 0.7;
-  }
-
-  100% {
-    transform: translateY(700px) scale(0.7);
-    opacity: 0.7;
-  }
-}
-
-.backOutDown {
-  animation-name: backOutDown;
-}

node_modules/_animate.css@4.1.1@animate.css/source/back_exits/backOutLeft.css

@@ -1,20 +0,0 @@
-@keyframes backOutLeft {
-  0% {
-    transform: scale(1);
-    opacity: 1;
-  }
-
-  20% {
-    transform: translateX(0px) scale(0.7);
-    opacity: 0.7;
-  }
-
-  100% {
-    transform: translateX(-2000px) scale(0.7);
-    opacity: 0.7;
-  }
-}
-
-.backOutLeft {
-  animation-name: backOutLeft;
-}

node_modules/_animate.css@4.1.1@animate.css/source/back_exits/backOutRight.css

@@ -1,20 +0,0 @@
-@keyframes backOutRight {
-  0% {
-    transform: scale(1);
-    opacity: 1;
-  }
-
-  20% {
-    transform: translateX(0px) scale(0.7);
-    opacity: 0.7;
-  }
-
-  100% {
-    transform: translateX(2000px) scale(0.7);
-    opacity: 0.7;
-  }
-}
-
-.backOutRight {
-  animation-name: backOutRight;
-}

node_modules/_animate.css@4.1.1@animate.css/source/back_exits/backOutUp.css

@@ -1,20 +0,0 @@
-@keyframes backOutUp {
-  0% {
-    transform: scale(1);
-    opacity: 1;
-  }
-
-  20% {
-    transform: translateY(0px) scale(0.7);
-    opacity: 0.7;
-  }
-
-  100% {
-    transform: translateY(-700px) scale(0.7);
-    opacity: 0.7;
-  }
-}
-
-.backOutUp {
-  animation-name: backOutUp;
-}

node_modules/_animate.css@4.1.1@animate.css/source/bouncing_entrances/bounceIn.css

@@ -1,42 +0,0 @@
-@keyframes bounceIn {
-  from,
-  20%,
-  40%,
-  60%,
-  80%,
-  to {
-    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
-  }
-
-  0% {
-    opacity: 0;
-    transform: scale3d(0.3, 0.3, 0.3);
-  }
-
-  20% {
-    transform: scale3d(1.1, 1.1, 1.1);
-  }
-
-  40% {
-    transform: scale3d(0.9, 0.9, 0.9);
-  }
-
-  60% {
-    opacity: 1;
-    transform: scale3d(1.03, 1.03, 1.03);
-  }
-
-  80% {
-    transform: scale3d(0.97, 0.97, 0.97);
-  }
-
-  to {
-    opacity: 1;
-    transform: scale3d(1, 1, 1);
-  }
-}
-
-.bounceIn {
-  animation-duration: calc(var(--animate-duration) * 0.75);
-  animation-name: bounceIn;
-}

node_modules/_animate.css@4.1.1@animate.css/source/bouncing_entrances/bounceInDown.css

@@ -1,35 +0,0 @@
-@keyframes bounceInDown {
-  from,
-  60%,
-  75%,
-  90%,
-  to {
-    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
-  }
-
-  0% {
-    opacity: 0;
-    transform: translate3d(0, -3000px, 0) scaleY(3);
-  }
-
-  60% {
-    opacity: 1;
-    transform: translate3d(0, 25px, 0) scaleY(0.9);
-  }
-
-  75% {
-    transform: translate3d(0, -10px, 0) scaleY(0.95);
-  }
-
-  90% {
-    transform: translate3d(0, 5px, 0) scaleY(0.985);
-  }
-
-  to {
-    transform: translate3d(0, 0, 0);
-  }
-}
-
-.bounceInDown {
-  animation-name: bounceInDown;
-}

node_modules/_animate.css@4.1.1@animate.css/source/bouncing_entrances/bounceInLeft.css

@@ -1,35 +0,0 @@
-@keyframes bounceInLeft {
-  from,
-  60%,
-  75%,
-  90%,
-  to {
-    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
-  }
-
-  0% {
-    opacity: 0;
-    transform: translate3d(-3000px, 0, 0) scaleX(3);
-  }
-
-  60% {
-    opacity: 1;
-    transform: translate3d(25px, 0, 0) scaleX(1);
-  }
-
-  75% {
-    transform: translate3d(-10px, 0, 0) scaleX(0.98);
-  }
-
-  90% {
-    transform: translate3d(5px, 0, 0) scaleX(0.995);
-  }
-
-  to {
-    transform: translate3d(0, 0, 0);
-  }
-}
-
-.bounceInLeft {
-  animation-name: bounceInLeft;
-}

node_modules/_animate.css@4.1.1@animate.css/source/bouncing_entrances/bounceInRight.css

@@ -1,35 +0,0 @@
-@keyframes bounceInRight {
-  from,
-  60%,
-  75%,
-  90%,
-  to {
-    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
-  }
-
-  from {
-    opacity: 0;
-    transform: translate3d(3000px, 0, 0) scaleX(3);
-  }
-
-  60% {
-    opacity: 1;
-    transform: translate3d(-25px, 0, 0) scaleX(1);
-  }
-
-  75% {
-    transform: translate3d(10px, 0, 0) scaleX(0.98);
-  }
-
-  90% {
-    transform: translate3d(-5px, 0, 0) scaleX(0.995);
-  }
-
-  to {
-    transform: translate3d(0, 0, 0);
-  }
-}
-
-.bounceInRight {
-  animation-name: bounceInRight;
-}

node_modules/_animate.css@4.1.1@animate.css/source/bouncing_entrances/bounceInUp.css

@@ -1,35 +0,0 @@
-@keyframes bounceInUp {
-  from,
-  60%,
-  75%,
-  90%,
-  to {
-    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
-  }
-
-  from {
-    opacity: 0;
-    transform: translate3d(0, 3000px, 0) scaleY(5);
-  }
-
-  60% {
-    opacity: 1;
-    transform: translate3d(0, -20px, 0) scaleY(0.9);
-  }
-
-  75% {
-    transform: translate3d(0, 10px, 0) scaleY(0.95);
-  }
-
-  90% {
-    transform: translate3d(0, -5px, 0) scaleY(0.985);
-  }
-
-  to {
-    transform: translate3d(0, 0, 0);
-  }
-}
-
-.bounceInUp {
-  animation-name: bounceInUp;
-}

node_modules/_animate.css@4.1.1@animate.css/source/bouncing_exits/bounceOut.css

@@ -1,21 +0,0 @@
-@keyframes bounceOut {
-  20% {
-    transform: scale3d(0.9, 0.9, 0.9);
-  }
-
-  50%,
-  55% {
-    opacity: 1;
-    transform: scale3d(1.1, 1.1, 1.1);
-  }
-
-  to {
-    opacity: 0;
-    transform: scale3d(0.3, 0.3, 0.3);
-  }
-}
-
-.bounceOut {
-  animation-duration: calc(var(--animate-duration) * 0.75);
-  animation-name: bounceOut;
-}

node_modules/_animate.css@4.1.1@animate.css/source/bouncing_exits/bounceOutDown.css

@@ -1,20 +0,0 @@
-@keyframes bounceOutDown {
-  20% {
-    transform: translate3d(0, 10px, 0) scaleY(0.985);
-  }
-
-  40%,
-  45% {
-    opacity: 1;
-    transform: translate3d(0, -20px, 0) scaleY(0.9);
-  }
-
-  to {
-    opacity: 0;
-    transform: translate3d(0, 2000px, 0) scaleY(3);
-  }
-}
-
-.bounceOutDown {
-  animation-name: bounceOutDown;
-}

node_modules/_animate.css@4.1.1@animate.css/source/bouncing_exits/bounceOutLeft.css

@@ -1,15 +0,0 @@
-@keyframes bounceOutLeft {
-  20% {
-    opacity: 1;
-    transform: translate3d(20px, 0, 0) scaleX(0.9);
-  }
-
-  to {
-    opacity: 0;
-    transform: translate3d(-2000px, 0, 0) scaleX(2);
-  }
-}
-
-.bounceOutLeft {
-  animation-name: bounceOutLeft;
-}

node_modules/_animate.css@4.1.1@animate.css/source/bouncing_exits/bounceOutRight.css

@@ -1,15 +0,0 @@
-@keyframes bounceOutRight {
-  20% {
-    opacity: 1;
-    transform: translate3d(-20px, 0, 0) scaleX(0.9);
-  }
-
-  to {
-    opacity: 0;
-    transform: translate3d(2000px, 0, 0) scaleX(2);
-  }
-}
-
-.bounceOutRight {
-  animation-name: bounceOutRight;
-}

node_modules/_animate.css@4.1.1@animate.css/source/bouncing_exits/bounceOutUp.css

@@ -1,20 +0,0 @@
-@keyframes bounceOutUp {
-  20% {
-    transform: translate3d(0, -10px, 0) scaleY(0.985);
-  }
-
-  40%,
-  45% {
-    opacity: 1;
-    transform: translate3d(0, 20px, 0) scaleY(0.9);
-  }
-
-  to {
-    opacity: 0;
-    transform: translate3d(0, -2000px, 0) scaleY(3);
-  }
-}
-
-.bounceOutUp {
-  animation-name: bounceOutUp;
-}

node_modules/_animate.css@4.1.1@animate.css/source/fading_entrances/fadeIn.css

@@ -1,13 +0,0 @@
-@keyframes fadeIn {
-  from {
-    opacity: 0;
-  }
-
-  to {
-    opacity: 1;
-  }
-}
-
-.fadeIn {
-  animation-name: fadeIn;
-}

node_modules/_animate.css@4.1.1@animate.css/source/fading_entrances/fadeInBottomLeft.css

@@ -1,14 +0,0 @@
-@keyframes fadeInBottomLeft {
-  from {
-    opacity: 0;
-    transform: translate3d(-100%, 100%, 0);
-  }
-  to {
-    opacity: 1;
-    transform: translate3d(0, 0, 0);
-  }
-}
-
-.fadeInBottomLeft {
-  animation-name: fadeInBottomLeft;
-}

node_modules/_animate.css@4.1.1@animate.css/source/fading_entrances/fadeInBottomRight.css

@@ -1,14 +0,0 @@
-@keyframes fadeInBottomRight {
-  from {
-    opacity: 0;
-    transform: translate3d(100%, 100%, 0);
-  }
-  to {
-    opacity: 1;
-    transform: translate3d(0, 0, 0);
-  }
-}
-
-.fadeInBottomRight {
-  animation-name: fadeInBottomRight;
-}

node_modules/_animate.css@4.1.1@animate.css/source/fading_entrances/fadeInDown.css

@@ -1,15 +0,0 @@
-@keyframes fadeInDown {
-  from {
-    opacity: 0;
-    transform: translate3d(0, -100%, 0);
-  }
-
-  to {
-    opacity: 1;
-    transform: translate3d(0, 0, 0);
-  }
-}
-
-.fadeInDown {
-  animation-name: fadeInDown;
-}

node_modules/_animate.css@4.1.1@animate.css/source/fading_entrances/fadeInDownBig.css

@@ -1,15 +0,0 @@
-@keyframes fadeInDownBig {
-  from {
-    opacity: 0;
-    transform: translate3d(0, -2000px, 0);
-  }
-
-  to {
-    opacity: 1;
-    transform: translate3d(0, 0, 0);
-  }
-}
-
-.fadeInDownBig {
-  animation-name: fadeInDownBig;
-}

node_modules/_animate.css@4.1.1@animate.css/source/fading_entrances/fadeInLeft.css

@@ -1,15 +0,0 @@
-@keyframes fadeInLeft {
-  from {
-    opacity: 0;
-    transform: translate3d(-100%, 0, 0);
-  }
-
-  to {
-    opacity: 1;
-    transform: translate3d(0, 0, 0);
-  }
-}
-
-.fadeInLeft {
-  animation-name: fadeInLeft;
-}

node_modules/_animate.css@4.1.1@animate.css/source/fading_entrances/fadeInLeftBig.css

@@ -1,15 +0,0 @@
-@keyframes fadeInLeftBig {
-  from {
-    opacity: 0;
-    transform: translate3d(-2000px, 0, 0);
-  }
-
-  to {
-    opacity: 1;
-    transform: translate3d(0, 0, 0);
-  }
-}
-
-.fadeInLeftBig {
-  animation-name: fadeInLeftBig;
-}

node_modules/_animate.css@4.1.1@animate.css/source/fading_entrances/fadeInRight.css

@@ -1,15 +0,0 @@
-@keyframes fadeInRight {
-  from {
-    opacity: 0;
-    transform: translate3d(100%, 0, 0);
-  }
-
-  to {
-    opacity: 1;
-    transform: translate3d(0, 0, 0);
-  }
-}
-
-.fadeInRight {
-  animation-name: fadeInRight;
-}

node_modules/_animate.css@4.1.1@animate.css/source/fading_entrances/fadeInRightBig.css

@@ -1,15 +0,0 @@
-@keyframes fadeInRightBig {
-  from {
-    opacity: 0;
-    transform: translate3d(2000px, 0, 0);
-  }
-
-  to {
-    opacity: 1;
-    transform: translate3d(0, 0, 0);
-  }
-}
-
-.fadeInRightBig {
-  animation-name: fadeInRightBig;
-}

node_modules/_animate.css@4.1.1@animate.css/source/fading_entrances/fadeInTopLeft.css

@@ -1,14 +0,0 @@
-@keyframes fadeInTopLeft {
-  from {
-    opacity: 0;
-    transform: translate3d(-100%, -100%, 0);
-  }
-  to {
-    opacity: 1;
-    transform: translate3d(0, 0, 0);
-  }
-}
-
-.fadeInTopLeft {
-  animation-name: fadeInTopLeft;
-}

node_modules/_animate.css@4.1.1@animate.css/source/fading_entrances/fadeInTopRight.css

@@ -1,14 +0,0 @@
-@keyframes fadeInTopRight {
-  from {
-    opacity: 0;
-    transform: translate3d(100%, -100%, 0);
-  }
-  to {
-    opacity: 1;
-    transform: translate3d(0, 0, 0);
-  }
-}
-
-.fadeInTopRight {
-  animation-name: fadeInTopRight;
-}