hb_sis_zhfx/src/views/NewPages/alarm-center-1.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 class="query-item">
            <div class="lable">规则：</div>
            <el-cascader
              style="width: 240px"
              size="mini"
              popper-class="search-select"
              :options="cascaderOptions"
              :props="cascaderProps"
              v-model="cascaderSel"
              collapse-tags
              :clearable="true"
            ></el-cascader>
          </div>
        </div>
        <div class="query-actions">
          <button class="btn green" @click="searchData">搜索</button>
          <button class="btn green" @click="searchTree">筛选</button>
        </div>
      </div>
    </div>
    <panel-3 class="table-panel">
      <table-3 :data="tableData" :height="'85vh'">
        <template v-for="(item, i) in column" :key="i" #[item]="scope">
          <div class="bar">
            <div
              class="bar-percent"
              @click="showChart(scope)"
              :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"
              @click="showChart(scope)"
              :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-3>
    </panel-3>
    <el-dialog
      :title="dialogTitle"
      v-model="dialogVisible"
      width="70%"
      top="10vh"
      custom-class="modal"
      :close-on-click-modal="false"
    >
    <div class="searchForm">
       <el-select
        @change="searchTime(selectValue)"
        class="inputs"
        v-model="selectValue"
        placeholder="请选择"
      >
        <el-option
          v-for="item in timeoptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <div class="choose">
        <button class="btn"
          @click="switchChange(60)"
        >
          等间隔
        </button>
        <button class="btn"
          @click="switchChange(0)"
        >
          原始数据
        </button>
      </div>
    </div>
     
      <multiple-y-line-chart-normal
        height="500px"
        :list="Analysis"
        :yAxises="AnalysisYAxises"
        :showLegend="true"
      />
    </el-dialog>
  </div>
</template>

