1、调整终端首页功能页面logo图片改为字体图标优化资源获取速度 2、新增终端合格率和程序呼叫页面 3、终端点检页面不再为独立页面，调整为与二保三保页...

zhaowei

2025-06-12 ae11615808e7c5fdc541780a687da068cd98386f

1、调整终端首页功能页面logo图片改为字体图标优化资源获取速度
2、新增终端合格率和程序呼叫页面
3、终端点检页面不再为独立页面，调整为与二保三保页面相同的跳转我的待办页面逻辑
4、终端所有页面完成前后端联调

 src/assets/terminal/call.svg

ÎļþÒÑɾ³ý

 src/assets/terminal/close.svg

ÎļþÒÑɾ³ý

 src/assets/terminal/demo.css

¶Ô±ÈÐÂÎļþ
@@ -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/terminal/demo_index.html

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,345 @@
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>iconfont Demo</title>
  <link rel="shortcut icon" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg" type="image/x-icon"/>
  <link rel="icon" type="image/svg+xml" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg"/>
  <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>
  <style>
    .main .logo {
      margin-top: 0;
      height: auto;
    }

    .main .logo a {
      display: flex;
      align-items: center;
    }

    .main .logo .sub-title {
      margin-left: 0.5em;
      font-size: 22px;
      color: #fff;
      background: linear-gradient(-45deg, #3967FF, #B500FE);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  </style>
</head>
<body>
  <div class="main">
    <h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont é¦–页" target="_blank">
      <img width="200" src="https://img.alicdn.com/imgextra/i3/O1CN01Mn65HV1FfSEzR6DKv_!!6000000000514-55-tps-228-59.svg">
      
    </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>
      
    </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">&#xee17;</span>
                <div class="name">上班</div>
                <div class="code-name">&amp;#xee17;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe694;</span>
                <div class="name">故障停机</div>
                <div class="code-name">&amp;#xe694;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe72a;</span>
                <div class="name">设备故障报修</div>
                <div class="code-name">&amp;#xe72a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe604;</span>
                <div class="name">设备点检管理</div>
                <div class="code-name">&amp;#xe604;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe65d;</span>
                <div class="name">配验收合格</div>
                <div class="code-name">&amp;#xe65d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe818;</span>
                <div class="name">呼叫</div>
                <div class="code-name">&amp;#xe818;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe639;</span>
                <div class="name">设备保养</div>
                <div class="code-name">&amp;#xe639;</div>
              </li>
          
          </ul>
          <div class="article markdown">
          <h2 id="unicode-">Unicode å¼•ç”¨</h2>
          <hr>

          <p>Unicode æ˜¯å­—体在网页端最原始的应用方式，特点是：</p>
          <ul>
            <li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
            <li>默认情况下不支持多色，直接添加多色图标会自动去色。</li>
          </ul>
          <blockquote>
            <p>注意：新版 iconfont æ”¯æŒä¸¤ç§æ–¹å¼å¼•ç”¨å¤šè‰²å›¾æ ‡ï¼šSVG 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.ttf?t=1749612611295') format('truetype');
}
</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 icon-shangban"></span>
            <div class="name">
              ä¸Šç­
            </div>
            <div class="code-name">.icon-shangban
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-guzhangtingji"></span>
            <div class="name">
              æ•…障停机
            </div>
            <div class="code-name">.icon-guzhangtingji
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shebeiguzhangbaoxiu"></span>
            <div class="name">
              è®¾å¤‡æ•…障报修
            </div>
            <div class="code-name">.icon-shebeiguzhangbaoxiu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shebeidianjianguanli"></span>
            <div class="name">
              è®¾å¤‡ç‚¹æ£€ç®¡ç†
            </div>
            <div class="code-name">.icon-shebeidianjianguanli
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-peiyanshouhege"></span>
            <div class="name">
              é…éªŒæ”¶åˆæ ¼
            </div>
            <div class="code-name">.icon-peiyanshouhege
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-hujiao"></span>
            <div class="name">
              å‘¼å«
            </div>
            <div class="code-name">.icon-hujiao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shebeibaoyang"></span>
            <div class="name">
              è®¾å¤‡ä¿å…»
            </div>
            <div class="code-name">.icon-shebeibaoyang
            </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>相比于 Unicode è¯­æ„æ˜Žç¡®ï¼Œä¹¦å†™æ›´ç›´è§‚。可以很容易分辨这个 icon æ˜¯ä»€ä¹ˆã€‚</li>
          <li>因为使用 class æ¥å®šä¹‰å›¾æ ‡ï¼Œæ‰€ä»¥å½“要替换图标时，只需要修改 class é‡Œé¢çš„ Unicode å¼•ç”¨ã€‚</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 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="#icon-shangban"></use>
                </svg>
                <div class="name">上班</div>
                <div class="code-name">#icon-shangban</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-guzhangtingji"></use>
                </svg>
                <div class="name">故障停机</div>
                <div class="code-name">#icon-guzhangtingji</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shebeiguzhangbaoxiu"></use>
                </svg>
                <div class="name">设备故障报修</div>
                <div class="code-name">#icon-shebeiguzhangbaoxiu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shebeidianjianguanli"></use>
                </svg>
                <div class="name">设备点检管理</div>
                <div class="code-name">#icon-shebeidianjianguanli</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-peiyanshouhege"></use>
                </svg>
                <div class="name">配验收合格</div>
                <div class="code-name">#icon-peiyanshouhege</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-hujiao"></use>
                </svg>
                <div class="name">呼叫</div>
                <div class="code-name">#icon-hujiao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shebeibaoyang"></use>
                </svg>
                <div class="name">设备保养</div>
                <div class="code-name">#icon-shebeibaoyang</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/terminal/fault.svg

ÎļþÒÑɾ³ý

 src/assets/terminal/iconfont.css

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,41 @@
@font-face {
  font-family: "iconfont"; /* Project id  */
  src: url('iconfont.ttf?t=1749612611295') format('truetype');
}

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

.icon-work:before {
  content: "\ee17";
}

.icon-close:before {
  content: "\e694";
}

.icon-fault:before {
  content: "\e72a";
}

.icon-spotCheck:before {
  content: "\e604";
}

.icon-passRate:before {
  content: "\e65d";
}

.icon-call:before {
  content: "\e818";
}

.icon-maintenance:before {
  content: "\e639";
}


 src/assets/terminal/iconfont.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1 @@
window._iconfont_svg_string_='<svg><symbol id="icon-shangban" viewBox="0 0 1024 1024"><path d="M870.182019 205.005158h-107.493073a255.935888 255.935888 0 0 0-501.63434 0H153.561533a153.561533 153.561533 0 0 0-153.561533 153.561533v511.871776a153.561533 153.561533 0 0 0 153.561533 153.561533h716.620486a153.561533 153.561533 0 0 0 153.561533-153.561533V358.566691a153.561533 153.561533 0 0 0-153.561533-153.561533z m-358.310243-102.374355a153.561533 153.561533 0 0 1 144.347841 102.374355H368.547679A153.561533 153.561533 0 0 1 511.871776 102.630803zM153.561533 307.379513h716.620486a51.187178 51.187178 0 0 1 51.187178 51.187178v102.374355H102.374355V358.566691a51.187178 51.187178 0 0 1 51.187178-51.187178z m716.620486 614.246132H153.561533a51.187178 51.187178 0 0 1-51.187178-51.187178v-307.123066h358.310244v51.187178a51.187178 51.187178 0 0 0 102.374355 0v-51.187178h358.310243v307.123066a51.187178 51.187178 0 0 1-51.187178 51.187178z" fill="#3E4055" ></path></symbol><symbol id="icon-guzhangtingji" viewBox="0 0 1024 1024"><path d="M128 109.714286h768c30.281143 0 54.857143 30.72 54.857143 68.608v226.377143c0 37.888-24.576 68.608-54.857143 68.608H128a49.956571 49.956571 0 0 1-38.765714-20.114286A78.116571 78.116571 0 0 1 73.142857 404.699429V178.249143c0-37.814857 24.576-68.534857 54.857143-68.534857z m81.92 135.021714a24.576 24.576 0 0 0-19.163429 9.874286 38.473143 38.473143 0 0 0-7.899428 23.917714c0 8.923429 2.852571 17.554286 7.899428 23.844571 5.12 6.290286 11.922286 9.874286 19.090286 9.874286h165.449143a24.576 24.576 0 0 0 19.017143-9.874286 38.473143 38.473143 0 0 0 7.972571-23.917714 38.473143 38.473143 0 0 0-7.899428-23.844571 24.576 24.576 0 0 0-19.090286-9.874286H209.846857zM128 582.948571h485.376A292.352 292.352 0 0 0 512 804.571429c0 53.174857 14.482286 103.131429 39.643429 146.285714H128a50.029714 50.029714 0 0 1-38.765714-20.114286 78.116571 78.116571 0 0 1-16.091429-48.420571V651.556571c0-37.888 24.576-68.534857 54.857143-68.534857z m81.92 165.449143a24.576 24.576 0 0 0-19.163429 9.874286 38.473143 38.473143 0 0 0-7.899428 23.844571c0 8.923429 2.852571 17.554286 7.899428 23.844572 5.12 6.363429 11.922286 9.947429 19.090286 9.947428h165.449143a24.576 24.576 0 0 0 19.017143-9.947428 38.473143 38.473143 0 0 0 7.972571-23.844572 38.473143 38.473143 0 0 0-7.899428-23.844571 24.576 24.576 0 0 0-19.090286-9.947429H209.846857z"  ></path><path d="M797.988571 585.142857A212.699429 212.699429 0 0 0 585.142857 797.988571a213.723429 213.723429 0 0 0 212.845714 212.772572 213.723429 213.723429 0 0 0 212.772572-212.845714c0-116.809143-94.354286-212.772571-212.845714-212.772572z m111.908572 266.020572l-54.857143 54.857142-54.857143-54.857142-54.857143 54.857142-54.857143-54.857142 54.857143-54.857143-54.857143-54.857143 54.857143-54.857143 54.857143 54.857143 54.857143-54.857143 54.857143 54.857143-54.857143 54.857143 54.857143 54.857143z"  ></path></symbol><symbol id="icon-shebeiguzhangbaoxiu" viewBox="0 0 1024 1024"><path d="M389.439571 939.994334c21.690135 0 39.24701 18.277352 39.247011 40.839643 0 22.600211-17.556875 40.877562-39.209091 40.877562H97.381144C54.152553 1021.59778 19.076722 985.080996 18.962963 940.032254V81.717205C19.114642 36.630543 54.114633 0.113759 97.381144 0h705.687787c43.266511 0.113759 78.304421 36.668463 78.418181 81.755125v208.407312c0 22.600211-17.518955 40.877562-39.209091 40.877562-21.614295 0-39.20909-18.277352-39.20909-40.877562V81.755125H97.381144v858.239209h292.096347zM273.746211 235.027023c-21.690135 0-39.20909-18.315271-39.209091-40.877562 0-22.600211 17.518955-40.877562 39.209091-40.877562h352.843894c21.652215 0 39.20909 18.277352 39.20909 40.877562 0 22.562291-17.556875 40.877562-39.20909 40.877562H273.708291z m0 163.43441c-21.690135 0-39.20909-18.277352-39.209091-40.839642s17.518955-40.877562 39.209091-40.877563h109.777869c21.614295 0 39.20909 18.315271 39.20909 40.877563 0 22.562291-17.556875 40.877562-39.20909 40.877562H273.708291z m370.476608-44.934983a69.469104 69.469104 0 0 1 64.691207 16.343441l160.780023 167.60559a70.910057 70.910057 0 0 1 17.632715 65.373764l-19.604546 79.669534a31.208009 31.208009 0 0 0 7.811483 28.553622l105.872128 110.346667a83.878634 83.878634 0 0 1 0 116.489676l-58.699876 61.430103a75.915473 75.915473 0 0 1-111.7497 0l-19.604545-20.476701-86.267583-89.869965a28.326103 28.326103 0 0 0-27.378108-8.190681l-72.540609 20.438782a71.327175 71.327175 0 0 1-70.568779-20.476701l-154.864531-161.38674a76.44635 76.44635 0 0 1-17.632714-73.564444l21.538455-87.898135c3.716142-17.746474 16.57096-31.928486 33.369439-36.782222 16.60888-5.915491 34.999991-1.137594 47.020573 12.248101l62.719376 65.373763 54.794135-14.257851 13.689054-57.107243-62.719377-65.373764a53.542781 53.542781 0 0 1-13.689053-51.115913 47.778969 47.778969 0 0 1 35.265429-34.734552l90.135404-22.638131z m9.821233 120.585017c18.239432 18.429031 25.064999 45.996738 17.632714 71.365095l-15.698804 67.459354a70.37918 70.37918 0 0 1-48.992403 51.077993l-64.691207 18.391111a71.440935 71.440935 0 0 1-68.483189-18.391111l-29.425777-30.715052-7.811483 32.724802 148.94904 155.281649 70.606699-18.391111c36.403024-9.821233 75.157077 1.023835 101.928467 28.553622l86.267583 89.945805 19.604545 20.438781 58.775716-61.316343-19.566626-20.476701-86.267583-89.869966a112.470176 112.470176 0 0 1-27.378107-106.289246l17.632714-71.365094-148.986959-155.28165-33.331519 8.152761 29.198259 28.705301z"  ></path></symbol><symbol id="icon-shebeidianjianguanli" viewBox="0 0 1024 1024"><path d="M791.23684 1023.988284H232.710439A230.479197 230.479197 0 0 1 0.018225 791.230982V232.70458A230.479197 230.479197 0 0 1 232.710439 0.012367h558.526401a230.479197 230.479197 0 0 1 232.692213 232.692213v558.526402a230.479197 230.479197 0 0 1-232.692213 232.757302zM232.710439 93.089252A143.195208 143.195208 0 0 0 93.09511 232.70458v558.526402A143.195208 143.195208 0 0 0 232.710439 930.781221h558.526401a143.195208 143.195208 0 0 0 139.550239-139.550239V232.70458a143.195208 143.195208 0 0 0-139.550239-139.615328H232.710439z"  ></path><path d="M791.23684 372.384997h-186.153771a46.538443 46.538443 0 1 1 0-93.076885h186.153771a46.538443 46.538443 0 1 1 0 93.076885z m0 372.372631h-186.153771a46.538443 46.538443 0 1 1 0-93.076886h186.153771a46.538443 46.538443 0 1 1 0 93.076886zM456.094964 260.692735L297.864258 437.538817a34.88756 34.88756 0 0 1-55.846131 0l-46.538443-55.846131a79.538429 79.538429 0 0 1 0-65.088731 34.88756 34.88756 0 0 1 55.846132 0l27.923065 27.923065 130.177462-148.923016a42.307675 42.307675 0 0 1 46.538443 0 55.455599 55.455599 0 0 1 0.130178 65.088731z m-130.177463 577.141778a139.615328 139.615328 0 1 1 139.615329-139.615328 143.195208 143.195208 0 0 1-139.745506 139.615328z m0-186.153771a46.538443 46.538443 0 1 0 46.538443 46.538443 43.999982 43.999982 0 0 0-46.66862-46.538443z"  ></path></symbol><symbol id="icon-peiyanshouhege" viewBox="0 0 1024 1024"><path d="M544 972.8v-44.8H115.2c-19.2 0-32-12.8-32-32V102.4c0-19.2 12.8-32 32-32h723.2c19.2 0 32 12.8 32 32v403.2h64V102.4c0-51.2-44.8-96-96-96H115.2C64 6.4 19.2 51.2 19.2 102.4V896c0 51.2 44.8 96 96 96h435.2c0-6.4-6.4-12.8-6.4-19.2z"  ></path><path d="M876.8 505.6c0 19.2 12.8 32 32 32s32-12.8 32-32-12.8-32-32-32-32 12.8-32 32zM518.4 960c0 19.2 12.8 32 32 32s32-12.8 32-32-12.8-32-32-32-32 12.8-32 32zM358.4 697.6H198.4c-19.2 0-32-12.8-32-32s12.8-32 32-32h160c19.2 0 32 12.8 32 32s-12.8 32-32 32z m371.2-332.8H569.6c-19.2 0-32-12.8-32-32s12.8-32 32-32h160c19.2 0 32 12.8 32 32s-19.2 32-32 32z m64-128h-256c-19.2 0-32-12.8-32-32s12.8-32 32-32h256c19.2 0 32 12.8 32 32s-19.2 32-32 32z m-352 588.8h-256c-19.2 0-32-12.8-32-32s12.8-32 32-32h256c19.2 0 32 12.8 32 32s-19.2 32-32 32z m345.6-243.2c-108.8 0-198.4 89.6-198.4 198.4s89.6 198.4 198.4 198.4 198.4-89.6 198.4-198.4-83.2-198.4-198.4-198.4z m147.2 134.4L755.2 896c-6.4 6.4-12.8 6.4-12.8 0l-25.6-25.6-76.8-76.8c-6.4-6.4-6.4-12.8 0-12.8l25.6-25.6c6.4-6.4 12.8-6.4 12.8 0l70.4 70.4 147.2-147.2c6.4-6.4 12.8-6.4 12.8 0l25.6 25.6c6.4 0 6.4 6.4 0 12.8z m-268.8-224h-64c-19.2 0-32-12.8-32-32s12.8-32 32-32h64c19.2 0 32 12.8 32 32s-12.8 32-32 32zM371.2 345.6c12.8-6.4 19.2 0 25.6 0 12.8 0 19.2 0 32-6.4 19.2-6.4 32-12.8 38.4-25.6 12.8-12.8 19.2-19.2 19.2-32s0-19.2-12.8-25.6h-6.4l-25.6 6.4h-12.8l-19.2-25.6 12.8-32 38.4-12.8c6.4 0 12.8 0 12.8-6.4v-12.8c0-6.4-6.4-6.4-6.4-6.4-12.8-6.4-25.6-12.8-38.4-12.8-12.8-6.4-32-6.4-44.8 0-25.6 6.4-38.4 19.2-57.6 44.8 0 6.4-12.8 38.4-6.4 64l-12.8 12.8-44.8-44.8v-6.4c0-6.4 0-6.4 6.4-6.4v-6.4c0-6.4 6.4-6.4 12.8-12.8h19.2c6.4 0 12.8 0 19.2-6.4 0 0 0-12.8-6.4-19.2-19.2-6.4-32-19.2-51.2-19.2-12.8 0-25.6 0-44.8 19.2h-12.8c-6.4-6.4-19.2 0-19.2 0l-38.4 32s-6.4 6.4-6.4 12.8 0 6.4 6.4 12.8h-12.8v6.4H128l-19.2 19.2s-6.4 6.4-6.4 12.8 0 6.4 6.4 12.8l51.2 51.2s6.4 6.4 12.8 6.4 6.4 0 12.8-6.4l6.4-19.2c6.4 0 6.4-6.4 6.4-12.8h6.4l44.8 44.8L147.2 448s-6.4 6.4-6.4 12.8 0 6.4 6.4 12.8l38.4 38.4s12.8 0 19.2-6.4l102.4-102.4L416 512c6.4 6.4 6.4 6.4 12.8 6.4s6.4 0 12.8-6.4l38.4-38.4s6.4-6.4 6.4-12.8 0-6.4-6.4-12.8L371.2 345.6zM217.6 256c0-6.4 0-6.4-6.4-6.4H192c-6.4 0-6.4 6.4-6.4 6.4-6.4 6.4-6.4 12.8-6.4 19.2v6.4h-6.4L147.2 256h6.4c12.8 0 12.8-6.4 19.2-6.4h6.4s0-6.4 6.4-6.4v-6.4c0-6.4 6.4-6.4 0-12.8 0 0 0-6.4-6.4-6.4l12.8-19.2c6.4 6.4 19.2 6.4 19.2 0h12.8c6.4 0 6.4 0 12.8-6.4s19.2-6.4 19.2-12.8c0 6.4-6.4 12.8-12.8 25.6v12.8l-12.8 6.4v6.4c0 6.4 0 12.8 6.4 19.2l51.2 51.2-19.2 12.8-51.2-57.6zM192 460.8L179.2 448l172.8-172.8c6.4-6.4 6.4-12.8 6.4-19.2v-6.4c-6.4-19.2 0-32 0-44.8 6.4-12.8 19.2-19.2 32-25.6l-6.4 6.4-12.8 51.2c0 6.4 0 12.8 6.4 19.2l38.4 38.4c6.4 6.4 6.4 6.4 12.8 6.4h-32c-6.4 0-12.8 0-19.2-6.4-6.4-6.4-12.8 0-19.2 0L192 460.8z m236.8 0L326.4 364.8l19.2-19.2L441.6 448l-12.8 12.8z"  ></path></symbol><symbol id="icon-hujiao" viewBox="0 0 1024 1024"><path d="M785.723077 673.476923c0-1.969231-1.969231-3.938462-1.969231-3.938461l-59.076923-66.953847v-108.307692c0-98.461538-68.923077-183.138462-165.415385-204.8 3.938462-7.876923 7.876923-17.723077 7.876924-27.569231 0-29.538462-25.6-53.169231-57.107693-53.16923S452.923077 232.369231 452.923077 261.907692c0 9.846154 3.938462 19.692308 7.876923 27.569231-98.461538 21.661538-165.415385 106.338462-165.415385 204.8v108.307692L236.307692 669.538462l-1.96923 1.96923c-3.938462 5.907692-3.938462 11.815385-3.938462 21.661539 0 27.569231 21.661538 49.230769 51.2 49.230769h133.907692c9.846154 43.323077 51.2 74.830769 96.492308 74.830769 47.261538 0 86.646154-29.538462 96.492308-74.830769h133.907692c27.569231 0 51.2-21.661538 51.2-49.230769-3.938462-7.876923-5.907692-13.784615-7.876923-19.692308zM512 246.153846c11.815385 0 19.692308 7.876923 19.692308 17.723077s-7.876923 17.723077-19.692308 17.723077-19.692308-7.876923-19.692308-17.723077 7.876923-17.723077 19.692308-17.723077z m0 533.661539c-23.630769 0-43.323077-13.784615-49.230769-33.476923h100.430769c-9.846154 19.692308-29.538462 33.476923-51.2 33.476923z m222.523077-104.369231c0 7.876923-5.907692 13.784615-13.784615 13.784615H303.261538c-7.876923 0-13.784615-7.876923-13.784615-13.784615v-3.938462l55.138462-61.046154c1.969231-1.969231 1.969231-7.876923 1.96923-9.846153v-104.369231c0-88.615385 72.861538-159.507692 163.446154-159.507692s163.446154 70.892308 163.446154 159.507692v104.369231c1.969231 3.938462 1.969231 7.876923 5.907692 9.846153l55.138462 61.046154v3.938462z"  ></path><path d="M923.569231 29.538462H100.430769c-39.384615 0-72.861538 33.476923-72.861538 72.861538V925.538462c0 39.384615 33.476923 72.861538 72.861538 72.861538h823.138462c39.384615 0 72.861538-33.476923 72.861538-72.861538V102.4c0-41.353846-31.507692-72.861538-72.861538-72.861538z m-5.907693 846.76923c0 21.661538-17.723077 41.353846-41.353846 41.353846H149.661538c-21.661538 0-41.353846-17.723077-41.353846-41.353846V149.661538c0-21.661538 17.723077-41.353846 41.353846-41.353846h726.646154c21.661538 0 41.353846 17.723077 41.353846 41.353846v726.646154z"  ></path></symbol><symbol id="icon-shebeibaoyang" viewBox="0 0 1024 1024"><path d="M759.025791 192.027246c0 35.310345-31.750248 63.936427-70.838655 63.936426h-425.031928c-39.088406 0-70.838655-28.626082-70.838655-63.936426v-21.360579H97.865013v767.963672h377.806159c23.97616 0 44.101604 16.202072 46.862495 37.707961l0.363275 5.013197c0 21.578544-17.945793 39.814957-41.703988 42.357883l-5.521782 0.29062H74.252129c-36.472825 0-66.987938-25.065986-70.47538-57.833404L3.413474 959.990918V149.306088c0-32.912729 27.754222-60.52164 64.009082-63.645807l6.829573-0.29062H192.316553V63.936427C192.316553 28.626082 224.066801 0 263.155208 0h425.031928c39.088406 0 70.838655 28.626082 70.838655 63.936427v21.433234h118.064425c36.472825 0 66.987938 24.99333 70.475379 57.833404l0.363275 6.103023v277.324251c0 22.595714-19.544203 41.268057-44.464878 42.575848-24.920675 1.307791-46.717185-15.112246-49.696041-37.562651l-0.29062-5.013197V170.739322h-94.45154v21.360579zM664.574251 85.369661H286.768093v85.297006h377.806158V85.297006z"  ></path><path d="M269.839471 682.666667h42.357882q42.357883 0 42.357883 42.648503t-42.357883 42.648502h-42.357882q-42.430538 0-42.430538-42.648502t42.430538-42.648503zM269.839471 426.630339h339.008372q42.430538 0 42.430538 42.721158 0 42.648503-42.430538 42.648503H269.839471q-42.430538 0-42.430538-42.648503 0-42.721158 42.430538-42.721158z"  ></path><path d="M1020.583901 841.127288c0 100.990492-81.373634 182.872712-181.637576 182.872712S657.308748 942.117781 657.308748 841.127288q0-87.331347 135.864907-269.840783 21.215269-28.480772 45.77267-59.286505 24.5574 30.805733 45.772669 59.286505Q1020.583901 753.795942 1020.583901 841.127288z m-290.620122 0q0-61.248191 108.982546-209.755073 108.982546 148.506882 108.982545 209.755073 0 45.772669-32.113523 78.104158-31.895558 32.113523-76.869022 32.113523-45.046119 0-76.869023-32.113523Q729.963779 886.899957 729.963779 841.127288z"  ></path></symbol></svg>',(e=>{var c=(t=(t=document.getElementsByTagName("script"))[t.length-1]).getAttribute("data-injectcss"),t=t.getAttribute("data-disable-injectsvg");if(!t){var a,h,l,n,i,o=function(c,t){t.parentNode.insertBefore(c,t)};if(c&&!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(c){console&&console.log(c)}}a=function(){var c,t=document.createElement("div");t.innerHTML=e._iconfont_svg_string_,(t=t.getElementsByTagName("svg")[0])&&(t.setAttribute("aria-hidden","true"),t.style.position="absolute",t.style.width=0,t.style.height=0,t.style.overflow="hidden",t=t,(c=document.body).firstChild?o(t,c.firstChild):c.appendChild(t))},document.addEventListener?~["complete","loaded","interactive"].indexOf(document.readyState)?setTimeout(a,0):(h=function(){document.removeEventListener("DOMContentLoaded",h,!1),a()},document.addEventListener("DOMContentLoaded",h,!1)):document.attachEvent&&(l=a,n=e.document,i=!1,d(),n.onreadystatechange=function(){"complete"==n.readyState&&(n.onreadystatechange=null,s())})}function s(){i||(i=!0,l())}function d(){try{n.documentElement.doScroll("left")}catch(c){return void setTimeout(d,50)}s()}})(window);

 src/assets/terminal/iconfont.json

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,58 @@
{
  "id": "",
  "name": "",
  "font_family": "iconfont",
  "css_prefix_text": "icon-",
  "description": "",
  "glyphs": [
    {
      "icon_id": "147946951",
      "name": "上班",
      "font_class": "shangban",
      "unicode": "ee17",
      "unicode_decimal": 60951
    },
    {
      "icon_id": "147949830",
      "name": "故障停机",
      "font_class": "guzhangtingji",
      "unicode": "e694",
      "unicode_decimal": 59028
    },
    {
      "icon_id": "147949831",
      "name": "设备故障报修",
      "font_class": "shebeiguzhangbaoxiu",
      "unicode": "e72a",
      "unicode_decimal": 59178
    },
    {
      "icon_id": "147949832",
      "name": "设备点检管理",
      "font_class": "shebeidianjianguanli",
      "unicode": "e604",
      "unicode_decimal": 58884
    },
    {
      "icon_id": "147950056",
      "name": "配验收合格",
      "font_class": "peiyanshouhege",
      "unicode": "e65d",
      "unicode_decimal": 58973
    },
    {
      "icon_id": "147950057",
      "name": "呼叫",
      "font_class": "hujiao",
      "unicode": "e818",
      "unicode_decimal": 59416
    },
    {
      "icon_id": "147950058",
      "name": "设备保养",
      "font_class": "shebeibaoyang",
      "unicode": "e639",
      "unicode_decimal": 58937
    }
  ]
}

 src/assets/terminal/iconfont.ttf

Binary files differ

 src/assets/terminal/maintenance.svg

ÎļþÒÑɾ³ý

 src/assets/terminal/passRate.svg

ÎļþÒÑɾ³ý

 src/assets/terminal/spotCheck.svg

ÎļþÒÑɾ³ý

 src/assets/terminal/work.svg

ÎļþÒÑɾ³ý

 src/components/layouts/TerminalLayout.vue

@@ -26,7 +26,7 @@
    name: 'TerminalLayout',
    data() {
      return {
        currentDateAndTime: null,
        currentDateAndTime: moment().format('YYYY-MM-DD HH:mm:ss'),
        getDateAndTimeInterval: null
      }
    },

 src/config/router.config.js

@@ -117,7 +117,17 @@
        path: 'spotCheck',
        name: 'equipmentSpotCheck',
        component: () => import('@/views/dnc/base/modules/TerminalIndex/EquipmentSpotCheck.vue')
      }
      },
      {
        path: 'passRate',
        name: 'reportPassRate',
        component: () => import('@/views/dnc/base/modules/TerminalIndex/ReportPassRate.vue')
      },
      {
        path: 'call',
        name: 'procedureCall',
        component: () => import('@/views/dnc/base/modules/TerminalIndex/ProcedureCall.vue')
      },
    ]
  },
  {

 src/views/dnc/base/TerminalIndex.vue

@@ -10,7 +10,8 @@
        <template v-for="(item,index) in buttonList">
          <a-col :span="6" v-if="index<4">
            <div :class="'button button'+(index+1)" @click="navigateTo(item)">
              <img :src="require(`@/assets/terminal/${item.routePath}.svg`)"/>
              <!--<img :src="require(`@/assets/terminal/${item.routePath}.svg`)"/>-->
              <i :class="'iconfont icon-'+item.routePath"/>
              <div>{{item.label}}</div>
            </div>
          </a-col>
@@ -21,7 +22,7 @@
        <template v-for="(item,index) in buttonList">
          <a-col :span="6" v-if="index>=4">
            <div :class="'button button'+(index+1)" @click="navigateTo(item)">
              <img :src="require(`@/assets/terminal/${item.routePath}.svg`)"/>
              <i :class="'iconfont icon-'+item.routePath"/>
              <div>{{item.label}}</div>
            </div>
          </a-col>
@@ -97,18 +98,20 @@
  }
