<template>
<div>
<!-- 表具报停 -->
<Drawer
:title="type == 2 ? '表具二维码' : '表具报停'"
:closable="false"
v-model="DrawerShow"
width="50%"
>
<div>
<div class="t-head">
<div>
<span>表具编号:{{ infoObj.meterNo }}</span>
<span>表具类型:{{ METERTYPE[infoObj.meterType] }}</span>
<span>表具形式:{{ RECORDWAY[infoObj.recordWay] }}</span>
</div>
<div>
<span>表具初始读数:{{ infoObj.degree }}</span>
<span>安装日期:{{ infoObj.createTime }}</span>
<span
>预警类型:{{ infoObj.warnType ? infoObj.warnType : "/" }}</span
>
</div>
</div>
<!-- 报停 -->
<div style="display: flex; margin-top: 20px" v-if="type == 1">
<Form
ref="stopFormRef"
:model="stopForm"
:rules="stopFormRule"
:label-width="120"
:label-colon="true"
style="width: 100%"
>
<FormItem label="报停人" prop="reportStop">
<Input
style="'width:380px"
type="text"
maxlength="32"
v-model="stopForm.reportStop"
placeholder="请输入报停人"
/>
</FormItem>
<FormItem label="报停说明" prop="remark">
<Input
style="'width:380px"
type="textarea"
maxlength="200"
:rows="6"
v-model="stopForm.remark"
placeholder="请输入报停说明"
/>
</FormItem>
<FormItem>
<Button
type="primary"
:disabled="btnType"
@click="handleSubmit('stopFormRef')"
>提交
</Button>
<Button @click="goBack()" style="margin-left: 8px">返回</Button>
</FormItem>
</Form>
</div>
<!-- 二维码 -->
<div class="cont-w" v-if="type == 2">
<div class="qrcode-img">
<img :src="imgUrl" alt="" />
<Button type="primary" :disabled="btnType" @click="imgdown()"
>导出
</Button>
<p>注：二维码导出后，可添加到设备的表面，便于扫码查询</p>
</div>
</div>
<div class="btn-box" v-if="type == 2">
<Button @click="goBack()" style="margin-left: 8px">返回</Button>
</div>
</div>
</Drawer>
</div>
</template>
<script>
import { addReportStop, getMeterQRCode } from "@/api/Instrumentmanagement.js";
import { formatDate } from "@/libs";
import _GLOBAL from "@/libs/config";
export default {
components: {},
props: {
infoObj: {
type: Object,
default: () => {
return {};
},
},
},
data() {
return {
METERTYPE: _GLOBAL.meterType,
RECORDWAY: _GLOBAL.recordWay,
DrawerShow: false,
stopForm: {
reportStop: "",
remark: "",
},
stopFormRule: {
reportStop: [
{
required: true,
message: "请输入报停人",
trigger: "blur",
},
],
remark: [
{
required: true,
message: "请输入报停说明",
trigger: "blur",
},
],
},
btnType: false,
// meterId: "",
type: "",
id_: "",
imgUrl: "",
};
},
watch: {},
filters: {
chengearmTime(armTime) {
return formatDate(Number(armTime), "yyyy-MM-dd hh:mm:ss");
},
},
mounted() {},
created() {},
methods: {
show(row, type) {
this.DrawerShow = true;
this.handleReset();
this.type = type;
this.id_ = row.id;
this.imgUrl =
this.$store.state.app.getMeterQRCode +
"?meterId=" +
row.id +
"&author-token-key=" +
localStorage.getItem("token");
},
imgdown() {
let src = this.imgUrl;
let canvas = document.createElement("canvas");
let img = document.createElement("img");
let meterNo = this.infoObj.meterNo;
// // 解决跨域 Canvas 污染问题
img.setAttribute("crossOrigin", "Anonymous");
img.onload = function (e) {
canvas.width = img.width;
canvas.height = img.height;
let context = canvas.getContext("2d");
//绘制图片
context.drawImage(img, 0, 0, img.width, img.height);
canvas.getContext("2d").drawImage(img, 0, 0, img.width, img.height);
//将canvas转base64码，然后创建一个a连接自动下载图片
canvas.toBlob((blob) => {
let link = document.createElement("a");
link.href = window.URL.createObjectURL(blob);
link.download = meterNo + "二维码";
link.click();
}, "image/jpeg");
};
//将资源链接赋值过去，才能触发img.onload事件
img.src = src;
},
//提交
handleSubmit(name) {
this.btnType = true;
setTimeout(() => {
this.btnType = false;
}, 2000);
this.$refs[name].validate((valid) => {
if (valid) {
const params = Object.assign({}, this.stopForm);
params.meterId = this.infoObj.id;
addReportStop(params).then((res) => {
if (res.data.status == 200) {
this.$Message.success("提交成功");
//回到列表
this.DrawerShow = false;
this.$emit("update");
} else {
this.$Modal.error({
title: "提示",
content: res.data.desc,
});
}
});
}
});
},
//返回
goBack() {
this.DrawerShow = false;
this.handleReset();
},
//重置
handleReset() {
Object.keys(this.stopForm).forEach((key) => {
this.stopForm[key] = "";
});
},
},
destroyed() {},
};
</script>
<style lang="less" scoped>
.t-head {
display: flex;
justify-content: space-between;
margin-left: 12px;
flex-direction: column;
div {
display: flex;
margin: 5px 0;
span {
display: flex;
flex: 1;
}
}
}
.cont-w {
display: flex;
margin-top: 20px;
justify-content: center;
align-items: center;
.qrcode-img {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
img {
width: 220px;
height: 220px;
overflow: hidden;
}
button {
margin: 25px 0;
}
p {
margin: 25px 0;
}
}
}
</style>
标签：flex,canvas,img,infoObj,生成,let,display,下载,图片 From： https://www.cnblogs.com/Byme/p/16881095.html