20230403

build/build.js

@@ -32,10 +32,15 @@ rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => {
       process.exit(1)
     }
 
-    (chalk.cyan('  Build complete.\n'))
+    // (chalk.cyan('  Build complete.\n'))
-    (chalk.yellow(
+    // (chalk.yellow(
-      '  Tip: built files are meant to be served over an HTTP server.\n' +
+    //   '  Tip: built files are meant to be served over an HTTP server.\n' +
-      '  Opening index.html over file:// won\'t work.\n'
+    //   '  Opening index.html over file:// won\'t work.\n'
-    ))
+    // ))
+    console.log((chalk.cyan('  Build complete.\n'))); 
+   console.log((chalk.yellow(
+    '  Tip: built files are meant to be served over an HTTP server.\n' +
+    '  Opening index.html over file:// won\'t work.\n'
+  )));
   })
 })

build/check-versions.js

@@ -47,8 +47,6 @@ module.exports = function () {
       const warning = warnings[i]
       ('  ' + warning)
     }
-
-    ()
     process.exit(1)
   }
 }

config/index.js

@@ -3,7 +3,20 @@
 // see http://vuejs-templates.github.io/webpack for documentation.
 
 const path = require('path')
-
+const os = require('os');
+function getIPAdress() {
+    var interfaces = os.networkInterfaces();
+    for (var devName in interfaces) {
+    var iface = interfaces[devName];
+    for (var i = 0; i < iface.length; i++) {
+    var alias = iface[i];
+    if (alias.family === 'IPv4' && alias.address !== '127.0.0.1' && !alias.internal) {
+    return alias.address;
+    }
+    }
+    }
+    }
+    const myHost = getIPAdress();
 module.exports = {
   dev: {
     // Paths
@@ -26,6 +39,13 @@ module.exports = {
           '^/api': ''
         }
       },
+      '/v3': { //代理的名字
+        target: 'http://221.226.177.198:14023/v3/', 
+        changeOrigin: true,
+        pathRewrite:{
+            '^/v3':'',
+        }
+    }
     //   '/api': { //代理的名字
     //     target: 'http://220.163.114.158:5001/', 
     //     changeOrigin: true,
@@ -36,7 +56,7 @@ module.exports = {
     },
 
     // Various Dev Server settings
-    host: '0.0.0.0', // can be overwritten by process.env.HOST
+    host: myHost, // can be overwritten by process.env.HOST
     port: 8083, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
     autoOpenBrowser: false,
     errorOverlay: true,
@@ -52,7 +72,7 @@ module.exports = {
     showEslintErrorsInOverlay: false,
 
     /**
-     * Source Maps
+     * Source Mapi
      */
 
     // https://webpack.js.org/configuration/devtool/#development
@@ -73,10 +93,10 @@ module.exports = {
     // Paths
     assetsRoot: path.resolve(__dirname, '../dist'),
     assetsSubDirectory: 'static',
-    assetsPublicPath: '/web/',
+    // assetsPublicPath: '/web/',
-
+    assetsPublicPath: '/',
     /**
-     * Source Maps
+     * Source Mapi
      */
 
     productionSourceMap: false,

src/api/api.js

@@ -19,6 +19,13 @@ export const getToken = (data) => {
      'Tenant-Id': '748495','Content-Type': 'application/json;charset=UTF-8'}}
      )
 };
+//获取天气数据
+export const getWeatherData = (params) => {
+    return axios.get('v3/weather/weatherInfo',{
+    params,
+    }
+     )
+  };
 //项目信息接口
 export const getProjectInfo = (params) => {
   let access_token = JSON.parse(sessionStorage.getItem("token"))

src/components/common/mdScreenPie.vue

@@ -119,14 +119,17 @@ export default {
               formatter: "{b|{b}}{c|{c}}人",
               rich: {
                 b: {
-                  fontSize: 15,
+                  fontSize: 14,
                   lineHeight: 33,
                 },
                 c: {
-                  fontSize: 25,
+                  fontSize: 20,
                   lineHeight: 22,
                   align: "center",
-                  opacity: 0.1
+                  opacity: 0.1,
+                //   color:'#fff',
+                fontWeight:700,
+                  padding: [0, 5, 0, 5]
                 },
               },
               textStyle: {
@@ -136,6 +139,8 @@ export default {
             },
             labelLine: {
               normal: {
+                 length: 5,
+                length2: 10,
                 show: false,
               },
             },

src/components/common/pieChart.vue

@@ -110,25 +110,30 @@ export default {
               itemStyle: { // 此配置
                 normal: {
                   borderWidth: 2,
-                  borderColor: '#52FFC1'
+                  borderColor: '#52FFC1',
+                  
                 }
               },
              rich: {
                 b: {
-                  fontSize: 15,
+                  fontSize: 14,
                   lineHeight: 33,
                 },
                 c: {
                   fontSize: 18,
                   lineHeight: 22,
                   align: "center",
-                  opacity: 0.1
+                  opacity: 0.1,
+                  fontWeight:700,
+                  padding: [0, 5, 0, 5]
                 },
               },
               position: '',
             },
             labelLine: {
               normal: {
+                 length: 5,
+                length2: 10,
                 show: false
               }
             },

src/components/common/tableGantt.vue

@@ -789,6 +789,12 @@ $gantt_item_half: 4px;
     }
 
 }
+.el-table .el-table__cell .hover-row{
+    background-color: #2f807d!important;
+}
+.el-table .success-row{
+    background-color: #2f807d!important;
+}
 .el-table__body tr.hover-row.current-row>td.el-table__cell, .el-table__body tr.hover-row.el-table__row--striped.current-row>td.el-table__cell, .el-table__body tr.hover-row.el-table__row--striped>td.el-table__cell, .el-table__body tr.hover-row>td.el-table__cell {
     background-color: #2f807d!important;
 }
@@ -849,7 +855,15 @@ $gantt_item_half: 4px;
     background: #1A5856 !important;
 }
 
-/deep/ .el-table .success-row {
+// /deep/ .el-table .success-row {
-    background: transparent;
+//     background: transparent;
-}
+// }
 </style>
+<style lang="less">
+.el-table__body .el-table__row.hover-row td{
+  background-color: #2f807d !important;
+}
+.el-table tbody tr:hover>td {
+ 	background: #2f807d !important;
+}
+</style>

src/main.js

@@ -41,7 +41,9 @@ Vue.filter('datefmt',function (input,fmtstring) {//当input为时间戳时，需
   // 使用momentjs这个日期格式化类库实现日期的格式化功能
   return moment(input).format(fmtstring);
 });
