hb_sis_zhfx/src/views/NewPages/knowledge-base.vue

<template>
  <div class="knowledge-base">
    <el-row class="mg-b-16">
      <el-col :span="8">
        <panel class="outline" :title="'故障体系'" :icon="'fa fa-warning'" :subTitle="3347" :showLine="false">
          <div class="table">
            <div>
              <table style="width:100%;" border="0" cellspacing="0">
                <tbody>
                  <tr>
                    <td style="width:150px;">
                      UP77
                    </td>
                    <td class="green num" style="width:105px;">
                      409
                    </td>
                    <td style="width:350px;">
                      <div class="percent-item">
                        完成度
                        <div class="percent-bar" style="">
                          <div class="percent-value" style="width: 12%"></div>
                        </div>
                        <span class="perent-num">12%</span>
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <td style="width:150px;">
                      UP82
                    </td>
                    <td class="green num" style="width:105px;">
                      409
                    </td>
                    <td style="width:350px;">
                      <div class="percent-item">
                        完成度
                        <div class="percent-bar" style="">
                          <div class="percent-value" style="width: 12%"></div>
                        </div>
                        <span class="perent-num">12%</span>
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <td style="width:150px;">
                      UP86
                    </td>
                    <td class="green num" style="width:105px;">
                      0
                    </td>
                    <td style="width:350px;">
                      <div class="percent-item">
                        完成度
                        <div class="percent-bar" style="">
                          <div class="percent-value" style="width: 0%"></div>
                        </div>
                        <span class="perent-num">0%</span>
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <td style="width:150px;">
                      UP97
                    </td>
                    <td class="green num" style="width:105px;">
                      0
                    </td>
                    <td style="width:350px;">
                      <div class="percent-item">
                        完成度
                        <div class="percent-bar" style="">
                          <div class="percent-value" style="width: 0%"></div>
                        </div>
                        <span class="perent-num">0%</span>
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <td style="width:150px;">
                      UP105
                    </td>
                    <td class="green num" style="width:105px;">
                      0
                    </td>
                    <td style="width:350px;">
                      <div class="percent-item">
                        完成度
                        <div class="percent-bar" style="">
                          <div class="percent-value" style="width: 0%"></div>
                        </div>
                        <span class="perent-num">0%</span>
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <td style="width:150px;">
                      华创
                    </td>
                    <td class="green num" style="width:105px;">
                      2529
                    </td>
                    <td style="width:350px;">
                      <div class="percent-item">
                        完成度
                        <div class="percent-bar" style="">
                          <div class="percent-value" style="width: 76%"></div>
                        </div>
                        <span class="perent-num">76%</span>
                      </div>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </panel>
      </el-col>
      <el-col :span="8">
        <panel class="outline" :title="'预警知识'" :icon="'fa fa-warning'" :subTitle="173" :showLine="false">
          <div class="warning-item">
            <div class="sub-item">
              <div class="text">发电机：</div>
              <div class="value">91</div>
            </div>
            <div class="sub-item">
              <div class="text">偏航：</div>
              <div class="value">0</div>
            </div>
          </div>
          <div class="warning-item">
            <div class="sub-item">
              <div class="text">齿轮箱：</div>
              <div class="value">45</div>
            </div>
            <div class="sub-item">
              <div class="text">机舱：</div>
              <div class="value">12</div>
            </div>
          </div>
          <div class="warning-item">
            <div class="sub-item">
              <div class="text">主轴：</div>
              <div class="value">5</div>
            </div>
            <div class="sub-item">
              <div class="text">变频：</div>
              <div class="value">0</div>
            </div>
          </div>
          <div class="warning-item">
            <div class="sub-item">
              <div class="text">变桨：</div>
              <div class="value">9</div>
            </div>
            <div class="sub-item">
              <div class="text">主控：</div>
              <div class="value">9</div>
            </div>
          </div>
        </panel>
      </el-col>
      <el-col :span="8">
        <panel class="outline" :title="'特征参数'" :icon="'fa fa-id-card-o'" :subTitle="248" :showLine="false">
          <div class="feature-item">
            <div class="title">
              <i class="svg-icon svg-icon-sm svg-icon-gray">
                <svg-icon :svgid="'svg-knowledge-bar'" />
              </i>
              基于数据统计
            </div>
            <div class="value">28</div>
          </div>
          <div class="feature-item">
            <div class="title">
              <i class="svg-icon svg-icon-sm svg-icon-gray">
                <svg-icon :svgid="'svg-knowledge-nerve-net'" />
              </i>
              神经网络整理
            </div>
            <div class="value">77</div>
          </div>
          <div class="feature-item">
            <div class="title">
              <i class="svg-icon svg-icon-sm svg-icon-gray">
                <svg-icon :svgid="'svg-knowledge-file'" />
              </i>
              文档整理
            </div>
            <div class="value">124</div>
          </div>
          <div class="feature-item">
            <div class="title">
              <i class="svg-icon svg-icon-sm svg-icon-gray">
                <svg-icon :svgid="'svg-knowledge-professor'" />
              </i>
              专家知识分析
            </div>
            <div class="value">19</div>
          </div>
        </panel>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="8">
        <panel class="outline" :title="'排查、检修方案'" :icon="'fa fa-warning'" :subTitle="4344" :showLine="false">
          <div class="circle-items">
            <div class="circle-item">
              <div class="inner">
                <div class="text">排查方法</div>
                <div class="value">431</div>
              </div>
            </div>
            <div class="circle-item">
              <div class="inner">
                <div class="text">检修方案</div>
                <div class="value">3913</div>
              </div>
            </div>
          </div>
        </panel>
      </el-col>
      <el-col :span="8">
        <panel class="outline" :title="'评价体系'" :icon="'fa fa-warning'" :subTitle="7" :showLine="false">
          <div class="circle-items">
            <div class="circle-item">
              <div class="inner">
                <div class="text">性能评价体系</div>
                <div class="value">3</div>
              </div>
            </div>
            <div class="circle-item">
              <div class="inner">
                <div class="text">健康评价体系</div>
                <div class="value">2</div>
              </div>
            </div>
            <div class="circle-item">
              <div class="inner">
                <div class="text">故障诊断体系</div>
                <div class="value">2</div>
              </div>
            </div>
          </div>
        </panel>
      </el-col>
      <el-col :span="8">
        <panel class="outline" :title="'人工智能'" :icon="'fa fa-id-card-o'" :subTitle="9" :showLine="false">
          <div class="circle-items">
            <div class="circle-item">
              <div class="inner">
                <div class="text">决策树</div>
                <div class="value">2</div>
              </div>
            </div>
            <div class="circle-item">
              <div class="inner">
                <div class="text">神经网络</div>
                <div class="value">7</div>
              </div>
            </div>
          </div>
        </panel>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import SvgIcon from "../../components/coms/icon/svg-icon.vue";
