SIS_Web/src/views/Performance/PerformanceList.vue

<template>
  <el-container>
    <el-header>
      <el-row>
        <el-col :span="24">
          <el-card style="height: 30px">
            <div class="grid-content bg-purple-dark">
              <span>电量绩效榜</span>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </el-header>

    <el-main>
      <el-card>
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-row :gutter="1">
            <el-form-item label="风场">
              <el-input
                v-model="formInline.windfarm"
                id="windfarm"
                placeholder="风场"
              ></el-input>
            </el-form-item>

            <el-form-item label="项目">
              <el-input
                v-model="formInline.project"
                id="project"
                placeholder="项目"
                @focus="checkwindfarm"
              ></el-input>
            </el-form-item>

            <el-form-item label="线路">
              <el-input
                v-model="formInline.line"
                id="line"
                placeholder="线路"
                @focus="checkproject"
              ></el-input>
            </el-form-item>

            <el-form-item label="选择时间：">
              <el-date-picker
                v-model="timedate"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                @click="checktime"
              >
              </el-date-picker>
            </el-form-item>

            <el-form-item>
              <el-button type="primary" @click="queryApData" :plain="true"
                >查询</el-button
              >
            </el-form-item>

            <el-form-item>
              <el-button type="primary" @click="queryApDataMx"
                >明细信息</el-button
              >
            </el-form-item>

            <el-form-item>
              <el-button type="primary" @click="toExcel">导出</el-button>
            </el-form-item>
          </el-row>
        </el-form>

        <el-tabs
          v-model="activeName"
          type="card"
          @tab-click="handleClick"
          style="height: 100%; width: 100%"
        >
          <el-tab-pane label="风场" name="first" id="fc">
            <el-row
              style="
                width: 100%;
                height: 100%;
                display: flex;
                justify-content: space-between;
              "
            >
              <el-card
                shadow="always"
                style="
                  height: 440px;
                  width: 45%;
                  display: table-cell;
                  vertical-align: middle;
                "
              >
                <div
                  id="chartLineBox"
                  style="width: 800px; height: 400px; margin: auto"
                ></div>
              </el-card>

              <el-card shadow="always" style="width: 45%" height="400px" id="moban">
                <el-table
                  :data="tableData"
                  style="width: 100%"
                  max-height="400px"
                >
                  <el-table-column label="项目列表">
                    <el-table-column fixed type="index" width="45">
                    </el-table-column>
                    <el-table-column prop="date" label="名称" width="150">
                    </el-table-column>
                    <el-table-column prop="name" label="理论发电量" width="120">
                    </el-table-column>
                    <el-table-column
                      prop="province"
                      label="SCADA发电量"
                      width="120"
                    >
                    </el-table-column>
                    <el-table-column prop="city" label="风速" width="120">
                    </el-table-column>
                    <el-table-column
                      prop="address"
                      label="非计划检修"
                      width="300"
                    >
                    </el-table-column>
                    <el-table-column prop="zip" label="计划检修" width="120">
                    </el-table-column>
                    <el-table-column prop="zip" label="受累" width="120">
                    </el-table-column>
                    <el-table-column prop="zip" label="限电" width="120">
                    </el-table-column>
                    <el-table-column prop="zip" label="性能" width="120">
                    </el-table-column>
                    <el-table-column prop="zip" label="风能利用率%" width="120">
                    </el-table-column>

                    <!-- <el-table-column fixed="right" label="受累" width="120">
                    </el-table-column> -->
                  </el-table-column>
                </el-table>
              </el-card>
            </el-row>
          </el-tab-pane>

          <el-tab-pane label="项目" name="second" id="xm"> </el-tab-pane>

          <el-tab-pane label="集电线路" name="third" id="jcxl"> </el-tab-pane>
        </el-tabs>
      </el-card>
    </el-main>
  </el-container>
</template>

