From 9d6032b26c9aba1b875d9237b3251d6dd9013ee1 Mon Sep 17 00:00:00 2001
From: xia <1928964683@qq.com>
Date: Sat, 15 Jul 2023 15:56:08 +0800
Subject: [PATCH] =?UTF-8?q?=E5=85=A8=E9=83=A8=E4=BB=BB=E5=8A=A1=EF=BC=88?=
 =?UTF-8?q?=E7=AE=A1=E7=90=86=E5=91=98=EF=BC=89-=E7=AC=AC=E4=B8=80?=
 =?UTF-8?q?=E7=89=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/config/router.config.js               | 136 ++---
 .../newLayout/module/Demo4NewLayoutList.vue   |  54 +-
 .../views/newLayout/task_admin/TaskAdmin.vue  |  38 ++
 .../task_admin/task_content/TaskContent.vue   | 228 ++++++++
 .../task_content/content_card/ContentCard.vue | 501 ++++++++++++++++++
 .../task_content/content_card/HeaderCard.vue  |  71 +++
 6 files changed, 940 insertions(+), 88 deletions(-)
 create mode 100644 ant-design-vue-jeecg/src/views/newLayout/task_admin/TaskAdmin.vue
 create mode 100644 ant-design-vue-jeecg/src/views/newLayout/task_admin/task_content/TaskContent.vue
 create mode 100644 ant-design-vue-jeecg/src/views/newLayout/task_admin/task_content/content_card/ContentCard.vue
 create mode 100644 ant-design-vue-jeecg/src/views/newLayout/task_admin/task_content/content_card/HeaderCard.vue

