hb_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"
                style="margin-left: 20px"
              >
                高频：
              </div>
              <div class="fan-code-value font-md green">
                {{ stoptypemap && stoptypemap.top1type }}
              </div>
              <div
                class="fan-code-label font-md gray-l"
                style="margin-left: 100px"
              >
                中频：
              </div>
              <div class="fan-code-value font-md green">
                {{ stoptypemap && stoptypemap.top2type }}
              </div>
              <div
                class="fan-code-label font-md gray-l"
                style="margin-left: 65px"
              >
                低频：
              </div>
              <div class="fan-code-value font-md green">
                {{
                  stoptypemap &&
                  (stoptypemap.top3type == "null"
                    ? "暂无数据"
                    : 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"
      ref="eport"
      @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";
import api from "@api/wisdomOverhaul/health/index.js";
export default {
  setup() {},
  components: {
    SvgIcon,
    StandAloneImg,
    ProgressBar,
    Table,
    HealthReport,
  },
  data() {
    return {
      reportshow: false, //是否显示健康报告
      reportparams: undefined,
      bsxImg: require("@assets/png/bsx.png"),
      options: [],
      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.log(this.value2,new Date(new Date()).formatDate("yyyy-MM-dd"))

      this.reportshow = true;
      // this.reportparams = {wtId: this.value2, recorddate: new Date(new Date()).formatDate("yyyy-MM-dd")}
      this.$refs.eport.getReport(
        this.value2,
        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();
    },
    search() {
      api.powercompareWindfarmAjax({}).then((res) => {
        this.options = res.data;
        this.value1 = this.wpid;
        this.searchWindturbine();
      });

      // const { data } = await this.API.requestData({
      //   subUrl: "powercompare/windfarmAjax",
      // });
      // this.options = data.data;
      // this.value1 = this.wpid;
      // this.searchWindturbine()
    },
    searchWindturbine(statu) {
      api.powercompareWindturbineAjax({
          wpId: this.value1,
        })
        .then((res) => {
          this.options1 = res.data;
          this.value2 = statu == "select" ? data.data[0].id : this.wtid;
          this.searchWtHealthInfo();
        });

      // 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
      this.search1();
      this.search2();
      this.search3();
    },
    search1() {
      api.healthsubFindWtHealthInfo1({
          wtId: this.value2,
        })
        .then((res) => {
          this.yjtableData.data = res.data.yjls;
          this.partmap = res.data.partmap;
          this.stoptypemap = res.data.stoptypemap;
          this.gztableData.data = res.data.gzls;
        });

      // const that = this;
      // this.API.requestData({

      //   subUrl: "healthsub/findWtHealthInfo1",
      //   method: "POST",
      //   timeout: 30000,
      //   data: {
      //     wtId: this.value2,
      //   },
      //   success(res) {
      //     that.yjtableData.data = res.data.yjls;
      //     that.partmap = res.data.partmap;
      //     that.stoptypemap = res.data.stoptypemap;
      //     that.gztableData.data = res.data.gzls;
      //   },
      // });
    },
    search2() {
      api.healthsubFindWtHealthInfo2({
          wtId: this.value2,
        })
        .then((res) => {
          this.yxtableData.data = res.data.bjyxls;
          this.tableData2.data = res.data.djpgls;
        });

      // const that = this;
      // this.API.requestData({
      //   subUrl: "healthsub/findWtHealthInfo2",
      //   method: "POST",
      //   timeout: 30000,
      //   data: {
      //     wtId: this.value2,
      //   },
      //   success(res) {
      //     that.yxtableData.data = res.data.bjyxls;
      //     that.tableData2.data = res.data.djpgls;
      //   },
      // });
    },
    search3() {
      api.healthsubFindWtHealthInfo3({
          wtId: this.value2,
        })
        .then((res) => {
          this.tableData3.data = res.data.qxpcls;
          this.tableData11.data = res.data.wdls;
          this.tableData4.data = res.data.jkls;
        });

      // const that = this;
      // this.API.requestData({
      //   subUrl: "healthsub/findWtHealthInfo3",
      //   method: "POST",
      //   timeout: 30000,
      //   data: {
      //     wtId: this.value2,
      //   },
      //   success(res) {
      //     that.tableData3.data = res.data.qxpcls;
      //     that.tableData11.data = res.data.wdls;
      //     that.tableData4.data = res.data.jkls;
      //   },
      // });
    },
    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 {
      width: 76%;
      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;
        min-width: 41px;
      }

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