@go-home-early/go-home-early98 0.3.1 → 0.3.3

package/src/packages/Cesium/components/Popup.vue

@@ -0,0 +1,591 @@
+<!--
+ * @Description: 文件描述
+ * @Author: 傅霄玮
+ * @Date: 2024-07-08 16:06:29
+ * @LastEditors: zwt
+ * @LastEditTime: 2025-12-08 11:44:22
+-->
+<template>
+  <div ref="popupRef" class="popup-new" :class="`${popupData.class}`" v-show="showPopup" :style="{ bottom: `${popupPosition.y}px`, left: `${popupPosition.x}px` }">
+
+    <div v-if="popupData.class && popupData.class == 'popup-uav'" ref="popupContent" v-loading="popupLoading" class="uav-body">
+      <div v-if="popupData.contentImg" class="content-left">
+        <el-image :src="popupData.contentImg" style="width: 275px; height: 206px; border-radius: 10px" />
+      </div>
+      <div class="content-right">
+        <div class="title">{{ popupData.title }}</div>
+        <div v-for="(v, k) in popupData.content" :key="k" class="item">
+          <span class="name">{{ v.key }}:</span>
+          <span class="value" :title="v.value">{{ v.value || "-" }}</span>
+        </div>
+      </div> 
+    </div>
+    <div v-else v-loading="popupLoading" :class="[popupData.isBig ? 'body-big' : 'body']">
+      <div class="hd"> 
+        <div class="title">{{ popupData.title }}</div>
+        <div class="btn-box">
+          <div class="btn close" @click="closePopup()"> 
+            <!-- <i class="el-icon-close" /> --> 
+          </div>
+        </div>
+      </div>
+      <!-- 是否需要左右布局 -->
+      <!-- {{ popupData.layout }}1 -->
+      <div v-if="!popupData.layout" id="popup-content-height" ref="popupContent" class="bd">
+        <div v-for="(v, k) in popupData.content" :key="k" :class="{
+              privew: v.type === 'iframe',
+              item: v.type !== 'iframe',
+            }" :style="{ width: '100% ' }">
+          <!-- :style="{ width: v.width }" -->
+          <template v-if="v.type == 'cordinate'">
+            <!-- 坐标 -->
+            <span>{{ v.key }}</span>
+            <span v-if="v.isshow">
+              {{ isShowSecretFunction(v.value, 0, 0)
+                }}<el-button size="mini" class="ml-10" @click="v.isshow = !v.isshow">查看</el-button>
+            </span>
+            <span v-else>
+              {{ v.value
+                }}<el-button size="mini" class="ml-10" @click="v.isshow = !v.isshow">隐藏</el-button>
+            </span>
+          </template>
+          <template v-else-if="v.type == 'image'">
+            <img :src="v.value" alt="" style="width: 306px; height: 180px;cursor: pointer;" v-if="popupData.isClick" @click="openImageDetail(v)" />
+            <img :src="v.value" alt="" style="width: 306px; height: 180px" v-else />
+            <!-- <el-input v-if="popupData.isClick"></el-input> -->
+          </template>
+          <template v-else-if="v.type == 'audio'">
+            <audio :src="v.value" alt="" style="width: 100%; height: 40px" controls />
+          </template>
+          <template v-else-if="v.type == 'phone'">
+            <span class="name">{{ v.key }}</span>
+            <span class="value" v-if="v.isshow">
+              {{ isShowSecretFunction(v.value, 3, 8)
+                }}<el-button size="mini" class="ml-10" @click="v.isshow = !v.isshow">查看</el-button>
+            </span>
+            <span class="value" v-else>
+              {{ v.value
+                }}<el-button size="mini" class="ml-10" @click="v.isshow = !v.isshow">隐藏</el-button>
+            </span>
+          </template>
+          <template v-else>
+            <span class="name">{{ v.key }}</span>
+            <span class="value" :title="v.value">{{
+                v.value || v.value == 0 ? v.value : "-"
+              }}</span>
+          </template>
+        </div>
+      </div>
+      <!-- 这个就是左右布局的 -->
+      <div v-else ref="popupContent" class="bd-row">
+        <div v-if="popupData.contentImg" class="content-left">
+          <el-image :src="popupData.contentImg" style="width: 130px; height: 130px; border-radius: 5px" />
+        </div>
+        <div class="content-right">
+          <div v-for="(v, k) in popupData.content" :key="k" :class="{
+                privew: v.type === 'iframe',
+                item: v.type !== 'iframe',
+              }">
+            <template v-if="v.type == 'cordinate'">
+              <!-- 坐标 -->
+              <span>{{ v.key }}</span>
+              <span v-if="v.isshow">
+                {{ isShowSecretFunction(v.value, 0, 0)
+                  }}<el-button size="mini" class="ml-10" @click="v.isshow = !v.isshow">查看</el-button>
+              </span>
+              <span v-else>
+                {{ v.value
+                  }}<el-button size="mini" class="ml-10" @click="v.isshow = !v.isshow">隐藏</el-button>
+              </span>
+            </template>
+            <template v-else-if="v.type == 'image'">
+              <img :src="v.value" alt="" style="width: 306px; height: 180px" />
+            </template>
+            <template v-else-if="v.type == 'audio'">
+              <audio :src="v.value" alt="" style="width: 306px; height: 40px" controls />
+            </template>
+
+            <template v-else-if="v.type == 'phone'">
+              <span class="name">{{ v.key }}</span>
+              <span class="value" v-if="v.isshow">
+                {{ isShowSecretFunction(v.value, 3, 8)
+                  }}<el-button size="mini" class="ml-10" @click="v.isshow = !v.isshow">查看</el-button>
+              </span>
+              <span class="value" v-else>
+                {{ v.value
+                  }}<el-button size="mini" class="ml-10" @click="v.isshow = !v.isshow">隐藏</el-button>
+              </span>
+            </template>
+            <template v-else>
+              <span class="name">{{ v.key }}</span>
+              <span class="value" :title="v.value">{{ v.value || "-" }}</span>
+            </template>
+          </div>
+        </div>
+      </div>
+      <div class="ft" v-if="popupData.buttons && popupData.buttons.length > 0" @wheel.stop>
+        <div class="ft-item" v-for="(v, k) in popupData.buttons" :key="k">
+          <!-- {{ v.name }} -->
+          <div @click="handlePopupBtn(v)" class="btn">{{ v.name }}</div>
+          <!-- <el-button
+              class="btn-big"
+              :style="v.style"
+              @click="handlePopupBtn(v)"
+              type="primary"
+              >{{ v.name }}</el-button
+            > -->
+        </div>
+      </div>
+    </div>
+    <div class="arrow" />
+    <!-- <div class="label">森林火灾</div> -->
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    showPopup: Boolean,
+    popupData: Object,
+    popupPosition: Object,
+    popupLoading: Boolean,
+  },
+  components: {
+  },
+  methods: {
+    closePopup() {
+      this.$emit('close-popup');
+    },
+
+    showVideoConnection(data) {
+      this.videoData = {
+        id: data.id,
+        tel: data.tel,
+        name: data.name,
+        show: true,
+      };
+    },
+    handlePopupBtn(v) {
+      if (v.type === "dialog") {
+        this.$emit(v.dialog.name, v.dialog.visible, v.dialog.params);
+        return;
+      } else if (v.type === "function") {
+        v.function(v.params);
+      }
+
+      // 增加判断，不存在data数据不进视频显示
+      if (v.data) {
+        this.showVideoConnection(v.data);
+      }
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+// 鼠标点击弹出层
+.popup-new::after {
+  content: "";
+  position: absolute;
+  left: 50%;
+  bottom: -15px;
+  transform: translateX(-50%);
+  width: 0;
+  height: 0;
+  border: 10px solid transparent;
+  border-top: 10px solid rgba(8, 108, 235, 1);
+  border-bottom: 0;
+  border-left: 10px solid transparent;
+  border-right: 10px solid transparent;
+  border-radius: 4px;
+}
+
+.popup-map-list.popup-new::after {
+  display: none;
+}
+.popup-map-list .ft .btn {
+  width: auto !important;
+  background-image: none !important;
+  color: #2dd2fb !important;
+}
+
+.popup-new {
+  position: absolute;
+  z-index: 9;
+
+  // .body::before {
+  //   // content: "";
+  //   position: absolute;
+  //   top: -47px;
+  //   right: 0;
+  //   left: 0;
+  //   height: 48px;
+  //   background: url("~@/static/dashboard/v4-map/dialog-hd.png") left top
+  //     no-repeat;
+  //   background-size: 100% 100%;
+  // }
+  .body::after {
+    content: "";
+    position: absolute;
+    right: 0;
+    left: 0;
+    height: 25px;
+    bottom: -24px;
+    background: url("../imgs/popup/dialog-ft.png") left bottom
+      no-repeat;
+    background-size: 100% 100%;
+  }
+
+  .body {
+    z-index: 9999;
+    min-width: 380px;
+    // height: 350px;
+    // height: 332px;
+    position: relative;
+    // background: rgba(255, 255, 255, 0.8);
+    // background: url("./image/point-bg.png") #fff no-repeat;
+    // background: url("~@/static/dashboard/zl-dialog-bg_09.png") left top repeat-y;
+    background-size: 100% 100%;
+    color: #fff;
+    display: flex;
+    flex-direction: column;
+    // padding: 10px;
+    margin: 20px 0 17px;
+    // padding: 0 16px;
+
+    .hd {
+      background: url("../imgs/popup/dialog-hd.png") left bottom
+        no-repeat;
+      background-size: 100% 100%;
+      overflow: hidden;
+      position: relative;
+      width: 100%;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      height: 48px;
+      left: 0;
+      top: 2px;
+      padding: 0 14px;
+
+      .title {
+        // color: rgba(0, 0, 0, 0.9);
+        line-height: 36px;
+        margin-right: 20px;
+        height: 36px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        font-family: MicrosoftYaHeiSemibold;
+        font-size: 24px;
+        color: #ffffff;
+        letter-spacing: 1px;
+        font-weight: 600;
+        max-width: 9em;
+      }
+      .close {
+        position: absolute;
+        right: 0;
+        top: 20px;
+        width: 67px;
+        height: 33px;
+        cursor: pointer;
+        // background: url("~@/static/dashboard/v4-new/dialog-close.png") left top
+        //   repeat-y;
+        background-size: 100% 100%;
+      }
+    }
+    .bd {
+      // margin-top: 10px;
+      // display: flex;
+      // flex-wrap: wrap;
+      // justify-content: space-between;
+      // max-height: 205px;
+      // min-height: 205px;
+      // flex: 1;
+      padding: 0 20px;
+      overflow-y: auto;
+      background: url("../imgs/popup/dialog-bd.png") left top
+        repeat-y;
+      background-size: 100% 100%;
+      .item {
+        // height: 40px;
+        line-height: 48px;
+        overflow: hidden;
+        // border-bottom: 1px solid #e7e7e7;
+        font-size: 24px;
+        display: flex;
+        white-space: nowrap;
+        // flex-direction: column;
+        span {
+          font-size: 24px;
+          color: #ffffff;
+          letter-spacing: 1px;
+        }
+        .name {
+          // width: 100px;
+          flex-shrink: 0;
+          text-align: right;
+        }
+        // .name::before {
+        //   content: "";
+        //   position: absolute;
+        //   left: 0;
+        //   top: 50%;
+        //   transform: translate(0, -50%);
+        //   width: 2px;
+        //   height: 14px;
+        //   background: #0799ff;
+        // }
+        .value {
+          flex: 1;
+          padding-left: 10px;
+          color: #16f8a7;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          max-width: 15em;
+        }
+        // .value::before {
+        //   content: "";
+        //   position: absolute;
+        //   left: 0;
+        //   top: 50%;
+        //   height: 10px;
+        //   width: 120px;
+        //   z-index: 0;
+        //   background-image: linear-gradient(
+        //     90deg,
+        //     rgba(0, 70, 246, 0) 0%,
+        //     #0799ff 18%,
+        //     rgba(0, 70, 246, 0) 100%
+        //   );
+        //   opacity: 0.4;
+        // }
+        audio {
+          margin: 10px 0;
+          &::-webkit-media-controls-panel {
+            background: rgba(0, 82, 129, 0.5);
+            border-radius: 26px;
+          }
+          &::-webkit-media-controls-play-button {
+            width: 29px;
+            height: 29px;
+            border-radius: 50%;
+            background-color: #08a2fb;
+          }
+          &::-webkit-media-controls-volume-slider {
+            display: none !important;
+          }
+        }
+        .camera {
+          height: 155px !important;
+        }
+      }
+    }
+    .bd-row {
+      display: flex;
+      gap: 14px;
+      padding: 0 20px;
+      background: url("../imgs/popup/dialog-bd.png") left top
+        repeat-y;
+      background-size: 100% 100%;
+
+      .content-left {
+        padding-top: 10px;
+      }
+      .content-right {
+        .item {
+          // width: 50%;
+          line-height: 40px;
+          overflow: hidden;
+          font-size: 18px;
+          display: flex;
+          white-space: nowrap;
+          span {
+            font-size: 18px;
+            color: #ffffff;
+            letter-spacing: 1px;
+          }
+          .name {
+            flex-shrink: 0;
+            text-align: right;
+          }
+          .value {
+            // flex: 1;
+            padding-left: 10px;
+            color: #16f8a7;
+          }
+          audio {
+            margin: 10px 0;
+            &::-webkit-media-controls-panel {
+              background: rgba(0, 82, 129, 0.5);
+              border-radius: 26px;
+            }
+            &::-webkit-media-controls-play-button {
+              width: 29px;
+              height: 29px;
+              border-radius: 50%;
+              background-color: #08a2fb;
+            }
+            &::-webkit-media-controls-volume-slider {
+              display: none !important;
+            }
+          }
+        }
+      }
+    }
+    .ft {
+      max-height: 300px;
+      overflow: auto;
+      padding-top: 12px;
+      // margin-right: 10px;
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      // justify-content: flex-end;
+      justify-content: center;
+      gap: 12px;
+      background: url("../imgs/popup/dialog-bd.png") left top
+        repeat-y;
+      background-size: 100% 100%;
+
+      .ft-item {
+        // flex: 1;
+        // margin: 4px;
+      }
+
+      .el-button {
+        width: 100%;
+      }
+      .btn {
+        // margin: 0px 0 10px 0;
+        // margin-bottom: 15px;
+        // margin-left: 12px !important;
+        width: 124px;
+        height: 36px;
+        background-image: url("../imgs/popup/dialog-btn.png");
+        background-size: 100% 100%;
+        border: 0px;
+        text-align: center;
+        line-height: 36px;
+        cursor: pointer;
+        font-family: MicrosoftYaHei;
+        font-size: 16px;
+        color: #ffffff;
+        letter-spacing: 0.89px;
+      }
+    }
+  }
+  .body-big {
+    z-index: 9999;
+    // width: 342px;
+    // height: 350px;
+    overflow: hidden;
+    position: relative;
+    padding: 12px 16px;
+    // background-color: #fff;
+    background-image: url("../imgs/popup/back-popup-img.png");
+    background-size: 100% 100%;
+    border-radius: 8px;
+    .hd {
+      overflow: hidden;
+      position: relative;
+      width: 100%;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+
+      .title {
+        // font-family: YouSheBiaoTiHei;
+        font-size: 16px;
+        color: rgba(0, 0, 0, 0.9);
+        color: #fff;
+        line-height: 38px;
+        // text-shadow: 0 2px 12px #0a53fa;
+        // font-weight: 600;
+        width: 320px;
+        height: 38px;
+        // background-image: url("~@/static/largeScreenImg/back-dialog-title.png");
+        // background-size: 100% 100%;
+      }
+      .close {
+        font-size: 25px;
+        cursor: pointer;
+        color: #fff;
+        margin-top: -10px;
+      }
+    }
+    .bd {
+      margin-top: 15px;
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: space-between;
+      max-height: 200px;
+      overflow-y: auto;
+      color: #fff;
+      .item {
+        width: 50%;
+        height: 40px;
+        line-height: 40px;
+        border-bottom: 1px solid #e7e7e7;
+        font-size: 14px;
+        .value {
+          margin-left: 10px;
+        }
+      }
+    }
+    .bd-row {
+      display: flex;
+      justify-content: space-between;
+      color: #fff;
+
+      .content-left {
+        // width: 60%;
+        flex: 1;
+        height: 200px;
+        display: flex;
+        flex-wrap: wrap;
+        .item {
+          width: 50%;
+          height: 40px;
+          line-height: 40px;
+          border-bottom: 1px solid #e7e7e7;
+          font-size: 14px;
+          .value {
+            margin-left: 10px;
+          }
+        }
+      }
+      .content-right {
+        width: 40%;
+      }
+    }
+    .ft {
+      margin-top: 12px;
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+      // height: 60px;
+
+      .btn-big {
+        // width: 100px;
+        // margin: 0px 0 10px 0;
+        margin: 0;
+        margin-bottom: 15px;
+        margin-left: 12px !important;
+        width: 100px;
+        height: 30px;
+        background-image: url("../imgs/popup/backimg-btn.png");
+        background-size: 100% 100%;
+        background-color: transparent;
+        border: 0px;
+        color: #fff;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+    }
+  }
+}
+</style>