|
@@ -1,12 +1,15 @@
|
|
<template>
|
|
<template>
|
|
- <div style="width: 100vw; height: 100vh; background: rgb(66, 66, 66)" id="test">
|
|
|
|
|
|
+ <div
|
|
|
|
+ style="width: 100vw; height: 100vh; background: rgb(66, 66, 66)"
|
|
|
|
+ id="test"
|
|
|
|
+ >
|
|
<!-- 大屏展示一份 -->
|
|
<!-- 大屏展示一份 -->
|
|
<div style="width: 100%; height: 100%" v-if="show == 1">
|
|
<div style="width: 100%; height: 100%" v-if="show == 1">
|
|
<iframe
|
|
<iframe
|
|
allowfullscreen="true"
|
|
allowfullscreen="true"
|
|
width="100%"
|
|
width="100%"
|
|
height="100%"
|
|
height="100%"
|
|
- style="overflow-x: hidden; overflow-y: hidden;box-sizing: border-box;"
|
|
|
|
|
|
+ style="overflow-x: hidden; overflow-y: hidden; box-sizing: border-box"
|
|
:src="oneurl"
|
|
:src="oneurl"
|
|
frameborder="0"
|
|
frameborder="0"
|
|
></iframe>
|
|
></iframe>
|
|
@@ -19,13 +22,18 @@
|
|
height="100%"
|
|
height="100%"
|
|
:src="oneurl"
|
|
:src="oneurl"
|
|
frameborder="0"
|
|
frameborder="0"
|
|
- style="border-right: 4px solid #11264f;box-sizing: border-box;"
|
|
|
|
|
|
+ style="border-right: 4px solid #11264f; box-sizing: border-box"
|
|
></iframe>
|
|
></iframe>
|
|
<iframe
|
|
<iframe
|
|
allowfullscreen="true"
|
|
allowfullscreen="true"
|
|
width="50%"
|
|
width="50%"
|
|
height="100%"
|
|
height="100%"
|
|
- style="overflow-x: hidden; overflow-y: hidden; border-left: 4px solid #11264f;box-sizing: border-box;"
|
|
|
|
|
|
+ style="
|
|
|
|
+ overflow-x: hidden;
|
|
|
|
+ overflow-y: hidden;
|
|
|
|
+ border-left: 4px solid #11264f;
|
|
|
|
+ box-sizing: border-box;
|
|
|
|
+ "
|
|
:src="twourl"
|
|
:src="twourl"
|
|
frameborder="0"
|
|
frameborder="0"
|
|
></iframe>
|
|
></iframe>
|
|
@@ -36,7 +44,12 @@
|
|
allowfullscreen="true"
|
|
allowfullscreen="true"
|
|
width="100%"
|
|
width="100%"
|
|
height="50%"
|
|
height="50%"
|
|
- style="overflow-x: hidden; overflow-y: hidden; border-bottom: 4px solid #11264f;box-sizing: border-box;"
|
|
|
|
|
|
+ style="
|
|
|
|
+ overflow-x: hidden;
|
|
|
|
+ overflow-y: hidden;
|
|
|
|
+ border-bottom: 4px solid #11264f;
|
|
|
|
+ box-sizing: border-box;
|
|
|
|
+ "
|
|
:src="oneurl"
|
|
:src="oneurl"
|
|
frameborder="0"
|
|
frameborder="0"
|
|
></iframe>
|
|
></iframe>
|
|
@@ -44,7 +57,12 @@
|
|
allowfullscreen="true"
|
|
allowfullscreen="true"
|
|
width="100%"
|
|
width="100%"
|
|
height="50%"
|
|
height="50%"
|
|
- style="overflow-x: hidden; overflow-y: hidden; border-top: 4px solid #11264f;box-sizing: border-box;"
|
|
|
|
|
|
+ style="
|
|
|
|
+ overflow-x: hidden;
|
|
|
|
+ overflow-y: hidden;
|
|
|
|
+ border-top: 4px solid #11264f;
|
|
|
|
+ box-sizing: border-box;
|
|
|
|
+ "
|
|
:src="twourl"
|
|
:src="twourl"
|
|
frameborder="0"
|
|
frameborder="0"
|
|
></iframe>
|
|
></iframe>
|
|
@@ -87,7 +105,13 @@
|
|
allowfullscreen="true"
|
|
allowfullscreen="true"
|
|
width="50%"
|
|
width="50%"
|
|
height="100%"
|
|
height="100%"
|
|
- style="overflow-x: hidden; overflow-y: hidden; border-top: 4px solid #11264f; border-right: 4px solid #11264f;box-sizing: border-box;"
|
|
|
|
|
|
+ style="
|
|
|
|
+ overflow-x: hidden;
|
|
|
|
+ overflow-y: hidden;
|
|
|
|
+ border-top: 4px solid #11264f;
|
|
|
|
+ border-right: 4px solid #11264f;
|
|
|
|
+ box-sizing: border-box;
|
|
|
|
+ "
|
|
:src="threeurl"
|
|
:src="threeurl"
|
|
frameborder="0"
|
|
frameborder="0"
|
|
></iframe>
|
|
></iframe>
|
|
@@ -95,7 +119,13 @@
|
|
allowfullscreen="true"
|
|
allowfullscreen="true"
|
|
width="50%"
|
|
width="50%"
|
|
height="100%"
|
|
height="100%"
|
|
- style="overflow-x: hidden; overflow-y: hidden; border-top: 4px solid #11264f; border-left: 4px solid #11264f;box-sizing: border-box;"
|
|
|
|
|
|
+ style="
|
|
|
|
+ overflow-x: hidden;
|
|
|
|
+ overflow-y: hidden;
|
|
|
|
+ border-top: 4px solid #11264f;
|
|
|
|
+ border-left: 4px solid #11264f;
|
|
|
|
+ box-sizing: border-box;
|
|
|
|
+ "
|
|
:src="foururl"
|
|
:src="foururl"
|
|
frameborder="0"
|
|
frameborder="0"
|
|
></iframe>
|
|
></iframe>
|
|
@@ -108,115 +138,150 @@
|
|
@mouseenter="enter"
|
|
@mouseenter="enter"
|
|
@mouseleave="leave"
|
|
@mouseleave="leave"
|
|
></div>
|
|
></div>
|
|
- <div class="qh" @click="qhshow" v-if="qhshow2" @mouseenter="enter" @mouseleave="leave">
|
|
|
|
|
|
+ <div
|
|
|
|
+ class="qh"
|
|
|
|
+ @click="qhshow"
|
|
|
|
+ v-if="qhshow2"
|
|
|
|
+ @mouseenter="enter"
|
|
|
|
+ @mouseleave="leave"
|
|
|
|
+ >
|
|
<span>切换</span>
|
|
<span>切换</span>
|
|
<img src="@/assets/split/qhan.png" alt="" />
|
|
<img src="@/assets/split/qhan.png" alt="" />
|
|
</div>
|
|
</div>
|
|
- <div class="qhimg" v-if="show2" v-show="qhshow2" @mouseenter="enter" @mouseleave="leave">
|
|
|
|
|
|
+ <div
|
|
|
|
+ class="qhimg"
|
|
|
|
+ v-if="show2"
|
|
|
|
+ v-show="qhshow2"
|
|
|
|
+ @mouseenter="enter"
|
|
|
|
+ @mouseleave="leave"
|
|
|
|
+ >
|
|
<div class="qhflex">
|
|
<div class="qhflex">
|
|
<span>布局一</span>
|
|
<span>布局一</span>
|
|
- <img style="border-radius: 0.3vh" @click="qiehuan(1)" src="@/assets/split/p1.png" alt="" />
|
|
|
|
|
|
+ <img
|
|
|
|
+ style="border-radius: 0.3vh"
|
|
|
|
+ @click="qiehuan(1)"
|
|
|
|
+ src="@/assets/split/p1.png"
|
|
|
|
+ alt=""
|
|
|
|
+ />
|
|
</div>
|
|
</div>
|
|
<div class="qhflex">
|
|
<div class="qhflex">
|
|
<span>布局二</span>
|
|
<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="" />
|
|
|
|
|
|
+ <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>
|
|
<div class="qhflex">
|
|
<div class="qhflex">
|
|
<span>布局三</span>
|
|
<span>布局三</span>
|
|
- <img style="border-radius: 0.3vh" @click="qiehuan(4)" src="@/assets/split/p4.png" alt="" />
|
|
|
|
|
|
+ <img
|
|
|
|
+ style="border-radius: 0.3vh"
|
|
|
|
+ @click="qiehuan(4)"
|
|
|
|
+ src="@/assets/split/p4.png"
|
|
|
|
+ alt=""
|
|
|
|
+ />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</template>
|
|
|
|
|
|
<script>
|
|
<script>
|
|
-import { listAkMachineItemByCode } from '@/api/Split'
|
|
|
|
-let Base64 = require('js-base64').Base64
|
|
|
|
|
|
+import { listAkMachineItemByCode } from "@/api/Split";
|
|
|
|
+let Base64 = require("js-base64").Base64;
|
|
export default {
|
|
export default {
|
|
data() {
|
|
data() {
|
|
return {
|
|
return {
|
|
- oneurl: '',
|
|
|
|
- twourl: '',
|
|
|
|
- threeurl: '',
|
|
|
|
- foururl: '',
|
|
|
|
|
|
+ oneurl: "",
|
|
|
|
+ twourl: "",
|
|
|
|
+ threeurl: "",
|
|
|
|
+ foururl: "",
|
|
show: 1,
|
|
show: 1,
|
|
show2: false,
|
|
show2: false,
|
|
qhshow2: false,
|
|
qhshow2: false,
|
|
resdata: {},
|
|
resdata: {},
|
|
- restype: '',
|
|
|
|
- index: '',
|
|
|
|
- timer: '',
|
|
|
|
- }
|
|
|
|
|
|
+ restype: "",
|
|
|
|
+ index: "",
|
|
|
|
+ timer: "",
|
|
|
|
+ };
|
|
},
|
|
},
|
|
watch: {},
|
|
watch: {},
|
|
created() {
|
|
created() {
|
|
- var query = this.$route.query
|
|
|
|
- this.index = query.index
|
|
|
|
- var that = this
|
|
|
|
- that.getinfo()
|
|
|
|
|
|
+ var query = this.$route.query;
|
|
|
|
+ this.index = query.index;
|
|
|
|
+ var that = this;
|
|
|
|
+ that.getinfo();
|
|
setInterval(function () {
|
|
setInterval(function () {
|
|
- that.getinfo()
|
|
|
|
- }, 2000)
|
|
|
|
|
|
+ that.getinfo();
|
|
|
|
+ }, 2000);
|
|
},
|
|
},
|
|
methods: {
|
|
methods: {
|
|
getinfo() {
|
|
getinfo() {
|
|
listAkMachineItemByCode(this.index).then((res) => {
|
|
listAkMachineItemByCode(this.index).then((res) => {
|
|
- console.log(window)
|
|
|
|
if (res.code != 200) {
|
|
if (res.code != 200) {
|
|
} else {
|
|
} else {
|
|
this.resdata = res.data.map(function (item) {
|
|
this.resdata = res.data.map(function (item) {
|
|
- var data = item
|
|
|
|
- if (data.url.indexOf(',') > 0) {
|
|
|
|
- data.url ='https://kkfile.shizhi.tv:449/picturesPreview?urls=' +
|
|
|
|
- encodeURIComponent(Base64.encode(item.url.replace(',', '|'))) +
|
|
|
|
- '&rotate=' +
|
|
|
|
- item.rotate
|
|
|
|
|
|
+ var data = item;
|
|
|
|
+ if (data.url.indexOf(",") > 0) {
|
|
|
|
+ data.url =
|
|
|
|
+ process.env.VUE_APP_KKFILE_URL +
|
|
|
|
+ "/picturesPreview?urls=" +
|
|
|
|
+ encodeURIComponent(Base64.encode(item.url.replace(",", "|"))) +
|
|
|
|
+ "&rotate=" +
|
|
|
|
+ item.rotate;
|
|
} else {
|
|
} else {
|
|
- if (data.type == '6') {
|
|
|
|
|
|
+ if (data.type == "6") {
|
|
} else {
|
|
} else {
|
|
- data.url ='https://kkfile.shizhi.tv:449/onlinePreview?url=' +
|
|
|
|
|
|
+ data.url =
|
|
|
|
+ process.env.VUE_APP_KKFILE_URL +
|
|
|
|
+ "/onlinePreview?url=" +
|
|
encodeURIComponent(Base64.encode(item.url)) +
|
|
encodeURIComponent(Base64.encode(item.url)) +
|
|
- '&rotate=' +
|
|
|
|
- item.rotate
|
|
|
|
- console.log(data.url)
|
|
|
|
|
|
+ "&rotate=" +
|
|
|
|
+ item.rotate;
|
|
|
|
+ console.log(data.url);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
- return data
|
|
|
|
- })
|
|
|
|
- console.log(this.resdata, 'data2')
|
|
|
|
|
|
+ return data;
|
|
|
|
+ });
|
|
|
|
+ console.log(this.resdata, "data2");
|
|
for (let i = 0; i < this.resdata.length; i++) {
|
|
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 == "1") {
|
|
|
|
+ this.oneurl = this.resdata[i].url;
|
|
}
|
|
}
|
|
- if (this.resdata[i].code == '2') {
|
|
|
|
- this.twourl = 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 == "3") {
|
|
|
|
+ this.threeurl = this.resdata[i].url;
|
|
}
|
|
}
|
|
- if (this.resdata[i].code == '4') {
|
|
|
|
- this.foururl = this.resdata[i].url
|
|
|
|
|
|
+ if (this.resdata[i].code == "4") {
|
|
|
|
+ this.foururl = this.resdata[i].url;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
- this.show = res.num
|
|
|
|
|
|
+ this.show = res.num;
|
|
}
|
|
}
|
|
- })
|
|
|
|
|
|
+ });
|
|
},
|
|
},
|
|
enter() {
|
|
enter() {
|
|
- this.qhshow2 = true
|
|
|
|
|
|
+ this.qhshow2 = true;
|
|
},
|
|
},
|
|
leave() {
|
|
leave() {
|
|
- this.qhshow2 = false
|
|
|
|
|
|
+ this.qhshow2 = false;
|
|
},
|
|
},
|
|
qhshow() {
|
|
qhshow() {
|
|
- this.show2 = !this.show2
|
|
|
|
|
|
+ this.show2 = !this.show2;
|
|
},
|
|
},
|
|
qiehuan(index) {
|
|
qiehuan(index) {
|
|
- this.show = index
|
|
|
|
|
|
+ this.show = index;
|
|
},
|
|
},
|
|
},
|
|
},
|
|
-}
|
|
|
|
|
|
+};
|
|
</script>
|
|
</script>
|
|
|
|
|
|
<style>
|
|
<style>
|