随心所欲

做个幸福的人
posts - 147, comments - 1402, trackbacks - 28, articles - 0
  博客园 :: 首页 :: 新随笔 ::  :: 订阅 订阅 :: 管理

 

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

实现: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:点的实现

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

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

3:坐标转化

   由于reperatertd都是靠底显示(<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 Lib "kernel32" Alias "Beep" (ByVal dwFreq As LongByVal dwDuration As LongAs 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(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个)等,都比较简单了,就是数据的坐标转化而已。

Feedback

#1楼    回复  引用  查看    

2006-12-04 10:08 by Jeffrey Zhao      
我觉得不一定要用AJAX,因为动态曲线可以在服务器段画好输出,在客户端只要重新加载图片就可以了。

#2楼    回复  引用  查看    

2006-12-04 10:14 by 跨越      
用Ajax和不用 Ajax实现的原理应该是一样的,我想这和我们平时项目中的矩形图(投票系统)的实现方式是一样的
用Ajax使可以用户感觉不到刷新吧

#3楼 [楼主]   回复  引用  查看    

2006-12-04 10:20 by 随心所欲      
@Jeffrey Zhao
good idea.
the last one was a winbase program already. but it's too slow.
so change to webbase

#4楼    回复  引用  查看    

2006-12-04 10:20 by Jeffrey Zhao      
@跨越
重新加载图片也是不刷新的。:)

#5楼 [楼主]   回复  引用  查看    

2006-12-04 10:21 by 随心所欲      
@跨越
给客户的技术噱头。
其实整个AJAX也不过是个噱头而已。

#6楼 [楼主]   回复  引用  查看    

2006-12-04 10:23 by 随心所欲      
@Jeffrey Zhao
第一个版本的就是win的,可是速度太慢。所以才有我们的这个版本。
有点奇怪,win的为什么就这么慢

#7楼 [楼主]   回复  引用  查看    

2006-12-04 10:32 by 随心所欲      
还有,新版的AJAX,this.RegisterStartupScript函数似乎不好用了。所以用了一个很粗鄙的方法来代替这个函数。现在有新的方法来实现他么?

#8楼    回复  引用  查看    

2006-12-04 10:46 by 高海东      
这个效率怎么样

#9楼    回复  引用  查看    

2006-12-04 10:47 by Jeffrey Zhao      
@随心所欲
你用了UpdatePanel,在更新时就不能用this.RegisterStartupScript了,应该用ScriptManager.Register...

#10楼 [楼主]   回复  引用  查看    

2006-12-04 10:49 by 随心所欲      
@高海东
very good

#11楼    回复  引用  查看    

2006-12-04 10:50 by Blueeyes      
用FLASH不停的调用数据,动态显示在WEB,这样可以让客户更爽快的掏钱

#12楼 [楼主]   回复  引用  查看    

2006-12-04 11:00 by 随心所欲      
@Jeffrey Zhao
thanks! got it

Microsoft.Web.UI.ScriptManager.RegisterStartupScript(this.Button2, this.GetType(),"TT", "\r\n alert('xx') \r\n ", true);

http://dotnetslackers.com/microsoft/re-40631_ms_ajax_beta1_clientscript_is_dead_long_live_scriptmanager.aspx

#13楼 [楼主]   回复  引用  查看    

2006-12-04 11:03 by 随心所欲      
@Blueeyes
i do not know much about FLASH. ^_^

#14楼    回复  引用    

2006-12-04 11:21 by suyin [未注册用户]
收藏

#15楼 [楼主]   回复  引用  查看    

2006-12-04 11:23 by 随心所欲      
@Jeffrey Zhao
ScriptManager.Registerxxxx(Control contrl....);
the control must be a control inside of the updating updatePanle.

#16楼    回复  引用  查看    

2006-12-04 12:19 by neuhawk      
不如用wpf wpf/e

#17楼 [楼主]   回复  引用  查看    

2006-12-04 13:15 by 随心所欲      
@neuhawk
愿闻其详 ...

#18楼    回复  引用  查看    

2006-12-04 14:57 by 美文宝车      
用flash不是更好?可以避免不停的刷新。

#19楼 [楼主]   回复  引用  查看    

2006-12-04 17:31 by 随心所欲      
@美文宝车
呵呵,不太懂FLASH…..






标题  
姓名  
主页
Email (博主才能看到) 
验证码 *  看不清,换一张 [登录][注册]
内容(请不要发表任何与政治相关的内容)  
  登录  使用高级评论  新用户注册  返回页首  恢复上次提交      
Google站内搜索

China-pub 计算机图书网上专卖店!6.5万品种 2-8折!
近千种 9-95 新二手计算图书火热销售中!
开发者征途系统新作:《设计模式——基于C#的工程化实现及扩展》

相关文章:

相关链接:
 
Google