#3045 算力资源管理支持资源短期回收的场景

web_src/vuepages/pages/resources/components/SceneDialog.vue

@@ -69,7 +69,9 @@
             </div>
             <div class="content">
               <el-select v-model="dataInfo.SpecIds" multiple collapse-tags class="specSel">
-                <el-option v-for="item in specsList" :key="item.k" :label="item.v" :value="item.k" />
+                <el-option v-for="item in specsList" :label="item.v" :key="item.k" :value="item.k">
+                  <span v-html="item.v"></span>
+                </el-option>
               </el-select>
             </div>
           </div>
@@ -167,7 +169,7 @@ export default {
       const params = {
         cluster: this.dataInfo.Cluster,
         queue: this.dataInfo.QueueId === '-1' ? '' : this.dataInfo.QueueId,
-        status: 2,
+        // status: 2,
         page: 1,
       };
       return getResSpecificationList(params).then(res => {
@@ -177,11 +179,11 @@ export default {
           const data = list.map((item) => {
             const Queue = item.Queue;
             const Spec = item.Spec;
-            // const NGPU = `${Queue.ComputeResource}:${Spec.AccCardsNum === 0 ? '0' : Spec.AccCardsNum + '*' + getListValueWithKey(this.accCardTypeList, Queue.AccCardType)}`;
             const NGPU = `${Queue.ComputeResource}:${Spec.AccCardsNum + '*' + getListValueWithKey(this.accCardTypeList, Queue.AccCardType)}`;
+            const statusStr = Spec.Status != '2' ? `<span style="color:rgb(245, 34, 45)">(${getListValueWithKey(this.statusList, Spec.Status.toString())})</span>` : '';
             return {
               k: Spec.ID,
-              v: `${NGPU}, CPU:${Spec.CpuCores}, ${this.$t('resourcesManagement.gpuMem')}:${Spec.GPUMemGiB}GB, ${this.$t('resourcesManagement.mem')}:${Spec.MemGiB}GB, ${this.$t('resourcesManagement.shareMem')}:${Spec.ShareMemGiB}GB, ${this.$t('resourcesManagement.unitPrice')}:${Spec.UnitPrice}${this.$t('resourcesManagement.point_hr')}`,
+              v: `${NGPU}, CPU:${Spec.CpuCores}, ${this.$t('resourcesManagement.gpuMem')}:${Spec.GPUMemGiB}GB, ${this.$t('resourcesManagement.mem')}:${Spec.MemGiB}GB, ${this.$t('resourcesManagement.shareMem')}:${Spec.ShareMemGiB}GB, ${this.$t('resourcesManagement.unitPrice')}:${Spec.UnitPrice}${this.$t('resourcesManagement.point_hr')}${statusStr}`,
             }
           });
           this.specsList.splice(0, Infinity, ...data);

web_src/vuepages/pages/resources/scene/index.vue

@@ -64,7 +64,7 @@
             header-align="center" min-width="180">
             <template slot-scope="scope">
               <div v-for="item in scope.row.SpecsList" :key="item.k">
-                <span>{{ item.v }}</span>
+                <span v-html="item.v"></span>
               </div>
             </template>
           </el-table-column>
@@ -100,7 +100,7 @@
 <script>
 import SceneDialog from '../components/SceneDialog.vue';
 import { getQueueList, getResQueueCode, getResSceneList, updateResScene, getAiCenterList } from '~/apis/modules/resources';
-import { JOB_TYPE, CLUSTERS, ACC_CARD_TYPE } from '~/const';
+import { JOB_TYPE, CLUSTERS, ACC_CARD_TYPE, SPECIFICATION_STATUS } from '~/const';
 import { getListValueWithKey } from '~/utils';
 import { formatDate } from 'element-ui/lib/utils/date-util';
 
@@ -117,6 +117,7 @@ export default {
       selAiCenter: '',
       aiCenterList: [{ k: '', v: this.$t('resourcesManagement.allAiCenter') }],
       accCardTypeList: [...ACC_CARD_TYPE],
+      statusList: [{ k: '', v: this.$t('resourcesManagement.allStatus') }, ...SPECIFICATION_STATUS],
       loading: false,
       tableData: [],
       pageInfo: {
@@ -191,11 +192,11 @@ export default {
             let cluster = '';
             for (let i = 0, iLen = Specs.length; i < iLen; i++) {
               const Spec = Specs[i];
-              // const NGPU = `${Spec.ComputeResource}:${Spec.AccCardsNum === 0 ? '0' : Spec.AccCardsNum + '*' + getListValueWithKey(this.accCardTypeList, Spec.AccCardType)}`;
               const NGPU = `${Spec.ComputeResource}:${Spec.AccCardsNum + '*' + getListValueWithKey(this.accCardTypeList, Spec.AccCardType)}`;
+              const statusStr = Spec.Status != '2' ? `<span style="color:rgb(245, 34, 45)">(${getListValueWithKey(this.statusList, Spec.Status.toString())})</span>` : '';
               specsList.push({
                 k: Spec.ID,
-                v: `${NGPU}, CPU:${Spec.CpuCores}, ${this.$t('resourcesManagement.gpuMem')}:${Spec.GPUMemGiB}GB, ${this.$t('resourcesManagement.mem')}:${Spec.MemGiB}GB, ${this.$t('resourcesManagement.shareMem')}:${Spec.ShareMemGiB}GB, ${this.$t('resourcesManagement.unitPrice')}:${Spec.UnitPrice}${this.$t('resourcesManagement.point_hr')}`,
+                v: `${NGPU}, CPU:${Spec.CpuCores}, ${this.$t('resourcesManagement.gpuMem')}:${Spec.GPUMemGiB}GB, ${this.$t('resourcesManagement.mem')}:${Spec.MemGiB}GB, ${this.$t('resourcesManagement.shareMem')}:${Spec.ShareMemGiB}GB, ${this.$t('resourcesManagement.unitPrice')}:${Spec.UnitPrice}${this.$t('resourcesManagement.point_hr')}${statusStr}`,
               });
               cluster = Spec.Cluster;
               if (queueIds.indexOf(Spec.QueueId) < 0) {