powerForecast-ui/src/views/modules/load-data/components/add-or-update.vue

<template>
  <!-- 添加或修改参数配置对话框 -->
  <el-dialog
    title="明细"
    :visible.sync="open"
    append-to-body
    width="700px"
    destroy-on-close
  >
    <el-descriptions labelStyle="width: 160px;" title="" column="2" border>
      <el-descriptions-item label="变电站名称">{{
        ruleForm.subNm
      }}</el-descriptions-item>
      <el-descriptions-item label="归属县旗">{{
        ruleForm.compNm
      }}</el-descriptions-item>
      <el-descriptions-item label="电压等级">{{
        ruleForm.voltageLevel
      }}</el-descriptions-item>
      <el-descriptions-item label="主变台数">{{
        ruleForm.mainNum
      }}</el-descriptions-item>
      <el-descriptions-item label="主变容量(MVA)">{{
        ruleForm.mainCapacity
      }}</el-descriptions-item>
      <el-descriptions-item label="采集日期">{{
        ruleForm.dataDate
      }}</el-descriptions-item>
      <el-descriptions-item label="当日温度(℃)">{{
        ruleForm.temperature
      }}</el-descriptions-item>
      <el-descriptions-item label="最大负荷(MW)">{{
        ruleForm.peakLoad
      }}</el-descriptions-item>
      <el-descriptions-item label="基础负荷(MW)">{{
        ruleForm.baseLoad
      }}</el-descriptions-item>
      <el-descriptions-item label="电采暖负荷(MW)">{{
        ruleForm.electricHeatingLoad
      }}</el-descriptions-item>
      <el-descriptions-item label="用户数">{{
        ruleForm.usersNum
      }}</el-descriptions-item>
      <el-descriptions-item label="平房区用户数">{{
        ruleForm.pingfangUsers
      }}</el-descriptions-item>
       <el-descriptions-item span="2" label="平房区已接入电采暖容量(MWA)">{{
        ruleForm.pingfangElectricHeatingCapacity
      }}</el-descriptions-item>
    </el-descriptions>
    <el-form ref="ruleForm" :model="ruleForm" label-width="120px" v-if="false">
      <el-row>
        <el-col :span="12">
          <el-form-item label="变电站名称" prop="subNm">
            <el-input
              v-model="ruleForm.subNm"
              placeholder="请输入变电站名称"
              :disabled="type == 'view'"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="归属县旗" prop="compNm">
            <el-input
              v-model="ruleForm.compNm"
              placeholder="请输入归属县旗名称"
              :disabled="type == 'view'"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="电压等级" prop="voltageLevel">
            <el-input
              type="number"
              v-model="ruleForm.voltageLevel"
              placeholder="请输入电压等级"
              :disabled="type == 'view'"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="主变台数" prop="mainNum">
            <el-input
              type="number"
              style="width: 100%"
              v-model="ruleForm.mainNum"
              placeholder="请输入主变台数"
              :disabled="type == 'view'"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="主变容量(MVA)" prop="mainCapacity">
            <el-input
              type="number"
              style="width: 100%"
              v-model="ruleForm.mainCapacity"
              placeholder="请输入主变容量"
              :disabled="type == 'view'"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="采集日期" prop="dataDate">
            <el-input v-model="ruleForm.dataDate" :disabled="type == 'view'" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="当日温度(℃)" prop="temperature">
            <el-input
              v-model="ruleForm.temperature"
              :disabled="type == 'view'"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="最大负荷(MW)" prop="peakLoad">
            <el-input v-model="ruleForm.peakLoad" :disabled="type == 'view'" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="基础负荷(MW)" prop="baseLoad">
            <el-input v-model="ruleForm.baseLoad" :disabled="type == 'view'" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="电采暖负荷(MW)" prop="electricHeatingLoad">
            <el-input
              v-model="ruleForm.electricHeatingLoad"
              :disabled="type == 'view'"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="电采暖负荷(MW)" prop="electricHeatingLoad">
            <el-input
              v-model="ruleForm.electricHeatingLoad"
              :disabled="type == 'view'"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="用户数" prop="usersNum">
            <el-input v-model="ruleForm.usersNum" :disabled="type == 'view'" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="平房区用户数" prop="pingfangUsers">
            <el-input
              v-model="ruleForm.pingfangUsers"
              :disabled="type == 'view'"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            label="平房区接入电暖用户数"
            prop="electricHeatingUsers"
          >
            <el-input
              v-model="ruleForm.electricHeatingUsers"
              :disabled="type == 'view'"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            label="平房区已接入电采暖容量(MWA)"
            prop="pingfangElectricHeatingCapacity"
          >
            <el-input
              v-model="ruleForm.pingfangElectricHeatingCapacity"
              :disabled="type == 'view'"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="cancel">关 闭</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script>
