Merge branch 'yjw'

pnpm-lock.yaml

@@ -19,6 +19,9 @@ dependencies:
   highcharts:
     specifier: 11.2.0
     version: 11.2.0
+  html2canvas:
+    specifier: 1.1.4
+    version: 1.1.4
   jquery:
     specifier: ^3.7.1
     version: 3.7.1
@@ -34,6 +37,9 @@ dependencies:
   pinia:
     specifier: ^2.1.7
     version: 2.1.7(vue@3.4.20)
+  v-distpicker:
+    specifier: 2.1.0
+    version: 2.1.0
   vue:
     specifier: ^3.4.19
     version: 3.4.20
@@ -586,6 +592,15 @@ packages:
       vue: 3.4.20
     dev: true
 
+  /@vue/compiler-core@3.2.47:
+    resolution: {integrity: sha512-p4D7FDnQb7+YJmO2iPEv0SQNeNzcbHdGByJDsT4lynf63AFkOTFN07HsiRSvjGo0QrxR/o3d0hUyNCUnBU2Tig==}
+    dependencies:
+      '@babel/parser': 7.23.9
+      '@vue/shared': 3.2.47
+      estree-walker: 2.0.2
+      source-map: 0.6.1
+    dev: false
+
   /@vue/compiler-core@3.4.20:
     resolution: {integrity: sha512-l7M+xUuL8hrGtRLkrf+62d9zucAdgqNBTbJ/NufCOIuJQhauhfyAKH9ra/qUctCXcULwmclGAVpvmxjbBO30qg==}
     dependencies:
@@ -595,12 +610,34 @@ packages:
       estree-walker: 2.0.2
       source-map-js: 1.0.2
 
+  /@vue/compiler-dom@3.2.47:
+    resolution: {integrity: sha512-dBBnEHEPoftUiS03a4ggEig74J2YBZ2UIeyfpcRM2tavgMWo4bsEfgCGsu+uJIL/vax9S+JztH8NmQerUo7shQ==}
+    dependencies:
+      '@vue/compiler-core': 3.2.47
+      '@vue/shared': 3.2.47
+    dev: false
+
   /@vue/compiler-dom@3.4.20:
     resolution: {integrity: sha512-/cSBGL79HFBYgDnqCNKErOav3bPde3n0sJwJM2Z09rXlkiowV/2SG1tgDAiWS1CatS4Cvo0o74e1vNeCK1R3RA==}
     dependencies:
       '@vue/compiler-core': 3.4.20
       '@vue/shared': 3.4.20
 
+  /@vue/compiler-sfc@3.2.47:
+    resolution: {integrity: sha512-rog05W+2IFfxjMcFw10tM9+f7i/+FFpZJJ5XHX72NP9eC2uRD+42M3pYcQqDXVYoj74kHMSEdQ/WmCjt8JFksQ==}
+    dependencies:
+      '@babel/parser': 7.23.9
+      '@vue/compiler-core': 3.2.47
+      '@vue/compiler-dom': 3.2.47
+      '@vue/compiler-ssr': 3.2.47
+      '@vue/reactivity-transform': 3.2.47
+      '@vue/shared': 3.2.47
+      estree-walker: 2.0.2
+      magic-string: 0.25.9
+      postcss: 8.4.35
+      source-map: 0.6.1
+    dev: false
+
   /@vue/compiler-sfc@3.4.20:
     resolution: {integrity: sha512-nPuTZz0yxTPzjyYe+9nQQsFYImcz/57UX8N3jyhl5oIUUs2jqqAMaULsAlJwve3qNYfjQzq0bwy3pqJrN9ecZw==}
     dependencies:
@@ -614,6 +651,13 @@ packages:
       postcss: 8.4.35
       source-map-js: 1.0.2
 
+  /@vue/compiler-ssr@3.2.47:
+    resolution: {integrity: sha512-wVXC+gszhulcMD8wpxMsqSOpvDZ6xKXSVWkf50Guf/S+28hTAXPDYRTbLQ3EDkOP5Xz/+SY37YiwDquKbJOgZw==}
+    dependencies:
+      '@vue/compiler-dom': 3.2.47
+      '@vue/shared': 3.2.47
+    dev: false
+
   /@vue/compiler-ssr@3.4.20:
     resolution: {integrity: sha512-b3gFQPiHLvI12C56otzBPpQhZ5kgkJ5RMv/zpLjLC2BIFwX5GktDqYQ7xg0Q2grP6uFI8al3beVKvAVxFtXmIg==}
     dependencies:
@@ -624,17 +668,48 @@ packages:
     resolution: {integrity: sha512-LgPscpE3Vs0x96PzSSB4IGVSZXZBZHpfxs+ZA1d+VEPwHdOXowy/Y2CsvCAIFrf+ssVU1pD1jidj505EpUnfbA==}
     dev: false
 
+  /@vue/reactivity-transform@3.2.47:
+    resolution: {integrity: sha512-m8lGXw8rdnPVVIdIFhf0LeQ/ixyHkH5plYuS83yop5n7ggVJU+z5v0zecwEnX7fa7HNLBhh2qngJJkxpwEEmYA==}
+    dependencies:
+      '@babel/parser': 7.23.9
+      '@vue/compiler-core': 3.2.47
+      '@vue/shared': 3.2.47
+      estree-walker: 2.0.2
+      magic-string: 0.25.9
+    dev: false
+
+  /@vue/reactivity@3.2.47:
+    resolution: {integrity: sha512-7khqQ/75oyyg+N/e+iwV6lpy1f5wq759NdlS1fpAhFXa8VeAIKGgk2E/C4VF59lx5b+Ezs5fpp/5WsRYXQiKxQ==}
+    dependencies:
+      '@vue/shared': 3.2.47
+    dev: false
+
   /@vue/reactivity@3.4.20:
     resolution: {integrity: sha512-P5LJcxUkG6inlHr6MHVA4AVFAmRYJQ7ONGWJILNjMjoYuEXFhYviSCb9BEMyszSG/1kWCZbtWQlKSLasFRpThw==}
     dependencies:
       '@vue/shared': 3.4.20
 