<script>
import * as echarts from "echarts";
export default {
  data() {
    return {
      formInline: {
        windfarm: "",
        project: "",
        line: "",
      },
      timedate: "",
      activeName: "second",
      tableData: [
        {
          date: "2016-05-03",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333,
        },
        {
          date: "2016-05-02",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333,
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333,
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333,
        },
        {
          date: "2016-05-08",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333,
        },
        {
          date: "2016-05-06",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333,
        },
        {
          date: "2016-05-07",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333,
        },
        ,
        {
          date: "2016-05-07",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333,
        },
        {
          date: "2016-05-07",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333,
        },
        {
          date: "2016-05-07",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333,
        },
      ],
    };
  },
  methods: {
    onSubmit() {
      console.log("submit!");
    },
    handleClick() {},
    deleteRow(index, rows) {
      rows.splice(index, 1);
    },
    queryApData() {
      if (this.formInline.line == "") {
        this.$message.error("请选择路线！");
        return;
      }
    },
    checkwindfarm() {
      if (this.formInline.windfarm == "") {
        this.$message.error("请选择风场！");
        return;
      }
    },
    checkproject() {
      if (this.formInline.project == "") {
        this.$message.error("请选择项目！");
        return;
      }
      if (new Date(this.timedate) == null) {
        this.$message.error("请选择时间");
        return;
      }
    },
    checktime() {
      if (new Date(this.timedate) == null) {
        this.$message.error("请选择时间");
        return;
      }
    },
    queryApDataMx() {
      this.$router.push({ path: "/new_performanceList_fan" });
    },
    toExcel() {},
  },
  mounted() {
    this.chartLine = echarts.init(document.getElementById("chartLineBox"));
    var option;

    option = {
      title: {
        text: "风机绩效榜单",
        left: 300,
        top: -5,
        textStyle: {
          fontSize: 13,
        },
      },
      tooltip: {
        trigger: "axis",
        axisPointer: {
          // Use axis to trigger tooltip
          type: "shadow", // 'shadow' as default; can also be 'line' or 'shadow'
        },
      },
      legend: {
        left: 15,
        top: 30,
        data: [
          "实发电量",
          "计划检修损失",
          "非计划检修损失",
          "限电损失",
          "受累损失",
          "性能损失",
          "总和",
        ],
      },
      grid: {
        left: "3%",
        right: "4%",
        bottom: "3%",
        containLabel: true,
      },
      xAxis: {
        type: "value",
      },
      yAxis: {
        type: "category",
        data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
      },
      series: [
        {
          name: "实发电量",
          type: "bar",
          stack: "total",
          label: {
            show: true,
          },
          emphasis: {
            focus: "series",
          },
          data: [320, 302, 301, 334, 390, 330, 320],
        },
        {
          name: "计划检修损失",
          type: "bar",
          stack: "total",
          label: {
            show: true,
          },
          emphasis: {
            focus: "series",
          },
          data: [120, 132, 101, 134, 90, 230, 210],
        },
        {
          name: "非计划检修损失",
          type: "bar",
          stack: "total",
          label: {
            show: true,
          },
          emphasis: {
            focus: "series",
          },
          data: [220, 182, 191, 234, 290, 330, 310],
        },
        {
          name: "限电损失",
          type: "bar",
          stack: "total",
          label: {
            show: true,
          },
          emphasis: {
            focus: "series",
          },
          data: [150, 212, 201, 154, 190, 330, 410],
        },
        {
          name: "受累损失",
          type: "bar",
          stack: "total",
          label: {
            show: true,
          },
          emphasis: {
            focus: "series",
          },
          data: [820, 832, 901, 934, 1290, 1330, 1320],
        },
        {
          name: "性能损失",
          type: "bar",
          stack: "total",
          label: {
            show: true,
          },
          emphasis: {
            focus: "series",
          },
          data: [820, 832, 901, 934, 1290, 1330, 1320],
        },
        //曲线
        {
          name: "总和",
          data: [2500, 2600, 2700, 2900, 3000, 3500, 4000],
          type: "line",
          symbol: "circle",
          symbolSize: 20,
          lineStyle: {
            color: "#5470C6",
            width: 4,
            type: "dashed",
          },
          itemStyle: {
            borderWidth: 3,
            borderColor: "#EE6666",
            color: "yellow",
          },
        },
      ],
    };
    this.chartLine.setOption(option);
  },
};
</script>
<style scoped>
.bg-purple-dark {
  background: #fff;
}
.grid-content {
  border-radius: 2px;
  min-height: 36px;
  margin-top: -15px;
}
.item {
  margin-top: 10px;
  margin-right: 40px;
}
.el-row {
  margin: 10px;
}
</style>