From 4d1d7095351910454c732f6a0ab9686e913d9b8b Mon Sep 17 00:00:00 2001
From: xuyiming <xuyiming@bd-apaas.com>
Date: Thu, 9 Jul 2020 18:30:34 +0800
Subject: [PATCH] =?UTF-8?q?=E8=B6=85=E7=AE=A1-=E4=BA=91=E8=B5=84=E6=BA=90?=
 =?UTF-8?q?=E7=AE=A1=E7=90=86-=E5=B7=A5=E4=BD=9C=E5=8C=BA=E5=9F=9F?=
 =?UTF-8?q?=E5=AE=A1=E6=89=B9=E5=92=8C=E4=BA=91=E8=B5=84=E6=BA=90=E8=AF=A6?=
 =?UTF-8?q?=E6=83=85=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/apass-list.vue                 |  35 +-
 src/pages/workbench/fwgl/approveWorkspace.vue |  27 +-
 src/pages/workbench/fwgl/fwglList.vue         |  21 +-
 .../fwgl/organizationCloudResource.vue        | 358 ++++++++++++++----
 4 files changed, 341 insertions(+), 100 deletions(-)

diff --git a/src/components/apass-list.vue b/src/components/apass-list.vue
index b6d60d0..7541f3f 100644
--- a/src/components/apass-list.vue
+++ b/src/components/apass-list.vue
@@ -69,6 +69,10 @@
         @filter-change="filterChange"
       ></list-filter>
 
+      <div class="main_top_container" v-if="$slots['main-top']">
+        <slot name="main-top"></slot>
+      </div>
+
       <div class="cross_line" v-if="!hideHeader"></div>
 
       <div class="list-container" v-if="$slots.list">
@@ -149,18 +153,28 @@ export default {
     pageSizes: [10, 20, 50],
     selectFilter: [],
   }),
