init

src/views/dataReport_manage/components/RenewalRateDetail.vue

@@ -0,0 +1,135 @@
+<template>
+  <div class="renewal-rate-detail-content">
+    <el-dialog :visible.sync="showRenewalRateDetailDlg" title="续约率详情" :close-on-click-modal="false" :modal-append-to-body="false" @close="cancelHandle" width="860px" v-dialogDrag center>
+      <div>
+        <el-tabs v-model="activeName" @tab-click="handleClick">
+          <el-tab-pane label="续约合同" name="first"></el-tab-pane>
+          <el-tab-pane label="到期合同" name="second"></el-tab-pane>
+        </el-tabs>
+      </div>
+      <p>共有续约合同 xx 份，续约总金额 xx 元</p>
+      <div class="table-wrap">
+        <el-table v-if="tableData" :data="tableData" max-height="600" border style="width: 100%; margin-bottom: 20px">
+          <el-table-column label="公司名称" prop="CompanyName" align="center">
+            <template slot-scope="{ row }">
+              <span class="editsty" @click="goCompanyHandle(row)">{{ row.CompanyName }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column align="center" prop="SellerName" label="所属销售"> </el-table-column>
+          <el-table-column align="center" prop="Money" label="合同金额"> </el-table-column>
+          <el-table-column label="合同期限" prop="StartDate" align="center">
+            <template slot-scope="{ row }">
+              <span>{{ row.StartDate }} ~ {{ row.EndDate }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="签约套餐" prop="PermissionName" align="center">
+            <template slot-scope="{ row }">
+              <template v-if="row.PermissionName.length">
+                <el-tag size="mini" style="margin: 0 10px 10px 0" v-for="key in row.PermissionName.split(',')" :key="key">{{ key }}</el-tag>
+              </template>
+            </template>
+          </el-table-column>
+        </el-table>
+        <el-pagination
+          layout="total,prev,pager,next"
+          background
+          :current-page="pageNo"
+          @current-change="handleCurrentChange"
+          :page-size="pageSize"
+          :total="total"
+          style="text-align: right; padding: 20px 0"
+        >
+        </el-pagination>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { dataMainInterface } from "@/api/api.js";
+export default {
+  props: {
+    showRenewalRateDetailDlg: {
+      default: false,
+      type: Boolean,
+    },
+    renewalRateDetailType: {
+      default: "",
+      type: String,
+    },
+  },
+  data() {
+    return {
+      pageNo: 1,
+      pageSize: 10,
+      total: 0,
+      tableData: [],
+      activeName: "first",
+    };
+  },
+  watch: {
+    renewalRateDetailType: {
+      handler(val) {
+        console.log(val);
+      },
+      deep:true
+    },
+  },
+  methods: {
+    cancelHandle() {
+      this.pageNo = 1;
+      this.tableData = [];
+      this.$emit("update:showRenewalRateDetailDlg", false);
+      this.$emit("update:renewalRateDetailType", '');
+    },
+    getTableData() {
+      dataMainInterface
+        .collectDetailList({
+          StartDate: this.StartDate,
+          EndDate: this.EndDate,
+          SellerIds: this.SellerIds,
+          CompanyStatus: this.customStatus,
+          UserId: OldUserId,
+          CurrentIndex: this.pageNo,
+          PageSize: this.pageSize,
+          CollectionType: this.collectionType ? this.collectionType + "" : "",
+        })
+        .then((res) => {
+          if (res.Ret !== 200) return;
+          const { Paging, List } = res.Data;
+          this.total = Paging.Totals;
+          this.tableData = List;
+        });
+    },
+    // 分页
+    handleCurrentChange(page) {
+      this.pageNo = page;
+      this.getTableData();
+    },
+    // 去往公司详情
+    goCompanyHandle(row) {
+      let { href } = this.$router.resolve({
+        path: "/customDetail",
+        query: {
+          id: row.CompanyId,
+        },
+      });
+      window.open(href, "_blank");
+    },
+    // 头部的点击事件
+    handleClick() {},
+  },
+};
+</script>
+
+<style lang="scss">
+.renewal-rate-detail-content {
+  padding: 0 25px;
+  .table-wrap {
+    margin-top: 20px;
+  }
+  .el-tabs__nav-wrap::after {
+    background-color: #fff;
+  }
+}
+</style>

src/views/dataReport_manage/equityCustomStatistics.vue

@@ -30,38 +30,62 @@
         </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>
-                  {{ lableTextDisplay(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 + " / " + NotRenewalCompanyToBeConfirmTotal
-                    : ""
-                }}
-              </div>
-            </el-card>
-          </el-col>
-        </el-row>
+        <div v-for="item in data_typeArr" :key="item.label">
+          <el-card style="margin-right: 50px" :class="['base-card', { 'main-card': filterObj.data_type === item.label }]" shadow="hover" @click.native="toggleType(item.label)">
+            <div slot="header" class="clearfix">
+              <span>
+                {{ lableTextDisplay(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 + " / " + NotRenewalCompanyToBeConfirmTotal
+                  : ""
+              }}
+            </div>
+          </el-card>
+        </div>
+        <div class="annual-select-content" v-if="filterObj.data_type == '续约客户'">
+          <div class="select-content">
+            <div class="lable-text">
+              年度续约率
+              <el-tooltip style="margin-right: 16px" class="item" effect="dark" content="所选的续约合同/所选年度的到期合同" placement="top-start">
+                <i class="el-icon-warning"></i>
+              </el-tooltip>
+            </div>
+            <div style="display: flex; align-items: center">
+              <el-date-picker style="width: 105px; margin-right: 6px" v-model="yearValue" type="year" value-format="yyyy" placeholder="选择年"> </el-date-picker>
+              <span @click="annualSelectHandler(item)" :class="['select-lable', annualSelectActivue == item.name && 'act-select-lable']" v-for="item in annualSelectList" :key="item.name">
+                {{ item.name }}
+              </span>
+            </div>
+          </div>
+          <div class="select-content">
+            <div class="lable-text">合同金额续约率:</div>
+            <span class="editsty" @click="renewalRateLableHandler('金额')">&nbsp;&nbsp;{{}}&nbsp;&nbsp;</span>
+            (xxx万元/xxx万元)
+          </div>
+          <div class="select-content">
+            <div class="lable-text">合同数量续约率:</div>
+            <span class="editsty" @click="renewalRateLableHandler('数量')">&nbsp;&nbsp;{{}}&nbsp;&nbsp;</span>
+            (xxx万元/xxx万元)
+          </div>
+        </div>
       </div>
       <div class="tabs-box" v-if="filterObj.data_type == '续约客户'">
         <div class="tabs-box-confirm">
@@ -81,9 +105,6 @@
           <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>
-          <!-- <span @click="tabsHandler(item)" :class="tabsActiveName === item.value ? 'active' : ''" v-for="item in tabsList" :key="item">
-            {{ item.name }}({{ item.name === "试用" ? NotRenewalTryOut : NotRenewalNotTryOut }})
-          </span> -->
           <el-select v-model="tabsActiveName" placeholder="当前状态" clearable @change="getTableData" style="width: 240px; margin-right: 50px">
             <el-option :label="item.name" :value="item.value" v-for="item in tabsList" :key="item.value"></el-option>
           </el-select>
@@ -171,6 +192,7 @@
       equityType="权益客户统计"
     />
     <previous-detail :previousDetailDlg.sync="previousDetailDlg" :rowInfo="rowInfo" />
+    <RenewalRateDetail :showRenewalRateDetailDlg.sync="showRenewalRateDetailDlg" :renewalRateDetailType.sync="renewalRateDetailType" />
   </div>
 </template>
 
@@ -183,12 +205,12 @@ import addRemark from "./components/noRenewalReasonDia/addRemark.vue";
 import viewRemark from "./components/noRenewalReasonDia/viewRemark.vue";
 import confirmedNoRenewal from "./components/noRenewalReasonDia/confirmedNoRenewal.vue";
 import PreviousDetail from "./components/previousDetail.vue";
-
+import RenewalRateDetail from "./components/renewalRateDetail.vue";
 var moment = require("moment");
 moment().format();
 export default {
   name: "",
-  components: { mPage, renewalListDia, addRemark, viewRemark, confirmedNoRenewal, PreviousDetail },
+  components: { mPage, renewalListDia, addRemark, viewRemark, confirmedNoRenewal, PreviousDetail, RenewalRateDetail },
   computed: {
     exportExcel() {
       let baseUrl = process.env.API_ROOT + "/statistic_report/merge_company_list";
@@ -307,6 +329,32 @@ export default {
       PackageDifference: "",
       previousDetailDlg: false,
       packageTypeList: ["增加套餐", "减少套餐", "维持套餐"],
+      yearValue: new Date().getFullYear().toString(),
+      annualSelectList: [
+        {
+          name: "全年",
+          startTime: "01-01",
+          endTime: "12-31",
+        },
+        {
+          name: "第一季度",
+          startTime: "01-01",
+          endTime: "03-31",
+        },
+        {
+          name: "前二季度",
+          startTime: "01-01",
+          endTime: "06-30",
+        },
+        {
+          name: "前三季度",
+          startTime: "01-01",
+          endTime: "09-30",
+        },
+      ],
+      annualSelectActivue: "全年",
+      showRenewalRateDetailDlg: false,
+      renewalRateDetailType: '',
     };
   },
   /* 页面跳转前记录参数 */
@@ -580,6 +628,16 @@ export default {
       let str = text == "新签客户" ? "新签合同" : text == "续约客户" ? "续约合同" : "未续约客户";
       return str;
     },
+    // 年度续约的标签点击事件
+    annualSelectHandler(item) {
+      this.annualSelectActivue = item.name;
+    },
+    // 点击了续约率
+    renewalRateLableHandler(type) {
+      this.renewalRateDetailType = type;
+      this.showRenewalRateDetailDlg = true;
+
+    },
   },
   created() {},
   mounted() {
@@ -659,6 +717,35 @@ 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;
+    }
+  }
+}
 </style>
 <style lang="scss">
 #dataReport-container {