水印/系统日志

src/api/system/logs.js

@@ -1,6 +1,13 @@
 import request from '@/utils/request'
 import qs from 'qs'
 
+export function getErrDetail(id) {
+  return request({
+    url: 'api/log/getErrorLogDetail?id=' + id,
+    method: 'get'
+  })
+}
+
 // 清空登录日志
 export function FetchClearLoginLog(data) {
   return request({
@@ -56,6 +63,7 @@ export function userMsgDel(data) {
 }
 
 export default {
+  getErrDetail,
   FetchClearLoginLog,
   FetchClearLog,
   FetchClearErrorLog,

src/utils/waterMark.js

@@ -0,0 +1,185 @@
+// 水印添加
+export const watermark = (settings, className, type) => {
+  // 默认设置
+  var defaultSettings = {
+    watermark_txt: settings.watermark_txt,
+    watermark_x: 20, // 水印起始位置x轴坐标
+    watermark_y: 10, // 水印起始位置Y轴坐标
+    watermark_rows: 5, // 水印行数
+    watermark_cols: 10, // 水印列数
+    watermark_x_space: 50, // 水印x轴间隔
+    watermark_y_space: 100, // 水印y轴间隔
+    watermark_color: settings.watermark_color, // 水印字体颜色
+    watermark_alpha: settings.watermark_alpha, // 水印透明度
+    watermark_fontsize: settings.watermark_fontsize || '15px', // 水印字体大小
+    watermark_font: '微软雅黑', // 水印字体
+    watermark_width: 100, // 水印宽度
+    watermark_height: 40, // 水印长度
+    watermark_angle: 15 // 水印倾斜度数
+  }
+
+  var oTemp = document.createDocumentFragment()
+
+  // 获取页面最大宽度
+  var page_width = Math.max(document.body.scrollWidth, document.body.clientWidth)
+  var cutWidth = page_width * 0.015
+  page_width = page_width - cutWidth
+  // 获取页面最大高度
+  var page_height = Math.max(document.body.scrollHeight, document.body.clientHeight) + 650
+  // var page_height = document.body.scrollHeight+document.body.scrollTop;
+  // 如果将水印列数设置为0，或水印列数设置过大，超过页面最大宽度，则重新计算水印列数和水印x轴间隔
+  if (
+    defaultSettings.watermark_cols === 0 ||
+      parseInt(
+        defaultSettings.watermark_x +
+          defaultSettings.watermark_width *
+            defaultSettings.watermark_cols +
+          defaultSettings.watermark_x_space *
+            (defaultSettings.watermark_cols - 1)
+      ) > page_width
+  ) {
+    defaultSettings.watermark_cols = parseInt(
+      (page_width -
+          defaultSettings.watermark_x +
+          defaultSettings.watermark_x_space) /
+          (defaultSettings.watermark_width +
+            defaultSettings.watermark_x_space) -
+          1
+    )
+    defaultSettings.watermark_x_space = parseInt(
+      (page_width -
+          defaultSettings.watermark_x -
+          defaultSettings.watermark_width *
+            defaultSettings.watermark_cols) /
+          (defaultSettings.watermark_cols - 1) -
+          10
+    )
+  }
+  // 如果将水印行数设置为0，或水印行数设置过大，超过页面最大长度，则重新计算水印行数和水印y轴间隔
+  if (
+    defaultSettings.watermark_rows === 0 ||
+      parseInt(
+        defaultSettings.watermark_y +
+          defaultSettings.watermark_height *
+            defaultSettings.watermark_rows +
+          defaultSettings.watermark_y_space *
+            (defaultSettings.watermark_rows - 1)
+      ) > page_height
+  ) {
+    defaultSettings.watermark_rows = parseInt(
+      (defaultSettings.watermark_y_space +
+          page_height -
+          defaultSettings.watermark_y) /
+          (defaultSettings.watermark_height +
+            defaultSettings.watermark_y_space)
+    )
+    defaultSettings.watermark_y_space = parseInt((page_height - defaultSettings.watermark_y - defaultSettings.watermark_height * defaultSettings.watermark_rows) / (defaultSettings.watermark_rows - 1))
+  }
+  var x
+  var y
+  for (var i = 0; i < defaultSettings.watermark_rows; i++) {
+    y = defaultSettings.watermark_y + (defaultSettings.watermark_y_space + defaultSettings.watermark_height) * i
+    for (var j = 0; j < defaultSettings.watermark_cols; j++) {
+      x = defaultSettings.watermark_x + (defaultSettings.watermark_width + defaultSettings.watermark_x_space) * j
+
+      const dom = document.getElementsByClassName(className)
+      const canvas = document.createElement('canvas')
+      const cxt = canvas.getContext('2d')
+      const divImg = document.createElement('div')
+
+      const imgScale = 0.4
+      // canvas.width = 200
+
+      var mask_div = document.createElement('div')
+
+      mask_div.id = 'mask_div' + i + j
+      mask_div.className = 'mask_div'
+
+      mask_div.appendChild(document.createTextNode(defaultSettings.watermark_txt))
+
+      if (type === 'img') {
+        // 创建新的图片对象
+        const img = new Image()
+        // 指定图片的URL
+        img.src = defaultSettings.watermark_txt
+        // 浏览器加载图片完毕后再绘制图片
+        img.onload = function() {
+          // cxt.drawImage(img,0,0);
+          cxt.rotate(-20 * Math.PI / 180)
+          // const whScale = img.width / img.height
+          cxt.clearRect(0, 0, canvas.width, canvas.height)
+          cxt.drawImage(img, // 规定要使用的图像、画布或视频。
+            0, 0, // 开始剪切的 x 坐标位置。
+            img.width, img.height, // 被剪切图像的高度。
+            0, 100, // 在画布上放置图像的 x 、y坐标位置。
+            img.width * imgScale, img.height * imgScale // 要使用的图像的宽度、高度
+          )
+          divImg.style.opacity = defaultSettings.watermark_alpha
+          divImg.style.background = 'url(' + canvas.toDataURL('image/png') + ') left top repeat'
+          drawImage(divImg, dom)
+        }
+      } else {
+        // 设置水印div倾斜显示
+        mask_div.style.webkitTransform = 'rotate(-' + defaultSettings.watermark_angle + 'deg)'
+        mask_div.style.MozTransform = 'rotate(-' + defaultSettings.watermark_angle + 'deg)'
+        mask_div.style.msTransform = 'rotate(-' + defaultSettings.watermark_angle + 'deg)'
+        mask_div.style.OTransform = 'rotate(-' + defaultSettings.watermark_angle + 'deg)'
+        mask_div.style.transform = 'rotate(-' + defaultSettings.watermark_angle + 'deg)'
+        mask_div.style.visibility = ''
+        mask_div.style.position = 'absolute'
+        mask_div.style.left = x + 'px'
+        mask_div.style.top = y + 'px'
+        mask_div.style.overflow = 'hidden'
+        mask_div.style.zIndex = '9999'
+        mask_div.style.pointerEvents = 'none' // pointer-events:none  让水印不遮挡页面的点击事件
+        mask_div.style.opacity = defaultSettings.watermark_alpha
+        mask_div.style.fontSize = defaultSettings.watermark_fontsize
+        mask_div.style.fontFamily = defaultSettings.watermark_font
+        mask_div.style.color = defaultSettings.watermark_color
+        mask_div.style.textAlign = 'center'
+        mask_div.style.width = defaultSettings.watermark_width + 'px'
+        mask_div.style.height = defaultSettings.watermark_height + 'px'
+        mask_div.style.display = 'block'
+        oTemp.appendChild(mask_div)
+
+        const parent = document.getElementsByClassName(className)[0]
+        const child = parent.getElementsByClassName('mask_div')
+        if (child.length > 0) {
+          for (let i = 0; i < child.length; i++) {
+            parent.removeChild(child[i])
+          }
+        }
+        parent.appendChild(oTemp.cloneNode(true))
+      }
+    }
+  }
+  // document.body.appendChild(oTemp)
+}
+
+var drawImage = function(div, dom) {
+  div.style.pointerEvents = 'none'
+  div.className = 'weterbox'
+  div.style.top = 0
+  div.style.left = 0
+  div.style.position = 'absolute'
+  div.style.zIndex = '100000'
+  div.style.width = '100%'
+  div.style.height = '100%'
+  // console.log(dom)
+  if (dom.length > 0) {
+    for (let i = 0; i < dom.length; i++) {
+      const child = dom[i].getElementsByClassName('weterbox')
+      if (child.length > 0) {
+        dom[i].removeChild(child[0])
+      }
+      const childTxt = dom[i].getElementsByClassName('mask_div')
+      if (childTxt.length > 0) {
+        for (let j = 0; j < childTxt.length; j++) {
+          dom[i].removeChild(childTxt[j])
+        }
+      }
+      dom[i].appendChild(div.cloneNode(true))
+      //  console.log(i,dom[i])
+    }
+  }
+}

src/views/system/log/errorLog/index.vue

@@ -2,7 +2,7 @@
   <div style="height: calc(100vh - 236px);">
     <Search :is-log-type="isLogType" @handleClearErrorData="handleDelt" />
     <!--表格渲染-->
-    <el-table ref="table" v-loading="crud.loading" :data="crud.data" style="width: 100%;" height="calc(100vh - 435px)" @selection-change="crud.selectionChangeHandler" @row-click="clickRowHandler" @cell-dblclick="tableDoubleClick">
+    <el-table ref="table" v-loading="crud.loading" :data="crud.data" style="width: 100%;" height="calc(100vh - 396px)" @selection-change="crud.selectionChangeHandler" @row-click="clickRowHandler" @cell-dblclick="tableDoubleClick">
       <el-table-column type="selection" width="55" align="center" />
       <el-table-column align="center" type="expand">
         <template slot-scope="props">
@@ -43,7 +43,7 @@
 </template>
 
 <script>
-// import { FetchClearErrorLog } from '@/api/system/logs'
+import { FetchClearErrorLog, getErrDetail } from '@/api/system/logs'
 import Search from '@/views/system/log/search.vue'
 import CRUD, { presenter } from '@crud/crud'
 import pagination from '@crud/Pagination'
@@ -75,32 +75,31 @@ export default {
     clickRowHandler(row) {
       this.$refs.table.toggleRowSelection(row) // 单击选中
     },
-    // table - 双击查看详情
+    // table - 双击查看详情 log/getErrorLogDetail
     tableDoubleClick(row) {
       this.dialog = true
-      // getErrDetail(row.id).then(res => {
-      //   this.errorInfo = res.exception
-      // })
+      getErrDetail(row.id).then(res => {
+        this.errorInfo = res.exception
+      })
     },
     handleDelt() {
-      console.log('清空异常日志')
-      // this.$confirm('此操作将清空所选数据' + this.crud.title + '<span>你是否还要继续？</span>', '提示', {
-      //   confirmButtonText: '继续',
-      //   cancelButtonText: '取消',
-      //   type: 'warning',
-      //   dangerouslyUseHTMLString: true
-      // }).then(() => {
-      //   this.crud.delAllLoading = true
-      //   FetchClearErrorLog().then(() => {
-      //     this.crud.notify('清空成功', CRUD.NOTIFICATION_TYPE.SUCCESS)
-      //     this.crud.delAllLoading = false
-      //     this.crud.refresh()
-      //   }).catch(err => {
-      //     this.crud.delAllLoading = false
-      //     console.log(err)
-      //   })
-      // }).catch(() => {
-      // })
+      this.$confirm('此操作将清空所选数据' + this.crud.title + '<span>你是否还要继续？</span>', '提示', {
+        confirmButtonText: '继续',
+        cancelButtonText: '取消',
+        type: 'warning',
+        dangerouslyUseHTMLString: true
+      }).then(() => {
+        this.crud.delAllLoading = true
+        FetchClearErrorLog().then(() => {
+          this.crud.notify('清空成功', CRUD.NOTIFICATION_TYPE.SUCCESS)
+          this.crud.delAllLoading = false
+          this.crud.refresh()
+        }).catch(err => {
+          this.crud.delAllLoading = false
+          console.log(err)
+        })
+      }).catch(() => {
+      })
     }
   }
 }
@@ -110,4 +109,7 @@ export default {
 ::v-deep .el-dialog .el-dialog__body{
   padding: 10px 0 30px 0;
 }
+::v-deep .el-pagination{
+  margin: 24px 0 10px 0 !important
+}
 </style>

src/views/system/log/loginLog/index.vue

@@ -5,14 +5,14 @@
       ref="table"
       :data="crud.data"
       style="width: 100%;"
-      height="calc(100vh - 435px)"
+      height="calc(100vh - 396px)"
       @row-click="clickRowHandler"
       @selection-change="crud.selectionChangeHandler"
     >
       <el-table-column type="selection" width="55" align="center" />
       <el-table-column prop="account" label="账号" min-width="150" align="center" />
       <el-table-column prop="username" label="用户名" align="center" min-width="150" />
-      <el-table-column prop="username" label="所属全宗" align="center" min-width="150" />
+      <el-table-column prop="fondsName" label="所属全宗" align="center" min-width="150" />
       <el-table-column prop="det" label="所属部门" align="center" min-width="180" />
       <el-table-column prop="role" label="用户角色" align="center" min-width="150">
         <template slot-scope="scope">
@@ -20,9 +20,9 @@
         </template>
       </el-table-column>
       <el-table-column prop="requestIp" label="IP" align="center" min-width="180" />
-      <el-table-column prop="create_time" label="操作时间" align="center" min-width="180">
+      <el-table-column prop="createTime" label="操作时间" align="center" min-width="180">
         <template slot-scope="scope">
-          <div>{{ scope.row.create_time | parseTime }}</div>
+          <div>{{ scope.row.createTime | parseTime }}</div>
         </template>
       </el-table-column>
     </el-table>
@@ -93,15 +93,6 @@ export default {
       }).catch(() => {
       })
     },
-    // 导出
-    // handleDownload() {
-    //   this.crud.downloadLoading = true
-    //   const fileName = parseTime(new Date()) + '-登录日志'
-    //   getBlob(this.baseApi + '/api/loginlogs/download' + '?' + qs.stringify(this.crud.query, { indices: false }), function(blob) {
-    //     saveAs(blob, fileName)
-    //   })
-    //   this.crud.downloadLoading = false
-    // },
     clickRowHandler(row) {
       this.$refs.table.toggleRowSelection(row) // 单击选中
     }
@@ -110,4 +101,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+::v-deep .el-pagination{
+  margin: 24px 0 10px 0 !important
+}
 </style>

src/views/system/log/operateLog/index.vue

@@ -5,7 +5,7 @@
       ref="table"
       :data="crud.data"
       style="width: 100%;"
-      height="calc(100vh - 435px)"
+      height="calc(100vh - 396px)"
       @row-click="clickRowHandler"
       @selection-change="crud.selectionChangeHandler"
     >
@@ -48,7 +48,7 @@
 </template>
 
 <script>
-// import { FetchClearLog } from '@/api/system/logs'
+import { FetchClearLog } from '@/api/system/logs'
 import Search from '@/views/system/log/search.vue'
 import CRUD, { presenter, crud } from '@crud/crud'
 import pagination from '@crud/Pagination'
@@ -82,28 +82,30 @@ export default {
       this.$refs.table.toggleRowSelection(row) // 单击选中
     },
     handleDelt() {
-      console.log('清空操作日志')
-      // this.$confirm('此操作将清空所选数据' + this.crud.title + '<span>你是否还要继续？</span>', '提示', {
-      //   confirmButtonText: '继续',
-      //   cancelButtonText: '取消',
-      //   type: 'warning',
-      //   dangerouslyUseHTMLString: true
-      // }).then(() => {
-      //   this.crud.delAllLoading = true
-      //   FetchClearLog().then(() => {
-      //     this.crud.notify('清空成功', CRUD.NOTIFICATION_TYPE.SUCCESS)
-      //     this.crud.delAllLoading = false
-      //     this.crud.refresh()
-      //   }).catch(err => {
-      //     this.crud.delAllLoading = false
-      //     console.log(err)
-      //   })
-      // }).catch(() => {
-      // })
+      this.$confirm('此操作将清空所选数据' + this.crud.title + '<span>你是否还要继续？</span>', '提示', {
+        confirmButtonText: '继续',
+        cancelButtonText: '取消',
+        type: 'warning',
+        dangerouslyUseHTMLString: true
+      }).then(() => {
+        this.crud.delAllLoading = true
+        FetchClearLog().then(() => {
+          this.crud.notify('清空成功', CRUD.NOTIFICATION_TYPE.SUCCESS)
+          this.crud.delAllLoading = false
+          this.crud.refresh()
+        }).catch(err => {
+          this.crud.delAllLoading = false
+          console.log(err)
+        })
+      }).catch(() => {
+      })
     }
   }
 }
 </script>
 
 <style lang="scss" scoped>
