@@ -4,13 +4,14 @@
<div class="ui container">
<div class="top-head only-mobile-hidden">
<div class="title">算力资源</div>
<div class="descr">为了满足用户的个性化算力需求,
可以根据用户的需求定制算力池,欢迎提交您的算力需求。</div>
<div class="descr" style="color:transparent;user-select:none;">为了满足用户的个性化算力需求,
可以根据用户的需求定制算力池,欢迎提交您的算力需求。
</div>
</div>
<div class="main-content">
<div class="top-area">
<div class="tab-c">
<div class="tab-item" :class="activeTab == 0 ? 'active' : ''" @click="changeTab(0)">普惠算力</div>
<div class="tab-item" :class="activeTab == 4 ? 'active' : ''" @click="changeTab(4 )">
<div class="tab-item" :class="activeTab == 1 ? 'active' : ''" @click="changeTab(1 )">
付费算力
<el-tooltip effect="dark" placement="top">
<div slot="content"> 付费算力及售后服务由合作伙伴提供 </div>
@@ -25,141 +26,26 @@
</svg>
</el-tooltip>
</div>
<div class="tab-item new-demand-tab-mobile-show" v-if="isLogin" :class="activeTab == 3 ? 'active' : ''"
@click="changeTab(3)">提交新需求</div>
</div>
<div class="operate-c only-mobile-hidden">
<div class="tab-c" style="margin-right:10px;">
<div class="tab-item" :class="activeTab == 1 ? 'active' : ''" @click="changeTab(1)">算力需求广场</div>
<div class="tab-item" v-if="isLogin" :class="activeTab == 2 ? 'active' : ''" @click="changeTab(2)">我的需求
</div>
</div>
<el-button size="default" v-if="isOperator" type="primary" @click="goOperate">需求处理</el-button>
<JumpButton title="新建计算任务" @click="goAiTask" />
</div>
</div>
<div class="middle-area">
<div class="left-area" v-loading="loading">
<div class="tab-content" v-show="activeTab == 0">
<Resources :active="activeTab == 0" @apply="applyUse" >
<Resources :active="activeTab == 0">
</Resources>
</div>
<div class="tab-content" v-show="activeTab == 4 ">
<ExtraResources :active="activeTab == 4 ">
<div class="tab-content" v-show="activeTab == 1 ">
<ExtraResources :active="activeTab == 1 ">
</ExtraResources>
</div>
<div class="tab-content" v-if="activeTab == 1">
<div class="demand-item demand-item-all" v-for="(item, index) in dataAll" :key="index">
<div class="demand-item-top">
<div class="demand-item-line">
<div class="demand-item-line-block"><span>计算资源:</span><span>{{ item.compute_resource }}</span></div>
<div class="demand-item-line-block"><span>卡类型:</span><span>{{ item.card_type_show || item.card_type
}}</span></div>
<div class="demand-item-line-block"><span>卡数(卡):</span><span>{{ item.acc_cards_num }}</span></div>
</div>
<div class="demand-item-line">
<div class="demand-item-line-block">
<span>使用时间:</span><span>{{ item.begin_date }} 至 {{ item.end_date }}</span>
</div>
</div>
</div>
<div class="demand-item-bottom">
<div class="demand-item-left">
<span>{{ '创建于' }}</span>
<el-tooltip effect="dark" :content="dateFormatB(item.created_unix)" placement="top-start">
<span>{{ calcFromNow(item.created_unix) }}</span>
</el-tooltip>
</div>
<div class="demand-item-right">
<span class="status pending" v-if="item.status == 1"><i
class="el-icon-stopwatch"></i><span>待处理</span></span>
<span class="status refuse " v-if="item.status == 2"><i
class="el-icon-circle-check"></i><span>已处理</span></span>
<span class="status refuse" v-if="item.status == 3"><i
class="el-icon-circle-check"></i><span>已处理</span></span>
</div>
</div>
</div>
<div class="demand-item no-data" v-show="(!dataAll.length && !loading)">
<div class="item-empty">
<div class="item-empty-icon"></div>
<div class="item-empty-tips">{{ $t('modelObj.model_square_empty') }}</div>
</div>
</div>
</div>
<div class="tab-content" v-if="activeTab == 2">
<div class="demand-item demand-item-my" v-for="(item, index) in dataMy" :key="index">
<div class="demand-item-top">
<div class="demand-item-line">
<div class="demand-item-line-block"><span>计算资源:</span><span>{{ item.compute_resource }}</span></div>
<div class="demand-item-line-block"><span>卡类型:</span><span>{{ item.card_type_show || item.card_type
}}</span></div>
<div class="demand-item-line-block"><span>卡数(卡):</span><span>{{ item.acc_cards_num }}</span></div>
</div>
<div class="demand-item-line">
<div class="demand-item-line-block">
<span>使用时间:</span><span>{{ item.begin_date }} 至 {{ item.end_date }}</span>
</div>
</div>
<div class="demand-item-line">
<div class="demand-item-line-block">
<span>承接方:</span><span>{{Array.from(new Set((item.specs || []).map(itm =>
itm.AiCenterName))).join('、') || '--'}}</span>
</div>
</div>
</div>
<div class="demand-item-bottom">
<div class="demand-item-left">
<span>{{ '创建于' }}</span>
<el-tooltip effect="dark" :content="dateFormatB(item.created_unix)" placement="top-start">
<span>{{ calcFromNow(item.created_unix) }}</span>
</el-tooltip>
</div>
<div class="demand-item-right">
<DemandEditDialog v-if="item.status == 1 || item.status == 2" :title="`修改我的需求:`" :data="item"
@success="demandUpdateSuccess" @error="demandUpdateError">
<div class="edit-btn">修改</div>
</DemandEditDialog>
<span class="status pending" v-if="item.status == 1"><i
class="el-icon-stopwatch"></i><span>待处理</span></span>
<span class="status accepted" v-if="item.status == 2"><i
class="el-icon-circle-check"></i><span>已接纳</span></span>
<span class="status refuse" v-if="item.status == 3">
<i class="el-icon-circle-close"></i><span>未接纳</span>
<el-tooltip v-if="false" class="item" effect="dark" :content="item.review" placement="top">
<i class="el-icon-info" style="margin-left:5px;cursor:pointer"></i>
</el-tooltip>
</span>
</div>
</div>
</div>
<div class="demand-item no-data" v-show="(!dataMy.length && !loading)">
<div class="item-empty">
<div class="item-empty-icon"></div>
<div class="item-empty-tips">{{ $t('modelObj.model_square_empty') }}</div>
</div>
</div>
</div>
<div class="tab-content" v-if="activeTab == 3">
<div class="new-demand-content" v-if="isLogin">
<div class="form-container">
<DemandForm ref="demandFormRef" @success="demandAddSuccess" @error="demandAddError"></DemandForm>
</div>
</div>
</div>
<div class="pagination-c" v-if="![0, 4].includes(activeTab)">
<el-pagination background layout="total, sizes, prev, pager, next, jumper"
:current-page.sync="paginationInfo.page" :page-sizes="paginationInfo.pageSizes"
:page-size.sync="paginationInfo.pageSize" :total="paginationInfo.total" @current-change="currentChange"
@size-change="sizeChange">
</el-pagination>
</div>
</div>
<div class="right-area only-mobile-hidden" v-if="isLogin && ![4].includes(activeTab)">
<div class="form-container">
<DemandForm ref="demandFormRef" @success="demandAddSuccess" @error="demandAddError"></DemandForm>
</div>
</div>
</div>
<div>
<Partner />
</div>
</div>
</div>
</div>
@@ -168,14 +54,8 @@
<script>
import Resources from '../components/Resources.vue';
import ExtraResources from '../components/ExtraResources.vue';
import DemandForm from '../components/DemandForm.vue';
import DemandEditDialog from '../components/DemandEditDialog.vue';
import { getDemandList, getDemandMyList } from '~/apis/modules/computingpower';
import dayjs from 'dayjs';
import { lang } from '~/langs';
import { timeSinceUnix } from '~/utils';
import { ACC_CARD_TYPE } from '~/const';
import { getListValueWithKey } from '~/utils';
import JumpButton from '../components/JumpButton.vue';
import Partner from '../components/Partner.vue';
export default {
data() {
@@ -184,116 +64,18 @@ export default {
isOperator: false,
loading: false,
activeTab: 0,
dataAll: [],
dataMy: [],
paginationInfo: {
page: 1,
pageSize: 15,
pageSizes: [15, 30, 50],
total: 0,
},
};
},
components: { Resources, ExtraResources, DemandForm, DemandEditDialog },
components: { Resources, ExtraResources, JumpButton, Partner },
methods: {
changeTab(tab) {
if (tab == this.activeTab) return;
this.activeTab = tab;
this.paginationInfo.page = 1;
this.paginationInfo.total = 0;
this.getData();
this.$nextTick(() => {
this.$refs['demandFormRef']?.resetForm();
});
},
getData() {
const params = {
pageSize: this.paginationInfo.pageSize,
page: this.paginationInfo.page,
}
const subApi = this.activeTab == 1 ? getDemandList : this.activeTab == 2 ? getDemandMyList : '';
if (!subApi) return;
this.loading = true;
subApi(params).then(res => {
this.loading = false;
res = res.data;
if (res.code == 0) {
const data = res.data;
this.paginationInfo.total = data.total;
const cardRequestList = (data.cardRequestList || []).map(item => {
return {
...item,
card_type_show: getListValueWithKey(ACC_CARD_TYPE, item.card_type),
}
})
if (this.activeTab == 1) {
this.dataAll = cardRequestList;
} else if (this.activeTab == 2) {
this.dataMy = cardRequestList;
}
}
}).catch(err => {
this.loading = false;
console.log(err);
});
},
goOperate() {
window.location.href = `/kanban/index.html#/dashboard/computingpower/demand`;
},
currentChange(page) {
this.paginationInfo.page = page;
this.getData();
},
sizeChange(pageSize) {
this.paginationInfo.pageSize = pageSize;
this.getData();
},
calcFromNow(unix) {
return timeSinceUnix(unix, Date.now() / 1000);
},
dateFormatA(unix) {
return dayjs(unix * 1000).format('YYYY-MM-DD');
},
dateFormatB(unix) {
return lang == 'zh-CN' ? dayjs(unix * 1000).format('YYYY年MM月DD日 HH时mm分ss秒') :
dayjs(unix * 1000).format('ddd, D MMM YYYY HH:mm:ss [CST]');
},
demandAddSuccess() {
this.activeTab = -1;
window.scrollTo({ top: 0 });
this.changeTab(2);
},
demandAddError() { },
demandUpdateSuccess() {
this.getData();
},
demandUpdateError() { },
applyUse(data) {
if (!this.isLogin) {
window.location.href = `/user/login?redirect_to=${encodeURIComponent(window.location.href)}`;
return;
}
// 通过获取类名判断是否为移动端
const element = document.querySelector('.new-demand-tab-mobile-show');
if (element) {
const displayValue = window.getComputedStyle(element).getPropertyValue('display');
if (displayValue === 'none') {
// 当为web端时,保持原有逻辑不变,直接传递数据
this.$nextTick(() => {
this.$refs['demandFormRef']?.initApply(data);
});
} else if (displayValue === 'flex') {
// 当为移动端时,跳转到对应tab,并延迟半秒传递数据,以便先让mounted初始化
this.changeTab(3)
setTimeout(() => {
this.$nextTick(() => {
this.$refs['demandFormRef']?.initApply(data);
});
}, 500)
}
} else {
console.log('Element not found.');
}
getData() { },
goAiTask() {
window.location.href = '/cloudbrains/create';
},
},
created() {