opms_wechat/frontend_mobile/pages/home/index.vue

<!--
 * @Author: liuzhenlin 461480418@qq.ocm
 * @Date: 2023-01-12 11:57:48
 * @LastEditors: wanglj
 * @LastEditTime: 2023-02-20 10:05:52
 * @Description: file content
 * @FilePath: \frontend_mobile\pages\home\index.vue
-->
<template>
  <view class="home">
    <view class="nav">
      <view :style="{ paddingTop }">
        <view class="title" :style="[{ height }, { lineHeight: height }]">首页</view>
      </view>
    </view>
    <view class="header">
      <view class="h-left">
        <text class="name">大数华创</text>
        <text class="txt">提升工作效率，降低管理难度</text>
        <view class="line"></view>
      </view>
      <view class="h-right"></view>
    </view>
    <view class="main">
      <view class="msg-box">
        <view class="tab-date-wrap">
          <text class="tab-date-item" @click="tabDate = 'week'" :class="{ dateActive: tabDate == 'week' }">本周</text>
          <text class="tab-date-item" @click="tabDate = 'month'" :class="{ dateActive: tabDate == 'month' }">本月</text>
        </view>
        <view class="date-msg">
          <u-row justify="space-between">
            <u-col span="4">
              <view class="center flex-column">
                <view class="num">12</view>
                <view class="txt">新增客户</view>
              </view>
            </u-col>
            <u-col span="4">
              <view class="center flex-column">
                <view class="num">19</view>
                <view class="txt">新增项目</view>
              </view>
            </u-col>
            <u-col span="4">
              <view class="center flex-column">
                <view class="num">12</view>
                <view class="txt">督办事项</view>
              </view>
            </u-col>
          </u-row>
        </view>
      </view>
      <view class="menu-wrap">
        <u-row justify="space-between" gutter="14">
          <u-col span="6">
            <view class="menu-item flex_l flex-colunm" @click="handleHomeLink('/pages/openSeaCustomer/index')">
              <view class="menu-img-box">
                <image class="menu-img" src="../../static/images/menu5.png" mode="scaleToFill" />
              </view>
              <view class="menu-info flex flex-column">
                <view class="tit1">公海客户</view>
                <view class="tit2">公海客户管理</view>
              </view>
            </view>
          </u-col>
          <u-col span="6">
            <view class="menu-item flex_l flex-colunm" @click="handleHomeLink('/pages/customer/index')">
              <view class="menu-img-box">
                <image class="menu-img" src="../../static/images/menu1.png" mode="scaleToFill" />
              </view>
              <view class="menu-info flex flex-column">
                <view class="tit1">客户管理</view>
                <view class="tit2">客户信息管理</view>
              </view>
            </view>
          </u-col>
        </u-row>
        <u-row justify="space-between" gutter="14">
          <u-col span="6">
            <view class="menu-item flex_l flex-colunm" @click="handleHomeLink('/pages/project/index')">
              <view class="menu-img-box">
                <image class="menu-img" src="../../static/images/menu2.png" mode="scaleToFill" />
              </view>
              <view class="menu-info flex flex-column">
                <view class="tit1">项目管理</view>
                <view class="tit2">项目进展查询</view>
              </view>
            </view>
          </u-col>
          <u-col span="6">
            <view class="menu-item flex_l flex-colunm" @click="handleHomeLink('/pages/contract/index')">
              <view class="menu-img-box">
                <image class="menu-img" src="../../static/images/menu3.png" mode="scaleToFill" />
              </view>
              <view class="menu-info flex flex-column">
                <view class="tit1">合同管理</view>
                <view class="tit2">合同信息查阅</view>
              </view>
            </view>
          </u-col>
        </u-row>
        <u-row justify="space-between" gutter="14">
          <u-col span="6">
            <view class="menu-item flex_l flex-colunm">
              <view class="menu-img-box">
                <image class="menu-img" src="../../static/images/menu4.png" mode="scaleToFill" />
              </view>
              <view class="menu-info flex flex-column">
                <view class="tit1">回款管理</view>
                <view class="tit2">回款数据展示</view>
              </view>
            </view>
          </u-col>
          <u-col span="6">
            <view class="menu-item flex_l flex-colunm">
              <view class="menu-img-box">
                <image class="menu-img" src="../../static/images/menu6.png" mode="scaleToFill" />
              </view>
              <view class="menu-info flex flex-column">
                <view class="tit1">工单管理</view>
                <view class="tit2">工单进度查询</view>
              </view>
            </view>
          </u-col>
        </u-row>
      </view>
      <view class="echarts-container">
        <h4>个人报表</h4>
        <view class="echarts" v-for="item in echarts" :key="item.id">
          <h4>{{item.report_name}}</h4>
          <view class="chart">
            <l-echart :ref="item.id + ''" @finished="init(item.id)"></l-echart>
          </view>
        </view>
      </view>

      <!-- <view class="rank-wrap">
        <view class="rank-tit flex_l">
          <image class="rank-tit-img" src="../../static/images/rank-img.png" mode="scaleToFill" />
          <text>回款排名</text>
        </view>
        <view class="rank-list-wrap">
          <view class="rank-th">
            <u-row justify="space-between">
              <u-col span="2">
                <view class="th1 text-center">排名</view>
              </u-col>
              <u-col span="4">
                <view class="th2 text-center">姓名</view>
              </u-col>
              <u-col span="6">
                <view class="th3 text-center">回款额</view>
              </u-col>
            </u-row>
          </view>
          <view class="rank-list">
            <view class="rank-item" v-for="(v, i) in rankList" :key="i">
              <u-row justify="space-between">
                <u-col span="2">
                  <view class="rank-box center">
                    <image
                      class="rank-img"
                      v-if="i < 3"
                      :src="require(`../../static/images/rank${i + 1}.png`)"
                      mode=""></image>
                    <view v-else class="th1 text-center rank">{{ i + 1 }}</view>
                  </view>
                </u-col>
                <u-col span="4">
                  <view class="th2 text-center">{{ v.name }}</view>
                </u-col>
                <u-col span="6">
                  <view class="th3 text-center">
                    <u-text mode="price" :text="v.money"></u-text>
                  </view>
                </u-col>
              </u-row>
            </view>
          </view>
          <view class="view-all">查看全部排名 ></view>
        </view>
      </view> -->
    </view>
  </view>
