算力积分

templates/base/head_navbar.tmpl

@@ -27,7 +27,8 @@
 					<a  style="border: none;color: #000;" class=" item" href="{{AppSubUrl}}/issues">{{.i18n.Tr "issues"}}</a>
 					<a  style="border: none;color: #000; white-space: nowrap;" class=" item"   href="{{AppSubUrl}}/pulls">{{.i18n.Tr "pull_requests"}}</a>
 					<a  style="border: none;color: #000;" class=" item" href="{{AppSubUrl}}/milestones">{{.i18n.Tr "milestones"}}</a>
-					<a  style="border: none;color: #000;" class=" item" href="{{AppSubUrl}}/cloudbrains">{{.i18n.Tr "repo.cloudbrain.task"}}</a>			
+					<a  style="border: none;color: #000;" class=" item" href="{{AppSubUrl}}/cloudbrains">{{.i18n.Tr "repo.cloudbrain.task"}}</a>
+					<a  style="border: none;color: #000;" class=" item" href="{{AppSubUrl}}/reward/point">算力积分</a>
 				</div>
 			</div>
 		</div>
@@ -58,7 +59,8 @@
 					<a  style="border: none;color: #000;" class=" item" href="{{AppSubUrl}}/user/login">{{.i18n.Tr "issues"}}</a>
 					<a  style="border: none;color: #000; white-space: nowrap;" class=" item"   href="{{AppSubUrl}}/user/login">{{.i18n.Tr "pull_requests"}}</a>
 					<a  style="border: none;color: #000;" class=" item" href="{{AppSubUrl}}/user/login">{{.i18n.Tr "milestones"}}</a>
-					<a  style="border: none;color: #000;" class=" item" href="{{AppSubUrl}}/cloudbrains">{{.i18n.Tr "repo.cloudbrain.task"}}</a>		
+					<a  style="border: none;color: #000;" class=" item" href="{{AppSubUrl}}/cloudbrains">{{.i18n.Tr "repo.cloudbrain.task"}}</a>
+					<a  style="border: none;color: #000;" class=" item" href="{{AppSubUrl}}/reward/point">算力积分</a>
 				</div>
 			</div>
 		</div>

templates/base/head_navbar_fluid.tmpl

@@ -28,6 +28,7 @@
 					<a  style="border: none;color: #000; white-space: nowrap;" class=" item"   href="{{AppSubUrl}}/pulls">{{.i18n.Tr "pull_requests"}}</a>
 					<a  style="border: none;color: #000;" class=" item" href="{{AppSubUrl}}/milestones">{{.i18n.Tr "milestones"}}</a>		
 					<a  style="border: none;color: #000;" class=" item" href="{{AppSubUrl}}/cloudbrains">{{.i18n.Tr "repo.cloudbrain.task"}}</a>
+					<a  style="border: none;color: #000;" class=" item" href="{{AppSubUrl}}/reward/point">算力积分</a>
 				</div>
 			</div>
 		</div>
@@ -58,6 +59,7 @@
 					<a  style="border: none;color: #000; white-space: nowrap;" class=" item"   href="{{AppSubUrl}}/user/login">{{.i18n.Tr "pull_requests"}}</a>
 					<a  style="border: none;color: #000;" class=" item" href="{{AppSubUrl}}/user/login">{{.i18n.Tr "milestones"}}</a>	
 					<a  style="border: none;color: #000;" class=" item" href="{{AppSubUrl}}/cloudbrains">{{.i18n.Tr "repo.cloudbrain.task"}}</a>	
+					<a  style="border: none;color: #000;" class=" item" href="{{AppSubUrl}}/reward/point">算力积分</a>
 				</div>
 			</div>
 		</div>

templates/base/head_navbar_home.tmpl

@@ -19,7 +19,8 @@
 					<a  style="border: none;color: #000;" class=" item" href="{{AppSubUrl}}/issues">{{.i18n.Tr "issues"}}</a>
 					<a  style="border: none;color: #000; white-space: nowrap;" class=" item"   href="{{AppSubUrl}}/pulls">{{.i18n.Tr "pull_requests"}}</a>
 					<a  style="border: none;color: #000;" class=" item" href="{{AppSubUrl}}/milestones">{{.i18n.Tr "milestones"}}</a>