diff --git a/ant-design-vue-jeecg/src/config/router.config.js b/ant-design-vue-jeecg/src/config/router.config.js
index f6b1172..0cd7df3 100644
--- a/ant-design-vue-jeecg/src/config/router.config.js
+++ b/ant-design-vue-jeecg/src/config/router.config.js
@@ -16,7 +16,7 @@ import {
   UserLayoutSimulation,
   UserLayoutSchedule,
   UserLayoutEquip,
-  PageView,
+  PageView
 } from '@/components/layouts'
 
 /**
@@ -31,7 +31,7 @@ export const asyncRouterMap = [
     meta: { title: '首页' },
     redirect: '/dashboard/analysis',
     children: [
-      //#region
+      // #region
       // // dashboard
       // {
       //   path: '/dashboard',
@@ -300,21 +300,21 @@ export const asyncRouterMap = [
       //     },
       //   ]
       // }
-      //#endregion
-    ],
+      // #endregion
+    ]
   },
   {
     path: '*',
     redirect: '/404',
-    hidden: true, //没有匹配到 就会显示404
+    hidden: true // 没有匹配到 就会显示404
   },
   {
     path: '/page1',
     name: 'page1',
     component: TabLayout,
     meta: { title: '首页' },
-    redirect: '/dashboard/analysis',
-  },
+    redirect: '/dashboard/analysis'
+  }
 ]
 
 /**
@@ -331,9 +331,9 @@ export const constantRouterMap = [
       {
         path: 'loginmall',
         name: 'loginmall',
-        component: () => import(/* webpackChu nkName: "user" */ '@/views/user/Login'),
-      },
-    ],
+        component: () => import(/* webpackChu nkName: "user" */ '@/views/user/Login')
+      }
+    ]
   },
   {
     path: '/userbigdata',
@@ -344,9 +344,9 @@ export const constantRouterMap = [
       {
         path: 'loginbigdata',
         name: 'loginbigdata',
-        component: () => import(/* webpackChu nkName: "user" */ '@/views/user/Login'),
-      },
-    ],
+        component: () => import(/* webpackChu nkName: "user" */ '@/views/user/Login')
+      }
+    ]
   },
   {
     path: '/loginbx',
@@ -357,9 +357,9 @@ export const constantRouterMap = [
       {
         path: 'loginbx',
         name: 'loginbx',
-        component: () => import(/* webpackChu nkName: "user" */ '@/views/user/Login'),
-      },
-    ],
+        component: () => import(/* webpackChu nkName: "user" */ '@/views/user/Login')
+      }
+    ]
   },
   {
     path: '/userdata',
@@ -370,9 +370,9 @@ export const constantRouterMap = [
       {
         path: 'logindata',
         name: 'logindata',
-        component: () => import(/* webpackChu nkName: "user" */ '@/views/user/Login'),
-      },
-    ],
+        component: () => import(/* webpackChu nkName: "user" */ '@/views/user/Login')
+      }
+    ]
   },
   {
     path: '/userdroduction',
@@ -383,9 +383,9 @@ export const constantRouterMap = [
       {
         path: 'logindroduction',
         name: 'logindroduction',
-        component: () => import(/* webpackChu nkName: "user" */ '@/views/user/Login'),
-      },
-    ],
+        component: () => import(/* webpackChu nkName: "user" */ '@/views/user/Login')
+      }
+    ]
   },
   {
     path: '/userfitting',
@@ -396,9 +396,9 @@ export const constantRouterMap = [
       {
         path: 'loginfitting',
         name: 'loginfitting',
-        component: () => import(/* webpackChu nkName: "user" */ '@/views/user/Login'),
-      },
-    ],
+        component: () => import(/* webpackChu nkName: "user" */ '@/views/user/Login')
+      }
+    ]
   },
   {
     path: '/userglobal',
@@ -409,9 +409,9 @@ export const constantRouterMap = [
       {
         path: 'loginglobal',
         name: 'loginglobal',
-        component: () => import(/* webpackChu nkName: "user" */ '@/views/user/Login'),
-      },
-    ],
+        component: () => import(/* webpackChu nkName: "user" */ '@/views/user/Login')
+      }
+    ]
   },
   {
     path: '/userworkmanship',
@@ -422,9 +422,9 @@ export const constantRouterMap = [
       {
         path: 'loginworkmanship',
         name: 'loginworkmanship',
-        component: () => import(/* webpackChu nkName: "user" */ '@/views/user/Login'),
-      },
-    ],
+        component: () => import(/* webpackChu nkName: "user" */ '@/views/user/Login')
+      }
+    ]
   },
   {
     path: '/userworkorder',
@@ -435,9 +435,9 @@ export const constantRouterMap = [
       {
         path: 'loginworkorder',
         name: 'loginworkorder',
-        component: () => import(/* webpackChu nkName: "user" */ '@/views/user/Login'),
-      },
-    ],
+        component: () => import(/* webpackChu nkName: "user" */ '@/views/user/Login')
+      }
+    ]
   },
   {
     path: '/userequip',
@@ -448,9 +448,9 @@ export const constantRouterMap = [
       {
         path: 'loginequip',
         name: 'loginequip',
-        component: () => import(/* webpackChu nkName: "user" */ '@/views/user/Login'),
-      },
-    ],
+        component: () => import(/* webpackChu nkName: "user" */ '@/views/user/Login')
+      }
+    ]
   },
   {
     path: '/userschedule',
@@ -461,9 +461,9 @@ export const constantRouterMap = [
       {
         path: 'loginschedule',
         name: 'loginschedule',
-        component: () => import(/* webpackChu nkName: "user" */ '@/views/user/Login'),
-      },
-    ],
+        component: () => import(/* webpackChu nkName: "user" */ '@/views/user/Login')
+      }
+    ]
   },
   {
     path: '/usersimulation',
@@ -474,9 +474,9 @@ export const constantRouterMap = [
       {
         path: 'loginsimulation',
         name: 'loginsimulation',
-        component: () => import(/* webpackChu nkName: "user" */ '@/views/user/Login'),
-      },
-    ],
+        component: () => import(/* webpackChu nkName: "user" */ '@/views/user/Login')
+      }
+    ]
   },
   {
     path: '/user',
@@ -487,24 +487,24 @@ export const constantRouterMap = [
       {
         path: 'login',
         name: 'login',
-        component: () => import(/* webpackChunkName: "user" */ '@/views/user/Login'),
+        component: () => import(/* webpackChunkName: "user" */ '@/views/user/Login')
       },
       {
         path: 'register',
         name: 'register',
-        component: () => import(/* webpackChunkName: "user" */ '@/views/user/register/Register'),
+        component: () => import(/* webpackChunkName: "user" */ '@/views/user/register/Register')
       },
       {
         path: 'register-result',
         name: 'registerResult',
-        component: () => import(/* webpackChunkName: "user" */ '@/views/user/register/RegisterResult'),
+        component: () => import(/* webpackChunkName: "user" */ '@/views/user/register/RegisterResult')
       },
       {
         path: 'alteration',
         name: 'alteration',
-        component: () => import(/* webpackChunkName: "user" */ '@/views/user/alteration/Alteration'),
-      },
-    ],
+        component: () => import(/* webpackChunkName: "user" */ '@/views/user/alteration/Alteration')
+      }
+    ]
   },
 
   // {
@@ -539,37 +539,37 @@ export const constantRouterMap = [
       {
         path: 'home',
         name: 'TestHome',
-        component: () => import('@/views/Home'),
-      },
-    ],
+        component: () => import('@/views/Home')
+      }
+    ]
   },
   {
     path: '/404',
-    component: () => import(/* webpackChunkName: "fail" */ '@/views/exception/404'),
+    component: () => import(/* webpackChunkName: "fail" */ '@/views/exception/404')
   },
 
   {
     path: '/atlas',
-    component: () => import(/* webpackChunkName: "fail" */ '@/views/xmtp/SeKnowAtlasList'),
+    component: () => import(/* webpackChunkName: "fail" */ '@/views/xmtp/SeKnowAtlasList')
   },
 