export default {
  data() {
    return {
      type: "view", // add, edit, view
      open: false,
      ruleForm: {},
    };
  },
  props: ["parent"],
  methods: {
    openDialog(id, type) {
      this.type = type;
      this.open = true;
      this.resetForm();
      if (id) this.info(id);
    },
    info(id) {
      this.$http({
        url: `subLoad/detail/${id}`,
        method: "get",
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.ruleForm = data.data;
        } else {
          this.$message.error(data.msg);
        }
      });
    },
    resetForm() {
      this.ruleForm = {};
    },
    // 返回
    cancel() {
      this.open = false;
      this.resetForm();
    },
  },
};
</script>
<style lang="scss" scoped>
.addEdit-block {
  padding: 30px;
  background: none;
  width: 100%;
}
.add-update-preview {
  border-radius: 10px;
  padding: 40px 25% 40px 18%;
  background: #ffffff;
  border-color: #eee;
  border-width: 1px;
  border-style: solid;
}
.amap-wrapper {
  width: 100%;
  height: 500px;
}

.search-box {
  position: absolute;
}

.el-date-editor.el-input {
  width: auto;
}
.add-update-preview ::v-deep .el-form-item {
  border: 0px solid #eee;
  padding: 0;
  margin: 0 0 22px 0;
  display: inline-block;
  width: 100%;
}
.add-update-preview .el-form-item ::v-deep .el-form-item__label {
  padding: 0 10px 0 0;
  color: #6e6e6e;
  font-weight: 500;
  width: 180px;
  font-size: 15px;
  line-height: 40px;
  text-align: right;
}

.add-update-preview .el-form-item ::v-deep .el-form-item__content {
  margin-left: 180px;
}
.add-update-preview .el-form-item span.text {
  padding: 0 10px;
  color: #333;
  background: none;
  font-weight: 500;
  display: inline-block;
  font-size: 15px;
  line-height: 40px;
  min-width: 50%;
}

