louiszhai / canvas-draw Goto Github PK

0 info it worked if it ends with ok
1 verbose cli [ '/usr/local/node/bin/node',
1 verbose cli   '/usr/local/node/bin/npm',
1 verbose cli   'run',
1 verbose cli   'dev' ]
2 info using [email protected]
3 info using [email protected]
4 verbose run-script [ 'predev', 'dev', 'postdev' ]
5 info lifecycle [email protected]~predev: [email protected]
6 info lifecycle [email protected]~dev: [email protected]
7 verbose lifecycle [email protected]~dev: unsafe-perm in lifecycle true
8 verbose lifecycle [email protected]~dev: PATH: /usr/local/node/lib/node_modules/npm/node_modules/npm-lifecycle/node-gyp-bin:/home/demo/code/canvas-draw/node_modules/.bin:/home/demo/bin:/home/demo/.local/bin:/usr/local/node/bin:/home/demo/jdk1.8.0_181/bin:/home/demo/jdk1.8.0_181/jre/bin:/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin:/usr/games:/usr/local/games:/home/demo/jdk1.8.0_181/bin:/snap/bin
9 verbose lifecycle [email protected]~dev: CWD: /home/demo/code/canvas-draw
10 silly lifecycle [email protected]~dev: Args: [ '-c', 'node build/dev-server.js' ]
11 silly lifecycle [email protected]~dev: Returned: code: 1  signal: null
12 info lifecycle [email protected]~dev: Failed to exec dev script
13 verbose stack Error: [email protected] dev: `node build/dev-server.js`
13 verbose stack Exit status 1
13 verbose stack     at EventEmitter.<anonymous> (/usr/local/node/lib/node_modules/npm/node_modules/npm-lifecycle/index.js:304:16)
13 verbose stack     at emitTwo (events.js:126:13)
13 verbose stack     at EventEmitter.emit (events.js:214:7)
13 verbose stack     at ChildProcess.<anonymous> (/usr/local/node/lib/node_modules/npm/node_modules/npm-lifecycle/lib/spawn.js:55:14)
13 verbose stack     at emitTwo (events.js:126:13)
13 verbose stack     at ChildProcess.emit (events.js:214:7)
13 verbose stack     at maybeClose (internal/child_process.js:925:16)
13 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:209:5)
14 verbose pkgid [email protected]
15 verbose cwd /home/demo/code/canvas-draw
16 verbose Linux 4.15.0-36-generic
17 verbose argv "/usr/local/node/bin/node" "/usr/local/node/bin/npm" "run" "dev"
18 verbose node v8.11.3
19 verbose npm  v6.4.0
20 error code ELIFECYCLE
21 error errno 1
22 error [email protected] dev: `node build/dev-server.js`
22 error Exit status 1
23 error Failed at the [email protected] dev script.
23 error This is probably not a problem with npm. There is likely additional logging output above.
24 verbose exit [ 1, true ]

<template>
<div class="evaluation">
    <Header title="服务评分" goBack="true"> </Header>
    <div class="mui-content">
        <div class="form-wrap">
            <form class="mui-input-group">
                <div class="mui-input-row">
                    <label>任务名称</label>
                    <input type="text" placeholder="任务名称">
                </div>
                <div class="mui-input-row">
                    <label>时间安排</label>
                    <div class="self-choose">
                        <div class="self">
                            <div class="before-self">
                                <input type="text" placeholder="事项" readonly>
                                <span>
                                    <svg class="icon svg-icon" aria-hidden="true">
                                        <use xlink:href="#iconrili1"></use>
                                    </svg>
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="evaluation-list mt-2">
                    <p class="evaluation-list-content">
                        测试
                    </p>
                    <div class="mui-input-row">
                        <label for="">结果</label>
                        <input type="text">
                    </div>
                </div>
            </form>

            <div class="custom-sign mt-2">
                <p>客户签字:</p>
                <div class="sign-board mt-2">
                    <div class="canvas-img" v-if='!flag'>
                        <img src="https://img.yzcdn.cn/vant/leaf.jpg" alt="签名">
                    </div>
                </div>
                <div class="sign-btn mt-2">
                    <mt-button type='primary' size='small' @click="showPopup"> 客户签名</mt-button>
                </div>

            </div>
            <div class="">
                <van-popup v-model="show" position="bottom" :style="{ height: '100%' }">
                    <div class="canvas-wrap" id="canvasBox" :style="getHorizontalStyle">
                        <canvas id="canvas"></canvas>
                    </div>
                    <div class="sign-btn">
                        <mt-button type='primary' size='small' @touchstart="clear" @mousedown="clear"> 重置</mt-button>
                        <mt-button type='primary' size='small' @click="closePopup">取消</mt-button>
                        <mt-button type='primary' size='small' @touchstart="download" @mousedown="download">确认</mt-button>
                    </div>

                </van-popup>
            </div>

            <div class="footer"></div>
        </div>

        <div class="add-submit">
            <mt-button type="primary" :disabled="isClicked">提交</mt-button>
        </div>
    </div>
    <Tabbar></Tabbar>
</div>
</template>

<script>
import Header from '@/components/Header';
import Tabbar from '@/components/Tabbar';

import {
    serviceSureQueryList, // 确认标准
    taskMainQueryList, //任务信息
} from '@/api/afterSale/serviceScore/index.js'

import Draw from '@/assets/draw/draw.js';

