traffic-laser/src/views/scene/index.vue

<template>
  <MainPanel :style="{ '--photoSize': viewStatus ? '88px' : '64px' }">
    <template v-slot:header>
      <div class="photos-header">
        <div class="left">
          <ui-icon
            class="back-icon"
            type="return"
            ctrl
            style="margin-right: 10px"
            @click="back"
          />
          <span> {{ sceneTitle }} </span>
        </div>
      </div>
    </template>

    <div class="info-layout" ref="layoutRef">
      <div class="info-top">
        <div class="info-top-left" :class="{ full: viewStatus }">
          <Scene :view-status="viewStatus">
            <template v-slot="{ childPage }">
              <ButtonPane
                box-shadow
                class="back fun-ctrl"
                :size="viewStatus ? 64 : 48"
                @click="onScale"
                v-if="!childPage"
              >
                <ui-icon :type="viewStatus ? 'screen_c' : 'screen_f'" class="icon" />
              </ButtonPane>
            </template>
          </Scene>
        </div>
        <div class="info-top-right" :class="{ full: viewStatus }">
          <div class="input-item">
            <p>事故时间:</p>
            <input
              id="accidentTime"
              type="text"
              v-model="sceneInfo.accidentTime"
              @input="inputHandler"
            />
          </div>
          <div class="input-item">
            <p>天气:</p>
            <input
              id="weather"
              type="text"
              v-model="sceneInfo.weather"
              @input="inputHandler"
            />
          </div>
          <div class="input-item">
            <p>地点:</p>
            <input
              id="address"
              type="text"
              v-model="sceneInfo.address"
              @input="inputHandler"
            />
          </div>
          <div class="text-item">
            <p>事故描述:</p>
            <textarea
              id="accidentDesc"
              class="info-textarea"
              v-model="sceneInfo.accidentDesc"
              @input="inputHandler"
            ></textarea>
          </div>
          <div class="info-btn">
            <div
              class="right-btn"
              @click="
                router.push({
                  name: writeRouteName.roads,
                  params: { type: 'table', back: 1 },
                })
              "
            >
              现场绘图({{ sceneSortPhotos.length }})
            </div>
            <div class="right-btn" @click="router.push('/accidents?back=1')">
              事故照片({{ accodentSortPhotos.length }})
            </div>
          </div>
        </div>
      </div>
      <div class="info-bottom" :class="{ full: viewStatus }">
        <div v-for="(i, index) in list" @click="router.push(`/tables/${i.type}`)">
          <ui-icon :type="i.icon"></ui-icon>
          <span> {{ i.name }}</span>
        </div>
      </div>
    </div>
  </MainPanel>
</template>

<script lang="ts" setup>
import Scene from "./scene.vue";
import MainPanel from "@/components/main-panel/index.vue";
import UiIcon from "@/components/base/components/icon/index.vue";
import { ref, computed, onMounted, onActivated, nextTick } from "vue";
import { back } from "@/store/sync";
import { router, writeRouteName } from "@/router";
import { roadPhotos } from "@/store/roadPhotos";
import ButtonPane from "@/components/button-pane/index.vue";
import { types, accidentPhotos } from "@/store/accidentPhotos";
import { debounce, getQueryString } from "@/utils";
import { tables } from "@/store/tables";

const layoutRef = ref(null);
const accodentSortPhotos = computed(() => {
  const photos = [...accidentPhotos.value];
  return photos.sort((a, b) => types.indexOf(a.type) - types.indexOf(b.type));
});
const sceneSortPhotos = computed(() => roadPhotos.value);

const sceneTitle = ref(
  getQueryString("title") ? decodeURIComponent(getQueryString("title")) : "案件"
);

const sceneInfo = ref({
  accidentTime: "",
  weather: "",
  address: "",
  accidentDesc: "",
});
const inputHandler = debounce(() => {
  tables.value["sceneInfo"] = sceneInfo.value;
}, 300);
const viewStatus = ref(false);
const onScale = () => {
  viewStatus.value = !viewStatus.value;
};

const list = ref([
  {
    id: 1,
    icon: "prospect",
    name: "勘查笔录",
    type: "explorate",
  },
  {
    id: 2,
    icon: "inquiry",
    name: "询问笔录",
    type: "ask?type=1",
  },
  {
    id: 3,
    icon: "question",
    name: "讯问笔录",
    type: "ask?type=2",
  },
  {
    id: 4,
    icon: "accident",
    name: "事故认定",
    type: "identification",
  },
  {
    id: 5,
    icon: "blood",
    name: "血样登记表",
    type: "extract",
  },
  {
    id: 6,
    icon: "items",
    name: "遗留物品清单",
    type: "legacy",
  },
  {
    id: 7,
    icon: "authorization",
    name: "授权委托书",
    type: "author",
  },
  {
    id: 8,
    icon: "law",
    name: "法律法规",
    type: "law",
  },
]);

