学步园

 

需求：客户有关于某仪器的运行参数（来自数据库），需要近乎实时的了解各个参数的状态曲线。如果超出警戒范围，则要发出警报（客户端）。

实现：AJAX无刷新动态（2秒）更新页面参数曲线，客户端调用ActiveX发出报警。

 

首先，是如何才能显示这些动态变化的点的曲线。

这里的思路比较简单：用div的高度来显示数值（嵌套一个小的div，有高度，居顶，加色显示，形成点），夹以repeater来横向显示这些div。

 1<asp:Repeater ID="rpt_chart" runat="server">
 2                                    <HeaderTemplate>
 3                                        <table border="0" cellpadding="0" cellspacing="0">
 4                                            <tr>
 5                                    </HeaderTemplate>
 6                                    <ItemTemplate>
 7                                        <td height='<%# Eval("RegionHeight")%>' style="background-image: <%# Eval("RegionImg")%>"
 8                                            valign="bottom">
 9                                            <div style='width: 2px; height: <%# Eval("StandardHeight")%>px;'
10                                                title='<%# Eval("Name")+"\n"+Eval("Date")+"\n"+ Eval("StandardHeight")%>' valign="top">
11                                                <div style='height: 2px; background: <%# Eval("Color")%>;'>
12                                                </div>
13                                            </div>
14                                        </td>
15                                    </ItemTemplate>
16                                    <FooterTemplate>
17                                        </tr></table>
18                                    </FooterTemplate>
19                                </asp:Repeater>

注意：

1：数据点横向现实

   使用repeater特点，在header上动手脚，加一个table,tr的头。然后再item里面加入td重复。

2：点的实现

   先一个外层div，style='width: 2px; height: <%# Eval("StandardHeight")%>px;'，设置高度，但是无色；然后valign="top"，这样它内部的物件就会在顶端显示；

   内嵌的物件还是一个div，固定高度（宽度其实也就固定了，就是他的parent的宽度，所以他的大小就是2*2的一个方块，正好是一个点。1*1的就太小了）。所不同的是，这个div有颜色<div style='height: 2px; background: <%# Eval("Color")%>;'>,所以他就可以以一个小色块的方式出现在parent的顶端。

3：坐标转化

   由于reperater的td都是靠底显示（<td ….valign="bottom">），所以，他的中线坐标需要转化。

动态，就需要一个时钟控件作triger，用AJAX来发出异步数据请求，然后无刷新更新页面曲线图表。

 

<asp:updatepanel>
.....Repeater.....
 <Triggers>
                                <asp:AsyncPostBackTrigger ControlID="tm_retrieveDetail" EventName="Tick" />
                            </Triggers>

<asp:Timer runat="server" ID="tm_retrieveAll" Interval="2000" OnTick="tm_retrieveAll_Tick">
        </asp:Timer>

至于客户端的报警，用ActiveX来实现。由于.net开发ActiveX有些问题，（不好安装），所以使用VB6开发之。

 

 1Private Declare Function APIBeep()Function APIBeep Lib "kernel32" Alias "Beep" (ByVal dwFreq As Long, ByVal dwDuration As Long) As Long
 2' To make a beep lasting 500 milliseconds with frequency specified in the
 3' TextBox txtFrequency (try 1000 for starters):
 4Dim appLog As String
 5Dim alertLog As String
 6
 7Public Function Beep()Function Beep(msg As String)
 8  Dim frequency As Long
 9  Log_Event msg, alertLog
10  If ck_beep.Value Then
11     'call the beep interface
12     'frequency = CLng(txtFrequency.Text)
13      frequency = 100
14      APIBeep frequency, 500
15     'shell beep
16   Else
17     '
18     'ck_beep.Caption = "Beep--Has been disabled"
19   End If
20End Function

其他需求，诸如缩略图，放大图等，还有点数量控制（div不宜超过200个）等，都比较简单了，就是数据的坐标转化而已。