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">
        <el-upload class="avatar-uploader" :action="actionUrl" :show-file-list="false" :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 === 1,
          }" @click="handleAddCamera(item.code, 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';

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 } = 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.cameraCode === camera.code);
    if (matchedCamera) {
      camera.status = matchedCamera.status;
      camera.integrationState = matchedCamera.integrationState;
    }
  }
}

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

const handleBeforeUpload = () => {
  if (!selectedShopId.value) {
    ElMessage.error({
      message: '请先选择车间',
    });
    return false;
  }
};

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;
  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 = (cameraId: string, index: number) => {
  if (isAddedCamera(cameraId)) {
    const camera = konvaMap.value.findCamera(cameraId);
    konvaMap.value.handleCameraClick(camera);
    return;
  }
  if (!hasBg.value) {
    ElMessage.warning({
      message: '请先添加车间地图',
    });
    return;
  }
  konvaMap.value.addCamera(cameraId, 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 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 32px;
    font-size: 14px;
    font-weight: 400;
    color: #404040;
    line-height: 14px;
    cursor: pointer;

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

    .camera-id {
      width: 110px;
    }

    .camera-space {
      width: 120px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
}

: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>