1

mayisheng

2022-08-15 81f54040c2cb65537c6c6e1db8358a39a57dea0d

 src/components/map/components/mapPopup.vue

@@ -1,10 +1,8 @@
<template>
    <div>
        <div id="map_popup_content">
            <div v-if="detailsPopup"
                 class="divForms-dom"
                 id="divFormsDomBox">
                <div style='width: 100%; height: 100%;'>
            <div v-if="detailsPopup" class="divForms-dom" id="divFormsDomBox">
                <div style="width: 100%; height: 100%">
                    <div class="divForms divForms-theme">
                        <div class="divForms-wrap">
                            <div class="area">
@@ -16,34 +14,43 @@
                                <div class="arrow-rb"></div>
                                <div class="label-wrap">
                                    <div class="title">
                                        {{stateName}}
                                        <img v-show="introduceText != null && introduceText != ''"
                                             @click="audioPlay"
                                             class="audio-control"
                                             src="/img/navicon/audio.png"
                                             alt="">
                                        <img @click="closeMapPopupBox"
                                             class="close-box"
                                             src="/img/navicon/close.png"
                                             alt="">
                                        {{ stateName }}
                                        <img
                                            v-show="introduceText != null && introduceText != ''"
                                            @click="audioPlay"
                                            class="audio-control"
                                            :src="audioImgUrl"
                                            alt
                                        />
                                        <img
                                            @click="closeMapPopupBox"
                                            class="close-box"
                                            src="/img/navicon/close.png"
                                            alt
                                        />
                                    </div>
                                    <div class="label-content">
                                        <div class="arc-bcg">
                                            <img :src="popupBgUrl"
                                                 alt="">
                                            <img :src="popupBgUrl" alt />
                                        </div>
                                        <div v-show="siteName != null && siteName != ''"
                                             class="site">
                                        <div
                                            v-show="siteName != null && siteName != ''"
                                            class="site"
                                        >
                                            <strong>地址：</strong>
                                            {{siteName}}
                                            {{ siteName }}
                                        </div>
                                        <div v-show="telephone != null && telephone != ''"
                                             class="phone">
                                        <div
                                            v-show="telephone != null && telephone != ''"
                                            class="phone"
                                        >
                                            <strong>电话：</strong>
                                            {{telephone}}
                                            {{ telephone }}
                                        </div>
                                        <div v-show="introduceText != null && introduceText != ''"
                                             class="introduce">
                                        <div
                                            v-show="introduceText != null && introduceText != ''"
                                            class="introduce"
                                        >
                                            <p ref="DomIntroduceText">
                                                <strong>介绍：</strong>
                                                <span v-html="introduceText"></span>
@@ -59,7 +66,7 @@
                                                    <i class="popup-icon start-nav deblurring"></i>
                                                    出发
                                                </li>
                                                <li @click="qrCodeClick">
                                                <li v-show="pupupQRUrl != ''" @click="qrCodeClick">
                                                    <i class="popup-icon qr-code-nav deblurring"></i>
                                                    二维码
                                                </li>
