1、调度值勤日报添加新的类似时刻表的排班视图

徐烜
1 parent d56180d5
Showing 14 changed files with 948 additions and 30 deletions
src/main/java/com/bsth/controller/schedule/core/legacy/SchedulePlanInfoController.java
src/main/java/com/bsth/service/schedule/SchedulePlanInfoService.java
src/main/java/com/bsth/service/schedule/impl/SchedulePlanInfoServiceImpl.java
src/main/java/com/bsth/service/schedule/timetable/TimetableExcelData.java
src/main/java/com/bsth/service/schedule/timetable/strategy/TimetableExcelWithPlanInfoViewStrategy.java
src/main/java/com/bsth/service/schedule/timetable/strategy/impl/TimetableExcelWithPlanInfoViewStrategyImpl.java
src/main/resources/static/pages/scheduleApp/Gruntfile.js
src/main/resources/static/pages/scheduleApp/module/common/dts2/scheduleplan/saPlanInfoView.js
src/main/resources/static/pages/scheduleApp/module/common/dts2/scheduleplan/saPlanInfoViewTemplate.html
src/main/resources/static/pages/scheduleApp/module/common/prj-common-directive.js
src/main/resources/static/pages/scheduleApp/module/common/prj-common-globalservice.js
src/main/resources/static/pages/scheduleApp/module/core/schedulePlanManage/report/ext/list.html
src/main/resources/static/pages/scheduleApp/module/core/schedulePlanManage/report/ext/module.js
src/main/resources/static/pages/scheduleApp/module/core/schedulePlanManage/service.js
@@ -37,6 +37,25 @@ public class SchedulePlanInfoController extends BController&lt;SchedulePlanInfo, Lo
         MyHttpUtils.responseStreamFile(response, dataToolsFile.getFile());
     }
+    // 获取排班计划时刻表显示用数据
+    @GetMapping(value = "/saPlanInfoView/data/{xlid}/{date}")
+    public Map<String, Object> getDirectiveDataWithPlanInfo(
+            @PathVariable(value = "xlid") Integer xlid,
+            @PathVariable(value = "date") Date scheduleDate) {
+        Map<String, Object> resultMap = new HashMap<>();
+        try {
+            resultMap.put("status", ResponseCode.SUCCESS);
+            resultMap.put("data", this.schedulePlanInfoService.getDirectiveDataWithPlanInfo(xlid, scheduleDate));
+
+        } catch (Exception exp) {
+            exp.printStackTrace();
+            resultMap.put("status", ResponseCode.ERROR);
+            resultMap.put("msg", exp.getLocalizedMessage());
+        }
+
+        return resultMap;
+    }
+
     @RequestMapping(value = "/groupextinfos/{xlid}/{date}", method = RequestMethod.GET)
     public Map<String, Object> findGroupInfoExt(
             @PathVariable(value = "xlid") Integer xlid,
 package com.bsth.service.schedule;
 import com.bsth.entity.schedule.SchedulePlanInfo;
+import com.bsth.service.schedule.datatools.TTInfoDetailForEdit;
 import com.bsth.service.schedule.exception.ScheduleException;
 import com.bsth.service.schedule.utils.DataToolsFile;
 import org.apache.commons.lang3.StringUtils;
@@ -28,6 +29,16 @@ public interface SchedulePlanInfoService extends BService&lt;SchedulePlanInfo, Long
     DataToolsFile exportPlanTimetableInfo(Integer xlId, Date scheduleDate) throws ScheduleException;
     /**
+     * 获取排班计划时刻表显示用数据。
+     * @param xlId 线路Id
+     * @param scheduleDate 排班日期
+     * @return
+     * @throws ScheduleException
+     */
+    TTInfoDetailForEdit.EditInfo getDirectiveDataWithPlanInfo(
+            Integer xlId, Date scheduleDate) throws ScheduleException;
+
+    /**
      * 查找最近的排班的日期。
      * @param xlId 线路Id
      * @return
@@ -4,9 +4,11 @@ import com.bsth.entity.schedule.SchedulePlanInfo;
 import com.bsth.repository.LineRepository;
 import com.bsth.repository.schedule.SchedulePlanInfoRepository;
 import com.bsth.service.schedule.SchedulePlanInfoService;
+import com.bsth.service.schedule.datatools.TTInfoDetailForEdit;
 import com.bsth.service.schedule.exception.ScheduleException;
 import com.bsth.service.schedule.timetable.TimetableExcelData;
 import com.bsth.service.schedule.timetable.strategy.impl.TimetableExcelWithPlanInfoExportStrategyImpl;
+import com.bsth.service.schedule.timetable.strategy.impl.TimetableExcelWithPlanInfoViewStrategyImpl;
 import com.bsth.service.schedule.utils.DataToolsFile;
 import com.bsth.service.schedule.utils.DataToolsProperties;
 import com.bsth.service.schedule.utils.DataToolsService;
@@ -57,6 +59,19 @@ public class SchedulePlanInfoServiceImpl extends BServiceImpl&lt;SchedulePlanInfo, 
     }
     @Override
+    public TTInfoDetailForEdit.EditInfo getDirectiveDataWithPlanInfo(Integer xlId, Date scheduleDate) throws ScheduleException {
+        TimetableExcelData timetableExcelData = TimetableExcelData.withPlanInfoExcelViewBuilder()
+                .setXlId(xlId)
+                .setScheduleDate(scheduleDate)
+                .setLineRepository(this.lineRepository)
+                .setDataToolsService(this.dataToolsService)
+                .setDataToolsProperties(this.dataToolsProperties)
+                .setTimetableExcelWithPlanInfoViewStrategy(new TimetableExcelWithPlanInfoViewStrategyImpl())
+                .build();
+        return timetableExcelData.doGetDirectiveDataWithPlanInfo();
+    }
+
+    @Override
     public SchedulePlanInfo save(SchedulePlanInfo schedulePlanInfo) {
         // 生成计划不是save，使用的是spring batch插入的
         // 这里是单独修改的时候，需要记录修改次数，用于标识被修改过
@@ -11,11 +11,10 @@ import com.bsth.repository.schedule.TTInfoRepository;
 import com.bsth.service.LineService;
 import com.bsth.service.LsStationRouteService;
 import com.bsth.service.schedule.GuideboardInfoService;
+import com.bsth.service.schedule.datatools.TTInfoDetailForEdit;
 import com.bsth.service.schedule.exception.ScheduleException;
-import com.bsth.service.schedule.timetable.strategy.TimetableExcelDataImportStrategy;
-import com.bsth.service.schedule.timetable.strategy.TimetableExcelDataValidateStrategy;
-import com.bsth.service.schedule.timetable.strategy.TimetableExcelPVDataExportStrategy;
-import com.bsth.service.schedule.timetable.strategy.TimetableExcelWithPlanInfoExportStrategy;
+import com.bsth.service.schedule.timetable.strategy.*;
+import com.bsth.service.schedule.timetable.strategy.impl.TimetableExcelWithPlanInfoViewStrategyImpl;
 import com.bsth.service.schedule.utils.*;
 import org.apache.commons.lang3.StringUtils;
 import org.apache.poi.ss.usermodel.Sheet;
@@ -27,10 +26,7 @@ import org.springframework.util.Assert;
 import org.springframework.util.CollectionUtils;
 import java.io.File;
-import java.util.Date;
-import java.util.HashMap;
-import java.util.List;
-import java.util.Map;
+import java.util.*;
 /**
  * 时刻表Excel数据类，用于验证，导入，导出时刻表数据。
@@ -180,7 +176,6 @@ public class TimetableExcelData {
     /** 导出策略 */
     private TimetableExcelWithPlanInfoExportStrategy timetableExcelWithPlanInfoExportStrategy;
-
     /**
      * 导出排班时刻表数据。
      */
@@ -192,6 +187,30 @@ public class TimetableExcelData {
                 this.dataToolsProperties);
     }
