能源监控

src/views/energy/monitoring/energyLimit/components/energyLimitAdd.vue

@@ -1,7 +1,14 @@
 <template>
   <el-form ref="form" :rules="rules" label-width="100px" :model="form">
     <el-form-item label="监控对象" prop="objectId">
-      <el-input v-model="form.objectId"></el-input>
+      <el-cascader
+        style='width: 100%;'
+        v-model="objIds"
+        :options="objList"
+        :props="{ checkStrictly: true, value: 'id', label: 'name' }"
+        popper-class="cascaderParent"
+        @change="selectObj"
+        clearable></el-cascader>
     </el-form-item>
     <el-form-item label="能源类型" prop="energyTypeId">
       <el-select v-model="form.energyTypeId" placeholder="请选择" style="width: 100%;">
@@ -15,11 +22,11 @@
     </el-form-item>
     <el-form-item label="监控模式" prop="type">
       <el-select v-model="form.type" placeholder="请选择" style="width: 100%;" @change="typeChange">
-        <el-option label="合并" value= "1" ></el-option>
-        <el-option label="详细" value= "2" ></el-option>
+        <el-option label="合并" :value= "1" ></el-option>
+        <el-option label="详细" :value= "2" ></el-option>
       </el-select>
     </el-form-item>
-    <el-form-item label="监控详细参数" prop="plcParamId" v-if="form.type === '2'">
+    <el-form-item label="监控详细参数" prop="plcParamId" v-if="form.type === 2">
       <el-select v-model="form.plcParamId" placeholder="请选择" style="width: 100%;">
         <el-option
           v-for="item in getDictDatas(DICT_TYPE.ENERGY_UNIT)"
@@ -29,13 +36,23 @@
         </el-option>
       </el-select>
     </el-form-item>
-    <el-form-item label="消耗量阈值" prop="code">
-      <el-input v-model="form.code"></el-input>
+    <el-form-item label="指标类型" prop="limitType">
+      <el-select v-model="form.limitType" placeholder="请选择" style="width: 100%;">
+        <el-option
+          v-for="item in getDictDatas(DICT_TYPE.MONITOR_INDEX_TYPE)"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value">
+        </el-option>
+      </el-select>
+    </el-form-item>
+    <el-form-item label="消耗量阈值" prop="limitValue">
+      <el-input v-model="form.limitValue"></el-input>
     </el-form-item>
   </el-form>
 </template>
 <script>
