|
@@ -61,6 +61,62 @@
|
|
|
@current-change="handlePageCurrentChange"
|
|
|
/>
|
|
|
</ag-grid-layout>
|
|
|
+ <el-dialog :v-loading="this.loading" :title="this.$t('interaction.recordPlay')" :visible.sync="dialogVisible" :before-close="stop" width="70%">
|
|
|
+ <template>
|
|
|
+ <el-row v-if="this.streamingType">
|
|
|
+ <el-col :span="12">
|
|
|
+ <video
|
|
|
+ :src="this.srcStreaming1"
|
|
|
+ autoplay="autoplay"
|
|
|
+ controls="controls"
|
|
|
+ ref="video1"
|
|
|
+ style="width: 98%"
|
|
|
+ >
|
|
|
+ </video>
|
|
|
+ </el-col>
|
|
|
+
|
|
|
+ <el-col :span="12">
|
|
|
+ <video
|
|
|
+ :src="this.srcStreaming2"
|
|
|
+ autoplay="autoplay"
|
|
|
+ controls="controls"
|
|
|
+ ref="video2"
|
|
|
+ style="width: 98%"
|
|
|
+ >
|
|
|
+ </video>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+
|
|
|
+ <el-row v-else>
|
|
|
+
|
|
|
+ <el-col :span="12">
|
|
|
+ <audio
|
|
|
+ :src="this.srcStreaming1"
|
|
|
+ autoplay="autoplay"
|
|
|
+ controls="controls"
|
|
|
+ ref="audio1"
|
|
|
+ style="width: 98%"
|
|
|
+ >
|
|
|
+ </audio>
|
|
|
+ </el-col>
|
|
|
+
|
|
|
+ <el-col :span="12">
|
|
|
+ <audio
|
|
|
+ :src="this.srcStreaming2"
|
|
|
+ autoplay="autoplay"
|
|
|
+ controls="controls"
|
|
|
+ ref="audio2"
|
|
|
+ style="width: 98%"
|
|
|
+ >
|
|
|
+ </audio>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+
|
|
|
+ <div slot="footer" class="dialog-footer" style="text-align: center">
|
|
|
+ <el-button ref="play" type="primary" @click="onclick('onclick')"> {{ this.buttonStr }} </el-button>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-dialog>
|
|
|
|
|
|
</div>
|
|
|
</template>
|
|
@@ -69,12 +125,18 @@
|
|
|
import * as API_interaction from '@/api/ncs_interaction'
|
|
|
import { unixToDate } from '@/utils/Foundation'
|
|
|
import { AG_GRID_LOCALE_CN } from '@/utils/AgGridVueLocaleCn'
|
|
|
-import { returnDeviceType } from '@/utils/device_type'
|
|
|
import {DEVICE_TYPE} from "@/utils/enum/DeviceTypeEnum";
|
|
|
import {TCP_TYPE} from "@/utils/enum/TcpTypeEnum";
|
|
|
+import ButtonCellRender from "@/components/AgGridCellRender/ButtonCellRender";
|
|
|
+import RecordButtonCellRender from "@/components/AgGridCellRender/RecordButtonCellRender";
|
|
|
+import RadioFilter from "@/components/AgGridCustomFilter/RadioFilter";
|
|
|
+import ListFilter from "@/components/AgGridCustomFilter/ListFilter";
|
|
|
+import * as API_Part from "@/api/ncs_partInfo";
|
|
|
+const DeviceUrl = domain.DeviceUrl
|
|
|
|
|
|
export default {
|
|
|
name: 'Index',
|
|
|
+ components: { ButtonCellRender, RadioFilter, ListFilter, RecordButtonCellRender },
|
|
|
data() {
|
|
|
return {
|
|
|
pickerOptions: {
|
|
@@ -128,7 +190,16 @@ export default {
|
|
|
tcpActionTransfer: [
|
|
|
{ key: 'TCP反馈', value: 'CALLBACK' }
|
|
|
],
|
|
|
- queryResult: '-1'
|
|
|
+ queryResult: '-1',
|
|
|
+ srcStreaming1: '',
|
|
|
+ srcStreaming2: '',
|
|
|
+ stream1: '',
|
|
|
+ stream2: '',
|
|
|
+ beginSeconds: 0,
|
|
|
+ buttonStr: this.$t('action.play'),
|
|
|
+ dialogVisible: false,
|
|
|
+ streamingType: true,
|
|
|
+ recordDir: '',
|
|
|
}
|
|
|
},
|
|
|
computed: {
|
|
@@ -138,6 +209,15 @@ export default {
|
|
|
},
|
|
|
beforeMount() {
|
|
|
this.gridOptions = {
|
|
|
+ // onCellClicked: function (event) {
|
|
|
+ // console.log(event)
|
|
|
+ // if (event.data.action_type === TCP_TYPE.VOICE ||
|
|
|
+ // event.data.action_type === TCP_TYPE.VIDEO ||
|
|
|
+ // event.data.action_type === TCP_TYPE.PHONE
|
|
|
+ // ) {
|
|
|
+ // this.getStreaming(event.data);
|
|
|
+ // }
|
|
|
+ // }
|
|
|
}
|
|
|
this.columnDefs = [
|
|
|
{
|
|
@@ -154,10 +234,25 @@ export default {
|
|
|
{ headerName: this.$t('interaction.toMemberName'), field: 'toMemberName', sortable: false, valueFormatter: this.formatterToName, minWidth: 150 },
|
|
|
{ headerName: this.$t('interaction.actionType'), field: 'action_type', sortable: true, valueFormatter: this.formatterType, width: 100 },
|
|
|
{ headerName: this.$t('interaction.actionEnd'), field: 'action_end', sortable: true, cellRenderer: this.formatterResult, width: 100 },
|
|
|
- { headerName: this.$t('interaction.data'), field: 'data', sortable: true, width: 120 },
|
|
|
+ { headerName: this.$t('interaction.data'), field: 'data',
|
|
|
+ cellRendererFramework: 'RecordButtonCellRender',
|
|
|
+ cellRendererParams: param => {
|
|
|
+ return {
|
|
|
+ onClick: this.getStreaming,
|
|
|
+ icon: 'el-icon-caret-right',
|
|
|
+ buttonType: 'primary',
|
|
|
+ buttonSize: 'mini',
|
|
|
+ value: param.value,
|
|
|
+ show: param.data.action_type === TCP_TYPE.VOICE ||
|
|
|
+ param.data.action_type === TCP_TYPE.VIDEO
|
|
|
+ }
|
|
|
+ },
|
|
|
+ sortable: true,
|
|
|
+ width: 120
|
|
|
+ },
|
|
|
{ headerName: this.$t('interaction.createDate'), field: 'create_date', sortable: true, valueFormatter: this.formatterDate, width: 150 },
|
|
|
{ headerName: this.$t('interaction.fromDevice'), field: 'from_device_type', sortable: true, valueFormatter: this.formatterDeviceType, width: 120 },
|
|
|
- { headerName: this.$t('interaction.toDevice'), field: 'to_device_type', sortable: true, valueFormatter: this.formatterDeviceType, width: 120 }
|
|
|
+ { headerName: this.$t('interaction.toDevice'), field: 'to_device_type', sortable: true, valueFormatter: this.formatterDeviceType, width: 120 },
|
|
|
]
|
|
|
this.defaultColDef = {
|
|
|
filter: false,
|
|
@@ -177,6 +272,7 @@ export default {
|
|
|
window.onresize = this.windowResize
|
|
|
this.gridApi = this.gridOptions.api
|
|
|
this.getList()
|
|
|
+ // this.$refs.video2.addEventListener("pause", this.pause)
|
|
|
},
|
|
|
methods: {
|
|
|
windowResize() {
|
|
@@ -439,7 +535,73 @@ export default {
|
|
|
return v[j]
|
|
|
}
|
|
|
}))
|
|
|
- }
|
|
|
+ },
|
|
|
+ getStreaming(params) {
|
|
|
+ this.loading = true
|
|
|
+
|
|
|
+ // const url = '/upload/rec/1.webm'
|
|
|
+ // const url2 = '/upload/rec/1.webm'
|
|
|
+ API_interaction.getStreaming(params.part_id, params.id).then(res => {
|
|
|
+ this.loading = false
|
|
|
+ if (res.length !== 0) {
|
|
|
+ if (res[0].endsWith("webm")) {
|
|
|
+ this.streamingType = true
|
|
|
+ } else if (resp[0].endsWith("opus")) {
|
|
|
+ this.streamingType = false
|
|
|
+ }
|
|
|
+
|
|
|
+ this.srcStreaming1 = DeviceUrl + res[0]
|
|
|
+ this.srcStreaming2 = DeviceUrl + res[1]
|
|
|
+ console.log(this.srcStreaming1)
|
|
|
+ console.log(this.srcStreaming2)
|
|
|
+ this.dialogVisible = true
|
|
|
+ } else {
|
|
|
+ this.$message(this.$t('action.noFile'))
|
|
|
+ }
|
|
|
+ }).catch(response => {
|
|
|
+ this.$message({
|
|
|
+ type: 'info',
|
|
|
+ message: response.message
|
|
|
+ })
|
|
|
+ })
|
|
|
+ },
|
|
|
+ onclick() {
|
|
|
+ if (this.buttonStr === this.$t('action.play')) {
|
|
|
+ this.buttonStr = this.$t('action.pause')
|
|
|
+
|
|
|
+ // const time = this.$refs.video1.duration - this.$refs.video2.duration // 总时长差
|
|
|
+ if (this.streamingType) {
|
|
|
+ this.$refs.video1.play()
|
|
|
+ this.$refs.video2.play()
|
|
|
+ } else {
|
|
|
+ this.$refs.audio1.play()
|
|
|
+ this.$refs.audio2.play()
|
|
|
+ }
|
|
|
+ } else if (this.buttonStr === this.$t('action.pause')) {
|
|
|
+ this.buttonStr = this.$t('action.play')
|
|
|
+ if (this.streamingType) {
|
|
|
+ this.$refs.video1.pause()
|
|
|
+ this.$refs.video2.pause()
|
|
|
+ } else {
|
|
|
+ this.$refs.audio1.pause()
|
|
|
+ this.$refs.audio2.pause()
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ stop() {
|
|
|
+ if (this.streamingType) {
|
|
|
+ this.$refs.video1.currentTime = 0
|
|
|
+ this.$refs.video2.currentTime = 0
|
|
|
+ this.$refs.video1.pause()
|
|
|
+ this.$refs.video2.pause()
|
|
|
+ } else {
|
|
|
+ this.$refs.audio1.currentTime = 0
|
|
|
+ this.$refs.audio2.currentTime = 0
|
|
|
+ this.$refs.audio1.pause()
|
|
|
+ this.$refs.audio2.pause()
|
|
|
+ }
|
|
|
+ this.dialogVisible = false
|
|
|
+ },
|
|
|
}
|
|
|
}
|
|
|
</script>
|