export default {
    name: 'serviceScore',
    data() {
        return {
            isClicked: false,
            task_id: null, //任务id
            flag: false,
            degree: 0,
            signImage: null,
            show: false,
            canvasBox: null,
            scope: [{
                    value: 0,
                    title: '正常',
                },
                {
                    value: 90,
                    title: '顺时针旋转90°',
                },
                {
                    value: 180,
                    title: '顺时针旋转180°',
                },
                {
                    value: -90,
                    title: '逆时针旋转90°',
                },
            ],

        }
    },
    components: {
        Header,
        Tabbar,
        Draw,

    },
    mounted() {
        this.canvasBox = document.getElementById('canvasBox');
        this.initCanvas();
    },
    computed: {
        getHorizontalStyle() {
            const d = document;
            const w = window.innerWidth || d.documentElement.clientWidth || d.body.clientWidth;
            const h = window.innerHeight || d.documentElement.clientHeight || d.body.clientHeight;
            let length = (h - w) / 2;
            let width = w;
            let height = h;
            switch (this.degree) {
                case -90:
                    length = -length;
                case 90:
                    width = h;
                    height = w;
                    break;
                default:
                    length = 0;
            }
            if (this.canvasBox) {
                this.canvasBox.removeChild(document.querySelector('canvas'));
                this.canvasBox.appendChild(document.createElement('canvas'));
                setTimeout(() => {
                    this.initCanvas();
                }, 200);
            }
            return {
                transform: `rotate(${this.degree}deg) translate(${length}px,${length}px)`,
                width: `${width}px`,
                height: `${height}px`,
                transformOrigin: 'center center',
            };
        },
    },
    watch: {

    },
    methods: {
        showPopup() {
            this.show = true;

        },
        closePopup() {
            this.show = false;

        },
        initCanvas() {
            const canvas = document.querySelector('canvas');
            this.draw = new Draw(canvas, -this.degree);
        },
        clear() {
            this.draw.clear();
        },
        download() {
            this.draw.downloadPNGImage(this.draw.getPNGImage());
        },
        savePNG() {
            this.signImage = this.draw.getPNGImage();
        },
        upload() {
            const image = this.draw.getPNGImage();
            const blob = this.draw.dataURLtoBlob(image);
            const url = '';
            const successCallback = (response) => {
                console.log(response);
            };
            const failureCallback = (error) => {
                console.log(error);
            };
            this.draw.upload(blob, url, successCallback, failureCallback);
        },
        getTaskInfo() {
            // 任务id
            this.task_id = this.$route.params.taskId;
            // 获取确认内容
            this.getServiceSureQueryList(this.task_id);
            // 获取任务单主信息
            this.getTaskMainQueryList(this.task_id)
        },
        // 确认标准
        getServiceSureQueryList(taskId) {
            serviceSureQueryList({
                task_id: taskId
            }).then((result) => {
                console.log(result);
            }).catch((err) => {
                console.log(err);
            });
        },
        // 任务单主信息
        getTaskMainQueryList(taskId) {
            taskMainQueryList({
                id: taskId
            }).then((result) => {
                console.log(result);
            }).catch((err) => {
                console.log(err);
            });
        },

    }
}
</script>

<style scoped>
.evaluation {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #fff;
    z-index: 199;
    height: 100%;
}

.mui-content {
    width: 100%;
    height: 100%;
    padding-top: 44px;
    padding-bottom: 50px;
    overflow: scroll;
    background-color: #fff;
}

.form-wrap {
    width: 100%;
    /* padding: 0 .625rem; */
    background-color: #fff;
}

.mui-input-group {
    padding: 0 .625rem;
}

/* 输入框自定义 右侧带有icon 开始 */
.self-choose {
    float: right;
    height: 40px;
    width: 65%;
}

.self {
    height: 100%;
    display: flex;
    display: -webkit-flex;
    justify-content: space-between;
    align-items: center;
}

.before-self {
    position: relative;
    height: 100%;
    width: 100%;
    display: flex;
    display: -webkit-flex;
    justify-content: space-between;
    align-items: center;
}

.before-self input {
    padding-left: 0;
}

.before-self .svg-icon {
    width: 1.4em;
    height: 1.4em;
}

.before-self span:nth-child(2) {
    align-self: center;
}

/* 输入框自定义 右侧带有icon 结束*/

.mui-input-group:before {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 0;
    content: '';
    /* -webkit-transform: scaleY(.5); */
    /* transform: scaleY(.5); */
    /* background-color: #c8c7cc; */
}

.mui-input-group:after {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 0;
    content: '';
    /* -webkit-transform: scaleY(.5); */
    /* transform: scaleY(.5); */
    /* background-color: #c8c7cc; */
}

.evaluation-list {
    padding: .5rem;
    width: 100%;
    border: 1px solid #f2f2f2;
    border-radius: .5rem;
    box-shadow: 1px 2px 3px #ddd;

}

/* 签字板 */
.custom-sign {
    width: 100%;
    padding: 0 .625rem
}

.sign-board {
    width: 100%;
    height: 16rem;
    background-color: #fff;
    border-radius: .5rem;
    /* border: 1px solid #c8c7cc; */
}

/* 写字板图片 */
.canvas-img {
    width: 100%;
    height: 100%;
    border-radius: .5rem;

}

.canvas-img img {
    display: inline-block;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    border-radius: .5rem;

}

.canvas-wrap {
    padding: .625rem;
    width: 100%;
    height: 85%;
    border: 1px solid #c8c7cc;
}

.canvas-wrap #canvas {
    width: 100%;
    height: 85%;
    background-color: #f2f2f2;
    cursor: crosshair;
}

.sign-btn {
    width: 100%;
    height: 15%;
    padding: .625rem;
    display: flex;
    justify-content: space-between;
}


</style>