sis_zhfx/src/views/HealthControl/Health0.vue

<template>
  <div class="health-0">
    <el-row>
      <el-col :span="14">
        <el-row>
          <el-col :span="24">
            <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"
                      clearable
                      placeholder="请选择风场"
                      popper-class="select"
                      @change="wpselect"
                    >
                      <el-option
                        v-for="item in options"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"
                      >
                      </el-option>
                    </el-select>
                  </div>
                </div>
                <div class="query-item">
                  <div class="lable">风机：</div>
                  <div class="search-input">
                    <el-select
                      v-model="value2"
                      clearable
                      placeholder="请选择风机"
                      popper-class="select"
                      @change="wtselect"
                    >
                      <el-option
                        v-for="item in options1"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"
                      >
                      </el-option>
                    </el-select>
                  </div>
                </div>
              </div>
              <!-- <div class="query-actions">
                <button class="btn" type="button">
                  <i class="el-icon-back mg-r-8"></i><span>返回</span>
                </button>
              </div> -->
            </div>
          </el-col>
        </el-row>
        <el-row class="mg-t-16">
          <el-col :span="24" class="fan-code-box">
            <span class="svg-icon svg-icon-white svg-icon-md mg-l-16 mg-r-16">
              <SvgIcon svgid="svg-wind-site"></SvgIcon>
            </span>
            <div class="fan-code">
              <div class="fan-code-text font-md green">{{value2}}</div>
              <div class="fan-code-label font-md gray-l">高频：</div>
              <div class="fan-code-value font-md green">{{stoptypemap && stoptypemap.top1type}}</div>
              <div class="fan-code-label font-md gray-l">中频：</div>
              <div class="fan-code-value font-md green">{{stoptypemap && stoptypemap.top2type}}</div>
              <div class="fan-code-label font-md gray-l">低频：</div>
              <div class="fan-code-value font-md green">{{stoptypemap && stoptypemap.top3type}}</div>
            </div>
            <!-- <span class="svg-icon svg-icon-white svg-icon-md mg-l-16">
              <SvgIcon svgid="svg-wind-site"></SvgIcon>
            </span>
            <div class="fan-code bg">
              <div class="fan-code-label font-md gray-l">风机评分：</div>
            </div>
            <div class="fan-code">
              <div class="fan-code-value nm font-md green">{{stoptypemap && stoptypemap.wtscore}}</div>
            </div> -->
            <button class="btn mg-l-16" type="button"  @click="onClickReport()">
              <i class="el-icon-s-order mg-r-8"></i><span>健康报告</span>
            </button>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24" style="text-align: center">
            <StandAloneImg
              class="sai"
              :activeIndex="activeIndex"
              @selectSvg="selectSvg"
            ></StandAloneImg>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <img :src="bsxImg" class="bsx" />
            <img :src="bsxImg" class="bsx o" />
          </el-col>
          <el-col :span="6"></el-col>
          <el-col :span="6"></el-col>
          <el-col :span="6">
            <progress-bar title="风机" name="风机健康度" :progress='stoptypemap && stoptypemap.wtscore' :color="stoptypemap &&color('05bb4c')"></progress-bar>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6" class="mg-t-16">
            <progress-bar title="发电机" name="寿命指数" :progress='partmap && partmap.fdj.smsyl' :color="partmap &&color(partmap.fdj.jkzt)"></progress-bar>
          </el-col>
          <el-col :span="6" class="mg-t-16">
            <progress-bar title="齿轮箱" name="寿命指数" :progress='partmap &&partmap.clx.smsyl' :color="partmap &&color(partmap.clx.jkzt)"></progress-bar>
          </el-col>
          <el-col :span="6" class="mg-t-16">
            <progress-bar title="主轴" name="寿命指数" :progress='partmap &&partmap.zz.smsyl' :color="partmap &&color(partmap.zz.jkzt)"></progress-bar>
          </el-col>
          <el-col :span="6" class="mg-t-16">
            <progress-bar title="变桨" name="寿命指数" :progress='partmap &&partmap.bj.smsyl' :color="partmap &&color(partmap.bj.jkzt)"></progress-bar>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6" class="mg-t-16">
            <progress-bar title="偏航" name="寿命指数" :progress='partmap &&partmap.ph.smsyl' :color="partmap &&color(partmap.ph.jkzt)"></progress-bar>
          </el-col>
          <el-col :span="6" class="mg-t-16">
            <progress-bar title="机舱" name="寿命指数" :progress='partmap &&partmap.jc.smsyl' :color="partmap &&color(partmap.jc.jkzt)"></progress-bar>
          </el-col>
          <el-col :span="6" class="mg-t-16">
            <progress-bar title="变频器" name="寿命指数" :progress='partmap &&partmap.bpq.smsyl' :color="partmap &&color(partmap.bpq.jkzt)"></progress-bar>
          </el-col>
          <el-col :span="6" class="mg-t-16">
            <progress-bar title="主控" name="寿命指数" :progress='partmap &&partmap.zk.smsyl' :color="partmap &&color(partmap.zk.jkzt)"></progress-bar>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="10" class="health-0-right">
        <el-row>
          <el-col :span="24">
            <div class="table">
              <Table :data="gztableData" />
            </div>
          </el-col>
        </el-row>
        <el-row class="mg-t-16">
          <el-col :span="24">
            <div class="table">
              <Table :data="yjtableData" />
            </div>
          </el-col>
        </el-row>
        <el-row class="mg-t-16">
          <el-col :span="24">
            <div class="table">
              <Table :data="yxtableData" />
            </div>
          </el-col>
        </el-row>
        <el-row class="mg-t-16">
          <el-col :span="24">
            <div class="table">
              <Table :data="tableData2" />
            </div>
          </el-col>
        </el-row>
        <el-row class="mg-t-16">
          <el-col :span="24">
            <div class="card-tool">
              <div class="card-tool-item font-sm gray-l">故障描述</div>
              <div class="card-tool-item font-sm gray-l">
                开始时间<i class="el-icon-d-caret"></i>
              </div>
            </div>
          </el-col>
        </el-row>
        <el-row class="mg-t-16">
          <el-col :span="24">
            <div class="table">
              <Table :data="tableData11" />
            </div>
          </el-col>
        </el-row>
        <el-row class="mg-t-16">
          <el-col :span="24">
            <div class="table">
              <Table :data="tableData3" />
            </div>
          </el-col>
        </el-row>
        <el-row class="mg-t-16">
          <el-col :span="24">
            <div class="card-tool font-sm gray-l pd">评判扣分</div>
          </el-col>
        </el-row>
        <el-row class="mg-t-16">
          <el-col :span="24">
            <div class="table">
              <Table :data="tableData4" />
            </div>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
    <health-report :show="reportshow" :params="reportparams" @closed="closed"/>
  </div>
