|
@@ -116,32 +116,48 @@
|
|
</el-tab-pane>
|
|
</el-tab-pane>
|
|
</el-tabs>
|
|
</el-tabs>
|
|
<div style="padding: 10px;margin: 10px;">
|
|
<div style="padding: 10px;margin: 10px;">
|
|
|
|
+ <el-switch v-if="activeName === 'EVENT'" v-model="sssparams.eventType" active-text="按人" inactive-text="按事件" style="margin-bottom: 10px" @change="Api_getLogTable"></el-switch>
|
|
<div class="table-wrapper">
|
|
<div class="table-wrapper">
|
|
|
|
+ <div style="padding-bottom: 10px;">
|
|
|
|
+ <el-button type="primary" @click="exportExcel">导出</el-button>
|
|
|
|
+ </div>
|
|
<el-table :data="userActionList" stripe border :default-sort = "{prop: 'num', order: 'descending'}" style="width: 100%">
|
|
<el-table :data="userActionList" stripe border :default-sort = "{prop: 'num', order: 'descending'}" style="width: 100%">
|
|
<el-table-column type="index" width="100" :label="this.$t('action.index')" align="center" />
|
|
<el-table-column type="index" width="100" :label="this.$t('action.index')" align="center" />
|
|
- <el-table-column prop="name" :label="this.$t('member.name')" min-width="130" align="center" />
|
|
|
|
- <el-table-column prop="num" :label="this.$t('interaction.actionTime')" min-width="130" align="center" sortable />
|
|
|
|
- <el-table-column prop="error_num" :label="this.$t('interaction.unSuccessTime')" min-width="130" align="center" sortable />
|
|
|
|
- <el-table-column prop="avg_num" :label="this.$t('interaction.avgResponseNum')" min-width="130" align="center" sortable >
|
|
|
|
|
|
+ <el-table-column prop="name" :label="sssparams.eventType ? this.$t('member.name') : this.$t('tcpType.EVENT')" min-width="130" align="center" sortable>
|
|
|
|
+ <template slot-scope="scope">
|
|
|
|
+ <el-link v-if="activeName === 'EVENT'" @click="clickLook(scope.row)">{{ scope.row.name }}</el-link>
|
|
|
|
+ <span v-if="activeName !== 'EVENT'">{{ scope.row.name }}</span>
|
|
|
|
+ </template>
|
|
|
|
+ </el-table-column>
|
|
|
|
+ <el-table-column prop="num" :label="boolShow ? this.$t('interaction.actionTime2') : this.$t('interaction.actionTime')" min-width="130" align="center" sortable />
|
|
|
|
+ <el-table-column prop="error_num" :label="boolShow ? this.$t('interaction.unSuccessTime2') : this.$t('interaction.unSuccessTime')" min-width="130" align="center" sortable />
|
|
|
|
+ <el-table-column prop="avg_num" :label="boolShow ? this.$t('interaction.avgResponseNum2') : this.$t('interaction.avgResponseNum')" min-width="130" align="center" sortable >
|
|
<template slot-scope="scope">
|
|
<template slot-scope="scope">
|
|
<span>{{ formateSeconds(scope.row.avg_num) }}</span>
|
|
<span>{{ formateSeconds(scope.row.avg_num) }}</span>
|
|
</template>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table-column>
|
|
- <el-table-column prop="min_num" :label="this.$t('interaction.MinNum')" min-width="130" align="center" sortable >
|
|
|
|
|
|
+ <el-table-column prop="min_num" :label="boolShow ? this.$t('interaction.MinNum2') : this.$t('interaction.MinNum')" min-width="130" align="center" sortable >
|
|
<template slot-scope="scope">
|
|
<template slot-scope="scope">
|
|
<span>{{ formateSeconds(scope.row.min_num) }}</span>
|
|
<span>{{ formateSeconds(scope.row.min_num) }}</span>
|
|
</template>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table-column>
|
|
- <el-table-column prop="max_num" :label="this.$t('interaction.MaxNum')" min-width="130" align="center" sortable >
|
|
|
|
|
|
+ <el-table-column prop="max_num" :label="boolShow ? this.$t('interaction.MaxNum2') : this.$t('interaction.MaxNum')" min-width="130" align="center" sortable >
|
|
<template slot-scope="scope">
|
|
<template slot-scope="scope">
|
|
<span>{{ formateSeconds(scope.row.max_num) }}</span>
|
|
<span>{{ formateSeconds(scope.row.max_num) }}</span>
|
|
</template>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table-column>
|
|
|
|
+ <el-table-column v-if="boolShow" prop="sum_num" :label="this.$t('interaction.SumNum')" min-width="130" align="center" sortable >
|
|
|
|
+ <template slot-scope="scope">
|
|
|
|
+ <span>{{ formateSeconds(scope.row.sum_num) }}</span>
|
|
|
|
+ </template>
|
|
|
|
+ </el-table-column>
|
|
</el-table>
|
|
</el-table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
-
|
|
|
|
|
|
+ <el-drawer :title="infoName+'统计子表'" :visible.sync="infoVisible" :append-to-body="true" size="70%">
|
|
|
|
+ <my-info :sssparams="sssparams" :uid="uid" :info-name="infoName"></my-info>
|
|
|
|
+ </el-drawer>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</template>
|
|
|
|
|
|
@@ -150,9 +166,10 @@ import echarts from 'echarts'
|
|
import CountTo from 'vue-count-to'
|
|
import CountTo from 'vue-count-to'
|
|
import * as API_interaction from '@/api/ncs_interaction'
|
|
import * as API_interaction from '@/api/ncs_interaction'
|
|
import Storage from '@/utils/storage'
|
|
import Storage from '@/utils/storage'
|
|
|
|
+import myInfo from '@/views/ncs-chars/info'
|
|
export default {
|
|
export default {
|
|
name: 'Index',
|
|
name: 'Index',
|
|
- components: { CountTo },
|
|
|
|
|
|
+ components: { CountTo, myInfo },
|
|
data() {
|
|
data() {
|
|
return {
|
|
return {
|
|
sssparams: {
|
|
sssparams: {
|
|
@@ -162,7 +179,8 @@ export default {
|
|
day: '',
|
|
day: '',
|
|
seller_id: null,
|
|
seller_id: null,
|
|
fromToType: 0,
|
|
fromToType: 0,
|
|
- lookType: 0
|
|
|
|
|
|
+ lookType: 0,
|
|
|
|
+ eventType: true
|
|
},
|
|
},
|
|
chart: null,
|
|
chart: null,
|
|
chartData: {},
|
|
chartData: {},
|
|
@@ -177,7 +195,12 @@ export default {
|
|
dataList: [this.$t('tcpType.VOICE'), this.$t('tcpType.VIDEO'), this.$t('tcpType.IM'), this.$t('tcpType.EVENT'), this.$t('tcpType.ENTRACEGUARD'), this.$t('tcpType.SOS'), this.$t('tcpType.PHONE')],
|
|
dataList: [this.$t('tcpType.VOICE'), this.$t('tcpType.VIDEO'), this.$t('tcpType.IM'), this.$t('tcpType.EVENT'), this.$t('tcpType.ENTRACEGUARD'), this.$t('tcpType.SOS'), this.$t('tcpType.PHONE')],
|
|
activeName: 'ALL',
|
|
activeName: 'ALL',
|
|
userActionList: [],
|
|
userActionList: [],
|
|
- activeName2: 'user'
|
|
|
|
|
|
+ activeName2: 'user',
|
|
|
|
+ boolShow: false,
|
|
|
|
+ uid: null,
|
|
|
|
+ infoVisible: false,
|
|
|
|
+ infoName: '',
|
|
|
|
+ infoDay: ''
|
|
}
|
|
}
|
|
},
|
|
},
|
|
mounted() {
|
|
mounted() {
|
|
@@ -355,7 +378,7 @@ export default {
|
|
this.chart.clear()
|
|
this.chart.clear()
|
|
const mySeries = [
|
|
const mySeries = [
|
|
{
|
|
{
|
|
- name: this.$t('interaction.interactionRecord'),
|
|
|
|
|
|
+ name: this.boolShow ? this.$t('interaction.interactionRecord2') : this.$t('interaction.interactionRecord'),
|
|
type: 'bar',
|
|
type: 'bar',
|
|
emphasis: {
|
|
emphasis: {
|
|
focus: 'series'
|
|
focus: 'series'
|
|
@@ -363,7 +386,7 @@ export default {
|
|
data: res.zztDate
|
|
data: res.zztDate
|
|
},
|
|
},
|
|
{
|
|
{
|
|
- name: this.$t('interaction.successInteraction'),
|
|
|
|
|
|
+ name: this.boolShow ? this.$t('interaction.successInteraction2') : this.$t('interaction.successInteraction'),
|
|
type: 'bar',
|
|
type: 'bar',
|
|
stack: 'Ad',
|
|
stack: 'Ad',
|
|
barWidth: 5,
|
|
barWidth: 5,
|
|
@@ -373,7 +396,7 @@ export default {
|
|
data: res.hasZztDate
|
|
data: res.hasZztDate
|
|
},
|
|
},
|
|
{
|
|
{
|
|
- name: this.$t('interaction.unSuccessInteraction'),
|
|
|
|
|
|
+ name: this.boolShow ? this.$t('interaction.unSuccessInteraction2') : this.$t('interaction.unSuccessInteraction'),
|
|
type: 'bar',
|
|
type: 'bar',
|
|
stack: 'Ad',
|
|
stack: 'Ad',
|
|
barWidth: 5,
|
|
barWidth: 5,
|
|
@@ -385,7 +408,7 @@ export default {
|
|
]
|
|
]
|
|
if (res.errorDate) {
|
|
if (res.errorDate) {
|
|
mySeries.push({
|
|
mySeries.push({
|
|
- name: this.$t('interaction.failedInteraction'),
|
|
|
|
|
|
+ name: this.boolShow ? this.$t('interaction.failedInteraction2') : this.$t('interaction.failedInteraction'),
|
|
type: 'bar',
|
|
type: 'bar',
|
|
stack: 'Ad',
|
|
stack: 'Ad',
|
|
barWidth: 5,
|
|
barWidth: 5,
|
|
@@ -434,10 +457,12 @@ export default {
|
|
this.sssparams.year = object.date_val.getFullYear()
|
|
this.sssparams.year = object.date_val.getFullYear()
|
|
this.sssparams.month = this.checkTime(object.date_val.getMonth() + 1)
|
|
this.sssparams.month = this.checkTime(object.date_val.getMonth() + 1)
|
|
this.sssparams.day = this.checkTime(object.date_val.getDate())
|
|
this.sssparams.day = this.checkTime(object.date_val.getDate())
|
|
|
|
+ this.infoDay = this.sssparams.year + '年' + this.sssparams.month + '月' + this.sssparams.day + '日'
|
|
} else {
|
|
} else {
|
|
this.sssparams.year = object.year
|
|
this.sssparams.year = object.year
|
|
this.sssparams.month = object.month
|
|
this.sssparams.month = object.month
|
|
this.sssparams.cycle_type = object.type
|
|
this.sssparams.cycle_type = object.type
|
|
|
|
+ this.infoDay = this.sssparams.year + '年' + this.sssparams.month
|
|
}
|
|
}
|
|
this.getLogCharsJS()
|
|
this.getLogCharsJS()
|
|
if (this.activeName !== 'ALL') {
|
|
if (this.activeName !== 'ALL') {
|
|
@@ -472,9 +497,11 @@ export default {
|
|
},
|
|
},
|
|
handleClick(tab, event) {
|
|
handleClick(tab, event) {
|
|
console.log('this.activeName==', this.activeName)
|
|
console.log('this.activeName==', this.activeName)
|
|
|
|
+ this.sssparams.eventType = true
|
|
if (this.activeName === 'ALL') {
|
|
if (this.activeName === 'ALL') {
|
|
delete this.sssparams.type
|
|
delete this.sssparams.type
|
|
} else {
|
|
} else {
|
|
|
|
+ this.boolShow = this.activeName === 'VOICE' || this.activeName === 'VIDEO' || this.activeName === 'PHONE'
|
|
this.sssparams.type = this.activeName
|
|
this.sssparams.type = this.activeName
|
|
this.Api_getLogTable()
|
|
this.Api_getLogTable()
|
|
}
|
|
}
|
|
@@ -491,12 +518,11 @@ export default {
|
|
Api_getLogTable() {
|
|
Api_getLogTable() {
|
|
const _this = this
|
|
const _this = this
|
|
API_interaction.getLogTable(this.sssparams).then(res => {
|
|
API_interaction.getLogTable(this.sssparams).then(res => {
|
|
- console.log(res)
|
|
|
|
// _this.buildChart(res.dataList, res.tilStr, res.xAxis, 'actionChar', '详情')
|
|
// _this.buildChart(res.dataList, res.tilStr, res.xAxis, 'actionChar', '详情')
|
|
_this.userActionList = res.interactionChars
|
|
_this.userActionList = res.interactionChars
|
|
})
|
|
})
|
|
},
|
|
},
|
|
- //将秒转化为时分秒
|
|
|
|
|
|
+ // 将秒转化为时分秒
|
|
formateSeconds(endTime){
|
|
formateSeconds(endTime){
|
|
if (endTime === 0) {
|
|
if (endTime === 0) {
|
|
return this.$t('action.oneSecond')
|
|
return this.$t('action.oneSecond')
|
|
@@ -519,6 +545,50 @@ export default {
|
|
} else {
|
|
} else {
|
|
return secondTime + this.$t('action.second')
|
|
return secondTime + this.$t('action.second')
|
|
}
|
|
}
|
|
|
|
+ },
|
|
|
|
+ clickLook(row) {
|
|
|
|
+ this.infoName = row.name
|
|
|
|
+ if (this.sssparams.eventType) {
|
|
|
|
+ this.uid = row.uid + ''
|
|
|
|
+ } else {
|
|
|
|
+ this.uid = row.name
|
|
|
|
+ }
|
|
|
|
+ this.infoVisible = true
|
|
|
|
+ },
|
|
|
|
+ exportExcel() {
|
|
|
|
+ const _this = this
|
|
|
|
+ this.$confirm('将导出Excel文件,是否继续?', '提示', {
|
|
|
|
+ type: 'warning'
|
|
|
|
+ }).then(() => {
|
|
|
|
+ _this.loading = false
|
|
|
|
+ import('@/vendor/Export2Excel').then(excel => {
|
|
|
|
+ let tHeader = [_this.sssparams.eventType ? _this.$t('member.name') : _this.$t('tcpType.EVENT'), _this.boolShow ? _this.$t('interaction.actionTime2') : _this.$t('interaction.actionTime'),
|
|
|
|
+ _this.boolShow ? _this.$t('interaction.unSuccessTime2') : _this.$t('interaction.unSuccessTime'), _this.boolShow ? _this.$t('interaction.avgResponseNum2') : _this.$t('interaction.avgResponseNum'),
|
|
|
|
+ _this.boolShow ? _this.$t('interaction.MinNum2') : _this.$t('interaction.MinNum'), _this.boolShow ? _this.$t('interaction.MaxNum2') : _this.$t('interaction.MaxNum')] // 表头
|
|
|
|
+ let filterVal = ['name', 'num', 'error_num', 'avg_num', 'min_num', 'max_num']
|
|
|
|
+ if (_this.boolShow) {
|
|
|
|
+ tHeader.push(this.$t('interaction.SumNum'))
|
|
|
|
+ filterVal.push('sum_num')
|
|
|
|
+ }
|
|
|
|
+ const tit = _this.infoDay + _this.formatterType(_this.activeName) + '统计表'
|
|
|
|
+ const data = _this.formatJson(filterVal, _this.userActionList)
|
|
|
|
+ excel.export_json_to_excel({
|
|
|
|
+ header: tHeader,
|
|
|
|
+ data,
|
|
|
|
+ filename: tit,
|
|
|
|
+ autoWidth: true
|
|
|
|
+ })
|
|
|
|
+ })
|
|
|
|
+ })
|
|
|
|
+ },
|
|
|
|
+ formatJson(filterVal, jsonData) {
|
|
|
|
+ return jsonData.map(v => filterVal.map(j => {
|
|
|
|
+ if (j === 'avg_num' || j === 'min_num' || j === 'max_num' || j === 'sum_num') {
|
|
|
|
+ return this.formateSeconds(v[j])
|
|
|
|
+ } else {
|
|
|
|
+ return v[j]
|
|
|
|
+ }
|
|
|
|
+ }))
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|