sis_zhfx/src/views/NewPages/dj1.vue

<template>
  <div class="dj-1">
    <div class="action-bar">
      <div class="selections mg-b-16">
        <div class="item" @click="tabSelect(0)" :class="{ active: tabIndex == 0 }">风机运行情况信息</div>
        <div class="item" @click="tabSelect(1)" :class="{ active: tabIndex == 1 }">风机日详细信息</div>
        <div class="item" @click="tabSelect(2)" :class="{ active: tabIndex == 2 }">风场玫瑰图</div>
        <div class="item" @click="tabSelect(3)" :class="{ active: tabIndex == 3 }">风机玫瑰图</div>
        <div class="item" @click="tabSelect(4)" :class="{ active: tabIndex == 4 }">风机切入切出分析</div>
      </div>
      <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="wpId" clearable placeholder="请选择" popper-class="select" @change="getWtArray">
                <el-option v-for="item in wpArray" :key="item.id" :value="item.id" :label="item.name" />
              </el-select>
            </div>
          </div>
          <div class="query-item">
            <div class="lable">风机：</div>
            <div class="search-input">
              <el-select v-model="wtId" clearable placeholder="请选择" popper-class="select">
                <el-option v-for="item in wtArray" :key="item.id" :value="item.id" :label="item.name" />
              </el-select>
            </div>
          </div>
          <div class="query-item">
            <div class="lable">日期：</div>
            <div class="search-input">
              <el-date-picker v-model="recorddate" type="date" value-format="YYYY-MM-DD" placeholder="选择日期"
                popper-class="date-select">
              </el-date-picker>
            </div>
          </div>
        </div>
        <div class="query-actions">
          <button class="btn green" @click="search">搜索</button>
        </div>
      </div>
    </div>

    <!-- tab1 -->
    <div v-if="tabIndex == 0" class="tab-1">
      <panel :title="'损失电量分析'" class="mg-b-16">
        <area-bar-chart :height="'23.1481vh'" :bardata="{ legend: [] }" :lineData="lostChartData" :units="lostChartUnit"
          :areaData="LostChartBgColorData" />
      </panel>
      <panel :title="'电量'" class="mg-b-16">
        <multiple-bar-line-chart :height="'16.6667vh'" />
      </panel>
      <div class="table-info">
        <panel class="table-panel" :title="'当日报警记录'" :showLine="false">
          <Table :data="tableData" :canScroll="true" :height="'32.5vh'" />
        </panel>
        <panel class="table-panel" :title="'当日报警记录'" :showLine="false">
          <Table :data="tableData" :canScroll="true" :height="'32.5vh'" />
        </panel>
        <panel class="table-panel" :title="'当日报警记录'" :showLine="false">
          <Table :data="tableData" :canScroll="true" :height="'32.5vh'" />
        </panel>
      </div>
    </div>

    <!-- tab2 -->
    <div v-if="tabIndex == 1" class="tab-2">
      <el-row>
        <el-col :span="15">
          <panel :title="'功率曲线'" class="mg-b-16">
            <marker-line-chart :height="'28vh'" />
          </panel>
          <panel :title="'日发电量信息'" class="mg-b-16 outline" :showLine="false">
            <div class="power-info">
              <div class="info-item" v-for="index in 20" :key="index">
                <div class="text">设备可利用率：</div>
                <div class="value green">115.01</div>
              </div>
            </div>
          </panel>
          <div class="month-info">
            <div class="month-info-left">
              <panel :title="'月发电量信息'" class="mg-b-16 outline" :showLine="false">
                <div class="power-info month-3">
                  <div class="info-item" v-for="index in 15" :key="index">
                    <div class="text">月实际/保证：</div>
                    <div class="value green">115.01</div>
                  </div>
                </div>
              </panel>
            </div>
            <div class="month-info-right">
              <panel :title="'月发电量信息'" class="mg-b-16 outline" :showLine="false">
                <div class="power-info month-2">
                  <div class="info-item" v-for="index in 2" :key="index">
                    <div class="text">月实际/保证：</div>
                    <div class="value green">115.01</div>
                  </div>
                </div>
              </panel>
              <panel :title="'风资源'" class="radar-panel" :icon="'svg-wind-site'">
                <div class="wind-info">
                  <div class="legend mg-r-16">
                    <span class="dot"></span>
                    <span>静风频率为2</span>
                  </div>
                  <direction-radar-chart :width="'60%'" :height="'180px'" />
                </div>
              </panel>
            </div>
          </div>
        </el-col>
        <el-col :span="9">
          <panel class="table-panel outline mg-b-16" :title="'当日报警记录'" :showLine="false">
            <Table :data="tableData" :canScroll="true" :height="'23vh'" />
          </panel>
          <panel class="table-panel outline mg-b-16" :title="'当日报警记录'" :showLine="false">
            <Table :data="tableData" :canScroll="true" :height="'23vh'" />
          </panel>
          <panel class="table-panel outline" :title="'当日报警记录'" :showLine="false">
            <Table :data="tableData" :canScroll="true" :height="'23vh'" />
          </panel>
        </el-col>
      </el-row>
    </div>

    <!-- tab3 -->
    <div v-if="tabIndex == 2" class="tab-3">
      <el-row>
        <el-col :span="8">
          <panel :title="'日最大风速'" class="radar-panel" :icon="'svg-wind-site'">
            <div class="wind-info">
              <div class="legend mg-r-16">
                <span class="dot"></span>
                <span>静风频率为2</span>
              </div>
              <direction-radar-chart :width="'100%'" :height="'350px'" />
            </div>
          </panel>
        </el-col>
        <el-col :span="8">
          <panel :title="'日最大风速'" class="radar-panel" :icon="'svg-wind-site'">
            <div class="wind-info">
              <div class="legend mg-r-16">
                <span class="dot"></span>
                <span>静风频率为2</span>
              </div>
              <direction-radar-chart :width="'100%'" :height="'350px'" />
            </div>
          </panel>
        </el-col>
        <el-col :span="8">
          <panel :title="'日最大风速'" class="radar-panel" :icon="'svg-wind-site'">
            <div class="wind-info">
              <div class="legend mg-r-16">
                <span class="dot"></span>
                <span>静风频率为2</span>
              </div>
              <direction-radar-chart :width="'100%'" :height="'350px'" />
            </div>
          </panel>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <panel :title="'日最大风速'" class="radar-panel" :icon="'svg-wind-site'">
            <div class="wind-info">
              <div class="legend mg-r-16">
                <span class="dot"></span>
                <span>静风频率为2</span>
              </div>
              <direction-radar-chart :width="'100%'" :height="'350px'" />
            </div>
          </panel>
        </el-col>
        <el-col :span="8">
          <panel :title="'日最大风速'" class="radar-panel" :icon="'svg-wind-site'">
            <div class="wind-info">
              <div class="legend mg-r-16">
                <span class="dot"></span>
                <span>静风频率为2</span>
              </div>
              <direction-radar-chart :width="'100%'" :height="'350px'" />
            </div>
          </panel>
        </el-col>
        <el-col :span="8">
          <panel :title="'日最大风速'" class="radar-panel" :icon="'svg-wind-site'">
            <div class="wind-info">
              <div class="legend mg-r-16">
                <span class="dot"></span>
                <span>静风频率为2</span>
              </div>
              <direction-radar-chart :width="'100%'" :height="'350px'" />
            </div>
          </panel>
        </el-col>
      </el-row>
    </div>

    <!-- tab4 -->
    <div v-if="tabIndex == 3" class="tab-4">
      <el-row>
        <el-col :span="8">
          <panel title="日度损失电量分析">
            <dual-pie-chart height="350px" />
          </panel>
        </el-col>
        <el-col :span="8">
          <panel title="日度损失电量分析">
            <dual-pie-chart height="350px" />
          </panel>
        </el-col>
        <el-col :span="8">
          <panel title="日度损失电量分析">
            <dual-pie-chart height="350px" />
          </panel>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <panel title="日度损失电量分析">
            <dual-pie-chart height="350px" />
          </panel>
        </el-col>
        <el-col :span="8">
          <panel title="日度损失电量分析">
            <dual-pie-chart height="350px" />
          </panel>
        </el-col>
        <el-col :span="8">
          <panel title="日度损失电量分析">
            <dual-pie-chart height="350px" />
          </panel>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import AreaBarChart from "../../components/chart/combination/area-bar-chart.vue";