-					<a  style="border: none;color: #000;" class=" item" href="{{AppSubUrl}}/cloudbrains">{{.i18n.Tr "repo.cloudbrain.task"}}</a>		
+					<a  style="border: none;color: #000;" class=" item" href="{{AppSubUrl}}/cloudbrains">{{.i18n.Tr "repo.cloudbrain.task"}}</a>
+					<a  style="border: none;color: #000;" class=" item" href="{{AppSubUrl}}/reward/point">算力积分</a>
 				</div>
 			</div>
 		</div>
@@ -49,7 +50,8 @@
 					<a  style="border: none;color: #000;" class=" item" href="{{AppSubUrl}}/user/login">{{.i18n.Tr "issues"}}</a>
 					<a  style="border: none;color: #000; white-space: nowrap;" class=" item"   href="{{AppSubUrl}}/user/login">{{.i18n.Tr "pull_requests"}}</a>
 					<a  style="border: none;color: #000;" class=" item" href="{{AppSubUrl}}/user/login">{{.i18n.Tr "milestones"}}</a>	
-					<a  style="border: none;color: #000;" class=" item" href="{{AppSubUrl}}/cloudbrains">{{.i18n.Tr "repo.cloudbrain.task"}}</a>	
+					<a  style="border: none;color: #000;" class=" item" href="{{AppSubUrl}}/cloudbrains">{{.i18n.Tr "repo.cloudbrain.task"}}</a>
+					<a  style="border: none;color: #000;" class=" item" href="{{AppSubUrl}}/reward/point">算力积分</a>
 				</div>
 			</div>
 		</div>

templates/base/head_navbar_pro.tmpl

@@ -28,7 +28,8 @@
 					<a  style="border: none;color: #000;" class=" item" href="{{AppSubUrl}}/issues">{{.i18n.Tr "issues"}}</a>
 					<a  style="border: none;color: #000;white-space: nowrap;" class=" item"   href="{{AppSubUrl}}/pulls">{{.i18n.Tr "pull_requests"}}</a>
 					<a  style="border: none;color: #000;" class=" item" href="{{AppSubUrl}}/milestones">{{.i18n.Tr "milestones"}}</a>	
-					<a  style="border: none;color: #000;" class=" item" href="{{AppSubUrl}}/cloudbrains">{{.i18n.Tr "repo.cloudbrain.task"}}</a>	
+					<a  style="border: none;color: #000;" class=" item" href="{{AppSubUrl}}/cloudbrains">{{.i18n.Tr "repo.cloudbrain.task"}}</a>
+					<a  style="border: none;color: #000;" class=" item" href="{{AppSubUrl}}/reward/point">算力积分</a>	
 				</div>
 			</div>
 		</div>
@@ -59,7 +60,8 @@
 					<a  style="border: none;color: #000;" class=" item" href="{{AppSubUrl}}/user/login">{{.i18n.Tr "issues"}}</a>
 					<a  style="border: none;color: #000;white-space: nowrap;" class=" item"   href="{{AppSubUrl}}/user/login">{{.i18n.Tr "pull_requests"}}</a>
 					<a  style="border: none;color: #000;" class=" item" href="{{AppSubUrl}}/user/login">{{.i18n.Tr "milestones"}}</a>
-					<a  style="border: none;color: #000;" class=" item" href="{{AppSubUrl}}/cloudbrains">{{.i18n.Tr "repo.cloudbrain.task"}}</a>		
+					<a  style="border: none;color: #000;" class=" item" href="{{AppSubUrl}}/cloudbrains">{{.i18n.Tr "repo.cloudbrain.task"}}</a>
+					<a  style="border: none;color: #000;" class=" item" href="{{AppSubUrl}}/reward/point">算力积分</a>
 				</div>
 			</div>
 		</div>

templates/reward/point.tmpl