</template>

<script>
import SvgIcon from "@com/coms/icon/svg-icon.vue";
import StandAloneImg from "@/views/WindSite/pages/Info/StandAloneImg.vue";
import ProgressBar from "@com/coms/progress-bar/progress-bar.vue";
import Table from "../../components/coms/table/table.vue";
import HealthReport from "../../components/other/healthReport/index.vue"
export default {
  setup() {},
  components: {
    SvgIcon,
    StandAloneImg,
    ProgressBar,
    Table,
    HealthReport
  },
  data() {
    return {
      reportshow: false, //是否显示健康报告
      reportparams: undefined,
      bsxImg: require("@assets/png/bsx.png"),
      options: [
        {
          value: "选项1",
          label: "黄金糕",
        },
        {
          value: "选项2",
          label: "双皮奶",
        },
        {
          value: "选项3",
          label: "蚵仔煎",
        },
        {
          value: "选项4",
          label: "龙须面",
        },
        {
          value: "选项5",
          label: "北京烤鸭",
        },
      ],
      wtid:'',
      wpid:'',
      options1:[],
      value1: [],
      value2: [],
      colorval:{
        '1.0':'green',
        '2.0':'purple',
        '3.0':'orange',
        '4.0':'red',
      },
      activeIndex: -1,
      gztableData: {
        column: [
            {
            name: "",
            field: "index",
            width: "30px",
            is_num: false,
            is_light: false,
          },
          {
            name: "时间",
            field: "name",
            width: "130px",
            is_num: false,
            is_light: false,
          },
          {
            name: "故障1名称",
            field: "top1gzname",
            is_num: false,
            is_light: false,
          },
          {
            name: "故障1数量",
            field: "top1gznum",
            is_num: false,
            is_light: false,
          },
          {
            name: "故障2名称",
            field: "top2gzname",
            is_num: false,
            is_light: false,
          },
          {
            name: "故障2数量",
            field: "top2gznum",
            is_num: false,
            is_light: false,
          },
          {
            name: "故障3名称",
            field: "top3gzname",
            is_num: false,
            is_light: false,
          },
          {
            name: "故障3数量",
            field: "top3gznum",
            is_num: false,
            is_light: false,
          },
        ],
        data: [
        ],
      },
      yjtableData: {
        column: [
            {
            name: "",
            field: "index",
            width: "30px",
            is_num: false,
            is_light: false,
          },
          {
            name: "时间",
            field: "name",
            width: "130px",
            is_num: false,
            is_light: false,
          },
          {
            name: "预警1名称",
            field: "top1gzname",
            is_num: false,
            is_light: false,
          },
          {
            name: "预警1数量",
            field: "top1gznum",
            is_num: false,
            is_light: false,
          },
          {
            name: "预警2名称",
            field: "top2gzname",
            is_num: false,
            is_light: false,
          },
          {
            name: "预警2数量",
            field: "top2gznum",
            is_num: false,
            is_light: false,
          },
          {
            name: "预警3名称",
            field: "top3gzname",
            is_num: false,
            is_light: false,
          },
          {
            name: "故障3数量",
            field: "top3gznum",
            is_num: false,
            is_light: false,
          },
        ],
        data: [
        ],
      },
      yxtableData: {
        column: [
          {
            name: "",
            field: "index",
            width: "30px",
            is_num: false,
            is_light: false,
          },
          {
            name: "时间",
            field: "name",
            width: "130px",
            is_num: false,
            is_light: false,
          },
          {
            name: "发电机",
            field: "numfdj",
            is_num: false,
            is_light: false,
          },
          {
            name: "齿轮箱",
            field: "numclx",
            is_num: false,
            is_light: false,
          },
          {
            name: "主轴",
            field: "numzz",
            is_num: false,
            is_light: false,
          },
          {
            name: "变桨",
            field: "numbj",
            is_num: false,
            is_light: false,
          },
          {
            name: "偏航",
            field: "numph",
            is_num: false,
            is_light: false,
          },
          {
            name: "机舱",
            field: "numjc",
            is_num: false,
            is_light: false,
          },
          {
            name: "变频器",
            field: "numbpq",
            is_num: false,
            is_light: false,
          },
          {
            name: "主控",
            field: "numzk",
            is_num: false,
            is_light: false,
          },
        ],
        data: [
          {
            index: 1,
            time: "1天故障数据分析",
            fdj: "0.00",
            clx: "9.00",
            zz: "0.00",
            bj: "0.00",
            ph: "0.00",
            jc: "0.00",
            bpq: "0.00",
            zk: "0.00",
            is_light: false,
          },
          {
            index: 2,
            time: "3天故障数据分析",
            fdj: "0.00",
            clx: "74.00",
            zz: "0.00",
            bj: "0.00",
            ph: "0.00",
            jc: "0.00",
            bpq: "0.00",
            zk: "0.00",
            is_light: false,
          },
        ],
      },
      tableData2: {
        column: [
          {
            name: "",
            field: "index",
            width: "30px",
            is_num: false,
            is_light: false,
          },
          {
            name: "时间",
            field: "name",
            is_num: false,
            is_light: false,
          },
          {
            name: "评估等级",
            field: "level",
            is_num: false,
            is_light: false,
          },
          {
            name: "得分",
            field: "score",
            is_num: false,
            is_light: false,
          },
        ],
        data: [
          {
            index: 1,
            time: "1天故障数据分析",
            level: "C",
            score: "0.00",
            is_light: false,
          },
        ],
      },
      tableData11: {
        column: [
          {
            name: "",
            field: "index",
            width: "30px",
            is_num: false,
            is_light: false,
          },
          {
            name: "温度范围",
            field: "name",
            width: "130px",
            is_num: false,
            is_light: false,
          },
          {
            name: "发电机",
            field: "numfdj",
            is_num: false,
            is_light: false,
          },
          {
            name: "齿轮箱",
            field: "numclx",
            is_num: false,
            is_light: false,
          },
          {
            name: "主轴",
            field: "numzz",
            is_num: false,
            is_light: false,
          },
          {
            name: "变桨",
            field: "numbj",
            is_num: false,
            is_light: false,
          },
          {
            name: "偏航",
            field: "numph",
            is_num: false,
            is_light: false,
          },
          {
            name: "机舱",
            field: "numjc",
            is_num: false,
            is_light: false,
          },
          {
            name: "变频器",
            field: "numbpq",
            is_num: false,
            is_light: false,
          },
          {
            name: "主控",
            field: "numzk",
            is_num: false,
            is_light: false,
          },
        ],
        data: [
          {
            index: 1,
            time: "1天故障数据分析",
            fdj: "0.00",
            clx: "9.00",
            zz: "0.00",
            bj: "0.00",
            ph: "0.00",
            jc: "0.00",
            bpq: "0.00",
            zk: "0.00",
            is_light: false,
          },
          {
            index: 2,
            time: "3天故障数据分析",
            fdj: "0.00",
            clx: "74.00",
            zz: "0.00",
            bj: "0.00",
            ph: "0.00",
            jc: "0.00",
            bpq: "0.00",
            zk: "0.00",
            is_light: false,
          },
          {
            index: 3,
            time: "1天故障数据分析",
            fdj: "0.00",
            clx: "9.00",
            zz: "0.00",
            bj: "0.00",
            ph: "0.00",
            jc: "0.00",
            bpq: "0.00",
            zk: "0.00",
            is_light: false,
          },
          {
            index: 4,
            time: "3天故障数据分析",
            fdj: "0.00",
            clx: "74.00",
            zz: "0.00",
            bj: "0.00",
            ph: "0.00",
            jc: "0.00",
            bpq: "0.00",
            zk: "0.00",
            is_light: false,
          },
        ],
      },
      tableData3: {
        column: [
          {
            name: "",
            field: "index",
            width: "30px",
            is_num: false,
            is_light: false,
          },
          {
            name: "3-5米曲线偏差率",
            field: "qxpc1",
            is_num: false,
            is_light: false,
          },
          {
            name: "5-11米曲线偏差率",
            field: "qxpc2",
            is_num: false,
            is_light: false,
          },
          {
            name: "11-25米曲线偏差率",
            field: "qxpc3",
            is_num: false,
            is_light: false,
          },
        ],
        data: [
          {
            index: 1,
            v1: "1.50",
            v2: "1.69",
            v3: "2.44",
            is_light: false,
          },
        ],
      },
      tableData4: {
        column: [
          {
            name: "",
            field: "index",
            width: "30px",
            is_num: false,
            is_light: false,
          },
          {
            name: "判断描述",
            field: "name",
            is_num: false,
            is_light: false,
          },
          {
            name: "是否扣分",
            field: "value",
            is_num: false,
            is_light: false,
          },
        ],
        data: [
          {
            index: 1,
            v1: "运行状态为故障",
            v2: "未扣分",
            is_light: false,
          },
          {
            index: 2,
            v1: "风机部件温度超出合理值范围",
            v2: "未扣分",
            is_light: false,
          },
          {
            index: 3,
            v1: "性能损失率连续三天大于基准值",
            v2: "未扣分",
            is_light: false,
          },
          {
            index: 4,
            v1: "曲线偏差率连续三天大于基准值",
            v2: "未扣分",
            is_light: false,
          },
        ],
      },
      partmap:null,
      stoptypemap:null,
    };
  },
  created() {
    this.wtid = this.$route.params.wtId;
    this.wpid = this.$route.params.wpId;
    this.search()
  },
  methods: {
    // 查看健康报告
    onClickReport(){
      console.warn('查看健康报告');
      this.reportshow = true
      this.reportparams = {wtId: this.value2, recorddate: new Date(new Date()).formatDate("yyyy-MM-dd")}
    },
    // 关闭健康报告
    closed(){
      this.reportshow = false
    },
      color(val){
     return this.colorval[val]
    },
    wpselect(){
      console.warn('wpselect');
      this.searchWindturbine('select')
    },
    wtselect(){
      console.warn('wtselect');
      this.searchWtHealthInfo()
    },
    async search() {
      const { data } = await this.API.requestData({
        subUrl: "powercompare/windfarmAjax",
      });
      this.options = data.data;
      this.value1 = this.wpid;
      this.searchWindturbine()
    },
    async searchWindturbine(statu) {
      const { data } = await this.API.requestData({
        subUrl: "/powercompare/windturbineAjax",
        data:{
             wpId : this.value1
        }
      });
      this.options1 = data.data;
      this.value2 = statu =='select' ?data.data[0].id : this.wtid;
      console.warn(data);
     this.searchWtHealthInfo()
    },
    async searchWtHealthInfo() {
      const { data } = await this.API.requestData({
        subUrl: "/healthsub//findWtHealthInfo",
        showLoading: true,
        method:'POST',
        timeout: 30000, // 请求超时时间，默认 3s ，可缺省
        data:{
             wtId : this.value2
        }
      });
     console.warn(data);
     this.gztableData.data = data.data.gzls
     this.yjtableData.data = data.data.yjls
     this.yxtableData.data = data.data.bjyxls
     this.tableData2.data =  data.data.djpgls
     this.tableData11.data = data.data.wdls
     this.tableData3.data = data.data.qxpcls
     this.tableData4.data = data.data.jkls
     this.partmap = data.data.partmap
     this.stoptypemap = data.data.stoptypemap
    },

    selectSvg: function (index) {
      this.activeIndex = index;
    },
  },
};
</script>

