zhyq/bigScreen.git

parent: f5f2445d | patch | commit | ignore whitespace

shuishen

2025-09-07 43c674c969395805d3841969e6598033e77848e0

突发事件模拟相关显示调整

5 files modified

2 files added

	public/img/mapicon/sfd.png	patch \| view \| raw \| blame \| history
	src/pages/map/components/scomponents/layersControl.vue	58 ●●●●● patch \| view \| raw \| blame \| history
	src/store/map.js	10 ●●●●● patch \| view \| raw \| blame \| history
	src/styles/base/dc-base.scss	948 ●●●●● patch \| view \| raw \| blame \| history
	src/views/pd/components/dynamicPanel copy 2.vue	1158 ●●●●● patch \| view \| raw \| blame \| history
	src/views/pd/components/dynamicPanel.vue	1252 ●●●●● patch \| view \| raw \| blame \| history
	src/views/pd/index.vue	72 ●●●●● patch \| view \| raw \| blame \| history

 public/img/mapicon/sfd.png


 src/pages/map/components/scomponents/layersControl.vue

@@ -2,7 +2,7 @@
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2024-10-31 10:47:29
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2025-08-18 18:49:54
 * @LastEditTime: 2025-09-07 20:23:17
 * @FilePath: \bigScreen\src\pages\map\components\scomponents\layersControl.vue
 * @Description:
 *