+  watch: {
+    otherFilter: {
+      handler() {
+        this.initOtherFilter();
+      },
+      deep: true,
+    },
+  },
   methods: {
     initOtherFilter() {
-      this.otherFilter.forEach((item) => {
-        this.$set(this.filter, item.prop, item.default);
+      if (this.otherFilter && this.otherFilter.length > 0) {
+        this.otherFilter.forEach((item) => {
+          this.$set(this.filter, item.prop, item.default);
 
-        this.selectFilter.push({
-          name: item.name,
-          prop: item.prop,
-          value: item.default,
-          options: item.options,
+          this.selectFilter.push({
+            name: item.name,
+            prop: item.prop,
+            value: item.default,
+            options: item.options,
+          });
         });
-      });
+      }
     },
     searchAction(value) {
       this.listAction();
@@ -201,10 +215,7 @@ export default {
     },
   },
   mounted() {
-    if (this.otherFilter && this.otherFilter.length > 0) {
-      this.initOtherFilter();
-    }
-
+    this.initOtherFilter();
     this.listAction();
   },
 };
diff --git a/src/pages/workbench/fwgl/approveWorkspace.vue b/src/pages/workbench/fwgl/approveWorkspace.vue
index 8bda3f4..7209512 100644
--- a/src/pages/workbench/fwgl/approveWorkspace.vue
+++ b/src/pages/workbench/fwgl/approveWorkspace.vue
@@ -57,7 +57,25 @@ export default {
   computed: {},
   methods: {
     init(filter) {
-      console.log(filter);
+      // console.log(filter);
+
+      this.$http
+        .get("/apaas/service/v3/resource/user/apply/list", {
+          params: {
+            search: filter.keyword,
+            page: filter.page,
+            limit: filter.size,
+            depart: "",
+            state1: filter.state1,
+          },
+        })
+        .then(({ data }) => {
+          this.listTotal = data.total;
+          this.listData = data.data.cloud_apply_list;
+        })
+        .catch((error) => {
+          console.log(error);
+        });
     },
     showDialog() {
       this.$refs.dialog.show();
@@ -76,10 +94,12 @@ export default {
     this.level = parseInt(this.$route.params.level);
     this.type = parseInt(this.$route.params.type);
 
+    let warnFlag = this.$route.query.warn || false;
+
     this.otherFilter = [
       {
         name: "审批状态",
-        prop: "approve_state",
+        prop: "state1",
         default: "",
         options: [
           {
@@ -187,7 +207,7 @@ export default {
             label: "审批",
             callback: this.approveAction,
             disabledRule(item) {
-              return item.approve_state != 0;
+              return item.approve_state != 0 || warnFlag;
             },
           },
           {
@@ -198,7 +218,6 @@ export default {
         ],
       },
     ];
-    this.listData = [{}, {}, {}];
   },
 };
 </script>
diff --git a/src/pages/workbench/fwgl/fwglList.vue b/src/pages/workbench/fwgl/fwglList.vue
index dea5321..4645437 100644
--- a/src/pages/workbench/fwgl/fwglList.vue
+++ b/src/pages/workbench/fwgl/fwglList.vue
@@ -123,7 +123,6 @@ import helper from "@/services/helper.js";
 import apassList from "@/components/apass-list";
 import apassDialog from "@/components/apass-dialog";
 import allotInfoConfirm from "@/components/allot-info-confirm";
-import Dashboard from "@/components/e-charts/dashboard";
 import organizationList from "@/components/organization-list/organization-list";
 
 export default {
@@ -131,7 +130,6 @@ export default {
     apassList,
     apassDialog,
     allotInfoConfirm,
-    Dashboard,
     organizationList,
   },
   data: () => ({
@@ -489,7 +487,7 @@ export default {
             align: "center",
             type: "image",
             getImage(item) {
-              return item.state == 0
+              return item.state == 1
                 ? require("@/assets/imgs/ic_true.png")
                 : require("@/assets/imgs/ic_failed.png");
             },
@@ -828,7 +826,7 @@ export default {
             align: "center",
             type: "image",
             getImage(item) {
-              return item.state == 0
+              return item.state == 1
                 ? require("@/assets/imgs/ic_true.png")
                 : require("@/assets/imgs/ic_failed.png");
             },
@@ -1214,7 +1212,7 @@ export default {
                 count_zy: cloud.count_zy,
                 dashboard_list: [
                   {
-                    name: "cpu使用量",
+                    name: "CPU使用量",
                     value: cloud.cpu_use,
                     total: cloud.cpu_total,
                     unit: "（核）",
@@ -1243,7 +1241,7 @@ export default {
               this.cloud_admin = {
                 dashboard_list: [
                   {
-                    name: "cpu使用量",
+                    name: "CPU使用量",
                     value: cloud.cpu_use,
                     total: cloud.cpu_total,
                     unit: "（核）",
@@ -1995,11 +1993,12 @@ export default {
       }
     },
     approveWorkspace() {
-      /* if (this.cloud_admin_warn) {
-        console.log("告警 ---");
-      } else { */
-      this.$router.push(`/fwgl/${this.level}/${this.type}/approveWorkspace`);
-      // }
+      this.$router.push({
+        path: `/fwgl/${this.level}/${this.type}/approveWorkspace`,
+        query: {
+          warn: this.cloud_admin_warn,
+        },
+      });
     },
   },
   created() {
diff --git a/src/pages/workbench/fwgl/organizationCloudResource.vue b/src/pages/workbench/fwgl/organizationCloudResource.vue
index b388043..9d1c94e 100644
--- a/src/pages/workbench/fwgl/organizationCloudResource.vue
+++ b/src/pages/workbench/fwgl/organizationCloudResource.vue
@@ -21,6 +21,32 @@
           组织云资源详情
         </el-breadcrumb-item>
       </el-breadcrumb>
+
+      <template slot="main-top">
+        <div
+          class="dashboard_contaner"
+          v-if="dashboardList && dashboardList.length > 1"
+        >
+          <div
+            class="dashborad_list"
+            v-for="(item, index) in dashboardList"
+            :key="index"
+          >
+            <chart
+              :options="getDashboardOption(item)"
+              class="dashboard_chart"
+            />
+            <p class="dashboard_info">
+              <span>物理总量</span>
+              <span v-text="item.total + item.unit"></span>
+            </p>
+            <p class="dashboard_info">
+              <span>剩余量</span>
+              <span v-text="item.value + item.unit"></span>
+            </p>
+          </div>
+        </div>
+      </template>
     </apass-list>
 
     <apass-dialog
@@ -33,6 +59,7 @@
 </template>
 
 <script>
+import { graphic } from "echarts/lib/export";
 import helper from "@/services/helper.js";
 import apassList from "@/components/apass-list";
 import apassDialog from "@/components/apass-dialog";
@@ -49,6 +76,7 @@ export default {
     listHeader: [],
     listData: [],
     listTotal: 0,
+    dashboardList: [],
     dialogInfo: {
       title: "",
       msg: "",
@@ -58,81 +86,256 @@ export default {
   computed: {},
   methods: {
     init(filter) {
-      console.log(filter);
-    },
-    showDialog() {
-      this.$refs.dialog.show();
-    },
-    detailAction(item) {
-      console.log("detailAction");
-    },
-    approveAction(item) {
-      console.log("approveAction");
+      // console.log(filter);
+
+      this.$http
+        .get("/apaas/service/v3/resource/user/apply/list", {
+          params: {
+            search: filter.keyword,
+            page: filter.page,
+            limit: filter.size,
+            depart: filter.depart,
+          },
+        })
+        .then(({ data }) => {
+          this.listTotal = data.total;
+          this.listData = data.data.cloud_apply_list;
+
+          const cloud = data.data.cloud_resource_count;
+          this.dashboardList = [
+            {
+              name: "CPU使用量",
+              value: cloud.cpu_use,
+              total: cloud.cpu_total,
+              unit: "（核）",
+            },
+            {
+              name: "内存使用量",
+              value: cloud.memory_use,
+              total: cloud.memory_total,
+              unit: "（GB）",
+            },
+            {
+              name: "数据盘使用量",
+              value: cloud.disk_use,
+              total: cloud.disk_total,
+              unit: "（GB）",
+            },
+            {
+              name: "容器组使用量",
+              value: cloud.containers_use,
+              total: cloud.containers_total,
+              unit: "（个）",
+            },
+          ];
+        })
+        .catch((error) => {
+          console.log(error);
+        });
     },
-    deleteAction(item) {
-      console.log("deleteAction");
+    getOrganizations() {
+      this.$http
+        .get("/apaas/backmgt/department/list")
+        .then(({ data }) => {
+          if (data.success == 1) {
+            let organizations = data.data || [];
+
+            this.otherFilter = [
+              {
+                name: "组织名称",
+                prop: "depart",
+                default: this.$route.params.id,
+                options: organizations.map((item) => ({
+                  name: item.department_name,
+                  value: item.department_id,
+                })),
+              },
+            ];
+          }
+        })
+        .catch((error) => {
+          console.log(error);
+        });
     },
-  },
-  created() {
-    this.level = parseInt(this.$route.params.level);
-    this.type = parseInt(this.$route.params.type);
+    getDashboardOption(item) {
+      let percent = Math.round((item.value / item.total) * 100) || 0;
+      let colors = ["#515fe7", "#e7ecfd"];
 
-    this.otherFilter = [
-      {
-        name: "组织名称",
-        prop: "organization",
-        default: this.$route.params.id,
-        options: [
-          {
-            value: "1",
-            name: "不许删",
+      if (percent >= 80) {
+        colors = ["#e3606d", "#f6d0d0"];
+      }
+
+      return {
+        title: {
+          text: percent + "%",
+          subtext: item.name,
+          x: "center",
+          y: "center",
+          textVerticalAlign: "auto",
+          textStyle: {
+            fontSize: 34,
+            fontWeight: "100",
+            color: ["#0d1847"],
           },
-          {
-            value: "39",
-            name: "应用测试一轮shf",
+          subtextStyle: {
+            fontSize: 12,
+            fontWeight: "100",
+            color: "#707693",
           },
-          {
-            value: "38",
-            name: "我的组织",
+        },
+        angleAxis: {
+          axisLine: {
+            show: false,
           },
-          {
-            value: "37",
-            name: "1234567890",
+          axisLabel: {
+            show: false,
           },
-          {
-            value: "36",
-            name: "测试bug",
+          splitLine: {
+            show: false,
           },
-          {
-            value: "35",
-            name: "3213123",
+          axisTick: {
+            show: false,
+          },
+          min: 0,
+          max: 138,
+          boundaryGap: ["0", "100"],
+          startAngle: 220,
+          endAngle: -40,
+        },
+        radiusAxis: {
+          type: "category",
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: false,
           },
+        },
+        polar: {
+          radius: "110%",
+        },
+        series: [
           {
-            value: "33",
-            name: "B.G.R.A123",
+            type: "bar",
+            data: [, percent],
+            coordinateSystem: "polar",
+            barMaxWidth: 10,
+            z: 1,
+            name: "B",
+            roundCap: true,
+            itemStyle: {
+              normal: {
+                color: new graphic.LinearGradient(0, 0, 0, 1, [
+                  { offset: 0, color: colors[0] },
+                  { offset: 1, color: colors[1] },
+                ]),
+              },
+            },
+            barGap: "-100%",
           },
           {
-            value: "32",
-            name: "Bgtest23.号",
+            type: "bar",
+            data: [, 100],
+            z: 0,
+            silent: true,
+            coordinateSystem: "polar",
+            barMaxWidth: 10,
+            name: "C",
+            roundCap: true,
+            color: "#ddd",
+            barGap: "-100%",
           },
           {
-            value: "31",
-            name: "6",
+            type: "gauge",
+            radius: "70%",
+            min: 0, //最小刻度
+            max: 100, //最大刻度
+            splitNumber: 10, //刻度数量
+            startAngle: 220,
+            endAngle: -40,
+            axisLabel: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                width: 0.5,
+                color: [[1, "rgba(0,0,0,0)"]],
+              },
+            }, //仪表盘轴线
+            axisLabel: {
+              show: false,
+            }, //刻度标签。
+            axisTick: {
+              show: true,
+              splitNumber: 5,
+              lineStyle: {
+                color: "#e3e4ea",
+                width: 0.5,
+              },
+              length: 3,
+            }, //刻度样式
+            splitLine: {
+              show: true,
+              length: 4,
+              lineStyle: {
+                color: "#e3e4ea",
+                width: 0.5,
+              },
+            }, //分隔线样式
+            detail: {
+              show: false,
+            },
+            pointer: {
+              show: false,
+            },
           },
           {
-            value: "30",
-            name: "R.A.M.H.S.U",
+            name: "point",
+            type: "scatter",
+            coordinateSystem: "polar",
+            barGap: "-100%",
+            zlevel: 0,
+            symbol: "circle",
+            symbolSize: 6,
+            itemStyle: {
+              normal: {
+                show: true,
+                color: "#fff",
+              },
+            },
+
+            data: [, percent],
           },
         ],
-      },
-    ];
+      };
+    },
+    showDialog() {
+      this.$refs.dialog.show();
+    },
+    detailAction(item) {
+      console.log("detailAction");
+    },
+    stateAction(item) {
+      console.log("stateAction");
+    },
+  },
+  created() {
+    this.level = parseInt(this.$route.params.level);
+    this.type = parseInt(this.$route.params.type);
+
+    this.getOrganizations();
+
     this.listHeader = [
       {
         label: "运行状态",
         align: "center",
         type: "image",
         getImage(item) {
-          return item.state == 0
+          return item.state == 1
             ? require("@/assets/imgs/ic_true.png")
             : require("@/assets/imgs/ic_failed.png");
         },
@@ -191,22 +394,6 @@ export default {
         prop: "system_name",
         align: "center",
       },
-      {
-        label: "初次申请状态",
-        align: "center",
-        getText(item) {
-          return ["未通过", "待审批", "通过"][(item.approve_state || 0) + 1];
-        },
-      },
-      {
-        label: "资源调整结果",
-        align: "center",
-        getText(item) {
-          return ["未通过", "待审批", "通过"][
-            (item.approve_update_state || 0) + 1
-          ];
-        },
-      },
       {
         label: "用户申请时间",
         prop: "apply_time",
@@ -220,17 +407,13 @@ export default {
         actionList: [
           {
             getLabel(item) {
-              return item.use_uid ? "已分配" : "分配";
-            },
-            callback: this.cloudAllot,
-            disabledRule(item) {
-              return item.use_uid;
+              return item.state == 1 ? "禁用" : "启用";
             },
+            callback: this.stateAction,
           },
         ],
       },
     ];
-    this.listData = [{}, {}, {}];
   },
 };
 </script>
@@ -239,4 +422,33 @@ export default {
 .organization_cloud_resource {
   height: 100%;
 }
+.dashboard_contaner {
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  margin-top: 20px;
+}
+.dashborad_list {
+  text-align: center;
+  margin: 0 25px;
+  font-size: 18px;
+}
+.dashboard_chart {
+  width: 136px;
+  height: 136px;
+}
+.dashboard_info {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-size: 14px;
+  line-height: 30px;
+  color: #8890a7;
+}
+.dashboard_info:nth-of-type(1) {
+  margin-top: -10px;
+}
+.dashboard_info > span:nth-of-type(2) {
+  color: #0d1847;
+}
 </style>
-- 
2.26.0