xzlz_GjWeb/src/views/home/layout/streetInfo.vue

<template>
  <div class="dialogBox" :style="`left:${elLeft}px;top:${elTop}px`" draggable="true" ref="dialogBoxYpfx"
    @dragstart="dragstart($event)" @dragend="dragend($event)">
    <div class="title">
      <span class="mc">{{ props.data.cph }}</span>
      <span @click="close" class="close">
        <el-icon>
          <Close />
        </el-icon>
      </span>
    </div>
    <div class="info-Big-Box noScollLine">
      <div class="card">

        <div class="card-cnt">
          <div class="leftImg">
            <el-image style="width: 100%" :src="props.data.image" :hide-on-click-modal="true" close-on-press-escape
              fit="cover" lazy>
            </el-image>
          </div>
          <div class="rightInfo">
            <div>
              <span class="zjhm">驾驶员：</span>{{ props.data.cljsy }}
            </div>
            <div>
              <span class="zjhm">车牌号：</span>{{ props.data.cph }}
            </div>
            <div>
              <span class="zjhm">行驶路线：</span>{{ props.data.xlmc }}
            </div>
            <div>
              <span class="zjhm">乘车人数：</span>{{ props.data.ccrs ? props.data.ccrs : 0 }}
            </div>
            <div>
              <span class="zjhm">重点人员：</span>{{ props.data.zdrs ? props.data.zdrs : 0 }}
            </div>
            <div>
              <span class="zjhm">途中乘车人数：</span>{{ props.data.ztscrs ? props.data.ztscrs : 0 }}
            </div>
          </div>
        </div>
        <div class="address">
          <img class="addImg" src="@/assets/images/dingwei.png" />
          <span>{{ props.data.xlmc }}</span>
        </div>
      </div>


    </div>

    <!-- 视频播放区域 -->
    <div v-if="showVideo" class="video-container">
      <video ref="videoPlayer" class="video-player" controls autoplay muted :src="videoSrc">
        您的浏览器不支持视频播放
      </video>
    </div>

    <el-popover placement="bottom" :visible="visible" :width="476" :append-to-body="false">
      <template #reference>
        <div class="btnBox">
          <button class="dp-default small" @click="onClickclgj">车辆轨迹</button>
          <button class="dp-default small" @click="onClickSpsd">{{showVideo.value?"关闭视频":"视频播放"}}</button>
        </div>
      </template>
    </el-popover>
  </div>
</template>

<script setup>
import Axios from "axios";
import { qcckPost, qcckGet } from "@/api/qcckApi.js";
import { ref, onMounted, onUnmounted, defineProps, getCurrentInstance, watch } from "vue";
import { timeValidate } from "@/utils/time.js";
import emitter from "@/utils/eventBus.js";
import { ElMessage } from "element-plus";
import { useRouter } from "vue-router";
import { all } from "ol/events/condition";
const { proxy } = getCurrentInstance();
const props = defineProps({
  data: {
    type: Object,
    default: {}
  }
});
const visible = ref(false);
const dialogBoxYpfx = ref();
const videoPlayer = ref();
const showVideo = ref(false);
const videoSrc = ref('');
const initWidth = ref(0); //父元素宽度
const initHeight = ref(0); //父元素高度
const startClientX = ref(0); //元素拖拽前距离浏览器X轴位置
const startClientY = ref(0); //元素拖拽前距离浏览器Y轴位置
const elLeft = ref(400); //元素左偏移量
const elTop = ref(120); //元素右偏移量
watch(
  () => props.data,
  (val) => {
    console.log(val, 'val');
    visible.value = false;
  }, {
  immediate: true,
  deep: true
}
);
onMounted(() => {
  initBodySize();
});
const onClickSpsd = () => {
  if (showVideo.value) {
    videoPlayer.value.pause();
    videoPlayer.value.currentTime = 0;
  } else {
    videoSrc.value = props.data.videoUrl || '/static/sample.mp4';
  }
  showVideo.value = !showVideo.value
};