<script>
import Panel3 from "../../components/coms/panel/panel3.vue";
import Table3 from "../../components/coms/table/table3.vue";
import MultipleYLineChartNormal from "./multiple-y-line-chart-normal.vue";
export default {
  components: { Panel3, Table3, MultipleYLineChartNormal },
  data() {
    return {
      dialogTitle: "",
      dialogVisible: false,
      switchFlag: false,
      chooseTime: [],
      wpvalue: "",
      wpid: "",
      wtId:"",
      descName:"",
      AnalysisName: "",
      AnalysisUnit: "",
      Analysis: [
        {
          title: "",
          yAxisIndex: 0, // 使用单位
          value: [],
        },
      ],
      AnalysisYAxises: [
        {
          name: "",
          min: "",
          max: "",
          unit: "",
          position: "left",
        },
        {
          name: "",
          min: "",
          max: "",
          unit: "",
          position: "right",
        },
      ],
      selectValue: "60",
      timeoptions: [
        {
          value: "60",
          label: "一分钟",
        },
        {
          value: "300",
          label: "五分钟",
        },
        {
          value: "600",
          label: "十分钟",
        },
        {
          value: "1800",
          label: "三十分钟",
        },
        {
          value: "3600",
          label: "一小时",
        },
        {
          value: "86400",
          label: "一天",
        },
      ],
      wpoptions: "",
      options: [],
      cascaderOptions: [],
      cascaderSel: [],
      cascaderProps: { multiple: true },
      column: [
        "风机偏航过程震动",
        "齿轮箱轴承温升超过40度",
        "三相电流不平衡",
        "断轴或联轴器打滑",
        "风速突变",
      ],
      columnObj: [
        {
          name: "风机编号",
          field: "name",
          width: "100px",
          minWidth: "100px",
        },
        {
          name: "风机偏航过程震动",
          field: "风机偏航过程震动",
          align: "left",
          slot: true,
          sortable: true,
          minWidth: "200px",
        },
        {
          name: "齿轮箱轴承温升超过40度",
          field: "齿轮箱轴承温升超过40度",
          align: "left",
          slot: true,
          sortable: true,
          minWidth: "200px",
        },
        {
          name: "三相电流不平衡",
          field: "三相电流不平衡",
          align: "left",
          slot: true,
          sortable: true,
          minWidth: "200px",
        },
        {
          name: "断轴或联轴器打滑",
          field: "断轴或联轴器打滑",
          align: "left",
          slot: true,
          sortable: true,
          minWidth: "200px",
        },
        {
          name: "风速突变",
          align: "left",
          field: "风速突变",
          slot: true,
          sortable: true,
          minWidth: "200px",
        },
      ],
      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.$nextTick(() => {
      this.search();
    });
  },
  methods: {
    //对比
    showChart(column) {
      let that = this;
      that.dialogTitle = column.column.name;
      that.wtId = column.row.name;
      that.descName = column.column.name;
      // console.log('column:',column)
      // console.log('name:',column.column.name)
      // console.log('wtid:',column.row.name)
      // console.log('starttime:',new Date(that.startdate).getTime())
      // console.log('endtime:',new Date(that.enddate).getTime())
      that.dialogVisible = true;
      that.requestDetailData(
        that.wpvalue,
        that.startdate,
        that.enddate,
        0,
        column.row.name,
        column.column.name
      );
    },
    requestDetailData(station, startTs, endTs, interval, wtId, name) {
      let that = this;
      that.API.requestData({
        method: "GET",
        subUrl: "/analysis/detail",
        data: {
          // station: that.wpvalue,
          // startTs: new Date(that.startdate).getTime(),
          // endTs: new Date(that.enddate).getTime(),
          // // interval: 360,
          // interval:1,
          // wtId: column.row.name,
          // name: column.column.name,
          station: station,
          startTs: new Date(startTs).getTime(),
          endTs: new Date(endTs).getTime(),
          interval: interval,
          wtId: wtId,
          name: name,
        },
        success(res) {
          console.log("resAnalysis:", res);
          let anKey = ["doubleValue"];
          if (res.data.length == 1) {
            let yaxises = [
              {
                name: "",
                min: 0,
                max: null,
                unit: "",
                position: "left",
              },
            ];
            // yaxises.name = res.data[0].name;
            yaxises.unit = res.data[0].unit;
            that.AnalysisYAxises = yaxises;
            console.log("AnalysisYAxises:", that.AnalysisYAxises);
            let aKey1 = ["doubleValue"];
            let aList1 = [
              {
                title: "",
                // yAxisIndex:"",
                smooth: true,
                value: [],
              },
            ];
                      aKey1.forEach((keyEle,keyIndex)=>{
            // console.log('keyindex:',res.data[keyIndex]);
            aList1[keyIndex].title = res.data[keyIndex].name;
            res.data[keyIndex].data.forEach((rEle)=>{
              aList1[keyIndex].value.push({
                text:new Date(rEle.ts).formatDate("hh:mm"),
                value:rEle.doubleValue
              })
            })
          })
            // aKey1.forEach((keyEle, keyIndex) => {
            //   res.data.forEach((rEle) => {
            //     rEle.data.forEach((tEle) => {
            //       alist1[keyIndex].yAxisIndex = keyIndex;
            //       aList1[keyIndex].title = res.data[0].name;
            //       aList1[keyIndex].value.push({
            //         text: new Date(tEle.ts).formatDate("hh:mm"),
            //         value: tEle[keyEle],
            //       });
            //     });
            //   });
            // });
            that.Analysis = aList1;
            console.log("that.Analysis1:", that.Analysis);
          } else if (res.data.length == 2) {
            let aKey2 = ["doubleValue", "doubleValue"];
            let aList2 = [
              {
               title: "", 
              //  yAxisIndex:"",
                smooth: true,
                value: [],
              },
              {
                title: "",
                // yAxisIndex:"",
                smooth: true,
                value: [],
              },
            ];
            let yaxises1 = [
              {
                name: "",
                min: 0,
                max: null,
                unit: "",
                position: "left",
              },
              {
                name: "",
                min: 0,
                max: null,
                unit: "",
                position: "right",
              },
            ];
            yaxises1.forEach((aEle, aIndex) => {
              res.data.forEach((rEle) => {
                //  console.log('rEleName:',rEle.name)
                //   console.log('rEle.unit:',rEle.unit)
                // aEle.name = rEle.name;
                aEle.unit = rEle.unit;
              });
            });
            that.AnalysisYAxises = yaxises1;
            console.log("AnalysisYAxises:", that.AnalysisYAxises);
                    aKey2.forEach((keyEle,keyIndex)=>{
            // console.log('keyindex:',res.data[keyIndex]);
            aList2[keyIndex].title = res.data[keyIndex].name;
            res.data[keyIndex].data.forEach((rEle)=>{
              aList2[keyIndex].value.push({
                text:new Date(rEle.ts).formatDate("hh:mm"),
                value:rEle.doubleValue
              })
            })
          })
            // res.data.forEach((rEle,rIndex)=>{
            //   console.log('rele:',rEle)
            // })
            // aKey2.forEach((keyEle, keyIndex) => {
            //   res.data.forEach((rEle) => {
            //     // alist2[keyIndex].yAxisIndex = keyIndex;
            //     aList2[keyIndex].title = res.data[keyIndex].name;
            //     rEle.data.forEach((tEle,tIndex) => {
            //         console.log('res.data[keyIndex].data[tIndex].doubleValue2:',res.data)
            //       aList2[keyIndex].value.push({
            //         text: new Date(tEle.ts).formatDate("hh:mm"),
            //         // value: tEle[keyEle],
            //         // value:res.data[keyIndex].data[tIndex].doubleValue
                  
            //       });
            //     });
            //   });
            // });

            that.Analysis = aList2;
            console.log("that.Analysis2:", that.Analysis);
          } else if (res.data.length == 4) {
            let aKey4 = [
              "doubleValue",
              "doubleValue",
              "doubleValue",
              "doubleValue",
            ];
            let aList4 = [
              {
                title: "",
                // yAxisIndex:"",
                smooth: true,
                value: [],
              },
              {
                title: "",
                // yAxisIndex:"",
                smooth: true,
                value: [],
              },
              {
                title: "",
                // yAxisIndex:"",
                smooth: true,
                value: [],
              },
              {
                title: "",
                // yAxisIndex:"",
                smooth: true,
                value: [],
              },
            ];
            let yaxises2 = [
              {
                name: "",
                min: 0,
                max: null,
                unit: "",
                position: "left",
              },
              {
                name: "",
                min: 0,
                max: null,
                unit: "",
                position: "right",
              },
            ];
            yaxises2.forEach((aEle, aIndex) => {
              res.data.forEach((rEle) => {
                //  console.log('rEleName:',rEle.name)
                //   console.log('rEle.unit:',rEle.unit)
                // aEle.name = rEle.name;
                aEle.unit = rEle.unit;
              });
            });
            that.AnalysisYAxises = yaxises2;
            console.log("AnalysisYAxises:", that.AnalysisYAxises);
          aKey4.forEach((keyEle,keyIndex)=>{
            // console.log('keyindex:',res.data[keyIndex]);
            aList4[keyIndex].title = res.data[keyIndex].name;
            res.data[keyIndex].data.forEach((rEle)=>{
              aList4[keyIndex].value.push({
                text:new Date(rEle.ts).formatDate("hh:mm"),
                value:rEle.doubleValue
              })
            })
          })
            // aKey4.forEach((keyEle, keyIndex) => {
            //   res.data.forEach((rEle) => {
            //     // aList4[keyIndex].yAxisIndex = keyIndex;
            //     aList4[keyIndex].title = res.data[keyIndex].name;
            //     rEle.data.forEach((tEle,tIndex) => {
            //         console.log('res.data[keyIndex].data[tIndex].doubleValue4:',res.data)
            //       aList4[keyIndex].value.push({
            //         text: new Date(tEle.ts).formatDate("hh:mm"),
            //         // value: tEle[keyEle],
            //         // value:res.data[keyIndex].data[tIndex].doubleValue
            //       });
            //     });
            //   });
            // });
            that.Analysis = aList4;
            console.log("that.Analysis4:", that.Analysis);
          }else if (res.data.length == 0) {
             that.dialogVisible = false;
                that.BASE.showMsg({
          type: "warning",
          msg: "暂无数据",
        });
          }

        },
      });
    },
    //切换数据类型
    switchChange(interval) {
      if(interval == 0){
        this.requestDetailData(this.wpvalue,this.startdate,this.enddate,0,this.wtId,this.descName)
      }
      else if(interval == 60){
        this.requestDetailData(this.wpvalue,this.startdate,this.enddate,60,this.wtId,this.descName)
      }
      // this.switchFlag = !this.switchFlag;
      // this.selectValue = "60";
      // this.searchTime();
      // const loading = this.$loading({
      //   lock: true,
      //   text: "数据加载中",
      //   spinner: "el-icon-loading",
      //   background: "rgba(0, 0, 0, 0.7)",
      // });
      // setTimeout(() => {
      //   loading.close();
      // }, 1000);
    },
    searchTime(values) {
      console.log("values:", values);
      this.requestDetailData(this.wpvalue,this.startdate,this.enddate,values,this.wtId,this.descName)
      // let times = [];
      // this.chooseTime.forEach((item) => {
      //   times.push(dayjs(item).valueOf());
      // });
      // times.length > 0
      //   ? this.switchFlag
      //     ? this.$emit("original-data", times)
      //     : this.$emit("search-data", times, Number(this.selectValue))
      //   : this.$message({
      //       showClose: true,
      //       message: "请选择查询日期",
      //       center: true,
      //       type: "error",
      //     });
      // if (values) {
      //     this.$message({
      //         showClose: true,
      //         center: true,
      //         message: '下载中'
      //     });
      //     setTimeout(() => {
      //         this.export()
      //     }, 2000)
      // }
    },
    tabSelect(tab) {},

    async search() {
      const { data } = await this.API.requestData({
        subUrl: "powercompare/windfarmAjax",
      });
      this.wpoptions = data.data;
      this.wpvalue = data.data[0].id;
      this.searchData();
    },

    async searchTree() {
      let arr = [];
      let columnObj = [
        {
          name: "风机编号",
          field: "name",
          minWidth: "100px",
        },
      ];
      this.cascaderSel.forEach((e) => {
        let obj = {
          name: e[1],
          field: e[1],
          align: "left",
          slot: true,
          sortable: true,
          minWidth: "200px",
        };
        columnObj.push(obj);

        arr.push(e[1]);
      });
      this.columnObj = columnObj;
      this.column = arr;
      this.searchData();
    },

    async searchData() {
      const { data } = await this.API.requestData({
        baseURL: "http://192.168.1.18:8075/",
        subUrl: "alarm/count/query/new",
        data: {
          stationid: this.wpvalue,
          startdate: new Date(this.startdate).formatDate("yyyy-MM-dd"),
          enddate: new Date(this.enddate).formatDate("yyyy-MM-dd"),
        },
      });
      ////////
      const resData = data.data;
      // console.log("resData:", resData);
      // 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];
        this.wpid = wpid;

        e[wpid].forEach((k) => {
          column.forEach((c) => {
            if (k.alertText == c.name) {
              let obj1 = {
                count: k.count,
                time: k.time,
              };
              obj[k.alertText] = obj1;
            }
          });
        });
        dataAll.push(obj);
      });
      //  console.log('wpid:',this.wpid)
      this.tableData.column = column;
      // console.log('column:',column)
      this.tableData.data = dataAll;
      // console.log('dataAll:',dataAll)
      ///////////////////// 获取规则list
      const map = {};
      var windNum = [];
      for (let i in resData) {
        for (let k in resData[i]) {
          map[k] = resData[i][k];
        }
      }
      // nmap为新的map 整理数据结构
      const nmap = {};
      for (let kv in map) {
        var nchildMap = {};
        var childrenMap = map[kv];
        for (var ckv in childrenMap) {
          var cckey = childrenMap[ckv].alertText;
          var ccvalue = childrenMap[ckv];
          nchildMap[cckey] = ccvalue;
        }
        nmap[kv] = nchildMap;
      }
      windNum = Object.keys(nmap);
      var cascaderOptions = [];
      var root = {}; // 原始根节点
      var clumnsOnes = nmap[windNum[0]];
      for (let k in clumnsOnes) {
        let f = clumnsOnes[k].relatePartsText
          ? clumnsOnes[k].relatePartsText
          : "其他";
        let fvalue = clumnsOnes[k].relateParts ? clumnsOnes[k].relateParts : "";

        if (root[f]) {
          // 已经存在此子节点
          if (!root[f].children[k]) {
            // 不存在子节点
            root[f].children[k] = {};
            root[f].children[k].value = root[f].children[k].label = k;
            root[f].fobj.children.push(root[f].children[k]);
          }
        } // 不存在子节点
        else {
          root[f] = {};
          // root[f].value = fvalue;
          // root[f].label = f;
          root[f].children = {};
          root[f].children[k] = {};
          root[f].children[k].value = root[f].children[k].label = k;

          // 将对象放入 cascaderOptions
          let childrenArray = [];
          childrenArray.push(root[f].children[k]);
          let fobj = {};
          fobj.value = fvalue;
          fobj.label = f;
          fobj.children = childrenArray;
          cascaderOptions.push(fobj);
          root[f].fobj = fobj;
        }
      }
      // console.log("cascaderOptions:", cascaderOptions);
      this.cascaderOptions = cascaderOptions;
    },
  },
};
</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;
      }
    }
  }
  .searchForm{
    display: flex;
    margin-left: 36px;
    .inputs{
      width: 15%;
    margin-right: 18px;
    }
  }
}
</style>