+  /@vue/runtime-core@3.2.47:
+    resolution: {integrity: sha512-RZxbLQIRB/K0ev0K9FXhNbBzT32H9iRtYbaXb0ZIz2usLms/D55dJR2t6cIEUn6vyhS3ALNvNthI+Q95C+NOpA==}
+    dependencies:
+      '@vue/reactivity': 3.2.47
+      '@vue/shared': 3.2.47
+    dev: false
+
   /@vue/runtime-core@3.4.20:
     resolution: {integrity: sha512-MPvsQpGAxoBqLHjqopt4YPtUYBpq0K6oAWDTwIR1CTNZ3y9O/J2ZVh+i2JpxKNYwANJBiZ20O99NE20uisB7xw==}
     dependencies:
       '@vue/reactivity': 3.4.20
       '@vue/shared': 3.4.20
 
+  /@vue/runtime-dom@3.2.47:
+    resolution: {integrity: sha512-ArXrFTjS6TsDei4qwNvgrdmHtD930KgSKGhS5M+j8QxXrDJYLqYw4RRcDy1bz1m1wMmb6j+zGLifdVHtkXA7gA==}
+    dependencies:
+      '@vue/runtime-core': 3.2.47
+      '@vue/shared': 3.2.47
+      csstype: 2.6.21
+    dev: false
+
   /@vue/runtime-dom@3.4.20:
     resolution: {integrity: sha512-OkbPVP69H+8m74543zMAAx/LIkajxufYyow41gc0s5iF0uplT5uTQ4llDYu1GeJZEI8wjL5ueiPQruk4qwOMmA==}
     dependencies:
@@ -642,6 +717,16 @@ packages:
       '@vue/shared': 3.4.20
       csstype: 3.1.3
 
+  /@vue/server-renderer@3.2.47(vue@3.2.47):
+    resolution: {integrity: sha512-dN9gc1i8EvmP9RCzvneONXsKfBRgqFeFZLurmHOveL7oH6HiFXJw5OGu294n1nHc/HMgTy6LulU/tv5/A7f/LA==}
+    peerDependencies:
+      vue: 3.2.47
+    dependencies:
+      '@vue/compiler-ssr': 3.2.47
+      '@vue/shared': 3.2.47
+      vue: 3.2.47
+    dev: false
+
   /@vue/server-renderer@3.4.20(vue@3.4.20):
     resolution: {integrity: sha512-w3VH2GuwxQHA6pJo/HCV22OfVC8Mw4oeHQM+vKeqtRK0OPE1Wilnh+P/SDVGGxPjJsGmyfphi0dbw8UKZQJH9w==}
     peerDependencies:
@@ -651,6 +736,10 @@ packages:
       '@vue/shared': 3.4.20
       vue: 3.4.20
 
+  /@vue/shared@3.2.47:
+    resolution: {integrity: sha512-BHGyyGN3Q97EZx0taMQ+OLNuZcW3d37ZEVmEAyeoA9ERdGvm9Irc/0Fua8SNyOtV1w6BS4q25wbMzJujO9HIfQ==}
+    dev: false
+
   /@vue/shared@3.4.20:
     resolution: {integrity: sha512-KTEngal0aiUvNJ6I1Chk5Ew5XqChsFsxP4GKAYXWb99zKJWjNU72p2FWEOmZWHxHcqtniOJsgnpd3zizdpfEag==}
 
@@ -719,6 +808,11 @@ packages:
       regenerator-runtime: 0.11.1
     dev: false
 
+  /base64-arraybuffer@0.2.0:
+    resolution: {integrity: sha512-7emyCsu1/xiBXgQZrscw/8KPRT44I4Yq9Pe6EGs3aPRTsWuggML1/1DTuZUuIaJPIm1FTDUVXl4x/yW8s0kQDQ==}
+    engines: {node: '>= 0.6.0'}
+    dev: false
+
   /binary-extensions@2.2.0:
     resolution: {integrity: sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==}
     engines: {node: '>=8'}
@@ -804,6 +898,16 @@ packages:
     resolution: {integrity: sha512-KALDyEYgpY+Rlob/iriUtjV6d5Eq+Y191A5g4UqLAi8CyGP9N1+FdVbkc1SxKc2r4YAYqG8JzO2KGL+AizD70Q==}
     dev: false
 
+  /css-line-break@1.1.1:
+    resolution: {integrity: sha512-1feNVaM4Fyzdj4mKPIQNL2n70MmuYzAXZ1aytlROFX1JsOo070OsugwGjj7nl6jnDJWHDM8zRZswkmeYVWZJQA==}
+    dependencies:
+      base64-arraybuffer: 0.2.0
+    dev: false
+
+  /csstype@2.6.21:
+    resolution: {integrity: sha512-Z1PhmomIfypOpoMjRQB70jfvy/wxT50qW08YXO5lMIJkrdq4yOTR+AW7FqutScmB9NkLwxo+jU+kZLbofZZq/w==}
+    dev: false
+
   /csstype@3.1.3:
     resolution: {integrity: sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==}
 
@@ -959,6 +1063,13 @@ packages:
     resolution: {integrity: sha512-9i650YK7ZBA1Mgtr3avMkLVCAI45RQvYnwi+eHsdFSaBGuQN6BHoa4j4lMkSJLv0V4LISTK1z7J7G82Lzd7zwg==}
     dev: false
 
+  /html2canvas@1.1.4:
+    resolution: {integrity: sha512-uHgQDwrXsRmFdnlOVFvHin9R7mdjjZvoBoXxicPR+NnucngkaLa5zIDW9fzMkiip0jSffyTyWedE8iVogYOeWg==}
+    engines: {node: '>=8.0.0'}
+    dependencies:
+      css-line-break: 1.1.1
+    dev: false
+
   /immutable@4.3.5:
     resolution: {integrity: sha512-8eabxkth9gZatlwl5TBuJnCsoTADlL6ftEr7A4qgdaTsPyreilDSnUk57SO+jfKcNtxPa22U5KK6DSeAYhpBJw==}
     dev: true
@@ -1029,6 +1140,12 @@ packages:
     resolution: {integrity: sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==}
     dev: false
 
+  /magic-string@0.25.9:
+    resolution: {integrity: sha512-RmF0AsMzgt25qzqqLc1+MbHmhdx0ojF2Fvs4XnOqz2ZOBXzzkEwc/dJQZCYHAn7v1jbVOjAZfK8msRn4BxO4VQ==}
+    dependencies:
+      sourcemap-codec: 1.4.8
+    dev: false
+
   /magic-string@0.30.7:
     resolution: {integrity: sha512-8vBuFF/I/+OSLRmdf2wwFCJCz+nSn0m6DPvGH1fS/KiQoSaR+sETbov0eIk9KhEKy8CYqIkIAnbohxT/4H0kuA==}
     engines: {node: '>=12'}
