添加图片插件

src/main.js

@@ -16,9 +16,9 @@ import userImage from '@/components/UserImage'
 Vue.component('userImage', userImage)
 
 Vue.use(ElementUI);
-if (process.env.NODE_ENV === 'development') {
-  new VConsole()
-}
+// if (process.env.NODE_ENV === 'development') {
+//   new VConsole()
+// }
 
 Vue.prototype.$dd=dd;
 Vue.prototype.$getToken = getToken

src/views/ranking/custom_rank.vue

@@ -36,11 +36,6 @@
 							<el-form-item label="时间" label-width="40px">
 								<el-date-picker v-model="params.month"  size="medium" type="month" placeholder="请选择月份" value-format="yyyy-MM"></el-date-picker>
 							</el-form-item>
-<!-- 						<el-form-item label="规则分类" label-width="70px">
-								<el-cascader  size="medium"  class="date-picker-width" v-model="params.rule_id" :options="rule_trees" :props="props" @change="rule_null"
-									ref="rule" clearable filterable	placeholder="全部规则分类"
-								></el-cascader>
-							</el-form-item> -->
 							<el-form-item>
 								<el-checkbox v-model="sort" size="medium" label="由低到高" border></el-checkbox>
 							</el-form-item>
@@ -97,16 +92,85 @@
 				<el-form-item label="分组名称" prop="group_name">
 					<el-input v-model="newGroupForm.group_name" placeholder="请输入分组名称" auto-complete="off"></el-input>
 				</el-form-item>
-				<div>
+				
+				<el-form-item label="分组成员">
+				  <el-input auto-complete="off" v-model="employeeNames" placeholder="全部成员"></el-input>
+				  <div @click="isEmployeeShow=true" style="height:36px; position: absolute; top: 0; right: 0; left: 0; bottom: 0; z-index: 9;cursor:pointer"></div>
+				  <el-dialog title="选择人员" width="800px" :visible.sync="isEmployeeShow" @close="closeNone" append-to-body :before-close="handleClose">
 					<EmployeeSelector
-						v-if="groupShow"
+						v-if="isEmployeeShow"
 						ref="Employee"
 						:user_no_select="false"
 						:can_select_dept="true"
 						:selected="employees_selected"
 						:close_clear_data="true"
 						@confirm="move_employee_confirm"/>
-				</div>
+						<span slot="footer" class="dialog-footer">
+							<el-button @click="isEmployeeShow = false">取 消</el-button>
+							<el-button type="primary" @click="submitEmployee()">确 定</el-button>
+						</span>
+				   </el-dialog>
+				   
+				</el-form-item> 
+				<el-form-item label="积分规则">
+				  <el-input auto-complete="off" v-model="newGroupFormRules" placeholder="全部规则分类"></el-input>
+				  <div @click="ruleDialogTableVisibles" style="height:36px; position: absolute; top: 0; right: 0; left: 0; bottom: 0; z-index: 9;cursor:pointer"></div>
+				  <div style="margin-bottom:12px;">
+				    <span style="font-size:13px;color:rgb(138 138 138);position: absolute; top: 30px; left: 0;">{{ruleHint}}</span>
+				  </div>
+				  <el-dialog title="选择规则" width="800px" :visible.sync="ruleDialogTableVisible" @close="closeNone" append-to-body :before-close="handleClose">
+					  <div style="display:flex;position: relative;width:100%;height:40px">
+						<span style="position: absolute;line-height:40px;left:20px">已选：{{ valuesOrLength.length }}条</span>
+						<el-input type="text" class="search" style="position: absolute;right:20px;width:20%" placeholder="输入关键字搜索" v-model.trim="keyword" />
+					  </div>
+					  <el-row class="architecture">
+						<el-col :span="8" class="RuleLeft" style="height:500px">
+						  <div  class="rule_class_box">
+							<el-tree
+							  ref="menum"
+							  class="cate-tree"
+							  node-key="id"
+							  :accordion="true"
+							  :highlight-current="true"
+							  :data="rule_trees"
+							  :default-expand-all="false"
+							  :props="defaultProps"
+							  :expand-on-click-node="false"
+							  @node-click="handleNodeClick"
+							>
+							  <div content="tree"  v-if="!data.dis"  v-show="rule_trees.length != 0"  slot-scope="{ node, data }">
+								<span class="name">{{ data.name }}</span>
+							  </div>
+							</el-tree>
+						  </div>
+						</el-col>
+						<el-col :span="16" class="RuleRight" v-loading="tableLoadingRule" style="height:500px;overflow-y:auto">
+						  <el-table
+							ref="multipleTable"
+							:data="tableData_rule"
+							tooltip-effect="dark"
+							style="width: 100%;cursor:pointer"
+							@select="onTableSelect"
+							@select-all="selectAll"
+							@cell-click="clicktable"
+						  >
+							<el-table-column type="selection" width="55"></el-table-column>
+							<el-table-column prop="remark" :label="'全选'" show-overflow-tooltip></el-table-column>
+						  </el-table>
+						</el-col>
+					  </el-row>
+					  <span slot="footer" class="dialog-footer">
+						<el-button @click="ruleDialogTableVisible = false">取 消</el-button>
+						<el-button type="primary" @click="ruleDialogTableVisibleQD">确 定</el-button>
+					  </span>
+				   </el-dialog>
+				</el-form-item>
+				
+				<el-form-item label="统计周期" label-width="85px" prop="date_interval" :show-message="false">
+				  <el-select v-model="newGroupForm.date_interval" placeholder="请选择周期">
+					<el-option v-for="item in options_time" :key="item.value" :label="item.label" :value="item.value"></el-option>
+				  </el-select>
+				</el-form-item>
 			</el-form>
 			<div class="flex-box flex-v-ce">
 				<el-button type="danger" v-if="!popupType" :loading="delLoad" @click="delItem">删除</el-button>
