新绩效系统工作台，考核模板流程节点设置

src/App.vue

@@ -31,6 +31,7 @@
   }
 </script>
 <style>
+  @import "assets/css/animate.css";
   /* 解决element-ui的table表格控件表头与内容列不对齐问题 */
   .el-table th.gutter{
     display: table-cell!important;

src/assets/css/animate.css

@@ -0,0 +1,3612 @@
+@charset "UTF-8";
+
+@-webkit-keyframes bounce {
+
+	from,
+	20%,
+	53%,
+	80%,
+	to {
+		-webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
+		animation-timing-function: cubic-bezier(.215, .61, .355, 1);
+		-webkit-transform: translate3d(0, 0, 0);
+		transform: translate3d(0, 0, 0)
+	}
+
+	40%,
+	43% {
+		-webkit-animation-timing-function: cubic-bezier(.755, .05, .855, .06);
+		animation-timing-function: cubic-bezier(.755, .05, .855, .06);
+		-webkit-transform: translate3d(0, -30px, 0);
+		transform: translate3d(0, -30px, 0)
+	}
+
+	70% {
+		-webkit-animation-timing-function: cubic-bezier(.755, .05, .855, .06);
+		animation-timing-function: cubic-bezier(.755, .05, .855, .06);
+		-webkit-transform: translate3d(0, -15px, 0);
+		transform: translate3d(0, -15px, 0)
+	}
+
+	90% {
+		-webkit-transform: translate3d(0, -4px, 0);
+		transform: translate3d(0, -4px, 0)
+	}
+}
+
+@keyframes bounce {
+
+	from,
+	20%,
+	53%,
+	80%,
+	to {
+		-webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
+		animation-timing-function: cubic-bezier(.215, .61, .355, 1);
+		-webkit-transform: translate3d(0, 0, 0);
+		transform: translate3d(0, 0, 0)
+	}
+
+	40%,
+	43% {
+		-webkit-animation-timing-function: cubic-bezier(.755, .05, .855, .06);
+		animation-timing-function: cubic-bezier(.755, .05, .855, .06);
+		-webkit-transform: translate3d(0, -30px, 0);
+		transform: translate3d(0, -30px, 0)
+	}
+
+	70% {
+		-webkit-animation-timing-function: cubic-bezier(.755, .05, .855, .06);
+		animation-timing-function: cubic-bezier(.755, .05, .855, .06);
+		-webkit-transform: translate3d(0, -15px, 0);
+		transform: translate3d(0, -15px, 0)
+	}
+
+	90% {
+		-webkit-transform: translate3d(0, -4px, 0);
+		transform: translate3d(0, -4px, 0)
+	}
+}
+
+.bounce {
+	-webkit-animation-name: bounce;
+	animation-name: bounce;
+	-webkit-transform-origin: center bottom;
+	transform-origin: center bottom
+}
+
+@-webkit-keyframes flash {
+
+	from,
+	50%,
+	to {
+		opacity: 1
+	}
+
+	25%,
+	75% {
+		opacity: 0
+	}
+}
+
+@keyframes flash {
+
+	from,
+	50%,
+	to {
+		opacity: 1
+	}
+
+	25%,
+	75% {
+		opacity: 0
+	}
+}
+
+.flash {
+	-webkit-animation-name: flash;
+	animation-name: flash
+}
+
+@-webkit-keyframes pulse {
+	from {
+		-webkit-transform: scale3d(1, 1, 1);
+		transform: scale3d(1, 1, 1)
+	}
+
+	50% {
+		-webkit-transform: scale3d(1.05, 1.05, 1.05);
+		transform: scale3d(1.05, 1.05, 1.05)
+	}
+
+	to {
+		-webkit-transform: scale3d(1, 1, 1);
+		transform: scale3d(1, 1, 1)
+	}
+}
+
+@keyframes pulse {
+	from {
+		-webkit-transform: scale3d(1, 1, 1);
+		transform: scale3d(1, 1, 1)
+	}
+
+	50% {
+		-webkit-transform: scale3d(1.05, 1.05, 1.05);
+		transform: scale3d(1.05, 1.05, 1.05)
+	}
+
+	to {
+		-webkit-transform: scale3d(1, 1, 1);
+		transform: scale3d(1, 1, 1)
+	}
+}
+
+.pulse {
+	-webkit-animation-name: pulse;
+	animation-name: pulse
+}
+
+@-webkit-keyframes rubberBand {
+	from {
+		-webkit-transform: scale3d(1, 1, 1);
+		transform: scale3d(1, 1, 1)
+	}
+
+	30% {
+		-webkit-transform: scale3d(1.25, .75, 1);
+		transform: scale3d(1.25, .75, 1)
+	}
+
+	40% {
+		-webkit-transform: scale3d(.75, 1.25, 1);
+		transform: scale3d(.75, 1.25, 1)
+	}
+
+	50% {
+		-webkit-transform: scale3d(1.15, .85, 1);
+		transform: scale3d(1.15, .85, 1)
+	}
+
+	65% {
+		-webkit-transform: scale3d(.95, 1.05, 1);
+		transform: scale3d(.95, 1.05, 1)
+	}
+
+	75% {
+		-webkit-transform: scale3d(1.05, .95, 1);
+		transform: scale3d(1.05, .95, 1)
+	}
+
+	to {
+		-webkit-transform: scale3d(1, 1, 1);
+		transform: scale3d(1, 1, 1)
+	}
+}
+
+@keyframes rubberBand {
+	from {
+		-webkit-transform: scale3d(1, 1, 1);
+		transform: scale3d(1, 1, 1)
+	}
+
+	30% {
+		-webkit-transform: scale3d(1.25, .75, 1);
+		transform: scale3d(1.25, .75, 1)
+	}
+
+	40% {
+		-webkit-transform: scale3d(.75, 1.25, 1);
+		transform: scale3d(.75, 1.25, 1)
+	}
+
+	50% {
+		-webkit-transform: scale3d(1.15, .85, 1);
+		transform: scale3d(1.15, .85, 1)
+	}
+
+	65% {
+		-webkit-transform: scale3d(.95, 1.05, 1);
+		transform: scale3d(.95, 1.05, 1)
+	}
+
+	75% {
+		-webkit-transform: scale3d(1.05, .95, 1);
+		transform: scale3d(1.05, .95, 1)
+	}
+
+	to {
+		-webkit-transform: scale3d(1, 1, 1);
+		transform: scale3d(1, 1, 1)
+	}
+}
+
+.rubberBand {
+	-webkit-animation-name: rubberBand;
+	animation-name: rubberBand
+}
+
+@-webkit-keyframes shake {
+
+	from,
+	to {
+		-webkit-transform: translate3d(0, 0, 0);
+		transform: translate3d(0, 0, 0)
+	}
+
+	10%,
+	30%,
+	50%,
+	70%,
+	90% {
+		-webkit-transform: translate3d(-10px, 0, 0);
+		transform: translate3d(-10px, 0, 0)
+	}
+
+	20%,
+	40%,
+	60%,
+	80% {
+		-webkit-transform: translate3d(10px, 0, 0);
+		transform: translate3d(10px, 0, 0)
+	}
+}
+
+@keyframes shake {
+
+	from,
+	to {
+		-webkit-transform: translate3d(0, 0, 0);
+		transform: translate3d(0, 0, 0)
+	}
+
+	10%,
+	30%,
+	50%,
+	70%,
+	90% {
+		-webkit-transform: translate3d(-10px, 0, 0);
+		transform: translate3d(-10px, 0, 0)
+	}
+
+	20%,
+	40%,
+	60%,
+	80% {
+		-webkit-transform: translate3d(10px, 0, 0);
+		transform: translate3d(10px, 0, 0)
+	}
+}
+
+.shake {
+	-webkit-animation-name: shake;
+	animation-name: shake
+}
+
+@-webkit-keyframes headShake {
+	0% {
+		-webkit-transform: translateX(0);
+		transform: translateX(0)
+	}
+
+	6.5% {
+		-webkit-transform: translateX(-6px) rotateY(-9deg);
+		transform: translateX(-6px) rotateY(-9deg)
+	}
+
+	18.5% {
+		-webkit-transform: translateX(5px) rotateY(7deg);
+		transform: translateX(5px) rotateY(7deg)
+	}
+
+	31.5% {
+		-webkit-transform: translateX(-3px) rotateY(-5deg);
+		transform: translateX(-3px) rotateY(-5deg)
+	}
+
+	43.5% {
+		-webkit-transform: translateX(2px) rotateY(3deg);
+		transform: translateX(2px) rotateY(3deg)
+	}
+
+	50% {
+		-webkit-transform: translateX(0);
+		transform: translateX(0)
+	}
+}
+
+@keyframes headShake {
+	0% {
+		-webkit-transform: translateX(0);
+		transform: translateX(0)
+	}
+
+	6.5% {
+		-webkit-transform: translateX(-6px) rotateY(-9deg);
+		transform: translateX(-6px) rotateY(-9deg)
+	}
+
+	18.5% {
+		-webkit-transform: translateX(5px) rotateY(7deg);
+		transform: translateX(5px) rotateY(7deg)
+	}
+
+	31.5% {
+		-webkit-transform: translateX(-3px) rotateY(-5deg);
+		transform: translateX(-3px) rotateY(-5deg)
+	}
+
+	43.5% {
+		-webkit-transform: translateX(2px) rotateY(3deg);
+		transform: translateX(2px) rotateY(3deg)
+	}
+
+	50% {
+		-webkit-transform: translateX(0);
+		transform: translateX(0)
+	}
+}
+
+.headShake {
+	-webkit-animation-timing-function: ease-in-out;
+	animation-timing-function: ease-in-out;
+	-webkit-animation-name: headShake;
+	animation-name: headShake
+}
+
+@-webkit-keyframes swing {
+	20% {
+		-webkit-transform: rotate3d(0, 0, 1, 15deg);
+		transform: rotate3d(0, 0, 1, 15deg)
+	}
+
+	40% {
+		-webkit-transform: rotate3d(0, 0, 1, -10deg);
+		transform: rotate3d(0, 0, 1, -10deg)
+	}
+
+	60% {
+		-webkit-transform: rotate3d(0, 0, 1, 5deg);
+		transform: rotate3d(0, 0, 1, 5deg)
+	}
+
+	80% {
+		-webkit-transform: rotate3d(0, 0, 1, -5deg);
+		transform: rotate3d(0, 0, 1, -5deg)
+	}
+
+	to {
+		-webkit-transform: rotate3d(0, 0, 1, 0deg);
+		transform: rotate3d(0, 0, 1, 0deg)
+	}
+}
+
+@keyframes swing {
+	20% {
+		-webkit-transform: rotate3d(0, 0, 1, 15deg);
+		transform: rotate3d(0, 0, 1, 15deg)
+	}
+
+	40% {
+		-webkit-transform: rotate3d(0, 0, 1, -10deg);
+		transform: rotate3d(0, 0, 1, -10deg)
+	}
+
+	60% {
+		-webkit-transform: rotate3d(0, 0, 1, 5deg);
+		transform: rotate3d(0, 0, 1, 5deg)
+	}
+
+	80% {
+		-webkit-transform: rotate3d(0, 0, 1, -5deg);
+		transform: rotate3d(0, 0, 1, -5deg)
+	}
+
+	to {
+		-webkit-transform: rotate3d(0, 0, 1, 0deg);
+		transform: rotate3d(0, 0, 1, 0deg)
+	}
+}
+
+.swing {
+	-webkit-transform-origin: top center;
+	transform-origin: top center;
+	-webkit-animation-name: swing;
+	animation-name: swing
+}
+
+@-webkit-keyframes tada {
+	from {
+		-webkit-transform: scale3d(1, 1, 1);
+		transform: scale3d(1, 1, 1)
+	}
+
+	10%,
+	20% {
+		-webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
+		transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg)
+	}
+
+	30%,
+	50%,
+	70%,
+	90% {
+		-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
+		transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg)
+	}
+
+	40%,
+	60%,
+	80% {
+		-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
+		transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg)
+	}
+
+	to {
+		-webkit-transform: scale3d(1, 1, 1);
+		transform: scale3d(1, 1, 1)
+	}
+}
+
+@keyframes tada {
+	from {
+		-webkit-transform: scale3d(1, 1, 1);
+		transform: scale3d(1, 1, 1)
+	}
+
+	10%,
+	20% {
+		-webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
+		transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg)
+	}
+
+	30%,
+	50%,
+	70%,
+	90% {
+		-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
+		transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg)
+	}
+
+	40%,
+	60%,
+	80% {
+		-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
+		transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg)
+	}
+
+	to {
+		-webkit-transform: scale3d(1, 1, 1);
+		transform: scale3d(1, 1, 1)
+	}
+}
+
+.tada {
+	-webkit-animation-name: tada;
+	animation-name: tada
+}
+
+@-webkit-keyframes wobble {
+	from {
+		-webkit-transform: translate3d(0, 0, 0);
+		transform: translate3d(0, 0, 0)
+	}
+
+	15% {
+		-webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
+		transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg)
+	}
+
+	30% {
+		-webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
+		transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg)
+	}
+
+	45% {
+		-webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
+		transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg)
+	}
+
+	60% {
+		-webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
+		transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg)
+	}
+
+	75% {
+		-webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
+		transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg)
+	}
+
+	to {
+		-webkit-transform: translate3d(0, 0, 0);
+		transform: translate3d(0, 0, 0)
+	}
+}
+
+@keyframes wobble {
+	from {
+		-webkit-transform: translate3d(0, 0, 0);
+		transform: translate3d(0, 0, 0)
+	}
+
+	15% {
+		-webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
+		transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg)
+	}
+
+	30% {
+		-webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
+		transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg)
+	}
+
+	45% {
+		-webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
+		transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg)
+	}
+
+	60% {
+		-webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
+		transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg)
+	}
+
+	75% {
+		-webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
+		transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg)
+	}
+
+	to {
+		-webkit-transform: translate3d(0, 0, 0);
+		transform: translate3d(0, 0, 0)
+	}
+}
+
+.wobble {
+	-webkit-animation-name: wobble;
+	animation-name: wobble
+}
+
+@-webkit-keyframes jello {
+
+	from,
+	11.1%,
+	to {
+		-webkit-transform: translate3d(0, 0, 0);
+		transform: translate3d(0, 0, 0)
+	}
+
+	22.2% {
+		-webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
+		transform: skewX(-12.5deg) skewY(-12.5deg)
+	}
+
+	33.3% {
+		-webkit-transform: skewX(6.25deg) skewY(6.25deg);
+		transform: skewX(6.25deg) skewY(6.25deg)
+	}
+
+	44.4% {
+		-webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
+		transform: skewX(-3.125deg) skewY(-3.125deg)
+	}
+
+	55.5% {
+		-webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
+		transform: skewX(1.5625deg) skewY(1.5625deg)
+	}
+
+	66.6% {
+		-webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
+		transform: skewX(-0.78125deg) skewY(-0.78125deg)
+	}
+
+	77.7% {
+		-webkit-transform: skewX(0.390625deg) skewY(0.390625deg);
+		transform: skewX(0.390625deg) skewY(0.390625deg)
+	}
+
+	88.8% {
+		-webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
+		transform: skewX(-0.1953125deg) skewY(-0.1953125deg)
+	}
+}
+
+@keyframes jello {
+
+	from,
+	11.1%,
+	to {
+		-webkit-transform: translate3d(0, 0, 0);
+		transform: translate3d(0, 0, 0)
+	}
+
+	22.2% {
+		-webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
+		transform: skewX(-12.5deg) skewY(-12.5deg)
+	}
+
+	33.3% {
+		-webkit-transform: skewX(6.25deg) skewY(6.25deg);
+		transform: skewX(6.25deg) skewY(6.25deg)
+	}
+
+	44.4% {
+		-webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
+		transform: skewX(-3.125deg) skewY(-3.125deg)
+	}
+
+	55.5% {
+		-webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
+		transform: skewX(1.5625deg) skewY(1.5625deg)
+	}
+
+	66.6% {
+		-webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
+		transform: skewX(-0.78125deg) skewY(-0.78125deg)
+	}
+
+	77.7% {
+		-webkit-transform: skewX(0.390625deg) skewY(0.390625deg);
+		transform: skewX(0.390625deg) skewY(0.390625deg)
+	}
+
+	88.8% {
+		-webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
+		transform: skewX(-0.1953125deg) skewY(-0.1953125deg)
+	}
+}
+
+.jello {
+	-webkit-animation-name: jello;
+	animation-name: jello;
+	-webkit-transform-origin: center;
+	transform-origin: center
+}
+
+@-webkit-keyframes heartBeat {
+	0% {
+		-webkit-transform: scale(1);
+		transform: scale(1)
+	}
+
+	14% {
+		-webkit-transform: scale(1.3);
+		transform: scale(1.3)
+	}
+
+	28% {
+		-webkit-transform: scale(1);
+		transform: scale(1)
+	}
+
+	42% {
+		-webkit-transform: scale(1.3);
+		transform: scale(1.3)
+	}
+
+	70% {
+		-webkit-transform: scale(1);
+		transform: scale(1)
+	}
+}
+
+@keyframes heartBeat {
+	0% {
+		-webkit-transform: scale(1);
+		transform: scale(1)
+	}
+
+	14% {
+		-webkit-transform: scale(1.3);
+		transform: scale(1.3)
+	}
+
+	28% {
+		-webkit-transform: scale(1);
+		transform: scale(1)
+	}
+
+	42% {
+		-webkit-transform: scale(1.3);
+		transform: scale(1.3)
+	}
+
+	70% {
+		-webkit-transform: scale(1);
+		transform: scale(1)
+	}
+}
+
+.heartBeat {
+	-webkit-animation-name: heartBeat;
+	animation-name: heartBeat;
+	-webkit-animation-duration: 1.3s;
+	animation-duration: 1.3s;
+	-webkit-animation-timing-function: ease-in-out;
+	animation-timing-function: ease-in-out
+}
+
+@-webkit-keyframes bounceIn {
+
+	from,
+	20%,
+	40%,
+	60%,
+	80%,
+	to {
+		-webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
+		animation-timing-function: cubic-bezier(.215, .61, .355, 1)
+	}
+
+	0% {
+		opacity: 0;
+		-webkit-transform: scale3d(.3, .3, .3);
+		transform: scale3d(.3, .3, .3)
+	}
+
+	20% {
+		-webkit-transform: scale3d(1.1, 1.1, 1.1);
+		transform: scale3d(1.1, 1.1, 1.1)
+	}
+
+	40% {
+		-webkit-transform: scale3d(.9, .9, .9);
+		transform: scale3d(.9, .9, .9)
+	}
+
+	60% {
+		opacity: 1;
+		-webkit-transform: scale3d(1.03, 1.03, 1.03);
+		transform: scale3d(1.03, 1.03, 1.03)
+	}
+
+	80% {
+		-webkit-transform: scale3d(.97, .97, .97);
+		transform: scale3d(.97, .97, .97)
+	}
+
+	to {
+		opacity: 1;
+		-webkit-transform: scale3d(1, 1, 1);
+		transform: scale3d(1, 1, 1)
+	}
+}
+
+@keyframes bounceIn {
+
+	from,
+	20%,
+	40%,
+	60%,
+	80%,
+	to {
+		-webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
+		animation-timing-function: cubic-bezier(.215, .61, .355, 1)
+	}
+
+	0% {
+		opacity: 0;
+		-webkit-transform: scale3d(.3, .3, .3);
+		transform: scale3d(.3, .3, .3)
+	}
+
+	20% {
+		-webkit-transform: scale3d(1.1, 1.1, 1.1);
+		transform: scale3d(1.1, 1.1, 1.1)
+	}
+
+	40% {
+		-webkit-transform: scale3d(.9, .9, .9);
+		transform: scale3d(.9, .9, .9)
+	}
+
+	60% {
+		opacity: 1;
+		-webkit-transform: scale3d(1.03, 1.03, 1.03);
+		transform: scale3d(1.03, 1.03, 1.03)
+	}
+
+	80% {
+		-webkit-transform: scale3d(.97, .97, .97);
+		transform: scale3d(.97, .97, .97)
+	}
+
+	to {
+		opacity: 1;
+		-webkit-transform: scale3d(1, 1, 1);
+		transform: scale3d(1, 1, 1)
+	}
+}
+
+.bounceIn {
+	-webkit-animation-duration: 0.75s;
+	animation-duration: 0.75s;
+	-webkit-animation-name: bounceIn;
+	animation-name: bounceIn
+}
+
+@-webkit-keyframes bounceInDown {
+
+	from,
+	60%,
+	75%,
+	90%,
+	to {
+		-webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
+		animation-timing-function: cubic-bezier(.215, .61, .355, 1)
+	}
+
+	0% {
+		opacity: 0;
+		-webkit-transform: translate3d(0, -3000px, 0);
+		transform: translate3d(0, -3000px, 0)
+	}
+
+	60% {
+		opacity: 1;
+		-webkit-transform: translate3d(0, 25px, 0);
+		transform: translate3d(0, 25px, 0)
+	}
+
+	75% {
+		-webkit-transform: translate3d(0, -10px, 0);
+		transform: translate3d(0, -10px, 0)
+	}
+
+	90% {
+		-webkit-transform: translate3d(0, 5px, 0);
+		transform: translate3d(0, 5px, 0)
+	}
+
+	to {
+		-webkit-transform: translate3d(0, 0, 0);
+		transform: translate3d(0, 0, 0)
+	}
+}
+
+@keyframes bounceInDown {
+
+	from,
+	60%,
+	75%,
+	90%,
+	to {
+		-webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
+		animation-timing-function: cubic-bezier(.215, .61, .355, 1)
+	}
+
+	0% {
+		opacity: 0;
+		-webkit-transform: translate3d(0, -3000px, 0);
+		transform: translate3d(0, -3000px, 0)
+	}
+
+	60% {
+		opacity: 1;
+		-webkit-transform: translate3d(0, 25px, 0);
+		transform: translate3d(0, 25px, 0)
+	}
+
+	75% {
+		-webkit-transform: translate3d(0, -10px, 0);
+		transform: translate3d(0, -10px, 0)
+	}
+
+	90% {
+		-webkit-transform: translate3d(0, 5px, 0);
+		transform: translate3d(0, 5px, 0)
+	}
+
+	to {
+		-webkit-transform: translate3d(0, 0, 0);
+		transform: translate3d(0, 0, 0)
+	}
+}
+
+.bounceInDown {
+	-webkit-animation-name: bounceInDown;
+	animation-name: bounceInDown
+}
+
+@-webkit-keyframes bounceInLeft {
+
+	from,
+	60%,
+	75%,
+	90%,
+	to {
+		-webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
+		animation-timing-function: cubic-bezier(.215, .61, .355, 1)
+	}
+
+	0% {
+		opacity: 0;
+		-webkit-transform: translate3d(-3000px, 0, 0);
+		transform: translate3d(-3000px, 0, 0)
+	}
+
+	60% {
+		opacity: 1;
+		-webkit-transform: translate3d(25px, 0, 0);
+		transform: translate3d(25px, 0, 0)
+	}
+
+	75% {
+		-webkit-transform: translate3d(-10px, 0, 0);
+		transform: translate3d(-10px, 0, 0)
+	}
+
+	90% {
+		-webkit-transform: translate3d(5px, 0, 0);
+		transform: translate3d(5px, 0, 0)
+	}
+
+	to {
+		-webkit-transform: translate3d(0, 0, 0);
+		transform: translate3d(0, 0, 0)
+	}
+}
+
+@keyframes bounceInLeft {
+
+	from,
+	60%,
+	75%,
+	90%,
+	to {
+		-webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
+		animation-timing-function: cubic-bezier(.215, .61, .355, 1)
+	}
+
+	0% {
+		opacity: 0;
+		-webkit-transform: translate3d(-3000px, 0, 0);
+		transform: translate3d(-3000px, 0, 0)
+	}
+
+	60% {
+		opacity: 1;
+		-webkit-transform: translate3d(25px, 0, 0);
+		transform: translate3d(25px, 0, 0)
+	}
+
+	75% {
+		-webkit-transform: translate3d(-10px, 0, 0);
+		transform: translate3d(-10px, 0, 0)
+	}
+
+	90% {
+		-webkit-transform: translate3d(5px, 0, 0);
+		transform: translate3d(5px, 0, 0)
+	}
+
+	to {
+		-webkit-transform: translate3d(0, 0, 0);
+		transform: translate3d(0, 0, 0)
+	}
+}
+
+.bounceInLeft {
+	-webkit-animation-name: bounceInLeft;
+	animation-name: bounceInLeft
+}
+
+@-webkit-keyframes bounceInRight {
+
+	from,
+	60%,
+	75%,
+	90%,
+	to {
+		-webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
+		animation-timing-function: cubic-bezier(.215, .61, .355, 1)
+	}
+
+	from {
+		opacity: 0;
+		-webkit-transform: translate3d(3000px, 0, 0);
+		transform: translate3d(3000px, 0, 0)
+	}
+
+	60% {
+		opacity: 1;
+		-webkit-transform: translate3d(-25px, 0, 0);
+		transform: translate3d(-25px, 0, 0)
+	}
+
+	75% {
+		-webkit-transform: translate3d(10px, 0, 0);
+		transform: translate3d(10px, 0, 0)
+	}
+
+	90% {
+		-webkit-transform: translate3d(-5px, 0, 0);
+		transform: translate3d(-5px, 0, 0)
+	}
+
+	to {
+		-webkit-transform: translate3d(0, 0, 0);
+		transform: translate3d(0, 0, 0)
+	}
+}
+
+@keyframes bounceInRight {
+
+	from,
+	60%,
+	75%,
+	90%,
+	to {
+		-webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
+		animation-timing-function: cubic-bezier(.215, .61, .355, 1)
+	}
+
+	from {
+		opacity: 0;
+		-webkit-transform: translate3d(3000px, 0, 0);
+		transform: translate3d(3000px, 0, 0)
+	}
+
+	60% {
+		opacity: 1;
+		-webkit-transform: translate3d(-25px, 0, 0);
+		transform: translate3d(-25px, 0, 0)
+	}
+
+	75% {
+		-webkit-transform: translate3d(10px, 0, 0);
+		transform: translate3d(10px, 0, 0)
+	}
+
+	90% {
+		-webkit-transform: translate3d(-5px, 0, 0);
+		transform: translate3d(-5px, 0, 0)
+	}
+
+	to {
+		-webkit-transform: translate3d(0, 0, 0);
+		transform: translate3d(0, 0, 0)
+	}
+}
+
+.bounceInRight {
+	-webkit-animation-name: bounceInRight;
+	animation-name: bounceInRight
+}
+
+@-webkit-keyframes bounceInUp {
+
+	from,
+	60%,
+	75%,
+	90%,
+	to {
+		-webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
+		animation-timing-function: cubic-bezier(.215, .61, .355, 1)
+	}
+
+	from {
+		opacity: 0;
+		-webkit-transform: translate3d(0, 3000px, 0);
+		transform: translate3d(0, 3000px, 0)
+	}
+
+	60% {
+		opacity: 1;
+		-webkit-transform: translate3d(0, -20px, 0);
+		transform: translate3d(0, -20px, 0)
+	}
+
+	75% {
+		-webkit-transform: translate3d(0, 10px, 0);
+		transform: translate3d(0, 10px, 0)
+	}
+
+	90% {
+		-webkit-transform: translate3d(0, -5px, 0);
+		transform: translate3d(0, -5px, 0)
+	}
+
+	to {
+		-webkit-transform: translate3d(0, 0, 0);
+		transform: translate3d(0, 0, 0)
+	}
+}
+
+@keyframes bounceInUp {
+
+	from,
+	60%,
+	75%,
+	90%,
+	to {
+		-webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
+		animation-timing-function: cubic-bezier(.215, .61, .355, 1)
+	}
+
+	from {
+		opacity: 0;
+		-webkit-transform: translate3d(0, 3000px, 0);
+		transform: translate3d(0, 3000px, 0)
+	}
+
+	60% {
+		opacity: 1;
+		-webkit-transform: translate3d(0, -20px, 0);
+		transform: translate3d(0, -20px, 0)
+	}
+
+	75% {
+		-webkit-transform: translate3d(0, 10px, 0);
+		transform: translate3d(0, 10px, 0)
+	}
+
+	90% {
+		-webkit-transform: translate3d(0, -5px, 0);
+		transform: translate3d(0, -5px, 0)
+	}
+
+	to {
+		-webkit-transform: translate3d(0, 0, 0);
+		transform: translate3d(0, 0, 0)
+	}
+}
+
+.bounceInUp {
+	-webkit-animation-name: bounceInUp;
+	animation-name: bounceInUp
+}
+
+@-webkit-keyframes bounceOut {
+	20% {
+		-webkit-transform: scale3d(.9, .9, .9);
+		transform: scale3d(.9, .9, .9)
+	}
+
+	50%,
+	55% {
+		opacity: 1;
+		-webkit-transform: scale3d(1.1, 1.1, 1.1);
+		transform: scale3d(1.1, 1.1, 1.1)
+	}
+
+	to {
+		opacity: 0;
+		-webkit-transform: scale3d(.3, .3, .3);
+		transform: scale3d(.3, .3, .3)
+	}
+}
+
+@keyframes bounceOut {
+	20% {
+		-webkit-transform: scale3d(.9, .9, .9);
+		transform: scale3d(.9, .9, .9)
+	}
+
+	50%,
+	55% {
+		opacity: 1;
+		-webkit-transform: scale3d(1.1, 1.1, 1.1);
+		transform: scale3d(1.1, 1.1, 1.1)
+	}
+
+	to {
+		opacity: 0;
+		-webkit-transform: scale3d(.3, .3, .3);
+		transform: scale3d(.3, .3, .3)
+	}
+}
+
+.bounceOut {
+	-webkit-animation-duration: 0.75s;
+	animation-duration: 0.75s;
+	-webkit-animation-name: bounceOut;
+	animation-name: bounceOut
+}
+
+@-webkit-keyframes bounceOutDown {
+	20% {
+		-webkit-transform: translate3d(0, 10px, 0);
+		transform: translate3d(0, 10px, 0)
+	}
+
+	40%,
+	45% {
+		opacity: 1;
+		-webkit-transform: translate3d(0, -20px, 0);
+		transform: translate3d(0, -20px, 0)
+	}
+
+	to {
+		opacity: 0;
+		-webkit-transform: translate3d(0, 2000px, 0);
+		transform: translate3d(0, 2000px, 0)
+	}
+}
+
+@keyframes bounceOutDown {
+	20% {
+		-webkit-transform: translate3d(0, 10px, 0);
+		transform: translate3d(0, 10px, 0)
+	}
+
+	40%,
+	45% {
+		opacity: 1;
+		-webkit-transform: translate3d(0, -20px, 0);
+		transform: translate3d(0, -20px, 0)
+	}
+
+	to {
+		opacity: 0;
+		-webkit-transform: translate3d(0, 2000px, 0);
+		transform: translate3d(0, 2000px, 0)
+	}
+}
+
+.bounceOutDown {
+	-webkit-animation-name: bounceOutDown;
+	animation-name: bounceOutDown
+}
+
+@-webkit-keyframes bounceOutLeft {
+	20% {
+		opacity: 1;
+		-webkit-transform: translate3d(20px, 0, 0);
+		transform: translate3d(20px, 0, 0)
+	}
+
+	to {
+		opacity: 0;
+		-webkit-transform: translate3d(-2000px, 0, 0);
+		transform: translate3d(-2000px, 0, 0)
+	}
+}
+
+@keyframes bounceOutLeft {
+	20% {
+		opacity: 1;
+		-webkit-transform: translate3d(20px, 0, 0);
+		transform: translate3d(20px, 0, 0)
+	}
+
+	to {
+		opacity: 0;
+		-webkit-transform: translate3d(-2000px, 0, 0);
+		transform: translate3d(-2000px, 0, 0)
+	}
+}
+
+.bounceOutLeft {
+	-webkit-animation-name: bounceOutLeft;
+	animation-name: bounceOutLeft
+}
+
+@-webkit-keyframes bounceOutRight {
+	20% {
+		opacity: 1;
+		-webkit-transform: translate3d(-20px, 0, 0);
+		transform: translate3d(-20px, 0, 0)
+	}
+
+	to {
+		opacity: 0;
+		-webkit-transform: translate3d(2000px, 0, 0);
+		transform: translate3d(2000px, 0, 0)
+	}
+}
+
+@keyframes bounceOutRight {
+	20% {
+		opacity: 1;
+		-webkit-transform: translate3d(-20px, 0, 0);
+		transform: translate3d(-20px, 0, 0)
+	}
+
+	to {
+		opacity: 0;
+		-webkit-transform: translate3d(2000px, 0, 0);
+		transform: translate3d(2000px, 0, 0)
+	}
+}
+
+.bounceOutRight {
+	-webkit-animation-name: bounceOutRight;
+	animation-name: bounceOutRight
+}
+
+@-webkit-keyframes bounceOutUp {
+	20% {
+		-webkit-transform: translate3d(0, -10px, 0);
+		transform: translate3d(0, -10px, 0)
+	}
+
+	40%,
+	45% {
+		opacity: 1;
+		-webkit-transform: translate3d(0, 20px, 0);
+		transform: translate3d(0, 20px, 0)
+	}
+
+	to {
+		opacity: 0;
+		-webkit-transform: translate3d(0, -2000px, 0);
+		transform: translate3d(0, -2000px, 0)
+	}
+}
+
+@keyframes bounceOutUp {
+	20% {
+		-webkit-transform: translate3d(0, -10px, 0);
+		transform: translate3d(0, -10px, 0)
+	}
+
+	40%,
+	45% {
+		opacity: 1;
+		-webkit-transform: translate3d(0, 20px, 0);
+		transform: translate3d(0, 20px, 0)
+	}
+
+	to {
+		opacity: 0;
+		-webkit-transform: translate3d(0, -2000px, 0);
+		transform: translate3d(0, -2000px, 0)
+	}
+}
+
+.bounceOutUp {
+	-webkit-animation-name: bounceOutUp;
+	animation-name: bounceOutUp
+}
+
+@-webkit-keyframes fadeIn {
+	from {
+		opacity: 0
+	}
+
+	to {
+		opacity: 1
+	}
+}
+
+@keyframes fadeIn {
+	from {
+		opacity: 0
+	}
+
+	to {
+		opacity: 1
+	}
+}
+
+.fadeIn {
+	-webkit-animation-name: fadeIn;
+	animation-name: fadeIn
+}
+
+@-webkit-keyframes fadeInDown {
+	from {
+		opacity: 0;
+		-webkit-transform: translate3d(0, -100%, 0);
+		transform: translate3d(0, -100%, 0)
+	}
+
+	to {
+		opacity: 1;
+		-webkit-transform: translate3d(0, 0, 0);
+		transform: translate3d(0, 0, 0)
+	}
+}
+
+@keyframes fadeInDown {
+	from {
+		opacity: 0;
+		-webkit-transform: translate3d(0, -100%, 0);
+		transform: translate3d(0, -100%, 0)
+	}
+
+	to {
+		opacity: 1;
+		-webkit-transform: translate3d(0, 0, 0);
+		transform: translate3d(0, 0, 0)
+	}
+}
+
+.fadeInDown {
+	-webkit-animation-name: fadeInDown;
+	animation-name: fadeInDown
+}
+
+@-webkit-keyframes fadeInDownBig {
+	from {
+		opacity: 0;
+		-webkit-transform: translate3d(0, -2000px, 0);
+		transform: translate3d(0, -2000px, 0)
+	}
+
+	to {
+		opacity: 1;
+		-webkit-transform: translate3d(0, 0, 0);
+		transform: translate3d(0, 0, 0)
+	}
+}
+
+@keyframes fadeInDownBig {
+	from {
+		opacity: 0;
+		-webkit-transform: translate3d(0, -2000px, 0);
+		transform: translate3d(0, -2000px, 0)
+	}
+
+	to {
+		opacity: 1;
+		-webkit-transform: translate3d(0, 0, 0);
+		transform: translate3d(0, 0, 0)
+	}
+}
+
+.fadeInDownBig {
+	-webkit-animation-name: fadeInDownBig;
+	animation-name: fadeInDownBig
+}
+
+@-webkit-keyframes fadeInLeft {
+	from {
+		opacity: 0;
+		-webkit-transform: translate3d(-100%, 0, 0);
+		transform: translate3d(-100%, 0, 0)
+	}
+
+	to {
+		opacity: 1;
+		-webkit-transform: translate3d(0, 0, 0);
+		transform: translate3d(0, 0, 0)
+	}
+}
+
+@keyframes fadeInLeft {
+	from {
+		opacity: 0;
+		-webkit-transform: translate3d(-100%, 0, 0);
+		transform: translate3d(-100%, 0, 0)
+	}
+
+	to {
+		opacity: 1;
+		-webkit-transform: translate3d(0, 0, 0);
+		transform: translate3d(0, 0, 0)
+	}
+}
+
+.fadeInLeft {
+	-webkit-animation-name: fadeInLeft;
+	animation-name: fadeInLeft
+}
+
+@-webkit-keyframes fadeInLeftBig {
+	from {
+		opacity: 0;
+		-webkit-transform: translate3d(-2000px, 0, 0);
+		transform: translate3d(-2000px, 0, 0)
+	}
+
+	to {
+		opacity: 1;
+		-webkit-transform: translate3d(0, 0, 0);
+		transform: translate3d(0, 0, 0)
+	}
+}
+
+@keyframes fadeInLeftBig {
+	from {
+		opacity: 0;
+		-webkit-transform: translate3d(-2000px, 0, 0);
+		transform: translate3d(-2000px, 0, 0)
+	}
+
+	to {
+		opacity: 1;
+		-webkit-transform: translate3d(0, 0, 0);
+		transform: translate3d(0, 0, 0)
+	}
+}
+
+.fadeInLeftBig {
+	-webkit-animation-name: fadeInLeftBig;
+	animation-name: fadeInLeftBig
+}
+
+@-webkit-keyframes fadeInRight {
+	from {
+		opacity: 0;
+		-webkit-transform: translate3d(100%, 0, 0);
+		transform: translate3d(100%, 0, 0)
+	}
+
+	to {
+		opacity: 1;
+		-webkit-transform: translate3d(0, 0, 0);
+		transform: translate3d(0, 0, 0)
+	}
+}
+
+@keyframes fadeInRight {
+	from {
+		opacity: 0;
+		-webkit-transform: translate3d(100%, 0, 0);
+		transform: translate3d(100%, 0, 0)
+	}
+
+	to {
+		opacity: 1;
+		-webkit-transform: translate3d(0, 0, 0);
+		transform: translate3d(0, 0, 0)
+	}
+}
+
+.fadeInRight {
+	-webkit-animation-name: fadeInRight;
+	animation-name: fadeInRight
+}
+
+@-webkit-keyframes fadeInRightBig {
+	from {
+		opacity: 0;
+		-webkit-transform: translate3d(2000px, 0, 0);
+		transform: translate3d(2000px, 0, 0)
+	}
+
+	to {
+		opacity: 1;
+		-webkit-transform: translate3d(0, 0, 0);
+		transform: translate3d(0, 0, 0)
+	}
+}
+
+@keyframes fadeInRightBig {
+	from {
+		opacity: 0;
+		-webkit-transform: translate3d(2000px, 0, 0);
+		transform: translate3d(2000px, 0, 0)
+	}
+
+	to {
+		opacity: 1;
+		-webkit-transform: translate3d(0, 0, 0);
+		transform: translate3d(0, 0, 0)
+	}
+}
+
+.fadeInRightBig {
+	-webkit-animation-name: fadeInRightBig;
+	animation-name: fadeInRightBig
+}
+
+@-webkit-keyframes fadeInUp {
+	from {
+		opacity: 0;
+		-webkit-transform: translate3d(0, 100%, 0);
+		transform: translate3d(0, 100%, 0)
+	}
+
+	to {
+		opacity: 1;
+		-webkit-transform: translate3d(0, 0, 0);
+		transform: translate3d(0, 0, 0)
+	}
+}
+
+@keyframes fadeInUp {
+	from {
+		opacity: 0;
+		-webkit-transform: translate3d(0, 100%, 0);
+		transform: translate3d(0, 100%, 0)
+	}
+
+	to {
+		opacity: 1;
+		-webkit-transform: translate3d(0, 0, 0);
+		transform: translate3d(0, 0, 0)
+	}
+}
+
+.fadeInUp {
+	-webkit-animation-name: fadeInUp;
+	animation-name: fadeInUp
+}
+
+@-webkit-keyframes fadeInUpBig {
+	from {
+		opacity: 0;
+		-webkit-transform: translate3d(0, 2000px, 0);
+		transform: translate3d(0, 2000px, 0)
+	}
+
+	to {
+		opacity: 1;
+		-webkit-transform: translate3d(0, 0, 0);
+		transform: translate3d(0, 0, 0)
+	}
+}
+
+@keyframes fadeInUpBig {
+	from {
+		opacity: 0;
+		-webkit-transform: translate3d(0, 2000px, 0);
+		transform: translate3d(0, 2000px, 0)
+	}
+
+	to {
+		opacity: 1;
+		-webkit-transform: translate3d(0, 0, 0);
+		transform: translate3d(0, 0, 0)
+	}
+}
+
+.fadeInUpBig {
+	-webkit-animation-name: fadeInUpBig;
+	animation-name: fadeInUpBig
+}
+
+@-webkit-keyframes fadeOut {
+	from {
+		opacity: 1
+	}
+
+	to {
+		opacity: 0
+	}
+}
+
+@keyframes fadeOut {
+	from {
+		opacity: 1
+	}
+
+	to {
+		opacity: 0
+	}
+}
+
+.fadeOut {
+	-webkit-animation-name: fadeOut;
+	animation-name: fadeOut
+}
+
+@-webkit-keyframes fadeOutDown {
+	from {
+		opacity: 1
+	}
+
+	to {
+		opacity: 0;
+		-webkit-transform: translate3d(0, 100%, 0);
+		transform: translate3d(0, 100%, 0)
+	}
+}
+
+@keyframes fadeOutDown {
+	from {
+		opacity: 1
+	}
+
+	to {
+		opacity: 0;
+		-webkit-transform: translate3d(0, 100%, 0);
+		transform: translate3d(0, 100%, 0)
+	}
+}
+
+.fadeOutDown {
+	-webkit-animation-name: fadeOutDown;
+	animation-name: fadeOutDown
+}
+
+@-webkit-keyframes fadeOutDownBig {
+	from {
+		opacity: 1
+	}
+
+	to {
+		opacity: 0;
+		-webkit-transform: translate3d(0, 2000px, 0);
+		transform: translate3d(0, 2000px, 0)
+	}
+}
+
+@keyframes fadeOutDownBig {
+	from {
+		opacity: 1
+	}
+
+	to {
+		opacity: 0;
+		-webkit-transform: translate3d(0, 2000px, 0);
+		transform: translate3d(0, 2000px, 0)
+	}
+}
+
+.fadeOutDownBig {
+	-webkit-animation-name: fadeOutDownBig;
+	animation-name: fadeOutDownBig
+}
+
+@-webkit-keyframes fadeOutLeft {
+	from {
+		opacity: 1
+	}
+
+	to {
+		opacity: 0;
+		-webkit-transform: translate3d(-100%, 0, 0);
+		transform: translate3d(-100%, 0, 0)
+	}
+}
+
+@keyframes fadeOutLeft {
+	from {
+		opacity: 1
+	}
+
+	to {
+		opacity: 0;
+		-webkit-transform: translate3d(-100%, 0, 0);
+		transform: translate3d(-100%, 0, 0)
+	}
+}
+
+.fadeOutLeft {
+	-webkit-animation-name: fadeOutLeft;
+	animation-name: fadeOutLeft
+}
+
+@-webkit-keyframes fadeOutLeftBig {
+	from {
+		opacity: 1
+	}
+
+	to {
+		opacity: 0;
+		-webkit-transform: translate3d(-2000px, 0, 0);
+		transform: translate3d(-2000px, 0, 0)
+	}
+}
+
+@keyframes fadeOutLeftBig {
+	from {
+		opacity: 1
+	}
+
+	to {
+		opacity: 0;
+		-webkit-transform: translate3d(-2000px, 0, 0);
+		transform: translate3d(-2000px, 0, 0)
+	}
+}
+
+.fadeOutLeftBig {
+	-webkit-animation-name: fadeOutLeftBig;
+	animation-name: fadeOutLeftBig
+}
+
+@-webkit-keyframes fadeOutRight {
+	from {
+		opacity: 1
+	}
+
+	to {
+		opacity: 0;
+		-webkit-transform: translate3d(100%, 0, 0);
+		transform: translate3d(100%, 0, 0)
+	}
+}
+
+@keyframes fadeOutRight {
+	from {
+		opacity: 1
+	}
+
+	to {
+		opacity: 0;
+		-webkit-transform: translate3d(100%, 0, 0);
+		transform: translate3d(100%, 0, 0)
+	}
+}
+
+.fadeOutRight {
+	-webkit-animation-name: fadeOutRight;
+	animation-name: fadeOutRight
+}
+
+@-webkit-keyframes fadeOutRightBig {
+	from {
+		opacity: 1
+	}
+
+	to {
+		opacity: 0;
+		-webkit-transform: translate3d(2000px, 0, 0);
+		transform: translate3d(2000px, 0, 0)
+	}
+}
+
+@keyframes fadeOutRightBig {
+	from {
+		opacity: 1
+	}
+
+	to {
+		opacity: 0;
+		-webkit-transform: translate3d(2000px, 0, 0);
+		transform: translate3d(2000px, 0, 0)
+	}
+}
+
+.fadeOutRightBig {
+	-webkit-animation-name: fadeOutRightBig;
+	animation-name: fadeOutRightBig
+}
+
+@-webkit-keyframes fadeOutUp {
+	from {
+		opacity: 1
+	}
+
+	to {
+		opacity: 0;
+		-webkit-transform: translate3d(0, -100%, 0);
+		transform: translate3d(0, -100%, 0)
+	}
+}
+
+@keyframes fadeOutUp {
+	from {
+		opacity: 1
+	}
+
+	to {
+		opacity: 0;
+		-webkit-transform: translate3d(0, -100%, 0);
+		transform: translate3d(0, -100%, 0)
+	}
+}
+
+.fadeOutUp {
+	-webkit-animation-name: fadeOutUp;
+	animation-name: fadeOutUp
+}
+
+@-webkit-keyframes fadeOutUpBig {
+	from {
+		opacity: 1
+	}
+
+	to {
+		opacity: 0;
+		-webkit-transform: translate3d(0, -2000px, 0);
+		transform: translate3d(0, -2000px, 0)
+	}
+}
+
+@keyframes fadeOutUpBig {
+	from {
+		opacity: 1
+	}
+
+	to {
+		opacity: 0;
+		-webkit-transform: translate3d(0, -2000px, 0);
+		transform: translate3d(0, -2000px, 0)
+	}
+}
+
+.fadeOutUpBig {
+	-webkit-animation-name: fadeOutUpBig;
+	animation-name: fadeOutUpBig
+}
+
+@-webkit-keyframes flip {
+	from {
+		-webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg);
+		transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg);
+		-webkit-animation-timing-function: ease-out;
+		animation-timing-function: ease-out
+	}
+
+	40% {
+		-webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
+		transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
+		-webkit-animation-timing-function: ease-out;
+		animation-timing-function: ease-out
+	}
+
+	50% {
+		-webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
+		transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
+		-webkit-animation-timing-function: ease-in;
+		animation-timing-function: ease-in
+	}
+
+	80% {
+		-webkit-transform: perspective(400px) scale3d(.95, .95, .95) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
+		transform: perspective(400px) scale3d(.95, .95, .95) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
+		-webkit-animation-timing-function: ease-in;
+		animation-timing-function: ease-in
+	}
+
+	to {
+		-webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
+		transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
+		-webkit-animation-timing-function: ease-in;
+		animation-timing-function: ease-in
+	}
+}
+
+@keyframes flip {
+	from {
+		-webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg);
+		transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg);
+		-webkit-animation-timing-function: ease-out;
+		animation-timing-function: ease-out
+	}
+
+	40% {
+		-webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
+		transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
+		-webkit-animation-timing-function: ease-out;
+		animation-timing-function: ease-out
+	}
+
+	50% {
+		-webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
+		transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
+		-webkit-animation-timing-function: ease-in;
+		animation-timing-function: ease-in
+	}
+
+	80% {
+		-webkit-transform: perspective(400px) scale3d(.95, .95, .95) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
+		transform: perspective(400px) scale3d(.95, .95, .95) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
+		-webkit-animation-timing-function: ease-in;
+		animation-timing-function: ease-in
+	}
+
+	to {
+		-webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
+		transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
+		-webkit-animation-timing-function: ease-in;
+		animation-timing-function: ease-in
+	}
+}
+
+.animated.flip {
+	-webkit-backface-visibility: visible;
+	backface-visibility: visible;
+	-webkit-animation-name: flip;
+	animation-name: flip
+}
+
+@-webkit-keyframes flipInX {
+	from {
+		-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
+		transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
+		-webkit-animation-timing-function: ease-in;
+		animation-timing-function: ease-in;
+		opacity: 0
+	}
+
+	40% {
+		-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
+		transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
+		-webkit-animation-timing-function: ease-in;
+		animation-timing-function: ease-in
+	}
+
+	60% {
+		-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
+		transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
+		opacity: 1
+	}
+
+	80% {
+		-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
+		transform: perspective(400px) rotate3d(1, 0, 0, -5deg)
+	}
+
+	to {
+		-webkit-transform: perspective(400px);
+		transform: perspective(400px)
+	}
+}
+
+@keyframes flipInX {
+	from {
+		-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
+		transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
+		-webkit-animation-timing-function: ease-in;
+		animation-timing-function: ease-in;
+		opacity: 0
+	}
+
+	40% {
+		-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
+		transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
+		-webkit-animation-timing-function: ease-in;
+		animation-timing-function: ease-in
+	}
+
+	60% {
+		-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
+		transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
+		opacity: 1
+	}
+
+	80% {
+		-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
+		transform: perspective(400px) rotate3d(1, 0, 0, -5deg)
+	}
+
+	to {
+		-webkit-transform: perspective(400px);
+		transform: perspective(400px)
+	}
+}
+
+.flipInX {
+	-webkit-backface-visibility: visible !important;
+	backface-visibility: visible !important;
+	-webkit-animation-name: flipInX;
+	animation-name: flipInX
+}
+
+@-webkit-keyframes flipInY {
+	from {
+		-webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
+		transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
+		-webkit-animation-timing-function: ease-in;
+		animation-timing-function: ease-in;
+		opacity: 0
+	}
+
+	40% {
+		-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
+		transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
+		-webkit-animation-timing-function: ease-in;
+		animation-timing-function: ease-in
+	}
+
+	60% {
+		-webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
+		transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
+		opacity: 1
+	}
+
+	80% {
+		-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
+		transform: perspective(400px) rotate3d(0, 1, 0, -5deg)
+	}
+
+	to {
+		-webkit-transform: perspective(400px);
+		transform: perspective(400px)
+	}
+}
+
+@keyframes flipInY {
+	from {
+		-webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
+		transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
+		-webkit-animation-timing-function: ease-in;
+		animation-timing-function: ease-in;
+		opacity: 0
+	}
+
+	40% {
+		-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
+		transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
+		-webkit-animation-timing-function: ease-in;
+		animation-timing-function: ease-in
+	}
+
+	60% {
+		-webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
+		transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
+		opacity: 1
+	}
+
+	80% {
+		-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
+		transform: perspective(400px) rotate3d(0, 1, 0, -5deg)
+	}
+
+	to {
+		-webkit-transform: perspective(400px);
+		transform: perspective(400px)
+	}
+}
+
+.flipInY {
+	-webkit-backface-visibility: visible !important;
+	backface-visibility: visible !important;
+	-webkit-animation-name: flipInY;
+	animation-name: flipInY
+}
+
+@-webkit-keyframes flipOutX {
+	from {
+		-webkit-transform: perspective(400px);
+		transform: perspective(400px)
+	}
+
+	30% {
+		-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
+		transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
+		opacity: 1
+	}
+
+	to {
+		-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
+		transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
+		opacity: 0
+	}
+}
+
+@keyframes flipOutX {
+	from {
+		-webkit-transform: perspective(400px);
+		transform: perspective(400px)
+	}
+
+	30% {
+		-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
+		transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
+		opacity: 1
+	}
+
+	to {
+		-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
+		transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
+		opacity: 0
+	}
+}
+
+.flipOutX {
+	-webkit-animation-duration: 0.75s;
+	animation-duration: 0.75s;
+	-webkit-animation-name: flipOutX;
+	animation-name: flipOutX;
+	-webkit-backface-visibility: visible !important;
+	backface-visibility: visible !important
+}
+
+@-webkit-keyframes flipOutY {
+	from {
+		-webkit-transform: perspective(400px);
+		transform: perspective(400px)
+	}
+
+	30% {
+		-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
+		transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
+		opacity: 1
+	}
+
+	to {
+		-webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
+		transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
+		opacity: 0
+	}
+}
+
+@keyframes flipOutY {
+	from {
+		-webkit-transform: perspective(400px);
+		transform: perspective(400px)
+	}
+
+	30% {
+		-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
+		transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
+		opacity: 1
+	}
+
+	to {
+		-webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
+		transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
+		opacity: 0
+	}
+}
+
+.flipOutY {
+	-webkit-animation-duration: 0.75s;
+	animation-duration: 0.75s;
+	-webkit-backface-visibility: visible !important;
+	backface-visibility: visible !important;
+	-webkit-animation-name: flipOutY;
+	animation-name: flipOutY
+}
+
+@-webkit-keyframes lightSpeedIn {
+	from {
+		-webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
+		transform: translate3d(100%, 0, 0) skewX(-30deg);
+		opacity: 0
+	}
+
+	60% {
+		-webkit-transform: skewX(20deg);
+		transform: skewX(20deg);
+		opacity: 1
+	}
+
+	80% {
+		-webkit-transform: skewX(-5deg);
+		transform: skewX(-5deg)
+	}
+
+	to {
+		-webkit-transform: translate3d(0, 0, 0);
+		transform: translate3d(0, 0, 0)
+	}
+}
+
+@keyframes lightSpeedIn {
+	from {
+		-webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
+		transform: translate3d(100%, 0, 0) skewX(-30deg);
+		opacity: 0
+	}
+
+	60% {
+		-webkit-transform: skewX(20deg);
+		transform: skewX(20deg);
+		opacity: 1
+	}
+
+	80% {
+		-webkit-transform: skewX(-5deg);
+		transform: skewX(-5deg)
+	}
+
+	to {
+		-webkit-transform: translate3d(0, 0, 0);
+		transform: translate3d(0, 0, 0)
+	}
+}
+
+.lightSpeedIn {
+	-webkit-animation-name: lightSpeedIn;
+	animation-name: lightSpeedIn;
+	-webkit-animation-timing-function: ease-out;
+	animation-timing-function: ease-out
+}
+
+@-webkit-keyframes lightSpeedOut {
+	from {
+		opacity: 1
+	}
+
+	to {
+		-webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
+		transform: translate3d(100%, 0, 0) skewX(30deg);
+		opacity: 0
+	}
+}
+
+@keyframes lightSpeedOut {
+	from {
+		opacity: 1
+	}
+
+	to {
+		-webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
+		transform: translate3d(100%, 0, 0) skewX(30deg);
+		opacity: 0
+	}
+}
+
+.lightSpeedOut {
+	-webkit-animation-name: lightSpeedOut;
+	animation-name: lightSpeedOut;
+	-webkit-animation-timing-function: ease-in;
+	animation-timing-function: ease-in
+}
+
+@-webkit-keyframes rotateIn {
+	from {
+		-webkit-transform-origin: center;
+		transform-origin: center;
+		-webkit-transform: rotate3d(0, 0, 1, -200deg);
+		transform: rotate3d(0, 0, 1, -200deg);
+		opacity: 0
+	}
+
+	to {
+		-webkit-transform-origin: center;
+		transform-origin: center;
+		-webkit-transform: translate3d(0, 0, 0);
+		transform: translate3d(0, 0, 0);
+		opacity: 1
+	}
+}
+
+@keyframes rotateIn {
+	from {
+		-webkit-transform-origin: center;
+		transform-origin: center;
+		-webkit-transform: rotate3d(0, 0, 1, -200deg);
+		transform: rotate3d(0, 0, 1, -200deg);
+		opacity: 0
+	}
+
+	to {
+		-webkit-transform-origin: center;
+		transform-origin: center;
+		-webkit-transform: translate3d(0, 0, 0);
+		transform: translate3d(0, 0, 0);
+		opacity: 1
+	}
+}
+
+.rotateIn {
+	-webkit-animation-name: rotateIn;
+	animation-name: rotateIn
+}
+
+@-webkit-keyframes rotateInDownLeft {
+	from {
+		-webkit-transform-origin: left bottom;
+		transform-origin: left bottom;
+		-webkit-transform: rotate3d(0, 0, 1, -45deg);
+		transform: rotate3d(0, 0, 1, -45deg);
+		opacity: 0
+	}
+
+	to {
+		-webkit-transform-origin: left bottom;
+		transform-origin: left bottom;
+		-webkit-transform: translate3d(0, 0, 0);
+		transform: translate3d(0, 0, 0);
+		opacity: 1
+	}
+}
+
+@keyframes rotateInDownLeft {
+	from {
+		-webkit-transform-origin: left bottom;
+		transform-origin: left bottom;
+		-webkit-transform: rotate3d(0, 0, 1, -45deg);
+		transform: rotate3d(0, 0, 1, -45deg);
+		opacity: 0
+	}
+
+	to {
+		-webkit-transform-origin: left bottom;
+		transform-origin: left bottom;
+		-webkit-transform: translate3d(0, 0, 0);
+		transform: translate3d(0, 0, 0);
+		opacity: 1
+	}
+}
+
+.rotateInDownLeft {
+	-webkit-animation-name: rotateInDownLeft;
+	animation-name: rotateInDownLeft
+}
+
+@-webkit-keyframes rotateInDownRight {
+	from {
+		-webkit-transform-origin: right bottom;
+		transform-origin: right bottom;
+		-webkit-transform: rotate3d(0, 0, 1, 45deg);
+		transform: rotate3d(0, 0, 1, 45deg);
+		opacity: 0
+	}
+
+	to {
+		-webkit-transform-origin: right bottom;
+		transform-origin: right bottom;
+		-webkit-transform: translate3d(0, 0, 0);
+		transform: translate3d(0, 0, 0);
+		opacity: 1
+	}
+}
+
+@keyframes rotateInDownRight {
+	from {
+		-webkit-transform-origin: right bottom;
+		transform-origin: right bottom;
+		-webkit-transform: rotate3d(0, 0, 1, 45deg);
+		transform: rotate3d(0, 0, 1, 45deg);
+		opacity: 0
+	}
+
+	to {
+		-webkit-transform-origin: right bottom;
+		transform-origin: right bottom;
+		-webkit-transform: translate3d(0, 0, 0);
+		transform: translate3d(0, 0, 0);
+		opacity: 1
+	}
+}
+
+.rotateInDownRight {
+	-webkit-animation-name: rotateInDownRight;
+	animation-name: rotateInDownRight
+}
+
+@-webkit-keyframes rotateInUpLeft {
+	from {
+		-webkit-transform-origin: left bottom;
+		transform-origin: left bottom;
+		-webkit-transform: rotate3d(0, 0, 1, 45deg);
+		transform: rotate3d(0, 0, 1, 45deg);
+		opacity: 0
+	}
+
+	to {
+		-webkit-transform-origin: left bottom;
+		transform-origin: left bottom;
+		-webkit-transform: translate3d(0, 0, 0);
+		transform: translate3d(0, 0, 0);
+		opacity: 1
+	}
+}
+
+@keyframes rotateInUpLeft {
+	from {
+		-webkit-transform-origin: left bottom;
+		transform-origin: left bottom;
+		-webkit-transform: rotate3d(0, 0, 1, 45deg);
+		transform: rotate3d(0, 0, 1, 45deg);
+		opacity: 0
+	}
+
+	to {
+		-webkit-transform-origin: left bottom;
+		transform-origin: left bottom;
+		-webkit-transform: translate3d(0, 0, 0);
+		transform: translate3d(0, 0, 0);
+		opacity: 1
+	}
+}
+
+.rotateInUpLeft {
+	-webkit-animation-name: rotateInUpLeft;
+	animation-name: rotateInUpLeft
+}
+
+@-webkit-keyframes rotateInUpRight {
+	from {
+		-webkit-transform-origin: right bottom;
+		transform-origin: right bottom;
+		-webkit-transform: rotate3d(0, 0, 1, -90deg);
+		transform: rotate3d(0, 0, 1, -90deg);
+		opacity: 0
+	}
+
+	to {
+		-webkit-transform-origin: right bottom;
+		transform-origin: right bottom;
+		-webkit-transform: translate3d(0, 0, 0);
+		transform: translate3d(0, 0, 0);
+		opacity: 1
+	}
+}
+
+@keyframes rotateInUpRight {
+	from {
+		-webkit-transform-origin: right bottom;
+		transform-origin: right bottom;
+		-webkit-transform: rotate3d(0, 0, 1, -90deg);
+		transform: rotate3d(0, 0, 1, -90deg);
+		opacity: 0
+	}
+
+	to {
+		-webkit-transform-origin: right bottom;
+		transform-origin: right bottom;
+		-webkit-transform: translate3d(0, 0, 0);
+		transform: translate3d(0, 0, 0);
+		opacity: 1
+	}
+}
+
+.rotateInUpRight {
+	-webkit-animation-name: rotateInUpRight;
+	animation-name: rotateInUpRight
+}
+
+@-webkit-keyframes rotateOut {
+	from {
+		-webkit-transform-origin: center;
+		transform-origin: center;
+		opacity: 1
+	}
+
+	to {
+		-webkit-transform-origin: center;
+		transform-origin: center;
+		-webkit-transform: rotate3d(0, 0, 1, 200deg);
+		transform: rotate3d(0, 0, 1, 200deg);
+		opacity: 0
+	}
+}
+
+@keyframes rotateOut {
+	from {
+		-webkit-transform-origin: center;
+		transform-origin: center;
+		opacity: 1
+	}
+
+	to {
+		-webkit-transform-origin: center;
+		transform-origin: center;
+		-webkit-transform: rotate3d(0, 0, 1, 200deg);
+		transform: rotate3d(0, 0, 1, 200deg);
+		opacity: 0
+	}
+}
+
+.rotateOut {
+	-webkit-animation-name: rotateOut;
+	animation-name: rotateOut
+}
+
+@-webkit-keyframes rotateOutDownLeft {
+	from {
+		-webkit-transform-origin: left bottom;
+		transform-origin: left bottom;
+		opacity: 1
+	}
+
+	to {
+		-webkit-transform-origin: left bottom;
+		transform-origin: left bottom;
+		-webkit-transform: rotate3d(0, 0, 1, 45deg);
+		transform: rotate3d(0, 0, 1, 45deg);
+		opacity: 0
+	}
+}
+
+@keyframes rotateOutDownLeft {
+	from {
+		-webkit-transform-origin: left bottom;
+		transform-origin: left bottom;
+		opacity: 1
+	}
+
+	to {
+		-webkit-transform-origin: left bottom;
+		transform-origin: left bottom;
+		-webkit-transform: rotate3d(0, 0, 1, 45deg);
+		transform: rotate3d(0, 0, 1, 45deg);
+		opacity: 0
+	}
+}
+
+.rotateOutDownLeft {
+	-webkit-animation-name: rotateOutDownLeft;
+	animation-name: rotateOutDownLeft
+}
+
+@-webkit-keyframes rotateOutDownRight {
+	from {
+		-webkit-transform-origin: right bottom;
+		transform-origin: right bottom;
+		opacity: 1
+	}
+
+	to {
+		-webkit-transform-origin: right bottom;
+		transform-origin: right bottom;
+		-webkit-transform: rotate3d(0, 0, 1, -45deg);
+		transform: rotate3d(0, 0, 1, -45deg);
+		opacity: 0
+	}
+}
+
+@keyframes rotateOutDownRight {
+	from {
+		-webkit-transform-origin: right bottom;
+		transform-origin: right bottom;
+		opacity: 1
+	}
+
+	to {
+		-webkit-transform-origin: right bottom;
+		transform-origin: right bottom;
+		-webkit-transform: rotate3d(0, 0, 1, -45deg);
+		transform: rotate3d(0, 0, 1, -45deg);
+		opacity: 0
+	}
+}
+
+.rotateOutDownRight {
+	-webkit-animation-name: rotateOutDownRight;
+	animation-name: rotateOutDownRight
+}
+
+@-webkit-keyframes rotateOutUpLeft {
+	from {
+		-webkit-transform-origin: left bottom;
+		transform-origin: left bottom;
+		opacity: 1
+	}
+
+	to {
+		-webkit-transform-origin: left bottom;
+		transform-origin: left bottom;
+		-webkit-transform: rotate3d(0, 0, 1, -45deg);
+		transform: rotate3d(0, 0, 1, -45deg);
+		opacity: 0
+	}
+}
+
+@keyframes rotateOutUpLeft {
+	from {
+		-webkit-transform-origin: left bottom;
+		transform-origin: left bottom;
+		opacity: 1
+	}
+
+	to {
+		-webkit-transform-origin: left bottom;
+		transform-origin: left bottom;
+		-webkit-transform: rotate3d(0, 0, 1, -45deg);
+		transform: rotate3d(0, 0, 1, -45deg);
+		opacity: 0
+	}
+}
+
+.rotateOutUpLeft {
+	-webkit-animation-name: rotateOutUpLeft;
+	animation-name: rotateOutUpLeft
+}
+
+@-webkit-keyframes rotateOutUpRight {
+	from {
+		-webkit-transform-origin: right bottom;
+		transform-origin: right bottom;
+		opacity: 1
+	}
+
+	to {
+		-webkit-transform-origin: right bottom;
+		transform-origin: right bottom;
+		-webkit-transform: rotate3d(0, 0, 1, 90deg);
+		transform: rotate3d(0, 0, 1, 90deg);
+		opacity: 0
+	}
+}
+
+@keyframes rotateOutUpRight {
+	from {
+		-webkit-transform-origin: right bottom;
+		transform-origin: right bottom;
+		opacity: 1
+	}
+
+	to {
+		-webkit-transform-origin: right bottom;
+		transform-origin: right bottom;
+		-webkit-transform: rotate3d(0, 0, 1, 90deg);
+		transform: rotate3d(0, 0, 1, 90deg);
+		opacity: 0
+	}
+}
+
+.rotateOutUpRight {
+	-webkit-animation-name: rotateOutUpRight;
+	animation-name: rotateOutUpRight
+}
+
+@-webkit-keyframes hinge {
+	0% {
+		-webkit-transform-origin: top left;
+		transform-origin: top left;
+		-webkit-animation-timing-function: ease-in-out;
+		animation-timing-function: ease-in-out
+	}
+
+	20%,
+	60% {
+		-webkit-transform: rotate3d(0, 0, 1, 80deg);
+		transform: rotate3d(0, 0, 1, 80deg);
+		-webkit-transform-origin: top left;
+		transform-origin: top left;
+		-webkit-animation-timing-function: ease-in-out;
+		animation-timing-function: ease-in-out
+	}
+
+	40%,
+	80% {
+		-webkit-transform: rotate3d(0, 0, 1, 60deg);
+		transform: rotate3d(0, 0, 1, 60deg);
+		-webkit-transform-origin: top left;
+		transform-origin: top left;
+		-webkit-animation-timing-function: ease-in-out;
+		animation-timing-function: ease-in-out;
+		opacity: 1
+	}
+
+	to {
+		-webkit-transform: translate3d(0, 700px, 0);
+		transform: translate3d(0, 700px, 0);
+		opacity: 0
+	}
+}
+
+@keyframes hinge {
+	0% {
+		-webkit-transform-origin: top left;
+		transform-origin: top left;
+		-webkit-animation-timing-function: ease-in-out;
+		animation-timing-function: ease-in-out
+	}
+
+	20%,
+	60% {
+		-webkit-transform: rotate3d(0, 0, 1, 80deg);
+		transform: rotate3d(0, 0, 1, 80deg);
+		-webkit-transform-origin: top left;
+		transform-origin: top left;
+		-webkit-animation-timing-function: ease-in-out;
+		animation-timing-function: ease-in-out
+	}
+
+	40%,
+	80% {
+		-webkit-transform: rotate3d(0, 0, 1, 60deg);
+		transform: rotate3d(0, 0, 1, 60deg);
+		-webkit-transform-origin: top left;
+		transform-origin: top left;
+		-webkit-animation-timing-function: ease-in-out;
+		animation-timing-function: ease-in-out;
+		opacity: 1
+	}
+
+	to {
+		-webkit-transform: translate3d(0, 700px, 0);
+		transform: translate3d(0, 700px, 0);
+		opacity: 0
+	}
+}
+
+.hinge {
+	-webkit-animation-duration: 2s;
+	animation-duration: 2s;
+	-webkit-animation-name: hinge;
+	animation-name: hinge
+}
+
+@-webkit-keyframes jackInTheBox {
+	from {
+		opacity: 0;
+		-webkit-transform: scale(.1) rotate(30deg);
+		transform: scale(.1) rotate(30deg);
+		-webkit-transform-origin: center bottom;
+		transform-origin: center bottom
+	}
+
+	50% {
+		-webkit-transform: rotate(-10deg);
+		transform: rotate(-10deg)
+	}
+
+	70% {
+		-webkit-transform: rotate(3deg);
+		transform: rotate(3deg)
+	}
+
+	to {
+		opacity: 1;
+		-webkit-transform: scale(1);
+		transform: scale(1)
+	}
+}
+
+@keyframes jackInTheBox {
+	from {
+		opacity: 0;
+		-webkit-transform: scale(.1) rotate(30deg);
+		transform: scale(.1) rotate(30deg);
+		-webkit-transform-origin: center bottom;
+		transform-origin: center bottom
+	}
+
+	50% {
+		-webkit-transform: rotate(-10deg);
+		transform: rotate(-10deg)
+	}
+
+	70% {
+		-webkit-transform: rotate(3deg);
+		transform: rotate(3deg)
+	}
+
+	to {
+		opacity: 1;
+		-webkit-transform: scale(1);
+		transform: scale(1)
+	}
+}
+
+.jackInTheBox {
+	-webkit-animation-name: jackInTheBox;
+	animation-name: jackInTheBox
+}
+
+@-webkit-keyframes rollIn {
+	from {
+		opacity: 0;
+		-webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
+		transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg)
+	}
+
+	to {
+		opacity: 1;
+		-webkit-transform: translate3d(0, 0, 0);
+		transform: translate3d(0, 0, 0)
+	}
+}
+
+@keyframes rollIn {
+	from {
+		opacity: 0;
+		-webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
+		transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg)
+	}
+
+	to {
+		opacity: 1;
+		-webkit-transform: translate3d(0, 0, 0);
+		transform: translate3d(0, 0, 0)
+	}
+}
+
+.rollIn {
+	-webkit-animation-name: rollIn;
+	animation-name: rollIn
+}
+
+@-webkit-keyframes rollOut {
+	from {
+		opacity: 1
+	}
+
+	to {
+		opacity: 0;
+		-webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
+		transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg)
+	}
+}
+
+@keyframes rollOut {
+	from {
+		opacity: 1
+	}
+
+	to {
+		opacity: 0;
+		-webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
+		transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg)
+	}
+}
+
+.rollOut {
+	-webkit-animation-name: rollOut;
+	animation-name: rollOut
+}
+
+@-webkit-keyframes zoomIn {
+	from {
+		opacity: 0;
+		-webkit-transform: scale3d(.3, .3, .3);
+		transform: scale3d(.3, .3, .3)
+	}
+
+	50% {
+		opacity: 1
+	}
+}
+
+@flipInX zoomIn {
+	from {
+		opacity: 0;
+		-webkit-transform: scale3d(.3, .3, .3);
+		transform: scale3d(.3, .3, .3)
+	}
+
+	50% {
+		opacity: 1
+	}
+}
+
+.zoomIn {
+	-webkit-animation-name: zoomIn;
+	animation-name: zoomIn
+}
+
+@-webkit-keyframes zoomInDown {
+	from {
+		opacity: 0;
+		-webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
+		transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
+		-webkit-animation-timing-function: cubic-bezier(.55, .055, .675, .19);
+		animation-timing-function: cubic-bezier(.55, .055, .675, .19)
+	}
+
+	60% {
+		opacity: 1;
+		-webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
+		transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
+		-webkit-animation-timing-function: cubic-bezier(.175, .885, .32, 1);
+		animation-timing-function: cubic-bezier(.175, .885, .32, 1)
+	}
+}
+
+@keyframes zoomInDown {
+	from {
+		opacity: 0;
+		-webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
+		transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
+		-webkit-animation-timing-function: cubic-bezier(.55, .055, .675, .19);
+		animation-timing-function: cubic-bezier(.55, .055, .675, .19)
+	}
+
+	60% {
+		opacity: 1;
+		-webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
+		transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
+		-webkit-animation-timing-function: cubic-bezier(.175, .885, .32, 1);
+		animation-timing-function: cubic-bezier(.175, .885, .32, 1)
+	}
+}
+
+.zoomInDown {
+	-webkit-animation-name: zoomInDown;
+	animation-name: zoomInDown
+}
+
+@-webkit-keyframes zoomInLeft {
+	from {
+		opacity: 0;
+		-webkit-transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
+		transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
+		-webkit-animation-timing-function: cubic-bezier(.55, .055, .675, .19);
+		animation-timing-function: cubic-bezier(.55, .055, .675, .19)
+	}
+
+	60% {
+		opacity: 1;
+		-webkit-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
+		transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
+		-webkit-animation-timing-function: cubic-bezier(.175, .885, .32, 1);
+		animation-timing-function: cubic-bezier(.175, .885, .32, 1)
+	}
+}
+
+@keyframes zoomInLeft {
+	from {
+		opacity: 0;
+		-webkit-transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
+		transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
+		-webkit-animation-timing-function: cubic-bezier(.55, .055, .675, .19);
+		animation-timing-function: cubic-bezier(.55, .055, .675, .19)
+	}
+
+	60% {
+		opacity: 1;
+		-webkit-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
+		transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
+		-webkit-animation-timing-function: cubic-bezier(.175, .885, .32, 1);
+		animation-timing-function: cubic-bezier(.175, .885, .32, 1)
+	}
+}
+
+.zoomInLeft {
+	-webkit-animation-name: zoomInLeft;
+	animation-name: zoomInLeft
+}
+
+@-webkit-keyframes zoomInRight {
+	from {
+		opacity: 0;
+		-webkit-transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
+		transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
+		-webkit-animation-timing-function: cubic-bezier(.55, .055, .675, .19);
+		animation-timing-function: cubic-bezier(.55, .055, .675, .19)
+	}
+
+	60% {
+		opacity: 1;
+		-webkit-transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
+		transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
+		-webkit-animation-timing-function: cubic-bezier(.175, .885, .32, 1);
+		animation-timing-function: cubic-bezier(.175, .885, .32, 1)
+	}
+}
+
+@keyframes zoomInRight {
+	from {
+		opacity: 0;
+		-webkit-transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
+		transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
+		-webkit-animation-timing-function: cubic-bezier(.55, .055, .675, .19);
+		animation-timing-function: cubic-bezier(.55, .055, .675, .19)
+	}
+
+	60% {
+		opacity: 1;
+		-webkit-transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
+		transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
+		-webkit-animation-timing-function: cubic-bezier(.175, .885, .32, 1);
+		animation-timing-function: cubic-bezier(.175, .885, .32, 1)
+	}
+}
+
+.zoomInRight {
+	-webkit-animation-name: zoomInRight;
+	animation-name: zoomInRight
+}
+
+@-webkit-keyframes zoomInUp {
+	from {
+		opacity: 0;
+		-webkit-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
+		transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
+		-webkit-animation-timing-function: cubic-bezier(.55, .055, .675, .19);
+		animation-timing-function: cubic-bezier(.55, .055, .675, .19)
+	}
+
+	60% {
+		opacity: 1;
+		-webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
+		transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
+		-webkit-animation-timing-function: cubic-bezier(.175, .885, .32, 1);
+		animation-timing-function: cubic-bezier(.175, .885, .32, 1)
+	}
+}
+
+@keyframes zoomInUp {
+	from {
+		opacity: 0;
+		-webkit-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
+		transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
+		-webkit-animation-timing-function: cubic-bezier(.55, .055, .675, .19);
+		animation-timing-function: cubic-bezier(.55, .055, .675, .19)
+	}
+
+	60% {
+		opacity: 1;
+		-webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
+		transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
+		-webkit-animation-timing-function: cubic-bezier(.175, .885, .32, 1);
+		animation-timing-function: cubic-bezier(.175, .885, .32, 1)
+	}
+}
+
+.zoomInUp {
+	-webkit-animation-name: zoomInUp;
+	animation-name: zoomInUp
+}
+
+@-webkit-keyframes zoomOut {
+	from {
+		opacity: 1
+	}
+
+	50% {
+		opacity: 0;
+		-webkit-transform: scale3d(.3, .3, .3);
+		transform: scale3d(.3, .3, .3)
+	}
+
+	to {
+		opacity: 0
+	}
+}
+
+@keyframes zoomOut {
+	from {
+		opacity: 1
+	}
+
+	50% {
+		opacity: 0;
+		-webkit-transform: scale3d(.3, .3, .3);
+		transform: scale3d(.3, .3, .3)
+	}
+
+	to {
+		opacity: 0
+	}
+}
+
+.zoomOut {
+	-webkit-animation-name: zoomOut;
+	animation-name: zoomOut
+}
+
+@-webkit-keyframes zoomOutDown {
+	40% {
+		opacity: 1;
+		-webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
+		transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
+		-webkit-animation-timing-function: cubic-bezier(.55, .055, .675, .19);
+		animation-timing-function: cubic-bezier(.55, .055, .675, .19)
+	}
+
+	to {
+		opacity: 0;
+		-webkit-transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
+		transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
+		-webkit-transform-origin: center bottom;
+		transform-origin: center bottom;
+		-webkit-animation-timing-function: cubic-bezier(.175, .885, .32, 1);
+		animation-timing-function: cubic-bezier(.175, .885, .32, 1)
+	}
+}
+
+@keyframes zoomOutDown {
+	40% {
+		opacity: 1;
+		-webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
+		transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
+		-webkit-animation-timing-function: cubic-bezier(.55, .055, .675, .19);
+		animation-timing-function: cubic-bezier(.55, .055, .675, .19)
+	}
+
+	to {
+		opacity: 0;
+		-webkit-transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
+		transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
+		-webkit-transform-origin: center bottom;
+		transform-origin: center bottom;
+		-webkit-animation-timing-function: cubic-bezier(.175, .885, .32, 1);
+		animation-timing-function: cubic-bezier(.175, .885, .32, 1)
+	}
+}
+
+.zoomOutDown {
+	-webkit-animation-name: zoomOutDown;
+	animation-name: zoomOutDown
+}
+
+@-webkit-keyframes zoomOutLeft {
+	40% {
+		opacity: 1;
+		-webkit-transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0);
+		transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0)
+	}
+
+	to {
+		opacity: 0;
+		-webkit-transform: scale(.1) translate3d(-2000px, 0, 0);
+		transform: scale(.1) translate3d(-2000px, 0, 0);
+		-webkit-transform-origin: left center;
+		transform-origin: left center
+	}
+}
+
+@keyframes zoomOutLeft {
+	40% {
+		opacity: 1;
+		-webkit-transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0);
+		transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0)
+	}
+
+	to {
+		opacity: 0;
+		-webkit-transform: scale(.1) translate3d(-2000px, 0, 0);
+		transform: scale(.1) translate3d(-2000px, 0, 0);
+		-webkit-transform-origin: left center;
+		transform-origin: left center
+	}
+}
+
+.zoomOutLeft {
+	-webkit-animation-name: zoomOutLeft;
+	animation-name: zoomOutLeft
+}
+
+@-webkit-keyframes zoomOutRight {
+	40% {
+		opacity: 1;
+		-webkit-transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0);
+		transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0)
+	}
+
+	to {
+		opacity: 0;
+		-webkit-transform: scale(.1) translate3d(2000px, 0, 0);
+		transform: scale(.1) translate3d(2000px, 0, 0);
+		-webkit-transform-origin: right center;
+		transform-origin: right center
+	}
+}
+
+@keyframes zoomOutRight {
+	40% {
+		opacity: 1;
+		-webkit-transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0);
+		transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0)
+	}
+
+	to {
+		opacity: 0;
+		-webkit-transform: scale(.1) translate3d(2000px, 0, 0);
+		transform: scale(.1) translate3d(2000px, 0, 0);
+		-webkit-transform-origin: right center;
+		transform-origin: right center
+	}
+}
+
+.zoomOutRight {
+	-webkit-animation-name: zoomOutRight;
+	animation-name: zoomOutRight
+}
+
+@-webkit-keyframes zoomOutUp {
+	40% {
+		opacity: 1;
+		-webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
+		transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
+		-webkit-animation-timing-function: cubic-bezier(.55, .055, .675, .19);
+		animation-timing-function: cubic-bezier(.55, .055, .675, .19)
+	}
+
+	to {
+		opacity: 0;
+		-webkit-transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
+		transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
+		-webkit-transform-origin: center bottom;
+		transform-origin: center bottom;
+		-webkit-animation-timing-function: cubic-bezier(.175, .885, .32, 1);
+		animation-timing-function: cubic-bezier(.175, .885, .32, 1)
+	}
+}
+
+@keyframes zoomOutUp {
+	40% {
+		opacity: 1;
+		-webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
+		transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
+		-webkit-animation-timing-function: cubic-bezier(.55, .055, .675, .19);
+		animation-timing-function: cubic-bezier(.55, .055, .675, .19)
+	}
+
+	to {
+		opacity: 0;
+		-webkit-transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
+		transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
+		-webkit-transform-origin: center bottom;
+		transform-origin: center bottom;
+		-webkit-animation-timing-function: cubic-bezier(.175, .885, .32, 1);
+		animation-timing-function: cubic-bezier(.175, .885, .32, 1)
+	}
+}
+
+.zoomOutUp {
+	-webkit-animation-name: zoomOutUp;
+	animation-name: zoomOutUp
+}
+
+@-webkit-keyframes slideInDown {
+	from {
+		-webkit-transform: translate3d(0, -100%, 0);
+		transform: translate3d(0, -100%, 0);
+		visibility: visible
+	}
+
+	to {
+		-webkit-transform: translate3d(0, 0, 0);
+		transform: translate3d(0, 0, 0)
+	}
+}
+
+@keyframes slideInDown {
+	from {
+		-webkit-transform: translate3d(0, -100%, 0);
+		transform: translate3d(0, -100%, 0);
+		visibility: visible
+	}
+
+	to {
+		-webkit-transform: translate3d(0, 0, 0);
+		transform: translate3d(0, 0, 0)
+	}
+}
+
+.slideInDown {
+	-webkit-animation-name: slideInDown;
+	animation-name: slideInDown
+}
+
+@-webkit-keyframes slideInLeft {
+	from {
+		-webkit-transform: translate3d(-100%, 0, 0);
+		transform: translate3d(-100%, 0, 0);
+		visibility: visible
+	}
+
+	to {
+		-webkit-transform: translate3d(0, 0, 0);
+		transform: translate3d(0, 0, 0)
+	}
+}
+
+@keyframes slideInLeft {
+	from {
+		-webkit-transform: translate3d(-100%, 0, 0);
+		transform: translate3d(-100%, 0, 0);
+		visibility: visible
+	}
+
+	to {
+		-webkit-transform: translate3d(0, 0, 0);
+		transform: translate3d(0, 0, 0)
+	}
+}
+
+.slideInLeft {
+	-webkit-animation-name: slideInLeft;
+	animation-name: slideInLeft
+}
+
+@-webkit-keyframes slideInRight {
+	from {
+		-webkit-transform: translate3d(100%, 0, 0);
+		transform: translate3d(100%, 0, 0);
+		visibility: visible
+	}
+
+	to {
+		-webkit-transform: translate3d(0, 0, 0);
+		transform: translate3d(0, 0, 0)
+	}
+}
+
+@keyframes slideInRight {
+	from {
+		-webkit-transform: translate3d(100%, 0, 0);
+		transform: translate3d(100%, 0, 0);
+		visibility: visible
+	}
+
+	to {
+		-webkit-transform: translate3d(0, 0, 0);
+		transform: translate3d(0, 0, 0)
+	}
+}
+
+.slideInRight {
+	-webkit-animation-name: slideInRight;
+	animation-name: slideInRight
+}
+
+@-webkit-keyframes slideInUp {
+	from {
+		-webkit-transform: translate3d(0, 100%, 0);
+		transform: translate3d(0, 100%, 0);
+		visibility: visible
+	}
+
+	to {
+		-webkit-transform: translate3d(0, 0, 0);
+		transform: translate3d(0, 0, 0)
+	}
+}
+
+@keyframes slideInUp {
+	from {
+		-webkit-transform: translate3d(0, 100%, 0);
+		transform: translate3d(0, 100%, 0);
+		visibility: visible
+	}
+
+	to {
+		-webkit-transform: translate3d(0, 0, 0);
+		transform: translate3d(0, 0, 0)
+	}
+}
+
+.slideInUp {
+	-webkit-animation-name: slideInUp;
+	animation-name: slideInUp
+}
+
+@-webkit-keyframes slideOutDown {
+	from {
+		-webkit-transform: translate3d(0, 0, 0);
+		transform: translate3d(0, 0, 0)
+	}
+
+	to {
+		visibility: hidden;
+		-webkit-transform: translate3d(0, 100%, 0);
+		transform: translate3d(0, 100%, 0)
+	}
+}
+
+@keyframes slideOutDown {
+	from {
+		-webkit-transform: translate3d(0, 0, 0);
+		transform: translate3d(0, 0, 0)
+	}
+
+	to {
+		visibility: hidden;
+		-webkit-transform: translate3d(0, 100%, 0);
+		transform: translate3d(0, 100%, 0)
+	}
+}
+
+.slideOutDown {
+	-webkit-animation-name: slideOutDown;
+	animation-name: slideOutDown
+}
+
+@-webkit-keyframes slideOutLeft {
+	from {
+		-webkit-transform: translate3d(0, 0, 0);
+		transform: translate3d(0, 0, 0)
+	}
+
+	to {
+		visibility: hidden;
+		-webkit-transform: translate3d(-100%, 0, 0);
+		transform: translate3d(-100%, 0, 0)
+	}
+}
+
+@keyframes slideOutLeft {
+	from {
+		-webkit-transform: translate3d(0, 0, 0);
+		transform: translate3d(0, 0, 0)
+	}
+
+	to {
+		visibility: hidden;
+		-webkit-transform: translate3d(-100%, 0, 0);
+		transform: translate3d(-100%, 0, 0)
+	}
+}
+
+.slideOutLeft {
+	-webkit-animation-name: slideOutLeft;
+	animation-name: slideOutLeft
+}
+
+@-webkit-keyframes slideOutRight {
+	from {
+		-webkit-transform: translate3d(0, 0, 0);
+		transform: translate3d(0, 0, 0)
+	}
+
+	to {
+		visibility: hidden;
+		-webkit-transform: translate3d(100%, 0, 0);
+		transform: translate3d(100%, 0, 0)
+	}
+}
+
+@keyframes slideOutRight {
+	from {
+		-webkit-transform: translate3d(0, 0, 0);
+		transform: translate3d(0, 0, 0)
+	}
+
+	to {
+		visibility: hidden;
+		-webkit-transform: translate3d(100%, 0, 0);
+		transform: translate3d(100%, 0, 0)
+	}
+}
+
+.slideOutRight {
+	-webkit-animation-name: slideOutRight;
+	animation-name: slideOutRight
+}
+
+@-webkit-keyframes slideOutUp {
+	from {
+		-webkit-transform: translate3d(0, 0, 0);
+		transform: translate3d(0, 0, 0)
+	}
+
+	to {
+		visibility: hidden;
+		-webkit-transform: translate3d(0, -100%, 0);
+		transform: translate3d(0, -100%, 0)
+	}
+}
+
+@keyframes slideOutUp {
+	from {
+		-webkit-transform: translate3d(0, 0, 0);
+		transform: translate3d(0, 0, 0)
+	}
+
+	to {
+		visibility: hidden;
+		-webkit-transform: translate3d(0, -100%, 0);
+		transform: translate3d(0, -100%, 0)
+	}
+}
+
+.slideOutUp {
+	-webkit-animation-name: slideOutUp;
+	animation-name: slideOutUp
+}
+
+.animated {
+	-webkit-animation-duration: 1s;
+	animation-duration: 1s;
+	-webkit-animation-fill-mode: both;
+	animation-fill-mode: both
+}
+
+.animated.infinite {
+	-webkit-animation-iteration-count: infinite;
+	animation-iteration-count: infinite
+}
+
+.animated.delay-1s {
+	-webkit-animation-delay: 1s;
+	animation-delay: 1s
+}
+
+.animated.delay-2s {
+	-webkit-animation-delay: 2s;
+	animation-delay: 2s
+}
+
+.animated.delay-3s {
+	-webkit-animation-delay: 3s;
+	animation-delay: 3s
+}
+
+.animated.delay-4s {
+	-webkit-animation-delay: 4s;
+	animation-delay: 4s
+}
+
+.animated.delay-5s {
+	-webkit-animation-delay: 5s;
+	animation-delay: 5s
+}
+
+.animated.fast {
+	-webkit-animation-duration: 800ms;
+	animation-duration: 800ms
+}
+
+.animated.faster {
+	-webkit-animation-duration: 500ms;
+	animation-duration: 500ms
+}
+
+.animated.slow {
+	-webkit-animation-duration: 2s;
+	animation-duration: 2s
+}
+
+.animated.slower {
+	-webkit-animation-duration: 3s;
+	animation-duration: 3s
+}
+
+@media (print),
+(prefers-reduced-motion:reduce) {
+	.animated {
+		-webkit-animation-duration: 1ms !important;
+		animation-duration: 1ms !important;
+		-webkit-transition-duration: 1ms !important;
+		transition-duration: 1ms !important;
+		-webkit-animation-iteration-count: 1 !important;
+		animation-iteration-count: 1 !important
+	}
+}

