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 12" :key="item" class="one_div">
                <el-card :body-style="{ padding: '0px' }" shadow="hover" class="one_card">
                    <div class="one_card_img">
                        <el-image :src="index==0?require('../../assets/image/047_S.jpg'):require('../../assets/image/noPic.png')" :preview-src-list="getSrcList(index)" class="image" lazy></el-image>
                    </div>
                    <div class="one_card_txt">
                        <span>在玩游戏呢！！！！！</span>
                        <div class="bottom clearfix">
                            <time class="time">9点59分59秒</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,
                srcList: [
                    require('../../assets/image/047_S.jpg'),
                    require('../../assets/image/noPic.png'),
                    require('../../assets/image/noPic.png'),
                    require('../../assets/image/noPic.png'),
                    require('../../assets/image/noPic.png'),
                    require('../../assets/image/noPic.png'),
                    require('../../assets/image/noPic.png'),
                    require('../../assets/image/noPic.png'),
                    require('../../assets/image/noPic.png'),
                    require('../../assets/image/noPic.png'),
                    require('../../assets/image/noPic.png'),
                    require('../../assets/image/noPic.png'),
                    require('../../assets/image/noPic.png'),
                ],
                myChart: null,
            };
        },
        methods: {
            //返回
            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: ['rose1', 'rose2', 'rose3', 'rose4', 'rose5', 'rose6', 'rose7', 'rose8']
                    },
                    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: '面积模式',
                            type: 'pie',
                            radius: [30, 110],
                            roseType: 'area',
                            data: [
                                {value: 10, name: 'rose1'},
                                {value: 5, name: 'rose2'},
                                {value: 15, name: 'rose3'},
                                {value: 25, name: 'rose4'},
                                {value: 20, name: 'rose5'},
                                {value: 35, name: 'rose6'},
                                {value: 30, name: 'rose7'},
                                {value: 40, name: 'rose8'}
                            ]
                        }
                    ]
                };
                myChart.setOption(option);
            },

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

            getSrcList1(index) {
                return this.srcList1.slice(index).concat(this.srcList1.slice(0,index))
            }
        },

        created() {
        },

        mounted() {
            this.setEcharts();
            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>