提交修改

whychdw

2020-08-29 02d848bf39005e83882a87f8bc322d8499b92fbc

提交修改

 src/assets/iconfont/demo.css

New file
@@ -0,0 +1,539 @@
/* Logo 字体 */
@font-face {
  font-family: "iconfont logo";
  src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834');
  src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834#iefix') format('embedded-opentype'),
    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.woff?t=1545807318834') format('woff'),
    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.ttf?t=1545807318834') format('truetype'),
    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont') format('svg');
}

.logo {
  font-family: "iconfont logo";
  font-size: 160px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* tabs */
.nav-tabs {
  position: relative;
}

.nav-tabs .nav-more {
  position: absolute;
  right: 0;
  bottom: 0;
  height: 42px;
  line-height: 42px;
  color: #666;
}

#tabs {
  border-bottom: 1px solid #eee;
}

#tabs li {
  cursor: pointer;
  width: 100px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  font-size: 16px;
  border-bottom: 2px solid transparent;
  position: relative;
  z-index: 1;
  margin-bottom: -1px;
  color: #666;
}


#tabs .active {
  border-bottom-color: #f00;
  color: #222;
}

.tab-container .content {
  display: none;
}

/* 页面布局 */
.main {
  padding: 30px 100px;
  width: 960px;
  margin: 0 auto;
}

.main .logo {
  color: #333;
  text-align: left;
  margin-bottom: 30px;
  line-height: 1;
  height: 110px;
  margin-top: -50px;
  overflow: hidden;
  *zoom: 1;
}

.main .logo a {
  font-size: 160px;
  color: #333;
}

.helps {
  margin-top: 40px;
}

.helps pre {
  padding: 20px;
  margin: 10px 0;
  border: solid 1px #e7e1cd;
  background-color: #fffdef;
  overflow: auto;
}

.icon_lists {
  width: 100% !important;
  overflow: hidden;
  *zoom: 1;
}

.icon_lists li {
  width: 100px;
  margin-bottom: 10px;
  margin-right: 20px;
  text-align: center;
  list-style: none !important;
  cursor: default;
}

.icon_lists li .code-name {
  line-height: 1.2;
}

.icon_lists .icon {
  display: block;
  height: 100px;
  line-height: 100px;
  font-size: 42px;
  margin: 10px auto;
  color: #333;
  -webkit-transition: font-size 0.25s linear, width 0.25s linear;
  -moz-transition: font-size 0.25s linear, width 0.25s linear;
  transition: font-size 0.25s linear, width 0.25s linear;
}

.icon_lists .icon:hover {
  font-size: 100px;
}

.icon_lists .svg-icon {
  /* 通过设置 font-size 来改变图标大小 */
  width: 1em;
  /* 图标和文字相邻时，垂直对齐 */
  vertical-align: -0.15em;
  /* 通过设置 color 来改变 SVG 的颜色/fill */
  fill: currentColor;
  /* path 和 stroke 溢出 viewBox 部分在 IE 下会显示
      normalize.css 中也包含这行 */
  overflow: hidden;
}

.icon_lists li .name,
.icon_lists li .code-name {
  color: #666;
}

/* markdown 样式 */
.markdown {
  color: #666;
  font-size: 14px;
  line-height: 1.8;
}

.highlight {
  line-height: 1.5;
}

.markdown img {
  vertical-align: middle;
  max-width: 100%;
}

.markdown h1 {
  color: #404040;
  font-weight: 500;
  line-height: 40px;
  margin-bottom: 24px;
}

.markdown h2,
.markdown h3,
.markdown h4,
.markdown h5,
.markdown h6 {
  color: #404040;
  margin: 1.6em 0 0.6em 0;
  font-weight: 500;
  clear: both;
}

.markdown h1 {
  font-size: 28px;
}

.markdown h2 {
  font-size: 22px;
}

.markdown h3 {
  font-size: 16px;
}

.markdown h4 {
  font-size: 14px;
}

.markdown h5 {
  font-size: 12px;
}

.markdown h6 {
  font-size: 12px;
}

.markdown hr {
  height: 1px;
  border: 0;
  background: #e9e9e9;
  margin: 16px 0;
  clear: both;
}

.markdown p {
  margin: 1em 0;
}

.markdown>p,
.markdown>blockquote,
.markdown>.highlight,
.markdown>ol,
.markdown>ul {
  width: 80%;
}

.markdown ul>li {
  list-style: circle;
}

.markdown>ul li,
.markdown blockquote ul>li {
  margin-left: 20px;
  padding-left: 4px;
}

.markdown>ul li p,
.markdown>ol li p {
  margin: 0.6em 0;
}

.markdown ol>li {
  list-style: decimal;
}

.markdown>ol li,
.markdown blockquote ol>li {
  margin-left: 20px;
  padding-left: 4px;
}

.markdown code {
  margin: 0 3px;
  padding: 0 5px;
  background: #eee;
  border-radius: 3px;
}

.markdown strong,
.markdown b {
  font-weight: 600;
}

.markdown>table {
  border-collapse: collapse;
  border-spacing: 0px;
  empty-cells: show;
  border: 1px solid #e9e9e9;
  width: 95%;
  margin-bottom: 24px;
}

.markdown>table th {
  white-space: nowrap;
  color: #333;
  font-weight: 600;
}

.markdown>table th,
.markdown>table td {
  border: 1px solid #e9e9e9;
  padding: 8px 16px;
  text-align: left;
}

.markdown>table th {
  background: #F7F7F7;
}

.markdown blockquote {
  font-size: 90%;
  color: #999;
  border-left: 4px solid #e9e9e9;
  padding-left: 0.8em;
  margin: 1em 0;
}

.markdown blockquote p {
  margin: 0;
}

.markdown .anchor {
  opacity: 0;
  transition: opacity 0.3s ease;
  margin-left: 8px;
}

.markdown .waiting {
  color: #ccc;
}

.markdown h1:hover .anchor,
.markdown h2:hover .anchor,
.markdown h3:hover .anchor,
.markdown h4:hover .anchor,
.markdown h5:hover .anchor,
.markdown h6:hover .anchor {
  opacity: 1;
  display: inline-block;
}

.markdown>br,
.markdown>p>br {
  clear: both;
}


.hljs {
  display: block;
  background: white;
  padding: 0.5em;
  color: #333333;
  overflow-x: auto;
}

.hljs-comment,
.hljs-meta {
  color: #969896;
}

.hljs-string,
.hljs-variable,
.hljs-template-variable,
.hljs-strong,
.hljs-emphasis,
.hljs-quote {
  color: #df5000;
}

.hljs-keyword,
.hljs-selector-tag,
.hljs-type {
  color: #a71d5d;
}

.hljs-literal,
.hljs-symbol,
.hljs-bullet,
.hljs-attribute {
  color: #0086b3;
}

.hljs-section,
.hljs-name {
  color: #63a35c;
}

.hljs-tag {
  color: #333333;
}

.hljs-title,
.hljs-attr,
.hljs-selector-id,
.hljs-selector-class,
.hljs-selector-attr,
.hljs-selector-pseudo {
  color: #795da3;
}

.hljs-addition {
  color: #55a532;
  background-color: #eaffea;
}

.hljs-deletion {
  color: #bd2c00;
  background-color: #ffecec;
}

.hljs-link {
  text-decoration: underline;
}

