init

src/routes/modules/statisticRoutes.js

@@ -51,6 +51,12 @@ export default [
 				name: '权益客户统计',
 				hidden: false
 			},
+			{
+				path: 'equityPackageStatistics',
+				component: () => import('@/views/dataReport_manage/equityPackageStatistics.vue'),
+				name: '权益套餐统计',
+				hidden: false
+			},
 			{
 				path: 'readClassify',
 				component: () => import('@/views/dataReport_manage/readClassify.vue'),

src/views/dataReport_manage/equityPackageStatistics.vue

@@ -0,0 +1,410 @@
+<template>
+  <div class="dataReport-container" id="dataReport-container">
+    <div class="dataReport-top">
+      <a :href="exportExcel" download>
+        <button class="button-sty act">导出EXCEL</button>
+      </a>
+      <button :class="['button-sty', { act: filterObj.month === item.label }]" v-for="item in monthLabel" @click="toggleMonth(item.label)" :key="item.label">
+        {{ item.label }}
+      </button>
+      <date-picker v-model="filterObj.date" type="date" range value-type="format" placeholder="自定义时间段" :clearable="false" :editable="false" @change="dateChange" />
+      <el-input placeholder="请输入客户名称" v-model="searchVal" style="width: 400px; margin-left: auto" @input="handleSearch" clearable>
+        <i slot="prefix" class="el-input__icon el-icon-search"></i>
+      </el-input>
+    </div>
+    <div class="dataReport-main">
+      <div class="main-top">
+        <el-cascader
+          v-if="Role == 'finance' || Role == 'admin' || Role == 'ficc_admin' || Role == 'rai_admin' || ManageType != 0"
+          v-model="filterObj.sale"
+          placeholder="请选择销售"
+          style="min-width: 250px; margin-right: 10px; margin-bottom: 8px"
+          :options="salesArr"
+          :props="defaultSalesProps"
+          :show-all-levels="false"
+          collapse-tags
+          clearable
+          filterable
+          @change="changeFilter"
+        >
+        </el-cascader>
+      </div>
+      <div class="main-section">
+        <el-row :gutter="36">
+          <el-col :span="8" v-for="item in data_typeArr" :key="item.label">
+            <el-card :class="['base-card', { 'main-card': filterObj.data_type === item.label }]" shadow="hover" @click.native="toggleType(item.label)">
+              <div slot="header" class="clearfix">
+                <span>
+                  {{ item.label }}
+                  <el-tooltip
+                    class="item"
+                    effect="dark"
+                    :content="
+                      item.label === '行业新签'
+                        ? '行业合同开始时间在查询时间段内，且该行业在历史上没有转正记录'
+                        : item.label === '行业续约'
+                        ? '行业合同开始时间在查询时间段内，且该行业历史上有过正式到期记录'
+                        : '行业合同到期时间在查询时间段内，且该行业当前状态是非正式状态'
+                    "
+                    placement="top"
+                  >
+                    <i class="el-icon-info"></i>
+                  </el-tooltip>
+                </span>
+              </div>
+              <div class="card-cont">
+                {{ item.label === "行业新签" ? NewCompanyTotal : item.label === "行业续约" ? RenewalCompanyTotal : item.label === "行业未续约" ? NotRenewalCompanyTotal : "" }}
+              </div>
+            </el-card>
+          </el-col>
+        </el-row>
+      </div>
+      <el-table :data="tableData" border style="margin-top: 20px; min-height: 400px" v-loading="isShowloadding" element-loading-text="数据加载中...">
+        <el-table-column label="公司名称" prop="CompanyName" align="center"> </el-table-column>
+        <el-table-column label="所属销售" prop="SellerName" align="center"> </el-table-column>
+        <el-table-column label="合同金额" prop="Money" align="center"> </el-table-column>
+        <el-table-column label="合同期限" prop="StartDate" align="center"> </el-table-column>
+        <el-table-column label="签约套餐" prop="PermissionName" align="center"> </el-table-column>
+        <template v-if="filterObj.data_type == '行业未续约'">
+          <el-table-column label="当前行业状态" prop="PermissionName" align="center"> </el-table-column>
+          <el-table-column label="当前客户状态" prop="PermissionName" align="center"> </el-table-column>
+        </template>
+      </el-table>
+      <el-col :span="24" class="toolbar" v-if="total">
+        <m-page :total="total" :page_no="page_no" @handleCurrentChange="handleCurrentChange" />
+      </el-col>
+    </div>
+  </div>
+</template>
+
+<script>
+import { equityTableColums } from "./configdata.js";
+import { dataMainInterface, customInterence } from "@/api/api.js";
+import mPage from "@/components/mPage.vue";
+var moment = require("moment");
+moment().format();
+export default {
+  name: "",
+  components: { mPage },
+  computed: {
+    exportExcel() {
+      let baseUrl = process.env.API_ROOT + "/statistic_report/incremental_company_list";
+      let token = localStorage.getItem("auth") || "";
+      let paramStr = "";
+      // 处理销售筛选
+      let salesArr = [];
+      if (this.filterObj.sale.length) {
+        salesArr = this.filterObj.sale.map((item) => {
+          return item[item.length - 1];
+        });
+      }
+      let obj = {
+        // AdminId: salesArr.join(","),
+        // EndDate: this.end_date,
+        // StartDate: this.start_date,
+        // DataType: this.filterObj.data_type == "新增试用客户" ? "新增试用" : this.filterObj.data_type,
+        // Keyword: this.searchVal,
+        // IsExport: true,
+        // IsConfirm: this.filterObj.data_type == "行业未续约" ? 1 : -1,
+      };
+      for (let key in obj) {
+        paramStr = `${paramStr}&${key}=${obj[key]}`;
+      }
+      return `${baseUrl}?${token}${paramStr}`;
+    },
+    Role() {
+      let role = localStorage.getItem("Role") || "";
+      return role;
+    },
+    //管理权限
+    ManageType() {
+      return localStorage.getItem("ManageType") || "";
+    },
+    //确认未续约权限
+    canConfirmNotRenewed() {
+      return ["admin", "rai_admin"].includes(this.Role);
+    },
+  },
+  data() {
+    return {
+      searchVal: sessionStorage.getItem("incrementBack") ? JSON.parse(sessionStorage.getItem("incrementBack")).searchVal : "",
+      tableData: [],
+      isShowloadding: false,
+      start_date: "",
+      end_date: "",
+      /* 筛选条件 */
+      filterObj: {
+        month: "近1个月",
+        date: [],
+        sale: "",
+        data_type: "行业新签",
+      },
+      monthLabel: [
+        {
+          label: "近1个月",
+        },
+        {
+          label: "近2个月",
+        },
+        {
+          label: "近3个月",
+        },
+      ],
+      salesArr: [], //销售列表
+      defaultSalesProps: {
+        multiple: true,
+        label: "RealName",
+        children: "ChildrenList",
+        value: "AdminId",
+      }, //销售级联配置
+      pageSize: 10,
+      page_no: sessionStorage.getItem("incrementBack") ? JSON.parse(sessionStorage.getItem("incrementBack")).page_no : 1,
+      total: 0,
+      data_typeArr: [
+        {
+          label: "行业新签",
+        },
+        {
+          label: "行业续约",
+        },
+        {
+          label: "行业未续约",
+        },
+      ], //数据类型
+      NewCompanyTotal: 0, //行业新签数
+      NotRenewalCompanyTotal: 0, //行业未续约数
+      RenewalCompanyTotal: 0, //行业续约数
+    };
+  },
+  /* 页面跳转前记录参数 */
+  beforeRouteLeave(to, form, next) {
+    let backData = {
+      page_no: this.page_no,
+      end_date: this.end_date,
+      start_date: this.start_date,
+      filterObj: this.filterObj,
+    };
+    sessionStorage.setItem("incrementBack", JSON.stringify(backData));
+    next();
+  },
+  /* 页面进入前是否清除参数 */
+  beforeRouteEnter(to, from, next) {
+    if (from.path != "/customDetail") {
+      sessionStorage.removeItem("incrementBack");
+    }
+    next();
+  },
+  methods: {
+    // 搜索
+    handleSearch() {
+      if (!this.searchVal) {
+        this.page_no = 1;
+        this.filterObj = {
+          month: "近1个月",
+          date: [],
+          sale: "",
+          data_type: this.filterObj.data_type,
+        };
+        let date_before = moment().subtract(1, "M").format("YYYY-MM-DD");
+        let date_now = moment().format("YYYY-MM-DD");
+        let date = [date_before, date_now];
+        this.start_date = date_before;
+        this.end_date = date_now;
+        this.filterObj.date = date;
+        this.getTableData();
+        return;
+      }
+      this.page_no = 1;
+      this.filterObj = {
+        month: "",
+        date: [],
+        sale: "",
+        data_type: this.filterObj.data_type,
+      };
+      this.start_date = "";
+      this.end_date = "";
+      this.getTableData();
+    },
+    /* 获取表格 */
+    getTableData() {
+      this.isShowloadding = true;
+      // 处理销售筛选
+      let salesArr = [];
+      if (this.filterObj.sale.length) {
+        salesArr = this.filterObj.sale.map((item) => {
+          return item[item.length - 1];
+        });
+      }
+      let params = {
+        Keyword: this.searchVal,
+        PageSize: this.pageSize,
+        CurrentIndex: this.page_no,
+        AdminId: salesArr.join(","),
+        EndDate: this.end_date,
+        StartDate: this.start_date,
+        DataType: this.filterObj.data_type == "新增试用客户" ? "新增试用" : this.filterObj.data_type,
+      };
+      dataMainInterface.incrementalEquityList(params).then((res) => {
+        if (res.Ret === 200) {
+          this.tableData = res.Data.List || [];
+          this.total = res.Data.Paging.Totals;
+          this.NewCompanyTotal = res.Data.NewCompanyTotal;
+          this.RenewalCompanyTotal = res.Data.RenewalCompanyTotal;
+          this.NotRenewalCompanyTotal = res.Data.NotRenewalCompanyTotal;
+          this.isShowloadding = false;
+        }
+      });
+    },
+    /* 获取销售 */
+    getSale() {
+      customInterence.getSalesRaiData().then((res) => {
+        if (res.Ret === 200) {
+          this.salesArr = res.Data.List;
+        }
+      });
+    },
+    /* 切换月份 */
+    toggleMonth(label) {
+      this.filterObj.month = label;
+      let days = label == "近1个月" ? 1 : label == "近2个月" ? 2 : label == "近3个月" ? 3 : 0;
+      this.filterDate(days);
+    },
+    /* 选择服务日期 */
+    dateChange(e) {
+      if (e[0]) {
+        this.start_date = e[0];
+        this.end_date = e[1];
+      } else {
+        this.start_date = "";
+        this.end_date = "";
+      }
+      this.filterObj.month = "";
+      this.page_no = 1;
+      this.searchVal = "";
+      this.getTableData();
+    },
+    /* 切换数据类型 */
+    toggleType(label) {
+      this.filterObj.data_type = label;
+      this.page_no = 1;
+      this.getTableData();
+    },
+    /* 筛选改变时 */
+    changeFilter() {
+      this.page_no = 1;
+      this.searchVal = "";
+      this.getTableData();
+    },
+    /* 切换页码 */
+    handleCurrentChange(page) {
+      this.page_no = page;
+      this.getTableData();
+    },
+    /* 获取近几个月的日期范围 */
+    filterDate(month) {
+      if (month) {
+        let date_before = moment().subtract(month, "M").format("YYYY-MM-DD");
+        let date_now = moment().format("YYYY-MM-DD");
+        let date = [date_before, date_now];
+        this.start_date = date_before;
+        this.end_date = date_now;
+        this.filterObj.date = date;
+        this.page_no = 1;
+        this.searchVal = "";
+        this.getTableData();
+      }
+    },
+  },
+  created() {},
+  mounted() {
+    this.getSale();
+    if (sessionStorage.getItem("incrementBack")) {
+      let backData = JSON.parse(sessionStorage.getItem("incrementBack"));
+      this.page_no = backData.page_no;
+      this.end_date = backData.end_date;
+      this.start_date = backData.start_date;
+      this.filterObj = backData.filterObj;
+      this.searchVal = backData.searchVal;
+    }
+    /* 默认选中近1个月 */
+    this.filterDate(this.filterObj.month === "近1个月" ? 1 : this.filterObj.month === "近2个月" ? 2 : this.filterObj.month === "近3个月" ? 3 : 0);
+  },
+};
+</script>
+<style lang="scss" scoped>
+@import "./index.scss";
+.tabs-box {
+  flex-direction: column;
+  .tabs-box-confirm {
+    display: flex;
+    align-items: center;
+    margin-bottom: 20px;
+    .center-line {
+      width: 1px;
+      height: 21px;
+      background-color: #333333;
+      margin: 0 20px;
+    }
+    .confirm-box-li {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      cursor: pointer;
+      width: 120px;
+      height: 40px;
+      border-radius: 4px;
+    }
+    .active {
+      background-color: #409eff;
+      color: #fff;
+    }
+  }
+}
+.operation-button {
+  color: #409eff;
+  cursor: pointer;
+  font-size: 14px;
+  margin-right: 10px;
+}
+.remark-row {
+  display: flex;
+  justify-content: center;
+  .remark-text {
+    width: 18px;
+    height: 18px;
+    margin-right: 8px;
+    font-size: 18px;
+    color: #409eff;
+    cursor: pointer;
+  }
+}
+.operation-row {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-wrap: wrap;
+  .operation-button {
+    &:last-child {
+      margin-right: 0;
+    }
+  }
+}
+.package-difference {
+  cursor: pointer;
+}
+</style>
+<style lang="scss">
+#dataReport-container {
+  .tabs-box {
+    .el-radio-button {
+      margin-right: 0;
+    }
+    .el-radio-button .el-radio-button__inner {
+      border: none;
+      width: 120px;
+      height: 40px;
+      border-radius: 4px;
+    }
+  }
+}
+</style>

src/views/dataReport_manage/index.scss

@@ -18,6 +18,7 @@
 			color: #2D8CF0;
 			cursor: pointer;
 			border-radius:4px;
+			flex-shrink: 0;
 			&.act {
 				background: #409EFF;
 				color: #fff;