energy_storage/web/src/components/system/policyForm.vue

<template>
  <div class="policyForm">
    <div class="title">
      <div>基础信息</div>
      <img src="@/assets/images/titleLine.png" alt="" />
    </div>
    <a-form
      :model="formState"
      layout="inline"
      label-align="left"
      :label-col="{ style: { width: '85px' } }"
    >
      <a-form-item label="名称" class="col2">
        <a-input v-model:value="formState.name" />
      </a-form-item>

      <a-form-item label="类型" class="col2">
        <a-select v-model:value="formState.type" placeholder="">
          <a-select-option v-for="item in policyTypes" :value="item.value">{{
            item.label
          }}</a-select-option>
        </a-select>
      </a-form-item>

      <a-form-item label="低谷电价" class="col4">
        <a-input v-model:value="formState.name" suffix="元/kWh" />
      </a-form-item>

      <a-form-item label="平段电价" class="col4">
        <a-input v-model:value="formState.name" suffix="元/kWh" />
      </a-form-item>

      <a-form-item label="高峰电价" class="col4">
        <a-input v-model:value="formState.name" suffix="元/kWh" />
      </a-form-item>

      <a-form-item label="尖峰电价" class="col4">
        <a-input v-model:value="formState.name" suffix="元/kWh" />
      </a-form-item>

      <a-form-item label="时段表" class="col1">
        <a-table :columns="columns" :data-source="data" size="small">
          <template #bodyCell="{ column, record }">
            <template v-if="column.dataIndex === 'action'">
              <span>
                <a @click="edit(record.key)">操作</a>
              </span>
            </template>
          </template>
        </a-table>
      </a-form-item>
      <a-form-item label="充放策略" class="col1">
        <a-radio-group v-model:value="formState.resource">
          <a-radio value="1">一充一放</a-radio>
          <a-radio value="2">两充两放</a-radio>
        </a-radio-group>
      </a-form-item>
      <a-form-item label="" class="col1">
        <div class="charge">
          <div class="box">
            <span>第一次充放过程</span>
            <a-form
              :model="formState"
              layout="inline"
              label-align="left"
              :label-col="{ style: { width: '85px' } }"
            >
              <a-form-item label="充电时间" class="col2">
                <a-time-range-picker v-model:value="formState.name" format="HH:mm" />
              </a-form-item>

              <a-form-item label="放电时间" class="col2">
                <a-select v-model:value="formState.type" placeholder="">
                  <a-select-option v-for="item in policyTypes" :value="item.value">{{
                    item.label
                  }}</a-select-option>
                </a-select>
              </a-form-item>

              <a-form-item label="充电功率" class="col2">
                <a-radio-group v-model:value="formState.resource">
                  <a-radio value="1">自动</a-radio>
                  <a-radio value="2">自定义</a-radio>
                  <a-input style="width: 60px"></a-input>
                </a-radio-group>
              </a-form-item>

              <a-form-item label="放电功率" class="col2">
                <a-radio-group v-model:value="formState.resource">
                  <a-radio value="1">自动</a-radio>
                  <a-radio value="2">自定义</a-radio>
                  <a-input style="width: 60px"></a-input>
                </a-radio-group>
              </a-form-item>
            </a-form>
          </div>
          <div class="box">222</div>
        </div>
      </a-form-item>
      <a-form-item label="策略描述" class="col2">
        <a-textarea v-model:value="formState.desc" />
      </a-form-item>
      <a-form-item label="是否启用" class="col2">
        <a-switch v-model:checked="formState.delivery" />
      </a-form-item>
    </a-form>
  </div>
</template>

<script>
import { policyTypes } from '@/utils/config'
export default {
  name: '',
  components: {},
  props: {},
  data() {
    return {
      policyTypes,
      formState: {
        name: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      columns: [
        {
          title: '月份',
          dataIndex: 'month',
          key: 'month'
        },
        {
          title: '开始时间',
          dataIndex: 'startTime',
          key: 'startTime'
        },
        {
          title: '时段类型',
          dataIndex: 'type',
          key: 'type'
        },
        {
          title: '操作',
          dataIndex: 'action',
          key: 'action'
        }
      ]
    }
  },
  mounted() {},
  methods: {}
}
</script>

<style lang="scss" scoped>
.policyForm {
  color: #fff;
  .title {
    display: flex;
    font-weight: 700;
    flex-direction: column;

    img {
      width: 232px;
      height: 6px;
      margin-top: 10px;
    }
  }
}
.ant-form {
  .charge {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    .box {
      border: 1px solid $table-border;
      margin-left: 10px;
      border-radius: 10px;
      color: #fff;
    }
  }
}
.ant-form-item {
  margin-inline-end: 0 !important;
  margin-top: 15px;
  :deep(.ant-form-item-label) {
    margin-left: 10px;
  }
}
.ant-form {
  .ant-form-item-label {
    > label {
      color: #fff;
    }
  }

  :deep(.ant-row) {
    width: 100%;
  }
  input,
  .ant-picker,
  .ant-select,
  .ant-input-affix-wrapper {
    width: 150px;
  }
  textarea {
    .ant-input {
      width: 100%;
    }
  }
  .col2 {
    width: 50%;
  }
  .col4 {
    width: 25%;
  }
  .col1 {
    width: 100%;
    :deep(textarea.ant-input) {
      width: 100% !important;
    }
  }
}
:deep(.ant-form-item-row){
    // border: 1px solid red;
}
</style>