@@ -115,6 +179,8 @@
 				<el-button type="primary" :loading="saveLoad" @click="subGroupForm('newGroupForm')">确 定</el-button>
 			</div>
 		</el-dialog>
+		
+	
 	</div>
 </template>
 
@@ -122,6 +188,8 @@
 import EmployeeSelector from '@/components/EmployeeSelector.vue';
 import noData from '@/components/noData';
 import moment from 'moment'
+var selecteds = [];
+let selectionID = [];
 export default {
 	components: { EmployeeSelector, noData },
 	data() {
@@ -147,10 +215,15 @@ export default {
 			},
 			rule_trees: [],
 			groupShow: false,
-			rules: { group_name: [{ required: true, message: '请输入分组名称', trigger: 'blur' },{ min: 2, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }],},
+			rules: { 
+				group_name: [{ required: true, message: '请输入分组名称', trigger: 'blur' },{ min: 2, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }],
+				date_interval: [{ required: true, message: '请选择周期', trigger: 'change' }],
+			},
 			newGroupForm:{
 				group_name: "",
-				employees: []
+				employees: [],
+				items:[],
+				date_interval:'1',
 			},
 			saveLoad: false,
 			delLoad: false,
@@ -161,6 +234,37 @@ export default {
 			sort: false,
 			
 			popupType: false,
+			
+			// 添加分组（第二期内容添加）
+			ruleDialogTableVisible:false,
+			defaultProps: {
+			  children: 'child',
+			  label: 'name'
+			},
+			tableLoadingRule:false,
+			tableData_rule: [],
+			options_time_value: '',
+			options_time: [
+			  {
+			    value: '1',
+			    label: '月度'
+			  },
+			  {
+			    value: '2',
+			    label: '季度'
+			  },
+			  {
+			    value: '3',
+			    label: '年度'
+			  }
+			],
+			newGroupFormRules:'',
+			ruleHint:'统计所有积分(基础分和工龄分除外)',
+			valuesOrLength: [],
+			keyword:'',
+			treedata: [],
+			isEmployeeShow:false,
+			employeeNames:'',
 		};
 	},
 	created() {
@@ -180,11 +284,207 @@ export default {
 			val?this.params.sort = 'ASC':this.params.sort = 'DESC'
 			this.open_right()
 		},
+		keyword() {
+		  //函数节流
+		  if (this.timer) {
+		    clearTimeout(this.timer);
+		  }
+		  //清空 全部
+		  if (!this.keyword) {
+		    this.tableData_rule = this.tableData_rule2;
+		    this.ifPitchOnChild(this.tableData_rule, selecteds);
+		    return;
+		  }
+		  this.timer = setTimeout(() => {
+		    const result = [];
+		    this.tableData_rule2.forEach(val => {
+		      if (val.remark.indexOf(this.keyword) > -1) {
+		        result.push(val);
+		      }
+		    });
+		    this.tableData_rule = result;
+		    this.ifPitchOnChild(this.tableData_rule, selecteds);
+		  }, 100);
+		}
 	},
 	mounted() {
 
 	},
 	methods: {
+		// 第二期内容
+		
+		//
+		submitEmployee(){
+			this.$refs.Employee.confirm();//调用组件的confirm（）；
+		},
+		//点击规则弹出窗口
+		ruleDialogTableVisibles() {
+		  this.tableLoadingRule = true;
+		  selecteds = this.valuesOrLength;
+		  //点击弹出窗口并展示所有数据
+		  let tableData_r = [];
+		  for (let i in this.itemList) {
+		    for (let a in this.itemList[i]) {
+		      tableData_r.push(this.itemList[i][a]);
+		    }
+		  }
+		  this.tableData_rule2 = tableData_r; //赋予筛选数据
+		  this.tableData_rule = tableData_r;
+		  this.ruleDialogTableVisible = true;
+		  this.ifPitchOnChild(this.tableData_rule, selecteds);
+		},
+		
+		//规则弹窗确定
+		ruleDialogTableVisibleQD() {
+		  let valuesLengths = [];
+		  for (let i in selecteds) {
+		    valuesLengths.push(selecteds[i]);
+		  }
+		  // valuesLengths = selecteds
+		  this.valuesOrLength = valuesLengths;
+		  this.newGroupForm.items = this.valuesOrLength;
+		  if (this.valuesOrLength.length >= 1) {
+		    this.newGroupFormRules = this.valuesOrLength.length + '条规则';
+		    this.ruleHint = '统计已选规则的积分(只选分类不指定规则的积分除外)'
+		  } else {
+		    this.newGroupFormRules = '';
+		    this.ruleHint = '统计所有积分(基础分和工龄分除外)'
+		  }
+		  this.ruleDialogTableVisible = false;
+		},
+		//点击某行
+		clicktable(row, column, cell, event) {
+		  let selectedsif = false;
+		  for (let i in selecteds) {
+		    if (row.id == selecteds[i]) {
+		      selectedsif = true;
+		      selecteds.splice(i, 1);
+		      this.toggleSelection([row], false);
+		    }
+		  }
+		  if (selectedsif == false) {
+		    selecteds.push(row.id);
+		    this.ifPitchOnChild(this.tableData_rule, selecteds);
+		  }
+		},
+		//全选
+		selectAll(selection) {
+		  for (let i in selection) {
+		    selectionID.push(selection[i].id);
+		  }
+		  let tableData_rules = []; //当前分页id
+		  for (let i in this.tableData_rule) {
+		    tableData_rules.push(this.tableData_rule[i].id);
+		  }
+		  selectionID = [...new Set(selectionID)];
+		  if (selection.length == 0) {
+		    //全不选
+		    var diff = [];
+		    var tmp = tableData_rules;
+		    selectionID.forEach(function(val1, i) {
+		      if (tableData_rules.indexOf(val1) < 0) {
+		        diff.push(val1);
+		      } else {
+		        tmp.splice(tmp.indexOf(val1), 1);
+		      }
+		    });
+		    selectionID = diff.concat(tmp);
+		  } else {
+		    //全选
+		    console.log('true');
+		  }
+		  selecteds = [...new Set(selectionID)];
+		  this.valuesOrLength = selecteds;
+		},
+		onTableSelect(rows, row) {
+		  let selected = rows.length && rows.indexOf(row) !== -1;
+		  if (selected) {
+		    selecteds.push(row.id);
+		  } else {
+		    for (let i in selecteds) {
+		      if (row.id == selecteds[i]) {
+		        selecteds.splice(i, 1);
+		      }
+		    }
+		  }
+		},
+		//关闭回调
+		closeNone() {
+		  selecteds = [];
+		},
+		//关闭
+		handleClose(done) {
+		  done();
+		},
+		//此方法：拿到当前点击规则分类的所有子节点ID,（为了包含子分类 规则）
+		menuIdInit(menus) {
+		  var _this = this;
+		  var _menu = menus;
+		  var menuId = [];
+		  var len = _menu.length;
+		  for (var i = 0; i < len; i++) {
+		    var item = _menu[i];
+		    if (item.child && item.child.length != 0) {
+		      var child = item.child;
+		      for (var j = 0; j < child.length; j++) {
+		        _menu[len + j] = child[j];
+		      }
+		      len = _menu.length;
+		    }
+		    menuId.push(item.id);
+		  }
+		  return menuId;
+		},
+		//点击规则分类
+		handleNodeClick(data) {
+		  let dataArr = this.menuIdInit([data]); //调用方法
+		  this.tableLoadingRule = true;
+		  this.keyword = ''; //切换规则重置搜索框
+		  let tableData_r = [];
+		  for (let i in this.itemList) {
+		    for (let a in this.itemList[i]) {
+		      for (let x in dataArr) {
+		        if (dataArr[x] == this.itemList[i][a].rule_id) {
+		          tableData_r.push(this.itemList[i][a]);
+		        }
+		      }
+		    }
+		  }
+		  this.tableData_rule2 = tableData_r; //赋予筛选数据
+		  this.tableData_rule = tableData_r;
+		  this.ifPitchOnChild(this.tableData_rule, selecteds);
+		},
+		ifPitchOnChild(item, indexID) {
+		  let pitchOnChild = [];
+		  for (let i in item) {
+		    for (let a in indexID) {
+		      //判断外层的值相不相等
+		      if (indexID[a] == item[i].id) {
+		        pitchOnChild.push(item[i]);
+		      }
+		    }
+		  }
+		  this.toggleSelection(pitchOnChild, true);
+		},
+		//默认选中
+		toggleSelection(rows, selected) {
+		  if (rows) {
+		    this.$nextTick(() => {
+		      rows.forEach(row => {
+		        this.$refs.multipleTable.toggleRowSelection(row, selected);
+		      });
+		    });
+		  } else {
+		    this.$refs.multipleTable.clearSelection();
+		  }
+		  setTimeout(() => {
+		    //给遮到层，让默认选中的有缓冲时间
+		    this.tableLoadingRule = false;
+		  }, 300);
+		},
+		
+		
+		
 		// 提交表单
 		subGroupForm(formName){
 		  this.$refs[formName].validate((valid) => {
@@ -213,10 +513,10 @@ export default {
 		//添加编辑组
 		saveFun(){
 		  this.saveLoad = true;
-		  this.$refs.Employee.confirm();//调用组件的confirm（）；
-		  if(this.newGroupForm.employees.length==0){return false};
 		  var url=this.popupType? '/api/integral/statistics/groups/create':'/api/integral/statistics/groups'
 		  this.newGroupForm.group_id=this.groups_info.id;
+		  console.log(this.newGroupForm)
+		  // return;
 		  var obj={//为编辑时
 			  name:this.newGroupForm.group_name,
 			  id:this.popupType?'':this.groups_info.id,
@@ -234,11 +534,12 @@ export default {
 				}else{
 					this.get_groups_list()
 				}
-				
 		    }else{
+				this.saveLoad = false
 		      this.$message.error(res.data.msg)
 		    }
 		  }).finally(()=>{
+			  console.log("123")
 				this.saveLoad = false
 		  })
 		},
@@ -283,17 +584,17 @@ export default {
 				})
 			})
 		},
