1

mayisheng

2022-08-15 81f54040c2cb65537c6c6e1db8358a39a57dea0d

 src/components/mobileLeftNav/index.vue

@@ -33,15 +33,16 @@
    getListcat // 出入-AED-停车场
} from '@/api/mobile/piont/index'
import { getListVideo } from '@/api/mobile/monitor/index'

window.tagLayer = null
window.wayLayer = null
window.sceneLayer = null
window.videoLayer = null
window.activityLayer = null
window.aedLayer = null
window.parkLayer = null
window.comeLayer = null
const layers = {
    mobileTagLayer: null,
    wayLayer: null,
    sceneLayer: null,
    videoLayer: null,
    activityLayer: null,
    aedLayer: null,
    parkLayer: null,
    comeLayer: null
}
export default {
    name: 'mobileLeftNav',
    watch: {
@@ -63,22 +64,22 @@
            if (this.seeRight) {
                this.leftNavData[0].flag = false
                this.leftNavData[0].img = this.leftNavData[0].checked
                window[this.leftNavData[0].layer].show = true
                layers[this.leftNavData[0].layer].show = true
            } else {
                const lnd = this.leftNavData
                for (const k in lnd) {
                    if (window[this.leftNavData[k].layer]._show) {
                    if (layers[this.leftNavData[k].layer]._show) {
                        // console.log(lnd[k].label, "所有开启");
                        this.leftNavData[k].flag = false
                        this.leftNavData[k].img = this.leftNavData[k].normal
                        window[this.leftNavData[k].layer].show = false
                        layers[this.leftNavData[k].layer].show = false
                    }
                }
            }
        }
    },
    computed: {
        ...mapGetters(['iconHide', 'dimensionData', 'seeRight'])
        ...mapGetters(['iconHide', 'dimensionData', 'seeRight', 'pinchFlag'])
    },
    data () {
        return {
@@ -97,9 +98,9 @@
                    img: '/img/leftnav/tag-checked.png',
                    normal: '/img/leftnav/tag.png',
                    checked: '/img/leftnav/tag-checked.png',
                    layer: 'tagLayer',
                    layer: 'mobileTagLayer',
                    methods: getListarchitecture1,
                    imgSrc: 'https://map.hit.edu.cn/images/tarrow_xq.png'
                    imgSrc: '/img/icon/tarrow_xq.png'
                    // imgSrc: "img/mobile/pink.png",
                },
                {
@@ -166,7 +167,7 @@
                    layer: 'parkLayer',
                    methods: getListcat,
                    type: 11,
                    imgSrc: 'https://map.hit.edu.cn/images/p-biao.png'
                    imgSrc: '/img/icon/p-biao.png'
                    // imgSrc: "img/mobile/popcorn.png",
                },
                {
@@ -183,7 +184,7 @@
                }
            ]
            //   viewer: null,
            //   tagLayer: null,
            //   mobileTagLayer: null,
            //   wayLayer: null,
            //   sceneLayer: null,
            //   videoLayer: null,
@@ -210,24 +211,24 @@
                    // console.log(lnd[k].label, "当前点击");
                    continue
                }
                if (window[this.leftNavData[k].layer]._show) {
                if (layers[this.leftNavData[k].layer]._show) {
                    // console.log(lnd[k].label, "所有开启");
                    this.leftNavData[k].flag = false
                    this.leftNavData[k].img = this.leftNavData[k].normal
                    window[this.leftNavData[k].layer].show = false
                    layers[this.leftNavData[k].layer].show = false
                }
            }

            item.flag = !item.flag
            if (item.flag == true) {
                item.img = item.checked
                window[item.layer].show = true
                layers[item.layer].show = true
                // console.log("飞入");
                // this.flyTo(item);
                this.$store.dispatch('closeMobileWindowsDom') // 关闭弹窗
            } else {
                item.img = item.normal
                window[item.layer].show = false
                layers[item.layer].show = false
            }
        },
        // flyTo(item) {
