服务管理-云资源列表调试

package.json

@@ -31,6 +31,7 @@
     "vue-i18n": "^8.17.7",
     "vue-resource": "^1.5.1",
     "vue-router": "^3.0.2",
+    "vue-sparklines": "^0.2.1",
     "vuex": "^3.1.0"
   },
   "devDependencies": {

src/components/allot-info-confirm.vue

+<template>
+  <apass-dialog
+    ref="confrim"
+    class="allot_info_confirm"
+    width="600px"
+    title="分配信息确认"
+  >
+    <template slot="content">
+      <div class="confirm_container">
+        <div class="info_list" style="width: 100%;">
+          <p class="info_text text_grey">申请组织：</p>
+          <p
+            class="info_text"
+            v-text="(detail && detail['a_申请组织']) || ''"
+          ></p>
+        </div>
+        <div class="info_list" style="width: 50%;">
+          <p class="info_text text_grey">申请用户：</p>
+          <p
+            class="info_text"
+            v-text="(detail && detail['a_申请用户']) || ''"
+          ></p>
+        </div>
+        <div class="info_list" style="width: 50%;">
+          <p class="info_text text_grey">联系电话：</p>
+          <p
+            class="info_text"
+            v-text="(detail && detail['a_联系电话']) || ''"
+          ></p>
+        </div>
+        <div class="info_list" style="width: 100%;">
+          <p class="info_text text_grey">上传申请文件：</p>
+          <p
+            class="info_text"
+            v-text="(detail && detail['a_上传申请文件']) || ''"
+          ></p>
+        </div>
+        <div class="info_list" style="width: 100%;">
+          <!-- <p class="detail_title info_text text_grey">原规格：</p> -->
+          <div class="detail_info">
+            <div class="detail_list">
+              <p class="info_text">基本信息：</p>
+              <p class="info_text info_cell">
+                <span class="text_grey">工作区域名称：</span>
+                <span
+                  v-text="(detail && detail['a_工作区域名称']) || ''"
+                ></span>
+              </p>
+              <p class="info_text info_cell">
+                <span class="text_grey">中文名称：</span>
+                <span v-text="(detail && detail['a_中文名称']) || ''"></span>
+              </p>
+              <p class="info_text info_cell">
+                <span class="text_grey">描述信息：</span>
+                <span v-text="(detail && detail['a_描述信息']) || ''"></span>
+              </p>
+            </div>
+            <div class="detail_list">
+              <p class="info_text">工作区域申请规格：</p>
+              <p class="info_text info_cell">
+                <span class="text_grey">CPU：</span>
+                <span v-text="(detail && detail['a_CPU']) || ''"></span>
+              </p>
+              <p class="info_text info_cell">
+                <span class="text_grey"> 内存：</span>
+                <span v-text="(detail && detail['a_内存']) || ''"></span>
+              </p>
+            </div>
+            <div class="detail_list">
+              <p class="info_text">申请时长：</p>
+              <p class="info_text info_cell">
+                <span class="text_grey"> 申请时长：</span>
+                <span v-text="(detail && detail['a_申请时长']) || ''"></span>
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </template>
+
+    <template slot="action">
+      <el-button type="defalut" size="mini" @click="hideDialog">
+        取消
+      </el-button>
+      <el-button type="primary" size="mini" @click="confrimAction">
+        确认提交
+      </el-button>
+    </template>
+  </apass-dialog>
+</template>
+
+<script>
+import apassDialog from "@/components/apass-dialog";
+
+export default {
+  components: { apassDialog },
+  data: () => ({
+    detail: null,
+  }),
+  methods: {
+    showDialog() {
+      this.$refs.confrim.show();
+    },
+    hideDialog() {
+      this.$refs.confrim.hide();
+    },
+    getDetail(applyid) {
+      this.$http
+        .get("/apaas/service/v3/resource/user/apply/approveddetail", {
+          params: {
+            type: 0,
+            applyid: applyid,
+          },
+        })
+        .then(({ data }) => {
+          if (data.success) {
+            console.log(data.data);
+            // this.detail = data.data;
+          } else {
+            this.$message({
+              message: "获取详情失败",
+              type: "warning",
+            });
+          }
+        })
+        .catch((error) => {
+          this.$message({
+            message: "获取详情失败",
+            type: "warning",
+          });
+        });
+
+      this.detail = {
+        a_申请组织: "贵州省交通运输厅",
+        a_申请用户: "贵州省交通运输厅",
+        a_联系电话: "13523232333",
+        a_上传申请文件: "云资源申请修改意见V2.0审批审批函.pdf",
+        a_工作区域名称: "aPaaS-V3.0",
+        a_中文名称: "aPaaS平台V3.0",
+        a_描述信息:
+          "用于部署运行aPaaS平台V3.0用于部署运行aPaaS平台V3.0用于部署运行aPaaS平台V3.0",
+        a_CPU: "最高2核，默认1核",
+        a_内存: "最高2GB，默认1GB",
+        a_申请时长: "6个月",
+      };
+
+      this.showDialog();
+    },
+    confrimAction() {
+      console.log("confrim");
+    },
+  },
+};
+</script>
+
+<style scoped>
+.confirm_container {
+  display: flex;
+  justify-content: flex-start;
+  align-items: flex-start;
+  align-content: flex-start;
+  flex-wrap: wrap;
+  text-align: left;
+}
+.info_list + .info_list,
+.detail_list + .detail_list {
+  margin-top: 15px;
+}
+.info_text {
+  font-size: 14px;
+  line-height: 27px;
+  color: #242c43;
+}
+.text_grey {
+  color: #8890a7;
+}
+.detail_title {
+  margin-bottom: 7px;
+}
+.detail_info {
+  background-color: #f8f9fd;
+  padding: 15px;
+  border-radius: 7px;
+  overflow: hidden;
+}
+.info_cell {
+  display: flex;
+  justify-content: flex-start;
+  align-items: flex-start;
+}
+.info_cell > span:nth-child(1) {
+  width: 8em;
+  flex-shrink: 0;
+  text-align: right;
+  margin-right: 10px;
+}
+.info_cell > span:nth-child(2) {
+  flex-grow: 1;
+}
+</style>