@@ -0,0 +1,6 @@
+{{template "base/head" .}}
+<link rel="stylesheet" href="{{StaticUrlPrefix}}/css/vp-point.css?v={{MD5 AppVer}}" />
+<div id="__vue-root">
+</div>
+<script src="{{StaticUrlPrefix}}/js/vp-point.js?v={{MD5 AppVer}}"></script>
+{{template "base/footer" .}}

web_src/js/features/notification.js

@@ -47,7 +47,66 @@ export function initNotificationCount() {
     });
     source.addEventListener('reward-operation', async (e) => {
       try {
-        console.log(e.data);
+        const data = JSON.parse(e.data);
+        const notice = $(`
+          <div class="__notice-wrap" style="display:none;">
+            <style>
+            .__notice-container {
+              position: fixed;
+              width:400px;
+              height:36px;
+              right: 20px;
+              top: 70px;
+              animation:__notice 2s;
+              -webkit-animation:__notice 2s;
+              text-align:right;
+              display: flex;
+              justify-content: flex-end;
+            }
+            .__notice-content {
+              background: rgb(252, 202, 0);
+              padding: 4px 16px;    
+              box-shadow: rgb(135 56 0 / 20%) 0px 2px 6px 0px;
+              border-radius: 4px;
+              font-size: 14px;
+              display: flex;
+              color: #101010;
+              align-items: center;
+            }
+            @keyframes __notice {
+              0%, 20%, 53%, 80%, 100% {
+                animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+                transform: translate3d(0px, 0px, 0px);
+              }
+              40%, 43% {
+                animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+                transform: translate3d(0px, -30px, 0px);
+              }
+              70% {
+                animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+                transform: translate3d(0px, -15px, 0px);
+              }
+              90% {
+                transform: translate3d(0px, -4px, 0px);
+              }
+            }
+            </style>
+            <div class="__notice-container">
+              <div class="__notice-content">
+              <i class="ri-copper-diamond-line" style="padding-right:8px;color:white;font-size:18px;"></i>
+                <span class="__notice-text">${data.OperateType === 'INCREASE' ? ('奖励积分 + ' + data.Amount) : ('扣减积分 - ' + data.Amount) }</span>
+              </div>
+            </div>
+          </div>
+        `);
+        $('body').append(notice);
+        notice.fadeIn();
+        setTimeout(() => {
+          notice.fadeOut();
+        }, 3000);
+        setTimeout(() => {
+          notice.remove();
+        }, 5000);
       } catch (error) {
         console.error(error);
       }

web_src/vuepages/apis/modules/point.js

@@ -0,0 +1,41 @@
+import service from '../service';
+
+// 算力积分概要
+export const getPointAccount = () => {
+  return service({
+    url: '/reward/point/account',
+    method: 'get',
+    params: {},
+  });
+}
+
+// 算力积分获取、消耗明细
+// operate-INCREASE 表示获取明细  DECREASE表示消耗明细, page-当前页, pageSize-每页条数
+export const getPointList = (params) => {
+  return service({
+    url: '/reward/point/record/list',
+    method: 'get',
+    params,
+  });
+}
+
+// 管理员充值、扣减用户积分
+// TargetUserId, OperateType-INCREASE,DECREASE, Amount, Remark, RewardType-POINT
+export const setPointOperate = (data) => {
+  return service({
+    url: '/operation/reward/point/operate',
+    method: 'post',
+    data,
+    params: {}
+  });
+}
+
+// 算力积分页面
+export const getPoint = () => {
+  return service({
+    url: '/reward/point',
+    method: 'get',
+    params: {},
+    data: {},
+  });
+}

web_src/vuepages/apis/service.js

@@ -0,0 +1,26 @@
+import axios from 'axios';
+
+const service = axios.create({
+  baseURL: '/',
+  timeout: 20000,
+});
+
+service.interceptors.request.use((config) => {
+  config.data && Object.assign(config.data, {
+    _csrf: window.config ? window.config.csrf : '',
+  });
+  config.params && Object.assign(config.params, {
+    _csrf: window.config ? window.config.csrf : '',
+  });
+  return config;
+}, (error) => {
+  return Promise.reject(error);
+});
+
+service.interceptors.response.use((response) => {
+  return response;
+}, (error) => {
+  return Promise.reject(error);
+});
+
+export default service;

web_src/vuepages/pages/reward/point/const.js

@@ -0,0 +1,6 @@
+export const SOURCE_TYPE = [{ k: 'ACCOMPLISH_TASK', v: '积分任务' }, { k: 'ADMIN_OPERATE', v: '管理员操作' }, { k: 'RUN_CLOUDBRAIN_TASK', v: '运行云脑任务' }];
+export const CONSUME_STATUS = [{ k: 'OPERATING', v: '进行中' }, { k: 'SUCCEEDED', v: '已完成' }];
+export const POINT_ACTIONS = [
+  { k: 1, v: '创建公开项目' }, { k: 6, v: '每日提出任务' }, { k: 7, v: '每日提出PR' }, { k: 10, v: '发表评论' }, { k: 24, v: '上传数据集文件' }, { k: 30, v: '导入新模型' }, { k: 32, v: '完成微信扫码验证' },
+  { k: 33, v: '每日运行云脑任务' }, { k: 34, v: '数据集被平台推荐' }, { k: 35, v: '提交新公开镜像' }, { k: 36, v: '镜像被平台推荐' }, { k: 37, v: '首次更换头像' }, { k: 38, v: '每日commit' }, { k: 39, v: '每日首次Fork项目' },
+];

web_src/vuepages/pages/reward/point/vp-point.js

@@ -0,0 +1,12 @@
+import Vue from 'vue';
+import ElementUI from 'element-ui';
+import 'element-ui/lib/theme-chalk/index.css';
+
+Vue.use(ElementUI);
+import App from './vp-point.vue';
+// import App from '../manage/vp-point-manage.vue';
+
+new Vue({
+  el: '#__vue-root',
+  render: (h) => h(App),
+});

web_src/vuepages/pages/reward/point/vp-point.vue

@@ -0,0 +1,293 @@
+<template>
+  <div class="__reward-pointer-c">
+    <div class="ui container" style="width:80%">
+      <div class="__r_p_header">
+        <div>
+          <p class="__title">算力积分明细</p>
+        </div>
+        <div style="padding: 0 5px; font-size: 14px">
+          <el-button @click="operatePoint(1)">+</el-button>
+          <el-button @click="operatePoint(0)">-</el-button>
+          <span>
+            <i class="question circle icon link" style="color: rgba(3, 102, 214, 1)" data-position="right center"
+              data-variation="mini"></i>
+            <a href="" target="_blank" style="color: rgba(3, 102, 214, 1)">积分获取说明</a>
+          </span>
+        </div>
+      </div>
+      <div class="__r_p_summary">
+        <div class="__r_p_summary_item-c __flex-1">
+          <div class="__val">{{ summaryInfo.available }}</div>
+          <div class="__exp">当前可用算力积分(分)</div>
+        </div>
+        <div class="__r_p_summary_line"></div>
+        <div class="__r_p_summary_item-c __flex-1">
+          <div class="__val">{{ summaryInfo.gain }}</div>
+          <div class="__exp">总获取算力积分(分)</div>
+        </div>
+        <div class="__r_p_summary_item-c __flex-1">
+          <div class="__val">{{ summaryInfo.used }}</div>
+          <div class="__exp">总消耗算力积分(分)</div>
+        </div>
+      </div>
+      <div class="__r_p_tab">
+        <div class="__r_p_tab-item" :class="tabIndex === 0 ? '__focus' : ''" style="border-radius: 5px 0px 0px 5px"
+          @click="tabChange(0)">
+          总获取明细
+        </div>
+        <div class="__r_p_tab-item" :class="tabIndex === 1 ? '__focus' : ''" style="border-radius: 0px 5px 5px 0px"
+          @click="tabChange(1)">
+          总消耗明细
+        </div>
+      </div>
+      <div class="__r_p_table">
+        <div>
+          <el-table :data="tableData" style="width: 100%" v-loading="loading" stripe>
+            <el-table-column prop="sn" label="流水号" align="center" header-align="center" width="180"></el-table-column>
+            <el-table-column prop="date" label="时间" align="center" header-align="center" width="180"></el-table-column>
+            <el-table-column v-if="tabIndex === 1" prop="status" label="状态" align="center" header-align="center"
+              width="120">
+              <template slot-scope="scope">
+                <span :style="{ color: scope.row.statusColor }">{{ scope.row.status }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column prop="sourceType" label="场景" align="center" header-align="center" width="180">
+            </el-table-column>
+            <el-table-column v-if="tabIndex === 1" prop="duration" label="运行时长" align="center" header-align="center"
+              width="150">
+            </el-table-column>
+            <el-table-column v-if="tabIndex === 0" prop="action" label="积分行为" align="center" header-align="center"
+              width="200">
+            </el-table-column>
+            <el-table-column prop="remark" label="说明" align="left" header-align="center">
+            </el-table-column>
+            <el-table-column v-if="tabIndex === 1" prop="taskName" label="任务名称" align="center" header-align="center">
+            </el-table-column>
+            <el-table-column prop="amount" label="积分" align="center" header-align="center" width="120">
+            </el-table-column>
+            <template slot="empty">
+              <span>{{ loading ? "加载加..." : "暂无数据" }}</span>
+            </template>
+          </el-table>
+        </div>
+        <div class="__r_p_pagination">
+          <div style="margin-top: 2rem">
+            <div class="center">
+              <el-pagination background @current-change="currentChange" :current-page="pageInfo.curpage"
+                :page-sizes="pageInfo.pageSizes" :page-size="pageInfo.pageSize"
+                layout="total, sizes, prev, pager, next, jumper" :total="pageInfo.total">
+              </el-pagination>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { formatDate } from 'element-ui/lib/utils/date-util';
+import { getPoint, getPointAccount, getPointList, setPointOperate } from "../../../apis/modules/point";
+import { SOURCE_TYPE, CONSUME_STATUS, POINT_ACTIONS } from './const';
+export default {
+  data() {
+    return {
+      loading: false,
+      summaryInfo: {
+        available: 0,
+        gain: 0,
+        used: 0,
+      },
+      tabIndex: 0,
+      tableData: [],
+      pageInfo: {
+        curpage: 1,
+        pageSize: 10,
+        pageSizes: [10],
+        total: 100,
+      },
+    };
+  },
+  components: {},
+  methods: {
+    getSourceType: function (key) {
+      const find = SOURCE_TYPE.filter(item => item.k === key);
+      return find.length ? find[0].v : key;
+    },
+    getConsumeStatus: function (key) {
+      const find = CONSUME_STATUS.filter(item => item.k === key);
+      return find.length ? find[0].v : key;
+    },
+    getPointAction: function (key) {
+      const find = POINT_ACTIONS.filter(item => item.k === key);
+      return find.length ? find[0].v : key;
+    },
+    currentChange: function (val) {
+      this.pageInfo.curpage = val;
+      this.getTableData();
+    },
+    tabChange: function (index) {
+      if (this.tabIndex === index) return;
+      this.tabIndex = index;
+      this.pageInfo.curpage = 1;
+      this.pageInfo.total = 0;
+      this.getTableData();
+    },
+    getTableData: function () {
+      this.loading = true;
+      getPointList({
+        operate: this.tabIndex === 0 ? 'INCREASE' : 'DECREASE',
+        pageSize: this.pageInfo.pageSize,
+        page: this.pageInfo.curpage,
+      })
+        .then((res) => {
+          this.loading = false;
+          const tableData = [];
+          if (res.data && res.data.Code === 0) {
+            const data = res.data.Data;
+            const records = data.Records;
+            for (let i = 0, iLen = records.length; i < iLen; i++) {
+              const record = records[i];
+              tableData.push({
+                sn: record.SerialNo,
+                date: formatDate(new Date(record.LastOperateDate * 1000), 'yyyy-MM-DD HH:mm:ss'),
+                _status: record.Status,
+                status: this.getConsumeStatus(record.Status) || '--',
+                statusColor: record.Status === 'OPERATING' ? 'rgb(33, 186, 69)' : '',
+                _sourceType: record.SourceType,
+                sourceType: this.getSourceType(record.SourceType),
+                duration: record?.Cloudbrain?.Duration || '--',
+                taskName: record?.Cloudbrain?.DisplayJobName || '--',
+                taskId: record?.Cloudbrain?.ID,
+                action: record?.Action?.OpType ? this.getPointAction(record.Action.OpType) : '--',
+                remark: record.Remark,
+                amount: record.Amount,
+              });
+            }
+            this.tableData.splice(0, Infinity, ...tableData);
+            this.pageInfo.total = data.Total;
+          }
+        })
+        .catch((err) => {
+          console.log(err);
+          this.loading = false;
+          this.tableData.splice(0, Infinity);
+        });
+    },
+    operatePoint: function (type) {
+      setPointOperate({
+        TargetUserId: 369,
+        OperateType: type === 1 ? 'INCREASE' : 'DECREASE',
+        Amount: 1,
+        Remark: 'Remark: ' + (type === 1 ? 'INCREASE' : 'DECREASE') + ' 1.',
+        RewardType: 'POINT',
+      }).then(res => {
+        console.log(res);
+      }).catch(err => {
+        console.log(err);
+      })
+    }
+  },
+  mounted: function () {
+    getPointAccount().then(res => {
+      if (res.data && res.data.Code === 0) {
+        const data = res.data.Data;
+        this.summaryInfo.available = data.Balance;
+        this.summaryInfo.gain = data.TotalEarned;
+        this.summaryInfo.used = data.TotalConsumed;
+      }
+    }).catch(err => {
+      console.log(err);
+    })
+    this.getTableData();
+  },
+  computed: {},
+};
+</script>
+
+<style scoped lang="less">
+.__flex-1 {
+  flex: 1;
+}
+
+.__reward-pointer-c {
+  .__r_p_header {
+    height: 30px;
+    margin: 10px 0;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    .__title {
+      font-weight: 400;
+      font-size: 18px;
+      color: rgb(16, 16, 16);
+      line-height: 26px;
+    }
+  }
+
+  .__r_p_summary {
+    display: flex;
+    align-items: center;
+    height: 100px;
+    background-color: rgb(245, 245, 246);
+
+    .__r_p_summary_item-c {
+      .__val {
+        text-align: center;
+        margin: 12px 0;
+        font-weight: 400;
+        font-size: 28px;
+        color: rgb(16, 16, 16);
+      }
+
+      .__exp {
+        text-align: center;
+        font-weight: 400;
+        font-size: 14px;
+        color: rgba(54, 56, 64, 1);
+      }
+    }
+  }
+}
+
+.__r_p_summary_line {
+  width: 1px;
+  height: 80%;
+  background-color: rgb(212, 212, 213);
+}
+
+.__r_p_tab {
+  display: flex;
+  margin: 18px 0;
+
+  .__r_p_tab-item {
+    width: 115px;
+    height: 38px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border: 1px solid rgb(225, 227, 230);
+    color: #101010;
+    box-sizing: border-box;
+    cursor: pointer;
+
+    &.__focus {
+      border-color: rgb(50, 145, 248);
+      color: rgb(50, 145, 248);
+      cursor: default;
+    }
+  }
+}
+
+.__r_p_table {
+  /deep/ .el-table__header {
+    th {
+      background: rgb(245, 245, 246);
+      color: rgb(96, 98, 102);
+      font-weight: 400;
+      font-size: 14px;
+    }
+  }
+}
+</style>

webpack.config.js

@@ -20,6 +20,11 @@ for (const path of glob('web_src/less/themes/*.less')) {
   themes[parse(path).name] = [path];
 }
 
+const vuePages = {};
+for (const path of glob('web_src/vuepages/**/vp-*.js')) {
+  vuePages[parse(path).name] = [path];
+}
+
 const isProduction = process.env.NODE_ENV !== 'development';
 
 module.exports = {
@@ -37,6 +42,7 @@ module.exports = {
     ],
     icons: glob('node_modules/@primer/octicons/build/svg/**/*.svg'),
     ...themes,
+    ...vuePages,
   },
   devtool: false,
   output: {