告警界面

src/views/warn/index.vue

@@ -29,16 +29,33 @@
                           style="width: 100%"
                 />
               </el-form-item>
-              <el-form-item label="设备类型" prop="deviceType">
+              <el-form-item label="告警分类" prop="dataType">
+                <el-select
+                  v-model="queryParams.dataType"
+                  clearable
+                  label="告警分类"
+                  placeholder="请选择告警分类"
+                  prop="dataType"
+                >
+                  <el-option
+                    v-for="item in alarmTypes"
+                    :key="item.value"
+                    :label="item.label"
+                    :value="item.value">
+                  </el-option>
+                </el-select>
+              </el-form-item>
+              <el-form-item label="告警类型" prop="deviceType">
                 <el-select
                   v-model="queryParams.deviceType"
                   clearable
                   label="设备类型"
-                  placeholder="请选择设备类型"
+                  placeholder="请选择告警类型"
                   prop="deviceType"
                 >
                   <el-option
                     v-for="item in deviceTypes"
+                    v-if="!queryParams.dataType || item.type === queryParams.dataType"
                     :key="item.value"
                     :label="item.label"
                     :value="item.value">
@@ -172,7 +189,7 @@
               show-overflow-tooltip="true"
             />
             <el-table-column
-              label="设备类型"
+              label="告警类型"
               align="center"
               prop="sourceTypeDes"
               width="160"