/* 代码高亮 */
/* PrismJS 1.15.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;
  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: #f5f2f0;
}

/* 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;
}

.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;
}

 src/assets/iconfont/demo_index.html

New file
@@ -0,0 +1,216 @@
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>IconFont Demo</title>
  <link rel="shortcut icon" href="https://img.alicdn.com/tps/i4/TB1_oz6GVXXXXaFXpXXJDFnIXXX-64-64.ico" type="image/x-icon"/>
  <link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
  <link rel="stylesheet" href="demo.css">
  <link rel="stylesheet" href="iconfont.css">
  <script src="iconfont.js"></script>
  <!-- jQuery -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
  <!-- 代码高亮 -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
</head>
<body>
  <div class="main">
    <h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">&#xe86b;</a></h1>
    <div class="nav-tabs">
      <ul id="tabs" class="dib-box">
        <li class="dib active"><span>Unicode</span></li>
        <li class="dib"><span>Font class</span></li>
        <li class="dib"><span>Symbol</span></li>
      </ul>
      
      <a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=2034163" target="_blank" class="nav-more">查看项目</a>
      
    </div>
    <div class="tab-container">
      <div class="content unicode" style="display: block;">
          <ul class="icon_lists dib-box">
          
            <li class="dib">
              <span class="icon iconfont">&#xe621;</span>
                <div class="name">进入</div>
                <div class="code-name">&amp;#xe621;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe661;</span>
                <div class="name">刷新</div>
                <div class="code-name">&amp;#xe661;</div>
              </li>
          
          </ul>
          <div class="article markdown">
          <h2 id="unicode-">Unicode 引用</h2>
          <hr>

          <p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
          <ul>
            <li>兼容性最好，支持 IE6+，及所有现代浏览器。</li>
            <li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
            <li>但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色。</li>
          </ul>
          <blockquote>
            <p>注意：新版 iconfont 支持多色图标，这些多色图标在 Unicode 模式下将不能使用，如果有需求建议使用symbol 的引用方式</p>
          </blockquote>
          <p>Unicode 使用步骤如下：</p>
          <h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
<pre><code class="language-css"
>@font-face {
  font-family: 'iconfont';
  src: url('iconfont.eot');
  src: url('iconfont.eot?#iefix') format('embedded-opentype'),
      url('iconfont.woff2') format('woff2'),
      url('iconfont.woff') format('woff'),
      url('iconfont.ttf') format('truetype'),
      url('iconfont.svg#iconfont') format('svg');
}
</code></pre>
          <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
<pre><code class="language-css"
>.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
</code></pre>
          <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
<pre>
<code class="language-html"
>&lt;span class="iconfont"&gt;&amp;#x33;&lt;/span&gt;
</code></pre>
          <blockquote>
            <p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
          </blockquote>
          </div>
      </div>
      <div class="content font-class">
        <ul class="icon_lists dib-box">
          
          <li class="dib">
            <span class="icon iconfont el-icon-jinru"></span>
            <div class="name">
              进入
            </div>
            <div class="code-name">.el-icon-jinru
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont el-icon-shuaxin"></span>
            <div class="name">
              刷新
            </div>
            <div class="code-name">.el-icon-shuaxin
            </div>
          </li>
          
        </ul>
        <div class="article markdown">
        <h2 id="font-class-">font-class 引用</h2>
        <hr>

        <p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
        <p>与 Unicode 使用方式相比，具有如下特点：</p>
        <ul>
          <li>兼容性良好，支持 IE8+，及所有现代浏览器。</li>
          <li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
          <li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
          <li>不过因为本质上还是使用的字体，所以多色图标还是不支持的。</li>
        </ul>
        <p>使用步骤如下：</p>
        <h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
<pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
</code></pre>
        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;span class="iconfont el-icon-xxx"&gt;&lt;/span&gt;
</code></pre>
        <blockquote>
          <p>"
            iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
        </blockquote>
      </div>
      </div>
      <div class="content symbol">
          <ul class="icon_lists dib-box">
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-jinru"></use>
                </svg>
                <div class="name">进入</div>
                <div class="code-name">#el-icon-jinru</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-shuaxin"></use>
                </svg>
                <div class="name">刷新</div>
                <div class="code-name">#el-icon-shuaxin</div>
            </li>
          
          </ul>
          <div class="article markdown">
          <h2 id="symbol-">Symbol 引用</h2>
          <hr>

          <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
            这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p>
          <ul>
            <li>支持多色图标了，不再受单色限制。</li>
            <li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
            <li>兼容性较差，支持 IE9+，及现代浏览器。</li>
            <li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
          </ul>
          <p>使用步骤如下：</p>
          <h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
<pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
</code></pre>
          <h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
<pre><code class="language-html">&lt;style&gt;
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
&lt;/style&gt;
</code></pre>
          <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
  &lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
&lt;/svg&gt;
</code></pre>
          </div>
      </div>

    </div>
  </div>
  <script>
  $(document).ready(function () {
      $('.tab-container .content:first').show()

      $('#tabs li').click(function (e) {
        var tabContent = $('.tab-container .content')
        var index = $(this).index()

        if ($(this).hasClass('active')) {
          return
        } else {
          $('#tabs li').removeClass('active')
          $(this).addClass('active')

          tabContent.hide().eq(index).fadeIn()
        }
      })
    })
  </script>
</body>
</html>

 src/assets/iconfont/iconfont.css

New file
@@ -0,0 +1,25 @@
@font-face {font-family: "iconfont";
  src: url('iconfont.eot?t=1598607067446'); /* IE9 */
  src: url('iconfont.eot?t=1598607067446#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAN4AAsAAAAAB6wAAAMsAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDBgqDEIJyATYCJAMMCwgABCAFhG0HORu7BhHVm3fIfiZkci/sOtc535DrV6EYbT0TPM/n5Z+bl05Tgx+QVgB3oNcTAIG+OOeBjYq6HMnZk0dfSHGYZgcDLqc/SnyeZTmNNWlvHhOwxALdA9sgARdIxLE2TC9poC4ehwDW+BOLlJbXtsRAxx0ngAzs16cbRsWMPlAsGAimjqU6shQLDG2edgdYknxevpIsBmhYKNypjb3LelL4IehDNzXVPLVjRCDZzgmwVaCAWEAH6dzpbovKYrEorI1aH842oSNoWwXN5kRsaU0X/eNpICbcQlsAImFcgw9BAR8CH7qdgQaAAsAE6MA04AjUuy59CS3UMiZmnP21B8Fiw7b7ZXbXH4ao7Q/Kba/cC8RadjyscLh6P0jfeq9/q5ZiK3YTVu92Fdd791o+eNA6b9WeAxvcW1vXd5y/07Wl28p1+3Z5UHD/fquHD9vImvVtxhndc4XQ0UiP0kMInYflr965d62btLJZtWvBHo82a9andvXITiwtddnRnBbQouXvLr9btgzoHNAyI1pk2zaPdyktTbQcKlvBsu3d/t3+t338Gu8XIum1cX14K3EJKp7Y2EA3WTTStcO6Mcf3T+gzYICkR3pnpg8aSJvxc/eMktPuk05uma71lC09YpqpODrtwe09ozjQ0XNb914b6aCGgYPgaXQFwKwuKE8AdVl7/Me+w4Tex253ccj9b9joADwd/PNp4jPrTNca9+MR+D+SiS26JXMtStfiQOx4Fa0XOjWAQq7hr5QCOPNiudZtciEIBm4FNCzxg8IglNSZsbDAhlSYMCiANTFUrLbBheEoRLcCopkFIDhyBBr2nIfCkbukznwOC9z5DhOOomBNa3HZ0gbzKP0OJ0LBqEH+wau+M76ND2nxHe3UCCrLEtYbKfkglFlRT96wQ9piRvrYitmAob6FKzgNm6aHgfqAijPHPNR5brqelKm+nR04EQpGDcg/4FXfmag7Hxrvv6OdGkEDFY3gGyn5/oGSjGICeVN3kype5Zz0sRXMBjDUt8AVOLHxYj0wdA8KqDjDLYgMNTnqZKaqs+O17QMUsRrcvZVookRn3d93NG2Tm8TPd7MZ') format('woff2'),
  url('iconfont.woff?t=1598607067446') format('woff'),
  url('iconfont.ttf?t=1598607067446') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
  url('iconfont.svg?t=1598607067446#iconfont') format('svg'); /* iOS 4.1- */
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.el-icon-jinru:before {
  content: "\e621";
}

