Gyyq-Upstairs/src/views/components/ProjectDetails/Projectpicturetwo.vue

<template>
  <div class="container">
    <!-- 顶部操作栏 -->
    <div class="containertop">
      <div class="topleft">
        <img src="../../../assets/images/detailsicon/1.png" alt="">
        <span>项目图例</span>
      </div>
      <div class="topright">
        <el-button type="primary" size="medium" plain
          style="border: none;background-color: rgba(43,98,241,0.1);color: #2B62F1;" @click="handleEdit">
          <img src="../../../assets/images/detailsicon/icon-xz@2x.png" alt="编辑"
            style="width: 0.6rem; height: 0.6rem; margin-right: 4px;">
          编辑
        </el-button>
      </div>
    </div>

    <!-- 内容区域 -->
    <div class="main-content">
      <!-- 左侧两个轮播图 -->
      <div class="carousel-container">
        <!-- 上侧轮播图 -->
        <div class="carousel">
          <div class="carousel-control left" @click="prevImage(1)">
            <img src="../../../assets/images/icon-left@2x.png" alt="">
          </div>
          <div v-for="(item, index) in carousel1Items" :key="index" class="carousel-item"
            :class="{ active: index === currentIndex1 }">
            <img :src="item" :alt="'Image ' + (index + 1)" />
          </div>
          <div class="carousel-control right" @click="nextImage(1)">
            <img src="../../../assets/images/icon-right@2x.png" alt="">
          </div>
          <div class="classify">
            外部
          </div>
        </div>

        <!-- 下侧轮播图 -->
        <div class="carousel">
          <div class="carousel-control left" @click="prevImage(2)">
            <img src="../../../assets/images/icon-left@2x.png" alt="">
          </div>
          <div v-for="(item, index) in carousel2Items" :key="index" class="carousel-item"
            :class="{ active: index === currentIndex2 }">
            <img :src="item" :alt="'Image ' + (index + 1)" />
          </div>
          <div class="carousel-control right" @click="nextImage(2)">
            <img src="../../../assets/images/icon-right@2x.png" alt="">
          </div>
          <div class="classify">
            内部
          </div>
        </div>
      </div>

      <!-- 右侧地图缩略图 -->
      <div class="map-thumbnail">
        <div id="mars2dContainer" class="mars2d-container"></div>
        <div class="classify">
          位置
        </div>
      </div>
    </div>

    <!-- 编辑/新增对话框 -->
    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="500px">
      <el-form :model="form" label-width="120px">
        <el-form-item label="类型">
          <el-select v-model="form.type" placeholder="请选择类型">
            <el-option v-for="dict in dict.type.tplx" :key="dict.value" :label="dict.label"
              :value="dict.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="图片上传">
          <el-upload action="https://jsonplaceholder.typicode.com/posts/" :on-success="handleUploadSuccess"
            :on-remove="handleUploadRemove" :file-list="fileList" list-type="picture-card">
            <i class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSubmit">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import 'mars2d/mars2d.css';
import * as mars2d from 'mars2d';

