Merge branch 'sqy_dev' into 'main'

feat : 新增消息批量删除的功能 fix:'修改首页样式部分,修改部分图表，fix:修复token过期没有权限问题' ,,,封装useBatchDelete批量删除的hook'

See merge request huang/yun-teng-iot-front!79

+import { ref, computed } from 'vue';
+import { useMessage } from '/@/hooks/web/useMessage';
+/**
+ *
+ * @param deleteFn 要删除的API接口方法
+ * @param handleSuccess  刷新表格的方法
+ * @returns {
+ * hasBatchDelete: 是否可以删除
+ * selectionOptions 表格复选框配置项
+ * handleDeleteOrBatchDelete 删除方法，适用单一删除和批量删除。参数为null为批量删除
+ * }
+ *
+ */
+export interface selectionOptions {
+  rowKey: string;
+  clickToRowSelect: boolean;
+  rowSelection: {
+    onChange: (selectedRowKeys: string[]) => void;
+    type: 'radio' | 'checkbox';
+  };
+}
+export const useBatchDelete = (
+  deleteFn: (deleteIds: string[]) => Promise<void>,
+  handleSuccess: () => void
+) => {
+  const { createMessage } = useMessage();
+  const selectedRowIds = ref<string[]>([]);
+  const hasBatchDelete = computed(() => selectedRowIds.value.length <= 0);
+  // 复选框事件
+  const onSelectRowChange = (selectedRowKeys: string[]) => {
+    selectedRowIds.value = selectedRowKeys;
+  };
+  const handleDeleteOrBatchDelete = async (record: Recordable | null) => {
+    if (record) {
+      try {
+        await deleteFn([record.id]);
+        createMessage.success('删除联系人成功');
+        handleSuccess();
+      } catch (e) {
+        createMessage.error('删除失败');
+      }
+    } else {
+      try {
+        await deleteFn(selectedRowIds.value);
+        createMessage.success('批量删除联系人成功');
+        selectedRowIds.value = [];
+        handleSuccess();
+      } catch (e) {
+        createMessage.info('删除失败');
+      }
+    }
+  };
+  const selectionOptions: selectionOptions = {
+    rowKey: 'id',
+    clickToRowSelect: false,
+    rowSelection: {
+      onChange: onSelectRowChange,
+      type: 'checkbox',
+    },
+  };
+  return { hasBatchDelete, selectionOptions, handleDeleteOrBatchDelete };
+};

