515 lines
20 KiB
JavaScript
515 lines
20 KiB
JavaScript
"use strict";
|
|
const common_vendor = require("../../common/vendor.js");
|
|
const common_assets = require("../../common/assets.js");
|
|
const utils_throttle = require("../../utils/throttle.js");
|
|
const api_api = require("../../api/api.js");
|
|
const uni_modules_svEditor_components_common_utils = require("../../uni_modules/sv-editor/components/common/utils.js");
|
|
if (!Array) {
|
|
const _easycom_u_icon2 = common_vendor.resolveComponent("u-icon");
|
|
const _easycom_up__image2 = common_vendor.resolveComponent("up--image");
|
|
const _easycom_up_icon2 = common_vendor.resolveComponent("up-icon");
|
|
const _easycom_up_popup2 = common_vendor.resolveComponent("up-popup");
|
|
(_easycom_u_icon2 + _easycom_up__image2 + _easycom_up_icon2 + _easycom_up_popup2)();
|
|
}
|
|
const _easycom_u_icon = () => "../../node-modules/uview-plus/components/u-icon/u-icon.js";
|
|
const _easycom_up__image = () => "../../node-modules/uview-plus/components/u--image/u--image.js";
|
|
const _easycom_up_icon = () => "../../node-modules/uview-plus/components/u-icon/u-icon.js";
|
|
const _easycom_up_popup = () => "../../node-modules/uview-plus/components/u-popup/u-popup.js";
|
|
if (!Math) {
|
|
(_easycom_u_icon + svEditor + _easycom_up__image + _easycom_up_icon + _easycom_up_popup)();
|
|
}
|
|
const svEditor = () => "../../uni_modules/sv-editor/components/sv-editor/sv-editor.js";
|
|
const _sfc_main = {
|
|
__name: "pEditor",
|
|
props: {
|
|
editorType: {
|
|
type: String,
|
|
default: "info"
|
|
},
|
|
editorCotent: {
|
|
type: String,
|
|
default: ""
|
|
}
|
|
},
|
|
emits: ["closeEditor", "changeEditor"],
|
|
setup(__props, { expose: __expose, emit: __emit }) {
|
|
const instace = common_vendor.getCurrentInstance();
|
|
const PeditorCtx = common_vendor.ref(null);
|
|
const htmlContent = common_vendor.ref("");
|
|
const keyboardHeight = common_vendor.ref(0);
|
|
const videoface = common_vendor.ref("https://caseplatform.oss-cn-beijing.aliyuncs.com/prod/static/shipinfengmian.jpg");
|
|
const editorHeight = common_vendor.ref(300);
|
|
common_vendor.ref("病例信息");
|
|
const placeholder = common_vendor.ref("患者基本情况，检查结果，诊疗图片或视频");
|
|
const showTitle = common_vendor.ref(false);
|
|
const props = __props;
|
|
const showCanvas = common_vendor.ref(false);
|
|
common_vendor.watch(() => props.editorType, (newVal) => {
|
|
common_vendor.index.__f__("log", "at components/pEditor/pEditor.vue:181", 11111111);
|
|
common_vendor.index.__f__("log", "at components/pEditor/pEditor.vue:182", newVal);
|
|
if (newVal == "info") {
|
|
placeholder.value = "患者基本情况，检查结果，诊疗图片或视频";
|
|
} else {
|
|
placeholder.value = "分享经验和心得，如：诊断与鉴别诊断易错点，治疗过程难点，病例的相关知识总结及讨论等";
|
|
}
|
|
}, { immediate: true });
|
|
const emits = __emit;
|
|
const isIOS = common_vendor.ref(false);
|
|
const insertWord = (word) => {
|
|
uni_modules_svEditor_components_common_utils.addText(word);
|
|
showTitle.value = false;
|
|
};
|
|
const insertAllWord = () => {
|
|
let word = [
|
|
"患者信息",
|
|
"主诉",
|
|
"现病史及既往史：",
|
|
"检查",
|
|
"临床诊断",
|
|
"治疗经过及结果"
|
|
];
|
|
word.forEach((item) => {
|
|
uni_modules_svEditor_components_common_utils.addText(item);
|
|
});
|
|
showTitle.value = false;
|
|
};
|
|
const ready = (e) => {
|
|
common_vendor.index.__f__("log", "at components/pEditor/pEditor.vue:210", e);
|
|
PeditorCtx.value = e;
|
|
if (props.editorType == "info") {
|
|
if (props.editorCotent) {
|
|
common_vendor.index.__f__("log", "at components/pEditor/pEditor.vue:216", "peditor");
|
|
common_vendor.index.__f__("log", "at components/pEditor/pEditor.vue:217", props.editorCotent);
|
|
PeditorCtx.value.initHtml(props.editorCotent, async (videoUrl) => {
|
|
let res = "";
|
|
res = await PeditorCtx.value.createCoverThumbnail(videoface.value);
|
|
return res;
|
|
});
|
|
setTimeout(async () => {
|
|
common_vendor.index.__f__("log", "at components/pEditor/pEditor.vue:231", "qaz");
|
|
let res = await PeditorCtx.value.getLastContent();
|
|
common_vendor.index.__f__("log", "at components/pEditor/pEditor.vue:233", res);
|
|
}, 6e3);
|
|
} else {
|
|
let html = "<p>【患者信息】：</p><br/><p>【主诉】：</p><br/><p>【现病史及既往史】：</p><br/><p>【检查】：</p><br/><p>【临床诊断】：</p><br/><p>【治疗经过及结果】：</p><br/><br/>";
|
|
PeditorCtx.value.initHtml(html);
|
|
}
|
|
} else {
|
|
if (props.editorCotent) {
|
|
PeditorCtx.value.initHtml(props.editorCotent, async (videoUrl) => {
|
|
let res = "";
|
|
res = await PeditorCtx.value.createCoverThumbnail(videoface.value);
|
|
return res;
|
|
});
|
|
} else {
|
|
let html = "";
|
|
PeditorCtx.value.initHtml(html);
|
|
}
|
|
}
|
|
common_vendor.index.hideLoading();
|
|
};
|
|
const closeSv = utils_throttle.throttle(() => {
|
|
emits("closeEditor");
|
|
});
|
|
const confirm = async () => {
|
|
const res = await PeditorCtx.value.getLastContent();
|
|
let html = PeditorCtx.value.exportHtml(res.html.replace("undefined", ""));
|
|
emits("changeEditor", {
|
|
type: props.editorType,
|
|
content: html
|
|
});
|
|
};
|
|
const blur = () => {
|
|
};
|
|
const clearMuBan = () => {
|
|
PeditorCtx.value.initHtml("");
|
|
};
|
|
const updatePosition = (c_keyboardHeight) => {
|
|
const toolbarHeight = 50;
|
|
const { windowHeight, platform } = common_vendor.index.getSystemInfoSync();
|
|
let c_editorHeight = keyboardHeight > 0 ? windowHeight - keyboardHeight - toolbarHeight : windowHeight;
|
|
editorHeight.value = c_editorHeight;
|
|
keyboardHeight.value = c_keyboardHeight;
|
|
};
|
|
common_vendor.onLoad(() => {
|
|
const platform = common_vendor.index.getSystemInfoSync().platform;
|
|
isIOS.value = platform === "ios";
|
|
updatePosition(0);
|
|
let keyboardHeight2 = 0;
|
|
common_vendor.index.onKeyboardHeightChange((res) => {
|
|
if (res.height === keyboardHeight2)
|
|
return;
|
|
const duration = res.height > 0 ? res.duration * 1e3 : 0;
|
|
keyboardHeight2 = res.height;
|
|
setTimeout(() => {
|
|
common_vendor.index.pageScrollTo({
|
|
scrollTop: 0,
|
|
success() {
|
|
updatePosition(keyboardHeight2);
|
|
PeditorCtx.value.scrollView();
|
|
}
|
|
});
|
|
}, duration);
|
|
});
|
|
});
|
|
const fillTextToImgWx = (base64) => {
|
|
let maskText = "@肝胆相照临床病例库";
|
|
return new Promise((resolve, reject) => {
|
|
common_vendor.wx$1.createSelectorQuery().in(instace.proxy).select("#pwatermarkCanvas").fields({
|
|
node: true,
|
|
size: true
|
|
}).exec((res) => {
|
|
const canvas = res[0].node;
|
|
const ctx = canvas.getContext("2d");
|
|
let textMetrics = ctx.measureText(maskText);
|
|
common_vendor.index.__f__("log", "at components/pEditor/pEditor.vue:334", textMetrics);
|
|
let {
|
|
width: textWidth,
|
|
actualBoundingBoxAscent,
|
|
actualBoundingBoxDescent
|
|
} = textMetrics;
|
|
let textHeight = actualBoundingBoxAscent ? actualBoundingBoxAscent + actualBoundingBoxDescent : textMetrics.fontBoundingBoxAscent + textMetrics.fontBoundingBoxDescent;
|
|
let imgHeight, imgWidth;
|
|
let font = "";
|
|
let fontColor = "#fff";
|
|
let strokeWidth = 10;
|
|
common_vendor.index.getImageInfo({
|
|
src: base64,
|
|
success: (imageRes) => {
|
|
let scale = imageRes.width / 800 * 30 > 12 ? imageRes.width / 800 * 30 : 12;
|
|
font = scale + "px Arial";
|
|
common_vendor.index.__f__("log", "at components/pEditor/pEditor.vue:360", imageRes);
|
|
canvas.width = imageRes.width;
|
|
canvas.height = imageRes.height;
|
|
imgHeight = imageRes.height;
|
|
imgWidth = imageRes.width;
|
|
const image = canvas.createImage();
|
|
image.src = "";
|
|
image.src = base64;
|
|
image.onload = () => {
|
|
ctx.drawImage(image, 0, 0, canvas.width, canvas.height);
|
|
let posXmargin = 20;
|
|
let posYmargin = 20;
|
|
let randomNumber = 3;
|
|
common_vendor.index.__f__("log", "at components/pEditor/pEditor.vue:378", "randomNumber:" + randomNumber);
|
|
switch (randomNumber) {
|
|
case 0:
|
|
let lt_x = posXmargin;
|
|
let lt_y = posYmargin + textHeight;
|
|
ctx.font = font;
|
|
ctx.storkStyle = "#000";
|
|
ctx.strokeWidth = strokeWidth;
|
|
ctx.fillStyle = "#fff";
|
|
ctx.fillText(maskText, lt_x, lt_y);
|
|
break;
|
|
case 1:
|
|
let lb_x = posXmargin;
|
|
let lb_y = imgHeight - posYmargin;
|
|
ctx.font = font;
|
|
ctx.fillStyle = fontColor;
|
|
ctx.strokeStyle = "black";
|
|
ctx.strokeWidth = strokeWidth;
|
|
ctx.fillStyle = "#fff";
|
|
ctx.fillText(maskText, lb_x, lb_y);
|
|
break;
|
|
case 2:
|
|
let rt_x = imgWidth - textWidth * 2.9 - posXmargin <= 0 ? 10 : imgWidth - textWidth * 2.9 - posXmargin;
|
|
let rt_y = posYmargin + textHeight * 2;
|
|
ctx.font = font;
|
|
ctx.fillStyle = fontColor;
|
|
ctx.strokeStyle = "#000";
|
|
ctx.strokeWidth = strokeWidth;
|
|
ctx.fillStyle = "#fff";
|
|
ctx.fillText(maskText, rt_x, rt_y);
|
|
ctx.restore();
|
|
ctx.save();
|
|
break;
|
|
case 3:
|
|
let rb_x = imgWidth - scale * 10 - posXmargin <= 0 ? 10 : imgWidth - scale * 10 - posXmargin;
|
|
common_vendor.index.__f__("log", "at components/pEditor/pEditor.vue:426", rb_x);
|
|
let rb_y = imgHeight - posYmargin;
|
|
ctx.font = font;
|
|
ctx.fillStyle = fontColor;
|
|
ctx.strokeStyle = "#000";
|
|
ctx.fillStyle = "#fff";
|
|
common_vendor.index.__f__("log", "at components/pEditor/pEditor.vue:433", "rb_x");
|
|
common_vendor.index.__f__("log", "at components/pEditor/pEditor.vue:434", rb_x);
|
|
ctx.strokeText(maskText, rb_x, rb_y);
|
|
ctx.fillText(maskText, rb_x, rb_y);
|
|
break;
|
|
}
|
|
common_vendor.wx$1.canvasToTempFilePath({
|
|
canvas,
|
|
success: function(res2) {
|
|
resolve(res2.tempFilePath);
|
|
},
|
|
fail: function(res2) {
|
|
common_vendor.index.__f__("error", "at components/pEditor/pEditor.vue:456", res2);
|
|
}
|
|
});
|
|
};
|
|
}
|
|
});
|
|
});
|
|
});
|
|
};
|
|
const generateRandomNumber = () => {
|
|
let randomNumber = Math.floor(1e3 + Math.random() * 9e3);
|
|
return randomNumber;
|
|
};
|
|
const getImageFormat = (imageUrl) => {
|
|
common_vendor.index.__f__("log", "at components/pEditor/pEditor.vue:549", imageUrl);
|
|
const lastDotIndex = imageUrl.lastIndexOf(".");
|
|
if (lastDotIndex !== -1) {
|
|
return imageUrl.substring(lastDotIndex + 1);
|
|
}
|
|
return "unknown";
|
|
};
|
|
const getOss = (temurl) => {
|
|
api_api.api.getOss({
|
|
scene: 1
|
|
}).then((rep) => {
|
|
let result = rep.data;
|
|
if (result.code == 200) {
|
|
let { access_id, dir, policy, signature, host } = result.data;
|
|
let time = common_vendor.dayjs().format("YYYYMMDDHHmmss");
|
|
let random = generateRandomNumber();
|
|
let filename = time + random;
|
|
let imgType = "." + getImageFormat(temurl);
|
|
return new Promise((resolve, reject) => {
|
|
common_vendor.index.uploadFile({
|
|
url: host,
|
|
// 仅为示例，非真实的接口地址
|
|
filePath: temurl,
|
|
name: "file",
|
|
formData: {
|
|
OSSAccessKeyId: access_id,
|
|
policy,
|
|
key: dir + time + random + imgType,
|
|
signature
|
|
},
|
|
success(res) {
|
|
if (res.statusCode === 204) {
|
|
let url = host + "/" + dir + filename + imgType;
|
|
uni_modules_svEditor_components_common_utils.addImage([url]);
|
|
}
|
|
},
|
|
fail: (err) => {
|
|
common_vendor.index.__f__("log", "at components/pEditor/pEditor.vue:589", err);
|
|
}
|
|
});
|
|
});
|
|
}
|
|
});
|
|
};
|
|
const readImages = async (localIds) => {
|
|
common_vendor.index.showLoading({
|
|
title: "正在上传图片...",
|
|
mask: true
|
|
});
|
|
common_vendor.index.__f__("log", "at components/pEditor/pEditor.vue:602", localIds);
|
|
let promiseFun = [];
|
|
for (var i = 0; i < localIds.length; i++) {
|
|
let img = null;
|
|
img = await fillTextToImgWx(localIds[i]);
|
|
promiseFun.push(getOss(img));
|
|
}
|
|
Promise.all(promiseFun).then((res) => {
|
|
common_vendor.index.showToast({
|
|
title: "上传成功",
|
|
icon: "none"
|
|
});
|
|
});
|
|
};
|
|
const insertImage = (file) => {
|
|
showCanvas.value = true;
|
|
common_vendor.index.chooseImage({
|
|
count: 9,
|
|
//默认9
|
|
sizeType: ["original", "compressed"],
|
|
//可以指定是原图还是压缩图，默认二者都有
|
|
sourceType: ["album"],
|
|
//从相册选择
|
|
extension: [".jpg", ".png", ".jpeg"],
|
|
success: function(res) {
|
|
readImages(res.tempFilePaths);
|
|
}
|
|
});
|
|
};
|
|
const HandleAddVideo = async (file) => {
|
|
common_vendor.index.showLoading({
|
|
title: "正在上传视频...",
|
|
mask: true
|
|
});
|
|
const videos = await uni_modules_svEditor_components_common_utils.addVideo(async (PeditorCtx2) => {
|
|
return new Promise((resolve) => {
|
|
api_api.api.getOss({
|
|
scene: 2
|
|
}).then((rep) => {
|
|
let result = rep.data;
|
|
if (result.code == 200) {
|
|
let { access_id, dir, policy, signature, host } = result.data;
|
|
let time = common_vendor.dayjs().format("YYYYMMDDHHmmss");
|
|
let random = generateRandomNumber();
|
|
let filename = time + random;
|
|
let imgType = "." + getImageFormat(file);
|
|
return new Promise((res, reject) => {
|
|
common_vendor.index.uploadFile({
|
|
url: host,
|
|
// 仅为示例，非真实的接口地址
|
|
filePath: file,
|
|
name: "file",
|
|
formData: {
|
|
OSSAccessKeyId: access_id,
|
|
policy,
|
|
key: dir + time + random + imgType,
|
|
signature
|
|
},
|
|
async success(res2) {
|
|
if (res2.statusCode === 204) {
|
|
let url = host + "/" + dir + filename + imgType;
|
|
const fileThumbnail = await PeditorCtx2.createCoverThumbnail(videoface.value);
|
|
resolve([
|
|
{
|
|
videoUrl: url,
|
|
videoImg: fileThumbnail
|
|
}
|
|
]);
|
|
}
|
|
},
|
|
fail: (err) => {
|
|
common_vendor.index.__f__("log", "at components/pEditor/pEditor.vue:682", err);
|
|
}
|
|
});
|
|
});
|
|
}
|
|
});
|
|
});
|
|
});
|
|
if (videos) {
|
|
common_vendor.index.hideLoading();
|
|
common_vendor.index.showToast({ title: "添加视频成功", icon: "none" });
|
|
} else {
|
|
common_vendor.index.showToast({ title: "添加视频失败", icon: "none" });
|
|
}
|
|
};
|
|
const insertVideo = (file) => {
|
|
common_vendor.index.chooseVideo({
|
|
count: 5,
|
|
//默认9//可以指定是原图还是压缩图，默认二者都有
|
|
sourceType: ["album"],
|
|
//从相册选择
|
|
extension: [".mp4", ".webm", ".ogg"],
|
|
success: function(res) {
|
|
common_vendor.index.__f__("log", "at components/pEditor/pEditor.vue:704", res.tempFilePath);
|
|
HandleAddVideo(res.tempFilePath);
|
|
}
|
|
});
|
|
};
|
|
const closeTitle = () => {
|
|
showTitle.value = false;
|
|
};
|
|
const openTitle = () => {
|
|
showTitle.value = true;
|
|
};
|
|
const alertTitle = () => {
|
|
common_vendor.index.__f__("log", "at components/pEditor/pEditor.vue:718", "qqqqqq");
|
|
showTitle.value = true;
|
|
};
|
|
const initData = (data) => {
|
|
common_vendor.index.__f__("log", "at components/pEditor/pEditor.vue:722", "init");
|
|
common_vendor.index.__f__("log", "at components/pEditor/pEditor.vue:723", data);
|
|
htmlContent.value = data;
|
|
};
|
|
__expose({ initData });
|
|
return (_ctx, _cache) => {
|
|
return common_vendor.e({
|
|
a: common_vendor.p({
|
|
name: "arrow-left",
|
|
color: "#000",
|
|
size: "24"
|
|
}),
|
|
b: common_vendor.o((...args) => common_vendor.unref(closeSv) && common_vendor.unref(closeSv)(...args)),
|
|
c: common_vendor.t(__props.editorType == "info" ? "病例信息" : "总结与讨论"),
|
|
d: common_vendor.t(__props.editorType == "info" ? "病例信息" : "总结与讨论"),
|
|
e: __props.editorType == "result"
|
|
}, __props.editorType == "result" ? {} : {}, {
|
|
f: __props.editorType == "info"
|
|
}, __props.editorType == "info" ? {
|
|
g: common_vendor.p({
|
|
name: "trash",
|
|
color: "#6B7280",
|
|
size: "18"
|
|
}),
|
|
h: common_vendor.o(clearMuBan)
|
|
} : {}, {
|
|
i: common_vendor.o(ready),
|
|
j: common_vendor.o(_ctx.focus),
|
|
k: common_vendor.o(blur),
|
|
l: common_vendor.p({
|
|
placeholder: placeholder.value,
|
|
eid: "peditor",
|
|
pasteMode: "origin"
|
|
}),
|
|
m: common_vendor.p({
|
|
src: common_vendor.unref(common_assets.photoImg),
|
|
width: "32rpx",
|
|
height: "32rpx"
|
|
}),
|
|
n: !isIOS.value ? 1 : "",
|
|
o: common_vendor.o(insertImage),
|
|
p: common_vendor.p({
|
|
src: common_vendor.unref(common_assets.videoImg$1),
|
|
width: "32rpx",
|
|
height: "32rpx"
|
|
}),
|
|
q: !isIOS.value ? 1 : "",
|
|
r: common_vendor.o(insertVideo),
|
|
s: __props.editorType == "info"
|
|
}, __props.editorType == "info" ? {
|
|
t: common_vendor.p({
|
|
src: common_vendor.unref(common_assets.addImg),
|
|
width: "32rpx",
|
|
height: "32rpx"
|
|
}),
|
|
v: !isIOS.value ? 1 : "",
|
|
w: common_vendor.o(alertTitle)
|
|
} : {}, {
|
|
x: common_vendor.o(confirm),
|
|
y: showCanvas.value
|
|
}, showCanvas.value ? {} : {}, {
|
|
z: common_vendor.p({
|
|
name: "close",
|
|
color: "#4B5563",
|
|
size: "20"
|
|
}),
|
|
A: common_vendor.o(closeTitle),
|
|
B: common_vendor.o(insertAllWord),
|
|
C: common_vendor.p({
|
|
name: "plus-circle",
|
|
color: "#3CC7C0",
|
|
size: "20"
|
|
}),
|
|
D: common_vendor.o(insertAllWord),
|
|
E: common_vendor.o(($event) => insertWord("患者信息")),
|
|
F: common_vendor.o(($event) => insertWord("主诉")),
|
|
G: common_vendor.o(($event) => insertWord("现病史及既往史")),
|
|
H: common_vendor.o(($event) => insertWord("检查")),
|
|
I: common_vendor.o(($event) => insertWord("临床诊断")),
|
|
J: common_vendor.o(($event) => insertWord("治疗经过及结果")),
|
|
K: common_vendor.o(closeTitle),
|
|
L: common_vendor.o(openTitle),
|
|
M: common_vendor.p({
|
|
round: 10,
|
|
zIndex: "999999",
|
|
show: showTitle.value,
|
|
mode: "bottom"
|
|
})
|
|
});
|
|
};
|
|
}
|
|
};
|
|
const Component = /* @__PURE__ */ common_vendor._export_sfc(_sfc_main, [["__scopeId", "data-v-a6a7913a"]]);
|
|
wx.createComponent(Component);
|
|
//# sourceMappingURL=../../../.sourcemap/mp-weixin/components/pEditor/pEditor.js.map
|