DiKongGanZhiPingTai/src/views/demo/system/mediaLibrary/comparison/index.vue

<template>
  <div class="comparisonModal">
    <div class="closeButton">
      <LeftOutlined
        style="color: white; font-size: 20px; margin-right: 10px"
        @click="closeComparisonModal"
      />
      <div
        class="changeButton"
        :style="{
          background: typeOpen ? '#2A7DC9' : '#5D5F61',
        }"
        @click="changeTypeOpen"
      >
        变化检测
        <CaretUpOutlined v-if="typeOpen" />
        <CaretDownOutlined v-if="!typeOpen" />
      </div>
    </div>
    <div class="topDiv"> 照片 AI 变化检测 Beta</div>
    <div class="bodyDiv">
      <!-- 检测记录 -->
      <div v-if="typeOpen" class="jiancejiluDiv">
        <RecordList
          v-if="status == 0"
          :recordList="recordList"
          :nowRecord="nowRecord"
          @chooseNowRecord="chooseNowRecord"
          @openBuildStatus="openBuildStatus"
          @openEditStatus="openEditStatus"
        />
        <RecordNewBuild v-if="status == 1" @restoreListStatus="restoreListStatus" />
        <RecordListEditInfo
          v-if="status == 2"
          :nowRecord="nowRecord"
          :groupIndex="groupIndex"
          @chooseNowImageGroup="chooseNowImageGroup"
          @chooseGraffitiColor="chooseGraffitiColor"
          @restoreListStatus="restoreListStatus"
        />
      </div>
      <!-- 对比部分 -->
      <div
        class="imageDiv"
        :style="{
          width: typeOpen ? 'calc(100% - 360px)' : '100%',
        }"
      >
        <ImageContrast
          :recordList="recordList"
          :nowRecord="nowRecord"
          :groupIndex="groupIndex"
          :graffitiColor="graffitiColor"
          :isEdit="isEdit"
          @chooseNowImageGroup="chooseNowImageGroup"
        />
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
  import { ref, onMounted } from 'vue';
  import { LeftOutlined, CaretUpOutlined, CaretDownOutlined } from '@ant-design/icons-vue';
  import { RecordList, RecordNewBuild, RecordListEditInfo, ImageContrast } from './comparison';
  import datajson from './data.json';

  const props = defineProps(['']);
  const emit = defineEmits(['closeComparisonModal']);

  // 右侧窗口是否展示
  const typeOpen = ref(true);
  function changeTypeOpen() {
    typeOpen.value = !typeOpen.value;
  }

  // 关闭窗口
  function closeComparisonModal() {
    emit('closeComparisonModal');
  }

  const recordList = ref(datajson);
  onMounted(() => {
    recordList.value = datajson;
    // datajson.forEach(item => {
    //   let templist: any;
    //   if(item.imageGroup && item.imageGroup.length > 0){
    //     let temp: any;
    //     item.imageGroup.forEach(g => {
    //       temp = {
    //         ...g,
    //         imageJson: JSON.parse(g.imageJson),
    //       };
    //     });
    //   }
    // });
  });
  const nowRecord = ref(recordList.value[0]);
  // 0：列表、1：新建、2：编辑
  const status = ref(0);

  // 选择当前记录
  function chooseNowRecord(value) {
    nowRecord.value = value;
  }
  // 是否是编辑
  const isEdit: any = ref(false);

  // ------------------------------------------
  // 开启新建检测
  function openBuildStatus() {
    status.value = 1;
  }
  // 开启编辑状态
  function openEditStatus(record) {
    status.value = 2;
    isEdit.value = true;
  }
  // 恢复列表状态
  function restoreListStatus() {
    status.value = 0;
    isEdit.value = false;
  }

  // 当前图片组的索引
  const groupIndex = ref(1);
  function chooseNowImageGroup(index) {
    groupIndex.value = index;
  }
  // 颜色
  const graffitiColor = ref('#ffffff');
  function chooseGraffitiColor(color) {
    graffitiColor.value = color;
  }
</script>
<style lang="less" scoped>
  .comparisonModal {
    position: relative;
    width: 100%;
    height: 920px;
    background: #000000;

    // 页面不能被选中
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE/Edge */
    user-select: none;

    // 关闭按钮
    .closeButton {
      position: absolute;
      top: 12px;
      left: 0px;
      height: 40px;
      width: 200px;

      display: flex;
      align-items: center;
      justify-content: center;

      .changeButton {
        height: 30px;
        width: 120px;
        border-radius: 5px;
        color: #ffffff;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }

    // 标题
    .topDiv {
      background: #101010;
      color: #ffffff;
      width: 100%;
      height: 60px;

      display: flex;
      align-items: center;
      justify-content: center;
    }

    // 内容
    .bodyDiv {
      background: #000000;
      width: 100%;
      display: flex;
      height: calc(100% - 60px);

      // 检测记录
      .jiancejiluDiv {
        position: relative;
        background: #232323;
        color: #ffffff;
        width: 360px;
        height: 100%;
        border-radius: 10px;
      }

      .imageDiv {
        position: relative;
        width: calc(100% - 360px);
      }
    }
  }
</style>