scmy/psdc-ui/src/views/system/building/index.vue

<template>
  <div class="bod">
    <div class="inp">
      <div class="til">占比</div>
      <el-form :model="addForm"  label-width="88px">
        <el-row>
          <el-col :span="4.5" >
            <el-form-item label="效率占比" prop="devPower" label-width="210px">
              <el-input v-model="addForm.devPower" placeholder="效率占比，默认值为0.8"/>
            </el-form-item>
          </el-col>
          <el-col :span="4.5" >
            <el-form-item label="成本占比" prop="devPrice" label-width="280px">
              <el-input v-model="addForm.devPrice" placeholder="成本占比，默认值为0.2"/>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div class="til">需求信息</div>
      <el-form :model="addForm" ref="ruleForm1" :rules="rules" label-width="88px">
        <el-row>
          <el-col :span="6">
            <el-form-item label="工作容积（升）:" prop="workArea" label-width="230px">
              <el-input v-model="addForm.workArea"/>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="预计年产量（吨）:" prop="yearOutPut" label-width="290px">
              <el-input v-model="addForm.yearOutPut"/>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div class="til">原设备信息</div>
      <el-form :model="addForm" ref="ruleForm3" :rules="rules" label-width="88px">
        <el-row>
          <el-col :span="6">
            <el-form-item label="上年运行费用（元）:" prop="lastYearFee" label-width="230px">
              <el-input v-model="addForm.lastYearFee"/>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div class="til">配电信息</div>
      <el-form :model="addForm" ref="ruleForm2" :rules="rules" label-width="88px">
        <el-row>
          <el-col :span="6">
            <el-form-item label="变压器运行总容量(kVA):" prop="runCapacity" label-width="230px">
              <el-input v-model="addForm.runCapacity"/>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="上年最大需量(kW):" prop="lastYearNeed" label-width="290px">
              <el-input v-model="addForm.lastYearNeed"/>
            </el-form-item>
          </el-col>
          <el-divider></el-divider>
          <el-col :span="8">
            <el-form-item label="密钥:" prop="key" label-width="110px">
              <el-input v-model="addForm.key"/>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <div class="bot">
        <el-button type="primary" @click="submitForm">计 算</el-button>
        <el-button @click="cancel">重 置</el-button>
      </div>
    </div>
    <div class="result" v-if="show2">
      <div class="til">方案评分</div>
      <div class="point">
        <el-form  ref="userRef" label-width="300px">
          <el-row>
            <el-col :span="8" v-for="(item,index) in result.matchedDeviceList" :key="index" >
              <el-form-item :label="item.planName">
                <el-rate
                    v-model="item.rat"
                    disabled
                    show-score
                    :score-template="item.rating"
                    text-color="#ffffff"
                    class="rate"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </div>
    <div class="result" v-if="show1">
      <div class="til">
        方案详情
      </div>
      <div class="info">
        <div class="card">
          一、整体情况
        </div>
        <div class="card">
          <el-form :model="result"  label-width="140px">
            <el-row>
              <el-col :span="4" style="margin-left: 70px">
                <el-form-item label="初次投资费用(元):" prop="sceneName">
                  <el-input v-model="result.startCost" placeholder=""/>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item label="年运行费用(元):" prop="sceneName">
                  <el-input v-model="result.yearRunCost" placeholder=""/>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item label="年总费用(元):" prop="sceneName">
                  <el-input v-model="result.yearCost" placeholder=""/>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item label="年减碳量(吨):" prop="sceneName">
                  <el-input v-model="result.calculate" placeholder=""/>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item label="替代电量(千瓦时):" prop="sceneName">
                  <el-input v-model="result.electric" placeholder=""/>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
        <div class="card">
          二、方案优势
        </div>
        <div class="card">
          <el-form :model="result"  label-width="140px">
            <el-row>
              <el-col :span="5">
                <el-form-item label="安全性:" prop="sceneName">
                  <el-input v-model="result.safety" placeholder=""/>
                </el-form-item>
              </el-col>
              <el-col :span="5">
                <el-form-item label="环保性:" prop="sceneName">
                  <el-input v-model="result.environment" placeholder=""/>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="经济性:" prop="sceneName">
                  <el-input v-model="result.economy" placeholder=""/>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="智能性:" prop="sceneName">
                  <el-input v-model="result.intelligence" placeholder=""/>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
        <div class="card">
          三、需配置设备情况
        </div>
        <div class="card">
          <el-form :model="result"  label-width="140px">
            <el-row v-for="(item,index) in result.deviceList" :key="index">
              <el-col :span="6">
                <el-form-item label="设备细类:" prop="sceneName">
                  <el-input v-model="item.devSubType" placeholder=""/>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="技术类型:" prop="sceneName">
                  <el-input v-model="item.devTechType" placeholder=""/>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="数量(台/套):" prop="sceneName">
                  <el-input v-model="item.devCount" placeholder=""/>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="设备单价(元):" prop="sceneName">
                  <el-input v-model="item.devPrice" placeholder=""/>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
        <div class="card">
          四、Json
        </div>
        <div>
          <json-viewer :value="textarea"></json-viewer>
        </div>
      </div>

    </div>

    <div class="inp">
      <div class="til">产品库</div>
      <el-form :model="addForm" ref="ruleForm1" :rules="rules" label-width="88px">
        <el-row>
          <el-col :span="4.5" v-for="(item,index) in options" :key="index">
            <el-form-item :label="item.devTechType" prop="" label-width="300px">
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
  </div>