src/components/EmployeeSelector.vue

@@ -18,7 +18,7 @@
             <div class="search flex-box"><el-input v-model="keyword" placeholder="请输入内容" clearable></el-input></div>
             <div class="search flex-box" style="margin-top: 7px;">
               <el-cascader
-                v-show="can_select_employee&&deptId==0"
+                v-show="can_select_employee && deptId==0"
                 style="width: 100%;"
                 v-model="dept_id"
                 ref="dept"

src/components/organization/Post.vue

@@ -268,7 +268,8 @@ export default {
     },
     getList(is) {
       this.item_loading=true;
-      this.tabs=[{name:'全部分类',id:-1}];
+      this.tabs = [{ name: '全部分类', id: -1 }];
+      // 岗位分类
       this.$axiosUser('get', '/api/pro/post/post_cate_list').then(res => {
           this.tabs.push(...res.data.data)
           if(is){
@@ -282,16 +283,16 @@ export default {
     getTableData() {
       this.table_loading=true;
       let data={
-        page:this.page,
-        page_size:this.page_size,
-        cate_id:this.tabItem.id,
-        name:this.name
+        page: this.page,
+        page_size: this.page_size,
+        cate_id: this.tabItem.id,
+        name: this.name
       }
       this.$axiosUser('get', '/api/pro/post/cate_post_list',data).then(res => {
-          this.list=res.data.data.list
-          this.total=res.data.data.total
+        this.list=res.data.data.list
+        this.total=res.data.data.total
       }).finally(()=>{
-           this.table_loading=false;
+        this.table_loading=false;
       });
     },
     openDetail(e){

src/components/system/Jurisdiction.vue

@@ -7,38 +7,45 @@
           <div class="text fontColorC">默认拥有全部权限，更换后需另行设置各子系统的权限</div>
         </div>
         <div class="flex-box-ce" style="margin: 20px 0;">
-          <userImage :user_name="userMainData.name" :img_url="userMainData.img_url" :id="userMainData.id" fontSize="14"></userImage>
+          <userImage :user_name="userMainData.name" :img_url="userMainData.img_url" :id="userMainData.id" fontSize="14">
+          </userImage>
           <span class="name">{{ userMainData.name }}</span>
-          <div class="blue cursor" v-if="userInfo.id==userMainData.id" style="padding-left: 20px;" @click="setCreator=true">更换</div>
+          <div class="blue cursor" v-if="userInfo.id==userMainData.id" style="padding-left: 20px;"
+            @click="setCreator=true">更换</div>
         </div>
       </div>
-      <div class="flex-box-ce">
+      <div class="flex-box-ce" style="display: flex; align-items: center;">
         <div class="" style="width: 326px;">
           <div class="title">组织管理员</div>
           <div class="text fontColorC">组织管理员仅可操作组织和人员管理，并设置新增组织管理员(最多10位)</div>
         </div>
-        <el-button :disabled="AdministratorList.length>=10"  size="small" type="primary" @click="showSelectUser(1)" plain><i class="el-icon-plus"></i>添加</el-button>
+        <el-button :disabled="AdministratorList.length >= 10" size="small" type="primary" @click="showSelectUser(1)"
+          plain><i class="el-icon-plus"></i>添加</el-button>
       </div>
       <div class="flex-box" style="margin: 20px 0;width: 800px;flex-wrap: wrap;">
         <template v-if="AdministratorList.length>0">
           <div v-for="(item,index) in AdministratorList" :key="index" class="files-box">
             <userImage :user_name="item.name" :img_url="item.img_url" :id="item.id" fontSize="14"></userImage>
             <span class="name flex-1">{{ item.name }}</span>
-            <Tooltip preHtml="删除" v-if="userInfo.id==userMainData.id||userInfo.id!=item.id"><i class="el-icon-error cursor" @click="deleteUser(item.id)"></i></Tooltip>
+            <Tooltip preHtml="删除" v-if="userInfo.id==userMainData.id||userInfo.id!=item.id"><i
+                class="el-icon-error cursor" @click="deleteUser(item.id)"></i></Tooltip>
           </div>
         </template>
-        <noData isSolt v-else imgW="200px" imgH="140px" >
-            <div class="fontColorC" style="text-align: center;">暂无组织管理员，去<span class="blue cursor" @click="showSelectUser(1)">添加</span></div>
+        <noData isSolt v-else imgW="200px" imgH="140px">
+          <div class="fontColorC" style="text-align: center;">暂无组织管理员，去<span class="blue cursor"
+              @click="showSelectUser(1)">添加</span></div>
         </noData>
       </div>
     </div>
     <div class="title">各系统主管理员</div>
     <el-tabs v-model="tabName">
-      <el-tab-pane :label="item.label" :name="item.name" v-for="(item,index) in tabs" :key="index" v-show="item.isShow"></el-tab-pane>
+      <el-tab-pane :label="item.label" :name="item.name" v-for="(item,index) in tabs" :key="index"
+        v-show="item.isShow"></el-tab-pane>
     </el-tabs>
-    <div  class="flex-box">
+    <div class="flex-box">
       <noData isSolt imgW="200px" imgH="140px" v-if="tabs.length==0">
-          <div class="fontColorC" style="text-align: center;">系统未开通或已过期，请<span class="blue cursor" @click="innerVisible=true">联系客服</span></div>
+        <div class="fontColorC" style="text-align: center;">系统未开通或已过期，请<span class="blue cursor"
+            @click="innerVisible=true">联系客服</span></div>
       </noData>
     </div>
 
@@ -49,11 +56,12 @@
     <!-- 绩效 -->
     <div v-if="tabName=='User'" style="padding: 10px;">
       <div class="flex-box-ce">
-        <div  style="width: 326px;">
+        <div style="width: 326px;">
           <div class="title">绩效主管理员</div>
           <div class="text fontColorC">拥有全部权限，支持更换主管理员</div>
         </div>
-        <el-button plain :disabled="userMain.length>=10" @click="setJxCreator = true" size="small" class="primaryBtn" v-if="userInfo.per_permission.main"><i class="el-icon-plus"></i>添加</el-button>
+        <el-button plain :disabled="userMain.length>=10" @click="setJxCreator = true" size="small" class="primaryBtn"
+          v-if="userInfo.per_permission.main"><i class="el-icon-plus"></i>添加</el-button>
       </div>
       <div style="margin: 20px 0;">
         <el-table :data="userMain" style="width: 400px;">
@@ -67,7 +75,9 @@
           </el-table-column>
           <el-table-column label="操作">
             <template slot-scope="scope">
-              <el-button v-if="$store.getters.site_info.creator_id!=scope.row.id&&scope.row.id!=$userInfo().id&&userInfo.per_permission.main" @click="deleteUser2(scope.row.id)" type="text" class="red">删除</el-button>
+              <el-button
+                v-if="$store.getters.site_info.creator_id!=scope.row.id&&scope.row.id!=$userInfo().id&&userInfo.per_permission.main"
+                @click="deleteUser2(scope.row.id)" type="text" class="red">删除</el-button>
             </template>
           </el-table-column>
           <template slot="empty">
@@ -83,11 +93,12 @@
     <!-- 积分 -->
     <div v-if="tabName=='point'" style="padding: 10px;">
       <div class="flex-box-ce">
-        <div  style="width: 326px;">
+        <div style="width: 326px;">
           <div class="title">积分主管理员</div>
-          <div class="text fontColorC">积分主管理员为默认角色，拥有所有功能权限<br/><span class="red">（积分主管理员至少有一位，且不能删除自己）</span></div>
+          <div class="text fontColorC">积分主管理员为默认角色，拥有所有功能权限<br /><span class="red">（积分主管理员至少有一位，且不能删除自己）</span></div>
         </div>
-        <el-button plain :disabled="pointList.length>=10" @click="setPointCreator = true" size="small" class="primaryBtn" v-if="userInfo.is_creator"><i class="el-icon-plus"></i>添加</el-button>
+        <el-button plain :disabled="pointList.length>=10" @click="setPointCreator = true" size="small"
+          class="primaryBtn" v-if="userInfo.is_creator"><i class="el-icon-plus"></i>添加</el-button>
       </div>
       <div style="margin: 20px 0;">
         <el-table :data="pointList" style="width: 400px;">
@@ -101,7 +112,9 @@
           </el-table-column>
           <el-table-column label="操作">
             <template slot-scope="scope">
-              <el-button v-if="$store.getters.site_info.creator_id!=scope.row.id&&scope.row.id!=$userInfo().id&&userInfo.is_creator" @click="del_creator(scope.row.id)" type="text" class="red">删除</el-button>
+              <el-button
+                v-if="$store.getters.site_info.creator_id!=scope.row.id&&scope.row.id!=$userInfo().id&&userInfo.is_creator"
+                @click="del_creator(scope.row.id)" type="text" class="red">删除</el-button>
             </template>
           </el-table-column>
           <template slot="empty">
@@ -112,16 +125,8 @@
     </div>
 
     <!-- 组织管理员 -->
-    <EmployeeSelector
-      :selected="selected"
-      :is_filtration_creator="false"
-      :employee_not_select="employee_not_select"
-      :multi="false"
-      :isChecKedAll="false"
-       isRequired
-      :visible.sync="isAdministrator"
-      @confirm="confirmAdministrator"
-    />
+    <EmployeeSelector :selected="selected" :is_filtration_creator="false" :employee_not_select="employee_not_select"
+      :multi="false" :isChecKedAll="false" isRequired :visible.sync="isAdministrator" @confirm="confirmAdministrator" />
 
     <el-dialog :close-on-click-modal="false" title="更换创始人" :visible.sync="setCreator" width="550px">
       <el-form :model="formData" :rules="employee_info_rules" ref="formData" label-width="80px">
@@ -130,8 +135,10 @@
         </el-form-item>
         <el-form-item :inline="true" label="验证码" prop="verify">
           <div class="flex-box-ce">
-            <el-input autocomplete="off" style="width: 200px;" v-model="formData.verify" placeholder="请输入验证码"></el-input>
-            <el-button size="mini" @click="send_old_msg" :disabled="sended" style="line-height: 34px;padding: 0 22px;color:#606266;margin-left:5px">
+            <el-input autocomplete="off" style="width: 200px;" v-model="formData.verify"
+              placeholder="请输入验证码"></el-input>
+            <el-button size="mini" @click="send_old_msg" :disabled="sended"
+              style="line-height: 34px;padding: 0 22px;color:#606266;margin-left:5px">
               {{ sendBtnText }}
             </el-button>
           </div>
@@ -140,7 +147,8 @@
           <el-input style="width: 300px;" v-model="formData.target_id" v-show="false"></el-input>
           <div class="border flex-box-ce">
             <div class="flex-1">
-              <div class="fontColorB font-flex-word"  style="width: 230px;" v-if="formData.target_id">{{target.name}}</div>
+              <div class="fontColorB font-flex-word" style="width: 230px;" v-if="formData.target_id">{{target.name}}
+              </div>
               <span v-else>请选择人员</span>
             </div>
             <i class="el-icon-arrow-down icon-right"></i>
@@ -155,24 +163,14 @@
     </el-dialog>
 
     <!-- 更换绩效主管理员 -->
-    <EmployeeSelector
-      title="设置主管理员"
-      :is_filtration_creator="false"
-      :multi="false"
-      :isChecKedAll="false"
-      :visible.sync="setJxCreator"
-      @confirm="confirmCreator"
-    />
+    <EmployeeSelector title="设置主管理员" :is_filtration_creator="false" :multi="false" :isChecKedAll="false"
+      :visible.sync="setJxCreator" @confirm="confirmCreator" />
     <!-- 更换积分主管理员 -->
-    <EmployeeSelector
-      title="设置主管理员"
-      :multi="false"
-      :isChecKedAll="false"
-      :visible.sync="setPointCreator"
-      @confirm="confirmCreator2"
-    />
+    <EmployeeSelector title="设置主管理员" :multi="false" :isChecKedAll="false" :visible.sync="setPointCreator"
+      @confirm="confirmCreator2" />
 
-    <el-dialog :close-on-click-modal="false" title="客服" :visible.sync="innerVisible" width="400px" append-to-body class="innerVisible">
+    <el-dialog :close-on-click-modal="false" title="客服" :visible.sync="innerVisible" width="400px" append-to-body
+      class="innerVisible">
       <p style="margin:0;font-size:18px;">微信扫码添加功道云客服进行咨询</p>
       <img src="static/images/code2.png" style="width:100%" />
       <p style="font-size:20px;">电话咨询：400-6877-880</p>

src/home.vue

@@ -17,10 +17,10 @@
                   <div class="fontColorC font-flex-word" style="max-width: 180px;">{{returnDeptName()}}</div>
                 </div>
                 <template v-if="user_info.post_info.length>0">
-                    <div class="flex-box-v flex-center-center" v-for="(item,index) in user_info.post_info" :key="index" style="border-radius: 3px;margin-left: 10px;padding: 10px;background-color: #f0f4fa;">
-                      <i style="font-size: 18px;" class="el-icon-s-custom fontColorC"></i>
-                      <span class="fontColorB">{{item.name}}</span>
-                    </div>
+                  <div class="flex-box-v flex-center-center" v-for="(item,index) in user_info.post_info" :key="index" style="border-radius: 3px;margin-left: 10px;padding: 10px;background-color: #f0f4fa;">
+                    <i style="font-size: 18px;" class="el-icon-s-custom fontColorC"></i>
+                    <span class="fontColorB">{{item.name}}</span>
+                  </div>
                 </template>
             </div>
 

src/index.vue

@@ -23,7 +23,6 @@
               <SystemMessage></SystemMessage>
               <div slot="reference" class="count_max">{{ site_info.user_count_max }}用户</div>
             </el-popover>
-             <!-- <div v-else  class="count_max">{{ site_info.user_count_max }}用户</div> -->
           </div>
           <div class="flex-1"></div>
           <div class="right-menu">

src/main.js

@@ -41,6 +41,7 @@ import * as filters from '@/utils/filters'
 import axiosKq from '@/utils/axiosKq'
 import axiosUser from '@/utils/axiosUser'
 import axios from '@/utils/axios'
+import http from '@/utils/http'
 import axiosKc from '@/utils/axiosKc'
 import * as socketApi from './api/websocket'
 import * as socketApiTow from './api/websocketTow'
@@ -64,6 +65,7 @@ Vue.prototype.$axios = axios
 Vue.prototype.$axiosUser = axiosUser
 Vue.prototype.$axiosKq = axiosKq
 Vue.prototype.$axiosKc = axiosKc
+Vue.prototype.$http = http
 Vue.prototype.$moment = moment
 Vue.prototype.$getToken = getToken
 Vue.prototype.$getCourseId = getCourseId
@@ -134,6 +136,12 @@ Object.keys(filters).forEach(key => {
 })
 
 
+import tableMove from "@/utils/tableMove";
+
+Vue.use(tableMove)
+
+
+
 Vue.config.productionTip = false
 
 new Vue({

src/newPerformance/components/ExamineContrast.vue

@@ -0,0 +1,316 @@
+<template>
+    <div class="contrast-container">
+        <div class="search-box">
+            <el-date-picker v-model="value2" type="daterange" align="right" unlink-panels range-separator="至"
+                start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions">
+            </el-date-picker>
+            <el-select v-model="value" placeholder="请选择" style="width: 170px; margin-left: 20px;">
+                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
+                </el-option>
+            </el-select>
+        </div>
+        <div class="btn-list">
+            <el-button type="primary" size="small" v-for="item in btnList" :key="item.id">{{ item.title }}</el-button>
+        </div>
+        <div style="width: 100%; padding: 0 20px; box-sizing: border-box;">
+            <el-table ref="fmeaTableRef2" :data="tableData" stripe style="width: 100%; " border
+                v-table-move="['fmeaTableRef2']" :header-cell-style="{ background: '#f5f7fa' }">
+                <el-table-column v-for="(item, index) in tableHeader" :prop="item.prop" :label="item.label"
+                    :key="item.label" align="center">
+                    <template slot-scope="scope">
+                        <div v-if="index > 0 && scope.row[item.prop] && scope.row[item.prop].score">
+                            {{ scope.row[item.prop].score }}
+                        </div>
+                        <div v-else>
+                            {{ scope.row.name }}
+                        </div>
+                    </template>
+                </el-table-column>
+            </el-table>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            options: [{
+                value: '选项1',
+                label: '进行中'
+            }, {
+                value: '选项2',
+                label: '未开始'
+            }, {
+                value: '选项3',
+                label: '已结束'
+            }],
+            value: '进行中',
+            btnList: [
+                { id: 1, title: "考核A" },
+                { id: 2, title: "考核B" },
+                { id: 3, title: "考核C" },
+                { id: 4, title: "考核D" },
+                { id: 5, title: "考核E" },
+                { id: 6, title: "考核F" },
+                { id: 7, title: "考核G" },
+                { id: 8, title: "考核H" },
+                { id: 9, title: "考核I" },
+                { id: 10, title: "考核J" },
+                { id: 11, title: "考核K" },
+                { id: 12, title: "考核L" },
+                { id: 13, title: "考核M" },
+                { id: 14, title: "考核N" },
+                { id: 15, title: "考核O" },
+                { id: 16, title: "考核P" },
+                { id: 17, title: "考核Q" }
+            ],
+            tableHeader: [
+                { prop: 'name', label: "姓名" },
+                { prop: 'examine_a', label: "考核A" },
+                { prop: 'examine_b', label: "考核B" },
+                { prop: 'examine_c', label: "考核C" },
+                { prop: 'examine_d', label: "考核D" },
+                { prop: 'examine_e', label: "考核E" },
+                { prop: 'examine_f', label: "考核F" },
+                { prop: 'examine_g', label: "考核G" },
+                { prop: 'examine_h', label: "考核H" },
+                { prop: 'examine_i', label: "考核I" },
+                { prop: 'examine_j', label: "考核J" },
+                { prop: 'examine_k', label: "考核K" },
+                { prop: 'examine_l', label: "考核L" },
+                { prop: 'examine_m', label: "考核M" },
+                { prop: 'examine_n', label: "考核N" },
+                { prop: 'examine_o', label: "考核O" },
+                { prop: 'examine_p', label: "考核P" },
+                { prop: 'examine_q', label: "考核Q" }
+            ],
+            tableData: [
+                {
+                    name: "刘一",
+                    examine_a: { score: 99 },
+                    examine_b: { score: 88 },
+                    examine_c: { score: 88 },
+                    examine_d: { score: 77 },
+                    examine_e: { score: 77 },
+                    examine_f: { score: 77 },
+                    examine_g: { score: 66 },
+                    examine_h: { score: 66 },
+                    examine_i: { score: 66 },
+                    examine_j: { score: 55 },
+                    examine_k: { score: 55 },
+                    examine_l: { score: 55 },
+                    examine_m: { score: 55 },
+                    examine_n: { score: 55 },
+                    examine_o: { score: 55 },
+                    examine_p: { score: 55 },
+                    examine_q: { score: 55 }
+                },
+                {
+                    name: "陈二",
+                    examine_a: { score: 99 },
+                    examine_b: { score: 88 },
+                    examine_c: { score: 88 },
+                    examine_d: { score: 77 },
+                    examine_e: { score: 77 },
+                    examine_f: { score: 77 },
+                    examine_g: { score: 66 },
+                    examine_h: { score: 66 },
+                    examine_i: { score: 66 },
+                    examine_j: { score: 55 },
+                    examine_k: { score: 55 },
+                    examine_l: { score: 55 },
+                    examine_m: { score: 55 },
+                    examine_n: { score: 55 },
+                    examine_o: { score: 55 },
+                    examine_p: { score: 55 },
+                    examine_q: { score: 55 }
+                },
+                {
+                    name: "张三",
+                    examine_a: { score: 99 },
+                    examine_b: { score: 88 },
+                    examine_c: { score: 88 },
+                    examine_d: { score: 77 },
+                    examine_e: { score: 77 },
+                    examine_f: { score: 77 },
+                    examine_g: { score: 66 },
+                    examine_h: { score: 66 },
+                    examine_i: { score: 66 },
+                    examine_j: { score: 55 },
+                    examine_k: { score: 55 },
+                    examine_l: { score: 55 },
+                    examine_m: { score: 55 },
+                    examine_n: { score: 55 },
+                    examine_o: { score: 55 },
+                    examine_p: { score: 55 },
+                    examine_q: { score: 55 }
+                },
+                {
+                    name: "李四",
+                    examine_a: { score: 99 },
+                    examine_b: { score: 88 },
+                    examine_c: { score: 88 },
+                    examine_d: { score: 77 },
+                    examine_e: { score: 77 },
+                    examine_f: { score: 77 },
+                    examine_g: { score: 66 },
+                    examine_h: { score: 66 },
+                    examine_i: { score: 66 },
+                    examine_j: { score: 55 },
+                    examine_k: { score: 55 },
+                    examine_l: { score: 55 },
+                    examine_m: { score: 55 },
+                    examine_n: { score: 55 },
+                    examine_o: { score: 55 },
+                    examine_p: { score: 55 },
+                    examine_q: { score: 55 }
+                },
+                {
+                    name: "王五",
+                    examine_a: { score: 99 },
+                    examine_b: { score: 88 },
+                    examine_c: { score: 88 },
+                    examine_d: { score: 77 },
+                    examine_e: { score: 77 },
+                    examine_f: { score: 77 },
+                    examine_g: { score: 66 },
+                    examine_h: { score: 66 },
+                    examine_i: { score: 66 },
+                    examine_j: { score: 55 },
+                    examine_k: { score: 55 },
+                    examine_l: { score: 55 },
+                    examine_m: { score: 55 },
+                    examine_n: { score: 55 },
+                    examine_o: { score: 55 },
+                    examine_p: { score: 55 },
+                    examine_q: { score: 55 }
+                },
+                {
+                    name: "赵六",
+                    examine_a: { score: 99 },
+                    examine_b: { score: 88 },
+                    examine_c: { score: 88 },
+                    examine_d: { score: 77 },
+                    examine_e: { score: 77 },
+                    examine_f: { score: 77 },
+                    examine_g: { score: 66 },
+                    examine_h: { score: 66 },
+                    examine_i: { score: 66 },
+                    examine_j: { score: 55 },
+                    examine_k: { score: 55 },
+                    examine_l: { score: 55 },
+                    examine_m: { score: 55 },
+                    examine_n: { score: 55 },
+                    examine_o: { score: 55 },
+                    examine_p: { score: 55 },
+                    examine_q: { score: 55 }
+                },
+                {
+                    name: "孙七",
+                    examine_a: { score: 99 },
+                    examine_b: { score: 88 },
+                    examine_c: { score: 88 },
+                    examine_d: { score: 77 },
+                    examine_e: { score: 77 },
+                    examine_f: { score: 77 },
+                    examine_g: { score: 66 },
+                    examine_h: { score: 66 },
+                    examine_i: { score: 66 },
+                    examine_j: { score: 55 },
+                    examine_k: { score: 55 },
+                    examine_l: { score: 55 },
+                    examine_m: { score: 55 },
+                    examine_n: { score: 55 },
+                    examine_o: { score: 55 },
+                    examine_p: { score: 55 },
+                    examine_q: { score: 55 }
+                },
+                {
+                    name: "周八",
+                    examine_a: { score: 99 },
+                    examine_b: { score: 88 },
+                    examine_c: { score: 88 },
+                    examine_d: { score: 77 },
+                    examine_e: { score: 77 },
+                    examine_f: { score: 77 },
+                    examine_g: { score: 66 },
+                    examine_h: { score: 66 },
+                    examine_i: { score: 66 },
+                    examine_j: { score: 55 },
+                    examine_k: { score: 55 },
+                    examine_l: { score: 55 },
+                    examine_m: { score: 55 },
+                    examine_n: { score: 55 },
+                    examine_o: { score: 55 },
+                    examine_p: { score: 55 },
+                    examine_q: { score: 55 }
+                },
+                {
+                    name: "吴九",
+                    examine_a: { score: 99 },
+                    examine_b: { score: 88 },
+                    examine_c: { score: 88 },
+                    examine_d: { score: 77 },
+                    examine_e: { score: 77 },
+                    examine_f: { score: 77 },
+                    examine_g: { score: 66 },
+                    examine_h: { score: 66 },
+                    examine_i: { score: 66 },
+                    examine_j: { score: 55 },
+                    examine_k: { score: 55 },
+                    examine_l: { score: 55 },
+                    examine_m: { score: 55 },
+                    examine_n: { score: 55 },
+                    examine_o: { score: 55 },
+                    examine_p: { score: 55 },
+                    examine_q: { score: 55 }
+                },
+                {
+                    name: "郑十",
+                    examine_a: { score: 99 },
+                    examine_b: { score: 88 },
+                    examine_c: { score: 88 },
+                    examine_d: { score: 77 },
+                    examine_e: { score: 77 },
+                    examine_f: { score: 77 },
+                    examine_g: { score: 66 },
+                    examine_h: { score: 66 },
+                    examine_i: { score: 66 },
+                    examine_j: { score: 55 },
+                    examine_k: { score: 55 },
+                    examine_l: { score: 55 },
+                    examine_m: { score: 55 },
+                    examine_n: { score: 55 },
+                    examine_o: { score: 55 },
+                    examine_p: { score: 55 },
+                    examine_q: { score: 55 }
+                }
+
+            ],
+        }
+    }
+}
+
+</script>
+
+
+<style scoped="scoped" lang="scss">
+.contrast-container {
+    width: 100%;
+    height: 100%;
+    background-color: #fff;
+
+    .search-box {
+        display: flex;
+        padding: 20px;
+        box-sizing: border-box;
+    }
+
+    .btn-list {
+        display: flex;
+        padding: 0 20px 20px 20px;
+        box-sizing: border-box;
+    }
+}
+</style>

src/newPerformance/components/ExamineRecord.vue

@@ -0,0 +1,335 @@
+<template>
+    <div class="record-container">
+        <div class="record-left">
+            <div class="search-box">
+                <el-input placeholder="请输入姓名" prefix-icon="el-icon-search" style="width: 170px; "></el-input>
+                <el-input placeholder="请输入考核表名称" prefix-icon="el-icon-search" style="width: 170px; "></el-input>
+                <el-date-picker v-model="value1" type="date" placeholder="选择日期" style="width: 170px; ">
+                </el-date-picker>
+                <el-select v-model="value" placeholder="请选择" style="width: 170px; ">
+                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
+                    </el-option>
+                </el-select>
+            </div>
+
+            <div class="line"></div>
+
+            <el-table :data="tableData" stripe style="width: 100%" border
+                :header-cell-style="{ background: '#f5f7fa' }">
+                <el-table-column prop="examine" label="考核名称" min-width="25%" align="center">
+                </el-table-column>
+                <el-table-column prop="date" label="周期" min-width="25%" align="center">
+                </el-table-column>
+                <el-table-column prop="start" label="开始时间" min-width="25%" align="center">
+                </el-table-column>
+                <el-table-column prop="progress" label="进度" min-width="25%" align="center">
+                    <template slot-scope="scope">
+                        <el-progress :percentage="scope.row.progress * 1"></el-progress>
+                    </template>
+                </el-table-column>
+            </el-table>
+
+
+            <el-pagination layout="prev, pager, next" :total="50">
+            </el-pagination>
+        </div>
+        <div class="record-right">
+            <div class="title-container">
+                <div class="title">项目经理2月考核</div>
+                <el-popover placement="right" trigger="click" width="300">
+                    <div class="setting">
+                        <div class="setting-title">正太规则</div>
+                        <table class="myTable" style="width: 100%;">
+                            <tr style="width: 100%;">
+                                <td style="width: 33.3%;">优</td>
+                                <td style="width: 33.3%;">10%</td>
+                                <td style="width: 33.3%;">
+                                    <i class="el-icon-delete"></i>
+                                </td>
+                            </tr>
+                            <tr style="width: 100%;">
+                                <td style="width: 33.3%;">良</td>
+                                <td style="width: 33.3%;">10%</td>
+                                <td style="width: 33.3%;">
+                                    <i class="el-icon-delete"></i>
+                                </td>
+                            </tr>
+                            <tr style="width: 100%;">
+                                <td style="width: 33.3%;">中</td>
+                                <td style="width: 33.3%;">10%</td>
+                                <td style="width: 33.3%;">
+                                    <i class="el-icon-delete"></i>
+                                </td>
+                            </tr>
+                            <tr style="width: 100%;">
+                                <td style="width: 33.3%;">差</td>
+                                <td style="width: 33.3%;">10%</td>
+                                <td style="width: 33.3%;">
+                                    <i class="el-icon-delete"></i>
+                                </td>
+                            </tr>
+                        </table>
+                    </div>
+                    <el-button slot="reference" size="small">正态分布</el-button>
+                </el-popover>
+            </div>
+            <div class="score-list">
+                <div class="score-item heartBeat animated" :style="{ background: '#C38FE9' }">
+                    <div class="score-item-title">总人数</div>
+                    <div class="score-item-num">10</div>
+                    <div class="score-item-percent">已完成</div>
+                </div>
+                <div class="score-item heartBeat animated" v-for="(item, index) in scoreList" :key="item.id"
+                    :style="{ background: item.color }">
+                    <div class="score-item-title">{{ item.title }}</div>
+                    <div class="score-item-num">{{ item.num }}</div>
+                    <div class="score-item-percent">{{ item.percent }}</div>
+                </div>
+            </div>
+
+            <el-table ref="fmeaTableRef" :data="tableData2" stripe style="width: 100%" border
+                v-table-move="['fmeaTableRef']" :header-cell-style="{ background: '#f5f7fa' }">
+                <el-table-column v-for="item in tableHeader" :prop="item.prop" :label="item.label" :key="item.label"
+                    align="center">
+                    <template slot-scope="scope">
+                        <div v-if="scope.row[item.prop] && scope.row[item.prop].score">
+                            {{ scope.row[item.prop].score }}
+                        </div>
+                        <div v-if="scope.row[item.prop] && scope.row[item.prop].level">
+                            {{ scope.row[item.prop].level }}
+                        </div>
+                    </template>
+                </el-table-column>
+            </el-table>
+
+            <div class="title-container" style="margin: 20px 0;">
+                <div class="title">指标信息</div>
+            </div>
+            <el-table ref="fmeaTableRef2" :data="tableData3" stripe style="width: 100%" border
+                v-table-move="['fmeaTableRef2']" :header-cell-style="{ background: '#f5f7fa' }">
+                <el-table-column prop="name" label="姓名" align="center"></el-table-column>
+                <el-table-column prop="point" label="指标" align="center"></el-table-column>
+                <el-table-column prop="rules" label="规则" align="center"></el-table-column>
+                <el-table-column prop="target" label="目标" align="center"></el-table-column>
+                <el-table-column prop="result" label="结果" align="center"></el-table-column>
+                <el-table-column prop="different" label="差距" align="center"></el-table-column>
+                <el-table-column prop="score" label="评分" align="center"></el-table-column>
+            </el-table>
+        </div>
+    </div>
+</template>
+
+
+<script>
+export default {
+    data() {
+
+        return {
+            value1: '',
+            options: [{
+                value: '选项1',
+                label: '进行中'
+            }, {
+                value: '选项2',
+                label: '未开始'
+            }, {
+                value: '选项3',
+                label: '已结束'
+            }],
+            value: '进行中',
+            tableData: [
+                {
+                    examine: "项目经理2月考核",
+                    date: '2025-02-01 至 2025-03-01',
+                    start: '2025-02-01 发起',
+                    progress: '60'
+                },
+                {
+                    examine: "项目经理3月考核",
+                    date: '2025-03-01 至 2025-04-01',
+                    start: '2025-03-01 发起',
+                    progress: '50'
+                },
+                {
+                    examine: "项目经理4月考核",
+                    date: '2025-04-01 至 2025-05-01',
+                    start: '2025-04-01 发起',
+                    progress: '60'
+                }
+            ],
+            scoreList: [
+                { id: 1, title: '优', num: 1, percent: '10%', color: "#4C78E6" },
+                { id: 2, title: '良', num: 2, percent: '20%', color: "#F59898" },
+                { id: 3, title: '中', num: 6, percent: '60%', color: "#97E98F" },
+                { id: 4, title: '差', num: 1, percent: '10%', color: "#FAC363" }
+            ],
+            tableHeader: [
+                { prop: 'score_1', label: "刘一" },
+                { prop: 'score_2', label: "陈二" },
+                { prop: 'score_3', label: "张三" },
+                { prop: 'score_4', label: "李四" },
+                { prop: 'score_5', label: "王五" },
+                { prop: 'score_6', label: "赵六" },
+                { prop: 'score_7', label: "孙七" },
+                { prop: 'score_8', label: "周八" },
+                { prop: 'score_9', label: "吴九" },
+                { prop: 'score_10', label: "郑十" },
+            ],
+            tableData2: [
+                {
+                    score_1: { score: 99 },
+                    score_2: { score: 88 },
+                    score_3: { score: 88 },
+                    score_4: { score: 77 },
+                    score_5: { score: 77 },
+                    score_6: { score: 77 },
+                    score_7: { score: 66 },
+                    score_8: { score: 66 },
+                    score_9: { score: 66 },
+                    score_10: { score: 55 }
+                },
+                {
+                    score_1: { level: "优" },
+                    score_2: { level: "良" },
+                    score_3: { level: "良" },
+                    score_4: { level: "中" },
+                    score_5: { level: "中" },
+                    score_6: { level: "中" },
+                    score_7: { level: "中" },
+                    score_8: { level: "中" },
+                    score_9: { level: "中" },
+                    score_10: { level: "差" }
+                },
+            ],
+            tableData3: [
+                { name: "刘一", point: "指标A", rules: "规则1", target: 100, result: 99, different: "-1", score: 99 },
+                { name: "陈二", point: "指标A", rules: "规则1", target: 100, result: 99, different: "-1", score: 99 },
+                { name: "张三", point: "指标A", rules: "规则1", target: 100, result: 99, different: "-1", score: 99 },
+                { name: "李四", point: "指标A", rules: "规则1", target: 100, result: 99, different: "-1", score: 99 },
+                { name: "王五", point: "指标A", rules: "规则1", target: 100, result: 99, different: "-1", score: 99 },
+                { name: "赵六", point: "指标A", rules: "规则1", target: 100, result: 99, different: "-1", score: 99 },
+                { name: "孙七", point: "指标A", rules: "规则1", target: 100, result: 99, different: "-1", score: 99 },
+                { name: "周八", point: "指标A", rules: "规则1", target: 100, result: 99, different: "-1", score: 99 },
+                { name: "吴九", point: "指标A", rules: "规则1", target: 100, result: 99, different: "-1", score: 99 },
+                { name: "郑十", point: "指标A", rules: "规则1", target: 100, result: 99, different: "-1", score: 99 },
+            ],
+            gridData: [{
+                date: '2016-05-02',
+                name: '王小虎',
+                address: '上海市普陀区金沙江路 1518 弄'
+            }, {
+                date: '2016-05-04',
+                name: '王小虎',
+                address: '上海市普陀区金沙江路 1518 弄'
+            }, {
+                date: '2016-05-01',
+                name: '王小虎',
+                address: '上海市普陀区金沙江路 1518 弄'
+            }, {
+                date: '2016-05-03',
+                name: '王小虎',
+                address: '上海市普陀区金沙江路 1518 弄'
+            }]
+        };
+    },
+    created() {
+        console.log(this.tableData2)
+    }
+};
+</script>
+
+
+<style scoped="scoped" lang="scss">
+.record-container {
+    width: 100%;
+    height: 100%;
+    background-color: #f0f4fa;
+    display: flex;
+    justify-content: space-between;
+
+    .record-left,
+    .record-right {
+        width: 49.6%;
+        height: 100%;
+        border-radius: 5px;
+        background: #fff;
+        padding: 20px;
+        box-sizing: border-box;
+        overflow: hidden;
+        overflow-y: auto;
+    }
+
+    .record-left {
+        .search-box {
+            display: flex;
+            justify-content: space-between;
+        }
+
+        .line {
+            width: 100%;
+            height: 1px;
+            background: #d7dae2;
+            margin: 20px 0;
+        }
+    }
+
+
+    .record-right {
+        .title-container {
+            display: flex;
+            align-items: center;
+
+            .title {
+                font-size: 16px;
+                font-weight: 600;
+                margin-right: 20px;
+            }
+
+            .setting {
+                width: 600px;
+                height: 400px;
+                .myTable {
+                    border-collapse: collapse;
+                    /* 合并表格边框 */
+                    border: 1px solid #ccc;
+                    /* 设置表格边框样式和颜色 */
+                    background-color: red;
+                }
+            }
+        }
+
+        .score-list {
+            display: flex;
+            width: 100%;
+            margin-top: 20px;
+
+            .score-item {
+                flex: 0 0 calc((100% - 80px) / 5);
+                height: 90px;
+                padding: 10px;
+                margin: 0 20px 20px 0;
+                box-sizing: border-box;
+                border-radius: 6px;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+                justify-content: space-around;
+                font-size: 16px;
+                color: #fff;
+                box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
+                &-title {
+                    font-weight: 600;
+                }
+
+                &:nth-child(5n) {
+                    /* 去除第5n个的margin-right */
+                    margin-right: 0;
+                }
+            }
+        }
+    }
+
+    
+
+}
+</style>

src/newPerformance/components/MyPerformance.vue

@@ -0,0 +1,271 @@
+<template>
+    <div class="all">
+        <div class="search-box">
+            <el-input placeholder="请输入姓名" prefix-icon="el-icon-search"
+                style="width: 300px; margin-right: 20px;"></el-input>
+            <el-input placeholder="请输入考核表名称" prefix-icon="el-icon-search"
+                style="width: 300px; margin-right: 20px;"></el-input>
+            <el-date-picker v-model="value2" type="daterange" align="right" unlink-panels range-separator="至"
+                start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions">
+            </el-date-picker>
+        </div>
+
+        <div class="line"></div>
+
+        <div class="perform-list">
+            <template v-for="item in performList">
+                <div v-if="item.score >= 80 && item.score <= 100" class="perform-item" :class="'green-status'"
+                    :key="item.id" @click="$router.push(`/examineDetails/1`)">
+                    <div class="perform-item-status">{{ item.status }}</div>
+                    <div class="perform-item-title">{{ item.title }}</div>
+                    <div class="perform-item-date">{{ item.date }}</div>
+                    <div class="perform-item-progress">{{ item.progress }}</div>
+                    <div class="perform-item-score">{{ item.score }} 分</div>
+                </div>
+
+                <div v-if="item.score >= 60 && item.score < 80" class="perform-item" :class="'orange-status'"
+                    :key="item.id">
+                    <div class="perform-item-status">{{ item.status }}</div>
+                    <div class="perform-item-title">{{ item.title }}</div>
+                    <div class="perform-item-date">{{ item.date }}</div>
+                    <div class="perform-item-progress">{{ item.progress }}</div>
+                    <div class="perform-item-score">{{ item.score }} 分</div>
+                </div>
+
+                <div v-if="item.score < 60" class="perform-item" :class="'red-status'" :key="item.id">
+                    <div class="perform-item-status">{{ item.status }}</div>
+                    <div class="perform-item-title">{{ item.title }}</div>
+                    <div class="perform-item-date">{{ item.date }}</div>
+                    <div class="perform-item-progress">{{ item.progress }}</div>
+                    <div class="perform-item-score">{{ item.score }} 分</div>
+                </div>
+            </template>
+
+            <template v-for="item in performList">
+                <div v-if="item.score >= 80 && item.score <= 100" class="perform-item" :class="'green-status'"
+                    :key="item.id">
+                    <div class="perform-item-status">{{ item.status }}</div>
+                    <div class="perform-item-title">{{ item.title }}</div>
+                    <div class="perform-item-date">{{ item.date }}</div>
+                    <div class="perform-item-progress">{{ item.progress }}</div>
+                    <div class="perform-item-score">{{ item.score }} 分</div>
+                </div>
+
+                <div v-if="item.score >= 60 && item.score < 80" class="perform-item" :class="'orange-status'"
+                    :key="item.id">
+                    <div class="perform-item-status">{{ item.status }}</div>
+                    <div class="perform-item-title">{{ item.title }}</div>
+                    <div class="perform-item-date">{{ item.date }}</div>
+                    <div class="perform-item-progress">{{ item.progress }}</div>
+                    <div class="perform-item-score">{{ item.score }} 分</div>
+                </div>
+
+                <div v-if="item.score < 60" class="perform-item" :class="'red-status'" :key="item.id">
+                    <div class="perform-item-status">{{ item.status }}</div>
+                    <div class="perform-item-title">{{ item.title }}</div>
+                    <div class="perform-item-date">{{ item.date }}</div>
+                    <div class="perform-item-progress">{{ item.progress }}</div>
+                    <div class="perform-item-score">{{ item.score }} 分</div>
+                </div>
+            </template>
+
+
+            <template v-for="item in performList">
+                <div v-if="item.score >= 80 && item.score <= 100" class="perform-item" :class="'green-status'"
+                    :key="item.id">
+                    <div class="perform-item-status">{{ item.status }}</div>
+                    <div class="perform-item-title">{{ item.title }}</div>
+                    <div class="perform-item-date">{{ item.date }}</div>
+                    <div class="perform-item-progress">{{ item.progress }}</div>
+                    <div class="perform-item-score">{{ item.score }} 分</div>
+                </div>
+
+                <div v-if="item.score >= 60 && item.score < 80" class="perform-item" :class="'orange-status'"
+                    :key="item.id">
+                    <div class="perform-item-status">{{ item.status }}</div>
+                    <div class="perform-item-title">{{ item.title }}</div>
+                    <div class="perform-item-date">{{ item.date }}</div>
+                    <div class="perform-item-progress">{{ item.progress }}</div>
+                    <div class="perform-item-score">{{ item.score }} 分</div>
+                </div>
+
+                <div v-if="item.score < 60" class="perform-item" :class="'red-status'" :key="item.id">
+                    <div class="perform-item-status">{{ item.status }}</div>
+                    <div class="perform-item-title">{{ item.title }}</div>
+                    <div class="perform-item-date">{{ item.date }}</div>
+                    <div class="perform-item-progress">{{ item.progress }}</div>
+                    <div class="perform-item-score">{{ item.score }} 分</div>
+                </div>
+            </template>
+
+            <template v-for="item in performList">
+                <div v-if="item.score >= 80 && item.score <= 100" class="perform-item" :class="'green-status'"
+                    :key="item.id">
+                    <div class="perform-item-status">{{ item.status }}</div>
+                    <div class="perform-item-title">{{ item.title }}</div>
+                    <div class="perform-item-date">{{ item.date }}</div>
+                    <div class="perform-item-progress">{{ item.progress }}</div>
+                    <div class="perform-item-score">{{ item.score }} 分</div>
+                </div>
+
+                <div v-if="item.score >= 60 && item.score < 80" class="perform-item" :class="'orange-status'"
+                    :key="item.id">
+                    <div class="perform-item-status">{{ item.status }}</div>
+                    <div class="perform-item-title">{{ item.title }}</div>
+                    <div class="perform-item-date">{{ item.date }}</div>
+                    <div class="perform-item-progress">{{ item.progress }}</div>
+                    <div class="perform-item-score">{{ item.score }} 分</div>
+                </div>
+
+                <div v-if="item.score < 60" class="perform-item" :class="'red-status'" :key="item.id">
+                    <div class="perform-item-status">{{ item.status }}</div>
+                    <div class="perform-item-title">{{ item.title }}</div>
+                    <div class="perform-item-date">{{ item.date }}</div>
+                    <div class="perform-item-progress">{{ item.progress }}</div>
+                    <div class="perform-item-score">{{ item.score }} 分</div>
+                </div>
+            </template>
+
+            <template v-for="item in performList">
+                <div v-if="item.score >= 80 && item.score <= 100" class="perform-item" :class="'green-status'"
+                    :key="item.id">
+                    <div class="perform-item-status">{{ item.status }}</div>
+                    <div class="perform-item-title">{{ item.title }}</div>
+                    <div class="perform-item-date">{{ item.date }}</div>
+                    <div class="perform-item-progress">{{ item.progress }}</div>
+                    <div class="perform-item-score">{{ item.score }} 分</div>
+                </div>
+
+                <div v-if="item.score >= 60 && item.score < 80" class="perform-item" :class="'orange-status'"
+                    :key="item.id">
+                    <div class="perform-item-status">{{ item.status }}</div>
+                    <div class="perform-item-title">{{ item.title }}</div>
+                    <div class="perform-item-date">{{ item.date }}</div>
+                    <div class="perform-item-progress">{{ item.progress }}</div>
+                    <div class="perform-item-score">{{ item.score }} 分</div>
+                </div>
+
+                <div v-if="item.score < 60" class="perform-item" :class="'red-status'" :key="item.id">
+                    <div class="perform-item-status">{{ item.status }}</div>
+                    <div class="perform-item-title">{{ item.title }}</div>
+                    <div class="perform-item-date">{{ item.date }}</div>
+                    <div class="perform-item-progress">{{ item.progress }}</div>
+                    <div class="perform-item-score">{{ item.score }} 分</div>
+                </div>
+            </template>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            pickerOptions: {
+                shortcuts: [{
+                    text: '最近一周',
+                    onClick(picker) {
+                        const end = new Date();
+                        const start = new Date();
+                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
+                        picker.$emit('pick', [start, end]);
+                    }
+                }, {
+                    text: '最近一个月',
+                    onClick(picker) {
+                        const end = new Date();
+                        const start = new Date();
+                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
+                        picker.$emit('pick', [start, end]);
+                    }
+                }, {
+                    text: '最近三个月',
+                    onClick(picker) {
+                        const end = new Date();
+                        const start = new Date();
+                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
+                        picker.$emit('pick', [start, end]);
+                    }
+                }]
+            },
+            value2: '',
+            performList: [
+                { id: 1, title: "项目经理2月份考核", score: '99', progress: "已结束", date: "2025-01-01 至 2025-02-01", status: "合格" },
+                { id: 2, title: "项目经理3月份考核", score: '66', progress: "已结束", date: "2025-02-01 至 2025-03-01", status: "合格" },
+                { id: 3, title: "项目经理4月份考核", score: '50', progress: "已结束", date: "2025-03-01 至 2025-04-01", status: "不合格" },
+            ]
+        };
+    }
+};
+</script>
+
+<style scoped="scoped" lang="scss">
+    .all {
+        width: 100%;
+        height: 100%;
+        background-color: #fff;
+        display: flex;
+        flex-direction: column;
+    }
+
+    .search-box {
+        display: flex;
+        padding: 20px;
+        box-sizing: border-box;
+    }
+
+    .line {
+        width: 98%;
+        height: 1px;
+        background: #d7dae2;
+        margin: 0 auto 20px auto;
+    }
+
+    .green-status {
+        border: 2px solid #67C23A;
+        color: #67c23a;
+        background: #f0f9eb;
+    }
+
+    .orange-status {
+        color: #e6a23c;
+        background: #fdf6ec;
+        border: 2px solid #f5dab1;
+    }
+
+    .red-status {
+        border: 2px solid #fbc4c4;
+        color: #f56c6c;
+        background: #fef0f0;
+    }
+
+    .perform-list {
+        flex: 1;
+        width: 100%;
+        padding: 0 20px;
+        box-sizing: border-box;
+        display: flex;
+        flex-wrap: wrap;
+        .perform-item {
+            flex: 0 0 calc((100% - 80px) / 5);
+            height: 180px;
+            padding: 10px;
+            margin: 0 20px 20px 0;
+            box-sizing: border-box;
+            border-radius: 16px;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: space-around;
+            font-size: 16px;
+            box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
+            &-title {
+                font-weight: 600;
+            }
+            &:nth-child(5n) {
+                /* 去除第5n个的margin-right */
+                margin-right: 0;
+            }
+        }
+    }
+</style>

src/newPerformance/components/RoleSetting.vue

@@ -0,0 +1,128 @@
+<template>
+    <div class="role-setting-container">
+        <el-alert class="bounce animated" show-icon title="如需设置绩效主管理员，绩效子管理员，部门管理员，普通员工及其权限，请前往旧系统设置！" type="warning"
+            :closable="false">
+        </el-alert>
+        <div class="title-box">
+            <div class="title">绩效主管理员</div>
+            <div class="sub-title">拥有全部权限，支持更换主管理员</div>
+        </div>
+
+        <div class="people-list">
+            <div class="people-item" v-for="item in 10">
+                <div class="circle">15</div>
+                <div class="name">刘一</div>
+            </div>
+        </div>
+
+        <div class="title-box">
+            <div class="title">绩效子管理员</div>
+            <div class="sub-title">负责绩效考核日常的管理工作，由主管理员分配权限</div>
+        </div>
+
+        <div class="people-list">
+            <div class="people-item" v-for="item in 13">
+                <div class="circle">15</div>
+                <div class="name">刘一</div>
+            </div>
+        </div>
+
+        <div class="title-box">
+            <div class="title">部门管理员</div>
+            <div class="sub-title">部门管理员在【组织架构】设置，可以对管理范围下的员工进行沟通反馈，评分，查看考核结果</div>
+        </div>
+
+        <div class="people-list">
+            <div class="people-item" v-for="item in 14">
+                <div class="circle">15</div>
+                <div class="name">刘一</div>
+            </div>
+        </div>
+
+        <div class="title-box">
+            <div class="title">普通员工</div>
+            <div class="sub-title">员工只能看到自己的绩效，编写执行计划并进行沟通反馈</div>
+        </div>
+
+        <div class="people-list">
+            <div class="people-item" v-for="item in 8">
+                <div class="circle">15</div>
+                <div class="name">刘一</div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+        }
+    }
+}
+
+</script>
+
+
+<style scoped="scoped" lang="scss">
+.role-setting-container {
+    width: 100%;
+    height: 100%;
+    background-color: #fff;
+    padding: 20px;
+    box-sizing: border-box;
+    .title-box {
+        display: flex;
+        align-items: center;
+        padding: 20px 0;
+        box-sizing: border-box;
+        .title {
+            font-size: 16px;
+            font-weight: 600;
+            margin-right: 20px;
+        }
+        .sub-title {
+            font-size: 14px;
+            color: #999;
+        }
+    }
+
+    .people-list {
+        width: 100%;
+        display: flex;
+        flex-wrap: wrap;
+        .people-item {
+            flex: 0 0 calc((100% - 180px) / 10);
+            height: 50px;
+            margin: 0 20px 20px 0;
+            box-sizing: border-box;
+            border-radius: 6px;
+            display: flex;
+            align-items: center;
+            justify-content: space-around;
+            font-size: 16px;
+            background: #ecf5ff;
+            box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
+            .circle {
+                width: 40px;
+                height: 40px;
+                border-radius: 50%;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                background: #409eff;
+                color: white;
+            }
+            .name {
+                font-weight: 600;
+                color: rgb(48, 49, 51);
+            }
+    
+            &:nth-child(10n) {
+                /* 去除第10n个的margin-right */
+                margin-right: 0;
+            }
+        }
+    }
+}
+</style>

