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="类型选择">
          <el-radio-group v-model="form.speclevel">
            <el-radio
              size="large"
              v-for="item in spec_level"
              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-descriptions
            class="margin-top"
            direction="vertical"
            :column="8"
            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="请输入" />
            </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="出水指标">
          <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 />
            </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="加药量">
          <el-descriptions
          class="margin-top"
          style="width: 100%"
          :column="4"
          :size="size"
          border
        >
          <!-- <template #title>
            <el-button type="primary">Operation</el-button>
          </template> -->

          <el-descriptions-item>
            <template #label>
              <div class="cell-item">葡萄糖</div>
            </template>
            <el-input
              v-model="form.glucose"
              placeholder="请输入"
            />
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">碳酸钠</div>
            </template>
            <el-input
              v-model="form.na2co3"
              placeholder="请输入"
            />
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">PAC（28%）</div>
            </template>
            <el-input
              v-model="form.pac"
              placeholder="请输入"
            />
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">氯片</div>
            </template>
            <el-input
              v-model="form.naclo"
              placeholder="请输入"
            />
          </el-descriptions-item>
          </el-descriptions>





          <div>

          </div>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="费用价格">
          <el-descriptions
            class="margin-top"
            style="width: 100%"
            :column="3"
            :size="size"
            border
          >
            <!-- <template #title>
              <el-button type="primary">Operation</el-button>
            </template> -->

            <el-descriptions-item>
              <template #label>
                <div class="cell-item">人工费</div>
              </template>
              <el-input
                v-model="cost.laborCost"
                placeholder="请输入"
              />
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">okr提成</div>
              </template>
              <el-input
                v-model="cost.royaltyOKR"
                placeholder="请输入"
              />
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">其他部门提成</div>
              </template>
              <el-input
                v-model="cost.royaltyOther"
                placeholder="请输入"
              />
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">包装费</div>
              </template>
              <el-input
                v-model="cost.packingFee"
                placeholder="请输入"
              />
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">企业综合管理费</div>
              </template>
              <el-input
                v-model="cost.manageFee"
                placeholder="请输入"
              />
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">运输费</div>
              </template>
              <el-input
                v-model="cost.shippingFee"
                placeholder="请输入"
              />
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">管线安装/吊装/搬运费</div>
              </template>
              <el-input
                v-model="cost.buildingFee"
                placeholder="请输入"
              />
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">服务器租赁费</div>
              </template>
              <el-input
                v-model="cost.serverFee"
                placeholder="请输入"
              />
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">融资成本</div>
              </template>
              <el-input
                v-model="cost.financingCost"
                placeholder="请输入"
              />
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">投标代理费/场地/专家费/配合费</div>
              </template>
              <el-input
                v-model="cost.biddingFee"
                placeholder="请输入"
              />
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">増值税</div>
              </template>
              <el-input
                v-model="cost.vat"
                placeholder="请输入"
              />
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">其他</div>
              </template>
              <el-input
                v-model="cost.other"
                placeholder="请输入"
              />
            </el-descriptions-item>

          </el-descriptions>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="处理量选型">
          <el-tree-select
            v-model="form.equipmentParamId"
            :data="treeListData"
            :render-after-expand="false"
            multiple
            style="width: 100%"
          />
          <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,
  multipleConsumption,
} from "@/api/renovation/scheme/equipmentEnergyConsumption";
const { proxy } = getCurrentInstance();
const { coliform_removal, technical_plan_type, packing_method,spec_level } = proxy.useDict(
  "coliform_removal",
  "technical_plan_type",
  "packing_method",
  "spec_level"
);
import {
  list as equipmentList,
  treelist,
} from "@/api/renovation/scheme/equipment";
import { list as capList } from "@/api/renovation/scheme/capacity";

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

