From 1bf3dd6db80f0abd49647042e222ed3ea6304500 Mon Sep 17 00:00:00 2001
From: TangShan_DD <tangshan@beyondcent.com>
Date: Tue, 28 May 2024 15:53:11 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20cloundTower=E4=BB=A3=E7=A0=81=E8=BF=81?=
 =?UTF-8?q?=E7=A7=BB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/common/filters/monitor.js                 |   2 +
 src/common/filters/personal.js                |   1 +
 src/services/platform/index.js                |   4 +-
 src/services/services/product.js              |   7 +
 src/views/cosa/bills/list/OutSide.vue         |   3 +-
 src/views/cosa/config/capacityHost.vue        |   2 +-
 src/views/cosa/config/capacityVm.vue          |   2 +-
 src/views/cosa/config/recycleResource.vue     |   2 +-
 .../addWhitelist.vue                          | 187 +++++
 .../CostOptimizationAllocation/checklist.vue  | 237 ++++++
 .../cost/CostOptimizationAllocation/index.vue |  32 +
 .../cost/CostOptimizationAllocation/rule.vue  | 258 ++++++
 .../CostOptimizationAllocation/whitelist.vue  | 196 +++++
 .../cost/CostOptimizationReport/CheckList.vue | 181 +++++
 .../cost/CostOptimizationReport/index.vue     | 130 +++
 .../cosa/cost/GlobalResourceMonitoring.vue    | 248 ++++++
 src/views/cosa/cost/NewResourceReport.vue     | 103 +++
 src/views/cosa/cost/components/Block.js       |  68 ++
 src/views/cosa/cost/components/Block.scss     |   9 +
 src/views/cosa/cost/components/TimeSelect.vue | 138 ++++
 .../personal/apply/components/AddDiskCT.vue   | 201 +++++
 .../apply/components/attributeItem.vue        |  14 +-
 .../components/CommonWrapper.vue              |  16 +-
 .../resource-apply/components/RegionItem.vue  |   7 +-
 src/views/resource-apply/data/EFCInit.js      | 151 ++++
 src/views/resource-apply/disk/cloudTower.vue  | 292 +++++++
 src/views/resource-apply/disk/index.vue       |   5 +-
 src/views/resource-apply/ecs/EFCDataDisk.vue  |  55 ++
 src/views/resource-apply/ecs/EFCIppool.vue    | 329 ++++++++
 src/views/resource-apply/ecs/EFCVmList.vue    | 763 ++++++++++++++++++
 src/views/resource-apply/ecs/ImageItem.vue    | 112 ++-
 .../ecs/cloudTower/DataDisk.vue               | 177 ++++
 .../resource-apply/ecs/cloudTower/index.vue   | 303 +++++++
 .../resource-apply/ecs/cloudTower/ippool.vue  | 194 +++++
 src/views/resource-apply/ecs/indexOld.vue     |  76 ++
 src/views/resource-apply/mixins/price.js      |   6 +
 .../product/service_catalog/config.ts         |   1 +
 vite.config.ts                                |   4 +-
 vue.config.js                                 |   4 +-
 39 files changed, 4477 insertions(+), 43 deletions(-)
 create mode 100644 src/views/cosa/cost/CostOptimizationAllocation/addWhitelist.vue
 create mode 100644 src/views/cosa/cost/CostOptimizationAllocation/checklist.vue
 create mode 100644 src/views/cosa/cost/CostOptimizationAllocation/index.vue
 create mode 100644 src/views/cosa/cost/CostOptimizationAllocation/rule.vue
 create mode 100644 src/views/cosa/cost/CostOptimizationAllocation/whitelist.vue
 create mode 100644 src/views/cosa/cost/CostOptimizationReport/CheckList.vue
 create mode 100644 src/views/cosa/cost/CostOptimizationReport/index.vue
 create mode 100644 src/views/cosa/cost/GlobalResourceMonitoring.vue
 create mode 100644 src/views/cosa/cost/NewResourceReport.vue
 create mode 100644 src/views/cosa/cost/components/Block.js
 create mode 100644 src/views/cosa/cost/components/Block.scss
 create mode 100644 src/views/cosa/cost/components/TimeSelect.vue
 create mode 100644 src/views/personal/apply/components/AddDiskCT.vue
 create mode 100644 src/views/resource-apply/data/EFCInit.js
 create mode 100644 src/views/resource-apply/disk/cloudTower.vue
 create mode 100644 src/views/resource-apply/ecs/EFCDataDisk.vue
 create mode 100644 src/views/resource-apply/ecs/EFCIppool.vue
 create mode 100644 src/views/resource-apply/ecs/EFCVmList.vue
 create mode 100644 src/views/resource-apply/ecs/cloudTower/DataDisk.vue
 create mode 100644 src/views/resource-apply/ecs/cloudTower/index.vue
 create mode 100644 src/views/resource-apply/ecs/cloudTower/ippool.vue
 create mode 100644 src/views/resource-apply/ecs/indexOld.vue

