esswisdom_web/src/views/powerStation/addition.vue

<template>
  <div>
    <div class="card content-box">
      <div class="name">{{ supertype }}</div>
      <el-divider />
      <div class="user_box">
        <div class="user_left">
          <el-form ref="formRef" :model="numberValidateForm" label-width="auto" class="demo-ruleForm">
            <div class="elform">
              <div style="display: flex; align-items: center">
                <el-form-item label="电站名称" prop="powerName" :rules="[{ required: true, message: '请输入电站名称' }]">
                  <el-input
                    v-model="numberValidateForm.powerName"
                    style="width: 300px"
                    size="large"
                    type="text"
                    placeholder="请输入电站名称"
                    autocomplete="off"
                  />
                </el-form-item>
              </div>

              <el-form-item label="绑定设备" prop="emsId" :rules="[{ required: true, message: '请选择绑定设备' }]">
                <el-select
                  multiple
                  v-model="selectemsId"
                  placeholder="请选择绑定设备"
                  size="large"
                  style="width: 300px"
                  @change="onselect"
                >
                  <el-option v-for="item in equipmentdata" :key="item.eid" :label="item.emsDeviceId" :value="item.eid" />
                </el-select>
              </el-form-item>
            </div>
            <div class="elform">
              <el-form-item label="安装人">
                <el-input
                  v-model.number="numberValidateForm.installerName"
                  style="width: 300px"
                  size="large"
                  type="text"
                  placeholder="请输入安装人"
                  autocomplete="off"
                />
              </el-form-item>
              <el-form-item label="安装人联系电话">
                <el-input
                  v-model.number="numberValidateForm.contactPhone"
                  style="width: 300px"
                  size="large"
                  type="text"
                  placeholder="请输入安装人联系电话"
                  autocomplete="off"
                />
              </el-form-item>
            </div>
            <div class="elform">
              <!-- <el-form-item label="电站联系电话">
                <el-input
                  v-model.number="numberValidateForm.stationtelephone"
                  style="width: 300px"
                  size="large"
                  type="text"
                  placeholder="请输入电站联系电话"
                  autocomplete="off"
                />
              </el-form-item> -->
              <el-form-item label="电站地址" prop="keywordcategory" :rules="[{ required: true, message: '请输入电站地址' }]">
                <el-cascader
                  :props="props"
                  v-model="numberValidateForm.keywordcategory"
                  clearable
                  size="large"
                  placeholder="请选择服务地区"
                  @change="oncascader"
                  style="width: 300px; margin-right: 20px"
                />
              </el-form-item>
              <div class="elform1">
                <el-form-item label="投运时间" prop="operationDate" :rules="[{ required: true, message: '请选择投运时间' }]">
                  <el-date-picker
                    v-model="numberValidateForm.operationDate"
                    type="date"
                    size="large"
                    style="width: 300px"
                    placeholder="请选择投运时间"
                    format="YYYY-MM-DD"
                    value-format="YYYY-MM-DD"
                    :default-value="timedate"
                    :disabled-date="pickerOptions"
                  />
                </el-form-item>
              </div>
            </div>

            <div class="elform">
              <el-form-item label="装机功率" prop="installedPower" :rules="[{ required: true, message: '请输入装机功率' }]">
                <el-input
                  v-model="numberValidateForm.installedPower"
                  style="width: 300px"
                  size="large"
                  type="text"
                  placeholder="请输入装机功率"
                  autocomplete="off"
                />
              </el-form-item>
              <el-form-item label="装机容量" prop="installedCap" :rules="[{ required: true, message: '请输入装机功率' }]">
                <el-input
                  v-model="numberValidateForm.installedCap"
                  style="width: 300px"
                  size="large"
                  type="text"
                  placeholder="请输入装机容量"
                  autocomplete="off"
                />
              </el-form-item>
            </div>
            <!-- <div class="elform">
              <el-form-item label="并网点信息">
                <el-input
                  v-model.number="numberValidateForm.connection"
                  style="width: 300px"
                  size="large"
                  type="text"
                  placeholder="请输入并网点信息"
                  autocomplete="off"
                />
              </el-form-item>
              <el-form-item label="变压器信息">
                <el-input
                  v-model.number="numberValidateForm.transformer"
                  style="width: 300px"
                  size="large"
                  type="text"
                  placeholder="请输入变压器信息"
                  autocomplete="off"
                />
              </el-form-item>
            </div> -->
            <div class="elform">
              <!-- <div>
                <el-form-item label="站点变压器容量">
                  <el-input
                    v-model.number="numberValidateForm.transformercapacity"
                    style="width: 300px"
                    size="large"
                    type="text"
                    placeholder="请输入站点变压器容量"
                    autocomplete="off"
                  />
                </el-form-item>
              </div> -->

              <div class="elform1">
                <el-form-item label="电站图片">
                  <UploadImgs v-model:file-list="absoluteStationPicUr1" width="300px" :limit="9">
                    <template #empty>
                      <el-icon><Picture /></el-icon>
                      <span>请上传电站图片</span>
                    </template>
                    <template #tip>图片类型 __ jpg jpeg png</template>
                  </UploadImgs>
                </el-form-item>
              </div>
            </div>
            <div class="elform">
              <div class="elform1">
                <el-form-item label="电站布局图">
                  <UploadImgs v-model:file-list="layoutPicUr1" width="300px" :limit="9">
                    <template #empty>
                      <el-icon><Picture /></el-icon>
                      <span>请上传电站图片</span>
                    </template>
                    <template #tip>图片类型 __ jpg jpeg png</template>
                  </UploadImgs>
                </el-form-item>
              </div>
            </div>

            <el-divider />
            <el-form-item class="bottom">
              <el-button type="primary" @click="submitForm(formRef)">保存</el-button>
              <el-button @click="resetForm(formRef)">关闭</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>