@@ -149,6 +149,7 @@
        label: '企业分布',
        type: 'layer',
        subType: 'labelPoint',
        customWx: true,
        method: getPage,
        params: {
            size: 1000
@@ -212,6 +213,7 @@
                label: '应急池',
                type: 'layer',
                subType: 'labelPoint',
                customWx: true,
                method: getList,
                params: {
                    type: 2,
@@ -738,6 +740,60 @@
    label: 'label',
}

let curAddClassDoms = []

watch(
    () => mapStore.needSelectID,
    (newValue, oldValue) => {
        if (curAddClassDoms.length > 0) {
            curAddClassDoms.forEach(dom => {
                dom.classList.remove('is-need-item')
            })

            curAddClassDoms = []
        }

        if (newValue.length > 0) {
            addTileLayers['qyfb']?.getOverlays().forEach(item => {
                newValue.forEach(id => {
                    if (item.attrParams.id == id) {
                        let dom = item.delegate.children[0]

                        dom.classList.add('is-need-item')

                        curAddClassDoms.push(dom)
                    }
                })
            })

            addTileLayers['sg-yjc']?.getOverlays().forEach(item => {
                newValue.forEach(id => {
                    if (item.attrParams.id == id) {
                        let dom = item.delegate.children[0]

                        dom.classList.add('is-need-item')

                        curAddClassDoms.push(dom)
                    }
                })
            })

            addTileLayers['zb']?.getOverlays().forEach(item => {
                newValue.forEach(id => {
                    if (item.attrParams.id == id) {
                        let dom = item.delegate.children[0]

                        dom.classList.add('is-need-item')

                        curAddClassDoms.push(dom)
                    }
                })
            })
        }
    }
)


const checkType = (value) => {
    if (typeof value === 'object' && value !== null && !Array.isArray(value)) {
        return 'obj'

 src/store/map.js

@@ -2,7 +2,7 @@
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2024-10-28 18:24:16
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2025-07-31 20:29:37
 * @LastEditTime: 2025-09-07 19:31:33
 * @FilePath: \bigScreen\src\store\map.js
 * @Description: 
 * 
@@ -18,6 +18,9 @@
        pointHeight: 64,
        editPoint: false,
        startCustomWx: false,

        needSelectID: [],

        showPreLevel: false,

        rimPosition: {
@@ -46,6 +49,11 @@
            this.startCustomWx = flag
        },

        setNeedSelectID (data) {
            this.needSelectID = data
        },


        setShowPreLevel (flag) {
            this.showPreLevel = flag
        },

 src/styles/base/dc-base.scss

@@ -1,577 +1,593 @@
.div-icon {
  padding: 0 !important;
    padding: 0 !important;
}

.public-map-popup {
  position: absolute;
  bottom: 80px;
  pointer-events: all;
  display: block;
  transform-origin: left bottom;
  transform: translate(-50%, 0px);
  border-radius: 5px;
  z-index: auto;

  &::after {
    content: "";
    position: absolute;
    bottom: -80px;
    left: calc(50% - 3px);
    bottom: 80px;
    pointer-events: all;
    display: block;
    width: 3px;
    height: 80px;
    // 0px 0px 6px rgb(255, 179, 0, 0.8)
    background: linear-gradient(to bottom, rgb(255, 179, 0, 0.8), rgb(255, 179, 0, 0.2));
    // border-right: 3px solid #fff;
  }

  .marsBlueGradientPnl {
    padding: 4px 8px;
    text-align: center;
    margin: 0;
    color: #fff;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    transform-origin: left bottom;
    transform: translate(-50%, 0px);
    border-radius: 5px;
    line-height: 32px;
    width: 112px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    word-wrap: break-word;
    font-size: 14px;
    background: linear-gradient(rgb(7 10 203 / 75%), rgb(16 238 220));
  }
    z-index: auto;

  .map-name {
    width: 112px;
    line-height: 24px;
    text-align: center;
    color: #FFEB3B;
    word-wrap: break-word;
    font-size: 14px;
    font-weight: bold;
  }

  .map-icon {
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: radial-gradient(circle at center, rgba(255, 255, 255, 0.3) 20%, rgb(255, 179, 0, 0.9) 100%);
    border-radius: 50%;
    box-shadow: 0px 0px 10px rgb(255, 179, 0, 1);

    img {
      width: 20px;
      height: 20px;
    &::after {
        content: "";
        position: absolute;
        bottom: -80px;
        left: calc(50% - 3px);
        display: block;
        width: 3px;
        height: 80px;
        // 0px 0px 6px rgb(255, 179, 0, 0.8)
        background: linear-gradient(to bottom, rgb(255, 179, 0, 0.8), rgb(255, 179, 0, 0.2));
        // border-right: 3px solid #fff;
    }
  }

    .marsBlueGradientPnl {
        padding: 4px 8px;
        text-align: center;
        margin: 0;
        color: #fff;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
        line-height: 32px;
        width: 112px;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        word-wrap: break-word;
        font-size: 14px;
        background: linear-gradient(rgb(7 10 203 / 75%), rgb(16 238 220));
    }

    .map-name {
        width: 112px;
        line-height: 24px;
        text-align: center;
        color: #FFEB3B;
        word-wrap: break-word;
        font-size: 14px;
        font-weight: bold;
    }

    .map-icon {
        margin: auto;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        background: radial-gradient(circle at center, rgba(255, 255, 255, 0.3) 20%, rgb(255, 179, 0, 0.9) 100%);
        border-radius: 50%;
        box-shadow: 0px 0px 10px rgb(255, 179, 0, 1);

        img {
            width: 20px;
            height: 20px;
        }
    }
}

.public-map-popup-two {
  position: absolute;
  bottom: 160px;
  pointer-events: all;
  display: block;
  transform-origin: left bottom;
  transform: translate(-50%, 0px);
  border-radius: 5px;
  z-index: auto;

  &::after {
    content: "";
    position: absolute;
    bottom: -10px;
    left: calc(50% - 3px);
    bottom: 160px;
    pointer-events: all;
    display: block;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid #69a7e4; // 三角形的颜色
    transform: rotate(180deg);
    z-index: -1;
  }

  .marsBlueGradientPnl {
    padding: 2px 6px;
    // text-align: center;
    margin: 0;
    color: #fff;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    transform-origin: left bottom;
    transform: translate(-50%, 0px);
    border-radius: 5px;
    line-height: 28px;
    width: 260px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    word-wrap: break-word;
    font-size: 14px;
    box-shadow: inset 0 0 40px #409eff;
    // background: linear-gradient(rgb(7 10 203 / 75%), rgb(16 238 220));
  }
    z-index: auto;

  .marsBlueGradientPnl img {
    vertical-align: middle;
    width: 360px;
    height: 360px;
  }
    &::after {
        content: "";
        position: absolute;
        bottom: -10px;
        left: calc(50% - 3px);
        display: block;
        width: 0;
        height: 0;
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
        border-bottom: 10px solid #69a7e4; // 三角形的颜色
        transform: rotate(180deg);
        z-index: -1;
    }

    .marsBlueGradientPnl {
        padding: 2px 6px;
        // text-align: center;
        margin: 0;
        color: #fff;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
        line-height: 28px;
        width: 260px;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        word-wrap: break-word;
        font-size: 14px;
        box-shadow: inset 0 0 40px #409eff;
        // background: linear-gradient(rgb(7 10 203 / 75%), rgb(16 238 220));
    }

    .marsBlueGradientPnl img {
        vertical-align: middle;
        width: 360px;
        height: 360px;
    }
}

.public-map-popup-three {
  position: absolute;
  bottom: 160px;
  pointer-events: all;
  display: block;
  transform-origin: left bottom;
  transform: translate(-50%, 0px);
  border-radius: 5px;
  z-index: auto;

  &::after {
    content: "";
    position: absolute;
    bottom: -10px;
    left: calc(50% - 3px);
    bottom: 160px;
    pointer-events: all;
    display: block;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid #69a7e4; // 三角形的颜色
    transform: rotate(180deg);
    z-index: -1;
  }

  .marsBlueGradientPnl {
    padding: 2px 6px;
    // position: absolute;
    // text-align: center;
    margin: 0;
    color: #fff;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    transform-origin: left bottom;
    transform: translate(-50%, 0px);
    border-radius: 5px;
    line-height: 28px;
    width: 260px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    word-wrap: break-word;
    font-size: 14px;
    font-weight: bold;
    box-shadow: inset 0 0 40px #409eff;
    // background: linear-gradient(rgb(7 10 203 / 75%), rgb(16 238 220));
  }
    z-index: auto;

    &::after {
        content: "";
        position: absolute;
        bottom: -10px;
        left: calc(50% - 3px);
        display: block;
        width: 0;
        height: 0;
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
        border-bottom: 10px solid #69a7e4; // 三角形的颜色
        transform: rotate(180deg);
        z-index: -1;
    }

    .marsBlueGradientPnl {
        padding: 2px 6px;
        // position: absolute;
        // text-align: center;
        margin: 0;
        color: #fff;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
        line-height: 28px;
        width: 260px;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        word-wrap: break-word;
        font-size: 14px;
        font-weight: bold;
        box-shadow: inset 0 0 40px #409eff;
        // background: linear-gradient(rgb(7 10 203 / 75%), rgb(16 238 220));
    }
}

.public-map-popup-qy {
  position: absolute;
  bottom: 160px;
  pointer-events: all;
  display: block;
  transform-origin: left bottom;
  transform: translate(-50%, 0px);
  border-radius: 5px;
  z-index: auto;

  &::after {
    content: "";
    position: absolute;
    bottom: -10px;
    left: calc(50% - 3px);
    bottom: 160px;
    pointer-events: all;
    display: block;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid #69a7e4; // 三角形的颜色
    transform: rotate(180deg);
    z-index: -1;
  }

  .marsBlueGradientPnl {
    // padding: 2px 2px;
    text-align: center;
    margin: 0;
    color: #fff;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    transform-origin: left bottom;
    transform: translate(-50%, 0px);
    border-radius: 5px;
    // line-height: 32px;
    width: 360px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    word-wrap: break-word;
    font-size: 14px;
    box-shadow: inset 0 0 40px #409eff;
    // background: linear-gradient(rgb(7 10 203 / 75%), rgb(16 238 220));
  }
    z-index: auto;

  .marsBlueGradientPnl img {
    vertical-align: middle;
    width: 360px;
    height: 360px;
  }
    &::after {
        content: "";
        position: absolute;
        bottom: -10px;
        left: calc(50% - 3px);
        display: block;
        width: 0;
        height: 0;
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
        border-bottom: 10px solid #69a7e4; // 三角形的颜色
        transform: rotate(180deg);
        z-index: -1;
    }

    .marsBlueGradientPnl {
        // padding: 2px 2px;
        text-align: center;
        margin: 0;
        color: #fff;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
        // line-height: 32px;
        width: 360px;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        word-wrap: break-word;
        font-size: 14px;
        box-shadow: inset 0 0 40px #409eff;
        // background: linear-gradient(rgb(7 10 203 / 75%), rgb(16 238 220));
    }

    .marsBlueGradientPnl img {
        vertical-align: middle;
        width: 360px;
        height: 360px;
    }
}

.yjwz-height-box {
  bottom: 120px;
    bottom: 120px;

  &::after {
    content: "";
    position: absolute;
    bottom: -120px;
    left: calc(50% - 3px);
    display: block;
    width: 3px;
    height: 120px;
    // 0px 0px 6px rgb(255, 179, 0, 0.8)
    background: linear-gradient(to bottom, rgb(255, 179, 0, 0.8), rgb(255, 179, 0, 0.2));
    // border-right: 3px solid #fff;
  }
    &::after {
        content: "";
        position: absolute;
        bottom: -120px;
        left: calc(50% - 3px);
        display: block;
        width: 3px;
        height: 120px;
        // 0px 0px 6px rgb(255, 179, 0, 0.8)
        background: linear-gradient(to bottom, rgb(255, 179, 0, 0.8), rgb(255, 179, 0, 0.2));
        // border-right: 3px solid #fff;
    }
}

.fxy-ordinary {
  &::after {
    background: linear-gradient(to bottom, rgba(255, 201, 0, 0.8), rgba(255, 201, 0, 0.2));
  }
    &::after {
        background: linear-gradient(to bottom, rgba(255, 201, 0, 0.8), rgba(255, 201, 0, 0.2));
    }

  .map-name {
    color: rgba(255, 201, 0, 1);
    width: 240px;
  }
    .map-name {
        color: rgba(255, 201, 0, 1);
        width: 240px;
    }

  .map-icon {
    background: radial-gradient(circle at center, rgba(255, 255, 255, 0.3) 20%, rgba(255, 201, 0, 0.9) 100%);
    box-shadow: 0px 0px 10px rgb(255, 201, 0);
  }
    .map-icon {
        background: radial-gradient(circle at center, rgba(255, 255, 255, 0.3) 20%, rgba(255, 201, 0, 0.9) 100%);
        box-shadow: 0px 0px 10px rgb(255, 201, 0);
    }
}

.fxy-larger {
  &::after {
    background: linear-gradient(to bottom, rgba(255, 0, 0, 0.8), rgba(255, 0, 0, 0.2));
  }
    &::after {
        background: linear-gradient(to bottom, rgba(255, 0, 0, 0.8), rgba(255, 0, 0, 0.2));
    }

  .map-name {
    color: #ff3b3b;
    width: 240px;
  }
    .map-name {
        color: #ff3b3b;
        width: 240px;
    }

  .map-icon {
    background: radial-gradient(circle at center, rgba(255, 255, 255, 0.3) 20%, rgba(255, 0, 0, 0.9) 100%);
    box-shadow: 0px 0px 10px rgb(255, 0, 0);
  }
    .map-icon {
        background: radial-gradient(circle at center, rgba(255, 255, 255, 0.3) 20%, rgba(255, 0, 0, 0.9) 100%);
        box-shadow: 0px 0px 10px rgb(255, 0, 0);
    }
}

.fxy-larger-b {
  &::after {
    background: linear-gradient(to bottom, rgba(255, 165, 0, 0.8), rgba(255, 165, 0, 0.2));
  }
    &::after {
        background: linear-gradient(to bottom, rgba(255, 165, 0, 0.8), rgba(255, 165, 0, 0.2));
    }

  .map-name {
    color: #FFA500;
    width: 240px;
  }
    .map-name {
        color: #FFA500;
        width: 240px;
    }

  .map-icon {
    background: radial-gradient(circle at center, rgba(255, 255, 255, 0.3) 20%, rgba(255, 165, 0, 0.9) 100%);
    box-shadow: 0px 0px 10px rgb(255, 165, 0);
  }
    .map-icon {
        background: radial-gradient(circle at center, rgba(255, 255, 255, 0.3) 20%, rgba(255, 165, 0, 0.9) 100%);
        box-shadow: 0px 0px 10px rgb(255, 165, 0);
    }
}

.fxy-zd {
  &::after {
    background: linear-gradient(to bottom, rgba(173, 173, 173, 0.8), rgba(173, 173, 173, 0.2));
  }
    &::after {
        background: linear-gradient(to bottom, rgba(173, 173, 173, 0.8), rgba(173, 173, 173, 0.2));
    }

  .map-name {
    color: rgba(255, 201, 0, 1);
    width: 240px;
  }
    .map-name {
        color: rgba(255, 201, 0, 1);
        width: 240px;
    }

  .map-icon {
    background: radial-gradient(circle at center, rgba(255, 255, 255, 0.3) 20%, rgba(173, 173, 173, 0.9) 100%);
    box-shadow: 0px 0px 10px rgb(173, 173, 173);
  }
    .map-icon {
        background: radial-gradient(circle at center, rgba(255, 255, 255, 0.3) 20%, rgba(173, 173, 173, 0.9) 100%);
        box-shadow: 0px 0px 10px rgb(173, 173, 173);
    }
}

.gt-zd {
  &::after {
    background: linear-gradient(to bottom, rgba(0, 136, 255, 0.8), rgba(0, 136, 255, 0.2));
  }
    &::after {
        background: linear-gradient(to bottom, rgba(0, 136, 255, 0.8), rgba(0, 136, 255, 0.2));
    }

  .map-name {
    color: rgb(0, 72, 255);
    width: 240px;
  }
    .map-name {
        color: rgb(0, 72, 255);
        width: 240px;
    }

  .map-icon {
    background: radial-gradient(circle at center, rgba(255, 255, 255, 0.3) 20%, rgba(0, 136, 255, 0.9) 100%);
    box-shadow: 0px 0px 10px rgba(0, 136, 255, 1);
  }
    .map-icon {
        background: radial-gradient(circle at center, rgba(255, 255, 255, 0.3) 20%, rgba(0, 136, 255, 0.9) 100%);
        box-shadow: 0px 0px 10px rgba(0, 136, 255, 1);
    }
}

.qyfb-box {
  &::after {
    background: linear-gradient(to bottom, rgba(0, 136, 255, 0.8), rgba(0, 136, 255, 0.2));
  }
    &::after {
        background: linear-gradient(to bottom, rgba(0, 136, 255, 0.8), rgba(0, 136, 255, 0.2));
    }

  .map-name {
    color: #FFEB3B;
  }
    .map-name {
        color: #FFEB3B;
    }

  .map-icon {
    background: radial-gradient(circle at center, rgba(255, 255, 255, 0.3) 20%, rgba(0, 136, 255, 0.9) 100%);
    box-shadow: 0px 0px 10px rgba(0, 136, 255, 1);
  }
    .map-icon {
        background: radial-gradient(circle at center, rgba(255, 255, 255, 0.3) 20%, rgba(0, 136, 255, 0.9) 100%);
        box-shadow: 0px 0px 10px rgba(0, 136, 255, 1);
    }
}

.xfs-box {
  &::after {
    background: linear-gradient(to bottom, rgba(255, 197, 90, 0.8), rgba(255, 197, 90, 0.2));
  }
    &::after {
        background: linear-gradient(to bottom, rgba(255, 197, 90, 0.8), rgba(255, 197, 90, 0.2));
    }

  .map-name {
    color: #ffc55a;
  }
    .map-name {
        color: #ffc55a;
    }

  .map-icon {
    background: radial-gradient(circle at center, rgba(255, 255, 255, 0.3) 20%, rgba(255, 197, 90, 0.9) 100%);
    box-shadow: 0px 0px 10px rgb(255, 197, 90);
  }
    .map-icon {
        background: radial-gradient(circle at center, rgba(255, 255, 255, 0.3) 20%, rgba(255, 197, 90, 0.9) 100%);
        box-shadow: 0px 0px 10px rgb(255, 197, 90);
    }
}

.yjb-box,
.ysf-box,
.sk-box {
  &::after {
    background: linear-gradient(to bottom, rgba(15, 125, 254, 0.8), rgba(15, 125, 254, 0.2));
  }
    &::after {
        background: linear-gradient(to bottom, rgba(15, 125, 254, 0.8), rgba(15, 125, 254, 0.2));
    }

  .map-name {
    color: #FFEB3B;
  }
    .map-name {
        color: #FFEB3B;
    }

  .map-icon {
    background: radial-gradient(circle at center, rgba(255, 255, 255, 0.3) 20%, rgba(15, 125, 254, 0.9) 100%);
    box-shadow: 0px 0px 10px rgba(15, 125, 254, 1);
  }
    .map-icon {
        background: radial-gradient(circle at center, rgba(255, 255, 255, 0.3) 20%, rgba(15, 125, 254, 0.9) 100%);
        box-shadow: 0px 0px 10px rgba(15, 125, 254, 1);
    }
}

.yjc-box {
  &::after {
    background: linear-gradient(to bottom, rgba(15, 254, 71, 0.8), rgba(15, 254, 71, 0.2));
  }
    &::after {
        background: linear-gradient(to bottom, rgba(15, 254, 71, 0.8), rgba(15, 254, 71, 0.2));
    }

  .map-name {
    color: #FFEB3B;
  }
    .map-name {
        color: #FFEB3B;
    }

  .map-icon {
    background: radial-gradient(circle at center, rgba(255, 255, 255, 0.3) 20%, rgba(15, 254, 71, 0.9) 100%);
    box-shadow: 0px 0px 10px rgba(15, 254, 71, 1);
  }
    .map-icon {
        background: radial-gradient(circle at center, rgba(255, 255, 255, 0.3) 20%, rgba(15, 254, 71, 0.9) 100%);
        box-shadow: 0px 0px 10px rgba(15, 254, 71, 1);
    }
}

.is-need-item {
    &::after {
        background: linear-gradient(to bottom, rgba(255, 0, 0, 0.8), rgba(255, 0, 0, 0.2)) !important;
    }

    .map-name {
        color: #ff3b3b !important;
        width: 240px !important;
    }

    .map-icon {
        background: radial-gradient(circle at center, rgba(255, 255, 255, 0.3) 20%, rgba(255, 0, 0, 0.9) 100%) !important;
        box-shadow: 0px 0px 10px rgb(255, 0, 0) !important;
    }
}

@keyframes pulse-glow {
  0% {
    box-shadow: 0 0 4px red, inset 0 0 4px red;
  }
    0% {
        box-shadow: 0 0 4px red, inset 0 0 4px red;
    }

  50% {
    box-shadow: 0 0 8px red, inset 0 0 8px red;
  }
    50% {
        box-shadow: 0 0 8px red, inset 0 0 8px red;
    }

  100% {
    box-shadow: 0 0 4px red, inset 0 0 4px red;
  }
    100% {
        box-shadow: 0 0 4px red, inset 0 0 4px red;
    }
}

.dynamic-map-popup {
  padding: 32px 30px;
    padding: 32px 30px;

  position: absolute;
  right: 100%;
  bottom: 0;
  width: 320px;
  font-weight: bold;
  font-style: italic;

  .arrow {
    position: absolute;
    right: 0;
    right: 100%;
    bottom: 0;
    width: 45px;
    height: 2px;
    transform: rotate(45deg);
    background: red;
    transform-origin: right bottom;
  }
    width: 320px;
    font-weight: bold;
    font-style: italic;

  .content-wrap {
    position: relative;
    color: #fff;
    background: rgba(255, 0, 0, 0.2);

    &::after {
      content: '';
      position: absolute;
      top: -0.8px;
      /* 调整以匹配所需的发光区域 */
      left: 0px;
      /* 同上 */
      right: 0px;
      bottom: calc(100% - 0.8px);
      background: white;
      box-shadow: 0 0 8px red, inset 0 0 8px red;
      animation: pulse-glow 3s infinite;
    }

    &::before {
      content: '';
      position: absolute;
      top: calc(100% - 0.8px);
      /* 调整以匹配所需的发光区域 */
      left: 0px;
      /* 同上 */
      right: 0px;
      bottom: -0.8px;
      background: white;
      box-shadow: 0 0 8px red, inset 0 0 8px red;
      animation: pulse-glow 3s infinite;
    }

    .title {
      position: relative;
      height: 30px;
      line-height: 30px;
      font-size: 18px;


      &::before {
        content: '';
    .arrow {
        position: absolute;
        top: calc(100% - 0.8px);
        /* 调整以匹配所需的发光区域 */
        left: 0px;
        /* 同上 */
        right: 40%;
        bottom: -0.8px;
        background: white;
        box-shadow: 0 0 8px red, inset 0 0 8px red;
        animation: pulse-glow 3s infinite;
      }
        right: 0;
        bottom: 0;
        width: 45px;
        height: 2px;
        transform: rotate(45deg);
        background: red;
        transform-origin: right bottom;
    }

    .content {
      text-indent: 2em;
      line-height: 28px;
    .content-wrap {
        position: relative;
        color: #fff;
        background: rgba(255, 0, 0, 0.2);

        &::after {
            content: '';
            position: absolute;
            top: -0.8px;
            /* 调整以匹配所需的发光区域 */
            left: 0px;
            /* 同上 */
            right: 0px;
            bottom: calc(100% - 0.8px);
            background: white;
            box-shadow: 0 0 8px red, inset 0 0 8px red;
            animation: pulse-glow 3s infinite;
        }

        &::before {
            content: '';
            position: absolute;
            top: calc(100% - 0.8px);
            /* 调整以匹配所需的发光区域 */
            left: 0px;
            /* 同上 */
            right: 0px;
            bottom: -0.8px;
            background: white;
            box-shadow: 0 0 8px red, inset 0 0 8px red;
            animation: pulse-glow 3s infinite;
        }

        .title {
            position: relative;
            height: 30px;
            line-height: 30px;
            font-size: 18px;


            &::before {
                content: '';
                position: absolute;
                top: calc(100% - 0.8px);
                /* 调整以匹配所需的发光区域 */
                left: 0px;
                /* 同上 */
                right: 40%;
                bottom: -0.8px;
                background: white;
                box-shadow: 0 0 8px red, inset 0 0 8px red;
                animation: pulse-glow 3s infinite;
            }
        }

        .content {
            text-indent: 2em;
            line-height: 28px;
        }
    }
  }
}

.dynamic-event-profile-map-popup {
  padding: 32px 30px;
    padding: 32px 30px;

  position: absolute;
  left: 100%;
  bottom: 0;
  width: 320px;
  font-weight: bold;
  font-style: italic;

  .arrow {
    position: absolute;
    left: 0;
    left: 100%;
    bottom: 0;
    width: 45px;
    height: 2px;
    transform: rotate(-45deg);
    background: red;
    transform-origin: left bottom;
  }
    width: 320px;
    font-weight: bold;
    font-style: italic;

  .content-wrap {
    position: relative;
    color: #fff;
    background: rgba(255, 0, 0, 0.2);

    &::after {
      content: '';
      position: absolute;
      top: -0.8px;
      /* 调整以匹配所需的发光区域 */
      left: 0px;
      /* 同上 */
      right: 0px;
      bottom: calc(100% - 0.8px);
      background: white;
      box-shadow: 0 0 8px red, inset 0 0 8px red;
      animation: pulse-glow 3s infinite;
    }

    &::before {
      content: '';
      position: absolute;
      top: calc(100% - 0.8px);
      /* 调整以匹配所需的发光区域 */
      left: 0px;
      /* 同上 */
      right: 0px;
      bottom: -0.8px;
      background: white;
      box-shadow: 0 0 8px red, inset 0 0 8px red;
      animation: pulse-glow 3s infinite;
    }

    .title {
      position: relative;
      height: 30px;
      line-height: 30px;
      font-size: 18px;


      &::before {
        content: '';
    .arrow {
        position: absolute;
        top: calc(100% - 0.8px);
        /* 调整以匹配所需的发光区域 */
        left: 0px;
        /* 同上 */
        right: 40%;
        bottom: -0.8px;
        background: white;
        box-shadow: 0 0 8px red, inset 0 0 8px red;
        animation: pulse-glow 3s infinite;
      }
        left: 0;
        bottom: 0;
        width: 45px;
        height: 2px;
        transform: rotate(-45deg);
        background: red;
        transform-origin: left bottom;
    }

    .content {
      text-indent: 2em;
      line-height: 28px;
    .content-wrap {
        position: relative;
        color: #fff;
        background: rgba(255, 0, 0, 0.2);

        &::after {
            content: '';
            position: absolute;
            top: -0.8px;
            /* 调整以匹配所需的发光区域 */
            left: 0px;
            /* 同上 */
            right: 0px;
            bottom: calc(100% - 0.8px);
            background: white;
            box-shadow: 0 0 8px red, inset 0 0 8px red;
            animation: pulse-glow 3s infinite;
        }

        &::before {
            content: '';
            position: absolute;
            top: calc(100% - 0.8px);
            /* 调整以匹配所需的发光区域 */
            left: 0px;
            /* 同上 */
            right: 0px;
            bottom: -0.8px;
            background: white;
            box-shadow: 0 0 8px red, inset 0 0 8px red;
            animation: pulse-glow 3s infinite;
        }

        .title {
            position: relative;
            height: 30px;
            line-height: 30px;
            font-size: 18px;


            &::before {
                content: '';
                position: absolute;
                top: calc(100% - 0.8px);
                /* 调整以匹配所需的发光区域 */
                left: 0px;
                /* 同上 */
                right: 40%;
                bottom: -0.8px;
                background: white;
                box-shadow: 0 0 8px red, inset 0 0 8px red;
                animation: pulse-glow 3s infinite;
            }
        }

        .content {
            text-indent: 2em;
            line-height: 28px;
        }
    }
  }
}

.widget.location-bar {
  position: absolute;
  left: 620px !important;
  bottom: 120px !important;
  font-size: 14px;
  color: #fff;
  background: #0009;
  padding: 2px 5px;
  border-radius: 2px;
  user-select: none;
  display: flex;
    position: absolute;
    left: 620px !important;
    bottom: 120px !important;
    font-size: 14px;
    color: #fff;
    background: #0009;
    padding: 2px 5px;
    border-radius: 2px;
    user-select: none;
    display: flex;
}

 src/views/pd/components/dynamicPanel copy 2.vue

New file
@@ -0,0 +1,1158 @@
<!--
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2024-11-09 15:41:35
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2025-09-06 04:50:01
 * @FilePath: \bigScreen\src\views\pd\components\dynamicPanel.vue
 * @Description: 
 * 
 * Copyright (c) 2024 by shuishen, All Rights Reserved. 
-->
<script setup>
import 'element-plus/theme-chalk/dark/css-vars.css'

import { ElMessage, ElNotification } from 'element-plus'
import qyfw from "@/assets/json/qyfw"
import EventBus from 'utils/bus'
import qysgwslx from "@/assets/json/qysgwslx"
import disposeDataJson from "@/assets/json/dispose"
const { VITE_APP_BASE } = import.meta.env

const emit = defineEmits(['closePanel'])
import { computed, onUnmounted } from 'vue'

import { spatialAnalysisPoint } from "@/api/space/space"

import { useMap } from 'store/map'
const mapStore = useMap()
import { usePointStore } from 'store/usepoint'
import { es } from 'element-plus/es/locales.mjs'
const pointStore = usePointStore()

onMounted(() => {
    pointStore.updateSharedData(1)
})

let lineTime = null
let timeOne = null
let timeTwo = null
let timeThree = null
let timeFour = null
let timeFive = null
let timeSix = null

const panelData = reactive({
    data: [
        {
            type: 'demo',
            key: 1,
            title: '典型案例',
            content: '化工园区罐区泄漏事故: 化工园区某企业储罐泄漏，如不采取措施，将造成污染事故，影响到长江下游水质。',

            oneCentent: '2024年11月11日11时，化工园区某企业储罐泄漏。企业关闭前置阀门，切断泄漏源；根据泄漏情况，向罐内适量注水，抬高液位，形成水垫层，缓解险情，配合堵漏。',
            onePointPosition: {
                lng: 115.6129562,
                lat: 29.80862305,
                alt: 8
            },
            onetime: 0,

            twoContent: '启动应急池的使用，将泄漏的化学原料引导至应急池中。',
            twoPointPosition: {
                lng: 115.61455898,
                lat: 29.80860536,
                alt: 6
            },
            twotime: 5000,

            lineCenter: {
                lng: 115.60829375,
                lat: 29.81523750,
                alt: 8
            },
            linePosition: '115.60817690,29.81524844,8;115.608341,29.815518,8',
            lineTime: 5000,
            threeContent: '该公司应急池容量不足，可通过移动泵或槽罐车将事故废水转移至临近企业事故应急池或污水处理厂事故应急池。',
            threePointPosition: {
                lng: 115.608341,
                lat: 29.815518,
                alt: 8
            },
            threetime: 15000,

            fourContent: '将拦截废水从应急池中转移至污水处理厂进行处置，同时在排口下游展开应急监测，确保废水没有进入周边水系。',
            fourPointPosition: {
                lng: 115.6195378,
                lat: 29.81430352,
                alt: 9
            },
            fourtime: 20000,
        },

        {
            type: 'custom',
            key: 2,
            title: '自定义案例',
            content: '自定义风险源：化工园区某企业发生化学原料危害品泄漏，如不采取措施，将造成污染事故，影响到长江下游水质',
        },
    ]
})

let dynamicVectorLayer = new DC.VectorLayer('dynamicVectorLayer').addTo(window.$viewer)
let dynamicHtmlLayer = new DC.HtmlLayer('dynamicHtmlLayer').addTo(window.$viewer)
let dynamicLineVectorLayer = new DC.VectorLayer('dynamicLineVectorLayer').addTo(window.$viewer)
let qyWsLayer = new DC.VectorLayer('qyWsLayer').addTo(window.$viewer)

let modelPosition = [
    {
        lng: 115.10640155,
        lat: 27.28121605
    },
    {
        lng: 115.10641953,
        lat: 27.28084006
    },
    {
        lng: 115.10641886,
        lat: 27.28026147
    },
    {
        lng: 115.10642486,
        lat: 27.27994712,
    },
    {
        lng: 115.10640964,
        lat: 27.27928393,
    },
    {
        lng: 115.10639803,
        lat: 27.27848014
    }
]

let positions = modelPosition.map(i => [i.lng, i.lat, i.ele || 64].join(',')).join(';')
let tc = new DC.TrackController(window.$viewer)
let track = new DC.Track(positions, 5)
track.setModel(VITE_APP_BASE + 'gltf/car.gltf', {
    show: true,
    scale: 0.0025,
    // nodeTransformations: {
    //   rotation: window.$Cesium.Quaternion.fromHeadingPitchRoll(window.$Cesium.Math.toRadians(0), window.$Cesium.Math.toRadians(0), window.$Cesium.Math.toRadians(0)),
    // }
})

tc.addTrack(track)
let startClick = false
let curSelectType = null

const synth = window.speechSynthesis

const speak = (msg, continueFun = () => { }) => {
    let u = new SpeechSynthesisUtterance()
    let voices = synth.getVoices()
    u.text = msg
    u.rate = 1.2
    let findObj = voices.some(voice => voice.lang == 'zh-CN')

    if (!findObj) {
        u.lang = 'zh-TW'
    }

    u.onend = () => {
        continueFun()
    }
    synth.speak(u)
}

const publicFun = (item) => {
    if (startClick) pointStore.updateSharedData(3)

    let fourCenter = DC.Position.fromObject(item.fourPointPosition)
    let fourCircle = new DC.Circle(fourCenter, 30)
    fourCircle.setStyle({
        material: new DC.CircleWaveMaterialProperty({
            color: DC.Color.fromRandom(),
            speed: 20,
            count: 5,
            gradient: 0.5
        })
    })
    dynamicVectorLayer.addOverlay(fourCircle)

    let fourContent = new DC.DivIcon(
        new DC.Position(item.fourPointPosition.lng, item.fourPointPosition.lat, item.fourPointPosition.alt),
        `<div class="dynamic-map-popup">
                  <div class="content-wrap">
                    <div class="content">
                      <p>${item.fourContent}</p>
                    </div>
                  </div>
                  <div class="arrow"></div>
                </div>`
    )
    dynamicHtmlLayer.addOverlay(fourContent)

    window.$viewer.flyToPosition(new DC.Position(item.fourPointPosition.lng, item.fourPointPosition.lat, 400, 0, -90, 0), () => {
        speak(item.fourContent, () => {
            if (item.fivePointPosition) {
                let fiveCenter = DC.Position.fromObject(item.fivePointPosition)
                let fiveCircle = new DC.Circle(fiveCenter, 10)
                fiveCircle.setStyle({
                    material: new DC.CircleWaveMaterialProperty({
                        color: DC.Color.fromRandom(),
                        speed: 20,
                        count: 5,
                        gradient: 0.5
                    })
                })
                dynamicVectorLayer.addOverlay(fiveCircle)

                let fiveContent = new DC.DivIcon(
                    new DC.Position(item.fivePointPosition.lng, item.fivePointPosition.lat, item.fivePointPosition.alt),
                    `<div class="dynamic-event-profile-map-popup">
                      <div class="content-wrap">
                        <div class="content">
                          <p>${item.fiveContent}</p>
                        </div>
                      </div>
                      <div class="arrow"></div>
                    </div>`
                )
                dynamicHtmlLayer.addOverlay(fiveContent)
                // 执行对应的事件函数
                window.$viewer.flyToPosition(new DC.Position(item.fivePointPosition.lng, item.fivePointPosition.lat, 400, 0, -90, 0), () => {
                    speak(item.fiveContent, () => {
                        if (item.sixPointPosition) {
                            let sixCenter = DC.Position.fromObject(item.sixPointPosition)
                            let sixCircle = new DC.Circle(sixCenter, 10)
                            sixCircle.setStyle({
                                material: new DC.CircleWaveMaterialProperty({
                                    color: DC.Color.fromRandom(),
                                    speed: 20,
                                    count: 5,
                                    gradient: 0.5
                                })
                            })
                            dynamicVectorLayer.addOverlay(sixCircle)

                            let sixContent = new DC.DivIcon(
                                new DC.Position(item.sixPointPosition.lng, item.sixPointPosition.lat, 70),
                                `<div class="dynamic-map-popup">
                              <div class="content-wrap">
                                <div class="content">
                                  <p>${item.sixContent}</p>
                                </div>
                              </div>
                              <div class="arrow"></div>
                          </div>`
                            )
                            dynamicHtmlLayer.addOverlay(sixContent)
                            // 执行对应的事件函数
                            window.$viewer.flyToPosition(new DC.Position(item.sixPointPosition.lng, item.sixPointPosition.lat, 400, 0, -90, 0), () => {
                                speak(item.sixContent, () => {
                                    if (item.sevenPointPosition) {
                                        let sevenCenter = DC.Position.fromObject(item.sevenPointPosition)
                                        let sevenCircle = new DC.Circle(sevenCenter, 10)
                                        sevenCircle.setStyle({
                                            material: new DC.CircleWaveMaterialProperty({
                                                color: DC.Color.fromRandom(),
                                                speed: 20,
                                                count: 5,
                                                gradient: 0.5
                                            })
                                        })
                                        dynamicVectorLayer.addOverlay(sevenCircle)

                                        let sevenContent = new DC.DivIcon(
                                            new DC.Position(item.sevenPointPosition.lng, item.sevenPointPosition.lat, 70),
                                            `<div class="dynamic-event-profile-map-popup">
                              <div class="content-wrap">
                                <div class="content">
                                  <p>${item.sevenContent}</p>
                                </div>
                              </div>
                              <div class="arrow"></div>
                          </div>`
                                        )
                                        dynamicHtmlLayer.addOverlay(sevenContent)
                                        // 执行对应的事件函数
                                        window.$viewer.flyToPosition(new DC.Position(item.sevenPointPosition.lng, item.sevenPointPosition.lat, 400, 0, -90, 0), () => {
                                            speak(item.sevenContent)
                                        }, 3)
                                    }
                                })
                            }, 3)
                        }
                    })
                }, 3)
            }
        })
    }, 3)
}

const twoFun = (item, cb = () => { }) => {
    if (startClick) pointStore.updateSharedData(1)

    let twoCenter = DC.Position.fromObject(item.twoPointPosition)
    let twoCircle = new DC.Circle(twoCenter, 10)
    twoCircle.setStyle({
        material: new DC.CircleWaveMaterialProperty({
            color: DC.Color.fromRandom(),
            speed: 20,
            count: 5,
            gradient: 0.5
        })
    })
    dynamicVectorLayer.addOverlay(twoCircle)

    let twoContent = new DC.DivIcon(
        new DC.Position(item.twoPointPosition.lng, item.twoPointPosition.lat, item.twoPointPosition.alt),
        `<div class="dynamic-event-profile-map-popup">
          <div class="content-wrap">
            <div class="content">
              <p>${item.twoContent}</p>
              </div>
              </div>
              <div class="arrow"></div>
              </div>`
        // <p>特征污染物：${item.specificPollutant}</p>
    )
    dynamicHtmlLayer.addOverlay(twoContent)
    // 执行对应的事件函数
    window.$viewer.flyToPosition(new DC.Position(item.twoPointPosition.lng, item.twoPointPosition.lat, 400, 0, -90, 0), () => {
        speak(item.twoContent, () => {
            cb()
        })
    }, 3)
}

const createLinePath = (item, cb = () => { }) => {
    if (item.linePosition) {
        let polyline = new DC.Polyline(item.linePosition)
        polyline.setStyle({
            width: 20,
            material: new DC.PolylineImageTrailMaterialProperty({
                color: DC.Color.RED,
                speed: 20,
                image: VITE_APP_BASE + 'img/mapicon/right.png',
                repeat: { x: 5, y: 1 }
            }),
            clampToGround: false
        })

        dynamicLineVectorLayer.addOverlay(polyline)
    } else {
        if (startClick) pointStore.updateSharedData(2)

        let threeCenter = DC.Position.fromObject(item.threePointPosition)
        let threeCircle = new DC.Circle(threeCenter, 30)
        threeCircle.setStyle({
            material: new DC.CircleWaveMaterialProperty({
                color: DC.Color.fromRandom(),
                speed: 20,
                count: 5,
                gradient: 0.5
            })
        })
        dynamicVectorLayer.addOverlay(threeCircle)
    }

    let threeContent = new DC.DivIcon(
        new DC.Position(item.threePointPosition.lng, item.threePointPosition.lat, item.threePointPosition.alt),
        `<div class="dynamic-event-profile-map-popup">
          <div class="content-wrap">
            <div class="content">
              <p>${item.threeContent}</p>
              </div>
              </div>
              <div class="arrow"></div>
              </div>`
        // <p>特征污染物：${item.specificPollutant}</p>
    )
    dynamicHtmlLayer.addOverlay(threeContent)
    // 执行对应的事件函数

    window.$viewer.flyToPosition(new DC.Position(item.threePointPosition.lng, item.threePointPosition.lat, 400, 0, -90, 0), () => {
        speak(item.threeContent, () => {
            cb()
        })
    }, 3)
}
const parseLineString = (lineString) => {
    // 移除 "LINESTRING(" 和 ")"
    const cleanedString = lineString.replace(/^LINESTRING\(/, '').replace(/\)$/, '')

    // 使用逗号分割成坐标对字符串数组
    const coordinatePairsString = cleanedString.split(',')

    // 将每个坐标对字符串转换为数组，并解析成浮点数
    const coordinatesArray = coordinatePairsString.map(pair => {
        const [lon, lat] = pair.trim().split(' ')
        return [parseFloat(lon), parseFloat(lat)]
    })

    return coordinatesArray
}

let publicEventHandle = {
    oneCentent: '某某年某某月某某日，企业发生化学原料危害品泄漏。',
    onePointPosition: {
        lng: null,
        lat: null,
        alt: null
    },
    onetime: 0,

    twoContent: '关闭所有可能外溢事故污水的外排口，利用企业自身的围堰、应急池等环境应急防控设施，将污水控制在企业厂区内部。',
    twoPointPosition: {
        lng: null,
        lat: null,
        alt: null
    },
    twotime: 5000,

    threeContent: '通过专用管道或临时转输措施，与相邻企业应急池、园区公共应急池等互联互通，拦截处置事故污水。',
    threePointPosition: {
        lng: null,
        lat: null,
        alt: null
    },
    threetime: 15000,

    fourContent: '利用化工集中区内的坑塘、河道、沟渠以及周边水系等，构建环境应急防控空间，对进出园区的水体实施封闭或分段管控。',
    fourPointPosition: {
        lng: null,
        lat: null,
        alt: null
    },
    fourtime: 15000,
}

const wxEntityClick = (e) => {
    if (curSelectType === 1) {
        if (curCustomStep === 1) {
            if (e.overlay.attrParams.id === "1875105459276697601") {
                isShowEquipmentClosePopup.value = true
            } else {
                ElMessage({
                    message: '请选择园区闸坝.',
                    type: 'warning',
                })
            }
        } else {
            if (e.overlay.attrParams.id === "1922914799476486145") {
                isShowEquipmentClosePopup.value = true
            } else {
                ElMessage({
                    message: '请选择对应新建闸坝.',
                    type: 'warning',
                })
            }
        }

        return
    }


    if (curStepType.value === 4 && e.overlay.attrParams.type != 4) {
        ElMessage({
            message: '请选择闸坝.',
            type: 'warning',
        })

        return
    }

    if (curStepType.value === 7 && e.overlay.attrParams.type != 4 && e.overlay.attrParams.type != 3) {
        ElMessage({
            message: '请选择闸阀.',
            type: 'warning',
        })

        return
    }

    isShowEquipmentClosePopup.value = true
    return

    const { attrParams } = e.overlay
    clearAll()
    pointStore.updateSharedData(1)
    mapStore.setShowPreLevel(true)

    spatialAnalysisPoint({
        lng: attrParams.lng,
        lat: attrParams.lat
    }).then(res => {
        let arr = res.data.data

        publicEventHandle.onePointPosition = {
            lng: attrParams.lng,
            lat: attrParams.lat,
            alt: 16
        }

        arr.forEach(item => {
            if (item.preLevel == 1) {
                publicEventHandle.twoPointPosition = {
                    lng: item.lng,
                    lat: item.lat,
                    alt: item.ele
                }
            }
            if (item.preLevel == 2 && item.geom) {
                var line = window.$turf.lineString(parseLineString(item.geom))
                var pt = window.$turf.point([attrParams.lng, attrParams.lat])
                var snapped = window.$turf.nearestPointOnLine(line, pt, { units: "miles" })
                publicEventHandle.threePointPosition = {
                    lng: snapped.geometry.coordinates[0],
                    lat: snapped.geometry.coordinates[1],
                    alt: 30
                }
            }

            if (item.preLevel == 3) {
                publicEventHandle.fourPointPosition = {
                    lng: item.lng,
                    lat: item.lat,
                    alt: item.ele
                }
            }
        })

        timeOne = setTimeout(() => {
            function oneLoad () {
                let oneCenter = DC.Position.fromObject(publicEventHandle.onePointPosition)
                let oneCircle = new DC.Circle(oneCenter, 20)
                oneCircle.setStyle({
                    material: new DC.CircleWaveMaterialProperty({
                        color: DC.Color.RED.withAlpha(0.9),
                        speed: 20,
                        count: 5,
                        gradient: 0.5
                    })
                })
                dynamicVectorLayer.addOverlay(oneCircle)

                let oneCentent = new DC.DivIcon(
                    new DC.Position(publicEventHandle.onePointPosition.lng, publicEventHandle.onePointPosition.lat, publicEventHandle.onePointPosition.alt),
                    `<div class="dynamic-map-popup">
          <div class="content-wrap">
            <div class="content">
              <p>${publicEventHandle.oneCentent}</p>
              </div>
              </div>
              <div class="arrow"></div>
              </div>`
                    // <p>特征污染物：${publicEventHandle.specificPollutant}</p>
                )
                dynamicHtmlLayer.addOverlay(oneCentent)

                speak(publicEventHandle.oneCentent, () => {
                    twoFun(publicEventHandle, () => {
                        createLinePath(publicEventHandle, () => {
                            publicFun(publicEventHandle)
                        })
                    })
                })
            }
            if (publicEventHandle.showModel) {
                oneLoad()
            } else {
                window.$viewer.flyToPosition(new DC.Position(publicEventHandle.onePointPosition.lng, publicEventHandle.onePointPosition.lat, 400, 0, -90, 0), () => {
                    oneLoad()
                }, 3)
            }
        }, publicEventHandle.onetime)
    })
}

EventBus.on('wxEntityClick', wxEntityClick)

qysgwslx.features.forEach(item => {
    let polyline = new DC.Polyline(item.geometry.coordinates.join(';'))
    polyline.setStyle({
        width: 5,
        material: new DC.PolylineTrailMaterialProperty({
            color: DC.Color.ALICEBLUE,
            speed: 10
        }),
        clampToGround: true
    })
    qyWsLayer.addOverlay(polyline)
})

let curCustomStep = 0

const schemeStart = (item, type) => {
    emit('closePanel')
    clearAll()
    curCustomStep = 0
    EventBus.emit('restHandleDelChange', `3-3`)
    EventBus.emit('restHandleDelChange', `3-4`)
    EventBus.emit('restHandleDelChange', `4-1`)
    EventBus.emit('restHandleDelChange', `4-2`)
    EventBus.emit('restHandleDelChange', `4-3`)
    EventBus.emit('restHandleDelChange', `4-9`)

    EventBus.emit('restHandleCheckChange', `3-3`)
    EventBus.emit('restHandleCheckChange', `3-4`)

    startClick = true

    if (type == 1) {
        curSelectType = 1

        if (item.showModel) {
            window.$viewer.flyToPosition("115.6129562,29.80862305,400,0,-90", () => {
                track.setModel(VITE_APP_BASE + 'gltf/car.gltf', {
                    show: true,
                    scale: 0.0025,
                    // nodeTransformations: {
                    //   rotation: window.$Cesium.Quaternion.fromHeadingPitchRoll(window.$Cesium.Math.toRadians(0), window.$Cesium.Math.toRadians(0), window.$Cesium.Math.toRadians(0)),
                    // }
                })

                tc.play()
                tc.viewTrack(track, {
                    mode: '2',
                    pitch: -45,
                    range: 400
                })
            })
        }

        timeOne = setTimeout(() => {
            function oneLoad () {
                let oneCenter = DC.Position.fromObject(item.onePointPosition)
                let oneCircle = new DC.Circle(oneCenter, 20)
                oneCircle.setStyle({
                    material: new DC.CircleWaveMaterialProperty({
                        color: DC.Color.RED.withAlpha(0.9),
                        speed: 20,
                        count: 5,
                        gradient: 0.5
                    })
                })
                dynamicVectorLayer.addOverlay(oneCircle)

                let oneCentent = new DC.DivIcon(
                    new DC.Position(item.onePointPosition.lng, item.onePointPosition.lat, item.onePointPosition.alt),
                    `<div class="dynamic-map-popup">
          <div class="content-wrap">
            <div class="content">
              <p>${item.oneCentent}</p>
              </div>
              </div>
              <div class="arrow"></div>
              </div>`
                    // <p>特征污染物：${item.specificPollutant}</p>
                )
                dynamicHtmlLayer.addOverlay(oneCentent)

                speak(item.oneCentent, () => {
                    if (item.key == 2) {
                        twoFun(item, () => {
                            createLinePath(item, () => {
                                publicFun(item)
                            })
                        })
                    } else if (item.key == 1) {
                        twoFun(item, () => {
                            createLinePath(item, () => {
                                curCustomStep = 1
                                mapStore.setStartCustomWx(startClick)

                                message = ElNotification({
                                    title: '提示',
                                    showClose: true,
                                    message: '进行下一步应急措施，需选中园区闸坝才可下一步。',
                                    type: 'warning',
                                    duration: 0,
                                    offset: 100,
                                })

                                // 
                            })
                        })
                    } else {
                        twoFun(item, () => {
                            createLinePath(item, () => {
                                publicFun(item)
                            })
                        })
                    }
                })
            }
            if (item.showModel) {
                oneLoad()
            } else {
                window.$viewer.flyToPosition(new DC.Position(item.onePointPosition.lng, item.onePointPosition.lat, 400, 0, -90, 0), () => {
                    oneLoad()
                }, 3)
            }
        }, item.onetime)


    } else {
        curStep.value = 0
        curStepType.value = 0

        curSelectType = 2
        // mapStore.setStartCustomWx(startClick)
    }
}

const disposeFlowData = ref([])
const isShowDisposeFlowPopup = ref(false)
const curStep = ref(0)
const isInEnterprise = ref(false)
const curStepType = ref(0)
const isShowEquipmentClosePopup = ref(false)


const viewerClick = (e) => {
    if (curSelectType === 2) {
        let curPosition = {}

        if (e.wgs84Position && e.wgs84Position.alt > 0) {
            curPosition = {
                lng: e.wgs84Position.lng,
                lat: e.wgs84Position.lat,
                alt: e.wgs84Position.alt,
            }
        } else {
            curPosition = {
                lng: e.wgs84SurfacePosition.lng,
                lat: e.wgs84SurfacePosition.lat,
                alt: e.wgs84SurfacePosition.alt,
            }
        }

        let point = window.$turf.point([curPosition.lng, curPosition.lat])

        const isInPolygon = qyfw.features.some(item => {
            let polygon = window.$turf.polygon(item.geometry.coordinates)


            return window.$turf.booleanPointInPolygon(point, polygon)
        })

        if (isInPolygon) {
            isInEnterprise.value = true
            disposeFlowData.value = JSON.parse(JSON.stringify(disposeDataJson.categoryTypeData[0]))
        } else {
            isInEnterprise.value = false
            disposeFlowData.value = JSON.parse(JSON.stringify(disposeDataJson.categoryTypeData[1]))
        }

        curStep.value = 0
        curStepType.value = 0

        isShowDisposeFlowPopup.value = true
        curSelectType = null
        mapStore.setStartCustomWx(startClick)
    }
}

const cancelFlowDispose = () => {
    isShowDisposeFlowPopup.value = false
    curStep.value = 0
    curStepType.value = 0
    startClick = false
    disposeFlowData.value = []
    curSelectType = null
    mapStore.setStartCustomWx(startClick)
}

const nextStep = () => {
    curStep.value += 1
    curStepType.value = disposeFlowData.value?.processFlowData[curStep.value]?.type
}

const isSelectSignPoint = () => {
    isShowDisposeFlowPopup.value = false

    message?.close()
    message = null

    if (curStepType.value === 4) {
        message = ElNotification({
            title: '提示',
            showClose: true,
            message: '进行下一步应急措施，需选中闸坝才可下一步。',
            type: 'warning',
            duration: 0,
            offset: 100,
        })
    } else {
        message = ElNotification({
            title: '提示',
            showClose: true,
            message: '进行下一步应急措施，需选中闸阀才可下一步。',
            type: 'warning',
            duration: 0,
            offset: 100,
        })
    }
}

const affirmEquipmentClose = () => {
    isShowEquipmentClosePopup.value = false
    message?.close()
    message = null
    if (curSelectType === 1) {
        if (curCustomStep === 1) {
            curCustomStep = 2

            message = ElNotification({
                title: '提示',
                showClose: true,
                message: '进行下一步应急措施，需选中闸阀才可下一步。',
                type: 'warning',
                duration: 0,
                offset: 100,
            })
        } else {
            curCustomStep = 0

            publicFun(panelData.data[0])
        }
    } else {
        nextStep()
        isShowDisposeFlowPopup.value = true
    }
}

let message = null

const isOverBtn = computed(() => disposeFlowData.value?.processFlowData ? curStep.value === disposeFlowData.value?.processFlowData.length - 1 : false)
const isNextStepBtn = computed(() => disposeFlowData.value?.processFlowData ? curStep.value < disposeFlowData.value?.processFlowData.length - 1 : false)

const isShowSelectBtn = computed(() => {
    return disposeFlowData.value?.processFlowData ?
        (curStepType.value === 4 || curStepType.value === 7)
        : false
})

window.$viewer.on(DC.MouseEventType.CLICK, viewerClick)

const clearAll = () => {
    mapStore.setShowPreLevel(false)
    window.speechSynthesis.cancel()

    lineTime && (clearTimeout(lineTime), lineTime = null)
    timeOne && (clearTimeout(timeOne), timeOne = null)
    timeTwo && (clearTimeout(timeTwo), timeTwo = null)
    timeThree && (clearTimeout(timeThree), timeThree = null)
    timeFour && (clearTimeout(timeFour), timeFour = null)
    timeFive && (clearTimeout(timeFive), timeFive = null)
    timeSix && (clearTimeout(timeSix), timeSix = null)

    track.setModel(VITE_APP_BASE + 'gltf/car.gltf', {
        show: false,
        scale: 0.0025,
        // nodeTransformations: {
        //   rotation: window.$Cesium.Quaternion.fromHeadingPitchRoll(window.$Cesium.Math.toRadians(0), window.$Cesium.Math.toRadians(0), window.$Cesium.Math.toRadians(0)),
        // }
    })

    dynamicVectorLayer?.clear()
    dynamicHtmlLayer?.clear()
    dynamicLineVectorLayer?.clear()

    isShowEquipmentClosePopup.value = false
    isShowDisposeFlowPopup.value = false
    message?.close()
    message = null
}

const disposeFlowPopupText = computed(() => {
    let text = ''
    if (curSelectType === 1) {
        text = curCustomStep === 1 ? '确认关闭该闸坝？' : '确认关闭该闸坝？'
    } else {
        text = curStepType === 4 ? '确认关闭该闸坝？' : '确认关闭该闸阀？'
    }

    return text
})



onUnmounted(() => {
    if (startClick) {
        EventBus.emit('restHandleDelChange', `3-3`)
        EventBus.emit('restHandleDelChange', `3-4`)
        EventBus.emit('restHandleDelChange', `4-1`)
        EventBus.emit('restHandleDelChange', `4-2`)
        EventBus.emit('restHandleDelChange', `4-3`)
        EventBus.emit('restHandleDelChange', `4-9`)
    }

    mapStore.setStartCustomWx(false)
    EventBus.off('wxEntityClick', wxEntityClick)

    clearAll()

    tc.clear()
    dynamicVectorLayer && window.$viewer && window.$viewer.removeLayer(dynamicVectorLayer)
    dynamicHtmlLayer && window.$viewer && window.$viewer.removeLayer(dynamicHtmlLayer)
    dynamicLineVectorLayer && window.$viewer && window.$viewer.removeLayer(dynamicLineVectorLayer)
    qyWsLayer && window.$viewer && window.$viewer.removeLayer(qyWsLayer)

    window.$viewer.off(DC.MouseEventType.CLICK, viewerClick)


    tc = null
    track = null
    dynamicVectorLayer = null
    dynamicHtmlLayer = null
    dynamicLineVectorLayer = null
    qyWsLayer = null
})
</script>

<template>
    <div>

        <div class="panel-container no-select">
            <el-carousel :autoplay="false" :interval="4000" type="card" height="360px">
                <el-carousel-item v-for="item, index in panelData.data" :key="index">
                    <template #>
                        <div class="content-box flex f-d-c">
                            <div class="title">
                                {{ item.title }}
                            </div>
                            <div class="content h0 flex-1">
                                <div class="bg-box">

                                </div>

                                <div class="describe-box">
                                    {{ item.content }}
                                </div>
                            </div>

                            <div class="footer-btn" v-show="item.type == 'demo'">
                                <div class="start-btn" @click="schemeStart(item, 1)">
                                    开始模拟
                                </div>
                            </div>

                            <div class="footer-btn" v-show="item.type != 'demo'">
                                <div class="start-btn" @click="schemeStart(item, 2)">
                                    自定义风险源
                                </div>
                            </div>
                        </div>
                    </template>
                </el-carousel-item>
            </el-carousel>
        </div>

        <el-dialog class="dark-dialog" v-model="isShowDisposeFlowPopup" :append-to-body="true"
            :close-on-click-modal="false" :close-on-press-escape="false" :show-close="false" title="风险处置流程" width="500">
            <div>
                <div v-for="item, ind in disposeFlowData.processFlowData" :key="ind" v-show="ind === curStep">{{
                    item.message }}
                </div>
            </div>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="cancelFlowDispose">取消</el-button>
                    <el-button type="primary" v-show="isShowSelectBtn" @click="isSelectSignPoint">{{ curStepType === 4 ?
                        '选择闸坝' : '选择闸阀' }}</el-button>

                    <el-button type="primary" @click="cancelFlowDispose" v-show="isOverBtn">结束</el-button>
                    <el-button :disabled="isShowSelectBtn" type="primary" @click="nextStep"
                        v-show="isNextStepBtn">下一步</el-button>
                </div>
            </template>
        </el-dialog>

        <el-dialog class="dark-dialog" v-model="isShowEquipmentClosePopup" :append-to-body="true"
            :close-on-click-modal="false" :close-on-press-escape="false" :show-close="false" title="" width="500">
            <div>
                {{
                    disposeFlowPopupText
                }}
            </div>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="isShowEquipmentClosePopup = false">取消</el-button>
                    <el-button type="primary" @click="affirmEquipmentClose">确认</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<style scoped lang="scss">
.panel-container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 960px;
    height: 440px;
    pointer-events: all;

    ::v-deep(.el-carousel) {
        .el-carousel__item {
            background: #2E4274;

            .content-box {
                padding: 10px 0;
                width: 100%;
                height: 100%;
                color: #fff;

                .title {
                    padding-left: 40px;
                    height: 80px;
                    line-height: 80px;
                    font-size: 44px;
                    font-weight: bold;
                    font-style: initial;
                    background: #3a7bd5;
                    /* fallback for old browsers */
                    background: -webkit-linear-gradient(to right, #3a7bd5, rgba(255, 255, 255, 0.1));
                    /* Chrome 10-25, Safari 5.1-6 */
                    background: linear-gradient(to right, #3a7bd5, rgba(255, 255, 255, 0.1));
                    /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
                }

                .content {
                    margin-top: 20px;
                    padding: 0 20px;

                    .describe-box {
                        line-height: 36px;
                    }
                }

                .footer-btn {
                    margin-bottom: 40px;
                    height: 40px;
                    line-height: 40px;
                    text-align: center;
                }
            }
        }
    }
}

.no-select {
    user-select: none;
    /* Standard syntax */
    -webkit-user-select: none;
    /* Safari/Chrome */
    -moz-user-select: none;
    /* Firefox */
    -ms-user-select: none;
    /* Internet Explorer/Edge */
}

.start-btn,
.start-btn:focus,
.start-btn:hover {
    padding: 0 10px;
    display: inline-block;
    position: relative;
    min-width: 96px;
    border: none;
    border-radius: 8px;
    background: #491cc5;
    /* fallback for old browsers */
    background: -webkit-linear-gradient(to bottom, #491cc5, #5f80f5);
    /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to bottom, #491cc5, #5f80f5);
    /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

    color: #fff;
    font-size: 1rem;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
    transition: transform ease-in 0.1s, box-shadow ease-in 0.25s;
    transform: skewX(8deg);
}

.start-btn:before,
.start-btn:after {
    content: "";
    display: block;
    position: absolute;
    width: 140%;
    height: 100%;
    left: -20%;
    z-index: -1000;
    transition: all ease-in-out 0.5s;
    background-repeat: no-repeat;
}

.start-btn:before {
    display: none;
    top: -75%;
    background-image: radial-gradient(circle, #3E56B2 20%, transparent 20%), radial-gradient(circle, transparent 20%, #3E56B2 20%, transparent 30%), radial-gradient(circle, #3E56B2 20%, transparent 20%), radial-gradient(circle, #3E56B2 20%, transparent 20%), radial-gradient(circle, transparent 10%, #3E56B2 15%, transparent 20%), radial-gradient(circle, #3E56B2 20%, transparent 20%), radial-gradient(circle, #3E56B2 20%, transparent 20%), radial-gradient(circle, #3E56B2 20%, transparent 20%), radial-gradient(circle, #3E56B2 20%, transparent 20%);
    background-size: 10% 10%, 20% 20%, 15% 15%, 20% 20%, 18% 18%, 10% 10%, 15% 15%, 10% 10%, 18% 18%;
}

.start-btn:after {
    display: none;
    bottom: -75%;
    background-image: radial-gradient(circle, #3E56B2 20%, transparent 20%), radial-gradient(circle, #3E56B2 20%, transparent 20%), radial-gradient(circle, transparent 10%, #3E56B2 15%, transparent 20%), radial-gradient(circle, #3E56B2 20%, transparent 20%), radial-gradient(circle, #3E56B2 20%, transparent 20%), radial-gradient(circle, #3E56B2 20%, transparent 20%), radial-gradient(circle, #3E56B2 20%, transparent 20%);
    background-size: 15% 15%, 20% 20%, 18% 18%, 20% 20%, 15% 15%, 10% 10%, 20% 20%;
}

.start-btn:active {
    transform: scale(0.9);
    background-color: #5e7ae9;
    box-shadow: 0 2px 25px rgba(94, 122, 233, .2);
}

.start-btn:active:before {
    display: block;
    animation: anim-top ease-in-out 0.75s forwards;
}

.start-btn:active:after {
    display: block;
    animation: anim-bottom ease-in-out 0.75s forwards;
}

@keyframes anim-top {
    0% {
        background-position: 5% 90%, 10% 90%, 10% 90%, 15% 90%, 25% 90%, 25% 90%, 40% 90%, 55% 90%, 70% 90%;
    }

    50% {
        background-position: 0% 80%, 0% 20%, 10% 40%, 20% 0%, 30% 30%, 22% 50%, 50% 50%, 65% 20%, 90% 30%;
    }

    100% {
        background-position: 0% 70%, 0% 10%, 10% 30%, 20% -10%, 30% 20%, 22% 40%, 50% 40%, 65% 10%, 90% 20%;
        background-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%;
    }
}

@keyframes anim-bottom {
    0% {
        background-position: 10% -10%, 30% 10%, 55% -10%, 70% -10%, 85% -10%, 70% -10%, 70% 0%;
    }

    50% {
        background-position: 0% 80%, 20% 80%, 45% 60%, 60% 100%, 75% 70%, 95% 60%, 105% 0%;
    }

    100% {
        background-position: 0% 90%, 20% 90%, 45% 70%, 60% 110%, 75% 80%, 95% 70%, 110% 10%;
        background-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%;
    }
}
</style>

 src/views/pd/components/dynamicPanel.vue

@@ -2,7 +2,7 @@
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2024-11-09 15:41:35
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2025-08-18 20:00:48
 * @LastEditTime: 2025-09-07 20:29:02
 * @FilePath: \bigScreen\src\views\pd\components\dynamicPanel.vue
 * @Description: 
 * 
@@ -17,28 +17,14 @@
import qysgwslx from "@/assets/json/qysgwslx"
import disposeDataJson from "@/assets/json/dispose"
const { VITE_APP_BASE } = import.meta.env

const emit = defineEmits(['closePanel'])
import { computed, onUnmounted } from 'vue'

import { computed, onBeforeUnmount, onUnmounted } from 'vue'
import { spatialAnalysisPoint } from "@/api/space/space"

import { useMap } from 'store/map'
const mapStore = useMap()
import { usePointStore } from 'store/usepoint'
const pointStore = usePointStore()

onMounted(() => {
    pointStore.updateSharedData(1)
})

let lineTime = null
let timeOne = null
let timeTwo = null
let timeThree = null
let timeFour = null
let timeFive = null
let timeSix = null
const showPanel = defineModel('showPanel')
const emit = defineEmits(['closePanel'])

const panelData = reactive({
    data: [
@@ -47,53 +33,6 @@
            key: 1,
            title: '典型案例',
            content: '化工园区罐区泄漏事故: 化工园区某企业储罐泄漏，如不采取措施，将造成污染事故，影响到长江下游水质。',

            oneCentent: '2024年11月11日11时，化工园区某企业储罐泄漏。企业关闭前置阀门切断泄漏源，向罐内适量注水，抬高液位。',
            onePointPosition: {
                lng: 115.60652633,
                lat: 29.80893013,
                alt: 19
            },
            onetime: 0,

            twoContent: '启动应急池的使用，将泄漏的化学原料引导至应急池中。',
            twoPointPosition: {
                lng: 115.6074303,
                lat: 29.80929992,
                alt: 17
            },
            twotime: 5000,

            lineCenter: {
                lng: 115.60786813,
                lat: 29.80937902,
                alt: 30
            },
            linePosition: '115.60783535,29.80913790,30;115.60782622,29.80955698,30',
            lineTime: 5000,
            threeContent: '企业采取紧急措施后，还有部分松节油进入厂外雨水管网。',
            threePointPosition: {
                lng: 115.60782622,
                lat: 29.80955698,
                alt: 30
            },
            threetime: 15000,

            fourContent: '关闭园区闸坝，拦截污染水体。',
            fourPointPosition: {
                lng: 115.6269944,
                lat: 29.80695862,
                alt: 5
            },
            fourtime: 15000,

            fiveContent: '应急指挥部指导企业处理受污染废水, 监测公共应急池水质 ，根据水质情况分批次进入生化系统处理。',
            fivePointPosition: {
                lng: 115.62761928,
                lat: 29.80836521,
                alt: 7
            },
            fivetime: 20000,
        },

        {
@@ -106,450 +45,8 @@
})

let dynamicVectorLayer = new DC.VectorLayer('dynamicVectorLayer').addTo(window.$viewer)
let dynamicHtmlLayer = new DC.HtmlLayer('dynamicHtmlLayer').addTo(window.$viewer)
let dynamicLineVectorLayer = new DC.VectorLayer('dynamicLineVectorLayer').addTo(window.$viewer)
let customVectorLayer = new DC.HtmlLayer('customVectorLayer').addTo(window.$viewer)
let qyWsLayer = new DC.VectorLayer('qyWsLayer').addTo(window.$viewer)

let modelPosition = [
    {
        lng: 115.10640155,
        lat: 27.28121605
    },
    {
        lng: 115.10641953,
        lat: 27.28084006
    },
    {
        lng: 115.10641886,
        lat: 27.28026147
    },
    {
        lng: 115.10642486,
        lat: 27.27994712,
    },
    {
        lng: 115.10640964,
        lat: 27.27928393,
    },
    {
        lng: 115.10639803,
        lat: 27.27848014
    }
]

let positions = modelPosition.map(i => [i.lng, i.lat, i.ele || 64].join(',')).join(';')
let tc = new DC.TrackController(window.$viewer)
let track = new DC.Track(positions, 5)
track.setModel(VITE_APP_BASE + 'gltf/car.gltf', {
    show: true,
    scale: 0.0025,
    // nodeTransformations: {
    //   rotation: window.$Cesium.Quaternion.fromHeadingPitchRoll(window.$Cesium.Math.toRadians(0), window.$Cesium.Math.toRadians(0), window.$Cesium.Math.toRadians(0)),
    // }
})

tc.addTrack(track)
let startClick = false
let curSelectType = null

const synth = window.speechSynthesis

const speak = (msg, continueFun = () => { }) => {
    let u = new SpeechSynthesisUtterance()
    let voices = synth.getVoices()
    u.text = msg
    u.rate = 1.2
    let findObj = voices.some(voice => voice.lang == 'zh-CN')

    if (!findObj) {
        u.lang = 'zh-TW'
    }

    u.onend = () => {
        continueFun()
    }
    synth.speak(u)
}

const publicFun = (item) => {
    if (startClick) pointStore.updateSharedData(3)

    let fourCenter = DC.Position.fromObject(item.fourPointPosition)
    let fourCircle = new DC.Circle(fourCenter, 30)
    fourCircle.setStyle({
        material: new DC.CircleWaveMaterialProperty({
            color: DC.Color.fromRandom(),
            speed: 20,
            count: 5,
            gradient: 0.5
        })
    })
    dynamicVectorLayer.addOverlay(fourCircle)

    let fourContent = new DC.DivIcon(
        new DC.Position(item.fourPointPosition.lng, item.fourPointPosition.lat, item.fourPointPosition.alt),
        `<div class="dynamic-map-popup">
                  <div class="content-wrap">
                    <div class="content">
                      <p>${item.fourContent}</p>
                    </div>
                  </div>
                  <div class="arrow"></div>
                </div>`
    )
    dynamicHtmlLayer.addOverlay(fourContent)

    window.$viewer.flyToPosition(new DC.Position(item.fourPointPosition.lng, item.fourPointPosition.lat, 400, 0, -90, 0), () => {
        speak(item.fourContent, () => {
            if (item.fivePointPosition) {
                let fiveCenter = DC.Position.fromObject(item.fivePointPosition)
                let fiveCircle = new DC.Circle(fiveCenter, 10)
                fiveCircle.setStyle({
                    material: new DC.CircleWaveMaterialProperty({
                        color: DC.Color.fromRandom(),
                        speed: 20,
                        count: 5,
                        gradient: 0.5
                    })
                })
                dynamicVectorLayer.addOverlay(fiveCircle)

                let fiveContent = new DC.DivIcon(
                    new DC.Position(item.fivePointPosition.lng, item.fivePointPosition.lat, item.fivePointPosition.alt),
                    `<div class="dynamic-event-profile-map-popup">
                      <div class="content-wrap">
                        <div class="content">
                          <p>${item.fiveContent}</p>
                        </div>
                      </div>
                      <div class="arrow"></div>
                    </div>`
                )
                dynamicHtmlLayer.addOverlay(fiveContent)
                // 执行对应的事件函数
                window.$viewer.flyToPosition(new DC.Position(item.fivePointPosition.lng, item.fivePointPosition.lat, 400, 0, -90, 0), () => {
                    speak(item.fiveContent, () => {
                        if (item.sixPointPosition) {
                            let sixCenter = DC.Position.fromObject(item.sixPointPosition)
                            let sixCircle = new DC.Circle(sixCenter, 10)
                            sixCircle.setStyle({
                                material: new DC.CircleWaveMaterialProperty({
                                    color: DC.Color.fromRandom(),
                                    speed: 20,
                                    count: 5,
                                    gradient: 0.5
                                })
                            })
                            dynamicVectorLayer.addOverlay(sixCircle)

                            let sixContent = new DC.DivIcon(
                                new DC.Position(item.sixPointPosition.lng, item.sixPointPosition.lat, 70),
                                `<div class="dynamic-map-popup">
                              <div class="content-wrap">
                                <div class="content">
                                  <p>${item.sixContent}</p>
                                </div>
                              </div>
                              <div class="arrow"></div>
                          </div>`
                            )
                            dynamicHtmlLayer.addOverlay(sixContent)
                            // 执行对应的事件函数
                            window.$viewer.flyToPosition(new DC.Position(item.sixPointPosition.lng, item.sixPointPosition.lat, 400, 0, -90, 0), () => {
                                speak(item.sixContent, () => {
                                    if (item.sevenPointPosition) {
                                        let sevenCenter = DC.Position.fromObject(item.sevenPointPosition)
                                        let sevenCircle = new DC.Circle(sevenCenter, 10)
                                        sevenCircle.setStyle({
                                            material: new DC.CircleWaveMaterialProperty({
                                                color: DC.Color.fromRandom(),
                                                speed: 20,
                                                count: 5,
                                                gradient: 0.5
                                            })
                                        })
                                        dynamicVectorLayer.addOverlay(sevenCircle)

                                        let sevenContent = new DC.DivIcon(
                                            new DC.Position(item.sevenPointPosition.lng, item.sevenPointPosition.lat, 70),
                                            `<div class="dynamic-event-profile-map-popup">
                              <div class="content-wrap">
                                <div class="content">
                                  <p>${item.sevenContent}</p>
                                </div>
                              </div>
                              <div class="arrow"></div>
                          </div>`
                                        )
                                        dynamicHtmlLayer.addOverlay(sevenContent)
                                        // 执行对应的事件函数
                                        window.$viewer.flyToPosition(new DC.Position(item.sevenPointPosition.lng, item.sevenPointPosition.lat, 400, 0, -90, 0), () => {
                                            speak(item.sevenContent)
                                        }, 3)
                                    }
                                })
                            }, 3)
                        }
                    })
                }, 3)
            }
        })
    }, 3)
}

const twoFun = (item, cb = () => { }) => {
    if (startClick) pointStore.updateSharedData(1)

    let twoCenter = DC.Position.fromObject(item.twoPointPosition)
    let twoCircle = new DC.Circle(twoCenter, 10)
    twoCircle.setStyle({
        material: new DC.CircleWaveMaterialProperty({
            color: DC.Color.fromRandom(),
            speed: 20,
            count: 5,
            gradient: 0.5
        })
    })
    dynamicVectorLayer.addOverlay(twoCircle)

    let twoContent = new DC.DivIcon(
        new DC.Position(item.twoPointPosition.lng, item.twoPointPosition.lat, item.twoPointPosition.alt),
        `<div class="dynamic-event-profile-map-popup">
          <div class="content-wrap">
            <div class="content">
              <p>${item.twoContent}</p>
              </div>
              </div>
              <div class="arrow"></div>
              </div>`
        // <p>特征污染物：${item.specificPollutant}</p>
    )
    dynamicHtmlLayer.addOverlay(twoContent)
    // 执行对应的事件函数
    window.$viewer.flyToPosition(new DC.Position(item.twoPointPosition.lng, item.twoPointPosition.lat, 400, 0, -90, 0), () => {
        speak(item.twoContent, () => {
            cb()
        })
    }, 3)
}

const createLinePath = (item, cb = () => { }) => {
    if (item.linePosition) {
        let polyline = new DC.Polyline(item.linePosition)
        polyline.setStyle({
            width: 20,
            material: new DC.PolylineImageTrailMaterialProperty({
                color: DC.Color.RED,
                speed: 20,
                image: VITE_APP_BASE + 'img/mapicon/right.png',
                repeat: { x: 5, y: 1 }
            }),
            clampToGround: false
        })

        dynamicLineVectorLayer.addOverlay(polyline)
    } else {
        if (startClick) pointStore.updateSharedData(2)

        let threeCenter = DC.Position.fromObject(item.threePointPosition)
        let threeCircle = new DC.Circle(threeCenter, 30)
        threeCircle.setStyle({
            material: new DC.CircleWaveMaterialProperty({
                color: DC.Color.fromRandom(),
                speed: 20,
                count: 5,
                gradient: 0.5
            })
        })
        dynamicVectorLayer.addOverlay(threeCircle)
    }

    let threeContent = new DC.DivIcon(
        new DC.Position(item.threePointPosition.lng, item.threePointPosition.lat, item.threePointPosition.alt),
        `<div class="dynamic-event-profile-map-popup">
          <div class="content-wrap">
            <div class="content">
              <p>${item.threeContent}</p>
              </div>
              </div>
              <div class="arrow"></div>
              </div>`
        // <p>特征污染物：${item.specificPollutant}</p>
    )
    dynamicHtmlLayer.addOverlay(threeContent)
    // 执行对应的事件函数

    window.$viewer.flyToPosition(new DC.Position(item.threePointPosition.lng, item.threePointPosition.lat, 400, 0, -90, 0), () => {
        speak(item.threeContent, () => {
            cb()
        })
    }, 3)
}
const parseLineString = (lineString) => {
    // 移除 "LINESTRING(" 和 ")"
    const cleanedString = lineString.replace(/^LINESTRING\(/, '').replace(/\)$/, '')

    // 使用逗号分割成坐标对字符串数组
    const coordinatePairsString = cleanedString.split(',')

    // 将每个坐标对字符串转换为数组，并解析成浮点数
    const coordinatesArray = coordinatePairsString.map(pair => {
        const [lon, lat] = pair.trim().split(' ')
        return [parseFloat(lon), parseFloat(lat)]
    })

    return coordinatesArray
}

let publicEventHandle = {
    oneCentent: '某某年某某月某某日，企业发生化学原料危害品泄漏。',
    onePointPosition: {
        lng: null,
        lat: null,
        alt: null
    },
    onetime: 0,

    twoContent: '关闭所有可能外溢事故污水的外排口，利用企业自身的围堰、应急池等环境应急防控设施，将污水控制在企业厂区内部。',
    twoPointPosition: {
        lng: null,
        lat: null,
        alt: null
    },
    twotime: 5000,

    threeContent: '通过专用管道或临时转输措施，与相邻企业应急池、园区公共应急池等互联互通，拦截处置事故污水。',
    threePointPosition: {
        lng: null,
        lat: null,
        alt: null
    },
    threetime: 15000,

    fourContent: '利用化工集中区内的坑塘、河道、沟渠以及周边水系等，构建环境应急防控空间，对进出园区的水体实施封闭或分段管控。',
    fourPointPosition: {
        lng: null,
        lat: null,
        alt: null
    },
    fourtime: 15000,
}

const wxEntityClick = (e) => {
    if (curStepType.value === 4 && e.overlay.attrParams.type != 4) {
        ElMessage({
            message: '请选择闸坝.',
            type: 'warning',
        })

        return
    }

    if (curStepType.value === 7 && e.overlay.attrParams.type != 4 && e.overlay.attrParams.type != 3) {
        ElMessage({
            message: '请选择闸阀.',
            type: 'warning',
        })

        return
    }

    isShowEquipmentClosePopup.value = true
    return

    const { attrParams } = e.overlay
    clearAll()
    pointStore.updateSharedData(1)
    mapStore.setShowPreLevel(true)

    spatialAnalysisPoint({
        lng: attrParams.lng,
        lat: attrParams.lat
    }).then(res => {
        let arr = res.data.data

        publicEventHandle.onePointPosition = {
            lng: attrParams.lng,
            lat: attrParams.lat,
            alt: 16
        }

        arr.forEach(item => {
            if (item.preLevel == 1) {
                publicEventHandle.twoPointPosition = {
                    lng: item.lng,
                    lat: item.lat,
                    alt: item.ele
                }
            }
            if (item.preLevel == 2 && item.geom) {
                var line = window.$turf.lineString(parseLineString(item.geom))
                var pt = window.$turf.point([attrParams.lng, attrParams.lat])
                var snapped = window.$turf.nearestPointOnLine(line, pt, { units: "miles" })
                publicEventHandle.threePointPosition = {
                    lng: snapped.geometry.coordinates[0],
                    lat: snapped.geometry.coordinates[1],
                    alt: 30
                }
            }

            if (item.preLevel == 3) {
                publicEventHandle.fourPointPosition = {
                    lng: item.lng,
                    lat: item.lat,
                    alt: item.ele
                }
            }
        })

        timeOne = setTimeout(() => {
            function oneLoad () {
                let oneCenter = DC.Position.fromObject(publicEventHandle.onePointPosition)
                let oneCircle = new DC.Circle(oneCenter, 20)
                oneCircle.setStyle({
                    material: new DC.CircleWaveMaterialProperty({
                        color: DC.Color.RED.withAlpha(0.9),
                        speed: 20,
                        count: 5,
                        gradient: 0.5
                    })
                })
                dynamicVectorLayer.addOverlay(oneCircle)

                let oneCentent = new DC.DivIcon(
                    new DC.Position(publicEventHandle.onePointPosition.lng, publicEventHandle.onePointPosition.lat, publicEventHandle.onePointPosition.alt),
                    `<div class="dynamic-map-popup">
          <div class="content-wrap">
            <div class="content">
              <p>${publicEventHandle.oneCentent}</p>
              </div>
              </div>
              <div class="arrow"></div>
              </div>`
                    // <p>特征污染物：${publicEventHandle.specificPollutant}</p>
                )
                dynamicHtmlLayer.addOverlay(oneCentent)

                speak(publicEventHandle.oneCentent, () => {
                    twoFun(publicEventHandle, () => {
                        createLinePath(publicEventHandle, () => {
                            publicFun(publicEventHandle)
                        })
                    })
                })
            }
            if (publicEventHandle.showModel) {
                oneLoad()
            } else {
                window.$viewer.flyToPosition(new DC.Position(publicEventHandle.onePointPosition.lng, publicEventHandle.onePointPosition.lat, 400, 0, -90, 0), () => {
                    oneLoad()
                }, 3)
            }
        }, publicEventHandle.onetime)
    })
}

EventBus.on('wxEntityClick', wxEntityClick)

qysgwslx.features.forEach(item => {
    let polyline = new DC.Polyline(item.geometry.coordinates.join(';'))
@@ -564,296 +61,413 @@
    qyWsLayer.addOverlay(polyline)
})

const schemeStart = (item, type) => {
    emit('closePanel')
    clearAll()
const clearAll = () => {

    if (type == 1) {
        curSelectType = 1
        if (startClick) {
            EventBus.emit('restHandleDelChange', `3-3`)
            EventBus.emit('restHandleDelChange', `3-4`)
            EventBus.emit('restHandleDelChange', `4-1`)
            EventBus.emit('restHandleDelChange', `4-2`)
            EventBus.emit('restHandleDelChange', `4-3`)
            EventBus.emit('restHandleDelChange', `4-9`)
        }
    EventBus.emit('restHandleDelChange', `2`)
    EventBus.emit('restHandleDelChange', `3-2`)
    EventBus.emit('restHandleDelChange', `3-4`)

        if (item.showModel) {
            window.$viewer.flyToPosition("115.10587903,27.28374884,400,0,-90", () => {
                track.setModel(VITE_APP_BASE + 'gltf/car.gltf', {
                    show: true,
                    scale: 0.0025,
                    // nodeTransformations: {
                    //   rotation: window.$Cesium.Quaternion.fromHeadingPitchRoll(window.$Cesium.Math.toRadians(0), window.$Cesium.Math.toRadians(0), window.$Cesium.Math.toRadians(0)),
                    // }
                })
    modelData.disposeData.forEach(i => {
        'selectedNum' in i && (i.selectedNum = 0)
        'selectedID' in i && (i.selectedID = [])
    })
    customData.forEach(j => j.disposeData.forEach(i => {
        'selectedNum' in i && (i.selectedNum = 0)
        'selectedID' in i && (i.selectedID = [])
    }))

                tc.play()
                tc.viewTrack(track, {
                    mode: '2',
                    pitch: -45,
                    range: 400
                })
            })
        }

        timeOne = setTimeout(() => {
            function oneLoad () {
                let oneCenter = DC.Position.fromObject(item.onePointPosition)
                let oneCircle = new DC.Circle(oneCenter, 20)
                oneCircle.setStyle({
                    material: new DC.CircleWaveMaterialProperty({
                        color: DC.Color.RED.withAlpha(0.9),
                        speed: 20,
                        count: 5,
                        gradient: 0.5
                    })
                })
                dynamicVectorLayer.addOverlay(oneCircle)

                let oneCentent = new DC.DivIcon(
                    new DC.Position(item.onePointPosition.lng, item.onePointPosition.lat, item.onePointPosition.alt),
                    `<div class="dynamic-map-popup">
          <div class="content-wrap">
            <div class="content">
              <p>${item.oneCentent}</p>
              </div>
              </div>
              <div class="arrow"></div>
              </div>`
                    // <p>特征污染物：${item.specificPollutant}</p>
                )
                dynamicHtmlLayer.addOverlay(oneCentent)

                speak(item.oneCentent, () => {
                    if (item.key == 2) {
                        twoFun(item, () => {
                            createLinePath(item, () => {
                                publicFun(item)
                            })
                        })
                    } else if (item.key == 1) {
                        twoFun(item, () => {
                            createLinePath(item, () => {
                                publicFun(item)
                            })
                        })
                    } else {
                        twoFun(item, () => {
                            createLinePath(item, () => {
                                publicFun(item)
                            })
                        })
                    }
                })
            }
            if (item.showModel) {
                oneLoad()
            } else {
                window.$viewer.flyToPosition(new DC.Position(item.onePointPosition.lng, item.onePointPosition.lat, 400, 0, -90, 0), () => {
                    oneLoad()
                }, 3)
            }
        }, item.onetime)

        startClick = false
        mapStore.setStartCustomWx(startClick)
    } else {
        startClick = true
        curStep.value = 0
        curStepType.value = 0

        curSelectType = 2
        // mapStore.setStartCustomWx(startClick)
        EventBus.emit('restHandleCheckChange', `3-3`)
        EventBus.emit('restHandleCheckChange', `3-4`)
    }
}

const disposeFlowData = ref([])
const isShowDisposeFlowPopup = ref(false)
const curStep = ref(0)
const isInEnterprise = ref(false)
const curStepType = ref(0)
const isShowEquipmentClosePopup = ref(false)


const viewerClick = (e) => {
    if (curSelectType === 2) {
        let curPosition = {}

        if (e.wgs84Position && e.wgs84Position.alt > 0) {
            curPosition = {
                lng: e.wgs84Position.lng,
                lat: e.wgs84Position.lat,
                alt: e.wgs84Position.alt,
            }
        } else {
            curPosition = {
                lng: e.wgs84SurfacePosition.lng,
                lat: e.wgs84SurfacePosition.lat,
                alt: e.wgs84SurfacePosition.alt,
            }
        }

        let point = window.$turf.point([curPosition.lng, curPosition.lat])

        const isInPolygon = qyfw.features.some(item => {
            let polygon = window.$turf.polygon(item.geometry.coordinates)


            return window.$turf.booleanPointInPolygon(point, polygon)
        })

        if (isInPolygon) {
            isInEnterprise.value = true
            disposeFlowData.value = JSON.parse(JSON.stringify(disposeDataJson.categoryTypeData[0]))
        } else {
            isInEnterprise.value = false
            disposeFlowData.value = JSON.parse(JSON.stringify(disposeDataJson.categoryTypeData[1]))
        }

        curStep.value = 0
        curStepType.value = 0

        isShowDisposeFlowPopup.value = true
        curSelectType = null
        mapStore.setStartCustomWx(startClick)
    }
}

const cancelFlowDispose = () => {
    isShowDisposeFlowPopup.value = false
    curStep.value = 0
    curStepType.value = 0
    startClick = false
    disposeFlowData.value = []
    curSelectType = null
    mapStore.setStartCustomWx(startClick)
}

const nextStep = () => {
    curStep.value += 1
    curStepType.value = disposeFlowData.value?.processFlowData[curStep.value]?.type
}

const isSelectSignPoint = () => {
    isShowDisposeFlowPopup.value = false

    message?.close()
    message = null

    if (curStepType.value === 4) {
        message = ElNotification({
            title: '提示',
            showClose: true,
            message: '进行下一步应急措施，需选中闸坝才可下一步。',
            type: 'warning',
            duration: 0,
            offset: 100,
        })
    } else {
        message = ElNotification({
            title: '提示',
            showClose: true,
            message: '进行下一步应急措施，需选中闸阀才可下一步。',
            type: 'warning',
            duration: 0,
            offset: 100,
        })
    }
}

const affirmEquipmentClose = () => {
    isShowEquipmentClosePopup.value = false
    message?.close()
    message = null

    nextStep()
    isShowDisposeFlowPopup.value = true
    mapStore.setStartCustomWx(false)
    mapStore.setNeedSelectID([])
    customVectorLayer.clear()
    dynamicVectorLayer.clear()
    contentData.value = null
    isShowPdContent.value = false
    curContentInd.value = 0
}

let message = null

const isOverBtn = computed(() => disposeFlowData.value?.processFlowData ? curStep.value === disposeFlowData.value?.processFlowData.length - 1 : false)
const isNextStepBtn = computed(() => disposeFlowData.value?.processFlowData ? curStep.value < disposeFlowData.value?.processFlowData.length - 1 : false)

const isShowSelectBtn = computed(() => {
    return disposeFlowData.value?.processFlowData ?
        (curStepType.value === 4 || curStepType.value === 7)
        : false
})

window.$viewer.on(DC.MouseEventType.CLICK, viewerClick)

const clearAll = () => {
    mapStore.setShowPreLevel(false)
    window.speechSynthesis.cancel()

    lineTime && (clearTimeout(lineTime), lineTime = null)
    timeOne && (clearTimeout(timeOne), timeOne = null)
    timeTwo && (clearTimeout(timeTwo), timeTwo = null)
    timeThree && (clearTimeout(timeThree), timeThree = null)
    timeFour && (clearTimeout(timeFour), timeFour = null)
    timeFive && (clearTimeout(timeFive), timeFive = null)
    timeSix && (clearTimeout(timeSix), timeSix = null)

    track.setModel(VITE_APP_BASE + 'gltf/car.gltf', {
        show: false,
        scale: 0.0025,
        // nodeTransformations: {
        //   rotation: window.$Cesium.Quaternion.fromHeadingPitchRoll(window.$Cesium.Math.toRadians(0), window.$Cesium.Math.toRadians(0), window.$Cesium.Math.toRadians(0)),
        // }
    })

    dynamicVectorLayer?.clear()
    dynamicHtmlLayer?.clear()
    dynamicLineVectorLayer?.clear()

    isShowEquipmentClosePopup.value = false
    isShowDisposeFlowPopup.value = false
    message?.close()
    message = null
}

onUnmounted(() => {
    if (startClick) {
        EventBus.emit('restHandleDelChange', `3-3`)
        EventBus.emit('restHandleDelChange', `3-4`)
        EventBus.emit('restHandleDelChange', `4-1`)
        EventBus.emit('restHandleDelChange', `4-2`)
        EventBus.emit('restHandleDelChange', `4-3`)
        EventBus.emit('restHandleDelChange', `4-9`)
    }

    mapStore.setStartCustomWx(false)
    EventBus.off('wxEntityClick', wxEntityClick)

const schemeStart = (item, type) => {
    emit('closePanel')
    clearAll()

    tc.clear()
    if (type === 1) {
        EventBus.emit('restHandleCheckChange', `2`)
        EventBus.emit('restHandleCheckChange', `3-2`)
        EventBus.emit('restHandleCheckChange', `3-4`)

        contentData.value = modelData
        contentData.value.disposeData[0].show = true
        curContentInd.value = 0
        isShowPdContent.value = true

        let oneCenter = DC.Position.fromObject({
            lng: contentData.value?.incidentSiteLng,
            lat: contentData.value?.incidentSiteLat,
            alt: contentData.value?.incidentSiteAlt,
        })
        let oneCircle = new DC.Circle(oneCenter, 20)
        oneCircle.setStyle({
            material: new DC.CircleWaveMaterialProperty({
                color: DC.Color.RED.withAlpha(0.9),
                speed: 20,
                count: 5,
                gradient: 0.5
            })
        })
        dynamicVectorLayer.addOverlay(oneCircle)
    } else {
        customData.forEach(item => {
            let iconEl = `
                  <div class="map-icon">
                    <img src="${item.backgroundIcon}">
                  </div>
                  `
            let divIcon = new DC.DivIcon(
                new DC.Position(item.incidentSiteLng, item.incidentSiteLat, item.incidentSiteAlt || 64),
                `<div class="public-map-popup fxy-larger">
                    ${iconEl}
                  </div>`

            )

            divIcon.attrParams = item

            divIcon.on(DC.MouseEventType.CLICK, (e) => {
                console.log(e, '-')
                EventBus.emit('restHandleCheckChange', `2`)
                EventBus.emit('restHandleCheckChange', `3-2`)
                EventBus.emit('restHandleCheckChange', `3-4`)

                contentData.value = e.overlay.attrParams
                contentData.value.disposeData[0].show = true
                curContentInd.value = 0
                isShowPdContent.value = true

                customVectorLayer.clear()
                message?.close()
                message = null
            })

            customVectorLayer.addOverlay(divIcon)
        })

        message = ElNotification({
            title: '提示',
            showClose: true,
            message: '请选择事发地。',
            type: 'warning',
            duration: 0,
            offset: 100,
        })
    }
}

const isShowPdContent = ref(false)

const contentData = ref(null)
const curContentInd = ref(0)

const isShowNextBtn = computed(() => {
    if (contentData.value === null) return false
    return curContentInd.value < contentData.value?.disposeData.length - 1
})

const isDisabledNextBtn = computed(() => {
    if (contentData.value === null) return false
    const curItem = contentData.value?.disposeData[curContentInd.value]
    return curItem.selectedNum < curItem.isSelectNum
})

const isShowSelectBtn = computed(() => {
    if (contentData.value === null) return false

    const isShow = contentData.value?.disposeData[curContentInd.value]?.isNeedHandle
    return isShow
})

const isShowSelectText = computed(() => {
    if (contentData.value === null) return ''

    return contentData.value?.disposeData[curContentInd.value]?.buttonText
})

const cancelText = computed(() => {
    if (contentData.value === null) return ''

    if (contentData.value?.disposeData.length - 1 === curContentInd.value) {
        return '结束模拟'
    } else {
        return '取消模拟'
    }
})

const wxEntityClick = (e) => {
    if (contentData.value === null) return ''

    const clickId = e.overlay.attrParams.id

    console.log(clickId, contentData.value?.disposeData[curContentInd.value]?.needSelectID, 111)

    let flag = contentData.value?.disposeData[curContentInd.value]?.needSelectID.some(i => i == clickId)
    let isSelectedCur = contentData.value?.disposeData[curContentInd.value]?.selectedID.some(i => i == clickId)

    if (isSelectedCur) {
        ElMessage({
            message: '已选择当前设施请重新选择。',
            type: 'warning',
        })

        return
    }

    if (flag) {
        contentData.value.disposeData[curContentInd.value].selectedID.push(clickId)

        contentData.value.disposeData[curContentInd.value].selectedNum += 1
    } else {
        ElMessage({
            message: '选择错误,请重新选择。',
            type: 'warning',
        })
    }
}

EventBus.on('wxEntityClick', wxEntityClick)

const modelData = {
    incidentSiteLng: 115.6129562,
    incidentSiteLat: 29.80862305,
    incidentSiteAlt: 8,

    disposeData: [
        {
            label: '事故概况',
            content: '2024年X月X日X时，某企业二甲苯储罐泄漏。企业关闭前置阀门，切断泄漏源；根据泄漏情况，向罐内适量注水，抬高液位，形成水垫层，缓解险情，配合堵漏。',
            isNeedHandle: false,
            show: false,
        },
        {
            content: '启动应急池的使用，将泄漏的化学原料引导至应急池中。',
            isNeedHandle: true,
            buttonText: '选择应急池',
            isSelectNum: 1,
            selectedNum: 0,
            needSelectID: ['1875105484274749441'],
            selectedID: [],
            show: false,
        },
        {
            content: '若该公司应急池容量不足，可通过移动泵或槽罐车将事故废水转移至临近企业事故应急池或污水处理厂事故应急池。',
            isNeedHandle: true,
            buttonText: '选择临近企业',
            isSelectNum: 1,
            selectedNum: 0,
            needSelectID: ['1875103368541917185'],
            selectedID: [],
            show: false,
        },
        {
            content: '立即关闭园区排洪渠下游闸坝，拦截污染水体。',
            isNeedHandle: true,
            buttonText: '选择闸坝',
            isSelectNum: 1,
            selectedNum: 0,
            needSelectID: ['1875105459276697601'],
            selectedID: [],
            show: false,
        },

        {
            content: '立即关闭园区上游闸坝，拦截清水，减轻应急压力。',
            isNeedHandle: true,
            buttonText: '选择闸坝',
            isSelectNum: 1,
            selectedNum: 0,
            needSelectID: ['1922914799476486145'],
            selectedID: [],
            show: false,
        },

        {
            content: '开启园区事故应急池将拦截的污水转输至池内。',
            isNeedHandle: true,
            buttonText: '选择应急池',
            isSelectNum: 1,
            selectedNum: 0,
            needSelectID: ['1922914788973948929'],
            selectedID: [],
            show: false,
        },

        {
            content: '将拦截废水从应急池中转移至污水处理厂进行处置，同时在排口下游展开应急监测，确保废水没有进入周边水系。',
            isNeedHandle: false,
            show: false,
        }
    ]
}

const customData = [
    {
        incidentSiteLng: 115.61393792,
        incidentSiteLat: 29.79786228,
        incidentSiteAlt: 11.98,
        backgroundIcon: VITE_APP_BASE + 'img/mapicon/sfd.png',
        disposeData: [
            {
                label: '事故概况',
                content: '2025年X月X日X时，危化品运输车辆沿理文路前往危化品停车场时，途经危化品停车场桥梁时，为躲避行人发生侧翻，大量盐酸流入园区南排洪渠中，如不采取措施，将造成污染事故，影响到赤湖水质，进而可能影响到下游长江水质。',
                isNeedHandle: false,
                show: false,
            },
            {
                content: '就近调集园区企业应急物资库，收集到氢氧化钠1吨（预计用时30分钟）',
                isNeedHandle: false,
                show: false,
            },
            {
                content: '立即在危化品停车场桥上游使用沙袋或挖机进行临时筑坝，拦截上游来水',
                isNeedHandle: false,
                show: false,
            },
            {
                content: '在荣联环保桥下游使用沙袋或挖机进行临时筑坝，杜绝污染团流入赤湖，在两道临时闸坝之间形成的蓄污空间内投药处置',
                isNeedHandle: false,
                show: false,
            },
            {
                content: '处理完成后打开上游临时闸坝释放清水，稀释后打开下游临时闸坝排放处理后的污水。',
                isNeedHandle: true,
                buttonText: '选择闸坝',
                isSelectNum: 3,
                selectedNum: 0,
                needSelectID: ['1922914799476486145', '1922914776902742017', '1922914784108556289'],
                selectedID: [],
                show: false,
            },

            {
                content: '开启园区事故应急池将拦截的污水转输至池内。',
                isNeedHandle: true,
                buttonText: '选择应急池',
                isSelectNum: 1,
                selectedNum: 0,
                needSelectID: ['1922914788973948929'],
                selectedID: [],
                show: false,
            },

            {
                content: '将拦截废水从应急池中转移至污水处理厂进行处置，同时在排口下游展开应急监测，确保废水没有进入周边水系。',
                isNeedHandle: false,
                show: false,
            }
        ]
    },

    {
        incidentSiteLng: 115.61264639,
        incidentSiteLat: 29.81692806,
        incidentSiteAlt: 19,
        backgroundIcon: VITE_APP_BASE + 'img/mapicon/sfd.png',
        disposeData: [
            {
                label: '事故概况',
                content: '2025年X月X日X时，某企业物料运输管道发生泄漏。企业通知供应企业停泵，关闭进入公司厂界的盐酸管道阀门；根据泄漏情况，用沙土筑成临时围堰，将盐酸圈在围堰内，然后用氢氧化钠/液碱进行中和处理。用泡沫或其它有效覆盖物进行覆盖，对泄漏区域用雾状水喷淋稀释抑制其挥发，防止泄漏盐酸挥发殃及周围建筑物及人员。',
                isNeedHandle: false,
                show: false,
            },
            {
                content: '启动应急池的使用，喷淋水将泄漏的化学原料导入厂区事故应急池。',
                isNeedHandle: true,
                buttonText: '选择应急池',
                isSelectNum: 1,
                selectedNum: 0,
                needSelectID: ['1875105480151748609'],
                selectedID: [],
                show: false,
            },
            {
                content: '立即关闭园区排洪渠下游闸坝，拦截污染水体。',
                isNeedHandle: true,
                buttonText: '选择闸坝',
                isSelectNum: 1,
                selectedNum: 0,
                needSelectID: ['1875105459276697601'],
                selectedID: [],
                show: false,
            },

            {
                content: '立即关闭园区上游闸坝，拦截清水，减轻应急压力。',
                isNeedHandle: true,
                buttonText: '选择闸坝',
                isSelectNum: 1,
                selectedNum: 0,
                needSelectID: ['1922914799476486145'],
                selectedID: [],
                show: false,
            },

            {
                content: '开启园区事故应急池将拦截的污水转输至池内。',
                isNeedHandle: true,
                buttonText: '选择应急池',
                isSelectNum: 1,
                selectedNum: 0,
                needSelectID: ['1922914788973948929'],
                selectedID: [],
                show: false,
            },

            {
                content: '将拦截废水从应急池中转移至污水处理厂进行处置，同时在排口下游展开应急监测，确保废水没有进入周边水系。',
                isNeedHandle: false,
                show: false,
            }
        ]
    }
]

const nextStep = () => {
    mapStore.setStartCustomWx(false)
    curContentInd.value += 1
    contentData.value.disposeData[curContentInd.value].show = true

    if ('needSelectID' in contentData.value.disposeData[curContentInd.value]) {
        mapStore.setNeedSelectID(contentData.value.disposeData[curContentInd.value].needSelectID)
    } else {
        mapStore.setNeedSelectID([])
    }
}

const selectEquipment = () => {
    mapStore.setStartCustomWx(true)
}

const cancelFlowDispose = () => {
    clearAll()
}

onBeforeUnmount(() => {
    clearAll()

    dynamicVectorLayer && window.$viewer && window.$viewer.removeLayer(dynamicVectorLayer)
    dynamicHtmlLayer && window.$viewer && window.$viewer.removeLayer(dynamicHtmlLayer)
    dynamicLineVectorLayer && window.$viewer && window.$viewer.removeLayer(dynamicLineVectorLayer)
    customVectorLayer && window.$viewer && window.$viewer.removeLayer(customVectorLayer)
    qyWsLayer && window.$viewer && window.$viewer.removeLayer(qyWsLayer)

    window.$viewer.off(DC.MouseEventType.CLICK, viewerClick)


    tc = null
    track = null
    dynamicVectorLayer = null
    dynamicHtmlLayer = null
    dynamicLineVectorLayer = null
    customVectorLayer = null
    qyWsLayer = null

    EventBus.off('wxEntityClick', wxEntityClick)
})
</script>

<template>
    <div>

        <div class="panel-container no-select">
        <div v-show="showPanel" class="panel-container no-select">
            <el-carousel :autoplay="false" :interval="4000" type="card" height="360px">
                <el-carousel-item v-for="item, index in panelData.data" :key="index">
                    <template #>
@@ -888,38 +502,28 @@
            </el-carousel>
        </div>

        <el-dialog class="dark-dialog" v-model="isShowDisposeFlowPopup" :append-to-body="true"
            :close-on-click-modal="false" :close-on-press-escape="false" :show-close="false" title="风险处置流程" width="500">
            <div>
                <div v-for="item, ind in disposeFlowData.processFlowData" :key="ind" v-show="ind === curStep">{{
                    item.message }}
        <div v-show="isShowPdContent" class="right-container">
            <div class="title">
                情景模拟
            </div>

            <div class="content">
                <div :class="{ 'text-orange': ind === curContentInd }" v-show="item.show"
                    v-for="item, ind in contentData?.disposeData" :key="ind">
                    {{ item.content }}
                </div>
            </div>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="cancelFlowDispose">取消</el-button>
                    <el-button type="primary" v-show="isShowSelectBtn" @click="isSelectSignPoint">{{ curStepType === 4 ?
                        '选择闸坝' : '选择闸阀' }}</el-button>

                    <el-button type="primary" @click="cancelFlowDispose" v-show="isOverBtn">结束</el-button>
                    <el-button :disabled="isShowSelectBtn" type="primary" @click="nextStep"
                        v-show="isNextStepBtn">下一步</el-button>
                </div>
            </template>
        </el-dialog>

        <el-dialog class="dark-dialog" v-model="isShowEquipmentClosePopup" :append-to-body="true"
            :close-on-click-modal="false" :close-on-press-escape="false" :show-close="false" title="" width="500">
            <div>
                {{ curStepType === 4 ? '确认关闭该闸坝？' : '确认关闭该闸阀？' }}
            <div class="footer-btn">
                <el-button @click="cancelFlowDispose">{{ cancelText }}</el-button>
                <el-button :disabled="isDisabledNextBtn" type="primary" @click="nextStep"
                    v-show="isShowNextBtn">下一步</el-button>
                <el-button :disabled="!isDisabledNextBtn" type="primary" v-show="isShowSelectBtn"
                    @click="selectEquipment">{{
                        isShowSelectText
                    }}</el-button>
            </div>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="isShowEquipmentClosePopup = false">取消</el-button>
                    <el-button type="primary" @click="affirmEquipmentClose">确认</el-button>
                </div>
            </template>
        </el-dialog>
        </div>
    </div>
</template>

@@ -1090,4 +694,38 @@
        background-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%;
    }
}

.right-container {
    padding: 10px;
    display: flex;
    color: #fff;

    .title {
        line-height: 40px;
    }

    .content {
        margin: 10px 0;
        flex: 1;

        &>div {
            text-indent: 2em;
            line-height: 32px;
        }

        .text-orange {
            color: orange;
        }
    }

    .footer-btn {
        display: flex;
        flex-direction: row;
        justify-content: center;

        ::v-deep(.el-button) {
            width: 96px;
        }
    }
}
</style>

 src/views/pd/index.vue

@@ -2,7 +2,7 @@
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2023-03-10 15:27:59
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2025-02-12 19:37:16
 * @LastEditTime: 2025-09-07 15:26:12
 * @FilePath: \bigScreen\src\views\pd\index.vue
 * @Description: 综合设计
 * 
@@ -21,56 +21,56 @@
const showPanel = ref(true)

const showPanelChange = () => {
  showPanel.value = !showPanel.value
    showPanel.value = !showPanel.value
}

nextTick(() => {
  EventBus.emit('restHandleCheckChange', `3-9`)
    EventBus.emit('restHandleCheckChange', `3-9`)
})

onUnmounted(() => {
  EventBus.emit('restHandleDelChange', `3-9`)
    EventBus.emit('restHandleDelChange', `3-9`)
})
</script>

<template>
  <div class="container page-container">
    <div class="telescopic-panel" @click="showPanelChange">
      <el-icon v-show="showPanel">
        <CaretLeft />
      </el-icon>
      <el-icon v-show="!showPanel">
        <CaretRight />
      </el-icon>
    <div class="container page-container">
        <div class="telescopic-panel" @click="showPanelChange">
            <el-icon v-show="showPanel">
                <CaretLeft />
            </el-icon>
            <el-icon v-show="!showPanel">
                <CaretRight />
            </el-icon>
        </div>

        <dynamic-panel v-model:showPanel="showPanel" @closePanel="showPanelChange"></dynamic-panel>

        <right-container v-show="mapStore.showPreLevel"></right-container>
    </div>

    <dynamic-panel v-show="showPanel" @closePanel="showPanelChange"></dynamic-panel>

    <right-container v-show="mapStore.showPreLevel"></right-container>
  </div>
</template>

<style lang="scss" scoped>
.container {
  position: absolute;
  width: 100%;
  height: 100%;

  .telescopic-panel {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 50%;
    left: 0;
    width: 20px;
    height: 60px;
    border-radius: 0 6px 6px 0;
    box-shadow: inset 0 0 40px #409eff;
    pointer-events: all;
    color: #fff;
    transform: translate(0, -50%);
    cursor: pointer;
  }
    width: 100%;
    height: 100%;

    .telescopic-panel {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 50%;
        left: 0;
        width: 20px;
        height: 60px;
        border-radius: 0 6px 6px 0;
        box-shadow: inset 0 0 40px #409eff;
        pointer-events: all;
        color: #fff;
        transform: translate(0, -50%);
        cursor: pointer;
    }
}
</style>

			@@ -2,7 +2,7 @@
			* @Author: shuishen 1109946754@qq.com
			* @Date: 2024-10-31 10:47:29
			* @LastEditors: shuishen 1109946754@qq.com
			* @LastEditTime: 2025-08-18 18:49:54
			* @LastEditTime: 2025-09-07 20:23:17
			* @FilePath: \bigScreen\src\pages\map\components\scomponents\layersControl.vue
			* @Description:
			*
			@@ -149,6 +149,7 @@
			label: '企业分布',
			type: 'layer',
			subType: 'labelPoint',
			customWx: true,
			method: getPage,
			params: {
			size: 1000
			@@ -212,6 +213,7 @@
			label: '应急池',
			type: 'layer',
			subType: 'labelPoint',
			customWx: true,
			method: getList,
			params: {
			type: 2,
			@@ -738,6 +740,60 @@
			label: 'label',
			}

			let curAddClassDoms = []

			watch(
			() => mapStore.needSelectID,
			(newValue, oldValue) => {
			if (curAddClassDoms.length > 0) {
			curAddClassDoms.forEach(dom => {
			dom.classList.remove('is-need-item')
			})

			curAddClassDoms = []
			}

			if (newValue.length > 0) {
			addTileLayers['qyfb']?.getOverlays().forEach(item => {
			newValue.forEach(id => {
			if (item.attrParams.id == id) {
			let dom = item.delegate.children[0]

			dom.classList.add('is-need-item')

			curAddClassDoms.push(dom)
			}
			})
			})

			addTileLayers['sg-yjc']?.getOverlays().forEach(item => {
			newValue.forEach(id => {
			if (item.attrParams.id == id) {
			let dom = item.delegate.children[0]

			dom.classList.add('is-need-item')

			curAddClassDoms.push(dom)
			}
			})
			})

			addTileLayers['zb']?.getOverlays().forEach(item => {
			newValue.forEach(id => {
			if (item.attrParams.id == id) {
			let dom = item.delegate.children[0]

			dom.classList.add('is-need-item')

			curAddClassDoms.push(dom)
			}
			})
			})
			}
			}
			)


			const checkType = (value) => {
			if (typeof value === 'object' && value !== null && !Array.isArray(value)) {
			return 'obj'

			@@ -2,7 +2,7 @@
			* @Author: shuishen 1109946754@qq.com
			* @Date: 2024-10-28 18:24:16
			* @LastEditors: shuishen 1109946754@qq.com
			* @LastEditTime: 2025-07-31 20:29:37
			* @LastEditTime: 2025-09-07 19:31:33
			* @FilePath: \bigScreen\src\store\map.js
			* @Description:
			*
			@@ -18,6 +18,9 @@
			pointHeight: 64,
			editPoint: false,
			startCustomWx: false,

			needSelectID: [],

			showPreLevel: false,

			rimPosition: {
			@@ -46,6 +49,11 @@
			this.startCustomWx = flag
			},

			setNeedSelectID (data) {
			this.needSelectID = data
			},


			setShowPreLevel (flag) {
			this.showPreLevel = flag
			},

			@@ -1,577 +1,593 @@
			.div-icon {
			padding: 0 !important;
			padding: 0 !important;
			}

			.public-map-popup {
			position: absolute;
			bottom: 80px;
			pointer-events: all;
			display: block;
			transform-origin: left bottom;
			transform: translate(-50%, 0px);
			border-radius: 5px;
			z-index: auto;

			&::after {
			content: "";
			position: absolute;
			bottom: -80px;
			left: calc(50% - 3px);
			bottom: 80px;
			pointer-events: all;
			display: block;
			width: 3px;
			height: 80px;
			// 0px 0px 6px rgb(255, 179, 0, 0.8)
			background: linear-gradient(to bottom, rgb(255, 179, 0, 0.8), rgb(255, 179, 0, 0.2));
			// border-right: 3px solid #fff;
			}

			.marsBlueGradientPnl {
			padding: 4px 8px;
			text-align: center;
			margin: 0;
			color: #fff;
			-webkit-border-radius: 5px;
			-moz-border-radius: 5px;
			transform-origin: left bottom;
			transform: translate(-50%, 0px);
			border-radius: 5px;
			line-height: 32px;
			width: 112px;
			-webkit-user-select: none;
			-moz-user-select: none;
			-ms-user-select: none;
			user-select: none;
			word-wrap: break-word;
			font-size: 14px;
			background: linear-gradient(rgb(7 10 203 / 75%), rgb(16 238 220));
			}
			z-index: auto;

			.map-name {
			width: 112px;
			line-height: 24px;
			text-align: center;
			color: #FFEB3B;
			word-wrap: break-word;
			font-size: 14px;
			font-weight: bold;
			}

			.map-icon {
			margin: auto;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 36px;
			height: 36px;
			background: radial-gradient(circle at center, rgba(255, 255, 255, 0.3) 20%, rgb(255, 179, 0, 0.9) 100%);
			border-radius: 50%;
			box-shadow: 0px 0px 10px rgb(255, 179, 0, 1);

			img {
			width: 20px;
			height: 20px;
			&::after {
			content: "";
			position: absolute;
			bottom: -80px;
			left: calc(50% - 3px);
			display: block;
			width: 3px;
			height: 80px;
			// 0px 0px 6px rgb(255, 179, 0, 0.8)
			background: linear-gradient(to bottom, rgb(255, 179, 0, 0.8), rgb(255, 179, 0, 0.2));
			// border-right: 3px solid #fff;
			}
			}

			.marsBlueGradientPnl {
			padding: 4px 8px;
			text-align: center;
			margin: 0;
			color: #fff;
			-webkit-border-radius: 5px;
			-moz-border-radius: 5px;
			border-radius: 5px;
			line-height: 32px;
			width: 112px;
			-webkit-user-select: none;
			-moz-user-select: none;
			-ms-user-select: none;
			user-select: none;
			word-wrap: break-word;
			font-size: 14px;
			background: linear-gradient(rgb(7 10 203 / 75%), rgb(16 238 220));
			}

			.map-name {
			width: 112px;
			line-height: 24px;
			text-align: center;
			color: #FFEB3B;
			word-wrap: break-word;
			font-size: 14px;
			font-weight: bold;
			}

			.map-icon {
			margin: auto;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 36px;
			height: 36px;
			background: radial-gradient(circle at center, rgba(255, 255, 255, 0.3) 20%, rgb(255, 179, 0, 0.9) 100%);
			border-radius: 50%;
			box-shadow: 0px 0px 10px rgb(255, 179, 0, 1);

			img {
			width: 20px;
			height: 20px;
			}
			}
			}

			.public-map-popup-two {
			position: absolute;
			bottom: 160px;
			pointer-events: all;
			display: block;
			transform-origin: left bottom;
			transform: translate(-50%, 0px);
			border-radius: 5px;
			z-index: auto;

			&::after {
			content: "";
			position: absolute;
			bottom: -10px;
			left: calc(50% - 3px);
			bottom: 160px;
			pointer-events: all;
			display: block;
			width: 0;
			height: 0;
			border-left: 10px solid transparent;
			border-right: 10px solid transparent;
			border-bottom: 10px solid #69a7e4; // 三角形的颜色
			transform: rotate(180deg);
			z-index: -1;
			}

			.marsBlueGradientPnl {
			padding: 2px 6px;
			// text-align: center;
			margin: 0;
			color: #fff;
			-webkit-border-radius: 5px;
			-moz-border-radius: 5px;
			transform-origin: left bottom;
			transform: translate(-50%, 0px);
			border-radius: 5px;
			line-height: 28px;
			width: 260px;
			-webkit-user-select: none;
			-moz-user-select: none;
			-ms-user-select: none;
			user-select: none;
			word-wrap: break-word;
			font-size: 14px;
			box-shadow: inset 0 0 40px #409eff;
			// background: linear-gradient(rgb(7 10 203 / 75%), rgb(16 238 220));
			}
			z-index: auto;

			.marsBlueGradientPnl img {
			vertical-align: middle;
			width: 360px;
			height: 360px;
			}
			&::after {
			content: "";
			position: absolute;
			bottom: -10px;
			left: calc(50% - 3px);
			display: block;
			width: 0;
			height: 0;
			border-left: 10px solid transparent;
			border-right: 10px solid transparent;
			border-bottom: 10px solid #69a7e4; // 三角形的颜色
			transform: rotate(180deg);
			z-index: -1;
			}

			.marsBlueGradientPnl {
			padding: 2px 6px;
			// text-align: center;
			margin: 0;
			color: #fff;
			-webkit-border-radius: 5px;
			-moz-border-radius: 5px;
			border-radius: 5px;
			line-height: 28px;
			width: 260px;
			-webkit-user-select: none;
			-moz-user-select: none;
			-ms-user-select: none;
			user-select: none;
			word-wrap: break-word;
			font-size: 14px;
			box-shadow: inset 0 0 40px #409eff;
			// background: linear-gradient(rgb(7 10 203 / 75%), rgb(16 238 220));
			}

			.marsBlueGradientPnl img {
			vertical-align: middle;
			width: 360px;
			height: 360px;
			}
			}

			.public-map-popup-three {
			position: absolute;
			bottom: 160px;
			pointer-events: all;
			display: block;
			transform-origin: left bottom;
			transform: translate(-50%, 0px);
			border-radius: 5px;
			z-index: auto;

			&::after {
			content: "";
			position: absolute;
			bottom: -10px;
			left: calc(50% - 3px);
			bottom: 160px;
			pointer-events: all;
			display: block;
			width: 0;
			height: 0;
			border-left: 10px solid transparent;
			border-right: 10px solid transparent;
			border-bottom: 10px solid #69a7e4; // 三角形的颜色
			transform: rotate(180deg);
			z-index: -1;
			}

			.marsBlueGradientPnl {
			padding: 2px 6px;
			// position: absolute;
			// text-align: center;
			margin: 0;
			color: #fff;
			-webkit-border-radius: 5px;
			-moz-border-radius: 5px;
			transform-origin: left bottom;
			transform: translate(-50%, 0px);
			border-radius: 5px;
			line-height: 28px;
			width: 260px;
			-webkit-user-select: none;
			-moz-user-select: none;
			-ms-user-select: none;
			user-select: none;
			word-wrap: break-word;
			font-size: 14px;
			font-weight: bold;
			box-shadow: inset 0 0 40px #409eff;
			// background: linear-gradient(rgb(7 10 203 / 75%), rgb(16 238 220));
			}
			z-index: auto;

			&::after {
			content: "";
			position: absolute;
			bottom: -10px;
			left: calc(50% - 3px);
			display: block;
			width: 0;
			height: 0;
			border-left: 10px solid transparent;
			border-right: 10px solid transparent;
			border-bottom: 10px solid #69a7e4; // 三角形的颜色
			transform: rotate(180deg);
			z-index: -1;
			}

			.marsBlueGradientPnl {
			padding: 2px 6px;
			// position: absolute;
			// text-align: center;
			margin: 0;
			color: #fff;
			-webkit-border-radius: 5px;
			-moz-border-radius: 5px;
			border-radius: 5px;
			line-height: 28px;
			width: 260px;
			-webkit-user-select: none;
			-moz-user-select: none;
			-ms-user-select: none;
			user-select: none;
			word-wrap: break-word;
			font-size: 14px;
			font-weight: bold;
			box-shadow: inset 0 0 40px #409eff;
			// background: linear-gradient(rgb(7 10 203 / 75%), rgb(16 238 220));
			}
			}

			.public-map-popup-qy {
			position: absolute;
			bottom: 160px;
			pointer-events: all;
			display: block;
			transform-origin: left bottom;
			transform: translate(-50%, 0px);
			border-radius: 5px;
			z-index: auto;

			&::after {
			content: "";
			position: absolute;
			bottom: -10px;
			left: calc(50% - 3px);
			bottom: 160px;
			pointer-events: all;
			display: block;
			width: 0;
			height: 0;
			border-left: 10px solid transparent;
			border-right: 10px solid transparent;
			border-bottom: 10px solid #69a7e4; // 三角形的颜色
			transform: rotate(180deg);
			z-index: -1;
			}

			.marsBlueGradientPnl {
			// padding: 2px 2px;
			text-align: center;
			margin: 0;
			color: #fff;
			-webkit-border-radius: 5px;
			-moz-border-radius: 5px;
			transform-origin: left bottom;
			transform: translate(-50%, 0px);
			border-radius: 5px;
			// line-height: 32px;
			width: 360px;
			-webkit-user-select: none;
			-moz-user-select: none;
			-ms-user-select: none;
			user-select: none;
			word-wrap: break-word;
			font-size: 14px;
			box-shadow: inset 0 0 40px #409eff;
			// background: linear-gradient(rgb(7 10 203 / 75%), rgb(16 238 220));
			}
			z-index: auto;

			.marsBlueGradientPnl img {
			vertical-align: middle;
			width: 360px;
			height: 360px;
			}
			&::after {
			content: "";
			position: absolute;
			bottom: -10px;
			left: calc(50% - 3px);
			display: block;
			width: 0;
			height: 0;
			border-left: 10px solid transparent;
			border-right: 10px solid transparent;
			border-bottom: 10px solid #69a7e4; // 三角形的颜色
			transform: rotate(180deg);
			z-index: -1;
			}

			.marsBlueGradientPnl {
			// padding: 2px 2px;
			text-align: center;
			margin: 0;
			color: #fff;
			-webkit-border-radius: 5px;
			-moz-border-radius: 5px;
			border-radius: 5px;
			// line-height: 32px;
			width: 360px;
			-webkit-user-select: none;
			-moz-user-select: none;
			-ms-user-select: none;
			user-select: none;
			word-wrap: break-word;
			font-size: 14px;
			box-shadow: inset 0 0 40px #409eff;
			// background: linear-gradient(rgb(7 10 203 / 75%), rgb(16 238 220));
			}

			.marsBlueGradientPnl img {
			vertical-align: middle;
			width: 360px;
			height: 360px;
			}
			}

			.yjwz-height-box {
			bottom: 120px;
			bottom: 120px;

			&::after {
			content: "";
			position: absolute;
			bottom: -120px;
			left: calc(50% - 3px);
			display: block;
			width: 3px;
			height: 120px;
			// 0px 0px 6px rgb(255, 179, 0, 0.8)
			background: linear-gradient(to bottom, rgb(255, 179, 0, 0.8), rgb(255, 179, 0, 0.2));
			// border-right: 3px solid #fff;
			}
			&::after {
			content: "";
			position: absolute;
			bottom: -120px;
			left: calc(50% - 3px);
			display: block;
			width: 3px;
			height: 120px;
			// 0px 0px 6px rgb(255, 179, 0, 0.8)
			background: linear-gradient(to bottom, rgb(255, 179, 0, 0.8), rgb(255, 179, 0, 0.2));
			// border-right: 3px solid #fff;
			}
			}

			.fxy-ordinary {
			&::after {
			background: linear-gradient(to bottom, rgba(255, 201, 0, 0.8), rgba(255, 201, 0, 0.2));
			}
			&::after {
			background: linear-gradient(to bottom, rgba(255, 201, 0, 0.8), rgba(255, 201, 0, 0.2));
			}

			.map-name {
			color: rgba(255, 201, 0, 1);
			width: 240px;
			}
			.map-name {
			color: rgba(255, 201, 0, 1);
			width: 240px;
			}

			.map-icon {
			background: radial-gradient(circle at center, rgba(255, 255, 255, 0.3) 20%, rgba(255, 201, 0, 0.9) 100%);
			box-shadow: 0px 0px 10px rgb(255, 201, 0);
			}
			.map-icon {
			background: radial-gradient(circle at center, rgba(255, 255, 255, 0.3) 20%, rgba(255, 201, 0, 0.9) 100%);
			box-shadow: 0px 0px 10px rgb(255, 201, 0);
			}
			}

			.fxy-larger {
			&::after {
			background: linear-gradient(to bottom, rgba(255, 0, 0, 0.8), rgba(255, 0, 0, 0.2));
			}
			&::after {
			background: linear-gradient(to bottom, rgba(255, 0, 0, 0.8), rgba(255, 0, 0, 0.2));
			}

			.map-name {
			color: #ff3b3b;
			width: 240px;
			}
			.map-name {
			color: #ff3b3b;
			width: 240px;
			}

			.map-icon {
			background: radial-gradient(circle at center, rgba(255, 255, 255, 0.3) 20%, rgba(255, 0, 0, 0.9) 100%);
			box-shadow: 0px 0px 10px rgb(255, 0, 0);
			}
			.map-icon {
			background: radial-gradient(circle at center, rgba(255, 255, 255, 0.3) 20%, rgba(255, 0, 0, 0.9) 100%);
			box-shadow: 0px 0px 10px rgb(255, 0, 0);
			}
			}

			.fxy-larger-b {
			&::after {
			background: linear-gradient(to bottom, rgba(255, 165, 0, 0.8), rgba(255, 165, 0, 0.2));
			}
			&::after {
			background: linear-gradient(to bottom, rgba(255, 165, 0, 0.8), rgba(255, 165, 0, 0.2));
			}

			.map-name {
			color: #FFA500;
			width: 240px;
			}
			.map-name {
			color: #FFA500;
			width: 240px;
			}

			.map-icon {
			background: radial-gradient(circle at center, rgba(255, 255, 255, 0.3) 20%, rgba(255, 165, 0, 0.9) 100%);
			box-shadow: 0px 0px 10px rgb(255, 165, 0);
			}
			.map-icon {
			background: radial-gradient(circle at center, rgba(255, 255, 255, 0.3) 20%, rgba(255, 165, 0, 0.9) 100%);
			box-shadow: 0px 0px 10px rgb(255, 165, 0);
			}
			}

			.fxy-zd {
			&::after {
			background: linear-gradient(to bottom, rgba(173, 173, 173, 0.8), rgba(173, 173, 173, 0.2));
			}
			&::after {
			background: linear-gradient(to bottom, rgba(173, 173, 173, 0.8), rgba(173, 173, 173, 0.2));
			}

			.map-name {
			color: rgba(255, 201, 0, 1);
			width: 240px;
			}
			.map-name {
			color: rgba(255, 201, 0, 1);
			width: 240px;
			}

			.map-icon {
			background: radial-gradient(circle at center, rgba(255, 255, 255, 0.3) 20%, rgba(173, 173, 173, 0.9) 100%);
			box-shadow: 0px 0px 10px rgb(173, 173, 173);
			}
			.map-icon {
			background: radial-gradient(circle at center, rgba(255, 255, 255, 0.3) 20%, rgba(173, 173, 173, 0.9) 100%);
			box-shadow: 0px 0px 10px rgb(173, 173, 173);
			}
			}

			.gt-zd {
			&::after {
			background: linear-gradient(to bottom, rgba(0, 136, 255, 0.8), rgba(0, 136, 255, 0.2));
			}
			&::after {
			background: linear-gradient(to bottom, rgba(0, 136, 255, 0.8), rgba(0, 136, 255, 0.2));
			}

			.map-name {
			color: rgb(0, 72, 255);
			width: 240px;
			}
			.map-name {
			color: rgb(0, 72, 255);
			width: 240px;
			}

			.map-icon {
			background: radial-gradient(circle at center, rgba(255, 255, 255, 0.3) 20%, rgba(0, 136, 255, 0.9) 100%);
			box-shadow: 0px 0px 10px rgba(0, 136, 255, 1);
			}
			.map-icon {
			background: radial-gradient(circle at center, rgba(255, 255, 255, 0.3) 20%, rgba(0, 136, 255, 0.9) 100%);
			box-shadow: 0px 0px 10px rgba(0, 136, 255, 1);
			}
			}

			.qyfb-box {
			&::after {
			background: linear-gradient(to bottom, rgba(0, 136, 255, 0.8), rgba(0, 136, 255, 0.2));
			}
			&::after {
			background: linear-gradient(to bottom, rgba(0, 136, 255, 0.8), rgba(0, 136, 255, 0.2));
			}

			.map-name {
			color: #FFEB3B;
			}
			.map-name {
			color: #FFEB3B;
			}

			.map-icon {
			background: radial-gradient(circle at center, rgba(255, 255, 255, 0.3) 20%, rgba(0, 136, 255, 0.9) 100%);
			box-shadow: 0px 0px 10px rgba(0, 136, 255, 1);
			}
			.map-icon {
			background: radial-gradient(circle at center, rgba(255, 255, 255, 0.3) 20%, rgba(0, 136, 255, 0.9) 100%);
			box-shadow: 0px 0px 10px rgba(0, 136, 255, 1);
			}
			}

			.xfs-box {
			&::after {
			background: linear-gradient(to bottom, rgba(255, 197, 90, 0.8), rgba(255, 197, 90, 0.2));
			}
			&::after {
			background: linear-gradient(to bottom, rgba(255, 197, 90, 0.8), rgba(255, 197, 90, 0.2));
			}

			.map-name {
			color: #ffc55a;
			}
			.map-name {
			color: #ffc55a;
			}

			.map-icon {
			background: radial-gradient(circle at center, rgba(255, 255, 255, 0.3) 20%, rgba(255, 197, 90, 0.9) 100%);
			box-shadow: 0px 0px 10px rgb(255, 197, 90);
			}
			.map-icon {
			background: radial-gradient(circle at center, rgba(255, 255, 255, 0.3) 20%, rgba(255, 197, 90, 0.9) 100%);
			box-shadow: 0px 0px 10px rgb(255, 197, 90);
			}
			}

			.yjb-box,
			.ysf-box,
			.sk-box {
			&::after {
			background: linear-gradient(to bottom, rgba(15, 125, 254, 0.8), rgba(15, 125, 254, 0.2));
			}
			&::after {
			background: linear-gradient(to bottom, rgba(15, 125, 254, 0.8), rgba(15, 125, 254, 0.2));
			}

			.map-name {
			color: #FFEB3B;
			}
			.map-name {
			color: #FFEB3B;
			}

			.map-icon {
			background: radial-gradient(circle at center, rgba(255, 255, 255, 0.3) 20%, rgba(15, 125, 254, 0.9) 100%);
			box-shadow: 0px 0px 10px rgba(15, 125, 254, 1);
			}
			.map-icon {
			background: radial-gradient(circle at center, rgba(255, 255, 255, 0.3) 20%, rgba(15, 125, 254, 0.9) 100%);
			box-shadow: 0px 0px 10px rgba(15, 125, 254, 1);
			}
			}

			.yjc-box {
			&::after {
			background: linear-gradient(to bottom, rgba(15, 254, 71, 0.8), rgba(15, 254, 71, 0.2));
			}
			&::after {
			background: linear-gradient(to bottom, rgba(15, 254, 71, 0.8), rgba(15, 254, 71, 0.2));
			}

			.map-name {
			color: #FFEB3B;
			}
			.map-name {
			color: #FFEB3B;
			}

			.map-icon {
			background: radial-gradient(circle at center, rgba(255, 255, 255, 0.3) 20%, rgba(15, 254, 71, 0.9) 100%);
			box-shadow: 0px 0px 10px rgba(15, 254, 71, 1);
			}
			.map-icon {
			background: radial-gradient(circle at center, rgba(255, 255, 255, 0.3) 20%, rgba(15, 254, 71, 0.9) 100%);
			box-shadow: 0px 0px 10px rgba(15, 254, 71, 1);
			}
			}

			.is-need-item {
			&::after {
			background: linear-gradient(to bottom, rgba(255, 0, 0, 0.8), rgba(255, 0, 0, 0.2)) !important;
			}

			.map-name {
			color: #ff3b3b !important;
			width: 240px !important;
			}

			.map-icon {
			background: radial-gradient(circle at center, rgba(255, 255, 255, 0.3) 20%, rgba(255, 0, 0, 0.9) 100%) !important;
			box-shadow: 0px 0px 10px rgb(255, 0, 0) !important;
			}
			}

			@keyframes pulse-glow {
			0% {
			box-shadow: 0 0 4px red, inset 0 0 4px red;
			}
			0% {
			box-shadow: 0 0 4px red, inset 0 0 4px red;
			}

			50% {
			box-shadow: 0 0 8px red, inset 0 0 8px red;
			}
			50% {
			box-shadow: 0 0 8px red, inset 0 0 8px red;
			}

			100% {
			box-shadow: 0 0 4px red, inset 0 0 4px red;
			}
			100% {
			box-shadow: 0 0 4px red, inset 0 0 4px red;
			}
			}

			.dynamic-map-popup {
			padding: 32px 30px;
			padding: 32px 30px;

			position: absolute;
			right: 100%;
			bottom: 0;
			width: 320px;
			font-weight: bold;
			font-style: italic;

			.arrow {
			position: absolute;
			right: 0;
			right: 100%;
			bottom: 0;
			width: 45px;
			height: 2px;
			transform: rotate(45deg);
			background: red;
			transform-origin: right bottom;
			}
			width: 320px;
			font-weight: bold;
			font-style: italic;

			.content-wrap {
			position: relative;
			color: #fff;
			background: rgba(255, 0, 0, 0.2);

			&::after {
			content: '';
			position: absolute;
			top: -0.8px;
			/* 调整以匹配所需的发光区域 */
			left: 0px;
			/* 同上 */
			right: 0px;
			bottom: calc(100% - 0.8px);
			background: white;
			box-shadow: 0 0 8px red, inset 0 0 8px red;
			animation: pulse-glow 3s infinite;
			}

			&::before {
			content: '';
			position: absolute;
			top: calc(100% - 0.8px);
			/* 调整以匹配所需的发光区域 */
			left: 0px;
			/* 同上 */
			right: 0px;
			bottom: -0.8px;
			background: white;
			box-shadow: 0 0 8px red, inset 0 0 8px red;
			animation: pulse-glow 3s infinite;
			}

			.title {
			position: relative;
			height: 30px;
			line-height: 30px;
			font-size: 18px;


			&::before {
			content: '';
			.arrow {
			position: absolute;
			top: calc(100% - 0.8px);
			/* 调整以匹配所需的发光区域 */
			left: 0px;
			/* 同上 */
			right: 40%;
			bottom: -0.8px;
			background: white;
			box-shadow: 0 0 8px red, inset 0 0 8px red;
			animation: pulse-glow 3s infinite;
			}
			right: 0;
			bottom: 0;
			width: 45px;
			height: 2px;
			transform: rotate(45deg);
			background: red;
			transform-origin: right bottom;
			}

			.content {
			text-indent: 2em;
			line-height: 28px;
			.content-wrap {
			position: relative;
			color: #fff;
			background: rgba(255, 0, 0, 0.2);

			&::after {
			content: '';
			position: absolute;
			top: -0.8px;
			/* 调整以匹配所需的发光区域 */
			left: 0px;
			/* 同上 */
			right: 0px;
			bottom: calc(100% - 0.8px);
			background: white;
			box-shadow: 0 0 8px red, inset 0 0 8px red;
			animation: pulse-glow 3s infinite;
			}

			&::before {
			content: '';
			position: absolute;
			top: calc(100% - 0.8px);
			/* 调整以匹配所需的发光区域 */
			left: 0px;
			/* 同上 */
			right: 0px;
			bottom: -0.8px;
			background: white;
			box-shadow: 0 0 8px red, inset 0 0 8px red;
			animation: pulse-glow 3s infinite;
			}

			.title {
			position: relative;
			height: 30px;
			line-height: 30px;
			font-size: 18px;


			&::before {
			content: '';
			position: absolute;
			top: calc(100% - 0.8px);
			/* 调整以匹配所需的发光区域 */
			left: 0px;
			/* 同上 */
			right: 40%;
			bottom: -0.8px;
			background: white;
			box-shadow: 0 0 8px red, inset 0 0 8px red;
			animation: pulse-glow 3s infinite;
			}
			}

			.content {
			text-indent: 2em;
			line-height: 28px;
			}
			}
			}
			}

			.dynamic-event-profile-map-popup {
			padding: 32px 30px;
			padding: 32px 30px;

			position: absolute;
			left: 100%;
			bottom: 0;
			width: 320px;
			font-weight: bold;
			font-style: italic;

			.arrow {
			position: absolute;
			left: 0;
			left: 100%;
			bottom: 0;
			width: 45px;
			height: 2px;
			transform: rotate(-45deg);
			background: red;
			transform-origin: left bottom;
			}
			width: 320px;
			font-weight: bold;
			font-style: italic;

			.content-wrap {
			position: relative;
			color: #fff;
			background: rgba(255, 0, 0, 0.2);

			&::after {
			content: '';
			position: absolute;
			top: -0.8px;
			/* 调整以匹配所需的发光区域 */
			left: 0px;
			/* 同上 */
			right: 0px;
			bottom: calc(100% - 0.8px);
			background: white;
			box-shadow: 0 0 8px red, inset 0 0 8px red;
			animation: pulse-glow 3s infinite;
			}

			&::before {
			content: '';
			position: absolute;
			top: calc(100% - 0.8px);
			/* 调整以匹配所需的发光区域 */
			left: 0px;
			/* 同上 */
			right: 0px;
			bottom: -0.8px;
			background: white;
			box-shadow: 0 0 8px red, inset 0 0 8px red;
			animation: pulse-glow 3s infinite;
			}

			.title {
			position: relative;
			height: 30px;
			line-height: 30px;
			font-size: 18px;


			&::before {
			content: '';
			.arrow {
			position: absolute;
			top: calc(100% - 0.8px);
			/* 调整以匹配所需的发光区域 */
			left: 0px;
			/* 同上 */
			right: 40%;
			bottom: -0.8px;
			background: white;
			box-shadow: 0 0 8px red, inset 0 0 8px red;
			animation: pulse-glow 3s infinite;
			}
			left: 0;
			bottom: 0;
			width: 45px;
			height: 2px;
			transform: rotate(-45deg);
			background: red;
			transform-origin: left bottom;
			}

			.content {
			text-indent: 2em;
			line-height: 28px;
			.content-wrap {
			position: relative;
			color: #fff;
			background: rgba(255, 0, 0, 0.2);

			&::after {
			content: '';
			position: absolute;
			top: -0.8px;
			/* 调整以匹配所需的发光区域 */
			left: 0px;
			/* 同上 */
			right: 0px;
			bottom: calc(100% - 0.8px);
			background: white;
			box-shadow: 0 0 8px red, inset 0 0 8px red;
			animation: pulse-glow 3s infinite;
			}

			&::before {
			content: '';
			position: absolute;
			top: calc(100% - 0.8px);
			/* 调整以匹配所需的发光区域 */
			left: 0px;
			/* 同上 */
			right: 0px;
			bottom: -0.8px;
			background: white;
			box-shadow: 0 0 8px red, inset 0 0 8px red;
			animation: pulse-glow 3s infinite;
			}

			.title {
			position: relative;
			height: 30px;
			line-height: 30px;
			font-size: 18px;


			&::before {
			content: '';
			position: absolute;
			top: calc(100% - 0.8px);
			/* 调整以匹配所需的发光区域 */
			left: 0px;
			/* 同上 */
			right: 40%;
			bottom: -0.8px;
			background: white;
			box-shadow: 0 0 8px red, inset 0 0 8px red;
			animation: pulse-glow 3s infinite;
			}
			}

			.content {
			text-indent: 2em;
			line-height: 28px;
			}
			}
			}
			}

			.widget.location-bar {
			position: absolute;
			left: 620px !important;
			bottom: 120px !important;
			font-size: 14px;
			color: #fff;
			background: #0009;
			padding: 2px 5px;
			border-radius: 2px;
			user-select: none;
			display: flex;
			position: absolute;
			left: 620px !important;
			bottom: 120px !important;
			font-size: 14px;
			color: #fff;
			background: #0009;
			padding: 2px 5px;
			border-radius: 2px;
			user-select: none;
			display: flex;
			}

			@@ -2,7 +2,7 @@
			* @Author: shuishen 1109946754@qq.com
			* @Date: 2023-03-10 15:27:59
			* @LastEditors: shuishen 1109946754@qq.com
			* @LastEditTime: 2025-02-12 19:37:16
			* @LastEditTime: 2025-09-07 15:26:12
			* @FilePath: \bigScreen\src\views\pd\index.vue
			* @Description: 综合设计
			*
			@@ -21,56 +21,56 @@
			const showPanel = ref(true)

			const showPanelChange = () => {
			showPanel.value = !showPanel.value
			showPanel.value = !showPanel.value
			}

			nextTick(() => {
			EventBus.emit('restHandleCheckChange', `3-9`)
			EventBus.emit('restHandleCheckChange', `3-9`)
			})

			onUnmounted(() => {
			EventBus.emit('restHandleDelChange', `3-9`)
			EventBus.emit('restHandleDelChange', `3-9`)
			})
			</script>

			<template>
			<div class="container page-container">
			<div class="telescopic-panel" @click="showPanelChange">
			<el-icon v-show="showPanel">
			<CaretLeft />
			</el-icon>
			<el-icon v-show="!showPanel">
			<CaretRight />
			</el-icon>
			<div class="container page-container">
			<div class="telescopic-panel" @click="showPanelChange">
			<el-icon v-show="showPanel">
			<CaretLeft />
			</el-icon>
			<el-icon v-show="!showPanel">
			<CaretRight />
			</el-icon>
			</div>

			<dynamic-panel v-model:showPanel="showPanel" @closePanel="showPanelChange"></dynamic-panel>

			<right-container v-show="mapStore.showPreLevel"></right-container>
			</div>

			<dynamic-panel v-show="showPanel" @closePanel="showPanelChange"></dynamic-panel>

			<right-container v-show="mapStore.showPreLevel"></right-container>
			</div>
			</template>

			<style lang="scss" scoped>
			.container {
			position: absolute;
			width: 100%;
			height: 100%;

			.telescopic-panel {
			display: flex;
			align-items: center;
			justify-content: center;
			position: absolute;
			top: 50%;
			left: 0;
			width: 20px;
			height: 60px;
			border-radius: 0 6px 6px 0;
			box-shadow: inset 0 0 40px #409eff;
			pointer-events: all;
			color: #fff;
			transform: translate(0, -50%);
			cursor: pointer;
			}
			width: 100%;
			height: 100%;

			.telescopic-panel {
			display: flex;
			align-items: center;
			justify-content: center;
			position: absolute;
			top: 50%;
			left: 0;
			width: 20px;
			height: 60px;
			border-radius: 0 6px 6px 0;
			box-shadow: inset 0 0 40px #409eff;
			pointer-events: all;
			color: #fff;
			transform: translate(0, -50%);
			cursor: pointer;
			}
			}
			</style>