战情型IsoBean

# FastWeb 战情型IsoBean

战情型的IsoBean用于显示指定的战情报表页面，可通过程序型的IsoBean向战情型IsoBean发送更新的数据信息实现数据的动态变化展示。战情型的IsoBean模块的设计流程如下。

创建自定控件(JS)
设计Bean模块
设计IsoBean模块
发布IsoBean模块

# 1. 创建自定控件(JS)

此处创建的自定控件(JS)是作为战情报表中显示的图表。请根据自定控件中提供的流程创建图表自定控件。以下针对创建的控件内容进行说明。

# 1.1. FastWeb_DashBoard1_EChart1

创建的组件示例如下。

组件的模板内容如下。

<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <title></title>
    <script src="library/js/echarts/echarts.full.min.js"></script>
    </head>
    <body>
    <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
    <div id="Line1" style="width: 100%;height:300px;"></div>
    <script type="text/javascript">
      var LineChart = echarts.init(document.getElementById('Line1'));
      var option = {
        title: {
          text: 'param_title',
          textStyle:{
            fontSize: 18,
            color: '#FFFFFF'
          },
          left: '50%',
          textAlign: 'center'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          show: false
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'value',
          boundaryGap: [0, 0.01],
          axisLabel:{
            color: '#FFFFFF',
             fontSize:12
          }
        },
        yAxis: {
          type: 'category',
          data: [param_yaxis],
          axisLabel:{
            color: '#FFFFFF',
            fontSize: 12
          }
        },
        series: [
          {
            name: 'param_title',
            type: 'bar',
            data: [param_data]
          }
        ]
      };
        LineChart.setOption(option);
        </script>
    </body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65

组件的参数设置如下。

参数	类型	默认值	说明
param_title	String	人流量(季度)	标题
param_yaxis	String	'一号店','二号店','三号店','四号店','五号店'	y轴标签
param_data	String	19325,23438,31000,121594,134141	数据

设置完成后的图表显示如下。由于图表需要放置于深色背景下，此处将文字颜色均设置为白色。

# 1.2. FastWeb_DashBoard1_EChart2

创建的组件示例如下。

组件的模板内容如下。

<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <title></title>
    <script src="library/js/echarts/echarts.full.min.js"></script>
    </head>
    <body>
    <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
    <div id="Line2" style="width: 100%;height:300px;"></div>
    <script type="text/javascript">
      var LineChart2 = echarts.init(document.getElementById('Line2'));
      var option = {
        title: {
          text: 'param_title',
          left: '50%',
          textAlign: 'center',
          textStyle:{
            fontSize: 18,
            color: '#FFFFFF'
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            lineStyle: {
              color: '#ddd'
            }
          },
          backgroundColor: 'rgba(255,255,255,1)',
          padding: [5, 10],
          textStyle: {
            color: '#7588E4',
          },
          extraCssText: 'box-shadow: 0 0 5px rgba(0,0,0,0.3)'
        },
        legend: {
          right: 20,
          orient: 'vertical',
          data: [param_lengenddata],
          textStyle:{
            fontSize: 16,
            color: '#FFFFFF'
          }
        },
        xAxis: {
          type: 'category',
          data: [param_xaxis],
          boundaryGap: false,
          splitLine: {
            show: true,
            interval: 'auto',
            lineStyle: {
              color: ['#D4DFF5']
            }
          },
          axisTick: {
            show: false
          },
          axisLine: {
            lineStyle: {
              color: '#609ee9'
            }
          },
          axisLabel: {
            margin: 10,
            textStyle: {
              fontSize: 14
            }
          }
        },
        yAxis: {
          type: 'value',
          splitLine: {
            lineStyle: {
              color: ['#D4DFF5']
            }
          },
          axisTick: {
            show: false
          },
          axisLine: {
            lineStyle: {
              color: '#609ee9'
            }
          },
          axisLabel: {
            margin: 10,
            textStyle: {
              fontSize: 14
            }
          },
          offset:-10
        },
        series: [{
          name: 'param_series1name',
          type: 'line',
          smooth: true,
          showSymbol: false,
          symbol: 'circle',
          symbolSize: 6,
          data: [param_series1data],
          areaStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: 'rgba(199, 237, 250,0.5)'
              }, {
                offset: 1,
                color: 'rgba(199, 237, 250,0.2)'
              }], false)
            }
          },
          itemStyle: {
            normal: {
              color: '#f7b851'
            }
          },
          lineStyle: {
            normal: {
              width: 3
            }
          }
        }, {
          name: 'param_series2name',
          type: 'line',
          smooth: true,
          showSymbol: false,
          symbol: 'circle',
          symbolSize: 6,
          data: [param_series2data],
          areaStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: 'rgba(216, 244, 247,1)'
              }, {
                offset: 1,
                color: 'rgba(216, 244, 247,1)'
              }], false)
            }
          },
          itemStyle: {
            normal: {
              color: '#58c8da'
            }
          },
          lineStyle: {
            normal: {
              width: 3
            }
          }
        }]
      };
        LineChart2.setOption(option);
        </script>
    </body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158

组件的参数设置如下。

参数	类型	默认值	说明
param_title	String	今日&昨日客流量比较	标题
param_lengenddata	String	'今日','昨日'	图例标题
param_xaxis	String	'00:00','2:00','4:00','6:00','8:00','10:00','12:00','14:00','16:00','18:00','20:00','22:00'	x轴时间
param_series1name	String	今日	数据系列1
param_series1data	String	'1200','1400','1008','1411','1026','1288','1300','800','1100','1000','1118','1322'	系列1数值
param_series2name	String	昨日	数据系列2
param_series2data	String	'1200','1400','808','811','626','488','1600','1100','500','300','1998','822'	系列2数值