@@ -12,7 +12,7 @@ export default {
     networkExceptionMsg:
       'Please check if your network connection is normal! The network is abnormal',
 
-    errMsg401: 'no permission',
+    errMsg401: '',
     errMsg403: 'not authorized',
     errMsg404: 'the resource was not found!',
     errMsg405: 'Network request error, request method not allowed!',

@@ -10,8 +10,7 @@ export default {
     apiRequestFailed: '请求出错，请稍候重试',
     networkException: '网络异常',
     networkExceptionMsg: '网络异常，请检查您的网络连接是否正常!',
-
-    errMsg401: '没有权限!',
+    errMsg401: '',
     errMsg403: '未授权',
     errMsg404: '未找到该资源!',
     errMsg405: '网络请求错误,请求方法未允许!',

@@ -10,7 +10,6 @@ import { SessionTimeoutProcessingEnum } from '/@/enums/appEnum';
 const { createMessage, createErrorModal } = useMessage();
 const error = createMessage.error!;
 const stp = projectSetting.sessionTimeoutProcessing;
-
 export function checkStatus(
   status: number,
   msg: string,
@@ -19,7 +18,6 @@ export function checkStatus(
   const { t } = useI18n();
   const userStore = useUserStoreWithOut();
   let errMessage = '';
-
   switch (status) {
     case 400:
       errMessage = `${msg}`;

@@ -121,7 +121,6 @@ const transform: AxiosTransform = {
     const msg: string = response?.data?.msg ?? '';
     const err: string = error?.toString?.() ?? '';
     let errMessage = '';
-
     try {
       console.log(response.data);
       if (response.data.status == '401' || response.data.message == '"Authentication failed"') {

@@ -41,23 +41,25 @@
             src="/src/assets/images/alarm-count.png"
             style="width: 5rem; height: 5rem"
           />
-          <img
-            v-if="isAdmin(role)"
-            src="/src/assets/images/zh.png"
-            style="width: 5rem; height: 5rem"
-          />
+          <img v-else src="/src/assets/images/zh.png" style="width: 5rem; height: 5rem" />
         </div>
         <div class="flex-auto">
           <div class="flex justify-between" style="align-items: center">
+            <div v-if="!isAdmin(role)" style="font-size: 1.625rem; color: #333">{{
+              growCardList?.alarmInfo?.sumCount
+            }}</div>
             <div style="font-size: 1.625rem; color: #333">{{
               growCardList?.tenantInfo?.sumCount
             }}</div>
             <img src="/src/assets/images/tip.png" style="width: 1.4rem; height: 1.4rem" />
           </div>
-          <div> {{ !isAdmin(role) ? '11月告警数（条）' : '租户总量(个)' }}</div>
+          <div> {{ !isAdmin(role) ? `${currentMonth}月告警数（条）` : '租户总量(个)' }}</div>
         </div>
       </div>
-      <div class="ml-2 pt-4" style="border-top: 2px solid #f0f2f5">
+      <div v-if="!isAdmin(role)" class="ml-2 pt-4" style="border-top: 2px solid #f0f2f5">
+        今日新增 {{ growCardList?.alarmInfo?.todayAdd }}</div
+      >
+      <div v-else class="ml-2 pt-4" style="border-top: 2px solid #f0f2f5">
         今日新增 {{ growCardList?.tenantInfo?.todayAdd }}</div
       >
     </Card>
@@ -68,30 +70,47 @@
             v-if="!isAdmin(role)"
             src="/src/assets/images/msg-count.png"
             style="width: 5rem; height: 5rem"
-          /><img
-            v-if="isAdmin(role)"
-            src="/src/assets/images/kf.png"
-            style="width: 5rem; height: 5rem"
-          />
+          /><img v-else src="/src/assets/images/kf.png" style="width: 5rem; height: 5rem" />
         </div>
-        <div class="flex-auto">
+        <div v-if="!isAdmin(role)" style="display: flex; align-items: center">
+          <div>
+            <div class="flex" style="align-items: center">
+              {{ `${currentMonth}月数据点（条）` }}
+              <span style="font-size: 1.625rem; color: #333">
+                {{ growCardList?.messageInfo?.dataPointsCount }}</span
+              >
+            </div>
+            <div class="flex" style="align-items: center">
+              {{ `${currentMonth}月消息量（条）` }}
+              <span style="font-size: 1.625rem; color: #333">
+                {{ growCardList?.messageInfo?.messageCount }}</span
+              >
+            </div>
+          </div>
+        </div>
+        <div class="flex-auto" v-else>
           <div class="flex justify-between" style="align-items: center">
             <div style="font-size: 1.625rem; color: #333">{{
               growCardList?.customerInfo?.sumCount
             }}</div>
             <img src="/src/assets/images/tip.png" style="width: 1.4rem; height: 1.4rem" />
           </div>
-          <div> {{ !isAdmin(role) ? '11月消息量（条）' : '客户总量(个)' }} </div>
+          <div>客户总量(个)</div>
         </div>
       </div>
-      <div class="ml-2 pt-4" style="border-top: 2px solid #f0f2f5">
+      <div v-if="!isAdmin(role)" class="ml-2 pt-4" style="border-top: 2px solid #f0f2f5">
+        今日新增
+        <span class="ml-8">数据点 ({{ growCardList?.messageInfo?.todayDataPointsAdd }})</span>
+        <span class="ml-8">消息量 ({{ growCardList?.messageInfo?.todayMessageAdd }})</span>
+      </div>
+      <div v-else class="ml-2 pt-4" style="border-top: 2px solid #f0f2f5">
         今日新增 {{ growCardList?.customerInfo?.todayAdd }}</div
       >
     </Card>
   </div>
 </template>
 <script lang="ts" setup>
-  import { ref, onMounted } from 'vue';
+  import { ref, onMounted, computed } from 'vue';
   import { Card } from 'ant-design-vue';
   import { getHomeData } from '/@/api/dashboard';
   import { isAdmin } from '/@/enums/roleEnum';
@@ -109,12 +128,26 @@
       inActive: number;
       todayAdd: number;
     };
-    tenantInfo: { sumCount: number; todayAdd: number };
-    customerInfo: { sumCount: number; todayAdd: number };
+    tenantInfo?: { sumCount: number; todayAdd: number };
+    customerInfo?: { sumCount: number; todayAdd: number };
+    alarmInfo?: {
+      sumCount: number;
+      todayAdd: number;
+    };
+    messageInfo?: {
+      dataPointsCount: number;
+      messageCount: number;
+      todayDataPointsAdd: number;
+      todayMessageAdd: number;
+    };
   }
   const growCardList = ref<CardList>();
   onMounted(async () => {
     const res = await getHomeData();
     growCardList.value = res;
   });
+  // 获取当前月份0-11    +1
+  const currentMonth = computed(() => {
+    return new Date().getMonth() + 1;
+  });
 </script>

@@ -19,12 +19,10 @@
       </div>
     </template>
     <div v-show="activeKey === '1'">
-      <p class="center">告警数</p>
       <!-- 折线图 -->
       <VisitAnalysis :alarmList="state.alarmList" />
     </div>
     <div v-show="activeKey === '2'">
-      <p class="center">消息量</p>
       <!-- 柱形图 -->
       <VisitAnalysisBar :dataPointList="state.dataPointList" :messageList="state.messageList" />
     </div>
@@ -170,7 +168,7 @@
           for (const item of createdAlarmsCountHourly) {
             newArray.push([item.ts, item.value]);
           }
-          state.alarmList = [[...state.alarmItem], ...newArray];
+          state.alarmList = newArray;
         }
       } else {
         if (data) {
@@ -200,8 +198,8 @@
           for (const item of transportMsgCountHourly) {
             newArray1.push([item.ts, item.value]);
           }
-          state.dataPointList = [[...state.dataPoint], ...newArray];
-          state.messageList = [[...state.MsgCount], ...newArray1];
+          state.dataPointList = newArray;
+          state.messageList = newArray1;
         }
       }
     },
@@ -316,7 +314,7 @@
     if (activeIndex.value === index) return;
     activeIndex.value = index;
     dateValue.value = '';
-    let interval = 3600000;
+    let interval = 300000;
     if (value === 86400000) {
       interval = 7200000;
     } else if (value === 604800000 || value === 2592000000) {
@@ -342,11 +340,11 @@
     });
     send(sendValue);
 
-    console.log(JSON.parse(sendValue), '----interval');
+    console.log(JSON.parse(sendValue), '----interval', state.alarmList);
   }
 </script>
 
-<style scoped lang="less">
+<style lang="less">
   .center {
     display: flex;
     justify-content: center;

 <template>
-  <div ref="chartRef" :style="{ height, width }"></div>
+  <div>
+    <p class="center">告警数</p>
+    <div ref="chartRef" :style="{ height, width }" v-show="alarmList.length"></div>
+    <div v-show="!alarmList.length">暂无数据</div>
+  </div>
 </template>
 <script lang="ts" setup>
   import { onMounted, ref, Ref, withDefaults, watch } from 'vue';

 <template>
-  <div ref="chartRef" :style="{ height, width }"></div>
+  <div>
+    <p class="center">消息量</p>
+    <div ref="chartRef" :style="{ height, width }" v-show="dataPointList.length"></div>
+    <div v-show="!dataPointList.length">暂无数据</div>
+  </div>
 </template>
 <script lang="ts" setup>
   import { ref, Ref, watch, withDefaults } from 'vue';
@@ -22,6 +26,15 @@
   watch(
     () => [props.dataPointList, props.messageList],
     ([newValue, newValue1]) => {
+      // 计算总量
+      let dataPointTotal = 0;
+      let messageTotal = 0;
+      for (const item of newValue) {
+        dataPointTotal += Number(item[1]);
+      }
+      for (const item of newValue1) {
+        messageTotal += Number(item[1]);
+      }
       setOptions({
         tooltip: {
           trigger: 'axis',
@@ -34,8 +47,13 @@
         },
         legend: {
           data: ['传输数据点', '传输消息量'],
-          left: '10%',
+          left: '5%',
+          orient: 'vertical',
+          formatter: (name) => {
+            return name === '传输数据点' ? `${name} ${dataPointTotal}` : `${name} ${messageTotal}`;
+          },
         },
+
         yAxis: {},
         grid: {
           left: '3%',
@@ -45,18 +63,18 @@
         },
         series: [
           {
-            name: '传输消息量',
+            name: '传输数据点',
             type: 'bar',
             stack: 'total',
-            data: newValue1,
-            color: '#5c7bd9',
+            data: newValue,
+            color: '#9fe080',
           },
           {
-            name: '传输数据点',
+            name: '传输消息量',
             type: 'bar',
             stack: 'total',
-            data: newValue,
-            color: '#9fe080',
+            data: newValue1,
+            color: '#5c7bd9',
           },
         ],
       });

@@ -15,37 +15,3 @@ export const achieveList: TabItem[] = [
     component: 'EmailLog',
   },
 ];
-
-export const actions: any[] = [
-  { icon: 'clarity:star-line', text: '156', color: '#018ffb' },
-  { icon: 'bx:bxs-like', text: '156', color: '#459ae8' },
-  { icon: 'bx:bxs-message-dots', text: '2', color: '#42d27d' },
-];
-
-export const articleList = (() => {
-  const result: any[] = [];
-  for (let i = 0; i < 4; i++) {
-    result.push({
-      title: 'Vben Admin',
-      description: ['Vben', '设计语言', 'Typescript'],
-      content: '基于Vue Next, TypeScript, Ant Design实现的一套完整的企业级后台管理系统。',
-      time: '2020-11-14 11:20',
-    });
-  }
-  return result;
-})();
-
-export const applicationList = (() => {
-  const result: any[] = [];
-  for (let i = 0; i < 8; i++) {
-    result.push({
-      title: 'Vben Admin',
-      icon: 'emojione-monotone:letter-a',
-      color: '#1890ff',
-      active: '100',
-      new: '1,799',
-      download: 'bx:bx-download',
-    });
-  }
-  return result;
-})();

@@ -3,6 +3,14 @@
     <BasicTable @register="registerTable">
       <template #toolbar>
         <a-button type="primary" @click="handleCreate"> 导出 </a-button>
+        <a-button
+          type="primary"
+          color="error"
+          @click="handleDeleteOrBatchDelete(null)"
+          :disabled="hasBatchDelete"
+        >
+          批量删除
+        </a-button>
       </template>
       <template #action="{ record }">
         <TableAction
@@ -18,7 +26,7 @@
               color: 'error',
               popConfirm: {
                 title: '是否确认删除',
-                confirm: handleDelete.bind(null, record),
+                confirm: handleDeleteOrBatchDelete.bind(null, record),
               },
             },
           ]"
@@ -33,16 +41,19 @@
   import { BasicTable, useTable, TableAction } from '/@/components/Table';
   import { useDrawerInner } from '/@/components/Drawer';
   import { columns, searchFormSchema } from './email.data';
-  import { useMessage } from '/@/hooks/web/useMessage';
   import { mailLogPage, deleteMailLog } from '/@/api/message/records';
   import { useModal } from '/@/components/Modal';
   import EmailDetail from '/@/views/message/records/item/EmailDetail.vue';
+  import { useBatchDelete } from '/@/hooks/web/useBatchDelete';
   export default defineComponent({
     name: 'EmailLog',
     components: { EmailDetail, BasicTable, TableAction },
     setup() {
       const [registerModal, { openModal }] = useModal();
-      const { createMessage } = useMessage();
+      const { hasBatchDelete, selectionOptions, handleDeleteOrBatchDelete } = useBatchDelete(
+        deleteMailLog,
+        handleSuccess
+      );
       const [register] = useDrawerInner(() => {});
       const [registerTable, { reload }] = useTable({
         title: '邮件发送列表',
@@ -64,7 +75,7 @@
           slots: { customRender: 'action' },
           fixed: 'right',
         },
-        immediate: true,
+        ...selectionOptions,
       });
 
       function handleCreate() {}
@@ -75,14 +86,6 @@
         });
       }
 
