优化交互统计

src/views/ncs-chars/index.vue

@@ -6,7 +6,7 @@
         <el-option label="客户与员工" :value="1" />
         <el-option label="同事与同事" :value="2" />
       </el-select>
-      <span>
+      <span style="margin-left: 10px;">
         <span>查询周期：</span>
         <en-year-month-picker :bool-day="true" @changed="handleYearMonthChanged" />
       </span>
@@ -101,23 +101,42 @@
       </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>
+      <el-tabs v-model="activeName2" type="border-card" @tab-click="handleClick2">
+        <el-tab-pane name="user">
+          <span slot="label"><i class="el-icon-s-custom" /> 用户交互统计</span>
+        </el-tab-pane>
+        <el-tab-pane name="clerk">
+          <span slot="label"><i class="el-icon-user" /> 员工交互统计</span>
+        </el-tab-pane>
+      </el-tabs>
+      <div style="padding: 10px;margin: 10px;">
+        <div class="table-wrapper">
+          <el-table :data="userActionList" stripe border :default-sort = "{prop: 'num', order: 'descending'}" 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="num" label="交互次数" min-width="130" align="center" sortable />
+            <el-table-column prop="error_num" label="未完成次数" min-width="130" align="center" sortable />
+            <el-table-column prop="avg_num" label="平均响应时间" min-width="130" align="center" sortable >
+              <template slot-scope="scope">
+                <span>{{ formateSeconds(scope.row.avg_num) }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column prop="min_num" label="最小响应时间" min-width="130" align="center" sortable >
+              <template slot-scope="scope">
+                <span>{{ formateSeconds(scope.row.min_num) }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column prop="max_num" label="最大响应时间" min-width="130" align="center" sortable >
+              <template slot-scope="scope">
+                <span>{{ formateSeconds(scope.row.max_num) }}</span>
+              </template>
+            </el-table-column>
+          </el-table>
+        </div>
+      </div>
     </div>
 
   </div>
@@ -139,7 +158,8 @@ export default {
         cycle_type: 'MONTH',
         day: '',
         seller_id: null,
-        fromToType: 0
+        fromToType: 0,
+        lookType: 0
       },
       chart: null,
       chartData: {},
@@ -153,7 +173,8 @@ export default {
       tableData: [],
       dataList: ['语音', '视频', '留言', '事件', '门禁', '紧急按钮'],
       activeName: 'ALL',
-      userActionList: []
+      userActionList: [],
+      activeName2: 'user'
     }
   },
   mounted() {
@@ -456,13 +477,46 @@ export default {
       }
       this.getLogCharsJS()
     },
+    handleClick2() {
+      if (this.activeName2 === 'user') {
+        this.sssparams.lookType = 0
+      } else {
+        this.sssparams.lookType = 1
+      }
+      this.Api_getLogTable()
+    },
     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
+        // _this.buildChart(res.dataList, res.tilStr, res.xAxis, 'actionChar', '详情')
+        _this.userActionList = res.interactionChars
       })
+    },
+    //将秒转化为时分秒
+    formateSeconds(endTime){
+      if (endTime === 0) {
+        return '1秒内'
+      } else if (endTime === -1) {
+        return '无'
+      }
+      let secondTime = endTime//将传入的秒的值转化为Number
+      let min = 0// 初始化分
+      let h =0// 初始化小时
+      let result=''
+      if(secondTime>60){//如果秒数大于60，将秒数转换成整数
+        min=parseInt(secondTime/60)//获取分钟，除以60取整数，得到整数分钟
+        secondTime=parseInt(secondTime%60)//获取秒数，秒数取佘，得到整数秒数
+        if(min>60){//如果分钟大于60，将分钟转换成小时
+          h=parseInt(min/60)//获取小时，获取分钟除以60，得到整数小时
+          min=parseInt(min%60) //获取小时后取佘的分，获取分钟除以60取佘的分
+          return h + '时' + min + '分' + secondTime + '秒'
+        } else {
+          return min +'分' + secondTime + '秒'
+        }
+      } else {
+        return secondTime + '秒'
+      }
     }
   }
 

src/views/ncs-task/index.vue

@@ -252,9 +252,9 @@ export default {
     },
     handlerAdd: function() {
       this.formmodel = {}
-      if (this.$refs.editform) {
-        this.$refs.editform.resetFields()
-      }
+      // if (this.$refs.editform) {
+      //   this.$refs.editform.resetFields()
+      // }
       this.task_success = false
       this.editflag = 0
       this.formshow = true