@@ -67,46 +74,64 @@
                                                    <i class="popup-icon atlas-nav deblurring"></i>
                                                    图集
                                                </li>
                                                <li v-show="panoramaUrl != null && panoramaUrl != ''"
                                                    @click="panoramaClick">
                                                    <i class="popup-icon live-action-nav deblurring"></i>
                                                <li
                                                    v-show="panoramaUrl != null && panoramaUrl != ''"
                                                    @click="panoramaClick"
                                                >
                                                    <i
                                                        class="popup-icon live-action-nav deblurring"
                                                    ></i>
                                                    实景
                                                </li>
                                                <li v-show="panoramaUrl != null && panoramaUrl != ''"
                                                    @click="monitorClick">
                                                <!-- v-show="panoramaUrl != null && panoramaUrl != ''" -->
                                                <li v-show="false" @click="monitorClick">
                                                    <i class="popup-icon monitor-nav deblurring"></i>
                                                    监控
                                                </li>
                                            </ul>
                                        </div>
                                        <div v-show="teachList.length > 0 || liveList.length > 0"
                                             class="arc-box">
                                        <div
                                            v-show="teachList.length > 0 || liveList.length > 0"
                                            class="arc-box"
                                        >
                                            <ul class="tab-btn">
                                                <li v-show="teachList.length > 0"
                                                    :class="{'on': tabBtnFlag == '教学科研行政'}"
                                                    @click="tabBtnClick('教学科研行政')">教学科研行政</li>
                                                <li v-show="liveList.length > 0"
                                                    :class="{'on': tabBtnFlag == '生活服务'}"
                                                    @click="tabBtnClick('生活服务')">生活服务</li>
                                                <li
                                                    v-show="teachList.length > 0"
                                                    :class="{ on: tabBtnFlag == '教学科研行政' }"
                                                    @click="tabBtnClick('教学科研行政')"
                                                >教学科研行政</li>
                                                <li
                                                    v-show="liveList.length > 0"
                                                    :class="{ on: tabBtnFlag == '生活服务' }"
                                                    @click="tabBtnClick('生活服务')"
                                                >生活服务</li>
                                            </ul>
                                            <div class="btm-content">
                                                <div :class="{'on': tabBtnFlag == '教学科研行政'}">
                                                <div :class="{ on: tabBtnFlag == '教学科研行政' }">
                                                    <ul>
                                                        <li v-for="(item, index) in teachList"
                                                        <li
                                                            v-for="(item, index) in teachList"
                                                            :key="index"
                                                            @click="mechanismDetailPopup(0, item)">
                                                            <i class="popup-icon location-icon deblurring"></i>
                                                            {{item}}
                                                            @click="mechanismDetailPopup(0, item)"
                                                        >
                                                            <i
                                                                class="popup-icon location-icon deblurring"
                                                            ></i>
                                                            {{ item }}
                                                        </li>
                                                    </ul>
                                                </div>
                                                <div :class="{'on': tabBtnFlag == '生活服务'}">
                                                <div :class="{ on: tabBtnFlag == '生活服务' }">
                                                    <ul>
                                                        <li v-for="(item, index) in liveList"
                                                        <li
                                                            v-for="(item, index) in liveList"
                                                            :key="index"
                                                            @click="mechanismDetailPopup(1, item)">
                                                            <i class="popup-icon location-icon deblurring"></i>
                                                            {{item}}
                                                            @click="mechanismDetailPopup(1, item)"
                                                        >
                                                            <i
                                                                class="popup-icon location-icon deblurring"
                                                            ></i>
                                                            {{ item }}
                                                        </li>
                                                    </ul>
                                                </div>
@@ -124,23 +149,47 @@
                </div>
            </div>

            <div v-if="panoramaPopup"
                 class="panorama-dom"
                 id="PanoramaBox">
                <div style="width: 100%; height: 100%;">
            <div
                v-if="panoramaPopup"
                class="panorama-dom"
                :class="{ 'change-full': fullscreen }"
                id="PanoramaBox"
            >
                <div style="width: 100%; height: 100%">
                    <div class="panorama-container">
                        <div class="panorama-wrap">
                            <div class="content-wrap">
                            <div
                                class="content-wrap"
                                :class="{ 'change-full': fullscreen }"
                                id="FullScreenBox"
                            >
                                <div class="title">
                                    {{stateName}}
                                    <img @click="closePanoramaPopupBox"
                                         class="close-box"
                                         src="/img/navicon/close.png"
                                         alt="">
                                    <img
                                        @click="returnDetailsPopup"
                                        class="return-btn"
                                        src="/img/icon/return.png"
                                        alt
                                    />
                                    {{ stateName }}
                                    <img
                                        @click="screen"
                                        class="full-srceen-btn"
                                        :src="fullScreenUrl"
                                        alt
                                    />
                                    <img
                                        @click="closePanoramaPopupBox"
                                        class="close-box"
                                        src="/img/navicon/close.png"
                                        alt
                                    />
                                </div>
                                <div class="content">
                                    <iframe :src="panoramaUrl"
                                            frameborder="0"></iframe>
                                    <iframe
                                        allowfullscreen="true"
                                        :src="panoramaUrl"
                                        frameborder="0"
                                    ></iframe>
                                </div>
                            </div>
                        </div>
