增加日累计报警及相应得echarts图表

shuishen

2021-04-02 e5f1ccc3d126a84bb055077b2b1fa1b82fc6ad14

增加日累计报警及相应得echarts图表

 src/api/supervisory/data.js

@@ -9,9 +9,17 @@
}

export const getEquipmentList = () => {
    return request({
      url: '/api/blade-jfpts/alarm/alarm/selectEq',
      method: 'get',
      params: {}
    })
  }
  return request({
    url: '/api/blade-jfpts/alarm/alarm/selectEq',
    method: 'get',
    params: {}
  })
}

export const getDayWarnList = () => {
  return request({
    url: '/api/blade-jfpts/alarm/alarm/selectScount',
    method: 'get',
    params: {}
  })
}

 src/views/supervisoryConsole/data.vue

@@ -129,7 +129,7 @@
                ><span class="ng-binding">1.00</span>
              </div>
            </div>
            <div class="week-alarm-bar"></div>
            <div class="week-alarm-bar" id="day_warn_echarts"></div>
          </div>
          <div class="border-line"></div>
          <div class="alarm-line">
@@ -151,7 +151,11 @@
</template>

<script>
import { getList, getEquipmentList } from "@/api/supervisory/data";
import {
  getList,
  getEquipmentList,
  getDayWarnList,
} from "@/api/supervisory/data";

export default {
  data() {
@@ -180,10 +184,13 @@
    getEquipmentList().then((res) => {
      that.drawLine(res.data.data);
    });

    getDayWarnList().then((res) => {
      that.drawPillar(res.data.data[0]);
    });
  },
  mounted() {
    this.drawPie();
    this.drawLine();
  },
  methods: {
    drawPie() {
@@ -281,14 +288,15 @@
      myChart.setOption(option);
    },

    drawLine(data) {
    drawLine(result) {
      var myChart = this.$echarts.init(
        document.getElementById("day_equipment_echarts")
      );

      var xData = [];
      var yData = [];
      data.forEach((item) => {

      result.forEach((item) => {
        xData.push(item.time.substr(5));
        yData.push(item.Coun);
      });
@@ -322,13 +330,19 @@
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: xData,
          axisLine: {
            show: false,
          },
          boundaryGap: false,
          axisTick: {
            show: false,
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: "#F0F0F0",
            },
          },
          axisLabel: {
            color: "#6E6E6E",
          },
        },
        yAxis: {
@@ -354,6 +368,84 @@
      };
      myChart.setOption(option);
    },

    drawPillar(data) {
      var myChart = this.$echarts.init(
        document.getElementById("day_warn_echarts")
      );

      var xData = [];
      var yData = [];

      data.lists.forEach((item) => {
        xData.push(item.time.substr(5));
        var sum = 0;

        Object.values(item).forEach((it) => {
          !isNaN(Number(it)) == true ? (sum += it) : "";
        });

        yData.push(sum);
      });

      var option = {
        color: "#F34A4A",
        tooltip: {
          trigger: "axis",
          axisPointer: {
            label: {
              show: false,
            },
            lineStyle: {
              width: 0,
            },
          },
          formatter: function (parms) {
            var str =
              parms[0].axisValue +
              "</br>" +
              parms[0].marker +
              "事件数：" +
              parms[0].value;
            return str;
          },
          textStyle: {
            color: "#fff",
          },
          backgroundColor: "rgba(0, 0, 0, 0.7)",
          borderWidth: 0,
        },
        xAxis: {
          type: "category",
          data: xData,
          boundaryGap: false,
          axisTick: {
            show: false,
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: "#F0F0F0",
            },
          },
          axisLabel: {
            color: "#6E6E6E",
          },
        },
        yAxis: {
          type: "value",
          show: false,
          boundaryGap: [0, "40%"],
        },
        series: [
          {
            data: yData,
            type: "bar",
          },
        ],
      };
      myChart.setOption(option);
    },
  },
};
</script>