首页样式重写

src/views/home/index.vue

@@ -21,7 +21,7 @@
       </div>
     </div>
 
-      <div class="title">业务统计</div>
+      <div class="title1">业务统计</div>
     <div class="conten">
       <div class="letf">
         <div class="title">
@@ -29,24 +29,41 @@
         </div>
         <div class="echarts"></div>
       </div>
-      <div class="centen"></div>
+      <div class="centen">
+        <div class="title">
+          <h3>来源统计</h3>
+        </div>
+         <div class="echarts2">
+           <!-- <template v-for="(item,index) in echarts2" :key="index"> -->
+          <div v-for="(item,index) in echarts2" :key="index" class="myTiao" :title="item.name+item.percent">
+           <div class="my_top">
+             <p>{{item.name}}</p>
+             <span :style="{color:item.myColor}">{{item.percent}}</span>
+           </div>
+           <div class="tiao">
+             <div class="tiao_li" :style="{backgroundColor:item.myColor,width:item.percent}"></div>
+           </div>
+          </div>
+           <!-- </template> -->
+         </div>
+      </div>
       <div class="right">
         <div class="title">
-          <h3>待办事项</h3>
+          <h3>待办事项 <i class="el-icon-refresh" @click="refresh"></i> </h3>
         </div>
         <div class="right_con">
         <div
           class="dingdong"
           v-for="(item, index) in dingdong"
+          @mouseenter="myCheck = index"
+          @mouseleave="myCheck = null"
           :key="index"
           @click="skip(item)"
-          :class="{ active: !item.authority }"
+          :class="{ active: !item.authority,myCheck: myCheck===index}"
         >
-          <p>{{ item.name }}</p>
           <span v-if="!item.authority">暂无权限</span>
-          <span v-else
-            >共有 <i> {{ item.inoc }} </i> 代办事项</span
-          >
+          <span v-else><i>{{ item.inoc }}</i></span>
+          <p>{{ item.name }}</p>
         </div>
         </div>
       </div>
@@ -58,7 +75,7 @@
 import { getReport } from '@/apis/statistics0'
 // ---------------------echarts
 import * as echarts from 'echarts/core'
-import { TooltipComponent } from 'echarts/components'
+import { TooltipComponent, LegendComponent } from 'echarts/components'
 import { PieChart } from 'echarts/charts'
 import { LabelLayout } from 'echarts/features'
 import { CanvasRenderer } from 'echarts/renderers'
@@ -72,12 +89,14 @@ import { getList as getList5 } from '@/apis/holding5'
 import { getList as getList2 } from '@/apis/holding2'
 import { getList as getList1 } from '@/apis/holding1'
 import { getList } from '@/apis/holding'
