Flex某局电力线缆检测系统Demo

发布时间：2020-12-15 04:29:50 所属栏目：百科来源：网络整理

导读：一： ?xml version="1.0" encoding="utf-8"? s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009" ??????? xmlns:s="library://ns.adobe.com/flex/spark" ??????? xmlns:mx="library://ns.adobe.com/flex/mx" ??????? xmlns:jshlTab="szpower.j

一：

<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
??????? xmlns:s="library://ns.adobe.com/flex/spark"
??????? xmlns:mx="library://ns.adobe.com/flex/mx"
??????? xmlns:jshlTab="szpower.jshl.*"
??????? xmlns:szpower="szpower.*"
??????? width="1200" height="700" backgroundColor="#F9F7F3" creationComplete="init()">
?<fx:Style source="assets/styles.css"/>
?<fx:Declarations>
?</fx:Declarations>
?<fx:Script>
??<![CDATA[
???import szpower.main.Common;
???
???public function init():void {
????Common.banbie_combobox = bb_combobox;
????Common.dianyadengji_combobox = dianyadengji_combobox;
????Common.fuzeren_combobox = xlfzr_combobox;
????Common.xianlu_combobox = xlmc_combobox;
????
????Common.initialize();
???}
???
??]]>
?</fx:Script>
?<s:BorderContainer id="rootContainer" x="0" y="0" width="100%" height="100%"
??????? backgroundColor="#F9F7F3" borderVisible="true">
??<s:layout>
???<s:VerticalLayout horizontalAlign="left" paddingBottom="20" paddingLeft="20"
???????? paddingRight="20" paddingTop="20"/>
??</s:layout>
??<s:BorderContainer id="critieriaContainer" width="100%" height="30" backgroundColor="#F9F7F3"
???????? borderVisible="false" borderWeight="0" cornerRadius="0"
???????? dropShadowVisible="false">
???<s:layout>
????<s:HorizontalLayout gap="25" verticalAlign="middle"/>
???</s:layout>
???<s:Label id="dianya_label" x="10" y="10" fontWeight="bold" text="电压等级:"/>
???<s:ComboBox id="dianyadengji_combobox" x="66" y="4" width="100" dropShadowVisible="false"
??????fontFamily="中易宋体" fontWeight="bold"/>
???<s:Label id="banbie_label" x="186" y="10" fontWeight="bold" text="班别:"/>
???<s:ComboBox id="bb_combobox" width="100"/>
???<s:Label text="线路负责人:"/>
???<s:ComboBox id="xlfzr_combobox" width="110"/>
???<s:Label text="线路名称:"/>
???<s:ComboBox id="xlmc_combobox" width="150"/>
??</s:BorderContainer>
??<mx:TabNavigator id="chartTabContainer" width="100%" height="100%" dropShadowVisible="true"
?????? paddingTop="0" styleName="TabBar">
???<szpower:Tab id="jishu_huceng_huanliu_tab" label="金属护层环流" chartLable="金属护层环流"/>
???<szpower:Tab id="wendu_zonghe_tab" isSeven="true"? label="温度综合曲线" chartLable="温度综合曲线"/>
???<szpower:Tab id="huanliu_wendu_zonghe_tab" label="环流-温度综合曲线" chartLable="环流-温度综合曲线" isHjwdShow="true" isBlueLineShow="true"/>
???<szpower:Tab id="zonghe_huceng_huanliu_tab" label="综合护层环流比对" chartLable="综合护层环流比对" />
???<szpower:Tab id="baiyi_tab" label="白蚁啃噬"? chartLable="白蚁啃噬"/>
???<szpower:Tab id="zhendong_qiangdu_tab" label="振动强度" chartLable="振动强度" isNegative="true"/>
???<szpower:Tab id="zhendong_huanliu_tubian_tab" label="振动-环流突变曲线" chartLable="振动-环流突变曲线" isNegative="true"/>
???<szpower:Tab id="zantai_boxing_tab" label="暂态波形" chartLable="暂态波形" isNegative="true"/>
??</mx:TabNavigator>
?</s:BorderContainer>
</s:WindowedApplication>

二：common.as