src/newPerformance/components/Workbench.vue

@@ -0,0 +1,809 @@
+<template>
+    <div class="all">
+        <!-- 待办 -->
+        <div class="flex-box">
+            <div class="flex-1 dispose-left">
+                <el-tabs v-model="activeName" class="tabs" >
+                    <el-tab-pane :title="tab.title" :name="tab.name" style="max-height: 350px;overflow-y: auto;"
+                        class="scroll-bar" :key="tab.name" v-for="(tab, index) in editableTabs" v-loading="loading">
+                        <span slot="label" v-if="tab.num > 0">
+                            <el-badge :value="tab.num" :max="999">
+                                <span>{{ tab.title }}</span>
+                            </el-badge>
+                        </span>
+                        <span slot="label" v-else>
+                            <div class="tab-title">
+                                <span>{{ tab.title }}</span>
+                            </div>
+                        </span>
+
+                        <template v-if="agencyList.length > 0">
+                            <div class="flex-box-ce item" v-for="(item, index) in agencyList" :key="index"
+                                @click="openDetail(item)">
+                                <!-- <template v-if="item.jobNew.employeeName">
+                                    <userImage :img_url="item.userInfo.img_url" :user_name="item.userInfo.employeeName"
+                                        fontSize="14" width="40px" height="40px"></userImage>
+                                </template> -->
+                                <div class="flex-1 font-flex-word content">
+                                    <div style="max-width: 700px;" class="font-flex-word">
+                                        {{ item.jobNew && item.jobNew.reviewTitle + "中, " || '-- ' }}{{ item.jobNew &&
+                                        item.jobNew.employeeName + '的' || '-- ' }}{{ item.jobNew && item.jobNew.title ||
+                                        '-- '}}，需要您确认!
+                                    </div>
+                                </div>
+                                <div class="fontColorB">{{ item.jobNew && item.jobNew.timeRemark || '--'}}</div>
+                            </div>
+
+                        </template>
+                        <NoData v-else content="暂无内容" :isSolt="true">
+                            <div class="fontColorC" style="text-align: center;">
+                                暂无内容,
+                                <span class="blue" style="cursor: pointer;"
+                                    @click="$router.push({ name: 'backlog', query: { selectIndex: 1 } })">去查看已处理的</span>
+                            </div>
+                        </NoData>
+
+                    </el-tab-pane>
+                </el-tabs>
+            </div>
+
+            <div class="flex-1 dispose-left template-box">
+                <div class="title-box">
+                    <div class="tem-title">考核模板</div>
+                    <el-button type="primary" size="small">上传发布</el-button>
+                </div>
+                <template v-if="messageList.length > 0">
+                    <div class="flex-box-ce item" v-for="(item, index) in messageList" :key="index">
+                        <div class="flex-box  flex-1">
+                            <div style="width: 25px;"><i class="el-icon-tickets blue"></i></div>
+                            <span class="message-content">{{ item.title }}</span>
+                        </div>
+                        <div>
+                            <el-link style="margin-right: 10px;" type="primary"
+                                @click="$router.push(`/templateDetails/${item.templateId}`)">查看指标</el-link>
+                            <el-popconfirm confirm-button-text='好的' cancel-button-text='不用了' icon="el-icon-info"
+                                icon-color="red" title="这个考核模板确定删除吗？" @confirm="confirmDelete(item.templateId)"
+                                @cancel="cancelDelete()">
+                                <el-link slot="reference" type="danger">删除</el-link>
+                            </el-popconfirm>
+                        </div>
+                    </div>
+                    <el-button class="plus-button" icon="el-icon-plus" circle size="small"
+                        @click="addTemplate"></el-button>
+                </template>
+                <NoData v-else content="暂无内容" :isSolt="true">
+                    <div class="fontColorC" style="text-align: center;">
+                        暂无数据
+                    </div>
+                </NoData>
+            </div>
+        </div>
+        <!-- 管理 -->
+        <div style="margin: 10px 0;" class="gl-all" v-loading="staffLoad">
+            <div class="flex-box" style="margin-bottom: 20px;">
+                <el-cascader v-model="headValue" :options="options" :show-all-levels="false"
+                    :props="{ expandTrigger: 'hover', label: 'name', value: 'id', children: 'list' }"></el-cascader>
+                <div style="margin-left:10px; width:200px;">
+                    <JxSearch :screen="2" title="请输入名称搜索" @confirm="searchList"></JxSearch>
+                </div>
+            </div>
+            <el-tabs v-model="glIndex">
+                <el-tab-pane :label="item.title" :name="item.name" v-for="(item, index) in glIist" :key="index">
+                    <el-table :data="glDataList" v-loading="glLoading" :header-cell-style="{ background: '#EDF4FF' }"
+                        size="mini">
+                        <el-table-column prop="name" label="被考核人">
+                            <template slot-scope="scope">
+                                <div class="flex-box-ce">
+                                    <userImage :id="scope.row.userInfo.id" :user_name="scope.row.userInfo.name"
+                                        :img_url="scope.row.userInfo.img_url" width="35px" height="35px"
+                                        fontSize="12px"></userImage>
+                                    <span style="margin-left: 10px; line-height: 50px;">{{ scope.row.userInfo.name
+                                        }}</span>
+                                    <span style="margin-left: 10px; line-height: 50px;" class="orange"
+                                        v-if="scope.row.has_finish">已归档</span>
+                                </div>
+                            </template>
+                        </el-table-column>
+                        <el-table-column prop="name" label="部门">
+                            <template slot-scope="scope">
+                                <div v-if="scope.row.dept_list.length > 0">
+                                    <span v-for="(item, index) in scope.row.dept_list" :key="index">
+                                        {{ item.dept_name }}
+                                        <span v-if="scope.row.dept_list.length - index > 1">,</span>
+                                    </span>
+                                </div>
+                                <span v-else>--</span>
+                            </template>
+                        </el-table-column>
+                        <el-table-column prop="package_name" label="考核时段"></el-table-column>
+
+                        <template v-if="glIndex == '1'">
+                            <el-table-column prop="name" label="管理记录">
+                                <template slot-scope="scope">
+                                    <span v-if="scope.row.count_record == 0" class="fontColorB">无管理记录</span>
+                                    <span v-else class="blue" style="cursor: pointer;" @click="openTx(scope.row)">{{
+                                        scope.row.count_record }}条管理记录</span>
+                                </template>
+                            </el-table-column>
+                            <el-table-column prop="name" label="执行计划">
+                                <template slot-scope="scope">
+                                    <template v-if="scope.row.action_update">
+                                        <div v-if="returnStr(scope.row.action_update).indexOf('今天') >= 0"
+                                            class="actionText orange">{{
+                                            returnStr(scope.row.action_update) }}</div>
+                                        <div v-else-if="returnStr(scope.row.action_update).indexOf('昨天') >= 0"
+                                            class="actionText green">{{
+                                            returnStr(scope.row.action_update) }}</div>
+                                        <div v-else class="actionText">{{ returnStr(scope.row.action_update) }}</div>
+                                    </template>
+                                    <div></div>
+                                </template>
+                            </el-table-column>
+                        </template>
+                        <template v-else>
+                            <el-table-column prop="status" label="评分进度">
+                                <template slot-scope="scope">
+                                    <span v-if="scope.row.status == 0" class="orange">未到评分节点</span>
+                                    <span v-if="scope.row.status == 1" class="blue">待我评分</span>
+                                    <span v-if="scope.row.status == 2" class="green">我已评分</span>
+                                    <span v-if="scope.row.status == 3" class="green">已被其他管理评分</span>
+                                </template>
+                            </el-table-column>
+                            <el-table-column prop="score_info" label="评分">
+                                <template slot-scope="scope">
+                                    <div v-if="scope.row.score_info.length > 0">
+                                        <div v-for="(item, index) in returnPoint(scope.row)" :key="index">
+                                            <div style="margin-top: 5px;" v-if="item.pointList.length > 0">
+                                                {{ item.name }}:
+                                                <span class="blue">{{ item.pointList.toString() }}</span>
+                                            </div>
+                                            <div v-else>--</div>
+                                        </div>
+                                    </div>
+                                    <div v-else>--</div>
+                                </template>
+                            </el-table-column>
+                        </template>
+
+                        <el-table-column label="操作">
+                            <template slot-scope="scope">
+                                <el-button @click="openTx(scope.row)" type="text"
+                                    v-if="glIndex == '1' && !scope.row.has_finish">填写管理记录</el-button>
+                                <el-button @click="openDetail2(scope.row)" type="text">查看详情</el-button>
+                                <el-button @click="openDetail2(scope.row)" type="text"
+                                    v-if="glIndex == '2' && scope.row.status == 1">去评分</el-button>
+                            </template>
+                        </el-table-column>
+                    </el-table>
+                    <div class="more">
+                        <span
+                            @click="$router.push({ name: glIndex == 1 ? 'management' : 'score', query: { headValue: JSON.stringify(headValue) } })">
+                            查看更多
+                            <i class="el-icon-d-arrow-right"></i>
+                        </span>
+                    </div>
+                </el-tab-pane>
+            </el-tabs>
+        </div>
+
+        <!-- 跟踪管理 -->
+        <TrackManagement :showDrawer.sync="isTrack" :isCz="has_finish ? true : false" :id="employeeID" :apList="apList"
+            :recordMemberIds="recordMemberIds" :assessId="employee_id" @confirm="getManagement"></TrackManagement>
+
+        <EditNodeDialog :dialogVisible="dialogVisible" :activeName="activeName" :dialogTitle="dialogTitle" :dialogData="dialogData" 
+        @close="closeDialog"/>
+    </div>
+</template>
+
+<script>
+import ECharts from 'echarts';
+import moment from 'moment';
+import JxSearch from '@/performance/components/public/JxSearch';
+import TrackManagement from '@/performance/components/public/TrackManagement';
+import EditNodeDialog from './Workbench/EditNode';
+import { mapGetters } from 'vuex';
+
+export default {
+    name: 'Workbench',
+    components: {
+        JxSearch,
+        TrackManagement,
+        EditNodeDialog
+    },
+    data() {
+        return {
+            day: moment().format('YYYY-MM-DD'),
+            editableTabs: [
+                { title: '目标制定', name: '0', num: 0 },
+                { title: '确认目标', name: '1', num: 0 },
+                { title: '录入结果', name: '2', num: 0 },
+                { title: '自评', name: '3', num: 0 },
+                { title: '互评', name: '4', num: 0 },
+                { title: '评分', name: '5', num: 0 },
+                { title: '审批', name: '6', num: 0 },
+                { title: '绩效确认', name: '10', num: 0 }
+            ],
+            userInfo: this.$userInfo(),
+            agencyList: [], //待办列表
+            agencyNum: 0,
+            messageList: [], //消息列表
+            messageNum: 0,
+            activeName: '1',
+            loading: false,
+            dialogVisible: false,
+            dialogTitle: '',
+            dialogData: {},
+            // 管理相关
+            options: [], //
+            headValue: [],
+            glIndex: '1',
+            glIist: [{ name: '1', title: '我管理的' }, { name: '2', title: '我评分的' }],
+            glLoading: false,
+            glDataList: [],
+            package_id: '', //考核包ID
+            name: '', //搜索Name
+            pendingList: [], //提供给考核详情上下切换人员列表
+            isTrack: false,
+            apList: [], //管理记录源数据
+            employee_id: 0, //被考核人ID
+            employeeID: 0,
+            staffLoad: false,
+            recordMemberIds: [],
+            has_finish: 0,//是否归档
+            plcList: [],
+            site_info: null,
+        };
+    },
+
+    computed: {
+        ...mapGetters(['user_info'])
+    },
+    activated() {
+        // this.getAgencyNum();
+        // this.getAgency();
+        this.glIndex == '1' ? this.getManagement() : this.getScorerRecord();
+        this.getPlc();
+    },
+    created() {
+        // this.getAgencyNum();
+        this.$axiosUser("get", "/performance/template/list/self/389").then(res => {
+            this.messageList = res.data.data.list
+        })
+
+        this.getAgency();
+    },
+    mounted() {
+        // 
+        // this.getMessage();
+        // this.assessTree();
+    },
+    watch: {
+        activeName(val) {
+            this.getAgency();
+        },
+        glIndex(val) {
+            this.glDataList = [];
+            if (this.headValue.length != 0) {
+                val == '1' ? this.getManagement() : this.getScorerRecord();
+            }
+        },
+
+        headValue(val) {
+            this.package_id = val[val.length - 1];
+            this.glIndex == '1' ? this.getManagement() : this.getScorerRecord();
+        }
+    },
+    methods: {
+        closeDialog() {
+            this.dialogVisible = false
+        },
+        confirmDelete(templateId) { 
+            console.log("确定删除", templateId);
+            // this.$axiosUser('post', '/performance/template/remove/389/' + templateId).then(res => {
+            //     console.log(res);
+            // })
+        },
+        cancelDelete() {
+            console.log("取消删除");
+        },
+
+        addTemplate() { 
+            this.$axiosUser('post', `/performance/template/create/${this.user_info.site_id}`);
+        },
+        openAffirm(item) {
+            this.$router.push({ path: '/affirm', query: { pl_id: item.id, level_name: item.level_name, package_id: item.package_id } });
+        },
+        getPlc() {
+            this.$axiosUser('get', '/api/pro/per/package/plc/list', { status: 0, page: 1, page_size: 1000 }).then(res => {
+                this.plcList = res.data.data.list
+            })
+        },
+        returnStr(time) {
+            let date = `${time}000`;
+            let res = moment(Number(date)).format('YYYY/MM/DD HH:mm');
+            return this.fnTime(res);
+        },
+
+        
+        fnTime(time) {
+            let staer = time.slice(0, 11);
+            let ptime = new Date(time).getTime();
+            const twentyFourHours = 24 * 60 * 60 * 1000;
+            const fortyEightHours = 24 * 60 * 60 * 1000 * 2;
+            const today = moment().format('YYYY/MM/DD');
+            const todayTime = new Date(today).getTime();
+            const yesterdayTime = new Date(todayTime - twentyFourHours).getTime();
+            const lastYesterdayTime = new Date(todayTime - fortyEightHours).getTime();
+            if (ptime >= todayTime) {
+                return '今天 ' + time.split(' ')[1] + ' 更新了执行计划';
+            } else if (ptime < todayTime && yesterdayTime <= ptime) {
+                return '昨天 ' + time.split(' ')[1] + ' 更新了执行计划';
+            } else if (ptime < yesterdayTime && lastYesterdayTime <= ptime) {
+                return '前天 ' + time.split(' ')[1] + ' 更新了执行计划';
+            } else if (this.dateSum(this.day, staer) > 30) {
+                return '近30天无计划更新';
+            } else {
+                return time + ' 更新了执行计划';
+            }
+        },
+        dateSum(sDate1, sDate2) {
+            //sDate1和sDate2是2008-12-13格式
+            var aDate, oDate1, oDate2, iDays;
+            aDate = sDate1.split('-');
+            oDate1 = new Date(aDate[1] + '-' + aDate[2] + '-' + aDate[0]); //转换为12-13-2008格式
+            aDate = sDate2.split('-');
+            oDate2 = new Date(aDate[1] + '-' + aDate[2] + '-' + aDate[0]);
+            iDays = parseInt(Math.abs(oDate1 - oDate2) / 1000 / 60 / 60 / 24); //把相差的毫秒数转换为天数
+            return iDays;
+        },
+        returnPoint(item) {
+            let id = item.node_info.id;
+            let stats = item.status;
+            let arr = [{ name: '上级评分', pointList: [] }, { name: '特定指标评分', pointList: [] }];
+            item.score_info.forEach(e => {
+                if (stats == 0) {
+                    if (e.node_id < id) {
+                        if (e.node_code == 'score_supervisor') {
+                            //上级评分
+                            if (e.node_id == id && stats == 1) {
+                                arr[0].pointList.push(e.point + '(暂存)');
+                            } else {
+                                arr[0].pointList.push(e.point);
+                            }
+                        } else {
+                            //指定评分呢
+                            if (e.node_id == id && stats == 1) {
+                                arr[1].pointList.push(e.point + '(暂存)');
+                            } else {
+                                arr[1].pointList.push(e.point);
+                            }
+                        }
+                    }
+                } else {
+                    if (e.node_id <= id) {
+                        if (e.node_code == 'score_supervisor') {
+                            //上级评分
+                            if (e.node_id == id && stats == 1) {
+                                arr[0].pointList.push(e.point + '(暂存)');
+                            } else {
+                                arr[0].pointList.push(e.point);
+                            }
+                        } else {
+                            //指定评分呢
+                            if (e.node_id == id && stats == 1) {
+                                arr[1].pointList.push(e.point + '(暂存)');
+                            } else {
+                                arr[1].pointList.push(e.point);
+                            }
+                        }
+                    }
+                }
+            });
+            return arr;
+        },
+        openTx(item) {
+            this.employee_id = item.employee_id;
+            this.employeeID = item.record_id;
+            this.has_finish = item.record_id;
+            this.employeeDet(item.record_id, () => {
+                this.isTrack = true;
+            });
+        },
+        employeeDet(id, callBack) {
+            this.staffLoad = true;
+            this.$axiosUser('get', '/api/pro/per/package/employee/info', { id })
+            .then(res => {
+                let data = res.data.data;
+                this.apList = data.dimension;
+                this.recordMemberIds = data.record_member_ids;
+                callBack && callBack();
+            })
+            .finally(() => {
+                this.staffLoad = false;
+            });
+        },
+        openDetail2(item) {
+            this.$router.push({
+                path: '/staffAssDet',
+                query: {
+                    assID: this.package_id,
+                    employeeID: item.record_id,
+                    employeeIDs: item.employee_id
+                }
+            });
+        },
+        //我管理记录
+        getManagement() {
+            if (this.headValue.length == 0) {
+                return false;
+            }
+            this.glLoading = true;
+            this.$axiosUser('get', '/api/pro/per/package/management_record', { package_id: this.package_id || 0, name: this.name, page: 1, page_size: 5 })
+            .then(res => {
+                let list = res.data.data.list;
+                list.forEach(item => {
+                    if (item.employee_id) {
+                        //当是导入导出时，显示登录者
+                        item.userInfo = this.$getEmployeeMapItem(item.employee_id);
+                        if (this.$getEmployeeMapItem(item.employee_id).employee_detail) {
+                            item.dept_list = this.$getEmployeeMapItem(item.employee_id).employee_detail.dept_list;
+                        }
+                    }
+                });
+                this.glDataList = list;
+            })
+            .finally(() => {
+                this.glLoading = false;
+            });
+        },
+        //我评分的
+        getScorerRecord() {
+            if (this.headValue.length == 0) {
+                return false;
+            }
+            this.glLoading = true;
+            this.$axiosUser('get', '/api/pro/per/package/score_record', { package_id: this.package_id || 0, name: this.name, page: 1, page_size: 5 })
+            .then(res => {
+                let list = res.data.data.list;
+                list.forEach(item => {
+                    if (item.employee_id) {
+                        //当是导入导出时，显示登录者
+                        item.userInfo = this.$getEmployeeMapItem(item.employee_id);
+                        if (this.$getEmployeeMapItem(item.employee_id).employee_detail) {
+                            item.dept_list = this.$getEmployeeMapItem(item.employee_id).employee_detail.dept_list;
+                        }
+                    }
+                });
+                this.glDataList = list;
+            })
+            .finally(() => {
+                this.glLoading = false;
+            });
+        },
+        //搜索
+        searchList(data) {
+            this.name = data;
+            this.glIndex == '1' ? this.getManagement() : this.getScorerRecord();
+        },
+        //请求绩效树
+        assessTree() {
+            this.$axiosUser('get', '/api/pro/per/package/tree').then(res => {
+                if (res.data.code == 1) {
+                    this.options = res.data.data;
+                    let headValue = [];
+                    this.options.some(item => {
+                        if (item.list.length > 0) {
+                            headValue.push(item.id);
+                            headValue.push(item.list[0].id);
+                            return true;
+                        }
+                    });
+                    if (headValue.length > 0) {
+                        this.headValue = headValue;
+                    }
+                }
+            });
+        },
+        openDetail(item) {
+            if(!item.jobNew) return
+            if(this.activeName == 1) this.dialogTitle = "确认目标";
+            if(this.activeName == 2) this.dialogTitle = "录入结果";
+            if(this.activeName == 3) this.dialogTitle = "自评";
+            if(this.activeName == 4) this.dialogTitle = "互评";
+            if(this.activeName == 5) this.dialogTitle = "评分";
+            if(this.activeName == 6) this.dialogTitle = "审批";
+            this.dialogVisible = true;
+            // 任务详情
+            this.$axiosUser("get", `/performance/review/job/${this.user_info.site_id}/${item.jobNew.reviewIndicatorId}/${item.jobNew.taskId}`).then(res => {
+                this.dialogData = res.data.data
+            })
+            
+        },
+        // 处理未读信息
+        disposeMessage(item) {
+            if (item.type == 1 || item.type == 2) {
+                this.$router.push({
+                    path: '/staffAssDet',
+                    query: {
+                        assID: item.remark.package_id,
+                        employeeID: item.remark.packageEmployee_id,
+                        employeeIDs: item.remark.employee_id
+                    }
+                });
+            } else if (item.type == 3) {
+                //导入
+            } else {
+                //导出
+                window.open(this.$serverdomain + item.remark.file_path);
+            }
+            this.$axiosUser('post', '/api/pro/per/package/msg/cc', { id: item.id, type: item.type, employee_id: item.employee_id }).then(res => { });
+        },
+        //待办数量
+        getAgencyNum() {
+            this.$axiosUser('get', '/api/pro/per/package/msg/agency_num', { status: 0 }, 'v2').then(res => {
+                let data = res.data.data;
+                // this.editableTabs = [
+                //     { title: '全部待办', name: '0', num: data.all_total },
+                //     { title: '确认目标', name: '1', num: data.target },
+                //     { title: '录入结果', name: '2', num: data.confirm },
+                //     { title: '自评', name: '3', num: data.result_value },
+                //     { title: '互评', name: '4', num: data.score },
+                //     { title: '评分', name: '5', num: data.review },
+                //     { title: '评分', name: '5', num: data.level_confirm }
+                // ];
+            });
+        },
+        //待办
+        getAgency() {
+            this.loading = true;
+            let data = {
+                type: this.activeName,
+                page: 1,
+                pageSize: 10
+            }
+            this.$axiosUser("get", "/performance/review/job/389", data).then(res => {
+                this.agencyList = res.data.data.list;
+                this.editableTabs.forEach(item => { 
+                    if(item.name == this.activeName) item.num = this.agencyList.length
+                })
+                console.log(this.agencyList)
+                this.loading = false;
+            })
+        },
+        
+    }
+}
+
+</script>
+
+
+<style scoped="scoped" lang="scss">
+.zmBox {
+    width: 18px;
+    height: 18px;
+    background-color: #f26c69;
+    color: #fff;
+    text-align: center;
+    line-height: 18px;
+    font-size: 12px;
+    border-radius: 50%;
+    margin-right: 10px;
+}
+
+.more {
+    text-align: right;
+    color: #909399;
+    font-size: 14px;
+    padding: 16px 0px 0 0px;
+}
+
+.more span {
+    cursor: pointer;
+}
+
+.more span:hover {
+    color: #409EFF;
+}
+
+.dispose-left ::v-deep.el-badge__content.is-fixed {
+    position: absolute;
+    top: 20px;
+    right: -2px;
+}
+
+.tabs ::v-deep.el-badge__content.is-fixed {
+    position: absolute;
+    top: 50%;
+    right: -2px;
+}
+
+.all {
+    width: 100%;
+    height: 100%;
+    font-size: 14px;
+    border-radius: 4px;
+    display: flex;
+    flex-direction: column;
+}
+
+.item {
+    font-size: 14px;
+    cursor: pointer;
+    padding: 5px;
+}
+
+.item:hover {
+    background-color: #f5f7fa;
+}
+
+.content {
+    padding: 0 10px;
+}
+
+.message-content {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    word-break: break-all;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    line-height: 22px;
+    font-size: 14px;
+}
+
+.message-title {
+    height: 40px;
+    line-height: 40px;
+    font-size: 16px;
+    font-weight: normal;
+    position: relative;
+    padding: 0 5px;
+}
+
+.open-detail {
+    cursor: pointer;
+}
+
+.dispose-left,
+.gl-all {
+    background-color: #fff;
+    padding: 20px;
+    border-radius: 5px;
+    box-sizing: border-box;
+}
+
+.template-box {
+    background-color: #fff;
+    padding: 20px;
+    border-radius: 5px;
+    box-sizing: border-box;
+    margin-left: 10px;
+    padding: 10px;
+    box-sizing: border-box;
+
+    .title-box {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        height: 50px;
+        border-bottom: 1px solid #f1f1f1;
+        margin-bottom: 15px;
+
+        .tem-title {
+            font-weight: 600;
+        }
+    }
+}
+
+.left-main {
+    background-color: #fff;
+    padding: 20px;
+    border-radius: 5px;
+    margin-bottom: 10px;
+    box-sizing: border-box;
+}
+
+.title {
+    font-size: 14px;
+    margin-bottom: 15px;
+    border-bottom: 1px solid #ebebeb;
+    padding-bottom: 16px;
+}
+
+.wt {
+    padding: 15px;
+    border-radius: 4px;
+    border-radius: 5px;
+    background-color: #fff;
+}
+
+.wt-title {
+    font-size: 14px;
+}
+
+.wts {
+    margin-top: 20px;
+    line-height: 25px;
+    font-size: 14px;
+}
+
+
+.tabss {
+    position: absolute;
+    right: 0px;
+    top: 146px;
+    cursor: pointer;
+    z-index: 999;
+    .tab-title {
+        position: relative;
+        vertical-align: middle; 
+        display: inline-block;
+    }
+}
+
+.entrance {
+    padding: 15px;
+    border-radius: 4px;
+    border: 1px solid #ebebeb;
+    font-size: 14px;
+    width: 200px;
+    color: #222;
+    margin: 0 12px;
+    cursor: pointer;
+}
+
+.entrance:hover {
+    background-color: #f5f7fa;
+}
+
+.entrance.active {
+    background-color: #f5f7fa;
+}
+
+.entrance i {
+    font-size: 30px;
+    margin-right: 10px;
+}
+
+.plus-button {
+    display: block;
+    margin: 20px auto;
+}
+
+.flex-5 {
+    position: relative;
+}
+
+::v-deep .el-tabs__nav-wrap::after {
+    content: '';
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    width: 100%;
+    height: 1px !important;
+    background-color: #e4e7ed;
+    z-index: 1;
+}
+
+/* 右边 */
+.gg-img {
+    width: 100%;
+    height: 100px;
+    border-radius: 5px;
+    margin-top: 20px;
+}
+
+.echarts {
+    border-radius: 4px;
+    padding: 10px;
+}
+
+.echarts-header {
+    margin: 10px 0;
+}
+
+#eChart {
+    height: 300px;
+    width: 100%;
+}
+</style>

