瀏覽代碼

题目一

pengyu 4 月之前
父節點
當前提交
3b08ed9e19

+ 251 - 9
src/components/common-comp-alarm-list/src/components/AlarmList.vue

@@ -13,6 +13,25 @@
   >
     <div ref="target" class="input-bg">
       <div class="input-box">
+        <!-- 修改批量操作按钮,使其切换showSelectAll的值 -->
+        <el-button
+            class="iconfont_tools icon-icon_shuaxin"
+            @click="toggleSelectAll"
+        >
+          {{ showSelectAll ? '取消批量' : '批量操作' }}
+        </el-button>
+        <div class="select-all-container" v-if="showSelectAll">
+          <!-- 将复选框改为按钮形式 -->
+          <el-button
+              type="text"
+              class="select-all-button"
+              @click="handleSelectAllChange"
+          >
+            {{ isAllSelected ? '反选' : '全选' }}
+          </el-button>
+        </div>
+      </div>
+      <div class="input-box">
         <el-input
           placeholder="输入关键字"
           type="text"
@@ -99,6 +118,7 @@
               <alarm-list-item
                 :keywordValue="keywordValueForHighLight"
                 :item="item"
+                :showSelectAll="showSelectAll"
                 class="alarm-list-item-box"
                 :class="{
                   'alarm-list-item-box-check':
