健康首页echart图修改

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

@@ -0,0 +1,253 @@
+<template>
+  <div class="chart" :id="id"></div>
+</template>
+
+<script>
+import util from "@/helper/util.js";
+import partten from "@/helper/partten.js";
+import * as echarts from "echarts";
+
+export default {
+  name: "multiple-bar-chart",
+  componentName: "multiple-bar-chart",
+  props: {
+    width: {
+      type: String,
+      default: "100%",
+    },
+    height: {
+      type: String,
+      default: "800px",
+    },
+    // 传入数据
+    bardata: {
+      type: Object,
+      default: () => {
+        return {
+          area: ["风场1", "风场2", "风场3", "风场4", "风场5", "风场6", "风场7", "风场8", "风场9"],
+          legend: ["实际电量", "计划检修损失", "非计划检修损失", "限电损失", "受累损失", "性能损失"],
+          data: [
+            [1320, 1302, 901, 634, 1390, 1330, 1320, 1000, 500],
+            [320, 302, 301, 334, 390, 330, 320, 100, 50],
+            [320, 302, 301, 334, 390, 330, 320, 100, 50],
+            [1320, 1302, 901, 634, 1390, 1330, 1320, 1000, 500],
+            [320, 302, 301, 334, 390, 330, 320, 100, 50],
+            [320, 302, 301, 334, 390, 330, 320, 100, 50],
+            [1320, 1302, 901, 634, 1390, 1330, 1320, 1000, 500],
+            [320, 302, 301, 334, 390, 330, 320, 100, 50],
+          ],
+        };
+      },
+    },
+    lineData: {
+      type: Array,
+      // default: () => [200, 350, 400, 500, 600, 700, 800, 900, 1200],
+    },
+    // 单位
+    units: {
+      type: Array,
+      default: () => ["", "风机健康状态数量"],
+    },
+    // 显示 legend
+    showLegend: {
+      type: Boolean,
+      default: true,
+    },
+    // 颜色
+    color: {
+      type: Array,
+      default: () => ["#05bb4c", "#4b55ae", "#e17e23", "#02BB4C", "#EDB32F", "#EDEB2F"],
+    },
+  },
+  data() {
+    return {
+      id: "",
+      chart: null,
+      newbardata:null
+    };
+  },
+    watch: {
+    bardata: {
+      handler(newValue, oldValue) {
+        console.warn(newValue);
+        this.newbardata = newValue;
+        this.initChart();
+      },
+      deep: true,
+    },
+  },
+  computed: {
+    legend() {
+      return this.newbardata.legend;
+    },
+  },
+  methods: {
+    initChart() {
+      let chart = echarts.init(this.$el);
+      let option = {
+        color: this.color,
+        grid: {
+          left: 16,
+          right: 16,
+          bottom: 0,
+          top: 32,
+          containLabel: true,
+        },
+        tooltip: {
+          trigger: "axis",
+          backgroundColor: "rgba(0,0,0,0.4)",
+          borderColor: partten.getColor("gray"),
+          textStyle: {
+            color: "#fff",
+            fontSize: 14,
+          },
+          // formatter: function(param) {
+          //   return param.name + "<br >" + param.marker + param.seriesName + "：" + param.value;
+          // },
+        },
+        legend: {
+          show: this.showLegend,
+          data: this.newbardata.legend,
+          right: 120,
+          icon: "ract",
+          itemWidth: 8,
+          itemHeight: 8,
+          inactiveColor: partten.getColor("gray"),
+          textStyle: {
+            color: partten.getColor("grayl"),
+            fontSize: 12,
+          },
+        },
+        xAxis: [
+          {
+            type: "category",
+            axisLabel: {
+              color: partten.getColor("gray"),
+            },
+            axisLine: {
+              show: false,
+            },
+            axisTick: {
+              show: false,
+            },
+            data: this.newbardata.area,
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            min: function(value){
+               return (value.min-1)%1==0?value.min-1:(value.min-1).toFixed(0);
+            },
+            max: function(value){
+               return value.max; 
+            },
+            name: this.units[0],
+            axisLabel: {
+              formatter: "{value} ",
+              color: partten.getColor("gray"),
+            },
+            axisLine: {
+              type: "dashed",
+              lineStyle: {
+                color: partten.getColor("gray"),
+              },
+              width: 5,
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              lineStyle: {
+                type: "dashed",
+                dashOffset: 10,
+                color: partten.getColor("gray") + 80,
+              },
+            },
+          },
+          {
+            type: "value",
+            name: this.units[1],
+            axisLabel: {
+              formatter: "{value} ",
+              color: partten.getColor("gray"),
+              align: "left",
+            },
+            axisLine: {
+              show: false,
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+            },
+          },
+        ],
+        series: [],
+      };
+
+      // line data
+      if (this.lineData.length > 0) {
+        option.series.push({
+          name: this.units[0],
+          type: "line",
+          data: this.lineData,
+          smooth: false, //平滑展示
+          yAxisIndex: 0,
+          lineStyle: {
+            // color: partten.getColor("green"),
+            color: "#1a93cf",
+          },
+          itemStyle: {
+            // color: partten.getColor("green"),
+            color: "#1a93cf",
+          },
+        });
+      }
+
+      // bar data
+      for (var i = 0; i < this.newbardata.legend.length; i++) {
+        option.series.push({
+          name: this.newbardata.legend[i],
+          type: "bar",
+          stack: "总量",
+          yAxisIndex: 1,
+          barWidth: "10%",
+          label: {
+            show: false,
+            position: "insideRight",
+          },
+          data: this.newbardata.data[i],
+        });
+      }
+
+      chart.setOption(option);
+    },
+  },
+  created() {
+    this.id = "pie-chart-" + util.newGUID();
+    this.newbardata = this.bardata
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.$el.style.width = this.width;
+      this.$el.style.height = this.height;
+      this.initChart();
+    });
+  },
+  updated() {
+    this.$nextTick(() => {
+      this.initChart();
+    });
+  },
+};
+</script>
+
+<style lang="less">
+.chart {
+  width: 100%;
+  height: 100%;
+  display: inline-block;
+}
+</style>