src/newPerformance/components/Workbench/EditNode.vue

@@ -0,0 +1,217 @@
+<template>
+    <el-dialog :title="dialogTitle" center :visible.sync="dialogVisible" width="600px" @close="save">
+        <div>
+            <div class="tips">自定义属性（只有通过excel上传发布的指标才有）</div>
+            <el-table :data="tableData" style="width: 100%; margin-bottom: 10px;" border stripe>
+                <el-table-column type="index" label="序号" width="50" align="center"></el-table-column>
+                <el-table-column prop="resume" label="考核结论" align="center">
+                </el-table-column>
+                <el-table-column prop="project" label="考核项目" align="center">
+                </el-table-column>
+                <el-table-column prop="remark" label="备注" align="center">
+                </el-table-column>
+                <el-table-column prop="resource" label="数据来源" align="center">
+                </el-table-column>
+            </el-table>
+            <div class="data-box">
+                <div class="label">考核人</div>
+                <div class="value">{{ dialogData.task && dialogData.task.assigneeName || '--' }}</div>
+            </div>
+
+            <div class="data-box">
+                <div class="label">考核名称</div>
+                <div class="value">{{ dialogData.reviewTitle || '--' }}</div>
+            </div>
+
+            <div class="data-box">
+                <div class="label">考核周期</div>
+                <div class="value">{{ dialogData.startTime | formatDate }} 至 {{ dialogData.startTime | formatDate }}
+                </div>
+            </div>
+
+            <div class="data-box" v-if="activeName == 1">
+                <div class="label">指标</div>
+                <div class="value">
+                    <el-input v-model="dialogData.title" placeholder="指标标题" style="width: 300px;" clearable
+                        @blur="handleEdit('title')"></el-input>
+                </div>
+            </div>
+
+            <div class="data-box" v-else>
+                <div class="label">指标</div>
+                <div class="value">
+                    {{ dialogData.title }}
+                </div>
+            </div>
+
+            <div class="data-box" style="margin: 30px auto;" v-if="activeName == 1">
+                <div class="label">规则</div>
+                <div class="value">
+                    <el-input type="textarea" v-model="dialogData.content" placeholder="规则说明" style="width: 300px;"
+                        clearable @blur="handleEdit('content')"></el-input>
+                </div>
+            </div>
+
+
+            <div class="data-box" v-else>
+                <div class="label">规则</div>
+                <div class="value">
+                    {{ dialogData.content }}
+                </div>
+            </div>
+
+            <div class="data-box" v-if="activeName == 1">
+                <div class="label">目标</div>
+                <div class="value">
+                    <el-input placeholder="目标值" v-model="dialogData.target" style="width: 300px;" clearable
+                        @blur="handleEdit('target')"></el-input>
+                </div>
+            </div>
+
+            <div class="data-box" v-else>
+                <div class="label">目标</div>
+                <div class="value">
+                    {{ dialogData.target }}
+                </div>
+            </div>
+
+            <div class="data-box" v-if="activeName == 1">
+                <div class="label">单位</div>
+                <div class="value">
+                    <el-input placeholder="单位值" v-model="dialogData.unit" style="width: 300px;" clearable
+                        @blur="handleEdit('unit')"></el-input>
+                </div>
+            </div>
+
+
+            <div class="data-box" v-else>
+                <div class="label">单位</div>
+                <div class="value">
+                    {{ dialogData.unit }}
+                </div>
+            </div>
+
+            <div class="data-box" v-if="activeName == 2">
+                <div class="label">结果值</div>
+                <div class="value">
+                    <el-input placeholder="结果值" v-model="dialogData.result" style="width: 300px;" clearable
+                        @blur="handleEdit('result')"></el-input>
+                </div>
+            </div>
+
+            <div class="data-box" v-else-if="activeName > 2">
+                <div class="label">结果值</div>
+                <div class="value">
+                    {{ dialogData.result }}
+                </div>
+            </div>
+
+            <!-- 评分 -->
+            <div class="data-box" v-if="activeName >= 3">
+                <div class="label">评分</div>
+                <div class="value">
+                    <el-input placeholder="评分" v-model="dialogData.scoreSelf" style="width: 300px;"
+                        clearable></el-input>
+                </div>
+            </div>
+            <!-- 评价 -->
+            <div class="data-box" v-if="activeName >= 3">
+                <div class="label">评价</div>
+                <div class="value">
+                    <el-input placeholder="评价" v-model="dialogData.unit" style="width: 300px;" clearable></el-input>
+                </div>
+            </div>
+
+        </div>
+        <div slot="footer">
+            <el-button @click="save">暂 存</el-button>
+            <el-button type="primary" @click="confirm">确 定</el-button>
+        </div>
+    </el-dialog>
+</template>
+
+<script>
+import moment from 'moment';
+import { mapGetters } from 'vuex';
+export default {
+    props: {
+        activeName: {
+            type: String,
+            default: "1"
+        },
+        dialogTitle: {
+            type: String,
+            default: ""
+        },
+        dialogVisible: {
+            type: Boolean,
+            default: false
+        },
+        dialogData: {
+            type: Object,
+            default: () => {}
+        }
+    },
+    filters: {
+        formatDate(val) {
+            if (val) return moment(val).format('YYYY-MM-DD')
+            else return "--"
+        }
+    },
+    data() {
+        return {
+            tableData: [
+                { resume: "随便写点什么", project: "人事年终考核", remark: "备注", resource: "数据来源" }
+            ]
+        }
+    },
+    computed: {
+        ...mapGetters(['user_info'])
+    },
+    methods: {
+        dialogBeforeClose() {
+
+        },
+        save() {
+            this.$emit("close")
+        },
+        confirm() {
+            this.$emit("close")
+        },
+        handleEdit(type) { 
+            let { reviewIndicatorId } = this.dialogData
+            let { taskId } = this.dialogData.task
+            let data = { taskId }
+            data[type] = this.dialogData[type]
+            this.$http.post(`/performance/review/target/confirm/${type}/${this.user_info.site_id}/${reviewIndicatorId}`, data)
+        }
+    }
+}
+
+</script>
+
+
+<style scoped="scoped" lang="scss">
+
+.tips {
+    height: 30px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #999;
+    margin: 0 auto 10px auto;
+}
+
+.data-box {
+    width: 500px;
+    height: 30px;
+    display: flex;
+    align-items: center;
+    margin: 0 auto 10px auto;
+
+    .label {
+        width: 100px;
+    }
+}
+
+</style>