@@ -257,172 +258,183 @@
        //     noOpen: true,
        //   });
        // },
        overlayClick (data, billboard, label, k, ourD) {
            const that = this
            billboard.on(global.DC.MouseEventType.CLICK, (e) => {
                if (that.pinchFlag == true) {
                    return
                }
                const d = {
                    name:
                        data[k].mechanismname ||
                        data[k].roadname ||
                        data[k].vrname ||
                        (ourD.label == '监控' ? '监控' : '无显示名字'),
                    bgImg: data[k].tpurl,
                    video: ourD.label == '监控' ? data[k].vrurl : '',
                    from: 'labels',
                    introduce: data[k].introduce,
                    panoramaurl: ourD.label == '实景' ? data[k].vrurl : ''
                }
                // 定制化窗体
                that.openPopupS(
                    e.position,
                    [e.overlay._position._lng, e.overlay._position._lat],
                    d
                )
            })
            label.on(global.DC.MouseEventType.CLICK, (e) => {
                if (that.pinchFlag == true) {
                    return
                }
                const d = {
                    name:
                        data[k].mechanismname ||
                        data[k].roadname ||
                        (ourD.label == '监控' ? '监控' : '无显示名字'),
                    bgImg: data[k].tpurl,
                    video: data[k].videourl || '',
                    from: 'labels',
                    introduce: data[k].introduce,
                    panoramaurl: data[k].panoramaurl
                }
                // 定制化窗体
                that.openPopupS(
                    e.position,
                    [e.overlay._position._lng, e.overlay._position._lat],
                    d
                )
            })
        },
        initialize () {
            var that = this
            global.viewer.scene.globe.depthTestAgainstTerrain = false
            window.tagLayer = new global.DC.HtmlLayer('tagLayer')
            global.viewer.addLayer(tagLayer)
            layers.mobileTagLayer = new global.DC.VectorLayer('mobileTagLayer')
            global.viewer.addLayer(layers.mobileTagLayer)

            window.wayLayer = new global.DC.HtmlLayer('wayLayer')
            global.viewer.addLayer(wayLayer)
            layers.wayLayer = new global.DC.VectorLayer('wayLayer')
            global.viewer.addLayer(layers.wayLayer)

            // sceneLayer = new global.DC.VectorLayer("sceneLayer");
            window.sceneLayer = new global.DC.HtmlLayer('sceneLayer')
            global.viewer.addLayer(sceneLayer)
            layers.sceneLayer = new global.DC.VectorLayer('sceneLayer')
            global.viewer.addLayer(layers.sceneLayer)

            window.videoLayer = new global.DC.HtmlLayer('videoLayer')
            global.viewer.addLayer(videoLayer)
            layers.videoLayer = new global.DC.VectorLayer('videoLayer')
            global.viewer.addLayer(layers.videoLayer)

            // activityLayer = new global.DC.VectorLayer("activityLayer");
            window.activityLayer = new global.DC.HtmlLayer('activityLayer')
            global.viewer.addLayer(activityLayer)
            layers.activityLayer = new global.DC.VectorLayer('activityLayer')
            global.viewer.addLayer(layers.activityLayer)

            // aedLayer = new global.DC.VectorLayer("aedLayer");
            window.aedLayer = new global.DC.HtmlLayer('aedLayer')
            global.viewer.addLayer(aedLayer)
            layers.aedLayer = new global.DC.VectorLayer('aedLayer')
            global.viewer.addLayer(layers.aedLayer)

            window.parkLayer = new global.DC.HtmlLayer('parkLayer')
            global.viewer.addLayer(parkLayer)
            layers.parkLayer = new global.DC.VectorLayer('parkLayer')
            global.viewer.addLayer(layers.parkLayer)

            // comeLayer = new global.DC.VectorLayer("comeLayer");
            window.comeLayer = new global.DC.HtmlLayer('comeLayer')
            global.viewer.addLayer(comeLayer)
            layers.comeLayer = new global.DC.VectorLayer('comeLayer')
            global.viewer.addLayer(layers.comeLayer)

            const ourNum = that.leftNavData.length
            for (let n = 0; n < ourNum; n++) {
                const ourD = this.leftNavData[n]
                const d = ourD.type ? { lifetype: ourD.type } : {}
                ourD.methods(d).then((res) => {
                    let dom
                    const data = res.data.data
                    let imgUrl = null
                    let sateName = null
                    let data = null

                    if (ourD.label == '监控' || ourD.label == '实景') {
                        data = res.data.data.records
                    } else {
                        data = res.data.data
                    }

                    const position = that.changePoiton(data)
                    const num = data.length
                    for (let k = 0; k < num; k++) {
                        sateName = data[k].mechanismname
                        if (ourD.label == '标签') {
                            dom = `
                        <div class="tag-entitys-box">
                            <div class="tag-content">
                               ${data[k].mechanismname}
                            </div>
                            <div class="tag-angle-content">
                                <img src="${ourD.imgSrc}">
                            </div>
                        </div>
                    `
                            imgUrl = '/img/icon/m-t.png'
                        } else if (ourD.label == '道路') {
                            // <div  class="way-title" style="border: white 1px solid; padding-left: 2px;font-size: 12px; background: #0066ff;  width: 12px;line-height: 13px; padding:2px 1px 2px 1px; color:white;">
                            //    ${data[k].mechanismname}
                            // </div>
                            dom = `
                        <div  class="way-entitys-box">
                            <div  class="way-title" style="border: white 1px solid; padding-left: 2px;font-size: 12px; background: #0066ff;  width: 12px;line-height: 13px; padding:2px 1px 2px 1px; color:white;">
                                 ${data[k].roadname}
                            </div>
                            <div  class="way-sign-box">
                                <img src="https://map.hit.edu.cn/images/roadsign3.png">
                            </div>
                        </div>
                    `
                            imgUrl = '/img/icon/m-w.png'
                            sateName = data[k].roadname
                        } else if (ourD.label == '实景') {
                            // <div  class="way-title" style="border: white 1px solid; padding-left: 2px;font-size: 12px; background: #0066ff;  width: 12px;line-height: 13px; padding:2px 1px 2px 1px; color:white;">
                            //    ${data[k].mechanismname}
                            // </div>
                            dom = `
                        <div class="scene-entitys-box">
                            <div>${data[k].mechanismname}</div>
                            <img src="/img/leftnav/map-panorama.png" alt="">
                        </div>
                        `
                            imgUrl = '/img/icon/m-s.png'
                            sateName = data[k].vrname
                        } else if (ourD.label == 'AED') {
                            dom = `
                        <div class="mobiletag-entitys-box">
                            <div class="tag-content">
                               ${data[k].mechanismname}
                            </div>
                            <div class="tag-angle-content">
                                <img src="${ourD.imgSrc}">
                            </div>
                        </div>
                    `
                            imgUrl = null
                        } else if (ourD.label == '停车') {
                            dom = `
                        <div class="park-entitys-box">
                            <div class="park-title" alt="${data[k].mechanismname}">
                            </div>
                            <div class="park-sign-box">
                                <div>
                                    <img src="https://map.hit.edu.cn/images/p-biao.png" width="14" height="14" alt="${data[k].mechanismname}" title="${data[k].mechanismname}">
                                </div>
                                <div>
                                    <img src="https://map.hit.edu.cn/images/roadsign.png" width="5" height="21">
                                </div>
                            </div>
                        </div>
                    `
                            imgUrl = '/img/icon/m-p.png'
                        } else if (ourD.label == '出入') {
                            dom = `
                        <div class="mobiletag-entitys-box-pink">
                            <div class="tag-content">
                               ${data[k].mechanismname}
                            </div>
                            <div class="tag-angle-content">
                                <img src="${ourD.imgSrc}">
                            </div>
                        </div>
                    `
                            imgUrl = '/img/icon/m-c.png'
                        } else if (ourD.label == '监控') {
                            dom = `
                        <div class="monitor-entitys-box">
                            <div>${data[k].mechanismname}</div>
                            <img class="monitor-entitys-box" src="/img/leftnav/map-monitor.png" alt="">
                        </div>
                        `
                            imgUrl = '/img/icon/m-v.png'
                            sateName = data[k].vrname
                        }
                        const divIcon = new global.DC.DivIcon(position[k], dom)
                        // 订阅事件
                        divIcon.on(global.DC.MouseEventType.CLICK, (e) => {
                            // console.log(data[k]);
                            const d = {
                                name:
                                    data[k].mechanismname ||
                                    data[k].roadname ||
                                    (ourD.label == '监控' ? '监控' : '无显示名字'),
                                bgImg: data[k].tpurl,
                                video: data[k].videourl || '',
                                from: 'labels',
                                introduce: data[k].introduce,
                                panoramaurl: data[k].panoramaurl
                            }
                            // 定制化窗体
                            that.openPopupS(
                                e.position,
                                [e.overlay._position._lng, e.overlay._position._lat],
                                d
                            )

                        const billboard = new global.DC.Billboard(position[k], imgUrl)

                        const label = new global.DC.Label(
                            position[k],
                            sateName
                        )

                        label.setStyle({
                            fillColor: global.DC.Color.RED,
                            style: global.DC.Namespace.Cesium.LabelStyle.FILL_AND_OUTLINE,
                            outlineColor: global.DC.Color.WHITE, // 边框颜色
                            outlineWidth: 8, // 边框大小，
                            font: '12px sans-serif',
                            pixelOffset: { x: 0, y: -24 }
                        })
                        window[that.leftNavData[n].layer].addOverlay(divIcon) // 加入图标

                        that.overlayClick(data, billboard, label, k, ourD)

                        layers[that.leftNavData[n].layer].addOverlay(billboard) // 加入图标
                        layers[that.leftNavData[n].layer].addOverlay(label)
                    }
                    window[that.leftNavData[n].layer].positions = position
                    if (that.leftNavData[n].layer == 'tagLayer') {
                    layers[that.leftNavData[n].layer].positions = position
                    if (that.leftNavData[n].layer == 'mobileTagLayer') {
                        // that.leftNavData[n].img = that.leftNavData[n].checked;
                    } else {
                        window[that.leftNavData[n].layer].show = false
                        layers[that.leftNavData[n].layer].show = false
                    }
                })
            }
            // setTimeout(() => {
            //   this.tagLayer.show = false;
            //   this.mobileTagLayer.show = false;
            // }, 500);
        },

        changePoiton (data) {
            // console.log(data);
            const that = this
            const list = []
            const num = data.length
            for (let i = 0; i < num; i++) {
                list.push(new global.DC.Position(data[i].jd, data[i].wd, 0))
                let obj = {}
                if (data[i].x && data[i].x != '') {
                    const position = that.coordinate(data[i].x)
                    obj = {
                        lng: position.lng, lat: position.lat
                    }
                } else {
                    obj = {
                        lng: data[i].jd, lat: data[i].wd
                    }
                }
                list.push(new global.DC.Position(Number(obj.lng), Number(obj.lat), 0))
            }
            return list
        },

        coordinate (item) {
            const arr = item.split(',')

            return {
                lng: arr[0],
                lat: arr[1]
            }
        },

        mobileOpenImgs1 () {
            const imgsDom = document.getElementById('mobileBigImgs')
            imgsDom.click()