zhny_ui/demo/ny_code/src/components/Popover.vue

<script lang="ts" setup>
import { ref, reactive, watch } from "vue";
import type { FormInstance, FormRules } from "element-plus";
import { RuleForm } from "@/hooks";
import { modelGroup } from "../scene/models";
import { resetLines } from "../scene/lines";

const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false,
  },
});

watch(
  () => props.modelValue,
  (val: boolean) => {
    show.value = val;
  }
);

const emits = defineEmits(["confirm"]);

const formRef = ref<FormInstance>();
const show = ref<boolean>(false);
const formData = ref<RuleForm>({
  kll: "",
  jj: "",
  nzd: "",
  wzd: "",
  snwd: "",
  swwd: "",
  cndc: "",
  ydsd: "",
  startTime: "",
  endTime: "",
  gfdl: "",
  fddl: "",
  zydl: "",
  pm2_5: "",
  CO_2: "",
  kqzl: "",
});

const rules = reactive<FormRules<RuleForm>>({
  // startTime: [
  //   {
  //     type: "date",
  //     required: true,
  //     message: "Please pick a date",
  //     trigger: "change",
  //   },
  // ],
  // endTime: [
  //   {
  //     type: "date",
  //     required: true,
  //     message: "Please pick a time",
  //     trigger: "change",
  //   },
  // ],
});

const open = () => {
  show.value = true;
};

const close = () => {
  show.value = false;
};

const submitForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.validate((valid) => {
    if (valid) {
      console.log("submit!");
      resetMap();
      emits("confirm", formData.value);
      close();
    } else {
      console.log("error submit!");
      return false;
    }
  });
};

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
  resetMap();
};

const resetMap = () => {
  resetLines();
  const light = modelGroup.getObjectByName("负荷外光");
  //@ts-ignore
  light.material.opacity = 1;
  const text = document.getElementById("load");
  //@ts-ignore
  for (let e of text.lastElementChild.children) {
    let first = e.firstElementChild as any;
    let last = e.lastElementChild as any;
    if (first.innerText.indexOf("灯光亮度") !== -1) {
      last.innerText = 1 * 100 + "%";
    }
  }
};

defineExpose({
  open,
  close,
});
</script>

<template>
  <div
    v-bind="$attrs"
    class="popover fixed z-10 border-2 border-cyan-300 bg-sky-900/80"
    :style="{
      top: '85px',
      right: '570px',
    }"
    name="popover"
    v-show="show"
    @click.stop=""
  >
    <div
      class="w-[402px] h-[63px] bg-[url('assets/images/layout/strategy/title.png')]"
    ></div>
    <div class="w-[402px] p-2 pr-8">
      <el-form
        ref="formRef"
        :model="formData"
        :rules="rules"
        label-width="100px"
        class="demo-ruleForm"
      >
        <!-- 客流节能 -->
        <el-form-item label="客流人数" prop="kll">
          <el-input v-model="formData.kll" placeholder="请输入客流量" />
        </el-form-item>
        <!-- 时间节能 -->
        <el-form-item label="时间段" prop="jj">
          <el-select v-model="formData.jj" placeholder="请输入选择季节">
            <el-option :key="0" label="夏季" :value="'夏季'" />
            <el-option :key="1" label="冬季" :value="'冬季'" />
          </el-select>
        </el-form-item>
        <!-- 光照节能 -->
        <el-form-item label="光照度" prop="wzd">
          <el-input v-model="formData.wzd" placeholder="请输入光照度" />
        </el-form-item>
        <!-- <el-form-item label="室内光照度" prop="nzd">
          <el-input v-model="formData.nzd" placeholder="请输入室内光照度" />
        </el-form-item> -->
        <!-- 温度节能 -->
        <!-- <el-form-item label="室外温度" prop="swwd">
          <el-input v-model="formData.swwd" placeholder="室外温度" />
        </el-form-item> -->
        <el-form-item label="温度" prop="snwd">
          <el-input v-model="formData.snwd" placeholder="请输入温度" />
        </el-form-item>
        <el-form-item label="储能当前电量" prop="cndc">
          <el-input v-model="formData.cndc" placeholder="请输入储能当前电量" />
        </el-form-item>
        <!-- 网储互动 -->
        <el-form-item label="用电时段" prop="ydsd">
          <el-time-select
            v-model="formData.ydsd"
            placeholder="用电时段"
            start="08:30"
            step="00:15"
            end="23:30"
          />
          <!-- <el-col :span="11">
            <el-time-select
              v-model="formData.startTime"
              :max-time="formData.endTime"
              class="mr-4"
              placeholder="开始时间"
              start="08:30"
              step="00:15"
              end="18:30"
            />
          </el-col>
          <el-col :span="2" class="text-center">
            <span class="text-gray-500">-</span>
          </el-col>
          <el-col :span="11">
            <el-time-select
              v-model="formData.endTime"
              :min-time="formData.startTime"
              placeholder="结束时间"
              start="08:30"
              step="00:15"
              end="18:30"
            /> -->
          <!-- </el-col> -->
        </el-form-item>
        <!-- 源源互补 -->
        <!-- <el-form-item label="光伏发电量"> -->
        <el-form-item label="光伏发电量" prop="gfdl">
          <el-input v-model="formData.gfdl" placeholder="请输入光伏电量" />
        </el-form-item>
        <el-form-item label="风电发电量" prop="fddl">
          <el-input v-model="formData.fddl" placeholder="请输入风电电量" />
        </el-form-item>
        <!-- <el-form-item
            label="用能电量"
            prop="yndl"
            :rules="[{ required: true, message: '请输入用能电量' }]"
          >
            <el-input v-model="formData.yndl" placeholder="请输入用能电量" />
          </el-form-item> -->
        <!-- </el-form-item> -->
        <!-- 源荷互动 -->
        <!-- <el-form-item label="源荷互动"> -->
        <!-- <el-form-item label="总用电量" prop="zydl">
          <el-input v-model="formData.zydl" placeholder="请输入总发电量" />
        </el-form-item> -->
        <!-- 新风系统节能  -->
        <el-form-item label="空气质量" prop="kqzl">
          <el-select v-model="formData.kqzl" placeholder="请输入选择空气质量">
            <el-option :key="0" label="优" :value="'优'" />
            <el-option :key="1" label="良" :value="'良'" />
            <el-option :key="1" label="中" :value="'中'" />
            <el-option :key="1" label="差" :value="'差'" />
          </el-select>
        </el-form-item>
        <!-- <el-form-item label="室外PM2.5" prop="pm2_5">
          <el-input
            v-model="formData.pm2_5"
            placeholder="请输入室外PM2.5浓度"
          />
        </el-form-item>
        <el-form-item label="室内CO²浓度" prop="pm2_5">
          <el-input v-model="formData.CO_2" placeholder="请输入室外PM2.5浓度" />
        </el-form-item> -->
        <el-form-item>
          <el-button type="info" @click="resetForm(formRef)">清空</el-button>
          <el-button type="primary" @click="submitForm(formRef)"
            >确定</el-button
          >
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>