jn_sis_zhfx/src/views/HealthControl/healthDetail/wtHealth/index.vue

<template>
  <div class="health-0">
    <el-row style="height: 100%">
      <el-col :span="14" class="health-0-left">
        <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.nemCode"
                        :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
                :style="`color:${getWpStateColor()}`"
                class="fan-code-text font-md green"
              >
                {{ getWpName(value2) }}
              </div>
              <div class="fan-code-type">
                <div class="fan-code-type-item">
                  <div class="fan-code-label font-md gray-l">高频：</div>
                  <!-- <div v-if="" class="fan-code-value font-md green">
                    {{ stoptypemap && stoptypemap.top1type }}
                  </div> -->
                  <el-tooltip
                    effect="dark"
                    :content="stoptypemap && stoptypemap.top1type"
                    placement="top-start"
                  >
                    <div class="fan-code-value font-md green">
                      {{ stoptypemap && stoptypemap.top1type }}
                    </div>
                  </el-tooltip>
                </div>
                <div class="fan-code-type-item">
                  <div class="fan-code-label font-md gray-l">中频：</div>
                  <div class="fan-code-value font-md green">
                    {{ stoptypemap && stoptypemap.top2type }}
                  </div>
                </div>
                <div class="fan-code-type-item">
                  <div class="fan-code-label font-md gray-l">低频：</div>
                  <div class="fan-code-value font-md green">
                    {{
                      stoptypemap &&
                      (stoptypemap.top3type == "null"
                        ? "暂无数据"
                        : stoptypemap.top3type)
                    }}
                  </div>
                </div>
              </div>
              <!-- <div
                class="fan-code-label font-md gray-l"
                style="margin-left: 20px"
              >
                高频：
              </div>
              <el-tooltip
                effect="dark"
                :content="stoptypemap && stoptypemap.top1type"
                placement="top-start"
              >
                <div class="fan-code-value font-md green">
                  {{ stoptypemap && stoptypemap.top1type }}
                </div>
              </el-tooltip> -->
            </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> -->
            <el-button
              style="margin-left: 15px"
              class="searchColor"
              @click="onClickReport()"
            >
              <i class="el-icon-s-order mg-r-8"></i><span>健康报告</span>
            </el-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 style="flex: 1">
          <el-col :span="6" style="padding-left: 16px">
            <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-col :span="6">
            <progress-bar
              title="发电机"
              name="寿命指数"
              :progress="partmap && partmap.fdj.smsyl"
              :color="partmap && color(partmap.fdj.jkzt)"
            ></progress-bar>
          </el-col>
          <el-col :span="6">
            <progress-bar
              title="齿轮箱"
              name="寿命指数"
              :progress="partmap && partmap.clx.smsyl"
              :color="partmap && color(partmap.clx.jkzt)"
            ></progress-bar>
          </el-col>
          <el-col :span="6">
            <progress-bar
              title="主轴"
              name="寿命指数"
              :progress="partmap && partmap.zz.smsyl"
              :color="partmap && color(partmap.zz.jkzt)"
            ></progress-bar>
          </el-col>
          <el-col :span="6">
            <progress-bar
              title="变桨"
              name="寿命指数"
              :progress="partmap && partmap.bj.smsyl"
              :color="partmap && color(partmap.bj.jkzt)"
            ></progress-bar>
          </el-col>

          <el-col :span="6">
            <progress-bar
              title="偏航"
              name="寿命指数"
              :progress="partmap && partmap.ph.smsyl"
              :color="partmap && color(partmap.ph.jkzt)"
            ></progress-bar>
          </el-col>
          <el-col :span="6">
            <progress-bar
              title="机舱"
              name="寿命指数"
              :progress="partmap && partmap.jc.smsyl"
              :color="partmap && color(partmap.jc.jkzt)"
            ></progress-bar>
          </el-col>
          <el-col :span="6">
            <progress-bar
              title="变频器"
              name="寿命指数"
              :progress="partmap && partmap.bpq.smsyl"
              :color="partmap && color(partmap.bpq.jkzt)"
            ></progress-bar>
          </el-col>
          <el-col :span="6">
            <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 axios from "axios";
