|
|
@@ -0,0 +1,649 @@
|
|
|
+<template>
|
|
|
+ <div class="manager_statistics_box boxMinHeight">
|
|
|
+ <el-tabs v-model="currentTag">
|
|
|
+ <el-tab-pane v-for="(item,index) in tabs" :key="index" :label="item.label" :name="item.name" :disabled="loading"></el-tab-pane>
|
|
|
+ </el-tabs>
|
|
|
+ <el-container>
|
|
|
+ <el-header height="100px">
|
|
|
+<!-- 搜索 -->
|
|
|
+ <el-form :model="formData" :inline="true" >
|
|
|
+ <el-form-item label="部门">
|
|
|
+ <el-cascader
|
|
|
+ v-model="dept_name_xq_xq"
|
|
|
+ :options="deptTrees"
|
|
|
+ @change="getLastDeptNull"
|
|
|
+ ref="dept"
|
|
|
+ filterable
|
|
|
+ change-on-select
|
|
|
+ placeholder="全公司"
|
|
|
+ clearable
|
|
|
+ ></el-cascader>
|
|
|
+ </el-form-item>
|
|
|
+ <!-- 关键字 -->
|
|
|
+ <el-form-item class="persons_names">
|
|
|
+ <el-input v-model="formData.keyword" :clearable="true" placeholder="搜索姓名" max="200" class="persons_name" @clear="keywordSearch" >
|
|
|
+ <el-button slot="append" icon="el-icon-search" @click="keywordSearch"></el-button>
|
|
|
+ </el-input>
|
|
|
+ </el-form-item>
|
|
|
+<!-- 月份搜索 -->
|
|
|
+ <el-form-item label="月份" v-if="currentTag === 'target'">
|
|
|
+ <el-date-picker
|
|
|
+ class="date-picker-width"
|
|
|
+ v-model="formData.month"
|
|
|
+ clearable
|
|
|
+ width="100%"
|
|
|
+ type="month"
|
|
|
+ :clearable="false"
|
|
|
+ placeholder="请选择月份"
|
|
|
+ value-format="yyyy-MM"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+<!-- 时间区间搜索 -->
|
|
|
+ <el-form-item label="时间区间" v-if="currentTag === 'search'">
|
|
|
+ <el-date-picker
|
|
|
+ v-model="timeScope"
|
|
|
+ type="daterange"
|
|
|
+ align="right"
|
|
|
+ unlink-panels
|
|
|
+ range-separator="至"
|
|
|
+ start-placeholder="开始日期"
|
|
|
+ end-placeholder="结束日期"
|
|
|
+ value-format="yyyy-MM-dd"
|
|
|
+ editable
|
|
|
+ :clearable="false"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+<!-- 达标选项 -->
|
|
|
+ <el-form-item v-if="currentTag === 'target'" label="只看全部达标的" >
|
|
|
+ <el-checkbox v-model="formData.complete" size="medium" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <div class="flex-box">
|
|
|
+ <downloadexcel
|
|
|
+ v-if="currentTag === 'target' ? (target.total > 0) : (search.total > 0)"
|
|
|
+ :fetch="getDownloadData"
|
|
|
+ name="管理者奖扣列表.xls"
|
|
|
+ :fields="downloadFields"
|
|
|
+ >
|
|
|
+ <el-button type="primary" plain size="medium" style="margin-right: 10px;">导出报表</el-button>
|
|
|
+ </downloadexcel>
|
|
|
+ <span class="blue cursor" style="padding-left: 20px;font-size: 14px;" @click="$openUrl(18)">什么是每月奖扣目标，如何使用？</span>
|
|
|
+ </div>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </el-header>
|
|
|
+ <el-main v-if="currentTag === 'target'">
|
|
|
+ <el-table :data="target.list" style="width: 100%" v-loading="loading" @row-click="openDetailTarget">
|
|
|
+ <el-table-column label="管理者">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <userImage class="fl" :id="scope.row.id" :user_name="scope.row.name" :img_url="scope.row.img_url" width="50px" height="50px" />
|
|
|
+ <span style="margin-left: 10px; line-height: 50px; display: inline-block;">{{scope.row.name}}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="奖分">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <b>{{scope.row.reward.point}}</b>
|
|
|
+ <span :class="scope.row.reward.status === 1 ? 'color_green' : ''">{{scope.row.reward.status === 1 ? '达标' : ''}}</span>
|
|
|
+ <br/>
|
|
|
+ <span class="span_h">奖分目标 {{scope.row.reward.target}}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="扣分">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <b>{{scope.row.deduction.point}}</b>
|
|
|
+ <span :class="scope.row.deduction.status === 1 ? 'color_green' : ''">{{scope.row.deduction.status === 1 ? '达标' : ''}}</span>
|
|
|
+ <br/>
|
|
|
+ <span class="span_h">扣分目标 {{scope.row.deduction.target}}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="奖扣比例">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <div v-if="scope.row.ratio.enable === 1">
|
|
|
+ <b>{{scope.row.ratio.reward_ratio}} : 1</b>
|
|
|
+ <span :class="scope.row.ratio.status === 1 ? 'color_green' : ''">{{scope.row.ratio.status === 1 ? '达标' : ''}}</span>
|
|
|
+ <br/>
|
|
|
+ <span class="span_h">
|
|
|
+ 比例目标 小于 {{scope.row.ratio.target}}
|
|
|
+ <b>:</b>
|
|
|
+ 1
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ <div v-else style="padding-left:21px">—</div>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="奖扣人次" >
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <b>{{ scope.row.exec.count }} </b>
|
|
|
+ <span :class="scope.row.exec.status === 1 ? 'color_green' : ''">{{ scope.row.exec.status === 1 ? '达标' : '' }}</span>
|
|
|
+ <br />
|
|
|
+ <span class="span_h">人次目标 {{ scope.row.exec.target }}人次</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ <center style="padding: 20px 0;">
|
|
|
+ <el-pagination
|
|
|
+ background
|
|
|
+ @size-change="handleTargetSizeChange"
|
|
|
+ @current-change="handleTargetPageChange"
|
|
|
+ :current-page="target.page"
|
|
|
+ layout="total, sizes, prev, pager, next"
|
|
|
+ :page-size="target.pageSize"
|
|
|
+ :page-sizes="[10, 20, 50, 100]"
|
|
|
+ :total="target.total"
|
|
|
+ />
|
|
|
+ </center>
|
|
|
+
|
|
|
+ </el-main>
|
|
|
+ <el-main v-if="currentTag === 'search'">
|
|
|
+ <el-table :data="search.list" style="width: 100%" v-loading="loading" @row-click="openDetailSearch">
|
|
|
+ <el-table-column label="管理者">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <userImage class="fl" :id="scope.row.id" :user_name="scope.row.name" :img_url="scope.row.img_url" width="50px" height="50px" />
|
|
|
+ <span style="margin-left: 10px; line-height: 50px; display: inline-block;">{{scope.row.name}}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="奖分" prop="reward_point" />
|
|
|
+ <el-table-column label="扣分" prop="deduction_point"/>
|
|
|
+ <el-table-column label="奖扣比例" prop="ratio" :formatter="ratioFormatter"/>
|
|
|
+ <el-table-column label="奖扣人次" prop="exec" />
|
|
|
+ </el-table>
|
|
|
+ <center style="padding: 20px 0;">
|
|
|
+ <el-pagination
|
|
|
+ background
|
|
|
+ @size-change="handleSearchSizeChange"
|
|
|
+ @current-change="handleSearchPageChange"
|
|
|
+ :current-page="search.page"
|
|
|
+ layout="total, sizes, prev, pager, next"
|
|
|
+ :page-size="search.pageSize"
|
|
|
+ :page-sizes="[10, 20, 50, 100]"
|
|
|
+ :total="search.total"
|
|
|
+ />
|
|
|
+ </center>
|
|
|
+ </el-main>
|
|
|
+
|
|
|
+ </el-container>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+
|
|
|
+<script>
|
|
|
+
|
|
|
+import Template from "../../../examine/components/Template.vue";
|
|
|
+import downloadexcel from "vue-json-excel";
|
|
|
+export default {
|
|
|
+ name:'manager_statistics_v2',
|
|
|
+ components: {Template,downloadexcel},
|
|
|
+ data(){
|
|
|
+ let startDate = new Date();
|
|
|
+ startDate.setTime(startDate.getTime() - 3600 * 1000 * 24 * 7);
|
|
|
+ startDate = this.$moment(startDate).format('YYYY-MM-DD');
|
|
|
+ let endDate = this.$moment().format('YYYY-MM-DD');
|
|
|
+ return {
|
|
|
+ tabs:[
|
|
|
+ {label:'奖扣目标',name:'target'},
|
|
|
+ {label: '奖扣查询',name: 'search'}
|
|
|
+ ],
|
|
|
+ currentTag:'target',
|
|
|
+ loading:false,
|
|
|
+ deptTrees: [],
|
|
|
+ formData:{
|
|
|
+ month: this.$moment().format('YYYY-MM'),
|
|
|
+ startDate: startDate,
|
|
|
+ endDate: endDate,
|
|
|
+ deptId: 0,
|
|
|
+ keyword: '',
|
|
|
+ complete: false
|
|
|
+ },
|
|
|
+ timeScope:[
|
|
|
+ startDate,
|
|
|
+ endDate
|
|
|
+ ],
|
|
|
+ dept_name_xq_xq: '',
|
|
|
+ target:{
|
|
|
+ list:[],
|
|
|
+ total:0,
|
|
|
+ page:1,
|
|
|
+ pageSize:10
|
|
|
+ },
|
|
|
+ search:{
|
|
|
+ list:[],
|
|
|
+ total:0,
|
|
|
+ page:1,
|
|
|
+ pageSize:10
|
|
|
+ },
|
|
|
+ downloadTargetFields:{
|
|
|
+ '姓名':'name',
|
|
|
+ '部门':'dept',
|
|
|
+ '实际奖分':'rewardPoint',
|
|
|
+ '奖分目标':'rewardTarget',
|
|
|
+ '实际扣分':'deductionPoint',
|
|
|
+ '扣分目标':'deductionTarget',
|
|
|
+ '实际奖扣比例':'ratio',
|
|
|
+ '比例目标':'ratioTarget',
|
|
|
+ '实际奖扣人次':'exec',
|
|
|
+ '人次目标':'execTarget',
|
|
|
+ '月份':'timeScope',
|
|
|
+ },
|
|
|
+ downloadSearchFields:{
|
|
|
+ '姓名':'name',
|
|
|
+ '部门':'dept',
|
|
|
+ '奖分':'rewardPoint',
|
|
|
+ '扣分':'deductionPoint',
|
|
|
+ '奖扣比例':'ratio',
|
|
|
+ '奖扣人次':'exec',
|
|
|
+ '周期':'timeScope',
|
|
|
+ },
|
|
|
+ downloadData:[]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.currentTag = this.$route.query.tag || 'target';
|
|
|
+ if (['target','search'].indexOf(this.currentTag) < 0) this.currentTag = 'target';
|
|
|
+ },
|
|
|
+ computed:{
|
|
|
+ downloadFields: function (){
|
|
|
+ return this.currentTag === 'target' ? this.downloadTargetFields : this.downloadSearchFields;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ if (this.$getCache('dept_tree')) {
|
|
|
+ this.deptTrees = this.getTreeData(this.$getCache('dept_tree'));
|
|
|
+ }
|
|
|
+ this.getList();
|
|
|
+ },
|
|
|
+ watch:{
|
|
|
+ 'formData.month'(val,oVal){
|
|
|
+ if (val === oVal) return;
|
|
|
+ this.target.page = 1;
|
|
|
+ this.search.page = 1;
|
|
|
+ this.getList();
|
|
|
+ },
|
|
|
+ 'formData.startDate'(val,oVal){
|
|
|
+ if (val === oVal) return;
|
|
|
+ this.target.page = 1;
|
|
|
+ this.search.page = 1;
|
|
|
+ this.getList();
|
|
|
+ },
|
|
|
+ 'formData.endDate'(val,oVal){
|
|
|
+ if (val === oVal) return;
|
|
|
+ this.target.page = 1;
|
|
|
+ this.search.page = 1;
|
|
|
+ this.getList();
|
|
|
+ },
|
|
|
+ 'formData.deptId'(val,oVal){
|
|
|
+ if (val === oVal) return;
|
|
|
+ this.target.page = 1;
|
|
|
+ this.search.page = 1;
|
|
|
+ this.getList();
|
|
|
+ },
|
|
|
+ 'formData.complete'(val,oVal){
|
|
|
+ if (val === oVal) return;
|
|
|
+ this.target.page = 1;
|
|
|
+ this.search.page = 1;
|
|
|
+ this.getList();
|
|
|
+ },
|
|
|
+ 'target.page'(val,oVal){
|
|
|
+ if (val === oVal) return;
|
|
|
+ this.getList();
|
|
|
+ },
|
|
|
+ 'target.pageSize'(val,oVal){
|
|
|
+ if (val === oVal) return;
|
|
|
+ this.getList();
|
|
|
+ },
|
|
|
+ 'search.page'(val,oVal){
|
|
|
+ if (val === oVal) return;
|
|
|
+ this.getList();
|
|
|
+ },
|
|
|
+ 'search.pageSize'(val,oVal){
|
|
|
+ if (val === oVal) return;
|
|
|
+ this.getList();
|
|
|
+ },
|
|
|
+ currentTag(val,oVal){
|
|
|
+ if (val === oVal) return;
|
|
|
+ this.getList();
|
|
|
+ // this.$router.push({path: '/manager_statistics',query:{tag:val}})
|
|
|
+ },
|
|
|
+ timeScope(val,oVal){
|
|
|
+ this.formData.startDate = val[0];
|
|
|
+ this.formData.endDate = val[1];
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ //部门
|
|
|
+ getLastDeptNull(val) {
|
|
|
+ if (val.length == 0) {
|
|
|
+ this.formData.deptId = 0;
|
|
|
+ } else {
|
|
|
+ this.formData.deptId = val[val.length-1];
|
|
|
+ }
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.$refs.dept.dropDownVisible = false; //监听值发生变化就关闭它
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 递归判断列表，把最后的children设为undefined
|
|
|
+ getTreeData(data) {
|
|
|
+ for (var i = 0; i < data.length; i++) {
|
|
|
+ if (data[i].children.length < 1) {
|
|
|
+ // children若为空数组，则将children设为undefined
|
|
|
+ data[i].children = undefined;
|
|
|
+ } else {
|
|
|
+ // children若不为空数组，则继续 递归调用 本方法
|
|
|
+ this.getTreeData(data[i].children);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return data;
|
|
|
+ },
|
|
|
+ getList(){
|
|
|
+ if (this.currentTag === 'target'){
|
|
|
+ this.getTargetList();
|
|
|
+ }else {
|
|
|
+ this.getSearchList();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ parseDownloadDataTarget(data){
|
|
|
+ return {
|
|
|
+ name:data.name,
|
|
|
+ dept:data.dept,
|
|
|
+ rewardPoint:data.reward.point,
|
|
|
+ rewardTarget:data.reward.target,
|
|
|
+ deductionPoint:data.deduction.point,
|
|
|
+ deductionTarget:data.deduction.target,
|
|
|
+ ratio:data.ratio.enable === 1 ? data.ratio.reward_ratio + '比1' : '-',
|
|
|
+ ratioTarget:data.ratio.target+'比1',
|
|
|
+ exec:data.exec.count,
|
|
|
+ execTarget:data.exec.target,
|
|
|
+ }
|
|
|
+ },
|
|
|
+ parseDownloadDataSearch(data){
|
|
|
+ return {
|
|
|
+ name:data.name,
|
|
|
+ dept:data.dept,
|
|
|
+ rewardPoint:data.reward_point,
|
|
|
+ deductionPoint:data.deduction_point,
|
|
|
+ ratio:data.ratio,
|
|
|
+ exec:data.exec,
|
|
|
+ }
|
|
|
+ },
|
|
|
+ getTargetList(){
|
|
|
+ let msg = {
|
|
|
+ type:'es',
|
|
|
+ employee_id:this.$userInfo().id,
|
|
|
+ page:this.target.page,
|
|
|
+ page_size:this.target.pageSize,
|
|
|
+ month:this.formData.month,
|
|
|
+ dept_id:this.formData.deptId,
|
|
|
+ complete:this.formData.complete ? 1 : 0,
|
|
|
+ keyword:this.formData.keyword
|
|
|
+ }
|
|
|
+ let self = this;
|
|
|
+ self.loading = true;
|
|
|
+ //清空导出数据
|
|
|
+ self.downloadData = [];
|
|
|
+ this.$socketApiTow.sendData(msg,(res) => {
|
|
|
+ if (res.type !== msg.type || res.code !== 1) return;
|
|
|
+ self.target.list = res.result.list;
|
|
|
+ self.target.total = res.result.total;
|
|
|
+ //刷新导出数据
|
|
|
+ if (msg.page === 0){
|
|
|
+ self.downloadData = self.target.list.map((item) => {
|
|
|
+ let i = self.parseDownloadDataTarget(item);
|
|
|
+ i.timeScope = msg.month
|
|
|
+ return i;
|
|
|
+ });
|
|
|
+ self.loading = false;
|
|
|
+ }else {
|
|
|
+ msg.page = 0;
|
|
|
+ self.$socketApiTow.sendData(msg,(res) => {
|
|
|
+ if (res.type !== msg.type || res.code !== 1) return;
|
|
|
+ self.downloadData = res.result.list.map((item) => {
|
|
|
+ let i = self.parseDownloadDataTarget(item);
|
|
|
+ i.timeScope = msg.month
|
|
|
+ return i;
|
|
|
+ });
|
|
|
+ self.loading = false;
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ getSearchList(){
|
|
|
+ let msg = {
|
|
|
+ type:'ess',
|
|
|
+ employee_id:this.$userInfo().id,
|
|
|
+ start_date:this.formData.startDate,
|
|
|
+ end_date:this.formData.endDate,
|
|
|
+ dept_id:this.formData.deptId,
|
|
|
+ keyword:this.formData.keyword,
|
|
|
+ page:this.search.page,
|
|
|
+ page_size:this.search.pageSize
|
|
|
+ }
|
|
|
+ let self = this;
|
|
|
+ self.loading = true;
|
|
|
+ //清空导出数据
|
|
|
+ self.downloadData = [];
|
|
|
+ this.$socketApiTow.sendData(msg,(res)=>{
|
|
|
+ if (res.type !== msg.type || res.code !== 1) return;
|
|
|
+ self.search.list = res.result.list;
|
|
|
+ self.search.total = res.result.total;
|
|
|
+ //刷新导出数据
|
|
|
+ if (msg.page === 0){
|
|
|
+ self.downloadData = self.search.list.map((item) => {
|
|
|
+ let i = self.parseDownloadDataSearch(item);
|
|
|
+ i.timeScope = msg.start_date + "至" + msg.end_date;
|
|
|
+ return i;
|
|
|
+ });
|
|
|
+ self.loading = false;
|
|
|
+ }else {
|
|
|
+ msg.page = 0;
|
|
|
+ self.$socketApiTow.sendData(msg,(res) => {
|
|
|
+ if (res.type !== msg.type || res.code !== 1) return;
|
|
|
+ self.downloadData = res.result.list.map((item) => {
|
|
|
+ let i = self.parseDownloadDataSearch(item);
|
|
|
+ i.timeScope = msg.start_date + "至" + msg.end_date;
|
|
|
+ return i;
|
|
|
+ });
|
|
|
+ self.loading = false;
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ handleTargetSizeChange(val){
|
|
|
+ this.target.pageSize = val;
|
|
|
+ },
|
|
|
+ handleTargetPageChange(val){
|
|
|
+ this.target.page = val;
|
|
|
+ },
|
|
|
+ handleSearchSizeChange(val){
|
|
|
+ this.search.pageSize = val;
|
|
|
+ },
|
|
|
+ handleSearchPageChange(val){
|
|
|
+ this.search.page = val;
|
|
|
+ },
|
|
|
+ keywordSearch(){
|
|
|
+ this.target.page = 1;
|
|
|
+ this.search.page = 1;
|
|
|
+ this.getList();
|
|
|
+ },
|
|
|
+ getDownloadData(){
|
|
|
+ return this.downloadData;
|
|
|
+ },
|
|
|
+ openDetailTarget(e){
|
|
|
+ this.openDetail({
|
|
|
+ date:this.formData.month,
|
|
|
+ id:e.id,
|
|
|
+ name:e.name,
|
|
|
+ source:'target',
|
|
|
+ });
|
|
|
+ },
|
|
|
+ openDetailSearch(e){
|
|
|
+ this.openDetail({
|
|
|
+ startDate:this.formData.startDate,
|
|
|
+ endDate:this.formData.endDate,
|
|
|
+ id:e.id,
|
|
|
+ name:e.name,
|
|
|
+ source:'search',
|
|
|
+ });
|
|
|
+ },
|
|
|
+ openDetail(data){
|
|
|
+ // this.$router.push({path:'/integral_event_two',query:{data:JSON.stringify(data)}})
|
|
|
+ this.$router.replace({path:'/integral_event_two',query:{data:JSON.stringify(data)}});
|
|
|
+ },
|
|
|
+ ratioFormatter(row, column, cellValue, index){
|
|
|
+ return cellValue ? cellValue : '--';
|
|
|
+ },
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+</script>
|
|
|
+
|
|
|
+
|
|
|
+<style scoped lang="scss">
|
|
|
+.search_box {
|
|
|
+ /deep/ button:active {
|
|
|
+ background: #409EFF;
|
|
|
+ }
|
|
|
+ /deep/ button:active .el-icon-search {
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+}
|
|
|
+.date-picker-width {
|
|
|
+ width: 100% !important;
|
|
|
+}
|
|
|
+.color_green {
|
|
|
+ color: #67c23a;
|
|
|
+}
|
|
|
+.nopoint_box {
|
|
|
+ display: inline-block;
|
|
|
+ text-align: center;
|
|
|
+ width: 100%;
|
|
|
+ margin-bottom: 10px;
|
|
|
+}
|
|
|
+.title {
|
|
|
+ display: block;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 12px !important;
|
|
|
+ line-height: 30px;
|
|
|
+ color: #909399 !important;
|
|
|
+ padding: 0;
|
|
|
+}
|
|
|
+.nopoint_box a {
|
|
|
+ color: #409EFF;
|
|
|
+}
|
|
|
+.chart_content {
|
|
|
+ height: 90vh;
|
|
|
+ overflow-y: auto;
|
|
|
+ overflow-x: hidden;
|
|
|
+ .chart-legend__wrap {
|
|
|
+ text-align: right;
|
|
|
+ padding: 20px;
|
|
|
+ padding-right: 50px;
|
|
|
+ & .chart-legend__pink {
|
|
|
+ position: relative;
|
|
|
+ padding-left: 12px;
|
|
|
+ padding-right: 5px;
|
|
|
+ &:after {
|
|
|
+ content: '';
|
|
|
+ position: absolute;
|
|
|
+ margin-top: -2px;
|
|
|
+ top: 35%;
|
|
|
+ left: 0;
|
|
|
+ width: 8px;
|
|
|
+ height: 8px;
|
|
|
+ background: #f56c6c;
|
|
|
+ border-radius: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ & .chart-legend__green {
|
|
|
+ position: relative;
|
|
|
+ padding-left: 12px;
|
|
|
+ &:after {
|
|
|
+ content: '';
|
|
|
+ position: absolute;
|
|
|
+ margin-top: -2px;
|
|
|
+ top: 35%;
|
|
|
+ left: 0;
|
|
|
+ width: 8px;
|
|
|
+ height: 8px;
|
|
|
+ background: #53b87f;
|
|
|
+ border-radius: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// 滚动条样式
|
|
|
+.chart_content::-webkit-scrollbar-track {
|
|
|
+ -webkit-box-shadow: inset 0 0 5px rgb(255, 255, 255);
|
|
|
+ border-radius: 5px;
|
|
|
+ background-color: rgb(255, 255, 255);
|
|
|
+}
|
|
|
+.chart_content::-webkit-scrollbar {
|
|
|
+ width: 5px;
|
|
|
+ background-color: rgba(201, 201, 201, 0);
|
|
|
+}
|
|
|
+.chart_content::-webkit-scrollbar-thumb {
|
|
|
+ border-radius: 5px;
|
|
|
+ -webkit-box-shadow: inset 0 0 5px rgb(153, 145, 145) (160, 154, 154);
|
|
|
+ background-color: rgb(168, 167, 167);
|
|
|
+}
|
|
|
+
|
|
|
+.dataItem {
|
|
|
+ text-align: center;
|
|
|
+ .point {
|
|
|
+ font-size: 22px;
|
|
|
+ color: #409EFF;
|
|
|
+ margin: 10px 0;
|
|
|
+ }
|
|
|
+ .target {
|
|
|
+ font-size: 12px;
|
|
|
+ color: #909399;
|
|
|
+ }
|
|
|
+}
|
|
|
+.drawer_title {
|
|
|
+ font-size: 18px;
|
|
|
+ padding: 20px;
|
|
|
+}
|
|
|
+.manager_statistics_box {
|
|
|
+ background-color: #ffffff;
|
|
|
+ padding: 20px;
|
|
|
+ /deep/ .el-row .el-checkbox .el-checkbox__label {
|
|
|
+ line-height: 20px;
|
|
|
+ }
|
|
|
+}
|
|
|
+.tips {
|
|
|
+ background: #409EFF;
|
|
|
+ border-radius: 50%;
|
|
|
+ width: 14px;
|
|
|
+ height: 14px;
|
|
|
+ color: #fff;
|
|
|
+ display: inline-block;
|
|
|
+ font-size: 12px;
|
|
|
+ line-height: 14px;
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+.el-form-item__label {
|
|
|
+ width: 0px !important;
|
|
|
+}
|
|
|
+
|
|
|
+// .persons_names{
|
|
|
+// margin-left: 160px;
|
|
|
+// }
|
|
|
+.wlj {
|
|
|
+ & .color_green {
|
|
|
+ color: #49d3a7;
|
|
|
+ }
|
|
|
+ & .color_red {
|
|
|
+ color: #f04b56;
|
|
|
+ }
|
|
|
+}
|
|
|
+b {
|
|
|
+ font-size: 14px;
|
|
|
+}
|
|
|
+.span_h {
|
|
|
+ font-size: 13px;
|
|
|
+ color: #898c94;
|
|
|
+}
|
|
|
+/deep/.el-table tbody tr{
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+</style>
|
