diff --git a/src/api/models.js b/src/api/models.js index 7e7bb01..bdb75dd 100644 --- a/src/api/models.js +++ b/src/api/models.js @@ -26,4 +26,23 @@ return request.get(`device/level/${data}`) } -export { request, configWarn, listPage, warnList, batchCancelled, getDevInfo,gitNewVls } +const getVideoUrl = (code) => { + return request({ + url: '/hkvideo/getVideoUrl', + method: 'post', + data: { + 'appKey': '27091470', + 'appSecret': 'HWWgQzXsAncno5poYkPv', + 'data': + { + 'cameraIndexCode': code, + 'streamType': 0, + 'protocol': 'hls', + 'transmode': 1, + 'expand': 'transcode=0', + 'streamform': 'ps' + } + } + }) +} +export { request, configWarn, listPage, warnList, batchCancelled, getDevInfo, gitNewVls, getVideoUrl } diff --git a/src/api/models.js b/src/api/models.js index 7e7bb01..bdb75dd 100644 --- a/src/api/models.js +++ b/src/api/models.js @@ -26,4 +26,23 @@ return request.get(`device/level/${data}`) } -export { request, configWarn, listPage, warnList, batchCancelled, getDevInfo,gitNewVls } +const getVideoUrl = (code) => { + return request({ + url: '/hkvideo/getVideoUrl', + method: 'post', + data: { + 'appKey': '27091470', + 'appSecret': 'HWWgQzXsAncno5poYkPv', + 'data': + { + 'cameraIndexCode': code, + 'streamType': 0, + 'protocol': 'hls', + 'transmode': 1, + 'expand': 'transcode=0', + 'streamform': 'ps' + } + } + }) +} +export { request, configWarn, listPage, warnList, batchCancelled, getDevInfo, gitNewVls, getVideoUrl } diff --git a/src/components/homeComp/VideoBox.vue b/src/components/homeComp/VideoBox.vue index 9e54c7c..27c3777 100644 --- a/src/components/homeComp/VideoBox.vue +++ b/src/components/homeComp/VideoBox.vue @@ -25,8 +25,8 @@ } }, mounted() { - this.video = this.$refs.video - this.video.play() + // this.video = this.$refs.video + // this.video.play() }, methods: { play() { @@ -38,15 +38,6 @@ replay() { this.$refs.VueAliplayerV2.replay() } - // fullScree() { - // if (this.vedio) { - // console.log(this.vedio) - // - // this.vedio.requestFullscreen() - // - // // this.vedio.exitFullscreen() - // } - // } } } diff --git a/src/api/models.js b/src/api/models.js index 7e7bb01..bdb75dd 100644 --- a/src/api/models.js +++ b/src/api/models.js @@ -26,4 +26,23 @@ return request.get(`device/level/${data}`) } -export { request, configWarn, listPage, warnList, batchCancelled, getDevInfo,gitNewVls } +const getVideoUrl = (code) => { + return request({ + url: '/hkvideo/getVideoUrl', + method: 'post', + data: { + 'appKey': '27091470', + 'appSecret': 'HWWgQzXsAncno5poYkPv', + 'data': + { + 'cameraIndexCode': code, + 'streamType': 0, + 'protocol': 'hls', + 'transmode': 1, + 'expand': 'transcode=0', + 'streamform': 'ps' + } + } + }) +} +export { request, configWarn, listPage, warnList, batchCancelled, getDevInfo, gitNewVls, getVideoUrl } diff --git a/src/components/homeComp/VideoBox.vue b/src/components/homeComp/VideoBox.vue index 9e54c7c..27c3777 100644 --- a/src/components/homeComp/VideoBox.vue +++ b/src/components/homeComp/VideoBox.vue @@ -25,8 +25,8 @@ } }, mounted() { - this.video = this.$refs.video - this.video.play() + // this.video = this.$refs.video + // this.video.play() }, methods: { play() { @@ -38,15 +38,6 @@ replay() { this.$refs.VueAliplayerV2.replay() } - // fullScree() { - // if (this.vedio) { - // console.log(this.vedio) - // - // this.vedio.requestFullscreen() - // - // // this.vedio.exitFullscreen() - // } - // } } } diff --git a/src/components/homeComp/curveTableCH4.vue b/src/components/homeComp/curveTableCH4.vue index c343099..963d602 100644 --- a/src/components/homeComp/curveTableCH4.vue +++ b/src/components/homeComp/curveTableCH4.vue @@ -1,18 +1,18 @@ @@ -22,117 +22,110 @@ export default { name: 'CurveTableCH4', - props: ['curveInfo'], - data() { - return { - myChart: null + props:{ + title:{ + type: String, + default:'' + }, + line: { + type: Array, + default:()=>[] + }, + row:{ + type: Array, + default:()=>[] + }, + unit: { + type: String, + default:'' + }, + power: { + type: Number, + default:0 } }, - + data() { + return { + myChart: null, + options: { + title: { + text: this.title, + x: 'right' + }, + tooltip: {}, + xAxis: { + inverse: true, + data: this.row, + axisTick: { + inside: true, + alignWithLabel: true + }, + axisLabel: { + // interval:0, + // rotate:-30, //x轴文字倾斜 + padding: [0, 0, 100, 0] // 文字左右定位 + }, + splitLine: { + interval: '0' + } + }, + yAxis: { // y轴设置 + axisLine: { + show: true // 隐藏y轴轴线 + }, + axisTick: { + inside: true + }, + type: 'value', + axisLabel: { // y轴设置为% + show: true, + interval: 'auto', + formatter: '{value} %' + }, + max: 100, // 最大值 + min: 0 // 最小值 + }, + series: [ + { + name: this.unit, + type: 'line', + data: this.line + } + ], + grid: { left: 50 } + } + } + }, computed: { - test() { - return this.curveInfo - }, - power() { - const percent = this.curveInfo.power / 100 - + powerP() { + const percent = this.power / 100 return percent * 30 + 'px' } }, watch: { - curveInfo: { - handler(newQuestion) { - if (!this.curveInfo) { - return + row: { + handler(newVal) { + if (newVal) { + this.options.xAxis.data = newVal + this.options.series[0].data = this.line + this.refreshChart() } - setTimeout(() => { - this.myChart = echarts.init(document.getElementById(this.curveInfo.id)) - // 绘制图表 - this.myChart.setOption({ - title: { - text: this.curveInfo.title, - x: 'right' - }, - tooltip: {}, - xAxis: { - inverse: true, - data: this.curveInfo.row, - axisTick: { - inside: true, - alignWithLabel: true - }, - axisLabel: { - // interval:0, - // rotate:-30, //x轴文字倾斜 - padding: [0, 0, 100, 0] // 文字左右定位 - }, - splitLine: { - interval: '0' - } - }, - // yAxis: { - // axisLine: { - // show: true // 隐藏y轴轴线 - // }, - // axisTick: { - // inside: true - // } - // }, - yAxis: { // y轴设置 - axisLine: { - show: true // 隐藏y轴轴线 - }, - axisTick: { - inside: true - }, - type: 'value', - axisLabel: { // y轴设置为% - show: true, - interval: 'auto', - formatter: '{value} %' - }, - max: 100, // 最大值 - min: 0 // 最小值 - }, - // yAxis: [ - // { - // type: 'value', - // axisLabel: { - // show: true, - // interval: 'auto', - // formatter: '{value} %' - // }, - // axisLine: { - // show: true // 隐藏y轴轴线 - // }, - // axisTick: { - // inside: true - // }, - // show: true - // } - // ], - series: [ - { - name: this.curveInfo.unit, - type: 'line', - data: this.curveInfo.line - } - ], - grid: { - // containLabel: true - left:50 - } - }) - }, 100) }, - // 强制立即执行回调 - immediate: true + deep: true } - // test(a,b){ - // console.log(b); - // } }, mounted() { + this.initChart() + }, + methods: { + initChart() { + this.myChart = echarts.init(this.$refs.chart) + // 绘制图表 + this.myChart.setOption(this.options) + }, + refreshChart(){ + this.myChart.setOption(this.options, true) + } } } diff --git a/src/api/models.js b/src/api/models.js index 7e7bb01..bdb75dd 100644 --- a/src/api/models.js +++ b/src/api/models.js @@ -26,4 +26,23 @@ return request.get(`device/level/${data}`) } -export { request, configWarn, listPage, warnList, batchCancelled, getDevInfo,gitNewVls } +const getVideoUrl = (code) => { + return request({ + url: '/hkvideo/getVideoUrl', + method: 'post', + data: { + 'appKey': '27091470', + 'appSecret': 'HWWgQzXsAncno5poYkPv', + 'data': + { + 'cameraIndexCode': code, + 'streamType': 0, + 'protocol': 'hls', + 'transmode': 1, + 'expand': 'transcode=0', + 'streamform': 'ps' + } + } + }) +} +export { request, configWarn, listPage, warnList, batchCancelled, getDevInfo, gitNewVls, getVideoUrl } diff --git a/src/components/homeComp/VideoBox.vue b/src/components/homeComp/VideoBox.vue index 9e54c7c..27c3777 100644 --- a/src/components/homeComp/VideoBox.vue +++ b/src/components/homeComp/VideoBox.vue @@ -25,8 +25,8 @@ } }, mounted() { - this.video = this.$refs.video - this.video.play() + // this.video = this.$refs.video + // this.video.play() }, methods: { play() { @@ -38,15 +38,6 @@ replay() { this.$refs.VueAliplayerV2.replay() } - // fullScree() { - // if (this.vedio) { - // console.log(this.vedio) - // - // this.vedio.requestFullscreen() - // - // // this.vedio.exitFullscreen() - // } - // } } } diff --git a/src/components/homeComp/curveTableCH4.vue b/src/components/homeComp/curveTableCH4.vue index c343099..963d602 100644 --- a/src/components/homeComp/curveTableCH4.vue +++ b/src/components/homeComp/curveTableCH4.vue @@ -1,18 +1,18 @@ @@ -22,117 +22,110 @@ export default { name: 'CurveTableCH4', - props: ['curveInfo'], - data() { - return { - myChart: null + props:{ + title:{ + type: String, + default:'' + }, + line: { + type: Array, + default:()=>[] + }, + row:{ + type: Array, + default:()=>[] + }, + unit: { + type: String, + default:'' + }, + power: { + type: Number, + default:0 } }, - + data() { + return { + myChart: null, + options: { + title: { + text: this.title, + x: 'right' + }, + tooltip: {}, + xAxis: { + inverse: true, + data: this.row, + axisTick: { + inside: true, + alignWithLabel: true + }, + axisLabel: { + // interval:0, + // rotate:-30, //x轴文字倾斜 + padding: [0, 0, 100, 0] // 文字左右定位 + }, + splitLine: { + interval: '0' + } + }, + yAxis: { // y轴设置 + axisLine: { + show: true // 隐藏y轴轴线 + }, + axisTick: { + inside: true + }, + type: 'value', + axisLabel: { // y轴设置为% + show: true, + interval: 'auto', + formatter: '{value} %' + }, + max: 100, // 最大值 + min: 0 // 最小值 + }, + series: [ + { + name: this.unit, + type: 'line', + data: this.line + } + ], + grid: { left: 50 } + } + } + }, computed: { - test() { - return this.curveInfo - }, - power() { - const percent = this.curveInfo.power / 100 - + powerP() { + const percent = this.power / 100 return percent * 30 + 'px' } }, watch: { - curveInfo: { - handler(newQuestion) { - if (!this.curveInfo) { - return + row: { + handler(newVal) { + if (newVal) { + this.options.xAxis.data = newVal + this.options.series[0].data = this.line + this.refreshChart() } - setTimeout(() => { - this.myChart = echarts.init(document.getElementById(this.curveInfo.id)) - // 绘制图表 - this.myChart.setOption({ - title: { - text: this.curveInfo.title, - x: 'right' - }, - tooltip: {}, - xAxis: { - inverse: true, - data: this.curveInfo.row, - axisTick: { - inside: true, - alignWithLabel: true - }, - axisLabel: { - // interval:0, - // rotate:-30, //x轴文字倾斜 - padding: [0, 0, 100, 0] // 文字左右定位 - }, - splitLine: { - interval: '0' - } - }, - // yAxis: { - // axisLine: { - // show: true // 隐藏y轴轴线 - // }, - // axisTick: { - // inside: true - // } - // }, - yAxis: { // y轴设置 - axisLine: { - show: true // 隐藏y轴轴线 - }, - axisTick: { - inside: true - }, - type: 'value', - axisLabel: { // y轴设置为% - show: true, - interval: 'auto', - formatter: '{value} %' - }, - max: 100, // 最大值 - min: 0 // 最小值 - }, - // yAxis: [ - // { - // type: 'value', - // axisLabel: { - // show: true, - // interval: 'auto', - // formatter: '{value} %' - // }, - // axisLine: { - // show: true // 隐藏y轴轴线 - // }, - // axisTick: { - // inside: true - // }, - // show: true - // } - // ], - series: [ - { - name: this.curveInfo.unit, - type: 'line', - data: this.curveInfo.line - } - ], - grid: { - // containLabel: true - left:50 - } - }) - }, 100) }, - // 强制立即执行回调 - immediate: true + deep: true } - // test(a,b){ - // console.log(b); - // } }, mounted() { + this.initChart() + }, + methods: { + initChart() { + this.myChart = echarts.init(this.$refs.chart) + // 绘制图表 + this.myChart.setOption(this.options) + }, + refreshChart(){ + this.myChart.setOption(this.options, true) + } } } diff --git a/src/utils/hkvideo.js b/src/utils/hkvideo.js new file mode 100644 index 0000000..e69de29 --- /dev/null +++ b/src/utils/hkvideo.js diff --git a/src/api/models.js b/src/api/models.js index 7e7bb01..bdb75dd 100644 --- a/src/api/models.js +++ b/src/api/models.js @@ -26,4 +26,23 @@ return request.get(`device/level/${data}`) } -export { request, configWarn, listPage, warnList, batchCancelled, getDevInfo,gitNewVls } +const getVideoUrl = (code) => { + return request({ + url: '/hkvideo/getVideoUrl', + method: 'post', + data: { + 'appKey': '27091470', + 'appSecret': 'HWWgQzXsAncno5poYkPv', + 'data': + { + 'cameraIndexCode': code, + 'streamType': 0, + 'protocol': 'hls', + 'transmode': 1, + 'expand': 'transcode=0', + 'streamform': 'ps' + } + } + }) +} +export { request, configWarn, listPage, warnList, batchCancelled, getDevInfo, gitNewVls, getVideoUrl } diff --git a/src/components/homeComp/VideoBox.vue b/src/components/homeComp/VideoBox.vue index 9e54c7c..27c3777 100644 --- a/src/components/homeComp/VideoBox.vue +++ b/src/components/homeComp/VideoBox.vue @@ -25,8 +25,8 @@ } }, mounted() { - this.video = this.$refs.video - this.video.play() + // this.video = this.$refs.video + // this.video.play() }, methods: { play() { @@ -38,15 +38,6 @@ replay() { this.$refs.VueAliplayerV2.replay() } - // fullScree() { - // if (this.vedio) { - // console.log(this.vedio) - // - // this.vedio.requestFullscreen() - // - // // this.vedio.exitFullscreen() - // } - // } } } diff --git a/src/components/homeComp/curveTableCH4.vue b/src/components/homeComp/curveTableCH4.vue index c343099..963d602 100644 --- a/src/components/homeComp/curveTableCH4.vue +++ b/src/components/homeComp/curveTableCH4.vue @@ -1,18 +1,18 @@ @@ -22,117 +22,110 @@ export default { name: 'CurveTableCH4', - props: ['curveInfo'], - data() { - return { - myChart: null + props:{ + title:{ + type: String, + default:'' + }, + line: { + type: Array, + default:()=>[] + }, + row:{ + type: Array, + default:()=>[] + }, + unit: { + type: String, + default:'' + }, + power: { + type: Number, + default:0 } }, - + data() { + return { + myChart: null, + options: { + title: { + text: this.title, + x: 'right' + }, + tooltip: {}, + xAxis: { + inverse: true, + data: this.row, + axisTick: { + inside: true, + alignWithLabel: true + }, + axisLabel: { + // interval:0, + // rotate:-30, //x轴文字倾斜 + padding: [0, 0, 100, 0] // 文字左右定位 + }, + splitLine: { + interval: '0' + } + }, + yAxis: { // y轴设置 + axisLine: { + show: true // 隐藏y轴轴线 + }, + axisTick: { + inside: true + }, + type: 'value', + axisLabel: { // y轴设置为% + show: true, + interval: 'auto', + formatter: '{value} %' + }, + max: 100, // 最大值 + min: 0 // 最小值 + }, + series: [ + { + name: this.unit, + type: 'line', + data: this.line + } + ], + grid: { left: 50 } + } + } + }, computed: { - test() { - return this.curveInfo - }, - power() { - const percent = this.curveInfo.power / 100 - + powerP() { + const percent = this.power / 100 return percent * 30 + 'px' } }, watch: { - curveInfo: { - handler(newQuestion) { - if (!this.curveInfo) { - return + row: { + handler(newVal) { + if (newVal) { + this.options.xAxis.data = newVal + this.options.series[0].data = this.line + this.refreshChart() } - setTimeout(() => { - this.myChart = echarts.init(document.getElementById(this.curveInfo.id)) - // 绘制图表 - this.myChart.setOption({ - title: { - text: this.curveInfo.title, - x: 'right' - }, - tooltip: {}, - xAxis: { - inverse: true, - data: this.curveInfo.row, - axisTick: { - inside: true, - alignWithLabel: true - }, - axisLabel: { - // interval:0, - // rotate:-30, //x轴文字倾斜 - padding: [0, 0, 100, 0] // 文字左右定位 - }, - splitLine: { - interval: '0' - } - }, - // yAxis: { - // axisLine: { - // show: true // 隐藏y轴轴线 - // }, - // axisTick: { - // inside: true - // } - // }, - yAxis: { // y轴设置 - axisLine: { - show: true // 隐藏y轴轴线 - }, - axisTick: { - inside: true - }, - type: 'value', - axisLabel: { // y轴设置为% - show: true, - interval: 'auto', - formatter: '{value} %' - }, - max: 100, // 最大值 - min: 0 // 最小值 - }, - // yAxis: [ - // { - // type: 'value', - // axisLabel: { - // show: true, - // interval: 'auto', - // formatter: '{value} %' - // }, - // axisLine: { - // show: true // 隐藏y轴轴线 - // }, - // axisTick: { - // inside: true - // }, - // show: true - // } - // ], - series: [ - { - name: this.curveInfo.unit, - type: 'line', - data: this.curveInfo.line - } - ], - grid: { - // containLabel: true - left:50 - } - }) - }, 100) }, - // 强制立即执行回调 - immediate: true + deep: true } - // test(a,b){ - // console.log(b); - // } }, mounted() { + this.initChart() + }, + methods: { + initChart() { + this.myChart = echarts.init(this.$refs.chart) + // 绘制图表 + this.myChart.setOption(this.options) + }, + refreshChart(){ + this.myChart.setOption(this.options, true) + } } } diff --git a/src/utils/hkvideo.js b/src/utils/hkvideo.js new file mode 100644 index 0000000..e69de29 --- /dev/null +++ b/src/utils/hkvideo.js diff --git a/src/utils/request.js b/src/utils/request.js index 02dcee1..0191106 100644 --- a/src/utils/request.js +++ b/src/utils/request.js @@ -12,11 +12,9 @@ // request拦截器 service.interceptors.request.use( config => { - if (store.getters.token) { - console.log('request.js gettoken') - config.headers['token'] = getToken() // 让每个请求携带自定义token 请根据实际情况自行修改 - console.log(config.headers['token']) - } + // if (store.getters.token) { + // config.headers['token'] = getToken() // 让每个请求携带自定义token 请根据实际情况自行修改 + // } return config }, error => { diff --git a/src/api/models.js b/src/api/models.js index 7e7bb01..bdb75dd 100644 --- a/src/api/models.js +++ b/src/api/models.js @@ -26,4 +26,23 @@ return request.get(`device/level/${data}`) } -export { request, configWarn, listPage, warnList, batchCancelled, getDevInfo,gitNewVls } +const getVideoUrl = (code) => { + return request({ + url: '/hkvideo/getVideoUrl', + method: 'post', + data: { + 'appKey': '27091470', + 'appSecret': 'HWWgQzXsAncno5poYkPv', + 'data': + { + 'cameraIndexCode': code, + 'streamType': 0, + 'protocol': 'hls', + 'transmode': 1, + 'expand': 'transcode=0', + 'streamform': 'ps' + } + } + }) +} +export { request, configWarn, listPage, warnList, batchCancelled, getDevInfo, gitNewVls, getVideoUrl } diff --git a/src/components/homeComp/VideoBox.vue b/src/components/homeComp/VideoBox.vue index 9e54c7c..27c3777 100644 --- a/src/components/homeComp/VideoBox.vue +++ b/src/components/homeComp/VideoBox.vue @@ -25,8 +25,8 @@ } }, mounted() { - this.video = this.$refs.video - this.video.play() + // this.video = this.$refs.video + // this.video.play() }, methods: { play() { @@ -38,15 +38,6 @@ replay() { this.$refs.VueAliplayerV2.replay() } - // fullScree() { - // if (this.vedio) { - // console.log(this.vedio) - // - // this.vedio.requestFullscreen() - // - // // this.vedio.exitFullscreen() - // } - // } } } diff --git a/src/components/homeComp/curveTableCH4.vue b/src/components/homeComp/curveTableCH4.vue index c343099..963d602 100644 --- a/src/components/homeComp/curveTableCH4.vue +++ b/src/components/homeComp/curveTableCH4.vue @@ -1,18 +1,18 @@ @@ -22,117 +22,110 @@ export default { name: 'CurveTableCH4', - props: ['curveInfo'], - data() { - return { - myChart: null + props:{ + title:{ + type: String, + default:'' + }, + line: { + type: Array, + default:()=>[] + }, + row:{ + type: Array, + default:()=>[] + }, + unit: { + type: String, + default:'' + }, + power: { + type: Number, + default:0 } }, - + data() { + return { + myChart: null, + options: { + title: { + text: this.title, + x: 'right' + }, + tooltip: {}, + xAxis: { + inverse: true, + data: this.row, + axisTick: { + inside: true, + alignWithLabel: true + }, + axisLabel: { + // interval:0, + // rotate:-30, //x轴文字倾斜 + padding: [0, 0, 100, 0] // 文字左右定位 + }, + splitLine: { + interval: '0' + } + }, + yAxis: { // y轴设置 + axisLine: { + show: true // 隐藏y轴轴线 + }, + axisTick: { + inside: true + }, + type: 'value', + axisLabel: { // y轴设置为% + show: true, + interval: 'auto', + formatter: '{value} %' + }, + max: 100, // 最大值 + min: 0 // 最小值 + }, + series: [ + { + name: this.unit, + type: 'line', + data: this.line + } + ], + grid: { left: 50 } + } + } + }, computed: { - test() { - return this.curveInfo - }, - power() { - const percent = this.curveInfo.power / 100 - + powerP() { + const percent = this.power / 100 return percent * 30 + 'px' } }, watch: { - curveInfo: { - handler(newQuestion) { - if (!this.curveInfo) { - return + row: { + handler(newVal) { + if (newVal) { + this.options.xAxis.data = newVal + this.options.series[0].data = this.line + this.refreshChart() } - setTimeout(() => { - this.myChart = echarts.init(document.getElementById(this.curveInfo.id)) - // 绘制图表 - this.myChart.setOption({ - title: { - text: this.curveInfo.title, - x: 'right' - }, - tooltip: {}, - xAxis: { - inverse: true, - data: this.curveInfo.row, - axisTick: { - inside: true, - alignWithLabel: true - }, - axisLabel: { - // interval:0, - // rotate:-30, //x轴文字倾斜 - padding: [0, 0, 100, 0] // 文字左右定位 - }, - splitLine: { - interval: '0' - } - }, - // yAxis: { - // axisLine: { - // show: true // 隐藏y轴轴线 - // }, - // axisTick: { - // inside: true - // } - // }, - yAxis: { // y轴设置 - axisLine: { - show: true // 隐藏y轴轴线 - }, - axisTick: { - inside: true - }, - type: 'value', - axisLabel: { // y轴设置为% - show: true, - interval: 'auto', - formatter: '{value} %' - }, - max: 100, // 最大值 - min: 0 // 最小值 - }, - // yAxis: [ - // { - // type: 'value', - // axisLabel: { - // show: true, - // interval: 'auto', - // formatter: '{value} %' - // }, - // axisLine: { - // show: true // 隐藏y轴轴线 - // }, - // axisTick: { - // inside: true - // }, - // show: true - // } - // ], - series: [ - { - name: this.curveInfo.unit, - type: 'line', - data: this.curveInfo.line - } - ], - grid: { - // containLabel: true - left:50 - } - }) - }, 100) }, - // 强制立即执行回调 - immediate: true + deep: true } - // test(a,b){ - // console.log(b); - // } }, mounted() { + this.initChart() + }, + methods: { + initChart() { + this.myChart = echarts.init(this.$refs.chart) + // 绘制图表 + this.myChart.setOption(this.options) + }, + refreshChart(){ + this.myChart.setOption(this.options, true) + } } } diff --git a/src/utils/hkvideo.js b/src/utils/hkvideo.js new file mode 100644 index 0000000..e69de29 --- /dev/null +++ b/src/utils/hkvideo.js diff --git a/src/utils/request.js b/src/utils/request.js index 02dcee1..0191106 100644 --- a/src/utils/request.js +++ b/src/utils/request.js @@ -12,11 +12,9 @@ // request拦截器 service.interceptors.request.use( config => { - if (store.getters.token) { - console.log('request.js gettoken') - config.headers['token'] = getToken() // 让每个请求携带自定义token 请根据实际情况自行修改 - console.log(config.headers['token']) - } + // if (store.getters.token) { + // config.headers['token'] = getToken() // 让每个请求携带自定义token 请根据实际情况自行修改 + // } return config }, error => { diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue index b85946c..e469807 100644 --- a/src/views/dashboard/index.vue +++ b/src/views/dashboard/index.vue @@ -5,23 +5,23 @@
- + - +
- + - + - +
@@ -43,6 +43,7 @@ name="硫化氢" unit="ppm" device-type="22" + devcode="3C2022000003" :current-vls="curveH2S.line[0]" :config-info="config22" @refreshConfig="changeShow" @@ -76,7 +77,7 @@ import { configWarn, - getDevInfo, + getDevInfo, getVideoUrl, gitNewVls } from '../../api/models' @@ -102,6 +103,8 @@ }, data() { return { + url0: '', + url1: '', AtmoTotal: 0, H2STotal: 0, CH4Total: 0, @@ -146,15 +149,15 @@ Tiemr: null, currentTime: '', curveCH4: { - id: 'c', + id: 'a', title: '甲烷浓度变化曲线(NB-IoT)', line: [], row: [], - unit: '压力(MPa)', + unit: '浓度(%LEL)', power: 100 }, curveH2S: { - id: 'c', + id: 'b', title: '硫化氢浓度变化曲线(NB-IoT)', line: [], row: [], @@ -174,91 +177,58 @@ tableDataCH4: [], tableDataHistoryAtmo: [], tableDataHistoryCH4: [], - tableDataHistoryH2S: [] + tableDataHistoryH2S: [], + clock: null, + refreshInterval: 60 } }, mounted() { - // this.fetchVls() - // 获取表格信息 - getDevInfo({ deviceType: '23', recentNum: '20', devcode: '312022060007' }).then((res) => { - const temp = { - id: 'a', - title: '甲烷浓度变化曲线(NB-IoT)', - line: [10, 22, 28, 23, 19], - row: ['08.01', '08.02', '08.03', '08.04', '08.05'], - unit: '浓度(%LEL)', - power: 10 - } - if (res.code === 200 && res.data.length > 0) { - temp.line = res.data.map(item => item.dataValue) - temp.row = res.data.map(item => item.uptime) - temp.power = parseInt(res.data[0].cell) - } - - this.curveCH4 = temp - for (let i = 0; i <= this.curveCH4.row.length - 1; i++) { - this.curveCH4.row[i] = this.curveCH4.row[i].split(' ')[1] - } - }) - getDevInfo({ deviceType: '22', recentNum: '20', devcode: '' }).then((res) => { - const temp = { - id: 'b', - title: '硫化氢浓度变化曲线(NB-IoT)', - line: [], // line: [10, 22, 28, 23, 19], - row: [], // row: ['08.01', '08.02', '08.03', '08.04', '08.05'], - unit: '浓度(ppm)', - power: 0 - } - if (res.code === 200 && res.data.length > 0) { - temp.line = res.data.map(item => item.dataValue) - temp.row = res.data.map(item => item.uptime) - temp.power = parseInt(res.data[0].cell) - } - this.curveH2S = temp - for (let i = 0; i <= this.curveH2S.row.length - 1; i++) { - this.curveH2S.row[i] = this.curveH2S.row[i].split(' ')[1] - } - }) - getDevInfo({ deviceType: '24', recentNum: '20', devcode: '89860423192180035458' }).then((res) => { - let temp = { - id: 'c', - title: '压力变化曲线(4G)', - line: [], - row: [], - unit: '压力(MPa)', - power: 90 - } - - if (res.code === 200 && res.data.length > 0) { - temp.line = res.data.map(item => item.dataValue) - temp.row = res.data.map(item => item.uptime) - temp.power = parseInt(res.data[0].cell) - } - - this.curveAtmo = temp - for (let i = 0; i <= this.curveAtmo.row.length - 1; i++) { - this.curveAtmo.row[i] = this.curveAtmo.row[i].split(' ')[1] - } - }) + this.getVideoUrls() + this.refreshCurve() + this.clock = setInterval(() => { + this.refreshCurve() + }, this.refreshInterval * 1000) + }, + beforeDestroy() { + if (this.clock) { + clearInterval(this.clock) + this.clock = null + } }, methods: { - changeinfo(data) { - this['config' + data.id] = data - console.log(this['config' + data.id]) - // 得到传来的数据 - console.log(this['config' + data.id]) - const temp = this['config' + data.id] - // 修改配置 - temp['deviceType'] = temp.id - configWarn(temp).then(res => { - // console.log(temp); - console.log(res, '配置') - gitNewVls(data.id).then(res => { - if (res.data.code === 200) { - console.log(res.data.data, 'woaodeshj') - this['config' + data.id].thresholdVol = res.data.data + // 获取视频地址 + getVideoUrls() { + const codes = ['a949833b73814e5aa13668082b3ccab3', 'a0e487c492b44dd8be79d2b0422fb64d'] + for (let i = 0; i < codes.length; i++) { + getVideoUrl(codes[i]).then(res => { + if (res.code === 200) { + this['url' + i] = res.data.url } }) + } + }, + + refreshCurve() { + this.fetchCurve('23', '20', '312022060007', 'curveCH4') + this.fetchCurve('22', '20', '3C2022000003', 'curveH2S') + this.fetchCurve('24', '20', '89860423192180035458', 'curveAtmo') + }, + // 获取曲线 + fetchCurve(deviceType, recentNum, devcode, obj) { + getDevInfo({ deviceType: deviceType, recentNum: recentNum, devcode: devcode }).then((res) => { + const temp = { + line: [], + row: [], + power: 100 + } + if (res.code === 200 && res.data.length > 0) { + temp.line = res.data.map(item => item.dataValue) + temp.row = res.data.map(item => item.uptime.split(' ')[1]) + temp.power = parseInt(res.data[0].cell) + this[obj].line = temp.line + this[obj].row = temp.row + this[obj].power = temp.power + } }) }, // 获取阈值