diff --git a/templates/admin/resources/queue.tmpl b/templates/admin/resources/queue.tmpl
index 3f2d83b99..13c30690a 100644
--- a/templates/admin/resources/queue.tmpl
+++ b/templates/admin/resources/queue.tmpl
@@ -4,7 +4,7 @@
 	{{template "admin/navbar" .}}
 	<div class="ui container">
     <div id="__vue-root"></div>
-  </duv>
+  </div>
 </div>
 <script src="{{StaticUrlPrefix}}/js/vp-resources-queue.js?v={{MD5 AppVer}}"></script>
 {{template "base/footer" .}}
diff --git a/templates/admin/resources/scene.tmpl b/templates/admin/resources/scene.tmpl
index 53af0352c..f0a94a703 100644
--- a/templates/admin/resources/scene.tmpl
+++ b/templates/admin/resources/scene.tmpl
@@ -4,7 +4,7 @@
 	{{template "admin/navbar" .}}
 	<div class="ui container">
     <div id="__vue-root"></div>
-  </duv>
+  </div>
 </div>
 <script src="{{StaticUrlPrefix}}/js/vp-resources-scene.js?v={{MD5 AppVer}}"></script>
 {{template "base/footer" .}}
diff --git a/templates/admin/resources/specification.tmpl b/templates/admin/resources/specification.tmpl
index 34992c5c9..265aafa81 100644
--- a/templates/admin/resources/specification.tmpl
+++ b/templates/admin/resources/specification.tmpl
@@ -4,7 +4,7 @@
 	{{template "admin/navbar" .}}
 	<div class="ui container">
     <div id="__vue-root"></div>
-  </duv>
+  </div>
 </div>
 <script src="{{StaticUrlPrefix}}/js/vp-resources-specification.js?v={{MD5 AppVer}}"></script>
 {{template "base/footer" .}}
diff --git a/web_src/vuepages/langs/config/en-US.js b/web_src/vuepages/langs/config/en-US.js
index c25b66b5a..d12c848a3 100644
--- a/web_src/vuepages/langs/config/en-US.js
+++ b/web_src/vuepages/langs/config/en-US.js
@@ -131,6 +131,7 @@ const en = {
     onShelfConfirm: 'Are you sure to on shelf the resources specification?',
     offShelfConfirm: 'Are you sure to off shelf the resources specification?',
     onShelfCode1001: 'On shelf failed, the resources queues not available.',
+    onShelfCode1003: 'On shelf failed, the resources specification not available.',
     offShelfDlgTip1: 'The resources specification has already used in scene:',
     offShelfDlgTip2: 'Please confirm to off shelf?',
     resSceneManagement: 'Resources Scene Management',
@@ -149,7 +150,11 @@ const en = {
     computeCluster: 'Compute Cluster',
     resourceSpecification: 'Resource Specification',
     lastUpdateTime: 'Last Update Time',
-    resSceneDeleteConfirm: 'Are you sure to delete the current Resource Scene?',
+    resSceneDeleteConfirm: 'Are you sure to delete the current Resource Scene?',    
+    resourceSpecificationIsAvailable: 'Specification Is Available',
+    resourceSpecificationIsAvailableAll: 'Specification Is Available(All)',
+    available: 'Available',
+    notAvailable: 'Not Available',
   },
 }
 
diff --git a/web_src/vuepages/langs/config/zh-CN.js b/web_src/vuepages/langs/config/zh-CN.js
index c593cd684..4dd5566c0 100644
--- a/web_src/vuepages/langs/config/zh-CN.js
+++ b/web_src/vuepages/langs/config/zh-CN.js
@@ -131,6 +131,7 @@ const zh = {
     onShelfConfirm: '请确认上架该规格？',
     offShelfConfirm: '请确认下架该规格？',
     onShelfCode1001: '上架失败，资源池（队列）不可用。',
+    onShelfCode1003: '上架失败，资源规格不可用。',
     offShelfDlgTip1: '当前资源规格已在以下场景中使用：',
     offShelfDlgTip2: '请确认进行下架操作？',
     resSceneManagement: '算力资源应用场景管理',
@@ -150,6 +151,10 @@ const zh = {
     resourceSpecification: '资源规格',
     lastUpdateTime: '最后更新时间',
     resSceneDeleteConfirm: '是否确认删除当前应用场景？',
+    resourceSpecificationIsAvailable: '资源规格是否可用',
+    resourceSpecificationIsAvailableAll: '资源规格是否可用（全部）',
+    available: '可用',
+    notAvailable: '不可用',
   },
 }
 
diff --git a/web_src/vuepages/pages/resources/components/SpecificationDialog.vue b/web_src/vuepages/pages/resources/components/SpecificationDialog.vue
index ec0732e0b..418682ec0 100644
--- a/web_src/vuepages/pages/resources/components/SpecificationDialog.vue
+++ b/web_src/vuepages/pages/resources/components/SpecificationDialog.vue
@@ -20,8 +20,8 @@
               <span>{{ $t('resourcesManagement.sourceSpecCode') }}</span>
             </div>
             <div class="content">
-              <el-input v-model="dataInfo.SourceSpecId" :placeholder="$t('resourcesManagement.sourceSpecCodeTips')" maxlength="255"
-                :disabled="type === 'edit'">
+              <el-input v-model="dataInfo.SourceSpecId" :placeholder="$t('resourcesManagement.sourceSpecCodeTips')"
+                maxlength="255" :disabled="type === 'edit'">
               </el-input>
             </div>
           </div>
@@ -245,6 +245,11 @@ export default {
               type: 'info',
               message: this.$t('resourcesManagement.onShelfCode1001')
             });
