spfm-market-front/src/pages/main/busitime/busiTimeout.vue

<template>
    <div class="container">
        <fullscreen :fullscreen.sync="fullscreen" class="container-box">
            <div class="titbox">
                <h2>异常数据监控</h2>
                <div>
                    <i class="el-icon-download" @click="iconCli(3)"></i>
                    <i class="el-icon-refresh" @click="iconCli(1)"></i>
                    <i class="el-icon-full-screen" @click="iconCli(2)"></i>
                    <!--                    <i class="el-icon-folder-opened"></i>-->
                    <!--                    <i class="el-icon-view"></i>-->
                    <!--                    <i class="el-icon-more"></i>-->
                </div>
            </div>
            <div class="search">
                <mySearch :searchList="searchList" @searchInfo="searchInfo"></mySearch>
            </div>
            <div class="tabbox">
                <el-table height="100%" v-loading="loading" class="com-table" ref="multipleTable"
                          :data="tableData" tooltip-effect="dark" size="small" border style="width: 100%">
                    <el-table-column prop="region" label="地市"> </el-table-column>
                    <el-table-column prop="channelType" label="渠道类型"></el-table-column>
                    <el-table-column prop="opName" label="业务类型"></el-table-column>
                    <el-table-column prop="normalTime" label="标准用时（秒）"></el-table-column>
                    <el-table-column prop="busiTimeoutTime" label="异常业务平均用时（秒）" width="160px"></el-table-column>
                    <el-table-column prop="busiTimeoutPercentage" label="异常用时超出比例" width="140px"></el-table-column>
                    <el-table-column prop="busiTotal" label="总业务笔数"></el-table-column>
                    <el-table-column prop="timeoutTotal" label="超时业务笔数"></el-table-column>
                    <el-table-column prop="timeoutPercentage" label="超时业务量占比"></el-table-column>
                    <el-table-column label="操作" width="220px" align="center">
                        <template slot-scope="scope">
                            <el-button :disabled="scope.row.region == '全省'" size="mini" type="primary" @click="dialogCheck(scope.row)">查看超时业务详情</el-button>
                        </template>
                    </el-table-column>
                </el-table>

            </div>
        </fullscreen>
        <el-dialog title="异常数据监控（超时业务笔数达到或超过10%）" :visible.sync="dialogStatus" width="50%" :destroy-on-close="true"
                   :modal-append-to-body="false" :close-on-click-modal="true" >
            <div>
                <el-table
                    height="400px"
                    v-loading="loadingDialog"
                    class="com-table"
                    ref="multipleTable"
                    :data="tableDataDialog"
                    tooltip-effect="dark"
                    size="small"
                    style="width: 100%"
                    :row-class-name="addRowId"
                    id="rptTable"
                    
                >
                    <el-table-column prop="region" fixed label="地市"> </el-table-column>
                    <el-table-column prop="channelType" label="渠道类型"></el-table-column>
                    <el-table-column prop="opName" label="业务类型" width="180px"></el-table-column>
                    <el-table-column prop="shop" label="网点" width="200px"></el-table-column>
                    <el-table-column prop="channelCode" label="渠道编码"></el-table-column>
                    <!-- <el-table-column prop="busiType" label="业务类型"></el-table-column> -->
                    <el-table-column prop="normalTime" label="标准用时"></el-table-column>
                    <el-table-column prop="timeoutTotal" label="超时业务笔数" width="120px"></el-table-column>
                    <el-table-column prop="aveTime" label="平均实际用时" width="120px"></el-table-column>
                    <el-table-column prop="timeoutFlag" label="是否超时"></el-table-column>
                </el-table>
                <div slot="footer" class="dialog-footer myfooter">
                    <el-button @click="dialogExpData()">导出数据</el-button>
                </div>
            </div>
        </el-dialog>

    </div>
</template>