<!--    -->
<script setup lang="ts">
import {
  updatesingleeditURL,
  editpowerURL,
  selectemssytemALLURL,
  insertpowerURL,
  getlistcountry,
  getliststate,
  getlistcity,
  getlistcounty
} from "@/api/home/Multisite";
import { CascaderOption, CascaderProps, FormInstance } from "element-plus";
import { onMounted, reactive, ref } from "vue";
import { useRouter, useRoute } from "vue-router";
import UploadImgs from "@/components/Upload/Imgs.vue";
const router = useRouter();
const route = useRoute();

const formRef = ref<FormInstance>();
const supertype = ref(route.query.type);
const selectedValue = ref([44]);
const absoluteStationPicUr1 = ref();
const layoutPicUr1 = ref();
const numberValidateForm = reactive({
  id: "",
  powerName: "", // 电站名称
  url: [], // 图片
  arrangementplan: [],
  // stationtelephone: "", // 电话
  emsId: "", //设备id
  address: "", // 地址
  installerName: "", // 安装人名称
  contactPhone: "", // 安装人电话
  installedPower: "", // 装机功率
  installedCap: "", //装机容量
  // connection: "",
  // transformer: "",
  // transformercapacity: "",
  operationDate: "", // 投运时间
  keywordcategory: selectedValue.value[0], // 国家id
  provinceCode: selectedValue.value[1], // 省id
  cityCode: selectedValue.value[2], // 市id
  countyCode: selectedValue.value[3] //区id
});
const timedate = ref();
const pickerOptions = (time: { getTime: (arg0: Date) => number }) => {
  return time.getTime(new Date()) > Date.now();
};