设置完成后的图表显示如下。由于图表需要放置于深色背景下，此处将部分文字颜色设置为白色。

# 1.3. FastWeb_DashBoard1_EChart3

创建的组件示例如下。

组件的模板内容如下。

<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <title></title>
    <script src="library/js/echarts/echarts.full.min.js"></script>
    </head>
    <body>
    <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
    <div id="Line3" style="width: 100%;height:300px;"></div>
    <script type="text/javascript">
      var myChart = echarts.init(document.getElementById('Line3'));
      var option = {
        title:{
          text: 'param_title',
          left: '50%',
          textAlign: 'center',
          textStyle:{
            fontSize: 18,
            color: '#FFFFFF'
          }
        },
        color: ['#3398DB'],
        tooltip : {
          trigger: 'axis',
          axisPointer : {           
            type : 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis : [
          {
            type : 'category',
            data : [param_xaxis],
            axisTick: {
              alignWithLabel: true
            },
            axisLabel:{
              fontSize: 12,
              color: '#FFFFFF'
            }
          }
        ],
        yAxis : [
          {
            axisTick: {
              alignWithLabel: true
            },
            axisLabel:{
              fontSize: 12,
              color: '#FFFFFF'
            }
          }
        ],
        series : [
          {
            name:'param_title',
            type:'bar',
            barWidth: '40%',
            data:[param_yaxis]
          },
          
        ],
          label: {
          normal: {
          show: true,
          position: 'top',
          formatter: '{c}'
          }
          }
          };
        myChart.setOption(option);
        </script>
    </body>
</html>

组件的参数设置如下。

参数	类型	默认值	说明
param_title	String	客流指数	标题
param_yaxis	String	'11:00', '11:05', '11:10', '11:15', '11:20', '11:25', '11:30','11:35','11:40','11:45','11:50','11:55'	x轴的数值
param_yaxis	String	1, 3, 2, 3, 4, 2, 1,3,3,2,3,2	y轴的数值

设置完成后的图表显示如下。由于图表需要放置于深色背景下，此处将文字颜色设置为白色。

# 1.4. FastWeb_DashBoard1_EChart4

创建的组件示例如下。

组件的模板内容如下。

<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <title></title>
    <script src="library/js/echarts/echarts.full.min.js"></script>
    </head>
    <body>
    <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
    <div id="Line4" style="width: 100%;height:300px;"></div>
    <script type="text/javascript">
      var myChart = echarts.init(document.getElementById('Line4'));
      var option = {
        title : {
          text: 'param_title',
          x:'center',
          textStyle:{
            fontSize: 18,
            color: '#FFFFFF'
          }
        },
        tooltip : {
          trigger: 'item',
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
          x : 'right',
          y : 'top',
          orient: 'vertical',
          data:[param_lengend],
          textStyle:{
            color: '#FFFFFFF'
          }
        },
        calculable : true,
        series : [
          {
            name:'param_title',
            type:'pie',
            roseType : 'radius',
            label: {
              normal: {
                show: false
              },
              emphasis: {
                show: true
              }
            },
            lableLine: {
              normal: {
                show: false
              },
              emphasis: {
                show: true
              }
            },
            data:[
              param_data
            ]
          }
        ]
      };
        myChart.setOption(option);
        </script>
    </body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66

组件的参数设置如下。

参数	类型	默认值	说明
param_title	String	客流强度	标题与提示信息标题
param_lengend	String	'No.1','No.2','No.3','No.4','No.5'	图例
param_data	String	{value:10, name:'No.1'},{value:5, name:'No.2'},{value:15, name:'No.3'},{value:25, name:'No.4'},{value:20, name:'No.5'}	数据

设置完成后的图表显示如下。由于图表需要放置于深色背景下，此处将文字颜色设置为白色。

# 1.5. FastWeb_DashBoard1_EChart5

创建的组件示例如下。

组件的模板内容如下。

<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <title></title>
    <script src="library/js/echarts/echarts.full.min.js"></script>
    </head>
    <body>
    <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
    <div id="Line5" style="width: 100%;height:300px;"></div>
    <script type="text/javascript">
      var LineChart = echarts.init(document.getElementById('Line5'));
      var option = {
        title: {
          text: 'param_title',
          textStyle:{
            fontSize: 18,
            color: '#FFFFFF'
          },
          left: '50%',
          textAlign: 'center'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          show: false
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'value',
          boundaryGap: [0, 0.01],
          axisLabel:{
            color: '#FFFFFF',
             fontSize:12
          }
        },
        yAxis: {
          type: 'category',
          data: [param_yaxis],
          axisLabel:{
            color: '#FFFFFF',
            fontSize: 12
          }
        },
        series: [
          {
            name: 'param_title',
            type: 'bar',
            data: [param_data]
          }
        ]
      };
        LineChart.setOption(option);
        </script>
    </body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65

组件的参数设置如下。

参数	类型	默认值	说明
param_title	String	人流量(年度)	标题
param_yaxis	String	'一号店','二号店','三号店','四号店','五号店'	y轴标签
param_data	String	439201, 392172, 310000, 221594, 334141	数据

设置完成后的图表显示如下。由于图表需要放置于深色背景下，此处将文字颜色均设置为白色。

# 1.6. FastWeb_DashBoard1_EChart6

创建的组件示例如下。

组件的模板内容如下。

<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <title></title>
    <script src="library/js/echarts/echarts.full.min.js"></script>
    </head>
    <body>
    <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
    <div id="Line6" style="width: 100%;height:300px;"></div>
    <script type="text/javascript">
      var LineChart2 = echarts.init(document.getElementById('Line6'));
      var option = {
        title: {
          text: 'param_title',
          left: '50%',
          textAlign: 'center',
          textStyle:{
            fontSize: 18,
            color: '#FFFFFF'
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            lineStyle: {
              color: '#ddd'
            }
          },
          backgroundColor: 'rgba(255,255,255,1)',
          padding: [5, 10],
          textStyle: {
            color: '#7588E4',
          },
          extraCssText: 'box-shadow: 0 0 5px rgba(0,0,0,0.3)'
        },
        legend: {
          right: 20,
          orient: 'vertical',
          data: [param_lengenddata],
          textStyle:{
            fontSize: 16,
            color: '#FFFFFF'
          }
        },
        xAxis: {
          type: 'category',
          data: [param_xaxis],
          boundaryGap: false,
          splitLine: {
            show: true,
            interval: 'auto',
            lineStyle: {
              color: ['#D4DFF5']
            }
          },
          axisTick: {
            show: false
          },
          axisLine: {
            lineStyle: {
              color: '#609ee9'
            }
          },
          axisLabel: {
            margin: 10,
            textStyle: {
              fontSize: 14
            }
          }
        },
        yAxis: {
          type: 'value',
          splitLine: {
            lineStyle: {
              color: ['#D4DFF5']
            }
          },
          axisTick: {
            show: false
          },
          axisLine: {
            lineStyle: {
              color: '#609ee9'
            }
          },
          axisLabel: {
            margin: 10,
            textStyle: {
              fontSize: 14
            }
          },
          offset:-10
        },
        series: [{
          name: 'param_series1name',
          type: 'line',
          smooth: true,
          showSymbol: false,
          symbol: 'circle',
          symbolSize: 6,
          data: [param_series1data],
          areaStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: 'rgba(199, 237, 250,0.5)'
              }, {
                offset: 1,
                color: 'rgba(199, 237, 250,0.2)'
              }], false)
            }
          },
          itemStyle: {
            normal: {
              color: '#f7b851'
            }
          },
          lineStyle: {
            normal: {
              width: 3
            }
          }
        }, {
          name: 'param_series2name',
          type: 'line',
          smooth: true,
          showSymbol: false,
          symbol: 'circle',
          symbolSize: 6,
          data: [param_series2data],
          areaStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: 'rgba(216, 244, 247,1)'
              }, {
                offset: 1,
                color: 'rgba(216, 244, 247,1)'
              }], false)
            }
          },
          itemStyle: {
            normal: {
              color: '#58c8da'
            }
          },
          lineStyle: {
            normal: {
              width: 3
            }
          }
        }]
      };
        LineChart2.setOption(option);
        </script>
    </body>