</script>

<style scoped lang="less">
<style scoped>
  @import '~@assets/terminal/iconfont.css';

  .page-header {
    font-size: 2vw;
    color: #000;
    display: flex;
    justify-content: space-between;
    margin-bottom: 1vw;
  }

    span {
  .page-header span {
      font-size: 1.3vw;
      color: #999;
    }
  }

  .content-container {
@@ -117,14 +120,23 @@
    flex-direction: column;
    padding: 3% 10%;

  }

    .ant-row {
      flex: 1;
  }

      .ant-col {
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
  }

  img {
    width: 2.6vw;
    margin-bottom: 0.8vw;
  }

        .button {
          width: 9.63vw;
@@ -138,57 +150,49 @@
          border-radius: 1vw;
          cursor: pointer;
          transition: all .1s ease-in-out;

          img {
            width: 2.6vw;
            margin-bottom: 0.8vw;
          }

          &:hover {
  .button:hover {
            transform: scale(1.05);
          }

          &.button1 {
            background: linear-gradient(top, #5ADEAD, #3BC3A6);
            background: -webkit-linear-gradient(top, #5ADEAD, #3BC3A6);
  .button1 {
    background: linear-gradient(to bottom, #5ADEAD, #3BC3A6);
    background: -webkit-linear-gradient(to bottom, #5ADEAD, #3BC3A6);
          }

          &.button2 {
            background: linear-gradient(top, #76A9FA, #5B8CF3);
            background: -webkit-linear-gradient(top, #76A9FA, #5B8CF3);
  .button2 {
    background: linear-gradient(to bottom, #76A9FA, #5B8CF3);
    background: -webkit-linear-gradient(to bottom, #76A9FA, #5B8CF3);
          }

          &.button3 {
            background: linear-gradient(top, #FAB976, #FB9557);
            background: -webkit-linear-gradient(top, #FAB976, #FB9557);
  .button3 {
    background: linear-gradient(to bottom, #FAB976, #FB9557);
    background: -webkit-linear-gradient(to bottom, #FAB976, #FB9557);
          }

          &.button4 {
            background: linear-gradient(top, #5FC2F9, #45A4F4);
            background: -webkit-linear-gradient(top, #5FC2F9, #45A4F4);
  .button4 {
    background: linear-gradient(to bottom, #5FC2F9, #45A4F4);
    background: -webkit-linear-gradient(to bottom, #5FC2F9, #45A4F4);
          }

          &.button5 {
            background: linear-gradient(top, #62F2EA, #55D6CE);
            background: -webkit-linear-gradient(top, #62F2EA, #55D6CE);
  .button5 {
    background: linear-gradient(to bottom, #62F2EA, #55D6CE);
    background: -webkit-linear-gradient(to bottom, #62F2EA, #55D6CE);
          }

          &.button6 {
            background: linear-gradient(top, #91A0F5, #6D7CF7);
            background: -webkit-linear-gradient(top, #91A0F5, #6D7CF7);
  .button6 {
    background: linear-gradient(to bottom, #91A0F5, #6D7CF7);
    background: -webkit-linear-gradient(to bottom, #91A0F5, #6D7CF7);
          }

          &.button7 {
            background: linear-gradient(top, #FF6A5A, #DB5A50);
            background: -webkit-linear-gradient(top, #FF6A5A, #DB5A50);
  .button7 {
    background: linear-gradient(to bottom, #FF6A5A, #DB5A50);
    background: -webkit-linear-gradient(to bottom, #FF6A5A, #DB5A50);
          }

          &.button8 {
            background: linear-gradient(top, #FFF248, #EADE46);
            background: -webkit-linear-gradient(top, #FFF248, #EADE46);
          }
        }
      }
    }
  .button8 {
    background: linear-gradient(to bottom, #FFF248, #EADE46);
    background: -webkit-linear-gradient(to bottom, #FFF248, #EADE46);
  }
</style>

 src/views/dnc/base/modules/TerminalIndex/EquipmentSpotCheck.vue

@@ -39,7 +39,7 @@
      </div>

      <div class="button-container">
        <a-button @click="handleSubmit" icon="check" :loading="loading">保存</a-button>
        <a-button @click="handleSubmit" icon="check" :loading="loading" type="primary">保存</a-button>
      </div>
    </div>
  </div>
@@ -115,6 +115,10 @@

            setTimeout(() => {
              that.loading = false
              that.$notification.success({
                message: '消息',
                description: '保存成功！'
              })
            }, 2000)
          } else {
            return false
@@ -132,6 +136,7 @@
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: hidden;

    .check-content-container {
      display: flex;

 src/views/dnc/base/modules/TerminalIndex/EquipmentStartWork.vue

@@ -4,91 +4,181 @@

    <a-tabs default-active-key="1">
      <a-tab-pane tab="打卡上下班" key="1" dataset="first">
        <a-space>
          <div>设备名称：</div>
          <a-select style="width: 250px">

        <a-form-model ref="form" :model="model" :rules="validateRules" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-row>
            <a-col :span="24">
              <a-form-model-item label="设备名称" prop="equipmentIdList">
                <a-select v-model="model.equipmentIdList" mode="multiple" placeholder="请选择设备" :maxTagCount="3"
                          allow-clear>
                  <a-select-option v-for="item in equipmentList" :key="item.equipmentId">
                    {{item.equipmentId+`[${item.equipmentName}]`}}
                  </a-select-option>
          </a-select>
              </a-form-model-item>
            </a-col>
          </a-row>

          <div style="text-align: center;margin-top: 150px">
            <a-space>
              <a-button size="large" type="primary" @click="handleClockInAndOut('In',1)" :loading="clockInLoading1"
                        :disabled="clockOutLoading1||clockInLoading2||clockOutLoading2">早班上班
              </a-button>
              <a-button size="large" type="primary" @click="handleClockInAndOut('Out',1)" :loading="clockOutLoading1"
                        :disabled="clockInLoading1||clockInLoading2||clockOutLoading2">
                æ—©ç­ä¸‹ç­
              </a-button>
              <a-button size="large" type="primary" @click="handleClockInAndOut('In',2)" :loading="clockInLoading2"
                        :disabled="clockOutLoading1||clockInLoading1||clockOutLoading2">晚班上班
              </a-button>
              <a-button size="large" type="primary" @click="handleClockInAndOut('Out',2)" :loading="clockOutLoading2"
                        :disabled="clockOutLoading1||clockInLoading2||clockInLoading1">
                æ™šç­ä¸‹ç­
              </a-button>
        </a-space>
          </div>
        </a-form-model>


        <div class="button">上班</div>
      </a-tab-pane>

      <a-tab-pane tab="当前设备状态" key="2">
        <a-table :dataSource="dataSource" :columns="columns" rowKey="id" bordered :pagination="false"/>
        <a-table :dataSource="dataSource" :columns="columns" rowKey="id" bordered :pagination="false"
                 :loading="loading"/>
      </a-tab-pane>
    </a-tabs>
  </div>
</template>

<script>
  import { JeecgListMixin } from '@/mixins/JeecgListMixin'
  import { getAction, postAction } from '@/api/manage'
  import moment from 'moment'

  export default {
    name: 'EquipmentStartWork',
    mixins: [JeecgListMixin],
    data() {
      return {
        model: {},
        labelCol: {
          xs: { span: 24 },
          sm: { span: 8 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 8 }
        },
        equipmentList: [],
        columns: [
          {
            title: '用户编号',
            align: 'center',
            dataIndex: 'userId'
            dataIndex: 'punchUser',
            width: 250
          },
          {
            title: '用户名称',
            align: 'center',
            dataIndex: 'username'
            dataIndex: 'punchUserRealName'
          },
          {
            title: '设备编号',
            align: 'center',
            dataIndex: 'equipmentId'
            dataIndex: 'equipmentId',
            width: 200
          },
          {
            title: '班次',
            align: 'center',
            dataIndex: 'shiftScheduleName',
            width: 150
          },
          {
            title: '上班打卡时间',
            align: 'center',
            dataIndex: 'startWorkTime'
            dataIndex: 'checkInTime'
          },
          {
            title: '下班打卡时间',
            align: 'center',
            dataIndex: 'finishWorkTime'
            dataIndex: 'checkOutTime'
          }
        ],
        dataSource: [
          {
            id: 1,
            equipmentId: '3140132',
            userId: '140016',
            username: '李骞',
            startWorkTime: '2023/11/13 9:29',
            finishWorkTime: ''
        validateRules: {
          equipmentIdList: [
            { required: true, message: '请选择设备!', trigger: 'change' }
          ]
          },
          {
            id: 2,
            equipmentId: '3140130',
            userId: '140016',
            username: '李骞',
            startWorkTime: '2023/11/13 9:29',
            finishWorkTime: ''
          }
        ],
        clockInLoading1: false,
        clockOutLoading1: false,
        clockInLoading2: false,
        clockOutLoading2: false,
        url: {
          list: ''
          equipmentList: '/mdc/mdcEquipment/getEquipmentList',
          clockIn: '/mdcEquipmentPunch/workUp',
          clockOut: '/mdcEquipmentPunch/workDown',
          list: '/mdcEquipmentPunch/list'
        }
      }
    },
    created() {
      this.getEquipmentListByApi()
    },
    methods: {
      // èŽ·å–设备列表
      getEquipmentListByApi() {
        const that = this
        getAction(this.url.equipmentList)
          .then(res => {
            if (res.success) that.equipmentList = res.result
          })
      },

      /**
       * æ‰“卡上下班事件
       * @param clockInOrOut In为上班 Out为下班
       * @param shiftSchedule 1为早班 2为晚班
       */
      handleClockInAndOut(clockInOrOut, shiftSchedule) {
        const that = this
        this.$refs.form.validate(valid => {
          if (valid) {
            that['clock' + clockInOrOut + 'Loading' + shiftSchedule] = true
            that.queryParam = {}
            that.queryParam['shiftSchedule'] = shiftSchedule
            that.queryParam['check' + clockInOrOut + 'Time'] = moment('2025-06-11 08:30:00').format('YYYY-MM-DD HH:mm:ss')
            that.queryParam.equipmentId = that.model.equipmentIdList.join()
            console.log('queryParam', that.queryParam)

            postAction(that.url['clock' + clockInOrOut], that.queryParam)
              .then(res => {
                console.log('res', res)
                if (res.success) {
                  that.$notification.success({
                    message: '消息',
                    description: res.message
                  })
                  that.loadData()
                } else {
                  that.$notification.warning({
                    message: '消息',
                    description: res.message
                  })
                }
              })
              .finally(() => {
                that['clock' + clockInOrOut + 'Loading' + shiftSchedule] = false
              })
          } else {
            return false
          }
        })
      }
    }
  }
</script>

<style scoped lang="less">
  .full-screen-container {
    padding: 24px;
    display: flex;
    flex-direction: column;

    /deep/ .ant-tabs {
      flex: 1;
      display: flex;
@@ -102,26 +192,6 @@
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;

          .button {
            font-weight: bold;
            padding: 40px 80px;
            border: 1px solid rgba(0, 0, 0, .2);
            border-radius: 10px;
            margin-top: 200px;
            cursor: pointer;
            box-shadow: 6px 6px 16px rgba(0, 0, 0, 0.2),
              -6px -6px 16px rgba(255, 255, 255, 0.8),
            inset 0 0 0 transparent;

            &:hover {
              box-shadow: 0 0 0 transparent,
              inset 6px 6px 12px rgba(0, 0, 0, 0.2),
                inset -6px -6px 12px rgba(255, 255, 255, 0.8);
            }
          }
        }
      }
    }
  }

 src/views/dnc/base/modules/TerminalIndex/ProcedureCall.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,154 @@
<template>
  <div>
    <slot name="function"/>

    <div class="content-container">
      <a-form-model ref="form" :model="model" :rules="validateRules" :labelCol="labelCol" :wrapperCol="wrapperCol">
        <a-row>
          <a-col :span="24">
            <a-form-model-item prop="equipmentIdList" label="设备组">
              <a-select v-model="model.equipmentIdList" mode="multiple" placeholder="请选择设备" :maxTagCount="3"
                        allow-clear>
                <a-select-option v-for="item in equipmentList" :key="item.equipmentId">
                  {{item.equipmentId+`[${item.equipmentName}]`}}
                </a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
        </a-row>

        <a-row>
          <a-col :span="24">
            <a-form-model-item label="呼叫原因" prop="callReason">
              <a-input placeholder="请输入呼叫原因" v-model="model.callReason" allowClear/>
            </a-form-model-item>
          </a-col>
        </a-row>

        <a-row>
          <a-col :span="24">
            <a-form-model-item label="呼叫用户" prop="operator">
              <a-select v-model="model.operator" placeholder="请选择呼叫用户">
                <a-select-option v-for="item in userList" :key="item.id">{{item.realname+`[${item.username}]`}}
                </a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
        </a-row>


        <div style="text-align: center">
          <a-button @click="handleSubmit" icon="phone" :loading="loading" type="primary">呼叫</a-button>
        </div>
      </a-form-model>
    </div>
  </div>
</template>

<script>
  import { getAction, postAction } from '@/api/manage'

  export default {
    name: 'ProcedureCall',
    components: {},
    data() {
      return {
        model: {},
        equipmentList: [],
        userList: [],
        labelCol: {
          xs: { span: 24 },
          sm: { span: 8 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 8 }
        },
        validateRules: {
          equipmentIdList: [
            { required: true, message: '请选择设备!', trigger: 'change' }
          ],
          callReason: [
            { required: true, message: '请输入呼叫原因!', trigger: 'change' }
          ],
          operator: [
            { required: true, message: '请选择呼叫用户!', trigger: 'change' }
          ]
        },
        loading: false,
        url: {
          equipmentList: '/mdc/mdcEquipment/getEquipmentList',
          userList: '/sys/user/list',
          submit: '/AndonOrder/andonOrder/procedureCall'
        }
      }
    },
    created() {
      this.getEquipmentListByApi()
      this.getUserListByApi()
    },
    methods: {
      // èŽ·å–设备列表
      getEquipmentListByApi() {
        const that = this
        getAction(this.url.equipmentList)
          .then(res => {
            if (res.success) that.equipmentList = res.result
          })
      },

      // èŽ·å–用户列表
      getUserListByApi() {
        const that = this
        getAction(this.url.userList, { pageNo: 1, pageSize: 9999 })
          .then(res => {
            console.log('res', res)
            if (res.success) that.userList = res.result.records
          })
      },

      // æäº¤è¡¨å•
      handleSubmit() {
        const that = this
        this.$refs.form.validate(valid => {
          if (valid) {
            that.loading = true
            that.model.equipmentId = that.model.equipmentIdList.join()
            postAction(that.url.submit, that.model)
              .then(res => {
                if (res.success) {
                  that.$notification.success({
                    message: '消息',
                    description: res.message
                  })
                } else {
                  that.$notification.warning({
                    message: '消息',
                    description: res.message
                  })
                }
              })
              .finally(() => {
                that.loading = false
              })
          } else {
            return false
          }
        })
      }
    }
  }
</script>

<style scoped lang="less">
  .content-container {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;

    /deep/ .ant-form {
      width: 75%;
    }
  }
</style>

 src/views/dnc/base/modules/TerminalIndex/ReportEquipmentClose.vue

@@ -9,7 +9,7 @@
          <a-row :gutter="24">
            <a-col :span="5">
              <a-form-item label="设备">
                <a-select placeholder="请选择设备" v-model="queryParam.equipmentId">
                <a-select placeholder="请选择设备" v-model="queryParam.equipmentId" allow-clear>
                  <a-select-option v-for="item in equipmentList" :key="item.equipmentId">
                    {{item.equipmentId+`[${item.equipmentName}]`}}
                  </a-select-option>
@@ -33,7 +33,7 @@

            <a-col :span="5">
              <a-form-item label="停机原因">
                <a-select placeholder="请选择停机原因" v-model="queryParam.downtimeDescription">
                <a-select placeholder="请选择停机原因" v-model="queryParam.downtimeDescription" allow-clear>
                  <a-select-option v-for="item in downtimeDescriptionList" :key="item.value">{{item.label}}
                  </a-select-option>
                </a-select>
@@ -55,12 +55,11 @@
      <!-- æ“ä½œæŒ‰é’®åŒºåŸŸ -->
      <div class="table-operator">
        <a-button type="primary" @click="handleMaintainShutdown" :disabled="selectedRowKeys.length===0">维护停机</a-button>
        <a-button type="primary" @click="handleSplitShutdownInfo"
                  :disabled="selectedRowKeys.length===0||selectedRowKeys.length>1">拆分停机信息
        </a-button>
        <a-button type="primary" @click="handleSplitShutdownInfo" :disabled="selectionRows.length!==1">拆分停机信息</a-button>
      </div>

      <a-table :dataSource="dataSource" :columns="columns" rowKey="id" bordered :pagination="false" :loading="loading"
      <a-table :dataSource="dataSource" :columns="columns" rowKey="id" bordered :pagination="ipagination"
               :loading="loading" @change="handleTableChange" :customRow="customRow"
               :rowSelection="{selectedRowKeys, onChange: onSelectChange}">
        <template slot="downtimeType" slot-scope="text">
          {{ text!=null?text === 0 ? '计划停机' : '非计划停机':'' }}
@@ -71,9 +70,8 @@
    <maintain-shutdown-modal :downtimeDescriptionList="downtimeDescriptionList" ref="maintainShutdownModal"
                             @submitSuccess="loadData"/>

    <split-shutdown-info-modal ref="splitShutdownInfoModal" :selectedRow="selectionRows[0]"
                               :downtimeDescriptionList="downtimeDescriptionList"
                               @submitSuccess="clearSelectedRowKeysAndLoadData"/>
    <split-shutdown-info-modal ref="splitShutdownInfoModal" :downtimeDescriptionList="downtimeDescriptionList"
                               @submitSuccess="modalFormOk"/>
  </div>
</template>

@@ -152,6 +150,7 @@
      this.getDowntimeDescriptionListByApi()
    },
    methods: {
      // èŽ·å–设备列表
      getEquipmentListByApi() {
        const that = this
        getAction(this.url.equipmentList)
@@ -160,32 +159,77 @@
          })
      },

      // èŽ·å–停机原因列表
      getDowntimeDescriptionListByApi() {
        const that = this
        getAction(this.url.downtimeDescriptionList)
          .then(res => {
            if (res.success) that.downtimeDescriptionList = res.result
          })

      },

      loadData(arg) {
        //加载数据 è‹¥ä¼ å…¥å‚æ•°1则加载第一页的内容
        if (arg === 1) {
          this.ipagination.current = 1
        }
        const params = this.getQueryParams()//查询条件
        if (!params) return false
        this.loading = true
        getAction(this.url.list, params)
          .then((res) => {
            if (res.success) {
              this.dataSource = res.result.records || res.result
              this.selectionRows = this.dataSource.filter(item => this.selectedRowKeys.includes(item.id))
              if (res.result.total) {
                this.ipagination.total = res.result.total
              } else {
                this.ipagination.total = 0
              }
            } else {
              this.$message.warning(res.message)
            }
          })
          .finally(() => {
            this.loading = false
          })
      },

      customRow(record) {
        return {
          style: {
            cursor: 'pointer'
          },
          on: {
            click: () => {
              let selectedRowKeys = [...this.selectedRowKeys]
              let selectionRows = [...this.selectionRows]
              if (selectedRowKeys.includes(record.id)) {
                selectedRowKeys = selectedRowKeys.filter(item => item !== record.id)
                selectionRows = selectionRows.filter(item => item.id !== record.id)
              }
              else {
                selectedRowKeys.push(record.id)
                selectionRows.push(record)
              }
              this.onSelectChange(selectedRowKeys, selectionRows)
            }
          }
        }
      },

      // æ‰“开维护停机窗口
      handleMaintainShutdown() {
        this.$refs.maintainShutdownModal.visible = true
        this.$refs.maintainShutdownModal.model = { downTimeIds: this.selectedRowKeys.join() }
      },

      // æ‰“开拆分停机信息窗口
      handleSplitShutdownInfo() {
        this.$refs.splitShutdownInfoModal.visible = true
        this.$refs.splitShutdownInfoModal.setDateTime(this.selectionRows[0])
      },

      clearSelectedRowKeysAndLoadData() {
        this.selectedRowKeys = this.selectionRows = []
        this.loadData()
      }
    }
  }
</script>

<style scoped lang="less">

</style>

 src/views/dnc/base/modules/TerminalIndex/ReportEquipmentClose/MaintainShutdownModal.vue

@@ -38,9 +38,9 @@
    methods: {
      handleSubmit() {
        const that = this
        this.confirmLoading = true
        this.$refs.form.validate(valid => {
          if (valid) {
            that.confirmLoading = true
            postAction(that.url.submit, that.model)
              .then(res => {
                if (res.success) {

 src/views/dnc/base/modules/TerminalIndex/ReportEquipmentClose/SplitShutdownInfoModal.vue

@@ -173,9 +173,9 @@
      // è¡¨å•æäº¤äº‹ä»¶
      handleSubmit() {
        const that = this
        that.confirmLoading = true
        this.$refs.form.validate(valid => {
          if (valid) {
            that.confirmLoading = true
            postAction(that.url.submit, that.model)
              .then(res => {
                if (res.success) {

 src/views/dnc/base/modules/TerminalIndex/ReportEquipmentFault.vue

@@ -129,6 +129,7 @@
        this.model.faultType = faultReasonItem.faultCategory
        this.model.faultType_dictText = faultReasonItem.faultCategory_dictText
        this.model.faultDescription = faultReasonItem.faultDescription
        if (this.model.faultDescription) this.$refs.form.clearValidate('faultDescription')
      },

      /**
@@ -199,10 +200,6 @@

    /deep/ .ant-form {
      width: 75%;

      .ant-form-item {
        margin-bottom: 12px;
      }
    }
  }
</style>

 src/views/dnc/base/modules/TerminalIndex/ReportPassRate.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,158 @@
<template>
  <div>
    <slot name="function"/>

    <div class="content-container">
      <a-form-model ref="form" :model="model" :rules="validateRules" :labelCol="labelCol" :wrapperCol="wrapperCol">
        <a-row>
          <a-col :span="24">
            <a-form-model-item prop="equipmentIdList" label="设备组">
              <a-select v-model="model.equipmentIdList" mode="multiple" placeholder="请选择设备" :maxTagCount="3"
                        allow-clear>
                <a-select-option v-for="item in equipmentList" :key="item.equipmentId">
                  {{item.equipmentId+`[${item.equipmentName}]`}}
                </a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
        </a-row>

        <a-row>
          <a-col :span="24">
            <a-form-model-item label="零件号" prop="partId">
              <a-input placeholder="请输入零件号" v-model="model.partId" allowClear/>
            </a-form-model-item>
          </a-col>
        </a-row>

        <a-row>
          <a-col :span="24">
            <a-form-model-item label="加工零件数量" prop="processCount">
              <a-input-number :min="0" v-model="model.processCount" placeholder="请输入加工零件数量" style="width: 100%"/>
            </a-form-model-item>
          </a-col>
        </a-row>

        <a-row>
          <a-col :span="24">
            <a-form-model-item label="合格零件数量" prop="passCount">
              <a-input-number :min="0" v-model="model.passCount" placeholder="请输入合格零件数量" style="width: 100%"/>
            </a-form-model-item>
          </a-col>
        </a-row>

        <a-row>
          <a-col :span="24">
            <a-form-model-item label="日期" prop="theDate">
              <a-date-picker v-model="model.theDate" value-format="YYYY-MM-DD" style="width: 100%"/>
            </a-form-model-item>
          </a-col>
        </a-row>

        <div style="text-align: center">
          <a-button @click="handleSubmit" icon="check" :loading="loading" type="primary">保存</a-button>
        </div>
      </a-form-model>
    </div>
  </div>
</template>

<script>
  import { getAction, postAction } from '@/api/manage'

  export default {
    name: 'ReportPassRate',
    data() {
      return {
        model: {},
        equipmentList: [],
        labelCol: {
          xs: { span: 24 },
          sm: { span: 8 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 8 }
        },
        validateRules: {
          equipmentIdList: [
            { required: true, message: '请选择设备!', trigger: 'change' }
          ],
          partId: [
            { required: true, message: '请输入零件号!', trigger: 'change' }
          ],
          processCount: [
            { required: true, message: '请输入加工零件数量!', trigger: 'change' }
          ],
          passCount: [
            { required: true, message: '请输入合格零件数量!', trigger: 'change' }
          ],
          theDate: [
            { required: true, message: '请选择日期!', trigger: 'change' }
          ]
        },
        loading: false,
        url: {
          equipmentList: '/mdc/mdcEquipment/getEquipmentList',
          submit: '/mdc/mdcPartProcessInfo/add'
        }
      }
    },
    created() {
      this.getEquipmentListByApi()
    },
    methods: {
      // èŽ·å–设备列表
      getEquipmentListByApi() {
        const that = this
        getAction(this.url.equipmentList)
          .then(res => {
            if (res.success) that.equipmentList = res.result
          })
      },

      // æäº¤è¡¨å•
      handleSubmit() {
        const that = this
        this.$refs.form.validate(valid => {
          if (valid) {
            that.loading = true
            that.model.equipmentIds = that.model.equipmentIdList.join()
            postAction(that.url.submit, that.model)
              .then(res => {
                if (res.success) {
                  that.$notification.success({
                    message: '消息',
                    description: res.message
                  })
                } else {
                  that.$notification.warning({
                    message: '消息',
                    description: res.message
                  })
                }
              })
              .finally(() => {
                that.loading = false
              })
          } else {
            return false
          }
        })
      }
    }
  }
</script>

<style scoped lang="less">
  .content-container {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;

    /deep/ .ant-form {
      width: 75%;
    }
  }
</style>