.add-update-preview .el-input {
  width: 100%;
}
.add-update-preview .el-input ::v-deep .el-input__inner {
  border: 1px solid #e8e8e8;
  border-radius: 0px;
  padding: 0 12px;
  color: #666;
  background: #fff;
  width: 100%;
  font-size: 15px;
  min-width: 50%;
  height: 40px;
}
.add-update-preview .el-input ::v-deep .el-input__inner[readonly="readonly"] {
  border: 0px solid #ccc;
  cursor: not-allowed;
  border-radius: 0px;
  padding: 0 12px;
  color: #666;
  background: none;
  width: auto;
  font-size: 15px;
  height: 40px;
}
.add-update-preview .el-input-number {
  text-align: left;
  width: 100%;
}
.add-update-preview .el-input-number ::v-deep .el-input__inner {
  text-align: left;
  border: 1px solid #e8e8e8;
  border-radius: 0px;
  padding: 0 12px;
  color: #666;
  background: #fff;
  width: 100%;
  font-size: 15px;
  min-width: 50%;
  height: 40px;
}
.add-update-preview .el-input-number ::v-deep .is-disabled .el-input__inner {
  text-align: left;
  border: 0px solid #ccc;
  cursor: not-allowed;
  border-radius: 0px;
  padding: 0 12px;
  color: #666;
  background: none;
  width: auto;
  font-size: 15px;
  height: 40px;
}
.add-update-preview .el-input-number ::v-deep .el-input-number__decrease {
  display: none;
}
.add-update-preview .el-input-number ::v-deep .el-input-number__increase {
  display: none;
}
.add-update-preview .el-select {
  width: 100%;
}
.add-update-preview .el-select ::v-deep .el-input__inner {
  border: 1px solid #e8e8e8;
  border-radius: 0px;
  padding: 0 10px;
  color: #666;
  background: #fff;
  width: 100%;
  font-size: 15px;
  height: 40px;
}
.add-update-preview .el-select ::v-deep .is-disabled .el-input__inner {
  border: 0;
  cursor: not-allowed;
  border-radius: 4px;
  padding: 0 10px;
  color: #666;
  background: none;
  width: auto;
  font-size: 15px;
  height: 34px;
}
.add-update-preview .el-date-editor {
  width: 100%;
}
.add-update-preview .el-date-editor ::v-deep .el-input__inner {
  border: 1px solid #e8e8e8;
  border-radius: 0px;
  padding: 0 10px 0 30px;
  color: #666;
  background: #fff;
  width: 100%;
  font-size: 15px;
  height: 40px;
}
.add-update-preview
  .el-date-editor
  ::v-deep
  .el-input__inner[readonly="readonly"] {
  border: 0;
  cursor: not-allowed;
  border-radius: 0px;
  padding: 0 10px 0 30px;
  color: #666;
  background: none;
  width: auto;
  font-size: 15px;
  height: 40px;
}
.add-update-preview .viewBtn {
  border: 1px solid #e8e8e8;
  cursor: pointer;
  border-radius: 0px;
  padding: 0 15px;
  margin: 0 20px 0 0;
  color: #666;
  background: #fff;
  width: auto;
  font-size: 15px;
  line-height: 34px;
  height: 34px;
  .iconfont {
    margin: 0 2px;
    color: #666;
    font-size: 16px;
    height: 34px;
  }
}
.add-update-preview .viewBtn:hover {
  opacity: 0.8;
}
.add-update-preview .downBtn {
  border: 1px solid #e8e8e8;
  cursor: pointer;
  border-radius: 0px;
  padding: 0 15px;
  margin: 0 20px 0 0;
  color: #666;
  background: #fff;
  width: auto;
  font-size: 15px;
  line-height: 34px;
  height: 34px;
  .iconfont {
    margin: 0 2px;
    color: #666;
    font-size: 16px;
    height: 34px;
  }
}
.add-update-preview .downBtn:hover {
  opacity: 0.8;
}
.add-update-preview .unBtn {
  border: 0;
  cursor: not-allowed;
  border-radius: 4px;
  padding: 0 0px;
  margin: 0 20px 0 0;
  outline: none;
  color: #999;
  background: none;
  width: auto;
  font-size: 15px;
  line-height: 40px;
  height: 40px;
  .iconfont {
    margin: 0 2px;
    color: #fff;
    display: none;
    font-size: 14px;
    height: 34px;
  }
}
.add-update-preview .unBtn:hover {
  opacity: 0.8;
}
.add-update-preview ::v-deep .el-upload--picture-card {
  background: transparent;
  border: 0;
  border-radius: 0;
  width: auto;
  height: auto;
  line-height: initial;
  vertical-align: middle;
}

.add-update-preview ::v-deep .upload .upload-img {
  border: 1px solid #e8e8e8;
  cursor: pointer;
  border-radius: 0px;
  color: #666;
  background: #fff;
  width: 90px;
  font-size: 24px;
  line-height: 60px;
  text-align: center;
  height: 60px;
}

