ams-backend/front/admin-front/src/views/dashboard/index.vue

<template>
  <div class="dashboard-container">
    <div class="head">
      <div class="left">
        <div class="item">
          <div class="number">
            {{ countFee.expendGas }}
          </div>
          <div class="title">
            支出/气体
          </div>
        </div>
        <div class="verticalLine"/>
        <div class="item">
          <div class="number">
            {{countFee.principalBalance}}
          </div>
          <div class="title">
            剩余本金
          </div>
        </div>
        <div class="verticalLine"/>
        <div class="item">
          <div class="number">
            {{countFee.predictTotalCost}}
          </div>
          <div class="title">
            预计支出总费用
          </div>
        </div>
<!--        <div class="verticalLine"/>-->
<!--        <div class="item">-->
<!--          <div class="number">-->
<!--            88222-->
<!--          </div>-->
<!--          <div class="title">-->
<!--            预计空投价值-->
<!--          </div>-->
<!--        </div>-->
      </div>
      <div class="right" @click="drawerFinance = true">
        <img src="../../assets/dashboard/upload.svg" alt="upload">
        导出财务报表
      </div>
    </div>
    <div class="main">
      <div class="left">
        <div class="expenseAndInput">
          <div class="expense">
            <div class="head">
              <div class="title">
                支出趋势
              </div>
              <div style="width: 300px;display: flex;justify-content: space-between;z-index: 10">
                <div @click='changeActive(index)' :class='isActive === index ? "myWallet-text2" : "myWallet-text3"'
                     v-for="(item,index) in day">
                  {{ item }}
                </div>
                <el-popover placement="right" trigger="click">
                  <div slot="reference" class="myWallet-text4">
                    Custom
                  </div>
                  <el-date-picker
                    v-model="datePicker"
                    type="daterange"
                    align="center"
                    range-separator="To"
                    start-placeholder="开始时间"
                    end-placeholder="结束时间"
                    :disabled-date="disabledDate"
                    @change="datePickerChange"
                  />
                </el-popover>
              </div>

            </div>
            <div class="emissionBonus" id="expense">

            </div>
          </div>
          <div class="input">
            <div class="title">
              预计投入/USDT
            </div>
            <div class="emissionBonus" id="input">

            </div>
            <div class="expected">
              <div class="text">
                预期投入
              </div>
              <div class="amount">
                888232
              </div>
            </div>
            <div class="info">
              共{{echartsInputData.totalCount}}项
            </div>
            <div class="info">
              总支出:{{echartsInputData.totalCost}}
            </div>
            <div class="progress">
              <div class="progress">

              </div>
            </div>
          </div>
        </div>
        <div class="missionAndAddress">
          <div class="mission">
            <div class="title">
              交互任务进度
            </div>
            <div style="margin-top: 20px;height: 230px;overflow: hidden" id="progressViewBox" @mouseenter="rollStop()" @mouseleave="rollStart(60)">
              <div class="progressBox" id="progressBoxOne">
                <div class="item" v-for="(item,index) in progressData">
                  <div class="name">
                    {{ item.taskName }}
                  </div>
                  <div class="progress">
                    <div class="progress" :style="{width:(item.finishCount/item.totalCount*100)+'%'}"></div>
                  </div>
                </div>
              </div>
              <div class="progressBox" id="progressBoxTwo">

              </div>
            </div>

          </div>

          <div class="address">
            <div class="title">
              地址统计
            </div>
            <div class="emissionBonus" id="address">

            </div>
          </div>
        </div>
      </div>
      <div class="right">
        <div class="title">
          燃气报价(单位:元)
        </div>
        <div class="base">
          当前基数:38基于以太坊交易内存池预测
        </div>
        <div class="gasBox">
          <div class="top">
            <div class="item">
              <img src="../../assets/dashboard/Vector.svg" alt="Vector">
              <div class="info">
                <div class="speed">
                  Top 40
                </div>
                <div class="price">
                  $1.57 | for 15 seconds
                </div>
              </div>
            </div>
          </div>
          <div class="high">
            <div class="item">
              <img src="../../assets/dashboard/Vector-1.svg" alt="Vector">
              <div class="info">
                <div class="speed">
                  High speed 40
                </div>
                <div class="price">
                  $1.53 | 1 minute
                </div>
              </div>
            </div>
          </div>
          <div class="general">
            <div class="item">
              <img src="../../assets/dashboard/Vector-2.svg" alt="Vector">
              <div class="info">
                <div class="speed">
                  General 40
                </div>
                <div class="price">
                  $1.49 | 3 minutes
                </div>
              </div>
            </div>
          </div>
          <div class="slow">
            <div class="item">
              <img src="../../assets/dashboard/Vector-3.svg" alt="Vector">
              <div class="info">
                <div class="speed">
                  Slow 40
                </div>
                <div class="price">
                  $1.49 | > 10 minutes
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="logo">
          <img src="../../assets/dashboard/image.svg" alt="image">
        </div>
      </div>
    </div>
    <el-drawer
      :visible.sync="drawerFinance"
      :with-header="false">
      <div class="drawerAddress-container">
        <div class="drawerAddress-container-head">
          <div class="drawerAddress-container-head-left">
            <div class="drawerAddress-container-title">
              邮件通知
            </div>
            <div class="drawerAddress-container-tip">
              总计邮件: 2
            </div>
          </div>
          <div class="drawerAddress-container-head-right">
            <div class="complete" @click="exportingReports">
              <img src="../../assets/address/done_all.svg" alt="done_all">
              确认导出
            </div>
          </div>
        </div>
        <div class="drawerAddress-container-main">
          <div class="moduleBox">
            <div class="title">
              导出项目
            </div>
            <div class="input">
              <el-select style="width: 100%" v-model="project" placeholder="选择导出项目">
                <el-option
                  v-for="item in optionsProject"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </div>
          </div>

          <div class="timeBox">
            <div class="title">
              导出内容
            </div>
            <div class="input">
              <el-select style="width: 100%" v-model="project" placeholder="选择导出内容">
                <el-option
                  v-for="item in optionsProject"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </div>
          </div>

          <div class="emailBox">
            <div class="title">
              时间范围
            </div>
            <div class="block">
              <el-date-picker
                v-model="time"
                type="daterange"
                align="right"
                unlink-panels
                style="width: 100%"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :picker-options="pickerOptions">
              </el-date-picker>
            </div>
          </div>

        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import {addressGroup, countFee, dailyCost, expectedInput, taskProgress} from "@/api/statistics";