@@ -149,26 +198,112 @@
                </div>
            </div>

            <div v-if="monitorPopup"
                 class="monitor-dom"
                 id="MonitorBox">
                <div style="width: 100%; height: 100%;">
            <div v-if="monitorPopup" class="monitor-dom" id="MonitorBox">
                <div style="width: 100%; height: 100%">
                    <div class="monitor-container">
                        <div class="monitor-wrap">
                            <div class="content-wrap">
                                <div class="title">
                                    {{stateName}}
                                    <img @click="closeMonitorPopupBox"
                                         class="close-box"
                                         src="/img/navicon/close.png"
                                         alt="">
                                    <img
                                        @click="returnDetailsPopup"
                                        class="return-btn"
                                        src="/img/icon/return.png"
                                        alt
                                    />
                                    {{ stateName }}
                                    <img
                                        @click="closeMonitorPopupBox"
                                        class="close-box"
                                        src="/img/navicon/close.png"
                                        alt
                                    />
                                </div>
                                <div class="content">
                                    <video :src="monitorUrl"
                                           controls
                                           autoplay></video>
                                    <play-video
                                        :sourceUrl="monitorUrl"
                                        @playStatus="changePlayStatus"
                                    ></play-video>
                                </div>
                            </div>
                        </div>
                        <div class="arrow"></div>
                    </div>
                </div>
            </div>

            <div v-if="addTagPopup" class="divForms-dom" id="AddTagBox">
                <div style="width: 100%; height: 100%">
                    <div class="divForms divForms-theme">
                        <div class="divForms-wrap">
                            <div class="area">
                                <div class="arrow-lt"></div>
                                <div class="b-t"></div>
                                <div class="b-r"></div>
                                <div class="b-b"></div>
                                <div class="b-l"></div>
                                <div class="arrow-rb"></div>
                                <div class="label-wrap">
                                    <div class="title">
                                        地图标记
                                        <img
                                            @click="closeAddTagBox"
                                            class="close-box"
                                            src="/img/navicon/close.png"
                                            alt
                                        />
                                    </div>
                                    <div class="add-tag-content">
                                        <div>
                                            <el-input v-model="addTagName" placeholder="请输入标签名称"></el-input>
                                        </div>
                                        <div>
                                            <el-button type="primary" @click="createTag">生成标记</el-button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="b-t-l"></div>
                            <div class="b-b-r"></div>
                        </div>
                        <div class="arrow"></div>
                    </div>
                </div>
            </div>

            <div v-if="labelLayerDataShow" class="divForms-dom" id="labelLayerid">
                <div style="width: 100%; height: 100%">
                    <div class="divForms divForms-theme">
                        <div class="divForms-wrap">
                            <div class="area">
                                <div class="arrow-lt"></div>
                                <div class="b-t"></div>
                                <div class="b-r"></div>
                                <div class="b-b"></div>
                                <div class="b-l"></div>
                                <div class="arrow-rb"></div>
                                <div class="label-wrap">
                                    <div class="title">
                                        {{ nowlabelLayerData.name }}
                                        <img
                                            @click="closelabelLayerid"
                                            class="close-box"
                                            src="/img/navicon/close.png"
                                            alt
                                        />
                                    </div>
                                    <div class="add-tag-content" style="height: 250px">
                                        <!-- data:image/png;base64, -->
                                        <img
                                            :src="nowlabelLayerData.qrcode"
                                            alt
                                            class="labelLayeridewm"
                                            style="width: 250px; height: 250px"
                                        />
                                    </div>
                                </div>
                            </div>
                            <div class="b-t-l"></div>
                            <div class="b-b-r"></div>
                        </div>
                        <div class="arrow"></div>
                    </div>