+    // ------------------ 获取显示排班时刻表数据相关属性及方法，如下：----------------- //
+    /**
+     * 注意：line共用验证相关属性
+     */
+    /**
+     * 注意：schedule共用导出排班时刻表相关属性
+     */
+    /**
+     * 注意：dataToolsService和dataToolsProperties共用导入相关属性
+     */
+
+    /** 获取显示数据策略 */
+    private TimetableExcelWithPlanInfoViewStrategy timetableExcelWithPlanInfoViewStrategy;
+    /**
+     * 获取前端angular指令用数据。
+     */
+    public TTInfoDetailForEdit.EditInfo doGetDirectiveDataWithPlanInfo() throws ScheduleException {
+        return this.timetableExcelWithPlanInfoViewStrategy.doGetDirectiveDataWithPlanInfo(
+                this.line,
+                this.scheduleDate,
+                this.dataToolsService,
+                this.dataToolsProperties);
+    }
+
     // ----------- 构造函数 ---------- //
     public TimetableExcelData(ValidateBuilder validateBuilder) {
         // 公共属性
@@ -249,6 +268,17 @@ public class TimetableExcelData {
                 planInfoExcelExportBuilder.timetableExcelWithPlanInfoExportStrategy;
     }
+    public TimetableExcelData(PlanInfoExcelViewBuilder planInfoExcelViewBuilder) {
+        // 公共属性
+        this.line = planInfoExcelViewBuilder.line;
+        this.scheduleDate = planInfoExcelViewBuilder.scheduleDate;
+        this.dataToolsService = planInfoExcelViewBuilder.dataToolsService;
+        this.dataToolsProperties = planInfoExcelViewBuilder.dataToolsProperties;
+        // 获取显示数据策略
+        this.timetableExcelWithPlanInfoViewStrategy =
+                planInfoExcelViewBuilder.timetableExcelWithPlanInfoViewStrategy;
+    }
+
     // ----------- builder类 ----------- //
     public static ValidateBuilder withValidateBuilder() {
         return new ValidateBuilder();
@@ -681,4 +711,75 @@ public class TimetableExcelData {
     }
+    public static PlanInfoExcelViewBuilder withPlanInfoExcelViewBuilder() {
+        return new PlanInfoExcelViewBuilder();
+    }
+    public static class PlanInfoExcelViewBuilder {
+        private PlanInfoExcelViewBuilder() {}
+
+        /** 线路 */
+        private Integer xlId;
+        /** 排班日期 */
+        private Date scheduleDate;
+        /** 线路repo */
+        private LineRepository lineRepository;
+        /** 数据工具服务 */
+        private DataToolsService dataToolsService;
+        /** 配置数据导入导出用到的配置信息 */
+        private DataToolsProperties dataToolsProperties;
+        /** view策略 */
+        private TimetableExcelWithPlanInfoViewStrategyImpl timetableExcelWithPlanInfoViewStrategy;
+
+        public PlanInfoExcelViewBuilder setXlId(Integer xlId) {
+            this.xlId = xlId;
+            return this;
+        }
+
+        public PlanInfoExcelViewBuilder setScheduleDate(Date scheduleDate) {
+            this.scheduleDate = scheduleDate;
+            return this;
+        }
+
+        public PlanInfoExcelViewBuilder setLineRepository(LineRepository lineRepository) {
+            this.lineRepository = lineRepository;
+            return this;
+        }
+
+        public PlanInfoExcelViewBuilder setDataToolsService(DataToolsService dataToolsService) {
+            this.dataToolsService = dataToolsService;
+            return this;
+        }
+
+        public PlanInfoExcelViewBuilder setDataToolsProperties(DataToolsProperties dataToolsProperties) {
+            this.dataToolsProperties = dataToolsProperties;
+            return this;
+        }
+
+        public PlanInfoExcelViewBuilder setTimetableExcelWithPlanInfoViewStrategy(TimetableExcelWithPlanInfoViewStrategyImpl timetableExcelWithPlanInfoViewStrategy) {
+            this.timetableExcelWithPlanInfoViewStrategy = timetableExcelWithPlanInfoViewStrategy;
+            return this;
+        }
+
+        // ---------------- 内部生成的属性 ---------------- //
+        /** 线路信息 */
+        private Line line;
+
+        public TimetableExcelData build() {
+            // 1、参数验证
+            Assert.notNull(this.xlId, "线路Id为空！");
+            Assert.notNull(this.scheduleDate, "排班日期为空！");
+            Assert.notNull(this.lineRepository, "线路repo为空！");
+            Assert.notNull(this.dataToolsService, "数据工具服务为空！");
+            Assert.notNull(this.dataToolsProperties, "配置数据导入导出用到的配置信息为空！");
+            Assert.notNull(this.timetableExcelWithPlanInfoViewStrategy, "获取显示数据策略为空！");
+
+            // 2、获取线路信息
+            Optional<Line> optionalLine = this.lineRepository.findById(this.xlId);
+            Assert.isTrue(optionalLine.isPresent(), "线路[id=" + this.xlId + "]为空！");
+            this.line = optionalLine.get();
+
+            return new TimetableExcelData(this);
+        }
+    }
+
 }
+package com.bsth.service.schedule.timetable.strategy;
+
+import com.bsth.entity.Line;
+import com.bsth.service.schedule.datatools.TTInfoDetailForEdit;
+import com.bsth.service.schedule.exception.ScheduleException;
+import com.bsth.service.schedule.utils.DataToolsProperties;
+import com.bsth.service.schedule.utils.DataToolsService;
+
+import java.util.Date;
+
+/**
+ * 排班时刻数据（时刻表的格式，附加驾驶员，车牌信息）前端angular指令数据策略接口。
+ */
+public interface TimetableExcelWithPlanInfoViewStrategy {
+
+    /**
+     * 获取前端angular指令用数据。
+     * @param xl 线路信息
+     * @param scheduleDate 排班日期
+     * @param dataToolsService dataToolsService
+     * @param dataToolsProperties dataToolsProperties
+     */
+    TTInfoDetailForEdit.EditInfo doGetDirectiveDataWithPlanInfo(
+            Line xl,
+            Date scheduleDate,
+            DataToolsService dataToolsService,
+            DataToolsProperties dataToolsProperties
+    ) throws ScheduleException;
+}
+package com.bsth.service.schedule.timetable.strategy.impl;
+
+import com.bsth.entity.Line;
+import com.bsth.service.schedule.datatools.TTInfoDetailForEdit;
+import com.bsth.service.schedule.exception.ScheduleException;
+import com.bsth.service.schedule.timetable.strategy.TimetableExcelWithPlanInfoViewStrategy;
+import com.bsth.service.schedule.utils.*;
+import org.apache.poi.ss.usermodel.Row;
+import org.slf4j.Logger;
+import org.slf4j.LoggerFactory;
+
+import java.io.File;
+import java.time.ZoneId;
+import java.time.format.DateTimeFormatter;
+import java.util.*;
+
+/**
+ * 排班时刻数据（时刻表的格式，附加驾驶员，车牌信息）前端angular指令数据策略接口实现。
+ */
+public class TimetableExcelWithPlanInfoViewStrategyImpl implements TimetableExcelWithPlanInfoViewStrategy {
+    /** 日志记录器 */
+    private final static Logger LOG = LoggerFactory.getLogger(TimetableExcelWithPlanInfoViewStrategyImpl.class);
+
+    @Override
+    public TTInfoDetailForEdit.EditInfo doGetDirectiveDataWithPlanInfo(
+            Line xl,
+            Date scheduleDate,
+            DataToolsService dataToolsService,
+            DataToolsProperties dataToolsProperties) throws ScheduleException {
+
+        LOG.info("---------------- 开始获取显示数据 线路=[{}],日期=[{}]排班时刻信息... --------------", xl.getName(), scheduleDate);
+
+        try {
+            // ---------- 1、ktr生成的导出文件 --------- //
+            // ---------- 1-1、创建ktr参数 --------- //
+            Map<String, Object> ktrParams = new HashMap<>();
+            // 导出用元数据ktr
+            File ktrMetaFile = new File(this.getClass().getResource(
+                    dataToolsProperties.getTtinfodetailPlaninfoMetaoutput()).toURI());
+            // 导出ktr
+            File ktrFile = new File(this.getClass().getResource(
+                    dataToolsProperties.getTtinfodetailPlaninfoOutput()).toURI());
+
+            // 通用参数，转换文件路径，excel输出文件名
+            ktrParams.put("transpath", ktrMetaFile.getAbsolutePath());
+            ktrParams.put("filename", "排班时刻表导出数据temp");
+            // ktr附加命名参数
+            ktrParams.put("xlid", xl.getId()); // 线路Id
+            ktrParams.put("injectktrfile", ktrFile.getAbsolutePath()); // 注入元数据的ktr文件
+            ktrParams.put("sdate", scheduleDate.toInstant()
+                    .atZone(ZoneId.systemDefault()).toLocalDate()
+                    .format(DateTimeFormatter.ISO_DATE)); // 排班日期
+
+            // ---------- 1-2、执行ktr --------- //
+            DataToolsFile exportFile = dataToolsService.exportData(ktrParams);
+
+            // ---------- 2、处理生成的导出文件 --------- //
+            TTInfoDetailForEdit.EditInfo viewData = new TTInfoDetailForEdit.EditInfo();
+
+            // 将导出的数据表头重新处理一遍，祛除->数字
+            // poi api，并读取第一行数据
+            org.apache.poi.ss.usermodel.Workbook poi_workbook;
+            org.apache.poi.ss.usermodel.Sheet poi_sheet;
+            if (DataToolsFileType.XLS.isThisType(exportFile.getFile())) {
+                poi_workbook = DataToolsFileType.XLS.getWorkBook(exportFile.getFile());
+            } else if (DataToolsFileType.XLSX.isThisType(exportFile.getFile())) {
+                poi_workbook = DataToolsFileType.XLSX.getWorkBook(exportFile.getFile());
+            } else {
+                throw new Exception("不是xls xlsx文件!");
+            }
+            poi_sheet = poi_workbook.getSheet("Sheet1");
+            if (poi_sheet == null || poi_sheet.getRow(0) == null) { // 空sheet
+                return viewData;
+            }
+
+            int rownums = poi_sheet.getLastRowNum() + 1;
+            int colnums = poi_sheet.getRow(0).getLastCellNum();
+            Row firstrow = poi_sheet.getRow(0);
+            for (int i = 0; i < colnums; i++) {
+                org.apache.poi.ss.usermodel.Cell cell = firstrow.getCell(i);
+                viewData.getHeader().add(
+                        PoiUtils.getStringValueFromCell(cell).trim().replaceAll("(->\\d+)", ""));
+            }
+
+            for (int i = 1; i < rownums; i++) { // 第二行开始
+                List<TTInfoDetailForEdit.FcInfo> fcInfoList = new ArrayList<>();
+                for (int j = 0; j < colnums; j++) {
+                    // poi读
+                    String cellContent = PoiUtils.getStringValueFromCell(
+                            poi_sheet.getRow(i).getCell(j)
+                    ).replaceAll("\\s*", "");
+
+                    TTInfoDetailForEdit.FcInfo fcInfo = new TTInfoDetailForEdit.FcInfo();
+                    fcInfo.setFcsj(cellContent);
+                    fcInfoList.add(fcInfo);
+                }
+                viewData.getContents().add(fcInfoList);
+            }
+
+
+            return viewData;
+        } catch (Exception exp) {
+            LOG.error("---------------- 获取显示数据 线路=[{}],日期=[{}]排班时刻信息失败！ --------------", xl.getName(), scheduleDate);
+            throw new ScheduleException(exp);
+        }
+    }
+
+}
@@ -95,7 +95,10 @@ module.exports = function (grunt) {
                     'module/common/dts2/scheduleplan/saScpdate.js', // saScpdate指令（非通用指令，只在排班计划form中使用）
                     'module/common/dts2/scheduleplan/saSrule.js', // saSrule指令（非通用指令，只在排班计划form中使用）
                     'module/common/dts2/scheduleplan/saPlaninfoedit.js', // saPlaninfoedit指令（非通用指令，只在调度执勤日报中使用）
-                    'module/common/dts2/scheduleplan/saPlaninfoedit2.js' // saPlaninfoedit2指令（非通用指令，只在调度执勤日报中使用）
+                    'module/common/dts2/scheduleplan/saPlaninfoedit2.js', // saPlaninfoedit2指令（非通用指令，只在调度执勤日报中使用）
+                    'module/common/dts2/scheduleplan/saPlanInfoView.js' // saPlanInfoView指令（非通用指令，只在调度值勤日报中使用）
+
+
                 ],
                 dest: 'module/common/prj-common-directive.js'
             },
