首页

src/views/Home/ItemHeader.vue → src/views/Home/cells/CellHeader.vue

 <template>
-  <div class="item-header">
-    <div class="item-header_title">{{ title }}</div>
+  <div class="cell-header">
+    <div class="cell-header_title">{{ title }}</div>
     <div>
       <slot></slot>
     </div>
@@ -19,31 +19,31 @@ export default {
 </script>
 
 <style scoped>
-.item-header {
+.cell-header {
   margin: 10px 20px;
   height: 30px;
   display: flex;
   justify-content: space-between;
   border-bottom: 2px solid #f7f7f7;
 }
-.item-header_title {
+.cell-header_title {
   font-weight: bold;
   font-size: 15px;
 }
-.item-header_title::before {
+.cell-header_title::before {
   content: "";
   border-left: 5px solid #647092;
   margin-right: 10px;
 }
-.item-header [class^="el-icon-"] {
+.cell-header [class^="el-icon-"] {
   font-weight: bold;
   cursor: pointer;
   color: #95979b;
 }
-.item-header [class^="el-icon-"]:hover {
+.cell-header [class^="el-icon-"]:hover {
   color: #000;
 }
-.item-header >>> .el-icon-more {
+.cell-header >>> .el-icon-more {
   transform: rotate(90deg);
 }
 </style>

src/views/Home/CustomerAnalyse.vue → src/views/Home/cells/CustomerAnalyse.vue

 <template>
-  <div class="home-item" id="customerAnalyse">
-    <ItemHeaderVue title="大客户分析">
-      <span class="el-icon-refresh-right" title="刷新"></span>
-    </ItemHeaderVue>
-    <div class="item-content">
+  <div class="home-cell" id="customerAnalyse">
+    <CellHeaderVue title="大客户分析">
+      <span class="el-icon-refresh" title="刷新"></span>
+    </CellHeaderVue>
+    <div class="cell-content">
       <div class="chart-operate">
         <i class="el-icon-arrow-up"></i>
         <i class="el-icon-arrow-down"></i>
@@ -14,12 +14,12 @@
 </template>
 
 <script>
-import ItemHeaderVue from "./ItemHeader.vue";
+import CellHeaderVue from "./CellHeader.vue";
 import * as echarts from "echarts";
 
 export default {
   name: "CustomerAnalyse",
-  components: { ItemHeaderVue },
+  components: { CellHeaderVue },
   data() {
     return {};
   },
@@ -71,7 +71,7 @@ export default {
           data: [19325, 23438, 31000, 121594, 134141, 381807],
         },
         {
-          name: "中欧贡献（千美元）",
+          name: "费用收益（千美元）",
           type: "bar",
           data: [49325, 53438, 11000, 221594, 43241, 455807],
         },
@@ -83,14 +83,14 @@ export default {
 </script>
 
 <style scoped>
-#customerAnalyse .item-content .chart-operate {
+#customerAnalyse .cell-content .chart-operate {
   margin-left: 20px;
   height: 20px;
 }
-#customerAnalyse .item-content .chart-operate i {
+#customerAnalyse .cell-content .chart-operate i {
   cursor: pointer;
 }
-#customerAnalyse .item-content #chart {
+#customerAnalyse .cell-content #chart {
   width: 98%;
   height: calc(100% - 25px);
   margin: 0 auto;

src/views/Home/Hall.vue → src/views/Home/cells/Hall.vue

 <template>
-  <div class="home-item" id="hall">
-    <ItemHeaderVue title="电子大厅">
-      <span class="el-icon-refresh-right" title="刷新"></span>
-    </ItemHeaderVue>
-    <div class="item-content">
+  <div class="home-cell" id="hall">
+    <CellHeaderVue title="电子大厅">
+      <span class="el-icon-refresh" title="刷新"></span>
+    </CellHeaderVue>
+    <div class="cell-content">
       <div class="card-item" v-for="(item, idx) in itemList" :key="idx">
         <div class="dept-name">
           <div class="first-word" :style="{ 'background-image': item.backImg }">
@@ -25,11 +25,11 @@
 </template>
 
 <script>
-import ItemHeaderVue from "./ItemHeader.vue";
+import CellHeaderVue from "./CellHeader.vue";
 
 export default {
   name: "Hall",
-  components: { ItemHeaderVue },
+  components: { CellHeaderVue },
   data() {
     return {
       itemList: [
@@ -53,15 +53,15 @@ export default {
 </script>
 
 <style scoped>
-#hall .item-content {
+#hall .cell-content {
   display: flex;
   flex-wrap: wrap;
 }
-#hall .item-content {
+#hall .cell-content {
   justify-content: space-around;
   align-items: center;
 }
-#hall .item-content .card-item {
+#hall .cell-content .card-item {
   width: 45%;
   height: 45%;
   background-color: #e6e8ef;

src/views/Home/NoticeAnnouncement.vue → src/views/Home/cells/NoticeAnnouncement.vue

 <template>
-  <div class="home-item" id="noticeAnnouncement">
-    <ItemHeaderVue title="通知公告">
-      <span class="el-icon-refresh-right" title="刷新"></span>
+  <div class="home-cell" id="noticeAnnouncement">
+    <CellHeaderVue title="通知公告">
+      <span class="el-icon-refresh" title="刷新"></span>
       <span class="el-icon-more" title="操作"></span>
-    </ItemHeaderVue>
-    <div class="item-content">
+    </CellHeaderVue>
+    <div class="cell-content">
       <div class="notice-item" v-for="(item, idx) in noticeList" :key="idx">
         <div class="notice-title" :class="{ active: idx === 0 }">
           {{ item.title }}
@@ -18,11 +18,11 @@
 </template>
 
 <script>
-import ItemHeaderVue from "./ItemHeader.vue";
+import CellHeaderVue from "./CellHeader.vue";
 
 export default {
   name: "NoticeAnnouncement",
-  components: { ItemHeaderVue },
+  components: { CellHeaderVue },
   data() {
     return {
       noticeList: [
@@ -51,30 +51,30 @@ export default {
 
 <style scoped>
 /* 通知公告 */
-#noticeAnnouncement .item-content {
+#noticeAnnouncement .cell-content {
   display: flex;
   flex-wrap: wrap;
   margin: 0 20px;
 }
-#noticeAnnouncement .item-content .notice-item {
+#noticeAnnouncement .cell-content .notice-item {
   width: 100%;
   display: flex;
   justify-content: space-between;
   margin-bottom: 5px;
   font-size: 15px;
 }
-#noticeAnnouncement .item-content .notice-item .notice-title {
+#noticeAnnouncement .cell-content .notice-item .notice-title {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   max-width: 75%;
 }
-#noticeAnnouncement .item-content .notice-item .notice-title::before {
+#noticeAnnouncement .cell-content .notice-item .notice-title::before {
   content: "";
   display: inline-block;
   width: 8px;
 }
-#noticeAnnouncement .item-content .notice-item .notice-title.active::before {
+#noticeAnnouncement .cell-content .notice-item .notice-title.active::before {
   content: "";
   background: rgb(255, 0, 0);
   display: inline-block;
@@ -85,7 +85,7 @@ export default {
   margin-right: 2px;
   margin-bottom: 2px;
 }
-#noticeAnnouncement .item-content .notice-item .notice-date {
+#noticeAnnouncement .cell-content .notice-item .notice-date {
   /* width: 20%; */
   margin-right: 6px;
 }

src/views/Home/QuickSearch.vue → src/views/Home/cells/QuickSearch.vue

 <template>
-  <div class="home-item" id="quickSearch">
-    <ItemHeaderVue title="快速查询"> </ItemHeaderVue>
-		<div class="item-content">
+  <div class="home-cell" id="quickSearch">
+    <CellHeaderVue title="快速查询"> </CellHeaderVue>
+		<div class="cell-content">
 			<div
         class="search-item"
         v-for="(item, index) in options"
@@ -15,11 +15,11 @@
 </template>
 
 <script>
-import ItemHeaderVue from "./ItemHeader.vue";
+import CellHeaderVue from "./CellHeader.vue";
 
 export default {
 	name: 'QuickSearch',
-  components: { ItemHeaderVue },
+  components: { CellHeaderVue },
 	data() {
 		return {
 			options: [
@@ -38,33 +38,31 @@ export default {
 </script>
 
 <style scoped>
-#quickSearch .item-content {
+#quickSearch .cell-content {
   display: flex;
   flex-wrap: wrap;
 }
-#quickSearch .item-content .search-item {
+#quickSearch .cell-content .search-item {
+  width: 33%;
+  padding-bottom: 16px;
   display: flex;
-  display: flex;
-  width: 145px;
-  /* height: 80px; */
   flex-direction: column;
   align-items: center;
-  margin: 0 15px 15px;
   cursor: pointer;
 }
-#quickSearch .item-content .search-item i {
+#quickSearch .cell-content .search-item i {
   color: #0088ff;
   font-size: 36px;
 }
-#quickSearch .item-content .search-item span {
+#quickSearch .cell-content .search-item span {
   color: #303133;
-  font-size: 15px;
+  font-size: 14px;
   margin-top: 10px;
 }
-/* #quickSearch .item-content .search-item:hover i {
+/* #quickSearch .cell-content .search-item:hover i {
   color: var(--themecolor);
 } */
-#quickSearch .item-content .search-item:hover span {
+#quickSearch .cell-content .search-item:hover span {
   color: var(--themecolor);
 }
 </style>

src/views/Home/QuickVisit.vue → src/views/Home/cells/QuickVisit.vue

 <template>
-  <div class="home-item" id="quickVisit">
-    <ItemHeaderVue title="快速访问">
-      <span class="el-icon-refresh-right" title="刷新"></span>
+  <div class="home-cell" id="quickVisit">
+    <CellHeaderVue title="快速访问">
+      <span class="el-icon-refresh" title="刷新"></span>
       <span class="el-icon-more" title="操作"></span>
-    </ItemHeaderVue>
+    </CellHeaderVue>
 
-    <div class="item-content">
+    <div class="cell-content">
       <div
         class="visit-item"
         v-for="(item, index) in quickVisitItem"
@@ -23,11 +23,11 @@
 </template>
 
 <script>
-import ItemHeaderVue from "./ItemHeader.vue";
+import CellHeaderVue from "./CellHeader.vue";
 
 export default {
 	name: 'QuickVisit',
-  components: { ItemHeaderVue },
+  components: { CellHeaderVue },
   data() {
     return {
       quickVisitItem: [
@@ -59,33 +59,31 @@ export default {
 
 <style scoped>
 /* 快速访问 */
-#quickVisit .item-content {
+#quickVisit .cell-content {
   display: flex;
   flex-wrap: wrap;
 }
-#quickVisit .item-content .visit-item {
+#quickVisit .cell-content .visit-item {
+  width: 33%;
+  padding-bottom: 16px;
   display: flex;
-  display: flex;
-  width: 145px;
-  /* height: 80px; */
   flex-direction: column;
   align-items: center;
-  margin: 0 15px 15px;
   cursor: pointer;
 }
-#quickVisit .item-content .visit-item i {
+#quickVisit .cell-content .visit-item i {
   color: #0088ff;
   font-size: 36px;
 }
-#quickVisit .item-content .visit-item span {
+#quickVisit .cell-content .visit-item span {
   color: #303133;
-  font-size: 15px;
+  font-size: 14px;
   margin-top: 10px;
 }
-/* #quickVisit .item-content .visit-item:hover i {
+/* #quickVisit .cell-content .visit-item:hover i {
   color: var(--themecolor);
 } */
-#quickVisit .item-content .visit-item:hover span {
+#quickVisit .cell-content .visit-item:hover span {
   color: var(--themecolor);
 }
 </style>

src/views/Home/cells/TaskStatistics.vue

+<template>
+  <div class="home-cell">
+    <CellHeaderVue title="任务统计">
+      <span class="el-icon-refresh" title="刷新"></span>
+    </CellHeaderVue>
+    <div class="cell-content">
+      <div class="task-stat-display total">
+        <div class="stat-item" v-for="(item, idx) in total" :key="idx">
+          <div class="stat-count">{{ item.count }}</div>
+          <div class="stat-name">{{ item.name }}</div>
+        </div>
+      </div>
+      <div class="task-sign mime">
+        <span class="el-icon-s-custom"></span>
+        我的工作
+      </div>
+      <div class="task-stat-display mime">
+        <div class="stat-item" v-for="(item, idx) in mime" :key="idx">
+          <div class="stat-count">{{ item.count }}</div>
+          <div class="stat-name">{{ item.name }}</div>
+        </div>
+      </div>
+      <div class="task-sign pty">
+        <span class="el-icon-s-platform"></span>
+        机构工作
+      </div>
+      <div class="task-stat-display pty">
+        <div class="stat-item" v-for="(item, idx) in pty" :key="idx">
+          <div class="stat-count">{{ item.count }}</div>
+          <div class="stat-name">{{ item.name }}</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import CellHeaderVue from "./CellHeader.vue";
+
+export default {
+  name: "TaskStatistics",
+  components: { CellHeaderVue },
+  data() {
+    return {
+      total: [
+        { name: "待经办", count: "5454" },
+        { name: "来报待处理", count: "4231" },
+        { name: "待复核", count: "652" },
+        { name: "待授权", count: "2" },
+        { name: "待匹配", count: "5" },
+        { name: "待打印", count: "1235" },
+      ],
+      mime: [
+        { name: "待经办", count: "154" },
+        { name: "待修改", count: "1254" },
+        { name: "待复核", count: "5" },
+        { name: "待授权", count: "0" },
+        { name: "待回复", count: "0" },
+        { name: "待打印", count: "4564" },
+        { name: "已完结", count: "3212" },
+      ],
+      pty: [
+        { name: "待经办", count: "1164" },
+        { name: "待修改", count: "2341" },
+        { name: "待复核", count: "168" },
+        { name: "待授权", count: "423" },
+        { name: "待打印", count: "6547" },
+        { name: "待匹配", count: "23" },
+        { name: "已完结", count: "3212" },
+      ],
+    };
+  },
+};
+</script>
+
+<style scoped>
+.cell-content {
+  padding: 0px 8px;
+}
+.task-stat-display {
+  height: 25%;
+  max-height: 90px;
+  display: flex;
+  justify-content: space-around;
+  color: #f3f3f3;
+}
+.task-stat-display.total {
+  background-color: #045e92;
+}
+.task-stat-display.mime {
+  background-color: #871f5a;
+}
+.task-stat-display.pty {
+  background-color: #149457;
+}
+.task-stat-display .stat-item {
+  width: 100px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+.task-stat-display .stat-count {
+  margin-bottom: 10px;
+}
+.task-stat-display .stat-name {
+  font-size: 14px;
+  font-weight: 400;
+}
+.task-sign {
+  height: 12.5%;
+  display: flex;
+  align-items: center;
+  padding-left: 15px;
+  font-size: 14px;
+  font-weight: 400;
+}
+.task-sign [class^="el-icon-"] {
+  font-size: 25px;
+  margin-right: 10px;
+}
+.task-sign.mime [class^="el-icon-"] {
+  color: #e56649;
+}
+.task-sign.pty [class^="el-icon-"] {
+  color: #0e63a2;
+}
+</style>

src/views/Home/index.vue

 <template>
   <div class="eContainer-home">
     <QuickVisitVue></QuickVisitVue>
+    <TaskStatisticsVue></TaskStatisticsVue>
     <NoticeAnnouncementVue></NoticeAnnouncementVue>
     <HallVue></HallVue>
     <CustomerAnalyseVue></CustomerAnalyseVue>
@@ -9,16 +10,18 @@
 </template>
 
 <script>
-import QuickVisitVue from "./QuickVisit.vue";
-import NoticeAnnouncementVue from "./NoticeAnnouncement.vue";
-import HallVue from "./Hall.vue";
-import CustomerAnalyseVue from "./CustomerAnalyse.vue";
-import QuickSearchVue from "./QuickSearch.vue";
+import QuickVisitVue from "./cells/QuickVisit.vue";
+import TaskStatisticsVue from './cells/TaskStatistics.vue';
+import NoticeAnnouncementVue from "./cells/NoticeAnnouncement.vue";
+import HallVue from "./cells/Hall.vue";
+import CustomerAnalyseVue from "./cells/CustomerAnalyse.vue";
+import QuickSearchVue from "./cells/QuickSearch.vue";
 
 export default {
   name: "Home",
   components: {
     QuickVisitVue,
+    TaskStatisticsVue,
     NoticeAnnouncementVue,
     HallVue,
     CustomerAnalyseVue,
@@ -35,25 +38,19 @@ export default {
   height: 100%;
   display: flex;
   flex-wrap: wrap;
-  justify-content: space-around;
+  /* justify-content: space-around; */
   align-items: center;
 }
-.home-item {
+.home-cell {
+  width: 33%;
   height: 49%;
+  margin-left: 0.166%;
+  margin-right: 0.166%;
   background-color: #ffffff;
   box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
   border-radius: 8px;
 }
-#quickVisit {
-  width: 66.3%;
-}
-#noticeAnnouncement,
-#hall,
-#customerAnalyse,
-#quickSearch {
-  width: 33%;
-}
-.home-item >>> .item-content {
+.home-cell >>> .cell-content {
   /* max-height: calc(100% - 52px); */
   height: calc(100% - 52px);
   overflow: auto;