sis_zhfx/src/views/MalfunctionWarning/MalfunctionWarning.vue

<template>
  <div class="decision-page-1">
    <!-- 查询样式统一处理 样式在 assets/styles/form.less 文件中 -->
    <div class="query mg-b-8">
      <div class="query-items">
        <div class="query-item">
          <div class="lable">算法类型：</div>
          <div class="search-input">
            <el-select
              v-model="value1"
              @change="algorithmChange(value1)"
              clearable
              placeholder="请选择"
              popper-class="select"
            >
              <el-option
                v-for="item in algorithm"
                :key="item.id"
                :value="item.id"
                :label="item.name"
              >
              </el-option>
            </el-select>
          </div>
        </div>
      </div>
      <!-- <div class="query-actions">
        <button class="btn green">搜索</button>
        <button class="btn" @click="mxClick()">明细信息</button>
        <button class="btn" @click="exportExcel()">导出</button>
      </div> -->
    </div>
    <div class="actions mg-b-8">
      <button
        class="btn"
        :class="TypeClass == 1 ? 'green' : ''"
        @click="TypeClick(1,'sjdr')"
      >
        数据导入
      </button>
      <button
        class="btn"
        :class="TypeClass == 2 ? 'green' : ''"
        @click="TypeClick(2,'sjfl')"
      >
       数据分类
      </button>
      <button
        class="btn"
        :class="TypeClass == 3 ? 'green' : ''"
        @click="TypeClick(3,'mxxl')"
      >
        模型训练
      </button>
        <button
        class="btn"
        :class="TypeClass == 4 ? 'green' : ''"
        @click="TypeClick(4,'mxdc')"
      >
        模型导出
      </button>
        <button
        class="btn"
        :class="TypeClass == 5 ? 'green' : ''"
        @click="TypeClick(5,'mxcc')"
      >
        模型存储
      </button>
    </div>
    <el-row :type="'flex'" class="content">
      <el-col :span="12" class="pd-l-8">
        <panel :title="'训练记录'" :showLine="false">
          <!-- <div class="project-table">
            <Table :data="tableData" :height="'calc(80vh - 50px)'">
              <template v-slot:tr v-if="tableData.data.length > 0">
                <tr>
                  <td style="width: 50px">
                    {{ tableDataEnd.index }}
                  </td>
                  <td style="width: 150px">
                    {{ tableDataEnd.name }}
                  </td>
                  <td>
                    {{ tableDataEnd.llfdl }}
                  </td>
                  <td>
                    {{ tableDataEnd.sjfdl }}
                  </td>
                  <td>
                    {{ tableDataEnd.speed }}
                  </td>
                  <td>
                    {{ tableDataEnd.fjhjx }}
                  </td>
                  <td>
                    {{ tableDataEnd.jhjx }}
                  </td>
                  <td style="width: 80px">
                    {{ tableDataEnd.sl }}
                  </td>
                  <td>
                    {{ tableDataEnd.xd }}
                  </td>
                  <td>
                    {{ tableDataEnd.xn }}
                  </td>
                  <td>
                    {{ tableDataEnd.fnlly }}
                  </td>
                </tr>
              </template>
            </Table>
          </div> -->
        </panel>
      </el-col>
      <el-col :span="12" class="pd-l-8">
        <panel :title="'故障预警'" :showLine="false">
           <el-scrollbar>
      <div class="panel-box">
        <div v-for="(mItem,mIndex) in exportModels" :key="mIndex">
          <!-- <div class="panel-title">
            <div class="panel-title-name">
              <i class="svg-icon svg-icon-sm svg-icon-green">
                <SvgIcon :svgid="'svg-wind-site'"></SvgIcon>
              </i>
              <span>{{ sourceMap.fczbmap[pItem[pIndex].wpId].name }}</span>
              <div
                class="sub-title-item"
                v-for="(data, index) of tables[0].subTitleDatas"
                :key="index"
              >
                <span class="sub-title">{{ data.text }}</span>
                <span class="sub-count" :class="data.color">{{
                  sourceMap.fczbmap[pItem[pIndex].wpId][data.key]
                }}</span>
              </div>
            </div>
          </div> -->
          <div class="panel-body">
            <div
              class="card"
            >
              <div class="card-panel">
                <div class="card-left">
                  <div class="tag"></div>
                  <div class="icon">
                    <span
                      class="svg-icon svg-icon-sm"
      
                    >
                      
                    </span>
                  </div>
                </div>
                <div class="card-right">
                  <div class="num">
                    <i
                      class="svg-icon svg-icon-sm"
                      
                    >
                    
                    </i>
                    <span></span>
                  </div>

                  <div class="num">
                    <i
                      class="svg-icon svg-icon-sm"
                     
                    >
                     
                    </i>
                    <span></span>
                  </div>

                  <div class="num">
                    <i
                      class="svg-icon svg-icon-sm"
                     
                    >
                    
                    </i>
                    <span></span>
                  </div>
                </div>
              </div>
            </div>
          </div>
          </div>

      </div>
    </el-scrollbar>
        </panel>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import Panel from "../../components/coms/panel/panel.vue";
import partten from "@/helper/partten.js";
export default{
      components: {
    Panel,
    partten,
  },
  data(){
      return{
        algorithm:[], //算法
        value1:[],
         TypeClass: 1, //数据导入，数据分类，模型训练，模型导出，模型存储 的按钮颜色，默认第一个
      exportModels:[]
      }
  },
  created(){
    this.algorithmVal()
    this.exportModels = [
     {
       modelName:'2019dbscan.pkl',
       modelId:'dbscan'
     },  {
       modelName:'2020mdjl.pkl',
       modelId:'mdjl'
     }
     ]
    
  },
  methods:{
    algorithmVal(){
      let that = this;
      let algorithmArr = [{
        id:"dbscan",
        name:"DBscan"
      },{
        id:"mdjl",
        name:"密度聚类"
      }];
      that.algorithm = algorithmArr;
    },
    algorithmChange(val){
       this.TypeClass = "";
       this.value1 = val;
    },
    TypeClick(val,btnType){
      // console.log(val,btnType)
      this.TypeClass = val;
      if(btnType == 'sjdr'){

      }else if(btnType == 'sjfl'){

      }else if(btnType == 'mxxl'){

      }else if(btnType == 'mxdc'){
           
      }else if(btnType == 'mxcc'){

      }
    }
  },

}
</script>
<style lang="less">
.decision-page-1 {
  .com-panel .panel-title {
    line-height: 3.4259vh;
  }

  .tools {
    display: flex;
    line-height: 3.4259vh;

    .tool-block {
      display: flex;
      align-items: center;
      margin-left: 0.741vh;

      .legend {
        flex: auto;
        width: 0.741vh;
        height: 0.741vh;
        margin-right: 0.741vh;

        &.long {
          width: 2.963vh;
          height: 0.37vh;
        }
      }

      .legend-text {
        color: @gray-l;
        font-size: @fontsize-s;
      }
    }
  }

  .project-table {
    overflow: auto;

    tbody {
      height: calc(100vh - 24.5vh);
    }

    td {
      color: #b2bdc0;
    }
  }

  .contentMx {
    width: 100%;
    overflow-x: auto;
  }

  .activeMx {
    width: 150%;
  }
}
</style>