shengqingqixie-admin/src/pages/association/system.vue

<template>
  <div>
    <t-row :gutter="[16, 16]">
      <t-col :xs="12" :xl="6">
        <t-card title="空间使用情况" subtitle="(MB)" class="dashboard-chart-card" :bordered="false">
          <div
            id="countContainer"
            ref="countContainer"
            style="width: 326px;height: 326px;margin: 0 auto"
          ></div>
          <div>空间总量：{{info.totalSpaceInMB}} MB</div>
          <div>已使用：{{info.usedSpaceInMB}} MB</div>
        </t-card>
      </t-col>
      <t-col :xs="12" :xl="6">
        <t-card title="流量统计" subtitle="(GB)" class="dashboard-chart-card" :bordered="false">
          <div
            id="LLContainer"
            ref="LLContainer"
            style="width: 326px;height: 326px;margin: 0 auto"
          ></div>
          <div>流量总量：{{info.totalSpaceInMB}} MB</div>
          <div>已使用：{{info.usedSpaceInMB}} MB</div>
        </t-card>
      </t-col>
    </t-row>
    <div style="margin-top: 15px;">
      <t-card :bordered="false" style="padding: 20px">
        <t-row :gutter="[16, 16]">
          <t-col :span="5" :offset="3">
            <t-form :labelWidth="150">
              <t-form-item label="绑定主体">
                <t-input size="large" :disabled="true" v-model="association.association_name"/>
              </t-form-item>
              <t-form-item label="微信支付商户号">
                <t-input size="large" placeholder="请输入微信支付商户号" v-model="pay.mchID"/>
              </t-form-item>
              <t-form-item label="微信支付密钥V3">
                <t-input size="large" placeholder="请输入微信支付密钥V3" v-model="pay.appkey"/>
              </t-form-item>
              <t-form-item label="证书序列号">
                <t-input size="large" placeholder="请输入证书序列号" v-model="pay.serial"/>
              </t-form-item>
            </t-form>
            <div style="text-align: center;margin-top: 30px">
              <t-button theme="primary" style="width: 200px">保存</t-button>
            </div>
          </t-col>
        </t-row>
      </t-card>
    </div>
  </div>
</template>
<script setup lang="ts">
import store from '@/store';
import * as echarts from "echarts/core";
import {LineChart, PieChart} from "echarts/charts";
import {CanvasRenderer} from "echarts/renderers";
import { TooltipComponent, LegendComponent } from 'echarts/components';
echarts.use([TooltipComponent, LegendComponent, PieChart, LineChart, CanvasRenderer]);

export default {
  data() {
    return {
      subject: '',
      association: '',
      pay: {
        mchID: '',
        appkey: '',
        serial: '',
      },
      info:{},
      One_data: {
        tooltip: {
          show: true,
          trigger: 'axis',
          position: null,
        },
        series: [
          {
            name: '空间使用情况',
            type: 'pie',
            radius: ['35%', '60%'],
            avoidLabelOverlap: false,
            selectedMode: false,
            hoverAnimation: true,
            silent: false,
            itemStyle: {
              borderColor: "#666666",
              borderWidth: 1,
            },
            label: {
              show: true,
              formatter: '{value|{d}%} \n {name|{b}剩余}',
              rich: {
                value: {
                  color: "#000000",
                  fontSize: 28,
                  fontWeight: 'normal',
                  lineHeight: 46,
                },
                name: {
                  color: '#909399',
                  fontSize: 12,
                  lineHeight: 14,
                },
              },
            },
            data: [],
          },
        ],
      }
    };
  },
  mounted() {
    if (typeof (store.state.user.association) == 'object') {
      this.association = store.state.user.association;
    } else {
      this.association = JSON.parse(store.state.user.association);
    }
    this.getInfo();

  },

  methods: {
    getInfo(){
      this.$request
        .post('/index/fileSize')
        .then((res) => {
          console.log(res);
          this.info=res.data;
          this.renderCharts(res.data);
        })
        .catch((e) => {
          console.log(e);
        });
    },
    renderCharts(data) {
      // 销售合同占比
      if (!this.countContainer) {
        this.countContainer = document.getElementById('countContainer');
      }
      this.countChart = echarts.init(this.countContainer);
      this.One_data.series[0].data=[{value: data.totalSpaceInMB,name: '空间总量'}, {value: data.usedSpaceInMB, name: '已使用'}];
      const option = this.One_data;
      this.countChart.setOption(option);
      if (!this.LLContainer) {
        this.LLContainer = document.getElementById('LLContainer');
      }
      this.LLContainer = echarts.init(this.LLContainer);
      const lloption = this.One_data;
      this.LLContainer.setOption(lloption);
    },
  }
}
</script>
<style scoped lang="less">
@import '@/style/variables.less';

.dashboard-item {
  padding: 8px;

  /deep/ .t-card__footer {
    padding-top: 0;
  }

  /deep/ .t-card__title {
    font-size: 14px;
    font-weight: 500;
  }

  /deep/ .t-card__body {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex: 1;
    position: relative;
    padding: 0px 20px;
  }

  &:hover {
    cursor: pointer;
  }

  &-top {
    display: flex;
    flex-direction: row;
    align-items: flex-start;

    > span {
      display: inline-block;
      color: var(--td-text-color-primary);
      font-size: 36px;
      line-height: 44px;
    }
  }

  &-bottom {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;

    > .t-icon {
      cursor: pointer;
    }
  }

  &-block {
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 22px;
    color: var(--td-text-color-placeholder);
  }

  &-trend {
    margin-left: 8px;
  }

  &-left {
    position: absolute;
    top: 0;
    right: 32px;

    > span {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 56px;
      height: 56px;
      background: var(--td-brand-color-1);
      border-radius: 50%;

      .t-icon {
        font-size: 24px;
        color: var(--td-brand-color);
      }
    }
  }
}

.dashboard-chart-card {
  padding: 8px;

  /deep/ .t-card__header {
    padding-bottom: 0px;
  }

  /deep/ .t-card__title {
    font-size: 20px;
    font-weight: 500;
  }
}
</style>