能源监控

src/views/energy/base/energyPlcConnect/components/energyPlcConnectAdd.vue

@@ -1,24 +1,28 @@
 <template>
   <el-form ref="form" :rules="rules" label-width="100px" :model="form">
-    <el-row>
-      <el-col :span="12">
-        <el-form-item label="关联表名" prop="plcId">
-          <el-select v-model="form.plcId" placeholder="请选择" style="width: 100%;">
-            <el-option
-              v-for="item in plcList"
-              :key="item.id"
-              :label="item.plcTableName"
-              :value="item.id">
-            </el-option>
-          </el-select>
-        </el-form-item>
-      </el-col>
-      <el-col :span="12">
-        <el-form-item label="对象" prop="code">
-          <el-input v-model="form.code"></el-input>
-        </el-form-item>
-      </el-col>
-    </el-row>
+    <el-form-item label="关联表名" prop="plcId">
+      <el-select v-model="form.plcId" placeholder="请选择" style="width: 100%;">
+        <el-option
+          v-for="item in plcList"
+          :key="item.id"
+          :label="item.plcTableName"
+          :value="item.id">
+        </el-option>
+      </el-select>
+    </el-form-item>
+    <el-form-item label="对象" prop="bindObjectId">
+      <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="remark">
+      <el-input v-model="form.remark"/>
+    </el-form-item>
   </el-form>
 </template>
 <script>
