Add user service type management module

Change-Id: Id86465d839b27dd4350d391198b8eacdf1f330a8
Issue-ID: USECASEUI-212
Signed-off-by: guochuyicmri <guochuyi@chinamobile.com>

1 files changed, 262 insertions, 0 deletions

diff --git a/usecaseui-portal/src/app/components/customer/customer.component.ts b/usecaseui-portal/src/app/components/customer/customer.component.ts
new file mode 100644
index 00000000..bd27d36c
--- /dev/null
+++ b/usecaseui-portal/src/app/components/customer/customer.component.ts
@@ -0,0 +1,262 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-customer',
+  templateUrl: './customer.component.html',
+  styleUrls: ['./customer.component.less']
+})
+export class CustomerComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+  customeradd = false;
+  servicesadd = false;
+  //Customer pie
+  CUChartData: Object;
+  CUChartInit: Object = {
+    height: 180,
+    option: {
+      color: ["#F2F6FD"],
+      series: [{
+        type: 'pie',
+        name: "customer",
+        radius: '90%',
+        center: ['50%', '53%'],
+        data: [{
+          value: 67,
+
+        }, {
+          value: 10,
+
+        }, {
+          value: 17,
+
+        }, {
+          value: 33,
+        },],
+        label: {
+          normal: {
+            position: 'center',
+            show: false,
+            formatter: '   {b|{b}：{d}%}  ',
+            backgroundColor: 'rgba(51,51,51,0.9)',
+            borderColor: 'rgba(51,51,51,0.9)',
+            borderWidth: 1,
+            borderRadius: 4,
+            rich: {
+              b: {
+                fontSize: 16,
+                color: '#fff',
+                lineHeight: 33
+              }
+            }
+          },
+          emphasis: {
+            show: true,
+
+          }
+        },
+        itemStyle: {
+          normal: {
+            borderWidth: 2,
+            borderColor: '#ffffff',
+          },
+          emphasis: {
+            color: {
+              type: 'linear',
+              x: 0,
+              y: 0,
+              x2: 0,
+              y2: 1,
+              colorStops: [{
+                offset: 0, color: '#7DCEFB' // 0% 处的颜色
+              }, {
+                offset: 1, color: '#0DA9E2' // 100% 处的颜色
+              }],
+              global: false // 缺省为 false
+            },
+            shadowBlur: 10,
+            shadowOffsetX: 0,
+            shadowColor: 'rgba(0, 10, 5, 0)'
+          }
+        }
+      }]
+    }
+  };
+  // getHomeAlarmData() {
+  //   this.myhttp.getHomeAlarmData()
+  //     .subscribe((data) => {
+  //       this.alarmChartData = {
+  //         series: [{
+  //           data: [{ name: "Active", value: data[0] }, { name: "Fixed", value: data[1] }]
+  //         }]
+  //       };
+  //     })
+  // }
+
+  // service bar
+  serviceData: Object;
+  serviceInit: Object = {
+    option: {
+      tooltip: {
+        show: true,
+        trigger: 'item',
+        formatter: "{c}"
+      },
+      grid: {
+        top: '5%',
+        left: '5%',
+        bottom: '3%',
+        containLabel: true
+      },
+      xAxis: [
+        {
+          type: 'value',
+          splitLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false
+          },
+          axisLine: {
+            lineStyle: {
+              color: "#EDEDED"
+            }
+          },
+          axisLabel: {
+            color: "#3C4F8C"
+          }
+        }
+
+      ],
+      yAxis: [
+        {
+          type: 'category',
+          splitLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false
+          },
+          axisLine: {
+            lineStyle: {
+              color: "#EDEDED"
+            }
+          },
+          axisLabel: {
+            color: "#3C4F8C"
+          },
+          data: ['Other', 'Type1', 'Type2', 'Type3', 'Type4'],
+        },
+
+      ],
+      series: [
+        {
+          name: '',
+          barWidth: '40%',
+          type: 'bar',
+          data: [2800, 1700, 1200, 1000, 900],
+          itemStyle: {
+            normal: {
+              color: function (params) {
+                // build a color map as your need.
+                var colorList = [
+                  {
+                    type: 'bar',
+                    colorStops: [{
+                      offset: 0,
+                      color: '#FCCE2B' 
+                    }, {
+                      offset: 1,
+                      color: '#FEE956' 
+                    }],
+                    globalCoord: false, 
+                  },
+                  {
+                    type: 'bar',
+                    colorStops: [{
+                      offset: 0,
+                      color: '#F43A59' 
+                    }, {
+                      offset: 1,
+                      color: '#FA6C92' 
+                    }],
+                    globalCoord: false,
+                  },
+                  {
+                    type: 'bar',
+                    colorStops: [{
+                      offset: 0,
+                      color: '#4F5B60' 
+                    }, {
+                      offset: 1,
+                      color: '#879499' 
+                    }],
+                    globalCoord: false, 
+                  },
+                  {
+                    type: 'bar',
+                    colorStops: [{
+                      offset: 0,
+                      color: '#31DAC3' 
+                    }, {
+                      offset: 1,
+                      color: '#5FEFE3' 
+                    }],
+                    globalCoord: false, 
+                  },
+                  {
+                    type: 'bar',
+                    colorStops: [{
+                      offset: 0,
+                      color: '#999999' 
+                    }, {
+                      offset: 1,
+                      color: '#C9C9C9'
+                    }],
+                    globalCoord: false, 
+                  }
+                ];
+                return colorList[params.dataIndex]
+              },
+            }
+          }
+        },
+        {
+          name: 'Type4',
+          type: 'bar',
+          stack: '',
+          data: 2800,
+
+        },
+        {
+          name: 'Type1',
+          type: 'bar',
+          stack: '',
+          data: 1700
+        },
+        {
+          name: 'Type2',
+          type: 'bar',
+          stack: '',
+          data: 1500
+        },
+        {
+          name: 'Type3',
+          type: 'bar',
+          stack: '',
+          data: 1300
+        },
+        {
+          name: 'Other',
+          type: 'bar',
+          stack: '',
+          data: 1000,
+
+        }
+      ]
+    }
+  }
+}