--业务市场监控，三张报表

src/pages/main/busitime/busiTime.vue

@@ -0,0 +1,272 @@
+<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>
+                </div>
+            </div>
+            <div class="search">
+                <mySearch :searchList="searchList" @searchInfo="searchInfo"></mySearch>
+            </div>
+            <div class="tabbox">
+
+                    <el-table height="calc(100% - 40px)" v-loading="loading" class="com-table" ref="multipleTable"
+                              :data="tableData" tooltip-effect="dark" size="small" border style="width: 100%">
+                    <el-table-column prop="region" fixed label="地市"> </el-table-column>
+                    <el-table-column align="center" label="业务办理平均时长（秒）-自有渠道">
+                        <el-table-column prop="zyYxhdbl" label="营销活动办理"></el-table-column>
+                        <el-table-column prop="zyZfbg" label="资费变更"></el-table-column>
+                        <el-table-column prop="zyPtjf" label="普通缴费"></el-table-column>
+                        <el-table-column prop="zyKh" label="开户"></el-table-column>
+                        <el-table-column prop="zyBk" label="补卡"></el-table-column>
+                        <el-table-column prop="zyYxhdqx" label="营销活动取消"></el-table-column>
+                        <el-table-column prop="zyZnzwjz" label="智能组网加装业务受理"></el-table-column>
+                        <el-table-column prop="zyXhzwkh" label="携号转网开户"></el-table-column>
+                        <el-table-column prop="zyJtcygl" label="家庭成员管理"></el-table-column>
+                        <el-table-column prop="zyGh" label="过户"></el-table-column>
+                        <el-table-column prop="zyYhmmgq" label="用户密码修改"></el-table-column>
+                        <el-table-column prop="zyXh" label="销户"></el-table-column>
+                        <el-table-column prop="zyLlgx" label="流量共享业务"></el-table-column>
+                        <el-table-column prop="zyRhkd" label="融合宽带业务"></el-table-column>
+                    </el-table-column>
+                    <el-table-column align="center" label="业务办理平均时长（秒）-社会渠道">
+                        <el-table-column prop="shYxhdbl" label="营销活动办理"></el-table-column>
+                        <el-table-column prop="shZfbg" label="资费变更"></el-table-column>
+                        <el-table-column prop="shPtjf" label="普通缴费"></el-table-column>
+                        <el-table-column prop="shKh" label="开户"></el-table-column>
+                        <el-table-column prop="shBk" label="补卡"></el-table-column>
+                        <el-table-column prop="shYxhdqx" label="营销活动取消"></el-table-column>
+                        <el-table-column prop="shZnzwjz" label="智能组网加装业务受理"></el-table-column>
+                        <el-table-column prop="shXhzwkh" label="携号转网开户"></el-table-column>
+                        <el-table-column prop="shJtcygl" label="家庭成员管理"></el-table-column>
+                        <el-table-column prop="shGh" label="过户"></el-table-column>
+                        <el-table-column prop="shYhmmgq" label="用户密码修改"></el-table-column>
+                        <el-table-column prop="shXh" label="销户"></el-table-column>
+                        <el-table-column prop="shLlgx" label="流量共享业务"></el-table-column>
+                        <el-table-column prop="shRhkd" label="融合宽带业务"></el-table-column>
+                    </el-table-column>
+                </el-table>
+
+            </div>
+        </fullscreen>
+    </div>
+</template>
+
+
+
+<script>
+import mySearch from "../../../components/search";
+export default {
+  components: {
+    mySearch,
+  },
+  data() {
+    return {
+      loading: false,
+      subBtn: true,
+      fullscreen: false,
+      total: 0,
+      pageSize: 1,
+      tableData: [],
+      totalData: [],
+      totalSums: [],
+      params: {},
+        tooltit: "业务时长查询",
+        searchList: [
+          {
+              type: 'date',
+              tit: '数据时间',
+              value: new Date(),
+              width: '100%',
+          }
+        ],
+    };
+  },
+  methods: {
+
+
+
+    //获取列表
+    getList(v, n) {
+      this.loading = true;
+      this.$http({
+        url: "/market/cMkBusiTime/queryList",
+        method: "post",
+        headers: {
+          "Content-Type": "application/json"
+        },
+        data: this.params,
+      }).then((res) => {
+        this.loading = false;
+        this.tableData = res.data;
+      });
+    },
+      //搜索数据
+      searchInfo(v) {
+          this.params = {};
+          if(v[0]){
+              var date = new Date(v[0]);//时间戳为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);
+      },
+
+    addRowId({row, rowIndex}){
+        row.id = rowIndex+1;
+    },
+
+    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/cMkBusiTime/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",
+                      "zyYxhdbl",
+                      "zyZfbg",
+                      "zyPtjf",
+                      "zyKh",
+                      "zyBk",
+                      "zyYxhdqx",
+                      "zyZnzwjz",
+                      "zyXhzwkh",
+                      "zyJtcygl",
+                      "zyGh",
+                      "zyYhmmgq",
+                      "zyXh",
+                      "zyLlgx",
+                      "zyRhkd",
+
+                      "shYxhdbl",
+                      "shZfbg",
+                      "shPtjf",
+                      "shKh",
+                      "shBk",
+                      "shYxhdqx",
+                      "shZnzwjz",
+                      "shXhzwkh",
+                      "shJtcygl",
+                      "shGh",
+                      "shYhmmgq",
+                      "shXh",
+                      "shLlgx",
+                      "shRhkd",
+                  ]; // 导出的表头字段名
+
+                  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[0].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}
+      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>

src/pages/main/busitime/busiTimeout.vue

@@ -0,0 +1,343 @@
+<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="calc(100% - 40px)" v-loading="loading" class="com-table" ref="multipleTable"
+                          :data="tableData" tooltip-effect="dark" size="small" border style="width: 100%">
+                    <el-table-column prop="region" fixed label="地市"> </el-table-column>
+                    <el-table-column prop="channelType" label="渠道类型"></el-table-column>
+                    <el-table-column prop="normalTime" label="标准用时（秒）"></el-table-column>
+                    <el-table-column prop="busiTimeoutTime" label="异常业务平均用时（秒）"></el-table-column>
+                    <el-table-column prop="busiTimeoutPercentage" label="异常用时超出比例"></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 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="false" :before-close="closedia">
+            <div v-loading="loadinged">
+                <el-table
+                    height="calc(90%)"
+                    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="shop" label="网点"></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="超时业务笔数"></el-table-column>
+                    <el-table-column prop="aveTime" label="平均实际用时"></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: 'date',
+              tit: '数据时间',
+              value: new Date(),
+              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};
+          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] : '';
+          if(v[2]){
+              var date = new Date(v[2]);//时间戳为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",
+                      "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",
+                      "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[2].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>

src/router/index.js

@@ -1644,6 +1644,22 @@ const routes = [{
             path: '/knowledgeTypetop',
             name: 'knowledgeTypetop',
             component: (resolve) => require( /* webpackChunkName: "system" */ ['../pages/main/knowledgetop/knowledgeType'], resolve)
+        },{
+            meta: {
+                name: '业务时长查询',
+                keepAlive: true
+            },
+            path: '/busiTime',
+            name: 'busiTime',
+            component: (resolve) => require( /* webpackChunkName: "system" */ ['../pages/main/busitime/busiTime'], resolve)
+        },{
+            meta: {
+                name: '异常业务办理监控报表',
+                keepAlive: true
+            },
+            path: '/busiTimeout',
+            name: 'busiTimeout',
+            component: (resolve) => require( /* webpackChunkName: "system" */ ['../pages/main/busitime/busiTimeout'], resolve)
         },
     ]
 },