src/newPerformance/views/ExamineDetails.vue

@@ -0,0 +1,251 @@
+<template>
+    <div class="box boxMinHeight">
+        <header class="header">
+            <div class="header-content flex-box-ce">
+                <!-- 返回按钮 -->
+                <div class="flex-box-ce header-left" @click="$router.go(-1)">
+                    <i class="el-icon-arrow-left fontColorC"></i>
+                    <el-tooltip class="item" effect="dark" :content="title" placement="bottom">
+                        <div class="text fontColorB font-flex-word">{{ title }}</div>
+                    </el-tooltip>
+                </div>
+                <div class="status-btn-box fadeInDown animated">
+                    <div class="status-btn">
+                        合格
+                    </div>
+                </div>
+
+            </div>
+
+        </header>
+        <div style="height: 1px; background-color: #DCDFE6;margin-top: 5px;"></div>
+
+        <el-table :data="tableData" stripe style="width: 100%; margin-top: 20px;" border
+            :header-cell-style="{ background: '#f5f7fa' }">
+            <el-table-column prop="index_name" label="指标" align="center">
+            </el-table-column>
+            <el-table-column prop="rules" label="规则" align="center">
+            </el-table-column>
+            <el-table-column prop="target" label="目标" align="center">
+            </el-table-column>
+            <el-table-column prop="unit" label="单位" align="center">
+            </el-table-column>
+            <el-table-column prop="weight" label="权重" align="center">
+            </el-table-column>
+            <el-table-column prop="formulae" label="计算公式" align="center">
+                <template slot-scope="scope">
+                    <div>
+                        <div v-for="item in scope.row.formulae" :key="item.id">
+                            {{ item.name }}
+                        </div>
+                    </div>
+                </template>
+            </el-table-column>
+            <el-table-column prop="confirm_target" label="确认目标" align="center">
+                <template slot-scope="scope">
+                    <el-switch v-model="scope.row.confirm_target"></el-switch>
+                </template>
+            </el-table-column>
+            <el-table-column prop="input_result" label="录入结果" align="center">
+                <template slot-scope="scope">
+                    <el-switch v-model="scope.row.input_result"></el-switch>
+                </template>
+            </el-table-column>
+            <el-table-column prop="self_assessment" label="自评" align="center">
+                <template slot-scope="scope">
+                    <el-switch v-model="scope.row.self_assessment"></el-switch>
+                </template>
+            </el-table-column>
+            <el-table-column prop="peer_assessmen" label="互评" align="center">
+                <template slot-scope="scope">
+                    <el-switch v-model="scope.row.peer_assessmen"></el-switch>
+                </template>
+            </el-table-column>
+            <el-table-column prop="grade" label="评分" align="center">
+                <template slot-scope="scope">
+                    <el-switch v-model="scope.row.grade"></el-switch>
+                </template>
+            </el-table-column>
+            <el-table-column prop="approval" label="审批" align="center">
+                <template slot-scope="scope">
+                    <el-switch v-model="scope.row.approval"></el-switch>
+                </template>
+            </el-table-column>
+            <el-table-column prop="carbon_copy" label="抄送" align="center">
+                <template slot-scope="scope">
+                    <el-switch v-model="scope.row.carbon_copy"></el-switch>
+                </template>
+            </el-table-column>
+        </el-table>
+        <el-button class="plus-button" icon="el-icon-plus" circle size="small"></el-button>
+    </div>
+</template>
+
+<script>
+
+export default {
+    data() {
+        return {
+            title: "项目经理2月份考核",
+            tableData: [
+                {
+                    id: 1,
+                    index_name: "指标A",
+                    rules: "1.规则1; 2.规则1",
+                    target: 100,
+                    unit: "人",
+                    weight: '20%',
+                    formulae: [
+                        { id: "1_1", name: "公式1" },
+                        { id: "1_2", name: "公式2" },
+                    ],
+                    confirm_target: false,
+                    input_result: false,
+                    self_assessment: false,
+                    peer_assessmen: false,
+                    grade: false,
+                    approval: false,
+                    carbon_copy: false
+                },
+                {
+                    id: 2,
+                    index_name: "指标B",
+                    rules: "1.规则1; 2.规则1",
+                    target: 200,
+                    unit: "吨",
+                    weight: '30%',
+                    formulae: [
+                        { id: "2_1", name: "公式1" },
+                        { id: "2_2", name: "公式2" },
+                    ],
+                    confirm_target: false,
+                    input_result: false,
+                    self_assessment: false,
+                    peer_assessmen: false,
+                    grade: false,
+                    approval: false,
+                    carbon_copy: false
+                }
+            ],
+        }
+    },
+
+    mounted() {
+        // this.$axiosUser("get", "/performance/template/info/389/5").then(res => {
+        //     console.log(res);
+        //     this.title = res.data.data.title
+        // })
+        // this.$axiosUser("get", "/performance/indicator/list/389/5").then(res => {
+        //     console.log(res);
+        // })
+
+    },
+    methods: {
+        editTableData() {
+            // /performance/indicator / target / { siteId } / { templateId }
+        }
+    }
+};
+</script>
+<style scoped="scoped" lang="scss">
+.box {
+    padding: 0 20px;
+    font-size: 14px;
+    background-color: #fff;
+    box-sizing: border-box;
+
+    &::-webkit-scrollbar {
+        width: 3px;
+        height: 10px;
+        background-color: #fff;
+    }
+
+    &::-webkit-scrollbar-thumb {
+        background-color: #d9d9d9;
+    }
+
+    /*头部样式*/
+    .header-content {
+        position: relative;
+        box-sizing: border-box;
+        height: 60px;
+        justify-content: space-between;
+
+        .header-left {
+            width: 230px;
+            box-sizing: border-box;
+            height: 60px;
+            cursor: pointer;
+
+            .el-icon-arrow-left {
+                font-size: 22px;
+            }
+
+            &:hover {
+                .el-icon-arrow-left {
+                    background-color: #f5f7fa;
+                    color: #222;
+                }
+            }
+
+            .text {
+                font-size: 16px;
+                font-weight: 600;
+                padding-left: 30px;
+
+                &::before {
+                    position: absolute;
+                    content: '';
+                    width: 1px;
+                    height: 36px;
+                    background-color: #ebebeb;
+                    left: 44px;
+                    top: 50%;
+                    margin-top: -18px;
+                }
+            }
+
+        }
+
+        .status-btn-box {
+            width: 120px;
+            height: 40px;
+            z-index: 10;
+            position: absolute;
+            top: 40px;
+            right: -20px;
+            .status-btn {
+                width: 100%;
+                height: 100%;
+                background: transparent;
+                border: 2px dashed #67C23A;
+                color: #67C23A;
+                text-align: center;
+                font-size: 20px;
+                line-height: 40px;
+                transform: rotate(45deg);
+            }
+        }
+    }
+
+    
+    .plus-button {
+        display: block;
+        margin: 20px auto;
+    }
+
+}
+
+/* 状态按钮动画 */
+@keyframes scaleAnimation {
+    from {
+        transform: scale(1.4);
+        transform: rotate(45deg);
+    }
+
+    to {
+        transform: scale(1);
+        transform: rotate(45deg);
+    }
+}
+</style>