.el-icon-shuaxin:before {
  content: "\e661";
}


 src/assets/iconfont/iconfont.eot

Binary files differ

 src/assets/iconfont/iconfont.js

New file
@@ -0,0 +1 @@
!function(e){var t,n,c,o,l,i,d,s='<svg><symbol id="el-icon-jinru" viewBox="0 0 1024 1024"><path d="M837.824 919.232 267.648 919.232c-67.52 0-122.176-54.656-122.176-122.176L145.472 634.176l81.472 0 0 53.248c0 83.072 67.264 150.4 150.4 150.4l350.848 0c83.008 0 150.4-67.328 150.4-150.4L878.592 336.576c0-83.072-67.392-150.4-150.4-150.4L377.344 186.176c-83.136 0-150.4 67.328-150.4 150.4l0 12.48L145.408 349.056 145.408 226.944c0-67.52 54.656-122.176 122.176-122.176l570.176 0C905.28 104.768 960 159.424 960 226.944l0 570.112C960 864.576 905.28 919.232 837.824 919.232zM471.232 308.352 715.648 512l-244.352 162.944L471.296 552.768 64 552.768 64 430.592l407.232 0L471.232 308.352z"  ></path></symbol><symbol id="el-icon-shuaxin" viewBox="0 0 1024 1024"><path d="M798.336 632.32c-16.896-11.2-35.328-13.184-43.2-5.312l-0.384-0.576c-0.256 0.704-0.704 1.344-0.96 1.984-0.128 0.128-0.32 0.192-0.384 0.32-0.384 0.512-0.512 1.152-0.704 1.664-43.776 87.808-133.952 148.288-238.656 148.288-128.32 0-235.2-90.496-260.992-211.136L294.4 608.896c0.32 0.448 0.576 1.024 0.96 1.344 9.984 9.984 32.192 3.968 49.664-13.44C362.368 579.392 368.448 557.184 358.528 547.2l0.192-0.192L250.944 439.232 250.368 439.232c-5.312-9.344-19.712-16-36.8-16s-31.488 6.656-36.8 16L176.64 439.232 67.328 548.416l0.192 0.256C59.456 559.168 65.472 580.096 82.112 596.8c16.64 16.64 37.568 22.72 48.128 14.528l0.192 0.256 43.392-43.392c26.944 163.584 169.024 288.384 340.224 288.384 132.608 0 247.488-74.944 305.152-184.704L819.2 671.872C825.408 661.76 816.192 644.16 798.336 632.32z"  ></path><path d="M941.824 427.264c-16.704-16.704-37.568-22.72-48.128-14.592L893.44 412.416l-43.392 43.456c-27.008-163.648-168.96-288.448-340.224-288.448-132.544 0-247.424 74.944-305.152 184.704L204.8 352.128C198.528 362.24 207.744 379.84 225.6 391.68c16.896 11.2 35.264 13.184 43.136 5.376l0.384 0.512C269.44 396.864 269.824 396.224 270.208 395.584c0.064-0.128 0.192-0.192 0.32-0.32 0.32-0.512 0.448-1.152 0.704-1.664C314.88 305.792 405.12 245.248 509.824 245.248c128.32 0 235.264 90.56 260.992 211.136l-41.28-41.28c-0.384-0.448-0.64-1.024-1.024-1.344-9.92-9.984-32.128-3.968-49.536 13.504-17.408 17.344-23.488 39.552-13.568 49.536l-0.192 0.256 107.776 107.712 0.576 0c5.376 9.344 19.712 16 36.736 16s31.424-6.656 36.8-16l0.256 0 109.184-109.184-0.192-0.192C964.544 464.832 958.528 443.904 941.824 427.264z"  ></path></symbol></svg>',a=(t=document.getElementsByTagName("script"))[t.length-1].getAttribute("data-injectcss");if(a&&!e.__iconfont__svg__cssinject__){e.__iconfont__svg__cssinject__=!0;try{document.write("<style>.svgfont {display: inline-block;width: 1em;height: 1em;fill: currentColor;vertical-align: -0.1em;font-size:16px;}</style>")}catch(e){console&&console.log(e)}}function r(){i||(i=!0,o())}n=function(){var e,t,n,c,o,l=document.createElement("div");l.innerHTML=s,s=null,(e=l.getElementsByTagName("svg")[0])&&(e.setAttribute("aria-hidden","true"),e.style.position="absolute",e.style.width=0,e.style.height=0,e.style.overflow="hidden",t=e,(n=document.body).firstChild?(c=t,(o=n.firstChild).parentNode.insertBefore(c,o)):n.appendChild(t))},document.addEventListener?~["complete","loaded","interactive"].indexOf(document.readyState)?setTimeout(n,0):(c=function(){document.removeEventListener("DOMContentLoaded",c,!1),n()},document.addEventListener("DOMContentLoaded",c,!1)):document.attachEvent&&(o=n,l=e.document,i=!1,(d=function(){try{l.documentElement.doScroll("left")}catch(e){return void setTimeout(d,50)}r()})(),l.onreadystatechange=function(){"complete"==l.readyState&&(l.onreadystatechange=null,r())})}(window);

 src/assets/iconfont/iconfont.json

New file
@@ -0,0 +1,23 @@
{
  "id": "2034163",
  "name": "admin_manage",
  "font_family": "iconfont",
  "css_prefix_text": "el-icon-",
  "description": "",
  "glyphs": [
    {
      "icon_id": "166606",
      "name": "进入",
      "font_class": "jinru",
      "unicode": "e621",
      "unicode_decimal": 58913
    },
    {
      "icon_id": "167185",
      "name": "刷新",
      "font_class": "shuaxin",
      "unicode": "e661",
      "unicode_decimal": 58977
    }
  ]
}

 src/assets/iconfont/iconfont.svg

New file
@@ -0,0 +1,32 @@
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
<!--
2013-9-30: Created.
-->
<svg>
<metadata>
Created by iconfont
</metadata>
<defs>