+/**
+ * saPlanInfoView指令，排班明细显示指令（以类似时刻表的形式显示）
+ */
+angular.module('ScheduleApp').directive(
+    'saPlaninfoview',
+    [
+        '$compile',
+        '$window',
+        '$timeout',
+        function($compile, $window, $timeout) {
+            return {
+                restrict: 'E',
+                templateUrl: '/pages/scheduleApp/module/common/dts2/scheduleplan/saPlanInfoViewTemplate.html',
+                scope: { // 独立作用域
+                    ds: "=ngModel"
+                },
+                controllerAs: "$saPlanInfoViewCtrl",
+                bindToController: true,
+                controller: function() {
+                    var self = this;
+                    // TODO：
+
+                },
+                /**
+                 * compile阶段，angular还没有编译模版，根据需要可以修改模版dom
+                 * @param tElem
+                 * @param tAttrs
+                 * @returns {{pre: Function, post: Function}}
+                 */
+                compile: function(tElem, tAttrs) {
+                    // 获取属性
+                    var $attr_name = tAttrs["name"]; // 控件的名字
+                    if (!$attr_name) {
+                        throw new Error("saPlanInfoView指令 name属性required");
+                    }
+
+                    // 内部controlAs名字
+                    var ctrlAs = '$saTimeTableCtrl';
+
+                    return {
+                        pre: function(scope, element, attr) {
+                            // TODO：
+
+                        },
+                        post: function(scope, element, attr) {
+                            // TODO：
+                        }
+
+                    };
+
+                }
+            };
+        }
+    ]
+);
+<style>
+    .ttInfo_detail {
+        height: 100%;
+        /*overflow: hidden;*/
+    }
+    .ttInfo_detail .container-fluid {
+        height: 100%;
+        margin-left: 0;
+    }
+    .ttInfo_detail .container-fluid>* {
+        padding: 0;
+    }
+    .ttInfo_detail .container-fluid.top-container {
+        margin-top: 5px;
+        padding: 0;
+        /*overflow: hidden;*/
+    }
+    .ttInfo_detail .detail-wrap {
+        height: calc(100% - 1px);
+        padding: 0;
+    }
+    .ttInfo_detail .detail-wrap .header-title {
+        cursor: pointer; /* 图例点击按钮 */
+        font-size: 14px;
+        color: #cccaca;
+    }
+    .ttInfo_detail .detail-wrap h3 {
+        margin: 7px 0 5px;
+        text-indent: 5px;
+        margin: 0;
+        height: 31px;
+        line-height: 31px;
+    }
+    .ttInfo_detail .detail-wrap.up h3 {
+        color: #2765A7;
+    }
+
+    .ttInfo_detail .detail-panel {
+        padding: 0;
+        height: 100%;
+        border: 1px solid #ddd;
+        background: #fafafa;
+        border-radius: 10px !important;
+        moz-user-select: -moz-none;
+        -moz-user-select: none;
+        -o-user-select: none;
+        -khtml-user-select: none;
+        -webkit-user-select: none;
+        -ms-user-select: none;
+        user-select: none;
+    }
+
+    .ttInfo_detail .tt_table {
+        padding-top: 36px;
+    }
+
+    .ttInfo_detail .tt_table>.tt_table_head {
+        height: 36px;
+        line-height: 36px;
+    }
+
+    .detail-body {
+        height: calc(100% - 37px);
+        background: #fff;
+    }
+
+    .detail-body .tt_table_wrap {
+        height: 100%;
+        border-bottom: 0;
+        /*overflow-x: hidden;*/
+    }
+
+    .detail-body .tt_table_wrap .tt_table .tt_table_body dl:last-child {
+        border-bottom: 0;
+    }
+
+    .detail-body .tt_table>.tt_table_body dl:hover dd:nth-of-type(1) {
+        background: #fafafa;
+        background: linear-gradient(to right, #fafafa, #f5fbff);
+    }
+
+    .detail-body .tt_table dl dd, .detail-body .tt_table dl dt {
+        font-size: 14px;
+        line-height: 37px;
+    }
+
+    .tt_table dl dt:nth-of-type(1), .tt_table dl dd:nth-of-type(1) {
+        width: 50px;
+    }
+    .tt_table dl dd:nth-of-type(1) {
+        background: #eae8e8;
+        /*border-bottom: 1px solid #b3b3b3;*/
+        border-right: 1px solid #b3b3b3;
+        text-align: center;
+        text-indent: -3px;
+    }
+
+    .tt_table dl dt:nth-of-type(2), .tt_table dl dd:nth-of-type(2) {
+        width: 55px;
+        text-align: center;
+    }
+    .tt_table dl dt:nth-of-type(n + 3), .tt_table dl dd:nth-of-type(n + 3) {
+        width: 50px;
+        text-align: center;
+    }
+    .tt_table dl dt:nth-last-child(1), .tt_table dl dd:nth-last-child(1) {
+        width: 130px;
+        text-align: center;
+    }
+    .tt_table dl dt:nth-last-child(2), .tt_table dl dd:nth-last-child(2) {
+        width: 130px;
+        text-align: center;
+    }
+
+</style>
+
+<style>
+    .tt_table_wrap {
+        width: 100%;
+        height: 100%;
+        overflow: auto;
+        /*position: relative;*/
+
+    }
+
+    .tt_table {
+        position: relative;
+        padding-top: 30px;
+        font-size: 13px;
+    }
+
+    .tt_table>.tt_table_head {
+        position: absolute;
+        top: 0;
+        height: 30px;
+        background: #f5f5f5;
+        /*width: 100%;*/
+        line-height: 30px;
+        z-index: 1;
+
+    }
+
+    .tt_table>.tt_table_head dl {
+        border-bottom: 0;
+    }
+
+    .tt_table>.tt_table_head dl dt {
+        font-weight: normal;
+        font-size: 12px;
+    }
+
+    .tt_table>.tt_table_body {
+        /*width: 100%;*/
+
+        position: absolute;
+
+        border-bottom: 1px solid #dedede;
+    }
+
+    .tt_table dl {
+        display: block;
+        /*width: 100%;*/
+        margin: 0;
+        /*border-bottom: 1px solid;*/
+        height: 30px;
+        cursor: default;
+    }
+
+    .tt_table>.tt_table_body dl:hover, .tt_table>.tt_table_body dl.context-menu-active {
+        box-shadow: 0 0 4px #656c71;
+        background: #f5fbff;
+    }
+
+    .tt_table dl dd, .tt_table dl dt {
+        display: inline-block;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        height: 100%;
+        line-height: 30px;
+        border-right: 1px solid;
+        text-indent: 5px;
+    }
+
+    .tt_table_wrap {
+        /*border: 1px solid #e6e6e6;*/
+        border-left: 0;
+    }
+
+    .tt_table>.tt_table_head {
+        border-bottom: 2px solid #96b9d7;
+    }
+
+    .tt_table dl {
+        font-size: 0;
+        white-space: nowrap;
+    }
+
+    .tt_table dl dd, .tt_table dl dt {
+        border-right-color: #dedede;
+        font-size: 13px;
+        /*border-bottom: 1px solid #dedede;*/
+        border-top: 1px solid #dedede;
+    }
+    .tt_table dl{
+        transition: all .1s ease;
+    }
+
+    .tt_table dd {
+        color: #2765A7;
+    }
+
+    .tt_table dd.active {
+        /*background: #8baabf !important;*/
+        /*color: white;*/
+        border: 2px solid #09284a;
+    }
+
+    .tt_table dd.error {
+        background: #e43a45 !important;
+        color: white;
+    }
+    .tt_table dd.ists {
+        background: #105383 !important;
+        color: white;
+    }
+    .tt_table dd.region {
+        background: #686d7b !important;
+        color: white;
+    }
+    .tt_table dd.isfb {
+        background: #adff00 !important;
+        color: #501a1a;
+    }
+
+    .tt_table_no_border .tt_table>.tt_table_head dl dt {
+        font-weight: 600;
+        font-size: 13px;
+    }
+    .tt_table_no_border .tt_table dl dd,.tt_table_no_border .tt_table dl dt {
+        font-size: 14px;
+        border-right: 0;
+    }
+
+
+
+</style>
+
+<style>
+    .table_scrollbar::-webkit-scrollbar {
+        width: 18px;
+        height: 18px;
+    }
+
+    .table_scrollbar::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb {
+        border-radius: 999px;
+        border: 5px solid transparent;
+    }
+
+    .table_scrollbar::-webkit-scrollbar-track {
+        box-shadow: 1px 1px 5px rgba(0, 0, 0, .2) inset;
+    }
+
+    .table_scrollbar::-webkit-scrollbar-thumb {
+        min-height: 20px;
+        background-clip: content-box;
+        box-shadow: 0 0 0 5px rgba(0, 0, 0, .2) inset;
+    }
+
+    .table_scrollbar::-webkit-scrollbar-corner {
+        background: transparent;
+    }
+</style>
+
+<style>
+    /* Specify styling for tooltip contents */
+    .tooltip.headClass .tooltip-inner {
+        color: #880000;
+        background-color: #ffff66;
+        box-shadow: 0 6px 12px rgba(0,0,0,.175);
+    }
+    /* Hide arrow */
+    .tooltip.headClass .tooltip-arrow {
+        display: none;
+    }
+</style>
+
+<style>
+    /**
+     针对 <div class="tt_table_head" style="z-index: 110; top: 0;"> 下的dt样式指定
+    */
+
+    /** 路牌 */
+    .tt_table_head dl dt:nth-of-type(2) {
+        width: 55px;
+        text-align: center;
+    }
+    /*!** 班型1 *!*/
+    /*.tt_table_head dl dt:nth-of-type(3) {*/
+    /*width: 60px;*/
+    /*text-align: center;*/
+    /*}*/
+    /*!** 班型2 *!*/
+    /*.tt_table_head dl dt:nth-of-type(4) {*/
+    /*width: 60px;*/
+    /*text-align: center;*/
+    /*}*/
+</style>
+
+
+<div class="ttInfo_detail">
+    <div class="container-fluid top-container">
+        <div class="col-md-12 container-fluid schedule-wrap">
+            <div class="col-md-12" style="height: 100%">
+                <div class="detail-panel">
+                    <div class="detail-wrap up">
+                        <!--<h3 class="header-title">-->
+                        <!--{{$saTimeTableCtrl.ds.yydesc}}-->
+                        <!--</h3>-->
+
+                        <div class="detail-body">
+                            <div class="tt_table_wrap table_scrollbar" sa-tscrolly1>
+                                <div class="tt_table">
+
+                                    <div class="tt_table_head" style="z-index: 120; top: 0;">
+                                        <dl style="height: 36px; border-bottom: 2px solid #96b9d7;">
+                                            <dt style="width: 50px; text-align: center;">
+                                                序号
+                                            </dt>
+
+                                            <dt style="width: 55px; border-right: 2px solid #96b9d7;">
+                                                路牌
+                                            </dt>
+
+                                        </dl>
+                                    </div>
+
+
+                                    <div class="tt_table_head" style="z-index: 110; top: 0;">
+                                        <dl>
+                                            <dt>
+                                                序号
+                                            </dt>
+
+                                            <dt ng-repeat="head in $saPlanInfoViewCtrl.ds.header track by $index">
+                                                {{(head != '路牌' && head != '驾驶员' && head != '车牌号') ? (head.substr(0, 1) + ($index)): head}}
+                                            </dt>
+                                        </dl>
+                                    </div>
+
+                                    <div class="tt_table_body" style="z-index: 100; background: white;">
+                                        <dl ng-repeat="info in $saPlanInfoViewCtrl.ds.contents track by $index"
+                                            ng-init="rowIndex = $index">
+
+                                            <dd style="width: 50px;">
+                                                {{rowIndex + 1}}
+                                            </dd>
+
+                                            <dd ng-repeat="cell in info track by $index"
+                                                ng-init="colIndex = $index"
+                                                ng-if="$index == 0" style="width: 55px; border-right: 2px solid #96b9d7;">
+                                                {{cell.fcsj}}
+                                            </dd>
+
+                                        </dl>
+                                    </div>
+
+                                    <div class="tt_table_body">
+                                        <dl ng-repeat="info in $saPlanInfoViewCtrl.ds.contents track by $index"
+                                            ng-init="rowIndex = $index">
+
+                                            <dd>
+                                                {{rowIndex + 1}}
+                                            </dd>
+
+                                            <dd>
+                                                路牌
+                                            </dd>
+
+                                            <dd ng-repeat="cell in info track by $index"
+                                                ng-init="colIndex = $index"
+                                                ng-if="$index > 0"
+                                                ng-class="{
+                                                    lpName: true,
+                                                    error: false,
+                                                    active: false,
+                                                    ists: false,
+                                                    region: false,
+                                                    isfb: false
+                                                    }">
+                                                {{cell.fcsj}}
+                                            </dd>
+
+                                        </dl>
+
+                                    </div>
+
+                                </div>
+
+
+                            </div>
+
+                        </div>
+
+                        <!--TODO-->
+                    </div>
+
+                </div>
+            </div>
+
+
+        </div>
+
+
+
+    </div>
+
+</div>
@@ -6607,4 +6607,59 @@ angular.module(&#39;ScheduleApp&#39;).directive(
             };
         }
     ]