src/newPerformance/views/Index.vue

@@ -0,0 +1,112 @@
+<template>
+    <div class="all">
+        <!-- 快捷入口 -->
+        <div class="left-main">
+            <div class="flex-box-ce">
+                <div class="entrance flex-box-ce" :class="currentId == item.id ? 'active' : ''"
+                    v-for="(item, index) in entranceList" :key="index" @click="changeEntrance(item)">
+                    <i :class="item.icon" :style="{ color: item.color }" />
+                    <span>{{ item.name }}</span>
+                </div>
+            </div>
+            
+        </div>
+        <!-- 快捷入口 -->
+
+        <div style="flex: 1;">
+            <Workbench v-if="currentId == 1" />
+            <MyPerformance v-if="currentId == 2" />
+            <ExamineRecord v-if="currentId == 3" />
+            <ExamineContrast v-if="currentId == 4" />
+            <RoleSetting v-if="currentId == 5" />
+        </div>
+        
+    </div>
+</template>
+
+<script>
+
+import Workbench from '../components/Workbench'; // 工作台
+import MyPerformance from '../components/MyPerformance'; // 我的考核
+import ExamineRecord from '../components/ExamineRecord'; // 考核记录
+import ExamineContrast from '../components/ExamineContrast'; // 考核对比
+import RoleSetting from '../components/RoleSetting'; // 角色设置
+export default {
+    name: 'job',
+    components: { Workbench, MyPerformance, ExamineRecord, ExamineContrast, RoleSetting },
+    data() {
+        return {
+            entranceList: [
+                { id: 1, name: '工作台', icon: 'el-icon-menu', color: "#1BAEED" },
+                { id: 2, name: '我的考核', icon: 'el-icon-data-analysis', color: "#EEA016" },
+                { id: 3, name: '考核记录', icon: 'el-icon-s-data', color: "#67c23a" },
+                { id: 4, name: '考核对比', icon: 'el-icon-c-scale-to-original', color: "#C38FE9" },
+                { id: 5, name: '角色设置', icon: 'el-icon-user-solid', color: "#4C78E6" }
+            ],
+            currentId: 1
+        };
+    },
+    
+    
+    methods: {
+        changeEntrance(item) {
+            this.currentId = item.id;
+        },
+    }
+};
+</script>
+
+<style scoped="scoped" lang="scss">
+
+
+
+.all {
+    width: 100%;
+    height: 100%;
+    font-size: 14px;
+    border-radius: 4px;
+    display: flex;
+    flex-direction: column;
+    .left-main {
+        background-color: #fff;
+        padding: 20px;
+        border-radius: 5px;
+        margin-bottom: 10px;
+        box-sizing: border-box;
+
+        /* 快捷入口 */
+        .entrance {
+            padding: 15px;
+            border-radius: 4px;
+            border: 1px solid #ebebeb;
+            font-size: 14px;
+            width: 200px;
+            color: #222;
+            margin: 0 12px;
+            cursor: pointer;
+
+            &:hover {
+                background-color: #f5f7fa;
+            }
+
+            &.active {
+                background-color: #f5f7fa;
+            }
+
+            i {
+                font-size: 30px;
+                margin-right: 10px;
+            }
+        }
+    }
+}
+
+
+
+
+
+
+
+
+
+</style>