-import { getEnergyParamList, getEnergyType, updateEnergyType, createEnergyType } from '@/api/monitoring/energyLimit'
+import { getEnergyLimit, updateEnergyLimit, createEnergyLimit } from '@/api/monitoring/energyLimit'
 export default {
   name: 'energyLimitAdd',
   props: {
@@ -45,35 +62,43 @@ export default {
       default: () => {
         return []
       }
+    },
+    objList: {
+      type: Array,
+      default: () => []
     }
   },
   data() {
     return {
       form: {
         id: '',
-        name: '',
-        code: '',
-        nuit: '',
-        pricingMethod: 1,
-        leaderName: ''
+        objectId: '',
+        type: '',
+        plcParamId: '',
+        limitType: '',
+        limitValue: ''
       },
+      objIds: [],// 回显数组
       isEdit: false, //是否是编辑
       rules: {
-        name: [{ required: true, message: '能源类型不能为空', trigger: 'blur' }]
+        objectId: [{ required: true, message: '对象不能为空', trigger: 'change' }],
+        energyTypeId: [{ required: true, message: '能源类型不能为空', trigger: 'change' }],
+        type: [{ required: true, message: '监控模式不能为空', trigger: 'change' }]
       }
     }
   },
   methods: {
     init(id) {
-      // getEnergyParamList().then((res) => {
-      //   console.log(res)
-      // })
       if (id) {
         this.isEdit = true
         this.form.id = id
-        getEnergyType( id ).then((res) => {
+        getEnergyLimit( id ).then((res) => {
           if (res.code === 0) {
             this.form = res.data
+            this.form.limitType = this.form.limitType + ''
+            console.log(this.objList)
+            this.objIds = this.changeDetSelect(this.form.objectId, this.objList)
+            console.log(this.objIds)
           }
         })
       } else {
@@ -82,77 +107,50 @@ export default {
       }
     },
     typeChange() {
-      // if (this.form.type === '2') {
-
-      // } else  {
-
-      // }
+      this.form.plcParamId = ''
+    },
+    // 递归处理分类回显问题
+    changeDetSelect(key, treeData) {
+      let arr = [] // 递归时操作的数组
+      let returnArr = [] // 存放结果的数组
+      let depth = 0 // 定义全局层级
+      // 定义递归函数
+      function childrenEach(childrendData, depthN) {
+        for (var j = 0; j < childrendData.length; j++) {
+          depth = depthN
+          arr[depthN] = childrendData[j].id
+          if (childrendData[j].id == key) {
+            returnArr = arr.slice(0, depthN + 1)
+            break
+          } else {
+            if (childrendData[j].children) {
+              depth++
+              childrenEach(childrendData[j].children, depth)
+            }
+          }
+        }
+        return returnArr
+      }
+      return childrenEach(treeData, depth)
+    },
+    selectObj(val) {
+      this.form.objectId = val[val.length-1]
+      this.form.objectType = val.length-1
     },
     submitForm() {
       this.$refs['form'].validate((valid) => {
         if (valid) {
-          switch(this.form.pricingMethod) {
-            case 0:// 时间段
-              if (this.tableData1.length === 0) {
-                this.$modal.msgError('时间段表格数据不能为空')
-                return false
-              } else {
-                this.tableData1.map(item => {
-                  if (item.price <= 0) {
-                    this.$modal.msgError('单价有误请检查，请检查')
-                    return false
-                  }
-                })
-              }
-              break;
-            case 1:// 使用量
-              if (this.tableData2.length === 0) {
-                this.$modal.msgError('使用量表格数据不能为空')
-                return false
-              } else {
-                this.tableData1.map(item => {
-                  if (item.price <= 0) {
-                    this.$modal.msgError('单价有误请检查，请检查')
-                    return false
-                  }
-                })
-              }
-              break;
-            default:// 固定单价
-              if (!this.form.singlePrice) {
-                this.$modal.msgError('单价有误请检查1，请检查')
-                  return false
-              }
-          }
+          // this.form.limitType = Number(this.form.limitType)
           if (this.isEdit) {
             // 编辑
-            updateEnergyType({
-              id: this.form.id,
-              code: this.form.code,
-              name: this.form.name,
-              unit: this.form.unit,
-              pricingMethod: this.form.pricingMethod,
-              description: this.form.description,
-              singlePrice: this.form.pricingMethod === 2 ? this.form.singlePrice : '',
-              segPriceList: this.form.pricingMethod === 0 ? this.tableData1: [],
-              usedPriceList: this.form.pricingMethod === 1 ? this.tableData2: []
-            }).then((res) => {
+            updateEnergyLimit({...this.form}).then((res) => {
               if (res.code === 0) {
                 this.$modal.msgSuccess("操作成功");
                 this.$emit('successSubmit')
               }
             })
           } else {
-            createEnergyType({
-              code: this.form.code,
-              name: this.form.name,
-              unit: this.form.unit,
-              pricingMethod: this.form.pricingMethod,
-              description: this.form.description,
-              singlePrice: this.form.pricingMethod === 2 ? this.form.singlePrice : '',
-              segPriceList: this.form.pricingMethod === 0 ? this.tableData1: [],
-              usedPriceList: this.form.pricingMethod === 1 ? this.tableData2: []
-            }).then((res) => {
+            createEnergyLimit({...this.form}).then((res) => {
               if (res.code === 0) {
                 this.$modal.msgSuccess("操作成功");
                 this.$emit('successSubmit')
@@ -171,3 +169,8 @@ export default {
   }
 }
 </script>
+<style>
+.cascaderParent .el-cascader-panel .el-scrollbar:first-child .el-radio {
+  display: none;
+}
+</style>