-);
 \ No newline at end of file
+);
+/**
+ * saPlanInfoView指令，排班明细显示指令（以类似时刻表的形式显示）
+ */
+angular.module('ScheduleApp').directive(
+    'saPlaninfoview',
+    [
+        '$compile',
+        '$window',
+        '$timeout',
+        function($compile, $window, $timeout) {
+            return {
+                restrict: 'E',
+                templateUrl: '/pages/scheduleApp/module/common/dts2/scheduleplan/saPlanInfoViewTemplate.html',
+                scope: { // 独立作用域
+                    ds: "=ngModel"
+                },
+                controllerAs: "$saPlanInfoViewCtrl",
+                bindToController: true,
+                controller: function() {
+                    var self = this;
+                    // TODO：
+
+                },
+                /**
+                 * compile阶段，angular还没有编译模版，根据需要可以修改模版dom
+                 * @param tElem
+                 * @param tAttrs
+                 * @returns {{pre: Function, post: Function}}
+                 */
+                compile: function(tElem, tAttrs) {
+                    // 获取属性
+                    var $attr_name = tAttrs["name"]; // 控件的名字
+                    if (!$attr_name) {
+                        throw new Error("saPlanInfoView指令 name属性required");
+                    }
+
+                    // 内部controlAs名字
+                    var ctrlAs = '$saTimeTableCtrl';
+
+                    return {
+                        pre: function(scope, element, attr) {
+                            // TODO：
+
+                        },
+                        post: function(scope, element, attr) {
+                            // TODO：
+                        }
+
+                    };
+
+                }
+            };
+        }
+    ]
+);
@@ -720,9 +720,30 @@ angular.module(&#39;ScheduleApp&#39;).factory(&#39;SchedulePlanInfoManageService_g&#39;, [&#39;$reso
                     }
                 }
             }