</template>

<script setup>
import {ElMessage, ElMessageBox} from 'element-plus'
import {ref, reactive, watch, onMounted} from "vue";
import {modelTest,getDevList} from '../../../api/emonitor/api'
const textarea = ref('')
const open = ref(true)
const arr = ref([1])
const point = ref(3.7)
const point1 = ref('78')
const show1 = ref(false)
const show2 = ref(false)
const test1 = ref(null)
const test2= ref(null)
const test3 = ref(null)
const test4 = ref(null)
const test5 = ref(null)
const test6 = ref(null)
const test7 = ref(null)
const test8 = ref(null)
const test9 = ref(null)
const test10 = ref(null)
const test11 = ref(null)
const test12 = ref(null)
const test13 = ref(null)
const role1 = ref(false)
const role2 = ref(false)
const role3 = ref(false)

onMounted(()=>{
  getDevList('0104').then((res)=>{
    options.value=res.data
  })
})

const devSpecList = ref([
  {
    "devType": '',
    "heatEfficiency":'',
    "devTechType": '',
    "devSubstituteLaborCost":'',
    "devReferenceArea":'',
    "devPower":'' ,
    "devSubType": '',
    "devPrice":'' ,
    "devServiceLife":'',
    "laborCost":'' ,
    "id": "1"
  }
])
function addDev (){
  devSpecList.value.push({
    "devType": '',
    "heatEfficiency":'',
    "devTechType": '',
    "devSubstituteLaborCost":'',
    "devReferenceArea":'',
    "devPower":'' ,
    "devSubType": '',
    "devPrice":'' ,
    "devServiceLife":'',
    "laborCost":'' ,
    "id": "1"
  })
}
function delDev (){
  devSpecList.value.pop()
}
const options = ref([{
  label: '电锅炉', value: 1
}, {label: '热泵', value: 2}])
const options3 = ref([{
  label: '专变', value: 1
}, {label: '公变', value: 2}])
const options4 = ref([{
  label: '机关', value: 1},
  {label: '医院', value: 2},
  {label: '学校', value: 3},
  {label: '商业办公楼', value: 4},
  {label: '酒店', value: 5},
  {label: '其他', value: 6},
])
const options5 = ref([{
  label: '风机盘管', value: 1},
  {label: '地暖', value: 2},
  {label: '暖气片', value: 3},
  {label: '无末端', value: 4},
])
const options6 = ref([{
  label: '是', value: 1
}, {label: '否', value: 2}])
const options7 = ref([{
  label: '供暖', value: 1
}, {label: '供冷', value: 2},{label: '热水s', value: 3}])
const options8 = ref([{
  label: '煤', value: 1},
  {label: '油', value: 2},
  {label: '气', value: 3},
  {label: '汽', value: 4},
])
const options1 = ref([{
  label: '供冷电锅炉', value: 1
},
  {label: '供暖电锅炉', value: 2},
  {label: '工业供热电锅炉', value: 3},
  {label: '供暖', value: 4},
  {label: '供冷', value: 5},
])
const options2 = ref([
  {label: '直热式电锅炉（电阻类）', value: 1},
  {label: '直热式电锅炉（电极类）', value: 2},
  {label: '直热式电锅炉（电磁涡流类）', value: 3},
  {label: '蓄热式电锅炉（固体蓄热）', value: 4},
  {label: '蓄热式电锅炉（相变蓄热）', value: 5},
  {label: '蓄热式电锅炉（水蓄）', value: 6},
  {label: '水源热泵', value: 7},
  {label: '土壤源热泵', value: 8},
  {label: '空气源热泵', value: 9},
  {label: '低品位余热源（如电厂低温循环水）热泵', value: 10},
  {label: '高温蒸汽热泵', value: 11},
])
const ruleForm1 = ref({
  key: '',
  devType: '',
  devSubType: '',
  devTechType: '',
  devPower: '',
  devPrice: '',
  devSubstituteLaborCost: '',
  laborCost: '',
  devReferenceArea: '',
  devServiceLife: '',
  devAnnualOperationTime: '',
  heatEfficiency: '',
  remarkInfo: '',
  workArea: '',
  yearOutPut: '',
})
const ruleForm2 = ref({
  runCapacity: '',
  lastYearNeed: '',
})
const ruleForm3 = ref({
  heatingArea: '',
  days: '',
  lastYearFee: '',
  hotMedium: '',
  type: '',
  previousYearEnergyUsage: '',
})
const rules = reactive({
  devType: [
    { required: true, message: '请选择产品库', trigger: 'change' },
  ],
  previousYearEnergyUsage: [
    { required: true, message: '请输入替代前年能源用量', trigger: 'blur' },
  ],
  workArea: [
    { required: true, message: '请输入工作容积', trigger: 'blur' },
  ],
  yearOutPut: [
    { required: true, message: '请输入预计年产量', trigger: 'blur' },
  ],
  devSubType: [
    { required: true, message: '请选择设备细类', trigger: 'change' },
  ],
  devTechType: [
    { required: true, message: '请选择技术类型', trigger: 'change' },
  ],
  devPower: [
    { required: true, message: '请输入效率占比', trigger: 'blur' },
  ],
  devPrice: [
    { required: true, message: '请输入成本占比', trigger: 'blur' },
  ],
  devSubstituteLaborCost: [
    { required: true, message: '请输入电替代设备年人工费用', trigger: 'blur' },
  ],
  laborCost: [
    { required: true, message: '请输入原设备的人工费用', trigger: 'blur' },
  ],
  devReferenceArea: [
    { required: true, message: '请输入单台电设备参考的可供暖面积', trigger: 'blur' },
  ],
  devServiceLife: [
    { required: true, message: '请输入设备使用年限', trigger: 'blur' },
  ],
  devAnnualOperationTime: [
    { required: true, message: '请输入设备年运行时长', trigger: 'blur' },
  ],
  heatEfficiency: [
    { required: true, message: '请输入热效率', trigger: 'blur' },
  ],
  remarkInfo: [
    { required: true, message: '请输入备注', trigger: 'blur' },
  ],
  runCapacity: [
    { required: true, message: '请输入变压器运行总容量', trigger: 'blur' },
  ],
  lastYearNeed: [
    { required: true, message: '请输入上年最大需量', trigger: 'blur' },
  ],
  heatingArea: [
    { required: true, message: '请输入建筑面积', trigger: 'blur' },
  ],
  days: [
    { required: true, message: '请输入年采暖时间', trigger: 'blur' },
  ],
  lastYearFee: [
    { required: true, message: '请输入上年运行费用', trigger: 'blur' },
  ],
  hotMedium: [
    { required: true, message: '请输入模型编码', trigger: 'blur' },
  ],
  type: [
    { required: true, message: '请输入场景编码', trigger: 'blur' },
  ],
  key: [
    { required: true, message: '请输入密钥', trigger: 'blur' },
  ],
})
const addForm = reactive({
  id: null,
  key:"BEjYotMIsJnTb29NZPfk973npvgw8AXPGAoe1c4RQSL2MAlo0SVUiAL5SE5tEeWLVpzWpaQTY4iqakUY4CsKuVdVc/jeJNjHCoSCtXikiR8jdTDgwMP0AUIZBhFjfg3+80XK48inw2WYvDkH4NCsU2DbeEWGCrHFHl+usA6c/MTl2xbm9tt/4vETVcaUy4r5LuDIJ777lu6AIv9Lq7I392Dkx8+oEuzODBHYq2BNIN70+e/lgeYIm4lpEzzyRU47",
  devType: null,//电锅炉or热泵
  devSubType: null,
  devTechType: null,
  heatEfficiency: null,
  devPower: 0.8,
  devPrice: 0.2,
  devSubstituteLaborCost: null,
  laborCost: null,
  devReferenceArea: null,
  devServiceLife: null,
  devAnnualOperationTime: null,
  remarkInfo: null,
  lastYearFee: null,
  heatingArea: null,
  days: null,
  hotMedium: null,
  type: null,
  lastYearNeed: null,
  workArea: null,
  yearOutPut: null,
  previousYearEnergyUsage: null,
  runCapacity: null,
})
const result = ref({
  calculate:'',
  devCost:'',
  devCount:'',
  devPrice:'',
  devSubType:'',
  devTechType:'',
  economy:'',
  electric:'',
  environment:'',
  intelligence:'',
  matchedDeviceList:[],
  planInfos:'',
  startCost:'',
  yearCost:'',
  yearRunCost:'',
  safety:'',
  deviceList:[],
})
watch(() => addForm.devType, (newVale, oldValue) => {
  if (addForm.devType === 1) {
    options1.value = [
      {label: '供冷电锅炉', value: 1},
      {label: '供暖电锅炉', value: 2},
      {label: '工业供热电锅炉', value: 3},
    ]
    options2.value = [
      {label: '直热式电锅炉（电阻类）', value: 1},
      {label: '直热式电锅炉（电极类）', value: 2},
      {label: '直热式电锅炉（电磁涡流类）', value: 3},
      {label: '蓄热式电锅炉（固体蓄热）', value: 4},
      {label: '蓄热式电锅炉（相变蓄热）', value: 5},
      {label: '蓄热式电锅炉（水蓄）', value: 6},
    ]
  } else if (addForm.devType === 2) {
    options1.value = [
      {label: '供暖', value: 4},
      {label: '供冷', value: 5},
    ]
    options2.value = [
      {label: '水源热泵', value: 7},
      {label: '土壤源热泵', value: 8},
      {label: '空气源热泵', value: 9},
      {label: '低品位余热源（如电厂低温循环水）热泵', value: 10},
      {label: '高温蒸汽热泵', value: 11},
    ]
  }

})
const submitForm = () => {
  ruleForm1.value.validate((valid) => {
    if (valid) {
      // 表单验证通过，执行计算逻辑
      role1.value=true
      // 你可以在这里调用计算函数或者进行其他操作
    } else {
      // 表单验证失败
      role1.value=false
      return false;
    }
  });
  ruleForm2.value.validate((valid) => {
    if (valid) {
      // 表单验证通过，执行计算逻辑
      role2.value=true
      // 你可以在这里调用计算函数或者进行其他操作
    } else {
      // 表单验证失败
      role2.value=false
      return false;
    }
  });
  ruleForm3.value.validate((valid) => {
    if (valid) {
      // 表单验证通过，执行计算逻辑
      role3.value=true
      // 你可以在这里调用计算函数或者进行其他操作
    } else {
      // 表单验证失败
      role3.value=false
      return false;
    }
  });
  setTimeout(()=>{
    addForm.devPower= +addForm.devPower
    addForm.devPrice= +addForm.devPrice
    console.log(addForm.devPower,addForm.devPrice,addForm.devPower+addForm.devPrice)
    if(addForm.devPower+addForm.devPrice==1){
      if (role1.value&&role2.value&&role3.value){
        console.log('表单验证通过')
        modelTest(
            {
              "param": {
                "type": "0104",
                "heatUseNeedInfo": {
                  "workArea": addForm.workArea,
                  "yearOutPut": addForm.yearOutPut
                },
                "originalDevInfo": {
                  "lastYearFee": addForm.lastYearFee
                },
                "distInfo": {
                  "lastYearNeed": addForm.lastYearNeed,
                  "runCapacity": addForm.runCapacity
                }
              },
              "key": addForm.key
            }
        ).then((res)=>{
          console.log(res)
          if(res.report.message){
            ElMessage({
              message: res.report.message,
              type: 'error',
            })
          }else{
            if(res.report===null || res.report==={}){
              ElMessage({
                message: '计算失败，请检查密钥是否准确',
                type: 'error',
              })
            }else{
              result.value=res.report
              textarea.value=res.report
              show1.value = true
            }
          }


        })

      }else{
        console.log('表表单验证失败')
      }
    }else{
      ElMessage({
        message: '效率占比和成本占比相加必须为1',
        type: 'error',
      })
    }
  },1000)
};

