clsd/admin-ui/src/views/index_admin.vue

<template>
  <div class="dashboard-editor-container">
    <top title="欢迎使用承揽时代管理端"></top>
    <div class="chart-wrapper">
      <div class="pop" style="width: 65%">
        <div class="out">
          <div class="int">
            <div class="bos">
              <div class="lab">
                <div class="bsg"></div>
                <div class="tit">平台信息</div>
              </div>
              <platform :money="data.currentMoney"></platform>
              <arows :cdata="data" row="结算单"></arows>
            </div>
          </div>
        </div>
        <div class="out">
          <div class="int">
            <div class="bos">
              <div class="lab">
                <div class="bsg"></div>
                <div class="tit">快捷菜单</div>
              </div>
              <arows :cdata="data" row="快捷菜单"></arows>
            </div>
          </div>
        </div>
        <div class="out">
          <div class="int">
            <div class="bos">
              <div class="lab">
                <div class="bsg"></div>
                <div class="tit">企业交易金额统计</div>
              </div>
              <div class="years">
                <el-date-picker class="dpicker" :clearable="false" v-model="year" type="year" value-format="yyyy" placeholder="请选择年份"></el-date-picker>
                <div class="year" :class="{ active: current == index }" @click="current = index" v-for="(item, index) in type" :key="index">{{ item.name }}</div>
              </div>
              <BarChart :chartData="chartData" height="270px"></BarChart>
            </div>
          </div>
        </div>
      </div>
      <!--待办事项-->
      <div class="pop" style="width: 35%">
        <div class="out mar0">
          <div class="int">
            <div class="bos">
              <arows :cdata="data" row="待办事项"></arows>
            </div>
          </div>
        </div>
        <div class="out mar0">
          <div class="int">
            <div class="bos">
              <div class="lab">
                <div class="bsg"></div>
                <div class="tit">统计概览</div>
              </div>
              <arows :cdata="data" row="统计概览"></arows>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import top from '@/views/dashboard/top';
  import arows from '@/views/dashboard/arows';
  import BarChart from './dashboard/BarChart';
  import platform from '@/components/platform';
  export default {
    components: {
      platform,
      top,
      arows,
      BarChart
    },
    data() {
      return {
        user: this.$store.state.user,
        noticeList: [],
        data: {},
        current: 0,
        chartData: [],
        year: this.util.getDate('year'),
        type: [
          { name: '充值金额', value: 0 },
          { name: '提现金额', value: 1 },
          { name: '发放金额', value: 2 }
        ]
      };
    },
    watch: {
      current(val) {
        this.getRecord();
      },
      year(val) {
        this.getRecord();
      }
    },
    created() {
      this.getData();
      this.getRecord();
    },
    methods: {
      getData() {
        this.ajax({ url: '/home/index' }).then((response) => {
          this.data = response.data.count;
          if (response.data.count.gives > 0 || response.data.count.recharge > 0 || response.data.count.moneyOut > 0) {
            setTimeout(() => {
              this.$notify({
                title: '待办事项',
                dangerouslyUseHTMLString: true,
                message: '你有待处理事项，请及时处理',
                type: 'error',
                duration: 0
              });
            }, 1000);
          }
        });
      },
      getRecord() {
        this.ajax({ url: '/work/company/statistics/chart', data: { year: this.year, type: this.current } }).then((response) => {
          this.chartData = response.data;
        });
      }
    }
  };
</script>

<style lang="scss" scoped>
  .bos {
    border: 0px;
  }
</style>