+        ),
+
+        getSaPlanInfoViewData: $resource(
+            '/spic/saPlanInfoView/data/:xlid/:sdate',
+            {},
+            {
+                list: {
+                    method: 'GET',
+                    isArray: false,
+                    transformResponse: function(rs) {
+                        var dst = angular.fromJson(rs);
+                        if (dst.status == 'SUCCESS') {
+                            return dst.data;
+                        } else {
+                            return dst; // 业务错误留给控制器处理
+                        }
+                    }
+                }
+            }
         )
+
+
     };
 }]);
@@ -4,39 +4,58 @@
     <div class="portlet">
         <div class="portlet-title">
             <div class="caption caption-subject font-red-sunglo bold uppercase">
+                <span ng-bind="ctrl.searchCondition().xlname"></span>
                 最近排班至
                 <span ng-bind="ctrl.lsd | date: 'yyyy年MM月dd日'">
-        </span>
+                </span>
+                当前排班日期
+                <span ng-bind="ctrl.searchCondition().sdate | date: 'yyyy年MM月dd日'"></span>
+            </div>
+
+            <div class="actions">
+                <div class="btn-group">
+                    <button class="btn btn-sm green btn-outline filter-submit margin-bottom" style="margin-right: 0;"
+                            ng-click="ctrl.switchView()">
+                        <i class="fa fa-search"></i> 切换视图
+                    </button>
+                </div>
+
             </div>
         </div>
     </div>