const submitForm = (formEl: FormInstance | undefined) => {
  console.log(numberValidateForm.emsId);

  if (!formEl) return;
  formEl.validate(async valid => {
    if (valid) {
      if (route.query.type == "电站新增") {
        // numberValidateForm.emsId;

        numberValidateForm.url = absoluteStationPicUr1.value.map((item: { url: any }) => item.url).join(", ");
        numberValidateForm.arrangementplan = layoutPicUr1.value.map((item: { url: any }) => item.url).join(", ");
        const { data } = await insertpowerURL(numberValidateForm);
        console.log(data);
      } else {
        numberValidateForm.url = absoluteStationPicUr1.value.map((item: { url: any }) => item.url).join(", ");
        numberValidateForm.arrangementplan = layoutPicUr1.value.map((item: { url: any }) => item.url).join(", ");
        const { data } = await updatesingleeditURL(numberValidateForm);
        console.log(data);
      }
      router.back();
    } else {
      console.log("error submit!");
      return false;
    }
  });
};
const selectemsId = ref();
const onselect = () => {
  numberValidateForm.emsId = selectemsId.value.join();
};
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
  router.push("/powerStation/index");
};
const yonghueditdata = ref();
const getghuedit = async () => {
  const { data } = await editpowerURL(route.query.id, {});
  yonghueditdata.value = data;

  numberValidateForm.id = yonghueditdata.value[0].powerId;
  numberValidateForm.powerName = yonghueditdata.value[0].stationName;
  numberValidateForm.installerName = yonghueditdata.value[0].installerName;
  numberValidateForm.url = yonghueditdata.value[0].url;
  numberValidateForm.arrangementplan = yonghueditdata.value[0].arrangementurl;
  selectemsId.value = [];
  for (let index = 0; index < yonghueditdata.value[0].emsid.length; index++) {
    let a = yonghueditdata.value[0].emsid[index].eid;
    selectemsId.value.push(a);
  }
  numberValidateForm.emsId = yonghueditdata.value[0].emsid;
  // numberValidateForm.address = yonghueditdata.value[0].address;
  numberValidateForm.contactPhone = yonghueditdata.value[0].contactPhone;
  numberValidateForm.installedPower = yonghueditdata.value[0].installedPower;
  numberValidateForm.installedCap = yonghueditdata.value[0].installedCap;
  numberValidateForm.operationDate = yonghueditdata.value[0].operationDate;
  absoluteStationPicUr1.value = [];
  for (let index = 0; index < yonghueditdata.value[0].url.length; index++) {
    absoluteStationPicUr1.value.push({
      url: yonghueditdata.value[0].url[index]
    });
  }
  layoutPicUr1.value = [];
  for (let index = 0; index < yonghueditdata.value[0].arrangementurl.length; index++) {
    layoutPicUr1.value.push({
      url: yonghueditdata.value[0].arrangementurl[index]
    });
  }
  grtselectemssytem();
};
// 选择设备编码
const equipmentdata = ref();
const grtselectemssytem = async () => {
  const { data } = await selectemssytemALLURL({});
  let arr = data;
  console.log(arr);
  const emsidArray = yonghueditdata.value[0].emsid as any[];
  const arrArray = arr as any[];

  equipmentdata.value = [...emsidArray, ...arrArray];
  console.log(equipmentdata.value);
};
// 地区
const countrydata = ref();
const statedata = ref();
const citydata = ref();
const countydata = ref();
// const selectedOptions = ref(44);
const props: CascaderProps = {
  lazy: true,
  checkStrictly: true,

  async lazyLoad(node, resolve) {
    if (node.level == 0) {
      // node为当前点击的节点，resolve为数据加载完成的回调(必须调用)
      let nodes: CascaderOption[] | undefined = [];
      // 构造查询条件 => 接口入参
      let params = {
        id: node.value // 入参名按照自己的接口来改
      };
      // 请求接口
      let { data } = await getlistcountry(params);
      // console.log(Object.values(data));
      if (data) {
        countrydata.value = data;
        countrydata.value.map((item: { id: any; chineseName: any }) => {
          let obj = {
            value: item.id,
            label: item.chineseName,
            leaf: node.level >= 3 // 当 node.level 层级达到2级时, 就不再请求接口
            // 具体要多少级才不请求接口, 根据层级修改
          };
          nodes?.push(obj);
        });
      }
      //重新加载节点
      resolve(nodes);
    } else if (node.level == 1) {
      // node为当前点击的节点，resolve为数据加载完成的回调(必须调用)
      let nodes: CascaderOption[] | undefined = [];
      // 构造查询条件 => 接口入参
      let params = {
        countryId: node.value // 入参名按照自己的接口来改
      };
      // 请求接口
      let { data } = await getliststate(params);
      if (data) {
        statedata.value = data;
        statedata.value.map((item: { id: any; chineseName: any }) => {
          let obj = {
            value: item.id,
            label: item.chineseName,
            leaf: node.level >= 3 // 当 node.level 层级达到2级时, 就不再请求接口
            // 具体要多少级才不请求接口, 根据层级修改
          };
          nodes?.push(obj);
        });
      }
      //重新加载节点
      resolve(nodes);
    } else if (node.level == 2) {
      // node为当前点击的节点，resolve为数据加载完成的回调(必须调用)
      let nodes: CascaderOption[] | undefined = [];
      // 构造查询条件 => 接口入参
      let params = {
        stateId: node.value // 入参名按照自己的接口来改
      };
      // 请求接口
      let { data } = await getlistcity(params);
      if (data) {
        citydata.value = data;
        citydata.value.map((item: { id: any; chineseName: any }) => {
          let obj = {
            value: item.id,
            label: item.chineseName,
            leaf: node.level >= 3 // 当 node.level 层级达到2级时, 就不再请求接口
            // 具体要多少级才不请求接口, 根据层级修改
          };
          nodes?.push(obj);
        });
      }
      //重新加载节点
      resolve(nodes);
    } else if (node.level == 3) {
      // node为当前点击的节点，resolve为数据加载完成的回调(必须调用)
      let nodes: CascaderOption[] | undefined = [];
      // 构造查询条件 => 接口入参
      let params = {
        cityId: node.value // 入参名按照自己的接口来改
      };
      // 请求接口
      let { data } = await getlistcounty(params);
      countydata.value = data;
      if (data) {
        countydata.value.map((item: { id: any; chineseName: any }) => {
          let obj = {
            value: item.id,
            label: item.chineseName,
            leaf: true // 当 node.level 层级达到2级时, 就不再请求接口
            // 具体要多少级才不请求接口, 根据层级修改
          };
          nodes?.push(obj);
        });
      }
      //重新加载节点
      resolve(nodes);
    }
  }
};
// 中国省市县
const oncascader = async (selectedValues: any) => {
  console.log(selectedValues);
  selectedValue.value = selectedValues;
};
onMounted(() => {
  if (route.query.type == "电站编辑") {
    getghuedit();
  } else {
    grtselectemssytem();
  }
});
</script>
<!-- 电站 -->
<style scoped lang="scss">
@import "./addition.scss";
</style>
<!-- -->