|
@@ -6,13 +6,15 @@
|
|
|
<div class="" v-for="(j,index) in val">
|
|
|
<p class="title">
|
|
|
<span class="iconfont icon-juxing"></span>
|
|
|
- {{key}}
|
|
|
+ {{ key }}
|
|
|
</p>
|
|
|
<div v-if="j.PicList !=undefined && j.PicList.length >0">
|
|
|
<template v-for="item in j.PicList">
|
|
|
<div class="point-look-image">
|
|
|
- <img @click="lookImg" :src="imageGetUrl + '&key=' +item.Key" alt v-load style="margin-bottom: 5px">
|
|
|
- <p class="pic-name">{{handleName(item.Name)}}</p>
|
|
|
+ <img @click="lookImg"
|
|
|
+ :src=handleLookImage(item.key) alt
|
|
|
+ v-load style="margin-bottom: 5px">
|
|
|
+ <p class="pic-name">{{ handleName(item.name) }}</p>
|
|
|
</div>
|
|
|
</template>
|
|
|
</div>
|
|
@@ -22,270 +24,279 @@
|
|
|
</div>
|
|
|
<div style="text-align: center" v-else>暂无数据</div>
|
|
|
</div>
|
|
|
- <details-dialog :title="'图片'" :iframeSrc="iframeSrc" :dialog="dialog" :setData="exhibitionImage.arr"></details-dialog>
|
|
|
+ <details-dialog :title="'图片'" :iframeSrc="iframeSrc" :dialog="dialog"
|
|
|
+ :setData="exhibitionImage.arr"></details-dialog>
|
|
|
</div>
|
|
|
</template>
|
|
|
<script>
|
|
|
- import detailsDialog from "@/components/business_space/lib/detailsDia"
|
|
|
+import detailsDialog from "@/components/business_space/lib/detailsDia"
|
|
|
|
|
|
- export default {
|
|
|
- components: {
|
|
|
- detailsDialog
|
|
|
+export default {
|
|
|
+ components: {
|
|
|
+ detailsDialog
|
|
|
+ },
|
|
|
+ props: ['exhibitionImage'],
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ baseUrl: "",
|
|
|
+ imageGetUrl: "/image-service/common/image_get?systemId=dataPlatform",
|
|
|
+ imageUploadUrl: "/image-service/common/image_upload?systemId=dataPlatform&secret=9e0891a7a8c8e885&overwrite=true",
|
|
|
+ imagesArr: [],
|
|
|
+ iframeSrc: "",
|
|
|
+ dialog: {
|
|
|
+ details: false
|
|
|
+ }
|
|
|
+ };
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ handleLookImage(key) {
|
|
|
+ return `/image-service/common/image_get?systemId=dataPlatform&key=${key}`
|
|
|
},
|
|
|
- props: ['exhibitionImage'],
|
|
|
- data() {
|
|
|
- return {
|
|
|
- baseUrl: "",
|
|
|
- imageGetUrl: "/image-service/common/image_get?systemId=dataPlatform",
|
|
|
- imageUploadUrl: "/image-service/common/image_upload?systemId=dataPlatform&secret=9e0891a7a8c8e885&overwrite=true",
|
|
|
- imagesArr: [],
|
|
|
- iframeSrc: "",
|
|
|
- dialog: {
|
|
|
- details: false
|
|
|
- }
|
|
|
- };
|
|
|
+ handleName(val) {
|
|
|
+ return val && val.length > 10 ? val.substring(1, 10) + '...' : val
|
|
|
+ },
|
|
|
+ //查看图片
|
|
|
+ lookImg() {
|
|
|
+ this.dialog.details = true
|
|
|
+ this.iframeSrc = process.env.BASE_URL + ":8890/photo-View.html"
|
|
|
},
|
|
|
- methods: {
|
|
|
- handleName(val) {
|
|
|
- return val && val.length > 10 ? val.substring(1, 10) + '...' : val
|
|
|
- },
|
|
|
- //查看图片
|
|
|
- lookImg() {
|
|
|
- this.dialog.details = true
|
|
|
- this.iframeSrc = process.env.BASE_URL + ":8890/photo-View.html"
|
|
|
- },
|
|
|
|
|
|
- //上传
|
|
|
- uploadAndSubmit(item, key) {
|
|
|
- let file = item.file;
|
|
|
- // try sending
|
|
|
- let reader = new FileReader();
|
|
|
+ //上传
|
|
|
+ uploadAndSubmit(item, key) {
|
|
|
+ let file = item.file;
|
|
|
+ // try sending
|
|
|
+ let reader = new FileReader();
|
|
|
|
|
|
- let vm = this;
|
|
|
+ let vm = this;
|
|
|
|
|
|
- let fileType = file.name.split(".");
|
|
|
- let type = fileType[fileType.length - 1];
|
|
|
- let CreateTime = tools.formatDate(new Date(file.lastModified))
|
|
|
+ let fileType = file.name.split(".");
|
|
|
+ let type = fileType[fileType.length - 1];
|
|
|
+ let CreateTime = tools.formatDate(new Date(file.lastModified))
|
|
|
|
|
|
- let uploadKey = file.uid
|
|
|
- if (!!key) {
|
|
|
- uploadKey = key
|
|
|
- }
|
|
|
+ let uploadKey = file.uid
|
|
|
+ if (!!key) {
|
|
|
+ uploadKey = key
|
|
|
+ }
|
|
|
|
|
|
- reader.onloadstart = function () {
|
|
|
- // 这个事件在读取开始时触发
|
|
|
- };
|
|
|
- reader.onprogress = function (p) {
|
|
|
- // 这个事件在读取进行中定时触发
|
|
|
- };
|
|
|
+ reader.onloadstart = function () {
|
|
|
+ // 这个事件在读取开始时触发
|
|
|
+ };
|
|
|
+ reader.onprogress = function (p) {
|
|
|
+ // 这个事件在读取进行中定时触发
|
|
|
+ };
|
|
|
|
|
|
- reader.onload = function () {
|
|
|
- // 这个事件在读取成功结束后触发
|
|
|
- };
|
|
|
- reader.onloadend = function () {
|
|
|
- // 这个事件在读取结束后,无论成功或者失败都会触发
|
|
|
- if (reader.error) {
|
|
|
- } else {
|
|
|
- // document.getElementById("bytesRead").textContent = file.size;
|
|
|
- // 构造 XMLHttpRequest 对象,发送文件 Binary 数据
|
|
|
- var xhr = new XMLHttpRequest();
|
|
|
- xhr.open(
|
|
|
- /* method */
|
|
|
- "POST",
|
|
|
- /* target url */
|
|
|
- vm.imageUploadUrl + "&key=" + uploadKey + "." + type
|
|
|
- /*, async, default to true */
|
|
|
- );
|
|
|
- //xhr.overrideMimeType("application/octet-stream");
|
|
|
- xhr.send(reader.result);
|
|
|
- xhr.onreadystatechange = function () {
|
|
|
- if (xhr.readyState == 4) {
|
|
|
- if (xhr.status == 200) {
|
|
|
- if (vm.type == 'image') {
|
|
|
- vm.imagesArr.push({
|
|
|
- Name: uploadKey + '',
|
|
|
- Key: uploadKey + "." + type,
|
|
|
- SystemId: "dataPlatform",
|
|
|
- Type: "image",
|
|
|
- CreateTime
|
|
|
- });
|
|
|
- }
|
|
|
- if (type == 'mp4') {
|
|
|
- vm.videoPicArr.push({
|
|
|
- Name: uploadKey + '',
|
|
|
- Key: uploadKey + "." + type,
|
|
|
- SystemId: "dataPlatform",
|
|
|
- Type: "video",
|
|
|
- CreateTime
|
|
|
- });
|
|
|
- vm.creatImg(vm.imageGetUrl + "&key=" + uploadKey + "." + type, uploadKey)
|
|
|
- }
|
|
|
- // if (vm.type == "video" && type == "png") {
|
|
|
- // vm.videoPicArr.push({
|
|
|
- // Name: uploadKey + '',
|
|
|
- // Key: uploadKey + "." + type,
|
|
|
- // SystemId: "dataPlatform",
|
|
|
- // Type: "image_video",
|
|
|
- // CreateTime
|
|
|
- // })
|
|
|
- // }
|
|
|
- vm.$emit("change", vm.imagesArr, vm.defined, vm.videoPicArr);
|
|
|
+ reader.onload = function () {
|
|
|
+ // 这个事件在读取成功结束后触发
|
|
|
+ };
|
|
|
+ reader.onloadend = function () {
|
|
|
+ // 这个事件在读取结束后,无论成功或者失败都会触发
|
|
|
+ if (reader.error) {
|
|
|
+ } else {
|
|
|
+ // document.getElementById("bytesRead").textContent = file.size;
|
|
|
+ // 构造 XMLHttpRequest 对象,发送文件 Binary 数据
|
|
|
+ var xhr = new XMLHttpRequest();
|
|
|
+ xhr.open(
|
|
|
+ /* method */
|
|
|
+ "POST",
|
|
|
+ /* target url */
|
|
|
+ vm.imageUploadUrl + "&key=" + uploadKey + "." + type
|
|
|
+ /*, async, default to true */
|
|
|
+ );
|
|
|
+ //xhr.overrideMimeType("application/octet-stream");
|
|
|
+ xhr.send(reader.result);
|
|
|
+ xhr.onreadystatechange = function () {
|
|
|
+ if (xhr.readyState == 4) {
|
|
|
+ if (xhr.status == 200) {
|
|
|
+ if (vm.type == 'image') {
|
|
|
+ vm.imagesArr.push({
|
|
|
+ Name: uploadKey + '',
|
|
|
+ Key: uploadKey + "." + type,
|
|
|
+ SystemId: "dataPlatform",
|
|
|
+ Type: "image",
|
|
|
+ CreateTime
|
|
|
+ });
|
|
|
+ }
|
|
|
+ if (type == 'mp4') {
|
|
|
+ vm.videoPicArr.push({
|
|
|
+ Name: uploadKey + '',
|
|
|
+ Key: uploadKey + "." + type,
|
|
|
+ SystemId: "dataPlatform",
|
|
|
+ Type: "video",
|
|
|
+ CreateTime
|
|
|
+ });
|
|
|
+ vm.creatImg(vm.imageGetUrl + "&key=" + uploadKey + "." + type, uploadKey)
|
|
|
}
|
|
|
+ // if (vm.type == "video" && type == "png") {
|
|
|
+ // vm.videoPicArr.push({
|
|
|
+ // Name: uploadKey + '',
|
|
|
+ // Key: uploadKey + "." + type,
|
|
|
+ // SystemId: "dataPlatform",
|
|
|
+ // Type: "image_video",
|
|
|
+ // CreateTime
|
|
|
+ // })
|
|
|
+ // }
|
|
|
+ vm.$emit("change", vm.imagesArr, vm.defined, vm.videoPicArr);
|
|
|
}
|
|
|
- };
|
|
|
- }
|
|
|
- };
|
|
|
- reader.readAsArrayBuffer(file);
|
|
|
- },
|
|
|
- dataURLtoBlob(dataURI, type) {
|
|
|
- var binary = atob(dataURI.split(',')[1]);
|
|
|
- var array = [];
|
|
|
- for (var i = 0; i < binary.length; i++) {
|
|
|
- array.push(binary.charCodeAt(i));
|
|
|
+ }
|
|
|
+ };
|
|
|
}
|
|
|
- return new Blob([new Uint8Array(array)], { type: type });
|
|
|
- },
|
|
|
-
|
|
|
- creatImg(reader, key) {
|
|
|
- var videoDom = document.getElementById('video');
|
|
|
- videoDom.src = reader;
|
|
|
- let vm = this
|
|
|
- videoDom.onloadeddata = function () {
|
|
|
- // 这里可以打印视频时长
|
|
|
- // 这里取得视频封面
|
|
|
- var canvas = document.createElement('canvas');
|
|
|
- canvas.width = 300;
|
|
|
- canvas.height = 300 * this.videoHeight / this.videoWidth;
|
|
|
- canvas.getContext('2d').drawImage(this, 0, 0, canvas.width, canvas.height);
|
|
|
- //将canvas的base64位图片转换成图片png的file
|
|
|
- var blob = vm.dataURLtoBlob(canvas.toDataURL('image/png'), "image/png")
|
|
|
- //将其转换成file对象
|
|
|
- var file = new File([blob], "video_image.png", { type: "image/png", lastModified: Date.now() })//blob转file
|
|
|
- vm.uploadAndSubmit({ file: file }, key)
|
|
|
- }
|
|
|
- },
|
|
|
+ };
|
|
|
+ reader.readAsArrayBuffer(file);
|
|
|
},
|
|
|
- watch: {
|
|
|
- keysArr: function (val) {
|
|
|
- this.imageFalg();
|
|
|
+ dataURLtoBlob(dataURI, type) {
|
|
|
+ var binary = atob(dataURI.split(',')[1]);
|
|
|
+ var array = [];
|
|
|
+ for (var i = 0; i < binary.length; i++) {
|
|
|
+ array.push(binary.charCodeAt(i));
|
|
|
}
|
|
|
+ return new Blob([new Uint8Array(array)], { type: type });
|
|
|
},
|
|
|
- //自定义指令
|
|
|
- directives: {
|
|
|
- load: function (el) {
|
|
|
- let imgDom = document.createElement("img");
|
|
|
- imgDom.style.position = "absolute";
|
|
|
- imgDom.style.top = "-999px";
|
|
|
- imgDom.style.opacity = 0;
|
|
|
- imgDom.src = el.src;
|
|
|
- el.src = "";
|
|
|
- imgDom.onload = () => {
|
|
|
- let width = imgDom.width;
|
|
|
- let height = imgDom.height;
|
|
|
- if (width > height) {
|
|
|
- el.style.height = "100%";
|
|
|
- el.style.width = "auto";
|
|
|
- el.style.position = "absolute";
|
|
|
- el.style.left = "50%";
|
|
|
- el.style.top = "0";
|
|
|
- el.style.transform = "translateX(-50%)";
|
|
|
- el.style.webkitTransform = "translateX(-50%) translateY(0)";
|
|
|
- el.style.MozTransform = "translateX(-50%) translateY(0)";
|
|
|
- el.style.msTransform = "translateX(-50%) translateY(0)";
|
|
|
- el.style.OTransform = "translateX(-50%) translateY(0)";
|
|
|
- } else if (width < height) {
|
|
|
- el.src = imgDom.src;
|
|
|
- el.style.width = "100%";
|
|
|
- el.style.height = "auto";
|
|
|
- el.style.position = "absolute";
|
|
|
- el.style.top = "50%";
|
|
|
- el.style.left = "0";
|
|
|
- el.style.transform = "translateY(-50%) translateX(0)";
|
|
|
- el.style.webkitTransform = "translateY(-50%) translateX(0)";
|
|
|
- el.style.MozTransform = "translateY(-50%) translateX(0)";
|
|
|
- el.style.msTransform = "translateY(-50%) translateX(0)";
|
|
|
- el.style.OTransform = "translateY(-50%) translateX(0)";
|
|
|
- } else {
|
|
|
- el.style.width = "100%";
|
|
|
- el.style.height = "100%";
|
|
|
- el.style.position = "absolute";
|
|
|
- el.style.top = "0";
|
|
|
- el.style.left = "0";
|
|
|
- el.style.transform = "translateY(0) translateX(0)";
|
|
|
- el.style.webkitTransform = "translateY(0) translateX(0)";
|
|
|
- el.style.MozTransform = "translateY(0) translateX(0)";
|
|
|
- el.style.msTransform = "translateY(0) translateX(0)";
|
|
|
- el.style.OTransform = "translateY(0) translateX(0)";
|
|
|
- }
|
|
|
- el.src = imgDom.src;
|
|
|
- };
|
|
|
+
|
|
|
+ creatImg(reader, key) {
|
|
|
+ var videoDom = document.getElementById('video');
|
|
|
+ videoDom.src = reader;
|
|
|
+ let vm = this
|
|
|
+ videoDom.onloadeddata = function () {
|
|
|
+ // 这里可以打印视频时长
|
|
|
+ // 这里取得视频封面
|
|
|
+ var canvas = document.createElement('canvas');
|
|
|
+ canvas.width = 300;
|
|
|
+ canvas.height = 300 * this.videoHeight / this.videoWidth;
|
|
|
+ canvas.getContext('2d').drawImage(this, 0, 0, canvas.width, canvas.height);
|
|
|
+ //将canvas的base64位图片转换成图片png的file
|
|
|
+ var blob = vm.dataURLtoBlob(canvas.toDataURL('image/png'), "image/png")
|
|
|
+ //将其转换成file对象
|
|
|
+ var file = new File([blob], "video_image.png", { type: "image/png", lastModified: Date.now() })//blob转file
|
|
|
+ vm.uploadAndSubmit({ file: file }, key)
|
|
|
}
|
|
|
+ },
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ keysArr: function (val) {
|
|
|
+ this.imageFalg();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //自定义指令
|
|
|
+ directives: {
|
|
|
+ load: function (el) {
|
|
|
+ let imgDom = document.createElement("img");
|
|
|
+ imgDom.style.position = "absolute";
|
|
|
+ imgDom.style.top = "-999px";
|
|
|
+ imgDom.style.opacity = 0;
|
|
|
+ imgDom.src = el.src;
|
|
|
+ el.src = "";
|
|
|
+ imgDom.onload = () => {
|
|
|
+ let width = imgDom.width;
|
|
|
+ let height = imgDom.height;
|
|
|
+ if (width > height) {
|
|
|
+ el.style.height = "100%";
|
|
|
+ el.style.width = "auto";
|
|
|
+ el.style.position = "absolute";
|
|
|
+ el.style.left = "50%";
|
|
|
+ el.style.top = "0";
|
|
|
+ el.style.transform = "translateX(-50%)";
|
|
|
+ el.style.webkitTransform = "translateX(-50%) translateY(0)";
|
|
|
+ el.style.MozTransform = "translateX(-50%) translateY(0)";
|
|
|
+ el.style.msTransform = "translateX(-50%) translateY(0)";
|
|
|
+ el.style.OTransform = "translateX(-50%) translateY(0)";
|
|
|
+ } else if (width < height) {
|
|
|
+ el.src = imgDom.src;
|
|
|
+ el.style.width = "100%";
|
|
|
+ el.style.height = "auto";
|
|
|
+ el.style.position = "absolute";
|
|
|
+ el.style.top = "50%";
|
|
|
+ el.style.left = "0";
|
|
|
+ el.style.transform = "translateY(-50%) translateX(0)";
|
|
|
+ el.style.webkitTransform = "translateY(-50%) translateX(0)";
|
|
|
+ el.style.MozTransform = "translateY(-50%) translateX(0)";
|
|
|
+ el.style.msTransform = "translateY(-50%) translateX(0)";
|
|
|
+ el.style.OTransform = "translateY(-50%) translateX(0)";
|
|
|
+ } else {
|
|
|
+ el.style.width = "100%";
|
|
|
+ el.style.height = "100%";
|
|
|
+ el.style.position = "absolute";
|
|
|
+ el.style.top = "0";
|
|
|
+ el.style.left = "0";
|
|
|
+ el.style.transform = "translateY(0) translateX(0)";
|
|
|
+ el.style.webkitTransform = "translateY(0) translateX(0)";
|
|
|
+ el.style.MozTransform = "translateY(0) translateX(0)";
|
|
|
+ el.style.msTransform = "translateY(0) translateX(0)";
|
|
|
+ el.style.OTransform = "translateY(0) translateX(0)";
|
|
|
+ }
|
|
|
+ el.src = imgDom.src;
|
|
|
+ };
|
|
|
}
|
|
|
- };
|
|
|
+ }
|
|
|
+};
|
|
|
</script>
|
|
|
<style lang="less">
|
|
|
- #sagaUploads-look-image {
|
|
|
+#sagaUploads-look-image {
|
|
|
+ overflow: hidden;
|
|
|
+
|
|
|
+ .title {
|
|
|
+ /*border-left: 8px solid black;*/
|
|
|
+ margin: 10px 10px 10px 0;
|
|
|
+ font-weight: 600;
|
|
|
+ /*text-indent: 10px;*/
|
|
|
+ display: block;
|
|
|
overflow: hidden;
|
|
|
+ }
|
|
|
|
|
|
- .title {
|
|
|
- /*border-left: 8px solid black;*/
|
|
|
- margin: 10px 10px 10px 0;
|
|
|
- font-weight: 600;
|
|
|
- /*text-indent: 10px;*/
|
|
|
- display: block;
|
|
|
- overflow: hidden;
|
|
|
- }
|
|
|
+ .avatar-uploader {
|
|
|
+ height: 180px;
|
|
|
+ width: 180px;
|
|
|
+ overflow: hidden;
|
|
|
|
|
|
- .avatar-uploader {
|
|
|
- height: 180px;
|
|
|
+ .el-upload {
|
|
|
width: 180px;
|
|
|
- overflow: hidden;
|
|
|
+ height: 180px;
|
|
|
|
|
|
- .el-upload {
|
|
|
+ .el-upload-dragger {
|
|
|
width: 180px;
|
|
|
height: 180px;
|
|
|
|
|
|
- .el-upload-dragger {
|
|
|
- width: 180px;
|
|
|
- height: 180px;
|
|
|
- .el-icon-plus {
|
|
|
- display: block;
|
|
|
- width: 20px;
|
|
|
- height: 20px;
|
|
|
- font-size: 20px;
|
|
|
- margin: 80px;
|
|
|
- }
|
|
|
+ .el-icon-plus {
|
|
|
+ display: block;
|
|
|
+ width: 20px;
|
|
|
+ height: 20px;
|
|
|
+ font-size: 20px;
|
|
|
+ margin: 80px;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- .pic-name {
|
|
|
- position: absolute;
|
|
|
- right: 72px;
|
|
|
- display: inline-block;
|
|
|
- background: #fff;
|
|
|
- color: #000;
|
|
|
- padding: 3px;
|
|
|
- z-index: 99;
|
|
|
- border-radius: 8px;
|
|
|
- bottom: 5px;
|
|
|
- }
|
|
|
- .point-look-image {
|
|
|
- height: 180px;
|
|
|
- margin-bottom: 10px;
|
|
|
- position: relative;
|
|
|
- overflow: hidden;
|
|
|
- img {
|
|
|
- z-index: 11;
|
|
|
- }
|
|
|
- i {
|
|
|
- position: absolute;
|
|
|
- bottom: 10px;
|
|
|
- right: 10px;
|
|
|
- background-color: #fff;
|
|
|
- padding: 5px;
|
|
|
- cursor: pointer;
|
|
|
- z-index: 66;
|
|
|
- }
|
|
|
+ }
|
|
|
+
|
|
|
+ .pic-name {
|
|
|
+ position: absolute;
|
|
|
+ right: 72px;
|
|
|
+ display: inline-block;
|
|
|
+ background: #fff;
|
|
|
+ color: #000;
|
|
|
+ padding: 3px;
|
|
|
+ z-index: 99;
|
|
|
+ border-radius: 8px;
|
|
|
+ bottom: 5px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .point-look-image {
|
|
|
+ height: 180px;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ position: relative;
|
|
|
+ overflow: hidden;
|
|
|
+
|
|
|
+ img {
|
|
|
+ z-index: 11;
|
|
|
+ }
|
|
|
+
|
|
|
+ i {
|
|
|
+ position: absolute;
|
|
|
+ bottom: 10px;
|
|
|
+ right: 10px;
|
|
|
+ background-color: #fff;
|
|
|
+ padding: 5px;
|
|
|
+ cursor: pointer;
|
|
|
+ z-index: 66;
|
|
|
}
|
|
|
}
|
|
|
+}
|
|
|
</style>
|