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

<template>
  <MainPanel>
    <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> 案件 </span>
        </div>
      </div>
    </template>

    <div class="info-layout" ref="layoutRef">
      <div class="info-top">
        <div class="info-top-left" :class="{ full: viewStatus }">
          <Container @loaded="loaded = true" />
          <template v-if="loaded && !trackMode">
            <Menus v-if="viewStatus"  @enter-child="childPage = true" @leave-child="childPage = false" />
            <BasePoints v-if="currentView" />
            <FixPoints />
            <Measures />
            <Photo />
            <!-- <ButtonPane class="back fun-ctrl" size="48" @click="router.push('/scene')" v-if="!childPage"> -->
            <ButtonPane class="back fun-ctrl" :size="viewStatus ? 64 : 48" @click="onScale" v-if="!childPage">
              <ui-icon :type="viewStatus ? 'screen_c' : 'screen_f'" class="icon" />
            </ButtonPane>
            <Mode />
          </template>
        </div>
        <div class="info-top-right" :class="{ full: viewStatus }">
          <div class="input-item">
            <p>事故时间:</p>
            <input type="text" />
          </div>
          <div class="input-item">
            <p>天气:</p>
            <input type="text" />
          </div>
          <div class="input-item">
            <p>地点:</p>
            <input type="text" />
          </div>
          <div class="text-item">
            <p>事故描述:</p>
            <textarea class="info-textarea"></textarea>
          </div>
          <div class="info-btn">
            <div class="right-btn" @click="router.push('/roads?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">
          <ui-icon :type="i.icon"></ui-icon>
          <span> {{ i.name }}</span>
        </div>
      </div>
    </div>
  </MainPanel>
</template>

<script lang="ts" setup>
import MainPanel from '@/components/main-panel/index.vue';
import Header from '@/components/photos/header.vue';
import Container from './container.vue';
import Mode from './mode.vue';
import Menus from './menus/pane.vue';
import BasePoints from '@/views/scene/covers/basePoints.vue';
import FixPoints from '@/views/scene/covers/fixPoints.vue';
import Measures from '@/views/scene/covers/measures.vue';
import Photo from './photo.vue';
import ButtonPane from '@/components/button-pane/index.vue';
import { customMap, disabledMap, useSDK } from '@/hook';
import customSetup from '../../hook/custom';
import UiIcon from '@/components/base/components/icon/index.vue';
import { ref, watchEffect, computed, onMounted } from 'vue';
import { back } from '@/store/sync';
import { trackMode } from '@/views/scene/trackMeasureWidth';
import { currentView } from './currentScene';
import { api } from '@/store/sync';
import { router, writeRouteName } from '@/router';
import { roadPhotos, RoadPhoto } from '@/store/roadPhotos';
import { types, accidentPhotos, AccidentPhoto } from '@/store/accidentPhotos';
import { photos } from '@/store/photos';
import { title } from '@/store/setup';
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 scenetTitle = computed(() => title);
const enum TypeEnum {
  Draw,
  Table,
}
const currentType = ref(TypeEnum.Draw);
const sceneSortPhotos = computed(() => roadPhotos.value.filter((item) => (currentType.value === TypeEnum.Draw ? !item.table : !!item.table)).reverse());

const loaded = ref(false);
const childPage = ref(false);
const stopReg = watchEffect(() => {
  if (loaded.value) {
    const sdk = useSDK();
    stopReg();
    customSetup(sdk);
    disabledMap.measure = false;
  }
});
const viewStatus = ref(false);
const onScale = () => {
  viewStatus.value = !viewStatus.value;
};
const list = ref([
  {
    id: 1,
    icon: 'prospect',
    name: '勘查笔录',
  },
  {
    id: 2,
    icon: 'inquiry',
    name: '询问笔录',
  },
  {
    id: 3,
    icon: 'question',
    name: '讯问笔录',
  },
  {
    id: 4,
    icon: 'accident',
    name: '事故认定',
  },
  {
    id: 5,
    icon: 'blood',
    name: '血样登记表',
  },
  {
    id: 6,
    icon: 'items',
    name: '遗留物品清单',
  },
  {
    id: 7,
    icon: 'authorization',
    name: '授权委托书',
  },
  {
    id: 8,
    icon: 'law',
    name: '法律法规',
  },
]);
onMounted(() => {
  var screenHeight = document.body.clientHeight;
  layoutRef.value.style.height = screenHeight + 'px';
  document.body.style.height = screenHeight + 'px';
});
</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;
        .scene-mode-tabs {
          height: 64px !important;
        }

        .fun-ctrl {
          .iconfont {
            font-size: 24px;
          }
        }
      }
      .hide {
        display: none !important;
      }
      .scene-mode-tabs {
        height: 48px !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 {
          width: 296px;
          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: rgba(255, 255, 255, 0.1);
      font-size: 16px;
      border-radius: 4px;
      > 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>