告警规则

src/api/iot/alarmRule.js

@@ -8,7 +8,7 @@ export function getAddAlarmRuleInit() {
   })
 }
 
-// 根据报警规则ID获取规则数据 
+// 根据报警规则ID获取规则数据
 export function getAlarmRule(alarmRuleId) {
   return request({
     url: `/iot/iot_alarm/getRuleById/${alarmRuleId}`,
@@ -38,10 +38,41 @@ export function saveAlarmRule(data) {
   })
 }
 
-// 根据报警规则ID删除规则数据 
+// 根据报警规则ID删除规则数据
 export function deleteRuld(alarmRuleId) {
   return request({
     url: `/iot/iot_alarm/deleteRule/${alarmRuleId}`,
     method: 'get',
   })
-}
+}
+
+/**
+ * 动环告警设备关联详情
+ * @param data
+ * @returns {*}
+ */
+export function alarmDeviceDetail(data) {
+  return request({
+    url: '/iot/iot_alarm_device/detail',
+    method: 'post',
+    data: data
+  })
+}
+
+export function device(data) {
+  return request({
+    url: '/iot/iot_alarm_device/device',
+    method: 'post',
+    data: data
+  })
+}
+
+export function saveDevice(data) {
+  return request({
+    url: '/iot/iot_alarm_device/update',
+    method: 'post',
+    data: data
+  })
+}
+
+

src/main.js

@@ -57,7 +57,7 @@ import "@/utils/dialogdrag.js";
 // 水印组件
 import watercom from '@/components/waterCom.vue'
 //日历组件
-import VCalendar from 'v-calendar';
+// import VCalendar from 'v-calendar';
 // 全局方法挂载
 Vue.prototype.getDicts = getDicts;
 //根据参数键名查询参数值
@@ -112,9 +112,9 @@ Vue.use(Element, {
   size: sessionStorage.getItem("size") || "medium", // set element-ui default size
 });
 