<font id="iconfont" horiz-adv-x="1024" >
  <font-face
    font-family="iconfont"
    font-weight="500"
    font-stretch="normal"
    units-per-em="1024"
    ascent="896"
    descent="-128"
  />
    <missing-glyph />
    
    <glyph glyph-name="jinru" unicode="&#58913;" d="M837.824-23.232 267.648-23.232c-67.52 0-122.176 54.656-122.176 122.176L145.472 261.824l81.472 0 0-53.248c0-83.072 67.264-150.4 150.4-150.4l350.848 0c83.008 0 150.4 67.328 150.4 150.4L878.592 559.424c0 83.072-67.392 150.4-150.4 150.4L377.344 709.824c-83.136 0-150.4-67.328-150.4-150.4l0-12.48L145.408 546.944 145.408 669.056c0 67.52 54.656 122.176 122.176 122.176l570.176 0C905.28 791.232 960 736.576 960 669.056l0-570.112C960 31.424 905.28-23.232 837.824-23.232zM471.232 587.648 715.648 384l-244.352-162.944L471.296 343.232 64 343.232 64 465.408l407.232 0L471.232 587.648z"  horiz-adv-x="1024" />

    
    <glyph glyph-name="shuaxin" unicode="&#58977;" d="M798.336 263.68c-16.896 11.2-35.328 13.184-43.2 5.312l-0.384 0.576c-0.256-0.704-0.704-1.344-0.96-1.984-0.128-0.128-0.32-0.192-0.384-0.32-0.384-0.512-0.512-1.152-0.704-1.664-43.776-87.808-133.952-148.288-238.656-148.288-128.32 0-235.2 90.496-260.992 211.136L294.4 287.104c0.32-0.448 0.576-1.024 0.96-1.344 9.984-9.984 32.192-3.968 49.664 13.44C362.368 316.608 368.448 338.816 358.528 348.8l0.192 0.192L250.944 456.768 250.368 456.768c-5.312 9.344-19.712 16-36.8 16s-31.488-6.656-36.8-16L176.64 456.768 67.328 347.584l0.192-0.256C59.456 336.832 65.472 315.904 82.112 299.2c16.64-16.64 37.568-22.72 48.128-14.528l0.192-0.256 43.392 43.392c26.944-163.584 169.024-288.384 340.224-288.384 132.608 0 247.488 74.944 305.152 184.704L819.2 224.128C825.408 234.24 816.192 251.84 798.336 263.68zM941.824 468.736c-16.704 16.704-37.568 22.72-48.128 14.592L893.44 483.584l-43.392-43.456c-27.008 163.648-168.96 288.448-340.224 288.448-132.544 0-247.424-74.944-305.152-184.704L204.8 543.872C198.528 533.76 207.744 516.16 225.6 504.32c16.896-11.2 35.264-13.184 43.136-5.376l0.384-0.512C269.44 499.136 269.824 499.776 270.208 500.416c0.064 0.128 0.192 0.192 0.32 0.32 0.32 0.512 0.448 1.152 0.704 1.664C314.88 590.208 405.12 650.752 509.824 650.752c128.32 0 235.264-90.56 260.992-211.136l-41.28 41.28c-0.384 0.448-0.64 1.024-1.024 1.344-9.92 9.984-32.128 3.968-49.536-13.504-17.408-17.344-23.488-39.552-13.568-49.536l-0.192-0.256 107.776-107.712 0.576 0c5.376-9.344 19.712-16 36.736-16s31.424 6.656 36.8 16l0.256 0 109.184 109.184-0.192 0.192C964.544 431.168 958.528 452.096 941.824 468.736z"  horiz-adv-x="1024" />

    


  </font>
</defs></svg>

 src/assets/iconfont/iconfont.ttf

Binary files differ

 src/assets/iconfont/iconfont.woff

Binary files differ

 src/assets/iconfont/iconfont.woff2

Binary files differ

 src/assets/js/history.js

@@ -24,11 +24,11 @@
 * 获取顶部电池组信息
 * 参数：btds.BattGroupId=1005129&btds.test_record_count=7 
 */
export const searchBattTestDataStop = (BattGroupId,test_record_count) => {
export const searchBattTestDataStop = (BattGroupId, count) => {
    return axios({
        method: "post",
        url: "/yckj/zijing_sx/BatttestdatastopAction_findByInfo?btds.BattGroupId=" + BattGroupId + "&btds.test_record_count=" + test_record_count,
        data: null
        url: "/yckj/zijing_sx/BatttestdatastopAction_findByInfo",
        data: "btds.BattGroupId="+BattGroupId+"&btds.test_record_count="+count
    })
}


 src/assets/js/tools/formatSeconds.js

New file
@@ -0,0 +1,35 @@
/**
 * 将秒转化成时:分:秒
 *
 * @param   {[Number]}  value  秒数
 *
 * @return  {[String]}         00:00:00
 */
function formatSeconds(value) {
    if(value<=0){
        value = 0;
    }
    var theTime = parseInt(value);// 秒
    var theTime1 = 0;// 分
    var theTime2 = 0;// 小时
    // alert(theTime);
    if(theTime >= 60) {
        theTime1 = parseInt(theTime/60);
        theTime = parseInt(theTime%60);
        //alert(theTime1+"-"+theTime);
        if(theTime1 >= 60) {
            theTime2 = parseInt(theTime1/60);
            theTime1 = parseInt(theTime1%60);
        }
    }
    var result = (theTime<10?"0":"")+parseInt(theTime);
    if(theTime1 >= 0) {
        result =(theTime1<10?"0":"")+parseInt(theTime1)+":"+result;
    }
    if(theTime2 >= 0) {
        result =(theTime2<10?"0":"")+parseInt(theTime2)+":"+result;
    }
    return result;
}

export default formatSeconds;

 src/assets/js/tools/getQueryString.js

New file
@@ -0,0 +1,11 @@
//获取连接中的指定参数
function getQueryString(name) { 
    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i"); 
    var r = window.location.href.replace(/^.*\?/, '').match(reg); 
    if (r != null) {
        return decodeURI(r[2]);
    }	 
    return null;
}

export default getQueryString;

 src/assets/js/tools/getTreeDataByKey.js

New file
@@ -0,0 +1,36 @@
/**
 * 根据key值获取树状节点的对象
 *
 * @param   {[String]}  key       查询的值
 * @param   {[Array]}   treeData   树状数据
 * @param   {[String]}  nodeKey   对比的属性名，默认为id
 * @param   {[String]}  childKey  子节点的属性名 默认为children
 * @return  {[Object]}            返回key所在的的对象 -1表示未获取到
 */
function getTreeDataByKey(key, treeData, nodeKey, childKey) {
    let id = nodeKey?nodeKey:'id';
    let child = childKey?childKey:'children';
    // 检测数据不是数组（中断回调函数）
    if(!(treeData instanceof Array)) {
        return -1;
    }
    let result = -1;
    // 遍历树状数据获取与可以对应的对象
    for(let i=0; i<treeData.length; i++) {
        let item = treeData[i];
        if(item[id] == key) {
            result = item;
            break;
        }else {
            result = getTreeDataByKey(key, item[child], nodeKey, childKey);
            if(result != -1) {
                break;
            }
        }
    }

    return result;
}

export default getTreeDataByKey;


 src/assets/js/tools/index.js

New file
@@ -0,0 +1,8 @@
import formatSeconds from './formatSeconds';        // 将秒转化成时:分:秒
import getQueryString from './getQueryString';      // 解析地址栏
import getTreeDataByKey from './getTreeDataByKey';
export {
    formatSeconds,
    getQueryString,
    getTreeDataByKey
}

 src/components/ContentBox.vue

@@ -8,6 +8,7 @@
        <div class="content-box" :class="{'no-border': noborder}" v-show="!hide">
            <div class="content-box-title" :class="getTitlePos" v-if="!noHeader">
                <slot name="title">{{title}}</slot>
                
            </div>
            <div class="content-box-content">
                <slot></slot>
@@ -15,6 +16,9 @@
            <div class="content-box-footer">
                <slot name="footer"></slot>
            </div>
        </div>
        <div class="box-tools">
            <slot name="box-tools"></slot>
        </div>
    </div>
</template>
@@ -157,6 +161,11 @@
    width: 0 !important;
    transition: 0.5s ease;
}
.box-tools {
    position: absolute;
    top: 4px;
    right: 8px;
}
</style>



 src/components/MyElTree.vue

@@ -2,9 +2,12 @@
    <el-tree
    class="filter-tree"
    :props="defaultProps"
    :auto-expand-parent="true"
    node-key="id"
    ref="tree"  
    :data="data"
    :default-expanded-keys="defaultExpandedKeys"
    :current-node-key="currentNodeKey"
    @node-click="nodeClick">
    </el-tree>
</template>
@@ -18,6 +21,16 @@
            default() {
                return [];
            }
        },
        defaultExpandedKeys: {
            type: Array,
            default(){
                return []
            }
        },
        currentNodeKey: {
            type: [String, Number],
            default: ""
        }
    },
    data(){
@@ -28,6 +41,14 @@
                label: 'label',
                isLeaf: 'leaf',
            }
        }
    },
    watch: {
        currentNodeKey(n) {
            this.$nextTick(()=>{
                this.current = n;
                this.$refs.tree.setCurrentKey(n);
            });
        }
    },
    methods: {
@@ -41,6 +62,12 @@
            }
            this.$refs.tree.setCurrentKey(this.current);
        },
    },
    mounted(){
        setTimeout(()=>{
            this.$refs.tree.setCurrentKey(this.currentNodeKey);
            this.current = this.currentNodeKey;
        }, 2000);
    }
}
</script>

 src/components/PageMenu.vue

