sl-sfy-safety/src/views/map-config/mini-map/MiniMapConfig.vue

<template>
  <div class="min-map">
    <header class="min-map__header">
      <section class="min-map__btn" @click="router.back">
        <img :src="rollback" />
        <span>返回</span>
      </section>
      <section class="workshop-name">{{ selectedName }}</section>
      <section class="operate-btn">
        <a @click="downloadImage(imgUrlBg, selectedName + '.png')" v-if="imgUrlBg">下载底图</a>
        <el-upload
          class="avatar-uploader"
          :action="actionUrl"
          :show-file-list="false"
          :before-upload="handleBeforeUpload"
          :on-success="handleAvatarSuccess"
          :with-credentials="true"
          name="file"
          :headers="getHeaders()"
        >
          <el-button :icon="UploadFilled" :disabled="!hasBg"> 替换照片 </el-button>
        </el-upload>
        <el-button
          :icon="Refresh"
          @click="openMessageBox('提示', '是否重置当前设置', refreshUploadBg, '重置成功！')"
          :disabled="!hasBg"
        >
          重置布局
        </el-button>
        <el-button @click="handleSave" type="primary">保存</el-button>
      </section>
    </header>

    <main class="min-map__main">
      <section class="camera-list">
        <header class="camera-list__title">相机列表：</header>
        <ElInput class="camera-list__search" placeholder="请输入搜索内容" v-model="searchKey" :suffix-icon="Search" />
        <main class="camera-item">
          <span class="camera-item__empty" v-show="filterShopCameraList.length == 0"> 提示：该车间还未配置相机 </span>
          <div
            v-for="(item, index) in filterShopCameraList"
            :key="item.code"
            class="camera-item__list"
            :class="{
              isAdded: isAddedCamera(item.code),
              isActive: item.code === caremaActiveId,
              integrationState: item.integrationState === IntegrationIsActive.NO,
            }"
            @click="handleAddCamera(item, index)"
          >
            <span class="camera-id">{{ item.name }}</span>
            <el-popover placement="right-start" trigger="hover" :content="item.workSpaceName" :teleported="false">
              <template #reference>
                <span class="camera-space">{{ item.workSpaceName }}</span>
              </template>
            </el-popover>
          </div>
        </main>
      </section>

      <section class="workshop-map" ref="drawContainer">
        <el-upload
          v-if="!hasBg"
          :action="actionUrl"
          :show-file-list="false"
          :before-upload="handleBeforeUpload"
          :on-success="handleAvatarSuccess"
          :with-credentials="true"
          name="file"
          :headers="getHeaders()"
        >
          <img src="~@/assets/images/img-upload.png" />
        </el-upload>
        <KonvaMap
          ref="konvaMap"
          :filter-data="filterShopCameraList"
          :camera-list="shopCameraList"
          :map-config="mapConfig"
          :is-knova-destroy="isKnovaDestroy"
          @change-default-camera="changeDefault"
          @send-camera-id="sendCameras"
          @change="changeMap"
          v-else
        />
      </section>
    </main>
  </div>
</template>

