m2pool_web_frontend/mining-pool/src/views/userDetails/index.vue

<template>
  <div v-loading="userDetailsLoading">
    <div class="main-title">
      {{$t('backendSystem.userDetails')}}
      <span
        @click="goBack"
        style="color: #409eff; cursor: pointer; font-size: 16px;margin-left: 10px;"
        >{{$t('backendSystem.return')}}</span
      >
    </div>
    <section class="user-details-box">
      <!-- <section class="user-details-form">
        <el-form
          :label-position="labelPosition"
          :inline="true"
          :model="userData"
          class="demo-form-inline"
        >
          <el-row>
            <el-col :span="8">
              <el-form-item
                style="width: 80%"
                :label="$t('backendSystem.coin')"
                label-width="100px"
                prop="coin"
              >
                <el-input disabled v-model="userData.coin"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item
                style="width: 80%"
                :label="$t('backendSystem.user')"
                label-width="100px"
                prop="user"
              >
                <el-input disabled v-model="userData.user"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item
                style="width: 80%"
                :label="$t('backendSystem.amount')"
                label-width="100px"
                prop="amount"
              >
                <el-input disabled v-model="userData.amount"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item
                :label="$t('backendSystem.createDate')"
                label-width="100px"
                prop="createDate"
                style="width: 80%"
              >
                <el-input disabled v-model="userData.createDate"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item
                style="width: 80%"
                :label="$t('backendSystem.maxHeight')"
                label-width="100px"
                prop="maxHeight"
              >
                <el-input disabled v-model="userData.maxHeight"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item
                style="width: 80%"
                :label="$t('backendSystem.shouldOutDate')"
                label-width="100px"
                prop="shouldOutDate"
              >
                <el-input disabled v-model="userData.shouldOutDate"></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="24">
              <el-form-item
                style="width: 55%"
                :label="$t('backendSystem.address')"
                label-width="100px"
                prop="address"
              >
                <el-input disabled v-model="userData.address"></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="24">
              <el-form-item
                style="width: 55%; max-height: 300px; overflow-y: auto"
                :label="$t('backendSystem.historyAddress')"
                label-width="100px"
                prop="address"
              >
                <p
                  class="history-balance-item"
                  v-for="item in userData.historyBalance"
                  :key="item.balance"
                >
                  {{ item.balance }}
                </p>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </section> -->
      
      
      <el-date-picker
              v-model="lineChatTimes"
              type="daterange"
              :range-separator="$t('backendSystem.to')"
              :start-placeholder="$t('backendSystem.startDate')"
              :end-placeholder="$t('backendSystem.endDate')"
              @change="handleLineChatTimesChange"
              value-format="yyyy-MM-dd HH:mm:ss"
              size="small"
              style="margin-bottom: 18px;"
            >
            </el-date-picker>
       
          
      <el-table
      :data="tableData"
      border
     
      :header-cell-style="{ 'text-align': 'center' }"
      :cell-style="{ 'text-align': 'center' }"
      height="42vh"
    >
      <el-table-column prop="createDate" :label="$t('backendSystem.createDate')" width="160" >
        <template slot-scope="scope">
          <span>{{ handelTime(scope.row.createDate ) }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="shouldOutDate" :label="$t('backendSystem.shouldOutDate')"  width="180" show-overflow-tooltip >
        <template slot-scope="scope">
          <span>{{ handelTime(scope.row.shouldOutDate ) }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="coin" :label="$t('backendSystem.coin2')"  width="100" show-overflow-tooltip>
       
      </el-table-column>
      <el-table-column prop="amount" :label="$t('backendSystem.amount2')" width="200" show-overflow-tooltip/>

      <el-table-column prop="user" :label="$t('backendSystem.minerUser2')" width="180" show-overflow-tooltip/>
      <el-table-column prop="address" :label="$t('backendSystem.address')" show-overflow-tooltip />
    
      <el-table-column prop="maxHeight" :label="$t('backendSystem.maxHeight')" width="180" show-overflow-tooltip />
     

   
    </el-table>


      <section class="chartBox">
        <div class="lineChartBox">
          <div class="lineChartBox-header">
            <div class="lineChartBox-title">{{$t('backendSystem.chartTitle')}}</div>
            <!-- <el-date-picker
              v-model="lineChatTimes"
              type="daterange"
              :range-separator="$t('backendSystem.to')"
              :start-placeholder="$t('backendSystem.startDate')"
              :end-placeholder="$t('backendSystem.endDate')"
              @change="handleLineChatTimesChange"
              value-format="yyyy-MM-dd HH:mm:ss"
              size="small"
              :disabled="!chartShow"
            >
            </el-date-picker> -->
          </div>

          <div
            class="lineChartBox-content"
            style="width: 100%; height: 500px; margin-top: 35px;"
          >
          <div v-if="!chartShow" style="text-align: center;margin-top: 200px;color: #ccc;">{{$t('backendSystem.noData')}}</div>
            <div v-else v-loading="lineChartLoading" id="lineChart" style="width: 100%; height: 100%"></div>
         
          </div>
        </div>
      </section>

      <el-row>
            <el-col :span="24">
              <div
                style="width: 100%; max-height: 300px; overflow-y: auto;"
              >
                <h3 style="margin-bottom: 20px;">{{$t('backendSystem.historyAddress')}}</h3>
                
              
                <p
                  class="history-balance-item"
                  v-for="item in historyBalance"
                  :key="item.balance"
                >
                  {{ item.balance }}
                </p>
              </div>
            </el-col>
          </el-row>
    </section>
  </div>
</template>

<script>
import Index from "./index";
export default {
  mixins: [Index],
};
</script>

<style lang="scss" scoped>
.main-title {
  font-size: 24px;
  font-weight: bold;

  color: #333;
  margin-bottom: 18px;
}
.user-details-box {
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
  padding: 20px;
  background-color: #fff;
  border-radius: 10px;
  margin-bottom: 20px;
  height: 73vh;
  overflow: hidden;
  overflow-y: auto;
  // background: palegoldenrod;
}

.user-details-form {
  width: 80%;
  box-sizing: border-box;
  padding: 20px;
  background-color: #fff;
  border-radius: 10px;
  margin-bottom: 20px;
  // background: palegoldenrod;
}

.no-data-tip {
  width: 80%;
  margin: 0 auto;
  font-size: 16px;
  color: #999;
  text-align: center;
  margin-top: 20px;
}

.history-balance-item {
  display: inline-block; /* 让宽度随内容自适应 */
  background: #e7dff3;
  padding: 8px 20px;
  border-radius: 20px;
  margin-bottom: 10px;
  color: rgba(0, 0, 0, 0.6);
  /* width: auto; 其实可以省略，inline-block默认就是auto */
  /* 防止flex布局下被拉伸 */
  flex: none;
  align-self: flex-start;
  margin-left: 10px;
}

::v-deep .el-form-item__label {
  // color: #409EFF;         /* 例如设置为 Element UI 主色 */
  font-weight: bold; /* 加粗 */
  font-size: 16px; /* 字号 */
  letter-spacing: 1px; /* 字间距 */
  /* 你可以根据需要添加更多样式 */
}

.chartBox {
  width: 80vw;
  box-sizing: border-box;
  // background: palegoldenrod;


  padding: 0;
  margin: 30px 0;
}

.lineChartBox {
  width: 97%;
  height: 80%;

  box-sizing: border-box;
  box-shadow: 0px 0px 1px 1px #ccc;
  padding: 20px;
  border-radius: 10px;
}
.lineChartBox-title {
  font-size: 16px;
  font-weight: bold;
  color: rgba(0, 0, 0, 0.6);
  margin-bottom: 20px;
}
.lineChartBox-header{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
  padding:1% 5%;
}

</style>

<style>
.el-date-editor .el-range-separator {
  padding: 0 !important;
  color: #333 !important;
 
}
</style>