数据服务-列表-详情

dgtis-modules/dgtis-modules-data/src/main/java/com/dgtis/data/api/CustomerApiController.java

@@ -53,7 +53,7 @@ public class CustomerApiController {
                 JSONObject json = (JSONObject)array.get(i);
                 Map mp = new HashMap();
                 mp.put("id",json.getString("_id"));
-                JSONObject jsonOb = JSON.parseObject(json.getString("_source"));;
+                JSONObject jsonOb = JSON.parseObject(json.getString("_source"));
                 mp.putAll(JSON.parseObject(json.getString("_source"),Map.class));
                 mp.put("birthday", DateUtils.parseDateToStr("yyyy-MM-dd HH:mm:ss",jsonOb.getDate("birthday")));
                 listMap.add(mp);
@@ -82,7 +82,7 @@ public class CustomerApiController {
             Map mpInfo = new HashMap();
             mpInfo.put("id",jsonObject.getString("_id"));
             mpInfo.putAll(JSON.parseObject(jsonObject.getString("_source"),Map.class));
-            mpInfo.put("birthday",DateUtils.parseDateToStr("yyyy-MM-dd HH:mm:ss",jsonObject.getDate("birthday")));
+            mpInfo.put("birthday",DateUtils.parseDateToStr("yyyy-MM-dd HH:mm:ss",JSON.parseObject(jsonObject.getString("_source")).getDate("birthday")));
             map.put("custInfo",mpInfo);
             map.put("custInfo1",null);
             map.put("custInfo2",null);

dgtis-ui/src/api/index.js

@@ -1,5 +1,13 @@
 import request from '@/utils/request'
 
+// 客户年龄段性别分布
+export function ageSexDis(query) {
+  return request({
+    url: '/data/index/ageSexDis',
+    method: 'get',
+    params: query
+  })
+}
 // 险种类别
 export function riskcode(query) {
   return request({
@@ -8,6 +16,14 @@ export function riskcode(query) {
     params: query
   })
 }
+// 拥有保单件数分布
+export function bdNumDis(query) {
+  return request({
+    url: '/data/index/bdNumDis',
+    method: 'get',
+    params: query
+  })
+}
 
 
 

dgtis-ui/src/views/dashboard/BarChart3.vue

@@ -34,6 +34,17 @@
         chart: null
       };
     },
+      watch: {
+          //观察option的变化
+          data: {
+              handler(newVal, oldVal) {
+                  if (newVal) {
+                      this.initChart();
+                  }
+              },
+              deep: true //对象内部属性的监听，关键。
+          }
+      },
     mounted() {
         this.$nextTick(() => {
             this.initChart();

dgtis-ui/src/views/dashboard/BarTwoWayChart.vue

@@ -34,8 +34,20 @@
         chart: null
       };
     },
+      watch: {
+          data: {
+              handler(newVal, oldVal) {
+                  if (newVal) {
+                      this.initChart();
+                  }
+              },
+              deep: true //对象内部属性的监听，关键。
+          }
+      },
     mounted() {
-      this.initChart();
+        this.$nextTick(() => {
+            this.initChart();
+        })
     },
     beforeDestroy() {
       if (!this.chart) {
@@ -57,12 +69,12 @@
             }
           },
           legend: {
-            left: 20,
+            left: '17%',
             top: 10,
             data: that.data.legendData
           },
           grid: [{
-            // left: '60%',
+            left: '17%',
             show: true,
             containLabel: false,
             bottom:'45%',
@@ -70,7 +82,7 @@
             backgroundColor:'#FCF0D3',
             borderColor:'#F5EEF1',
           }, {
-            // left: '60%',
+            left: '17%',
             show: true,
             containLabel: false,
             bottom:"10%",
@@ -78,7 +90,7 @@
             backgroundColor:'#DDF7FE',
             borderColor:'#F5EEF1',
           }, {
-            // left: '50%',
+            left: '17%',
             height: 0,
             bottom:'10',
             top:'90%',

dgtis-ui/src/views/dashboard/PieChart2.vue

@@ -34,8 +34,20 @@
         chart: null
       };
     },
+      watch: {
+          data: {
+              handler(newVal, oldVal) {
+                  if (newVal) {
+                      this.initChart();
+                  }
+              },
+              deep: true //对象内部属性的监听，关键。
+          }
+      },
     mounted() {
-      this.initChart();
+        this.$nextTick(() => {
+            this.initChart();
+        })
     },
     beforeDestroy() {
       if (!this.chart) {
@@ -72,7 +84,7 @@
               type: 'pie',
               // roseType: 'radius',
               radius: ['20%', '45%'],
-              center: ['40%', '50%'],
+              center: ['40%', '55%'],
               label: {
                 formatter: '{b}：\n{d}%'
               },

dgtis-ui/src/views/index.vue

@@ -207,7 +207,7 @@
   import BarChart from './dashboard/BarChart2'
   import BarChart3 from './dashboard/BarChart3'
   import PieChart from './dashboard/PieChart2'
-  import { riskcode } from "@/api/index";
+  import { ageSexDis, riskcode, bdNumDis } from "@/api/index";
   export default {
     name: "UserInfoDetails",
     components: {
@@ -220,12 +220,9 @@
       return {
         // 客户年龄段性别分布
         barTwoWayChartData:{
-          legendData:["男生", "女生"],
-          xAxisData:["儿童", "少年", "青年", "中年", "老年", "大龄", "高龄"],
-          seriesData:[
-            [4, 5, 9, 12, 19, 22, 23, ],
-            [5,12,12,19,19,23,23]
-          ]
+          legendData:[],
+          xAxisData:[],
+          seriesData:[]
         },
         // 险种类别
         barChartData:{
@@ -236,13 +233,8 @@
         },
         // 拥有保单件数分布
         pieChartData:{
-          color:['#0084F1','#ED475B','#F39801','#00C7FF'],
-          seriesData:[
-            { value: 320, name: '1-3' },
-            { value: 240, name: '4-7' },
-            { value: 149, name: '8-10' },
-            { value: 100, name: '>10' },
-          ]
+          color:['#0084F1','#ED475B','#F39801','#00C7FF','rgb(242,158,194)','rgb(250,216,137)','rgb(127,229,154)','rgb(33,201,205)'],
+          seriesData:[]
         },
         // 近10年有效客户数
         barChartVistorsData:{
@@ -315,6 +307,8 @@
     mounted() {
       this.lunboFn();
       this.getRiskcode();
+      this.getAgeSexDis();
+      this.getBdNumDis();
     },
     methods: {
       _$ (el) {
@@ -359,6 +353,19 @@
       toUserInfoList(){
         this.$router.push({ path:'/userInfoList'})
       },
+        // 客户年龄段性别分布
+        getAgeSexDis(){
+            let that = this;
+            ageSexDis().then(response => {
+                    console.log(response);
+                    that.barTwoWayChartData.xAxisData =  response.data.xaxisData;
+                    that.barTwoWayChartData.seriesData =  response.data.seriesData;
+                    that.barTwoWayChartData.legendData =  response.data.legendData;
+                    this.loading = false;
+                }
+            );
+        },
+        // 险种类别
         getRiskcode(){
           let that = this;
             riskcode().then(response => {
@@ -369,6 +376,16 @@
                 }
             );
         },
+        // 拥有保单件数分布
+        getBdNumDis(){
+            let that = this;
+            bdNumDis().then(response => {
+                    console.log(response);
+                    that.pieChartData.seriesData =  response.data.seriesData;
+                    this.loading = false;
+                }
+            );
+        },
     }
   };
 </script>