健康管理模块

src/components/chart/combination/vertival-bar-line-chart.vue

@@ -53,7 +53,8 @@ export default {
     return {
       id: "",
       chart: null,
-      color: ["#323E6F", "#1DA0D7", "#02BB4C", "#DB5520", "#EDB32F", "#EDEB2F"],
+      color: ["#323E6F", "#DB5520", "#1DA0D7", "#02BB4C", "#EDB32F", "#EDEB2F"],
+      // color: ["#323E6F", "#1DA0D7", "#02BB4C", "#DB5520", "#EDB32F", "#EDEB2F"],
     };
   },
   methods: {
@@ -149,10 +150,12 @@ export default {
           smooth: false, //平滑展示
           yAxisIndex: 0,
           lineStyle: {
-            color: partten.getColor("green"),
+            // color: partten.getColor("green"),
+            color: '#323E6F'
           },
           itemStyle: {
-            color: partten.getColor("green"),
+            // color: partten.getColor("green"),
+            color: '#323E6F'
           },
         });
 

src/router/index.js

@@ -97,6 +97,11 @@ const routes = [
     component: () => import(/* webpackChunkName: "lightmatrix3" */ '../views/Decision/Decision4.vue'),
   },
   {
+    path: '/health',
+    name: 'health',
+    component: () => import('../views/HealthControl/Health.vue'),
+  },
+  {
     path: '/health1',
     name: 'health1',
     component: () => import('../views/HealthControl/Health1.vue'),

src/views/HealthControl/Health.vue

@@ -0,0 +1,75 @@
+<template>
+  <div class="health">
+    <div class="selections mg-b-16">
+      <div class="item" @click="tabSelect(0)" :class="{ active: tabIndex == 0 }">未确认缺陷</div>
+      <div class="item" @click="tabSelect(1)" :class="{ active: tabIndex == 1 }">已确认缺陷</div>
+      <div class="item" @click="tabSelect(2)" :class="{ active: tabIndex == 2 }">已分配任务</div>
+      <div class="item" @click="tabSelect(3)" :class="{ active: tabIndex == 3 }">已完成任务</div>
+    </div>
+    <div v-if="tabIndex == 0">
+      <health-tab-1 />
+    </div>
+    <div v-if="tabIndex == 1">
+      <health-tab-2 />
+    </div>
+    <div v-if="tabIndex == 2">
+       <health-tab-3 /> 
+      <!-- <button class="btn" @click="dialogVisible = true">点击弹窗</button>
+      <el-dialog title="日信息对比" v-model="dialogVisible" width="70%" top="10vh" custom-class="modal" :close-on-click-modal="false">
+        <dayinfo />
+      </el-dialog> -->
+    </div>
+    <div v-if="tabIndex == 3">
+      <health-tab-4 /> 
+    </div>
+  </div>
+</template>
+
+<script>
+import HealthTab1 from "./HealthTab1.vue";
+import HealthTab2 from "./HealthTab2.vue";
+import HealthTab3 from "./HealthTab3.vue";
+import HealthTab4 from "./HealthTab4.vue";
+
+export default {
+  setup() {},
+  components: {HealthTab1, HealthTab2, HealthTab3, HealthTab4},
+  data() {
+    return {
+       tabIndex: 0,
+    };
+  },
+  methods: {
+     tabSelect(state) {
+        this.tabIndex = state;
+     }
+  }
+};
+</script>
+
+<style lang="less" scope>
+.health {
+  .selections {
+    display: flex;
+
+    .item {
+      flex: 0 0 128px;
+      text-align: center;
+      line-height: 33px;
+      margin-right: 8px;
+      color: @font-color;
+      font-size: @fontsize-s;
+      background: fade(@gray, 20);
+      border: 1px solid fade(@gray, 20);
+
+      &:hover,
+      &.active {
+        background: fade(@green, 20);
+        border: 1px solid @green;
+        color: @green;
+        cursor: pointer;
+      }
+    }
+  }
+}
+</style>

src/views/HealthControl/HealthTab1.vue

@@ -0,0 +1,384 @@
+<template>
+  <div class="health-tab-1">
+    <div class="power-info mg-b-16">
+      <div class="info-tab">
+        <div
+          class="tab"
+          v-for="(item, index) in infoList"
+          :key="index"
+          :class="item.active ? 'active' : ''"
+          @click="onClickInfo(item)"
+        >
+          <i class="svg-icon svg-icon svg-icon-sm">
+            <svg-icon :svgid="item.svgid" />
+          </i>
+          <span> {{ item.title }} </span>
+        </div>
+        <div class="empty"></div>
+      </div>
+      <div class="info-chart">
+        <panel class="info-chart-panel" :title="'损失电量分析'">
+          <vertival-bar-line-chart
+            :height="'310px'"
+            :bardata="bardata"
+            :lineData="lineData"
+          />
+        </panel>
+      </div>
+    </div>
+    <div class="health-report">
+      <panel class="health-report-panel" :title="'健康报告'" :showLine="false">
+        <div class="actions mg-b-16">
+          <div class="item green" @click="onClickRecommon(1)">当日内推荐</div>
+          <div class="item purple" @click="onClickRecommon(2)">三日内推荐</div>
+          <div class="item gray" @click="onClickRecommon(3)">超三日推荐</div>
+          <div style="margin-left:450px">
+            <button class="btn" @click="onClickCofirmAll()">全部确认</button>
+            <button class="btn" @click="onClickIgnoreAll()">全部忽略</button>
+          </div>
+        </div>
+        <div class="report-items scroll">
+          <div class="item" v-for="(item, index) in recommenList" :key="index">
+            <div class="title">风机编号：{{ item.wtid }}</div>
+            <div class="info">
+              <p>推荐理由：{{ item.reason }}</p>
+              <p>
+                推荐检修时间：{{
+                  new Date(item.recodedate).formatDate("yyyy-MM-dd hh:mm:ss")
+                }}
+              </p>
+              <p>推荐时间对应风速：{{ item.speed }}</p>
+              <p>
+                判断时间：{{
+                  new Date(item.createdate).formatDate("yyyy-MM-dd hh:mm:ss")
+                }}
+              </p>
+              <div class="actions mg-t-16">
+                <button class="btn success" @click="onClickCofirm(item)">
+                  <i class="fa fa-check"></i>
+                  提交
+                </button>
+                <button class="btn" @click="onClickIgnore(item)">
+                  <i class="fa fa-close"></i>
+                  取消
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </panel>
+    </div>
+  </div>
+</template>
+
+<script>
+import VertivalBarLineChart from "../../components/chart/combination/vertival-bar-line-chart.vue";
+import SvgIcon from "../../components/coms/icon/svg-icon.vue";
+import Panel from "../../components/coms/panel/panel.vue";
+
+export default {
+  components: { SvgIcon, Panel, VertivalBarLineChart },
+  data() {
+    return {
+      infoList: [
+        // {title: '24小时健康趋势', svgid: 'svg-24-houre', active: false, type: 'houre'},
+        { title: "7日健康趋势", svgid: "svg-h-day", active: true, type: "day" },
+        { title: "30日健康趋势", svgid: "svg-h-month", active: false, type: "month"},
+      ],
+      bardata: { area: [], legend: ["健康情况", "差", "良", "优"], data: [] }, // 损失电量分析echart数值
+      lineData: [],
+      recommenList: [], // 健康报告推荐
+      recommenIndex: 1, // 记录当前是那个推荐
+    };
+  },
+  created() {
+    this.requestCoulometry(2);
+    this.requestRecommen("recommen/getRecommenmainDay1");
+  },
+  methods: {
+    // 未确认缺陷按钮下的健康趋势选项
+    onClickInfo(item) {
+      this.infoList.forEach((element) => {
+        if (item.type == element.type) {
+          item.active = true;
+          switch (item.type) {
+            case "day":
+              this.requestCoulometry(2);
+              break;
+            case "month":
+              this.requestCoulometry(3);
+          }
+        } else {
+          element.active = false;
+        }
+      });
+    },
+    // 健康报告推荐
+    onClickRecommon(day) {
+      this.recommenIndex = day;
+      switch (day) {
+        case 1:
+          this.requestRecommen("recommen/getRecommenmainDay1");
+          break;
+        case 2:
+          this.requestRecommen("recommen/getRecommenmainDay3");
+          break;
+        case 3:
+          this.requestRecommen("recommen/getRecommenmainDay7");
+          break;
+      }
+    },
+    // 健康推荐提交
+    onClickCofirm(item) {
+      // this.requestOption("recommen/confirpush", item.rid);
+    },
+    // 健康推荐取消
+    onClickIgnore(item) {
+      // this.requestOption("recommen/ignorepush", item.rid);
+    },
+    // 健康推荐提交全部
+    onClickCofirmAll() {
+      // this.requestOptionAll("recommen/confirpushAll");
+    },
+    // 健康推荐取消全部
+    onClickIgnoreAll() {
+      // this.requestOptionAll("recommen/ignorepushAll");
+    },
+    // 健康报告推荐
+    requestRecommen(url) {
+      let that = this;
+      that.API.requestData({
+        method: "POST",
+        subUrl: url,
+        success(res) {
+          if (res.code == 200) that.recommenList = res.data;
+        },
+      });
+    },
+    // 操作推荐内容（提交/取消）
+    requestOption(url, rid) {
+      let that = this;
+      that.API.requestData({
+        method: "POST",
+        subUrl: url,
+        data: { rid: rid },
+        success(res) {
+          if (res.code == 200) that.onClickRecommon(that.recommenIndex);
+        },
+      });
+    },
+    // 操作推荐内容全部（提交/取消）
+    requestOptionAll(url) {
+      let that = this;
+      that.API.requestData({
+        method: "POST",
+        subUrl: url,
+        data: { typeid: that.recommenIndex },
+        success(res) {
+          if (res.code == 200) that.onClickRecommon(that.recommenIndex);
+        },
+      });
+    },
+    // 损失电量分析  type：1 表示24小时健康趋势，2 表示七天健康趋势 3 表示30天健康趋势
+    requestCoulometry(type) {
+      let that = this;
+      that.API.requestData({
+        method: "POST",
+        subUrl: "recommen/findAllChartjz",
+        data: { wpId: 0, type: type },
+        success(res) {
+          if (res.code == 200) {
+            that.lineData = res.data.lvchart;
+            that.bardata.area = res.data.datechart;
+            that.bardata.data[0] = res.data.lvchart;
+            that.bardata.data[1] = res.data.cslchart;
+            that.bardata.data[2] = res.data.lslchart;
+            that.bardata.data[3] = res.data.yslchart;
+          }
+        },
+      });
+    },
+  },
+};
+</script>
+
+
+<style lang="less" scope>
+.health-tab-1 {
+  .power-info {
+    display: flex;
+    .info-tab {
+      flex: 0 0 156px;
+      display: flex;
+      flex-direction: column;
+      height: 350px;
+      margin-right: 1.4815vh;
+
+      .tab {
+        position: relative;
+        flex: 0 0 auto;
+        text-align: center;
+        line-height: 33px;
+        margin-right: 8px;
+        color: @gray-l;
+        font-size: 12px;
+        background: fade(@gray, 20);
+        border: 1px solid fade(@gray, 20);
+
+        display: flex;
+        align-items: center;
+
+        i {
+          margin: 0 1.4815vh;
+          svg use {
+            fill: @gray-l;
+          }
+        }
+
+        &:hover,
+        &.active {
+          background: fade(@green, 20);
+          border: 1px solid @green;
+          color: @green;
+          cursor: pointer;
+
+          i svg use {
+            fill: @green;
+          }
+        }
+
+        &.active::after {
+          box-sizing: content-box;
+          width: 0px;
+          height: 0px;
+          position: absolute;
+          right: -19px;
+          padding: 0;
+          border-bottom: 9px solid @green;
+          border-top: 9px solid transparent;
+          border-left: 9px solid transparent;
+          border-right: 9px solid transparent;
+          display: block;
+          content: "";
+          z-index: 10;
+          transform: rotate(90deg);
+        }
+
+        &.active::before {
+          box-sizing: content-box;
+          width: 0px;
+          height: 0px;
+          position: absolute;
+          right: -17px;
+          padding: 0;
+          border-bottom: 9px solid #063319;
+          border-top: 9px solid transparent;
+          border-left: 9px solid transparent;
+          border-right: 9px solid transparent;
+          display: block;
+          content: "";
+          z-index: 12;
+          transform: rotate(90deg);
+        }
+
+        & + .tab {
+          margin-top: 0.7407vh;
+        }
+
+        &:last-child {
+          text-align: center;
+          justify-content: center;
+        }
+      }
+
+      .empty {
+        flex: 1 0 auto;
+      }
+    }
+
+    .info-chart {
+      flex: 1 0 auto;
+    }
+  }
+
+  .health-report {
+    // 健康报告 按钮样式
+    .actions {
+      display: flex;
+
+      .item {
+        flex: 0 0 102px;
+        text-align: center;
+        line-height: 33px;
+        margin-right: 8px;
+        color: fade(@white, 75);
+        font-size: @fontsize-s;
+
+        &.green {
+          background: @green;
+        }
+
+        &.purple {
+          background: @purple;
+        }
+
+        &.gray {
+          background: @gray;
+        }
+      }
+    }
+
+    .report-items {
+      display: flex;
+      flex-wrap: wrap;
+      height: calc(100vh - 592px);
+
+      .item {
+        flex: 0 0 calc(100% / 6 - 16px);
+        margin-bottom: 16px;
+
+        & + .item {
+          margin-left: 16px;
+        }
+
+        &:nth-child(6n + 1) {
+          margin-left: 0px;
+        }
+
+        .title {
+          background: fade(@gray, 40);
+          // color: fade(@white, 75);
+          color: @gray-l;
+          line-height: 37px;
+          padding-left: 16px;
+          font-size: @fontsize-s;
+        }
+
+        .info {
+          background: fade(@gray, 20);
+          padding: 16px;
+          font-size: @fontsize-s;
+          color: @font-color;
+          line-height: 1.5;
+          p {
+            margin: 0;
+            line-height: 2;
+          }
+
+          .actions {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+
+            .success {
+              border-color: #05bb4c;
+              color: #05bb4c;
+              background: rgba(5, 187, 76, 0.2);
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>

src/views/HealthControl/HealthTab2.vue

@@ -0,0 +1,288 @@
+<template>
+  <div class="health-tab-2">
+    <div class="power-info mg-b-16">
+      <div class="info-tab">
+        <div
+          class="tab"
+          v-for="(item, index) in infoList"
+          :key="index"
+          :class="item.active ? 'active' : ''"
+          @click="onClickInfo(item)"
+        >
+          <i class="svg-icon svg-icon svg-icon-sm">
+            <svg-icon :svgid="item.svgid" />
+          </i>
+          <span> {{ item.title }} </span>
+        </div>
+        <div class="empty"></div>
+      </div>
+      <div class="info-chart">
+        <panel class="info-chart-panel" :title="'损失电量分析'">
+          <vertival-bar-line-chart
+            :height="'310px'"
+            :bardata="bardata"
+            :lineData="lineData"
+          />
+        </panel>
+      </div>
+    </div>
+    <div class="health-report">
+      <panel class="health-report-panel" :title="'健康报告'" :showLine="false">
+        <div class="report-items scroll">
+          <div class="item" v-for="(item, index) in recommenList" :key="index">
+            <div class="title">风机编号：{{ item.wtid }}</div>
+            <div class="info">
+              <p>推荐理由：{{ item.reason }}</p>
+              <p>
+                推荐检修时间：{{
+                  new Date(item.recodedate).formatDate("yyyy-MM-dd hh:mm:ss")
+                }}
+              </p>
+              <p>推荐时间对应风速：{{ item.speed }}</p>
+              <p>
+                判断时间：{{
+                  new Date(item.createdate).formatDate("yyyy-MM-dd hh:mm:ss")
+                }}
+              </p>
+            </div>
+          </div>
+        </div>
+      </panel>
+    </div>
+  </div>
+</template>
+
+<script>
+import VertivalBarLineChart from "../../components/chart/combination/vertival-bar-line-chart.vue";
+import SvgIcon from "../../components/coms/icon/svg-icon.vue";
+import Panel from "../../components/coms/panel/panel.vue";
+
+export default {
+  components: { SvgIcon, Panel, VertivalBarLineChart },
+  data() {
+    return {
+      infoList: [
+        // {title: '24小时健康趋势', svgid: 'svg-24-houre', active: false, type: 'houre'},
+        { title: "7日健康趋势", svgid: "svg-h-day", active: true, type: "day" },
+        {
+          title: "30日健康趋势",
+          svgid: "svg-h-month",
+          active: false,
+          type: "month",
+        },
+      ],
+      bardata: { area: [], legend: ["健康情况", "差", "良", "优"], data: [] }, // 损失电量分析echart数值
+      lineData: [],
+      recommenList: [], // 健康报告推荐
+    };
+  },
+  created() {
+    this.requestCoulometry(2);
+    this.requestRecommen();
+  },
+  methods: {
+    // 未确认缺陷按钮下的健康趋势选项
+    onClickInfo(item) {
+      this.infoList.forEach((element) => {
+        if (item.type == element.type) {
+          item.active = true;
+          switch (item.type) {
+            case "day":
+              this.requestCoulometry(2);
+              break;
+            case "month":
+              this.requestCoulometry(3);
+          }
+        } else {
+          element.active = false;
+        }
+      });
+    },
+    // 损失电量分析  type：1 表示24小时健康趋势，2 表示七天健康趋势 3 表示30天健康趋势
+    requestCoulometry(type) {
+      let that = this;
+      that.API.requestData({
+        method: "POST",
+        subUrl: "recommen/findAllChartjz",
+        data: { wpId: 0, type: type },
+        success(res) {
+          if (res.code == 200) {
+            that.lineData = res.data.lvchart;
+            that.bardata.area = res.data.datechart;
+            that.bardata.data[0] = res.data.lvchart;
+            that.bardata.data[1] = res.data.cslchart;
+            that.bardata.data[2] = res.data.lslchart;
+            that.bardata.data[3] = res.data.yslchart;
+          }
+        },
+      });
+    },
+     // 已确认健康报告推荐
+    requestRecommen() {
+      let that = this;
+      that.API.requestData({
+        method: "POST",
+        subUrl: 'recommen/recommenConfirmedList',
+        success(res) {
+          if (res.code == 200) that.recommenList = res.data;
+        },
+      });
+    },
+  },
+};
+</script>
+
+
+<style lang="less" scoped>
+.health-tab-2 {
+  .power-info {
+    display: flex;
+    .info-tab {
+      flex: 0 0 156px;
+      display: flex;
+      flex-direction: column;
+      height: 350px;
+      margin-right: 1.4815vh;
+
+      .tab {
+        position: relative;
+        flex: 0 0 auto;
+        text-align: center;
+        line-height: 33px;
+        margin-right: 8px;
+        color: @gray-l;
+        font-size: 12px;
+        background: fade(@gray, 20);
+        border: 1px solid fade(@gray, 20);
+
+        display: flex;
+        align-items: center;
+
+        i {
+          margin: 0 1.4815vh;
+          svg use {
+            fill: @gray-l;
+          }
+        }
+
+        &:hover,
+        &.active {
+          background: fade(@green, 20);
+          border: 1px solid @green;
+          color: @green;
+          cursor: pointer;
+
+          i svg use {
+            fill: @green;
+          }
+        }
+
+        &.active::after {
+          box-sizing: content-box;
+          width: 0px;
+          height: 0px;
+          position: absolute;
+          right: -19px;
+          padding: 0;
+          border-bottom: 9px solid @green;
+          border-top: 9px solid transparent;
+          border-left: 9px solid transparent;
+          border-right: 9px solid transparent;
+          display: block;
+          content: "";
+          z-index: 10;
+          transform: rotate(90deg);
+        }
+
+        &.active::before {
+          box-sizing: content-box;
+          width: 0px;
+          height: 0px;
+          position: absolute;
+          right: -17px;
+          padding: 0;
+          border-bottom: 9px solid #063319;
+          border-top: 9px solid transparent;
+          border-left: 9px solid transparent;
+          border-right: 9px solid transparent;
+          display: block;
+          content: "";
+          z-index: 12;
+          transform: rotate(90deg);
+        }
+
+        & + .tab {
+          margin-top: 0.7407vh;
+        }
+
+        &:last-child {
+          text-align: center;
+          justify-content: center;
+        }
+      }
+
+      .empty {
+        flex: 1 0 auto;
+      }
+    }
+
+    .info-chart {
+      flex: 1 0 auto;
+    }
+  }
+
+  .health-report {
+    .report-items {
+      display: flex;
+      flex-wrap: wrap;
+      height: calc(100vh - 592px);
+
+      .item {
+        flex: 0 0 calc(100% / 6 - 16px);
+        margin-bottom: 16px;
+
+        & + .item {
+          margin-left: 16px;
+        }
+
+        &:nth-child(6n + 1) {
+          margin-left: 0px;
+        }
+
+        .title {
+          background: fade(@gray, 40);
+          // color: fade(@white, 75);
+          color: @gray-l;
+          line-height: 37px;
+          padding-left: 16px;
+          font-size: @fontsize-s;
+        }
+
+        .info {
+          background: fade(@gray, 20);
+          padding: 16px;
+          font-size: @fontsize-s;
+          color: @font-color;
+          line-height: 1.5;
+          p {
+            margin: 0;
+            line-height: 2;
+          }
+
+          .actions {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+
+            .success {
+              border-color: #05bb4c;
+              color: #05bb4c;
+              background: rgba(5, 187, 76, 0.2);
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>

src/views/HealthControl/HealthTab3.vue

@@ -0,0 +1,275 @@
+<template>
+  <div class="health-tab-3">
+    <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="station"
+              clearable
+              placeholder="请选择"
+              popper-class="select"
+            >
+              <el-option
+                v-for="item in stations"
+                :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="windturbine"
+              placeholder="请选择"
+              popper-class="select"
+            >
+              <el-option
+                v-for="item in windturbines"
+                :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-date-picker
+              v-model="starts"
+              type="date"
+              placeholder="选择日期"
+              popper-class="date-select"
+            >
+            </el-date-picker>
+          </div>
+        </div>
+        <div class="query-item">
+          <div class="lable">结束日期：</div>
+          <div class="search-input">
+            <el-date-picker
+              v-model="endts"
+              type="date"
+              placeholder="选择日期"
+              popper-class="date-select"
+            >
+            </el-date-picker>
+            <div class="unit svg-icon svg-icon-gray">
+              <svg-icon :svgid="''" />
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="query-actions" style="margin-right: 500px">
+        <button class="btn green" @click="onClickSearch">搜索</button>
+      </div>
+    </div>
+    <div class="table-box">
+      <table class="com-table">
+        <thead>
+          <tr>
+            <th v-for="(col, index) of tableData.column" :key="index">
+              {{ col }}
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="(row, index) of tableData.data" :key="index">
+            <td>{{ row.wfname }}</td>
+            <td>{{ row.wtid }}</td>
+            <td>{{new Date(row.operationdate).formatDate("yyyy-MM-dd hh:mm:ss")}}</td>
+            <td>{{row.departuretime ? new Date().formatDate("yyyy-MM-dd hh:mm:ss") : ""}}</td>
+            <td>{{ row.reason }}</td>
+            <td>{{ row.ismain }}</td>
+            <td>{{ row.status }}</td>
+            <td>
+              <button class="btn success" @click="onClickTrack(row)">消缺跟踪</button>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+    <div>
+      <el-dialog title="日信息对比" v-model="dialogVisible" width="70%" top="10vh" custom-class="modal" :close-on-click-modal="false">
+        <dayinfo />
+      </el-dialog>   
+    </div> 
+  </div>
+</template>
+
+<script>
+import Dayinfo from "./dayinfo.vue";
+import SvgIcon from "../../components/coms/icon/svg-icon.vue";
+
+export default {
+  components: { Dayinfo, SvgIcon },
+  data() {
+    return {
+      stations: [], // 场站
+      windturbines: [], // 风机
+      station: "",
+      windturbine: "",
+      starts: "",
+      endts: new Date(),
+      tableData: {
+        column: ["场站", "风机编号", "任务开始时间", "任务接受时间", "检修原因", "受否下单", "任务状态", "操作"],
+        data: [],
+      },
+      dialogVisible: false
+    };
+  },
+  created() {
+    this.starts = new Date(new Date().setMonth(new Date().getMonth()-1)).formatDate("yyyy-MM-dd");
+    this.requestStations();
+  },
+  methods: {
+    // 搜索按钮
+    onClickSearch() {
+      this.requestUnfinishedList();
+    },
+    // 消缺跟踪
+    onClickTrack(row){
+      this.dialogVisible = true
+    },
+    // 获取场站
+    requestStations() {
+      let that = this;
+      that.API.requestData({
+        method: "GET",
+        subUrl: "powercompare/windfarmAjax",
+        success(res) {
+          if (res.code == 200) {
+            that.stations = res.data;
+            that.station = that.stations[3].id;
+          }
+        },
+      });
+    },
+    // 获取风机
+    requestWindturbines(wpid) {
+      let that = this;
+      that.API.requestData({
+        method: "GET",
+        subUrl: "powercompare/windturbineAjax",
+        data: { wpId: wpid },
+        success(res) {
+          if (res.code == 200) that.windturbines = res.data;
+        },
+      });
+    },
+    // 获取未完成消缺单列表
+    requestUnfinishedList() {
+      let that = this;
+      that.API.requestData({
+        method: "POST",
+        subUrl: "recommen/unfinishedList",
+        data: {
+          wpId: that.station,
+          wtId: that.windturbine,
+          beginDate: new Date(that.starts).formatDate("yyyy-MM-dd"),
+          endDate: new Date(that.endts).formatDate("yyyy-MM-dd"),
+        },
+        success(res) {
+          if (res.code == 200) {
+            that.tableData.data = res.data;
+          }
+        },
+      });
+    },
+  },
+  watch: {
+    station(val) {
+      this.windturbine = "";
+      this.requestWindturbines(val);
+    },
+  },
+};
+</script>
+
+<style lang="less" scope>
+@titleGray: #9ca5a8;
+@rowGray: #606769;
+@darkBack: #536268;
+.health-tab-3 {
+  .table-box {
+    border: 0.093vh solid @darkgray;
+    position: relative;
+    overflow: auto;
+    flex-grow: 1;
+    top: 1vh;
+  }
+  .com-table {
+    width: 100%;
+    border-collapse: collapse;
+    display: flex;
+    flex-direction: column;
+    max-height: calc(100vh - 175px);
+  
+    thead {
+      tr {
+        position: relative;
+        display: table;
+        table-layout: fixed;
+        width: 100%;
+
+        th {
+          background-color: fade(@darkBack, 20%);
+          padding: 1.481vh 0;
+          color: @titleGray;
+          font-weight: 400;
+          font-size: @fontsize-s;
+          position: sticky;
+          // top: 0;
+
+          &.light {
+            color: @green;
+          }
+        }
+      }
+    }
+
+    tbody {
+      display: block;
+      max-height: 100%; 
+      overflow-y: scroll;
+
+      tr {
+        display: table;
+        table-layout: fixed;
+        width: 100%;
+
+        &:nth-child(2n) {
+          background-color: fade(@rowGray, 20%);
+        }
+
+        td {
+          padding: 0.556vh 0;
+          color: @rowGray;
+          text-align: center;
+          font-size: @fontsize-s;
+          overflow: hidden; //隐藏文字
+          text-overflow: ellipsis; //显示 ...
+          white-space: nowrap; //不换行
+
+          &.light {
+            color: @green !important;
+          }
+
+          &.num {
+            font-family: "Bicubik";
+            font-weight: 400;
+          }
+        }
+      }
+    }
+  }
+}
+</style>

src/views/HealthControl/HealthTab4.vue

@@ -0,0 +1,279 @@
+<template>
+  <div class="health-tab-4">
+    <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="station"
+              clearable
+              placeholder="请选择"
+              popper-class="select"
+            >
+              <el-option
+                v-for="item in stations"
+                :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="windturbine"
+              placeholder="请选择"
+              popper-class="select"
+            >
+              <el-option
+                v-for="item in windturbines"
+                :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-date-picker
+              v-model="starts"
+              type="date"
+              placeholder="选择日期"
+              popper-class="date-select"
+            >
+            </el-date-picker>
+          </div>
+        </div>
+        <div class="query-item">
+          <div class="lable">结束日期：</div>
+          <div class="search-input">
+            <el-date-picker
+              v-model="endts"
+              type="date"
+              placeholder="选择日期"
+              popper-class="date-select"
+            >
+            </el-date-picker>
+            <div class="unit svg-icon svg-icon-gray">
+              <svg-icon :svgid="''" />
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="query-actions" style="margin-right: 500px">
+        <button class="btn green" @click="onClickSearch">搜索</button>
+      </div>
+    </div>
+    <div class="table-box">
+      <table class="com-table">
+        <thead>
+          <tr>
+            <th v-for="(col, index) of tableData.column" :key="index">
+              {{ col }}
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="(row, index) of tableData.data" :key="index">
+            <td>{{ row.wfname }}</td>
+            <td>{{ row.wtid }}</td>
+            <td>{{new Date(row.operationdate).formatDate("yyyy-MM-dd hh:mm:ss")}}</td>
+            <td>{{row.departuretime ? new Date().formatDate("yyyy-MM-dd hh:mm:ss") : ""}}</td>
+            <td>{{ row.reason }}</td>
+            <td>{{ row.repairedcomment }}</td>
+            <td>
+              <button class="btn success" @click="onClickTrack(row)">消缺跟踪</button>
+              <button class="btn success" @click="onClickHistory(row)">历史查询</button>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+    <div>
+      <el-dialog title="日信息对比" v-model="dialogVisible" width="70%" top="10vh" custom-class="modal" :close-on-click-modal="false">
+        <dayinfo />
+      </el-dialog>   
+    </div> 
+  </div>
+</template>
+
+<script>
+import Dayinfo from "./dayinfo.vue";
+import SvgIcon from "../../components/coms/icon/svg-icon.vue";
+
+export default {
+  components: { Dayinfo, SvgIcon },
+  data() {
+    return {
+      stations: [], // 场站
+      windturbines: [], // 风机
+      station: "",
+      windturbine: "",
+      starts: "",
+      endts: new Date(),
+      tableData: {
+        column: ["场站", "风机编号", "任务开始时间", "任务接受时间", "检修原因", "消缺工艺",  "操作"],
+        data: [],
+      },
+      dialogVisible: false
+    };
+  },
+  created() {
+    this.starts = new Date(new Date().setMonth(new Date().getMonth()-1)).formatDate("yyyy-MM-dd");
+    this.requestStations();
+  },
+  methods: {
+    // 搜索按钮
+    onClickSearch() {
+      this.requestUnfinishedList();
+    },
+    // 消缺跟踪
+    onClickTrack(row){
+      this.dialogVisible = true
+    },
+    // 历史查询
+    onClickHistory(row){
+
+    },
+    // 获取场站
+    requestStations() {
+      let that = this;
+      that.API.requestData({
+        method: "GET",
+        subUrl: "powercompare/windfarmAjax",
+        success(res) {
+          if (res.code == 200) {
+            that.stations = res.data;
+            that.station = that.stations[3].id;
+          }
+        },
+      });
+    },
+    // 获取风机
+    requestWindturbines(wpid) {
+      let that = this;
+      that.API.requestData({
+        method: "GET",
+        subUrl: "powercompare/windturbineAjax",
+        data: { wpId: wpid },
+        success(res) {
+          if (res.code == 200) that.windturbines = res.data;
+        },
+      });
+    },
+    // 获取未完成消缺单列表
+    requestUnfinishedList() {
+      let that = this;
+      that.API.requestData({
+        method: "POST",
+        subUrl: "recommen/finishedList",
+        data: {
+          wpId: that.station,
+          wtId: that.windturbine,
+          beginDate: new Date(that.starts).formatDate("yyyy-MM-dd"),
+          endDate: new Date(that.endts).formatDate("yyyy-MM-dd"),
+        },
+        success(res) {
+          if (res.code == 200) {
+            that.tableData.data = res.data;
+          }
+        },
+      });
+    },
+  },
+  watch: {
+    station(val) {
+      this.windturbine = "";
+      this.requestWindturbines(val);
+    },
+  },
+};
+</script>
+
+<style lang="less" scope>
+@titleGray: #9ca5a8;
+@rowGray: #606769;
+@darkBack: #536268;
+.health-tab-4 {
+  .table-box {
+    border: 0.093vh solid @darkgray;
+    position: relative;
+    overflow: auto;
+    flex-grow: 1;
+    top: 1vh;
+  }
+  .com-table {
+    width: 100%;
+    border-collapse: collapse;
+    display: flex;
+    flex-direction: column;
+    max-height: calc(100vh - 175px);
+  
+    thead {
+      tr {
+        position: relative;
+        display: table;
+        table-layout: fixed;
+        width: 100%;
+
+        th {
+          background-color: fade(@darkBack, 20%);
+          padding: 1.481vh 0;
+          color: @titleGray;
+          font-weight: 400;
+          font-size: @fontsize-s;
+          position: sticky;
+          // top: 0;
+
+          &.light {
+            color: @green;
+          }
+        }
+      }
+    }
+
+    tbody {
+      display: block;
+      max-height: 100%; 
+      overflow-y: scroll;
+
+      tr {
+        display: table;
+        table-layout: fixed;
+        width: 100%;
+
+        &:nth-child(2n) {
+          background-color: fade(@rowGray, 20%);
+        }
+
+        td {
+          padding: 0.556vh 0;
+          color: @rowGray;
+          text-align: center;
+          font-size: @fontsize-s;
+          overflow: hidden; //隐藏文字
+          text-overflow: ellipsis; //显示 ...
+          white-space: nowrap; //不换行
+
+          &.light {
+            color: @green !important;
+          }
+
+          &.num {
+            font-family: "Bicubik";
+            font-weight: 400;
+          }
+        }
+      }
+    }
+  }
+}
+</style>

src/views/layout/Menu.vue

@@ -127,7 +127,7 @@ export default {
             {
               text: "健康管理1",
               icon: "svg-wind-site",
-              path: "/health1",
+              path: "/health",
             }/*,
             {
               text: "健康管理2",