deepdragon/src/admin/views/renovation/scheme/compant/SCSB.vue

<template>
  <el-form :model="form" ref="userRef" label-width="100px">
    <el-row>
      <el-col :span="24">
        <el-form-item label="进水指标" prop="phonenumber">
          <el-descriptions
            class="margin-top"
            direction="vertical"
            :column="6"
            border
          >
            <el-descriptions-item v-for="item in inletlist">
              <template #label>
                <div class="cell-item">
                  {{ item.name }}
                </div>
              </template>
              <el-input
                v-model="item.value"
                placeholder="请输入"
                maxlength="11"
              />
            </el-descriptions-item>
          </el-descriptions>
          <!-- <el-icon :size="30" color="red"><CirclePlus /></el-icon> -->
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="出水指标" prop="phonenumber">
          <el-cascader
            v-model="cityValue"
            :options="citytype"
            :props="props"
            @change="handleChange"
          />
          <el-descriptions
            class="margin-top"
            direction="vertical"
            :column="10"
            style="margin-top: 10px"
            border
          >
            <el-descriptions-item v-for="item in outletlist">
              <template #label>
                <div class="cell-item">
                  {{ item.name }}
                </div>
              </template>

              <el-input
                v-model="item.value"
                placeholder="请输入"
                disabled
                maxlength="11"
              />
            </el-descriptions-item>
          </el-descriptions>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="粪大肠菌群">
          <el-radio-group v-model="form.coliformRemoval">
            <el-radio
              size="large"
              v-for="item in coliform_removal"
              v-key="item.value"
              :label="item.value"
              >{{ item.label }}</el-radio
            >
          </el-radio-group>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="填料方式">
          <el-radio-group v-model="form.packingMethod">
            <el-radio
              size="large"
              v-for="item in packing_method"
              v-key="item.value"
              :label="item.value"
              >{{ item.label }}</el-radio
            >
          </el-radio-group>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="吨数选型" prop="phonenumber">
          <el-select
            v-model="form.equipmentParamId"
            multiple
            :max-collapse-tags="3"
            placeholder="吨数选择"
            @change="changeSelect"
            style="width: 100%"
          >
            <el-option
              v-for="item in tonnageData"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
          <el-divider content-position="left"
            >相关设备参数与电费计算</el-divider
          >

          <el-table border :data="dataList">
            <el-table-column
            label="设备名称"
            align="center"
            prop="processingCapacity"
          >
         <template #default="scope">

              <div>{{ scope.row.equipment.equipmentName }}</div>
            </template>
        </el-table-column>
            <el-table-column
              label="处理量"
              align="center"
              prop="processingCapacity"
            >
           <template #default="scope">

                <div>{{ scope.row.capacityTonnage }}</div>
              </template>
          </el-table-column>

            <el-table-column label="水泵参数" align="center" prop="pumpParam" />
            <el-table-column
              label="水泵数量"
              align="center"
              prop="pumpQuantity"
            />
            <el-table-column label="气泵参数" align="center" prop="fanParam" />
            <el-table-column
              label="风机数量"
              align="center"
              prop="fanQuantity"
            />

            <el-table-column label="主要动力设备" align="center" prop="11">
              <div class="borderBt">水泵</div>
              <div>风机</div>
            </el-table-column>
            <el-table-column label="运行时间" align="center" prop="11">
              <template #default="scope">
                <div class="borderBt">{{ scope.row.pumpRuntime }}</div>
                <div>{{ scope.row.fanRuntime }}</div>
              </template>
            </el-table-column>

            <el-table-column label="装机功率" align="center" prop="11">
              <template #default="scope">
                <div class="borderBt">{{ scope.row.pumpInstalledPower }}</div>
                <div>{{ scope.row.fanInstalledPower }}</div>
              </template>
            </el-table-column>
            <el-table-column label="日均电耗" align="center" prop="11">
              <template #default="scope">
                <div class="borderBt">{{ scope.row.pumpDailyConsumption }}</div>
                <div>{{ scope.row.fanDailyConsumption }}</div>
              </template>
            </el-table-column>
            <el-table-column
              label="日总电耗"
              align="center"
              prop="totalDailyConsumption"
            />
            <el-table-column
              label="日吨水总电耗"
              align="center"
              prop="waterElectricityCost"
            />
            <el-table-column
              label="吨水电费"
              align="center"
              prop="waterElectricityCost"
            />
          </el-table>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>
