Merge remote-tracking branch 'origin/master'

attendance-performance-manager-ui/admin/.env.production

@@ -2,7 +2,7 @@
 NODE_ENV = production
 
 # 地址
-VUE_APP_BASE_API =
+VUE_APP_API_BASE_URL =http://112.19.80.237:11039
 
 # websocket地址
 VUE_APP_WEBSOCKET_API =

attendance-performance-manager-ui/admin/package-lock.json

@@ -6442,9 +6442,8 @@
     },
     "node_modules/echarts": {
       "version": "4.9.0",
-      "resolved": "https://registry.nlark.com/echarts/download/echarts-4.9.0.tgz",
-      "integrity": "sha1-qbm6oD8Doqcx5jQMVb77V6nhNH0=",
-      "license": "Apache-2.0",
+      "resolved": "https://registry.npmjs.org/echarts/-/echarts-4.9.0.tgz",
+      "integrity": "sha512-+ugizgtJ+KmsJyyDPxaw2Br5FqzuBnyOWwcxPKO6y0gc5caYcfnEUIlNStx02necw8jmKmTafmpHhGo4XDtEIA==",
       "dependencies": {
         "zrender": "4.3.2"
       }
@@ -22404,8 +22403,8 @@
     },
     "echarts": {
       "version": "4.9.0",
-      "resolved": "https://registry.nlark.com/echarts/download/echarts-4.9.0.tgz",
-      "integrity": "sha1-qbm6oD8Doqcx5jQMVb77V6nhNH0=",
+      "resolved": "https://registry.npmjs.org/echarts/-/echarts-4.9.0.tgz",
+      "integrity": "sha512-+ugizgtJ+KmsJyyDPxaw2Br5FqzuBnyOWwcxPKO6y0gc5caYcfnEUIlNStx02necw8jmKmTafmpHhGo4XDtEIA==",
       "requires": {
         "zrender": "4.3.2"
       }

attendance-performance-manager-ui/admin/package.json

@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
+    "serve": "set NODE_OPTIONS=--openssl-legacy-provider & vue-cli-service serve",
     "dev": "vue-cli-service serve",
     "build": "vue-cli-service build",
     "test": "vue-cli-service build --mode test",

attendance-performance-manager-ui/admin/src/assets/images/u17641.svg

+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="18px" height="18px" xmlns="http://www.w3.org/2000/svg">
+  <g transform="matrix(1 0 0 1 -72 -264 )">
+    <path d="M 81 268.5  C 83.52 268.5  85.5 270.48  85.5 273  C 85.5 275.52  83.52 277.5  81 277.5  C 78.48 277.5  76.5 275.52  76.5 273  C 76.5 270.48  78.48 268.5  81 268.5  Z " fill-rule="nonzero" fill="#3377ff" stroke="none" />
+    <path d="M 81 266.5  C 84.64 266.5  87.5 269.36  87.5 273  C 87.5 276.64  84.64 279.5  81 279.5  C 77.36 279.5  74.5 276.64  74.5 273  C 74.5 269.36  77.36 266.5  81 266.5  Z " stroke-width="5" stroke="#3377ff" fill="none" stroke-opacity="0.247058823529412" />
+  </g>
+</svg>
\ No newline at end of file

attendance-performance-manager-ui/admin/src/assets/less/base.css

+html {
+  -webkit-text-size-adjust: 100%;
+  -ms-text-size-adjust: 100%;
+  box-sizing: border-box;
+}
+html * {
+  outline: 0;
+  box-sizing: inherit;
+  -webkit-text-size-adjust: none;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+html,
+body {
+  height: 100%;
+  min-height: 100%;
+  font-family: "Microsoft Yahei", "Helvetica Neue", Helvetica, STHeiTi, Arial, sans-serif;
+}
+body {
+  overflow-y: scroll;
+}
+body,
+div,
+dl,
+dt,
+dd,
+ul,
+ol,
+li,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+pre,
+code,
+form,
+fieldset,
+legend,
+input,
+textarea,
+p,
+blockquote,
+th,
+td,
+hr,
+button,
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+menu,
+nav,
+section {
+  margin: 0;
+  padding: 0;
+}
+input,
+select,
+textarea,
+button {
+  font-size: 100%;
+  -webkit-appearance: none;
+  border: 0;
+  outline: 0;
+}
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+fieldset,
+img {
+  border: 0;
+}
+abbr,
+acronym {
+  border: 0;
+  font-variant: normal;
+}
+del {
+  text-decoration: line-through;
+}
+address,
+caption,
+cite,
+code,
+dfn,
+em,
+th,
+var {
+  font-style: normal;
+  font-weight: 500;
+}
+ol,
+ul {
+  list-style: none;
+}
+caption,
+th {
+  text-align: left;
+}
+q:before,
+q:after {
+  content: "";
+}
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+sup {
+  top: -0.5em;
+}
+sub {
+  bottom: -0.25em;
+}
+.mt20 {
+  margin-top: 20px;
+}
+.mt10 {
+  margin-top: 10px;
+}
+.ml10 {
+  margin-left: 10px;
+}
+.ml20 {
+  margin-left: 20px;
+}
+ins,
+a {
+  text-decoration: none;
+  cursor: pointer;
+}
+/* ============================================================
+   flex：定义布局为盒模型
+   flex-v：盒模型垂直布局
+   flex-1：子元素占据剩余的空间
+   flex-align-center：子元素垂直居中
+   flex-pack-center：子元素水平居中
+   flex-pack-justify：子元素两端对齐
+   兼容性：ios 4+、android 2.3+、winphone8+
+   ============================================================ */
+.flex {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+.flex-v {
+  -webkit-box-orient: vertical;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+}
+.flex-1 {
+  -webkit-box-flex: 1;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+}
+.flex-align-center {
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+.flex-pack-center {
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+}
+.flex-pack-justify {
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+}
+.flex_warp {
+  flex-wrap: wrap;
+}
+.flex_end {
+  justify-content: flex-end;
+}
+.clearfix:after {
+  content: "";
+  display: table;
+  clear: both;
+  font-size: 0;
+}
+.fl {
+  float: left;
+}
+.fr {
+  float: right;
+}
+.hide {
+  display: none;
+}
+.disabled {
+  pointer-events: none;
+}
+#app,
+.pages {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  height: 100%;
+  overflow: hidden;
+}
+.ellipsis {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+[v-cloak] {
+  display: none;
+}
+[disabled] {
+  pointer-events: none;
+}
+.el-dialog .el-checkbox-group .el-checkbox {
+  margin: 5px 0;
+  width: 33.33%;
+}
+.el-dialog .el-checkbox-group .pointBox {
+  width: 50%;
+}
+.el-table th {
+  user-select: all;
+}
+.el-progress-bar {
+  padding-right: 70px;
+  margin-right: -70px;
+}
+#operatorUserCabinCheckBox .el-checkbox {
+  white-space: normal !important;
+  width: 100%;
+}
+#operatorUserCabinCheckBox .el-checkbox__label {
+  display: inline;
+}
+.page-statistics .chart {
+  margin-bottom: 80px;
+  border: 1px solid #ededed;
+  height: 400px;
+}
+.page-statistics .el-table th.color-gray,
+.page-statistics .el-table tr.color-gray {
+  background-color: #f0f9eb;
+}
+@media screen and (max-width: 800px) {
+  .page {
+    margin: 5px 5px;
+  }
+  .el-dialog {
+    width: 98% !important;
+  }
+  .el-dialog .el-checkbox-group .el-checkbox {
+    margin: 5px 0;
+    width: 50%;
+    font-size: 12px;
+  }
+  .el-dialog .el-checkbox-group .el-checkbox .el-checkbox__label {
+    font-size: 12px;
+  }
+}
+.mobile-table-card {
+  margin: 10px auto;
+  padding: 10px;
+  box-shadow: 0 0 5px #ccc;
+}
+.mobile-table-card .mobile-table-cell {
+  padding: 5px 0;
+  border-bottom: 1px dotted #eee;
+}
+.mobile-table-card .mobile-table-cell .cell-title {
+  font-size: 13px;
+  color: #666;
+}
+.mobile-table-card .mobile-table-cell .cell-content {
+  padding-left: 5px;
+  text-align: right;
+  word-break: break-word;
+}

attendance-performance-manager-ui/admin/src/assets/less/base.less

@@ -8,58 +8,111 @@ html * {
   outline: 0;
   box-sizing: inherit;
   -webkit-text-size-adjust: none;
-	-webkit-tap-highlight-color: rgba(0,0,0,0)
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }
 
-html,body {
+html,
+body {
   height: 100%;
   min-height: 100%;
-	font-family: "Microsoft Yahei", "Helvetica Neue", Helvetica, STHeiTi, Arial, sans-serif;
+  font-family: "Microsoft Yahei", "Helvetica Neue", Helvetica, STHeiTi, Arial,
+    sans-serif;
 }
 body {
   overflow-y: scroll;
 }
-body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,hr,button,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
+body,
+div,
+dl,
+dt,
+dd,
+ul,
+ol,
+li,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+pre,
+code,
+form,
+fieldset,
+legend,
+input,
+textarea,
+p,
+blockquote,
+th,
+td,
+hr,
+button,
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+menu,
+nav,
+section {
   margin: 0;
-	padding: 0
+  padding: 0;
 }
 
-input,select,textarea,button {
+input,
+select,
+textarea,
+button {
   font-size: 100%;
   -webkit-appearance: none;
-  border:0;
+  border: 0;
   outline: 0;
 }
 
 table {
   border-collapse: collapse;
-	border-spacing: 0
+  border-spacing: 0;
 }
 
-fieldset,img {
-	border: 0
+fieldset,
+img {
+  border: 0;
 }
 
-abbr,acronym {
+abbr,
+acronym {
   border: 0;
-	font-variant: normal
+  font-variant: normal;
 }
 
 del {
-	text-decoration: line-through
+  text-decoration: line-through;
 }
 
-address,caption,cite,code,dfn,em,th,var {
+address,
+caption,
+cite,
+code,
+dfn,
+em,
+th,
+var {
   font-style: normal;
-	font-weight: 500
+  font-weight: 500;
 }
 
-ol,ul {
-	list-style: none
+ol,
+ul {
+  list-style: none;
 }
 
-caption,th {
-	text-align: left
+caption,
+th {
+  text-align: left;
 }
 
 // h1,h2,h3,h4,h5,h6 {
@@ -67,37 +120,40 @@ caption,th {
 // 	font-weight: 500
 // }
 
-q:before,q:after {
-	content: ''
+q:before,
+q:after {
+  content: "";
 }
 
-sub,sup {
+sub,
+sup {
   font-size: 75%;
   line-height: 0;
   position: relative;
-	vertical-align: baseline
+  vertical-align: baseline;
 }
 
 sup {
-	top: -.5em
+  top: -0.5em;
 }
 
 sub {
-	bottom: -.25em
+  bottom: -0.25em;
 }
-.mt20{
+.mt20 {
   margin-top: 20px;
 }
-.mt10{
+.mt10 {
   margin-top: 10px;
 }
-.ml10{
+.ml10 {
   margin-left: 10px;
 }
-.ml20{
+.ml20 {
   margin-left: 20px;
 }
-ins,a {
+ins,
+a {
   text-decoration: none;
   cursor: pointer;
 }
@@ -110,39 +166,78 @@ ins,a {
    flex-pack-justify：子元素两端对齐
    兼容性：ios 4+、android 2.3+、winphone8+
    ============================================================ */
-.flex{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}
-.flex-v{-webkit-box-orient:vertical;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}
-.flex-1{-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;}
-.flex-align-center{-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;}
-.flex-pack-center{-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;}
-.flex-pack-justify{-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;}
-.flex_warp{flex-wrap: wrap;}
-.flex_end{
+.flex {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+.flex-v {
+  -webkit-box-orient: vertical;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+}
+.flex-1 {
+  -webkit-box-flex: 1;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+}
+.flex-align-center {
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+.flex-pack-center {
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+}
+.flex-pack-justify {
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+}
+.flex_warp {
+  flex-wrap: wrap;
+}
+.flex_end {
   justify-content: flex-end;
 }
-.clearfix{
-	&:after{
-    content: '';
+.clearfix {
+  &:after {
+    content: "";
     display: table;
     clear: both;
     font-size: 0;
   }
 }
-.fl{float: left};
-.fr{float: right};
-.hide{display: none;}
-.disabled{
+.fl {
+  float: left;
+}
+.fr {
+  float: right;
+}
+.hide {
+  display: none;
+}
+.disabled {
   pointer-events: none;
 }
 
-#app,.pages{
+#app,
+.pages {
   .flex;
   .flex-v;
   height: 100%;
+  overflow: hidden;
 }
 
-
-.ellipsis{
+.ellipsis {
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
@@ -153,13 +248,13 @@ ins,a {
 [disabled] {
   pointer-events: none;
 }
-.el-dialog{
-	.el-checkbox-group{
-		.el-checkbox{
+.el-dialog {
+  .el-checkbox-group {
+    .el-checkbox {
       margin: 5px 0;
       width: 33.33%;
     }
-		.pointBox{
+    .pointBox {
       width: 50%;
     }
   }
@@ -167,48 +262,47 @@ ins,a {
 .el-table th {
   user-select: all;
 }
-.el-progress-bar{
+.el-progress-bar {
   padding-right: 70px;
   margin-right: -70px;
 }
 
-#operatorUserCabinCheckBox .el-checkbox{
+#operatorUserCabinCheckBox .el-checkbox {
   white-space: normal !important;
-  width: 100%
+  width: 100%;
 }
 
-#operatorUserCabinCheckBox .el-checkbox__label{
+#operatorUserCabinCheckBox .el-checkbox__label {
   display: inline;
 }
 
 // 统计页面隔日期变色
-.page-statistics{
-  .chart{
+.page-statistics {
+  .chart {
     margin-bottom: 80px;
     border: 1px solid #ededed;
     height: 400px;
   }
-  .el-table th, .el-table tr{
-    &.color-gray{
+  .el-table th,
+  .el-table tr {
+    &.color-gray {
       background-color: #f0f9eb;
     }
   }
 }
 
-
-
-@media screen and (max-width: 800px){
-	.page{
+@media screen and (max-width: 800px) {
+  .page {
     margin: 5px 5px;
   }
-	.el-dialog{
-		width: 98%!important;
-		.el-checkbox-group{
-			.el-checkbox{
+  .el-dialog {
+    width: 98% !important;
+    .el-checkbox-group {
+      .el-checkbox {
         margin: 5px 0;
         width: 50%;
         font-size: 12px;
-				.el-checkbox__label{
+        .el-checkbox__label {
           font-size: 12px;
         }
       }
@@ -220,18 +314,18 @@ ins,a {
 // 	background-color: red;
 // }
 
-.mobile-table-card{
+.mobile-table-card {
   margin: 10px auto;
   padding: 10px;
   box-shadow: 0 0 5px #ccc;
-	.mobile-table-cell{
+  .mobile-table-cell {
     padding: 5px 0;
     border-bottom: 1px dotted #eee;
-		.cell-title{
+    .cell-title {
       font-size: 13px;
       color: #666;
     }
-		.cell-content{
+    .cell-content {
       padding-left: 5px;
       text-align: right;
       word-break: break-word;

attendance-performance-manager-ui/admin/src/assets/mixins/form.js

@@ -8,15 +8,13 @@ export default {
   methods: {
     // 渲染前置处理
     beforeRender(data) {
-      return data
+      return data;
     },
     // 渲染后置处理
-    afterRender(data) {
-
-    },
+    afterRender(data) {},
     // 提交表单的前置处理
     beforeSubmit(data) {
-      return data
+      return data;
     },
     // 提交表单的后置处理, 会阻断默认的回退行为
     afterSubmit(data) {
@@ -39,16 +37,16 @@ export default {
           // 部门格式化处理
           this.afterRender(res);
         })
-        .catch(error => {
-          console.error(error)
+        .catch((error) => {
+          console.error(error);
           this.$message.error(error.message);
         })
-        .then(data => {
+        .then((data) => {
           clearTimeout(this.loadingTimer);
           this.loadingTimer = setTimeout(() => {
             this.loading = false;
           }, 300);
-        })
+        });
     },
     // 提交表单
     submitForm(ref) {
@@ -56,73 +54,82 @@ export default {
       el.validate((valid) => {
         if (!valid) return;
         this.loading = true;
-        console.log('提交了')
-        this.$post(this.urls.saveUrl || this.pageInfo.saveUrl, 
+        console.log("提交了");
+        this.$post(
+          this.urls.saveUrl || this.pageInfo.saveUrl,
           this.beforeSubmit(this.form)
         )
-          .then(res => {
+          .then((res) => {
             this.$message.success(res.msg);
             this.afterSubmit(res);
           })
-          .catch(error => {
+          .catch((error) => {
             this.$message.error(error.message);
           })
-          .then(data => {
+          .then((data) => {
             clearTimeout(this.loadingTimer);
             this.loadingTimer = setTimeout(() => {
               this.loading = false;
             }, 200);
-          })
+          });
       });
     },
     // 复制一个数组或对象
     util_copy(data) {
-      return JSON.parse(JSON.stringify(data))
+      return JSON.parse(JSON.stringify(data));
     },
     // 工具方法，把数字转化为字符串
     util_toString(data, array) {
       //原始数据
       const dataCopy = Object.assign({}, data);
-      array.forEach(item => {
+      array.forEach((item) => {
         //如果相等做操作
-        dataCopy[item] = dataCopy[item] === undefined ? '' : dataCopy[item] + '';
-      })
+        dataCopy[item] =
+          dataCopy[item] === undefined ? "" : dataCopy[item] + "";
+      });
       return dataCopy;
     },
     // 工具方法，把字符串转化为数组
     util_toArrays(data, array) {
       const dataCopy = Object.assign({}, data);
-      array.forEach(item => {
-        dataCopy[item] = dataCopy[item] === undefined ? [] : dataCopy[item].split(",");
-      })
+      array.forEach((item) => {
+        dataCopy[item] =
+          dataCopy[item] === undefined ? [] : dataCopy[item].split(",");
+      });
       return dataCopy;
     },
     // 工具方法，把字符串转化为格式化日期
     util_toDateStr(data, array) {
       const dataCopy = Object.assign({}, data);
-      array.forEach(item => {
-        dataCopy[item] = dataCopy[item] === undefined ? '' : this.util_formatterDate(dataCopy[item]);
-      })
+      array.forEach((item) => {
+        dataCopy[item] =
+          dataCopy[item] === undefined
+            ? ""
+            : this.util_formatterDate(dataCopy[item]);
+      });
       return dataCopy;
     },
     util_formatterDate(time) {
       let date = new Date(Number(time));
-      let Y = date.getFullYear() + '-';
-      let M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
-      let D = this.panLeft(date.getDate()) + ' ';
-      let h = this.panLeft(date.getHours()) + ':';
-      let m = this.panLeft(date.getMinutes()) + ':';
+      let Y = date.getFullYear() + "-";
+      let M =
+        (date.getMonth() + 1 < 10
+          ? "0" + (date.getMonth() + 1)
+          : date.getMonth() + 1) + "-";
+      let D = this.panLeft(date.getDate()) + " ";
+      let h = this.panLeft(date.getHours()) + ":";
+      let m = this.panLeft(date.getMinutes()) + ":";
       let s = this.panLeft(date.getSeconds());
-      return Y+M+D+h+m+s;
+      return Y + M + D + h + m + s;
     },
-    panLeft(num){
-      return num < 10 ? '0'+num : num;
+    panLeft(num) {
+      return num < 10 ? "0" + num : num;
     },
 
     // 从dict字段暴力取值，取不到则返回原值
     util_formatter(key, val) {
       try {
-        return this.dict[key][val]
+        return this.dict[key][val];
       } catch (error) {
         return val;
       }
@@ -135,24 +142,24 @@ export default {
           }
         });
       }, 0);
-    }
+    },
   },
   computed: {
     pageInfo() {
       let currUrl = this.$route.path;
-      let urlArray = currUrl.split('/');
+      let urlArray = currUrl.split("/");
       let type = urlArray.pop();
-      urlArray.push('save');
-      let saveUrl = urlArray.join('/');
+      urlArray.push("save");
+      let saveUrl = urlArray.join("/");
       urlArray.pop();
-      urlArray.push('edit');
-      let editUrl = urlArray.join('/');
+      urlArray.push("edit");
+      let editUrl = urlArray.join("/");
       urlArray.pop();
-      urlArray.push('add');
-      let addUrl = urlArray.join('/');
+      urlArray.push("add");
+      let addUrl = urlArray.join("/");
       urlArray.pop();
-      urlArray.push('view');
-      let viewUrl = urlArray.join('/');
+      urlArray.push("view");
+      let viewUrl = urlArray.join("/");
       return {
         type,
         currUrl,
@@ -176,9 +183,6 @@ export default {
       toString: [], // 需要把number转化为string的表单字段name数组
       toArrays: [], // 需要把number转化为arrays的表单字段name数组
       toDate: [], // 需要把number转化为date的表单字段name数组
-    }
-  }
-}
-
-
-
+    };
+  },
+};

attendance-performance-manager-ui/admin/src/assets/mixins/formdialog.js

@@ -8,15 +8,13 @@ export default {
   methods: {
     // 渲染前置处理
     beforeRender(data) {
-      return data
+      return data;
     },
     // 渲染后置处理
-    afterRender(data) {
-
-    },
+    afterRender(data) {},
     // 提交表单的前置处理
     beforeSubmit(data) {
-      return data
+      return data;
     },
     // 提交表单的后置处理, 会阻断默认的回退行为
     afterSubmit(data) {
@@ -48,87 +46,101 @@ export default {
           this.dict = Object.assign({}, this.dict, res.dict);
           this.afterRender(res);
         })
-        .catch(error => {
-          this.$message.error(error.message)
-          throw error
+        .catch((error) => {
+          this.$message.error(error.message);
+          throw error;
         })
-        .then(data => {
+        .then((data) => {
           clearTimeout(this.loadingTimer);
           this.loadingTimer = setTimeout(() => {
             this.loading = false;
           }, 300);
-        })
+        });
     },
     // 提交表单
     submitForm(ref) {
+      let url = this.urls.saveUrl || this.pageInfo.saveUrl;
+      if (url == "/staff/perform/stat/save") {
+        url = "/perform/perpose/save";
+      } else if (url == "/perform/rules/attend/save") {
+        url = "/perform/rules/category/save";
+      }
       const el = this.$refs.form;
       el.validate((valid) => {
         if (!valid) return;
         this.loading = true;
-        this.$post(this.urls.saveUrl || this.pageInfo.saveUrl, this.beforeSubmit(this.form))
-          .then(res => {
+        this.$post(url, this.beforeSubmit(this.form))
+          .then((res) => {
             this.$message.success(res.msg);
             this.afterSubmit(res);
           })
-          .catch(error => {
+          .catch((error) => {
             this.$message.error(error.message);
           })
-          .then(data => {
+          .then((data) => {
             clearTimeout(this.loadingTimer);
             this.loadingTimer = setTimeout(() => {
               this.loading = false;
             }, 200);
-          })
+          });
       });
     },
     // 复制一个数组或对象
     util_copy(data) {
-      return JSON.parse(JSON.stringify(data))
+      return JSON.parse(JSON.stringify(data));
     },
     // 工具方法，把数字转化为字符串
     util_toString(data, array) {
       //原始数据
       const dataCopy = Object.assign({}, data);
-      array.forEach(item => {
+      array.forEach((item) => {
         //如果相等做操作
-        dataCopy[item] = dataCopy[item] === undefined ? '' : dataCopy[item] + '';
-      })
+        dataCopy[item] =
+          dataCopy[item] === undefined ? "" : dataCopy[item] + "";
+      });
       return dataCopy;
     },
     // 工具方法，把字符串转化为数组
     util_toArrays(data, array) {
       const dataCopy = Object.assign({}, data);
-      array.forEach(item => {
-        dataCopy[item] = dataCopy[item] === undefined ? [] : dataCopy[item].split(",");
-      })
+      array.forEach((item) => {
+        dataCopy[item] =
+          dataCopy[item] === undefined ? [] : dataCopy[item].split(",");
+      });
       return dataCopy;
     },
     // 工具方法，把字符串转化为格式化日期
     util_toDateStr(data, array) {
       const dataCopy = Object.assign({}, data);
-      array.forEach(item => {
-        dataCopy[item] = dataCopy[item] === undefined ? '' : this.util_formatterDate(dataCopy[item]);
-      })
+      array.forEach((item) => {
+        dataCopy[item] =
+          dataCopy[item] === undefined
+            ? ""
+            : this.util_formatterDate(dataCopy[item]);
+      });
       return dataCopy;
     },
     util_formatterDate(time) {
       let date = new Date(Number(time));
-      let Y = date.getFullYear() + '-';
-      let M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
-      let D = this.panLeft(date.getDate()) + ' ';
-      let h = this.panLeft(date.getHours()) + ':';
-      let m = this.panLeft(date.getMinutes()) + ':';
+      let Y = date.getFullYear() + "-";
+      let M =
+        (date.getMonth() + 1 < 10
+          ? "0" + (date.getMonth() + 1)
+          : date.getMonth() + 1) + "-";
+      let D = this.panLeft(date.getDate()) + " ";
+      let h = this.panLeft(date.getHours()) + ":";
+      let m = this.panLeft(date.getMinutes()) + ":";
       let s = this.panLeft(date.getSeconds());
       return Y + M + D + h + m + s;
     },
     panLeft(num) {
-      return num < 10 ? '0' + num : num;
+      return num < 10 ? "0" + num : num;
     },
 
     // 从dict字段暴力取值，取不到则返回原值
     util_formatter(key, val) {
       try {
-        return this.dict[key][val]
+        return this.dict[key][val];
       } catch (error) {
         return val;
       }
@@ -141,24 +153,24 @@ export default {
           }
         });
       }, 0);
-    }
+    },
   },
   computed: {
     pageInfo() {
       let currUrl = this.$route.path;
-      let urlArray = currUrl.split('/');
+      let urlArray = currUrl.split("/");
       let type = urlArray.pop();
-      urlArray.push('save');
-      let saveUrl = urlArray.join('/');
+      urlArray.push("save");
+      let saveUrl = urlArray.join("/");
       urlArray.pop();
-      urlArray.push('edit');
-      let editUrl = urlArray.join('/');
+      urlArray.push("edit");
+      let editUrl = urlArray.join("/");
       urlArray.pop();
-      urlArray.push('add');
-      let addUrl = urlArray.join('/');
+      urlArray.push("add");
+      let addUrl = urlArray.join("/");
       urlArray.pop();
-      urlArray.push('view');
-      let viewUrl = urlArray.join('/');
+      urlArray.push("view");
+      let viewUrl = urlArray.join("/");
       return {
         type,
         currUrl,
@@ -182,9 +194,6 @@ export default {
       toString: [], // 需要把number转化为string的表单字段name数组
       toArrays: [], // 需要把number转化为arrays的表单字段name数组
       toDate: [], // 需要把number转化为date的表单字段name数组
-    }
-  }
-}
-
-
-
+    };
+  },
+};

attendance-performance-manager-ui/admin/src/assets/mixins/table.js

-import axios from 'axios';
+import axios from "axios";
 import {
-  formatter, formatterAmount, formatterDate, formatterDateOnly, find,
-} from '@/assets/utils/table';
+  formatter,
+  formatterAmount,
+  formatterDate,
+  formatterDateOnly,
+  find,
+} from "@/assets/utils/table";
 
 const tagsMap = {
-  1: 'danger',
-  0: 'success'
+  1: "danger",
+  0: "success",
 };
-const baseUrl= process.env.VUE_APP_API_BASE_URL+'/'
+const baseUrl = process.env.VUE_APP_API_BASE_URL + "/";
 export default {
   mounted() {
     this.getData();
   },
   watch: {
-    '$route'(route) {
+    $route(route) {
       this.query = Object.assign({}, this.query, route.query);
       this.getData();
-    }
+    },
   },
   beforeDestroy() {
-    this.source.cancel('自动取消ajax操作')
-    clearTimeout(this.loadingTimer)
+    this.source.cancel("自动取消ajax操作");
+    clearTimeout(this.loadingTimer);
   },
   methods: {
     beforeUpload(file) {
       if (file.size / 1024 / 1024 > 200) {
         this.$message({
-          message: '上传文件大小不能超过 200MB!',
-          type: 'error'
-        })
-        return false
+          message: "上传文件大小不能超过 200MB!",
+          type: "error",
+        });
+        return false;
       }
       // 获取文件类型
-      var test = file.name.substring(file.name.lastIndexOf('.') + 1)
-      if (test !== 'xlsx' && test !== 'xls') {
+      var test = file.name.substring(file.name.lastIndexOf(".") + 1);
+      if (test !== "xlsx" && test !== "xls") {
         this.$message({
-          message: '上传文件只能是 zip、rar格式!',
-          type: 'warning'
-        })
-        return false
+          message: "上传文件只能是 zip、rar格式!",
+          type: "warning",
+        });
+        return false;
       }
     },
     // 开启、关闭
@@ -53,11 +57,13 @@ export default {
       return Promise.resolve();
     },
     // 表格接收数据前
-    beforeRender(data) { return data },
+    beforeRender(data) {
+      return data;
+    },
     // 表格接收数据后
-    afterRender(data) { },
+    afterRender(data) {},
     // 删除动作发生后
-    afterDel(data) { },
+    afterDel(data) {},
     // 默认拉取数据
     async getData() {
       try {
@@ -67,52 +73,60 @@ export default {
       }
       this.tableData.loading = true;
       this.$post(this.pageInfo.list, this.query, {
-        cancelToken: this.source.token
+        cancelToken: this.source.token,
       })
         .then(({ data }) => {
           this.tableData = this.beforeRender(
             Object.assign({}, this.tableData, data)
-          )
+          );
           this.afterRender(this.tableData);
         })
-        .catch(error => {
-          if (error.message == '自动取消ajax操作') return
+        .catch((error) => {
+          if (error.message == "自动取消ajax操作") return;
           this.$message.error(error.message);
         })
-        .then(data => {
+        .then((data) => {
           clearTimeout(this.loadingTimer);
           this.loadingTimer = setTimeout(() => {
             this.tableData.loading = false;
           }, 300);
-        })
+        });
     },
     // 复制一个数组或对象
     util_copy(data) {
-      if (typeof data !== 'object') return data;
-      return JSON.parse(JSON.stringify(data))
+      if (typeof data !== "object") return data;
+      return JSON.parse(JSON.stringify(data));
     },
     _showAll(item) {
       let data = this.util_copy(item);
       data.isShowAll = true;
-      this.util_update(item.id, data)
+      this.util_update(item.id, data);
     },
     // 超长文本展开收起
     util_short(key, size) {
-      return row => {
-        let string = row[key] || '';
+      return (row) => {
+        let string = row[key] || "";
         if (string.length < size || row.isShowAll) return string;
         return (
           <span>
-            {string.substr(0, 50) + '...'}
-            <el-button size='mini' type='text' onClick={() => { this._showAll(row) }}>更多</el-button>
+            {string.substr(0, 50) + "..."}
+            <el-button
+              size="mini"
+              type="text"
+              onClick={() => {
+                this._showAll(row);
+              }}
+            >
+              更多
+            </el-button>
           </span>
-        )
-      }
+        );
+      };
     },
     // 从dict字段暴力取值，取不到则返回原值
     util_formatter(key, val) {
       try {
-        return this.tableData.dict[key][val]
+        return this.tableData.dict[key][val];
       } catch (error) {
         return val;
       }
@@ -120,20 +134,24 @@ export default {
     // 通过id修改某条记录
     util_update(id, newData, idColumnName) {
       let table = this.tableData.data;
-      let { index, data } = find(table, !idColumnName ? 'id' : idColumnName, id);
+      let { index, data } = find(
+        table,
+        !idColumnName ? "id" : idColumnName,
+        id
+      );
       table.splice(index, 1, Object.assign({}, data, newData));
     },
     // 工具方法，把数字转化为字符串
     util_toString(data, array) {
       const dataCopy = Object.assign({}, data);
       for (var item in data) {
-        dataCopy[item] = dataCopy[item] === undefined ? '' : dataCopy[item] + '';
-
+        dataCopy[item] =
+          dataCopy[item] === undefined ? "" : dataCopy[item] + "";
       }
       return dataCopy;
     },
     util_formatterDate(time, fmt) {
-      if (!time) return '';
+      if (!time) return "";
       let date = new Date(Number(time));
       var o = {
         "M+": date.getMonth() + 1, //月份
@@ -142,11 +160,21 @@ export default {
         "m+": date.getMinutes(), //分
         "s+": date.getSeconds(), //秒
         "q+": Math.floor((date.getMonth() + 3) / 3), //季度
-        "S": date.getMilliseconds() //毫秒
+        S: date.getMilliseconds(), //毫秒
       };
-      if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (date.getFullYear() + "").substr(4 - RegExp.$1.length));
+      if (/(y+)/.test(fmt))
+        fmt = fmt.replace(
+          RegExp.$1,
+          (date.getFullYear() + "").substr(4 - RegExp.$1.length)
+        );
       for (var k in o)
-        if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
+        if (new RegExp("(" + k + ")").test(fmt))
+          fmt = fmt.replace(
+            RegExp.$1,
+            RegExp.$1.length == 1
+              ? o[k]
+              : ("00" + o[k]).substr(("" + o[k]).length)
+          );
       return fmt;
     },
     util_getPrevMonthDate() {
@@ -154,213 +182,281 @@ export default {
       var year = date.getFullYear();
       var month = date.getMonth();
       var day = date.getDate();
-      if (month == 0) {//年份为0代表,是本年的第一月,所以不能减
-        month = 11;//月份为上年的最后月份
-        year--;//年份减1
+      if (month == 0) {
+        //年份为0代表,是本年的第一月,所以不能减
+        month = 11; //月份为上年的最后月份
+        year--; //年份减1
         return new Date(year, month, day);
       }
-      month--;//否则,只减去月份
+      month--; //否则,只减去月份
       return new Date(year, month, day);
     },
     // 格式化单元格数据
     formatter(row, column, val) {
       const content = formatter(this.tableData, column, val);
-      return content ? <el-tag type={'info'} size='mini'>{content}</el-tag> : val
+      return content ? (
+        <el-tag type={"info"} size="mini">
+          {content}
+        </el-tag>
+      ) : (
+        val
+      );
     },
 
     formatterYES(row, column, val) {
       const content = formatter(this.tableData, column, val);
       if (content) {
-        if (val == '0') {
-          return <el-tag type={'danger'} size='mini'>{content}</el-tag>
-        } else if (val == '1') {
-          return <el-tag type={'success'} size='mini'>{content}</el-tag>
+        if (val == "0") {
+          return (
+            <el-tag type={"danger"} size="mini">
+              {content}
+            </el-tag>
+          );
+        } else if (val == "1") {
+          return (
+            <el-tag type={"success"} size="mini">
+              {content}
+            </el-tag>
+          );
         }
       } else {
-        return val
+        return val;
       }
     },
 
     formatterStatus(row, column, val) {
       const content = formatter(this.tableData, column, val);
       if (content) {
-        if (val == '0') {
-          return <el-tag size='mini'>{content}</el-tag>
-        } else if (val == '1') {
-          return <el-tag type={'danger'} size='mini'>{content}</el-tag>
-        } else if (val == '2') {
-          return <el-tag type={'success'} size='mini'>{content}</el-tag>
+        if (val == "0") {
+          return <el-tag size="mini">{content}</el-tag>;
+        } else if (val == "1") {
+          return (
+            <el-tag type={"danger"} size="mini">
+              {content}
+            </el-tag>
+          );
+        } else if (val == "2") {
+          return (
+            <el-tag type={"success"} size="mini">
+              {content}
+            </el-tag>
+          );
         }
       } else {
-        return val
+        return val;
       }
     },
 
     formatterDictLink(row, column, val) {
       const content = formatter(this.tableData, column, val);
       let underline = false;
-      let type = "primary"
+      let type = "primary";
       if (val === 3) {
-        type = 'danger'
-      }
-      return content ? <el-link type={type} underline={underline} onClick={() => { this.toDrawerMsg(row) }} size='mini'>{content}</el-link> : val
+        type = "danger";
+      }
+      return content ? (
+        <el-link
+          type={type}
+          underline={underline}
+          onClick={() => {
+            this.toDrawerMsg(row);
+          }}
+          size="mini"
+        >
+          {content}
+        </el-link>
+      ) : (
+        val
+      );
     },
     formatters(row, column, val) {
       if (val) {
-        return (
-          val.split(',').map(v => { return formatter(this.tableData, column, v) }).join(",")
-        )
+        return val
+          .split(",")
+          .map((v) => {
+            return formatter(this.tableData, column, v);
+          })
+          .join(",");
       }
-      return '--'
+      return "--";
     },
     formatterLink(row, column, val) {
       //const content = formatter(this.tableData, column-2, val);
 
-      return <el-link type="primary" href={val} target="_blank">{row.fileName}</el-link>
+      return (
+        <el-link type="primary" href={val} target="_blank">
+          {row.fileName}
+        </el-link>
+      );
       //return content;
       // return content ? <el-tag type={'info'} size='mini'>{content}</el-tag> : val
     },
     formatterString(row, column, val) {
-      return formatter(this.tableData, column, val)
+      return formatter(this.tableData, column, val);
     },
     // 格式化单元格数据 0显示 0.00
     formatterAmount(row, column) {
-      return formatterAmount(row, column)
+      return formatterAmount(row, column);
     },
     // 格式化单元格数据钱单位里换算成元
     formatterMoney(row, column, val) {
-      return ((val || 0) / 1000).toFixed(2)
+      return ((val || 0) / 1000).toFixed(2);
     },
     // 查看天数
     formatterDay(row, column, val) {
-      return <el-tag onClick={() => {
-        this.handleCountDays(row,column,val)
-      }}>{val}</el-tag>
+      return (
+        <el-tag
+          onClick={() => {
+            this.handleCountDays(row, column, val);
+          }}
+        >
+          {val}
+        </el-tag>
+      );
     },
     // 格式化单元格数据
     formatterDate(row, column) {
       //console.log("date:",row,column)
-      return formatterDate(row, column)
+      return formatterDate(row, column);
     },
     // 格式化单元格数据 只要年月日
     formatterDateOnly(row, column) {
-      return formatterDateOnly(row, column)
+      return formatterDateOnly(row, column);
     },
     // 格式化人员
     formaterPeople(row, column, val) {
-      let info
+      let info;
       if (val) {
-        if (typeof (val) === 'number') {
-          info = <el-tag type={'info'} size='mini'>{this.util_formatter('assigneeList', val)}</el-tag>
-        } else {
+        if (typeof val === "number") {
           info = (
-            val.split(',').map(v => {
+            <el-tag type={"info"} size="mini">
+              {this.util_formatter("assigneeList", val)}
+            </el-tag>
+          );
+        } else {
+          info = val.split(",").map((v) => {
             if (this.tableData.dict["assigneeList"][v] != undefined) {
-                return <el-tag type={'info'} size='mini'>{this.util_formatter('assigneeList', v)}</el-tag>
+              return (
+                <el-tag type={"info"} size="mini">
+                  {this.util_formatter("assigneeList", v)}
+                </el-tag>
+              );
             }
-            })
-          )
+          });
         }
       } else {
-        info = '--'
+        info = "--";
       }
-      return info
+      return info;
     },
     // 格式化员工类型
-    formatterType(row, column, val){
+    formatterType(row, column, val) {
       const content = formatter(this.tableData, column, val);
       if (content) {
-          if (val == '1') {
-            return <el-tag size='mini'>全职</el-tag>
-          } else if (val == '2') {
-            return <el-tag size='mini'>兼职</el-tag>
-          } else if (val == '3') {
-            return <el-tag size='mini'>实习</el-tag>
+        if (val == "1") {
+          return <el-tag size="mini">全职</el-tag>;
+        } else if (val == "2") {
+          return <el-tag size="mini">兼职</el-tag>;
+        } else if (val == "3") {
+          return <el-tag size="mini">实习</el-tag>;
         }
       } else {
-          return val
+        return val;
       }
     },
     // geshu
     // 格式化是否在政务中心
-    formatterSource(row, column, val){
+    formatterSource(row, column, val) {
       const content = formatter(this.tableData, column, val);
       if (content) {
-          if (val == '1') {
-            return <el-tag size='mini'>是</el-tag>
-          } else if (val == '2') {
-            return <el-tag size='mini'>否</el-tag>
+        if (val == "1") {
+          return <el-tag size="mini">是</el-tag>;
+        } else if (val == "2") {
+          return <el-tag size="mini">否</el-tag>;
         }
       } else {
-          return val
+        return val;
       }
     },
 
     // 格式化处理异常状态
-    formattereErrorStatus(row,column,val){
-      const content = formatter(this.tableData, column, val)
+    formattereErrorStatus(row, column, val) {
+      const content = formatter(this.tableData, column, val);
       if (content) {
-
-        return <el-tag size="mini" type="danger">{this.util_formatter('errorStatus', val)}</el-tag>
+        return (
+          <el-tag size="mini" type="danger">
+            {this.util_formatter("errorStatus", val)}
+          </el-tag>
+        );
       } else {
-        return val
+        return val;
       }
     },
     // 格式化处理状态
-    formattereDealStatus(row,column,val){
-      const content = formatter(this.tableData, column, val)
+    formattereDealStatus(row, column, val) {
+      const content = formatter(this.tableData, column, val);
       if (content) {
-        return <el-tag size="mini">{this.util_formatter('processStatus', val)}</el-tag>
+        return (
+          <el-tag size="mini">
+            {this.util_formatter("processStatus", val)}
+          </el-tag>
+        );
       } else {
-        return val
+        return val;
       }
     },
 
     // 考勤组人数
-    formatterGroupPerson(row,column,val){
-      const content = formatter(this.tableData, column, val)
+    formatterGroupPerson(row, column, val) {
+      const content = formatter(this.tableData, column, val);
       if (content) {
-        return Number(row.personNum) + Number(row.personNumNo)
+        return Number(row.personNum) + Number(row.personNumNo);
       } else {
-        return val
+        return val;
       }
     },
     // 考勤类型
-    formatterattendType(row,column,val){
-      const content = formatter(this.tableData, column, val)
+    formatterattendType(row, column, val) {
+      const content = formatter(this.tableData, column, val);
       if (content) {
-        return <el-tag size="mini">{this.util_formatter('type', val)}</el-tag>
+        return <el-tag size="mini">{this.util_formatter("type", val)}</el-tag>;
       } else {
-        return val
+        return val;
       }
     },
     // 请假类型
-    formatterLeaveType(row,column,val){
-      const content = formatter(this.tableData, column, val)
+    formatterLeaveType(row, column, val) {
+      const content = formatter(this.tableData, column, val);
       if (content) {
-        return <el-tag size="mini">{this.util_formatter('leaveType', val)}</el-tag>
+        return (
+          <el-tag size="mini">{this.util_formatter("leaveType", val)}</el-tag>
+        );
       } else {
-        return val
+        return val;
       }
     },
     // 格式化图片展示
-    formatterPic(row, column, val){
-      const content = formatter(this.tableData, column, val)
+    formatterPic(row, column, val) {
+      const content = formatter(this.tableData, column, val);
       if (content) {
-        return <el-image
-        src={val.indexOf('http') == -1?baseUrl+val:val}
-        preview-src-list={val.indexOf('http') == -1?baseUrl+val:val}
-        style="width: 100px"></el-image>
+        return (
+          <el-image
+            src={val.indexOf("http") == -1 ? baseUrl + val : val}
+            preview-src-list={val.indexOf("http") == -1 ? baseUrl + val : val}
+            style="width: 100px"
+          ></el-image>
+        );
       } else {
-        return val
+        return val;
       }
     },
     // 考勤组格式
-    formatterBanci(row,column,val){
-      const content = formatter(this.tableData, column, val)
+    formatterBanci(row, column, val) {
+      const content = formatter(this.tableData, column, val);
       if (content) {
         // let string = row.attendanceTime.replace("、","<br>")
-        return <div>
+        return (
+          <div>
             <div>
               <el-tag type="info">{row.restTime}</el-tag>
             </div>
@@ -368,35 +464,29 @@ export default {
               <p>{row.attendanceTime}</p>
             </div>
           </div>
+        );
       } else {
-        return val
+        return val;
       }
     },
     // 多选表格行
     handleSelectionChange(val) {
-      this.selection = val.map(i => i.id);
+      this.selection = val.map((i) => i.id);
     },
     // 当某一行被点击时会触发该事件
-    handleRowClick(row, column, event) {
-
-    },
+    handleRowClick(row, column, event) {},
     // 合并表格行列
-    handleSpanMethod() {
-
-    },
+    handleSpanMethod() {},
     // 自定义表格排序
-    handleSortChange() {
-
-    },
+    handleSortChange() {},
     // 自定义索引号
     handleIndexMethod(index) {
       //prePageResult 每页条数
       // console.log("index:"+index)
       let size = this.tableData.pageInfo.prePageResult;
       let page = this.tableData.pageInfo.currPage;
-      let count = parseInt(size) * (parseInt(page) - 1)
+      let count = parseInt(size) * (parseInt(page) - 1);
       return count + index + 1;
-
     },
 
     // 自定义表格选择行是否能勾选
@@ -405,100 +495,98 @@ export default {
     },
 
     // 设置单元行样式
-    tableRowClassName() { },
+    tableRowClassName() {},
     // 批量删除
     toBatchDel() {
-      this.toDel(this.selection.join(','), true);
+      this.toDel(this.selection.join(","), true);
     },
     // 单个删除
     toDel(id, isBatch) {
       if (!id) {
-        return this.$message.warning('请选中一条记录');
+        return this.$message.warning("请选中一条记录");
       }
 
       this.$get(this.pageInfo.del, { id: id })
-        .then(res => {
-          this.$message.success(res.msg)
+        .then((res) => {
+          this.$message.success(res.msg);
           // 更新数据
           if (isBatch) {
             // 批量删除，刷新页面
             this.getData();
           } else {
             let table = this.tableData.data;
-            let { index } = find(table, 'id', id);
+            let { index } = find(table, "id", id);
             table.splice(index, 1);
             this.tableData.pageInfo.totalResult -= 1;
           }
           this.afterDel(id);
         })
-        .catch(error => {
+        .catch((error) => {
           this.$message.error(error.message);
-        })
+        });
     },
     // 新增
     toAdd() {
       this.$router.push({
         path: this.pageInfo.add,
         query: this.tableConfig.addQuery,
-      })
+      });
     },
     // 编辑
     toEdit(row, query) {
       this.$router.push({
         path: this.pageInfo.edit,
-        query: Object.assign({}, { id: row.id }, query)
-      })
+        query: Object.assign({}, { id: row.id }, query),
+      });
     },
     // 查看
     toView(row, query) {
-      console.log(this.pageInfo.view)
+      console.log(this.pageInfo.view);
       this.$router.push({
         path: this.pageInfo.view,
-        query: Object.assign({}, { id: row.id }, query)
-      })
+        query: Object.assign({}, { id: row.id }, query),
+      });
     },
     // 导入
     toImport() {
       this.$router.push({
         path: this.pageInfo.importView,
         query: this.tableConfig.addQuery,
-      })
+      });
     },
     // 导出
-    toexport(){
+    toexport() {
       this.$router.push({
         path: this.pageInfo.importView,
         query: this.tableConfig.addQuery,
-      })
+      });
     },
     // 返回
     toBack() {
       this.$router.push({
-        path: this.pageInfo.back
-      })
+        path: this.pageInfo.back,
+      });
     },
     // 开启、关闭
-    open() {
-
-    },
-
+    open() {},
   },
   computed: {
     tableConfig() {
-      return Object.assign({}, this.defaultConfig, this.config)
+      return Object.assign({}, this.defaultConfig, this.config);
     },
     pageInfo() {
-      const urls = { // 操作所需的url地址，和url同路径
+      const urls = {
+        // 操作所需的url地址，和url同路径
         list: this.$route.path,
-        edit: this.$route.path.replace('/list', '/edit'),
-        save: this.$route.path.replace('/list', '/save'),
-        del: this.$route.path.replace('/list', '/delete'),
-        add: this.$route.path.replace('/list', '/add'),
-        view: this.$route.path.replace('/list', '/view'),
-        importView: this.$route.path.replace('/list', '/importView'),
-        exclude: this.$route.path.replace('/list', '/list/exclude'),
-      }
-      return Object.assign({}, urls, this.urls)
+        edit: this.$route.path.replace("/list", "/edit"),
+        save: this.$route.path.replace("/list", "/save"),
+        del: this.$route.path.replace("/list", "/delete"),
+        add: this.$route.path.replace("/list", "/add"),
+        view: this.$route.path.replace("/list", "/view"),
+        importView: this.$route.path.replace("/list", "/importView"),
+        exclude: this.$route.path.replace("/list", "/list/exclude"),
+      };
+      return Object.assign({}, urls, this.urls);
     },
   },
   data() {
@@ -528,17 +616,15 @@ export default {
           back: this.toBack,
           importView: this.toImport,
           refresh: this.getData,
-        }
         },
-      tableData: { // 表格数据
+      },
+      tableData: {
+        // 表格数据
         loading: true, // ajax请求状态
         dict: {},
         result: [],
         pageInfo: {},
-      }
-    }
-  }
-}
-
-
-
+      },
+    };
+  },
+};

attendance-performance-manager-ui/admin/src/components/DataTreeTable.vue

@@ -8,6 +8,7 @@
       :row-class-name="tableRowClassName"
       :default-expand-all="expand"
       :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
+      height="620"
     >
 
  <el-table-column

attendance-performance-manager-ui/admin/src/components/Table.vue

@@ -2,7 +2,12 @@
 
 <template>
   <div class="layout-table" :loading="data.loading">
-    <TabPane :thirdList="thirdList" :activeName="activeName" @handleClick="handleClick" v-if="config.isshowTabPane"></TabPane>
+    <TabPane
+      :thirdList="thirdList"
+      :activeName="activeName"
+      @handleClick="handleClick"
+      v-if="config.isshowTabPane"
+    ></TabPane>
     <div class="table-head flex flex-pack-justify">
       <div class="table-head-left flex flex-align-center">
         <!-- <slot name="breadcrumb">
@@ -29,7 +34,8 @@
                 @click="config.methods.importView"
                 class="el-icon-upload2"
                 title="导入"
-            >导入</el-button>
+                >导入</el-button
+              >
 
               <!-- <el-button
               v-if="isShowButton('notDel')"
@@ -41,8 +47,19 @@
               title="批量删除"
               >删除</el-button
             > -->
-             <Confirm v-if='isShowButton("notDel")' @confirm='config.methods.del' message='确定要删除选中的多条记录吗？'>
-            <el-button icon="el-icon-delete" type="danger" size='mini' plain  title="批量删除">批量删除</el-button>
+              <Confirm
+                v-if="isShowButton('notDel')"
+                @confirm="config.methods.del"
+                message="确定要删除选中的多条记录吗？"
+              >
+                <el-button
+                  icon="el-icon-delete"
+                  type="danger"
+                  size="mini"
+                  plain
+                  title="批量删除"
+                  >批量删除</el-button
+                >
               </Confirm>
               <el-button
                 @click="item.method"
@@ -126,7 +143,6 @@
               :downloadUrl="config.downloadUrl"
               :areaSelect="config.areaSelect"
             />
-
           </div>
         </div>
       </div>
@@ -220,7 +236,7 @@ import DataTable from "@/components/DataTable.vue";
 import DataTableMobile from "./DataTableMobile.js";
 import DataTableFlow from "./DataTableFlow.vue";
 import DataTreeTable from "@/components/DataTreeTable.vue";
-import TabPane from "@/components/tabPane.vue"
+import TabPane from "@/components/tabPane.vue";
 export default {
   props: {
     data: {
@@ -242,7 +258,9 @@ export default {
     DataTableMobile,
     DataTableFlow,
     DataTreeTable,
-    TabPane
+    TabPane,
+  },
+  mounted() {
   },
   methods: {
     // 根据url的query参数判断是否展示查询条件
@@ -268,12 +286,12 @@ export default {
     isShowBtn(name) {
       return this.canShow.indexOf(name) !== -1;
     },
-    handleClick(key){
-        this.$store.commit('setThirdPath',key)
+    handleClick(key) {
+      this.$store.commit("setThirdPath", key);
       this.$router.push({
-            path:key
-        })
-    }
+        path: key,
+      });
+    },
   },
   watch: {
     $route(route) {
@@ -288,21 +306,21 @@ export default {
       this.showType = this.config.showType ? this.config.showType : "table";
       return Object.keys(this.$attrs) || [];
     },
-    thirdList(){
-        if(!this.$store.state.CurrentThirdArr) return []
-        return this.$store.state.CurrentThirdArr
+    thirdList() {
+      if (!this.$store.state.CurrentThirdArr) return [];
+      return this.$store.state.CurrentThirdArr;
+    },
+    activeName() {
+      return this.$store.state.ThirdPath;
     },
-    activeName(){
-        return this.$store.state.ThirdPath
-    }
   },
   data() {
     return {
       loading: this.config.loading,
       showSearch: this.isShowSearch(this.$route.query),
       showType: "table",
-    }
-  }
+    };
+  },
 };
 </script>
 

attendance-performance-manager-ui/admin/src/main.js

-import Vue from 'vue'
-import ElementUI from 'element-ui'
-import 'element-ui/lib/theme-chalk/index.css'
-import './assets/less/base.less'
-import App from './App.vue'
-import router from './router'
-import store from './store'
-import Prototype from './assets/utils/prototype'
-import Filter from './assets/utils/filter.js'
-import GlobalComponents from './assets/utils/globalComponents.js'
-import Global from './assets/utils/global.js'
-import VueClipboard from 'vue-clipboard2'
-import VueAMap from 'vue-amap';
-import * as echarts from 'echarts'
+import Vue from "vue";
+import ElementUI from "element-ui";
+import "element-ui/lib/theme-chalk/index.css";
+import "./assets/less/base.less";
+import App from "./App.vue";
+import router from "./router";
+import store from "./store";
+import Prototype from "./assets/utils/prototype";
+import Filter from "./assets/utils/filter.js";
+import GlobalComponents from "./assets/utils/globalComponents.js";
+import Global from "./assets/utils/global.js";
+import VueClipboard from "vue-clipboard2";
+import VueAMap from "vue-amap";
+import * as echarts from "echarts";
 // 将自动注册所有组件为全局组件
-import dataV from '@jiaminghi/data-view'
+import dataV from "@jiaminghi/data-view";
 
-Vue.use(dataV)
+Vue.use(dataV);
 
 Vue.prototype.$echarts = echarts;
-Vue.config.productionTip = false
+Vue.config.productionTip = false;
 Vue.use(ElementUI);
 Vue.use(Prototype);
 Vue.use(Filter);
 Vue.use(GlobalComponents); // 全局组件
-Vue.use(VueClipboard)
-Vue.use(VueAMap)
+Vue.use(VueClipboard);
+Vue.use(VueAMap);
 VueAMap.initAMapApiLoader({
-  key: 'f45cca59553214543a5a77e50a7e04df',
-  plugin: ['AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PlaceSearch', 'AMap.Geolocation', 'AMap.Geocoder'],
-  v: '1.4.4',
-  uiVersion: '1.0',
-})
+  key: "f45cca59553214543a5a77e50a7e04df",
+  plugin: [
+    "AMap.Scale",
+    "AMap.OverView",
+    "AMap.ToolBar",
+    "AMap.MapType",
+    "AMap.PlaceSearch",
+    "AMap.Geolocation",
+    "AMap.Geocoder",
+  ],
+  v: "1.4.4",
+  uiVersion: "1.0",
+});
 Vue.prototype.Global = Global;
 new Vue({
   router,
   store,
-  render: h => h(App)
-}).$mount('#app')
+  render: (h) => h(App),
+}).$mount("#app");

attendance-performance-manager-ui/admin/src/router.js

@@ -125,6 +125,7 @@ const router = new Router({
         ...restBuilder("perform/attend/appeal/files", "perform/attend/appeal/files"), //绩效记录申诉信息附件列表
 
         ...restBuilder("feedback", "feedback"), //反馈信息
+        ...restBuilder("feedback/addQuestion", "feedback/addQuestion"), //新增反馈
         
         ...restBuilder("feedback/question", "feedback/question"), //反馈问题
         ...restBuilder("feedback/option", "feedback/option"), //反馈选项

attendance-performance-manager-ui/admin/src/views/feedback/addQuestion/list.vue

+<template>
+    <div class="page">
+        <div class="top">
+            <el-tabs v-model="tabs">
+                <el-tab-pane label="设计问卷" name="1">
+                    <iframe style="width: 100%;height: 80vh;" src="https://wurong19870715.gitee.io/formdesigner/#/" frameborder="0"></iframe>
+                </el-tab-pane>
+            </el-tabs>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            tabs: '1'
+        }
+    }
+}
+</script>
+
+<style lang="less" scoped>
+.top {}
+</style>
\ No newline at end of file

attendance-performance-manager-ui/admin/src/views/feedback/list.vue

 <template>
     <div class="page">
-        <LayoutTable :data="tableData" :config="tableConfig">
+        <LayoutTable :data="tableData" notDel notSearch :config="tableConfig">
         </LayoutTable>
 
 
@@ -9,14 +9,14 @@
 </template>
 
 <script>
-    /** 表单弹出框模式需引入 */
-    import drawerShow from "./drawershow";
-    import table from "@/assets/mixins/table";
-    export default {
+/** 表单弹出框模式需引入 */
+import drawerShow from "./drawershow";
+import table from "@/assets/mixins/table";
+export default {
     name: "FeedbackList",
     components: {
         drawerShow
-},
+    },
     mixins: [table],
     created() {
     },
@@ -41,7 +41,8 @@
         },
         /** 重写新增方法 */
         toAdd(row) {
-                this.$refs.drawerform.add(row);
+            // this.$refs.drawerform.add(row);
+            this.$router.push("/feedback/addQuestion/list");
         },
         /** 重写编辑方法 */
         toEdit(row) {
@@ -56,33 +57,34 @@
     data() {
         return {
             /** 子表列元素 */
-                columnSet:[
-                    {label: "反馈问卷id号", prop: "feedbackId", formatter: this.formatter},
-                    {label: "问题内容", prop: "content"},
-                    {label: "问题类型 ", prop: "questionType",formatter: this.formatter},
-                    {label: "是否必填", prop: "require",formatter: this.formatter},
-                    {label: "备注", prop: "remark"},
+            columnSet: [
+                { label: "反馈问卷id号", prop: "feedbackId", formatter: this.formatter },
+                { label: "问题内容", prop: "content" },
+                { label: "问题类型 ", prop: "questionType", formatter: this.formatter },
+                { label: "是否必填", prop: "require", formatter: this.formatter },
+                { label: "备注", prop: "remark" },
             ],
             config: {
-                   isshowTabPane:false,
+                isshowTabPane: true,
                 search: [
                 ],
                 columns: [
-                        {type: "selection", width: 60},
-                        {type: "index",label: "序号",width: 50},
+                    { type: "selection", width: 60 },
+                    { type: "index", label: "序号", width: 50 },
 
-                        {label: "问卷标题", prop: "title"},
+                    { label: "问卷标题", prop: "title" },
 
-                        {label: "反馈开始时间", prop: "feedbackTimeStart", formatter: this.formatterDate},
+                    { label: "反馈开始时间", prop: "feedbackTimeStart", formatter: this.formatterDate },
 
-                        {label: "反馈结束时间", prop: "feedbackTimeEnd", formatter: this.formatterDate},
+                    { label: "反馈结束时间", prop: "feedbackTimeEnd", formatter: this.formatterDate },
 
-                        {label: "邀请人数", prop: "inviteNum",formatter: this.formatter},
+                    { label: "邀请人数", prop: "inviteNum", formatter: this.formatter },
 
-                        {label: "反馈人数", prop: "feedbackNum",formatter: this.formatter},
+                    { label: "反馈人数", prop: "feedbackNum", formatter: this.formatter },
 
-                        {label: "创建用户", prop: "createUserId", formatter: this.formatter},
-                        {label: "绩效反馈问题",
+                    { label: "创建用户", prop: "createUserId", formatter: this.formatter },
+                    {
+                        label: "绩效反馈问题",
                         width: 120,
                         prop: "subColumns",
                         formatter: (row) => {
@@ -110,5 +112,10 @@
             }
         };
     }
-    };
+};
 </script>
+<style lang="less" scoped>
+/deep/ .buttons {
+    margin-bottom: 10px;
+}
+</style>

attendance-performance-manager-ui/admin/src/views/homeCharts/record/list.vue

@@ -7,11 +7,15 @@
         </div>
         <dv-scroll-ranking-board
           :config="config"
-          style="width:100%;height:93%"
+          style="width:100%;height:75%"
         />
       </div>
-      <div class="left_mid"></div>
-      <div class="left_down"></div>
+      <div class="left_mid">
+        <div id="leida" style="width: 100%;height: 100%;"></div>
+      </div>
+      <div class="left_down">
+        <div id="rulePie" style="width: 100%;height: 100%;"></div>
+      </div>
     </div>
     <div class="mid">
       <div class="mid_top">
@@ -125,7 +129,7 @@
         <div class="down_content">
           <img class="content_title" src="../../../assets/images/title.png" />
           <div style="margin: 20px 0;">
-            <el-radio-group v-model="radio1">
+            <el-radio-group v-model="type" border>
               <el-radio-button label="1">部门评估</el-radio-button>
               <el-radio-button label="2">个人评估</el-radio-button>
             </el-radio-group>
@@ -173,15 +177,19 @@
     <div class="right">
       <div class="right_top">
         <div class="title">
-          部门绩效总分排名TOP10
+          个人绩效总分排名TOP10
         </div>
         <dv-scroll-ranking-board
-          :config="config"
-          style="width:100%;height:93%"
+          :config="personConfig"
+          style="width:100%;height:75%"
         />
       </div>
-      <div class="right_mid"></div>
-      <div class="right_down"></div>
+      <div class="right_mid">
+        <div id="shensuPie" style="width: 100%;height: 100%;"></div>
+      </div>
+      <div class="right_down">
+        <div id="recordPie" style="width: 100%;height: 100%;"></div>
+      </div>
     </div>
   </div>
 </template>
@@ -190,7 +198,7 @@
 export default {
   data() {
     return {
-      radio1: "",
+      type: "1",
       form: {
         date1: "",
         type: [],
@@ -199,41 +207,455 @@ export default {
       config: {
         data: [
           {
-            name: "周口",
-            value: 55,
+            name: "部门1",
+            value: 95,
+          },
+          {
+            name: "部门2",
+            value: 90,
+          },
+          {
+            name: "部门3",
+            value: 98,
+          },
+          {
+            name: "部门4",
+            value: 91,
+          },
+          {
+            name: "部门5",
+            value: 80,
+          },
+          {
+            name: "部门6",
+            value: 92,
+          },
+          {
+            name: "部门7",
+            value: 93,
+          },
+          {
+            name: "部门8",
+            value: 94,
+          },
+          {
+            name: "部门9",
+            value: 90,
+          },
+          {
+            name: "部门10",
+            value: 100,
+          },
+        ],
+      },
+      personConfig: {
+        data: [
+          {
+            name: "个人1",
+            value: 95,
           },
           {
-            name: "南阳",
-            value: 120,
+            name: "个人2",
+            value: 90,
           },
           {
-            name: "西峡",
-            value: 78,
+            name: "个人3",
+            value: 98,
           },
           {
-            name: "驻马店",
-            value: 66,
+            name: "个人4",
+            value: 91,
           },
           {
-            name: "新乡",
+            name: "个人5",
             value: 80,
           },
           {
-            name: "信阳",
-            value: 45,
+            name: "个人6",
+            value: 92,
+          },
+          {
+            name: "个人7",
+            value: 93,
+          },
+          {
+            name: "个人8",
+            value: 94,
           },
           {
-            name: "漯河",
-            value: 29,
+            name: "个人9",
+            value: 90,
+          },
+          {
+            name: "个人10",
+            value: 100,
           },
         ],
       },
+      cricleData: [
+        { value: 756, name: "考勤绩效" },
+        { value: 690, name: "评价绩效" },
+        { value: 559, name: "办件绩效" },
+        { value: 1278, name: "效能绩效" },
+      ],
     };
   },
 
-  mounted() {},
+  mounted() {
+    this.drawLeiDa();
+    this.drawRulePie();
+    this.drawCorePie();
+    this.drawRecordPie();
+  },
 
-  methods: {},
+  methods: {
+    drawLeiDa() {
+      // 基于dom，初始化echarts实例
+      let myChart = this.$echarts.init(document.getElementById("leida"));
+      // 绘制图表
+      myChart.setOption({
+        title: {
+          text: "异常分值分布情况",
+          left: "left",
+          textStyle: {
+            fontSize: 18,
+          },
+        },
+        color: ["#56A3F1", "#FF917C"],
+        tooltip: {},
+        legend: {
+          data: ["加分", "扣分"],
+          right: 0,
+        },
+        radar: [
+          {
+            center: ["25%", "50%"],
+            radius: 120,
+            startAngle: 90,
+            splitNumber: 4,
+            shape: "circle",
+            axisName: {
+              formatter: "【{value}】",
+              color: "#428BD4",
+            },
+
+            axisLine: {
+              lineStyle: {
+                color: "rgba(211, 253, 250, 0.8)",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(211, 253, 250, 0.8)",
+              },
+            },
+          },
+          {
+            indicator: [
+              { text: "考勤绩效", max: 150 },
+              { text: "办件绩效", max: 150 },
+              { text: "评价绩效", max: 150 },
+              { text: "效能绩效", max: 120 },
+              { text: "其他绩效", max: 108 },
+            ],
+            center: ["45%", "60%"],
+            radius: 80,
+            axisName: {
+              color: "#fff",
+              backgroundColor: "#666",
+              borderRadius: 10,
+              padding: [0, 1],
+            },
+          },
+        ],
+        series: [
+          {
+            type: "radar",
+            radarIndex: 1,
+            data: [
+              {
+                value: [120, 118, 130, 100, 99, 70],
+                name: "加分",
+                symbol: "rect",
+                symbolSize: 12,
+                areaStyle: { color: "#56A3F1" }, //雷达覆盖区域背景颜色
+                label: {
+                  show: true,
+                  formatter: function(params) {
+                    return params.value;
+                  },
+                },
+              },
+              {
+                value: [100, 93, 50, 90, 70, 60],
+                areaStyle: { color: "#FF917C" }, //雷达覆盖区域背景颜色
+                name: "扣分",
+              },
+            ],
+          },
+        ],
+      });
+    },
+    drawRulePie() {
+      // 基于dom，初始化echarts实例
+      let myChart = this.$echarts.init(document.getElementById("rulePie"));
+      myChart.setOption({
+        title: {
+          text: "绩效规则分布情况",
+          textStyle: {
+            fontSize: 18,
+          },
+        },
+        tooltip: {
+          trigger: "item",
+        },
+        legend: {
+          bottom: "0%",
+          right: "5%",
+          orient: "vertical",
+          textStyle: {
+            // 文字的样式
+            fontSize: 24, // 可控制每个legend项的间距
+            color: "#828282",
+            rich: {
+              // 通过富文本rich给每个项设置样式，下面的oneone、twotwo、threethree可以理解为"每一列"的样式
+              oneone: {
+                // 设置文字、数学、英语这一列的样式
+                width: 50,
+                color: "#000000",
+                fontSize: 12,
+                fontWeight: "bolder",
+              },
+              twotwo: {
+                // 设置10分、20分、30分这一列的样式
+                width: 35,
+                color: "#333",
+                fontSize: 12,
+                fontWeight: 600,
+              },
+              threethree: {
+                // 设置百分比这一列的样式
+                width: 20,
+                color: "#333",
+                fontSize: 12,
+              },
+            },
+          },
+          formatter: (name) => {
+            // formatter格式化函数动态呈现数据
+            console.log(name);
+            var total = 0; // 用于计算总数
+            var target; // 遍历拿到数据
+            for (var i = 0; i < this.cricleData.length; i++) {
+              total += this.cricleData[i].value;
+              if (this.cricleData[i].name == name) {
+                target = this.cricleData[i].value;
+              }
+            }
+            var v = ((target / total) * 100).toFixed(2);
+            return `{oneone|${name}}  {twotwo|${target}分}   {threethree|${v}%}`;
+            //     富文本第一列样式应用    富文本第二列样式应用      富文本第三列样式应用
+          },
+        },
+        series: [
+          {
+            type: "pie",
+            radius: ["40%", "70%"],
+            // avoidLabelOverlap: false,
+            left: "-50%",
+            top: "10%",
+            label: {
+              position: "center",
+              fontSize: 16,
+              formatter: () => {
+                let str = "总" + "\n" + `${756 + 690 + 559 + 1278}`;
+                return str;
+              },
+            },
+            labelLine: {
+              show: false,
+            },
+            data: this.cricleData,
+          },
+        ],
+      });
+    },
+    drawCorePie() {
+      // 基于dom，初始化echarts实例
+      let myChart = this.$echarts.init(document.getElementById("shensuPie"));
+      myChart.setOption({
+        title: {
+          text: "绩效规则分布情况",
+          textStyle: {
+            fontSize: 18,
+          },
+        },
+        tooltip: {
+          trigger: "item",
+        },
+        legend: {
+          bottom: "0%",
+          right: "5%",
+          orient: "vertical",
+          textStyle: {
+            // 文字的样式
+            fontSize: 24, // 可控制每个legend项的间距
+            color: "#828282",
+            rich: {
+              // 通过富文本rich给每个项设置样式，下面的oneone、twotwo、threethree可以理解为"每一列"的样式
+              oneone: {
+                width: 50,
+                color: "#000000",
+                fontSize: 12,
+                fontWeight: "bolder",
+              },
+              twotwo: {
+                width: 35,
+                color: "#333",
+                fontSize: 12,
+                fontWeight: 600,
+              },
+              threethree: {
+                // 设置百分比这一列的样式
+                width: 20,
+                color: "#333",
+                fontSize: 12,
+              },
+            },
+          },
+          formatter: (name) => {
+            // formatter格式化函数动态呈现数据
+            var total = 0; // 用于计算总数
+            var target; // 遍历拿到数据
+            for (var i = 0; i < this.cricleData.length; i++) {
+              total += this.cricleData[i].value;
+              if (this.cricleData[i].name == name) {
+                target = this.cricleData[i].value;
+              }
+            }
+            var v = ((target / total) * 100).toFixed(2);
+            return `{oneone|${name}}`;
+            //     富文本第一列样式应用    富文本第二列样式应用      富文本第三列样式应用
+          },
+        },
+        series: [
+          {
+            type: "pie",
+            // avoidLabelOverlap: false,
+            left: "-25%",
+            top: "10%",
+            label: {
+              normal: {
+                show: true,
+                position: "outside",
+                rich: {
+                  // 通过富文本rich给每个项设置样式，下面的oneone、twotwo、threethree可以理解为"每一列"的样式
+                  async: {
+                    width: 50,
+                    color: "#000000",
+                    fontSize: 12,
+                    fontWeight: "bolder",
+                  },
+                  hr: {
+                    width: 35,
+                    color: "#333",
+                    fontSize: 12,
+                    fontWeight: 600,
+                  },
+                  per: {
+                    // 设置百分比这一列的样式
+                    width: 20,
+                    color: "#333",
+                    fontSize: 12,
+                  },
+                },
+                formatter: "{per|{d}%}",
+              },
+            },
+            labelLine: {
+              show: true,
+            },
+            data: this.cricleData,
+          },
+        ],
+      });
+    },
+
+    drawRecordPie() {
+      let xData = ["未开始", "进行中", "已完结", "全部问卷"];
+      let yData = [2, 8, 116, 126];
+      let colorList = ["#97e7ff", "#75f5ff", "#00deff", "#0093ff", "#2a5fcf"];
+      let visualMapPiecesData = [];
+      // visualMap: {
+      //   pieces: [
+      //     { value: 123, label: '123（自定义特殊颜色）', color: 'grey' }
+      //   ]
+      // }
+      for (var i = 0; i < xData.length; i++) {
+        visualMapPiecesData.push({
+          value: yData[i],
+          label: xData[i],
+          color: colorList[i],
+        });
+      }
+      // 基于dom，初始化echarts实例
+      let myChart = this.$echarts.init(document.getElementById("recordPie"));
+      myChart.setOption({
+        title: {
+          text: "绩效规则分布情况",
+          textStyle: {
+            fontSize: 18,
+          },
+        },
+        tooltip: {
+          trigger: "item",
+        },
+
+        polar: {
+          radius: [0, "90%"],
+          center: ["50%", "55%"],
+        },
+        angleAxis: {
+          show: false, // 隐藏刻度
+          max: 180,
+          startAngle: 90,
+        },
+        radiusAxis: {
+          show: true,
+          type: "category",
+          data: xData,
+        },
+
+        visualMap: {
+          top: 40,
+          x: "left",
+          orient: "vertical",
+          textStyle: {
+            color: "#000",
+          },
+          pieces: visualMapPiecesData,
+          outOfRange: {
+            color: "#999",
+          },
+        },
+        series: [
+          {
+            type: "bar",
+            data: yData,
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                // 定制显示（按顺序）
+                color: function(params) {
+                  return colorList[params.dataIndex];
+                },
+              },
+            },
+          },
+        ],
+      });
+    },
+  },
 };
 </script>
 
@@ -393,6 +815,21 @@ export default {
         height: 100%;
         text-align: center;
         padding: 40px 30px 10px 30px;
+        /deep/.el-radio-button {
+          width: 150px;
+          text-align: center;
+          border: 1px solid #eee;
+        }
+        /deep/.el-radio-button__inner {
+          width: 150px;
+        }
+        /deep/.el-radio-button__orig-radio:checked + .el-radio-button__inner {
+          width: 150px;
+          border: none;
+          background: #1890ff;
+          color: #fff;
+          border: 1px solid #eee;
+        }
         .form {
           width: 70%;
           margin: 0 auto;
@@ -411,6 +848,7 @@ export default {
     background: #fff;
     border-radius: 8px;
     padding: 10px;
+    overflow: hidden;
     .title {
       font-weight: 600;
       margin-bottom: 5px;

attendance-performance-manager-ui/admin/src/views/perform/attend/appeal/components/BarCharts.vue

+<template>
+  <div>
+    <div :id="id" :style="styleObj"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    title: {
+      type: String,
+      default: "",
+    },
+    id: {
+      type: String,
+      default: "",
+    },
+    legendName: {
+      type: String,
+      default: "",
+    },
+    styleObj: {
+      type: Object,
+      default: () => {},
+    },
+  },
+  data() {
+    return {};
+  },
+  watch: {
+    title(val) {
+      console.log(val);
+      this.drawLine();
+    },
+  },
+  mounted() {
+    this.drawLine();
+  },
+
+  methods: {
+    drawLine() {
+      // 基于dom，初始化echarts实例
+      let myChart = this.$echarts.init(document.getElementById(this.id));
+      // 绘制图表
+      myChart.setOption({
+        title: {
+          text: this.title,
+          left: this.legendName == "旷工率" ? "center" : "left",
+          textStyle: {
+            fontSize: this.legendName == "旷工率" ? 24 : 18,
+          },
+        },
+        color:'#6e98ed',
+        legend: {
+          orient: "horizontal",
+          right: "50px",
+          top: "0",
+          itemWidth: 20,
+          itemHeight: 10,
+          icon: "roundRect",
+          textStyle: {
+            fontSize: "14px",
+            color: "#000",
+          },
+        },
+        tooltip: {},
+        xAxis: {
+          data:
+            this.title == "申诉次数部门排名TOP20"
+              ? [
+                  "部门1",
+                  "部门2",
+                  "部门3",
+                  "部门4",
+                  "部门5",
+                  "部门6",
+                  "部门7",
+                  "部门8",
+                  "部门9",
+                  "部门10",
+                  "部门11",
+                  "部门12",
+                  "部门13",
+                  "部门14",
+                  "部门15",
+                  "部门16",
+                  "部门17",
+                  "部门18",
+                  "部门19",
+                  "部门20",
+                ]
+              : this.title == "申诉次数个人排名TOP20"
+              ? [
+                  "个人1",
+                  "个人2",
+                  "个人3",
+                  "个人4",
+                  "个人5",
+                  "个人6",
+                  "个人7",
+                  "个人8",
+                  "个人9",
+                  "个人10",
+                  "个人11",
+                  "个人12",
+                  "个人13",
+                  "个人14",
+                  "个人15",
+                  "个人16",
+                  "个人17",
+                  "个人18",
+                  "个人19",
+                  "个人20",
+                ]
+              : [
+                  "规则1",
+                  "规则2",
+                  "规则3",
+                  "规则4",
+                  "规则5",
+                  "规则6",
+                  "规则7",
+                  "规则8",
+                  "规则9",
+                  "规则10",
+                  "规则11",
+                  "规则12",
+                  "规则13",
+                  "规则14",
+                  "规则15",
+                  "规则16",
+                  "规则17",
+                  "规则18",
+                  "规则19",
+                  "规则20",
+                ],
+        },
+        grid: {
+          left: "5%",
+          right: "4%",
+          bottom: "2%",
+          containLabel: true,
+        },
+        // color:[ "#61a0a8",],
+        yAxis: {},
+        series: [
+          {
+            name: this.legendName,
+            type: "bar",
+            data: [
+              1200,
+              1100,
+              900,
+              800,
+              1122,
+              1234,
+              1050,
+              1155,
+              1120,
+              1136,
+              1110,
+              1110,
+              1120,
+              1020,
+              1212,
+              1233,
+              1111,
+              1000,
+              1111,
+              1024,
+            ],
+            itemStyle: {
+              // normal: {
+              //   //这里是重点
+              //   color: function(params) {
+              //     //注意，如果颜色太少的话，后面颜色不会自动循环，最好多定义几个颜色
+              //     var colorList = ["#6e98ed"];
+              //     return colorList[params.dataIndex];
+              //   },
+              // },
+              lineStyle: {
+                type: "dotted", //'dotted'虚线 'solid'实线
+              },
+            },
+          },
+        ],
+      });
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped></style>

attendance-performance-manager-ui/admin/src/views/perform/attend/appeal/list(原绩效申诉).vue

+<template>
+    <div class="page">
+        <LayoutTable :data="tableData" :config="tableConfig">
+                    </LayoutTable>
+
+
+        <drawer-show ref="drawerform" @ok="getData" />
+    </div>
+</template>
+
+<script>
+    /** 表单弹出框模式需引入 */
+    import drawerShow from "./drawershow";
+    import table from "@/assets/mixins/table";
+    export default {
+        name: "PerformAttendAppealList",
+        components: {
+            drawerShow
+},
+        mixins: [table],
+        created() {
+        },
+        methods: {
+            renderTable(tableData) {
+                return (
+                    <el-table stripe data={tableData} class="total-table">
+                    {this.columnSet.map((item) => this.renderTableColumn(item))}
+                    </el-table>
+                );
+            },
+            renderTableColumn(options) {
+                return (
+                    <el-table-column
+                        prop={options.prop}
+                        label={options.label}
+                        width={options.width}
+                        formatter={options.formatter}
+                    >
+                    </el-table-column>
+                 );
+            },
+            /** 重写新增方法 */
+            toAdd(row) {
+                this.$refs.drawerform.add(row);
+            },
+            /** 重写编辑方法 */
+            toEdit(row) {
+                this.$refs.drawerform.edit(row);
+            },
+            /** 重写查看方法 */
+            toView(row) {
+                this.$refs.drawerform.view(row);
+            },
+
+        },
+        data() {
+            return {
+                /** 子表列元素 */
+                columnSet:[
+                    {label: "申诉Id", prop: "appealId", formatter: this.formatter},
+                    {label: "文件名称", prop: "fileName"},
+                    {label: "文件地址", prop: "filePath"},
+                ],
+                config: {
+                  isshowTabPane:false,
+                    search: [
+                    ],
+                    columns: [
+                        {type: "selection", width: 60},
+                        {type: "index",label: "序号",width: 50},
+
+                        {label: "姓名", prop: "staffName"},
+
+                        {label: "窗口工号", prop: "workNum"},
+
+                        {label: "所属部门", prop: "deptName"},
+
+                        {label: "违规类型", prop: "ruleName"},
+                        {label: "绩效规则", prop: "ruleName"},
+
+                        {label: "扣分方式", prop: "subMethod",formatter: this.formatter},
+
+                      {label: "扣分时间", prop: "attendanceDate" , formatter: this.formatterDate },
+
+                        {label: "扣分分值", prop: "score", formatter: this.formatter},
+
+
+                        {label: "申诉时间", prop: "appealTime", formatter: this.formatterDate},
+
+                        {label: "处理状态", prop: "processStatus",formatter: this.formatter},
+
+                       /* {label: "绩效记录申诉附件信息",
+                          width: 120,
+                          prop: "subColumns",
+                          formatter: (row) => {
+                              let widthsize = this.columnSet.reduce((pre, cur) => {
+                                  return pre + Number(cur.width);
+                              }, 50);
+                              return (
+                                  <el-popover placement="right" width={widthsize} trigger="click">
+                                      {this.renderTable(row.performAttendAppealFilesList)}
+                                      <el-button type="text" slot="reference">详细</el-button>
+                                  </el-popover>
+                              );
+                          },
+                        },*/
+                        {
+                            label: "操作",
+                            width: 240,
+                            formatter: row => {
+                                return (
+                                    <table-buttons noAdd row={row} onEdit={this.toEdit} onView={this.toView} onDel={this.toDel} />
+                            );
+                            }
+                        }
+                    ]
+                }
+            };
+        }
+    };
+</script>

attendance-performance-manager-ui/admin/src/views/perform/attend/appeal/list.vue

 <template>
   <div class="page">
-        <LayoutTable :data="tableData" :config="tableConfig">
+    <el-tabs v-model="activeName">
+      <el-tab-pane label="未处理" name="1">
+        <LayoutTable :data="tableData" notAdd notDel :config="tableConfig">
         </LayoutTable>
-
-
+      </el-tab-pane>
+      <el-tab-pane label="已处理" name="2">
+        <LayoutTable :data="tableData" notAdd notDel :config="tableConfig">
+        </LayoutTable>
+      </el-tab-pane>
+      <el-tab-pane label="数据分析" name="3">
+        <div class="content">
+          <div class="search_box">
+            <div class="search">
+              <el-select
+                v-model="dateValue"
+                placeholder="请选择"
+                style="margin: 0 10px;"
+              >
+                <el-option
+                  v-for="item in optionsMonths"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+                >
+                </el-option>
+              </el-select>
+              <el-button type="primary">搜索</el-button>
+            </div>
+          </div>
+          <div class="data_box">
+            <div class="top">
+              <div class="box">
+                <bar-charts
+                  :title="'申诉次数部门排名TOP20'"
+                  :id="'dept_20'"
+                  :legendName="'申诉次数'"
+                  :styleObj="{ width: '800px', height: '360px' }"
+                />
+              </div>
+              <div class="box">
+                <bar-charts
+                  :title="'申诉次数个人排名TOP20'"
+                  :id="'person_20'"
+                  :legendName="'申诉次数'"
+                  :styleObj="{ width: '800px', height: '360px' }"
+                />
+              </div>
+            </div>
+            <div class="down">
+              <bar-charts
+                :title="'申诉次数规则排名TOP20'"
+                :id="'rule_20'"
+                :legendName="'申诉次数'"
+                :styleObj="{ width: '1800px', height: '320px' }"
+              />
+            </div>
+          </div>
+        </div>
+      </el-tab-pane>
+    </el-tabs>
+    <!-- <bar-charts
+      :title="'部门扣分排名TOP10'"
+      :id="'koufen_10'"
+      :legendName="'部门扣分分值'"
+      :styleObj="{ width: '100%', height: '300px' }"
+    /> -->
     <drawer-show ref="drawerform" @ok="getData" />
   </div>
 </template>
 
 <script>
-    /** 表单弹出框模式需引入 */
-    import drawerShow from "./drawershow";
-    import table from "@/assets/mixins/table";
-    export default {
+/** 表单弹出框模式需引入 */
+import drawerShow from "./drawershow";
+import table from "@/assets/mixins/table";
+import BarCharts from "./components/BarCharts.vue";
+export default {
   name: "PerformAttendAppealList",
   components: {
-            drawerShow
-},
-        mixins: [table],
-        created() {
+    drawerShow,
+    BarCharts,
   },
+  mixins: [table],
+  created() {},
   methods: {
     renderTable(tableData) {
       return (
@@ -35,8 +98,7 @@
           label={options.label}
           width={options.width}
           formatter={options.formatter}
-                    >
-                    </el-table-column>
+        ></el-table-column>
       );
     },
     /** 重写新增方法 */
@@ -51,43 +113,52 @@
     toView(row) {
       this.$refs.drawerform.view(row);
     },
-
   },
   data() {
     return {
       /** 子表列元素 */
-                columnSet:[
-                    {label: "申诉Id", prop: "appealId", formatter: this.formatter},
-                    {label: "文件名称", prop: "fileName"},
-                    {label: "文件地址", prop: "filePath"},
+      columnSet: [
+        { label: "申诉Id", prop: "appealId", formatter: this.formatter },
+        { label: "文件名称", prop: "fileName" },
+        { label: "文件地址", prop: "filePath" },
       ],
       config: {
-                  isshowTabPane:false,
-                    search: [
-                    ],
+        isshowTabPane: false,
+        search: [],
         columns: [
-                        {type: "selection", width: 60},
-                        {type: "index",label: "序号",width: 50},
+          { type: "selection", width: 60 },
+          { type: "index", label: "序号", width: 50 },
 
-                        {label: "姓名", prop: "staffName"},
+          { label: "姓名", prop: "staffName" },
 
-                        {label: "窗口工号", prop: "workNum"},
+          { label: "窗口工号", prop: "workNum" },
 
-                        {label: "所属部门", prop: "deptName"},
+          { label: "所属部门", prop: "deptName" },
 
-                        {label: "违规类型", prop: "ruleName"},
-                        {label: "绩效规则", prop: "ruleName"},
+          { label: "违规类型", prop: "ruleName" },
+          { label: "绩效规则", prop: "ruleName" },
 
-                        {label: "扣分方式", prop: "subMethod",formatter: this.formatter},
+          { label: "扣分方式", prop: "subMethod", formatter: this.formatter },
 
-                      {label: "扣分时间", prop: "attendanceDate" , formatter: this.formatterDate },
-
-                        {label: "扣分分值", prop: "score", formatter: this.formatter},
+          {
+            label: "扣分时间",
+            prop: "attendanceDate",
+            formatter: this.formatterDate,
+          },
 
+          { label: "扣分分值", prop: "score", formatter: this.formatter },
 
-                        {label: "申诉时间", prop: "appealTime", formatter: this.formatterDate},
+          {
+            label: "申诉时间",
+            prop: "appealTime",
+            formatter: this.formatterDate,
+          },
 
-                        {label: "处理状态", prop: "processStatus",formatter: this.formatter},
+          {
+            label: "处理状态",
+            prop: "processStatus",
+            formatter: this.formatter,
+          },
 
           /* {label: "绩效记录申诉附件信息",
                           width: 120,
@@ -107,15 +178,109 @@
           {
             label: "操作",
             width: 240,
-                            formatter: row => {
+            formatter: (row) => {
               return (
-                                    <table-buttons noAdd row={row} onEdit={this.toEdit} onView={this.toView} onDel={this.toDel} />
+                <table-buttons
+                  noAdd
+                  row={row}
+                  onEdit={this.toEdit}
+                  onView={this.toView}
+                  onDel={this.toDel}
+                />
               );
+            },
+          },
+        ],
+      },
+      activeName: "1",
+      optionsMonths: [
+        {
+          value: "1",
+          label: "1月",
+        },
+        {
+          value: "2",
+          label: "2月",
+        },
+        {
+          value: "3",
+          label: "3月",
+        },
+        {
+          value: "4",
+          label: "4月",
+        },
+        {
+          value: "5",
+          label: "5月",
+        },
+        {
+          value: "6",
+          label: "6月",
+        },
+        {
+          value: "7",
+          label: "7月",
+        },
+        {
+          value: "8",
+          label: "8月",
+        },
+        {
+          value: "9",
+          label: "9月",
+        },
+        {
+          value: "10",
+          label: "10月",
+        },
+        {
+          value: "11",
+          label: "11月",
+        },
+        {
+          value: "12",
+          label: "12月",
+        },
+      ],
+      dateValue: "1",
+    };
+  },
+};
+</script>
+<style lang="less" scoped>
+.page {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  /deep/.el-tabs__item {
+    width: 120px;
+    font-size: 18px;
+    text-align: center;
   }
+  .content {
+    width: 100%;
+    height: 730px;
+    overflow: hidden;
+    .search_box {
+      width: 100%;
+      height: auto;
+      text-align: right;
     }
-                    ]
+    .data_box {
+      width: 100%;
+      height: 100%;
+      .top {
+        width: 100%;
+        height: 380px;
+        display: flex;
+        justify-content: space-between;
+        .box {
+          width: 49%;
+          height: 100%;
         }
-            };
       }
-    };
-</script>
+    }
+  }
+}
+</style>

attendance-performance-manager-ui/admin/src/views/perform/attend/data/list.vue

+<template>
+  <div>qwe</div>
+</template>
+
+<script>
+export default {
+  name: "AdminList",
+
+  data() {
+    return {};
+  },
+
+  mounted() {},
+
+  methods: {},
+};
+</script>
+
+<style lang="less" scoped></style>

attendance-performance-manager-ui/admin/src/views/perform/perpose/list.vue

 <template>
   <div class="page">
-        <LayoutTable :data="tableData" :config="tableConfig">
-                    </LayoutTable>
-
+    <LayoutTable :data="tableData" :config="tableConfig"> </LayoutTable>
 
     <dialog-show ref="dialogform" @ok="getData" />
   </div>
 </template>
 
 <script>
-    /** 表单弹出框模式需引入 */
-    import dialogShow from "./dialogshow";
-    import table from "@/assets/mixins/table";
-    export default {
+/** 表单弹出框模式需引入 */
+import dialogShow from "./dialogshow";
+import table from "@/assets/mixins/table";
+export default {
   name: "PerformPerposeList",
   components: {
-            dialogShow
-},
-        mixins: [table],
-        created() {
+    dialogShow,
   },
+  mixins: [table],
+  created() {},
   methods: {
     /** 重写新增方法 */
     toAdd(row) {
@@ -33,37 +30,49 @@
     toView(row) {
       this.$refs.dialogform.view(row);
     },
-
   },
   data() {
     return {
       config: {
-                  isshowTabPane:true,
-                    search: [
-                    ],
+        isshowTabPane: true,
+        search: [],
         columns: [
-                        {type: "selection", width: 60},
-                        {type: "index",label: "序号",width: 50},
+          { type: "selection", width: 60 },
+          { type: "index", label: "序号", width: 50 },
 
-                        {label: "负责人名称", prop: "ownerName"},
+          { label: "负责人名称", prop: "ownerName" },
 
-                        {label: "请假类型", prop: "assessmentType",formatter: this.formatter},
+          {
+            label: "请假类型",
+            prop: "assessmentType",
+            formatter: this.formatter,
+          },
 
-                        {label: "比例", prop: "ratio", formatter: this.formatter},
+          { label: "比例", prop: "ratio", formatter: this.formatter },
 
-                        {label: "创建时间", prop: "createTime", formatter: this.formatterDate},
+          {
+            label: "创建时间",
+            prop: "createTime",
+            formatter: this.formatterDate,
+          },
           {
             label: "操作",
             width: 240,
-                            formatter: row => {
+            formatter: (row) => {
               return (
-                                    <table-buttons noAdd row={row} onEdit={this.toEdit} onView={this.toView} onDel={this.toDel} />
+                <table-buttons
+                  noAdd
+                  row={row}
+                  onEdit={this.toEdit}
+                  onView={this.toView}
+                  onDel={this.toDel}
+                />
               );
-                            }
-                        }
-                    ]
-                }
-            };
-        }
+            },
+          },
+        ],
+      },
     };
+  },
+};
 </script>

attendance-performance-manager-ui/admin/src/views/perform/rules/attend/components/AttendIndex.vue

+<template>
+  <div class="attend_page">
+    <div class="left_box">
+      <h3>分类管理</h3>
+      <el-button type="primary" style="margin:20px 0" @click="addCate">
+        + 新增分类</el-button
+      >
+      <div class="left_content">
+        <div
+          :class="index == i ? 'category_box check' : 'category_box'"
+          v-for="(val, i) in dataArr"
+          :key="i"
+          @click="handleClick(val, i)"
+        >
+          <span>{{ val.name }}</span>
+          <div>
+            <i class="el-icon-edit-outline" @click="toEdit(val)"></i>
+            <i class="el-icon-delete" @click="toDel(val)"></i>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="right_box">
+      <h3>规则管理</h3>
+      <div class="search_box">
+        <el-button type="primary" style="margin:20px 0" @click="addRules">
+          + 新增规则</el-button
+        >
+        <div class="search">
+          <el-input
+            placeholder="请输入考核内容关键字搜索"
+            style="width: 300px;margin-right: 10px;"
+          ></el-input>
+          <el-button type="primary"> 搜索 </el-button>
+        </div>
+      </div>
+      <div class="table_box">
+        <LayoutTable
+          :data="tableData"
+          notAdd
+          notDel
+          notSearch
+          :config="tableConfig"
+        >
+        </LayoutTable>
+      </div>
+    </div>
+    <drawer-show ref="drawerform" @ok="getData" />
+    <dialog-show ref="dialogform" @ok="getData" />
+  </div>
+</template>
+
+<script>
+import drawerShow from "../drawershow";
+import dialogShow from "../dialogshow";
+import table from "@/assets/mixins/table";
+export default {
+  name: "AdminAttendIndex",
+  components: {
+    drawerShow,
+    dialogShow,
+  },
+  mixins: [table],
+
+  props: {
+    activeName: {
+      type: String,
+      default: () => "",
+    },
+  },
+  data() {
+    return {
+      index: -1,
+      dataArr: [],
+      config: {
+        isshowTabPane: false,
+        search: [],
+        columns: [
+          { type: "selection", width: 60 },
+          { type: "index", label: "序号", width: 50 },
+
+          { label: "分类", prop: "categoryId", formatter: this.formatter },
+          { label: "考核名称", prop: "name" },
+
+          { label: "评分标准", prop: "content" },
+
+          { label: "增减类型", prop: "subAddType", formatter: this.formatter },
+
+          { label: "分值", prop: "score" },
+
+          { label: "负责人分值", prop: "ownerScore" },
+
+          {
+            label: "创建用户",
+            prop: "createUserId",
+            formatter: this.formatter,
+          },
+          {
+            label: "操作",
+            width: 240,
+            formatter: (row) => {
+              return (
+                <table-buttons
+                  noAdd
+                  noView
+                  row={row}
+                  onEdit={this.eddRules}
+                  onDel={this.toDelRules}
+                />
+              );
+            },
+          },
+        ],
+      },
+    };
+  },
+
+  created() {
+    // this.getData();
+  },
+
+  methods: {
+    handleClick(val, i) {
+      this.index = i;
+    },
+    addRules() {
+      this.$refs.drawerform.add();
+    },
+    eddRules(row) {
+      this.$refs.drawerform.edit(row);
+    },
+    addCate() {
+      this.$refs.dialogform.add();
+    },
+    toDelRules(val) {
+      console.log(val);
+      this.$get("/perform/rules/delete", { id: val }).then((res) => {
+        this.$message.success(res.msg);
+        this.getKaoQin();
+      });
+    },
+    /** 重写编辑方法 */
+    toEdit(row) {
+      this.$refs.dialogform.edit(row);
+    },
+    toDel(val) {
+      this.$get("/perform/rules/category/delete", { id: val.id }).then(
+        (res) => {
+          this.$message.success(res.msg);
+          this.getData();
+        }
+      );
+    },
+    async getData() {
+      await this.$post("/perform/rules/category/list").then((res) => {
+        this.getKaoQin();
+        if (res.code == 1) {
+          this.dataArr = res.data.data;
+        } else {
+          this.dataArr = [];
+        }
+      });
+    },
+    async getKaoQin() {
+      await this.$post("/perform/rules/list", { type: this.activeName }).then(
+        (res) => {
+          if (res.code == 1) {
+            this.tableData = res.data;
+            console.log(res.data);
+            this.$forceUpdate(this.tableData);
+          } else {
+            this.tableData = {};
+          }
+        }
+      );
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.attend_page {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  h3 {
+    border-width: 0px;
+    display: flex;
+    font-family: "微软雅黑 Bold", "微软雅黑 Regular", "微软雅黑", sans-serif;
+    font-weight: 700;
+    font-style: normal;
+  }
+  .left_box {
+    width: 344px;
+    height: 735px;
+    background-color: rgba(242, 247, 249, 0.447058823529412);
+    border: none;
+    border-radius: 8px;
+    border-top-left-radius: 0px;
+    border-top-right-radius: 0px;
+    border-bottom-right-radius: 0px;
+    -moz-box-shadow: none;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+    font-family: "微软雅黑", sans-serif;
+    font-weight: 400;
+    font-style: normal;
+    padding: 20px;
+
+    .left_content {
+      width: 100%;
+      height: 600px;
+      overflow-y: auto;
+      .category_box {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        border-width: 0px;
+        width: 304px;
+        height: 48px;
+        background: inherit;
+        background: #ffffff;
+        border: none;
+        border-radius: 4px;
+        -moz-box-shadow: none;
+        -webkit-box-shadow: none;
+        box-shadow: none;
+        font-family: "微软雅黑", sans-serif;
+        font-weight: 400;
+        font-style: normal;
+        font-size: 14px;
+        color: #000;
+        text-align: left;
+        padding: 0 10px;
+        border: 1px solid #ddd;
+        margin-bottom: 20px;
+        &:hover {
+          background-color: rgba(22, 202, 122, 1);
+          color: #ffffff;
+          border: none;
+        }
+        i {
+          font-style: normal;
+          font-size: 18px;
+          margin: 0 5px;
+          cursor: pointer;
+        }
+      }
+      .check {
+        background-color: rgba(22, 202, 122, 1);
+        color: #ffffff;
+        border: none;
+      }
+    }
+  }
+  .right_box {
+    flex: 1;
+    padding: 20px;
+    .search_box {
+      width: 100%;
+      height: 60px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+    .table_box {
+      width: 100%;
+      height: 100%;
+    }
+  }
+}
+</style>

attendance-performance-manager-ui/admin/src/views/perform/rules/attend/dialogshow.vue

+<template>
+  <!-- 弹出框表单 -->
+  <el-dialog :title="title" :visible.sync="open" width="90%" append-to-body>
+    <el-form ref="form" :model="form" :rules="rules" label-width="120px">
+      <el-row>
+        <Field
+          label="绩效规则id"
+          prop="ruleId"
+          v-model="form.ruleId"
+          placeholder="请输入绩效规则id"
+        />
+        <Field
+          label="规则简称"
+          prop="ruleBrief"
+          v-model="form.ruleBrief"
+          placeholder="请输入规则简称"
+        />
+        <Field
+          label="分类名称"
+          prop="name"
+          v-model="form.name"
+          placeholder="请输入分类名称"
+        />
+        <Field
+          label="规则类型"
+          prop="type"
+          v-model="form.type"
+          type="select"
+          :enumData="dict.type"
+          placeholder="请选择规则类型"
+        />
+        <Field
+          label="备注"
+          prop="remark"
+          v-model="form.remark"
+          type="textarea"
+          placeholder="请输入备注"
+        />
+      </el-row>
+    </el-form>
+    <div slot="footer" class="dialog-footer">
+      <el-button
+        type="primary"
+        v-if="pageInfo.type !== 'view'"
+        @click="submitForm"
+        >确 定</el-button
+      >
+      <el-button @click="cancel">取 消</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import form from "@/assets/mixins/formdialog";
+import dialogShow from "./dialogshow";
+export default {
+  mixins: [form],
+  components: {
+    dialogShow,
+  },
+  data() {
+    return {
+      // 遮罩层
+      loading: true,
+      // 弹出层标题
+      title: "绩效规则分类信息",
+      // 是否显示弹出层
+      open: false,
+      toString: ["type"],
+      // 表单校验
+      rules: {},
+    };
+  },
+
+  methods: {
+    /** 编辑 */
+    edit(row) {
+      this.reset();
+      this.query = { id: row.id };
+      this.urls.currUrl = "perform/rules/category/edit";
+      this.getData();
+      this.pageInfo.type = "edit";
+      this.title = "修改绩效规则分类信息";
+    },
+    /** 新增 */
+    add(row) {
+      this.reset();
+      this.urls.currUrl = "perform/rules/category/add";
+      this.getData();
+      this.pageInfo.type = "add";
+      this.title = "新增绩效规则分类信息";
+    },
+    /** 查看*/
+    view(row) {
+      this.reset();
+      this.query = { id: row.id };
+      this.urls.currUrl = "perform/rules/category/view";
+      this.getData();
+      this.pageInfo.type = "view";
+      this.title = "绩效规则分类信息详细";
+    },
+    /**取消按钮 */
+    cancel() {
+      this.open = false;
+    },
+    /**获取数据后弹框 */
+    afterRender(data) {
+      this.open = true;
+    },
+
+    afterSubmit(data) {
+      this.open = false;
+      this.$emit("ok");
+    },
+
+    // 表单重置
+    reset() {
+      this.form = {
+        ruleId: null,
+        ruleBrief: "",
+        name: "",
+        type: 1,
+        remark: "",
+      };
+      this.resetForm("form");
+    },
+    resetForm(refName) {
+      if (this.$refs[refName]) {
+        this.$refs[refName].resetFields();
+      }
+    },
+  },
+};
+</script>

attendance-performance-manager-ui/admin/src/views/perform/rules/attend/drawershow.vue

@@ -4,59 +4,107 @@
     :title="title"
     :visible.sync="open"
     :direction="direction"
-            size="50%">
+    size="50%"
+  >
     <el-form ref="form" :model="form" :rules="rules" label-width="120px">
       <el-row>
-                        <Field :span="20" label="分类" prop="categoryId" v-model="form.categoryId" :enumData="dict.categoryId" type="select" placeholder="请选择分类"/>
-
-                            <Field :span="20" label="考核内容简称" prop="name" v-model="form.name" placeholder="请输入考核内容简称"/>
-                            <Field :span="20" label="评分标准" prop="content" v-model="form.content" type="textarea" placeholder="请输入评分标准"/>
-                            <Field :span="20" label="增减类型" prop="subAddType" v-model="form.subAddType" type="select" :enumData="dict.subAddType" placeholder="请选择增减类型"/>
-                            <Field :span="20" label="扣分" prop="score" v-model="form.score" placeholder="请输入扣分或增加分值"/>
-                            <Field :span="20" label="关联负责人" prop="assoOwner" v-model="form.assoOwner" type="radio" :enumData="dict.assoOwner" placeholder="请选择是否关联负责人"/>
-                            <Field :span="20" v-if="form.assoOwner==1" label="负责人扣分" prop="ownerScore" v-model="form.ownerScore" placeholder="请输入负责人扣分或增加分值"/>
-                            <Field :span="20" label="备注" prop="remark" v-model="form.remark" type="textarea" placeholder="请输入备注"/>
-
+        <Field
+          :span="20"
+          label="分类"
+          prop="categoryId"
+          v-model="form.categoryId"
+          :enumData="dict.categoryId"
+          type="select"
+          placeholder="请选择分类"
+        />
 
+        <Field
+          :span="20"
+          label="考核内容简称"
+          prop="name"
+          v-model="form.name"
+          placeholder="请输入考核内容简称"
+        />
+        <Field
+          :span="20"
+          label="评分标准"
+          prop="content"
+          v-model="form.content"
+          type="textarea"
+          placeholder="请输入评分标准"
+        />
+        <Field
+          :span="20"
+          label="增减类型"
+          prop="subAddType"
+          v-model="form.subAddType"
+          type="select"
+          :enumData="dict.subAddType"
+          placeholder="请选择增减类型"
+        />
+        <Field
+          :span="20"
+          label="扣分"
+          prop="score"
+          v-model="form.score"
+          placeholder="请输入扣分或增加分值"
+        />
+        <Field
+          :span="20"
+          label="关联负责人"
+          prop="assoOwner"
+          v-model="form.assoOwner"
+          type="radio"
+          :enumData="dict.assoOwner"
+          placeholder="请选择是否关联负责人"
+        />
+        <Field
+          :span="20"
+          v-if="form.assoOwner == 1"
+          label="负责人扣分"
+          prop="ownerScore"
+          v-model="form.ownerScore"
+          placeholder="请输入负责人扣分或增加分值"
+        />
+        <Field
+          :span="20"
+          label="备注"
+          prop="remark"
+          v-model="form.remark"
+          type="textarea"
+          placeholder="请输入备注"
+        />
       </el-row>
 
-            <form-buttons v-if="pageInfo.type!='view'" @submit='submitForm' noCancelBtn />
+      <form-buttons
+        v-if="pageInfo.type != 'view'"
+        @submit="submitForm"
+        noCancelBtn
+      />
     </el-form>
-
   </el-drawer>
 </template>
 
 <script>
-    import form from "@/assets/mixins/formdialog";
-    export default {
+import form from "@/assets/mixins/formdialog";
+export default {
   name: "PerformRulesDetail",
   mixins: [form],
-        components: {
-
-        },
-        created() {
-
-        },
+  components: {},
+  created() {},
   data() {
     return {
       // 遮罩层
       loading: true,
       // 弹出层标题
-                title: "绩效规则信息",
+      title: "规则",
       // 是否显示弹出层
       open: false,
-                direction:"rtl",
-                toString:[
-                    "subAddType",
-                    "assoOwner",
-                    "type",
-                    "categoryId"
-                ],
-                toDate:[
-                ],
+      direction: "rtl",
+      toString: ["subAddType", "assoOwner", "type", "categoryId"],
+      toDate: [],
       // 表单校验
-                rules: {
-                },
+      rules: {},
       urls: {
         currUrl: "/perform/rules/list",
         editUrl: "/perform/rules/edit",
@@ -68,29 +116,29 @@
   methods: {
     /** 编辑 */
     edit(row) {
-                this.reset()
+      this.reset();
       this.query = { id: row.id };
-                this.urls.currUrl ="perform/rules/edit";
+      this.urls.currUrl = "perform/rules/edit";
       this.getData();
-                this.pageInfo.type="edit"
-                this.title = "修改绩效规则信息";
+      this.pageInfo.type = "edit";
+      this.title = "修改规则";
     },
     /** 新增 */
     add(row) {
-                this.reset()
+      this.reset();
       this.urls.currUrl = "perform/rules/add";
       this.getData();
-                this.pageInfo.type="add"
-                this.title = "新增绩效规则信息";
+      this.pageInfo.type = "add";
+      this.title = "新增规则";
     },
     /** 查看*/
     view(row) {
-                this.reset()
+      this.reset();
       this.query = { id: row.id };
-                this.urls.currUrl ="perform/rules/view";
+      this.urls.currUrl = "perform/rules/view";
       this.getData();
-                this.pageInfo.type="view"
-                this.title = "绩效规则信息详细";
+      this.pageInfo.type = "view";
+      this.title = "规则信息详细";
     },
     /**取消按钮 */
     cancel() {
@@ -98,7 +146,7 @@
     },
     /**获取数据后弹框 */
     afterRender(data) {
-              this.form.type=1
+      this.form.type = 1;
       this.open = true;
     },
 
@@ -110,16 +158,16 @@
     // 表单重置
     reset() {
       this.form = {
-                    categoryId : null,
-                    categoryName : "",
-                    name : "",
-                    content : "",
-                    subAddType : 1,
-                    score : 0.00,
-                    assoOwner : 0,
-                    ownerScore : 0.00,
-                    remark : "",
-                    type : 1,
+        categoryId: null,
+        categoryName: "",
+        name: "",
+        content: "",
+        subAddType: 1,
+        score: 0.0,
+        assoOwner: 0,
+        ownerScore: 0.0,
+        remark: "",
+        type: 1,
       };
       this.resetForm("form");
     },
@@ -129,5 +177,5 @@
       }
     },
   },
-    };
+};
 </script>

attendance-performance-manager-ui/admin/src/views/perform/rules/attend/list(原绩效规则).vue

+<template>
+  <div class="page">
+    <LayoutTable :data="tableData" :config="tableConfig"> </LayoutTable>
+
+    <drawer-show ref="drawerform" @ok="getData" />
+  </div>
+</template>
+
+<script>
+/** 表单弹出框模式需引入 */
+import drawerShow from "./drawershow";
+import table from "@/assets/mixins/table";
+export default {
+  name: "PerformRulesList",
+  components: {
+    drawerShow,
+  },
+  mixins: [table],
+  created() {
+    console.log("route", this.$route);
+    this.changePath("/perform/rules");
+    this.query = Object.assign({}, this.query, { type: 1 });
+  },
+  methods: {
+    /** 重写新增方法 */
+    toAdd(row) {
+      this.$refs.drawerform.add(row);
+    },
+    /** 重写编辑方法 */
+    toEdit(row) {
+      this.$refs.drawerform.edit(row);
+    },
+    /** 重写查看方法 */
+    toView(row) {
+      this.$refs.drawerform.view(row);
+    },
+  },
+  data() {
+    return {
+      config: {
+        isshowTabPane: true,
+        search: [],
+        columns: [
+          { type: "selection", width: 60 },
+          { type: "index", label: "序号", width: 50 },
+
+          { label: "分类", prop: "categoryId", formatter: this.formatter },
+          { label: "考核名称", prop: "name" },
+
+          { label: "评分标准", prop: "content" },
+
+          { label: "增减类型", prop: "subAddType", formatter: this.formatter },
+
+          { label: "分值", prop: "score" },
+
+          { label: "负责人分值", prop: "ownerScore" },
+
+          {
+            label: "创建用户",
+            prop: "createUserId",
+            formatter: this.formatter,
+          },
+          {
+            label: "操作",
+            width: 240,
+            formatter: (row) => {
+              return (
+                <table-buttons
+                  noAdd
+                  noDel
+                  row={row}
+                  onEdit={this.toEdit}
+                  onView={this.toView}
+                  onDel={this.toDel}
+                />
+              );
+            },
+          },
+        ],
+      },
+    };
+  },
+};
+</script>

attendance-performance-manager-ui/admin/src/views/perform/rules/attend/list.vue

 <template>
   <div class="page">
-        <LayoutTable :data="tableData" :config="tableConfig">
-                    </LayoutTable>
-
-
-        <drawer-show ref="drawerform" @ok="getData" />
+    <el-tabs v-model="activeName" @tab-click="handleClick">
+      <el-tab-pane label="考勤绩效指标" name="1">
+        <attend-index v-if="activeName == 1" :activeName="activeName" />
+      </el-tab-pane>
+      <el-tab-pane label="评价绩效指标" name="2">
+        <attend-index v-if="activeName == 2" :activeName="activeName" />
+      </el-tab-pane>
+      <el-tab-pane label="办件绩效指标" name="3">
+        <attend-index v-if="activeName == 3" :activeName="activeName" />
+      </el-tab-pane>
+      <el-tab-pane label="效能绩效指标" name="4">
+        <attend-index v-if="activeName == 4" :activeName="activeName" />
+      </el-tab-pane>
+      <el-tab-pane label="其他绩效指标" name="5">
+        <attend-index v-if="activeName == 5" :activeName="activeName" />
+      </el-tab-pane>
+    </el-tabs>
   </div>
 </template>
 
 <script>
-    /** 表单弹出框模式需引入 */
-    import drawerShow from "./drawershow";
-    import table from "@/assets/mixins/table";
-    export default {
+import AttendIndex from "./components/AttendIndex.vue";
+export default {
   name: "PerformRulesList",
-        components: {
-            drawerShow
-},
-        mixins: [table],
-        created() {
-          console.log("route",this.$route)
-          this.changePath("/perform/rules")
-          this.query = Object.assign({}, this.query, {type:1});
-        },
+  components: { AttendIndex },
+  created() {},
   methods: {
-            /** 重写新增方法 */
-            toAdd(row) {
-                this.$refs.drawerform.add(row);
-            },
-            /** 重写编辑方法 */
-            toEdit(row) {
-                this.$refs.drawerform.edit(row);
-            },
-            /** 重写查看方法 */
-            toView(row) {
-                this.$refs.drawerform.view(row);
-            },
+    handleClick(tab, event) {
   
+      // this.$forceUpdate(this.activeName);
+    },
   },
   data() {
     return {
-                config: {
-                  isshowTabPane:true,
-                    search: [
-                    ],
-                    columns: [
-                        {type: "selection", width: 60},
-                        {type: "index",label: "序号",width: 50},
-
-                        {label: "分类", prop: "categoryId", formatter: this.formatter},
-                        {label: "考核名称", prop: "name"},
-
-                        {label: "评分标准", prop: "content"},
-
-                        {label: "增减类型", prop: "subAddType",formatter: this.formatter},
-
-                        {label: "分值", prop: "score"},
-
-                        {label: "负责人分值", prop: "ownerScore"},
-
-                        {label: "创建用户", prop: "createUserId", formatter: this.formatter},
-                        {
-                            label: "操作",
-                            width: 240,
-                            formatter: row => {
-                                return (
-                                    <table-buttons noAdd noDel row={row} onEdit={this.toEdit} onView={this.toView} onDel={this.toDel} />
-                            );
-                            }
-                        }
-                    ]
-                }
-            };
-        }
+      activeName: "1",
     };
+  },
+};
 </script>
+<style lang="less" scoped>
+.page {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  /deep/.el-tabs__item {
+    width: 180px;
+    font-size: 18px;
+    text-align: center;
+  }
+}
+</style>

attendance-performance-manager-ui/admin/src/views/perform/rules/attend/view.vue

 <template>
   <layout-view>
-        <el-descriptions  :title="title" :column="column" :size="size" :colon="false" border>
+    <el-descriptions
+      :title="title"
+      :column="column"
+      :size="size"
+      :colon="false"
+      border
+    >
       <template slot="title">
         <i class="el-icon-tickets"></i>
         基本详细信息
       </template>
       <template slot="extra">
-                <el-button type="primary" @click="$router.go(-1)" size="small">返回</el-button>
+        <el-button type="primary" @click="$router.go(-1)" size="small"
+          >返回</el-button
+        >
       </template>
-                                    <el-descriptions-item label="分类id" label-class-name="labelClass" content-class-name="contentClass">
-                            {{form.categoryId}}
+      <el-descriptions-item
+        label="分类id"
+        label-class-name="labelClass"
+        content-class-name="contentClass"
+      >
+        {{ form.categoryId }}
       </el-descriptions-item>
-                        <el-descriptions-item label="分类名称" label-class-name="labelClass" content-class-name="contentClass">
-                            {{form.categoryName}}
+      <el-descriptions-item
+        label="分类名称"
+        label-class-name="labelClass"
+        content-class-name="contentClass"
+      >
+        {{ form.categoryName }}
       </el-descriptions-item>
-                        <el-descriptions-item label="考核内容简称" label-class-name="labelClass" content-class-name="contentClass">
-                            {{form.name}}
+      <el-descriptions-item
+        label="考核内容简称"
+        label-class-name="labelClass"
+        content-class-name="contentClass"
+      >
+        {{ form.name }}
       </el-descriptions-item>
-                        <el-descriptions-item label="评分标准" label-class-name="labelClass" content-class-name="contentClass">
-                            {{form.content}}
+      <el-descriptions-item
+        label="评分标准"
+        label-class-name="labelClass"
+        content-class-name="contentClass"
+      >
+        {{ form.content }}
       </el-descriptions-item>
-                        <el-descriptions-item label="增减类型" label-class-name="labelClass" content-class-name="contentClass">
+      <el-descriptions-item
+        label="增减类型"
+        label-class-name="labelClass"
+        content-class-name="contentClass"
+      >
         {{ util_formatters("subAddType", form.subAddType) }}
       </el-descriptions-item>
-                        <el-descriptions-item label="扣分或增加分值" label-class-name="labelClass" content-class-name="contentClass">
-                            {{form.score}}
+      <el-descriptions-item
+        label="扣分或增加分值"
+        label-class-name="labelClass"
+        content-class-name="contentClass"
+      >
+        {{ form.score }}
       </el-descriptions-item>
-                        <el-descriptions-item label="是否关联负责人" label-class-name="labelClass" content-class-name="contentClass">
+      <el-descriptions-item
+        label="是否关联负责人"
+        label-class-name="labelClass"
+        content-class-name="contentClass"
+      >
         {{ util_formatters("assoOwner", form.assoOwner) }}
       </el-descriptions-item>
-                        <el-descriptions-item label="负责人扣分或增加分值" label-class-name="labelClass" content-class-name="contentClass">
-                            {{form.ownerScore}}
+      <el-descriptions-item
+        label="负责人扣分或增加分值"
+        label-class-name="labelClass"
+        content-class-name="contentClass"
+      >
+        {{ form.ownerScore }}
       </el-descriptions-item>
-                        <el-descriptions-item label="备注" label-class-name="labelClass" content-class-name="contentClass">
-                            {{form.remark}}
+      <el-descriptions-item
+        label="备注"
+        label-class-name="labelClass"
+        content-class-name="contentClass"
+      >
+        {{ form.remark }}
       </el-descriptions-item>
-                        <el-descriptions-item label="规则类型" label-class-name="labelClass" content-class-name="contentClass">
+      <el-descriptions-item
+        label="规则类型"
+        label-class-name="labelClass"
+        content-class-name="contentClass"
+      >
         {{ util_formatters("type", form.type) }}
       </el-descriptions-item>
     </el-descriptions>
-
   </layout-view>
 </template>
 
 <script>
-    import view from "@/assets/mixins/view";
-    export default {
+import view from "@/assets/mixins/view";
+export default {
   mixins: [view],
-        components: {
-        },
-        methods: {
-
-        },
+  components: {},
+  methods: {},
   data() {
     return {
-                size:"small",
-                column:2,
-                toString:[
-                    "subAddType",
-                    "assoOwner",
-                    "type",
-                ],
-                toArrays: [
-
-                ],
-                toDate: [
-
-                ]
-            }
-        }
-    }
+      size: "small",
+      column: 2,
+      toString: ["subAddType", "assoOwner", "type"],
+      toArrays: [],
+      toDate: [],
+    };
+  },
+};
 </script>
 <style lang="less">
-    .labelClass{
+.labelClass {
   width: 200px;
-    }
-    .el-descriptions__body{
+}
+.el-descriptions__body {
   margin-left: 5px;
   margin-right: 5px;
   color: #606266;
-        background-color: #FFF;
-    }
-    .contentClass{
+  background-color: #fff;
+}
+.contentClass {
   width: 600px;
-    }
+}
 </style>

attendance-performance-manager-ui/admin/src/views/perform/rules/category/dialogshow.vue

@@ -3,29 +3,60 @@
   <el-dialog :title="title" :visible.sync="open" width="90%" append-to-body>
     <el-form ref="form" :model="form" :rules="rules" label-width="120px">
       <el-row>
-                                            <Field label="绩效规则id" prop="ruleId" v-model="form.ruleId" placeholder="请输入绩效规则id"/>
-                            <Field label="规则简称" prop="ruleBrief" v-model="form.ruleBrief" placeholder="请输入规则简称"/>
-                            <Field label="分类名称" prop="name" v-model="form.name" placeholder="请输入分类名称"/>
-                            <Field label="规则类型" prop="type" v-model="form.type" type="select" :enumData="dict.type" placeholder="请选择规则类型"/>
-                            <Field label="备注" prop="remark" v-model="form.remark" type="textarea" placeholder="请输入备注"/>
-
+        <Field
+          label="绩效规则id"
+          prop="ruleId"
+          v-model="form.ruleId"
+          placeholder="请输入绩效规则id"
+        />
+        <Field
+          label="规则简称"
+          prop="ruleBrief"
+          v-model="form.ruleBrief"
+          placeholder="请输入规则简称"
+        />
+        <Field
+          label="分类名称"
+          prop="name"
+          v-model="form.name"
+          placeholder="请输入分类名称"
+        />
+        <Field
+          label="规则类型"
+          prop="type"
+          v-model="form.type"
+          type="select"
+          :enumData="dict.type"
+          placeholder="请选择规则类型"
+        />
+        <Field
+          label="备注"
+          prop="remark"
+          v-model="form.remark"
+          type="textarea"
+          placeholder="请输入备注"
+        />
       </el-row>
-
     </el-form>
     <div slot="footer" class="dialog-footer">
-            <el-button type="primary" v-if="pageInfo.type !== 'view'" @click="submitForm">确 定</el-button>
+      <el-button
+        type="primary"
+        v-if="pageInfo.type !== 'view'"
+        @click="submitForm"
+        >确 定</el-button
+      >
       <el-button @click="cancel">取 消</el-button>
     </div>
   </el-dialog>
 </template>
 
 <script>
-    import form from "@/assets/mixins/formdialog";
-    import dialogShow from "./dialogshow";
-    export default {
+import form from "@/assets/mixins/formdialog";
+import dialogShow from "./dialogshow";
+export default {
   mixins: [form],
   components: {
-            dialogShow ,
+    dialogShow,
   },
   data() {
     return {
@@ -35,40 +66,37 @@
       title: "绩效规则分类信息",
       // 是否显示弹出层
       open: false,
-                toString:[
-                    "type",
-                ],
+      toString: ["type"],
       // 表单校验
-                rules: {
-                }
+      rules: {},
     };
   },
 
   methods: {
     /** 编辑 */
     edit(row) {
-                this.reset()
+      this.reset();
       this.query = { id: row.id };
-                this.urls.currUrl ="perform/rules/category/edit";
+      this.urls.currUrl = "perform/rules/category/edit";
       this.getData();
-                this.pageInfo.type="edit"
+      this.pageInfo.type = "edit";
       this.title = "修改绩效规则分类信息";
     },
     /** 新增 */
     add(row) {
-                this.reset()
+      this.reset();
       this.urls.currUrl = "perform/rules/category/add";
       this.getData();
-                this.pageInfo.type="add"
+      this.pageInfo.type = "add";
       this.title = "新增绩效规则分类信息";
     },
     /** 查看*/
     view(row) {
-                this.reset()
+      this.reset();
       this.query = { id: row.id };
-                this.urls.currUrl ="perform/rules/category/view";
+      this.urls.currUrl = "perform/rules/category/view";
       this.getData();
-                this.pageInfo.type="view"
+      this.pageInfo.type = "view";
       this.title = "绩效规则分类信息详细";
     },
     /**取消按钮 */
@@ -88,11 +116,11 @@
     // 表单重置
     reset() {
       this.form = {
-                    ruleId : null,
-                    ruleBrief : "",
-                    name : "",
-                    type : 1,
-                    remark : "",
+        ruleId: null,
+        ruleBrief: "",
+        name: "",
+        type: 1,
+        remark: "",
       };
       this.resetForm("form");
     },
@@ -102,5 +130,5 @@
       }
     },
   },
-    };
+};
 </script>

attendance-performance-manager-ui/admin/src/views/perform/rules/category/list.vue

 <template>
   <div class="page">
-        <LayoutTable :data="tableData" :config="tableConfig">
-                    </LayoutTable>
-
+    <LayoutTable :data="tableData" :config="tableConfig"> </LayoutTable>
 
     <dialog-show ref="dialogform" @ok="getData" />
   </div>
 </template>
 
 <script>
-    /** 表单弹出框模式需引入 */
-    import dialogShow from "./dialogshow";
-    import table from "@/assets/mixins/table";
-    export default {
+/** 表单弹出框模式需引入 */
+import dialogShow from "./dialogshow";
+import table from "@/assets/mixins/table";
+export default {
   name: "PerformRulesCategoryList",
   components: {
-            dialogShow
-},
-        mixins: [table],
-        created() {
+    dialogShow,
   },
+  mixins: [table],
+  created() {},
   methods: {
     /** 重写新增方法 */
     toAdd(row) {
@@ -33,34 +30,42 @@
     toView(row) {
       this.$refs.dialogform.view(row);
     },
-
   },
   data() {
     return {
       config: {
-                  isshowTabPane:true,
-                    search: [
-                    ],
+        isshowTabPane: true,
+        search: [],
         columns: [
-                        {type: "selection", width: 60},
-                        {type: "index",label: "序号",width: 50},
-                        {label: "分类名称", prop: "name"},
+          { type: "selection", width: 60 },
+          { type: "index", label: "序号", width: 50 },
+          { label: "分类名称", prop: "name" },
 
-                        {label: "规则类型", prop: "type",formatter: this.formatter},
+          { label: "规则类型", prop: "type", formatter: this.formatter },
 
-                        {label: "创建用户", prop: "createUserId", formatter: this.formatter},
+          {
+            label: "创建用户",
+            prop: "createUserId",
+            formatter: this.formatter,
+          },
           {
             label: "操作",
             width: 240,
-                            formatter: row => {
+            formatter: (row) => {
               return (
-                                    <table-buttons noAdd row={row} onEdit={this.toEdit} onView={this.toView} onDel={this.toDel} />
+                <table-buttons
+                  noAdd
+                  row={row}
+                  onEdit={this.toEdit}
+                  onView={this.toView}
+                  onDel={this.toDel}
+                />
               );
-                            }
-                        }
-                    ]
-                }
-            };
-        }
+            },
+          },
+        ],
+      },
     };
+  },
+};
 </script>

attendance-performance-manager-ui/admin/src/views/staff/perform/stat/components/BarCharts.vue

+<template>
+  <div>
+    <div :id="id" :style="styleObj"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    title: {
+      type: String,
+      default: "",
+    },
+    id: {
+      type: String,
+      default: "",
+    },
+    legendName: {
+      type: String,
+      default: "",
+    },
+    styleObj: {
+      type: Object,
+      default: () => {},
+    },
+  },
+  data() {
+    return {};
+  },
+  watch: {
+    title(val) {
+      console.log(val);
+      this.drawLine();
+    },
+  },
+  mounted() {
+    this.drawLine();
+  },
+
+  methods: {
+    drawLine() {
+      // 基于dom，初始化echarts实例
+      let myChart = this.$echarts.init(document.getElementById(this.id));
+      // 绘制图表
+      myChart.setOption({
+        title: {
+          text: this.title,
+          left: this.legendName == "旷工率" ? "center" : "left",
+          textStyle: {
+            fontSize: this.legendName == "旷工率" ? 24 : 18,
+          },
+        },
+        color:'#6e98ed',
+        legend: {
+          orient: "horizontal",
+          right: "50px",
+          top: "0",
+          itemWidth: 20,
+          itemHeight: 10,
+          icon: "roundRect",
+          textStyle: {
+            fontSize: "14px",
+            color: "#000",
+          },
+        },
+        tooltip: {},
+        xAxis: {
+          data: ["部门1", "部门2", "部门3", "部门4", "部门5", "部门6"],
+        },
+        grid: {
+          left: "5%",
+          right: "4%",
+          bottom: "2%",
+          containLabel: true,
+        },
+        // color:[ "#61a0a8",],
+        yAxis: {},
+        series: [
+          {
+            name: this.legendName,
+            type: "bar",
+            data: [5, 20, 36, 10, 10, 20],
+            itemStyle: {
+              
+              lineStyle: {
+                type: "dotted", //'dotted'虚线 'solid'实线
+              },
+            },
+          },
+        ],
+      });
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped></style>

attendance-performance-manager-ui/admin/src/views/staff/perform/stat/components/LineCharts.vue

+<template>
+  <div>
+    <div :id="id" :style="styleObj"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    title: {
+      type: String,
+      default: "",
+    },
+    id: {
+      type: String,
+      default: "",
+    },
+    legendName: {
+      type: String,
+      default: "",
+    },
+    styleObj: {
+      type: Object,
+      default: () => {},
+    },
+  },
+  data() {
+    return {};
+  },
+  watch: {
+    title(val) {
+      console.log(val);
+    },
+  },
+  mounted() {
+    this.drawLine();
+  },
+
+  methods: {
+    drawLine() {
+      // 基于dom，初始化echarts实例
+      let myChart = this.$echarts.init(document.getElementById(this.id));
+      // 绘制图表
+      myChart.setOption({
+        title: { text: this.title },
+        legend: {
+          orient: "horizontal",
+          left: "center",
+          top: "0",
+          itemWidth: 20,
+          itemHeight: 10,
+          icon: "roundRect",
+          textStyle: {
+            fontSize: "14px",
+            color: "#000",
+          },
+        },
+        tooltip: {},
+        color:'#6e98ed',
+        xAxis: {
+          type: "category",
+          data: ["部门1", "部门2", "部门3", "部门4", "部门5", "部门6"],
+        },
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "2%",
+          containLabel: true,
+        },
+        yAxis: {},
+        series: [
+          {
+            name: this.legendName,
+            type: "line",
+            data: [10, 20, 30, 90, 100, 100, 120],
+            smooth: true,
+            // itemStyle: {
+            //   lineStyle: {
+            //     type: "dotted", //'dotted'虚线 'solid'实线
+            //   },
+            // },
+          },
+        ],
+      });
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped></style>

attendance-performance-manager-ui/admin/src/views/staff/perform/stat/components/PieCharts.vue

+<template>
+  <div>
+    <div :id="id" :style="styleObj"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    title: {
+      type: String,
+      default: "",
+    },
+    id: {
+      type: String,
+      default: "",
+    },
+    legendName: {
+      type: String,
+      default: "",
+    },
+    styleObj: {
+      type: Object,
+      default: () => {},
+    },
+  },
+  data() {
+    return {};
+  },
+  watch: {
+    title(val) {
+      console.log(val);
+    },
+  },
+  mounted() {
+    this.drawLine();
+  },
+
+  methods: {
+    drawLine() {
+      // 基于dom，初始化echarts实例
+      let myChart = this.$echarts.init(document.getElementById(this.id));
+      // 绘制图表
+      myChart.setOption({
+        title: { text: this.title },
+        legend: {
+          orient: "vertical",
+          left: "right",
+          bottom: "0",
+          itemWidth: 20,
+          itemHeight: 10,
+          icon: "roundRect",
+          textStyle: {
+            fontSize: "14px",
+            color: "#000",
+          },
+        },
+        // color:'#6e98ed',
+        tooltip: {
+          trigger: "item",
+        },
+
+        grid: {
+          left: "3%",
+          right: "4%",
+          containLabel: true,
+        },
+        series: [
+          {
+            name: this.legendName,
+            type: "pie",
+            radius: "65%",
+            data: [
+              { value: 1048, name: "部门1" },
+              { value: 735, name: "部门2" },
+              { value: 580, name: "部门3" },
+              { value: 484, name: "部门4" },
+              { value: 300, name: "部门5" },
+            ],
+            emphasis: {
+              itemStyle: {
+                shadowBlur: 10,
+                shadowOffsetX: 0,
+                shadowColor: "rgba(0, 0, 0, 0.5)",
+              },
+            },
+          },
+        ],
+      });
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped></style>

attendance-performance-manager-ui/admin/src/views/staff/perform/stat/dialogshow.vue

+<template>
+  <!-- 弹出框表单 -->
+  <el-dialog :title="title" :visible.sync="open" width="90%" append-to-body>
+    <el-form ref="form" :model="form" :rules="rules" label-width="120px">
+      <el-row>
+        <Field
+          label="负责人id号"
+          prop="ownerId"
+          v-model="form.ownerId"
+          placeholder="请输入负责人id号"
+        />
+        <Field
+          label="负责人名称"
+          prop="ownerName"
+          v-model="form.ownerName"
+          placeholder="请输入负责人名称"
+        />
+        <Field
+          label="窗口工作人员id号"
+          prop="staffId"
+          v-model="form.staffId"
+          placeholder="请输入窗口工作人员id号"
+        />
+        <Field
+          label="请假类型"
+          prop="assessmentType"
+          v-model="form.assessmentType"
+          type="select"
+          :enumData="dict.assessmentType"
+          placeholder="请选择请假类型"
+        />
+        <Field
+          label="考核范围"
+          prop="assessmentScope"
+          v-model="form.assessmentScope"
+          type="select"
+          :enumData="dict.assessmentScope"
+          placeholder="请选择考核范围"
+        />
+        <Field
+          label="考比较类型"
+          prop="compareScope"
+          v-model="form.compareScope"
+          type="select"
+          :enumData="dict.compareScope"
+          placeholder="请选择考比较类型"
+        />
+        <Field
+          label="比例"
+          prop="ratio"
+          v-model="form.ratio"
+          placeholder="请输入比例"
+        />
+        <Field
+          label="周期类型"
+          prop="periodType"
+          v-model="form.periodType"
+          type="select"
+          :enumData="dict.periodType"
+          placeholder="请选择周期类型"
+        />
+        <Field
+          label="年"
+          prop="year"
+          v-model="form.year"
+          placeholder="请输入年"
+        />
+        <Field
+          label="月"
+          prop="month"
+          v-model="form.month"
+          type="select"
+          :enumData="dict.month"
+          placeholder="请选择月"
+        />
+        <Field
+          label="半年类型"
+          prop="halfYear"
+          v-model="form.halfYear"
+          type="select"
+          :enumData="dict.halfYear"
+          placeholder="请选择半年类型"
+        />
+        <Field
+          label="半年类型"
+          prop="halfYear"
+          v-model="form.halfYear"
+          type="select"
+          :enumData="dict.halfYear"
+          placeholder="请选择半年类型"
+        />
+        <Field
+          label="季度类型"
+          prop="quarter"
+          v-model="form.quarter"
+          type="select"
+          :enumData="dict.quarter"
+          placeholder="请选择季度类型"
+        />
+        <Field
+          label="负责人，多个逗号分割"
+          prop="leaders"
+          v-model="form.leaders"
+          type="textarea"
+          placeholder="请输入负责人，多个逗号分割"
+        />
+        <Field
+          label="负责人电话，多个逗号分割"
+          prop="leaderMobiles"
+          v-model="form.leaderMobiles"
+          type="textarea"
+          placeholder="请输入负责人电话，多个逗号分割"
+        />
+        <Field
+          label="备注"
+          prop="remark"
+          v-model="form.remark"
+          type="textarea"
+          placeholder="请输入备注"
+        />
+      </el-row>
+    </el-form>
+    <div slot="footer" class="dialog-footer">
+      <el-button
+        type="primary"
+        v-if="pageInfo.type !== 'view'"
+        @click="submitForm"
+        >确 定</el-button
+      >
+      <el-button @click="cancel">取 消</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import form from "@/assets/mixins/formdialog";
+import dialogShow from "./dialogshow";
+export default {
+  mixins: [form],
+  components: {
+    dialogShow,
+  },
+  data() {
+    return {
+      // 遮罩层
+      loading: true,
+      // 弹出层标题
+      title: "考核目标",
+      // 是否显示弹出层
+      open: false,
+      toString: [
+        "assessmentType",
+        "assessmentScope",
+        "compareScope",
+        "periodType",
+        "month",
+        "halfYear",
+        "halfYear",
+        "quarter",
+      ],
+      // 表单校验
+      rules: {
+        year: [{ required: true, message: "请输入年", trigger: "blur" }],
+        month: [{ required: true, message: "请输入月", trigger: "blur" }],
+      },
+    };
+  },
+
+  methods: {
+    /** 编辑 */
+    edit(row) {
+      this.reset();
+      this.query = { id: row.id };
+      this.urls.currUrl = "perform/perpose/edit";
+      this.getData();
+      this.pageInfo.type = "edit";
+      this.title = "修改考核目标";
+    },
+    /** 新增 */
+    add(row) {
+      this.reset();
+      this.urls.currUrl = "perform/perpose/add";
+      this.getData();
+      this.pageInfo.type = "add";
+      this.title = "新增考核目标";
+    },
+    /** 查看*/
+    view(row) {
+      this.reset();
+      this.query = { id: row.id };
+      this.urls.currUrl = "perform/perpose/view";
+      this.getData();
+      this.pageInfo.type = "view";
+      this.title = "考核目标详细";
+    },
+    /**取消按钮 */
+    cancel() {
+      this.open = false;
+    },
+    /**获取数据后弹框 */
+    afterRender(data) {
+      this.open = true;
+    },
+
+    afterSubmit(data) {
+      this.open = false;
+      this.$emit("ok");
+    },
+
+    // 表单重置
+    reset() {
+      this.form = {
+        ownerId: null,
+        ownerName: "",
+        staffId: null,
+        assessmentType: null,
+        assessmentScope: 1,
+        compareScope: 1,
+        ratio: 0.0,
+        periodType: 1,
+        year: null,
+        month: null,
+        halfYear: 1,
+        halfYear: 1,
+        quarter: 1,
+        leaders: "",
+        leaderMobiles: "",
+        remark: "",
+      };
+      this.resetForm("form");
+    },
+    resetForm(refName) {
+      if (this.$refs[refName]) {
+        this.$refs[refName].resetFields();
+      }
+    },
+  },
+};
+</script>

attendance-performance-manager-ui/admin/src/views/staff/perform/stat/list(原绩效目标).vue

+<template>
+    <div class="page">
+        <LayoutTable :data="tableData" :config="tableConfig">
+                    </LayoutTable>
+
+
+        <drawer-show ref="drawerform" @ok="getData" />
+    </div>
+</template>
+
+<script>
+    /** 表单弹出框模式需引入 */
+    import drawerShow from "./drawershow";
+    import table from "@/assets/mixins/table";
+    export default {
+        name: "StaffPerformStatList",
+        components: {
+            drawerShow
+},
+        mixins: [table],
+        created() {
+        },
+        methods: {
+            /** 重写新增方法 */
+            toAdd(row) {
+                this.$refs.drawerform.add(row);
+            },
+            /** 重写编辑方法 */
+            toEdit(row) {
+                this.$refs.drawerform.edit(row);
+            },
+            /** 重写查看方法 */
+            toView(row) {
+                this.$refs.drawerform.view(row);
+            },
+
+        },
+        data() {
+            return {
+                config: {
+                  isshowTabPane:true,
+                    search: [
+                    ],
+                    columns: [
+                        {type: "selection", width: 60},
+                        {type: "index",label: "序号",width: 50},
+
+                        {label: "部门名称", prop: "deptName"},
+
+                        {label: "考勤绩效指标增加分数", prop: "attendScoreAdd", formatter: this.formatter},
+
+                        {label: "考勤绩效指标扣减分数", prop: "attendScoreSub", formatter: this.formatter},
+
+                        {label: "评价绩效指标增加分数", prop: "assessScoreAdd", formatter: this.formatter},
+
+                        {label: "评价绩效指标扣减分数", prop: "assessScoreSub", formatter: this.formatter},
+
+                        {label: "办件绩效指标增加分数", prop: "workScoreAdd", formatter: this.formatter},
+
+                        {label: "办件绩效指标扣减分数", prop: "workScoreSub", formatter: this.formatter},
+
+                        {label: "效能绩效指标增加分数", prop: "effectScoreAdd", formatter: this.formatter},
+
+                        {label: "效能绩效指标扣减分数", prop: "effectScoreSub", formatter: this.formatter},
+
+                        {label: "其它绩效指标增加分数", prop: "otherScoreAdd", formatter: this.formatter},
+
+                        {label: "其它绩效指标扣减分数", prop: "otherScoreSub", formatter: this.formatter},
+                        {
+                            label: "操作",
+                            width: 240,
+                            formatter: row => {
+                                return (
+                                    <table-buttons noAdd row={row} onEdit={this.toEdit} onView={this.toView} onDel={this.toDel} />
+                            );
+                            }
+                        }
+                    ]
+                }
+            };
+        }
+    };
+</script>

attendance-performance-manager-ui/admin/src/views/staff/perform/stat/list.vue

 <template>
   <div class="page">
-        <LayoutTable :data="tableData" :config="tableConfig">
-                    </LayoutTable>
-
-
-        <drawer-show ref="drawerform" @ok="getData" />
+    <el-tabs v-model="activeName" @tab-click="handleClick">
+      <el-tab-pane label="目标看板" name="1">
+        <div class="content">
+          <div class="top">
+            <el-radio-group v-model="type">
+              <el-radio-button label="1">按部门</el-radio-button>
+              <el-radio-button label="2">按个人</el-radio-button>
+            </el-radio-group>
+          </div>
+          <div class="mid">
+            <div class="mid_top">
+              <div class="jixiaozongfen">
+                <bar-charts
+                  :title="'绩效总分排名'"
+                  :id="'jixiaozongfen'"
+                  :legendName="'绩效总分'"
+                  :styleObj="{ width: '100%', height: '300px' }"
+                />
+              </div>
+              <div class="jixiaopingjunfen">
+                <line-charts
+                  :title="'绩效平均分排名'"
+                  :id="'jixiaopingjunfen'"
+                  :legendName="'绩效平均分'"
+                  :styleObj="{ width: '100%', height: '300px' }"
+                />
+              </div>
+            </div>
+            <div class="mid_down">
+              <div class="top_10 box">
+                <bar-charts
+                  :title="'部门加分排名TOP10'"
+                  :id="'top_10'"
+                  :legendName="'部门加分分值'"
+                  :styleObj="{ width: '100%', height: '300px' }"
+                />
+              </div>
+              <div class="jiafen box">
+                <pie-charts
+                  :title="'部门加分整体分布'"
+                  :id="'jiafen'"
+                  :legendName="'部门加分'"
+                  :styleObj="{ width: '100%', height: '300px' }"
+                />
+              </div>
+              <div class="koufen_10 box">
+                <bar-charts
+                  :title="'部门扣分排名TOP10'"
+                  :id="'koufen_10'"
+                  :legendName="'部门扣分分值'"
+                  :styleObj="{ width: '100%', height: '300px' }"
+                />
+              </div>
+              <div class="koufen box">
+                <pie-charts
+                  :title="'部门扣分整体分布'"
+                  :id="'koufen'"
+                  :legendName="'部门扣分'"
+                  :styleObj="{ width: '100%', height: '300px' }"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </el-tab-pane>
+      <el-tab-pane label="目标对齐" name="2">
+        <div class="content">
+          <div class="top search_top">
+            <el-radio-group v-model="type">
+              <el-radio-button label="1">按部门</el-radio-button>
+              <el-radio-button label="2">按个人</el-radio-button>
+            </el-radio-group>
+            <div class="search_box">
+              <el-select v-model="value" placeholder="请选择">
+                <el-option
+                  v-for="item in options"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+                >
+                </el-option>
+              </el-select>
+              <el-select
+                v-model="dateValue"
+                placeholder="请选择"
+                style="margin: 0 10px;"
+              >
+                <el-option
+                  v-for="item in optionsMonths"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+                >
+                </el-option>
+              </el-select>
+              <el-button type="primary">搜索</el-button>
+            </div>
+          </div>
+          <div class="bar_content">
+            <bar-charts
+              :title="
+                `${type == 1 ? '各部门' : '个人'}${dateValue}月旷工率对齐情况`
+              "
+              :id="'bar_content'"
+              :legendName="'旷工率'"
+              :styleObj="{ width: '1800px', height: '650px' }"
+            />
+          </div>
+        </div>
+      </el-tab-pane>
+      <el-tab-pane label="目标管理" name="3">
+        <div class="content">
+          <div class="top">
+            <el-radio-group v-model="type">
+              <el-radio-button label="1">按部门</el-radio-button>
+              <el-radio-button label="2">按个人</el-radio-button>
+            </el-radio-group>
+            <el-button type="primary" style="margin: 0 20px;" @click="addGoal">
+              + 创建目标</el-button
+            >
+          </div>
+          <div class="mid_content">
+            <div class="goal_box" v-for="(val, i) in dataList" :key="i">
+              <div class="goal_title">
+                <img src="../../../../assets/images/u17641.svg" alt="" />
+                <span>
+                  旷工率不高于10%
+                </span>
+              </div>
+              <p class="goal_txt">
+                <span>{{ type == 1 ? "目标部门：" : "目标个人：" }}</span
+                ><span>{{
+                  type == 1 ? "全部部门" : "张三、李四、王武、陈真"
+                }}</span>
+              </p>
+              <p class="goal_txt">
+                <span>周期：</span><span>2023年/全年</span>
+              </p>
+              <p class="goal_txt">
+                <span>负责人：</span><span>张三、李四、王武 </span>
+              </p>
+              <p class="goal_txt">
+                <span>最近更新：</span><span>2023-05-11 10:00:00</span>
+              </p>
+              <p class="goal_txt"><span>更新人员：</span><span>言若海</span></p>
+              <div class="button_box">
+                <el-button
+                  type="primary"
+                  style="width: 150px;"
+                  plain
+                  @click="hanleEdit(val)"
+                  >编辑</el-button
+                >
+                <el-button
+                  type="danger"
+                  style="width: 150px;"
+                  plain
+                  @click="hanleDel(val)"
+                  >删除</el-button
+                >
+              </div>
+            </div>
+          </div>
+        </div>
+      </el-tab-pane>
+    </el-tabs>
+    <dialog-show ref="dialogform" @ok="getData" />
   </div>
 </template>
 
 <script>
-    /** 表单弹出框模式需引入 */
-    import drawerShow from "./drawershow";
-    import table from "@/assets/mixins/table";
-    export default {
-        name: "StaffPerformStatList",
+import BarCharts from "./components/BarCharts.vue";
+import LineCharts from "./components/LineCharts.vue";
+import PieCharts from "./components/PieCharts.vue";
+import dialogShow from "./dialogshow";
+
+export default {
   components: {
-            drawerShow
-},
-        mixins: [table],
+    BarCharts,
+    PieCharts,
+    LineCharts,
+    dialogShow,
+  },
+  name: "StaffPerformStatList",
+
   created() {
+    this.getData();
   },
   methods: {
-            /** 重写新增方法 */
-            toAdd(row) {
-                this.$refs.drawerform.add(row);
+    handleClick(tab, event) {
+      console.log(tab, event);
     },
-            /** 重写编辑方法 */
-            toEdit(row) {
-                this.$refs.drawerform.edit(row);
+    addGoal() {
+      this.$refs.dialogform.add();
     },
-            /** 重写查看方法 */
-            toView(row) {
-                this.$refs.drawerform.view(row);
+    /** 编辑方法 */
+    hanleEdit(row) {
+      this.$refs.dialogform.edit(row);
+    },
+    hanleDel(val) {
+      this.$get("/perform/perpose/delete", { id: val.id }).then((res) => {
+        this.$message.success(res.msg);
+        this.getData();
+      });
+    },
+    getData() {
+      this.$post("/perform/perpose/list").then((res) => {
+        console.log(res);
+        if (res.code == 1) {
+          this.dataList = res.data.data;
+        } else {
+          this.dataList = [];
+        }
+      });
     },
-
   },
   data() {
     return {
-                config: {
-                  isshowTabPane:true,
-                    search: [
+      activeName: "1",
+      type: "1",
+      dateValue: "1",
+      options: [
+        {
+          value: "1",
+          label: "旷工率",
+        },
+        {
+          value: "2",
+          label: "缺卡率",
+        },
+        {
+          value: "3",
+          label: "迟到率",
+        },
+        {
+          value: "4",
+          label: "早退率",
+        },
+        {
+          value: "5",
+          label: "请假率",
+        },
+        {
+          value: "6",
+          label: "离岗率",
+        },
+        {
+          value: "7",
+          label: "睡觉率",
+        },
+        {
+          value: "8",
+          label: "玩手机率",
+        },
+        {
+          value: "9",
+          label: "办件超期率",
+        },
+        {
+          value: "10",
+          label: "差评率",
+        },
       ],
-                    columns: [
-                        {type: "selection", width: 60},
-                        {type: "index",label: "序号",width: 50},
-
-                        {label: "部门名称", prop: "deptName"},
-
-                        {label: "考勤绩效指标增加分数", prop: "attendScoreAdd", formatter: this.formatter},
-
-                        {label: "考勤绩效指标扣减分数", prop: "attendScoreSub", formatter: this.formatter},
-
-                        {label: "评价绩效指标增加分数", prop: "assessScoreAdd", formatter: this.formatter},
-
-                        {label: "评价绩效指标扣减分数", prop: "assessScoreSub", formatter: this.formatter},
-
-                        {label: "办件绩效指标增加分数", prop: "workScoreAdd", formatter: this.formatter},
-
-                        {label: "办件绩效指标扣减分数", prop: "workScoreSub", formatter: this.formatter},
-
-                        {label: "效能绩效指标增加分数", prop: "effectScoreAdd", formatter: this.formatter},
-
-                        {label: "效能绩效指标扣减分数", prop: "effectScoreSub", formatter: this.formatter},
-
-                        {label: "其它绩效指标增加分数", prop: "otherScoreAdd", formatter: this.formatter},
-
-                        {label: "其它绩效指标扣减分数", prop: "otherScoreSub", formatter: this.formatter},
+      optionsMonths: [
+        {
+          value: "1",
+          label: "1月",
+        },
+        {
+          value: "2",
+          label: "2月",
+        },
+        {
+          value: "3",
+          label: "3月",
+        },
+        {
+          value: "4",
+          label: "4月",
+        },
+        {
+          value: "5",
+          label: "5月",
+        },
+        {
+          value: "6",
+          label: "6月",
+        },
+        {
+          value: "7",
+          label: "7月",
+        },
+        {
+          value: "8",
+          label: "8月",
+        },
+        {
+          value: "9",
+          label: "9月",
+        },
+        {
+          value: "10",
+          label: "10月",
+        },
+        {
+          value: "11",
+          label: "11月",
+        },
         {
-                            label: "操作",
-                            width: 240,
-                            formatter: row => {
-                                return (
-                                    <table-buttons noAdd row={row} onEdit={this.toEdit} onView={this.toView} onDel={this.toDel} />
-                            );
+          value: "12",
+          label: "12月",
+        },
+      ],
+      value: "",
+      dataList: [],
+    };
+  },
+};
+</script>
+<style lang="less" scoped>
+.page {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  /deep/.el-tabs__item {
+    width: 120px;
+    font-size: 18px;
+    text-align: center;
   }
+  .content {
+    width: 100%;
+    height: 100%;
+    .search_top {
+      width: 100%;
+      height: 1000%;
+      display: flex;
+      justify-content: space-between;
     }
-                    ]
+    /deep/.el-radio-button {
+      width: 150px;
+      text-align: center;
+      border: 1px solid #eee;
     }
-            };
+    /deep/.el-radio-button__inner {
+      width: 150px;
     }
-    };
-</script>
+    /deep/.el-radio-button__orig-radio:checked + .el-radio-button__inner {
+      width: 150px;
+      border: none;
+      background: #1890ff;
+      color: #fff;
+      border: 1px solid #eee;
+    }
+    .top {
+      width: 100%;
+      height: 60px;
+    }
+    .mid {
+      width: 100%;
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+      .mid_top {
+        width: 100%;
+        height: 300px;
+        display: flex;
+        justify-content: space-between;
+        .jixiaozongfen,
+        .jixiaopingjunfen {
+          width: 48%;
+          height: 100%;
+        }
+      }
+      .mid_down {
+        width: 100%;
+        height: 380px;
+        display: flex;
+        justify-content: space-evenly;
+        padding-top: 50px;
+
+        .box {
+          width: 25%;
+          height: 100%;
+        }
+      }
+    }
+    .mid_content,
+    .bar_content {
+      width: 100%;
+      height: 700px;
+      overflow: hidden;
+    }
+    .mid_content {
+      overflow-y: auto;
+      display: flex;
+      flex-wrap: wrap;
+      .goal_box {
+        width: 435px;
+        height: 238px;
+        background: inherit;
+        background-color: rgba(255, 255, 255, 1);
+        border: none;
+        border-radius: 8px;
+        box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.117647058823529);
+        -moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.117647058823529);
+        -webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.117647058823529);
+        margin: 0 20px 20px 0;
+        padding: 20px;
+        .goal_title {
+          width: 100%;
+          display: flex;
+          align-items: center;
+          img {
+            margin-right: 10px;
+          }
+        }
+        .goal_txt {
+          font-family: "微软雅黑", sans-serif;
+          font-weight: 400;
+          font-style: normal;
+          font-size: 12px;
+          color: #666666;
+          width: 100%;
+          margin: 10px 0;
+        }
+        .button_box {
+          width: 100%;
+          display: flex;
+          justify-content: space-evenly;
+          align-items: center;
+        }
+      }
+    }
+  }
+}
+</style>

attendance-performance-manager-ui/admin/src/views/staff/perform/summary/list.vue

@@ -3,23 +3,21 @@
     <LayoutTable :data="tableData" notAdd notDel :config="tableConfig">
     </LayoutTable>
 
-
     <dialog-show ref="dialogform" @ok="getData" />
   </div>
 </template>
 
 <script>
-    /** 表单弹出框模式需引入 */
-    import dialogShow from "./dialogshow";
-    import table from "@/assets/mixins/table";
-    export default {
+/** 表单弹出框模式需引入 */
+import dialogShow from "./dialogshow";
+import table from "@/assets/mixins/table";
+export default {
   name: "StaffPerformSummaryList",
   components: {
-            dialogShow
-},
-        mixins: [table],
-        created() {
+    dialogShow,
   },
+  mixins: [table],
+  created() {},
   methods: {
     /** 重写新增方法 */
     toAdd(row) {
@@ -33,67 +31,81 @@
     toView(row) {
       this.$refs.dialogform.view(row);
     },
-
   },
   data() {
     return {
       config: {
-                  isshowTabPane:true,
+        isshowTabPane: true,
         search: [
           {
             name: "createTimeStart",
             type: "date",
-                        label: "月份"
+            label: "月份",
           },
 
           {
             name: "deptId",
             type: "select",
-                        label: "所属部门"
+            label: "所属部门",
           },
 
           {
             name: "staffName",
             type: "text",
-                        label: "员工姓名"
+            label: "员工姓名",
           },
-
         ],
         columns: [
-                        {type: "selection", width: 60},
-                        {type: "index",label: "序号",width: 50},
+          { type: "selection", width: 60 },
+          { type: "index", label: "序号", width: 50 },
 
-                      {label: "姓名", prop: "staffName"},
+          { label: "姓名", prop: "staffName" },
 
-                        {label: "工号", prop: "workNum"},
+          { label: "工号", prop: "workNum" },
 
-                        {label: "所属部门", prop: "deptName"},
+          { label: "所属部门", prop: "deptName" },
 
-                        {label: "考勤绩效", prop: "attendScore", formatter: this.formatter},
+          { label: "考勤绩效", prop: "attendScore", formatter: this.formatter },
 
-                        {label: "评价绩效", prop: "assessScore", formatter: this.formatter},
+          { label: "评价绩效", prop: "assessScore", formatter: this.formatter },
 
-                        {label: "办件绩效", prop: "workScore", formatter: this.formatter},
+          { label: "办件绩效", prop: "workScore", formatter: this.formatter },
 
-                        {label: "效能绩效", prop: "effectScore", formatter: this.formatter},
+          { label: "效能绩效", prop: "effectScore", formatter: this.formatter },
 
-                        {label: "其它绩效", prop: "otherScore", formatter: this.formatter},
+          { label: "其它绩效", prop: "otherScore", formatter: this.formatter },
 
-                        {label: "累计异常分数", prop: "errorScore", formatter: this.formatter},
+          {
+            label: "累计异常分数",
+            prop: "errorScore",
+            formatter: this.formatter,
+          },
 
-                        {label: "本月得分数", prop: "totalScore", formatter: this.formatter},
+          {
+            label: "本月得分数",
+            prop: "totalScore",
+            formatter: this.formatter,
+          },
           {
             label: "操作",
             width: 240,
-                            formatter: row => {
+            formatter: (row) => {
               return (
-                                    <table-buttons noAdd noEdit noDel row={row} onEdit={this.toEdit} onView={this.toView} onDel={this.toDel} />
+                <table-buttons
+                  noAdd
+                  noEdit
+                  noDel
+                  row={row}
+                  onEdit={this.toEdit}
+                  onView={this.toView}
+                  onDel={this.toDel}
+                />
               );
-                            }
-                        }
-                    ]
-                }
-            };
-        }
+            },
+          },
+        ],
+      },
     };
+  },
+};
 </script>

attendance-performance-manager-ui/admin/vue.config.js

@@ -17,8 +17,8 @@ module.exports = {
 		hot: true,//自动保存
 		proxy: {
 			'/attendance': {
-				//target: 'http://192.168.0.98:11039',
-				target: 'http://localhost:17500',
+				target: 'http://192.168.0.98:11039',
+				// target: 'http://localhost:17500',
 				changeOrigin: true,
 				secure: false,
 				cookieDomainRewrite: 'localhost',

attendance-performance-manager-ui/admin/yarn.lock

@@ -3665,8 +3665,8 @@
   "version" "1.1.3"
 
 "echarts@^4.8.0", "echarts@^4.9.0", "echarts@>3.0.0":
-  "integrity" "sha1-qbm6oD8Doqcx5jQMVb77V6nhNH0="
-  "resolved" "https://registry.nlark.com/echarts/download/echarts-4.9.0.tgz"
+  "integrity" "sha512-+ugizgtJ+KmsJyyDPxaw2Br5FqzuBnyOWwcxPKO6y0gc5caYcfnEUIlNStx02necw8jmKmTafmpHhGo4XDtEIA=="
+  "resolved" "https://registry.npmjs.org/echarts/-/echarts-4.9.0.tgz"
   "version" "4.9.0"
   dependencies:
     "zrender" "4.3.2"