|
|
@@ -1,308 +0,0 @@
|
|
|
-<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="router.back" />
|
|
|
- <span> 标题 </span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
-
|
|
|
- <div class="info-layout">
|
|
|
- <div class="info-top">
|
|
|
- <div class="info-top-left" :class="{ full: viewStatus }">
|
|
|
- <Container @loaded="loaded = true" />
|
|
|
- <template v-if="loaded && !trackMode">
|
|
|
- <Menus @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="48" @click="onScale" v-if="!childPage"> -->
|
|
|
- <ui-icon type="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">现场绘图(0)</div>
|
|
|
- <div class="right-btn">事故照片(0)</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="info-bottom" :class="{ full: viewStatus }">
|
|
|
- <div v-for="(i, index) in list">
|
|
|
- <ui-icon type="return"></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';
|
|
|
-import { customMap, disabledMap, useSDK } from '@/hook';
|
|
|
-import customSetup from '../../hook/custom';
|
|
|
-import UiIcon from '@/components/base/components/icon/index.vue';
|
|
|
-import { ref, watchEffect } 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';
|
|
|
-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: 'return',
|
|
|
- name: '勘查笔录',
|
|
|
- },
|
|
|
- {
|
|
|
- id: 2,
|
|
|
- icon: 'return',
|
|
|
- name: '询问笔录',
|
|
|
- },
|
|
|
- {
|
|
|
- id: 3,
|
|
|
- icon: 'return',
|
|
|
- name: '讯问笔录',
|
|
|
- },
|
|
|
- {
|
|
|
- id: 4,
|
|
|
- icon: 'return',
|
|
|
- name: '事故认定',
|
|
|
- },
|
|
|
- {
|
|
|
- id: 5,
|
|
|
- icon: 'return',
|
|
|
- name: '血样登记表',
|
|
|
- },
|
|
|
- {
|
|
|
- id: 6,
|
|
|
- icon: 'return',
|
|
|
- name: '遗留物品清单',
|
|
|
- },
|
|
|
- {
|
|
|
- id: 7,
|
|
|
- icon: 'return',
|
|
|
- name: '授权委托书',
|
|
|
- },
|
|
|
- {
|
|
|
- id: 8,
|
|
|
- icon: 'return',
|
|
|
- name: '法律法规',
|
|
|
- },
|
|
|
-]);
|
|
|
-</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;
|
|
|
- .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 {
|
|
|
- position: absolute;
|
|
|
- left: var(--boundMargin);
|
|
|
- top: var(--boundMargin);
|
|
|
- padding: 0;
|
|
|
- width: 48px;
|
|
|
- height: 48px;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- }
|
|
|
- }
|
|
|
- .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;
|
|
|
- }
|
|
|
- &: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>
|
