build/webpack.base.conf.js

@@ -36,7 +36,8 @@ module.exports = {
     extensions: [".js", ".vue", ".json"],
     alias: {
       vue$: "vue/dist/vue.esm.js",
-      "@": resolve("src")
+      "@": resolve("src"),
+      "#": resolve("config") //新增用#代替config文件夹
     }
   },
   module: {

config/index.js

@@ -34,22 +34,31 @@ module.exports = {
       '/api': {
         // target: 'http://10.6.0.26:81',
         // target: 'http://175.27.191.156:11000/api/',
-        // target: 'http://175.27.191.156:8181/',
-        target: 'http://192.168.1.102:81/', //现场
+        target: 'http://175.27.191.156:8181/',
+        // target: 'http://192.168.131.101:12345/', //现场
         
         changeOrigin: true,
         pathRewrite: {
           '^/api': ''
         }
       },
+      // '/live':{
+      //   target: 'http://192.168.131.101:8080/live', //现场
+      //   changeOrigin: true,
+      //   pathRewrite: {
+      //     '^/live': ''
+      //   }
+      // },
       '/v3': { //代理的名字
-        target: 'http://221.226.177.198:14023/v3/', 
+        // target: 'http://221.226.177.198:14023/v3/', 
+        target: 'https://restapi.amap.com/v3/', 
         changeOrigin: true,
         pathRewrite:{
             '^/v3':'',
         }
     }
     //   '/api': { //代理的名字
+    
     //     target: 'http://220.163.114.158:5001/', 
     //     changeOrigin: true,
     //     pathRewrite:{

npminstall-debug.log

@@ -1,21 +1,13 @@
 {
-  root: 'F:\\lixiaobang\\qiuwang_9_19\\qiuwang_9_19',
+  root: 'F:\\lixiaobang\\qiuwang_10_28',
   registry: 'https://registry.npmmirror.com',
-  pkgs: [
-    {
-      name: '',
-      version: 'uuid/v4',
-      type: 'git',
-      alias: undefined,
-      arg: [Result]
-    }
-  ],
+  pkgs: [],
   production: false,
   cacheStrict: false,
   cacheDir: 'C:\\Users\\Administrator\\.npminstall_tarball',
   env: {
     npm_config_registry: 'https://registry.npmmirror.com',
-    npm_config_argv: '{"remain":[],"cooked":["--fix-bug-versions","--china","--userconfig=C:\\\\Users\\\\Administrator\\\\.cnpmrc","--disturl=https://cdn.npmmirror.com/binaries/node","--registry=https://registry.npmmirror.com","--save","uuid/v4"],"original":["--fix-bug-versions","--china","--userconfig=C:\\\\Users\\\\Administrator\\\\.cnpmrc","--disturl=https://cdn.npmmirror.com/binaries/node","--registry=https://registry.npmmirror.com","--save","uuid/v4"]}',
+    npm_config_argv: '{"remain":[],"cooked":["--fix-bug-versions","--china","--userconfig=C:\\\\Users\\\\Administrator\\\\.cnpmrc","--disturl=https://cdn.npmmirror.com/binaries/node","--registry=https://registry.npmmirror.com"],"original":["--fix-bug-versions","--china","--userconfig=C:\\\\Users\\\\Administrator\\\\.cnpmrc","--disturl=https://cdn.npmmirror.com/binaries/node","--registry=https://registry.npmmirror.com"]}',
     npm_config_user_agent: 'npminstall/7.10.0 npm/? node/v16.16.0 win32 x64',
     npm_config_cache: 'C:\\Users\\Administrator\\.npminstall_tarball',
     NODE: 'D:\\node\\node.exe',
@@ -49,8 +41,8 @@
     npm_config_sharp_binary_host: 'https://cdn.npmmirror.com/binaries/sharp',
     npm_config_sharp_libvips_binary_host: 'https://cdn.npmmirror.com/binaries/sharp-libvips',
     npm_config_robotjs_binary_host: 'https://cdn.npmmirror.com/binaries/robotjs',
-    npm_rootpath: 'F:\\lixiaobang\\qiuwang_9_19\\qiuwang_9_19',
-    INIT_CWD: 'F:\\lixiaobang\\qiuwang_9_19\\qiuwang_9_19'
+    npm_rootpath: 'F:\\lixiaobang\\qiuwang_10_28',
+    INIT_CWD: 'F:\\lixiaobang\\qiuwang_10_28'
   },
   binaryMirrors: {
     ENVS: {
@@ -185,7 +177,7 @@
   disableFallbackStore: false,
   workspacesMap: Map(0) {},
   enableWorkspace: false,
-  workspaceRoot: 'F:\\lixiaobang\\qiuwang_9_19\\qiuwang_9_19',
+  workspaceRoot: 'F:\\lixiaobang\\qiuwang_10_28',
   isWorkspaceRoot: true,
   isWorkspacePackage: false,
   offline: false,

src/api/api.js

@@ -45,6 +45,8 @@ export const getProjectInfo = (params) => {
 };
 //人员信息监控接口
 export const getUserMonitorInfo = (params) => {
+   let access_token = JSON.parse(sessionStorage.getItem("token"))
+   axios.defaults.headers.common['Blade-Auth'] =  access_token;
   return axios.get('api/ems-third-party-service/user/monitor',{
   params,
   }
@@ -52,132 +54,176 @@ export const getUserMonitorInfo = (params) => {
 };
 //项目人员分组信息接口
 export const getUserGroup = (params) => {
+   let access_token = JSON.parse(sessionStorage.getItem("token"))
+   axios.defaults.headers.common['Blade-Auth'] =  access_token;
   return axios.get('api/ems-third-party-service/user/group',
   {params},
    )
 };
 //项目进度接口
 export const getProjectStatus = (params) => {
+   let access_token = JSON.parse(sessionStorage.getItem("token"))
+   axios.defaults.headers.common['Blade-Auth'] =  access_token;
   return axios.get('api/ems-third-party-service/project/projectStatus',
   {params},
    )
 };
 //安全检查统计
 export const getProjectCheckCensus = (params) => {
+   let access_token = JSON.parse(sessionStorage.getItem("token"))
+   axios.defaults.headers.common['Blade-Auth'] =  access_token;
   return axios.get('api/ems-third-party-service/project/checkCensus',
   {params},
    )
 };
 //安全检查跟踪
 export const getProjectCheckInfo = (params) => {
+   let access_token = JSON.parse(sessionStorage.getItem("token"))
+   axios.defaults.headers.common['Blade-Auth'] =  access_token;
   return axios.get('api/ems-third-party-service/project/checkInfo',
   {params},
    )
 };
 //工程工期
 export const getProjectDuration = (params) => {
+   let access_token = JSON.parse(sessionStorage.getItem("token"))
+   axios.defaults.headers.common['Blade-Auth'] =  access_token;
   return axios.get('api/ems-third-party-service/project/projectDuration',
   {params},
    )
 };
 //投资进度
 export const getProjectInvestment = (params) => {
+   let access_token = JSON.parse(sessionStorage.getItem("token"))
+   axios.defaults.headers.common['Blade-Auth'] =  access_token;
   return axios.get('api/ems-third-party-service/project/projectInvestment',
   {params},
    )
 };
 //计划进度
 export const getPlanProgress = (params) => {
+   let access_token = JSON.parse(sessionStorage.getItem("token"))
+   axios.defaults.headers.common['Blade-Auth'] =  access_token;
   return axios.get('api/ems-third-party-service/project/planProgress',
   {params},
    )
 };
 //实时进度
 export const getActualProgress = (params) => {
+   let access_token = JSON.parse(sessionStorage.getItem("token"))
+   axios.defaults.headers.common['Blade-Auth'] =  access_token;
   return axios.get('api/ems-third-party-service/project/actualProgress',
   {params},
    )
 };
 //本月任务完成情况
 export const getCompleteMonthStatus = (params) => {
+   let access_token = JSON.parse(sessionStorage.getItem("token"))
+   axios.defaults.headers.common['Blade-Auth'] =  access_token;
   return axios.get('api/ems-third-party-service/project/completeMonthStatus',
   {params},
    )
 };
 //视频监控
 export const getIsImportant = (params) => {
+   let access_token = JSON.parse(sessionStorage.getItem("token"))
+   axios.defaults.headers.common['Blade-Auth'] =  access_token;
   return axios.get('api/ems-third-party-service/camera/isImportant',
   {params},
    )
 };
 //获取所有监控接口 
 export const getAllCamera = (params) => {
+   let access_token = JSON.parse(sessionStorage.getItem("token"))
+   axios.defaults.headers.common['Blade-Auth'] =  access_token;
   return axios.get('api/ems-third-party-service/camera/all/get',
   {params},
    )
 };
 //获取所有监控接口列表 
 export const getAllCameraList = (params) => {
+   let access_token = JSON.parse(sessionStorage.getItem("token"))
+   axios.defaults.headers.common['Blade-Auth'] =  access_token;
   return axios.get('api/ems-third-party-service/camera/all/get',
   {params},
    )
 };
 //获取摄像头数量接口
 export const getCameraCount = (params) => {
+   let access_token = JSON.parse(sessionStorage.getItem("token"))
+   axios.defaults.headers.common['Blade-Auth'] =  access_token;
   return axios.get('api/ems-third-party-service/camera/count',
   {params},
    )
 };
 //获取摄像头历史监控
 export const getCameraHistory = (params) => {
+   let access_token = JSON.parse(sessionStorage.getItem("token"))
+   axios.defaults.headers.common['Blade-Auth'] =  access_token;
   return axios.get('api/ems-third-party-service/camera/history',
   {params},
    )
 };
 //安全检查统计
 export const getCheckTotalCensus = (params) => {
+   let access_token = JSON.parse(sessionStorage.getItem("token"))
+   axios.defaults.headers.common['Blade-Auth'] =  access_token;
   return axios.get('api/ems-third-party-service/project/checkTotalCensus',
   {params},
    )
 };
 //检查次数统计
 export const getCheckTimesCensus = (params) => {
+   let access_token = JSON.parse(sessionStorage.getItem("token"))
+   axios.defaults.headers.common['Blade-Auth'] =  access_token;
   return axios.get('api/ems-third-party-service/project/checkTimesCensus',
   {params},
    )
 };
 //隐患检查统计
 export const getResolveTroubleCensus = (params) => {
+   let access_token = JSON.parse(sessionStorage.getItem("token"))
+   axios.defaults.headers.common['Blade-Auth'] =  access_token;
   return axios.get('api/ems-third-party-service/project/resolveTroubleCensus',
   {params},
    )
 };
 // //高频问题项
 export const getMostTroubleCensus = (params) => {
+   let access_token = JSON.parse(sessionStorage.getItem("token"))
+   axios.defaults.headers.common['Blade-Auth'] =  access_token;
   return axios.get('api/ems-third-party-service/project/mostTroubleCensus',
   {params},
    )
 };
 //安全告警统计
 export const getWarnSurveillance = (params) => {
+   let access_token = JSON.parse(sessionStorage.getItem("token"))
+   axios.defaults.headers.common['Blade-Auth'] =  access_token;
   return axios.get('api/ems-third-party-service/project/warnSurveillance',
   {params},
    )
 };
 //隐患整改记录
 export const getResolveTroublePage = (params) => {
+   let access_token = JSON.parse(sessionStorage.getItem("token"))
+   axios.defaults.headers.common['Blade-Auth'] =  access_token;
   return axios.get('api/ems-third-party-service/project/resolveTroublePage',
   {params},
    )
 };
 //告警详情
 export const getAlarmDetails = (params) => {
+   let access_token = JSON.parse(sessionStorage.getItem("token"))
+   axios.defaults.headers.common['Blade-Auth'] =  access_token;
     return axios.get('api/ems-third-party-service/ems-third-party-service/warn/list',
     {params},
      )
   };
   //当日现场人员
   export const getAttendanceHistory = (params) => {
+   let access_token = JSON.parse(sessionStorage.getItem("token"))
+   axios.defaults.headers.common['Blade-Auth'] =  access_token;
     return axios.get('api/ems-third-party-service/3d-modeling/attendanceHistory',
     {params},
      )
@@ -185,12 +231,16 @@ export const getAlarmDetails = (params) => {
   //当日环境传感器监测
   
   export const getSensorHistory = (params) => {
+   let access_token = JSON.parse(sessionStorage.getItem("token"))
+   axios.defaults.headers.common['Blade-Auth'] =  access_token;
     return axios.get('api/ems-third-party-service/3d-modeling/sensor-history',
     {params},
      )
   };
   //当日环境告警事件
   export const getEnvironmentWarnHistory = (params) => {
+   let access_token = JSON.parse(sessionStorage.getItem("token"))
+   axios.defaults.headers.common['Blade-Auth'] =  access_token;
     return axios.get('api/ems-third-party-service/3d-modeling/warn-history',
     {params},
      )
@@ -198,13 +248,32 @@ export const getAlarmDetails = (params) => {
   //当地工地安全事件
  
   export const getwarnHistorySite = (params) => {
+   let access_token = JSON.parse(sessionStorage.getItem("token"))
+   axios.defaults.headers.common['Blade-Auth'] =  access_token;
     return axios.get('api/ems-third-party-service/3d-modeling/warn-history-site',
     {params},
      )
   };
 //  获取常规巡检信息
 export const getInspectionDetails = (params) =>{
+   let access_token = JSON.parse(sessionStorage.getItem("token"))
+   axios.defaults.headers.common['Blade-Auth'] =  access_token;
    return axios.get('api/ems-third-party-service/inspection/getInspectionDetails',
     {params},
      )
 }
+//获取环境监测的上下阈值
+export const getDeviceInfo = (params) =>{
+   let access_token = JSON.parse(sessionStorage.getItem("token"))
+   axios.defaults.headers.common['Blade-Auth'] =  access_token;
+   return axios.get('api/ems-third-party-service/device/sensor/deviceInfo',
+    {params},
+     )
+}
+//调用现场播报接口
+export const getPlayStatus = () =>{
+   let access_token = JSON.parse(sessionStorage.getItem("token"))
+   axios.defaults.headers.common['Blade-Auth'] =  access_token;
+   return axios.get('api/ems-third-party-service/3d-modeling/playStatus'
+     )
+}

src/components/common/LineChartBottomMiddel.vue

@@ -11,13 +11,13 @@
   </div>
 </template>
 <script>
-import Chart from '../chart.vue'
-const MAX_LABEL = 8
+import Chart from "../chart.vue";
+const MAX_LABEL = 8;
 export default {
   props: {
     className: {
       type: String,
-      default: ''
+      default: "",
     },
     // 父组件传递过来的图表数据
     // chartData: {
@@ -27,47 +27,55 @@ export default {
     colorArray: {
       type: Array,
       default: () => {
-        return ['#84F5DE', '#56E8F2', '#4CC5F8']
-      }
+        return ["#84F5DE", "#56E8F2", "#4CC5F8"];
+      },
     },
     yAxisName: {
       type: String,
-      default: ''
+      default: "",
     },
     // x轴数据
     xAxisData: {
       type: Array,
       default: () => {
-        return []
-      }
+        return [];
+      },
     },
     tooltipFormatter: {
       type: Function | String,
-      default: null
+      default: null,
     },
     yAxisPosition: {
       type: String,
-      default: 'left'
+      default: "left",
     },
     yAxisPadding: {
       type: Array,
-      default: null
+      default: null,
+    },
+    checkCountList: {
+      type: Array,
+      default: null,
+    },
+    upData: {
+      type: String,
+      default: "100",
+    },
+    downData: {
+      type: String,
+      default: "0",
     },
-    checkCountList:{
-      type:Array,
-      default:null
-    }
   },
 
   components: {
-    Chart
+    Chart,
   },
 
-  data () {
+  data() {
     return {
-      tipStyle: { visibility: 'hidden', position: 'absolute', top: 0, left: 0 },
-      tipContent: ''
-    }
+      tipStyle: { visibility: "hidden", position: "absolute", top: 0, left: 0 },
+      tipContent: "",
+    };
   },
 
   watch: {
@@ -78,210 +86,306 @@ export default {
     //     this.resetOption()
     //   }
     // },
-    checkCountList:{
+    checkCountList: {
       deep: true,
-      handler (newVal) {
-        this.resetOption()
-      }
-    }
+      handler(newVal) {
+        this.resetOption();
+      },
+    },
+    upData: {
+      handler(old, newVla) {},
+    },
+    downData: {
+      handler(oldVla, newVla) {},
+    },
   },
 
   computed: {
-    colorStops () {
+    colorStops() {
       if (!this.colorArray || this.colorArray.length < 2) {
         return [
-          { offset: 0, color: '#84F5DE' },
-          { offset: 0.5, color: '#56E8F2' },
-          { offset: 1, color: '#4CC5F8' }
-        ]
+          { offset: 0, color: "#84F5DE" },
+          { offset: 0.5, color: "#56E8F2" },
+          { offset: 1, color: "#4CC5F8" },
+        ];
       } else {
-        const colorNum = this.colorArray.length
-        const step = (1 / (colorNum - 1)).toFixed(2)
-        const colors = []
+        const colorNum = this.colorArray.length;
+        const step = (1 / (colorNum - 1)).toFixed(2);
+        const colors = [];
         this.colorArray.forEach((color, index) => {
           if (index < colorNum - 1) {
-            colors.push({ offset: step * index, color: color })
+            colors.push({ offset: step * index, color: color });
           } else {
-            colors.push({ offset: 1, color: color })
+            colors.push({ offset: 1, color: color });
           }
-        })
-        return colors
+        });
+        return colors;
       }
     },
-    option () {
-        let dataX = [] //X轴
-        let dataY = [] //Y轴
-        this.checkCountList.forEach((item,index) => {
-          dataX.push(item.time)
-          dataY.push(item.value)
-        });
-      const self = this
+    option() {
+      let dataX = []; //X轴
+      let dataY = []; //Y轴
+      this.checkCountList.forEach((item, index) => {
+        dataX.push(item.time);
+        dataY.push(item.value);
+      });
+      // dataY = dataY.slice(-100)
+      var dataLength = dataY.length;
+      const self = this;
       return {
         tooltip: {
-        trigger: "axis",
-           backgroundColor:'rgba(30, 97, 94, 0.9)',
-        axisPointer: {
+          trigger: "axis",
+          backgroundColor: "rgba(30, 97, 94, 0.9)",
+          axisPointer: {
             type: "shadow",
             label: {
-                show: false
-            }
+              show: false,
+            },
+          },
+          position: function (point, params, dom, rect, size) {
+            return [point[0] - 50, "10%"]; //返回x、y（横向、纵向）两个点的位置
+          },
         },
-         position: function (point, params, dom, rect, size) {
-           return [point[0] - 50, '10%']  //返回x、y（横向、纵向）两个点的位置
-       }
-    },
         grid: {
-          top: '54',
-          left: '26',
-          right: '25',
-          bottom: '34',
-          containLabel: true
+          top: "20",
+          left: "35",
+          right: "25",
+          bottom: "34",
+          // containLabel: true,
         },
 
         xAxis: {
-
           axisLine: {
             // x轴线的颜色以及宽度
             show: false,
             lineStyle: {
-              color: '#ffff',
-              height: 0
-            }
+              color: "#ffff",
+              height: 0,
+            },
           },
           axisTick: {
-            show: false
+            show: false,
           },
           axisLabel: {
             show: false,
-            //interval: 0, // 横轴信息全部显示
+            // interval: 0, // 横轴信息全部显示
             margin: 6, // 刻度标签与轴线之间的距离
-            align: 'center',
+            align: "center",
             fontSize: 12, // 横轴字体大小
-            color: '#D5FFFC', // 颜色
+            color: "#D5FFFC", // 颜色
             formatter: function (params) {
               if (params.length > MAX_LABEL) {
-                return params.substr(0, MAX_LABEL - 1) + '...'
+                return params.substr(0, MAX_LABEL - 1) + "...";
               } else {
-                return params
+                return params;
               }
-            }
+            },
           },
           triggerEvent: true,
-          type: 'category',
-          data: dataX
+          type: "category",
+          data: dataX,
         },
         yAxis: {
-          name: '',
-          type: 'value',
-          position: this.yAxisPosition || null,
+          name: "",
+          type: "value",
+          // position: this.yAxisPosition || null,
           nameTextStyle: {
-            color: '#64D5CD',
+            color: "#64D5CD",
             padding: this.yAxisPadding || [0, 38, -1, 0],
             fontSize: 12,
-            opacity: 0.5
+            opacity: 0.5,
           },
-           minInterval:10,
+          minInterval: 10,
+          min: this.downData / 3,
+          max: this.upData * 1.8, // 根据你的需求设置最大值
+          position: "50%", // 将 y 轴放在中间位置
 
           axisLine: {
             show: true,
             lineStyle: {
-                // color: 'white'
-                //  color:'#76E679',
-                // color:'#00e8e3',
-                 color:'rgba(96, 213, 205, 0.4)',
-            }
-        },
+              // color: 'white'
+              //  color:'#76E679',
+              // color:'#00e8e3',
+              color: "rgba(255, 255, 255, 0.4)",
+            },
+          },
           splitLine: {
             // 分割线配置
             show: false,
             lineStyle: {
-              color: '#078DF0',
-              opacity: 0.3
-            }
+              color: "#078DF0",
+              opacity: 0.3,
+            },
           },
 
           axisTick: {
-            show: false
+            show: false,
           },
-           axisLabel: {
-            color: '#D5FFFC',
+          axisLabel: {
+            color: "#D5FFFC",
             fontSize: 14,
             opacity: 0.5,
-             show: false,
+            show: false,
           },
         },
         series: [
           {
-            name:'监测值',
+            name: "监测值",
             data: dataY,
+            // label: {
+            // // 在更新数据时显示最后一个值的标签
+            // show: true,
+            // position: 'top', // 标签位置，可以根据需要调整
+            //  formatter: '{c}'
+            // },
             // color:'#76E679',
-            color:'#00e8e3',
+            color: "rgb(25,198,52)",
             //   color:'rgba(96, 213, 205, 0.4)',
-            type: 'line',
-        smooth: true,
-        symbol: 'circle',
-        symbolSize: 5,
-        showSymbol: false,
-        lineStyle: {
-            normal: {
-                width: 1,
-
-            }
-        },
-        //  label: {
-        //         show: true,
-        //         position: 'start',
-        //         fontSize: 12,
-        //     },
-               markLine: {
-            symbol: 'none',
-            label: {
-                show: true,
-                position: 'start',
-                formatter: '{c}',
-                fontSize: 14,
-                fontWeight: 'bold',
-                // padding: [-13, -20, 15, -45],
-            },
+            type: "line",
+            // smooth: true,
+            // symbol: "circle",
+            // showSymbol: true,
+            // symbolSize: 20,
+            // symbol: ["circle", "circle"],
+            // symbolSize: function (dataIndex, params) {
+            //   // 判断是否为最后一个值，是则设置较大的大小，否则默认大小
+            //   return params.dataIndex == dataY.length-1 ? 15 : 8;
+            // },
             lineStyle: {
-                type: 'dotted'
+              normal: {
+                width: 1,
+              },
             },
-            data: [{
-                    yAxis: 18.5,
-                    lineStyle: {
-                        // color: "#00e8e3"
-                        color:'rgba(96, 213, 205, 0.4)'
-                    },
-                    label: {
-                        // color: "#00e8e3"
-                        color: 'white',
-                        fontWeight: '200',
-                    }
+            markPoint: {
+              name: "最大值",
+              type: "max",
+              label: {
+                show: true,
+                formatter: function (params) {
+                  // 自定义标签内容为数组中的最后一个值
+                  return dataY[dataLength - 1];
                 },
+              },
+              data: [
+                {
+                  coord: [dataLength - 1, dataY[dataLength - 1]],
+                },
+              ],
+            },
+            // effect: {
+            //   show: true,
+            //   period: 6, // 控制动画的速度，单位为帧
+            //   trailLength: 0.7, // 尾迹的长度，取值范围[0,1]
+            //   symbol: "circle", // 特效图形的形状
+            //   symbolSize: 20, // 结束时的大小
+            // },
+            //  label: {
+            //         show: true,
+            //         position: 'start',
+            //         fontSize: 12,
+            //     },
+            markLine: {
+              silent: true,
+              symbol: "none",
+              data: [
+                {
+                  yAxis: this.upData,
+                  lineStyle: {
+                    color: "rgba(255, 255, 255, 0.4)",
+                  },
+                  label: {
+                    color: "red",
+                    fontWeight: "200",
+                    position: "start",
+                    formatter: "{c}",
+                  },
+                },
+                {
+                  yAxis: this.downData,
+                  lineStyle: {
+                    color: "rgba(96, 213, 205, 0.4)",
+                  },
+                  label: {
+                    color: "white",
+                    fontWeight: "200",
+                    position: "start",
+                    formatter: "{c}",
+                  },
+                },
+              ],
+              lineStyle: {
+                normal: {
+                  type: "dotted",
+                },
+              },
+            },
 
-            ]
-        },
+            // markLine: {
+            //   symbol: "none",
+            //   silent: true,
+            //   label: {
+            //     show: true,
+            //     position: "start",
+            //     formatter: "{c}",
+            //     fontSize: 14,
+            //     fontWeight: "bold",
+            //     // padding: [-13, -20, 15, -45],
+            //   },
+            //   lineStyle: {
+            //     type: "dotted",
+            //   },
+            //   data: [
+            //     {
+            //       yAxis: 40,
+            //       lineStyle: {
+            //         // color: "#00e8e3"
+            //         // color: "rgba(96, 213, 205, 0.4)",
+            //         color:"rgba(255, 255, 255, 0.4)"
+            //       },
+            //       label: {
+            //         show:true,
+            //         position:'middle',
+            //         // color: "#00e8e3"
+            //         color: "red",
+            //         fontWeight: "200",
+            //       },
+            //     },
+            //     {
+            //       yAxis: 10,
+            //       lineStyle: {
+            //         // color: "#00e8e3"
+            //         color: "rgba(96, 213, 205, 0.4)",
+            //         // color:"rgba(255, 255, 255, 0.4)"
+            //       },
+            //       label: {
+            //         // color: "#00e8e3"
+            //         color: "white",
+            //         fontWeight: "200",
+            //         show:true,
+            //       },
+            //     },
+            //   ],
+            // },
           },
-        ]
-      }
-    }
+        ],
+      };
+    },
   },
 
   methods: {
-    resetOption () {
-      this.$refs.chart.setOption(this.option)
+    resetOption() {
+      this.$refs.chart.setOption(this.option);
     },
-
-  }
-}
+  },
+};
 </script>
 
 <style scoped>
-.lineBox{
+.lineBox {
   height: 17px;
-    position: absolute;
-    top: 38px;
-    left: 58px;
-    border-left: 1px solid #fff;
+  position: absolute;
+  top: 38px;
+  left: 58px;
+  border-left: 1px solid #fff;
 }
 </style>

src/components/common/carousel.vue

@@ -3,11 +3,9 @@
     <swiper @slideChange="slideChange" :options="swiperOption" ref="mySwiper">
       <!-- <div class="swiper-button-prev" slot="button-prev"></div> -->
       <swiper-slide v-for="(slide, key) in swiperList" :key="key">
-        <div>
           <div class="item_container">
             <img :src="slide.picture" alt="" class="apparatus_logo">
           </div>
-        </div>
       </swiper-slide>
       <!-- <div class="swiper-button-next" slot="button-next"></div> -->
     </swiper>
@@ -73,7 +71,6 @@ export default {
         //   "apparatusImg": require("@/assets/pic/23.png"),
         // },
       ],
-      peopleList:[],
       //轮播图配置项
       swiperOption: {
         initialSlide: 0,
@@ -84,7 +81,7 @@ export default {
         //active图片居中
         centeredSlides: true,
         //开启loop模式：会在原本slide前后复制若干个slide(默认一个)并在合适的时候切换，让Swiper看起来是循环的。
-        loop: true,
+        loop: false,
         //在loop模式下使用slidesPerview:'auto'，还需使用该参数设置所要用到的loop个数(一般设置大于可视slide个数2个即可)。
         //轮播设置
         autoplay: {
@@ -140,6 +137,7 @@ export default {
     peopleList: {
       deep: true,
       handler (val) {
+        console.log(val,'人员考勤图片数据');
         this.$nextTick(() => {
          console.log("val",val)
         //  this.peopleList = val

src/components/common/controlPage.vue

@@ -1,181 +1,200 @@
 <template>
-    <div class="controlPage">
+  <div class="controlPage">
 
-        <div class="closeBtn" @click="closeHandle">
+    <div
+      class="closeBtn"
+      @click="closeHandle"
+    >
 
-        </div>
-        <div class="pageBox">
-            <div class="control-title" style="margin-top: 0;">
-                巡视记录
-            </div>
-            <div class="inspection-records">
-                {{ inspectionList.record }}
-            </div>
-            <div class="control-title">
-                巡视图片
-            </div>
-            <div class="inspection-img">
-                <img v-for="(item, index) in inspectionList.imagesUrl" :src="item" alt="" :key="index"/>
-            </div>
-            <div class="control-title">
-                巡视视频
-            </div>
-            <div class="inspection-video">
-                <video autoplay controls :src="inspectionList.videoUrl"></video>
-                <!-- <iframe ref="videoFlv" src="/static/flv/demo.html" frameborder="0"></iframe> -->
-            </div>
-            <div class="inspection-problems" :key="'problem' + index"
-                v-for="(item, index) in inspectionList.inspectionProblems">
-                <div class="control-title">
-                    问题{{ index + 1 }}描述
-                </div>
-                <div class="control-quesition">
-                    <div class="describe">
-                        <span class="question-icon"></span><span>{{ item.type }}</span>
-                        <span>{{ item.describe }}</span>
-                    </div>
-                </div>
-                <div class="control-title">
-                    巡视图片
-                </div>
-                <div class="inspection-img">
-                    <img v-for="(n, k) in item.pictures" :src="n" alt="" :key="k"/>
-                </div>
-            </div>
-        </div>
     </div>
+    <div class="pageBox">
+      <div
+        class="control-title"
+        style="margin-top: 0;"
+      >
+        巡视记录
+      </div>
+      <div class="inspection-records">
+        {{ inspectionList.record }}
+      </div>
+      <div class="control-title">
+        巡视图片
+      </div>
+      <div class="inspection-img">
+        <img
+          v-for="(item, index) in inspectionList.imagesUrl"
+          :src="item"
+          alt=""
+          :key="index"
+        />
+      </div>
+      <div class="control-title">
+        巡视视频
+      </div>
+      <div class="inspection-video">
+        <video
+          autoplay
+          controls
+          :src="inspectionList.videoUrl"
+          style="width:100%;height:100%"
+        ></video>
+        <!-- <iframe ref="videoFlv" src="/static/flv/demo.html" frameborder="0"></iframe> -->
+      </div>
+      <div
+        class="inspection-problems"
+        :key="'problem' + index"
+        v-for="(item, index) in inspectionList.inspectionProblems"
+      >
+        <div class="control-title">
+          问题{{ index + 1 }}描述
+        </div>
+        <div class="control-quesition">
+          <div class="describe">
+            <span class="question-icon"></span><span>{{ item.type }}</span>
+            <span>{{ item.describe }}</span>
+          </div>
+        </div>
+        <div class="control-title">
+          巡视图片
+        </div>
+        <div class="inspection-img">
+          <img
+            v-for="(n, k) in item.pictures"
+            :src="n"
+            alt=""
+            :key="k"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 <script>
-
 import { getInspectionDetails } from "@/api/api";
 export default {
-    name: '',
-    data() {
-        return {
-            controlImgList: [
-                {
-                    pic: require("../../assets/controlImg.png")
-                },
-                {
-                    pic: require("../../assets/controlImg.png")
-                },
-                {
-                    pic: require("../../assets/controlImg.png")
-                },
-                {
-                    pic: require("../../assets/controlImg.png")
-                }
-            ],
-            question: "电缆线暴露在外",
-            inspectionList: {}
-        }
-    },
-    mounted() {
-
-    },
-    computed: {
-
-    },
-    methods: {
-        getInspectionData(data) {
-            getInspectionDetails({ id: data }).then(res => {
-                if (res.data.code == 200) {
-                    console.log(res, '巡更详情shuju');
-                    this.inspectionList = res.data.data
-                }
-            })
+  name: "",
+  data() {
+    return {
+      controlImgList: [
+        {
+          pic: require("../../assets/controlImg.png"),
         },
-        closeHandle() {
-            // 关闭弹窗事件
-            this.$emit('closeDialog', false)
+        {
+          pic: require("../../assets/controlImg.png"),
+        },
+        {
+          pic: require("../../assets/controlImg.png"),
+        },
+        {
+          pic: require("../../assets/controlImg.png"),
+        },
+      ],
+      question: "电缆线暴露在外",
+      inspectionList: {},
+    };
+  },
+  mounted() {},
+  computed: {},
+  methods: {
+    //请求数据接口
+    getInspectionData(data) {
+      getInspectionDetails({ id: data }).then((res) => {
+        if (res.data.code == 200) {
+          this.inspectionList = res.data.data;
         }
-
+      });
     },
-}
+    closeHandle() {
+      // 关闭弹窗事件
+      this.$emit("closeDialog", false);
+    },
+  },
+};
 </script>
 <style scoped lang="less">
 .controlPage {
-    .pageBox{
-        width: 100%;
-        height: 100%;
-     overflow-y: scroll;   
+  .pageBox {
+    width: 100%;
+    height: 100%;
+    overflow-y: scroll;
+  }
+  // 滚动条宽度
+  .pageBox::-webkit-scrollbar {
+    width: 8px;
+  }
+  //  背景色
+  .pageBox::-webkit-scrollbar-track {
+    background-color: #f5f5f5;
+    border-radius: 4px;
+  }
+  // 滑块颜色
+  .pageBox::-webkit-scrollbar-thumb {
+    background-color: #7ffffc;
+    border-radius: 4px;
+  }
+  .closeBtn {
+    width: 16px;
+    background: url("~@/assets/pic/close.png") no-repeat;
+    background-size: 100% 100%;
+    height: 16px;
+    color: #90f2eb;
+    float: right;
+    font-size: 50px;
+    cursor: pointer;
+    margin-right: 16px;
+    margin-top: 16px;
+  }
 
-    }
-    // 滚动条宽度
-    .pageBox::-webkit-scrollbar{
-        width: 8px;
+  position: fixed;
+  top: 0;
+  right: 0;
+  left: 0;
+  bottom: 0;
+  margin: auto;
+  width: 1072px;
+  height: 789px;
+  background-image: url("../../assets/controlBg.png");
+  padding: 40px;
+  box-sizing: border-box;
+  padding-bottom: 50px;
 
-     }
-    //  背景色
-    .pageBox::-webkit-scrollbar-track{
-        background-color: #f5f5f5;
-        border-radius: 4px;
+  .control-title {
+    color: #7ffffc;
+    margin: 15px 0;
+  }
+  .inspection-video {
+    height: 20%;
+    width: 35%;
+  }
+  .inspection-records {
+    color: #3f7f7e;
+  }
+
+  .inspection-img {
+    display: flex;
+    flex-wrap: wrap;
+
+    img {
+      margin-right: 25px;
+      width: 179px;
+      height: 117px;
     }
-    // 滑块颜色
-    .pageBox::-webkit-scrollbar-thumb{
-        background-color: #7ffffc;
-        border-radius: 4px;
-    }
-    .closeBtn {
-        width: 16px;
-        background: url('~@/assets/pic/close.png') no-repeat;
-        background-size: 100% 100%;
-        height: 16px;
-        color: #90f2eb;
-        float: right;
-        font-size: 50px;
-        cursor: pointer;
-        margin-right: 16px;
-        margin-top: 16px;
+  }
+
+  .control-quesition {
+    .question-icon {
+      width: 18px;
+      height: 18px;
+      background-image: url("../../assets/question-icon.png");
+      background-size: 100% 100%;
+      display: inline-block;
+      vertical-align: middle;
+      margin-right: 10px;
     }
 
-    position: fixed;
-    top: 0;
-    right: 0;
-    left: 0;
-    bottom:0;
-    margin:auto;
-    width: 1072px;
-    height: 789px;
-    background-image: url("../../assets/controlBg.png");
-    padding: 40px;
-    box-sizing: border-box;
-    padding-bottom: 50px;
-
-    .control-title {
-        color: #7ffffc;
-        margin: 15px 0;
-    }
-
-    .inspection-records {
-        color: #3f7f7e;
-    }
-
-    .inspection-img {
-        display: flex;
-        flex-wrap: wrap;
-
-        img {
-            margin-right: 25px;
-            width: 179px;
-            height: 117px;
-        }
-    }
-
-    .control-quesition {
-        .question-icon {
-            width: 18px;
-            height: 18px;
-            background-image: url('../../assets/question-icon.png');
-            background-size: 100% 100%;
-            display: inline-block;
-            vertical-align: middle;
-            margin-right: 10px;
-        }
-
-        .describe {
-            color: #ff6c00;
-        }
+    .describe {
+      color: #ff6c00;
     }
+  }
 }
 </style>

src/components/common/tourLogPage.vue

@@ -0,0 +1,186 @@
+<template>
+    <div class="tourLogPage">
+
+        <div class="closeBtn" @click="closeHandle">
+
+        </div>
+        <div class="pageBox">
+            <div class="control-title" style="margin-top: 0;">
+                巡视记录
+            </div>
+            <div class="inspection-records">
+                {{ inspectionList.record }}
+            </div>
+            <div class="control-title">
+                巡视图片
+            </div>
+            <div class="inspection-img">
+                <img v-for="(item, index) in inspectionList.imagesUrl" :src="item" alt="" :key="index"/>
+            </div>
+            <div class="control-title">
+                巡视视频
+            </div>
+            <div class="inspection-video">
+                <video autoplay controls :src="inspectionList.videoUrl" style="width:100%;height:100%"></video>
+                <!-- <iframe ref="videoFlv" src="/static/flv/demo.html" frameborder="0"></iframe> -->
+            </div>
+            <div class="inspection-problems" :key="'problem' + index"
+                v-for="(item, index) in inspectionList.inspectionProblems">
+                <div class="control-title">
+                    问题{{ index + 1 }}描述
+                </div>
+                <div class="control-quesition">
+                    <div class="describe">
+                        <span class="question-icon"></span><span>{{ item.type }}</span>
+                        <span>{{ item.describe }}</span>
+                    </div>
+                </div>
+                <div class="control-title">
+                    巡视图片
+                </div>
+                <div class="inspection-img">
+                    <img v-for="(n, k) in item.pictures" :src="n" alt="" :key="k"/>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+
+import { getInspectionDetails } from "@/api/api";
+export default {
+    name: '',
+    data() {
+        return {
+            controlImgList: [
+                {
+                    pic: require("../../assets/controlImg.png")
+                },
+                {
+                    pic: require("../../assets/controlImg.png")
+                },
+                {
+                    pic: require("../../assets/controlImg.png")
+                },
+                {
+                    pic: require("../../assets/controlImg.png")
+                }
+            ],
+            question: "电缆线暴露在外",
+            inspectionList: {}
+        }
+    },
+    mounted() {
+
+    },
+    computed: {
+
+    },
+    methods: {
+        //请求数据接口
+        getInspectionData(data) {
+            console.log(data,'调用智能巡检');
+            getInspectionDetails({ id: data }).then(res => {
+                if (res.data.code == 200) {
+                    this.inspectionList = res.data.data
+                }
+            })
+        },
+        closeHandle() {
+            // 关闭弹窗事件
+            this.$emit('closeDialog', false)
+        }
+
+    },
+}
+</script>
+<style scoped lang="less">
+.tourLogPage {
+    z-index:9999;
+    .pageBox{
+        width: 100%;
+        height: 100%;
+     overflow-y: scroll;   
+     
+    }
+    // 滚动条宽度
+    .pageBox::-webkit-scrollbar{
+        width: 8px;
+        
+     }
+    //  背景色
+    .pageBox::-webkit-scrollbar-track{
+        background-color: #f5f5f5;
+        border-radius: 4px;
+    }
+    // 滑块颜色
+    .pageBox::-webkit-scrollbar-thumb{
+        background-color: #7ffffc;
+        border-radius: 4px;
+    }
+    .closeBtn {
+        width: 16px;
+        background: url('~@/assets/pic/close.png') no-repeat;
+        background-size: 100% 100%;
+        height: 16px;
+        color: #90f2eb;
+        float: right;
+        font-size: 50px;
+        cursor: pointer;
+        margin-right: 16px;
+        margin-top: 16px;
+    }
+
+    position: fixed;
+    top: 0;
+    right: 0;
+    left: 4%;
+    bottom:0;
+    margin:auto;
+    width: 1072px;
+    height: 789px;
+    background-image: url("../../assets/controlBg.png");
+    padding: 40px;
+    box-sizing: border-box;
+    padding-bottom: 50px;
+
+    .control-title {
+        color: #7ffffc;
+        margin: 15px 0;
+    }
+    .inspection-video{
+        height:20%;
+        width:35%
+    }
+    .inspection-records {
+        color: #3f7f7e;
+    }
+
+    .inspection-img {
+        display: flex;
+        flex-wrap: wrap;
+
+        img {
+            margin-right: 25px;
+            width: 179px;
+            height: 117px;
+        }
+    }
+
+    .control-quesition {
+        .question-icon {
+            width: 18px;
+            height: 18px;
+            background-image: url('../../assets/question-icon.png');
+            background-size: 100% 100%;
+            display: inline-block;
+            vertical-align: middle;
+            margin-right: 10px;
+        }
+
+        .describe {
+            color: #ff6c00;
+        }
+    }
+}
+</style>

src/main.js

@@ -24,8 +24,8 @@ Vue.prototype.$echarts = echarts
 Vue.prototype.$util = util
 
 import {
-  Flexbox,
-  FlexboxItem
+    Flexbox,
+    FlexboxItem
 } from '@/components/Flexbox'
 Vue.component('flexbox', Flexbox)
 Vue.component('flexbox-item', FlexboxItem)
@@ -33,14 +33,14 @@ Vue.component('flexbox-item', FlexboxItem)
 import * as filters from './filters' // global filters
 // 注册全局过滤器
 Object.keys(filters).forEach(key => {
-  Vue.filter(key, filters[key])
+    Vue.filter(key, filters[key])
 })
 
 import moment from 'moment'
 //定义一个全局过滤器实现日期格式化
-Vue.filter('datefmt',function (input,fmtstring) {//当input为时间戳时，需转为Number类型
-  // 使用momentjs这个日期格式化类库实现日期的格式化功能
-  return moment(input).format(fmtstring);
+Vue.filter('datefmt', function (input, fmtstring) {//当input为时间戳时，需转为Number类型
+    // 使用momentjs这个日期格式化类库实现日期的格式化功能
+    return moment(input).format(fmtstring);
 });
 // import videojs from "video.js";
 // import "video.js/dist/video-js.css";
@@ -52,6 +52,56 @@ Vue.config.productionTip = false
 import videojs from "video.js";
 import "video.js/dist/video-js.css";
 Vue.prototype.$video = videojs;
+//自适应
+import { detectZoom } from '@/utils/detectZoom.js';
+const m = detectZoom();
+//判断屏幕是否为4k
+//  window.screen.width * window.devicePixelRatio >=3840 
+console.log(window.screen.width, 'window.screen.width');
+if (window.screen.width >= 3840) {
+    //   switch (m) {
+    //     // 4k屏时屏幕缩放比为100%
+    //     case 100:
+    //       document.body.style.zoom = 100 / 50;
+    //       break;
+    //       // 4k屏时屏幕缩放比为125%
+    //     case 125:
+    //       document.body.style.zoom = 100 / 62.5;
+    //       break;
+    //       // 4k屏时屏幕缩放比为150%
+    //     case 150:
+    //       document.body.style.zoom = 100 / 75;
+    //       break;
+    //       // 4k屏时屏幕缩放比为175%
+    //     case 175:
+    //       document.body.style.zoom = 100 / 87.4715;
+    //       break;
+    //       // 4k屏时屏幕缩放比为200%
+    //     case 200:
+    //       document.body.style.zoom = 100 / 100;
+    //       break;
+    //       // 4k屏时屏幕缩放比为225%
+    //     case 225:
+    //       document.body.style.zoom = 100 / 112.485;
+    //       break;
+
+    //     default:
+    //       break;
+    //   }
+    //   document.body.style.zoom = 100 / (Number(m)/2);
+    var userAgent = navigator.userAgent
+    if (userAgent.indexOf("Chrome") > -1) {
+        // 当前浏览器为 Chrome
+        document.body.style.zoom = 100 / (Number(m) / 2);
+    } else if (userAgent.indexOf("Firefox") > -1) {
+        // 当前浏览器为 Firefox
+        document.body.style.transformOrigin = "center center";
+        document.body.style.transform = "scale(2)";
+        document.body.style.overflow = 'hidden'
+    }
+} else {
+    document.body.style.zoom = 1;
+}
 //MQTT订阅
 var currentTopics = null;
 var client = null;
@@ -88,7 +138,7 @@ window.PubScribe = function (topic, _callback,) {
         });
     } else {
         if (topic != null) {
-            console.log("topic",topic)
+            console.log("topic", topic)
             currentTopics = topic;
             client.subscribe(currentTopics, {
                 qos: 0
@@ -105,8 +155,8 @@ window.PubScribe = function (topic, _callback,) {
 }
 /* eslint-disable no-new */
 new Vue({
-  el: '#app',
-  router,
-  store,
-  render: h => h(App)
+    el: '#app',
+    router,
+    store,
+    render: h => h(App)
 })

src/router/index.js

@@ -76,33 +76,33 @@ const router = new Router({
   ]
 });
 // 挂载路由导航守卫
-// router.beforeEach((to, from, next) => {
-//   // 获取存储localStorage的token
-//   let token = sessionStorage.getItem("token")
-//   // 获取存储token的开始时间
-//   const tokenStartTime = sessionStorage.getItem("tokenStartTime")
-//   // 后台给出的token有效时间，一个星期 单位 是秒
-//   // 我们自己定义6天过期，让用户重新登录一下， 用户总不可能在一个页面挂机一天吧
-//   const timeOver = 1 * 24 * 3600 * 1000
-//   // 当前时间
-//   let date = new Date().getTime()
-//   // 如果大于说明是token过期了
-//   if (date - tokenStartTime > timeOver) {
-//     token = null
-//   }
-//   // 如果token过期了
-//   if (!token) {
-//     if (to.path == '/login') return next()
-//     // 注意要import element的Message组件
-//     // this.$message.error("登录状态过期，请重新登录")
-//     Message.error("登录状态过期，请重新登录")
-//     sessionStorage.clear();
-//     return next('/login')
-//     // 如果token没有过期，又是选择了登录页面就直接重定向到首页，不需要重新输入账户密码
-//   } else if (to.path == '/login') {
-//     return next('/index')
-//   }
-//   next()
+router.beforeEach((to, from, next) => {
+  // 获取存储localStorage的token
+  let token = sessionStorage.getItem("token")
+  // 获取存储token的开始时间
+  const tokenStartTime = sessionStorage.getItem("tokenStartTime")
+  // 后台给出的token有效时间，一个星期 单位 是秒
+  // 我们自己定义6天过期，让用户重新登录一下， 用户总不可能在一个页面挂机一天吧
+  const timeOver = 1 * 24 * 3600 * 1000
+  // 当前时间
+  let date = new Date().getTime()
+  // 如果大于说明是token过期了
+  if (date - tokenStartTime > timeOver) {
+    token = null
+  }
+  // 如果token过期了
+  if (!token) {
+    if (to.path == '/login') return next()
+    // 注意要import element的Message组件
+    // this.$message.error("登录状态过期，请重新登录")
+    Message.error("登录状态过期，请重新登录")
+    sessionStorage.clear();
+    return next('/login')
+    // 如果token没有过期，又是选择了登录页面就直接重定向到首页，不需要重新输入账户密码
+  } else if (to.path == '/login') {
+    return next('/index')
+  }
+  next()
 
-// })
+})
 export default router;

src/utils/Resize.vue

@@ -1,66 +1,80 @@
 <template>
-    <div id="resize" :ref="ref">
-      <template v-if="ready">
-        <slot></slot>
-      </template>
-    </div>
-  </template>
-  <style>
-  #resize {
-    position: fixed;
-    top: 0px;
-    left: 0px;
-    overflow: hidden;
-    transform-origin: left top;
-    z-index: 999;
-  }
-  </style>
-  <script>
-  import autoResize from "./autoResize";
+  <div id="resize" :ref="ref">
+    <template v-if="ready">
+      <slot></slot>
+    </template>
+  </div>
+</template>
+<style>
+#resize {
+  position: fixed;
+  top: 0px;
+  left: 0px;
+  overflow: hidden;
+  transform-origin: left top;
+  z-index: 999;
+}
+</style>
+<script>
+import autoResize from "./autoResize";
 
-  export default {
-    name: "DvFullScreenContainer",
-    mixins: [autoResize],
-    data() {
-      return {
-        ref: "full-screen-container",
-        allWidth: 0,
-        scale: 0,
-        datavRoot: "",
-        ready: false,
-      };
+export default {
+  name: "DvFullScreenContainer",
+  mixins: [autoResize],
+  data() {
+    return {
+      ref: "full-screen-container",
+      allWidth: 0,
+      scale: 0,
+      datavRoot: "",
+      ready: false
+    };
+  },
+  methods: {
+    afterAutoResizeMixinInit() {
+      const { initConfig, setAppScale } = this;
+
+      initConfig();
+
+      setAppScale();
+
+      this.ready = true;
     },
-    methods: {
-      afterAutoResizeMixinInit() {
-        const { initConfig, setAppScale } = this;
+    initConfig() {
+      const { dom } = this;
+      const { width, height } = screen;
 
-        initConfig();
+      this.allWidth = width;
 
-        setAppScale();
-
-        this.ready = true;
-      },
-      initConfig() {
-        const { dom } = this;
-        const { width, height } = screen;
-
-        this.allWidth = width;
-
-        dom.style.width = `${width}px`;
-        dom.style.height = `${height}px`;
-      },
-      setAppScale() {
-        const { allWidth, dom } = this;
-
-        const currentWidth = document.body.clientWidth;
+      // dom.style.width = `${width}px`;
+      // dom.style.height = `${height}px`;
+      dom.style.width = `1920px`;
+      dom.style.height = `1080px`;
+    },
+    setAppScale() {
+      const { allWidth, dom } = this;
 
+      const currentWidth = document.body.clientWidth;
+      if (currentWidth == 1920) {
+        dom.style.transform = `scale(1)`;
+      } else {
         dom.style.transform = `scale(${currentWidth / allWidth})`;
-      },
-      onResize() {
-        const { setAppScale } = this;
-
-        setAppScale();
-      },
+        if (window.screen.width >= 3840) {
+          var userAgent = navigator.userAgent;
+          // 当前浏览器为 Chrome
+          if (userAgent.indexOf("Firefox") > -1) {
+            // 当前浏览器为 Firefox
+            dom.style.left = "25%";
+          }
+        }
+      }
+      // dom.style.transform = `scale(${currentWidth / allWidth})`;
     },
-  };
-  </script>
+    onResize() {
+      const { setAppScale } = this;
+
+      setAppScale();
+    }
+  }
+};
+</script>

src/utils/detectZoom.js

@@ -0,0 +1,21 @@
+export const detectZoom = () => {
+    let ratio = 0,
+      screen = window.screen,
+      ua = navigator.userAgent.toLowerCase();
+    if (window.devicePixelRatio !== undefined) {
+      ratio = window.devicePixelRatio;
+    } else if (~ua.indexOf('msie')) {
+      if (screen.deviceXDPI && screen.logicalXDPI) {
+        ratio = screen.deviceXDPI / screen.logicalXDPI;
+      }
+    } else if (
+      window.outerWidth !== undefined &&
+      window.innerWidth !== undefined
+    ) {
+      ratio = window.outerWidth / window.innerWidth;
+    }
+    if (ratio) {
+      ratio = Math.round(ratio * 100);
+    }
+    return ratio;
+  };

src/utils/mqttConfig.js

@@ -21,14 +21,17 @@ class mqttHandle {
             cleanSession: true,
             connectTimeout: 7000, // 超时时间
             reconnectPeriod: 7000, // 重连时间间隔
-            // host:'175.27.191.156',
-            host:'192.168.1.102',
-            port: '10083',
+            host:'175.27.191.156',
+            // host:'192.168.131.101', //现场
+            // host:'127.0.0.1',
+            port: '10083',//现场
             // 认证信息
             // clientId:'mqttjs_23dda38f34',
             clientId:  randomName(16),
-            username: 'site',
-            password: 'site',
+            // username: 'admin',
+            // password: '1qaz0OKM',
+            username:' site_01',
+            password:' site_01',
         }
         // this.connect.clientId = randomName(16);
         this.mqttClient = null;
@@ -41,8 +44,9 @@ class mqttHandle {
         //配置链接
         const { host, port, endpoint, ...options } = this.connect;
         console.log("this.connect.host",this.connect.host)
-        // const connectUrl = 'ws://175.27.191.156:10083/mqtt';
-        const connectUrl = 'ws://192.168.1.102:8083/mqtt';
+        const connectUrl = 'ws://175.27.191.156:10083/mqtt';
+        // const connectUrl = 'ws://192.168.131.101:8083/mqtt';
+        // const connectUrl = 'ws://127.0.0.1:8083/mqtt';
         // if (!client.connected) {
         //     client.on('connect', function () {
         //         console.log('连接成功') 

src/views/login.vue

@@ -5,14 +5,14 @@
         <div class="bgPicture" style="height:100%">
         <!-- 标题 -->
         <div class="title">
-            <!-- <div class="title-font"></div> -->
+            <div class="font" @click="toggleFullScreen"></div>
         </div>
         <div class="titTop">
           <div>
           </div>
           <div class="titRight">
            <span>{{ dateNew }}&nbsp;{{ getWeek }}&nbsp;{{ time }}</span>
-            <span
+            <!-- <span
                 ><img
                   :src="weatherImg"
                   alt=""
@@ -27,7 +27,7 @@
                 >{{ weatherItem.weather }} &nbsp;{{
                   weatherItem.temperature
                 }}℃</span
-              >
+              > -->
           </div>
         </div>
       </div>
@@ -114,14 +114,41 @@ export default {
   created() {
     let h = document.documentElement.clientHeight || document.body.clientHeight;
     this.vdaH = h - 0 + "px";
-       this.createMqtt()
-       this.getWeather()
+      //  this.createMqtt()
+      //  this.getWeather()
         window.setInterval(() => {
       this.getTime();
     }, 1000);
   },
 
   methods: {
+    toggleFullScreen() {
+      const elem = document.documentElement; // 获取文档根元素
+
+      if (!document.fullscreenElement) {
+        // 如果当前不是全屏状态
+        if (elem.requestFullscreen) {
+          elem.requestFullscreen();
+        } else if (elem.mozRequestFullScreen) {
+          elem.mozRequestFullScreen();
+        } else if (elem.webkitRequestFullscreen) {
+          elem.webkitRequestFullscreen();
+        } else if (elem.msRequestFullscreen) {
+          elem.msRequestFullscreen();
+        }
+      } else {
+        // 如果当前是全屏状态
+        if (document.exitFullscreen) {
+          document.exitFullscreen();
+        } else if (document.mozCancelFullScreen) {
+          document.mozCancelFullScreen();
+        } else if (document.webkitExitFullscreen) {
+          document.webkitExitFullscreen();
+        } else if (document.msExitFullscreen) {
+          document.msExitFullscreen();
+        }
+      }
+    },
      getType() {
             let datas = {
                 account:this.param.username,
@@ -194,7 +221,6 @@ export default {
             });
         },
        createMqtt() {
-           
             this.topicSends = ['webdata'];
              console.log("this.topicSends",this.topicSends)
         window.PubScribe(this.topicSends, this.realInfo);  
@@ -340,7 +366,8 @@ getWeather () {
   },
 
   mounted() {
-    this.switchDiv(); window.onresize = () => {
+    // this.switchDiv(); 
+    window.onresize = () => {
       return (() => {
         let h = document.documentElement.clientHeight || document.body.clientHeight;
         this.vdaH = h - 0 + "px";
@@ -413,11 +440,19 @@ getWeather () {
 .title {
   width: 100%;
   height: 168px;
-  background: url("~@/assets/pic/titl.png") no-repeat;
+  background: url("~@/assets/pic/title1 (2).png") no-repeat;
   background-size: 100% 100%;
   position: relative;
   display: flex;
   justify-content: center;
+  align-items: center;
+  .font{
+    background: url("~@/assets/pic/titin (2).png") no-repeat;
+  background-size: 100% 100%;
+  height:47px;
+  width:584px;
+  margin-bottom: 35px
+  }
 }
 .title>.title-font{
     width: 584px;

src/views/managementComponents.vue

@@ -25,19 +25,19 @@
         'background-image': boxNone
           ? `url(${require(`../assets/pic/exitFull.png`)}`
           : `url(${require(`../assets/pic/fullScreen.png`)}`,
-        right: boxNone ? '483px' : '10px',
+        right: boxNone ? '483px' : '10px'
       }"
     ></div>
-     <div :class="[boxNone ? 'centerBottom' : 'centerBottom2']">
-         <div class="titName">
+    <div :class="[boxNone ? 'centerBottom' : 'centerBottom2']">
+      <div class="titName">
         <span></span>
         <span>告警详情</span>
         <span></span>
       </div>
       <!-- <el-scrollbar> -->
-        <div class="centerBottom3">
-             <swiperManagement></swiperManagement>
-        </div>
+      <div class="centerBottom3">
+        <swiperManagement></swiperManagement>
+      </div>
       <!-- </el-scrollbar> -->
     </div>
     <!-- 左侧模块1 -->
@@ -117,7 +117,7 @@
           grid-bottom="1%"
           :color-array="['#021C9F', '#01B1FF']"
           :chart-data="qyList"
-          :x-axis-data="qyList.map((item) => item.name)"
+          :x-axis-data="qyList.map(item => item.name)"
           :checkCountList="checkCountList"
         />
       </div>
@@ -157,7 +157,7 @@
           :chart-data3="aq3List"
           :chart-data2="aq2List"
           :chart-data="aqList"
-          :x-axis-data="aqList.map((item) => item.name)"
+          :x-axis-data="aqList.map(item => item.name)"
           :safeList="safeList"
         />
       </div>
@@ -287,11 +287,11 @@ export default {
   },
   data() {
     return {
-        highIssues:[], //高频问题项
-      safeList:[], //安全告警
-      resolve:0,//已处理
+      highIssues: [], //高频问题项
+      safeList: [], //安全告警
+      resolve: 0, //已处理
       total: 0, //整改项
-      unresolve:0, //待处理
+      unresolve: 0, //待处理
       checkCountList: [], //检查次数统计
       checkNum: 0, //检查项
       questionNum: 0, //问题项
@@ -306,233 +306,233 @@ export default {
           icon: "wendu",
           name: "温度",
           val: "19.8",
-          tem: "℃",
+          tem: "℃"
         },
         {
           icon: "shidu",
           name: "湿度",
           val: "19.8",
-          tem: "%",
+          tem: "%"
         },
         {
           icon: "yangqi",
           name: "氧气值",
           val: "19.8",
-          tem: "%VOL",
+          tem: "%VOL"
         },
         {
           icon: "co2",
           name: "二氧化碳",
           val: "19.8",
-          tem: "%VOL",
+          tem: "%VOL"
         },
         {
           icon: "ch4",
           name: "甲烷",
           val: "19.8",
-          tem: "ppm",
+          tem: "ppm"
         },
         {
           icon: "h2s",
           name: "硫化氢",
           val: "19.8",
-          tem: "ppm",
-        },
+          tem: "ppm"
+        }
       ],
       tableData: [
         {
-          entName: "我打打死",
+          entName: "我打打死"
         },
         {
-          entName: "我打打死",
+          entName: "我打打死"
         },
         {
-          entName: "我打打死",
+          entName: "我打打死"
         },
         {
-          entName: "我打打死",
+          entName: "我打打死"
         },
         {
-          entName: "我打打死",
+          entName: "我打打死"
         },
         {
-          entName: "我打打死",
+          entName: "我打打死"
         },
         {
-          entName: "我打打死",
+          entName: "我打打死"
         },
         {
-          entName: "我打打死",
-        },
+          entName: "我打打死"
+        }
       ],
       aq3List: [
         {
           name: "2月",
-          value: 1,
+          value: 1
         },
         {
           name: "3月",
-          value: 2,
+          value: 2
         },
         {
           name: "4月",
-          value: 13,
+          value: 13
         },
         {
           name: "5月",
-          value: 24,
+          value: 24
         },
         {
           name: "6月",
-          value: 24,
+          value: 24
         },
         {
           name: "7月",
-          value: 31,
-        },
+          value: 31
+        }
       ],
       aq2List: [
         {
           name: "2月",
-          value: 10,
+          value: 10
         },
         {
           name: "3月",
-          value: 6,
+          value: 6
         },
         {
           name: "4月",
-          value: 3,
+          value: 3
         },
         {
           name: "5月",
-          value: 14,
+          value: 14
         },
         {
           name: "6月",
-          value: 4,
+          value: 4
         },
         {
           name: "7月",
-          value: 3,
-        },
+          value: 3
+        }
       ],
       aqList: [
         {
           name: "2月",
           value: 12,
-          value2: 10,
+          value2: 10
         },
         {
           name: "3月",
           value: 13,
-          value2: 6,
+          value2: 6
         },
         {
           name: "4月",
           value: 12,
-          value2: 3,
+          value2: 3
         },
         {
           name: "5月",
           value: 10,
-          value2: 14,
+          value2: 14
         },
         {
           name: "6月",
           value: 7,
-          value2: 4,
+          value2: 4
         },
         {
           name: "7月",
           value: 11,
-          value2: 3,
-        },
+          value2: 3
+        }
       ],
       qyList: [
         {
           name: "1月",
-          value: 12,
+          value: 12
         },
         {
           name: "2月",
-          value: 112,
+          value: 112
         },
         {
           name: "3月",
-          value: 132,
+          value: 132
         },
         {
           name: "4月",
-          value: 12,
+          value: 12
         },
         {
           name: "5月",
-          value: 132,
+          value: 132
         },
         {
           name: "6月",
-          value: 132,
+          value: 132
         },
         {
           name: "7月",
-          value: 132,
+          value: 132
         },
         {
           name: "8月",
-          value: 32,
+          value: 32
         },
         {
           name: "9月",
-          value: 22,
+          value: 22
         },
         {
           name: "10月",
-          value: 152,
+          value: 152
         },
         {
           name: "11月",
-          value: 132,
+          value: 132
         },
         {
           name: "12月",
-          value: 132,
-        },
+          value: 132
+        }
       ],
       xArry: [],
       chartData: [],
       peopleList: [
         {
           name: "姓名",
-          value: "：王刚",
+          value: "：王刚"
         },
         {
           name: "岗位",
-          value: "：项目经理",
+          value: "：项目经理"
         },
         {
           name: "体温",
-          value: "：36.5℃",
+          value: "：36.5℃"
         },
         {
           name: "入场时间",
-          value: "：2022-11-26",
+          value: "：2022-11-26"
         },
         {
           name: "考勤类型",
-          value: "：进场",
+          value: "：进场"
         },
         {
           name: "打卡设备",
-          value: "：1号打卡机",
-        },
+          value: "：1号打卡机"
+        }
       ],
       vdaH: 0,
       type: false,
       menuType: 4,
       numberList: [5, 5],
       boxNone: true,
-      disBoxShow:true,
+      disBoxShow: true
     };
   },
   created() {
@@ -545,8 +545,8 @@ export default {
       let projectId = sessionStorage.getItem("projectId");
       //获取安全检查统计
       getCheckTotalCensus({
-        projectId: projectId,
-      }).then((res) => {
+        projectId: projectId
+      }).then(res => {
         this.checkNum = res.data.data.checkNum; //检查项
         this.questionNum = res.data.data.questionNum; //问题项
         this.resolvedNum = res.data.data.resolvedNum; //已处理
@@ -554,31 +554,33 @@ export default {
       });
       //隐患检查统计
       getResolveTroubleCensus({
-        projectId: projectId,
-      }).then((res) => {
+        projectId: projectId
+      }).then(res => {
         this.resolve = res.data.data.resolve;
         this.total = res.data.data.total;
         this.unresolve = res.data.data.unresolve;
       });
       //高频问题项
       getMostTroubleCensus({
-          projectId: projectId,
-      }).then((res)=>{
-          this.highIssues = res.data.data
-      }).catch((err)=>{
-          console.log(err);
+        projectId: projectId
       })
+        .then(res => {
+          this.highIssues = res.data.data;
+        })
+        .catch(err => {
+          console.log(err);
+        });
     },
     disBox() {
       this.boxNone = !this.boxNone;
-       if(this.boxNone == true){
-        console.log("closeBig")
-          window.parent.closeBig();
-          this.disBoxShow=true
-      }else if(this.boxNone == false){
-        console.log("openBig")
-          window.parent.openBig("openBig");
-           this.disBoxShow=false
+      if (this.boxNone == true) {
+        console.log("closeBig");
+        window.parent.closeBig();
+        this.disBoxShow = true;
+      } else if (this.boxNone == false) {
+        console.log("openBig");
+        window.parent.openBig("openBig");
+        this.disBoxShow = false;
       }
       this.$refs.screenBox.style.animationPlayState = "running";
     },
@@ -594,8 +596,8 @@ export default {
       //检查次数统计
       getCheckTimesCensus({
         projectId: sessionStorage.getItem("projectId"),
-        type: val,
-      }).then((res) => {
+        type: val
+      }).then(res => {
         this.checkCountList = res.data.data;
         this.$refs.lineRef.resetOption();
       });
@@ -604,12 +606,12 @@ export default {
     choose2Type(val) {
       this.time2Type = val + 1;
       getWarnSurveillance({
-          projectId: sessionStorage.getItem("projectId"),
-         type: val,
-      }).then((res)=>{
+        projectId: sessionStorage.getItem("projectId"),
+        type: val
+      }).then(res => {
         //  this.$refs.lineRef.resetOption();
-         this.safeList = res.data.data
-      })
+        this.safeList = res.data.data;
+      });
     },
     //查看甘特图
     gantDialog() {
@@ -645,7 +647,7 @@ export default {
           this.$refs.switchBtn.style.display = "block";
         }, 800);
       }
-    },
+    }
   },
   mounted() {
     //获取数据
@@ -654,7 +656,7 @@ export default {
     this.chooseType(0);
     //默认获取年的安全告警统计
     this.choose2Type(0);
-    this.switchDiv();
+    // this.switchDiv();
     window.onresize = () => {
       return (() => {
         let h =
@@ -662,21 +664,23 @@ export default {
         this.vdaH = h - 0 + "px";
       })();
     };
-  },
+  }
 };
 </script>
 
 <style scoped lang="less">
+@screen-xs: 1000px;
+@screen-lg: 2100px;
 .fathe {
   width: 100%;
   height: 144px;
 }
 .centerBottom2 {
   width: calc(100% - 968px);
-//   height: 166px;
- height: 200px;
+  //   height: 166px;
+  height: 200px;
   position: absolute;
-  bottom: -205px;
+  bottom: -144px;
   left: 50%;
   transform: translateX(-50%);
   background: url("~@/assets/pic/jdin.png") no-repeat;
@@ -690,16 +694,22 @@ export default {
   ::-webkit-scrollbar {
     display: none;
   }
-  @media only screen and (max-height: 1000px) {
-    bottom: -64px;
+  // @media only screen and (max-height: 1000px) {
+  //   bottom: -64px;
+  // }
+  @media only screen and (min-height: @screen-xs) and (max-height: 1200px) {
+    bottom: -205px;
+  }
+  @media only screen and (min-height: @screen-lg) {
+    bottom: -205px;
   }
 }
 .centerBottom {
   width: calc(100% - 968px);
-//   height: 246px;
-   height: 298px;
+  //   height: 246px;
+  height: 246px;
   position: absolute;
-  bottom: 35px;
+  bottom: 160px;
   left: 25%;
   // transform: translateX(-50%);
   background: url("~@/assets/pic/jdin.png") no-repeat;
@@ -711,39 +721,56 @@ export default {
   transition: bottom 0.6s;
   // overflow-y: hidden; //重点
   // z-index: 999;
-//   padding: 0px 70px 0 70px;
-   padding: 0px 10px 0 10px;
-   overflow-y: hidden;
+  //   padding: 0px 70px 0 70px;
+  padding: 0px 10px 0 10px;
+  overflow-y: hidden;
   box-sizing: border-box;
   ::-webkit-scrollbar {
     display: none;
   }
-  @media only screen and (max-height: 1000px) {
-    bottom: 160px;
+  // @media only screen and (max-height: 1000px) {
+  //   bottom: 160px;
+  //   height: 246px;
+  // }
+  @media only screen and (min-height: @screen-xs) and (max-height: 1200px) {
+    bottom: 35px;
+    height: 298px;
+  }
+  @media only screen and (min-height: @screen-lg) {
+    bottom: 35px;
     height: 298px;
-     height: 246px;
   }
-
 }
 .centerBottom3 {
+  height: 181px;
+  position: absolute;
+  top: 54px;
+  overflow: auto;
+  width: 99%;
+  // @media only screen and (max-height: 1000px) {
+  //   height: 181px;
+  // }
+  @media only screen and (min-height: @screen-xs) and (max-height: 1200px) {
+    height: 239px;
+  }
+  @media only screen and (min-height: @screen-lg) {
     height: 239px;
-    position: absolute;
-    top: 54px;
-    overflow: auto;
-    width: 99%;
-     @media only screen and (max-height: 1000px) {
-   
-     height: 181px;
   }
 }
 .yhBox {
   width: 95%;
   height: 60%;
   position: absolute;
-  top: 83px;
+  top: 60px;
 
-  @media only screen and (max-height: 1000px) {
-    top: 60px;
+  // @media only screen and (max-height: 1000px) {
+  //   top: 60px;
+  // }
+  @media only screen and (min-height: @screen-xs) and (max-height: 1200px) {
+    top: 83px;
+  }
+  @media only screen and (min-height: @screen-lg) {
+    top: 83px;
   }
 }
 
@@ -923,22 +950,28 @@ export default {
   background: url("~@/assets/pic/fullScreen.png") no-repeat;
   background-size: 100% 100%;
   position: absolute;
-//   bottom: 34px;
-//   bottom: 210px;
-//  bottom: 250px;
-//   bottom: 289px;
-  bottom: 335px;
+  //   bottom: 34px;
+  //   bottom: 210px;
+  //  bottom: 250px;
+  //   bottom: 289px;
+  bottom: 417px;
   right: 480px;
   overflow-x: hidden;
   transition: right 0.8s, height 1s;
   overflow-y: hidden; //重点
   cursor: pointer;
-  @media only screen and (max-height: 1000px) {
-    // bottom: 157px;
-    // bottom: 339px;
-    // bottom: 371px;
-    // bottom: 461px;
-    bottom: 417px;
+  // @media only screen and (max-height: 1000px) {
+  //   // bottom: 157px;
+  //   // bottom: 339px;
+  //   // bottom: 371px;
+  //   // bottom: 461px;
+  //   bottom: 417px;
+  // }
+  @media only screen and (min-height: @screen-xs) and (max-height: 1200px) {
+    bottom: 335px;
+  }
+  @media only screen and (min-height: @screen-lg) {
+    bottom: 335px;
   }
 }
 
@@ -1039,20 +1072,34 @@ export default {
   height: 90%;
   position: absolute;
   bottom: 0;
-
-  @media only screen and (max-height: 1000px) {
-    top: 50px;
+  top: 50px;
+  // @media only screen and (max-height: 1000px) {
+  //   top: 50px;
+  // }
+  @media only screen and (min-height: @screen-xs) and (max-height: 1200px) {
+    top: 0;
+  }
+  @media only screen and (min-height: @screen-lg) {
+    top: 0;
   }
 }
 
 .pieBox {
   width: 100%;
-  height: 90%;
+  height: 262px;
   position: absolute;
   bottom: 0;
 
-  @media only screen and (max-height: 1000px) {
-    height: 262px;
+  // @media only screen and (max-height: 1000px) {
+  //   height: 262px;
+  //   top: 38px;
+  // }
+  @media only screen and (min-height: @screen-xs) and (max-height: 1200px) {
+    height: 90%;
+    top: 38px;
+  }
+  @media only screen and (min-height: @screen-lg) {
+    height: 90%;
     top: 38px;
   }
 }
@@ -1096,13 +1143,18 @@ export default {
 
 .ftahBox {
   text-align: center;
-  padding-top: 17px;
+  padding-top: 7px;
   width: 89px;
 
-  @media only screen and (max-height: 1000px) {
-    padding-top: 7px;
+  // @media only screen and (max-height: 1000px) {
+  //   padding-top: 7px;
+  // }
+  @media only screen and (min-height: @screen-xs) and (max-height: 1200px) {
+    padding-top: 17px;
+  }
+  @media only screen and (min-height: @screen-lg) {
+    padding-top: 17px;
   }
-
   .iconBox1 {
     background: url("~@/assets/pic/check.png") no-repeat;
   }
@@ -1150,13 +1202,19 @@ export default {
 }
 .ftahBox1 {
   // text-align: center;
-  padding-top: 17px;
+  padding-top: 7px;
   width: 89px;
   height: 100px;
   display: flex;
   flex-direction: column;
-  @media only screen and (max-height: 1000px) {
-    padding-top: 7px;
+  // @media only screen and (max-height: 1000px) {
+  //   padding-top: 7px;
+  // }
+  @media only screen and (min-height: @screen-xs) and (max-height: 1200px) {
+    padding-top: 17px;
+  }
+  @media only screen and (min-height: @screen-lg) {
+    padding-top: 17px;
   }
   div:nth-child(1) {
     display: inline-block;
@@ -1281,70 +1339,102 @@ export default {
 
 .leftOneBox {
   width: 444px;
-  height: 242px;
+  height: 222px;
   background: url("~@/assets/pic/boxOneCz.png") no-repeat;
   background-size: 100% 100%;
   position: absolute;
   overflow-x: hidden;
   transition: left 0.8s, height 1s;
   overflow-y: hidden; //重点
-  top: 96px;
+  top: 76px;
   left: 27px;
-  @media only screen and (max-height: 1000px) {
-    top: 76px;
-    height: 222px;
+  // @media only screen and (max-height: 1000px) {
+  //   top: 76px;
+  //   height: 222px;
+  // }
+  @media only screen and (min-height: @screen-xs) and (max-height: 1200px) {
+    top: 96px;
+    height: 242px;
+  }
+  @media only screen and (min-height: @screen-lg) {
+    top: 96px;
+    height: 242px;
   }
 }
 .rightTwoBox {
   width: 444px;
-  height: 362px;
+  height: 342px;
   background: url("~@/assets/pic/second.png") no-repeat;
   background-size: 100% 100%;
   position: absolute;
   overflow-x: hidden;
   transition: right 0.8s, height 1s;
   overflow-y: hidden; //重点
-  top: 360px;
+  top: 317px;
   right: 27px;
-  @media only screen and (max-height: 1000px) {
-    top: 317px;
-    height: 342px;
+  // @media only screen and (max-height: 1000px) {
+  //   top: 317px;
+  //   height: 342px;
+  // }
+  @media only screen and (min-height: @screen-xs) and (max-height: 1200px) {
+    top: 360px;
+    height: 362px;
+  }
+  @media only screen and (min-height: @screen-lg) {
+    top: 360px;
+    height: 362px;
   }
 }
 
 .leftTwoBox {
   width: 444px;
-  height: 322px;
+  height: 302px;
   background: url("~@/assets/pic/second.png") no-repeat;
   background-size: 100% 100%;
   position: absolute;
   overflow-x: hidden;
   transition: left 0.8s, height 1s;
   overflow-y: hidden; //重点
-  top: 361px;
+  top: 317px;
   left: 27px;
 
-  @media only screen and (max-height: 1000px) {
-    height: 302px;
-    top: 317px;
+  // @media only screen and (max-height: 1000px) {
+  //   height: 302px;
+  //   top: 317px;
+  // }
+  @media only screen and (min-height: @screen-xs) and (max-height: 1200px) {
+    top: 361px;
+    height: 322px;
+  }
+  @media only screen and (min-height: @screen-lg) {
+    top: 361px;
+    height: 322px;
   }
 }
 
 .leftThreeBox {
   width: 444px;
-  height: 342px;
+  height: 279px;
   background: url("~@/assets/pic/second.png") no-repeat;
   background-size: 100% 100%;
   position: absolute;
-  top: 707px;
+  top: 638px;
   left: 27px;
   overflow-x: hidden;
   transition: left 0.8s, height 1s;
   overflow-y: hidden; //重点
 
-  @media only screen and (max-height: 1000px) {
-    height: 279px;
-    top: 638px;
+  // @media only screen and (max-height: 1000px) {
+  //   height: 279px;
+  //   top: 638px;
+  // }
+  @media only screen and (min-height: @screen-xs) and (max-height: 1200px) {
+    top: 707px;
+    height: 342px;
+  }
+  @media only screen and (min-height: @screen-lg) {
+    top: 707px;
+    height: 342px;
   }
 }
 
@@ -1353,16 +1443,24 @@ export default {
   transition: right 0.8s, height 1s;
   overflow-y: hidden; //重点
   width: 444px;
-  height: 240px;
+  height: 222px;
   background: url("~@/assets/pic/boxOneCz.png") no-repeat;
   background-size: 100% 100%;
   position: absolute;
-  top: 96px;
+  top: 76px;
   right: 27px;
 
-  @media only screen and (max-height: 1000px) {
-    top: 76px;
-    height: 222px;
+  // @media only screen and (max-height: 1000px) {
+  //   top: 76px;
+  //   height: 222px;
+  // }
+  @media only screen and (min-height: @screen-xs) and (max-height: 1200px) {
+    top: 96px;
+    height: 240px;
+  }
+  @media only screen and (min-height: @screen-lg) {
+    top: 96px;
+    height: 240px;
   }
 }
 
@@ -1375,19 +1473,27 @@ export default {
 
 .rightThreeBox {
   width: 442px;
-  height: 300px;
+  height: 240px;
   background: url("~@/assets/pic/boxOneCz.png") no-repeat;
   background-size: 100% 100%;
   position: absolute;
-  top: 746px;
+  top: 678px;
   overflow-x: hidden;
   transition: right 0.8s, height 1s;
   overflow-y: hidden; //重点
   right: 27px;
 
-  @media only screen and (max-height: 1000px) {
-    top: 678px;
-    height: 240px;
+  // @media only screen and (max-height: 1000px) {
+  //   top: 678px;
+  //   height: 240px;
+  // }
+  @media only screen and (min-height: @screen-xs) and (max-height: 1200px) {
+    top: 746px;
+    height: 300px;
+  }
+  @media only screen and (min-height: @screen-lg) {
+    top: 746px;
+    height: 300px;
   }
 }
 

src/views/personnelComponents.vue

@@ -3,12 +3,12 @@
     <div
       @click="disBox"
       class="screenBox"
-       v-if="disBoxShow"
+      v-if="disBoxShow"
       :style="{
         'background-image': !boxNone
           ? `url(${require(`../assets/pic/exitFull.png`)}`
           : `url(${require(`../assets/pic/fullScreen.png`)}`,
-        right: boxNone ? '483px' : '10px',
+        right: boxNone ? '483px' : '10px'
       }"
     ></div>
     <!-- 左侧模块1 -->
@@ -51,38 +51,43 @@
       <div class="kqjk">
         <div class="twoKqjk">
           <div class="nameMessage" v-for="(item, i) in peopleList" :key="i">
-               <div class="oneKqjk">
-          <img :src="item.picture" alt="" />
-        </div>
-        <div class="textRight">
-            <div style="margin-top:10px">
-                  <span style="color: #7ffffc;white-space: nowrap">姓名：</span>
-                  <span style="color: #ffffff">{{ item.name }}</span>
+            <div class="oneKqjk">
+              <img :src="item.picture" alt="" />
+            </div>
+            <div class="textRight">
+              <div style="margin-top:10px">
+                <span style="color: #7ffffc;white-space: nowrap">姓名：</span>
+                <span style="color: #ffffff">{{ item.name }}</span>
               </div>
               <div style="margin-top:10px">
-                  <span style="color: #7ffffc;white-space: nowrap">岗位：</span>
-                  <span style="color: #ffffff">{{ item.post }}</span>
+                <span style="color: #7ffffc;white-space: nowrap">岗位：</span>
+                <span style="color: #ffffff">{{ item.post }}</span>
               </div>
               <div style="margin-top:10px">
-                  <span style="color: #7ffffc;white-space: nowrap">体温：</span>
-                  <span style="color: #ffffff">{{ item.temperature }}</span>
+                <span style="color: #7ffffc;white-space: nowrap">体温：</span>
+                <span style="color: #ffffff">{{ item.temperature }}</span>
               </div>
               <div style="margin-top:10px">
-                  <span style="color: #7ffffc;white-space: nowrap">入场时间：</span>
-                  <span style="color: #ffffff">{{ item.time }}</span>
+                <span style="color: #7ffffc;white-space: nowrap"
+                  >入场时间：</span
+                >
+                <span style="color: #ffffff">{{ item.time }}</span>
               </div>
               <div style="margin-top:10px">
-                  <span style="color: #7ffffc;white-space: nowrap">考勤类型：</span>
-                  <span style="color: #ffffff;">{{ item.type }}</span>
+                <span style="color: #7ffffc;white-space: nowrap"
+                  >考勤类型：</span
+                >
+                <span style="color: #ffffff;">{{ item.type }}</span>
               </div>
               <div style="margin-top:10px">
-                  <span style="color: #7ffffc;white-space: nowrap">打卡设备：</span>
-                  <span style="color: #ffffff">{{ item.equipment }}</span>
+                <span style="color: #7ffffc;white-space: nowrap"
+                  >打卡设备：</span
+                >
+                <span style="color: #ffffff">{{ item.equipment }}</span>
               </div>
+            </div>
           </div>
         </div>
-              
-        </div>
       </div>
     </div>
     <!-- 右侧模块1 -->
@@ -96,20 +101,20 @@
       <div class="videoBox">
         <div class="oneCls">
           <!-- <img src="@/assets/pic/23.png" alt="" /> -->
-           <swiperPersonnel></swiperPersonnel>
+          <swiperPersonnel></swiperPersonnel>
         </div>
         <div class="mesBox">
           <div>
             <span style="color: #82dddb">会议时间：</span>
-            <span style="color: #ffffff">{{meeting.date}}</span>
+            <span style="color: #ffffff">{{ meeting.date }}</span>
           </div>
           <div>
             <span style="color: #82dddb">会议类型：</span>
-            <span style="color: #ffffff">{{meeting.type}}</span>
+            <span style="color: #ffffff">{{ meeting.type }}</span>
           </div>
           <div>
             <span style="color: #82dddb">会议主持：</span>
-            <span style="color: #ffffff">{{meeting.host}}</span>
+            <span style="color: #ffffff">{{ meeting.host }}</span>
           </div>
           <div>
             <span style="color: #82dddb">参会人员：</span>
@@ -120,18 +125,19 @@
                 display: inline-block;
                 white-space: pre-wrap;
               "
-              >{{meeting.participants}}</span
+              >{{ meeting.participants }}</span
             >
           </div>
         </div>
       </div>
       <div class="meeting">会议内容</div>
       <div class="mettiogBox">
-          <div  class="meetContent">
-              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{meeting.content}}</div>
-          <div style="height:10%;width:100%">
-             <div class="lookFor" @click="gantDialog"></div>
-          </div>
+        <div class="meetContent">
+          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ meeting.content }}
+        </div>
+        <div style="height:10%;width:100%">
+          <div class="lookFor" @click="gantDialog"></div>
+        </div>
       </div>
     </div>
     <!-- 右侧模块2 -->
@@ -147,7 +153,7 @@
           grid-bottom="1%"
           :color-array="['#021C9F', '#01B1FF']"
           :chart-data="qyList"
-          :x-axis-data="qyList.map((item) => item.name)"
+          :x-axis-data="qyList.map(item => item.name)"
           :radarList="radarList"
         />
       </div>
@@ -201,15 +207,15 @@
             <div class="mesBox">
               <div>
                 <span style="color: #82dddb">会议时间：</span>
-                <span style="color: #ffffff">{{meeting.date}}</span>
+                <span style="color: #ffffff">{{ meeting.date }}</span>
               </div>
               <div>
                 <span style="color: #82dddb">会议类型：</span>
-                <span style="color: #ffffff">{{meeting.type}}</span>
+                <span style="color: #ffffff">{{ meeting.type }}</span>
               </div>
               <div>
                 <span style="color: #82dddb">会议主持：</span>
-                <span style="color: #ffffff">{{meeting.host}}</span>
+                <span style="color: #ffffff">{{ meeting.host }}</span>
               </div>
               <div>
                 <span style="color: #82dddb">参会人员：</span>
@@ -220,17 +226,17 @@
                     display: inline-block;
                     white-space: pre-wrap;
                   "
-                  >{{meeting.participants}}</span
+                  >{{ meeting.participants }}</span
                 >
               </div>
             </div>
           </div>
           <div class="meet2ing">会议内容</div>
-           <div class="mettiog2Box">
-          <div  class="meetContent">
-              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{meeting.content}}
-              </div>
-      </div>
+          <div class="mettiog2Box">
+            <div class="meetContent">
+              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ meeting.content }}
+            </div>
+          </div>
         </div>
       </div>
     </div>
@@ -247,7 +253,13 @@ import pieDateChart from "@/components/common/pieDateChart";
 import Resize from "../utils/Resize.vue";
 import swiperPersonnel from "./swiperPersonnel.vue";
 import swiperPersonnelIndex from "./swiperPersonnelIndex.vue";
-import { getUserGroup, getGroupCensus, getAttend,getRecentMeeting,getMonthCensus } from "@/api/personnel";
+import {
+  getUserGroup,
+  getGroupCensus,
+  getAttend,
+  getRecentMeeting,
+  getMonthCensus
+} from "@/api/personnel";
 export default {
   name: "report",
   components: {
@@ -260,87 +272,87 @@ export default {
   },
   data() {
     return {
-        radarList:[], //站班会统计
-        meeting:{}, //站班会记录
+      radarList: [], //站班会统计
+      meeting: {}, //站班会记录
       boxNone: true,
       colorList: ["#00A572", "#008AA4", "#7968D9", "#C7A73E"],
 
       tableData: [
         {
-          entName: "我打打死",
+          entName: ""
         },
         {
-          entName: "我打打死",
+          entName: ""
         },
         {
-          entName: "我打打死",
+          entName: ""
         },
         {
-          entName: "我打打死",
-        },
+          entName: ""
+        }
       ],
       qyList: [
         {
           name: "1月",
-          value: 12,
+          value: 12
         },
         {
           name: "2月",
-          value: 21,
+          value: 21
         },
         {
           name: "3月",
-          value: 22,
+          value: 22
         },
         {
           name: "4月",
-          value: 12,
+          value: 12
         },
         {
           name: "5月",
-          value: 10,
+          value: 10
         },
         {
           name: "6月",
-          value: 3,
+          value: 3
         },
         {
           name: "7月",
-          value: 4,
+          value: 4
         },
         {
           name: "8月",
-          value: 76,
+          value: 76
         },
         {
           name: "9月",
-          value: 22,
+          value: 22
         },
         {
           name: "10月",
-          value: 1,
+          value: 1
         },
         {
           name: "11月",
-          value: 32,
+          value: 32
         },
         {
           name: "12月",
-          value: 12,
-        },
+          value: 12
+        }
       ],
       xArry: [],
       chartData: [],
       peopleList: [
-          {
-              name:'史蒂芬库里',
-              post:'经理',
-              temperature:'36.7',
-              time:'2023-2-1',
-              type:'lala',
-              equipment:'一号打卡机',
-              picture:require('../assets/pic/23.png')
-          }
+        {
+          name: "",
+          post: "",
+          temperature: "36.7",
+          time: "2023-2-1",
+          type: "lala",
+          equipment: "一号打卡机",
+          picture: require("../assets/pic/23.png")
+        }
       ],
       vdaH: 0,
       type: false,
@@ -351,7 +363,7 @@ export default {
       topicSends: [],
       pieData: [], //人员统计,
       constructionPersonnel: [], //施工人员组成
-       disBoxShow:true,
+      disBoxShow: true
     };
   },
   created() {
@@ -376,41 +388,49 @@ export default {
       console.log("projectId", projectId);
       //获取人员统计
       getUserGroup({
-        projectId: projectId,
-      }).then((res) => {
+        projectId: projectId
+      }).then(res => {
         //   this.projectUser = res.data.data
         this.pieData = res.data.data;
       });
       // 施工人员组成
       getGroupCensus({
-        projectId: projectId,
-      }).then((res) => {
+        projectId: projectId
+      }).then(res => {
         this.constructionPersonnel = res.data.data;
-        console.log("this.constructionPersonnel",this.constructionPersonnel)
+        console.log("this.constructionPersonnel", this.constructionPersonnel);
       });
       //考勤监控
       getAttend({
-        projectId: projectId,
-      }).then((res) => {
-        this.peopleList = Object.keys(res.data.data).map((item,index)=>{
-            return {name:res.data.data[item].name,post:res.data.data[item].post,type:res.data.data[item].type,time:res.data.data[item].time,picture:res.data.data[item].picture,equipment:res.data.data[item].equipment,temperature:res.data.data[item].temperature}
-        })
+        projectId: projectId
+      }).then(res => {
+        this.peopleList = Object.keys(res.data.data).map((item, index) => {
+          return {
+            name: res.data.data[item].name,
+            post: res.data.data[item].post,
+            type: res.data.data[item].type,
+            time: res.data.data[item].time,
+            picture: res.data.data[item].picture,
+            equipment: res.data.data[item].equipment,
+            temperature: res.data.data[item].temperature
+          };
+        });
       });
       //站班会记录
       getRecentMeeting({
-          projectId: projectId,
-      }).then((res)=>{
-          this.meeting = res.data.data
-            var arr = [];
-            arr = res.data.data.picture.split(',');
-           console.log("arr",arr)
-      })
+        projectId: projectId
+      }).then(res => {
+        this.meeting = res.data.data;
+        var arr = [];
+        arr = res.data.data.picture.split(",");
+        console.log("arr", arr);
+      });
       //站班会统计
       getMonthCensus({
-          projectId: projectId,
-      }).then((res)=>{
-          this.radarList = res.data.data
-      })
+        projectId: projectId
+      }).then(res => {
+        this.radarList = res.data.data;
+      });
     },
 
     createMqtt() {
@@ -437,13 +457,12 @@ export default {
     },
     disBox() {
       this.boxNone = !this.boxNone;
-      if(this.boxNone == true){
-        
-          window.parent.closeBig();
-          this.disBoxShow=true
-      }else if(this.boxNone == false){
-          window.parent.openBig("openBig");
-          this.disBoxShow=false
+      if (this.boxNone == true) {
+        window.parent.closeBig();
+        this.disBoxShow = true;
+      } else if (this.boxNone == false) {
+        window.parent.openBig("openBig");
+        this.disBoxShow = false;
       }
       this.$refs.screenBox.style.animationPlayState = "running";
     },
@@ -487,12 +506,14 @@ export default {
           this.$refs.switchBtn.style.display = "block";
         }, 800);
       }
-    },
-  },
+    }
+  }
 };
 </script>
 
 <style scoped lang="less">
+@screen-xs: 1000px;
+@screen-lg: 2100px;
 .zzc {
   background: rgba(0, 0, 0, 0.4);
   width: 100%;
@@ -634,15 +655,21 @@ export default {
   background: url("~@/assets/pic/fullScreen.png") no-repeat;
   background-size: 100% 100%;
   position: absolute;
-  bottom: 30px;
+  bottom: 157px;
   right: 480px;
   overflow-x: hidden;
   transition: right 0.8s, height 1s;
   overflow-y: hidden; //重点
   // animation-play-state:paused;
   cursor: pointer;
-  @media only screen and (max-height: 1000px) {
-    bottom: 157px;
+  // @media only screen and (max-height: 1000px) {
+  //   bottom: 157px;
+  // }
+  @media only screen and (min-height: @screen-xs) and (max-height: 1200px) {
+    bottom: 30px;
+  }
+  @media only screen and (min-height: @screen-lg) {
+    bottom: 30px;
   }
 }
 
@@ -650,17 +677,17 @@ export default {
   font-size: 14px;
   font-family: SourceHanSansCN-Medium, SourceHanSansCN;
   font-weight: 500;
-//   margin-top: 10px;
-//   margin-left: 18px;
+  //   margin-top: 10px;
+  //   margin-left: 18px;
   width: 100%;
   display: flex;
-//   span:nth-child(1) {
-//     display: inline-block;
-//     width: 56px;
-//     text-align-last: justify;
-//   }
-  .textRight{
-      width: 50%;
+  //   span:nth-child(1) {
+  //     display: inline-block;
+  //     width: 56px;
+  //     text-align-last: justify;
+  //   }
+  .textRight {
+    width: 50%;
   }
 }
 
@@ -708,7 +735,7 @@ export default {
   text-align: center;
   line-height: 29px;
   position: absolute;
-  top: 316px;
+  top: 296px;
   left: 29px;
   font-size: 14px;
   font-family: SourceHanSansCN-Medium, SourceHanSansCN;
@@ -716,8 +743,14 @@ export default {
   color: #ffffff;
   padding-right: 6px;
 
-  @media only screen and (max-height: 1000px) {
-    top: 296px;
+  // @media only screen and (max-height: 1000px) {
+  //   top: 296px;
+  // }
+  @media only screen and (min-height: @screen-xs) and (max-height: 1200px) {
+    top: 316px;
+  }
+  @media only screen and (min-height: @screen-lg) {
+    top: 316px;
   }
 }
 
@@ -731,48 +764,52 @@ export default {
   color: #ffffff;
   padding: 0 22px 0 0px;
   height: 260px;
-    ::-webkit-scrollbar {
+  ::-webkit-scrollbar {
     display: none;
   }
-  .meetContent{
-      overflow: auto;
-      height: 90%;
-      width: 100%;
-      word-wrap: break-word;
-      word-break: break-all;
-     
+  .meetContent {
+    overflow: auto;
+    height: 90%;
+    width: 100%;
+    word-wrap: break-word;
+    word-break: break-all;
   }
 }
 
 .mettiogBox {
   line-height: 29px;
   position: absolute;
-  top: 353px;
+  top: 330px;
   font-size: 14px;
   font-family: SourceHanSansCN-Medium, SourceHanSansCN;
   font-weight: 500;
   color: #ffffff;
   padding: 0 22px 0 30px;
   height: 215px;
-    width: 100%;
-    box-sizing: border-box;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-  @media only screen and (max-height: 1000px) {
-    top: 330px;
+  width: 100%;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  // @media only screen and (max-height: 1000px) {
+  //   top: 330px;
+  // }
+  @media only screen and (min-height: @screen-xs) and (max-height: 1200px) {
+    top: 353px;
   }
-   ::-webkit-scrollbar {
+  @media only screen and (min-height: @screen-lg) {
+    top: 353px;
+  }
+  ::-webkit-scrollbar {
     display: none;
   }
-  .meetContent{
-      overflow: auto;
+  .meetContent {
+    overflow: auto;
     //   height: 90%;
-      height: 84%;
-      width: 100%;
-      word-wrap: break-word;
-      word-break: break-all;
-     
+    height: 84%;
+    width: 100%;
+    word-wrap: break-word;
+    word-break: break-all;
   }
 }
 
@@ -782,13 +819,13 @@ export default {
   background: url("~@/assets/pic/view.png") no-repeat;
   background-size: 100% 100%;
   float: right;
-//   margin-top: 13px;
+  //   margin-top: 13px;
   margin-right: 2px;
   cursor: pointer;
-margin-top: -5px;
-//   @media only screen and (max-height: 1000px) {
-//     margin-top: -22px;
-//   }
+  margin-top: -5px;
+  //   @media only screen and (max-height: 1000px) {
+  //     margin-top: -22px;
+  //   }
 }
 
 .videoBox {
@@ -823,7 +860,15 @@ margin-top: -5px;
   height: 100%;
   position: absolute;
 
-  @media only screen and (max-height: 1000px) {
+  // @media only screen and (max-height: 1000px) {
+  //   height: 299px;
+  //   top: -10px;
+  // }
+  @media only screen and (min-height: @screen-xs) and (max-height: 1200px) {
+    height: 299px;
+    top: -10px;
+  }
+  @media only screen and (min-height: @screen-lg) {
     height: 299px;
     top: -10px;
   }
@@ -832,13 +877,19 @@ margin-top: -5px;
 .kqjk {
   width: 100%;
   position: absolute;
-  top: 48px;
+  top: 24px;
   display: flex;
   ::-webkit-scrollbar {
-    display: none ;
+    display: none;
   }
-  @media only screen and (max-height: 1000px) {
-    top: 24px;
+  // @media only screen and (max-height: 1000px) {
+  //   top: 24px;
+  // }
+  @media only screen and (min-height: @screen-xs) and (max-height: 1200px) {
+    top: 48px;
+  }
+  @media only screen and (min-height: @screen-lg) {
+    top: 48px;
   }
 
   .oneKqjk {
@@ -869,12 +920,18 @@ margin-top: -5px;
   width: 194px;
   height: 194px;
   position: absolute;
-  top: 78px;
+  top: 58px;
   left: 50%;
   transform: translateX(-50%);
 
-  @media only screen and (max-height: 1000px) {
-    top: 58px;
+  // @media only screen and (max-height: 1000px) {
+  //   top: 58px;
+  // }
+  @media only screen and (min-height: @screen-xs) and (max-height: 1200px) {
+    top: 78px;
+  }
+  @media only screen and (min-height: @screen-lg) {
+    top: 78px;
   }
 }
 
@@ -927,35 +984,51 @@ margin-top: -5px;
 
 .leftOneBox {
   width: 442.38px;
-  height: 299px;
+  height: 269px;
   background: url("~@/assets/pic/rightBox.png") no-repeat;
   background-size: 100% 100%;
   position: absolute;
-  top: 97px;
+  top: 76px;
   left: 27px;
   overflow-x: hidden;
   transition: left 0.8s, height 1s;
   overflow-y: hidden; //重点
-  @media only screen and (max-height: 1000px) {
-    height: 269px;
-    top: 76px;
+  // @media only screen and (max-height: 1000px) {
+  //   height: 269px;
+  //   top: 76px;
+  // }
+  @media only screen and (min-height: @screen-xs) and (max-height: 1200px) {
+    top: 97px;
+    height: 299px;
+  }
+  @media only screen and (min-height: @screen-lg) {
+    top: 97px;
+    height: 299px;
   }
 }
 
 .leftTwoBox {
   width: 442.38px;
-  height: 299px;
+  height: 269px;
   background: url("~@/assets/pic/rightBox.png") no-repeat;
   background-size: 100% 100%;
   position: absolute;
-  top: 421px;
+  top: 364px;
   left: 27px;
   overflow-x: hidden;
   transition: left 0.8s, height 1s;
   overflow-y: hidden; //重点
-  @media only screen and (max-height: 1000px) {
-    height: 269px;
-    top: 364px;
+  // @media only screen and (max-height: 1000px) {
+  //   height: 269px;
+  //   top: 364px;
+  // }
+  @media only screen and (min-height: @screen-xs) and (max-height: 1200px) {
+    top: 421px;
+    height: 299px;
+  }
+  @media only screen and (min-height: @screen-lg) {
+    top: 421px;
+    height: 299px;
   }
 }
 
@@ -964,16 +1037,24 @@ margin-top: -5px;
   transition: left 0.8s, height 1s;
   overflow-y: hidden; //重点
   width: 444px;
-  height: 299px;
+  height: 269px;
   background: url("~@/assets/pic/rightBox.png") no-repeat;
   background-size: 100% 100%;
   position: absolute;
-  top: 746px;
+  top: 653px;
   left: 27px;
 
-  @media only screen and (max-height: 1000px) {
-    top: 653px;
-    height: 269px;
+  // @media only screen and (max-height: 1000px) {
+  //   top: 653px;
+  //   height: 269px;
+  // }
+  @media only screen and (min-height: @screen-xs) and (max-height: 1200px) {
+    top: 746px;
+    height: 299px;
+  }
+  @media only screen and (min-height: @screen-lg) {
+    top: 746px;
+    height: 299px;
   }
 }
 
@@ -982,16 +1063,24 @@ margin-top: -5px;
   transition: right 0.8s, height 1s;
   overflow-y: hidden; //重点
   width: 444px;
-  height: 629px;
+  height: 558px;
   background: url("~@/assets/pic/rightBoxsc.png") no-repeat;
   background-size: 100% 100%;
   position: absolute;
-  top: 96px;
+  top: 76px;
   right: 27px;
 
-  @media only screen and (max-height: 1000px) {
-    top: 76px;
-    height: 558px;
+  // @media only screen and (max-height: 1000px) {
+  //   top: 76px;
+  //   height: 558px;
+  // }
+  @media only screen and (min-height: @screen-xs) and (max-height: 1200px) {
+    top: 96px;
+    height: 629px;
+  }
+  @media only screen and (min-height: @screen-lg) {
+    top: 96px;
+    height: 629px;
   }
 }
 
@@ -1007,16 +1096,24 @@ margin-top: -5px;
   transition: right 0.8s, height 1s;
   overflow-y: hidden; //重点
   width: 442.38px;
-  height: 299px;
+  height: 269px;
   background: url("~@/assets/pic/rightBox.png") no-repeat;
   background-size: 100% 100%;
   position: absolute;
-  top: 749px;
+  top: 653px;
   right: 27px;
 
-  @media only screen and (max-height: 1000px) {
-    height: 269px;
-    top: 653px;
+  // @media only screen and (max-height: 1000px) {
+  //   height: 269px;
+  //   top: 269px;
+  // }
+  @media only screen and (min-height: @screen-xs) and (max-height: 1200px) {
+    top: 749px;
+    height: 299px;
+  }
+  @media only screen and (min-height: @screen-lg) {
+    top: 749px;
+    height: 299px;
   }
 }
 

src/views/swiper.vue

@@ -314,7 +314,7 @@ export default {
 .el-carousel__container {
   position: relative;
   /* height: 180px !important; */
-   height: 200px !important;
+   height: 200px ;
 }
 .el-carousel__indicators--horizontal{
     width:73%

src/views/swiperManagement.vue

@@ -1,18 +1,14 @@
 <template>
 
       <div class="home1">
+        <!-- :row-class-name="tableRowClassName"   :class="dateTypeClass" :cell-style="cellStyle"  @cell-click="cellClick"-->
     <el-table
       height="600"
       :data="list"
       class="tableListValue"
-      :row-class-name="tableRowClassName"
       style="width: 100%"
-      :class="dateTypeClass"
       row-key="id"
-      @cell-click="cellClick"
-      :cell-style="cellStyle"
        ref="table"
-       
     >
       <el-table-column
         prop="warnTime"

src/views/swiperPersonnel.vue

@@ -256,7 +256,7 @@ export default {
 .el-carousel__container {
   position: relative;
   /* height: 180px !important; */
-   height: 200px !important;
+   height: 200px ;
 }
 .el-carousel__indicators--horizontal{
     width:73%

src/views/videoSurveillanceComponents.vue

@@ -29,15 +29,47 @@
         @click="openChangebtn(item)"
       >
         <!-- <img :src="item.thumbnail" alt="" style="width: 100%; height: 100%" /> -->
-         <img v-show="item.status==false" :src="item.thumbnail" alt="" style="width: 100%; height: 100%"/>
-          <div class="openChange" @click="tzSp(item.equipmentName, item.id,item.thumbnail)" v-show="item.status==false"> 
-            <img src="../assets/pic/play.png" alt="" style="width:100%;height:100%">
-            </div>
-             <iframe  ref="iframe"  id="iframeid" :src="src" frameborder="0" class="iframe" scrolling="auto" width="100%"
-                    height="100%" v-show="item.status"> 
-            </iframe>  
+        <img
+          v-show="item.status == false"
+          :src="item.thumbnail"
+          alt=""
+          style="width: 100%; height: 100%"
+        />
+        <div
+          class="openChange"
+          @click="
+            tzSp(
+              item.equipmentName,
+              item.id,
+              item.thumbnail,
+              item.videoUrl,
+              item.onLineStatus
+            )
+          "
+          v-show="item.status == false"
+        >
+          <img
+            src="../assets/pic/play.png"
+            alt=""
+            style="width:100%;height:100%"
+          />
+        </div>
+        <iframe
+          ref="iframe"
+          id="iframeid"
+          :src="src + '?videoUrl=' + item.videoUrl"
+          frameborder="0"
+          class="iframe"
+          scrolling="auto"
+          width="100%"
+          height="100%"
+          v-if="item.status"
+        >
+        </iframe>
         <div class="childrenBox">
-          {{ item.equipmentName }}
+          <img src="../assets/pic/online.png" v-show="item.onLineStatus" />
+          <img src="../assets/pic/outline.png" v-show="!item.onLineStatus" />
+          <div>{{ item.equipmentName }}</div>
         </div>
       </div>
     </div>
@@ -60,7 +92,7 @@
                 class="process-one"
                 :text-inside="true"
                 :stroke-width="25"
-                :percentage="lockPer"
+                :percentage="parseFloat(lockPer.toFixed(2))"
               ></el-progress>
               <!-- </div> -->
             </div>
@@ -87,7 +119,7 @@
                 class="process-one"
                 :text-inside="true"
                 :stroke-width="25"
-                :percentage="movePer"
+                :percentage="parseFloat(movePer.toFixed(2))"
               ></el-progress>
             </div>
             <div style="margin-top: 10px">
@@ -124,7 +156,15 @@
             <!-- <span class="playBox" @click="tzSp"></span> -->
             <img
               :src="item.icon"
-              @click="tzSp(item.name, item.id,item.thumbnail)"
+              @click="
+                tzSp(
+                  item.name,
+                  item.id,
+                  item.thumbnail,
+                  item.videoUrl,
+                  item.onLineStatus
+                )
+              "
               style="
                 width: 16px;
                 height: 16px;
@@ -224,13 +264,14 @@ import pieChart from "@/components/common/pieChart";
 import pieDateChart from "@/components/common/pieDateChart";
 import Resize from "../utils/Resize.vue";
 import { getAllCamera, getAllCameraList, getCameraCount } from "@/api/api";
+
 export default {
   name: "report",
   components: {
     pieChart,
     RadarChart,
     pieDateChart,
-    Resize,
+    Resize
   },
   data() {
     return {
@@ -245,59 +286,59 @@ export default {
       colorList: ["#00A572", "#008AA4", "#7968D9", "#C7A73E"],
       tableData: [
         {
-          entName: "我打打死",
+          entName: "我打打死"
         },
         {
-          entName: "我打打死",
+          entName: "我打打死"
         },
         {
-          entName: "我打打死",
+          entName: "我打打死"
         },
         {
-          entName: "我打打死",
-        },
+          entName: "我打打死"
+        }
       ],
       qyList: [
         {
           name: "我的",
-          value: 12,
+          value: 12
         },
         {
           name: "我的",
-          value: 112,
+          value: 112
         },
         {
           name: "我的",
-          value: 132,
-        },
+          value: 132
+        }
       ],
       xArry: [],
       chartData: [],
       peopleList: [
         {
           name: "姓名",
-          value: "：王刚",
+          value: "：王刚"
         },
         {
           name: "岗位",
-          value: "：项目经理",
+          value: "：项目经理"
         },
         {
           name: "体温",
-          value: "：36.5℃",
+          value: "：36.5℃"
         },
         {
           name: "入场时间",
-          value: "：2022-11-26",
+          value: "：2022-11-26"
         },
         {
           name: "考勤类型",
-          value: "：进场",
+          value: "：进场"
         },
         {
           name: "打卡设备",
-          value: "：1号打卡机",
-        },
+          value: "：1号打卡机"
+        }
       ],
       vdaH: 0,
       type: false,
@@ -305,8 +346,8 @@ export default {
       numberList: [5, 5],
       rightThreeHeightBox: 0,
       leftOneBox: 0,
-       src:"", 
-       iframeShow:false,
+      src: "../static/flv/video1.html",
+      iframeShow: false
     };
   },
   created() {
@@ -321,14 +362,17 @@ export default {
         this.$router.go(0);
       }
     },
-    tzSp(name, id,thumbnail) {
+    tzSp(name, id, thumbnail, videoUrl, videoStatus) {
       // this.$router.push('/videoViewing')
       let videoObj = {
         videoName: name,
         videoId: id,
-        thumbnail:thumbnail
+        thumbnail: thumbnail,
+        videoUrl: videoUrl,
+        videoStatus: videoStatus
       };
-      console.log("videoObj",videoObj)
+      console.log("videoObj", videoObj);
+
       this.$emit("transfer", videoObj);
     },
     getDivHeight() {
@@ -370,70 +414,135 @@ export default {
         }, 800);
       }
     },
-     // vue获取iframe传递过来的信息
-    getiframeMsg(event){
+    // vue获取iframe传递过来的信息
+    getiframeMsg(event) {
       const res = event.data;
-      console.log(event)
-      if(res.cmd == 'myIframe'){
-        console.log(res)
+      if (res.cmd == "myIframe") {
       }
     },
     // vue向iframe传递信息
-    vueSendMsg(){
-        this.iframeMethods()
-    //   const iframeWindow = this.$refs.iframe.contentWindow;
-       const iframeWindow =document.getElementById('iframeid').contentWindow;
-      iframeWindow.postMessage({ 
-        cmd:'myVue',
-        params : {
-          info: 'Vue向iframe传递的消息',
-        } 
-      },'*')
-      
+    vueSendMsg() {
+      this.iframeMethods();
+      //   const iframeWindow = this.$refs.iframe.contentWindow;
+      const iframeWindow = document.getElementById("iframeid").contentWindow;
+      iframeWindow.postMessage(
+        {
+          cmd: "myVue",
+          params: {
+            info: "Vue向iframe传递的消息"
+            // url:API_CONFIG.dev.proxyTable["/live"].target,
+          }
+        },
+        "*"
+      );
     },
     // 触发iframe中的方法
-    iframeMethods(){
-      document.getElementById('iframeid').contentWindow.triggerByVue('通过Vue触发iframe中的方法');
+    iframeMethods() {
+      document
+        .getElementById("iframeid")
+        .contentWindow.triggerByVue("通过Vue触发iframe中的方法");
     },
-    openChangebtn(item){
-        item.status = true
-        // this.iframeShow = true
-        this.vueSendMsg()
+    openChangebtn(item) {
+      item.status = true;
+      // this.iframeShow = true
+      this.vueSendMsg();
+    },
+    //mqtt订阅
+    createMqtt() {
+      this.topicSends = ["third/equipmentStatus"];
+      window.PubScribe(this.topicSends, this.realInfo);
+      // this.$emit('mqttList', this.topicSends)
+    },
+    /** 实时数据分类 */
+    realInfo(topic, message) {
+      let that = this;
+      // console.log("topic",topic)
+      switch (topic) {
+        // 接收托片
+        case "third/equipmentStatus":
+          try {
+            const utf8decoder = new TextDecoder();
+            const u8arr = new Uint8Array(message);
+            const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
+            const msg = JSON.parse(temp); //这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据
+            console.log("设备状态", msg);
+            this.mqttUpVideoStatus(msg);
+          } catch (error) {}
+          break;
+      }
+    },
+    //接收mqtt数据修改摄像头状态
+    mqttUpVideoStatus(val) {
+      const upVideoStatus = this.videoAllList.filter(
+        item => item.id == val.equipmentId
+      );
+      if (upVideoStatus) {
+        if (val.equipmentStatus == 0) {
+          upVideoStatus[0].onLineStatus = true;
+        } else {
+          upVideoStatus[0].onLineStatus = false;
+        }
+      } else {
+        return false;
+      }
     }
   },
   mounted() {
-    this.switchDiv();
+    window.createMqtt = this.createMqtt;
+    this.createMqtt();
+    this.vueSendMsg();
+    // this.switchDiv();
     this.getDivHeight();
     window.addEventListener("resize", this.getDivHeight);
     //获取所有监控
-    getAllCamera().then((res) => {
+    getAllCamera().then(res => {
       this.videoAllList = Object.keys(res.data.data).map((item, index) => {
+        let videoPic = "";
+        if (res.data.data[item].thumbnail != "") {
+          videoPic = res.data.data[item].thumbnail;
+        } else {
+          videoPic = require("@/assets/pic/videoPic.png");
+        }
+        if (res.data.data[item].equipmentStatus == "在用") {
+          res.data.data[item].onLine = true;
+        } else {
+          res.data.data[item].onLine = false;
+        }
         return {
-          thumbnail: res.data.data[item].thumbnail,
-        //   thumbnail:require('@/assets/cscs2.png'),
+          thumbnail: videoPic,
+          //   thumbnail:require('@/assets/cscs2.png'),
           equipmentName: res.data.data[item].equipmentName,
-        //   equipmentName:'隧道入口监控',
+          //   equipmentName:'隧道入口监控',
           id: res.data.data[item].id,
-          status:false
+          videoUrl: res.data.data[item].url,
+          onLineStatus: res.data.data[item].onLine,
+          status: true
         };
       });
     });
     //获取所有接口列表
-    getAllCameraList().then((res) => {
+    getAllCameraList().then(res => {
       this.videoList = Object.keys(res.data.data).map((item, index) => {
+        if (res.data.data[item].equipmentStatus == "在用") {
+          res.data.data[item].onLine = true;
+        } else {
+          res.data.data[item].onLine = false;
+        }
         return {
           name: res.data.data[item].equipmentName,
           icon: require("../assets/pic/play.png"),
           lookOver: "查看",
           id: res.data.data[item].id,
-           thumbnail: res.data.data[item].thumbnail,
+          thumbnail: res.data.data[item].thumbnail,
+          videoUrl: res.data.data[item].url,
+          onLineStatus: res.data.data[item].onLine
         };
       });
-      this.src = '../static/flv/video1.html';
-        window.addEventListener('message',this.getiframeMsg)
+      // this.src = '../static/flv/video1.html';
+      window.addEventListener("message", this.getiframeMsg);
     });
     //获取摄像头数量接口
-    getCameraCount().then((res) => {
+    getCameraCount().then(res => {
       this.allLock = res.data.data.allLock;
       this.onlineLock = res.data.data.onlineLock;
       this.allMove = res.data.data.allMove;
@@ -445,16 +554,18 @@ export default {
         this.movePer = (this.onlineMove / this.allMove) * 100;
       }
     });
-  },
+  }
 };
 </script>
 
 <style scoped lang="less">
-.bg{
-    width: 100%;
-    height: 100%;
-    background: url("~@/assets/videobg.png") no-repeat;
-    background-size: 100%;
+@screen-xs: 1000px;
+@screen-lg: 2100px;
+.bg {
+  width: 100%;
+  height: 100%;
+  background: url("~@/assets/videobg.png") no-repeat;
+  background-size: 100%;
 }
 .scroller::-webkit-scrollbar {
   width: 11px;
@@ -483,27 +594,35 @@ export default {
 
 .scFathBox {
   width: 1375px;
-    height: 864px;
-    overflow: auto;
-    position: absolute;
-    top: 180px;
-    left: 48px;
+  height: 790px;
+  overflow: auto;
+  position: absolute;
+  top: 135px;
+  left: 48px;
   display: flex;
   flex-wrap: wrap;
-  justify-content: space-around;
+  // justify-content: space-around;
+  justify-content: flex-start;
 
-  @media only screen and (max-height: 1000px) {
-    top: 135px;
-    height: 790px;
+  // @media only screen and (max-height: 1000px) {
+  //   top: 135px;
+  //   height: 790px;
+  // }
+  @media only screen and (min-height: @screen-xs) and (max-height: 1200px) {
+    top: 180px;
+    height: 864px;
+  }
+  @media only screen and (min-height: @screen-lg) {
+    top: 180px;
+    height: 864px;
   }
-
   .scFathChild:hover {
     transform: scale(1.1);
   }
 
   .scFathChild {
     // width: 311px;
-    width:23%;
+    width: 23%;
     height: 251px;
     margin-bottom: 43px;
     border: 1px solid rgba(0, 235, 235, 0.2);
@@ -511,7 +630,7 @@ export default {
     position: relative;
     cursor: pointer;
     transition: All 0.2s ease-in-out;
-     background: url("~@/assets/pic/top.png") no-repeat;
+    background: url("~@/assets/pic/top.png") no-repeat;
     .childrenBox {
       // width: 123px;
       height: 30px;
@@ -525,13 +644,18 @@ export default {
       font-family: SourceHanSansCN-Medium, SourceHanSansCN;
       font-weight: 500;
       color: #ffffff;
+      width: 100%;
+      display: flex;
+      justify-content: space-between;
+      padding: 0 10px;
+      box-sizing: border-box;
     }
-     .openChange{
-        position: absolute;
-    width: 9%;
-    height: 10%;
-    bottom: 5%;
-    right: 5%;
+    .openChange {
+      position: absolute;
+      width: 9%;
+      height: 10%;
+      bottom: 5%;
+      right: 5%;
     }
   }
 }
@@ -708,14 +832,19 @@ export default {
   background: url("~@/assets/pic/rightBox.png") no-repeat;
   background-size: 100% 100%;
   position: absolute;
-  top: 96px;
+  top: 76px;
   right: 27px;
   font-family: SourceHanSansCN-Medium, SourceHanSansCN;
 
-  @media only screen and (max-height: 1000px) {
-    top: 76px;
+  // @media only screen and (max-height: 1000px) {
+  //   top: 76px;
+  // }
+  @media only screen and (min-height: @screen-xs) and (max-height: 1200px) {
+    top: 96px;
+  }
+  @media only screen and (min-height: @screen-lg) {
+    top: 96px;
   }
-
   .tjBox {
     position: absolute;
     top: 92px;
@@ -762,7 +891,7 @@ export default {
           /deep/ .el-progress-bar__inner {
             background-color: unset;
             // background-image: linear-gradient(89deg, #105752, #25e8b3);
-              background-image: linear-gradient(89deg, #E2C869, #EED78E);
+            background-image: linear-gradient(89deg, #e2c869, #eed78e);
             border-radius: 0;
           }
           /deep/ .el-progress-bar__outer {
@@ -782,17 +911,24 @@ export default {
   width: 100%;
   height: 80%;
   position: absolute;
-  top: 86px;
+  top: 66px;
   overflow-y: auto;
   ::-webkit-scrollbar {
     display: none;
   }
-  @media only screen and (max-height: 1000px) {
-    top: 66px;
-    // overflow: hidden;
+  // @media only screen and (max-height: 1000px) {
+  //   top: 66px;
+  //   // overflow: hidden;
+  //   overflow: auto;
+  // }
+  @media only screen and (min-height: @screen-xs) and (max-height: 1200px) {
+    top: 86px;
+    overflow: auto;
+  }
+  @media only screen and (min-height: @screen-lg) {
+    top: 86px;
     overflow: auto;
   }
-
   .vidBox {
     width: 354px;
     height: 46px;
@@ -804,8 +940,8 @@ export default {
     display: flex;
     align-items: center;
     margin-left: 30px;
-    justify-content: space-around;
-
+    justify-content: space-between;
+    padding: 0 20px;
     .playBox {
       display: inline-block;
       width: 16px;
@@ -829,19 +965,33 @@ export default {
 
 .rightThreeBox {
   width: 424px;
-  height: 629px;
+  height: 510px;
   background: url("~@/assets/pic/rightTwoBox.png") no-repeat;
   background-size: 100% 100%;
   position: absolute;
-  top: 421px;
+  top: 401px;
   right: 27px;
   ::-webkit-scrollbar {
     display: none;
   }
-  @media only screen and (max-height: 1000px) {
-    top: 401px;
-    height: 510px;
-    // overflow: hidden;
+  // @media only screen and (max-height: 1000px) {
+  //   top: 401px;
+  //   height: 510px;
+  //   // overflow: hidden;
+  //   ::-webkit-scrollbar {
+  //     display: none;
+  //   }
+  // }
+  @media only screen and (min-height: @screen-xs) and (max-height: 1200px) {
+    top: 421px;
+    height: 629px;
+    ::-webkit-scrollbar {
+      display: none;
+    }
+  }
+  @media only screen and (min-height: @screen-lg) {
+    top: 421px;
+    height: 629px;
     ::-webkit-scrollbar {
       display: none;
     }

src/views/videoViewingComponents.vue

@@ -26,18 +26,74 @@
           alt=""
           style="width: 100%; height: 100%"
         /> -->
-         <img
-        v-if="closeVideoShow"
+
+        <!-- <img
+           v-if="closeVideoShow"
           :src="thumbnail"
           alt=""
           style="width: 100%; height: 100%"
         />
-        <Video :videoitemUrl="videoitemUrl" :videoUrllist="videoUrllist" v-if="openVideoShow"></Video>
-          <div class="childrenBox"> 
+        <Video :videoitemUrl="videoitemUrl" :videoUrllist="videoUrllist" v-if="openVideoShow"></Video> -->
+        <div style="width: 100%; height: 100%" v-show="carouselShow">
+          <img
+            v-if="!videoOnlineStatus"
+            :src="thumbnail"
+            alt=""
+            style="width: 100%; height: 100%"
+          />
+          <iframe
+            ref="iframe"
+            id="iframeid"
+            :src="'../static/flv/videoIndex5.html?videoUrl=' + videoOnlineUrl"
+            frameborder="0"
+            class="iframe"
+            scrolling="auto"
+            width="100%"
+            height="100%"
+            v-else
+          >
+          </iframe>
+        </div>
+        <div
+          style="width: 100%; height: 100%"
+          v-show="!carouselShow"
+          class="carouselVideo"
+        >
+          <el-carousel
+            trigger="click"
+            height="100%"
+            width="100%"
+            :autoplay="false"
+            @change="carouselChange"
+          >
+            <el-carousel-item
+              v-for="(item, index) in videoitemUrl"
+              :key="index"
+            >
+              <div class="outLiveTime">
+                <div>开始时间:{{ item.startTime }}</div>
+                <div>结束时间:{{ item.endTime }}</div>
+              </div>
+              <video
+                ref="myVideo"
+                :id="'videoPlayer' + index"
+                width="100%"
+                height="95%"
+                :src="item.path"
+                controls
+              ></video>
+            </el-carousel-item>
+          </el-carousel>
+        </div>
+        <div class="childrenBox">
           {{ videoName }}
         </div>
       </div>
     </div>
+    <!-- 实时视频按钮切换 -->
+    <div class="liveBetton" v-show="isShowLookFor">
+      <el-button type="primary" round @click="liveChange">实时视频</el-button>
+    </div>
     <!-- 右侧模块1 -->
     <div class="rightOneBox">
       <div class="titName">
@@ -56,7 +112,7 @@
                 class="process-one"
                 :text-inside="true"
                 :stroke-width="25"
-                :percentage="lockPer"
+                :percentage="parseFloat(lockPer.toFixed(2))"
               ></el-progress>
             </div>
             <div style="margin-top: 10px">
@@ -82,7 +138,7 @@
                 class="process-one"
                 :text-inside="true"
                 :stroke-width="25"
-                :percentage="movePer"
+                :percentage="parseFloat(movePer.toFixed(2))"
               ></el-progress>
             </div>
             <div style="margin-top: 10px">
@@ -115,10 +171,10 @@
               popper-class="elDatePicker"
               style="width: 100%"
               v-model="timeForm.start"
-              value-format= 'yyyy-MM-dd HH:mm:ss'
+              value-format="yyyy-MM-dd HH:mm:ss"
               type="datetime"
               placeholder="选择日期时间"
-            default-time="00:00:00"
+              default-time="00:00:00"
             >
             </el-date-picker>
           </el-form-item>
@@ -128,7 +184,7 @@
               style="width: 100%"
               v-model="timeForm.end"
               type="datetime"
-               value-format= 'yyyy-MM-dd HH:mm:ss'
+              value-format="yyyy-MM-dd HH:mm:ss"
               placeholder="选择日期时间"
               :picker-options="pickerOptions"
               default-time="23:59:59"
@@ -149,17 +205,24 @@
         <span></span>
       </div>
       <div class="kzBtn">
-        <div :class="[isShowLookFor ? 'viedoOne' : 'viedo2One']"></div>
+        <div
+          :class="[isShowLookFor ? 'viedoOne' : 'viedo2One']"
+          @click="playBackVidoe"
+        ></div>
         <div
           @click="bfClick"
           :class="[
             isShowLookFor ? 'ciedo2One' : 'ciedoOne',
-            bfkzBtn ? 'xsbfOne' : 'ciedoOne',
+            bfkzBtn ? 'xsbfOne' : 'ciedoOne'
           ]"
         ></div>
-        <div :class="[isShowLookFor ? 'diedo2One' : 'diedoOne']"></div>
+        <div
+          :class="[isShowLookFor ? 'diedo2One' : 'diedoOne']"
+          @mousedown="downPlay"
+          @mouseup="upPlay"
+        ></div>
       </div>
-      <div class="bottomTitle"> {{ videoName }}</div>
+      <div class="bottomTitle">{{ videoName }}</div>
     </div>
   </div>
 
@@ -172,23 +235,31 @@ import pieChart from "@/components/common/pieChart";
 import pieDateChart from "@/components/common/pieDateChart";
 import Resize from "../utils/Resize.vue";
 import { getCameraCount, getCameraHistory } from "@/api/api";
-import flvjs from 'flv.js'
+import flvjs from "flv.js";
 import Video from "./video";
 export default {
   name: "report",
   props: {
     videoName: {
       type: String,
-      default: "",
+      default: ""
     },
     videoId: {
       type: String,
-      default: "",
+      default: ""
     },
     thumbnail: {
       type: String,
-      default: "",
+      default: ""
     },
+    videoOnlineStatus: {
+      type: Boolean,
+      default: true
+    },
+    videoOnlineUrl: {
+      type: String,
+      default: ""
+    }
   },
   components: {
     pieChart,
@@ -199,6 +270,7 @@ export default {
   },
   data() {
     return {
+      carouselShow: true, //轮播图视频
       allLock: 0, //所有固定摄像头
       allMove: 0, //所有移动摄像头
       onlineLock: 0, //在线固定摄像头
@@ -207,74 +279,77 @@ export default {
       movePer: 0, //移动摄像头占比
       timeForm: {
         start: "",
-        end: "",
+        end: ""
       },
       pickerOptions: {
-　　disabledDate: (time) => {
-        const date = new Date(this.timeForm.start);
-              const day = 1 * 24 * 3600 * 1000-1;
-              const dateRegion = date.getTime() + day;
-　　　return new Date(time).getTime() > dateRegion || new Date(time).getTime() < date.getTime()
-}
-　},  
-      closeVideoShow:true,
-      openVideoShow:false,
+        disabledDate: time => {
+          const date = new Date(this.timeForm.start);
+          const day = 1 * 24 * 3600 * 1000 - 1;
+          const dateRegion = date.getTime() + day;
+          return (
+            new Date(time).getTime() > dateRegion ||
+            new Date(time).getTime() < date.getTime()
+          );
+        }
+      },
+      closeVideoShow: true,
+      openVideoShow: false,
       colorList: ["#00A572", "#008AA4", "#7968D9", "#C7A73E"],
       tableData: [
         {
-          entName: "我打打死",
+          entName: "我打打死"
         },
         {
-          entName: "我打打死",
+          entName: "我打打死"
         },
         {
-          entName: "我打打死",
+          entName: "我打打死"
         },
         {
-          entName: "我打打死",
-        },
+          entName: "我打打死"
+        }
       ],
       qyList: [
         {
           name: "我的",
-          value: 12,
+          value: 12
         },
         {
           name: "我的",
-          value: 112,
+          value: 112
         },
         {
           name: "我的",
-          value: 132,
-        },
+          value: 132
+        }
       ],
       xArry: [],
       chartData: [],
       peopleList: [
         {
           name: "姓名",
-          value: "：王刚",
+          value: "：王刚"
         },
         {
           name: "岗位",
-          value: "：项目经理",
+          value: "：项目经理"
         },
         {
           name: "体温",
-          value: "：36.5℃",
+          value: "：36.5℃"
         },
         {
           name: "入场时间",
-          value: "：2022-11-26",
+          value: "：2022-11-26"
         },
         {
           name: "考勤类型",
-          value: "：进场",
+          value: "：进场"
         },
         {
           name: "打卡设备",
-          value: "：1号打卡机",
-        },
+          value: "：1号打卡机"
+        }
       ],
       vdaH: 0,
       type: false,
@@ -284,59 +359,116 @@ export default {
       leftOneBox: 0,
       isShowLookFor: false,
       bfkzBtn: false,
-      videoUrllist:[
-        {id:"001",path:require('../assets/map4/5.mp4')},
-        {id:"002",path:require('../assets/map4/6.mp4')}
-        ],
-      videoitemUrl:require('../assets/map4/5.mp4')
-      
+      videoUrllist: [
+        { id: "001", path: require("../assets/map4/5.mp4") },
+        { id: "002", path: require("../assets/map4/6.mp4") }
+      ],
+      // videoitemUrl: require("../assets/map4/5.mp4"),
+      videoitemUrl: "",
+      carouselIndex: 0, //轮播图当前索引
+      timePlay: null, //长按视频定时器
+      rewindTimeout: null //后退视频定时器
     };
   },
   created() {
     let h = document.documentElement.clientHeight || document.body.clientHeight;
     this.vdaH = h - 0 + "px";
-    console.log("thumbnail",thumbnail)
   },
   methods: {
+    //后退视频
+    playBackVidoe() {
+      let video = document.getElementById("videoPlayer" + this.carouselIndex);
+      const rewindStep = 10; // 后退步长（秒）
+      video.currentTime -= rewindStep;
+      //  this.rewindTimeout = setInterval(this.startRewind, 1000);
+    },
+    //停止后退
+    stopBack() {
+      // clearTimeout(this.rewindTimeout);
+      // this.rewindTimeout = null
+    },
+    //快进视频
+    downPlay() {
+      let video = document.getElementById("videoPlayer" + this.carouselIndex);
+      this.timePlay = setTimeout(() => {
+        console.log("长按时间");
+        video.playbackRate = 2.0;
+      }, 1000);
+    },
+    upPlay() {
+      console.log("停止快进");
+      let video = document.getElementById("videoPlayer" + this.carouselIndex);
+      video.playbackRate = 1.0;
+      clearTimeout(this.timePlay);
+      this.timePlay = null;
+    },
+    playBack() {
+      let video = document.getElementById("videoPlayer" + this.carouselIndex);
+      video.playBackRate = 1;
+    },
+    //切换播放实时视频
+    liveChange() {
+      (this.carouselShow = true), (this.timeForm.start = "");
+      this.timeForm.end = "";
+      this.isShowLookFor = false;
+      this.bfkzBtn = false;
+    },
+    //轮播视频选择事件
+    carouselChange(val) {
+      this.carouselIndex = val;
+      let video = document.getElementById("videoPlayer" + this.carouselIndex);
+      if (video.paused) {
+        this.bfkzBtn = false;
+      } else {
+        this.bfkzBtn = true;
+      }
+    },
     //点击播放按
     bfClick() {
-        console.log("this.isShowLookFor",this.isShowLookFor)
-       
+      console.log("this.isShowLookFor", this.isShowLookFor);
+      let video = document.getElementById("videoPlayer" + this.carouselIndex);
       if (this.isShowLookFor) {
         this.bfkzBtn = !this.bfkzBtn;
-         if(this.bfkzBtn==false){
-           console.log("this.bfkzBtn11",this.bfkzBtn)
-            this.closeVideoShow =true
-            this.openVideoShow=false
-        }else if(this.bfkzBtn==true){
-             console.log("this.bfkzBtn222",this.bfkzBtn)
-            this.closeVideoShow =false
-            this.openVideoShow=true
+        if (this.bfkzBtn == false) {
+          console.log("this.bfkzBtn11", this.bfkzBtn);
+          this.closeVideoShow = true;
+          this.openVideoShow = false;
+          video.pause();
+        } else if (this.bfkzBtn == true) {
+          console.log("this.bfkzBtn222", this.bfkzBtn);
+          this.closeVideoShow = false;
+          this.openVideoShow = true;
+          video.play();
         }
       }
-      
     },
     //点击开始查看按钮
     lookForVideo() {
       if (this.timeForm.start == "" && this.timeForm.end == "") {
         this.isShowLookFor = false;
       } else {
-        console.log("this.timeForm.start",this.timeForm.start)
-        console.log("this.timeForm.end",this.timeForm.end)
+        console.log("this.timeForm.start", this.timeForm.start);
+        console.log("this.timeForm.end", this.timeForm.end);
         let data = {
           equipmentId: this.videoId,
-        //   startTime: this.$moment(this.timeForm.start).format("YYYY-MM-DD hh:mm:ss"),
-        //   endTime: this.$moment(this.timeForm.end).format("YYYY-MM-DD hh:mm:ss"),
-           startTime: this.timeForm.start,
-          endTime: this.timeForm.end,
+          //   startTime: this.$moment(this.timeForm.start).format("YYYY-MM-DD hh:mm:ss"),
+          //   endTime: this.$moment(this.timeForm.end).format("YYYY-MM-DD hh:mm:ss"),
+          startTime: this.timeForm.start,
+          endTime: this.timeForm.end
         };
-        getCameraHistory(data).then((res) => {
-            console.log(res.data,'qqqqqqqqqqqqqqqqqqqqqqqqqqq');
-            if(res.data.code==200){
-                if(res.data.data.length==1){
-                    this.videoitemUrl =res.data.data[0].path
-                }
+        getCameraHistory(data).then(res => {
+          if (res.data.code == 200) {
+            if (res.data.data.lenght != 0) {
+              this.carouselShow = false;
+              this.videoitemUrl = res.data.data;
+            } else {
+              this.$message.warning("暂无历史视频");
             }
+
+            // if (res.data.data.length == 1) {
+            //   this.videoitemUrl = res.data.data[0].path;
+            // }
+          }
         });
         this.isShowLookFor = true;
       }
@@ -389,14 +521,19 @@ export default {
           this.$refs.switchBtn.style.display = "block";
         }, 800);
       }
-    },
+    }
   },
   mounted() {
-    this.switchDiv();
+    console.log(
+      this.videoOnlineUrl,
+      this.videoOnlineStatus,
+      "videoOnlineUrl,videoOnlineStatus"
+    );
+    // this.switchDiv();
     this.getDivHeight();
     window.addEventListener("resize", this.getDivHeight);
     //获取摄像头数量接口
-    getCameraCount().then((res) => {
+    getCameraCount().then(res => {
       this.allLock = res.data.data.allLock;
       this.onlineLock = res.data.data.onlineLock;
       this.allMove = res.data.data.allMove;
@@ -408,11 +545,13 @@ export default {
         this.movePer = (this.onlineMove / this.allMove) * 100;
       }
     });
-  },
+  }
 };
 </script>
 
 <style scoped lang="less">
+@screen-xs: 969px;
+@screen-lg: 2100px;
 .titTop {
   width: 100%;
   position: absolute;
@@ -473,9 +612,16 @@ export default {
     display: none;
   }
 }
-
+.outLiveTime {
+  width: 30%;
+  height: 30px;
+  color: #fff;
+  z-index: 999;
+  position: absolute;
+}
 .scFathBox {
   width: 1375px;
+  height:100%;
   position: absolute;
   top: 152px;
   left: 48px;
@@ -485,11 +631,17 @@ export default {
 
   .scFathChild {
     width: 100%;
-    height: 100%;
+    height: 745px;
     border: 1px solid rgba(0, 235, 235, 0.2);
     padding: 3px;
     position: relative;
+    @media only screen and (min-height: @screen-xs) and (max-height: 1200px) {
+      height: 863px;
      
+    }
+    @media only screen and (min-height: @screen-lg) {
+      height: 863px;
+    }
     .childrenBox {
       // width: 123px;
       height: 30px;
@@ -503,6 +655,7 @@ export default {
       font-family: SourceHanSansCN-Medium, SourceHanSansCN;
       font-weight: 500;
       color: #ffffff;
+      z-index: 999;
     }
   }
 }
@@ -620,35 +773,62 @@ export default {
     background-size: 100% 100%;
   }
 }
-
+.liveBetton {
+  // width:30px;
+  // height:20px;
+  position: absolute;
+  top: 110px;
+  right: 25%;
+  .el-button--primary {
+    background: rgb(23, 210, 200);
+    border-color: rgb(23, 210, 200);
+  }
+}
 .rightOneBox {
   width: 422px;
-  height: 300px;
+  height: 270px;
   background: url("~@/assets/pic/rightBox.png") no-repeat;
   background-size: 100% 100%;
   position: absolute;
-  top: 97px;
+  top: 77px;
   right: 27px;
   font-family: SourceHanSansCN-Medium, SourceHanSansCN;
 
-  @media only screen and (max-height: 969px) {
-    height: 270px;
-    top: 77px;
+  // @media only screen and (max-height: 969px) {
+  //   height: 270px;
+  //   top: 77px;
 
+  //   .tjBox {
+  //     top: 64px;
+  //   }
+  // }
+  @media only screen and (min-height: @screen-xs) and (max-height: 1200px) {
+    height: 300px;
+    top: 97px;
     .tjBox {
-      top: 64px;
+      top: 84px;
+    }
+  }
+  @media only screen and (min-height: @screen-lg) {
+    height: 300px;
+    top: 97px;
+    .tjBox {
+      top: 84px;
     }
   }
-
   .tjBox {
     position: absolute;
-    top: 92px;
+    top: 64px;
     left: 56px;
-
-    @media only screen and (max-height: 969px) {
-      top: 64px;
+    // @media only screen and (max-height: 969px) {
+    //   top: 64px;
+    // }
+    @media only screen and (min-height: @screen-xs) and (max-height: 1200px) {
+      top: 92px;
+    }
+    @media only screen and (min-height: @screen-lg) {
+      top: 92px;
     }
-
     .tt1 {
       background: url("~@/assets/pic/guding.png") no-repeat;
       background-size: 100% 100%;
@@ -692,7 +872,7 @@ export default {
           /deep/ .el-progress-bar__inner {
             background-color: unset;
             // background-image: linear-gradient(89deg, #105752, #25e8b3);
-            background-image: linear-gradient(89deg, #E2C869, #EED78E);
+            background-image: linear-gradient(89deg, #e2c869, #eed78e);
             border-radius: 0;
           }
           /deep/ .el-progress-bar__outer {
@@ -711,16 +891,21 @@ export default {
 .kzBtn {
   display: flex;
   position: absolute;
-  top: 107px;
+  top: 97px;
   display: flex;
   align-items: center;
   left: 50%;
   transform: translateX(-50%);
 
-  @media only screen and (max-height: 969px) {
-    top: 97px;
+  // @media only screen and (max-height: 969px) {
+  //   top: 97px;
+  // }
+  @media only screen and (min-height: @screen-xs) and (max-height: 1200px) {
+    top: 107px;
+  }
+  @media only screen and (min-height: @screen-lg) {
+    top: 107px;
   }
-
   .viedoOne {
     width: 60px;
     height: 60px;
@@ -778,7 +963,6 @@ export default {
     background: url("~@/assets/pic/notbf.png") no-repeat;
     background-size: 100% 100%;
     margin: 0 28px;
-    cursor: pointer;
   }
 
   .ciedo2One {
@@ -829,13 +1013,19 @@ export default {
   background: url("~@/assets/pic/monitor.png") no-repeat;
   background-size: 100% 100%;
   position: absolute;
-  bottom: 37px;
+  bottom: 20px;
   left: 50%;
   transform: translateX(-50%);
   cursor: pointer;
 
-  @media only screen and (max-height: 969px) {
-    bottom: 20px;
+  // @media only screen and (max-height: 969px) {
+  //   bottom: 20px;
+  // }
+  @media only screen and (min-height: @screen-xs) and (max-height: 1200px) {
+    bottom: 37px;
+  }
+  @media only screen and (min-height: @screen-lg) {
+    bottom: 37px;
   }
 }
 
@@ -904,37 +1094,53 @@ export default {
 
 .rightTwoBox {
   width: 422px;
-  height: 299px;
+  height: 270px;
   background: url("~@/assets/pic/rightBox.png") no-repeat;
   background-size: 100% 100%;
   position: absolute;
-  top: 422px;
+  top: 366px;
   right: 27px;
 
-  @media only screen and (max-height: 969px) {
-    top: 366px;
-    height: 270px;
+  // @media only screen and (max-height: 969px) {
+  //   top: 366px;
+  //   height: 270px;
+  // }
+  @media only screen and (min-height: @screen-xs) and (max-height: 1200px) {
+    top: 422px;
+    height: 299px;
+  }
+  @media only screen and (min-height: @screen-lg) {
+    top: 422px;
+    height: 299px;
   }
 }
 
 .rightThreeBox {
   width: 422px;
-  height: 299px;
+  height: 270px;
   background: url("~@/assets/pic/rightBox.png") no-repeat;
   background-size: 100% 100%;
   position: absolute;
-  top: 746px;
+  top: 654px;
   right: 27px;
-  @media only screen and (max-height: 969px) {
-    height: 270px;
-    top: 654px;
+  // @media only screen and (max-height: 969px) {
+  //   height: 270px;
+  //   top: 654px;
+  // }
+  @media only screen and (min-height: @screen-xs) and (max-height: 1200px) {
+    top: 746px;
+    height: 299px;
+  }
+  @media only screen and (min-height: @screen-lg) {
+    top: 746px;
+    height: 299px;
   }
   .bottomTitle {
     width: 100%;
     height: 36px;
     background: rgba(0, 37, 35, 0.5);
     position: absolute;
-    bottom: 31px;
+    bottom: 15px;
     // left: 142px;
     font-size: 16px;
     text-align: center;
@@ -943,8 +1149,14 @@ export default {
     font-weight: 500;
     color: #ffffff;
 
-    @media only screen and (max-height: 969px) {
-      bottom: 15px;
+    // @media only screen and (max-height: 969px) {
+    //   bottom: 15px;
+    // }
+    @media only screen and (min-height: @screen-xs) and (max-height: 1200px) {
+      bottom: 31px;
+    }
+    @media only screen and (min-height: @screen-lg) {
+      bottom: 31px;
     }
   }
 }
@@ -1080,8 +1292,20 @@ export default {
   background-size: 100% 100%;
   cursor: pointer;
 }
+/deep/ .el-carousel--horizontal {
+  overflow-x: hidden;
+  height: 100% !important;
+}
+/deep/ .el-carousel__container {
+  height: 100% !important;
+}
+/deep/ .el-carousel__indicators--horizontal {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+}
 </style>
-<style  lang="less" >
+<style lang="less">
 .securityCheck {
   .el-form-item__label {
     color: #fff;
@@ -1101,8 +1325,7 @@ export default {
 }
 </style>
 
-
-  <!-- <style lang="less">
+<!-- <style lang="less">
   .el-picker-panel {
     background: #0f0472a9 !important;
     color: #ffffff;
@@ -1152,4 +1375,3 @@ export default {
     color: #ffffff;
   }
   </style> -->
-

static/flv/demo1.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" style="height: 100%!important;">
 
 <head>
     <meta charset="UTF-8">
@@ -44,7 +44,7 @@
 	}
  .videojs-flvjs-player-dimensions {
     width: 100%!important;
-    height: 217px!important;
+    height: 100%!important;
     overflow-x: hidden;
         overflow-y: hidden;
 }
@@ -61,7 +61,7 @@
 
 <body>
 	<div id="videoContainer"   width="100%" 
-    height="100%" >
+    style="height: 100%!important;" >
 		<video 
 	    id="videojs-flvjs-player" 
 	    class="video-js vjs-default-skin vjs-big-play-centered" 
@@ -70,7 +70,7 @@
 		autoplay=true
 	    width="100%" 
 	    height="100%" 
-	    
+	    muted="muted"
 	    data-setup="{}"
 		>
       
@@ -81,8 +81,16 @@
 </body>
 <script>
 //var flvUrl = "ws://192.168.3.245/transform/ch1.live.flv";
-var flvUrl = "http://175.27.191.156:18080/transform/ch1.live.flv";
+// var flvUrl = "http://175.27.191.156:18080/transform/ch1.live.flv";
+var flvUrl = ""
 var player = null;
+function getQueryString(name) {
+            var reg = new RegExp("(^|&)" + name + "=([^'']*)(&|$)", "i");
+            // var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
+            var r = window.location.search.substr(1).match(reg);
+            if (r != null) return unescape(r[2]); return null;
+}
+console.log(getQueryString('videoUrl'),'shipin');
  // iframe向vue传递信息
  function iframeSendMsg(){
     window.parent.postMessage({ 
@@ -107,7 +115,7 @@ var player = null;
   function getVueMsg(event){
     const res = event.data;
     if(res.cmd == 'myVue'){
-      console.log("获取vue传来的数据",res.params.info)
+    //   console.log("获取vue传来的数据",res.params.info)
       flvUrl = res.params.info
     //   console.log("flvUrl",flvUrl)
     //   initPlayer(res.params.info)
@@ -115,7 +123,7 @@ var player = null;
     }
   };
   function triggerByVue(msg){
-    console.log(msg)
+    // console.log(msg)
     // flvUrl = msg
     // initPlayer(msg);
     // player.play();
@@ -130,7 +138,7 @@ function initPlayer(){
       videoContainer.removeChild(pObjs[i]);
     }
 	
-	videoContainer.innerHTML = "<video id='videojs-flvjs-player' class='video-js vjs-default-skin vjs-big-play-centered' controls preload='auto' autoplay=true width='100%' height='100%'  data-setup='{}'><source src="+ flvUrl +" type='video/x-flv'></video>";
+	videoContainer.innerHTML = "<video id='videojs-flvjs-player' class='video-js vjs-default-skin vjs-big-play-centered' controls muted='muted' preload='auto' autoplay='true' width='100%' height='100%'  data-setup='{}'><source src="+ getQueryString('videoUrl') +" type='video/x-flv'></video>";
 	
 	player = videojs('videojs-flvjs-player', {
 		techOrder: ['html5', 'flvjs'],
@@ -145,10 +153,9 @@ function initPlayer(){
 				autoCleanupMinBackwardDuration:60,
 				stashInitialSize:128
 			},
-		
     },
     sources: [{
-        src: flvUrl,
+        src: getQueryString('videoUrl'),
         type: 'video/x-flv'
     }],
     controls: true,
@@ -161,7 +168,7 @@ function initPlayer(){
             
 			console.log('first source load fail',e)
 			player.src({
-				src: flvUrl,
+				src: getQueryString('videoUrl'),
 				type: 'video/x-flv'
 			});
 			player.ready(function() {

static/flv/demo11.html

@@ -0,0 +1,210 @@
+<!DOCTYPE html>
+<html lang="en" style="height: 100%!important;">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>视频播放软件</title>
+    <link href="video-js.css" rel="stylesheet" />
+	<style>
+        body{
+            overflow-x: hidden;
+        overflow-y: hidden;
+        width: 100%;
+        height: 100%;
+        }
+	.video-js .vjs-big-play-button{
+		font-size: 2.5em;
+		line-height: 2.3em;
+		height: 2.5em;
+		width: 2.5em;
+		-webkit-border-radius: 2.5em;
+		-moz-border-radius: 2.5em;
+		border-radius: 2.5em;
+		background-color: #73859f;
+		background-color: rgba(115,133,159,.5);
+		border-width: 0.15em;
+		margin-top: -1.25em;
+		margin-left: -1.75em;
+	}
+	/* 中间的播放箭头 */
+	.vjs-big-play-button .vjs-icon-placeholder {
+		font-size: 1.63em;
+	}
+
+	/* 加载圆圈 */
+	.vjs-loading-spinner {
+		font-size: 2.5em;
+		width: 2em;
+		height: 2em;
+		border-radius: 1em;
+		margin-top: -1em;
+		margin-left: -1.5em;
+	}
+ .videojs-flvjs-player-dimensions {
+    width: 100%!important;
+    height: 100%!important;
+    overflow-x: hidden;
+        overflow-y: hidden;
+}
+/* #videojs-flvjs-player{
+    width: 100%!important;
+    height: 100%!important;
+} */
+	</style>
+	
+    <script src="video.min.js"></script>
+	<script src="flv.min.js"></script>
+    <script src="videojs-flvjs.min.js"></script>
+</head>
+
+<body>
+	<div id="videoContainer"   width="100%" 
+	style="height: 100%!important;">
+		<video 
+	    id="videojs-flvjs-player" 
+	    class="video-js vjs-default-skin vjs-big-play-centered" 
+	    controls 
+	    preload="auto" 
+		autoplay=true
+	    width="100%" 
+	    height="100%" 
+	    muted="muted"
+	    data-setup="{}"
+		>
+      
+			<source src="" type='video/x-flv' />
+		</video>
+        <!-- <button onclick="iframeSendMsg()">iframe向Vue传消息</button> -->
+	</div>
+</body>
+<script>
+//var flvUrl = "ws://192.168.3.245/transform/ch1.live.flv";
+// var flvUrl = "http://175.27.191.156:18080/transform/ch1.live.flv";
+var flvUrl = ""
+var player = null;
+function getQueryString(name) {
+            var reg = new RegExp("(^|&)" + name + "=([^'']*)(&|$)", "i");
+            // var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
+            var r = window.location.search.substr(1).match(reg);
+            if (r != null) return unescape(r[2]); return null;
+}
+console.log(getQueryString('videoUrl'),'shipin');
+ // iframe向vue传递信息
+ function iframeSendMsg(){
+    window.parent.postMessage({ 
+      cmd:'myIframe',
+      params : {
+        info: 'iframe向Vue传递的消息',
+      } 
+    },'*');
+  };
+  // iframe获取Vue传递过来的信息
+  window.addEventListener("message", getVueMsg);
+//   function getVueMsg(event){
+//     const res = event.data;
+//     if(res.cmd == 'myVue'){
+//       console.log(res)
+//     }
+//   };
+//   function triggerByVue(msg){
+//     console.log(msg)
+//     player.play();
+//   }
+  function getVueMsg(event){
+    const res = event.data;
+    if(res.cmd == 'myVue'){
+    //   console.log("获取vue传来的数据",res.params.info)
+      flvUrl = res.params.info
+    //   console.log("flvUrl",flvUrl)
+    //   initPlayer(res.params.info)
+        
+    }
+  };
+  function triggerByVue(msg){
+    // console.log(msg)
+    // flvUrl = msg
+    // initPlayer(msg);
+    // player.play();
+    
+    
+  }
+function initPlayer(){
+    // console.log("val",val)
+	var videoContainer = document.getElementById("videoContainer");
+	var pObjs = videoContainer.childNodes;
+    for (var i = pObjs.length - 1; i >= 0; i--) {
+      videoContainer.removeChild(pObjs[i]);
+    }
+	
+	videoContainer.innerHTML = "<video id='videojs-flvjs-player' class='video-js vjs-default-skin vjs-big-play-centered' controls muted='muted' preload='auto' autoplay='true' width='100%' height='100%'  data-setup='{}'><source src="+ getQueryString('videoUrl') +" type='video/x-flv'></video>";
+	
+	player = videojs('videojs-flvjs-player', {
+		techOrder: ['html5', 'flvjs'],
+		flvjs: {
+			mediaDataSource: {
+				isLive: true,
+				cors: true,
+				withCredentials: false,
+				enableStashBuffer: false,
+				autoCleanupSourceBuffer:true,
+				autoCleanupMaxBackwardDuration:12,
+				autoCleanupMinBackwardDuration:60,
+				stashInitialSize:128
+			},
+    },
+    sources: [{
+        src: getQueryString('videoUrl'),
+        type: 'video/x-flv'
+    }],
+    controls: true,
+    preload: "none"
+	},
+    
+	function onPlayerReady() {
+        console.log('first source load fail',player)
+		player.on('error',function(e){
+            
+			console.log('first source load fail',e)
+			player.src({
+				src: getQueryString('videoUrl'),
+				type: 'video/x-flv'
+			});
+			player.ready(function() {
+				console.log('player ready')
+				player.load();
+				player.play();
+			});
+		});
+        
+		player.on('waiting',function(){
+			console.log('stream wainting....');
+            window.parent.postMessage({ 
+              cmd:'myIframe',
+              params : {
+                info: 'iframe向Vue传递的消息',
+              } 
+            },'*');
+			//player.pause();
+			//player.dispose();
+			//player = null;
+			//initPlayer();
+		});
+		player.on('ended',function(){
+			console.log('stream ended....');
+			player.pause();
+			player.dispose();
+			player = null;
+			initPlayer();
+		});
+	});
+}
+
+initPlayer();
+
+
+
+</script>
+
+</html>

static/flv/video1.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" style="height: 100%!important;">
 
 <head>
     <meta charset="UTF-8">
@@ -44,7 +44,7 @@
 	}
  .videojs-flvjs-player-dimensions {
     width: 100%!important;
-    height: 240px!important;
+    height: 100%!important;
     overflow-x: hidden;
         overflow-y: hidden;
 }
@@ -61,7 +61,7 @@
 
 <body>
 	<div id="videoContainer"   width="100%" 
-    height="100%" >
+    style="height: 100%!important;">
 		<video 
 	    id="videojs-flvjs-player" 
 	    class="video-js vjs-default-skin vjs-big-play-centered" 
@@ -79,10 +79,21 @@
         <!-- <button onclick="iframeSendMsg()">iframe向Vue传消息</button> -->
 	</div>
 </body>
-<script>
+<script
+>
 //var flvUrl = "ws://192.168.3.245/transform/ch1.live.flv";
-var flvUrl = "http://175.27.191.156:18080/transform/ch1.live.flv";
+// var flvUrl = "http://175.27.191.156:18080/transform/ch1.live.flv";
+function getQueryString(name) {
+            var reg = new RegExp("(^|&)" + name + "=([^'']*)(&|$)", "i");
+            // var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
+            var r = window.location.search.substr(1).match(reg);
+            if (r != null) return unescape(r[2]); return null;
+}
+
+var flvUrl = null
 var player = null;
+var playUrl = null
+flvUrl = getQueryString('videoUrl');
  // iframe向vue传递信息
  function iframeSendMsg(){
     window.parent.postMessage({ 
@@ -97,11 +108,12 @@ var player = null;
   function getVueMsg(event){
     const res = event.data;
     if(res.cmd == 'myVue'){
-      console.log(res)
+	//   playUrl= res.params.url
+	//  console.log(playUrl,'playUrl',flvUrl,'flvUrl');
     }
   };
   function triggerByVue(msg){
-    console.log(msg)
+    // console.log(msg)
     player.play();
   }
 function initPlayer(){

static/flv/videoIndex.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" style="height: 100%!important;">
 
 <head>
     <meta charset="UTF-8">
@@ -45,7 +45,7 @@
 	}
  .videojs-flvjs-player-dimensions {
     width: 100%!important;
-    height: 286px!important;
+    height: 100%!important;
     overflow-x: hidden;
         overflow-y: hidden;
 }
@@ -62,7 +62,7 @@
 
 <body>
 	<div id="videoContainer"   width="100%" 
-    height="100%" >
+    style="height: 100%!important;" >
 		<video 
 	    id="videojs-flvjs-player" 
 	    class="video-js vjs-default-skin vjs-big-play-centered" 
@@ -82,7 +82,8 @@
 </body>
 <script>
 //var flvUrl = "ws://192.168.3.245/transform/ch1.live.flv";
-var flvUrl = "http://175.27.191.156:18080/transform/ch1.live.flv";
+// var flvUrl = "http://175.27.191.156:18080/transform/ch1.live.flv";
+var flvUrl = "";
 var player = null;
  // iframe向vue传递信息
  function iframeSendMsg(){

static/flv/videoIndex1.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" style="height: 100%!important;">
 
 <head>
     <meta charset="UTF-8">
@@ -45,7 +45,7 @@
 	}
  .videojs-flvjs-player-dimensions {
     width: 100%!important;
-    height: 750px!important;
+    height: 100%!important;
     overflow-x: hidden;
         overflow-y: hidden;
 }
@@ -62,7 +62,7 @@
 
 <body>
 	<div id="videoContainer"   width="100%" 
-    height="100%" >
+    style="height: 100%!important;" >
 		<video 
 	    id="videojs-flvjs-player" 
 	    class="video-js vjs-default-skin vjs-big-play-centered" 
@@ -82,8 +82,15 @@
 </body>
 <script>
 //var flvUrl = "ws://192.168.3.245/transform/ch1.live.flv";
-var flvUrl = "http://175.27.191.156:18080/transform/ch1.live.flv";
+// var flvUrl = "http://175.27.191.156:18080/transform/ch1.live.flv";
+var flvUrl = "";
 var player = null;
+function getQueryString(name) {
+            var reg = new RegExp("(^|&)" + name + "=([^'']*)(&|$)", "i");
+            // var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
+            var r = window.location.search.substr(1).match(reg);
+            if (r != null) return unescape(r[2]); return null;
+}
  // iframe向vue传递信息
  function iframeSendMsg(){
     window.parent.postMessage({ 
@@ -112,7 +119,7 @@ function initPlayer(){
       videoContainer.removeChild(pObjs[i]);
     }
 	
-	videoContainer.innerHTML = "<video id='videojs-flvjs-player' class='video-js vjs-default-skin vjs-big-play-centered' controls preload='auto' autoplay=true width='100%' height='100%'  data-setup='{}'><source src="+ flvUrl +" type='video/x-flv'></video>";
+	videoContainer.innerHTML = "<video id='videojs-flvjs-player' class='video-js vjs-default-skin vjs-big-play-centered' controls preload='auto' autoplay=true width='100%' height='100%'  data-setup='{}'><source src="+ getQueryString('videoUrl') +" type='video/x-flv'></video>";
 	
 	player = videojs('videojs-flvjs-player', {
 		techOrder: ['html5', 'flvjs'],
@@ -130,7 +137,7 @@ function initPlayer(){
 		
     },
     sources: [{
-        src: flvUrl,
+        src: getQueryString('videoUrl'),
         type: 'video/x-flv'
     }],
     controls: true,
@@ -141,7 +148,7 @@ function initPlayer(){
 		player.on('error',function(){
 			console.log('first source load fail')
 			player.src({
-				src: flvUrl,
+				src: getQueryString('videoUrl'),
 				type: 'video/x-flv'
 			});
 			player.ready(function() {

static/flv/videoIndex2.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" style="height: 100%!important;">
 
 <head>
   <meta charset="UTF-8">
@@ -47,8 +47,8 @@
     }
 
     .videojs-flvjs-player-dimensions {
-      width: 330px !important;
-      height: 197px !important;
+      width: 100% !important;
+      height: 100% !important;
       overflow-x: hidden;
       overflow-y: hidden;
     }
@@ -66,7 +66,7 @@
 </head>
 
 <body>
-  <div id="videoContainer" width="100%" height="100%">
+  <div id="videoContainer" width="100%" style="height: 100%!important;">
     <video id="videojs-flvjs-player" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto" 
       autoplay=true width="100%" height="100%" data-setup="{}">
 
@@ -77,8 +77,15 @@
 </body>
 <script>
   //var flvUrl = "ws://192.168.3.245/transform/ch1.live.flv";
-  var flvUrl = "http://175.27.191.156:18080/transform/ch1.live.flv";
+  // var flvUrl = "http://175.27.191.156:18080/transform/ch1.live.flv";
   var player = null;
+  function getQueryString(name) {
+            var reg = new RegExp("(^|&)" + name + "=([^'']*)(&|$)", "i");
+            // var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
+            var r = window.location.search.substr(1).match(reg);
+            if (r != null) return unescape(r[2]); return null;
+}
+var  flvUrl = getQueryString('videoUrl');
   // iframe向vue传递信息
   function iframeSendMsg() {
     window.parent.postMessage({

static/flv/videoIndex3.html

@@ -0,0 +1,187 @@
+<!DOCTYPE html>
+<html lang="en" style="height: 100%!important;">
+
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>视频播放软件</title>
+  <link href="video-js.css" rel="stylesheet" />
+  <style>
+    body {
+      overflow-x: hidden;
+      overflow-y: hidden;
+      width: 97%;
+      height: 100%;
+    }
+
+    .video-js .vjs-big-play-button {
+      font-size: 2.5em;
+      line-height: 2.3em;
+      height: 2.5em;
+      width: 2.5em;
+      -webkit-border-radius: 2.5em;
+      -moz-border-radius: 2.5em;
+      border-radius: 2.5em;
+      background-color: #73859f;
+      background-color: rgba(115, 133, 159, .5);
+      border-width: 0.15em;
+      margin-top: -1.25em;
+      margin-left: -1.75em;
+      border-radius: 5%;
+    }
+
+    /* 中间的播放箭头 */
+    .vjs-big-play-button .vjs-icon-placeholder {
+      font-size: 1.63em;
+    }
+
+    /* 加载圆圈 */
+    .vjs-loading-spinner {
+      font-size: 2.5em;
+      width: 2em;
+      height: 2em;
+      border-radius: 1em;
+      margin-top: -1em;
+      margin-left: -1.5em;
+    }
+
+    .videojs-flvjs-player-dimensions {
+      width: 100% !important;
+      height: 100% !important;
+      overflow-x: hidden;
+      overflow-y: hidden;
+    }
+
+    /* #videojs-flvjs-player{
+    width: 100%!important;
+    height: 100%!important;
+} */
+
+  </style>
+
+  <script src="video.min.js"></script>
+  <script src="flv.min.js"></script>
+  <script src="videojs-flvjs.min.js"></script>
+</head>
+
+<body>
+  <div id="videoContainer" width="100%" style="height: 100%!important;">
+    <video id="videojs-flvjs-player" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto"
+      autoplay=true muted="muted" width="100%" height="100%" data-setup="{}">
+
+      <source src="" type='video/x-flv' />
+    </video>
+    <!-- <button onclick="iframeSendMsg()">iframe向Vue传消息</button> -->
+  </div>
+</body>
+<script>
+  //var flvUrl = "ws://192.168.3.245/transform/ch1.live.flv";
+  // var flvUrl = "http://175.27.191.156:18080/transform/ch1.live.flv";
+  var flvUrl = "";
+  var player = null;
+  function getQueryString(name) {
+            var reg = new RegExp("(^|&)" + name + "=([^'']*)(&|$)", "i");
+            // var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
+            var r = window.location.search.substr(1).match(reg);
+            if (r != null) return unescape(r[2]); return null;
+}
+  // iframe向vue传递信息
+  function iframeSendMsg() {
+    window.parent.postMessage({
+      cmd: 'myIframe',
+      params: {
+        info: 'iframe向Vue传递的消息',
+      }
+    }, '*');
+  };
+  // iframe获取Vue传递过来的信息
+  window.addEventListener("message", getVueMsg);
+
+  function getVueMsg(event) {
+    const res = event.data;
+    if (res.cmd == 'myVue') {
+      console.log(res)
+    }
+  };
+
+  function triggerByVue(msg) {
+    console.log(msg)
+    player.play();
+  }
+
+  function initPlayer() {
+    var videoContainer = document.getElementById("videoContainer");
+    var pObjs = videoContainer.childNodes;
+    for (var i = pObjs.length - 1; i >= 0; i--) {
+      videoContainer.removeChild(pObjs[i]);
+    }
+
+    videoContainer.innerHTML =
+      "<video id='videojs-flvjs-player' class='video-js vjs-default-skin vjs-big-play-centered' muted='muted' controls preload='auto' autoplay=true width='100%' height='100%'  data-setup='{}'><source src=" +
+        getQueryString('videoUrl') + " type='video/x-flv'></video>";
+
+    player = videojs('videojs-flvjs-player', {
+        techOrder: ['html5', 'flvjs'],
+        flvjs: {
+          mediaDataSource: {
+            isLive: true,
+            cors: true,
+            withCredentials: false,
+            enableStashBuffer: false,
+            autoCleanupSourceBuffer: true,
+            autoCleanupMaxBackwardDuration: 12,
+            autoCleanupMinBackwardDuration: 60,
+            stashInitialSize: 128
+          },
+
+        },
+        sources: [{
+          src: getQueryString('videoUrl'),
+          type: 'video/x-flv'
+        }],
+        controls: true,
+        preload: "none"
+      },
+      function onPlayerReady() {
+
+        player.on('error', function () {
+          console.log('first source load fail')
+          player.src({
+            src: getQueryString('videoUrl'),
+            type: 'video/x-flv'
+          });
+          player.ready(function () {
+            console.log('player ready')
+            player.load();
+            player.play();
+          });
+        });
+        player.on('waiting', function () {
+          // console.log('stream wainting....');
+          window.parent.postMessage({
+            cmd: 'myIframe',
+            params: {
+              info: 'iframe向Vue传递的消息',
+            }
+          }, '*');
+          //player.pause();
+          //player.dispose();
+          //player = null;
+          //initPlayer();
+        });
+        player.on('ended', function () {
+          console.log('stream ended....');
+          player.pause();
+          player.dispose();
+          player = null;
+          initPlayer();
+        });
+      });
+  }
+
+  initPlayer();
+
+</script>
+
+</html>

static/flv/videoIndex4.html

@@ -0,0 +1,187 @@
+<!DOCTYPE html>
+<html lang="en" style="height: 100%!important;">
+
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>视频播放软件</title>
+  <link href="video-js.css" rel="stylesheet" />
+  <style>
+    body {
+      overflow-x: hidden;
+      overflow-y: hidden;
+      width: 97%;
+      height: 100%;
+    }
+
+    .video-js .vjs-big-play-button {
+      font-size: 2.5em;
+      line-height: 2.3em;
+      height: 2.5em;
+      width: 2.5em;
+      -webkit-border-radius: 2.5em;
+      -moz-border-radius: 2.5em;
+      border-radius: 2.5em;
+      background-color: #73859f;
+      background-color: rgba(115, 133, 159, .5);
+      border-width: 0.15em;
+      margin-top: -1.25em;
+      margin-left: -1.75em;
+      border-radius: 5%;
+    }
+
+    /* 中间的播放箭头 */
+    .vjs-big-play-button .vjs-icon-placeholder {
+      font-size: 1.63em;
+    }
+
+    /* 加载圆圈 */
+    .vjs-loading-spinner {
+      font-size: 2.5em;
+      width: 2em;
+      height: 2em;
+      border-radius: 1em;
+      margin-top: -1em;
+      margin-left: -1.5em;
+    }
+
+    .videojs-flvjs-player-dimensions {
+      width: 100% !important;
+      height: 100% !important;
+      overflow-x: hidden;
+      overflow-y: hidden;
+    }
+
+    /* #videojs-flvjs-player{
+    width: 100%!important;
+    height: 100%!important;
+} */
+
+  </style>
+
+  <script src="video.min.js"></script>
+  <script src="flv.min.js"></script>
+  <script src="videojs-flvjs.min.js"></script>
+</head>
+
+<body>
+  <div id="videoContainer" width="100%" style="height: 100%!important;">
+    <video id="videojs-flvjs-player" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto"
+      autoplay=true muted="muted" width="100%" height="100%" data-setup="{}">
+
+      <source src="" type='video/x-flv' />
+    </video>
+    <!-- <button onclick="iframeSendMsg()">iframe向Vue传消息</button> -->
+  </div>
+</body>
+<script>
+  //var flvUrl = "ws://192.168.3.245/transform/ch1.live.flv";
+  // var flvUrl = "http://175.27.191.156:18080/transform/ch1.live.flv";
+  var flvUrl = "";
+  var player = null;
+  function getQueryString(name) {
+            var reg = new RegExp("(^|&)" + name + "=([^'']*)(&|$)", "i");
+            // var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
+            var r = window.location.search.substr(1).match(reg);
+            if (r != null) return unescape(r[2]); return null;
+}
+  // iframe向vue传递信息
+  function iframeSendMsg() {
+    window.parent.postMessage({
+      cmd: 'myIframe',
+      params: {
+        info: 'iframe向Vue传递的消息',
+      }
+    }, '*');
+  };
+  // iframe获取Vue传递过来的信息
+  window.addEventListener("message", getVueMsg);
+
+  function getVueMsg(event) {
+    const res = event.data;
+    if (res.cmd == 'myVue') {
+      console.log(res)
+    }
+  };
+
+  function triggerByVue(msg) {
+    console.log(msg)
+    player.play();
+  }
+
+  function initPlayer() {
+    var videoContainer = document.getElementById("videoContainer");
+    var pObjs = videoContainer.childNodes;
+    for (var i = pObjs.length - 1; i >= 0; i--) {
+      videoContainer.removeChild(pObjs[i]);
+    }
+
+    videoContainer.innerHTML =
+      "<video id='videojs-flvjs-player' class='video-js vjs-default-skin vjs-big-play-centered' muted='muted' controls preload='auto' autoplay=true width='100%' height='100%'  data-setup='{}'><source src=" +
+        getQueryString('videoUrl') + " type='video/x-flv'></video>";
+
+    player = videojs('videojs-flvjs-player', {
+        techOrder: ['html5', 'flvjs'],
+        flvjs: {
+          mediaDataSource: {
+            isLive: true,
+            cors: true,
+            withCredentials: false,
+            enableStashBuffer: false,
+            autoCleanupSourceBuffer: true,
+            autoCleanupMaxBackwardDuration: 12,
+            autoCleanupMinBackwardDuration: 60,
+            stashInitialSize: 128
+          },
+
+        },
+        sources: [{
+          src: getQueryString('videoUrl'),
+          type: 'video/x-flv'
+        }],
+        controls: true,
+        preload: "none"
+      },
+      function onPlayerReady() {
+
+        player.on('error', function () {
+          console.log('first source load fail')
+          player.src({
+            src: getQueryString('videoUrl'),
+            type: 'video/x-flv'
+          });
+          player.ready(function () {
+            console.log('player ready')
+            player.load();
+            player.play();
+          });
+        });
+        player.on('waiting', function () {
+          console.log('stream wainting....');
+          window.parent.postMessage({
+            cmd: 'myIframe',
+            params: {
+              info: 'iframe向Vue传递的消息',
+            }
+          }, '*');
+          //player.pause();
+          //player.dispose();
+          //player = null;
+          //initPlayer();
+        });
+        player.on('ended', function () {
+          console.log('stream ended....');
+          player.pause();
+          player.dispose();
+          player = null;
+          initPlayer();
+        });
+      });
+  }
+
+  initPlayer();
+
+</script>
+
+</html>

static/flv/videoIndex5.html

@@ -0,0 +1,193 @@
+<!DOCTYPE html>
+<html lang="en" style="height:100%">
+
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>视频播放软件</title>
+  <link href="video-js.css" rel="stylesheet" />
+  <style>
+    body {
+      overflow-x: hidden;
+      overflow-y: hidden;
+      width: 97%;
+      height: 100%;
+    }
+    #videoContainer{
+      width: 97%;
+      height: 100%;
+    }
+    .video-js{
+      height:100%
+    }
+    .video-js .vjs-big-play-button {
+      font-size: 2.5em;
+      line-height: 2.3em;
+      height: 2.5em;
+      width: 2.5em;
+      -webkit-border-radius: 2.5em;
+      -moz-border-radius: 2.5em;
+      border-radius: 2.5em;
+      background-color: #73859f;
+      background-color: rgba(115, 133, 159, .5);
+      border-width: 0.15em;
+      margin-top: -1.25em;
+      margin-left: -1.75em;
+      border-radius: 5%;
+    }
+
+    /* 中间的播放箭头 */
+    .vjs-big-play-button .vjs-icon-placeholder {
+      font-size: 1.63em;
+    }
+
+    /* 加载圆圈 */
+    .vjs-loading-spinner {
+      font-size: 2.5em;
+      width: 2em;
+      height: 2em;
+      border-radius: 1em;
+      margin-top: -1em;
+      margin-left: -1.5em;
+    }
+
+    .videojs-flvjs-player-dimensions {
+      width: 100% !important;
+      height: 100% !important;
+      overflow-x: hidden;
+      overflow-y: hidden;
+    }
+
+    /* #videojs-flvjs-player{
+    width: 100%!important;
+    height: 100%!important;
+} */
+
+  </style>
+
+  <script src="video.min.js"></script>
+  <script src="flv.min.js"></script>
+  <script src="videojs-flvjs.min.js"></script>
+</head>
+
+<body>
+  <div id="videoContainer" style="height: 100%!important;">
+    <video id="videojs-flvjs-player" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto"
+      autoplay=true muted="muted" width="100%" height="100%" data-setup="{}">
+
+      <source src="" type='video/x-flv' />
+    </video>
+    <!-- <button onclick="iframeSendMsg()">iframe向Vue传消息</button> -->
+  </div>
+</body>
+<script>
+  //var flvUrl = "ws://192.168.3.245/transform/ch1.live.flv";
+  // var flvUrl = "http://175.27.191.156:18080/transform/ch1.live.flv";
+  var flvUrl = "";
+  var player = null;
+  function getQueryString(name) {
+            var reg = new RegExp("(^|&)" + name + "=([^'']*)(&|$)", "i");
+            // var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
+            var r = window.location.search.substr(1).match(reg);
+            if (r != null) return unescape(r[2]); return null;
+}
+  // iframe向vue传递信息
+  function iframeSendMsg() {
+    window.parent.postMessage({
+      cmd: 'myIframe',
+      params: {
+        info: 'iframe向Vue传递的消息',
+      }
+    }, '*');
+  };
+  // iframe获取Vue传递过来的信息
+  window.addEventListener("message", getVueMsg);
+
+  function getVueMsg(event) {
+    const res = event.data;
+    if (res.cmd == 'myVue') {
+      console.log(res)
+    }
+  };
+
+  function triggerByVue(msg) {
+    console.log(msg)
+    player.play();
+  }
+
+  function initPlayer() {
+    var videoContainer = document.getElementById("videoContainer");
+    var pObjs = videoContainer.childNodes;
+    for (var i = pObjs.length - 1; i >= 0; i--) {
+      videoContainer.removeChild(pObjs[i]);
+    }
+
+    videoContainer.innerHTML =
+      "<video id='videojs-flvjs-player' class='video-js vjs-default-skin vjs-big-play-centered' muted='muted' controls preload='auto' autoplay=true width='100%' height='100%'  data-setup='{}'><source src=" +
+        getQueryString('videoUrl') + " type='video/x-flv'></video>";
+
+    player = videojs('videojs-flvjs-player', {
+        techOrder: ['html5', 'flvjs'],
+        flvjs: {
+          mediaDataSource: {
+            isLive: true,
+            cors: true,
+            withCredentials: false,
+            enableStashBuffer: false,
+            autoCleanupSourceBuffer: true,
+            autoCleanupMaxBackwardDuration: 12,
+            autoCleanupMinBackwardDuration: 60,
+            stashInitialSize: 128
+          },
+
+        },
+        sources: [{
+          src: getQueryString('videoUrl'),
+          type: 'video/x-flv'
+        }],
+        controls: true,
+        preload: "none"
+      },
+      function onPlayerReady() {
+
+        player.on('error', function () {
+          console.log('first source load fail')
+          player.src({
+            src: getQueryString('videoUrl'),
+            type: 'video/x-flv'
+          });
+          player.ready(function () {
+            console.log('player ready')
+            player.load();
+            player.play();
+          });
+        });
+        player.on('waiting', function () {
+          console.log('stream wainting....');
+          window.parent.postMessage({
+            cmd: 'myIframe',
+            params: {
+              info: 'iframe向Vue传递的消息',
+            }
+          }, '*');
+          //player.pause();
+          //player.dispose();
+          //player = null;
+          //initPlayer();
+        });
+        player.on('ended', function () {
+          console.log('stream ended....');
+          player.pause();
+          player.dispose();
+          player = null;
+          initPlayer();
+        });
+      });
+  }
+
+  initPlayer();
+
+</script>
+
+</html>

static/unity/StreamingAssets/AddDate.txt

@@ -1,43 +0,0 @@
-{
-	"status": "Success",
-	"message": "Success",
-	"data": [{
-			"DeviceId": "5d0fd080557840308c4f2b8a7972232c",
-			"Name": "001",
-			"LeftAndRightTunnel": "Left",
-			"RelativeDistance": "K3+450",
-			"Time": "2022-10-27 16:45:51",
-			"PointData": [ {
-					"RelativeDistance": "K3+440",
-					"Time": "2022-10-27 16:38:51"
-				},
-				{
-					"RelativeDistance": "K3+430",
-					"Time": "2022-10-27 16:40:51"
-				},{
-					"RelativeDistance": "K3+420",
-					"Time": "2022-10-27 16:43:51"
-				}
-			]
-		},
-		{
-			"DeviceId": "00a730aa6d37491bb05cd21a0d79b398",
-			"Name": "002",
-			"LeftAndRightTunnel": "Right",
-			"RelativeDistance": "K3+410",
-			"Time": "2022-10-27 16:45:51",
-			"PointData": [{
-					"RelativeDistance": "K3+420",
-					"Time": "2022-10-27 16:43:51"
-				},
-				{
-					"RelativeDistance": "K3+430",
-					"Time": "2022-10-27 16:40:51"
-				}, {
-					"RelativeDistance": "K3+440",
-					"Time": "2022-10-27 16:38:51"
-				}
-			]
-		}
-	]
-}

static/unity/StreamingAssets/Config/DateConfig.txt

@@ -1,3 +0,0 @@
-startTime=2023/01/01
-phaseCount=4
-totalDuration=90

static/unity/StreamingAssets/Config/GeneralConstructionPlan.txt

@@ -1,66 +0,0 @@
-{
-"commencement_date":"2023/2/1",
-"completion_date":"2023/7/25",
-"total_days":"174",
-"time_nodes":[
-{
-"node":"2023/2/01",
-"info":"土建_0"
-},
-{
-"node":"2023/2/8",
-"info":"土建_1"
-},
-{
-"node":"2023/2/16",
-"info":"土建_2"
-},
-{
-"node":"2023/2/24",
-"info":"土建_3"
-},
-{
-"node":"2023/3/01",
-"info":"土建_4"
-},
-{
-"node":"2023/3/9",
-"info":"土建_5"
-},
-{
-"node":"2023/3/17",
-"info":"土建_6"
-},
-{
-"node":"2023/3/24",
-"info":"土建_7"
-},
-{
-"node":"2023/4/01",
-"info":"土建_8"
-},
-{
-"node":"2023/4/09",
-"info":"土建_9"
-},
-{
-"node":"2023/4/17",
-"info":"土建_10"
-},
-{
-"node":"2023/4/24",
-"info":"土建_11"
-},
-{
-"node":"2023/5/01",
-"info":"电缆敷设_0"
-},
-{
-"node":"2023/5/08",
-"info":"电缆敷设_1"
-},
-{
-"node":"2023/7/25",
-"info":"竣工"
-}
-]}

static/unity/StreamingAssets/Config/MyComponentData.txt

@@ -1,646 +0,0 @@
-[
-	{
-		"id": "1644225456757981186",
-		"workContent": "土建_0",
-		"completeStatus": "完成",
-		"detail": [
-			{
-				"componentId": "17e62d0b164e42a396b2aaee817170ba",
-				"componentType": "拆除护栏",
-				"componentName": "拆除护栏_0",
-				"componentTypeCode": "cchl",
-				"plannedStartDate": "2023-02-01",
-				"plannedEndDate": "2023-02-07",
-				"actualCompletionTime": "2023-02-01",
-				"workStatus": "完成",
-				"workStatusCode": "ACCOMPLISH",
-				"positionInfo": "L_0_100",
-				"isLastProcess": 0
-			},
-			{
-				"componentId": "0fe56a5e85674b4fb276b228a1e5f405",
-				"componentType": "预制硂",
-				"componentName": "预制硂_0",
-				"componentTypeCode": "yzt",
-				"plannedStartDate": "2023-02-01",
-				"plannedEndDate": "2023-02-07",
-				"actualCompletionTime": "2023-02-02",
-				"workStatus": "完成",
-				"workStatusCode": "ACCOMPLISH",
-				"positionInfo": "L_0_100",
-				"isLastProcess": 0
-			},
-			{
-				"componentId": "636c42fe8f0d4998bd6b511d3513a198",
-				"componentType": "电缆架桥",
-				"componentName": "电缆架桥_0",
-				"componentTypeCode": "dljq",
-				"plannedStartDate": "2023-02-01",
-				"plannedEndDate": "2023-02-07",
-				"actualCompletionTime": "2023-02-06",
-				"workStatus": "完成",
-				"workStatusCode": "ACCOMPLISH",
-				"positionInfo": "L_0_100",
-				"isLastProcess": 1
-			}
-		]
-	},
-	{
-		"id": "1644225456825090049",
-		"workContent": "土建_1",
-		"completeStatus": "完成",
-		"detail": [
-			{
-				"componentId": "6ed83243d6524f7b9be6f46163066963",
-				"componentType": "拆除护栏",
-				"componentName": "拆除护栏_1",
-				"componentTypeCode": "cchl",
-				"plannedStartDate": "2023-02-08",
-				"plannedEndDate": "2023-02-15",
-				"actualCompletionTime": "2023-02-09",
-				"workStatus": "完成",
-				"workStatusCode": "ACCOMPLISH",
-				"positionInfo": "L_1_100",
-				"isLastProcess": 0
-			},
-			{
-				"componentId": "1751611703ee4d3da598309cd6c612ca",
-				"componentType": "预制硂",
-				"componentName": "预制硂_1",
-				"componentTypeCode": "yzt",
-				"plannedStartDate": "2023-02-08",
-				"plannedEndDate": "2023-02-15",
-				"actualCompletionTime": "2023-02-10",
-				"workStatus": "完成",
-				"workStatusCode": "ACCOMPLISH",
-				"positionInfo": "L_1_100",
-				"isLastProcess": 0
-			},
-			{
-				"componentId": "579c9a90503f4ac3a88328190b7825c9",
-				"componentType": "电缆架桥",
-				"componentName": "电缆架桥_1",
-				"componentTypeCode": "dljq",
-				"plannedStartDate": "2023-02-08",
-				"plannedEndDate": "2023-02-15",
-				"actualCompletionTime": "2023-02-15",
-				"workStatus": "完成",
-				"workStatusCode": "ACCOMPLISH",
-				"positionInfo": "L_1_100",
-				"isLastProcess": 1
-			}
-		]
-	},
-	{
-		"id": "1644225456888004609",
-		"workContent": "土建_2",
-		"completeStatus": "延期完成",
-		"detail": [
-			{
-				"componentId": "5b311eac10494e60a0c8e17669a9b535",
-				"componentType": "拆除护栏",
-				"componentName": "拆除护栏_2",
-				"componentTypeCode": "cchl",
-				"plannedStartDate": "2023-02-16",
-				"plannedEndDate": "2023-02-23",
-				"actualCompletionTime": "2023-02-16",
-				"workStatus": "完成",
-				"workStatusCode": "ACCOMPLISH",
-				"positionInfo": "L_2_100",
-				"isLastProcess": 0
-			},
-			{
-				"componentId": "2a32b299250a44d9b5c989fea0a2e4db",
-				"componentType": "预制硂",
-				"componentName": "预制硂_2",
-				"componentTypeCode": "yzt",
-				"plannedStartDate": "2023-02-16",
-				"plannedEndDate": "2023-02-23",
-				"actualCompletionTime": "2023-02-20",
-				"workStatus": "完成",
-				"workStatusCode": "ACCOMPLISH",
-				"positionInfo": "L_2_100",
-				"isLastProcess": 0
-			},
-			{
-				"componentId": "0a75583dff6d494393c5af0558a5fd44",
-				"componentType": "电缆架桥",
-				"componentName": "电缆架桥_2",
-				"componentTypeCode": "dljq",
-				"plannedStartDate": "2023-02-16",
-				"plannedEndDate": "2023-02-23",
-				"actualCompletionTime": "2023-02-25",
-				"workStatus": "延期完成",
-				"workStatusCode": "COMPLETE_DELAY",
-				"positionInfo": "L_2_100",
-				"isLastProcess": 1
-			}
-		]
-	},
-	{
-		"id": "1644225456959307778",
-		"workContent": "土建_3",
-		"completeStatus": "进行中",
-		"detail": [
-			{
-				"componentId": "e16cbdd80bc34d299c9cc9b59332af3a",
-				"componentType": "拆除护栏",
-				"componentName": "拆除护栏_3",
-				"componentTypeCode": "cchl",
-				"plannedStartDate": "2023-02-24",
-				"plannedEndDate": "2023-02-28",
-				"actualCompletionTime": "2023-02-18",
-				"workStatus": "提前完成",
-				"workStatusCode": "COMPLETE_AHEAD",
-				"positionInfo": "L_3_100",
-				"isLastProcess": 0
-			},
-			{
-				"componentId": "24d16c360f324c0bbac89503fcf4435b",
-				"componentType": "预制硂",
-				"componentName": "预制硂_3",
-				"componentTypeCode": "yzt",
-				"plannedStartDate": "2023-02-24",
-				"plannedEndDate": "2023-02-28",
-				"actualCompletionTime": "2023-02-25",
-				"workStatus": "完成",
-				"workStatusCode": "ACCOMPLISH",
-				"positionInfo": "L_3_100",
-				"isLastProcess": 0
-			},
-			{
-				"componentId": "5d7c56a5b6cf462e9a117ba7970016ed",
-				"componentType": "电缆架桥",
-				"componentName": "电缆架桥_3",
-				"componentTypeCode": "dljq",
-				"plannedStartDate": "2023-02-24",
-				"plannedEndDate": "2023-02-28",
-				"actualCompletionTime": "",
-				"workStatus": "进行中",
-				"workStatusCode": "PROGRESS",
-				"positionInfo": "L_3_100",
-				"isLastProcess": 1
-			}
-		]
-	},
-	{
-		"id": "1644225457034805250",
-		"workContent": "土建_4",
-		"completeStatus": "进行中",
-		"detail": [
-			{
-				"componentId": "a97c2d358d69457c90f67efc2aa0d12f",
-				"componentType": "拆除护栏",
-				"componentName": "拆除护栏_4",
-				"componentTypeCode": "cchl",
-				"plannedStartDate": "2023-03-01",
-				"plannedEndDate": "2023-03-08",
-				"actualCompletionTime": "",
-				"workStatus": "进行中",
-				"workStatusCode": "PROGRESS",
-				"positionInfo": "L_4_100",
-				"isLastProcess": 0
-			},
-			{
-				"componentId": "41cefeccf0ca47ec8e4a552c910ab2ef",
-				"componentType": "预制硂",
-				"componentName": "预制硂_4",
-				"componentTypeCode": "yzt",
-				"plannedStartDate": "2023-03-01",
-				"plannedEndDate": "2023-03-08",
-				"actualCompletionTime": "",
-				"workStatus": "进行中",
-				"workStatusCode": "PROGRESS",
-				"positionInfo": "L_4_100",
-				"isLastProcess": 0
-			},
-			{
-				"componentId": "c617a3b8fa6443d0aeb2490c576db72a",
-				"componentType": "电缆架桥",
-				"componentName": "电缆架桥_4",
-				"componentTypeCode": "dljq",
-				"plannedStartDate": "2023-03-01",
-				"plannedEndDate": "2023-03-08",
-				"actualCompletionTime": "",
-				"workStatus": "进行中",
-				"workStatusCode": "PROGRESS",
-				"positionInfo": "L_4_100",
-				"isLastProcess": 1
-			}
-		]
-	},
-	{
-		"id": "1644225457127079937",
-		"workContent": "土建_5",
-		"completeStatus": "进行中",
-		"detail": [
-			{
-				"componentId": "3bb814d6495c493784d21fbc13266b2f",
-				"componentType": "拆除护栏",
-				"componentName": "拆除护栏_5",
-				"componentTypeCode": "cchl",
-				"plannedStartDate": "2023-03-09",
-				"plannedEndDate": "2023-03-16",
-				"actualCompletionTime": "",
-				"workStatus": "进行中",
-				"workStatusCode": "PROGRESS",
-				"positionInfo": "L_5_100",
-				"isLastProcess": 0
-			},
-			{
-				"componentId": "2b553b260f3c4158bdaee4f66eaf2d96",
-				"componentType": "预制硂",
-				"componentName": "预制硂_5",
-				"componentTypeCode": "yzt",
-				"plannedStartDate": "2023-03-09",
-				"plannedEndDate": "2023-03-16",
-				"actualCompletionTime": "",
-				"workStatus": "进行中",
-				"workStatusCode": "PROGRESS",
-				"positionInfo": "L_5_100",
-				"isLastProcess": 0
-			},
-			{
-				"componentId": "d1626986b656443a83b9030b275c6dac",
-				"componentType": "电缆架桥",
-				"componentName": "电缆架桥_5",
-				"componentTypeCode": "dljq",
-				"plannedStartDate": "2023-03-09",
-				"plannedEndDate": "2023-03-16",
-				"actualCompletionTime": "",
-				"workStatus": "进行中",
-				"workStatusCode": "PROGRESS",
-				"positionInfo": "L_5_100",
-				"isLastProcess": 1
-			}
-		]
-	},
-	{
-		"id": "1644225457210966017",
-		"workContent": "土建_6",
-		"completeStatus": "进行中",
-		"detail": [
-			{
-				"componentId": "88c143c5ba3043cba6ae433f27f4d57f",
-				"componentType": "拆除护栏",
-				"componentName": "拆除护栏_6",
-				"componentTypeCode": "cchl",
-				"plannedStartDate": "2023-03-17",
-				"plannedEndDate": "2023-03-23",
-				"actualCompletionTime": "",
-				"workStatus": "进行中",
-				"workStatusCode": "PROGRESS",
-				"positionInfo": "L_6_100",
-				"isLastProcess": 0
-			},
-			{
-				"componentId": "b58d3002322c43ed83151c5cdd15996c",
-				"componentType": "预制硂",
-				"componentName": "预制硂_6",
-				"componentTypeCode": "yzt",
-				"plannedStartDate": "2023-03-17",
-				"plannedEndDate": "2023-03-23",
-				"actualCompletionTime": "",
-				"workStatus": "进行中",
-				"workStatusCode": "PROGRESS",
-				"positionInfo": "L_6_100",
-				"isLastProcess": 0
-			},
-			{
-				"componentId": "4a551c80472d4b0daa4016c7573013e5",
-				"componentType": "电缆架桥",
-				"componentName": "电缆架桥_6",
-				"componentTypeCode": "dljq",
-				"plannedStartDate": "2023-03-17",
-				"plannedEndDate": "2023-03-23",
-				"actualCompletionTime": "",
-				"workStatus": "进行中",
-				"workStatusCode": "PROGRESS",
-				"positionInfo": "L_6_100",
-				"isLastProcess": 1
-			}
-		]
-	},
-	{
-		"id": "1644225457286463489",
-		"workContent": "土建_7",
-		"completeStatus": "进行中",
-		"detail": [
-			{
-				"componentId": "6b984e092d2448c5a9993ca487793921",
-				"componentType": "拆除护栏",
-				"componentName": "拆除护栏_7",
-				"componentTypeCode": "cchl",
-				"plannedStartDate": "2023-03-24",
-				"plannedEndDate": "2023-03-30",
-				"actualCompletionTime": "",
-				"workStatus": "进行中",
-				"workStatusCode": "PROGRESS",
-				"positionInfo": "L_7_100",
-				"isLastProcess": 0
-			},
-			{
-				"componentId": "c076599492c840bb872b6b814b0fd004",
-				"componentType": "预制硂",
-				"componentName": "预制硂_7",
-				"componentTypeCode": "yzt",
-				"plannedStartDate": "2023-03-24",
-				"plannedEndDate": "2023-03-30",
-				"actualCompletionTime": "",
-				"workStatus": "进行中",
-				"workStatusCode": "PROGRESS",
-				"positionInfo": "L_7_100",
-				"isLastProcess": 0
-			},
-			{
-				"componentId": "9dcdc45b218b4d8098d98914c6630391",
-				"componentType": "电缆架桥",
-				"componentName": "电缆架桥_7",
-				"componentTypeCode": "dljq",
-				"plannedStartDate": "2023-03-24",
-				"plannedEndDate": "2023-03-30",
-				"actualCompletionTime": "",
-				"workStatus": "进行中",
-				"workStatusCode": "PROGRESS",
-				"positionInfo": "L_7_100",
-				"isLastProcess": 1
-			}
-		]
-	},
-	{
-		"id": "1644225457357766658",
-		"workContent": "土建_8",
-		"completeStatus": "进行中",
-		"detail": [
-			{
-				"componentId": "95d59d46c154417187cb4434079c1c7f",
-				"componentType": "拆除护栏",
-				"componentName": "拆除护栏_8",
-				"componentTypeCode": "cchl",
-				"plannedStartDate": "2023-04-01",
-				"plannedEndDate": "2023-04-08",
-				"actualCompletionTime": "",
-				"workStatus": "进行中",
-				"workStatusCode": "PROGRESS",
-				"positionInfo": "L_8_100",
-				"isLastProcess": 0
-			},
-			{
-				"componentId": "7609a56e5bd84cbfafe0b6026523a806",
-				"componentType": "预制硂",
-				"componentName": "预制硂_8",
-				"componentTypeCode": "yzt",
-				"plannedStartDate": "2023-04-01",
-				"plannedEndDate": "2023-04-08",
-				"actualCompletionTime": "",
-				"workStatus": "进行中",
-				"workStatusCode": "PROGRESS",
-				"positionInfo": "L_8_100",
-				"isLastProcess": 0
-			},
-			{
-				"componentId": "22da43d9fc8044bbb4cab9d35f109292",
-				"componentType": "电缆架桥",
-				"componentName": "电缆架桥_8",
-				"componentTypeCode": "dljq",
-				"plannedStartDate": "2023-04-01",
-				"plannedEndDate": "2023-04-08",
-				"actualCompletionTime": "",
-				"workStatus": "进行中",
-				"workStatusCode": "PROGRESS",
-				"positionInfo": "L_8_100",
-				"isLastProcess": 1
-			}
-		]
-	},
-	{
-		"id": "1644225457420681218",
-		"workContent": "土建_9",
-		"completeStatus": "未开始",
-		"detail": [
-			{
-				"componentId": "c0fcbc96eabf4018a64593af07f8e421",
-				"componentType": "拆除护栏",
-				"componentName": "拆除护栏_9",
-				"componentTypeCode": "cchl",
-				"plannedStartDate": "2023-04-09",
-				"plannedEndDate": "2023-04-16",
-				"actualCompletionTime": "",
-				"workStatus": "未开始",
-				"workStatusCode": "NOT_START",
-				"positionInfo": "L_9_100",
-				"isLastProcess": 0
-			},
-			{
-				"componentId": "396dced933bf4a41a76256f1677b72f1",
-				"componentType": "预制硂",
-				"componentName": "预制硂_9",
-				"componentTypeCode": "yzt",
-				"plannedStartDate": "2023-04-09",
-				"plannedEndDate": "2023-04-16",
-				"actualCompletionTime": "",
-				"workStatus": "未开始",
-				"workStatusCode": "NOT_START",
-				"positionInfo": "L_9_100",
-				"isLastProcess": 0
-			},
-			{
-				"componentId": "ca90c040fdbd4a9dad7a196d762f56cc",
-				"componentType": "电缆架桥",
-				"componentName": "电缆架桥_9",
-				"componentTypeCode": "dljq",
-				"plannedStartDate": "2023-04-09",
-				"plannedEndDate": "2023-04-16",
-				"actualCompletionTime": "",
-				"workStatus": "未开始",
-				"workStatusCode": "NOT_START",
-				"positionInfo": "L_9_100",
-				"isLastProcess": 1
-			}
-		]
-	},
-	{
-		"id": "1644225457487790081",
-		"workContent": "土建_10",
-		"completeStatus": "未开始",
-		"detail": [
-			{
-				"componentId": "485dfbf53a4b4ad19cc51d7ed7cb5687",
-				"componentType": "拆除护栏",
-				"componentName": "拆除护栏_10",
-				"componentTypeCode": "cchl",
-				"plannedStartDate": "2023-04-17",
-				"plannedEndDate": "2023-04-23",
-				"actualCompletionTime": "",
-				"workStatus": "未开始",
-				"workStatusCode": "NOT_START",
-				"positionInfo": "L_10_100",
-				"isLastProcess": 0
-			},
-			{
-				"componentId": "ff51914e5e9243d59144747a723b2410",
-				"componentType": "预制硂",
-				"componentName": "预制硂_10",
-				"componentTypeCode": "yzt",
-				"plannedStartDate": "2023-04-17",
-				"plannedEndDate": "2023-04-23",
-				"actualCompletionTime": "",
-				"workStatus": "未开始",
-				"workStatusCode": "NOT_START",
-				"positionInfo": "L_10_100",
-				"isLastProcess": 0
-			},
-			{
-				"componentId": "2be6428dbc7442b9a7f032a369f15314",
-				"componentType": "电缆架桥",
-				"componentName": "电缆架桥_10",
-				"componentTypeCode": "dljq",
-				"plannedStartDate": "2023-04-17",
-				"plannedEndDate": "2023-04-23",
-				"actualCompletionTime": "",
-				"workStatus": "未开始",
-				"workStatusCode": "NOT_START",
-				"positionInfo": "L_10_100",
-				"isLastProcess": 1
-			}
-		]
-	},
-	{
-		"id": "1644225457571676161",
-		"workContent": "土建_11",
-		"completeStatus": "未开始",
-		"detail": [
-			{
-				"componentId": "5135fa666dad422d9cc14c7838f22919",
-				"componentType": "拆除护栏",
-				"componentName": "拆除护栏_11",
-				"componentTypeCode": "cchl",
-				"plannedStartDate": "2023-04-24",
-				"plannedEndDate": "2023-04-30",
-				"actualCompletionTime": "",
-				"workStatus": "未开始",
-				"workStatusCode": "NOT_START",
-				"positionInfo": "L_11_100",
-				"isLastProcess": 0
-			},
-			{
-				"componentId": "0362257709504d769875e93cf500dd07",
-				"componentType": "预制硂",
-				"componentName": "预制硂_11",
-				"componentTypeCode": "yzt",
-				"plannedStartDate": "2023-04-24",
-				"plannedEndDate": "2023-04-30",
-				"actualCompletionTime": "",
-				"workStatus": "未开始",
-				"workStatusCode": "NOT_START",
-				"positionInfo": "L_11_100",
-				"isLastProcess": 0
-			},
-			{
-				"componentId": "499567d5dd9d4bedaff32e77c44c0737",
-				"componentType": "电缆架桥",
-				"componentName": "电缆架桥_11",
-				"componentTypeCode": "dljq",
-				"plannedStartDate": "2023-04-24",
-				"plannedEndDate": "2023-04-30",
-				"actualCompletionTime": "",
-				"workStatus": "未开始",
-				"workStatusCode": "NOT_START",
-				"positionInfo": "L_11_100",
-				"isLastProcess": 1
-			}
-		]
-	},
-	{
-		"id": "1644225457642979329",
-		"workContent": "电缆敷设_0",
-		"completeStatus": "未开始",
-		"detail": [
-			{
-				"componentId": "724dbab057f14b378ccf4433701bdd88",
-				"componentType": "电缆敷设",
-				"componentName": "电缆敷设_0",
-				"componentTypeCode": "dlfs",
-				"plannedStartDate": "2023-05-01",
-				"plannedEndDate": "2023-05-07",
-				"actualCompletionTime": "",
-				"workStatus": "未开始",
-				"workStatusCode": "NOT_START",
-				"positionInfo": "L_0_900",
-				"isLastProcess": 0
-			},
-			{
-				"componentId": "1b5ea1049ee545e68dcee28f484ae4c8",
-				"componentType": "电缆盖板",
-				"componentName": "电缆盖板_0",
-				"componentTypeCode": "dlgb",
-				"plannedStartDate": "2023-05-01",
-				"plannedEndDate": "2023-05-07",
-				"actualCompletionTime": "",
-				"workStatus": "未开始",
-				"workStatusCode": "NOT_START",
-				"positionInfo": "L_0_900",
-				"isLastProcess": 0
-			},
-			{
-				"componentId": "6b51c8f5b5834b0887074f54ddd6767f",
-				"componentType": "恢复护栏",
-				"componentName": "恢复护栏_0",
-				"componentTypeCode": "hfhl",
-				"plannedStartDate": "2023-05-01",
-				"plannedEndDate": "2023-05-07",
-				"actualCompletionTime": "",
-				"workStatus": "未开始",
-				"workStatusCode": "NOT_START",
-				"positionInfo": "L_0_900",
-				"isLastProcess": 1
-			}
-		]
-	},
-	{
-		"id": "1644225457705893889",
-		"workContent": "电缆敷设_1",
-		"completeStatus": "未开始",
-		"detail": [
-			{
-				"componentId": "bee0f074d11d476d907f55dc9ce93e68",
-				"componentType": "电缆敷设",
-				"componentName": "电缆敷设_1",
-				"componentTypeCode": "dlfs",
-				"plannedStartDate": "2023-05-08",
-				"plannedEndDate": "2023-05-15",
-				"actualCompletionTime": "",
-				"workStatus": "未开始",
-				"workStatusCode": "NOT_START",
-				"positionInfo": "L_1_900",
-				"isLastProcess": 0
-			},
-			{
-				"componentId": "73b87f88ce494fdfbc9ef86298a9ebb9",
-				"componentType": "电缆盖板",
-				"componentName": "电缆盖板_1",
-				"componentTypeCode": "dlgb",
-				"plannedStartDate": "2023-05-08",
-				"plannedEndDate": "2023-05-15",
-				"actualCompletionTime": "",
-				"workStatus": "未开始",
-				"workStatusCode": "NOT_START",
-				"positionInfo": "L_1_900",
-				"isLastProcess": 0
-			},
-			{
-				"componentId": "e167458070dd420f99e73442ccbf3741",
-				"componentType": "恢复护栏",
-				"componentName": "恢复护栏_1",
-				"componentTypeCode": "hfhl",
-				"plannedStartDate": "2023-05-08",
-				"plannedEndDate": "2023-05-15",
-				"actualCompletionTime": "",
-				"workStatus": "未开始",
-				"workStatusCode": "NOT_START",
-				"positionInfo": "L_1_900",
-				"isLastProcess": 1
-			}
-		]
-	}
-]

static/unity/StreamingAssets/Config/PersonnelData.txt

@@ -1,32 +0,0 @@
-[
-    {
-        "id":"role001",
-        "name":"赵一",
-        "job":"项目经理",
-        "present":true
-    },
-    {
-        "id":"role002",
-        "name":"钱二",
-        "job":"土建施工",
-        "present":true
-    },
-    {
-        "id":"role003",
-        "name":"孙三",
-        "job":"土建施工",
-        "present":true
-    },
-    {
-        "id":"role004",
-        "name":"李四",
-        "job":"电路施工",
-        "present":false
-    },
-    {
-        "id":"role005",
-        "name":"周五",
-        "job":"电路施工",
-        "present":true
-    }
-]

static/unity/StreamingAssets/Config/可视化初始化接口数据.json

@@ -1,107 +0,0 @@
-{
-	"code": 200,
-	"data": [
-		{
-			"wareHouseCode": "HA1",
-			"materialCategoryMedium": "G1003",
-			"materialCategorySmall": "G1003001",
-			"containerList": [{
-				"materialList": [{
-						"materialCode": "500000012"
-					},
-					{
-						"materialCode": "500000013"
-					},
-					{
-						"materialCode": "500000013"
-					}
-				],
-				"containerCode": "HA1-C00004"
-			}],
-			"position": "B01-010202",
-			"materialCategory": "G10"
-		},
-		{
-			"wareHouseCode": "HA1",
-			"materialCategoryMedium": "G1003",
-			"materialCategorySmall": "G1003001",
-			"pallet": {
-				"containerList": [{
-						"materialList": [{
-								"materialCode": "500000001"
-							},
-							{
-								"materialCode": "500000013"
-							},
-							{
-								"materialCode": "500000050"
-							}
-						],
-						"containerCode": "HA1-C00004"
-					},
-					{
-						"materialList": [{
-								"materialCode": "500000012"
-							},
-							{
-								"materialCode": "500000012"
-							},
-							{
-								"materialCode": "500000012"
-							},
-							{
-								"materialCode": "500000013"
-							},
-							{
-								"materialCode": "500000013"
-							},
-							{
-								"materialCode": "500000013"
-							}
-						],
-						"containerCode": "HA1-Z00001"
-					},
-					{
-						"materialList": [{
-							"materialCode": "500000012"
-						}],
-						"containerCode": "HA1-C00004"
-					}
-				],
-				"materialList": [{
-					"materialCode": "500000035"
-				}],
-				"palletNumber": "HA1-T00002"
-			},
-			"position": "B01-080103",
-			"materialCategory": "G10"
-		},
-		{
-			"wareHouseCode": "HA1",
-			"materialCategoryMedium": "G1504",
-			"materialCategorySmall": "G1504001",
-			"pallet": {
-				"materialList": [{
-						"materialCode": "500000001"
-					},
-					{
-						"materialCode": "550000002"
-					}
-				],
-				"palletNumber": "HA1-T00001"
-			},
-			"position": "C01-080101",
-			"materialCategory": "G15"
-		},
-		{
-			"wareHouseCode": "HA1",
-			"materialCategoryMedium": "G1504",
-			"materialCategorySmall": "G1504001",
-			"materialList": [{
-				"materialCode": "500000001"
-			}],
-			"position": "F01-010101",
-			"materialCategory": "G15"
-		}
-	]
-}

static/unity/StreamingAssets/GetNormalInspection.txt

@@ -1,50 +0,0 @@
-{
-	"code": 200,
-	"success": true,
-	"data": [{
-			"id": "1696424468583342081 ",
-			"user": "张三",
-			"startTime": "2023-08-29 15:28:06",
-			"endTime": "2023-08-30 09:59:42",
-			"locationHistoryTos": [{
-				"id": "1643796779071094785",
-				"posx": "15.23",
-				"posy": "0",
-				"posz": "0",
-				"locationId": "1633761781324627974",
-				"time": "2023-04-11 14:04:03",
-				"inspectionProblemsId": "7934540476122288021"
-			}]
-		},
-		{
-			"id": "1696424468583342873 ",
-			"user": "李四",
-			"startTime": "2023-08-29 15:28:06",
-			"endTime": "2023-08-30 09:59:42",
-			"locationHistoryTos": [{
-				"id": "1643796779071094785",
-				"posx": "15.23",
-				"posy": "0",
-				"posz": "0",
-				"locationId": "1633761781324627974",
-				"time": "2023-04-11 14:04:03",
-				"inspectionProblemsId": "7934540476122288021"
-			}]
-		},
-		{
-			"id": "1696424468583342666 ",
-			"user": "王五",
-			"startTime": "2023-08-29 15:28:06",
-			"endTime": "2023-08-30 09:59:42",
-			"locationHistoryTos": [{
-				"id": "1643796779071094785",
-				"posx": "15.23",
-				"posy": "0",
-				"posz": "0",
-				"locationId": "1633761781324627974",
-				"time": "2023-04-11 14:04:03",
-				"inspectionProblemsId": "7934540476122288021"
-			}]
-		}
-	]
-}

static/unity/StreamingAssets/UnityServicesProjectConfiguration.json

@@ -1 +0,0 @@
-{"Keys":["com.unity.services.core.version"],"Values":[{"m_Value":"1.3.1","m_IsReadOnly":true}]}

static/unity/index.html

@@ -190,9 +190,12 @@
     function getMaxVideoUrl(data) {
       var name = ''
       var url = ''
+      var noticeId = ''
       name = data.split(",")[0]
       url = data.split(",")[1]
-      window.parent.gantDialog1(name,url);
+      noticeId = data.split(",")[2]
+      videoStatus = data.split(",")[3]
+      window.parent.gantDialog1(name, url,noticeId,videoStatus);
     }
     function closeMaxVideo(data) {
       window.parent.closeMaxVideo();
@@ -236,15 +239,23 @@
     }
     // 关闭质量管控的常规巡检
     function closeRoutineTourLog() {
-
+      window.parent.closeRoutineTourLog()
     }
     //报警视频弹窗打开
     function SiteSafetyAlarm(val) {
+      console.log(val,'报警弹窗');
       var data01 = ''
       var data02 = ''
       data01 = val.split(",")[0]
       data02 = val.split(",")[1]
-      window.parent.SiteSafetyAlarm(data01.split("(")[1], data02.split(")")[0], val.split(",")[2])
+      window.parent.SiteSafetyAlarm(data01.split("(")[1], data02.split(")")[0], val.split(",")[2],val.split(",")[3],val.split(",")[4])
+    }
+    //报警视频弹窗关闭
+    function clearSecurityAlarm(params) {
+      console.log(params,'报警视频关闭');
+      if (unity != null) {
+        unity.SendMessage("GameManager", 'ClearSecurityAlarm', params);
+      }
     }
     //报警视频弹窗关闭
     function CloseSiteSafetyAlarm() {
@@ -252,39 +263,74 @@
     }
     //环境传感器环境监测数据实时推送
     function webSocketEnvironmentData(val) {
-      console.log(val,'环境监测数据');
+      // console.log(val, '环境监测数据');
       if (unity != null) {
         unity.SendMessage("GameManager", 'WebSocketEnvironmentData', val);
       }
     }
     //人员定位数据实时推送
-    function WebSocketLocationData(val) {
-      console.log(val,'人员定位数据');
+    function webSocketLocationData(val) {
+      console.log(val, '人员定位数据');
       if (unity != null) {
         unity.SendMessage("GameManager", 'WebSocketLocationData', val);
       }
     }
     //人员考勤实时推送
     function webSocketAttendanceView(val) {
-      console.log(val,'人员考勤数据');
+      console.log(val, '人员考勤数据');
       if (unity != null) {
         unity.SendMessage("GameManager", 'WebSocketAttendanceView', val);
       }
     }
     //安全帽定位数据实时推送
     function webSocketEquipmentStatus(val) {
-      console.log(val,'安全帽数据');
+      console.log(val, '安全帽数据');
       if (unity != null) {
         unity.SendMessage("GameManager", 'WebSocketEquipmentStatus', val);
       }
     }
-    //当日环境告警事件实时推送
-    function webSocketEenvironmentAlarm(val) {
-      console.log(val,'当日环境告警数据');
+    //当工地安全告警事件实时推送
+    function webSocketMonitoringAlarm(val) {
+      console.log(val, '工地安全告警数据');
       if (unity != null) {
-        unity.SendMessage("GameManager", 'WebSocketEenvironmentAlarm', val);
+        unity.SendMessage("GameManager", 'WebSocketMonitoringAlarm', val);
       }
     }
+    //安全帽定位推送
+    function webSocketSafetyHat(val) {
+      console.log(val, '安全帽定位推送');
+      if (unity != null) {
+        unity.SendMessage("GameManager", 'WebSocketSafetyHat', val);
+      }
+    }
+    //当日环境告警事件实时推送
+    function webSocketEnvironmentAlarm(val) {
+      console.log(val, '当日环境告警数据');
+      if (unity != null) {
+        unity.SendMessage("GameManager", 'WebSocketEnvironmentAlarm', val);
+      }
+    }
+    //安全帽视频
+    function getSmartHelmetVideoUrl(val) {
+      var data01 = ''
+      var data02 = ''
+      data01 = val.split(",")[0]
+      data02 = val.split(",")[1]
+      window.parent.getSmartHelmetVideoUrl(data01.split("(")[1], data02.split(")")[0], val.split(",")[2], val.split(",")[3])
+    }
+    function closeSmartHelmetVideoUrl() {
+      window.parent.closeSmartHelmetVideoUrl()
+    }
+    function successfulBroadcast(params) {
+      console.log(params,'现场播报数据');
+      if (unity != null) {
+        unity.SendMessage("GameManager", 'SuccessfulBroadcast', params);
+      }
+    }
+    //点击点位播放对应视频进度
+    function getVideoProgress(params) {
+      window.parent.getVideoProgress(params)
+    }
     //设备状态实时推送
     document.body.appendChild(script);
   </script>

vue.config.js

@@ -51,7 +51,7 @@ module.exports = {
         proxy: {
             '/api': { //代理的名字
                 // target: 'http://175.27.191.156:11000/api/', 
-                target: 'http://175.27.191.156:8181/', 
+                target: 'http://192.168.131.101/12345/', 
                 // target: 'http://172.16.1.178:5001/',
                 // target: 'http://ht.api.umayle.com:2022', 
                 ws: true,