指标库 no.7 up

app/base/base_service.js

@@ -127,6 +127,19 @@ class BaseService extends Service {
         return list;
     }
 
-
+    /**
+     * 在事务中写入数据
+     *
+     * @param {Array|Object} datas
+     * @param transaction - 事务
+     * @returns {Promise<void>}
+     */
+    async insertData(data, transaction) {
+        const datas = data instanceof Array ? data : [data];
+        const insertResult = await transaction.insert(this.tableName, datas);
+        if (insertResult.affectedRows !== datas.length) {
+            throw '写入错误';
+        }
+    }
 }
 module.exports = BaseService;

app/const/template_param.js

@@ -59,7 +59,7 @@ const defaultGlobalParams = [
         code: 'g_b',
         name: '建安费',
         match_type: matchType.fixed_id,
-        match_id: '1',
+        match_key: '1',
         match_num: matchNum.total_price,
     },{
         template_id: 1,
@@ -68,7 +68,7 @@ const defaultGlobalParams = [
         code: 'g_c',
         name: '工程建设其他费用',
         match_type: matchType.fixed_id,
-        match_id: '3',
+        match_key: '3',
         match_num: matchNum.total_price,
     },{
         template_id: 1,

app/controller/lib_controller.js

@@ -100,12 +100,12 @@ module.exports = app => {
         }
 
         /**
-         * 指标源全局参数详细页面
+         * 指标源全局参数页面
          *
          * @param {object} ctx - egg全局context
          * @return {void}
          */
-        async detail (ctx) {
+        async global (ctx) {
             let lid = ctx.params.id;
             lid = parseInt(lid);
 
@@ -115,14 +115,21 @@ module.exports = app => {
                 }
                 //获取指标源数据
                 const libInfo = await ctx.service.quotaLib.getLibDataById(lid);
-                // if(libInfo.status === libConst.status.enter){
-                //     throw '指标源已入库';
-                // }
+
+                //获取全局指标参数
+                const condition = {
+                    where: {
+                        lib_id: lid,
+                        node_id: 0,
+                    }
+                }
+                const globalParams = await ctx.service.tenderParam.getAllDataByCondition(condition);
                 const renderData = {
                     libInfo,
-                    libConst
+                    libConst,
+                    globalParams,
                 };
-                await this.layout('lib/detail.ejs', renderData);
+                await this.layout('lib/global.ejs', renderData);
             } catch (error) {
                 console.log(error);
                 ctx.redirect('/lib');
@@ -130,12 +137,12 @@ module.exports = app => {
         }
 
         /**
-         * 指标源项目节参数详细页面
+         * 指标源详细页面
          *
          * @param {object} ctx - egg全局context
          * @return {void}
          */
-        async detail2 (ctx) {
+        async detail (ctx) {
             let lid = ctx.params.id;
             lid = parseInt(lid);
 
@@ -145,27 +152,51 @@ module.exports = app => {
                 }
                 //获取指标源数据
                 const libInfo = await ctx.service.quotaLib.getLibDataById(lid);
+                const billsData = await ctx.service.bills.getDataByLibId(lid);
                 // if(libInfo.status === libConst.status.enter){
                 //     throw '指标源已入库';
                 // }
 
                 //获取项目节编号
-                let billsList = {};
-                if(libInfo){
-                    billsList = await ctx.service.quotaBills.getListByLid(lid);
-                }
+                // const billsList = await ctx.service.bills.getListById(lid);
                 const renderData = {
                     libInfo,
                     libConst,
-                    billsList
+                    billsData: JSON.stringify(billsData),
                 };
-                await this.layout('lib/detail2.ejs', renderData, 'lib/detail-modal.ejs');
+                await this.layout('lib/detail.ejs', renderData, 'lib/detail-modal.ejs');
             } catch (error) {
                 console.log(error);
                 ctx.redirect('/lib');
             }
         }
 
+        async getChildren(ctx) {
+            const responseData = {
+                err: 0,
+                msg: '',
+                data: [],
+            };
+            try {
+                const data = JSON.parse(ctx.request.body.data);
+                const libId = data.lib_id;
+                if (!libId) {
+                    throw '当前未打开指标源';
+                }
+                const id = data.n_id;
+                if (isNaN(id) || id <= 0) {
+                    throw '参数错误';
+                }
+
+                responseData.data = await ctx.service.bills.getChildrenByParentId(libId, id);
+            } catch (err) {
+                responseData.err = 1;
+                responseData.msg = err.toString();
+            }
+
+            ctx.body = responseData;
+        }
+
         /**
          * 删除指标源
          *

app/public/css/spreadjs/sheets/gc.spread.sheets.excel2013darkGray.10.0.1.css

@@ -0,0 +1,855 @@
+/*-----common css start-----*/
+.gc-theme-version {
+    position: absolute;
+    z-index: 2013;
+}
+.gc-grayArea {
+    background-color: #dedede;
+}
+.gc-corner-hover {
+    background-color: #dedede;
+}
+.gc-corner-selected {
+    background-color: #dedede;
+}
+.gc-corner-normal {
+    background-color: #dedede;
+}
+.gc-corner-triangle-normal {
+    background-color: #b3b3b3;
+    background-image: -webkit-linear-gradient(top, #b3b3b3, #b3b3b3); /* For Chrome and Safari */
+    background-image:    -moz-linear-gradient(top, #b3b3b3, #b3b3b3); /* For old Fx (3.6 to 15) */
+    background-image:     -ms-linear-gradient(top, #b3b3b3, #b3b3b3); /* For pre-releases of IE 10*/
+    background-image:      -o-linear-gradient(top, #b3b3b3, #b3b3b3); /* For old Opera (11.1 to 12.0) */
+    background-image:         linear-gradient(to bottom, #b3b3b3, #b3b3b3); /* Standard syntax; must be last */
+    border-style:solid;
+    border-left-color: #d2d2d2 !important;
+    border-right-color: #9c9c9c !important;
+    border-top-color: #d2d2d2 !important;
+    border-bottom-color: #9c9c9c !important;
+}
+.gc-corner-triangle-hover {
+    background-color: #9e9e9e;
+    background-image: -webkit-linear-gradient(top, #9e9e9e, #9e9e9e); /* For Chrome and Safari */
+    background-image:    -moz-linear-gradient(top, #9e9e9e, #9e9e9e); /* For old Fx (3.6 to 15) */
+    background-image:     -ms-linear-gradient(top, #9e9e9e, #9e9e9e); /* For pre-releases of IE 10*/
+    background-image:      -o-linear-gradient(top, #9e9e9e, #9e9e9e); /* For old Opera (11.1 to 12.0) */
+    background-image:         linear-gradient(to bottom, #9e9e9e, #9e9e9e); /* Standard syntax; must be last */
+    border-style:solid;
+    border-left-color: #d2d2d2 !important;
+    border-right-color: #9c9c9c !important;
+    border-top-color: #d2d2d2 !important;
+    border-bottom-color: #9c9c9c !important;
+}
+.gc-corner-triangle-selected {
+    background-color: #217346;
+    background-image: -webkit-linear-gradient(top, #217346, #217346); /* For Chrome and Safari */
+    background-image:    -moz-linear-gradient(top, #217346, #217346); /* For old Fx (3.6 to 15) */
+    background-image:     -ms-linear-gradient(top, #217346, #217346); /* For pre-releases of IE 10*/
+    background-image:      -o-linear-gradient(top, #217346, #217346); /* For old Opera (11.1 to 12.0) */
+    background-image:         linear-gradient(to bottom, #217346, #217346); /* Standard syntax; must be last */
+    border-style:solid;
+    border-left-color: #d2d2d2 !important;
+    border-right-color: #9c9c9c !important;
+    border-top-color: #d2d2d2 !important;
+    border-bottom-color: #9c9c9c !important;
+}
+.gc-columnHeader-normal {
+    color: black;
+    background-image: none;
+    background-color: #dedede;
+    border-style:solid;
+    border-left-color: #d2d2d2 !important;
+    border-right-color: #9c9c9c !important;
+    border-bottom-color: #999999 !important;
+}
+.gc-columnHeader-hover {
+    color: black;
+    background-image: none;
+    background-color: #9fd5b7;
+    border-style:solid;
+    border-left-color: #d2d2d2 !important;
+    border-right-color: #9c9c9c !important;
+    border-bottom-color: #999999 !important;
+}
+.gc-columnHeader-selected {
+    color: #217346;
+    background-image: none;
+    background-color: #d3f0e0;
+    border-style:solid;
+    border-left-color: #d2d2d2 !important;
+    border-right-color: #9c9c9c !important;
+    border-bottom-color: #999999 !important;
+}
+.gc-columnHeader-highlight {
+    color: #217346;
+    background-image: none;
+    background-color: #bdbdbd;
+    border-style:solid;
+    border-left-color: #d2d2d2 !important;
+    border-right-color: #9c9c9c !important;
+    border-bottom-color: #999999 !important;
+}
+.gc-rowHeader-normal {
+    color: black;
+    background-color: #dedede;
+    background-image: none;
+    border-style:solid;
+    border-top-color: #d2d2d2 !important;
+    border-bottom-color: #9c9c9c !important;
+    border-right-color: #999999 !important;
+}
+.gc-rowHeader-hover {
+    color: black;
+    background-color: #9fd5b7;
+    background-image: none;
+    border-style:solid;
+    border-top-color: #d2d2d2 !important;
+    border-bottom-color: #9c9c9c !important;
+    border-right-color: #999999 !important;
+}
+.gc-rowHeader-selected {
+    color: #217346;
+    background-color: #d3f0e0;
+    background-image: none;
+    border-style:solid;
+    border-top-color: #d2d2d2 !important;
+    border-bottom-color: #9c9c9c !important;
+    border-right-color: #999999 !important;
+}
+.gc-rowHeader-highlight {
+    color: #217346;
+    background-color: #bdbdbd;
+    background-image: none;
+    border-style:solid;
+    border-top-color: #d2d2d2 !important;
+    border-bottom-color: #9c9c9c !important;
+    border-right-color: #999999 !important;
+}
+.gc-horizontal-scrollbar {
+    box-sizing:content-box;
+    background: #dedede;
+    border-top: 1px solid #999999;
+    height: 18px;
+    padding: 4px 0px 5px 0px;
+    margin: 0;
+}
+.gc-vertical-scrollbar {
+    box-sizing:content-box;
+    background: #dedede;
+    border-left: 1px solid #999999;
+    width: 18px;
+    padding: 0px 5px 0px 4px;
+    margin: 0;
+}
+.gc-footer-corner {
+    background-color: #dedede;
+}
+.gc-selection {
+    background-color: rgba(20, 20, 20, 0.2);
+    border-color: #217346;
+    color: rgba(240,240,240,0.7);
+}
+.gc-drag-indicator {
+    border-color: #217346;
+}
+.gc-gridlineColor {
+    border-color: #d4d4d4;
+}
+.gc-group {
+    background-color: #dedede;
+    color: #999999;
+}
+.gc-group-box {
+    background-color: #dedede;
+    color: #464646;
+    border-color: #828790;
+}
+
+.gc-tabStripNewTab-highlight {
+    border-color: #525252;
+}
+.gc-tabStripNewTab-hover {
+    border-color: #439467;
+}
+.gc-tabStripBackground {
+    background-image: -webkit-linear-gradient(top, #dedede, #dedede); /* For Chrome and Safari */
+    background-image:    -moz-linear-gradient(top, #dedede, #dedede); /* For old Fx (3.6 to 15) */
+    background-image:     -ms-linear-gradient(top, #dedede, #dedede); /* For pre-releases of IE 10*/
+    background-image:      -o-linear-gradient(top, #dedede, #dedede); /* For old Opera (11.1 to 12.0) */
+    background-image:         linear-gradient(to bottom, #dedede, #dedede); /* Standard syntax; must be last */
+    background-color: #dedede;
+    border-color: #999999;
+}
+.gc-tabStripResizeBarInner {
+    color: #5e5e5e;
+}
+.gc-navMoreButton-highlight {
+    border-color: #5e5e5e;
+}
+.gc-navMoreButton-hover {
+    border-color: #439467;
+}
+.gc-navButton-hover {
+    border-color: #439467;
+}
+.gc-navButton-highlight {
+    border-color: #525252;
+}
+.gc-navButton-normal {
+    border-color: #9e9e9e;
+}
+.gc-tab-normal {
+    color: #262626;
+    background-image: none;
+    background-color: transparent;
+    border-style: solid;
+    border-left-color: #999999;
+    border-bottom-color: #217346;
+}
+.gc-tab-hover {
+    color: #252627;
+    background-image: none;
+    background-color: transparent;
+    border-style: solid;
+    border-left-color: #999999;
+    border-bottom-color: #217346;
+}
+.gc-tab-active {
+    color: #217346;
+    background-image: none;
+    background-color: white;
+    border-style: solid;
+    border-left-color: #ababab;
+    border-bottom-color: #217346;
+}
+
+.gc-rowHeaderFill {
+    background-color: #e4ecf7;
+}
+.gc-colHeaderFill {
+    background-image: -webkit-linear-gradient(top, #F6FAFB 12.5%, #D2DBEB); /* For Chrome and Safari */
+    background-image:    -moz-linear-gradient(top, #F6FAFB 12.5%, #D2DBEB); /* For old Fx (3.6 to 15) */
+    background-image:     -ms-linear-gradient(top, #F6FAFB 12.5%, #D2DBEB); /* For pre-releases of IE 10*/
+    background-image:      -o-linear-gradient(top, #F6FAFB 12.5%, #D2DBEB); /* For old Opera (11.1 to 12.0) */
+    background-image:         linear-gradient(to bottom, #F6FAFB 12.5%, #D2DBEB); /* Standard syntax; must be last */
+    background-color: #D2DBEB;
+}
+
+.gc-gradientButton {
+    background-color: #DDDDDD; /* fallback color if gradients are not supported */
+    background-image: -webkit-linear-gradient(top, #F6FAFB, #D2DBEB); /* For Chrome and Safari */
+    background-image:    -moz-linear-gradient(top, #F6FAFB, #D2DBEB); /* For old Fx (3.6 to 15) */
+    background-image:     -ms-linear-gradient(top, #F6FAFB, #D2DBEB); /* For pre-releases of IE 10*/
+    background-image:      -o-linear-gradient(top, #F6FAFB, #D2DBEB); /* For old Opera (11.1 to 12.0) */
+    background-image:         linear-gradient(to bottom, #F6FAFB, #D2DBEB); /* Standard syntax; must be last */
+}
+
+.gc-sheetTabEditor::-ms-clear {
+    display: none;
+}
+
+
+.gc-layout-table {
+    font-size:12px;
+    width:100%;
+    height:100%;
+    font-family:Lucida Grande, Lucida Sans, Arial, sans-serif;
+}
+
+.gc-layout-table-first-column {
+    width:21px;
+    border-right:1px solid #CCC;
+    text-align:right;
+    padding-top:7px;
+}
+
+.gc-layout-table-last-column {
+    width:18px;
+}
+
+.gc-filter-sort-desc-container {
+    border-bottom:1px solid #CCC;
+}
+
+.gc-filter-item-wrapper {
+}
+
+
+.gc-filter-dialog-style {
+    background:#fcfdfd;
+    font-family:Lucida Grande, Lucida Sans, Arial, sans-serif;
+    font-size:12px;
+    border:1px solid #a7abb0;
+}
+
+.gc-search-outer-div {
+    border: none;
+    margin:4px 0px 0px 4px;
+    background-color: white;
+    background-image: none;
+    color:#1e395b;
+    font-weight:normal;
+}
+
+div.gc-search-outer-div input::-ms-clear{
+   display:none;
+}
+
+#gc-filterSearch {
+    width:165px;
+    height:21px;
+    border:1px solid #ababab;
+    margin-left:7px;
+    margin-top:4px;
+    margin-bottom: 0px;
+    padding: 0;
+    font-size: 1em;
+    background-color:white;
+    color:black;
+    float:none;
+}
+#gc-filterSearch:hover,
+#gc-filterSearch:active{
+    background-color:white;
+}
+
+.gc-check-uncheck-all {
+    float:left;
+    width:16px;
+    height:16px;
+    display:inline-block;
+}
+.gc-filter-check-outerDiv .gc-check-image,
+.gc-fill-type-item .gc-check-image {
+    background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjExR/NCNwAAAGxJREFUOE+ljsENgDAMAzsaQ3QMxP4/wAhXwTKhEY9TlZOdtK1b/4WVFaysYGUFKxMWdY/hA5T3+x0+BjJYJmOJBoF+87UMYhAwzFBaBnFwYZ1j/kKFltIycHLqMrHyhEvSMrCygpUVrJyntwPdKU02VXQw7gAAAABJRU5ErkJggg==);
+}
+.gc-filter-check-outerDiv .gc-uncheck-image,
+.gc-fill-type-item .gc-uncheck-image {
+    background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjExR/NCNwAAAIJJREFUOE+lkssNgDAMQzsCw3UMxEocGKWDQSLVUj5GJeLwhPyI0x7a9qP/gsoKVFagskIUm3ALp3GKZvX63/q0QIcAlqAMXMcFIQ6z7DouTGLptawkMVmeDJi8BFsGQ0jzUcRyvEla4oLAhvVrveu4IOAdxJOwZPkOylBZgcrv9PYAV9tkcyJlS4sAAAAASUVORK5CYII=);
+}
+.gc-check-image,
+.gc-uncheck-image {
+    background-position:center;
+}
+
+.gc-filter-check-outerDiv {
+    height:18px;
+    margin-top:4px;
+}
+
+a.gc-filter-check-style {
+    color:#1e395b;
+    text-shadow:none;
+}
+
+a.gc-filter-check {
+    text-decoration: none;
+}
+
+a.gc-filter-check:hover {
+    text-decoration:underline;
+}
+#gc-sortASC:hover,
+#gc-sortASC:active {
+    border-color: #e3e3e3;
+    outline: none;
+    -webkit-box-shadow: none;
+            box-shadow: none;  
+}
+.gc-filter-sort {
+    border:1px solid transparent;
+    font-weight:normal;
+    color:#222222;
+}
+
+.gc-filter-hover {
+    border-radius: 3px;
+    outline:none;
+}
+
+.gc-filter-item {
+    position: relative;
+    cursor: default;
+    font-weight:normal;
+    border-style: solid;
+    border-color: transparent;
+}
+
+.gc-filter-item-container {
+    border:1px solid #a7abb0;
+    border-radius:3px;
+    margin:4px 0px 4px 4px;
+    overflow:hidden;
+}
+
+.gc-filter-item-input {
+    float: left;
+    clear: left;
+}
+
+.gc-filter-item-text {
+    font-family: Lucida Grande,Lucida Sans,Arial,sans-serif;
+    font-size: 12px;
+    margin: 2px;
+    white-space:nowrap;
+    word-wrap:normal;
+    float: left;
+    clear: right;
+}
+
+.gc-filter-button {
+    width:90px;
+    height:27px;
+    border-radius:3px;
+    margin:2px 1px 5px;
+}
+
+.gc-filter-button-disable {
+    opacity:.35;
+    background-image:none;
+}
+
+#gc-filterOK {
+    margin-left: 13px;
+    margin-bottom: 5px;
+    float: left;
+}
+#gc-filterCancel {
+    margin-bottom: 5px;
+    float: left;
+}
+
+.gc-filter-button-default {
+    border:1px solid #acacac;
+    border-radius: 0;
+    background-image: -webkit-linear-gradient(top, #f0f0f0, #e5e5e5); /* For Chrome and Safari */
+    background-image:    -moz-linear-gradient(top, #f0f0f0, #e5e5e5); /* For old Fx (3.6 to 15) */
+    background-image:     -ms-linear-gradient(top, #f0f0f0, #e5e5e5); /* For pre-releases of IE 10*/
+    background-image:      -o-linear-gradient(top, #f0f0f0, #e5e5e5); /* For old Opera (11.1 to 12.0) */
+    background-image:         linear-gradient(to bottom, #f0f0f0, #e5e5e5); /* Standard syntax; must be last */
+    font-weight:normal;
+    color: black;
+}
+
+.gc-filter-button-hover {
+    border:1px solid #7eb4ea;
+    border-radius: 0;
+    background-color: #d3f0e0;
+    background-image: -webkit-linear-gradient(top, #ecf4fc, #dcecfc); /* For Chrome and Safari */
+    background-image:    -moz-linear-gradient(top, #ecf4fc, #dcecfc); /* For old Fx (3.6 to 15) */
+    background-image:     -ms-linear-gradient(top, #ecf4fc, #dcecfc); /* For pre-releases of IE 10*/
+    background-image:      -o-linear-gradient(top, #ecf4fc, #dcecfc); /* For old Opera (11.1 to 12.0) */
+    background-image:         linear-gradient(to bottom, #ecf4fc, #dcecfc); /* Standard syntax; must be last */
+    color: black;
+    font-weight:normal;
+    text-shadow:none;
+    cursor:pointer;
+}
+
+.gc-filter-button-active {
+    border:1px solid #569de5;
+    border-radius: 0;
+    background-color: #ffe475;    background-image: -webkit-linear-gradient(top, #daecfc, #c4e0fc); /* For Chrome and Safari */
+    background-image:    -moz-linear-gradient(top, #daecfc, #c4e0fc); /* For old Fx (3.6 to 15) */
+    background-image:     -ms-linear-gradient(top, #daecfc, #c4e0fc); /* For pre-releases of IE 10*/
+    background-image:      -o-linear-gradient(top, #daecfc, #c4e0fc); /* For old Opera (11.1 to 12.0) */
+    background-image:         linear-gradient(to bottom, #daecfc, #c4e0fc); /* Standard syntax; must be last */
+    font-weight:normal;
+    color: black;
+    -webkit-box-shadow: none;
+          box-shadow: none;
+}
+
+.gc-filter-item-hover {
+    border:1px solid transparent;
+    background-color: #d3f0e0;
+    background-image: none;
+    color:#1d5987;
+    font-weight:normal;
+    text-shadow:none;
+}
+
+.gc-smartMenu-item-default {
+    border:1px solid transparent;
+    background-color: white;
+    background-image: none;
+    font-weight:normal;
+    color:#1e395b;
+    border-radius:0;
+}
+
+.gc-smartMenu-item-hover {
+    border:1px solid #86bfa0;
+    background-color: #d3f0e0;    background-image: none;
+    color:#1d5987;
+    font-weight:normal;
+    text-shadow:none;
+}
+
+.gc-smart-tag-default {
+    border:1px solid #ababab;
+    background: white;
+    color:#1e395b;
+    font-weight:normal;
+    border-radius:0;
+}
+
+.gc-smart-tag-hover {
+    border:1px solid #9fd5b7;
+    background-color: white;    background-image: none;
+    color:#1d5987;
+    font-weight:normal;
+    text-shadow:none;
+}
+
+.gc-smart-tag-active {
+    border:1px solid #9fd5b7;
+    background-color:#9fd5b7;    background-image: none;
+    font-weight:normal;
+    color:#262626;
+    -webkit-box-shadow: none;
+          box-shadow: none;
+}
+
+
+.gc-menu-item-input {
+    width:16px;
+    height:16px;
+    margin:1px;
+    float:left;
+    display:inline-block;
+}
+.gc-menu-item-text {
+    font-size:12px;
+    font-weight:normal;
+    display:inline-block;
+    float:left;
+    padding-top:2px;
+    font-family:Arial;
+}
+.gc-fill-menu-container {
+    box-shadow:rgba(0,0,0,0.4) 1px 2px 5px;
+    cursor:default;
+}
+
+.gc-toolstrip-default {
+    background: white;
+    border:1px solid #c6c6c6;
+}
+.gc-toolstrip-button-style:active,
+.gc-toolstrip-button-style {
+    color: black;
+    background:white;
+    -webkit-box-shadow: none;
+          box-shadow: none;
+}
+
+.gc-tab-tip-span{
+     background:#D6E6F9;
+     color:black;
+     border:1px solid #D6E6F9;
+     font-weight:normal;
+}
+
+.gc-spread-toolTip {
+    border: 1px solid #bebebe;
+    border-radius: 0px;
+    background-color: white;    background-image: none;
+    font-weight: normal;
+    color: #217346;
+}
+
+.gc-no-user-select {
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -o-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+}
+/*-----common css end-----*/
+
+/*-----formula textbox start-----*/
+/* function autocomplete */
+/* function autocomplete */
+.gcsj-func-ac-popup {
+	margin: 0;
+	padding: 0;
+    background: #fff;
+	border: 1px solid rgba(0,0,0,0.2);
+	font-family: arial,sans-serif;
+	font-size: 12px;
+	line-height: 22px;
+	position: absolute;
+	width: 300px;
+	z-index: 2001;
+
+	-webkit-box-shadow: 0 2px 4px rgba(0,0,0,0.2);
+	-moz-box-shadow: 0 2px 4px rgba(0,0,0,0.2);
+	box-shadow: 0 2px 4px rgba(0,0,0,0.2);
+}
+
+.gcsj-func-ac-row {
+    margin: 0;
+    cursor: default;
+    padding: 2px 10px;
+    color: #666666;
+}
+
+.gcsj-func-ac-row-name {
+     color: #222;
+     font-size: 13px;
+     font-family: inconsolata,monospace,arial,sans,sans-serif;
+     margin: -2px 0;
+}
+
+.gcsj-func-ac-row-description {
+    color: #666;
+    display: none;
+    font-size: 11px;
+    margin: -2px 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.gcsj-ac-row-active {
+	background-color: #f5f5f5;
+	color: #000;
+	border-top: 1px solid #ebebeb;
+	border-bottom: 1px solid #ebebeb;
+	padding: 1px 10px
+}
+
+.gcsj-ac-row-active .gcsj-func-ac-row-description {
+    display:block;
+}
+
+/*  function help */
+.gcsj-func-help-popup {
+    background-color:#fff;
+    border: 1px solid rgba(0,0,0,0.2);
+    color: #222;
+    font-size: 11px;
+    word-wrap: break-word;
+    position: absolute;
+    width: 320px;
+    z-index: 2001;
+
+    -webkit-box-shadow:0 2px 4px rgba(0,0,0,0.2);
+	-moz-box-shadow:0 2px 4px rgba(0,0,0,0.2);
+	box-shadow:0 2px 4px rgba(0,0,0,0.2);
+}
+
+.gcsj-func-help-title {
+    background-color: #f5f5f5;
+    color: #222;
+    font-size: 13px;
+    padding: 1px 0 1px 10px;
+}
+
+.gcsj-func-help-body {
+    border-top: 1px solid #ebebeb;
+    font-family: arial, sans-serif;
+    overflow: hidden;
+}
+
+.gcsj-func-help-content {
+    padding-bottom: 2px;
+}
+
+.gcsj-func-help-section {
+    padding: 5px 10px;
+}
+
+.gcsj-func-help-section-title {
+    font-size: 11px;
+    color: #666;
+}
+
+.gcsj-func-help-section-content {
+    font-size: 11px;
+}
+
+.gcsj-func-help-formula {
+    font-family: inconsolata,monospace,arial,sans,sans-serif;
+    padding: 1px 0;
+}
+
+.gcsj-func-help-formula-name {
+}
+
+.gcsj-func-help-paramter {
+    padding-left:1px;
+}
+
+.gcsj-func-help-paramter-paren {
+}
+
+.gcsj-func-help-paramter-active {
+    background-color: #feb;
+}
+
+/* color text */
+.gcsj-func-color-content {
+    white-space: pre-wrap;
+}
+/*-----formula textbox end-----*/
+
+/*-----floatingobject start-----*/
+.gc-floatingobject-selected{
+    border:1px solid #939393;
+}
+
+.gc-floatingobject-unselected{
+    background-color: transparent;
+    border:1px solid transparent;
+}
+
+.gc-floatingobject-container{
+    position: absolute;
+    overflow: hidden;
+    box-sizing:content-box;
+}
+
+.gc-floatingobject-background-cover{
+    -webkit-background-size: cover; /* For WebKit*/
+    -moz-background-size: cover;    /* Mozilla*/
+    -o-background-size: cover;      /* Opera*/
+    background-size: cover;         /* Generic*/
+}
+
+.gc-floatingobject-moving-container{
+    position: absolute;
+    overflow: hidden;
+}
+
+.gc-floatingobject-moving-div{
+    position: absolute;
+    border:1px solid black;
+}
+.gc-floatingobject-resize-indicator {
+    box-sizing:content-box;
+}
+
+.gc-floatingobject-resize-indicator-select{
+    background-color:white;
+    border-radius:2px;
+    -moz-border-radius:1px;
+    border:1px solid #939393;
+    z-index:100;
+}
+
+.gc-floatingobject-resize-indicator-unSelect{
+    display: none;
+}
+
+.gc-floatingobject-absolute{
+    position: absolute;
+}
+
+.gc-floatingobject-content-container {
+    box-sizing:content-box;
+}
+/*-----floatingobject end-----*/
+
+/*-----scrollbar start-----*/
+/*scrollbar*/
+.gc-scroll-container{
+    background-color: #bababa;
+    -moz-box-shadow: none;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+}
+.gc-scroll-corner-all {
+    border-radius: 2px;
+}
+.gc-scroll-arrow{
+    background-color: white;
+    border-style:solid;
+    border-color: #ababab;
+    background-image: none;
+    border-radius: 0;
+}
+
+.gc-scroll-arrow .gc-scroll-arrowUp{
+    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAANCAYAAABy6+R8AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjExR/NCNwAAAClJREFUKFNjGEmgvLz8P5RJHABpgGGoEH6ArIEojdg0wDBUyShAAAYGAHSXJkH1wN/VAAAAAElFTkSuQmCC);
+    
+}
+.gc-scroll-arrowUp {
+    background-position: center;
+}
+
+.gc-scroll-arrow .gc-scroll-arrowDown {
+    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAANCAYAAABy6+R8AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjExR/NCNwAAACRJREFUKFNjGAVYQHl5+X9cGKoEOyBZAwyQrAEGSNYwpAEDAwBvhSZBmzrLGgAAAABJRU5ErkJggg==);
+}
+.gc-scroll-arrowDown {
+    background-position: center;
+}
+
+.gc-scroll-arrow .gc-scroll-arrowLeft{
+    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAANCAYAAABy6+R8AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjExR/NCNwAAADBJREFUKFNjGMKgvLz8P5RJHABpIEkTTAPRmpA1EK0JBMjSBAJkaQIBsjQNNGBgAABe7iZBxoz5vwAAAABJRU5ErkJggg==);
+}
+.gc-scroll-arrowLeft {
+    background-position: center;
+}
+
+.gc-scroll-arrow .gc-scroll-arrowRight{
+    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAANCAYAAABy6+R8AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjExR/NCNwAAAC5JREFUKFNjGIKgvLz8P5RJPABpIlkjTBNJGpE1Ea2RZA0gQLIGECBZw2ACDAwAhS4mQZAuqGcAAAAASUVORK5CYII=);
+}
+.gc-scroll-arrowRight {
+    background-position: center;
+}
+
+.gc-scroll-bar .gc-scrollbar-vertical {
+    background-image: none;
+    background-repeat: no-repeat;
+}
+.gc-scrollbar-vertical {
+    background-position: center;
+}
+
+.gc-scroll-bar .gc-scrollbar-horizontal {
+    text-indent: 0;
+    background-image: none;
+    background-repeat: no-repeat;
+}
+.gc-scrollbar-horizontal {
+    background-position: center;
+}
+
+.gc-scrollbar-wrapper {
+    background-color: transparent;
+}
+
+.gc-scroll-bar {
+    border-style:solid;
+    border-color:#ababab;
+    background:  white;
+    -moz-border-radius: 0px;
+    -webkit-border-radius: 0px;
+    border-radius: 0px;
+}
+.gc-scroll-arrow-hover {
+    border-style:solid;
+    border-color:#777777;
+    background: white;
+}
+.gc-scrollbar-stateHover {
+    border-style:solid;
+    border-color:#777777;
+    background: white;
+}
+
+.gc-scroll-arrow:active,
+.gc-scroll-bar:active,
+.gc-scrollbar-stateActive {
+    border-style:solid;
+    border-color:#777777;
+    background: #e1e1e1;
+    -webkit-box-shadow: none;
+          box-shadow: none;
+}
+/*-----scrollbar end-----*/
+

app/public/css/spreadjs/sheets/gc.spread.sheets.excel2013lightGray.10.0.1.css

@@ -0,0 +1,857 @@
+/*-----common css start-----*/
+.gc-theme-version {
+    position: absolute;
+    z-index: 2013;
+}
+.gc-grayArea {
+    background-color: #f1f1f1;
+}
+.gc-corner-hover {
+    background-color: #f1f1f1;
+}
+.gc-corner-selected {
+    background-color: #f1f1f1;
+}
+.gc-corner-normal {
+    background-color: #f1f1f1;
+}
+.gc-corner-triangle-normal {
+    background-color: #c6c6c6;
+    background-image: -webkit-linear-gradient(top, #c6c6c6, #c6c6c6); /* For Chrome and Safari */
+    background-image:    -moz-linear-gradient(top, #c6c6c6, #c6c6c6); /* For old Fx (3.6 to 15) */
+    background-image:     -ms-linear-gradient(top, #c6c6c6, #c6c6c6); /* For pre-releases of IE 10*/
+    background-image:      -o-linear-gradient(top, #c6c6c6, #c6c6c6); /* For old Opera (11.1 to 12.0) */
+    background-image:         linear-gradient(to bottom, #c6c6c6, #c6c6c6); /* Standard syntax; must be last */
+    border-style:solid;
+    border-left-color: #dbdbdb !important;
+    border-right-color: #b7b7b7 !important;
+    border-top-color: #dbdbdb !important;
+    border-bottom-color: #b7b7b7 !important;
+}
+.gc-corner-triangle-hover {
+    background-color: #9e9e9e;
+    background-image: -webkit-linear-gradient(top, #9e9e9e, #9e9e9e); /* For Chrome and Safari */
+    background-image:    -moz-linear-gradient(top, #9e9e9e, #9e9e9e); /* For old Fx (3.6 to 15) */
+    background-image:     -ms-linear-gradient(top, #9e9e9e, #9e9e9e); /* For pre-releases of IE 10*/
+    background-image:      -o-linear-gradient(top, #9e9e9e, #9e9e9e); /* For old Opera (11.1 to 12.0) */
+    background-image:         linear-gradient(to bottom, #9e9e9e, #9e9e9e); /* Standard syntax; must be last */
+    border-style:solid;
+    border-left-color: #dbdbdb !important;
+    border-right-color: #b7b7b7 !important;
+    border-top-color: #dbdbdb !important;
+    border-bottom-color: #b7b7b7 !important;
+}
+.gc-corner-triangle-selected {
+    background-color: #217346;
+    background-image: -webkit-linear-gradient(top, #217346, #217346); /* For Chrome and Safari */
+    background-image:    -moz-linear-gradient(top, #217346, #217346); /* For old Fx (3.6 to 15) */
+    background-image:     -ms-linear-gradient(top, #217346, #217346); /* For pre-releases of IE 10*/
+    background-image:      -o-linear-gradient(top, #217346, #217346); /* For old Opera (11.1 to 12.0) */
+    background-image:         linear-gradient(to bottom, #217346, #217346); /* Standard syntax; must be last */
+    border-style:solid;
+    border-left-color: #dbdbdb !important;
+    border-right-color: #b7b7b7 !important;
+    border-top-color: #dbdbdb !important;
+    border-bottom-color: #b7b7b7 !important;
+}
+.gc-columnHeader-normal {
+    color: #262626;
+    background-image: none;
+    background-color: #f1f1f1;
+    border-style:solid;
+    border-left-color: #dbdbdb !important;
+    border-right-color: #b7b7b7 !important;
+    border-bottom-color: #ababab !important;
+}
+.gc-columnHeader-hover {
+    color: #262626;
+    background-image: none;
+    background-color: #9fd5b7;
+    border-style:solid;
+    border-left-color: #dbdbdb !important;
+    border-right-color: #b7b7b7 !important;
+    border-bottom-color: #ababab !important;
+}
+.gc-columnHeader-selected {
+    color: #217346;
+    background-image: none;
+    background-color: #d3f0e0;
+    border-style:solid;
+    border-left-color: #dbdbdb !important;
+    border-right-color: #b7b7b7 !important;
+    border-bottom-color: #ababab !important;
+}
+.gc-columnHeader-highlight {
+    color: #217346;
+    background-image: none;
+    background-color: #d4d4d4;
+    border-style:solid;
+    border-left-color: #dbdbdb !important;
+    border-right-color: #b7b7b7 !important;
+    border-bottom-color: #ababab !important;
+}
+.gc-rowHeader-normal {
+    color: #262626;
+    background-color: #f1f1f1;
+    background-image: none;
+    border-style:solid;
+    border-top-color: #dbdbdb !important;
+    border-bottom-color: #b7b7b7 !important;
+    border-right-color: #ababab !important;
+}
+.gc-rowHeader-hover {
+    color: #262626;
+    background-color: #9fd5b7;
+    background-image: none;
+    border-style:solid;
+    border-top-color: #dbdbdb !important;
+    border-bottom-color: #b7b7b7 !important;
+    border-right-color: #ababab !important;
+}
+.gc-rowHeader-selected {
+    color: #217346;
+    background-color: #d3f0e0;
+    background-image: none;
+    border-style:solid;
+    border-top-color: #dbdbdb !important;
+    border-bottom-color: #b7b7b7 !important;
+    border-right-color: #ababab !important;
+}
+.gc-rowHeader-highlight {
+    color: #217346;
+    background-color: #d4d4d4;
+    background-image: none;
+    border-style:solid;
+    border-top-color: #dbdbdb !important;
+    border-bottom-color: #b7b7b7 !important;
+    border-right-color: #ababab !important;
+}
+.gc-horizontal-scrollbar {
+    box-sizing:content-box;
+    background: #f1f1f1;
+    border-top: 1px solid #ababab;
+    height: 18px;
+    padding: 4px 0px 5px 0px;
+    margin: 0;
+}
+.gc-vertical-scrollbar {
+    box-sizing:content-box;
+    background: #f1f1f1;
+    border-left: 1px solid #ababab;
+    width: 18px;
+    padding: 0px 5px 0px 4px;
+    margin: 0;
+}
+.gc-footer-corner {
+    background-color: #f1f1f1;
+}
+.gc-selection {
+    background-color: rgba(20, 20, 20, 0.2);
+    border-color: #217346;
+    color: rgba(240,240,240,0.7);
+}
+.gc-drag-indicator {
+    border-color: #217346;
+}
+.gc-gridlineColor {
+    border-color: #d4d4d4;
+}
+.gc-group {
+    background-color:#f1f1f1;
+    color: #ababab;
+}
+.gc-group-box {
+    background-color:#f1f1f1;
+    color: #606060;
+    border-color: #828790;
+}
+
+.gc-tabStripNewTab-highlight {
+    border-color: #5e5e5e;
+}
+.gc-tabStripNewTab-hover {
+    border-color: #439467;
+}
+.gc-tabStripBackground {
+    background-image: -webkit-linear-gradient(top, #f1f1f1, #f1f1f1); /* For Chrome and Safari */
+    background-image:    -moz-linear-gradient(top, #f1f1f1, #f1f1f1); /* For old Fx (3.6 to 15) */
+    background-image:     -ms-linear-gradient(top, #f1f1f1, #f1f1f1); /* For pre-releases of IE 10*/
+    background-image:      -o-linear-gradient(top, #f1f1f1, #f1f1f1); /* For old Opera (11.1 to 12.0) */
+    background-image:         linear-gradient(to bottom, #f1f1f1, #f1f1f1); /* Standard syntax; must be last */
+    background-color: #f1f1f1;
+    border-color: #ababab;
+}
+.gc-tabStripResizeBarInner {
+    color: #5e5e5e;
+}
+.gc-navMoreButton-highlight {
+    border-color: #5e5e5e;
+}
+.gc-navMoreButton-hover {
+    border-color: #439467;
+}
+.gc-navButton-hover {
+    border-color: #439467;
+}
+.gc-navButton-highlight {
+    border-color: #005a2b;
+}
+.gc-navButton-normal {
+    border-color: #ababab;
+}
+.gc-tab-normal {
+    color: #444444;
+    background-image: none;
+    background-color: transparent;
+    border-style: solid;
+    border-left-color: #ababab;
+    border-bottom-color: #217346;
+}
+.gc-tab-hover {
+    color: #252627;
+    background-image: none;
+    background-color: transparent;
+    border-style: solid;
+    border-left-color: #ababab;
+    border-bottom-color: #217346;
+}
+.gc-tab-active {
+    color: #217346;
+    background-image: none;
+    background-color: white;
+    border-style: solid;
+    border-left-color: #ababab;
+    border-bottom-color: #217346;
+}
+
+.gc-rowHeaderFill {
+    background-color: #e4ecf7;
+}
+.gc-colHeaderFill {
+    background-image: -webkit-linear-gradient(top, #F6FAFB 12.5%, #D2DBEB); /* For Chrome and Safari */
+    background-image:    -moz-linear-gradient(top, #F6FAFB 12.5%, #D2DBEB); /* For old Fx (3.6 to 15) */
+    background-image:     -ms-linear-gradient(top, #F6FAFB 12.5%, #D2DBEB); /* For pre-releases of IE 10*/
+    background-image:      -o-linear-gradient(top, #F6FAFB 12.5%, #D2DBEB); /* For old Opera (11.1 to 12.0) */
+    background-image:         linear-gradient(to bottom, #F6FAFB 12.5%, #D2DBEB); /* Standard syntax; must be last */
+    background-color: #D2DBEB;
+}
+
+.gc-gradientButton {
+    background-color: #DDDDDD; /* fallback color if gradients are not supported */
+    background-image: -webkit-linear-gradient(top, #F6FAFB, #D2DBEB); /* For Chrome and Safari */
+    background-image:    -moz-linear-gradient(top, #F6FAFB, #D2DBEB); /* For old Fx (3.6 to 15) */
+    background-image:     -ms-linear-gradient(top, #F6FAFB, #D2DBEB); /* For pre-releases of IE 10*/
+    background-image:      -o-linear-gradient(top, #F6FAFB, #D2DBEB); /* For old Opera (11.1 to 12.0) */
+    background-image:         linear-gradient(to bottom, #F6FAFB, #D2DBEB); /* Standard syntax; must be last */
+}
+
+.gc-sheetTabEditor::-ms-clear {
+    display: none;
+}
+
+
+.gc-layout-table {
+    font-size:12px;
+    width:100%;
+    height:100%;
+    font-family:Lucida Grande, Lucida Sans, Arial, sans-serif;
+}
+
+.gc-layout-table-first-column {
+    width:21px;
+    border-right:1px solid #CCC;
+    text-align:right;
+    padding-top:7px;
+}
+
+.gc-layout-table-last-column {
+    width:18px;
+}
+
+.gc-filter-sort-desc-container {
+    border-bottom:1px solid #CCC;
+}
+
+.gc-filter-item-wrapper {
+}
+
+
+.gc-filter-dialog-style {
+    background:#fcfdfd;
+    font-family:Lucida Grande, Lucida Sans, Arial, sans-serif;
+    font-size:12px;
+    border:1px solid #a7abb0;
+}
+
+.gc-search-outer-div {
+    border: none;
+    margin:4px 0px 0px 4px;
+    background-color: white;
+    background-image: none;
+    color:#1e395b;
+    font-weight:normal;
+}
+
+div.gc-search-outer-div input::-ms-clear{
+   display:none;
+}
+
+#gc-filterSearch {
+    width:165px;
+    height:21px;
+    border:1px solid #ababab;
+    margin-left:7px;
+    margin-top:4px;
+    margin-bottom: 0px;
+    padding: 0;
+    font-size: 1em;
+    background-color:white;
+    color:black;
+    float:none;
+}
+#gc-filterSearch:hover,
+#gc-filterSearch:active{
+    background-color:white;
+}
+
+.gc-check-uncheck-all {
+    float:left;
+    width:16px;
+    height:16px;
+    display:inline-block;
+}
+.gc-filter-check-outerDiv .gc-check-image,
+.gc-fill-type-item .gc-check-image {
+    background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjExR/NCNwAAAGxJREFUOE+ljsENgDAMAzsaQ3QMxP4/wAhXwTKhEY9TlZOdtK1b/4WVFaysYGUFKxMWdY/hA5T3+x0+BjJYJmOJBoF+87UMYhAwzFBaBnFwYZ1j/kKFltIycHLqMrHyhEvSMrCygpUVrJyntwPdKU02VXQw7gAAAABJRU5ErkJggg==);
+}
+.gc-filter-check-outerDiv .gc-uncheck-image,
+.gc-fill-type-item .gc-uncheck-image {
+    background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjExR/NCNwAAAIJJREFUOE+lkssNgDAMQzsCw3UMxEocGKWDQSLVUj5GJeLwhPyI0x7a9qP/gsoKVFagskIUm3ALp3GKZvX63/q0QIcAlqAMXMcFIQ6z7DouTGLptawkMVmeDJi8BFsGQ0jzUcRyvEla4oLAhvVrveu4IOAdxJOwZPkOylBZgcrv9PYAV9tkcyJlS4sAAAAASUVORK5CYII=);
+}
+.gc-check-image,
+.gc-uncheck-image {
+    background-position:center;
+}
+
+.gc-filter-check-outerDiv {
+    height:18px;
+    margin-top:4px;
+}
+
+a.gc-filter-check-style {
+    color:#1e395b;
+    text-shadow:none;
+}
+
+a.gc-filter-check {
+    text-decoration: none;
+}
+
+a.gc-filter-check:hover {
+    text-decoration:underline;
+}
+#gc-sortASC:hover,
+#gc-sortASC:active {
+    border-color: #e3e3e3;
+    outline: none;
+    -webkit-box-shadow: none;
+            box-shadow: none;  
+}
+.gc-filter-sort {
+    border:1px solid transparent;
+    font-weight:normal;
+    color:#222222;
+}
+
+.gc-filter-hover {
+    border-radius: 0px;
+    outline:none;
+}
+
+.gc-filter-item {
+    position: relative;
+    cursor: default;
+    font-weight:normal;
+    border-style: solid;
+    border-color: transparent;
+}
+
+.gc-filter-item-container {
+    border:1px solid #a7abb0;
+    border-radius:3px;
+    margin:4px 0px 4px 4px;
+    overflow:hidden;
+}
+
+.gc-filter-item-input {
+    float: left;
+    clear: left;
+}
+
+.gc-filter-item-text {
+    font-family: Lucida Grande,Lucida Sans,Arial,sans-serif;
+    font-size: 12px;
+    margin: 2px;
+    white-space:nowrap;
+    word-wrap:normal;
+    float: left;
+    clear: right;
+}
+
+.gc-filter-button {
+    width:90px;
+    height:27px;
+    margin:2px 1px 5px;
+}
+
+.gc-filter-button-disable {
+    opacity:.35;
+    background-image:none;
+}
+
+#gc-filterOK {
+    margin-left:13px;
+    margin-bottom:5px;
+    float:left;
+}
+#gc-filterCancel {
+    margin-bottom:5px;
+    float:left;
+}
+
+.gc-filter-button-default {
+    border:1px solid #acacac;
+    border-radius: 0;
+    background-image: -webkit-linear-gradient(top, #f0f0f0, #e5e5e5); /* For Chrome and Safari */
+    background-image:    -moz-linear-gradient(top, #f0f0f0, #e5e5e5); /* For old Fx (3.6 to 15) */
+    background-image:     -ms-linear-gradient(top, #f0f0f0, #e5e5e5); /* For pre-releases of IE 10*/
+    background-image:      -o-linear-gradient(top, #f0f0f0, #e5e5e5); /* For old Opera (11.1 to 12.0) */
+    background-image:         linear-gradient(to bottom, #f0f0f0, #e5e5e5); /* Standard syntax; must be last */
+    font-weight:normal;
+    color: black;
+}
+
+.gc-filter-button-hover {
+    border:1px solid #7eb4ea;
+    border-radius: 0;
+    background-color: #d3f0e0;
+    background-image: -webkit-linear-gradient(top, #ecf4fc, #dcecfc); /* For Chrome and Safari */
+    background-image:    -moz-linear-gradient(top, #ecf4fc, #dcecfc); /* For old Fx (3.6 to 15) */
+    background-image:     -ms-linear-gradient(top, #ecf4fc, #dcecfc); /* For pre-releases of IE 10*/
+    background-image:      -o-linear-gradient(top, #ecf4fc, #dcecfc); /* For old Opera (11.1 to 12.0) */
+    background-image:         linear-gradient(to bottom, #ecf4fc, #dcecfc); /* Standard syntax; must be last */
+    color: black;
+    font-weight:normal;
+    text-shadow:none;
+    cursor:pointer;
+}
+
+.gc-filter-button-active {
+    border:1px solid #569de5;
+    border-radius: 0;
+    background-color: #ffe475;
+    background-image: -webkit-linear-gradient(top, #daecfc, #c4e0fc); /* For Chrome and Safari */
+    background-image:    -moz-linear-gradient(top, #daecfc, #c4e0fc); /* For old Fx (3.6 to 15) */
+    background-image:     -ms-linear-gradient(top, #daecfc, #c4e0fc); /* For pre-releases of IE 10*/
+    background-image:      -o-linear-gradient(top, #daecfc, #c4e0fc); /* For old Opera (11.1 to 12.0) */
+    background-image:         linear-gradient(to bottom, #daecfc, #c4e0fc); /* Standard syntax; must be last */
+    font-weight:normal;
+    color: black;
+    -webkit-box-shadow: none;
+          box-shadow: none;
+}
+
+.gc-filter-item-hover {
+    border:1px solid transparent;
+    background-color: #d3f0e0;
+    background-image: none;
+    color:#1d5987;
+    font-weight:normal;
+    text-shadow:none;
+}
+
+.gc-smartMenu-item-default {
+    border:1px solid transparent;
+    background-color: white;
+    background-image: none;
+    font-weight:normal;
+    color:#1e395b;
+    border-radius:0;
+}
+
+.gc-smartMenu-item-hover {
+    border:1px solid #86bfa0;
+    background-color: #d3f0e0;
+    background-image: none;
+    color:#1d5987;
+    font-weight:normal;
+    text-shadow:none;
+}
+
+.gc-smart-tag-default {
+    border:1px solid #ababab;
+    background: white;
+    color:#1e395b;
+    font-weight:normal;
+    border-radius:0;
+}
+
+.gc-smart-tag-hover {
+    border:1px solid #9fd5b7;
+    background-color: white;
+    background-image: none;
+    color:#1d5987;
+    font-weight:normal;
+    text-shadow:none;
+}
+
+.gc-smart-tag-active {
+    border:1px solid #9fd5b7;
+    background-color:#9fd5b7;
+    background-image: none;
+    font-weight:normal;
+    color:#262626;
+    -webkit-box-shadow: none;
+          box-shadow: none;
+}
+
+
+.gc-menu-item-input {
+    width:16px;
+    height:16px;
+    margin:1px;
+    float:left;
+    display:inline-block;
+}
+.gc-menu-item-text {
+    font-size:12px;
+    font-weight:normal;
+    display:inline-block;
+    float:left;
+    padding-top:2px;
+    font-family:Arial;
+}
+.gc-fill-menu-container {
+    box-shadow:rgba(0,0,0,0.4) 1px 2px 5px;
+    cursor:default;
+}
+
+.gc-toolstrip-default {
+    background: white;
+    border:1px solid #c6c6c6;
+}
+.gc-toolstrip-button-style:active,
+.gc-toolstrip-button-style {
+    color: black;
+    background:white;
+    -webkit-box-shadow: none;
+          box-shadow: none;
+}
+
+.gc-tab-tip-span{
+     background:#D6E6F9;
+     color:black;
+     border:1px solid #D6E6F9;
+     font-weight:normal;
+}
+
+.gc-spread-toolTip {
+    border: 1px solid #bebebe;
+    border-radius: 0px;
+    background-color: white;    background-image: none;
+    font-weight: normal;
+    color: #217346;
+}
+
+.gc-no-user-select {
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -o-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+}
+/*-----common css end-----*/
+
+/*-----formula textbox start-----*/
+/* function autocomplete */
+.gcsj-func-ac-popup {
+	margin: 0;
+	padding: 0;
+    background: #fff;
+	border: 1px solid rgba(0,0,0,0.2);
+	font-family: arial,sans-serif;
+	font-size: 12px;
+	line-height: 22px;
+	position: absolute;
+	width: 300px;
+	z-index: 2001;
+
+	-webkit-box-shadow: 0 2px 4px rgba(0,0,0,0.2);
+	-moz-box-shadow: 0 2px 4px rgba(0,0,0,0.2);
+	box-shadow: 0 2px 4px rgba(0,0,0,0.2);
+}
+
+.gcsj-func-ac-row {
+    margin: 0;
+    cursor: default;
+    padding: 2px 10px;
+    color: #666666;
+}
+
+.gcsj-func-ac-row-name {
+     color: #222;
+     font-size: 13px;
+     font-family: inconsolata,monospace,arial,sans,sans-serif;
+     margin: -2px 0;
+}
+
+.gcsj-func-ac-row-description {
+    color: #666;
+    display: none;
+    font-size: 11px;
+    margin: -2px 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.gcsj-ac-row-active {
+	background-color: #f5f5f5;
+	color: #000;
+	border-top: 1px solid #ebebeb;
+	border-bottom: 1px solid #ebebeb;
+	padding: 1px 10px
+}
+
+.gcsj-ac-row-active .gcsj-func-ac-row-description {
+    display:block;
+}
+
+/*  function help */
+.gcsj-func-help-popup {
+    background-color:#fff;
+    border: 1px solid rgba(0,0,0,0.2);
+    color: #222;
+    font-size: 11px;
+    word-wrap: break-word;
+    position: absolute;
+    width: 320px;
+    z-index: 2001;
+
+    -webkit-box-shadow:0 2px 4px rgba(0,0,0,0.2);
+	-moz-box-shadow:0 2px 4px rgba(0,0,0,0.2);
+	box-shadow:0 2px 4px rgba(0,0,0,0.2);
+}
+
+.gcsj-func-help-title {
+    background-color: #f5f5f5;
+    color: #222;
+    font-size: 13px;
+    padding: 1px 0 1px 10px;
+}
+
+.gcsj-func-help-body {
+    border-top: 1px solid #ebebeb;
+    font-family: arial, sans-serif;
+    overflow: hidden;
+}
+
+.gcsj-func-help-content {
+    padding-bottom: 2px;
+}
+
+.gcsj-func-help-section {
+    padding: 5px 10px;
+}
+
+.gcsj-func-help-section-title {
+    font-size: 11px;
+    color: #666;
+}
+
+.gcsj-func-help-section-content {
+    font-size: 11px;
+}
+
+.gcsj-func-help-formula {
+    font-family: inconsolata,monospace,arial,sans,sans-serif;
+    padding: 1px 0;
+}
+
+.gcsj-func-help-formula-name {
+}
+
+.gcsj-func-help-paramter {
+    padding-left:1px;
+}
+
+.gcsj-func-help-paramter-paren {
+}
+
+.gcsj-func-help-paramter-active {
+    background-color: #feb;
+}
+
+/* color text */
+.gcsj-func-color-content {
+    white-space: pre-wrap;
+}
+/*-----formula textbox end-----*/
+
+/*-----floatingobject start-----*/
+.gc-floatingobject-selected{
+    border:1px solid #939393;
+}
+
+.gc-floatingobject-unselected{
+    background-color: transparent;
+    border:1px solid transparent;
+}
+
+.gc-floatingobject-container{
+    position: absolute;
+    overflow: hidden;
+    box-sizing:content-box;
+}
+
+.gc-floatingobject-background-cover{
+    -webkit-background-size: cover; /* For WebKit*/
+    -moz-background-size: cover;    /* Mozilla*/
+    -o-background-size: cover;      /* Opera*/
+    background-size: cover;         /* Generic*/
+}
+
+.gc-floatingobject-moving-container{
+    position: absolute;
+    overflow: hidden;
+}
+
+.gc-floatingobject-moving-div{
+    position: absolute;
+    border:1px solid black;
+}
+.gc-floatingobject-resize-indicator {
+    box-sizing:content-box;
+}
+
+.gc-floatingobject-resize-indicator-select{
+    background-color:white;
+    border-radius:2px;
+    -moz-border-radius:1px;
+    border:1px solid #939393;
+    z-index:100;
+}
+
+.gc-floatingobject-resize-indicator-unSelect{
+    display: none;
+}
+
+.gc-floatingobject-absolute{
+    position: absolute;
+}
+
+.gc-floatingobject-content-container {
+    box-sizing:content-box;
+}
+/*-----floatingobject end-----*/
+
+/*-----scrollbar start-----*/
+/*scrollbar*/
+.gc-scroll-container{
+    background-color: #d9d9d9;
+    -moz-box-shadow: none;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+}
+.gc-scroll-corner-all {
+    border-radius: 2px;
+}
+.gc-scroll-arrow{
+    background-color: white;
+    border-style:solid;
+    border-color: #ababab;
+    background-image: none;
+    border-radius: 0;
+}
+
+.gc-scroll-arrow .gc-scroll-arrowUp{
+    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAANCAYAAABy6+R8AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjExR/NCNwAAAClJREFUKFNjGEmgvLz8P5RJHABpgGGoEH6ArIEojdg0wDBUyShAAAYGAHSXJkH1wN/VAAAAAElFTkSuQmCC);
+    
+}
+.gc-scroll-arrowUp {
+    background-position: center;
+}
+
+.gc-scroll-arrow .gc-scroll-arrowDown {
+    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAANCAYAAABy6+R8AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjExR/NCNwAAACRJREFUKFNjGAVYQHl5+X9cGKoEOyBZAwyQrAEGSNYwpAEDAwBvhSZBmzrLGgAAAABJRU5ErkJggg==);
+}
+.gc-scroll-arrowDown {
+    background-position: center;
+}
+
+.gc-scroll-arrow .gc-scroll-arrowLeft{
+    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAANCAYAAABy6+R8AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjExR/NCNwAAADBJREFUKFNjGMKgvLz8P5RJHABpIEkTTAPRmpA1EK0JBMjSBAJkaQIBsjQNNGBgAABe7iZBxoz5vwAAAABJRU5ErkJggg==);
+}
+.gc-scroll-arrowLeft {
+    background-position: center;
+}
+
+.gc-scroll-arrow .gc-scroll-arrowRight{
+    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAANCAYAAABy6+R8AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjExR/NCNwAAAC5JREFUKFNjGIKgvLz8P5RJPABpIlkjTBNJGpE1Ea2RZA0gQLIGECBZw2ACDAwAhS4mQZAuqGcAAAAASUVORK5CYII=);
+}
+.gc-scroll-arrowRight {
+    background-position: center;
+}
+
+.gc-scroll-bar .gc-scrollbar-vertical {
+    background-image: none;
+    background-repeat: no-repeat;
+}
+.gc-scrollbar-vertical {
+    background-position: center;
+}
+
+.gc-scroll-bar .gc-scrollbar-horizontal {
+    text-indent: 0;
+    background-image: none;
+    background-repeat: no-repeat;
+}
+.gc-scrollbar-horizontal {
+    background-position: center;
+}
+
+.gc-scrollbar-wrapper {
+    background-color: transparent;
+}
+
+.gc-scroll-bar {
+    border-style:solid;
+    border-color:#ababab;
+    background:  white;
+    -moz-border-radius: 0px;
+    -webkit-border-radius: 0px;
+    border-radius: 0px;
+}
+.gc-scroll-arrow-hover {
+    border-style:solid;
+    border-color:#777777;
+    background: white;
+}
+.gc-scrollbar-stateHover {
+    border-style:solid;
+    border-color:#777777;
+    background: white;
+}
+
+.gc-scroll-arrow:active,
+.gc-scroll-bar:active,
+.gc-scrollbar-stateActive {
+    border-style:solid;
+    border-color:#777777;
+    background: #e1e1e1;
+    -webkit-box-shadow: none;
+          box-shadow: none;
+}
+/*-----scrollbar end-----*/
+

app/public/css/spreadjs/sheets/gc.spread.sheets.excel2013white.10.0.1.css

@@ -0,0 +1,850 @@
+/*-----common css start-----*/
+.gc-theme-version {
+    position: absolute;
+    z-index: 2013;
+}
+.gc-grayArea {
+    background-color: white;
+}
+.gc-corner-hover {
+    background-color: white;
+}
+.gc-corner-selected {
+    background-color: white;
+}
+.gc-corner-normal {
+    background-color: white;
+}
+.gc-corner-triangle-normal {
+    background-color: #dfdfdf;
+    background-image: -webkit-linear-gradient(top, #dfdfdf, #dfdfdf); /* For Chrome and Safari */
+    background-image:    -moz-linear-gradient(top, #dfdfdf, #dfdfdf); /* For old Fx (3.6 to 15) */
+    background-image:     -ms-linear-gradient(top, #dfdfdf, #dfdfdf); /* For pre-releases of IE 10*/
+    background-image:      -o-linear-gradient(top, #dfdfdf, #dfdfdf); /* For old Opera (11.1 to 12.0) */
+    background-image:         linear-gradient(to bottom, #dfdfdf, #dfdfdf); /* Standard syntax; must be last */
+    border-style:solid;
+    border-left-color: #efefef !important;
+    border-right-color: #d5ded5 !important;
+    border-top-color: #efefef !important;
+    border-bottom-color: #d5ded5 !important;
+}
+.gc-corner-triangle-hover {
+    background-color: #9e9e9e;
+    background-image: -webkit-linear-gradient(top, #9e9e9e, #9e9e9e); /* For Chrome and Safari */
+    background-image:    -moz-linear-gradient(top, #9e9e9e, #9e9e9e); /* For old Fx (3.6 to 15) */
+    background-image:     -ms-linear-gradient(top, #9e9e9e, #9e9e9e); /* For pre-releases of IE 10*/
+    background-image:      -o-linear-gradient(top, #9e9e9e, #9e9e9e); /* For old Opera (11.1 to 12.0) */
+    background-image:         linear-gradient(to bottom, #9e9e9e, #9e9e9e); /* Standard syntax; must be last */
+    border-style:solid;
+    border-left-color: #efefef !important;
+    border-right-color: #d5ded5 !important;
+    border-top-color: #efefef !important;
+    border-bottom-color: #d5ded5 !important;
+}
+.gc-corner-triangle-selected {
+    background-color: #217346;
+    background-image: -webkit-linear-gradient(top, #217346, #217346); /* For Chrome and Safari */
+    background-image:    -moz-linear-gradient(top, #217346, #217346); /* For old Fx (3.6 to 15) */
+    background-image:     -ms-linear-gradient(top, #217346, #217346); /* For pre-releases of IE 10*/
+    background-image:      -o-linear-gradient(top, #217346, #217346); /* For old Opera (11.1 to 12.0) */
+    background-image:         linear-gradient(to bottom, #217346, #217346); /* Standard syntax; must be last */
+    border-style:solid;
+    border-left-color: #efefef !important;
+    border-right-color: #d5ded5 !important;
+    border-top-color: #efefef !important;
+    border-bottom-color: #d5ded5 !important;
+}
+.gc-columnHeader-normal {
+    color: #444444;
+    background-image: none;
+    background-color: white;
+    border-style:solid;
+    border-left-color: #efefef !important;
+    border-right-color: #d5ded5 !important;
+    border-bottom-color: #ababab !important;
+}
+.gc-columnHeader-hover {
+    color: #444444;
+    background-image: none;
+    background-color: #9fd5b7;
+    border-style:solid;
+    border-left-color: #efefef !important;
+    border-right-color: #d5ded5 !important;
+    border-bottom-color: #ababab !important;
+}
+.gc-columnHeader-selected {
+    color: #217346;
+    background-image: none;
+    background-color: #d3f0e0;
+    border-style:solid;
+    border-left-color: #efefef !important;
+    border-right-color: #d5ded5 !important;
+    border-bottom-color: #ababab !important;
+}
+.gc-columnHeader-highlight {
+    color: #217346;
+    background-image: none;
+    background-color: #e1e1e1;
+    border-style:solid;
+    border-left-color: #efefef !important;
+    border-right-color: #d5ded5 !important;
+    border-bottom-color: #ababab !important;
+}
+.gc-rowHeader-normal {
+    color: #444444;
+    background-color: white;
+    background-image: none;
+    border-style:solid;
+    border-top-color: #efefef !important;
+    border-bottom-color: #d5ded5 !important;
+    border-right-color: #ababab !important;
+}
+.gc-rowHeader-hover {
+    color: #444444;
+    background-color: #9fd5b7;
+    background-image: none;
+    border-style:solid;
+    border-top-color: #efefef !important;
+    border-bottom-color: #d5ded5 !important;
+    border-right-color: #ababab !important;
+}
+.gc-rowHeader-selected {
+    color: #217346;
+    background-color: #d3f0e0;
+    background-image: none;
+    border-style:solid;
+    border-top-color: #efefef !important;
+    border-bottom-color: #d5ded5 !important;
+    border-right-color: #ababab !important;
+}
+.gc-rowHeader-highlight {
+    color: #217346;
+    background-color: #e1e1e1;
+    background-image: none;
+    border-style:solid;
+    border-top-color: #efefef !important;
+    border-bottom-color: #d5ded5 !important;
+    border-right-color: #ababab !important;
+}
+.gc-horizontal-scrollbar {
+    background-color: #f6f6f6;
+    border-top-color: #ababab;
+}
+.gc-vertical-scrollbar {
+    background-color: #f6f6f6;
+    border-left-color: #ababab;
+}
+.gc-footer-corner {
+    background-color: #f6f6f6;
+}
+.gc-selection {
+    background-color: rgba(20, 20, 20, 0.2);
+    border-color: #217346;
+    color: rgba(240,240,240,0.7);
+}
+.gc-drag-indicator {
+    border-color: #217346;
+}
+.gc-gridlineColor {
+    border-color: #d4d4d4;
+}
+.gc-group {
+    background-color: white;
+    color: #ababab;
+}
+.gc-group-box {
+    background-color: white;
+    color: #666666;
+    border-color: #828790;
+}
+
+.gc-tabStripNewTab-highlight {
+    border-color: #777777;
+}
+.gc-tabStripNewTab-hover {
+    border-color: #439467;
+}
+.gc-tabStripBackground {
+    background-image: -webkit-linear-gradient(top, #f6f6f6, #f6f6f6); /* For Chrome and Safari */
+    background-image:    -moz-linear-gradient(top, #f6f6f6, #f6f6f6); /* For old Fx (3.6 to 15) */
+    background-image:     -ms-linear-gradient(top, #f6f6f6, #f6f6f6); /* For pre-releases of IE 10*/
+    background-image:      -o-linear-gradient(top, #f6f6f6, #f6f6f6); /* For old Opera (11.1 to 12.0) */
+    background-image:         linear-gradient(to bottom, #f6f6f6, #f6f6f6); /* Standard syntax; must be last */
+    background-color: #f6f6f6;
+    border-color: #ababab;
+}
+.gc-tabStripResizeBarInner {
+    color: #b3b3b3;
+}
+.gc-navMoreButton-highlight {
+    border-color: #0a6332;
+}
+.gc-navMoreButton-hover {
+    border-color: #439467;
+}
+.gc-navButton-hover {
+    border-color: #439467;
+}
+.gc-navButton-highlight {
+    border-color: #0a6332;
+}
+.gc-navButton-normal {
+    border-color: #c6c6c6;
+}
+.gc-tab-normal {
+    color: #444444;
+    background-image: none;
+    background-color: transparent;
+    border-style: solid;
+    border-left-color: #ababab;
+    border-bottom-color: #217346;
+}
+.gc-tab-hover {
+    color: #252627;
+    background-image: none;
+    background-color: transparent;
+    border-style: solid;
+    border-left-color: #ababab;
+    border-bottom-color: #217346;
+}
+.gc-tab-active {
+    color: #217346;
+    background-image: none;
+    background-color: white;
+    border-style: solid;
+    border-left-color: #ababab;
+    border-bottom-color: #217346;
+}
+
+.gc-rowHeaderFill {
+    background-color: #e4ecf7;
+}
+.gc-colHeaderFill {
+    background-image: -webkit-linear-gradient(top, #F6FAFB 12.5%, #D2DBEB); /* For Chrome and Safari */
+    background-image:    -moz-linear-gradient(top, #F6FAFB 12.5%, #D2DBEB); /* For old Fx (3.6 to 15) */
+    background-image:     -ms-linear-gradient(top, #F6FAFB 12.5%, #D2DBEB); /* For pre-releases of IE 10*/
+    background-image:      -o-linear-gradient(top, #F6FAFB 12.5%, #D2DBEB); /* For old Opera (11.1 to 12.0) */
+    background-image:         linear-gradient(to bottom, #F6FAFB 12.5%, #D2DBEB); /* Standard syntax; must be last */
+    background-color: #D2DBEB;
+}
+
+.gc-gradientButton {
+    background-color: #DDDDDD; /* fallback color if gradients are not supported */
+    background-image: -webkit-linear-gradient(top, #F6FAFB, #D2DBEB); /* For Chrome and Safari */
+    background-image:    -moz-linear-gradient(top, #F6FAFB, #D2DBEB); /* For old Fx (3.6 to 15) */
+    background-image:     -ms-linear-gradient(top, #F6FAFB, #D2DBEB); /* For pre-releases of IE 10*/
+    background-image:      -o-linear-gradient(top, #F6FAFB, #D2DBEB); /* For old Opera (11.1 to 12.0) */
+    background-image:         linear-gradient(to bottom, #F6FAFB, #D2DBEB); /* Standard syntax; must be last */
+}
+
+.gc-sheetTabEditor::-ms-clear {
+    display: none;
+}
+
+
+.gc-layout-table {
+    font-size:12px;
+    width:100%;
+    height:100%;
+    font-family:Lucida Grande, Lucida Sans, Arial, sans-serif;
+}
+
+.gc-layout-table-first-column {
+    width:21px;
+    border-right:1px solid #CCC;
+    text-align:right;
+    padding-top:7px;
+}
+
+.gc-layout-table-last-column {
+    width:18px;
+}
+
+.gc-filter-sort-desc-container {
+    border-bottom:1px solid #CCC;
+}
+
+.gc-filter-item-wrapper {
+}
+
+
+.gc-filter-dialog-style {
+    background:#fcfdfd;
+    font-family:Lucida Grande, Lucida Sans, Arial, sans-serif;
+    font-size:12px;
+    border:1px solid #a7abb0;
+}
+
+.gc-search-outer-div {
+    border: none;
+    margin:4px 0px 0px 4px;
+    background-color: white;
+    background-image: none;
+    color:#1e395b;
+    font-weight:normal;
+}
+
+div.gc-search-outer-div input::-ms-clear{
+   display:none;
+}
+
+#gc-filterSearch {
+    width:165px;
+    height:21px;
+    border:1px solid #ababab;
+    margin-left:7px;
+    margin-top:4px;
+    margin-bottom: 0px;
+    padding: 0;
+    font-size: 1em;
+    background-color:white;
+    color:black;
+    float:none;
+}
+#gc-filterSearch:hover,
+#gc-filterSearch:active{
+    background-color:white;
+}
+
+.gc-check-uncheck-all {
+    float:left;
+    width:16px;
+    height:16px;
+    display:inline-block;
+}
+.gc-filter-check-outerDiv .gc-check-image,
+.gc-fill-type-item .gc-check-image {
+    background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjExR/NCNwAAAGxJREFUOE+ljsENgDAMAzsaQ3QMxP4/wAhXwTKhEY9TlZOdtK1b/4WVFaysYGUFKxMWdY/hA5T3+x0+BjJYJmOJBoF+87UMYhAwzFBaBnFwYZ1j/kKFltIycHLqMrHyhEvSMrCygpUVrJyntwPdKU02VXQw7gAAAABJRU5ErkJggg==);
+}
+.gc-filter-check-outerDiv .gc-uncheck-image,
+.gc-fill-type-item .gc-uncheck-image {
+    background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjExR/NCNwAAAIJJREFUOE+lkssNgDAMQzsCw3UMxEocGKWDQSLVUj5GJeLwhPyI0x7a9qP/gsoKVFagskIUm3ALp3GKZvX63/q0QIcAlqAMXMcFIQ6z7DouTGLptawkMVmeDJi8BFsGQ0jzUcRyvEla4oLAhvVrveu4IOAdxJOwZPkOylBZgcrv9PYAV9tkcyJlS4sAAAAASUVORK5CYII=);
+}
+.gc-check-image,
+.gc-uncheck-image {
+    background-position:center;
+}
+
+.gc-filter-check-outerDiv {
+    height:18px;
+    margin-top:4px;
+}
+
+a.gc-filter-check-style {
+    color:#1e395b;
+    text-shadow:none;
+}
+
+a.gc-filter-check {
+    text-decoration: none;
+}
+
+a.gc-filter-check:hover {
+    text-decoration:underline;
+}
+#gc-sortASC:hover,
+#gc-sortASC:active {
+    border-color: #e3e3e3;
+    outline: none;
+    -webkit-box-shadow: none;
+            box-shadow: none;  
+}
+.gc-filter-sort {
+    border:1px solid transparent;
+    font-weight:normal;
+    color:#222222;
+}
+
+.gc-filter-hover {
+    border-radius: 0px;
+    outline:none;
+}
+
+.gc-filter-item {
+    position: relative;
+    cursor: default;
+    font-weight:normal;
+    border-style: solid;
+    border-color: transparent;
+}
+
+.gc-filter-item-container {
+    border:1px solid #a7abb0;
+    border-radius:3px;
+    margin:4px 0px 4px 4px;
+    overflow:hidden;
+}
+
+.gc-filter-item-input {
+    float: left;
+    clear: left;
+}
+
+.gc-filter-item-text {
+    font-family: Lucida Grande,Lucida Sans,Arial,sans-serif;
+    font-size: 12px;
+    margin: 2px;
+    white-space:nowrap;
+    word-wrap:normal;
+    float: left;
+    clear: right;
+}
+
+.gc-filter-button {
+    width:90px;
+    height:27px;
+    margin:2px 1px 5px;
+}
+
+.gc-filter-button-disable {
+    opacity:.35;
+    background-image:none;
+}
+
+#gc-filterOK {
+    margin-left:13px;
+    margin-bottom:5px;
+    float:left;
+}
+#gc-filterCancel {
+    margin-bottom:5px;
+    float:left;
+}
+
+.gc-filter-button-default {
+    border:1px solid #acacac;
+    border-radius: 0;
+    background-image: -webkit-linear-gradient(top, #f0f0f0, #e5e5e5); /* For Chrome and Safari */
+    background-image:    -moz-linear-gradient(top, #f0f0f0, #e5e5e5); /* For old Fx (3.6 to 15) */
+    background-image:     -ms-linear-gradient(top, #f0f0f0, #e5e5e5); /* For pre-releases of IE 10*/
+    background-image:      -o-linear-gradient(top, #f0f0f0, #e5e5e5); /* For old Opera (11.1 to 12.0) */
+    background-image:         linear-gradient(to bottom, #f0f0f0, #e5e5e5); /* Standard syntax; must be last */
+    font-weight:normal;
+    color: black;
+}
+
+.gc-filter-button-hover {
+    border:1px solid #7eb4ea;
+    border-radius: 0;
+    background-color: #d3f0e0;
+    background-image: -webkit-linear-gradient(top, #ecf4fc, #dcecfc); /* For Chrome and Safari */
+    background-image:    -moz-linear-gradient(top, #ecf4fc, #dcecfc); /* For old Fx (3.6 to 15) */
+    background-image:     -ms-linear-gradient(top, #ecf4fc, #dcecfc); /* For pre-releases of IE 10*/
+    background-image:      -o-linear-gradient(top, #ecf4fc, #dcecfc); /* For old Opera (11.1 to 12.0) */
+    background-image:         linear-gradient(to bottom, #ecf4fc, #dcecfc); /* Standard syntax; must be last */
+    color: black;
+    font-weight:normal;
+    text-shadow:none;
+    cursor:pointer;
+}
+
+.gc-filter-button-active {
+    border:1px solid #569de5;
+    border-radius: 0;
+    background-color: #ffe475;
+    background-image: -webkit-linear-gradient(top, #daecfc, #c4e0fc); /* For Chrome and Safari */
+    background-image:    -moz-linear-gradient(top, #daecfc, #c4e0fc); /* For old Fx (3.6 to 15) */
+    background-image:     -ms-linear-gradient(top, #daecfc, #c4e0fc); /* For pre-releases of IE 10*/
+    background-image:      -o-linear-gradient(top, #daecfc, #c4e0fc); /* For old Opera (11.1 to 12.0) */
+    background-image:         linear-gradient(to bottom, #daecfc, #c4e0fc); /* Standard syntax; must be last */
+    font-weight:normal;
+    color: black;
+    -webkit-box-shadow: none;
+          box-shadow: none;
+}
+
+.gc-filter-item-hover {
+    border:1px solid transparent;
+    background-color: #d3f0e0;
+    background-image: none;
+    color:#1d5987;
+    font-weight:normal;
+    text-shadow:none;
+}
+
+.gc-smartMenu-item-default {
+    border:1px solid transparent;
+    background-color: white;
+    background-image: none;
+    font-weight:normal;
+    color:#1e395b;
+    border-radius:0;
+}
+
+.gc-smartMenu-item-hover {
+    border:1px solid #86bfa0;
+    background-color: #d3f0e0;
+    background-image: none;
+    color:#1d5987;
+    font-weight:normal;
+    text-shadow:none;
+}
+
+.gc-smart-tag-default {
+    border:1px solid #ababab;
+    background: white;
+    color:#1e395b;
+    font-weight:normal;
+    border-radius:0;
+}
+
+.gc-smart-tag-hover {
+    border:1px solid #9fd5b7;
+    background-color: white;
+    background-image: none;
+    color:#1d5987;
+    font-weight:normal;
+    text-shadow:none;
+}
+
+.gc-smart-tag-active {
+    border:1px solid #9fd5b7;
+    background-color:#9fd5b7;
+    background-image: none;
+    font-weight:normal;
+    color:#262626;
+    -webkit-box-shadow: none;
+          box-shadow: none;
+}
+
+
+.gc-menu-item-input {
+    width:16px;
+    height:16px;
+    margin:1px;
+    float:left;
+    display:inline-block;
+}
+.gc-menu-item-text {
+    font-size:12px;
+    font-weight:normal;
+    display:inline-block;
+    float:left;
+    padding-top:2px;
+    font-family:Arial;
+}
+.gc-fill-menu-container {
+    box-shadow:rgba(0,0,0,0.4) 1px 2px 5px;
+    cursor:default;
+}
+
+.gc-toolstrip-default {
+    background: white;
+    border:1px solid #c6c6c6;
+}
+.gc-toolstrip-button-style:active,
+.gc-toolstrip-button-style {
+    color: black;
+    background:white;
+    -webkit-box-shadow: none;
+          box-shadow: none;
+}
+
+.gc-tab-tip-span{
+     background:#D6E6F9;
+     color:black;
+     border:1px solid #D6E6F9;
+     font-weight:normal;
+}
+
+.gc-spread-toolTip {
+    border: 1px solid #bebebe;
+    border-radius: 0px;
+    background-color: white;
+    background-image: none;
+    font-weight: normal;
+    color: #217346;
+}
+
+.gc-no-user-select {
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -o-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+}
+/*-----common css end-----*/
+
+/*-----formula textbox start-----*/
+/* function autocomplete */
+.gcsj-func-ac-popup {
+	margin: 0;
+	padding: 0;
+    background: #fff;
+	border: 1px solid rgba(0,0,0,0.2);
+	font-family: arial,sans-serif;
+	font-size: 12px;
+	line-height: 22px;
+	position: absolute;
+	width: 300px;
+	z-index: 2001;
+
+	-webkit-box-shadow: 0 2px 4px rgba(0,0,0,0.2);
+	-moz-box-shadow: 0 2px 4px rgba(0,0,0,0.2);
+	box-shadow: 0 2px 4px rgba(0,0,0,0.2);
+}
+
+.gcsj-func-ac-row {
+    margin: 0;
+    cursor: default;
+    padding: 2px 10px;
+    color: #666666;
+}
+
+.gcsj-func-ac-row-name {
+     color: #222;
+     font-size: 13px;
+     font-family: inconsolata,monospace,arial,sans,sans-serif;
+     margin: -2px 0;
+}
+
+.gcsj-func-ac-row-description {
+    color: #666;
+    display: none;
+    font-size: 11px;
+    margin: -2px 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.gcsj-ac-row-active {
+	background-color: #f5f5f5;
+	color: #000;
+	border-top: 1px solid #ebebeb;
+	border-bottom: 1px solid #ebebeb;
+	padding: 1px 10px
+}
+
+.gcsj-ac-row-active .gcsj-func-ac-row-description {
+    display:block;
+}
+
+/*  function help */
+.gcsj-func-help-popup {
+    background-color:#fff;
+    border: 1px solid rgba(0,0,0,0.2);
+    color: #222;
+    font-size: 11px;
+    word-wrap: break-word;
+    position: absolute;
+    width: 320px;
+    z-index: 2001;
+
+    -webkit-box-shadow:0 2px 4px rgba(0,0,0,0.2);
+	-moz-box-shadow:0 2px 4px rgba(0,0,0,0.2);
+	box-shadow:0 2px 4px rgba(0,0,0,0.2);
+}
+
+.gcsj-func-help-title {
+    background-color: #f5f5f5;
+    color: #222;
+    font-size: 13px;
+    padding: 1px 0 1px 10px;
+}
+
+.gcsj-func-help-body {
+    border-top: 1px solid #ebebeb;
+    font-family: arial, sans-serif;
+    overflow: hidden;
+}
+
+.gcsj-func-help-content {
+    padding-bottom: 2px;
+}
+
+.gcsj-func-help-section {
+    padding: 5px 10px;
+}
+
+.gcsj-func-help-section-title {
+    font-size: 11px;
+    color: #666;
+}
+
+.gcsj-func-help-section-content {
+    font-size: 11px;
+}
+
+.gcsj-func-help-formula {
+    font-family: inconsolata,monospace,arial,sans,sans-serif;
+    padding: 1px 0;
+}
+
+.gcsj-func-help-formula-name {
+}
+
+.gcsj-func-help-paramter {
+    padding-left:1px;
+}
+
+.gcsj-func-help-paramter-paren {
+}
+
+.gcsj-func-help-paramter-active {
+    background-color: #feb;
+}
+
+/* color text */
+.gcsj-func-color-content {
+    white-space: pre-wrap;
+}
+/*-----formula textbox end-----*/
+
+/*-----floatingobject start-----*/
+.gc-floatingobject-selected{
+    border:1px solid #939393;
+}
+
+.gc-floatingobject-unselected{
+    background-color: transparent;
+    border:1px solid transparent;
+}
+
+.gc-floatingobject-container{
+    position: absolute;
+    overflow: hidden;
+    box-sizing:content-box;
+}
+
+.gc-floatingobject-background-cover{
+    -webkit-background-size: cover; /* For WebKit*/
+    -moz-background-size: cover;    /* Mozilla*/
+    -o-background-size: cover;      /* Opera*/
+    background-size: cover;         /* Generic*/
+}
+
+.gc-floatingobject-moving-container{
+    position: absolute;
+    overflow: hidden;
+}
+
+.gc-floatingobject-moving-div{
+    position: absolute;
+    border:1px solid black;
+}
+.gc-floatingobject-resize-indicator {
+    box-sizing:content-box;
+}
+
+.gc-floatingobject-resize-indicator-select{
+    background-color:white;
+    border-radius:2px;
+    -moz-border-radius:1px;
+    border:1px solid #939393;
+    z-index:100;
+}
+
+.gc-floatingobject-resize-indicator-unSelect{
+    display: none;
+}
+
+.gc-floatingobject-absolute{
+    position: absolute;
+}
+
+.gc-floatingobject-content-container {
+    box-sizing:content-box;
+}
+/*-----floatingobject end-----*/
+
+/*-----scrollbar start-----*/
+/*scrollbar*/
+.gc-scroll-container{
+    background-color: #eaeaea;
+    -moz-box-shadow: none;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+}
+.gc-scroll-corner-all {
+    border-radius: 2px;
+}
+.gc-scroll-arrow{
+    background-color: white;
+    border-style:solid;
+    border-color: #ababab;
+    background-image: none;
+    border-radius: 0;
+}
+
+.gc-scroll-arrow .gc-scroll-arrowUp{
+    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAANCAYAAABy6+R8AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjExR/NCNwAAAClJREFUKFNjGEmgvLz8P5RJHABpgGGoEH6ArIEojdg0wDBUyShAAAYGAHSXJkH1wN/VAAAAAElFTkSuQmCC);
+    
+}
+.gc-scroll-arrowUp {
+    background-position: center;
+}
+
+.gc-scroll-arrow .gc-scroll-arrowDown {
+    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAANCAYAAABy6+R8AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjExR/NCNwAAACRJREFUKFNjGAVYQHl5+X9cGKoEOyBZAwyQrAEGSNYwpAEDAwBvhSZBmzrLGgAAAABJRU5ErkJggg==);
+}
+.gc-scroll-arrowDown {
+    background-position: center;
+}
+
+.gc-scroll-arrow .gc-scroll-arrowLeft{
+    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAANCAYAAABy6+R8AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjExR/NCNwAAADBJREFUKFNjGMKgvLz8P5RJHABpIEkTTAPRmpA1EK0JBMjSBAJkaQIBsjQNNGBgAABe7iZBxoz5vwAAAABJRU5ErkJggg==);
+}
+.gc-scroll-arrowLeft {
+    background-position: center;
+}
+
+.gc-scroll-arrow .gc-scroll-arrowRight{
+    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAANCAYAAABy6+R8AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjExR/NCNwAAAC5JREFUKFNjGIKgvLz8P5RJPABpIlkjTBNJGpE1Ea2RZA0gQLIGECBZw2ACDAwAhS4mQZAuqGcAAAAASUVORK5CYII=);
+}
+.gc-scroll-arrowRight {
+    background-position: center;
+}
+
+.gc-scroll-bar .gc-scrollbar-vertical {
+    background-image: none;
+    background-repeat: no-repeat;
+}
+.gc-scrollbar-vertical {
+    background-position: center;
+}
+
+.gc-scroll-bar .gc-scrollbar-horizontal {
+    text-indent: 0;
+    background-image: none;
+    background-repeat: no-repeat;
+}
+.gc-scrollbar-horizontal {
+    background-position: center;
+}
+
+.gc-scrollbar-wrapper {
+    background-color: transparent;
+}
+
+.gc-scroll-bar {
+    border-style:solid;
+    border-color:#ababab;
+    background:  white;
+    -moz-border-radius: 0px;
+    -webkit-border-radius: 0px;
+    border-radius: 0px;
+}
+.gc-scroll-arrow-hover {
+    border-style:solid;
+    border-color:#777777;
+    background: white;
+}
+.gc-scrollbar-stateHover {
+    border-style:solid;
+    border-color:#ababab;
+    background: #f0f0f0;
+}
+
+.gc-scroll-arrow:active,
+.gc-scroll-bar:active,
+.gc-scrollbar-stateActive {
+    border-style:solid;
+    border-color:#777777;
+    background: #f0f0f0;
+    -webkit-box-shadow: none;
+          box-shadow: none;
+}
+/*-----scrollbar end-----*/
+

app/public/css/spreadjs/sheets/gc.spread.sheets.excel2016colorful.10.0.1.css

@@ -0,0 +1,857 @@
+/*-----common css start-----*/
+.gc-theme-version {
+    position: absolute;
+    z-index: 2016;
+}
+.gc-grayArea {
+    background-color: #e6e6e6;
+}
+.gc-corner-hover {
+    background-color: #e6e6e6;
+}
+.gc-corner-selected {
+    background-color: #e6e6e6;
+}
+.gc-corner-normal {
+    background-color: #e6e6e6;
+}
+.gc-corner-triangle-normal {
+    background-color: #b4b4b4;
+    background-image: -webkit-linear-gradient(top, #b4b4b4, #b4b4b4); /* For Chrome and Safari */
+    background-image:    -moz-linear-gradient(top, #b4b4b4, #b4b4b4); /* For old Fx (3.6 to 15) */
+    background-image:     -ms-linear-gradient(top, #b4b4b4, #b4b4b4); /* For pre-releases of IE 10*/
+    background-image:      -o-linear-gradient(top, #b4b4b4, #b4b4b4); /* For old Opera (11.1 to 12.0) */
+    background-image:         linear-gradient(to bottom, #b4b4b4, #b4b4b4); /* Standard syntax; must be last */
+    border-style:solid;
+    border-left-color: #d6d6d6 !important;
+    border-right-color: #9b9b9b !important;
+    border-top-color: #d2d2d2 !important;
+    border-bottom-color: #9c9c9c !important;
+}
+.gc-corner-triangle-hover {
+    background-color: #9e9e9e;
+    background-image: -webkit-linear-gradient(top, #9e9e9e, #9e9e9e); /* For Chrome and Safari */
+    background-image:    -moz-linear-gradient(top, #9e9e9e, #9e9e9e); /* For old Fx (3.6 to 15) */
+    background-image:     -ms-linear-gradient(top, #9e9e9e, #9e9e9e); /* For pre-releases of IE 10*/
+    background-image:      -o-linear-gradient(top, #9e9e9e, #9e9e9e); /* For old Opera (11.1 to 12.0) */
+    background-image:         linear-gradient(to bottom, #9e9e9e, #9e9e9e); /* Standard syntax; must be last */
+    border-style:solid;
+    border-left-color: #d6d6d6 !important;
+    border-right-color: #9b9b9b !important;
+    border-top-color: #d2d2d2 !important;
+    border-bottom-color: #9c9c9c !important;
+}
+.gc-corner-triangle-selected {
+    background-color: #217346;
+    background-image: -webkit-linear-gradient(top, #217346, #217346); /* For Chrome and Safari */
+    background-image:    -moz-linear-gradient(top, #217346, #217346); /* For old Fx (3.6 to 15) */
+    background-image:     -ms-linear-gradient(top, #217346, #217346); /* For pre-releases of IE 10*/
+    background-image:      -o-linear-gradient(top, #217346, #217346); /* For old Opera (11.1 to 12.0) */
+    background-image:         linear-gradient(to bottom, #217346, #217346); /* Standard syntax; must be last */
+    border-style:solid;
+    border-left-color: #d6d6d6 !important;
+    border-right-color: #9b9b9b !important;
+    border-top-color: #d2d2d2 !important;
+    border-bottom-color: #9c9c9c !important;
+}
+.gc-columnHeader-normal {
+    color: black;
+    background-image: none;
+    background-color: #e6e6e6;
+    border-style:solid;
+    border-left-color: #d2d2d2 !important;
+    border-right-color: #9c9c9c !important;
+    border-bottom-color: #999999 !important;
+}
+.gc-columnHeader-hover {
+    color: black;
+    background-image: none;
+    background-color: #9fd5b7;
+    border-style:solid;
+    border-left-color: #d2d2d2 !important;
+    border-right-color: #9c9c9c !important;
+    border-bottom-color: #999999 !important;
+}
+.gc-columnHeader-selected {
+    color: #217346;
+    background-image: none;
+    background-color: #d3f0e0;
+    border-style:solid;
+    border-left-color: #d2d2d2 !important;
+    border-right-color: #9c9c9c !important;
+    border-bottom-color: #999999 !important;
+}
+.gc-columnHeader-highlight {
+    color: #217346;
+    background-image: none;
+    background-color: #d2d2d2;
+    border-style:solid;
+    border-left-color: #d2d2d2 !important;
+    border-right-color: #9c9c9c !important;
+    border-bottom-color: #999999 !important;
+}
+.gc-rowHeader-normal {
+    color: black;
+    background-color: #e6e6e6;
+    background-image: none;
+    border-style:solid;
+    border-top-color: #d2d2d2 !important;
+    border-bottom-color: #9c9c9c !important;
+    border-right-color: #999999 !important;
+}
+.gc-rowHeader-hover {
+    color: black;
+    background-color: #9fd5b7;
+    background-image: none;
+    border-style:solid;
+    border-top-color: #d2d2d2 !important;
+    border-bottom-color: #9c9c9c !important;
+    border-right-color: #999999 !important;
+}
+.gc-rowHeader-selected {
+    color: #217346;
+    background-color: #d3f0e0;
+    background-image: none;
+    border-style:solid;
+    border-top-color: #d2d2d2 !important;
+    border-bottom-color: #9c9c9c !important;
+    border-right-color: #999999 !important;
+}
+.gc-rowHeader-highlight {
+    color: #217346;
+    background-color: #d2d2d2;
+    background-image: none;
+    border-style:solid;
+    border-top-color: #d2d2d2 !important;
+    border-bottom-color: #9c9c9c !important;
+    border-right-color: #999999 !important;
+}
+.gc-horizontal-scrollbar {
+    box-sizing:content-box;
+    background: #e6e6e6;
+    border-top: 1px solid #999999;
+    height: 18px;
+    padding: 4px 0px 5px 0px;
+    margin: 0;
+}
+.gc-vertical-scrollbar {
+    box-sizing:content-box;
+    background: #e6e6e6;
+    border-left: 1px solid #999999;
+    width: 18px;
+    padding: 0px 5px 0px 4px;
+    margin: 0;
+}
+.gc-footer-corner {
+    background-color: #e6e6e6;
+}
+.gc-selection {
+    background-color: rgba(20, 20, 20, 0.2);
+    border-color: #217346;
+    color: rgba(240,240,240,0.7);
+}
+.gc-drag-indicator {
+    border-color: #217346;
+}
+.gc-gridlineColor {
+    border-color: #d4d4d4;
+}
+.gc-group {
+    background-color: #e6e6e6;
+    color: #999999;
+}
+.gc-group-box {
+    background-color: #e4e4e4;
+    color: #646464;
+    border-color: #828790;
+}
+
+.gc-tabStripNewTab-highlight {
+    border-color: #777777;
+}
+.gc-tabStripNewTab-hover {
+    border-color: #439467;
+}
+.gc-tabStripBackground {
+    background-image: -webkit-linear-gradient(top, #e6e6e6, #e6e6e6); /* For Chrome and Safari */
+    background-image:    -moz-linear-gradient(top, #e6e6e6, #e6e6e6); /* For old Fx (3.6 to 15) */
+    background-image:     -ms-linear-gradient(top, #e6e6e6, #e6e6e6); /* For pre-releases of IE 10*/
+    background-image:      -o-linear-gradient(top, #e6e6e6, #e6e6e6); /* For old Opera (11.1 to 12.0) */
+    background-image:         linear-gradient(to bottom, #e6e6e6, #e6e6e6); /* Standard syntax; must be last */
+    background-color: #e6e6e6;
+    border-color: #999999;
+}
+.gc-tabStripResizeBarInner {
+    color: #b3b3b3;
+}
+.gc-navMoreButton-highlight {
+    border-color: #0a6332;
+}
+.gc-navMoreButton-hover {
+    border-color: #439467;
+}
+.gc-navButton-hover {
+    border-color: #439467;
+}
+.gc-navButton-highlight {
+    border-color: #0a6332;
+}
+.gc-navButton-normal {
+    border-color: #c6c6c6;
+}
+.gc-tab-normal {
+    color: #444444;
+    background-image: none;
+    background-color: transparent;
+    border-style: solid;
+    border-left-color: #999999;
+    border-bottom-color: #217346;
+}
+.gc-tab-hover {
+    color: #252627;
+    background-image: none;
+    background-color: transparent;
+    border-style: solid;
+    border-left-color: #999999;
+    border-bottom-color: #217346;
+}
+.gc-tab-active {
+    color: #217346;
+    background-image: none;
+    background-color: white;
+    border-style: solid;
+    border-left-color: #999999;
+    border-bottom-color: #217346;
+}
+
+.gc-rowHeaderFill {
+    background-color: #e4ecf7;
+}
+.gc-colHeaderFill {
+    background-image: -webkit-linear-gradient(top, #F6FAFB 12.5%, #D2DBEB); /* For Chrome and Safari */
+    background-image:    -moz-linear-gradient(top, #F6FAFB 12.5%, #D2DBEB); /* For old Fx (3.6 to 15) */
+    background-image:     -ms-linear-gradient(top, #F6FAFB 12.5%, #D2DBEB); /* For pre-releases of IE 10*/
+    background-image:      -o-linear-gradient(top, #F6FAFB 12.5%, #D2DBEB); /* For old Opera (11.1 to 12.0) */
+    background-image:         linear-gradient(to bottom, #F6FAFB 12.5%, #D2DBEB); /* Standard syntax; must be last */
+    background-color: #D2DBEB;
+}
+
+.gc-gradientButton {
+    background-color: #DDDDDD; /* fallback color if gradients are not supported */
+    background-image: -webkit-linear-gradient(top, #F6FAFB, #D2DBEB); /* For Chrome and Safari */
+    background-image:    -moz-linear-gradient(top, #F6FAFB, #D2DBEB); /* For old Fx (3.6 to 15) */
+    background-image:     -ms-linear-gradient(top, #F6FAFB, #D2DBEB); /* For pre-releases of IE 10*/
+    background-image:      -o-linear-gradient(top, #F6FAFB, #D2DBEB); /* For old Opera (11.1 to 12.0) */
+    background-image:         linear-gradient(to bottom, #F6FAFB, #D2DBEB); /* Standard syntax; must be last */
+}
+
+.gc-sheetTabEditor::-ms-clear {
+    display: none;
+}
+
+
+.gc-layout-table {
+    font-size:12px;
+    width:100%;
+    height:100%;
+    font-family:Lucida Grande, Lucida Sans, Arial, sans-serif;
+}
+
+.gc-layout-table-first-column {
+    width:21px;
+    border-right:1px solid #CCC;
+    text-align:right;
+    padding-top:7px;
+}
+
+.gc-layout-table-last-column {
+    width:18px;
+}
+
+.gc-filter-sort-desc-container {
+    border-bottom:1px solid #CCC;
+}
+
+.gc-filter-item-wrapper {
+}
+
+
+.gc-filter-dialog-style {
+    background:#ffffff;
+    font-family:Lucida Grande, Lucida Sans, Arial, sans-serif;
+    font-size:12px;
+    border:1px solid #c6c6c6;
+}
+
+.gc-search-outer-div {
+    border: none;
+    margin:4px 0px 0px 4px;
+    background-color: white;
+    background-image: none;
+    color:#1e395b;
+    font-weight:normal;
+}
+
+div.gc-search-outer-div input::-ms-clear{
+   display:none;
+}
+
+#gc-filterSearch {
+    width:165px;
+    height:21px;
+    border:1px solid #ababab;
+    margin-left:7px;
+    margin-top:4px;
+    margin-bottom: 0px;
+    padding: 0;
+    font-size: 1em;
+    background-color:white;
+    color:black;
+    float:none;
+}
+#gc-filterSearch:hover,
+#gc-filterSearch:active{
+    background-color:white;
+}
+
+.gc-check-uncheck-all {
+    float:left;
+    width:16px;
+    height:16px;
+    display:inline-block;
+}
+.gc-filter-check-outerDiv .gc-check-image,
+.gc-fill-type-item .gc-check-image {
+    background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjExR/NCNwAAAGxJREFUOE+ljsENgDAMAzsaQ3QMxP4/wAhXwTKhEY9TlZOdtK1b/4WVFaysYGUFKxMWdY/hA5T3+x0+BjJYJmOJBoF+87UMYhAwzFBaBnFwYZ1j/kKFltIycHLqMrHyhEvSMrCygpUVrJyntwPdKU02VXQw7gAAAABJRU5ErkJggg==);
+}
+.gc-filter-check-outerDiv .gc-uncheck-image,
+.gc-fill-type-item .gc-uncheck-image {
+    background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjExR/NCNwAAAIJJREFUOE+lkssNgDAMQzsCw3UMxEocGKWDQSLVUj5GJeLwhPyI0x7a9qP/gsoKVFagskIUm3ALp3GKZvX63/q0QIcAlqAMXMcFIQ6z7DouTGLptawkMVmeDJi8BFsGQ0jzUcRyvEla4oLAhvVrveu4IOAdxJOwZPkOylBZgcrv9PYAV9tkcyJlS4sAAAAASUVORK5CYII=);
+}
+.gc-check-image,
+.gc-uncheck-image {
+    background-position:center;
+}
+
+.gc-filter-check-outerDiv {
+    height:18px;
+    margin-top:4px;
+}
+
+a.gc-filter-check-style {
+    color:#1e395b;
+    text-shadow:none;
+}
+
+a.gc-filter-check {
+    text-decoration: none;
+}
+
+a.gc-filter-check:hover {
+    text-decoration:underline;
+}
+#gc-sortASC:hover,
+#gc-sortASC:active {
+    border-color: #e3e3e3;
+    outline: none;
+    -webkit-box-shadow: none;
+            box-shadow: none;  
+}
+.gc-filter-sort {
+    border:1px solid transparent;
+    font-weight:normal;
+    color:#222222;
+}
+
+.gc-filter-hover {
+    border-radius: 0px;
+    outline:none;
+}
+
+.gc-filter-item {
+    position: relative;
+    cursor: default;
+    font-weight:normal;
+    border-style: solid;
+    border-color: transparent;
+}
+
+.gc-filter-item-container {
+    border:1px solid #a7abb0;
+    border-radius:3px;
+    margin:4px 0px 4px 4px;
+    overflow:hidden;
+}
+
+.gc-filter-item-input {
+    float: left;
+    clear: left;
+}
+
+.gc-filter-item-text {
+    font-family: Lucida Grande,Lucida Sans,Arial,sans-serif;
+    font-size: 12px;
+    margin: 2px;
+    white-space:nowrap;
+    word-wrap:normal;
+    float: left;
+    clear: right;
+}
+
+.gc-filter-button {
+    width:90px;
+    height:27px;
+    border-radius:3px;
+    margin:2px 1px 5px;
+}
+
+.gc-filter-button-disable {
+    opacity:.35;
+    background-image:none;
+}
+
+#gc-filterOK {
+    margin-left:13px;
+    margin-bottom:5px;
+    float:left;
+}
+#gc-filterCancel {
+    margin-bottom:5px;
+    float:left;
+}
+
+.gc-filter-button-default {
+    border:1px solid #acacac;
+    border-radius: 0;
+    background-image: -webkit-linear-gradient(top, #f0f0f0, #e5e5e5); /* For Chrome and Safari */
+    background-image:    -moz-linear-gradient(top, #f0f0f0, #e5e5e5); /* For old Fx (3.6 to 15) */
+    background-image:     -ms-linear-gradient(top, #f0f0f0, #e5e5e5); /* For pre-releases of IE 10*/
+    background-image:      -o-linear-gradient(top, #f0f0f0, #e5e5e5); /* For old Opera (11.1 to 12.0) */
+    background-image:         linear-gradient(to bottom, #f0f0f0, #e5e5e5); /* Standard syntax; must be last */
+    font-weight:normal;
+    color: black;
+}
+
+.gc-filter-button-hover {
+    border:1px solid #7eb4ea;
+    border-radius: 0;
+    background-color: #d3f0e0;
+    background-image: -webkit-linear-gradient(top, #ecf4fc, #dcecfc); /* For Chrome and Safari */
+    background-image:    -moz-linear-gradient(top, #ecf4fc, #dcecfc); /* For old Fx (3.6 to 15) */
+    background-image:     -ms-linear-gradient(top, #ecf4fc, #dcecfc); /* For pre-releases of IE 10*/
+    background-image:      -o-linear-gradient(top, #ecf4fc, #dcecfc); /* For old Opera (11.1 to 12.0) */
+    background-image:         linear-gradient(to bottom, #ecf4fc, #dcecfc); /* Standard syntax; must be last */
+    color: black;
+    font-weight:normal;
+    text-shadow:none;
+    cursor:pointer;
+}
+
+.gc-filter-button-active {
+    border:1px solid #569de5;
+    border-radius: 0;
+    background-color: #ffe475;    background-image: -webkit-linear-gradient(top, #daecfc, #c4e0fc); /* For Chrome and Safari */
+    background-image:    -moz-linear-gradient(top, #daecfc, #c4e0fc); /* For old Fx (3.6 to 15) */
+    background-image:     -ms-linear-gradient(top, #daecfc, #c4e0fc); /* For pre-releases of IE 10*/
+    background-image:      -o-linear-gradient(top, #daecfc, #c4e0fc); /* For old Opera (11.1 to 12.0) */
+    background-image:         linear-gradient(to bottom, #daecfc, #c4e0fc); /* Standard syntax; must be last */
+    font-weight:normal;
+    color: black;
+    -webkit-box-shadow: none;
+          box-shadow: none;
+}
+
+.gc-filter-item-hover {
+    border:1px solid transparent;
+    background-color: #c5c5c5;
+    background-image: none;
+    color:#1d5987;
+    font-weight:normal;
+    text-shadow:none;
+}
+
+.gc-smartMenu-item-default {
+    border:1px solid transparent;
+    background-color: white;
+    background-image: none;
+    font-weight:normal;
+    color:#1e395b;
+    border-radius:0;
+}
+
+.gc-smartMenu-item-hover {
+    border:1px solid #86bfa0;
+    background-color: #d3f0e0;    background-image: none;
+    color:#1d5987;
+    font-weight:normal;
+    text-shadow:none;
+}
+
+.gc-smart-tag-default {
+    border:1px solid #ababab;
+    background: white;
+    color:#1e395b;
+    font-weight:normal;
+    border-radius:0;
+}
+
+.gc-smart-tag-hover {
+    border:1px solid #9fd5b7;
+    background-color: white;    
+    background-image: none;
+    color:#1d5987;
+    font-weight:normal;
+    text-shadow:none;
+}
+
+.gc-smart-tag-active {
+    border:1px solid #9fd5b7;
+    background-color:#9fd5b7;    
+    background-image: none;
+    font-weight:normal;
+    color:#262626;
+    -webkit-box-shadow: none;
+          box-shadow: none;
+}
+
+
+.gc-menu-item-input {
+    width:16px;
+    height:16px;
+    margin:1px;
+    float:left;
+    display:inline-block;
+}
+.gc-menu-item-text {
+    font-size:12px;
+    font-weight:normal;
+    display:inline-block;
+    float:left;
+    padding-top:2px;
+    font-family:Arial;
+}
+.gc-fill-menu-container {
+    box-shadow:rgba(0,0,0,0.4) 1px 2px 5px;
+    cursor:default;
+}
+
+.gc-toolstrip-default {
+    background: white;
+    border:1px solid #c6c6c6;
+}
+.gc-toolstrip-button-style:active,
+.gc-toolstrip-button-style {
+    color: black;
+    background:white;
+    -webkit-box-shadow: none;
+          box-shadow: none;
+}
+
+.gc-tab-tip-span{
+     background:#D6E6F9;
+     color:black;
+     border:1px solid #D6E6F9;
+     font-weight:normal;
+}
+
+.gc-spread-toolTip {
+    border: 1px solid #bebebe;
+    border-radius: 0px;
+    background-color: white;    background-image: none;
+    font-weight: normal;
+    color: #217346;
+}
+
+.gc-no-user-select {
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -o-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+}
+/*-----common css end-----*/
+
+/*-----formula textbox start-----*/
+/* function autocomplete */
+/* function autocomplete */
+.gcsj-func-ac-popup {
+	margin: 0;
+	padding: 0;
+    background: #fff;
+	border: 1px solid rgba(0,0,0,0.2);
+	font-family: arial,sans-serif;
+	font-size: 12px;
+	line-height: 22px;
+	position: absolute;
+	width: 300px;
+	z-index: 2001;
+
+	-webkit-box-shadow: 0 2px 4px rgba(0,0,0,0.2);
+	-moz-box-shadow: 0 2px 4px rgba(0,0,0,0.2);
+	box-shadow: 0 2px 4px rgba(0,0,0,0.2);
+}
+
+.gcsj-func-ac-row {
+    margin: 0;
+    cursor: default;
+    padding: 2px 10px;
+    color: #666666;
+}
+
+.gcsj-func-ac-row-name {
+     color: #222;
+     font-size: 13px;
+     font-family: inconsolata,monospace,arial,sans,sans-serif;
+     margin: -2px 0;
+}
+
+.gcsj-func-ac-row-description {
+    color: #666;
+    display: none;
+    font-size: 11px;
+    margin: -2px 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.gcsj-ac-row-active {
+	background-color: #f5f5f5;
+	color: #000;
+	border-top: 1px solid #ebebeb;
+	border-bottom: 1px solid #ebebeb;
+	padding: 1px 10px
+}
+
+.gcsj-ac-row-active .gcsj-func-ac-row-description {
+    display:block;
+}
+
+/*  function help */
+.gcsj-func-help-popup {
+    background-color:#fff;
+    border: 1px solid rgba(0,0,0,0.2);
+    color: #222;
+    font-size: 11px;
+    word-wrap: break-word;
+    position: absolute;
+    width: 320px;
+    z-index: 2001;
+
+    -webkit-box-shadow:0 2px 4px rgba(0,0,0,0.2);
+	-moz-box-shadow:0 2px 4px rgba(0,0,0,0.2);
+	box-shadow:0 2px 4px rgba(0,0,0,0.2);
+}
+
+.gcsj-func-help-title {
+    background-color: #f5f5f5;
+    color: #222;
+    font-size: 13px;
+    padding: 1px 0 1px 10px;
+}
+
+.gcsj-func-help-body {
+    border-top: 1px solid #ebebeb;
+    font-family: arial, sans-serif;
+    overflow: hidden;
+}
+
+.gcsj-func-help-content {
+    padding-bottom: 2px;
+}
+
+.gcsj-func-help-section {
+    padding: 5px 10px;
+}
+
+.gcsj-func-help-section-title {
+    font-size: 11px;
+    color: #666;
+}
+
+.gcsj-func-help-section-content {
+    font-size: 11px;
+}
+
+.gcsj-func-help-formula {
+    font-family: inconsolata,monospace,arial,sans,sans-serif;
+    padding: 1px 0;
+}
+
+.gcsj-func-help-formula-name {
+}
+
+.gcsj-func-help-paramter {
+    padding-left:1px;
+}
+
+.gcsj-func-help-paramter-paren {
+}
+
+.gcsj-func-help-paramter-active {
+    background-color: #feb;
+}
+
+/* color text */
+.gcsj-func-color-content {
+    white-space: pre-wrap;
+}
+/*-----formula textbox end-----*/
+
+/*-----floatingobject start-----*/
+.gc-floatingobject-selected{
+    border:1px solid #939393;
+}
+
+.gc-floatingobject-unselected{
+    background-color: transparent;
+    border:1px solid transparent;
+}
+
+.gc-floatingobject-container{
+    position: absolute;
+    overflow: hidden;
+    box-sizing:content-box;
+}
+
+.gc-floatingobject-background-cover{
+    -webkit-background-size: cover; /* For WebKit*/
+    -moz-background-size: cover;    /* Mozilla*/
+    -o-background-size: cover;      /* Opera*/
+    background-size: cover;         /* Generic*/
+}
+
+.gc-floatingobject-moving-container{
+    position: absolute;
+    overflow: hidden;
+}
+
+.gc-floatingobject-moving-div{
+    position: absolute;
+    border:1px solid black;
+}
+.gc-floatingobject-resize-indicator {
+    box-sizing:content-box;
+}
+
+.gc-floatingobject-resize-indicator-select{
+    background-color:white;
+    border-radius:2px;
+    -moz-border-radius:1px;
+    border:1px solid #939393;
+    z-index:100;
+}
+
+.gc-floatingobject-resize-indicator-unSelect{
+    display: none;
+}
+
+.gc-floatingobject-absolute{
+    position: absolute;
+}
+
+.gc-floatingobject-content-container {
+    box-sizing:content-box;
+}
+/*-----floatingobject end-----*/
+
+/*-----scrollbar start-----*/
+/*scrollbar*/
+.gc-scroll-container{
+    background-color: #dbdbdb;
+    -moz-box-shadow: none;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+}
+.gc-scroll-corner-all {
+    border-radius: 2px;
+}
+.gc-scroll-arrow{
+    background-color: white;
+    border-style:solid;
+    border-color: #ababab;
+    background-image: none;
+    border-radius: 0;
+}
+
+.gc-scroll-arrow .gc-scroll-arrowUp{
+    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAANCAYAAABy6+R8AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjExR/NCNwAAAClJREFUKFNjGEmgvLz8P5RJHABpgGGoEH6ArIEojdg0wDBUyShAAAYGAHSXJkH1wN/VAAAAAElFTkSuQmCC);
+    
+}
+.gc-scroll-arrowUp {
+    background-position: center;
+}
+
+.gc-scroll-arrow .gc-scroll-arrowDown {
+    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAANCAYAAABy6+R8AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjExR/NCNwAAACRJREFUKFNjGAVYQHl5+X9cGKoEOyBZAwyQrAEGSNYwpAEDAwBvhSZBmzrLGgAAAABJRU5ErkJggg==);
+}
+.gc-scroll-arrowDown {
+    background-position: center;
+}
+
+.gc-scroll-arrow .gc-scroll-arrowLeft{
+    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAANCAYAAABy6+R8AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjExR/NCNwAAADBJREFUKFNjGMKgvLz8P5RJHABpIEkTTAPRmpA1EK0JBMjSBAJkaQIBsjQNNGBgAABe7iZBxoz5vwAAAABJRU5ErkJggg==);
+}
+.gc-scroll-arrowLeft {
+    background-position: center;
+}
+
+.gc-scroll-arrow .gc-scroll-arrowRight{
+    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAANCAYAAABy6+R8AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjExR/NCNwAAAC5JREFUKFNjGIKgvLz8P5RJPABpIlkjTBNJGpE1Ea2RZA0gQLIGECBZw2ACDAwAhS4mQZAuqGcAAAAASUVORK5CYII=);
+}
+.gc-scroll-arrowRight {
+    background-position: center;
+}
+
+.gc-scroll-bar .gc-scrollbar-vertical {
+    background-image: none;
+    background-repeat: no-repeat;
+}
+.gc-scrollbar-vertical {
+    background-position: center;
+}
+
+.gc-scroll-bar .gc-scrollbar-horizontal {
+    text-indent: 0;
+    background-image: none;
+    background-repeat: no-repeat;
+}
+.gc-scrollbar-horizontal {
+    background-position: center;
+}
+
+.gc-scrollbar-wrapper {
+    background-color: transparent;
+}
+
+.gc-scroll-bar {
+    border-style:solid;
+    border-color:#ababab;
+    background:  white;
+    -moz-border-radius: 0px;
+    -webkit-border-radius: 0px;
+    border-radius: 0px;
+}
+.gc-scroll-arrow-hover {
+    border-style:solid;
+    border-color:#777777;
+    background: white;
+}
+.gc-scrollbar-stateHover {
+    border-style:solid;
+    border-color:#ababab;
+    background: #f0f0f0;
+}
+
+.gc-scroll-arrow:active,
+.gc-scroll-bar:active,
+.gc-scrollbar-stateActive {
+    border-style:solid;
+    border-color:#777777;
+    background: #f0f0f0;
+    -webkit-box-shadow: none;
+          box-shadow: none;
+}
+/*-----scrollbar end-----*/
+

app/public/css/spreadjs/sheets/gc.spread.sheets.excel2016darkGray.10.0.1.css

@@ -0,0 +1,850 @@
+/*-----common css start-----*/
+.gc-theme-version {
+    position: absolute;
+    z-index: 2016;
+}
+.gc-grayArea {
+    background-color: #6a6a6a;
+}
+.gc-corner-hover {
+    background-color: #6a6a6a;
+}
+.gc-corner-selected {
+    background-color: #6a6a6a;
+}
+.gc-corner-normal {
+    background-color: #6a6a6a;
+}
+.gc-corner-triangle-normal {
+    background-color: #f0f0f0;
+    background-image: -webkit-linear-gradient(top, #f0f0f0, #f0f0f0); /* For Chrome and Safari */
+    background-image:    -moz-linear-gradient(top, #f0f0f0, #f0f0f0); /* For old Fx (3.6 to 15) */
+    background-image:     -ms-linear-gradient(top, #f0f0f0, #f0f0f0); /* For pre-releases of IE 10*/
+    background-image:      -o-linear-gradient(top, #f0f0f0, #f0f0f0); /* For old Opera (11.1 to 12.0) */
+    background-image:         linear-gradient(to bottom, #f0f0f0, #f0f0f0); /* Standard syntax; must be last */
+    border-style:solid;
+    border-left-color: #999999 !important;
+    border-right-color: #d3d3d3 !important;
+    border-top-color: #9c9c9c !important;
+    border-bottom-color: #d2d2d2 !important;
+}
+.gc-corner-triangle-hover {
+    background-color: #ffffff;
+    background-image: -webkit-linear-gradient(top, #ffffff, #ffffff); /* For Chrome and Safari */
+    background-image:    -moz-linear-gradient(top, #ffffff, #ffffff); /* For old Fx (3.6 to 15) */
+    background-image:     -ms-linear-gradient(top, #ffffff, #ffffff); /* For pre-releases of IE 10*/
+    background-image:      -o-linear-gradient(top, #ffffff, #ffffff); /* For old Opera (11.1 to 12.0) */
+    background-image:         linear-gradient(to bottom, #ffffff, #ffffff); /* Standard syntax; must be last */
+    border-style:solid;
+    border-left-color: #999999 !important;
+    border-right-color: #d3d3d3 !important;
+    border-top-color: #9c9c9c !important;
+    border-bottom-color: #d2d2d2 !important;
+}
+.gc-corner-triangle-selected {
+    background-color: #217346;
+    background-image: -webkit-linear-gradient(top, #217346, #217346); /* For Chrome and Safari */
+    background-image:    -moz-linear-gradient(top, #217346, #217346); /* For old Fx (3.6 to 15) */
+    background-image:     -ms-linear-gradient(top, #217346, #217346); /* For pre-releases of IE 10*/
+    background-image:      -o-linear-gradient(top, #217346, #217346); /* For old Opera (11.1 to 12.0) */
+    background-image:         linear-gradient(to bottom, #217346, #217346); /* Standard syntax; must be last */
+    border-style:solid;
+    border-left-color: #999999 !important;
+    border-right-color: #d3d3d3 !important;
+    border-top-color: #9c9c9c !important;
+    border-bottom-color: #d2d2d2 !important;
+}
+.gc-columnHeader-normal {
+    color: #ffffff;
+    background-image: none;
+    background-color: #6a6a6a;
+    border-style:solid;
+    border-left-color: #9c9c9c !important;
+    border-right-color: #d2d2d2 !important;
+    border-bottom-color: #999999 !important;
+}
+.gc-columnHeader-hover {
+    color: #ffffff;
+    background-image: none;
+    background-color: #0a6332;
+    border-style:solid;
+    border-left-color: #9c9c9c !important;
+    border-right-color: #d2d2d2 !important;
+    border-bottom-color: #999999 !important;
+}
+.gc-columnHeader-selected {
+    color: #ffffff;
+    background-image: none;
+    background-color: #217346;
+    border-style:solid;
+    border-left-color: #9c9c9c !important;
+    border-right-color: #d2d2d2 !important;
+    border-bottom-color: #999999 !important;
+}
+.gc-columnHeader-highlight {
+    color: #ffffff;
+    background-image: none;
+    background-color: #262626;
+    border-style:solid;
+    border-left-color: #9c9c9c !important;
+    border-right-color: #d2d2d2 !important;
+    border-bottom-color: #999999 !important;
+}
+.gc-rowHeader-normal {
+    color: #ffffff;
+    background-color: #6a6a6a;
+    background-image: none;
+    border-style:solid;
+    border-top-color: #9c9c9c !important;
+    border-bottom-color: #d2d2d2 !important;
+    border-right-color: #999999 !important;
+}
+.gc-rowHeader-hover {
+    color: #ffffff;
+    background-color: #0a6332;
+    background-image: none;
+    border-style:solid;
+    border-top-color: #9c9c9c !important;
+    border-bottom-color: #d2d2d2 !important;
+    border-right-color: #999999 !important;
+}
+.gc-rowHeader-selected {
+    color: #ffffff;
+    background-color: #217346;
+    background-image: none;
+    border-style:solid;
+    border-top-color: #9c9c9c !important;
+    border-bottom-color: #d2d2d2 !important;
+    border-right-color: #999999 !important;
+}
+.gc-rowHeader-highlight {
+    color: #ffffff;
+    background-color: #262626;
+    background-image: none;
+    border-style:solid;
+    border-top-color: #9c9c9c !important;
+    border-bottom-color: #d2d2d2 !important;
+    border-right-color: #999999 !important;
+}
+.gc-horizontal-scrollbar {
+    background-color: #6a6a6a;
+    border-top-color: #999999;
+}
+.gc-vertical-scrollbar {
+    background-color: #6a6a6a;
+    border-left-color: #999999;
+}
+.gc-footer-corner {
+    background-color: #6a6a6a;
+}
+.gc-selection {
+    background-color: rgba(20, 20, 20, 0.2);
+    border-color: #217346;
+    color: rgba(240,240,240,0.7);
+}
+.gc-drag-indicator {
+    border-color: #217346;
+}
+.gc-gridlineColor {
+    border-color: #d4d4d4;
+}
+.gc-group {
+    background-color: #6a6a6a;
+    color: #999999;
+}
+.gc-group-box {
+    background-color: #e4e4e4;
+    color: #646464;
+    border-color: #828790;
+}
+
+.gc-tabStripNewTab-highlight {
+    border-color: #f0f0f0;
+}
+.gc-tabStripNewTab-hover {
+    border-color: #86bfa0;
+}
+.gc-tabStripBackground {
+    background-image: -webkit-linear-gradient(top, #6a6a6a, #6a6a6a); /* For Chrome and Safari */
+    background-image:    -moz-linear-gradient(top, #6a6a6a, #6a6a6a); /* For old Fx (3.6 to 15) */
+    background-image:     -ms-linear-gradient(top, #6a6a6a, #6a6a6a); /* For pre-releases of IE 10*/
+    background-image:      -o-linear-gradient(top, #6a6a6a, #6a6a6a); /* For old Opera (11.1 to 12.0) */
+    background-image:         linear-gradient(to bottom, #6a6a6a, #6a6a6a); /* Standard syntax; must be last */
+    background-color: #6a6a6a;
+    border-color: #999999;
+}
+.gc-tabStripResizeBarInner {
+    color: #f0f0f0;
+}
+.gc-navMoreButton-highlight {
+    border-color: #f0f0f0;
+}
+.gc-navMoreButton-hover {
+    border-color: #86bfa0;
+}
+.gc-navButton-hover {
+    border-color: #86bfa0;
+}
+.gc-navButton-highlight {
+    border-color: #f0f0f0;
+}
+.gc-navButton-normal {
+    border-color: #a3a3a3;
+}
+.gc-tab-normal {
+    color: #ffffff;
+    background-image: none;
+    background-color: transparent;
+    border-style: solid;
+    border-left-color: #999999;
+    border-bottom-color: #217346;
+}
+.gc-tab-hover {
+    color: #ffffff;
+    background-image: none;
+    background-color: transparent;
+    border-style: solid;
+    border-left-color: #999999;
+    border-bottom-color: #217346;
+}
+.gc-tab-active {
+    color: #217346;
+    background-image: none;
+    background-color: white;
+    border-style: solid;
+    border-left-color: #999999;
+    border-bottom-color: #217346;
+}
+
+.gc-rowHeaderFill {
+    background-color: #e4ecf7;
+}
+.gc-colHeaderFill {
+    background-image: -webkit-linear-gradient(top, #F6FAFB 12.5%, #D2DBEB); /* For Chrome and Safari */
+    background-image:    -moz-linear-gradient(top, #F6FAFB 12.5%, #D2DBEB); /* For old Fx (3.6 to 15) */
+    background-image:     -ms-linear-gradient(top, #F6FAFB 12.5%, #D2DBEB); /* For pre-releases of IE 10*/
+    background-image:      -o-linear-gradient(top, #F6FAFB 12.5%, #D2DBEB); /* For old Opera (11.1 to 12.0) */
+    background-image:         linear-gradient(to bottom, #F6FAFB 12.5%, #D2DBEB); /* Standard syntax; must be last */
+    background-color: #D2DBEB;
+}
+
+.gc-gradientButton {
+    background-color: #DDDDDD; /* fallback color if gradients are not supported */
+    background-image: -webkit-linear-gradient(top, #F6FAFB, #D2DBEB); /* For Chrome and Safari */
+    background-image:    -moz-linear-gradient(top, #F6FAFB, #D2DBEB); /* For old Fx (3.6 to 15) */
+    background-image:     -ms-linear-gradient(top, #F6FAFB, #D2DBEB); /* For pre-releases of IE 10*/
+    background-image:      -o-linear-gradient(top, #F6FAFB, #D2DBEB); /* For old Opera (11.1 to 12.0) */
+    background-image:         linear-gradient(to bottom, #F6FAFB, #D2DBEB); /* Standard syntax; must be last */
+}
+
+.gc-sheetTabEditor::-ms-clear {
+    display: none;
+}
+
+
+.gc-layout-table {
+    font-size:12px;
+    width:100%;
+    height:100%;
+    font-family:Lucida Grande, Lucida Sans, Arial, sans-serif;
+}
+
+.gc-layout-table-first-column {
+    width:21px;
+    border-right:1px solid #CCC;
+    text-align:right;
+    padding-top:7px;
+}
+
+.gc-layout-table-last-column {
+    width:18px;
+}
+
+.gc-filter-sort-desc-container {
+    border-bottom:1px solid #CCC;
+}
+
+.gc-filter-item-wrapper {
+}
+
+
+.gc-filter-dialog-style {
+    background:#f0f0f0;
+    font-family:Lucida Grande, Lucida Sans, Arial, sans-serif;
+    font-size:12px;
+    border:1px solid #acacac;
+}
+
+.gc-search-outer-div {
+    border: none;
+    margin:4px 0px 0px 4px;
+    background-color: white;
+    background-image: none;
+    color:#1e395b;
+    font-weight:normal;
+}
+
+div.gc-search-outer-div input::-ms-clear{
+   display:none;
+}
+
+#gc-filterSearch {
+    width:165px;
+    height:21px;
+    border:1px solid #ababab;
+    margin-left:7px;
+    margin-top:4px;
+    margin-bottom: 0px;
+    padding: 0;
+    font-size: 1em;
+    background-color:white;
+    color:black;
+    float:none;
+}
+#gc-filterSearch:hover,
+#gc-filterSearch:active{
+    background-color:white;
+}
+
+.gc-check-uncheck-all {
+    float:left;
+    width:16px;
+    height:16px;
+    display:inline-block;
+}
+.gc-filter-check-outerDiv .gc-check-image,
+.gc-fill-type-item .gc-check-image {
+    background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjExR/NCNwAAAGxJREFUOE+ljsENgDAMAzsaQ3QMxP4/wAhXwTKhEY9TlZOdtK1b/4WVFaysYGUFKxMWdY/hA5T3+x0+BjJYJmOJBoF+87UMYhAwzFBaBnFwYZ1j/kKFltIycHLqMrHyhEvSMrCygpUVrJyntwPdKU02VXQw7gAAAABJRU5ErkJggg==);
+}
+.gc-filter-check-outerDiv .gc-uncheck-image,
+.gc-fill-type-item .gc-uncheck-image {
+    background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjExR/NCNwAAAIJJREFUOE+lkssNgDAMQzsCw3UMxEocGKWDQSLVUj5GJeLwhPyI0x7a9qP/gsoKVFagskIUm3ALp3GKZvX63/q0QIcAlqAMXMcFIQ6z7DouTGLptawkMVmeDJi8BFsGQ0jzUcRyvEla4oLAhvVrveu4IOAdxJOwZPkOylBZgcrv9PYAV9tkcyJlS4sAAAAASUVORK5CYII=);
+}
+.gc-check-image,
+.gc-uncheck-image {
+    background-position:center;
+}
+
+.gc-filter-check-outerDiv {
+    height:18px;
+    margin-top:4px;
+}
+
+a.gc-filter-check-style {
+    color:#1e395b;
+    text-shadow:none;
+}
+
+a.gc-filter-check {
+    text-decoration: none;
+}
+
+a.gc-filter-check:hover {
+    text-decoration:underline;
+}
+#gc-sortASC:hover,
+#gc-sortASC:active {
+    border-color: #e3e3e3;
+    outline: none;
+    -webkit-box-shadow: none;
+            box-shadow: none;  
+}
+.gc-filter-sort {
+    border:1px solid transparent;
+    font-weight:normal;
+    color:#222222;
+}
+
+.gc-filter-hover {
+    border-radius: 0px;
+    outline:none;
+}
+
+.gc-filter-item {
+    position: relative;
+    cursor: default;
+    font-weight:normal;
+    border-style: solid;
+    border-color: transparent;
+}
+
+.gc-filter-item-container {
+    border:1px solid #a7abb0;
+    border-radius:3px;
+    margin:4px 0px 4px 4px;
+    overflow:hidden;
+}
+
+.gc-filter-item-input {
+    float: left;
+    clear: left;
+}
+
+.gc-filter-item-text {
+    font-family: Lucida Grande,Lucida Sans,Arial,sans-serif;
+    font-size: 12px;
+    margin: 2px;
+    white-space:nowrap;
+    word-wrap:normal;
+    float: left;
+    clear: right;
+}
+
+.gc-filter-button {
+    width:90px;
+    height:27px;
+    margin:2px 1px 5px;
+}
+
+.gc-filter-button-disable {
+    opacity:.35;
+    background-image:none;
+}
+
+#gc-filterOK {
+    margin-left:13px;
+    margin-bottom:5px;
+    float:left;
+}
+#gc-filterCancel {
+    margin-bottom:5px;
+    float:left;
+}
+
+.gc-filter-button-default {
+    border:1px solid #acacac;
+    border-radius: 0;
+    background-image: -webkit-linear-gradient(top, #f0f0f0, #e5e5e5); /* For Chrome and Safari */
+    background-image:    -moz-linear-gradient(top, #f0f0f0, #e5e5e5); /* For old Fx (3.6 to 15) */
+    background-image:     -ms-linear-gradient(top, #f0f0f0, #e5e5e5); /* For pre-releases of IE 10*/
+    background-image:      -o-linear-gradient(top, #f0f0f0, #e5e5e5); /* For old Opera (11.1 to 12.0) */
+    background-image:         linear-gradient(to bottom, #f0f0f0, #e5e5e5); /* Standard syntax; must be last */
+    font-weight:normal;
+    color: black;
+}
+
+.gc-filter-button-hover {
+    border:1px solid #7eb4ea;
+    border-radius: 0;
+    background-color: #d3f0e0;
+    background-image: -webkit-linear-gradient(top, #ecf4fc, #dcecfc); /* For Chrome and Safari */
+    background-image:    -moz-linear-gradient(top, #ecf4fc, #dcecfc); /* For old Fx (3.6 to 15) */
+    background-image:     -ms-linear-gradient(top, #ecf4fc, #dcecfc); /* For pre-releases of IE 10*/
+    background-image:      -o-linear-gradient(top, #ecf4fc, #dcecfc); /* For old Opera (11.1 to 12.0) */
+    background-image:         linear-gradient(to bottom, #ecf4fc, #dcecfc); /* Standard syntax; must be last */
+    color: black;
+    font-weight:normal;
+    text-shadow:none;
+    cursor:pointer;
+}
+
+.gc-filter-button-active {
+    border:1px solid #569de5;
+    border-radius: 0;
+    background-color: #ffe475;
+    background-image: -webkit-linear-gradient(top, #daecfc, #c4e0fc); /* For Chrome and Safari */
+    background-image:    -moz-linear-gradient(top, #daecfc, #c4e0fc); /* For old Fx (3.6 to 15) */
+    background-image:     -ms-linear-gradient(top, #daecfc, #c4e0fc); /* For pre-releases of IE 10*/
+    background-image:      -o-linear-gradient(top, #daecfc, #c4e0fc); /* For old Opera (11.1 to 12.0) */
+    background-image:         linear-gradient(to bottom, #daecfc, #c4e0fc); /* Standard syntax; must be last */
+    font-weight:normal;
+    color: black;
+    -webkit-box-shadow: none;
+          box-shadow: none;
+}
+
+.gc-filter-item-hover {
+    border:1px solid transparent;
+    background-color: #969696;
+    background-image: none;
+    color:#1d5987;
+    font-weight:normal;
+    text-shadow:none;
+}
+
+.gc-smartMenu-item-default {
+    border:1px solid transparent;
+    background-color: white;
+    background-image: none;
+    font-weight:normal;
+    color:#1e395b;
+    border-radius:0;
+}
+
+.gc-smartMenu-item-hover {
+    border:1px solid #86bfa0;
+    background-color: #d3f0e0;
+    background-image: none;
+    color:#1d5987;
+    font-weight:normal;
+    text-shadow:none;
+}
+
+.gc-smart-tag-default {
+    border:1px solid #ababab;
+    background: #f0f0f0;
+    color:#1e395b;
+    font-weight:normal;
+    border-radius:0;
+}
+
+.gc-smart-tag-hover {
+    border:1px solid #9fd5b7;
+    background-color: #f0f0f0;
+    background-image: none;
+    color:#1d5987;
+    font-weight:normal;
+    text-shadow:none;
+}
+
+.gc-smart-tag-active {
+    border:1px solid #9fd5b7;
+    background-color:#9fd5b7;
+    background-image: none;
+    font-weight:normal;
+    color:#262626;
+    -webkit-box-shadow: none;
+          box-shadow: none;
+}
+
+
+.gc-menu-item-input {
+    width:16px;
+    height:16px;
+    margin:1px;
+    float:left;
+    display:inline-block;
+}
+.gc-menu-item-text {
+    font-size:12px;
+    font-weight:normal;
+    display:inline-block;
+    float:left;
+    padding-top:2px;
+    font-family:Arial;
+}
+.gc-fill-menu-container {
+    box-shadow:rgba(0,0,0,0.4) 1px 2px 5px;
+    cursor:default;
+}
+
+.gc-toolstrip-default {
+    background: white;
+    border:1px solid #c6c6c6;
+}
+.gc-toolstrip-button-style:active,
+.gc-toolstrip-button-style {
+    color: black;
+    background:white;
+    -webkit-box-shadow: none;
+          box-shadow: none;
+}
+
+.gc-tab-tip-span{
+     background:#D6E6F9;
+     color:black;
+     border:1px solid #D6E6F9;
+     font-weight:normal;
+}
+
+.gc-spread-toolTip {
+    border: 1px solid #bebebe;
+    border-radius: 0px;
+    background-color: #f0f0f0;
+    background-image: none;
+    font-weight: normal;
+    color: #217346;
+}
+
+.gc-no-user-select {
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -o-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+}
+/*-----common css end-----*/
+
+/*-----formula textbox start-----*/
+/* function autocomplete */
+.gcsj-func-ac-popup {
+	margin: 0;
+	padding: 0;
+    background: #fff;
+	border: 1px solid rgba(0,0,0,0.2);
+	font-family: arial,sans-serif;
+	font-size: 12px;
+	line-height: 22px;
+	position: absolute;
+	width: 300px;
+	z-index: 2001;
+
+	-webkit-box-shadow: 0 2px 4px rgba(0,0,0,0.2);
+	-moz-box-shadow: 0 2px 4px rgba(0,0,0,0.2);
+	box-shadow: 0 2px 4px rgba(0,0,0,0.2);
+}
+
+.gcsj-func-ac-row {
+    margin: 0;
+    cursor: default;
+    padding: 2px 10px;
+    color: #666666;
+}
+
+.gcsj-func-ac-row-name {
+     color: #222;
+     font-size: 13px;
+     font-family: inconsolata,monospace,arial,sans,sans-serif;
+     margin: -2px 0;
+}
+
+.gcsj-func-ac-row-description {
+    color: #666;
+    display: none;
+    font-size: 11px;
+    margin: -2px 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.gcsj-ac-row-active {
+	background-color: #f5f5f5;
+	color: #000;
+	border-top: 1px solid #ebebeb;
+	border-bottom: 1px solid #ebebeb;
+	padding: 1px 10px
+}
+
+.gcsj-ac-row-active .gcsj-func-ac-row-description {
+    display:block;
+}
+
+/*  function help */
+.gcsj-func-help-popup {
+    background-color:#fff;
+    border: 1px solid rgba(0,0,0,0.2);
+    color: #222;
+    font-size: 11px;
+    word-wrap: break-word;
+    position: absolute;
+    width: 320px;
+    z-index: 2001;
+
+    -webkit-box-shadow:0 2px 4px rgba(0,0,0,0.2);
+	-moz-box-shadow:0 2px 4px rgba(0,0,0,0.2);
+	box-shadow:0 2px 4px rgba(0,0,0,0.2);
+}
+
+.gcsj-func-help-title {
+    background-color: #f5f5f5;
+    color: #222;
+    font-size: 13px;
+    padding: 1px 0 1px 10px;
+}
+
+.gcsj-func-help-body {
+    border-top: 1px solid #ebebeb;
+    font-family: arial, sans-serif;
+    overflow: hidden;
+}
+
+.gcsj-func-help-content {
+    padding-bottom: 2px;
+}
+
+.gcsj-func-help-section {
+    padding: 5px 10px;
+}
+
+.gcsj-func-help-section-title {
+    font-size: 11px;
+    color: #666;
+}
+
+.gcsj-func-help-section-content {
+    font-size: 11px;
+}
+
+.gcsj-func-help-formula {
+    font-family: inconsolata,monospace,arial,sans,sans-serif;
+    padding: 1px 0;
+}
+
+.gcsj-func-help-formula-name {
+}
+
+.gcsj-func-help-paramter {
+    padding-left:1px;
+}
+
+.gcsj-func-help-paramter-paren {
+}
+
+.gcsj-func-help-paramter-active {
+    background-color: #feb;
+}
+
+/* color text */
+.gcsj-func-color-content {
+    white-space: pre-wrap;
+}
+/*-----formula textbox end-----*/
+
+/*-----floatingobject start-----*/
+.gc-floatingobject-selected{
+    border:1px solid #939393;
+}
+
+.gc-floatingobject-unselected{
+    background-color: transparent;
+    border:1px solid transparent;
+}
+
+.gc-floatingobject-container{
+    position: absolute;
+    overflow: hidden;
+    box-sizing:content-box;
+}
+
+.gc-floatingobject-background-cover{
+    -webkit-background-size: cover; /* For WebKit*/
+    -moz-background-size: cover;    /* Mozilla*/
+    -o-background-size: cover;      /* Opera*/
+    background-size: cover;         /* Generic*/
+}
+
+.gc-floatingobject-moving-container{
+    position: absolute;
+    overflow: hidden;
+}
+
+.gc-floatingobject-moving-div{
+    position: absolute;
+    border:1px solid black;
+}
+.gc-floatingobject-resize-indicator {
+    box-sizing:content-box;
+}
+
+.gc-floatingobject-resize-indicator-select{
+    background-color:white;
+    border-radius:2px;
+    -moz-border-radius:1px;
+    border:1px solid #939393;
+    z-index:100;
+}
+
+.gc-floatingobject-resize-indicator-unSelect{
+    display: none;
+}
+
+.gc-floatingobject-absolute{
+    position: absolute;
+}
+
+.gc-floatingobject-content-container {
+    box-sizing:content-box;
+}
+/*-----floatingobject end-----*/
+
+/*-----scrollbar start-----*/
+/*scrollbar*/
+.gc-scroll-container{
+    background-color: #575757;
+    -moz-box-shadow: none;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+}
+.gc-scroll-corner-all {
+    border-radius: 2px;
+}
+.gc-scroll-arrow{
+    background-color: #999999;
+    border-style:solid;
+    border-color: #3b3b3b;
+    background-image: none;
+    border-radius: 0;
+}
+
+.gc-scroll-arrow .gc-scroll-arrowUp{
+    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAANCAYAAABy6+R8AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjExR/NCNwAAAClJREFUKFNjGEmgvLz8P5RJHABpgGGoEH6ArIEojdg0wDBUyShAAAYGAHSXJkH1wN/VAAAAAElFTkSuQmCC);
+    
+}
+.gc-scroll-arrowUp {
+    background-position: center;
+}
+
+.gc-scroll-arrow .gc-scroll-arrowDown {
+    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAANCAYAAABy6+R8AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjExR/NCNwAAACRJREFUKFNjGAVYQHl5+X9cGKoEOyBZAwyQrAEGSNYwpAEDAwBvhSZBmzrLGgAAAABJRU5ErkJggg==);
+}
+.gc-scroll-arrowDown {
+    background-position: center;
+}
+
+.gc-scroll-arrow .gc-scroll-arrowLeft{
+    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAANCAYAAABy6+R8AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjExR/NCNwAAADBJREFUKFNjGMKgvLz8P5RJHABpIEkTTAPRmpA1EK0JBMjSBAJkaQIBsjQNNGBgAABe7iZBxoz5vwAAAABJRU5ErkJggg==);
+}
+.gc-scroll-arrowLeft {
+    background-position: center;
+}
+
+.gc-scroll-arrow .gc-scroll-arrowRight{
+    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAANCAYAAABy6+R8AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjExR/NCNwAAAC5JREFUKFNjGIKgvLz8P5RJPABpIlkjTBNJGpE1Ea2RZA0gQLIGECBZw2ACDAwAhS4mQZAuqGcAAAAASUVORK5CYII=);
+}
+.gc-scroll-arrowRight {
+    background-position: center;
+}
+
+.gc-scroll-bar .gc-scrollbar-vertical {
+    background-image: none;
+    background-repeat: no-repeat;
+}
+.gc-scrollbar-vertical {
+    background-position: center;
+}
+
+.gc-scroll-bar .gc-scrollbar-horizontal {
+    text-indent: 0;
+    background-image: none;
+    background-repeat: no-repeat;
+}
+.gc-scrollbar-horizontal {
+    background-position: center;
+}
+
+.gc-scrollbar-wrapper {
+    background-color: transparent;
+}
+
+.gc-scroll-bar {
+    border-style:solid;
+    border-color:#3b3b3b;
+    background: #999999;
+    -moz-border-radius: 0px;
+    -webkit-border-radius: 0px;
+    border-radius: 0px;
+}
+.gc-scroll-arrow-hover {
+    border-style:solid;
+    border-color:#101010;
+    background: #b3b3b3;
+}
+.gc-scrollbar-stateHover {
+    border-style:solid;
+    border-color:#101010;
+    background: #b3b3b3;
+}
+
+.gc-scroll-arrow:active,
+.gc-scroll-bar:active,
+.gc-scrollbar-stateActive {
+    border-style:solid;
+    border-color:#101010;
+    background: #c4c4c4;
+    -webkit-box-shadow: none;
+          box-shadow: none;
+}
+/*-----scrollbar end-----*/
+

app/public/js/global.js

@@ -87,3 +87,9 @@ const postData = function (url, data, successCallback, errorCallBack) {
         }
     });
 };
+
+GetUrlQueryString = function (name) {
+    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
+    var r = window.location.search.substr(1).match(reg);
+    return r ?  unescape(r[2]) : null;
+}

app/public/js/lib_detail.js

@@ -0,0 +1,42 @@
+'use strict';
+
+/**
+ * 指标库-项目节参数
+ *
+ * @author Mai
+ * @date 2018/4/25
+ * @version
+ */
+
+$(document).ready(function() {
+    const billsSpread = SpreadJsObj.createNewSpread($('#bills-spread')[0]);
+    const billsTree = createNewPathTree({
+        id: 'n_id',
+        pid: 'n_pid',
+        order: 'n_order',
+        level: 'n_level',
+        full_path: 'n_full_path',
+        is_leaf: 'n_is_leaf',
+        rootId: -1,
+        keys: ['id', 'lib_id', 'n_id'],
+        preUrl: '/lib/detail',
+    });
+    billsTree.loadDatas(bills);
+    SpreadJsObj.initSheet(billsSpread.getActiveSheet(), {
+        cols: [
+            {title: '项目节编号', field: 'code', width: 120, cellType: 'tree'},
+            {title: '清单编号', field: 'b_code', width: 80},
+            {title: '名称', field: 'name', width: 200},
+            {title: '单位', field: 'unit', width: 50},
+            {title: '数量1', field: 'dgn_quantity1', width: 60, type: 'Number'},
+            {title: '数量2', field: 'dgn_quantity2', width: 60, type: 'Number'},
+            {title: '金额', field: 'total_price', width: 60, type: 'Number'},
+        ],
+        treeCol: 0,
+        emptyRows: 3,
+        headRows: 2,
+        headRowHeight: [40, 40],
+        defaultRowHeight: 21,
+    });
+    SpreadJsObj.loadSheetData(billsSpread.getActiveSheet(), 'tree', billsTree);
+});

app/public/js/path_tree.js

@@ -0,0 +1,422 @@
+/**
+ * 构建pathTree
+ * 可动态加载子节点，要求子节点获取接口按/xxx/get-children定义
+ * @param {Object} setting - 设置
+ * @returns {PathTree}
+ */
+const createNewPathTree = function (setting) {
+    const treeSetting = JSON.parse(JSON.stringify(setting));
+    const itemsPre = 'id_';
+
+    const PathTree = function () {
+        // 无索引
+        this.datas = [];
+        // 以key为索引
+        this.items = {};
+        // 以排序为索引
+        this.nodes = [];
+    };
+    const proto = PathTree.prototype;
+
+    /**
+     * 树结构根据显示排序
+     */
+    proto.sortTreeNode = function () {
+        const self = this;
+        const addSortNodes = function (nodes) {
+            for (let i = 0; i < nodes.length; i++) {
+                self.nodes.push(nodes[i]);
+                addSortNodes(self.getChildren(nodes[i]));
+            }
+        };
+        self.nodes = [];
+        addSortNodes(this.getChildren(null));
+    };
+
+    /**
+     * 加载数据(初始化), 并给数据添加部分树结构必须数据
+     * @param datas
+     */
+    proto.loadDatas = function (datas) {
+        // 清空旧数据
+        this.items = {};
+        this.nodes = [];
+        // 加载全部数据
+        for (const data of datas) {
+            const keyName = itemsPre + data[treeSetting.id];
+            this.items[keyName] = JSON.parse(JSON.stringify(data));
+            this.datas.push(this.items[keyName]);
+        }
+        this.sortTreeNode();
+        for (const node of this.nodes) {
+            const children = this.getChildren(node);
+            node.expanded = children.length > 0;
+            node.visible = true;
+        }
+    };
+    /**
+     * 加载数据(动态)，只加载不同部分
+     * @param {Array} datas
+     * @return {Array} 加载到树的数据
+     * @privateA
+     */
+    proto._updateData = function (datas) {
+        const loadedData = [];
+        for (const data of datas) {
+            let node = this.getItems(data[treeSetting.id]);
+            if (node) {
+                for (const prop in node) {
+                    if (data[prop] !== undefined) {
+                        node[prop] = data[prop];
+                    }
+                }
+                loadedData.push(node);
+            }
+        }
+        for (const node of loadedData) {
+            const children = this.getChildren(node);
+            node.expanded = children.length > 0 && children[0].visible;
+        }
+        this.sortTreeNode();
+        return loadedData;
+    };
+    /**
+     * 加载数据(动态)，只加载不同部分
+     * @param {Array} datas
+     * @return {Array} 加载到树的数据
+     * @privateA
+     */
+    proto._loadData = function (datas) {
+        const loadedData = [];
+        for (const data of datas) {
+            let node = this.getItems(data[treeSetting.id]);
+            if (node) {
+                for (const prop in node) {
+                    if (data[prop] !== undefined) {
+                        node[prop] = data[prop];
+                    }
+                }
+                loadedData.push(node);
+            } else {
+                const keyName = itemsPre + data[treeSetting.id];
+                const node = JSON.parse(JSON.stringify(data));
+                this.items[keyName] = node;
+                this.datas.push(node);
+                node.expanded = false;
+                node.visible = true;
+                loadedData.push(node);
+            }
+        }
+        this.sortTreeNode();
+        for (const node of loadedData) {
+            const children = this.getChildren(node);
+            if (!node.expanded && children.length > 0) {
+                node.expanded = true;
+                this._refreshChildrenVisible(node);
+            }
+        }
+        return loadedData;
+    };
+    /**
+     * 清理数据(动态)
+     * @param datas
+     * @private
+     */
+    proto._freeData = function (datas) {
+        const removeArrayData = function (array, data) {
+            const index = array.indexOf(data);
+            array.splice(index, 1);
+        };
+        for (const data of datas) {
+            const node = this.getItems(data[treeSetting.id]);
+            if (node) {
+                delete this.items[itemsPre + node[treeSetting.id]];
+                removeArrayData(this.datas, node);
+                removeArrayData(this.nodes, node);
+            }
+        }
+    };
+    /**
+     * 加载需展开的数据
+     * @param {Array} datas
+     * @returns {Array}
+     * @private
+     */
+    proto._loadExpandData = function (datas) {
+        const loadedData = [], existData = [], expandData = [];
+        for (const data of datas) {
+            let node = this.getItems(data[treeSetting.id]);
+            if (node) {
+                existData.push(node);
+            } else {
+                const keyName = itemsPre + data[treeSetting.id];
+                const node = JSON.parse(JSON.stringify(data));
+                this.items[keyName] = node;
+                this.datas.push(node);
+                node.expanded = false;
+                node.visible = true;
+                loadedData.push(node);
+            }
+        }
+        this.sortTreeNode();
+        for (const node of loadedData) {
+            const children = this.getChildren(node);
+            if (!node.expanded && children.length > 0) {
+                node.expaned = true;
+                this._refreshChildrenVisible(node);
+            }
+        }
+        for (const node of existData) {
+            const children = this.getChildren(node);
+            if (!node.expanded && children.length > 0) {
+                node.expanded = children.length > 0;
+                this._refreshChildrenVisible(node);
+                expandData.push(node);
+            }
+        }
+        return [loadedData, expandData];
+    };
+
+    /**
+     * 根据id获取树结构节点数据
+     * @param {Number} id
+     * @returns {Object}
+     */
+    proto.getItems = function (id) {
+        return this.items[itemsPre + id];
+    };
+    /**
+     * 查找node的parent
+     * @param {Object} node
+     * @returns {Object}
+     */
+    proto.getParent = function (node) {
+        return this.getItems(node[treeSetting.pid]);
+    };
+    /**
+     * 查询node的已下载子节点
+     * @param {Object} node
+     * @returns {Array}
+     */
+    proto.getChildren = function (node) {
+        const pid = node ? node[treeSetting.id] : treeSetting.rootId;
+        const children = this.datas.filter(function (x) {
+            return x[treeSetting.pid] === pid;
+        });
+        children.sort(function (a, b) {
+            return a.order - b.order;
+        });
+        return children;
+    };
+    /**
+     * 查询node的已下载的全部后代
+     * @param {Object} node
+     * @returns {Array}
+     */
+    proto.getPosterity = function (node) {
+        const reg = new RegExp('^' + node[treeSetting.full_path] + '.');
+        return this.datas.filter(function (x) {
+            return reg.test(x[treeSetting.full_path]);
+        })
+    };
+    /**
+     * 查询node是否是父节点的最后一个子节点
+     * @param {Object} node
+     * @returns {boolean}
+     */
+    proto.isLastSibling = function (node) {
+        const siblings = this.getChildren(this.getParent(node));
+        return node.order === siblings[siblings.length - 1].order;
+    };
+    /**
+     * 刷新子节点是否可见
+     * @param {Object} node
+     * @private
+     */
+    proto._refreshChildrenVisible = function (node) {
+        const children = this.getChildren(node);
+        for (const child of children) {
+            child.visible = node.expanded && node.visible;
+            this._refreshChildrenVisible(child);
+        }
+    }
+    /**
+     * 设置节点是否展开, 并控制子节点可见
+     * @param {Object} node
+     * @param {Boolean} expanded
+     */
+    proto.setExpanded = function (node, expanded) {
+        node.expanded = expanded;
+        this._refreshChildrenVisible(node);
+    };
+
+    /**
+     * 提取节点key和索引数据
+     * @param {Object} node - 节点
+     * @returns {key}
+     */
+    proto.getNodeKeyData = function (node) {
+        const data = {};
+        for (const key of treeSetting.keys) {
+            data[key] = node[key];
+        }
+        return data;
+    }
+    /**
+     * 得到树结构构成id
+     * @param node
+     * @returns {*}
+     */
+    proto.getNodeKey = function (node) {
+        return node[treeSetting.id];
+    }
+    /**
+     * 得到树结构构成level
+     * @param node
+     * @returns {*}
+     */
+    proto.getNodeLevel = function (node) {
+        return node[treeSetting.level];
+    }
+    /**
+     * 得到树结构构成is_leaf
+     * @param node
+     * @returns {*}
+     */
+    proto.getNodeIsLeaf = function (node) {
+        return node[treeSetting.is_leaf];
+    }
+    /**
+     * 得到树结构构成order
+     * @param node
+     * @returns {*}
+     */
+    proto.getNodeOrder = function (node) {
+        return node[treeSetting.order];
+    }
+
+    /**
+     * 以下方法需等待响应, 通过callback刷新界面
+     */
+    /**
+     * 加载子节点
+     * @param {Object} node
+     * @param {function} callback
+     */
+    proto.loadChildren = function (node, callback) {
+        const self = this;
+        const url = treeSetting.preUrl ? treeSetting.preUrl + '/get-children' : 'get-children';
+        postData(url, this.getNodeKeyData(node), function (data) {
+            self._loadData(data);
+            callback();
+        });
+    };
+    /**
+     * 树结构基本操作
+     * @param {String} url - 请求地址
+     * @param {Object} node - 操作节点
+     * @param {String} type - 操作类型
+     * @param {function} callback - 界面刷新
+     */
+    proto.baseOperation = function (url, node, type, callback) {
+        const self = this;
+        const data = {
+            id: node[treeSetting.id],
+            postType: type
+        };
+        postData(url, data, function (datas) {
+            const result = {};
+            if (datas.update) {
+                result.update = self._updateData(datas.update);
+            }
+            if (datas.create) {
+                result.create = self._loadData(datas.create);
+            }
+            if (datas.delete) {
+                result.delete = self._freeData(datas.delete);
+            }
+            callback(result);
+        });
+    };
+    /**
+     * 节点数据编辑
+     * @param {String} url - 请求地址
+     * @param {Array|Object} updateData - 需更新的数据
+     * @param {function} callback - 界面刷新
+     */
+    proto.update = function (url, updateData, callback) {
+        const self = this;
+        postData(url, updateData, function (datas) {
+            const result = self._updateData(datas);
+            callback(result);
+        }, function () {
+            if (updateData instanceof Array) {
+                const result = [];
+                for (const data of updateData) {
+                    result.push(self.getItems(data[treeSetting.id]));
+                }
+                callback(result)
+            } else {
+                callback([self.getItems(updateData[treeSetting.id])]);
+            }
+        });
+    };
+    /**
+     * 复制粘贴整块（目前仅可粘贴为后项）
+     * @param {String} url - 请求地址
+     * @param {Object} node - 操作节点
+     * @param {Array} block - 被复制整块的节点列表
+     * @param {function} callback - 界面刷新
+     */
+    proto.pasteBlock = function (url, node, block, callback) {
+        const self = this;
+        const data = {
+            id: node[treeSetting.id],
+            block: block
+        };
+        postData(url, data, function (datas) {
+            const result = {};
+            if (datas.update) {
+                result.update = self._updateData(datas.update);
+            }
+            if (datas.create) {
+                result.create = self._loadData(datas.create);
+            }
+            if (datas.delete) {
+                result.delete = self._freeData(datas.delete);
+            }
+            callback(result);
+        });
+    };
+    /**
+     * 提交数据
+     * @param {String} url - 请求地址
+     * @param {Object} node - 当前选中节点
+     * @param {Object} data - 提交的数据
+     * @param {function} callback - 界面刷新
+     */
+    proto.postData = function (url, node, data, callback) {
+        const self = this;
+        data.id = node[treeSetting.id];
+        postData(url, data, function (datas) {
+            const result = {};
+            if (datas.update) {
+                result.update = self._updateData(datas.update);
+            }
+            if (datas.create) {
+                result.create = self._loadData(datas.create);
+            }
+            if (datas.delete) {
+                result.delete = self._freeData(datas.delete);
+            }
+            if (datas.expand) {
+                const [create, update] = self._loadExpandData(datas.expand);
+                result.create = result.create.concat(create);
+                result.expand = update;
+            }
+            callback(result);
+        });
+    }
+
+    return new PathTree();
+}

app/public/js/spreadjs_rela/extend_celltype.js

@@ -0,0 +1,318 @@
+/**
+ * 补充的CellType类型
+ *
+ * @author Mai
+ * @date 2018/02/05
+ * @version
+ */
+
+SpreadJsExtendCellType = {
+    /**
+     * 获取树结构CellType
+     * 通过SpreadJsObj.loadSheetData(sheet, 'tree', tree)加载树结构数据
+     * 要求tree类型为PathTree, 节点必须含有{id, pid, level, order, is_leaf}数据
+     * @returns {TreeNodeCellType}
+     */
+    getTreeNodeCellType: function () {
+        const indent = 20;
+        const levelIndent = -5;
+        const halfBoxLength = 5;
+        const halfExpandLength = 3;
+
+        /**
+         * 画一条线段
+         * @param canvas - 画布
+         * @param x1 - 线段起点 x
+         * @param y1 - 线段起点 y
+         * @param x2 - 线段终点 x
+         * @param y2 - 线段终点 y
+         * @param color - 线段颜色
+         */
+        const drawLine = function (canvas, x1, y1, x2, y2, color) {
+            canvas.save();
+            // 设置偏移量
+            canvas.translate(0.5, 0.5);
+            canvas.beginPath();
+            canvas.moveTo(x1, y1);
+            canvas.lineTo(x2, y2);
+            canvas.strokeStyle = color;
+            canvas.stroke();
+            canvas.restore();
+        };
+        /**
+         * 画一个方框
+         * @param {Object} canvas - 画布
+         * @param {Object} rect - 方框区域
+         * @param {String} lineColor - 画线颜色
+         * @param {String} fillColor - 填充颜色
+         */
+        const drawBox = function (canvas, rect, lineColor, fillColor) {
+            canvas.save();
+            // 设置偏移量
+            canvas.translate(0.5, 0.5);
+            canvas.strokeStyle = lineColor;
+            canvas.beginPath();
+            canvas.moveTo(rect.left, rect.top);
+            canvas.lineTo(rect.left, rect.bottom);
+            canvas.lineTo(rect.right, rect.bottom);
+            canvas.lineTo(rect.right, rect.top);
+            canvas.lineTo(rect.left, rect.top);
+            canvas.stroke();
+            canvas.fillStyle = fillColor;
+            canvas.fill();
+            canvas.restore();
+        };
+        /**
+         * 画树结构-展开收起按钮
+         * @param {Object} canvas - 画布
+         * @param {Number} x - 单元格左顶点坐标 x
+         * @param {Number} y - 单元格左顶点坐标 y
+         * @param {Number} w - 单元格宽度
+         * @param {Number} h - 单元格高度
+         * @param {Number} centerX - 按钮中央坐标
+         * @param {Number} centerY - 按钮中央坐标
+         * @param {Boolean} expanded - 当前节点展开收起状态
+         */
+        const drawExpandBox = function (canvas, x, y, w, h, centerX, centerY, expanded) {
+            let rect = {
+                top: centerY - halfBoxLength,
+                bottom: centerY + halfBoxLength,
+                left: centerX - halfBoxLength,
+                right: centerX + halfBoxLength
+            };
+            let h1, h2, offset = 1;
+
+            if (rect.left < x + w) {
+                // 方框超出单元格宽度时，超出部分不画。
+                rect.right = Math.min(rect.right, x + w);
+                drawBox(canvas, rect, 'black', 'white');
+
+                // 画中心十字
+                // 画十字横线
+                h1 = centerX - halfExpandLength;
+                h2 = Math.min(centerX + halfExpandLength, x + w);
+                if (h2 > h1) {
+                    drawLine(canvas, h1, centerY, h2, centerY, 'black');
+                }
+                // 画十字竖线
+                if (!expanded && (centerX < x + w)) {
+                    drawLine(canvas, centerX, centerY - halfExpandLength, centerX, centerY + halfExpandLength, 'black');
+                }
+            }
+        };
+
+        let TreeNodeCellType = function (){};
+        TreeNodeCellType.prototype = new GC.Spread.Sheets.CellTypes.Text();
+        const proto = TreeNodeCellType.prototype;
+
+        /**
+         * 绘制方法
+         * @param {Object} canvas - 画布
+         * @param value - cell.value
+         * @param {Number} x - 单元格左顶点坐标 x
+         * @param {Number} y - 单元格左顶点坐标 y
+         * @param {Number} w - 单元格宽度
+         * @param {Number} h - 单元格高度
+         * @param {Object} style - cell.style
+         * @param {Object} options
+         */
+        proto.paint = function (canvas, value, x, y, w, h, style, options) {
+            // 清理 画布--单元格范围 旧数据
+            if (style.backColor) {
+                canvas.save();
+                canvas.fillStyle = style.backColor;
+                canvas.fillRect(x, y, w, h);
+                canvas.restore();
+            } else {
+                canvas.clearRect(x, y, w, h);
+            }
+
+            const tree = options.sheet.zh_tree;
+            const treeSetting = options.sheet.zh_setting;
+            // 使用TreeCellType前，需定义sheet.tree
+            if (tree && treeSetting) {
+                const node = options.row < tree.nodes.length ? tree.nodes[options.row] : null;
+                if (node) {
+                    const showTreeLine = true;
+                    const level = tree.getNodeLevel(node);
+                    const centerX = Math.floor(x) + (level) * indent + (level) * levelIndent + indent / 2;
+                    const centerY = Math.floor((y + (y + h)) / 2);
+                    // Draw Sibling Line
+                    if (showTreeLine) {
+                        // Draw Horizontal Line
+                        if (centerX < x + w) {
+                            const x1 = centerX + indent / 2;
+                            drawLine(canvas, centerX, centerY, Math.min(x1, x + w), centerY, 'gray');
+                        }
+                        // Draw Vertical Line
+                        if (centerX < x + w) {
+                            const y1 = tree.isLastSibling(node) ? centerY : y + h;
+                            const parent = tree.getParent(node);
+                            const y2 = y1 - centerY;
+                            if (tree.getNodeOrder(node) === 1 && !parent) {
+                                drawLine(canvas, centerX, centerY, centerX, y1, 'gray');
+                            } else {
+                                drawLine(canvas, centerX, y, centerX, y1, 'gray');
+                            }
+                        }
+                    }
+                    // Draw Expand Box
+                    if (!tree.getNodeIsLeaf(node)) {
+                        drawExpandBox(canvas, x, y, w, h, centerX, centerY, node.expanded);
+                    }
+                    // Draw Parent Line
+                    if (showTreeLine) {
+                        let parent = tree.getParent(node), parentCenterX = centerX - indent - levelIndent;
+                        while (parent) {
+                            if (!tree.isLastSibling(parent)) {
+                                if (parentCenterX < x + w) {
+                                    drawLine(canvas, parentCenterX, y, parentCenterX, y + h, 'gray');
+                                }
+                            }
+                            parent = tree.getParent(parent);
+                            parentCenterX -= (indent + levelIndent);
+                        }
+                    };
+                    // 重定位x
+                    x = x + (level + 1) * indent +  (level) * levelIndent;
+                }
+            }
+            // Drawing Text
+            GC.Spread.Sheets.CellTypes.Text.prototype.paint.apply(this, arguments);
+        };
+        /**
+         * 获取点击信息
+         * @param {Number} x
+         * @param {Number} y
+         * @param {Object} cellStyle
+         * @param {Object} cellRect
+         * @param {Object} context
+         * @returns {{x: *, y: *, row: *, col: *|boolean|*[]|number|{}|UE.dom.dtd.col, cellStyle: *, cellRect: *, sheet: *|StyleSheet, sheetArea: *}}
+         */
+        proto.getHitInfo = function (x, y, cellStyle, cellRect, context) {
+            return {
+                x: x,
+                y: y,
+                row: context.row,
+                col: context.col,
+                cellStyle: cellStyle,
+                cellRect: cellRect,
+                sheet: context.sheet,
+                sheetArea: context.sheetArea
+            };
+        };
+        /**
+         * 鼠标点击 树结构按钮 响应展开收起（未加载子节点时，先加载子节点）
+         * @param {Object} hitinfo - 见getHitInfo
+         */
+        proto.processMouseDown = function (hitinfo) {
+            const offset = -1;
+
+            const tree = hitinfo.sheet.zh_tree;
+            const treeSetting = hitinfo.sheet.zh_setting;
+            if (!tree || !treeSetting) { return; }
+
+            const node = tree.nodes[hitinfo.row];
+            if (!node) { return; }
+
+            const level = tree.getNodeLevel(node);
+            let centerX = hitinfo.cellRect.x + offset + (level) * indent + (level) * levelIndent + indent / 2;
+            let centerY = (hitinfo.cellRect.y + offset + (hitinfo.cellRect.y + offset + hitinfo.cellRect.height)) / 2;
+
+            // 点击展开节点时，如果已加载子项，则展开，反之这加载子项，展开
+            if (Math.abs(hitinfo.x - centerX) < halfBoxLength && Math.abs(hitinfo.y - centerY) < halfBoxLength) {
+                if (!node.expanded && !tree.getNodeIsLeaf(node) && tree.getChildren(node).length === 0) {
+                    tree.loadChildren(node, function () {
+                        node.expanded = true;
+                        const children = tree.getChildren(node);
+                        hitinfo.sheet.addRows(hitinfo.row + 1, children.length);
+                        SpreadJsObj.reLoadRowData(hitinfo.sheet, hitinfo.row + 1, children.length);
+                    });
+                } else {
+                    tree.setExpanded(node, !node.expanded);
+                    SpreadJsObj.massOperationSheet(hitinfo.sheet, function () {
+                        const posterity = tree.getPosterity(node);
+                        for (const child of posterity) {
+                            hitinfo.sheet.setRowVisible(tree.nodes.indexOf(child), child.visible, hitinfo.sheetArea);
+                        }
+                    });
+                    hitinfo.sheet.repaint();
+                }
+            }
+        }
+
+        return new TreeNodeCellType();
+    },
+    /**
+     * 获取带悬浮提示CellType
+     * @returns {TipCellType}
+     */
+    getTipCellType: function () {
+        const TipCellType = function () {};
+        // 继承 SpreadJs定义的 普通的TextCellType
+        TipCellType.prototype = new GC.Spread.Sheets.CellTypes.Text();
+        const proto = TipCellType.prototype;
+
+        /**
+         * 获取点击信息
+         * @param {Number} x
+         * @param {Number} y
+         * @param {Object} cellStyle
+         * @param {Object} cellRect
+         * @param {Object} context
+         * @returns {{x: *, y: *, row: *, col: *|boolean|*[]|number|{}|UE.dom.dtd.col, cellStyle: *, cellRect: *, sheet: *|StyleSheet, sheetArea: *}}
+         */
+        proto.getHitInfo = function (x, y, cellStyle, cellRect, context) {
+            return {
+                x: x,
+                y: y,
+                row: context.row,
+                col: context.col,
+                cellStyle: cellStyle,
+                cellRect: cellRect,
+                sheet: context.sheet,
+                sheetArea: context.sheetArea
+            };
+        };
+        /**
+         * 鼠标进入单元格事件 - 显示悬浮提示
+         * @param {Object} hitinfo - 见getHitInfo返回值
+         */
+        proto.processMouseEnter = function (hitinfo) {
+            const text = hitinfo.sheet.getText(hitinfo.row, hitinfo.col);
+            const setting = hitinfo.sheet.setting;
+            if (setting.pos && text && text !== '') {
+                if (!this._toolTipElement) {
+                    let div = $('#autoTip')[0];
+                    if (!div) {
+                        div = document.createElement("div");
+                        $(div).css("position", "absolute")
+                            .css("border", "1px #C0C0C0 solid")
+                            .css("box-shadow", "1px 2px 5px rgba(0,0,0,0.4)")
+                            .css("font", "9pt Arial")
+                            .css("background", "white")
+                            .css("padding", 5)
+                            .attr("id", 'autoTip');
+                        $(div).hide();
+                        document.body.insertBefore(div, null);
+                    }
+                    this._toolTipElement = div;
+                    $(this._toolTipElement).text(text).css("top", setting.pos.y + hitinfo.y + 15).css("left", setting.pos.x + hitinfo.x + 15);
+                    $(this._toolTipElement).show("fast");
+                }
+            }
+        };
+        /**
+         * 鼠标移出单元格事件 - 隐藏悬浮提示
+         * @param {Object} hitinfo - 见getHitInfo返回值
+         */
+        proto.processMouseLeave = function (hitinfo) {
+            if (this._toolTipElement) {
+                $(this._toolTipElement).hide();
+                this._toolTipElement = null;
+            }
+        };
+
+        return new TipCellType();
+    }
+};

app/public/js/spreadjs_rela/spreadjs_zh.js

@@ -0,0 +1,359 @@
+/**
+ * Spreadjs 通用方法集
+ *
+ * @author Mai
+ * @date 2018/02/06
+ * @version
+ */
+
+const SpreadJsObj = {
+    /**
+     * 创建Spread(默认1张表，3行数据)
+     * @param obj 用于创建spreadjs的Dom元素
+     * @returns {GC.Spread.Sheets.Workbook}
+     */
+    createNewSpread: function (obj) {
+        const spread = new GC.Spread.Sheets.Workbook(obj, {sheetCount: 1});
+        spread.options.tabStripVisible = false;
+        spread.options.scrollbarMaxAlign = true;
+        spread.options.cutCopyIndicatorVisible = false;
+        spread.options.allowCopyPasteExcelStyle = false;
+        spread.options.allowUserDragDrop = false;
+        spread.getActiveSheet().setRowCount(3);
+        return spread;
+    },
+    /**
+     * 保护sheet(需设置保护后, 单元格的locked等属性方可生效)
+     * @param {GC.Spread.Sheets.Worksheet} sheet
+     */
+    protectedSheet: function (sheet) {
+        const option = {
+            allowSelectLockedCells: true,
+            allowSelectUnlockedCells: true,
+            allowResizeRows: true,
+            allowResizeColumns: true
+        };
+
+        sheet.options.protectionOptions = option;
+        sheet.options.isProtected = true;
+    },
+    /**
+     * sheet批量操作优化(sheet操作大批量数据时, 屏蔽数据刷新, 可优化大量时间)
+     * @param {GC.Spread.Sheets.Worksheet} sheet
+     * @param {function} operation
+     */
+    massOperationSheet: function (sheet, operation) {
+        sheet.suspendPaint();
+        sheet.suspendEvent();
+        operation();
+        sheet.resumeEvent();
+        sheet.resumePaint();
+    },
+    /**
+     * 获取Obj左顶点位置(部分功能需通过spreadjs左顶点位置计算)
+     * @param obj
+     * @returns {{x: number, y: number}}
+     */
+    getObjPos: function (obj) {
+        let target = obj;
+        let pos = {x: obj.offsetLeft, y: obj.offsetTop};
+
+        target = obj.offsetParent;
+        while (target) {
+            pos.x += target.offsetLeft;
+            pos.y += target.offsetTop;
+            target = target.offsetParent;
+        }
+        return pos;
+    },
+    /**
+     * 以下四个方法来自Spread示例, 参见官网或文档
+     */
+    getHitTest: function (obj, e, sheet) {
+        var offset = obj.offset(),
+            x = e.pageX - offset.left,
+            y = e.pageY - offset.top;
+        return sheet.hitTest(x, y);
+    },
+    getTargetSelection: function (sheet, target) {
+        if (target.hitTestType === GC.Spread.Sheets.SheetArea.colHeader) {
+            return sheet.getRange(-1, target.col, sheet.getRowCount(), 1);
+        } else if (target.hitTestType === GC.Spread.Sheets.SheetArea.rowHeader) {
+            return sheet.getRange(target.row, -1, 1, sheet.getColumnCount());
+        } else if (target.hitTestType === GC.Spread.Sheets.SheetArea.viewport) {
+            return sheet.getRange(target.row, target.col, 1, 1);
+        } else if (target.hitTestType === GC.Spread.Sheets.SheetArea.corner) {
+            return sheet.getRange(-1, -1, sheet.getRowCount(), sheet.getColumnCount());
+        };
+    },
+    getCellInSelections: function (selections, row, col) {
+        const count = selections.length;
+        let range;
+        for (var i = 0; i < count; i++) {
+            range = selections[i];
+            if (range.contains(row, col)) {
+                return range;
+            }
+        }
+        return null;
+    },
+    checkTargetInSelection: function (selections, range) {
+        var count = selections.length, sel;
+        for (var i = 0; i < count; i++) {
+            sel = selections[i];
+            if (sel.containsRange(range)) {
+                return true;
+            }
+        }
+        return false;
+    },
+    /**
+     * 获取 spread 在鼠标右键时, spread的选中区域
+     * viewport, 选中鼠标点击单元格X, X不在原选中区域内, 则选中X
+     * colHeader, 选中整列
+     * rowHeader, 选中整行
+     * corner, 全选
+     * 该方法返回不符合需求时，可通过getHitTest/getTargetSelection/getCellInSelections/checkTargetInSelection来确定鼠标右键点击时，spread当前Sheet应选中的单元格
+     * @param obj: 创建Spread的Dom元素(jquery-contextmenu.build方法的第一个变量可读取)
+     * @param e: jquery-contextmenu.build方法的第二个变量
+     * @param {GC.Spread.Sheets.Workbook} spread
+     * @returns {*}
+     */
+    safeRightClickSelection: function (obj, e, spread) {
+        const sheet = spread.getActiveSheet();
+        const selections = sheet.getSelections(), target = this.getHitTest(obj, e, sheet), range = this.getTargetSelection(sheet, target);
+        if (!this.checkTargetInSelection(selections, range)) {
+            sheet.setSelection(range.row, range.col, range.rowCount, range.colCount);
+        }
+        return target;
+    },
+    /**
+     * sheet中 使用delete键，触发EndEdited事件
+     * @param {GC.Spreads.Sheets.Workbook} spread
+     * @param {function} fun
+     */
+    addDeleteBind: function (spread, fun) {
+        spread.commandManager().register('deleteEvent', function () {
+            fun(spread.getActiveSheet());
+        });
+        spread.commandManager().setShortcutKey('null', GC.Spread.Commands.Key.del, false, false, false, false);
+        spread.commandManager().setShortcutKey('deleteEvent', GC.Spread.Commands.Key.del, false, false, false, false);
+    },
+    /**
+     * 根据sheet.zh_setting初始化sheet表头
+     * @param {GC.Spread.Sheets.Worksheet} sheet
+     */
+    initSheetHeader: function (sheet) {
+        if (!sheet.zh_setting) { return; }
+
+        this.massOperationSheet(sheet, function () {
+            sheet.setColumnCount(sheet.zh_setting.cols.length);
+            for (const i in sheet.zh_setting.cols) {
+                const col = sheet.zh_setting.cols[i];
+                const cell = sheet.getCell(0, i, GC.Spread.Sheets.SheetArea.colHeader);
+                cell.text(col.title);
+                sheet.setColumnWidth(i, col.width);
+            }
+            sheet.rowOutlines.direction(GC.Spread.Sheets.Outlines.OutlineDirection.backward);
+            sheet.showRowOutline(false);
+            if (sheet.zh_setting.defaultRowHeight) {
+                sheet.defaults.rowHeight = sheet.zh_setting.defaultRowHeight;
+            }
+        });
+    },
+    /**
+     * 初始化sheet, 设置sheet.zh_setting, 并初始化表头
+     * @param {GC.Spread.Sheets.Worksheet} sheet
+     * @param setting
+     */
+    initSheet: function (sheet, setting) {
+        sheet.zh_setting = setting;
+        this.initSheetHeader(sheet);
+        sheet.extendCellType = {};
+    },
+    /**
+     * 整个sheet重新加载数据
+     * @param sheet
+     */
+    reLoadSheetData: function (sheet) {
+        this.protectedSheet(sheet);
+        this.massOperationSheet(sheet, function () {
+            // 设置总行数
+            const sortData = sheet.zh_dataType === 'tree' ? sheet.zh_tree.nodes : sheet.zh_data;
+            const totalRow = sortData.length + sheet.zh_setting.emptyRows;
+            sheet.setRowCount(totalRow, GC.Spread.Sheets.SheetArea.viewport);
+            // 控制空白行
+            const emptyRows = sheet.getRange(sortData.length, -1, sheet.zh_setting.emptyRows, -1);
+            emptyRows.locked(sheet.zh_dataType === 'tree');
+            // 单元格写入数据
+            sortData.forEach(function (data, i) {
+                sheet.zh_setting.cols.forEach(function (col, j) {
+                    const cell = sheet.getCell(i, j);
+                    if (col.field !== '' && data[col.field]) {
+                        cell.value(data[col.field]).locked(col.readOnly || false);
+                    } else {
+                        cell.locked(col.readOnly || false);
+                    }
+                });
+            });
+            // 设置列单元格格式
+            sheet.zh_setting.cols.forEach(function (col, j) {
+                if (!col.cellType) { return; }
+
+                if (col.cellType === 'tree') {
+                    if (!sheet.extendCellType.tree) {
+                        sheet.extendCellType.tree = SpreadJsExtendCellType.getTreeNodeCellType();
+                    }
+                    sheet.getRange(-1, j, -1, 1).cellType(sheet.extendCellType.tree);
+                } else if (col.cellType === 'tip') {
+                    if (!sheet.extendCellType.tip) {
+                        sheet.extendCellType.tip = SpreadJsExtendCellType.getTipCellType();
+                    }
+                    sheet.getRange(-1, j, -1, 1).cellType(sheet.extendCellType.tip);
+                }
+            });
+        });
+    },
+    /**
+     * 重新加载部分数据行
+     * @param {GC.Spread.Sheets.Worksheet} sheet
+     * @param {Number} row
+     * @param {Number} count
+     */
+    reLoadRowData: function (sheet, row, count) {
+        this.massOperationSheet(sheet, function () {
+            const sortData = sheet.zh_dataType === 'tree' ? sheet.zh_tree.nodes : sheet.zh_data;
+            // 清空原单元格数据
+            sheet.clear(row, -1, count, -1, GC.Spread.Sheets.SheetArea.viewport, GC.Spread.Sheets.StorageType.data);
+            // 单元格重新写入数据
+            for (let i = row; i < row + count; i++) {
+                const data = sortData[i];
+                if (!data) { continue; }
+                sheet.zh_setting.cols.forEach(function (col, j) {
+                    const cell = sheet.getCell(i, j);
+                    if (col.field !== '' && data[col.field]) {
+                        cell.value(data[col.field]).locked(col.readOnly || false);
+                    } else {
+                        cell.locked(col.readOnly || false);
+                    }
+                });
+            };
+            // 设置列单元格格式
+            sheet.zh_setting.cols.forEach(function (col, j) {
+                if (!col.cellType) { return; }
+
+                if (col.cellType === 'tree') {
+                    if (!sheet.extendCellType.tree) {
+                        sheet.extendCellType.tree = SpreadJsExtendCellType.getTreeNodeCellType();
+                    }
+                    sheet.getRange(row, j, count, 1).cellType(sheet.extendCellType.tree);
+                } else if (col.cellType === 'tip') {
+                    if (!sheet.extendCellType.tip) {
+                        sheet.extendCellType.tip = SpreadJsExtendCellType.getTipCellType();
+                    }
+                    sheet.getRange(row, j, count, 1).cellType(sheet.extendCellType.tip);
+                }
+            });
+        });
+    },
+    /**
+     * 重新加载部分行数据
+     * @param {GC.Spread.Sheets.Worksheet} sheet
+     * @param {Array} rows
+     */
+    reLoadRowsData: function (sheet, rows) {
+        this.massOperationSheet(sheet, function () {
+            const sortData = sheet.zh_dataType === 'tree' ? sheet.zh_tree.nodes : sheet.zh_data;
+            for (const row of rows) {
+                // 清空原单元格数据
+                sheet.clear(row, -1, 1, -1, GC.Spread.Sheets.SheetArea.viewport, GC.Spread.Sheets.StorageType.data);
+                const data = sortData[row];
+                // 单元格重新写入数据
+                sheet.zh_setting.cols.forEach(function (col, j) {
+                    // 设置值
+                    const cell = sheet.getCell(row, j);
+                    if (col.field !== '' && data[col.field]) {
+                        cell.value(data[col.field]).locked(col.readOnly || false);
+                    } else {
+                        cell.locked(col.readOnly || false);
+                    }
+                    // 设置单元格格式
+                    if (col.cellType) {
+                        if (col.cellType === 'tree') {
+                            if (!sheet.extendCellType.tree) {
+                                sheet.extendCellType.tree = SpreadJsExtendCellType.getTreeNodeCellType();
+                            }
+                            sheet.getRange(row, j, 1, 1).cellType(sheet.extendCellType.tree);
+                        } else if (col.cellType === 'tip') {
+                            if (!sheet.extendCellType.tip) {
+                                sheet.extendCellType.tip = SpreadJsExtendCellType.getTipCellType();
+                            }
+                            sheet.getRange(row, j, 1, 1).cellType(sheet.extendCellType.tip);
+                        }
+                    }
+                });
+            };
+        });
+    },
+    /**
+     * 根据data加载sheet数据，合并了一般数据和树结构数据的加载
+     * @param {GC.Spread.Sheets.Worksheet} sheet
+     * @param {String} dataType - 1.'zh_data' 2.'zh_tree'
+     * @param {Array|PathTree} data - 对dataType对应
+     */
+    loadSheetData: function (sheet, dataType, data){
+        sheet.zh_dataType = dataType;
+        if (dataType === 'tree') {
+            sheet.zh_tree = data;
+        } else {
+            sheet.zh_data = data;
+        }
+        this.reLoadSheetData(sheet);
+    },
+    /**
+     * 获取复制数据HTML格式（过滤不可见单元格）
+     * @param {GC.Spread.Sheets.Worksheet} sheet
+     * @returns {string}
+     */
+    getFilterCopyHTML: function (sheet) {
+        const sel = sheet.getSelections()[0];
+        const html = [];
+        html.push('<table>');
+        for (let i = sel.row, iLen = sel.row + sel.rowCount; i < iLen; i++) {
+            // 跳过隐藏行
+            if (!sheet.getCell(i, -1).visible()) { continue; }
+
+            const rowHtml = [];
+            rowHtml.push('<tr>');
+            for (let j = sel.col, jLen = sel.col + sel.colCount; j < jLen; j++) {
+                const data = sheet.getText(i, j);
+                rowHtml.push('<td>' + data + '</td>');
+            }
+            rowHtml.push('</tr>');
+            html.push(rowHtml.join(''));
+        }
+        html.push('</table>');
+        return html.join('');
+    },
+    /**
+     * 获取复制数据Text格式（过滤不可见单元格）
+     * @param {GC.Spread.Sheets.Worksheet} sheet
+     * @returns {string}
+     */
+    getFilterCopyText: function (sheet) {
+        const copyData = [];
+        const sel = sheet.getSelections()[0];
+        for(let i = sel.row, iLen = sel.row + sel.rowCount; i < iLen; i++) {
+            // 跳过隐藏行
+            if (!sheet.getCell(i, -1).visible()) { continue; }
+
+            const rowText = [];
+            for (let j = sel.col, jLen = sel.col + sel.colCount; j < jLen; j++) {
+                const data = sheet.getText(i, j);
+                rowText.push(data);
+            }
+            copyData.push(rowText.join('\t'));
+        }
+        return copyData.join('\n');
+    }
+};

app/public/js/template.js

@@ -127,9 +127,9 @@ $(document).ready(function () {
     $('#nodeMatchCode').blur(function () {
         const self = $(this);
         if (self.val() === self.attr('org-value')) { return; }
-        const path = window.location.pathname.split('/');
+        const nodeId = GetUrlQueryString('id');
         postData('/template/updateNodeMatch', {
-            id: path.length > 2 ? path[2] : 1,
+            id: nodeId ? nodeId : 1,
             match_key: $(this).val(),
         }, function (data) {
             self.attr('org-value', data.match_key);
@@ -146,10 +146,10 @@ $(document).ready(function () {
     $('input[name=paramMatchCode]').blur(function () {
         const self = $(this);
         if (self.val() === self.attr('org-value')) { return; }
-        const path = window.location.pathname.split('/');
+        const nodeId = GetUrlQueryString('id');
         const paramCode = $(this).parent().parent().prev().attr('code');
         postData('/template/updateParamMatch', {
-            node_id: path.length > 2 ? path[2] : 1,
+            node_id: nodeId ? nodeId : 1,
             code: paramCode,
             match_key: $(this).val(),
         }, function (data) {
@@ -165,10 +165,10 @@ $(document).ready(function () {
         const newMatchNum = self.attr('value');
         const oldMatchNum = self.parent().prev().val();
         if (newMatchNum === oldMatchNum) { return; }
-        const path = window.location.pathname.split('/');
+        const nodeId = GetUrlQueryString('id');
         const paramCode = $(this).parent().parent().parent().parent().prev().attr('code');
         postData('/template/updateParamMatch', {
-            node_id: path.length > 2 ? path[2] : 1,
+            node_id: nodeId ? nodeId : 1,
             code: paramCode,
             match_num: newMatchNum,
         }, function (data) {

app/router.js

@@ -18,7 +18,8 @@ module.exports = app => {
     app.get('/lib', sessionAuth, 'libController.index');
     app.post('/lib/upload', sessionAuth, 'libController.upload');
     app.get('/lib/detail/:id', sessionAuth, 'libController.detail');
-    app.get('/lib/detail2/:id', sessionAuth, 'libController.detail2');
+    app.post('/lib/detail/get-children', sessionAuth, 'libController.getChildren');
+    app.get('/lib/global/:id', sessionAuth, 'libController.global');
     app.post('/lib/delete', sessionAuth, 'libController.delete');
     app.post('/lib/enter', sessionAuth, 'libController.enter');
 

app/service/bills.js

@@ -0,0 +1,90 @@
+'use strict';
+
+/**
+ *
+ *
+ * @author EllisRan.
+ * @date 2018/4/25
+ * @version
+ */
+
+module.exports = app => {
+
+    class Bills extends app.BaseService {
+
+        /**
+         * 构造函数
+         *
+         * @param {Object} ctx - egg全局变量
+         * @return {void}
+         */
+        constructor(ctx) {
+            super(ctx);
+            this.tableName = 'quota_bills';
+        }
+
+        /**
+         * 根据层级获取数据
+         *
+         * @param {Number} tenderId - 标段id
+         * @param {Number} showLevel - 显示层数
+         * @return {Array} - 返回数据
+         */
+        async getDataByLibId(libId, showLevel = 4) {
+            if (libId <= 0) {
+                return [];
+            }
+            this.initSqlBuilder();
+            this.sqlBuilder.setAndWhere('lib_id', {
+                value: libId,
+                operate: '=',
+            });
+
+            if (showLevel > 0) {
+                this.sqlBuilder.setAndWhere('n_level', {
+                    value: showLevel,
+                    operate: '<=',
+                });
+            }
+
+            const [sql, sqlParam] = this.sqlBuilder.build(this.tableName);
+            const data = await this.db.query(sql, sqlParam);
+
+            return data;
+        }
+
+        /**
+         * 根据 父节点id 获取子节点
+         * @param tenderId
+         * @param nodeId
+         * @return {Promise<*>}
+         */
+        async getChildrenByParentId(libId, nodeId) {
+            if (libId <= 0 || !nodeId) {
+                return undefined;
+            }
+            const nodeIds = nodeId instanceof Array ? nodeId : [nodeId];
+            if (nodeIds.length === 0) {
+                return [];
+            }
+
+            this.initSqlBuilder();
+            this.sqlBuilder.setAndWhere('lib_id', {
+                value: libId,
+                operate: '=',
+            });
+            this.sqlBuilder.setAndWhere('n_pid', {
+                value: nodeIds,
+                operate: 'in',
+            });
+            this.sqlBuilder.orderBy = [['n_order', 'ASC']];
+
+            const [sql, sqlParam] = this.sqlBuilder.build(this.tableName);
+            const data = await this.db.query(sql, sqlParam);
+
+            return data;
+        }
+    }
+
+    return Bills;
+}

app/service/match.js

@@ -0,0 +1,252 @@
+'use strict';
+
+/**
+ *
+ *
+ * @author Mai
+ * @date 2018/4/25
+ * @version
+ */
+
+const Service = require('egg').Service;
+const paramConst = require('../const/template_param');
+const nodeConst = require('../const/template_node');
+module.exports = app => {
+
+    class Match extends Service {
+
+        /**
+         * 初始化匹配所需变量
+         * @param {Array|Object} bills - 导入的清单数据
+         * @private
+         */
+        _init(bills) {
+            this.bills = bills instanceof Array ? bills : [bills];
+            this.fixedBills = this.bills.filter(function (b) {
+                return b.n_id < 100;
+            });
+            this.nodes = [];
+            this.indexes = [];
+            this.params = [];
+        }
+        /**
+         * 获取指标模板数据
+         * @param {Number} templateId - 指标模板Id
+         * @returns {Promise<void>}
+         * @private
+         */
+        async _getTemplateData (templateId) {
+            this.templateNodes = await this.ctx.service.templateNode.getAllDataByCondition({ template_id: templateId });
+            this.templateIndexes = await this.ctx.service.templateIndex.getAllDataByCondition({ template_id: templateId });
+            this.templateParams = await this.ctx.service.templateParam.getAllDataByCondition({ template_id: templateId });
+        }
+
+        /**
+         * 检查code是否满足匹配规则rule
+         * @param {String} code - 匹配编号
+         * @param {String} rule - 匹配规则
+         * @returns {boolean}
+         * @private
+         */
+        _matchCode(code, rule) {
+            const codeParts = code.split('-');
+            const ruleParts = rule.split('-');
+            const numReg = /(^[0-9]+$)/;
+            if (codeParts.length !== ruleParts.length) { return false; }
+            for (let i = 0, iLen = codeParts.length; i < iLen; i++) {
+                if (numReg.test(ruleParts[i]) && ruleParts[i] !== codeParts[i]) {
+                    return false;
+                }
+            }
+            return true;
+        }
+
+        /**
+         * 过滤符合指标节点node匹配规则的清单
+         * 已经匹配过的清单不再匹配
+         *
+         * @param {Object} node - 指标节点
+         * @private
+         */
+        _filterBills (node) {
+            const self = this;
+            return this.bills.filter(function (b) {
+                if (!b.match_node) {
+                    if (node.match_type === nodeConst.matchType.code) {
+                        return self._matchCode(b.code, node.match_key);
+                    } else {
+                        return node.match_key === b.name;
+                    }
+                } else {
+                    return false;
+                }
+            })
+        }
+
+        /**
+         * 根据指标参数取值类别，从清单取值
+         *
+         * @param {Object} param - 指标参数
+         * @param {Object} bills - 清单节点
+         * @returns {number}
+         * @private
+         */
+        _getNodeBillsValue(param, bills) {
+            switch (param.match_num) {
+                case paramConst.matchNum.quantity: return bills.quantity;
+                case paramConst.matchNum.total_price: return bills.total_price;
+                case paramConst.matchNum.dgn_quantity1: return bills.dgn_quantity1;
+                case paramConst.matchNum.dgn_quantity2: return bills.dgn_quantity2;
+            }
+        }
+
+        /**
+         * 获取指标参数取值(固定Id匹配)
+         * @param {Object} param - 指标参数
+         * @returns {*}
+         * @private
+         */
+        _getFixedIdParamValue(param) {
+            for (const b of this.fixedBills) {
+                if (b.n_id == param.match_key) {
+                    return this._getNodeBillsValue(param, b);
+                }
+            }
+            return undefined;
+        }
+
+        /**
+         * 获取指标参数取值(编号匹配)
+         * @param param
+         * @param nodeBills
+         * @returns {*}
+         * @private
+         */
+        _getCodeParamValue(param) {
+            for (const b of this.bills) {
+                if (this._matchCode(b.code, param.match_key)) {
+                    return this._getNodeBillsValue(param, b);
+                }
+            }
+            return undefined;
+        }
+
+        /**
+         * 获取指标参数取值
+         * @param {Object} param - 指标参数
+         * @param {Object} nodeBills - 指标参数 所属 指标节点，绑定的 清单
+         * @returns {*}
+         * @private
+         */
+        _getParamValue(param, nodeBills) {
+            switch (param.match_type) {
+                case paramConst.matchType.fixed_id: return this._getFixedIdParamValue(param);
+                case paramConst.matchType.node_default: return this._getNodeBillsValue(param, nodeBills);
+                case paramConst.matchType.code: return this._getCodeParamValue(param);
+                // to do 匹配属性
+                default: return undefined;
+            }
+        }
+
+        /**
+         * 同步指标节点下的全部指标参数
+         * @param {Number} nodeId
+         * @private
+         */
+        _syncNodeParam(nodeId, nodeBills) {
+            const nodeParams = this.templateParams.filter(function (p) {
+                return p.node_id === nodeId;
+            });
+            for (const np of nodeParams) {
+                const newParam = {
+                    node_id: nodeId,
+                    lib_id: nodeBills.lib_id,
+                    param_id: this.params.length + 1,
+                    source_id: np.param_id,
+                    code: np.code,
+                    name: np.name,
+                    match_type: np.match_type,
+                    match_key: np.match_key,
+                    match_num: np.match_num,
+                }
+                newParam.match_value = this._getParamValue(newParam, nodeBills);
+                newParam.calc_value = newParam.match_value;
+                this.params.push(newParam);
+            }
+        }
+
+        /**
+         * 同步指标节点下的全部指标
+         * @param {Number} nodeId
+         * @private
+         */
+        _syncNodeIndex(node) {
+            const nodeIndexes = this.templateIndexes.filter(function (i) {
+                return i.node_id === node.source_id;
+            });
+            for (const ni of nodeIndexes) {
+                const newIndex = {
+                    node_id: node.node_id,
+                    lib_id: node.lib_id,
+                    index_id: this.indexes.length + 1,
+                    source_id: ni.index_id,
+                    code: ni.code,
+                    name: ni.name,
+                    unit1: ni.unit1,
+                    unit2: ni.unit2,
+                    rule: ni.rule,
+                    calc_rule: ni.calc_rule,
+                    parse_rule: ni.parse_rule,
+                    index_type: ni.index_type,
+                }
+                this.indexes.push(newIndex);
+            }
+        }
+
+        /**
+         * 匹配指标节点
+         * @param node
+         * @private
+         */
+        _matchNode(node) {
+            if (!node) { return; }
+
+            const matchedBills = this._filterBills(node);
+            for (const mb of matchedBills) {
+                const newNode = {
+                    node_id: this.nodes.length + 1,
+                    lib_id: mb.lib_id,
+                    source_id: node.node_id,
+                    code: node.code,
+                    name: node.name,
+                    match_type: node.match_type,
+                    match_key: node.match_key,
+                    bills_id: mb.n_id,
+                }
+                this.nodes.push(newNode);
+                this._syncNodeParam(newNode.source_id, mb);
+                this._syncNodeIndex(newNode);
+                mb.match_node = newNode.node_id;
+            }
+        }
+
+        /**
+         *
+         * @param bills
+         * @returns {Promise<void>}
+         */
+        async matchBills (bills) {
+            this._init(bills);
+            // 获取指标模板全部数据
+            await this._getTemplateData(1);
+            // 同步全局指标参数
+            this._syncNodeParam(0, this.bills[0]);
+            // 遍历模板中所有指标节点，匹配清单
+            for (const node of this.templateNodes) {
+                this._matchNode(node);
+            }
+        }
+    };
+
+    return Match;
+}

app/service/quota_bills.js

@@ -1,49 +0,0 @@
-'use strict';
-
-/**
- *
- *
- * @author EllisRan.
- * @date 2018/4/25
- * @version
- */
-
-module.exports = app => {
-
-    class QuotaBills extends app.BaseService {
-
-        /**
-         * 构造函数
-         *
-         * @param {Object} ctx - egg全局变量
-         * @return {void}
-         */
-        constructor(ctx) {
-            super(ctx);
-            this.tableName = 'quota_bills';
-        }
-
-        /**
-         * 获取标段项目节列表
-         *
-         * @param {Object} lid - 指标库id
-         * @return {Array} - 返回列表数据
-         */
-        async getListByLid(lid) {
-
-            this.initSqlBuilder();
-
-            this.sqlBuilder.setAndWhere('lib_id', {
-                value: lid,
-                operate: '=',
-            });
-
-            const [sql, sqlParam] = this.sqlBuilder.build(this.tableName);
-
-            return await this.db.query(sql, sqlParam);
-        }
-
-    }
-
-    return QuotaBills;
-}

app/service/quota_lib.js

@@ -135,7 +135,7 @@ module.exports = app => {
          * @param {Object} jsonData - json文件数据
          * @return {Boolean} - 更新结果
          */
-        async batchAdd(postData,jsonData) {
+        async batchAdd(postData, jsonData) {
             const conn = await this.db.beginTransaction(); // 初始化事务
             try{
                 const insertData = {
@@ -157,7 +157,11 @@ module.exports = app => {
                 for(let i = 0; i < billsData.length; i++) {
                     billsData[i] = this.ctx.helper.operationJson(billsData[i],'lib_id',lib_id);
                 }
+                await this.ctx.service.match.matchBills(billsData);
                 const billsResult = await conn.insert('is_quota_bills',billsData);
+                const nodeResult = await this.ctx.service.tenderNode.insertData(this.ctx.service.match.nodes, conn);
+                const indexResult = await this.ctx.service.tenderIndex.insertData(this.ctx.service.match.indexes, conn);
+                const paramResult = await this.ctx.service.tenderParam.insertData(this.ctx.service.match.params, conn);
                 await conn.commit(); // 提交事务
                 return true;
             } catch (err) {

app/service/template_index.js

@@ -1,7 +1,7 @@
 'use strict';
 
 /**
- * 指标节点业务类
+ * 指标模板 -- 指标节点业务类
  *
  * @author Mai
  * @date 2018/4/19

app/service/template_param.js

@@ -37,14 +37,14 @@ module.exports = app => {
                 throw '导入指标参数错误';
             }
         }
-
-        /**
-         * 保存指标节点匹配规则
-         *
-         * @param {Object} data
-         * @returns {Promise<*>}
-         */
         async updateNodeMatch(data, condition) {
+
+            /**
+             * 保存指标节点匹配规则
+             *
+             * @param {Object} data
+             * @returns {Promise<*>}
+             */
             try {
                 if (data.match_key && !this.ctx.helper.validMatchCode(data.match_key)) {
                     throw '用于绑定的分项编号有误'

app/service/tender_index.js

@@ -0,0 +1,27 @@
+'use strict';
+
+/**
+ *
+ *
+ * @author Mai
+ * @date
+ * @version
+ */
+
+module.exports = app => {
+    class TenderIndex extends app.BaseService {
+        /**
+         * 构造函数
+         *
+         * @param {Object} ctx - egg全局context
+         * @return {void}
+         */
+        constructor(ctx) {
+            super(ctx);
+            this.tableName = 'tender_index';
+        }
+
+    };
+
+    return TenderIndex;
+};

app/service/tender_node.js

@@ -0,0 +1,27 @@
+'use strict';
+
+/**
+ * 标段 -- 指标节点业务类
+ *
+ * @author Mai
+ * @date 2018/4/25
+ * @version
+ */
+
+module.exports = app => {
+    class TenderNode extends app.BaseService {
+        /**
+         * 构造函数
+         *
+         * @param {Object} ctx - egg全局context
+         * @return {void}
+         */
+        constructor(ctx) {
+            super(ctx);
+            this.tableName = 'tender_node';
+        }
+
+    };
+
+    return TenderNode;
+};

app/service/tender_param.js

@@ -0,0 +1,26 @@
+'use strict';
+
+/**
+ *
+ *
+ * @author Mai
+ * @date
+ * @version
+ */
+
+module.exports = app => {
+    class TenderParam extends app.BaseService {
+        /**
+         * 构造函数
+         *
+         * @param {Object} ctx - egg全局context
+         * @return {void}
+         */
+        constructor(ctx) {
+            super(ctx);
+            this.tableName = 'tender_param';
+        }
+    };
+
+    return TenderParam;
+};

app/view/layout/layout.ejs

@@ -11,6 +11,8 @@
     <link rel="stylesheet" href="/public/css/font-awesome/font-awesome.min.css">
     <!--zTree-->
     <link rel="stylesheet" href="/public/css/ztree/zTreeStyle.css" type="text/css">
+    <!--spreadJs-->
+    <link rel="stylesheet" href="/public/css/spreadjs/sheets/gc.spread.sheets.excel2013lightGray.10.0.1.css">
 
     <script src="/public/js/jquery/jquery-3.2.1.min.js"></script>
     <script src="/public/js/popper/popper.min.js"></script>

app/view/lib/detail.ejs

@@ -3,7 +3,8 @@
         <div class="title-main">
             <h2>
                 <%= libInfo.filename %>
-                <a href="/lib/detail2/<%= libInfo.id %>" class="btn btn-primary btn-sm pull-right">填写项目节参数</a>
+                <% if(libInfo.status === libConst.status.pend) { %><a href="#storage" data-toggle="modal" data-target="#storage" class="btn btn-primary btn-sm pull-right">入库</a><% } %>
+                <a href="#del" data-toggle="modal" data-target="#del" class="btn btn-outline-danger btn-sm pull-right">从库中删除</a>
             </h2>
         </div>
     </div>
@@ -11,21 +12,108 @@
         <div class="c-header p-0 col-12">
             <ul class="nav nav-tabs">
                 <li class="nav-item">
-                    <a class="nav-link active" href="javascript:void(0);">全局参数</a>
+                    <a class="nav-link" href="/lib/global/<%= ctx.params.id %>">全局参数</a>
                 </li>
                 <li class="nav-item">
-                    <a class="nav-link disabled" data-container="body" data-toggle="popover" data-placement="right" data-content="请点击右上角「填写项目节参数」">项目节参数</a>
+                    <a class="nav-link active" href="/lib/detail/<%= ctx.params.id %>">项目节参数</a>
                 </li>
             </ul>
         </div>
         <div class="c-body">
             <div class="row">
                 <div class="col-5">
-                    <div class="sjs-height-1">
-                        <!--全局参数-->
+                    <div id="bills-spread" class="sjs-height-1">
+                    </div>
+                </div>
+                <div class="col-7">
+                    <div class="sjs-height-3">
+                        <table class="table table-bordered table-sm table-hover">
+                            <tr>
+                                <th>指标编号</th>
+                                <th>项目或费用名称</th>
+                                <th colspan="2">指标单位</th>
+                                <th>合价（元）</th>
+                                <th>计算规则</th>
+                                <th>指标计算</th>
+                                <th>经济指标</th>
+                            </tr>
+                            <tr>
+                                <td>z1-a</td>
+                                <td>临时道路</td>
+                                <td></td>
+                                <td>km</td>
+                                <td></td>
+                                <td>指新建便道与利用原有道路的总长</td>
+                                <td></td>
+                                <td></td>
+                            </tr>
+                            <tr>
+                                <td>z1-a-1</td>
+                                <td>临时道路公路公里造价</td>
+                                <td>元</td>
+                                <td>公路公里</td>
+                                <td></td>
+                                <td>合价/路线总长度</td>
+                                <td>10000/500</td>
+                                <td>20</td>
+                            </tr>
+                            <tr>
+                                <td>z1-a-2</td>
+                                <td>临时道路公里造价</td>
+                                <td>元</td>
+                                <td>km</td>
+                                <td></td>
+                                <td>km指临时道路长度，合价/临时道路长</td>
+                                <td></td>
+                                <td></td>
+                            </tr>
+                            <tr>
+                                <td>z1-a-3</td>
+                                <td>临时道路建筑面积造价</td>
+                                <td>元</td>
+                                <td>m2</td>
+                                <td></td>
+                                <td>合价/（临时道路长度×路基均宽）</td>
+                                <td></td>
+                                <td></td>
+                            </tr>
+                            <tr>
+                                <td>z1-a-4</td>
+                                <td>临时道路造价占比</td>
+                                <td></td>
+                                <td>%</td>
+                                <td></td>
+                                <td>合价/临时工程费用</td>
+                                <td></td>
+                                <td></td>
+                            </tr>
+                            <tr>
+                                <td>z1-a-5</td>
+                                <td>临时道路面积长度比</td>
+                                <td></td>
+                                <td>%</td>
+                                <td></td>
+                                <td>临时道路建筑面积/临时道路长度</td>
+                                <td></td>
+                                <td></td>
+                            </tr>
+                            <tr>
+                                <td>z1-a-6</td>
+                                <td>临时道路路线长度比</td>
+                                <td>km</td>
+                                <td>公路公里</td>
+                                <td></td>
+                                <td>临时道路长度/路线总长度</td>
+                                <td></td>
+                                <td></td>
+                            </tr>
+                        </table>
+                    </div>
+                    <div class="sjs-bottom-2">
+                        <legend class="mt-3">填写参数</legend>
+                        <!--本节点参数-->
                         <table class="table table-bordered table-sm table-hover">
-                            <tr><th colspan="4" class="text-center">全局参数</th></tr>
-                            <tr><th colspan="4" class="text-center"><b class="text-danger">*全局参数影响所有指标，谨慎修改</b></th></tr>
+                            <tr><th colspan="4" class="text-center">1-1 项目节 参数</th></tr>
                             <tr>
                                 <th>参数名称</th><th>绑定分项节点</th><th>参数数值</th>
                             </tr>
@@ -47,4 +135,15 @@
             </div>
         </div>
     </div>
-</div>
+</div>
+<script src="/public/js/spreadjs/sheets/gc.spread.sheets.all.10.0.1.min.js"></script>
+<script>
+    GC.Spread.Sheets.LicenseKey = "559432293813965#A0y3iTOzEDOzkjMyMDN9UTNiojIklkI1pjIEJCLi4TPB9mM5AFNTd4cvZ7SaJUVy3CWKtWYXx4VVhjMpp7dYNGdx2ia9sEVlZGOTh7NRlTUwkWR9wEV4gmbjBDZ4ElR8N7cGdHVvEWVBtCOwIGW0ZmeYVWVr3mI0IyUiwCMzETN8kzNzYTM0IicfJye&Qf35VfiEzRwEkI0IyQiwiIwEjL6ByUKBCZhVmcwNlI0IiTis7W0ICZyBlIsIyNyMzM5ADI5ADNwcTMwIjI0ICdyNkIsIibj9SbvNmL4N7bjRnch56ciojIz5GRiwiI8+Y9sWY9QmZ0Jyp96uL9v6L0wap9biY9qiq95q197Wr9g+89iojIh94Wiqi";
+</script>
+<script src="/public/js/spreadjs_rela/spreadjs_zh.js"></script>
+<script src="/public/js/spreadjs_rela/extend_celltype.js"></script>
+<script src="/public/js/path_tree.js"></script>
+<script type="text/javascript">
+    const bills = JSON.parse('<%- billsData %>');
+</script>
+<script src="/public/js/lib_detail.js"></script>

app/view/lib/detail2.ejs

@@ -1,160 +0,0 @@
-<div class="panel-content">
-    <div class="panel-title fluid">
-        <div class="title-main">
-            <h2>
-                <%= libInfo.filename %>
-                <% if(libInfo.status === libConst.status.pend) { %><a href="#storage" data-toggle="modal" data-target="#storage" class="btn btn-primary btn-sm pull-right">入库</a><% } %>
-                <a href="#del" data-toggle="modal" data-target="#del" class="btn btn-outline-danger btn-sm pull-right">从库中删除</a>
-            </h2>
-        </div>
-    </div>
-    <div class="content-wrap">
-        <div class="c-header p-0 col-12">
-            <ul class="nav nav-tabs">
-                <li class="nav-item">
-                    <a class="nav-link" href="/lib/detail/<%= libInfo.id %>">全局参数</a>
-                </li>
-                <li class="nav-item">
-                    <a class="nav-link active" href="javascript:void(0);">项目节参数</a>
-                </li>
-            </ul>
-        </div>
-        <div class="c-body">
-            <div class="row">
-                <div class="col-5">
-                    <div class="sjs-height-1">
-                        <table class="table table-bordered table-sm">
-                            <tr>
-                                <th></th>
-                                <th>项目节编号</th>
-                                <th>名称</th>
-                                <th>单位</th>
-                                <th>数量</th>
-                                <th>合价</th>
-                            </tr>
-                            <% if(billsList.length > 0) { %>
-                            <% billsList.forEach(function(bills) { %>
-                            <tr>
-                                <td><%= bills.id %></td>
-                                <td><% if(bills.code !== '') { %><%= bills.code %><% } else { %><%= bills.b_code %><% } %></td>
-                                <td><%= bills.name %></td>
-                                <td><%= bills.units %></td>
-                                <td><% if(bills.quantity !== 0) { %><%= bills.quantity %><% } %></td>
-                                <td><% if(bills.total_price !== 0) { %><%= bills.total_price %><% } %></td>
-                            </tr>
-                            <% }) %>
-                            <% } %>
-                        </table>
-                    </div>
-                </div>
-                <div class="col-7">
-                    <div class="sjs-height-3">
-                        <table class="table table-bordered table-sm">
-                            <tr>
-                                <th>指标编号</th>
-                                <th>项目或费用名称</th>
-                                <th colspan="2">指标单位</th>
-                                <th>合价（元）</th>
-                                <th>计算规则</th>
-                                <th>指标计算</th>
-                                <th>经济指标</th>
-                            </tr>
-                            <tr>
-                                <td>z1-a</td>
-                                <td>临时道路</td>
-                                <td></td>
-                                <td>km</td>
-                                <td></td>
-                                <td>指新建便道与利用原有道路的总长</td>
-                                <td></td>
-                                <td></td>
-                            </tr>
-                            <tr>
-                                <td>z1-a-1</td>
-                                <td>临时道路公路公里造价</td>
-                                <td>元</td>
-                                <td>公路公里</td>
-                                <td></td>
-                                <td>合价/路线总长度</td>
-                                <td></td>
-                                <td></td>
-                            </tr>
-                            <tr>
-                                <td>z1-a-2</td>
-                                <td>临时道路公里造价</td>
-                                <td>元</td>
-                                <td>km</td>
-                                <td></td>
-                                <td>km指临时道路长度，合价/临时道路长</td>
-                                <td></td>
-                                <td></td>
-                            </tr>
-                            <tr>
-                                <td>z1-a-3</td>
-                                <td>临时道路建筑面积造价</td>
-                                <td>元</td>
-                                <td>m2</td>
-                                <td></td>
-                                <td>合价/（临时道路长度×路基均宽）</td>
-                                <td></td>
-                                <td></td>
-                            </tr>
-                            <tr>
-                                <td>z1-a-4</td>
-                                <td>临时道路造价占比</td>
-                                <td></td>
-                                <td>%</td>
-                                <td></td>
-                                <td>合价/临时工程费用</td>
-                                <td></td>
-                                <td></td>
-                            </tr>
-                            <tr>
-                                <td>z1-a-5</td>
-                                <td>临时道路面积长度比</td>
-                                <td></td>
-                                <td>%</td>
-                                <td></td>
-                                <td>临时道路建筑面积/临时道路长度</td>
-                                <td></td>
-                                <td></td>
-                            </tr>
-                            <tr>
-                                <td>z1-a-6</td>
-                                <td>临时道路路线长度比</td>
-                                <td>km</td>
-                                <td>公路公里</td>
-                                <td></td>
-                                <td>临时道路长度/路线总长度</td>
-                                <td></td>
-                                <td></td>
-                            </tr>
-                        </table>
-                    </div>
-                    <div class="sjs-bottom-2">
-                        <legend class="mt-3">填写参数</legend>
-                        <!--本节点参数-->
-                        <table class="table table-bordered table-sm table-hover">
-                            <tr><th colspan="4" class="text-center">1-1 项目节 参数</th></tr>
-                            <tr>
-                                <th>参数名称</th><th>绑定分项节点</th><th>参数数值</th>
-                            </tr>
-                            <tr>
-                                <td>总造价</th><td></td><td><input class="form-control form-control-sm"></td>
-                            </tr>
-                            <tr>
-                                <td>路线总长度</td><td>1-1-2</td><td><input class="form-control form-control-sm" value="15123"></td>
-                            </tr>
-                            <tr>
-                                <td>路基工程费用</td><td>1-4-1</td><td><input class="form-control form-control-sm" value="50410"></td>
-                            </tr>
-                            <tr>
-                                <td>边沟圬工体积</td><td></td><td><input class="form-control form-control-sm"></td>
-                            </tr>
-                        </table>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-</div>

app/view/lib/global.ejs

@@ -0,0 +1,46 @@
+<div class="panel-content">
+    <div class="panel-title fluid">
+        <div class="title-main">
+            <h2>
+                <%= libInfo.filename %>
+                <a href="/lib/detail/<%= ctx.params.id %>" class="btn btn-primary btn-sm pull-right">填写项目节参数</a>
+            </h2>
+        </div>
+    </div>
+    <div class="content-wrap">
+        <div class="c-header p-0 col-12">
+            <ul class="nav nav-tabs">
+                <li class="nav-item">
+                    <a class="nav-link active" href="my-Library-detail.html">全局参数</a>
+                </li>
+                <li class="nav-item">
+                    <a class="nav-link disabled"  data-container="body" data-toggle="popover" data-placement="right" data-content="请点击右上角「填写项目节参数」">项目节参数</a>
+                </li>
+            </ul>
+        </div>
+        <div class="c-body">
+            <div class="row">
+                <div class="col-5">
+                    <div class="sjs-height-1">
+                        <!--全局参数-->
+                        <table class="table table-bordered table-sm table-hover">
+                            <tr><th colspan="4" class="text-center">全局参数</th></tr>
+                            <tr><th colspan="4" class="text-center"><b class="text-danger">*全局参数影响所有指标，谨慎修改</b></th></tr>
+                            <tr>
+                                <th>参数名称</th><th>绑定分项节点</th><th>参数数值</th>
+                            </tr>
+                            <% for (const p of globalParams) { %>
+                            <tr>
+                                <td code="<%= p.code %>"><%= p.name %></td>
+                                <td><%- p.match_key %></td>
+                                <td><input class="form-control form-control-sm" value="<%- p.calc_value %>"></td>
+                            </tr>
+                            <% } %>
+                        </table>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+</div>

app/view/template/index.ejs

@@ -153,6 +153,9 @@
         const loadText = function (arr) {
             for (const a of arr) {
                 a.text = a.code + ' ' + a.name;
+                if (a.match_key) {
+                    a.text = a.text + ' (' + a.match_key + ')';
+                }
                 if (a.children && a.children.length > 0) {
                     loadText(a.children);
                 }