+::v-deep .el-pagination{
+  margin: 24px 0 10px 0 !important
+}
 </style>

src/views/system/log/search.vue

@@ -153,24 +153,15 @@ export default {
         data.forEach(val => {
           ids.push(val.id)
         })
+        const params = {
+          'ids': ids
+        }
         if (this.isLogType === 'login') {
-          console.log('导出 - 登录日志')
-          const params = {
-            'deptsIds': ids
-          }
-          exportFile(this.baseApi + '/api/depts/download?' + qs.stringify(params, { indices: false }))
+          exportFile(this.baseApi + '/api/log/downloadLoginLog?' + qs.stringify(params, { indices: false }))
         } else if (this.isLogType === 'operate') {
-          console.log('导出 - 操作日志')
-          const params = {
-            'deptsIds': ids
-          }
-          exportFile(this.baseApi + '/api/depts/download?' + qs.stringify(params, { indices: false }))
+          exportFile(this.baseApi + '/api/log/downloadLog?' + qs.stringify(params, { indices: false }))
         } else {
-          console.log('导出 - 错误日志')
-          const params = {
-            'deptsIds': ids
-          }
-          exportFile(this.baseApi + '/api/depts/download?' + qs.stringify(params, { indices: false }))
+          exportFile(this.baseApi + '/api/log/downloadErrorLog?' + qs.stringify(params, { indices: false }))
         }
       }).catch(() => {
       })