@@ -1179,6 +1296,16 @@ packages:
     resolution: {integrity: sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==}
     engines: {node: '>=0.10.0'}
 
+  /source-map@0.6.1:
+    resolution: {integrity: sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==}
+    engines: {node: '>=0.10.0'}
+    dev: false
+
+  /sourcemap-codec@1.4.8:
+    resolution: {integrity: sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==}
+    deprecated: Please use @jridgewell/sourcemap-codec instead
+    dev: false
+
   /supports-color@5.5.0:
     resolution: {integrity: sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==}
     engines: {node: '>=4'}
@@ -1197,6 +1324,12 @@ packages:
       is-number: 7.0.0
     dev: true
 
+  /v-distpicker@2.1.0:
+    resolution: {integrity: sha512-xFUEZHtMXzYJKGiHlBFuzzqF1rEqQKsV8cPXYTzy3FeGJBO37HYnRz76vgw16buoGeqMnusxLRL8BqtaJlpzcg==}
+    dependencies:
+      vue: 3.2.47
+    dev: false
+
   /vite-plugin-require-transform@1.0.21:
     resolution: {integrity: sha512-A3SrHhVg9tCW35O7E8kcuB71YTEdVd3EaM1zh6gbH4zxy4WzXSfcNf0UiWmaHHhr6wdFhiiAGdpR6S0SUxXkGQ==}
     dependencies:
@@ -1289,6 +1422,16 @@ packages:
       vue: 3.4.20
     dev: false
 
+  /vue@3.2.47:
+    resolution: {integrity: sha512-60188y/9Dc9WVrAZeUVSDxRQOZ+z+y5nO2ts9jWXSTkMvayiWxCWOWtBQoYjLeccfXkiiPZWAHcV+WTPhkqJHQ==}
+    dependencies:
+      '@vue/compiler-dom': 3.2.47
+      '@vue/compiler-sfc': 3.2.47
+      '@vue/runtime-dom': 3.2.47
+      '@vue/server-renderer': 3.2.47(vue@3.2.47)
+      '@vue/shared': 3.2.47
+    dev: false
+
   /vue@3.4.20:
     resolution: {integrity: sha512-xF4zDKXp67NjgORFX/HOuaiaKYjgxkaToK0KWglFQEYlCw9AqgBlj1yu5xa6YaRek47w2IGiuvpvrGg/XuQFCw==}
     peerDependencies:

src/router/modules/approvalRoutes.js

