|
|
@@ -1,238 +1,274 @@
|
|
|
<template>
|
|
|
- <div class="container">
|
|
|
- <div :class="'mode ' + videoMode(mode)">
|
|
|
- <div
|
|
|
- class="mode-container"
|
|
|
- v-for="(item, index) in videos"
|
|
|
- :key="index"
|
|
|
- v-show="index < test(mode)"
|
|
|
- >
|
|
|
- <ape-video
|
|
|
- v-if="formatType(item.src) == 'video'"
|
|
|
- :autoplay="videoConfig.autoplay"
|
|
|
- :mode="videoConfig.mode"
|
|
|
- :loop="videoConfig.loop"
|
|
|
- :muted="videoConfig.muted"
|
|
|
- :controls="videoConfig.controls"
|
|
|
- :src="item.src"
|
|
|
- ></ape-video>
|
|
|
- <ape-image
|
|
|
- v-if="formatType(item.src) == 'image'"
|
|
|
- :src="item.src"
|
|
|
- :mode="imageConfig.mode"
|
|
|
- lazy
|
|
|
- ></ape-image>
|
|
|
- <ape-iframe
|
|
|
- v-if="formatType(item.src) == 'pdf'"
|
|
|
- :src="item.src"
|
|
|
- :autoPlay="true"
|
|
|
- ></ape-iframe>
|
|
|
- <ape-iframe
|
|
|
- v-if="formatType(item.src) == 'file'"
|
|
|
- :src="'https://view.officeapps.live.com/op/view.aspx?src=' + item.src"
|
|
|
- :autoPlay="true"
|
|
|
- ></ape-iframe>
|
|
|
+ <div style="width: 100vw; height: 100vh; background: rgb(66, 66, 66)" id="test">
|
|
|
+ <!-- 大屏展示一份 -->
|
|
|
+ <div style="width: 100%; height: 100%" v-if="show == 1">
|
|
|
+ <iframe
|
|
|
+ allowfullscreen="true"
|
|
|
+ width="100%"
|
|
|
+ height="100%"
|
|
|
+ style="overflow-x: hidden; overflow-y: hidden;box-sizing: border-box;"
|
|
|
+ :src="oneurl"
|
|
|
+ frameborder="0"
|
|
|
+ ></iframe>
|
|
|
+ </div>
|
|
|
+ <!-- 大屏展示两份 -->
|
|
|
+ <div style="width: 100%; height: 100%; display: flex" v-if="show == 3">
|
|
|
+ <iframe
|
|
|
+ allowfullscreen="true"
|
|
|
+ width="50%"
|
|
|
+ height="100%"
|
|
|
+ :src="oneurl"
|
|
|
+ frameborder="0"
|
|
|
+ style="border-right: 4px solid #11264f;box-sizing: border-box;"
|
|
|
+ ></iframe>
|
|
|
+ <iframe
|
|
|
+ allowfullscreen="true"
|
|
|
+ width="50%"
|
|
|
+ height="100%"
|
|
|
+ style="overflow-x: hidden; overflow-y: hidden; border-left: 4px solid #11264f;box-sizing: border-box;"
|
|
|
+ :src="twourl"
|
|
|
+ frameborder="0"
|
|
|
+ ></iframe>
|
|
|
+ </div>
|
|
|
+ <!-- 大屏展示两份2 -->
|
|
|
+ <div style="width: 100%; height: 100%" v-if="show == 2">
|
|
|
+ <iframe
|
|
|
+ allowfullscreen="true"
|
|
|
+ width="100%"
|
|
|
+ height="50%"
|
|
|
+ style="overflow-x: hidden; overflow-y: hidden; border-bottom: 4px solid #11264f;box-sizing: border-box;"
|
|
|
+ :src="oneurl"
|
|
|
+ frameborder="0"
|
|
|
+ ></iframe>
|
|
|
+ <iframe
|
|
|
+ allowfullscreen="true"
|
|
|
+ width="100%"
|
|
|
+ height="50%"
|
|
|
+ style="overflow-x: hidden; overflow-y: hidden; border-top: 4px solid #11264f;box-sizing: border-box;"
|
|
|
+ :src="twourl"
|
|
|
+ frameborder="0"
|
|
|
+ ></iframe>
|
|
|
+ </div>
|
|
|
+ <!-- 大屏展示四份 -->
|
|
|
+ <div style="width: 100%; height: 100%" v-if="show == 4">
|
|
|
+ <div style="width: 100%; display: flex; height: 50%">
|
|
|
+ <iframe
|
|
|
+ allowfullscreen="true"
|
|
|
+ width="50%"
|
|
|
+ height="100%"
|
|
|
+ style="
|
|
|
+ overflow-x: hidden;
|
|
|
+ overflow-y: hidden;
|
|
|
+ border-bottom: 4px solid #11264f;
|
|
|
+ border-right: 4px solid #11264f;
|
|
|
+ box-sizing: border-box;
|
|
|
+ "
|
|
|
+ :src="oneurl"
|
|
|
+ frameborder="0"
|
|
|
+ ></iframe>
|
|
|
+ <iframe
|
|
|
+ allowfullscreen="true"
|
|
|
+ width="50%"
|
|
|
+ height="100%"
|
|
|
+ style="
|
|
|
+ overflow-x: hidden;
|
|
|
+ overflow-y: hidden;
|
|
|
+ border-bottom: 4px solid #11264f;
|
|
|
+ border-left: 4px solid #11264f;
|
|
|
+ box-sizing: border-box;
|
|
|
+ "
|
|
|
+ :src="twourl"
|
|
|
+ frameborder="0"
|
|
|
+ ref="iframe"
|
|
|
+ ></iframe>
|
|
|
+ </div>
|
|
|
+ <div style="width: 100%; display: flex; height: 50%">
|
|
|
+ <iframe
|
|
|
+ allowfullscreen="true"
|
|
|
+ width="50%"
|
|
|
+ height="100%"
|
|
|
+ style="overflow-x: hidden; overflow-y: hidden; border-top: 4px solid #11264f; border-right: 4px solid #11264f;box-sizing: border-box;"
|
|
|
+ :src="threeurl"
|
|
|
+ frameborder="0"
|
|
|
+ ></iframe>
|
|
|
+ <iframe
|
|
|
+ allowfullscreen="true"
|
|
|
+ width="50%"
|
|
|
+ height="100%"
|
|
|
+ style="overflow-x: hidden; overflow-y: hidden; border-top: 4px solid #11264f; border-left: 4px solid #11264f;box-sizing: border-box;"
|
|
|
+ :src="foururl"
|
|
|
+ frameborder="0"
|
|
|
+ ></iframe>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 切换按钮 -->
|
|
|
+ <div
|
|
|
+ style="width: 30%; height: 30%; position: fixed; right: 0%; top: 0%"
|
|
|
+ class="divshow"
|
|
|
+ @mouseenter="enter"
|
|
|
+ @mouseleave="leave"
|
|
|
+ ></div>
|
|
|
+ <div class="qh" @click="qhshow" v-if="qhshow2" @mouseenter="enter" @mouseleave="leave">
|
|
|
+ <span>切换</span>
|
|
|
+ <img src="@/assets/split/qhan.png" alt="" />
|
|
|
+ </div>
|
|
|
+ <div class="qhimg" v-if="show2" v-show="qhshow2" @mouseenter="enter" @mouseleave="leave">
|
|
|
+ <div class="qhflex">
|
|
|
+ <span>布局一</span>
|
|
|
+ <img style="border-radius: 0.3vh" @click="qiehuan(1)" src="@/assets/split/p1.png" alt="" />
|
|
|
+ </div>
|
|
|
+ <div class="qhflex">
|
|
|
+ <span>布局二</span>
|
|
|
+ <img style="border-radius: 0.3vh" @click="qiehuan(2)" src="@/assets/split/p2.png" alt="" />
|
|
|
+ <img style="border-radius: 0.2vh" @click="qiehuan(3)" src="@/assets/split/p3.png" alt="" />
|
|
|
+ </div>
|
|
|
+ <div class="qhflex">
|
|
|
+ <span>布局三</span>
|
|
|
+ <img style="border-radius: 0.3vh" @click="qiehuan(4)" src="@/assets/split/p4.png" alt="" />
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+import { listAkMachineItemByCode } from '@/api/Split'
|
|
|
+let Base64 = require('js-base64').Base64
|
|
|
export default {
|
|
|
- name: "ZhtIndex",
|
|
|
-
|
|
|
data() {
|
|
|
return {
|
|
|
- mode: null,
|
|
|
- videoConfig: {
|
|
|
- autoplay: true,
|
|
|
- mode: "cover",
|
|
|
- loop: true,
|
|
|
- muted: false,
|
|
|
- controls: true,
|
|
|
- },
|
|
|
- imageConfig: {
|
|
|
- mode: "cover",
|
|
|
- },
|
|
|
- videos: [
|
|
|
- {
|
|
|
- src: require("@/assets/1/1.jpeg"),
|
|
|
- },
|
|
|
- {
|
|
|
- src: "https://smzc-1253299035.cos.ap-nanjing.myqcloud.com/printFile/d7dfcb1b391a4282a9cff87769b4e0a1.docx",
|
|
|
- },
|
|
|
- {
|
|
|
- src: "/printFile/dc2b4c2833aa4a69b8a58d93241b967e.pdf",
|
|
|
- },
|
|
|
- {
|
|
|
- src: require("@/assets/1/4.mp4"),
|
|
|
- },
|
|
|
- ],
|
|
|
- };
|
|
|
+ oneurl: '',
|
|
|
+ twourl: '',
|
|
|
+ threeurl: '',
|
|
|
+ foururl: '',
|
|
|
+ show: 1,
|
|
|
+ show2: false,
|
|
|
+ qhshow2: false,
|
|
|
+ resdata: {},
|
|
|
+ restype: '',
|
|
|
+ index: '',
|
|
|
+ timer: '',
|
|
|
+ }
|
|
|
},
|
|
|
-
|
|
|
- mounted() {
|
|
|
- this.mode = this.$route.query.mode;
|
|
|
+ watch: {},
|
|
|
+ created() {
|
|
|
+ var query = this.$route.query
|
|
|
+ this.index = query.index
|
|
|
+ var that = this
|
|
|
+ that.getinfo()
|
|
|
+ setInterval(function () {
|
|
|
+ that.getinfo()
|
|
|
+ }, 2000)
|
|
|
},
|
|
|
-
|
|
|
methods: {
|
|
|
- formatType(e) {
|
|
|
- if (e) {
|
|
|
- let type = e.split(".")[e.split(".").length - 1];
|
|
|
- switch (type) {
|
|
|
- case "mp4":
|
|
|
- case "webm":
|
|
|
- case "ogg":
|
|
|
- return "video";
|
|
|
- case "jpg":
|
|
|
- case "jpeg":
|
|
|
- case "png":
|
|
|
- case "gif":
|
|
|
- return "image";
|
|
|
- case "pdf":
|
|
|
- return "pdf";
|
|
|
- case "doc":
|
|
|
- case "docx":
|
|
|
- case "dot":
|
|
|
- case "dotx":
|
|
|
- case "xlsx":
|
|
|
- case "xls":
|
|
|
- case "csv":
|
|
|
- case "ppt":
|
|
|
- case "pptx":
|
|
|
- case "odp":
|
|
|
- return "file";
|
|
|
- default:
|
|
|
- return null;
|
|
|
+ getinfo() {
|
|
|
+ listAkMachineItemByCode(this.index).then((res) => {
|
|
|
+ console.log(window)
|
|
|
+ if (res.code != 200) {
|
|
|
+ } else {
|
|
|
+ this.resdata = res.data.map(function (item) {
|
|
|
+ var data = item
|
|
|
+ if (data.url.indexOf(',') > 0) {
|
|
|
+ data.url ='https://kkfile.shizhi.tv/picturesPreview?urls=' +
|
|
|
+ encodeURIComponent(Base64.encode(item.url.replace(',', '|'))) +
|
|
|
+ '&rotate=' +
|
|
|
+ item.rotate
|
|
|
+ } else {
|
|
|
+ if (data.type == '6') {
|
|
|
+ } else {
|
|
|
+ data.url ='https://kkfile.shizhi.tv/onlinePreview?url=' +
|
|
|
+ encodeURIComponent(Base64.encode(item.url)) +
|
|
|
+ '&rotate=' +
|
|
|
+ item.rotate
|
|
|
+ console.log(data.url)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return data
|
|
|
+ })
|
|
|
+ console.log(this.resdata, 'data2')
|
|
|
+ for (let i = 0; i < this.resdata.length; i++) {
|
|
|
+ if (this.resdata[i].code == '1') {
|
|
|
+ this.oneurl = this.resdata[i].url
|
|
|
+ }
|
|
|
+ if (this.resdata[i].code == '2') {
|
|
|
+ this.twourl = this.resdata[i].url
|
|
|
+ }
|
|
|
+ if (this.resdata[i].code == '3') {
|
|
|
+ this.threeurl = this.resdata[i].url
|
|
|
+ }
|
|
|
+ if (this.resdata[i].code == '4') {
|
|
|
+ this.foururl = this.resdata[i].url
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.show = res.num
|
|
|
}
|
|
|
- }
|
|
|
+ })
|
|
|
},
|
|
|
- videoMode(e) {
|
|
|
- if (e) {
|
|
|
- let mode = String(e);
|
|
|
- switch (mode) {
|
|
|
- case "1":
|
|
|
- return "mode-one";
|
|
|
- case "2":
|
|
|
- return "mode-two";
|
|
|
- case "3":
|
|
|
- return "mode-three";
|
|
|
- case "4":
|
|
|
- return "mode-fore";
|
|
|
- default:
|
|
|
- return null;
|
|
|
- }
|
|
|
- }
|
|
|
+ enter() {
|
|
|
+ this.qhshow2 = true
|
|
|
},
|
|
|
- test(e) {
|
|
|
- if (e) {
|
|
|
- let mode = String(e);
|
|
|
- switch (mode) {
|
|
|
- case "1":
|
|
|
- return 1;
|
|
|
- case "2":
|
|
|
- return 2;
|
|
|
- case "3":
|
|
|
- return 2;
|
|
|
- case "4":
|
|
|
- return 4;
|
|
|
- default:
|
|
|
- return null;
|
|
|
- }
|
|
|
- }
|
|
|
+ leave() {
|
|
|
+ this.qhshow2 = false
|
|
|
+ },
|
|
|
+ qhshow() {
|
|
|
+ this.show2 = !this.show2
|
|
|
+ },
|
|
|
+ qiehuan(index) {
|
|
|
+ this.show = index
|
|
|
},
|
|
|
},
|
|
|
-
|
|
|
- beforeDestroy() {},
|
|
|
-};
|
|
|
+}
|
|
|
</script>
|
|
|
|
|
|
-<style lang="less" scoped>
|
|
|
-.container {
|
|
|
+<style>
|
|
|
+.qh {
|
|
|
position: fixed;
|
|
|
- top: 0;
|
|
|
- left: 0;
|
|
|
+ right: 3%;
|
|
|
+ top: 3%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ color: #1b8adf;
|
|
|
+ box-shadow: 0px 1px 4px 0px rgba(26, 35, 43, 0.36);
|
|
|
+ border-radius: 0.5vh;
|
|
|
+ width: 6%;
|
|
|
+ height: 3%;
|
|
|
+ font-size: 1vh;
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+.divshow:hover .qh {
|
|
|
+ opacity: 100%;
|
|
|
+}
|
|
|
+.qh img {
|
|
|
+ width: 16%;
|
|
|
+ height: 58%;
|
|
|
+ margin-left: 5px;
|
|
|
+}
|
|
|
+.qhimg img {
|
|
|
+ width: 18%;
|
|
|
+ height: 58%;
|
|
|
+ margin-left: 0.6vh;
|
|
|
+}
|
|
|
+.qhimg {
|
|
|
+ position: fixed;
|
|
|
+ right: 3%;
|
|
|
+ top: 5.5%;
|
|
|
+ padding: 0.3vh;
|
|
|
+ color: #1b8adf;
|
|
|
+ box-shadow: 0px 3px 4px 0px rgba(26, 35, 43, 0.36);
|
|
|
+ border-radius: 0 0 0.5vh 0.5vh;
|
|
|
+ border-top: none;
|
|
|
+ width: 6%;
|
|
|
+ font-size: 1vh;
|
|
|
+ cursor: pointer;
|
|
|
+ padding-top: 15px;
|
|
|
+ box-sizing: border-box;
|
|
|
+}
|
|
|
+.qhflex {
|
|
|
width: 100%;
|
|
|
- height: 100%;
|
|
|
- background: #11264f;
|
|
|
-
|
|
|
- .mode {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- display: flex;
|
|
|
-
|
|
|
- .mode-container {
|
|
|
- padding: 2px;
|
|
|
- box-sizing: border-box;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .mode-one {
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
-
|
|
|
- .mode-container {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .mode-two {
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
-
|
|
|
- .mode-container {
|
|
|
- width: 0;
|
|
|
- flex: 1;
|
|
|
- height: 100%;
|
|
|
- }
|
|
|
-
|
|
|
- // .mode-container:nth-child(1) {
|
|
|
- // border-right: 2px solid #eee;
|
|
|
- // }
|
|
|
- }
|
|
|
-
|
|
|
- .mode-three {
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- flex-direction: column;
|
|
|
-
|
|
|
- .mode-container {
|
|
|
- width: 100%;
|
|
|
- height: 0;
|
|
|
- flex: 1;
|
|
|
- }
|
|
|
-
|
|
|
- // .mode-container:nth-child(1) {
|
|
|
- // border-bottom: 2px solid #eee;
|
|
|
- // }
|
|
|
- }
|
|
|
-
|
|
|
- .mode-fore {
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- flex-wrap: wrap;
|
|
|
-
|
|
|
- .mode-container {
|
|
|
- width: 0;
|
|
|
- min-width: 40%;
|
|
|
- flex: 1;
|
|
|
- height: 50%;
|
|
|
- // height: calc(50% - 1px);
|
|
|
- }
|
|
|
-
|
|
|
- // .mode-container:nth-child(1) {
|
|
|
- // border-right: 2px solid #eee;
|
|
|
- // border-bottom: 2px solid #eee;
|
|
|
- // }
|
|
|
-
|
|
|
- // .mode-container:nth-child(2) {
|
|
|
- // border-bottom: 2px solid #eee;
|
|
|
- // }
|
|
|
-
|
|
|
- // .mode-container:nth-child(3) {
|
|
|
- // border-right: 2px solid #eee;
|
|
|
- // }
|
|
|
- }
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin: 0 auto;
|
|
|
+ margin-left: 0.4vh;
|
|
|
+ margin-bottom: 10px;
|
|
|
}
|
|
|
-</style>
|
|
|
+</style>
|