@@ -26,20 +30,27 @@ import { getEnergyPlcConnect, updateEnergyPlcConnect, createEnergyPlcConnect } f
 import { getEnergyPlcAll } from '@/api/base/energyPlc'
 export default {
   name: 'EnergyPlcConnectAdd',
+  props: {
+    objList: {
+      type: Array,
+      default: () => []
+    },
+  },
   data() {
     return {
       form: {
         id: '',
         plcId: '',
         bindObjectId: '',
-        bindObjectType: ''
+        bindObjectType: '',
+        remark: ''
       },
+      objIds: [],// 回显数组
       plcList: [],
       isEdit: false, //是否是编辑
       rules: {
-        plcTableName: [{ required: true, message: '关联表名不能为空', trigger: 'blur' }],
-        code: [{ required: true, message: '关联表编码不能为空', trigger: 'blur' }],
-        name: [{ required: true, message: '标识名称不能为空', trigger: 'blur' }]
+        plcId: [{ required: true, message: '关联表名不能为空', trigger: 'change' }],
+        bindObjectId: [{ required: true, message: '对象不能为空', trigger: 'change' }]
       }
     }
   },
@@ -54,7 +65,7 @@ export default {
         getEnergyPlcConnect( id ).then((res) => {
           if (res.code === 0) {
             this.form = res.data
-            this.form.collection = this.form.collection === 0 ? false : true
+            this.objIds = this.changeDetSelect(this.form.bindObjectId, this.objList)
           }
         })
       } else {
@@ -62,10 +73,37 @@ export default {
         this.form.id = ''
       }
     },
+    // 递归处理分类回显问题
+    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.bindObjectId = val[val.length-1]
+      this.form.bindObjectType = val.length-1
+    },
     submitForm() {
       this.$refs['form'].validate((valid) => {
         if (valid) {
-          this.form.collection = this.form.collection === false ? 0 : 1
           if (this.isEdit) {
             // 编辑
             updateEnergyPlcConnect({...this.form}).then((res) => {
@@ -88,9 +126,19 @@ export default {
       })
     },
     formClear() {
-      this.$refs.form.resetFields()
+      this.form.id = ''
+      this.form.plcId = ''
+      this.form.bindObjectId = ''
+      this.form.bindObjectType = ''
+      this.form.remark = ''
+      this.objIds = []
       this.isEdit = false
     }
   }
 }
 </script>
+<style>
+.cascaderParent .el-cascader-panel .el-scrollbar:first-child .el-radio {
+  display: none;
+}
+</style>

src/views/energy/base/energyPlcConnect/components/energyPlcParam.vue

@@ -7,9 +7,9 @@
             <el-input v-model="plcTableName" size='small' readonly></el-input>
           </el-form-item>
           <el-form-item label="对象">
-            <el-input v-model="bindObjectType" size='small' readonly></el-input>
+            <el-input v-model="objName" size='small' readonly></el-input>
           </el-form-item>
-          <el-form-item v-if="showBtn&&this.$auth.hasPermi('base:energy-plc-param:create')">
+          <el-form-item v-if="showBtn">
             <el-button type="success" size='small' plain @click="addNew">新增</el-button>
           </el-form-item>
         </el-form>
@@ -105,7 +105,7 @@ export default {
         connectId: null
       },
       plcTableName: '',
-      bindObjectType: '',
+      objName: '',
       // 弹出层标题
       addOrEditTitle: "",
       // 是否显示弹出层
@@ -128,7 +128,7 @@ export default {
       this.visible = true
       this.queryParams.connectId = data.id
       this.plcTableName = data.plcTableName
-      this.bindObjectType = data.bindObjectType
+      this.objName = data.objName
       this.getList()
       if (title === 'view') {
         this.showBtn = false
@@ -136,19 +136,15 @@ export default {
       } else {
         this.showBtn = true
         this.tableBtn = [
-          this.$auth.hasPermi('base:energy-plc-param:update')
-            ? {
-                type: 'edit',
-                btnName: '编辑'
-              }
-            : undefined,
-          this.$auth.hasPermi('base:energy-plc-param:delete')
-            ? {
-                type: 'delete',
-                btnName: '删除'
-              }
-            : undefined
-        ].filter((v) => v)
+          {
+            type: 'edit',
+            btnName: '编辑'
+          },
+          {
+            type: 'delete',
+            btnName: '删除'
+          }
+        ]
       }
     },
     getList() {

src/views/energy/base/energyPlcConnect/components/energyPlcParamView.vue

@@ -1,127 +0,0 @@
-<template>
-  <div>
-    <el-drawer title="参数绑定" :visible.sync="visible" size="70%">
-      <div class="box">
-        <el-form :inline="true">
-          <el-form-item label="关联表名">
-            <el-input v-model="plcTableName" size='small' readonly></el-input>
-          </el-form-item>
-          <el-form-item label="对象">
-            <el-input v-model="bindObjectType" size='small' readonly></el-input>
-          </el-form-item>
-        </el-form>
-        <base-table
-          :page="queryParams.pageNo"
-          :limit="queryParams.pageSize"
-          :table-props="tableProps"
-          :table-data="tableData"
-          :max-height="tableH"
-        />
-        <pagination
-          :page.sync="queryParams.pageNo"
-          :limit.sync="queryParams.pageSize"
-          :total="total"
-          @pagination="getList"
-        />
-      </div>
-    </el-drawer>
-  </div>
-</template>
-<script>
-import { getEnergyPlcParamPage } from '@/api/base/energyPlcParam'
-import { publicFormatter } from '@/utils/dict'
-const tableProps = [
-  {
-    prop: 'typeId',
-    label: '能源类型'
-  },
-  {
-    prop: 'plcParamName',
-    label: '参数列名'
-  },
-  {
-    prop: 'name',
-    label: '参数名称'
-  },
-  {
-    prop: 'unit',
-    label: '单位',
-    filter: publicFormatter('energy_unit')
-  },
-  {
-    prop: 'collection',
-    label: '是否采集'
-  },
-  {
-    prop: 'description',
-    label: '描述'
-  }
-]
-const tableBtn = [
-  {
-    type: 'edit',
-    btnName: '编辑'
-  },
-  {
-    type: 'delete',
-    btnName: '删除'
-  }
-]
-export default {
-  name: 'EnergyPlcParamView',
-  data() {
-    return {
-      visible: false,
-      tableProps,
-      tableData: [],
-      tableBtn,
-      tableH: this.tableHeight(115),
-      total: 0,
-      queryParams: {
-        pageNo: 1,
-        pageSize: 30,
-        connectId: null
-      },
-      plcTableName: '',
-      bindObjectType: '',
-      collectionList: [
-        {value: 0,label: '否'},
-        {value: 1,label: '是'}
-      ]
-    }
-  },
-  created() {
-    window.addEventListener('resize', () => {
-      this.tableH = this.tableHeight(115)
-    })
-  },
-  methods: {
-    init(data) {
-      this.visible = true
-      this.queryParams.connectId = data.id
-      this.plcTableName = data.plcTableName
-      this.bindObjectType = data.bindObjectType
-      this.getList()
-    },
-    getList() {
-      getEnergyPlcParamPage({...this.queryParams}).then((res) => {
-        let arr = res.data.list || [];
-        arr&&arr.map(item => {
-          this.collectionList.map(i => {
-            if (item.collection === i.value) {
-              item.collection = i.label
-            }
-          })
-        })
-        this.tableData = arr
-        this.total = res.data.total;
-      })
-    }
-  }
-}
-</script>
-<style lang="scss" scoped>
-.box {
-  padding: 0 32px;
-}
-</style>