</template>

<script>
  import indexApi from '@/api/system/index.js'
  import to from 'await-to-js'
  import LEchart from '@/uni_modules/lime-echart/components/l-echart/l-echart.vue';
  import * as echarts from '@/uni_modules/lime-echart/static/echarts.min'
  export default {
    name: 'omsIndex',
    data() {
      return {
        height: '',
        paddingTop: '',
        tabDate: 'week',
        rankList: [{
            name: '邱国辉',
            money: '100000',
          },
          {
            name: '邱国辉',
            money: '100000000',
          },
          {
            name: '邱国辉',
            money: '100000000',
          },
          {
            name: '邱国辉',
            money: '100000000',
          },
          {
            name: '邱国辉',
            money: '100000000',
          },
        ],
        echarts: [],
      }
    },
    created() {
      const navData = uni.getMenuButtonBoundingClientRect()
      this.height = navData.height + 'px'
      this.paddingTop = navData.top + 'px'
    },
    mounted() {
      this.getEcharts()
    },
    components: {
      LEchart
    },
    methods: {
      handleHomeLink(url) {
        uni.navigateTo({
          //保留当前页面，跳转到应用内的某个页面
          url,
        })
      },
      async getEcharts() {
        const [err, res] = await to(indexApi.getHomeReport({
          module_code: 'HomePage'
        }))
        if (err) return
        const obj = JSON.parse(res.data.configInfo)
        this.echarts = obj.data_report_config || []
      },
      async init(id) {
        console.log(id, 'id')
        const [err, res] = await to(indexApi.getHomeDataReportData({
          id
        }))
        if (err) return
        const option = {
          grid: {
            bottom: 10,
            top: 20,
            right: 10,
            containLabel: true
          },
          tooltip: {
            trigger: 'axis',
          },
          xAxis: [{
            type: 'category',
            data: res.data.data.xData,
            axisTick: {
              alignWithLabel: true,
            },
          }, ],
          yAxis: [{
            type: 'value',
            name: '(元)',
            nameLocation: 'start'
          }, ],
          series: [{
              name: '销售指标',
              type: 'bar',
              data: res.data.data.yDataTarget,
            },
            {
              name: '销售额度',
              type: 'bar',
              data: res.data.data.yDataReal,
            },
          ],
        }
        console.log(this.$refs[id][0], 'id')
        this.$refs[id][0].init(echarts, chart => {
          chart.setOption(option);
        });
      },
    },
  }
</script>
<style>
  page {
    background: #f2f3f5;
  }