-    <div class="fixDiv">
+    <div ng-if="ctrl.viewId == 1" style="height: {{ctrl.ttHeight}}px;">
+        <sa-Planinfoview name="saPlanView" ng-model="ctrl.saPlanInfoViewData.infos" ng-model-options="{ getterSetter: true }" >
+        </sa-Planinfoview>
+    </div>
+
+    <div class="fixDiv" ng-if="ctrl.viewId == 0">
         <table class="fixTable table table-striped table-bordered table-hover table-checkable order-column"
-               style="width: 1600px; min-height: 500px;">
+               style="width: 1600px; min-height: 320px;">
             <thead>
             <tr role="row" class="heading">
-                <th style="width: 70px;">序号</th>
-                <th style="width: 80px;">操作</th>
-                <th style="width: 170px;">操作人/操作时间</th>
-                <th style="width: 180px;">线路</th>
-                <th style="width: 180px">日期</th>
-                <th style="width: 50px">路牌</th>
-                <th style="width: 100px;">车辆</th>
-                <th style="width: 80px;">出场时间</th>
-                <th style="width: 80px;">进场时间</th>
-                <th style="width: 150px;">驾驶员</th>
-                <th style="width: 150px;">售票员</th>
-                <th>关联时刻表</th>
+                <th style="width: 70px; max-width: 70px;white-space: pre-wrap;word-wrap: break-word;text-align: center;vertical-align: middle;">序号</th>
+                <th style="width: 100px; white-space: pre-wrap;word-wrap: break-word;text-align: center;vertical-align: middle;">操作</th>
+                <th style="width: 170px; white-space: pre-wrap;word-wrap: break-word;text-align: center;vertical-align: middle;">操作人/操作时间</th>
+                <th style="width: 150px; white-space: pre-wrap;word-wrap: break-word;text-align: center;vertical-align: middle;">线路</th>
+                <th style="width: 150px; white-space: pre-wrap;word-wrap: break-word;text-align: center;vertical-align: middle;">日期</th>
+                <th style="width: 70px; white-space: pre-wrap;word-wrap: break-word;text-align: center;vertical-align: middle;">路牌</th>
+                <th style="width: 100px; white-space: pre-wrap;word-wrap: break-word;text-align: center;vertical-align: middle;">车辆</th>
+                <th style="width: 100px; white-space: pre-wrap;word-wrap: break-word;text-align: center;vertical-align: middle;">出场时间</th>
+                <th style="width: 100px; white-space: pre-wrap;word-wrap: break-word;text-align: center;vertical-align: middle;">进场时间</th>
+                <th style="width: 150px; white-space: pre-wrap;word-wrap: break-word;text-align: center;vertical-align: middle;">驾驶员</th>
+                <th style="width: 150px; white-space: pre-wrap;word-wrap: break-word;text-align: center;vertical-align: middle;">售票员</th>
+                <th style="width: 290px; white-space: pre-wrap;word-wrap: break-word;text-align: center;vertical-align: middle;">关联时刻表</th>
             </tr>
             <tr role="row" class="filter">
                 <td></td>
