dd_pc/src/views/set/screenSet.vue

<template>
	<div class="all-box">
		<div class="all" style="padding: 20px;">
			<div class="flex-box-ce" style="padding: 30px 10px;">
				<div class="flex-1">
					<div style="font-size: 24px;font-weight: 700;margin-bottom: 5px;">数据大屏 
					  <el-popover
					    placement="bottom-start"
					    title="使用须知"
					    width="500"
					    trigger="hover"
					    content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">
						<div>
							<div style="padding: 10px 0;font-weight: 700;">如何显示大屏数据：</div>
							<p>1.会议平板访问：在平板中输入大屏访问链接，密码验证后可直接访问</p>
							<p>2.电脑投屏到其他设备：在电脑的浏览器上访问链接，投屏到大屏设备中</p>
							<div style="padding: 10px 0;font-weight: 700">其他须知：</div>
							<p>1.创建大屏名称和备注可用于区分不同区域或场景下的大屏，最多创建10个大屏</p>
							<p>2.每个大屏仅支持3个窗口同时访问，每打开一个窗口都会占用访问数，请避免打开多余窗口</p>
							<p>3.链接复制到其他设备，请用浏览器输入并打开访问链接，首次进入需输入密码</p>
							<p>4.更换设置可直接操作保存，更换后刷新页面或稍候5分钟即可</p>
							<p>5.如需切换其他大屏，请点击大屏右上角退出登录，重新输入其他大屏的密码即可</p>
							<p>6.分享链接的密码重置后，对应的大屏需重新输入密码验证</p>
							<p>7.本机上每次打开链接都需要密码</p>
						</div>
						<span style="font-size:12px;cursor: pointer;" class="blue" slot="reference">使用须知</span>
					  </el-popover>
					</div>
					<div style="font-size: 14px;" class="fontColorB">积分可视化数据大屏，直观展现积分排名、积分快讯、运作情况，支持电脑投屏、会议平板直接访问。</div>
				</div>
				<el-button type="primary" @click="isPz = true" :disabled="list.length==10">
					创建数据大屏
					<i class="el-icon-setting el-icon--right"></i>
				</el-button>
			</div>
			<el-alert title="最多创建10个大屏链接,每个链接仅支持3个窗口同时在线访问，超出后无法获取数据" type="warning"></el-alert>
			<el-table ref="multipleTable" :data="list" tooltip-effect="dark" align="center" v-loading="loading">
				<el-table-column label="大屏名称" prop="name"></el-table-column>
				<el-table-column label="备注" min-width="300" prop="remark"></el-table-column>
				<el-table-column label="操作">
					<template slot-scope="scope">
						<div class="flex-box-ce">
							<div @click.stop="openSet(scope.row)" style="margin-right: 10px;"><span class="lookQrcode blue">设置</span></div>
							<!-- <div @click.stop="preview(scope.row,1)" style="margin-right: 10px;"><span class="lookQrcode green">预览</span></div> -->
							<div @click.stop="preview(scope.row,2)" style="margin-right: 10px;"><span class="lookQrcode green">访问大屏</span></div>
							<div @click.stop="compile(scope.row)" style="margin-right: 10px;"><span class="lookQrcode">编辑</span></div>
							<div @click.stop="deleteSet(scope.row)"><span class="lookQrcode red">删除</span></div>
						</div>
					</template>
				</el-table-column>
				<template slot="empty">
					<noData :isSolt="true">
						<div>
							您当前没有数据大屏配置，去添加
							<span style="cursor: pointer;margin-left: 10px;" @click="isPz = true" class="blue">添加</span>
						</div>
					</noData>
				</template>
			</el-table>
		</div>
		
		<el-dialog :title="isCompile? '编辑数据大屏':'创建数据大屏'" :visible.sync="isPz" width="500px" class="dialog">
			<el-form label-width="80px" :model="formData" ref="setForm" class="form">
				<el-form-item
					label="名称"
					prop="name"
					:rules="[{ required: true, message: '请输入名称', trigger: 'blur' }, { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }]"
				>
					<el-input maxlength="20" show-word-limit v-model="formData.name" placeholder="请输入名称"></el-input>
				</el-form-item>
				<el-form-item
					label="备注"
					prop="remark"
					:rules="[{ required: true, message: '请输入备注', trigger: 'blur' }, { min: 2, max: 100, message: '长度在 2 到 100 个字符', trigger: 'blur' }]"
				>
					<el-input type="textarea" placeholder="请输入备注" :rows="4" maxlength="100" show-word-limit v-model="formData.remark"></el-input>
				</el-form-item>
			</el-form>
			<div class="flex-box-end">
				<el-button @click="isPz = false">取消</el-button>
				<el-button type="primary" :loading="setLoading" :disabled="setLoading" @click="saveFirst('setForm')">确定</el-button>
			</div>
		</el-dialog>
		
		<el-dialog title="打开方式" :visible.sync="isPreview" width="500px" class="dialog">
			<div>
				<div style="margin-bottom: 20px;">{{selectItem.name}}</div>
				<div>打开方式1：扫码登录（新）</div>
				<div class="flex-box-ce" style="margin: 10px 0;">
					<el-input style="width: 300px;" v-model="previewUrl2"  disabled placeholder="链接"></el-input>
					<div class="blue" style="padding-left: 10px;cursor: pointer;" @click="copy('3')">复制大屏链接</div>
				</div>
				<div style="font-size: 12px;position: relative;top: -10px;" class="orange">扫码方式适用于触摸屏和投屏场景，不支持手动输入链接地址及纯遥控选择操作，请根据设备条件选择打开方式</div>
				<div style="margin-top: 30px;">打开方式2：密码登录（旧）</div>
				<div class="flex-box-ce" style="margin: 10px 0;">
					<el-input style="width: 300px;" v-model="previewUrl"  disabled placeholder="链接"></el-input>
					<div class="blue" style="padding-left: 10px;cursor: pointer;" @click="copy('1')">复制大屏链接</div>
				</div>
				<div class="flex-box-ce">
					<el-input style="width: 300px;" v-model="code" placeholder="随机密码" disabled>
						<el-button slot="append" @click="refresh">刷新</el-button>
					</el-input>
					<div class="blue" style="padding-left: 10px;cursor: pointer;" @click="copy('2')">复制密码</div>
				</div>
				<div class="orange" style="font-size: 12px;margin-bottom: 10px;">刷新后原有的密码将失效</div>
				<!-- <div class="orange">每个链接仅支持3个窗口同时在线访问，超出后无法获取数据</div> -->
			</div>
			<div class="flex-box-end" style="margin: 10px 0;">
				<!-- <el-button @click="preview({},1)" type="primary" plain>打开大屏</el-button> -->
				<div class="flex-1"></div>
				<el-button @click="isPreview = false" type="">关 闭</el-button>
			</div>
		</el-dialog>

		<el-dialog :title="'设置('+selectItem.name+')'" :visible.sync="dialogVisible" width="1000px" class="dialog">
			<div class="flex-box">
				<div class="flex-4" style="padding-top: 50px;">
					<div  style="color: #222;font-weight: 700;font-size: 16px;padding-left: 8px;">点击下面模块，快速定位到设置项
						<el-popover placement="bottom-start" title="示例" width="500" trigger="hover">
							<div><img  src="@/assets/image/321.jpg" style="width: 100%;"/></div>
							<span style="font-size:14px;cursor: pointer;" class="blue" slot="reference">示例</span>
						</el-popover>
					 </div>
					<div class="flex-box-ce">
						<div class="flex-1">
							<div class="border1" @click="activeQie('2')" :class="activeBor == '2' ? 'activeBor' : ''" style="height: 40px;line-height: 40px;">组织名称和logo设置</div>
							<div class="border1" @click="activeQie('3')" :class="activeBor == '3' ? 'activeBor' : ''" style="height: 300px;line-height: 300px;">排行榜设置</div>
						</div>
						<div class="flex-1">
							<div class="border1" @click="activeQie('1')" :class="activeBor == '1' ? 'activeBor' : ''" style="height: 40px;line-height: 40px;">标题设置</div>
							<div class="border1" @click="activeQie('4')" :class="activeBor == '4' ? 'activeBor' : ''" style="height: 80px;line-height: 80px;">今日积分数据设置</div>
							<div class="border1" @click="activeQie('5')" :class="activeBor == '5' ? 'activeBor' : ''" style="height: 212px;line-height: 212px;">活跃度设置</div>
						</div>
						<div class="flex-1">
							<div class="" style="height: 44px;"></div>
							<div class="border1" @click="activeQie('6')" :class="activeBor == '6' ? 'activeBor' : ''" style="height: 300px;line-height: 300px;">积分快讯设置</div>
						</div>
					</div>
				</div>
				<div class="flex-3 scroll-bar" id="scroll" style="height: 500px;overflow-y: scroll;margin-left: 10px;" @scroll="myFunction">
					<el-form label-width="80px" :model="config" ref="setForm" class="form">
						<div class="kuai">
							<div class="formTitle">标题设置</div>
							<div class="formBox">
								<el-form-item label="标题名称">
									<el-input class="width250" maxlength="10" show-word-limit v-model.trim="config.title" placeholder="请输入名称"></el-input>
								</el-form-item>
							</div>
						</div>
						<div class="kuai">
							<div class="formTitle">组织名称和logo设置</div>
							<div class="formBox">
								<el-form-item label="组织名称">
									<el-input class="width250" maxlength="10" show-word-limit v-model.trim="config.company.name" placeholder="请输入名称"></el-input>
								</el-form-item>
								<el-form-item label="logo">
									<upload
										:headers="Xtoken"
										class="avatar-uploader"
										action="https://integralsys.oss-cn-shenzhen.aliyuncs.com"
										:show-file-list="false"
										:multiple="false"
										:limit="100"
										accept="image/jpeg,image/png"
										:on-success="handleFilesSuccess"
										:before-upload="beforeUpload"
									>
										<img v-if="config.company.logo" :src="config.company.logo" class="avatar" />
										<i v-else class="el-icon-plus avatar-uploader-icon"></i>
									</upload>
									<div class="orange" style="font-size: 12px;">比例为1:1,最大不超过5M</div>
								</el-form-item>
							</div>
						</div>
						<div class="kuai">
							<div class="formTitle">排行榜设置</div>
							<div class="formBox">
								<el-form-item style="margin-bottom: 30px;">
									  <el-radio-group v-model="config.ranking_type">
									    <el-radio label="ranking">阶段排名</el-radio>
									    <el-radio label="ranking_total">累计排名</el-radio>
									  </el-radio-group>
									  <div style="position: absolute;z-index: 999;left: 0px;top: 30px;font-size: 12px;line-height: 14px;" class="fontColorC">
										  <span v-if="config.ranking_type=='ranking'">阶段排名仅统计时间区间内的积分数据<br/>不包含基础分和工龄分</span>
										  <span v-else>累计B分排名即员工从入职至今的所有B分总计<br/>包含基础分和工龄分</span>
									</div>
								</el-form-item>
								<div style="min-height: 362px;">
									<template v-if="config.ranking_type=='ranking'">
										<el-form-item label="名称">
											<el-input class="width250" maxlength="10" show-word-limit v-model.trim="config.ranking.name" placeholder="请输入名称"></el-input>
										</el-form-item>
										<el-form-item label="时间">
											<el-select class="width250" v-model="config.ranking.condition.date" placeholder="请选择积分类型">
												<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
											</el-select>
											<el-date-picker
												class="width250"
												v-if="config.ranking.condition.date == 1"
												v-model="config.ranking.condition.time"
												type="daterange"
												value-format="timestamp"
												@change="setTime"
												:clearable="false"
												range-separator="至"
												start-placeholder="开始日期"
												end-placeholder="结束日期"
											></el-date-picker>
										</el-form-item>
										<el-form-item label="部门">
											<template slot="label">
												<el-tooltip effect="dark" placement="top">
												  <template slot="content">
													选择部门默认包含子部门
												  </template>
												  <span>部门	<i class="el-icon-warning"></i></span>
												</el-tooltip>
											</template>
											<el-cascader
												v-model="config.ranking.condition.deptArr"
												:options="dept_tree"
												:props="{checkStrictly: true, multiple : true, value: 'id', label: 'name', children: '_child' }"
												class="width250"
												ref="dept1"
												filterable
												collapse-tags
												placeholder="全公司"
												clearable
											></el-cascader>
										</el-form-item>
										<el-form-item label="人员">
											<el-select class="width250" v-model="config.ranking.condition.position" placeholder="请选择人员范围">
												<el-option v-for="item in roleOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
											</el-select>
										</el-form-item>
										<el-form-item label="类型">
											<el-select class="width250" v-model="config.ranking.condition.point_id" placeholder="请选择积分类型">
												<el-option v-for="item in typeOptions" :key="item.value" :label="item.label" :value="item.value" v-if="item.value != 1"></el-option>
											</el-select>
										</el-form-item>
										<el-form-item label="排除">
											<el-input class="width250" auto-complete="off" v-model="config.ranking.condition.employeeName" placeholder="请选择排除对象"></el-input>
											<div @click="noPersonnelListTips" style=" position: absolute; top: 0; right: 0; left: 0; bottom: 0; z-index: 9;"></div>
										</el-form-item>	
									</template>
									<template v-else>
										<el-form-item label="名称">
											<el-input class="width250" maxlength="10" show-word-limit v-model.trim="config.ranking_total.name" placeholder="请输入名称"></el-input>
										</el-form-item>
										<el-form-item label="部门">
											<template slot="label">
												<el-tooltip effect="dark" placement="top">
												  <template slot="content">
													选择部门默认包含子部门
												  </template>
												  <span>部门	<i class="el-icon-warning"></i></span>
												</el-tooltip>
											</template>
											<el-cascader
												v-model="config.ranking_total.condition.deptArr"
												:options="dept_tree"
												:props="{checkStrictly: true, multiple : true, value: 'id', label: 'name', children: '_child' }"
												class="width250"
												ref="dept6"
												filterable
												collapse-tags
												placeholder="全公司"
												clearable
											></el-cascader>
										</el-form-item>
									</template>
								</div>
							</div>
						</div>
						<div class="kuai">
							<div class="formTitle">今日积分数据设置</div>
							<div class="formBox">
								<el-form-item label="部门">
									<template slot="label">
										<el-tooltip effect="dark" placement="top">
										  <template slot="content">
											选择部门默认包含子部门
										  </template>
										  <span>部门	<i class="el-icon-warning"></i></span>
										</el-tooltip>
									</template>
									<el-cascader
										v-model="config.center.deptArr"
										:options="dept_tree"
										:props="{checkStrictly: true, multiple : true, value: 'id', label: 'name', children: '_child' }"
										ref="dept2"
										class="width250"
										filterable
										collapse-tags
										placeholder="全公司"
										clearable
									></el-cascader>
								</el-form-item>
							</div>
						</div>
						<div class="kuai">
							<div class="formTitle">活跃度设置
							  <el-tooltip effect="dark" placement="top">
							    <template slot="content">
									获得积分人员占比=获得积分的人数/参与积分的总人数</br>
									执行奖扣管理人员占比=有执行奖扣的人/总管理者人数</br>
									基准标尺为执行下限，要求活跃度在标尺之上执行才算执行到位
							    </template>
							    <i class="el-icon-warning"></i>
							  </el-tooltip>
							</div>
							<div class="formBox">
								<el-form-item label="部门">
									<template slot="label">
										<el-tooltip effect="dark" placement="top">
										  <template slot="content">
											选择部门默认包含子部门
										  </template>
										  <span>部门	<i class="el-icon-warning"></i></span>
										</el-tooltip>
									</template>
									<el-cascader
										v-model="config.active.deptArr"
										:options="dept_tree"
										:props="{checkStrictly: true, multiple : true, value: 'id', label: 'name', children: '_child' }"
										ref="dept3"
										class="width250"
										filterable
										collapse-tags
										placeholder="全公司"
										clearable
									></el-cascader>
								</el-form-item>
								<el-form-item label="时间范围">
									<el-select class="width250" v-model="config.active.type" placeholder="请选择时间范围">
										<el-option key="1" label="近三天" :value="1"></el-option>
										<el-option key="2" label="近三周" :value="2"></el-option>
									</el-select>
								</el-form-item>
								<el-form-item label="标尺">
									<el-input class="width250"  @input="config.active.base_ratio=config.active.base_ratio.replace(/^(0+)|[^\d]+/g,'')" v-model="config.active.base_ratio" placeholder="请输入标尺">
										<template slot="append">
											%
										</template>
									</el-input>
								</el-form-item>
							</div>
						</div>
						<div class="kuai">
							<div class="formTitle">积分快讯设置</div>
							<div class="formBox">
								<div style="color: #333;font-weight: 700;margin-bottom: 10px;">显示最新产生的100条积分事件</div>
								<el-form-item label="名称">
									<el-input class="width250" maxlength="10" show-word-limit v-model.trim="config.event.name" placeholder="请输入名称"></el-input>
								</el-form-item>
								<el-form-item label="来源">
									<el-select class="width250" multiple v-model="config.event.source_type" placeholder="全部">
										<el-option v-for="item in sourceOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
									</el-select>
								</el-form-item>
								<el-form-item label="部门">
									<template slot="label">
										<el-tooltip effect="dark" placement="top">
										  <template slot="content">
											选择部门默认包含子部门
										  </template>
										  <span>部门	<i class="el-icon-warning"></i></span>
										</el-tooltip>
									</template>
									<el-cascader
										v-model="config.event.deptArr"
										:options="dept_tree"
										:props="{checkStrictly: true,multiple : true, value: 'id', label: 'name', children: '_child' }"
										ref="dept4"
										class="width250"
										filterable
										collapse-tags
										placeholder="全公司"
										clearable
									></el-cascader>
								</el-form-item>
								<el-form-item label="类型">
									<el-select class="width250" v-model="config.event.ptId" placeholder="请选择积分类型">
										<el-option v-for="item in typeOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
									</el-select>
								</el-form-item>
							</div>
						</div>
					</el-form>
				</div>
			</div>
			<div class="flex-box-end" style="padding-top: 10px;">
				<el-button @click="dialogVisible = false">取消</el-button>
				<el-button type="primary" :loading="setLoading" :disabled="setLoading" @click="submit()">确定</el-button>
			</div>
			<el-dialog title="选择人员" width="640px" :visible.sync="show_employee_selector" append-to-body>
				<EmployeeSelector
					v-if="show_employee_selector"
					ref="members"
					:isChecKedAll="false"
					:user_no_select="false"
					:max="30"
					:selected="employee_selected"
					@confirm="move_employee_confirm"
				/>
				<span slot="footer" class="dialog-footer">
					<el-button @click="show_employee_selector = false">取 消</el-button>
					<el-button type="primary" @click="submitMembers()">保 存</el-button>
				</span>
			</el-dialog>
		</el-dialog>
		
	</div>