export default {
  name: "Dashboard",
  data() {
    return {
      progressData: [],
      isActive: 0,
      day: ['7D', '30D', 'All'],
      visible: false,
      datePicker: [],
      drawerFinance:false,
      project:'',
      optionsProject: [
        {
          value: '1',
          label: 'zkSync'
        }
      ],
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      time:'',
      countFee:{
        expendGas:0,
        predictTotalCost:0,
        principalBalance:0,
      },
      echartsInputData:{
        totalCost:0,
        totalCount:0,
        predicts:[]
      },
      echartsExpenseData:{
        timeData:[],
        seriesDataGas:[],
        seriesDataP:[]
      },
      echartsAddressData:{
        xAxisData:[],
        seriesData:[]
      },
      timer:null
    };
  },
  mounted() {
    this.getExpectedInput()
    this.getCountFee()
    this.getDailyCost()
    this.getTaskProgress()
    this.getAddressGroup()
    this.roll(60)
  },
  beforeDestroy() {
    if(this.timer) clearInterval(this.timer)
  },
  methods: {
    initEchartsAddress() {
      let chartDom = document.getElementById('address');
      let myChart = echarts.init(chartDom, undefined, {
        renderer: 'svg'
      });
      let option;
      option = {
        textStyle: {
          fontFamily: 'Quicksand'
        },
        tooltip: {
          trigger: 'axis',

        },
        xAxis: {
          offset: 20,
          type: 'category',
          data: this.echartsAddressData.xAxisData,
          axisLabel: {
            color: '#ABABAB'
          },
          axisTick: {
            show: false
          },
          axisPointer: {
            type: 'shadow'
          }
        },
        yAxis: {
          offset: 20,
          type: 'value',
          axisLabel: {
            color: '#ABABAB'
          },
        },
        dataZoom: [
          {
            type: 'inside'
          }
        ],
        series: [
          {
            data: this.echartsAddressData.seriesData,
            type: 'bar',
            barWidth: '15%',
            itemStyle: {
              color: '#27AE60',
              borderRadius: [30, 30, 0, 0]
            }
          }
        ]
      };
      option && myChart.setOption(option);
    },
    initEchartsInput() {
      let chartDom = document.getElementById('input');
      let myChart = echarts.init(chartDom, undefined, {
        renderer: 'svg'
      });
      let option;
      option = {
        tooltip: {
          trigger: 'item'
        },
        series: [
          {
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            labelLine: {
              show: false
            },
            data: this.echartsInputData.predicts
          }
        ]
      };
      option && myChart.setOption(option);
    },
    initEchartsExpense(){
      let chartDom = document.getElementById('expense');
      let myChart = echarts.init(chartDom, undefined, {
        renderer: 'svg'
      });
      let option;
      option = {
        dataZoom: [
          {
            type: 'inside'
          }
        ],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        legend: {
          icon: 'circle',
        },
        xAxis: [
          {
            offset: 10,
            type: 'category',
            axisLabel: {
              color: '#ABABAB',
              fontWeight: 500
            },
            axisTick: {
              show: false
            },
            data: this.echartsExpenseData.timeData
          }
        ],
        yAxis: [
          {
            offset: 10,
            axisLabel: {
              color: '#181818',
              fontWeight: 700
            },
            type: 'value'
          }
        ],
        series: [
          {
            name: 'Gas',
            type: 'bar',
            stack: 'Total',
            color: '#2980FF',
            barMaxWidth: '25px',
            emphasis: {
              focus: 'series'
            },
            data: this.echartsExpenseData.seriesDataGas
          },
          {
            name: '本金',
            type: 'bar',
            stack: 'Total',
            color: '#FFD428',
            barMaxWidth: '25px',
            itemStyle: {
              borderRadius: [100, 100, 0, 0]
            },
            emphasis: {
              focus: 'series'
            },
            data: this.echartsExpenseData.seriesDataP
          },
        ]
      };
      option && myChart.setOption(option);
    },

    changeActive(index) {
      this.isActive = index
    },
    changeInitCalendarPage() {
      let element = document.querySelector(".el-picker-panel__icon-btn.arrow-left");
      if (element) {
        element.click()
      }
    },
    disabledDate(time) {
      return time.getTime() > Date.now()
    },
    datePickerChange() {
      this.visible = false
      if (this.datePicker) {
        console.log(this.datePicker);
      } else {
        // changeActive(0)
      }
    },
    exportingReports(){

    },
    getExpectedInput(){
      expectedInput().then(res=>{
        this.echartsInputData = res
        this.echartsInputData.predicts.forEach(item=>{
          item.value = item.estimatedCost
          item.name = item.projectName
        })
        this.initEchartsInput()
      })
    },
    getCountFee(){
      countFee().then(res=>{
        this.countFee = res
      })
    },
    getDailyCost(){
      dailyCost().then(res=>{
        this.echartsExpenseData = {
          timeData:[],
          seriesDataGas:[],
          seriesDataP:[]
        }
        res.forEach(item=>{
          this.echartsExpenseData.timeData.push(item.date)
          this.echartsExpenseData.seriesDataGas.push(item.gas)
          this.echartsExpenseData.seriesDataP.push(item.principal)
        })
        this.initEchartsExpense()
      })
    },
    getTaskProgress(){
      taskProgress().then(res=>{
        this.progressData = res
      })
    },
    getAddressGroup(){
      addressGroup().then(res=>{
        res.forEach(item=>{
          this.echartsAddressData.xAxisData.push(item.groupName)
          this.echartsAddressData.seriesData.push(item.addressCount)
        })
        this.initEchartsAddress()
      })
    },

    roll(t) {
      let ul1 = document.getElementById('progressBoxOne')
      let ul2 = document.getElementById('progressBoxTwo')
      let ulbox = document.getElementById('progressViewBox')
      ul2.innerHTML = ul1.innerHTML
      ulbox.scrollTop = 0
      this.rollStart(t)
    },
    rollStart(t) {
      let ul1 = document.getElementById('progressBoxOne')
      let ul2 = document.getElementById('progressBoxTwo')
      let ulbox = document.getElementById('progressViewBox')
      this.rollStop();
      this.timer = setInterval(()=>{
        if(ulbox.scrollTop >= ul1.scrollHeight) {
          ulbox.scrollTop = 0
        } else {
          ulbox.scrollTop++
        }
      },t)
    },
    rollStop(){
      clearInterval(this.timer)
    }
  },
};
</script>