.add-update-preview ::v-deep .el-upload-list .el-upload-list__item {
  border: 1px solid #e8e8e8;
  cursor: pointer;
  border-radius: 0px;
  color: #666;
  background: #fff;
  width: 90px;
  font-size: 24px;
  line-height: 60px;
  text-align: center;
  height: 60px;
}

.add-update-preview ::v-deep .el-upload .el-icon-plus {
  border: 1px solid #e8e8e8;
  cursor: pointer;
  border-radius: 0px;
  color: #666;
  background: #fff;
  width: 90px;
  font-size: 24px;
  line-height: 60px;
  text-align: center;
  height: 60px;
}
.add-update-preview ::v-deep .el-upload__tip {
  color: #666;
  font-size: 15px;
}

.add-update-preview .el-textarea ::v-deep .el-textarea__inner {
  border: 1px solid #e8e8e8;
  border-radius: 0px;
  padding: 12px;
  color: #666;
  background: #fff;
  width: 100%;
  font-size: 15px;
  min-height: 150px;
  height: auto;
}
.add-update-preview
  .el-textarea
  ::v-deep
  .el-textarea__inner[readonly="readonly"] {
  border: 0;
  cursor: not-allowed;
  border-radius: 0px;
  padding: 12px;
  color: #666;
  background: none;
  width: auto;
  font-size: 15px;
  min-width: 400px;
  height: auto;
}
.add-update-preview .el-form-item.btn {
  padding: 0;
  margin: 20px 0 0;
  .btn1 {
    border: 0px solid #ccc;
    cursor: pointer;
    border-radius: 6px;
    padding: 0 10px;
    margin: 0 10px 0 0;
    color: #fff;
    background: #0356bb;
    width: auto;
    font-size: 16px;
    min-width: 110px;
    height: 40px;
    .iconfont {
      margin: 0 2px;
      color: #fff;
      display: none;
      font-size: 14px;
      height: 40px;
    }
  }
  .btn1:hover {
    opacity: 0.8;
  }
  .btn2 {
    border: 0px solid #ccc;
    cursor: pointer;
    border-radius: 6px;
    padding: 0 10px;
    margin: 0 10px 0 0;
    color: #fff;
    background: #39c9ee;
    width: auto;
    font-size: 16px;
    min-width: 110px;
    height: 40px;
    .iconfont {
      margin: 0 2px;
      color: #fff;
      display: none;
      font-size: 14px;
      height: 34px;
    }
  }
  .btn2:hover {
    opacity: 0.8;
  }
  .btn3 {
    border: 0px solid #ccc;
    cursor: pointer;
    border-radius: 6px;
    padding: 0 10px;
    margin: 0 10px 0 0;
    color: #fff;
    background: #6ea0dc;
    width: auto;
    font-size: 16px;
    min-width: 110px;
    height: 40px;
    .iconfont {
      margin: 0 2px;
      color: #fff;
      display: none;
      font-size: 14px;
      height: 40px;
    }
  }
  .btn3:hover {
    opacity: 0.8;
  }
  .btn4 {
    border: 0px solid #ccc;
    cursor: pointer;
    border-radius: 6px;
    padding: 0 10px;
    margin: 0 10px 0 0;
    color: #fff;
    background: #4abcff;
    width: auto;
    font-size: 16px;
    min-width: 110px;
    height: 40px;
    .iconfont {
      margin: 0 2px;
      color: #fff;
      display: none;
      font-size: 14px;
      height: 40px;
    }
  }
  .btn4:hover {
    opacity: 0.8;
  }
  .btn5 {
    border: 0px solid #ccc;
    cursor: pointer;
    border-radius: 6px;
    padding: 0 10px;
    margin: 0 10px 0 0;
    color: #fff;
    background: #0977fd;
    width: auto;
    font-size: 16px;
    min-width: 110px;
    height: 40px;
    .iconfont {
      margin: 0 2px;
      color: #fff;
      display: none;
      font-size: 14px;
      height: 40px;
    }
  }
  .btn5:hover {
    opacity: 0.8;
  }
}
</style>