feat: 新增数据头部组件及切换Content组件

src/components/DataHeader/index.vue

@@ -0,0 +1,98 @@
+<template>
+  <div class="header_wrap">
+    <div v-for="(item, index) in data" :key="index" class="header_item">
+      <img :src="item.link" />
+      <div class="data_wrap">
+        <div class="data_title">{{ item.count }}</div>
+        <div class="data_content">{{ item.title }}</div>
+      </div>
+    </div>
+    <SvgIcon size="14px" style="cursor: pointer" name="setting"></SvgIcon>
+  </div>
+</template>
+
+<script lang="ts" setup>
+
+const data = [
+  {
+    link: "/src/assets/images/taskCount.png",
+    title: "任务包总数",
+    count: 6399,
+  },
+  {
+    link: "/src/assets/images/nocheck.png",
+    title: "未标记",
+    count: 6290,
+  },
+  {
+    link: "/src/assets/images/check.png",
+    title: "已标记",
+    count: 109,
+  },
+  {
+    link: "/src/assets/images/status.png",
+    title: "真",
+    count: 3290,
+  },
+  {
+    link: "/src/assets/images/status.png",
+    title: "假",
+    count: 3000,
+  },
+  {
+    link: "/src/assets/images/pic.png",
+    title: "相似度100%图",
+    count: 230,
+  },
+  {
+    link: "/src/assets/images/xiaojie.png",
+    title: "小结重复数",
+    count: 365,
+  },
+];
+</script>
+
+<style scoped lang="less">
+.header_wrap {
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: center;
+  justify-content: space-between;
+  padding: 20px 30px;
+  background: #fff;
+  .header_item {
+    width: 10%;
+    display: flex;
+    flex-flow: row nowrap;
+    align-items: center;
+    justify-content: center;
+    img{
+      width: 50px;
+      height: 50px
+    }
+    .data_wrap {
+      .data_title {
+        font-size: 20px;
+        font-family: HarmonyOS Sans SC, HarmonyOS Sans SC-Bold;
+        font-weight: Bold;
+        text-align: left;
+        color: #202020;
+        line-height: 23px;
+        text-align: center;
+        white-space: nowrap;
+      }
+      .data_content {
+        opacity: 0.6;
+        font-size: 14px;
+        font-family: PingFang SC, PingFang SC-Regular;
+        font-weight: Regular;
+        text-align: center;
+        color: #202020;
+        line-height: 16px;
+        text-align: center;
+        white-space: nowrap;
+      }
+    }
+  }
+}
+</style>

src/views/final/content/Content.vue

