戰情型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 範例彙總→