</template>

<script>
import upload from '@/components/upload';
import EmployeeSelector from '@/components/EmployeeSelector.vue';
export default {
	name: 'screenSet',
	components: { upload, EmployeeSelector },
	data() {
		return {
			Xtoken: { 'X-Token': this.$getToken() },
			loading: false,
			setLoading: false,
			ding_enable: true,
			list: [],
			dialogVisible: false,
			isPz: false,
			dept_tree: [], //部门列表
			options: [
				{
					value: -5,
					label: '本年'
				},
				{
					value: -4,
					label: '本季'
				},
				{
					value: -3,
					label: '本月'
				},
				{
					value: -2,
					label: '本周'
				},
				{
					value: -1,
					label: '本天'
				},
				{
					value: 1,
					label: '自定义时间区间'
				}
			],
			roleOptions: [
				{
					value: 'all',
					label: '全部'
				},
				{
					value: 'manager',
					label: '管理员'
				},
				{
					value: 'employee',
					label: '员工'
				}
			],
			sourceOptions: [
				{
					value: 1,
					label: '积分奖扣'
				},
				{
					value: 2,
					label: '任务'
				},
				{
					value: 3,
					label: '积分系统分配'
				},
				{
					value: 4,
					label: '考勤系统分配'
				},
				{
					value: 5,
					label: '积分申请'
				},
				// {
				// 	value: 6,
				// 	label: '绩效任务包'
				// },
				{
					value: 8,
					label: '积分导入'
				},
				{
					value: 9,
					label: 'A分转B分'
				},
				{
					value: 10,
					label: '钉钉汇报(日志)奖扣分'
				}
			],
			typeOptions: [
				{
					value: 1,
					label: '全部'
				},
				{
					value: 2,
					label: 'A分'
				},
				{
					value: 3,
					label: 'B分'
				}
			],
			activeBor: '1',
			isShowName: false,
			nameVal: '',
			employeeName: '',
			employee_selected: { dept: [], employee: [] },
			show_employee_selector: false,
			isCompile:false,//是否编辑
			
			isPreview: false,
			previewUrl:'',
			previewUrl2:'',
			code:'',
			selectItem:{},
			formData: {
				// id:'',//修改与删除时，必传 不传则为新增
				name: '', //不是删除则必填 配置名称 1-20个字符
				remark: '', //备注信息 最多20个字符 默认空
				del: 0, //是否为删除操作 1 是 其他否 默认0
				remake_code: 0 //是否重新生成校验码 1 是 默认0
			},
			defaultConfig: {
				//配置格式 不是删除则必填
				ranking_type:'ranking',
				company: {
					name: this.$getUserData().company_info.name.slice(0, 10), //不超过十个字 公司名截断
					logo: 'https://integralsys.oss-cn-shenzhen.aliyuncs.com/intesys/dd/17/2022/07/01/CaBis82ryBYbncxc3nehiSXkiwDbhbwi.png' //公司logo
				},
				title: '积分数据大屏', //不超过十个字
				ranking_total: { //累计B分排名拿数据
					name: "排行榜",  //不超过十个字
					condition: { //筛选条件
						dept: [],   //限定部门ID列表  空全公司
						deptArr: [],
						point_id: "2",//2AF 3BF,
						position: "employee",//employee manager  all//员工 管理员  全部
						exclusion: [],//不参与排名用户ID数组，
					}
				},
				ranking: {
					//从阶段排名拿数据
					name: '排行榜', //不超过十个字
					condition: {//筛选条件
						time: [],
						date: -3,
						start_date: -3, //结束时间
						end_date: -3, //开始时间
						deptArr: [],
						dept: [], //限定部门ID列表  空全公司
						point_id: 3, //2AF   3BF,
						position: 'all', //manager  all//员工 管理员  全部
						employeeName: '',
						exclusion: [] ,//不参与排名，
						employee:[],
					}
				},
				center: {
					deptArr: [],
					dept: [] //部门ID列表  空全公司
				},
				active: {
					base_ratio: 60, //基准比例
					deptArr: [],
					dept: [], //部门ID列表  空全公司
					type: 1
				},
				event: {
					name: '积分快讯', //排行榜名称
					source_type: [1, 2, 5], //来源ID列表 1积分录入 2任务 3积分系统分配 4考勤系统分配 5积分申请 6绩效任务包	8积分导入 9A分转B分 10钉钉报告直接奖励
					deptArr: [],
					dept: [], //部门ID列表  空全公司
					point_id: [2, 3], //积分类型  2AF 3BF
					ptId: 1
				}
			},
			config: {
				//配置格式 不是删除则必填
				ranking_type:'ranking',
				company: {
					name: this.$getUserData().company_info.name.slice(0, 10), //不超过十个字 公司名截断
					logo: 'https://integralsys.oss-cn-shenzhen.aliyuncs.com/intesys/dd/17/2022/07/01/CaBis82ryBYbncxc3nehiSXkiwDbhbwi.png' //公司logo
				},
				title: '积分数据大屏', //不超过十个字
				ranking_total: { //累计B分排名拿数据
					name: "累计B分排名",  //不超过十个字
					condition: { //筛选条件
						dept: [],   //限定部门ID列表  空全公司
						deptArr: [],
						point_id: "2",//2AF 3BF,
						position: "employee",//employee manager  all//员工 管理员  全部
						exclusion: [],//不参与排名用户ID数组，
					}
				},
				ranking: {
					//从阶段排名拿数据
					name: '排行榜', //不超过十个字
					condition: {
						//筛选条件,
						time: [],
						date: -3,
						start_date: -3, //结束时间
						end_date: -3, //开始时间
						deptArr: [],
						dept: [], //限定部门ID列表  空全公司

						point_id: 3, //2AF   3BF,
						position: 'all', //manager  all//员工 管理员  全部
						employeeName: '',
						exclusion: [] ,//不参与排名，
						employee:[],
					}
				},
				center: {
					deptArr: [],
					dept: [] //部门ID列表  空全公司
				},
				active: {
					base_ratio: 60, //基准比例
					deptArr: [],
					dept: [], //部门ID列表  空全公司
					type: 1
				},
				event: {
					name: '积分快讯', //排行榜名称
					source_type: [1, 2, 5], //来源ID列表 1积分录入 2任务 3积分系统分配 4考勤系统分配 5积分申请 6绩效任务包	8积分导入 9A分转B分 10钉钉报告直接奖励
					deptArr: [],
					dept: [], //部门ID列表  空全公司
					point_id: [2, 3], //积分类型  2AF 3BF
					ptId: 1
				}
			},
		};
	},
	watch: {
		'config.event.ptId'(val) {
			if (val == 1) {
				this.config.event.point_id = [2, 3];
			} else {
				this.config.event.point_id = [val];
			}
		},
		'config.event.deptArr'(val) {
			if(val.length>0){
				let dept_ids=[];
				val.forEach((item)=>{
					dept_ids.push(item[item.length-1]);
					// dept_ids.push(...item);
				})
				let set =new Set(dept_ids);
				this.config.event.dept = [...set];
			}else{
				this.config.event.dept=[];
			}
			this.closeDept()
		},
		'config.active.deptArr'(val) {
			if(val.length>0){
				let dept_ids=[];
				val.forEach((item)=>{
					dept_ids.push(item[item.length-1]);
					// dept_ids.push(...item);
				})
				let set =new Set(dept_ids);
				this.config.active.dept = [...set];
			}else{
				this.config.active.dept=[];
			}
			this.closeDept()
		},
		'config.center.deptArr'(val) {
			if(val.length>0){
				let dept_ids=[];
				val.forEach((item)=>{
					dept_ids.push(item[item.length-1]);
					// dept_ids.push(...item);
				})
				let set =new Set(dept_ids);
				this.config.center.dept = [...set];
			}else{
				this.config.center.dept=[];
			}
			this.closeDept()
		},
		'config.ranking.condition.deptArr'(val) {
			if(val.length>0){
				let dept_ids=[];
				val.forEach((item)=>{
					dept_ids.push(item[item.length-1]);
					// dept_ids.push(...item);
				})
				let set =new Set(dept_ids);
				this.config.ranking.condition.dept = [...set];
			}else{
				this.config.ranking.condition.dept=[];
			}
			this.closeDept()
		},
		'config.ranking_total.condition.deptArr'(val) {
			if(val.length>0){
				let dept_ids=[];
				val.forEach((item)=>{
					dept_ids.push(item[item.length-1]);
					// dept_ids.push(...item);
				})
				let set =new Set(dept_ids);
				this.config.ranking_total.condition.dept = [...set];
			}else{
				this.config.ranking_total.condition.dept=[];
			}
			this.closeDept()
		},
		'config.ranking.condition.date'(val){
			if(val!=1){
				this.config.ranking.condition.start_date= val; //结束时间
				this.config.ranking.condition.end_date= val; //结束时间
			}else{
				this.config.ranking.condition.start_date= ''; //结束时间
				this.config.ranking.condition.end_date= ''; //结束时间
			}
		},
		isPz(val) {
			if (!val) {
				this.formData={
					// id:'',//修改与删除时，必传 不传则为新增
					name: '', //不是删除则必填 配置名称 1-20个字符
					remark: '', //备注信息 最多20个字符 默认空
					del: 0, //是否为删除操作 1 是 其他否 默认0
					remake_code: 0 //是否重新生成校验码 1 是 默认0
				}
				this.isCompile=false;//是否编辑	
			}
		},
		dialogVisible(val) {
			if (!val) {
				// this.activeBor='1';
			}else{
				setTimeout(()=>{
					document.getElementById('scroll').scrollTop = 0;
				},200)
			}
		}
	},
	mounted() {
		this.getList();
		this.getDepartment();
	},
	methods: {
	    setTime(val){
			if(val&&val.length>0){
				this.config.ranking.condition.start_date= val[0]; //结束时间
				this.config.ranking.condition.end_date= val[1]+86399000; //结束时间
			}else{
				this.config.ranking.condition.start_date= ''; //结束时间
				this.config.ranking.condition.end_date= ''; //结束时间
			}
		},
		//编辑
	   compile(item){
		   this.isCompile=true;//是否编辑	
		   // this.selectItem=item;
		   this.isPz=true;//是否编辑	
		   this.formData={
				id:item.id,//修改与删除时，必传 不传则为新增
				name: item.name, //不是删除则必填 配置名称 1-20个字符
				remark: item.remark, //备注信息 最多20个字符 默认空
				del: 0, //是否为删除操作 1 是 其他否 默认0
				remake_code: 0 ,//是否重新生成校验码 1 是 默认0
				config:JSON.stringify(item.config)
		   }
	   },
	   copy (index) {
		  //创建input标签
		  var input = document.createElement('input')
		  //将input的值设置为需要复制的内容
		  input.value =index==1? this.previewUrl:index==2? this.code:this.previewUrl2;
		  //添加input标签
		  document.body.appendChild(input)
		  //选中input标签
		  input.select()
		  //执行复制
		  document.execCommand('copy')
		  //成功提示信息
		  this.$message.success('已复制')
		  //移除input标签
		  document.body.removeChild(input)
		},
	   refresh(){
		   this.$confirm('刷新后原有密码将会失效，确定要刷新吗?', '提示', {
		   	confirmButtonText: '确定',
		   	cancelButtonText: '取消',
		   	type: 'warning'
		   }).then(() => {
				let data={
					id:this.selectItem.id,
					name: this.selectItem.name, //不是删除则必填 配置名称 1-20个字符
					remark: this.selectItem.remark, //备注信息 最多20个字符 默认空
					del: 0, //是否为删除操作 1 是 其他否 默认0
					remake_code: 1 ,//是否重新生成校验码 1 是 默认0
					config:JSON.stringify(this.selectItem.config)
				}
				this.$axios('post', '/api/integral/site/edit_screen', data).then(res => {
					if (res.data.code == 1) {
						this.code=res.data.data.code
						this.getList();
					}
				})
		   });
		   
		},
		preview(item,index){
			// this.previewUrl='http://localhost:8080/#/screen';
			this.previewUrl=process.env.VUE_APP_BASE_API+'/pc/#/screen';
			
			let corpId=window.btoa(this.$getCache('corpId'))
			this.previewUrl2=process.env.VUE_APP_BASE_API+'/pc/#/screenSan?corpId='+corpId;
			if (process.env.NODE_ENV === 'development') {
				this.previewUrl=process.env.VUE_APP_BASE_API+'#/screen';
				this.previewUrl2=process.env.VUE_APP_BASE_API+'#/screenSan?corpId='+corpId;
			}
			if(index==1){
				window.open(this.previewUrl+'?preview=1', '_blank');
			}else{
				this.selectItem=item;
				this.code=item.code;
				this.isPreview=true;
			}
		},
		submitMembers() {
			this.$refs.members.confirm(); //调用组件的confirm（）；
		},
		//获取部门
		getDepartment() {
			this.$axios('get', '/api/department/tree').then(res => {
				this.dept_tree = this.getTreeData(res.data.data.list);
			});
		},
		// 递归判断列表，把最后的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;
		},
		// 附件上传
		beforeUpload(file) {
			const isJPG = /^image\/(jpeg|png|jpg)$/.test(file.type);
			const isLt2M = file.size / 1024 / 1024 < 5;
			if (!isJPG) {
				this.$message.error('上传图只能是 JPEG,PNG,JPG 格式!');
			}
			if (!isLt2M) {
				this.$message.error('上传图片大小不能超过 5MB!');
			}
			return isJPG && isLt2M;
		},
		handleFilesSuccess(response, file, fileList) {
			this.config.company.logo=response.url
		},
		saveFirst(fromName) {
			this.$refs[fromName].validate(valid => {
				if (valid) {
					let formData = this.formData;
					if(!this.isCompile){
						formData.config = JSON.stringify(this.defaultConfig);
					}
					this.$axios('post', '/api/integral/site/edit_screen', formData).then(res => {
						this.$message.success(this.isCompile?'已编辑':'已添加');
						
					}).finally(() => {
						this.isPz=false;
						this.getList();	
					});
				}
			});
		},
		deleteSet(e) {
			this.$confirm('确定要删除吗?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				this.$axios('POST', '/api/integral/site/edit_screen', { id: e.id,del:1 }).then(res => {
					if (res.data.code == 1) {
						this.$message.success('删除成功');
						this.getList();
					}
				});
			});
		},
		submit(fromName) {
			if (!this.config.title) {
				this.$message.error('请输入标题');
				return false;
			}
			
			if (!this.config.company.name) {
				this.$message.error('请输入组织名称和logo设置 “名称”');
				return false;
			}
			
			if(this.config.ranking_type=='ranking'){
				if (!this.config.ranking.name) {
					this.$message.error('请输入排行榜设置 “名称”');
					return false;
				}
				if(!this.config.ranking_total.name){
					this.config.ranking_total.name='累计B分排名'
				}
				if(this.config.ranking.condition.date == 1&&!this.config.ranking.condition.start_date){
					if(this.config.ranking.condition.time.length!=0){
						let time=this.config.ranking.condition.time
						this.config.ranking.condition.start_date= time[0]; //结束时间
						this.config.ranking.condition.end_date= time[1]+86399000; //结束时间
					}else{
						this.$message.error('请选择排行榜设置 “时间”');
						return false;
					}
				}
			}else{
				if (!this.config.ranking_total.name) {
					this.$message.error('请输入排行榜设置 “名称”');
					return false;
				}
				if(!this.config.ranking.name){
					this.config.ranking.name='排行榜'
				}
			}
			
			if (!this.config.event.name) {
				this.$message.error('请输入积分快讯设置 “名称”');
				return false;
			}
			if (this.config.active.base_ratio>100) {
				this.$message.error('活跃度设置 “标尺” 不能超过100');
				return false;
			}
			if (!this.config.active.base_ratio) {
				this.$message.error('活跃度设置 “标尺” 不能为空,请输入1~100');
				return false;
			}
			if (this.config.event.source_type.length==0) {
				this.$message.error('请输入积分快讯设置 “来源” 至少选择一项');
				return false;
			}
			let data={
				id:this.selectItem.id,
				name: this.selectItem.name, //不是删除则必填 配置名称 1-20个字符
				remark: this.selectItem.remark, //备注信息 最多20个字符 默认空
				del: 0, //是否为删除操作 1 是 其他否 默认0
				remake_code: 0 ,//是否重新生成校验码 1 是 默认0
				config:JSON.stringify(this.config)
			}
			// console.log(data)
			// return false
			this.$axios('post', '/api/integral/site/edit_screen', data).then(res => {
				if (res.data.code == 1) {
					this.$message.success("保存成功");
					this.getList();
				}
			}).finally(() => {
				this.dialogVisible = false;
				this.setLoading = false;
			});
			
		},
		openSet(item) {
			if(!item.config.ranking_total){
				item.config.ranking_total={
					name: "累计B分排名",  //不超过十个字
					condition: { //筛选条件
						dept: [],   //限定部门ID列表  空全公司
						deptArr: [],
						point_id: "2",//2AF 3BF,
						position: "employee",//employee manager  all//员工 管理员  全部
						exclusion: [],//不参与排名用户ID数组，
					}
				}
				item.config.ranking_type='ranking'
			}
			this.$nextTick(()=>{
				this.config=JSON.parse(JSON.stringify(item.config));
				this.selectItem=item;
				this.employee_selected.employee=item.config.ranking.condition.employee;
				this.dialogVisible = true;
			})
		},
		getList() {
			this.loading = true;
			this.$axios('get', '/api/integral/site/screen')
				.then(res => {
					this.list = res.data.data.list;
				})
				.finally(err => {
					this.loading = false;
				});
		},
		closeDept(){
			// this.$nextTick(() => {
			// 	this.$refs.dept1.dropDownVisible = false;
			// 	this.$refs.dept2.dropDownVisible = false;
			// 	this.$refs.dept3.dropDownVisible = false;
			// 	this.$refs.dept4.dropDownVisible = false;
			// });
		},
		// 选择奖扣对象
		move_employee_confirm(data) {
			this.employee_selected = { dept: [], employee: [] };
			this.config.ranking.condition.employeeName = '';
			if (data.employee !== null && data.employee.length != 0) {
				let exclusion = [];
				this.employee_selected = data;
				this.config.ranking.condition.employee=data.employee
				data.employee.forEach(element => {
					this.config.ranking.condition.employeeName += element.name + ',';
					exclusion.push(element.id);
				});
				this.config.ranking.condition.exclusion = exclusion;
			} else {
				this.config.ranking.condition.exclusion = [];
				this.config.ranking.condition.employee=[];
			}
			this.show_employee_selector = false;
		},
		noPersonnelListTips() {
			this.show_employee_selector = true;
		},
		myFunction(e) {
			let scrollTop = document.getElementById('scroll').scrollTop;
			if (this.config.ranking.condition.date == 1) {
				if (scrollTop < 85) {
					this.activeBor = '1';
				} else if (scrollTop > 85 && scrollTop < 355) {
					this.activeBor = '2';
				} else if (scrollTop >= 355 && scrollTop < 800) {
					this.activeBor = '3';
				} else if (scrollTop >= 800 && scrollTop < 900) {
					this.activeBor = '4';
				} else if (scrollTop >= 900 && scrollTop < 960) {
					this.activeBor = '5';
				} else if (scrollTop >= 960) {
					this.activeBor = '6';
				}
			} else {
				if (scrollTop < 85) {
					this.activeBor = '1';
				} else if (scrollTop >= 85 && scrollTop < 355) {
					this.activeBor = '2';
				} else if (scrollTop >= 355 && scrollTop < 760) {
					this.activeBor = '3';
				} else if (scrollTop >= 760 && scrollTop < 860) {
					this.activeBor = '4';
				} else if (scrollTop >= 860 && scrollTop < 900) {
					this.activeBor = '5';
				} else if (scrollTop >= 900) {
					this.activeBor = '6';
				}
			}
		},
		activeQie(index) {
			if (this.config.ranking.condition.date == 1) {
				if (index == '1') {
					document.getElementById('scroll').scrollTop = 0;
				} else if (index == '2') {
					document.getElementById('scroll').scrollTop = 87;
				} else if (index == 3) {
					document.getElementById('scroll').scrollTop = 357;
				} else if (index == 4) {
					document.getElementById('scroll').scrollTop = 802;
				} else if (index == 5) {
					document.getElementById('scroll').scrollTop = 902;
				} else if (index == 6) {
					document.getElementById('scroll').scrollTop = 1078;
				}
			} else {
				if (index == 1) {
					document.getElementById('scroll').scrollTop = 0;
				} else if (index == 2) {
					document.getElementById('scroll').scrollTop = 87;
				} else if (index == 3) {
					document.getElementById('scroll').scrollTop = 357;
				} else if (index == 4) {
					document.getElementById('scroll').scrollTop = 762;
				} else if (index == 5) {
					document.getElementById('scroll').scrollTop = 862;
				} else if (index == 6) {
					document.getElementById('scroll').scrollTop = 1038;
				}
			}
		},
	}
	
};
</script>
<style scoped lang="scss">
.activeBor {
	// background-color: #;
	color: #2490fd;
	border: 1px solid #2490fd !important;
	box-shadow: 0 0 3px #2490fd;
}
.border1 {
	border: 1px solid #ccc;
	border-radius: 3px;
	margin: 5px;
	text-align: center;
	cursor: pointer;
}
.avatar-uploader ::v-deep .el-upload {
	border: 1px dashed #d9d9d9;
	border-radius: 6px;
	cursor: pointer;
	position: relative;
	overflow: hidden;
}
.avatar-uploader ::v-deep .el-upload:hover {
	border-color: #409eff;
}
.avatar-uploader-icon {
	font-size: 28px;
	color: #8c939d;
	width: 100px;
	height: 100px;
	line-height: 100px;
	text-align: center;
}
.avatar {
	width: 100px;
	height: 100px;
	display: block;
}
.dialog ::v-deep .el-dialog__body {
	padding: 20px;
}
.width250 {
	width: 250px;
}
.kuai {
	margin-bottom: 30px;
}
.kuai .formBox {
	padding-left: 20px;
}
.form ::v-deep .el-form-item {
	margin-bottom: 20px;
}
.form ::v-deep .el-form-item__label {
	color: #777777;
}
.formTitle {
	font-size: 16px;
	font-weight: 700;
	margin-bottom: 10px;
	color: #222;
}
.diy-tip1 {
	margin-bottom: 10px !important;
	background: #f0f9eb !important;
	color: #333 !important;
	border: 1px solid #67c23a !important;
	padding: 9px !important;
	min-width: 800px;
	border-radius: 4px;
}
.el-dialog__body {
	position: relative;
	top: -20px;
}
.widthInput {
	width: 150px;
}
.title {
	margin: 10px 0;
	margin-top: 0;
	font-size: 14px;
	font-weight: 700;
	padding-left: 13px;
}
.initia_title {
	font-size: 20px;
	color: rgba(48, 49, 51, 1);
	font-family: PingFangSC-Regular;
}
.initia_title_1 {
	color: #e6a23c;
	font-size: 14px;
	margin-top: 10px;
}
.lookQrcode {
	color: #606266;
	cursor: pointer;
	transition: all 0.3s;
	font-weight: 700;
}
.lookQrcode:hover {
	color: #2490fd;
}
.name {
	max-width: 200px;
	margin-right: 10px;
}
</style>