<script>
import mySearch from "../../../components/search";
import {export_json_to_excel} from "../vendor/Export2Excel";
export default {
  components: {
    mySearch
  },
  data() {
    return {
      loading: false,
      subBtn: true,
      fullscreen: false,
      total: 0,
      pageSize: 1,
      tableData: [],
      totalData: [],
      totalSums: [],
      params: {},
        dialogParams:{},
      tooltit: "异常数据监控（超时业务笔数达到或超过10%）",
      searchList: [{
          type: 'sel',
          tit: '地市',
          value: '-',
          width: '32%',
          options: [{dataName:'全部',dataCode:'-'},
              {dataName:'哈尔滨',dataCode:'哈尔滨'},
              {dataName:'齐齐哈尔',dataCode:'齐齐哈尔'},
              {dataName:'牡丹江',dataCode:'牡丹江'},
              {dataName:'佳木斯',dataCode:'佳木斯'},
              {dataName:'大庆',dataCode:'大庆'},
              {dataName:'鸡西',dataCode:'鸡西'},
              {dataName:'双鸭山',dataCode:'双鸭山'},
              {dataName:'伊春',dataCode:'伊春'},
              {dataName:'七台河',dataCode:'七台河'},
              {dataName:'鹤岗',dataCode:'鹤岗'},
              {dataName:'黑河',dataCode:'黑河'},
              {dataName:'绥化',dataCode:'绥化'},
              {dataName:'大兴安岭',dataCode:'大兴安岭'}],
      },{
          type: 'sel',
          tit: '渠道类型',
          value: '自有渠道',
          width: '32%',
          options: [{dataName:'自有渠道',dataCode:'自有渠道'},
              {dataName:'社会渠道',dataCode:'社会渠道'}]
      },{
          type: 'sel',
          tit: '业务类型',
          value: '-',
          width: '32%',
          options: [{dataName:'全部',dataCode:'-'},
                    {dataName:'营销活动办理',dataCode:'营销活动办理'},
                    {dataName:'资费变更',dataCode:'资费变更'},
                    {dataName:'普通缴费',dataCode:'普通缴费'},
                    {dataName:'开户',dataCode:'开户'},
                    {dataName:'补卡',dataCode:'补卡'},
                    {dataName:'营销活动取消',dataCode:'营销活动取消'},
                    {dataName:'智能组网加装业务受理',dataCode:'智能组网加装业务受理'},
                    {dataName:'携号转网开户',dataCode:'携号转网开户'},
                    {dataName:'家庭成员管理',dataCode:'家庭成员管理'},
                    {dataName:'过户',dataCode:'过户'},
                    {dataName:'用户密码修改',dataCode:'用户密码修改'},
                    {dataName:'销户',dataCode:'销户'},
                    {dataName:'流量共享业务',dataCode:'流量共享业务'},
                    {dataName:'融合宽带业务',dataCode:'融合宽带业务'}]
      },
          {
              type: 'date',
              tit: '数据时间',
              value: new Date(new Date()-24*60*60*1000),
              width: '32%',
          }
        ],
        dialogStatus: false,
        loadingDialog: false,
        totalDialog: 0,
        pageSizeDialog: 1,
        tableDataDialog: [],
    };
  },
  methods: {

    //获取列表
    getList(v, n) {
      this.loading = true;
      this.params.orderByClause = '(case when region=\'全省\' THEN 1 else 2 END)';
      this.$http({
        url: "/market/mkBusiTimeout/queryList",
        method: "post",
        headers: {
          "Content-Type": "application/json"
        },
        data: this.params,
      }).then((res) => {
          console.log(res.data);
        this.loading = false;
        this.tableData = res.data;
      });
    },
      dialogCheck(row){
          this.dialogParams = {};
          this.loadingDialog = true;
        this.dialogStatus=true;
          this.dialogParams = {channelType:row.channelType,region:row.region,opTime:row.opTime,opName:row.opName};
          this.$http({
              url: "/market/mkBusiTimeoutDetail/queryList",
              method: "post",
              headers: {
                  "Content-Type": "application/json"
              },
              data: this.dialogParams,
          }).then((res) => {
              console.log(res.data);
              this.loadingDialog = false;
              this.tableDataDialog = res.data;
          });
      },
    addRowId({row, rowIndex}){
        row.id = rowIndex+1;
    },
      //搜索数据
      searchInfo(v) {
          this.params = {};
          v[0] && v[0] !=='-' ? this.params.region = v[0] : '';
          v[1] ? this.params.channelType = v[1] : '';
          v[2] && v[2] !=='-' ? this.params.opName= v[2] : '';
          if(v[3]){
              var date = new Date(v[3]);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
              var Y = date.getFullYear() ;
              var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1);
              var D = (date.getDate()+1 < 10 ? '0'+(date.getDate()) : date.getDate())
              this.params.opTime = Y+M+D;
          }else{
              this.$message({
                  message: '必须选择数据日期',
                  type: 'warning'
              });
              return;
          }
          this.getList(this.params, this.pageSize);
      },


    iconCli(v) {
      if (v === 1) {
          this.getList(this.params, this.pageSize);
      }
      if (v === 2) {
          this.fullscreen = !this.fullscreen;
      }
      if(v === 3){
          // this.exportExcel();
          this.expData();
      }
    },
      expData() {
          let exdata = [];
          this.$http({
              url: "/market/mkBusiTimeout/queryList",
              method: "post",
              headers: {
                  "Content-Type": "application/json",
              },
              data: this.params,
          }).then((res) => {
              exdata = res.data;
              var that = this;
              require.ensure([], () => {
                  const { export_json_to_excel } = require("../vendor/Export2Excel");
                  const tHeader = [
                      "地市",
                      "渠道类型",
                      "业务类型",
                      "标准用时(秒）",
                      "异常业务平均用时（秒）",
                      "异常用时超出比例",
                      "总业务笔数",
                      "超时业务笔数",
                      "超时业务量占比",
                  ]; // 导出的表头名
                  const filterVal = [
                      "region",
                      "channelType",
                      "opName",
                      "normalTime",
                      "busiTimeoutTime",
                      "busiTimeoutPercentage",
                      "busiTotal",
                      "timeoutTotal",
                      "timeoutPercentage",
                  ]; // 导出的表头字段名

                  let list = exdata;

                  const data = that.formatJson(filterVal, list);
                  export_json_to_excel(tHeader, data, `report`); // 导出的表格名称，根据需要自己命名
              });
          });
      },

      dialogExpData() {
          let exdata = [];
          this.$http({
              url: "/market/mkBusiTimeoutDetail/queryList",
              method: "post",
              headers: {
                  "Content-Type": "application/json",
              },
              data: this.dialogParams,
          }).then((res) => {
              exdata = res.data;
              var that = this;
              require.ensure([], () => {
                  const { export_json_to_excel } = require("../vendor/Export2Excel");
                  const tHeader = [
                      "地市",
                      "渠道类型",
                      "业务类型",
                      "网点",
                      "渠道编码",
                    //   "业务类型",
                      "标准用时",
                      "超时业务笔数",
                      "平均实际用时",
                      "是否超时",
                  ]; // 导出的表头名
                  const filterVal = [
                      "region",
                      "channelType",
                      "opName",
                      "shop",
                      "channelCode",
                    //   "busiType",
                      "normalTime",
                      "timeoutTotal",
                      "aveTime",
                      "timeoutFlag",
                  ]; // 导出的表头字段名

                  let list = exdata;

                  const data = that.formatJson(filterVal, list);
                  export_json_to_excel(tHeader, data, `report`); // 导出的表格名称，根据需要自己命名
              });
          });
      },

      formatJson(filterVal, jsonData) {
          return jsonData.map((v) => filterVal.map((j) => v[j]));
      },


  },

  created() {

      var date = new Date(this.searchList[3].value);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
      var Y = date.getFullYear();
      var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1);
      var D = (date.getDate()+1 < 10 ? '0'+(date.getDate()) : date.getDate())
      this.params={opTime:Y+M+D,channelType:this.searchList[1].value}
      this.getList(this.params, this.pageSize);

  },
};
</script>



<style>
.el-input__suffix {
    cursor: pointer;
}
</style>
<style scoped lang="scss">
.titbox {
    div {
        float: right;

        i {
            font-size: 22px;
            margin-left: 20px;
            cursor: pointer;
        }
    }
}

.tabbox {
    margin-top: 15px;
}

.pageBox {
    text-align: right;
    margin-top: 10px;
}
</style>