@@ -4,25 +4,30 @@ export default [
     {
 		path: "/",
 		component: Home,
-		name: '审批列表',
+		name: 'ApprovalList',
 		hidden: false,
 		icon_path: require('@/assets/img/home/custom_ico.png'),
+		meta:{
+			title:'审批管理',
+		},
 		children: [
             {
 				path: "contractapprovallist",
 				component: () => import("@/views/contract_manage/approvalList.vue"),
-				name: "合同审批",
+				name: "contractapprovallist",
 				hidden: false,
 				meta: {
+					title:'合同审批',
 					keepAlive: false
 				}
 			},
 			{
 				path: 'contractdetailapr',
 				component: () => import('@/views/contract_manage/contractDetail.vue'),
-				name: "合同详情",
+				name: "contractdetailapr",
 				hidden: false,
 				meta: {
+					title:'合同详情',
 					pathFrom: 'contractapprovallist',
 					pathName: '合同审批',
 					keepAlive: false
@@ -31,9 +36,10 @@ export default [
 			{
 				path: 'contractdetaildcapr',
 				component: () => import('@/views/contract_manage/contractDetailDC.vue'),
-				name: "代付合同详情",
+				name: "contractdetaildcapr",
 				hidden: false,
 				meta: {
+					title:'代付合同详情',
 					pathFrom: 'contractapprovallist',
 					pathName: '合同审批',
 					keepAlive: false
@@ -42,36 +48,40 @@ export default [
 			{
 				path: 'approvalList',
 				component: () => import('@/views/custom_manage/approvalList.vue'),
-				name: '客户审批',
+				name: 'approvalList',
 				hidden: false,
 				meta: {
+					title:'客户审批',
 					keepAlive: false
 				}
 			},
 			{
 				path: "sealApprovalList",
 				component: () => import('@/views/seal_manage/approvalList.vue'),
-				name: '用印审批',
+				name: 'sealApprovalList',
 				hidden: false,
 				meta: {
+					title:'用印审批',
 					keepAlive: false
 				}
 			},
 			{
 				path: "addSeal",
 				component: () => import('@/views/seal_manage/updateSeal.vue'),
-				name: '新增用印',
+				name: 'addSeal',
 				hidden: true,
 				meta: {
+					title:'新增用印',
 					keepAlive: false
 				}
 			},
 			{
 				path: "editSeal",
 				component: () => import('@/views/seal_manage/updateSeal.vue'),
-				name: '编辑用印',
+				name: 'editSeal',
 				hidden: true,
 				meta: {
+					title:'编辑用印',
 					keepAlive: false
 				}
 			}

src/router/modules/ficcXcxRoutes.js

@@ -5,24 +5,34 @@ export default [
     {
 		path: '/',
 		component: Home,
-		name: 'ficc小程序管理',
+		name: 'ficcXcxManage',
 		hidden: false,
+		meta:{
+			title:'ficc小程序管理'
+		},
         children:[
             {	
 				path:"videoManage",
-				name:"中文视频",
-				component:()=>import('@/views/interaction_manage/videoManage.vue')
+				name:"videoManage",
+				component:()=>import('@/views/interaction_manage/videoManage.vue'),
+				meta:{
+					title:'中文视频'
+				}
 			},
             {	
 				path:"videoManageEN",
-				name:"英文视频",
-				component:()=>import('@/views/interaction_manage/videoManageEN.vue')
+				name:"videoManageEN",
+				component:()=>import('@/views/interaction_manage/videoManageEN.vue'),
+				meta:{
+					title:'英文视频'
+				}
 			},
             {	
 				path:"videoManageENAdd",
-				name:"添加视频",
+				name:"videoManageENAdd",
 				component:()=>import('@/views/interaction_manage/videoManageENAdd.vue'),
 				meta: {
+					title:'添加视频',
 					pathFrom:'videoManageEN',
 					pathName:'英文视频',
 					keepAlive: false
@@ -30,22 +40,29 @@ export default [
 			},
             {	
 				path:"videoManageENEdit",
-				name:"编辑视频",
-				component:()=>import('@/views/interaction_manage/videoManageENAdd.vue')
+				name:"videoManageENEdit",
+				component:()=>import('@/views/interaction_manage/videoManageENAdd.vue'),
+				meta:{
+					title:'编辑视频'
+				}
 			},
             {
 				path: 'reportupdate',
 				component: () => import('@/views/report_manage/dayWeekUpdate.vue'),
-				name: '报告更新管理',
+				name: 'reportupdate',
 				hidden: true,
 				meta: {
+					title:'报告更新管理',
 					keepAlive: false
 				}
 			},
             {
 				path:"questionManage",
-				name:"问答社区",
-				component:()=>import('@/views/interaction_manage/questionManage.vue')
+				name:"questionManage",
+				component:()=>import('@/views/interaction_manage/questionManage.vue'),
+				meta:{
+					title:'问答社区'
+				}
 			},
             // {
 			// 	path: "messageboard",
@@ -53,14 +70,20 @@ export default [
 			// 	component: () => import('@/views/interactive_manage/messageboard.vue')
 			// },
 			{
-				path: "/ybComment",
-				name: "留言管理",
-				component: () => import('@/views/interactive_manage/messageManage.vue')
+				path: "ybComment",
+				name: "ybComment",
+				component: () => import('@/views/interactive_manage/messageManage.vue'),
+				meta:{
+					title:'留言管理'
+				}
 			},
 			{
-				path: "/likelist",
-				name: "点赞",
-				component: () => import('@/views/interactive_manage/likelist.vue')
+				path: "likelist",
+				name: "likelist",
+				component: () => import('@/views/interactive_manage/likelist.vue'),
+				meta:{
+					title:'点赞'
+				}
 			},
             // {
 			// 	path:"questionComment",
@@ -69,20 +92,29 @@ export default [
 			// },
             {
 				path:"bulletChatList",
-				name:"弹幕管理",
-				component:()=>import('@/views/interactive_manage/bulletChatList.vue')
+				name:"bulletChatList",
+				component:()=>import('@/views/interactive_manage/bulletChatList.vue'),
+				meta:{
+					title:'弹幕管理'
+				}
 			},
             {
 				path:'voicePlayStatistics',
 				component: () => import('@/views/dataReport_manage/voicePlayList.vue'),
-				name: '语音播报统计',
-				hidden: false
+				name: 'voicePlayStatistics',
+				hidden: false,
+				meta:{
+					title:'语音播报统计'
+				}
 			},
             {
 				path:'reportlabel',
 				component:()=> import('@/views/report_manage/tagLib.vue'),
-				name:'标签库',
-				hidden:true
+				name:'reportlabel',
+				hidden:true,
+				meta:{
+					title:'标签库'
+				}
 			},
 			// {
 			// 	path:'sendlog',
@@ -93,8 +125,11 @@ export default [
 			{
 				path:'bannerStatistics',
 				component:()=> import('@/views/interaction_manage/bannerStatistics.vue'),
-				name:'banner 统计',
-				hidden:true
+				name:'bannerStatistics',
+				hidden:true,
+				meta:{
+					title:"banner 统计"
+				}
 			},
 
         ]

src/router/modules/statisticRoutes.js

@@ -0,0 +1,133 @@
+//报表统计管理路由模块
+import Home from '@/layouts/index.vue'
+
+export default [
+    {
+		path: '/',
+		component: Home,
+		name: 'statisticReport',
+		hidden: false,
+		icon_path: require('@/assets/img/home/datareport_ico.png'),
+        meta:{
+            title:'报表统计'
+        },
+		children: [
+            {
+				path: 'expiringlist',
+				component: () => import('@/views/dataReport_manage/expiringList.vue'),
+				name: 'expiringlist',
+				hidden: false,
+                meta:{
+                    title:'即将到期客户'
+                }
+			},
+			// {
+			// 	path: 'incrementalist',
+			// 	component: () => import('@/views/dataReport_manage/incrementalList.vue'),
+			// 	name: '增量客户数据',
+			// 	hidden: false
+			// },
+			// {
+			// 	path: 'stocklist',
+			// 	component: () => import('@/views/dataReport_manage/stockCutomList.vue'),
+			// 	name: '存量客户数据',
+			// 	hidden: false
+			// },
+			// {
+			// 	path: 'contractlist',
+			// 	component: () => import('@/views/dataReport_manage/contractList.vue'),
+			// 	name: '合同数据报表',
+			// 	hidden: false
+			// },
+			// {
+			// 	path: 'incomelist',
+			// 	component: () => import('@/views/dataReport_manage/incomeList.vue'),
+			// 	name: '收入统计报表',
+			// 	hidden: false
+			// },
+			// {
+			// 	path: 'readStatistics',
+			// 	component: () => import('@/views/dataReport_manage/readStatistics.vue'),
+			// 	name: '图库阅读统计',
+			// 	hidden: false
+			// },
+			// {
+			// 	path: 'equityCustomStatistics',
+			// 	component: () => import('@/views/dataReport_manage/equityCustomStatistics.vue'),
+			// 	name: '权益客户统计',
+			// 	hidden: false
+			// },
+			// {
+			// 	path: 'equityPackageStatistics',
+			// 	component: () => import('@/views/dataReport_manage/equityPackageStatistics.vue'),
+			// 	name: '权益套餐统计',
+			// 	hidden: false
+			// },
+			// {
+			// 	path: 'readClassify',
+			// 	component: () => import('@/views/dataReport_manage/readClassify.vue'),
+			// 	name: '',
+			// 	hidden: false,
+			// 	meta: {
+			// 		pathName: '图库阅读统计',
+			// 		pathFrom: 'readStatistics',
+			// 	}
+			// },
+			// {
+			// 	path: 'readChart',
+			// 	name: '我的图库',
+			// 	component: () => import('@/views/mychart_manage/index.vue'),
+			// 	hidden: false,
+			// 	meta: {
+			// 		pathName: '图库阅读统计',
+			// 		pathFrom: 'readStatistics',
+			// 	}
+			// },
+			// {
+			// 	path: 'chartJurisdiction',
+			// 	component: () => import('@/views/dataReport_manage/jurisdiction.vue'),
+			// 	name: '图库权限开通统计',
+			// 	hidden: false
+			// },
+			// {
+			// 	path: 'statisticNewcustom',
+			// 	component: () => import('@/views/dataReport_manage/statistic/newCustom.vue'),
+			// 	name: '新增客户统计',
+			// 	hidden: false
+			// },
+			// {
+			// 	path: 'statisticStockcustom',
+			// 	component: () => import('@/views/dataReport_manage/statistic/stockCustom.vue'),
+			// 	name: '存量客户统计',
+			// 	hidden: false
+			// },
+			// /* {
+			// 	path: 'newCustomlist',
+			// 	component: () => import('@/views/dataReport_manage/statistic/newCustomlist.vue'),
+			// 	name: '新增客户列表',
+			// 	meta: {
+			// 		pathFrom: 'statisticNewcustom',
+			// 		pathName: '新增客户统计'
+			// 	},
+			// 	hidden: true
+			// }, */
+			// {
+			// 	path: 'todoTask',
+			// 	component: () => import('@/views/dataReport_manage/statistic/todoTask.vue'),
+			// 	name: '销售To do任务统计',
+			// 	hidden: false
+			// },
+			// /* {
+			// 	path: 'todoTaskList',
+			// 	component: () => import('@/views/dataReport_manage/statistic/todoTaskList.vue'),
+			// 	name: '客户任务列表',
+			// 	meta: {
+			// 		pathFrom: 'todoTask',
+			// 		pathName: '销售To do任务统计'
+			// 	},
+			// 	hidden: true
+			// }, */
+
+		]
+	},
+]

src/views/dataReport_manage/configdata.js

@@ -0,0 +1,392 @@
+export const monthLabel = [
+    {
+      label: "未来一个月",
+    },
+    {
+      label: "未来2个月",
+    },
+    {
+      label: "未来3个月",
+    },
+  ];
+  /* 即将到期表格列 */
+  export const expringTableColums = [
+    {
+      label: "客户名称",
+      align: "center",
+      key: "CompanyName",
+      widthsty: "300px",
+      textsty: "color:#409EFF;cursor:pointer;",
+      link: true,
+    },
+    {
+      label: "客户类型",
+      align: "center",
+      key: "ProductName",
+      widthsty: "100px",
+    },
+    {
+      label: "所属销售",
+      align: "center",
+      key: "SellerName",
+    },
+    // {
+    // 	label:"合同编号",
+    // 	align:"center",
+    // 	key:"ContractCode"
+    // },
+    // {
+    // 	label:"合同金额",
+    // 	align:"center",
+    // 	key:"Money"
+    // },
+    {
+      label: "服务期限",
+      align: "center",
+      key: "",
+    },
+    {
+      label: "剩余天数",
+      align: "center",
+      key: "ExpireDay",
+      widthsty: "100px",
+      sort: true,
+    },
+  ];
+  /* 增量客户表格列 */
+  export const incrementTableColums = [
+    {
+      label: "客户名称",
+      key: "CompanyName",
+      widthsty: "300px",
+      textsty: "color:#409EFF;cursor:pointer;",
+      link: true,
+    },
+    {
+      label: "客户类型",
+      key: "ProductName",
+      widthsty: "100px",
+    },
+    {
+      label: "不续约归因",
+      key: "AscribeContent",
+      dataType: "未续约客户",
+      notRenewedConfirm: 1,
+      sort: true,
+    },
+    {
+      label: "客户状态",
+      key: "Status",
+      dataType: "未续约客户",
+      sort: true,
+    },
+    {
+      label: "所属销售",
+      key: "SellerName",
+      widthsty: "150px",
+    },
+    {
+      label: "新增时间",
+      key: "CreateTime",
+      dataType: "新增试用客户",
+      sort: true,
+    },
+    {
+      label: "合同金额",
+      key: "Money",
+      dataType: "新签客户",
+      sort: true,
+    },
+    {
+      label: "签约时间",
+      key: "StartDate",
+      dataType: "新签客户",
+      sort: true,
+    },
+    {
+      label: "合同金额",
+      key: "Money",
+      dataType: "续约客户",
+      sort: true,
+    },
+    {
+      label: "续约时间",
+      key: "StartDate",
+      dataType: "续约客户",
+      sort: true,
+    },
+    {
+      label: "最近合同到期时间",
+      key: "EndDate",
+      dataType: "未续约客户",
+      sort: true,
+    },
+    {
+      label: "备注",
+      key: "Remark",
+      dataType: "未续约客户",
+      widthsty: "100px",
+      sort: true,
+    },
+    {
+      label: "未续约说明",
+      key: "RenewalReason",
+      dataType: "未续约客户",
+      widthsty: "300px",
+      sort: true,
+    },
+  ];
+  /* 存量客户表格列 */
+  export const stockTableColums = [
+    {
+      label: "客户名称",
+      key: "CompanyName",
+      widthsty: "300px",
+      textsty: "color:#409EFF;cursor:pointer;",
+      link: true,
+    },
+    {
+      label: "客户类型",
+      key: "ProductName",
+      widthsty: "100px",
+    },
+    {
+      label: "不续约归因",
+      key: "AscribeContent",
+      dataType: "未续约客户",
+      notRenewedConfirm: 1,
+      sort: true,
+    },
+    {
+      label: "客户状态",
+      key: "Status",
+      dataType: "未续约客户",
+    },
+    {
+      label: "所属销售",
+      key: "SellerName",
+      widthsty: "150px",
+    },
+    {
+      label: "服务期限",
+      dataType: "新签客户,续约客户",
+    },
+    {
+      label: "剩余天数",
+      key: "ExpireDay",
+      widthsty: "150px",
+      dataType: "新签客户,续约客户",
+    },
+    {
+      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 = [
+    {
+      label: "客户名称",
+      key: "CompanyName",
+      widthsty: "300px",
+      textsty: "color:#409EFF;cursor:pointer;",
+      link: true,
+    },
+    {
+      label: "客户类型",
+      key: "ProductName",
+      widthsty: "100px",
+    },
+    {
+      label: "所属销售",
+      key: "SellerName",
+      widthsty: "150px",
+    },
+    {
+      label: "有效合同数",
+      key: "Count",
+      widthsty: "150px",
+      dataType: "有效合同总数,有效合同总金额,正式客户数",
+    },
+    {
+      label: "有效合同总金额",
+      key: "SumMoney",
+      widthsty: "150px",
+      dataType: "有效合同总数,有效合同总金额,正式客户数",
+    },
+    {
+      label: "生成方式",
+      key: "Source",
+      widthsty: "150px",
+      dataType: "系统合同/上传附件",
+    },
+    {
+      label: "提交时间",
+      key: "CreateTime",
+      widthsty: "180px",
+      dataType: "系统合同/上传附件",
+    },
+    {
+      label: "操作",
+      textsty: "color:#409EFF;cursor:pointer;",
+      action: {
+        name: "合同详情",
+      },
+    },
+  ];
+  /* 收入列表表格列 */
+  export const incomeTableColums = [
+    {
+      label: "合同编号",
+      key: "ContractCode",
+    },
+    {
+      label: "客户名称",
+      key: "CompanyName",
+      widthsty: "200px",
+      textsty: "color:#409EFF;cursor:pointer;",
+      link: true,
+    },
+    {
+      label: "客户类型",
+      key: "ProductName",
+    },
+    {
+      label: "所属销售",
+      key: "SellerName",
+    },
+    {
+      label: "合同金额",
+      key: "Money",
+    },
+    {
+      label: "付款方式",
+      key: "PayMethod",
+    },
+    {
+      label: "付款渠道",
+      key: "PayChannel",
+    },
+    {
+      label: "服务期限",
+      widthsty: "200px",
+    },
+    {
+      label: "操作",
+      textsty: "color:#409EFF;cursor:pointer;",
+      action: {
+        name: "合同详情",
+      },
+    },
+  ];
+  
+  /* 权益客户统计表格列 */
+  export const equityTableColums = (type) => {
+    return type === "新签客户" || type === "续约客户"
+      ? [
+          {
+            label: "客户名称",
+            key: "CompanyName",
+            widthsty: "300px",
+            textsty: "color:#409EFF;cursor:pointer;",
+            link: true,
+          },
+          {
+            label: "所属销售",
+            key: "SellerName",
+            widthsty: "150px",
+          },
+          {
+            label: "合同期限",
+            align: "center",
+            key: "StartDate",
+          },
+          {
+            label: "合同金额",
+            key: "Money",
+            dataType: "新签客户",
+          },
+          {
+            label: type === "新签客户" ? "签约套餐" : "续约套餐",
+            align: "center",
+            key: "PermissionName",
+          },
+        ]
+      : type === "未续约客户"
+      ? [
+          {
+            label: "客户名称",
+            key: "CompanyName",
+            widthsty: "300px",
+            textsty: "color:#409EFF;cursor:pointer;",
+            link: true,
+          },
+          {
+            label: "客户状态",
+            key: "Status",
+            sort: true,
+          },
+          {
+            label: "所属销售",
+            key: "SellerName",
+            widthsty: "150px",
+          },
+          {
+            label: "合同到期时间",
+            key: "EndDate",
+            dataType: "未续约客户",
+            sort: true,
+          },
+          {
+            label: "签约套餐",
+            align: "center",
+            key: "PermissionName",
+          },
+          {
+            label: "合同金额",
+            key: "Money",
+            dataType: "新签客户",
+          },
+          {
+            label: "未续约说明",
+            key: "RenewalReason",
+            dataType: "未续约客户",
+            widthsty: "300px",
+            sort: true,
+          },
+          {
+            label: "备注",
+            key: "Remark",
+            dataType: "未续约客户",
+            widthsty: "100px",
+            sort: true,
+          },
+          {
+            label: "不续约归因",
+            key: "AscribeContent",
+            notRenewedConfirm: 1,
+            sort: true,
+          },
+        ]
+      : [];
+  };
+  

src/views/dataReport_manage/expiringList.vue

@@ -0,0 +1,477 @@
+
+<script>
+import { defineComponent } from 'vue'
+export default defineComponent({
+  //进入前是否清除参数
+  beforeRouteEnter(to, from, next) {
+    if (from.path != '/customDetail') {
+      sessionStorage.removeItem('expiringListBack')
+    }
+    next()
+  }
+})
+
+</script>
+
+
+<script setup>
+import { expringTableColums } from './configdata.js'
+import { dataMainInterface, customInterence } from '@/api/api.js'
+import mPage from '@/components/mPage.vue'
+import moment from 'moment'
+import { computed, reactive, ref, onMounted } from 'vue'
+import { onBeforeRouteLeave, useRouter, } from 'vue-router'
+import { Search } from "@element-plus/icons-vue";
+import {formatTime} from '@/utils/date'
+
+const router = useRouter()
+
+const Role = computed(() => {
+  return localStorage.getItem('Role') || '';
+})
+//管理权限
+const ManageType = computed(() => {
+  return localStorage.getItem('ManageType') || '';
+})
+const exportExcel = computed(() => {
+  let baseUrl = import.meta.env.VITE_APP_API_ROOT + "/statistic_report/will_expire_list";
+  let token = localStorage.getItem("auth") || "";
+  let paramStr = "";
+  let salesArr = []
+  if (pageState.filterObj.sale.length) {
+    salesArr = pageState.filterObj.sale.map(item => {
+      return item[item.length - 1]
+    })
+  }
+  let obj = {
+    PageSize: pageState.pageSize,
+    CurrentIndex: pageState.page_no,
+    CompanyType: pageState.filterObj.type,
+    AdminId: salesArr.join(','),
+    RegionType: pageState.filterObj.area,
+    EndDate: pageState.end_date,
+    StartDate: pageState.start_date,
+    Keyword: pageState.searchVal,
+    IsExport: true
+  };
+  for (let key in obj) {
+    paramStr = `${paramStr}&${key}=${obj[key]}`;
+  }
+  return `${baseUrl}?${token}${paramStr}`;
+})
+
+const pageState = reactive({
+  searchVal: sessionStorage.getItem('expiringListBack') ? JSON.parse(sessionStorage.getItem('expiringListBack')).searchVal : '',//搜索关键词
+  isShowloadding: false,
+  start_date: '',
+  end_date: '',
+  /* 筛选条件 */
+  filterObj: {
+    month: '未来1个月',
+    date: [],
+    type: '',
+    sale: '',
+    area: ''
+  },
+  monthLabel: [
+    {
+      label: "未来1个月"
+    },
+    {
+      label: "未来2个月"
+    },
+    {
+      label: "未来3个月"
+    }
+  ],
+  salesArr: [],//销售列表
+  defaultSalesProps: {
+    multiple: true,
+    label: 'RealName',
+    children: 'ChildrenList',
+    value: 'AdminId'
+  },//销售级联配置
+  typeArr: [
+    {
+      name: 'ficc'
+    }, {
+      name: '权益'
+    }
+  ],//类型
+  areaArr: ['国内', '海外'],
+  pageSize: 10,
+  page_no: sessionStorage.getItem('expiringListBack') ? JSON.parse(sessionStorage.getItem('expiringListBack')).page_no : 1,
+  total: 0,
+  totalCompany: 0,//总客户数
+})
+
+onBeforeRouteLeave((to, form, next) => {
+  let backData = {
+    page_no: pageState.page_no,
+    end_date: pageState.end_date,
+    start_date: pageState.start_date,
+    filterObj: pageState.filterObj,
+    searchVal: pageState.searchVal,
+  }
+  sessionStorage.setItem('expiringListBack', JSON.stringify(backData))
+  next()
+})
+
+
+// 搜索
+function handleSearch() {
+  if (!pageState.searchVal) {
+    pageState.page_no = 1
+    pageState.filterObj = {
+      month: '未来1个月',
+      date: [],
+      type: '',
+      sale: '',
+      area: ''
+    }
+    let date_now = moment().format("YYYY-MM-DD");
+    let date_after = moment().add(1, 'M').format("YYYY-MM-DD");
+    let date = [date_now, date_after]
+    pageState.start_date = date_now;
+    pageState.end_date = date_after;
+    pageState.filterObj.date = date;
+    getTableData()
+    return
+  }
+  pageState.page_no = 1
+  pageState.filterObj = {
+    month: '',
+    date: [],
+    type: '',
+    sale: '',
+    area: ''
+  }
+  pageState.start_date = '';
+  pageState.end_date = '';
+  getTableData()
+}
+
+/* 获取表格 */
+function getTableData() {
+  // 处理销售筛选
+  let salesArr = []
+  if (pageState.filterObj.sale.length) {
+    salesArr = pageState.filterObj.sale.map(item => {
+      return item[item.length - 1]
+    })
+  }
+  pageState.isShowloadding = true;
+  let params = {
+    PageSize: pageState.pageSize,
+    CurrentIndex: pageState.page_no,
+    CompanyType: pageState.filterObj.type,
+    AdminId: salesArr.join(','),
+    RegionType: pageState.filterObj.area,
+    EndDate: pageState.end_date,
+    StartDate: pageState.start_date,
+    Keyword: pageState.searchVal,
+  }
+  dataMainInterface.expireList(params).then(res => {
+    if (res.Ret === 200) {
+      pageState.tableData = res.Data.List || [];
+      pageState.total = res.Data.Paging.Totals;
+      pageState.totalCompany = res.Data.TotalCompany;
+      pageState.isShowloadding = false;
+    }
+  })
+}
+/* 获取销售 */
+function getSale() {
+  customInterence.getSale().then(res => {
+    if (res.Ret === 200) {
+      pageState.salesArr = res.Data.List;
+    }
+  })
+}
+/* 切换月份 */
+function toggleMonth(label) {
+  pageState.filterObj.month = label;
+  let days = label == '未来1个月' ? 1 : label == '未来2个月' ? 2 : label == '未来3个月' ? 3 : 0;
+  filterDate(days)
+}
+/* 选择服务日期 */
+function dateChange(e) {
+  if (e[0]) {
+    pageState.start_date = e[0];
+    pageState.end_date = e[1];
+  } else {
+    pageState.start_date = '';
+    pageState.end_date = '';
+  }
+  pageState.filterObj.month = '';
+  pageState.page_no = 1;
+  pageState.searchVal = ''
+  getTableData();
+}
+/* 筛选改变时 */
+function changeFilter() {
+  pageState.page_no = 1;
+  pageState.searchVal = ''
+  getTableData()
+}
+/* 切换页码 */
+function handleCurrentChange(page) {
+  pageState.page_no = page;
+  getTableData()
+}
+/* 定义今天之前的日期不可选择 */
+function disabledBeforeToday(date) {
+  const today = new Date();
+  today.setHours(0, 0, 0, 0);
+  return date < today;
+}
+/* 获取未来几个月的日期范围 */
+function filterDate(month) {
+  if (month) {
+    let date_now = moment().format("YYYY-MM-DD");
+    let date_after = moment().add(month, 'M').format("YYYY-MM-DD");
+    let date = [date_now, date_after]
+    pageState.start_date = date_now;
+    pageState.end_date = date_after;
+    pageState.filterObj.date = date;
+    pageState.page_no = 1;
+    pageState.searchVal = ''
+    getTableData();
+  }
+}
+/* 跳转 */
+function jumpHandle(row, item) {
+  if (item.link) {
+    router.push({
+      path: '/customDetail',
+      query: {
+        id: row.CompanyId
+      }
+    })
+  }
+}
+
+
+onMounted(() => {
+  getSale();
+  if (sessionStorage.getItem('expiringListBack')) {
+    let backData = JSON.parse(sessionStorage.getItem('expiringListBack'));
+    pageState.page_no = backData.page_no
+    pageState.end_date = backData.end_date
+    pageState.start_date = backData.start_date
+    pageState.filterObj = backData.filterObj
+    pageState.searchVal = backData.searchVal
+  }
+  /* 默认选中未来1个月 */
+  filterDate(pageState.filterObj.month === '未来1个月' ? 1 : pageState.filterObj.month === '未来2个月' ? 2 : pageState.filterObj.month === '未来3个月' ? 3 : 0);
+})
+
+
+function getTableColumContent(scope,item) {
+  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
+}
+
+
+
+
+
+
+</script>
+
+<template>
+  <div class="dataReport-container">
+    <div class="dataReport-top">
+      <a :href="exportExcel" download>
+        <button class="button-sty act">导出EXCEL</button>
+      </a>
+      <button
+        :class="[
+          'button-sty',
+          { act: pageState.filterObj.month === item.label },
+        ]"
+        v-for="item in pageState.monthLabel"
+        @click="toggleMonth(item.label)"
+        :key="item.label"
+      >
+        {{ item.label }}
+      </button>
+      <date-picker
+        v-model="pageState.filterObj.date"
+        type="date"
+        range
+        value-type="format"
+        placeholder="自定义时间段"
+        :clearable="false"
+        :editable="false"
+        :disabled-date="disabledBeforeToday"
+        @change="dateChange"
+      />
+      <el-input
+        placeholder="请输入客户名称"
+        v-model="pageState.searchVal"
+        style="max-width: 400px; margin-left: auto"
+        @input="handleSearch"
+        clearable
+        :prefix-icon="Search"
+      >
+      </el-input>
+    </div>
+    <div class="dataReport-main">
+      <div class="main-top">
+        <!-- <el-select 
+				v-model="filterObj.sale" 
+				placeholder="请选择销售" 
+				style="width:150px;marginRight:10px;marginBottom:8px;" 
+				v-if="Role=='admin'||Role=='ficc_admin'||Role=='rai_admin'||ManageType!=0" 
+				clearable  
+				@change="changeFilter" 
+				filterable>
+					<el-option
+						v-for="item in salesArr"
+						:key="item"
+						:label="item.RealName"
+						:value="item.AdminId">
+					</el-option>
+				</el-select> -->
+        <el-cascader
+          v-if="
+            Role == 'finance' ||
+            Role == 'admin' ||
+            Role == 'ficc_admin' ||
+            Role == 'rai_admin' ||
+            ManageType != 0
+          "
+          v-model="pageState.filterObj.sale"
+          placeholder="请选择销售"
+          style="min-width: 250px; margin-right: 10px; margin-bottom: 8px"
+          :options="pageState.salesArr"
+          :props="pageState.defaultSalesProps"
+          :show-all-levels="false"
+          collapse-tags
+          clearable
+          filterable
+          @change="changeFilter"
+        >
+        </el-cascader>
+        <el-select
+          v-model="pageState.filterObj.type"
+          placeholder="请选择客户类型"
+          style="width: 150px; margin-right: 10px; margin-bottom: 8px"
+          v-if="Role == 'finance' || Role == 'admin'"
+          clearable
+          @change="changeFilter"
+        >
+          <el-option
+            v-for="item in pageState.typeArr"
+            :key="item"
+            :label="item.name"
+            :value="item.name"
+          >
+          </el-option>
+        </el-select>
+        <el-select
+          v-model="pageState.filterObj.area"
+          placeholder="请选择所属区域"
+          style="width: 150px; margin-right: 10px; margin-bottom: 8px"
+          clearable
+          @change="changeFilter"
+        >
+          <el-option
+            v-for="item in pageState.areaArr"
+            :key="item"
+            :label="item"
+            :value="item"
+          >
+          </el-option>
+        </el-select>
+      </div>
+      <div class="main-section">
+        <el-card class="main-card" shadow>
+          <template #header>
+            <div class="clearfix">
+              <span>
+                即将到期客户数
+                <el-tooltip
+                  class="item"
+                  effect="dark"
+                  content="服务期限截止日期在所选时间段内的客户"
+                  placement="top-start"
+                >
+                  <i class="el-icon-info"></i>
+                </el-tooltip>
+              </span>
+            </div>
+          </template>
+
+          <div class="card-cont">{{ pageState.totalCompany }}</div>
+        </el-card>
+      </div>
+      <el-table
+        :data="pageState.tableData"
+        border
+        style="margin-top: 20px; min-height: 400px"
+        v-loading="pageState.isShowloadding"
+        element-loading-text="数据加载中..."
+      >
+        <el-table-column
+          v-for="item in expringTableColums"
+          :key="item.label"
+          :label="item.label"
+          :width="item.widthsty"
+          align="center"
+        >
+          <template #default="scope">
+            <span :style="item.textsty" @click="jumpHandle(scope.row, item)">
+              {{ 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)
+      : formatTime(scope.row[item.key])  }}
+            </span>
+          </template>
+        </el-table-column>
+        <template #empty>
+          <div style="line-height: 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>
+        </template>
+      </el-table>
+      <el-col :span="24" class="toolbar" v-if="pageState.total">
+        <m-page
+          :total="pageState.total"
+          :page_no="pageState.page_no"
+          @handleCurrentChange="handleCurrentChange"
+        />
+      </el-col>
+    </div>
+  </div>
+</template>
+
+<style lang='scss'>
+@import "./index.scss";
+</style>

src/views/dataReport_manage/index.scss

@@ -0,0 +1,100 @@
+.dataReport-container {
+	.el-radio-button {
+		margin-right: 10px;
+	}
+	.dataReport-top { 
+		display: flex;
+		align-items: center;
+		border: 1px solid #ECECEC;
+		padding: 20px 30px;
+		background: #fff;
+		border-radius: 4px;
+		box-shadow: 0 3px 6px rgba(0, 0, 0, 0.05);
+		.button-sty {
+			margin-right: 20px;
+			border: none;
+			padding: 6px 12px;
+			background: #E0EEFD;
+			color: #2D8CF0;
+			cursor: pointer;
+			border-radius:4px;
+			flex-shrink: 0;
+			&.act {
+				background: #409EFF;
+				color: #fff;
+			}
+		}
+	}
+	.dataReport-main {
+		min-height: calc(100vh - 320px);
+		padding: 20px 30px 80px;
+		background: #fff;
+		margin-top: 20px;
+		position: relative;
+		border: 1px solid #ECECEC;
+		border-radius: 4px;
+		box-shadow: 0 3px 6px rgba(0, 0, 0, 0.05);
+		&.first {
+			margin-top: 0;
+		}
+		.main-section {
+			margin-top: 30px;
+			display: flex;
+			.base-card { 
+				width: 240px;
+				background: #fff;
+				color: #999;
+				text-align: center;
+				cursor: pointer;
+				.el-card__header {
+					padding: 16px;
+				}
+				.card-cont {
+					font-size: 28px;
+					color: #333;
+				}
+			}
+			.main-card {
+				width: 240px;
+				background: #E0EEFD;
+				color: #409EFF;
+				text-align: center;
+				.el-card__header {
+					padding: 16px;
+				}
+				.card-cont {
+					font-size: 28px;
+					color: #409EFF;
+				}
+			}
+		}
+		.package-difference{
+			position:absolute;
+			right:0;
+			top:0;
+			font-size: 12px;
+			color: #3994fb;
+			background-color: #dcecfc;
+			height: 18px;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			padding: 0 4px;
+		}
+	}
+	.tabs-box {
+		margin-top: 20px;
+		font-size: 16px;
+		display: flex;
+		span {
+			margin-right: 20px;
+			padding-bottom: 8px;
+			cursor: pointer;
+		}
+		.active {
+			border-bottom: 2px solid #409EFF;
+			font-weight: 500;
+			color: #409EFF;
+		}
+	}
+}