<style lang="scss" scoped>
.dashboard-container {
  .title {
    font-weight: 700;
    font-size: 21px;
    line-height: 26px;
    color: #181818;
  }

  .head {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .left {
      display: flex;
      gap: 60px;

      .item {
        display: flex;
        flex-direction: column;
        gap: 8px;

        .number {
          font-weight: 700;
          font-size: 21px;
          line-height: 28px;
          color: #181818;
        }

        .title {
          font-weight: 700;
          font-size: 12px;
          line-height: 16px;
          color: #8e8f91;
        }
      }

      .verticalLine {
        width: 1px;
        height: 50px;
        border-right: 1px solid #e4e6ea;
      }
    }

    .right {
      width: 178px;
      height: 52px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
      border: 1px solid #2980FF;
      border-radius: 10px;
      font-weight: 700;
      font-size: 15px;
      line-height: 20px;
      color: #2980FF;
      cursor: pointer;
    }
  }

  .main {
    display: flex;
    justify-content: space-between;
    margin-top: 40px;

    .left {
      display: flex;
      flex-direction: column;
      gap: 40px;

      .expenseAndInput {
        display: flex;
        gap: 28px;

        .expense {
          width: 736px;
          height: 342px;
          background: #fcfdff;
          border: 1px solid #F1F2F6;
          border-radius: 10px;
          padding: 36px;

          .head {
            display: flex;
            align-items: center;
            justify-content: space-between;

            .myWallet-text2 {
              width: 50px;
              height: 34px;
              background: #F1F1F1;
              border: 1px solid #F1F1F1;
              border-radius: 36px;
              font-weight: 700;
              font-size: 14px;
              line-height: 18px;
              color: #2A2E39;
              display: flex;
              justify-content: center;
              align-items: center;
              cursor: pointer;
            }

            .myWallet-text3 {
              width: 50px;
              height: 34px;
              color: #8F9297;
              border-radius: 36px;
              font-weight: 500;
              font-size: 14px;
              line-height: 18px;
              display: flex;
              justify-content: center;
              align-items: center;
              cursor: pointer;
            }

            .myWallet-text4 {
              width: 84px;
              height: 34px;
              background: linear-gradient(135deg, #FEF380 0%, #E8FFC7 100%);
              border-radius: 36px;
              font-weight: 700;
              font-size: 14px;
              line-height: 18px;
              color: #2A2E39;
              display: flex;
              justify-content: center;
              align-items: center;
              cursor: pointer;
            }
          }
          .emissionBonus{
            margin-top: 20px;
            width: 100%;
            height: 260px;
          }
        }

        .input {
          width: 300px;
          height: 342px;
          background: #fcfdff;
          border: 1px solid #F1F2F6;
          border-radius: 10px;
          padding: 36px;
          text-align: center;
          position: relative;

          .emissionBonus {
            width: 100%;
            height: 180px;
          }

          .expected {
            display: flex;
            flex-direction: column;
            position: absolute;
            top: 136px;
            left: 0;
            right: 0;
            margin: 0 auto;

            .text {
              font-weight: 500;
              font-size: 13px;
              line-height: 16px;
              color: #7e7f80;
            }

            .amount {
              font-weight: 700;
              font-size: 16px;
              line-height: 20px;
              color: #000000;
            }
          }

          .info {
            text-align: center;
            font-weight: 400;
            font-size: 14px;
            line-height: 18px;
            color: #222222;
          }

          .progress {
            width: 100%;
            height: 6px;
            background: #d2e4ff;
            border-radius: 10px;
            margin-top: 8px;

            .progress {
              width: 70%;
              height: 6px;
              background: #6FCF97;
              border-radius: 10px;
            }
          }
        }
      }

      .missionAndAddress {
        display: flex;
        gap: 40px;

        .mission {
          width: 335px;
          height: 338px;
          background: #fcfdff;
          border: 1px solid #F1F2F6;
          border-radius: 10px;
          padding: 36px;

          .progressBox {
            margin-top: 28px;
            display: flex;
            flex-direction: column;
            gap: 24px;

            .item {
              display: flex;
              justify-content: space-between;
              align-items: center;

              .name {
                font-weight: 700;
                font-size: 11px;
                line-height: 14px;
                color: #181818;
              }

              .progress {
                width: 160px;
                height: 20px;
                background: #222222;
                border-radius: 0 20px 20px 0;

                .progress {
                  height: 20px;
                  background: #6FCF97;
                  border-radius: 0 20px 20px 0;
                }
              }
            }
          }
        }

        .address {
          width: 689px;
          height: 338px;
          background: #fcfdff;
          border: 1px solid #F1F2F6;
          border-radius: 10px;
          padding: 36px;

          .emissionBonus {
            width: 689px;
            height: 280px
          }
        }
      }
    }

    .right {
      width: 348px;
      height: 720px;
      background: #FFFFFF;
      border-radius: 10px;
      padding: 28px;

      .base {
        font-weight: 400;
        font-size: 12px;
        line-height: 16px;
        color: #ABABAB;
        margin-top: 8px;
        margin-bottom: 20px;
      }

      .gasBox {
        display: flex;
        flex-direction: column;
        gap: 28px;

        .item {
          display: flex;
          align-items: center;
          gap: 24px;

          .info {
            display: flex;
            flex-direction: column;
            gap: 8px;

            .speed {
              font-weight: 700;
              font-size: 17px;
              line-height: 22px;
              color: #181818;
            }

            .price {
              font-weight: 400;
              font-size: 14px;
              line-height: 18px;
              color: #919191;
            }
          }
        }

        .top {
          width: 100%;
          height: 104px;
          background: #FFFFFF;
          border: 1px solid #EB5757;
          border-radius: 10px;
          display: flex;
          align-items: center;
          justify-content: center;
        }

        .high {
          width: 100%;
          height: 104px;
          background: #FFFFFF;
          border: 1px solid #2980FF;
          border-radius: 10px;
          display: flex;
          align-items: center;
          justify-content: center;
        }

        .general {
          width: 100%;
          height: 104px;
          background: #6FCF97;
          border: 1px solid #6FCF97;
          border-radius: 10px;
          display: flex;
          align-items: center;
          justify-content: center;
        }

        .slow {
          width: 100%;
          height: 104px;
          background: #FFFFFF;
          border: 1px solid #F2C94C;
          border-radius: 10px;
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }

      .logo {
        margin-top: 72px;
        display: flex;
        justify-content: center;
      }
    }
  }

  .drawerAddress-container{
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: auto;
    .drawerAddress-container-head{
      padding: 56px 40px;
      background: #FFFFFF;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .drawerAddress-container-head-left{
        .drawerAddress-container-title{
          font-weight: 700;
          font-size: 21px;
          line-height: 28px;
          color: #181818;
          margin-bottom: 8px;
        }
        .drawerAddress-container-tip{
          font-weight: 700;
          font-size: 12px;
          line-height: 16px;
          color: #919191;
        }
      }
      .drawerAddress-container-head-right{
        display: flex;
        align-items: center;
        gap:48px;
        .cancellation{
          width: 118px;
          height: 52px;
          background: #E0E0E0;
          border-radius: 10px;
          gap: 4px;
          display: flex;
          align-items: center;
          justify-content: center;
          font-weight: 700;
          font-size: 15px;
          line-height: 20px;
          color: #828282;
        }
        .complete{
          width: 118px;
          height: 52px;
          border: 2px solid #4A76FF;
          border-radius: 10px;
          gap:4px;
          display: flex;
          align-items: center;
          justify-content: center;
          font-weight: 700;
          font-size: 15px;
          line-height: 20px;
          color: #2980FF;
          cursor: pointer;
        }
      }

    }
    .drawerAddress-container-main{
      padding: 36px 40px;
      background: #f9fbff;
      flex-grow: 1;
      display: flex;
      flex-direction: column;
      gap:20px;
      .title{
        font-weight: 700;
        font-size: 17px;
        line-height: 20px;
        color: #222222;
        margin-bottom: 16px;
      }
      .emailBox{
        display: flex;
        flex-direction: column;
        .item{
          display: flex;
          flex-direction: column;
          margin-bottom: 20px;
          .title{
            display: flex;
            align-items: center;
            justify-content: space-between;
            .name{
              font-weight: 400;
              font-size: 12px;
              line-height: 22px;
              color: #181818;
            }
            .delete{
              display: flex;
              align-items: center;
              gap:4px;
              font-weight: 700;
              font-size: 15px;
              line-height: 20px;
              color: #EB5757;
              cursor: pointer;
            }
          }
          .input{
            display: flex;
            align-items: center;
            gap:24px;
          }
        }
        .addAddress{
          display: flex;
          align-items: center;
          gap:12px;
          font-weight: 700;
          font-size: 17px;
          line-height: 22px;
          color: #2980FF;
          cursor: pointer;
        }
      }
    }
  }
}
</style>