water-ldht/src/views/operation/sys/index.vue

<template>
  <div class="container">
    <div class="echart-wrap">
      <div class="echart-item" style="width: 100%">
        <div class="echart-head">
          <h1 class="echart-title">时间选择</h1>
          <el-date-picker
            v-model="queryForm.month"
            type="month"
            size="small"
            format="YYYY-MM"
            placeholder="选择日期"
            @change="changeMonth"
          />
        </div>
      </div>
    </div>
    <el-statistic
      :value="basicData.loginCount"
      title="用户登录次数"
    ></el-statistic>
    <div class="echart-wrap" v-loading="Loading">
      <div class="echart-item" style="width: 100%">
        <div class="echart-head">
          <h1 class="echart-title">基础信息</h1>
        </div>
        <div class="wrap-content">
          <div class="wrap-content-item">
            <p>用户登录次数</p>
            <p>{{ basicData.loginCount }}</p>
          </div>
          <div class="wrap-content-item">
            <p>访问次数</p>
            <p>{{ basicData.visitsCount }}</p>
          </div>
          <div class="wrap-content-item">
            <p>总访问次数</p>
            <p>{{ basicData.totalVisitsCount }}</p>
          </div>
        </div>
      </div>
    </div>

    <div class="echart-wrap">
      <div class="echart-item" style="width: 100%">
        <div class="echart-head">
          <h1 class="echart-title">使用情况分析</h1>
        </div>
        <div class="echart-list">
          <div class="personnel-content-item">
            <user-analysis :time="month"></user-analysis>
          </div>
          <div class="personnel-content-item">
            <dept-analysis :time="month"></dept-analysis>
          </div>
        </div>
        <div class="echart-list">
          <div class="personnel-content-item">
            <module-analysis :time="month"></module-analysis>
          </div>
          <div class="personnel-content-item">
            <details-analysis :time="month"></details-analysis>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import userAnalysis from '@/views/operation/sys/analysis/userAnalysis';
import deptAnalysis from '@/views/operation/sys/analysis/deptAnalysis.vue';
import moduleAnalysis from '@/views/operation/sys/analysis/moduleAnalysis.vue';
import detailsAnalysis from '@/views/operation/sys/analysis/detailsAnalysis.vue';
import { getDate1 } from '@/common/times';
import { baseInfo } from '@/api/sys';
export default {
  components: {
    userAnalysis,
    deptAnalysis,
    moduleAnalysis,
    detailsAnalysis,
  },
  data() {
    return {
      basicData: [],
      Loading: true,
      month: '',
      queryForm: {
        month: '',
      },
    };
  },
  created() {
    setTimeout(() => {
      this.defaultTime();
      this.baseInfo();
    }, 100);
  },
  methods: {
    async baseInfo() {
      const { data } = await baseInfo(this.queryForm);
      this.basicData = data;
      this.Loading = false;
    },
    defaultTime() {
      this.queryForm.month = this.month = getDate1();
    },
    changeMonth() {
      this.month = getDate1(this.queryForm.month);
    },
  },
};
</script>
<style lang="scss">
.container {
  background-color: rgba(0, 0, 0, 0.038);
  position: relative;

  .echart-wrap {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 20px;

    .echart-item {
      background-color: white;
      border-radius: 6px;

      .echart-head {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 15px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.08);

        .echart-title {
          font-size: 16px;
          font-weight: 500;
          margin: 0;
          line-height: 40px;
        }
      }
    }

    .wrap-content {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 15px;

      .wrap-content-item {
        width: 32%;
        text-align: center;
        border-radius: 6px;

        .wrap-content-item-h1 {
          font-size: 30px;
        }

        .wrap-content-item-h2 {
          font-size: 28px;
        }
      }
    }

    .wrap-content-second {
      padding: 0 15px;
      display: flex;
      justify-content: space-between;
      align-items: flex-start;

      .wrap-content-L {
        width: 70%;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        flex-wrap: wrap;
        .wrap-content-top {
          display: flex;
          justify-content: flex-start;
          align-items: center;
          width: 100%;
          .wrap-content-item {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            width: 30%;
            margin-top: 20px;
            .wrap-content-img {
            }
            .wrap-content-font {
              .wrap-content-size {
                font-size: 16px;
                font-weight: 500;
                margin: 0;
                margin-left: 10px;
              }
            }
          }
        }
        .wrap-content-bottom {
          display: flex;
          justify-content: flex-start;
          align-items: center;
          width: 100%;
          .wrap-content-item {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            width: 30%;
            margin: 20px 0;
            .wrap-content-img {
            }
            .wrap-content-font {
              .wrap-content-size {
                font-size: 16px;
                font-weight: 500;
                margin: 0;
                margin-left: 10px;
              }
            }
          }
        }
      }
      .wrap-content-R {
        width: 30%;
      }
    }

    .echart-list {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 15px;

      .personnel-content-item {
        width: 45%;
        .echart-title {
          margin: 15px 0 20px;
          text-align: center;
        }
      }

      .echart-line {
        background-color: rgba(0, 0, 0, 0.04);
        width: 1px;
        height: 200px;
      }
    }
  }
}
</style>