diff --git a/src/common/filters/monitor.js b/src/common/filters/monitor.js
index 5443662..4a5ac8b 100644
--- a/src/common/filters/monitor.js
+++ b/src/common/filters/monitor.js
@@ -39,6 +39,8 @@ export function resourceTypeMonitor(value) {
     MONITOR_OPENSTACK_HOST: 'OpenStack宿主机',
     MONITOR_OPENSTACK_VM: 'OpenStack云主机',
     MONITOR_OPENSTACK_SERVICE: 'OpenStack服务',
+    MONITOR_CLOUDTOWER_HOST: 'CloudTower宿主机',
+    MONITOR_CLOUDTOWER_VM: 'CloudTower云主机',
     MONITOR_FUSIONCLOUD_HOST: 'FUSIONCLOUD宿主机',
     MONITOR_FUSIONCLOUD_VM: 'FUSIONCLOUD云主机',
     MONITOR_MANAGEONE_HOST: 'ManageOne宿主机',
diff --git a/src/common/filters/personal.js b/src/common/filters/personal.js
index d672344..80635ef 100644
--- a/src/common/filters/personal.js
+++ b/src/common/filters/personal.js
@@ -179,6 +179,7 @@ export function categoryFilter(value) {
     ServiceSkuRevoke: '服务产品批量下架',
     ServiceSkuBatchRelease: '服务产品上架',
     ServiceSkuBatchRevoke: '服务产品批量下架',
+    EFCApplicationOperate: '服务使用申请',
     ApplicationOperate: '服务使用申请',
     AlterationOperate: '服务实例变更',
     ExtensionOperate: '服务实例延期',
diff --git a/src/services/platform/index.js b/src/services/platform/index.js
index 205da45..a9410a0 100644
--- a/src/services/platform/index.js
+++ b/src/services/platform/index.js
@@ -1835,7 +1835,9 @@ export function syncVm() {
 export function modifyVm(params) {
   return request.put(`${vmUrl}/${params.id}`, wrapperParams(params))
 }
-
+export function modifyCloudTowerNetcard(params) {
+  return request.post(`${vmUrl}/updateVmNics`, params)
+}
 export function removeVm(id) {
   const params = { id: id }
   return request.delete(`${vmUrl}/${id}`, params)
diff --git a/src/services/services/product.js b/src/services/services/product.js
index ef3a1bd..6a65801 100644
--- a/src/services/services/product.js
+++ b/src/services/services/product.js
@@ -51,3 +51,10 @@ export function unsubscribeService(params) {
 export function delayService(params) {
   return request.post('/cos/v1/resource/extension', wrapperParams(params))
 }
+export function modifyResourceEFC(params) {
+  return request.post('/cos/v1/resource/efc/alteration', wrapperParams({ workOrderTypeCode: 'CloudServerAlteration', ...params }))
+}
+// 服务退订
+export function unsubscribeServiceEFC(params) {
+  return request.post('/cos/v1/resource/efc/cancelation', wrapperParams({ workOrderTypeCode: 'CloudServerCancelation', ...params }))
+}
diff --git a/src/views/cosa/bills/list/OutSide.vue b/src/views/cosa/bills/list/OutSide.vue
index 40ed8b4..36c5ea7 100644
--- a/src/views/cosa/bills/list/OutSide.vue
+++ b/src/views/cosa/bills/list/OutSide.vue
@@ -266,7 +266,8 @@ export default {
       conditionCloudVendor({
         condition: JSON.stringify({
           condition: 'listByTypes',
-          types: ['HUAWEI', 'ALIYUN']
+          // types: ['HUAWEI', 'ALIYUN']
+          types: ['OPENSTACK', 'VMWARE', 'CNWARE', 'EASYSTACK', 'ARCHEROS', 'CLOUDTOWER']
         })
       }).then((data) => {
         if (data.success) {
diff --git a/src/views/cosa/config/capacityHost.vue b/src/views/cosa/config/capacityHost.vue
index 8da4c04..f22ea08 100644
--- a/src/views/cosa/config/capacityHost.vue
+++ b/src/views/cosa/config/capacityHost.vue
@@ -514,7 +514,7 @@ export default {
       conditionCloudVendor({
         condition: JSON.stringify({
           condition: 'listByTypes',
-          types: ['OPENSTACK', 'VMWARE', 'MANAGEONE']
+          types: ['OPENSTACK', 'VMWARE', 'INSPURRAIL', 'CNWARE', 'EASYSTACK', 'ARCHEROS', 'CLOUDTOWER', 'FUSIONSPHERE']
         })
       }).then((data) => {
         if (data.success) {
diff --git a/src/views/cosa/config/capacityVm.vue b/src/views/cosa/config/capacityVm.vue
index 505591e..a275ccf 100644
--- a/src/views/cosa/config/capacityVm.vue
+++ b/src/views/cosa/config/capacityVm.vue
@@ -509,7 +509,7 @@ export default {
       conditionCloudVendor({
         condition: JSON.stringify({
           condition: 'listByTypes',
-          types: ['OPENSTACK', 'VMWARE', 'MANAGEONE', 'TIANYI']
+          types: ['OPENSTACK', 'VMWARE', 'INSPURRAIL', 'CECSTACK', 'CNWARE', 'EASYSTACK', 'ARCHEROS', 'CLOUDTOWER', 'FUSIONSPHERE']
         })
       }).then((data) => {
         if (data.success) {
diff --git a/src/views/cosa/config/recycleResource.vue b/src/views/cosa/config/recycleResource.vue
index 5fba594..106dabb 100644
--- a/src/views/cosa/config/recycleResource.vue
+++ b/src/views/cosa/config/recycleResource.vue
@@ -505,7 +505,7 @@ export default {
       conditionCloudVendor({
         condition: JSON.stringify({
           condition: 'listByTypes',
-          types: ['OPENSTACK', 'VMWARE', 'MANAGEONE', 'TIANYI']
+          types: ['OPENSTACK', 'VMWARE', 'INSPURRAIL', 'CECSTACK', 'CNWARE', 'EASYSTACK', 'ARCHEROS', 'CLOUDTOWER', 'FUSIONSPHERE']
         })
       }).then((data) => {
         if (data.success) {
diff --git a/src/views/cosa/cost/CostOptimizationAllocation/addWhitelist.vue b/src/views/cosa/cost/CostOptimizationAllocation/addWhitelist.vue
new file mode 100644
index 0000000..8129435
--- /dev/null
+++ b/src/views/cosa/cost/CostOptimizationAllocation/addWhitelist.vue
@@ -0,0 +1,187 @@
+<template>
+  <el-dialog title="新增白名单对象" :close-on-click-modal="false" :visible.sync="dialog.visible" width="1200px" top="5vh">
+    <AdvanceTable :cardBorder="false" :searchConfigs="searchConfigs" title="" :data="list" :params="params" :columns="columns" :get-list="getData" :total="total" @selection-change="selectChange">
+      <template #ip="val, record">
+        <div v-if="record.vendorType == 'OPENSTACK' || record.vendorType == 'EASYSTACK' || record.vendorType == 'MANAGEONE' || record.vendorType == 'FUSIONCLOUD'">
+          <span v-for="item in record.privateIpsList" :key="item.networkId">
+            <div v-for="(items1, index) in item.addresses" :key="index">(内网){{ items1.address + (!item.networkName ? '' : '(' + item.networkName + ')') }}</div>
+          </span>
+        </div>
+        <div v-else-if="record.vendorType == 'VMWARE' || record.vendorType == 'INSPURRAIL' || record.vendorType == 'CNWARE' || record.vendorType == 'ZSTACK' || record.vendorType == 'CECSTACK'">
+          <div v-for="item in record.privateIpsList" :key="item.address">(内网){{ !item.address ? '' : item.address + (!item.networkName ? '' : '(' + item.networkName + ')') }}</div>
+        </div>
+        <div v-else-if="record.vendorType == 'HUAWEI' || record.vendorType == 'HCSO'">
+          <div v-for="item in record.privateIpsList" :key="item.address">{{ item.type == 'floating' ? '(公网)' : '(内网)' }}{{ !item.address ? '' : item.address + (!item.networkName ? '' : '(' + item.networkName + ')') }}</div>
+        </div>
+        <div v-else-if="record.vendorType == 'QCLOUD'">
+          <div v-for="(item, index) in record.privateIpsList" :key="index">(内网){{ item.address }}</div>
+        </div>
+        <div v-else-if="record.vendorType == 'AZURE' || record.vendorType == 'AWS'">
+          <div v-for="item in record.privateIpsList" :key="item">(内网){{ item }}</div>
+        </div>
+        <div v-else-if="record.vendorType == 'JDCLOUD'">
+          <div v-for="(item, index) in record.privateIpsList" :key="index">(内网){{ item }}</div>
+        </div>
+        <div v-else-if="record.vendorType == 'VOLCENGINE'">
+          <!-- <div v-for="(item, index) in record.privateIpsList" :key="index">(内网){{ item.primaryIpAddress }}</div> -->
+          <div v-if="JSON.parse(record.privateIps)[0].primaryIpAddress">{{ JSON.parse(record.privateIps)[0].primaryIpAddress }}(内网)</div>
+          <div v-if="JSON.parse(record.privateIps)[0].eipAddress">{{ JSON.parse(record.privateIps)[0].eipAddress }}(公网)</div>
+        </div>
+        <div v-else-if="record.vendorType == 'SMARTX' || record.vendorType == 'CLOUDTOWER'">
+          <div>{{ record.managerIp ? '(内网)' + record.managerIp : '--' }}</div>
+        </div>
+        <div v-else-if="record.vendorType == 'SANGFOR'">
+          <div>{{ record.privateIps }}</div>
+        </div>
+        <div v-else>
+          <div v-for="item in record.privateIpsList" :key="item">(内网){{ item }}</div>
+        </div>
+        <div v-if="record.floatingIp">(公网){{ record.floatingIp }}</div>
+        <div v-if="record.vendorType == 'CNWARE' || record.vendorType == 'CECSTACK'">
+          <div v-for="(item, index) in record.publicIps" :key="index">(公网){{ item.address }}</div>
+        </div>
+      </template>
+      <template #spec="val, record"> {{ (record.cpu ? record.cpu : 0) + 'C/' + (record.memory ? record.memory : 0) + 'GB/' }}{{ record.disk == null ? 0 : record.disk + 'GB' }} </template>
+      <template #status="status">
+        <status-icon :type="status | vmStatusColor">{{ status | openstackServer }}</status-icon>
+      </template>
+      <template #memory="val"> {{ val }} GB </template>
+    </AdvanceTable>
+    <div slot="footer" class="dialog-footer">
+      <el-button type="ghost" @click.native="dialog.visible = false">取消</el-button>
+      <el-button type="primary" @click.native="handleSubmit" :loading="loading">确定</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import { getVm, getCloudVendor } from 'services/platform/index'
+import { getProject } from 'services/system/project'
+import { addWhiteList } from '@/services/soa/costAnalysis'
+export default {
+  name: 'Dispose',
+  props: {
+    dialog: {
+      type: Object,
+      default: () => {
+        return {
+          visible: false,
+          data: {}
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      loading: false,
+      list: [],
+      total: 0,
+      params: {
+        page: 1,
+        rows: 10
+      },
+      columns: [
+        {
+          type: 'selection'
+        },
+        {
+          label: '资源名称',
+          prop: 'name'
+        },
+        {
+          label: 'IP地址',
+          prop: 'privateIps',
+          sortable: 'custom',
+          scopedSlots: { customRender: 'ip' }
+        },
+        {
+          label: '规格',
+          prop: 'spec',
+          scopedSlots: { customRender: 'spec' }
+        },
+        {
+          label: '存储总容量',
+          prop: 'disk'
+        },
+        {
+          label: '运行状态',
+          prop: 'status',
+          scopedSlots: { customRender: 'status' }
+        },
+        {
+          label: '所属平台',
+          prop: 'vendorName'
+        },
+        {
+          label: '所属项目',
+          prop: 'projectName'
+        },
+        {
+          label: '所属用户',
+          prop: 'ownerName'
+        },
+        {
+          label: '创建时间',
+          prop: 'gmtCreate'
+        }
+      ],
+      searchConfigs: [
+        { label: '资源名称', value: 'name', type: 'Input' },
+        { label: 'IP', value: 'privateIps', type: 'Input' },
+        {
+          label: '状态',
+          value: 'status',
+          type: 'Select',
+          data: [
+            { id: 'RUNNING', name: '运行中' },
+            { id: 'BUILDING', name: '创建中' },
+            { id: 'STOPPED', name: '关机' },
+            { id: 'SUSPENDED', name: '挂起' },
+            { id: 'EXCEPTION', name: '异常' },
+            { id: 'UNKNOWN', name: '断开' }
+          ]
+        },
+        { type: 'Select', label: '所属平台', value: 'vendorId', data: [], service: { api: getCloudVendor, params: { simple: true }, attr: 'data.rows' } },
+        { type: 'Select', label: '所属项目', value: 'projectId', data: [], service: { api: getProject, params: { simple: true }, attr: 'data.rows' } },
+        { value: 'isTemplate', type: 'Const', initValue: false },
+        { type: 'Const', label: '是否白名单', initValue: 0, value: 'isWhiteList' }
+      ],
+      selected: []
+    }
+  },
+  methods: {
+    selectChange(rows) {
+      this.selected = rows
+    },
+    getData() {
+      getVm(this.params).then((res) => {
+        this.list = res.data.rows.map((item) => {
+          if (item.privateIps) item.privateIpsList = JSON.parse(item.privateIps)
+          if (item.publicIps) item.publicIps = JSON.parse(item.publicIps)
+          if (item.vendorType === 'SANGFOR' && item.privateIps) {
+            item.privateIps = Object.values(JSON.parse(item.privateIps))
+              .map((item) => Object.keys(item)[0])
+              .toString()
+          }
+          return item
+        })
+        this.total = res.data.total
+      })
+    },
+    handleSubmit() {
+      this.loading = true
+      addWhiteList({ params: this.selected.map((item) => item.id) })
+        .then((res) => {
+          if (res.success) {
+            this.$message.success(res.message)
+            this.$emit('success')
+            this.dialog.visible = false
+          }
+        })
+        .finally(() => {
+          this.loading = false
+        })
+    }
+  }
+}
+</script>
diff --git a/src/views/cosa/cost/CostOptimizationAllocation/checklist.vue b/src/views/cosa/cost/CostOptimizationAllocation/checklist.vue
new file mode 100644
index 0000000..e658f90
--- /dev/null
+++ b/src/views/cosa/cost/CostOptimizationAllocation/checklist.vue
@@ -0,0 +1,237 @@
+<template>
+  <div>
+    <AdvanceTable :cardBorder="false" :searchConfigs="searchConfigs" title="" :data="list" :params="params" :columns="columns" :get-list="getData" :total="total" @selection-change="selectChange">
+      <template v-slot:action>
+        <el-button type="ghost" @click="handllExport()"> 导出 </el-button>
+        <el-button type="ghost" @click="handleOpenDispose()" :disabled="!selectList.length">处置</el-button>
+      </template>
+      <template #ip="val, record">
+        <div v-if="record.vendorType == 'OPENSTACK' || record.vendorType == 'EASYSTACK' || record.vendorType == 'MANAGEONE' || record.vendorType == 'FUSIONCLOUD'">
+          <span v-for="item in record.privateIpsList" :key="item.networkId">
+            <div v-for="(items1, index) in item.addresses" :key="index">(内网){{ items1.address + (!item.networkName ? '' : '(' + item.networkName + ')') }}</div>
+          </span>
+        </div>
+        <div v-else-if="record.vendorType == 'VMWARE' || record.vendorType == 'INSPURRAIL' || record.vendorType == 'CNWARE' || record.vendorType == 'ZSTACK' || record.vendorType == 'CECSTACK'">
+          <div v-for="item in record.privateIpsList" :key="item.address">(内网){{ !item.address ? '' : item.address + (!item.networkName ? '' : '(' + item.networkName + ')') }}</div>
+        </div>
+        <div v-else-if="record.vendorType == 'HUAWEI' || record.vendorType == 'HCSO'">
+          <div v-for="item in record.privateIpsList" :key="item.address">{{ item.type == 'floating' ? '(公网)' : '(内网)' }}{{ !item.address ? '' : item.address + (!item.networkName ? '' : '(' + item.networkName + ')') }}</div>
+        </div>
+        <div v-else-if="record.vendorType == 'QCLOUD'">
+          <div v-for="(item, index) in record.privateIpsList" :key="index">(内网){{ item.address }}</div>
+        </div>
+        <div v-else-if="record.vendorType == 'AZURE' || record.vendorType == 'AWS'">
+          <div v-for="item in record.privateIpsList" :key="item">(内网){{ item }}</div>
+        </div>
+        <div v-else-if="record.vendorType == 'JDCLOUD'">
+          <div v-for="(item, index) in record.privateIpsList" :key="index">(内网){{ item }}</div>
+        </div>
+        <div v-else-if="record.vendorType == 'VOLCENGINE'">
+          <!-- <div v-for="(item, index) in record.privateIpsList" :key="index">(内网){{ item.primaryIpAddress }}</div> -->
+          <div v-if="JSON.parse(record.privateIps)[0].primaryIpAddress">{{ JSON.parse(record.privateIps)[0].primaryIpAddress }}(内网)</div>
+          <div v-if="JSON.parse(record.privateIps)[0].eipAddress">{{ JSON.parse(record.privateIps)[0].eipAddress }}(公网)</div>
+        </div>
+        <div v-else-if="record.vendorType == 'SMARTX' || record.vendorType == 'CLOUDTOWER'">
+          <div>{{ record.managerIp ? '(内网)' + record.managerIp : '--' }}</div>
+        </div>
+        <div v-else-if="record.vendorType == 'SANGFOR'">
+          <div>{{ record.privateIps }}</div>
+        </div>
+        <div v-else>
+          <div v-for="item in record.privateIpsList" :key="item">(内网){{ item }}</div>
+        </div>
+        <div v-if="record.floatingIp">(公网){{ record.floatingIp }}</div>
+        <div v-if="record.vendorType == 'CNWARE' || record.vendorType == 'CECSTACK'">
+          <div v-for="(item, index) in record.publicIps" :key="index">(公网){{ item.address }}</div>
+        </div>
+      </template>
+      <template #status="status">
+        <status-icon :type="status | vmStatusColor">{{ status | openstackServer }}</status-icon>
+      </template>
+      <template #isHandle="val"> {{ val ? '已处置' : '未处置' }} </template>
+      <template #operate="val, record">
+        <el-button type="text" :disabled="record.isHandle" @click="handleOpenDispose(record)">处置</el-button>
+      </template>
+    </AdvanceTable>
+  </div>
+</template>
+
+<script>
+import { getCloudVendor } from 'services/platform/index'
+import { getProject } from 'services/system/project'
+import { downloadChecklist, getChecklist, disposeChecklist } from '@/services/soa/costAnalysis'
+import dayjs from 'utils/day'
+export default {
+  name: 'CheckList',
+  data() {
+    return {
+      list: [],
+      total: 0,
+      params: {
+        page: 1,
+        rows: 10
+      },
+      columns: [
+        {
+          type: 'selection',
+          selectable(row) {
+            return !row.isHandle
+          }
+        },
+        {
+          label: '资源名称',
+          width: '140px',
+          prop: 'name'
+        },
+        {
+          label: '处置状态',
+          prop: 'isHandle',
+          scopedSlots: { customRender: 'isHandle' }
+        },
+        {
+          label: 'IP地址',
+          prop: 'privateIps',
+          sortable: 'custom',
+          width: '140px',
+          scopedSlots: { customRender: 'ip' }
+        },
+        {
+          label: '规格',
+          width: '100px',
+          prop: 'spec'
+        },
+        {
+          label: '存储总容量(GB)',
+          width: '110px',
+          prop: 'disk'
+        },
+        {
+          label: '运行状态',
+          prop: 'status',
+          scopedSlots: { customRender: 'status' }
+        },
+        {
+          label: '命中规则',
+          prop: 'ruleName'
+        },
+        {
+          label: 'CPU利用率',
+          width: '90px',
+          prop: 'cpu'
+        },
+        {
+          label: '内存利用率',
+          width: '90px',
+          prop: 'mem'
+        },
+        {
+          label: '总成本消耗(元)',
+          prop: 'totalCost',
+          width: '110px'
+        },
+        {
+          label: '当月成本消耗(元)',
+          prop: 'monthCost',
+          width: '115px'
+        },
+        {
+          label: '季度成本消耗(元)',
+          prop: 'quarterCost',
+          width: '115px'
+        },
+        {
+          label: '当年成本消耗(元)',
+          prop: 'yearCost',
+          width: '115px'
+        },
+        {
+          label: '所属平台',
+          width: '120px',
+          prop: 'vendorName'
+        },
+        {
+          label: '所属项目',
+          width: '120px',
+          prop: 'projectName'
+        },
+        {
+          label: '所属用户',
+          width: '110px',
+          prop: 'ownerName'
+        },
+        {
+          label: '创建时间',
+          width: '160px',
+          prop: 'gmtCreate'
+        },
+        {
+          label: '运行时长',
+          width: '140px',
+          prop: 'duration'
+        },
+        {
+          label: '操作',
+          width: '80px',
+          scopedSlots: { customRender: 'operate' },
+          fixed: 'right'
+        }
+      ],
+      searchConfigs: [
+        { label: '资源名称', value: 'name', type: 'Input' },
+        { label: 'IP', value: 'ip', type: 'Input' },
+        { type: 'Select', label: '所属平台', value: 'vendorId', data: [], service: { api: getCloudVendor, params: { simple: true }, attr: 'data.rows' } },
+        { type: 'Select', label: '所属项目', value: 'projectId', data: [], service: { api: getProject, params: { simple: true }, attr: 'data.rows' } }
+      ],
+      selectList: []
+    }
+  },
+  methods: {
+    getParams() {
+      const { params, page, rows } = this.params
+      const newParams = { page, rows }
+      JSON.parse(params || '[]').map((item) => {
+        Object.keys(item.param).map((key) => {
+          newParams[key] = item.param[key]
+        })
+      })
+      return newParams
+    },
+    getData() {
+      getChecklist(this.getParams()).then((res) => {
+        if (res.success) {
+          this.list = res.data.rows.map((item) => {
+            if (item.privateIps) item.privateIpsList = JSON.parse(item.privateIps)
+            if (item.publicIps) item.publicIps = JSON.parse(item.publicIps)
+            if (item.vendorType === 'SANGFOR' && item.privateIps) {
+              item.privateIps = Object.values(JSON.parse(item.privateIps))
+                .map((item) => Object.keys(item)[0])
+                .toString()
+            }
+            // 当前时间 - 创建时间 = 运行时长
+            // xx 天 xx 小时
+            item.duration = item.gmtCreate ? dayjs().diff(dayjs(item.gmtCreate), 'day') + '天' + dayjs().diff(dayjs(item.gmtCreate), 'hour') + '小时' : '虚拟机不存在或已被删除'
+            return item
+          })
+          this.total = res.data.total
+        }
+      })
+    },
+    selectChange(rows) {
+      this.selectList = rows
+    },
+    async handleOpenDispose(record) {
+      const ids = record ? [record.id] : this.selectList.map(({ id }) => id)
+      const res = await disposeChecklist(ids)
+      if (!res.success) return
+      this.$message.success(res.message)
+      this.getData()
+    },
+    handllExport() {
+      const params = this.getParams()
+      delete params.page
+      delete params.rows
+      downloadChecklist(params)
+    }
+  }
+}
+</script>
diff --git a/src/views/cosa/cost/CostOptimizationAllocation/index.vue b/src/views/cosa/cost/CostOptimizationAllocation/index.vue
new file mode 100644
index 0000000..853bc9d
--- /dev/null
+++ b/src/views/cosa/cost/CostOptimizationAllocation/index.vue
@@ -0,0 +1,32 @@
+<template>
+  <el-tabs v-model="activeName" type="border-card">
+    <el-tab-pane name="CheckList" label="优化清单">
+      <CheckList v-if="activeName == 'CheckList'"></CheckList>
+    </el-tab-pane>
+    <el-tab-pane name="Rule" label="规则配置">
+      <Rule v-if="activeName == 'Rule'"></Rule>
+    </el-tab-pane>
+    <el-tab-pane name="Whitelist" label="白名单管理">
+      <Whitelist v-if="activeName == 'Whitelist'"></Whitelist>
+    </el-tab-pane>
+  </el-tabs>
+</template>
+
+<script>
+import CheckList from './checklist.vue'
+import Rule from './rule.vue'
+import Whitelist from './whitelist.vue'
+
+export default {
+  components: {
+    CheckList,
+    Rule,
+    Whitelist
+  },
+  data() {
+    return {
+      activeName: 'CheckList'
+    }
+  }
+}
+</script>
diff --git a/src/views/cosa/cost/CostOptimizationAllocation/rule.vue b/src/views/cosa/cost/CostOptimizationAllocation/rule.vue
new file mode 100644
index 0000000..6dae166
--- /dev/null
+++ b/src/views/cosa/cost/CostOptimizationAllocation/rule.vue
@@ -0,0 +1,258 @@
+<template>
+  <div class="wrapper">
+    <AdvanceTable :cardBorder="false" :searchConfigs="searchConfigs" :data="list" :params="params" :columns="columns" :get-list="getList" :total="total">
+      <template v-slot:action>
+        <el-button type="primary" @click="handleCreate()"> 新增 </el-button>
+      </template>
+      <template #rules="val">
+        <span v-for="(item, index) in val" :key="index"> {{ item.metric | alarmMetric }}{{ item.valueType | valueTypeFilter }}{{ item.operator }}{{ item.value }}持续{{ item.time }}分钟<template v-if="index !== val.length - 1">，</template> </span>
+      </template>
+      <template #operate="val, record">
+        <el-button type="text" @click="handleCreate(record)"><i class="el-icon-edit"></i>编辑</el-button>
+        <el-button type="text" @click="handleDelete(record.id)"><i class="el-icon-delete"></i> 删除</el-button>
+      </template>
+    </AdvanceTable>
+    <el-dialog :title="textMap[dialogStatus]" :close-on-click-modal="false" v-if="addFlag" :visible.sync="addFlag" width="1200px">
+      <basic-form :model="addData" ref="addData" label-width="110px">
+        <el-row>
+          <el-col :span="24">
+            <basic-form-item label="名称：" prop="name" validate="required">
+              <el-input v-model="addData.name" auto-complete="off"></el-input>
+            </basic-form-item>
+          </el-col>
+          <el-col :span="24">
+            <el-form-item label="规则：">
+              <el-row class="rule-box">
+                <el-col :span="24" v-for="(row, index) in addData.rules" :key="index" class="m-t">
+                  <el-row :gutter="10">
+                    <span class="m-l pull-left" style="display: inline-block; width: 110px">{{ row.metric | alarmMetric }}：</span>
+                    <el-col :span="4">
+                      <el-select v-model="row.valueType" clearable>
+                        <el-option v-for="item in valueType" :key="item.value" :label="item.name" :value="item.value"></el-option>
+                      </el-select>
+                    </el-col>
+                    <el-col :span="4">
+                      <el-select v-model="row.operator" clearable>
+                        <el-option v-for="(item, indexItem) in relationList" :key="indexItem" :label="item.value" :value="item.value"></el-option>
+                      </el-select>
+                    </el-col>
+                    <el-col :span="4">
+                      <el-input-number :min="0" v-model="row.value" auto-complete="off" @blur="changeValue(row.value, index)"></el-input-number>
+                    </el-col>
+                    <el-col :span="5">
+                      持续
+                      <el-input-number :min="0" :step="1" step-strictly v-model="row.time" auto-complete="off"></el-input-number>
+                      分钟
+                    </el-col>
+                    <el-col :span="4" v-if="index !== addData.rules.length - 1">
+                      <el-select v-model="row.relation" clearable>
+                        <el-option v-for="item in relationType" :key="item.value" :label="item.name" :value="item.value"></el-option>
+                      </el-select>
+                    </el-col>
+                  </el-row>
+                </el-col>
+              </el-row>
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </basic-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="ghost" @click.native="addFlag = false">取消</el-button>
+        <el-button type="primary" @click.native="addSubmit">确定</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { cloneDeep } from 'lodash-es'
+import { getRules, createRules, modifyRules, deleteRule } from '@/services/soa/costAnalysis'
+const relationList = [{ value: '>' }, { value: '>=' }, { value: '==' }, { value: '<' }, { value: '<=' }, { value: '!=' }]
+const valueType = [
+  { name: '最大值', value: 'max' },
+  { name: '最小值', value: 'min' },
+  { name: '平均值', value: 'avg' }
+]
+const relationType = [
+  { name: '与', value: 'and' },
+  { name: '或', value: 'or' }
+]
+const defaultRuleItem = { operator: '', value: '', valueType: '', relation: '', time: '', timeunit: 'm' }
+export default {
+  data() {
+    return {
+      columns: [
+        {
+          label: '名称',
+          prop: 'name'
+        },
+        {
+          label: '规则明细',
+          prop: 'rules',
+          width: '700px',
+          scopedSlots: { customRender: 'rules' }
+        },
+        {
+          label: '创建时间',
+          prop: 'gmtCreate'
+        },
+        {
+          label: '创建人',
+          prop: 'createName'
+        },
+        {
+          label: '操作',
+          width: '220px',
+          scopedSlots: { customRender: 'operate' }
+        }
+      ],
+      searchConfigs: [{ type: 'Input', label: '名称', value: 'name' }],
+      relationList,
+      relationType,
+      valueType,
+      list: null,
+      total: null,
+      params: {
+        page: 1,
+        rows: 10
+      },
+      // 新增编辑
+      addFlag: false,
+      addData: {},
+      textMap: {
+        update: '编辑优化分析',
+        create: '新增优化分析'
+      },
+      dialogStatus: ''
+    }
+  },
+  filters: {
+    valueTypeFilter(val) {
+      return valueType.find(({ value }) => value === val).name
+    }
+  },
+  methods: {
+    getList() {
+      getRules(this.params).then((data) => {
+        if (data.success) {
+          this.list = data.data.rows.map((item) => {
+            item.rules = JSON.parse(item.rules || '[]')
+            return item
+          })
+          this.total = data.data.total
+        }
+      })
+    },
+    // 查询
+    handleSearch(params) {
+      this.params.page = 1
+      this.params.params = params
+      this.getList()
+    },
+    handleCreate(data) {
+      if (data) {
+        this.addData = cloneDeep(data)
+        this.dialogStatus = 'update'
+        const type = []
+        this.addData.rules.forEach((item) => {
+          type.push(item.metric)
+        })
+        if (type.indexOf('cpuUsageAverage') == -1) {
+          this.addData.rules.push({ metric: 'memUsageAverage', ...cloneDeep(defaultRuleItem) })
+        }
+        if (type.indexOf('memUsageAverage') == -1) {
+          this.addData.rules.push({ metric: 'memUsageAverage', ...cloneDeep(defaultRuleItem) })
+        }
+        if (type.indexOf('diskUsedPercent') == -1) {
+          this.addData.rules.push({ metric: 'diskUsedPercent', ...cloneDeep(defaultRuleItem) })
+        }
+        this.addFlag = true
+      } else {
+        this.addData = {
+          name: '',
+          rules: [
+            { metric: 'cpuUsageAverage', ...cloneDeep(defaultRuleItem) },
+            { metric: 'memUsageAverage', ...cloneDeep(defaultRuleItem) },
+            { metric: 'diskUsedPercent', ...cloneDeep(defaultRuleItem) }
+          ]
+        }
+        this.dialogStatus = 'create'
+        this.addFlag = true
+      }
+    },
+    addSubmit() {
+      this.$refs.addData.validate((valid) => {
+        if (valid) {
+          const rulesFlag = this.addData.rules.every((item) => {
+            if ((item.operator && item.value && item.valueType && item.time) || (!item.operator && !item.value && !item.valueType && !item.time)) {
+              return true
+            } else {
+              return false
+            }
+          })
+          if (!rulesFlag) {
+            return this.$message({
+              message: '请确保规则信息填写完整',
+              type: 'error'
+            })
+          }
+          const addData = {
+            rules: []
+          }
+          const edit = ['id', 'name', 'type', 'gmtCreate', 'creatorId', 'deleted']
+          edit.forEach((attr) => {
+            addData[attr] = this.addData[attr]
+          })
+          addData.rules = Object.assign([], this.addData.rules)
+          for (let j = 0; j < addData.rules.length; j++) {
+            if (!addData.rules[j].operator) {
+              addData.rules.splice(j, 1)
+              j--
+            }
+          }
+          if (!addData.rules.length) {
+            return this.$message.error('至少选一项规则填写！')
+          }
+          if (this.dialogStatus == 'update') {
+            modifyRules(addData).then((data) => {
+              if (data.success) {
+                this.$message.success(data.message)
+                this.getList()
+                this.addFlag = false
+              }
+            })
+          } else {
+            createRules(addData).then((data) => {
+              if (data.success) {
+                this.$message.success(data.message)
+                this.getList()
+                this.addFlag = false
+              }
+            })
+          }
+        }
+      })
+    },
+    handleDelete(id) {
+      this.$confirm('您确定要删除该规则吗?', '提示', {
+        confirmButtonClass: 'el-button--danger',
+        type: 'warning'
+      })
+        .then(() => {
+          deleteRule(id).then((data) => {
+            if (data.success) {
+              this.$message.success(data.message)
+              this.getList()
+            }
+          })
+        })
+        .catch(() => {})
+    },
+    changeValue(value, index) {
+      if (value < 0) {
+        this.addData.rules[index].value = 0
+      }
+    }
+  }
+}
+</script>
diff --git a/src/views/cosa/cost/CostOptimizationAllocation/whitelist.vue b/src/views/cosa/cost/CostOptimizationAllocation/whitelist.vue
new file mode 100644
index 0000000..f295040
--- /dev/null
+++ b/src/views/cosa/cost/CostOptimizationAllocation/whitelist.vue
@@ -0,0 +1,196 @@
+<template>
+  <div>
+    <AdvanceTable :cardBorder="false" :searchConfigs="searchConfigs" title="" :data="list" :params="params" :columns="columns" :get-list="getData" :total="total">
+      <template v-slot:action>
+        <el-button type="primary" @click="handllAdd"> 新增 </el-button>
+      </template>
+
+      <template #ip="val, record">
+        <div v-if="record.vendorType == 'OPENSTACK' || record.vendorType == 'EASYSTACK' || record.vendorType == 'MANAGEONE' || record.vendorType == 'FUSIONCLOUD'">
+          <span v-for="item in record.privateIpsList" :key="item.networkId">
+            <div v-for="(items1, index) in item.addresses" :key="index">(内网){{ items1.address + (!item.networkName ? '' : '(' + item.networkName + ')') }}</div>
+          </span>
+        </div>
+        <div v-else-if="record.vendorType == 'VMWARE' || record.vendorType == 'INSPURRAIL' || record.vendorType == 'CNWARE' || record.vendorType == 'ZSTACK' || record.vendorType == 'CECSTACK'">
+          <div v-for="item in record.privateIpsList" :key="item.address">(内网){{ !item.address ? '' : item.address + (!item.networkName ? '' : '(' + item.networkName + ')') }}</div>
+        </div>
+        <div v-else-if="record.vendorType == 'HUAWEI' || record.vendorType == 'HCSO'">
+          <div v-for="item in record.privateIpsList" :key="item.address">{{ item.type == 'floating' ? '(公网)' : '(内网)' }}{{ !item.address ? '' : item.address + (!item.networkName ? '' : '(' + item.networkName + ')') }}</div>
+        </div>
+        <div v-else-if="record.vendorType == 'QCLOUD'">
+          <div v-for="(item, index) in record.privateIpsList" :key="index">(内网){{ item.address }}</div>
+        </div>
+        <div v-else-if="record.vendorType == 'AZURE' || record.vendorType == 'AWS'">
+          <div v-for="item in record.privateIpsList" :key="item">(内网){{ item }}</div>
+        </div>
+        <div v-else-if="record.vendorType == 'JDCLOUD'">
+          <div v-for="(item, index) in record.privateIpsList" :key="index">(内网){{ item }}</div>
+        </div>
+        <div v-else-if="record.vendorType == 'VOLCENGINE'">
+          <!-- <div v-for="(item, index) in record.privateIpsList" :key="index">(内网){{ item.primaryIpAddress }}</div> -->
+          <div v-if="JSON.parse(record.privateIps)[0].primaryIpAddress">{{ JSON.parse(record.privateIps)[0].primaryIpAddress }}(内网)</div>
+          <div v-if="JSON.parse(record.privateIps)[0].eipAddress">{{ JSON.parse(record.privateIps)[0].eipAddress }}(公网)</div>
+        </div>
+        <div v-else-if="record.vendorType == 'SMARTX' || record.vendorType == 'CLOUDTOWER'">
+          <div>{{ record.managerIp ? '(内网)' + record.managerIp : '--' }}</div>
+        </div>
+        <div v-else-if="record.vendorType == 'SANGFOR'">
+          <div>{{ record.privateIps }}</div>
+        </div>
+        <div v-else>
+          <div v-for="item in record.privateIpsList" :key="item">(内网){{ item }}</div>
+        </div>
+        <div v-if="record.floatingIp">(公网){{ record.floatingIp }}</div>
+        <div v-if="record.vendorType == 'CNWARE' || record.vendorType == 'CECSTACK'">
+          <div v-for="(item, index) in record.publicIps" :key="index">(公网){{ item.address }}</div>
+        </div>
+      </template>
+      <template #spec="val, record"> {{ (record.cpu ? record.cpu : 0) + 'C/' + (record.memory ? record.memory : 0) + 'GB/' }}{{ record.disk == null ? 0 : record.disk + 'GB' }} </template>
+      <template #status="status">
+        <status-icon :type="status | vmStatusColor">{{ status | openstackServer }}</status-icon>
+      </template>
+      <template #memory="val"> {{ val }} GB </template>
+      <template #operate="val, record">
+        <el-button type="text" @click="handleRemove(record)">移除</el-button>
+      </template>
+    </AdvanceTable>
+    <AddWhitelist v-if="addDialog.visible" :dialog="addDialog" @success="getData"></AddWhitelist>
+  </div>
+</template>
+
+<script>
+import { getCloudVendor } from 'services/platform/index'
+import { getProject } from 'services/system/project'
+import AddWhitelist from './addWhitelist.vue'
+import { getWhiteList, removeWhiteList } from '@/services/soa/costAnalysis'
+import dayjs from 'utils/day'
+export default {
+  name: 'Whitelist',
+  components: { AddWhitelist },
+  data() {
+    return {
+      list: [],
+      total: 0,
+      params: {
+        page: 1,
+        rows: 10
+      },
+      columns: [
+        {
+          label: '资源名称',
+          prop: 'name'
+        },
+        {
+          label: 'IP地址',
+          prop: 'privateIps',
+          sortable: 'custom',
+          scopedSlots: { customRender: 'ip' }
+        },
+        {
+          label: '规格',
+          prop: 'spec',
+          scopedSlots: { customRender: 'spec' }
+        },
+        {
+          label: '存储总容量（GB）',
+          prop: 'disk'
+        },
+        {
+          label: '运行状态',
+          prop: 'status',
+          scopedSlots: { customRender: 'status' }
+        },
+        {
+          label: '所属平台',
+          prop: 'vendorName'
+        },
+        {
+          label: '所属项目',
+          prop: 'projectName'
+        },
+        {
+          label: '所属用户',
+          prop: 'ownerName'
+        },
+        {
+          label: '创建时间',
+          prop: 'gmtCreate'
+        },
+        {
+          label: '运行时长',
+          prop: 'duration'
+        },
+        {
+          label: '操作',
+          width: '120px',
+          scopedSlots: { customRender: 'operate' }
+        }
+      ],
+      searchConfigs: [
+        { label: '资源名称', value: 'name', type: 'Input' },
+        { label: 'IP', value: 'privateIps', type: 'Input' },
+        {
+          label: '状态',
+          value: 'status',
+          type: 'Select',
+          data: [
+            { id: 'RUNNING', name: '运行中' },
+            { id: 'BUILDING', name: '创建中' },
+            { id: 'STOPPED', name: '关机' },
+            { id: 'SUSPENDED', name: '挂起' },
+            { id: 'EXCEPTION', name: '异常' },
+            { id: 'UNKNOWN', name: '断开' }
+          ]
+        },
+        { type: 'Select', label: '所属平台', value: 'vendorId', data: [], service: { api: getCloudVendor, params: { simple: true }, attr: 'data.rows' } },
+        { type: 'Select', label: '所属项目', value: 'projectId', data: [], service: { api: getProject, params: { simple: true }, attr: 'data.rows' } },
+        { type: 'Const', label: '是否白名单', initValue: 1, value: 'isWhiteList' }
+      ],
+      addDialog: {
+        visible: false,
+        data: {}
+      }
+    }
+  },
+  methods: {
+    getData() {
+      getWhiteList(this.params).then((res) => {
+        this.list = res.data.rows.map((item) => {
+          if (item.privateIps) item.privateIpsList = JSON.parse(item.privateIps)
+          if (item.publicIps) item.publicIps = JSON.parse(item.publicIps)
+          if (item.vendorType === 'SANGFOR' && item.privateIps) {
+            item.privateIps = Object.values(JSON.parse(item.privateIps))
+              .map((item) => Object.keys(item)[0])
+              .toString()
+          }
+          // 当前时间 - 创建时间 = 运行时长
+          // xx 天 xx 小时
+          item.duration = item.gmtCreate ? dayjs().diff(dayjs(item.gmtCreate), 'day') + '天' + dayjs().diff(dayjs(item.gmtCreate), 'hour') + '小时' : '虚拟机不存在或已被删除'
+          return item
+        })
+        this.total = res.data.total
+      })
+    },
+    handleRemove(record) {
+      this.$confirm('确定移除该资源吗？', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        removeWhiteList({ id: record.id }).then((res) => {
+          if (res.success) {
+            this.getData()
+            this.$message.success(res.message)
+          }
+        })
+      })
+    },
+    handllAdd() {
+      this.addDialog = {
+        visible: true,
+        data: {}
+      }
+    }
+  }
+}
+</script>
diff --git a/src/views/cosa/cost/CostOptimizationReport/CheckList.vue b/src/views/cosa/cost/CostOptimizationReport/CheckList.vue
new file mode 100644
index 0000000..e199bdc
--- /dev/null
+++ b/src/views/cosa/cost/CostOptimizationReport/CheckList.vue
@@ -0,0 +1,181 @@
+<template>
+  <AdvanceTable :cardBorder="false" title="" :searchConfigs="searchConfigs" :data="list" :params="params" :columns="columns" :get-list="getData" :total="total">
+    <template #ip="val, record">
+      <div v-if="record.vendorType == 'OPENSTACK' || record.vendorType == 'EASYSTACK' || record.vendorType == 'MANAGEONE' || record.vendorType == 'FUSIONCLOUD'">
+        <span v-for="item in record.privateIpsList" :key="item.networkId">
+          <div v-for="(items1, index) in item.addresses" :key="index">(内网){{ items1.address + (!item.networkName ? '' : '(' + item.networkName + ')') }}</div>
+        </span>
+      </div>
+      <div v-else-if="record.vendorType == 'VMWARE' || record.vendorType == 'INSPURRAIL' || record.vendorType == 'CNWARE' || record.vendorType == 'ZSTACK' || record.vendorType == 'CECSTACK'">
+        <div v-for="item in record.privateIpsList" :key="item.address">(内网){{ !item.address ? '' : item.address + (!item.networkName ? '' : '(' + item.networkName + ')') }}</div>
+      </div>
+      <div v-else-if="record.vendorType == 'HUAWEI' || record.vendorType == 'HCSO'">
+        <div v-for="item in record.privateIpsList" :key="item.address">{{ item.type == 'floating' ? '(公网)' : '(内网)' }}{{ !item.address ? '' : item.address + (!item.networkName ? '' : '(' + item.networkName + ')') }}</div>
+      </div>
+      <div v-else-if="record.vendorType == 'QCLOUD'">
+        <div v-for="(item, index) in record.privateIpsList" :key="index">(内网){{ item.address }}</div>
+      </div>
+      <div v-else-if="record.vendorType == 'AZURE' || record.vendorType == 'AWS'">
+        <div v-for="item in record.privateIpsList" :key="item">(内网){{ item }}</div>
+      </div>
+      <div v-else-if="record.vendorType == 'JDCLOUD'">
+        <div v-for="(item, index) in record.privateIpsList" :key="index">(内网){{ item }}</div>
+      </div>
+      <div v-else-if="record.vendorType == 'VOLCENGINE'">
+        <!-- <div v-for="(item, index) in record.privateIpsList" :key="index">(内网){{ item.primaryIpAddress }}</div> -->
+        <div v-if="JSON.parse(record.privateIps)[0].primaryIpAddress">{{ JSON.parse(record.privateIps)[0].primaryIpAddress }}(内网)</div>
+        <div v-if="JSON.parse(record.privateIps)[0].eipAddress">{{ JSON.parse(record.privateIps)[0].eipAddress }}(公网)</div>
+      </div>
+      <div v-else-if="record.vendorType == 'SMARTX' || record.vendorType == 'CLOUDTOWER'">
+        <div>{{ record.managerIp ? '(内网)' + record.managerIp : '--' }}</div>
+      </div>
+      <div v-else-if="record.vendorType == 'SANGFOR'">
+        <div>{{ record.privateIps }}</div>
+      </div>
+      <div v-else>
+        <div v-for="item in record.privateIpsList" :key="item">(内网){{ item }}</div>
+      </div>
+      <div v-if="record.floatingIp">(公网){{ record.floatingIp }}</div>
+      <div v-if="record.vendorType == 'CNWARE' || record.vendorType == 'CECSTACK'">
+        <div v-for="(item, index) in record.publicIps" :key="index">(公网){{ item.address }}</div>
+      </div>
+    </template>
+    <template #optimizeType="val">
+      {{ val | statusList }}
+    </template>
+    <template #beforeSpec="val, record"> {{ record.beforCpu }}C/{{ record.beforMem }}GB </template>
+    <template #afterSpec="val, record"> {{ record.afterCpu }}C/{{ record.afterMem }}GB </template>
+    <template #memory="val"> {{ val }} GB </template>
+  </AdvanceTable>
+</template>
+
+<script>
+import { getCloudVendor } from 'services/platform/index'
+import { getCostOptimizationMonth } from '@/services/soa/costAnalysis'
+import { getProject } from 'services/system/project'
+import dayjs from 'utils/day'
+const statusList = [
+  {
+    name: '变更',
+    id: 'change'
+  },
+  {
+    name: '清退',
+    id: 'unsubscribe'
+  }
+]
+export default {
+  name: 'CheckList',
+  props: {
+    detail: {
+      type: Object,
+      default: () => {}
+    }
+  },
+  filters: {
+    statusList(val) {
+      return statusList.find((item) => item.id === val)?.name || 'val'
+    }
+  },
+  data() {
+    return {
+      list: [],
+      total: 0,
+      params: {
+        page: 1,
+        rows: 10
+      },
+      columns: [
+        {
+          label: '资源名称',
+          prop: 'serverName'
+        },
+        {
+          label: 'IP地址',
+          prop: 'privateIps',
+          sortable: 'custom',
+          scopedSlots: { customRender: 'ip' }
+        },
+        {
+          label: '优化类型',
+          prop: 'optimizeType',
+          scopedSlots: { customRender: 'optimizeType' }
+        },
+        {
+          label: '优化完成时间',
+          prop: 'optimizeTime'
+        },
+        {
+          label: '优化前规格',
+          prop: 'beforeSpec',
+          scopedSlots: { customRender: 'beforeSpec' }
+        },
+        {
+          label: '优化后规格',
+          prop: 'afterSpec',
+          scopedSlots: { customRender: 'afterSpec' }
+        },
+        {
+          label: '优化前存储总容量(GB)',
+          prop: 'beforDisk'
+        },
+        {
+          label: '优化后存储总容量(GB)',
+          prop: 'afterDisk'
+        },
+        {
+          label: '所属平台',
+          prop: 'vendorName'
+        },
+        {
+          label: '所属项目',
+          prop: 'projectName'
+        },
+        {
+          label: '所属用户',
+          prop: 'ownerName'
+        },
+        {
+          label: '创建时间',
+          prop: 'createDate'
+        }
+      ],
+      searchConfigs: [
+        { label: '资源名称', value: 'serverName', type: 'Input' },
+        { label: 'IP', value: 'privateIps', type: 'Input' },
+        { type: 'Select', label: '所属平台', value: 'vendorId', data: [], service: { api: getCloudVendor, params: { simple: true }, attr: 'data.rows' } },
+        { type: 'Select', label: '所属项目', value: 'projectId', data: [], service: { api: getProject, params: { simple: true }, attr: 'data.rows' } },
+        {
+          type: 'Select',
+          label: '优化类型',
+          value: 'optimizeType',
+          data: statusList
+        },
+        { label: '报表ID', value: 'optimizeTime', type: 'DateRange', initValue: [dayjs(this.detail.month).startOf('month').format('YYYY-MM-DD 00:00:00'), dayjs(this.detail.month).endOf('month').format('YYYY-MM-DD 23:59:59')] }
+      ]
+    }
+  },
+
+  methods: {
+    getData() {
+      getCostOptimizationMonth(this.params).then((res) => {
+        if (res.success) {
+          this.list = res.data.data.map((item) => {
+            item.beforMem = item.beforMem * 1
+            item.afterMem = item.afterMem * 1
+            if (item.privateIps) item.privateIpsList = JSON.parse(item.privateIps)
+            if (item.publicIps) item.publicIps = JSON.parse(item.publicIps)
+            if (item.vendorType === 'SANGFOR' && item.privateIps) {
+              item.privateIps = Object.values(JSON.parse(item.privateIps))
+                .map((item) => Object.keys(item)[0])
+                .toString()
+            }
+            return item
+          })
+          this.total = res.data.total
+        }
+      })
+    }
+  }
+}
+</script>
diff --git a/src/views/cosa/cost/CostOptimizationReport/index.vue b/src/views/cosa/cost/CostOptimizationReport/index.vue
new file mode 100644
index 0000000..6f2506c
--- /dev/null
+++ b/src/views/cosa/cost/CostOptimizationReport/index.vue
@@ -0,0 +1,130 @@
+<template>
+  <div>
+    <AdvanceTable title="成本优化报表" :isInitSearch="false" :searchConfigs="searchConfigs" :data="list" :params="params" :columns="columns" :get-list="getData" :total="total">
+      <template v-slot:action>
+        <TimeSelect ref="timeSelectRef" @success="getData">
+          <el-button type="primary" @click="handllExport()"> 导出 </el-button>
+        </TimeSelect>
+      </template>
+      <template #month="val, record">
+        <span class="detail-href" @click="getDetail(record)">{{ val }}</span>
+      </template>
+    </AdvanceTable>
+    <common-detail v-if="detailFlag" :title="detail.orderSn" @goBack="detailFlag = false">
+      <template v-slot:item_container>
+        <common-detail-item :label="item.label" v-for="item in columns" :key="item.prop">{{ detail[item.prop] }}</common-detail-item>
+      </template>
+      <el-tabs value="checkList">
+        <el-tab-pane label="优化清单" name="checkList">
+          <CheckList :detail="detail"></CheckList>
+        </el-tab-pane>
+      </el-tabs>
+    </common-detail>
+  </div>
+</template>
+
+<script>
+import { getCostOptimization, downloadCostOptimization, getCostOptimizationCount } from '@/services/soa/costAnalysis'
+import Block from '../components/Block.js'
+import TimeSelect from '../components/TimeSelect.vue'
+import CheckList from './CheckList'
+
+export default {
+  mixins: [Block],
+  components: { TimeSelect, CheckList },
+  data() {
+    return {
+      list: [],
+      total: 0,
+      params: {
+        page: 1,
+        rows: 10
+      },
+      columns: [
+        {
+          label: '月份',
+          prop: 'month',
+          scopedSlots: { customRender: 'month' }
+        },
+        {
+          label: 'CPU优化量(核)',
+          prop: 'cpu'
+        },
+        {
+          label: '内存优化量(GB)',
+          prop: 'memory'
+        },
+        {
+          label: '存储优化量(GB)',
+          prop: 'disk'
+        },
+        {
+          label: '变配资源(台)',
+          prop: 'changeCount'
+        },
+        {
+          label: '清退资源(台)',
+          prop: 'unsubscribeCount'
+        }
+      ],
+      searchConfigs: [],
+      detail: {},
+      detailFlag: false
+    }
+  },
+  mounted() {
+    this.getData()
+  },
+  methods: {
+    getDetail(data) {
+      this.detail = data
+      this.detailFlag = true
+    },
+    getData() {
+      const params = this.$refs.timeSelectRef.params
+      if (params.type !== 'Years' && params.year && !params.month) return this.$message.error('请选择月份')
+      getCostOptimization({ page: this.params.page, rows: this.params.rows, time: JSON.stringify(params.time) }).then((res) => {
+        if (res.success) {
+          this.list = res.data.data
+          this.total = res.data.total
+        }
+      })
+      getCostOptimizationCount({ page: this.params.page, rows: this.params.rows, time: JSON.stringify(params.time) }).then((res) => {
+        setTimeout(() => {
+          this.GeneratorBlockComponent([
+            {
+              name: '总节省成本',
+              value: res.data?.money ?? '--',
+              unit: '元'
+            },
+            {
+              name: 'CPU优化量',
+              value: res.data?.cpu ?? '--',
+              unit: '核'
+            },
+            {
+              name: '内存优化量',
+              value: res.data?.memory ?? '--',
+              unit: 'GB'
+            },
+            {
+              name: '存储优化量',
+              value: res.data?.disk ?? '--',
+              unit: 'GB'
+            }
+          ])
+        }, 500)
+      })
+    },
+
+    handllExport() {
+      const params = this.$refs.timeSelectRef.params
+      if (params.type !== 'Years' && params.year && !params.month) return this.$message.error('请选择月份')
+      downloadCostOptimization({ page: this.params.page, rows: this.params.rows, time: JSON.stringify(params.time) })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+@import '../components/Block.scss';
+</style>
diff --git a/src/views/cosa/cost/GlobalResourceMonitoring.vue b/src/views/cosa/cost/GlobalResourceMonitoring.vue
new file mode 100644
index 0000000..cb8e7f4
--- /dev/null
+++ b/src/views/cosa/cost/GlobalResourceMonitoring.vue
@@ -0,0 +1,248 @@
+<template>
+  <el-card>
+    <div slot="header">
+      <div>
+        全局资源监测
+        <!-- <span class="pull-right">最后更新时间：{{}}</span> -->
+      </div>
+      <div class="m-t">
+        <el-alert :closable="false">汇总云管平台中全量云资源的真实使用情况以及成本占用数据，结合多种监控指标维度帮助用户有效了解平台运营层面的全局走势，以便及时采集相应优化举措，提升管理质量。</el-alert>
+      </div>
+    </div>
+    <AdvanceTable :cardBorder="false" title="" :searchConfigs="searchConfigs" :data="list" :params="params" :columns="columns" :get-list="getData" :total="total">
+      <template v-slot:action>
+        <el-button type="primary" @click="handllExport()"> 导出 </el-button>
+        <!-- <el-button type="primary" @click="handllRefresh()"> 更新 </el-button> -->
+      </template>
+
+      <template #ip="val, record">
+        <div v-if="record.vendorType == 'OPENSTACK' || record.vendorType == 'EASYSTACK' || record.vendorType == 'MANAGEONE' || record.vendorType == 'FUSIONCLOUD'">
+          <span v-for="item in record.privateIpsList" :key="item.networkId">
+            <div v-for="(items1, index) in item.addresses" :key="index">(内网){{ items1.address + (!item.networkName ? '' : '(' + item.networkName + ')') }}</div>
+          </span>
+        </div>
+        <div v-else-if="record.vendorType == 'VMWARE' || record.vendorType == 'INSPURRAIL' || record.vendorType == 'CNWARE' || record.vendorType == 'ZSTACK' || record.vendorType == 'CECSTACK'">
+          <div v-for="item in record.privateIpsList" :key="item.address">(内网){{ !item.address ? '' : item.address + (!item.networkName ? '' : '(' + item.networkName + ')') }}</div>
+        </div>
+        <div v-else-if="record.vendorType == 'HUAWEI' || record.vendorType == 'HCSO'">
+          <div v-for="item in record.privateIpsList" :key="item.address">{{ item.type == 'floating' ? '(公网)' : '(内网)' }}{{ !item.address ? '' : item.address + (!item.networkName ? '' : '(' + item.networkName + ')') }}</div>
+        </div>
+        <div v-else-if="record.vendorType == 'QCLOUD'">
+          <div v-for="(item, index) in record.privateIpsList" :key="index">(内网){{ item.address }}</div>
+        </div>
+        <div v-else-if="record.vendorType == 'AZURE' || record.vendorType == 'AWS'">
+          <div v-for="item in record.privateIpsList" :key="item">(内网){{ item }}</div>
+        </div>
+        <div v-else-if="record.vendorType == 'JDCLOUD'">
+          <div v-for="(item, index) in record.privateIpsList" :key="index">(内网){{ item }}</div>
+        </div>
+        <div v-else-if="record.vendorType == 'VOLCENGINE'">
+          <!-- <div v-for="(item, index) in record.privateIpsList" :key="index">(内网){{ item.primaryIpAddress }}</div> -->
+          <div v-if="JSON.parse(record.privateIps)[0].primaryIpAddress">{{ JSON.parse(record.privateIps)[0].primaryIpAddress }}(内网)</div>
+          <div v-if="JSON.parse(record.privateIps)[0].eipAddress">{{ JSON.parse(record.privateIps)[0].eipAddress }}(公网)</div>
+        </div>
+        <div v-else-if="record.vendorType == 'SMARTX' || record.vendorType == 'CLOUDTOWER'">
+          <div>{{ record.managerIp ? '(内网)' + record.managerIp : '--' }}</div>
+        </div>
+        <div v-else-if="record.vendorType == 'SANGFOR'">
+          <div>{{ record.privateIps }}</div>
+        </div>
+        <div v-else>
+          <div v-for="item in record.privateIpsList" :key="item">(内网){{ item }}</div>
+        </div>
+        <div v-if="record.floatingIp">(公网){{ record.floatingIp }}</div>
+        <div v-if="record.vendorType == 'CNWARE' || record.vendorType == 'CECSTACK'">
+          <div v-for="(item, index) in record.publicIps" :key="index">(公网){{ item.address }}</div>
+        </div>
+      </template>
+      <template #spec="val, record"> {{ (record.cpu ? record.cpu : 0) + 'C/' + (record.memory ? record.memory : 0) + 'GB/' }}{{ record.disk == null ? 0 : record.disk + 'GB' }} </template>
+      <template #status="status">
+        <status-icon :type="status | vmStatusColor">{{ status | openstackServer }}</status-icon>
+      </template>
+      <template #memory="val"> {{ val }} GB </template>
+    </AdvanceTable>
+  </el-card>
+</template>
+
+<script>
+import { getCloudVendor } from 'services/platform/index'
+import { refreshGlobalResourceMonitoring, downloadGlobalResourceList, getGlobalResourceMonitoringCount } from '@/services/soa/costAnalysis'
+import { getPolicyVms } from '@/services/monitor'
+import { getProject } from 'services/system/project'
+import dayjs from 'utils/day'
+import Block from './components/Block.js'
+export default {
+  mixins: [Block],
+  data() {
+    return {
+      list: [],
+      total: 0,
+      params: {
+        page: 1,
+        rows: 10
+      },
+      columns: [
+        {
+          width: '160px',
+          label: '资源名称',
+          prop: 'name'
+        },
+        {
+          width: '200px',
+          label: 'IP地址',
+          prop: 'privateIps',
+          sortable: 'custom',
+          scopedSlots: { customRender: 'ip' }
+        },
+        {
+          width: '120px',
+          label: '规格',
+          prop: 'spec',
+          scopedSlots: { customRender: 'spec' }
+        },
+        {
+          width: '110px',
+          label: '存储总容量(GB)',
+          prop: 'disk'
+        },
+        {
+          label: '运行状态',
+          prop: 'status',
+          scopedSlots: { customRender: 'status' }
+        },
+
+        {
+          width: '90px',
+          label: 'CPU利用率',
+          prop: 'cpuUsage'
+        },
+        {
+          width: '90px',
+          label: '内存利用率',
+          prop: 'memUsage'
+        },
+        {
+          width: '140px',
+          label: ' 磁盘读取速率(KB/s)',
+          prop: 'diskRead'
+        },
+        {
+          width: '140px',
+          label: ' 磁盘写入速率(KB/s)',
+          prop: 'diskWrite'
+        },
+        {
+          width: '110px',
+          label: '总成本消耗(元)',
+          prop: 'totalCost'
+        },
+        {
+          width: '115px',
+          label: '当月成本消耗(元)',
+          prop: 'monthCost'
+        },
+        {
+          width: '115px',
+          label: '季度成本消耗(元)',
+          prop: 'quarterCost'
+        },
+        {
+          width: '115px',
+          label: '当年成本消耗(元)',
+          prop: 'yearCost'
+        },
+        {
+          label: '所属平台',
+          prop: 'vendorName'
+        },
+        {
+          width: '115px',
+          label: '所属项目',
+          prop: 'projectName'
+        },
+        {
+          label: '所属用户',
+          prop: 'ownerName'
+        },
+        {
+          width: '160px',
+          label: '创建时间',
+          prop: 'gmtCreate'
+        },
+        {
+          width: '140px',
+          label: '运行时长',
+          prop: 'duration'
+        }
+      ],
+      searchConfigs: [
+        { label: '资源名称', value: 'name', type: 'Input' },
+        { label: 'IP', value: 'privateIps', type: 'Input' },
+        { type: 'Select', label: '所属平台', value: 'vendorId', data: [], service: { api: getCloudVendor, params: { simple: true }, attr: 'data.rows' } },
+        { type: 'Select', label: '所属项目', value: 'projectId', data: [], service: { api: getProject, params: { simple: true }, attr: 'data.rows' } },
+        { value: 'isTemplate', type: 'Const', initValue: false }
+      ]
+    }
+  },
+
+  methods: {
+    getData() {
+      getGlobalResourceMonitoringCount(this.params).then((res) => {
+        setTimeout(() => {
+          this.GeneratorBlockComponent([
+            {
+              name: '总成本消耗',
+              value: res.data?.totle ?? '--',
+              unit: '元'
+            },
+            {
+              name: '当月成本消耗',
+              value: res.data?.month ?? '--',
+              unit: '元'
+            },
+            {
+              name: '季度成本消耗',
+              value: res.data?.quarter ?? '--',
+              unit: '元'
+            },
+            {
+              name: '当年成本消耗',
+              value: res.data?.year ?? '--',
+              unit: '元'
+            }
+          ])
+        }, 500)
+      })
+      getPolicyVms(this.params).then((res) => {
+        if (res.success) {
+          this.list = res.data.rows.map((item) => {
+            if (item.privateIps) item.privateIpsList = JSON.parse(item.privateIps)
+            if (item.publicIps) item.publicIps = JSON.parse(item.publicIps)
+            if (item.vendorType === 'SANGFOR' && item.privateIps) {
+              item.privateIps = Object.values(JSON.parse(item.privateIps))
+                .map((item) => Object.keys(item)[0])
+                .toString()
+            }
+            // 当前时间 - 创建时间 = 运行时长
+            // xx 天 xx 小时
+            item.duration = item.gmtCreate ? dayjs().diff(dayjs(item.gmtCreate), 'day') + '天' + dayjs().diff(dayjs(item.gmtCreate), 'hour') + '小时' : '虚拟机不存在或已被删除'
+            return item
+          })
+          this.total = res.data.total
+        }
+      })
+    },
+
+    handllExport() {
+      downloadGlobalResourceList(this.params)
+    },
+    handllRefresh() {
+      refreshGlobalResourceMonitoring()
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import './components/Block.scss';
+</style>
diff --git a/src/views/cosa/cost/NewResourceReport.vue b/src/views/cosa/cost/NewResourceReport.vue
new file mode 100644
index 0000000..75c386f
--- /dev/null
+++ b/src/views/cosa/cost/NewResourceReport.vue
@@ -0,0 +1,103 @@
+<template>
+  <AdvanceTable title="新增资源报表" :isInitSearch="false" :searchConfigs="searchConfigs" :data="list" :params="params" :columns="columns" :get-list="getData" :total="total">
+    <template v-slot:action>
+      <TimeSelect ref="timeSelectRef" @success="getData">
+        <el-button type="primary" @click="handllExport()"> 导出 </el-button>
+      </TimeSelect>
+    </template>
+  </AdvanceTable>
+</template>
+
+<script>
+import { getNewResourceList, downloadNewResourceList } from '@/services/soa/costAnalysis'
+import Block from './components/Block.js'
+import TimeSelect from './components/TimeSelect.vue'
+export default {
+  mixins: [Block],
+  components: { TimeSelect },
+  data() {
+    return {
+      list: [],
+      total: 0,
+      params: {
+        page: 1,
+        rows: 10
+      },
+      columns: [
+        {
+          label: '月份',
+          prop: 'month'
+        },
+        {
+          label: '总增加成本(元)',
+          prop: 'totalMoney'
+        },
+        {
+          label: 'CPU增加量(核)',
+          prop: 'totalCpu'
+        },
+        {
+          label: '内存增加量(GB)',
+          prop: 'totalMemory'
+        },
+        {
+          label: '存储增加量(GB)',
+          prop: 'totalDisk'
+        },
+        {
+          label: '虚拟机增加量(台)',
+          prop: 'totalServer'
+        }
+      ],
+      searchConfigs: []
+    }
+  },
+  mounted() {
+    this.getData()
+  },
+  methods: {
+    getData() {
+      const params = this.$refs.timeSelectRef.params
+      if (params.type !== 'Years' && params.year && !params.month) return this.$message.error('请选择月份')
+      getNewResourceList({ page: this.params.page, rows: this.params.rows, time: JSON.stringify(params.time) }).then((res) => {
+        setTimeout(() => {
+          this.GeneratorBlockComponent([
+            {
+              name: '总增加成本',
+              value: res.data?.money ?? '--',
+              unit: '元'
+            },
+            {
+              name: 'CPU增加量',
+              value: res.data?.cpu ?? '--',
+              unit: '核'
+            },
+            {
+              name: '内存增加量',
+              value: res.data?.memory ?? '--',
+              unit: 'GB'
+            },
+            {
+              name: '存储增加量',
+              value: res.data?.disk ?? '--',
+              unit: 'GB'
+            }
+          ])
+        }, 500)
+        if (res.success) {
+          this.list = res.data.list
+          this.total = res.data.total
+        }
+      })
+    },
+    handllExport() {
+      const params = this.$refs.timeSelectRef.params
+      if (params.type !== 'Years' && params.year && !params.month) return this.$message.error('请选择月份')
+      downloadNewResourceList({ page: this.params.page, rows: this.params.rows, time: JSON.stringify(params.time) })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+@import './components/Block.scss';
+</style>
diff --git a/src/views/cosa/cost/components/Block.js b/src/views/cosa/cost/components/Block.js
new file mode 100644
index 0000000..1d909c9
--- /dev/null
+++ b/src/views/cosa/cost/components/Block.js
@@ -0,0 +1,68 @@
+import Vue from 'vue'
+let componentInstance,
+  MyComponent = null
+export default {
+  data() {},
+  beforeDestroy() {
+    if (componentInstance?.$destroy) {
+      componentInstance.$destroy()
+    }
+    MyComponent = null
+    componentInstance = null
+  },
+  methods: {
+    CreateComponent(countData) {
+      return Vue.extend({
+        data() {
+          return {
+            countData: countData
+          }
+        },
+        render(h) {
+          return h(
+            'el-row',
+            {
+              domProps: {
+                id: 'cus-block'
+              },
+              props: {
+                gutter: 10
+              },
+              class: ['m-b']
+            },
+            this.countData.map((item) =>
+              h(
+                'el-col',
+                {
+                  props: {
+                    span: 6
+                  }
+                },
+                [h('div', { class: ['text-center', 'item'] }, [h('div', item.name), h('div', item.value + item.unit)])]
+              )
+            )
+          )
+        }
+      })
+    },
+    GeneratorBlockComponent(countData) {
+      if (!componentInstance) {
+        MyComponent = this.CreateComponent(countData)
+        // 现在，我们创建一个实例
+        componentInstance = new MyComponent()
+        // 挂载实例到文档之外的元素上
+        componentInstance.$mount()
+      } else {
+        componentInstance.countData = countData
+      }
+      this.insertComponent()
+    },
+    insertComponent() {
+      // 找到需要插入新组件的DOM元素
+      const referenceElement = document.getElementsByClassName('table-tools')[0]
+      if (!referenceElement) return
+      // 把Vue组件的DOM插入到找到的DOM元素之后
+      referenceElement.parentNode.insertBefore(componentInstance.$el, referenceElement.nextSibling)
+    }
+  }
+}
diff --git a/src/views/cosa/cost/components/Block.scss b/src/views/cosa/cost/components/Block.scss
new file mode 100644
index 0000000..917d6b2
--- /dev/null
+++ b/src/views/cosa/cost/components/Block.scss
@@ -0,0 +1,9 @@
+::v-deep #cus-block {
+  .item {
+    color: #fff;
+    background-color: #5a94ff;
+    font-size: 20px;
+    font-weight: 700;
+    padding: 10px 0;
+  }
+}
diff --git a/src/views/cosa/cost/components/TimeSelect.vue b/src/views/cosa/cost/components/TimeSelect.vue
new file mode 100644
index 0000000..c0ed6c2
--- /dev/null
+++ b/src/views/cosa/cost/components/TimeSelect.vue
@@ -0,0 +1,138 @@
+<template>
+  <el-form inline :model="params">
+    <el-form-item>
+      <slot></slot>
+    </el-form-item>
+    <el-form-item>
+      <el-radio-group v-model="params.type" @change="typeChange">
+        <el-radio-button v-for="item in timeList" :key="item.value" :label="item.value">{{ item.label }}</el-radio-button>
+      </el-radio-group>
+    </el-form-item>
+    <el-form-item>
+      <el-select v-model="params.year" placeholder="请选择年份" @change="yearChange">
+        <el-option v-for="item in yearList" :key="item" :label="item" :value="item"> </el-option>
+      </el-select>
+    </el-form-item>
+    <el-form-item>
+      <el-select v-model="params.month" placeholder="请选择" :disabled="!params.year" @change="monthChange" v-show="params.type !== 'Years'">
+        <el-option v-for="item in monthList" :key="item.value" :label="item.label" :value="item.value"> </el-option>
+      </el-select>
+    </el-form-item>
+  </el-form>
+</template>
+
+<script>
+import dayjs from 'utils/day'
+const currentYear = dayjs().year() // 获取当前年份
+const lastFiveYears = []
+for (let i = 0; i < 5; i++) {
+  lastFiveYears.push(currentYear - i)
+}
+export default {
+  data() {
+    return {
+      params: {
+        type: 'Months',
+        year: '',
+        month: '',
+        time: {
+          startTime: '',
+          endTime: ''
+        }
+      },
+      timeList: [
+        { label: '月', value: 'Months' },
+        { label: '季度', value: 'QuarterYears' },
+        { label: '半年度', value: 'HalfYears' },
+        { label: '年度', value: 'Years' }
+      ],
+      yearList: lastFiveYears,
+      monthList: [],
+      interval: 1
+    }
+  },
+
+  methods: {
+    typeChange() {
+      this.params.month = ''
+      this.params.year = ''
+      this.params.time = {
+        startTime: '',
+        endTime: ''
+      }
+      if (this.params.type === 'Months') this.$emit('success')
+    },
+    monthChange() {
+      this.formatterTime()
+    },
+    yearChange() {
+      this.params.month = ''
+      this.generaterOptions()
+      if (this.params.type === 'Years') {
+        this.formatterTime()
+      }
+    },
+    generaterOptions() {
+      switch (this.params.type) {
+        case 'Months':
+          this.interval = 1
+          // 根据当前年份生成月份列表
+          this.monthList = Array.from({ length: 12 }, (v, k) => {
+            const month = k + 1
+            return {
+              label: `${month}月`,
+              value: month < 10 ? `0${month}` : `${month}`
+            }
+          })
+          break
+        case 'QuarterYears':
+          this.interval = 3
+          this.monthList = [
+            { label: '一季度', value: '01' },
+            { label: '二季度', value: '04' },
+            { label: '三季度', value: '07' },
+            { label: '四季度', value: '10' }
+          ]
+          break
+        case 'HalfYears':
+          this.interval = 6
+          this.monthList = [
+            { label: '1-6月', value: '01' },
+            { label: '7-12月', value: '07' }
+          ]
+          break
+        case 'Years':
+          this.interval = 12
+          break
+        default:
+          break
+      }
+    },
+    formatterTime() {
+      if (!this.params.month) this.params.month = '01'
+      let nextMonth = parseInt(this.params.month) + this.interval - 1
+      const currentYear = this.params.year
+      const startTime = `${currentYear}-${this.params.month}-01 00:00:00`
+      if (nextMonth < 10) {
+        nextMonth = '0' + nextMonth
+      } else if (nextMonth > 12) {
+        // 取年末
+        nextMonth = '12'
+      }
+      // 取月份的最后一天
+      const lastDay = dayjs(`${currentYear}-${nextMonth}-01`).endOf('month').format('DD')
+      this.params.time = {
+        startTime,
+        endTime: `${currentYear}-${nextMonth}-${lastDay} 23:59:59`
+      }
+      this.$emit('success')
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.el-form-item--mini.el-form-item,
+.el-form-item--small.el-form-item {
+  margin-bottom: 0px;
+}
+</style>
diff --git a/src/views/personal/apply/components/AddDiskCT.vue b/src/views/personal/apply/components/AddDiskCT.vue
new file mode 100644
index 0000000..f366223
--- /dev/null
+++ b/src/views/personal/apply/components/AddDiskCT.vue
@@ -0,0 +1,201 @@
+<template>
+  <div>
+    <basic-form label-width="0px" ref="data" :disabled="disabled">
+      <PreviewItem :item-data="itemData"></PreviewItem>
+      <basic-form-item>
+        <el-row>
+          <el-col :span="24" v-for="(cell, index) in disks" :key="index" class="m-t">
+            <el-col :span="2" v-if="!disabled">
+              <el-button :disabled="disks.length == 1" class="m-l-sm" type="danger" icon="el-icon-delete" @click="removeItem(index)"></el-button>
+            </el-col>
+            <el-col :span="18"> <el-input-number :min="1" v-model="cell.disk" class="w m-r"> </el-input-number> GB </el-col>
+          </el-col>
+          <!-- <basic-form-item label="名称：" prop="name" validate="required">
+            <el-input v-model="cell.name"></el-input>
+          </basic-form-item>
+          <basic-form-item label="容量：" prop="size" validate="required">
+            <el-input v-model="cell.size"></el-input>
+          </basic-form-item>
+          <basic-form-item label="总线：" prop="bus" validate="required">
+            <el-select filterable v-model="cell.bus" clearable>
+              <el-option v-for="(item, index) in busData" :key="index" :label="item.name" :value="item.value"></el-option>
+            </el-select>
+          </basic-form-item>
+          <basic-form-item label="存储策略：" prop="volumeTemplateId" validate="required">
+            <el-select filterable v-model="cell.volumeTemplateId" clearable>
+              <el-option v-for="(item, index) in templateData" :key="index" :label="item.name" :value="item.id"></el-option>
+            </el-select>
+          </basic-form-item> -->
+          <el-col v-if="!disabled" :span="4" class="add-border m-t-md" @click.native="addItem()">
+            <i class="el-icon-plus"></i>
+          </el-col>
+        </el-row>
+      </basic-form-item>
+    </basic-form>
+  </div>
+</template>
+
+<script>
+import { getCategoriesByCode } from 'services/services/product'
+import { getDictChildren } from 'services/platform/index'
+import PreviewItem from './PreviewItem.vue'
+import { getVolumeTpl } from 'services/platform/smart'
+export default {
+  components: { PreviewItem },
+  props: {
+    itemData: {
+      type: Object
+    },
+    disabled: {
+      type: Boolean
+    }
+  },
+  data() {
+    return {
+      loading: false,
+      categoryList: [],
+      disks: [],
+      templateData: [],
+      busData: [
+        { name: 'VIRTIO', value: 'VIRTIO' },
+        { name: 'SCSI', value: 'SCSI' },
+        { name: 'IDE', value: 'IDE' }
+      ]
+    }
+  },
+  computed: {
+    categoryMap() {
+      const map = {}
+      this.categoryList.forEach(item => {
+        map[item.id] = item
+      })
+      return map
+    }
+  },
+  created() {
+    this.getTemplateData()
+    this.getCategoryList()
+    if (this.itemData.upgrade) {
+      this.itemData.addDataDisks.forEach((item, index) => {
+        this.disks.push({
+          ...item,
+          ...this.itemData.upgrade[index]
+        })
+      })
+    }
+  },
+  methods: {
+    getTemplateData() {
+      getVolumeTpl({
+        simple: true,
+        params: this.$tools.handleSearchParam({
+          vendorId: this.itemData.vendorId
+        })
+      }).then(data => {
+        if (data.success) {
+          this.templateData = data.data.rows
+        }
+      })
+    },
+    // 获取服务类型
+    getCategoryList() {
+      getCategoriesByCode('cloudtower.standard.volume').then(data => {
+        if (data.success) {
+          if (!data.data.length) return this.$message.error('该服务不存在产品类型请检查')
+          this.categoryList = data.data
+          if (!this.itemData.upgrade) this.addItem()
+        }
+      })
+    },
+    removeItem(index) {
+      this.disks.splice(index, 1)
+    },
+    addItem() {
+      const [{ id: categoryId }] = this.categoryList
+      const result = {
+        serviceCode: 'cloudtower.standard.volume',
+        categoryId,
+        disk: 1
+      }
+      this.disks.push(result)
+    },
+    ok() {
+      const { service, instance, instanceName, expiredTime, params, preview } = this.itemData
+      const obj = {
+        preview,
+        params,
+        service,
+        instance,
+        instanceName,
+        operation: 'AddDisk',
+        upgrade: [],
+        expiredTime,
+        addDataDisks: []
+      }
+
+      this.disks.forEach(item => {
+        const { categoryId, serviceCode, disk } = item
+        const category = this.categoryMap[categoryId]?.remark
+        obj.upgrade.push({
+          serviceCode,
+          categoryId,
+          category,
+          specs: [
+            {
+              disk
+            }
+          ]
+        })
+        obj.addDataDisks.push({
+          category,
+          disk,
+          type: 'newDisk',
+          bus: this.busData[0].value,
+          volumeTemplateId: this.templateData[0].id, // 存储策略
+          volumeTemplateName: this.templateData[0].name
+        })
+      })
+      return obj
+    },
+    getApplyData() {
+      const obj = {
+        ...this.itemData,
+        upgrade: [],
+        addDataDisks: []
+      }
+      this.disks.forEach(item => {
+        const { categoryId, serviceCode, disk } = item
+        const category = this.categoryMap[categoryId]?.remark
+        obj.upgrade.push({
+          serviceCode,
+          categoryId,
+          category,
+          specs: [
+            {
+              disk
+            }
+          ]
+        })
+        obj.addDataDisks.push({
+          category,
+          disk,
+          type: 'newDisk',
+          bus: this.busData[0].value,
+          volumeTemplateId: this.templateData[0].id, // 存储策略
+          volumeTemplateName: this.templateData[0].name
+        })
+      })
+      return obj
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.add-border {
+  padding: 2px;
+  cursor: pointer;
+  border: 1px dashed black;
+  text-align: center;
+}
+</style>
diff --git a/src/views/personal/apply/components/attributeItem.vue b/src/views/personal/apply/components/attributeItem.vue
index d880be3..fdb03f4 100644
--- a/src/views/personal/apply/components/attributeItem.vue
+++ b/src/views/personal/apply/components/attributeItem.vue
@@ -32,8 +32,8 @@ import UpgradePublicSpec from './UpgradePublicSpec.vue'
 import { defineComponent, ref } from '@vue/composition-api'
 import { componentMap } from './config'
 
-function getApplicationComponent(service: string) {
-  if (service.includes('server')) {
+function getApplicationComponent(service: string = '', workOrderTypeCode: string) {
+  if (service.includes('server') || workOrderTypeCode === 'CloudServerApplication') {
     return 'VmNode'
   }
   if (service.includes('volume')) {
@@ -96,7 +96,10 @@ export default defineComponent({
     function getAlterationComponent() {
       let { operation, preview, service } = itemData.value
       if (operation == 'AddDisk') {
-        return 'AddDisk'
+        if (operation === 'AddDisk') {
+          if (service === 'cloudtower.standard.server') return 'AddDiskCT'
+          return 'AddDisk'
+        }
       }
       if (operation == 'EditDisk') return 'EditDisk'
       if (operation == 'Upgrade' && (service == 'tencent.standard.server' || service == 'aliyun.standard.server' || service == 'aws.standard.server' || service == 'huawei.standard.server')) return 'UpgradePublicSpec'
@@ -109,10 +112,11 @@ export default defineComponent({
     }
     // 当前节点
     const currentComponent = ref('')
-    const { service } = itemData.value
+    const { service, workOrderTypeCode } = itemData.value
     switch (ApplyCategory) {
       case 'ApplicationOperate':
-        currentComponent.value = getApplicationComponent(service)
+      case 'EFCApplicationOperate':
+        currentComponent.value = getApplicationComponent(service, workOrderTypeCode)
         break
       case 'UnsubscribeOperate':
         currentComponent.value = 'PreviewItem'
diff --git a/src/views/resource-apply/components/CommonWrapper.vue b/src/views/resource-apply/components/CommonWrapper.vue
index 966ec71..b7c0a79 100644
--- a/src/views/resource-apply/components/CommonWrapper.vue
+++ b/src/views/resource-apply/components/CommonWrapper.vue
@@ -206,7 +206,7 @@ export default {
       data.forEach((item) => {
         // 忽略此elements
         if (item.ignore) return
-        const { serviceCode, skuId, insAmount, elements, categoryId, categoryMap = {} } = item
+        const { serviceCode, skuId, insAmount, elements, categoryId, categoryMap = {}, skuList } = item
         // 如果存在子节点对子节点进行处理
         if (elements) {
           const returnData = this.getSkuParams(
@@ -233,6 +233,7 @@ export default {
               specs = [{ disk: insAmount }]
               break
             case 'smartx.standard.volume':
+            case 'cloudtower.standard.volume':
               if (item.name == '系统盘') {
                 specs = [{ disk: insAmount }]
                 result.props = {
@@ -247,7 +248,7 @@ export default {
             default:
               specs = this.getSpec(item)
           }
-          if (item.name == '系统盘' && item.serviceCode == 'smartx.standard.volume') {
+          if (item.name == '系统盘' && item.serviceCode == 'cloudtower.standard.volume') {
             const arr = item.skuList.map((sku) => {
               return Number(sku.spec[0].specValue)
             })
@@ -257,6 +258,17 @@ export default {
           }
           result.specs = specs
         }
+        if (item.serviceCode === 'sangfor.standard.volume' && item.name === '系统盘') {
+          this.addData.configs.disks.forEach((diskItem, index) => {
+            const {
+              id,
+              spec: [{ specValue }]
+            } = skuList.find((sku) => sku.id === diskItem.size_mb)
+            this.$nextTick(() => {
+              diskItem.size_mb = specValue * 1024
+            })
+          })
+        }
         params.push(result)
       })
       return params
diff --git a/src/views/resource-apply/components/RegionItem.vue b/src/views/resource-apply/components/RegionItem.vue
index cded090..24b81dd 100644
--- a/src/views/resource-apply/components/RegionItem.vue
+++ b/src/views/resource-apply/components/RegionItem.vue
@@ -177,10 +177,13 @@ export default {
       }).then((data) => {
         if (data.success) {
           this.cacheAz = this.addData.location.az
-          const { vendorId, id, networkRelations } = data.data
+          const { vendorId, id, networkRelations, azUuid, groupId } = data.data
           this.addData.location.vendorId = vendorId
           this.addData.location.poolGroupId = id
-          if (this.addData.location.vendorType == 'VMWARE' || this.addData.location.vendorType == 'SMARTX' || this.addData.location.vendorType == 'FUSIONSPHERE') this.addData.networkRelations = networkRelations
+          this.addData.location.azUuid = azUuid
+          this.addData.location.groupUuid = groupId
+          if (['VMWARE', 'SANGFOR', 'CLOUDTOWER', 'CNWARE'].includes(this.addData.location.vendorType)) this.addData.networkRelations = networkRelations
+
           // if (hasNsx) this.$set(this.addData.location, 'hasNsx', hasNsx)
           this.$emit('changeVendorId', vendorId, az)
         } else {
diff --git a/src/views/resource-apply/data/EFCInit.js b/src/views/resource-apply/data/EFCInit.js
new file mode 100644
index 0000000..6c517ea
--- /dev/null
+++ b/src/views/resource-apply/data/EFCInit.js
@@ -0,0 +1,151 @@
+import { cloneDeep } from 'lodash-es'
+import { nanoid } from 'nanoid'
+export const GEN_UUID = () => nanoid(8)
+const defaultCpu = 1
+const defaultMemory = 1
+const defaultSysDisk = 50
+
+export const subApplicationParam = {
+  taskGroupUuid: GEN_UUID(),
+  taskTargetUuid: GEN_UUID(),
+  networkRelations: [],
+  imageData: {},
+  osList: [],
+  versionList: [],
+  subLocation: {
+    region: '',
+    az: '',
+    vendorId: '',
+    poolGroupId: '',
+    vendorType: '',
+    purpose: '',
+    remark: '',
+    resourceLabel: []
+  },
+  emption: {
+    duration: {
+      mode: 'Hour',
+      amount: 1
+    },
+    count: 1
+  },
+  configs: {
+    // 云主机信息相关
+    name: '',
+    nameRuleId: '',
+    vmHostName: '',
+    password: '',
+    confirm_password: '',
+
+    // 镜像相关
+    osCategory: '',
+    osVersion: '',
+    imageId: '',
+    templateDisk: '', // 前端用
+
+    // 规格相关
+    categoryId: '',
+    cpu: defaultCpu,
+    memory: defaultMemory,
+
+    // 系统盘
+    sysDisk: {
+      categoryId: '',
+      disk: defaultSysDisk
+    },
+    // 数据盘
+    addDiskList: [],
+
+    // 网卡相关
+    networkCardConfigs: [
+      {
+        networkCardId: '',
+        ipPolicy: 'Manual',
+        ipPoolId: '',
+        ipPoolName: '',
+        portGroupId: '',
+        address: [],
+        mask: '',
+        gateway: '',
+        dns: ''
+      }
+    ]
+  },
+  elements: [
+    {
+      isLoadData: true,
+      serviceCode: '',
+      categoryId: '',
+      category: '',
+      specs: [
+        {
+          cpu: defaultCpu
+        },
+        {
+          memory: defaultMemory
+        }
+      ],
+      serviceItem: {}
+    },
+    {
+      isLoadData: true,
+      serviceCode: '',
+      categoryId: '',
+      category: '',
+      specs: [
+        {
+          disk: defaultSysDisk
+        }
+      ],
+      serviceItem: {}
+    }
+  ],
+  service: ''
+}
+export const addNew = {
+  workOrderTypeCode: 'CloudServerApplication', // 工单类型编号
+  location: {
+    name: '',
+    businessId: '',
+    businessName: '',
+    projectId: '',
+    projectName: '',
+    creatorId: '',
+    creatorName: '',
+    menderId: '',
+    menderName: '',
+    ownerId: '',
+    ownerName: '',
+    tenantId: '',
+    remark: ''
+  },
+  subApplicationParams: [cloneDeep(subApplicationParam)],
+  tasks: []
+}
+export const defaultTask = {
+  sceneId: '',
+  templateId: '',
+  taskGroupUuid: '',
+  taskName: '',
+  taskCode: 'standard'
+}
+export const ServiceCodeMap = {
+  server: {
+    VMWARE: 'vmware.standard.server',
+    CNWARE: 'cnware.standard.server',
+    ZSTACK: 'zstack.standard.server',
+    CLOUDTOWER: 'cloudtower.standard.server',
+    SANGFOR: 'sangfor.standard.server',
+    CECSTACK: 'cecstack.standard.server',
+    INSPURRAIL: 'inspurrail.standard.server'
+  },
+  disk: {
+    VMWARE: 'vmware.storage.disk',
+    CNWARE: 'cnware.standard.volume',
+    ZSTACK: 'zstack.storage.disk',
+    CLOUDTOWER: 'cloudtower.standard.volume',
+    SANGFOR: 'sangfor.storage.disk',
+    CECSTACK: 'cecstack.standard.volume',
+    INSPURRAIL: 'inspurrail.standard.volume'
+  }
+}
diff --git a/src/views/resource-apply/disk/cloudTower.vue b/src/views/resource-apply/disk/cloudTower.vue
new file mode 100644
index 0000000..cf967ed
--- /dev/null
+++ b/src/views/resource-apply/disk/cloudTower.vue
@@ -0,0 +1,292 @@
+/** * Created by HaijunZhang on 2019/4/28. */
+<template>
+  <common-wrapper :add-data="addData" @vendorId="getList" ref="common" vendorType="OPENSTACK" :elements="elements" :loading="loading" :get-params="getParams" :item-data="retention" :disabled="disabled" v-bind="$attrs">
+    <div class="item-block">
+      <h5>配置信息</h5>
+      <basic-form-item label="硬盘类型：">
+        <el-radio-group v-model="currentElement.categoryId" @change="getSku(currentElement)">
+          <el-radio-button :label="item.id" v-for="(item, index) in currentElement.categoryList" :key="index">{{ item.name }}</el-radio-button>
+        </el-radio-group>
+      </basic-form-item>
+      <basic-form-item label="配置：" validate="required" v-if="addData.configs.disktype == '空白卷'">
+        <sku-table :skus="currentElement.skuList" style="max-width: 600px" :mode="addData.emption.duration.mode" :show-price="true" :column-props="[{ label: '磁盘（GB）', value: 'disk' }]">
+          <el-table-column show-overflow-tooltip label="规格名称" prop="name">
+            <template v-slot="scope">
+              <el-radio v-model="currentElement.skuId" :label="scope.row.id">{{ scope.row.code }}</el-radio>
+            </template>
+          </el-table-column>
+        </sku-table>
+      </basic-form-item>
+      <basic-form :model="addData.configs" ref="addForm" label-position="left">
+        <el-row :gutter="20">
+          <el-col :span="10">
+            <basic-form-item label="名称：" validate="required" prop="name">
+              <el-input v-model="addData.configs.name" placeholder="请输入名称" class="basic-cmp"></el-input>
+            </basic-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="20">
+          <el-col :span="24">
+            <basic-form-item label="卷来源：" required>
+              <el-radio-group v-model="addData.configs.disktype" size="small" @change="chooseOrginWay">
+                <el-radio :label="item.name" border v-for="(item, index) in typeList" :key="index">{{ item.name }}</el-radio>
+              </el-radio-group>
+            </basic-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="20" v-if="addData.configs.disktype == '镜像'" key="1">
+          <el-col :span="10">
+            <basic-form-item label="系统镜像：" prop="sourceImgId" validate="required">
+              <el-select filterable v-model="addData.configs.sourceImgId">
+                <el-option v-for="(item, index) in imageList" :key="index" :label="item.name + '(最小磁盘：' + item.minDisk + 'GB)'" :value="item.id"></el-option>
+              </el-select>
+            </basic-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="20" v-else-if="addData.configs.disktype == '卷'" key="2">
+          <el-col :span="10">
+            <basic-form-item label="选择卷：" prop="sourceValidId" validate="required">
+              <el-select filterable v-model="addData.configs.sourceValidId" @change="changeVolumeSize">
+                <el-option v-for="(item, index) in volumeList" :key="index" :label="`${item.name}(${item.size}GB)`" :value="item.id"></el-option>
+              </el-select>
+            </basic-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="20" v-else-if="addData.configs.disktype == '快照'" key="3">
+          <el-col :span="10">
+            <basic-form-item label="选择快照：" prop="sourceSnapId" validate="required">
+              <el-select filterable v-model="addData.configs.sourceSnapId" @change="changeSnapshotSize">
+                <el-option v-for="(item, index) in snapshotList" :key="index" :label="`${item.name}(${item.volume.size}GB)`" :value="item.id"></el-option>
+              </el-select>
+            </basic-form-item>
+          </el-col>
+        </el-row>
+        <el-row v-else></el-row>
+        <el-row :gutter="20">
+          <el-col :span="10">
+            <basic-form-item label="描述：" prop="remark">
+              <el-input type="textarea" v-model="addData.configs.remark" placeholder="请输入描述"></el-input>
+            </basic-form-item>
+          </el-col>
+        </el-row>
+      </basic-form>
+    </div>
+    <div slot="preview-card">
+      <basic-form-item label="磁盘容量：">{{ addData.configs.size }}GB</basic-form-item>
+    </div>
+  </common-wrapper>
+</template>
+
+<script>
+import CommonWrapper from 'views/resource-apply/components/CommonWrapper.vue'
+import sku from './../mixins/sku'
+import create from '../mixins/create'
+import { add, element } from './../data/init'
+import { getSnapshot, getVolume, conditionImage } from 'services/platform/index'
+import { cloneDeep } from 'lodash-es'
+import { getSpecValue } from 'views/resource-apply/utils/index'
+import { getShoppingCartDetail } from 'services/system/shop_cart'
+
+export default {
+  components: { CommonWrapper },
+  mixins: [sku, create],
+  props: {
+    type: {
+      type: String
+    },
+    itemData: {
+      type: [Object, Boolean]
+    },
+    disabled: {
+      type: Boolean
+    }
+  },
+  created() {
+    if (this.itemData) {
+      this.retention = this.itemData
+      this.addData = cloneDeep(this.retention)
+      this.handleShowData()
+    } else if (this.$route.query.id) {
+      getShoppingCartDetail(this.$route.query.id).then((data) => {
+        if (data.success) {
+          this.retention = JSON.parse(data.data.inventory)
+          this.addData = cloneDeep(this.retention)
+          this.handleShowData()
+        }
+      })
+    }
+  },
+  data() {
+    return {
+      elements: [
+        {
+          ...element,
+          name: '云硬盘',
+          serviceCode: 'cloudtower.standard.volume',
+          main: true
+        }
+      ],
+      addData: {
+        ...cloneDeep(add),
+        location: {
+          ...add.location,
+          vendorType: this.type,
+          diskCategory: ''
+        },
+        service: 'cloudtower.standard.volume',
+        configs: {
+          resourceLabel: [],
+          diskCategoryId: 0,
+          sourceImgId: '',
+          sourceValidId: '',
+          sourceSnapId: '',
+          size: 10,
+          disktype: '空白卷'
+        }
+      },
+      typeList: [{ name: '空白卷' }, { name: '卷' }, { name: '快照' }],
+      snapshotList: [],
+      volumeList: [],
+      imageList: [],
+      retention: false,
+      skuList: [],
+      flag: true
+    }
+  },
+  computed: {
+    currentElement() {
+      return this.elements[0]
+    }
+  },
+  methods: {
+    handleShowData() {
+      const { elements } = this.retention
+      const [first, ...others] = elements
+      this.elements = [
+        {
+          ...element,
+          ...first,
+          insAmount: this.addData.configs.size
+        }
+      ]
+      this.initLoad()
+    },
+    getPostData() {
+      let data = false
+      data = this.$refs.common.handlePostData()
+      return data
+    },
+    getParams() {
+      let data = false
+      this.$refs.addForm.validate((valid) => {
+        if (valid) {
+          const { disktype } = this.addData.configs
+          this.addData.configs.size = getSpecValue(this.currentElement).disk
+          let size = 0
+          if (disktype == '卷') size = this.volumeList.find((item) => item.id == this.addData.configs.sourceValidId).size
+          if (disktype == '快照') size = this.snapshotList.find((item) => item.id == this.addData.configs.sourceSnapId).volume.size
+          if (disktype !== '空白卷') {
+            this.addData.configs.size = size
+          }
+          if (disktype == '空白卷' && this.addData.configs.size < size) {
+            this.$message.error('所选规格不可小于所选卷或快照的规格')
+            data = false
+          } else {
+            data = true
+          }
+        }
+      })
+      return data
+    },
+    getList() {
+      this.getSnapshotData()
+      this.getVolumeData()
+      // this.getImageData()
+    },
+    changeVolumeSize(val) {
+      const data = this.volumeList.find((item) => item.id == val)
+      this.currentElement.skuList[0].spec = [{ specName: 'disk', specValue: data?.size, unit: 'GB' }]
+      this.currentElement.skuId = this.addData.serviceItem.id
+    },
+    changeSnapshotSize(val) {
+      const data = this.snapshotList.find((item) => item.id == val)
+      this.currentElement.skuList[0].spec = [{ specName: 'disk', specValue: data?.volume?.size, unit: 'GB' }]
+      this.currentElement.skuId = this.addData.serviceItem.id
+    },
+    chooseOrginWay(item) {
+      let list = []
+      if (this.flag) {
+        this.skuList = this.currentElement.skuList
+        this.flag = false
+      }
+      if (this.addData.configs.disktype == '镜像') {
+        delete this.addData.configs.sourceValidId
+        delete this.addData.configs.sourceSnapId
+        this.currentElement.skuId = null
+      } else if (this.addData.configs.disktype == '卷') {
+        delete this.addData.configs.sourceImgId
+        delete this.addData.configs.sourceSnapId
+        this.currentElement.skuId = null
+        list = []
+        list.push(this.addData.serviceItem)
+        this.currentElement.skuList = list
+      } else if (this.addData.configs.disktype == '空白卷') {
+        delete this.addData.configs.sourceValidId
+        delete this.addData.configs.sourceImgId
+        delete this.addData.configs.sourceSnapId
+        this.currentElement.skuList = this.skuList
+      } else {
+        delete this.addData.configs.sourceImgId
+        delete this.addData.configs.sourceValidId
+        this.currentElement.skuId = null
+        list = []
+        list.push(this.addData.serviceItem)
+        this.currentElement.skuList = list
+      }
+    },
+    // 请求快照
+    getSnapshotData() {
+      const params = {
+        page: 1,
+        rows: 10000
+      }
+      const searchParam = [{ param: { vendorId: this.addData.location.vendorId, status: 'AVAILABLE', snapshotType: 'VOLUME' }, sign: 'EQ' }]
+      params.params = JSON.stringify(searchParam)
+      getSnapshot(params).then((data) => {
+        if (data.success) {
+          this.snapshotList = data.data.rows
+        }
+      })
+    },
+    // 请求云硬盘
+    getVolumeData() {
+      const params = {
+        page: 1,
+        rows: 9999
+      }
+      const searchParam = [{ param: { vendorId: this.addData.location.vendorId, status: 'AVAILABLE', tenantUuid: this.addData.tenantUuid }, sign: 'EQ' }]
+      params.params = JSON.stringify(searchParam)
+      getVolume(params).then((data) => {
+        if (data.success) {
+          this.volumeList = data.data.rows
+        }
+      })
+    },
+    // 请求镜像
+    getImageData() {
+      conditionImage({
+        condition: 'listPublicImage',
+        vendorId: this.addData.location.vendorId
+      }).then((data) => {
+        if (data.success) {
+          this.imageList = data.data
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+@import '../index.scss';
+</style>
diff --git a/src/views/resource-apply/disk/index.vue b/src/views/resource-apply/disk/index.vue
index 41bdd61..2d2f1f9 100644
--- a/src/views/resource-apply/disk/index.vue
+++ b/src/views/resource-apply/disk/index.vue
@@ -11,6 +11,7 @@
     <azure :type="type" v-if="type == 'AZURE'" @type="setType" :item-data="itemData" :disabled="disabled" ref="node"></azure>
     <smart :type="type" v-if="type == 'SMARTX'" @type="setType" :item-data="itemData" :disabled="disabled" ref="node"></smart>
     <fusion-sphere :type="type" v-if="type == 'FUSIONSPHERE'" @type="setType" :item-data="itemData" :disabled="disabled" ref="node"></fusion-sphere>
+    <cloudTower :type="type" v-if="type == 'CLOUDTOWER'" @type="setType" :item-data="itemData" :disabled="disabled" ref="node"></cloudTower>
   </div>
 </template>
 
@@ -25,6 +26,8 @@ import aws from './aws.vue'
 import azure from './azure.vue'
 import smart from './smart.vue'
 import fusionSphere from './fusionSphere.vue'
+import cloudTower from './cloudTower.vue'
+
 export default {
   props: {
     itemData: {
@@ -34,7 +37,7 @@ export default {
       type: Boolean
     }
   },
-  components: { ali, op, huawei, tencent, aws, tce, azure, smart, fusionSphere, easyStack },
+  components: { ali, op, huawei, tencent, aws, tce, azure, smart, fusionSphere, easyStack, cloudTower },
   data() {
     return {
       type: ''
diff --git a/src/views/resource-apply/ecs/EFCDataDisk.vue b/src/views/resource-apply/ecs/EFCDataDisk.vue
new file mode 100644
index 0000000..bf6dbee
--- /dev/null
+++ b/src/views/resource-apply/ecs/EFCDataDisk.vue
@@ -0,0 +1,55 @@
+<template>
+  <el-dialog title="磁盘配置" :visible.sync="dialog.visible" width="600px" append-to-body>
+    <basic-form :model="configs" label-suffix="：" label-width="140px">
+      <basic-form-item label="系统盘（GB）"> <el-input-number v-model="configs.sysDisk.disk" :min="configs.templateDisk" :max="1024"> </el-input-number> </basic-form-item>
+      <basic-form-item label="数据盘（GB）">
+        <div v-for="(item, index) in configs.addDiskList" :key="index" class="m-b">
+          <el-input-number v-model="item.disk" :min="item.templateDisk || 10" :max="65536" class="m-r"> </el-input-number>
+          <span class="tip" v-if="!!item.templateDisk">浪潮云模板磁盘，最小{{ item.templateDisk }}GB，不可删除</span>
+          <el-button v-else type="text" @click="handleSub(index)">删除</el-button>
+        </div>
+        <el-button type="text" @click="handleAdd">增加</el-button>
+      </basic-form-item>
+    </basic-form>
+    <div slot="footer" class="dialog-footer">
+      <el-button @click.native="dialog.visible = false">取消</el-button>
+      <el-button type="primary" @click.native="handleSubmit">确定</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+export default {
+  name: 'EFCDataDisk',
+  props: {
+    dialog: {
+      type: Object,
+      default: () => ({
+        visible: false,
+        index: '',
+        row: {}
+      })
+    }
+  },
+  computed: {
+    configs() {
+      return this.dialog.row.configs
+    }
+  },
+  data() {
+    return {}
+  },
+  methods: {
+    handleAdd() {
+      this.configs.addDiskList.push({ disk: 50 })
+    },
+    handleSub(index) {
+      this.configs.addDiskList.splice(index, 1)
+    },
+    handleSubmit() {
+      this.$emit('success', this.dialog.index)
+      this.dialog.visible = false
+    }
+  }
+}
+</script>
diff --git a/src/views/resource-apply/ecs/EFCIppool.vue b/src/views/resource-apply/ecs/EFCIppool.vue
new file mode 100644
index 0000000..e9acc0b
--- /dev/null
+++ b/src/views/resource-apply/ecs/EFCIppool.vue
@@ -0,0 +1,329 @@
+<template>
+  <el-dialog title="网络配置" :visible.sync="dialog.visible" width="800px" append-to-body>
+    <basic-form :model="configs" ref="addData">
+      <div :span="24" v-for="(cell, index) in configs.networkCardConfigs" :key="index" class="m-b">
+        <basic-form-item label="IP池：" validate="required" :prop="`networkCardConfigs.${index}.ipPoolId`">
+          <el-select class="w" v-model="cell.ipPoolId" @change="getIp(cell)" placeholder="请选择 IP 池">
+            <el-option :label="item.ipPoolName" :value="item.ipPoolId" v-for="(item, index) in ippools" :key="index"></el-option>
+          </el-select>
+          <el-radio-group class="m-l-md" v-model="cell.ipPolicy" size="small" @change="getIp(cell)">
+            <el-radio-button label="Auto">自动</el-radio-button>
+            <el-radio-button label="Manual">手动</el-radio-button>
+          </el-radio-group>
+          <template v-if="cell.ipPolicy && cell.ipPolicy === 'Manual'">
+            <el-select v-loading="cell.loading" placeholder="请输入IP进行搜索" filterable class="m-l-md w" v-model="cell.address" size="small" multiple @visible-change="(flag) => conditionIp(flag, cell)" :filter-method="(query) => ipFilter(query, cell)" @change="selectIpChange(cell)">
+              <el-option v-for="item in cell.showIps" :key="item" :label="item" :value="item" :disabled="calcAddress(cell, item)"></el-option>
+            </el-select>
+          </template>
+          <el-button type="text" class="m-l-md" @click="addCard">新增</el-button>
+          <el-button type="text" class="m-l-md" v-if="configs.networkCardConfigs.length > 1" @click="configs.networkCardConfigs.splice(index, 1)">删除</el-button>
+        </basic-form-item>
+        <div v-if="subLocation.vendorType === 'CECSTACK'" class="m-t">
+          <basic-form-item label="所属网络：" validate="required" :prop="`networkCardConfigs.${index}.subnetUuid`">
+            <el-select class="w m-r" v-model="cell.vpcUuid" @change="changeVPC(cell)" placeholder="请选择VPC">
+              <el-option v-for="item in cell.vpcList" :label="`${item.name}(${item.vpcId})`" :value="item.vpcId" :key="item.vpcId"></el-option>
+            </el-select>
+            <el-select class="w" v-model="cell.subnetUuid" placeholder="请选择子网">
+              <el-option v-for="item in cell.subnetList" :label="`${item.name}(${item.value})`" :value="item.value" :key="item.value"></el-option>
+            </el-select>
+          </basic-form-item>
+          <basic-form-item label="安全组：" validate="required" :prop="`networkCardConfigs.${index}.groups`">
+            <el-select class="w" v-model="cell.groups" multiple placeholder="请选择安全组">
+              <el-option v-for="item in cell.groupList" :label="`${item.name}(${item.groupUuid})`" :value="item.groupUuid" :key="item.groupUuid"></el-option>
+            </el-select>
+          </basic-form-item>
+        </div>
+      </div>
+    </basic-form>
+    <div slot="footer" class="dialog-footer">
+      <el-button @click.native="dialog.visible = false">取消</el-button>
+      <el-button type="primary" @click.native="handleSubmit">确定</el-button>
+    </div>
+  </el-dialog>
+</template>
+<script>
+import { conditionIp, getSubnet, getVpc, getGroup } from 'services/platform/index'
+import { cloneDeep, uniq } from 'lodash-es'
+export const CECSTACK_DEFAULT_CONFIG = {
+  vpcList: [],
+  subnetList: [],
+  groupList: [],
+  vpcUuid: '',
+  networkType: 'Geneve',
+  subnetUuid: '',
+  ipAddress: '',
+  groups: []
+}
+export const CLOUDTOWER_DEFAULT_CONFIG = {
+  operation: 'newNet',
+  mac: '',
+  model: 'VIRTIO',
+  netmask: '',
+  link: 'up'
+}
+export default {
+  props: {
+    dialog: {
+      type: Object,
+      default: () => {}
+    },
+    itemData: {
+      type: [Object, Boolean]
+    },
+    disabled: {
+      type: Boolean
+    }
+  },
+  data() {
+    return {
+      ippools: [],
+      prefixNodeIps: {}
+    }
+  },
+  computed: {
+    subLocation() {
+      return this.dialog.row.subLocation
+    },
+    configs() {
+      return this.dialog.row.configs
+    },
+    count() {
+      const {
+        nodes = 1,
+        emption: { count }
+      } = this.dialog.row
+      return nodes * count
+    },
+    selectedIps() {
+      const ips = []
+      this.configs.networkCardConfigs.map(({ ipPolicy, address }) => {
+        if (ipPolicy == 'Manual') {
+          ips.push(...address)
+        }
+      })
+      return ips
+    }
+  },
+  created() {
+    this.getIpPool()
+    this.configs.networkCardConfigs.map((item) => {
+      if (item.address.length) {
+        if (this.prefixNodeIps[item.ipPoolId]) {
+          this.prefixNodeIps[item.ipPoolId].push(...item.address)
+        } else {
+          this.prefixNodeIps[item.ipPoolId] = [...item.address]
+        }
+      }
+      this.getIp(item, !!this.itemData)
+      this.getVpcList(item, !!this.itemData)
+      this.getSgroupList(item, !!this.itemData)
+    })
+  },
+  watch: {
+    count() {
+      this.configs.networkCardConfigs.map((item) => {
+        this.getIp(item)
+      })
+    }
+  },
+  methods: {
+    addCard() {
+      if (this.configs.networkCardConfigs.length === 3) return this.$message.warning('最多添加3张网卡')
+      const first = this.configs.networkCardConfigs[0]
+      let config = {}
+      switch (this.subLocation.vendorType) {
+        case 'CECSTACK':
+          config = { ...CECSTACK_DEFAULT_CONFIG, vpcList: first.vpcList, subnetList: first.subnetList, groupList: first.groupList }
+          break
+        case 'CLOUDTOWER':
+          config = CLOUDTOWER_DEFAULT_CONFIG
+          break
+        default:
+          break
+      }
+      this.configs.networkCardConfigs.push({
+        networkCardId: first.networkCardId,
+        ipPolicy: 'Auto',
+        ipPoolId: '',
+        ipPoolName: '',
+        address: [],
+        portGroupId: '',
+        loading: false,
+        ...config
+      })
+    },
+    conditionIp(flag, cell = {}) {
+      // 下拉框出现
+      if (flag) return
+      const { address = [], ipPoolId } = cell
+      if (!address.length) return
+      // 上一个审批节点时传输的,就已经是锁定状态了
+      // 以 addresses 为基础, 过滤不在 prefixNodeIps 中的 ip
+      const filterAddress = address.filter((ip) => !this.prefixNodeIps[cell.ipPoolId]?.includes(ip))
+      if (!filterAddress.length) return
+      conditionIp({
+        condition: JSON.stringify({
+          condition: 'checkIp',
+          poolId: ipPoolId,
+          ips: filterAddress
+        })
+      }).then((data) => {
+        if (!data.success) {
+          this.$message.success(data.message)
+          cell.address = []
+        }
+      })
+    },
+    selectIpChange(cell) {
+      if (!cell.address.length) cell.showIps = this.ippools.find(({ ipPoolId }) => ipPoolId === cell.ipPoolId).freezeAllIps.slice(0, 20)
+    },
+    calcAddress(cell, ip) {
+      // 其他虚机中是否已经选择过 禁用
+      let flag = false
+      if (this.selectedIps.includes(ip)) flag = true
+      // 超出数量禁用
+      if (cell.address.length >= this.count) flag = true
+      return flag
+    },
+    ipFilter(query = '', cell) {
+      const freezeAllIps = this.ippools.find(({ ipPoolId }) => ipPoolId === cell.ipPoolId)?.freezeAllIps || []
+      if (!query) return freezeAllIps.slice(0, 20)
+      // 上个节点已选
+      const preIps = this.prefixNodeIps[cell.ipPoolId]?.filter((ip) => ip.includes(query)) || []
+      // 已过滤
+      const arr = freezeAllIps.filter((ip) => ip.includes(query)).slice(0, 20)
+      // 合并并去重
+      this.$set(cell, 'showIps', uniq([...preIps, ...cell.address, ...arr]))
+      return cell.showIps
+    },
+    getVpcList(cell, isInit = false) {
+      if (this.disabled || this.subLocation.vendorType !== 'CECSTACK' || !this.subLocation.vendorId || !this.subLocation.region) return
+      getVpc({
+        simple: true,
+        params: this.$tools.handleSearchParam({
+          vendorId: this.subLocation.vendorId,
+          regionId: this.subLocation.region
+        })
+      }).then((data) => {
+        if (data.success) {
+          cell.vpcList = data.data.rows
+          if (cell.vpcUuid) this.getSubnet(cell)
+        }
+      })
+    },
+    getSgroupList(cell, isInit = false) {
+      if (this.disabled || this.subLocation.vendorType !== 'CECSTACK' || !this.subLocation.vendorId || !this.subLocation.region) return
+      getGroup({
+        page: 1,
+        rows: 9999,
+        params: this.$tools.handleSearchParam({
+          vendorId: this.subLocation.vendorId,
+          regionId: this.subLocation.region
+        })
+      }).then((data) => {
+        if (data.success) {
+          cell.groupList = data.data.rows
+        }
+      })
+    },
+    changeVPC(cell) {
+      cell.subnetUuid = ''
+      this.getSubnet(cell)
+    },
+    // 获取子网
+    getSubnet(cell) {
+      const vpcUuid = cell.vpcUuid
+      getSubnet({
+        simple: true,
+        params: JSON.stringify([
+          {
+            param: {
+              vpcUuid,
+              zone: this.subLocation.az,
+              vendorId: this.subLocation.vendorId
+            },
+            sign: 'EQ'
+          }
+        ])
+      }).then((data) => {
+        if (data.success) {
+          cell.vpcList.map((i) => {
+            cell.subnetList = data.data.rows
+          })
+        }
+      })
+    },
+    getIp(obj, isInit = false) {
+      if (this.disabled) return
+      const findIppool = this.ippools.find(({ ipPoolId }) => ipPoolId === obj.ipPoolId) || {}
+      obj.ipPoolName = findIppool.ipPoolName
+      obj.portGroupId = findIppool.portGroupId || ''
+      if (obj.ipPolicy != 'Manual' || !obj.ipPoolId) {
+        obj.address = []
+        return
+      }
+      this.$set(obj, 'loading', true)
+      conditionIp({ condition: JSON.stringify({ condition: 'listByPoolAndStatus', poolId: obj.ipPoolId, status: 'free' }) })
+        .then((data) => {
+          if (data.success) {
+            // 空闲的所有 ip
+            // Vue 禁止响应式
+            const freezeAllIps = Object.freeze(uniq([...(this.prefixNodeIps[obj.ipPoolId] || []), ...data.data.map(({ ip }) => ip)]))
+            // 上一节点的虽然锁定,但是也是可选
+            this.$set(findIppool, 'freezeAllIps', freezeAllIps)
+            // 校验数量
+            if (freezeAllIps.length) {
+              const address = []
+              freezeAllIps.forEach((ip) => {
+                if (address.length === this.count) return
+                if (isInit) {
+                  // 审批回显初始化
+                  address.push(...obj.address)
+                } else if (obj.address.includes(ip) || !this.selectedIps.includes(ip)) {
+                  // 原本就在里面 || 没被使用过
+                  address.push(ip)
+                }
+              })
+              obj.address = address
+              this.$set(obj, 'showIps', freezeAllIps.slice(0, 20))
+            } else {
+              this.$message.warning('可用 IP 数量不足')
+              obj.address = []
+              obj.ipPoolId = ''
+              obj.portGroupId = ''
+              obj.ipPolicy = 'Manual'
+            }
+          }
+        })
+        .catch(() => {
+          this.$message.warning('获取 IP 失败')
+          obj.address = []
+          obj.ipPolicy = 'Auto'
+        })
+        .finally(() => (obj.loading = false))
+    },
+    getIpPool(manual) {
+      if (manual) {
+        // 切换资源池回显
+        this.configs.networkCardConfigs.map((item) => {
+          item.ipPoolId = ''
+        })
+      }
+      this.ippools = []
+      this.dialog.row.networkRelations.forEach((item) => {
+        if (item.version == 'V4') this.ippools.push(cloneDeep(item))
+      })
+    },
+    handleSubmit() {
+      this.$refs.addData.validate((valid) => {
+        if (valid) {
+          if (this.configs.networkCardConfigs.some((item) => item.loading)) return this.$message.warning('请等待 IP 获取完成')
+          if (this.configs.networkCardConfigs.some((item) => item.ipPolicy === 'Manual' && !item.address?.length)) return this.$message.warning('手动模式请选择 IP')
+          if (typeof this.dialog.cb === 'function') this.dialog.cb()
+          this.dialog.visible = false
+        }
+      })
+    }
+  }
+}
+</script>
diff --git a/src/views/resource-apply/ecs/EFCVmList.vue b/src/views/resource-apply/ecs/EFCVmList.vue
new file mode 100644
index 0000000..54e0c01
--- /dev/null
+++ b/src/views/resource-apply/ecs/EFCVmList.vue
@@ -0,0 +1,763 @@
+<template>
+  <basic-form :model="formData" ref="addForm" label-width="0" :disabled="disabled">
+    <basic-table :data="showParamList" ref="addTable">
+      <el-table-column label="序号" show-overflow-tooltip width="60px">
+        <template slot-scope="{ $index }">
+          <basic-form-item label="">
+            {{ $index + 1 }}
+          </basic-form-item>
+        </template>
+      </el-table-column>
+      <el-table-column label="命名规则" show-overflow-tooltip width="160px">
+        <template slot-scope="{ row, $index }">
+          <basic-form-item label="" :prop="`showParamList.${$index}.configs.nameRuleId`">
+            <el-select v-model="row.configs.nameRuleId" placeholder="请选择命名规则" clearable filterable>
+              <el-option v-for="(item, index) in nameruleList" :key="index" :label="item.name" :value="item.id"> </el-option>
+            </el-select>
+          </basic-form-item>
+        </template>
+      </el-table-column>
+      <el-table-column label="主机名" show-overflow-tooltip width="160px">
+        <template slot-scope="{ row, $index }">
+          <basic-form-item label="" validate="required,vmHostName" :prop="`showParamList.${$index}.configs.vmHostName`">
+            <el-input v-model="row.configs.vmHostName"> </el-input>
+          </basic-form-item>
+        </template>
+      </el-table-column>
+      <!-- <el-table-column label="云平台类型" show-overflow-tooltip>
+        <template slot-scope="{ row,$index }">
+          <basic-form-item label="">
+            <el-select v-model="row.subLocation.vendorType">
+              <el-option :label="item | vendorName" :value="item" v-for="item in vendorTypelist" :key="item"></el-option>
+            </el-select>
+          </basic-form-item>
+        </template>
+      </el-table-column> -->
+      <el-table-column label="区域" show-overflow-tooltip width="180px">
+        <template slot-scope="{ row, $index }">
+          <basic-form-item label="" validate="required" :prop="`showParamList.${$index}.subLocation.region`">
+            <el-select v-model="row.subLocation.region" @change="changeRegion(row, true)">
+              <el-option :label="item.regionName" :value="item.region" v-for="item in regionList" :key="item.region"></el-option>
+            </el-select>
+          </basic-form-item>
+        </template>
+      </el-table-column>
+      <el-table-column label="可用区" show-overflow-tooltip width="180px">
+        <template slot-scope="{ row, $index }">
+          <basic-form-item label="" validate="required" :prop="`showParamList.${$index}.subLocation.az`">
+            <el-select v-model="row.subLocation.az" @change="changeAz(row, true)">
+              <el-option :label="item.azName" :value="item.availablitiyZone" v-for="item in getZoneListByRegion(row)" :key="item.availablitiyZone"></el-option>
+            </el-select>
+          </basic-form-item>
+        </template>
+      </el-table-column>
+      <el-table-column label="镜像类型" show-overflow-tooltip width="180px">
+        <template slot-scope="{ row, $index }">
+          <basic-form-item label="" validate="required" :prop="`showParamList.${$index}.configs.osCategory`">
+            <el-select v-model="row.configs.osCategory" placeholder="请选择" @change="getVersionList(row, true)">
+              <el-option v-for="(item, index) in row.osList" :key="index" :label="item" :value="item"> </el-option>
+            </el-select>
+          </basic-form-item>
+        </template>
+      </el-table-column>
+      <el-table-column label="镜像版本" show-overflow-tooltip width="180px">
+        <template slot-scope="{ row, $index }">
+          <basic-form-item label="" validate="required" :prop="`showParamList.${$index}.configs.osVersion`">
+            <el-select v-model="row.configs.osVersion" placeholder="请选择" @change="getImage(row, true)">
+              <el-option v-for="(item, index) in row.versionList" :key="index" :label="item" :value="item"> </el-option>
+            </el-select>
+          </basic-form-item>
+        </template>
+      </el-table-column>
+      <el-table-column label="CPU（核）" show-overflow-tooltip width="160px">
+        <template slot-scope="{ row, $index }">
+          <basic-form-item label="" validate="required" :prop="`showParamList.${$index}.configs.cpu`">
+            <el-input-number :min="1" :max="500" v-model="row.configs.cpu" @change="(val) => changeCpu(val, row)"> </el-input-number>
+          </basic-form-item>
+        </template>
+      </el-table-column>
+      <el-table-column label="内存（GB）" show-overflow-tooltip width="160px">
+        <template slot-scope="{ row, $index }">
+          <basic-form-item label="" validate="required" :prop="`showParamList.${$index}.configs.memory`">
+            <el-input-number :min="row.configs.templateRam" :max="500" v-model="row.configs.memory" @change="(val) => changeMemory(val, row)"> </el-input-number>
+          </basic-form-item>
+        </template>
+      </el-table-column>
+      <el-table-column label="磁盘（GB）" show-overflow-tooltip width="160px">
+        <template slot-scope="{ row, $index }">
+          <basic-form-item label="" validate="required" :prop="`showParamList.${$index}.configs.sysDisk.disk`">
+            <span class="detail-href" @click="handleOpenDiskDialog(row, $index)">
+              <template v-if="getDiskTotalSize(row) > 0">{{ getDiskTotalSize(row) }}</template>
+              <template v-else>配置</template>
+            </span>
+          </basic-form-item>
+        </template>
+      </el-table-column>
+      <el-table-column label="网络" show-overflow-tooltip width="180px">
+        <template slot-scope="{ row, $index }">
+          <basic-form-item label="" :prop="`showParamList.${$index}`" :rules="rules.networkCardConfigsRule">
+            <span class="detail-href" @click="handleOpenNetworkDialog(row, $index)">
+              <template v-if="!row.configs.networkCardConfigs.length || row.configs.networkCardConfigs[0].ipPoolId">
+                <div v-for="(item, index) in row.configs.networkCardConfigs" :key="index">
+                  {{ item.ipPoolName }} <span v-if="item.address.length">-{{ item.address.join('、') }}</span>
+                </div>
+              </template>
+              <template v-else>配置</template>
+            </span>
+          </basic-form-item>
+        </template>
+      </el-table-column>
+      <el-table-column label="密码" show-overflow-tooltip width="160px">
+        <template slot-scope="{ row, $index }">
+          <basic-form-item label="" validate="required,vmPassword" :prop="`showParamList.${$index}.configs.password`">
+            <el-input v-model="row.configs.password" placeholder="请输入密码" show-password></el-input>
+          </basic-form-item>
+          <basic-form-item label="" validate="required" :prop="`showParamList.${$index}.configs.confirm_password`">
+            <el-input v-model="row.configs.confirm_password" placeholder="请再次输入密码" show-password></el-input>
+          </basic-form-item>
+        </template>
+      </el-table-column>
+      <el-table-column label="用途" show-overflow-tooltip width="160px">
+        <template slot-scope="{ row, $index }">
+          <basic-form-item label="" validate="required" :prop="`showParamList.${$index}.subLocation.purpose`">
+            <el-input v-model="row.subLocation.purpose"> </el-input>
+          </basic-form-item>
+        </template>
+      </el-table-column>
+      <el-table-column label="软件配置" show-overflow-tooltip width="160px">
+        <template slot-scope="{ row, $index }">
+          <basic-form-item label="">
+            <span class="detail-href" @click="openGraph(row, $index)"> {{ getGraphConfigLabel(row) }} </span>
+          </basic-form-item>
+        </template>
+      </el-table-column>
+      <el-table-column label="数量" show-overflow-tooltip width="160px">
+        <template slot-scope="{ row, $index }">
+          <basic-form-item label="" validate="required" :prop="`showParamList.${$index}.emption.count`">
+            <el-input-number v-model="row.emption.count"> </el-input-number>
+          </basic-form-item>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" width="160px" fixed="right">
+        <template slot-scope="{ row, $index }">
+          <basic-form-item label="">
+            <el-button type="text" @click="handleClone(row)">复制</el-button>
+            <el-button type="text" @click="handleSub($index)">删除</el-button>
+          </basic-form-item>
+        </template>
+      </el-table-column>
+      <span slot="pagination"></span>
+    </basic-table>
+    <DataDisk v-if="addDiskDialog.visible" :dialog="addDiskDialog" @success="changeDisk"></DataDisk>
+    <Ippool v-if="addNetworkDialog.visible" :dialog="addNetworkDialog" :disabled="disabled"></Ippool>
+    <el-dialog :visible.sync="graphDialog.visible" title="作业编排" width="1200px" append-to-body top="5vh" :closeOnClickModal="false">
+      <Graph v-if="graphDialog.visible" :addData="addData" :graphDialog="graphDialog" @back="graphDialog.visible = false" :disabled="disabled"></Graph>
+    </el-dialog>
+  </basic-form>
+</template>
+
+<script>
+import { conditionService, conditionImage, getNameRule } from 'services/platform/index'
+import { generateSpec, getSpecValue } from 'views/resource-apply/utils/index'
+import { getPoolCondition } from 'services/platform/pool'
+import { uniqBy, cloneDeep } from 'lodash-es'
+import { transformNetworkConfig } from './ImageItem'
+import { subApplicationParam, GEN_UUID, ServiceCodeMap, defaultTask } from '../data/EFCInit'
+import Ippool, { CECSTACK_DEFAULT_CONFIG, CLOUDTOWER_DEFAULT_CONFIG } from './EFCIppool'
+import DataDisk from './EFCDataDisk'
+import sku from '../mixins/EFCsku'
+import Graph from '../graph/graph.vue'
+import { getVolumeTpl } from 'services/platform/smart.js'
+export default {
+  name: 'VmList',
+  mixins: [sku],
+  components: {
+    Ippool,
+    DataDisk,
+    Graph
+  },
+  props: {
+    itemData: {
+      type: [Object, Boolean]
+    },
+    showParamList: {
+      type: Array,
+      required: true,
+      default: () => []
+    },
+    addData: {
+      type: Object,
+      required: true,
+      default: () => {}
+    },
+    disabled: {
+      type: Boolean
+    }
+  },
+  provide() {
+    // 使用函数的形式，可以访问到 `this`
+    return {
+      getSubApplicationParamsForTaskServer: () => this.addData.subApplicationParams.filter((item) => item.taskGroupUuid === this.graphDialog.task.taskGroupUuid)
+    }
+  },
+  computed: {
+    formData() {
+      return { showParamList: this.showParamList }
+    },
+    regionList() {
+      return this.allPoolList.reduce((pre, cur) => {
+        if (!pre.find((item) => item.region == cur.region)) {
+          pre.push({
+            regionName: cur.regionName,
+            region: cur.region
+          })
+        }
+        return pre
+      }, [])
+    }
+  },
+  data() {
+    return {
+      nameruleList: [],
+      vendorTypelist: [],
+      allPoolList: [],
+      addDiskDialog: {
+        visible: false,
+        index: '',
+        row: {}
+      },
+      addNetworkDialog: {
+        visible: false,
+        row: {},
+        cb: () => {}
+      },
+      rules: {
+        networkCardConfigsRule: [
+          {
+            required: true,
+            validator: (rule, value, callback) => {
+              const validateNetworkCard = this.validateNetworkCard(value)
+              if (validateNetworkCard.valid) {
+                callback()
+              } else {
+                callback(new Error(validateNetworkCard.message))
+              }
+            },
+            trigger: null
+          }
+        ]
+      },
+      graphDialog: {
+        visible: false,
+        task: {},
+        cb: () => {}
+      },
+      CTDataDisktemplateData: []
+    }
+  },
+  created() {
+    getNameRule({
+      page: 1,
+      rows: 9999
+    }).then((data) => {
+      if (data.success) {
+        this.nameruleList = data.data.rows
+      }
+    })
+    this.getAllPool()
+    // 获取云平台类型
+    conditionService('server').then((data) => {
+      if (data.success) {
+        this.vendorTypelist = data.data
+      }
+    })
+  },
+  methods: {
+    getGraphConfigLabel(row) {
+      const task = this.addData.tasks.find(({ taskGroupUuid }) => taskGroupUuid === row.taskGroupUuid)
+      if (!task) return '配置'
+      return `${task.taskName}`
+    },
+    openGraph(row) {
+      if (!this.addData.location.name) return this.$message.error('请填写业务信息')
+      if (!row.configs.vmHostName) return this.$message.error('请填写主机名')
+      if (!row.configs.password) return this.$message.error('请填写密码')
+      this.$emit('handleUpdateParamList')
+      this.graphDialog.visible = true
+      this.graphDialog.task = cloneDeep(
+        this.addData.tasks.find((item) => item.taskGroupUuid === row.taskGroupUuid) || {
+          ...defaultTask,
+          taskGroupUuid: row.taskGroupUuid
+        }
+      )
+      this.graphDialog.cb = () => {
+        this.graphDialog.task.taskName = `${this.addData.location.name}_${this.graphDialog.task.name}`
+        const findIndex = this.addData.tasks.findIndex((item) => item.taskGroupUuid === row.taskGroupUuid)
+        if (findIndex > -1) {
+          this.addData.tasks[findIndex] = this.graphDialog.task
+        } else {
+          this.addData.tasks.push(this.graphDialog.task)
+        }
+      }
+    },
+    changeCpu(val, row) {
+      row.elements[0].specs[0].cpu = val
+    },
+    changeMemory(val, row) {
+      row.elements[0].specs[1].memory = val
+    },
+    // 将磁盘配置保存到 elements 中
+    async changeDisk(index = -1, row) {
+      row = index > -1 ? this.showParamList[index] : row
+      // 系统盘
+      row.elements[1].specs = [{ disk: row.configs.sysDisk.disk }]
+      row.configs.sysDisk.categoryId = row.elements[1].categoryId
+      // 数据盘
+      row.elements.splice(2)
+      if (row.configs.addDiskList.length) {
+        const dataDiskElementClone = cloneDeep(row.elements[1])
+        row.configs.addDiskList.map((item) => {
+          row.elements.push({ ...dataDiskElementClone, specs: [{ disk: item.disk }] })
+        })
+      }
+      // 设置各个云平台的默认磁盘配置
+      const vendorType = row.subLocation.vendorType
+      const vendorId = row.subLocation.vendorId
+      switch (vendorType) {
+        case 'VMWARE':
+          row.configs.sysDisk.diskType = 'thin'
+          // 设置磁盘默认数据
+          row.configs.addDiskList.forEach((item) => {
+            item.createLvm = false
+            item.diskType = 'thin'
+            item.fileSystem = 'ext3'
+            item.forceMount = false
+          })
+          break
+        case 'INSPURRAIL':
+          row.configs.sysDisk.diskType = 'thin'
+          // 设置磁盘默认数据
+          row.configs.addDiskList.forEach((item) => {
+            item.createLvm = false
+            item.diskType = 'thin'
+            item.fileSystem = 'ext3'
+            item.forceMount = false
+          })
+          break
+        case 'CLOUDTOWER':
+          const busData = [
+            { name: 'VIRTIO', value: 'VIRTIO' },
+            { name: 'SCSI', value: 'SCSI' },
+            { name: 'IDE', value: 'IDE' }
+          ]
+          // 设置磁盘默认数据
+          if (!this.CTDataDisktemplateData.length || this.CTDataDisktemplateData[0].vendorId !== vendorId) {
+            await getVolumeTpl({
+              simple: true,
+              params: this.$tools.handleSearchParam({ vendorId })
+            }).then((data) => {
+              if (data.success) {
+                if (!data.data.rows.length) {
+                  row.configs.addDiskList = []
+                  return this.$message.error('获取CLOUDTOWER存储策略数据为空,请联系管理员')
+                }
+                this.CTDataDisktemplateData = data.data.rows
+              }
+            })
+          }
+          row.configs.addDiskList.forEach((item) => {
+            item.type = 'newDisk'
+            item.bus = busData[0].value
+            item.volumeTemplateId = this.CTDataDisktemplateData[0].id // 存储策略
+            item.volumeTemplateName = this.CTDataDisktemplateData[0].name
+          })
+          break
+        case 'CECSTACK':
+          row.configs.addDiskList.forEach((item) => {
+            item.deleteWithInstance = true
+            item.bootVolume = false
+            // item.size = ''
+            // item.volumeType = ''
+            item.volumeUnit = 'GiB'
+            // item.bootIndex = ''
+          })
+          break
+        default:
+          break
+      }
+    },
+    handleClone(row = subApplicationParam) {
+      const cloneData = cloneDeep(row)
+      cloneData.taskGroupUuid = GEN_UUID()
+      cloneData.taskTargetUuid = GEN_UUID()
+      cloneData.configs.name = ''
+      this.showParamList.push(cloneData)
+    },
+    handleSub(index) {
+      this.showParamList.splice(index, 1)
+    },
+    handleOpenNetworkDialog(row, index) {
+      this.addNetworkDialog.visible = true
+      this.addNetworkDialog.row = row
+      this.addNetworkDialog.cb = () => {
+        this.$refs.addForm && this.$refs.addForm.$refs.formRef.validateField(`showParamList.${index}`)
+      }
+    },
+    getDiskTotalSize(row) {
+      return row.configs.sysDisk.disk + row.configs.addDiskList.reduce((pre, cur) => pre + cur.disk, 0)
+    },
+    handleOpenDiskDialog(row, index) {
+      this.addDiskDialog.visible = true
+      this.addDiskDialog.row = row
+      this.addDiskDialog.index = index
+    },
+    getOsList(row) {
+      if (!row.subLocation.vendorId) return
+      let params
+      if (row.subLocation.vendorType === 'CECSTACK') {
+        params = {
+          condition: 'listByImageType',
+          vendorId: row.subLocation.vendorId,
+          status: 'ACTIVE',
+          tenantId: 0,
+          regionId: row.subLocation.region,
+          imageType: 'PUBLIC'
+        }
+      } else {
+        params = {
+          condition: 'listTenantImages',
+          vendorId: row.subLocation.vendorId
+        }
+        if (row.subLocation.vendorType === 'SANGFOR') {
+          if (!row.subLocation.azUuid) return
+          params.azUuid = row.subLocation.azUuid
+        }
+      }
+      conditionImage(params).then((data) => {
+        if (data.success) {
+          row.imageData = data.data
+          this.$set(row, 'osList', Object.keys(row.imageData))
+          if (!this.itemData) {
+            row.configs.osCategory = row.osList[0]
+            row.configs.osVersion = ''
+          }
+          this.$set(row, 'versionList', [])
+          this.getVersionList(row, !row.configs.osVersion)
+        }
+      })
+      return row.osList
+    },
+
+    getVersionList(row, flag) {
+      if (row.subLocation.vendorType === 'CECSTACK') {
+        row.versionList = row.imageData[row.configs.osCategory].map(({ name }) => name)
+      } else {
+        row.versionList = Object.keys(row.imageData[row.configs.osCategory])
+      }
+      if (flag) {
+        row.configs.osVersion = row.versionList[0]
+        this.getImage(row, true)
+      } else {
+        this.getImage(row, false)
+      }
+    },
+    getImage(row, flag) {
+      let obj
+      if (row.subLocation.vendorType === 'CECSTACK') {
+        obj = row.imageData[row.configs.osCategory].find(({ name }) => row.configs.osVersion === name)
+      } else {
+        obj = row.imageData[row.configs.osCategory][row.configs.osVersion]?.[0]
+      }
+      if (!obj) return
+      if (flag) {
+        row.configs.imageId = obj.id
+        // 电子云为 minDisk
+        // cloudtower 镜像中可能没系统盘大小
+        row.configs.templateDisk = obj.templateDisk || obj.minDisk || 50
+        row.configs.templateRam = obj.minRam / 1024 || 1
+        if (row.configs.memory < row.configs.templateRam) row.configs.memory = row.configs.templateRam
+        row.configs.sysDisk.disk = row.configs.templateDisk
+      }
+      if (row.subLocation.vendorType == 'CECSTACK') {
+        if (flag) {
+          this.$set(row.configs, 'networkCardConfigs', [
+            {
+              networkId: obj.networkId,
+              ipPolicy: 'Auto',
+              ipPoolId: '',
+              ipPoolName: '',
+              address: [],
+              portGroupId: '',
+              loading: false,
+              // 电子云特殊参数
+              ...CECSTACK_DEFAULT_CONFIG
+            }
+          ])
+        }
+      } else if (row.subLocation.vendorType == 'SANGFOR') {
+        row.configs.vmUuid = obj.imageUuid
+        if (flag && row.configs.networkCardConfigs.length == 0) {
+          const hardware_status = JSON.parse(obj.detail || '{}')?.hardware_status
+          if (!hardware_status) return this.$message.error('镜像缺少网卡，请检查镜像是否正确')
+          const configs = transformNetworkConfig(hardware_status).map((item) => ({
+            ipPolicy: 'Auto',
+            ipPoolId: '',
+            ipPoolName: '',
+            address: [],
+            portGroupId: '',
+            loading: false
+          }))
+          this.$set(row.configs, 'networkCardConfigs', configs)
+        }
+      } else if (row.subLocation.vendorType == 'VMWARE') {
+        if (flag && (row.configs.networkCardConfigs.length == 0 || row.configs.networkCardConfigs[0].networkCardId != obj.networkCards?.[0]?.id)) {
+          if (!obj.networkCards?.length) this.$message.error('镜像缺少网卡，请检查镜像是否正确')
+          this.$set(
+            row.configs,
+            'networkCardConfigs',
+            obj.networkCards.map((item) => {
+              return {
+                networkCardId: item.id,
+                ipPolicy: 'Auto',
+                ipPoolId: '',
+                ipPoolName: '',
+                address: [],
+                portGroupId: '',
+                loading: false
+              }
+            })
+          )
+        }
+      } else if (row.subLocation.vendorType == 'INSPURRAIL') {
+        if (flag) {
+          if (row.configs.networkCardConfigs.length == 0 || row.configs.networkCardConfigs[0].networkCardId != obj.networkCards?.[0]?.id) {
+            if (!obj.networkCards?.length) this.$message.error('镜像缺少网卡，请检查镜像是否正确')
+            this.$set(
+              row.configs,
+              'networkCardConfigs',
+              obj.networkCards.map((item) => {
+                return {
+                  networkCardId: item.id,
+                  ipPolicy: 'Auto',
+                  ipPoolId: '',
+                  ipPoolName: '',
+                  address: [],
+                  portGroupId: '',
+                  loading: false
+                }
+              })
+            )
+          }
+          // 模板里面的磁盘配置
+          const volumes = obj.volumes || []
+          volumes.map(({ bootVolume, size }) => {
+            if (bootVolume) {
+              row.configs.templateDisk = size
+              row.configs.sysDisk.disk = size
+            } else {
+              row.configs.addDiskList.push({ disk: size, templateDisk: size })
+            }
+          })
+        }
+      } else if (row.subLocation.vendorType == 'CLOUDTOWER') {
+        if (flag) {
+          this.$set(row.configs, 'networkCardConfigs', [
+            {
+              networkId: obj.networkId,
+              ipPolicy: 'Auto',
+              ipPoolId: '',
+              ipPoolName: '',
+              address: [],
+              portGroupId: '',
+              loading: false,
+              // CLOUDTOWER特殊参数
+              ...CLOUDTOWER_DEFAULT_CONFIG
+            }
+          ])
+        }
+      } else if (row.subLocation.vendorType === 'CNWARE') {
+        const res = JSON.parse(obj.configuration).devices.map((d) => {
+          if (d.capacity) {
+            const size = Number(d.capacity) / 1024 / 1024 / 1024
+            // 系统盘大小
+            row.configs.templateDisk = size
+          }
+          return {
+            ...d
+          }
+        })
+        if (flag) {
+          row.configs.sysDiskList = res.flat()
+        }
+      }
+      // 设置硬盘参数
+      if (flag) this.changeDisk(-1, row)
+    },
+    setVendor(row, manual = true) {
+      const findVendorList = this.getVendorListByRegionZone(row)
+      const pool = findVendorList.filter((item) => item.vendorId == row.subLocation.vendorId)[0]
+      if (!pool) return this.$message.error('当前可用区下不存在资源池')
+      console.log('当前资源池:', pool.vendorType, pool.name)
+      const { vendorType, id, azUuid } = pool
+      row.subLocation.poolGroupId = id
+      row.subLocation.azUuid = azUuid
+      row.subLocation.vendorType = vendorType
+      row.networkRelations = pool.networkRelations || []
+      row.service = ServiceCodeMap.server[vendorType]
+      row.elements.map((item, index) => {
+        item.serviceCode = index === 0 ? ServiceCodeMap.server[vendorType] : ServiceCodeMap.disk[vendorType]
+      })
+      switch (vendorType) {
+        case 'VMWARE':
+          row.configs.isAddShterm = false
+          break
+        case 'INSPURRAIL':
+          row.configs.isAddShterm = false
+          break
+        case 'CLOUDTOWER':
+          row.configs.serverId = 0
+          row.configs.ha = true
+          row.configs.firmware = 'BIOS'
+          row.configs.status = 'running'
+          row.configs.fullClone = false
+          break
+        default:
+          break
+      }
+      // 根据云平台类型设置默认磁盘配置
+      this.changeDisk(-1, row)
+      this.getData(row, manual)
+    },
+    getData(row, manual = true) {
+      // 加载服务目录
+      if (!this.itemData || !this.disabled) this.loadSku(row)
+      this.getOsList(row)
+    },
+
+    getZoneListByRegion(row) {
+      const filterPools = this.allPoolList.filter((item) => item.region == row.subLocation.region)
+      if (!filterPools.length) return []
+      // 同一地域下可能会存在重复可用区,去重处理
+      if (filterPools[0].vendorType === 'CECSTACK') {
+        const formatPools = []
+        // 将多个可用区扁平化放在资源池中
+        filterPools.map((pool) => {
+          pool.regionRelations.map((zone) => {
+            formatPools.push({ ...pool, availablitiyZone: zone.zoneId, azName: zone.zoneName })
+          })
+        })
+        return uniqBy(formatPools, 'availablitiyZone')
+      } else {
+        return uniqBy(filterPools, 'availablitiyZone')
+      }
+    },
+    getVendorListByRegionZone(row) {
+      const zoneList = this.getZoneListByRegion(row)
+      return zoneList.filter((item) => item.availablitiyZone == row.subLocation.az)
+    },
+    // 地域变化
+    // manual 手动切换
+    changeRegion(row, manual = true) {
+      this.setZone(row, manual)
+    },
+    // 设置可用区
+    setZone(row, manual = true) {
+      const zoneList = this.getZoneListByRegion(row)
+      // 手动切换才需要置空
+      if (manual && !zoneList.length) return (row.subLocation.az = '')
+      if (!zoneList.find((item) => item.availablitiyZone === row.subLocation.az)) {
+        row.subLocation.az = zoneList[0].availablitiyZone
+      }
+      this.changeAz(row, manual)
+    },
+    // 可用区改变
+    changeAz(row, manual = true) {
+      const findVendorList = this.getVendorListByRegionZone(row)
+      if (manual && !findVendorList.length) return (row.subLocation.vendorId = '')
+      if (!findVendorList.find((item) => item.vendorId === row.subLocation.vendorId)) {
+        row.subLocation.vendorId = findVendorList[0].vendorId
+      }
+      this.setVendor(row, manual)
+    },
+    // 所有资源池
+    async getAllPool() {
+      const res = await getPoolCondition({
+        condition: 'listPoolGroups',
+        tenantId: this.addData.location.tenantId
+      })
+      if (!res.success) return
+      this.allPoolList = res.data
+      if (!this.regionList.length) return
+      const [{ region }] = this.regionList
+      if (!this.showParamList[0].subLocation.region) {
+        this.showParamList[0].subLocation.region = region
+      }
+      this.changeRegion(this.showParamList[0], false)
+    },
+    validateNetworkCard(param) {
+      const res = {
+        valid: true,
+        message: ''
+      }
+      let flag = false
+      let addressLenFlag = false
+      let cecstackFlag = false
+      param.configs.networkCardConfigs.forEach((item) => {
+        if (!item.ipPoolId || (item.ipPolicy == 'Manual' && item.address.length == 0) || (item.checkIpv6 && (!item.ipv6PoolId || (item.ipv6Policy == 'Manual' && item.ipv6Address.length == 0)))) flag = true
+        if (item.ipPolicy == 'Manual' && item.address.length !== param.emption.count) {
+          addressLenFlag = true
+        }
+        if (param.subLocation.vendorType === 'CECSTACK' && !(item.vpcUuid || item.subnetUuid)) {
+          cecstackFlag = true
+        }
+      })
+      if (flag) {
+        res.valid = false
+        res.message = '网卡信息配置不完善'
+        return res
+      }
+      if (addressLenFlag) {
+        res.valid = false
+        res.message = 'IP数量与云主机订购数量不一致'
+        return res
+      }
+      if (cecstackFlag) {
+        res.valid = false
+        res.message = '缺少 VPC 和子网信息'
+      }
+      return res
+    },
+    getParams() {
+      let data = false
+      this.$refs.addForm.validate((valid) => {
+        if (valid) {
+          const result = []
+          this.showParamList.forEach((param) => {
+            const validateNetworkCard = this.validateNetworkCard(param)
+            if (!validateNetworkCard.valid) {
+              data = false
+              return
+            }
+            const { password, confirm_password, ...other } = param.configs
+            if (password !== confirm_password) {
+              data = false
+              this.$message.error('两次密码输入不一致')
+              return
+            }
+            result.push({
+              ...other,
+              categoryId: param.elements[0].categoryId
+            })
+          })
+          if (result.length === this.showParamList.length) data = result
+        } else {
+          this.$message.error('虚拟机信息未填写完整')
+        }
+      })
+      return data
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss"></style>
diff --git a/src/views/resource-apply/ecs/ImageItem.vue b/src/views/resource-apply/ecs/ImageItem.vue
index 1ce4db9..50b2170 100644
--- a/src/views/resource-apply/ecs/ImageItem.vue
+++ b/src/views/resource-apply/ecs/ImageItem.vue
@@ -13,7 +13,26 @@
 <script>
 import { getDictionaries, conditionImage } from 'services/platform/index'
 import { element } from '../data/init'
+export function transformNetworkConfig(netConfig) {
+  // 创建一个空数组来存放转换后的结果
+  const result = []
 
+  // 遍历对象的每个键值对
+  for (const key in netConfig) {
+    // 解析每个属性的值
+    const configParts = netConfig[key].split(',')
+    const configObj = {}
+    // 遍历每个配置部分，将其转换为对象的键值对
+    configParts.forEach((part) => {
+      const [key, value] = part.split('=')
+      configObj[key.trim()] = value ? value.trim() : '' // 确保即使没有值，也添加键
+    })
+    // 将转换后的对象添加到结果数组中
+    result.push(configObj)
+  }
+
+  return result
+}
 export default {
   props: {
     addData: {
@@ -43,15 +62,18 @@ export default {
   },
   methods: {
     getOsList() {
-      conditionImage({
+      if (!this.addData.location.vendorId) return
+      const params = {
         condition: 'listTenantImages',
         vendorId: this.addData.location.vendorId
-      }).then((data) => {
+      }
+      if (this.addData.location.vendorType === 'SANGFOR') {
+        if (!this.addData.location.azUuid) return
+        params.azUuid = this.addData.location.azUuid
+      }
+      conditionImage(params).then((data) => {
         if (data.success) {
           this.imageData = data.data
-          if (this.addData.location.vendorType == 'SMARTX') {
-            this.$set(this.addData.configs, 'templateDisk', data.data.templateDisk)
-          }
           this.osList = Object.keys(this.imageData)
           if (!this.addData.configs.osCategory) {
             this.addData.configs.osCategory = this.osList[0]
@@ -74,26 +96,68 @@ export default {
     getImage(flag) {
       const obj = this.imageData[this.addData.configs.osCategory][this.addData.configs.osVersion][0]
       this.addData.configs.imageId = obj.id
-      this.addData.configs.templateDisk = obj.templateDisk
-      if (flag && this.addData.location.vendorType == 'VMWARE' && (this.addData.configs.networkCardConfigs.length == 0 || this.addData.configs.networkCardConfigs[0].networkCardId != obj.networkCards[0].id)) {
-        this.$set(
-          this.addData.configs,
-          'networkCardConfigs',
-          obj.networkCards.map((item) => {
-            return {
-              networkCardId: item.id,
-              ipPolicy: 'Auto',
-              ipPoolId: '',
-              address: [],
-              portGroupId: '',
-              checkIpv6: false,
-              ipv6PoolId: '',
-              ipv6Policy: 'Auto',
-              ipv6Address: []
-            }
+      this.addData.configs.templateDisk = obj.templateDisk || 50 // cloudtower 镜像中可能没系统盘大小
+      if (this.addData.location.vendorType == 'SANGFOR') {
+        this.addData.configs.vmUuid = obj.imageUuid
+        if (flag && this.addData.configs.networkCardConfigs.length == 0) {
+          const hardware_status = JSON.parse(obj.detail || '{}')?.hardware_status
+          if (!hardware_status) return this.$message.error('镜像缺少网卡，请检查镜像是否正确')
+          const configs = transformNetworkConfig(hardware_status).map((item) => ({
+            ipPolicy: 'Auto',
+            ipPoolId: '',
+            address: [],
+            loading: false
+          }))
+          this.$set(this.addData.configs, 'networkCardConfigs', configs)
+        }
+        return
+      }
+      if (this.addData.location.vendorType == 'VMWARE') {
+        if (flag && (this.addData.configs.networkCardConfigs.length == 0 || this.addData.configs.networkCardConfigs[0].networkCardId != obj.networkCards?.[0]?.id)) {
+          if (!obj.networkCards?.length) this.$message.error('镜像缺少网卡，请检查镜像是否正确')
+          this.$set(
+            this.addData.configs,
+            'networkCardConfigs',
+            obj.networkCards.map((item) => {
+              return {
+                networkCardId: item.id,
+                ipPolicy: 'Auto',
+                ipPoolId: '',
+                address: [],
+                portGroupId: '',
+                checkIpv6: false,
+                ipv6PoolId: '',
+                ipv6Policy: 'Auto',
+                ipv6Address: [],
+                loading: false
+              }
+            })
+          )
+        }
+      } else if (this.addData.location.vendorType == 'CLOUDTOWER') {
+        // 系统盘大小
+        this.$set(this.elements, 'insAmount', this.addData.configs.templateDisk)
+        if (flag) {
+          this.addData.configs.networkCardConfigs.map((item) => {
+            item.networkId = obj.networkId
           })
-        )
-      } else if (flag && this.addData.location.vendorType == 'SMARTX' && (this.addData.configs.networkCardConfigs.length == 0 || this.addData.configs.networkCardConfigs[0].networkCardId != obj.networkCards[0].id)) {
+        }
+      } else if (this.addData.location.vendorType === 'CNWARE') {
+        const res = JSON.parse(obj.configuration).devices.map((d) => {
+          if (d.capacity) {
+            const size = Number(d.capacity) / 1024 / 1024 / 1024
+            // 系统盘大小
+            this.addData.configs.templateDisk = size
+            this.$set(this.elements, 'insAmount', size)
+          }
+          return {
+            ...d
+          }
+        })
+        if (flag) {
+          this.addData.configs.sysDiskList = res.flat()
+        }
+      } else if (flag && this.addData.location.vendorType == 'SMARTX' && (this.addData.configs.networkCardConfigs.length == 0 || this.addData.configs.networkCardConfigs[0].networkCardId != obj.networkCards[0]?.id)) {
         const [{ id: categoryId }] = this.elements.categoryList
         this.elements.elements = obj.volumes.map((volume) => {
           return {
diff --git a/src/views/resource-apply/ecs/cloudTower/DataDisk.vue b/src/views/resource-apply/ecs/cloudTower/DataDisk.vue
new file mode 100644
index 0000000..4ec03dd
--- /dev/null
+++ b/src/views/resource-apply/ecs/cloudTower/DataDisk.vue
@@ -0,0 +1,177 @@
+<template>
+  <basic-form-item label="数据盘：" class="m-b-lg">
+    <el-row>
+      <el-col :span="24" v-for="(cell, index) in disks" :key="index" class="m-t">
+        <el-col :span="24">
+          <el-select filterable v-model="cell.categoryId" @change="getSku(cell)" class="w m-r-xs">
+            <el-option :label="item.name" v-for="(item, index) in categoryList" :key="index" :value="item.id"></el-option>
+          </el-select>
+          <el-select filterable v-model="cell.skuId" class="w m-r-xs">
+            <el-option :label="generateSpec(item.spec)" v-for="item in cell.skuList" :key="item.id" :value="item.id"></el-option>
+          </el-select>
+          总线：
+          <el-select filterable v-model="cell.bus" class="w m-r-xs">
+            <el-option v-for="(item, index) in busData" :key="index" :label="item.name" :value="item.value"></el-option>
+          </el-select>
+          存储策略：
+          <el-select filterable v-model="cell.volumeTemplateId" @change="volumeTemplateChange(cell)" class="w m-r-xs">
+            <el-option v-for="(item, index) in templateData" :key="index" :label="item.name" :value="item.id"></el-option>
+          </el-select>
+          <el-button size="mini" class="m-r-sm" type="danger" v-if="disks.length > 1" icon="el-icon-minus" @click="removeItem(index)"></el-button>
+        </el-col>
+      </el-col>
+      <el-col :span="4" class="add-border" :class="{ 'm-t-md': disks.length }" @click.native="addItem()">
+        <i class="el-icon-plus"></i>
+      </el-col>
+    </el-row>
+  </basic-form-item>
+</template>
+<script>
+import { element } from '../../data/init'
+import { getCategoriesByCode, getSkus } from 'services/services/product'
+import { formatEqParams } from 'utils'
+import { getVolumeTpl } from 'services/platform/smart.js'
+import { generateSpec } from 'views/resource-apply/utils/index'
+
+export default {
+  props: {
+    addData: {
+      type: Object
+    },
+    item: {
+      type: Object
+    }
+  },
+  data() {
+    return {
+      categoryList: [],
+      fileList: [],
+      busData: [
+        { name: 'VIRTIO', value: 'VIRTIO' },
+        { name: 'SCSI', value: 'SCSI' },
+        { name: 'IDE', value: 'IDE' }
+      ],
+      templateData: []
+    }
+  },
+  computed: {
+    disks() {
+      return this.item.elements
+    }
+  },
+  async created() {
+    await this.getCategoryList()
+    await this.getTemplateData()
+    if (!this.disks.length) this.addItem()
+  },
+  methods: {
+    generateSpec,
+    volumeTemplateChange(cell) {
+      cell.volumeTemplateName = this.templateData.find(({ id }) => id === cell.volumeTemplateId).name
+    },
+    async getTemplateData() {
+      await getVolumeTpl({
+        simple: true,
+        params: this.$tools.handleSearchParam({
+          vendorId: this.addData.location.vendorId
+        })
+      }).then((data) => {
+        if (data.success) {
+          this.templateData = data.data.rows
+        }
+      })
+    },
+    loadSku() {
+      if (this.disks.length) {
+        this.handleShowData()
+      }
+    },
+    handleShowData() {
+      this.disks.forEach((item) => {
+        this.getSku(item)
+      })
+    },
+    // 获取服务类型
+    async getCategoryList() {
+      await getCategoriesByCode('cloudtower.standard.volume').then((data) => {
+        if (data.success) {
+          if (!data.data.length) return this.$message.error('该服务不存在产品类型请检查')
+          this.categoryList = data.data
+          this.item.categoryMap = this.getCategoryMap(data.data)
+        }
+      })
+    },
+    // 获取商品的sku
+    getSku(item) {
+      const { categoryId, skuId } = item
+      this.loading = true
+      getSkus(formatEqParams({ categoryId }))
+        .then((data) => {
+          if (data.success) {
+            if (!data.data.length) return this.$message.error('该产品类型下不存在产品，请检查')
+            if (!skuId) {
+              const cell = data.data[0]
+              item.skuId = cell.id
+            }
+            this.$set(
+              item,
+              'skuList',
+              data.data.map((item) => {
+                const spec = JSON.parse(item.spec)
+                return {
+                  ...item,
+                  spec
+                }
+              })
+            )
+          }
+        })
+        .finally(() => {
+          this.loading = false
+        })
+    },
+    // 生成服务类型map
+    getCategoryMap(data) {
+      const map = {}
+      data.forEach((item) => {
+        const { id, name, remark, props } = item
+        map[id] = { name, remark, props }
+      })
+      return map
+    },
+    removeItem(index) {
+      this.disks.splice(index, 1)
+    },
+    addItem() {
+      if (this.disks.length === 4) return this.$message.error('数据盘最多可增加四个')
+      const [{ id: categoryId }] = this.categoryList
+      if (!this.templateData.length) return this.$message.error('存储策略为空，添加失败')
+      const result = {
+        ...element,
+        serviceCode: 'cloudtower.standard.volume',
+        categoryId,
+        categoryMap: this.item.categoryMap,
+        size: '',
+        type: 'newDisk',
+        // name: '',
+        bus: 'VIRTIO', // 总线
+        volumeTemplateId: this.templateData[0].id, // 存储策略
+        volumeTemplateName: this.templateData[0].name
+      }
+      this.getSku(result)
+      this.disks.push(result)
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.w {
+  width: 150px !important;
+}
+.add-border {
+  padding: 2px;
+  cursor: pointer;
+  border: 1px dashed black;
+  text-align: center;
+}
+</style>
diff --git a/src/views/resource-apply/ecs/cloudTower/index.vue b/src/views/resource-apply/ecs/cloudTower/index.vue
new file mode 100644
index 0000000..3dcd103
--- /dev/null
+++ b/src/views/resource-apply/ecs/cloudTower/index.vue
@@ -0,0 +1,303 @@
+<template>
+  <CommonWrapper code="compute" :add-data="addData" ref="common" :elements="elements" :get-params="getParams" :item-data="retention" :disabled="disabled">
+    <div class="item-block">
+      <h5>配置信息</h5>
+      <basic-form-item label="产品类型：">
+        <el-radio-group v-model="currentElement.categoryId" @change="getSku(currentElement)">
+          <el-radio-button :label="item.id" v-for="(item, index) in currentElement.categoryList" :key="index">{{ item.name }}</el-radio-button>
+        </el-radio-group>
+      </basic-form-item>
+      <basic-form-item label="规格：" validate="required">
+        <sku-table :skus="currentElement.skuList" style="max-width: 800px" :mode="addData.emption.duration.mode" :show-price="true">
+          <el-table-column show-overflow-tooltip label="规格代码" prop="code">
+            <template v-slot="scope">
+              <el-radio v-model="currentElement.skuId" :label="scope.row.id">{{ scope.row.code }}</el-radio>
+            </template>
+          </el-table-column>
+        </sku-table>
+      </basic-form-item>
+      <!-- 系统盘在镜像里面设置 -->
+      <ImageItem :add-data="addData" :elements="systemElement" v-if="addData.location.vendorId"></ImageItem>
+      <basic-form-item label="系统盘："> <el-input class="w m-r" disabled v-model="addData.configs.templateDisk"></el-input>GB </basic-form-item>
+      <DataDisk :add-data="addData" :item="elements[2]" ref="diskRef"></DataDisk>
+    </div>
+    <div class="item-block">
+      <h5>网络信息</h5>
+      <ipPool :add-data="addData" v-if="addData.networkRelations.length" :disabled="disabled"></ipPool>
+    </div>
+    <div class="item-block">
+      <h5>云主机信息</h5>
+      <basic-form :model="vmData" ref="addForm" label-position="left" :disabled="disabled">
+        <el-row :gutter="20">
+          <el-col :span="12">
+            <basic-form-item label="云主机名称：" validate="required" prop="name" label-width="107px">
+              <el-input v-model="vmData.name" placeholder="请输入云主机名" class="w-lg"></el-input>
+            </basic-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="20">
+          <el-col :span="12">
+            <basic-form-item label="密码设置：" validate="required" prop="password">
+              <el-input v-model="vmData.password" placeholder="请输入密码" show-password class="w-lg"></el-input>
+            </basic-form-item>
+          </el-col>
+          <el-col :span="12">
+            <basic-form-item label="确认密码：" validate="required" prop="confirm_password">
+              <el-input v-model="vmData.confirm_password" placeholder="请确认密码" show-password class="w-lg"></el-input>
+            </basic-form-item>
+          </el-col>
+        </el-row>
+      </basic-form>
+    </div>
+  </CommonWrapper>
+</template>
+
+<script>
+import CommonWrapper from '../../components/CommonWrapper.vue'
+import crypto from 'utils/crypto'
+import DataDisk from './DataDisk.vue'
+import ImageItem from './../ImageItem.vue'
+import sku from '../../mixins/sku'
+import { add, element } from '../../data/init'
+import ipPool from './ippool.vue'
+import { cloneDeep, findLastKey } from 'lodash-es'
+import { generateSpec, getSpecValue } from 'views/resource-apply/utils/index'
+import { getShoppingCartDetail } from 'services/system/shop_cart'
+// import LabelItemNew from '../../components/LabelItemNew.vue'
+
+export default {
+  props: {
+    type: {
+      type: String
+    },
+    itemData: {
+      type: [Object, Boolean]
+    },
+    disabled: {
+      type: Boolean
+    }
+  },
+  components: { CommonWrapper, DataDisk, ipPool, ImageItem },
+  mixins: [sku],
+  watch: {
+    'addData.location.vendorType'() {
+      this.$emit('type', this.addData.location.vendorType)
+    }
+  },
+  data() {
+    return {
+      elements: [
+        {
+          ...element,
+          name: '云主机',
+          serviceCode: 'cloudtower.standard.server',
+          main: true
+        },
+        {
+          ...element,
+          name: '系统盘',
+          serviceCode: 'cloudtower.standard.volume'
+        },
+        {
+          ...element,
+          name: '数据盘',
+          serviceCode: 'cloudtower.standard.volume',
+          isLoadData: false,
+          elements: []
+        }
+      ],
+      addData: {
+        ...cloneDeep(add),
+        location: {
+          ...add.location,
+          vendorType: this.type
+        },
+        service: 'cloudtower.standard.server',
+        configs: {
+          templateId: '',
+          resourceLabel: [],
+          diskCategoryId: 0,
+          osCategory: '',
+          osVersion: '',
+          volumeModels: [],
+          networkCardConfigs: [
+            {
+              operation: 'newNet',
+              networkId: '',
+              mac: '',
+              model: 'VIRTIO',
+              ipAddress: [], // 对应一个ip，可以为空
+              netmask: '',
+              link: 'up',
+              loading: false
+            }
+          ],
+          serverId: 0,
+          ha: true,
+          firmware: 'BIOS',
+          status: 'running',
+          fullClone: false
+        },
+        networkRelations: []
+      },
+      vmData: {
+        name: '',
+        confirm_password: '',
+        password: '',
+        resourceLabel: []
+      },
+      retention: false
+    }
+  },
+  computed: {
+    currentElement() {
+      return this.elements[0]
+    },
+    systemElement() {
+      return this.elements[1]
+    },
+    specArray() {
+      const { skuList, skuId } = this.currentElement
+      const item = skuList.find((item) => item.id === skuId)
+      if (!item) return []
+      const result = item.spec
+      return result
+    }
+  },
+  async created() {
+    if (this.itemData) {
+      this.retention = this.itemData
+      this.handleShowData()
+    } else if (this.$route.query.id) {
+      const res = await getShoppingCartDetail(this.$route.query.id)
+      if (res.success) {
+        this.retention = JSON.parse(res.data.inventory)
+        this.handleShowData()
+      }
+    }
+  },
+  methods: {
+    getPostData() {
+      let data = false
+      data = this.$refs.common.handlePostData()
+      return data
+    },
+    // 数据回现展示
+    handleShowData() {
+      this.addData = {
+        ...cloneDeep(this.retention),
+        networkRelations: []
+      }
+      const { name, password, resourceLabel } = this.addData.configs
+      this.vmData = {
+        name,
+        password: crypto.decrypt(password),
+        confirm_password: crypto.decrypt(password),
+        resourceLabel
+      }
+      const { configs, elements } = this.retention
+      const { diskCategoryId, volumeModels } = configs
+      const [first, two, ...others] = elements
+      this.elements = [
+        {
+          ...element,
+          ...first
+        },
+        {
+          ...element,
+          name: '系统盘',
+          serviceCode: 'cloudtower.standard.volume',
+          categoryId: diskCategoryId,
+          insAmount: configs.templateDisk, // configs 中系统盘大小在镜像中设置的
+          ...two
+        },
+        {
+          serviceCode: 'cloudtower.standard.volume',
+          isLoadData: false,
+          elements: others.map((item, index) => {
+            return {
+              ...item,
+              ...volumeModels[index]
+            }
+          })
+        }
+      ]
+      setTimeout(() => {
+        this.initLoad()
+        this.$refs.diskRef.loadSku()
+      })
+    },
+    generateSpec,
+    getParams() {
+      let data = false
+      this.$refs.addForm.validate((valid) => {
+        if (valid) {
+          if (!this.elements[2].elements.length) {
+            this.$message.error('至少要有一块磁盘')
+            return false
+          }
+          if (!this.addData.configs.networkCardConfigs.length) {
+            this.$message.error('至少要有一个网卡')
+            return false
+          }
+          let flag = false
+          let lengthValid = false
+          this.addData.configs.networkCardConfigs.forEach((item) => {
+            if (!item.ipPoolId || !item.ipAddress) flag = true
+            // 申请2台虚机，那么 address 也必须选择 2 个
+            if (item.ipAddress?.length !== this.addData.emption.count) lengthValid = true
+          })
+          if (lengthValid) {
+            this.$message.error('IP数量与申请云主机数量不一致')
+            return false
+          }
+          if (flag) {
+            this.$message.error('网卡信息配置不完善')
+            return false
+          }
+          const { name, password, confirm_password, ...other } = this.vmData
+          if (password !== confirm_password) {
+            this.$message.error('两次密码输入不一致')
+            return false
+          }
+
+          const result = {
+            ...other,
+            name,
+            password: crypto.encrypt(password),
+            diskCategoryId: this.elements[1].categoryId,
+            categoryId: this.currentElement.categoryId,
+            // 系统盘
+            ...getSpecValue(this.systemElement)
+          }
+          const { elements, categoryMap } = this.elements[2]
+          result.volumeModels = elements.map((item) => {
+            const { categoryId, size, type, bus, volumeTemplateId, volumeTemplateName } = item
+            return {
+              categoryId,
+              // 数据盘
+              ...getSpecValue(item),
+              size: getSpecValue(item).disk,
+              type,
+              category: categoryMap ? categoryMap[categoryId].remark : '',
+              bus,
+              volumeTemplateId,
+              volumeTemplateName
+            }
+          })
+          this.specArray.forEach((item) => {
+            result[item.specName] = item.specValue
+          })
+          result.skuId = this.currentElement.skuId
+          data = result
+        }
+      })
+      return data
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+@import '../../index.scss';
+</style>
diff --git a/src/views/resource-apply/ecs/cloudTower/ippool.vue b/src/views/resource-apply/ecs/cloudTower/ippool.vue
new file mode 100644
index 0000000..09f9ff9
--- /dev/null
+++ b/src/views/resource-apply/ecs/cloudTower/ippool.vue
@@ -0,0 +1,194 @@
+<template>
+  <basic-form-item label="网卡：" class="m-b-lg">
+    <el-row>
+      <el-col :span="24" v-for="(cell, index) in configs.networkCardConfigs" :key="index" class="m-b">
+        <el-select class="w" v-model="cell.ipPoolId" @change="getIp(cell)">
+          <el-option :label="item.ipPoolName" :value="item.ipPoolId" v-for="(item, index) in ippools" :key="index"></el-option>
+        </el-select>
+        <el-select v-loading="cell.loading" placeholder="请输入IP进行搜索" filterable class="m-l-md w" v-model="cell.ipAddress" size="small" multiple @visible-change="(flag) => conditionIp(flag, cell)" :filter-method="(query) => ipFilter(query, cell)" @change="selectIpChange(cell)">
+          <el-option v-for="item in cell.showIps" :key="item" :label="item" :value="item" :disabled="calcAddress(cell, item)"></el-option>
+        </el-select>
+        <!-- <el-button @click="addCard" icon="el-icon-plus"  size="mini" type="primary"></el-button> -->
+      </el-col>
+    </el-row>
+  </basic-form-item>
+</template>
+<script>
+import { conditionIp } from 'services/platform/index'
+import { isArray, cloneDeep, uniq } from 'lodash-es'
+export default {
+  components: {},
+  props: {
+    addData: {
+      type: Object
+    },
+    disabled: {
+      type: Boolean
+    },
+    retention: {
+      type: [Object, Boolean]
+    }
+  },
+  data() {
+    return {
+      ippools: [],
+      prefixNodeIps: {}
+    }
+  },
+  computed: {
+    configs() {
+      return this.addData.configs
+    },
+    count() {
+      const {
+        nodes = 1,
+        emption: { count }
+      } = this.addData
+      return nodes * count
+    },
+    selectedIps() {
+      const ips = []
+      this.addData.configs.networkCardConfigs.map(({ ipAddress }) => {
+        ips.push(...ipAddress)
+      })
+      return ips
+    }
+  },
+  created() {
+    this.getIpPool()
+    this.configs.networkCardConfigs.map((item) => {
+      if (!isArray(item.ipAddress)) item.ipAddress = [item.ipAddress]
+      if (item.ipAddress.length) {
+        if (this.prefixNodeIps[item.ipPoolId]) {
+          this.prefixNodeIps[item.ipPoolId].push(...item.ipAddress)
+        } else {
+          this.prefixNodeIps[item.ipPoolId] = [...item.ipAddress]
+        }
+      }
+      this.getIp(item, !!this.retention)
+    })
+  },
+  watch: {
+    count() {
+      this.configs.networkCardConfigs.map((item) => {
+        this.getIp(item)
+      })
+    },
+    'addData.networkRelations'() {
+      this.getIpPool(true)
+    }
+  },
+  methods: {
+    addCard() {
+      this.configs.networkCardConfigs.push({
+        operation: 'newNet',
+        networkId: '',
+        mac: '',
+        model: 'VIRTIO',
+        ipAddress: '', // 对应一个ip，可以为空
+        netmask: '',
+        link: 'up'
+      })
+    },
+
+    conditionIp(flag, cell = {}) {
+      // 下拉框出现
+      if (flag) return
+      const { ipAddress = [], ipPoolId } = cell
+      if (!ipAddress.length) return
+      // 上一个审批节点时传输的,就已经是锁定状态了
+      // 以 addresses 为基础, 过滤不在 prefixNodeIps 中的 ip
+      const filterAddress = ipAddress.filter((ip) => !this.prefixNodeIps[cell.ipPoolId]?.includes(ip))
+      if (!filterAddress.length) return
+      conditionIp({
+        condition: JSON.stringify({
+          condition: 'checkIp',
+          poolId: ipPoolId,
+          ips: filterAddress
+        })
+      }).then((data) => {
+        if (!data.success) {
+          this.$message.success(data.message)
+          cell.ipAddress = []
+        }
+      })
+    },
+    selectIpChange(cell) {
+      if (!cell.ipAddress.length) cell.showIps = this.ippools.find(({ ipPoolId }) => ipPoolId === cell.ipPoolId).freezeAllIps.slice(0, 20)
+    },
+    calcAddress(cell, ip) {
+      // 其他虚机中是否已经选择过 禁用
+      let flag = false
+      if (this.selectedIps.includes(ip)) flag = true
+      // 超出数量禁用
+      if (cell.ipAddress.length >= this.count) flag = true
+      return flag
+    },
+    ipFilter(query = '', cell) {
+      const freezeAllIps = this.ippools.find(({ ipPoolId }) => ipPoolId === cell.ipPoolId)?.freezeAllIps || []
+      if (!query) return freezeAllIps.slice(0, 20)
+      // 上个节点已选
+      const preIps = this.prefixNodeIps[cell.ipPoolId]?.filter((ip) => ip.includes(query)) || []
+      // 已过滤
+      const arr = freezeAllIps.filter((ip) => ip.includes(query)).slice(0, 20)
+      // 合并并去重
+      this.$set(cell, 'showIps', uniq([...preIps, ...cell.ipAddress, ...arr]))
+      return cell.showIps
+    },
+
+    getIp(obj, isInit = false) {
+      if (this.disabled) return
+      const findIppool = this.ippools.find(({ ipPoolId }) => ipPoolId === obj.ipPoolId) || {}
+      if (!obj.ipPoolId) {
+        obj.ipAddress = []
+        return
+      }
+      obj.loading = true
+      conditionIp({ condition: JSON.stringify({ condition: 'listByPoolAndStatus', poolId: obj.ipPoolId, status: 'free' }) })
+        .then((data) => {
+          if (data.success) {
+            // 空闲的所有 ip
+            // Vue 禁止响应式
+            const freezeAllIps = Object.freeze(uniq([...(this.prefixNodeIps[obj.ipPoolId] || []), ...data.data.map(({ ip }) => ip)]))
+            // 上一节点的虽然锁定,但是也是可选
+            this.$set(findIppool, 'freezeAllIps', freezeAllIps)
+            // 校验数量
+            if (freezeAllIps.length) {
+              const ipAddress = []
+              freezeAllIps.forEach((ip) => {
+                if (ipAddress.length === this.count) return
+                if (isInit) {
+                  // 审批回显初始化
+                  ipAddress.push(...obj.ipAddress)
+                } else if (obj.ipAddress.includes(ip) || !this.selectedIps.includes(ip)) {
+                  // 原本就在里面 || 没被使用过
+                  ipAddress.push(ip)
+                }
+              })
+              obj.ipAddress = ipAddress
+              this.$set(obj, 'showIps', freezeAllIps.slice(0, 20))
+            } else {
+              this.$message.warning('可用 IP 数量不足')
+              obj.ipAddress = []
+              obj.ipPoolId = ''
+            }
+          }
+        })
+        .finally(() => (obj.loading = false))
+    },
+    getIpPool(manual) {
+      if (manual) {
+        // 切换资源池回显
+        this.addData.configs.networkCardConfigs.map((item) => {
+          item.ipPoolId = ''
+        })
+      }
+      this.ippools = []
+      this.addData.networkRelations.forEach((item) => {
+        this.ippools.push(cloneDeep(item))
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped></style>
diff --git a/src/views/resource-apply/ecs/indexOld.vue b/src/views/resource-apply/ecs/indexOld.vue
new file mode 100644
index 0000000..0bd90d0
--- /dev/null
+++ b/src/views/resource-apply/ecs/indexOld.vue
@@ -0,0 +1,76 @@
+/** * Created by HaijunZhang on 2019/4/28. */
+<template>
+  <div>
+    <vc :type="type" v-if="type == 'VMWARE'" @type="setType" :item-data="itemData" :disabled="disabled" ref="node"></vc>
+    <op :type="type" v-else-if="type == 'OPENSTACK'" @type="setType" :item-data="itemData" :disabled="disabled" ref="node"></op>
+    <easy-stack :type="type" v-else-if="type == 'EASYSTACK'" @type="setType" :item-data="itemData" :disabled="disabled" ref="node"></easy-stack>
+    <aws :type="type" v-else-if="type == 'AWS'" @type="setType" :item-data="itemData" :disabled="disabled" ref="node"></aws>
+    <ali :type="type" v-else-if="type == 'ALIYUN'" @type="setType" :item-data="itemData" :disabled="disabled" ref="node"></ali>
+    <huawei :type="type" v-else-if="type == 'HUAWEI'" @type="setType" :item-data="itemData" :disabled="disabled" ref="node"></huawei>
+    <tencent :type="type" v-else-if="type == 'TENCENT'" @type="setType" :item-data="itemData" :disabled="disabled" ref="node"></tencent>
+    <tce :type="type" v-else-if="type == 'TCE'" @type="setType" :item-data="itemData" :disabled="disabled" ref="node"></tce>
+    <azure :type="type" v-if="type == 'AZURE'" @type="setType" :item-data="itemData" :disabled="disabled" ref="node"></azure>
+    <smart :type="type" v-if="type == 'SMARTX'" @type="setType" :item-data="itemData" :disabled="disabled" ref="node"></smart>
+    <cloudTower :type="type" v-if="type == 'CLOUDTOWER'" @type="setType" :item-data="itemData" :disabled="disabled" ref="node"></cloudTower>
+    <fusion-sphere-clone :type="type" v-if="type == 'FUSIONSPHERE' && this.serverId" @type="setType" :item-data="itemData" :disabled="disabled" ref="node"></fusion-sphere-clone>
+    <fusion-sphere :type="type" v-if="type == 'FUSIONSPHERE' && !this.serverId" @type="setType" :item-data="itemData" :disabled="disabled" ref="node"></fusion-sphere>
+    <sangFor :type="type" v-if="type == 'SANGFOR'" @type="setType" :item-data="itemData" :disabled="disabled" ref="node"></sangFor>
+    <cnware :type="type" v-if="type == 'CNWARE'" @type="setType" :item-data="itemData" :disabled="disabled" ref="node"></cnware>
+    <zstack :type="type" v-if="type == 'ZSTACK'" @type="setType" :item-data="itemData" :disabled="disabled" ref="node"></zstack>
+  </div>
+</template>
+
+<script>
+import vc from './vc/index.vue'
+import op from './op/index.vue'
+import easyStack from './easyStack/index.vue'
+import ali from './ali/index.vue'
+import huawei from './huawei/index.vue'
+import tencent from './tencent/index.vue'
+import tce from './tce/index.vue'
+import aws from './aws/index.vue'
+import azure from './azure/index.vue'
+import smart from './smart/index.vue'
+import cloudTower from './cloudTower/index.vue'
+import fusionSphere from './fusionSphere/index.vue'
+import fusionSphereClone from './fusionSphere/clone.vue'
+import sangFor from './sangfor/index.vue'
+import cnware from './cnware/index.vue'
+import zstack from './zstack/index.vue'
+export default {
+  props: {
+    itemData: {
+      type: [Object, Boolean]
+    },
+    disabled: {
+      type: Boolean
+    }
+  },
+  components: { vc, ali, op, huawei, tencent, aws, tce, azure, smart, fusionSphere, fusionSphereClone, easyStack, cloudTower, sangFor, cnware, zstack },
+  data() {
+    return {
+      type: '',
+      serverId: ''
+    }
+  },
+  created() {
+    if (!this.itemData) {
+      this.type = this.$route.params.type
+      this.serverId = this.$route.params.serverId
+    } else {
+      this.type = this.itemData.location.vendorType
+      this.serverId = this.itemData.configs.serverId
+    }
+  },
+  methods: {
+    setType(data) {
+      this.type = data
+    },
+    getApplyData() {
+      return this.$refs.node.getPostData()
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss"></style>
diff --git a/src/views/resource-apply/mixins/price.js b/src/views/resource-apply/mixins/price.js
index c2d6009..53cddf3 100644
--- a/src/views/resource-apply/mixins/price.js
+++ b/src/views/resource-apply/mixins/price.js
@@ -76,6 +76,12 @@ export default {
       } = this.addData
       // 代码容错处理
       if (!sku && !serviceItem) return 0
+      if (['cloudtower.standard.volume', 'cnware.standard.volume'].includes(serviceCode) && item.name === '系统盘') {
+        // cloudtower/cnware 系统盘根据基础定价来计算
+        const basicPrice = JSON.parse(skuList[0]?.basicPrice || '[]')
+        if (insAmount === 1) return 0
+        return basicPrice[0].monthPrice * insAmount
+      }
       const price = getPrice(sku || serviceItem, mode)
       // 集群部署多个实例
       const { nodes = 1 } = this.addData
diff --git a/src/views/service_operate/product/service_catalog/config.ts b/src/views/service_operate/product/service_catalog/config.ts
index 753ab7f..ba2d2fc 100644
--- a/src/views/service_operate/product/service_catalog/config.ts
+++ b/src/views/service_operate/product/service_catalog/config.ts
@@ -9,6 +9,7 @@ export const statusList = [
   }
 ]
 export const flowConfig = [
+  { category: 'EFCApplicationOperate', flowId: null },
   { category: 'ApplicationOperate', flowId: null },
   { category: 'AlterationOperate', flowId: null },
   { category: 'ExtensionOperate', flowId: null },
diff --git a/vite.config.ts b/vite.config.ts
index 74b33df..07cca55 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -7,8 +7,8 @@ function resolve(dir) {
   return path.join(__dirname, dir)
 }
 
-const httpType = 'http://'
-const proxyUrl = '23.33.3.3:60006/' // 代理地址设置
+const httpType = 'https://'
+const proxyUrl = '23.33.3.22:60006/' // 代理地址设置
 
 export default defineConfig({
   resolve: {
diff --git a/vue.config.js b/vue.config.js
index 948c603..26ed55c 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -9,8 +9,8 @@ const CompressPlugin = require('compress-webpack-plugin')
 function resolve(dir) {
   return path.join(__dirname, dir)
 }
-const httpType = 'http://'
-const proxyUrl = '23.33.3.3:60006/' // 代理地址设置
+const httpType = 'https://'
+const proxyUrl = '23.33.3.22:60006/' // 代理地址设置
 // const proxyUrl = '10.20.51.92:7001' // 代理地址设置
 // const proxyUrl = '10.10.2.60:50006/' 苏州代理地址
 module.exports = {