Jelajahi Sumber

帮助文本

Chente 5 tahun lalu
induk
melakukan
8d2b5fd5f1
4 mengubah file dengan 367 tambahan dan 0 penghapusan
  1. 41 0
      css/main.css
  2. 142 0
      css/prism/prism.css
  3. 177 0
      help.html
  4. 7 0
      js/prism/prism.js

+ 41 - 0
css/main.css

@@ -384,4 +384,45 @@ body.login-body{
 .ztree-warp {
     border:1px solid #ddd;
     overflow: auto;
+}
+/**帮助**/
+.help-content .sticky-top{
+    float:right;
+    top:80px;
+    right:80px;
+    border-left: 1px solid #ccc;
+    padding:10px 0 10px 20px;
+}
+.help-content legend{
+    border-bottom:1px solid #ccc;
+    padding-bottom:10px;
+    font-size: 2rem
+}
+.help-content h2,.help-content h3,.help-content h4{
+    font-weight:600px
+}
+.help-content h2 {
+    font-size:1.75rem;
+    margin:1rem 0;
+}
+.help-content h3 {
+    font-size:1.5rem;
+    padding-left:5px;
+    margin-left:2px;
+    border-left: 2px solid #007bff;
+    margin:1rem 0;
+}
+.help-content h4 {
+    font-size:1.25rem;
+    padding-left:6px;
+    margin-left:2px;
+    border-left: 1px solid #007bff;
+    margin:1rem 0;
+}
+.help-content p {
+    font-size:1rem;
+    margin-left:9px
+}
+.help-content pre[class*="language-"]{
+    margin-left:9px;
 }

+ 142 - 0
css/prism/prism.css

@@ -0,0 +1,142 @@
+/* PrismJS 1.18.0
+https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript */
+/**
+ * prism.js default theme for JavaScript, CSS and HTML
+ * Based on dabblet (http://dabblet.com)
+ * @author Lea Verou
+ */
+
+code[class*="language-"],
+pre[class*="language-"] {
+	color: black;
+	background: none;
+	text-shadow: 0 1px white;
+	font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+	font-size: 1em;
+	text-align: left;
+	white-space: pre;
+	word-spacing: normal;
+	word-break: normal;
+	word-wrap: normal;
+	line-height: 1.5;
+
+	-moz-tab-size: 4;
+	-o-tab-size: 4;
+	tab-size: 4;
+
+	-webkit-hyphens: none;
+	-moz-hyphens: none;
+	-ms-hyphens: none;
+	hyphens: none;
+}
+
+pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
+code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
+	text-shadow: none;
+	background: #b3d4fc;
+}
+
+pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
+code[class*="language-"]::selection, code[class*="language-"] ::selection {
+	text-shadow: none;
+	background: #b3d4fc;
+}
+
+@media print {
+	code[class*="language-"],
+	pre[class*="language-"] {
+		text-shadow: none;
+	}
+}
+
+/* Code blocks */
+pre[class*="language-"] {
+	padding: 1em;
+	margin: .5em 0;
+	overflow: auto;
+}
+
+:not(pre) > code[class*="language-"],
+pre[class*="language-"] {
+	background: #f8f9fa;
+}
+
+/* Inline code */
+:not(pre) > code[class*="language-"] {
+	padding: .1em;
+	border-radius: .3em;
+	white-space: normal;
+}
+
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+	color: slategray;
+}
+
+.token.punctuation {
+	color: #999;
+}
+
+.token.namespace {
+	opacity: .7;
+}
+
+.token.property,
+.token.tag,
+.token.boolean,
+.token.number,
+.token.constant,
+.token.symbol,
+.token.deleted {
+	color: #905;
+}
+
+.token.selector,
+.token.attr-name,
+.token.string,
+.token.char,
+.token.builtin,
+.token.inserted {
+	color: #690;
+}
+
+.token.operator,
+.token.entity,
+.token.url,
+.language-css .token.string,
+.style .token.string {
+	color: #9a6e3a;
+	background: hsla(0, 0%, 100%, .5);
+}
+
+.token.atrule,
+.token.attr-value,
+.token.keyword {
+	color: #07a;
+}
+
+.token.function,
+.token.class-name {
+	color: #DD4A68;
+}
+
+.token.regex,
+.token.important,
+.token.variable {
+	color: #e90;
+}
+
+.token.important,
+.token.bold {
+	font-weight: bold;
+}
+.token.italic {
+	font-style: italic;
+}
+
+.token.entity {
+	cursor: help;
+}
+

