增加交互统计功能

package-lock.json

@@ -2952,8 +2952,8 @@
     },
     "async-validator": {
       "version": "1.8.5",
-      "resolved": "https://registry.npmjs.org/async-validator/-/async-validator-1.8.5.tgz",
-      "integrity": "sha512-tXBM+1m056MAX0E8TL2iCjg8WvSyXu0Zc8LNtYqrVeyoL3+esHRZ4SieE9fKQyyU09uONjnMEjrNBMqT0mbvmA==",
+      "resolved": "https://registry.npmmirror.com/async-validator/download/async-validator-1.8.5.tgz?cache=0&sync_timestamp=1634529574100&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2Fasync-validator%2Fdownload%2Fasync-validator-1.8.5.tgz",
+      "integrity": "sha1-3D4I7B/Q3dtn5ghC8CwM0c7G1/A=",
       "requires": {
         "babel-runtime": "6.x"
       }
@@ -3118,8 +3118,8 @@
     },
     "babel-helper-vue-jsx-merge-props": {
       "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/babel-helper-vue-jsx-merge-props/-/babel-helper-vue-jsx-merge-props-2.0.3.tgz",
-      "integrity": "sha512-gsLiKK7Qrb7zYJNgiXKpXblxbV5ffSwR0f5whkPAaBAR4fhi6bwRZxX9wBlIc5M/v8CCkXUbXZL4N/nSE97cqg=="
+      "resolved": "https://registry.nlark.com/babel-helper-vue-jsx-merge-props/download/babel-helper-vue-jsx-merge-props-2.0.3.tgz",
+      "integrity": "sha1-Iq69OzOQIyjlEyk6jkmSs4T58bY="
     },
     "babel-jest": {
       "version": "23.6.0",
@@ -5182,7 +5182,8 @@
     "console-control-strings": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/console-control-strings/-/console-control-strings-1.1.0.tgz",
-      "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4="
+      "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=",
+      "optional": true
     },
     "consolidate": {
       "version": "0.15.1",
@@ -6355,11 +6356,19 @@
       }
     },
     "echarts": {
-      "version": "4.2.1",
-      "resolved": "https://registry.npmjs.org/echarts/-/echarts-4.2.1.tgz",
-      "integrity": "sha512-pw4xScRPsLegD/cqEcoXRKeA2SD4+s+Kyo0Na166NamOWhzNl2yI5RZ2rE97tBlAopNmhyMeBVpAeD5qb+ee1A==",
+      "version": "5.2.2",
+      "resolved": "https://registry.npmmirror.com/echarts/download/echarts-5.2.2.tgz",
+      "integrity": "sha1-7DyLKhUcu6cbo8LHz5svIEfOQ3A=",
       "requires": {
-        "zrender": "4.0.7"
+        "tslib": "2.3.0",
+        "zrender": "5.2.1"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "2.3.0",
+          "resolved": "https://registry.nlark.com/tslib/download/tslib-2.3.0.tgz?cache=0&sync_timestamp=1628722556410&other_urls=https%3A%2F%2Fregistry.nlark.com%2Ftslib%2Fdownload%2Ftslib-2.3.0.tgz",
+          "integrity": "sha1-gDuM2rPhK6WBpMpByIObuw2ssJ4="
+        }
       }
     },
     "editorconfig": {
@@ -6423,9 +6432,9 @@
       "dev": true
     },
     "element-ui": {
-      "version": "2.13.2",
-      "resolved": "https://registry.npmjs.org/element-ui/-/element-ui-2.13.2.tgz",
-      "integrity": "sha512-r761DRPssMPKDiJZWFlG+4e4vr0cRG/atKr3Eqr8Xi0tQMNbtmYU1QXvFnKiFPFFGkgJ6zS6ASkG+sellcoHlQ==",
+      "version": "2.15.6",
+      "resolved": "https://registry.npmmirror.com/element-ui/download/element-ui-2.15.6.tgz?cache=0&sync_timestamp=1637231763572&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2Felement-ui%2Fdownload%2Felement-ui-2.15.6.tgz",
+      "integrity": "sha1-yWCa3TWvWmhqS3aF3B11fHXgHfM=",
       "requires": {
         "async-validator": "~1.8.1",
         "babel-helper-vue-jsx-merge-props": "^2.0.0",
@@ -7753,7 +7762,8 @@
         "ansi-regex": {
           "version": "2.1.1",
           "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz",
-          "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8="
+          "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=",
+          "optional": true
         },
         "is-fullwidth-code-point": {
           "version": "1.0.0",
@@ -7779,6 +7789,7 @@
           "version": "3.0.1",
           "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
           "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=",
+          "optional": true,
           "requires": {
             "ansi-regex": "^2.0.0"
           }
@@ -11988,7 +11999,7 @@
     },
     "normalize-wheel": {
       "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/normalize-wheel/-/normalize-wheel-1.0.1.tgz",
+      "resolved": "https://registry.npm.taobao.org/normalize-wheel/download/normalize-wheel-1.0.1.tgz",
       "integrity": "sha1-rsiGr/2wRQcNhWRH32Ls+GFG7EU="
     },
     "normalize.css": {
@@ -12008,7 +12019,8 @@
     "npm-normalize-package-bin": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/npm-normalize-package-bin/-/npm-normalize-package-bin-1.0.1.tgz",
-      "integrity": "sha512-EPfafl6JL5/rU+ot6P3gRSCpPDW5VmIzX959Ob1+ySFUuuYHWHekXpwdUZcKP5C+DS4GEtdJluwBjnsNDl+fSA=="
+      "integrity": "sha512-EPfafl6JL5/rU+ot6P3gRSCpPDW5VmIzX959Ob1+ySFUuuYHWHekXpwdUZcKP5C+DS4GEtdJluwBjnsNDl+fSA==",
+      "optional": true
     },
     "npm-packlist": {
       "version": "1.4.8",
@@ -12768,7 +12780,8 @@
       "version": "2.2.2",
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.2.2.tgz",
       "integrity": "sha512-q0M/9eZHzmr0AulXyPwNfZjtwZ/RBZlbN3K3CErVrk50T2ASYI7Bye0EvekFY3IP1Nt2DHu0re+V2ZHIpMkuWg==",
-      "dev": true
+      "dev": true,
+      "optional": true
     },
     "pify": {
       "version": "4.0.1",
@@ -13908,7 +13921,7 @@
       "version": "git+https://github.com/nhn/raphael.git#78a6ed3ec269f33b6457b0ec66f8c3d1f2ed70e0",
       "from": "git+https://github.com/nhn/raphael.git#2.2.0-c",
       "requires": {
-        "eve": "git://github.com/adobe-webplatform/eve.git#eef80ed8d188423c2272746fb8ae5cc8dad84cb1"
+        "eve": "git://github.com/adobe-webplatform/eve.git#eef80ed"
       }
     },
     "raw-body": {
@@ -16130,6 +16143,7 @@
           "version": "2.9.0",
           "resolved": "https://registry.npmjs.org/minipass/-/minipass-2.9.0.tgz",
           "integrity": "sha512-wxfUjg9WebH+CUDX/CdbRlh5SmfZiy/hpkxaRI16Y9W56Pa75sWgd/rvFilSgrauD9NyFymP/+JFV3KwzIsJeg==",
+          "optional": true,
           "requires": {
             "safe-buffer": "^5.1.2",
             "yallist": "^3.0.0"
@@ -16253,8 +16267,8 @@
     },
     "throttle-debounce": {
       "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/throttle-debounce/-/throttle-debounce-1.1.0.tgz",
-      "integrity": "sha512-XH8UiPCQcWNuk2LYePibW/4qL97+ZQ1AN3FNXwZRBNPPowo/NRU5fAlDCSNBJIYCKbioZfuYtMhG4quqoJhVzg=="
+      "resolved": "https://registry.npm.taobao.org/throttle-debounce/download/throttle-debounce-1.1.0.tgz?cache=0&sync_timestamp=1604313832516&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fthrottle-debounce%2Fdownload%2Fthrottle-debounce-1.1.0.tgz",
+      "integrity": "sha1-UYU9o3vmihVctugns1FKPEIuic0="
     },
     "through": {
       "version": "2.3.8",
@@ -16508,7 +16522,7 @@
       "integrity": "sha512-DUJIutBG/tOdvJnGCo1PcBhFyGBWsY8VIMdXe3WRtGXynMwOcC5cojYpULf3qFJ4Jj1Riv3/kbF6Ygmi+BpjCw==",
       "requires": {
         "core-js": "^3.6.4",
-        "raphael": "git+https://github.com/nhn/raphael.git#78a6ed3ec269f33b6457b0ec66f8c3d1f2ed70e0",
+        "raphael": "git+https://github.com/nhn/raphael.git#2.2.0-c",
         "tui-code-snippet": "^2.3.1"
       },
       "dependencies": {
@@ -17010,8 +17024,8 @@
     },
     "vue-count-to": {
       "version": "1.0.13",
-      "resolved": "https://registry.npmjs.org/vue-count-to/-/vue-count-to-1.0.13.tgz",
-      "integrity": "sha512-6R4OVBVNtQTlcbXu6SJ8ENR35M2/CdWt3Jmv57jOUM+1ojiFmjVGvZPH8DfHpMDSA+ITs+EW5V6qthADxeyYOQ=="
+      "resolved": "https://registry.npm.taobao.org/vue-count-to/download/vue-count-to-1.0.13.tgz",
+      "integrity": "sha1-PnVz6m5kwrKXL2TgoqsuI8dZD/M="
     },
     "vue-draggable-resizable": {
       "version": "2.3.0",
@@ -17065,6 +17079,11 @@
       "integrity": "sha512-BXq3jwIagosjgNVae6tkHzzIk6a8MHFtzAdwhnV5VlvPTFxDCvIttgSiHWjdGoTJvXtmRu5HacExfdarRcFhog==",
       "dev": true
     },
+    "vue-i18n": {
+      "version": "8.26.7",
+      "resolved": "https://registry.npmmirror.com/vue-i18n/download/vue-i18n-8.26.7.tgz?cache=0&sync_timestamp=1637037936570&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2Fvue-i18n%2Fdownload%2Fvue-i18n-8.26.7.tgz",
+      "integrity": "sha1-rf1INzRJ/jFDjEjjs71DBE3DpoE="
+    },
     "vue-jest": {
       "version": "3.0.7",
       "resolved": "https://registry.npmjs.org/vue-jest/-/vue-jest-3.0.7.tgz",
@@ -18208,9 +18227,19 @@
       }
     },
     "zrender": {
-      "version": "4.0.7",
-      "resolved": "https://registry.npmjs.org/zrender/-/zrender-4.0.7.tgz",
-      "integrity": "sha512-TNloHe0ums6zxbHfnaCryM61J4IWDajZwNq6dHk9vfWhhysO/OeFvvR0drBs/nbXha2YxSzfQj2FiCd6RVBe+Q=="
+      "version": "5.2.1",
+      "resolved": "https://registry.nlark.com/zrender/download/zrender-5.2.1.tgz",
+      "integrity": "sha1-X0u9qRW6bUErCxncJDG+qtBUF7s=",
+      "requires": {
+        "tslib": "2.3.0"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "2.3.0",
+          "resolved": "https://registry.nlark.com/tslib/download/tslib-2.3.0.tgz?cache=0&sync_timestamp=1628722556410&other_urls=https%3A%2F%2Fregistry.nlark.com%2Ftslib%2Fdownload%2Ftslib-2.3.0.tgz",
+          "integrity": "sha1-gDuM2rPhK6WBpMpByIObuw2ssJ4="
+        }
+      }
     }
   }
 }