<script setup>
import { treeRegionLevel, getData } from "@/api/renovation/scheme/discharge";
import { list } from "@/api/renovation/scheme/capacity";
import { list as equipmentEnergyConsumptionList  } from "@/api/renovation/scheme/equipmentEnergyConsumption";
const { proxy } = getCurrentInstance();
const { coliform_removal, technical_plan_type,packing_method } = proxy.useDict(
  "coliform_removal",
  "technical_plan_type","packing_method"
);

const props = defineProps({
  modelValue: {
    type: Object,
    default: () => {
      return {
        planId: null,
      };
    },
  },
  citytype:{
    type: Array,
    default: () => {
      return [];
    },
  }
});

const form = ref({
  waterIn: null,
  waterQualityStandardId: null,
  coliformRemoval: null,
  equipmentParamId: null,
});

const inletlist = ref([
  {
    name: "CODcr",
    value: "250~400",
  },
  {
    name: "NH3-N",
    value: "30~50",
  },
  {
    name: "TN",
    value: "40~65",
  },
  {
    name: "TP",
    value: "2.5~5.0",
  },
  {
    name: "SS",
    value: "100~200",
  },
  {
    name: "PH",
    value: "6~9",
  },
]);
const outletlist = ref([]);
const tonnageData = ref([]);

const tableDevice = ref([]);
const tableDict = ref([]);
const devicelist = ref([]);
const cityValue = ref([]);
const dataList = ref([]);
const citytype = ref(proxy.citytype)
console.log(proxy.modelValue);
function watchData(){
  watch(
  () => proxy.modelValue.planId,

  (newval, oldval) => {
    if (newval) {
      let newForm = proxy.modelValue;
      debugger
      citytype.value.forEach((element) => {
        let val = element.children.filter(
          (item) => newForm.waterQualityStandardId == item.value
        );
        if (val.length > 0) {
          cityValue.value = [element.label, val[0].value];
          handleChange(cityValue.value);
        }
      });

      form.value.equipmentParamId = newForm.equipmentDetail.map((item) => {
        return item?.capacityId;
      });

      changeSelect(form.value.equipmentParamId);
      form.value.coliformRemoval = newForm.coliformRemoval;
      form.value.packingMethod =newForm.packingMethod
    } else {
      rest();
    }
  },
  { immediate: true }
);


}

async function handleChange(params) {
  console.log(params);
  outletlist.value = [];
  let data = await getData(params[1]);
  form.value.waterQualityStandardId = params[1];
  const keyValue = [
    "standardId",
    "basisDoc",
    "createBy",
    "createTime",
    "level",
    "region",
    "updateBy",
    "updateTime",
  ];
  for (let item in data.data) {
    if (!keyValue.includes(item)) {
      outletlist.value.push({
        name: item,
        value: data.data[item],
      });
    }
  }
}
function changeSelect(value) {

  console.log(devicelist.value);
  dataList.value = [];
  dataList.value = devicelist.value.filter((item) =>
    value.includes(item.capacityId)
  );
}

const objectSpanMethod = ({ row, column, rowIndex, columnIndex }) => {
  if (columnIndex === 0 || columnIndex > 5) {
    if (rowIndex % 2 === 0) {
      return {
        rowspan: 2,
        colspan: 1,
      };
    } else {
      return {
        rowspan: 0,
        colspan: 0,
      };
    }
  }
};
async function getList() {
  let data = await list();
  let equipData =await equipmentEnergyConsumptionList();
  devicelist.value = equipData.rows;


  tonnageData.value = data.data.map((item, index) => {
    return {
      value: item.capacityId,
      label: item.capacityTonnage + "吨",
    };
  });
  watchData()
}
function rest() {
  form.value = {
    waterIn: null,
    waterQualityStandardId: null,
    coliformRemoval: null,
    equipmentParamId: null,
  };
  dataList.value = [];
}
function handleSubmit() {
  form.value.waterIn = inletlist.value.reduce((obj, item) => {
    obj[item.name] = item.value;
    return obj;
  }, {});
  form.value.equipmentDetail = dataList.value;
  return form.value;
}
defineExpose({
  handleSubmit,
  rest,
});
onMounted(() => {
  getList();

});
</script>
<style scope>
.borderBt {
  border-bottom: 1px solid #ebeef5;
  padding: 0 0 4px;
  margin: 5px;
}
</style>