水印、消息管理

src/App.vue

@@ -17,6 +17,7 @@
   import { useLockscreenStore } from '@/store/modules/lockscreen';
   import { useRoute } from 'vue-router';
   import { PageEnum } from '@/enums/pageEnum';
+  import Watermark from '@/utils/wartermark';
 
   const route = useRoute();
   const useLockscreen = useLockscreenStore();
@@ -47,11 +48,11 @@
       }
     }, 1000);
   };
-
+ 
   onMounted(() => {
-    // document.addEventListener('mousedown', timekeeping);
+    const waterText = import.meta.env.VITE_GLOB_APP_TITLE;
+    Watermark.set(waterText)
   });
-
   onUnmounted(() => {
     // document.removeEventListener('mousedown', timekeeping);
   });

src/components/Table/src/Table.vue

@@ -384,7 +384,7 @@
     await nextTick();
     const headEl = tableEl.querySelector('.el-table__header-wrapper');
     const { bottomIncludeBody } = getViewportOffset(headEl);
-    let headerH = 40;
+    let headerH = 30;
     let paginationH = 0;
     let marginH = 0;
     if (!isBoolean(pagination.value)) {

src/utils/wartermark.ts

@@ -0,0 +1,47 @@
+// 页面添加水印效果
+const setWatermark = (str: string) => {
+	const id = '1.23452384164.123412416';
+	if (document.getElementById(id) !== null) document.body.removeChild(<HTMLElement>document.getElementById(id));
+	const can = document.createElement('canvas');
+	can.width = 200;
+	can.height = 130;
+	const cans = <CanvasRenderingContext2D>can.getContext('2d');
+	cans.rotate((-20 * Math.PI) / 180);
+	cans.font = '12px Vedana';
+	cans.fillStyle = 'rgba(200, 200, 200, 0.30)';
+	cans.textBaseline = 'middle';
+	cans.fillText(str, can.width / 10, can.height / 2);
+	const div = document.createElement('div');
+	div.id = id;
+	div.style.pointerEvents = 'none';
+	div.style.top = '0px';
+	div.style.left = '0px';
+	div.style.position = 'fixed';
+	div.style.zIndex = '10000000';
+	div.style.width = `${document.documentElement.clientWidth}px`;
+	div.style.height = `${document.documentElement.clientHeight}px`;
+	div.style.background = `url(${can.toDataURL('image/png')}) left top repeat`;
+	document.body.appendChild(div);
+	return id;
+};
+
+/**
+ * 页面添加水印效果
+ * @method set 设置水印
+ * @method del 删除水印
+ */
+const watermark = {
+	// 设置水印
+	set: (str: string) => {
+		let id = setWatermark(str);
+		if (document.getElementById(id) === null) id = setWatermark(str);
+	},
+	// 删除水印
+	del: () => {
+		let id = '1.23452384164.123412416';
+		if (document.getElementById(id) !== null) document.body.removeChild(<HTMLElement>document.getElementById(id));
+	},
+};
+
+// 导出方法
+export default watermark;

src/views/dashboard/message/index.vue

@@ -1,46 +1,42 @@
 <template>
   <PageWrapper>
-    <el-row :gutter="10" class="mt-3">
+    <el-card shadow="never" size="small" class="proCard tabsCard">
-      <el-col :xs="24" :sm="24" :md="3" :lg="3" :xl="3">
+      <el-tabs v-model="activeName" @tab-change="handleClick">
-        <el-card shadow="hover" class="mb-4 border-0 proCard" :style="{ height: docHeight + 'px' }">
+        <el-tab-pane
-          <div
+          :name="item.value"
-            v-for="(item, index) in messageTypeList"
+          v-for="(item, index) in messageTypeList"
-            :key="index"
+          :key="index"
-            @click="handleClick(item, index)"
+        >
-            class="type-item"
+        <template #label>
-            :class="index == activeIndex ? 'active' : ''"
+          <span class="custom-tabs-label">
-          >
             <el-badge :value="item.number ? item.number : ''" :max="99" class="item">
               <span class="t1">{{ item.name }}</span>
             </el-badge>
-          </div>
+          </span>
-        </el-card>
+        </template>
-      </el-col>
+        </el-tab-pane>
-      <el-col :xs="24" :sm="24" :md="21" :lg="21" :xl="21">
+      </el-tabs>
-        <el-card shadow="hover" class="mb-4 border-0 proCard">
+      <BasicTable
-          <BasicTable
+        :columns="columns"
-            :columns="columns"
+        :request="loadDataTable"
-            :request="loadDataTable"
+        :row-key="(row) => row.id"
-            :row-key="(row) => row.id"
+        ref="tableRef"
-            ref="tableRef"
+        :actionColumn="actionColumn"
-            :actionColumn="actionColumn"
+        @selection-change="onSelectionChange"
-            @selection-change="onSelectionChange"
+      >
-          >
+        <template #tableTitle>
-            <template #tableTitle>
+          <el-button type="primary" @click="handleSetRead()"> 批量确认 </el-button>
-              <el-button type="primary" @click="handleSetRead()"> 批量确认 </el-button>
+          <el-button type="danger" @click="handleDelete()" :disabled="!selectionData.length">
-              <el-button type="danger" @click="handleDelete()" :disabled="!selectionData.length">
+            <template #icon>
-                <template #icon>
+              <el-icon class="el-input__icon">
-                  <el-icon class="el-input__icon">
+                <Delete />
-                    <Delete />
+              </el-icon>
-                  </el-icon>
-                </template>
-                删除
-              </el-button>
             </template>
-          </BasicTable>
+            删除
-        </el-card>
+          </el-button>
-      </el-col>
+        </template>
-    </el-row>
+      </BasicTable>
+    </el-card>
     <editDialog
       v-if="editVisible"
       :messageId="messageId"
@@ -64,7 +60,7 @@
   const editDialog = defineAsyncComponent(() => import('./edit.vue'));
   const messageId = ref(0);
   const docHeight = ref(500);
-  const activeIndex = ref(0);
+  const activeName = ref(1);
   const messageTypeList = ref([
     {
       name: '系统通知',
@@ -118,7 +114,7 @@
 
   const loadDataTable = async (res: any) => {
     const result = await getMessageProfile({ ...formParams, ...res });
-    let item = messageTypeList.value.find((item, index) => index == activeIndex.value);
+    let item = messageTypeList.value.find((item, index) => item.value == activeName.value);
     item.number = result.number;
     return result;
   };
@@ -126,9 +122,9 @@
   function reloadTable(noRefresh = '') {
     tableRef.value.reload(noRefresh ? {} : { pageNo: 1 });
   }
-  const handleClick = (item, index) => {
+  const handleClick = (e) => {
-    activeIndex.value = index;
+    activeName.value = e
-    formParams.type = item.value;
+    formParams.type = activeName.value;
     reloadTable();
   };
 
@@ -166,32 +162,8 @@
   });
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
-  .type-item {
+:deep(.proCard.tabsCard .el-card__body) {
-    height: 40px;
+    padding-bottom: 15px;
-    line-height: 40px;
-    padding: 0 6px;
-    cursor: pointer;
-    display: flex;
-    justify-content: space-between;
-    .t1 {
-      width: 100px;
-      display: block;
-    }
-    &.active {
-      background-color: #e8f1ff;
-      border-radius: 3px;
-      .t1 {
-        color: #1677ff;
-        .t2 {
-          background-color: #ff4d4f;
-          color: #ffffff;
-        }
-      }
-    }
-    .el-badge__content.is-fixed {
-      top: 20px;
-      right: calc(-10px + var(--el-badge-size) / 2);
-    }
   }
 </style>

src/views/data/config/index.vue

@@ -104,7 +104,7 @@
     size: 10,
     count: configDataList.value.length,
   });
-  const fwbHeight = document.body.clientHeight - 370;
+  const fwbHeight = document.body.clientHeight - 360;
 
   /**
    * 执行添加

src/views/data/dict/index.vue

@@ -122,7 +122,7 @@
     size: 20,
     count: dictDataList.value.length,
   });
-  const fwbHeight = document.body.clientHeight - 370;
+  const fwbHeight = document.body.clientHeight - 360;
 
   /**
    * 执行添加

src/views/monitor/caches/index.vue

@@ -126,7 +126,7 @@
   });
   const cacheName = ref('');
   const cacheKey = ref('');
-  const fwbHeight = document.body.clientHeight - 230;
+  const fwbHeight = document.body.clientHeight - 220;
 
   /**
    * 选择缓存名

src/views/monitor/online/index.vue

@@ -73,7 +73,7 @@
     size: 10,
     count: onlineTableData.value.length,
   });
-  const fwbHeight = document.body.clientHeight - 340;
+  const fwbHeight = document.body.clientHeight - 330;
 
   /**
    * 加载数据列表