export default {
  components: {},
  dicts: ['tplx'],
  data() {
    const basePathUrl = window.basePathUrl || "";
    return {
      configUrl: basePathUrl + "config/config.json",
      mapOptions: {
        // 配置文档：http://mars2d.cn/apidoc.html#Map
        copyright: false, // 不显示厂商logo
        // basemap: 2021,
        basemaps: [
          {
            "id": 2021,
            "pid": 10,
            "name": "高德电子",
            "icon": "img/basemaps/gaode_vec.png",
            "type": "gaode",
            "layer": "vec",
            "show": true
          },
        ],
        center: { lat: 31.2704, lng: 120.7600 }, // 中心点
        zoom: 16, // 设置地图缩放级别
        minZoom: 15, // 最小缩放级别
        maxZoom: 20, // 最大缩放级别
        zoomControl: true, 
      }, 
      // 轮播图假数据（使用网络图片）
      carousel1Items: [
        'https://picsum.photos/300/200?random=1',
        'https://picsum.photos/300/200?random=2',
        'https://picsum.photos/300/200?random=3',
      ],
      carousel2Items: [
        'https://picsum.photos/300/200?random=4',
        'https://picsum.photos/300/200?random=5',
        'https://picsum.photos/300/200?random=6',
      ],
      currentIndex1: 0, // 上侧轮播图当前索引
      currentIndex2: 0, // 下侧轮播图当前索引
      // 对话框相关
      dialogVisible: false,
      dialogTitle: '编辑项目',
      form: {
        type: '外部', // 默认类型
        images: [], // 上传的图片列表
      },
      fileList: [], // 上传的文件列表
      map: null, // 地图实例
    };
  },
  methods: {
    onload(map) {
      // 地图组件构造完成
    },
    // 切换到上一张图片
    prevImage(carouselIndex) {
      if (carouselIndex === 1) {
        this.currentIndex1 =
          (this.currentIndex1 - 1 + this.carousel1Items.length) % this.carousel1Items.length;
      } else if (carouselIndex === 2) {
        this.currentIndex2 =
          (this.currentIndex2 - 1 + this.carousel2Items.length) % this.carousel2Items.length;
      }
    },
    // 切换到下一张图片
    nextImage(carouselIndex) {
      if (carouselIndex === 1) {
        this.currentIndex1 = (this.currentIndex1 + 1) % this.carousel1Items.length;
      } else if (carouselIndex === 2) {
        this.currentIndex2 = (this.currentIndex2 + 1) % this.carousel2Items.length;
      }
    },
    // 编辑操作
    handleEdit() {
      this.dialogTitle = '编辑项目';
      this.dialogVisible = true;
      // 填充表单数据
      this.form = {
        type: '外部', // 默认类型
        images: [], // 上传的图片列表
      };
    },
    // 提交表单
    handleSubmit() {
      this.dialogVisible = false;
      // 调用 API 提交数据
    },
    // 上传成功
    handleUploadSuccess(response, file) {
      this.fileList.push(file);
      this.form.images.push(file.url);
    },
    // 移除文件
    handleUploadRemove(file) {
      const index = this.fileList.indexOf(file);
      if (index !== -1) {
        this.fileList.splice(index, 1);
        this.form.images.splice(index, 1);
      }
    },
    // 初始化地图
    initMap() {
      this.map = new mars2d.Map('mars2dContainer', this.mapOptions);
    },
  },
  mounted() {
    this.initMap();
  },
};
</script>

<style scoped>
.container {
  display: flex;
  flex-direction: column;
  width: 100%;
  background-color: #FFFFFF;
  box-shadow: 0rem 0.13rem 0.63rem 0rem rgba(177, 177, 177, 0.1);
  border-radius: 0.5rem 0.5rem 0.5rem 0.5rem;
  gap: 1rem;
  overflow: auto;
}

.containertop {
  height: auto;
  display: flex;
  justify-content: space-between;
  padding: .5rem;
  border-bottom: 1px solid #E5E5E5;
}

.action-bar {
  margin-bottom: 20px;
}

.main-content {
  display: flex;
  gap: 2rem;
  padding: 1rem;
}

.carousel-container {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.carousel {
  width: 21rem;
  height: 12rem;
  position: relative;
  overflow: hidden;
}

.carousel-item {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

.carousel-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.carousel-item.active {
  opacity: 1;
}

.carousel-control {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  font-size: 1.5rem;
  color: white;
  padding: 0.5rem;
  z-index: 10;
}

.carousel-control.left {
  left: 0;
}

.carousel-control.right {
  right: 0;
}

.topleft {
  width: 8rem;
  display: flex;
  gap: 0.4rem;
  align-items: center;
}

.topleft img {
  width: 0.81rem;
  height: 0.81rem;
}

.topleft span {
  width: auto;
  height: 0.88rem;
  font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
  font-weight: 500;
  font-size: 0.88rem;
  color: #3D424C;
  line-height: 0.88rem;
  text-align: right;
  font-style: normal;
  text-transform: none;
}

.classify {
  width: 2.81rem;
  height: 1.38rem;
  background-color: rgba(43, 98, 241, 0.8);
  border-radius: 0.69rem 0.69rem 0.69rem 0.69rem;
  color: white;
  position: absolute;
  bottom: .5rem;
  left: .5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: .7rem;
  z-index: 999;
}


.map-thumbnail {
  width: 76rem;
  height: 25rem;
  position: relative;
}

.mars2d-container {
  width: 76rem;
  height: 25rem;
}
</style>