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-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 @@ + + + + + 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 @@ + + + + + diff --git a/src/views/home/index.vue b/src/views/home/index.vue index 54edc64..c6e7bb5 100644 --- a/src/views/home/index.vue +++ b/src/views/home/index.vue @@ -39,15 +39,21 @@
-
- +
+
-
- {{ item.status == 0 ? '加急' : item.status == 1 ? '正常' : '逾期' }} + + + + + + + +
+
-
流程类型：{{ item.targetState }}
+
发起人：{{ item.initiatorName }}
当前节点：{{ item.taskName }}
@@ -57,8 +63,9 @@ 提交时间：
{{ item.submitTime }}
+
时间要求 {{ item.totalTime }}天
-
查看
+
查看
@@ -71,28 +78,49 @@ -
- -
-
-
- {{ item.status == 0 ? '加急' : item.status == 1 ? '正常' : '逾期' }} +
+
+ + + + 您有{{ todoList.length }}条待办需要处理
-
流程类型：{{ item.targetState }}
-
发起人：{{ item.initiatorName }}
-
当前节点：{{ item.taskName }}
-
-
-
- - 提交时间： -
-
{{ item.submitTime }}
+
+ 查看更多 + + + +
+
+
+
+ +
+
+ + + + +
+ +
+
+
发起人：{{ item.initiatorName }}
+
当前节点：{{ item.taskName }}
+
+
+
+ + 提交时间： +
+
{{ item.submitTime }}
+
时间要求 {{ item.totalTime }}天
+
+
查看
-
查看
+ @@ -197,8 +225,12 @@
-
- {{ index > 8 ? '' : 0 }}{{ index + 1 }}{{ item.title }} + + + +
+ {{ item.title }} +
2018-05-06
@@ -210,8 +242,11 @@
+ + +
- {{ index > 8 ? '' : 0 }}{{ index + 1 }}{{ item.title }} + {{ item.title }}
2018-05-06
@@ -220,10 +255,11 @@
+
- {{ index > 8 ? '' : 0 }}{{ index + 1 }}{{ item.title }} + {{ item.title }}
- +
2018-05-06
@@ -243,6 +279,8 @@ import 'element-plus/theme-chalk/display.css' import {useAuthStore} from '@/stores/userstore.js' import * as echarts from 'echarts' import {toThousands} from "@/utils/changePrice.js"; +import {ElNotification} from "element-plus"; +import {getHomeInfo} from "@/api/home"; const AuthStore = useAuthStore() const router = useRouter() @@ -302,45 +340,51 @@ const taskTabList = ref([ const todoList = ref([ { status: 0, - targetState: '项目归档', + targetState: '00', initiatorName: '胡晓', taskName: '审批人', submitTime: '2024-08-07 19:00:01', + totalTime: '10', }, { status: 1, - targetState: '项目归档', + targetState: '10', initiatorName: '胡晓', taskName: '审批人', submitTime: '2024-08-07 19:00:01', + totalTime: '10', }, { status: 2, - targetState: '项目归档', + targetState: '20', initiatorName: '胡晓', taskName: '审批人', submitTime: '2024-08-07 19:00:01', + totalTime: '10', }, { status: 0, - targetState: '项目归档', + targetState: '40', initiatorName: '胡晓', taskName: '审批人', submitTime: '2024-08-07 19:00:01', + totalTime: '10', }, { status: 1, - targetState: '项目归档', + targetState: '50', initiatorName: '胡晓', taskName: '审批人', submitTime: '2024-08-07 19:00:01', + totalTime: '10', }, { status: 2, - targetState: '项目归档', + targetState: '80', initiatorName: '胡晓', taskName: '审批人', submitTime: '2024-08-07 19:00:01', + totalTime: '10', }, ]) const noticeList = ref([ @@ -391,7 +435,7 @@ const rulesList = ref([ }, { title: '系统升级通知，期间部分服务将暂停', - isRead: false + isRead: true }, { title: '系统升级通知，期间部分服务将暂停', @@ -626,22 +670,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 +703,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 +738,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 +749,7 @@ const fundPieOption = ref({ left:'8', clockWise: false, hoverAnimation: false, - radius: ['80%', '80%'],//边框大小 + radius: ['70%', '70%'],//边框大小 center: ['50%', '50%'],//边框位置 tooltip: { show: false @@ -733,7 +781,7 @@ const moneyPieOption = ref({ series: [ { type: 'pie', - radius: [0, 100], + radius: [0, 90], center: ['50%', '50%'], label: { normal: { @@ -760,8 +808,22 @@ const init = () => { data.fundPieCharts = echarts.init(document.getElementById('fundPie')).setOption(fundPieOption.value) data.moneyPieCharts = echarts.init(document.getElementById('moneyPie')).setOption(moneyPieOption.value) } - +const getTodoList=()=>{ + getHomeInfo().then(res => { + if (res.code === 1000) { + // todoList.value=res.data.rows + // todoNum.value=res.data.total + }else{ + ElNotification({ + title: '提示', + message: res.msg, + type: 'error' + }) + } + }) +} onMounted(() => { + // getTodoList() init() }) @@ -824,9 +886,6 @@ const handleReport = (row) => { } }) } -const getTotal = (val) => { - todoNum.value = val -} const getReportNumTotal = (val) => { reportNum.value = val } @@ -938,7 +997,7 @@ const handleView = (row) => { .total-money { height: 25px; font-weight: 400; - font-size: 16px; + font-size: 15px; color: #000000; line-height: 18px; } @@ -950,13 +1009,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 +1064,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 +1100,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 +1215,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 +1244,9 @@ const handleView = (row) => { .time { margin-left: 23px; + &:last-child{ + white-space: nowrap; + } } } @@ -1191,6 +1254,7 @@ const handleView = (row) => { white-space: nowrap; color: #000000; margin-bottom: 7px; + font-size: 12px; } .process-type { @@ -1201,15 +1265,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 +1319,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 +1358,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 +1406,7 @@ const handleView = (row) => { .notice-block { height: 452px; overflow-y: auto; - margin-top: 10px; + //margin-top: 10px; &::-webkit-scrollbar { width: 6px; @@ -1353,10 +1427,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 +1468,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 +1497,7 @@ const handleView = (row) => { > span { white-space: nowrap; color: #000000; - font-weight: 600; + //font-weight: 600; } }