jn_sis_zhfx/src/views/alarmCenter/customStatistics.vue

<template>
  <div>
    <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="stationId"
              clearable
              placeholder="请选择"
              popper-class="select"
              @change="(stationId) => { Windturbines() }"
            >
              <el-option
                v-for="item in ChangZhan"
                :key="item.id"
                :value="item.id"
                :label="item.name"
              ></el-option>
            </el-select>
          </div>
        </div>
        <div class="query-item">
          <div class="lable">开始日期：</div>
          <div class="search-input">
            <el-date-picker
              v-model="startDate"
              type="date"
              placeholder="开始日期"
              popper-class="date-select"
              value-format="YYYY-MM-DD"
            ></el-date-picker>
          </div>
        </div>
        <div class="query-item">
          <div class="lable">结束日期：</div>
          <div class="search-input">
            <el-date-picker
              v-model="endDate"
              type="date"
              placeholder="开始日期"
              popper-class="date-select"
              value-format="YYYY-MM-DD"
            ></el-date-picker>
          </div>
        </div>
        <div class="query-actions">
          <button class="btn green" @click="getTable()">查询</button>
        </div>
      </div>
    </div>
    <div class="table-box">
      <div class="title">自定义报警统计</div>
      <div class="custom-report-items">
        <div class="title" v-for="item in tableData" :key="item" @click="alertDetail(item)">
          <div class="alarmName">{{item.alarmtext}}</div>
          <div class="alarmCount">{{item.sum}}</div>
        </div>
      </div>
    </div>
    <el-dialog
      title="自定义报警统计-图表"
      v-model="dialogShow"
      width="80%"
      top="10vh"
      custom-class="modal dBody"
      :close-on-click-modal="true"
    >
      <div class="dGrid" height="100%">
        <table class="com-table">
          <thead>
            <tr>
              <th>风机</th>
              <th>数量</th>
            </tr>
          </thead>
          <el-scrollbar>
            <tbody>
              <tr v-for="item in dGridData" :key="item">
                <td>{{item.name}}</td>
                <td>{{item.sum}}</td>
              </tr>
            </tbody>
          </el-scrollbar>
        </table>
      </div>
      <div class="dChart" height="100%" id="dChart">
        <!-- <div class="title">报警统计柱状图</div> -->
        <!-- <multiple-hover-bar-chart height="80%" width="90%"></multiple-hover-bar-chart> -->
        <!-- <multiple-hover-bar-chart height="100%" :list="dChartData"></multiple-hover-bar-chart> -->
      </div>
    </el-dialog>
  </div>