package.json

@@ -24,8 +24,8 @@
     "core-js": "3.6.5",
     "driver.js": "0.9.5",
     "dropzone": "5.5.1",
-    "echarts": "4.2.1",
-    "element-ui": "2.13.2",
+    "echarts": "^5.2.2",
+    "element-ui": "^2.15.6",
     "file-saver": "2.0.1",
     "fuse.js": "3.4.4",
     "js-cookie": "2.2.0",
@@ -45,7 +45,7 @@
     "vcolorpicker": "^1.0.3",
     "vue": "2.6.10",
     "vue-class-component": "^7.2.6",
-    "vue-count-to": "1.0.13",
+    "vue-count-to": "^1.0.13",
     "vue-draggable-resizable": "^2.3.0",
     "vue-i18n": "^8.26.1",
     "vue-property-decorator": "^9.1.2",

src/api/ncs_interaction.js

@@ -27,3 +27,23 @@ export function clearRecord(id) {
   })
 }
 
+export function getLogChars(params) {
+  console.log(params)
+  return request({
+    url: `/ncs/interaction/getLogChars`,
+    method: 'GET',
+    loading: true,
+    params
+  })
+}
+
+export function getLogTable(params) {
+  console.log(params)
+  return request({
+    url: `/ncs/interaction/getLogTable`,
+    method: 'GET',
+    loading: true,
+    params
+  })
+}
+