</html>

组件的参数设置如下。

参数	类型	默认值	说明
param_title	String	本季度&上季度客流强度比较	标题
param_lengenddata	String	'本季度','上季度'	图例标题
param_xaxis	String	'一号店','二号店','三号店','四号店','五号店'	x轴名称
param_series1name	String	本季度	第一列
param_series1data	String	'1200','1400','1008','1411','1026'	第一列数据
param_series2name	String	上季度	第二列
param_series2data	String	'1200', '1400', '808', '811', '626'	第二列数据

设置完成后的图表显示如下。由于图表需要放置于深色背景下，此处将部分文字颜色设置为白色。

# 1.7. FastWeb_DashBoard1_EChart7

创建的组件示例如下。

组件的模板内容如下。

<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <title></title>
    <script src="library/js/echarts/echarts.full.min.js"></script>
    </head>
    <body>
    <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
    <div id="Line7" style="width: 100%;height:300px;"></div>
    <script type="text/javascript">
      var myChart = echarts.init(document.getElementById('Line7'));
      var option = {
        title:{
          text: 'param_title',
          left: '50%',
          textAlign: 'center',
          textStyle:{
            fontSize: 18,
            color: '#FFFFFF'
          }
        },
        color: ['#3398DB'],
        tooltip : {
          trigger: 'axis',
          axisPointer : {           
            type : 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis : [
          {
            type : 'category',
            data : [param_xaxis],
            axisTick: {
              alignWithLabel: true
            },
            axisLabel:{
              fontSize: 12,
              color: '#FFFFFF'
            }
          }
        ],
        yAxis : [
          {
            axisTick: {
              alignWithLabel: true
            },
            axisLabel:{
              fontSize: 12,
              color: '#FFFFFF'
            }
          }
        ],
        series : [
          {
            name:'param_title',
            type:'bar',
            barWidth: '40%',
            data:[param_yaxis]
          },
          
        ],
          label: {
          normal: {
          show: true,
          position: 'top',
          formatter: '{c}'
          }
          }
          };
        myChart.setOption(option);
        </script>
    </body>
</html>

组件的参数设置如下。

参数	类型	默认值	说明
param_title	String	客流指数(月份)	标题
param_yaxis	String	'1', '2', '3', '4', '5', '6', '7','8','9','10','11','12'	x轴的数值
param_yaxis	String	10, 30, 20, 30, 40, 20, 10,30,30,20,30,20	y轴的数值

设置完成后的图表显示如下。由于图表需要放置于深色背景下，此处将文字颜色设置为白色。

# 1.8. FastWeb_DashBoard1_EChart8

创建的组件示例如下。

组件的模板内容如下。

<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <title></title>
    <script src="library/js/echarts/echarts.full.min.js"></script>
    </head>
    <body>
    <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
    <div id="Line8" style="width: 100%;height:300px;"></div>
    <script type="text/javascript">
      var myChart = echarts.init(document.getElementById('Line8'));
      var option = {
        title : {
          text: 'param_title',
          x:'center',
          textStyle:{
            fontSize: 18,
            color: '#FFFFFF'
          }
        },
        tooltip : {
          trigger: 'item',
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
          x : 'right',
          y : 'top',
          orient: 'vertical',
          data:[param_lengend],
          textStyle:{
            color: '#FFFFFFF'
          }
        },
        calculable : true,
        series : [
          {
            name:'param_title',
            type:'pie',
            roseType : 'radius',
            label: {
              normal: {
                show: false
              },
              emphasis: {
                show: true
              }
            },
            lableLine: {
              normal: {
                show: false
              },
              emphasis: {
                show: true
              }
            },
            data:[
              param_data
            ]
          }
        ]
      };
        myChart.setOption(option);
        </script>
    </body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66

组件的参数设置如下。

参数	类型	默认值	说明
param_title	String	客均消费	标题与提示信息标题
param_lengend	String	'No.1','No.2','No.3','No.4','No.5'	图例
param_data	String	{value:1330121, name:'No.1'},{value:1839201, name:'No.2'},{value:3230432, name:'No.3'},{value:2530118, name:'No.4'},{value:2031872, name:'No.5'}	数据

设置完成后的图表显示如下。由于图表需要放置于深色背景下，此处将文字颜色设置为白色。

# 2. 设计Bean模块

点击 [云服务工具] - [Bean模块(Web)]，打开Bean模块管理的界面，点击 [添加] 按钮，创建一个名称为 wb-das-0001_dashboard-demo1的Bean模块，设置的示例如下。点击 [保存] 按钮。

选择刚才创建的Bean，点击 [Bean设计] 按钮，进入Bean设计的主界面，设计的界面样式如下。

# 2.1. 控件说明

UgWebRunFrame

此组件为界面容器。

属性	取值	说明
Width	1920	大屏显示的像素宽度
Height	1080	大屏显示的像素高度

UgImage01

此组件用于显示标题栏的背景图片。点击 Picture 属性，从中选择要导入的图片进行导入。

UgImage02

此组件用于显示背景图片。点击 Picture 属性，从中选择要导入的图片进行导入。

UgLabel01

此组件用于显示标题。

属性	取值	说明
Caption	大数据展示平台	大屏报表的标题
Font.Color	clWhite	文字的颜色
Font.Size	28	文字的尺寸大小

UgPanel01

标头的第一个数值显示的面板。作为文字显示的容器。

属性	取值	说明
BorderStyle	ubsNone	边框的样式，设置为无边框
Color	$000099FF	面板的颜色

UgSVG01

设置用于显示SVG图形。

属性	取值	说明
Height	100	控件的像素高度
Width	100	控件的像素宽度
HTML	见下代码	图形显示的SVG源码

<svg t="1648446714694" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2188" width="100" height="100"><path d="M800.037628 928.016126 223.962372 928.016126c-52.980346 0-95.983874-43.003528-95.983874-95.983874l0-639.892491c0-52.980346 43.003528-95.983874 95.983874-95.983874l575.903242 0c52.980346 0 95.983874 43.003528 95.983874 95.983874l0 639.892491C896.021502 884.840585 852.84596 928.016126 800.037628 928.016126zM223.962372 159.973123c-17.545439 0-31.994625 14.449185-31.994625 31.994625l0 639.892491c0 17.717453 14.449185 31.994625 31.994625 31.994625l575.903242 0c17.717453 0 31.994625-14.277171 31.994625-31.994625l0-639.892491c0-17.545439-14.277171-31.994625-31.994625-31.994625L223.962372 159.973123z" p-id="2189" fill="#ffffff"></path><path d="M640.924576 544.768688 287.779607 544.768688c-17.717453 0-31.994625-14.277171-31.994625-31.994625 0-17.717453 14.277171-31.994625 31.994625-31.994625l353.144969 0c17.717453 0 31.994625 14.277171 31.994625 31.994625C672.9192 530.491517 658.642029 544.768688 640.924576 544.768688z" p-id="2190" fill="#ffffff"></path><path d="M734.84428 735.532337l-447.236687 0c-17.717453 0-31.994625-14.277171-31.994625-31.994625s14.277171-31.994625 31.994625-31.994625l447.236687 0c17.717453 0 31.994625 14.277171 31.994625 31.994625S752.561734 735.532337 734.84428 735.532337z" p-id="2191" fill="#ffffff"></path><path d="M255.784982 305.325046c0 26.490173 21.501764 47.991937 47.991937 47.991937s47.991937-21.501764 47.991937-47.991937-21.501764-47.991937-47.991937-47.991937S255.784982 278.834873 255.784982 305.325046z" p-id="2192" fill="#ffffff"></path><path d="M463.061986 305.325046c0 26.490173 21.501764 47.991937 47.991937 47.991937s47.991937-21.501764 47.991937-47.991937-21.501764-47.991937-47.991937-47.991937S463.061986 278.834873 463.061986 305.325046z" p-id="2193" fill="#ffffff"></path><path d="M671.199059 305.325046c0 26.490173 21.501764 47.991937 47.991937 47.991937s47.991937-21.501764 47.991937-47.991937-21.501764-47.991937-47.991937-47.991937S671.199059 278.834873 671.199059 305.325046z" p-id="2194" fill="#ffffff"></path></svg>

UgLabel02

显示第一个数值显示面板的标题。

属性	取值	说明
Caption	本月订单数	标题名称
Font.Color	clWhite	文字的颜色
Font.Size	20	文字的尺寸大小

UgLabel03

显示第一个数值显示面板的数值。

属性	取值	说明
Caption	18000	显示的数数值
Font.Color	clWhite	文字的颜色
Font.Size	20	文字的尺寸大小

UgPanel02

标头的第一个数值显示的面板。作为文字显示的容器。

属性	取值	说明
BorderStyle	ubsNone	边框的样式，设置为无边框
Color	$0000CC99	面板的颜色

UgSVG02

设置用于显示SVG图形。

属性	取值	说明
Height	100	控件的像素高度
Width	100	控件的像素宽度
HTML	见下代码	图形显示的SVG源码

<svg t="1648446948204" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3122" width="100" height="100"><path d="M766 824.8H256.6c-40.9 0-75.4-30.2-80.8-70.6l-54.2-407c-6-45.3 48.2-73.3 81.8-42.2l91.1 84.3c20.4 18.9 52.6 17 70.6-4.2L474 256.7c19.5-23 55.1-23 74.7 0l108.9 128.4c18 21.2 50.2 23.2 70.6 4.2l91.1-84.3c33.6-31.1 87.8-3.2 81.8 42.2l-54.2 407c-5.5 40.4-40 70.6-80.9 70.6z" fill="#ffffff" p-id="3123"></path></svg>

UgLabel04

显示第一个数值显示面板的标题。

属性	取值	说明
Caption	本月新增会员	标题名称
Font.Color	clWhite	文字的颜色
Font.Size	20	文字的尺寸大小

UgLabel05

显示第一个数值显示面板的数值。

属性	取值	说明
Caption	1000	显示的数数值
Font.Color	clWhite	文字的颜色
Font.Size	20	文字的尺寸大小

UgPanel03

标头的第一个数值显示的面板。作为文字显示的容器。

属性	取值	说明
BorderStyle	ubsNone	边框的样式，设置为无边框
Color	$00003399	面板的颜色

UgSVG03

设置用于显示SVG图形。

属性	取值	说明
Height	100	控件的像素高度
Width	100	控件的像素宽度
HTML	见下代码	图形显示的SVG源码

<svg t="1648447581705" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4204" width="100" height="100"><path d="M495.1808 644.224a155.7248 155.7248 0 1 0 311.4752 0 156.2624 156.2624 0 0 0-155.7504-155.7248 155.7248 155.7248 0 0 0-155.7248 155.7248z m226.7904 46.208h-53.4272v30.464a13.0816 13.0816 0 0 1-13.1072 13.0816 13.3632 13.3632 0 0 1-13.056-13.0816v-30.464h-53.4528a13.0816 13.0816 0 0 1-13.0816-13.056 13.3632 13.3632 0 0 1 13.0816-13.1072h53.4272v-26.7264h-53.4272a13.3632 13.3632 0 1 1 0-26.7008h31.7952l-34.2016-34.2016a13.2096 13.2096 0 0 1 18.688-18.688l49.7152 47.5392 48.3328-48.0768a13.2096 13.2096 0 0 1 18.688 18.688l-34.176 34.2016h34.2016a13.3632 13.3632 0 1 1 0 26.7008h-53.4272v26.7264h53.4272c7.2192 0 13.0816 5.8624 13.0816 13.0816a13.3632 13.3632 0 0 1-13.3632 13.1072l0.256 0.512z" fill="#ffffff" p-id="4205"></path><path d="M677.632 204.8H236.288A31.232 31.232 0 0 0 204.8 236.3136V787.712C204.8 805.0944 218.9056 819.2 236.3136 819.2H646.656a183.808 183.808 0 0 1-182.1696-179.2512 170.4192 170.4192 0 0 1 182.1696-173.6192 192.5888 192.5888 0 0 1 60.6464 10.6752V225.8944A31.5136 31.5136 0 0 0 677.632 204.8z m-221.7216 314.4192h-169.3696a20.0448 20.0448 0 0 1-22.4256-20.5824c0-11.2128 6.4-19.7632 22.1696-19.7632h169.6256c15.744 0 23.5008 9.088 23.5008 20.3008 0 11.2128-7.4752 20.0448-23.5008 20.0448z m160.256-101.248H287.104c-16.8192 0-22.9632-9.088-22.9632-20.0448 0-10.9312 6.144-19.4816 22.9632-19.4816H616.96c16.8192 0 22.4256 8.8064 22.4256 19.7632 0 10.9568-5.3248 20.3008-22.4256 20.3008l-0.7936-0.5376z m0-108.7232H287.36c-16.8192 0-23.2192-8.0128-23.2192-18.432s6.4-19.2256 23.2192-19.2256h329.6512c16.8192 0 25.3696 8.5504 25.3696 18.944 0 10.4448-8.2688 18.7136-25.3696 18.7136h-0.7936z" fill="#ffffff" p-id="4206"></path></svg>

UgLabel06

显示第一个数值显示面板的标题。

属性	取值	说明
Caption	一次消费会员	标题名称
Font.Color	clWhite	文字的颜色
Font.Size	20	文字的尺寸大小

UgLabel07

显示第一个数值显示面板的数值。

属性	取值	说明
Caption	600	显示的数数值
Font.Color	clWhite	文字的颜色
Font.Size	20	文字的尺寸大小

UgNativeImageList01

此组件作为图库组件使用，双击打开组件上传界面，用于上传背景布局的图片。

UgImage03

此组件为图表1的背景布局图片。

属性	取值	说明
Images	UgNativeImageList01	指定图片的来源控件
ImageIndex	0	指定图片显示的序号

UgjQueryFrame01

此组件为图表1显示组件，双击组件，打开JS组件选择的对话框，选择 FastWeb_DashBoard1_EChart1后点击 [OK] 按钮导入。

UgImage04

此组件为图表2的背景布局图片。

属性	取值	说明
Images	UgNativeImageList01	指定图片的来源控件
ImageIndex	0	指定图片显示的序号

UgjQueryFrame02

此组件为图表2显示组件，双击组件，打开JS组件选择的对话框，选择 FastWeb_DashBoard1_EChart2后点击 [OK] 按钮导入。

UgImage05

此组件为图表3的背景布局图片。

属性	取值	说明
Images	UgNativeImageList01	指定图片的来源控件
ImageIndex	0	指定图片显示的序号

UgjQueryFrame03

此组件为图表3显示组件，双击组件，打开JS组件选择的对话框，选择 FastWeb_DashBoard1_EChart3后点击 [OK] 按钮导入。

UgImage06

此组件为图表4的背景布局图片。

属性	取值	说明
Images	UgNativeImageList01	指定图片的来源控件
ImageIndex	0	指定图片显示的序号

UgjQueryFrame04

此组件为图表4显示组件，双击组件，打开JS组件选择的对话框，选择 FastWeb_DashBoard1_EChart4后点击 [OK] 按钮导入。

UgImage07

此组件为图表5的背景布局图片。

属性	取值	说明
Images	UgNativeImageList01	指定图片的来源控件
ImageIndex	0	指定图片显示的序号

UgjQueryFrame05

此组件为图表5显示组件，双击组件，打开JS组件选择的对话框，选择 FastWeb_DashBoard1_EChart5后点击 [OK] 按钮导入。

UgImage08

此组件为图表6的背景布局图片。

属性	取值	说明
Images	UgNativeImageList01	指定图片的来源控件
ImageIndex	0	指定图片显示的序号

UgjQueryFrame06

此组件为图表6显示组件，双击组件，打开JS组件选择的对话框，选择 FastWeb_DashBoard1_EChart6后点击 [OK] 按钮导入。

UgImage09

此组件为图表7的背景布局图片。

属性	取值	说明
Images	UgNativeImageList01	指定图片的来源控件
ImageIndex	0	指定图片显示的序号

UgjQueryFrame07

此组件为图表7显示组件，双击组件，打开JS组件选择的对话框，选择 FastWeb_DashBoard1_EChart7后点击 [OK] 按钮导入。

UgImage10

此组件为图表8的背景布局图片。

属性	取值	说明
Images	UgNativeImageList01	指定图片的来源控件
ImageIndex	0	指定图片显示的序号

UgjQueryFrame08

此组件为图表8显示组件，双击组件，打开JS组件选择的对话框，选择 FastWeb_DashBoard1_EChart8后点击 [OK] 按钮导入。

UgTimer01

定时器组件，用于向WebSocket服务器发送心跳包，以保持界面的长时间连接。

属性	取值	说明
Interval	30000	设定定时事件触发的时间间隔

# 2.2. 事件设置

UgWebRunFrame-OnAfterRunScript：UgWebRunFrame的OnAfterRunScript事件，执行初始运行状态下的设置。

//JScript
function UgWebRunFrameOnAfterRunScript(sender)
{
  UGMM.LC(Self);
}

1
2
3
4
5

//PasScript
procedure UgWebRunFrameOnAfterRunScript(sender:tobject);
begin
  UGMM.LC(Self);
end;

1
2
3
4
5

// Make sure to add code blocks to your code group

UgWebRunFrameOnAjaxEvent：UgWebRunFrame 的 OnAjaxEvent 事件，用于执行WebSocket的调用事件。

//JScript
function UgWebRunFrameOnAjaxEvent(sender,eventname,params)
{
  if (SameText(eventname,"update"))
  {
    if (params.Values["type"] == "header"){
      //本月订单数
      UgLabel03.Caption = params.Values["dataMonthOrder"];
      UgPanel01.Color = RandomRange(0,16581375);
      //本月新增会员
      UgLabel05.Caption = params.Values["dataNewMember"];
      UgPanel02.Color = RandomRange(0,16581375);
      //一次消费会员
      UgLabel07.Caption = params.Values["dataOnceConsume"];
      UgPanel03.Color = RandomRange(0,16581375);
    }
    if (params.Values["type"] == "chart1")
    {
      //图表1更新
      UgjQueryFrame01.JSONToData("{\"param_title\":\""+ UGMM.LT("人流量(季度)") +"\",\"param_yaxis\":\"" + UGMM.LT("'一号店','二号店','三号店','四号店','五号店'") + "\"," + 
      " \"param_data\": \"" + params.Values["dataChart1"] + "\"}");
    }
    if (params.Values["type"] == "chart2")
    {
      //图表2更新
      UgjQueryFrame02.JSONToData("{\"param_title\":\""+ UGMM.LT("今日&昨日客流量比较") +"\",\"param_lengenddata\":\"" + UGMM.LT("'今日','昨日'") + "\"," + 
      " \"param_xaxis\": \"'00:00','2:00','4:00','6:00','8:00','10:00','12:00','14:00','16:00','18:00','20:00','22:00'\",\"param_series1name\":\"" + UGMM.LT("今日") + "\"," +
      " \"param_series1data\": \"" + params.Values["dataChart2series1"] + "\",\"param_series2name\":\"" + UGMM.LT("昨日") + "\",\"param_series2data\": \"" + params.Values["dataChart2series2"] + "\"}");
    }
    if (params.Values["type"] == "chart3")
    {
      //图表3更新
      UgjQueryFrame03.JSONToData("{\"param_title\":\""+ UGMM.LT("客流指数") +"\",\"param_xaxis\": \"'11:00','11:05','11:10','11:15','11:20','11:25','11:30','11:35','11:40','11:45','11:50','11:55'\"," +
      "\"param_yaxis\":\"" + params.Values["dataChart3"] + "\"}");
    }
    if (params.Values["type"] == "chart4")
    {
      //图表4更新
      UgjQueryFrame04.JSONToData("{\"param_title\":\""+ UGMM.LT("客流强度") +"\",\"param_lengend\": \"'No.1','No.2','No.3','No.4','No.5'\"," +
      "\"param_data\":\"" + params.Values["dataChart4"] + "\"}");
    }
    if (params.Values["type"] == "chart5")
    {
      //图表5更新
      UgjQueryFrame05.JSONToData("{\"param_title\":\""+ UGMM.LT("人流量(年度)") +"\",\"param_yaxis\":\"" + UGMM.LT("'一号店','二号店','三号店','四号店','五号店'") + "\"," + 
      " \"param_data\": \"" + params.Values["dataChart5"] + "\"}");
    }
    if (params.Values["type"] == "chart6")
    {
      //图表6更新
      UgjQueryFrame06.JSONToData("{\"param_title\":\""+ UGMM.LT("本季度&上季度客流强度比较") +"\",\"param_lengenddata\":\"" + UGMM.LT("'本季度','上季度'") + "\"," + 
      " \"param_xaxis\": \""+ UGMM.LT("'一号店','二号店','三号店','四号店','五号店'") + "\",\"param_series1name\":\"" + UGMM.LT("本季度") + "\"," +
      " \"param_series1data\": \"" + params.Values["dataChart6series1"] + "\",\"param_series2name\":\"" + UGMM.LT("上季度") + "\",\"param_series2data\": \"" + params.Values["dataChart6series2"] + "\"}");
    }
    if (params.Values["type"] == "chart7")
    {
      //图表7更新
      UgjQueryFrame07.JSONToData("{\"param_title\":\""+ UGMM.LT("客流指数(月份)") +"\",\"param_xaxis\": \"'1','2','3','4','5','6','7','8','9','10','11','12'\"," +
      "\"param_yaxis\":\"" + params.Values["dataChart7"] + "\"}");
    }
    if (params.Values["type"] == "chart8")
    {
      //图表8更新
      UgjQueryFrame08.JSONToData("{\"param_title\":\""+ UGMM.LT("客均消费") +"\",\"param_lengend\": \"'No.1','No.2','No.3','No.4','No.5'\"," +
      "\"param_data\":\"" + params.Values["dataChart8"] + "\"}");
    }
    UgFSToast01.Success(UGMM.LT("提示"),UGMM.LT("图表已更新"));
    UGCM.AudioPlay("files/audio/beep-digital.mp3");
    UGCM.TTS("界面已刷新","zh-CN");
  } 
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71

//PasScript
procedure UgWebRunFrameOnAjaxEvent(sender: tobject;eventname,params:String);
begin
  if (SameText(eventname,'update')) then
  begin
    if params.Values['type'] = 'header' then
    begin
      //本月订单数，随机颜色变化
      UgLabel03.Caption = params.Values['dataMonthOrder'];
      UgPanel01.Color = RandomRange(0,16581375);
      //本月新增会员，随机颜色变化
      UgLabel05.Caption = params.Values['dataNewMember'];
      UgPanel02.Color = RandomRange(0,16581375);
      //一次消费会员，随机颜色变化
      UgLabel07.Caption = params.Values['dataOnceConsume'];
      UgPanel03.Color = RandomRange(0,16581375);
    end;
    if params.Values['type'] = 'chart1' then
    begin
      //图表1更新
      UgjQueryFrame01.JSONToData('{"param_title":"'+ UGMM.LT('人流量(季度)') +'","param_yaxis":"' + UGMM.LT('''一号店'',''二号店'',''三号店'',''四号店'',''五号店''') + '",' + 
      ' "param_data": "' + params.Values['dataChart1'] + '"}');
    end;
    if params.Values['type'] = 'chart2' then
    begin
      //图表2更新
      UgjQueryFrame02.JSONToData('{"param_title":"'+ UGMM.LT('今日&昨日客流量比较') +'","param_lengenddata":"' + UGMM.LT('''今日'',''昨日''') + '",' + 
      ' "param_xaxis": "''00:00'',''2:00'',''4:00'',''6:00'',''8:00'',''10:00'',''12:00'',''14:00'',''16:00'',''18:00'',''20:00'',''22:00''","param_series1name":"' + UGMM.LT('今日') + '",' +
      ' "param_series1data": "' + params.Values['dataChart2series1'] + '","param_series2name":"' + UGMM.LT('昨日') + '","param_series2data": "' + params.Values['dataChart2series2'] + '"}');
    end;
    if params.Values['type'] = 'chart3' then
    begin
      //图表3更新
      UgjQueryFrame03.JSONToData('{"param_title":"'+ UGMM.LT('客流指数') +'","param_xaxis": "''11:00'',''11:05'',''11:10'',''11:15'',''11:20'',''11:25'',''11:30'',''11:35'',''11:40'',''11:45'',''11:50'',''11:55''",' +
      '"param_yaxis":"' + params.Values['dataChart3'] + '"}');
    end;
    if params.Values['type'] = 'chart4' then
    begin
      //图表4更新
      UgjQueryFrame04.JSONToData('{"param_title":"'+ UGMM.LT('客流强度') +'","param_lengend": "''No.1'',''No.2'',''No.3'',''No.4'',''No.5''",' +
      '"param_data":"' + params.Values['dataChart4'] + '"}');
    end;
    if params.Values['type'] = 'chart5' then
    begin
      //图表5更新
      UgjQueryFrame05.JSONToData('{"param_title":"'+ UGMM.LT('人流量(年度)') +'","param_yaxis":"' + UGMM.LT('''一号店'',''二号店'',''三号店'',''四号店'',''五号店''') + '",' + 
      ' "param_data": "' + params.Values['dataChart5'] + '"}');
    end;
    if params.Values['type'] = 'chart6' then
    begin
      //图表6更新
      UgjQueryFrame06.JSONToData('{"param_title":"'+ UGMM.LT('本季度&上季度客流强度比较') +'","param_lengenddata":"' + UGMM.LT('''本季度'',''上季度''') + '",' + 
      ' "param_xaxis": "'+ UGMM.LT('''一号店'',''二号店'',''三号店'',''四号店'',''五号店''') + '","param_series1name":"' + UGMM.LT('本季度') + '",' +
      ' "param_series1data": "' + params.Values['dataChart6series1'] + '","param_series2name":"' + UGMM.LT('上季度') + '","param_series2data": "' + params.Values['dataChart6series2'] + '"}');
    end;
    if params.Values['type'] = 'chart7' then
    begin
      //图表7更新
      UgjQueryFrame07.JSONToData('{"param_title":"'+ UGMM.LT('客流指数(月份)') +'","param_xaxis": "''1'',''2'',''3'',''4'',''5'',''6'',''7'',''8'',''9'',''10'',''11'',''12''",' +
      '"param_yaxis":"' + params.Values['dataChart7'] + '"}');
   end;
   if params.Values['type'] = 'chart8' then
   begin
     //图表8更新
     UgjQueryFrame08.JSONToData('{"param_title":"'+ UGMM.LT('客均消费') +'","param_lengend": "''No.1'',''No.2'',''No.3'',''No.4'',''No.5''",' +
     '"param_data":"' + params.Values['dataChart8'] + '"}');
   end;
   UgFSToast01.Success(UGMM.LT('提示'),UGMM.LT('图表已更新'));
   UGCM.AudioPlay('files/audio/beep-digital.mp3');
   UGCM.TTS('界面已刷新','zh-CN');
  end;
end;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72

// Make sure to add code blocks to your code group

UgTimer01OnTimer UgTimer01 的 OnTimer 事件，定时发送消息。

//JScript
function UgTimer01OnTimer(sender)
{
  UGMM.SendWsMsgBySId(Unisession.SessionId,"HeartBeat");
}

1
2
3
4
5

//PasScript
procedure UgTimer01OnTimer(sender: tobject);
begin
  UGMM.SendWsMsgBySId(Unisession.SessionId,'HeartBeat');
end;

1
2
3
4
5

// Make sure to add code blocks to your code group

设置完成后保存此模块。

# 3. 设置IsoBean模块

点击 [云服务工具] - [IsoBean模块管理]，打开IsoBean模块管理界面，点击 [添加] 按钮，按照以下提示创建一个IsoBean模块。点击 [保存] 按钮。

创建完成后，选择创建的IsoBean，点击 [API设计]，创建的API请按照以下方式进行设置。

//JScript
function RestAPI()
{
  var url;
  url = "/?bean="+Var_Bean + "&userkey=" + Var_UserKey + "&language=" + Var_Language;
  Result = " <html>"
  + "   <body style=\"margin: 0px;height: 100%;width: 100%;\">"
  + "     <iframe width=\"100%\" height=\"100%\" frameborder=\"no\" border=\"0\" marginwidth=\"0px\" marginheight=\"0px\" scrolling=\"no\" allowtransparency=\"yes\" src=\"" + url + "\"" 
  + "             width=\"100%\""
  + "             height=\"100%\""
  + "     >"
  + "     </iframe>"
  + "   </body>"
  + " </html>";
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

//PasScript
function RestAPI:String;
var
  url: String;
begin
  url := '/?bean='+Var_Bean + '&userkey=' + Var_UserKey + '&language=' + Var_Language; 
  Result := ' <html>'
  + '   <body style="margin: 0px;height: 100%;width: 100%;">'
  + '     <iframe width="100%" height="100%" frameborder="no" border="0" marginwidth="0px" marginheight="0px" scrolling="no" allowtransparency=\"yes\" src="' + url + '"' 
  + '             width="100%"'
  + '             height="100%"'
  + '     >'
  + '     </iframe>'
  + '   </body>'
  + ' </html>';
end;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

// Make sure to add code blocks to your code group

# 4. 发布IsoBean

保存后，返回列表界面，选择刚才创建的IsoBean模块，点击 [IsoBean发布]，打开 IsoBean 发布的界面。

左侧的用户列表选择要发布的用户，右侧点击 [IsoBean 选择...] ，打开IsoBean列表界面，选择刚才创建的IsoBean，导入至此，点击右上角的 [保存] ，然后点击下方的 [发布] 按钮进行发布，然后点击 [预览] 按钮，可查看发布的链接，可直接在界面中预览，或者将预览的链接复制至浏览器中查看。

按照本节开头的方式将IsoBean发布给其他用户，之后，可使用 http://localhost:8888/?isobean=IB_wb-das-0001_dashboard_demo1&userkey={user_guid} (opens new window) 来打开战情报表。通过调用程序型IsoBean 的示例可更新战情报表中的图表。

← 报表型IsoBean 范例汇总→