From 1768bd582683ff5220dafb8a190ff2d6fffa8213 Mon Sep 17 00:00:00 2001
From: lihui_ocr <lihui1@qq.com>
Date: Sun, 28 Apr 2024 14:08:57 +0800
Subject: [PATCH] =?UTF-8?q?feat:=E5=9C=B0=E5=9B=BE=E5=BC=B9=E6=A1=86?=
 =?UTF-8?q?=E5=BD=A2=E5=BC=8F=E5=B1=95=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../final/content/ListContent - 副本.vue      | 1017 +++++++++++++++++
 src/views/map/index.vue                       |   32 +-
 src/views/task/content/Content.vue            |   20 +-
 3 files changed, 1053 insertions(+), 16 deletions(-)
 create mode 100644 src/views/final/content/ListContent - 副本.vue

diff --git a/src/views/final/content/ListContent - 副本.vue b/src/views/final/content/ListContent - 副本.vue
new file mode 100644
index 0000000..24fcd07
--- /dev/null
+++ b/src/views/final/content/ListContent - 副本.vue	
@@ -0,0 +1,1017 @@
+<script lang="ts" setup>
+import { onMounted, ref, reactive, unref, computed,watch } from "vue";
+import { useRoute, useRouter } from "vue-router";
+import testImg from "@/assets/images/test.png";
+import { chunk } from "lodash-es";
+import type { RowData } from "@/config/final";
+import { getFinalList } from "@/api/final";
+import { useFinal } from "@/store/modules/final";
+import { formatToDateHMS } from "@/utils/dateUtil";
+import { useMessage, useDialog } from "naive-ui";
+import { audit } from "@/api/task/task";
+import NotPassed from "@/components/Approval/NotPassed.vue";
+import { RepeatModal, RepeatTaskTableModal } from "../comp";
+const dialog = useDialog();
+const message = useMessage();
+const router = useRouter();
+const notPassModalRef = ref(null); // 不通过弹窗
+const sortorder = ref("asc");
+const sortname = ref("states");
+const loading = ref(true);
+const total = ref(0);
+const scrollContainer = ref(null);
+const tableData = ref<any>([]);
+const finalStore = useFinal();
+
+let num = 1;
+const pagination = reactive({
+  page: 1,
+  pageCount: 20,
+  pageSize: 20,
+});
+const repeatModalRef = ref(null);
+const repeatTaskTableModalRef = ref(null);
+const selectionIds = ref([]);
+const showActions = computed(() => {
+  return selectionIds.value.length;
+});
+const emit = defineEmits(["changeShow"]);
+function handleCheck(row: any, showcheck: any) {
+  if (showcheck == false) {
+    console.log(tableData.value);
+    tableData.value.map((item) => {
+      if (item.length > 0) {
+        item.map((itemx, index) => {
+          if (row.id == itemx.id) {
+            itemx.showcheck = true;
+          }
+          //newlistx.push(itemx)
+        });
+      }
+    });
+    selectionIds.value.push(row);
+  } else {
+    tableData.value.map((item) => {
+      if (item.length > 0) {
+        item.map((itemx, index) => {
+          if (row.id == itemx.id) {
+            itemx.showcheck = false;
+          }
+          //newlistx.push(itemx)
+        });
+      }
+    });
+    selectionIds.value.pop(row);
+  }
+}
+function switchBatch() {
+  tableData.value.map((item) => {
+    item.map((itemx, index) => {
+      itemx.showcheck = false;
+    });
+  });
+  selectionIds.value = [];
+}
+function changeContent() {
+  emit("changeShow");
+}
+const initRem = () => {
+  const designWidth = 1440;
+  const rempPx = 16;
+  const scale = window.innerWidth / designWidth;
+  document.documentElement.style.fontSize = scale * rempPx + "px";
+};
+
+async function initData(
+  page: number,
+  pageSize: number,
+  filterId?: any,
+  taskName?: string
+) {
+ 
+  const asideParmas = unref(finalStore.getAsideValue);
+  // 有过滤配置的时候优先使用过滤配置，不要使用左侧参数
+  // let params = filterId ? { userSearchId: filterId } : asideParmas
+   let params = asideParmas;
+  if(params?.izshowall==false){
+    params.isFail=false
+  }
+  params = params?.izshowall ? {isFail:true} : params;
+
+  const result = await getFinalList({
+    sortorder: sortorder.value,
+    pageSize,
+    currPage: page,
+    sortname: sortname.value,
+    taskName,
+
+    ...params,
+  });
+  const { data, pageCount, totalCount } = result;
+  console.log(data, pageCount, totalCount);
+  //tableData.value =  tableData.value.concat(data);
+  tableData.value = data;
+  console.log(tableData.value);
+  total.value = totalCount;
+  pagination.page = page;
+  pagination.pageCount = Math.ceil(totalCount / pageSize);
+  loading.value = false;
+  tableData.value.map((item) => {
+    item.showcheck = false;
+    if (isValidTimestamp(item.fromuptime)) {
+      item.fromuptime = formatToDateHMS(item.fromuptime);
+    }
+  });
+
+  tableData.value = chunk(tableData.value, 4);
+}
+async function query(
+  page: number,
+  pageSize: number,
+  filterId?: any,
+  taskName?: string
+) {
+  console.log("query", taskName);
+
+  const asideParmas = unref(finalStore.getAsideValue);
+  // 有过滤配置的时候优先使用过滤配置，不要使用左侧参数
+  // let params = filterId ? { userSearchId: filterId } : asideParmas
+  let params = asideParmas;
+  if(params?.izshowall==false){
+    params.isFail=false
+  }
+  params = params?.izshowall ? {isFail:true} : params;
+  const result = await getFinalList({
+    sortorder: sortorder.value,
+    pageSize,
+    currPage: page,
+    sortname: sortname.value,
+    taskName,
+    //isFail: true,
+    ...params,
+  });
+  const { data, pageCount, totalCount } = result;
+  //console.log(data, pageCount, totalCount);
+  let newlist = [];
+  let oldlist = tableData.value;
+  if (oldlist.length > 0) {
+    oldlist.map((item) => {
+      // console.log(item);
+      if (item.length > 0) {
+        item.map((itemx: any) => {
+          itemx.showcheck = false;
+          newlist.push(itemx);
+        });
+      }
+    });
+    data.map((item) => {
+      item.showcheck = false;
+      newlist.push(item);
+    });
+  } else {
+    data.map((item) => {
+      item.showcheck = false;
+      newlist.push(item);
+    });
+  }
+  //tableData.value =  tableData.value.concat(data);
+  tableData.value = newlist;
+  // console.log(tableData.value);
+  total.value = totalCount;
+  pagination.page = page;
+  pagination.pageCount = Math.ceil(totalCount / pageSize);
+  loading.value = false;
+  tableData.value.map((item) => {
+    if (isValidTimestamp(item.fromuptime)) {
+      item.fromuptime = formatToDateHMS(item.fromuptime);
+    }
+  });
+
+  tableData.value = chunk(tableData.value, 4);
+}
+function isValidTimestamp(value) {
+  if (typeof value !== "number" || !Number.isInteger(value)) {
+    return false; // 首先确保值是一个整数数字
+  }
+  const date = new Date(value);
+  return !isNaN(date.getTime()); // 验证能否转换为有效日期
+}
+
+//查看详情页
+function goDetail(row) {
+  router.push({
+    name: "final-detail",
+    query: { id: row.id, packageid: row.packageid },
+  });
+}
+// 小结批量不通过
+function repeatBatchReject(items) {
+  console.log(items);
+  rejectHandler(items);
+}
+// 审核不通过
+function rejectHandler(list) {
+  console.log(list);
+  const msg = validate(list);
+  if (msg !== null) {
+    message.error(msg);
+    return;
+  }
+  function validate(items: any[]) {
+    if (items.length === 0) return "至少选中一个任务";
+    return null;
+  }
+  console.log(notPassModalRef);
+  const modal = unref(notPassModalRef)! as any;
+  modal.showModal(list);
+}
+
+function showModal(modalRef: any) {
+  const modal = unref(modalRef)! as any;
+  modal.showModal();
+}
+onMounted(() => {
+  initRem();
+  initData(1, 20);
+});
+const item = {
+  img: testImg,
+  checked: false,
+  title: "YP45678",
+  date: "2023-12-19 12:09:18",
+};
+const data = ref<any[]>([]);
+function actionHandler(action: any, row: any) {
+  const { key } = action;
+  switch (key) {
+    case "view":
+      goDetail(row);
+      break;
+    case "reset":
+      // resetHandler()
+      break;
+    case "approval":
+      singleApproval(row);
+      break;
+    case "reject":
+      rejectHandler(row);
+      break;
+    default:
+      break;
+  }
+}
+// 审核通过
+function doAudit(param: any, row: any) {
+  dialog.info({
+    title: "确认提示",
+    content: "确认给该任务审批为【通过】吗?",
+    positiveText: "确定",
+    negativeText: "取消",
+    onPositiveClick: () => {
+      audit(param).then((res) => {
+        const { code } = res;
+        if (code === "OK") {
+          message.success(res.message);
+          //changecardstatus(3, row);
+          initData(1, 20);
+          num = 1;
+          reload();
+        } else {
+          message.error(res.message);
+        }
+      });
+    },
+    onNegativeClick: () => {},
+  });
+}
+// 单个审批通过
+function singleApproval(row) {
+  console.log(row);
+  const param = {
+    result: true,
+    comment: "",
+    disposeType: "",
+    disposeTypeId: "",
+    failCauseId: "",
+    failCauseName: "",
+    flowTaskInfoList: [
+      {
+        formId: row.id,
+        taskId: row.taskId,
+        taskName: row.fromTaskName,
+      },
+    ],
+  };
+  doAudit(param, row);
+}
+// 批量通过
+function batchApproval() {
+  const items: any = selectionIds.value;
+  const msg = validate(items);
+  function validate(items: any[]) {
+    if (items.length === 0) return "至少选中一个任务";
+    return null;
+  }
+  if (msg !== null) {
+    message.error(msg);
+    return;
+  }
+  console.log(items);
+  const list: any = [];
+  items.forEach((item) => {
+    list.push({
+      formId: item.id,
+      taskId: item.taskId,
+      taskName: item.fromtaskname,
+    });
+  });
+
+  const param = {
+    result: true,
+    comment: "",
+    disposeType: "",
+    disposeTypeId: "",
+    failCauseId: "",
+    failCauseName: "",
+    flowTaskInfoList: list,
+  };
+
+  doAudit(param, {});
+  selectionIds.value = [];
+  num = 1;
+}
+// 批量不通过
+function batchReject() {
+  const items: any = selectionIds.value;
+  rejectHandler(items);
+  selectionIds.value = [];
+  num = 1;
+}
+//修改卡片状态渲染效果
+function changecardstatus(states, item) {
+  //let index = tableData.value.findIndex(itemx => itemx.id === item.id);
+  let newlist = [];
+  tableData.value.map((itemarr, indexarr) => {
+    itemarr.map((itemobj, indexobj) => {
+      if (item.id == itemobj.id) {
+        itemobj.states = states;
+      }
+      newlist.push(itemobj);
+    });
+  });
+  tableData.value = chunk(newlist, 4);
+}
+
+function reload() {
+  //query(1, 20)
+  //num=1
+  //selectionIds.value = []
+  //checkedRowKeys.value = []
+  //  const { page, pageSize } = unref(tableRef.value?.pagination) as PaginationProps
+  //  query(page!, pageSize!)
+}
+
+let debounceTimer;
+// 检查是否滚动到底部
+function checkBottom() {
+  const container = scrollContainer.value;
+  // console.log(1)
+  if (!container) return;
+
+  // const { scrollTop, clientHeight, scrollHeight } = container;
+  const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
+
+  // 获取视口的内部高度
+  const clientHeight =
+    window.innerHeight || document.documentElement.clientHeight;
+
+  // 获取整个文档的高度
+  const scrollHeight = document.documentElement.scrollHeight;
+
+  clearTimeout(debounceTimer);
+  debounceTimer = setTimeout(() => {
+    if (scrollTop + clientHeight >= scrollHeight - 10) {
+      num = num + 1;
+      console.log(num);
+      query(num, 20);
+      //  fetchData(); // 接近底部时加载更多数据
+    }
+  }, 500);
+}
+function changesort(sortnamex) {
+  if (sortorder.value == "asc" && sortnamex == "submit_date_timestamp") {
+    sortorder.value = "desc";
+    sortname.value = "submit_date_timestamp";
+  }else if (sortorder.value == "desc" && sortnamex == "submit_date_timestamp") {
+    sortorder.value = "asc";
+    sortname.value = "submit_date_timestamp";
+  }  else if (sortorder.value == "desc" && sortnamex == "similarity_score") {
+    sortorder.value = "asc";
+    sortname.value = "similarity_score";
+  } else if (sortorder.value == "asc" && sortnamex == "similarity_score") {
+    sortorder.value = "desc";
+    sortname.value = "similarity_score";
+  } else if (sortorder.value == "asc" && sortnamex == "field1") {
+    sortorder.value = "desc";
+    sortname.value = "field1";
+  }  else if (sortorder.value == "desc" && sortnamex == "field1") {
+    sortorder.value = "asc";
+    sortname.value = "field1";
+  } 
+initData(1, 20);
+num=1
+}
+watch(
+  () => finalStore.asideValue,
+  (newVal, oldVal) => {
+   initData(1, 20);
+  },
+  { deep: true }
+);
+
+defineExpose({
+  initData,
+});
+</script>
+
+<template>
+  <div class="wrapper">
+    <div class="wrapper-header">
+      <div class="wrapper-header-left">
+        <span class="wrapper-header-font">任务管理列表</span>
+        <SvgIcon
+          style="cursor: pointer"
+          size="16"
+          name="card-mode"
+          @click="changeContent"
+        />
+      </div>
+      <div>
+        <SvgIcon
+          style="margin-right: 6px"
+          size="13"
+          name="summary"
+          @click="showModal(repeatModalRef)"
+        />
+        <NButton class="xjcc" text @click="showModal(repeatModalRef)">
+          小结查重
+        </NButton>
+
+        <div v-show="!showActions" style="display: flex; align-items: center">
+          <div class="btn">
+            <SvgIcon style="margin-right: 6px" size="22" name="batch" />
+            批量审批
+          </div>
+        </div>
+        <div v-show="showActions" class="batch">
+          <NButton text @click="switchBatch()">
+            <template #icon>
+              <SvgIcon name="revoke" />
+            </template>
+            取消
+          </NButton>
+
+          <img
+            class="btn-approval btn-left"
+            src="@/assets/images/task/btn-not-pass.png"
+            alt=""
+            @click.stop="batchReject"
+          />
+          <SvgIcon size="24" name="vs" />
+          <img
+            class="btn-approval"
+            src="@/assets/images/task/btn-pass.png"
+            alt=""
+            @click.stop="batchApproval"
+          />
+        </div>
+
+        <n-popover
+          ref="popover"
+          :style="{ padding: '0px' }"
+          style="width: 148px"
+          :show-arrow="false"
+          placement="bottom-start"
+          trigger="click"
+        >
+          <template #trigger>
+            <div class="icon-wrap">
+              <SvgIcon size="20" name="more-blue" />
+            </div>
+          </template>
+          <ul class="wrapper-header-action">
+            <li @click="importHandler">
+              <SvgIcon size="20" name="import" /><span style="margin-left: 5px"
+                >批量导入数据</span
+              >
+            </li>
+            <li @click="exportHandler">
+              <SvgIcon size="20" name="download" /><span
+                style="margin-left: 5px"
+                >导出待审数据</span
+              >
+            </li>
+            <li>
+              <SvgIcon size="20" name="download" /><span
+                style="margin-left: 5px"
+                >导出全部数据</span
+              >
+            </li>
+            <li>
+              <SvgIcon size="20" name="look" /><span style="margin-left: 5px"
+                >查看导入记录</span
+              >
+            </li>
+          </ul>
+        </n-popover>
+      </div>
+    </div>
+
+    <div class="header_data">
+      <DataHeader :hasColor="true" />
+    </div>
+    <div class="wrapper-settings">
+      <div>
+        <div @click="changesort('submit_date_timestamp')">
+          <span>提报时间排序</span
+          ><SvgIcon style="margin-left: 6px" name="sort" size="13" />
+        </div>
+        <div @click="changesort('similarity_score')">
+          <span>相似度排序</span
+          ><SvgIcon style="margin-left: 6px" name="sort" size="13" />
+        </div>
+        <div @click="changesort('field1')">
+          <span>提报人排序</span
+          ><SvgIcon style="margin-left: 6px" name="sort" size="13" />
+        </div>
+      </div>
+      <div style="width: 3vw">
+        <SvgIcon name="magnifying-1" size="18" style="margin-right: 8px" />
+        <SvgIcon
+          style="cursor: pointer"
+          size="18"
+          name="column"
+          @click="showModal(customTabelRef)"
+        />
+      </div>
+    </div>
+    <div :class="tableData.length>4?'cotnet_wrapeer':'cotnet_wrapeertwo'" @scroll="checkBottom" ref="scrollContainer">
+  
+      <div
+        class="data_wrapper"
+        v-for="(sitem, sindex) in tableData"
+        :key="sindex"
+        :style="
+          sitem.length == 1
+            ? { width: '25%' }
+            : sitem.length == 2
+            ? { width: '50%' }
+            : sitem.length == 3
+            ? { width: '75%' }
+            : {}
+        "
+      >
+        <div
+          class="item"
+          v-for="(item, index) in sitem"
+          :key="index"
+          :style="
+            sitem.length == 1
+              ? { margin: '0 4% 0 4%' }
+              : sitem.length == 2
+              ? { margin: '0 2% 0 2%' }
+              : sitem.length == 3
+              ? { margin: '0 1.2% 0 1.2%' }
+              : {}
+          "
+        >
+          <div class="top">
+            <div
+              @click="goDetail(item)"
+              class="img"
+              :style="
+                item.serverThumbnailUrl != null
+                  ? `background:url(${item.serverThumbnailUrl});background-size:100% 100%;background-repeat: no-repeat;`
+                  : `background:url(${item.imgUrl});background-size:100% 100%;background-repeat: no-repeat;`
+              "
+            > <div class="percent" v-if="item.similarityscore != -1">
+                <SvgIcon size="30" :name="item.similarityscore == 100 ? 'error_tag' : 'tag'" />
+                <div class="val">
+                  {{ `${item.similarityscore}%` }}
+                </div>
+              </div></div>
+            <div class="check_box" v-show="item.states == 2">
+              <n-checkbox
+                size="medium"
+                label=" "
+                @click="handleCheck(item, item.showcheck)"
+                :checked="item.showcheck"
+              />
+            </div>
+            
+            <div class="content" @click="goDetail(item)">
+              <div class="title">
+                <n-ellipsis style="max-width: 100%">
+                  任务ID：{{ item.fromtaskid }}
+                </n-ellipsis>
+              </div>
+              <div class="date">
+                <n-ellipsis style="max-width: 100%"
+                  >{{ item.fromuptime }}
+                </n-ellipsis>
+              </div>
+              <div class="tag_box">
+                <div
+                  class="tag_item"
+                  v-for="index in 2"
+                  :key="index"
+                  :style="
+                    index == 2 || item.states == 3
+                      ? 'color:#02C984'
+                      : item.states == 2
+                      ? 'color: #fe9800;background:#f7eac075'
+                      : item.states == 5
+                      ? 'color:#FF4E4F;background:#f7c0c06b'
+                      : 'color:#02C984'
+                  "
+                >
+                  {{
+                    index == 1
+                      ? item.states == 3
+                        ? "通过"
+                        : item.states == 2
+                        ? "待审核"
+                        : item.states == 5
+                        ? "未通过"
+                        : ""
+                      : item.fromusername
+                  }}
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="bottom">
+            <!-- <div class="reset_action">重置审批</div>-->
+            <div
+              class="resovle_action"
+              v-show="item.states != 2"
+              @click="goDetail(item)"
+            >
+              查看
+            </div>
+            <div
+              class="resovle_action"
+              v-show="item.states == 2"
+              @click="actionHandler({ key: 'approval' }, item)"
+            >
+              通过
+            </div>
+            <div
+              class="reject_action"
+              v-show="item.states == 2"
+              @click="actionHandler({ key: 'reject' }, [item])"
+            >
+              不通过
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <NotPassed ref="notPassModalRef" @success="initData(1, 20)" />
+    <RepeatModal
+      ref="repeatModalRef"
+      @reject="repeatBatchReject"
+      @viewrepeat="showModal(repeatTaskTableModalRef)"
+    />
+    <RepeatTaskTableModal ref="repeatTaskTableModalRef" />
+  </div>
+</template>
+
+<style scoped lang="less">
+.wrapper {
+  // display: flex;
+  // flex-flow: row wrap;
+  // align-items: center;
+  // justify-content: flex-start;
+  // flex: 1;
+  // box-sizing: border-box;
+  // margin-left: 16px;
+  //width: 100%;
+  //background: #fff;
+  // padding: 0px 24px 24px 24px;
+  display: flex;
+  flex: 1;
+  overflow: hidden;
+  flex-direction: column;
+  box-sizing: border-box;
+  margin-left: 16px;
+  width: 100%;
+  background: #fff;
+  padding: 0px 24px 24px 24px;
+  .btn-approval {
+    width: 68px;
+    height: 28px;
+    cursor: pointer;
+  }
+
+  .btn-left {
+    margin-left: 16px;
+  }
+  .icon-wrap {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 30px;
+    height: 30px;
+    background: rgba(80, 122, 253, 0.1);
+    border-radius: 8px;
+    cursor: pointer;
+  }
+  &-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    box-sizing: border-box;
+    height: 64px;
+    width: 100%;
+    div {
+      display: flex;
+      align-items: center;
+    }
+
+    .xjcc {
+      //width: 226px;
+      font-weight: bold;
+      color: #507afd;
+      margin-right: 20px;
+    }
+
+    .title {
+      color: #507afd;
+      font-weight: bold;
+      font-size: 14px;
+      margin-left: 8px;
+    }
+
+    .btn {
+      width: 118px;
+      height: 36px;
+      background: linear-gradient(135deg, #5b85f8, #3c6cf0);
+      border-radius: 17px;
+      box-shadow: 0px 2px 6px 0px rgba(116, 153, 253, 0.3);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: #fff;
+      margin-right: 6px;
+      cursor: pointer;
+    }
+
+    .more {
+      width: 30px;
+      height: 30px;
+      line-height: 30px;
+      opacity: 0.1;
+      background: linear-gradient(144deg, #73a7f9 0%, #3e6ef1 96%);
+      border-radius: 8px;
+    }
+
+    &-font {
+      font-size: 20px;
+      font-family: PingFang SC, PingFang SC-Medium;
+      font-weight: 600;
+      color: #0d0b22;
+      margin-right: 8px;
+    }
+
+    &-action {
+      padding: 8px;
+
+      li {
+        height: 32px;
+        line-height: 32px;
+        cursor: pointer;
+
+        &:hover {
+          background-color: #f3f8ff;
+        }
+      }
+    }
+  }
+  &-settings {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 12px 0px;
+    > div {
+      display: flex;
+
+      //  justify-content: space-between;
+      //width: 20vw;
+      > div {
+        cursor: pointer;
+        margin-right: 30px;
+        font-size: 13px;
+        height: 18px;
+        line-height: 18px;
+        /* font-family: PingFang SC, PingFang SC-Regular; */
+        font-weight: 600;
+        text-align: left;
+        color: #666666;
+        line-height: 0.88rem;
+      }
+    }
+  }
+  .header_data {
+    width: 100%;
+  }
+  .data_wrapper {
+    // padding-right: 10px;
+    display: flex;
+    //box-sizing: border-box;
+    flex-flow: row wrap;
+    align-items: center;
+    // justify-content: flex-start;
+    // justify-content: space-between;
+    // flex: 1;
+    .item {
+      flex: 1;
+      width: 23%;
+      margin-left: 2.3%;
+      height: 7rem;
+
+      background: url("@/assets/images/cardbg.png");
+      background-repeat: no-repeat;
+      background-size: 100% 100%;
+      // border: 0.075rem solid #e8e8e8;
+      border-radius: 0.18rem;
+      padding: 0.5rem 0.625rem;
+      // margin-right: 20px;
+      margin: 0 1% 0 1%;
+      margin-bottom: 1rem;
+      cursor: pointer;
+      .top {
+        display: flex;
+        flex-flow: row nowrap;
+        align-items: center;
+        justify-content: flex-start;
+        height: 75%;
+        border-bottom: 0.05rem solid #e8e8e8;
+        position: relative;
+        .img {
+          //width: 35%;
+
+          width: 5.25rem;
+          height: 3.43rem;
+          // height: auto;
+          object-fit: cover;
+          border-radius: 0.18rem;
+          position: relative;
+        }
+        .check_box {
+          position: absolute;
+          left: 0.25rem;
+          top: 0.6rem;
+        }
+        .content {
+          margin-left: 0.8rem;
+          width: calc(100% - 6rem);
+          .title,
+          .date {
+            font-size: 11px;
+            font-weight: 500;
+            text-align: left;
+            color: #323233;
+            line-height: 1rem;
+          }
+        }
+        .tag_box {
+          display: flex;
+          flex-flow: row nowrap;
+          align-items: center;
+          justify-content: flex-start;
+          margin-top: 0.5rem;
+          .tag_item {
+            min-width: 2rem;
+            min-height: 0.875rem;
+            font-size: 0.52rem;
+            padding: 0.0625rem 0.18rem;
+            font-weight: bolder;
+            text-align: left;
+            //   color: #507afd;
+            line-height: 0.875rem;
+            letter-spacing: 0.006rem;
+            margin-right: 0.2rem;
+            // opacity: 0.1;
+            background: #c0f7ec69;
+            border-radius: 0.125rem;
+            text-align: center;
+            white-space: nowrap;
+          }
+        }
+      }
+      .bottom {
+        display: flex;
+        flex-flow: row nowrap;
+        align-items: center;
+        justify-content: flex-end;
+        margin-top: 0.375rem;
+        div {
+          cursor: pointer;
+        }
+        .reset_action {
+          font-size: 12px;
+          font-weight: bolder;
+          text-align: left;
+          color: #666666;
+        }
+        .resovle_action {
+          font-size: 12px;
+          font-weight: bolder;
+          text-align: left;
+          color: #507afd;
+          line-height: 1rem;
+          margin-left: 0.9rem;
+        }
+        .reject_action {
+          font-size: 12px;
+          font-weight: bolder;
+          text-align: left;
+          color: #ff4e4f;
+          line-height: 1rem;
+          margin-left: 0.9rem;
+        }
+      }
+    }
+  }
+  .cotnet_wrapeer {
+    width: 100%;
+    height: 67vh;
+    //padding-right: 10px; /* 右侧内边距 */
+    overflow: hidden; /* 默认隐藏滚动条 */
+  }  .cotnet_wrapeertwo {
+    width: 100%;
+    height: 67vh;
+    //padding-right: 10px; /* 右侧内边距 */
+    overflow: hidden; /* 默认隐藏滚动条 */
+  }
+  .cotnet_wrapeer:hover {
+    overflow: auto;
+    width: calc(100% + 5px);
+  }
+   .percent {
+      position: absolute;
+      text-align: center;
+      z-index: 3;
+      right: 0px;
+      top: -4px;
+      color: #fff;
+
+      .val {
+        position: absolute;
+        left: 0;
+        top: 0;
+        display: block;
+        width: 100%;
+        height: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 10px;
+        font-family: PingFang SC, PingFang SC-Semibold;
+        font-weight: Semibold;
+        text-align: left;
+        color: #ffffff;
+        line-height: 24px;
+      }
+    }
+  /* 定义滚动条的宽度及背景颜色 */
+  ::-webkit-scrollbar {
+    position: fixed;
+    width: 5px; /* for vertical scrollbars */
+    height: 10px; /* for horizontal scrollbars */
+    background: #f1f1f1;
+  }
+
+  /* 定义滚动条轨道的样式 */
+  ::-webkit-scrollbar-track {
+    background-color: #e1e1e1;
+    border-radius: 10px; /* 圆角 */
+  }
+
+  /* 定义滚动条滑块的样式 */
+  ::-webkit-scrollbar-thumb {
+    background-color: #888;
+    border-radius: 10px; /* 圆角 */
+  }
+
+  /* 滑块hover时的样式 */
+  ::-webkit-scrollbar-thumb:hover {
+    background-color: #555;
+  }
+  :deep(.n-checkbox .n-checkbox-box) {
+    width: 0.85rem;
+    height: 0.85rem;
+  }
+}
+</style>
diff --git a/src/views/map/index.vue b/src/views/map/index.vue
index bd2b8ea..ab3d1da 100644
--- a/src/views/map/index.vue
+++ b/src/views/map/index.vue
@@ -2,14 +2,24 @@
 <script>
 import { reactive, toRefs, onMounted } from "vue";
 export default {
-  setup() {
+   props: {
+    obj: {
+      type: Object,
+      default: {},
+    },
+
+  },
+  setup(props) {
     let state = reactive({});
 
     let methods = {
-      init() {
-        function getQueryParamsNew() {
+      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])) {
@@ -21,11 +31,14 @@ export default {
               paramsObj[key] = value;
             }
           }
+         // console.log(paramsObj)
           return paramsObj;
         }
-        var queryParamsNew = getQueryParamsNew();
-        state.queryParamsNew = queryParamsNew;
-
+        var queryParamsNew = getQueryParamsNew();*/
+     //   state.queryParamsNew = queryParamsNew;
+  //   console.log(item)
+       let queryParamsNew =item
+       // console.log(queryParamsNew)
         const lng = queryParamsNew.lng; //经度
         const lat = queryParamsNew.lat; // 纬度
         // 初始化地图
@@ -59,7 +72,8 @@ export default {
       },
     };
     onMounted(() => {
-      methods.init();
+     console.log(props)
+     methods.init(props.obj);
     });
     return {
       ...toRefs(state),
@@ -76,12 +90,12 @@ export default {
 </template>
 
 <style >
-.layout-sider {
+/*.layout-sider {
   display: none;
 }
 .layout-main-header {
   display: none;
-}
+}*/
 .mapmain {
   height: 100%;
   width: 100%;
diff --git a/src/views/task/content/Content.vue b/src/views/task/content/Content.vue
index 005e620..5420815 100644
--- a/src/views/task/content/Content.vue
+++ b/src/views/task/content/Content.vue
@@ -15,6 +15,7 @@ import { useInfiniteScroll } from '@vueuse/core'
 import BatchModal from '../modal/BatchModal.vue'
 import CustomSettingModal from '../modal/CustomSettingModal.vue'
 import ImgDetailModal from "../modal/ImgDetailModal.vue"
+import MapModal from "../modal/MapModal.vue"
 import PictureTable from './PictureTable.vue'
 import TaskTable from './TaskTable.vue'
 import History from './History.vue'
@@ -46,6 +47,7 @@ const selectItems = ref<any[]>([])
 const message = useMessage()
 const dialog = useDialog()
 const notPassModalRef = ref(null)
+const MapModalRef= ref(null)
 const batchModalRef: any = ref(null)
 const totalCount = ref(0)
 const taskId: any = ref('') // 任务id
@@ -331,7 +333,7 @@ async function handleDragEnd(event, item) {
 }
 async function addSuspicious() {
   taskStore.setInFileId(taskDetailInfo.value.ocrPicture)
-  console.log(taskDetailInfo.value.ocrPicture)
+//  console.log(taskDetailInfo.value.ocrPicture)
   if (taskDetailInfo.value.ocrPicture.pictureid) {
     const res = await dubiousfileyd({
       pictureid: taskDetailInfo.value.ocrPicture.id,
@@ -529,15 +531,18 @@ function switchBatch() {
 
 function getrowValue(e) {
   if (e.key == 'location') {
-    const locationobj = JSON.parse(taskDetailInfo.value.ocrPicture.location)
+  const modal = unref(MapModalRef)! as any
+console.log(modal)
+   const locationobj = JSON.parse(taskDetailInfo.value.ocrPicture.location)
     const lat = locationobj.lat.$numberDecimal
     const lng = locationobj.lng.$numberDecimal
     const name = e.value
-    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}`)
+  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) {
@@ -1380,6 +1385,7 @@ function nopassfun(e){
     <BatchModal ref="batchModalRef" @reject="rejectHandler" @approval="approvalHandler" />
     <CustomSettingModal ref="CustomSettingModalRef" @on-ok="getDetail" />
     <img-detail-modal ref="imgdetailref" @passfun="passfun"  @nopassfun="nopassfun"/>
+    <MapModal ref="MapModalRef"/>
   </div>
 </template>