package szpower.main
{
?import flash.events.MouseEvent;
?import flash.events.TimerEvent;
?import flash.utils.Timer;
?
?import mx.collections.ArrayCollection;
?import mx.collections.ArrayList;
?import mx.effects.Move;
?import mx.effects.Resize;
?import mx.events.FlexMouseEvent;
?import mx.events.FlexNativeWindowBoundsEvent;
?
?import spark.components.ComboBox;
?import spark.components.HGroup;
?import spark.components.Scroller;
?import spark.events.IndexChangeEvent;
?
?import szpower.Chart;
?
?public class Common
?{
??
??[Bindable] ?
??public static var dianyadengjiList:ArrayCollection = new ArrayCollection(
???[ {label:"全部",data:0},{label:"110kV",data:1},{label:"220kV",data:2}]);
??
??//combox数组定义
??[Bindable] ????
??public static var banbieList:ArrayCollection;?
??[Bindable] ?
??public static var fuzerenList:ArrayCollection;?
??[Bindable] ?
??public static var xianluList:ArrayCollection;?
??
??public static var banbie_combobox:ComboBox;
??public static var dianyadengji_combobox:ComboBox;
??public static var fuzeren_combobox:ComboBox;
??public static var xianlu_combobox:ComboBox;
??
??public static var collectionFrequence:Number = 5;
??
??public static var chartMove:Move = new Move();
??public static var chartResize:Resize = new Resize();
??
??public static var mainTime:Timer = new Timer(collectionFrequence * 1000);
??
??private static var chartList:ArrayList = new ArrayList();
??
??
??//combox二触发事件???
??public static function banbie_combobox_changeHandler(event:IndexChangeEvent):void
??{????
???if(banbie_combobox.selectedItem.data == 0){?????
????fuzerenList = new ArrayCollection([{label:"全部",{label:"张三",{label:"李四",data:2},{label:"王五",data:3},{label:"周六",data:4},{label:"赵七",data:5},{label:"钱八",data:6},{label:"刘九",data:7}]);
???}
???if(banbie_combobox.selectedItem.data == 1){
????fuzerenList = new ArrayCollection([{label:"张三",data:2}]);
???}
???if(banbie_combobox.selectedItem.data == 2){
????fuzerenList = new ArrayCollection([,data:4}]);
???}????
???if(banbie_combobox.selectedItem.data == 3){
????fuzerenList = new ArrayCollection([{label:"赵七",data:6}]);
???}
???if(banbie_combobox.selectedItem.data == 4){
????fuzerenList = new ArrayCollection([{label:"刘九",data:7}]);
???}
???fuzeren_combobox.dataProvider = fuzerenList;
??}
??
??public static function dianyadengji_combobox_changeHandler(event:IndexChangeEvent):void
??{
???if(dianyadengji_combobox.selectedItem.data == 0){
????
????banbieList = new ArrayCollection([{label:"全部",{label:"一班",{label:"二班",{label:"三班",{label:"四班",data:4}]);
???}
???if(dianyadengji_combobox.selectedItem.data == 1)
???{
????banbieList = new ArrayCollection([{label:"一班",data:2}]);?
???}
???
???if(dianyadengji_combobox.selectedItem.data == 2){
????banbieList = new ArrayCollection([{label:"三班",data:4}]);
???}?
???banbie_combobox.dataProvider = banbieList;
??}
??
??public static function fuzeren_combobox_changeHandler(event:IndexChangeEvent):void
??{
???if(fuzeren_combobox.selectedItem.data == 0){
????xianluList = new ArrayCollection([{label:"110kV创业至沙井I线",{label:"110kV创业至沙井II线",{label:"220kV华星至玉律I线",{label:"220kV华星至玉律II线",
?????{label:"110kV龙华至沙井I线",{label:"110kV龙华至沙井II线",{label:"220kV华星至龙华I线",{label:"220kV华星至龙华II线",data:7},
?????{label:"110kV创业至宝安I线",data:8},{label:"110kV创业至宝安II线",data:9},{label:"220kV创业至深南I线",data:10},{label:"220kV创业至深南II线",data:11},
?????{label:"110kV龙华至坂田I线",data:12},{label:"110kV龙华至坂田II线",data:13}]);
???}
???if(fuzeren_combobox.selectedItem.data == 1){
????xianluList = new ArrayCollection([{label:"110kV创业至沙井I线",data:1}]);
???}
???if(fuzeren_combobox.selectedItem.data == 2){
????xianluList = new ArrayCollection([{label:"220kV华星至玉律I线",data:3}]);
???}????
???if(fuzeren_combobox.selectedItem.data == 3){
????xianluList = new ArrayCollection([{label:"110kV龙华至沙井I线",data:5}]);
???}
???if(fuzeren_combobox.selectedItem.data == 4){
????xianluList = new ArrayCollection([{label:"220kV华星至龙华I线",data:7}]);
???}????
???if(fuzeren_combobox.selectedItem.data == 5){
????xianluList = new ArrayCollection([{label:"110kV创业至宝安I线",data:9}]);
???}
???if(fuzeren_combobox.selectedItem.data == 6){
????xianluList = new ArrayCollection([{label:"220kV创业至深南I线",data:11}]);
???}
???if(fuzeren_combobox.selectedItem.data == 7){
????xianluList = new ArrayCollection([{label:"110kV龙华至坂田I线",data:13}]);
???}?
???xianlu_combobox.dataProvider = xianluList;
??}?
??
??public static function xlmc_combox_changeHandler(event:IndexChangeEvent):void
??{
???refresh();????
??}
??
??public static function addChart(chart:Chart):void {
???chartList.addItem(chart);
???mainTime.addEventListener(TimerEvent.TIMER,chart.getData);
??}
??
??public static function initialize():void {
???dianyadengji_combobox.addEventListener(IndexChangeEvent.CHANGE,dianyadengji_combobox_changeHandler);
???banbie_combobox.addEventListener(IndexChangeEvent.CHANGE,banbie_combobox_changeHandler);
???fuzeren_combobox.addEventListener(IndexChangeEvent.CHANGE,fuzeren_combobox_changeHandler);
???xianlu_combobox.addEventListener(IndexChangeEvent.CHANGE,xlmc_combox_changeHandler);
???dianyadengji_combobox.dataProvider = dianyadengjiList;
???banbie_combobox.dataProvider = banbieList;
???fuzeren_combobox.dataProvider = fuzerenList;
???xianlu_combobox.dataProvider = xianluList;

???mainTime.start();
??}
??
??public static function refresh():void {
???for (var i:int = 0;i < chartList.length;i++) {
????var ch:Chart = Chart (chartList.getItemAt(i));
????ch.refresh();
???}
??}
?}
}

三：CableDiagram.mxml

四：CableDiagramControl.mxml

<?xml version="1.0" encoding="utf-8"?>
<s:SkinnableContainer xmlns:fx="http://ns.adobe.com/mxml/2009"
?????? xmlns:s="library://ns.adobe.com/flex/spark"
?????? xmlns:mx="library://ns.adobe.com/flex/mx"
?????? width="100%" height="15%">
?<fx:Declarations>
??
?</fx:Declarations>
?<fx:Script>
??<![CDATA[
???import szpower.CableDiagram;
???
???public var cableDiagram:CableDiagram;
???
???protected function togglebutton_clickHandler(event:MouseEvent,cableIndex:int,index:int):void
???{
????var btn:ToggleButton = ToggleButton (event.target);
????var cableName:String = "cable_" + cableIndex;
????if (btn.selected) {
?????cableDiagram[cableName].getChildAt(index).visible = true;
????} else {
?????cableDiagram[cableName].getChildAt(index).visible = false;
????}????
???}
??]]>
?</fx:Script>
?<s:layout>
??<s:VerticalLayout/>
?</s:layout>
?<s:Group x="35" y="10" width="100%" height="50%">
??<s:layout>
???<s:HorizontalLayout gap="9" paddingLeft="0" verticalAlign="middle"/>
??</s:layout>
??<s:Group width="400" height="100%">
???<s:layout>
????<s:HorizontalLayout paddingLeft="15" verticalAlign="middle"/>
???</s:layout>
???<s:Label color="#FF0000" text="1#"/>
???<s:Label text="600m"/>
???<s:Spacer width="10" height="10"/>
???<s:Spacer width="10" height="10"/>
???<s:Spacer width="10" height="10"/>
???<s:Spacer width="10" height="10"/>
???<s:Label color="#FF0000" text="2#"/>
???<s:Label text="600m"/>
???<s:Spacer width="10" height="10"/>
???<s:Spacer width="10" height="10"/>
???<s:Spacer width="10" height="10"/>
???<s:Spacer width="10" height="10"/>
???<s:Label color="#FF0000" text="3#"/>
???<s:Label text="600m"/>
???<s:Spacer width="10" height="10"/>
???<s:Label color="#FF0000" text="4#"/>
???<s:Label text="600m"/>
??</s:Group>
??<s:Group width="350" height="100%">
???<s:layout>
????<s:HorizontalLayout verticalAlign="middle"/>
???</s:layout>
???<s:Spacer width="10" height="10"/>
???<s:Spacer width="10" height="10"/>
???<s:Spacer width="10" height="10"/>
???<s:Spacer width="10" height="10"/>
???<s:Spacer width="10" height="10"/>
???<s:Label color="#FF0000" text="5#"/>
???<s:Label text="600m"/>
???<s:Spacer width="10" height="10"/>
???<s:Spacer width="10" height="10"/>
???<s:Spacer width="10" height="10"/>
???<s:Spacer width="10" height="10"/>
???<s:Label color="#FF0000" text="6#"/>
???<s:Label text="600m"/>
???<s:Spacer width="10" height="10"/>
???<s:Label color="#FF0000" text="7#"/>
???<s:Label text="600m"/>
??</s:Group>
??<s:Group width="350" height="100%">
???<s:layout>
????<s:HorizontalLayout verticalAlign="middle"/>
???</s:layout>
???<s:Spacer width="10" height="10"/>
???<s:Spacer width="10" height="10"/>
???<s:Spacer width="10" height="10"/>
???<s:Spacer width="10" height="10"/>
???<s:Spacer width="10" height="10"/>
???<s:Label color="#FF0000" text="8#"/>
???<s:Label text="600m"/>
???<s:Spacer width="10" height="10"/>
???<s:Spacer width="10" height="10"/>
???<s:Spacer width="10" height="10"/>
???<s:Spacer width="10" height="10"/>
???<s:Label color="#FF0000" text="9#"/>
???<s:Label text="600m"/>
???<s:Spacer width="10" height="10"/>
???<s:Label color="#FF0000" text="10#"/>
???<s:Label text="600m"/>
??</s:Group>
??<s:Group width="350" height="100%">
???<s:layout>
????<s:HorizontalLayout verticalAlign="middle"/>
???</s:layout>
???<s:Spacer width="10" height="10"/>
???<s:Spacer width="10" height="10"/>
???<s:Spacer width="10" height="10"/>
???<s:Label color="#FF0000" text="11#"/>
???<s:Label text="600m"/>
???<s:Spacer width="10" height="10"/>
???<s:Spacer width="10" height="10"/>
???<s:Spacer width="10" height="10"/>
???<s:Spacer width="10" height="10"/>
???<s:Label color="#FF0000" text="12#"/>
???<s:Label text="600m"/>
???<s:Spacer width="10" height="10"/>
???<s:Label color="#FF0000" text="13#"/>
???<s:Label text="600m"/>
??</s:Group>
??
?</s:Group>
?<s:Group width="100%" height="50%">
??<s:layout>
???<s:HorizontalLayout gap="9" verticalAlign="middle"/>
??</s:layout>
??<s:Group>
???<s:layout>
????<s:HorizontalLayout paddingLeft="0" verticalAlign="middle"/>
???</s:layout>
???<s:Label text="1#单元"/>
???<s:ToggleButton id="btn_1" label="护层环流" chromeColor="#C1FBBE"
???????click="togglebutton_clickHandler(event,1,1)"/>
???<s:ToggleButton id="btn_2" label="缆表温度" chromeColor="#C1FBBE"
???????click="togglebutton_clickHandler(event,2)"/>
???<s:ToggleButton id="btn_3" label="振动监测" chromeColor="#C1FBBE"
???????click="togglebutton_clickHandler(event,3)"/>
???<s:ToggleButton id="btn_4" label="接头压力" chromeColor="#C1FBBE"
???????click="togglebutton_clickHandler(event,4)"/>
??</s:Group>
??<s:Group width="350" height="100%">
???<s:layout>
????<s:HorizontalLayout paddingLeft="0" verticalAlign="middle"/>
???</s:layout>
???<s:Label text="2#单元"/>
???<s:ToggleButton id="btn_5" label="护层环流" chromeColor="#C1FBBE"
???????click="togglebutton_clickHandler(event,2,1)"/>
???<s:ToggleButton id="btn_6" label="缆表温度" chromeColor="#C1FBBE"
???????click="togglebutton_clickHandler(event,2)"/>
???<s:ToggleButton id="btn_7" label="振动监测" chromeColor="#C1FBBE"
???????click="togglebutton_clickHandler(event,3)"/>
???<s:ToggleButton id="btn_8" label="接头压力" chromeColor="#C1FBBE"
???????click="togglebutton_clickHandler(event,4)"/>
??</s:Group>
??<s:Group width="350" height="100%">
???<s:layout>
????<s:HorizontalLayout verticalAlign="middle"/>
???</s:layout>
???<s:Label text="3#单元"/>
???<s:ToggleButton id="btn_9" label="护层环流" chromeColor="#C1FBBE"
???????click="togglebutton_clickHandler(event,3,1)"/>
???<s:ToggleButton id="btn_10" label="缆表温度" chromeColor="#C1FBBE"
???????click="togglebutton_clickHandler(event,2)"/>
???<s:ToggleButton id="btn_11" label="振动监测" chromeColor="#C1FBBE"
???????click="togglebutton_clickHandler(event,3)"/>
???<s:ToggleButton id="btn_12" label="接头压力" chromeColor="#C1FBBE"
???????click="togglebutton_clickHandler(event,4)"/>
??</s:Group>
??<s:Group width="400" height="100%">
???<s:layout>
????<s:HorizontalLayout verticalAlign="middle"/>
???</s:layout>
???<s:Label text="4#单元"/>
???<s:ToggleButton id="btn_13" label="护层环流" chromeColor="#C1FBBE"
???????click="togglebutton_clickHandler(event,4,1)"/>
???<s:ToggleButton id="btn_14" label="缆表温度" chromeColor="#C1FBBE"
???????click="togglebutton_clickHandler(event,2)"/>
???<s:ToggleButton id="btn_15" label="振动监测" chromeColor="#C1FBBE"
???????click="togglebutton_clickHandler(event,3)"/>
???<s:ToggleButton id="btn_16" label="接头压力" chromeColor="#C1FBBE"
???????click="togglebutton_clickHandler(event,4)"/>
???
??</s:Group>
?</s:Group>
</s:SkinnableContainer>

五：Chart.mxml

<?xml version="1.0" encoding="utf-8"?>
<s:BorderContainer xmlns:fx="http://ns.adobe.com/mxml/2009"
?????? xmlns:s="library://ns.adobe.com/flex/spark"
?????? xmlns:mx="library://ns.adobe.com/flex/mx"
?????? width="350" height="100%" creationComplete="init()" dropShadowVisible="true">
?<fx:Declarations>
??<mx:SolidColorStroke id="s1" color="yellow" weight="2"/>
??<mx:SolidColorStroke id="s2" color="green" weight="2"/>
??<mx:SolidColorStroke id="s3" color="red" weight="2"/>
??<s:SolidColorStroke id="s4" color="black" weight="2"/>
??<s:SolidColorStroke id="s5" color="blue" weight="2"/>
??<s:SolidColorStroke id="s6" color="0x11bfea" weight="2"/>
?</fx:Declarations>
?<fx:Script>
??<![CDATA[
???import mx.charts.chartClasses.IAxis;
???import mx.collections.ArrayCollection;
???import mx.events.FlexEvent;
???import mx.events.SliderEvent;
???import mx.formatters.DateFormatter;
???
???import szpower.main.Common;
???
???[Bindable]
???private var chartData:ArrayCollection = new ArrayCollection();?
???
???public var maxElementSize:Number = 12;
???public var isMax:Boolean = false;
???[Bindable]
???public var isSeven:Boolean = false;
???
???[Bindable]
???public var isHjwdShow:Boolean = false;
???
???[Bindable]
???public var isBlueLineShow:Boolean = false;
???
???[Bindable]
???public var isNegative:Boolean = false;
???
???[Bindable]
???public var relatedTab:Tab;
???
???[Bindable]
???public var chartLable:String;
???
???[Bindable]??
???private var dateFormat:DateFormatter = new DateFormatter();
???private var dateVar:Date;
???
???public function refresh():void {????
????dateFormat.formatString = "HH:NN:SS";
????chartData.removeAll();
????var startDate:Date = new Date();
????startDate.time = startDate.time - maxElementSize * Common.collectionFrequence * 1000;
????var count:Number = 0;
????while (count < maxElementSize) {
?????var date:Date = new Date();
?????date.time = startDate.time;
?????addChartDataItem(date);
?????dateVar = date;
?????startDate.time += Common.collectionFrequence * 1000;
?????count++;
????}
???}
???
???public function init():void {
????zoomSlider.addEventListener(SliderEvent.CHANGE,zoomSliderChangeHandler);
????zoomSlider.addEventListener(FlexEvent.VALUE_COMMIT,zoomSliderValueCommitHandler);
????cbaCheckBox.addEventListener(MouseEvent.CLICK,cbaClickHandler);
????bacCheckBox.addEventListener(MouseEvent.CLICK,bacClickHandler);
????acbCheckBox.addEventListener(MouseEvent.CLICK,acbClickHandler);
????hjwdCheckBox.addEventListener(MouseEvent.CLICK,hjwdClickHandler);
????lineChart.addEventListener(MouseEvent.MOUSE_WHEEL,chartMouseWheelHandler);
????lineChart.addEventListener(MouseEvent.MOUSE_OVER,chartMouSEOverHandler);
????lineChart.addEventListener(MouseEvent.MOUSE_OUT,chartMouSEOutHandler);
????lineChart.addEventListener(MouseEvent.DOUBLE_CLICK,chartDoubleClickHandler);
????datetimeAxis.labelFunction = formatlabel;
????lineChart.dataProvider = chartData;
????Common.addChart(this);
????refresh();
???}
???
???public function addChartDataItem(dt:Date):void {
????if(!isNegative){
????var line_1_valueTestValue:int = Math.random()*50+10;
????var line_1_bcaTestValue:int = Math.random()*30+10;
????var line_1_cbaTestValue:int = Math.random()*20+10;????
????
????var line_2_valueTestValue:int = Math.random()*41+10;
????var line_2_bcaTestValue:int = Math.random()*36+10;
????var line_2_cbaTestValue:int = Math.random()*52+10;
????
????var line_3_valueTestValue:int = Math.random()*32+10;
????}
????if(isNegative){
?????var line_1_valueTestValue:int = Math.random()*50-15;
?????var line_1_bcaTestValue:int = Math.random()*30-15;
?????var line_1_cbaTestValue:int = Math.random()*20-15;????
?????
?????var line_2_valueTestValue:int = Math.random()*41-15;
?????var line_2_bcaTestValue:int = Math.random()*36-15;
?????var line_2_cbaTestValue:int = Math.random()*52-15;
?????
?????var line_3_valueTestValue:int = Math.random()*32-15;
????}
????if (chartData.length == maxElementSize) {
?????chartData.removeItemAt(0);
????}
????chartData.addItem({date: dt,valueTest_acb: line_1_valueTestValue,
?????valueTest_bca: line_1_bcaTestValue,valueTest_cba: line_1_cbaTestValue,
?????valueTest_acb_1:line_2_valueTestValue,valueTest_bca_1:line_2_bcaTestValue,
?????valueTest_cba_1:line_2_cbaTestValue,valueTest_cba_2:line_3_valueTestValue});
???}
???
???public function getData(et:Event):void {
????datetimeAxis.interval = 10;
????var currentDate:Date = new Date();
????dateVar.time += Common.collectionFrequence * 1000;
????currentDate.time = dateVar.time;
????addChartDataItem(currentDate);
???}
???
???protected function zoomSliderChangeHandler(event:SliderEvent):void
???{
????var value:Number = zoomSlider.value;
????if (value == 0) {
?????//show hour
?????showOneMinute();
????} else {
?????showFiveMinutes();
????}
???}
???
???protected function zoomSliderValueCommitHandler(event:FlexEvent):void
???{
????var value:Number = zoomSlider.value;
????if (value == 0) {????
?????showOneMinute();
????} else {
?????showFiveMinutes();
????}
???}?
???
???protected? function showOneMinute():void {
????maxElementSize = 12;
????datetimeAxis.interval = 10;
????refresh();
???}?
???
???protected function showFiveMinutes():void {?
????maxElementSize = 60;
????datetimeAxis.interval = 30;
????refresh();
???}
???
???protected function chartMouSEOverHandler(event:MouseEvent):void
???{
????relatedTab.isOnChart = true;?????
???}
???
???protected function chartMouSEOutHandler(event:MouseEvent):void
???{
????relatedTab.isOnChart = false;????
???}
???
???protected function chartDoubleClickHandler(event:MouseEvent):void
???{
????if (!isMax) {
?????relatedTab.scrollerContainer.visible = false;
?????relatedTab.navLeftBar.visible = false;
?????relatedTab.navRightBar.visible = false;
?????
?????relatedTab.addElement(lineChart);
?????Common.chartMove.target = lineChart;
?????Common.chartMove.xTo = 0;
?????Common.chartMove.yTo = 0;
?????Common.chartMove.play();
?????lineChart.height = relatedTab.height;
?????lineChart.width = relatedTab.width;
?????isMax = true;
????} else {
?????relatedTab.scrollerContainer.visible = true;
?????relatedTab.navLeftBar.visible = true;
?????relatedTab.navRightBar.visible = true;
?????
?????relatedTab.removeElement(lineChart);
?????chartContainer.addElement(lineChart);
?????lineChart.x = 0;
?????lineChart.y = 0;
?????lineChart.percentWidth = 100;
?????lineChart.percentHeight = 100;
?????isMax = false;
????}
???}
???
???public function chartResize():void {
????if (isMax) {
?????Common.chartMove.target = lineChart;
?????Common.chartMove.xTo = 0;
?????Common.chartMove.yTo = 0;
?????Common.chartMove.play();
?????lineChart.height = relatedTab.height;
?????lineChart.width = relatedTab.width;
????}
???}
???
???//tab一：CBA的显示和隐藏???
???public function cbaClickHandler(event:MouseEvent):void
???{
????// TODO Auto-generated method stub
????if(cbaCheckBox.selected){?
?????cbaLine.visible=false;
?????if(isSeven){
??????cbaLine_1.visible=false;
?????}
????}
????if(!cbaCheckBox.selected){
?????cbaLine.visible=true;?
?????if(isSeven){
??????cbaLine_1.visible=true;
?????}
????}?????
???}
???
???//tab一：BCA的显示和隐藏
???public function bacClickHandler(vent:MouseEvent):void
???{
????if(bacCheckBox.selected){?
?????bacLine.visible=false;
?????if(isSeven){
??????bacLine_1.visible=false;
?????}
????}
????if(!bacCheckBox.selected){
?????bacLine.visible=true;?
?????if(isSeven){
??????bacLine_1.visible=true;
?????}
????}?
???}
???
???//tab一：ACB的显示和隐藏
???public function acbClickHandler(vent:MouseEvent):void
???{???????
????if(acbCheckBox.selected){?
?????acbLine.visible=false;
?????if(isSeven){
??????acbLine_1.visible=false;
?????}
????}
????if(!acbCheckBox.selected){
?????acbLine.visible=true;??
?????if(isSeven){
??????acbLine_1.visible=true;
?????}
????}???
???}
???
???//环境温度checkbox的显示和隐藏
???public function hjwdClickHandler(vent:MouseEvent):void
???{???????
????if(hjwdCheckBox.selected){?
?????hjwdLine_3.visible=false;??????
????}
????if(!hjwdCheckBox.selected){
?????hjwdLine_3.visible=true;?
?????
????}???
???}
???
???public function formatlabel(labelValue:Object,previousValue:Object,d:IAxis):String {
????var str:String = dateFormat.format(labelValue);
????return str;
???}
???
???public function chartMouseWheelHandler(event:MouseEvent):void
???{
????relatedTab.isOnChart = true;
????if (event.delta > 0 && zoomSlider.value < 2) {
?????zoomSlider.value += 2;
????} else if (event.delta < 0 && zoomSlider.value > 0)? {
?????zoomSlider.value -= 2;
????}
???}
???
??]]>
?</fx:Script>
?<s:layout>
??<s:VerticalLayout horizontalAlign="left"/>
?</s:layout>
?<s:SkinnableContainer width="100%" height="30">
??<s:layout>
???<s:VerticalLayout horizontalAlign="center" paddingTop="10"/>
??</s:layout>
??<s:Label text="{chartLable}"/>
?</s:SkinnableContainer>
?<s:SkinnableContainer width="100%" height="20">
??<s:layout>
???<s:HorizontalLayout verticalAlign="middle"/>
??</s:layout>
??<s:SkinnableContainer width="130" height="20">
???<s:layout>
????<s:HorizontalLayout gap="1" paddingLeft="5" verticalAlign="middle"/>
???</s:layout>
???<mx:HSlider id="zoomSlider" width="60" liveDragging="false" maximum="2" minimum="0"
??????snapInterval="2" tickInterval="2" value="0"/>
??</s:SkinnableContainer>
??<s:SkinnableContainer width="155" height="20">
???<s:layout>
????<s:HorizontalLayout gap="1" verticalAlign="middle"/>
???</s:layout>
???<s:CheckBox id="hjwdCheckBox" x="258" y="-2" width="14" visible="{isHjwdShow}"/>
???<s:Label x="271" y="0" width="57" height="15"
????? backgroundColor="#005AFF" color="#FFFFFF" text="环境温度"
????? textAlign="center" verticalAlign="middle" visible="{isHjwdShow}"/>?
???<s:CheckBox id="acbCheckBox" x="194" y="-2" width="14"/>
???<s:Label x="207" y="0" width="30" height="15" backgroundColor="#FDAF06" color="#FFFFFF"
????? text="ACB" textAlign="center" verticalAlign="middle"/>
???<s:CheckBox id="bacCheckBox" x="239" y="-2" width="14"/>
???<s:Label x="252" y="0" width="30" height="15" backgroundColor="#04B421" color="#FFFFFF"
????? text="BAC" textAlign="center" verticalAlign="middle"/>
???<s:CheckBox id="cbaCheckBox" x="284" y="-2" width="14"/>
???<s:Label x="297" y="0" width="30" height="15" backgroundColor="#FF0000" color="#FFFFFF"
????? text="CBA" textAlign="center" verticalAlign="middle"/>
??</s:SkinnableContainer>
?</s:SkinnableContainer>
?<s:SkinnableContainer id="chartContainer" width="100%" height="100%">
??<s:layout>
???<s:VerticalLayout horizontalAlign="center"/>
??</s:layout>
?????????
??<mx:LineChart id="lineChart" width="100%" height="100%" doubleClickEnabled="true"
?????? paddingLeft="5" paddingRight="5" showDataTips="true">?
???<mx:backgroundElements>
????<mx:GridLines gridDirection="both"? horizontalTickAligned="true" verticalTickAligned="true">
?????<mx:horizontalFill>
??????<mx:SolidColor color="haloBlue" alpha="0.02" />
?????</mx:horizontalFill>
?????<mx:horizontalAlternateFill>
??????<mx:SolidColor color="haloSilver" alpha="0.02" />
?????</mx:horizontalAlternateFill>
?????<mx:verticalFill>
??????<mx:SolidColor color="haloBlue" alpha="0.02" />
?????</mx:verticalFill>
?????<mx:verticalAlternateFill>
??????<mx:SolidColor color="haloSilver" alpha="0.02" />
?????</mx:verticalAlternateFill>
????</mx:GridLines>
???</mx:backgroundElements> ?
???<mx:horizontalAxis>
????<mx:DateTimeAxis id="datetimeAxis" dataUnits="seconds" interval="10"/>
???</mx:horizontalAxis>????????
???<mx:verticalAxis>
????<mx:LinearAxis baseAtZero="true" interval="20"/>
???</mx:verticalAxis>
???<mx:series>????
????<mx:LineSeries id="acbLine" alpha="1" cacheAsBitmap="true" displayName="ACB"
????????? lineStroke="{s1}" xField="date" yField="valueTest_acb"/>?
????<mx:LineSeries id="bacLine" displayName="BCA" lineStroke="{s2}" toolTip="www"
????????? xField="date" yField="valueTest_bca"/>
????<mx:LineSeries id="cbaLine" displayName="CBA" lineStroke="{s3}" xField="date"
????????? yField="valueTest_cba"/>
????
????<mx:LineSeries id="acbLine_1" displayName="ACB" lineStroke="{s1}" visible="{isSeven}" xField="date"
????????? yField="valueTest_acb_1"/>
????<mx:LineSeries id="bacLine_1" displayName="BCA" lineStroke="{s2}" visible="{isSeven}" xField="date"
????????? yField="valueTest_bca_1"/>
????<mx:LineSeries id="cbaLine_1" displayName="CBA" lineStroke="{s3}" visible="{isSeven}" xField="date"
????????? yField="valueTest_cba_1"/>
????<mx:LineSeries id="cbaLine_2" displayName="环境温度" lineStroke="{s4}" visible="{isSeven}" xField="date"
????????? yField="valueTest_cba_2"/>????
????<mx:LineSeries id="hjwdLine_3" displayName="环境温度" lineStroke="{s5}" visible="{isBlueLineShow}" xField="date"
????????? yField="valueTest_cba_2"/>?
???</mx:series>
??</mx:LineChart>??
?</s:SkinnableContainer>
</s:BorderContainer>

六:Tab.mxml

<?xml version="1.0" encoding="utf-8"?>
<s:NavigatorContent xmlns:fx="http://ns.adobe.com/mxml/2009"
?????xmlns:s="library://ns.adobe.com/flex/spark"
?????xmlns:mx="library://ns.adobe.com/flex/mx"
?????xmlns:szpower="szpower.*"
?????width="100%" height="100%"
?????resize="resizeHandler(event)">
?<fx:Declarations>
??
?</fx:Declarations>
?<fx:Script>
??<![CDATA[
???import mx.events.FlexEvent;
???import mx.events.ResizeEvent;
???
???import szpower.main.Common;
???
???public var isOnChart:Boolean = false;
???
???[Bindable]
???public var isSeven:Boolean = false;
???
???[Bindable]
???public var isHjwdShow:Boolean = false;
???
???[Bindable]
???public var isBlueLineShow:Boolean = false;
???
???[Bindable]
???public var isNegative:Boolean = false;
???
???[Bindable]
???public var chartLable:String;
???
???protected function chartTabContainerMouseWheelHandler(event:MouseEvent):void
???{
????if (isOnChart) {
?????event.preventDefault();
?????return;
????}
????scrollerContainer.horizontalScrollBar.visible = false;
????if (event.delta > 0) {
?????hGroup.horizontalScrollPosition += 100;
????} else if (event.delta < 0)? {
?????hGroup.horizontalScrollPosition -= 100;
????}????
???}
???
???protected function navLeftclickHandler(event:MouseEvent):void
???{
????this.scrollerContainer.horizontalScrollBar.visible = false;
????hGroup.horizontalScrollPosition -= 100;
???}
???
???protected function navRightclickHandler(event:MouseEvent):void
???{
????scrollerContainer.horizontalScrollBar.visible = false;
????hGroup.horizontalScrollPosition += 100;
???}
???
???protected function resizeHandler(event:ResizeEvent):void
???{
????scrollerContainer.horizontalScrollBar.visible = false;
????if (chart_1.isMax) {
?????chart_1.chartResize();
????}
????if (chart_2.isMax) {
?????chart_2.chartResize();
????}
????if (chart_3.isMax) {
?????chart_3.chartResize();
????}
????if (chart_4.isMax) {
?????chart_4.chartResize();
????}
???}
???
???protected function scrollerContainer_creationCompleteHandler(event:FlexEvent):void
???{
????scrollerContainer.horizontalScrollBar.visible = false;????
???}
???
??]]>
?</fx:Script>
?<s:layout>
??<s:HorizontalLayout gap="0"/>
?</s:layout>
?<s:SkinnableContainer id="navLeftBar" width="20" height="100%">
??<s:layout>
???<s:HorizontalLayout paddingLeft="5" verticalAlign="middle"/>
??</s:layout>
??<mx:Button id="leftNavBtn" width="9" height="12" click="navLeftclickHandler(event)"
?????? enabled="true" useHandCursor="true" buttonMode="true" styleName="leftArrowButton"/>
?</s:SkinnableContainer>
?<s:Scroller id="scrollerContainer" width="100%" height="100%"
????mouseWheel="chartTabContainerMouseWheelHandler(event)"
????creationComplete="scrollerContainer_creationCompleteHandler(event)">
??<s:HGroup id="hGroup" width="100%" height="100%">
???<s:Group width="1500" height="100%">
????<s:layout>
?????<s:VerticalLayout/>
????</s:layout>
????<s:SkinnableContainer id="lineChartContainer" width="100%" height="50%">
?????<s:layout>
??????<s:HorizontalLayout paddingTop="5"/>
?????</s:layout>
?????<s:SkinnableContainer width="13" height="100%">
?????</s:SkinnableContainer>
?????<szpower:Chart id="chart_1" isHjwdShow="{isHjwdShow}" isNegative="{isNegative}" isBlueLineShow="{isBlueLineShow}" isSeven="{isSeven}" chartLable="{chartLable}" relatedTab="{this}"/>
?????<szpower:Chart id="chart_2" isHjwdShow="{isHjwdShow}" isNegative="{isNegative}" isBlueLineShow="{isBlueLineShow}" isSeven="{isSeven}" chartLable="{chartLable}" relatedTab="{this}"/>
?????<szpower:Chart id="chart_3" isHjwdShow="{isHjwdShow}" isNegative="{isNegative}" isBlueLineShow="{isBlueLineShow}" isSeven="{isSeven}" chartLable="{chartLable}" relatedTab="{this}"/>
?????<szpower:Chart id="chart_4" isHjwdShow="{isHjwdShow}" isNegative="{isNegative}" isBlueLineShow="{isBlueLineShow}" isSeven="{isSeven}" chartLable="{chartLable}" relatedTab="{this}"/>
????</s:SkinnableContainer>
????<szpower:CableDiagram id="jshl_cable_diagram"/>
????<szpower:CableDiagramControl cableDiagram="{jshl_cable_diagram}"/>
???</s:Group>
??</s:HGroup>
??
?</s:Scroller>
?<s:SkinnableContainer id="navRightBar" width="20" height="100%">
??<s:layout>
???<s:HorizontalLayout paddingLeft="5" verticalAlign="middle"/>
??</s:layout>
??<mx:Button id="rightNavBtn" useHandCursor="true" buttonMode="true" width="9" height="12" click="navRightclickHandler(event)"
?????? enabled="true" styleName="rightArrowButton"/>
?</s:SkinnableContainer>?
</s:NavigatorContent>

七：测试运行

点击局部看大图动态信息：

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!