|
|
@@ -0,0 +1,548 @@
|
|
|
+<template>
|
|
|
+ <div class="container">
|
|
|
+ <div style="margin: 10px">
|
|
|
+ <span>
|
|
|
+ <span>查询周期：</span>
|
|
|
+ <en-year-month-picker :bool-day="true" @changed="handleYearMonthChanged" />
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ <el-tabs v-model="activeName" type="border-card" @tab-click="handleClick">
|
|
|
+ <el-tab-pane name="ALL">
|
|
|
+ <span slot="label"><i class="el-icon-menu" /> 全部</span>
|
|
|
+ <div>
|
|
|
+ <div style="margin: 10px">
|
|
|
+ <el-row :gutter="30">
|
|
|
+ <el-col :span="8">
|
|
|
+ <div class="card-panel">
|
|
|
+ <div class="card-panel-icon-wrapper icon-message">
|
|
|
+ <!-- el-icon-s-shop-->
|
|
|
+ <el-icon class="el-icon-receiving card-panel-icon" />
|
|
|
+ </div>
|
|
|
+ <div class="card-panel-description">
|
|
|
+ <div class="card-panel-text">
|
|
|
+ 交互类型
|
|
|
+ </div>
|
|
|
+ <count-to :start-val="0" :end-val="partTotal.lx" :duration="4600" class="card-panel-num" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <div class="card-panel">
|
|
|
+ <div class="card-panel-icon-wrapper icon-people">
|
|
|
+ <el-icon class="el-icon-magic-stick card-panel-icon" />
|
|
|
+ </div>
|
|
|
+ <div class="card-panel-description">
|
|
|
+ <div class="card-panel-text">
|
|
|
+ 交互次数
|
|
|
+ </div>
|
|
|
+ <count-to :start-val="0" :end-val="partTotal.count" :duration="8600" class="card-panel-num" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <div class="card-panel">
|
|
|
+ <div class="card-panel-icon-wrapper icon-money">
|
|
|
+ <el-icon class="el-icon-loading card-panel-icon" />
|
|
|
+ </div>
|
|
|
+ <div class="card-panel-description">
|
|
|
+ <div class="card-panel-text">
|
|
|
+ 未响应次数
|
|
|
+ </div>
|
|
|
+ <!-- <span>高温</span>-->
|
|
|
+ <count-to :start-val="0" :end-val="partTotal.noCount" :duration="3200" class="card-panel-num" />
|
|
|
+ <!-- <span>低温</span>-->
|
|
|
+ <!-- <count-to :start-val="0" :end-val="partTotal.loginNum" :duration="3200" class="card-panel-num" />-->
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+ <div class="table-wrapper">
|
|
|
+ <el-table :data="tableData" stripe border style="width: 100%">
|
|
|
+ <el-table-column type="index" width="100" label="序号" align="center" />
|
|
|
+ <el-table-column prop="name" label="类型" min-width="130" align="center" />
|
|
|
+ <el-table-column prop="count" label="交互次数" min-width="130" align="center" />
|
|
|
+ <el-table-column prop="noCount" label="未响应次数" min-width="130" align="center" />
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
+ <el-card shadow="always" style="margin-top: 15px;">
|
|
|
+ <div id="btChart" style="height: 300px" />
|
|
|
+ </el-card>
|
|
|
+ <el-card shadow="always" style="margin-top: 15px;">
|
|
|
+ <div id="chart" style="height: 400px" />
|
|
|
+ </el-card>
|
|
|
+ <el-card shadow="always" style="margin-top: 15px;">
|
|
|
+ <div id="noChart" style="height: 400px" />
|
|
|
+ </el-card>
|
|
|
+ </div>
|
|
|
+ </el-tab-pane>
|
|
|
+ <el-tab-pane name="VOICE">
|
|
|
+ <span slot="label"><i class="el-icon-phone-outline" /> 语音</span>
|
|
|
+ </el-tab-pane>
|
|
|
+ <el-tab-pane name="VIDEO">
|
|
|
+ <span slot="label"><i class="el-icon-video-camera" /> 视频</span>
|
|
|
+ </el-tab-pane>
|
|
|
+ <el-tab-pane name="IM">
|
|
|
+ <span slot="label"><i class="el-icon-microphone" /> 留言</span>
|
|
|
+ </el-tab-pane>
|
|
|
+ <el-tab-pane name="EVENT">
|
|
|
+ <span slot="label"><i class="el-icon-thumb" /> 事件</span>
|
|
|
+ </el-tab-pane>
|
|
|
+ <el-tab-pane name="ENTRACEGUARD">
|
|
|
+ <span slot="label"><i class="el-icon-wallet" /> 门禁</span>
|
|
|
+ </el-tab-pane>
|
|
|
+ <el-tab-pane name="SOS">
|
|
|
+ <span slot="label"><i class="el-icon-sunrise-1" /> 紧急按钮</span>
|
|
|
+ </el-tab-pane>
|
|
|
+ </el-tabs>
|
|
|
+ <div v-if="sssparams.type">
|
|
|
+ <div style="padding: 10px;margin: 10px;">
|
|
|
+ <el-descriptions class="margin-top" title="交互详情" :column="4" border>
|
|
|
+ <el-descriptions-item v-for="(item, index) in userActionList" :key="index">
|
|
|
+ <template slot="label">
|
|
|
+ <i class="el-icon-user" />
|
|
|
+ {{ item.name }}
|
|
|
+ </template>
|
|
|
+ {{ item.value }} 次
|
|
|
+ </el-descriptions-item>
|
|
|
+ </el-descriptions>
|
|
|
+ </div>
|
|
|
+ <el-card shadow="always" style="margin-top: 15px;">
|
|
|
+ <div id="actionChar" style="height: 450px" />
|
|
|
+ </el-card>
|
|
|
+ <el-card shadow="always" style="margin-top: 15px;">
|
|
|
+ <div id="zztChar" style="height: 450px" />
|
|
|
+ </el-card>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import echarts from 'echarts'
|
|
|
+import CountTo from 'vue-count-to'
|
|
|
+import * as API_interaction from '@/api/ncs_interaction'
|
|
|
+import Storage from '@/utils/storage'
|
|
|
+export default {
|
|
|
+ name: 'Index',
|
|
|
+ components: { CountTo },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ sssparams: {
|
|
|
+ year: '',
|
|
|
+ month: '',
|
|
|
+ cycle_type: 'MONTH',
|
|
|
+ day: '',
|
|
|
+ seller_id: null
|
|
|
+ },
|
|
|
+ chart: null,
|
|
|
+ chartData: {},
|
|
|
+ shopId: -1,
|
|
|
+ shopInfo: {},
|
|
|
+ partTotal: {
|
|
|
+ lx: 6,
|
|
|
+ count: 0,
|
|
|
+ noCount: 0
|
|
|
+ },
|
|
|
+ tableData: [],
|
|
|
+ dataList: ['语音', '视频', '留言', '事件', '门禁', '紧急按钮'],
|
|
|
+ activeName: 'ALL',
|
|
|
+ userActionList: []
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.shopInfo = JSON.parse(Storage.getItem('calling_shop'))
|
|
|
+ if (this.shopInfo.shop_type !== '5') {
|
|
|
+ // this.getPartList()
|
|
|
+ this.shopId = -1
|
|
|
+ } else {
|
|
|
+ this.shopId = this.shopInfo.shop_id
|
|
|
+ // this.getMemberList()
|
|
|
+ }
|
|
|
+ this.sssparams.seller_id = this.shopId
|
|
|
+ // this.getLogCharsJS()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ getLogCharsJS() {
|
|
|
+ const _this = this
|
|
|
+ API_interaction.getLogChars(this.sssparams).then(res => {
|
|
|
+ if (_this.sssparams.type) {
|
|
|
+ _this.buildZztChart(res)
|
|
|
+ } else {
|
|
|
+ _this.partTotal.count = res.count
|
|
|
+ _this.partTotal.noCount = res.noCount
|
|
|
+ _this.buildTable(res.btList, res.noBtList)
|
|
|
+ _this.buildBtChart(res.btList, res.noBtList) // 饼图
|
|
|
+ _this.buildChart(res.dataList, res.tilStr, res.xAxis, 'chart', '时间段交互统计')
|
|
|
+ _this.buildChart(res.noDataList, res.noTilStr, res.xAxis, 'noChart', '未响应交互统计')
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ buildTable(btList, noBtList) {
|
|
|
+ this.tableData = []
|
|
|
+ this.dataList.forEach(item => {
|
|
|
+ let count = 0
|
|
|
+ let noCount = 0
|
|
|
+ const data = btList.find(p => p.name === item)
|
|
|
+ if (data) {
|
|
|
+ count = data.value
|
|
|
+ }
|
|
|
+ const noData = noBtList.find(p => p.name === item)
|
|
|
+ if (noData) {
|
|
|
+ noCount = noData.value
|
|
|
+ }
|
|
|
+ this.tableData.push({
|
|
|
+ name: item,
|
|
|
+ count: count,
|
|
|
+ noCount: noCount
|
|
|
+ })
|
|
|
+ })
|
|
|
+ },
|
|
|
+ buildChart(dataList, tilStr, xAxis, elementId, title) {
|
|
|
+ this.chart = this.$echarts.init(document.getElementById(elementId), 'vintage')
|
|
|
+ this.chart.clear()
|
|
|
+ const series = []
|
|
|
+ if (dataList.length > 0) {
|
|
|
+ dataList.forEach((item, index) => {
|
|
|
+ const d = {
|
|
|
+ name: tilStr[index],
|
|
|
+ type: 'line',
|
|
|
+ stack: '总量' + index,
|
|
|
+ data: item,
|
|
|
+ smooth: true,
|
|
|
+ emphasis: {
|
|
|
+ focus: 'series',
|
|
|
+ blurScope: 'coordinateSystem'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ series.push(d)
|
|
|
+ })
|
|
|
+ }
|
|
|
+ const options = {
|
|
|
+ title: {
|
|
|
+ text: title
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis'
|
|
|
+ },
|
|
|
+ // legend: {
|
|
|
+ // data: tilStr,
|
|
|
+ // left: 'center',
|
|
|
+ // top: 'bottom'
|
|
|
+ // },
|
|
|
+ legend: {
|
|
|
+ data: tilStr
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ left: '3%',
|
|
|
+ right: '4%',
|
|
|
+ bottom: '3%',
|
|
|
+ containLabel: true
|
|
|
+ },
|
|
|
+ toolbox: {
|
|
|
+ feature: {
|
|
|
+ saveAsImage: {}
|
|
|
+ }
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ type: 'category',
|
|
|
+ boundaryGap: false,
|
|
|
+ data: xAxis
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ type: 'value',
|
|
|
+ min: 0,
|
|
|
+ axisTick: {
|
|
|
+ show: false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ series: series
|
|
|
+ }
|
|
|
+ this.chart.setOption(options)
|
|
|
+ this.chart.resize()
|
|
|
+ },
|
|
|
+ buildBtChart(btList, noBtList) {
|
|
|
+ this.chart = this.$echarts.init(document.getElementById('btChart'), 'vintage')
|
|
|
+ this.chart.clear()
|
|
|
+ const options = {
|
|
|
+ title: {
|
|
|
+ text: '交互记录统计',
|
|
|
+ subtext: '数量统计',
|
|
|
+ left: 'center'
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'item',
|
|
|
+ formatter: '{a} <br/>{b} : {c} ({d}%)'
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ left: 'center',
|
|
|
+ top: 'bottom'
|
|
|
+ },
|
|
|
+ toolbox: {
|
|
|
+ show: true,
|
|
|
+ feature: {
|
|
|
+ mark: { show: true },
|
|
|
+ dataView: { show: true, readOnly: false },
|
|
|
+ restore: { show: true },
|
|
|
+ saveAsImage: { show: true }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: '交互记录',
|
|
|
+ type: 'pie',
|
|
|
+ radius: [20, 140],
|
|
|
+ center: ['25%', '50%'],
|
|
|
+ roseType: 'radius',
|
|
|
+ itemStyle: {
|
|
|
+ borderRadius: 5
|
|
|
+ },
|
|
|
+ emphasis: {
|
|
|
+ label: {
|
|
|
+ show: true
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data: btList
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '未响应交互',
|
|
|
+ type: 'pie',
|
|
|
+ radius: [20, 140],
|
|
|
+ center: ['75%', '50%'],
|
|
|
+ roseType: 'area',
|
|
|
+ itemStyle: {
|
|
|
+ borderRadius: 5
|
|
|
+ },
|
|
|
+ data: noBtList
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ this.chart.setOption(options)
|
|
|
+ this.chart.resize()
|
|
|
+ },
|
|
|
+ buildZztChart(res) {
|
|
|
+ this.chart = this.$echarts.init(document.getElementById('zztChar'), 'vintage')
|
|
|
+ this.chart.clear()
|
|
|
+ const mySeries = [
|
|
|
+ {
|
|
|
+ name: '交互记录',
|
|
|
+ type: 'bar',
|
|
|
+ emphasis: {
|
|
|
+ focus: 'series'
|
|
|
+ },
|
|
|
+ data: res.zztDate
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '已响应交互',
|
|
|
+ type: 'bar',
|
|
|
+ stack: 'Ad',
|
|
|
+ barWidth: 5,
|
|
|
+ emphasis: {
|
|
|
+ focus: 'series'
|
|
|
+ },
|
|
|
+ data: res.hasZztDate
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '未响应交互',
|
|
|
+ type: 'bar',
|
|
|
+ stack: 'Ad',
|
|
|
+ barWidth: 5,
|
|
|
+ emphasis: {
|
|
|
+ focus: 'series'
|
|
|
+ },
|
|
|
+ data: res.noZztDate
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ if (res.errorDate) {
|
|
|
+ mySeries.push({
|
|
|
+ name: '未正常挂断交互',
|
|
|
+ type: 'bar',
|
|
|
+ stack: 'Ad',
|
|
|
+ barWidth: 5,
|
|
|
+ emphasis: {
|
|
|
+ focus: 'series'
|
|
|
+ },
|
|
|
+ data: res.errorDate
|
|
|
+ })
|
|
|
+ }
|
|
|
+ console.log(mySeries)
|
|
|
+ const options = {
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis',
|
|
|
+ axisPointer: {
|
|
|
+ type: 'shadow'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ legend: {},
|
|
|
+ grid: {
|
|
|
+ left: '3%',
|
|
|
+ right: '4%',
|
|
|
+ bottom: '3%',
|
|
|
+ containLabel: true
|
|
|
+ },
|
|
|
+ xAxis: [
|
|
|
+ {
|
|
|
+ type: 'category',
|
|
|
+ data: res.xAxis
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ yAxis: [
|
|
|
+ {
|
|
|
+ type: 'value'
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ series: mySeries
|
|
|
+ }
|
|
|
+ this.chart.setOption(options)
|
|
|
+ this.chart.resize()
|
|
|
+ },
|
|
|
+ /** 年月份发生变化 */
|
|
|
+ handleYearMonthChanged(object) {
|
|
|
+ console.log(object)
|
|
|
+ if (object.type === 'DATE') {
|
|
|
+ this.sssparams.cycle_type = object.type
|
|
|
+ this.sssparams.year = object.date_val.getFullYear()
|
|
|
+ this.sssparams.month = this.checkTime(object.date_val.getMonth() + 1)
|
|
|
+ this.sssparams.day = this.checkTime(object.date_val.getDate())
|
|
|
+ } else {
|
|
|
+ this.sssparams.year = object.year
|
|
|
+ this.sssparams.month = object.month
|
|
|
+ this.sssparams.cycle_type = object.type
|
|
|
+ }
|
|
|
+ this.getLogCharsJS()
|
|
|
+ if (this.activeName !== 'ALL') {
|
|
|
+ this.Api_getLogTable()
|
|
|
+ }
|
|
|
+ // this.getTableByParentIdJS()
|
|
|
+ },
|
|
|
+ // 时间处理,如果时间小于10 ，则再前面加一个'0'
|
|
|
+ checkTime(i) {
|
|
|
+ if (i < 10) {
|
|
|
+ i = '0' + i
|
|
|
+ }
|
|
|
+ return i
|
|
|
+ },
|
|
|
+ formatterType(param) {
|
|
|
+ switch (param) {
|
|
|
+ case 'VOICE':
|
|
|
+ return '语音'
|
|
|
+ case 'VIDEO':
|
|
|
+ return '视频'
|
|
|
+ case 'IM':
|
|
|
+ return '留言'
|
|
|
+ case 'EVENT':
|
|
|
+ return '事件'
|
|
|
+ case 'ENTRACEGUARD':
|
|
|
+ return '门禁'
|
|
|
+ case 'SOS':
|
|
|
+ return '紧急按钮'
|
|
|
+ default:
|
|
|
+ return '未知'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ handleClick(tab, event) {
|
|
|
+ console.log('this.activeName==', this.activeName)
|
|
|
+ if (this.activeName === 'ALL') {
|
|
|
+ delete this.sssparams.type
|
|
|
+ } else {
|
|
|
+ this.sssparams.type = this.activeName
|
|
|
+ this.Api_getLogTable()
|
|
|
+ }
|
|
|
+ this.getLogCharsJS()
|
|
|
+ },
|
|
|
+ Api_getLogTable() {
|
|
|
+ const _this = this
|
|
|
+ API_interaction.getLogTable(this.sssparams).then(res => {
|
|
|
+ console.log(res)
|
|
|
+ _this.buildChart(res.dataList, res.tilStr, res.xAxis, 'actionChar', '详情')
|
|
|
+ _this.userActionList = res.countList
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style type="text/scss" lang="scss" scoped>
|
|
|
+.container .el-card {
|
|
|
+ .title {
|
|
|
+ margin-bottom:20px;
|
|
|
+ line-height: 30px;
|
|
|
+ }
|
|
|
+ .header_title {
|
|
|
+ color: #F1F1F3;
|
|
|
+ text-size: 2em;
|
|
|
+ }
|
|
|
+ .header_action {
|
|
|
+ color: #F1F1F3;
|
|
|
+ float:right;
|
|
|
+ padding:0 5px;
|
|
|
+ }
|
|
|
+}
|
|
|
+.card-panel-col {
|
|
|
+ margin-bottom: 32px;
|
|
|
+}
|
|
|
+
|
|
|
+.card-panel {
|
|
|
+ height: 108px;
|
|
|
+ font-size: 12px;
|
|
|
+ position: relative;
|
|
|
+ border-radius: 4px;
|
|
|
+ overflow: hidden;
|
|
|
+ /*color: #F1F1F3;*/
|
|
|
+ /*background: #0f202b;*/
|
|
|
+ border: solid 1px #41469f;
|
|
|
+ box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
|
|
|
+ border-color: #41469F;
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ .card-panel-icon-wrapper {
|
|
|
+ color: #666;
|
|
|
+ }
|
|
|
+ .icon-people {
|
|
|
+ background: #40c9c6;
|
|
|
+ }
|
|
|
+ .icon-message {
|
|
|
+ background: #36a3f7;
|
|
|
+ }
|
|
|
+ .icon-money {
|
|
|
+ background: #f4516c;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .icon-people {
|
|
|
+ color: #40c9c6;
|
|
|
+ }
|
|
|
+ .icon-message {
|
|
|
+ color: #36a3f7;
|
|
|
+ }
|
|
|
+ .icon-money {
|
|
|
+ color: #f4516c;
|
|
|
+ }
|
|
|
+ .card-panel-icon-wrapper {
|
|
|
+ float: left;
|
|
|
+ margin: 14px 0 0 14px;
|
|
|
+ padding: 16px;
|
|
|
+ transition: all 0.38s ease-out;
|
|
|
+ border-radius: 6px;
|
|
|
+ }
|
|
|
+ .card-panel-icon {
|
|
|
+ float: left;
|
|
|
+ font-size: 48px;
|
|
|
+ }
|
|
|
+ .card-panel-description {
|
|
|
+ float: right;
|
|
|
+ font-weight: bold;
|
|
|
+ margin: 26px;
|
|
|
+ margin-left: 0px;
|
|
|
+ .card-panel-text {
|
|
|
+ line-height: 18px;
|
|
|
+ /*color: #fff;*/
|
|
|
+ font-size: 16px;
|
|
|
+ margin-bottom: 12px;
|
|
|
+ }
|
|
|
+ .card-panel-num {
|
|
|
+ font-size: 20px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
wennn