-echarts.use([TooltipComponent, PieChart, CanvasRenderer, LabelLayout])
+echarts.use([TooltipComponent, PieChart, CanvasRenderer, LabelLayout, LegendComponent])
 export default {
   name: 'Home',
   components: {},
   data () {
     return {
+      echarts2: [],
+      myCheck: null,
       RKicoInd: null,
       // 用户信息
       userData: {},
@@ -189,6 +208,42 @@ export default {
   watch: {},
   // 方法集合
   methods: {
+    // 刷新的方法
+    async refresh () {
+      this.dingdong.forEach(v => {
+        v.inoc = 0
+      })
+      // 进页面拿数据--藏品登记
+      const res = await getList({ pageNum: 1, pageSize: 99999 })
+      res.data.list.forEach((v) => {
+        if (v.status === 1 || v.status === 0) this.dingdong[0].inoc++
+      })
+      // 进页面拿数据--入库管理
+      const res1 = await getList1({ pageNum: 1, pageSize: 99999 })
+      res1.data.list.forEach((v) => {
+        if (v.status === 1 || v.status === 0) this.dingdong[1].inoc++
+      })
+      // 进页面拿数据--出库管理
+      const res2 = await getList2({ pageNum: 1, pageSize: 99999 })
+      res2.data.list.forEach((v) => {
+        if (v.status === 1 || v.status === 0 || v.status === 3) { this.dingdong[2].inoc++ }
+      })
+      // 进页面拿数据--藏品修改
+      const res4 = await getList4({ pageNum: 1, pageSize: 99999 })
+      res4.data.list.forEach((v) => {
+        if (v.status === 1) this.dingdong[3].inoc++
+      })
+      // 进页面拿数据--藏品注销
+      const res5 = await getList5({ pageNum: 1, pageSize: 99999 })
+      res5.data.list.forEach((v) => {
+        if (v.status === 1 || v.status === 0) this.dingdong[4].inoc++
+      })
+      // 进页面拿数据--藏品移库
+      const sta2 = await statistics2({ pageNum: 1, pageSize: 99999 })
+      sta2.data.list.forEach((v) => {
+        if (v.status === 1) this.dingdong[5].inoc++
+      })
+    },
     // 快速跳转
     skip (val) {
       this.$router.push(val.push)
@@ -235,72 +290,58 @@ export default {
       tooltip: {
         trigger: 'item'
       },
-
+      legend: {
+        orient: 'vertical',
+        right: 10,
+        top: 90,
+        bottom: 20
+      },
       series: [
         {
           type: 'pie',
           radius: ['40%', '70%'],
-          data: Datatemp,
-          emphasis: {
-            itemStyle: {
-              shadowBlur: 10,
-              shadowOffsetX: 0,
-              shadowColor: 'rgba(0, 0, 0, 0.5)'
-            }
-          }
+          center: ['34%', '50%'],
+          avoidLabelOverlap: false,
+          position: 'left',
+          label: {
+            show: false,
+            position: 'left'
+          },
+          // emphasis: {
+          //   label: {
+          //     show: true,
+          //     fontSize: '20',
+          //     fontWeight: 'bold'
+          //   }
+          // },
+          labelLine: {
+            show: false
+          },
+          data: Datatemp
+
         }
       ]
     }
     option && myChart.setOption(option)
 
+    // 藏品来源数据处理
+    this.echarts2 = Datares.data.goodsSource
+    this.echarts2.forEach((v, i) => {
+      v.percent = Number(v.percent * 100).toFixed(1) + '%'
+      if (i === 0) v.myColor = '#5470c6'
+      else if (i === 1) v.myColor = '#91cc75'
+      else if (i === 2) v.myColor = '#fcd25c'
+      else if (i === 3) v.myColor = '#ee6666'
+      else if (i === 4) v.myColor = '#73c0de'
+      else if (i === 5) v.myColor = '#3ba272'
+      else if (i === 6) v.myColor = '#fc8452'
+    })
+
     // 进来显示用户信息
     const userData = localStorage.getItem('daliCK')
     this.userData = JSON.parse(userData).user
-    // 进页面拿数据--藏品登记
-    const res = await getList({ pageNum: 1, pageSize: 99999 })
-    res.data.list.forEach((v) => {
-      if (v.status === 1 || v.status === 0) this.dingdong[0].inoc++
-    })
-    // 进页面拿数据--入库管理
-    const res1 = await getList1({ pageNum: 1, pageSize: 99999 })
-    res1.data.list.forEach((v) => {
-      if (v.status === 1 || v.status === 0) this.dingdong[1].inoc++
-    })
-    // 进页面拿数据--出库管理
-    const res2 = await getList2({ pageNum: 1, pageSize: 99999 })
-    res2.data.list.forEach((v) => {
-      if (v.status === 1 || v.status === 0 || v.status === 3) { this.dingdong[2].inoc++ }
-    })
-    // 进页面拿数据--藏品修改
-    const res4 = await getList4({ pageNum: 1, pageSize: 99999 })
-    res4.data.list.forEach((v) => {
-      if (v.status === 1) this.dingdong[3].inoc++
-    })
-    // 进页面拿数据--藏品注销
-    const res5 = await getList5({ pageNum: 1, pageSize: 99999 })
-    res5.data.list.forEach((v) => {
-      if (v.status === 1 || v.status === 0) this.dingdong[4].inoc++
-    })
-    // 进页面拿数据--藏品移库
-    const sta2 = await statistics2({ pageNum: 1, pageSize: 99999 })
-    sta2.data.list.forEach((v) => {
-      if (v.status === 1) this.dingdong[5].inoc++
-    })
-    // 进页面拿数据--征集品提用
-    // const col1 = await collect1({ pageNum: 1, pageSize: 99999 })
-    // col1.data.list.forEach(v => {
-    //   if (v.status === 1 || v.status === 0 || v.status === 3) this.dingdong[5].inoc++
-    // })
-    // 进页面拿数据--征集品修改
-    // const col3 = await collect3({ pageNum: 1, pageSize: 99999 })
-    // col3.data.list.forEach(v => {
-    //   if (v.status === 1) this.dingdong[6].inoc++
-    // })
-    // 进页面拿数据--征集品注销
-    // const col2 = await collect2({ pageNum: 1, pageSize: 99999 })
-    // col2.data.list.forEach(v => {
-    //   if (v.status === 1 || v.status === 0) this.dingdong[7].inoc++
-    // })
+    // 调用刷新方法
+    this.refresh()
   },
   beforeCreate () {}, // 生命周期 - 创建之前
   beforeMount () {}, // 生命周期 - 挂载之前
@@ -319,6 +360,7 @@ export default {
     height: 190px;
     margin: 30px 0 40px;
     .rukou {
+      font-size: 20px;
       color: #344d8f;
       font-weight: 700;
     }
@@ -389,6 +431,10 @@ export default {
           font-weight: 400;
           color: #404040;
         }
+        i {
+          cursor: pointer;
+          font-size: 22px;
+        }
       }
     }
      & > div:nth-of-type(2) {
@@ -404,6 +450,43 @@ export default {
       }
       position: relative;
     }
+    .centen{
+      .echarts2 {
+        padding-top: 20px;
+        position: absolute;
+        left: 50%;
+        transform: translateX(-50%);
+        bottom: 0;
+        width: 90%;
+        height: 90%;
+        .myTiao{
+          cursor: pointer;
+          margin: 14px 0;
+        }
+        .my_top{
+          display: flex;
+          justify-content: space-between;
+          p {
+            color: black;
+          }
+        }
+        .tiao {
+          position: relative;
+          border-radius: 18px;
+          width: 100%;
+          background-color: #ccc;
+          height: 18px;
+          .tiao_li {
+            position: absolute;
+            height: 18px;
+            left: 0;
+            top: 0;
+            border-radius: 18px;
+          }
+        }
+      }
+      position: relative;
+    }
     .right {
       position: relative;
       .table {
@@ -423,7 +506,9 @@ export default {
         margin-bottom: 20px;
         cursor: pointer;
         & > p {
-          margin-bottom: 10px;
+          margin: 20px 0 0 0;
+          color: #3C3C3C;
+          font-size: 18px;
         }
         display: flex;
         align-items: center;
@@ -436,7 +521,7 @@ export default {
         & > span {
           font-size: 20px;
           & > i {
-            font-size: 28px;
+            font-size: 38px;
             color: #0000ff;
             font-style: normal;
           }
@@ -453,11 +538,27 @@ export default {
       }
       .active {
         pointer-events: none;
+        p{
+          color: #ccc;
+        }
+        span{
+          color: #ccc;
+        }
+      }
+      .myCheck{
+        background-color: #4a78f4;
+        p{
+          color: #fff;
+        }
+        i {
+          color: #fff !important;
+        }
       }
 
     }
   }
-  .title{
+  .title1{
+    font-size: 20px;
     color: #344d8f;
     font-weight: 700;
     margin-bottom: 20px;