@@ -244,25 +261,88 @@ export default {
   dicts: ["sys_access_cycle"],
   data() {
     return {
+      alarmTypes:[
+        {
+          value: '0',
+          label: '动环告警'
+        },
+        {
+          value: '1',
+          label: '其他告警'
+        }
+      ],
       deviceTypes: [{
         value: '4184',
-        label: '水浸'
+        label: '水浸告警',
+        type: '0',
       }, {
         value: '4183',
-        label: '温湿度'
+        label: '温湿度告警',
+        type: '0',
       }, {
         value: '4182',
-        label: '烟感'
+        label: '烟感告警',
+        type: '0',
       }, {
         value: '4181',
-        label: '红外'
+        label: '红外告警',
+        type: '0',
       }, {
         value: '41885',
-        label: '燃气报警器'
-      }, {
+        label: '燃气报警器告警',
+        type: '0',
+      }
+      , {
         value: '4188',
-        label: '门磁'
-      }],
+        label: '门磁告警',
+        type: '0',
+      }
+      , {
+        value: '1001',
+        label: '信号丢失告警',
+          type: '1',
+      }
+      , {
+        value: '1002',
+        label: '遮挡告警',
+          type: '1',
+      }
+      , {
+        value: '1003',
+        label: '亮度告警',
+          type: '1',
+      }
+      , {
+        value: '1004',
+        label: '偏色告警',
+          type: '1',
+      }
+      , {
+        value: '1005',
+        label: '雪花告警',
+          type: '1',
+      }
+      , {
+        value: '1006',
+        label: '条纹告警',
+          type: '1',
+      }
+      , {
+        value: '1007',
+        label: '对比度告警',
+          type: '1',
+      }
+      , {
+        value: '1008',
+        label: '模糊告警',
+          type: '1',
+      }
+      , {
+        value: '1009',
+        label: '硬盘告警',
+          type: '1',
+      }
+      ],
       // 遮罩层
       loading: false,
       // 选中数组
@@ -310,6 +390,7 @@ export default {
     ...mapGetters(["orgId", "orgName"]),
   },
   methods: {
+
     /** 查询监控调阅任务列表 */
     getList() {
       alarmList(this.queryParams).then((response) => {

src/views/warnRule/addRelvance.vue

@@ -150,7 +150,6 @@
   </el-dialog>
 </template>
 <script>
-import { mapGetters, mapMutations } from "vuex";
 import {device} from "@/api/iot/alarmRule";
 const defaultData = {
   left: {
@@ -205,10 +204,10 @@ export default {
     },
   },
   watch: {
-    // currentTempList: function (data) {
-    //   this.right.data = data
-    //   this.boundDevicesClone = data;
-    // }
+    currentTempList: function (data) {
+      this.right.data = JSON.parse(JSON.stringify(this.currentTempList))
+      this.boundDevicesClone = JSON.parse(JSON.stringify(this.currentTempList));
+    }
   },
   data() {
     return {
@@ -221,7 +220,7 @@ export default {
       loading: false,
       treeList: [],
       deptOptions:[],
-      boundDevicesClone:[],
+      boundDevicesClone:JSON.parse(JSON.stringify(this.currentTempList)),
       left: {
         condition: {
           orgId: null,
@@ -304,8 +303,8 @@ export default {
       }
     },
     open() {
-      this.right.data = this.currentTempList;
-      this.boundDevicesClone = this.currentTempList;
+      this.right.data = JSON.parse(JSON.stringify(this.currentTempList));
+      this.boundDevicesClone = JSON.parse(JSON.stringify(this.currentTempList));
     },
     showDialog() {
       this.visible = true;
@@ -341,9 +340,6 @@ export default {
       this.right.selectedCount = val.length;
       this.right.selectedRows = val;
     },
-    handleRightOrgChange(node) {
-      this.right.condition.orgName = node.orgName;
-    },
     handleAdd() {
       this.right.condition.orgId = null;
       this.right.condition.searchChild = false;
@@ -369,18 +365,22 @@ export default {
       let rightSelectedDeviceIds = this.right.selectedRows.map(
         (r) => r.deviceId
       );
-      this.right.data = this.right.data.filter(
-        (d) => rightSelectedDeviceIds.indexOf(d.deviceId) < 0
-      );
-      this.boundDevicesClone = this.boundDevicesClone.filter(
-        (d) => rightSelectedDeviceIds.indexOf(d.deviceId) < 0
-      );
-      this.boundDeviceIds = this.boundDevicesClone.map((d) => d.deviceId);
+      if(rightSelectedDeviceIds.length > 0){
+        this.right.data = this.right.data.filter(
+          (d) => rightSelectedDeviceIds.indexOf(d.deviceId) < 0
+        );
+        this.boundDevicesClone = this.boundDevicesClone.filter(
+          (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();
+        this.left.data = this.searchDevices.filter((row) => this.boundDeviceIds.indexOf(row.deviceId) < 0)
+        if(this.left.condition.orgId){
+          this.leftSearch();
+        }
       }
+
+
     },
     leftSearch() {
       let { condition } = this.left;

src/views/warnRule/dialog.vue

@@ -265,8 +265,51 @@ export default {
   },
 };
 </script>
+<style lang="scss" scoped>
+/* 鼠标选中时样式 */
+::v-deep .el-tabs__item.is-active {
+  opacity: 1;
+  font-size: 16px;
+  font-weight: bold;
+  color: white !important;
+  font-family:  Arial, sans-serif;
+}
+/* 鼠标悬浮时样式 */
+::v-deep .el-tabs__item:hover {
+  cursor: pointer;
+  opacity: 1;
+  font-size: 16px;
+  font-weight: bold;
+  color: white !important;
+  font-family:  Arial, sans-serif;
+}
+
+::v-deep .el-tabs__item {
+  color: #dceeee;
+  opacity: 0.9;
+  font-size: 16px;
+  font-weight: bold;
+
+  font-family:  Arial, sans-serif;
+}
+
+::v-deep .el-tabs__nav-wrap{
+  background-color: #d7d7d7 !important;
+}
 
-<style lang="scss">
+::v-deep .el-tabs--border-card>.el-tabs__header .el-tabs__item.is-active{
+  background-color: #3a3b3b;
+}
+::v-deep .el-radio-button--medium .el-radio-button__inner{
+  opacity: 0.5;
+}
+
+::v-deep .el-radio-button__orig-radio:checked + .el-radio-button__inner{
+  opacity: 1;
+}
+
+</style>
+<style lang="scss" scoped>
 .edu-training-edit {}
 
 .titleDiv {

src/views/warnRule/relevanceDialog.vue

@@ -1,26 +1,26 @@
 <template>
   <div>
     <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 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="名称" >{{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="data.enable"> </el-switch>
-          </el-form-item>
-        </div>-->
-       </div>
+      <el-form ref="queryForm" size="small" :inline="true">
+        <div>
+          <!--        <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="data.enable"> </el-switch>
+                    </el-form-item>
+                  </div>-->
+        </div>
         <el-tabs type="border-card"
-        v-if="data.typeDataList.length > 0"
-        class="tabs"
-        v-model="selectedTab"
+                 v-if="data.typeDataList.length > 0"
+                 class="tabs"
+                 v-model="selectedTab"
                  @tab-click="handleTabClick"
         >
           <el-tab-pane
@@ -31,7 +31,7 @@
             :label="entity.typeText"
           >
           </el-tab-pane>
-          <relevanceDialogCom :deviceData="currentTypeData" @updateDeviceData="updateDeviceData" ></relevanceDialogCom>
+          <relevanceDialogCom :deviceData="currentTypeData" @updateDeviceData="updateDeviceData"></relevanceDialogCom>
         </el-tabs>
 
       </el-form>
@@ -44,7 +44,8 @@
 </template>
 <script>
 import relevanceDialogCom from "@/views/warnRule/relevanceDialogCom.vue";
-import {alarmDeviceDetail,saveDevice} from "@/api/iot/alarmRule";
+import {alarmDeviceDetail, saveDevice} from "@/api/iot/alarmRule";
+
 const defaultDetail = {
   ruleId: 0,
   ruleName: "",
@@ -68,10 +69,8 @@ export default {
         type: -1,
         typeText: "",
       },
-      data:defaultDetail,
-      queryParams:{
-
-      },
+      data: defaultDetail,
+      queryParams: {},
     };
   },
   mounted() {
@@ -82,16 +81,16 @@ export default {
       this.isShow = true;
       this.init(ruleId);
     },
-    init(ruleId){
+    init(ruleId) {
       this.queryParams.ruleId = ruleId;
       alarmDeviceDetail(this.queryParams)
         .then((response) => {
           this.data = response.data;
-          if(this.data.typeDataList.length > 0){
-            setTimeout(()=>{
+          if (this.data.typeDataList.length > 0) {
+            setTimeout(() => {
               this.selectedTab = String(this.data.typeDataList[0].type);
               this.currentTypeData = this.data.typeDataList[0];
-            },200);
+            }, 200);
           }
         })
         .catch(() => {
@@ -103,16 +102,16 @@ export default {
         (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;
-          }
-        });
+    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(){
+    submitData() {
       saveDevice(this.data)
         .then((response) => {
           this.$message('保存成功！');
@@ -131,15 +130,51 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
-.disDiv{
+.disDiv {
   display: flex;
   justify-content: space-between;
 }
-.dialog-footer{
+
+.dialog-footer {
   float: right;
   margin-top: 10px;
   margin-bottom: 10px;
   margin-right: 17px;
 }
 
+/* 鼠标选中时样式 */
+::v-deep .el-tabs__item.is-active {
+  opacity: 1;
+  font-size: 16px;
+  font-weight: bold;
+  color: white !important;
+  font-family:  Arial, sans-serif;
+}
+/* 鼠标悬浮时样式 */
+::v-deep .el-tabs__item:hover {
+  cursor: pointer;
+  opacity: 1;
+  font-size: 16px;
+  font-weight: bold;
+  color: white !important;
+  font-family:  Arial, sans-serif;
+}
+
+::v-deep .el-tabs__item {
+  color: #dceeee;
+  opacity: 0.9;
+  font-size: 16px;
+  font-weight: bold;
+
+  font-family:  Arial, sans-serif;
+}
+
+::v-deep .el-tabs__nav-wrap{
+  background-color: #d7d7d7 !important;
+}
+
+::v-deep .el-tabs--border-card>.el-tabs__header .el-tabs__item.is-active{
+  background-color: #3a3b3b;
+}
+
 </style>

src/views/warnRule/relevanceDialogCom.vue

@@ -6,11 +6,11 @@
         <el-radio label="Device">指定设备</el-radio>
       </el-radio-group>
     </el-form-item>
-    <div>
+<!--    <div>
       <el-form-item label="全部设备启用" v-if="currentDevice.valueType === 'AllDevice'">
-        <el-switch v-model="currentDevice.isAllDeviceEnable" @change="changeEnable"> </el-switch>
+        <el-switch v-model="currentDevice.isAllDeviceEnable" @change="changeEnable"></el-switch>
       </el-form-item>
-    </div>
+    </div>-->
     <div v-if="currentDevice.valueType === 'Device'">
       <div>
         <el-button type="primary" @click="handleAddDevice">添加设备</el-button>
@@ -25,9 +25,9 @@
           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="deviceName"> </el-table-column>
+          <el-table-column type="selection" width="55"></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>
@@ -36,66 +36,68 @@
 </template>
 <script>
 import addrelvance from "@/views/warnRule/addRelvance.vue";
+
 export default {
   name: "SocWebAddDialogCom",
   components: {
     addrelvance,
   },
-  props:["deviceData"],
+  props: ["deviceData"],
   dicts: ["core_check_type"],
   data() {
     return {
       value: "",
       loading: false,
-      selectTempList:[],
-      currentDevice:{
-        deviceTempList:[],
+      selectTempList: [],
+      currentDevice: {
+        deviceTempList: [],
         isAllDeviceEnable: false,
-        type:4,
+        type: 4,
       }
     };
   },
 
-  mounted() {},
+  mounted() {
+  },
   watch: {
     deviceData: function (data) {
       this.currentDevice = data
     }
   },
   methods: {
-    handleAddDevice(){
-        this.$refs.addrelvance.visible=true
-        this.$refs.addrelvance.deviceType=this.currentDevice.type;
-        this.$refs.addrelvance.orgTree();
+    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;
-     }
+    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(){
+    changeEnable() {
       this.$emit("updateDeviceData", this.currentDevice);
     },
     handleSelectionChange(val) {
       this.selectTempList = val;
     },
-    handleRemoveDevice(){
+    handleRemoveDevice() {
       let selectIds = this.selectTempList.map(
         (r) => r.deviceId
       );
-      if(selectIds.length > 0){
-        let filterData =  this.currentDevice.deviceTempList.filter(
+      if (selectIds.length > 0) {
+        let filterData = this.currentDevice.deviceTempList.filter(
           (d) => selectIds.indexOf(d.deviceId) < 0
         );
         this.currentDevice.deviceTempList = filterData;
@@ -109,8 +111,10 @@ export default {
 <style lang="scss" scoped>
 .ruleDiv {
   margin-top: 20px;
+
   .sonruleDiv {
     margin-top: 10px;
+
     .el-button {
       margin-left: 20px;
     }

vue.config.js

@@ -13,12 +13,12 @@ module.exports = defineConfig({
       overlay: false
     },
     /*本地开发请求代理*/
-    proxy: {      
+    proxy: {
       '/dev-api': {
-        //  target: "http://47.92.229.224:8080",
+         // target: "http://47.92.229.224:8080",
         // target: "http://10.87.21.103:8080",
-        // target: "http://10.87.21.107:8080",
-        target: "http://10.87.23.51:8080",
+        target: "http://10.87.11.105:8080",
+        // target: "http://10.87.21.107:9002",
         // ws:true,
         changOrigin:true,
         pathRewrite:{