@@ -259,7 +279,7 @@ export default {
     // 是否开启筛选
     isOpenFilter: {
       type: Boolean,
-      default: false
+      default: true
     },
     // 筛选类型
     filterTypeKeys: {
@@ -388,6 +408,9 @@ export default {
   },
   data() {
     return {
+      showSelectAll:false,
+      isAllSelected:false,
+      selectedItems: new Set(), // 存储选中的项目ID
       infiniteScrollLoading: true,
       initFilterFlag: true, // 初始化筛选条件
       isShowFilterBox: false,
@@ -419,7 +442,10 @@ export default {
       rightTableLoading: true, // 右侧告警是否加载中
       rightTableParam: {
         // 表格展示参数
-        tableDatas: [], //  表格显示数据
+        tableDatas: [
+
+
+        ], //  表格显示数据
         total: 0, // 数据总数
         isMap: false // 点地图告警查询的
       },
@@ -486,6 +512,48 @@ export default {
     clearTimeout(this.searchTimer)
   },
   methods: {
+    // 添加切换批量操作显示状态的方法
+    toggleSelectAll() {
+      this.showSelectAll = !this.showSelectAll;
+
+      // 如果关闭批量操作,需要清理选中状态
+      if (!this.showSelectAll) {
+        this.selectedItems.clear();
+        this.isAllSelected = false;
+        // 清理所有项目的选中状态
+        this.rightTableParam.tableDatas.forEach(item => {
+          this.$set(item, 'selected', false);
+        });
+        // 触发选择变化事件
+        this.$emit('selection-change', Array.from(this.selectedItems));
+      }
+    },
+    // 处理全选/取消全选
+    handleSelectAllChange() {
+      const isChecked = !this.isAllSelected; // 切换当前状态
+
+      if (isChecked) {
+        // 全选
+        this.rightTableParam.tableDatas.forEach(item => {
+          this.selectedItems.add(item.orderId);
+          // 更新item的selected状态
+          this.$set(item, 'selected', true);
+        });
+      } else {
+        // 取消全选
+        this.rightTableParam.tableDatas.forEach(item => {
+          this.selectedItems.delete(item.orderId);
+          // 更新item的selected状态
+          this.$set(item, 'selected', false);
+        });
+      }
+
+      // 更新全选状态
+      this.isAllSelected = isChecked;
+
+      // 触发选择变化事件
+      this.$emit('selection-change', Array.from(this.selectedItems));
+    },
     popupStatusChange(payload) {
       if (!payload?.opened) {
         this.checkAlarmId = ''
@@ -739,13 +807,187 @@ export default {
       this.keywordValueForHighLight = params.keyword
       try {
         const resp = await getOrderList(params)
-        _this.rightTableParam.total = resp.total
-        if (this.paginationType === 'page') {
-          _this.rightTableParam.tableDatas = resp.rows
-        } else {
-          _this.rightTableParam.tableDatas.push(...resp.rows)
-        }
-        _this.showPagination = resp.total !== 0
+        _this.rightTableParam.total = 1
+          _this.rightTableParam.tableDatas.push(
+              {
+                orderId: 'ALM20230719001',
+                warningSourceName: '基站监控系统',
+                alarmBody: '电池电压过低告警,当前电压48.2V,低于阈值52V',
+                address: '杭州市西湖区文三路382号基站',
+                alarmTime: '2023-07-19 14:32:15',
+                showTime: '剩余2小时',
+                isCollection: '0',
+                orderStatus: '2',
+                enableAcceptanceMode: '0',
+                fileImgUrlIcon: '',
+                imgUrl: '',
+                alarmLableRelDTOList: [
+                  { lableName: '紧急' },
+                  { lableName: '电力相关' },
+                  { lableName: '需要现场处理' }
+                ]
+              },
+              {
+                orderId: 'ALM20230719002',
+                warningSourceName: '环境监测系统',
+                alarmBody: '温度异常升高,机房温度达到38℃,超过阈值35℃',
+                address: '宁波市鄞州区中山东路128号机房',
+                alarmTime: '2023-07-19 15:22:08',
+                showTime: '超时1小时',
+                isCollection: '1',
+                orderStatus: '4',
+                enableAcceptanceMode: '0',
+                fileImgUrlIcon: '',
+                imgUrl: '',
+                alarmLableRelDTOList: [
+                  { lableName: '重要' },
+                  { lableName: '环境监控' }
+                ]
+              },
+              {
+                orderId: 'ALM20230719003',
+                warningSourceName: '安防监控系统',
+                alarmBody: '红外入侵检测报警,检测到不明物体闯入',
+                address: '温州市鹿城区车站大道88号基站',
+                alarmTime: '2023-07-19 03:15:42',
+                showTime: '剩余6小时',
+                isCollection: '0',
+                orderStatus: '1',
+                enableAcceptanceMode: '1',
+                fileImgUrlIcon: '',
+                imgUrl: '',
+                alarmLableRelDTOList: [
+                  { lableName: '紧急' },
+                  { lableName: '安全相关' },
+                  { lableName: '夜间报警' }
+                ]
+              },
+              {
+                orderId: 'ALM20230719004',
+                warningSourceName: '动力监控系统',
+                alarmBody: 'UPS故障告警,UPS设备离线',
+                address: '绍兴市越城区解放路235号机房',
+                alarmTime: '2023-07-19 10:45:33',
+                showTime: '超时3小时',
+                isCollection: '1',
+                orderStatus: '5',
+                enableAcceptanceMode: '0',
+                fileImgUrlIcon: '',
+                imgUrl: '',
+                alarmLableRelDTOList: [
+                  { lableName: '重要' },
+                  { lableName: '电力相关' },
+                  { lableName: '设备故障' }
+                ]
+              },
+              {
+                orderId: 'ALM20230719005',
+                warningSourceName: '消防监控系统',
+                alarmBody: '烟雾浓度异常,检测值超过安全阈值',
+                address: '嘉兴市南湖区广益路528号基站',
+                alarmTime: '2023-07-19 08:17:51',
+                showTime: '剩余4小时',
+                isCollection: '0',
+                orderStatus: '0',
+                enableAcceptanceMode: '0',
+                fileImgUrlIcon: '',
+                imgUrl: '',
+                alarmLableRelDTOList: [
+                  { lableName: '紧急' },
+                  { lableName: '消防相关' },
+                  { lableName: '需要立即处理' }
+                ]
+              },
+              {
+                orderId: 'ALM20230719006',
+                warningSourceName: '门禁监控系统',
+                alarmBody: '非法闯入尝试,多次刷卡失败',
+                address: '湖州市吴兴区凤凰路168号机房',
+                alarmTime: '2023-07-19 01:22:19',
+                showTime: '超时5小时',
+                isCollection: '0',
+                orderStatus: '7',
+                enableAcceptanceMode: '0',
+                fileImgUrlIcon: '',
+                imgUrl: '',
+                alarmLableRelDTOList: [
+                  { lableName: '安全相关' },
+                  { lableName: '夜间报警' }
+                ]
+              },
+              {
+                orderId: 'ALM20230719007',
+                warningSourceName: '通信监控系统',
+                alarmBody: '信号中断告警,基站与中心失去联系',
+                address: '金华市婺城区宾虹路666号基站',
+                alarmTime: '2023-07-19 12:40:05',
+                showTime: '剩余1小时',
+                isCollection: '1',
+                orderStatus: '6',
+                enableAcceptanceMode: '0',
+                fileImgUrlIcon: '',
+                imgUrl: '',
+                alarmLableRelDTOList: [
+                  { lableName: '紧急' },
+                  { lableName: '通信相关' },
+                  { lableName: '影响范围大' }
+                ]
+              },
+              {
+                orderId: 'ALM20230719008',
+                warningSourceName: '空调监控系统',
+                alarmBody: '空调制冷效果下降,机房温度持续上升',
+                address: '衢州市柯城区西安路199号机房',
+                alarmTime: '2023-07-19 16:05:27',
+                showTime: '剩余3小时',
+                isCollection: '0',
+                orderStatus: '2',
+                enableAcceptanceMode: '1',
+                fileImgUrlIcon: '',
+                imgUrl: '',
+                alarmLableRelDTOList: [
+                  { lableName: '重要' },
+                  { lableName: '环境监控' },
+                  { lableName: '设备老化' }
+                ]
+              },
+              {
+                orderId: 'ALM20230719009',
+                warningSourceName: '电源监控系统',
+                alarmBody: '电流异常波动,检测到不规则电流变化',
+                address: '舟山市定海区解放西路88号基站',
+                alarmTime: '2023-07-19 09:33:14',
+                showTime: '超时2小时',
+                isCollection: '0',
+                orderStatus: '4',
+                enableAcceptanceMode: '0',
+                fileImgUrlIcon: '',
+                imgUrl: '',
+                alarmLableRelDTOList: [
+                  { lableName: '电力相关' },
+                  { lableName: '需要专业处理' }
+                ]
+              },
+              {
+                orderId: 'ALM20230719010',
+                warningSourceName: '网络监控系统',
+                alarmBody: '网络延迟过高,影响正常业务通信',
+                address: '台州市椒江区中山路303号机房',
+                alarmTime: '2023-07-19 13:18:46',
+                showTime: '剩余5小时',
+                isCollection: '1',
+                orderStatus: '5',
+                enableAcceptanceMode: '0',
+                fileImgUrlIcon: '',
+                imgUrl: '',
+                alarmLableRelDTOList: [
+                  { lableName: '重要' },
+                  { lableName: '通信相关' },
+                  { lableName: '业务影响' }
+                ]
+              }
+          )
+        _this.showPagination = true
         _this.rightTableLoading = false
         _this.infiniteScrollLoading = false
       } catch (err) {

+ 28 - 1
src/components/common-comp-alarm-list/src/components/AlarmListItem.vue

@@ -2,6 +2,15 @@
 <template>
   <div>
     <div class="eventListItem" @contextmenu="disableRightClick">
+      <!-- 添加多选框 -->
+      <div v-show="showSelectAll" :style="{ marginRight: pxToRem(8), display: 'flex', alignItems: 'center' }">
+        <input
+            type="checkbox"
+            :checked="item.selected"
+            @change="handleSelectChange"
+            class="alarm-checkbox"
+        />
+      </div>
       <div :style="{ marginRight: pxToRem(12) }">
         <el-image class="eventListImage" :src="itemImage" fit="cover">
           <template #error>
@@ -156,6 +165,10 @@ export default {
       type: Object,
       default: () => ({})
     },
+    showSelectAll: {
+      type: Boolean,
+      default: false
+    },
     isRelations: {
       type: Boolean,
       default: false
@@ -173,7 +186,7 @@ export default {
         })
       },
       deep: true
-    }
+    },
   },
   data() {
     return {
@@ -207,6 +220,14 @@ export default {
     })
   },
   methods: {
+    // 添加处理选择变化的方法
+    handleSelectChange(event) {
+      const selected = event.target.checked;
+      this.$emit('select-change', {
+        item: this.item,
+        selected: selected
+      });
+    },
     realPx(px) {
       const ele = document.querySelector('html')
       const fontSize = window.getComputedStyle(ele).fontSize.split('px')[0]
@@ -285,4 +306,10 @@ export default {
 <style lang="scss" scoped>
 // @import '../assets/styles/common';
 @import '~@component-gallery/theme-chalk/src/alarmList/index';
+// 添加多选框样式
+.alarm-checkbox {
+  width: pxToRem(16);
+  height: pxToRem(16);
+  cursor: pointer;
+}
 </style>

+ 1 - 1
src/components/common-comp-alarm-list/src/entry/CommonAlarm.vue

@@ -141,7 +141,7 @@ export default {
     // 是否开启筛选
     isOpenFilter: {
       type: Boolean,
-      default: false
+      default: true
     },
     // 筛选类型
     filterTypeKeys: {