src/components/other/healthReport/index.vue

@@ -121,8 +121,8 @@
               <p class="info">功率对部件温度影响较高是齿轮箱、主轴</p>
               <p class="info">部件劣化较高是发电机、主轴</p>
               <p>定捡已超过三个月，近三个月无维修记录</p>
-              <p v-if="String(healthreport.pjzw).indexOf('差') != -1">该机组总体运行状态{{ healthreport.pjzw }}可安排检修人员排查。</p>
-              <p v-else>该机组总体运行状态{{ healthreport.pjzw }}，不需要作为重点关注。</p>
+              <p v-if="Number(datas.isrecommend) == 1">该机组总体运行状态不佳，可安排检修人员排查。</p>
+              <p v-else>该机组总体运行状态良好，不需要作为重点关注。</p>
             </div>
           </el-form>
         </div>

src/views/HealthControl/Health2.vue

@@ -92,7 +92,7 @@
 </template>
 
 <script>
-import VertivalBarLineChart from "../../components/chart/combination/vertival-bar-line-chart.vue";
+import VertivalBarLineChart from "../../components/chart/combination/health-bar-line-chart.vue";
 import Dashboard from "../../components/chart/other/Dashboard.vue";
 import ThermometerChart from "../../components/chart/other/thermometer-chart.vue";
 import SvgIcon from "../../components/coms/icon/svg-icon.vue";

src/views/HealthControl/HealthTab1.vue

@@ -33,9 +33,9 @@
         :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>
+          <button class="btn" :class="{ active: recommenIndex == 1 }" @click="onClickRecommon(1)">当日内推荐</button>
+          <button class="btn" :class="{ active: recommenIndex == 2 }" @click="onClickRecommon(2)">三日内推荐</button>
+          <button class="btn" :class="{ active: recommenIndex == 3 }" @click="onClickRecommon(3)">超三日推荐</button>
           <div style="margin-left: 450px">
             <button class="btn" @click="onClickCofirmAll()">全部确认</button>
             <button class="btn" @click="onClickIgnoreAll()">全部忽略</button>
@@ -80,7 +80,7 @@
 </template>
 
 <script>
-import VertivalBarLineChart from "../../components/chart/combination/vertival-bar-line-chart.vue";
+import VertivalBarLineChart from "../../components/chart/combination/health-bar-line-chart.vue";
 import SvgIcon from "../../components/coms/icon/svg-icon.vue";
 import Panel from "../../components/coms/panel/panel.vue";
 import HealthReport from "../../components/other/healthReport/index.vue";
@@ -374,6 +374,13 @@ export default {
           background: @gray;
         }
       }
+
+      .active {
+        background: fade(@green, 20);
+        border: 1px solid @green;
+        color: @green;
+        cursor: pointer;
+      }
     }
 
     .report-items {

src/views/HealthControl/HealthTab2.vue

@@ -49,7 +49,7 @@
 </template>
 
 <script>
-import VertivalBarLineChart from "../../components/chart/combination/vertival-bar-line-chart.vue";
+import VertivalBarLineChart from "../../components/chart/combination/health-bar-line-chart.vue";
 import SvgIcon from "../../components/coms/icon/svg-icon.vue";
 import Panel from "../../components/coms/panel/panel.vue";
 import HealthReport from "../../components/other/healthReport/index.vue";