-  //cms首页，免登录，单独访问页面
+  // cms首页，免登录，单独访问页面
   // #/protal/home
-  //需要在新窗口打开的页面路径
+  // 需要在新窗口打开的页面路径
   {
-    path: '/cms/home',//这里是你需要设置新窗口打开的页面的路径
-    component: () => import('@/views/cms/home'),
+    path: '/cms/home', // 这里是你需要设置新窗口打开的页面的路径
+    component: () => import('@/views/cms/home')
   },
   {
-    path: '/cms/major',//这里是你需要设置新窗口打开的页面的路径
-    component: () => import('@/views/cms/pages/Major/MajorView'),
+    path: '/cms/major', // 这里是你需要设置新窗口打开的页面的路径
+    component: () => import('@/views/cms/pages/Major/MajorView')
   },
   {
-    path: '/cms/detail',//这里是你需要设置新窗口打开的页面的路径
-    component: () => import('@/views/cms/pages/Detail/DetailView'),
+    path: '/cms/detail', // 这里是你需要设置新窗口打开的页面的路径
+    component: () => import('@/views/cms/pages/Detail/DetailView')
   },
   {
-    path: '/newLayout/dayu',//这里是你需要设置新窗口打开的页面的路径
+    path: '/newLayout/dayu', // 这里是你需要设置新窗口打开的页面的路径
     redirect: '/home/lnfo',
     component: () => import(/* webpackChunkName: "fail" */ '@/views/newLayout/module/Demo4NewLayoutList'),
     children: [
@@ -586,10 +586,16 @@ export const constantRouterMap = [
         // iconChildClass: 'el-icon-watermelon',
         component: () => import('@/views/newLayout/module/Msg')
 
+      },
+       {
+        path: '/home/taskadmin',
+        // name: '列表',
+        // iconChildClass: 'el-icon-watermelon',
+        component: () => import('@/views/newLayout/task_admin/TaskAdmin')
+
       }
 
     ]
-  },
+  }
 
 ]
-
diff --git a/ant-design-vue-jeecg/src/views/newLayout/module/Demo4NewLayoutList.vue b/ant-design-vue-jeecg/src/views/newLayout/module/Demo4NewLayoutList.vue
index 09e1ebf..5f683f5 100644
--- a/ant-design-vue-jeecg/src/views/newLayout/module/Demo4NewLayoutList.vue
+++ b/ant-design-vue-jeecg/src/views/newLayout/module/Demo4NewLayoutList.vue
@@ -3,7 +3,10 @@
     <el-container>
       <!-- <Menu /> -->
       <!-- <el-aside width="66px"></el-aside> -->
-      <el-aside :width="isCollapse ? '64px' : '200px'" :class="isCollapse ? 'qian' : 'hou'">
+      <el-aside
+        :width="isCollapse ? '64px' : '200px'"
+        :class="isCollapse ? 'qian' : 'hou'"
+      >
         <el-menu
           default-active="2"
           class="el-menu-vertical-demo"
@@ -24,7 +27,11 @@
           />
           <div class="title" v-if="show">大禹项目管理系统</div>
           <!-- 单级菜单-->
-          <el-menu-item :index="item.path" v-for="item in asideMenu" :key="item.path">
+          <el-menu-item
+            :index="item.path"
+            v-for="item in asideMenu"
+            :key="item.path"
+          >
             <i :class="'el-icon-' + item.icon" style="color: #cad5f6"></i>
             <span slot="title">{{ item.label }}</span>
           </el-menu-item>
