dd_pc/src/views/ranking/custom_rank.vue

<template>
	<div class="all-box">
		<div class="all">
			<div class="flex-box">
				<div class="terr-left">
					<el-button size="medium" @click="addGroup" type="primary">新建分组</el-button>
					<el-menu default-active="0" class="el-menu-vertical-demo" style="border: none" v-if="groups_list.length>0" v-loading="groups_loading">
						<el-menu-item
							style="height: 47px;line-height: 47px;"
							:index="index.toString()"
							class="font-flex-word"
							v-for="(item, index) in groups_list"
							:key="index"
							@click="open_right(item)"
							v-show="item.code !== 'employee'"
						>
							<i class="el-icon-document-copy"></i>
							<span slot="title">{{ item.name }}</span>
						</el-menu-item>
					</el-menu>
					<div v-else style="text-align: center;margin-top: 10%;" class="fontColorF">
						<img src="@/assets/image/nodata.png" style="width: 180px;height: 120px;margin: 30px auto;">
						还没有自定义分组
					</div>
				</div>
				<div class="terr-right border-right flex-1">
					<div class="listData" v-loading="table_loading" v-if="table_list.length > 0">
						<div class="flex-box">
							<div class="flex-box flex-v-ce margin-bottom">
								<div class="groupsName">{{groups_info.name}}<span class="blue">({{total}}人)</span></div>
								<el-button @click="editGroup" size="medium">编辑</el-button>
							</div>
						</div>
						<!-- form -->
						<el-form :model="params" :inline="true" ref="params">
							<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>
								<el-checkbox v-model="sort" size="medium" label="由低到高" border></el-checkbox>
							</el-form-item>
						</el-form>
						<!-- 表格 -->
						<el-table :data="table_list" style="width: 100%" >
							<el-table-column label="名次" width="80" align="center">
								<template slot-scope="scope">
									<img v-if="scope.row.rank === 1" src="@/assets/image/statistics_NO1.png" alt="" />
									<img v-if="scope.row.rank === 2" src="@/assets/image/statistics_NO2.png" alt="" />
									<img v-if="scope.row.rank === 3" src="@/assets/image/statistics_NO3.png" alt="" />
									<span v-if="scope.row.rank > 3">{{ scope.row.rank }}</span>
								</template>
							</el-table-column>
							<el-table-column label="姓名" align="left">
								<template slot-scope="scope">
									<div class="flex-box">
										<userImage	class="fl" :user_name="scope.row.employee_name"	:img_url="scope.row.employee_img_url" width="50px" height="50px"></userImage>
										<span style="line-height: 50px; padding-left: 10px;">{{ scope.row.employee_name }}</span>
									</div>
								</template>
							</el-table-column>
							<el-table-column label="B分" align="left" prop="point"></el-table-column>
							<template slot="empty">
								<noData></noData>
							</template>
						</el-table>
						<center style="padding: 20px 0;">
							<el-pagination
								background
								@size-change="handleSizeChange"
								@current-change="handleCurrentChange"
								:page-sizes="[10, 20, 30, 40, 50, 100]"
								layout="total, sizes, prev, pager, next"
								:page-size="page_size"
								:current-page="page"
								:total="total">
							</el-pagination>
						</center>
					</div>
					<div v-else style="margin-top: 10%;">
						<noData :isSolt="true">
							<template v-slot:default>
								<div style="text-align: center;">还没有分组,<span style="color:#26A2FF;cursor:pointer" @click="addGroup">去添加 >></span></div>
							</template>
						</noData>
					</div>
				</div>
			</div>
		</div>
		<!-- 新增编辑分组 -->
		<el-dialog	:title="popupType? '新增分组':'编辑分组'" width="660px"  top="5%" :visible.sync="groupShow" @close="resetForm('newGroupForm')" :close-on-click-modal="false">
			<el-form  ref="newGroupForm" :model="newGroupForm" :rules="rules" label-width="85px" @submit.native.prevent>
				<el-form-item label="分组名称" prop="group_name">
					<el-input v-model="newGroupForm.group_name" placeholder="请输入分组名称" :clearable="true"></el-input>
				</el-form-item>
				<el-form-item label="分组成员">
				  <el-input 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="700px" :visible.sync="isEmployeeShow"  append-to-body :before-close="handleClose">
					<EmployeeSelector
						v-if="isEmployeeShow"
						ref="Employee"
						:user_no_select="false"
						:can_select_dept="true"
						:selected="employees_selected"
						:close_clear_data="true"
						@confirm="move_employee_confirm"/>
						<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 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" 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" :disabled="delLoad" :loading="delLoad" @click="delItem">删除</el-button>
				<div class="flex-1"></div>
				<el-button @click="resetForm('newGroupForm')">取 消</el-button>
				<el-button type="primary" :loading="saveLoad" :disabled="saveLoad" @click="subGroupForm('newGroupForm')">确 定</el-button>
			</div>
		</el-dialog>
		
	
	</div>
