summaryrefslogtreecommitdiffstats
path: root/usecaseui-portal/src/app/components/customer/customer.component.ts
diff options
context:
space:
mode:
Diffstat (limited to 'usecaseui-portal/src/app/components/customer/customer.component.ts')
-rw-r--r--usecaseui-portal/src/app/components/customer/customer.component.ts262
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,
+
+ }
+ ]
+ }
+ }
+}