traffic-laser/src/views/graphic/header.vue

<template>
  <div class="graphic-header" v-if="data">
    <div class="title">
      <ui-icon type="return" @click="back" class="head-icon" />
      <p>{{ isRoad ? '现场绘图' : '事故照片' }}</p>
    </div>
    <div class="actions">
      <div
          v-for="menu in menus"
          :key="menu.text"
          class="action fun-ctrl"
          :class="{disabled: menu.disable}"
          @click="menu.onClick"
      >
        <ui-icon :type="menu.icon"  />
        <p>{{ menu.text }}</p>
        <ui-input
            type="checkbox"
            :modelValue="graphicState.showBackImage"
            class="map-status"
            v-if="menu.icon === 'map'"
        />
      </div>
    </div>

    <div class="table">
      <ui-input
          width="120px"
          height="32px"
          type="select"
          :options="options"
          v-model="(data as AccidentPhoto).type"
          v-if="options"
      />
      <ui-button width="100px" class="save save-file" @click="saveHandler">
        保存
      </ui-button>
      <ui-button width="100px" type="primary" class="save" @click="createTable" v-if="isRoad">
        制表
      </ui-button>
    </div>
  </div>
</template>
<script setup lang="ts">
import UiIcon from "@/components/base/components/icon/index.vue";
import UiButton from "@/components/base/components/button/index.vue";
import {Mode} from './menus'
import {changeStore, drawRef, graphicState} from '@/hook/useGraphic'
import {computed, watchEffect} from "vue";
import {router, writeRouteName} from '@/router'
import {AccidentPhoto, accidentPhotos, types} from '@/store/accidentPhotos'
import {useData} from './data'
import UiInput from "@/components/base/components/input/index.vue";
import {roadPhotos} from "@/store/roadPhotos";
import {back, uploadImage} from '@/store/sync'
import {genUseLoading} from "@/hook";
import {dataService} from "@/graphic/Service/DataService";

const data = useData()
const mode = computed(() => Number(router.currentRoute.value.params.mode) as Mode)
const isRoad = computed(() => mode.value === Mode.Road)
const options = computed(() =>
  !isRoad.value ? types.map(t => ({ label: t, value: t })) : null
)
const backImageChang = (show) => {
  dataService.setGridDisplay(!show)
  drawRef.value.uiControl.menu_backgroundImg(show)
}

watchEffect(() => {
  if (data.value && drawRef.value) {
    backImageChang(true)
  }
})

type Menu = {disable?: boolean, text: string, icon: string, onClick: () => void}
const menus = computed<Menu[]>(() => {
  const menus = [
    {
      text: "",
      icon: "backout",
      disable: !graphicState.value.canRevoke,
      onClick: () => {
        drawRef.value.uiControl.menu_revoke()
        changeStore()
      }
    },
    {
      text: "",
      icon: "redo",
      disable: !graphicState.value.canRecovery,
      onClick: () => {
        drawRef.value.uiControl.menu_recovery()
        changeStore()
      }
    },
    {
      text: "",
      icon: "clear",
      onClick: () => {
        drawRef.value.uiControl.menu_clear()
        changeStore()
      }
    },
    {
      icon: "reset",
      text: "",
      onClick: () => drawRef.value.uiControl.menu_view_reset()
    }
  ]

  if (isRoad.value) {
    menus.splice(menus.length - 1, 0, {
      icon: "map",
      text: ``,
      onClick: () => backImageChang(!graphicState.value.showBackImage)
    })
  }
  return menus
})

const saveStore = genUseLoading(async () => {
  const newData = {
    ...data.value,
    data: JSON.parse(JSON.stringify(drawRef.value.load.save()))
  }
  const blob = await drawRef.value.uiControl.screenShot()
  newData.url = await uploadImage(blob)
  const origin = isRoad.value ? roadPhotos.value : accidentPhotos.value
  const index = origin.indexOf(data.value)
  if (~index) {
    origin[index] = newData
  } else {
    origin.push(newData)
  }
})

const saveHandler = async () => {
  await saveStore()
  await router.replace({name: isRoad.value ? writeRouteName.roads : writeRouteName.accidents})
}

const createTable = async () => {
  await saveStore()
  await router.replace({name: writeRouteName.tabulation, params: {id: data.value.id} })
}


</script>

<style scoped lang="scss">
.graphic-header {
  display: flex;
  position: relative;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
}

.actions {
  display: flex;
}
.action {
  font-size: 20px;
  margin: 0 15px;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  justify-content: center;
  p {
    font-size: 14px;
    text-align: center;
  }
}

.table,
.title {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.title {
  left: 0;
  display: flex;
  align-items: center;
  p {
    margin-left: 10px;
  }
}

.table {
  right: 0;
}

.save {
  margin-left: 24px;
}

.map-status {
  pointer-events: none;
  position: absolute;
  left: 100%;
  transform: translateX(-50%);
  bottom: 0;
  z-index: 1;
}
</style>

<style lang="scss">
.map-status.ui-input,
.map-status.ui-input .checkbox{
  width: 12px;
  height: 7px;

}
.map-status.ui-input .checkbox input + .replace {
  border-radius: 4px;
  background-color: #7E7E7E;
  position: absolute;
  border: none;

  &:before {
    content: "";
    display: block;
    position: absolute;
    height: 5px;
    border-radius: 50%;
    width: 5px;
    background-color: #fff;
    top: 1px;
    left: 1px;
    transition: all .3s ease;
  }
  i {
    display: none;
  }

  &.checked{
    background-color: var(--colors-primary-base) !important;
    &:before {
      left: calc(100% - 6px);
    }
  }
}

.save-file.save {
  border-color: #3a3d3d;
  background-color: #3a3d3d !important;
  color: #fff;
}
</style>