src/components/YearMonthPicker/index.js

@@ -0,0 +1,14 @@
+/**
+ * 选择年份或者月份选择
+ * 返回选择的年份或者月份
+ * 返回选择的年份区间或月份区间
+ */
+
+import Vue from 'vue'
+import YearMonthPicker from './src/main'
+
+YearMonthPicker.install = () => {
+  Vue.component(YearMonthPicker.name, YearMonthPicker)
+}
+
+export default YearMonthPicker

src/components/YearMonthPicker/src/main.vue

@@ -0,0 +1,139 @@
+<template>
+  <div style="display: inline-block">
+    <el-select v-if="optional" v-model="date_type" :disabled="disabled" placeholder="请选择" style="width: 100px">
+      <el-option label="按月" value="month" />
+      <el-option label="按年" value="year" />
+      <el-option v-if="boolDay" label="按天" value="date" />
+    </el-select>
+    <el-date-picker
+      v-model="date_val"
+      style="width: 160px"
+      :disabled="disabled"
+      :editable="editable"
+      :clearable="clearable"
+      :type="date_type"
+      :value-format="date_type === 'year' ? 'yyyy' : date_type === 'month' ? 'yyyy-MM' : 'yyyy-MM-dd'"
+      :placeholder="date_type === 'month' ? '选择月份' : '选择年份'"
+      :picker-options="{disabledDate(time) { return time.getTime() > Date.now() }}"
+      @change="handleDateChange" />
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'EnYearMonthPicker',
+    props: {
+      editable: {
+        type: Boolean,
+        default: false
+      },
+      clearable: {
+        type: Boolean,
+        default: false
+      },
+      optional: {
+        type: Boolean,
+        default: true
+      },
+      disabled: {
+        type: Boolean,
+        default: false
+      },
+      boolDay: {
+        type: Boolean,
+        default: false
+      }
+    },
+    data() {
+      return {
+        date_type: 'month',
+        date_val: this.getCurrentYearMonth().o,
+        l_date_val: this.getCurrentYearMonth().l_o
+      }
+    },
+    watch: {
+      date_type(newVal) {
+        // this.date_val = newVal === 'month'
+        //   ? this.getCurrentYearMonth().o
+        //   : this.getCurrentYear().o
+        // this.l_date_val = newVal === 'month'
+        //   ? this.getCurrentYearMonth().l_o
+        //   : this.getCurrentYear().l_o
+
+        this.date_val = newVal === 'year'
+          ? this.getCurrentYear().o
+          : newVal === 'month' ? this.getCurrentYearMonth().o : new Date()
+        this.l_date_val = newVal === 'year'
+          ? this.getCurrentYear().l_o
+          : newVal === 'month' ? this.getCurrentYearMonth().l_o : new Date()
+        this.handleDateChange()
+      }
+    },
+    mounted() {
+      this.handleDateChange()
+    },
+    methods: {
+      /** 获取当前年份 */
+      getCurrentYear() {
+        return {
+          o: new Date().getFullYear() + '',
+          l_o: new Date().getFullYear() - 1 + ''
+        }
+      },
+      /** 获取当前年月 */
+      getCurrentYearMonth() {
+        const _cy = new Date().getFullYear() + ''
+        const _l_cy = new Date().getFullYear() - 1 + ''
+        const _cm = (() => {
+          let __cm = new Date().getMonth() + 1
+          return __cm > 9 ? __cm : '0' + __cm
+        })()
+        const _l_cm = (() => {
+          let __cm = new Date().getMonth()
+          return __cm > 9 ? __cm : '0' + __cm
+        })()
+        return {
+          o: _cy + '-' + _cm,
+          l_o: _l_cy + '-' + _l_cm
+        }
+      },
+      /** 日期发生改变 */
+      handleDateChange() {
+        let obj
+        if (this.date_type === 'date') {
+          obj = {
+            type: this.date_type.toLocaleUpperCase(),
+            date_val: new Date(this.date_val)
+          }
+        } else {
+          const is_year = this.date_type === 'year'
+          const val = this.date_val
+          const l_val = this.l_date_val
+          const _y = val.substr(0, 4)
+          const l_y = l_val.substr(0, 4)
+          const _m = val.substr(5, 2)
+          const l_m = l_val.substr(5, 2)
+          obj = {
+            type: this.date_type.toLocaleUpperCase(),
+            year: _y,
+            last_year: l_y,
+            month: _m,
+            last_month: l_m,
+            year_month: val,
+            last_year_month: l_val,
+            start_time: val + (is_year ? '-01' : '') + '-01 00:00:00',
+            last_start_time: l_val + (is_year ? '-01' : '') + '-01 00:00:00',
+            end_time: val + (is_year ? '-12' : '') + '-' + new Date(_y, _m, 0).getDate() + ' 23:59:59',
+            last_end_time: l_val + (is_year ? '-12' : '') + '-' + new Date(l_y, l_m, 0).getDate() + ' 23:59:59'
+          }
+        }
+
+        this.$emit('changed', obj)
+      }
+    }
+  }
+</script>
+
+<style type="text/scss" lang="scss" scoped>
+
+</style>