const onClickclgj = () => {
  let row = props.data.zb
  if (row && row.length > 0) {
    emitter.emit("setMapCenter", {
      location: [row[0][0], row[0][1]],
      zoomLevel: 12
    });
    emitter.emit("drawLineAnimation", {
      type: "solid",
      coords: row,
      isclear: true,
      flag: "lx"
    });
  }
}
//初始化
const initBodySize = () => {
  initWidth.value = dialogBoxYpfx.value.clientWidth;
  initHeight.value = dialogBoxYpfx.value.clientHeight;
};
//拖拽开始
const dragstart = (e) => {
  startClientX.value = e.clientX;
  startClientY.value = e.clientY;
};
//拖拽结束
const dragend = (e) => {
  let x = e.clientX - startClientX.value;
  let y = e.clientY - startClientY.value;
  elLeft.value += x;
  elTop.value += y;
};

//关闭弹窗
function close() {
  visible.value = false;
  emitter.emit("showJzInfo", false);
  emitter.emit("deletePointArea", "lx");
}


</script>

<style lang="scss" scoped>
@import "@/assets/css/homeScreen.scss";

.dialogBox {
  position: absolute;
  padding: 0;
  width: 484px !important;

  .video-container {
    margin: 10px auto;
    border-radius: 4px;
    overflow: hidden;
    text-align: center; // 容器居中对齐
    .video-player {
      width: 100%;
      max-width: 400px; // 设置最大宽度
      height: 200px;
      display: block;
      margin: 0 auto; // 水平居中
    }
  }

  .title {
    border-bottom: 1px solid #275288;
    margin-bottom: 6px;

    .mc {
      margin-left: 10px;
    }
  }

  .info-Big-Box {
    max-height: 70vh;
    overflow: hidden;
    overflow: auto;
    padding: 4px 10px;
    box-sizing: border-box;
  }

  .card {
    padding: 10px 10px 4px 10px;
    box-sizing: border-box;
    border-top: 2px solid #00bfff;
    line-height: 20px;
    font-size: 14px;
    background: #052955;

    .card-cnt {
      display: flex;
      background: rgba(255, 255, 255, 0.05);
      margin-bottom: 4px;

      .leftImg {
        width: 180px;
        margin-right: 10px;
      }

      .rightInfo {
        flex: 1;

        .title {
          width: 100%;
          color: #0095FF;
          line-height: 28px;
          margin-right: 20px;
        }

        .status {
          padding: 1px 6px;
          border-radius: 4px;
          background: #FF3A3A;
          color: #fff;
        }

        .zjhm {
          line-height: 27px;
          color: #7CBFFF;
          margin-right: 10px;
          font-size: 16px;
        }

        .textflex {
          display: flex;
          justify-content: space-between;
        }

        .text {
          font-size: 12px;
          color: #6585af;

          .info {
            color: #fff;
          }
        }

        .newinfo {
          color: yellow;
        }
      }
    }

    .address {
      justify-content: space-between;
      margin-top: 4px;
      padding-top: 6px;
      box-sizing: border-box;
      border-top: 1px solid #3b3737;
      color: #fff;

      .addImg {
        margin-right: 4px;
        vertical-align: text-top;
      }
    }

    .phtos {
      height: 110px;
      padding-top: 10px;
      box-sizing: border-box;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      width: 100%;
      border-top: 1px dashed #3d3d3d;
      margin-top: 6px;
      box-sizing: border-box;

      ::v-deep .el-carousel {
        width: 100%;
        height: 100%;

        .el-carousel__container {
          height: 72%;
        }

        .el-carousel__item {
          height: 100%;
          display: flex;
          justify-content: space-between;
        }
      }

      img {
        width: 60px;
        height: 70px;
      }
    }
  }
}

.all-dialog .dialogBox>.btnBox {
  padding-top: 0;
  padding-bottom: 0;
}

.timeBox {
  width: 100%;
  display: flex;
  align-items: center;

  .time1 {
    margin: 0 10px;
    text-align: center;
    color: #fff;
  }
}

::v-deep .el-collapse {
  width: 100%;
  --el-collapse-header-height: auto;
  --el-collapse-header-bg-color: transparent;
  --el-collapse-border-color: transparent;
}

::v-deep .el-collapse-item__header {
  color: #00bfff;
}

::v-deep .el-collapse-item__wrap {
  background-color: transparent;
}

::v-deep .el-collapse-item__content {
  color: #fff;
  padding-bottom: 0;
}

.null {
  text-align: center;
}
</style>