@@ -50,7 +50,7 @@
                    closable: false,
                    childrens: [
                        {
                           label: '实时监测',
                            label: '实时监测',
                            name: 'realTime',
                            src: '#/real-time',
                            closable: true, 

 src/components/chart/BarChart.vue

@@ -35,6 +35,10 @@
        unit: {
            type: String,
            default: '',
        },
        showLabel: {
            type: Boolean,
            default: true,
        }
    },
    methods:{
@@ -52,8 +56,11 @@
                    },
                    formatter(params){
                        var res = params[0].name+'<br/>';
                        res+= params[0].seriesName;
                        res+=' : '+params[0].data[1]+unit+'</br>';
                        params.forEach(item=>{
                            res += item.marker;
                            res += item.seriesName;
                            res +=' : '+item.data[1]+unit+'</br>';
                        });
                        return res;
                    }
                },
@@ -131,22 +138,29 @@

                // 显示数据
                item.label= {
                    show: true,
                    show: this.showLabel,
                    position: 'top',
                    color: '#fff',
                };

                // 设置背景
                item.itemStyle = {
                    color: function(value) {
                        let val = value.value[1];
                        if(val == max) {
                            return 'green';
                        }else if(val == min) {
                            return 'red';
                // 设置颜色
                if(item.hColor) {
                    // 设置背景
                    item.itemStyle = {
                        color: item.hColor,
                    };
                }else {
                    // 设置背景
                    item.itemStyle = {
                        color: function(value) {
                            let val = value.value[1];
                            if(val == max) {
                                return 'green';
                            }else if(val == min) {
                                return 'red';
                            }
                        }
                    }
                };
                    };
                }
                return item;
            });
            // 返回

 src/components/chart/LineChart.vue

@@ -48,12 +48,16 @@
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                        type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                        type: 'line'        // 默认为直线，可选为：'line' | 'shadow'
                    },
                    appendToBody: true,
                    formatter(params){
                        var res = params[0].name+'<br/>';
                        res+= params[0].seriesName;
                        res+=' : '+params[0].data[1]+unit+'</br>';
                        params.forEach(item=>{
                            res += item.marker;
                            res += item.seriesName;
                            res +=' : '+item.data[1]+unit+'</br>';
                        });
                        return res;
                    }
                },
@@ -63,9 +67,11 @@
                    bottom: '2%',
                    containLabel: true
                },
                legend: this.getLegend(opt),
                xAxis: [
                    {
                        type: 'category',
                        boundaryGap: 0,
                    }
                ],
                yAxis: [
@@ -79,11 +85,17 @@
                            if(min == Infinity) {
                                return 0;
                            }
                            if(min>0) {
                                return Math.floor(min*0.9);
                            }else {
                                return Math.floor(min*1.01);
                            }
                            
                        },
                        max: function(data) {
                            let max = data.max;
                            if(max == -Infinity) {
                                max = 1;
                                return 1;
                            }
                            return Math.ceil(max*1.01);
                        }
@@ -91,6 +103,8 @@
                ],
                series: this.getSeries(opt),
            };
            // 清理画布
            this.$G.chartManage.get(this.id).clear();
            // 设置配置项
            this.$G.chartManage.get(this.id).setOption(option);
        },
@@ -114,6 +128,16 @@
            // 返回标题
            return opt.title;
        },
        getLegend(opt){
            // 未配置legend
            if(!opt || !opt.legend) {
                return {
                    show: false,
                }
            }

            return opt.legend;
        },
        getSeries(opt) {    // 设置series
            // 未配置series
            if(!opt || !opt.series) {

 src/global/ChartManage.js

@@ -44,25 +44,7 @@
            return chart;
        }
    });

    let endChart = groups[groups.length-1];
    // 未获取的chart对象列表
    if(groups.length == 0 || !endChart) {
        return;
    }
    let dataZoom = endChart.getOption().dataZoom[0];
    groups.forEach(chart=> {
        chart.dispatchAction({
            type: 'dataZoom',
            batch: [
                {
                    // 第一个 dataZoom 组件
                    start: dataZoom.start,
                    end: dataZoom.end,
                }
            ]
        });
    });
    
    // 清空分组
    this.disconnect();
    this.group = ECharts.connect(groups);

 src/main.js

@@ -15,6 +15,8 @@
import layer from 'vue-layer'
import 'vue-layer/lib/vue-layer.css';

import './assets/iconfont/iconfont.css';

// jsonp请求方式  请求tx地图接口  
import VueJsonp from 'vue-jsonp'
Vue.use(VueJsonp)

 src/pages/dataTest/HomeList.vue

@@ -5,6 +5,8 @@
    style="width:320px">
        <my-el-tree
        :data="data"
        :default-expanded-keys="expandedKeys"
        :current-node-key="getCurrentKey"
        @node-click="nodeClick"
        @leaf-click="leafClick"></my-el-tree>
    </content-box>
@@ -19,14 +21,32 @@
   searchBattInfo,
} from '../../assets/js/api'

import {
   getTreeDataByKey,
} from '../../assets/js/tools'

