manHourHousekeeper/fhKeeper/formulahousekeeper/octopus/src/views/desktop/index.vue

<template>
    <section>
        <!--工具条-->
        <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
            <!-- <div class="nowTime">
                <i class="fa fa-clock-o"></i>
                {{currentTime}}
            </div> -->
            <el-form :inline="true">
                <el-form-item>
                    <el-date-picker
                        v-model="date"
                        :editable="false"
                        format="yyyy-MM-dd"
                        value-format="yyyy-MM-dd"
                        @change="getDesktopList"
                        :clearable="false"
                        type="date"
                        placeholder="选择日期"
                    ></el-date-picker>
                </el-form-item>
                <el-form-item style="float:right;">
                    <span style="color:#aaa;font-size:12px;">（员工安装客户端，领导即可查看工作桌面远程监管）</span>
                    <el-link type="primary" :underline="false" href="http://gsgj.ttkuaiban.com/download.html" target="_blank">客户端下载</el-link>
                </el-form-item>
            </el-form>
        </el-col>

        <!-- 卡片列表 -->
        <div>
            <el-col :span="24" v-if="desktopList.length == 0" style="padding: 200px 0;text-align:center;cursor:pointer">
                <el-link :underline="false" type="primary" @click="getHavePic">今日暂无截图,点击查看近期</el-link>
            </el-col>
            <el-col :span="6" v-for="(item, index) in desktopList" :key="index" class="one_div">
                <el-card :body-style="{ padding: '0px' }" shadow="hover" class="one_card">
                <div class="one_card_img">
                    <el-image :src="item.pic_url" 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 :id="'over'+index" class="over">
                    <el-button type="primary" plain @click.native="jumpTo(item.id)">
                        <i class="fa fa-link"></i> 所有截图
                    </el-button>
                    </div>
                </div>
                <div class="one_card_txt">
                    <!-- -1-未知 null 0-研发，1-查资料，2-看文档，3-做设计，4-美工，5-运营，6-看小说，7-打游戏，8-听音乐 9-聊天 -->
                    <span>{{converType(item.pic_type == null ? 0 : item.pic_type+1)}}</span>
                    <div class="bottom clearfix">
                    <el-link>
                        <i class="fa fa-circle"></i>
                        {{item.name}}
                    </el-link>
                    <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 {
                filters: {
                    keyName: ""
                },
                user: JSON.parse(sessionStorage.getItem("user")),
                date: util.formatDate.format(new Date(new Date()), "yyyy-MM-dd"),
                timer: "",
                currentTime: util.formatDate.format(
                    new Date(new Date()),
                    "yyyy-MM-dd hh:mm:ss"
                ),
                desktopList: []
            };
        },
        methods: {
            getTime() {
                var _this = this; //声明一个变量指向Vue实例this，保证作用域一致
                this.timer = setInterval(function() {
                    _this.currentTime = util.formatDate.format(
                    new Date(new Date()),
                    "yyyy-MM-dd hh:mm:ss"
                    );
                }, 1000);
            },
            //获取项目列表
            getDesktopList() {
                this.listLoading = true;
                this.http.post(
                    this.port.desktop.list,
                    {date: this.date},
                    res => {
                    this.listLoading = false;
                    if (res.code == "ok") {
                        this.desktopList = res.data;
                    } else {
                        this.$message({
                        message: res.msg,
                        type: "error"
                        });
                    }
                    },
                    error => {
                    this.listLoading = false;
                    this.$message({
                        message: error,
                        type: "error"
                    });
                });
            },
            // 获取最近有数据的日期
            getHavePic() {
                this.http.post(
                    this.port.desktop.getScreenshotDate,
                    {date: new Date()},
                    res => {
                    if (res.code == "ok") {
                        if(res.data != null) {
                            this.date = res.data;
                            this.getDesktopList();
                        }
                    } else {
                        this.$message({
                        message: res.msg,
                        type: "error"
                        });
                    }
                    },
                    error => {
                    this.$message({
                        message: error,
                        type: "error"
                    });
                });
            },
            jumpTo(id) {
                this.$router.push("/desktop/" + id + "/" + this.date);
            },
            //类型枚举转换
            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() {
            this.getTime();
        },
        mounted() {
            this.getDesktopList();
        },
        beforeDestroy() {
            if (this.timer) {
                clearInterval(this.timer);
            }
        }
    };
</script>

<style lang="scss" scoped>
    .nowTime {
        height: 35px;
        line-height: 28px;
        font-size: 18px;
        color: #20a0ff;
        margin-left: 10px;
            i {
                margin-right: 10px;
            }
    }

    .one_div {
        padding: 15px;
        .one_card {
            .one_card_img {
            position: relative;
            .image {
                width: 100%;
            }
            .over {
                display: none;
                width: 100%;
                height: 98%;
                background: rgba(0, 0, 0, 0.2);
                position: absolute;
                top: 0;
                text-align: center;
            }
            }
            .one_card_txt {
            padding: 13px;
            .bottom {
                margin-top: 13px;
                line-height: 12px;
                i {
                color: #9ed0ff;
                margin-right: 5px;
                }
                .time {
                float: right;
                margin-top: 2px;
                color: #999;
                }
            }
            }
        }
        .one_card:hover {
            .one_card_img {
            .over {
                display: block !important;
            }
            }
        }
    }
</style>
<style lang="scss">
    .image {
        .el-image__inner {
            height: 11.6vw !important;
        }
    }

    .one_card_img {
        .over {
            .el-button {
            margin-top: 25%;
            }
        }
    }
</style>