-                <td></td>
+                <td>
+                </td>
                 <td></td>
                 <td>
                     <sa-Select5 name="xl"
                                 model="ctrl.searchCondition()"
-                                cmaps="{'xlid': 'id'}"
+                                cmaps="{'xlid': 'id', 'xlname': 'name'}"
                                 dcname="xlid"
                                 icname="id"
                                 dsparams="{{ {type: 'ajax', param:{type: 'all', 'destroy_eq': 0}, atype:'xl' } | json }}"
@@ -196,4 +215,4 @@
         </table>
     </div>
-</div>
 \ No newline at end of file
+</div>
@@ -70,6 +70,22 @@ angular.module(&#39;ScheduleApp&#39;).factory(
                 },
                 /**
+                 * 获取SaPlanInfoViewData显示用数据。
+                 * @param params 查询参数
+                 * @return 返回一个 promise
+                 */
+                getSaPlanInfoViewData: function() {
+                    if (!currentSearchCondition['xlid']) {
+                        return null;
+                    }
+                    if (!currentSearchCondition['sdate']) {
+                        return null;
+                    }
+                    return service.getSaPlanInfoViewData.list(currentSearchCondition).$promise;
+
+                },
+
+                /**
                  * 批量保存排班明细。
                  * @param rs
                  */