</template>

<script>
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() {
		return {
			page: 1,
			page_size: 10,
			total: null,
			tips_show:false,
			groups_list:[],
			groups_loading:false,
			table_loading:false,
			table_list:[],
			groups_info: {
				name:'',
				employees: []
			},
			// 
			params:{
				group_id: '',
				month: moment().format('YYYY-MM'),
				sort: 'DESC',
				rule_id: '',
			},
			rule_trees: [],
			groupShow: false,
			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: [],
				items:[],
				date_interval:"1",
			},
			saveLoad: false,
			delLoad: false,
			show_employee_selector: false,
			employee_not_select: [],
			employees_selected: {employee:[], dept: []},
			props:{checkStrictly: true,value: 'id', label: 'name',children:'child'},
			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() {
		this.getRuleList();
		this.get_groups_list(true);
	},
	watch:{
		'params.rule_id'(){
			this.$refs.rule.dropDownVisible = false;
		},
		'params.month'(val,old_val){
			this.page = 1
			this.open_right()
		},
		'sort'(val){
			this.page = 1
			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]);
		  }
		  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);
		  }
		  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);
		      }
		    }
		  }
		},
		//关闭
		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) => {
		    if (valid) {
				this.saveFun()
		    }
		  });
		},
		//获取分组详情
		getGroupDetail(func){
			this.$axios('get','/api/integral/statistics/groups/info', {group_id: this.groups_info.id}).then(res => {
				func(res.data.data);
			})
		},
		//编辑
		editGroup(){
			var that=this;
			this.getGroupDetail(function(res){
				that.groups_info = res;
				// 分组名称
				that.newGroupForm.group_name = res.name;
				
				// 规则
				that.newGroupForm.items = [];
				for (let i in res.items) {
				  that.newGroupForm.items.push(res.items[i].id);
				}
				that.valuesOrLength = that.newGroupForm.items;
				if (that.valuesOrLength.length >= 1) {
				  that.newGroupFormRules = that.valuesOrLength.length + '条规则';
				  that.ruleHint = '统计已选规则的积分(只选分类不指定规则的积分除外)'
				} else {
				  that.newGroupFormRules = '';
				  that.ruleHint = '统计所有积分(基础分和工龄分除外)'
				}
				
				// 统计周期
				that.newGroupForm.date_interval = String(res.date_interval);
				that.options_time_value = res.date_interval == 1 ? '月度' : res.date_interval == 2 ? '季度' : res.date_interval == 3 ? '年度' : '';
				
				// 分组人员
				that.newGroupForm.employees = [];
				that.employeeNames ="";
				res.employees.forEach(element => {
				  that.newGroupForm.employees.push(element.id);
				  that.employeeNames += element.name + ',';
				});
				that.employees_selected.employee=res.employees;
				
				
				that.popupType = false;
				that.groupShow = true;
			})
		},
		//添加编辑组
		saveFun(){
		  this.saveLoad = true;
		  var url=this.popupType? '/api/integral/statistics/groups/create':'/api/integral/statistics/groups'
		  this.newGroupForm.group_id=this.groups_info.id;
		  // return;
		  var obj={//为编辑时
			  name:this.newGroupForm.group_name,
			  id:this.popupType?'':this.groups_info.id,
			  employees:this.newGroupForm.employees,
		  }
		  this.$axios('post',url,this.newGroupForm).then((res) => {
		    if (res.data.code == 1) {
				this.$message.success(res.data.msg);
				if(!this.popupType){//为编辑时
					this.groups_info=obj;
				}
				if(this.groups_list.length==0){
					this.get_groups_list(true)
				}else{
					this.get_groups_list()
				}
				this.resetForm('newGroupForm');
		    }else{
			  this.saveLoad = false
		      this.$message.error(res.data.msg)
		    }
		  }).finally(()=>{
				this.saveLoad = false
		  })
		},
		// 重置表单
		resetForm(formName){
			this.$refs[formName].resetFields()
			this.newGroupForm.employees = []
			this.employee_not_select = []
			this.employeeNames='';
			this.employees_selected = {employee:[], dept: []}
			this.groupShow = false
		},
		// 新增分组
		addGroup(){
			this.employee_not_select = []
			this.newGroupFormRules='';
			this.employees_selected = {employee:[], dept: []}
			this.newGroupForm = {
				group_name: "",
				employees: [],
				items:[],
				date_interval:"1",
			}
			this.groupShow = true
			this.popupType = true
		},
		// 删除分组
		delItem(){
			this.$confirm('确定要删除当前分组吗？, 是否继续?', '删除分组', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				let data = {group_id:this.groups_info.id};
				this.delLoad = true
				this.$axios('post','/api/integral/statistics/groups/drop',data).then((res) => {
					if (res.data.code == 1) {
						this.$message.success(res.data.msg)
						this.groupShow = false
						this.get_groups_list(true);
					}else{
						this.$message.error(res.data.msg)
					}
				}).finally(()=>{
					this.delLoad = false
				})
			})
		},
		
		// 选人组件提交
		move_employee_confirm(data){
			this.employeeNames='';
			this.newGroupForm.employees=[];
			var employee=data.employee;
			if(employee.length>0){
				employee.forEach(item=>{
					this.employeeNames+=item.name+','
					this.newGroupForm.employees.push(item.id);
				})
			}else{
				this.newGroupForm.employees=[];
			}
			this.employees_selected.employee=employee;
			this.isEmployeeShow=false;
		},
		// 递归判断列表，把最后的children设为undefined
		getTreeData(data) {
			for (var i = 0; i < data.length; i++) {
				if (data[i].child.length < 1) {
					// children若为空数组，则将children设为undefined
					data[i].child = undefined;
				} else {
					// children若不为空数组，则继续 递归调用 本方法
					this.getTreeData(data[i].child);
				}
			}
			return data;
		},
		//获取规则
		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; //规则
			})
		},
		// 规则分类改变之后请求数据
		rule_null(val){
		  this.params.rule_id=val.length == 0? '': val[val.length -1]
		  this.$nextTick(()=>{
				this.page = 1
				this.open_right()
			})
		},
		//获取初始化数据
		get_groups_list(isAdd) {
			this.groups_loading = true;
			this.$axios('get','/api/integral/statistics/groups').then(res => {
				if (res.data.code == 1) {
					this.groups_list = res.data.data.list;
					if(this.groups_list[0]){
						isAdd? this.open_right(this.groups_list[0]):this.open_right();
					}else{
						this.table_list=[];
					}
				}
			}).finally(() => {
				this.groups_loading = false;
			});
		},
		// 打开右边列表
		open_right(item){
			this.table_loading = true;
			var data={};
			if(item){
				this.groups_info=item;
				data={
					group_id: item.id,
					month: this.params.month,
					sort: this.params.sort,
					rule_id: this.params.rule_id,
					pt_id: 3,
				}
			}else{
				data={
					group_id: this.groups_info.id,
					month: this.params.month,
					sort: this.params.sort,
					rule_id: this.params.rule_id,
					pt_id: 3,
				}
			}
			this.$axios('get','/api/integral/statistics/ranking',data,'v2').then((res) => {
				if (res.data.code == 1) {
						this.table_list = res.data.data.list
						this.total = res.data.data.total
				}else{
				  this.$message.error(res.data.data.msg)
				}
		    }).finally(() => {
		        this.table_loading = false
		    })
		},
		// 页码变更
		handleCurrentChange(val) {
		  this.page = val
		  this.open_right(this.groups_info)
		},
		handleSizeChange(val){
		  this.page_size = val
		  this.open_right(this.groups_info)
		},
	}
};
</script>

<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;
}
.tips {
	background: #dcdfe6;
	border-radius: 50%;
	width: 14px;
	height: 14px;
	color: #fff;
	display: inline-block;
	font-size: 12px;
	line-height: 14px;
	text-align: center;
}
.groupsName {
	font-size: 18px;
	margin-right:20px
}
.groupsName span{
	margin-left:5px
}

.user_text {
	font-size: 12px;
}
.cursor_pointer {
	cursor: pointer;
}
.terr-left button{
    margin: 0 auto;
    display: block;
    margin-bottom: 20px;
}
::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>