仪表盘数据，fix超市列表筛选，列表+滚动条，云资源详情

src/components/e-charts/dashboard.vue

@@ -7,35 +7,53 @@ import { graphic } from "echarts/lib/export";
 export default {
   props: {
     data: {
-      type: Array,
-      default: () => []
+      type: Object,
+      default: () => {
+        data = 40;
+        text = "模拟数据1.0";
+      }
+    },
+    dangerousValue: {
+      type: String,
+      default: ""
     }
   },
   data: () => ({
-    navList: [],
+    navList: []
   }),
-  mounted() {
-  },
+  mounted() {},
   methods: {
     dashboard() {
       let self = this;
       return {
-        title: {
-          text: "20%",
-          subtext: "sssss",
-          x: "center",
-          y: "center",
-          textStyle: {
-            fontSize: 26,
-            fontWeight: "normal",
-            color: ["#67828c"]
+        title: [
+          {
+            text: self.data.data + "{a|%}",
+            x: "center",
+            y: "center",
+            textStyle: {
+              fontSize: 36,
+              fontWeight: "lighter",
+              color: ["#67828c"],
+              rich: {
+                a: {
+                  fontSize: 14,
+                  padding: [0, 0, 4, 0]
+                }
+              }
+            }
           },
-          subtextStyle: {
-            color: "#67828c",
-            fontSize: 16,
-            align: "center"
+          {
+            text: self.data.text,
+            x: "center",
+            y: "58%",
+            textStyle: {
+              fontSize: 12,
+              fontWeight: "normal",
+              color: "#707693"
+            }
           }
-        },
+        ],
         angleAxis: {
           axisLine: {
             show: false
@@ -73,7 +91,7 @@ export default {
         series: [
           {
             type: "bar",
-            data: [, 40],
+            data: [, self.data.data],
             coordinateSystem: "polar",
             barMaxWidth: 10,
             z: 1,
@@ -81,10 +99,18 @@ export default {
             roundCap: true,
             itemStyle: {
               normal: {
-                color: new graphic.LinearGradient(0, 0, 0, 1, [
-                  { offset: 0, color: "#25bdb1" },
-                  { offset: 1, color: "#e7fdfc" }
-                ])
+                color:
+                  self.dangerousValue == "high"
+                    ? self.data.data >= 80
+                      ? "#e15260"
+                      : "#515fe7"
+                    : self.data.data > 75
+                    ? "#00cfc6"
+                    : self.data.data > 50
+                    ? "#54cefd"
+                    : self.data.data > 25
+                    ? "#54cefd"
+                    : "#25bdb1"
               }
             },
             barGap: "-100%"
@@ -126,7 +152,7 @@ export default {
               show: true,
               splitNumber: 5,
               lineStyle: {
-                color: "#a9aec0",
+                color: "#c9cee0",
                 width: 1
               },
               length: 4
@@ -135,7 +161,7 @@ export default {
               show: true,
               length: 6,
               lineStyle: {
-                color: "#a9aec0"
+                color: "#c9cee0"
               }
             }, //分隔线样式
             detail: {
@@ -160,7 +186,7 @@ export default {
               }
             },
 
-            data: [, 40]
+            data: [, self.data.data]
           }
         ]
       };

src/components/service-list/service_list.vue

@@ -154,7 +154,7 @@ export default {
     },
     url: { type: String, default: "" },
     name: { type: String, default: "" },
-    filterNmaes: {
+    filterNames: {
       type: Array,
       default: () => {
         [];
@@ -251,12 +251,19 @@ export default {
                 }
               ]
             });
+          } else {
+            this.$set(this.filterLists, 0, {
+              id: 110,
+              name: "",
+              prop: "",
+              childDomains: []
+            });
           }
           this.getShopFilter();
         }
       }
     },
-    filterNmaes: {
+    filterNames: {
       handler(val) {
         for (let i = 0; i < val.length; i++) {
           this.filterLists[i + 1].name = val[i];

src/components/shop-cloud/shop-cloud.vue

@@ -326,7 +326,7 @@
                           :stripe="true"
                           :datas="dataDiskList"
                           @primary-del="delItem"
-                          height="300"
+                          height="260"
                         ></table-um>
                       </el-form-item>
                     </el-col>

src/components/table/table-um.vue

@@ -63,6 +63,7 @@
         default-expand-all
         :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
         ref="cesTable"
+        class="table_scoller"
         :class="radius ? 'table_radius' : ''"
         :header-cell-class-name="headerCellClassName"
         v-cloak
@@ -853,6 +854,25 @@ em {
   border: 0;
   padding: 0;
 }
+.table_scoller .el-table__body-wrapper::-webkit-scrollbar {
+  /*滚动条整体样式*/
+  width: 16px; /*高宽分别对应横竖滚动条的尺寸*/
+  height: 1px;
+}
+.table_scoller .el-table__body-wrapper::-webkit-scrollbar-thumb {
+  /*滚动条里面小方块*/
+  border-radius: 8px;
+  /* background: #dde4ff; */
+  box-shadow: 8px 0 0 #bcc1d0 inset;
+  border: 4px solid rgba(0, 0, 0, 0);
+}
+.table_scoller .el-table__body-wrapper::-webkit-scrollbar-track {
+  /*滚动条里面轨道*/
+  border-radius: 8px;
+  /* background: #f4f4f4; */
+  box-shadow: 8px 0 0 #f8f8f8 inset;
+  border: 4px solid rgba(0, 0, 0, 0);
+}
 </style>
 <style scoped>
 .ces-table {

src/components/table/table-umhref.vue

@@ -43,7 +43,8 @@ export default {
 </script>
 <style scoped>
 .href {
-  color: #264dd9 !important;
+  color: #0f2683;
+  font-weight: 700;
   cursor: pointer;
 }
 </style>
\ No newline at end of file

src/pages/service_shop/shop_list.vue

@@ -5,7 +5,7 @@
         <service-shop-menu></service-shop-menu>
       </el-aside>
       <el-main>
-        <service-list :filterNmaes="filterNmaes" :name="name" :url="url" :urlFilter="urlFilter"></service-list>
+        <service-list :filterNames="filterNames" :name="name" :url="url" :urlFilter="urlFilter"></service-list>
       </el-main>
     </el-container>
   </div>
@@ -23,7 +23,7 @@ export default {
     urlFilter: "",
     url: "",
     name: "",
-    filterNmaes: []
+    filterNames: []
   }),
   mounted() {
     this.getVal(this.$route.path);
@@ -37,43 +37,43 @@ export default {
           this.name = "数据服务";
           this.urlFilter = "5";
           this.url = "/shop/sjfwDetail";
-          this.filterNmaes = ["数据服务类型", "数据领域", "数据来源机构"];
+          this.filterNames = ["数据服务类型", "数据领域", "数据来源机构"];
           break;
         case "space_time_service_list":
           this.name = "时空服务";
           this.urlFilter = "6";
           this.url = "/shop/skfwDetail";
-          this.filterNmaes = ["数据服务类型", "数据领域", "数据来源机构"];
+          this.filterNames = ["时空服务类型", "应用领域", "服务来源组织"];
           break;
         case "video_service_list":
           this.name = "视频服务";
           this.urlFilter = "7";
           this.url = "";
-          this.filterNmaes = [];
+          this.filterNames = [];
           break;
         case "perception_service_list":
           this.name = "感知服务";
           this.urlFilter = "10";
           this.url = "";
-          this.filterNmaes = [];
+          this.filterNames = [];
           break;
         case "comprehensive_app_list":
           this.name = "综合服务";
           this.urlFilter = "21";
           this.url = "/shop/zhfwDetail";
-          this.filterNmaes = ["数据服务类型", "数据领域", "数据来源机构"];
+          this.filterNames = ["服务类型", "应用领域", "服务来源组织"];
           break;
         case "app_store_list":
           this.name = "应用商店";
           this.urlFilter = "app";
           this.url = "/shop/yysdDetail";
-          this.filterNmaes = ["应用类型", "应用领域", "应用来源机构"];
+          this.filterNames = ["应用类型", "应用领域", "应用来源机构"];
           break;
         default:
           this.name = "";
           this.urlFilter = "";
           this.url = "";
-          this.filterNmaes = [];
+          this.filterNames = [];
           break;
       }
     }

src/request/api/workbench.js

@@ -27,6 +27,27 @@ const workbench = {
     getAppParams(params) {
         return axios.get(`/apaas/hubApi/market/values/${params.app_id}`)
     },
+
+    // get cloud resources details
+    getCloudDetail(params) {
+        return axios.get(`/apaas/service/v3/resource/user/apply/approvedDetail?type=${params.type}&applyid=${params.applyId}`)
+    },
+    // cloud resource approval
+    setCloudApproval(params) {
+        return axios.put(`/apaas/service/v3/resource/apply/approve?apply_id=${params.applyId}&apply_state=${params.applyState}&apply_type=${params.applyType}&cloud_id=${params.applyCloudId}`, params)
+    },
+    // cloud resource allocation
+    setCloudAllocation(params) {
+        return axios.put(`/apaas/service/v3/resource/apply/distribution?id=${params.id}&user_id=${params.userId}`)
+    },
+    // cloud resource delete
+    deleteCloud(params) {
+        return axios.delete(`/apaas/service/v3/resource/apply/remove?id=${params.id}`)
+    },
+    // cloud resource disabled
+    disabledCloud(params) {
+        return axios.put(`/apaas/service/v3/resource/apply/disable?id=${params.id}&type=${params.type}`)
+    },
 }
 
 export default workbench;

src/request/http.js

@@ -56,7 +56,7 @@ const errorHandle = (status, other) => {
 }
 
 // 创建axios实例
-var instance = axios.create({ timeout: 1000 * 12 });
+var instance = axios.create({ timeout: 1000 * 30 });
 // 设置post请求头
 instance.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
 /**