sis_zhfx/src/views/NewPages/ztfx.vue

<template>
  <div class="ztfx">
    <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-date-picker
                v-model="value4"
                type="date"
                placeholder="选择日期"
                popper-class="date-select"
              >
              </el-date-picker>
            </div>
          </div>
          <div class="query-item">
            <div class="search-input select-btn">
              <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>
      </div>
    </div>
    <el-row :gutter="20" class="table-panel">
      <el-col :span="12">
        <panel :title="'月度'" :showLine="false">
          <div class="table">
            <table style="width:100%;" border="0" cellspacing="0">
              <thead>
                <tr>
                  <th rowspan="2" class="type1" style="width:5vh;"></th>
                  <th rowspan="2" class="type1" style="width:6vh;">
                    故障损失电量
                  </th>
                  <th rowspan="2" class="type1" style="width:6vh;">
                    故障损失电量
                  </th>
                  <th rowspan="2" class="type1" style="width:6vh;">
                    故障损失电量
                  </th>
                  <th rowspan="2" class="type1" style="width:6vh;">
                    故障损失电量
                  </th>
                  <th rowspan="2" class="type1" style="width:6vh;">
                    故障损失电量
                  </th>
                  <th rowspan="2" class="type1" style="width:6vh;">
                    故障损失电量
                  </th>
                  <th rowspan="2" class="type1" style="width:6vh;">
                    故障损失电量
                  </th>
                  <th rowspan="2" class="type1" style="width:6vh;">
                    故障损失电量
                  </th>
                  <th rowspan="2" class="type1" style="width:6vh;">
                    故障损失电量
                  </th>
                  <th rowspan="2" class="type1" style="width:6vh;">
                    故障损失电量
                  </th>
                  <th rowspan="2" class="type1" style="width:6vh;">
                    故障损失电量
                  </th>
                  <th rowspan="2" class="type1" style="width:6vh;">
                    故障损失电量
                  </th>
                </tr>
              </thead>
            </table>
            <el-scrollbar>
              <div style=" ">
                <table
                  style="width:100%;text-align:center;"
                  border="0"
                  cellspacing="0"
                >
                  <tbody>
                    <tr>
                      <td style="width:5vh;">
                        本期
                      </td>
                      <td class="td-item">
                        0.59
                      </td>
                      <td class="td-item">
                        0.59
                        <span class="svg-icon svg-icon-green">
                          <svg-icon svgid="svg-arrow-up-1" />
                        </span>
                      </td>
                      <td class="td-item">
                        0.59
                      </td>
                      <td class="td-item">
                        0.59
                      </td>
                      <td class="td-item">
                        0.59
                      </td>
                      <td class="td-item">
                        0.59
                      </td>
                      <td class="td-item">
                        0.59
                      </td>
                      <td class="td-item">
                        0.59
                      </td>
                      <td class="td-item">
                        0.59
                      </td>
                      <td class="td-item">
                        0.59
                      </td>
                      <td class="td-item">
                        0.59
                      </td>
                      <td class="td-item">
                        0.59
                      </td>
                    </tr>
                    <tr>
                      <td style="width:5vh;">
                        当期
                      </td>
                      <td class="td-item">
                        0.59
                      </td>
                      <td class="td-item">
                        0.59
                        <span class="svg-icon svg-icon-yellow">
                          <svg-icon svgid="svg-arrow-dpwn-1" />
                        </span>
                      </td>
                      <td class="td-item">
                        0.59
                      </td>
                      <td class="td-item">
                        0.59
                      </td>
                      <td class="td-item">
                        0.59
                      </td>
                      <td class="td-item">
                        0.59
                      </td>
                      <td class="td-item">
                        0.59
                      </td>
                      <td class="td-item">
                        0.59
                      </td>
                      <td class="td-item">
                        0.59
                      </td>
                      <td class="td-item">
                        0.59
                      </td>
                      <td class="td-item">
                        0.59
                      </td>
                      <td class="td-item">
                        0.59
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </el-scrollbar>
          </div>
        </panel>
      </el-col>
      <el-col :span="12">
        <panel :title="'年度'" :showLine="false">
          <div class="table">
            <table style="width:100%;" border="0" cellspacing="0">
              <thead>
                <tr>
                  <th rowspan="2" class="type1" style="width:6vh;">
                    故障损失电量
                  </th>
                  <th rowspan="2" class="type1" style="width:6vh;">
                    故障损失电量
                  </th>
                  <th rowspan="2" class="type1" style="width:6vh;">
                    故障损失电量
                  </th>
                  <th rowspan="2" class="type1" style="width:6vh;">
                    故障损失电量
                  </th>
                  <th rowspan="2" class="type1" style="width:6vh;">
                    故障损失电量
                  </th>
                  <th rowspan="2" class="type1" style="width:6vh;">
                    故障损失电量
                  </th>
                  <th rowspan="2" class="type1" style="width:6vh;">
                    故障损失电量
                  </th>
                  <th rowspan="2" class="type1" style="width:6vh;">
                    故障损失电量
                  </th>
                  <th rowspan="2" class="type1" style="width:6vh;">
                    故障损失电量
                  </th>
                  <th rowspan="2" class="type1" style="width:6vh;">
                    故障损失电量
                  </th>
                  <th rowspan="2" class="type1" style="width:6vh;">
                    故障损失电量
                  </th>
                  <th rowspan="2" class="type1" style="width:6vh;">
                    故障损失电量
                  </th>
                  <th rowspan="2" class="type1" style="width:6vh;">
                    故障损失电量
                  </th>
                </tr>
              </thead>
            </table>
            <el-scrollbar>
              <div style=" ">
                <table
                  style="width:100%;text-align:center;"
                  border="0"
                  cellspacing="0"
                >
                  <tbody>
                    <tr v-for="index of 2" :key="index">
                      <td class="td-item">
                        0.59
                      </td>
                      <td class="td-item">
                        0.59
                        <span class="svg-icon svg-icon-yellow">
                          <svg-icon svgid="svg-arrow-dpwn-1" />
                        </span>
                      </td>
                      <td class="td-item">
                        0.59
                      </td>
                      <td class="td-item">
                        0.59
                      </td>
                      <td class="td-item">
                        0.59
                      </td>
                      <td class="td-item">
                        0.59
                      </td>
                      <td class="td-item">
                        0.59
                      </td>
                      <td class="td-item">
                        0.59
                      </td>
                      <td class="td-item">
                        0.59
                      </td>
                      <td class="td-item">
                        0.59
                      </td>
                      <td class="td-item">
                        0.59
                      </td>
                      <td class="td-item">
                        0.59
                      </td>
                      <td class="td-item">
                        0.59
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </el-scrollbar>
          </div>
        </panel>
      </el-col>
    </el-row>
    <el-row :gutter="20" class="table-complex">
      <el-col :span="12">
        <div class="table">
          <table style="width:100%;" border="0" cellspacing="0">
            <thead>
              <tr>
                <th rowspan="2" class="type1" style="width:50px;"></th>
                <th colspan="2" class="type1" style="width:205px;">麻黄山</th>
                <th colspan="2" class="type1" style="width:205px;">牛首山</th>
                <th colspan="2" class="type1" style="width:205px;">青山</th>
                <th colspan="2" class="type1" style="width:205px;">石板泉</th>
                <th colspan="2" class="type1" style="width:205px;">香山</th>
              </tr>
              <tr>
                <th style="width:105px;">当月</th>
                <th style="width:105px;">同期</th>
                <th style="width:105px;">当月</th>
                <th style="width:105px;">同期</th>
                <th style="width:105px;">当月</th>
                <th style="width:105px;">同期</th>
                <th style="width:105px;">当月</th>
                <th style="width:105px;">同期</th>
                <th style="width:105px;">当月</th>
                <th style="width:105px;">同期</th>
              </tr>
            </thead>
          </table>
          <el-scrollbar>
            <div style=" ">
              <table
                style="width:100%;text-align:center;"
                border="0"
                cellspacing="0"
              >
                <tbody>
                  <tr v-for="index of 5" :key="index">
                    <td style="width:50px;">
                      NTEF
                    </td>
                    <td style="width:105px;">
                      0.59
                    </td>
                    <td style="width:105px;">
                      0.59
                      <span class="svg-icon svg-icon-yellow">
                        <svg-icon svgid="svg-arrow-dpwn-1" />
                      </span>
                    </td>
                    <td style="width:105px;">
                      0.59
                    </td>
                    <td style="width:105px;">
                      0.59
                      <span class="svg-icon svg-icon-green">
                        <svg-icon svgid="svg-arrow-up-1" />
                      </span>
                    </td>
                    <td style="width:105px;">
                      0.59
                    </td>
                    <td style="width:105px;">
                      0.59
                      <span class="svg-icon svg-icon-yellow">
                        <svg-icon svgid="svg-arrow-dpwn-1" />
                      </span>
                    </td>
                    <td style="width:105px;">
                      0.59
                    </td>
                    <td style="width:105px;">
                      0.59
                      <span class="svg-icon svg-icon-green">
                        <svg-icon svgid="svg-arrow-up-1" />
                      </span>
                    </td>
                    <td style="width:105px;">
                      0.59
                    </td>
                    <td style="width:105px;">
                      0.59
                      <span class="svg-icon svg-icon-yellow">
                        <svg-icon svgid="svg-arrow-dpwn-1" />
                      </span>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </el-scrollbar>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="table">
          <table style="width:100%;" border="0" cellspacing="0">
            <thead>
              <tr>
                <th rowspan="2" class="type1" style="width:50px;"></th>
                <th colspan="2" class="type1" style="width:205px;">麻黄山</th>
                <th colspan="2" class="type1" style="width:205px;">牛首山</th>
                <th colspan="2" class="type1" style="width:205px;">青山</th>
                <th colspan="2" class="type1" style="width:205px;">石板泉</th>
                <th colspan="2" class="type1" style="width:205px;">香山</th>
              </tr>
              <tr>
                <th style="width:105px;">当月</th>
                <th style="width:105px;">同期</th>
                <th style="width:105px;">当月</th>
                <th style="width:105px;">同期</th>
                <th style="width:105px;">当月</th>
                <th style="width:105px;">同期</th>
                <th style="width:105px;">当月</th>
                <th style="width:105px;">同期</th>
                <th style="width:105px;">当月</th>
                <th style="width:105px;">同期</th>
              </tr>
            </thead>
          </table>
          <el-scrollbar>
            <div style=" ">
              <table
                style="width:100%;text-align:center;"
                border="0"
                cellspacing="0"
              >
                <tbody>
                  <tr v-for="index of 5" :key="index">
                    <td style="width:50px;">
                      NTEF
                    </td>
                    <td style="width:105px;">
                      0.59
                    </td>
                    <td style="width:105px;">
                      0.59
                      <span class="svg-icon svg-icon-yellow">
                        <svg-icon svgid="svg-arrow-dpwn-1" />
                      </span>
                    </td>
                    <td style="width:105px;">
                      0.59
                    </td>
                    <td style="width:105px;">
                      0.59
                      <span class="svg-icon svg-icon-green">
                        <svg-icon svgid="svg-arrow-up-1" />
                      </span>
                    </td>
                    <td style="width:105px;">
                      0.59
                    </td>
                    <td style="width:105px;">
                      0.59
                      <span class="svg-icon svg-icon-yellow">
                        <svg-icon svgid="svg-arrow-dpwn-1" />
                      </span>
                    </td>
                    <td style="width:105px;">
                      0.59
                    </td>
                    <td style="width:105px;">
                      0.59
                      <span class="svg-icon svg-icon-green">
                        <svg-icon svgid="svg-arrow-up-1" />
                      </span>
                    </td>
                    <td style="width:105px;">
                      0.59
                    </td>
                    <td style="width:105px;">
                      0.59
                      <span class="svg-icon svg-icon-yellow">
                        <svg-icon svgid="svg-arrow-dpwn-1" />
                      </span>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </el-scrollbar></div
      ></el-col>
    </el-row>
    <el-row :gutter="20" class="pie-chart-panel">
      <el-col :span="6">
        <panel title="当月理论平衡分析">
          <dual-pie-chart height="27.296vh" />
        </panel>
      </el-col>
      <el-col :span="6">
        <panel title="当月理论平衡分析">
          <dual-pie-chart height="27.296vh" />
        </panel>
      </el-col>
      <el-col :span="6">
        <panel title="当月理论平衡分析">
          <dual-pie-chart height="27.296vh" />
        </panel>
      </el-col>
      <el-col :span="6">
        <panel title="当月理论平衡分析">
          <dual-pie-chart height="27.296vh" />
        </panel>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import Panel from "../../components/coms/panel/panel.vue";
