货架工程项目之js dom实现项目工程进度图
笔者最近要负责有个项目工程网站的安装进度过程,实现的效果要求大概如下图所示
由于笔者没有参与到数据库的制作,得知他们这个项目设计工序的时候就一个开始日期的和完成日期,连整个项目的安装结束时间都没有简直了。这里公开一下我的数据库
有点,总之就是说不出话的感觉。
之前笔者写前台table表绑定的时候一般都比较喜欢用tbale表绑个knockout js。这样子比较简单,第一行绑个数据库字段名字勇哥foreach循环输出下,一下子就出来了。
但是这玩意后面的列表明显是要自己在后台弄个转换器自己搞(sql字段不是一天存个东西呢样子循环一下子就读来了,而是狗屎的把每个工序就存个开始日期和结束日期)。而令我最烦的就是连个项目开始日期都没有,搞得我后台还要读两次(论中途接手的烦恼)
但是烦归烦,狗屎的项目还要做,不做就没学分拿。后台我估摸着有几个东西比较重要:
1.整个项目的总天数(用于给第一排赋值而且后期加减还要用)
2.每个工序的开始日期(用于判断什么时候该显示工程人数)
3.每个工序的结束日期(主要用于判断什么时候结束了停止显示工程人数)
但是这整个玩意一点都不靠谱(数据库都没存储,于是我只好自己慢慢的提取出来放到列表里面去)
于是在控制器里面我先插入一些代码
首先定义一个全局变量回头会用到
public class aa
{
public static int bb=;
public static TimeSpan Start;
public static TimeSpan end;
}
然后我用页面的控制器代码调用数据库接口后进行数据转换,弄一个类出来
public ActionResult Scheduledetial(String OfferID)
{
DataContent db = new DataContent();//回头给安装公司的详细做搜索实例化类
ScheduleDM Result = new ScheduleDM();//实例化一个ScheduleDM
Result.list = JsonConvert.SerializeObject(ScheduleInfo(ISchedule.ScheduleDetial(OfferID)));//第一次进行筛选,并且选出最早的初始时间和最迟的结束时间(妈的连个开始日期,结束日期都没有)
var info = db.Offer.Where(x => x.OfferID.Equals(OfferID)).FirstOrDefault();//这儿通过offerid获取投标表的用户id
var infos = db.UserInfo.Where(x => x.UserID.Equals(info.UserID)).FirstOrDefault();//这儿通过USerid到用户表中去读取安装公司信息
Result.CompanyName = infos.CompanyName;//获取安装公司信息并且赋值
Result.UserRealName = infos.UserRealName;//获取安装公司联系人并且赋值
Result.UserPhone = infos.UserPhone;//获取安装公司联系人电话并且赋值
Result.OfferID = OfferID;//获取offerID给前台(评论需要用到)
TimeSpan asd = aa.end-aa.Start;//这儿就可以获取一共有多少天数了
Result.NowPage = asd.Days;//这里偷懒直接用Int类型的nowpage代替一共多少天数这个变量了
Result.list = JsonConvert.SerializeObject(ScheduleInfo(ISchedule.ScheduleDetial(OfferID)));//列表第二次循环(重要一定要执行,第一次执行的时候开始日期和结束日期不是最终形态的完全体,需要执行第二次才能正确的判断处每一个工程的开始日期和完结日期)
return View(Result);//返回前台
} public static IList<ScheduleDM> ScheduleInfo(IList<ScheduleDM> ScheduleDetials)
{
int a = ;
IList<ScheduleDM> item = new List<ScheduleDM>();//类似视图转换器,这儿就不多多讲述了
foreach (var aa in ScheduleDetials)
{
a++;
item.Add(ScheduleInfos(aa,a));
}
return item;
} public static ScheduleDM ScheduleInfos(ScheduleDM ScheduleDetials, int a)
{
ScheduleDM item = new ScheduleDM();
item.idd = a.ToString();
item.StepID = ScheduleDetials.StepID;
item.OfferID = ScheduleDetials.OfferID;
item.StepName = ScheduleDetials.StepName;
item.StepStartTime = ScheduleDetials.StepStartTime;
item.StepEndTime = ScheduleDetials.StepEndTime;
item.Tool = ScheduleDetials.Tool;
item.people = ScheduleDetials.people;
item.StepLiable = ScheduleDetials.StepLiable;
item.StepArtificial = ScheduleDetials.StepArtificial;
//底下一大段皆为日期加减(注正确的每个工程的开始日期和结束日期必须要执行两次)
TimeSpan timeNow = new TimeSpan(DateTime.Now.Ticks);
DateTime ddd = ScheduleDetials.StepStartTime.Value;
DateTime sss = ScheduleDetials.StepEndTime.Value;
TimeSpan ts = new TimeSpan();
TimeSpan time = new TimeSpan(ddd.Ticks);
TimeSpan times = new TimeSpan(sss.Ticks);
TimeSpan time1 = timeNow - time;
if (aa.Start == ts)
{
aa.Start = time;
}
else if (aa.Start > time)
{
aa.Start = time;
}
if (aa.end == ts)
{
aa.end = times;
}
else if (aa.end < times)
{
aa.end = times;
}
if (aa.bb < time1.Days)
{
aa.bb = time1.Days;
}
TimeSpan StratTime = time - aa.Start;
TimeSpan Endtime = times - aa.Start;
item.StratTime = StratTime.Days;
item.EndTime =Endtime.Days;
return item;
}
这时候返回前台的result已经具有我之前上述的三个关键的数据了,这时候我们就可以在前台调用js doom了这里说一下js dom是实现把插入表的一行来做的
var aaaa = @Html.Raw(Model.NowPage);//总页数
var a2=aaaa ;
var a1=0;
var list=@Html.Raw(Model.list); while(a1<aaaa)//给列表循环添加天数
{
a1 = a1 + 1; var x = document.getElementById('tr2').insertCell(4)
x.innerHTML = a2;
a2=a2-1;
}
list.forEach(function(e){ //foreach循环读取list的数据
var x=document.getElementById('myTable').insertRow()
var z2=x.insertCell(0)
var z1=x.insertCell(1)
var y=x.insertCell(2)
var z=x.insertCell(3) y.innerHTML=e.StepLiable
z.innerHTML=e.Tool
z1.innerHTML=e.StepName
z2.innerHTML=e.idd
var a3 = 0;
var a4=aaaa ;
var ass=e.StratTime;
var asss=e.EndTime;
ass=ass+1;
while(a3<aaaa)
{
a3 = a3 + 1;
a4=-1;
var y1=x.insertCell() if(ass<=a3&&asss>=a3)//当前天数如何大于开始日期,并且小于结束日期则读取每日日数赋值给他
y1.innerHTML = e.people;
else
y1.innerHTML = ""; }
最后在这里原谅下笔者一直无厘头的命名方式
以及,笔者的文章如果转载请在评论区说明,并且标明出处,否则将追究责任哦。
货架工程项目之js dom实现项目工程进度图的更多相关文章
- JS DOM 操作 项目总结 【超链接】【数列】【span】
超链接 每次定义链接样式时务必确认定义的顺序,link--visited--hover-active,也就是我们常说到的LoVe HAte原则(大写字母就是它们的首字母). “爱恨原则”(Lo ...
- 【前端】Vue.js经典开源项目汇总
Vue.js经典开源项目汇总 原文链接:http://www.cnblogs.com/huyong/p/6517949.html Vue是什么? Vue.js(读音 /vjuː/, 类似于 view) ...
- Vue.js经典开源项目汇总
Vue.js经典开源项目汇总 原文链接:http://www.cnblogs.com/huyong/p/6517949.html Vue是什么? Vue.js(读音 /vjuː/, 类似于 view) ...
- Vue.js经典开源项目汇总-前端参考资源
Vue.js经典开源项目汇总 原文链接:http://www.cnblogs.com/huyong/p/6517949.html Vue是什么? Vue.js(读音 /vjuː/, 类似于 view) ...
- node命令行工具之实现项目工程自动初始化的标准流程
一.目的 传统的前端项目初始流程一般是这样: 可以看出,传统的初始化步骤,花费的时间并不少.而且,人工操作的情况下,总有改漏的情况出现.这个缺点有时很致命. 甚至有马大哈,没有更新项目仓库地址,导致提 ...
- nixyx —— 一个小巧的项目工程/编译文件生成器(构建系统?)
恩..nixyx确实算不上是一个构建系统. 所谓构建系统,比如GNU的Autotools,那是一套很完整的构建体系,包括了程序的配置,编译和安装三大部分. 类似的软件还有:google的gyp.腾讯的 ...
- iOS适配 旧项目工程在iOS9下不能正常显示
在iOS开发中,很多时候会用到旧项目,比如版本的升级.使用Demo等等, iOS SDK正在不断的升级,不断的升级给iOS开发带来了新的活力. 然而在iOS SDK新的版本出来之后,旧项目可能会出现新 ...
- js DOM优化相关探索
我在这尝试两个方面:-->DOM与js -->DOM与浏览器 (最近在秒味视频上学到不少,哈哈哈) 一.DOM与js 1.js与dom的交互问题 频繁的与dom交互,是一件浪费时间与金钱的 ...
- js DOM的几个常用方法
<div id="div1">这是个测试</div> <p </p> <p </p> //js DOM的几个常用方法 / ...
随机推荐
- ubuntu系统下如何修改host
Ubuntu系统的Hosts只需修改/etc/hosts文件,在目录中还有一个hosts.conf文件,刚开始还以为只需要修改这个就可以了,结果发现是需要修改hosts.修改完之后要重启网络.具体过程 ...
- 【NLP】前戏:一起走进条件随机场(一)
前戏:一起走进条件随机场 作者:白宁超 2016年8月2日13:59:46 [摘要]:条件随机场用于序列标注,数据分割等自然语言处理中,表现出很好的效果.在中文分词.中文人名识别和歧义消解等任务中都有 ...
- python enumerate 用法
A new built-in function, enumerate() , will make certain loops a bit clearer. enumerate(thing) , whe ...
- Xamarin Android 应用程序内图标上数字提示
最近在用 Xamarin 做一个 Android 应用,打开应用时,如果有新消息,需要在应用内的 Toolbar 或者首页的图标上显示数字提示.在这里和大家分享一下实现方法,如果你有更新好的实现方法, ...
- 跟着老男孩教育学Python开发【第五篇】:模块
递归的案例:阶乘 1*2*3*4*5*6*7- def func(num): if num == 1: return 1 return num * func(num - ...
- 我的MYSQL学习心得(十五) 日志
我的MYSQL学习心得(十五) 日志 我的MYSQL学习心得(一) 简单语法 我的MYSQL学习心得(二) 数据类型宽度 我的MYSQL学习心得(三) 查看字段长度 我的MYSQL学习心得(四) 数据 ...
- 自定义可视化调试工具(Microsoft.VisualStudio.DebuggerVisualizers)
前言: 最近飞机失联的太多,明天要飞北京处理服务器双机热备的问题,航空保险已买,单号是:TF10122913. 至于我的银行卡密码,在我枕头下面的字条里,要是我之后没再更新文章,请通知我家人,哈哈哈哈 ...
- Storm构建分布式实时处理应用初探
最近利用闲暇时间,又重新研读了一下Storm.认真对比了一下Hadoop,前者更擅长的是,实时流式数据处理,后者更擅长的是基于HDFS,通过MapReduce方式的离线数据分析计算.对于Hadoop, ...
- BIO\NIO\AIO记录
IO操作可以分为3类:同步阻塞(BIO).同步非阻塞(NIO).异步(AIO). 同步阻塞(BIO):在此种方式下,用户线程发起一个IO操作以后,必须等待IO操作的完成,只有当真正完成了IO操作以后, ...
- 《深入理解Java虚拟机》类文件结构
上节学习回顾 在上一节当中,主要以自己的工作环境简单地介绍了一下自身的一些调优或者说是故障处理经验.所谓百变不离其宗,这个宗就是我们解决问题的思路了. 本节学习重点 在前面几章,我们宏观地了解了虚拟机 ...