diff --git a/package.json b/package.json index 540b5da..17ca47e 100644 --- a/package.json +++ b/package.json @@ -14,22 +14,24 @@ "dayjs": "^1.11.7", "element-resize-detector": "^1.2.4", "element-ui": "^2.15.6", + "flv.js": "^1.6.2", "html2canvas": "^1.4.1", "js-cookie": "^3.0.1", "jspdf": "^2.5.1", + "moment": "^2.29.4", "mqtt": "^3.0.0", "node-sass": "^8.0.0", "postcss-plugin-px2rem": "^0.8.1", "screenfull": "5.2.0", "v-scale-screen": "^1.0.0", + "video.js": "^8.0.4", "vue": "^2.5.2", "vue-awesome-swiper": "^4.1.1", "vue-cropper": "^0.5.8", "vue-router": "^3.0.1", "vue2-scale-box": "^0.1.4", "vuedraggable": "2.24.3", - "vuex": "3.0.1", - "moment": "^2.29.4" + "vuex": "3.0.1" }, "devDependencies": { "autoprefixer": "^7.1.2", diff --git a/src/api/api.js b/src/api/api.js index ef5d8df..e890841 100644 --- a/src/api/api.js +++ b/src/api/api.js @@ -149,8 +149,8 @@ export const getWarnSurveillance = (params) => { ) }; //隐患整改记录 -// export const getMostTroubleCensus = (params) => { -// return axios.get('api/ems-third-party-service/project/mostTroubleCensus', -// {params}, -// ) -// }; +export const getResolveTroublePage = (params) => { + return axios.get('api/ems-third-party-service/project/resolveTroublePage', + {params}, + ) +}; diff --git a/src/main.js b/src/main.js index 4c539b1..358d452 100644 --- a/src/main.js +++ b/src/main.js @@ -44,6 +44,11 @@ Vue.filter('datefmt',function (input,fmtstring) {//当input为时间戳时，需 Vue.prototype.$moment = moment Vue.config.productionTip = false + +//引入video +import videojs from "video.js"; +import "video.js/dist/video-js.css"; +Vue.prototype.$video = videojs; //MQTT订阅 var currentTopics = null; var client = null; diff --git a/src/views/index.vue b/src/views/index.vue index 06ae62d..371e14d 100644 --- a/src/views/index.vue +++ b/src/views/index.vue @@ -1,74 +1,112 @@ @@ -92,8 +134,8 @@ import ManagementComponents from "./managementComponents"; import VideoViewingComponents from "./videoViewingComponents"; import mqtt from "mqtt"; // mqtt协议 import Swiper from "@/components/common/carousel"; -import Resize from '../utils/Resize.vue' -import axios from 'axios'; +import Resize from "../utils/Resize.vue"; +import axios from "axios"; export default { name: "report", components: { @@ -107,289 +149,295 @@ export default { ManagementComponents, VideoSurveillanceComponents, VideoViewingComponents, - Resize + Resize, }, data() { return { - weatherImg:require("@/assets/pic/sun.png"), - videoName:'', //子传父的视频名称 - videoId:'',//子传父的视频Id - //显示首页 - indexShow:true, - //人员管理 - personnelShow:false, - //视频监控 - videoSurveillanceShow:false, - //视频监控子页面 - videoViewingShow:false, - //进度管理 - progressShow:false, - //安全管理 - managementShow:false, - //左上角 - titLeftshow:false, - japIndex:'人员管理', - getWeek:'星期四', - dateNew:'2023年2月17日', - time:'14:26', - temperature:'12', - weather:'晴', - weatherItem: {}, - tienum: '', + weatherImg: require("@/assets/pic/sun.png"), + videoName: "", //子传父的视频名称 + videoId: "", //子传父的视频Id + //显示首页 + indexShow: true, + //人员管理 + personnelShow: false, + //视频监控 + videoSurveillanceShow: false, + //视频监控子页面 + videoViewingShow: false, + //进度管理 + progressShow: false, + //安全管理 + managementShow: false, + //左上角 + titLeftshow: false, + japIndex: "人员管理", + getWeek: "星期四", + dateNew: "2023年2月17日", + time: "14:26", + temperature: "12", + weather: "晴", + weatherItem: {}, + tienum: "", showType: true, - boxList: [{ - c1: '开工', - c2: "2023-1-4", - c3: "2023-1-4", - c4: '正常完成' - }, - { - c1: '勘察现场', - c2: "2023-1-4", - c3: "2023-1-4", - c4: '逾期完成' - }, - { - c1: '启动会议', - c2: "2023-1-4", - c3: "2023-1-4", - c4: '正常完成' - }, { - c1: '结构施工', - c2: "2023-1-4", - c3: "--", - c4: '逾期中' - }, { - c1: '水电安装', - c2: "2023-1-4", - c3: "--", - c4: '未开始' - }, { - c1: '完工', - c2: "2023-1-4", - c3: "--", - c4: '实施中' - }, + boxList: [ + { + c1: "开工", + c2: "2023-1-4", + c3: "2023-1-4", + c4: "正常完成", + }, + { + c1: "勘察现场", + c2: "2023-1-4", + c3: "2023-1-4", + c4: "逾期完成", + }, + { + c1: "启动会议", + c2: "2023-1-4", + c3: "2023-1-4", + c4: "正常完成", + }, + { + c1: "结构施工", + c2: "2023-1-4", + c3: "--", + c4: "逾期中", + }, + { + c1: "水电安装", + c2: "2023-1-4", + c3: "--", + c4: "未开始", + }, + { + c1: "完工", + c2: "2023-1-4", + c3: "--", + c4: "实施中", + }, ], - dataList: [{ - src: '@/assets/pic/23.png' - }], // 专题数据列表 + dataList: [ + { + src: "@/assets/pic/23.png", + }, + ], // 专题数据列表 iconPicList: [ { 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: "开工建设", - start: '2021-02-01', - end: '张三', - zt: '正常完成' + start: "2021-02-01", + end: "张三", + zt: "正常完成", }, { entName: "勘察现场", - start: '2021-02-01', - end: '张三', - zt: '未完成' + start: "2021-02-01", + end: "张三", + zt: "未完成", }, { entName: "临时设施", - start: '2021-02-01', - end: '张三', - zt: '未完成' + start: "2021-02-01", + end: "张三", + zt: "未完成", }, { entName: "桩基工程", - start: '2021-02-01', - end: '张三', - zt: '实施中' + start: "2021-02-01", + end: "张三", + zt: "实施中", }, { entName: "水电安装", - start: '2021-02-01', - end: '张三', - zt: '未开始' + start: "2021-02-01", + end: "张三", + zt: "未开始", }, { entName: "水电安装", - start: '2021-02-01', - end: '张三', - zt: '实施中' + start: "2021-02-01", + end: "张三", + zt: "实施中", }, { entName: "桩基工程", - start: '2021-02-01', - end: '张三', - zt: '实施中' + start: "2021-02-01", + end: "张三", + zt: "实施中", }, { entName: "水电安装", - start: '2021-02-01', - end: '张三', - zt: '未开始' + start: "2021-02-01", + end: "张三", + zt: "未开始", }, { entName: "完工建设", - start: '2021-02-01', - end: '张三', - zt: '实施中' + start: "2021-02-01", + end: "张三", + zt: "实施中", }, ], 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: "姓名", - value: "：王刚" + value: "：王刚", }, { name: "岗位", - value: "：项目经理" + value: "：项目经理", }, { name: "入岗时间", - value: "：2022-11-26 08:22:13" - } + value: "：2022-11-26 08:22:13", + }, ], vdaH: 0, type: false, menuType: null, numberList: [5, 5], boxNone: true, - topicSends:[] + topicSends: [], }; }, created() { let h = document.documentElement.clientHeight || document.body.clientHeight; this.vdaH = h - 0 + "px"; // this.createMqtt() - this.getWeather() - window.setInterval(()=>{ - this.getTime() - },1000) - window.openBig = this.openBig; - window.closeBig = this.closeBig; - window.createMqtt = this.createMqtt; + this.getWeather(); + window.setInterval(() => { + this.getTime(); + }, 1000); + window.openBig = this.openBig; + window.closeBig = this.closeBig; + window.createMqtt = this.createMqtt; }, methods: { - - createMqtt() { - - this.topicSends = ['/SC/pub/uwb','/SC/pub/env']; - window.PubScribe(this.topicSends, this.realInfo); - }, - /** 实时数据分类 */ + createMqtt() { + this.topicSends = ["/SC/pub/uwb", "/SC/pub/env"]; + window.PubScribe(this.topicSends, this.realInfo); + }, + /** 实时数据分类 */ realInfo(topic, message) { - // console.log("topic",topic) + let time = new Date(); + // console.log("topic",topic) switch (topic) { // 接收托片 - case "/SC/pub/uwb": - try { - // console.log("message", message) - const utf8decoder = new TextDecoder() - const u8arr = new Uint8Array(message) - const temp = utf8decoder.decode(u8arr) // 将二进制数据转为字符串 - const msg = JSON.parse(temp) //这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据 - console.log("msg", msg) //msg为转换后的JSON数据 - } catch (error) { - } - break; - case "/SC/pub/env": - try { - // console.log("环境message", message) - const utf8decoder = new TextDecoder() - const u8arr = new Uint8Array(message) - const temp = utf8decoder.decode(u8arr) // 将二进制数据转为字符串 - const msg = JSON.parse(temp) //这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据 - console.log("环境msg", msg) //msg为转换后的JSON数据 - - } catch (error) { - - } - break; + case "/SC/pub/uwb": + try { + // console.log("message", message) + const utf8decoder = new TextDecoder(); + const u8arr = new Uint8Array(message); + const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串 + const msg = JSON.parse(temp); //这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据 + console.log("msg", time.toLocaleString(), msg); //msg为转换后的JSON数据 + } catch (error) {} + break; + case "/SC/pub/env": + try { + // console.log("环境message", message) + const utf8decoder = new TextDecoder(); + const u8arr = new Uint8Array(message); + const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串 + const msg = JSON.parse(temp); //这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据 + console.log("环境msg",time.toLocaleString(), msg); //msg为转换后的JSON数据 + } catch (error) {} + break; } }, closeindex(){ - // this.$router.push('/') - this.$confirm("确定退出登录？", "确认信息", { + // this.$router.push('/') + this.$confirm("确定退出登录？", "确认信息", { distinguishCancelAndClose: true, confirmButtonText: "退出", cancelButtonText: "取消", @@ -410,230 +458,237 @@ export default { }); }, //获取当前时间 - 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 + 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 () { - 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) - }); + getWeather() { + 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 == "雾") { + 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"); + } }, -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 + this.tienum = val; }, disBox() { - this.boxNone = !this.boxNone - this.$refs.screenBox.style.animationPlayState = 'running' - - + this.boxNone = !this.boxNone; + this.$refs.screenBox.style.animationPlayState = "running"; }, - goBack(val) { - if (val === 1) { - this.indexShow = true - this.personnelShow = false - this.videoSurveillanceShow = false - this.videoViewingShow = false - this.managementShow= false - this.progressShow = false - this.titLeftshow = false - } else { - if(val=='视频监控'&& this.videoViewingShow==true){ - this.indexShow = false - this.personnelShow = false - this.videoSurveillanceShow = true - this.videoViewingShow = false - this.managementShow= false - this.progressShow = false - this.titLeftshow = true - } - // this.$router.go(0) - } + goBack(val) { + if (val === 1) { + this.indexShow = true; + this.personnelShow = false; + this.videoSurveillanceShow = false; + this.videoViewingShow = false; + this.managementShow = false; + this.progressShow = false; + this.titLeftshow = false; + } else { + if (val == "视频监控" && this.videoViewingShow == true) { + this.indexShow = false; + this.personnelShow = false; + this.videoSurveillanceShow = true; + this.videoViewingShow = false; + this.managementShow = false; + this.progressShow = false; + this.titLeftshow = true; + } + // this.$router.go(0) + } }, //获取视频子传父数据 - getUser(msg){ - // this.username= msg - if(msg != null){ - this.indexShow = false - this.personnelShow = false - this.videoSurveillanceShow = false - this.videoViewingShow = true - this.managementShow= false - this.progressShow = false - this.titLeftshow = true - this.videoName = msg.videoName - this.videoId = msg.videoId - } - }, + getUser(msg) { + // this.username= msg + if (msg != null) { + this.indexShow = false; + this.personnelShow = false; + this.videoSurveillanceShow = false; + this.videoViewingShow = true; + this.managementShow = false; + this.progressShow = false; + this.titLeftshow = true; + this.videoName = msg.videoName; + this.videoId = msg.videoId; + } + }, tableRowClassName({ row, rowIndex }) { if (rowIndex % 2 === 0) { return "success-row"; } else { return "warning-row"; - } }, //放大 - openBig(){ - document.getElementById('unityModule').contentWindow.fullScreen(); + openBig() { + document.getElementById("unityModule").contentWindow.fullScreen(); }, //关闭放大 - closeBig(){ - document.getElementById('unityModule').contentWindow.exitFullScreen(); + closeBig() { + document.getElementById("unityModule").contentWindow.exitFullScreen(); }, // 菜单点击 childBoxClick(val) { this.menuType = val; if (val === 3) { - this.japIndex = '进度管理' + this.japIndex = "进度管理"; //进度管理 - this.indexShow = false - this.personnelShow = false - this.videoSurveillanceShow = false - this.videoViewingShow = false - this.managementShow= false - this.progressShow = true - this.titLeftshow = true + this.indexShow = false; + this.personnelShow = false; + this.videoSurveillanceShow = false; + this.videoViewingShow = false; + this.managementShow = false; + this.progressShow = true; + this.titLeftshow = true; // this.$router.push('/progress') - this.type = true; - setTimeout(() => { - // 俩秒之后让模块消失 - this.$refs.switchBtn.style.display = "block"; - }, 800) - } else if (val === 2) { - //视频监控 - this.japIndex = '视频监控' - // this.$router.push('/videoSurveillance') - this.indexShow = false - this.personnelShow = false - this.videoSurveillanceShow = true - this.videoViewingShow = false - this.managementShow= false - this.progressShow = false - this.titLeftshow = true this.type = true; setTimeout(() => { // 俩秒之后让模块消失 this.$refs.switchBtn.style.display = "block"; - }, 800) + }, 800); + } else if (val === 2) { + //视频监控 + this.japIndex = "视频监控"; + // this.$router.push('/videoSurveillance') + this.indexShow = false; + this.personnelShow = false; + this.videoSurveillanceShow = true; + this.videoViewingShow = false; + this.managementShow = false; + this.progressShow = false; + this.titLeftshow = true; + this.type = true; + setTimeout(() => { + // 俩秒之后让模块消失 + this.$refs.switchBtn.style.display = "block"; + }, 800); } else if (val === 4) { - //安全管理 - this.japIndex = '安全管理' + //安全管理 + this.japIndex = "安全管理"; // this.$router.push('/management') - this.indexShow = false - this.personnelShow = false - this.videoSurveillanceShow = false - this.videoViewingShow = false - this.managementShow= true - this.progressShow = false - this.titLeftshow = true - this.type = true; + this.indexShow = false; + this.personnelShow = false; + this.videoSurveillanceShow = false; + this.videoViewingShow = false; + this.managementShow = true; + this.progressShow = false; + this.titLeftshow = true; + this.type = true; setTimeout(() => { // 俩秒之后让模块消失 this.$refs.switchBtn.style.display = "block"; - }, 800) + }, 800); } else if (val === 1) { - //人员管理 + //人员管理 // this.$router.push('/personnel') - this.japIndex = '人员管理' - this.indexShow = false - this.personnelShow = true - this.videoSurveillanceShow = false - this.videoViewingShow = false - this.managementShow= false - this.progressShow = false - this.titLeftshow = true - this.type = true; + this.japIndex = "人员管理"; + this.indexShow = false; + this.personnelShow = true; + this.videoSurveillanceShow = false; + this.videoViewingShow = false; + this.managementShow = false; + this.progressShow = false; + this.titLeftshow = true; + this.type = true; setTimeout(() => { // 俩秒之后让模块消失 this.$refs.switchBtn.style.display = "block"; - }, 800) + }, 800); } }, switchDiv() { - let that = this + let that = this; if (this.type) { - console.log("11111") + console.log("11111"); this.type = false; this.$refs.switchBtn.style.display = "none"; } else { - console.log("2222") + console.log("2222"); this.type = true; setTimeout(() => { // 俩秒之后让模块消失 that.$refs.switchBtn.style.display = "block"; - }, 800) + }, 800); } - } + }, }, mounted() { - this.switchDiv(); window.onresize = () => { + this.switchDiv(); + window.onresize = () => { return (() => { - let h = document.documentElement.clientHeight || document.body.clientHeight; + let h = + document.documentElement.clientHeight || document.body.clientHeight; this.vdaH = h - 0 + "px"; - })() - } - } + })(); + }; + }, }; @@ -650,113 +705,113 @@ changeWeatherImg(weather){ @keyframes mce2st { 1% { - bottom: 339px + bottom: 339px; } 100% { - bottom: 150px + bottom: 150px; } } @keyframes mcest { 100% { - bottom: 339px + bottom: 339px; } 1% { - bottom: 150px + bottom: 150px; } } @keyframes mytest { 100% { - bottom: 20px + bottom: 20px; } 90% { - bottom: 40px + bottom: 40px; } 80% { - bottom: 60px + bottom: 60px; } 70% { - bottom: 80px + bottom: 80px; } 60% { - bottom: 100px + bottom: 100px; } 50% { - bottom: 120px + bottom: 120px; } 40% { - bottom: 140px + bottom: 140px; } 30% { - bottom: 160px + bottom: 160px; } 20% { - bottom: 180px + bottom: 180px; } 10% { - bottom: 200px + bottom: 200px; } 1% { - bottom: 220px + bottom: 220px; } } @keyframes myt2est { 1% { - bottom: 20px + bottom: 20px; } 10% { - bottom: 40px + bottom: 40px; } 20% { - bottom: 60px + bottom: 60px; } 30% { - bottom: 80px + bottom: 80px; } 40% { - bottom: 100px + bottom: 100px; } 50% { - bottom: 120px + bottom: 120px; } 60% { - bottom: 140px + bottom: 140px; } 70% { - bottom: 160px + bottom: 160px; } 80% { - bottom: 180px + bottom: 180px; } 90% { - bottom: 200px + bottom: 200px; } 100% { - bottom: 220px + bottom: 220px; } } @@ -773,7 +828,8 @@ changeWeatherImg(weather){ .screenBox { width: 46px; height: 46px; - background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAAAXNSR0IArs4c6QAAA3RJREFUaENjZMAHGhqYfLVUIv4x/OfBq27AJP+eZcRnt++qJdXvHj0OfHv//oA5EZfFggryDELycrNwesB39ZLcD0+exJ9ZvJzhz+/fg84DynY2DMr2ttg94LtqacLn1y9yTi1cxvD7+/dB53iQg3B6wHfl4uBvHz5UnFywmPHnly+D0vE4PeC7eonbj8+fW07OX8T0/cPHQet4rB7wW7nE+sePb72nFi5l+fr69aB2PIYH/JYvNPz998/k04uXcXx89nzQOx7FA17rVqgx/Pg+69yy1TxvHz4YEo5H8YD3qsVp94+eSLu9b/+QcTyGB+4ePJx299CRUQ/QMwTg9QAoCY3GAD2DHmoXxTEQvWKxMTZ3H+jsvfn0/AWUKtyjpVFNWEWJF58/l0bEniUlHEY9AIuBt3fufX5989ZnWOjd2rPv7efnz38hh6aah5swr6goG0xMWE2ZR1RVlQ9ZzYDFwI2tO56dXbyU6Opb2tiIx7YgR5WZlZVpyHkA2fF/f//+9+7Bgy+wmBj0MYDu+MMTptyW0NLk1fD2kALFBN09IG1oAO4nf3rx8hd6mkcvTbA5/unZc1+MY6MlB8wDxBZ5uBwP0j/oPYDP8SAPgEonJRtrYRB7R039LWIDhS6NOUKOJ8Wx2NRSXJHhcwCtHU+VGAA1D0AG3Tty9O2tHbvewjxED8dTxQOwmhi5IqOX42niAXIczyspycYnIQ5uYqA3AAnlEYrzAHIMvLh2/TOseQCqYUGVFKicJ+SIAS1GYR54ffv2JyEFBR5Q24YUxw94PYDeHyDV8YPOA6CYeHvrLjzZfH79+hdy6QRyMCjNq7k4gSsuEBBVV+OFdXTo3hbC1SODOQ7UT0CvXUHtJ4fyYnVseWPUA6PjQoTKTCrLU1wPUNk9JBs36gGSg4zKGoZ0DLBx8zCYxUUzcAsL1jEOtbFRNm4uBrO4GAYuYZFpW8Nj5g0pD7BxcTGYxUcz8IiITd8cFj0XlCqHjAdAjjeNi2bgEROZsSU0dg4sSw0JD8AczysqMmtzWOws5PJg0HuAlYuTwSw2ioFXXGz25tDYmeiF2aD2ACsnJ4NpXCQDj5j43K1hsdOxlcRgD7x7+Cjt/YOHVC6pKTdOXF2dgU9SfN7m0JhpuExj9F61wJiBgRnrZAXlTqDMBCZGppebQ6M34jMFAIXEIruaoXY4AAAAAElFTkSuQmCC) no-repeat; + background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAAAXNSR0IArs4c6QAAA3RJREFUaENjZMAHGhqYfLVUIv4x/OfBq27AJP+eZcRnt++qJdXvHj0OfHv//oA5EZfFggryDELycrNwesB39ZLcD0+exJ9ZvJzhz+/fg84DynY2DMr2ttg94LtqacLn1y9yTi1cxvD7+/dB53iQg3B6wHfl4uBvHz5UnFywmPHnly+D0vE4PeC7eonbj8+fW07OX8T0/cPHQet4rB7wW7nE+sePb72nFi5l+fr69aB2PIYH/JYvNPz998/k04uXcXx89nzQOx7FA17rVqgx/Pg+69yy1TxvHz4YEo5H8YD3qsVp94+eSLu9b/+QcTyGB+4ePJx299CRUQ/QMwTg9QAoCY3GAD2DHmoXxTEQvWKxMTZ3H+jsvfn0/AWUKtyjpVFNWEWJF58/l0bEniUlHEY9AIuBt3fufX5989ZnWOjd2rPv7efnz38hh6aah5swr6goG0xMWE2ZR1RVlQ9ZzYDFwI2tO56dXbyU6Opb2tiIx7YgR5WZlZVpyHkA2fF/f//+9+7Bgy+wmBj0MYDu+MMTptyW0NLk1fD2kALFBN09IG1oAO4nf3rx8hd6mkcvTbA5/unZc1+MY6MlB8wDxBZ5uBwP0j/oPYDP8SAPgEonJRtrYRB7R039LWIDhS6NOUKOJ8Wx2NRSXJHhcwCtHU+VGAA1D0AG3Tty9O2tHbvewjxED8dTxQOwmhi5IqOX42niAXIczyspycYnIQ5uYqA3AAnlEYrzAHIMvLh2/TOseQCqYUGVFKicJ+SIAS1GYR54ffv2JyEFBR5Q24YUxw94PYDeHyDV8YPOA6CYeHvrLjzZfH79+hdy6QRyMCjNq7k4gSsuEBBVV+OFdXTo3hbC1SODOQ7UT0CvXUHtJ4fyYnVseWPUA6PjQoTKTCrLU1wPUNk9JBs36gGSg4zKGoZ0DLBx8zCYxUUzcAsL1jEOtbFRNm4uBrO4GAYuYZFpW8Nj5g0pD7BxcTGYxUcz8IiITd8cFj0XlCqHjAdAjjeNi2bgEROZsSU0dg4sSw0JD8AczysqMmtzWOws5PJg0HuAlYuTwSw2ioFXXGz25tDYmeiF2aD2ACsnJ4NpXCQDj5j43K1hsdOxlcRgD7x7+Cjt/YOHVC6pKTdOXF2dgU9SfN7m0JhpuExj9F61wJiBgRnrZAXlTqDMBCZGppebQ6M34jMFAIXEIruaoXY4AAAAAElFTkSuQmCC) + no-repeat; background-size: 100% 100%; position: absolute; bottom: 210px; @@ -796,7 +852,7 @@ changeWeatherImg(weather){ right: 0; font-size: 12px; font-weight: 500; - color: #FFFFFF; + color: #ffffff; text-align: center; line-height: 28px; } @@ -810,7 +866,6 @@ changeWeatherImg(weather){ transform: translateX(-50%); } - .centerBottom2 { width: calc(100% - 968px); height: 166px; @@ -865,7 +920,7 @@ changeWeatherImg(weather){ div:nth-child(1) { font-size: 16px; font-weight: 500; - color: #1DFFFA; + color: #1dfffa; margin-bottom: 12px; margin-top: 20px; } @@ -873,7 +928,7 @@ changeWeatherImg(weather){ div:nth-child(2) { font-size: 12px; font-weight: 400; - color: #00DAD3; + color: #00dad3; } div:nth-child(3) { @@ -882,20 +937,19 @@ changeWeatherImg(weather){ // background: url("~@/assets/pic/finish.png") no-repeat; background-size: 100% 100%; margin: 6px auto; - } div:nth-child(4) { font-size: 13px; font-weight: 500; margin-bottom: 8px; - color: #0AFFFC; + color: #0afffc; } div:nth-child(5) { font-size: 14px; font-weight: bold; - color: #00FFF6; + color: #00fff6; } } @@ -951,7 +1005,6 @@ changeWeatherImg(weather){ overflow-y: hidden; //重点 } - .tableBox { width: 90%; height: 75%; @@ -979,7 +1032,7 @@ changeWeatherImg(weather){ .spoChild { margin: auto; padding: 1px; - border: 1px solid #00EBEB; + border: 1px solid #00ebeb; img { width: 100%; @@ -1004,7 +1057,6 @@ changeWeatherImg(weather){ height: 100%; } } - } .pieBox { @@ -1065,7 +1117,7 @@ changeWeatherImg(weather){ position: absolute; left: 33px; top: 113px; - border: 1px solid #007B7B; + border: 1px solid #007b7b; @media only screen and (max-height: 1000px) { height: 86px; @@ -1154,32 +1206,32 @@ changeWeatherImg(weather){ background: url("~@/assets/pic/BG.jpg") no-repeat; background-size: 100% 100%; } -.header{ - position: absolute; - top: 0px; - width: 100%; - height: 200px; +.header { + position: absolute; + top: 0px; + width: 100%; + height: 200px; } .header .titTop { width: 100%; position: absolute; top: 9px; left: 9px; -// right: 9px; + // right: 9px; display: flex; justify-content: space-between; .titLeft { width: 138px; height: 40px; - background: #025A5F; + background: #025a5f; line-height: 40px; text-align: center; cursor: pointer; span:nth-child(1), span:nth-child(2) { font-size: 14px; - color: #3CFFF9; + color: #3cfff9; letter-spacing: 1px; font-weight: 400; } @@ -1189,7 +1241,6 @@ changeWeatherImg(weather){ color: #fff; letter-spacing: 1px; font-weight: bold; - } } @@ -1198,8 +1249,8 @@ changeWeatherImg(weather){ padding-right: 25px; font-size: 14px; font-weight: 400; - color: #D1FFFE; -position: absolute; + color: #d1fffe; + position: absolute; right: 80px; span:nth-child(2) { display: inline-block; @@ -1207,17 +1258,17 @@ position: absolute; right: 85px; width: 18px; height: 18px; - // background: url("~@/assets/pic/sun.png") no-repeat; + // background: url("~@/assets/pic/sun.png") no-repeat; background-size: 100% 100%; } } -.closeIndex{ - width: 40px; + .closeIndex { + width: 40px; height: 40px; position: absolute; top: 5px; right: 22px; -} + } } .header .title { @@ -1262,7 +1313,6 @@ position: absolute; } } - .leftOneBox { height: 282px; width: 444px; @@ -1553,11 +1603,11 @@ position: absolute; // background-color: transparent !important; color: rgba(255, 255, 255, 0.7) !important; border: none !important; - padding-left: 0 ; + padding-left: 0; padding-right: 0 !important; } -/deep/ .el-table th>.cell { +/deep/ .el-table th > .cell { color: rgba(254, 254, 254, 1) !important; font-weight: 700 !important; } @@ -1582,7 +1632,7 @@ position: absolute; border-radius: 6px; } -/deep/ .el-table--enable-row-hover .el-table__body tr:hover>td { +/deep/ .el-table--enable-row-hover .el-table__body tr:hover > td { background-color: transparent !important; /* color: #f19944; */ /* 设置文字颜色，可以选择不设置 */ @@ -1596,7 +1646,8 @@ position: absolute; background: transparent; } - diff --git a/src/views/login.vue b/src/views/login.vue index ca734ea..b9b8a32 100644 --- a/src/views/login.vue +++ b/src/views/login.vue @@ -32,7 +32,7 @@ - + @@ -84,7 +84,7 @@ export default { created() { let h = document.documentElement.clientHeight || document.body.clientHeight; this.vdaH = h - 0 + "px"; - // this.createMqtt() + this.createMqtt() this.getWeather() // this.getTokenData() }, @@ -190,7 +190,7 @@ export default { }, createMqtt() { - this.topicSends = ['/SC/pub/uwb']; + this.topicSends = ['webdata']; console.log("this.topicSends",this.topicSends) window.PubScribe(this.topicSends, this.realInfo); }, @@ -199,7 +199,7 @@ export default { // console.log("topic",topic) switch (topic) { // 接收托片 - case "/SC/pub/uwb": + case "webdata": try { console.log("message",message) // const utf8decoder = new TextDecoder() diff --git a/src/views/swiper.vue b/src/views/swiper.vue index 13abacf..fee09c1 100644 --- a/src/views/swiper.vue +++ b/src/views/swiper.vue @@ -31,69 +31,87 @@

--> - - -
-
-
-
-
-
- 派单时间： - {{ item.value }} -
-
- 整改人： - 陈晓红 -
-
- 状态： - 待处理 -
-
- 隐患内容： - 现场作业准备 -
-
- 隐患内容： - 上方悬挂摇晃吊灯下坠 -
+ + +
+
+
+
+
+
+ 派单时间： + {{ item.allocateDate }} +
+
+ 整改人： + {{ item.rectifier }} +
+
+ 状态： + {{ item.status }} +
+
+ 隐患内容： + {{ item.troubleContent }} +
+
+ 隐患内容： + {{ + item.troubleMark + }}
- -

-

-
- - + +

+

+
+ + diff --git a/src/views/videoViewingComponents.vue b/src/views/videoViewingComponents.vue index 0130382..56d8b8b 100644 --- a/src/views/videoViewingComponents.vue +++ b/src/views/videoViewingComponents.vue @@ -25,7 +25,7 @@ alt="" style="width: 100%; height: 100%" /> -
+
{{ videoName }}
@@ -159,6 +159,7 @@ 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' export default { name: "report", props: {