import DualPieChart from "../../components/chart/pie/dual-pie-chart.vue";
import SvgIcon from "../../components/coms/icon/svg-icon.vue";

export default {
  setup() {},
  components: {
    Panel,
    DualPieChart,
    SvgIcon,
  },
  data() {
    return {
      tableData2: {
        column: [
          {
            name: " ",
            field: "name",
            width: "10%",
          },
          {
            name: "故障损失电量",
            field: "v1",
          },
          {
            name: "故障损失电量",
            field: "v2",
            template: function(data) {
              return data;
            },
          },
          {
            name: "故障损失电量",
            field: "v3",
          },
          {
            name: "故障损失电量",
            field: "v4",
          },
          {
            name: "故障损失电量",
            field: "v5",
          },
          {
            name: "故障损失电量",
            field: "v6",
          },
          {
            name: "故障损失电量",
            field: "v7",
          },
          {
            name: "故障损失电量",
            field: "v8",
          },
          {
            name: "故障损失电量",
            field: "v9",
          },
          {
            name: "故障损失电量",
            field: "v10",
          },
          {
            name: "故障损失电量",
            field: "v11",
          },
          {
            name: "故障损失电量",
            field: "v12",
          },
        ],
        data: [
          {
            name: "本期",
            v1: "0.59",
            v2: "0.59",
            v3: "0.59",
            v4: "0.59",
            v5: "0.59",
            v6: "0.59",
            v7: "0.59",
            v8: "0.59",
            v9: "0.59",
            v10: "0.59",
            v11: "0.59",
            v12: "0.59",
          },
          {
            name: "同期",
            v1: "0.59",
            v2: "0.59",
            v3: "0.59",
            v4: "0.59",
            v5: "0.59",
            v6: "0.59",
            v7: "0.59",
            v8: "0.59",
            v9: "0.59",
            v10: "0.59",
            v11: "0.59",
            v12: "0.59",
          },
        ],
      },
    };
  },
  created() {},
};
</script>