@@ -12,6 +12,7 @@ import {
   ref,
   unref,
   watch,
+  defineEmits
 } from 'vue'
 import { rowPropKeys } from 'naive-ui/es/legacy-grid/src/Row'
 import {
@@ -40,6 +41,12 @@ import emitter from '@/utils/mitt'
 import { formatToDateHMS } from '@/utils/dateUtil'
 import { getAllfieldList, getfieldList, savefield } from '@/api/home/filter'
 
+const emit = defineEmits(['changeShow'])
+const changeContent = ()=>{
+  emit('changeShow')
+}
+
+
 const dicStore = useDictionary()
 const izstatusList = ref([])
 const reviewType = 0
@@ -744,7 +751,7 @@ async function refreshHandler(searchId?: any) {
     <div class="wrapper-header">
       <div class="wrapper-header-left">
         <span class="wrapper-header-font">任务管理列表</span>
-        <SvgIcon size="32" name="magnifying" />
+        <SvgIcon size="32" name="magnifying" @click="changeContent"/>
       </div>
       <div>
         <NButton class="xjcc" text @click="showModal(repeatModalRef)">

src/views/final/content/ListContent.vue

@@ -0,0 +1,139 @@
+<script lang="ts" setup>
+import { onMounted, ref } from "vue";
+
+const item = {
+  img: "/src/assets/images/test.png",
+  checked: false,
+  title: "YP4567890545",
+  date: "2023-12-19 12:09:18",
+};
+const data = ref<any[]>([]);
+
+onMounted(() => {
+  for (let i = 0; i < 10; i++) {
+    data.value.push(item as any);
+  }
+});
+</script>
+
+<template>
+  <div class="wrapper">
+    <div class="item" v-for="(item, index) in data" :key="index">
+      <div class="top">
+        <div
+          class="img"
+          :style="`background:url(${item.img});background-size:100%;background-repeat: no-repeat;`"
+        >
+          <div class="check_box"><n-checkbox size="medium" label=" " /></div>
+        </div>
+        <div class="content">
+          <div class="title">任务ID：{{ item.title }}</div>
+          <div class="date">{{ item.date }}</div>
+          <div class="tag_box">
+            <div
+              class="tag_item"
+              v-for="index in 2"
+              :key="index"
+              :style="index == 2 ? 'color:#02C984' : 'color:#507AFD'"
+            >
+              待确认
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="bottom">
+        <div class="resovle_action">通过</div>
+        <div class="reject_action">不通过</div>
+      </div>
+    </div>
+  </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;
+  .item {
+    width: 23%;
+    border: 1px solid #ededed;
+    border-radius: 3px;
+    padding: 8px 10px;
+    margin-right: 10px;
+    .top {
+      display: flex;
+      flex-flow: row nowrap;
+      align-items: center;
+      justify-content: flex-start;
+      .img {
+        width: 50%;
+        height: 70px;
+        border-radius: 3px;
+        .check_box {
+          margin-left: 8px;
+        }
+      }
+      .content {
+        margin-left: 8px;
+        .title,
+        .date {
+          font-size: 11px;
+          font-family: PingFang SC, PingFang SC-Medium;
+          font-weight: Medium;
+          text-align: left;
+          color: #323233;
+          line-height: 16px;
+        }
+      }
+      .tag_box {
+        display: flex;
+        flex-flow: row nowrap;
+        align-items: center;
+        justify-content: flex-start;
+        .tag_item {
+          width: 31px;
+          height: 14px;
+          font-size: 10px;
+          font-family: PingFang SC, PingFang SC-Regular;
+          font-weight: Regular;
+          text-align: left;
+          //   color: #507afd;
+          line-height: 14px;
+          letter-spacing: 0.1px;
+          margin-right: 8px;
+        }
+      }
+    }
+    .bottom {
+      display: flex;
+      flex-flow: row nowrap;
+      align-items: center;
+      justify-content: flex-end;
+      .resovle_action {
+        font-size: 12px;
+        font-family: PingFang SC, PingFang SC-Medium;
+        font-weight: Medium;
+        text-align: left;
+        color: #507afd;
+        line-height: 17px;
+      }
+      .reject_action {
+        font-size: 12px;
+        font-family: PingFang SC, PingFang SC-Medium;
+        font-weight: Medium;
+        text-align: left;
+        color: #ff4e4f;
+        line-height: 17px;
+        margin-left: 15px;
+      }
+    }
+  }
+}
+</style>

src/views/final/index.vue

@@ -1,6 +1,12 @@
 <script lang="ts" setup>
+import { ref } from 'vue'
 import Aside from './aside/Aside.vue'
 import Content from './content/Content.vue'
+import ListContent from './content/ListContent.vue'
+
+const showList = ref(false);
+
+
 </script>
 
 <template>
@@ -9,7 +15,9 @@ import Content from './content/Content.vue'
     <Aside />
 
     <!-- 内容 -->
-    <Content />
+    <Content @changeShow="showList=true" v-if="!showList"/>
+    <!-- 任务管理 -->
+    <ListContent v-else />
   </div>
 </template>
 

src/views/worksheet/index.vue

@@ -1,9 +1,14 @@
 <script lang="ts" setup>
 import Aside from './aside/Aside.vue'
 import Content from './content/Content.vue'
+import DataHeader from '@/components/DataHeader/index.vue'
 </script>
 
 <template>
+  <div>
+    <div class="header">
+      <DataHeader  v-show="false"/>
+    </div>
   <div class="main">
     <!-- 侧边 -->
     <Aside />
@@ -11,6 +16,7 @@ import Content from './content/Content.vue'
     <!-- 内容 -->
     <Content />
   </div>
+</div>
 </template>
 
 <style lang="less" scoped>