+		
 		// 选人组件提交
 		move_employee_confirm(data){
+			this.employeeNames='';
 			var employee=data.employee;
-			if(employee.length==0){
-				this.$message.error("请选择人员");
-				this.saveLoad=false;
-				return;
-			}
 			employee.forEach(item=>{
+				this.employeeNames+=item.name+','
 				this.newGroupForm.employees.push(item.id);
 			})
+			this.employees_selected.employee=employee;
+			this.isEmployeeShow=false;
 		},
 		// 递归判断列表，把最后的children设为undefined
 		getTreeData(data) {
@@ -312,6 +613,7 @@ export default {
 		getRuleList() {
 			this.$axios('get','/api/integral/rule/trees', {cycle_type: 1}).then(res => {
 				this.rule_trees = this.getTreeData(res.data.data.rule_tree || []);
+				this.itemList = res.data.data.item_list; //规则
 			})
 		},
 		// 规则分类改变之后请求数据
@@ -384,7 +686,141 @@ export default {
 };
 </script>
 
-<style scoped="scoped">
+<style scoped lang="scss">
+.architecture {
+  display: flex;
+  text-align: center;
+  padding-left: 0px;
+  background-color: #fff;
+  width: 100%;
+  overflow: hidden;
+  cursor: default;
+  min-height: calc(60vh - 160px);
+}
+.architecture .RuleLine {
+  display: table-cell;
+  width: 1px;
+  min-height: 600px;
+  background: hsl(0, 2%, 76%);
+}
+.architecture .RuleLeft {
+  display: block;
+  text-align: center;
+  padding: 20px 10px;
+  border-right: none;
+  overflow-y: auto;
+  overflow-x: none;
+}
+/*滚动条的宽度*/
+
+.architecture .RuleLeft::-webkit-scrollbar {
+  width: 9px;
+  height: 9px;
+}
+.architecture .RuleRight::-webkit-scrollbar {
+  width: 9px;
+  height: 9px;
+}
+
+/*外层轨道。可以用display:none让其不显示，也可以添加背景图片，颜色改变显示效果*/
+
+.architecture .RuleLeft::-webkit-scrollbar-track {
+  width: 6px;
+  background-color: #fff0;
+  -webkit-border-radius: 2em;
+  -moz-border-radius: 2em;
+  border-radius: 2em;
+}
+.architecture .RuleRight::-webkit-scrollbar-track {
+  width: 6px;
+  background-color: #fff0;
+  -webkit-border-radius: 2em;
+  -moz-border-radius: 2em;
+  border-radius: 2em;
+}
+
+/*滚动条的设置*/
+
+.architecture .RuleLeft::-webkit-scrollbar-thumb {
+  background-color: #fff0;
+  background-clip: padding-box;
+  min-height: 28px;
+  -webkit-border-radius: 2em;
+  -moz-border-radius: 2em;
+  border-radius: 2em;
+}
+.architecture .RuleRight::-webkit-scrollbar-thumb {
+  background-color: #fff0;
+  background-clip: padding-box;
+  min-height: 28px;
+  -webkit-border-radius: 2em;
+  -moz-border-radius: 2em;
+  border-radius: 2em;
+}
+/*滚动条移上去的背景*/
+
+.architecture .RuleLeft:hover::-webkit-scrollbar-thumb {
+  overflow-x: none;
+  background-color: rgba(144, 147, 153, 0.3);
+}
+.architecture .RuleRight:hover::-webkit-scrollbar-thumb {
+  background-color: rgba(115, 118, 124, 0.3);
+}
+
+.architecture .RuleLeft .company_name {
+  position: relative;
+  display: block;
+  font-family: 'Microsoft YaHei';
+  text-align: left;
+  padding: 15px 28px 17px;
+  cursor: pointer;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  border-bottom: 1px #f8f8f8 solid;
+}
+.architecture .RuleLeft .company_name img {
+  position: relative;
+  display: inline-block;
+  top: 2px;
+  width: 18px;
+  height: 18px;
+  margin-right: 4px;
+}
+.architecture .RuleLeft ::v-deep .el-button {
+  margin-bottom: 16px !important;
+}
+.architecture .RuleRight {
+  position: relative;
+  display: table-cell;
+  text-align: left;
+  padding: 20px;
+}
+.architecture .RuleRight .title span .sapn {
+  display: inline-block;
+  vertical-align: middle;
+  max-width: 600px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.architecture .RuleRight:after {
+  content: ' ';
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  width: 1px;
+  background: #ebeef5;
+}
+.architecture .RuleRight .list_box {
+  width: 100%;
+  background: #fff;
+}
+.architecture .RuleRight .list_box ::v-deep table {
+  font-family: 'Microsoft YaHei';
+  width: 100% !important;
+}
 ::v-deep .el-radio .el-radio__label {
 	display: none;
 }
@@ -421,4 +857,34 @@ export default {
 ::v-deep .el-menu-item{
 	padding:0 10px !important;
 }
+.rule_class_box {
+	::v-deep .el-tree-node {
+		border-bottom: 1px #f8f8f8 solid;
+	}
+	::v-deep .el-tree-node__content {
+		padding: 10px 0;
+		// border-bottom: 1px #f8f8f8 solid;
+	}
+	::v-deep .el-tree-node__content:hover {
+		background: #ecf5ff;
+		border-radius: 4px;
+	}
+	::v-deep .is-current .el-tree-node__content .el-icon-caret-right {
+		color: #409eff !important;
+	}
+	::v-deep .is-current .el-tree-node__content .el-tree-node__label {
+		color: #409eff !important;
+	}
+	::v-deep .is-current .el-tree-node__children .el-icon-caret-right {
+		color: #c0c4cc !important;
+	}
+	::v-deep .is-current .el-tree-node__children .el-tree-node__label {
+		color: #606266 !important;
+	}
+	::v-deep .el-tree-node__label {
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+}
 </style>

src/views/ranking/manager_statistics.vue

@@ -1,24 +1,768 @@
 <template>
+  <div>
+    <div class="manager_statistics_box wlj">
+      <el-tabs v-model="activeName" type="card"><!-- 奖扣完成情况 -->
+        <el-tab-pane label="奖扣完成情况" name="second">
+          <el-form :model="condition" :inline="true" ref="formData">
 
-</template>
+			    <!-- 部门 -->
+            <el-form-item label="部门">
+              <el-cascader
+                v-model="dept_name_xq_xq"
+                :options="dept_trees"
+                @change="get_last_dept_null"
+                ref="dept"
+                filterable
+                change-on-select
+                placeholder="全公司"
+                clearable
+              ></el-cascader>
+            </el-form-item>
+
+			    <!-- 时间 -->
+            <el-form-item label="时间">
+              <el-date-picker
+                class="date-picker-width"
+                v-model="condition.month"
+                clearable
+                width="100%"
+                type="month"
+                placeholder="请选择月份"
+                value-format="yyyy-MM"
+              ></el-date-picker>
+            </el-form-item>
+
+			    <!-- 搜索框 -->
+            <el-form-item class="persons_names">
+              <el-input
+                v-model="condition.keyword"
+                placeholder="输入同事姓名"
+                max="200"
+                @keyup.enter.native="keyWordSelect"
+                class="persons_name"
+              >
+                <el-button slot="append" icon="el-icon-search" @click='search_box'></el-button>
+              </el-input>
+            </el-form-item>
+
+			    <!-- 达标选项 -->
+            <br>
+            <el-form-item>
+              <el-checkbox v-model="allPass" size="medium" label="只看全部达标的"></el-checkbox>
+            </el-form-item>
+
+			    <!-- 导出报表 -->
+            <el-form-item>
+              <el-button type="primary" plain @click="exportExcel" style="margin-left:20px">导出报表</el-button>
+            </el-form-item>
+
+          </el-form>
+
+		      <el-table :data="last" style="width: 100%" v-loading="loading" >
+            <el-table-column label="管理者">
+              <template slot-scope="scope">
+                <userImage
+                  class="fl"
+                  :id="scope.row.id"
+                  :user_name="scope.row.name"
+                  :img_url="scope.row.img_url"
+                  width="50px"
+                  height="50px"
+                ></userImage>
+                <span
+                  style=" margin-left: 10px; line-height: 50px; display: inline-block;"
+                >{{ scope.row.name }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column label="奖分" prop="scope_count">
+            <template slot-scope="scope">
+              <b>{{scope.row.reward.point}}&nbsp;</b>
+              <span :class="scope.row.reward.status == 1?'color_green':''">{{scope.row.reward.status==1?'达标':''}}</span><br/>
+              <span class="span_h">奖分目标 {{scope.row.reward.target}}</span>
+            </template>
+            </el-table-column>
+                <el-table-column label="扣分" prop="reward_count">
+            <template slot-scope="scope">
+              <b>{{scope.row.deduction.point}}&nbsp;</b>
+              <span :class="scope.row.deduction.status == 1?'color_green':''">{{scope.row.deduction.status==1?'达标':''}}</span><br/>
+              <span class="span_h">扣分目标 {{scope.row.deduction.target}}</span>
+            </template>
+			      </el-table-column>
+              <el-table-column label="奖扣比例" prop="deduct_count">
+				    <template slot-scope="scope">
+              <div v-if="scope.row.ratio.enable == 1">
+                <b>{{scope.row.ratio.reward_ratio}}&nbsp;:1 </b>
+                <span :class="scope.row.ratio.status == 1?'color_green':''">{{scope.row.ratio.status==1?'达标':''}}</span><br/>
+                <span class="span_h">比例目标 小于 {{scope.row.ratio.target}}<b>:</b>&nbsp;1</span>
+              </div>
+              <div v-else style="padding-left:21px"> —</div>
+            </template>
+            </el-table-column>
+            <el-table-column label="人次目标" prop="deduct_count">
+              <template slot-scope="scope">
+                <b>{{scope.row.exec.count}}&nbsp;</b>
+                <span :class="scope.row.exec.status == 1?'color_green':''">{{scope.row.exec.status==1?'达标':''}}</span><br/>
+                <span class="span_h">人次目标 {{scope.row.exec.target}}人次</span>
+              </template>
+			      </el-table-column>
+            <template slot="empty">
+              <div class="nopoint_box">
+                <div class="noimg noperson"></div>
+                <span class="title">没有对应的数据</span>
+              </div>
+            </template>
+          </el-table>
+
+		  
+
+          <center style="padding: 20px 0;">
+            <el-pagination
+              background
+              @size-change="handleSizeChange_xq"
+              @current-change="handleCurrentChange_xq"
+              :current-page="condition.page"
+              layout="total, sizes, prev, pager, next"
+              :page-size="condition.page_size"
+              :total="totals"
+            ></el-pagination>
+          </center>
+
+        </el-tab-pane>
+
+        
+        <el-tab-pane label="奖扣执行对比" name="first">
+          <el-form :model="formData" :inline="true" ref="formData">
+            <el-form-item label="部门">
+              <el-cascader
+                v-model="dept_name_xq"
+                :options="dept_tree"
+                @change="dept_null"
+                ref="depts"
+                filterable
+                change-on-select
+                placeholder="全公司"
+                clearable
+              ></el-cascader>
+            </el-form-item>
+            <el-form-item label="时间">
+              <el-date-picker
+                class="date-picker-width"
+                v-model="formData.month"
+                clearable
+                width="100%"
+                type="month"
+                placeholder="请选择月份"
+                value-format="yyyy-MM"
+              ></el-date-picker>
+            </el-form-item>
+          </el-form>
+
+            <!-- 
+            <el-row :gutter="20" style="margin-bottom: 20px;">
+              <el-col :span="5">
+                <el-date-picker class="date-picker-width" v-model="formData.month" width="100%" type="month" placeholder="请选择月份" value-format="yyyy-MM"></el-date-picker>
+              </el-col>
+              <el-col :span="5">
+                <el-checkbox v-model="allPass" size="medium" label="只看全部达标的" border></el-checkbox>
+              </el-col>
+              <el-col :offset="8" :span="6" class="search_box">
+                <el-input v-model="formData.keyword" @keyup.enter.native="search" placeholder="输入管理者姓名">
+                  <el-button slot="append" @click="search" icon="el-icon-search"></el-button>
+                </el-input>
+              </el-col>
+            </el-row> 
+                -->
+
+          <el-table :data="list" style="width: 100%" v-loading="loading" @row-click="open_detail">
+            <el-table-column label="管理者">
+              <template slot-scope="scope">
+                <userImage
+                  class="fl"
+                  :id="scope.row.id"
+                  :user_name="scope.row.name"
+                  :img_url="scope.row.img_url"
+                  width="50px"
+                  height="50px"
+                ></userImage>
+                <span
+                  style=" margin-left: 10px; line-height: 50px; display: inline-block;"
+                >{{ scope.row.name }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column label="管理范围(人)" prop="scope_count"></el-table-column>
+            <el-table-column label="人均奖分(次)" prop="reward_count"></el-table-column>
+            <el-table-column label="人均扣分(次)" prop="deduct_count"></el-table-column>
+            <template slot="empty">
+              <div class="nopoint_box">
+                <div class="noimg noperson"></div>
+                <span class="title">没有对应的数据</span>
+              </div>
+            </template>
+          </el-table>
+
+          <center style="padding: 20px 0;">
+            <el-pagination
+              background
+              @size-change="handleSizeChange"
+              @current-change="handleCurrentChange"
+              :current-page="formData.page"
+              :page-sizes="[10, 20, 30, 40, 50, 100]"
+              layout="total, sizes, prev, pager, next"
+              :page-size="formData.page_size"
+              :total="total"
+            ></el-pagination>
+          </center>
+
+          <el-drawer size="500px" :visible.sync="detail_show" :with-header="false" direction="rtl">
+            <el-button type="info" style="position: absolute; left: -100px;">test</el-button>
+            <div class="drawer_title">
+              {{item.name}}的奖扣统计
+              <el-tooltip placement="top">
+                <div slot="content" style="width: 300px">作为管理者，管理执行力是关键，每月按要求完成奖分和扣分任务。</div>
+                <span class="tips">?</span>
+              </el-tooltip>
+            </div>
+            <div class="chart_content">
+              <el-row :gutter="20" v-if="personalData !== null" v-loading="personalData_loading">
+                <el-col :span="4">
+                  <div class="dataItem">
+                    <p class="point">{{personalData.task.reward.point}}</p>
+                    <p>奖分</p>
+                    <p class="target">目标{{personalData.task.reward.target_point}}</p>
+                  </div>
+                </el-col>
+                <el-col :span="4">
+                  <div class="dataItem">
+                    <p class="point">{{personalData.task.deduction.point}}</p>
+                    <p>扣分</p>
+                    <p class="target">目标{{personalData.task.deduction.target_point}}</p>
+                  </div>
+                </el-col>
+                <el-col :span="5">
+                  <div class="dataItem">
+                    <p class="point">{{personalData.task.ratio.ratio}}:1</p>
+                    <p>奖扣比例</p>
+                    <p class="target">目标>{{personalData.task.ratio.target_ratio}}:1</p>
+                  </div>
+                </el-col>
+                <el-col :span="5">
+                  <div class="dataItem">
+                    <p class="point">{{personalData.task.exec.count}}</p>
+                    <p>奖扣人次</p>
+                    <p class="target">目标{{personalData.task.exec.target_count}}</p>
+                  </div>
+                </el-col>
+              </el-row>
 
+              <div class="chart-legend__wrap">
+                <span class="fl">月奖扣执行情况</span>
+                <span class="chart-legend__pink">奖分</span>
+                <span class="chart-legend__green">扣分</span>
+              </div>
+              <div id="situationChart" v-loading="echart_loading" style="height: 300px;"></div>
+
+              <div class="chart-legend__wrap">
+                <div class="fl">月奖扣人次</div>
+                <span class="chart-legend__pink">奖分人次</span>
+                <span class="chart-legend__green">扣分人次</span>
+              </div>
+              <div id="passengersChart" v-loading="echart_loading" style="height: 300px;"></div>
+            </div>
+          </el-drawer>
+        </el-tab-pane>
+      </el-tabs>
+    </div>
+  </div>
+</template>
 <script>
+import ECharts from "echarts";
 export default {
-	name:'manager_statistics',
-	data() {
-		return {
-		};
-	},
-	watch: {},
-	mounted() {
+  data() {
+    return {
+      last: [],
+      dept_trees: [],
+	    //完成情况
+	    condition: {
+        month: this.$moment().format("YYYY-MM"),//时间
+        page: 1,//当前页
+        page_size: 10,//每页数量
+        dept_id: 0,//部门id
+        keyword:'',//关键字
+        complete:'',//是否达标 1是
+      },
+      activeName: "second",
+      totals: null,
+      dept_name_xq_xq: "",
 
+	    //对比
+      loading: false,
+      choose_time: "",
+      input: "",
+      radio: "1",
+      formData: {
+        month: this.$moment().format("YYYY-MM"),
+        page: 1,
+        page_size: 10,
+        dept_id: 0,
+      },
+      total: null,
+      allPass: false,
+      list: [],
+      detail_show: false,
+      echart_loading: false,
+      item: {},
+      dept_name_xq: "",
+      dept_tree: [],
+      personalData_loading: false,
+      personalData: null,
+    };
+  },
+  watch: {
+	//对比
+    "formData.month"(val, old_val) {
+      this.formData.page = 1;
+      this.get_list();
+	},
+	//情况
+    "condition.month"(val, old_val) {
+      this.condition.page = 1;
+      this.get_last();
+	},
+	//查看全部达标
+    'allPass'(val,old_val){
+    	if(val){
+    		this.condition.complete = '1'
+    	}else{
+    		this.condition.complete = '0'
+      }
+      this.condition.page = 1
+    	this.get_last()
+	},
+	
+  },
+  methods: {
+    //情况
+	  get_last() {
+      let self = this;
+      self.loading = true;
+      self.$http("get","/api/integral/statistics/prize/list",self.condition,'v4').then((res) => {
+          if (res.data.code == 1) {
+            self.last = res.data.data.list;
+            self.totals = res.data.data.total;
+          } else {
+            self.$message.error(res.data.data.msg);
+          }
+        })
+        .finally(() => {
+          self.loading = false;
+        });
+	},
+	//部门
+	get_last_dept_null(val) {
+      if (val.length == 0) {
+        this.condition.dept_id = 0;
+      } else {
+		    this.condition.dept_id = val[0];
+      }
+      this.$nextTick(() => {
+        this.condition.page = 1;
+        this.$refs.dept.dropDownVisible = false; //监听值发生变化就关闭它
+        this.get_last();
+      });
 	},
-	methods: {
+	//搜索框
+	search_box(){
+		this.get_last();
+  },
+  //导出报表
+  exportExcel() {
+      let data = "";
+      //部门
+        this.condition.dept_id>0?data+="&rule_id="+ this.condition.dept_id:data+="&rule_id=0"
+      //时间
+        data+="&month="+this.condition.month
+      //搜索框
+        this.condition.keyword==''?data+="&keyword=0":data+="&keyword="+this.condition.keyword
+      //是否达标
+        this.condition.complete!=0?data+="&complete="+this.condition.complete:data+="&complete=0"
+      //当前页数
+        data+="&page="+this.condition.page
+      window.open(
+        process.env.BASE_API +
+          "/api/download/prize/list/v4?employee_id="+
+          this.$store.getters.user_info.id +
+          data,
+        "_blank"
+      );
+      this.dialogVisible = false;
+    },
+    //分页选择显示多少条
+    handleCurrentChange_xq(val) {
+      this.condition.page = val;
+      this.get_last();
+    },
+    //分页
+    handleSizeChange_xq(val){
+      this.condition.page_size = val;
+      this.get_last();
+    },
 
-	}
+    handleSizeChange(val) {
+      this.formData.page_size =val;
+      this.get_list();
+    },
+    handleCurrentChange(val) {
+      this.formData.page = val;
+      this.get_list();
+    },
+
+    get_list() {
+      let self = this;
+      self.loading = true;
+      self.$http("get","/api/integral/statistics/prize/list",self.formData,'v3').then((res) => {
+          if (res.data.code == 1) {
+            self.list = res.data.data.list;
+            self.total = res.data.data.total;
+          } else {
+            self.$message.error(res.data.data.msg);
+          }
+        })
+        .finally(() => {
+          self.loading = false;
+        });
+    },
+    search() {
+      this.get_list();
+    },
+    open_detail(row, column, event) {
+      this.detail_show = true;
+      this.item = row;
+      this.$nextTick(() => {
+        this.situationChart = ECharts.init(
+          document.getElementById("situationChart")
+        );
+        this.passengersChart = ECharts.init(
+          document.getElementById("passengersChart")
+        );
+      });
+      this.getData(() => (this.echart_loading = false));
+      this.getDataV1(() => (this.personalData_loading = false));
+    },
+    getChartOption(xAxisData, rewardData, deductionData) {
+      return {
+        tooltip: {
+          trigger: "axis",
+        },
+        grid: {
+          containLabel: true,
+          top: "4%",
+          right: "4%",
+          bottom: "5%",
+          left: "7%",
+        },
+        xAxis: {
+          type: "category",
+          boundaryGap: false,
+          axisLine: { lineStyle: { color: "#eee" } },
+          axisLabel: { color: "#333" },
+          data: xAxisData,
+        },
+        yAxis: {
+          position: "right",
+          axisLine: { lineStyle: { color: "#eee" } },
+          axisLabel: { color: "#333" },
+          type: "value",
+          splitLine: { lineStyle: { color: "#eee" } },
+        },
+        series: [
+          {
+            name: "奖分",
+            type: "line",
+            data: rewardData,
+            lineStyle: { normal: { color: "#F56C6C" } },
+          },
+          {
+            name: "扣分",
+            type: "line",
+            data: deductionData,
+            lineStyle: { normal: { color: "#53B87F" } },
+          },
+        ],
+      };
+    },
+    // v2
+    getData(callBack) {
+      this.echart_loading = true;
+      const data = {
+        employee_id: this.item.id || 0,
+        month: this.formData.month,
+      };
+      this.$http('get',"/api/integral/statistics/prize",data)
+        .then((res) => {
+          if (res.data.code === 1) {
+            const item = res.data.data;
+            this.employeeName = item.name;
+            const deduct = item.chart.deduct;
+            const situationRewardData = [];
+            const situationDeductionData = [];
+            const passengersRewardData = [];
+            const passengersDeductionData = [];
+
+            const xAxisData = item.chart.reward.map((o, i) => {
+              // 降分分数
+              situationDeductionData.push(item.chart.reward[i].point);
+              // 扣分分数
+              passengersDeductionData.push(item.chart.deduct[i].point);
+              // 奖分次数
+              situationRewardData.push(item.chart.reward[i].count);
+              // 扣分次数
+              passengersRewardData.push(item.chart.deduct[i].count);
+              return o.date;
+            });
+            this.situationChart.setOption(
+              this.getChartOption(
+                xAxisData,
+                situationDeductionData,
+                passengersDeductionData
+              )
+            ); //奖分数值、扣分数值
+            this.passengersChart.setOption(
+              this.getChartOption(
+                xAxisData,
+                situationRewardData,
+                passengersRewardData
+              )
+            ); //月奖扣人次
+          }
+        })
+        .finally(() => {
+          this.echart_loading = false;
+        });
+    },
+    // v1
+    getDataV1(callBack) {
+      let self = this;
+      self.personalData_loading = true;
+      const data = {
+        employee_id: this.item.id || 0,
+        month: this.formData.month,
+      };
+      self
+        .$http("get","/api/integral/statistics",data,)
+        .then((res) => {
+          if (res.data.code == 1) {
+            self.personalData = res.data.data;
+          } else {
+            self.$message.error(res.data.data.msg);
+          }
+        })
+        .catch((e) => {
+          self.$message.error(res.data.data.msg);
+        })
+        .finally(() => {
+          self.personalData_loading = false;
+        });
+    },
+    dept_null(val) {
+      if (val.length == 0) {
+        this.formData.dept_id = 0;
+      } else {
+        this.formData.dept_id = this.dept_name_xq[this.dept_name_xq.length - 1];
+      }
+      this.$nextTick(() => {
+        this.formData.page = 1;
+        this.$refs.depts.dropDownVisible = false;
+        this.get_list();
+      });
+    },
+    // 递归判断列表，把最后的children设为undefined
+    getTreeData(data) {
+      for (var i = 0; i < data.length; i++) {
+        if (data[i].children.length < 1) {
+          // children若为空数组，则将children设为undefined
+          data[i].children = undefined;
+        } else {
+          // children若不为空数组，则继续 递归调用 本方法
+          this.getTreeData(data[i].children);
+        }
+      }
+      return data;
+    },
+  },
+  mounted() {
+    if (localStorage.getItem("dept_tree")) {
+      this.dept_tree = this.getTreeData(
+        JSON.parse(localStorage.getItem("dept_tree"))
+      );
+      this.dept_trees = this.getTreeData(
+        JSON.parse(localStorage.getItem("dept_tree"))
+      );
+    }
+
+	// this.get_list();
+ //    this.get_last();
+  },
 };
 </script>
+<style scoped lang="scss">
+.search_box {
+  ::v-deep button:active {
+    background: #26a2ff;
+  }
+ ::v-deep button:active .el-icon-search {
+    color: #fff;
+  }
+}
+.date-picker-width {
+  width: 100% !important;
+}
+.color_green {
+  color: #67c23a;
+}
+.nopoint_box {
+  display: inline-block;
+  text-align: center;
+  width: 100%;
+  margin-bottom: 10px;
+}
+.noimg {
+  display: inline-block;
+  width: 110px;
+  height: 110px;
+  margin: 22px auto 16px;
+  /* background:url("/static/images/nodata_default.png") no-repeat center; */
+  background-size: 99%;
+}
+.noperson {
+  display: inline-block;
+  width: 110px;
+  height: 110px;
+  line-height: none;
+  margin: 22px auto 16px;
+  background: url("/static/images/noperson_default.png") no-repeat center;
+  background-size: 99%;
+}
+.title {
+  display: block;
+  text-align: center;
+  font-size: 12px !important;
+  line-height: 30px;
+  color: #909399 !important;
+  padding: 0;
+}
+.nopoint_box a {
+  color: #26a2ff;
+}
+.chart_content {
+  height: 90vh;
+  overflow-y: auto;
+  overflow-x: hidden;
+  .chart-legend__wrap {
+    text-align: right;
+    padding: 20px;
+    padding-right: 50px;
+    & .chart-legend__pink {
+      position: relative;
+      padding-left: 12px;
+      padding-right: 5px;
+      &:after {
+        content: "";
+        position: absolute;
+        margin-top: -2px;
+        top: 35%;
+        left: 0;
+        width: 8px;
+        height: 8px;
+        background: #f56c6c;
+        border-radius: 100%;
+      }
+    }
 
-<style scoped="scoped">
+    & .chart-legend__green {
+      position: relative;
+      padding-left: 12px;
+      &:after {
+        content: "";
+        position: absolute;
+        margin-top: -2px;
+        top: 35%;
+        left: 0;
+        width: 8px;
+        height: 8px;
+        background: #53b87f;
+        border-radius: 100%;
+      }
+    }
+  }
+}
 
-</style>
+// 滚动条样式
+.chart_content::-webkit-scrollbar-track {
+  -webkit-box-shadow: inset 0 0 5px rgb(255, 255, 255);
+  border-radius: 5px;
+  background-color: rgb(255, 255, 255);
+}
+.chart_content::-webkit-scrollbar {
+  width: 5px;
+  background-color: rgba(201, 201, 201, 0);
+}
+.chart_content::-webkit-scrollbar-thumb {
+  border-radius: 5px;
+  -webkit-box-shadow: inset 0 0 5px rgb(153, 145, 145) (160, 154, 154);
+  background-color: rgb(168, 167, 167);
+}
+
+.dataItem {
+  text-align: center;
+  .point {
+    font-size: 22px;
+    color: #26a2ff;
+    margin: 10px 0;
+  }
+  .target {
+    font-size: 12px;
+    color: #909399;
+  }
+}
+.drawer_title {
+  font-size: 18px;
+  padding: 20px;
+}
+.manager_statistics_box {
+  background-color: #ffffff;
+  padding: 20px;
+  min-height: calc(100vh - 160px);
+  ::v-deep .el-row .el-checkbox .el-checkbox__label {
+    line-height: 20px;
+  }
+}
+.tips {
+  background: #409eff;
+  border-radius: 50%;
+  width: 14px;
+  height: 14px;
+  color: #fff;
+  display: inline-block;
+  font-size: 12px;
+  line-height: 14px;
+  text-align: center;
+}
+.el-form-item__label {
+  width: 0px !important;
+}
+.wlj{
+	& .color_green{
+		color: #49d3a7;
+	}
+	& .color_red{
+		color: #f04b56;
+	}
+}
+b{
+	font-size: 14px;
+}
+.span_h{
+	font-size: 13px;
+	color: #898c94;
+}
+</style>

src/views/set/rule.vue

@@ -12,7 +12,7 @@
 						<el-tree
 							accordion
 							:data="rule_tree"
-							class="cate-tree"
+							 class="cate-tree"
 							:props="defaultProps"
 							:highlight-current="true"
 							@node-click="handleNodeClick"