<style lang="less">
.ztfx {
  font-size: 12px;
  .select-btn {
    width: 92px;
  }
  .com-panel {
    border: 1px solid #6067697d;
  }
  .table-complex {
    margin-top: 10px;
    .table {
      border: 1px solid #6067697d;
      tbody {
        tr:nth-child(2n) td {
          background-color: fade(@gray, 20%);

          &.item {
            background-color: transparent;
          }
        }
      }

      th {
        background: fade(@gray, 40);
        font-size: 12px;
        font-weight: 400;
        line-height: 24px;
        color: @gray-l;

        &.type1 {
          border-left: 0;
          border-right: 0;
        }
      }
      td {
        color: @gray-l;
        text-align: center;
        height: 26px;
        line-height: 26px;

        &.item {
          width: 100px;
        }
      }
      svg {
        height: 1.222vh;
      }
    }
  }
  .table-panel {
    margin-top: 10px;
    .panel-header {
      text-align: center;
    }
    .table {
      border: 1px solid #6067697d;
      tbody {
        tr:nth-child(2n) td {
          background-color: fade(@gray, 20%);

          &.item {
            background-color: transparent;
          }
        }
      }
      .td-item {
        width: 6vh;
      }
      th {
        background: fade(@gray, 40);
        font-size: 12px;
        font-weight: 400;
        line-height: 24px;
        color: @gray-l;

        &.type1 {
          border-left: 0;
          border-right: 0;
          height: 4vh;
        }
      }
      td {
        color: @gray-l;
        text-align: center;
        height: 26px;
        line-height: 26px;

        &.item {
          width: 100px;
        }
      }
      svg {
        height: 1.222vh;
      }
    }
  }
  .pie-chart-panel {
    margin-top: 10px;
    .line{
      border:none;
    }
  }
}
</style>