meishanshiwu/src/views/currentSystem/waterHotline/statisticalReport/callLogStatistics.vue

<template>
  <!--通话记录统计  -->
  <div class="callLogStatistics">
    <div class="filteroption">
      <el-row class="search_box" type="flex" :gutter="10" justify="space-between">
        <el-col :span="16" class="searchs">
          <el-date-picker
            v-model="statisticvalue1"
            size="small"
            clearable
            type="date"
            placeholder="开始日期"
            value-format="yyyy-MM-dd"
          />
          &nbsp;至&nbsp;
          <el-date-picker
            v-model="statisticvalue2"
            size="small"
            clearable
            type="date"
            placeholder="结束日期"
            value-format="yyyy-MM-dd"
          />
              &nbsp;&nbsp;
          <el-button
            type="primary"
            size="small"
            @click="searchBtn"
          >查询</el-button>
        </el-col>
        <el-col :span="8" style="text-align:end;">
          <el-button
            type="primary"
            size="small"
            :disabled="multipleSelection.length!==1"
            @click="start"
          >播放</el-button>
          <el-button
            type="primary"
            size="small"
            :disabled="multipleSelection.length!==1"
            @click="dowmMP3"
          >下载</el-button>
        </el-col>
      </el-row>
    </div>
    <div class="tableheight">
      <table-item
        :id="'pdfDom'"
        :table-data="statisData"
        :column="statisColumn"
        :pagination="true"
        :pagesize="pagination.size"
        :currentpage="pagination.current"
        :total="pagination.total"
        :for-id="true"
        :border="true"
        :multiple="true"
        :fixed="true"
        :isdelete="false"
        class="tableFont"
        @handleCurrentChange="handleCurrentChange"
        @handleSizeChange="handleSizeChange"
        @handleSelectionChange="handleSelectionChange"
      />
    </div>
    <el-dialog title="录音播放" :visible.sync="dialogVisible" width="20%" :before-close="pause">
      <template>
        <center>
          <audio
            ref="audio"
            :src="audioSrc"
            autoplay="autoplay"
            controls="controls"
          >Your browser does not support the audio element.</audio>
        </center>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import TableItem from '@/components/TableAuto'
