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(3)" :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="value1" clearable placeholder="请选择" popper-class="select">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
              </el-select>
            </div>
          </div>
          <div class="query-item">
            <div class="lable">风机：</div>
            <div class="search-input">
              <el-select v-model="value2" multiple placeholder="请选择" popper-class="select">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
              </el-select>
            </div>
          </div>
          <div class="query-item">
            <div class="lable">日期：</div>
            <div class="search-input">
              <el-date-picker v-model="value4" type="date" placeholder="选择日期" popper-class="date-select"> </el-date-picker>
            </div>
          </div>
        </div>
        <div class="query-actions">
          <button class="btn green">搜索</button>
        </div>
      </div>
    </div>
    <!-- tab2 -->
    <div v-if="tabIndex == 0" class="tab-1">
      <panel :title="'损失电量分析'" class="mg-b-16">
        <area-bar-chart :height="'23.1481vh'" />
      </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>

    <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>

    <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",
          },
        ],
      },
      options: [
        {
          value: "选项1",
          label: "黄金糕",
        },
        {
          value: "选项2",
          label: "双皮奶",
        },
        {
          value: "选项3",
          label: "蚵仔煎",
        },
        {
          value: "选项4",
          label: "龙须面",
        },
        {
          value: "选项5",
          label: "北京烤鸭",
        },
      ],
      value1: [],
      value2: [],
      value3: [],
      value4: "",
      value5: "",
    };
  },
  methods: {
    tabSelect(state) {
      this.tabIndex = state;
    },
  },
  created() {
    for (let i = 1; i < 50; i++) {
      this.tableData.data.push(JSON.parse(JSON.stringify(this.tableData.data[0])));
    }
  },
};
</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>