Merge pull request 'fix:完善弹框功能' (#276) from fix/change_task into test

Reviewed-on: #276

src/views/map/index.vue

@@ -14,31 +14,7 @@ export default {
 
     let methods = {
       init(item) {
-    /*    function getQueryParamsNew() {
-          //console.log(window.location.search)
-          const params = new URLSearchParams(window.location.search);
-          //console.log(params)
-          let paramsObj = {};
-          //console.log(params)
-          for (const [key, value] of params.entries()) {
-            if (paramsObj.hasOwnProperty(key)) {
-              if (Array.isArray(paramsObj[key])) {
-                paramsObj[key].push(value);
-              } else {
-                paramsObj[key] = [paramsObj[key], value];
-              }
-            } else {
-              paramsObj[key] = value;
-            }
-          }
-         // console.log(paramsObj)
-          return paramsObj;
-        }
-        var queryParamsNew = getQueryParamsNew();*/
-     //   state.queryParamsNew = queryParamsNew;
-  //   console.log(item)
        let queryParamsNew =item
-       // console.log(queryParamsNew)
         const lng = queryParamsNew.lng; //经度
         const lat = queryParamsNew.lat; // 纬度
         // 初始化地图
@@ -72,7 +48,6 @@ export default {
       },
     };
     onMounted(() => {
-     console.log(props)
      methods.init(props.obj);
     });
     return {
@@ -90,12 +65,7 @@ export default {
 </template>
 
 <style >
-/*.layout-sider {
+
-  display: none;
-}
-.layout-main-header {
-  display: none;
-}*/
 .mapmain {
   height: 100%;
   width: 100%;

src/views/task/content/Content.vue

@@ -538,11 +538,6 @@ console.log(modal)
     const lng = locationobj.lng.$numberDecimal
     const name = e.value
   modal.showModal({name,lat,lng})   
-   // const protocol = window.location.protocol
-    //const hostname = window.location.hostname
-   // const port = window.location.port
-    //const hostWithPort = `${protocol}//${hostname}:${port}/`
-   // window.open(`${hostWithPort}map` + `?name=${name}&lat=${lat}&lng=${lng}`)
   }
 }
 function overTaskHandelr(item: any) {
@@ -574,7 +569,6 @@ async function fetchData() {
     loading.value = false
   }
 }
-// const throttledCheckScroll = throttle(checkBottom, 200);
 
 let num = 1
 
@@ -584,8 +578,6 @@ function checkBottom() {
   // console.log(1)
   if (!container)
     return
-
-  // const { scrollTop, clientHeight, scrollHeight } = container;
   const scrollTop = window.pageYOffset || document.documentElement.scrollTop
 
   // 获取视口的内部高度
@@ -651,8 +643,6 @@ function nodrage() {
   message.error('已审批无法移入可疑文件夹中!')
 }
 function getDetailImg(event, item){
-  //console.log(item)
-  //alert(1)
     const modal = unref(imgdetailref)! as any
    
   
@@ -1300,86 +1290,6 @@ function nopassfun(e){
           </div>
         </div>
       </div>
-      <!-- <div class="wrapper-list">
-        <div
-          v-for="(item, index) in taskDetailPictureList"
-          :key="index"
-
-          class="grid-item"
-          @click="handleSelect(item)"
-          @mouseover="overTaskHandelr(item)"
-          @mouseleave="leaveTaskHandler"
-        >
-          <div
-            class="img-wrapper"
-            :style="{ 'background-image': `url(${item.serverThumbnailUrl})` }"
-          />
-          <div class="time-wrapper">
-            <div class="time">
-              <SvgIcon color="#FFF" size="16" name="camera" />
-              <span class="current-time">{{
-                item.photoDateTimestamp
-                  ? formatToDateHMS(Number(item.photoDateTimestamp) || 0)
-                  : "-"
-              }}</span>
-            </div>
-            <div class="time">
-              <SvgIcon color="#FFF" size="16" name="save" />
-              <span class="current-time">{{
-                item.submitDateTimestamp
-                  ? formatToDateHMS(Number(item.submitDateTimestamp) || 0)
-                  : "-"
-              }}</span>
-            </div>
-          </div>
-          <div class="check">
-            <n-checkbox
-              v-show="
-                batchtwo && item.historyStates !== 2 && item.historyStates !== 3
-              "
-              v-model:checked="item.checked"
-              @click.stop
-              @update:checked="onCheckChange($event, item)"
-            />
-          </div>
-          <div
-            class="percent"
-            :class="{ 'percent-red': item?.maxSimilarity >= 100 }"
-          >
-            <div class="val">
-              {{
-                item?.similarityScore
-                  && Number(item?.similarityScore).toFixed(0)
-              }}<span class="percent-unit">%</span>
-            </div>
-          </div>
-
-          <div v-if="item.historyStates === 2" class="pass-status">
-            <SvgIcon name="pass-icon" style="width: 52; height: 24px" />
-          </div>
-          <div v-else-if="item.historyStates === 3" class="pass-status">
-            <SvgIcon name="no-pass-icon" style="width: 52; height: 24px" />
-          </div>
-          <div
-            v-show="overTasktwo && overTasktwo.id === item.id"
-            class="action"
-               @mouseover="overTaskHandelr"
-        @mouseleave="leaveTaskHandler"
-
-          >
-            <SvgIcon
-              style="cursor: pointer"
-              name="t1"
-              @click.stop="approvalHandlerx(item)"
-            />
-            <SvgIcon
-              style="cursor: pointer; margin-left: 40px"
-              name="t2"
-              @click.stop="singleRejectHandlex(item)"
-            />
-          </div>
-        </div>
-      </div> -->
     </div>
     <NotPassed ref="notPassModalRef" @success="notPassSuccess" @close="closePassno" />
     <BatchModal ref="batchModalRef" @reject="rejectHandler" @approval="approvalHandler" />
@@ -1707,18 +1617,6 @@ function nopassfun(e){
           height: 129px;
         }
       }
-      /*  .leftback {
-        position: absolute;
-        width: 100%;
-        height: 151px;
-        bottom: 0;
-        background: linear-gradient(
-          180deg,
-          rgba(0, 0, 0, 0) 0%,
-          rgba(0, 0, 0, 0) 29%,
-          rgba(3, 0, 0, 0.73)
-        );
-      }*/
     }
 
     .right {

src/views/task/modal/ImgDetailModal.vue

@@ -132,7 +132,7 @@ defineExpose({
       aria-modal="true"
     >
       <div class="wrapper">
-        <span class="wrapper-title" style="color: #333">任务ID:{{detailobj.fromTaskName}}</span>
+          <div class="wrapper-title" style="color: #333">任务ID:{{detailobj.fromTaskName}}</div><div @click="closeModal" class="close">X</div>
       </div>
       <div style="display:flex;margin-top:25px">
         <div
@@ -258,6 +258,12 @@ defineExpose({
 </template>
 
 <style lang="less" scoped>
+.close{
+        position: absolute;
+    right: 40px;
+    font-size: 20px;
+    cursor: pointer;
+}
 .wrapper {
   display: flex;
   flex-direction: column;

src/views/task/modal/MapModal.vue

@@ -0,0 +1,272 @@
+<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 { workPackageMap } from '@/config/workorder'
+import { useKeydown } from '@/hooks/event/useKeydown'
+import MapDetail from "../../map/index.vue"
+
+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
+}
+
+useKeydown('c', () => {
+ 
+  closeModal()
+})
+
+
+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">定位信息</div><div @click="closeModal" class="close">X</div>
+      </div>
+        <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>
+.close{
+        position: absolute;
+    right: 40px;
+    font-size: 20px;
+    cursor: pointer;
+}
+.wrapper {
+  display: flex;
+  flex-direction: column;
+  border-bottom: 1px solid #e8e8e8;
+  padding-bottom: 32px;
+
+  &-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: 80%;
+  width: 100%;
+}
+::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;
+}
+</style>