const form = ref({
  waterIn: null,
  waterQualityStandardId: null,
  coliformRemoval: null,
  equipmentParamId: null,
});
watch(
  () => props.planType,
  (val) => {
    form.equipmentParamId = [];
    if (val) gettreelist(val,null);
  }
);
watch(
  () => form.value.speclevel,
  (newval, oldval) => {
    if(newval){
     gettreelist(null,newval);
    }


   },
  { deep: true }

)
const inletlist = ref([
  {
    name: "cod",
    value: "250~400",
  },
  {
    name: "bod",
    value: "0~400",
  },
  {
    name: "nh3",
    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",
  },
  {
    name: "animalVegetableOil",
    value: "0~1",
  },
]);
const outletlist = ref([]);
const tonnageData = ref([]);
const treeListData = 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;
        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);
          }
        });

        gettreelist(newForm.planType,newForm.speclevel);
        form.value.equipmentParamId = newForm.equipmentDetail.map((item) => {
          return `${item.capacityId}-${item.equipmentId}`;
        });

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

        // changeSelect(form.value.equipmentParamId);
        form.value.coliformRemoval = newForm.coliformRemoval;
        form.value.packingMethod = newForm.packingMethod;
        form.value.speclevel = newForm.speclevel
        form.value.na2co3 = newForm.na2co3;
        form.value.pac = newForm.pac;
        form.value.naclo = newForm.naclo;
        form.value.glucose = newForm.glucose;
        cost.value=newForm?.cost||{
      laborCost:'',
      royaltyOKR:'',
      royaltyOther:'',
      packingFee:'',
      manageFee:'',
      shippingFee:'',
      buildingFee:'',
      serverFee:'',
      financingCost:'',
      biddingFee:'',
      vat:''
    }
      } else {
        rest();
      }
    },
    { immediate: true }
  );
}

async function handleChange(params) {
  console.log(params);
  outletlist.value = [];
  if (params[1]) {
    let data = await getData(params[1]);
    form.value.waterQualityStandardId = params[1];
    const keyValue = [
      "standardId",
      "basisDoc",
      "createBy",
      "createTime",
      "level",
      "region",
      "regionId",
      "updateBy",
      "updateTime",
    ];
    for (let item in data.data) {
      if (!keyValue.includes(item)) {
        outletlist.value.push({
          name: item,
          value: data.data[item],
        });
      }
    }
  } else {
    proxy.$modal.msgError("出水指标配置项错误，请联系管理员");
  }
}
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();
}
const cost=ref({})
function rest() {
  form.value = {
    waterIn: null,
    waterQualityStandardId: null,
    coliformRemoval: null,
    equipmentParamId: null,
    speclevel:0

  };
  cost.value={
      laborCost:'',
      royaltyOKR:'',
      royaltyOther:'',
      packingFee:'',
      manageFee:'',
      shippingFee:'',
      buildingFee:'',
      serverFee:'',
      financingCost:'',
      biddingFee:'',
      vat:''
    }
  dataList.value = [];
}
function handleSubmit() {
  form.value.waterIn = inletlist.value.reduce((obj, item) => {
    obj[item.name] = item.value;
    return obj;
  }, {});
  form.value.equipmentDetail = form.value.equipmentParamId.map((item) => {
    let data = item.split("-");
    return {
      capacityId: data[0],
      equipmentId: data[1],
    };
  });
  debugger
  form.value.cost=cost.value
  return { ...form.value };
}
defineExpose({
  handleSubmit,
  rest,
});
async function gettreelist(type,level) {
  type =type||props.planType
  level = level||form.value.speclevel
  let res = await treelist(type,level);
  let data = res.data;
  data.forEach((element) => {
    element.children.forEach((item) => {
      (item.label = `${item.label}(${element.label})`),
        (item.value = element.value + "-" + item.value);
    });
  });
  treeListData.value = data;
}

watch(
  () => form.value.equipmentParamId,
  (newVal, oldVal) => {
    console.log("新值：", newVal);
    if (
      Object.prototype.toString.call(newVal) == "[object Array]" &&
      newVal.length
    ) {
      let data = newVal.map((item) => {
        return {
          equipmentId: item.split("-")[1],
          capacityId: item.split("-")[0],
        };
      });
      multipleConsumption(data).then((res) => {
        dataList.value = res.data;
      });
    }

    // 在这里处理值变化后的逻辑
  }
);
onMounted(() => {
  getList();
});
</script>
<style scope>
.borderBt {
  border-bottom: 1px solid #ebeef5;
  padding: 0 0 4px;
  margin: 5px;
}
</style>