diff --git a/src/utils/api/index.js b/src/utils/api/index.js index 4e2cf6e..43caf8e 100644 --- a/src/utils/api/index.js +++ b/src/utils/api/index.js @@ -7,6 +7,15 @@ export function loginJoggle(data) { data, }); } +//获取所有杆塔下的图片列表，实时监控 + +export function getTowerAndPhotoList(data) { + return request({ + url: "/api/getTowerAndPhotoList", + method: "post", + data, + }); +} //声光报警 export function alarmMarkJoggle(data) { return request({ diff --git a/src/views/realTimeMonitor/index.vue b/src/views/realTimeMonitor/index.vue index 29c7f4a..c1b6763 100644 --- a/src/views/realTimeMonitor/index.vue +++ b/src/views/realTimeMonitor/index.vue @@ -1,5 +1,5 @@ @@ -227,37 +143,19 @@ import { getdyTreeListJoggle, getChannelByTermidJoggle, getTerminalPhotoListJoggle, - getLatestPhotoJoggle, - getReturnedPhotoJoggle, - alarmMarkJoggle, - getTermStatus, - setTermGPSJoggle, } from "@/utils/api/index"; -import { mapState } from "vuex"; +import previewContain from "./previewContain.vue"; import carouselChart from "../components/carouselChart.vue"; -import setschedule from "./components/setschedule.vue"; -import deviceUpgrade from "./components/deviceUpgrade.vue"; -import infoDialog from "./components/infoDialog.vue"; -import gpsPosition from "./components/gpsPosition.vue"; export default { - components: { - carouselChart, - setschedule, - deviceUpgrade, - infoDialog, - gpsPosition, - }, + components: { previewContain, carouselChart }, data() { return { - btnpicloading: false, - btnvideoloading: false, - flag: true, onlinestatus: "", //设备状态啊 - showBigPic: true, - defaultKey: "", + onlineNum: "", //在线数 + totalNum: "", //装置总数 + selectData: "", //点击选中的数据 + type: "", //选中的类型 lineTreeData: [], - treeStatus: [], - statusTimer: null, filterText: "", defaultProps: { //指定参数格式回显数据 @@ -265,29 +163,483 @@ export default { label: "name", }, currentNodekey: "", //默认选中的节点树, - cmdid: "", //装置id, - channelId: "", //通道装置id - channelList: "", //通道数据 - channelOption: [], //通道分类 + previewData: [], //预览图数据 + page: 1, // 当前页数 + pagesize: 16, //当前多少条数据 + total: 0, //总条数 + treetimer: null, //轮询状态timer + towerFlag: true, //判断是否是图片list + towertitle: "", //装置杆塔信息 + terminalPhoto: [ + { + id: 209654, + termId: 10323, + channelId: 1, + channelName: "通道1", + alias: "白天", + presetId: 255, + width: 1920, + height: 1080, + fileSize: 171068, + photoTime: "2023-07-17T08:00:02.000+00:00", + recvTime: "2023-07-17T07:59:59.000+00:00", + path: "http://dev.xinyingpower.com:40080/photos/2023/07/17/00/XYIGQ10D221000100_1_FF_20230717160002.jpg", + thumb: null, + manualRequest: null, + mediaType: 0, + }, + { + id: 209646, + termId: 10323, + channelId: 2, + channelName: "通道2", + alias: "黑夜", + presetId: 255, + width: 1920, + height: 1080, + fileSize: 229840, + photoTime: "2023-07-17T07:47:36.000+00:00", + recvTime: "2023-07-17T07:47:33.000+00:00", + path: "http://dev.xinyingpower.com:40080/photos/2023/07/17/00/XYIGQ10D221000100_2_FF_20230717154736.jpg", + thumb: null, + manualRequest: null, + mediaType: 0, + }, + { + id: 209644, + termId: 10323, + channelId: 1, + channelName: "通道1", + alias: "白天", + presetId: 255, + width: 1920, + height: 1080, + fileSize: 173700, + photoTime: "2023-07-17T07:47:08.000+00:00", + recvTime: "2023-07-17T07:47:03.000+00:00", + path: "http://dev.xinyingpower.com:40080/photos/2023/07/17/00/XYIGQ10D221000100_1_FF_20230717154708.jpg", + thumb: null, + manualRequest: null, + mediaType: 0, + }, + { + id: 209641, + termId: 10323, + channelId: 2, + channelName: "通道2", + alias: "黑夜", + presetId: 255, + width: 1920, + height: 1080, + fileSize: 231280, + photoTime: "2023-07-17T07:44:32.000+00:00", + recvTime: "2023-07-17T07:44:28.000+00:00", + path: "http://dev.xinyingpower.com:40080/photos/2023/07/17/00/XYIGQ10D221000100_2_FF_20230717154432.jpg", + thumb: null, + manualRequest: null, + mediaType: 0, + }, + { + id: 209638, + termId: 10323, + channelId: 1, + channelName: "通道1", + alias: "白天", + presetId: 255, + width: 1920, + height: 1080, + fileSize: 200977, + photoTime: "2023-07-17T07:43:34.000+00:00", + recvTime: "2023-07-17T07:43:30.000+00:00", + path: "http://dev.xinyingpower.com:40080/photos/2023/07/17/00/XYIGQ10D221000100_1_FF_20230717154334.jpg", + thumb: null, + manualRequest: null, + mediaType: 0, + }, + { + id: 209633, + termId: 10323, + channelId: 2, + channelName: "通道2", + alias: "黑夜", + presetId: 255, + width: 1920, + height: 1080, + fileSize: 244618, + photoTime: "2023-07-17T07:38:08.000+00:00", + recvTime: "2023-07-17T07:38:03.000+00:00", + path: "http://dev.xinyingpower.com:40080/photos/2023/07/17/00/XYIGQ10D221000100_2_FF_20230717153808.jpg", + thumb: null, + manualRequest: null, + mediaType: 0, + }, + { + id: 209632, + termId: 10323, + channelId: 1, + channelName: "通道1", + alias: "白天", + presetId: 255, + width: 1920, + height: 1080, + fileSize: 227006, + photoTime: "2023-07-17T07:37:46.000+00:00", + recvTime: "2023-07-17T07:37:42.000+00:00", + path: "http://dev.xinyingpower.com:40080/photos/2023/07/17/00/XYIGQ10D221000100_1_FF_20230717153746.jpg", + thumb: null, + manualRequest: null, + mediaType: 0, + }, + { + id: 209631, + termId: 10323, + channelId: 2, + channelName: "通道2", + alias: "黑夜", + presetId: 255, + width: 1920, + height: 1080, + fileSize: 232942, + photoTime: "2023-07-17T07:35:44.000+00:00", + recvTime: "2023-07-17T07:35:40.000+00:00", + path: "http://dev.xinyingpower.com:40080/photos/2023/07/17/00/XYIGQ10D221000100_2_FF_20230717153544.jpg", + thumb: null, + manualRequest: null, + mediaType: 0, + }, + { + id: 209629, + termId: 10323, + channelId: 1, + channelName: "通道1", + alias: "白天", + presetId: 255, + width: 1920, + height: 1080, + fileSize: 169296, + photoTime: "2023-07-17T07:35:10.000+00:00", + recvTime: "2023-07-17T07:35:06.000+00:00", + path: "http://dev.xinyingpower.com:40080/photos/2023/07/17/00/XYIGQ10D221000100_1_FF_20230717153510.jpg", + thumb: null, + manualRequest: null, + mediaType: 0, + }, + { + id: 209606, + termId: 10323, + channelId: 1, + channelName: "通道1", + alias: "白天", + presetId: 255, + width: 1920, + height: 1080, + fileSize: 225203, + photoTime: "2023-07-17T07:00:02.000+00:00", + recvTime: "2023-07-17T06:59:57.000+00:00", + path: "http://dev.xinyingpower.com:40080/photos/2023/07/17/00/XYIGQ10D221000100_1_FF_20230717150002.jpg", + thumb: null, + manualRequest: null, + mediaType: 0, + }, + { + id: 209601, + termId: 10323, + channelId: 1, + channelName: "通道1", + alias: "白天", + presetId: 255, + width: 1920, + height: 1080, + fileSize: 276768, + photoTime: "2023-07-17T06:46:41.000+00:00", + recvTime: "2023-07-17T06:46:37.000+00:00", + path: "http://dev.xinyingpower.com:40080/photos/2023/07/17/00/XYIGQ10D221000100_1_FF_20230717144641.jpg", + thumb: null, + manualRequest: null, + mediaType: 0, + }, + { + id: 209595, + termId: 10323, + channelId: 1, + channelName: "通道1", + alias: "白天", + presetId: 255, + width: 1920, + height: 1080, + fileSize: 214869, + photoTime: "2023-07-17T06:00:02.000+00:00", + recvTime: "2023-07-17T05:59:58.000+00:00", + path: "http://dev.xinyingpower.com:40080/photos/2023/07/17/00/XYIGQ10D221000100_1_FF_20230717140002.jpg", + thumb: null, + manualRequest: null, + mediaType: 0, + }, + { + id: 209580, + termId: 10323, + channelId: 1, + channelName: "通道1", + alias: "白天", + presetId: 255, + width: 1920, + height: 1080, + fileSize: 213474, + photoTime: "2023-07-17T05:00:02.000+00:00", + recvTime: "2023-07-17T04:59:58.000+00:00", + path: "http://dev.xinyingpower.com:40080/photos/2023/07/17/00/XYIGQ10D221000100_1_FF_20230717130002.jpg", + thumb: null, + manualRequest: null, + mediaType: 0, + }, + { + id: 209549, + termId: 10323, + channelId: 1, + channelName: "通道1", + alias: "白天", + presetId: 255, + width: 1920, + height: 1080, + fileSize: 214600, + photoTime: "2023-07-17T04:00:02.000+00:00", + recvTime: "2023-07-17T03:59:58.000+00:00", + path: "http://dev.xinyingpower.com:40080/photos/2023/07/17/00/XYIGQ10D221000100_1_FF_20230717120002.jpg", + thumb: null, + manualRequest: null, + mediaType: 0, + }, + { + id: 209535, + termId: 10323, + channelId: 1, + channelName: "通道1", + alias: "白天", + presetId: 255, + width: 1920, + height: 1080, + fileSize: 213311, + photoTime: "2023-07-17T03:00:02.000+00:00", + recvTime: "2023-07-17T02:59:58.000+00:00", + path: "http://dev.xinyingpower.com:40080/photos/2023/07/17/00/XYIGQ10D221000100_1_FF_20230717110002.jpg", + thumb: null, + manualRequest: null, + mediaType: 0, + }, + { + id: 209529, + termId: 10323, + channelId: 1, + channelName: "通道1", + alias: "白天", + presetId: 255, + width: 1920, + height: 1080, + fileSize: 213896, + photoTime: "2023-07-17T02:00:05.000+00:00", + recvTime: "2023-07-17T02:00:01.000+00:00", + path: "http://dev.xinyingpower.com:40080/photos/2023/07/17/00/XYIGQ10D221000100_1_FF_20230717100005.jpg", + thumb: null, + manualRequest: null, + mediaType: 0, + }, + { + id: 209521, + termId: 10323, + channelId: 1, + channelName: "通道1", + alias: "白天", + presetId: 255, + width: 1920, + height: 1080, + fileSize: 217319, + photoTime: "2023-07-17T01:00:02.000+00:00", + recvTime: "2023-07-17T00:59:58.000+00:00", + path: "http://dev.xinyingpower.com:40080/photos/2023/07/17/00/XYIGQ10D221000100_1_FF_20230717090002.jpg", + thumb: null, + manualRequest: null, + mediaType: 0, + }, + { + id: 209512, + termId: 10323, + channelId: 1, + channelName: "通道1", + alias: "白天", + presetId: 255, + width: 1920, + height: 1080, + fileSize: 136386, + photoTime: "2023-07-17T00:00:02.000+00:00", + recvTime: "2023-07-16T23:59:58.000+00:00", + path: "http://dev.xinyingpower.com:40080/photos/2023/07/17/00/XYIGQ10D221000100_1_FF_20230717080002.jpg", + thumb: null, + manualRequest: null, + mediaType: 0, + }, + { + id: 209505, + termId: 10323, + channelId: 1, + channelName: "通道1", + alias: "白天", + presetId: 255, + width: 1920, + height: 1080, + fileSize: 160791, + photoTime: "2023-07-16T23:00:02.000+00:00", + recvTime: "2023-07-16T22:59:58.000+00:00", + path: "http://dev.xinyingpower.com:40080/photos/2023/07/17/00/XYIGQ10D221000100_1_FF_20230717070002.jpg", + thumb: null, + manualRequest: null, + mediaType: 0, + }, + { + id: 209493, + termId: 10323, + channelId: 2, + channelName: "通道2", + alias: "黑夜", + presetId: 255, + width: 1920, + height: 1080, + fileSize: 1315637, + photoTime: "2023-07-16T22:00:15.000+00:00", + recvTime: "2023-07-16T22:00:11.000+00:00", + path: "http://dev.xinyingpower.com:40080/photos/2023/07/17/00/XYIGQ10D221000100_2_FF_20230717060015.jpg", + thumb: null, + manualRequest: null, + mediaType: 0, + }, + { + id: 209490, + termId: 10323, + channelId: 1, + channelName: "通道1", + alias: "白天", + presetId: 255, + width: 1920, + height: 1080, + fileSize: 131594, + photoTime: "2023-07-16T22:00:02.000+00:00", + recvTime: "2023-07-16T21:59:58.000+00:00", + path: "http://dev.xinyingpower.com:40080/photos/2023/07/17/00/XYIGQ10D221000100_1_FF_20230717060002.jpg", + thumb: null, + manualRequest: null, + mediaType: 0, + }, + { + id: 209484, + termId: 10323, + channelId: 2, + channelName: "通道2", + alias: "黑夜", + presetId: 255, + width: 1920, + height: 1080, + fileSize: 164643, + photoTime: "2023-07-16T21:00:02.000+00:00", + recvTime: "2023-07-16T21:00:00.000+00:00", + path: "http://dev.xinyingpower.com:40080/photos/2023/07/17/00/XYIGQ10D221000100_2_FF_20230717050002.jpg", + thumb: null, + manualRequest: null, + mediaType: 0, + }, + { + id: 209477, + termId: 10323, + channelId: 2, + channelName: "通道2", + alias: "黑夜", + presetId: 255, + width: 1920, + height: 1080, + fileSize: 53881, + photoTime: "2023-07-16T20:00:02.000+00:00", + recvTime: "2023-07-16T19:59:59.000+00:00", + path: "http://dev.xinyingpower.com:40080/photos/2023/07/17/00/XYIGQ10D221000100_2_FF_20230717040002.jpg", + thumb: null, + manualRequest: null, + mediaType: 0, + }, + { + id: 209470, + termId: 10323, + channelId: 2, + channelName: "通道2", + alias: "黑夜", + presetId: 255, + width: 1920, + height: 1080, + fileSize: 50555, + photoTime: "2023-07-16T19:00:02.000+00:00", + recvTime: "2023-07-16T18:59:59.000+00:00", + path: "http://dev.xinyingpower.com:40080/photos/2023/07/17/00/XYIGQ10D221000100_2_FF_20230717030002.jpg", + thumb: null, + manualRequest: null, + mediaType: 0, + }, + { + id: 209463, + termId: 10323, + channelId: 2, + channelName: "通道2", + alias: "黑夜", + presetId: 255, + width: 1920, + height: 1080, + fileSize: 902957, + photoTime: "2023-07-16T18:00:02.000+00:00", + recvTime: "2023-07-16T17:59:57.000+00:00", + path: "http://dev.xinyingpower.com:40080/photos/2023/07/17/00/XYIGQ10D221000100_2_FF_20230717020002.jpg", + thumb: null, + manualRequest: null, + mediaType: 0, + }, + { + id: 209455, + termId: 10323, + channelId: 2, + channelName: "通道2", + alias: "黑夜", + presetId: 255, + width: 1920, + height: 1080, + fileSize: 57962, + photoTime: "2023-07-16T17:00:02.000+00:00", + recvTime: "2023-07-16T16:59:59.000+00:00", + path: "http://dev.xinyingpower.com:40080/photos/2023/07/17/00/XYIGQ10D221000100_2_FF_20230717010002.jpg", + thumb: null, + manualRequest: null, + mediaType: 0, + }, + { + id: 209449, + termId: 10323, + channelId: 2, + channelName: "通道2", + alias: "黑夜", + presetId: 255, + width: 1920, + height: 1080, + fileSize: 82371, + photoTime: "2023-07-16T16:00:02.000+00:00", + recvTime: "2023-07-16T16:00:00.000+00:00", + path: "http://dev.xinyingpower.com:40080/photos/2023/07/17/00/XYIGQ10D221000100_2_FF_20230717000002.jpg", + thumb: null, + manualRequest: null, + mediaType: 0, + }, + ], //获取装置当前图片数据 + zzCmdid: "", + dateValue: "", //选择日期 + pickerOptions: { + disabledDate(date) { + return date.getTime() > Date.now(); // 禁用大于今天的日期 + }, + }, channelListOption: [], //通道内容 - channelListValue: "", - channelValue: [], //选中的通道 - terminalPhoto: [], //获取拍照装置当前数据 - totalPic: "", - dateValue: "", //日期 - nopicPath: require("@/assets/img/nopic.jpg"), - loadingBg: false, - loadingpic: false, - newPicData: "", - timer: null, - treetimer: null, - treenum: 0, - i: 0, - newTermId: "", - zzstatus: "", - address: "", - towertitle: "", - CurrentData: "", + selectChannelValue: "", //选中的通道 }; }, watch: { @@ -297,36 +649,20 @@ export default { console.log(this.$refs.tree); }, }, - computed: { - ...mapState(["channelid", "termid"]), - channelid() { - let storechannelid = localStorage.getItem("channelid"); - return storechannelid; - // return this.$store.state.channelid; - }, - termid() { - let storetermid = localStorage.getItem("termid"); - return storetermid; - }, - }, + computed: {}, mounted() { this.dragControllerDiv(); }, created() { - this.getLineTreeList(); + //获取日期 this.getDateTime(); console.log(this.dateValue); + this.getLineTreeList(); this.treetimer = window.setInterval(() => { setTimeout(this.getLineTreeStatus(), 0); }, 300000); }, methods: { - //树状图搜索 - filterNode(value, data) { - console.log(value, data); - if (!value) return true; - return data.name.indexOf(value) !== -1; - }, //获取当前时间 getDateTime() { this.dateValue = new Date().getTime(); @@ -334,80 +670,82 @@ export default { //选择时间 changedate() { console.log(this.dateValue); - console.log(this.channelList); - this.getTerminalPhotoList( - this.channelValue, - this.dateValue, - this.channelList[0].termId - ); }, - //获取状态 + //点击当前选中的treenode + handleNodeClick(data) { + console.log(data); + this.selectData = data; + //this.previewData = data; + if (data.dyValue) { + this.towerFlag = true; + console.log("电压"); + this.type = 1; + //this.getPicList(data.id, this.type); + this.$refs.previewRef.getPicList(data.id, this.type); + } else if (data.bsManufacturer) { + this.towerFlag = true; + console.log("线路"); + this.type = 2; + this.$refs.previewRef.getPicList(data.id, this.type); + //this.getPicList(data.id, this.type); + } else { + console.log("杆塔"); + this.towerFlag = false; + this.towertitle = data.name; + this.zzCmdid = data.cmdid; + this.getChannelList(data.id); + // this.getTerminalPhotoList(id, date, data.id); + } + }, + //轮询获取装置状态 getLineTreeStatus() { getdyTreeListJoggle() .then((res) => { console.log(res); this.lineTreeData = res.data.list; this.$nextTick(() => { - this.$refs.tree.setCurrentKey(this.newTermId); //一定要加这个选中了否则样式没有出来 + this.$refs.tree.setCurrentKey(this.selectData.id); //一定要加这个选中了否则样式没有出来 }); }) .catch((err) => { console.log(err); //代码错误、请求失败捕获 }); }, + //树状图搜索 + filterNode(value, data) { + console.log(value, data); + if (!value) return true; + return data.name.indexOf(value) !== -1; + }, //获取左侧树结构 getLineTreeList() { - this.loadingBg = true; + this.emptyText = "正在加载中..."; getdyTreeListJoggle() .then((res) => { console.log(res); this.lineTreeData = res.data.list; console.log(this.lineTreeData); - console.log(this.lineTreeData[0].list[0].list); + this.onlineNum = res.data.onlineNum; + this.totalNum = res.data.totalNum; if (this.lineTreeData[0].list[0].list.length > 0) { - this.currentNodekey = this.lineTreeData[0].list[0].list[0].id; //第一个数据 - this.newTermId = this.lineTreeData[0].list[0].list[0].id; - this.towertitle = this.lineTreeData[0].list[0].list[0].name; - this.address = this.lineTreeData[0].list[0].list[0].address; - this.cmdid = this.lineTreeData[0].list[0].list[0].cmdid; - this.zzstatus = this.lineTreeData[0].list[0].list[0].onlinestatus; - this.CurrentData = this.lineTreeData[0].list[0].list[0]; - console.log(this.zzstatus); + this.emptyText = "暂无数据"; + this.selectData = this.lineTreeData[0]; //第一个选中的数据 + this.currentNodekey = this.lineTreeData[0].id; //第一个数据 + this.type = 1; + this.newCurrentId = this.lineTreeData[0].id; + this.previewData = this.lineTreeData[0]; //预览图数据 this.$nextTick(() => { this.$refs.tree.setCurrentKey(this.currentNodekey); //一定要加这个选中了否则样式没有出来 - this.channelId = this.currentNodekey; - this.getChannelList(this.channelId); //获取通道id接口 + + this.$refs.previewRef.getPicList(this.currentNodekey, this.type); }); } - this.loadingBg = false; }) .catch((err) => { console.log(err); //代码错误、请求失败捕获 }); }, - //点击获取当前点击的tree数据 - handleNodeClick(data, node) { - console.log(data, node); - if (data.list) { - this.$refs.tree.setCurrentKey(data.list[0].id); - } - this.zzstatus = data.onlinestatus; - console.log(this.zzstatus); - this.channelId = data.id; //获取当前点击的id - this.cmdid = data.cmdid; - this.address = data.address; - this.towertitle = data.name; - this.newTermId = data.id; //获取当前点击的id - this.CurrentData = data; - console.log(data); - this.channelValue = []; - this.channelOption = []; - this.channelListOption = []; - this.getChannelList(this.channelId); //获取通道id接口 - this.stop(); - this.btnvideoloading = false; - this.btnpicloading = false; - }, + //获取通道的接口 getChannelList(id) { getChannelByTermidJoggle({ termid: id }) @@ -415,23 +753,10 @@ export default { console.log(res); this.channelList = res.data.list; console.log(this.channelList); - - this.channelOption = []; - this.channelList.forEach((item) => { - this.channelOption.push({ - label: item.channelname, - value: item.channelid, - termid: item.termId, - alias: item.alias, - }); - this.channelValue.push(item.channelid); //默认选中所有通道 - }); // 选择通道一通道二select框 - console.log(this.channelOption); - console.log(this.channelValue); this.channelListOption = []; this.channelListOption.push({ label: "全部", - value: "", + value: "-1", termid: "", alias: "", }); @@ -443,44 +768,16 @@ export default { alias: item.alias, }); }); - this.channelListValue = this.channelListOption[0].value; //默认选中所有通道 - // console.log(JSON.parse(JSON.stringify(this.channelValue))); - // this.channelValue = JSON.parse(JSON.stringify(this.channelValue)); - console.log(this.channelOption.length); - if (this.channelOption.length == 0) { - console.log("没有绑定通道"); - this.terminalPhoto = [ - { - path: this.nopicPath, - termId: id, - }, - ]; - console.log(this.terminalPhoto); - return; - } else { - this.getTerminalPhotoList( - this.channelValue, - this.dateValue, - this.channelList[0].termId - ); //获取图片列表是传当前设备的 id 和termid - } + this.selectChannelValue = this.channelListOption[0].value; //默认选中所有通道 }) .catch((err) => { - this.loading = false; - console.log("没有绑定通道"); - this.terminalPhoto = [ - { - path: this.nopicPath, - termId: id, - }, - ]; - console.log(this.terminalPhoto); console.log(err); //代码错误、请求失败捕获 }); }, + //切换通道 + changeChannelId(val) {}, //获取图片 getTerminalPhotoList(id, date, termId) { - this.loadingpic = true; this.terminalPhoto = []; console.log(id, date, termId); getTerminalPhotoListJoggle({ @@ -490,342 +787,14 @@ export default { }) .then((res) => { console.log(res); - if (res.data.list.length == 0) { - this.terminalPhoto = [ - { - path: this.nopicPath, - termId: termId, - }, - ]; - this.totalPic = 0; - } else { - this.terminalPhoto = res.data.list; - } - - console.log(this.terminalPhoto.length); - this.totalPic = res.data.num; - //this.$refs.a.getphotodata(this.terminalPhoto); - this.loadingpic = false; - console.log(this.terminalPhoto); + this.terminalPhoto = res.data.list; }) .catch((err) => { console.log(err); //代码错误、请求失败捕获 }); }, - //切换通道 - changeChannelId(val) { - let selchannel = []; - if (!val) { - this.channelList.forEach((item) => { - selchannel.push(item.channelid); //选中所有通道 - }); - } else { - selchannel.push(val); - } - let channelObj = {}; - channelObj = this.channelOption.find(function (i) { - return i.value; - }); - console.log(channelObj); - this.getTerminalPhotoList(selchannel, this.dateValue, channelObj.termid); - }, - //设置时间表 - handleSetSchedule() { - this.$refs.setschedule_ref.display(); - this.$refs.setschedule_ref.getSingleAccess(this.channelId, this.cmdid); - this.$refs.setschedule_ref.deviceList(); - }, - //声光报警开启关闭 - handleCommandWarn(command) { - switch (command) { - case "open": //开启 - this.handleWarn(1); - break; - case "close": //关闭 - this.handleWarn(0); - break; - } - }, - //声光报警 - handleWarn(val) { - console.log("声光报警"); - console.log(this.cmdid); - getTermStatus({ termId: this.newTermId }).then((res) => { - console.log(res); - if (res.data.isonline) { - alarmMarkJoggle({ - cmdId: this.cmdid, - ctrl: val, - termId: this.newTermId, - }) - .then((res) => { - console.log(res); - if (res.code == 200) { - if (val == 1) { - this.$message({ - duration: 1500, - showClose: true, - message: "声光报警开启成功", - type: "success", - }); - } else { - this.$message({ - duration: 1500, - showClose: true, - message: "声光报警关闭成功", - type: "success", - }); - } - } - }) - .catch((err) => { - this.$message({ - duration: 1500, - showClose: true, - message: "声光报警操作失败", - type: "error", - }); - }); - } else { - this.$message({ - duration: 1500, - showClose: true, - message: "装置下线，发送指令失败", - type: "error", - }); - } - }); - }, - //线缆显示 - handleCommandLine(command) { - switch (command) { - case "open": //开启 - this.$refs.carouselpic.openline(); - break; - case "close": //关闭 - this.$refs.carouselpic.handelClear(); - break; - } - }, - - handleShowErr() { - this.$message({ - duration: 1500, - showClose: true, - message: "该功能暂未开发,敬请期待", - type: "warning", - }); - }, - - //手动拍照 - handleCommandpic(command) { - console.log(command); - getTermStatus({ termId: this.newTermId }).then((res) => { - console.log(res); - if (res.data.isonline) { - this.btnpicloading = true; - getLatestPhotoJoggle({ - captureType: 0, - channel: command, - // cmdid: this.cmdid, - termId: this.newTermId, - preset: 255, - }) - .then((res) => { - this.$message({ - duration: 1500, - showClose: true, - message: "手动拍照请求成功！", - type: "success", - }); - this.loadingpic = true; - console.log(res); - this.newPicData = res.data; - console.log(this.newPicData); - console.log(this.newTermId); - this.timer = window.setInterval(() => { - this.newPicApi(); - this.i++; - }, 5000); - }) - .catch((err) => { - console.log(err); //代码错误、请求失败捕获 - }); - } else { - this.btnpicloading = false; - this.loadingpic = false; - this.$message({ - duration: 1500, - showClose: true, - message: "装置下线，发送指令失败", - type: "error", - }); - } - }); - }, - //手动拍视频 - handleCommandvideo(command) { - console.log(command); - - getTermStatus({ termId: this.newTermId }).then((res) => { - console.log(res); - if (res.data.isonline) { - this.btnvideoloading = true; - getLatestPhotoJoggle({ - captureType: 1, - channel: command, - //cmdid: this.cmdid, - termId: this.newTermId, - preset: 255, - }) - .then((res) => { - this.$message({ - duration: 1500, - showClose: true, - message: "手动拍视频请求成功！", - type: "success", - }); - this.loadingpic = true; - console.log(res); - this.newPicData = res.data; - console.log(this.newPicData); - console.log(this.newTermId); - this.timer = window.setInterval(() => { - this.newPicApi(); - this.i++; - }, 10000); - }) - .catch((err) => { - console.log(err); //代码错误、请求失败捕获 - }); - } else { - this.btnvideoloading = false; - this.loadingpic = false; - this.$message({ - duration: 1500, - showClose: true, - message: "装置下线，发送指令失败", - type: "error", - }); - } - }); - }, - - //获取最新图片 - newPicApi() { - getReturnedPhotoJoggle({ - photoTime: this.newPicData, - termId: this.newTermId, - }).then((res) => { - console.log(res.data); - console.log(this.i); - //console.log(this.newPicData, this.currentNodekey); - if (res.data == true && this.i < 10) { - console.log(res.data); - clearInterval(this.timer); - this.timer = null; - this.getTerminalPhotoList( - this.channelValue, - this.dateValue, - this.channelList[0].termId - ); - this.btnpicloading = false; - this.btnvideoloading = false; - console.log("返回最新图片"); - this.i = 0; - } else if (res.data == false && this.i > 10) { - this.i = 0; - clearInterval(this.timer); - this.timer = null; - this.$message({ - duration: 1500, - showClose: true, - message: "装置暂无响应，请稍后再试！", - type: "warning", - }); - this.btnpicloading = false; - this.btnvideoloading = false; - this.loadingpic = false; - } - console.log("2222222222222222"); - }); - }, - stop() { - clearInterval(this.timer); - this.timer = null; - }, - - //装置信息handleShowInfo - handleShowInfo() { - getTermStatus({ termId: this.newTermId }).then((res) => { - console.log(res); - if (res.data.isonline) { - this.$refs.infodialog_ref.display(this.channelId, this.cmdid); - this.$refs.infodialog_ref.getinfo(); - //this.$refs.infodialog_ref.getListData(this.channelId, this.cmdid); - } else { - this.$message({ - duration: 1500, - showClose: true, - message: "装置下线，发送指令失败", - type: "error", - }); - } - }); - }, - //获取GPS位置 - - handleShowGPS() { - this.$refs.gpsdialog_ref.display(this.cmdid, this.newTermId); - this.$refs.gpsdialog_ref.getgpssql(); - }, - - //切换gps开启关闭 - handleCommandGps(command) { - switch (command) { - case "open": //开启 - this.changeGPS(1, this.cmdid); - break; - case "close": //关闭 - this.changeGPS(0, this.cmdid); - break; - } - }, - changeGPS(val, cmdid) { - console.log(val, cmdid); - setTermGPSJoggle({ gpsstatus: val, cmdId: cmdid }) - .then((res) => { - console.log(res); - if (val == 0) { - this.$message({ - duration: 1500, - message: "关闭GPS", - type: "success", - showClose: true, - }); - } else { - this.$message({ - duration: 1500, - message: "成功开启GPS", - type: "success", - showClose: true, - }); - } - }) - .catch((err) => { - console.log(err); //代码错误、请求失败捕获 - }); - }, - - //历史图片 - handlehistoryPic() { - this.$router.push({ - path: "/realTimeSearch", - query: { lineName: this.CurrentData }, - }); - // sessionStorage.setItem("keyPath", " realTimeSearch"); - }, + //拖拽 dragControllerDiv() { var resize = document.getElementsByClassName("resize"); var left = document.getElementsByClassName("sideBar"); @@ -873,17 +842,17 @@ export default { clearInterval(this.treetimer); this.treetimer = null; //离开页面是销毁 - if (this.timer) { - console.log(this.timer); - clearInterval(this.timer); - this.timer = null; - } //利用vue的生命周期函数 + // if (this.timer) { + // console.log(this.timer); + // clearInterval(this.timer); + // this.timer = null; + // } //利用vue的生命周期函数 }, }; diff --git a/src/views/realTimeMonitor/picIndex.vue b/src/views/realTimeMonitor/picIndex.vue new file mode 100644 index 0000000..29c7f4a --- /dev/null +++ b/src/views/realTimeMonitor/picIndex.vue @@ -0,0 +1,1070 @@ + + + + + diff --git a/src/views/realTimeMonitor/picturemain.vue b/src/views/realTimeMonitor/picturemain.vue deleted file mode 100644 index 14bae6d..0000000 --- a/src/views/realTimeMonitor/picturemain.vue +++ /dev/null @@ -1,191 +0,0 @@ - - - - diff --git a/src/views/realTimeMonitor/previewContain.vue b/src/views/realTimeMonitor/previewContain.vue new file mode 100644 index 0000000..c5df55f --- /dev/null +++ b/src/views/realTimeMonitor/previewContain.vue @@ -0,0 +1,123 @@ + + + +