onMounted(() => {
  var screenHeight = document.body.clientHeight;
  layoutRef.value.style.height = screenHeight + "px";
  document.body.style.height = screenHeight + "px";

  if (tables.value && tables.value["sceneInfo"]) {
    sceneInfo.value = tables.value["sceneInfo"];
  }
  nextTick(() => {
    let sceneCanvas = document.querySelector(".scene-canvas");
    sceneCanvas.addEventListener("touchstart", () => {
      setBlur();
    });
  });
});
const setBlur = () => {
  let domlList = [];
  domlList.push(document.getElementById("accidentTime"));
  domlList.push(document.getElementById("weather"));
  domlList.push(document.getElementById("address"));
  domlList.push(document.getElementById("accidentDesc"));
  domlList.forEach((item) => {
    item.blur();
  });
};
onActivated(async () => {
  await nextTick();
  let full = router.currentRoute.value.query.full;
  if (full) {
    viewStatus.value = true;
  }
});
</script>

<style scoped lang="scss">
.info-layout {
  width: 100%;
  height: 100%;
  // padding-top: 50px;
  background: rgba(22, 24, 26, 1);
  padding: 70px 20px 20px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  // position: fixed;
  // top: 0;
  // left: 0;
  // z-index: 1;
  .info-top {
    width: 100%;
    height: 83%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .info-top-left {
      width: 70%;
      height: 100%;
      position: relative;
      overflow: hidden;
      transition: all 0.3s;
      &.full {
        position: fixed;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        z-index: 1000;
        transform-origin: center center;

        .fun-ctrl {
          .iconfont {
            font-size: 24px;
          }
        }
      }
      .hide {
        display: none !important;
      }
      .fun-ctrl {
        position: absolute;
        left: var(--boundMargin);
        top: var(--boundMargin);
        padding: 0;
        width: 48px;
        height: 48px;
        display: flex;
        align-items: center;
        justify-content: center;

        .iconfont {
          font-size: 18px;
        }
      }
    }
    .info-top-right {
      width: calc(30% - 20px);
      height: 100%;
      position: relative;
      overflow: hidden;
      font-size: 16px;
      color: rgba(255, 255, 255, 0.8);
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      &.full {
        width: 0;
      }
      p {
        margin-bottom: 4px;
      }
      .input-item {
        height: 10%;

        input {
          width: 100%;
          padding: 0 8px;
          height: 56%;
          background: rgba(255, 255, 255, 0.1);
          border-radius: 4px 4px 4px 4px;
          border: 1px solid rgba(255, 255, 255, 0.5);
          color: rgba(255, 255, 255, 0.8);
        }
      }
      .text-item {
        width: 100%;
        height: 35%;
        .info-textarea {
          width: 100%;
          padding: 8px;
          height: 87%;
          background: rgba(255, 255, 255, 0.1);
          border-radius: 4px 4px 4px 4px;
          border: 1px solid rgba(255, 255, 255, 0.5);
          color: rgba(255, 255, 255, 0.8);
          outline: none;
          resize: none;
        }
      }
      .info-btn {
        width: 100%;
        height: 19.5%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .right-btn {
          cursor: pointer;
          width: 100%;
          height: 42.8%;
          background: rgba(255, 255, 255, 0.1);
          border-radius: 4px 4px 4px 4px;
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }
    }
  }
  .info-bottom {
    width: 100%;
    height: 14.49%;
    display: flex;
    flex-wrap: nowrap;
    &.full {
      height: 0;
    }
    > div {
      width: 100%;
      height: 100%;
      margin-right: 20px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      background: #e6e9f0;
      font-size: 16px;
      border-radius: 4px;
      cursor: pointer;
      > span {
        margin-top: 8px;
      }
      .iconfont {
        font-size: 24px;
      }
      &:last-of-type {
        margin-right: 0;
      }
    }
  }
}
.photos-header {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;

  .center {
    position: absolute;
    left: 0;
    right: 0;
    white-space: nowrap;
    // pointer-events: none;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
  }
  .left,
  .right {
    z-index: 1;
  }
}

.back-icon {
  display: inline-flex;
  width: 32px;
  height: 32px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 24px 24px 24px 24px;
  align-items: center;
  justify-content: center;
}
</style>
<style lang="scss">
#navCube {
  // opacity: 0;
  z-index: -1;
  pointer-events: none;
}
#home {
  opacity: 0;
  pointer-events: none;
}
.full {
  #navCube {
    // opacity: 1;

    z-index: 1;
    pointer-events: auto;
  }
  #home {
    opacity: 1;
    pointer-events: auto;
  }
}
</style>