ocr-web/src/views/task/modal/MapModal.vue

<script lang="ts" setup>
import { difference } from 'lodash-es'
import {
  computed,
  defineEmits,
  defineProps,
  onMounted,
  onUnmounted,
  ref,
  watch,
} from 'vue'
import { VueDraggable } from 'vue-draggable-plus'
import MapDetail from '../../map/index.vue'
import { workPackageMap } from '@/config/workorder'
import { useKeydown } from '@/hooks/event/useKeydown'

const props = defineProps({
  reviewType: {
    type: Number,
    default: () => 1,
    require: true,
  },
})
const show = ref(false)
const detailobj = ref(null)
const objdetail = ref({})

async function showModal(item) {
  objdetail.value = item
  show.value = true
}

function closeModal() {
  show.value = false
}

onMounted(async () => {

})
onUnmounted(() => {

})
defineExpose({
  showModal,
  closeModal,
})
</script>

<template>
  <n-modal v-model:show="show" transform-origin="center">
    <n-card
      class="cardstyle"
      :bordered="false"
      size="huge"
      role="dialog"
      aria-modal="true"
    >
      <div class="wrapper">
        <div class="wrapper-title" style="color: #333;font-weight:550;font-size:18px">
          定位信息
        </div>
        <div class="close" @click="closeModal">
          <SvgIcon size="20" class="icon" name="close-none-border" />
        </div>
      </div>
      <div class="topline" />
      <div class="mapmain">
        <div id="map-container" style="width: 100%; height: 100%">
          <MapDetail :obj="objdetail" />
        </div>
      </div>
    </n-card>
  </n-modal>
</template>

<style lang="less" scoped>
.topline{
      background: #E8E8E8;
    height: 0.5px;
   width: 805px;
    margin-left: -22px;
    top: 85px;
}
.close{
        position: absolute;
    right: 23px;
    font-size: 20px;
    cursor: pointer;
}
::v-deep .n-card > .n-card__content, .n-card > .n-card__footer{
  padding-left:24px ;
  padding-right: 24px;
}
.wrapper {
  display: flex;
  flex-direction: column;
 // border-bottom: 1px solid #e8e8e8;
  padding-bottom: 24px;

  &-title {
    font-weight: bold;
    font-size: 16px;
  }

  &-bar {
    width: 100%;
    margin-top: 20px;
  }

  &-footer {
    display: flex;
    justify-content: flex-end;
  }

  &-info {
    font-weight: bold;
    position: relative;
    color: #333333;
    font-size: 14px;

    &:before {
      background-color: #507afd;
      content: "";
      width: 5px;
      border-radius: 2px;
      top: 0;
      bottom: 0;
      position: absolute;
    }
  }
}

.dragcardStyle {
  --n-padding-bottom: 0px !important;
  --n-padding-left: 0px !important;
}

.cardstyle {
  width: 808px;
  height: 486px;
  --n-padding-bottom: 20px;
  --n-padding-left: 24px;
}
.left{
     width: 65%;
     height: 456px;
     //     flex: 0.6;
      background-size: auto 100%;
      background-position: center;
      background-repeat: no-repeat;
      border-radius: 8px;
      position: relative;
    background-color: #f2f2f2;
}
.right{
    width: 30%;
//flex:0.4;
margin-left: 16px;
height: 463px;
.viewlabel {
  margin-top: 10px;
  font-size: 14px;
  font-family: PingFang SC, PingFang SC-Regular;
  font-weight: Regular;
  text-align: left;
  color: #999999;
  line-height: 20px;
  height: 20px;
}
.viewvalue {
  font-size: 14px;
  font-family: PingFang SC, PingFang SC-Regular;
  font-weight: Regular;
  text-align: left;
  color: #333333;
  line-height: 20px;
  height: 100%;
  margin: 3px 0 10px 0;
  max-width: 650px;
}
.tags {
    display: flex;
    margin-top: 8px;
  }

  .tag {
    border: 1px solid #d8d8d8;
    box-sizing: border-box;
    border-radius: 8px;
    color: #666666;
    margin-right: 12px;
    padding: 4px 8px;
    font-size: 12px;
    line-height: 16px;
  }

  .tag-submited {
    color: #507afd;
    border: 1px solid #507afd;
  }

  .tag-submiting {
    color: #ffb800;
    border: 1px solid #ffb800;
  }

  .tag-passed {
    color: #02c984;
    border: 1px solid #02c984;
  }

  .tag-not-passed {
    color: #ff7575;
    border: 1px solid #ff7575;
  }

  .tag-approved {
    color: #507afd;
    border: 1px solid #507afd;
  }
}
.textbtnStyle {
  cursor: pointer;
  color: #1980ff;
}

.btnlist{
    width: 220px;
    display: flex;
    float: right;
    justify-content: space-between;
}
.mapmain {
  height: 355px;
  width: 100%;
      padding-top: 24px;
}
::v-deep(.n-card.n-card--content-segmented > .n-card__content:not(:first-child)) {
  border: 0px;
}

::v-deep(.n-card > .n-card-header) {
  --n-padding-top: 0px;
  --n-padding-bottom: 12px;
}
::v-deep(.n-card > .n-card-header .n-card-header__main) {
  font-weight: lighter !important;
  font-size: 14px;
}
::v-deep(.n-scrollbar) {
  border-top: none !important;
}
::v-deep(.n-button--info-type) {
  background: #507afd !important;
}
::v-deep(.checkAll .n-checkbox.n-checkbox--indeterminate .n-checkbox-box) {
  background: none;
  border: none;
}
::v-deep(.checkAll .n-checkbox-box__border) {
  border: 1px solid #e8e8e8 !important;
}
::v-deep(.checkAll .n-checkbox-icon) {
  border: 3px solid #fff;
  background: #1980ff;
}
::v-deep(.checkAll .n-checkbox-icon svg) {
  display: none !important;
}
::v-deep(.n-card-header__main) {
  color: #666 !important;
}
::v-deep(.n-button--secondary) {
  background-color: #fff;
  border: 1px solid #cad2dd !important;
}
::v-deep(.n-button--secondary):hover {
  background-color: #fff !important;
  border: 1px solid #cad2dd !important;
}
::v-deep( .n-card__content){
  padding-left:  23px !important;
   padding-right:  23px !important
}
</style>