src/newPerformance/views/TemplateDetails.vue

@@ -0,0 +1,746 @@
+<template>
+    <div class="box boxMinHeight">
+        <header class="header">
+            <div class="header-content flex-box-ce">
+                <!-- 返回按钮 -->
+                <div class="flex-box-ce header-left">
+                    <i class="el-icon-arrow-left fontColorC" @click="$router.go(-1)"></i>
+                    <el-tooltip class="item" effect="dark" :content="title" placement="bottom">
+                        <div class="text fontColorB font-flex-word">{{ title }}</div>
+                    </el-tooltip>
+                    <el-popover placement="right" width="400" trigger="click">
+                        <div class="flex-box-ce">
+                            <el-input v-model="title" placeholder="请输入模板名称" size="small"></el-input>
+                            <el-button type="primary" size="small" style="margin-left: 10px;"
+                                @click="editTitle()">确定</el-button>
+                        </div>
+                        <i class="el-icon-edit" slot="reference" style="margin-left: 10px; color: #999;"></i>
+                    </el-popover>
+                </div>
+
+                <!-- 按钮组 -->
+                <div class="header-right">
+                    <el-button type="primary">发布考核</el-button>
+                </div>
+            </div>
+        </header>
+
+        <div style="height: 1px; background-color: #DCDFE6; margin-top: 5px;"></div>
+
+        <el-alert class="bounce animated" type="warning" title="可在表格中直接编辑指标，规则 (规则支持富文本) ，目标，单位，权重，计算公式以及流程节点"
+            :closable="false" show-icon style="width: 100%; margin-top: 20px;"></el-alert>
+        <el-table :data="tableData" stripe style="width: 100%; margin-top: 20px;" border
+            :header-cell-style="{ background: '#f5f7fa' }">
+            <el-table-column prop="title" label="指标" align="center">
+                <template slot-scope="scope">
+                    <el-input v-model="scope.row.title" placeholder="" clearable
+                        @blur="handleEdit('title', scope.row.title, scope.row.indicatorId)"></el-input>
+                </template>
+            </el-table-column>
+            <el-table-column prop="content" label="规则" align="center">
+                <template slot-scope="scope">
+                    <el-input v-model="scope.row.content" placeholder="" clearable
+                        @blur="handleEdit('content', scope.row.content, scope.row.indicatorId)"></el-input>
+                </template>
+            </el-table-column>
+            <el-table-column prop="target" label="目标" align="center">
+                <template slot-scope="scope">
+                    <el-input v-model="scope.row.target" placeholder="" clearable
+                        @blur="handleEdit('target', scope.row.target, scope.row.indicatorId)"></el-input>
+                </template>
+            </el-table-column>
+            <el-table-column prop="unit" label="单位" align="center">
+                <template slot-scope="scope">
+                    <el-input v-model="scope.row.unit" placeholder="" clearable
+                        @blur="handleEdit('unit', scope.row.unit, scope.row.indicatorId)"></el-input>
+                </template>
+            </el-table-column>
+            <el-table-column prop="weight" label="权重" align="center">
+                <template slot-scope="scope">
+                    <el-input v-model="scope.row.weight" placeholder="" clearable
+                        @blur="handleEdit('weight', scope.row.weight, scope.row.indicatorId)"></el-input>
+                </template>
+            </el-table-column>
+            <el-table-column prop="formulae" label="计算公式" align="center">
+                <template slot-scope="scope">
+                    <div v-if="scope.row.expression.formulas && scope.row.expression.formulas.length > 0">
+                        <div v-for="item in scope.row.expression.formulas" :key="item.id">
+                            {{ item }}
+                        </div>
+                    </div>
+                </template>
+            </el-table-column>
+            <el-table-column prop="targetConfirms" label="确认目标" align="center" width="80">
+                <template slot-scope="scope">
+                    <el-switch :value="scope.row.flow.nodes[0].enable"
+                        @input="handleStatusChange(scope.row, 'targetConfirms')"></el-switch>
+                    <!-- <div v-for="item in scope.row.flow.nodes[0].children" :key="item.id">
+                        <div class="confirm-item" v-if="item.assigneeType == 'self'">
+                            被考核人
+                        </div>
+                        <div class="confirm-item" v-if="item.assigneeType == 'user'">
+                            指定人员
+                        </div>
+                        <div class="confirm-item" v-if="item.assigneeType == 'leader'">
+                            管理员
+                        </div>
+                        <div class="confirm-item" v-if="item.assigneeType == 'deptLeader'">
+                            部门负责人
+                        </div>
+                        <div class="confirm-item" v-if="item.assigneeType == 'post'">
+                            岗位
+                        </div>
+                    </div> -->
+                </template>
+            </el-table-column>
+            <el-table-column prop="resultInput" label="录入结果" align="center" width="80">
+                <template slot-scope="scope">
+                    <el-switch v-model="scope.row.flow.nodes[1].enable"
+                        @change="handleStatusChange(scope.row, 'resultInput')"></el-switch>
+                </template>
+            </el-table-column>
+            <el-table-column prop="scoreSelf" label="自评" align="center" width="80">
+                <template slot-scope="scope">
+                    <el-switch v-model="scope.row.flow.nodes[2].enable"
+                        @change="handleStatusChange(scope.row, 'scoreSelf')"></el-switch>
+                </template>
+            </el-table-column>
+            <el-table-column prop="scoreEachOther" label="互评" align="center" width="80">
+                <template slot-scope="scope">
+                    <el-switch v-model="scope.row.flow.nodes[3].enable"
+                        @change="handleStatusChange(scope.row, 'scoreEachOther')"></el-switch>
+                </template>
+            </el-table-column>
+            <el-table-column prop="scores" label="评分" align="center" width="80">
+                <template slot-scope="scope">
+                    <el-switch v-model="scope.row.flow.nodes[4].enable"
+                        @change="handleStatusChange(scope.row, 'scores')"></el-switch>
+                </template>
+            </el-table-column>
+            <el-table-column prop="reviews" label="审批" align="center" width="80">
+                <template slot-scope="scope">
+                    <el-switch v-model="scope.row.flow.nodes[5].enable"
+                        @change="handleStatusChange(scope.row, 'reviews')"></el-switch>
+                </template>
+            </el-table-column>
+            <el-table-column prop="cc" label="抄送" align="center" width="80">
+                <template slot-scope="scope">
+                    <el-switch v-model="scope.row.flow.nodes[6].enable"
+                        @change="handleStatusChange(scope.row, 'cc')"></el-switch>
+                </template>
+            </el-table-column>
+        </el-table>
+
+        <el-button class="plus-button" icon="el-icon-plus" circle size="small"></el-button>
+
+        <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="600px" :before-close="dialogBeforeClose">
+            <div>
+                <el-form ref="form" :model="form" label-width="80px" size="small">
+                    <el-form-item label="启用">
+                        <el-switch v-model="isDisable" @change="changeFormEnable"></el-switch>
+                    </el-form-item>
+
+                    <div class="handler-list" v-if="tagList && tagList.length > 0">
+                        <el-tag v-for="(item, index) in tagList" :key="index" closable @close="handleTagDelete(index)"
+                            @click="handleTagClick(item)">
+                            {{ item.assigneeType | filterType }}
+                        </el-tag>
+                        <el-button icon="el-icon-plus" size="mini" style="margin-bottom: 10px;"
+                            @click="addTagList()"></el-button>
+                    </div>
+
+                    <el-form-item
+                        v-if="dialogTitle == '确认目标' || dialogTitle == '录入结果' || dialogTitle == '评分' || dialogTitle == '互评' || dialogTitle == '审批' || dialogTitle == '抄送'"
+                        :label="formLabel">
+                        <el-radio-group v-model="form.assigneeType" :disabled="!isDisable">
+                            <el-radio-button label="leader">管理员</el-radio-button>
+                            <el-radio-button label="user">指定人员</el-radio-button>
+                            <el-radio-button label="self">被考核人</el-radio-button>
+                            <el-radio-button label="post">岗位</el-radio-button>
+                            <el-radio-button label="deptLeader">部门</el-radio-button>
+                        </el-radio-group>
+                    </el-form-item>
+
+
+                    <el-form-item v-if="form.assigneeType === 'leader'">
+                        <el-select v-model="selected_manager_ids" placeholder="请选择管理员" multiple :disabled="!isDisable"
+                            filterable style="width: 300px;" @change="changeManagerIds">
+                            <el-option v-for="item in managerList" :key="item.id" :label="item.name" :value="item.id"
+                                style="width: 300px;"></el-option>
+                        </el-select>
+                    </el-form-item>
+
+                    <el-form-item v-if="form.assigneeType === 'user'">
+                        <el-select v-model="selected_employee_ids" placeholder="请选择指定人员" multiple :disabled="!isDisable"
+                            filterable style="width: 300px;" @change="changeEmployeeIds">
+                            <el-option v-for="item in employeeMap" :key="item.id" :label="item.name" :value="item.id"
+                                style="width: 300px;"></el-option>
+                        </el-select>
+                    </el-form-item>
+
+                    <el-form-item v-if="form.assigneeType === 'post'">
+                        <el-select v-model="selected_post_ids" placeholder="请选择岗位" multiple :disabled="!isDisable"
+                            filterable style="width: 300px;" @change="changePostIds">
+                            <el-option v-for="item in postList" :key="item.id" :label="item.name" :value="item.id"
+                                style="width: 300px;"></el-option>
+                        </el-select>
+                    </el-form-item>
+
+                    <el-form-item v-if="form.assigneeType === 'deptLeader'">
+                        <div class="w270" style="position: relative;">
+                            <el-input auto-complete="off" v-model="deptVisibleName" placeholder="请选择部门"
+                                :disabled="!isDisable"></el-input>
+                            <div @click="openDeptSelector"
+                                style=" position: absolute; top: 0; right: 0; left: 0; bottom: 0; z-index: 9;"></div>
+                        </div>
+                    </el-form-item>
+
+                    <el-form-item
+                        v-if="dialogTitle == '确认目标' || dialogTitle == '录入结果' || dialogTitle == '评分' || dialogTitle == '互评' || dialogTitle == '审批'"
+                        label="多人时">
+                        <el-radio-group v-model="form.multipleType" :disabled="!isDisable">
+                            <el-radio-button label="or">任一人确认(或签)</el-radio-button>
+                            <el-radio-button label="parallel">按顺序确认(会签)</el-radio-button>
+                            <el-radio-button label="sequence">同时确认(会签)</el-radio-button>
+                        </el-radio-group>
+                    </el-form-item>
+
+                    <el-form-item
+                        v-if="dialogTitle == '确认目标' || dialogTitle == '录入结果' || dialogTitle == '评分' || dialogTitle == '互评' || dialogTitle == '审批'"
+                        label="允许">
+                        <el-checkbox-group v-model="form.allows" :disabled="!isDisable">
+                            <el-checkbox-button label="edit" v-if="dialogTitle == '确认目标'">修改指标</el-checkbox-button>
+                            <el-checkbox-button label="transfer"
+                                v-if="dialogTitle == '确认目标' || dialogTitle == '录入结果' || dialogTitle == '评分' || dialogTitle == '互评' || dialogTitle == '审批'">转交</el-checkbox-button>
+                        </el-checkbox-group>
+                    </el-form-item>
+                </el-form>
+            </div>
+            <div slot=" footer">
+                <el-button @click="closeDialog">取 消</el-button>
+                <el-button type="primary" @click="submitForm">确 定</el-button>
+            </div>
+        </el-dialog>
+
+        <EmployeeSelector :isChecKedAll="false" :can_select_employee="false" :can_select_dept="true" :multi="true"
+            :selected="dept_selected" :visible.sync="show_dept_selector" @confirm="dept_confirm" />
+
+    </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+import EmployeeSelector from '@/components/EmployeeSelector'; // 选择部门组件
+
+export default {
+    components: {
+        EmployeeSelector
+    },
+    data() {
+        return {
+            title: "默认标题",
+            templateId: "",
+            tableData: [],
+            dialogVisible: false,
+            dialogTitle: "",
+            isDisable: false,
+            nodeType: "", // 节点类型
+            form: {
+                id: "", // 指标ID
+                enable: false,
+                assigneeIds: [],// 处理人列表
+                assigneeType: "", // leader-上级 self-本人 post-岗位 user-指定员工 deptLeader-部门管理者,
+                multipleType: "", // or- 或签 parallel- 会签(同时处理) sequence - 会签(按顺序处理)
+                allows: [], // transfer-转交给别人处理 edit-修改指标(只有子目标确认节点有效) refuse-驳回上一个主节点	
+                type: "",
+                weight: 0,
+                children: []
+            },
+            formLabel: "",
+            // 部门可见
+            deptVisibleName: '',
+            dept_selected: { dept: [], employee: [] },
+            show_dept_selector: false,
+            managerList: [], // 管理员列表
+            deptList: [], // 部门列表 - 树形结构
+            dept_list: [], // 部门列表
+            employeeMap: this.$getEmployeeMap(), // 员工列表
+            postList: [], // 岗位列表
+            selected_manager_ids: [], // 选择的管理员列表
+            selected_dept_ids: [], // 选择的部门列表
+            selected_post_ids: [], // 选择的岗位列表
+            selected_employee_ids: [], // 选择的员工列表
+            tagList: [],
+            selectIndicatorId: "", // 选择的指标ID
+            selectNodes: [] // 选择操作的数据
+        }
+    },
+    computed: {
+        ...mapGetters(['user_info'])
+    },
+    watch: {
+        'form.assigneeType'(v) {
+            if (v == 'self') {
+                this.form.assigneeIds.push(this.user_info.id);
+                this.form.assigneeIds = Array.from(new Set(this.form.assigneeIds)); // 去重
+            }
+        }
+    },
+    filters: {
+        filterType(v) {
+            if (v == 'leader') return v = "管理员"
+            if (v == 'self') return v = "被考核人"
+            if (v == 'post') return v = "岗位"
+            if (v == 'user') return v = "指定人员"
+            if (v == 'deptLeader') return v = "部门"
+         }
+    },
+    created() {
+        this.templateId = this.$route.params.id
+        this.$axiosUser("get", `/performance/template/info/${this.user_info.site_id}/` + this.templateId).then(res => {
+            this.title = res.data.data.title
+        })
+        this.$axiosUser("get", `/performance/indicator/list/${this.user_info.site_id}/` + this.templateId).then(res => {
+            this.tableData = res.data.data.list
+        })
+
+        this.$axiosUser('get', '/api/pro/manager').then(res => {
+            this.managerList = res.data.data.list;
+        })
+
+        this.get_dept_list();
+        this.get_post_list();
+    },
+    methods: {
+        getTreeData(data) {
+            for (var i = 0; i < data.length; i++) {
+                data[i].checked = false;
+                if (data[i].children.length < 1) {
+                    // children若为空数组，则将children设为undefined
+                    data[i].children = undefined;
+                } else {
+                    // children若不为空数组，则继续 递归调用 本方法
+                    this.getTreeData(data[i].children);
+                }
+            }
+            return data;
+        },
+        // 获取部门
+        get_dept_list() {
+            this.$axiosUser('get', '/api/pro/department/tree', '', 'v2').then(res => {
+                this.dept_list = res.data.data.list; // 用来回显选择的部门数据
+                this.deptList = this.getTreeData(this.dept_list); // 处理成树状结构
+            });
+        },
+        // 岗位列表
+        get_post_list() {
+            let data = {
+                page: 1,
+                page_size: 999,
+                cate_id: -1,
+                name: ''
+            }
+            this.$axiosUser('get', '/api/pro/post/cate_post_list', data).then(res => {
+                this.postList = res.data.data.list;
+            })
+        },
+
+        openDeptSelector() {
+            if(this.isDisable) this.show_dept_selector = true
+        },
+        
+        editTableData() {
+            // /performance/indicator/target/{siteId}/{templateId}
+        },
+        // 编辑模板标题
+        editTitle() {
+            let title = this.title
+            if (title !== null && title !== '') {
+                this.$http.post(`/performance/template/title/${this.user_info.site_id}`, { templateId: this.templateId, title }).then(res => {
+                    console.log(res);
+                })
+            }
+        },
+
+        // 编辑指标名称，规则，权重，目标，单位
+        handleEdit(props, value, id) {
+            let url = '', data = {};
+            url = `/performance/indicator/${props}/${this.user_info.site_id}/${this.templateId}`;
+            data[props] = value;
+            data['indicatorId'] = id;
+            this.$http.post(url, data)
+        },
+
+        // 编辑节点弹框
+        dialogBeforeClose() {
+            this.dialogVisible = false;
+        },
+
+        // 操作节点
+        handleStatusChange(row, nodeType) {
+            this.tagList = [];
+            let { indicatorId } = row;
+            this.selectIndicatorId = indicatorId; // 指标ID
+            this.selectNodes = row.flow.nodes; // 所有节点
+            let handleNode // 正在操作的节点
+            this.selectNodes.forEach(select => {
+                if (select.type == nodeType) handleNode = select
+            })
+            if (handleNode.children && handleNode.children.length > 0) {
+                this.form = handleNode.children[0];
+                this.tagList = handleNode.children;
+            } else {
+                this.form = handleNode;
+            }
+            this.isDisable = this.selectNodes.enable
+            this.selected_manager_ids = [];
+            this.selected_employee_ids = [];
+            this.selected_post_ids = [];
+            this.selected_dept_ids = [];
+
+            // 回显选中的管理者
+            if (this.form.assigneeType == 'leader') { 
+                if (this.form.assigneeIds && this.form.assigneeIds.length > 0) {
+                    this.managerList.forEach(manager => {
+                        this.form.assigneeIds.forEach(assignee => {
+                            if(manager.id == assignee) this.selected_manager_ids.push(manager.id)
+                        })
+                    })
+                }
+            }
+
+            // 回显选中的被考核人
+            if (this.form.assigneeType == 'self') { }
+
+            // 回显选中的岗位
+            if (this.form.assigneeType == 'post') { 
+                if (this.form.assigneeIds && this.form.assigneeIds.length > 0) {
+                    this.postList.forEach(manager => {
+                        this.form.assigneeIds.forEach(assignee => {
+                            if (manager.id == assignee) this.selected_post_ids.push(manager.id)
+                        })
+                    })
+                }
+            }
+
+            // 回显选中的指定人员
+            if (this.form.assigneeType == 'user') { 
+                if (this.form.assigneeIds && this.form.assigneeIds.length > 0) {
+                    Object.keys(this.employeeMap).forEach(key => {
+                        this.form.assigneeIds.forEach(assignee => {
+                            if (key == assignee) this.selected_employee_ids.push(key*1)
+                        })
+                    })
+                    
+                }
+            }
+            // 回显选中的部门
+            if (this.form.assigneeType == 'deptLeader') { 
+                if (this.form.assigneeIds && this.form.assigneeIds.length > 0) {
+                    this.dept_list.forEach(dept => {
+                        this.form.assigneeIds.forEach(assignee => {
+                            if (dept.id == assignee) {
+                                this.dept_selected.dept.push({ dept_id: dept.id, dept_name: dept.name })
+                                this.deptVisibleName += (dept.name + ',')
+                            }
+                        })
+                    })
+                }
+            }
+            
+            if (nodeType == 'targetConfirms') {
+                this.dialogTitle = "确认目标"
+                this.formLabel = "确认人"
+            }
+            if (nodeType == 'resultInput') {
+                this.dialogTitle = "录入结果"
+                this.formLabel = "录入人"
+            } 
+            if (nodeType == 'scoreSelf') {
+                this.dialogTitle = "自评"
+            }
+            if (nodeType == 'scoreEachOther') {
+                this.dialogTitle = "互评"
+                this.formLabel = "互评人"
+            } 
+            if (nodeType == 'scores') {
+                this.dialogTitle = "评分"
+                this.formLabel = "评分人"
+            } 
+            if (nodeType == 'reviews') {
+                this.dialogTitle = "审批"
+                this.formLabel = "审批人"
+            } 
+            if (nodeType == 'cc') {
+                this.dialogTitle = "抄送"
+                this.formLabel = "抄送人"
+            } 
+            this.nodeType = nodeType; // 节点类型
+            this.dialogVisible = true;
+        },
+
+        changeFormEnable(v) {
+            this.isDisable = v;
+        },
+        // 选择管理员
+        changeManagerIds(v) {
+            if (v && v.length > 0) {
+                v.forEach(item => {
+                    this.form.assigneeIds.push(item)
+                })
+            }
+            this.form.assigneeIds = Array.from(new Set(this.form.assigneeIds)); // 去重
+        },
+        // 选择部门
+        dept_confirm(data) {
+            this.dept_selected = { dept: [], employee: [] };
+            let dept_ids = [];
+            this.deptVisibleName = ''
+            if (data.dept !== null && data.dept.length != 0) {
+                this.dept_selected = data
+                data.dept.forEach(element => {
+                    this.form.assigneeIds.push(element.dept_id)
+                    dept_ids.push(element.dept_id)
+                    this.deptVisibleName += (element.dept_name + ',')
+                });
+            }
+            this.form.assigneeIds = Array.from(new Set(this.form.assigneeIds)); // 去重
+        },
+        
+        // 选择员工
+        changeEmployeeIds(v) {
+            if (v && v.length > 0) {
+                v.forEach(item => {
+                    this.form.assigneeIds.push(item)
+                })
+            }
+            this.form.assigneeIds = Array.from(new Set(this.form.assigneeIds)); // 去重
+        },
+        
+        // 选择岗位
+        changePostIds(v) {
+            if (v && v.length > 0) {
+                v.forEach(item => {
+                    this.form.assigneeIds.push(item)
+                })
+            }
+            this.form.assigneeIds = Array.from(new Set(this.form.assigneeIds)); // 去重
+        },
+
+        
+        // 添加子节点
+        addTagList() {
+            let id, type;
+            if (this.nodeType == 'targetConfirms') {
+                id = "TC_" + Date.now() + Math.floor(Math.random() * 10000);
+                type = "targetConfirm"
+            }
+            // if (this.nodeType == 'resultInput')
+            // if (this.nodeType == 'scoreSelf')
+            // if (this.nodeType == 'scoreEachOther')
+            // if (this.nodeType == 'scores')
+            // if (this.nodeType == 'reviews')
+            // if (this.nodeType == 'cc') 
+            let obj = {
+                allows: [],
+                assigneeIds: [],
+                assigneeType: this.form.assigneeType,
+                children: [],
+                enable: true,
+                id,
+                leaderLevel: 1,
+                multipleType: "",
+                type,
+                weight: 0,
+            }
+            this.tagList.push(obj);
+            this.form = this.tagList[this.tagList.length - 1];
+            this.selected_manager_ids = [] // 选择的管理员列表
+            this.selected_dept_ids = [] // 选择的部门列表
+            this.selected_post_ids = [] // 选择的岗位列表
+            this.selected_employee_ids = [] // 选择的员工列表
+        },
+
+        handleTagClick(item) { 
+            console.log(item)
+            this.form = item;
+            this.selected_manager_ids = [];
+            this.selected_employee_ids = [];
+            this.selected_post_ids = [];
+            this.selected_dept_ids = [];
+
+            // 回显选中的管理者
+            if (this.form.assigneeType == 'leader') {
+                if (this.form.assigneeIds && this.form.assigneeIds.length > 0) {
+                    this.managerList.forEach(manager => {
+                        this.form.assigneeIds.forEach(assignee => {
+                            if (manager.id == assignee) this.selected_manager_ids.push(manager.id)
+                        })
+                    })
+                }
+            }
+
+            // 回显选中的被考核人
+            if (this.form.assigneeType == 'self') {
+                this.form.assigneeIds.push(this.user_info.id);
+            }
+
+            // 回显选中的岗位
+            if (this.form.assigneeType == 'post') {
+                if (this.form.assigneeIds && this.form.assigneeIds.length > 0) {
+                    this.postList.forEach(manager => {
+                        this.form.assigneeIds.forEach(assignee => {
+                            if (manager.id == assignee) this.selected_post_ids.push(manager.id)
+                        })
+                    })
+                }
+            }
+
+            // 回显选中的指定人员
+            if (this.form.assigneeType == 'user') {
+                if (this.form.assigneeIds && this.form.assigneeIds.length > 0) {
+                    Object.keys(this.employeeMap).forEach(key => {
+                        this.form.assigneeIds.forEach(assignee => {
+                            if (key == assignee) this.selected_employee_ids.push(key * 1)
+                        })
+                    })
+
+                }
+            }
+
+            // 回显选中的部门列表
+            if (this.form.assigneeType == 'deptLeader') {
+                if (this.form.assigneeIds && this.form.assigneeIds.length > 0) {
+                    this.dept_list.forEach(dept => {
+                        this.form.assigneeIds.forEach(assignee => {
+                            if (dept.id == assignee) {
+                                this.dept_selected.dept.push({ dept_id: dept.id, dept_name: dept.name })
+                                this.deptVisibleName += (dept.name + ',')
+                            }
+                        })
+                    })
+                }
+            }
+
+            this.form.assigneeIds = Array.from(new Set(this.form.assigneeIds))
+        },
+
+        handleTagDelete(index) {
+            if (this.tagList && this.tagList.length > 1) this.tagList.splice(index, 1)
+        },
+
+        closeDialog() {
+            this.dialogVisible = false
+        },
+        
+
+        submitForm() {
+            let data = {
+                indicatorId: this.selectIndicatorId,
+                nodes: []
+            }
+            data.nodes = this.selectNodes;
+            // data.nodes.enable = this.isDisable;
+            if (data.nodes.children && data.nodes.children.length > 0) data.nodes.children = this.tagList;
+            let url = `/performance/indicator/flow/${this.user_info.site_id}/${this.templateId}`
+            this.$http.post(url, data).then(res => {
+                if (res.code == 1) {
+                    this.tableData = []
+                    this.tableData.push(res.data);
+                    this.$message.success("操作成功");
+                    this.dialogVisible = false;
+                }
+            })
+            
+        }
+    }
+};
+</script>
+<style scoped="scoped" lang="scss">
+.box {
+    padding: 0 20px;
+    font-size: 14px;
+    background-color: #fff;
+    box-sizing: border-box;
+
+    &::-webkit-scrollbar {
+        width: 3px;
+        height: 10px;
+        background-color: #fff;
+    }
+
+    &::-webkit-scrollbar-thumb {
+        background-color: #d9d9d9;
+    }
+
+    /*头部样式*/
+    .header-content {
+        position: relative;
+        box-sizing: border-box;
+        height: 60px;
+        justify-content: space-between;
+
+        .header-left {
+            width: 230px;
+            box-sizing: border-box;
+            height: 60px;
+            cursor: pointer;
+
+            .el-icon-arrow-left {
+                font-size: 22px;
+            }
+
+            &:hover {
+                .el-icon-arrow-left {
+                    background-color: #f5f7fa;
+                    color: #222;
+                }
+            }
+
+            .text {
+                font-size: 16px;
+                font-weight: 600;
+                padding-left: 50px;
+
+                &::before {
+                    position: absolute;
+                    content: '';
+                    width: 1px;
+                    height: 36px;
+                    background-color: #ebebeb;
+                    left: 44px;
+                    top: 50%;
+                    margin-top: -18px;
+                }
+            }
+
+        }
+
+        .header-right {
+            width: 230px;
+            text-align: right;
+        }
+    }
+
+
+    .plus-button {
+        display: block;
+        margin: 20px auto;
+    }
+
+    .handler-list {
+        width: 500px;
+        margin: 0 auto 16px auto;
+        border-radius: 6px;
+        border: 1px solid #d7dae2;
+        padding: 10px 0 0 10px;
+        box-sizing: border-box;
+        display: flex;
+        flex-wrap: wrap;
+        .el-tag {
+            margin: 0 10px 10px 0;
+        }
+    }
+
+}
+</style>

src/okr/components/public/AddTask.vue

@@ -535,7 +535,7 @@ export default {
     			this.deptVisibleName += (element.dept_name+',')
         });
       }
