You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
443 lines
12 KiB
443 lines
12 KiB
<template>
|
|
<div class="dashboard-editor-container">
|
|
<!-- 招生团队首页 -->
|
|
<div>
|
|
<el-row :gutter="40" class="panel-group" style="margin-bottom: 20px">
|
|
<!-- <el-col :span="6">
|
|
<el-card>
|
|
<div slot="header">
|
|
问候
|
|
</div>
|
|
<div class="task-pane">
|
|
<p>亲爱的{{user.nickName}}，您好！</p>
|
|
<p>人生的路，漫长且孤独，短暂也快乐，漫长的是考验，短暂的是幸福，平坦的路途，让我们心怀感恩，泥泞的路途，让我们努力加油。</p>
|
|
</div>
|
|
</el-card>
|
|
</el-col> -->
|
|
<el-col :span="6">
|
|
<el-card>
|
|
<div slot="header">
|
|
计划总结
|
|
<span style="float:right">
|
|
<el-button type="text" size="mini" @click="handleEditTask(1)">本月计划</el-button>
|
|
<el-button type="text" size="mini" @click="handleEditTask(2 )">今日计划</el-button>
|
|
</span>
|
|
</div>
|
|
<div class="task-pane">
|
|
<div v-html="task" />
|
|
</div>
|
|
</el-card>
|
|
</el-col>
|
|
|
|
<el-col :span="6">
|
|
<el-card>
|
|
<div slot="header">团队业绩概况</div>
|
|
<div class="card-panel">
|
|
<div class="card-panel-icon-wrapper icon-people">
|
|
<svg-icon icon-class="peoples" class-name="card-panel-icon" style="color: #EE7621;" />
|
|
</div>
|
|
<div class="card-panel-description">
|
|
<div>
|
|
<span class="card-panel-text">本月报名数:</span>
|
|
<count-to :start-val="0" :end-val="count.monthSign" :duration="5" class="card-panel-num" />
|
|
</div>
|
|
<div style="margin-top: 20px">
|
|
<span class="card-panel-text">今日报名数:</span>
|
|
<count-to :start-val="0" :end-val="count.todaySign" :duration="5" class="card-panel-num" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</el-card>
|
|
</el-col>
|
|
|
|
<el-col :span="6">
|
|
<el-card>
|
|
<div slot="header">转化率</div>
|
|
<div class="card-panel">
|
|
<div class="card-panel-icon-wrapper icon-people">
|
|
<svg-icon icon-class="peoples" class-name="card-panel-icon" style="color: #EE7621;" />
|
|
</div>
|
|
<div class="card-panel-description">
|
|
<div>
|
|
<span class="card-panel-text">本月转化率:</span>
|
|
<span class="card-panel-num">{{rate.currentSignRate}}</span>
|
|
<!-- <count-to
|
|
:start-val="0"
|
|
:end-val="rate.currentSignRate"
|
|
:duration="0.1"
|
|
class="card-panel-num"
|
|
/>-->
|
|
</div>
|
|
<div style="margin-top: 20px">
|
|
<span class="card-panel-text">上月转化率:</span>
|
|
<span class="card-panel-num">{{rate.lastSignRate}}</span>
|
|
<!-- <count-to
|
|
:start-val="0"
|
|
:end-val="rate.lastSignRate"
|
|
:duration="5"
|
|
class="card-panel-num"
|
|
/>-->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</el-card>
|
|
</el-col>
|
|
<!-- </el-row>
|
|
<el-row :gutter="40" class="panel-group" style="margin-bottom: 20px"> -->
|
|
|
|
<!-- 考勤信息 -->
|
|
<el-col :span="6">
|
|
<el-card>
|
|
<div slot="header">打卡异常信息</div>
|
|
<div class="card-panel">
|
|
<el-carousel :interval="3000" arrow="always">
|
|
<el-carousel-item v-for="item in countNum" :key="item">
|
|
<ul style="overflow:auto">
|
|
<li v-for="i in 5" :key="i" class="infinite-list-item">
|
|
<span v-for="(d,index ) in checkin_datas" :key="index" v-if="index == ((item-1)*5 + i - 1)">
|
|
<span style="float:left">{{d.name}}</span>
|
|
<span style="float:right">{{d.error_days}} 天</span>
|
|
</span>
|
|
</li>
|
|
</ul>
|
|
</el-carousel-item>
|
|
</el-carousel>
|
|
</div>
|
|
</el-card>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
<!-- 成交数排行榜 -->
|
|
<el-row :gutter="32">
|
|
<!-- 本月个人成交数排行榜 -->
|
|
<el-col :xs="12" :sm="12" :lg="24">
|
|
<div class="chart-wrapper">
|
|
<span>本月成交排行榜</span>
|
|
<bar-chart-1 />
|
|
</div>
|
|
</el-col>
|
|
<!-- 今日个人成交数排行榜 -->
|
|
<el-col :xs="12" :sm="12" :lg="24">
|
|
<div class="chart-wrapper">
|
|
<span>今日成交排行榜</span>
|
|
<bar-chart />
|
|
</div>
|
|
</el-col>
|
|
|
|
</el-row>
|
|
<!-- 成交率排行榜 -->
|
|
<el-row :gutter="32">
|
|
<!-- 本月个人成交率排行榜 -->
|
|
<el-col :xs="12" :sm="12" :lg="24">
|
|
<div class="chart-wrapper">
|
|
<span>本月成交率排行榜</span>
|
|
<bar-chart-2 />
|
|
</div>
|
|
</el-col>
|
|
|
|
<!-- 上月个人成交率排行榜 -->
|
|
<el-col :xs="12" :sm="12" :lg="24">
|
|
<div class="chart-wrapper">
|
|
<span>上月成交率排行榜</span>
|
|
<bar-chart-3 />
|
|
</div>
|
|
</el-col>
|
|
</el-row>
|
|
</div>
|
|
|
|
<!-- 添加或修改公告对话框 -->
|
|
<el-dialog :title="title" :visible.sync="open" width="780px" append-to-body>
|
|
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
|
|
<el-row>
|
|
<el-col :span="24" v-if="taskType === 2">
|
|
<el-form-item label="日期" prop="day">
|
|
<el-date-picker v-model="form.day" value-format="yyyy-MM-dd" format="yyyy-MM-dd" type="date" disabled />
|
|
</el-form-item>
|
|
</el-col>
|
|
|
|
<el-col :span="24">
|
|
<el-form-item label="任务内容">
|
|
<editor v-model="form.content" />
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
</el-form>
|
|
<div slot="footer" class="dialog-footer" style="padding-top:20px">
|
|
<el-button type="primary" @click="submitForm">确 定</el-button>
|
|
<el-button @click="open=false">取 消</el-button>
|
|
</div>
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import BarChart from './dashboard/BarChart'
|
|
import { getCount, dealRate, getCheckin } from '@/api/home'
|
|
import { saveTask, getTask } from '@/api/system/summary'
|
|
import CountTo from 'vue-count-to'
|
|
import BarChart1 from './dashboard/BarChart1'
|
|
import { getUserProfile } from '@/api/system/user'
|
|
import BarChart2 from './dashboard/BarChart2'
|
|
import BarChart3 from './dashboard/BarChart3'
|
|
import editor from '@/components/Editor'
|
|
|
|
export default {
|
|
name: 'Index',
|
|
components: {
|
|
BarChart,
|
|
BarChart1,
|
|
BarChart2,
|
|
BarChart3,
|
|
CountTo,
|
|
editor,
|
|
},
|
|
data() {
|
|
return {
|
|
count: {},
|
|
user: {},
|
|
userId: localStorage.getItem('userId'),
|
|
rate: {},
|
|
checkin_datas: [],
|
|
task: undefined,
|
|
countNum: 0,
|
|
title: undefined,
|
|
open: false,
|
|
form: {
|
|
taskType: 1,
|
|
userId: undefined,
|
|
month: undefined,
|
|
day: undefined,
|
|
content: undefined,
|
|
},
|
|
// 表单校验
|
|
rules: {
|
|
day: [{ required: true, message: '日期不能为空', trigger: 'blur' }],
|
|
content: [
|
|
{ required: true, message: '任务内容不能为空', trigger: 'blur' },
|
|
],
|
|
},
|
|
taskType: 1,
|
|
}
|
|
},
|
|
created() {
|
|
this.getUser()
|
|
getCount().then((response) => {
|
|
this.count = response.data
|
|
})
|
|
dealRate().then((response) => {
|
|
this.rate = response.data
|
|
})
|
|
this.getCheckin()
|
|
this.getTask(1)
|
|
},
|
|
methods: {
|
|
getUser() {
|
|
getUserProfile().then((response) => {
|
|
this.user = response.data
|
|
})
|
|
},
|
|
getCheckin() {
|
|
getCheckin().then((resp) => {
|
|
this.checkin_datas = resp.data
|
|
this.countNum = Math.ceil(this.checkin_datas.length / 5)
|
|
})
|
|
},
|
|
handleEditTask(type) {
|
|
this.taskType = type
|
|
if (type === 2) {
|
|
this.title = '今日任务'
|
|
} else {
|
|
this.title = '本月任务'
|
|
}
|
|
this.getTask(type)
|
|
this.open = true
|
|
},
|
|
submitForm() {
|
|
this.$refs['form'].validate((valid) => {
|
|
if (valid) {
|
|
saveTask(this.form).then((response) => {
|
|
if (response.code === 200) {
|
|
this.$message.success('保存成功')
|
|
this.open = false
|
|
if (this.taskType == 1) {
|
|
this.task = this.form.content
|
|
}
|
|
}
|
|
})
|
|
}
|
|
})
|
|
},
|
|
getTask(type) {
|
|
this.form = {
|
|
taskType: type,
|
|
userId: this.userId,
|
|
month: undefined,
|
|
day: undefined,
|
|
content: undefined,
|
|
}
|
|
//查询当前任务，编辑查询当前月的，细化查询当日的
|
|
let now = new Date()
|
|
let year = now.getFullYear() //得到年份
|
|
let month = now.getMonth() + 1 //得到月份
|
|
let day = now.getDate() //得到日期
|
|
this.$set(this.form, 'month', month)
|
|
if (type === 2) {
|
|
this.$set(this.form, 'day', year + '-' + month + '-' + day)
|
|
}
|
|
getTask(this.form).then((resp) => {
|
|
if (resp.code == 200 && resp.data) {
|
|
this.form = resp.data
|
|
if (type == 1) {
|
|
this.task = resp.data.content
|
|
}
|
|
}
|
|
})
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.task-pane {
|
|
overflow-y: auto;
|
|
height: 120px;
|
|
max-height: 120px;
|
|
}
|
|
.dashboard-editor-container {
|
|
padding: 25px;
|
|
background-color: rgb(240, 242, 245);
|
|
position: relative;
|
|
|
|
.chart-wrapper {
|
|
background: #fff;
|
|
padding: 16px 16px 0;
|
|
margin-bottom: 20px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 1024px) {
|
|
.chart-wrapper {
|
|
padding: 8px;
|
|
}
|
|
|
|
.card-panel-col {
|
|
width: 50%;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<style lang="scss" scoped>
|
|
.panel-group {
|
|
margin-top: 5px;
|
|
|
|
.card-panel-col {
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.card-panel {
|
|
height: 120px;
|
|
cursor: pointer;
|
|
font-size: 12px;
|
|
position: relative;
|
|
overflow: hidden;
|
|
color: #666;
|
|
background: #fff;
|
|
box-shadow: 4px 4px 40px rgba(0, 0, 0, 0.05);
|
|
border-color: rgba(0, 0, 0, 0.05);
|
|
|
|
&:hover {
|
|
.card-panel-icon-wrapper {
|
|
color: #fff;
|
|
}
|
|
|
|
.icon-people {
|
|
background: #40c9c6;
|
|
}
|
|
|
|
.icon-message {
|
|
background: #36a3f7;
|
|
}
|
|
|
|
.icon-money {
|
|
background: #f4516c;
|
|
}
|
|
|
|
.icon-shopping {
|
|
background: #34bfa3;
|
|
}
|
|
}
|
|
|
|
.icon-people {
|
|
color: #40c9c6;
|
|
}
|
|
|
|
.icon-message {
|
|
color: #36a3f7;
|
|
}
|
|
|
|
.icon-money {
|
|
color: #f4516c;
|
|
}
|
|
|
|
.icon-shopping {
|
|
color: #34bfa3;
|
|
}
|
|
|
|
.card-panel-icon-wrapper {
|
|
float: left;
|
|
margin: 20px 0 0 10px;
|
|
padding: 16px;
|
|
transition: all 0.38s ease-out;
|
|
border-radius: 6px;
|
|
}
|
|
|
|
.card-panel-icon {
|
|
float: left;
|
|
font-size: 48px;
|
|
}
|
|
|
|
.card-panel-description {
|
|
float: right;
|
|
font-weight: bold;
|
|
margin: 26px;
|
|
margin-left: 0px;
|
|
|
|
.card-panel-text {
|
|
line-height: 18px;
|
|
color: rgba(0, 0, 0, 0.45);
|
|
font-size: 16px;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.card-panel-num {
|
|
font-size: 20px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.infinite-list-item {
|
|
height: 20px;
|
|
margin: 2px;
|
|
list-style: none;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 550px) {
|
|
.card-panel-description {
|
|
display: none;
|
|
}
|
|
|
|
.card-panel-icon-wrapper {
|
|
float: none !important;
|
|
width: 100%;
|
|
height: 100%;
|
|
margin: 0 !important;
|
|
|
|
.svg-icon {
|
|
display: block;
|
|
margin: 14px auto !important;
|
|
float: none !important;
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
|