-
+// import videojs from "video.js";
+// import "video.js/dist/video-js.css";
+// Vue.prototype.$video = videojs;
 Vue.prototype.$moment = moment
 Vue.config.productionTip = false
 

src/router/index.js

@@ -23,7 +23,7 @@ Vue.use(Router);
 
 const router = new Router({
   mode: process.env.NODE_ENV === "production" ? "history" : "",
-  base: process.env.NODE_ENV === "production" ? "/web" : "",
+  base: process.env.NODE_ENV === "production" ? "/" : "",
   routes: [
    
     {

src/views/index.vue

@@ -37,9 +37,12 @@
                 }}℃</span
               >
             </div>
-            <div class="closeIndex" @click="closeindex">
+            <div class="closeIndex" @click="closeindex" v-if="closeIndexShow">
               <img src="../assets/pic/closeIndex.png" alt="" />
             </div>
+            <div class="exitFull" @click="exitFullchange" v-if="exitFullShow">
+              <img src="../assets/pic/exitFull.png" alt="" />
+            </div>
           </div>
         </div>
       </div>
@@ -47,24 +50,25 @@
         :style="{ 'background-image': !boxNone ? `url(${require(`../assets/pic/exitFull.png`)}` : `url(${require(`../assets/pic/fullScreen.png`)}` }">
       </div> -->
       <!-- 首页 -->
-      <ModelScreenComponents v-if="indexShow" />
+      <ModelScreenComponents v-if="indexShow" :environmentData="environmentData" ref="modelScreen"/>
       <!-- 人员管理 -->
-      <PersonnelComponents v-if="personnelShow" />
+      <PersonnelComponents v-if="personnelShow" ref="personnel"/>
       <!-- 视频监控 -->
       <VideoSurveillanceComponents
         v-if="videoSurveillanceShow"
         @transfer="getUser"
+        ref="videoSurveillance"
       />
       <!-- 视频监控子页面 -->
       <VideoViewingComponents
         v-if="videoViewingShow"
         :videoName="videoName"
-        :videoId="videoId"
+        :videoId="videoId"  
       />
       <!-- 进度管理 -->
-      <ProgressComponents v-if="progressShow" />
+      <ProgressComponents v-if="progressShow" ref="progress"/>
       <!-- 安全管理 -->
-      <ManagementComponents v-if="managementShow" />
+      <ManagementComponents v-if="managementShow" ref="management"/>
       <!-- 中间1 -->
 
       <!-- 中间2 -->
@@ -136,6 +140,7 @@ import mqtt from "mqtt"; // mqtt协议
 import Swiper from "@/components/common/carousel";
 import Resize from "../utils/Resize.vue";
 import axios from "axios";
+import {getWeatherData} from "@/api/api";
 export default {
   name: "report",
   components: {
@@ -387,7 +392,10 @@ export default {
       menuType: null,
       numberList: [5, 5],
       boxNone: true,
-      topicSends: [],
+      topicSends:[],
+      environmentData:[],
+      closeIndexShow:true,
+      exitFullShow:false
     };
   },
   created() {
@@ -413,26 +421,31 @@ export default {
       // console.log("topic",topic)
       switch (topic) {
         // 接收托片
-        case "/SC/pub/uwb":
+         case "/SC/pub/uwb":
-          try {
+             try {
-            // console.log("message", message)
+                // console.log("message", message)  
-            const utf8decoder = new TextDecoder();
+              const utf8decoder = new TextDecoder()
-            const u8arr = new Uint8Array(message);
+              const u8arr = new Uint8Array(message)
-            const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
+              const temp = utf8decoder.decode(u8arr)	// 将二进制数据转为字符串
-            const msg = JSON.parse(temp); //这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据
+              const msg = JSON.parse(temp)		//这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据
-            console.log("msg", time.toLocaleString(), msg); //msg为转换后的JSON数据
+              console.log("msg", msg)   //msg为转换后的JSON数据  
-          } catch (error) {}
+            document.getElementById("unityModule").contentWindow.receiveMqttData(JSON.stringify(msg));
-          break;
+          } catch (error) {
-        case "/SC/pub/env":
+          }
-          try {
+          break; 
-            //  console.log("环境message", message)
+          case "/SC/pub/env":
-            const utf8decoder = new TextDecoder();
+             try {
-            const u8arr = new Uint8Array(message);
+                //  console.log("环境message", message) 
-            const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
+              const utf8decoder = new TextDecoder()
-            const msg = JSON.parse(temp); //这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据
+              const u8arr = new Uint8Array(message)
-            console.log("环境msg",time.toLocaleString(), msg); //msg为转换后的JSON数据
+              const temp = utf8decoder.decode(u8arr)	// 将二进制数据转为字符串
-          } catch (error) {}
+              const msg = JSON.parse(temp)		//这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据
-          break;
+              console.log("环境msg", msg)   //msg为转换后的JSON数据
+              this.environmentData=msg.data
+          } catch (error) {
+
+          }
+          break; 
       }
     },
     closeindex(){
@@ -457,6 +470,25 @@ export default {
           });
         });
     },
+    exitFullchange(){
+        this.closeBig()
+        if(this.indexShow==true){
+            console.log("首页")
+            this.$refs.modelScreen.disBox()
+        }else if(this.personnelShow==true){
+             console.log("人员管理")
+              this.$refs.personnel.disBox()
+        }else if(this.videoSurveillanceShow==true){
+            //  console.log("视频监控")
+            //   this.$refs.modelScreen.disBox()
+        }else if(this.managementShow==true){
+             console.log("安全管理")
+              this.$refs.management.disBox()
+        }else if(this.progressShow==true){
+             console.log("进度管理")
+              this.$refs.progress.disBox()
+        }
+    },
     //获取当前时间
     getTime() {
       let myDate = new Date();
@@ -489,13 +521,20 @@ export default {
     },
     //获取天气数据
     getWeather() {
-      axios({
+        getWeatherData({
-        url: "https://restapi.amap.com/v3/weather/weatherInfo?key=e979d73682c0c69059e4cb6740c9dacd&city=320100",
+        key: 'e979d73682c0c69059e4cb6740c9dacd',
-        methods: "",
+        city:'320100'
       }).then((res) => {
-        this.weatherItem = res.data.lives[0];
+         this.weatherItem = res.data.lives[0];
         this.weatherImg = this.changeWeatherImg(res.data.lives[0].weather);
-      });
+      })
+    //   axios({
+    //     url: "https://restapi.amap.com/v3/weather/weatherInfo?key=e979d73682c0c69059e4cb6740c9dacd&city=320100",
+    //     methods: "",
+    //   }).then((res) => {
+    //     this.weatherItem = res.data.lives[0];
+    //     this.weatherImg = this.changeWeatherImg(res.data.lives[0].weather);
+    //   });
     },
     changeWeatherImg(weather) {
       if (weather == "雾") {
@@ -587,10 +626,14 @@ export default {
     },
     //放大
     openBig() {
+     this.exitFullShow = true
+     this.closeIndexShow = false
       document.getElementById("unityModule").contentWindow.fullScreen();
     },
     //关闭放大
     closeBig() {
+        this.exitFullShow = false
+     this.closeIndexShow = true
       document.getElementById("unityModule").contentWindow.exitFullScreen();
     },
     // 菜单点击
@@ -1269,6 +1312,13 @@ export default {
     top: 5px;
     right: 22px;
   }
+  .exitFull{
+    width: 40px;
+    height: 40px;
+    position: absolute;
+    top: -3px;
+    right: 28px;
+  }
 }
 
 .header .title {

src/views/login.vue

@@ -9,10 +9,21 @@
           <div>
           </div>
           <div class="titRight">
-            <span>2023年2月17日 星期四 14:26</span>
+           <span>{{ dateNew }}&nbsp;{{ getWeek }}&nbsp;{{ time }}</span>
-            <span></span>
+              <span
-            <span>&nbsp;&nbsp;天气&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
+                ><img
-            <span>晴 12℃</span>
+                  :src="weatherImg"
+                  alt=""
+                  style="width: 100%; height: 100%"
+              /></span>
+              <span
+                >&nbsp;&nbsp;天气&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span
+              >
+              <span
+                >{{ weatherItem.weather }} &nbsp;{{
+                  weatherItem.temperature
+                }}℃</span
+              >
           </div>
         </div>
       </div>
@@ -54,7 +65,7 @@ import BarChart from "@/components/common/BarChart";
 import mdScreenPie from "@/components/common/mdScreenPie";
 import Swiper from "@/components/common/carousel";
 import Resize from '../utils/Resize.vue'
-import {getToken} from "@/api/api";
+import {getToken,getWeatherData} from "@/api/api";
 export default {
   name: "report",
   components: {
@@ -68,11 +79,23 @@ export default {
       tienum: '',
       showType: true,
       topicSends:[],
+       weatherImg: require("@/assets/pic/sun.png"),
+        getWeek: "星期四",
+      dateNew: "2023年2月17日",
+      time: "14:26",
+      temperature: "12",
+      weather: "晴",
+      weatherItem: {},
       param: {
                 username: 'dlgc_pic',
                 password: 'e19d5cd5af0378da05f63f891c7467af',
                 tenantId:'748495'
             },
+    //    param: {
+    //     username: '',
+    //     password: '',
+    //     tenantId:''
+    // },
             checked: false,
             rules: {
                 tenantId: [{ required: true, message: '账号Id不能为空', trigger: 'blur' }],
@@ -86,49 +109,12 @@ export default {
     this.vdaH = h - 0 + "px";
        this.createMqtt()
        this.getWeather()
-      //  this.getTokenData()
+        window.setInterval(() => {
+      this.getTime();
+    }, 1000);
   },
 
   methods: {
-    getTokenData(){
-        // getToken({grant_type:'password',scope:'all',tenantId:'748495',username:'dlgc_pic',password:'e19d5cd5af0378da05f63f891c7467af',type:"account"}).then(res => {
-        //     console.log("res",res.data)
-        // })
-        let data = {
-            grant_type:'password',
-            scope:'all',
-            tenantId:'748495',
-            username:'dlgc_pic',
-            password:'e19d5cd5af0378da05f63f891c7467af',
-            type:"account"}
-
-            getToken(data).then((res)=>{
-            })
-            // this.$axios({
-            //                 method: "post",
-            //                 // url: `${baseUrl}file/local/files`,
-            //                 url: `http://175.27.191.156:11000/api/blade-auth/oauth/token`,
-            //                 data: data,
-            //                 dataType: 'jsonp',
-            //                 headers: {
-            //                     // Authorization: "Basic " + token,
-            //                      Authorization: 'Basic c2FiZXI6c2FiZXJfc2VjcmV0',
-            //                      TenantId: '748495'
-            //                 },
-            //             })
-            //             .then(function(res) {
-            //                 console.log(res.data,'================');
-            //                 // z.modelshowdata.fileList = [
-            //                 //     { fileName: e.file.name, filePath: v.data.fileName },
-            //                 // ];
-            //                 // z.$message.success("上传成功");
-            //             })
-            //             .catch(function(err) {
-            //                 // z.$message.error("请求失败");
-            //             });
-               
-              
-    },
      getType() {
             let datas = {
                 account:this.param.username,
@@ -214,13 +200,82 @@ export default {
           break; 
       }
     },
-
+//获取当前时间
+    getTime() {
+      let myDate = new Date();
+      let wk = myDate.getDay();
+      //年
+      let year = new Date().getFullYear();
+      //月份是从0月开始获取的，所以要+1;
+      let month = new Date().getMonth() + 1;
+      //日
+      let day = new Date().getDate();
+      //时
+      let hour = new Date().getHours();
+      //分
+      let minute = new Date().getMinutes();
+      //秒
+      // let second = new Date().getSeconds();
+      let weeks = [
+        "星期日",
+        "星期一",
+        "星期二",
+        "星期三",
+        "星期四",
+        "星期五",
+        "星期六",
+      ];
+      let week = weeks[wk];
+      this.getWeek = week;
+      this.dateNew = year + "年" + month + "月" + day + "日";
+      this.time = hour + ":" + minute;
+    },
 getWeather () {
-      this.$axios.get('https://restapi.amap.com/v3/weather/weatherInfo?key=e979d73682c0c69059e4cb6740c9dacd&city=320100' ).then(function(reponse){
+      getWeatherData({
-        console.log("reponse.data",reponse.data)
+        key: 'e979d73682c0c69059e4cb6740c9dacd',
-			}).catch(() => {})
+        city:'320100'
+      }).then((res) => {
+         this.weatherItem = res.data.lives[0];
+        this.weatherImg = this.changeWeatherImg(res.data.lives[0].weather);
+      })
     } ,
-
+   changeWeatherImg(weather) {
+      if (weather == "雾") {
+        return require("@/assets/weather/gale.png");
+      } else if (weather == "阴") {
+        return require("@/assets/weather/Cloudy.png");
+      } else if (weather == "多云") {
+        return require("@/assets/weather/Cloudy.png");
+      } else if (weather == "晴") {
+        return require("@/assets/weather/sun.png");
+      } else if (weather == "中雨") {
+        return require("@/assets/weather/middlerain.png");
+      } else if (weather == "小雨") {
+        return require("@/assets/weather/rain.png");
+      } else if (weather == "大雨") {
+        return require("@/assets/weather/rainstorm.png");
+      } else if (weather == "沙尘暴") {
+        return require("@/assets/weather/sand.png");
+      } else if (weather == "霾") {
+        return require("@/assets/weather/smog.png");
+      } else if (weather == "雷电") {
+        return require("@/assets/weather/thunder.png");
+      } else if (weather == "雷阵雨") {
+        return require("@/assets/weather/shower.png");
+      } else if (weather == "冰雹") {
+        return require("@/assets/weather/hail.png");
+      } else if (weather == "雪") {
+        return require("@/assets/weather/snow.png");
+      } else if (weather == "雨夹雪") {
+        return require("@/assets/weather/rainsnow.png");
+      } else if (weather == "中雪") {
+        return require("@/assets/weather/mieddlesnow.png");
+      } else if (weather == "大雪") {
+        return require("@/assets/weather/bigsnow.png");
+      } else if (weather == "小雪") {
+        return require("@/assets/weather/rainlitter.png");
+      }
+    },
     changeMessage(val) {
       this.tienum = val
     },
@@ -329,7 +384,7 @@ getWeather () {
       right: 80px;
       width: 17.5px;
       height: 18px;
-      background: url("~@/assets/pic/sun.png") no-repeat;
+    //   background: url("~@/assets/pic/sun.png") no-repeat;
       background-size: 100% 100%;
     }
   }

src/views/managementComponents.vue

@@ -20,6 +20,7 @@
     <div
       @click="disBox"
       class="screenBox"
+      v-if="disBoxShow"
       :style="{
         'background-image': !boxNone
           ? `url(${require(`../assets/pic/exitFull.png`)}`
@@ -517,6 +518,7 @@ export default {
       menuType: 4,
       numberList: [5, 5],
       boxNone: true,
+      disBoxShow:true,
     };
   },
   created() {
@@ -555,6 +557,15 @@ export default {
     },
     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();
+           this.disBoxShow=false
+      }
       this.$refs.screenBox.style.animationPlayState = "running";
     },
     goBack(val) {
@@ -999,7 +1010,7 @@ export default {
 
 .ftahBox {
   text-align: center;
-  padding-top: 27px;
+  padding-top: 17px;
   width: 89px;
 
   @media only screen and (max-height: 1000px) {
@@ -1053,7 +1064,7 @@ export default {
 }
 .ftahBox1 {
   // text-align: center;
-  padding-top: 27px;
+  padding-top: 17px;
   width: 89px;
   height: 100px;
   display: flex;

src/views/modelScreen.vue

@@ -449,7 +449,6 @@ export default {
     let h = document.documentElement.clientHeight || document.body.clientHeight;
     this.vdaH = h - 0 + "px";
        this.createMqtt()
-        this.getWeather()
          this.getTime()
   },
   methods: {
@@ -505,14 +504,14 @@ export default {
         this.time = hour +':'+ minute
     },
     //获取天气数据
-    getWeather () {
+    // getWeather () {
-     axios({
+    //  axios({
-                url: 'https://restapi.amap.com/v3/weather/weatherInfo?key=e979d73682c0c69059e4cb6740c9dacd&city=320100',
+    //             url: 'https://restapi.amap.com/v3/weather/weatherInfo?key=e979d73682c0c69059e4cb6740c9dacd&city=320100',
-                methods: ''
+    //             methods: ''
-            }).then(res => {
+    //         }).then(res => {
-                this.weatherItem = res.data.lives[0];
+    //             this.weatherItem = res.data.lives[0];
-            });
+    //         });
-    } ,
+    // } ,
     changeMessage(val) {
       this.tienum = val
     },

src/views/modelScreenComponents.vue

@@ -22,6 +22,7 @@
     <div
       @click="disBox"
       ref="screenBox"
+       v-if="disBoxShow"
       :class="!boxNone ? 'screenBox dh1' : 'screenBox dh2'"
       :style="{
         'background-image': !boxNone
@@ -209,12 +210,19 @@
       </div>
       <div class="videoBox">
         <div
-          style="position: relative; margin-left: 30px; margin-right: 20px"
+          style="position: absolute; margin-left: 30px; margin-right: 20px"
           class="videoFat"
           v-for="(item,index) in videoList"
           :key="index"
         >
-          <img :src="item.thumbnail" alt="" />
+          <img v-show="iframeShow==false" :src="item.thumbnail" alt="" />
+          <div class="openChange" @click="openChangebtn" v-show="iframeShow==false"> <img src="../assets/pic/play.png" alt=""></div>
+          
+            <!-- <Video></Video> -->
+                  <iframe  ref="iframe"  id="iframeid" :src="src" frameborder="O" class="iframe" scrolling="auto" width="100%"
+                    height="100%" v-show="iframeShow"> 
+                </iframe>
+                <!-- <button @click="vueSendMsg">vue向iframe传递信息</button> -->
           <div class="smallBox">{{item.equipmentName}}</div>
         </div>
         <!-- <div style="position: relative" class="videoFat">
@@ -349,6 +357,8 @@ import mdScreenPie from "@/components/common/mdScreenPie";
 import Swiper from "@/components/common/carousel";
 import Resize from "../utils/Resize.vue";
 import axios from "axios";
+import Video from "./video";
+import { ref, nextTick, onMounted } from 'vue'
 import {
   getProjectInfo,
   getUserMonitorInfo,
@@ -360,14 +370,23 @@ import {
 } from "@/api/api";
 export default {
   name: "report",
+  props: {
+      environmentData:{
+        type:Array,
+        default: []
+      }
+  },
   components: {
     mdScreenPie,
     BarChart,
     Swiper,
     Resize,
+    Video
   },
+
   data() {
     return {
+        iframeShow:false,
       videoList:[],//视频监控数据
       jinduList:0, //计算进度条的宽度
       progress:0, //计算进度条的值
@@ -383,6 +402,10 @@ export default {
       weatherItem: {},
       tienum: "",
       showType: true,
+      flvUrl:"http://127.0.0.1:10800/flv/live/stream_3.flv",
+      src:"", 
+      iframe:"",
+      player: null,
       boxList: [
         {
           c1: "开工",
@@ -426,38 +449,46 @@ export default {
           src: "@/assets/pic/23.png",
         },
       ], // 专题数据列表
+      //1633761781274296326 甲烷监测 CVALUE 甲烷1633761781270102018 氧气监测 OVALUE 氧气1633761781282684929 硫化氢监测  SVALUE 硫化氢1633761781286879234 温湿度监测 TVALUE 湿度1633761781274296322 二氧化碳监测 OVALUE 二氧化碳
       iconPicList: [
         {
+        // id:'1633761781286879234',
+            id:'',
           icon: "wendu",
           name: "温度",
           val: "19.8",
           tem: "℃",
         },
         {
+            id:'1633761781286879234',
           icon: "shidu",
           name: "湿度",
           val: "19.8",
           tem: "%",
         },
         {
+            id:'1633761781270102018',
           icon: "yangqi",
           name: "氧气值",
           val: "19.8",
           tem: "%VOL",
         },
         {
+            id:'1633761781274296322',
           icon: "co2",
           name: "二氧化碳",
           val: "19.8",
           tem: "%VOL",
         },
         {
+            id:'1633761781274296326',
           icon: "ch4",
           name: "甲烷",
           val: "19.8",
           tem: "ppm",
         },
         {
+            id:'1633761781282684929',
           icon: "h2s",
           name: "硫化氢",
           val: "19.8",
@@ -534,7 +565,19 @@ export default {
       onSiteNumber: [], //今日出勤
       boxNone: true,
       topicSends: [],
+      disBoxShow:true,
     };
+  },
+    watch: {
+    // 监听父组件中的数据变化，重新触发Echarts
+    environmentData: {
+      deep: true,
+      handler (val) {
+        this.$nextTick(() => {
+          this.changeEnvironmentData(val)
+        })
+      }
+    }
   },
   created() {
     let h = document.documentElement.clientHeight || document.body.clientHeight;
@@ -544,6 +587,30 @@ export default {
     this.getTime();
   },
   methods: {
+    //获取环境数据
+    changeEnvironmentData(val){
+         console.log("val",val)
+        var environmentDataNew = []
+        environmentDataNew = val.map(item => {
+            console.log("item",Object.keys(item))
+             console.log("item",Object.values(item)[0][0].value)
+            return {
+                            id: Object.keys(item)[0],
+                            val: Object.values(item)[0][0].value,
+                            dataId : Object.values(item)[0][0].dataId,
+
+                    }  
+        })
+        console.log("environmentDataNew",environmentDataNew)
+         for(var i = 0; i < environmentDataNew.length; i++){
+                for(var j = 0; j < this.iconPicList.length; j++){
+                    if(this.iconPicList[j].id==environmentDataNew[i].id){
+                       this.iconPicList[j].val = environmentDataNew[i].val
+                    }
+                }
+          }
+    },
+ 
     createMqtt() {
       this.topicSends = ["/SC/pub/uwb"];
       console.log("this.topicSends", this.topicSends);
@@ -612,10 +679,13 @@ export default {
            console.log("this.boxNone",this.boxNone)
       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();
+           this.disBoxShow=false
       }
       this.$refs.screenBox.style.animationPlayState = "running";
     },
@@ -652,9 +722,44 @@ export default {
         }, 800);
       }
     },
+//     sendMessage(){
+// this.iframe.postMessage({ data:"传给你个值呀"},'*');
+// },
+ // vue获取iframe传递过来的信息
+    getiframeMsg(event){
+      const res = event.data;
+      console.log(event)
+      if(res.cmd == 'myIframe'){
+        console.log(res)
+      }
+    },
+    // 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传递的消息',
+        } 
+      },'*')
+      
+    },
+    // 触发iframe中的方法
+    iframeMethods(){
+      document.getElementById('iframeid').contentWindow.triggerByVue('通过Vue触发iframe中的方法');
+    },
+    openChangebtn(){
+        this.iframeShow = true
+        this.vueSendMsg()
+    }
   },
-
+// destroyed(){
+// window.removeEventListener("message",this.sendMessage)
+// },
   mounted() {
+  
     //基本情况
     getProjectInfo().then((res) => {
       this.introduction = res.data.data[0].introduction;
@@ -747,6 +852,14 @@ export default {
         this.videoList = Object.keys(res.data.data).map((item,index)=>{
           return {thumbnail:res.data.data[item].thumbnail,equipmentName:res.data.data[item].equipmentName}
         })
+//           this.$nextTick(function(){
+//         this.src = '../static/flv/demo1.html';
+//         console.log("this.$refs.iframeld",this.$refs.iframeld)
+// this.iframe = this.$refs.iframeld.contentWindow
+// window.addEventListener("message",this.sendMessage);
+// });
+this.src = '../static/flv/demo1.html';
+window.addEventListener('message',this.getiframeMsg)
       })
     });
 
@@ -758,6 +871,7 @@ export default {
       })();
     };
   },
+  
 };
 </script>
 
@@ -1148,19 +1262,31 @@ export default {
   // display: flex;
   // width: 100%;
   overflow-y: auto; //重点
-  height: calc(100% - 60px);
+//   height: calc(100% - 60px);
+   height: 85%;
       top: 40px;
+      width: 100%;
   .videoFat {
     background: gray;
     flex: 1;
-    width: 165px;
+    // width: 165px;
-    height: 183px;
+    // height: 183px;
+    height: 92%;
+    width: 87%;
     float: left;
-        margin-top: 5%;
+    margin-top: 2%;
+        
     img {
       width: 100%;
       height: 100%;
     }
+    .openChange{
+       position: absolute;
+        width: 30px;
+        height: 30px;
+        top: 50%;
+        left: 50%;
+    }
   }
 }
 
@@ -1743,9 +1869,16 @@ export default {
 /deep/ .el-scrollbar__wrap {
   margin-bottom: 10px !important;
 }
+
+
 </style>
 <style>
 .el-carousel__indicators--outside {
   display: none;
 }
+.el-progress-bar__outer{
+    /* background-color: transparent!important; */
+    background-color:rgb(55,142,136)!important;
+    opacity: 0.5!important;
+}
 </style>

src/views/personnelComponents.vue

@@ -3,6 +3,7 @@
     <div
       @click="disBox"
       class="screenBox"
+       v-if="disBoxShow"
       :style="{
         'background-image': !boxNone
           ? `url(${require(`../assets/pic/exitFull.png`)}`
@@ -257,44 +258,7 @@ export default {
         meeting:{}, //站班会记录
       boxNone: true,
       colorList: ["#00A572", "#008AA4", "#7968D9", "#C7A73E"],
-      iconPicList: [
+
-        {
-          icon: "wendu",
-          name: "温度",
-          val: "19.8",
-          tem: "℃",
-        },
-        {
-          icon: "shidu",
-          name: "湿度",
-          val: "19.8",
-          tem: "%",
-        },
-        {
-          icon: "yangqi",
-          name: "氧气值",
-          val: "19.8",
-          tem: "%VOL",
-        },
-        {
-          icon: "co2",
-          name: "二氧化碳",
-          val: "19.8",
-          tem: "%VOL",
-        },
-        {
-          icon: "ch4",
-          name: "甲烷",
-          val: "19.8",
-          tem: "ppm",
-        },
-        {
-          icon: "h2s",
-          name: "硫化氢",
-          val: "19.8",
-          tem: "ppm",
-        },
-      ],
       tableData: [
         {
           entName: "我打打死",
@@ -381,13 +345,13 @@ export default {
       topicSends: [],
       pieData: [], //人员统计,
       constructionPersonnel: [], //施工人员组成
+       disBoxShow:true,
     };
   },
   created() {
     let h = document.documentElement.clientHeight || document.body.clientHeight;
     this.vdaH = h - 0 + "px";
     console.log("this.topicSends", this.topicSends);
-    console.log("this.iconPicList", this.iconPicList);
   },
   mounted() {
     this.getUser();
@@ -466,8 +430,10 @@ export default {
       if(this.boxNone == true){
         
           window.parent.closeBig();
+          this.disBoxShow=true
       }else if(this.boxNone == false){
           window.parent.openBig();
+          this.disBoxShow=false
       }
       this.$refs.screenBox.style.animationPlayState = "running";
     },
@@ -518,7 +484,7 @@ export default {
 
 <style scoped lang="less">
 .zzc {
-  background: rgba(0, 0, 0, 0.6);
+  background: rgba(0, 0, 0, 0.4);
   width: 100%;
   height: 100%;
   position: absolute;

src/views/progress.vue

@@ -329,44 +329,6 @@ export default {
         return {
             dialogShow: false,
             colorList: ['#00A572', '#007EC1', '#DA9300', '#878787'],
-            iconPicList: [
-                {
-                    icon: "wendu",
-                    name: "温度",
-                    val: "19.8",
-                    tem: "℃"
-                },
-                {
-                    icon: "shidu",
-                    name: "湿度",
-                    val: "19.8",
-                    tem: "%"
-                },
-                {
-                    icon: "yangqi",
-                    name: "氧气值",
-                    val: "19.8",
-                    tem: "%VOL"
-                },
-                {
-                    icon: "co2",
-                    name: "二氧化碳",
-                    val: "19.8",
-                    tem: "%VOL"
-                },
-                {
-                    icon: "ch4",
-                    name: "甲烷",
-                    val: "19.8",
-                    tem: "ppm"
-                },
-                {
-                    icon: "h2s",
-                    name: "硫化氢",
-                    val: "19.8",
-                    tem: "ppm"
-                }
-            ],
             table2Data: [
                 {
                     entName: "开工",

src/views/progressComponents.vue

@@ -1,7 +1,7 @@
 <template>
     <!-- <Resize> -->
             <div >
-            <div @click="disBox" class="screenBox"
+            <div @click="disBox" class="screenBox"  v-if="disBoxShow"
                 :style="{ 'background-image': !boxNone ? `url(${require(`../assets/pic/exitFull.png`)}` : `url(${require(`../assets/pic/fullScreen.png`)}` ,right: boxNone ? '483px' : '10px'}">
             </div>            <!-- 左侧模块1 -->
            <!-- 左侧模块1 -->
@@ -319,44 +319,6 @@ export default {
             projectInvestment:[],//投资进度
             dialogShow: false,
             colorList: ['#00A572', '#007EC1', '#DA9300', '#878787'],
-            iconPicList: [
-                {
-                    icon: "wendu",
-                    name: "温度",
-                    val: "19.8",
-                    tem: "℃"
-                },
-                {
-                    icon: "shidu",
-                    name: "湿度",
-                    val: "19.8",
-                    tem: "%"
-                },
-                {
-                    icon: "yangqi",
-                    name: "氧气值",
-                    val: "19.8",
-                    tem: "%VOL"
-                },
-                {
-                    icon: "co2",
-                    name: "二氧化碳",
-                    val: "19.8",
-                    tem: "%VOL"
-                },
-                {
-                    icon: "ch4",
-                    name: "甲烷",
-                    val: "19.8",
-                    tem: "ppm"
-                },
-                {
-                    icon: "h2s",
-                    name: "硫化氢",
-                    val: "19.8",
-                    tem: "ppm"
-                }
-            ],
             table2Data: [],
             tableData: [],
             qyList: [
@@ -421,7 +383,8 @@ export default {
             type: false,
             menuType: 3,
             numberList: [5, 5],
-            boxNone:true
+            boxNone:true,
+             disBoxShow:true,
         };
     },
     created() {
@@ -434,8 +397,10 @@ export default {
             this.boxNone = !this.boxNone
             if(this.boxNone == true){
           window.parent.closeBig();
+           this.disBoxShow=true
       }else if(this.boxNone == false){
           window.parent.openBig();
+          this.disBoxShow=false
       }
             this.$refs.screenBox.style.animationPlayState='running'
 
@@ -538,7 +503,7 @@ export default {
 
 <style scoped lang="less">
 .zzc{
-    background: rgba(0, 0 ,0, 0.6);
+    background: rgba(0, 0 ,0, 0.4);
     width: 100%;
     height: 100%;
     position: absolute;

src/views/video.vue

@@ -0,0 +1,83 @@
+<template>
+  <div class="test_two_box">
+        <video
+        id="myVideo"
+        class="video-js"
+        >
+        <source
+            :src="videoitemUrl"
+            type="video/mp4"
+        >
+        </video>
+    </div>
+</template>
+
+<script>
+  export default {
+    props: {
+    videoitemUrl: {
+     type: String,
+      default: ''
+    },
+    videoUrllist: {
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    },
+    data() {
+      return {
+        player: null,
+        url:require('../assets/map4/5.mp4'),
+        videoitemUrl:''
+      }
+    },
+    watch: {
+    // 监听父组件中的数据变化，重新触发Echarts
+    videoitemUrl: {
+     
+      handler (val) {
+        console.log("val",val)
+        // this.$nextTick(() => {
+          this.videoitemUrl = val
+        // })
+      },
+    deep: true,
+    }
+  },
+    mounted() { 
+        this.initVideo();
+        console.log("videoitemUrl",this.videoitemUrl)
+        this.src = this.videoitemUrl
+    },
+    methods: {
+         initVideo() {
+        //初始化视频方法
+        let myPlayer = this.$video(myVideo, {
+            //确定播放器是否具有用户可以与之交互的控件。没有控件，启动视频播放的唯一方法是使用autoplay属性或通过Player API。
+            controls: true,
+            //自动播放属性,muted:静音播放
+            autoplay: "false",
+            //建议浏览器是否应在<video>加载元素后立即开始下载视频数据。
+            preload: "auto",
+            //设置视频播放器的显示宽度（以像素为单位）
+            width: "100%",
+            //设置视频播放器的显示高度（以像素为单位）
+            height: "100%"
+        });
+        }
+    },
+
+  }
+</script>
+<style >
+ .test_two_box{
+    width:100%;
+    height:100%
+ }   
+ .myVideo-dimensions {
+    width: 100%!important;
+    height: 100%!important;
+}
+</style>

src/views/videoSurveillance.vue

@@ -198,44 +198,6 @@ export default {
     data() {
         return {
             colorList: ['#00A572', '#008AA4', '#7968D9', '#C7A73E'],
-            iconPicList: [
-                {
-                    icon: "wendu",
-                    name: "温度",
-                    val: "19.8",
-                    tem: "℃"
-                },
-                {
-                    icon: "shidu",
-                    name: "湿度",
-                    val: "19.8",
-                    tem: "%"
-                },
-                {
-                    icon: "yangqi",
-                    name: "氧气值",
-                    val: "19.8",
-                    tem: "%VOL"
-                },
-                {
-                    icon: "co2",
-                    name: "二氧化碳",
-                    val: "19.8",
-                    tem: "%VOL"
-                },
-                {
-                    icon: "ch4",
-                    name: "甲烷",
-                    val: "19.8",
-                    tem: "ppm"
-                },
-                {
-                    icon: "h2s",
-                    name: "硫化氢",
-                    val: "19.8",
-                    tem: "ppm"
-                }
-            ],
             tableData: [
                 {
                     entName: "我打打死"

src/views/videoSurveillanceComponents.vue

@@ -26,9 +26,16 @@
         class="scFathChild"
         v-for="(item, i) in videoAllList"
         :key="i"
-        @click="tzSp(item.equipmentName, item.id)"
+        @click="openChangebtn(item)"
       >
-        <img :src="item.thumbnail" alt="" style="width: 100%; height: 100%" />
+        <!-- <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)" 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>  
         <div class="childrenBox">
           {{ item.equipmentName }}
         </div>
@@ -236,44 +243,6 @@ export default {
       videoAllList: [], //获取所有监控
       videoList: [],
       colorList: ["#00A572", "#008AA4", "#7968D9", "#C7A73E"],
-      iconPicList: [
-        {
-          icon: "wendu",
-          name: "温度",
-          val: "19.8",
-          tem: "℃",
-        },
-        {
-          icon: "shidu",
-          name: "湿度",
-          val: "19.8",
-          tem: "%",
-        },
-        {
-          icon: "yangqi",
-          name: "氧气值",
-          val: "19.8",
-          tem: "%VOL",
-        },
-        {
-          icon: "co2",
-          name: "二氧化碳",
-          val: "19.8",
-          tem: "%VOL",
-        },
-        {
-          icon: "ch4",
-          name: "甲烷",
-          val: "19.8",
-          tem: "ppm",
-        },
-        {
-          icon: "h2s",
-          name: "硫化氢",
-          val: "19.8",
-          tem: "ppm",
-        },
-      ],
       tableData: [
         {
           entName: "我打打死",
@@ -336,6 +305,8 @@ export default {
       numberList: [5, 5],
       rightThreeHeightBox: 0,
       leftOneBox: 0,
+       src:"", 
+       iframeShow:false,
     };
   },
   created() {
@@ -397,6 +368,36 @@ export default {
         }, 800);
       }
     },
+     // vue获取iframe传递过来的信息
+    getiframeMsg(event){
+      const res = event.data;
+      console.log(event)
+      if(res.cmd == 'myIframe'){
+        console.log(res)
+      }
+    },
+    // 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传递的消息',
+        } 
+      },'*')
+      
+    },
+    // 触发iframe中的方法
+    iframeMethods(){
+      document.getElementById('iframeid').contentWindow.triggerByVue('通过Vue触发iframe中的方法');
+    },
+    openChangebtn(item){
+        item.status = true
+        // this.iframeShow = true
+        this.vueSendMsg()
+    }
   },
   mounted() {
     this.switchDiv();
@@ -409,6 +410,7 @@ export default {
           thumbnail: res.data.data[item].thumbnail,
           equipmentName: res.data.data[item].equipmentName,
           id: res.data.data[item].id,
+          status:false
         };
       });
     });
@@ -422,6 +424,8 @@ export default {
           id: res.data.data[item].id,
         };
       });
+      this.src = '../static/flv/video1.html';
+        window.addEventListener('message',this.getiframeMsg)
     });
     //获取摄像头数量接口
     getCameraCount().then((res) => {
@@ -510,6 +514,13 @@ export default {
       font-weight: 500;
       color: #ffffff;
     }
+     .openChange{
+        position: absolute;
+    width: 9%;
+    height: 10%;
+    bottom: 5%;
+    right: 5%;
+    }
   }
 }
 

src/views/videoViewing.vue

@@ -158,44 +158,6 @@ export default {
                 end: ''
             },
             colorList: ['#00A572', '#008AA4', '#7968D9', '#C7A73E'],
-            iconPicList: [
-                {
-                    icon: "wendu",
-                    name: "温度",
-                    val: "19.8",
-                    tem: "℃"
-                },
-                {
-                    icon: "shidu",
-                    name: "湿度",
-                    val: "19.8",
-                    tem: "%"
-                },
-                {
-                    icon: "yangqi",
-                    name: "氧气值",
-                    val: "19.8",
-                    tem: "%VOL"
-                },
-                {
-                    icon: "co2",
-                    name: "二氧化碳",
-                    val: "19.8",
-                    tem: "%VOL"
-                },
-                {
-                    icon: "ch4",
-                    name: "甲烷",
-                    val: "19.8",
-                    tem: "ppm"
-                },
-                {
-                    icon: "h2s",
-                    name: "硫化氢",
-                    val: "19.8",
-                    tem: "ppm"
-                }
-            ],
             tableData: [
                 {
                     entName: "我打打死"

src/views/videoViewingComponents.vue

@@ -21,10 +21,12 @@
     <div class="scFathBox" :style="{ height: leftOneBox }">
       <div class="scFathChild">
         <img
+        v-if="closeVideoShow"
           src="../assets/pic/bh.png"
           alt=""
           style="width: 100%; height: 100%"
         />
+        <Video :videoitemUrl="videoitemUrl" :videoUrllist="videoUrllist" v-if="openVideoShow"></Video>
           <div class="childrenBox"> 
           {{ videoName }}
         </div>
@@ -107,6 +109,7 @@
               popper-class="elDatePicker"
               style="width: 100%"
               v-model="timeForm.start"
+              value-format= 'yyyy-MM-dd HH:mm:ss'
               type="datetime"
               placeholder="选择日期时间"
             >
@@ -118,7 +121,9 @@
               style="width: 100%"
               v-model="timeForm.end"
               type="datetime"
+               value-format= 'yyyy-MM-dd HH:mm:ss'
               placeholder="选择日期时间"
+              :picker-options="pickerOptions"
             >
             </el-date-picker>
           </el-form-item>
@@ -160,6 +165,7 @@ import pieDateChart from "@/components/common/pieDateChart";
 import Resize from "../utils/Resize.vue";
 import { getCameraCount, getCameraHistory } from "@/api/api";
 import flvjs from 'flv.js'
+import Video from "./video";
 export default {
   name: "report",
   props: {
@@ -177,6 +183,7 @@ export default {
     RadarChart,
     pieDateChart,
     Resize,
+    Video
   },
   data() {
     return {
@@ -190,45 +197,17 @@ export default {
         start: "",
         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,
       colorList: ["#00A572", "#008AA4", "#7968D9", "#C7A73E"],
-      iconPicList: [
-        {
-          icon: "wendu",
-          name: "温度",
-          val: "19.8",
-          tem: "℃",
-        },
-        {
-          icon: "shidu",
-          name: "湿度",
-          val: "19.8",
-          tem: "%",
-        },
-        {
-          icon: "yangqi",
-          name: "氧气值",
-          val: "19.8",
-          tem: "%VOL",
-        },
-        {
-          icon: "co2",
-          name: "二氧化碳",
-          val: "19.8",
-          tem: "%VOL",
-        },
-        {
-          icon: "ch4",
-          name: "甲烷",
-          val: "19.8",
-          tem: "ppm",
-        },
-        {
-          icon: "h2s",
-          name: "硫化氢",
-          val: "19.8",
-          tem: "ppm",
-        },
-      ],
       tableData: [
         {
           entName: "我打打死",
@@ -293,6 +272,12 @@ 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')
+      
     };
   },
   created() {
@@ -302,22 +287,43 @@ export default {
   methods: {
     //点击播放按
     bfClick() {
+        console.log("this.isShowLookFor",this.isShowLookFor)
+       
       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
+        }
       }
+      
     },
     //点击开始查看按钮
     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)
         let data = {
           equipmentId: this.videoId,
-          startTime: this.$moment(this.timeForm.start).format("YYYY-MM-DD hh:mm:ss"),
+        //   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"),
+        //   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
+                }
+            }
         });
         this.isShowLookFor = true;
       }

static/flv/demo1.html

@@ -8,6 +8,12 @@
     <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;
@@ -36,6 +42,16 @@
 		margin-top: -1em;
 		margin-left: -1.5em;
 	}
+ .videojs-flvjs-player-dimensions {
+    width: 95%!important;
+    height: 200px!important;
+    overflow-x: hidden;
+        overflow-y: hidden;
+}
+/* #videojs-flvjs-player{
+    width: 100%!important;
+    height: 100%!important;
+} */
 	</style>
 	
     <script src="video.min.js"></script>
@@ -44,28 +60,50 @@
 </head>
 
 <body>
-	<div id="videoContainer">
+	<div id="videoContainer"   width="100%" 
+    height="100%" >
 		<video 
 	    id="videojs-flvjs-player" 
 	    class="video-js vjs-default-skin vjs-big-play-centered" 
 	    controls 
 	    preload="auto" 
 		autoplay=true
-	    width="1024" 
+	    width="100%" 
-	    height="768" 
+	    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://127.0.0.1:10800/flv/live/stream_3.flv";
+var flvUrl = "http://175.27.191.156:18080/transform/ch1.live.flv";
 var player = 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;
@@ -73,7 +111,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='1024' height='768'  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="+ flvUrl +" type='video/x-flv'></video>";
 	
 	player = videojs('videojs-flvjs-player', {
 		techOrder: ['html5', 'flvjs'],
@@ -101,29 +139,29 @@ function initPlayer(){
 		
 		player.on('error',function(){
 			console.log('first source load fail')
- 
 			player.src({
 				src: flvUrl,
 				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();
@@ -139,4 +177,5 @@ initPlayer();
 
 
 </script>
+
 </html>

static/flv/demo2.html

@@ -118,6 +118,12 @@ videoFlvPlayer.on('timeupdate',function () {
             }
 
         });
-	
+    //     window.addEventListener('message', (e) => {
+    //     console.log("拿到数据", e.data);
+    // });	
+    window.addEventListener('message',function(messageEvent){ 
+        console.log("拿到数据",messageEvent.data)
+        //  data= messageEvent.data;
+         })
 </script>
 </html>

static/flv/video1.html

@@ -0,0 +1,181 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<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: 240px!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%" 
+    height="100%" >
+		<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="" 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 player = 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' controls preload='auto' autoplay=true width='100%' height='100%'  data-setup='{}'><source src="+ flvUrl +" 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: flvUrl,
+        type: 'video/x-flv'
+    }],
+    controls: true,
+    preload: "none"
+	},
+	function onPlayerReady() {
+		
+		player.on('error',function(){
+			console.log('first source load fail')
+			player.src({
+				src: flvUrl,
+				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/index.html

@@ -124,15 +124,21 @@
     function fullScreen(){
        
         if(unity!=null){
-            console.log('fullScreen')
+            console.log('Unity_FullScreen')
-            unity.SendMessage("GameManager",'FullScreen');
+            unity.SendMessage("GameManager",'Unity_FullScreen');
         } 
     }
     function exitFullScreen(){
         if(unity!=null){
-            console.log('exitFullScreen')
+            console.log('Unity_ExitFullScreen')
-            unity.SendMessage("GameManager",'ExitFullScreen');
+            unity.SendMessage("GameManager",'Unity_ExitFullScreen');
         } 
+    }
+    function receiveMqttData(string){
+        if(unity!=null){
+            console.log('Unity_ReceiveMqttData')
+            unity.SendMessage("GameManager",'Unity_ReceiveMqttData',string);
+        }
     }
       document.body.appendChild(script);
     </script>

vue.config.js

@@ -60,16 +60,16 @@ module.exports = {
                     '^/api':'',
                 }
             },
-            // '/aps': { //代理的名字
+            '/v3': { //代理的名字
-            //     target: 'http://220.163.114.157:5011/', 
+                target: 'http://221.226.177.198:14023/v3/', 
-            //     // target: 'http://172.16.1.178:5001/',
+                // target: 'http://172.16.1.178:5001/',
-            //     // target: 'http://ht.api.umayle.com:2022', 
+                // target: 'http://ht.api.umayle.com:2022', 
-            //     ws: true,
+                ws: true,
-            //     changeOrigin: true,
+                changeOrigin: true,
-            //     pathRewrite:{
+                pathRewrite:{
-            //         '^/aps':'',
+                    '^/v3':'',
-            //     }
+                }
-            // }
+            }
         }
     }
 }