新增组件及页面

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

@@ -34,8 +34,21 @@
         chart: null
       };
     },
+    watch: {
+      //观察option的变化
+      data: {
+        handler(newVal, oldVal) {
+          if (newVal) {
+            this.initChart();
+          }
+        },
+        deep: true //对象内部属性的监听，关键。
+      }
+    },
     mounted() {
-      this.initChart();
+      this.$nextTick(() => {
+        this.initChart();
+      })
     },
     beforeDestroy() {
       if (!this.chart) {
@@ -100,21 +113,21 @@
           ],
           series: [
             {
-              name: that.data.expectedData.name,
+              name: that.data.barData.name,
               type: 'bar',
               itemStyle:{
                 color:'#1DCAF5'
               },
-              data: that.data.expectedData.data
+              data: that.data.barData.data
             },
             {
-              name: that.data.actualData.name,
+              name: that.data.lineData.name,
               type: 'line',
               itemStyle:{
                 color:'#5AAFF9',
                 borderColor:'#CFAF19'
               },
-              data: that.data.actualData.data
+              data: that.data.lineData.data
             }
           ]
         };

dgtis-ui/src/views/system/userInfoDetails/index.vue

@@ -64,7 +64,7 @@
                 <div class="levelImgDiv">
                   <div class="level">{{levelText(custInfo.custclass)}}会员</div>
                   <div class="isPay">已交保费</div>
-                  <div class="payNum">234,897.234</div>
+                  <div class="payNum">{{custInfo.prem}}</div>
                 </div>
               </div>
               <el-row class="bottomInfoDiv" :gutter="10">
@@ -106,9 +106,9 @@
                 <el-col :span="12">
                   <div class="bxDetail bxDetailHt">
                     <div class="numTitleB">理赔信息</div>
-                    <div class="bxInfo">是否理赔：是</div>
+                    <div class="bxInfo">是否理赔：{{lpInfo.islp}}</div>
                     <div class="bxInfo">理赔类别：交通意外</div>
-                    <div class="bxInfo">理赔金额：13625元</div>
+                    <div class="bxInfo">理赔金额：{{lpInfo.ccamt}}元</div>
                   </div>
                 </el-col>
               </el-row>
@@ -182,57 +182,51 @@ export default {
       custInfo : {},
       wordCloudChartData:[],
       lineBarChartData:{
-        expectedData:{
+        lineData:{
           name:'',
-          data:[200, 49, 700, 232, 256, 767, 1356, 1622, 326, 200, 64, 33]
+          data:[]
         },
-        actualData:{
+        barData:{
           name:'',
-          data:[240, 232, 303, 405, 603, 102, 203, 234, 230, 165, 120, 62]
+          data:[]
         },
-        xAxisData:['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12']
+        xAxisData:[]
       },
       pieChartHalfData:[],
       width:'100%',
-      height:'80%'
+      height:'80%',
+      insuranceclaimthread:[],
+      lpInfo:{
+        islp:'否',
+        ccamt:0,
+      },
     }
   },
   created() {
 
   },
   mounted() {
-    this.getCustomerByIdData();
     this.getCustomerOverViewByIdData();
   },
   methods: {
-    // 客户标签
-    getCustomerByIdData(){
-      this.loading = true;
-      var that = this;
-      let id = this.$route.query.id;
-      getCustomerById({id:id}).then(response => {
-          console.log(response);
-        for(var i =0 ;i< 120;i++){
-          var label = 'label'+i;
-          if(response.data.custInfo[label] && response.data.custInfo[label] != ""){
-            var data = {
-              name:response.data.custInfo[label],
-              value:i,
-            }
-            that.wordCloudChartData.push(data)
-          }
-        }
-          this.loading = false;
-        }
-      );
-    },
-    // 客户标签
     getCustomerOverViewByIdData(){
       this.loading = true;
       var that = this;
       let id = this.$route.query.id;
       getCustomerOverViewById({id:id}).then(response => {
           console.log(response);
+        // 客户标签
+          for(var i =0 ;i< 120;i++){
+            var label = 'label'+i;
+            if(response.data.custInfo[label] && response.data.custInfo[label] != ""){
+              var data = {
+                name:response.data.custInfo[label],
+                value:i,
+              }
+              that.wordCloudChartData.push(data)
+            }
+          }
+        // 客户保单信息
           that.custInfo = response.data.custInfo;
           if(!that.custInfo.noivpolicy || that.custInfo.noivpolicy <= 0){
             that.custInfo.noivpolicy = 0;
@@ -241,9 +235,22 @@ export default {
             that.custInfo.novpolicy = 0;
           }
           that.custInfo.bdTotalNum = that.custInfo.noivpolicy + that.custInfo.novpolicy;
-          // that.custInfo = response.data.custInfo
-          // console.log(that.wordCloudChartData)
-          // this.loading = false;
+          // 理赔信息
+          that.insuranceclaimthread = response.data.insuranceclaimthread;
+          if(response.data.insuranceclaimthread && response.data.insuranceclaimthread.length>0){
+            that.lpInfo.islp = "是";
+            response.data.insuranceclaimthread[0].ccamt ? that.lpInfo.ccamt = response.data.insuranceclaimthread[0].ccamt : that.lpInfo.ccamt = 0;
+          }else{
+            that.lpInfo.islp = "否";
+            that.lpInfo.ccamt = 0;
+          }
+          // 投保时间节点及保费
+          that.lineBarChartData.xAxisData = response.data.lineBarChartData.xaxisData;
+          that.lineBarChartData.lineData.data = response.data.lineBarChartData.actaulData.data;
+          that.lineBarChartData.lineData.name = response.data.lineBarChartData.actaulData.name;
+          that.lineBarChartData.barData.data = response.data.lineBarChartData.expectedData.data;
+          that.lineBarChartData.barData.name = response.data.lineBarChartData.expectedData.name;
+          this.loading = false;
         }
       );
     },