dvcp_v2_wxcp_app/src/project/saas/AppHome/components/Home.vue

<template>
  <div class="Home">
    <div class="tips">
      <img src="../img/home/tips-icon.png" alt="">慧政务改版上线了，点此查看帮助文档！
    </div>
    <div class="content">
      <div class="user-info">
        <div class="left">
          <img :src="user.avatar" alt="" v-if="user.avatar">
          <img src="../img/user-icon.png" alt="" v-else>
        </div>
        <div class="right">
          <p class="name">你好，<AiOpenData v-if="user.wxUserId" type="userName" :openid="user.wxUserId"></AiOpenData></p>
          <p class="time">您已加入慧政务 <span>15</span>天</p>
        </div>
      </div>
      <div class="app-list">
        <div class="item" v-for="(item, index) in appList" :key="index" @click="linkTo(item.linkUrl)">
          <img :src="item.img" alt="">
          <p>{{ item.title }}</p>
        </div>
      </div>
      <div class="title">数据统计</div>
      <div class="tab-content">
        <div class="item" v-for="(item, index) in tabStatistics" :key="index">
          <p><span></span>{{ item.title }}</p>
          <div>{{ item.num }}</div>
        </div>
      </div>
      <div class="title">居民活跃指数</div>
      <div class="chart-content" id="statistic"></div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import echarts from 'echarts'
export default {
  name: "Home",
  data() {
    return {
      appList: [
        {
          img: require('../img/home/home-jmgl-icon.png'),
          title: '居民管理',
          linkUrl: '/apps/AppResidentDocument/AppResidentDocument'
        },
        {
          img: require('../img/home/home-zfww-icon.png'),
          title: '走访慰问',
          linkUrl: '/apps/AppWalkask/AppWalkask'
        },
        {
          img: require('../img/home/home-mdtj-icon.png'),
          title: '矛盾调解',
          linkUrl: '/apps/AppConflictMediation/AppConflictMediation'
        },
        {
          img: require('../img/home/home-xftj-icon.png'),
          title: '宣发统计',
          linkUrl: '/apps/AppCooperationPropaganda/AppCooperationPropaganda'
        }
      ],
      tabStatistics: [
        {
          title: '网格数',
          num: 15
        },
        {
          title: '网格员数',
          num: 35
        },
        {
          title: '辖区户数',
          num: 1550
        },
        {
          title: '居民群数',
          num: 15
        }
      ],
      echartData: null
    }
  },
  computed: { ...mapState(['user']) },
  methods: {
    chartInit() {
      this.echartData = echarts.init(document.getElementById('statistic'))
      var option = {
        grid: {
          left: '6%',
          right: '8%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [150, 230, 224, 218, 135, 147, 260],
            type: 'line',
            lineStyle: {
              normal: {
                color: '#2891FF'
              }
            },
            itemStyle : {
              normal : {
                color:'#2891FF',
              }
            }
          }
        ]
      };
      this.echartData.setOption(option)
    },
    linkTo(url) {
      uni.navigateTo({ url })
    }
  },
  created() {
    this.$nextTick(() => {
      this.chartInit()
    })
  },
}
</script>

<style lang="scss" scoped>
.Home {
  .tips {
    padding: 24px 32px;
    background-color: #3975C6;
    font-size: 28px;
    font-family: PingFangSC-Regular, PingFang SC;
    color: #FFF;
    line-height: 40px;
    img {
      width: 32px;
      height: 32px;
      margin-right: 16px;
      vertical-align: middle;
    }
  }
  .content {
    padding: 0 32px;
    .user-info {
      display: flex;
      padding: 48px 0 32px 0;
      .left {
        width: 96px;
        height: 96px;
        margin-right: 32px;
        img {
          width: 96px;
          height: 96px;
          border-radius: 50%;
          border: 4px solid #FFFFFF;
          box-sizing: border-box;
        }
      }
      .right {
        width: calc(100% - 128px);
        margin-top: 6px;
        .name {
          font-size: 32px;
          font-family: PingFangSC-Regular, PingFang SC;
          color: #333;
          line-height: 44px;
        }
        .time {
          font-size: 28px;
          font-family: PingFangSC-Regular, PingFang SC;
          color: #999;
          line-height: 40px;
          span {
            color: #3975C6;
          }
        }
      }
    }
    .app-list {
      width: 100%;
      background: #FFF;
      box-shadow: 0 0 8px 0 rgba(0,0,0,0.0200);
      border-radius: 8px;
      display: flex;
      .item {
        flex: 1;
        text-align: center;
        padding: 24px 0;
        img {
          width: 64px;
          height: 64px;
          margin-bottom: 8px;
        }
        p {
          font-size: 26px;
          font-family: PingFangSC-Regular, PingFang SC;
          color: #333;
          line-height: 36px;
        }
      }
    }
    .title {
      padding: 48px 0 24px 0;
      font-size: 32px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #333;
      line-height: 44px;
    }
    .tab-content {
      .item {
        display: inline-block;
        width: 336px;
        height: 160px;
        background: #FFF;
        box-shadow: 0 0 8px 0 rgba(0,0,0,0.0200);
        border-radius: 16px;
        padding: 24px;
        box-sizing: border-box;
        margin-bottom: 16px;
        p {
          font-size: 28px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #666;
          line-height: 40px;
          margin-bottom: 8px;
          span {
            display: inline-block;
            width: 16px;
            height: 16px;
            border-radius: 50%;
            border: 4px solid #3975C6;
            margin-right: 8px;
            box-sizing: border-box;
          }
        }
        div{
          font-size: 48px;
          font-family: PingFangSC-Semibold, PingFang SC;
          font-weight: 600;
          color: #333;
          line-height: 64px;
          padding-left: 24px;
        }
        
      }
      .item:nth-of-type(2n-1) {
        margin-right: 14px;
      }
      .item:nth-last-of-type(1) {
        p {
          span {
            border-color: #3ACEB3;
          }
        }
      }
    }
    .chart-content{
      width: 686px;
      height: 514px;
      background: #FFF;
      box-shadow: 0 0 8px 0 rgba(0,0,0,0.0200);
      border-radius: 8px;
      margin-bottom: 82px;
    }
  }
}
</style>