-      this.form.dept_ids=dept_ids.toString();
+      this.form.dept_ids = dept_ids.toString();
     },
     employee_confirm_all(val){
       this.employee_selected_all.employee=val.employee;

src/okr/views/planTask/work.vue

@@ -21,7 +21,7 @@
               <div class="fontColorB" v-for="(item,index) in weekKrsList" :key="index">
                   <div class="flex-box-ce kr-item">
                     <div style="width: 20px;height: 20px;">
-                      <i v-if="item.plans.length>0" class="cursor" :class="item.isShow? 'el-icon-caret-bottom':'el-icon-caret-right'" @click.stop="showTask(item)"></i>
+                      <i v-if="item.plans.length > 0" class="cursor" :class="item.isShow? 'el-icon-caret-bottom':'el-icon-caret-right'" @click.stop="showTask(item)"></i>
                     </div>
                     <span class="okr-index">KR{{index+1}}</span>
                     <div class="flex-1 fontColorC" style="padding-right: 30px;">
@@ -323,7 +323,7 @@ export default {
       })
     },
     showTask(item){
-      item.isShow=!item.isShow;
+      item.isShow = !item.isShow;
     },
     formatDate(date) {
       var myyear = date.getFullYear();

src/performance/views/assessManagement/assessManagement.vue

@@ -1249,7 +1249,7 @@ export default {
   width: 70px;
   animation: example 1s;
 }
-
+/* 归档图片动画 */
 @keyframes example {
   from {
     transform: scale(1.4);
@@ -1260,7 +1260,6 @@ export default {
   }
 }
 
-/* 归档图片动画 */
 .all {
   position: relative;
   font-size: 14px;

src/performance/views/myPerformance/adjustment.vue

@@ -331,6 +331,7 @@
         <el-button type="primary" @click="saveAdjustment()">确 定</el-button>
       </span>
     </el-dialog>
+    
     <!-- 评分人 -->
     <EmployeeSelector :multi="false" :is_filtration_creator="false" :selected="selected" :isChecKedAll="false"
       :visible.sync="setAdministrator" @confirm="confirmAdministrator" />
@@ -357,7 +358,7 @@ import TestCalculate from '@/performance/components/public/TestCalculate';
 import {getExpressionStr} from '@/performance/utils/auth'
 export default {
   name: 'adjustment',
-  components: { EmployeeSelector, BrawerBox, PageHead, ClassSet,TestCalculate,Equation  },
+  components: { EmployeeSelector, BrawerBox, PageHead, ClassSet,TestCalculate, Equation  },
   data() {
     return {
       inputs: [], //分值区间(只读)

src/performance/views/performanceIndex.vue

@@ -3,7 +3,7 @@
     <LoadingAll :isType="3">
       <el-container>
         <el-aside>
-          <div style="padding: 20px;padding-left: 20px;font-weight: 600;border-bottom: 1px solid #f1f1f1;font-size: 16px;">绩效系统</div>
+          <div class="title" style="">绩效系统</div>
           <el-menu :default-active="activeIndex" class="el-menu-vertical-demo" ref="elMenu" :router="true" @select="activeRouter" :unique-opened="true">
             <template v-for="(item, index) in routers">
               <div v-if="item.children.length != 0" :key="index">
@@ -89,11 +89,11 @@ export default {
     $route(to,form) {
       // console.log(to.name,form.name)
        // 缓存页面，达到缓存页面条件的效果
-      if(to.name=='job'&&form.name=='assessManagement'){//首页
+      if(to.name=='job' && form.name=='assessManagement'){//首页
         this.returnArr('job')
-      }else if(to.name=='management'&&form.name=='job'){//我管理的-更多
+      }else if(to.name=='management' && form.name=='job'){//我管理的-更多
         this.returnArr('management')
-      }else if(to.name=='score'&&form.name=='job'){//我评分的-更多
+      }else if(to.name=='score' && form.name=='job'){//我评分的-更多
         this.returnArr('score')
       }else if(to.name=='assessManagement'&&form.name=='myPerformance'){//考核管理
         this.returnArr('assessManagement')
@@ -135,7 +135,7 @@ export default {
     this.setRouters();
   },
   mounted() {
-    this.getRole=this.$getRole(1);
+    this.getRole = this.$getRole(1);
     // this.$nextTick(() => {
     //   if (!this.$getCache('newNav') && this.getRole) {
     //     this.usingTheStrategy = true;
@@ -231,7 +231,7 @@ export default {
          { label: '设置', children: this.returnRoutersArr('set',routers), icon: '#icon-shezhi_jichushezhi'},
       ];
       this.$setCache('performance_routers',routersArr);
-      this.routers=routersArr
+      this.routers = routersArr
       let performance_path=this.$getCache('performance_path');
       if (performance_path) {
         this.activeIndex =performance_path;
@@ -290,6 +290,14 @@ export default {
 };
 </script>
 <style scoped="scoped" lang="scss">
+.title {
+  padding: 20px;
+  padding-left: 20px;
+  font-weight: 600;
+  border-bottom: 1px solid #f1f1f1;
+  font-size: 16px;
+  box-sizing: border-box;
+}
 .tio{
   font-size: 12px;
   background-color: #FFF2CC;

src/performance/views/statement/Export2Excel.js

@@ -1,92 +0,0 @@
-// 根据dom导出表格
-import { saveAs } from 'file-saver'
-import * as XLSX from 'xlsx'
-import * as XLSXStyle from "xlsx-style";
-
-function s2ab(s) {
-    var buf = new ArrayBuffer(s.length);
-    var view = new Uint8Array(buf);
-    for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;
-    return buf;
-}
-
-export function exportToExcel(idSelector, fileName, titleNum = 1) {
-    // 设置导出的内容是否只做解析，不进行格式转换     false：要解析， true:不解析
-    const xlsxParam = { raw: true }
-    let table = document.getElementById(idSelector)
-    // 因为element-ui的表格的fixed属性导致多出一个table，会下载重复内容，这里删除掉
-    // if (table.querySelector('.el-table__fixed-right')) {
-    //     table.removeChild(table.querySelector('.el-table__fixed-right'))
-    // }
-    // if (table.querySelector('.el-table__fixed')) {
-    //     table.removeChild(table.querySelector('.el-table__fixed'))
-    // }
-
-    const wb = XLSX.utils.table_to_book(table, xlsxParam)
-    let range = XLSX.utils.decode_range(wb.Sheets['Sheet1']['!ref'])
-    let cWidth = []
-    for (let C = range.s.c; C < range.e.c; ++C) {   //SHEET列
-        let len = 100 //默认列宽
-        let len_max = 400 //最大列宽
-        for (let R = range.s.r; R <= range.e.r; ++R) {  //SHEET行
-            let cell = { c: C, r: R }                    //二维 列行确定一个单元格
-            let cell_ref = XLSX.utils.encode_cell(cell)  //单元格 A1、A2
-            if (wb.Sheets['Sheet1'][cell_ref]) {
-                // wb.Sheets['Sheet1'][cell_ref].v = wb.Sheets['Sheet1'][cell_ref].v.replace(/\n/g, '\n');
-                // if (R == 0){
-                if (R < titleNum) {
-                    wb.Sheets['Sheet1'][cell_ref].s = {  //设置第一行单元格的样式 style
-                        alignment: {
-                            horizontal: 'center',
-                            vertical: 'center',
-                            wrapText: true // 启用自动换行
-                        }
-                    }
-                } else {
-                    wb.Sheets['Sheet1'][cell_ref].s = {
-                        alignment: {
-                            horizontal: 'center',
-                            vertical: 'center',
-                            wrapText: true // 启用自动换行
-                        }
-                    }
-                }
-                //动态自适应：计算列宽
-                let va = JSON.parse(JSON.stringify(wb.Sheets['Sheet1'][cell_ref].v))
-                var card1 = JSON.parse(JSON.stringify(va)).match(/[\u4e00-\u9fa5]/g) //匹配中文
-                var card11 = ''
-                if (card1) {
-                    card11 = card1.join('')
-                }
-                var card2 = JSON.parse(JSON.stringify(va)).replace(/([^\u0000-\u00FF])/g, '')  //剔除中文
-                let st = 0
-                if (card11) {
-                    // st += card11.length * 16  //中文字节码长度
-                    st += card11.length * 20  //中文字节码长度
-                }
-                if (card2) {
-                    // st += card2.length * 8  //非中文字节码长度
-                    st += card2.length * 10  //非中文字节码长度
-                }
-                if (st > len) {
-                    len = st
-                }
-            }
-        }
-        if (len > len_max) {//最大宽度
-            len = len_max
-        }
-
-        cWidth.push({ 'wpx': len })     //列宽
-    }
-    wb.Sheets['Sheet1']['!cols'] = cWidth
-    const wbout = XLSXStyle.write(wb, { bookType: 'xlsx', bookSST: true, type: 'binary', cellStyles: true})
-    try {
-        saveAs(new Blob([s2ab(wbout)], { type: '' }), `${fileName}.xlsx`)
-    } catch (e) {
-        if (typeof console !== 'undefined') {
-            console.log(e, wbout)
-        }
-    }
-    return wbout
-}

src/performance/views/statement/statistics copy.vue

@@ -1,372 +0,0 @@
-<template>
-  <div class="all">
-    <header class="flex-box flex-d-center">
-      <div class="header-wrapper flex-box-ce">
-        <div class="flex-box-ce" style="margin: 0 20px 20px 0;">
-          <el-select v-model="param.cycle_type" placeholder="请选择周期类型">
-            <el-option label="月度" value="2"></el-option>
-            <el-option label="季度" value="3"></el-option>
-            <el-option label="半年度" value="4"></el-option>
-            <el-option label="年度" value="5"></el-option>
-          </el-select>
-        </div>
-
-        <div class="flex-box-ce" v-if="param.cycle_type !== '5'" style="margin: 0 20px 20px 0;">
-          <el-date-picker v-model="param.year" :clearable="false" value-format="yyyy" type="year"
-            placeholder="选择年"></el-date-picker>
-        </div>
-
-
-        <div class="dept_wdiv flex-box-ce" style="margin: 0 20px 20px 0;">
-          <div class="dept_inp" @click="show_dept_selector = true">
-            <span v-if="deptVisibleName != ''">{{ deptVisibleName }}</span>
-            <span v-else style="color: #b9b9b9;">选择部门</span>
-          </div>
-          <i class="el-icon-arrow-down"></i>
-        </div>
-        <div class="flex-box-ce template" style="margin: 0 20px 20px 0;">
-          <el-cascader v-model="headValue" :options="options" :show-all-levels="false" clearable placeholder="请选择考核表"
-            :props="{ expandTrigger: 'hover', label: 'name', value: 'id', children: 'list' }"></el-cascader>
-        </div>
-
-        <div class="flex-box-ce template" style="margin: 0 0 20px 0;">
-          <el-select v-model="employee_ids" filterable clearable class="" placeholder="员工姓名搜索">
-            <el-option v-for="item in employees" :key="item.id" :label="item.name" :value="item.id"></el-option>
-          </el-select>
-        </div>
-      </div>
-    </header>
-
-    <div class="flex-box-ce" style="margin: 0 0 20px 0;">
-      <el-button icon="el-icon-s-promotion" type="primary" @click="exportToExcel('tableList', '考核对比')">导出报表</el-button>
-      <div class="orange" style="margin-left: 20px;">仅支持月度考核的对比</div>
-    </div>
-    <aside v-loading="tableDataLoad">
-      <el-table id="tableList" :data="tableData" style="width: 100%; " border stripe>
-        <el-table-column prop="employee_name" label="姓名" align="center">
-        </el-table-column>
-        <el-table-column prop="dept" label="部门" align="center">
-          <template slot-scope="scope">
-            <div v-if="scope.row.dept.length > 0">
-              <span v-for="(item, index) in scope.row.dept" :key="index">
-                {{ item }}
-                <span v-if="scope.row.dept.length - index > 1">,</span>
-              </span>
-            </div>
-            <span v-else>--</span>
-          </template>
-        </el-table-column>
-        <el-table-column :prop="item.key" :label="item.title" v-for="(item, index) in tableHeader" :key="item.key"
-          align="center">
-          <template slot-scope="scope">
-            <span>
-              {{ scope.row[item.key] && scope.row[item.key].final_point ? scope.row[item.key].final_point : "--" }}
-            </span>
-            <br/>
-            <span class="blue">
-              {{ scope.row[item.key] && scope.row[item.key].final_level ? scope.row[item.key].final_level : "--" }}
-            </span>
-          </template>
-        </el-table-column>
-      </el-table>
-      <!-- <Pagination :page="param.page" :page_size="param.page_size" :total="total" @handleSizeChange="handleSizeChange"
-        @handleCurrentChange="handleCurrentChange"></Pagination> -->
-    </aside>
-    <EmployeeSelector :title="'选择部门'" :isChecKedAll="false" :can_select_employee="false" :can_select_dept="true"
-      :dept_children="false" :selected="dept_selected" :visible.sync="show_dept_selector" @confirm="dept_confirm" />
-  </div>
-</template>
-
-<script>
-import JxSearch from '@/performance/components/public/JxSearch';
-import EmployeeSelector from '@/components/EmployeeSelector';
-import FileSaver from "file-saver";
-import XLSX2 from "xlsx";
-import XLSX from "xlsx-style";
-
-
-export default {
-  data() {
-    return {
-      tableDataLoad: false, //列表load
-      monthList: [
-        { label: '一月', code: 'month_01' },
-        { label: '二月', code: 'month_02' },
-        { label: '三月', code: 'month_03' },
-        { label: '四月', code: 'month_04' },
-        { label: '五月', code: 'month_05' },
-        { label: '六月', code: 'month_06' },
-        { label: '七月', code: 'month_07' },
-        { label: '八月', code: 'month_08' },
-        { label: '九月', code: 'month_09' },
-        { label: '十月', code: 'month_10' },
-        { label: '十一月', code: 'month_11' },
-        { label: '十二月', code: 'month_12' }
-      ],
-      total: 10,
-      tableHeader: [],
-      tableData: [],
-      // 选择部门
-      deptVisibleName: '',
-      dept_selected: { dept: [], employee: [] },
-      show_dept_selector: false,
-      // 考核模板
-      options: [], //
-      headValue: [],
-      // 参数
-      param: {
-        cycle_type: '2', // 周期类型 2-月度 3-季度 4-半年度 5-年度
-        year: this.$moment().format('YYYY'),
-        page: 0,
-        page_size: 10,
-        dept_ids: '',
-        employee_ids: '',
-        group_ids: ''
-      },
-      employee_ids: '',
-      employees: []
-    };
-  },
-  components: { JxSearch, EmployeeSelector },
-  watch: {
-    'param.cycle_type'(val) {
-      if (val == 5) delete this.param.year
-      else this.param.year = this.$moment().format('YYYY')
-      this.getDataList();
-    },
-    employee_ids(val) {
-      if (val) {
-        this.param.employee_ids = JSON.stringify([val]);
-      } else {
-        this.param.employee_ids = '';
-      }
-      this.getDataList();
-    },
-    'param.year'(val) {
-      this.getDataList();
-    },
-    headValue(val) {
-      if (val.length > 0) {
-        this.param.group_ids = JSON.stringify([val[val.length - 1]]);
-      } else {
-        this.param.group_ids = '';
-      }
-      this.getDataList();
-    }
-  },
-  created() {
-    this.employees = this.$getEmployeeMap(1);
-    this.assessTree();
-  },
-  mounted() {
-    this.getDataList();
-  },
-  methods: {
-    exportToExcel(tableId, fileName) {
-      const xlsxParam = { raw: true };
-      const wb = XLSX.utils.table_to_book(document.getElementById(tableId), xlsxParam);
-
-      // 遍历工作表中的所有单元格，处理换行
-      const ws = wb.Sheets[wb.SheetNames[0]];
-      for (const cell in ws) {
-        if (ws[cell].v && typeof ws[cell].v === 'string') {
-          ws[cell].v = ws[cell].v.replace(/<br\/>/g, '\n');
-          ws[cell].s = {
-            alignment: {
-              wrapText: true // 启用自动换行
-            }
-          };
-        }
-      }
-
-      const wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' });
-      try {
-        FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), fileName + '.xlsx');
-      } catch (e) {
-        console.error(e, wbout);
-      }
-    },
-
-
-    dept_confirm(data) {
-      //部门选择
-      this.dept_selected = { dept: [], employee: [] };
-      this.deptVisibleName = '';
-      let deptList_id = [];
-      if (data.dept !== null && data.dept.length != 0) {
-        this.dept_selected = data;
-        data.dept.forEach((element, index) => {
-          deptList_id.push(element.dept_id);
-          this.deptVisibleName += element.dept_name;
-          if (data.dept.length - index > 1) {
-            this.deptVisibleName += ',';
-          }
-        });
-      }
-      this.param.page = 1;
-      this.param.dept_ids = JSON.stringify(deptList_id);
-      this.getDataList();
-    },
-    isObject(value) {
-      return Object.prototype.toString.call(value) === '[object Object]';
-    },
-    getDataList() {
-      this.tableDataLoad = true;
-      // /api/pro/per/statistics/data
-      this.$axiosUser('get', '/api/pro/per/statistics/data', this.param)
-        .then(res => {
-          if (res.data.code == 1) {
-            this.tableData = res.data.data.list;
-            this.total = res.data.data.total;
-            this.tableHeader = res.data.data.header;
-            this.tableData.forEach(item => {
-              
-              Object.values(item).forEach(value => {
-                console.log(value)
-              })
-            })
-            console.log(this.tableData)
-          }
-        })
-        .finally(() => {
-          this.tableDataLoad = false;
-        });
-    },
-    //搜索
-    searchList(data) {
-      this.param.keywords = data;
-      this.getDataList();
-    },
-    // 页面变更
-    handleCurrentChange(val) {
-      this.param.page = val;
-      this.getDataList();
-    },
-    // 页面跳转
-    handleSizeChange(val) {
-      this.param.page_size = val;
-      this.getDataList();
-    },
-    //请求绩效树
-    assessTree() {
-      this.$axiosUser('get', '/api/pro/per/evaluation/all_group', { page: 1 }).then(res => {
-        if (res.data.code == 1) {
-          let data = res.data.data.list;
-          let options = [
-            { name: '月度', id: 2, list: [] },
-            { name: '日', id: 1, list: [] },
-            { name: '季度', id: 3, list: [] },
-            { name: '半年度', id: 4, list: [] },
-            { name: '年度', id: 5, list: [] },
-            { name: '自定义', id: 6, list: [] }
-          ];
-          data.forEach(item => {
-            options.forEach(item2 => {
-              if (item2.id == item.cycle_type) {
-                item2.list.push(item);
-              }
-            });
-          });
-          this.options = options;
-        }
-      });
-    }
-  }
-};
-</script>
-
-<style scoped="scoped" lang="scss">
-.el-table .cell {
-  white-space: pre-line;
-}
-
-.all {
-  background-color: #fff;
-  padding: 20px;
-  min-height: calc(100vh - 210px);
-}
-
-.title {
-  width: 70px;
-  text-align: right;
-  vertical-align: middle;
-  float: left;
-  font-size: 14px;
-  color: #606266;
-  line-height: 40px;
-  padding: 0 12px 0 0;
-  -webkit-box-sizing: border-box;
-  box-sizing: border-box;
-  font-weight: 600;
-}
-
-.dept_wdiv {
-  width: 240px;
-
-  .dept_inp {
-    width: 240px;
-    z-index: 9;
-    height: 36px;
-    line-height: 36px;
-    border: 1px solid #e0e0e0;
-    border-radius: 3px;
-    font-size: 12px;
-    padding: 0 10px;
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    cursor: pointer;
-    color: #676767;
-  }
-
-  i {
-    position: absolute;
-    top: 0;
-    right: 0;
-    top: 12px;
-    right: 10px;
-    font-size: 14px;
-    color: #b5b5b5;
-  }
-}
-
-.color_blue {
-  color: #1299f9;
-}
-
-/* 设置滚动条的宽度和背景色 */
-::v-deep .el-table__body-wrapper::-webkit-scrollbar {
-  width: 10px;
-  height: 10px;
-  background-color: #f9f9f9;
-}
-
-/* 设置滚动条滑块的样式 */
-::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb {
-  border-radius: 6px;
-  background-color: #c1c1c1;
-}
-
-/* 设置滚动条滑块hover样式 */
-::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb:hover {
-  background-color: #a8a8a8;
-}
-
-/* 设置滚动条轨道的样式 */
-::v-deep .el-table__body-wrapper::-webkit-scrollbar-track {
-  box-shadow: inset 0 0 5px rgba(87, 175, 187, 0.1);
-  border-radius: 6px;
-  background: #ededed;
-}
-
-@media screen and (max-width: 1680px) {
-  header {
-    .header-wrapper {
-      display: flex;
-      flex-wrap: wrap;
-    }
-
-  }
-
-}
-</style>

src/performance/views/statement/statistics.vue

@@ -41,17 +41,19 @@
         @click="exportToExcel2('mytable', '考核对比')">导出报表</el-button>
     </div>
     <aside v-loading="tableDataLoad">
-      <el-table ref="tableRef" id="mytable" :data="tableData" style="width: 100%; " border stripe>
+      <el-table ref="tableRef" id="mytable" :data="tableData" style="width: 100%; " border stripe
+        :header-cell-style="{ background: '#f5f7fa' }">
         <el-table-column prop="employee_name" label="姓名" align="center">
         </el-table-column>
         <el-table-column prop="dept" label="部门" align="center">
           <template slot-scope="scope">
-            <div v-if="scope.row.dept.length > 0"><span v-for="(item, index) in scope.row.dept" :key="index">{{ item }}<span v-if="scope.row.dept.length - index > 1">, </span></span></div>
+            <div v-if="scope.row.dept.length > 0"><span v-for="(item, index) in scope.row.dept" :key="index">{{ item
+                }}<span v-if="scope.row.dept.length - index > 1">, </span></span></div>
             <span v-else>--</span>
           </template>
         </el-table-column>
         <el-table-column :prop="item.key" :label="item.title" v-for="(item, index) in tableHeader" :key="item.key"
-          align="center" >
+          align="center">
           <template slot-scope="scope">
             <span v-if="scope.row[item.key] && scope.row[item.key].content">{{ scope.row[item.key].content }}</span>
             <span v-else>{{ '--\n--' }}</span>
@@ -72,12 +74,9 @@ import EmployeeSelector from '@/components/EmployeeSelector';
 import FileSaver from "file-saver";
 import XLSX from "xlsx";
 
-import { exportToExcel } from './Export2Excel'
-
 export default {
   data() {
     return {
-      content: "今天<br/>星期一",
       tableDataLoad: false, //列表load
       downloadLoading: false,
       monthList: [

src/point/views/pointHome.vue

@@ -16,7 +16,7 @@
       <div style="margin: 0 auto;width: 100%;margin-bottom: 10px;" v-if="experience_data">
           <el-carousel trigger="click" :interval="6000" height="125px">
             <el-carousel-item v-for="(item, index) in banner" :key="index">
-              <div  class="bacimg" :style="{backgroundImage: returnImgIndex(item.image)}" style="no-repeat: center;" @click="bannerImagePush(item.key)"></div>
+              <div class="bacimg" :style="{backgroundImage: returnImgIndex(item.image)}" style="no-repeat: center;" @click="bannerImagePush(item.key)"></div>
             </el-carousel-item>
           </el-carousel>
       </div>

src/router/performanceRouter.js

@@ -148,11 +148,6 @@ const routes = [
         label: '绩效等级配置'
       },
 
-
-
-
-
-
       // {
       //   path: '/CNC_center',
       //   name: 'CNC_center',
@@ -298,8 +293,45 @@ const routes = [
         name: 'management',
         component: () => import('@/performance/views/job/management'),
         label: '我管理记录的'
-      },
+      }
     ]
-  }
+  },
+  /* 新绩效系统 */
+  {
+    path: '/newPerformance',
+    name: 'newPerformance',
+    icon: '#icon-shezhi_jiaose',
+    component: () => import('@/newPerformance/views/Index'),
+    // meta: {
+    //   groupCode: 'statement',
+    //   role: ['masterAdministrator', 'childAdministrator', 'deptManager'],
+    //   jurisdiction: [16]
+    // },
+    label: '新绩效系统'
+  },
+  {
+    path: '/templateDetails/:id',
+    name: 'templateDetails',
+    icon: '#icon-shezhi_jiaose',
+    component: () => import('@/newPerformance/views/templateDetails'),
+    // meta: {
+    //   groupCode: 'statement',
+    //   role: ['masterAdministrator', 'childAdministrator', 'deptManager'],
+    //   jurisdiction: [16]
+    // },
+    label: '考核模板详情'
+  },
+  {
+    path: '/examineDetails/:id',
+    name: 'examineDetails',
+    icon: '#icon-shezhi_jiaose',
+    component: () => import('@/newPerformance/views/examineDetails'),
+    // meta: {
+    //   groupCode: 'statement',
+    //   role: ['masterAdministrator', 'childAdministrator', 'deptManager'],
+    //   jurisdiction: [16]
+    // },
+    label: '考核详情'
+  },
 ]
 export default routes

src/store/getters.js

@@ -10,7 +10,6 @@ const getters = {
   site_info: state => state.user.site_info,
   account_info: state => state.user.account_info,
   sumTotal: state => state.okrStore.sumTotal,
-  
   courseToken:state =>state.course.course_token,
   course_user_info:state=>state.course.course_user_info,
   course_site_info: state => state.course.course_site_info,

src/utils/axios2.js

@@ -0,0 +1,52 @@
+import axios from 'axios'
+import qs from 'qs'
+import Vue from 'vue'
+import store from '@/store'
+import Router from '@/router'
+import {
+    Message,
+    MessageBox
+} from 'element-ui'
+import {
+    getToken,
+    removeAllToken
+} from '@/utils/auth'
+
+const service = axios.create({
+    baseURL: process.env.BASE_API,
+    timeout: 20000,
+    headers: {
+        'Content-Type': 'application/json',
+        "Cache-Control": 'no-cache',
+        'pl': 'b'
+    },
+})
+
+
+service.interceptors.request.use(
+    config => {
+        if (getToken()) {
+            config.headers['A-TOKEN'] = getToken()
+        }
+        return config
+    },
+    error => {
+        Promise.reject(error)
+    }
+)
+
+//响应拦截器
+service.interceptors.response.use((response) => {
+    //只返回config内的data的数据，其他的不展示
+    const res = response.data
+    return res
+}, (error) => {
+    //如果请求出错会有弹框提示
+    Message({
+        type: "error",
+        message: error.message
+    })
+    return Promise.reject(error)
+})
+
+export default service

src/utils/axiosUser.js

@@ -15,7 +15,7 @@ import {
 const service = axios.create({
   baseURL: process.env.BASE_API,
   // baseURL:'https://oa.g107.com',
-  timeout: 20000,
+  timeout: 20000, // 
   headers: {
     'Content-Type': 'application/x-www-form-urlencoded',
     "Cache-Control": 'no-cache',

src/utils/http.js

@@ -0,0 +1,30 @@
+/****   http.js   ****/
+// 导入封装好的axios实例
+import service from './axios2'
+
+const http = {
+    /**
+     * methods: 请求
+     * @param url 请求地址 
+     * @param params 请求参数
+     */
+    get(url, params) {
+        const config = {
+            method: 'get',
+            url: url
+        }
+        if (params) config.params = params
+        return service(config)
+    },
+    post(url, params) {
+        const config = {
+            method: 'post',
+            url: url
+        }
+        if (params) config.data = params
+        return service(config)
+    },
+}
+//导出
+export default http
+

src/utils/tableMove.js

@@ -0,0 +1,124 @@
+import Vue from 'vue'
+
+const tablesMove = function (Vue) {
+    // 全局添加table左右拖动效果的指令
+    Vue.directive('tableMove', {
+        bind: function (el, binding, vnode) {
+            var odiv = el // 获取当前表格元素
+
+            // 修改样式小手标志
+            // el.style.cursor = 'pointer'
+            el.querySelector('.el-table .el-table__body-wrapper').style.cursor = 'pointer'
+
+            var mouseDownAndUpTimer = null
+            var mouseOffset = 0
+            var mouseFlag = false
+
+            let bindRef = binding.value[0] //绑定的表格的ref属性
+
+
+            odiv.onmousedown = (e) => {
+                const ePath = composedPath(e)
+                // 拖拽表头不滑动
+                if (ePath.some(res => {
+                    return res && res.className && res.className.indexOf('el-table__header') > -1
+                })) return
+
+                if (e.which !== 1) return
+
+                mouseOffset = e.clientX
+                mouseDownAndUpTimer = setTimeout(function () {
+                    mouseFlag = true
+                }, 80)
+            }
+
+            odiv.onmouseup = (e) => {
+                setTimeout(() => {
+                    // 解决拖动列宽行不对齐问题--渲染表格
+                    vnode.context.$refs[bindRef].doLayout()
+                }, 200)
+                if (mouseFlag) {
+                    mouseFlag = false
+                } else {
+                    clearTimeout(mouseDownAndUpTimer) // 清除延迟时间
+                }
+            }
+
+            odiv.onmouseleave = (e) => {
+                setTimeout(() => {
+                    // 解决拖动列宽行不对齐问题--渲染表格
+                    vnode.context.$refs[bindRef].doLayout()
+                }, 200)
+                mouseFlag = false
+            }
+
+            odiv.onmousemove = (e) => {
+                if (e.which !== 1) return
+
+                const divData = odiv.querySelector('.el-table .el-table__body-wrapper')
+                if (mouseFlag && divData) {
+                    // 设置水平方向的元素的位置
+                    divData.scrollLeft -= (-mouseOffset + (mouseOffset = e.clientX))
+                }
+            }
+
+            // 解决有些时候,在鼠标松开的时候,元素仍然可以拖动;
+            odiv.ondragstart = (e) => {
+                e.preventDefault()
+            }
+
+            odiv.ondragend = (e) => {
+                e.preventDefault()
+            }
+
+            // 点击复制文本
+            // odiv.onclick = (e) => {
+            //   setTimeout(() => {
+            //     if (mouseFlag) return
+            //     if (e.target.nodeName === 'SPAN') {
+            //       console.log(mouseFlag, e.target.nodeName, this)
+            //       var aux = document.createElement('input')
+            //       aux.setAttribute('value', e.target.outerText)
+            //       document.body.appendChild(aux)
+            //       aux.select()
+            //       document.execCommand('copy')
+            //       document.body.removeChild(aux)
+            //       if (document.execCommand('copy')) {
+            //         console.log('复制成功')
+            //       } else {
+            //         console.log('复制失败')
+            //       }
+            //     }
+            //   }, 300)
+            // }
+
+            // 是否拖拽可选中文字
+            odiv.onselectstart = () => {
+                return false
+            }
+
+            //浏览器Event.path属性不存在
+            function composedPath(e) {
+                // 存在则直接return
+                if (e.path) {
+                    return e.path
+                }
+                // 不存在则遍历target节点
+                let target = e.target
+                e.path = []
+                while (target.parentNode !== null) {
+                    e.path.push(target)
+                    target = target.parentNode
+                }
+                // 最后补上document和window
+                e.path.push(document, window)
+                return e.path
+            }
+        }
+    })
+}
+
+
+export default tablesMove
+
+