import { IP } from '@/utils/request'
// import MergeModal from './particular_merge'
import { client } from '@/utils/index'
import { getCallRecord } from '@/api/hotline'
import { parseTime } from '@/utils/index'
import { getFileAudio2 } from '@/api/xjWorkSiteCheckApi'
export default {
  components: { TableItem },
  data() {
    const end = new Date()
    const start = new Date()
    start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
    return {
      dialogVisible: false,
      audioSrc: '',
      dialogGDVisible: false,
      activeName: '1',
      actives: [],
      activeNum: [],
      gdEditRow: {},
      // 统计页面
      Bm: '',
      user: '',
      departmentList: [],
      UserList: [],
      statisticvalue1: parseTime(start, '{y}-{m}-{d}'),
      statisticvalue2: parseTime(end, '{y}-{m}-{d}'),
      statisData: [], // 统计数据
      searchDate: {
        start: '',
        end: ''
      },
      // 列表项
      Bm2: '',
      user2: '',
      departmentList2: [],
      UserList2: [],
      stateList: [{
        id: '',
        name: '全部'
      }, {
        id: '0',
        name: '已质检'
      }, {
        id: '1',
        name: '未质检'
      }],
      statisColumn: [
        {
          label: '员工',
          prop: 'empName'
        }, {
          label: '呼叫类型',
          prop: 'callTypeName'
        },
        {
          label: '服务类型',
          prop: 'callReasultName'
        },
        {
          label: '用户号码',
          prop: 'telephone'
        },
        {
          label: '系统号码',
          prop: 'sysphone'
        },
        {
          label: '分机号码',
          prop: 'rate'
        },
        {
          label: '呼叫时间',
          prop: 'callTime'
        },
        {
          label: '接通时间',
          prop: 'connectTime'
        },
        {
          label: '话后处理时间',
          prop: 'rate'
        },
        {
          label: '挂机时间',
          prop: 'hangupTime'
        },
        {
          label: '呼叫结果',
          prop: 'causeValue'
        },
        {
          label: '转坐席结果',
          prop: 'rate'
        }
      ],
      pagination: { current: 1, size: 20, total: 0 },
      // 详细页面
      showStatistic: true,
      gdlx: '',
      gzxq: '',
      date: [],
      client: client().height,
      value1: parseTime(start, '{y}-{m}-{d}'),
      value2: parseTime(end, '{y}-{m}-{d}'),
      workOrderType: [],
      malfunction: [],
      isState: '',
      // 总页数
      total: 0,
      // 数据列表加载等待
      listLoading: true,
      // 选中内容
      multipleSelection: [],
      // 模态框标题
      dialogTitle: '',
      // 添加数据初始化
      editData: {},
      // 删除模态框标杆
      dialogDelete: false,
      // 查看 修改按钮标杆
      disabledBtn: true,
      width: '1200px',
      sfQxList: { '0': '清晰', '1': '不清晰' },
      sfCbzList: { '0': '有错别字', '1': '无错别字' },
      sfSlsxList: { '0': '超过', '1': '未超过' }
    }
  },
  computed: {
    mapHeight() {
      return '500px'
    },
  },
  watch: {
    multipleSelection(value) {
      this.disabledBtn = this.multipleSelection.length !== 1
    }
  },
  created() {
    this.getStaticInfo()
    // this.fetchData();
    // getDepartment().then(res => {
    //   if (res.code === 1) {
    //     this.departmentList = res.result
    //     this.departmentList2 = res.result
    //   }
    // })
    // getGdgltypeTree().then(res => {
    //   if (res.code === 1) {
    //     this.workOrderType = res.result
    //   }
    // })
  },
  methods: {
    // 获取当前页
    handleCurrentChange(currentPage) {
      this.pagination.current = currentPage
      this.getStaticInfo()
    },
    // 每页多少条
    handleSizeChange(pagesize) {
      this.pagination.size = pagesize
      this.getStaticInfo()
    },
    // 获取选中数据
    handleSelectionChange(value) {
      this.multipleSelection = value
    },
    // 查询
    searchBtn() {
      this.pagination.current = 1
      this.getStaticInfo()
    },

    /**
     * 获取统计数据
    */
    getStaticInfo() {
      if (!this.statisticvalue1) {
        this.$message.error('请选择开始时间！')
        return
      }
      if (!this.statisticvalue2) {
        this.$message.error('请选择结束时间！')
        return
      }
      if (this.statisticvalue1 > this.statisticvalue2) {
        this.$message.error('开始时间不能大于结束时间！')
        return
      }
      const params = {
        endTime: this.statisticvalue2 + ' 23:59:59',
        startTime: this.statisticvalue1 + ' 00:00:00'
      }
      Object.assign(params, this.pagination)
      getCallRecord(params).then(res => {
        if (res.code == 1) {
          this.statisData = res.result.records
          this.pagination.total = res.result.total
        }
      })
    },
    start() {
      if (!this.multipleSelection[0].recordFile) {
        this.$message.info('暂无音频')
        return
      }
      this.dialogVisible = true
      var token = this.$store.state.user.token
      console.log(this.multipleSelection,'this.multipleSelection')
      // this.audioSrc = `${IP}/base/file/loadAudio?remotePath=http://172.31.21.200.8089/calllist${this.multipleSelection[0].recordFile}&access_token=${token}`
      this.audioSrc = `http://172.31.21.200:8089/calllist${this.multipleSelection[0].recordFile}`
      this.$nextTick(()=>{
        console.log(this.$refs.audio,'audio')
        this.$refs.audio.play()
      })
      // })
    },
    pause() {
      this.dialogVisible = false
      this.$refs.audio.pause()
      this.$refs.audio.currentTime = 0
    },
    dowmMP3() {
      if (!this.multipleSelection[0].recordFile) {
        this.$message.info('暂无音频')
        return
      }
      getFileAudio2(
        this.$store.state.user.token,
        this.multipleSelection[0].recordFile).then(src => {
          console.log(src,'src')
        let BLOB = new Blob([src]);
        console.log(BLOB,'blob')
        let url = window.URL.createObjectURL(BLOB);
        console.log(url,'url')
        const a = document.createElement('a')
          a.download = '录音文件'
          // 后端设置的文件名称在res.headers的 "content-disposition": "form-data; name=\"attachment\"; filename=\"20181211191944.zip\"",
          a.href = url
          console.log(a.href,'href')
          document.body.appendChild(a)
          a.click()
          document.body.removeChild(a)
      })
    },

    /**
     * @description 判断字符串是否为空
     */
    strIsNull(strVal) {
      strVal = strVal || ''
      return (typeof (strVal) === 'undefined' || strVal == null || strVal == '')
    },
    exportPdf() {
      this.getPdf('工单质检统计')
    }
  }

}
</script>
<style lang="scss" scoped>
.callLogStatistics {
  height: 100%;
  width: 100%;
  padding: 5px;

  .filteroption {
    width: 100%;
    height: 40px;
    font-size: 14px;
    display: flex;
    align-items: center;

    .search_box{
      width: 100%;
    }
  }

  .tableheight {
    margin-top: 4px;
    height: calc(100% - 44px);
  }

  .delete {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    :nth-child(1) {
      font-size: 50px;
      color: red;
      margin-bottom: 10px;
    }
    p {
      font-size: 20px;
    }
  }
  .dialog_style {
    width: 100%;
    /deep/ .el-table {
      text-align: center;
      vertical-align: middle;
    }
  }
  /deep/ .dialog > div > div:nth-child(2) {
    padding: 10px 20px;
  }
  .datebox{
    display: flex;
    justify-content: center;
    align-items: center;
  }
  /deep/ .el-table__footer-wrapper td{
    text-align: center !important;
  }
}
  .Cecharts{
    margin-top: 10px;
    height: 375px;
    width: 90%;
  }
</style>