manHourHousekeeper/fhKeeper/formulahousekeeper/timesheet/src/views/desktop/detail.vue

<template>
  <section>
    <!--工具条-->
    <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
      <el-form :inline="true">
        <el-form-item>
          <el-button type="text" @click="backToList" icon="el-icon-back" class="back">返回</el-button>
        </el-form-item>
        <el-form-item class="divLine"></el-form-item>
        <el-form-item>
          <span class="workName">{{uName}} / {{date}}</span>
        </el-form-item>
        <el-form-item style="float:right;">
          今日工作时长：
          <span class="workHours">{{uHours}}h</span>
        </el-form-item>
      </el-form>
    </el-col>

    <!-- 卡片列表 -->
    <div>
      <el-col :span="24" class="one_div">
        <div id="pie_echarts"></div>
      </el-col>
      <el-col :span="6" v-for="(item, index) in infoList" :key="index" class="one_div">
        <el-card :body-style="{ padding: '0px' }" shadow="hover" class="one_card">
          <div class="one_card_img">
            <el-image
              :src="srcList[index]"
              :preview-src-list="getSrcList(index)"
              class="image"
              lazy
            >
              <div slot="error" class="image-slot">
                <el-image :src="require('../../assets/image/noPic.png')" class="image" lazy></el-image>
              </div>
            </el-image>
          </div>
          <div class="one_card_txt">
            <span>{{converType(item.type+1)}}</span>
            <div class="bottom clearfix">
              <time class="time">{{item.time}}</time>
            </div>
          </div>
        </el-card>
      </el-col>
    </div>
  </section>
</template>

<script>
import util from "../../common/js/util";
export default {
  data() {
    return {
      detailId: this.$route.params.id,
      date: this.$route.params.date,
      user: JSON.parse(sessionStorage.getItem("user")),
      uName: "",
      uTime: "",
      uHours: 0,
      timeList: [],
      srcList: [],
      infoList: [],
      myChart: null
    };
  },
  methods: {
    //获取个人当天的工作时间数据
    getInfo() {
        this.listLoading = true;
        this.http.post(
            this.port.time.getToday,
            { userId: this.detailId,date: this.date },
            res => {
            this.listLoading = false;
            if (res.code == "ok") {
                //设置数据并绘制echarts
                this.uName = res.data.username;
                this.uTime = res.data.date;
                this.timeList = res.data.timeDistribution;
                //注意目前仅第0项即行为代码为0被计入正常工作 后续可能需要修改
                this.uHours = res.data.total;
                this.setEcharts();
                //之后顺便再获取一下截图
                this.getScreenshot();
            } else {
                this.$message({
                message: res.msg,
                type: "error"
                });
            }
            },
            error => {
            this.listLoading = false;
            this.$message({
                message: error,
                type: "error"
            });
            }
        );
    },

    //获取个人当天的截图数据
    getScreenshot() {
        this.listLoading = true;
        this.http.post(
            this.port.desktop.listToday,
            { userId: this.detailId,date: this.date },
            res => {
            this.listLoading = false;
            if (res.code == "ok") {
                this.srcList = res.data.srcList;
                this.infoList = res.data.data;
            } else {
                this.$message({
                message: res.msg,
                type: "error"
                });
            }
            },
            error => {
            this.listLoading = false;
            this.$message({
                message: error,
                type: "error"
            });
            }
        );
    },

    //返回
    backToList() {
      this.$router.go(-1);
    },

    setEcharts() {
      var myChart = this.echarts.init(document.getElementById("pie_echarts"));
      this.myChart = myChart;
      var option = {
        title: {
          text: "工作时长分配",
          left: "left"
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
          type: "scroll",
          orient: "vertical",
          right: 0,
          top: 30,
          bottom: 20,
          data: [
            "研发",
            "上网",
            "文档",
            "设计",
            // "美工",
            // "运营",
            "看小说",
            "影视娱乐",
            // "听音乐",
            "聊天",
            "其他工作"
          ]
        },
        toolbox: {
          show: true,
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            magicType: {
              show: true,
              type: ["pie", "funnel"]
            },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        series: [
          {
            name: "时长（单位：h）",
            type: "pie",
            radius: [30, 110],
            roseType: "area",
            data: [
              { value: (this.timeList[1] / 3600).toFixed(2), name: "研发" },
              { value: (this.timeList[2] / 3600).toFixed(2), name: "上网" },
              { value: (this.timeList[3] / 3600).toFixed(2), name: "文档" },
              { value: (this.timeList[4] / 3600).toFixed(2), name: "设计" },
              { value: (this.timeList[7] / 3600).toFixed(2), name: "看小说" },
              { value: (this.timeList[8] / 3600).toFixed(2), name: "影视娱乐" },
              { value: (this.timeList[10] / 3600).toFixed(2), name: "聊天" },
              { value: (this.timeList[0] / 3600).toFixed(2), name: "其他工作" }
            ]
          }
        ]
      };
      myChart.setOption(option,{notMerge: true});
    },

    getSrcList(index) {
      return this.srcList.slice(index).concat(this.srcList.slice(0, index));
    },

    //类型枚举转换
    converType(type) {
      switch (type) {
        case 0:
          return "其他工作";
        case 1:
          return "研发";
        case 2:
          return "上网";
        case 3:
          return "文档";
        case 4:
          return "设计";
        case 5:
          return "美工";
        case 6:
          return "运营";
        case 7:
          return "看小说";
        case 8:
          return "影视娱乐";
        case 9:
          return "听音乐";
        case 10:
          return "聊天";
        default:
          return "未知";
      }
    }
  },

  created() {},

  mounted() {
    this.getInfo();
    var _this = this;
    window.addEventListener("resize", function() {
      _this.myChart.resize();
    });
  }
};
</script>

<style lang="scss" scoped>
.toolbar {
  .el-form-item {
    font-size: 14px;
    vertical-align: middle;
  }
  .back {
    font-size: 16px;
    cursor: pointer;
  }
  .divLine {
    width: 2px;
    background: #c3c3c3;
    height: 100%;
  }
  .workName {
    color: #333;
    font-size: 18px;
  }
  .workHours {
    color: #20a0ff;
    font-size: 18px;
  }
}

.one_div {
  padding: 15px;
  .one_card {
    .image {
      width: 100%;
    }
    .one_card_txt {
      padding: 13px;
      .bottom {
        margin-top: 13px;
        line-height: 12px;
        i {
          color: #9ed0ff;
          margin-right: 5px;
        }
        .time {
          margin-top: 2px;
          color: #999;
        }
      }
    }
  }
  #pie_echarts {
    display: inline-block;
    width: 100%;
    height: 100%;
    min-height: 350px;
  }
}
</style>

<style lang="scss">
.image {
  .el-image__inner {
    height: 11.6vw !important;
  }
}
.el-icon-circle-close {
  color: white;
}
</style>