src/views/system/watermarkManage/index.vue

@@ -33,13 +33,15 @@
         <div class="waterMark-preview">
           <div class="chapter-item">
             <p class="item-title">效果预览</p>
-            <img src="~@/assets/images/system/xt-wm.png" alt="">
+            <div class="waterMark-preview-img">
+              <img src="~@/assets/images/system/xt-wm.png" alt="">
+            </div>
           </div>
         </div>
         <div class="chapter-enable">
           <div class="chapter-item">
             <p class="item-title">是否启用</p>
-            <el-switch v-model="isEnable" class="isEnable-chapter" />
+            <el-switch v-model="isEnable" class="isEnable-chapter" @change="changeStatus" />
           </div>
           <div class="chapter-edit">
             <el-button size="mini" @click="toEdit()">
@@ -55,7 +57,8 @@
 </template>
 
 <script>
-import { getInitWatermark } from '@/api/system/waterMask'
+import { watermark } from '@/utils/waterMark'
+import { getInitWatermark, edit } from '@/api/system/waterMask'
 import eForm from './module/form'
 export default {
   name: 'WatermarkManage',
@@ -69,17 +72,49 @@ export default {
   computed: {
   },
   created() {
+
   },
   mounted() {
+    // if (child.length > 0) {
+    //   for (let i = 0; i < child.length; i++) {
+    //     parent.removeChild(child[i])
+    //   }
+    // }
+    // if (childImg.length > 0) {
+    //   parent.removeChild(childImg[0])
+    // }
     this.getInit()
   },
   methods: {
     getInit() {
       getInitWatermark().then((res) => {
         this.watermarkInfo = res
-        console.log(res)
+        this.isEnable = this.watermarkInfo.isEnable
+        const parent = document.getElementsByClassName('waterMark-preview-img')
+
+        if (res.watermarkType === '1') {
+          watermark({
+            watermark_txt: this.watermarkInfo.context,
+            watermark_alpha: parseFloat(this.watermarkInfo.transparency) / 100
+          }, 'waterMark-preview-img', 'img')
+        } else if (res.watermarkType === '0') {
+          if (parent.length > 0) {
+            for (let i = 0; i < parent.length; i++) {
+              const childImg = parent[i].getElementsByClassName('weterbox')
+              if (childImg.length > 0) {
+                for (let i = 0; i < childImg.length; i++) {
+                  parent[i].removeChild(childImg[i])
+                }
+              }
+            }
+          }
+          watermark({
+            watermark_txt: this.watermarkInfo.context,
+            watermark_color: this.watermarkInfo.transparency,
+            watermark_fontsize: this.watermarkInfo.watermarkFont + 'px'
+          }, 'waterMark-preview-img', 'text')
+        }
       }).catch(err => {
-        this.crud.delAllLoading = false
         console.log(err)
       })
     },
@@ -90,8 +125,38 @@ export default {
         watermarkType: this.watermarkInfo.watermarkType,
         watermarkFont: this.watermarkInfo.watermarkFont,
         context: this.watermarkInfo.context,
+        isEnable: this.watermarkInfo.isEnable,
         transparency: this.watermarkInfo.transparency
       }
+    },
+    // 改变状态
+    changeStatus(data) {
+      this.watermarkInfo.isEnable = data
+      console.log(this.watermarkInfo)
+      this.$confirm('此操作将禁用 / 启用当前水印' + '<span>你是否还要继续？</span>', '提示', {
+        confirmButtonText: '继续',
+        cancelButtonText: '取消',
+        type: 'warning',
+        dangerouslyUseHTMLString: true
+      }).then(() => {
+        edit(this.watermarkInfo).then(res => {
+          this.$message({
+            message: '修改成功',
+            type: 'success',
+            duration: 2500
+          })
+          this.getInit()
+        }).catch(() => {
+          this.isEnable = !this.isEnable
+        })
+      }).catch(() => {
+        this.$message({
+          message: '已取消修改',
+          type: 'info',
+          duration: 2500
+        })
+        this.isEnable = !this.isEnable
+      })
     }
   }
 }