import MultipleBarLineChart from "../../components/chart/combination/multiple-bar-line-chart.vue";
import MarkerLineChart from "../../components/chart/line/marker-line-chart.vue";
import DualPieChart from "../../components/chart/pie/dual-pie-chart.vue";
import DirectionRadarChart from "../../components/chart/radar/direction-radar-chart.vue";
import panel from "../../components/coms/panel/panel.vue";
import Table from "../../components/coms/table/table.vue";
export default {
  components: { panel, AreaBarChart, MultipleBarLineChart, Table, MarkerLineChart, DirectionRadarChart, DualPieChart },
  setup () { },
  data () {
    return {
      tabIndex: 0,
      tableData: {
        column: [
          {
            name: "风机",
            field: "name",
            is_num: false,
            is_light: false,
          },
          {
            name: "描述",
            field: "desc",
            is_num: false,
            is_light: false,
          },
          {
            name: "报警时间",
            field: "date",
            is_num: false,
            is_light: false,
          },
        ],
        data: [
          {
            name: "MG01-01",
            desc: "描述描述描述描述描述描述描述描述描述描述",
            date: "2020-01-01",
          },
        ],
      },

      wpArray: [],
      wpId: "",
      wtArray: [],
      wtId: "",

      recorddate: new Date((new Date().getTime() - 3600 * 1000 * 24)).formatDate("yyyy-MM-dd"),

      lostChartData: [],
      lostChartUnit: [],
      LostChartBgColorData: [],

      options: [
        {
          value: "选项1",
          label: "黄金糕",
        },
        {
          value: "选项2",
          label: "双皮奶",
        },
        {
          value: "选项3",
          label: "蚵仔煎",
        },
        {
          value: "选项4",
          label: "龙须面",
        },
        {
          value: "选项5",
          label: "北京烤鸭",
        },
      ],
      value1: [],
      value2: [],
      value3: [],
      value4: "",
      value5: "",
    };
  },
  methods: {
    // 获取风场
    getWpArray () {
      let that = this;
      that.API.requestData({
        method: "GET",
        subUrl: "powercompare/windfarmAjax",
        success (res) {
          that.wpArray = res.data;
          that.wpId = res.data[0].id;
          that.getWtArray(that.wpId, true);
        }
      });
    },

    // 获取风场
    getWtArray (wpId, keepRequest) {
      let that = this;
      if (wpId) {
        that.API.requestData({
          method: "GET",
          subUrl: "powercompare/windturbineAjax",
          data: {
            wpId
          },
          success (res) {
            that.wtArray = res.data;
            that.wtId = res.data[0].id;
            if (keepRequest) {
              that.getLostChartData();
            }
          }
        });
      } else {
        that.wtArray = [];
        that.wtId = "";
      }
    },

    // 获取损失电量分析图表数据
    getLostChartData () {
      let that = this;
      that.API.requestData({
        method: "POST",
        subUrl: "goodness/findWtRealPowerChar",
        data: {
          wtId: that.wtId,
          recorddate: that.recorddate
        },
        success (res) {
          console.log(111, res.data);
          const keyArray = ["value1", "value2", "value3", "value4"];

          let lostChartData = [[], [], [], []];
          const lostChartUnit = ["实发功率", "保证功率", "风速", "状态"];


          keyArray.forEach((key, keyIndex) => {
            res.data.forEach(ele => {
              lostChartData[keyIndex].push(ele[key]);
            });
          });
          that.lostChartData = lostChartData;
          that.lostChartUnit = lostChartUnit;
          that.getLostChartBgColorData();
        }
      });
    },

    // 获取损失电量分析图表背景颜色
    getLostChartBgColorData () {
      let that = this;
      that.API.requestData({
        method: "POST",
        subUrl: "goodness/getplotBands",
        data: {
          wtId: that.wtId,
          recorddate: that.recorddate
        },
        success (res) {
          console.log(222, res.data);
          let LostChartBgColorData = [];
          res.data.forEach((pEle, pIndex) => {
            LostChartBgColorData.push({
              name: pEle[0].name,
              start: (pIndex ? LostChartBgColorData[pIndex - 1].end : 0),
              end: (pIndex ? LostChartBgColorData[pIndex - 1].end : 0) + ((new Date(pEle[0].time2).getTime() / 1000) - (new Date(pEle[0].time1).getTime() / 1000)),
              color: pEle[0].itemStyle.color
            });
          });
          console.log(333, LostChartBgColorData);
          that.LostChartBgColorData = LostChartBgColorData;
        }
      });
    },

    tabSelect (state) {
      this.tabIndex = state;
    },

    // 搜索
    search () {
      if (this.tabIndex === 0) {
        this.getLostChartData();
      }
    }
  },
  created () {
    for (let i = 1; i < 50; i++) {
      this.tableData.data.push(JSON.parse(JSON.stringify(this.tableData.data[0])));
    }
    this.getWpArray();
  },
};
</script>

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

    .selections {
      flex: 1 0 auto;
      display: flex;

      .item {
        flex: 0 0 164px;
        text-align: center;
        height: 33px;
        line-height: 33px;
        margin-right: 8px;
        color: @font-color;
        font-size: @fontsize-s;
        background: fade(@gray, 20);
        border: 1px solid fade(@gray, 20);

        &:hover,
        &.active {
          background: fade(@green, 20);
          border: 1px solid @green;
          color: @green;
          cursor: pointer;
        }
      }
    }
  }

  .outline {
    outline: 1px solid fade(@gray, 50);
  }

  .com-panel .panel-header {
    margin-bottom: 0px;
  }

  .table-info {
    display: flex;

    .table-panel {
      flex: 1 0 calc(100% / 3 - 8px);
      outline: 1px solid fade(@gray, 50);
      height: 100%;
      & + .table-panel {
        margin-left: 8px;
      }
    }
  }

  .tab-2 {
    .power-info {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;

      &.month-3 {
        .info-item {
          flex: 0 0 calc(100% / 3 - 6px);
          &:nth-child(-n + 5) {
            margin-top: 8px;
          }

          &:nth-child(-n + 3) {
            margin-top: 0px;
          }
        }
      }
      &.month-2 {
        .info-item {
          flex: 0 0 calc(100% / 2 - 4px);
          &:nth-child(-n + 5) {
            margin-top: 8px;
          }

          &:nth-child(-n + 2) {
            margin-top: 0px;
          }
        }
      }

      .info-item {
        display: flex;
        align-items: center;

        flex: 0 0 calc(100% / 5 - 8px);
        background: fade(@gray, 20);
        height: 4.6296vh;
        line-height: 4.6296vh;
        margin-top: 8px;

        &:nth-child(-n + 5) {
          margin-top: 0px;
        }

        .text {
          font-size: 12px;
          flex: 0 0 110px;
          text-align: right;
          margin-right: 24px;
          color: @gray-l;
        }

        .value {
          font-size: 16px;
        }
      }
    }

    .month-info {
      display: flex;

      .month-info-left {
        flex: 0 0 705px;
        margin-right: 10px;
      }

      .month-info-right {
        flex: 1 0 auto;
      }
    }

    .moon-other {
      flex: 1 0 auto;
    }

    .radar-panel {
      height: 20.5vh;

      .panel-body {
        height: 100%;
      }
    }

    .wind-info {
      display: flex;

      .legend {
        font-size: 12px;
        flex: 0 0 140px;
        height: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 32px;
        margin-bottom: 16px;

        .dot {
          width: 7px;
          height: 7px;
          background: @green;
          display: inline-block;
          margin-right: 8px;
        }
      }
    }
  }

  .tab-3 {
    .wind-info {
      position: relative;

      .legend {
        position: absolute;
        left: 32px;
        top: 32px;
        font-size: 12px;
        flex: 0 0 140px;
        height: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 32px;
        margin-bottom: 16px;

        .dot {
          width: 7px;
          height: 7px;
          background: @green;
          display: inline-block;
          margin-right: 8px;
        }
      }
    }
  }

  .tab-4 {
    .panel-body {
      padding: 16px;
    }
  }
}
</style>