+          } else if (action === 'on-shelf' && res.Code === 1003) {
+            this.$message({
+              type: 'info',
+              message: this.$t('resourcesManagement.onShelfCode1003')
+            });
           } else {
             this.$message({
               type: 'error',
diff --git a/web_src/vuepages/pages/resources/specification/index.vue b/web_src/vuepages/pages/resources/specification/index.vue
index 2335e67b8..58d95d74f 100644
--- a/web_src/vuepages/pages/resources/specification/index.vue
+++ b/web_src/vuepages/pages/resources/specification/index.vue
@@ -9,6 +9,9 @@
         <el-select class="select" size="medium" v-model="selStatus" @change="selectChange">
           <el-option v-for="item in statusList" :key="item.k" :label="item.v" :value="item.k" />
         </el-select>
+        <el-select class="select" size="medium" v-model="selAvailable" @change="selectChange">
+          <el-option v-for="item in availableList" :key="item.k" :label="item.v" :value="item.k" />
+        </el-select>
       </div>
       <div>
         <el-button size="medium" icon="el-icon-refresh" @click="syncComputerNetwork" v-loading="syncLoading">
@@ -19,7 +22,7 @@
     </div>
     <div class="table-container">
       <div style="min-height:600px;">
-        <el-table border :data="tableData" style="width: 100%" v-loading="loading" stripe>
+        <el-table border :data="tableData" style="width: 100%;min-width:1700px;" v-loading="loading" stripe>
           <el-table-column prop="ID" label="ID" align="center" header-align="center" width="60"></el-table-column>
           <el-table-column prop="SpecStr" :label="$t('resourcesManagement.resourceSpecification')" align="left"
             header-align="center" min-width="160">
@@ -49,6 +52,14 @@
               <span style="font-weight:600;font-size:14px;">{{ scope.row.UnitPrice }}</span>
             </template>
           </el-table-column>
+          <el-table-column prop="IsAvailableStr" :label="$t('resourcesManagement.resourceSpecificationIsAvailable')" align="center"
+            header-align="center" width="100">
+            <template slot-scope="scope">
+              <span :style="{ color: scope.row.IsAvailable ? 'rgb(82, 196, 26)' : 'rgb(245, 34, 45)' }">{{
+                  scope.row.IsAvailableStr
+              }}</span>
+            </template>
+          </el-table-column>
           <el-table-column prop="StatusStr" :label="$t('resourcesManagement.status')" align="center"
             header-align="center" width="100">
             <template slot-scope="scope">
@@ -60,7 +71,10 @@
           <el-table-column :label="$t('operation')" align="center" header-align="center" width="100">
             <template slot-scope="scope">
               <span v-if="scope.row.Status == '1' && !scope.row.UnitPrice">
-                <span class="op-btn" @click="showDialog('edit', scope.row)">{{
+                <span v-if="scope.row.IsAvailable" class="op-btn" @click="showDialog('edit', scope.row)">{{
+                    $t('resourcesManagement.toSetPriceAndOnShelf')
+                }}</span>
+                <span v-else class="op-btn" style="color: rgb(187, 187, 187); cursor: not-allowed;">{{
                     $t('resourcesManagement.toSetPriceAndOnShelf')
                 }}</span>
               </span>
@@ -71,9 +85,12 @@
                 }}</span>
               </span>
               <span v-if="scope.row.Status == '3' || scope.row.Status == '1' && scope.row.UnitPrice">
-                <span class="op-btn" @click="onShelf(scope.row)">{{
+                <span v-if="scope.row.IsAvailable" class="op-btn" @click="onShelf(scope.row)">{{
                     $t('resourcesManagement.toOnShelf')
                 }}</span>
+                <span v-else class="op-btn" style="color: rgb(187, 187, 187); cursor: not-allowed;">{{
+                    $t('resourcesManagement.toSetPriceAndOnShelf')
+                }}</span>
               </span>
             </template>
           </el-table-column>
@@ -132,6 +149,8 @@ export default {
       queueList: [{ k: '', v: this.$t('resourcesManagement.allResQueue') }],
       selStatus: '',
       statusList: [{ k: '', v: this.$t('resourcesManagement.allStatus') }, ...SPECIFICATION_STATUS],
+      selAvailable: '',
+      availableList: [{ k: '', v: this.$t('resourcesManagement.resourceSpecificationIsAvailableAll') }, { k: '1', v: this.$t('resourcesManagement.available') }, { k: '2', v: this.$t('resourcesManagement.notAvailable') }],
       clusterList: [...CLUSTERS],
       accCardTypeList: [...ACC_CARD_TYPE],
       syncLoading: false,
@@ -178,6 +197,7 @@ export default {
       const params = {
         queue: this.selQueue,
         status: this.selStatus,
+        available: this.selAvailable,
         page: this.pageInfo.curpage,
         pagesize: this.pageInfo.pageSize,
       };
@@ -201,6 +221,8 @@ export default {
               UpdatedTimeStr: formatDate(new Date(Spec.UpdatedTime * 1000), 'yyyy-MM-dd HH:mm:ss'),
               Status: Spec.Status.toString(),
               StatusStr: getListValueWithKey(this.statusList, Spec.Status.toString()),
+              IsAvailable: Spec.IsAvailable,
+              IsAvailableStr: Spec.IsAvailable ? this.$t('resourcesManagement.available') : this.$t('resourcesManagement.notAvailable'),
             }
           });
           this.tableData = data;
@@ -280,6 +302,11 @@ export default {
                 type: 'info',
                 message: this.$t('resourcesManagement.onShelfCode1001')
               });
+            } else if (type === 'on-shelf' && res.Code === 1003) {
+              this.$message({
+                type: 'info',
+                message: this.$t('resourcesManagement.onShelfCode1003')
+              });
             } else {
               this.$message({
                 type: 'error',