src/components/index.js

@@ -2,11 +2,13 @@
 import TableLayout from './TableLayout'
 import TableSearch from './TableSearch'
 import AgGridLayout from './AgGridLayout'
+import YearMonthPicker from './YearMonthPicker'
 
 const components = {
   TableLayout,
   TableSearch,
-  AgGridLayout
+  AgGridLayout,
+  YearMonthPicker
 }
 
 components.install = function(Vue, opts) {

src/main.js

@@ -43,6 +43,11 @@ if (process.env.NODE_ENV === 'production') {
   const { mockXHR } = require('../mock')
   mockXHR()
 }
+// 全局注册echarts、jsonp
+import * as echarts from 'echarts'
+import 'echarts/theme/vintage.js'
+
+Vue.prototype.$echarts = echarts
 Vue.component('AgGridVue', AgGridVue)
 Vue.use(vcolorpicker)
 Vue.use(Components)

src/router/index.js

@@ -364,6 +364,19 @@ export const partRoutes = [
   //   ]
   // },
   {
+    path: '/ncs-interaction-chars',
+    component: Layout,
+    redirect: '/ncs-interaction-chars/index',
+    children: [
+      {
+        path: 'index',
+        component: () => import('@/views/ncs-chars/index'),
+        name: 'interactionChars',
+        meta: { title: '交互统计', icon: 'el-icon-pie-chart', noCache: true }
+      }
+    ]
+  },
+  {
     path: '/calling-setting',
     component: Layout,
     redirect: '/calling-setting/index',

src/views/ncs-chars/index.vue

@@ -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>