123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180 |
- <!--
- 上传图片的弹窗
- -->
- <template>
- <el-dialog title="上传图片" :visible.sync="dialog.lookPic" v-if="dialog.lookPic" width="600px">
- <div style="max-height:700px;overflow-y:auto;">
- <el-tabs type="border-card">
- <el-tab-pane>
- <span slot="label">图片</span>
- <div style="width:500px;max-height:500px;">
- <div v-if="picArrs.length">
- <iframe
- id="google_ads_frame3"
- name="google_ads_frame3"
- frameborder="0"
- width="100%"
- height="500px"
- :src="iframeSrc"
- marginwidth="0"
- marginheight="0"
- vspace="0"
- hspace="0"
- allowtransparency="true"
- scrolling="no"
- allowfullscreen="true"
- ></iframe>
- </div>
- <div v-if="!picArrs.length">暂无图片</div>
- </div>
- </el-tab-pane>
- <el-tab-pane v-if="videoArr.length">
- <span slot="label">视频</span>
- <div style="width:500px;">
- <div
- v-for=" item in videoArr "
- style="width:200px;height:200px;float:left;margin: 5px;"
- >
- <video
- width="100%"
- height="100%"
- :src="
- '/img/image-service/common/image_get?systemId=dataPlatform&key='+item.key"
- controls
- :poster="'img/image-service/common/image_get?systemId=dataPlatform&key='+ item.key +'&width=200'"
- ></video>
- </div>
- </div>
- </el-tab-pane>
- </el-tabs>
- </div>
- </el-dialog>
- </template>
- <script>
- import uploadImgs from "@/components/ledger/lib/uploadImgsName";
- import tools from "@/utils/scan/tools"
- export default {
- components: {
- uploadImgs
- },
- props: {
- dialog: {
- type: Object,
- default: function () {
- return {
- lookPic: true
- };
- }
- },
- keysArr: {
- type: Array,
- default: function () {
- return []
- }
- },
- read: {
- type: Boolean,
- default: false
- }
- },
- data() {
- return {
- picArrs: [],
- panoramaArr: [],
- videoArr: [],
- videoPicArr: [],
- changeKeys: [],
- iframeSrc: ""
- };
- },
- created() { },
- mounted() { },
- methods: {
- imageItem(images) {
- this.picArrs = images
- this.change()
- },
- panoramaItem(images) {
- this.panoramaArr = images
- this.change()
- },
- videoItem(videos, pe, pics) {
- this.videoArr = videos
- this.videoPicArr = pics
- this.change()
- },
- change() {
- // let picsArr = this.getArr(this.picArrs, "设备图片", "image")
- // let videos = this.getArr(this.videoArr, "视频", "video")
- // let videoPics = this.getArr(this.videoPicArr, "视频资料", "image_video")
- // let panoramas = this.getArr(this.panoramaArr, "全景照片", "panorama")
- let picsArr = this.picArrs
- let videos = this.videoArr
- let videoPics = this.videoPicArr
- let panoramas = this.panoramaArr
- this.changeKeys = picsArr.concat(videos).concat(videoPics).concat(panoramas)
- console.log(this.changeKeys)
- this.$emit("change", this.changeKeys)
- },
- getArr(arr, name, type) {
- return arr.map(item => {
- return { "systemId": "dataPlatform", "name": name, "type": type, "key": item }
- })
- },
- //将父组件传来的数据进行分组
- fatherTochild() {
- this.panoramaArr = []
- this.videoArr = []
- this.videoPicArr = []
- this.picArrs = []
- if (this.keysArr instanceof Array) {
- this.keysArr.map(item => {
- if (item.type == 'panorama') {
- this.panoramaArr.push(item)
- } else if (item.type == "video") {
- this.videoArr.push(item)
- } else if (item.type == 'image_video') {
- this.videoPicArr.push(item)
- } else {
- this.picArrs.push(item)
- }
- })
- } else {
- this.panoramaArr = []
- this.videoArr = []
- this.videoPicArr = []
- this.picArrs = []
- }
- if (this.picArrs.length) {
- this.$nextTick(_ => {
- this.iframeSrc = process.env.BASE_URL + ":8890/photo-View.html"
- let iframe = document.getElementById("google_ads_frame3")
- console.log(iframe)
- iframe.onload = () => {
- console.log("onload")
- iframe.contentWindow.postMessage(this.picArrs, "*")
- }
- })
- }
- }
- },
- watch: {
- dialog: {
- deep: true,
- handler: function () {
- if (this.dialog.lookPic) {
- this.fatherTochild()
- }
- }
- }
- }
- };
- </script>
- <style>
- </style>
|