@@ -60,29 +67,34 @@
 // import Main from '../../newLayout/module/Main.vue'
 // import Menu from './Msg'
 export default {
-  name: "Demo4NewLayoutList",
-  data () {
+  name: 'Demo4NewLayoutList',
+  data() {
     return {
-      show2: true,//图标文字的显示状态
+      show2: true, // 图标文字的显示状态
       menus: [],
-      isCollapse: true, //保持折叠状态
-      show: false,//保持文字的隐藏状态
+      isCollapse: true, // 保持折叠状态
+      show: false, // 保持文字的隐藏状态
       asideMenu: [
         {
-          path: '/home/lnfo', //地址
+          path: '/home/lnfo', // 地址
           label: '首页', // 菜单标识
-          icon: 'menu', //图标选取的是element图表，然后拼接到上面
+          icon: 'menu' // 图标选取的是element图表，然后拼接到上面
         },
         {
-          path: "/home/lnfos",
+          path: '/home/lnfos',
           label: '视频管理',
           icon: 'menu'
         },
         {
-          path: "/user",
-          label: '用户管理',
+          path: '/home/taskadmin',
+          label: '全部任务',
           icon: 'menu'
         },
+        {
+          path: '/user',
+          label: '用户管理',
+          icon: 'menu'
+        }
       ]
     }
   },
@@ -91,35 +103,32 @@ export default {
     //   // 改变show的值true/false
     //   this.lesteps = !this.lesteps
     // },
-    handleOpen (key, keyPath) {
+    handleOpen(key, keyPath) {
       console.log(key, keyPath)
     },
-    handleClose (key, keyPath) {
+    handleClose(key, keyPath) {
       console.log(key, keyPath)
     },
-    toggleCollapse () {
+    toggleCollapse() {
       this.isCollapse = !this.isCollapse
       // 改变show的值true/false
       this.show = !this.show
       // 改变show2的值true/false
       this.show2 = !this.show2
-
     },
     // 退出功能
-    logout () {
+    logout() {
       console.log('退出')
       // 清空token
       // window.sessionStorage.clear()
       // this.$router.push('/login')
-    },
-
-
+    }
   },
   components: {
     // Main,
     // Menu
-  },
-};
+  }
+}
 </script>
 <style lang="less">
 // .el-aside {
@@ -242,4 +251,3 @@ export default {
   line-height: 22px;
 }
 </style>
-
diff --git a/ant-design-vue-jeecg/src/views/newLayout/task_admin/TaskAdmin.vue b/ant-design-vue-jeecg/src/views/newLayout/task_admin/TaskAdmin.vue
new file mode 100644
index 0000000..473d2d0
--- /dev/null
+++ b/ant-design-vue-jeecg/src/views/newLayout/task_admin/TaskAdmin.vue
@@ -0,0 +1,38 @@
+<template>
+  <div class="bigbox">
+    <!-- <div class="menu"></div> -->
+    <div class="content"><Content></Content></div>
+  </div>
+</template>
+
+<script>
+import Content from './task_content/TaskContent.vue'
+export default {
+  props: ['iscollapse'],
+  components: {
+    Content
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.bigbox {
+  margin: 1rem 4rem 0 2rem;
+  display: flex;
+  .menu {
+    width: 15%;
+    height: 80vh;
+    // background-color: aqua;
+  }
+  .content {
+    width: 100%;
+    height: 80vh;
+    //background-color: antiquewhite;
+  }
+  .activecontent {
+    width: 85%;
+    height: 80vh;
+    // background-color: antiquewhite;
+  }
+}
+</style>
diff --git a/ant-design-vue-jeecg/src/views/newLayout/task_admin/task_content/TaskContent.vue b/ant-design-vue-jeecg/src/views/newLayout/task_admin/task_content/TaskContent.vue
new file mode 100644
index 0000000..0f3d7d1
--- /dev/null
+++ b/ant-design-vue-jeecg/src/views/newLayout/task_admin/task_content/TaskContent.vue
@@ -0,0 +1,228 @@
+<template>
+  <div class="bigcontent">
+    <div class="c_header">
+      <div class="header_left">
+        <span>
+          <i class="el-icon-s-order"></i>
+          部门任务
+        </span>
+        <span>
+          <i class="el-icon-s-management"></i>
+          需求，任务
+        </span>
+        <span class="left_smallbox"></span>
+      </div>
+      <div class="header_right">
+        <span class="right_box"></span>
+        <span class="right_box"></span>
+        <span class="right_box"></span>
+      </div>
+    </div>
+    <div class="c_content">
+      <div class="content_box" v-for="item in TotalData" :key="item.id">
+        <div class="status_title">
+          <HeaderCard
+            :title="item.status"
+            :color="item.color"
+            :total="item.total"
+          ></HeaderCard>
+        </div>
+        <div class="status_content" @scroll="loadMore(item.id)" ref="box">
+          <ContenCard
+            :color="item.color"
+            :projectData="item.data"
+            ref="childCard"
+          ></ContenCard>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import ContenCard from './content_card/ContentCard.vue'
+import HeaderCard from './content_card/HeaderCard.vue'
+// import { getTaskAdmin } from '@/api/manage.js'
+import { getAction, getFileAccessHttpUrl } from '@/api/manage.js'
+export default {
+  components: {
+    ContenCard,
+    HeaderCard
+  },
+  data() {
+    return {
+      TotalData: [
+        {
+          id: 0,
+          status: '未发布',
+          statusNum: 0,
+          color: 'black',
+          data: [],
+          total: '',
+          currentPage: 1
+        },
+        {
+          id: 1,
+          status: '开发中',
+          statusNum: 1,
+          color: 'blue',
+          data: [],
+          total: '',
+          currentPage: 1
+        },
+        {
+          id: 2,
+          status: '已提交',
+          statusNum: 3,
+          color: 'orange',
+          data: [],
+          total: '',
+          currentPage: 1
+        },
+        {
+          id: 3,
+          status: '已审核',
+          color: 'green',
+          statusNum: 4,
+          data: [],
+          total: '',
+          currentPage: 1
+        }
+      ],
+      url: {
+        list: '/task/task/list',
+        queryById: 'task/task/queryById'
+      },
+      loading: true, // 加载中
+      lastPage: false // 是否最后一页
+    }
+  },
+  methods: {
+    // 分类获取全部数据
+    async getAllData(index) {
+      const res = await getAction(this.url.list, {
+        workStatus: this.TotalData[index].statusNum
+      })
+      if (res.success) {
+        this.TotalData[index].data = res.result.records
+        this.TotalData[index].total = res.result.total
+        this.TotalData[index].data.forEach((element) => {
+          element.headpic = getFileAccessHttpUrl(element.headpic)
+          element.taskPic = getFileAccessHttpUrl(element.taskPic)
+        })
+      } else {
+        this.$message.warning(res.message)
+      }
+      console.log(this.TotalData[1].data)
+    },
+
+    // 分页获取
+    async getDataByPage(index, current) {
+      this.loading = true
+      if (!this.lastPage) {
+        const res = await getAction(this.url.list, {
+          workStatus: this.TotalData[index].statusNum,
+          pageNo: current
+        })
+        this.TotalData[index].data = [
+          ...this.TotalData[index].data,
+          ...res.result.records
+        ]
+        if (res.result.records.length < 10) {
+          this.lastPage = true
+        }
+      }
+    },
+    // 滑动到底部加载更多
+    loadMore(index) {
+      let scrollDom = this.$refs.box
+      if (
+        scrollDom[index].clientHeight + scrollDom[index].scrollTop + 1 >=
+        scrollDom[index].scrollHeight
+      ) {
+        scrollDom[index].scrollTop -= 10
+        this.TotalData[index].currentPage =
+          this.TotalData[index].currentPage + 1
+        this.getDataByPage(index, this.TotalData[index].currentPage)
+      }
+    },
+
+    // 点击头像获取任务负责人信息
+    async getHeadInformation() {
+      // const res=await
+    }
+  },
+  created() {
+    this.getAllData(0)
+    this.getAllData(1)
+    this.getAllData(2)
+    this.getAllData(3)
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.bigcontent {
+  width: 100%;
+  height: 100%;
+  .c_header {
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+    height: 6%;
+    // background-color: aqua;
+    .header_left {
+      display: flex;
+      justify-content: space-between;
+      height: 100%;
+      width: 20%;
+      line-height: 2.2rem;
+      font-size: 16px;
+      color: #666666;
+      .left_smallbox {
+        width: 1rem;
+        height: 0.5rem;
+        line-height: 2.2rem;
+        // background-color: #d9d9d9;
+      }
+    }
+    .header_right {
+      width: 30%;
+      height: 100%;
+      display: flex;
+      justify-content: space-between;
+      .right_box {
+        display: inline-block;
+        width: 30%;
+        height: 100%;
+        background: #d9d9d9;
+      }
+    }
+  }
+  .c_content {
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+    height: 100%;
+    //background-color: aquamarine;
+    .content_box {
+      width: 24%;
+      height: 100%;
+      //background-color: rgb(230, 186, 129);
+      .status_title {
+        height: 8%;
+        margin-bottom: 2%;
+      }
+      .status_content {
+        height: 90%;
+        overflow-y: scroll;
+        // background-color: rgb(224, 163, 163);
+      }
+    }
+    // 滚动条消失
+    .status_content::-webkit-scrollbar {
+      display: none;
+    }
+  }
+}
+</style>
diff --git a/ant-design-vue-jeecg/src/views/newLayout/task_admin/task_content/content_card/ContentCard.vue b/ant-design-vue-jeecg/src/views/newLayout/task_admin/task_content/content_card/ContentCard.vue
new file mode 100644
index 0000000..a14de8c
--- /dev/null
+++ b/ant-design-vue-jeecg/src/views/newLayout/task_admin/task_content/content_card/ContentCard.vue
@@ -0,0 +1,501 @@
+<template>
+  <div class="cardcard">
+    <template v-for="item in projectData">
+      <div class="card_content" :key="item.id">
+        <el-card
+          class="little_card"
+          :class="
+            color == 'black'
+              ? { card_black: true }
+              : color == 'blue'
+              ? { card_blue: true }
+              : color == 'orange'
+              ? { card_orange: true }
+              : { card_green: true }
+          "
+        >
+          <div style="padding: 0rem 0rem 0 1.5rem">
+            <div class="admin_title">
+              <template>
+                <el-checkbox class="check"></el-checkbox>
+              </template>
+              <!-- 任务总述 -->
+              <el-tooltip
+                v-if="item.taskName.length > 13"
+                :content="item.taskName"
+                placement="top"
+              >
+                <span>
+                  {{
+                    item.taskName.length > 13
+                      ? item.taskName.slice(0, 11) + '...'
+                      : item.taskName
+                  }}
+                </span>
+              </el-tooltip>
+              <span v-else>
+                {{
+                  item.taskName.length > 18
+                    ? item.taskName.slice(0, 17) + '...'
+                    : item.taskName
+                }}
+              </span>
+
+              <!-- 头像 -->
+              <span class="pic" @click="LookPeople(item.managerUsers)">
+                <el-tooltip
+                  :content="item.managerUsers_dictText"
+                  placement="top"
+                >
+                  <img
+                    :src="item.headpic"
+                    alt=""
+                    style="
+                      width: 100%;
+                      height: 100%;
+                      cursor: pointer;
+                      border-radius: 50%;
+                    "
+                  />
+                </el-tooltip>
+              </span>
+            </div>
+
+            <!-- 项目内容/判断类型（文字？文件？照片） -->
+            <div class="substance">
+              <div v-if="item.contentType == 'text'">
+                {{ item.taskDescribe }}
+              </div>
+              <!-- 类型是图片 -->
+              <div v-else-if="item.contentType == 'image'" class="sub_image">
+                <img
+                  :src="item.taskPic"
+                  alt=""
+                  style="
+                    width: 100%;
+                    height: 100%;
+                    border-radius: 10px 10px 10px 10px;
+                  "
+                />
+              </div>
+              <!-- 类型是文档 -->
+              <div v-else-if="item.contentType == 'file'" class="sub_document">
+                <div class="document">
+                  <iframe
+                    :src="item.taskFile"
+                    frameborder="0"
+                    style="
+                      width: 100%;
+                      height: 100%;
+                      border-radius: 10px 10px 10px 10px;
+                    "
+                  ></iframe>
+                </div>
+                <div class="s_operate">
+                  <div>点击查看</div>
+                  <div>上传文档</div>
+                </div>
+              </div>
+              <div></div>
+            </div>
+            <div class="time">
+              <i class="el-icon-date" style="font-size: 18px"></i>
+              <!-- <span>项目工期:</span> -->
+              <div class="timearea">
+                <!-- <span class="starttime">
+                  {{ (item.startTime || '').slice(0, 10) }}
+                </span>
+                <span>至</span> -->
+                <span>截止到</span>
+                <span class="endtime">
+                  {{ (item.expectedEndTime || '').slice(0, 10) }}
+                </span>
+              </div>
+            </div>
+            <!-- 进度 -->
+            <div class="schedule">
+              <span>项目进度:</span>
+              <span class="s_tiao">
+                <!-- :percentage="Number(item.schedule)" -->
+                <el-progress :percentage="30" :show-text="false"></el-progress>
+              </span>
+            </div>
+            <div class="operate">
+              <div class="o_left">
+                <el-button
+                  type="primary"
+                  round
+                  class="but"
+                  size="small"
+                ></el-button>
+                <el-button
+                  type="success"
+                  round
+                  class="but"
+                  size="small"
+                ></el-button>
+              </div>
+              <span class="edit">编辑</span>
+            </div>
+          </div>
+        </el-card>
+      </div>
+    </template>
+    <!-- 弹出框 -->
+    <el-drawer
+      :visible.sync="drawer"
+      direction="rtl"
+      :before-close="handleClose"
+      trigger="click"
+    >
+      <template slot="title">
+        <i class="el-icon-more" style="cursor: pointer"></i>
+        <el-dropdown trigger="click" style="position: absolute; left: 3rem">
+          <span class="el-dropdown-link">
+            <i class="el-icon-arrow-down el-icon--right"></i>
+          </span>
+          <el-dropdown-menu slot="dropdown">
+            <el-dropdown-item>黄金糕</el-dropdown-item>
+            <el-dropdown-item>狮子头</el-dropdown-item>
+          </el-dropdown-menu>
+        </el-dropdown>
+      </template>
+
+      <div class="drawer">
+        <div class="drawer_header">
+          <div class="d_content">
+            <div class="d_pic"></div>
+            <div class="d_name">夏艳玲</div>
+            <div class="d_position">xxx码农</div>
+            <div class="d_cont">
+              <a href="" style="margin-right: 0.5rem">xx项目</a>
+              <a href="" style="margin-right: 0.5rem">大禹项目管理</a>
+            </div>
+          </div>
+        </div>
+        <div class="drawer_body">
+          <div class="body_title">任务动态</div>
+          <div class="body_content">
+            <div class="block">
+              <el-timeline>
+                <el-timeline-item timestamp="2018/4/12" placement="top">
+                  <div class="timeline">
+                    <span class="year">09</span><span class="month">12月</span>
+                  </div>
+                  <div class="type">设计稿</div>
+                  <div ref="a" class="work_sum">
+                    上传大禹项目管理系统竞赛项目设计稿一份1111
+                  </div>
+                  <el-card style="width: 85%; height: 5rem; margin-left: 1rem">
+                    <iframe
+                      src=""
+                      frameborder="0"
+                      style="width: 100%; height: 100%"
+                    ></iframe>
+                  </el-card>
+                </el-timeline-item>
+                <el-timeline-item timestamp="2018/4/12" placement="top">
+                  <div class="timeline">
+                    <span class="year">09</span><span class="month">12月</span>
+                  </div>
+                  <div class="type">设计稿</div>
+                  <div ref="aa" class="work_sum">上传大禹项目设计稿一份</div>
+                  <el-card style="width: 85%; height: 5rem; margin-left: 1rem">
+                    <iframe
+                      src=""
+                      frameborder="0"
+                      style="width: 100%; height: 100%"
+                    ></iframe>
+                  </el-card>
+                </el-timeline-item>
+              </el-timeline>
+            </div>
+          </div>
+        </div>
+      </div>
+    </el-drawer>
+  </div>
+</template>
+
+<script>
+export default {
+  props: ['color', 'projectData'],
+  data() {
+    return {
+      drawer: false
+    }
+  },
+  methods: {
+    LookPeople(userid) {
+      console.log(userid)
+      this.drawer = true
+      this.Check()
+    },
+    // 让任务内容的特定字段变成链接可跳转
+    Check() {
+      const s = '大禹项目'
+      const ss = '竞赛项目'
+      const reg = new RegExp('(' + s + ')|(' + ss + ')', 'g')
+      this.$nextTick(() => {
+        this.$refs.a.innerHTML = this.$refs.a.innerHTML.replace(
+          reg,
+          '<a href="$1">$1</a><a href="$2">$2</a>'
+        )
+      })
+    },
+    handleClose(done) {
+      this.$confirm('确认关闭？')
+        .then((_) => {
+          done()
+        })
+        .catch((_) => {})
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.cardcard {
+  width: 100%;
+  height: 100%;
+  // overflow: scroll;
+  .card_content {
+    width: 99%;
+    .little_card {
+      width: 100%;
+      display: flex;
+      flex-direction: column;
+      margin-top: 1rem;
+      // 项目标题
+      .admin_title {
+        display: flex;
+        justify-content: space-between;
+        position: relative;
+        width: 100%;
+        font-size: 16px;
+        font-weight: 700;
+        color: #000000;
+        .check {
+          position: absolute;
+          left: -1.5rem;
+        }
+        .pic {
+          position: relative;
+          display: inline-block;
+          width: 1rem;
+          height: 1rem;
+          border-radius: 50%;
+          // background-color: rgb(10, 228, 155);
+        }
+      }
+      // 项目内容
+      .substance {
+        margin-top: 1rem;
+        font-size: 14px;
+        color: #999999;
+        .sub_image {
+          width: 100%;
+          height: 20vh;
+          background-color: rgb(207, 207, 207);
+          border-radius: 10px 10px 10px 10px;
+        }
+        .sub_document {
+          display: flex;
+          width: 100%;
+          height: 20vh;
+          .document {
+            width: 55%;
+            height: 100%;
+            background-color: #52c93f;
+            border-radius: 10px 10px 10px 10px;
+          }
+          .s_operate {
+            position: relative;
+            top: 2.7rem;
+            left: 1.5rem;
+            display: flex;
+            flex-direction: column;
+            justify-content: space-between;
+            width: 25%;
+            height: 40%;
+            color: #3e75e6;
+          }
+        }
+      }
+      // 项目时间
+      .time {
+        display: flex;
+        margin-top: 1rem;
+        font-size: 13px;
+        color: #999999;
+        .timearea {
+          width: 80%;
+          margin-left: 1rem;
+          //background-color: #3e75e6;
+          .starttime {
+            width: 45%;
+            padding: 0.1rem;
+            display: inline-block;
+            background: #f0f0f0;
+          }
+          .endtime {
+            width: 45%;
+            padding: 0.1rem;
+            display: inline-block;
+            //background: #f0f0f0;
+          }
+        }
+      }
+      // 项目进度
+      .schedule {
+        display: flex;
+        font-size: 13px;
+        color: #999999;
+        margin-top: 1rem;
+        .s_tiao {
+          top: 0.4rem;
+          position: relative;
+          width: 70%;
+          margin-left: 0.3rem;
+        }
+      }
+      //操作
+      .operate {
+        display: flex;
+        justify-content: space-between;
+        width: 100%;
+        margin-top: 1rem;
+        .o_left {
+          display: flex;
+          width: 60%;
+          // background-color: antiquewhite;
+          .but {
+            width: 50%;
+          }
+        }
+        .edit {
+          font-size: 13px;
+          font-weight: 600;
+        }
+      }
+    }
+  }
+
+  // 弹窗头部
+  .drawer_header {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: center;
+    height: 20vh;
+    // background-color: #52c93f;
+    .d_content {
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      align-items: center;
+      width: 60%;
+      height: 100%;
+      .d_pic {
+        width: 5rem;
+        height: 5rem;
+        border-radius: 50%;
+        background-color: #2147fb;
+      }
+      .d_name {
+        font-weight: bold;
+      }
+      .d_position {
+        font-size: 14px;
+        color: #8c8a8a;
+      }
+      .d_cont {
+        font-size: 12px;
+        color: #8c8a8a;
+      }
+    }
+  }
+
+  // 弹窗内容主题
+  .drawer_body {
+    position: relative;
+    margin-top: 4vh;
+    width: 100%;
+    height: 65vh;
+    // background-color: #ffa326;
+    border-top: 1px dotted #d4d4d4;
+    .body_title {
+      position: absolute;
+      width: 40%;
+      left: 30%;
+      top: -2%;
+      background-color: #ffffff;
+      text-align: center;
+    }
+    .body_content {
+      position: absolute;
+      top: 1.5rem;
+      width: 100%;
+      height: 95%;
+      // background-color: #52c93f;
+      .block {
+        margin-left: 2rem;
+        .timeline {
+          position: absolute;
+          left: -1.3rem;
+          top: -0.3rem;
+          width: 3.5rem;
+          height: 1.5rem;
+          background-color: #ffffff;
+          .year {
+            font-size: 18px;
+            font-weight: bold;
+          }
+          .month {
+            margin-left: 0.2rem;
+            font-size: 12px;
+          }
+        }
+        .type {
+          width: 2.5rem;
+          background: #c0f1e3;
+          margin-bottom: 0.5rem;
+          margin-left: 1.2rem;
+          font-size: 12px;
+          color: white;
+        }
+        .work_sum {
+          margin-left: 1rem;
+          margin-bottom: 1rem;
+        }
+
+        /deep/.el-timeline-item__timestamp.is-top {
+          // padding-top: 10px;
+          margin-left: 1rem;
+        }
+        /deep/.el-card__body {
+          padding: 10px;
+        }
+      }
+    }
+  }
+}
+// .cardcard::-webkit-scrollbar {
+//   display: none;
+// }
+.card_black {
+  border-left: 4px solid black;
+}
+.card_blue {
+  border-left: 4px solid #2147fb;
+}
+.card_orange {
+  border-left: 4px solid #ffa326;
+}
+.card_green {
+  border-left: 4px solid #52c93f;
+}
+/deep/.el-drawer {
+  width: 24% !important;
+}
+</style>
diff --git a/ant-design-vue-jeecg/src/views/newLayout/task_admin/task_content/content_card/HeaderCard.vue b/ant-design-vue-jeecg/src/views/newLayout/task_admin/task_content/content_card/HeaderCard.vue
new file mode 100644
index 0000000..ec72c50
--- /dev/null
+++ b/ant-design-vue-jeecg/src/views/newLayout/task_admin/task_content/content_card/HeaderCard.vue
@@ -0,0 +1,71 @@
+<template>
+  <div>
+    <div
+      class="card_header"
+      :class="
+        color == 'black'
+          ? { black: true }
+          : color == 'blue'
+          ? { blue: true }
+          : color == 'orange'
+          ? { orange: true }
+          : { green: true }
+      "
+    >
+      <span
+        >{{ title }}<span class="number">{{ total }}</span></span
+      >
+      <span class="icon">
+        <i class="el-icon-plus"></i>
+        <i class="el-icon-more" style="margin-left: 0.5rem"></i>
+      </span>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: ['title', 'color', 'total']
+}
+</script>
+
+<style lang="less" scoped>
+.card_header {
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  line-height: 3rem;
+  font-size: 17px;
+  color: #333333;
+  font-weight: 400;
+
+  .number {
+    position: relative;
+    display: inline-block;
+    min-width: 1.5rem;
+    min-height: 1.5rem;
+    margin-left: 1rem;
+    border-radius: 50%;
+    border: 2px solid #999999;
+    text-align: center;
+    line-height: 1.3rem;
+    color: #999999;
+  }
+  .icon {
+    font-weight: bold;
+    cursor: pointer;
+  }
+}
+.black {
+  border-bottom: 3px solid black;
+}
+.blue {
+  border-bottom: 3px solid #2147fb;
+}
+.orange {
+  border-bottom: 3px solid #ffa326;
+}
+.green {
+  border-bottom: 3px solid #52c93f;
+}
+</style>