scmy/psdc-ui/src/views/system/energy/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="provinceCode" label-width="230px">
              <el-input v-model="addForm.provinceCode"/>
            </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="peopleNum" label-width="230px">
              <el-input v-model="addForm.peopleNum"/>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="人均gdp:" prop="averageGdp" label-width="290px">
              <el-input v-model="addForm.averageGdp"/>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="城市化率:" prop="ut" label-width="290px">
              <el-input v-model="addForm.ut"/>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="工业增加值:" prop="i1" label-width="230px">
              <el-input v-model="addForm.i1"/>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="工业能源强度:" prop="i2" label-width="290px">
              <el-input v-model="addForm.i2"/>
            </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="能源消耗量:" prop="CT" label-width="230px">
              <el-input v-model="addForm.CT"/>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="人口:" prop="peopleNum2" label-width="290px">
              <el-input v-model="addForm.peopleNum2"/>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="人均gdp:" prop="averageGdp2" label-width="290px">
              <el-input v-model="addForm.averageGdp2"/>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="城市化率:" prop="ut2" label-width="230px">
              <el-input v-model="addForm.ut2"/>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="电力价格:" prop="PR" label-width="290px">
              <el-input v-model="addForm.PR"/>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="年均温度:" prop="T" label-width="290px">
              <el-input v-model="addForm.T"/>
            </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="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="6" >
                <el-form-item label="能源消耗:" prop="sceneName" label-width="230px">
                  <el-input v-model="result.CE" placeholder=""/>
                </el-form-item>
              </el-col>
              <el-col :span="7">
                <el-form-item label="电力消耗:" prop="sceneName" label-width="290px">
                  <el-input v-model="result.CT" 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('0106').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: '',
  provinceCode: '',
  yearOutPut: '',
})
const ruleForm2 = ref({
  runCapacity: '',
  lastYearNeed: '',
  CT:  '', //能源消耗量
  peopleNum2:  '', //人口
  averageGdp2:  '', //人均gdp
  ut2:  '', //城市化率
  PR:  '', //电力价格
  T:  '' //年均温度
})
const ruleForm3 = ref({
  heatingArea: '',
  days: '',
  lastYearFee: '',
  peopleNum: '',
  averageGdp: '',
  ut: '',
  i1: '',
  i2: '',
  hotMedium: '',
  type: '',
  previousYearEnergyUsage: '',
})
const rules = reactive({
  devType: [
    { required: true, message: '请选择产品库', trigger: 'change' },
  ],
  previousYearEnergyUsage: [
    { required: true, message: '请输入替代前年能源用量', trigger: 'blur' },
  ],
  workArea: [
    { required: true, message: '请输入工作容积', trigger: 'blur' },
  ],
  provinceCode: [
    { 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' },
  ],
  CT: [
    { required: true, message: '请输入能源消耗量', trigger: 'blur' },
  ],
  peopleNum2: [
    { required: true, message: '请输入人口', trigger: 'blur' },
  ],
  averageGdp2: [
    { required: true, message: '请输入人均gdp', trigger: 'blur' },
  ],
  ut2: [
    { required: true, message: '请输入城市化率', trigger: 'blur' },
  ],
  PR: [
    { required: true, message: '请输入电力价格', trigger: 'blur' },
  ],
  T: [
    { 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' },
  ],
  peopleNum: [
    { required: true, message: '请输入人口', trigger: 'blur' },
  ],
  averageGdp: [
    { required: true, message: '请输入人均gdp', trigger: 'blur' },
  ],
  ut: [
    { required: true, message: '请输入城市化率', trigger: 'blur' },
  ],
  i1: [
    { required: true, message: '请输入工业增加值', trigger: 'blur' },
  ],
  i2: [
    { 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,
  peopleNum: null,
  averageGdp: null,
  ut: null,
  i1: null,
  i2: null,
  heatingArea: null,
  days: null,
  hotMedium: null,
  type: null,
  lastYearNeed: null,
  workArea: null,
  provinceCode: null,
  yearOutPut: null,
  previousYearEnergyUsage: null,
  runCapacity: null,
  CT: null,
  peopleNum2: null,
  averageGdp2: null,
  ut2: null,
  PR: null,
  T: null,
})
const result = ref({
  CE:'',
  CT:''
})
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": "0106",
                "provinceCode": addForm.provinceCode,
                "energyInfo": {
                  "peopleNum": Number(addForm.peopleNum),
                  "averageGdp":Number(addForm.averageGdp) ,
                  "ut":Number(addForm.ut) ,
                  "i1": Number(addForm.i1),
                  "i2":Number(addForm.i2)
                },
                "electricInfo": {
                  "CT":Number(addForm.CT) ,
                  "peopleNum": Number(addForm.peopleNum2),
                  "averageGdp": Number(addForm.averageGdp2),
                  "ut": Number(addForm.ut2),
                  "PR":Number(addForm.PR) ,
                  "T":Number(addForm.T)
                }
              },
              "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.peopleNum=  null
  addForm.averageGdp= null
  addForm.ut=null
  addForm.i1= null
  addForm.i2= null
  addForm.heatingArea = null
  addForm.days = null
  addForm.hotMedium = null
  addForm.type = null
  addForm.lastYearNeed = null
  addForm.runCapacity = null
  addForm.CT = null
  addForm.peopleNum2 = null
  addForm.averageGdp2 = null
  addForm.ut2 = null
  addForm.PR = null
  addForm.T = null
  addForm.key = null
  addForm.workArea = null
  addForm.provinceCode = 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>