function cancel() {
  ruleForm1.value.resetFields();
  ruleForm2.value.resetFields();
  ruleForm3.value.resetFields();
  show1.value = false
  addForm.devType = null
  addForm.heatEfficiency = null
  addForm.devTechType = null
  addForm.devSubstituteLaborCost = null
  addForm.devReferenceArea = null
  addForm.devPower = 0.8
  addForm.devSubType = null
  addForm.devPrice = 0.2
  addForm.devServiceLife = null
  addForm.laborCost = null
  addForm.lastYearFee = null
  addForm.heatingArea = null
  addForm.days = null
  addForm.hotMedium = null
  addForm.type = null
  addForm.lastYearNeed = null
  addForm.runCapacity = null
  addForm.key = null
  addForm.workArea = null
  addForm.yearOutPut = null
  addForm.previousYearEnergyUsage = null
  devSpecList.value=[
    {
      "devType": '',
      "heatEfficiency":'',
      "devTechType": '',
      "devSubstituteLaborCost":'',
      "devReferenceArea":'',
      "devPower":'' ,
      "devSubType": '',
      "devPrice":'' ,
      "devServiceLife":'',
      "laborCost":'' ,
      "id": "1"
    }
  ]
};
</script>

<style scoped lang="scss">
.rate {
  --el-rate-text-color: #ff9900;
}

.bod {
  padding: 20px;
  height: 91vh;
  overflow-y: auto;
  .inp {
    border: 1px solid white;
    padding: 20px;
    .til {
      font-size: 16px;
      color: #ff9900;
      margin-bottom: 20px;
    }
    .bot{
      text-align: right;
    }
  }

  .result {
    margin-top: 20px;
    border: 1px solid white;
    padding: 20px;

    .point {

    }

    .til {
      font-size: 16px;
      color: #ff9900;
      margin-bottom: 20px;
    }

    .info {
      .card {
        margin-top: 20px;
      }
    }
  }
}
</style>