@@ -175,7 +191,8 @@ angular.module(&#39;ScheduleApp&#39;).controller(
         'SchedulePlanReportExtManageService',
         '$scope',
         '$state',
-        function(service, $scope, $state) {
+        '$window',
+        function(service, $scope, $state, $window) {
             var self = this;
             self.pageInfo = {
@@ -270,6 +287,32 @@ angular.module(&#39;ScheduleApp&#39;).controller(
             //// 初始创建的时候，获取一次列表数据
             //self.pageChanaged();
+            self.saPlanInfoViewData = {
+                infos: {}
+            };
+            self.viewId = 0;
+            self.switchView = function() {
+                if (self.viewId === 0) {
+                    self.viewId = 1;
+                    if (service.getSaPlanInfoViewData() != null) {
+                        service.getSaPlanInfoViewData().then(
+                            function(rst) {
+                                self.saPlanInfoViewData.infos = rst;
+                                console.log(rst);
+                            },
+                            function(err) {
+
+                            }
+                        );
+                    }
+                } else {
+                    self.viewId = 0;
+                }
+            };
+
+            self.ttHeight = 500; // sa-Planinfoview组件的高度
+
+
         }
     ]
@@ -174,8 +174,29 @@ angular.module(&#39;ScheduleApp&#39;).factory(&#39;SchedulePlanInfoManageService_g&#39;, [&#39;$reso
                     }
                 }
             }
+        ),
+
+        getSaPlanInfoViewData: $resource(
+            '/spic/saPlanInfoView/data/:xlid/:sdate',
+            {},
+            {
+                list: {
+                    method: 'GET',
+                    isArray: false,
+                    transformResponse: function(rs) {
+                        var dst = angular.fromJson(rs);
+                        if (dst.status == 'SUCCESS') {
+                            return dst.data;
+                        } else {
+                            return dst; // 业务错误留给控制器处理
+                        }
+                    }
+                }
+            }
         )
+
+
     };
 }]);