<script setup lang="ts">
  import { ElMessage, ElInput, ElMessageBox } from 'element-plus';
  import { Search, Refresh, UploadFilled } from '@element-plus/icons-vue';
  import rollback from '@/assets/rollback.png';
  import { onMounted, onUnmounted, ref, computed, reactive, nextTick } from 'vue';
  import {
    updateMinMapViewLayoutApi,
    getCamerasByWorkShopId,
    getWorkshopMiniMapLayoutPCApi,
    getWorkshopMiniMapLayoutMobileApi,
  } from '@/api/scene/scene';
  import KonvaMap from './MapBase/KonvaMap.vue';
  import useCameraStatus from '@/views/cameras/preview/store/useCameraStatus';
  import { onBeforeRouteLeave, useRoute } from 'vue-router';
  import urlJoin from 'url-join';
  import { useGlobSetting } from '@/hooks/setting';
  import { getHeaders } from '@/utils/http/axios';
  import router from '@/router';
  import { ShopMapCamera } from '@/types/scene/type';
  import { ViewType } from '@/types/page-config/type';
  import { openMessageBox } from '@/views/system-config/business-scene/components/MessageBox';
  import { IntegrationIsActive } from '@/types/camera/type';
  const cameraStatus = useCameraStatus();
  const { openIntervalNew, closeInterval } = cameraStatus;

  const drawContainer = ref<HTMLDivElement>();
  const konvaMap = ref();
  const caremaActiveId = ref<string>('');
  const camerasAdded = ref<string[]>([]);
  const imgUrlBg = ref<string>('');
  const searchKey = ref('');

  // 是否已有背景图
  const hasBg = ref(false);
  //是否修改
  const isChange = ref<boolean>(false);
  //单个相机时是否上传图片
  const isUploadBg = ref<boolean>(true);

  const isMap = ref(false);
  const { urlPrefix, minifyImgUrl } = useGlobSetting();

  const actionUrl = computed(() => {
    return urlJoin(urlPrefix!, `/admin/minimap/uploadPicture`);
  });

  function updataState(data, updateData) {
    for (let i = 0; i < data.length; i++) {
      const camera = data[i];
      const matchedCamera = updateData.find((item) => item.code === camera.code);
      if (matchedCamera) {
        camera.status = matchedCamera.networkingState;
        camera.integrationState = matchedCamera.integrationState;
      }
    }
  }

  function downloadImage(url: string, filename: string) {
    const link = document.createElement('a');
    link.href = url;
    link.download = filename;

    // 触发点击事件
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
  }

  const refreshUploadBg = () => {
    konvaMap.value.resetMap();
    hasBg.value = false;
  };

  const handleBeforeUpload = (rawFile) => {
    if (!selectedShopId.value) {
      ElMessage.error({
        message: '请先选择车间',
      });
      return Promise.reject();
    }
    if (rawFile.type !== 'image/jpg' && rawFile.type !== 'image/jpeg' && rawFile.type !== 'image/png') {
      ElMessage.error('请上传jpg、jpeg、png格式的图片!');
      return Promise.reject();
    }
    const mSize = 1024 * 1024;
    if (rawFile.size > 2 * mSize) {
      const realSize = (rawFile.size / mSize).toFixed(2);
      ElMessageBox.alert(`<div>当前图片${realSize}M，建议压缩到2M以内。 <div>`, '提示', {
        dangerouslyUseHTMLString: true,
        confirmButtonText: minifyImgUrl ? '点我去压缩' : '确定',
        type: 'warning',
      }).then(() => {
        if (minifyImgUrl) {
          window.open(minifyImgUrl);
        }
      });

      return Promise.reject();
    }
  };

  const sendCameras = (camerasList) => {
    camerasAdded.value = camerasList.map((item) => {
      return item.id;
    });
  };

  /** 判断相机是否已经添加 */
  const isAddedCamera = (cameraId: string) => {
    const index = camerasAdded.value.findIndex((item) => item === cameraId);
    return index >= 0;
  };

  const changeDefault = (defaultCameraId) => {
    caremaActiveId.value = defaultCameraId;
  };

  const isKnovaDestroy = ref<boolean>(false); //重新上传图片之后将knova销毁
  const handleAvatarSuccess = (e) => {
    isKnovaDestroy.value = true;
    imgUrlBg.value = e.data;
    hasBg.value = true;
    nextTick(() => {
      konvaMap.value.addBg(imgUrlBg.value).then(() => {
        isKnovaDestroy.value = false;
        isChange.value = true;
      });
    });
  };

  const getMapLayoutAPIMap = {
    [ViewType.minimap_PC]: getWorkshopMiniMapLayoutPCApi,
    [ViewType.minimap_phone]: getWorkshopMiniMapLayoutMobileApi,
  };

  const getMapLayout = async (id: number) => {
    const api = getMapLayoutAPIMap[viewType.value];
    const res = await api(id);
    if (!res) return;
    const layoutJSON = JSON.parse(res.layout);
    return layoutJSON;
  };

  const getShopContent = async (id: number) => {
    await getShowCameras(id);
    const idList = filterShopCameraList.value.map((item) => item.id);
    const res = await getMapLayout(id);
    if (!res) return;
    hasBg.value = true;
    isMap.value = res.isUploadBg;
    imgUrlBg.value = res.bgImgUrl;
    nextTick(() => {
      if (res.isUploadBg) {
        isUploadBg.value = true;
        konvaMap.value.createMap(res, selectedShopId.value);
      } else {
        hasBg.value = false;
        isUploadBg.value = res.isUploadBg;
      }
      openIntervalNew(idList, (targetData) => {
        updataState(filterShopCameraList.value, targetData);
      });
    });
  };

  const selectedShopId = ref();
  const selectedName = ref();
  const viewType = ref();
  const shopCameraList = ref<ShopMapCamera[]>([]);
  const route = useRoute();

  const getShowCameras = async (id: number) => {
    const res = await getCamerasByWorkShopId({ workshopId: id });
    if (!res) return;
    res.children.forEach((item) => {
      if (!item.children || item.children.length <= 0) return;
      item.children.forEach((camera) => {
        shopCameraList.value.push({ ...camera, isSet: 0, workSpaceName: item.name });
      });
    });
  };

  const mapConfig = reactive({
    width: 0,
    height: 0,
  });

  onMounted(async () => {
    selectedShopId.value = Number(route.query.workshopId);
    selectedName.value = route.query.workshopName;
    viewType.value = route.query.viewType;
    mapConfig.width = drawContainer.value?.clientWidth || 0;
    mapConfig.height = drawContainer.value?.clientHeight || 0;
    await getShopContent(selectedShopId.value);
  });

  onUnmounted(() => {
    closeInterval();
  });

  const filterShopCameraList = computed(() => {
    const k = searchKey.value.trim();
    if (!k) return shopCameraList.value;
    return shopCameraList.value.filter(
      (x) => x.code?.includes(k) || x.name?.includes(k) || x.workSpaceName?.includes(k),
    );
  });

  const handleAddCamera = (cameraDetail: ShopMapCamera, index: number) => {
    const cameraCode = cameraDetail.code;
    if (isAddedCamera(cameraCode)) {
      const camera = konvaMap.value.findCamera(cameraCode);
      konvaMap.value.handleCameraClick(camera);
      return;
    }
    if (cameraDetail.integrationState === IntegrationIsActive.NO) {
      ElMessage.warning({
        message: '该相机未接入平台，暂时无法添加到小地图',
      });
      return;
    }
    if (!hasBg.value) {
      ElMessage.warning({
        message: '请先添加车间地图',
      });
      return;
    }
    konvaMap.value.addCamera(cameraCode, index);
  };

  const handleSave = () => {
    isMap.value = true;
    if (!hasBg.value && isMap.value) {
      ElMessage.error('请先添加车间地图');
      return false;
    }
    const layout = konvaMap.value.saveLayout();
    const cameraList = JSON.parse(layout).cameraList;
    if (cameraList.length === 0 && hasBg.value) {
      ElMessage.error('请至少添加1个相机标签后发布');
      return false;
    }
    updateMinMapViewLayoutApi({
      layout: JSON.stringify({ ...JSON.parse(layout), isUploadBg: hasBg.value }),
      targetId: String(selectedShopId.value),
      viewType: viewType.value,
    }).then(() => {
      ElMessage.success('保存成功');
    });
    return true;
  };

  const changeMap = (val) => {
    isChange.value = val;
  };
  onBeforeRouteLeave((to, from, next) => {
    if (!isChange.value) {
      next();
      return;
    }
    setTimeout(() => {
      ElMessageBox.confirm('是否保存当前修改?', '提示', {
        confirmButtonText: '是',
        cancelButtonText: '否',
        customClass: 'elMessageBox__custom--warning',
      })
        .then(async () => {
          const isSaveSuccess = await handleSave();
          if (isSaveSuccess) {
            next();
          }
          next(false);
        })
        .catch(() => {
          next();
        });
    }, 200);
  });