</style>
<style lang="scss" scoped>
  .home {
    padding-top: 210rpx;

    .nav {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 556rpx;
      background: linear-gradient(193deg, rgba(62, 126, 248, 1) 0%, rgba(226, 236, 255, 1) 100%);
      border-radius: 0 0 92rpx 92rpx;
      z-index: -1;

      .title {
        text-align: center;
        font-size: 32rpx;
        font-weight: bold;
        color: #ffffff;
      }
    }

    .header {
      padding: 0 75rpx;
      display: flex;

      .h-left {
        box-sizing: border-box;
        padding-top: 30rpx;
        display: flex;
        color: #ffffff;
        flex: 1;
        display: flex;
        flex-flow: column;

        .name {
          font-size: 32rpx;
          font-weight: bold;
          margin-bottom: 12rpx;
        }

        .txt {
          font-size: 24rpx;
          margin-bottom: 20rpx;
        }

        .line {
          width: 46rpx;
          border: 2rpx solid #ffffff;
        }
      }

      .h-right {
        width: 115px;
        height: 115px;
        background: url('../../static/images/home1.png') no-repeat;
        background-size: cover;
      }
    }

    .main {
      box-sizing: border-box;
      padding: 0 32rpx 46rpx;

      .msg-box {
        width: 100%;
        height: 185rpx;
        background: #ffffff;
        box-shadow: 0 6rpx 19rpx 2rpx rgba(0, 45, 132, 0.15);
        border-radius: 31rpx 31rpx 31rpx 31rpx;
        margin: 0 auto;



        .tab-date-wrap {
          padding: 8rpx 0 24rpx 38rpx;

          .tab-date-item {
            font-size: 24rpx;
            font-weight: bold;
            color: #d8e5fe;
            margin-right: 16rpx;
          }

          .dateActive {
            font-size: 28rpx;
            color: #3e7ef8;
          }
        }

        .date-msg {
          .num {
            font-size: 38rpx;
            font-weight: bold;
            color: #fe6936;
            margin-bottom: 4rpx;
          }

          .txt {
            font-size: 24rpx;
            color: #646464;
          }
        }
      }

      .menu-wrap {
        .menu-item {
          margin-top: 32rpx;
          background: #ffffff;
          box-shadow: 0 6rpx 19rpx 2rpx rgba(0, 45, 132, 0.15);
          border-radius: 31rpx;
          padding: 40rpx 0 40rpx 52rpx;

          .menu-img-box {
            margin-right: 14rpx;
            display: flex;
            align-items: center;
            justify-content: center;
          }

          .menu-img {
            width: 36px;
            height: 36px;
          }

          .menu-info {
            display: flex;

            .tit1 {
              font-size: 28rpx;
              font-weight: bold;
              color: #323232;
              margin-bottom: 12rpx;
            }

            .tit2 {
              font-size: 24rpx;
              color: #646464;
            }
          }
        }
      }

      .rank-wrap {
        margin-top: 34rpx;

        .rank-tit {
          margin-bottom: 18rpx;

          .rank-tit-img {
            margin: 0 10rpx 0 28rpx;
            width: 31rpx;
            height: 31rpx;
          }

          text {
            font-size: 28rpx;
            font-weight: bold;
            color: #323232;
          }
        }

        .rank-list-wrap {
          width: 100%;
          background: #ffffff;
          border-radius: 31rpx;

          .rank-th {
            padding: 34rpx 0 20rpx 72rpx;
          }

          .rank-list {
            margin-bottom: 24rpx;

            .rank-item {
              .rank-box {
                .rank-img {
                  width: 41px;
                  height: 42px;
                }

                .rank {
                  width: 41px;
                  height: 42px;
                  line-height: 42px;
                  font-size: 28rpx;
                  font-weight: bold;
                  color: #969696;
                }
              }

              padding: 19rpx 0 19rpx 72rpx;

              &:not(:last-child) {
                border-bottom: 2rpx solid #f2f3f5;
              }
            }
          }
        }

        .view-all {
          font-size: 24rpx;
          color: #3e7ef8;
          text-align: center;
          height: 60rpx;
        }
      }

      .echarts-container {
        background-color: #fff;
        box-shadow: 0 6rpx 19rpx 2rpx rgba(0, 45, 132, 0.15);
        border-radius: 31rpx 31rpx 31rpx 31rpx;
        margin: 0 auto;
        margin-top: 32rpx;
        padding: 0 20rpx 20rpx;

        h4 {
          font-size: 28rpx;
          line-height: 80rpx;
          font-weight: bold;
          color: #323232;
          padding-left: 40rpx;
        }

        .echarts {
          height: 480rpx;
          box-shadow: 0 6rpx 19rpx 2rpx rgba(0, 45, 132, 0.15);
          border-radius: 31rpx 31rpx 31rpx 31rpx;
          + .echarts {
            margin-top: 32rpx;
          }
          .chart {
            height: 400rpx;
          }


        }
      }
    }
  }
</style>