import panel from "../../components/coms/panel/panel.vue";
export default {
  components: { panel, SvgIcon },
  setup() {},
  data() {
    return {
      gztx: [
        {
          id: "UP77",
          name: "409",
          wsd: "12%",
        },
        {
          id: "UP82",
          name: "409",
          wsd: "12%",
        },
        {
          id: "UP86",
          name: "0",
          wsd: "0%",
        },
        {
          id: "UP97",
          name: "0",
          wsd: "0%",
        },
        {
          id: "UP105",
          name: "0",
          wsd: "0%",
        },
        {
          id: "华创",
          name: "2529",
          wsd: "76%",
        },
      ],
    };
  },
};
</script>

<style lang="less">
.knowledge-base {
  .com-panel .panel-header {
    margin-bottom: 0px;

    .panel-tools {
      color: @green;
      font-family: @font-family-num;
    }
  }

  .outline {
    outline: 1px solid fade(@gray, 50);
  }

  .warning-item {
    display: flex;
    justify-content: space-around;

    height: 54px;
    line-height: 54px;
    font-size: 12px;

    &:nth-child(2n) {
      background-color: fade(@gray, 20%);
    }

    .title {
      display: flex;
      align-items: center;
      color: @gray;

      i {
        margin-right: 16px;
      }
    }

    .sub-item {
      display: flex;
      .text {
        color: gray;
        margin-right: 16px;
      }

      .value {
        color: @green;
        font-family: @font-family-num;
      }
    }
  }

  .feature-item {
    display: flex;
    justify-content: space-between;
    height: 54px;
    line-height: 54px;
    font-size: 12px;
    padding: 0 24px;

    &:nth-child(2n) {
      background-color: fade(@gray, 20%);
    }

    .title {
      display: flex;
      align-items: center;
      color: @gray;

      i {
        margin-right: 16px;
      }
    }

    .value {
      color: @green;
      font-family: @font-family-num;
    }
  }

  .circle-items {
    display: flex;
    justify-content: space-around;
    padding: 48px 0;

    .circle-item {
      display: flex;
      flex: 0 0 146px;
      width: 146px;
      height: 146px;
      background: fade(@green, 10);
      border-radius: 50%;
      justify-content: center;
      align-items: center;

      .inner {
        width: 124px;
        height: 124px;
        border: 1px solid #05bb4c;
        border-radius: 50%;

        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        box-shadow: inset -15px 20px 30px -30px #05bb4c;

        .text {
          color: @green;
          font-size: 12px;
          margin-bottom: 8px;
        }

        .value {
          color: @white;
          font-size: 34px;
        }
      }
    }
  }

  .table {
    tbody {
      tr:nth-child(2n) td {
        background-color: fade(@gray, 20%);

        &.item {
          background-color: transparent;
        }
      }
    }

    td {
      color: @gray;
      text-align: center;
      height: 26px;
      line-height: 26px;
      font-size: 12px;

      &.green {
        color: @green;
      }

      &.num {
        font-family: @font-family-num;
      }
    }

    .percent-item {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 34px;

      .percent-bar {
        height: 12px;
        width: 170px;
        background: transparent;
        border: 1px solid @gray;
        margin-left: 16px;

        .percent-value {
          height: calc(100% - 4px);
          background: @green;
          margin: 2px;
        }
      }

      .perent-num {
        color: @green;
        margin-left: 16px;
        font-family: @font-family-num;
      }
    }
  }
}
</style>