export default {
  name: "health0",
  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: "levelname",
            is_num: false,
            is_light: false,
          },
          {
            name: "排名",
            field: "topnum",
            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;
    // let flag = this.$route.query.from;
    // this.$emit("getWtid", this.wtid, flag);
    this.search();
  },
  methods: {
    // 查看健康报告
    onClickReport() {
      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() {
      this.searchWindturbine("select");
    },
    wtselect() {
      this.searchWtHealthInfo();
    },
    search() {
      axios({
        baseURL: process.env.VUE_APP_API,
        url: `/benchmarking/wpByCplist?companyids=SXJ_RGN&type=-1`,
      }).then((res) => {
        if (res.data?.data?.code === 200) {
          this.options = res.data.data.data || [];
          this.value1 = this.wpid;
          this.searchWindturbine();
        }
      });
    },
    async searchWindturbine(statu) {
      axios({
        baseURL: process.env.VUE_APP_NEW_WISDOM,
        url: `/health/windturbineAjax?wpId=${this.value1}`,
      }).then((res) => {
        if (res.data?.code === 200) {
          this.options1 = res.data.data || [];
          this.value2 =
            statu == "select" ? res.data.data?.[0]?.id || "" : this.wtid || "";
          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() {
      const that = this;
      this.API.requestData({
        baseURL: process.env.VUE_APP_NEW_WISDOM,
        subUrl: "health/findWtHealthInfo1",
        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() {
      const that = this;
      this.API.requestData({
        baseURL: process.env.VUE_APP_NEW_WISDOM,
        // subUrl: "healthsub/findWtHealthInfo2",
        subUrl: "health/findWtHealthInfo2",
        timeout: 30000,
        data: {
          wtId: this.value2,
        },
        success(res) {
          that.yxtableData.data = res.data.bjyxls;
          that.tableData2.data = res.data.djpgls;
        },
      });
    },
    search3() {
      const that = this;
      this.API.requestData({
        baseURL: process.env.VUE_APP_NEW_WISDOM,
        // subUrl: "healthsub/findWtHealthInfo3",
        subUrl: "health/findWtHealthInfo3",
        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(index) {
      this.activeIndex = index;
    },

    getWpName(wtId) {
      return (
        this.options1.find((ele) => {
          return ele.id === wtId;
        })?.nemCode || ""
      );
    },

    getWpStateColor() {
      const jkzt = this?.partmap?.fj?.jkzt;
      if (jkzt == 1) {
        return "#05bb4c";
      } else if (jkzt == 2) {
        return "#4b55ae";
      } else if (jkzt == 3) {
        return "#edbf03";
      } else if (jkzt == 4) {
        return "#e17e23";
      } else {
        return "#05bb4c";
      }
    },
  },
};
</script>

<style lang="less" scoped>
button {
  margin-left: 10px;
  background: rgba(67, 81, 107, 0.3);
  border: 1px solid #274934;
  color: #b3b3b3;
}

.searchColor {
  background-color: rgba(5, 187, 76, 0.2);
  border: 1px solid #3b6c53;
  color: #b3b3b3;
  font-size: 14px;

  &:hover {
    background-color: rgba(5, 187, 76, 0.5);
    color: #ffffff;
  }
}
.health-0 {
  width: 100%;
  height: 100%;

  .health-0-left {
    display: flex;
    flex-direction: column;
  }
  .fan-code-box {
    display: flex;
    align-items: center;

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

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

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

      .fan-code-text {
        width: 45px;
        text-align: center;
        border-right: 1px solid #536268;
        // overflow: hidden;
        // text-overflow:ellipsis;
        white-space: nowrap;
      }
      .fan-code-type {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: space-evenly;
        .fan-code-type-item {
          width: calc((100% / 3) - 10px);
          display: flex;
          align-items: center;
        }
      }
      .fan-code-label {
        width: 50px;
      }

      .fan-code-value {
        width: calc(100% - 50px);

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

  .sai {
    height: 500px;
  }

  .bsx {
    // height: 100%;
    margin-right: 15px;

    &.o {
      opacity: 0.5;
    }
  }

  .health-0-right {
    height: 100%;
    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: 10px 0;
      display: flex;

      &.pd {
        padding-left: 30px;
      }

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

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

        &:hover {
          color: @green;
        }
      }
    }
  }
}
.el-col + .el-col {
  padding-left: 16px;
}
</style>