vpp/src/views/Articles/index.vue

<template>
    <div class="table-wrapper">
        <div class="table-box">
            <div class="title"
                 style="font-family: AliMaMa;font-size: 30px;font-weight: 1000;text-align: left;margin-left: 90px;padding-top: 3px;margin-bottom: 20px">
                风电
            </div>
            <el-row :gutter="20">
                <el-form>
                    <el-col>
                        <el-form-item
                                label="场站名称:"
                                label-width="100px"
                                style="font-weight: 700"
                        >
                            <el-select v-model="form.taskNumber" placeholder="请选择" size="mini">
                                <el-option
                                        v-for="item in options0"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col>
                        <el-form-item
                                label="装机容量(MVA):"
                                label-width="150px"
                                style="font-weight: 700"
                        >
                            <el-select v-model="form.taskNumber" placeholder="请选择" size="mini">
                                <el-option
                                        v-for="item in options2"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col>
                        <el-form-item
                                label="是否受控:"
                                label-width="100px"
                                style="font-weight: 700"
                        >
                            <el-select v-model="form.taskNumber" placeholder="请选择" size="mini">
                                <el-option
                                        v-for="item in options"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col>
                        <el-form-item
                                label="下发状态:"
                                label-width="100px"
                                style="font-weight: 700"
                        >
                            <el-select v-model="form.taskNumber" placeholder="请选择" size="mini">
                                <el-option
                                        v-for="item in options1"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col>
                        <el-form-item
                                label="日期:"
                                label-width="60px"
                                style="font-weight: 700"
                        >
                            <el-date-picker
                                    v-model="form.date"
                                    placeholder="选择日期"
                                    size="mini"
                                    type="date">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-form>
            </el-row>
            <el-table
                    :cell-style="{border:0,color:'#fff'}"
                    :data="tableData"
                    :header-cell-style="{color:'#fff'}"
                    :row-style="{backgroundColor:'rgb(4,66,115,0.3)'}"
                    size="mini"
                    style="width: 1429px;font-size: 17px;background: none"
            >
                <el-table-column
                        align="center"
                        label="场站名称"
                        prop="stationName"
                >
                </el-table-column>
                <el-table-column
                        align="center"
                        label="是否受控"
                        prop="control"
                >
                </el-table-column>
                <el-table-column
                        align="center"
                        label="装机容量(MVA)"
                        prop="capacity">
                </el-table-column>
                <el-table-column
                        align="center"
                        label="虚拟电厂计划值"
                        prop="capacity">
                </el-table-column>
                <el-table-column
                        align="center"
                        label="现货系统计划值"
                        prop="capacity">
                </el-table-column>
                <el-table-column
                        align="center"
                        label="计划时刻"
                        prop="time">
                </el-table-column>
                <el-table-column
                        align="center"
                        label="执行时刻"
                        prop="time">
                </el-table-column>
                <el-table-column
                        align="center"
                        label="下发状态"
                        prop="status">
                </el-table-column>
                <el-table-column
                        align="center"
                        label="下发时间"
                        prop="date">
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>

<script>

export default {
    name: 'Article-Index',
    data() {
        return {
            form: {
                taskNumber: '',
                date: '',
                current: 1,
                size: 10
            },
            options: [],
            options0: [],
            options1: [],
            options2: [],
            tableData: []
        }
    },
    methods: {},
    mounted() {
        const tableDataList = require('../tabledata.json');
        this.tableData = tableDataList.windDataList
        this.options = tableDataList.yesOrNoOption
        this.options1 = tableDataList.status
        this.options2 = tableDataList.capacity
        this.options0 = tableDataList.stationOption
    }
}
</script>

<style lang="less" scoped>

@font-face {
  font-family: AliMaMa;//自定义字体名称
  src: url("./font/AlimamaDaoLiTi.ttf")
}


.table-wrapper {
  width: 1483px;
  padding: 0 20px;
  background: url(./img/bigbgc.png);
  background-size: cover;

  .table-box {
    background: url(./img/bgc.png);
    min-height: 600px;
    background-size: cover;
  }

  .title {
    margin-bottom: 20px;
    margin-left: 60px;
    font-size: 18px;
    color: #fff;
  }

  /deep/ .el-form-item__label {
    color: #fff;
    font-size: 17px;
  }

  /deep/ .el-input__inner {
    background-color: rgba(14, 73, 131);
    border: 1px solid rgb(64, 153, 255);
    height: 34px;
    font-size: 17px;
  }

  /deep/ .el-table__header {
    background: url(./img/bg1.png);
  }

  /deep/ .el-table--enable-row-hover .el-table__body tr:hover > td {
    background-color: rgb(103, 118, 49) !important
  }

  /deep/ .el-col {
    padding: 0;
    display: inline-block;
    position: relative;
  }

  /deep/ .el-col:nth-child(1) {
    width: 19%;
  }

  /deep/ .el-col:nth-child(2) {
    width: 22%;
  }

  /deep/ .el-col:nth-child(3) {
    width: 19%;
  }

  /deep/ .el-col:nth-child(4) {
    width: 19%;
  }

  /deep/ .el-col:nth-child(5) {
    width: 15%;
  }


  /deep/ .el-input__inner:nth-child(1) {
    width: 176px;
  }

  /deep/ .el-input__inner:nth-child(2) {
    width: 176px;
  }

  /deep/ .el-input__inner:nth-child(2) {
    width: 126px;
  }

  /deep/ .el-input__inner:nth-child(2) {
    width: 175px;
  }

  /deep/ .el-icon-arrow-up {
    transform: rotateZ(0deg);

  }


  /deep/ .el-icon-arrow-up:before {
    content: url(./img/xiala2.png);
  }

  /deep/ .el-input__prefix {
    right: -60px;
    padding-top: 3px;
  }

  /deep/ .el-icon-date:before {
    content: url(./img/riqi.png);
  }

  /deep/ .el-table__header tr {
    background: url(./img/bg1.png);
    height: 49px;

  }

  /deep/ .el-table th.el-table__cell {
    background: none;
  }

  /deep/ .el-table__body {
    -webkit-border-vertical-spacing: 13px; // 垂直间距
  }

  /deep/ .el-form-item__content {
    text-align: left;
  }

  /deep/ .el-table, .el-table__expanded-cell {
    background-color: rgb(1, 40, 81);
  }
}
</style>