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}} / {{uTime}}</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,
      user: JSON.parse(sessionStorage.getItem("user")),
      uName: "周瑞霆",
      uTime: "2020-01-03",
      uHours: 20,
      timeList: [],
      srcList: [],
      infoList: [],
      myChart: null
    };
  },
  methods: {
    //获取个人当天的工作时间数据
    getInfo() {
      this.listLoading = true;
      this.http.post(
        this.port.time.getToday,
        { userId: this.detailId },
        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 },
        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[5]/3600).toFixed(2), name: "美工" },
            //   { value: (this.timeList[6]/3600).toFixed(2), name: "运营" },
              { value: (this.timeList[6]/3600).toFixed(2), name: "看小说" },
              { value: (this.timeList[7]/3600).toFixed(2), name: "影视娱乐" },
              { value: (this.timeList[8]/3600).toFixed(2), name: "听音乐" },
              { value: (this.timeList[0]/3600).toFixed(2), name: "其他" }
            ]
          }
        ]
      };
      myChart.setOption(option);
    },

    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 "听音乐";
        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;
  }
}
</style>