|
@@ -0,0 +1,1076 @@
|
|
|
+<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">
|
|
|
+ 创建数据大屏
|
|
|
+ <i class="el-icon-setting el-icon--right"></i>
|
|
|
+ </el-button>
|
|
|
+ </div>
|
|
|
+ <el-alert title="每个链接仅支持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>本机以外的其他设备可以通过链接访问数据大屏</div>
|
|
|
+ <div class="flex-box-ce" style="margin: 10px 0;">
|
|
|
+ <el-input style="width: 300px;" v-model="previewUrl" id="" 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="fontColorB" style="font-size: 12px;margin-bottom: 10px;">刷新后原有的密码将失效</div>
|
|
|
+ <div class="yellow">每个链接仅支持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="设置" :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="yellow" 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 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"
|
|
|
+ range-separator="至"
|
|
|
+ start-placeholder="开始日期"
|
|
|
+ end-placeholder="结束日期"
|
|
|
+ ></el-date-picker>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="部门">
|
|
|
+ <el-cascader
|
|
|
+ v-model="config.ranking.condition.deptArr"
|
|
|
+ :options="dept_tree"
|
|
|
+ :props="{ multiple : true,checkStrictly: 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>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="kuai">
|
|
|
+ <div class="formTitle">今日积分数据设置</div>
|
|
|
+ <div class="formBox">
|
|
|
+ <el-form-item label="部门">
|
|
|
+ <el-cascader
|
|
|
+ v-model="config.center.deptArr"
|
|
|
+ :options="dept_tree"
|
|
|
+ :props="{ multiple : true,checkStrictly: 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">
|
|
|
+<!-- <div style="color: #333;font-weight: 700;margin-bottom: 10px;">占比说明 </div>
|
|
|
+ <div class="fontColorF" style="line-height: 23px;margin-bottom: 10px;">获得积分人员占比=获得积分的人数/参与积分的总人数</br>执行奖扣管理人员占比=有执行奖扣的人/总管理者人数</br>基准标尺为执行下限,要求活跃度在标尺之上执行才算执行到位</div> -->
|
|
|
+ <el-form-item label="部门">
|
|
|
+ <el-cascader
|
|
|
+ v-model="config.active.deptArr"
|
|
|
+ :options="dept_tree"
|
|
|
+ :props="{ multiple : true,checkStrictly : 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="部门">
|
|
|
+ <el-cascader
|
|
|
+ v-model="config.event.deptArr"
|
|
|
+ :options="dept_tree"
|
|
|
+ :props="{ multiple : true,checkStrictly: 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:'',
|
|
|
+ code:'',
|
|
|
+ selectItem:{},
|
|
|
+ formData: {
|
|
|
+ // id:'',//修改与删除时,必传 不传则为新增
|
|
|
+ name: '', //不是删除则必填 配置名称 1-20个字符
|
|
|
+ remark: '', //备注信息 最多20个字符 默认空
|
|
|
+ del: 0, //是否为删除操作 1 是 其他否 默认0
|
|
|
+ remake_code: 0 //是否重新生成校验码 1 是 默认0
|
|
|
+ },
|
|
|
+ defaultConfig: {
|
|
|
+ //配置格式 不是删除则必填
|
|
|
+ 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: {
|
|
|
+ //从阶段排名拿数据
|
|
|
+ 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: {
|
|
|
+ //配置格式 不是删除则必填
|
|
|
+ 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: {
|
|
|
+ //从阶段排名拿数据
|
|
|
+ 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_id = [];
|
|
|
+ for (var i in val) {
|
|
|
+ dept_id.push(val[i][val[i].length-1]);
|
|
|
+ }
|
|
|
+ this.config.event.dept = dept_id;
|
|
|
+ }else{
|
|
|
+ this.config.event.dept=[];
|
|
|
+ }
|
|
|
+ this.closeDept()
|
|
|
+ },
|
|
|
+ 'config.active.deptArr'(val) {
|
|
|
+ if(val.length>0){
|
|
|
+ let dept_id = [];
|
|
|
+ for (var i in val) {
|
|
|
+ dept_id.push(val[i][val[i].length-1]);
|
|
|
+ }
|
|
|
+ this.config.active.dept = dept_id;
|
|
|
+ }else{
|
|
|
+ this.config.active.dept=[];
|
|
|
+ }
|
|
|
+ this.closeDept()
|
|
|
+ },
|
|
|
+ 'config.center.deptArr'(val) {
|
|
|
+ if(val.length>0){
|
|
|
+ let dept_id = [];
|
|
|
+ for (var i in val) {
|
|
|
+ dept_id.push(val[i][val[i].length-1]);
|
|
|
+ }
|
|
|
+ this.config.center.dept = dept_id;
|
|
|
+ }else{
|
|
|
+ this.config.center.dept=[];
|
|
|
+ }
|
|
|
+ this.closeDept()
|
|
|
+ },
|
|
|
+ 'config.ranking.condition.deptArr'(val) {
|
|
|
+ if(val.length>0){
|
|
|
+ let dept_id = [];
|
|
|
+ for (var i in val) {
|
|
|
+ dept_id.push(val[i][val[i].length-1]);
|
|
|
+ }
|
|
|
+ this.config.ranking.condition.dept = dept_id;
|
|
|
+ }else{
|
|
|
+ this.config.ranking.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:this.code;
|
|
|
+ //添加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';
|
|
|
+ if (process.env.NODE_ENV === 'development') {
|
|
|
+ this.previewUrl=process.env.VUE_APP_BASE_API+'#/screen';
|
|
|
+ }
|
|
|
+ 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.name) {
|
|
|
+ this.$message.error('请输入排行榜设置 “名称”');
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ 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.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;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ 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)
|
|
|
+ }
|
|
|
+ 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) {
|
|
|
+ this.config=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>
|