export default {
    components: {
        ContentBox,
        MyElTree,
    },
    props: {
        defaultExpandedKeys: {
            type: Array,
            default() {
                return []
            },
        },
        currentNodeKey: {
            type: [String, Number],
            default: ""
        }
    },
    data() {
        return {
           data: [], 
           data: [],
           expanded: [],
           currentKey: '',
        }
    },
    methods: {
@@ -69,6 +89,20 @@
            });
            // 设置树状列表
            this.data = result;
            // 设置默认展开的节点
            if(data.length>0) {
                let item = data[0];
                this.expanded = [
                    item.StationName1,
                    item.StationName2,
                    item.StationName5,
                    item.StationName3,
                ];
            }
            let expandedNode = getTreeDataByKey(this.expandedKeys[0], result);
            if(expandedNode != -1) {
                this.nodeClick(expandedNode);
            }
        },
        addData(list, val, parent, data) {
            let item;
@@ -96,15 +130,22 @@
            return -1;
        },
        nodeClick(data, node) {
            if(data.children[0].label == "数据加载中...") {
            if(data.children && data.children[0] && data.children[0].label == "数据加载中...") {
                this.searchBattInfo(data, node)
            }
        },
        searchBattInfo(data, node) {
            // 加载等待
            node.loading=true;
            if(node) {
                node.loading=true;
            }
            
            searchBattInfo(data.data).then((res)=>{
                node.loading=false;
                // 关闭等待
                if(node) {
                    node.loading=false;
                }
                
                let rs = JSON.parse(res.data.result);
                let result=[{
                    id: Math.random(),
@@ -113,13 +154,25 @@
                // 查询到结果
                if(rs.code == 1) {
                    result = rs.data.map(item=>{
                        item.id = item.StationName+'-'+item.BattGroupName;
                        item.id = item.BattGroupId;
                        item.label = item.BattGroupName;
                        item.leaf = true;
                        return item;
                    });
                }
                data.children = result;
                // 根据node的值判断不是通过点击触发的
                if(!node) {
                    let acIndex = 0;
                    for(let i=1; i<result.length; i++) {
                        if(result[i].BattGroupId == this.currentNodeKey) {
                            acIndex = i;
                            break;
                        }
                    }
                    this.currentKey = result[acIndex].id;
                    this.$emit('leaf-click', result[acIndex]);
                }
            });
        },
        leafClick(data) {
@@ -129,6 +182,22 @@
            
        },
    },
    computed: {
        expandedKeys() {
            console.log(this.defaultExpandedKeys);
            let parentKey = this.defaultExpandedKeys.join("-");
            console.log(parentKey);
            if(parentKey.length>0 && parentKey != '---') {
                return [parentKey];
            }else {
                let expanded = this.expanded.join("-");
                return [expanded];
            }
        },
        getCurrentKey() {
            return this.currentNodeKey?this.currentNodeKey:this.currentKey;
        }
    },
    mounted() {
        // 查询电池组
        this.searchStation();

 src/pages/dataTest/history.vue

@@ -2,35 +2,46 @@
    <flex-layout direction="row" class="page-history">
        <home-list slot="header"
        @toggleChange="toggleChange"
        @leaf-click="leafClick"></home-list>
        @leaf-click="leafClick"
        :default-expanded-keys="defaultExpandedKeys"
        :current-node-key="currentNodeKey"></home-list>
        <content-box style="margin-left: 4px; margin-right: 4px;" :title="battFullName">
            <div slot="box-tools" class="box-tools">
              <el-tooltip class="item" effect="dark" content="实时数据" placement="bottom">
                <i class="iconfont el-icon-jinru" @click="syncPage"></i>
              </el-tooltip>
            </div>
            <flex-layout>
                <div class="content-header" slot="header">
                    <div class="table-layout">
                        <div class="table-row">
                            <div class="table-cell text-right w80">电池状态:</div>
                            <div class="table-cell">
                                <el-input placeholder="" size="small" :disabled="true"></el-input>
                                <el-input v-model="top.state" placeholder="" 
                                size="small" :disabled="true"></el-input>
                            </div>
                            <div class="table-cell text-right w80">端电压:</div>
                            <div class="table-cell">
                                <el-input placeholder="" size="small" :disabled="true"></el-input>
                                <el-input v-model="top.group" placeholder="" 
                                size="small" :disabled="true"></el-input>
                            </div>
                            <div class="table-cell text-right w80">电池电流:</div>
                            <div class="table-cell">
                                <el-input placeholder="" size="small" :disabled="true"></el-input>
                                <el-input v-model="top.curr" placeholder="" 
                                size="small" :disabled="true"></el-input>
                            </div>
                            <div class="table-cell text-right w80">测试时长:</div>
                            <div class="table-cell">
                                <el-input placeholder="" size="small" :disabled="true"></el-input>
                                <el-input v-model="top.test_long" placeholder="" size="small" :disabled="true"></el-input>
                            </div>
                        </div>
                        <div class="table-row">
                            <div class="table-cell text-right w80">测试日期:</div>
                            <div class="table-cell">
                                <el-cascader :options="list" 
                                <el-cascader v-model="test_record.value" :options="test_record.list" 
                                size="small" placeholder="请选择测试日期"
                                style="width: 100%; min-width:16rem">
                                style="width: 100%; min-width:16rem"
                                @change="testRecordChange">
                                    <template slot-scope="{ node, data }">
                                        <span>{{ data.label }}</span>
                                        <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
@@ -39,29 +50,28 @@
                            </div>
                            <div class="table-cell text-right w80">测试容量:</div>
                            <div class="table-cell">
                                <el-input placeholder="" size="small" :disabled="true"></el-input>
                                <el-input v-model="top.test_cap" placeholder="" 
                                size="small" :disabled="true"></el-input>
                            </div>
                            <div class="table-cell text-right w80">剩余容量:</div>
                            <div class="table-cell">
                                <el-input placeholder="" size="small" :disabled="true"></el-input>
                                <el-input v-model="top.re_cap" placeholder="" 
                                size="small" :disabled="true"></el-input>
                            </div>
                            <div class="table-cell text-right w80">续航时间:</div>
                            <div class="table-cell">
                                <el-input placeholder="" size="small" :disabled="true"></el-input>
                                <el-input v-model="top.xuhang" placeholder="" size="small" :disabled="true"></el-input>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="page-content">
                    <div class="history-list">
                        
                    </div>
                    <div class="flex-box-list">
                        <div class="flex-box">
                            <line-chart ref="groupVol" id="groupVol" unit="V"></line-chart>
                        </div>
                        <div class="flex-box">
                            <bar-chart ref="monBar" id="monBar"></bar-chart>
                            <bar-chart ref="monBar" id="monBar" :show-label="false"></bar-chart>
                        </div>
                    </div>
                    <div class="flex-box-list">
@@ -73,109 +83,616 @@
                        </div>
                    </div>
                </div>
                <div class="content-footer" slot="footer">
                    <div class="slider-container">
                        <el-slider v-model="slider" size="small" 
                        :format-tooltip="formatTooltip"
                        @input="sliderInput"></el-slider>
                    </div>
                </div>
            </flex-layout>
        </content-box>
    </flex-layout>
</template>

<script>
import ContentBox from '../../components/ContentBox'
import HomeList from './HomeList'
import BarChart from '../../components/chart/BarChart'
import LineChart from '../../components/chart/LineChart'
import ContentBox from "../../components/ContentBox";
import HomeList from "./HomeList";
import BarChart from "../../components/chart/BarChart";
import LineChart from "../../components/chart/LineChart";

import {
  searchBattTestData,
  searchBattTestDataStop,
  searchHistory
} from "../../assets/js/history";

import { formatSeconds, getQueryString } from "../../assets/js/tools";

// 端信息
let allData = {
  groupVol: [],
  onlineVol: [],
  testCurr: [],
  testTimeLong: [],
  recordTime: []
};
// 单体折线信息
let monLineData = {
  vol: []
};
// 单体柱状信息
let monBarData = {
  vol: []
};
// 4个图表
let groupVolLineChart, currLineChart, monLineChart, monBarChart;

export default {
    components: {
        ContentBox,
        HomeList,
        BarChart,
        LineChart,
  components: {
    ContentBox,
    HomeList,
    BarChart,
    LineChart
  },
  data() {
    // 默认展开的节点
    let defaultExpandedKeys = [
      getQueryString("province"),
      getQueryString("city"),
      getQueryString("county"),
      getQueryString("home")
    ];
    // 默认激活的电池组
    let currentNodeKey = getQueryString("batt") ? getQueryString("batt") : "";
    return {
      data: [],
      batt: {},
      top: {
        state: "", // 电池状态
        group: "", // 端电压
        curr: "", // 电池电流
        test_long: "", // 测试时长
        test_cap: "", // 测试容量
        re_cap: "", // 剩余容量
        xuhang: "" // 续航时长
      },
      test_record: {
        value: [],
        list: [
          {
            value: "herongDischarge",
            label: "核容放电",
            children: []
          },
          {
            value: "jianceDischarge",
            label: "监测放电",
            children: []
          },
          {
            value: "herongCharge",
            label: "核容充电",
            children: []
          },
          {
            value: "jianceCharge",
            label: "监测充电",
            children: []
          }
        ]
      },
      slider: 100,
      testTimeLong: [],
      defaultExpandedKeys: defaultExpandedKeys,
      currentNodeKey: currentNodeKey
    };
  },
  methods: {
    toggleChange() {
      this.resize();
    },
    data() {
    resize() {
      this.$G.chartManage.resize("groupVol");
      this.$G.chartManage.resize("monBar");
      this.$G.chartManage.resize("groupCurr");
      this.$G.chartManage.resize("monInfo");
    },
    leafClick(data) {
      this.batt = data;
      // 重置页面内容
      this.init();
      // 获取充放电记录
      this.searchBattTestData();
    },
    // 初始化页面数据
    init() {
      // 初始化充放电记录
      this.test_record.value = [];
      this.test_record.list[0].children = [];
      this.test_record.list[1].children = [];
      this.test_record.list[2].children = [];
      this.test_record.list[3].children = [];
      // 初始化顶部文本框内容
      this.top = {
        state: "", // 电池状态
        group: "", // 端电压
        curr: "", // 电池电流
        test_long: "", // 测试时长
        test_cap: "", // 测试容量
        re_cap: "", // 剩余容量
        xuhang: "" // 续航时长
      };

      // 初始化图表
      this.initChart();
    },
    // 初始化图表和图表数据
    initChart() {
      // 拖动条默认值100
      this.slider = 100;
      this.testTimeLong = [];

      // 端信息
      allData = {
        groupVol: [],
        onlineVol: [],
        testCurr: [],
        testTimeLong: [],
        recordTime: []
      };
      // 单体折线信息
      monLineData = {
        vol: []
      };
      // 单体柱状信息
      monBarData = {
        vol: []
      };
      // 端电压折线图
      groupVolLineChart = {
        color: ["#FF0000", "#15E3F3"],
        title: {
          show: true,
          text: "端电压折线图",
          x: "center",
          textStyle: {
            fontSize: "14"
          }
        },
        legend: {
          show: true,
          data: ["组端电压", "在线电压"],
          right: 0,
          orient: "vertical"
        },
        series: [
          {
            name: "组端电压",
            data: []
          },
          {
            name: "在线电压",
            data: []
          }
        ]
      };

      // 电池电流折线图
      currLineChart = {
        title: {
          show: true,
          text: "电池电流折线图",
          x: "center",
          textStyle: {
            fontSize: "14"
          }
        },
        series: [
          {
            name: "电池电流",
            data: []
          }
        ]
      };

      // 单体信息折线图
      monLineChart = {
        title: {
          show: true,
          text: "单体电压",
          x: "center",
          textStyle: {
            fontSize: "14"
          }
        },
        series: []
      };
      // 设置折线图
      this.setLineChart();

      // 单体信息柱状图
      monBarChart = {
        title: {
          show: true,
          text: "最大值=0V;最小值=0V;平均值=0V;累加和=0V",
          x: "center",
          textStyle: {
            fontSize: "14"
          }
        },
        series: [
          {
            name: "单体电压",
            zlevel: 1,
            data: []
          }
          // {
          //     name: '初始单体电压',
          //     barGap: '-100%',
          //     zlevel: 0,
          //     hColor: '#FFFFFF',
          //     data: []
          // }
        ]
      };
      // 设置柱状图
      this.setBarChart();
    },
    // 设置折线图
    setLineChart() {
      // 设置端电压折线图
      this.setGroupVolLineChart();
      // 设置电池电流折线图
      this.setCurrLineChart();
      // 设置单体折线图
      this.setMonLineChart();
      // 建立联动
      this.$G.chartManage.connect(["groupVol", "groupCurr", "monInfo"]);
    },
    // 设置端电压折线图
    setGroupVolLineChart() {
      // 根据allData.groupVol数据设置groupVolLineChart的值
      groupVolLineChart.series[0].data = allData.groupVol;
      groupVolLineChart.series[1].data = allData.onlineVol;
      // 更新图表
      this.$refs.groupVol.setOption(groupVolLineChart);
    },
    // 设置电池电流折线图
    setCurrLineChart() {
      // 根据allData.testCurr数据设置currLineChart的值
      currLineChart.series[0].data = allData.testCurr;
      // 更新图表
      this.$refs.groupCurr.setOption(currLineChart);
    },
    // 设置单体折线图
    setMonLineChart() {
      // 根据monLineData的值设置monLineChart
      let dataList = monLineData.vol;
      monLineChart.series = dataList.map((item, index) => {
        let monNum = "#" + (index + 1);
        return {
            battFullName: '电池组全称',
            data: [],
            batt: {},
            list: [
                {
                    value: 'herongDischarge',
                    label: '核容放电',
                    children: []
                },
                {
                    value: 'herongCharge',
                    label: '核容充电',
                    children: []
                },
                {
                    value: 'jianceDischarge',
                    label: '监测放电',
                    children: []
                },
                {
                    value: 'jianceCharge',
                    label: '监测充电',
                    children: []
                },
            ]
        }
          name: monNum,
          data: item
        };
      });
      // 更新图表
      this.$refs.monInfo.setOption(monLineChart);
    },
    methods: {
        toggleChange() {
            this.resize();
        },
        resize() {
            this.$G.chartManage.resize('groupVol');
            this.$G.chartManage.resize('monBar');
            this.$G.chartManage.resize('groupCurr');
            this.$G.chartManage.resize('monInfo');
        },
        leafClick(data) {
            this.batt = data;
            // 查询历史数据
        }
    // 设置柱状图
    setBarChart() {
      // 根据monBarData的值设置monBarChart
      let dataList = monBarData.vol;
      let index = this.getDataIndex(dataList.length, this.slider);
      if (index != -1) {
        monBarChart.series[0].data = dataList[index];
        // monBarChart.series[1].data = dataList[0];
      }
      // 设置柱状图
      this.$refs.monBar.setOption(monBarChart);
    },
    mounted() {
        // 屏幕缩放时触发
        window.addEventListener('resize', ()=>{
            this.resize();
    // 查询测试信息
    searchBattTestData() {
      let batt = this.batt;
      // 开启等待框
      let loading = this.$layer.loading(1);
      searchBattTestData({
        num: batt.FBSDeviceId,
        BattGroupId: batt.BattGroupId
      })
        .then(res => {
          // 关闭等待框
          this.$layer.close(loading);
          // 解析数据
          let rs = JSON.parse(res.data.result);
          let herongDischarge = []; // 核容放电
          let herongCharge = []; // 核容充电
          let jianceDischarge = []; // 监测放电
          let jianceCharge = []; // 监测充电
          if (rs.code == 1) {
            rs.data.forEach(item => {
              item.value = item.test_starttime;
              item.label = item.test_starttime;
              if (item.test_type == 3) {
                // 测试类型为放电
                if (item.test_starttype == 3) {
                  //  核容放电
                  herongDischarge.push(item);
                } else {
                  // 监测放电
                  jianceDischarge.push(item);
                }
              } else if (item.test_type == 2) {
                // 测试类型为充电
                if (item.test_starttype == 3) {
                  //  核容充电
                  herongCharge.push(item);
                } else {
                  // 监测充电
                  jianceCharge.push(item);
                }
              }
            });
          } else {
            this.$layer.msg("未获取到充放电记录");
          }
          // 充放电记录
          this.test_record.list[0].children = herongDischarge;
          this.test_record.list[1].children = jianceDischarge;
          this.test_record.list[2].children = herongCharge;
          this.test_record.list[3].children = jianceCharge;
        })
        .catch(error => {
          this.$layer.close(loading);
          console.log(error);
        });
    },
    // 切换测试信息
    testRecordChange() {
      let testRecord = this.getTestRecord();
      // 初始化图表
      this.initChart();

      // 获取顶部电池组信息
      this.searchBattTestDataStop(
        testRecord.BattGroupId,
        testRecord.test_record_count
      );

      // 查询历史数据
      this.searchHistory(testRecord.BattGroupId, testRecord.test_record_count);
    },
    // 查询顶部信息
    searchBattTestDataStop(BattGroupId, count) {
      searchBattTestDataStop(BattGroupId, count).then(res => {
        let rs = JSON.parse(res.data.result);
        if (rs.code == 1) {
          let data = rs.data[0];
          this.top.test_cap = data.test_cap.toFixed(1) + "AH";
          this.top.test_long = formatSeconds(data.test_timelong);
        }
      });
    },
    // 查询历史信息
    searchHistory(BattGroupId, count) {
      // 开启等待框
      let loading = this.$layer.loading(1);
      searchHistory({
        BattGroupId: BattGroupId,
        test_record_count: count
      })
        .then(res => {
          // 关闭等待框
          this.$layer.close(loading);
          let rs = JSON.parse(res.data.result);
          let data = [];
          // 数据
          if (rs.code == 1) {
            data = rs.data;
          }
          // 格式化数据
          this.formateHisData(data);
        })
        .catch(error => {
          // 关闭等待框
          this.$layer.close(loading);
          console.log(error);
        });
    },
    // 格式化历史信息数据
    formateHisData(data) {
      let record_time = -1; // 记录时间
      data.forEach(item => {
        let mon_num = item.mon_num;
        // 获取组端电压，在线电压,组端电流的信息和开辟一个单体柱状图
        if (record_time != item.record_time) {
          record_time = item.record_time;
          allData.groupVol.push([record_time, item.group_vol]);
          allData.onlineVol.push([record_time, item.online_vol]);
          allData.testCurr.push([record_time, item.test_curr]);
          allData.recordTime.push(record_time);
          allData.testTimeLong.push(item.test_timelong);
          this.testTimeLong.push(item.test_timelong);
          // 开辟空间
          monBarData.vol.push([]);
        }
        // 单体电压柱状图设置
        let monBarVol = monBarData.vol[monBarData.vol.length - 1];
        monBarVol.push(["#" + mon_num, item.mon_vol]);

        // 设置单体折线图信息
        if (typeof monLineData.vol[mon_num - 1] != "object") {
          // 开辟空间
          monLineData.vol[mon_num - 1] = [];
        }
        // 获取到需要使用的空间
        let monLineVol = monLineData.vol[mon_num - 1];
        monLineVol.push([record_time, item.mon_vol]);
      });
      // 设置折线图表
      this.setLineChart();
      // 执行滑动事件
      this.sliderInput();
    },
    // 获取测试的信息
    getTestRecord() {
      let value = this.test_record.value;
      // 没有选择充放电记录,返回-1
      if (value.length == 0) {
        return -1;
      }
      let type = value[0];
      let time = value[1];
      let list = this.test_record.list;
      let result = 0;
      // 遍历list
      for (let i in list) {
        let item = list[i];
        if (item.value == type) {
          for (let j in item.children) {
            let child = item.children[j];
            if (child.value == time) {
              result = child;
              break;
            }
          }
          break;
        }
      }

      // 返回结果集
      return result;
    },
    // 格式化滑块显示的内容
    formatTooltip(value) {
      let testTimeLong = this.testTimeLong;
      let index = this.getDataIndex(testTimeLong.length, value);
      let test_long = formatSeconds(0);
      if (index != -1) {
        test_long = formatSeconds(testTimeLong[index]);
      }
      this.top.test_long = test_long;
      return test_long;
    },
    // 拖动滑块时触发
    sliderInput() {
      // 设置头部信息
      this.setTopData();

      // 设置柱状图
      this.setBarChart();
    },
    // 设置顶部文本框的数据
    setTopData() {
      // 组端电压和在线电压
      let groupVol = allData.groupVol;
      let onlineVol = allData.onlineVol;
      let testCurr = allData.testCurr;
      let index = this.getDataIndex(groupVol.length, this.slider);
      if (index != -1) {
        this.top.group =
          "在线：" +
          onlineVol[index][1].toFixed(2) +
          "V;组端：" +
          groupVol[index][1].toFixed(2) +
          "V";
        this.top.curr = testCurr[index][1].toFixed(1) + "A";
      }
    },
    // 根据百分比获取显示的数据的笔数
    getDataIndex(num, percent) {
      return Math.floor(num * percent / 100) - 1;
    },
    // 向父级发送同步页面的指令
    syncPage() {
      let batt = this.batt;
      console.log(batt);
      let search="?province="+batt.StationName1
      +"&city="+batt.StationName2+"&county="+batt.StationName5
      +"&home="+batt.StationName3+"&batt="+batt.BattGroupId;
      window.parent.postMessage({
        cmd: "syncPage",
        params: {
          pageInfo: {
            label: '实时监测',
            name: 'realTime',
            src: '#/real-time'+search,
            closable: true,
          }
        },
      }, "*");
    }
}
  },
  computed: {
    battFullName() {
      let batt = this.batt;
      if (batt.StationName && batt.BattGroupName) {
        return batt.StationName + "-" + batt.BattGroupName;
      }
      return "电池组全称";
    }
  },
  mounted() {
    // 初始化图表
    this.initChart();
    // 屏幕缩放时触发
    window.addEventListener("resize", () => {
      this.resize();
    });
  }
};
</script>

<style scoped>
.page-history {
    color: #FFFFFF;
  color: #ffffff;
}
.table-cell.text-right {
    font-size: 14px;
  font-size: 14px;
}
.table-row .table-cell {
    padding-top: 12px;
  padding-top: 12px;
}
.page-content {
    position: relative;
    padding-top: 8px;
    padding-bottom: 2px;
    box-sizing: border-box;
    height: 100%;
  position: relative;
  padding-top: 8px;
  padding-bottom: 2px;
  box-sizing: border-box;
  height: 100%;
}
.history-list {
    position: absolute;
    top: 8px;
    left: 24px;
    z-index: 99;
  position: absolute;
  top: 8px;
  left: 24px;
  z-index: 99;
}
.flex-box-list {
    display: flex;
    flex-direction: row;
    height: 50%;
    box-sizing: border-box;
  display: flex;
  flex-direction: row;
  height: 50%;
  box-sizing: border-box;
}
.page-content .flex-box {
    flex:1;
    overflow: hidden;
  flex: 1;
  overflow-x: hidden;
}
.slider-container {
  padding-left: 16px;
  padding-right: 16px;
  overflow: hidden;
}
.box-tools {
  line-height: 32px;
}
.box-tools .iconfont {
  font-size: 20px;
}
.box-tools .iconfont:hover {
  cursor: pointer;
  color: #cfcfcf;
}
.box-tools .iconfont:active {
  color: #FF0000;
}
</style>


 src/pages/dataTest/realTime.vue

@@ -88,7 +88,6 @@
import BarChart from "../../components/chart/BarChart";

import { realTimeSearch, realTimeGroup } from "../../assets/js/realTime";
import moment from "moment";
let vol, res, temp, conduct, curr;
export default {
  components: {
@@ -301,7 +300,6 @@
        /*   console.log("rs", rs); */

        /* 数据表格 */
        let vovo = {};
        if (rs.code == 1) {
          this.vovo = rs.data.map(item => {
            return {
@@ -411,6 +409,8 @@
    this.$nextTick(() => {
      this.$G.chartManage.resize(this.acTabs);
    });
    // 向父组件通信
    window.parent.postMessage({kk:1}, "*")

    // 屏幕缩放时触发
    window.addEventListener("resize", () => {

 src/pages/home.vue

@@ -10,7 +10,7 @@
            class="no-selected full-height add-m-menu flex-layout">
                <el-tab-pane v-for="item in tabs" :key="item.name" 
                :label="item.label" :name="item.name" :closable="item.closable">
                    <iframe :src="item.src" width="100%" height="100%" frameborder="0" scrolling="no"></iframe>
                    <iframe :name="item.name" :src="item.src" width="100%" height="100%" frameborder="0" scrolling="no"></iframe>
                </el-tab-pane>
            </el-tabs>
        </div>
@@ -95,7 +95,40 @@
            // 设置激活的导航
            this.acTabs = menu.name;
        },
        // 处理从子iframe中获取到的指令
        handleMessage(msg) {
            switch(msg.cmd) {
                // 同步页面的指令
                case 'syncPage':
                    this.syncPage(msg.params);
                break;
            }
        },
        syncPage(params) {
            let tabs = this.tabs;
            let menu = params.pageInfo;
            // 检测name是否已经存在tabs内
            let notIn = true;
            tabs.forEach(item=>{
                if(item.name == menu.name) {
                    notIn = false;
                }
            });
            // 不在, 添加menu到tabs中
            if(notIn) {
                tabs.push(menu);
            }

            // 设置激活的导航
            this.acTabs = menu.name;
        }
    },
    mounted() {
        window.addEventListener('message', (msg)=>{
            // 处理数据
            this.handleMessage(msg.data);
        });
    }
}
</script>


 src/pages/index.vue

@@ -50,7 +50,7 @@
  searchBattInfo,
  searchAlarm,
  addMapStation,
  searchMap,
  // searchMap,
  addMapSetdian
} from "@/assets/js/api";