</template>
<script>
// import ComTable from "@/components/coms/table/table.vue";
import MultipleHoverBarChart from "../../components/chart/bar/multiple-bar-chart.vue";
import * as echarts from "echarts";
export default {
  name: "customStatistics",
  components: { MultipleHoverBarChart },
  data() {
    let that = this;
    return {
      ChangZhan: [],
      stationId: "MHS_FDC",
      startDate: "",
      endDate: "",
      tableData: [],
      dialogShow: false,
      dGridData: [],
      dChartData: []

      // tableLoading: true
    };
  },
  created() {
    this.ChangZhanVal();
    let end = new Date();
    let start = new Date(end.getTime() - 1 * 24 * 60 * 60 * 1000);
    this.endDate = end.formatDate("yyyy-MM-dd");
    this.startDate = start.formatDate("yyyy-MM-dd");
    this.getTable();
  },
  methods: {
    // 场站
    ChangZhanVal() {
      var that = this;
      that.API.requestData({
        method: "GET",
        baseURL: "http://10.83.66.220:8020/",
        subUrl: "benchmarking/wplist",
        success(res) {
          that.ChangZhan = res.data;
          that.stationId = res.data[0].id;
        }
      });
    },
    getTable() {
      let that = this;
      this.tableLoading = true;
      this.API.requestData({
        timeout: 30000,
        method: "GET",
        baseURL: "http://192.168.1.18:8075/",
        subUrl: "alarm/count/querymap2",
        data: {
          stationid: this.stationId,
          datebegin: this.startDate,
          dateend: this.endDate
        },
        success(res) {
          let tmpArr = [];
          for (var key in res.data) {
            let item = res.data[key];
            item["key"] = key;
            tmpArr.push(item);
          }
          tmpArr.sort(function(a, b) {
            return b["sum"] - a["sum"];
          });
          that.tableData = tmpArr;
        }
      });
    },
    async alertDetail(item) {
      this.dialogShow = true;
      let resData = await this.API.requestData({
        timeout: 30000,
        method: "GET",
        baseURL: "http://192.168.1.18:8075/",
        subUrl: "alarm/count/querybyname2",
        data: {
          stationid: this.stationId,
          datebegin: this.startDate,
          dateend: this.endDate,
          snapid: item["key"]
        }
      });
      let keyValue = resData.data.data;
      const dGridData = [];
      for (let key in keyValue) {
        dGridData.push({ sum: keyValue[key], name: key });
      }
      dGridData.sort(function(a, b) {
        return b.sum - a.sum;
      });
      this.dGridData = dGridData;
      this.alertDetailChart(item);
    },
    async alertDetailChart(item) {
      let resData = await this.API.requestData({
        timeout: 30000,
        method: "GET",
        baseURL: "http://192.168.1.18:8075/",
        subUrl: "alarm/count/lineandproject",
        data: {
          stationid: this.stationId,
          datebegin: this.startDate,
          dateend: this.endDate,
          snapid: item["key"]
        }
      });
      let dataX = [],
        data1 = [],
        data2 = [];
      for (let item of resData.data.data) {
        dataX.push(item["linenum"]);
        data1.push(item["happendsum"]);
        data2.push(item["sum"]);
      }

      let option = {
        color: ["#05bb4c", "#4b55ae", "#fa8c16"],
        title: {
          text: "报警统计柱状图",
          left: "5%"
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow"
          }
        },
        legend: {
          data: ["总数", "发生数量"],
          textStyle: {
            color: "#fff"
          }
        },
        grid: {
          left: "5%",
          right: "6%",
          bottom: "3%",
          containLabel: true
        },
        xAxis: { name: "线路", type: "category", data: dataX },
        yAxis: { name: "数量", type: "value" },
        series: [
          {
            name: "总数",
            type: "bar",
            barWidth: 40,
            barGap: "-100%",
            label: { normal: { show: true, position: "top" } },
            data: data2
          },
          {
            name: "发生数量",
            type: "bar",
            barGap: "-100%",
            barWidth: 40,
            label: { normal: { show: true, position: "inside" } },
            data: data1
          }
        ]
      };
      let chart = echarts.init(document.getElementById("dChart"));
      chart.clear();
      chart.setOption(option);
    }
  }
};
</script>
<style lang="less">
.dGrid {
  height: 70vh;
  width: 30%;
  display: inline-block;
  table {
    tbody {
      height: 65vh;
    }
  }
}
.dChart {
  height: 70vh;
  width: 70%;
  display: inline-block;
  vertical-align: top;
}
.dBody {
  height: 80vh;
}
.title {
  background: rgba(255, 255, 255, 0.1);
  margin-bottom: 8px;
  padding: 1vh;
}

.custom-report-items {
  display: flex;
  flex-wrap: wrap;
  .title {
    height: 80px;
    width: 18.8vw;
    background: fade(@gray, 40);
    color: @gray-l;
    font-size: 1.85vh;
    margin-left: 7px;
    margin-right: 7px;
    margin-top: 7px;
    margin-bottom: 7px;
    cursor: pointer;
    div {
      width: 100%;
      display: block;
      clear: both;
      text-align: center;
      &:first-child {
        margin-bottom: 20px;
      }
    }
  }
}
</style>