@@ -176,58 +311,390 @@
            </div>
        </div>

        <!-- 二维码弹框相关 -->
        <el-dialog title="场景二维码"
                   :visible.sync="QRCodeFlag"
                   :modal="false"
                   :modal-append-to-body="false"
                   width='44%'>
            <div style="margin: 0; position: relative; width: 100%; height: 352px;">
                <img width="260"
                     :src="pupupQRUrl"
                     alt=""
                     style="position: absolute;
                    top: 0;
                    left: 0;
                    right: 0;
                    bottom: 0;
                    margin: auto">
                <div style="position: absolute; bottom: 0; width: 100%; line-height: 36px; text-align: center;">
                    (右键另存为图片)
        <!-- 新增编辑标签 -->
        <div v-if="addIconsLayerIconPopup" class="monitor-dom add-sign-box-style" id="leftNavsAdd">
            <div style="width: 100%; height: 100%">
                <div class="divForms divForms-theme">
                    <div class="divForms-wrap">
                        <div class="area">
                            <div class="arrow-lt"></div>
                            <div class="b-t"></div>
                            <div class="b-r"></div>
                            <div class="b-b"></div>
                            <div class="b-l"></div>
                            <div class="arrow-rb"></div>
                            <div class="label-wrap">
                                <div class="title">
                                    <el-input
                                        v-model="addIconFromcolumn[0].value"
                                        placeholder="请输入标签名称"
                                        class="addIconFromInput"
                                    >
                                        <template slot="prepend">标题:</template>
                                    </el-input>
                                    <img
                                        @click="closeaddIconsLayerIconPopup"
                                        class="close-box"
                                        src="/img/navicon/close.png"
                                        alt
                                    />
                                </div>
                                <div class="add-tag-content">
                                    <div class="addIconsLayer">
                                        <div
                                            :class="[
                        'addIconsLayerinimgs',
                        ourImages.length > 3 ? 'isOverImgs' : '',
                      ]"
                                        >
                                            <!-- action="https://jsonplaceholder.typicode.com/posts/" -->
                                            <el-upload
                                                :action="
                          apiUrls +
                          '/blade-resource/oss/endpoint/put-files-talk'
                        "
                                                list-type="picture-card"
                                                :on-preview="handlePictureCardPreview"
                                                :on-remove="handleRemove"
                                                :on-success="onsuccess"
                                            >
                                                <i class="el-icon-plus"></i>
                                            </el-upload>
                                            <el-dialog
                                                :visible.sync="dialogVisible"
                                                :modal-append-to-body="false"
                                                :append-to-body="true"
                                            >
                                                <img width="100%" :src="dialogImageUrl" alt />
                                            </el-dialog>
                                        </div>
                                        <div
                                            class="addIconsLayerin"
                                            v-for="(item, index) in addIconFromcolumn"
                                            :key="index"
                                            v-show="index != 0"
                                        >
                                            <el-input
                                                v-model="item.value"
                                                :placeholder="'请输入' + item.label"
                                                class="addIconFromInput"
                                                :disabled="index == 2 || index == 3"
                                            >
                                                <template slot="prepend">{{ item.label }}:</template>
                                            </el-input>

                                            <el-dropdown
                                                v-show="index == 2 || index == 3"
                                                @command="chouseAddicon"
                                            >
                                                <span class="el-dropdown-link">
                                                    <i class="el-icon-arrow-down el-icon--right"></i>
                                                </span>
                                                <el-dropdown-menu slot="dropdown">
                                                    <el-dropdown-item
                                                        v-for="(itemc, indexc) in item.chouse"
                                                        :key="indexc"
                                                        :command="{ index: index, indexc: indexc }"
                                                    >{{ itemc.value }}</el-dropdown-item>
                                                    <!-- @click="chouseAddicon(index, indexc)" -->
                                                </el-dropdown-menu>
                                            </el-dropdown>
                                        </div>
                                    </div>
                                    <div class="addIconsLayerBut">
                                        <el-button type="primary" @click="saveIconsLayer">保存标签</el-button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="b-t-l"></div>
                        <div class="b-b-r"></div>
                    </div>
                    <div class="arrow"></div>
                </div>
            </div>
        </div>

        <!-- 二维码弹框相关 -->
        <el-dialog
            title="场景二维码"
            :visible.sync="QRCodeFlag"
            :modal="false"
            :modal-append-to-body="false"
            width="44%"
        >
            <div style="margin: 0; position: relative; width: 100%; height: 352px">
                <img
                    width="260"
                    :src="pupupQRUrl"
                    alt
                    style="
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
          "
                />
                <div
                    style="
            position: absolute;
            bottom: 0;
            width: 100%;
            line-height: 36px;
            text-align: center;
          "
                >(右键另存为图片)</div>
            </div>
        </el-dialog>

        <el-image v-show="false"
                  style="width: 100px; height: 100px"
                  :src="popupImgAtlas[0]"
                  :preview-src-list="popupImgAtlas"
                  ref="popupImgs">
        </el-image>
        <el-image
            v-show="false"
            style="width: 100px; height: 100px"
            :src="popupImgAtlas[0]"
            :preview-src-list="popupImgAtlas"
            ref="popupImgs"
        ></el-image>
    </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { getMechanismDetail } from '@/api/pc/public/arc'
import { setlabel } from '@/api/pc/label'
import { add } from '@/api/pc/leftNav/index'

