src/api/modules/statisticApi.js

@@ -34,6 +34,9 @@ const dataMainInterface = {
 	stackList:params => {
 		return http.get('/statistic_report/stack_company_list',params);
 	},
+	raiStackList:params => {
+		return http.get('/statistic_report/stack_company_list_rai',params);
+	},
 	/**
 	 * 获取增量客户列表接口
 	 * @param {PageSize} params 
@@ -186,6 +189,10 @@ const dataMainInterface = {
 	mergeCompanyPreviousDetail:params => {
 		return http.get('/statistic_report/merge_company_previous/detail',params);
 	},
+	// 客户数据未续约说明更多上一年
+	mergeCompanyPreviousDetailYear:params => {
+		return http.get('/statistic_report/merge_company_previous/last_year',params);
+	},
 	/**
 	 * 	// 获取图表阅读统计列表
 	 * @param {PageSize} params 

src/routes/modules/statisticRoutes.js

@@ -27,6 +27,12 @@ export default [
 				name: '存量客户数据',
 				hidden: false
 			},
+			{
+				path: 'raiStocklist',
+				component: () => import('@/views/dataReport_manage/raiStockCutomList.vue'),
+				name: '权益存量客户',
+				hidden: false
+			},
 			{
 				path: 'contractlist',
 				component: () => import('@/views/dataReport_manage/contractList.vue'),
@@ -48,7 +54,7 @@ export default [
 			{
 				path: 'equityCustomStatistics',
 				component: () => import('@/views/dataReport_manage/equityCustomStatistics.vue'),
-				name: '权益客户统计',
+				name: '权益增量客户',
 				hidden: false
 			},
 			{

src/views/dataReport_manage/components/NotRenewedDlg.vue

@@ -0,0 +1,82 @@
+<template>
+  <el-dialog :visible.sync="isNotRenewedDlg" :close-on-click-modal="false" :modal-append-to-body="false" @close="cancelHandle" center title="下载未续约率" width="35%">
+    <div>
+      <el-radio-group v-model="radio">
+        <el-radio style="margin-bottom: 20px" :label="1">下载当前销售的合同明细数据</el-radio>
+        <el-radio :label="2">下载所有销售未续约数据列表</el-radio>
+      </el-radio-group>
+    </div>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="cancelHandle">取 消</el-button>
+      <el-button type="primary" @click="downloadHandle">确 定</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+import { dataMainInterface } from "@/api/api.js";
+export default {
+  props: {
+    isNotRenewedDlg: {
+      type: Boolean,
+      default: false,
+    },
+    start_date: {
+      type: String,
+      default: "",
+    },
+    end_date: {
+      type: String,
+      default: "",
+    },
+    adminId: {
+      type: Array,
+      default: [],
+    },
+  },
+  watch: {},
+  data() {
+    return {
+      radio: 1,
+    };
+  },
+  methods: {
+    // 关闭弹框
+    cancelHandle() {
+      this.$emit("update:isNotRenewedDlg", false);
+    },
+    // 下载
+    downloadHandle() {
+      let paramStr = "";
+
+      let baseUrl = process.env.API_ROOT + "/statistic_report/merge_company/company_contract_percentage/list_export";
+      let token = localStorage.getItem("auth") || "";
+      let salesArr = [];
+      if (this.adminId.length) {
+        salesArr = this.adminId.map((item) => {
+          return item[item.length - 1];
+        });
+      }
+      let obj = {
+        EndDate: this.end_date,
+        StartDate: this.start_date,
+        ExportType: this.radio,
+        AdminId: salesArr.join(","),
+      };
+      for (let key in obj) {
+        paramStr = `${paramStr}&${key}=${obj[key]}`;
+      }
+      let link = document.createElement("a");
+      link.style.display = "none";
+      link.href = `${baseUrl}?${token}${paramStr}`;
+      link.setAttribute("download", name);
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+    },
+  },
+  created() {},
+  mounted() {},
+};
+</script>
+<style lang="scss"></style>

src/views/dataReport_manage/components/previousDetail.vue

@@ -1,6 +1,6 @@
 <template>
   <el-dialog v-dialogDrag :visible.sync="previousDetailDlg" @close="handleClose" :modal-append-to-body="false" center title="维持套餐">
-    <p>上一份合同信息</p>
+    <p>上一年合同信息</p>
     <el-table :data="dataList" border max-height="250" style="margin: 20px 0">
       <el-table-column label="合同期限" prop="StartDate" align="center" width="220">
         <template slot-scope="{ row }">
@@ -43,12 +43,14 @@ export default {
     },
     async getrenewalReasonList() {
       console.log(this.rowInfo);
-      const res = await dataMainInterface.mergeCompanyPreviousDetail({
+      const res = await dataMainInterface.mergeCompanyPreviousDetailYear({
         CompanyContractId: this.rowInfo.CompanyContractId,
       });
       if (res.Ret == 200) {
-        this.dataList = [res.Data.Detail];
-        console.log(this.dataList);
+
+        this.dataList = res.Data.List || []
+
+        // console.log(this.dataList);
       }
     },
   },

src/views/dataReport_manage/configdata.js

@@ -62,11 +62,6 @@ export const incrementTableColums = [
     textsty: "color:#409EFF;cursor:pointer;",
     link: true,
   },
-  {
-    label: "客户类型",
-    key: "ProductName",
-    widthsty: "100px",
-  },
   {
     label: "不续约归因",
     key: "AscribeContent",
@@ -136,7 +131,6 @@ export const incrementTableColums = [
     sort: true,
   },
 ];
-/* 存量客户表格列 */
 export const stockTableColums = [
   {
     label: "客户名称",
@@ -202,6 +196,79 @@ export const stockTableColums = [
     dataType: "未续约客户",
   },
 ];
+
+/* 存量客户表格列 */
+export const RaiStockTableColums = [
+  {
+    label: "客户名称",
+    key: "CompanyName",
+    widthsty: "300px",
+    textsty: "color:#409EFF;cursor:pointer;",
+    link: true,
+  },
+  {
+    label: "不续约归因",
+    key: "AscribeContent",
+    dataType: "未续约客户",
+    notRenewedConfirm: 1,
+    sort: true,
+  },
+  {
+    label: "客户状态",
+    key: "Status",
+    dataType: "未续约客户",
+  },
+  {
+    label: "所属销售",
+    key: "SellerName",
+    widthsty: "150px",
+  },
+  {
+    label: "服务销售",
+    key: "ShareSeller",
+    dataType: "新签客户,续约客户",
+  },
+  {
+    label: "合同期限",
+    dataType: "新签客户,续约客户",
+    key: "StartDate"
+  },
+  {
+    label: "合同金额",
+    dataType: "新签客户,续约客户",
+    key: "Money",
+  },
+  {
+    label: "签约套餐",
+    dataType: "新签客户,续约客户",
+    key: "PermissionName",
+  },
+  {
+    label: "最近合同到期时间",
+    key: "EndDate",
+    dataType: "未续约客户",
+  },
+  {
+    label: "备注",
+    key: "Remark",
+    dataType: "未续约客户",
+    widthsty: "100px",
+    sort: true,
+  },
+  {
+    label: "未续约说明",
+    key: "RenewalReason",
+    dataType: "未续约客户",
+    widthsty: "300px",
+  },
+  {
+    label: "超出到期时间(天)",
+    key: "ExpireDay",
+    widthsty: "150px",
+    dataType: "未续约客户",
+  },
+];
+
 /* 合同列表表格列 */
 export const contractTableColums = [
   {
@@ -315,6 +382,11 @@ export const equityTableColums = (type) => {
           key: "SellerName",
           widthsty: "150px",
         },
+        {
+          label: "服务销售",
+          key: "ShareSeller",
+          widthsty: "150px",
+        },
         {
           label: "合同期限",
           align: "center",
@@ -351,8 +423,13 @@ export const equityTableColums = (type) => {
           widthsty: "150px",
         },
         {
-          label: "合同到期时间",
-          key: "EndDate",
+          label: "服务销售",
+          key: "ShareSeller",
+          widthsty: "150px",
+        },
+        {
+          label: "合同期限",
+          key: "StartDate",
           dataType: "未续约客户",
           sort: true,
         },
@@ -366,20 +443,6 @@ export const equityTableColums = (type) => {
           key: "Money",
           dataType: "新签客户",
         },
-        {
-          label: "未续约说明",
-          key: "RenewalReason",
-          dataType: "未续约客户",
-          widthsty: "300px",
-          sort: true,
-        },
-        {
-          label: "备注",
-          key: "Remark",
-          dataType: "未续约客户",
-          widthsty: "100px",
-          sort: true,
-        },
         {
           label: "不续约归因",
           key: "AscribeContent",
@@ -387,5 +450,22 @@ export const equityTableColums = (type) => {
           sort: true,
         },
       ]
-    : [];
+    : type === "新增试用客户" 
+    ? [ {
+      label: "客户名称",
+      key: "CompanyName",
+      widthsty: "300px",
+      textsty: "color:#409EFF;cursor:pointer;",
+      link: true,
+    },
+    {
+      label: "所属销售",
+      key: "SellerName",
+      widthsty: "150px",
+    },
+    {
+      label: "新增时间",
+      key: "CreateTime",
+    }]
+    :[];
 };

src/views/dataReport_manage/equityCustomStatistics.vue

@@ -37,7 +37,10 @@
                 {{ lableTextDisplay(item.label) }}数
                 <el-tooltip class="item" effect="dark" :content="item.label === '新签客户' ? '<br />' : item.label === '续约客户' ? '起始时间在所选时间段内的续约合同' : ''" placement="top">
                   <template slot="content">
-                    <div v-if="item.label === '新签客户'">
+                    <div v-if="item.label === '新增试用客户'">
+                      <p>新建试用客户的时间，包含在所选时间段内的客户数（流失领取的不计入）</p>
+                    </div>
+                    <div v-else-if="item.label === '新签客户'">
                       <p>起始时间在所选时间段内的新签合同</p>
                       <p>（第一份合同起始时间一年内的再次签约仍属于新签合同）</p>
                     </div>
@@ -45,7 +48,7 @@
                       <p>起始时间在所选时间段内的续约合同</p>
                       <p>（第一份合同起始时间一年以后的再次签约均属于续约合同）</p>
                     </div>
-                    <p v-else>合同截止时间在所选时间段内的非正式、非永续客户</p>
+                    <p v-else>当前客户状态为非正式、非X类试用，且截止时间在所选时间段内的合同数（打分客户佣金不计入）</p>
                   </template>
                   <i class="el-icon-info"></i>
                 </el-tooltip>
@@ -53,7 +56,9 @@
             </div>
             <div class="card-cont">
               {{
-                item.label === "新签客户"
+                item.label === "新增试用客户"
+                  ? TrialTotal
+                  : item.label === "新签客户"
                   ? NewCompanyTotal
                   : item.label === "续约客户"
                   ? RenewalCompanyTotal
@@ -64,54 +69,45 @@
             </div>
           </el-card>
         </div>
-        <div class="annual-select-content">
-          <div class="select-content">
-            <div class="lable-text">
-              不续约率
-              <el-tooltip style="margin-right: 16px" class="item" effect="dark" content="所选年度的续约合同/所选年度的到期合同" placement="top-start">
-                <template slot="content">
-                  <div>
-                    <p>所选时间段的已确认不续约的合同金额/所选时间段的到期的合同金额</p>
-                    <p>（剔除非业务不续约的金额）</p>
-                  </div>
-                </template>
-                <i class="el-icon-info" style="color: #999"></i>
-              </el-tooltip>
-            </div>
-            <el-date-picker
-              v-model="yearValue"
-              type="daterange"
-              format="yyyy-MM-dd"
-              value-format="yyyy-MM-dd"
-              :clearable="false"
-              @change="getIncrementalCompanyContractPercentageList"
-              range-separator="至"
-              start-placeholder="开始日期"
-              end-placeholder="结束日期"
-            >
-            </el-date-picker>
-          </div>
-          <div class="select-content">
-            <span class="editsty" v-if="RenewalDataForm.RenewalRateMoney" @click="renewalRateLableHandler">&nbsp;&nbsp;{{ RenewalDataForm.RenewalRateMoney }}&nbsp;&nbsp;</span>
-            {{ RenewalDataForm.RenewalRateTotalContent ? `(${RenewalDataForm.RenewalRateTotalContent})` : " -  -" }}
-          </div>
-        </div>
       </div>
       <div class="tabs-box">
-        <div class="tabs-box-confirm" v-if="filterObj.data_type =='续约客户'">
+        <div class="tabs-box-confirm"  v-if="filterObj.data_type == '续约客户'">
           <div style="margin-bottom: 0px" class="tabs-box-confirm" v-for="(item, index) in packageTypeList" :key="item">
             <div :class="['confirm-box-li', PackageDifference == item && 'active']" @click="notPackageDifferenceChange(item)">{{ item }}</div>
             <div v-if="index != 2" class="center-line"></div>
           </div>
+            <el-tooltip style="margin-right: 16px" class="item" effect="dark" content="今年续约合同总金额与上年度合同总金额对比" placement="top-start">
+             
+              <i class="el-icon-info" style="color: #999"></i>
+            </el-tooltip>
         </div>
       </div>
       <div class="tabs-box" v-if="filterObj.data_type == '未续约客户'">
-        <el-radio-group v-model="isNotRenewedConfirm" class="tabs-box-confirm" @change="notRenewedConfirmChange">
-          <el-radio-button :label="1">已确认</el-radio-button>
-          <div class="center-line"></div>
-          <el-radio-button :label="0">待确认</el-radio-button>
-        </el-radio-group>
-        <div class="tabs-box-status" v-show="isNotRenewedConfirm">
+        <div style="display: flex; align-items: cente; margin-bottom: 20px">
+          <el-radio-group v-model="isNotRenewedConfirm" style="margin: 0px 20px 0 0" class="tabs-box-confirm" @change="notRenewedConfirmChange">
+            <el-radio-button :label="1">已确认</el-radio-button>
+            <div class="center-line"></div>
+            <el-radio-button :label="0">待确认</el-radio-button>
+            <div class="center-line"></div>
+            <el-radio-button :label="2">到期合同</el-radio-button>
+          </el-radio-group>
+          <div class="lable-text">
+            未续约率
+            <el-tooltip style="margin-right: 16px" class="item" effect="dark" content="所选年度的续约合同/所选年度的到期合同" placement="top-start">
+              <template slot="content">
+                <div>
+                  <p>所选时间段的已确认不续约的合同金额/所选时间段的到期的合同金额</p>
+                  <p>（剔除非业务不续约的金额）</p>
+                </div>
+              </template>
+              <i class="el-icon-info" style="color: #999"></i>
+            </el-tooltip>
+            <p class="editsty" v-if="RenewalDataForm.RenewalRateMoney" @click="renewalRateLableHandler">&nbsp;&nbsp;{{ RenewalDataForm.RenewalRateMoney }}&nbsp;&nbsp;</p>
+            {{ RenewalDataForm.RenewalRateTotalContent ? `(${RenewalDataForm.RenewalRateTotalContent})` : " -  -" }}
+            <el-button v-if="canConfirmNotRenewed" type="primary" size="mini" style="margin-left: 20px" @click="isNotRenewedDlg = true">下载</el-button>
+          </div>
+        </div>
+        <div v-show="isNotRenewedConfirm">
           <el-select v-model="noRenewalReasonId" placeholder="请选择不续约归因" clearable @change="getTableData" style="width: 240px; margin-right: 50px">
             <el-option :label="item.AscribeContent" :value="item.CompanyAscribeId" v-for="item in noRenewalReasonList" :key="item.reasonId"></el-option>
           </el-select>
@@ -207,6 +203,7 @@
     <previous-detail :previousDetailDlg.sync="previousDetailDlg" :rowInfo="rowInfo" />
     <RenewalRateDetail :showRenewalRateDetailDlg.sync="showRenewalRateDetailDlg" :renewalRateDetailForm.sync="renewalRateDetailForm" :noRenewalReasonListSon="noRenewalReasonList" />
     <historical-notes-dlg :historicalNotesDlgVisible.sync="historicalNotesDlgVisible" :CompanyId.sync="historicalNotesId" />
+    <NotRenewedDlg :isNotRenewedDlg.sync="isNotRenewedDlg" :start_date="start_date" :end_date="end_date" :adminId="filterObj.sale" />
   </div>
 </template>
 
@@ -221,12 +218,13 @@ import confirmedNoRenewal from "./components/noRenewalReasonDia/confirmedNoRenew
 import PreviousDetail from "./components/previousDetail.vue";
 import RenewalRateDetail from "./components/renewalRateDetail.vue";
 import HistoricalNotesDlg from "@/components/historicalNotesDlg.vue";
-
+import NotRenewedDlg from "./components/NotRenewedDlg.vue";
 var moment = require("moment");
 moment().format();
 export default {
   name: "",
-  components: { mPage, renewalListDia, addRemark, viewRemark, confirmedNoRenewal, PreviousDetail, RenewalRateDetail, HistoricalNotesDlg },
+  components: { mPage, renewalListDia, addRemark, viewRemark, confirmedNoRenewal, PreviousDetail, RenewalRateDetail, HistoricalNotesDlg, NotRenewedDlg },
+
   computed: {
     exportExcel() {
       let baseUrl = process.env.API_ROOT + "/statistic_report/merge_company_list";
@@ -283,7 +281,7 @@ export default {
         month: "近1个月",
         date: [],
         sale: "",
-        data_type: "新签客户",
+        data_type: "新增试用客户",
       },
       monthLabel: [
         {
@@ -307,6 +305,9 @@ export default {
       page_no: sessionStorage.getItem("incrementBack") ? JSON.parse(sessionStorage.getItem("incrementBack")).page_no : 1,
       total: 0,
       data_typeArr: [
+        {
+          label: "新增试用客户",
+        },
         {
           label: "新签客户",
         },
@@ -328,6 +329,7 @@ export default {
         { name: "冻结/流失", value: "非试用" },
       ],
       tabsActiveName: "",
+      TrialTotal: 0, //新增试用数
       NotRenewalNotTryOut: 0, //冻结流失的人数
       NotRenewalTryOut: 0, //试用的人数
       isNotRenewedConfirm: 1, //未续约的是否已确认
@@ -356,6 +358,8 @@ export default {
 
       historicalNotesDlgVisible: false, //历史备注的弹框
       historicalNotesId: 0,
+
+      isNotRenewedDlg: false, //未续约 弹框
     };
   },
   /* 页面跳转前记录参数 */
@@ -456,6 +460,7 @@ export default {
         if (res.Ret === 200) {
           this.tableData = res.Data.List || [];
           this.total = res.Data.Paging.Totals;
+          this.TrialTotal = res.Data.TrialTotal;
           this.NewCompanyTotal = res.Data.NewCompanyTotal;
           this.RenewalCompanyTotal = res.Data.RenewalCompanyTotal;
           this.NotRenewalCompanyTotal = res.Data.NotRenewalCompanyTotal;
@@ -479,6 +484,7 @@ export default {
       this.filterObj.month = label;
       let days = label == "近1个月" ? 1 : label == "近2个月" ? 2 : label == "近3个月" ? 3 : 0;
       this.filterDate(days);
+      this.getIncrementalCompanyContractPercentageList();
     },
     /* 选择服务日期 */
     dateChange(e) {
@@ -502,6 +508,7 @@ export default {
       this.incrementTableColums = equityTableColums(this.filterObj.data_type);
       this.noRenewalReasonId = "";
       if (label == "未续约客户") {
+        this.getIncrementalCompanyContractPercentageList();
         this.getNORenewalReasonList();
       }
       this.tabsActiveName = "";
@@ -513,9 +520,7 @@ export default {
       this.page_no = 1;
       this.searchVal = "";
       this.getTableData();
-      if (this.yearValue.length > 0) {
-        this.getIncrementalCompanyContractPercentageList();
-      }
+      this.getIncrementalCompanyContractPercentageList();
     },
     /* 切换页码 */
     handleCurrentChange(page) {
@@ -630,14 +635,15 @@ export default {
       this.previousDetailDlg = true;
     },
     lableTextDisplay(text) {
-      let str = text == "新签客户" ? "新签合同" : text == "续约客户" ? "续约合同" : "未续约客户";
+      
+      let str = text == "新增试用客户" ? "新增试用客户" : text == "新签客户" ? "新签合同" : text == "续约客户" ? "续约合同" : "未续约客户";
       return str;
     },
-    // 年度续约的标签点击事件
-    annualSelectHandler(item) {
-      this.annualSelectActivue = item.name;
-      this.getIncrementalCompanyContractPercentageList();
-    },
+    // // 年度续约的标签点击事件
+    // annualSelectHandler(item) {
+    //   this.annualSelectActivue = item.name;
+    //   this.getIncrementalCompanyContractPercentageList();
+    // },
     // 点击了续约率
     renewalRateLableHandler() {
       this.showRenewalRateDetailDlg = true;
@@ -645,6 +651,7 @@ export default {
     },
     // 获取年度续约的数据
     async getIncrementalCompanyContractPercentageList() {
+      if (this.filterObj.data_type != "未续约客户") return;
       let params = this.initCompanyContractPercentageList();
       const res = await dataMainInterface.incrementalCompanyContractPercentageListV2(params);
       if (res.Ret === 200) {
@@ -660,8 +667,8 @@ export default {
         });
       }
       let params = {
-        EndDate: this.yearValue.length > 0 ? this.yearValue[1] : "",
-        StartDate: this.yearValue.length > 0 ? this.yearValue[0] : "",
+        EndDate: this.end_date,
+        StartDate: this.start_date,
         AdminId: salesArr.join(","),
       };
       return params;
@@ -750,34 +757,29 @@ export default {
 .package-difference {
   cursor: pointer;
 }
-.annual-select-content {
-  .select-content {
-    display: flex;
-    align-items: center;
-    margin-bottom: 15px;
-    .lable-text {
-      flex-shrink: 0;
-    }
-    .select-lable {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      box-sizing: border-box;
-      margin-left: 10px;
-      width: 92px;
-      height: 40px;
-      color: #409eff;
-      background-color: #ecf5ff;
-      border: 1px solid #b3d8ff;
-      border-radius: 4px;
-      cursor: pointer;
-    }
-    .act-select-lable {
-      color: #fff;
-      background-color: #409eff;
-      border: none;
-    }
-  }
+
+.lable-text {
+  display: flex;
+  align-items: center;
+}
+.select-lable {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  margin-left: 10px;
+  width: 92px;
+  height: 40px;
+  color: #409eff;
+  background-color: #ecf5ff;
+  border: 1px solid #b3d8ff;
+  border-radius: 4px;
+  cursor: pointer;
+}
+.act-select-lable {
+  color: #fff;
+  background-color: #409eff;
+  border: none;
 }
 </style>
 <style lang="scss">

src/views/dataReport_manage/raiStockCutomList.vue

@@ -0,0 +1,486 @@
+<template>
+  <div class="dataReport-container">
+    <div class="dataReport-main first">
+      <div class="main-top" style="display: flex; align-items: center">
+        <a :href="exportExcel" download>
+          <el-button type="primary" style="margin-right: 10px; margin-bottom: 8px">导出EXCEL</el-button>
+        </a>
+
+        <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>
+
+        <el-input placeholder="请输入客户名称" v-model="searchVal" style="max-width: 400px; margin-left: auto; margin-bottom: 8px" @input="handleSearch" clearable>
+          <i slot="prefix" class="el-input__icon el-icon-search"></i>
+        </el-input>
+      </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 === '续约客户'
+                        ? '当前为正式状态，且处于第一份合同起始日一年以外的客户'
+                        : '历史上有过正式记录，且当前为非正式、非X类试用状态的客户'
+                    "
+                    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>
+      <div>
+        <el-select v-model="noRenewalReasonId" placeholder="请选择不续约归因" v-show="filterObj.data_type == '未续约客户'" clearable @change="getTableData" style="width: 240px; margin-top: 40px">
+          <el-option :label="item.AscribeContent" :value="item.CompanyAscribeId" v-for="item in noRenewalReasonList" :key="item.reasonId"></el-option>
+        </el-select>
+        <el-select v-model="tabsActiveName" placeholder="当前状态" v-show="filterObj.data_type == '未续约客户'" clearable @change="getTableData" style="width: 240px; margin-left: 20px">
+          <el-option :label="item.name" :value="item.value" v-for="item in tabsList" :key="item.value"></el-option>
+        </el-select>
+      </div>
+
+      <el-table :data="tableData" border v-loading="isShowloadding" element-loading-text="数据加载中..." style="margin-top: 20px; min-height: 400px">
+        <template v-for="item in stockTableColums">
+          <el-table-column :key="item.label" :label="item.label" :width="item.widthsty" align="center" v-if="!item.dataType || item.dataType.split(',').includes(filterObj.data_type)">
+            <template slot-scope="scope">
+              <span :style="item.textsty" @click="jumpHandle(scope.row, item)" v-if="item.label == '服务期限' || item.label == '最近合同到期时间'">
+                {{
+                  item.label == "服务期限" && scope.row.StartDate.indexOf("/") == -1
+                    ? scope.row.StartDate + "~" + scope.row.EndDate
+                    : item.label == "服务期限" && scope.row.StartDate.indexOf("/") != -1
+                    ? scope.row.StartDate.substr(0, 10) + "~" + scope.row.EndDate.substr(0, 10) + "/" + scope.row.StartDate.substr(11) + "~" + scope.row.EndDate.substr(11)
+                    : scope.row[item.key] | formatTime
+                }}
+              </span>
+              <span v-else-if="item.label == '合同期限'">
+                <span>{{ scope.row.StartDate }} ~ {{ scope.row.EndDate }}</span>
+              </span>
+              <span v-else-if="item.label == '未续约说明'">
+                <span style="display: block" v-if="scope.row[item.key]">最新情况：{{ scope.row[item.key] }}</span>
+                <span v-if="scope.row.RenewalTodo">To Do 事项：{{ scope.row.RenewalTodo }}</span>
+                <span v-if="scope.row[item.key] || scope.row.RenewalTodo" style="color: #409eff; cursor: pointer" @click="renewalReasonMore(scope.row)">&emsp;更多>></span>
+              </span>
+              <!-- <div v-else-if="item.key == 'CompanyName'" style="padding: 4px 0">
+                <span :style="item.textsty" @click="jumpHandle(scope.row, item)">
+                  {{ scope.row[item.key] }}
+                </span>
+                <div class="package-difference" v-if="scope.row.PackageDifference">
+                  {{ scope.row.PackageDifference }}
+                </div>
+              </div> -->
+               <div v-else-if="item.key == 'CompanyName'" style="padding: 4px 0">
+                <el-tooltip effect="dark" placement="top-start" content="过去4周，kp均未覆盖服务" v-if="scope.row.IsUserMaker == -1">
+                  <span class="deletesty" @click="jumpHandle(scope.row, item)">{{ scope.row[item.key] }}</span>
+                </el-tooltip>
+                <span v-else class="editsty" @click="jumpHandle(scope.row, item)">{{ scope.row[item.key] }}</span>
+                <div class="package-difference" v-if="scope.row.PackageDifference" @click="previousDetailHadler(scope.row)">
+                  {{ scope.row.PackageDifference }}
+                </div>
+              </div>
+              <div v-else-if="item.key === 'Remark'" class="remark-row">
+                <span class="remark-text" @click="viewHistoryRemarkFun(scope.row)" v-if="scope.row.IsShowNoRenewedNote">...</span>
+              </div>
+              <div v-else-if="item.key == 'AscribeContent'">
+                <span style="color: #409eff; cursor: pointer" @click="editReasonLabel(scope.row)">
+                  {{ scope.row[item.key] }}
+                </span>
+              </div>
+              <span v-else :style="item.textsty" @click="jumpHandle(scope.row, item)">
+                {{ scope.row[item.key] }}
+              </span>
+            </template>
+          </el-table-column>
+        </template>
+        <el-table-column label="操作" width="180px" align="center">
+          <template slot-scope="{ row }">
+            <span v-if="isRoleType == 'admin' || isRoleType == '权益'" @click="historicalNotesClickHandler(row)" class="editsty">历史备注</span>
+          </template>
+        </el-table-column>
+        <div slot="empty" style="lineheight: 44px; margin: 60px 0; color: #999">
+          <img src="~@/assets/img/cus_m/nodata.png" alt="" style="display: block; width: 160px; height: 128px; margin: auto" />
+          <span>暂无数据</span>
+        </div>
+      </el-table>
+      <el-col :span="24" class="toolbar" v-if="total">
+        <m-page :total="total" :page_no="page_no" @handleCurrentChange="handleCurrentChange" />
+      </el-col>
+    </div>
+    <!-- 未续约说明列表弹窗 -->
+    <renewalListDia :isShow.sync="isRenewalShow" :rowInfo="rowInfo" />
+    <!-- 历史备注弹窗 -->
+    <viewRemark :isShow.sync="isViewRemarkShow" :tableData="historyRemarkList" />
+    <!-- 确认不续约弹窗 -->
+    <confirmedNoRenewal
+      :isShow.sync="isConfirmNoRenewalShow"
+      :dataForm="confirmNoRenewalForm"
+      :noRenewalReasonList="noRenewalReasonList"
+      @refreshReasonList="getNORenewalReasonList"
+      @saveLabel="saveLabel"
+    />
+
+    <!-- 历史备注的弹框 -->
+    <HistoricalNotesDlg :historicalNotesDlgVisible.sync="historicalNotesDlgVisible" :CompanyId.sync="historicalNotesId" />
+  </div>
+</template>
+
+<script>
+import { RaiStockTableColums } from "./configdata.js";
+import { dataMainInterface, customInterence } from "@/api/api.js";
+import mPage from "@/components/mPage.vue";
+import renewalListDia from "./components/renewalListDia.vue";
+import viewRemark from "./components/noRenewalReasonDia/viewRemark.vue";
+import confirmedNoRenewal from "./components/noRenewalReasonDia/confirmedNoRenewal.vue";
+import HistoricalNotesDlg from "@/components/historicalNotesDlg.vue";
+
+var moment = require("moment");
+moment().format();
+export default {
+  name: "",
+  components: { mPage, renewalListDia, viewRemark, confirmedNoRenewal, HistoricalNotesDlg },
+  computed: {
+    exportExcel() {
+      let baseUrl = process.env.API_ROOT + "/statistic_report/stack_company_list_rai";
+      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 = {
+        PageSize: this.pageSize,
+        CurrentIndex: this.page_no,
+        CompanyType: this.filterObj.type,
+        AdminId: salesArr.join(","),
+        RegionType: this.filterObj.area,
+        Date: this.filterObj.date,
+        DataType: this.filterObj.data_type,
+        Keyword: this.searchVal,
+        IsExport: true,
+        IsConfirm: this.filterObj.data_type == "未续约客户" ? 1 : -1,
+        CompanyAscribeId: this.noRenewalReasonId,
+      };
+      for (let key in obj) {
+        paramStr = `${paramStr}&${key}=${obj[key]}`;
+      }
+      return `${baseUrl}?${token}${paramStr}`;
+    },
+
+    stockTableColums() {
+      return RaiStockTableColums;
+    },
+    Role() {
+      let role = localStorage.getItem("Role") || "";
+      return role;
+    },
+    //管理权限
+    ManageType() {
+      return localStorage.getItem("ManageType") || "";
+    },
+    // crm 15.9.1 历史备注 区分权益FICC的展示
+    isRoleType() {
+      return localStorage.getItem("RoleType") || "";
+    },
+  },
+  data() {
+    return {
+      searchVal: sessionStorage.getItem("stockBack") ? JSON.parse(sessionStorage.getItem("stockBack")).searchVal : "",
+
+      tableData: [],
+      isShowloadding: false,
+      /* 筛选条件 */
+      filterObj: {
+        date: moment().format("YYYY-MM-DD"),
+        type: "",
+        sale: "",
+        area: "",
+        data_type: this.$route.query.type || "新签客户",
+      },
+      salesArr: [], //销售列表
+      defaultSalesProps: {
+        multiple: true,
+        label: "RealName",
+        children: "ChildrenList",
+        value: "AdminId",
+      }, //销售级联配置
+      typeArr: [
+        {
+          name: "ficc",
+        },
+        {
+          name: "权益",
+        },
+      ], //类型
+      areaArr: ["国内", "海外"],
+      pageSize: 10,
+      page_no: sessionStorage.getItem("stockBack") ? JSON.parse(sessionStorage.getItem("stockBack")).page_no : 1,
+      total: 0,
+      data_typeArr: [
+        {
+          label: "新签客户",
+        },
+        {
+          label: "续约客户",
+        },
+        {
+          label: "未续约客户",
+        },
+      ], //数据类型
+      NewCompanyTotal: 0, //新签客户数
+      NotRenewalCompanyTotal: 0, //未续约客户数
+      RenewalCompanyTotal: 0, //续约客户数
+      isRenewalShow: false, //未续约说明列表弹框是否显示
+      rowInfo: null, // 未续约说明更多行信息
+      tabsList: [
+        { name: "试用", value: "试用" },
+        { name: "冻结/流失", value: "非试用" },
+      ],
+      tabsActiveName: "",
+      NotRenewalNotTryOut: 0, //冻结流失的人数
+      NotRenewalTryOut: 0, //试用的人数
+      noRenewalReasonList: [],
+      noRenewalReasonId: "",
+      selectItemRow: {}, // 当前选中的row
+      //历史备注
+      isViewRemarkShow: false,
+      historyRemarkList: [],
+      //确认不续约
+      isConfirmNoRenewalShow: false,
+      confirmNoRenewalForm: {
+        reason: "",
+        detailReason: "",
+      },
+
+      historicalNotesDlgVisible: false, //历史备注的弹框
+      historicalNotesId: 0,
+    };
+  },
+  /* 页面跳转前记录参数 */
+  beforeRouteLeave(to, form, next) {
+    let backData = {
+      page_no: this.page_no,
+      filterObj: this.filterObj,
+      searchVal: this.searchVal,
+    };
+    sessionStorage.setItem("stockBack", JSON.stringify(backData));
+    next();
+  },
+  /* 页面进入前是否清除参数 */
+  beforeRouteEnter(to, from, next) {
+    if (from.path != "/customDetail") {
+      sessionStorage.removeItem("stockBack");
+    }
+    next();
+  },
+  methods: {
+    // 搜索
+    handleSearch() {
+      this.page_no = 1;
+      this.filterObj = {
+        date: this.filterObj.date,
+        type: "",
+        sale: "",
+        area: "",
+        data_type: this.filterObj.data_type,
+      };
+      this.getTableData();
+    },
+    //tabs 的点击事件
+    tabsHandler(item) {
+      this.tabsActiveName = item.value;
+      this.page_no = 1;
+      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 = {
+        PageSize: this.pageSize,
+        CurrentIndex: this.page_no,
+        CompanyType: this.filterObj.type,
+        AdminId: salesArr.join(","),
+        RegionType: this.filterObj.area,
+        Date: this.filterObj.date,
+        DataType: this.filterObj.data_type,
+        Keyword: this.searchVal,
+        TryOutType: this.filterObj.data_type == "未续约客户" ? this.tabsActiveName : "",
+        IsConfirm: -1,
+        CompanyAscribeId: this.noRenewalReasonId,
+      };
+      dataMainInterface.raiStackList(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.NotRenewalTryOut = res.Data.NotRenewalTryOut || 0;
+          this.NotRenewalNotTryOut = res.Data.NotRenewalNotTryOut || 0;
+          this.isShowloadding = false;
+        }
+      });
+    },
+    /* 获取销售 */
+    getSale() {
+      customInterence.getSalesRaiData().then((res) => {
+        if (res.Ret === 200) {
+          this.salesArr = res.Data.List;
+        }
+      });
+    },
+    /* 切换数据类型 */
+    toggleType(label) {
+      this.filterObj.data_type = label;
+      if (label == "未续约客户") {
+        this.getNORenewalReasonList();
+      }
+      this.noRenewalReasonId = "";
+      this.tabsActiveName = "";
+      this.page_no = 1;
+      this.searchVal = "";
+      this.getTableData();
+    },
+    /* 筛选改变时 */
+    changeFilter() {
+      this.page_no = 1;
+      this.searchVal = "";
+      this.getTableData();
+    },
+    /* 切换页码 */
+    handleCurrentChange(page) {
+      this.page_no = page;
+      this.getTableData();
+    },
+    /* 跳转 */
+    jumpHandle(row, item) {
+      if (item.link) {
+        this.$router.push({
+          path: "/customDetail",
+          query: {
+            id: row.CompanyId,
+          },
+        });
+      }
+    },
+
+    // 未续约说明更多按钮
+    renewalReasonMore(row) {
+      this.rowInfo = {
+        CompanyId: row.CompanyId,
+        ProductId: row.ProductId,
+      };
+      this.isRenewalShow = true;
+    },
+    getNORenewalReasonList() {
+      dataMainInterface.getAscribList().then((res) => {
+        if (res.Ret == 200) {
+          this.noRenewalReasonList = res.Data.List || [];
+        }
+      });
+    },
+    // 查看历史备注
+    viewHistoryRemarkFun(row) {
+      // console.log(row);
+      dataMainInterface.getNotRenewedRemarkList({ CompanyId: row.CompanyId, ProductId: row.ProductId }).then((res) => {
+        if (res.Ret == 200) {
+          this.historyRemarkList = res.Data.List || [];
+          this.isViewRemarkShow = true;
+        }
+      });
+    },
+    editReasonLabel(row) {
+      // console.log(row);
+      dataMainInterface.infoNoRenewedAscribe({ CompanyId: row.CompanyId, ProductId: row.ProductId }).then((res) => {
+        if (res.Ret == 200) {
+          this.confirmNoRenewalForm.reason = res.Data.Detail ? res.Data.Detail.CompanyAscribeId || "" : "";
+          this.confirmNoRenewalForm.detailReason = res.Data.Detail ? res.Data.Detail.Content || "" : "";
+          this.selectItemRow = row;
+          this.isConfirmNoRenewalShow = true;
+        }
+      });
+    },
+    saveLabel(item) {
+      // console.log(item);
+      let params = {
+        CompanyId: this.selectItemRow.CompanyId,
+        ProductId: this.selectItemRow.ProductId,
+        CompanyAscribeId: item.CompanyAscribeId,
+        Content: item.Content,
+      };
+      dataMainInterface.addNoRenewedAscribe(params).then((res) => {
+        if (res.Ret == 200) {
+          this.$message.success("确认成功");
+          this.isConfirmNoRenewalShow = false;
+          this.selectItemRow = {};
+          this.getTableData();
+        }
+      });
+    },
+    // 点击了历史留言
+    historicalNotesClickHandler(item) {
+      this.historicalNotesDlgVisible = true;
+      this.historicalNotesId = item.CompanyId;
+    },
+  },
+  created() {},
+  mounted() {
+    this.getSale();
+    if (sessionStorage.getItem("stockBack")) {
+      let backData = JSON.parse(sessionStorage.getItem("stockBack"));
+      this.page_no = backData.page_no;
+      this.filterObj = backData.filterObj;
+      this.searchVal = backData.searchVal;
+    }
+    this.getTableData();
+  },
+};
+</script>
+<style lang="scss" scoped>
+@import "./index.scss";
+.remark-row {
+  display: flex;
+  justify-content: center;
+  .remark-text {
+    width: 18px;
+    height: 18px;
+    margin-right: 8px;
+    font-size: 18px;
+    color: #409eff;
+    cursor: pointer;
+  }
+}
+</style>