-      function handleDelete(record: Recordable) {
-        let ids = [record.id];
-        deleteMailLog(ids).then((result) => {
-          createMessage.success(result.message);
-          handleSuccess();
-        });
-      }
-
       function handleSuccess() {
         reload();
       }
@@ -92,7 +95,8 @@
         registerTable,
         registerModal,
         handleCreate,
-        handleDelete,
+        hasBatchDelete,
+        handleDeleteOrBatchDelete,
         handleModal,
         handleSuccess,
       };

@@ -2,7 +2,15 @@
   <div style="background-color: #f0f2f5">
     <BasicTable @register="registerTable">
       <template #toolbar>
-        <a-button type="primary" @click="handleCreate"> 导出 </a-button>
+        <a-button type="primary" @click="handleExport"> 导出 </a-button>
+        <a-button
+          type="primary"
+          color="error"
+          @click="handleDeleteOrBatchDelete(null)"
+          :disabled="hasBatchDelete"
+        >
+          批量删除
+        </a-button>
       </template>
       <template #action="{ record }">
         <TableAction
@@ -18,7 +26,7 @@
               color: 'error',
               popConfirm: {
                 title: '是否确认删除',
-                confirm: handleDelete.bind(null, record),
+                confirm: handleDeleteOrBatchDelete.bind(null, record),
               },
             },
           ]"
