潘钊 / bsth_control · Commits

Commit f4fac3a1ab50f6236c0bcc110ece8096cab0808f

Authored by 潘钊
1 parent ca02c02a

单线路调度页面设计

Inline Side-by-side
Showing 7 changed files with 1050 additions and 31 deletions
src/main/resources/static/pages/control/line/css/lineControl.css
  View file @f4fac3a
@@ -382,20 +382,23 @@ body{ @@ -382,20 +382,23 @@ body{
382 382
383 /* svg 样式 */ 383 /* svg 样式 */
384 .line_chart svg{ 384 .line_chart svg{
385 -/* height: 100%; 385 + height: calc(100% - 40px);
386 margin: 0; 386 margin: 0;
387 z-index: 1; 387 z-index: 1;
388 position: absolute; 388 position: absolute;
389 - top: 0;  
390 - left: 0; */  
391 -  
392 - height: calc(100% - 40px); 389 + bottom: 0;
  390 + left: 0;
  391 +}
  392 +
  393 +._panel svg{
  394 + height: calc(100% - 10px);
393 margin: 0; 395 margin: 0;
394 z-index: 1; 396 z-index: 1;
395 position: absolute; 397 position: absolute;
396 bottom: 0; 398 bottom: 0;
397 left: 0; 399 left: 0;
398 } 400 }
  401 +
399 /* .station_circle{ 402 /* .station_circle{
400 fill: #FFFFFF; 403 fill: #FFFFFF;
401 r: 7.6; 404 r: 7.6;
@@ -753,4 +756,379 @@ height: 400px; @@ -753,4 +756,379 @@ height: 400px;
753 #tooltip #tip_map_wrap{ 756 #tooltip #tip_map_wrap{
754 width: 100%; 757 width: 100%;
755 height: 100%; 758 height: 100%;
756 -}  
757 \ No newline at end of file 759 \ No newline at end of file
  760 +}
  761 +
  762 +
  763 +
  764 +#top-tabs-wrap .tab-content{
  765 + height: calc(100% - 50px);
  766 + padding: 5px;
  767 + overflow-y: auto;
  768 +}
  769 +
  770 +#top-tabs-wrap .tab-content .tab-pane{
  771 + height: 100%;
  772 +}
  773 +
  774 +.tab_line .panel-wrap{
  775 + height: 100%;
  776 + padding-left: 3px;
  777 + padding-right: 3px;
  778 +}
  779 +
  780 +.tab_line .panel-wrap ._panel{
  781 + border: 1px solid #ddd;
  782 + box-shadow: 0 2px 5px 0 rgba(221, 221, 221, 0.32),0 2px 10px 0 rgba(221, 221, 221, 0.32);
  783 + width: 100%;
  784 + height: 100%;
  785 + position: relative;
  786 +}
  787 +
  788 +.tab_line .panel-wrap ._panel ._head{
  789 + height: 42px;
  790 + line-height: 42px;
  791 + padding-left: 15px;
  792 + font-size: 16px;
  793 + font-family: 微软雅黑;
  794 +}
  795 +
  796 +.tab_line .panel-wrap ._panel ._body{
  797 + height: calc(100% - 42px);
  798 +}
  799 +
  800 +.tab_line .panel-wrap ._panel ._body .pb-table{
  801 + margin-left: .4999999856px;
  802 +}
  803 +
  804 +.tab_line .panel-wrap ._panel ._body .pb-table tr td:nth-child(1){
  805 + background-color: #E4D3D3;
  806 + text-align: center;
  807 + font-family: arial;
  808 +}
  809 +
  810 +.tab_line .panel-wrap ._panel ._body .pb-table tr td:nth-child(2)
  811 +,.tab_line .panel-wrap ._panel ._body .pb-table tr td:nth-child(10){
  812 + text-align: center;
  813 +}
  814 +
  815 +.tab_line .panel-wrap ._panel ._body .pb-table tr td:nth-child(2){
  816 + /* background: #C6CCE8; */
  817 +}
  818 +
  819 +.tab_line .panel-wrap ._panel ._body .pb-table a{
  820 + text-decoration: underline;
  821 + color: blue;
  822 +}
  823 +
  824 +.table.pb-table>tbody>tr>td{
  825 + line-height: 1.43257;
  826 +}
  827 +
  828 +.pic-panel{
  829 + height: 55px;
  830 + border: 1px solid #ddd;
  831 + box-shadow: 0 2px 5px 0 rgba(221, 221, 221, 0.32),0 2px 10px 0 rgba(221, 221, 221, 0.32);
  832 + margin-top: 5px;
  833 + line-height: 55px;
  834 + text-indent: 15px;
  835 + font-family: 微软雅黑;
  836 +
  837 + margin-left: 3px;
  838 + width: 100%;
  839 + width: calc(100% - 6px);
  840 +}
  841 +
  842 +.pb-table tr{
  843 + cursor: default;
  844 +}
  845 +.pb-table tr.active-menu td{
  846 + border-left: 0;
  847 + border-right: 0;
  848 + background: #A8B4E4;
  849 +}
  850 +
  851 +/* .pb-table tr:hover td{
  852 + border-left: 0;
  853 + border-right: 0;
  854 + background: #C4CCEA;
  855 +}
  856 +
  857 +.pb-table tr.active-menu:hover td{
  858 + background: #A8B4E4;
  859 +} */
  860 +.pic-panel span{
  861 + padding: 5px 7px;
  862 + font-size: 13px;
  863 + margin: 2px;
  864 + border-radius: 3px;
  865 +}
  866 +
  867 +.pic-panel span.tl-yzx:before{
  868 + content: "已执行";
  869 +}
  870 +.pic-panel span.tl-wzx:before{
  871 + content: "未执行";
  872 +}
  873 +.pic-panel span.tl-wd:before{
  874 + content: "误点";
  875 +}
  876 +.pic-panel span.tl-qrlb:before{
  877 + content: "确认烂班";
  878 +}
  879 +.pic-panel span.tl-zzzx:before{
  880 + content: "正在执行";
  881 +}
  882 +/* .pic-panel span.tl-sf-f:before{
  883 + content: "实发（放）";
  884 +} */
  885 +.pic-panel span.tl-xxfc:before{
  886 + content: "消息发出";
  887 +}
  888 +.pic-panel span.tl-xxsd:before{
  889 + content: "消息收到";
  890 +}
  891 +.pic-panel span.tl-xxrd:before{
  892 + content: "消息阅读";
  893 +}
  894 +.pic-panel span.tl-fcpqr:before{
  895 + content: "发车屏确认";
  896 +}
  897 +
  898 +.tl-yzx{
  899 + background: #c1ddf0;
  900 +}
  901 +.tl-wzx{
  902 + background: #FFDCCF;
  903 +}
  904 +.tl-wd{
  905 + background: #efef90;
  906 +}
  907 +
  908 +.tl-qrlb{
  909 + background: #7B6B24;
  910 + color: #EAEBEC;
  911 +}
  912 +.tl-zzzx{
  913 + background: #96F396;
  914 +}
  915 +/* .tl-sf-f{
  916 +} */
  917 +.tl-xxfc{
  918 + background: #AE9CCE;
  919 + color: white;
  920 +}
  921 +.tl-xxsd{
  922 + background: #DE815E;
  923 + color: #EAEBEC;
  924 +}
  925 +.tl-xxrd{
  926 + background: #C1DDF0;
  927 + /* color: #EAEBEC; */
  928 +}
  929 +.tl-fcpqr{
  930 + background: #4b924a;
  931 + color: #EAEBEC;
  932 +}
  933 +
  934 +._panel_footer{
  935 + position: absolute;
  936 + bottom: 0;
  937 + text-align: center;
  938 + width: 100%;
  939 + height: 35px;
  940 + line-height: 35px;
  941 + background: #7EBBAF;
  942 + color: white;
  943 +}
  944 +
  945 +.log-item{
  946 + width: 96%;
  947 + margin: 2%;
  948 + border: 1px solid #e1e5ec;
  949 + box-shadow: 0 2px 5px 0 rgba(225, 229, 236, 0.2),0 2px 10px 0 rgba(225, 229, 236, 0.21);
  950 + background: #e1e5ec;
  951 + padding: 5px;
  952 + position: relative;
  953 + height: 55px;
  954 +}
  955 +
  956 +.log-item-text{
  957 + display: block;
  958 + font-size: 14px;
  959 + font-family: 微软雅黑;
  960 +}
  961 +
  962 +.log-item-time{
  963 + position: absolute;
  964 + right: 4px;
  965 + bottom: 4px;
  966 +}
  967 +
  968 +.log-item-point{
  969 + position: absolute;
  970 + right: 4px;
  971 + font-size: 12px;
  972 + top: 4px;
  973 + color: gray;
  974 +}
  975 +
  976 +.console-log{
  977 + height: calc(100% - 35px);
  978 + overflow: auto;
  979 +}
  980 +
  981 +.log-item-result{
  982 + position: absolute;
  983 + bottom: 4px;
  984 + left: 4px;
  985 + font-size: 12px;
  986 + color: green;
  987 +}
  988 +
  989 +.log-item.handle{
  990 + height: 72px;
  991 +}
  992 +
  993 +.log-item-handle{
  994 + position: absolute;
  995 + bottom: 7px;
  996 + left: 7px;
  997 +}
  998 +
  999 +.log-item-handle .btn-sm{
  1000 + padding: 3px 7px;
  1001 + margin-right: 3px;
  1002 +}
  1003 +
  1004 +.log-item.handle .log-item-point{
  1005 + top: 8px;
  1006 +}
  1007 +
  1008 +.log-item.handle .log-item-time{
  1009 + bottom: 8px;
  1010 +}
  1011 +
  1012 +
  1013 +
  1014 +/* 右键菜单 */
  1015 +.menu {
  1016 + position: absolute;
  1017 + width: 200px;
  1018 + padding: 2px;
  1019 + margin: 0;
  1020 + border: 1px solid #bbb;
  1021 + background: white;
  1022 + background: -webkit-linear-gradient(to bottom, #fff 0%, #e5e5e5 100px, #e5e5e5 100%);
  1023 + z-index: 100;
  1024 + box-shadow: 0 8px 17px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
  1025 + opacity: 0;
  1026 + -webkit-transform: translate(0, 15px) scale(.95);
  1027 + transform: translate(0, 15px) scale(.95);
  1028 + transition: transform 0.1s ease-out, opacity 0.1s ease-out;
  1029 + pointer-events: none;
  1030 +}
  1031 +
  1032 +.menu-item {
  1033 + display: block;
  1034 + position: relative;
  1035 + margin: 0;
  1036 + padding: 0;
  1037 + white-space: nowrap;
  1038 +}
  1039 +
  1040 +.menu-btn {
  1041 + background: none;
  1042 + line-height: normal;
  1043 + overflow: visible;
  1044 + -webkit-user-select: none;
  1045 + -moz-user-select: none;
  1046 + -ms-user-select: none;
  1047 + display: block;
  1048 + width: 100%;
  1049 + color: #444;
  1050 + font-family: 'Roboto', sans-serif;
  1051 + font-size: 13px;
  1052 + text-align: left;
  1053 + cursor: pointer;
  1054 + border: 1px solid transparent;
  1055 + white-space: nowrap;
  1056 + padding: 6px 8px;
  1057 + border-radius: 3px;
  1058 +}
  1059 +
  1060 +.menu-btn::-moz-focus-inner,
  1061 +.menu-btn::-moz-focus-inner {
  1062 + border: 0;
  1063 + padding: 0;
  1064 +}
  1065 +
  1066 +.menu-text {
  1067 + margin-left: 25px;
  1068 +}
  1069 +
  1070 +.menu-btn .fa {
  1071 + position: absolute;
  1072 + left: 8px;
  1073 + top: 50%;
  1074 + -webkit-transform: translateY(-50%);
  1075 + transform: translateY(-50%);
  1076 +}
  1077 +
  1078 +.menu-item:hover > .menu-btn {
  1079 + color: #fff;
  1080 + outline: none;
  1081 + background-color: #2E3940;
  1082 + background: -webkit-linear-gradient(to bottom, #5D6D79, #2E3940);
  1083 + background: linear-gradient(to bottom, #5D6D79, #2E3940);
  1084 + border: 1px solid #2E3940;
  1085 +}
  1086 +
  1087 +.menu-item.disabled {
  1088 + opacity: .5;
  1089 + pointer-events: none;
  1090 +}
  1091 +
  1092 +.menu-item.disabled .menu-btn {
  1093 + cursor: default;
  1094 +}
  1095 +
  1096 +.menu-separator {
  1097 + display: block;
  1098 + margin: 7px 5px;
  1099 + height: 1px;
  1100 + border-bottom: 1px solid #E6E6E6;
  1101 + background-color: #aaa;
  1102 +}
  1103 +
  1104 +.menu-item.submenu::after {
  1105 + content: "";
  1106 + position: absolute;
  1107 + right: 6px;
  1108 + top: 50%;
  1109 + -webkit-transform: translateY(-50%);
  1110 + transform: translateY(-50%);
  1111 + border: 5px solid transparent;
  1112 + border-left-color: #808080;
  1113 +}
  1114 +
  1115 +.menu-item.submenu:hover::after {
  1116 + border-left-color: #fff;
  1117 +}
  1118 +
  1119 +.menu .menu {
  1120 + top: 4px;
  1121 + left: 99%;
  1122 +}
  1123 +
  1124 +.show-menu,
  1125 +.menu-item:hover > .menu {
  1126 + opacity: 1;
  1127 + -webkit-transform: translate(0, 0) scale(1);
  1128 + transform: translate(0, 0) scale(1);
  1129 + pointer-events: auto;
  1130 +}
  1131 +
  1132 +/* .menu-item:hover > .menu {
  1133 + -webkit-transition-delay: 100ms;
  1134 + transition-delay: 300ms;
  1135 +} */
758 \ No newline at end of file 1136 \ No newline at end of file
src/main/resources/static/pages/control/line/index.html
  View file @f4fac3a
1 <link href="css/lineControl.css" rel="stylesheet" type="text/css" /> 1 <link href="css/lineControl.css" rel="stylesheet" type="text/css" />
2 <link href="/metronic_v4.5.4/css/animate.min.css" rel="stylesheet" type="text/css" /> 2 <link href="/metronic_v4.5.4/css/animate.min.css" rel="stylesheet" type="text/css" />
3 -  
4 -<div class="portlet light portlet-fullscreen" style="transition: all .5s ease;padding: 0;"> 3 +<!-- oncontextmenu=self.event.returnValue=false -->
  4 +<div class="portlet light portlet-fullscreen" style="transition: all .5s ease;padding: 0;" >
5 <div class="portlet-title" style="padding: 17px 20px 0px 20px;border-bottom: none;margin-bottom: 0;background: linear-gradient(to right ,#082F4A, #125688,#0a3f64);padding-bottom: 5px;"> 5 <div class="portlet-title" style="padding: 17px 20px 0px 20px;border-bottom: none;margin-bottom: 0;background: linear-gradient(to right ,#082F4A, #125688,#0a3f64);padding-bottom: 5px;">
6 <div class="caption col_hide_1280" style="color: #FFF;"> 6 <div class="caption col_hide_1280" style="color: #FFF;">
7 <i class="fa fa-life-ring" style="font-size: 22px;color: #FFF;"></i> <span 7 <i class="fa fa-life-ring" style="font-size: 22px;color: #FFF;"></i> <span
@@ -65,7 +65,7 @@ @@ -65,7 +65,7 @@
65 <div class="portlet-body" id="top-tabs-wrap" > 65 <div class="portlet-body" id="top-tabs-wrap" >
66 <ul class="nav nav-tabs" > 66 <ul class="nav nav-tabs" >
67 <li class="active"> 67 <li class="active">
68 - <a href="#tab_home" data-toggle="tab" aria-expanded="true" style="padding: 10px 15px;"> 68 + <a href="#tab_home" data-toggle="tab" aria-expanded="false" style="padding: 10px 15px;">
69 <i class="fa fa-home"></i> 主页 69 <i class="fa fa-home"></i> 主页
70 </a> 70 </a>
71 </li> 71 </li>
@@ -73,14 +73,589 @@ @@ -73,14 +73,589 @@
73 aria-expanded="false"><i class="fa fa-map"></i> 地图 </a></li> 73 aria-expanded="false"><i class="fa fa-map"></i> 地图 </a></li>
74 </ul> 74 </ul>
75 75
76 - <div class="tab-content" style="padding: 5px;overflow-y: auto;">  
77 - <div class="tab-pane fade active in" id="tab_home" ></div> 76 + <div class="tab-content" >
  77 + <div class="tab-pane fade" id="tab_home" ></div>
78 <div class="tab-pane fade" id="tab_map" style="position: relative;"></div> 78 <div class="tab-pane fade" id="tab_map" style="position: relative;"></div>
79 - <div class="tab-pane fade" id="tab_line">单线路调度aaa</div> 79 +
  80 + <div class="tab-pane fade tab_line active in" id="tab_line" >
  81 +
  82 + <div class="row" style="margin: 0;height: calc(100% - 220px)">
  83 + <div class="col-md-10" style="height: 100%;padding-left: 0;padding-right: 0;">
  84 + <div style="height: calc(100% - 60px);">
  85 + <div class="col-md-6 panel-wrap">
  86 + <div class="_panel">
  87 + <div class="_head" style="color: #2765A7;">
  88 + 上行/上海火车站北广场
  89 + </div>
  90 + <div class="_body">
  91 + <table class="table table-striped table-bordered table-advance pb-table">
  92 + <colgroup>
  93 + <col style="width: 47px;">
  94 + <col style="width: 47px;">
  95 + <col style="width: 76px;">
  96 + <col style="width: 9%;">
  97 + <col style="width: 15%;">
  98 + <col style="width: 10%;">
  99 + <col style="width: 10%;">
  100 + <col style="width: 15%;">
  101 + <col>
  102 + <col style="width: 47px;">
  103 + </colgroup>
  104 + <thead>
  105 + <tr>
  106 + <th>序号</th>
  107 + <th>路牌</th>
  108 + <th>车辆</th>
  109 + <th>应到</th>
  110 + <th>实到</th>
  111 + <th>计发</th>
  112 + <th>待发</th>
  113 + <th>实发</th>
  114 + <th>原因</th>
  115 + <th>类型</th>
  116 + </tr>
  117 + </thead>
  118 + <tbody>
  119 + <tr>
  120 + <td>1</td>
  121 + <td><a href="javascript:;">13</a></td>
  122 + <td class="tl-xxrd">S2F-001</td>
  123 + <td>15:24</td>
  124 + <td>15:18（-6）</td>
  125 + <td>15:56</td>
  126 + <td>15:56</td>
  127 + <td class="tl-yzx">15:56（-19）</td>
  128 + <td></td>
  129 + <td><a href="javascript:;">主</a></td>
  130 + </tr>
  131 + <tr>
  132 + <td>2</td>
  133 + <td><a href="javascript:;">13</a></td>
  134 + <td class="tl-xxrd">S2F-001</td>
  135 + <td>15:24</td>
  136 + <td>15:18（-6）</td>
  137 + <td>15:56</td>
  138 + <td>15:56</td>
  139 + <td class="tl-yzx">15:56（-9）</td>
  140 + <td></td>
  141 + <td><a href="javascript:;">主</a></td>
  142 + </tr>
  143 + <tr>
  144 + <td>3</td>
  145 + <td><a href="javascript:;">13</a></td>
  146 + <td class="tl-xxrd">S2F-001</td>
  147 + <td>15:24</td>
  148 + <td>15:18（-6）</td>
  149 + <td>15:56</td>
  150 + <td>15:56</td>
  151 + <td class="tl-yzx">15:56</td>
  152 + <td></td>
  153 + <td><a href="javascript:;">主</a></td>
  154 + </tr>
  155 + <tr>
  156 + <td>4</td>
  157 + <td><a href="javascript:;">13</a></td>
  158 + <td class="tl-xxfc">S2F-001</td>
  159 + <td>15:24</td>
  160 + <td>15:18（-6）</td>
  161 + <td>15:56</td>
  162 + <td>15:56</td>
  163 + <td class="tl-yzx">15:56（-5）</td>
  164 + <td></td>
  165 + <td><a href="javascript:;">主</a></td>
  166 + </tr>
  167 + <tr>
  168 + <td>5</td>
  169 + <td><a href="javascript:;">13</a></td>
  170 + <td class="tl-xxrd">S2F-001</td>
  171 + <td>15:24</td>
  172 + <td>15:18（-6）</td>
  173 + <td>15:56</td>
  174 + <td>15:56</td>
  175 + <td class="tl-wd">15:56</td>
  176 + <td></td>
  177 + <td><a href="javascript:;">主</a></td>
  178 + </tr>
  179 + <tr>
  180 + <td>6</td>
  181 + <td><a href="javascript:;">13</a></td>
  182 + <td class="tl-xxsd">S2F-001</td>
  183 + <td>15:24</td>
  184 + <td>15:18（-6）</td>
  185 + <td>15:56</td>
  186 + <td>15:56</td>
  187 + <td class="tl-zzzx">15:56</td>
  188 + <td></td>
  189 + <td><a href="javascript:;">主</a></td>
  190 + </tr>
  191 + <tr>
  192 + <td>7</td>
  193 + <td><a href="javascript:;">13</a></td>
  194 + <td class="tl-xxrd">S2F-001</td>
  195 + <td>15:24</td>
  196 + <td>15:18（-6）</td>
  197 + <td>15:56</td>
  198 + <td>15:56</td>
  199 + <td class="tl-zzzx">15:56</td>
  200 + <td></td>
  201 + <td><a href="javascript:;">主</a></td>
  202 + </tr>
  203 + <tr>
  204 + <td>8</td>
  205 + <td><a href="javascript:;">13</a></td>
  206 + <td class="tl-xxrd">S2F-001</td>
  207 + <td>15:24</td>
  208 + <td>15:18（-6）</td>
  209 + <td>15:56</td>
  210 + <td>15:56</td>
  211 + <td class="tl-wzx">15:56</td>
  212 + <td></td>
  213 + <td><a href="javascript:;">主</a></td>
  214 + </tr>
  215 + <tr>
  216 + <td>9</td>
  217 + <td><a href="javascript:;">13</a></td>
  218 + <td>S2F-001</td>
  219 + <td>15:24</td>
  220 + <td>15:18（-6）</td>
  221 + <td>15:56</td>
  222 + <td>15:56</td>
  223 + <td class="tl-wzx">15:56</td>
  224 + <td></td>
  225 + <td><a href="javascript:;">主</a></td>
  226 + </tr>
  227 + <tr>
  228 + <td>10</td>
  229 + <td><a href="javascript:;">13</a></td>
  230 + <td>S2F-001</td>
  231 + <td>15:24</td>
  232 + <td>15:18（-6）</td>
  233 + <td>15:56</td>
  234 + <td>15:56</td>
  235 + <td class="tl-wzx">15:56</td>
  236 + <td></td>
  237 + <td><a href="javascript:;">主</a></td>
  238 + </tr>
  239 + <tr>
  240 + <td>11</td>
  241 + <td><a href="javascript:;">13</a></td>
  242 + <td>S2F-001</td>
  243 + <td>15:24</td>
  244 + <td>15:18（-6）</td>
  245 + <td>15:56</td>
  246 + <td>15:56</td>
  247 + <td class="tl-wzx">15:56</td>
  248 + <td></td>
  249 + <td><a href="javascript:;">主</a></td>
  250 + </tr>
  251 + <tr>
  252 + <td>12</td>
  253 + <td><a href="javascript:;">13</a></td>
  254 + <td>S2F-001</td>
  255 + <td>15:24</td>
  256 + <td>15:18（-6）</td>
  257 + <td>15:56</td>
  258 + <td>15:56</td>
  259 + <td class="tl-wzx">15:56</td>
  260 + <td></td>
  261 + <td><a href="javascript:;">主</a></td>
  262 + </tr>
  263 + <tr>
  264 + <td>13</td>
  265 + <td><a href="javascript:;">13</a></td>
  266 + <td>S2F-001</td>
  267 + <td>15:24</td>
  268 + <td>15:18（-6）</td>
  269 + <td>15:56</td>
  270 + <td>15:56</td>
  271 + <td class="tl-wzx">15:56</td>
  272 + <td></td>
  273 + <td><a href="javascript:;">主</a></td>
  274 + </tr>
  275 + </tbody>
  276 + </table>
  277 + </div>
  278 + </div>
  279 + </div>
  280 + <div class="col-md-6 panel-wrap">
  281 + <div class="_panel">
  282 + <div class="_head" style="color: #C92121;">
  283 + 下行/华戴路川环南路
  284 + </div>
  285 + <div class="_body">
  286 + <table class="table table-striped table-bordered table-advance pb-table">
  287 + <colgroup>
  288 + <col style="width: 47px;">
  289 + <col style="width: 47px;">
  290 + <col style="width: 76px;">
  291 + <col style="width: 9%;">
  292 + <col style="width: 15%;">
  293 + <col style="width: 10%;">
  294 + <col style="width: 10%;">
  295 + <col style="width: 15%;">
  296 + <col>
  297 + <col style="width: 47px;">
  298 + </colgroup>
  299 + <thead>
  300 + <tr>
  301 + <th>序号</th>
  302 + <th>路牌</th>
  303 + <th>车辆</th>
  304 + <th>应到</th>
  305 + <th>实到</th>
  306 + <th>计发</th>
  307 + <th>待发</th>
  308 + <th>实发</th>
  309 + <th>原因</th>
  310 + <th>类型</th>
  311 + </tr>
  312 + </thead>
  313 + <tbody>
  314 + <tr>
  315 + <td>1</td>
  316 + <td><a href="javascript:;">13</a></td>
  317 + <td class="tl-xxrd">S2F-001</td>
  318 + <td>15:24</td>
  319 + <td>15:18（-6）</td>
  320 + <td>15:56</td>
  321 + <td>15:56</td>
  322 + <td class="tl-yzx">15:56</td>
  323 + <td></td>
  324 + <td><a href="javascript:;">主</a></td>
  325 + </tr>
  326 + <tr>
  327 + <td>2</td>
  328 + <td><a href="javascript:;">13</a></td>
  329 + <td class="tl-xxrd">S2F-001</td>
  330 + <td>15:24</td>
  331 + <td>15:18（-6）</td>
  332 + <td>15:56</td>
  333 + <td>15:56</td>
  334 + <td class="tl-yzx">15:56</td>
  335 + <td></td>
  336 + <td><a href="javascript:;">主</a></td>
  337 + </tr>
  338 + <tr>
  339 + <td>3</td>
  340 + <td><a href="javascript:;">13</a></td>
  341 + <td class="tl-xxrd">S2F-001</td>
  342 + <td>15:24</td>
  343 + <td>15:18（-6）</td>
  344 + <td>15:56</td>
  345 + <td>15:56</td>
  346 + <td class="tl-yzx">15:56</td>
  347 + <td></td>
  348 + <td><a href="javascript:;">主</a></td>
  349 + </tr>
  350 + <tr>
  351 + <td>4</td>
  352 + <td><a href="javascript:;">13</a></td>
  353 + <td class="tl-xxsd">S2F-001</td>
  354 + <td>15:24</td>
  355 + <td>15:18（-6）</td>
  356 + <td>15:56</td>
  357 + <td>15:56</td>
  358 + <td class="tl-yzx">15:56</td>
  359 + <td></td>
  360 + <td><a href="javascript:;">主</a></td>
  361 + </tr>
  362 + <tr>
  363 + <td>5</td>
  364 + <td><a href="javascript:;">13</a></td>
  365 + <td class="tl-xxrd">S2F-001</td>
  366 + <td>15:24</td>
  367 + <td>15:18（-6）</td>
  368 + <td>15:56</td>
  369 + <td>15:56</td>
  370 + <td class="tl-yzx">15:56</td>
  371 + <td></td>
  372 + <td><a href="javascript:;">主</a></td>
  373 + </tr>
  374 + <tr>
  375 + <td>6</td>
  376 + <td><a href="javascript:;">13</a></td>
  377 + <td class="tl-xxfc">S2F-001</td>
  378 + <td>15:24</td>
  379 + <td>15:18（-6）</td>
  380 + <td>15:56</td>
  381 + <td>15:56</td>
  382 + <td class="tl-yzx">15:56</td>
  383 + <td></td>
  384 + <td><a href="javascript:;">主</a></td>
  385 + </tr>
  386 + <tr>
  387 + <td>7</td>
  388 + <td><a href="javascript:;">13</a></td>
  389 + <td class="tl-xxrd">S2F-001</td>
  390 + <td>15:24</td>
  391 + <td>15:18（-6）</td>
  392 + <td>15:56</td>
  393 + <td>15:56</td>
  394 + <td class="tl-zzzx">15:56</td>
  395 + <td></td>
  396 + <td><a href="javascript:;">主</a></td>
  397 + </tr>
  398 + <tr>
  399 + <td>8</td>
  400 + <td><a href="javascript:;">13</a></td>
  401 + <td class="tl-xxrd">S2F-001</td>
  402 + <td>15:24</td>
  403 + <td>15:18（-6）</td>
  404 + <td>15:56</td>
  405 + <td>15:56</td>
  406 + <td class="tl-zzzx">15:56</td>
  407 + <td></td>
  408 + <td><a href="javascript:;">主</a></td>
  409 + </tr>
  410 + <tr>
  411 + <td>9</td>
  412 + <td><a href="javascript:;">13</a></td>
  413 + <td class="tl-xxrd">S2F-001</td>
  414 + <td>15:24</td>
  415 + <td>15:18（-6）</td>
  416 + <td>15:56</td>
  417 + <td>15:56</td>
  418 + <td class="tl-zzzx">15:56</td>
  419 + <td></td>
  420 + <td><a href="javascript:;">主</a></td>
  421 + </tr>
  422 + <tr>
  423 + <td>10</td>
  424 + <td><a href="javascript:;">13</a></td>
  425 + <td class="tl-xxrd">S2F-001</td>
  426 + <td>15:24</td>
  427 + <td>15:18（-6）</td>
  428 + <td>15:56</td>
  429 + <td>15:56</td>
  430 + <td class="tl-wzx">15:56</td>
  431 + <td></td>
  432 + <td><a href="javascript:;">主</a></td>
  433 + </tr>
  434 + <tr>
  435 + <td>11</td>
  436 + <td><a href="javascript:;">13</a></td>
  437 + <td>S2F-001</td>
  438 + <td>15:24</td>
  439 + <td>15:18（-6）</td>
  440 + <td>15:56</td>
  441 + <td>15:56</td>
  442 + <td class="tl-wzx">15:56</td>
  443 + <td></td>
  444 + <td><a href="javascript:;">主</a></td>
  445 + </tr>
  446 + <tr>
  447 + <td>12</td>
  448 + <td><a href="javascript:;">13</a></td>
  449 + <td>S2F-001</td>
  450 + <td>15:24</td>
  451 + <td>15:18（-6）</td>
  452 + <td>15:56</td>
  453 + <td>15:56</td>
  454 + <td class="tl-wzx">15:56</td>
  455 + <td></td>
  456 + <td><a href="javascript:;">主</a></td>
  457 + </tr>
  458 + <tr>
  459 + <td>13</td>
  460 + <td><a href="javascript:;">13</a></td>
  461 + <td>S2F-001</td>
  462 + <td>15:24</td>
  463 + <td>15:18（-6）</td>
  464 + <td>15:56</td>
  465 + <td>15:56</td>
  466 + <td class="tl-wzx">15:56</td>
  467 + <td></td>
  468 + <td><a href="javascript:;">主</a></td>
  469 + </tr>
  470 + </tbody>
  471 + </table>
  472 + </div>
  473 + </div>
  474 + </div>
  475 + </div>
  476 +
  477 + <div class="pic-panel">
  478 + 图例：
  479 + <span class="tl-yzx"></span>
  480 + <span class="tl-wzx"></span>
  481 + <span class="tl-wd"></span>
  482 + <span class="tl-qrlb"></span>
  483 + <span class="tl-zzzx"></span>
  484 + &nbsp;&nbsp;&nbsp;
  485 + <!-- <span class="tl-sf-f"></span> -->
  486 + <span class="tl-xxfc"></span>
  487 + <span class="tl-xxsd"></span>
  488 + <span class="tl-xxrd"></span>
  489 + <span class="tl-fcpqr"></span>
  490 + </div>
  491 + </div>
  492 +
  493 + <div class="col-md-2 panel-wrap" >
  494 + <div class="_panel">
  495 + <div class="console-log">
  496 + <div class="log-item-list">
  497 + <div class="log-item handle">
  498 + <span class="log-item-text">Q4A-007 请求出场</span>
  499 + <span class="log-item-time">11:29</span>
  500 + <span class="log-item-point">成山路停车场</span>
  501 + <span class="log-item-handle">
  502 + <button type="button" class="btn blue btn-sm">同意</button>
  503 + <button type="button" class="btn red btn-sm">不同意</button>
  504 + </span>
  505 + </div>
  506 +
  507 + <div class="log-item">
  508 + <span class="log-item-text">Q4A-007 请求出场</span>
  509 + <span class="log-item-time">11:29</span>
  510 + <span class="log-item-point">成山路停车场</span>
  511 + <span class="log-item-result">已同意</span>
  512 + </div>
  513 +
  514 + <div class="log-item">
  515 + <span class="log-item-text">Q4A-007 请求出场</span>
  516 + <span class="log-item-time">11:29</span>
  517 + <span class="log-item-point">成山路停车场</span>
  518 + <span class="log-item-result">已同意</span>
  519 + </div>
  520 +
  521 + <div class="log-item">
  522 + <span class="log-item-text">Q4A-007 请求出场</span>
  523 + <span class="log-item-time">11:29</span>
  524 + <span class="log-item-point">成山路停车场</span>
  525 + <span class="log-item-result">已同意</span>
  526 + </div>
  527 +
  528 + <div class="log-item">
  529 + <span class="log-item-text">Q4A-007 请求恢复营运</span>
  530 + <span class="log-item-time">11:29</span>
  531 + <span class="log-item-point">金桥路博山东路</span>
  532 + <span class="log-item-result">已同意（已下发营运指令）</span>
  533 + </div>
  534 + </div>
  535 + </div>
  536 + <div class="_panel_footer">
  537 + 托管状态，计算机自动处理
  538 + </div>
  539 + </div>
  540 + </div>
  541 + </div>
  542 +
  543 + <div class="panel-wrap" style="height: 209px;margin-top: 6px;">
  544 + <div class="_panel" id="lineSvg10904">
  545 +
  546 + </div>
  547 + </div>
  548 + </div>
80 </div> 549 </div>
81 </div> 550 </div>
82 <div id="tooltipShade" class="animated fadeIn"></div> 551 <div id="tooltipShade" class="animated fadeIn"></div>
83 552
  553 +<menu class="menu" id="rightMenu">
  554 + <li class="menu-item disabled" id="menu-linename">
  555 + <button type="button" class="menu-btn">
  556 + <span class="menu-text">S2F-001</span>
  557 + </button>
  558 + </li>
  559 + <li class="menu-item" data-function="editCurrentLineCard">
  560 + <button type="button" class="menu-btn">
  561 + <i class="fa fa-plus"></i>
  562 + <span class="menu-text">临加班次</span>
  563 + </button>
  564 + </li>
  565 + <li class="menu-item">
  566 + <button type="button" class="menu-btn">
  567 + <i class="fa fa-plus-circle"></i>
  568 + <span class="menu-text">子任务</span>
  569 + </button>
  570 + </li>
  571 + <li class="menu-separator"></li>
  572 + <li class="menu-item disabled">
  573 + <button type="button" class="menu-btn">
  574 + <span class="menu-text">调度指令</span>
  575 + </button>
  576 + </li>
  577 + <li class="menu-item">
  578 + <button type="button" class="menu-btn">
  579 + <i class="fa fa-ticket"></i>
  580 + <span class="menu-text">营运状态</span>
  581 + </button>
  582 + </li>
  583 + <li class="menu-item">
  584 + <button type="button" class="menu-btn">
  585 + <i class="fa fa-sort-amount-asc"></i>
  586 + <span class="menu-text">切换上下行</span>
  587 + </button>
  588 + </li>
  589 +<!-- <li class="menu-separator"></li>
  590 + <li class="menu-item disabled">
  591 + <button type="button" class="menu-btn">
  592 + <span class="menu-text">布局相关</span>
  593 + </button>
  594 + </li>
  595 + <li class="menu-item">
  596 + <button type="button" class="menu-btn">
  597 + <i class="fa fa-edit"></i>
  598 + <span class="menu-text">编辑布局</span>
  599 + </button>
  600 + </li>
  601 + <li class="menu-item submenu">
  602 + <button type="button" class="menu-btn">
  603 + <i class="fa fa-star"></i>
  604 + <span class="menu-text">已保存布局</span>
  605 + </button>
  606 + <menu class="menu">
  607 + <li class="menu-item">
  608 + <button type="button" class="menu-btn">
  609 + <i class="fa fa-check"></i>
  610 + <span class="menu-text">上南 -默认布局</span>
  611 + </button>
  612 + </li>
  613 + <li class="menu-item">
  614 + <button type="button" class="menu-btn">
  615 + <span class="menu-text">杨高 -默认布局</span>
  616 + </button>
  617 + </li>
  618 + </menu>
  619 + </li>
  620 + <li class="menu-separator"></li>
  621 + <li class="menu-item disabled">
  622 + <button type="button" class="menu-btn">
  623 + <span class="menu-text">数据相关</span>
  624 + </button>
  625 + </li>
  626 + <li class="menu-item submenu">
  627 + <button type="button" class="menu-btn">
  628 + <i class="fa fa-registered"></i>
  629 + <span class="menu-text">数据刷新逻辑</span>
  630 + </button>
  631 + <menu class="menu">
  632 + <li class="menu-item">
  633 + <button type="button" class="menu-btn">
  634 + <i class="fa fa-check"></i>
  635 + <span class="menu-text">倒数第二条出场刷新</span>
  636 + </button>
  637 + </li>
  638 + <li class="menu-item">
  639 + <button type="button" class="menu-btn">
  640 + <span class="menu-text">按时间滚动</span>
  641 + </button>
  642 + </li>
  643 + </menu>
  644 + </li>
  645 + <li class="menu-item">
  646 + <button type="button" class="menu-btn">
  647 + <i class="fa fa-exchange"></i>
  648 + <span class="menu-text">立即和调度系统同步数据</span>
  649 + </button>
  650 + </li>
  651 + <li class="menu-item">
  652 + <button type="button" class="menu-btn">
  653 + <i class="fa fa-refresh"></i>
  654 + <span class="menu-text">刷新页面(F5)</span>
  655 + </button>
  656 + </li> -->
  657 +</menu>
  658 +
84 </div> 659 </div>
85 <div id="temps"></div> 660 <div id="temps"></div>
86 661
@@ -91,6 +666,7 @@ @@ -91,6 +666,7 @@
91 <script src="/pages/control/line/js/tooltip.js"></script> 666 <script src="/pages/control/line/js/tooltip.js"></script>
92 <script src="/pages/control/line/js/drawSvg.js"></script> 667 <script src="/pages/control/line/js/drawSvg.js"></script>
93 <script src="/pages/control/line/js/data.js"></script> 668 <script src="/pages/control/line/js/data.js"></script>
  669 +<script src="/pages/control/line/js/alone.js"></script>
94 <script src="/pages/control/line/js/main.js"></script> 670 <script src="/pages/control/line/js/main.js"></script>
95 <script> 671 <script>
96 $(function() { 672 $(function() {
src/main/resources/static/pages/control/line/js/alone.js 0 → 100644
  View file @f4fac3a
  1 +/**
  2 + * 单线路调度
  3 + */
  4 +
  5 +var _alone = (function(){
  6 +
  7 + var aloneObject = {
  8 + init: function(){
  9 + _data.queryStationRoute('10904' , 'lineSvg10904' , drawSvg.init);
  10 +
  11 + $('.console-log .log-item-list').slimscroll({
  12 + height: '100%'
  13 + })
  14 +
  15 + $('.pb-table tr').on('contextmenu', function(e){
  16 + e.preventDefault();
  17 + $('.pb-table tr.active-menu').removeClass('active-menu');
  18 +
  19 + var tr = $(this);
  20 + showMenu(e.pageX, e.pageY);
  21 +
  22 + tr.addClass('active-menu');
  23 + $(document).one('click', function(){
  24 + $('#rightMenu').removeClass('show-menu');
  25 + tr.removeClass('active-menu');
  26 + });
  27 + });
  28 + }
  29 + }
  30 +
  31 +
  32 + function showMenu(x, y) {
  33 + var menu = $('#rightMenu');
  34 + docWidth = $(document).width(), docHeight = $(document).height(),
  35 + menuHeight = menu.height(),
  36 + menuWidth = menu.width();
  37 + /* 边界 */
  38 + if (y > (docHeight - menuHeight)) {
  39 + y = docHeight - menuHeight - offset;
  40 + }
  41 +
  42 + if (x > (docWidth - (menuWidth * 2))) {
  43 + x = docWidth - (menuWidth * 2) - offset;
  44 + }
  45 +
  46 + menu.css('left', x + 'px')
  47 + .css('top', y + 'px')
  48 + .addClass('show-menu');
  49 + }
  50 +
  51 + return aloneObject;
  52 +})();
0 \ No newline at end of file 53 \ No newline at end of file
src/main/resources/static/pages/control/line/js/data.js
  View file @f4fac3a
@@ -5,6 +5,8 @@ var _data = (function(){ @@ -5,6 +5,8 @@ var _data = (function(){
5 5
6 var storage = window.localStorage; 6 var storage = window.localStorage;
7 7
  8 + var gpsTimer;
  9 +
8 //实时GPS数据 10 //实时GPS数据
9 var allGps = {}; 11 var allGps = {};
10 //10秒刷新一次实时GPS 12 //10秒刷新一次实时GPS
@@ -60,7 +62,7 @@ var _data = (function(){ @@ -60,7 +62,7 @@ var _data = (function(){
60 startRefreshGpsTimer: function(){ 62 startRefreshGpsTimer: function(){
61 var f = arguments.callee; 63 var f = arguments.callee;
62 refreshGpsProxy(); 64 refreshGpsProxy();
63 - setTimeout(f, realGpsT); 65 + gpsTimer = setTimeout(f, realGpsT);
64 } 66 }
65 }; 67 };
66 68
@@ -142,10 +144,13 @@ var _data = (function(){ @@ -142,10 +144,13 @@ var _data = (function(){
142 } 144 }
143 145
144 function getGpsError(jqXHR, textStatus){ 146 function getGpsError(jqXHR, textStatus){
145 - if(textStatus === 'error')  
146 - layer.alert('获取GPS数据时，服务器出现异常', {icon: 2});  
147 - else if(textStatus === 'timeout')  
148 - layer.alert('连接服务器超时', {icon: 2}); 147 + if(textStatus === 'error'){}
  148 + //layer.alert('获取GPS数据时，服务器出现异常', {icon: 2});
  149 + else if(textStatus === 'timeout'){}
  150 + //layer.alert('连接服务器超时', {icon: 2});
  151 +
  152 + //停止gps刷新
  153 + clearTimeout(gpsTimer);
149 } 154 }
150 } 155 }
151 156
src/main/resources/static/pages/control/line/js/drawSvg.js
  View file @f4fac3a
@@ -5,7 +5,7 @@ @@ -5,7 +5,7 @@
5 var drawSvg = (function(){ 5 var drawSvg = (function(){
6 6
7 var mt = 44//顶部距离 7 var mt = 44//顶部距离
8 - ,p = 132//上下行之间的间隔 8 + ,p = 112//上下行之间的间隔 132
9 ,x = d3.scale.linear() 9 ,x = d3.scale.linear()
10 ,w 10 ,w
11 ,lineSvgMapp = {} 11 ,lineSvgMapp = {}
@@ -44,13 +44,14 @@ var drawSvg = (function(){ @@ -44,13 +44,14 @@ var drawSvg = (function(){
44 44
45 var drawSvgObject = { 45 var drawSvgObject = {
46 init: function(lineId, data, container){ 46 init: function(lineId, data, container){
47 - //记录起终点站 47 + //起终点站
48 $.each(data, function(){ 48 $.each(data, function(){
49 if(this.stationMark == 'B' || this.stationMark == 'E' ) 49 if(this.stationMark == 'B' || this.stationMark == 'E' )
50 seGps[lineId + '_' + this.id[0]] = []; 50 seGps[lineId + '_' + this.id[0]] = [];
51 }); 51 });
52 52
53 - w = $('.line_chart:first').width(); 53 + //w = $('.line_chart:first').width();
  54 + w = $('#' + container).width();
54 var svg = d3.select('#' + container).append('svg') 55 var svg = d3.select('#' + container).append('svg')
55 .attr('width', w).attr('opacity', 0) 56 .attr('width', w).attr('opacity', 0)
56 .attr('id', lineId); 57 .attr('id', lineId);
@@ -127,13 +128,13 @@ var drawSvg = (function(){ @@ -127,13 +128,13 @@ var drawSvg = (function(){
127 svg.selectAll('text') 128 svg.selectAll('text')
128 .attr('transform', function(d, i){ 129 .attr('transform', function(d, i){
129 var len = $(this).text().length; 130 var len = $(this).text().length;
130 - return 'translate(0,' + (len < 7?(7 - len) * 8:0) + ')'; 131 + return 'translate(0,' + (len < 6?(6 - len) * 8:0) + ')';
131 }) 132 })
132 .text(function(){ 133 .text(function(){
133 var t = $(this).text() 134 var t = $(this).text()
134 len = t.length; 135 len = t.length;
135 - if(len > 7){  
136 - var sortText = t.substring(0, 7); 136 + if(len > 6){
  137 + var sortText = t.substring(0, 6);
137 return sortText; 138 return sortText;
138 } 139 }
139 return t; 140 return t;
src/main/resources/static/pages/control/line/js/main.js
  View file @f4fac3a
@@ -69,19 +69,26 @@ @@ -69,19 +69,26 @@
69 69
70 setTimeout(function(){ 70 setTimeout(function(){
71 //生成头部选项卡 71 //生成头部选项卡
72 - var topTabs = ''; 72 + var topTabs = '', tabPanels = '';
73 $.each(_data.getLines(), function(i, line){ 73 $.each(_data.getLines(), function(i, line){
  74 + /*topTabs += '<li ><a href="#tab_line_'+line.lineCode+'" data-toggle="tab" '+
  75 + 'aria-expanded="false"> '+line.name+'<span>（0,0 托管）</span> </a></li>';*/
  76 +
74 topTabs += '<li ><a href="#tab_line" data-toggle="tab" '+ 77 topTabs += '<li ><a href="#tab_line" data-toggle="tab" '+
75 - 'aria-expanded="false"> '+line.name+'<span>（0,0 托管）</span> </a></li>'; 78 + 'aria-expanded="true"> '+line.name+'<span>（0,0 托管）</span> </a></li>';
  79 + //tabPanels += '<div class="tab-pane fade" data-id="'+line.lineCode+'" id="tab_line_'+line.lineCode+'">'+line.name+'</div>';
  80 +
76 }); 81 });
77 $('#top-tabs-wrap .nav-tabs').append(topTabs); 82 $('#top-tabs-wrap .nav-tabs').append(topTabs);
  83 + //$('#top-tabs-wrap .tab-content').append(tabPanels);
78 84
79 - setTimeout(function(){  
80 - //加载地图页数据  
81 - $('#tab_map').load('/pages/mapmonitor/real/real.html');  
82 - }, 500); 85 + //加载地图页数据
  86 + $('#tab_map').load('/pages/mapmonitor/real/real.html');
83 87
84 - homeObject.init(); 88 + //初始化单线路调度页面
  89 + _alone.init();
  90 +
  91 + //homeObject.init();
85 92
86 }, 200) 93 }, 200)
87 94
src/main/resources/static/pages/control/lineallot/allot.html
  View file @f4fac3a
@@ -20,7 +20,7 @@ @@ -20,7 +20,7 @@
20 padding: 8px; 20 padding: 8px;
21 min-width: 85px; 21 min-width: 85px;
22 text-align: center; 22 text-align: center;
23 - border: 1px solid #666; 23 + border: 1px solid #C1C1C1;
24 color: #666; 24 color: #666;
25 border-radius: 5px !important; 25 border-radius: 5px !important;
26 margin: 5px; 26 margin: 5px;