dm-manage-web/src/views/index.vue

<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>