@@ -29,21 +37,22 @@
 </template>
 <script lang="ts">
   import { defineComponent, h } from 'vue';
-
   import { BasicTable, useTable, TableAction } from '/@/components/Table';
-  import { useDrawerInner } from '/@/components/Drawer';
   import { columns, searchFormSchema } from './sms.data';
   import { Modal } from 'ant-design-vue';
-  import { useMessage } from '/@/hooks/web/useMessage';
   import { smsLogPage, deleteSmsLog } from '/@/api/message/records';
   import { JsonPreview } from '/@/components/CodeEditor';
+  import { useBatchDelete } from '/@/hooks/web/useBatchDelete';
 
   export default defineComponent({
     name: 'SmsLog',
     components: { BasicTable, TableAction },
     setup() {
-      const { createMessage } = useMessage();
-      const [register] = useDrawerInner(() => {});
+      // 批量删除的hooks
+      const { hasBatchDelete, handleDeleteOrBatchDelete, selectionOptions } = useBatchDelete(
+        deleteSmsLog,
+        handleSuccess
+      );
       const [registerTable, { reload }] = useTable({
         title: '短信发送列表',
         api: smsLogPage,
@@ -64,10 +73,8 @@
           slots: { customRender: 'action' },
           fixed: 'right',
         },
+        ...selectionOptions,
       });
-
-      function handleCreate() {}
-
       function handleQuery(record: Recordable) {
         Modal.info({
           title: '当前配置',
@@ -75,26 +82,19 @@
           content: h(JsonPreview, { data: JSON.parse(JSON.stringify(record.templateParam)) }),
         });
       }
-
-      function handleDelete(record: Recordable) {
-        let ids = [record.id];
-        deleteSmsLog(ids).then((result) => {
-          createMessage.success(result.message);
-          handleSuccess();
-        });
-      }
-
+      // 导出 TODO:待做
+      const handleExport = () => {};
+      // 刷新表格
       function handleSuccess() {
         reload();
       }
 
       return {
-        register,
+        hasBatchDelete,
         registerTable,
-        handleCreate,
-        handleDelete,
-        handleSuccess,
+        handleExport,
         handleQuery,
+        handleDeleteOrBatchDelete,
       };
     },
   });