export default {
    name: 'mapPopup',

    data () {
        return {
            DC: null,
            ourImages: [],
            dialogImageUrl: '',
            dialogVisible: false,
            apiUrls: null,
            tabBtnFlag: '教学科研行政',
            QRCodeFlag: false,
            audioImgUrl: '/img/icon/close-video.png',
            audioSource: '',
            audioFlag: false,
            audioCourse: false,
            audioSynth: null,
            audioMsg: null
            audioMsg: null,
            fullscreen: false,
            fullScreenUrl: '/img/icon/bigScreen.png',
            addTagName: '',
            addIconFromcolumn: [
                // 顺序不要随便换
                {
                    label: '名称',
                    prop: 'mechanismname',
                    value: ''
                },
                {
                    label: '电话',
                    prop: 'telephone',
                    value: ''
                },
                {
                    label: '所属建筑',
                    prop: 'type',
                    dicUrl: '/api/blade-system/dict-biz/dictionary?code=building',
                    props: {
                        label: 'dictValue',
                        value: 'dictKey'
                    },
                    value: '红旗校区',
                    valueid: '1',
                    chouse: [
                        {
                            id: '1',
                            value: '红旗校区'
                        },
                        {
                            id: '2',
                            value: '黄河路'
                        },
                        {
                            id: '3',
                            value: '科学园'
                        },
                        {
                            id: '4',
                            value: '土木楼'
                        },
                        {
                            id: '5',
                            value: '三江校区'
                        }
                    ]
                },
                {
                    label: '所属社区',
                    searchLabelWidth: '110',
                    value: '行政办公',
                    valueid: '1',
                    prop: 'campus',
                    dicUrl: '/api/blade-system/dict-biz/dictionary?code=campus',
                    chouse: [
                        {
                            id: '1',
                            value: '行政办公'
                        },
                        {
                            id: '2',
                            value: '教学科研'
                        },
                        {
                            id: '3',
                            value: '社区场馆'
                        },
                        {
                            id: '4',
                            value: '学生宿舍'
                        },
                        {
                            id: '5',
                            value: '文化风景'
                        },
                        {
                            id: '6',
                            value: '家属住宅'
                        },
                        {
                            id: '7',
                            value: '主要楼宇'
                        }
                    ]
                },

                {
                    label: '介绍',
                    prop: 'introduce',
                    value: '',
                    component: 'AvueUeditor',
                    options: {
                        action: '/api/blade-resource/oss/endpoint/put-file',
                        props: {
                            res: 'data',
                            url: 'link'
                        }
                    },
                    hide: true,
                    minRows: 5,
                    span: 24
                },
                {
                    label: '地址',
                    hide: true,
                    prop: 'address',
                    value: ''
                },
                {
                    label: '全景地址',
                    prop: 'panoramaurl',
                    value: ''
                },
                {
                    label: '监控地址',
                    hide: true,
                    prop: 'videourl',
                    value: ''
                },
                {
                    label: '网站地址',
                    prop: 'websiteurl',
                    value: ''
                },
                {
                    label: '经度',
                    prop: 'jd',
                    value: '',
                    rules: [
                        {
                            required: true,
                            message: '请输入经度',
                            trigger: 'blur'
                        }
                    ]
                },
                {
                    label: '纬度',
                    prop: 'wd',
                    value: '',
                    rules: [
                        {
                            required: true,
                            message: '请输入纬度',
                            trigger: 'blur'
                        }
                    ]
                },
                {
                    label: '偏航角',
                    addDisplay: false,
                    hide: true,
                    prop: 'heading',
                    value: 0
                },
                {
                    label: '俯仰角',
                    addDisplay: false,
                    hide: true,
                    prop: 'pitch',
                    value: -90
                },
                {
                    label: '翻转角',
                    addDisplay: false,
                    hide: true,
                    prop: 'roll',
                    value: 0
                },

                {
                    label: '高度',
                    hide: true,
                    addDisplay: false,
                    prop: 'gd',
                    value: 0
                }

                // {
                //   label: "图片",
                //   prop: "tpurl",
                //   value: "",
                //   // dataType: 'string',
                //   type: "upload",
                //   propsHttp: {
                //     res: "data",
                //     url: "link",
                //   },
                //   span: 10,
                //   listType: "picture-card",
                //   tip: "只能上传jpg/png文件，且不超过500kb",
                //   action: "/api/blade-resource/oss/endpoint/put-file",
                // },
                // {
                //   label: "二维码",
                //   prop: "codeurl",
                //   value: "",
                //   type: "upload",
                //   listType: "picture-card",
                //   //dataType: 'string',
                //   action: "/api/blade-resource/oss/endpoint/put-file",
                //   propsHttp: {
                //     res: "data",
                //     url: "link",
                //   },
                //   span: 10,
                // },
            ]
        }
    },
    computed: {
        ...mapGetters([
            'viewer',
            'popupBgUrl',
            'pupupQRUrl',
            // 终点
@@ -260,23 +727,62 @@
            'teachList',
            // 科研
            'liveList',
            // 社区内导航的显示关闭
            'campusNavFlag'
            // 校区内导航的显示关闭
            'campusNavFlag',
            'addTagPopup',
            'addTagPosition',
            // 自定义标签弹窗
            'labelLayerDataShow',
            'nowlabelLayerData',
            'addIconsLayerIconPopup', // 自定义标签编辑窗口
            'addIconsLayerIconPosition' // 自定义标签坐标
        ])
    },
    created () {
        this.DC = global.DC
        var that = this
        this.apiUrls = window.$apiUrls

        this.audioSynth = window.speechSynthesis
        this.audioMsg = new window.SpeechSynthesisUtterance()

        this.audioMsg.onend = function () {
            this.audioSynth.cancel()
            this.audioFlag = false
            this.audioCourse = false
        }
        this.$nextTick(() => {
            this.audioMsg.onend = function () {
                that.audioSynth.cancel()
                that.audioFlag = false
                that.audioCourse = false
                that.audioImgUrl = '/img/icon/close-video.png'
            }
        })
    },
    watch: {
        addIconsLayerIconPopup () {
            if (this.addIconsLayerIconPopup) {
                this.addIconFromcolumn[9].value = this.addIconsLayerIconPosition[0]
                this.addIconFromcolumn[10].value = this.addIconsLayerIconPosition[1]
            } else {
                for (const k in this.addIconFromcolumn) {
                    if (k == 2) {
                        this.addIconFromcolumn[k].value = '红旗校区'
                        this.addIconFromcolumn[k].valueid = '1'
                        continue
                    }
                    if (k == 3) {
                        this.addIconFromcolumn[k].value = '行政办公'
                        this.addIconFromcolumn[k].valueid = '1'
                        continue
                    }
                    this.addIconFromcolumn[k].value = ''
                }
                this.ourImages = []
                this.$store.commit('set_closeMapClick', false) // 开启其他操作
            }
        },
        addTagPopup () {
            if (!this.addTagPopup) {
                // console.log("取消", "see");
                this.$store.commit('set_closeMapClick', false)
            }
        },
        introduceText: {
            immediate: true,
            handler (newQuestion, oldQuestion) {
@@ -285,6 +791,7 @@
                    this.audioSynth.cancel()
                    this.audioFlag = false
                    this.audioCourse = false
                    this.audioImgUrl = '/img/icon/close-video.png'
                }
            }
        },
@@ -308,20 +815,108 @@
            immediate: true,
            handler (newCode, oldCode) {
                if (newCode == false) {
                    this.audioSynth.cancel()
                    if (this.audioSynth != null) {
                        this.audioSynth.cancel()
                    }
                    this.audioFlag = false
                    this.audioCourse = false
                } else {
                    if (this.audioFlag == true) {
                        this.audioSynth.cancel()
                        if (this.audioSynth != null) {
                            this.audioSynth.cancel()
                        }
                        this.audioFlag = false
                        this.audioCourse = false
                        this.audioImgUrl = '/img/icon/close-video.png'
                    }
                }
            }
        }
    },
    methods: {
        onsuccess (response, file, fileList) {
            this.ourImages = fileList
        },
        handleRemove (file, fileList) {
            this.ourImages = fileList
        },
        handlePictureCardPreview (file) {
            this.dialogImageUrl = file.url
            this.dialogVisible = true
        },
        chouseAddicon (item) {
            this.addIconFromcolumn[item.index].value =
                this.addIconFromcolumn[item.index].chouse[item.indexc].value
            this.addIconFromcolumn[item.index].valueid =
                this.addIconFromcolumn[item.index].chouse[item.indexc].id
        },
        closeaddIconsLayerIconPopup () {
            this.$store.commit('SET_addIconsLayerIconPopup', false)
        },
        saveIconsLayer () {
            var imgs = []
            // console.log("see", this.ourImages);
            // return;
            for (var k in this.ourImages) {
                imgs.push(this.ourImages[k].response)
            }
            const d = {
                tpurl: imgs.join(','),
                mechanismname: this.addIconFromcolumn[0].value,
                telephone: this.addIconFromcolumn[1].value,
                type: this.addIconFromcolumn[2].valueid,
                campus: this.addIconFromcolumn[3].valueid,
                introduce: this.addIconFromcolumn[4].value,
                address: this.addIconFromcolumn[5].value,
                panoramaurl: this.addIconFromcolumn[6].value,
                videourl: this.addIconFromcolumn[7].value,
                websiteurl: this.addIconFromcolumn[8].value,
                jd: this.addIconFromcolumn[9].value,
                wd: this.addIconFromcolumn[10].value,
                heading: this.addIconFromcolumn[11].value,
                pitch: this.addIconFromcolumn[12].value,
                roll: this.addIconFromcolumn[13].value,
                gd: this.addIconFromcolumn[14].value
            }
            // console.log(d, "see3");
            // return;
            // this.$store.commit("set_closeMapClick", false); //开启其他操作
            add(d).then(
                (res) => {
                    // console.log(res);
                    if (res.data.code == 200) {
                        this.$message({
                            type: 'success',
                            message: '操作成功!'
                        })
                    } else {
                        this.$message({
                            type: 'error',
                            message: '新增失败!'
                        })
                    }

                    this.closeaddIconsLayerIconPopup()
                },
                (error) => {
                    window.console.log(error)
                }
            )
        },
        screen () {
            if (this.fullscreen) {
                this.fullScreenUrl = '/img/icon/bigScreen.png'
                this.fullscreen = !this.fullscreen

                document.getElementById('pcElHeader').style.zIndex = 9999
            } else {
                this.fullScreenUrl = '/img/icon/smallScreen.png'
                this.fullscreen = !this.fullscreen

                document.getElementById('pcElHeader').style.zIndex = 9
            }
        },

        tabBtnClick (param) {
            this.tabBtnFlag = param
        },
@@ -329,13 +924,17 @@
        comeHereClick () {
            this.$store.commit('SET_COMENAME', this.stateName)
            this.$store.commit('SET_TERMINUS', this.pointPosition)
            if (this.campusNavFlag == false) this.$store.commit('SET_CAMPUSNAVFLAG', true)
            if (this.campusNavFlag == false) {
                this.$store.commit('SET_CAMPUSNAVFLAG', true)
            }
        },

        getToHereClick () {
            this.$store.commit('SET_GETTONAME', this.stateName)
            this.$store.commit('SET_STARTINGPOINT', this.pointPosition)
            if (this.campusNavFlag == false) this.$store.commit('SET_CAMPUSNAVFLAG', true)
            if (this.campusNavFlag == false) {
                this.$store.commit('SET_CAMPUSNAVFLAG', true)
            }
        },

        qrCodeClick () {
@@ -351,17 +950,19 @@
                this.audioSynth.cancel()
                this.audioFlag = false
                this.audioCourse = false
                this.audioImgUrl = '/img/icon/close-video.png'
            }

            // eslint-disable-next-line new-cap
            var positions = this.DC.Transform.transformWGS84ToCartesian(new this.DC.Position.fromArray(this.pointPosition))
            this.viewer.scene.globe.depthTestAgainstTerrain = false
            var positions = global.DC.Transform.transformWGS84ToCartesian(
                // eslint-disable-next-line new-cap
                new global.DC.Position.fromArray(this.pointPosition)
            )

            // eslint-disable-next-line no-unused-vars
            var panorama = new this.DC.PanoramaBox(this.viewer, {
            var panorama = new global.DC.PanoramaBox(global.viewer, {
                domId: 'PanoramaBox',
                position: [
                    positions
                ]
                position: [positions]
            })

            this.$store.commit('SET_DETAILSPOPUP', false)
@@ -374,20 +975,43 @@
                this.audioSynth.cancel()
                this.audioFlag = false
                this.audioCourse = false
                this.audioImgUrl = '/img/icon/close-video.png'
            }
            // eslint-disable-next-line new-cap
            var positions = this.DC.Transform.transformWGS84ToCartesian(new this.DC.Position.fromArray(this.pointPosition))
            this.viewer.scene.globe.depthTestAgainstTerrain = false
            var positions = global.DC.Transform.transformWGS84ToCartesian(
                // eslint-disable-next-line new-cap
                new global.DC.Position.fromArray(this.pointPosition)
            )
            // eslint-disable-next-line no-unused-vars
            var monitor = new this.DC.PanoramaBox(this.viewer, {
            var monitor = new global.DC.PanoramaBox(global.viewer, {
                domId: 'MonitorBox',
                position: [
                    positions
                ]
                position: [positions]
            })
            this.$store.commit('SET_PANORAMAPOPUP', false)
            this.$store.commit('SET_DETAILSPOPUP', false)
            this.$store.commit('SET_MONITORPOPUP', true)
        },

        returnDetailsPopup () {
            var positions = global.DC.Transform.transformWGS84ToCartesian(
                // eslint-disable-next-line new-cap
                new global.DC.Position.fromArray(this.pointPosition)
            )

            // eslint-disable-next-line no-unused-vars
            var divBox = new global.DC.PanoramaBox(global.viewer, {
                domId: 'divFormsDomBox',
                position: [positions]
            })

            global.viewer.zoomToPosition(
                // eslint-disable-next-line new-cap
                new global.DC.Position.fromArray(this.pointPosition)
            )

            this.$store.commit('SET_DETAILSPOPUP', true)
            this.$store.commit('SET_MONITORPOPUP', false)
            this.$store.commit('SET_PANORAMAPOPUP', false)
        },

        closeMapPopupBox () {
@@ -395,8 +1019,68 @@
                this.audioSynth.cancel()
                this.audioFlag = false
                this.audioCourse = false
                this.audioImgUrl = '/img/icon/close-video.png'
            }
            this.$store.commit('SET_DETAILSPOPUP', false)
        },

        // 新增标记相关事件
        closeAddTagBox () {
            this.$store.commit('SET_ADDTAGPOPUP', false)
        },
        closelabelLayerid () {
            this.$store.commit('openLabelLayer', {
                show: false
            })
        },
        createTag () {
            var that = this

            //   console.log(this.RemoveTheBlank(this.addTagName));

            if (this.RemoveTheBlank(this.addTagName) == '') {
                this.$message('请输入标签名称')
                return
            }

            this.$store.commit('SET_ADDTAGPOPUP', false)

            // 2022.3.2对接接口
            // 新增标签
            const data = {
                name: this.RemoveTheBlank(this.addTagName),
                jd: this.addTagPosition.lng,
                wd: this.addTagPosition.lat
            }
            //   console.log(data);
            const oks = setTimeout(() => {
                that.$message({
                    message: '新增标签失败',
                    type: 'warning'
                })
            }, 5000)
            setlabel(data).then((res) => {
                clearTimeout(oks)
                if (res.data.code == 200) {
                    doit()
                    that.$message({
                        message: '新增标签成功',
                        type: 'success'
                    })
                } else {
                    that.$message({
                        message: '新增标签失败',
                        type: 'warning'
                    })
                }
                that.addTagName = ''
            })
            const doit = () => {
                that.$store.dispatch('addLabelLayerIcon', {
                    // list: [data],
                    add: true
                })
            }
        },

        closePanoramaPopupBox () {
@@ -409,25 +1093,32 @@
            this.$store.commit('SET_MONITORPOPUP', false)
        },

        changePlayStatus (status) { // 获取子组件的播放状态
            console.log(status)
        },

        audioPlay () {
            if (this.audioFlag == false) {
                this.audioMsg.text = this.audioSource
                this.audioSynth.speak(this.audioMsg)
                this.audioFlag = true
                this.audioCourse = true
                this.audioImgUrl = '/img/icon/start-video.png'
            } else {
                if (this.audioCourse == true) {
                    this.audioSynth.pause()
                    this.audioCourse = false
                    this.audioImgUrl = '/img/icon/close-video.png'
                } else {
                    this.audioSynth.resume()
                    this.audioCourse = true
                    this.audioImgUrl = '/img/icon/start-video.png'
                }
            }
        },

        mechanismDetailPopup (num, param) {
            getMechanismDetail({ num: num, mechanismName: param }).then(res => {
            getMechanismDetail({ num: num, mechanismName: param }).then((res) => {
                var result = res.data.data
                this.$store.commit('CLEAR_ALL', null)

@@ -435,7 +1126,14 @@

                this.$store.commit('SET_POPUPBGURL', imgArr[0])
                this.$store.commit('SET_POPUPQRURL', result.codeurl)
                this.$store.commit('SET_POINTPOSITION', [Number(result.jd), Number(result.wd), Number(result.gd), Number(result.heading), Number(result.pitch), Number(result.roll)])
                this.$store.commit('SET_POINTPOSITION', [
                    Number(result.jd),
                    Number(result.wd),
                    Number(result.gd),
                    Number(result.heading),
                    Number(result.pitch),
                    Number(result.roll)
                ])
                this.$store.commit('SET_STATENAME', result.mechanismname)
                this.$store.commit('SET_SITENAME', result.address)
                this.$store.commit('SET_TELEPHONE', result.telephone)
@@ -447,33 +1145,81 @@
                }

                this.newPopup(result)
                this.viewer.flyToPosition(
                    new this.DC.Position(Number(result.jd), Number(result.wd), 300, Number(result.heading), Number(result.pitch), Number(result.roll)),
                    function () {
                    },
                global.viewer.flyToPosition(
                    new global.DC.Position(
                        Number(result.jd),
                        Number(result.wd),
                        300,
                        Number(result.heading),
                        Number(result.pitch),
                        Number(result.roll)
                    ),
                    function () { },
                    3
                )
            })
        },

        newPopup (item) {
            const position = this.DC.Transform.transformWGS84ToCartesian(new this.DC.Position(Number(item.jd), Number(item.wd), Number(item.gd)))
            const position = global.DC.Transform.transformWGS84ToCartesian(
                new global.DC.Position(
                    Number(item.jd),
                    Number(item.wd),
                    Number(item.gd)
                )
            )
            // eslint-disable-next-line no-unused-vars
            var popup = new this.DC.DivForms(this.viewer, {
            var popup = new global.DC.DivForms(global.viewer, {
                domId: 'divFormsDomBox',
                position: [
                    position
                ]
                position: [position]
            })

            this.$store.commit('SET_PANORAMAPOPUP', false)
            this.$store.commit('SET_MONITORPOPUP', false)
            this.$store.commit('SET_DETAILSPOPUP', true)
        },

        /**
         * 删除左右两端的空格
         */
        RemoveTheBlank (str) {
            return str.replace(/(^\s*)|(\s*$)/g, '')
        }
    }

}
</script>

<style>
<style lang="scss">
.labelLayeridewm {
    width: 250px !important;
    height: 250px !important;
}

.add-sign-box-style {
    input:-moz-placeholder,
    textarea:-moz-placeholder {
        color: #fff;
    }
    input:-ms-input-placeholder,
    textarea:-ms-input-placeholder {
        color: #fff;
    }
    input::-webkit-input-placeholder,
    textarea::-webkit-input-placeholder {
        color: #fff;
    }

    .addIconsLayerinimgs {
        margin-top: 4px;
    }

    .addIconsLayerin {
        padding: 0 10px;
    }
}
.introduce p {
    padding: 0px;
    height: 300px;
    overflow-y: scroll;
}
</style>