分享：项目管理进度图的网页实现

风雨无阻-ysk 2016-11-08 09:44:17

项目管理常常需要展示项目的进度情况，常见的有甘特图，但是看起来很重，多数情况下，只要知道主要节点的进度就可以了。
实现的功能描述：
1.根据查询范围和项目的里程碑节点动态显示项目进度；

2.图形自适应；

3.可以根据查询范围不同，刷新后图形更新

主要样式的源码：



.box1{/*红色的箭头*/

	width:0px;

	height:0;

	border-top:5px solid #F00;

	border-right:5px solid transparent;

	border-bottom:5px solid transparent;

	border-left:5px solid transparent;

} 



.graph{ /*进度条的最外层*/

	width:100%; 

/*	border:1px solid #7dc83;*/

	height:25px; 

	}

.bar{ /*进度条内部的里程碑进度*/

	display:block; 

/*	background:#7dc837; */

	float:left; 

	height:100%; 

	text-align:center; 

	}

html源码：（这里的html文件是WeX5开发工具生成的.w文件源码，不能直接运行，但是和普通html类似，有需要的话可以参考其中的部分代码块）



<?xml version="1.0" encoding="utf-8"?>



<div xmlns="http://www.w3.org/1999/xhtml" xid="window" class="window" component="$UI/system/components/justep/window/window"

  design="device:m;">  

  <div component="$UI/system/components/justep/model/model" xid="model" style="height:auto;top:239px;left:170px;"

    onParamsReceive="modelParamsReceive">

    <div component="$UI/system/components/justep/data/data" autoLoad="true"

      xid="pData" idColumn="fid">

      <column label="标识" name="fid" type="Integer" xid="xid9"/>  

      <column label="开始日期" name="fstartDate" type="Date" xid="xid10"/>  

      <column label="结束日期" name="fendDate" type="Date" xid="xid11"/>  

      <data xid="default2">[{"fid":1,"fstartDate":"2016-01-01","fendDate":"2016-11-08"}]</data>

    </div>

    <div component="$UI/system/components/justep/data/data" autoLoad="true"

      xid="prjData" idColumn="fid">

      <column label="标识" name="fid" type="String" xid="xid3"/>  

      <column label="项目名称" name="fname" type="String" xid="xid4"/>  

      <column label="阶段一" name="fstage1" type="Date" xid="xid5"/>  

      <column label="阶段二" name="fstage2" type="Date" xid="xid6"/>  

      <column label="阶段三" name="fstage3" type="Date" xid="xid7"/>  

      <column label="阶段四" name="fstage4" type="Date" xid="xid8"/>  

      <column label="启动日期" name="fstartDate" type="Date" xid="xid12"/>  

      <column label="进度1" name="fbar1" type="Integer" xid="xid13"/>  

      <column label="进度2" name="fbar2" type="Integer" xid="xid14"/>  

      <column label="进度3" name="fbar3" type="Integer" xid="xid15"/>  

      <column label="进度4" name="fbar4" type="Integer" xid="xid16"/>  

      <column label="进度5" name="fbar5" type="Integer" xid="xid17"/>

    </div>

  </div>  

  <div component="$UI/system/components/justep/panel/panel" class="x-panel x-full"

    xid="panel1"> 

    <div class="x-panel-top" xid="top1">

      <div component="$UI/system/components/justep/titleBar/titleBar" class="x-titlebar"

        xid="titleBar1" title="项目进度"> 

        <div class="x-titlebar-left" xid="left1"/>  

        <div class="x-titlebar-title" xid="title1">项目进度</div>  

        <div class="x-titlebar-right reverse" xid="right1"/>

      </div>

    </div>  

    <div class="x-panel-content" xid="content1">

      <div component="$UI/system/components/justep/row/row" class="x-row x-row-center"

        xid="row2"> 

        <div class="x-col x-col-fixed" xid="col1" style="width:auto;">

          <label class="control-label" xid="controlLabel2"><![CDATA[范围]]></label>

        </div>  

        <div class="x-col" xid="col2">

          <input component="$UI/system/components/justep/input/input" class="form-control"

            xid="input1" bind-ref="$model.pData.ref("fstartDate")"/>

        </div>  

        <div class="x-col" xid="col4">

          <input component="$UI/system/components/justep/input/input" class="form-control"

            xid="input2" bind-ref="$model.pData.ref("fendDate")"/>

        </div>  

        <div class="x-col x-col-20" xid="col10">

          <a component="$UI/system/components/justep/button/button" class="btn btn-default btn-block"

            label="刷新" xid="button2" onClick="button2Click" icon="linear linear-redo"> 

            <i xid="i1" class="linear linear-redo"/>  

            <span xid="span1">刷新</span>

          </a>

        </div>

      </div>

      <div component="$UI/system/components/justep/list/list" class="x-list"

        xid="list2" data="prjData"> 

        <ul class="x-list-template" xid="listTemplateUl1"> 

          <li xid="li2" style="border-bottom-style:inset;border-bottom-width:thin;padding-bottom:10px;">

            <div component="$UI/system/components/justep/row/row" class="x-row x-row-center"

              xid="row1"> 

              <div class="x-col x-col-fixed" xid="col5" style="width:auto;">

                <div component="$UI/system/components/justep/output/output"

                  class="x-output" xid="output1" bind-ref="ref("fname")" style="font-weight:bold;"/>

              </div>

              <div class="x-col" xid="col3">

                <div xid="div4" class="graph" style="margin-top:30px;"> 

                  <div xid="div12" bind-style="{'width':  val("fbar1") +'%'}"

                    class="bar" style="background-color:transparent;"/>  

                  <div xid="div1" bind-style="{'width':  val("fbar2") +'%'}"

                    class="bar" style="background-color:#f4c600;"> 

                    <div xid="div9" style="text-align:center;margin-left:20px;width:10px;margin-bottom:20px;float:right;position:relative;bottom:25px;left:5px;"

                      bind-visible=" val("fbar2") >0"> 

                      <div xid="div8" style="background-color:red;word-break:break-all;position:relative;text-align:center;color:#000000;height:20px;width:10px;"/>  

                      <div xid="div11" class="box1"/>

                      <span xid="span3" style="float:right;position:relative;top:20px;display:block;"

                        bind-text=" !val("fstage1")?'': justep.Date.toString( val("fstage1"),'MM/dd')"/>

                    </div>

                  </div>  

                  <div xid="div2" bind-style="{'width':  val("fbar3") +'%'}"

                    class="bar" style="background-color:#11cd6e;">

                    <div xid="div14" style="text-align:center;margin-left:20px;width:10px;margin-bottom:20px;float:right;position:relative;bottom:25px;left:5px;"

                      bind-visible=" val("fbar3") >0"> 

                      <div xid="div15" style="background-color:red;word-break:break-all;position:relative;text-align:center;color:#000000;height:20px;width:10px;"/>  

                      <div xid="div13" class="box1"/>  

                      <span xid="span2" style="float:right;position:relative;top:20px;display:block;"

                        bind-text=" !val("fstage2")?'': justep.Date.toString( val("fstage2"),'MM/dd')"/>

                    </div>

                  </div>

                  <div xid="div3" bind-style="{'width':  val("fbar4") +'%'}"

                    class="bar" style="background-color:#56abe4;">

                    <div xid="div17" style="text-align:center;margin-left:20px;width:10px;margin-bottom:20px;float:right;position:relative;bottom:25px;left:5px;"

                      bind-visible=" val("fbar4") >0"> 

                      <div xid="div18" style="background-color:red;word-break:break-all;position:relative;text-align:center;color:#000000;height:20px;width:10px;"/>  

                      <div xid="div16" class="box1"/>  

                      <span xid="span4" style="float:right;position:relative;top:20px;display:block;"

                        bind-text=" !val("fstage3")?'': justep.Date.toString( val("fstage3"),'MM/dd')"/>

                    </div>

                  </div>  

                  <div xid="div5" bind-style="{'width':  val("fbar5") +'%'}"

                    class="bar" style="background-color:#ea8010;">

                    <div xid="div20" style="text-align:center;margin-left:20px;width:10px;margin-bottom:20px;float:right;position:relative;bottom:25px;left:5px;"

                      bind-visible=" val("fbar5") >0"> 

                      <div xid="div21" style="background-color:red;word-break:break-all;position:relative;text-align:center;color:#000000;height:20px;width:10px;"/>  

                      <div xid="div19" class="box1"/>  

                      <span xid="span5" style="float:right;position:relative;top:20px;display:block;"

                        bind-text=" !val("fstage4")?'': justep.Date.toString( val("fstage4"),'MM/dd')"/>

                    </div>

                  </div>

                </div>

              </div> 

            </div>

          </li>

        </ul> 

      </div>

    </div>  

    <div class="x-panel-bottom" xid="bottom1">

      <div component="$UI/system/components/justep/row/row" class="x-row x-row-center"

        xid="row3"> 

        <div class="x-col x-col-fixed" xid="col8" style="width:auto;"/>  

        <div class="x-col" xid="col9">

          <div xid="div6" style="display:inline-block;background-color:#f4c600;width:30px;height:25px;"/>  

          <span xid="span6" style="position:relative;bottom:8px;"><![CDATA[调研]]></span>  

          <div xid="div7" style="display:inline-block;background-color:#11cd6e;width:30px;height:25px;"/>  

          <span xid="span7" style="position:relative;bottom:8px;"><![CDATA[设计]]></span>  

          <div xid="div10" style="display:inline-block;background-color:#56abe4;width:30px;height:25px;"/>  

          <span xid="span8" style="position:relative;bottom:8px;"><![CDATA[实施]]></span>  

          <div xid="div22" style="display:inline-block;background-color:#ea8010;width:30px;height:25px;"/>  

          <span xid="span9" style="position:relative;bottom:8px;"><![CDATA[验收]]></span>

        </div>

      </div>

    </div>

  </div>

</div>