comit

src/views/dataReport_manage/components/abnormalRenewalChart.vue

@@ -0,0 +1,53 @@
+<template>
+    <div class="abnormal-renewal-chart-wrap">
+        <div class="top-wrap">
+            <el-date-picker
+                v-model="date"
+                type="daterange"
+                range-separator="至"
+                start-placeholder="开始日期"
+                end-placeholder="结束日期"
+                :clearable="false"
+            />
+            <div style="color:#409EFF;cursor: pointer;" @click="handleClose">
+                <img src="~@/assets/img/icons/changeLang.png" alt="">
+                <span style="display:inline-block;position: relative;top:-3px;left:3px">数据表</span>
+            </div>
+        </div>
+        <div class="chart-main-wrap">
+            <h2 style="text-align:center;font-size:30px;margin-top:30px">续约异常客户统计图</h2>
+            <div class="chart-box" id="chart-box"></div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            date:''
+        }
+    },
+    methods: {
+        handleClose(){
+            this.$emit('close')
+        }
+    },
+}
+</script>
+
+<style lang="scss" scoped>
+.abnormal-renewal-chart-wrap{
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: #fff;
+    padding: 30px;
+    .top-wrap{
+        display: flex;
+        justify-content: space-between;
+    }
+}
+</style>

src/views/dataReport_manage/statistic/abnormalRenewal.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="statistic-container" ref="reference">
-        <div class="frequency-cont">
+        <div class="frequency-cont" style="position: relative;">
 			<ul class="frequency-ul">
 				<li v-for="tab in staticTabs" :key="tab" :class="{act: tab=== default_tab}" @click="changeTabHandle(tab)">{{ tab }}</li>
 			</ul>
@@ -14,6 +14,11 @@
                 placeholder="请选择统计时间"
             />
             <span style="color:#A3A3A3;display:inline-block;margin-left:20px">续约异常：合同到期后两个月内未签约</span>
+
+            <div style="color:#409EFF;position: absolute;top:10px;right:10px;cursor: pointer;" @click="showChart=true">
+                <img src="~@/assets/img/icons/changeLang.png" alt="">
+                <span style="display:inline-block;position: relative;top:-3px;left:3px">统计图</span>
+            </div>
         </div>
         <div class="table-cont" v-show="dataLoading">
             <div class="table-body-wrapper">
@@ -76,16 +81,18 @@
                 </table>
             </div>
         </div>
-
+        <abnormalRenewalChart v-show="showChart" @close="showChart=false"/>
     </div>
 </template>
 
 <script>
 import { dataMainInterface } from '@/api/api.js';
 import mixin from './mixin';
+import abnormalRenewalChart from '../components/abnormalRenewalChart.vue';
 export default {
     name:'abnormalRenewal',
     mixins: [ mixin ],
+    components:{abnormalRenewalChart},
     computed:{
         tableThead:function(){
             if(['周度统计表','月度统计表'].includes(this.default_tab)){
@@ -98,7 +105,8 @@ export default {
     data() {
         return {
             sellerList:[],
-            summaryList:[]
+            summaryList:[],
+            showChart:false,
         }
     },
     created() {
@@ -155,4 +163,8 @@ export default {
 
 <style lang="scss" scoped>
 @import './index.scss';
+.statistic-container{
+    height: calc(100vh - 180px);
+    position: relative;
+}
 </style>