-Vue.use(VCalendar, {
+/*Vue.use(VCalendar, {
   componentPrefix: 'v',  // Use <vc-calendar /> instead of <v-calendar />
-});
+});*/
 
 Vue.config.productionTip = false;
 

src/views/warnRule/addDialogCom.vue

@@ -55,7 +55,7 @@
 
       <div class="sonruleDiv">
         <el-time-picker placeholder="开始时间" value-format="HH:mm:ss" v-model="item.times" is-range range-separator="至"
-          @input="timeInput(item.times)" clearable=false clear-icon="">
+          @input="timeInput(item.times)" :clearable="false" clear-icon="">
 
         </el-time-picker>&nbsp;&nbsp;
         <el-select v-model="item.fieldcode" placholeder="请选择属性" @change="sourceTypeItemChanged(item, item.fieldcode)">
@@ -130,15 +130,15 @@ export default {
         }
       }
       if (newData.operator == undefined || newData.operator == "") {
-        if (this.sourceTypeList != undefined && this.sourceTypeList.length > 0 
-        && this.sourceTypeList[0].operatorsList != undefined 
+        if (this.sourceTypeList != undefined && this.sourceTypeList.length > 0
+        && this.sourceTypeList[0].operatorsList != undefined
         && this.sourceTypeList[0].operatorsList.length > 0) {
           newData.operator = this.sourceTypeList[0].operatorsList[0].key
         }
       }
       if (newData.value == undefined || newData.value == "") {
         if (this.sourceTypeList != undefined && this.sourceTypeList.length > 0
-          && this.sourceTypeList[0].specsList != undefined 
+          && this.sourceTypeList[0].specsList != undefined
           && this.sourceTypeList[0].specsList.length > 0) {
           newData.value = this.sourceTypeList[0].specsList[0].key
           newData.valueText = this.sourceTypeList[0].specsList[0].value;

src/views/warnRule/addRelvance.vue

@@ -2,8 +2,9 @@
   <el-dialog
     :title="title"
     :visible.sync="visible"
-    width="1000px"
+    width="80%"
     top="10vh"
+    :close-on-click-modal="false"
     append-to-body
     @opened="open"
     @closed="closed"
@@ -19,18 +20,23 @@
           >
             <el-form-item label="组织机构：">
               <tree-select
-            v-model="left.condition.orgId"
-            :options="deptOptions"
-            :show-count="true"
-            :normalizer="tenantIdnormalizer"
-            :props="{ checkStrictly: true, label: 'name' }"
-            placeholder="请选择归属机构"
-            clearValueText="清除"
-            :noChildrenText="''"
-            @select="leftSearch"
-            noOptionsText="没有数据"
-            noResultsText="没有搜索结果"
-          />
+                v-model="left.condition.orgId"
+                :searchable="searchable"
+                :default-expand-level="level"
+                :normalizer="tenantIdnormalizer"
+                :options="treeList"
+                :show-count="true"
+                :props="{ checkStrictly: true, label: 'name' }"
+                placeholder="请选择归属机构"
+                clearValueText="清除"
+                :noChildrenText="''"
+                @select="leftTreeSelect"
+                noOptionsText="没有数据"
+                noResultsText="没有搜索结果"
+              />
+            </el-form-item>
+            <el-form-item >
+              <el-checkbox v-model="left.condition.searchChild" @change="leftSearch">是否包含下级</el-checkbox>
             </el-form-item>
             <el-form-item label="名称：">
               <el-input
@@ -84,19 +90,24 @@
           >
             <el-form-item label="组织机构：">
               <tree-select
-            v-model="right.condition.orgId"
-            :options="deptOptions"
-            :show-count="true"
-            :normalizer="tenantIdnormalizer"
-            :props="{ checkStrictly: true, label: 'name' }"
-            placeholder="请选择归属机构"
-            clearValueText="清除"
-            :noChildrenText="''"
-            @select="rightSearch"
-            noOptionsText="没有数据"
-            noResultsText="没有搜索结果"
-          />
-             
+                v-model="right.condition.orgId"
+                :searchable="searchable"
+                :options="treeList"
+                :default-expand-level="level"
+                :normalizer="tenantIdnormalizer"
+                :show-count="true"
+                :props="{ checkStrictly: true, label: 'name' }"
+                placeholder="请选择归属机构"
+                clearValueText="清除"
+                :noChildrenText="''"
+                @select="rightTreeSelect"
+                noOptionsText="没有数据"
+                noResultsText="没有搜索结果"
+              />
+
+            </el-form-item>
+            <el-form-item >
+              <el-checkbox v-model="right.condition.searchChild" @change="rightSearch">是否包含下级</el-checkbox>
             </el-form-item>
             <el-form-item label="名称：">
               <el-input
@@ -139,33 +150,83 @@
   </el-dialog>
 </template>
 <script>
-
+import { mapGetters, mapMutations } from "vuex";
+import {device} from "@/api/iot/alarmRule";
+const defaultData = {
+  left: {
+    condition: {
+      orgId: null,
+      deviceName: "",
+      searchChild: false,
+    },
+    total: 0,
+    selectedCount: 0,
+    selectedRows: [],
+    data: [],
+  },
+  right: {
+    condition: {
+      orgId: null,
+      deviceName: "",
+      searchChild: false,
+    },
+    total: 0,
+    selectedCount: 0,
+    selectedRows: [],
+    data: [],
+  },
+}
 export default {
   name: "ruleBindDevice",
   props: {
-    // boundDevices: {
-    //   type: Array,
-    //   default: new Array(),
-    // },
-    deviceType: {
-      type: [Number, String],
-      required: false,
+    currentTempList: {
+      type: Array,
+      default: new Array(),
     },
     typeText: {
       type: String,
       required: false,
       default: "报警防区",
     },
+    customRequest: {
+      type: Function,
+    },
+    hangsheTree: {
+      type: Boolean,
+      default: false,
+    },
+    businessTree: {
+      type: Boolean,
+      default: false,
+    },
+    wholeTree: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  watch: {
+    // currentTempList: function (data) {
+    //   this.right.data = data
+    //   this.boundDevicesClone = data;
+    // }
   },
   data() {
     return {
       title: "选择报警防区设备",
+      level: 1,
+      clearable: true,
+      searchable: true,
       visible: false,
+      deviceType:null,
       loading: false,
+      treeList: [],
+      deptOptions:[],
+      boundDevicesClone:[],
       left: {
         condition: {
-          orgId: 0,
+          orgId: null,
           deviceName: "",
+          searchChild: false,
         },
         total: 0,
         selectedCount: 0,
@@ -174,53 +235,103 @@ export default {
       },
       right: {
         condition: {
-          orgId: 0,
+          orgId: null,
           deviceName: "",
+          searchChild: false,
         },
         total: 0,
         selectedCount: 0,
         selectedRows: [],
         data: [],
       },
+      rightOrgIds:[],
+      boundDeviceIds:[],
+      searchDevices:[],
     };
   },
   created() {
     this.boundDevicesClone = [];
   },
+  mounted() {
 
-  mounted() {},
+  },
   methods: {
+    tenantIdnormalizer(node, instanceId) {
+      if (node.children && !node.children.length) {
+        delete node.children;
+      }
+      return {
+        id: node.id,
+        label: node.shortName,
+        children: node.children,
+      };
+    },
+    orgTree(){
+      if (this.customRequest) {
+        this.customRequest().then((response) => {
+          this.treeList = response.data;
+          return;
+        });
+      } else {
+        if (this.hangsheTree) {
+          this.treeList = this.$store.getters.depTree;
+        }
+        else if(this.businessTree)
+        {
+          this.treeList = this.$store.getters.businessTree;
+        }
+        else if(this.wholeTree)
+        {
+          this.treeList = this.$store.getters.wholeTree;
+        }
+        else {
+          this.treeList = this.$store.getters.orgTree;
+        }
+        console.log(this.treeList)
+      }
+    },
+    getChildIds(orgTree,parentId){
+      if(parentId){
+        orgTree.forEach((v,i) => {
+          if(v.path.indexOf(parentId) != -1){
+            this.rightOrgIds.push(v.id);
+          }
+
+          if( v.children &&  v.children.length > 0){
+            this.getChildIds(v.children,parentId);
+          }
+        });
+      }
+    },
     open() {
-      // this.left.condition.orgId = this.loginUser.org.id;
-      // this.boundDevicesClone = this.boundDevices
-      //   ? this.boundDevices.map((d) => d)
-      //   : new Array();
-      // this.boundDeviceIds = this.boundDevicesClone.map((d) => d.deviceId);
-      // this.title = `选择${this.typeText}设备`;
-      // this.leftSearch();
-      // this.rightSearch();
+      this.right.data = this.currentTempList;
+      this.boundDevicesClone = this.currentTempList;
     },
     showDialog() {
       this.visible = true;
     },
     hideDialog() {
       this.visible = false;
+      this.left = defaultData.left;
+      this.right = defaultData.right;
+      this.searchDevices = [];
+      this.boundDeviceIds = [];
+      this.boundDevicesClone = [];
     },
     closed() {
-      this.left.data = [];
-      this.left.condition.deviceName = "";
-      this.left.condition.orgId = 0;
-      this.right.data = [];
-      this.right.condition.deviceName = "";
-      this.right.condition.orgId = 0;
+      this.left = defaultData.left;
+      this.right = defaultData.right;
+      this.searchDevices = [];
+      this.boundDeviceIds = [];
+      this.boundDevicesClone = [];
     },
-    handleLeftOrgNodeClick(node) {
-      this.left.condition.orgId = node.orgId;
+    leftTreeSelect(node){
+      this.left.condition.orgId = node.id;
       this.leftSearch();
     },
-    handleRightOrgNodeClick(node) {
-      this.right.condition.orgId = node.orgId;
-      this.RightSearch();
+    rightTreeSelect(node){
+      this.right.condition.orgId = node.id;
+      this.rightSearch();
     },
     handleLeftSelectionChange(val) {
       this.left.selectedCount = val.length;
@@ -234,17 +345,27 @@ export default {
       this.right.condition.orgName = node.orgName;
     },
     handleAdd() {
+      this.right.condition.orgId = null;
+      this.right.condition.searchChild = false;
+      this.right.condition.deviceName = null;
       let addData = this.left.selectedRows.filter(
         (row) => this.boundDeviceIds.indexOf(row.deviceId) < 0
       );
-      addData.map((row) => {
-        let clone = { ...row };
-        this.right.data.push(clone);
-        this.boundDevicesClone.push(clone);
-        this.boundDeviceIds.push(clone.deviceId);
-      });
+      if(addData.length > 0){
+        addData.forEach((i,v) => {
+          this.right.data.push(i);
+          this.boundDevicesClone.push(i);
+        });
+        this.boundDeviceIds = this.boundDevicesClone.map((d) => d.deviceId);
+
+        this.left.data = this.searchDevices.filter((row) => this.boundDeviceIds.indexOf(row.deviceId) < 0)
+      }
+      this.leftSearch();
     },
     handleRemove() {
+      this.right.condition.orgId = null;
+      this.right.condition.searchChild = false;
+      this.right.condition.deviceName = null;
       let rightSelectedDeviceIds = this.right.selectedRows.map(
         (r) => r.deviceId
       );
@@ -255,9 +376,13 @@ export default {
         (d) => rightSelectedDeviceIds.indexOf(d.deviceId) < 0
       );
       this.boundDeviceIds = this.boundDevicesClone.map((d) => d.deviceId);
+
+      this.left.data = this.searchDevices.filter((row) => this.boundDeviceIds.indexOf(row.deviceId) < 0)
+      if(this.left.condition.orgId){
+        this.leftSearch();
+      }
     },
     leftSearch() {
-      return;
       let { condition } = this.left;
       if (
         this.left.prevCondition &&
@@ -266,30 +391,49 @@ export default {
         return;
       }
       this.left.prevCondition = { ...condition };
-      this.$api.alarmRule
-        .getDevice(
-          condition.orgId,
-          condition.deviceName,
-          this.deviceType,
-          0,
-          9999
-        )
-        .then((result) => {
-          this.left.data = result.content;
+      let params = {
+        orgId:condition.orgId,
+        deviceName:condition.deviceName,
+        type:this.deviceType,
+        includeSub:condition.searchChild,
+        page:0,
+        size:9999
+      }
+      device(params).then((result) => {
+          this.searchDevices = result.data.records;
+          this.boundDeviceIds = this.boundDevicesClone.map((d) => d.deviceId);
+          let data = result.data.records.filter((row) => this.boundDeviceIds.indexOf(row.deviceId) < 0);
+          this.left.data = data;
         });
     },
     rightSearch() {
       const { condition } = this.right;
-      this.right.data = this.boundDevicesClone
-        .filter(
-          (d) =>
-            !condition.deviceName || d.deviceName.includes(condition.deviceName)
-        )
-        .filter((d) => !condition.orgId || d.orgId == condition.orgId);
-    },
+      if(this.boundDevicesClone.length > 0){
+        if(!this.right.condition.searchChild){
+          this.right.data = this.boundDevicesClone
+            .filter(
+              (d) =>
+                !condition.deviceName || d.deviceName.includes(condition.deviceName)
+            )
+            .filter((d) => !condition.orgId || d.orgId == condition.orgId);
+        }else{
+          this.getChildIds(this.treeList,condition.orgId);
+          let data = this.boundDevicesClone
+            .filter(
+              (d) =>
+                !condition.deviceName || d.deviceName.includes(condition.deviceName)
+            );
+          if(this.rightOrgIds.length > 0){
+            this.right.data = data.filter((d) => this.rightOrgIds.indexOf(d.orgId) > 0);
+          }
+        }
+
 
+      }
+
+    },
     onOK() {
-      this.$emit("ok", this.boundDevicesClone);
+      this.$emit("addDevice", this.boundDevicesClone);
       this.hideDialog();
     },
   },
@@ -297,15 +441,17 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@ctlButtonWidth: 80px;
+.dialog-footer{
+  float: right;
+}
+::v-deep .el-dialog__footer{
+  height: 60px;
+}
 .controller {
   margin: auto;
   width: 80px;
   top: calc(50% - 30px);
   position: relative;
-
-  
-
   .remove{
     margin-top: 20px;
     margin-left: 0px;
@@ -342,4 +488,5 @@ export default {
   display: block;
   text-align: right;
 }
+
 </style>

src/views/warnRule/dialog.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="edu-training-edit">
-    <DialogCom :title="title" :visible.sync="isShow" width="63.5%" @close="onWindowClose">
+    <DialogCom :title="title" :visible.sync="isShow" width="80%" @close="onWindowClose">
       <el-form :model="formData" size="small" ref="form" :inline="true" label-position="right" label-width="160px"
         label-suffix=":" :rules="rules">
         <el-form-item label="规则名称" prop="ruleName">

src/views/warnRule/index.vue

@@ -74,7 +74,11 @@
             </el-table-column>
             <el-table-column label="描述" prop="iotAlarmRule.remark"> </el-table-column>
 
-            <el-table-column label="设备数" prop="wlzt"> </el-table-column>
+            <el-table-column label="设备数" prop="deviceNum">
+              <template slot-scope="item">
+                <span style="white-space: pre-line">{{getDeviceNumber(item.row)}}</span>
+              </template>
+            </el-table-column>
             <el-table-column label="操作" fixed="right" style="width: 100px" align="center"
               class-name="small-padding fixed-width">
               <template slot-scope="scope">
@@ -88,9 +92,9 @@
             </el-table-column>
           </el-table>
 
-          <dialog-info ref="infoDialog" @success="getList()"></dialog-info>
+          <dialog-info ref="infoDialog" @success="handleQuery()"></dialog-info>
           <!-- 关联设备 -->
-          <relevanceDialog ref="relevanceDialog"> </relevanceDialog>
+          <relevanceDialog ref="relevanceDialog" @success="handleQuery()"> </relevanceDialog>
           <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
             :limit.sync="queryParams.pageSize" @pagination="getList" />
         </div>
@@ -151,7 +155,6 @@ export default {
     /** 查询监控调阅任务列表 */
     async getList() {
       this.loading = true;
-
       let rh = await iotApi.getAlarmRules("alarm", this.queryParams.ruleName, this.queryParams.pageNum, this.queryParams.pageSize);
       if (rh.code != 200) {
         this.$message("获取数据失败");
@@ -179,7 +182,7 @@ export default {
 
           let ruleGroups = alarmRule.iotAlarmRuleExpressEditVosBySourceType;
           ruleGroups.forEach(ruleGroup => {
-           
+
             ruleGroup.appAlarmRuleExpressList.forEach(ruleItem => {
               ruleItem.sourceName = "";
               ruleItem.fieldName = "";
@@ -212,7 +215,7 @@ export default {
           sourceTypeDics[i.sourceType + ""] = i;
           i.systemFields.forEach(systemFieldItem => {
             let systemFieldItemKey = `${i.sourceType}_${systemFieldItem.sysFieldCode}`;
-           
+
             if (i.systemFieldDic[systemFieldItemKey] == undefined) {
               i.systemFieldDic[systemFieldItemKey] = systemFieldItem;
             }
@@ -271,8 +274,16 @@ export default {
         })
     },
     /** 关联按钮操作 */
-    lookView() {
-      this.$refs["relevanceDialog"].show("row.id", {});
+    lookView(row) {
+      this.$refs["relevanceDialog"].show(row.iotAlarmRule.id, {});
+    },
+    getDeviceNumber(row) {
+      let text = "";
+      row.iotAlarmRuleSourceTotalVos.forEach(function(item, index, array) {
+        let numbertext = item.sourceName + "(" + item.sourceSize + ")\n";
+        text += numbertext;
+      });
+      return text;
     },
   },
 };

src/views/warnRule/relevanceDialog.vue

@@ -1,34 +1,58 @@
 <template>
   <div>
-    <DialogCom title="告警规则关联设备" :visible.sync="isShow" width="60%">
-      <el-form :model="formData" ref="queryForm" size="small" :inline="true">
+    <DialogCom :title="title" :visible.sync="isShow" width="60%">
+      <el-descriptions border :column="2" size="small"  style="width: 60%">
+        <el-descriptions-item label="规则名称">{{data.ruleName}}</el-descriptions-item>
+        <el-descriptions-item label="规则描述">{{data.ruleRemark}}</el-descriptions-item>
+      </el-descriptions>
+      <el-form  ref="queryForm" size="small" :inline="true">
        <div >
-        <div class="disDiv">
-          <el-form-item label="名称" prop="taskName"> 1.属性规则 </el-form-item>
-          <el-form-item label="规则类型" prop="taskName">
-            上班一键巡检
-          </el-form-item>
-        </div>
-        <div class="disDiv">
+<!--        <div class="disDiv">
+          <el-form-item label="名称" >{{data.ruleName}}</el-form-item>
+          <el-form-item label="描述" prop="taskName" > {{data.ruleRemark}} </el-form-item>
+        </div>-->
+<!--        <div class="disDiv">
           <el-form-item label="启动" prop="taskName">
-            <el-switch v-model="formData.taskName"> </el-switch>
+            <el-switch v-model="data.enable"> </el-switch>
           </el-form-item>
-          <el-form-item label="描述" prop="taskName"> 描述 </el-form-item>
-        </div>
+        </div>-->
        </div>
-        <el-tabs type="border-card">
-          <el-tab-pane label="报警防区"></el-tab-pane>
-          <el-tab-pane label="烟雾传感器"></el-tab-pane>
-          <el-tab-pane label="温湿度采集器"></el-tab-pane>
-          <el-tab-pane label="水浸传感器"></el-tab-pane>
-          <relevanceDialogCom></relevanceDialogCom>
+        <el-tabs type="border-card"
+        v-if="data.typeDataList.length > 0"
+        class="tabs"
+        v-model="selectedTab"
+                 @tab-click="handleTabClick"
+        >
+          <el-tab-pane
+
+            v-for="(entity) in data.typeDataList"
+            :name="`${entity.type}`"
+            :key="entity.type"
+            :label="entity.typeText"
+          >
+          </el-tab-pane>
+          <relevanceDialogCom :deviceData="currentTypeData" @updateDeviceData="updateDeviceData" ></relevanceDialogCom>
         </el-tabs>
+
       </el-form>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="isShow = false">关闭</el-button>
+        <el-button type="primary" @click="submitData">确定</el-button>
+    </span>
     </DialogCom>
   </div>
 </template>
 <script>
 import relevanceDialogCom from "@/views/warnRule/relevanceDialogCom.vue";
+import {alarmDeviceDetail,saveDevice} from "@/api/iot/alarmRule";
+const defaultDetail = {
+  ruleId: 0,
+  ruleName: "",
+  enable: 0,
+  ruleType: "",
+  ruleRemark: "",
+  typeDataList: [],
+};
 export default {
   name: "SocWebRelevanceDialog",
   components: {
@@ -36,19 +60,73 @@ export default {
   },
   data() {
     return {
+      title: "告警规则关联设备",
       isShow: false,
-      formData: {
-        taskName: "",
+      selectedTab: "",
+      currentTypeData: {
+        deviceTempList: [],
+        type: -1,
+        typeText: "",
+      },
+      data:defaultDetail,
+      queryParams:{
+
       },
     };
   },
-
-  mounted() {},
+  mounted() {
+  },
 
   methods: {
-    show() {
+    show(ruleId) {
       this.isShow = true;
+      this.init(ruleId);
     },
+    init(ruleId){
+      this.queryParams.ruleId = ruleId;
+      alarmDeviceDetail(this.queryParams)
+        .then((response) => {
+          this.data = response.data;
+          if(this.data.typeDataList.length > 0){
+            setTimeout(()=>{
+              this.selectedTab = String(this.data.typeDataList[0].type);
+              this.currentTypeData = this.data.typeDataList[0];
+            },200);
+          }
+        })
+        .catch(() => {
+          this.loading = false;
+        });
+    },
+    handleTabClick() {
+      this.currentTypeData = this.data.typeDataList.find(
+        (t) => t.type == this.selectedTab
+      );
+    },
+    updateDeviceData(rel){
+        this.data.typeDataList.forEach((obj,index) => {
+          if(obj.type === rel.type){
+            obj.deviceTempList = rel.deviceTempList;
+            obj.isAllDeviceEnable = rel.isAllDeviceEnable;
+            obj.valueType = rel.valueType;
+          }
+        });
+    },
+    submitData(){
+      saveDevice(this.data)
+        .then((response) => {
+          this.$message('保存成功！');
+          this.isShow = false;
+          this.$emit("success");
+        })
+        .catch(() => {
+          this.loading = false;
+        });
+    },
+    closed() {
+      this.data = defaultDetail;
+    },
+
   },
 };
 </script>
@@ -57,5 +135,11 @@ export default {
   display: flex;
   justify-content: space-between;
 }
+.dialog-footer{
+  float: right;
+  margin-top: 10px;
+  margin-bottom: 10px;
+  margin-right: 17px;
+}
 
 </style>

src/views/warnRule/relevanceDialogCom.vue

@@ -1,81 +1,108 @@
 <template>
   <div>
-    <el-form-item label="关联设备方式" prop="taskName">
-      <el-radio v-model="radio" label="1">设备类型</el-radio>
-      <el-radio v-model="radio" label="2">指定设备</el-radio>
+    <el-form-item v-show="false" label="关联设备方式">
+      <el-radio-group v-model="currentDevice.valueType">
+        <el-radio label="AllDevice">设备类型</el-radio>
+        <el-radio label="Device">指定设备</el-radio>
+      </el-radio-group>
     </el-form-item>
-    <div v-if="radio == '2'">
+    <div>
+      <el-form-item label="全部设备启用" v-if="currentDevice.valueType === 'AllDevice'">
+        <el-switch v-model="currentDevice.isAllDeviceEnable" @change="changeEnable"> </el-switch>
+      </el-form-item>
+    </div>
+    <div v-if="currentDevice.valueType === 'Device'">
       <div>
-        <el-button type="primary" @click="addrelvanceH" size="medium"
-          >添加设备</el-button
-        ><el-button type="primary" size="medium">删除设备</el-button>
+        <el-button type="primary" @click="handleAddDevice">添加设备</el-button>
+        <el-button type="primary" @click="handleRemoveDevice">删除设备</el-button>
       </div>
       <div class="ruleDiv">
         <el-table
-          :data="taskList"
+          :data="currentDevice.deviceTempList"
           border
           v-loading="loading"
-          height="600"
+          height="400"
           size="small"
+          @selection-change="handleSelectionChange"
         >
           <el-table-column type="selection" width="55"> </el-table-column>
-          <el-table-column label="所属机构" prop="orgname"> </el-table-column>
-          <el-table-column label="设备名称" prop="id"> </el-table-column>
+          <el-table-column label="所属机构" prop="orgName"> </el-table-column>
+          <el-table-column label="设备名称" prop="deviceName"> </el-table-column>
         </el-table>
       </div>
     </div>
-    <div v-else>
-      <el-form-item label="全部设备启用" prop="taskName">
-        <el-switch v-model="taskName"> </el-switch>
-      </el-form-item>
-    </div>
-    <addrelvance ref="addrelvance"></addrelvance>
+    <addrelvance ref="addrelvance" @addDevice="addDevice" :currentTempList="currentDevice.deviceTempList"></addrelvance>
   </div>
 </template>
 <script>
 import addrelvance from "@/views/warnRule/addRelvance.vue";
-const generateData = _ => {
-        const data = [];
-        for (let i = 1; i <= 15; i++) {
-          data.push({
-            key: i,
-            label: `备选项 ${ i }`,
-            disabled: i % 4 === 0
-          });
-        }
-        return data;
-      }
 export default {
   name: "SocWebAddDialogCom",
   components: {
     addrelvance,
   },
+  props:["deviceData"],
   dicts: ["core_check_type"],
   data() {
     return {
       value: "",
-      data:generateData(),
-      radio: "1",
       loading: false,
-      formData: {
-        taskName: "",
-      },
-      taskName: false,
-      taskList: [
-        {
-          orgname: "福建农信",
-          id: "烟感器设备01",
-        },
-      ],
+      selectTempList:[],
+      currentDevice:{
+        deviceTempList:[],
+        isAllDeviceEnable: false,
+        type:4,
+      }
     };
   },
 
   mounted() {},
-
+  watch: {
+    deviceData: function (data) {
+      this.currentDevice = data
+    }
+  },
   methods: {
-    addrelvanceH(){
+    handleAddDevice(){
         this.$refs.addrelvance.visible=true
-    }
+        this.$refs.addrelvance.deviceType=this.currentDevice.type;
+        this.$refs.addrelvance.orgTree();
+    },
+    addDevice(data){
+     if(this.currentDevice.deviceTempList.length > 0 ){
+       let selectIds = this.currentDevice.deviceTempList.map(
+         (r) => r.deviceId
+       );
+       let filterData =  data.filter(
+         (d) => selectIds.indexOf(d.deviceId) < 0
+       );
+       if(filterData.length > 0){
+         this.currentDevice.deviceTempList = [this.currentDevice.deviceTempList, ... filterData];
+       }
+     }else{
+       this.currentDevice.deviceTempList = data;
+     }
+      this.$emit("updateDeviceData", this.currentDevice);
+    },
+    changeEnable(){
+      this.$emit("updateDeviceData", this.currentDevice);
+    },
+    handleSelectionChange(val) {
+      this.selectTempList = val;
+    },
+    handleRemoveDevice(){
+      let selectIds = this.selectTempList.map(
+        (r) => r.deviceId
+      );
+      if(selectIds.length > 0){
+        let filterData =  this.currentDevice.deviceTempList.filter(
+          (d) => selectIds.indexOf(d.deviceId) < 0
+        );
+        this.currentDevice.deviceTempList = filterData;
+        this.selectTempList = [];
+        this.$emit("updateDeviceData", this.currentDevice);
+      }
+    },
   },
 };
 </script>