代理记账

.env.development

@@ -9,3 +9,6 @@ VUE_APP_BASE_API = '/dev-api'
 
 # 路由懒加载
 VUE_CLI_BABEL_TRANSPILE_MODULES = true
+
+# 登录账密凭据加密
+VUE_APP_ENABLE_SECRET=true

src/api/login.js

@@ -1,4 +1,5 @@
 import request from '@/utils/request'
+import { encrypt } from '@/utils/jsencrypt' // 公钥,私钥都声明在里面
 
 // 登录方法
 export function login(username, password, code, uuid) {
@@ -8,6 +9,11 @@ export function login(username, password, code, uuid) {
     code,
     uuid
   }
+  if(process.env.VUE_APP_ENABLE_SECRET)
+  {
+    data.username = encrypt(username);
+    data.password = encrypt(password);
+  }
   return request({
     url: '/login',
     headers: {
@@ -49,11 +55,11 @@ export function logout() {
 // 获取验证码
 export function getCodeImg() {
   return request({
-    url: '/captchaImage',
+    url: '/gkyzm',
     headers: {
       isToken: false
     },
     method: 'get',
     timeout: 20000
   })
-}
+}

src/permission.js

@@ -8,7 +8,7 @@ import { isRelogin } from '@/utils/request'
 
 NProgress.configure({ showSpinner: false })
 
-const whiteList = ['/login', '/register']
+const whiteList = ['/login', '/login_new', '/register']
 
 router.beforeEach((to, from, next) => {
   NProgress.start()

src/router/index.js

@@ -46,6 +46,11 @@ export const constantRoutes = [
     component: () => import('@/views/login'),
     hidden: true
   },
+  {
+    path: '/login_new',
+    component: () => import('@/views/login_new'),
+    hidden: true
+  },
   {
     path: '/register',
     component: () => import('@/views/register'),
@@ -87,7 +92,55 @@ export const constantRoutes = [
         meta: { title: '个人中心', icon: 'user' }
       }
     ]
-  }
+  },
+  //待处理
+  {
+    path: '/todo',
+    component: () => import('@/views/taskAllocation/todo'),
+    hidden: true
+  },
+  //已处理
+  {
+    path: '/processed',
+    component: () => import('@/views/processed/processed'),
+    hidden: true
+  },
+  //异常任务
+  {
+    path: '/abnormal',
+    component: () => import('@/views/abnormal/abnormal'),
+    hidden: true
+  },
+  //处理中
+  {
+    path: '/processing',
+    component: () => import('@/views/processing/processing'),
+    hidden: true
+  },
+  //待分配
+  {
+    path: '/toBeAllocated',
+    component: () => import('@/views/toBeAllocated/toBeAllocated'),
+    hidden: true
+  },
+  //待分配
+  {
+    path: '/audit',
+    component: () => import('@/views/audit/audit'),
+    hidden: true
+  },
+  //主管异常任务
+  {
+    path: '/managerAbnormal',
+    component: () => import('@/views/managerAbnormal/managerAbnormal'),
+    hidden: true
+  },
+  //全部任务
+  {
+    path: '/allTasks',
+    component: () => import('@/views/allTasks/allTasks'),
+    hidden: true
+  },
 ]
 
 // 动态路由，基于用户权限动态去加载

src/views/abnormal/abnormal.vue

@@ -0,0 +1,316 @@
+<template>
+  <div class="app-container">
+
+    <div class="header_main">
+
+      <div class="select_address">
+        <span class="sanjiao-right"></span>
+        <p>大足区</p>
+      </div>
+
+      <div class="select_address">
+        <span class="sanjiao-right"></span>
+        <p>张家镇</p>
+      </div>
+
+      <div class="select_address">
+        <span class="sanjiao-right"></span>
+        <p>记账</p>
+      </div>
+
+      <div style="display: none;" class="selected">
+        <div>
+          <p>张家镇</p>
+        </div>
+        <div>
+          <p>张家镇</p>
+        </div>
+        <div>
+          <p>张家镇</p>
+        </div>
+        <div>
+          <p>张家镇</p>
+        </div>
+      </div>
+
+      <p class="todo_num">合同异常：<span>19</span>个</p>
+      <p class="todo_num2">记录异常：<span>1</span>个</p>
+      <p class="todo_num3">其他异常：<span>1</span>个</p>
+
+    </div>
+
+    <div class="main">
+
+      <div class="left_main">
+
+        <div class="left_main_block" v-for="(item,index) in 5" :key="index">
+
+          <p class="left_tt">{{index+1}}.购入芒果52公斤<el-button type="primary" size="mini" icon="el-icon-edit"></el-button></p>
+
+          <el-row>
+            <el-col span="4"><span>经济组织：</span>田娜合作社</el-col>
+            <el-col span="6"><span>所属地：</span>山东省/威海市/环翠区/羊头镇/张家村</el-col>
+            <el-col span="6"><span>详细地址：</span>万江路阿巴阿巴阿巴104号楼</el-col>
+            <el-col span="4"><span>申请人：</span>林萧天</el-col>
+            <el-col span="4"><span>联系电话：</span>158 0366 7149</el-col>
+          </el-row>
+
+          <el-row>
+            <el-col span="4" style="color: #ef0027;"><span>挂起时间：</span>2023.3.10</el-col>
+            <el-col span="6" style="color: #ef0027;"><span>异常原因：</span>缺少收据</el-col>
+          </el-row>
+
+
+        </div>
+
+      </div>
+
+      <div class="right_main">
+        <div class="title">
+          <i></i>
+          <p>任务日期</p>
+        </div>
+
+        <div class="time_main">
+          <span class="sanjiao-top"></span>
+          <p>2023</p>
+          <span class="sanjiao-bottom"></span>
+        </div>
+
+        <div class="month_main">
+          <p v-for="(item,index) in 12" :class="{'active':index==3}">{{index}}月<i v-if="index==3"></i></p>
+        </div>
+
+      </div>
+
+    </div>
+
+
+  </div>
+</template>
+
+<script>
+export default {
+  name: "todo",
+  data() {
+    return {
+
+    }
+  },
+  created() {
+
+  },
+  methods:{
+
+  },
+  mounted(){
+
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  p{margin: 0;line-height: 1;}
+  ::-webkit-scrollbar{display:none}
+  .app-container{
+    background-color: #f5f6f8;
+    width: 100vw;
+    height: 100vh;
+  }
+  .title{
+    display: flex;
+    align-items: center;
+    i{
+      display: inline-block;
+      width: 5px;
+      height: 20px;
+      background: #4d7cfe;
+      border-radius: 5px;
+      margin-right: 10px;
+    }
+    p{
+      font-size: 18px;
+    }
+  }
+
+  .header_main{
+    display: flex;
+    align-items: center;
+    position: relative;
+    .selected{
+      width: 8vw;
+      background-color: #ffffff;
+      position: absolute;
+      top: 4vh;
+      left: 10vw;
+      z-index: 9;
+      border-radius: 8px;
+      box-shadow: 0 10px 10px #dedfe1;
+      padding: 1vh 0;
+      div{
+        display: flex;
+        height: 4vh;
+        p{
+          width: 8vw;
+          line-height: 4vh;
+          text-align: center;
+        }
+      }
+    }
+    .select_address{
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-right: 2vw;
+      background-color: #ffffff;
+      padding: 0px 0px;
+      border-radius: 8px;
+      box-shadow: 0 0 10px #dedfe1;
+      width: 8vw;
+      height: 4vh;
+      overflow: hidden;
+
+      .sanjiao-right {
+        display: inline-block;
+        border-left: 8px solid #000;
+        border-left-color: initial;
+        border-top: 5px solid transparent;
+        border-bottom: 5px solid transparent;
+        margin-right: 5px;
+      }
+      .select_time{
+        text-align: center;
+        width: 100%;
+        height: 4vh;
+        line-height: 4vh;
+        background-color: #3976ff;
+        color: #ffffff;
+      }
+    }
+    .todo_num{
+      margin-left: auto;
+      span{
+        font-size: 24px;
+        color: #ef0027;
+      }
+    }
+    .todo_num2{
+      margin-left: 2vw;
+      span{
+        font-size: 24px;
+        color: #ef0027;
+      }
+    }
+    .todo_num3{
+      margin-left: 2vw;
+      span{
+        font-size: 24px;
+        color: #9a9a9a;
+      }
+    }
+  }
+
+  .main{
+    display: flex;
+    .left_main{
+      width: 92%;
+      margin-right: 0.57%;
+      margin-top: 15px;
+      border-radius: 8px;
+      box-shadow: 4px 0px 10px rgba(0, 0, 0, 0.13);
+      background: #fff;
+      padding: 15px 20px;
+      height: calc(100vh - 91px);
+      overflow-y: scroll;
+      .left_main_block{
+        border-radius: 8px;
+        box-shadow: 4px 0px 10px rgba(0, 0, 0, 0.13);
+        margin-bottom: 15px;
+        padding: 15px 20px;
+        .left_tt{
+          padding-bottom: 15px;
+          border-bottom: 1px solid #e4e5e6;
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          margin-bottom: 10px;
+        }
+        .el-col{
+          padding: 10px 0;
+        }
+        span{
+          color: #8b8b8b;
+        }
+      }
+    }
+
+    .right_main{
+      width: 7.43%;
+      margin-top: 15px;
+      border-radius: 8px;
+      box-shadow: 4px 0px 10px rgba(0, 0, 0, 0.13);
+      background: #fff;
+      padding: 15px 20px;
+      height: calc(100vh - 91px);
+    }
+
+  }
+
+  .sanjiao-top {
+    display: inline-block;
+    border-bottom: 8px solid #414141;
+    border-bottom-color: initial;
+    border-left: 5px solid transparent;
+    border-right: 5px solid transparent;
+  }
+
+  .sanjiao-bottom {
+    display: inline-block;
+    border-top: 8px solid #414141;
+    border-top-color: initial;
+    border-left: 5px solid transparent;
+    border-right: 5px solid transparent;
+  }
+
+  .time_main{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    background-color: #f5f6f8;
+    color: #414141;
+    width: 75%;
+    margin: 0 auto;
+    margin-top: 15px;
+    padding: 15px 0;
+    border-radius: 8px;
+    p{
+      margin: 10px 0;
+    }
+  }
+
+  .month_main{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    color: #414141;
+    p{
+      margin-top: 3vh;
+      position: relative;
+      &.active{
+        color: #3976ff;
+      }
+      i{
+        display: block;
+        width: 5px;
+        height: 5px;
+        background-color: #fc5659;
+        position: absolute;
+        top: -5px;
+        right: -5px;
+        border-radius: 100%;
+      }
+    }
+
+  }
+
+</style>

src/views/allTasks/allTasks.vue

@@ -0,0 +1,484 @@
+<template>
+  <div class="app-container">
+
+    <div class="header_main">
+
+      <div class="select_address">
+        <span class="sanjiao-right"></span>
+        <p>大足区</p>
+      </div>
+
+      <div class="select_address">
+        <span class="sanjiao-right"></span>
+        <p>张家镇</p>
+      </div>
+
+      <div style="display: none" class="selected">
+        <div>
+          <p>张家镇</p>
+          <p>2023.03.05</p>
+        </div>
+        <div>
+          <p>张家镇</p>
+          <p>2023.03.05</p>
+        </div>
+        <div>
+          <p>张家镇</p>
+          <p>2023.03.05</p>
+        </div>
+        <div>
+          <p>张家镇</p>
+          <p>2023.03.05</p>
+        </div>
+      </div>
+
+      <p class="todo_num">镇处理进度：<span>15/50</span></p>
+      <p class="todo_num3">镇审核进度：<span>5/50</span></p>
+      <p class="todo_num1">合作社处理进度：<span>25/70</span></p>
+      <p class="todo_num3">合作社审核进度：<span>10/70</span></p>
+      <p class="todo_num2">任务异常数：<span>1</span>个</p>
+
+    </div>
+
+    <div class="main">
+
+      <div class="left_main">
+        <el-collapse accordion>
+          <el-collapse-item v-for="(item,index) in 5" :key="index">
+            <template slot="title">
+              <div class="left_main_tt">
+                <p>东沙镇</p>
+                <div class="tt_label">
+                  <p>异常：1</p>
+                  <p>村庄处理进度：15/20</p>
+                  <p>村庄审核进度：15/20</p>
+                </div>
+              </div>
+            </template>
+            <el-table :data="tableData" style="width: 100%;" :default-sort = "{prop: 'date', order: 'descending'}">
+
+              <el-table-column type="expand">
+                <template slot-scope="props">
+                  <div class="openTable">
+                    <el-row v-for="(item,index) in 5" :key="index">
+                      <el-col span="9">
+                        <div class="tab_main">
+                          <div v-if="index == 0"><span>未处理</span><span>未审核</span></div>
+                          <div v-if="index == 1"><span class="tab_green">已处理</span><span class="tab_green">已审核</span></div>
+                          <div v-if="index == 2"><span class="tab_red">异常:1</span><span>未审核</span></div>
+                          康师傅合作社
+                        </div>
+                      </el-col>
+                      <el-col span="2">记账：3</el-col>
+                      <el-col span="2">合同：3</el-col>
+                      <el-col span="2">其他：3</el-col>
+                      <el-col span="9" style="text-align: right"><el-button type="primary" size="mini">进入账套</el-button></el-col>
+                    </el-row>
+                  </div>
+                </template>
+              </el-table-column>
+
+              <el-table-column prop="value1" label="村" show-overflow-tooltip />
+              <el-table-column prop="value2" label="合作社" show-overflow-tooltip />
+              <el-table-column prop="value3" label="处理进度" show-overflow-tooltip />
+              <el-table-column prop="value4" label="异常任务" show-overflow-tooltip />
+              <el-table-column prop="value5" label="审核进度" show-overflow-tooltip />
+              <el-table-column prop="value6" label="会计" show-overflow-tooltip />
+              <el-table-column prop="value7" label="下发日期" show-overflow-tooltip />
+              <el-table-column prop="value7" label="截止日期" show-overflow-tooltip />
+              <el-table-column prop="value7" label="记账完成日期" show-overflow-tooltip />
+              <el-table-column prop="value8" label="是否审批完成" show-overflow-tooltip >
+                <template slot-scope="scope">
+                  <p class="backButton">未完成</p>
+                  <p class="backButton2">已完成</p>
+                </template>
+              </el-table-column>
+
+            </el-table>
+          </el-collapse-item>
+        </el-collapse>
+
+      </div>
+
+      <div class="right_main">
+        <div class="title">
+          <i></i>
+          <p>任务日期</p>
+        </div>
+
+        <div class="time_main">
+          <span class="sanjiao-top"></span>
+          <p>2023</p>
+          <span class="sanjiao-bottom"></span>
+        </div>
+
+        <div class="month_main">
+          <p v-for="(item,index) in 12" :class="{'active':index==3}">{{index}}月<i v-if="index==3"></i></p>
+        </div>
+
+      </div>
+
+    </div>
+
+
+  </div>
+</template>
+
+<script>
+export default {
+  name: "processing",
+  data() {
+    return {
+      tableData: [{
+        value1: '当当村',
+        value2: '玩玩玩玩玩玩玩玩合作社玩玩玩玩玩玩玩玩合作社',
+        value3: '8',
+        value4: '5',
+        value5: '5',
+        value6: '18',
+        value7: '2023.03.05',
+        value8: '2023.03.06',
+        value9: '111'
+      }, {
+        value1: '当当村',
+        value2: '玩玩玩玩玩玩玩玩合作社',
+        value3: '8',
+        value4: '5',
+        value5: '5',
+        value6: '18',
+        value7: '2023.03.05',
+        value8: '2023.03.06',
+        value9: '111'
+      }, {
+        value1: '当当村',
+        value2: '玩玩玩玩玩玩玩玩合作社',
+        value3: '8',
+        value4: '5',
+        value5: '5',
+        value6: '18',
+        value7: '2023.03.05',
+        value8: '2023.03.06',
+        value9: '111'
+      }, {
+        value1: '当当村',
+        value2: '玩玩玩玩玩玩玩玩合作社',
+        value3: '8',
+        value4: '5',
+        value5: '5',
+        value6: '18',
+        value7: '2023.03.05',
+        value8: '2023.03.06',
+        value9: '111'
+      }]
+    }
+  },
+  created() {
+
+  },
+  methods:{
+
+  },
+  mounted(){
+
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  p{margin: 0;line-height: 1;}
+  .app-container{
+    background-color: #f5f6f8;
+    width: 100vw;
+    height: 100vh;
+  }
+  .title{
+    display: flex;
+    align-items: center;
+    i{
+      display: inline-block;
+      width: 5px;
+      height: 20px;
+      background: #4d7cfe;
+      border-radius: 5px;
+      margin-right: 10px;
+    }
+    p{
+      font-size: 18px;
+    }
+  }
+
+  ::v-deep .el-collapse {
+    border: none;
+  }
+
+  ::v-deep .el-collapse-item__header {
+    border: none;
+  }
+
+  ::v-deep .el-collapse-item__content {
+    background-color: #e2ebff;
+  }
+
+  ::v-deep .el-table__expanded-cell {
+    background-color: #e2ebff;
+  }
+
+  ::v-deep .el-table {
+    background-color: transparent;
+  }
+
+  ::v-deep .el-table .cell{
+    text-align: center;
+  }
+
+  ::v-deep .el-table .el-table__cell{
+    border: none!important;
+  }
+  ::v-deep .el-table::before{
+    display: none;
+  }
+  ::v-deep .el-table .el-table__header-wrapper th{
+    background-color: transparent;
+  }
+  ::v-deep .el-table tr{
+    background-color: transparent;
+  }
+
+  .openTable{
+    padding: 1vh 2vw;
+    background-color: #ffffff;
+    border-radius: 15px;
+    overflow: hidden;
+    width: calc(100% - 40px);
+    margin: 0 auto;
+    .tab_main{
+      display: flex;
+      span{
+        color: #ffffff;
+        background-color: #acabab;
+        padding: 2px 0px;
+        width: 4vw;
+        display: inline-block;
+        border-radius: 7px;
+        margin-right: 1vw;
+        text-align: center;
+      }
+      .tab_green{
+        background-color: #209955;
+      }
+      .tab_red{
+        background-color: #ef0027;
+      }
+    }
+
+    .num{
+      color: #3976ff;
+      display: inline-block;
+      background-color: #e2ebff;
+      width: 1.8vw;
+      border-radius: 5px;
+      margin-left: 5px;
+    }
+    .el-col{
+      padding: 10px 0;
+    }
+  }
+
+  .header_main{
+    display: flex;
+    align-items: center;
+    position: relative;
+    .selected{
+      width: 16vw;
+      background-color: #ffffff;
+      position: absolute;
+      top: 4vh;
+      left: 10vw;
+      z-index: 9;
+      border-radius: 8px;
+      box-shadow: 0 10px 10px #dedfe1;
+      padding: 1vh 0;
+      div{
+        display: flex;
+        height: 4vh;
+        p{
+          width: 8vw;
+          line-height: 4vh;
+          text-align: center;
+        }
+      }
+    }
+    .select_address{
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-right: 2vw;
+      background-color: #ffffff;
+      padding: 0px 0px;
+      border-radius: 8px;
+      box-shadow: 0 0 10px #dedfe1;
+      width: 8vw;
+      height: 4vh;
+      overflow: hidden;
+      &:nth-child(2){
+        margin-right: 0vw;
+      }
+      &:nth-child(3){
+        margin-right: 0vw;
+        border-top-left-radius: initial;
+        border-bottom-left-radius: initial;
+      }
+      .sanjiao-right {
+        display: inline-block;
+        border-left: 8px solid #000;
+        border-left-color: initial;
+        border-top: 5px solid transparent;
+        border-bottom: 5px solid transparent;
+        margin-right: 5px;
+      }
+      .select_time{
+        text-align: center;
+        width: 100%;
+        height: 4vh;
+        line-height: 4vh;
+        background-color: #3976ff;
+        color: #ffffff;
+      }
+    }
+    .todo_num{
+      margin-left: auto;
+      span{
+        font-size: 24px;
+        color: #3976ff;
+      }
+    }
+    .todo_num1{
+      margin-left: 2vw;
+      span{
+        font-size: 24px;
+        color: #3976ff;
+      }
+    }
+    .todo_num2{
+      margin-left: 2vw;
+      span{
+        font-size: 24px;
+        color: #ef0027;
+      }
+    }
+    .todo_num3{
+      margin-left: 2vw;
+      span{
+        font-size: 24px;
+        color: #209955;
+      }
+    }
+  }
+
+  .main{
+    display: flex;
+    .left_main{
+      width: 92%;
+      margin-right: 0.57%;
+      margin-top: 15px;
+      border-radius: 8px;
+      box-shadow: 4px 0px 10px rgba(0, 0, 0, 0.13);
+      background: #fff;
+      padding: 15px 20px;
+      height: calc(100vh - 91px);
+      .backButton{
+        color: #3976ff;
+        display: inline-block;
+      }
+      .backButton2{
+        color: #209955;
+        display: inline-block;
+      }
+      .left_main_tt{
+        flex: 1;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        .tt_label{
+          display: flex;
+          align-items: center;
+          p{
+            margin-right: 2vw;
+            &:nth-child(1){
+              color: #ef0027;
+            }
+          }
+        }
+      }
+    }
+
+    .right_main{
+      width: 7.43%;
+      margin-top: 15px;
+      border-radius: 8px;
+      box-shadow: 4px 0px 10px rgba(0, 0, 0, 0.13);
+      background: #fff;
+      padding: 15px 20px;
+      height: calc(100vh - 91px);
+    }
+
+  }
+
+  .sanjiao-top {
+    display: inline-block;
+    border-bottom: 8px solid #414141;
+    border-bottom-color: initial;
+    border-left: 5px solid transparent;
+    border-right: 5px solid transparent;
+  }
+
+  .sanjiao-bottom {
+    display: inline-block;
+    border-top: 8px solid #414141;
+    border-top-color: initial;
+    border-left: 5px solid transparent;
+    border-right: 5px solid transparent;
+  }
+
+  .time_main{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    background-color: #f5f6f8;
+    color: #414141;
+    width: 75%;
+    margin: 0 auto;
+    margin-top: 15px;
+    padding: 15px 0;
+    border-radius: 8px;
+    p{
+      margin: 10px 0;
+    }
+  }
+
+  .month_main{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    color: #414141;
+    p{
+      margin-top: 3vh;
+      position: relative;
+      &.active{
+        color: #3976ff;
+      }
+      i{
+        display: block;
+        width: 5px;
+        height: 5px;
+        background-color: #fc5659;
+        position: absolute;
+        top: -5px;
+        right: -5px;
+        border-radius: 100%;
+      }
+    }
+
+  }
+
+</style>

src/views/audit/audit.vue

@@ -0,0 +1,452 @@
+<template>
+  <div class="app-container">
+
+    <div class="header_main">
+
+      <div class="select_address">
+        <span class="sanjiao-right"></span>
+        <p>大足区</p>
+      </div>
+
+      <div class="select_address">
+        <span class="sanjiao-right"></span>
+        <p>张家镇</p>
+      </div>
+
+      <div class="header_btn1">
+        <p>全部审核</p>
+      </div>
+
+      <div class="header_btn2">
+        <p>确定提交</p>
+      </div>
+
+      <p class="header_tt">
+        <i class="el-icon-warning"></i>已选中：年村（a合作社，b合作社，c合作社，d合作社）、张村（百事合作社）...
+      </p>
+
+      <div style="display: none" class="selected">
+        <div>
+          <p>张家镇</p>
+          <p>2023.03.05</p>
+        </div>
+        <div>
+          <p>张家镇</p>
+          <p>2023.03.05</p>
+        </div>
+        <div>
+          <p>张家镇</p>
+          <p>2023.03.05</p>
+        </div>
+        <div>
+          <p>张家镇</p>
+          <p>2023.03.05</p>
+        </div>
+      </div>
+
+      <p class="todo_num">已处理村庄：<span>19</span>个</p>
+      <p class="todo_num2">超时完成村庄：<span>1</span>个</p>
+
+    </div>
+
+    <div class="main">
+
+      <div class="left_main">
+        <el-table :data="tableData" style="width: 100%;" :default-sort = "{prop: 'date', order: 'descending'}">
+
+          <el-table-column type="expand">
+            <template slot-scope="props">
+              <div class="openTable">
+                <div class="openTable_block">
+                  <el-button type="primary" size="mini">审核</el-button>
+                  <p>已选中：百事合作社</p>
+                </div>
+                <el-table :data="tableData" style="width: 100%;background-color: transparent;" :default-sort = "{prop: 'date', order: 'descending'}">
+                  <el-table-column prop="value9" label="操作">
+                    <template slot-scope="scope">
+                      <el-button type="primary" size="mini">审核</el-button>
+                      <el-button type="primary" size="mini" plain>查看</el-button>
+                    </template>
+                  </el-table-column>
+                  <el-table-column prop="value1" label="组织名称" show-overflow-tooltip />
+                  <el-table-column prop="value2" label="记账笔数" show-overflow-tooltip >
+                    <template slot-scope="scope">
+                      5 <span class="num">7</span>
+                    </template>
+                  </el-table-column>
+                  <el-table-column prop="value3" label="合同数量" show-overflow-tooltip />
+                  <el-table-column prop="value4" label="其他" show-overflow-tooltip />
+                  <el-table-column prop="value5" label="任务总数" show-overflow-tooltip />
+                </el-table>
+              </div>
+            </template>
+          </el-table-column>
+
+          <el-table-column prop="value1" label="操作" show-overflow-tooltip >
+            <template slot-scope="scope">
+              <el-button type="primary" size="mini">审核</el-button>
+            </template>
+          </el-table-column>
+          <el-table-column prop="value2" label="村" show-overflow-tooltip />
+          <el-table-column prop="value3" label="合作社数量" show-overflow-tooltip />
+          <el-table-column prop="value4" label="记账笔数" show-overflow-tooltip />
+          <el-table-column prop="value5" label="合同数量" show-overflow-tooltip />
+          <el-table-column prop="value6" label="其他" show-overflow-tooltip />
+          <el-table-column prop="value7" label="下发日期" show-overflow-tooltip />
+          <el-table-column prop="value8" label="截止日期" show-overflow-tooltip />
+          <el-table-column prop="value8" label="完成日期" show-overflow-tooltip />
+          <el-table-column prop="value8" label="负责人" show-overflow-tooltip />
+
+        </el-table>
+
+        <img src="../../assets/images/audit_icon_none.png" alt="" class="table_none">
+
+      </div>
+
+      <div class="right_main">
+        <div class="title">
+          <i></i>
+          <p>任务日期</p>
+        </div>
+
+        <div class="time_main">
+          <span class="sanjiao-top"></span>
+          <p>2023</p>
+          <span class="sanjiao-bottom"></span>
+        </div>
+
+        <div class="month_main">
+          <p v-for="(item,index) in 12" :class="{'active':index==3}">{{index}}月<i v-if="index==3"></i></p>
+        </div>
+
+      </div>
+
+    </div>
+
+
+  </div>
+</template>
+
+<script>
+export default {
+  name: "processed",
+  data() {
+    return {
+      tableData: [{
+        value1: '当当村',
+        value2: '玩玩玩玩玩玩玩玩合作社玩玩玩玩玩玩玩玩合作社',
+        value3: '8',
+        value4: '5',
+        value5: '5',
+        value6: '18',
+        value7: '2023.03.05',
+        value8: '2023.03.06',
+        value9: '111'
+      }, {
+        value1: '当当村',
+        value2: '玩玩玩玩玩玩玩玩合作社',
+        value3: '8',
+        value4: '5',
+        value5: '5',
+        value6: '18',
+        value7: '2023.03.05',
+        value8: '2023.03.06',
+        value9: '111'
+      }, {
+        value1: '当当村',
+        value2: '玩玩玩玩玩玩玩玩合作社',
+        value3: '8',
+        value4: '5',
+        value5: '5',
+        value6: '18',
+        value7: '2023.03.05',
+        value8: '2023.03.06',
+        value9: '111'
+      }, {
+        value1: '当当村',
+        value2: '玩玩玩玩玩玩玩玩合作社',
+        value3: '8',
+        value4: '5',
+        value5: '5',
+        value6: '18',
+        value7: '2023.03.05',
+        value8: '2023.03.06',
+        value9: '111'
+      }]
+    }
+  },
+  created() {
+
+  },
+  methods:{
+
+  },
+  mounted(){
+
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  p{margin: 0;line-height: 1;}
+  .app-container{
+    background-color: #f5f6f8;
+    width: 100vw;
+    height: 100vh;
+  }
+  .header_tt{
+    font-size: 14px;
+    color: #7e7e7e;
+  }
+  .title{
+    display: flex;
+    align-items: center;
+    i{
+      display: inline-block;
+      width: 5px;
+      height: 20px;
+      background: #4d7cfe;
+      border-radius: 5px;
+      margin-right: 10px;
+    }
+    p{
+      font-size: 18px;
+    }
+  }
+  .table_none{
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%,-50%);
+  }
+  ::v-deep .el-table .cell{
+    text-align: center;
+  }
+
+  ::v-deep .el-table .el-table__cell{
+    border: none!important;
+  }
+  ::v-deep .el-table::before{
+    display: none;
+  }
+  ::v-deep .el-table .el-table__header-wrapper th{
+    background-color: transparent;
+  }
+  ::v-deep .el-table tr{
+    background-color: transparent;
+  }
+
+  .openTable{
+    display: flex;
+    align-items: center;
+    background-color: #eef3fd;
+    padding: 0 2.5vw 2vh;
+    .openTable_block{
+      width: 10%;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      p{
+        margin-top: 5px;
+      }
+    }
+    ::v-deep .el-table__body{
+      background-color: #ffffff;
+      border-radius: 15px;
+      overflow: hidden;
+    }
+    .num{
+      color: #3976ff;
+      display: inline-block;
+      background-color: #e2ebff;
+      width: 1.8vw;
+      border-radius: 5px;
+      margin-left: 5px;
+    }
+  }
+
+  .header_main{
+    display: flex;
+    align-items: center;
+    position: relative;
+    .selected{
+      width: 16vw;
+      background-color: #ffffff;
+      position: absolute;
+      top: 4vh;
+      left: 10vw;
+      z-index: 9;
+      border-radius: 8px;
+      box-shadow: 0 10px 10px #dedfe1;
+      padding: 1vh 0;
+      div{
+        display: flex;
+        height: 4vh;
+        p{
+          width: 8vw;
+          line-height: 4vh;
+          text-align: center;
+        }
+      }
+    }
+    .header_btn1{
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-right: 2vw;
+      background-color: #3976ff;
+      padding: 0px 0px;
+      border-radius: 8px;
+      box-shadow: 0 0 10px #dedfe1;
+      width: 8vw;
+      height: 4vh;
+      overflow: hidden;
+      color: #ffffff;
+    }
+    .header_btn2{
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-right: 2vw;
+      background-color: #209955;
+      padding: 0px 0px;
+      border-radius: 8px;
+      box-shadow: 0 0 10px #dedfe1;
+      width: 8vw;
+      height: 4vh;
+      overflow: hidden;
+      color: #ffffff;
+    }
+    .select_address{
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-right: 2vw;
+      background-color: #ffffff;
+      padding: 0px 0px;
+      border-radius: 8px;
+      box-shadow: 0 0 10px #dedfe1;
+      width: 8vw;
+      height: 4vh;
+      overflow: hidden;
+      &:nth-child(3){
+        border-top-left-radius: initial;
+        border-bottom-left-radius: initial;
+      }
+      .sanjiao-right {
+        display: inline-block;
+        border-left: 8px solid #000;
+        border-left-color: initial;
+        border-top: 5px solid transparent;
+        border-bottom: 5px solid transparent;
+        margin-right: 5px;
+      }
+      .select_time{
+        text-align: center;
+        width: 100%;
+        height: 4vh;
+        line-height: 4vh;
+        background-color: #3976ff;
+        color: #ffffff;
+      }
+    }
+    .todo_num{
+      margin-left: auto;
+      span{
+        font-size: 24px;
+        color: #3976ff;
+      }
+    }
+    .todo_num2{
+      margin-left: 2vw;
+      span{
+        font-size: 24px;
+        color: #ef0027;
+      }
+    }
+  }
+
+  .main{
+    display: flex;
+    .left_main{
+      width: 92%;
+      margin-right: 0.57%;
+      margin-top: 15px;
+      border-radius: 8px;
+      box-shadow: 4px 0px 10px rgba(0, 0, 0, 0.13);
+      background: #fff;
+      padding: 15px 20px;
+      height: calc(100vh - 91px);
+      position: relative;
+    }
+
+    .right_main{
+      width: 7.43%;
+      margin-top: 15px;
+      border-radius: 8px;
+      box-shadow: 4px 0px 10px rgba(0, 0, 0, 0.13);
+      background: #fff;
+      padding: 15px 20px;
+      height: calc(100vh - 91px);
+    }
+
+  }
+
+  .sanjiao-top {
+    display: inline-block;
+    border-bottom: 8px solid #414141;
+    border-bottom-color: initial;
+    border-left: 5px solid transparent;
+    border-right: 5px solid transparent;
+  }
+
+  .sanjiao-bottom {
+    display: inline-block;
+    border-top: 8px solid #414141;
+    border-top-color: initial;
+    border-left: 5px solid transparent;
+    border-right: 5px solid transparent;
+  }
+
+  .time_main{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    background-color: #f5f6f8;
+    color: #414141;
+    width: 75%;
+    margin: 0 auto;
+    margin-top: 15px;
+    padding: 15px 0;
+    border-radius: 8px;
+    p{
+      margin: 10px 0;
+    }
+  }
+
+  .month_main{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    color: #414141;
+    p{
+      margin-top: 3vh;
+      position: relative;
+      &.active{
+        color: #3976ff;
+      }
+      i{
+        display: block;
+        width: 5px;
+        height: 5px;
+        background-color: #fc5659;
+        position: absolute;
+        top: -5px;
+        right: -5px;
+        border-radius: 100%;
+      }
+    }
+
+  }
+
+</style>

src/views/login_new.vue

@@ -0,0 +1,266 @@
+<template>
+  <div class="login">
+    <div class="header_logo">
+      <img src="../assets/logo/logo.png" alt="">
+      <p>会计记账中心登录界面</p>
+    </div>
+    <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">
+<!--      <h3 class="title">农燊高科代理记账服务中心</h3>-->
+      <el-form-item prop="username">
+        <el-input
+          v-model="loginForm.username"
+          type="text"
+          auto-complete="off"
+          placeholder="账号"
+        >
+        </el-input>
+      </el-form-item>
+      <el-form-item prop="password">
+        <el-input
+          v-model="loginForm.password"
+          type="password"
+          auto-complete="off"
+          placeholder="密码"
+          @keyup.enter.native="handleLogin"
+        >
+        </el-input>
+      </el-form-item>
+      <el-form-item prop="username">
+        <el-select v-model="value" placeholder="请选择" style="width: 100%">
+          <el-option
+            v-for="item in options"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value">
+          </el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item prop="code" v-if="captchaEnabled">
+        <el-input
+          v-model="loginForm.code"
+          auto-complete="off"
+          placeholder="验证码"
+          style="width: 63%"
+          @keyup.enter.native="handleLogin"
+        >
+        </el-input>
+        <div class="login-code">
+          <img :src="codeUrl" @click="getCode" class="login-code-img"/>
+        </div>
+      </el-form-item>
+      <el-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 25px 0px;">记住密码</el-checkbox>
+      <el-form-item style="width:100%;">
+        <el-button
+          :loading="loading"
+          size="medium"
+          type="primary"
+          style="width:100%;padding: 17px 20px;border-radius: 15px;"
+          @click.native.prevent="handleLogin"
+        >
+          <span v-if="!loading">登 录</span>
+          <span v-else>登 录 中...</span>
+        </el-button>
+        <div style="float: right;" v-if="register">
+          <router-link class="link-type" :to="'/register'">立即注册</router-link>
+        </div>
+      </el-form-item>
+    </el-form>
+    <!--  底部  -->
+    <div class="el-login-footer">
+      <span>技术支持单位：北京农燊高科信息技术有限公司</span>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getCodeImg } from "@/api/login";
+import Cookies from "js-cookie";
+import { encrypt, decrypt } from '@/utils/jsencrypt'
+
+export default {
+  name: "Login",
+  data() {
+    return {
+      codeUrl: "",
+      loginForm: {
+        username: "",
+        password: "",
+        rememberMe: false,
+        code: "",
+        uuid: ""
+      },
+      loginRules: {
+        username: [
+          { required: true, trigger: "blur", message: "请输入您的账号" }
+        ],
+        password: [
+          { required: true, trigger: "blur", message: "请输入您的密码" }
+        ],
+        code: [{ required: true, trigger: "change", message: "请输入验证码" }]
+      },
+      loading: false,
+      // 验证码开关
+      captchaEnabled: true,
+      // 注册开关
+      register: false,
+      redirect: undefined,
+      options: [{
+        value: '选项1',
+        label: '黄金糕'
+      }, {
+        value: '选项2',
+        label: '双皮奶'
+      }, {
+        value: '选项3',
+        label: '蚵仔煎'
+      }, {
+        value: '选项4',
+        label: '龙须面'
+      }, {
+        value: '选项5',
+        label: '北京烤鸭'
+      }],
+      value: ''
+    };
+  },
+  watch: {
+    $route: {
+      handler: function(route) {
+        this.redirect = route.query && route.query.redirect;
+      },
+      immediate: true
+    }
+  },
+  created() {
+    this.getCode();
+    this.getCookie();
+  },
+  methods: {
+    getCode() {
+      getCodeImg().then(res => {
+        this.captchaEnabled = res.captchaEnabled === undefined ? true : res.captchaEnabled;
+        if (this.captchaEnabled) {
+          this.codeUrl = "data:image/gif;base64," + res.img;
+          this.loginForm.uuid = res.uuid;
+        }
+      });
+    },
+    getCookie() {
+      const username = Cookies.get("username");
+      const password = Cookies.get("password");
+      const rememberMe = Cookies.get('rememberMe')
+      this.loginForm = {
+        username: username === undefined ? this.loginForm.username : username,
+        password: password === undefined ? this.loginForm.password : decrypt(password),
+        rememberMe: rememberMe === undefined ? false : Boolean(rememberMe)
+      };
+    },
+    handleLogin() {
+      this.$refs.loginForm.validate(valid => {
+        if (valid) {
+          this.loading = true;
+          if (this.loginForm.rememberMe) {
+            Cookies.set("username", this.loginForm.username, { expires: 30 });
+            Cookies.set("password", encrypt(this.loginForm.password), { expires: 30 });
+            Cookies.set('rememberMe', this.loginForm.rememberMe, { expires: 30 });
+          } else {
+            Cookies.remove("username");
+            Cookies.remove("password");
+            Cookies.remove('rememberMe');
+          }
+          this.$store.dispatch("Login", this.loginForm).then(() => {
+            this.$router.push({ path: this.redirect || "/" }).catch(()=>{});
+          }).catch(() => {
+            this.loading = false;
+            if (this.captchaEnabled) {
+              this.getCode();
+            }
+          });
+        }
+      });
+    }
+  }
+};
+</script>
+
+<style rel="stylesheet/scss" lang="scss">
+  .header_logo{
+    display: flex;
+    align-items: center;
+    position: absolute;
+    top: 5vh;
+    left: 5vw;
+    color: #4163e5;
+    font-size: 4vh;
+    font-weight: bold;
+    p{
+      margin: 0 0 0 1vw;
+    }
+  }
+.login {
+  display: flex;
+  justify-content: end;
+  align-items: center;
+  height: 100%;
+  background-image: url("../assets/images/login_bg.jpg");
+  background-size: cover;
+  padding: 0 15vw;
+}
+.title {
+  margin: 0px auto 30px auto;
+  text-align: center;
+  color: #707070;
+}
+
+.login-form {
+  border-radius: 25px;
+  background: #ffffff;
+  width: 440px;
+  padding: 35px 25px 30px 25px;
+  .el-input {
+    height: 50px;
+    input {
+      height: 50px;
+      border-radius: 15px;
+    }
+  }
+  .input-icon {
+    height: 39px;
+    width: 14px;
+    margin-left: 2px;
+  }
+}
+.login-tip {
+  font-size: 13px;
+  text-align: center;
+  color: #bfbfbf;
+}
+.login-code {
+  width: 34%;
+  height: 50px;
+  float: right;
+  border-radius: 15px;
+  overflow: hidden;
+  img {
+    cursor: pointer;
+    vertical-align: middle;
+    transform: scale(1.08);
+  }
+}
+.el-login-footer {
+  height: 40px;
+  line-height: 40px;
+  position: fixed;
+  bottom: 0;
+  width: 100%;
+  text-align: center;
+  color: #7c7c7c;
+  font-family: Arial;
+  font-size: 16px;
+  letter-spacing: 1px;
+  left: 0;
+}
+.login-code-img {
+  height: 50px;
+}
+</style>

src/views/managerAbnormal/managerAbnormal.vue

@@ -0,0 +1,328 @@
+<template>
+  <div class="app-container">
+
+    <div class="header_main">
+
+      <div class="select_address">
+        <span class="sanjiao-right"></span>
+        <p>大足区</p>
+      </div>
+
+      <div class="select_address">
+        <span class="sanjiao-right"></span>
+        <p>张家镇</p>
+      </div>
+
+      <div class="select_address">
+        <span class="sanjiao-right"></span>
+        <p>记账</p>
+      </div>
+
+      <div style="display: none;" class="selected">
+        <div>
+          <p>张家镇</p>
+        </div>
+        <div>
+          <p>张家镇</p>
+        </div>
+        <div>
+          <p>张家镇</p>
+        </div>
+        <div>
+          <p>张家镇</p>
+        </div>
+      </div>
+
+      <p class="todo_num">合同异常：<span>19</span>个</p>
+      <p class="todo_num2">记录异常：<span>1</span>个</p>
+      <p class="todo_num3">其他异常：<span>1</span>个</p>
+
+    </div>
+
+    <div class="main">
+
+      <div class="left_main">
+
+        <div class="left_main_block" v-for="(item,index) in 1" :key="index">
+
+          <p class="left_tt">{{index+1}}.购入芒果52公斤 <span>负责人：张三</span><el-button type="danger" size="mini" icon="el-icon-edit"></el-button></p>
+
+          <el-row>
+            <el-col span="4"><span>经济组织：</span>田娜合作社</el-col>
+            <el-col span="6"><span>所属地：</span>山东省/威海市/环翠区/羊头镇/张家村</el-col>
+            <el-col span="6"><span>详细地址：</span>万江路阿巴阿巴阿巴104号楼</el-col>
+            <el-col span="4"><span>申请人：</span>林萧天</el-col>
+            <el-col span="4"><span>联系电话：</span>158 0366 7149</el-col>
+          </el-row>
+
+          <el-row>
+            <el-col span="4" style="color: #ef0027;"><span>挂起时间：</span>2023.3.10</el-col>
+            <el-col span="6" style="color: #ef0027;"><span>异常原因：</span>缺少收据</el-col>
+          </el-row>
+
+
+        </div>
+
+        <img src="../../assets/images/managerAbnormal_icon_none.png" class="table_none" alt="">
+      </div>
+
+      <div class="right_main">
+        <div class="title">
+          <i></i>
+          <p>任务日期</p>
+        </div>
+
+        <div class="time_main">
+          <span class="sanjiao-top"></span>
+          <p>2023</p>
+          <span class="sanjiao-bottom"></span>
+        </div>
+
+        <div class="month_main">
+          <p v-for="(item,index) in 12" :class="{'active':index==3}">{{index}}月<i v-if="index==3"></i></p>
+        </div>
+
+      </div>
+
+    </div>
+
+
+  </div>
+</template>
+
+<script>
+export default {
+  name: "todo",
+  data() {
+    return {
+
+    }
+  },
+  created() {
+
+  },
+  methods:{
+
+  },
+  mounted(){
+
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  p{margin: 0;line-height: 1;}
+  ::-webkit-scrollbar{display:none}
+  .app-container{
+    background-color: #f5f6f8;
+    width: 100vw;
+    height: 100vh;
+  }
+  .title{
+    display: flex;
+    align-items: center;
+    i{
+      display: inline-block;
+      width: 5px;
+      height: 20px;
+      background: #4d7cfe;
+      border-radius: 5px;
+      margin-right: 10px;
+    }
+    p{
+      font-size: 18px;
+    }
+  }
+  .table_none{
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%,-50%);
+  }
+  .header_main{
+    display: flex;
+    align-items: center;
+    position: relative;
+    .selected{
+      width: 8vw;
+      background-color: #ffffff;
+      position: absolute;
+      top: 4vh;
+      left: 10vw;
+      z-index: 9;
+      border-radius: 8px;
+      box-shadow: 0 10px 10px #dedfe1;
+      padding: 1vh 0;
+      div{
+        display: flex;
+        height: 4vh;
+        p{
+          width: 8vw;
+          line-height: 4vh;
+          text-align: center;
+        }
+      }
+    }
+    .select_address{
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-right: 2vw;
+      background-color: #ffffff;
+      padding: 0px 0px;
+      border-radius: 8px;
+      box-shadow: 0 0 10px #dedfe1;
+      width: 8vw;
+      height: 4vh;
+      overflow: hidden;
+
+      .sanjiao-right {
+        display: inline-block;
+        border-left: 8px solid #000;
+        border-left-color: initial;
+        border-top: 5px solid transparent;
+        border-bottom: 5px solid transparent;
+        margin-right: 5px;
+      }
+      .select_time{
+        text-align: center;
+        width: 100%;
+        height: 4vh;
+        line-height: 4vh;
+        background-color: #3976ff;
+        color: #ffffff;
+      }
+    }
+    .todo_num{
+      margin-left: auto;
+      span{
+        font-size: 24px;
+        color: #ef0027;
+      }
+    }
+    .todo_num2{
+      margin-left: 2vw;
+      span{
+        font-size: 24px;
+        color: #ef0027;
+      }
+    }
+    .todo_num3{
+      margin-left: 2vw;
+      span{
+        font-size: 24px;
+        color: #9a9a9a;
+      }
+    }
+  }
+
+  .main{
+    display: flex;
+    .left_main{
+      width: 92%;
+      margin-right: 0.57%;
+      margin-top: 15px;
+      border-radius: 8px;
+      box-shadow: 4px 0px 10px rgba(0, 0, 0, 0.13);
+      background: #fff;
+      padding: 15px 20px;
+      height: calc(100vh - 91px);
+      overflow-y: scroll;
+      position: relative;
+      .left_main_block{
+        border-radius: 8px;
+        box-shadow: 4px 0px 10px rgba(0, 0, 0, 0.13);
+        margin-bottom: 15px;
+        padding: 15px 20px;
+        .left_tt{
+          padding-bottom: 15px;
+          border-bottom: 1px solid #e4e5e6;
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          margin-bottom: 10px;
+          span{
+            color: #3976ff;
+            margin-left: auto;
+            margin-right: 2vw;
+          }
+        }
+        .el-col{
+          padding: 10px 0;
+        }
+        span{
+          color: #8b8b8b;
+        }
+      }
+    }
+
+    .right_main{
+      width: 7.43%;
+      margin-top: 15px;
+      border-radius: 8px;
+      box-shadow: 4px 0px 10px rgba(0, 0, 0, 0.13);
+      background: #fff;
+      padding: 15px 20px;
+      height: calc(100vh - 91px);
+    }
+
+  }
+
+  .sanjiao-top {
+    display: inline-block;
+    border-bottom: 8px solid #414141;
+    border-bottom-color: initial;
+    border-left: 5px solid transparent;
+    border-right: 5px solid transparent;
+  }
+
+  .sanjiao-bottom {
+    display: inline-block;
+    border-top: 8px solid #414141;
+    border-top-color: initial;
+    border-left: 5px solid transparent;
+    border-right: 5px solid transparent;
+  }
+
+  .time_main{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    background-color: #f5f6f8;
+    color: #414141;
+    width: 75%;
+    margin: 0 auto;
+    margin-top: 15px;
+    padding: 15px 0;
+    border-radius: 8px;
+    p{
+      margin: 10px 0;
+    }
+  }
+
+  .month_main{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    color: #414141;
+    p{
+      margin-top: 3vh;
+      position: relative;
+      &.active{
+        color: #3976ff;
+      }
+      i{
+        display: block;
+        width: 5px;
+        height: 5px;
+        background-color: #fc5659;
+        position: absolute;
+        top: -5px;
+        right: -5px;
+        border-radius: 100%;
+      }
+    }
+
+  }
+
+</style>

src/views/processed/processed.vue

@@ -0,0 +1,385 @@
+<template>
+  <div class="app-container">
+
+    <div class="header_main">
+
+      <div class="select_address">
+        <span class="sanjiao-right"></span>
+        <p>大足区</p>
+      </div>
+
+      <div class="select_address">
+        <span class="sanjiao-right"></span>
+        <p>张家镇</p>
+      </div>
+
+      <div style="display: none" class="selected">
+        <div>
+          <p>张家镇</p>
+          <p>2023.03.05</p>
+        </div>
+        <div>
+          <p>张家镇</p>
+          <p>2023.03.05</p>
+        </div>
+        <div>
+          <p>张家镇</p>
+          <p>2023.03.05</p>
+        </div>
+        <div>
+          <p>张家镇</p>
+          <p>2023.03.05</p>
+        </div>
+      </div>
+
+      <p class="todo_num">已处理村庄：<span>19</span>个</p>
+      <p class="todo_num2">超时完成村庄：<span>1</span>个</p>
+
+    </div>
+
+    <div class="main">
+
+      <div class="left_main">
+        <el-table :data="tableData" style="width: 100%;" :default-sort = "{prop: 'date', order: 'descending'}">
+
+          <el-table-column type="expand">
+            <template slot-scope="props">
+              <div class="openTable">
+                <el-table :data="tableData" style="width: 100%;background-color: transparent;" :default-sort = "{prop: 'date', order: 'descending'}">
+                  <el-table-column prop="value1" label="组织名称" show-overflow-tooltip />
+                  <el-table-column prop="value2" label="记账笔数" show-overflow-tooltip >
+                    <template slot-scope="scope">
+                      5 <span class="num">7</span>
+                    </template>
+                  </el-table-column>
+                  <el-table-column prop="value3" label="合同数量" show-overflow-tooltip />
+                  <el-table-column prop="value4" label="其他" show-overflow-tooltip />
+                  <el-table-column prop="value5" label="任务总数" show-overflow-tooltip />
+                  <el-table-column prop="value6" label="状态" show-overflow-tooltip />
+                  <el-table-column prop="value7" label="审核日期" show-overflow-tooltip />
+                  <el-table-column prop="value9" label="操作">
+                    <template slot-scope="scope">
+                      <el-button type="primary" size="mini" icon="el-icon-edit"></el-button>
+                    </template>
+                  </el-table-column>
+                </el-table>
+              </div>
+            </template>
+          </el-table-column>
+
+          <el-table-column prop="value1" label="村" show-overflow-tooltip />
+          <el-table-column prop="value2" label="合作社数量" show-overflow-tooltip />
+          <el-table-column prop="value3" label="已审核" show-overflow-tooltip />
+          <el-table-column prop="value4" label="待审核" show-overflow-tooltip />
+          <el-table-column prop="value5" label="下发日期" show-overflow-tooltip />
+          <el-table-column prop="value6" label="截止日期" show-overflow-tooltip />
+          <el-table-column prop="value7" label="完成日期" show-overflow-tooltip />
+          <el-table-column prop="value8" label="审核人" show-overflow-tooltip />
+
+        </el-table>
+
+
+      </div>
+
+      <div class="right_main">
+        <div class="title">
+          <i></i>
+          <p>任务日期</p>
+        </div>
+
+        <div class="time_main">
+          <span class="sanjiao-top"></span>
+          <p>2023</p>
+          <span class="sanjiao-bottom"></span>
+        </div>
+
+        <div class="month_main">
+          <p v-for="(item,index) in 12" :class="{'active':index==3}">{{index}}月<i v-if="index==3"></i></p>
+        </div>
+
+      </div>
+
+    </div>
+
+
+  </div>
+</template>
+
+<script>
+export default {
+  name: "processed",
+  data() {
+    return {
+      tableData: [{
+        value1: '当当村',
+        value2: '玩玩玩玩玩玩玩玩合作社玩玩玩玩玩玩玩玩合作社',
+        value3: '8',
+        value4: '5',
+        value5: '5',
+        value6: '18',
+        value7: '2023.03.05',
+        value8: '2023.03.06',
+        value9: '111'
+      }, {
+        value1: '当当村',
+        value2: '玩玩玩玩玩玩玩玩合作社',
+        value3: '8',
+        value4: '5',
+        value5: '5',
+        value6: '18',
+        value7: '2023.03.05',
+        value8: '2023.03.06',
+        value9: '111'
+      }, {
+        value1: '当当村',
+        value2: '玩玩玩玩玩玩玩玩合作社',
+        value3: '8',
+        value4: '5',
+        value5: '5',
+        value6: '18',
+        value7: '2023.03.05',
+        value8: '2023.03.06',
+        value9: '111'
+      }, {
+        value1: '当当村',
+        value2: '玩玩玩玩玩玩玩玩合作社',
+        value3: '8',
+        value4: '5',
+        value5: '5',
+        value6: '18',
+        value7: '2023.03.05',
+        value8: '2023.03.06',
+        value9: '111'
+      }]
+    }
+  },
+  created() {
+
+  },
+  methods:{
+
+  },
+  mounted(){
+
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  p{margin: 0;line-height: 1;}
+  .app-container{
+    background-color: #f5f6f8;
+    width: 100vw;
+    height: 100vh;
+  }
+  .title{
+    display: flex;
+    align-items: center;
+    i{
+      display: inline-block;
+      width: 5px;
+      height: 20px;
+      background: #4d7cfe;
+      border-radius: 5px;
+      margin-right: 10px;
+    }
+    p{
+      font-size: 18px;
+    }
+  }
+
+  ::v-deep .el-table .cell{
+    text-align: center;
+  }
+
+  ::v-deep .el-table .el-table__cell{
+    border: none!important;
+  }
+  ::v-deep .el-table::before{
+    display: none;
+  }
+  ::v-deep .el-table .el-table__header-wrapper th{
+    background-color: transparent;
+  }
+  ::v-deep .el-table tr{
+    background-color: transparent;
+  }
+
+  .openTable{
+    background-color: #eef3fd;
+    padding: 0 2.5vw 2vh;
+    ::v-deep .el-table__body{
+      background-color: #ffffff;
+      border-radius: 15px;
+      overflow: hidden;
+    }
+    .num{
+      color: #3976ff;
+      display: inline-block;
+      background-color: #e2ebff;
+      width: 1.8vw;
+      border-radius: 5px;
+      margin-left: 5px;
+    }
+  }
+
+  .header_main{
+    display: flex;
+    align-items: center;
+    position: relative;
+    .selected{
+      width: 16vw;
+      background-color: #ffffff;
+      position: absolute;
+      top: 4vh;
+      left: 10vw;
+      z-index: 9;
+      border-radius: 8px;
+      box-shadow: 0 10px 10px #dedfe1;
+      padding: 1vh 0;
+      div{
+        display: flex;
+        height: 4vh;
+        p{
+          width: 8vw;
+          line-height: 4vh;
+          text-align: center;
+        }
+      }
+    }
+    .select_address{
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-right: 2vw;
+      background-color: #ffffff;
+      padding: 0px 0px;
+      border-radius: 8px;
+      box-shadow: 0 0 10px #dedfe1;
+      width: 8vw;
+      height: 4vh;
+      overflow: hidden;
+      &:nth-child(2){
+        margin-right: 0vw;
+      }
+      &:nth-child(3){
+        margin-right: 0vw;
+        border-top-left-radius: initial;
+        border-bottom-left-radius: initial;
+      }
+      .sanjiao-right {
+        display: inline-block;
+        border-left: 8px solid #000;
+        border-left-color: initial;
+        border-top: 5px solid transparent;
+        border-bottom: 5px solid transparent;
+        margin-right: 5px;
+      }
+      .select_time{
+        text-align: center;
+        width: 100%;
+        height: 4vh;
+        line-height: 4vh;
+        background-color: #3976ff;
+        color: #ffffff;
+      }
+    }
+    .todo_num{
+      margin-left: auto;
+      span{
+        font-size: 24px;
+        color: #3976ff;
+      }
+    }
+    .todo_num2{
+      margin-left: 2vw;
+      span{
+        font-size: 24px;
+        color: #ef0027;
+      }
+    }
+  }
+
+  .main{
+    display: flex;
+    .left_main{
+      width: 92%;
+      margin-right: 0.57%;
+      margin-top: 15px;
+      border-radius: 8px;
+      box-shadow: 4px 0px 10px rgba(0, 0, 0, 0.13);
+      background: #fff;
+      padding: 15px 20px;
+      height: calc(100vh - 91px);
+    }
+
+    .right_main{
+      width: 7.43%;
+      margin-top: 15px;
+      border-radius: 8px;
+      box-shadow: 4px 0px 10px rgba(0, 0, 0, 0.13);
+      background: #fff;
+      padding: 15px 20px;
+      height: calc(100vh - 91px);
+    }
+
+  }
+
+  .sanjiao-top {
+    display: inline-block;
+    border-bottom: 8px solid #414141;
+    border-bottom-color: initial;
+    border-left: 5px solid transparent;
+    border-right: 5px solid transparent;
+  }
+
+  .sanjiao-bottom {
+    display: inline-block;
+    border-top: 8px solid #414141;
+    border-top-color: initial;
+    border-left: 5px solid transparent;
+    border-right: 5px solid transparent;
+  }
+
+  .time_main{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    background-color: #f5f6f8;
+    color: #414141;
+    width: 75%;
+    margin: 0 auto;
+    margin-top: 15px;
+    padding: 15px 0;
+    border-radius: 8px;
+    p{
+      margin: 10px 0;
+    }
+  }
+
+  .month_main{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    color: #414141;
+    p{
+      margin-top: 3vh;
+      position: relative;
+      &.active{
+        color: #3976ff;
+      }
+      i{
+        display: block;
+        width: 5px;
+        height: 5px;
+        background-color: #fc5659;
+        position: absolute;
+        top: -5px;
+        right: -5px;
+        border-radius: 100%;
+      }
+    }
+
+  }
+
+</style>

src/views/processing/processing.vue

@@ -0,0 +1,445 @@
+<template>
+  <div class="app-container">
+
+    <div class="header_main">
+
+      <div class="select_address">
+        <span class="sanjiao-right"></span>
+        <p>大足区</p>
+      </div>
+
+      <div class="select_address">
+        <span class="sanjiao-right"></span>
+        <p>张家镇</p>
+      </div>
+
+      <div style="display: none" class="selected">
+        <div>
+          <p>张家镇</p>
+          <p>2023.03.05</p>
+        </div>
+        <div>
+          <p>张家镇</p>
+          <p>2023.03.05</p>
+        </div>
+        <div>
+          <p>张家镇</p>
+          <p>2023.03.05</p>
+        </div>
+        <div>
+          <p>张家镇</p>
+          <p>2023.03.05</p>
+        </div>
+      </div>
+
+      <p class="todo_num">剩余镇：<span>19</span>个</p>
+      <p class="todo_num1">剩余村庄：<span>19</span>个</p>
+      <p class="todo_num1">剩余合作社：<span>19</span>个</p>
+      <p class="todo_num2">任务异常数：<span>1</span>个</p>
+
+    </div>
+
+    <div class="main">
+
+      <div class="left_main">
+        <el-collapse accordion>
+          <el-collapse-item v-for="(item,index) in 5" :key="index">
+            <template slot="title">
+              <div class="left_main_tt">
+                <p>东沙镇</p>
+                <div class="tt_label">
+                  <p>异常：1</p>
+                  <p>剩余村庄：20</p>
+                  <p>剩余合作社：20</p>
+                </div>
+              </div>
+            </template>
+            <el-table :data="tableData" style="width: 100%;" :default-sort = "{prop: 'date', order: 'descending'}">
+
+              <el-table-column type="expand">
+                <template slot-scope="props">
+                  <div class="openTable">
+                    <el-row v-for="(item,index) in 5" :key="index">
+                      <el-col span="9">康师傅合作社</el-col>
+                      <el-col span="2">记账：3</el-col>
+                      <el-col span="2">合同：3</el-col>
+                      <el-col span="2">其他：3</el-col>
+                      <el-col span="9" style="text-align: right"><el-button type="primary" size="mini">进入账套</el-button></el-col>
+                    </el-row>
+                  </div>
+                </template>
+              </el-table-column>
+
+              <el-table-column prop="value1" label="村" show-overflow-tooltip />
+              <el-table-column prop="value2" label="合作社" show-overflow-tooltip />
+              <el-table-column prop="value3" label="处理进度" show-overflow-tooltip />
+              <el-table-column prop="value4" label="异常任务" show-overflow-tooltip />
+              <el-table-column prop="value5" label="任务进度" show-overflow-tooltip />
+              <el-table-column prop="value6" label="会计" show-overflow-tooltip />
+              <el-table-column prop="value7" label="下发日期" show-overflow-tooltip />
+              <el-table-column prop="value7" label="截至日期" show-overflow-tooltip />
+              <el-table-column prop="value8" label="操作" show-overflow-tooltip >
+                <template slot-scope="scope">
+                  <p class="backButton">撤回</p>
+                </template>
+              </el-table-column>
+
+            </el-table>
+          </el-collapse-item>
+        </el-collapse>
+
+      </div>
+
+      <div class="right_main">
+        <div class="title">
+          <i></i>
+          <p>任务日期</p>
+        </div>
+
+        <div class="time_main">
+          <span class="sanjiao-top"></span>
+          <p>2023</p>
+          <span class="sanjiao-bottom"></span>
+        </div>
+
+        <div class="month_main">
+          <p v-for="(item,index) in 12" :class="{'active':index==3}">{{index}}月<i v-if="index==3"></i></p>
+        </div>
+
+      </div>
+
+    </div>
+
+
+  </div>
+</template>
+
+<script>
+export default {
+  name: "processing",
+  data() {
+    return {
+      tableData: [{
+        value1: '当当村',
+        value2: '玩玩玩玩玩玩玩玩合作社玩玩玩玩玩玩玩玩合作社',
+        value3: '8',
+        value4: '5',
+        value5: '5',
+        value6: '18',
+        value7: '2023.03.05',
+        value8: '2023.03.06',
+        value9: '111'
+      }, {
+        value1: '当当村',
+        value2: '玩玩玩玩玩玩玩玩合作社',
+        value3: '8',
+        value4: '5',
+        value5: '5',
+        value6: '18',
+        value7: '2023.03.05',
+        value8: '2023.03.06',
+        value9: '111'
+      }, {
+        value1: '当当村',
+        value2: '玩玩玩玩玩玩玩玩合作社',
+        value3: '8',
+        value4: '5',
+        value5: '5',
+        value6: '18',
+        value7: '2023.03.05',
+        value8: '2023.03.06',
+        value9: '111'
+      }, {
+        value1: '当当村',
+        value2: '玩玩玩玩玩玩玩玩合作社',
+        value3: '8',
+        value4: '5',
+        value5: '5',
+        value6: '18',
+        value7: '2023.03.05',
+        value8: '2023.03.06',
+        value9: '111'
+      }]
+    }
+  },
+  created() {
+
+  },
+  methods:{
+
+  },
+  mounted(){
+
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  p{margin: 0;line-height: 1;}
+  .app-container{
+    background-color: #f5f6f8;
+    width: 100vw;
+    height: 100vh;
+  }
+  .title{
+    display: flex;
+    align-items: center;
+    i{
+      display: inline-block;
+      width: 5px;
+      height: 20px;
+      background: #4d7cfe;
+      border-radius: 5px;
+      margin-right: 10px;
+    }
+    p{
+      font-size: 18px;
+    }
+  }
+
+  ::v-deep .el-collapse {
+    border: none;
+  }
+
+  ::v-deep .el-collapse-item__header {
+    border: none;
+  }
+
+  ::v-deep .el-collapse-item__content {
+    background-color: #e2ebff;
+  }
+
+  ::v-deep .el-table__expanded-cell {
+    background-color: #e2ebff;
+  }
+
+  ::v-deep .el-table {
+    background-color: transparent;
+  }
+
+  ::v-deep .el-table .cell{
+    text-align: center;
+  }
+
+  ::v-deep .el-table .el-table__cell{
+    border: none!important;
+  }
+  ::v-deep .el-table::before{
+    display: none;
+  }
+  ::v-deep .el-table .el-table__header-wrapper th{
+    background-color: transparent;
+  }
+  ::v-deep .el-table tr{
+    background-color: transparent;
+  }
+
+  .openTable{
+    padding: 1vh 2vw;
+    background-color: #ffffff;
+    border-radius: 15px;
+    overflow: hidden;
+    width: calc(100% - 40px);
+    margin: 0 auto;
+    .num{
+      color: #3976ff;
+      display: inline-block;
+      background-color: #e2ebff;
+      width: 1.8vw;
+      border-radius: 5px;
+      margin-left: 5px;
+    }
+    .el-col{
+      padding: 10px 0;
+    }
+  }
+
+  .header_main{
+    display: flex;
+    align-items: center;
+    position: relative;
+    .selected{
+      width: 16vw;
+      background-color: #ffffff;
+      position: absolute;
+      top: 4vh;
+      left: 10vw;
+      z-index: 9;
+      border-radius: 8px;
+      box-shadow: 0 10px 10px #dedfe1;
+      padding: 1vh 0;
+      div{
+        display: flex;
+        height: 4vh;
+        p{
+          width: 8vw;
+          line-height: 4vh;
+          text-align: center;
+        }
+      }
+    }
+    .select_address{
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-right: 2vw;
+      background-color: #ffffff;
+      padding: 0px 0px;
+      border-radius: 8px;
+      box-shadow: 0 0 10px #dedfe1;
+      width: 8vw;
+      height: 4vh;
+      overflow: hidden;
+      &:nth-child(2){
+        margin-right: 0vw;
+      }
+      &:nth-child(3){
+        margin-right: 0vw;
+        border-top-left-radius: initial;
+        border-bottom-left-radius: initial;
+      }
+      .sanjiao-right {
+        display: inline-block;
+        border-left: 8px solid #000;
+        border-left-color: initial;
+        border-top: 5px solid transparent;
+        border-bottom: 5px solid transparent;
+        margin-right: 5px;
+      }
+      .select_time{
+        text-align: center;
+        width: 100%;
+        height: 4vh;
+        line-height: 4vh;
+        background-color: #3976ff;
+        color: #ffffff;
+      }
+    }
+    .todo_num{
+      margin-left: auto;
+      span{
+        font-size: 24px;
+        color: #3976ff;
+      }
+    }
+    .todo_num1{
+      margin-left: 2vw;
+      span{
+        font-size: 24px;
+        color: #3976ff;
+      }
+    }
+    .todo_num2{
+      margin-left: 2vw;
+      span{
+        font-size: 24px;
+        color: #ef0027;
+      }
+    }
+  }
+
+  .main{
+    display: flex;
+    .left_main{
+      width: 92%;
+      margin-right: 0.57%;
+      margin-top: 15px;
+      border-radius: 8px;
+      box-shadow: 4px 0px 10px rgba(0, 0, 0, 0.13);
+      background: #fff;
+      padding: 15px 20px;
+      height: calc(100vh - 91px);
+      .backButton{
+        color: #3976ff;
+        border-bottom: 1px solid #3976ff;
+        display: inline-block;
+        padding-bottom: 5px;
+      }
+      .left_main_tt{
+        flex: 1;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        .tt_label{
+          display: flex;
+          align-items: center;
+          p{
+            margin-right: 2vw;
+            &:nth-child(1){
+              color: #ef0027;
+            }
+          }
+        }
+      }
+    }
+
+    .right_main{
+      width: 7.43%;
+      margin-top: 15px;
+      border-radius: 8px;
+      box-shadow: 4px 0px 10px rgba(0, 0, 0, 0.13);
+      background: #fff;
+      padding: 15px 20px;
+      height: calc(100vh - 91px);
+    }
+
+  }
+
+  .sanjiao-top {
+    display: inline-block;
+    border-bottom: 8px solid #414141;
+    border-bottom-color: initial;
+    border-left: 5px solid transparent;
+    border-right: 5px solid transparent;
+  }
+
+  .sanjiao-bottom {
+    display: inline-block;
+    border-top: 8px solid #414141;
+    border-top-color: initial;
+    border-left: 5px solid transparent;
+    border-right: 5px solid transparent;
+  }
+
+  .time_main{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    background-color: #f5f6f8;
+    color: #414141;
+    width: 75%;
+    margin: 0 auto;
+    margin-top: 15px;
+    padding: 15px 0;
+    border-radius: 8px;
+    p{
+      margin: 10px 0;
+    }
+  }
+
+  .month_main{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    color: #414141;
+    p{
+      margin-top: 3vh;
+      position: relative;
+      &.active{
+        color: #3976ff;
+      }
+      i{
+        display: block;
+        width: 5px;
+        height: 5px;
+        background-color: #fc5659;
+        position: absolute;
+        top: -5px;
+        right: -5px;
+        border-radius: 100%;
+      }
+    }
+
+  }
+
+</style>

src/views/taskAllocation/todo.vue

@@ -0,0 +1,353 @@
+<template>
+  <div class="app-container">
+
+    <div class="header_main">
+
+      <div class="select_address">
+        <span class="sanjiao-right"></span>
+        <p>大足区</p>
+      </div>
+
+      <div class="select_address">
+        <span class="sanjiao-right"></span>
+        <p>张家镇</p>
+      </div>
+
+      <div class="select_address">
+        <p class="select_time">2023.03.05</p>
+      </div>
+
+      <div class="selected">
+        <div>
+          <p>张家镇</p>
+          <p>2023.03.05</p>
+        </div>
+        <div>
+          <p>张家镇</p>
+          <p>2023.03.05</p>
+        </div>
+        <div>
+          <p>张家镇</p>
+          <p>2023.03.05</p>
+        </div>
+        <div>
+          <p>张家镇</p>
+          <p>2023.03.05</p>
+        </div>
+      </div>
+
+      <p class="todo_num">待处理合作社：<span>19</span>个</p>
+
+    </div>
+
+    <div class="main">
+
+      <div class="left_main">
+        <el-table :data="tableData" style="width: 100%;" :default-sort = "{prop: 'date', order: 'descending'}">
+          <el-table-column prop="value1" label="村" />
+          <el-table-column prop="value2" label="组织名称" show-overflow-tooltip />
+          <el-table-column prop="value3" label="记账笔数" >
+            <template slot-scope="scope">
+              5 <span class="num">7</span>
+            </template>
+          </el-table-column>
+          <el-table-column prop="value4" label="合同数量" />
+          <el-table-column prop="value5" label="其他" />
+          <el-table-column prop="value6" label="任务总数" />
+          <el-table-column prop="value7" label="下发日期" />
+          <el-table-column prop="value8" label="截止日期" sortable />
+          <el-table-column prop="value9" label="操作">
+            <template slot-scope="scope">
+              <el-button type="primary" size="mini" icon="el-icon-edit"></el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+
+      <div class="right_main">
+        <div class="title">
+          <i></i>
+          <p>任务日期</p>
+        </div>
+
+        <div class="time_main">
+          <span class="sanjiao-top"></span>
+          <p>2023</p>
+          <span class="sanjiao-bottom"></span>
+        </div>
+
+        <div class="month_main">
+          <p v-for="(item,index) in 12" :class="{'active':index==3}">{{index}}月<i v-if="index==3"></i></p>
+        </div>
+
+      </div>
+
+    </div>
+
+
+  </div>
+</template>
+
+<script>
+export default {
+  name: "todo",
+  data() {
+    return {
+      tableData: [{
+        value1: '当当村',
+        value2: '玩玩玩玩玩玩玩玩合作社玩玩玩玩玩玩玩玩合作社',
+        value3: '8',
+        value4: '5',
+        value5: '5',
+        value6: '18',
+        value7: '2023.03.05',
+        value8: '2023.03.06',
+        value9: '111'
+      }, {
+        value1: '当当村',
+        value2: '玩玩玩玩玩玩玩玩合作社',
+        value3: '8',
+        value4: '5',
+        value5: '5',
+        value6: '18',
+        value7: '2023.03.05',
+        value8: '2023.03.06',
+        value9: '111'
+      }, {
+        value1: '当当村',
+        value2: '玩玩玩玩玩玩玩玩合作社',
+        value3: '8',
+        value4: '5',
+        value5: '5',
+        value6: '18',
+        value7: '2023.03.05',
+        value8: '2023.03.06',
+        value9: '111'
+      }, {
+        value1: '当当村',
+        value2: '玩玩玩玩玩玩玩玩合作社',
+        value3: '8',
+        value4: '5',
+        value5: '5',
+        value6: '18',
+        value7: '2023.03.05',
+        value8: '2023.03.06',
+        value9: '111'
+      }]
+    }
+  },
+  created() {
+
+  },
+  methods:{
+
+  },
+  mounted(){
+
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  p{margin: 0;line-height: 1;}
+  .app-container{
+    background-color: #f5f6f8;
+    width: 100vw;
+    height: 100vh;
+  }
+  .title{
+    display: flex;
+    align-items: center;
+    i{
+      display: inline-block;
+      width: 5px;
+      height: 20px;
+      background: #4d7cfe;
+      border-radius: 5px;
+      margin-right: 10px;
+    }
+    p{
+      font-size: 18px;
+    }
+  }
+  .num{
+    color: #3976ff;
+    display: inline-block;
+    background-color: #e2ebff;
+    width: 1.8vw;
+    border-radius: 5px;
+    margin-left: 5px;
+  }
+  ::v-deep .el-table .cell{
+    text-align: center;
+  }
+
+  ::v-deep .el-table .el-table__cell{
+    border: none!important;
+  }
+  ::v-deep .el-table::before{
+    display: none;
+  }
+
+  ::v-deep .el-table .el-table__header-wrapper th{
+    background-color: transparent;
+  }
+  ::v-deep .el-table tr{
+    background-color: transparent;
+  }
+
+  .header_main{
+    display: flex;
+    align-items: center;
+    position: relative;
+    .selected{
+      width: 16vw;
+      background-color: #ffffff;
+      position: absolute;
+      top: 4vh;
+      left: 10vw;
+      z-index: 9;
+      border-radius: 8px;
+      box-shadow: 0 10px 10px #dedfe1;
+      padding: 1vh 0;
+      div{
+        display: flex;
+        height: 4vh;
+        p{
+          width: 8vw;
+          line-height: 4vh;
+          text-align: center;
+        }
+      }
+    }
+    .select_address{
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-right: 2vw;
+      background-color: #ffffff;
+      padding: 0px 0px;
+      border-radius: 8px;
+      box-shadow: 0 0 10px #dedfe1;
+      width: 8vw;
+      height: 4vh;
+      overflow: hidden;
+      &:nth-child(2){
+        margin-right: 0vw;
+        border-top-right-radius: initial;
+        border-bottom-right-radius: initial;
+      }
+      &:nth-child(3){
+        margin-right: 0vw;
+        border-top-left-radius: initial;
+        border-bottom-left-radius: initial;
+      }
+      .sanjiao-right {
+        display: inline-block;
+        border-left: 8px solid #000;
+        border-left-color: initial;
+        border-top: 5px solid transparent;
+        border-bottom: 5px solid transparent;
+        margin-right: 5px;
+      }
+      .select_time{
+        text-align: center;
+        width: 100%;
+        height: 4vh;
+        line-height: 4vh;
+        background-color: #3976ff;
+        color: #ffffff;
+      }
+    }
+    .todo_num{
+      margin-left: auto;
+      span{
+        font-size: 24px;
+        color: #3976ff;
+      }
+    }
+  }
+
+  .main{
+    display: flex;
+    .left_main{
+      width: 92%;
+      margin-right: 0.57%;
+      margin-top: 15px;
+      border-radius: 8px;
+      box-shadow: 4px 0px 10px rgba(0, 0, 0, 0.13);
+      background: #fff;
+      padding: 15px 20px;
+      height: calc(100vh - 91px);
+    }
+
+    .right_main{
+      width: 7.43%;
+      margin-top: 15px;
+      border-radius: 8px;
+      box-shadow: 4px 0px 10px rgba(0, 0, 0, 0.13);
+      background: #fff;
+      padding: 15px 20px;
+      height: calc(100vh - 91px);
+    }
+
+  }
+
+  .sanjiao-top {
+    display: inline-block;
+    border-bottom: 8px solid #414141;
+    border-bottom-color: initial;
+    border-left: 5px solid transparent;
+    border-right: 5px solid transparent;
+  }
+
+  .sanjiao-bottom {
+    display: inline-block;
+    border-top: 8px solid #414141;
+    border-top-color: initial;
+    border-left: 5px solid transparent;
+    border-right: 5px solid transparent;
+  }
+
+  .time_main{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    background-color: #f5f6f8;
+    color: #414141;
+    width: 75%;
+    margin: 0 auto;
+    margin-top: 15px;
+    padding: 15px 0;
+    border-radius: 8px;
+    p{
+      margin: 10px 0;
+    }
+  }
+
+  .month_main{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    color: #414141;
+    p{
+      margin-top: 3vh;
+      position: relative;
+      &.active{
+        color: #3976ff;
+      }
+      i{
+        display: block;
+        width: 5px;
+        height: 5px;
+        background-color: #fc5659;
+        position: absolute;
+        top: -5px;
+        right: -5px;
+        border-radius: 100%;
+      }
+    }
+
+  }
+
+</style>

src/views/toBeAllocated/toBeAllocated.vue

@@ -0,0 +1,522 @@
+<template>
+  <div class="app-container">
+
+    <div class="header_main">
+
+      <div class="select_address">
+        <span class="sanjiao-right"></span>
+        <p>大足区</p>
+      </div>
+
+      <div class="select_address">
+        <span class="sanjiao-right"></span>
+        <p>张家镇</p>
+      </div>
+
+      <div style="display: none" class="selected">
+        <div>
+          <p>张家镇</p>
+          <p>2023.03.05</p>
+        </div>
+        <div>
+          <p>张家镇</p>
+          <p>2023.03.05</p>
+        </div>
+        <div>
+          <p>张家镇</p>
+          <p>2023.03.05</p>
+        </div>
+        <div>
+          <p>张家镇</p>
+          <p>2023.03.05</p>
+        </div>
+      </div>
+
+      <p class="todo_num">已处理村庄：<span>19</span>个</p>
+      <p class="todo_num2">超时完成村庄：<span>1</span>个</p>
+
+    </div>
+
+    <div class="main">
+
+      <div class="left_main">
+        <el-table :data="tableData" style="width: 100%;" :default-sort = "{prop: 'date', order: 'descending'}">
+
+          <el-table-column type="expand">
+            <template slot-scope="props">
+              <div class="openTable">
+                <el-table :data="tableData" style="width: 100%;background-color: transparent;" :default-sort = "{prop: 'date', order: 'descending'}">
+                  <el-table-column prop="value1" label="村" show-overflow-tooltip />
+                  <el-table-column prop="value1" label="合作社" show-overflow-tooltip />
+                  <el-table-column prop="value2" label="记账笔数" show-overflow-tooltip >
+                    <template slot-scope="scope">
+                      5 <span class="num">7</span>
+                    </template>
+                  </el-table-column>
+                  <el-table-column prop="value3" label="合同数量" show-overflow-tooltip />
+                  <el-table-column prop="value4" label="其他" show-overflow-tooltip />
+                  <el-table-column prop="value5" label="任务总数" show-overflow-tooltip />
+                  <el-table-column prop="value9" label="操作">
+                    <template slot-scope="scope">
+                      <div class="setting">
+                        <el-button type="primary" size="mini" icon="el-icon-edit"></el-button>
+                        <img src="../../assets/images/toBeAllocated_icon_delete.png" alt="">
+                        <span class="name">王五</span>
+                      </div>
+                    </template>
+                  </el-table-column>
+                  <el-table-column prop="value7" label="截至日期" show-overflow-tooltip />
+                </el-table>
+              </div>
+            </template>
+          </el-table-column>
+
+          <el-table-column prop="value1" label="镇/街" show-overflow-tooltip />
+          <el-table-column prop="value2" label="村账数量" show-overflow-tooltip />
+          <el-table-column prop="value3" label="合作社数量" show-overflow-tooltip />
+          <el-table-column prop="value4" label="记账笔数" show-overflow-tooltip >
+            <template slot-scope="scope">
+              5 <span class="num">7</span>
+            </template>
+          </el-table-column>
+          <el-table-column prop="value5" label="合同数量" show-overflow-tooltip />
+          <el-table-column prop="value6" label="其他" show-overflow-tooltip />
+          <el-table-column prop="value7" label="任务总数" show-overflow-tooltip />
+          <el-table-column prop="value8" label="操作" show-overflow-tooltip >
+            <template slot-scope="scope">
+              <el-button type="primary" size="mini" icon="el-icon-edit"></el-button>
+            </template>
+          </el-table-column>
+
+        </el-table>
+
+        <img src="../../assets/images/toBeAllocated_icon_none.png" alt="" class="table_none">
+
+      </div>
+
+      <div class="right_main">
+
+        <div class="right_top_main">
+
+          <div class="title">
+            <i></i>
+            <p>任务日期</p>
+          </div>
+
+          <div class="right_top_block">
+            <div class="time_main">
+              <span class="sanjiao-top"></span>
+              <p>2023</p>
+              <span class="sanjiao-bottom"></span>
+            </div>
+
+            <div class="month_main">
+              <p v-for="(item,index) in 12" :class="{'active':index==3}">{{index}}月<i v-if="index==3"></i></p>
+            </div>
+          </div>
+
+        </div>
+
+        <div class="right_bottom_main">
+
+          <div class="title">
+            <i></i>
+            <p>任务看板</p>
+          </div>
+
+          <div class="right_top_block">
+            <el-row>
+              <el-col span="8">姓名</el-col>
+              <el-col span="8" align="center">未完成</el-col>
+              <el-col span="8" align="center">任务期限</el-col>
+            </el-row>
+            <el-row v-for="(item,index) in 10">
+              <el-col span="8">张三</el-col>
+              <el-col span="8">19 <span class="num">1</span><span class="num2">10</span></el-col>
+              <el-col span="8" align="center">
+                <span class="no_yes">未选中</span>
+                <div class="num_input">
+                  <span>-</span>
+                  <p>1</p>
+                  <span>+</span>
+                </div>
+              </el-col>
+            </el-row>
+          </div>
+
+        </div>
+
+
+      </div>
+
+    </div>
+
+
+  </div>
+</template>
+
+<script>
+  export default {
+    name: "processed",
+    data() {
+      return {
+        tableData: [{
+          value1: '当当村',
+          value2: '5',
+          value3: '8',
+          value4: '5',
+          value5: '5',
+          value6: '18',
+          value7: '63',
+          value8: '2023.03.06',
+          value9: '111'
+        }, {
+          value1: '当当村',
+          value2: '5',
+          value3: '8',
+          value4: '5',
+          value5: '5',
+          value6: '18',
+          value7: '63',
+          value8: '2023.03.06',
+          value9: '111'
+        }, {
+          value1: '当当村',
+          value2: '5',
+          value3: '8',
+          value4: '5',
+          value5: '5',
+          value6: '18',
+          value7: '63',
+          value8: '2023.03.06',
+          value9: '111'
+        }, {
+          value1: '当当村',
+          value2: '5',
+          value3: '8',
+          value4: '5',
+          value5: '5',
+          value6: '18',
+          value7: '63',
+          value8: '2023.03.06',
+          value9: '111'
+        }]
+      }
+    },
+    created() {
+
+    },
+    methods:{
+
+    },
+    mounted(){
+
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  p{margin: 0;line-height: 1;}
+  .app-container{
+    background-color: #f5f6f8;
+    width: 100vw;
+    height: 100vh;
+  }
+  .setting{
+    display: flex;
+    align-items: center;
+  }
+  .title{
+    display: flex;
+    align-items: center;
+    i{
+      display: inline-block;
+      width: 5px;
+      height: 20px;
+      background: #4d7cfe;
+      border-radius: 5px;
+      margin-right: 10px;
+    }
+    p{
+      font-size: 18px;
+    }
+  }
+
+  ::v-deep .el-table .cell{
+    text-align: center;
+  }
+
+  ::v-deep .el-table .el-table__cell{
+    border: none!important;
+  }
+  ::v-deep .el-table::before{
+    display: none;
+  }
+  ::v-deep .el-table .el-table__header-wrapper th{
+    background-color: transparent;
+  }
+  ::v-deep .el-table tr{
+    background-color: transparent;
+  }
+
+  .num{
+    color: #3976ff;
+    display: inline-block;
+    background-color: #e2ebff;
+    width: 1.8vw;
+    border-radius: 5px;
+    margin-left: 5px;
+    text-align: center;
+  }
+
+  .num2{
+    color: #ffffff;
+    display: inline-block;
+    background-color: #3976ff;
+    width: 1.8vw;
+    border-radius: 5px;
+    margin-left: 5px;
+    text-align: center;
+  }
+
+  .no_yes{
+    color: #9a9a9a;
+    display: none;
+  }
+
+  .num_input{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    span{
+      background-color: #3976ff;
+      color: #ffffff;
+      width: 25px;
+      height: 25px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: 8px;
+    }
+    p{
+      width: 3vw;
+      border: 1px solid #3976ff;
+      margin: 0 .3vw;
+      color: #3976ff;
+      height: 25px;
+      line-height: 25px;
+      border-radius: 8px;
+    }
+  }
+
+  .table_none{
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%,-50%);
+  }
+
+  .name{
+    color: #666666;
+    display: inline-block;
+    background-color: #e2ebff;
+    width: 3.5vw;
+    border-radius: 5px;
+    margin-left: 5px;
+  }
+  .openTable{
+    background-color: #eef3fd;
+    padding: 0 2.5vw 2vh;
+    ::v-deep .el-table__body{
+      background-color: #ffffff;
+      border-radius: 15px;
+      overflow: hidden;
+    }
+  }
+
+  .header_main{
+    display: flex;
+    align-items: center;
+    position: relative;
+    .selected{
+      width: 16vw;
+      background-color: #ffffff;
+      position: absolute;
+      top: 4vh;
+      left: 10vw;
+      z-index: 9;
+      border-radius: 8px;
+      box-shadow: 0 10px 10px #dedfe1;
+      padding: 1vh 0;
+      div{
+        display: flex;
+        height: 4vh;
+        p{
+          width: 8vw;
+          line-height: 4vh;
+          text-align: center;
+        }
+      }
+    }
+    .select_address{
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-right: 2vw;
+      background-color: #ffffff;
+      padding: 0px 0px;
+      border-radius: 8px;
+      box-shadow: 0 0 10px #dedfe1;
+      width: 8vw;
+      height: 4vh;
+      overflow: hidden;
+      &:nth-child(2){
+        margin-right: 0vw;
+      }
+      &:nth-child(3){
+        margin-right: 0vw;
+        border-top-left-radius: initial;
+        border-bottom-left-radius: initial;
+      }
+      .sanjiao-right {
+        display: inline-block;
+        border-left: 8px solid #000;
+        border-left-color: initial;
+        border-top: 5px solid transparent;
+        border-bottom: 5px solid transparent;
+        margin-right: 5px;
+      }
+      .select_time{
+        text-align: center;
+        width: 100%;
+        height: 4vh;
+        line-height: 4vh;
+        background-color: #3976ff;
+        color: #ffffff;
+      }
+    }
+    .todo_num{
+      margin-left: auto;
+      span{
+        font-size: 24px;
+        color: #3976ff;
+      }
+    }
+    .todo_num2{
+      margin-left: 2vw;
+      span{
+        font-size: 24px;
+        color: #ef0027;
+      }
+    }
+  }
+
+  .main{
+    display: flex;
+    .left_main{
+      width: 72%;
+      margin-right: 0.57%;
+      margin-top: 15px;
+      border-radius: 8px;
+      box-shadow: 4px 0px 10px rgba(0, 0, 0, 0.13);
+      background: #fff;
+      padding: 15px 20px;
+      height: calc(100vh - 91px);
+      position: relative;
+    }
+
+    .right_main{
+      width: 27.43%;
+      .right_top_main{
+        margin-top: 15px;
+        border-radius: 8px;
+        box-shadow: 4px 0px 10px rgba(0, 0, 0, 0.13);
+        background: #fff;
+        padding: 15px 20px;
+        .right_top_block{
+          display: flex;
+          align-items: center;
+        }
+      }
+      .right_bottom_main{
+        margin-top: 15px;
+        border-radius: 8px;
+        box-shadow: 4px 0px 10px rgba(0, 0, 0, 0.13);
+        background: #fff;
+        padding: 15px 20px;
+        .right_top_block{
+          ::v-deep .el-col-8{
+            padding-top: 15px ;
+          }
+        }
+      }
+    }
+
+  }
+
+  .sanjiao-top {
+    display: inline-block;
+    border-bottom: 8px solid #414141;
+    border-bottom-color: initial;
+    border-left: 5px solid transparent;
+    border-right: 5px solid transparent;
+  }
+
+  .sanjiao-bottom {
+    display: inline-block;
+    border-top: 8px solid #414141;
+    border-top-color: initial;
+    border-left: 5px solid transparent;
+    border-right: 5px solid transparent;
+  }
+
+  .time_main{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    background-color: #f5f6f8;
+    color: #414141;
+    width: 15%;
+    margin-top: 15px;
+    padding: 15px 0;
+    border-radius: 8px;
+    height: 82px;
+    p{
+      margin: 10px 0;
+    }
+  }
+
+  .month_main{
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    margin-top: 15px;
+    color: #414141;
+    background-color: #f5f6f8;
+    height: 82px;
+    flex: 1;
+    margin-left: 1vw;
+    border-radius: 8px;
+    p{
+      /*margin-top: 3vh;*/
+      width: 16%;
+      position: relative;
+      text-align: center;
+      &.active{
+        color: #3976ff;
+      }
+      i{
+        display: block;
+        width: 5px;
+        height: 5px;
+        background-color: #fc5659;
+        position: absolute;
+        top: -5px;
+        right: 12px;
+        border-radius: 100%;
+      }
+    }
+
+  }
+
+</style>