@@ -146,11 +211,18 @@ export default {
   }
 }
 .waterMark-preview{
-  img{
-    display: block;
+  .waterMark-preview-img{
+    position: relative;
+    overflow: hidden;
     width: 360px;
     height: 518px;
+    img{
+      display: block;
+      width: 360px;
+      height: 518px;
+    }
   }
+
 }
 .preview-img{
   display: block;

src/views/system/watermarkManage/module/form.vue

@@ -19,7 +19,14 @@
             </el-form-item>
           </el-col>
           <el-col :span="12">
-            <el-form-item label="颜色、透明度" prop="transparency" class="color-item">
+            <el-form-item
+              label="颜色、透明度"
+              prop="transparency"
+              class="color-item"
+              :rules="[
+                { required: true, message: '请选择颜色、透明度', trigger: 'change' },
+              ]"
+            >
               <el-input v-model="form.transparency" placeholder="请选择" readonly>
                 <el-color-picker slot="prepend" v-model="form.transparency" show-alpha :predefine="predefineColors" />
               </el-input>
@@ -41,7 +48,14 @@
             </el-form-item>
           </el-col>
           <el-col :span="12">
-            <el-form-item label="透明度" prop="transparency" class="color-item">
+            <el-form-item
+              label="透明度"
+              prop="transparency"
+              class="color-item"
+              :rules="[
+                { required: true, message: '请输入透明度', trigger: 'change' },
+              ]"
+            >
               <el-input v-model="form.transparency" />
             </el-form-item>
           </el-col>
@@ -96,10 +110,6 @@ export default {
         'hsla(209, 100%, 56%, 0.73)',
         '#c7158577'
       ],
-      // color: [
-      //   { required: true, message: '请选择颜色、透明度', trigger: 'change' }
-      // ],
-
       rules: {
         watermarkType: [
           { required: true, message: '请选择水印类型', trigger: 'change' }
@@ -107,11 +117,18 @@ export default {
         watermarkFont: [
           { required: true, message: '请选择字号', trigger: 'change' }
         ],
-        uplpad: [
-          { required: true, message: '请上传图片', trigger: 'change' }
-        ],
-        transparency: [
-          { required: true, message: '请选择颜色、透明度', trigger: 'blur' }
+        context: [
+          { required: true, trigger: 'blur',
+            validator: (rule, value, callback) => {
+              if (this.form.watermarkType === '0' && !value) {
+                callback(new Error('内容不可为空'))
+              } else if (this.form.watermarkType === '1' && !value) {
+                callback(new Error('请选择水印图片'))
+              } else {
+                callback()
+              }
+            }
+          }
         ]
       }
     }