designer/src/views/project.vue

<template>
    <div class="project">
        <div class="project_head">
            <div class="back" @click="$router.go(-1)">
                <i class="el-icon-arrow-left"></i> 返回项目列表
            </div>
            <div class="title">{{info.title}}</div>
            <div class="share" @click="share">
                <i class="el-icon-share"></i>
            </div>
        </div>
        <div class="project_main" v-loading="loading">
            <!-- <div class="imgs" v-if="imgs[currentImg].url">
                <p @click="imgClick(index)" v-for="(item, index) in imgs" :key="item.id" :class="index == currentImg ? 'current' : ''">{{item.title}}</p>
            </div>
            <div class="imgs nodata" v-if="!imgs[currentImg].url">
                <span>暂无图片</span>
            </div> -->
            <div class="canvas" v-if="imgs[currentImg].url">
                <myCanvas v-if="showImg" :url="imgs[currentImg].url" :imgId="imgs[currentImg].id" :datas="marks" @add="addMarks"></myCanvas>
            </div>
            <div class="canvas nodata" v-if="!imgs[currentImg].url">
                <div>
                    <el-button type="primary" size="small" :icon="uploading ? 'el-icon-loading' : 'el-icon-upload'" plain>上传文件</el-button>
                    <input @change="upload" type="file">
                </div>
            </div>
            <div class="marks" v-if="marks.length > 0">
                <div class="mark_item" v-for="item in marks" :key="item.id">
                    <div class="mark_item_num">
                        <span>{{item.mark_num}}</span>
                    </div>
                    <div class="mark_item_main">
                        <p class="mark_item_title">{{item.mark_title}}</p>
                        <p class="mark_item_text">{{item.mark_text}}</p>
                        <p class="mark_item_time">
                            <span>{{item.mark_time}}</span>
                            <span>{{item.status}}</span>
                        </p>
                    </div>
                </div>
            </div>
            <div class="marks nodata" v-if="marks.length == 0">
                暂无标注
            </div>
        </div>
    </div>
</template>

<script>
    import timer from '../tools/timer';
    import myCanvas from '../components/myCanvas.vue';
    export default {
        name: 'project',
        data (){
            return {
                loading: true,
                info: {},
                imgs: [
                    { url: '' }
                ],
                marks: [],
                marksData: [],
                currentImg: 0,
                showImg: true,
                uploading: false
            }
        },
        components: {
            myCanvas
        },
        beforeMount (){
            this.$ajax.get(`/project/get/?id=${this.$route.query.id}`).then(r => {
                this.info = r.info;

                // 无数据
                if(r.imgs.length == 0){
                    this.loading = false;
                    return;
                }

                this.imgs = r.imgs.map(item => {
                    item.url = `http://designer.xuxiangbo.com/${item.url}`;
                    return item;
                })

                let status = {
                    '0': '已标记',
                    '1': '修改中',
                    '2': '已修改',
                    '3': '已结束'
                }
                this.marksData = r.marks.map(item => {
                    item.mark_time = timer.time('y-m-d h:i:s', item.mark_time * 1000);
                    item.status = status[item.status];
                    return item;
                });
                this.getMarks();
                this.loading = false;
            })
        },
        methods: {
            // 根据当前图片的索引，生成标记列表
            getMarks (){
                let result = [];
                this.marksData.map(item => {
                    if(item.img_id == this.imgs[this.currentImg].id){
                        result.push(item);
                    }
                })
                this.marks = result;
            },
            // 分享
            share (){
                this.$copy(this.info.id, this.info.title);
            },
            // 添加标记点监听
            addMarks (r){
                let data = this.marksData.map(item => item);
                data.push(r);
                this.marksData = data;
            },
            // 点击切换图片
            imgClick (index){
                this.currentImg = index;
                this.getMarks();
            },
            // 上传文件
            upload (){
                this.$nextTick(() => {
                    let input = document.querySelector('input');
                    let data = {
                        file: input.files[0],
                        project: this.$route.query.id,
                    }
                    this.$ajax.post('/project/upload/', data).then(result => {
                        this.$router.go(0);
                    })
                })
            }
        }
    }
</script>

<style lang="less" scoped>
    .project{
        width: 100%;
        height: 100%;
        overflow: hidden;
        position: relative;
        .project_head{
            width: calc(100% - 40px);
            height: 50px;
            background: #3B3755;
            position: absolute;
            top: 0;
            left: 0;
            display: flex;
            justify-content: space-between;
            align-items: center;
            color: #ffffff;
            padding: 0 20px;
            .back{
                cursor: pointer; 
            }
            .share{
                i{
                    font-size: 16px;
                    cursor: pointer;
                }
            }
        }
        .project_main{
            width: 100%;
            height: calc(100% - 50px);
            position: absolute;
            top: 50px;
            left: 0;
            .imgs{
                width: 220px;
                height: 100%;
                overflow: hidden;
                overflow-y: auto;
                background: #ffffff;
                position: absolute;
                top: 0;
                left: 0;
                p{
                    width: 100%;
                    text-indent: 30px;
                    padding: 10px 0;
                    cursor: pointer;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }
                p.current{
                    background: #EBEDEE;
                }
            }
            .imgs::-webkit-scrollbar{
                display: none;
            }
            .canvas{
                width: calc(100% - 260px);
                height: 100%;
                overflow: hidden;
                position: absolute;
                top: 0;
                left: 260px;
            }
            .marks{
                width: 260px;
                height: 100%;
                overflow: hidden;
                overflow-y: auto;
                background: #ffffff;
                position: absolute;
                top: 0;
                left: 0;
                .mark_item{
                    display: flex;
                    justify-content: flex-start;
                    align-items: flex-start;
                    padding: 15px 0;
                    border-bottom: 1px solid rgb(238, 238, 238);
                    .mark_item_num{
                        width: 40px;
                        text-align: center;
                        span{
                            display: inline-block;
                            width: 22px;
                            height: 22px;
                            border-radius: 50%;
                            background: #FD4F4F;
                            color: #ffffff;
                            line-height: 22px;
                            font-size: 12px;
                            position: relative;
                            top: -2px;
                        }
                    }
                    .mark_item_main{
                        width: 200px;
                        .mark_item_title{
                            color: #555555;
                        }
                        .mark_item_text{
                            font-size: 12px;
                            margin-top: 5px;
                            line-height: 24px;
                            color: #999999;
                        }
                        .mark_item_time{
                            font-size: 12px;
                            color: #999999;
                            margin-top: 10px;
                            display: flex;
                            justify-content: space-between;
                            align-items: center;
                        }
                    }
                }
            }
            .marks::-webkit-scrollbar {
                width : 6px;
                height: 1px;
            }
            .marks::-webkit-scrollbar-thumb {
                border-radius: 10px;
                box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.05);
                background: rgb(216, 216, 216);
            }
            .marks::-webkit-scrollbar-track {
                box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.05);
                border-radius: 10px;
                background: rgb(241, 241, 241);
            }
            .nodata{
                text-align: center;
                padding-top: 50px;
                color: #a1a1a1;
            }
            .canvas.nodata{
                display: flex;
                justify-content: center;
                align-items: center;
                padding-top: 0;
                input{
                    width: 100px;
                    height: 34px;
                    opacity: 0;
                    cursor: pointer;
                    position: absolute;
                    z-index: 2;
                    top: calc(50% - 17px);
                    left: calc(50% - 50px);
                }
            }
        }
    }
</style>