</script>

<style scoped lang="scss">
  .min-map {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
    height: calc(100vh - 64px - 14px);
    background: #f5f7f9;
    border-radius: 6px;
    box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.12);

    &__header {
      display: flex;
      align-items: center;
      gap: 20px;
      width: inherit;
      height: 54px;
      padding: 0 15px 0 15px;
      background: #ffffff;
      border-radius: 6px 6px 0 0;
    }

    &__btn {
      display: flex;
      gap: 10px;
      align-items: center;
      font-size: 14px;
      cursor: pointer;

      img {
        width: 14px;
      }
    }

    &__main {
      display: flex;
      gap: 5px;
      width: 100%;
      height: calc(100% - 60px);
      border-radius: 6px;
    }
  }

  .workshop-name {
    font-size: 14px;
    color: #3f3f3f;
    font-weight: 600;
  }

  .operate-btn {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex: 1;
    height: inherit;
    gap: 20px;

    .el-button {
      margin: 0;

      img {
        width: 14px;
      }
    }
  }

  .camera-list {
    width: 250px;
    height: 100%;
    border-radius: 0 0 0 6px;
    padding: 10px 10px;
    background-color: #ffffff;

    &__title {
      margin-left: 5px;
      font-size: 14px;
      font-weight: 600;
    }

    &__search {
      margin-top: 10px;

      :deep(.el-input__wrapper) {
        background-color: #f0f2f5;
      }
    }
  }

  .workshop-map {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1;
    height: 100%;
    overflow: hidden;
  }

  .camera-item {
    width: 100%;
    max-height: calc(100% - 65px);
    overflow-y: auto;
    margin-top: 10px;
    margin-left: 5px;

    &__empty {
      color: #3f3f3f;
    }

    &__list {
      align-items: center;
      margin: 10px 0;
      font-size: 14px;
      font-weight: 400;
      color: #404040;
      cursor: pointer;

      &:hover {
        background-color: #e6f7ff;
        color: #1890ff;
      }

      .camera-space {
        margin-left: 12px;
      }
    }
  }

  :deep(.el-popover) {
    width: unset !important;
    min-width: 110px;
    text-align: center;
    font-weight: 400;
  }

  :deep(.el-popper__arrow) {
    display: none;
  }

  .isAdded {
    color: #1890ff;
  }

  .isActive {
    background-color: #e6f7ff;
    color: #1890ff;
  }

  .integrationState {
    cursor: not-allowed;
    color: #ccc;
  }
</style>