From e527deabd5c59427daa1a89e3d63e3661de65bdc Mon Sep 17 00:00:00 2001
From: odjbin <1042039504@qq.com>
Date: Wed, 18 Sep 2024 22:30:39 +0800
Subject: [PATCH 1/2] =?UTF-8?q?fix=20:=20=E9=A6=96=E9=A1=B5=E5=A4=87?=
 =?UTF-8?q?=E4=BB=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/home/index-new.vue | 1452 ++++++++++++++++++++++++++++++++++
 src/views/home/index-old.vue |  537 +++++++++++++
 2 files changed, 1989 insertions(+)
 create mode 100644 src/views/home/index-new.vue
 create mode 100644 src/views/home/index-old.vue

diff --git a/src/views/home/index-new.vue b/src/views/home/index-new.vue
new file mode 100644
index 0000000..54edc64
--- /dev/null
+++ b/src/views/home/index-new.vue
@@ -0,0 +1,1452 @@
+<template>
+  <div class="home-bg" v-if="AuthStore.roles.length">
+    <el-row gutter="10">
+      <el-col :xs="24" :sm="24" :md="24" :lg="18" :xl="18">
+        <div class="top-left">
+          <el-card shadow="never">
+            <div class="notice-title">早上好，小i提醒您<span>有<span>{{ taskTabList[0].num }}</span>个审批待立项</span></div>
+            <el-row class="statistics">
+              <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6" v-for="(item,index) in taskTabList" :key="index">
+                <div class="block" :style="{'background-image':'url('+getImgUrl(item.icon)+')'}"
+                     @click="clickGotoListPage(item)">
+                  <div class="block-right">
+                    <span>{{ item.num }}<span>个</span></span>
+                    <span>{{ item.title }}</span>
+                  </div>
+                </div>
+              </el-col>
+            </el-row>
+          </el-card>
+          <el-card shadow="never" class="todo-bg">
+            <el-tabs v-model="activeName" editable>
+              <template #add-icon>
+                刷新一下
+                <div style="width: 31px"></div>
+              </template>
+              <el-tab-pane :label="'待办（'+todoList.length +'）'" name="first">
+                <div class="todo-top">
+                  <div class="bell">
+                    <el-icon size="20" color="#F55815">
+                      <BellFilled/>
+                    </el-icon>
+                    <span>您有{{ todoList.length }}条待办需要处理</span>
+                  </div>
+                  <div class="todo-more">
+                    <span>查看更多</span>
+                    <el-icon color="#1F63E6" size="18">
+                      <ArrowRight/>
+                    </el-icon>
+                  </div>
+                </div>
+                <div class="todo-content">
+                  <div v-if="todoList&&todoList.length==0">
+                    <el-empty image-size="135" description="暂无已办数据~"/>
+                  </div>
+                  <div v-for="item in todoList" class="todo-border">
+                    <div class="status"
+                         :style="{'background-color': item.status == 0 ? '#F55815' : item.status == 1 ? '#20BDA1' : '#4C52EA'}">
+                      {{ item.status == 0 ? '加急' : item.status == 1 ? '正常' : '逾期' }}
+                    </div>
+                    <div class="process-type">流程类型：{{ item.targetState }}</div>
+                    <div class="black-text">发起人：{{ item.initiatorName }}</div>
+                    <div class="black-text">当前节点：{{ item.taskName }}</div>
+                    <div class="gray-time">
+                      <div>
+                        <div class="title">
+                          <svg-icon name="home-time" :class-name="'home-time'"/>
+                          <span>提交时间：</span>
+                        </div>
+                        <div class="time"> {{ item.submitTime }}</div>
+                      </div>
+                      <div class="view">查看</div>
+                    </div>
+                  </div>
+                </div>
+                <!--                <fvTable ref="tableConfigBacklogRef" class="home-table" :tableConfig="tableConfigBacklog"-->
+                <!--                         :pagination="false"-->
+                <!--                         @getTotal="getTotal">-->
+                <!--                  <template #empty>-->
+                <!--                    <el-empty description="暂无待办"/>-->
+                <!--                  </template>-->
+                <!--                </fvTable>-->
+              </el-tab-pane>
+              <el-tab-pane :label="'已办（' + reportNum + '）'" name="second">
+                <div v-if="doneList&&doneList.length==0">
+                  <el-empty image-size="135" description="暂无已办数据~"/>
+                </div>
+                <div v-for="item in doneList" class="todo-border">
+                  <div class="status"
+                       :style="{'background-color': item.status == 0 ? '#F55815' : item.status == 1 ? '#20BDA1' : '#4C52EA'}">
+                    {{ item.status == 0 ? '加急' : item.status == 1 ? '正常' : '逾期' }}
+                  </div>
+                  <div class="process-type">流程类型：{{ item.targetState }}</div>
+                  <div class="black-text">发起人：{{ item.initiatorName }}</div>
+                  <div class="black-text">当前节点：{{ item.taskName }}</div>
+                  <div class="gray-time">
+                    <div>
+                      <div class="title">
+                        <svg-icon name="home-time" :class-name="'home-time'"/>
+                        <span>提交时间：</span>
+                      </div>
+                      <div class="time"> {{ item.submitTime }}</div>
+                    </div>
+                    <div class="view">查看</div>
+                  </div>
+                </div>
+                <!--                <fvTable ref="tableConfigReportRef" :tableConfig="tableConfigReport" @getTotal="getReportNumTotal">-->
+                <!--                  <template #empty>-->
+                <!--                    <el-empty description="暂无数据"/>-->
+                <!--                  </template>-->
+                <!--                </fvTable>-->
+              </el-tab-pane>
+            </el-tabs>
+          </el-card>
+        </div>
+      </el-col>
+      <el-col :xs="24" :sm="24" :md="24" :lg="6" :xl="6">
+        <div class="right">
+          <div class="right-top ">
+            <div class="title-block">
+              <div class="title">
+                <div class="tag"></div>
+                <span>通知公告</span>
+              </div>
+              <div class="more">
+                <span>更多</span>
+                <el-icon color="#1F63E6" size="18">
+                  <ArrowRight/>
+                </el-icon>
+              </div>
+            </div>
+            <div class="notice-block">
+              <div v-for="(item,index) in noticeList" class="notice">
+                <span>{{ index > 8 ? '' : 0 }}{{ index + 1 }}</span>{{ item.title }}
+              </div>
+            </div>
+          </div>
+        </div>
+      </el-col>
+    </el-row>
+    <el-row gutter="10" style="margin-top: 10px">
+      <el-col :xs="24" :sm="24" :md="12" :lg="6" :xl="6">
+        <div class="right bottom">
+          <div class="right-top ">
+            <div class="title-block">
+              <div class="title">
+                <div class="tag"></div>
+                <span>专项资金项目</span>
+              </div>
+              <div class="more">
+                <span>更多</span>
+                <el-icon color="#1F63E6" size="18">
+                  <ArrowRight/>
+                </el-icon>
+              </div>
+            </div>
+            <div>
+              <div class="container">
+                <div id="fundPie" ref="fundPie"></div>
+              </div>
+            </div>
+            <div class="fund-pie">专项资金项目统计图</div>
+          </div>
+        </div>
+      </el-col>
+      <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
+        <div class="right  bottom">
+          <div class="right-top ">
+            <div class="title-block">
+              <div class="title">
+                <div class="tag"></div>
+                <span>研发投入资金</span>
+              </div>
+              <div class="more">
+                <span>更多</span>
+                <el-icon color="#1F63E6" size="18">
+                  <ArrowRight/>
+                </el-icon>
+              </div>
+            </div>
+            <div class="money-block">
+              <div class="money-container">
+                <div id="moneyPie" ref="moneyPie"></div>
+              </div>
+              <div>
+                <div class="total-money">总资金：{{ toThousands(totalMoney) }}</div>
+                <div v-for="(item,index) in moneyData" class="legend">
+                  <div class="money-dot" :style="{'background-color': colorList[index]}"></div>
+                  <div class="company-name">{{ item.companyName }}</div>
+                  <div>{{ toThousands(item.money) }}</div>
+                </div>
+              </div>
+            </div>
+            <div class="fund-pie" style="text-align: left;margin-left: 60px;margin-top: 10px">研发投入资金统计图</div>
+          </div>
+        </div>
+      </el-col>
+      <el-col :xs="24" :sm="24" :md="24" :lg="10" :xl="10">
+        <el-card shadow="never" class="todo-bg">
+          <el-tabs v-model="docActiveTab" editable>
+            <template #add-icon>
+              更多
+              <el-icon color="#1F63E6" size="18">
+                <ArrowRight/>
+              </el-icon>
+              <div style="width: 15px"></div>
+            </template>
+            <el-tab-pane label="规章制度" name="first">
+              <div class="notice-block rules-block">
+                <div v-for="(item,index) in rulesList" class="notice">
+                  <div>
+                    <span>{{ index > 8 ? '' : 0 }}{{ index + 1 }}</span>{{ item.title }}
+                  </div>
+                  <div>2018-05-06</div>
+                </div>
+              </div>
+            </el-tab-pane>
+            <el-tab-pane label="帮助文档" name="second">
+              <div class="notice-block rules-block">
+                <div v-if="helpDocList&&helpDocList.length==0">
+                  <el-empty image-size="135" description="暂无帮助文档~"/>
+                </div>
+                <div v-for="(item,index) in helpDocList" class="notice">
+                  <div>
+                    <span>{{ index > 8 ? '' : 0 }}{{ index + 1 }}</span>{{ item.title }}
+                  </div>
+                  <div>2018-05-06</div>
+                </div>
+              </div>
+            </el-tab-pane>
+            <el-tab-pane label="常见问题" name="third">
+              <div class="notice-block rules-block">
+                <div v-for="(item,index) in problemList" class="notice">
+                  <div>
+                    <span>{{ index > 8 ? '' : 0 }}{{ index + 1 }}</span>{{ item.title }}
+                  </div>
+                  <!--                  <span class="dot" v-if="item.isRead"></span>-->
+                  <div>2018-05-06</div>
+                </div>
+              </div>
+            </el-tab-pane>
+          </el-tabs>
+        </el-card>
+      </el-col>
+    </el-row>
+  </div>
+  <div v-else style="display: flex; justify-content: center; align-items: center; height: 100%;">
+    您没有任何角色， 请联系管理员！
+  </div>
+</template>
+
+<script setup lang="jsx">
+import 'element-plus/theme-chalk/display.css'
+import {useAuthStore} from '@/stores/userstore.js'
+import * as echarts from 'echarts'
+import {toThousands} from "@/utils/changePrice.js";
+
+const AuthStore = useAuthStore()
+const router = useRouter()
+const activeName = ref('first')
+const docActiveTab = ref('first')
+const totalMoney = ref('45000')
+const tableConfigBacklogRef = ref()
+const tableConfigReportRef = ref()
+const moneyData = ref([
+  {
+    companyName: '智汇未来科技公司',
+    money: '30000',
+  },
+  {
+    companyName: '云航信息技术公司',
+    money: '10000',
+  },
+  {
+    companyName: '融智投资管理公司',
+    money: '5000',
+  },
+])
+const taskTabList = ref([
+  {
+    title: '待立项',
+    color: '#CEE8FA',
+    textColor: '#0043C5',
+    icon: 'home1.png',
+    num: 21,
+    type: 'pending'
+  },
+  {
+    title: '已立项',
+    color: '#DCCEFA',
+    textColor: '#8600C5',
+    icon: 'home2.png',
+    num: 2,
+    type: 'approved'
+  },
+  {
+    title: '实施中',
+    color: '#FAE6CE',
+    textColor: '#F47D0E',
+    icon: 'home3.png',
+    num: 4,
+    type: 'carryout'
+  },
+  {
+    title: '已验收',
+    color: '#CEFAD8',
+    textColor: '#01A089',
+    icon: 'home4.png',
+    num: 1,
+    type: 'check'
+  }
+])
+const todoList = ref([
+  {
+    status: 0,
+    targetState: '项目归档',
+    initiatorName: '胡晓',
+    taskName: '审批人',
+    submitTime: '2024-08-07 19:00:01',
+  },
+  {
+    status: 1,
+    targetState: '项目归档',
+    initiatorName: '胡晓',
+    taskName: '审批人',
+    submitTime: '2024-08-07 19:00:01',
+  },
+  {
+    status: 2,
+    targetState: '项目归档',
+    initiatorName: '胡晓',
+    taskName: '审批人',
+    submitTime: '2024-08-07 19:00:01',
+  },
+  {
+    status: 0,
+    targetState: '项目归档',
+    initiatorName: '胡晓',
+    taskName: '审批人',
+    submitTime: '2024-08-07 19:00:01',
+  },
+  {
+    status: 1,
+    targetState: '项目归档',
+    initiatorName: '胡晓',
+    taskName: '审批人',
+    submitTime: '2024-08-07 19:00:01',
+  },
+  {
+    status: 2,
+    targetState: '项目归档',
+    initiatorName: '胡晓',
+    taskName: '审批人',
+    submitTime: '2024-08-07 19:00:01',
+  },
+])
+const noticeList = ref([
+  {
+    title: '系统升级通知，升级通知，期间部分服务将暂升级通知，期间部分服务将暂升级通知，期间部分服务将暂将暂停'
+  },
+  {
+    title: '系统升级通知，期间部分服务将暂停'
+  },
+  {
+    title: '系统升级通知，期间部分服务将暂停'
+  },
+  {
+    title: '系统升级通知，期间部分服务将暂停'
+  },
+  {
+    title: '系统升级通知，期间部分服务将暂停'
+  },
+  {
+    title: '系统升级通知，期间部分服务将暂停'
+  },
+  {
+    title: '系统升级通知，期间部分服务将暂停'
+  },
+  {
+    title: '系统升级通知，期间部分服务将暂停'
+  },
+  {
+    title: '系统升级通知，期间部分服务将暂停'
+  },
+  {
+    title: '系统升级通知，期间部分服务将暂停'
+  },
+  {
+    title: '系统升级通知，期间部分服务将暂停'
+  },
+  {
+    title: '系统升级通知，期间部分服务将暂停'
+  },
+  {
+    title: '系统升级通知，期间部分服务将暂停'
+  }
+])
+const rulesList = ref([
+  {
+    title: '系统升级通知，升级通知，期间部分服务将暂升级通知，期间部分服务将暂升级通知，期间部分服务将暂将暂停',
+    isRead: true
+  },
+  {
+    title: '系统升级通知，期间部分服务将暂停',
+    isRead: false
+  },
+  {
+    title: '系统升级通知，期间部分服务将暂停',
+    isRead: true
+  },
+  {
+    title: '系统升级通知，期间部分服务将暂停',
+    isRead: false
+  },
+  {
+    title: '系统升级通知，期间部分服务将暂停',
+    isRead: false
+  },
+  {
+    title: '系统升级通知，期间部分服务将暂停',
+    isRead: true
+  },
+  {
+    title: '系统升级通知，期间部分服务将暂停',
+    isRead: false
+  },
+  {
+    title: '系统升级通知，期间部分服务将暂停',
+    isRead: false
+  },
+  {
+    title: '系统升级通知，期间部分服务将暂停',
+    isRead: false
+  }
+])
+const helpDocList = ref([])
+const problemList = ref([
+  {
+    title: '常见问题',
+    isRead: true
+  },
+  {
+    title: '系统升级通知，期间部分服务将暂停',
+    isRead: false
+  },
+  {
+    title: '系统升级通知，期间部分服务将暂停',
+    isRead: true
+  }
+
+])
+const doneList = ref([])
+const todoNum = ref(0)
+const reportNum = ref(0)
+const auths = {
+  edit: ['mosr:requirement:resubmit'],
+  detail: ['mosr:requirement:info'],
+  add: ['mosr:requirement:add'],
+  del: ['mosr:requirement:del'],
+  report: ['mosr:collect:reported'],
+}
+const tableConfigBacklog = reactive({
+  columns: [
+    {
+      prop: 'index',
+      type: 'index',
+      label: '序号',
+      align: 'center',
+      width: 85,
+      index: index => {
+        return (tableConfigBacklogRef.value.getQuery().pageNum - 1) * tableConfigBacklogRef.value.getQuery().pageSize + index + 1
+      }
+    },
+    {
+      prop: 'targetName',
+      label: '流程名称',
+      align: 'center',
+    },
+    {
+      prop: 'initiatorName',
+      label: '发起人',
+      align: 'center',
+    },
+    {
+      prop: 'targetState',
+      label: '流程类型',
+      align: 'center',
+      showOverflowTooltip: false,
+      currentRender: ({row, index}) => {
+        if (row.targetState !== null || row.targetState !== undefined) {
+          return (<Tag dictType={'todo_type'} value={row.targetState}/>)
+        } else {
+          return '--'
+        }
+      }
+    },
+    {
+      prop: 'submitTime',
+      label: '提交时间',
+      align: 'center',
+    },
+    {
+      prop: 'taskName',
+      label: '当前节点',
+      align: 'center',
+    },
+    {
+      prop: 'oper',
+      label: '操作',
+      fixed: 'right',
+      width: '150',
+      align: 'center',
+      showOverflowTooltip: false,
+      currentRender: ({row, index}) => {
+        return (
+            <div>
+              <el-button type="primary" link onClick={() => handleView(row)}>查看</el-button>
+            </div>
+        )
+      }
+    }
+  ],
+  api: '/workflow/mosr/process/task',
+  params: {},
+})
+const tableConfigReport = reactive({
+  columns: [
+    // {
+    //   type: 'selection',
+    //   prop: 'selection'
+    // },
+    {
+      prop: 'index',
+      type: 'index',
+      label: '序号',
+      align: 'center',
+      width: 85,
+      index: index => {
+        return (tableConfigReportRef.value.getQuery().pageNum - 1) * tableConfigReportRef.value.getQuery().pageSize + index + 1
+      }
+    },
+    {
+      prop: 'requirementName',
+      label: '征集名称',
+      align: 'center'
+    },
+    {
+      prop: 'collectType',
+      label: '征集类型',
+      align: 'center'
+    },
+    {
+      prop: 'companyName',
+      label: '征集公司',
+      align: 'center',
+      // currentRender: ({row, index}) => (
+      // <div style={{width: '300px', textOverflow: 'ellipsis',textAlign:'center'}}>{row.companyName}</div>)
+    },
+    // {
+    //   prop: 'approveName',
+    //   label: '审批人',
+    //   align: 'center'
+    // },
+    {
+      prop: 'deadline',
+      label: '截止时间',
+      align: 'center'
+    },
+    // {
+    //   prop: 'taskNode',
+    //   label: '当前节点',
+    //   align: 'center'
+    // },
+    {
+      prop: 'state',
+      label: '状态',
+      align: 'center',
+      width: 200,
+      showOverflowTooltip: false,
+      currentRender: ({row, index}) => (<Tag dictType={'demand_collection'} value={row.state}/>)
+    },
+    {
+      prop: 'oper',
+      label: '操作',
+      align: 'center',
+      fixed: 'right',
+      showOverflowTooltip: false,
+      currentRender: ({row, index}) => {
+        let btn = []
+        let buttons = new Set(Array.from(row.buttons))
+        if (buttons.has("details")) {
+          btn.push({label: '详情', prem: auths.detail, func: () => handleDetail(row), type: 'primary'})
+        }
+        if (buttons.has("report")) {
+          btn.push({label: '需求上报', prem: auths.report, func: () => handleReport(row), type: 'primary'})
+        }
+        return (
+            <div style={{width: '100%'}}>
+              {
+                btn.map(item => (
+                    <el-button
+                        type={item.type}
+                        v-perm={item.prem}
+                        onClick={() => item.func()}
+                        link
+                    >
+                      {item.label}
+                    </el-button>
+                ))
+              }
+            </div>
+        )
+      }
+    }
+  ],
+  api: '/workflow/mosr/requirement',
+  params: {
+    state: "4"
+  }
+})
+
+const data = reactive({
+  fundPieCharts: null,
+  moneyPieCharts: null,
+})
+const colorList = ref(['#5c60ca', '#a159da', '#4bd566'])
+const fundPieOption = ref({
+  tooltip: {
+    trigger: 'item'
+  },
+  legend: {
+    top: 'top',
+    orient: 'vertical',
+    left: '0',
+    bottom: '20',
+    align: 'left',
+    icon: 'circle',
+    textStyle: {
+      color: 'rgba(0,0,0,0.6)',
+      fontSize: '14px'
+    },
+    formatter: function (name) {
+      let data = fundPieOption.value.series[0].data
+      let total = 0
+      let tarValue
+      for (let i = 0; i < data.length; i++) {
+        total += data[i].value
+        if (data[i].name == name) {
+          tarValue = data[i].value
+        }
+      }
+      let v = tarValue
+      let p = ((tarValue / total) * 100).toFixed(2)
+      return `${name}     ${v}     ${p}%`
+    },
+  },
+  graphic: {       //图形中间图片
+    elements: [{
+      type: 'image',
+      style: {
+        image: "people.png",//你的图片地址
+        width: 70,
+        height: 70
+      },
+      left: 'center',
+      right: 'center',
+      top: '42%',
+    }]
+  },
+  series: [
+    {
+      type: 'pie',
+      radius: [75, 100],
+      center: ['50%', '50%'],
+      top: '10%',
+      left:'8',
+      label: {
+        show: false,
+      },
+      itemStyle: {
+        normal: {
+          borderWidth: 10,//设置边框粗细
+          borderColor: '#fff',
+          color: function (params) {
+            const colorList = [
+              ['#6101ff', '#a965ff'],
+              ['#5cdcd3', '#5cdcd3'],
+            ];
+            const index = params.dataIndex;
+            return new echarts.graphic.LinearGradient(0, 0, 1, 1,
+                [{
+                  offset: 0,
+                  color: colorList[index][0]
+                },
+                  {
+                    offset: 1,
+                    color: colorList[index][1]
+                  }
+                ]);
+          }
+        }
+      },
+      data: [
+        {value: 75, name: '专项资金',},
+        {value: 20, name: '非专项资金', selected: true},
+      ],
+    },
+    {
+      name: '',
+      type: 'pie',
+      top: '10%',
+      left:'8',
+      clockWise: false,
+      hoverAnimation: false,
+      radius: ['80%', '80%'],//边框大小
+      center: ['50%', '50%'],//边框位置
+      tooltip: {
+        show: false
+      },
+      label: {
+        show: false
+      },
+      emphasis: {
+        show: false
+      },
+      data: [{
+        value: 0,
+        itemStyle: {
+          normal: {
+            borderWidth: 1,//设置边框粗细
+            borderColor: 'rgba(0,0,0,0.1)'//边框颜色
+          }
+        }
+      }]
+    }
+  ]
+})
+const moneyPieOption = ref({
+  tooltip: {
+    show:false,
+    trigger: 'item'
+  },
+  color: colorList,
+  series: [
+    {
+      type: 'pie',
+      radius: [0, 100],
+      center: ['50%', '50%'],
+      label: {
+        normal: {
+          show: true,
+          position: 'inner',
+          formatter: function (data) {
+            return toThousands(data.value)
+          }
+        },
+      },
+      itemStyle: {
+        borderWidth: 10,//设置边框粗细
+        borderColor: '#fff'
+      },
+      data: [
+        {value: 30000, name: '智汇未来科技公司',},
+        {value: 10000, name: '云航信息技术公司'},
+        {value: 5000, name: '融智投资管理公司'},
+      ],
+    },
+  ]
+})
+const init = () => {
+  data.fundPieCharts = echarts.init(document.getElementById('fundPie')).setOption(fundPieOption.value)
+  data.moneyPieCharts = echarts.init(document.getElementById('moneyPie')).setOption(moneyPieOption.value)
+}
+
+onMounted(() => {
+  init()
+})
+
+window.addEventListener('resize', () => {
+  data.fundPieCharts = null
+  data.moneyPieCharts = null
+  init()
+})
+
+const clickGotoListPage = (item) => {
+  console.info("🚀 ~method:clickGotoListPage -----", item.type)
+  if (item.type === 'pending') {
+    router.push({
+      name: 'Initiation',
+      query: {
+        state: 0
+      }
+    })
+  } else if (item.type === 'approved') {
+    router.push({
+      name: 'Initiation',
+      query: {
+        state: 4
+      }
+    })
+  } else if (item.type === 'carryout') {
+    router.push({
+      name: 'Implementation',
+      query: {
+        state: 0
+      }
+    })
+  } else if (item.type === 'check') {
+    router.push({
+      name: 'Implementation',
+      query: {
+        state: 4
+      }
+    })
+  }
+}
+
+const getImgUrl = (name) => {
+  return new URL('/' + name, import.meta.url).href
+}
+
+const handleDetail = (row) => {
+  router.push({
+    name: 'Requirement/detail',
+    query: {
+      id: row.requirementId
+    }
+  })
+}
+const handleReport = (row) => {
+  router.push({
+    name: 'Summary/add',
+    query: {
+      id: row.requirementId
+    }
+  })
+}
+const getTotal = (val) => {
+  todoNum.value = val
+}
+const getReportNumTotal = (val) => {
+  reportNum.value = val
+}
+const handleView = (row) => {
+  if (row.targetState == '00' && row.targetId) {
+    router.push({
+      name: 'Requirement/detail',
+      query: {
+        id: row.targetId,
+        source: 'home'
+      }
+    })
+  } else if (row.targetState == '10' && row.targetId) {
+    router.push({
+      name: 'Summary/detail',
+      query: {
+        projectId: row.targetId,
+        state: row.state,
+        source: 'home'
+      }
+    })
+  } else if (row.targetState == '20' || row.targetState == '40' || row.targetState == '50') {
+    router.push({
+      name: 'Implementation/detail',
+      query: {
+        projectId: row.targetId,
+        state: row.state,
+        step: row.targetState,
+        source: 'home'
+      }
+    })
+  } else if (row.targetState == '70' && row.targetId) {
+    router.push({
+      name: 'Fund/detail',
+      query: {
+        id: row.targetId,
+        state: row.state,
+        source: 'home'
+      }
+    })
+  } else if (row.targetState == '80' && row.targetId) {
+    router.push({
+      name: 'Share/detail',
+      query: {
+        id: row.targetId,
+        state: row.state,
+        source: 'home'
+      }
+    })
+  } else if (row.targetState == '90' && row.targetId) {
+    router.push({
+      name: 'Phase/detail',
+      query: {
+        projectId: row.targetId,
+        source: 'home'
+      }
+    })
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+@media only screen and (max-width: 767px) {
+  .right {
+    margin-top: 10px;
+  }
+  :deep(.el-table) {
+    height: 300px !important;
+  }
+  .todo-bg {
+    margin-top: 10px;
+  }
+}
+
+@media only screen and (max-width: 1000px) {
+  .right {
+    margin-top: 10px;
+  }
+  :deep(.el-table) {
+    height: 300px !important;
+  }
+  .todo-bg {
+    margin-top: 10px;
+  }
+
+}
+
+@media only screen and (max-width: 1200px) {
+  .right {
+    margin-top: 10px;
+  }
+  :deep(.el-table) {
+    height: 300px !important;
+  }
+  .todo-bg {
+    margin-top: 10px;
+  }
+
+}
+* {
+  font-family: Source Sans Pro, Source Sans Pro;
+}
+
+.money-block {
+  display: flex;
+  align-items: center;
+
+  .total-money {
+    height: 25px;
+    font-weight: 400;
+    font-size: 16px;
+    color: #000000;
+    line-height: 18px;
+  }
+
+  .legend {
+    margin-top: 14px;
+    display: flex;
+    align-items: center;
+
+    > div:last-child {
+      font-weight: 400;
+      font-size: 16px;
+      color: #000000;
+      letter-spacing: 1px;
+    }
+
+    .company-name {
+      font-size: 14px;
+      color: rgba(0, 0, 0, 0.6);
+      letter-spacing: 1px;
+      margin-left: 10px;
+      margin-right: 30px;
+      white-space: nowrap;
+    }
+
+    .money-dot {
+      width: 16px;
+      height: 16px;
+      border-radius: 50%;
+    }
+  }
+}
+
+.money-container {
+  //height: calc((100vh / 2) - 200px);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-top: 49px;
+  width: 250px;
+
+  > div {
+    height: 250px;
+    flex: 1;
+  }
+}
+
+.container {
+  //height: calc((100vh / 2) - 200px);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-top: 10px;
+
+  > div {
+    height: 300px;
+    flex: 1;
+  }
+}
+
+:deep(.el-card__body) {
+  padding: 0 5px !important;
+}
+
+:deep(.el-tabs__nav-wrap:after) {
+  background-color: #D9D9D9 !important;
+  height: 1px !important;
+}
+
+:deep(.el-tabs__active-bar) {
+  height: 1px !important;
+  //background-color: #1476E3 !important;
+}
+
+:deep(.el-tabs__new-tab ) {
+  width: auto !important;
+  border: none !important;
+  color: #1476E3;
+  font-size: 14px;
+  line-height: 51px!important;
+  height: 51px!important;
+  margin: 0 0 0 -93px !important;
+  z-index: 99;
+  position: relative;
+  &:hover{
+    text-decoration: underline;
+  }
+}
+
+:deep(.el-card) {
+  border-radius: 10px !important;
+}
+
+:deep(.is-icon-close) {
+  display: none;
+}
+
+:deep(.el-tabs__nav-scroll) {
+  .el-tabs__nav {
+    .el-tabs__item {
+      flex: 1;
+      font-size: 16px;
+      width: 120px;
+      font-weight: 600;
+      height: 51px;
+      color: rgba(0, 0, 0, 0.5);
+    }
+
+    .el-tabs__item.is-active {
+      color: #1476E3;
+    }
+  }
+}
+
+
+.home-bg {
+  height: calc(100vh - 130px);
+  max-height: calc(100vh - 96px);
+  background-color: #EFEFEF;
+  position: absolute;
+  left: 18px;
+  right: 0;
+  overflow-x: hidden;
+  overflow-y: auto;
+
+  .todo-more {
+    display: flex;
+    align-items: center;
+    color: #1476E3;
+    cursor: pointer;
+    margin-right: 10px;
+    line-height: 20px;
+
+    &:hover {
+      text-decoration: underline;
+    }
+
+    > span {
+      margin-left: 10px;
+      margin-right: 3px;
+    }
+  }
+
+  &::-webkit-scrollbar {
+    width: 6px;
+  }
+
+  // 滚动条轨道
+  &::-webkit-scrollbar-track {
+    background: rgb(239, 239, 239);
+    border-radius: 2px;
+  }
+
+  // 小滑块
+  &::-webkit-scrollbar-thumb {
+    background: rgba(80, 81, 82, 0.29);
+    border-radius: 10px;
+  }
+
+  .top-left {
+    //flex: 0.8;
+    .notice-title{
+      margin-top: 10px;margin-left: 14px;color: #000000;letter-spacing: 1px;font-size: 16px;
+      >span{
+        color: #F40E0E;
+        >span{
+          font-weight: bold;
+        }
+      }
+    }
+    .todo-bg {
+      margin-top: 10px;
+
+      .todo-content {
+        overflow-x: auto;
+        margin: 0 12px 0 19px;
+        padding: 0 0 10px 0;
+        display: flex;
+        align-items: center;
+        justify-content: flex-start;
+
+        &::-webkit-scrollbar {
+          width: 6px;
+          height: 6px;
+        }
+
+        // 滚动条轨道
+        &::-webkit-scrollbar-track {
+          background: rgb(239, 239, 239);
+          border-radius: 2px;
+        }
+
+        // 小滑块
+        &::-webkit-scrollbar-thumb {
+          background: rgba(80, 81, 82, 0.29);
+          border-radius: 10px;
+        }
+
+        .todo-border {
+          padding: 13px;
+          width: 180px;
+          background: rgba(73, 171, 239, 0.05);
+          border-radius: 8px 8px 8px 8px;
+          border: 1px solid #D0D0E3;
+          margin-right: 23px;
+          font-size: 14px;
+
+          &:last-child {
+            margin-right: 0;
+          }
+
+          &:hover {
+            border: 1px solid #F55815;
+          }
+
+          .gray-time {
+            display: flex;
+            align-items: flex-end;
+            font-weight: 400;
+            color: rgba(0, 0, 0, 0.5);
+            letter-spacing: 1px;
+            font-size: 14px;
+
+            .view {
+              float: right;
+              color: #1F63E6;
+              white-space: nowrap;
+              cursor: pointer;
+
+              &:hover {
+                text-decoration: underline;
+              }
+            }
+
+            > div:first-child {
+              display: flex;
+              flex-direction: column;
+
+              .title {
+                display: flex;
+              }
+            }
+
+            .time {
+              margin-left: 23px;
+            }
+          }
+
+          .black-text {
+            white-space: nowrap;
+            color: #000000;
+            margin-bottom: 7px;
+          }
+
+          .process-type {
+            white-space: nowrap;
+            margin-top: 13px;
+            margin-bottom: 7px;
+            color: #1F63E6;
+            letter-spacing: 1px;
+          }
+
+          .status {
+            width: 52px;
+            height: 23px;
+            border-radius: 3px 3px 3px 3px;
+            font-size: 13px;
+            color: #FFFFFF;
+            line-height: 23px;
+            letter-spacing: 1px;
+            text-align: center;
+          }
+        }
+      }
+
+      .todo-top {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        font-size: 14px;
+        margin-bottom: 12px;
+        margin-left: 20px;
+
+
+        .bell {
+          display: flex;
+          align-items: center;
+          color: #F55815;
+          font-size: 15px;
+
+          > span {
+            margin-left: 10px;
+            letter-spacing: 1px;
+          }
+        }
+      }
+    }
+
+    .statistics {
+      .block {
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        height: 170px;
+        background-size: 100% 100%;
+        background-repeat: no-repeat;
+
+        .block-right {
+          margin-left: 15%;
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+          color: #fff;
+          font-size: 16px;
+
+          > span:first-child {
+            white-space: nowrap;
+            font-size: 26px;
+            font-weight: bold;
+            margin-bottom: 10px;
+
+            > span {
+              margin-left: 10px;
+              font-size: 16px;
+            }
+          }
+
+          > span:last-child {
+            white-space: nowrap;
+            color: #fff;
+            margin-bottom: 10px;
+          }
+        }
+      }
+    }
+  }
+
+  .bottom {
+
+    .right-top {
+      height: 410px !important;
+    }
+  }
+
+  .rules-block {
+    height: 343px !important;
+    margin-top: 0!important;
+
+    .notice {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      height: 42px !important;
+      line-height: 42px !important;
+      color: rgba(0, 0, 0, 0.5) !important;
+
+      .dot {
+        display: inline-block;
+        width: 6px;
+        height: 6px;
+        border-radius: 25px;
+        background: #DD3B3B;
+        margin-left: -6px;
+        margin-bottom: 5px;
+        margin-right: 4px;
+      }
+
+      div:first-child {
+        width: 80% !important;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        overflow: hidden;
+
+        > span:first-child {
+          margin-right: 10px;
+          color: #1476E3;
+          font-weight: bold;
+          font-size: 16px;
+          margin-left: 0 !important;
+        }
+      }
+
+      div:last-child {
+        font-weight: 400;
+        letter-spacing: 1px;
+        color: rgba(0, 0, 0, 0.5)
+      }
+    }
+  }
+
+  .notice-block {
+    height: 452px;
+    overflow-y: auto;
+    margin-top: 10px;
+
+    &::-webkit-scrollbar {
+      width: 6px;
+      height: 6px;
+    }
+
+    // 滚动条轨道
+    &::-webkit-scrollbar-track {
+      background: rgb(239, 239, 239);
+      border-radius: 2px;
+    }
+
+    // 小滑块
+    &::-webkit-scrollbar-thumb {
+      background: rgba(80, 81, 82, 0.29);
+      border-radius: 10px;
+    }
+
+    .notice {
+      min-width: 300px;
+      height: 65px;
+      line-height: 65px;
+      padding: 0 15px;
+      font-size: 15px;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+
+      > span:first-child {
+        margin-right: 10px;
+        margin-left: 10px;
+        color: #1476E3;
+        font-weight: bold;
+        font-size: 16px;
+      }
+
+      &:hover {
+        color: #1476E3;
+        background: #F6FBFE;
+      }
+    }
+  }
+
+  .right {
+    height: 100%;
+    //height: calc(100vh - 130px);
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+
+    .right-top {
+      height: 100%;
+      //height: 473px;
+      //flex: 0.61;
+      overflow: hidden;
+      border-radius: 10px;
+      background-color: #ffffff;
+
+      .fund-pie {
+        width: 100%;
+        height: 25px;
+        font-size: 14px;
+        color: rgba(0, 0, 0, 0.5);
+        text-align: center;
+        //margin-top: 15px;
+      }
+
+      .title-block {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 15px;
+        border-bottom: 2px solid #D9D9D9;
+
+        .title {
+          display: flex;
+          align-items: center;
+
+          .tag {
+            width: 7px;
+            height: 18px;
+            background: linear-gradient(#1476E3 0%, #99C9FF 100%);
+            margin-right: 5px;
+            border-radius: 2px;
+            margin-top: 2px;
+          }
+
+          > span {
+            white-space: nowrap;
+            color: #000000;
+            font-weight: 600;
+          }
+        }
+
+        .more {
+          display: flex;
+          align-items: center;
+          white-space: nowrap;
+          color: #1476E3;
+          font-size: 14px;
+          cursor: pointer;
+
+          line-height: 20px;
+
+          &:hover {
+            text-decoration: underline;
+
+          }
+        }
+
+      }
+
+    }
+  }
+}
+
+</style>
diff --git a/src/views/home/index-old.vue b/src/views/home/index-old.vue
new file mode 100644
index 0000000..f84aff1
--- /dev/null
+++ b/src/views/home/index-old.vue
@@ -0,0 +1,537 @@
+<template>
+  <div class="home-bg" v-if="AuthStore.roles.length">
+    <el-row gutter="20">
+      <el-col :xs="24" :sm="24" :md="18" :lg="18" :xl="18">
+        <div class="left">
+          <h3>我的科创工作</h3>
+          <el-row :gutter="20" class="statistics">
+            <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6" v-for="(item,index) in list" :key="index">
+              <div class="block" :style="{background: item.color}">
+                <svg-icon :name="item.icon" :class-name="'home-icon'"/>
+                <div class="block-right">
+                  <span>{{ item.title }}</span>
+                  <span :style="{color: item.textColor}">{{ item.num }}<span>个</span></span>
+                </div>
+              </div>
+            </el-col>
+          </el-row>
+          <el-tabs v-model="activeName" class="demo-tabs">
+            <el-tab-pane :label="'待办（'+todoNum +'）'" name="first" v-loading="loading">
+              <fvTable ref="tableConfigBacklogRef" class="home-table" :tableConfig="tableConfigBacklog" @getTotal="getTotal">
+                <template #empty>
+                  <el-empty description="暂无待办"/>
+                </template>
+              </fvTable>
+            </el-tab-pane>
+            <el-tab-pane :label="'待上报（' + reportNum + '）'" name="second">
+              <fvTable ref="tableConfigReportRef" :tableConfig="tableConfigReport" @getTotal="getReportNumTotal">
+                <template #empty>
+                  <el-empty description="暂无数据"/>
+                </template>
+              </fvTable>
+            </el-tab-pane>
+          </el-tabs>
+        </div>
+      </el-col>
+      <el-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6">
+        <div class="right">
+          <div class="right-top ">
+            <div>
+              <h3>帮助文档</h3>
+              <span>查看更多</span>
+            </div>
+            <el-divider/>
+            <div v-for="item in helpDocList" class="help">
+              {{ item.title }}
+            </div>
+          </div>
+          <div class="right-top">
+            <div>
+              <h3>工具下载</h3>
+              <span>常用网站</span>
+            </div>
+            <el-divider/>
+          </div>
+        </div>
+      </el-col>
+    </el-row>
+  </div>
+  <div v-else style="display: flex; justify-content: center; align-items: center; height: 100%;">
+    您没有任何角色， 请联系管理员！
+  </div>
+</template>
+
+<script setup lang="jsx">
+import 'element-plus/theme-chalk/display.css'
+import {useAuthStore} from '@/stores/userstore.js'
+
+const AuthStore = useAuthStore()
+const router = useRouter()
+const activeName = ref('first')
+const tableConfigBacklogRef=ref()
+const tableConfigReportRef=ref()
+const list = ref([
+  {
+    title: '待立项',
+    color: '#CEE8FA',
+    textColor: '#0043C5',
+    icon: 'home1',
+    num: 21
+  },
+  {
+    title: '待评审',
+    color: '#DCCEFA',
+    textColor: '#8600C5',
+    icon: 'home2',
+    num: 2
+  },
+  {
+    title: '待验收',
+    color: '#FAE6CE',
+    textColor: '#F47D0E',
+    icon: 'home3',
+    num: 4
+  },
+  {
+    title: '待归档',
+    color: '#CEFAD8',
+    textColor: '#01A089',
+    icon: 'home4',
+    num: 1
+  }
+])
+const helpDocList = ref([
+  {
+    title: '业务流程'
+  },
+  {
+    title: '业务流程'
+  },
+  {
+    title: '业务流程'
+  },
+  {
+    title: '业务流程'
+  }
+])
+const todoNum = ref(0)
+const reportNum = ref(0)
+const auths = {
+  edit: ['mosr:requirement:resubmit'],
+  detail: ['mosr:requirement:info'],
+  add: ['mosr:requirement:add'],
+  del: ['mosr:requirement:del'],
+  report: ['mosr:collect:reported'],
+}
+const tableConfigBacklog = reactive({
+  columns: [
+    {
+      prop: 'index',
+      type: 'index',
+      label: '序号',
+      align: 'center',
+      width:85,
+      index: index => {
+        return (tableConfigBacklogRef.value.getQuery().pageNum - 1) * tableConfigBacklogRef.value.getQuery().pageSize + index + 1
+      }
+    },
+    {
+      prop: 'targetName',
+      label: '流程名称',
+      align: 'center',
+    },
+    {
+      prop: 'initiatorName',
+      label: '发起人',
+      align: 'center',
+    },
+    {
+      prop: 'targetState',
+      label: '流程类型',
+      align: 'center',
+      showOverflowTooltip: false,
+      currentRender: ({row, index}) => {
+        if (row.targetState !== null || row.targetState !== undefined) {
+          return (<Tag dictType={'todo_type'} value={row.targetState}/>)
+        } else {
+          return '--'
+        }
+      }
+    },
+    {
+      prop: 'submitTime',
+      label: '提交时间',
+      align: 'center',
+    },
+    {
+      prop: 'taskName',
+      label: '当前节点',
+      align: 'center',
+    },
+    {
+      prop: 'oper',
+      label: '操作',
+      fixed: 'right',
+      width: '150',
+      align: 'center',
+      showOverflowTooltip: false,
+      currentRender: ({row, index}) => {
+        return (
+            <div>
+              <el-button type="primary" link onClick={() => handleView(row)}>查看</el-button>
+            </div>
+        )
+      }
+    }
+  ],
+  api: '/workflow/mosr/process/task',
+  params: {},
+})
+const tableConfigReport = reactive({
+  columns: [
+    // {
+    //   type: 'selection',
+    //   prop: 'selection'
+    // },
+    {
+      prop: 'index',
+      type: 'index',
+      label: '序号',
+      align: 'center',
+      width:85,
+      index: index => {
+        return (tableConfigReportRef.value.getQuery().pageNum - 1) * tableConfigReportRef.value.getQuery().pageSize + index + 1
+      }
+    },
+    {
+      prop: 'requirementName',
+      label: '征集名称',
+      align: 'center'
+    },
+    {
+      prop: 'collectType',
+      label: '征集类型',
+      align: 'center'
+    },
+    {
+      prop: 'companyName',
+      label: '征集公司',
+      align: 'center',
+      // currentRender: ({row, index}) => (
+      // <div style={{width: '300px', textOverflow: 'ellipsis',textAlign:'center'}}>{row.companyName}</div>)
+    },
+    // {
+    //   prop: 'approveName',
+    //   label: '审批人',
+    //   align: 'center'
+    // },
+    {
+      prop: 'deadline',
+      label: '截止时间',
+      align: 'center'
+    },
+    // {
+    //   prop: 'taskNode',
+    //   label: '当前节点',
+    //   align: 'center'
+    // },
+    {
+      prop: 'state',
+      label: '状态',
+      align: 'center',
+      width: 200,
+      showOverflowTooltip: false,
+      currentRender: ({row, index}) => (<Tag dictType={'demand_collection'} value={row.state}/>)
+    },
+    {
+      prop: 'oper',
+      label: '操作',
+      align: 'center',
+      fixed: 'right',
+      showOverflowTooltip: false,
+      currentRender: ({row, index}) => {
+        let btn = []
+        let buttons = new Set(Array.from(row.buttons))
+        if (buttons.has("details")) {
+          btn.push({label: '详情', prem: auths.detail, func: () => handleDetail(row), type: 'primary'})
+        }
+        if (buttons.has("report")) {
+          btn.push({label: '需求上报', prem: auths.report, func: () => handleReport(row), type: 'primary'})
+        }
+        return (
+            <div style={{width: '100%'}}>
+              {
+                btn.map(item => (
+                    <el-button
+                        type={item.type}
+                        v-perm={item.prem}
+                        onClick={() => item.func()}
+                        link
+                    >
+                      {item.label}
+                    </el-button>
+                ))
+              }
+            </div>
+        )
+      }
+    }
+  ],
+  api: '/workflow/mosr/requirement',
+  params: {
+    state: "4"
+  }
+})
+const handleDetail = (row) => {
+  router.push({
+    name: 'Requirement/detail',
+    query: {
+      id: row.requirementId
+    }
+  })
+}
+const handleReport = (row) => {
+  router.push({
+    name: 'Summary/add',
+    query: {
+      id: row.requirementId
+    }
+  })
+}
+const getTotal = (val) => {
+  todoNum.value = val
+}
+const getReportNumTotal = (val) => {
+  reportNum.value = val
+}
+const handleView = (row) => {
+  if (row.targetState == '00' && row.targetId) {
+    router.push({
+      name: 'Requirement/detail',
+      query: {
+        id: row.targetId,
+        source: 'home'
+      }
+    })
+  } else if (row.targetState == '10' && row.targetId) {
+    router.push({
+      name: 'Summary/detail',
+      query: {
+        projectId: row.targetId,
+        state: row.state,
+        source: 'home'
+      }
+    })
+  } else if (row.targetState == '20' || row.targetState == '40' || row.targetState == '50') {
+    router.push({
+      name: 'Implementation/detail',
+      query: {
+        projectId: row.targetId,
+        state: row.state,
+        step: row.targetState,
+        source: 'home'
+      }
+    })
+  } else if (row.targetState == '70' && row.targetId) {
+    router.push({
+      name: 'Fund/detail',
+      query: {
+        id: row.targetId,
+        state: row.state,
+        source: 'home'
+      }
+    })
+  } else if (row.targetState == '80' && row.targetId) {
+    router.push({
+      name: 'Share/detail',
+      query: {
+        id: row.targetId,
+        state: row.state,
+        source: 'home'
+      }
+    })
+  } else if (row.targetState == '90' && row.targetId) {
+    router.push({
+      name: 'Phase/detail',
+      query: {
+        projectId: row.targetId,
+        source: 'home'
+      }
+    })
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+:deep(.el-tabs__nav-scroll) {
+  width: 100%;
+  display: flex;
+
+  .el-tabs__nav {
+    display: flex;
+    flex: 1;
+
+    .el-tabs__item {
+      flex: 1;
+      font-size: 16px;
+    }
+
+    .is-active {
+      color: black;
+      //background-color: #DED0B2;
+    }
+  }
+}
+@media only screen and (max-width: 767px) {
+  .right {
+    margin-top: 10px;
+  }
+  :deep(.el-table) {
+    height: 300px !important;
+  }
+}
+
+@media only screen and (max-width: 1000px) {
+  .right {
+    margin-top: 10px;
+  }
+  :deep(.el-table) {
+    height: 300px !important;
+  }
+
+}
+
+.home-bg {
+  height: calc(100vh - 130px);
+  max-height: calc(100vh - 96px);
+  background-color: #EFEFEF;
+  position: absolute;
+  left: 18px;
+  right: 0;
+  overflow-x: hidden;
+  overflow-y: auto;
+
+  &::-webkit-scrollbar {
+    width: 6px;
+  }
+
+  // 滚动条轨道
+  &::-webkit-scrollbar-track {
+    background: rgb(239, 239, 239);
+    border-radius: 2px;
+  }
+
+  // 小滑块
+  &::-webkit-scrollbar-thumb {
+    background: rgba(80, 81, 82, 0.29);
+    border-radius: 10px;
+  }
+
+  .left {
+    //flex: 0.8;
+    padding: 15px;
+    height: 100%;
+    border-radius: 10px;
+    background-color: #ffffff;
+
+
+    .el-table__empty-block {
+      .el-empty {
+        padding: 10px 0;
+      }
+    }
+
+    .statistics {
+      width: 99%;
+      margin-bottom: 20px;
+
+      .block {
+        display: flex;
+        align-items: center;
+        background-color: #e9edf2;
+        border-radius: 4px;
+        padding: 25px;
+        margin-top: 15px;
+
+        .block-right {
+          margin-left: 15%;
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+          color: #92969a;
+          font-size: 17px;
+
+          > span:first-child {
+            white-space: nowrap;
+            color: #000000;
+            margin-bottom: 10px;
+          }
+
+          > span:last-child {
+            white-space: nowrap;
+            font-size: 20px;
+            font-weight: bold;
+
+            > span {
+              margin-left: 10px;
+            }
+          }
+        }
+      }
+    }
+
+  }
+
+  .right {
+    height: calc(100vh - 130px);
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+
+    .right-top {
+      flex: 0.5;
+      padding: 15px;
+      border-radius: 10px;
+      background-color: #ffffff;
+    }
+
+    .right-top {
+      flex: 0.48;
+
+      > div:first-child {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+
+        h3 {
+          white-space: nowrap;
+          margin-left: 15px;
+        }
+
+        > span {
+          white-space: nowrap;
+          color: #927648;
+          font-size: 14px;
+        }
+      }
+
+      .el-divider--horizontal {
+        height: 3px;
+        background: #D9D9D9;
+        border: none;
+      }
+
+      .help {
+        height: 61px;
+        line-height: 61px;
+        padding-left: 15px;
+
+        &:hover {
+          background: #FBFBF7;
+        }
+      }
+    }
+  }
+}
+
+</style>

From b3fe207469b7a810b56d21badb82886b5a5fbca7 Mon Sep 17 00:00:00 2001
From: odjbin <1042039504@qq.com>
Date: Thu, 19 Sep 2024 00:26:05 +0800
Subject: [PATCH 2/2] =?UTF-8?q?fix=20:=20=E4=BC=98=E5=8C=96=E9=A6=96?=
 =?UTF-8?q?=E9=A1=B5=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/styles/index.scss |   4 +-
 src/views/home/index.vue     | 194 +++++++++++++++++++++--------------
 2 files changed, 118 insertions(+), 80 deletions(-)

diff --git a/src/assets/styles/index.scss b/src/assets/styles/index.scss
index b91620e..727ad98 100644
--- a/src/assets/styles/index.scss
+++ b/src/assets/styles/index.scss
@@ -475,8 +475,8 @@ html, body, #app, .el-container, .el-aside, .el-main {
   height: 1.7em;
 }
 .home-time{
-  width: 1.5em;
-  height: 1.5em;
+  width: 1.4em;
+  height: 1.4em;
   margin-right: 5px;
 }
 .middle-icon {
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index 54edc64..143cbb4 100644
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@@ -43,11 +43,13 @@
                     <el-empty image-size="135" description="暂无已办数据~"/>
                   </div>
                   <div v-for="item in todoList" class="todo-border">
-                    <div class="status"
-                         :style="{'background-color': item.status == 0 ? '#F55815' : item.status == 1 ? '#20BDA1' : '#4C52EA'}">
-                      {{ item.status == 0 ? '加急' : item.status == 1 ? '正常' : '逾期' }}
+<!--                    <div class="status-style"-->
+<!--                         :style="{'background-color': item.status == 0 ? '#F55815' : item.status == 1 ? '#20BDA1' : '#4C52EA'}">-->
+<!--                      {{ item.status == 0 ? '加急' : item.status == 1 ? '正常' : '逾期' }}-->
+<!--                    </div>-->
+                    <div class="status-style">
+                      {{item.targetState}}
                     </div>
-                    <div class="process-type">流程类型：{{ item.targetState }}</div>
                     <div class="black-text">发起人：{{ item.initiatorName }}</div>
                     <div class="black-text">当前节点：{{ item.taskName }}</div>
                     <div class="gray-time">
@@ -57,6 +59,7 @@
                           <span>提交时间：</span>
                         </div>
                         <div class="time"> {{ item.submitTime }}</div>
+                        <div class="time">时间要求 {{ item.totalTime }}天</div>
                       </div>
                       <div class="view">查看</div>
                     </div>
@@ -75,11 +78,13 @@
                   <el-empty image-size="135" description="暂无已办数据~"/>
                 </div>
                 <div v-for="item in doneList" class="todo-border">
-                  <div class="status"
-                       :style="{'background-color': item.status == 0 ? '#F55815' : item.status == 1 ? '#20BDA1' : '#4C52EA'}">
-                    {{ item.status == 0 ? '加急' : item.status == 1 ? '正常' : '逾期' }}
+<!--                  <div class="status-style"-->
+<!--                       :style="{'background-color': item.status == 0 ? '#F55815' : item.status == 1 ? '#20BDA1' : '#4C52EA'}">-->
+<!--                    {{ item.status == 0 ? '加急' : item.status == 1 ? '正常' : '逾期' }}-->
+<!--                  </div>-->
+                  <div class="status-style">
+                    {{item.targetState}}
                   </div>
-                  <div class="process-type">流程类型：{{ item.targetState }}</div>
                   <div class="black-text">发起人：{{ item.initiatorName }}</div>
                   <div class="black-text">当前节点：{{ item.taskName }}</div>
                   <div class="gray-time">
@@ -197,8 +202,12 @@
             <el-tab-pane label="规章制度" name="first">
               <div class="notice-block rules-block">
                 <div v-for="(item,index) in rulesList" class="notice">
-                  <div>
-                    <span>{{ index > 8 ? '' : 0 }}{{ index + 1 }}</span>{{ item.title }}
+<!--                  <div>-->
+<!--                    <span>{{ index > 8 ? '' : 0 }}{{ index + 1 }}</span>{{ item.title }}-->
+<!--                  </div>-->
+                  <div :style="{'color': item.isRead ? '#1F63E6' : 'rgba(0,0,0,0.5)'}">
+                    <span>{{ item.title }}</span>
+                    <span class="dot" v-if="item.isRead"></span>
                   </div>
                   <div>2018-05-06</div>
                 </div>
@@ -210,8 +219,11 @@
                   <el-empty image-size="135" description="暂无帮助文档~"/>
                 </div>
                 <div v-for="(item,index) in helpDocList" class="notice">
+<!--                  <div>-->
+<!--                    <span>{{ index > 8 ? '' : 0 }}{{ index + 1 }}</span>{{ item.title }}-->
+<!--                  </div>-->
                   <div>
-                    <span>{{ index > 8 ? '' : 0 }}{{ index + 1 }}</span>{{ item.title }}
+                    {{ item.title }}
                   </div>
                   <div>2018-05-06</div>
                 </div>
@@ -220,10 +232,11 @@
             <el-tab-pane label="常见问题" name="third">
               <div class="notice-block rules-block">
                 <div v-for="(item,index) in problemList" class="notice">
+<!--                  <span>{{ index > 8 ? '' : 0 }}{{ index + 1 }}</span>-->
                   <div>
-                    <span>{{ index > 8 ? '' : 0 }}{{ index + 1 }}</span>{{ item.title }}
+                    {{ item.title }}
                   </div>
-                  <!--                  <span class="dot" v-if="item.isRead"></span>-->
+
                   <div>2018-05-06</div>
                 </div>
               </div>
@@ -306,6 +319,7 @@ const todoList = ref([
     initiatorName: '胡晓',
     taskName: '审批人',
     submitTime: '2024-08-07 19:00:01',
+    totalTime: '10',
   },
   {
     status: 1,
@@ -313,6 +327,7 @@ const todoList = ref([
     initiatorName: '胡晓',
     taskName: '审批人',
     submitTime: '2024-08-07 19:00:01',
+    totalTime: '10',
   },
   {
     status: 2,
@@ -320,6 +335,7 @@ const todoList = ref([
     initiatorName: '胡晓',
     taskName: '审批人',
     submitTime: '2024-08-07 19:00:01',
+    totalTime: '10',
   },
   {
     status: 0,
@@ -327,6 +343,7 @@ const todoList = ref([
     initiatorName: '胡晓',
     taskName: '审批人',
     submitTime: '2024-08-07 19:00:01',
+    totalTime: '10',
   },
   {
     status: 1,
@@ -334,6 +351,7 @@ const todoList = ref([
     initiatorName: '胡晓',
     taskName: '审批人',
     submitTime: '2024-08-07 19:00:01',
+    totalTime: '10',
   },
   {
     status: 2,
@@ -341,6 +359,7 @@ const todoList = ref([
     initiatorName: '胡晓',
     taskName: '审批人',
     submitTime: '2024-08-07 19:00:01',
+    totalTime: '10',
   },
 ])
 const noticeList = ref([
@@ -391,7 +410,7 @@ const rulesList = ref([
   },
   {
     title: '系统升级通知，期间部分服务将暂停',
-    isRead: false
+    isRead: true
   },
   {
     title: '系统升级通知，期间部分服务将暂停',
@@ -626,22 +645,22 @@ const fundPieOption = ref({
     icon: 'circle',
     textStyle: {
       color: 'rgba(0,0,0,0.6)',
-      fontSize: '14px'
-    },
-    formatter: function (name) {
-      let data = fundPieOption.value.series[0].data
-      let total = 0
-      let tarValue
-      for (let i = 0; i < data.length; i++) {
-        total += data[i].value
-        if (data[i].name == name) {
-          tarValue = data[i].value
-        }
-      }
-      let v = tarValue
-      let p = ((tarValue / total) * 100).toFixed(2)
-      return `${name}     ${v}     ${p}%`
+      fontSize: '12px'
     },
+    // formatter: function (name) {
+    //   let data = fundPieOption.value.series[0].data
+    //   let total = 0
+    //   let tarValue
+    //   for (let i = 0; i < data.length; i++) {
+    //     total += data[i].value
+    //     if (data[i].name == name) {
+    //       tarValue = data[i].value
+    //     }
+    //   }
+    //   let v = tarValue
+    //   let p = ((tarValue / total) * 100).toFixed(2)
+    //   return `${name}     ${v}     ${p}%`
+    // },
   },
   graphic: {       //图形中间图片
     elements: [{
@@ -659,12 +678,16 @@ const fundPieOption = ref({
   series: [
     {
       type: 'pie',
-      radius: [75, 100],
+      radius: [65, 90],
       center: ['50%', '50%'],
       top: '10%',
       left:'8',
       label: {
-        show: false,
+        show: true,
+        formatter: '{b}\n{d}%'
+        // formatter: params => {
+          // console.log(params)
+        // },
       },
       itemStyle: {
         normal: {
@@ -690,8 +713,8 @@ const fundPieOption = ref({
         }
       },
       data: [
-        {value: 75, name: '专项资金',},
-        {value: 20, name: '非专项资金', selected: true},
+        {value: 75, name: '专项资金',label:{color:'#6201FF'}},
+        {value: 20, name: '非专项资金',label:{color:'#1AA4AD'}, selected: true},
       ],
     },
     {
@@ -701,7 +724,7 @@ const fundPieOption = ref({
       left:'8',
       clockWise: false,
       hoverAnimation: false,
-      radius: ['80%', '80%'],//边框大小
+      radius: ['70%', '70%'],//边框大小
       center: ['50%', '50%'],//边框位置
       tooltip: {
         show: false
@@ -733,7 +756,7 @@ const moneyPieOption = ref({
   series: [
     {
       type: 'pie',
-      radius: [0, 100],
+      radius: [0, 90],
       center: ['50%', '50%'],
       label: {
         normal: {
@@ -938,7 +961,7 @@ const handleView = (row) => {
   .total-money {
     height: 25px;
     font-weight: 400;
-    font-size: 16px;
+    font-size: 15px;
     color: #000000;
     line-height: 18px;
   }
@@ -950,13 +973,13 @@ const handleView = (row) => {
 
     > div:last-child {
       font-weight: 400;
-      font-size: 16px;
+      font-size: 15px;
       color: #000000;
       letter-spacing: 1px;
     }
 
     .company-name {
-      font-size: 14px;
+      font-size: 12px;
       color: rgba(0, 0, 0, 0.6);
       letter-spacing: 1px;
       margin-left: 10px;
@@ -1005,14 +1028,13 @@ const handleView = (row) => {
 
 :deep(.el-tabs__nav-wrap:after) {
   background-color: #D9D9D9 !important;
-  height: 1px !important;
+  height: 2px !important;
 }
 
 :deep(.el-tabs__active-bar) {
-  height: 1px !important;
-  //background-color: #1476E3 !important;
+  height: 2px !important;
+  background-color: #1476E3 !important;
 }
-
 :deep(.el-tabs__new-tab ) {
   width: auto !important;
   border: none !important;
@@ -1042,14 +1064,15 @@ const handleView = (row) => {
       flex: 1;
       font-size: 16px;
       width: 120px;
-      font-weight: 600;
+      //font-weight: 600;
       height: 51px;
       color: rgba(0, 0, 0, 0.5);
     }
 
     .el-tabs__item.is-active {
-      color: #1476E3;
+      color: #1F63E6;
     }
+    //#1476E3
   }
 }
 
@@ -1156,14 +1179,15 @@ const handleView = (row) => {
 
           .gray-time {
             display: flex;
+            flex-direction: column;
             align-items: flex-end;
             font-weight: 400;
             color: rgba(0, 0, 0, 0.5);
             letter-spacing: 1px;
-            font-size: 14px;
+            font-size: 12px;
 
             .view {
-              float: right;
+              //float: right;
               color: #1F63E6;
               white-space: nowrap;
               cursor: pointer;
@@ -1184,6 +1208,9 @@ const handleView = (row) => {
 
             .time {
               margin-left: 23px;
+              &:last-child{
+                white-space: nowrap;
+              }
             }
           }
 
@@ -1191,6 +1218,7 @@ const handleView = (row) => {
             white-space: nowrap;
             color: #000000;
             margin-bottom: 7px;
+            font-size: 12px;
           }
 
           .process-type {
@@ -1201,15 +1229,18 @@ const handleView = (row) => {
             letter-spacing: 1px;
           }
 
-          .status {
-            width: 52px;
+          .status-style {
+            padding: 0 8px;
+            display: inline-block;
             height: 23px;
             border-radius: 3px 3px 3px 3px;
-            font-size: 13px;
+            font-size: 12px;
             color: #FFFFFF;
             line-height: 23px;
             letter-spacing: 1px;
             text-align: center;
+            background-color: #2a99ff;
+            margin-bottom: 14px;
           }
         }
       }
@@ -1252,17 +1283,17 @@ const handleView = (row) => {
           flex-direction: column;
           justify-content: center;
           color: #fff;
-          font-size: 16px;
+          font-size: 13px;
 
           > span:first-child {
             white-space: nowrap;
-            font-size: 26px;
+            font-size: 36px;
             font-weight: bold;
             margin-bottom: 10px;
 
             > span {
               margin-left: 10px;
-              font-size: 16px;
+              font-size: 13px;
             }
           }
 
@@ -1291,37 +1322,44 @@ const handleView = (row) => {
       display: flex;
       align-items: center;
       justify-content: space-between;
-      height: 42px !important;
-      line-height: 42px !important;
+      height: 47px !important;
+      line-height: 47px !important;
       color: rgba(0, 0, 0, 0.5) !important;
 
-      .dot {
-        display: inline-block;
-        width: 6px;
-        height: 6px;
-        border-radius: 25px;
-        background: #DD3B3B;
-        margin-left: -6px;
-        margin-bottom: 5px;
-        margin-right: 4px;
-      }
-
-      div:first-child {
-        width: 80% !important;
+      >div:first-child {
+        position: relative;
         text-overflow: ellipsis;
         white-space: nowrap;
         overflow: hidden;
 
-        > span:first-child {
-          margin-right: 10px;
+        &:hover {
           color: #1476E3;
-          font-weight: bold;
-          font-size: 16px;
-          margin-left: 0 !important;
+          background: #F6FBFE;
         }
+
+        > span:first-child {
+          //width: 80% !important;
+          margin-right: 4px;
+        }
+
+        .dot {
+          position: absolute;
+          right: 0;
+          top: 14px;
+          display: inline-block;
+          width: 6px;
+          height: 6px;
+          border-radius: 25px;
+          background: #DD3B3B;
+          //margin-left: -6px;
+          //margin-bottom: 5px;
+          //margin-right: 4px;
+        }
+
       }
 
       div:last-child {
+        margin-left: 20px;
         font-weight: 400;
         letter-spacing: 1px;
         color: rgba(0, 0, 0, 0.5)
@@ -1332,7 +1370,7 @@ const handleView = (row) => {
   .notice-block {
     height: 452px;
     overflow-y: auto;
-    margin-top: 10px;
+    //margin-top: 10px;
 
     &::-webkit-scrollbar {
       width: 6px;
@@ -1353,10 +1391,10 @@ const handleView = (row) => {
 
     .notice {
       min-width: 300px;
-      height: 65px;
-      line-height: 65px;
+      height: 75px;
+      line-height: 75px;
       padding: 0 15px;
-      font-size: 15px;
+      font-size: 12px;
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
@@ -1394,7 +1432,7 @@ const handleView = (row) => {
       .fund-pie {
         width: 100%;
         height: 25px;
-        font-size: 14px;
+        font-size: 12px;
         color: rgba(0, 0, 0, 0.5);
         text-align: center;
         //margin-top: 15px;
@@ -1423,7 +1461,7 @@ const handleView = (row) => {
           > span {
             white-space: nowrap;
             color: #000000;
-            font-weight: 600;
+            //font-weight: 600;
           }
         }