+ 177 - 0
help.html

@@ -0,0 +1,177 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+  <meta http-equiv="x-ua-compatible" content="ie=edge">
+  <title>后台登录-计量支付SAAS</title>
+  <link rel="stylesheet" href="css/bootstrap/bootstrap.min.css">
+  <link rel="stylesheet" href="css/main.css">
+  <link rel="stylesheet" href="css/font-awesome/font-awesome.min.css">
+  <link rel="stylesheet" href="css/prism/prism.css">
+</head>
+<body onload="prettyPrint()">
+  <div class="wrapper">
+    <div class="top-bar">
+      <div class="logo">
+          <a>计量支付SAAS后台</a>
+      </div>
+      <div class="nav d-flex justify-content-between">
+          <h4 class="title"><i class="fa fa-question-circle"></i> 帮助</h4>
+      </div>
+    </div>
+    <div class="aside">
+      <div class="user-info">
+        <div class="user-img"><img src="img/avatar-1.jpg"></div>
+        <h5>admin</h5>
+        <ul class="min-menu">
+          <li><a href="user-profile.html"><i class="fa fa-cog"></i></a></li>
+          <li><a href="login.html"><i class="fa fa-power-off"></i></a></li>
+        </ul>
+      </div>
+      <div class="menu" id="menu">
+        <li class="">
+          <a href="index.html">
+            <i class="fa fa-dashboard"></i>控制面板
+          </a>
+        </li>
+        <li>
+          <a href="javascript:void(0);">
+            <i class="fa fa-users"></i>客户管理<i class="fa fa-angle-down menu-arrow"></i>
+          </a>
+          <ul class="sub-menu">
+            <li><a href="com-list.html">企业版客户</a></li>
+          </ul>
+          <ul class="sub-menu">
+            <li><a href="poj-list.html">项目版客户</a></li>
+          </ul>
+          <ul class="sub-menu">
+            <li><a href="preview-list.html">演示版客户</a></li>
+          </ul>
+        </li>
+        <li>
+          <a href="news.html">
+            <i class="fa fa-bell"></i>通知管理</i>
+          </a>
+        </li>
+        <li>
+          <a href="javascript:void(0);">
+            <i class="fa fa-wrench"></i>工具<i class="fa fa-angle-down menu-arrow"></i>
+          </a>
+          <ul class="sub-menu">
+            <li><a href="jlguifan.html">计价规范</a></li>
+            <li><a href="xiangmu.html">项目节</a></li>
+            <li><a href="qingdan.html">工程量清单</a></li>
+            <li><a href="bgqingdan.html">台帐模板</a></li>
+            <li><a href="baobiao.html">报表定制</a></li>
+          </ul>
+        </li>
+        <li>
+          <a href="javascript:void(0);">
+            <i class="fa fa-cog"></i>系统管理<i class="fa fa-angle-down menu-arrow"></i>
+          </a>
+          <ul class="sub-menu">
+            <li><a href="permission.html">权限管理</a></li>
+          </ul>
+        </li>
+        <li>
+          <a href="javascript:void(0);">
+            <i class="fa fa-user"></i>后台用户<i class="fa fa-angle-down menu-arrow"></i>
+          </a>
+          <ul class="sub-menu">
+            <li><a href="manager.html">用户列表</a></li>
+            <li><a href="group.html">权限组</a></li>
+          </ul>
+        </li>
+      </div>
+    </div>
+    <div class="content-page container-fluid">
+      <div class="row">
+        <div class="col-lg-12">
+          <div class="card-box help-content">
+            <!--导航-->
+            <div class="sticky-top">
+              <ul class="nav flex-column">
+                <li class="nav-item">说明</li>
+                <li class="nav-item">使用方法
+                    <ul class="nav flex-column ml-3">
+                      <li class="nav-item">勾选字段</li>
+                      <li class="nav-item">设置(options)</li>
+                    </ul>
+                </li>
+                <li class="nav-item">示例</li>
+              </ul>
+            </div>
+            <div class="col-lg-10">
+            <!--内容开始-->
+              <legend>连接两张数据表(join)</legend>
+              <h2>H2标题</h2>
+              <h3>H3标题</h2>
+              <h4>H4标题</h2>
+              <h2 id="shuoming">说明</h2>
+              <p>虽然方法名称是连接,实际上是关联表的数据,引入到主表中。</p>
+              <h2 id="shiyongfangfa">使用方法</h2>
+              <h3 id="gouxuanziduan">勾选字段</h3>
+              <p>该表不需要勾选任何字段</p>
+              <h3 id="shezhi">设置(options)</h3>
+              <p>必须写!</p>
+              <p>具体写法如下</p>
+              <pre>
+                <code class="language-js"><!--目前就支持3种语言 language-html language-css -->
+ if(subMenu.is(":visible")) {
+              self.find('.menu-arrow').removeClass('glyphicon-menu-down').addClass('glyphicon-menu-right');
+              subMenu.slideUp('fast');
+              self.parent().removeClass('active');
+                </code>
+              </pre>
+              <table class="table table-bordered">
+                <tr><th>列1</th><th>列2</th><th>列3</th></tr>
+                <tr><td>sub</td><td>关联表表名(string)</td><td></td></tr>
+                <tr><td>keyFields</td><td>关联字段(array)</td><td>keyFields为关联两张表时依赖的字段,main为主表字段名,sub为关联表字段名,type为字段类型(当前只支持'string', 'number'两种)</td></tr>
+                <tr><td>importFields</td><td>主表表名</td><td><p>importFields为从关联表中引入的字段,main为主表引入后的字段,原值将会被覆盖,建议使用一些扩展的空字段;sub为引入的关联表字段</p><p>此处不会验证,main和sub字段类型是否相等,不管如何都将用sub覆盖main,如果填入不同指标类型的字段,可能导致报表报错</p>
+              <p>joinType: 关联类型(与sql语句中的join语法相似,使用sql语句来解释)</p>
+              <p>main: main left join sub</p>
+              <p>sub: main right join sub</p>
+              <p>inner: main inner join sub</p>
+              <p>outer: main outer join sub</p></td></tr>
+              </table>
+              <h2 id="shili">示例</h2>
+              <h3>e.g.1. 在"期 - 清单数据表(mem_stage_bills)"中引入"签约清单(deal_bills)"</h3>
+              <p>1. 应在指标映射中添加来自这连个指标集合的指标。</p>
+              <p>2. 应添加如下options</p>
+              <pre>
+                <code class="language-js"><!--目前就支持3种语言 language-html language-css -->
+  $("#menu > li > a").click(function() {
+      var self = $(this);
+      var subMenu = $(this).siblings('ul.sub-menu');
+      if(subMenu.length > 0) {
+          if(subMenu.is(":visible")) {
+              self.find('.menu-arrow').removeClass('glyphicon-menu-down').addClass('glyphicon-menu-right');
+              subMenu.slideUp('fast');
+              self.parent().removeClass('active');
+          }else{
+              self.parent().addClass('active');
+              self.find('.menu-arrow').removeClass('glyphicon-menu-right').addClass('glyphicon-menu-down');
+              subMenu.slideDown('fast');
+          }
+      }
+  });
+                </code>
+              </pre>
+              <p>上述options的意思为,在mem_stage_bills中引入来自deal_bills的数据,并取并集。</p>
+              <p>关联时,根据清单编号、名称、单位、单价,判断是否同一条清单(注意deal_bills中的清单编号为code)</p>
+              <p>关联后,将deal_bills的数量、金额引入到mem_stage_bills中,deal_bills.quantity -> mem_stage_bills.ex_value1,deal_bills.total_price -> mem_stage_bills.ex_value2。</p>
+            <!--内容结束-->
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</body>
+<script src="js/jquery/jquery-3.2.1.min.js" type="text/javascript"></script>
+<script src="js/popper/popper.min.js" type="text/javascript"></script>
+<script src="js/bootstrap/bootstrap.min.js" type="text/javascript"></script>
+<script src="js/main.js" type="text/javascript"></script>
+<script src="js//prism/prism.js" type="text/javascript"></script>
+</html>

File diff ditekan karena terlalu besar
+ 7 - 0
js/prism/prism.js