hb_sis_zhfx/src/views/NewPages/alarm-center-2.vue

<template>
  <div class="alarm-center-1">
    <div class="action-bar">
      <div class="query mg-b-16">
        <div class="query-items">
          <div class="query-item">
            <div class="lable">风场：</div>
            <div class="search-input">
              <el-select
                v-model="wpvalue"
                clearable
                placeholder="请选择"
                popper-class="select"
              >
                <el-option
                  v-for="item in wpoptions"
                  :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="startdate"
                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="enddate"
                type="date"
                placeholder="选择日期"
                popper-class="date-select"
              >
              </el-date-picker>
            </div>
          </div>
        
        </div>
        <div class="query-actions">
          <button class="btn green" @click="searchData">搜索</button>
          <button class="btn green">导出</button>
        </div>
      </div>
    </div>
    <panel-3 class="table-panel">
      <table-2 :data="tableData" :height="'88vh'">
        <template v-for="(item, i) in column" :key="i" #[item]="scope">
          <div class="bar">
            <div
              class="bar-percent"
              :style="{
                width:
                  (scope.data.count &&
                    scope.data.count / (scope.data.count + scope.data.time)) *
                    100 +
                  'px',
              }"
            ></div>
            <span class="value">{{
              scope.data.count && scope.data.count
            }}</span>
          </div>
          <div class="bar">
            <div
              class="bar-percent"
              :style="{
                width:
                  (scope.data.count &&
                    scope.data.time / (scope.data.count + scope.data.time)) *
                    100 +
                  'px',
              }"
            ></div>
            <span class="value">{{ scope.data.count && scope.data.time }}</span>
          </div>
        </template>
      </table-2>
    </panel-3>
  </div>
</template>

<script>
import Panel3 from "../../components/coms/panel/panel3.vue";
import Table2 from "../../components/coms/table/table2.vue";
export default {
  components: { Panel3, Table2 },
  data() {
    return {
      wpvalue: "",
      wpoptions: "",
      options: [],
      cascaderOptions: [],
      cascaderSel: [],
      column: [
        "风机偏航过程震动",
        "齿轮箱轴承温升超过40度",
        "三相电流不平衡",
        "断轴或联轴器打滑",
        "风速突变",
      ],
      columnObj: [
        {
          name: "风机编号",
          field: "name",
        },
        {
          name: "风机偏航过程震动",
          field: "风机偏航过程震动",
          align: "left",
          slot: true,
        },
        {
          name: "齿轮箱轴承温升超过40度",
          field: "齿轮箱轴承温升超过40度",
          align: "left",
          slot: true,
        },
        {
          name: "三相电流不平衡",
          field: "三相电流不平衡",
          align: "left",
          slot: true,
        },
        {
          name: "断轴或联轴器打滑",
          field: "断轴或联轴器打滑",
          align: "left",
          slot: true,
        },
        {
          name: "风速突变",
          align: "left",
          field: "风速突变",
          slot: true,
        },
      ],
      startdate: new Date(
        new Date(new Date().setDate(new Date().getDate() - 1))
      ).formatDate("yyyy-MM-dd"),
      enddate: new Date(new Date()).formatDate("yyyy-MM-dd"),
      tableData: {
        column: [
          {
            name: "风机编号",
            field: "name",
          },
          {
            name: "主轴温度温差大于8度",
            field: "v1",
            align: "left",
            slot: true,
          },
          {
            name: "浆叶角过小",
            field: "v2",
            align: "left",
            slot: true,
          },
        ],
        data: [
          {
            name: "MG01_01",
            v1: {
              count: 12,
              time: 0,
            },
          },
        ],
      },
    };
  },
  created() {
    this.search();
    this.searchTree();
  },
  methods: {
    tabSelect(tab) {},
    async search() {
      const { data } = await this.API.requestData({
        subUrl: "powercompare/windfarmAjax",
      });
      console.warn(data);
      this.wpoptions = data.data;
      this.wpvalue = data.data[0].id;
      this.searchData();
    },
    async searchTree() {
      const { data } = await this.API.requestData({
        baseURL: "http://192.168.10.18:8075/",
        subUrl: "Stoptype/treeType",
      });
      console.warn(data);
      this.cascaderOptions = data.data;
      let arr = [];
      let columnObj = [
        {
          name: "风机编号",
          field: "name",
        },
      ];
      data.data.forEach((e) => {
        let obj = {
          name: e.name,
          field: e.name,
          align: "left",
          slot: true,
        };
        columnObj.push(obj);
        arr.push(e.name);
      });
      this.column = arr;
      this.columnObj = columnObj;
    },
    async searchData() {
      const { data } = await this.API.requestData({
        baseURL: "http://192.168.10.18:8075/",
        subUrl: "shutdown/list",
        data: {
          stId: this.wpvalue,
          endDate: new Date(this.startdate).formatDate("yyyy-MM-dd"),
          startDate: new Date(this.enddate).formatDate("yyyy-MM-dd"),
        },
      });
      console.warn(data);
      ////////
      const resData = data.data;
      // const resData =this.resdata;
      const column = this.columnObj;
      let dataAll = []; // 总数据集合
      resData.forEach((e) => {
        let obj = {
          name: Object.keys(e)[0],
        };
        let wpid = Object.keys(e)[0];
        e[wpid].forEach((k) => {
          column.forEach((c) => {
            if (k.type == c.name) {
              let obj1 = {
                count: k.count,
                time: k.time,
              };
              obj[k.type] = obj1;
            }
          });
        });
        dataAll.push(obj);
      });
      console.info(dataAll);
      this.tableData.column = column;
      this.tableData.data = dataAll;
    },
  },
};
</script>

<style lang="less">
.alarm-center-1 {
  .action-bar {
    display: flex;

    .query {
      justify-content: flex-start;
    }
  }

  .table-panel {
    width: 100%;
    background: transparent;
    padding: 0;

    .bar {
      display: flex;
      align-items: center;
      height: 16px;
      margin: 8px 0;

      .bar-percent {
        height: 100%;
        background: @green;
        margin-right: 8px;
      }
    }
  }
}
</style>