<style lang="less">
.health-0 {
  width: 100%;
  height: calc(100vh - 90px);

  .fan-code-box {
    display: flex;
    align-items: center;

    .fan-code {
      display: flex;
      align-items: center;
      background: #53626833;
      padding: 7px 20px;

      &.bg {
        background: transparent;
        padding: 7px 0;

        .fan-code-label {
          margin-left: 8px;
        }
      }

            .fan-code-text {
                padding-right: 20px;
                border-right: 1px solid #536268;
                overflow: hidden;
                text-overflow:ellipsis;
                white-space: nowrap;
            }

            .fan-code-label {
                margin-left: 20px;
                min-width: 50px;
            }

            .fan-code-value {
                margin-left: 20px;
                overflow: hidden;
                text-overflow:ellipsis;
                white-space: nowrap;
                max-width: 112px;

        &.nm {
          margin-left: 0;
        }
      }
    }
  }

  .sai {
    height: 49.074vh;
  }

  .bsx {
    height: 11.481vh;
    margin-right: 1.852vh;

    &.o {
      opacity: 0.5;
    }
  }

  .health-0-right {
    margin-top: 56px;
    height: calc(100vh - 150px);
    overflow-y: auto;

    .table {
      border: 1px solid #6067697d;

      .com-table thead tr th,
      .com-table tr td {
        padding: 0.463vh 0;
      }
    }

    .card-tool {
      width: 100%;
      background: #53626866;
      padding: 0.463vh 0;
      display: flex;

      &.pd {
        padding-left: 2.778vh;
      }

      .card-tool-item {
        flex: 1;
        text-align: center;
        cursor: pointer;

        &:last-child {
          border-left: 1px solid #536268;
        }

        &:hover {
          color: @green;
        }
      }
    }
  }
}
</style>