diff --git a/src/assets/imgs/bg_block.png b/src/assets/imgs/bg_block.png
new file mode 100644
index 0000000000000000000000000000000000000000..558b93e95bacd2055426dd9a8b73a4d31a5f5563
Binary files /dev/null and b/src/assets/imgs/bg_block.png differ
diff --git a/src/assets/imgs/bg_block_hov.png b/src/assets/imgs/bg_block_hov.png
new file mode 100644
index 0000000000000000000000000000000000000000..94bd95eabebb7c474d9f40bb81837a93f7277ce1
Binary files /dev/null and b/src/assets/imgs/bg_block_hov.png differ
diff --git a/src/assets/imgs/bg_mblock.png b/src/assets/imgs/bg_mblock.png
new file mode 100644
index 0000000000000000000000000000000000000000..2d3276b3ec05a5f8092c13d9fe502f404434bf9b
Binary files /dev/null and b/src/assets/imgs/bg_mblock.png differ
diff --git a/src/assets/imgs/ic_updata_cloud.png b/src/assets/imgs/ic_updata_cloud.png
new file mode 100644
index 0000000000000000000000000000000000000000..10a1f57138fc7a15bac41f4ece1992297d497eff
Binary files /dev/null and b/src/assets/imgs/ic_updata_cloud.png differ
diff --git a/src/assets/imgs/tool_yingyong.png b/src/assets/imgs/tool_yingyong.png
new file mode 100644
index 0000000000000000000000000000000000000000..422bd2d82fa0347fbc8bda64065a878d5d914e65
Binary files /dev/null and b/src/assets/imgs/tool_yingyong.png differ
diff --git a/src/components/app-card.vue b/src/components/app-card.vue
new file mode 100644
index 0000000000000000000000000000000000000000..b3b899c225023978102dd7231cde849e8aeb8689
--- /dev/null
+++ b/src/components/app-card.vue
@@ -0,0 +1,122 @@
+<template>
+  <div class="app_card">
+    <a class="remove_btn" @click.prevent="deleteAction">
+      <i class="el-icon-close"></i>
+    </a>
+    <div class="app_card-icon">
+      <el-avatar shape="square" :size="56" fit="cover" :src="data.img" />
+    </div>
+    <div class="app_card-info">
+      <p class="app_card-name text_clip" v-text="data.name"></p>
+      <p class="app_card-version text_clip" v-text="data.version"></p>
+    </div>
+    <div class="app_card-action" v-if="cardType == 0">
+      <el-button type="primary" plain @click="deploymentAction">
+        一键部署
+      </el-button>
+    </div>
+    <p class="app_card-text" v-if="cardType == 1">
+      <span>
+        <i class="el-icon-time"></i>
+        <span>上线时间：</span>
+      </span>
+      <span class="text_clip" v-text="data.time"></span>
+    </p>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    data: {
+      type: Object,
+      default: {},
+    },
+    cardType: {
+      type: [String, Number],
+      default: 0,
+    },
+  },
+  methods: {
+    deploymentAction() {
+      this.$emit("deployment-action", this.data);
+    },
+    deleteAction() {
+      this.$emit("delete-action", this.data);
+    },
+  },
+};
+</script>
+
+<style scoped>
+.app_card {
+  width: calc(20% - 36px);
+  background-image: url(../assets/imgs/bg_block.png);
+  background-size: 100% 100%;
+  padding: 33px 25px 34px;
+  box-sizing: border-box;
+  margin: 0 18px 38px;
+  display: inline-flex;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+  align-items: flex-start;
+  position: relative;
+}
+.app_card:hover {
+  background-image: url(../assets/imgs/bg_block_hov.png);
+}
+.app_card > .remove_btn {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  font-size: 20px;
+  color: #8890a7;
+  cursor: pointer;
+}
+.app_card > .app_card-icon {
+  margin-right: 18px;
+}
+.app_card > .app_card-info {
+  width: calc(100% - 56px - 20px);
+}
+.app_card-info > .app_card-name {
+  font-size: 18px;
+  line-height: 32px;
+  color: #0d1847;
+}
+.app_card-info > .app_card-version {
+  font-size: 14px;
+  line-height: 25px;
+  color: #8890a7;
+  margin-top: 5px;
+}
+.app_card > .app_card-action {
+  width: 100%;
+  text-align: center;
+  margin: 34px 0 5px;
+}
+.app_card-action > .el-button {
+  width: 100%;
+}
+.app_card-text {
+  width: 100%;
+  font-size: 14px;
+  color: #8890a7;
+  line-height: 25px;
+  margin-top: 19px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.app_card-text > span:nth-child(1) {
+  flex-shrink: 0;
+}
+</style>
+
+<style>
+.app_card-action > .el-button--primary.is-plain {
+  background-color: #d0d5e7;
+  border-color: #a5afd6;
+  color: #0f2683;
+}
+</style>
diff --git a/src/components/app-list.vue b/src/components/app-list.vue
new file mode 100644
index 0000000000000000000000000000000000000000..5aa020de8a775b72a7d7d41eae919573dbd42d80
--- /dev/null
+++ b/src/components/app-list.vue
@@ -0,0 +1,52 @@
+<template>
+  <div class="app_list">
+    <app-card
+      v-for="(item, index) in data"
+      :key="'app_card_' + index"
+      :data="item"
+      :card-type="cardType"
+      @deployment-action="deploymentAction"
+      @delete-action="deleteAction"
+    ></app-card>
+  </div>
+</template>
+
+<script>
+import appCard from "./app-card";
+
+export default {
+  components: {
+    appCard,
+  },
+  props: {
+    data: {
+      type: Array,
+      default: [],
+    },
+    cardType: {
+      type: [String, Number],
+      default: 0,
+    },
+  },
+  methods: {
+    deploymentAction(item) {
+      this.$emit("deployment-action", item);
+    },
+    deleteAction(item) {
+      this.$emit("delete-action", item);
+    },
+  },
+};
+</script>
+
+<style scoped>
+.app_list {
+  margin: 20px -25px 0;
+  padding: 30px 0 0;
+  border-top: 1px solid #e3e5ef;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+  align-items: flex-start;
+}
+</style>
diff --git a/src/components/side-nav-bar.vue b/src/components/side-nav-bar.vue
index 42517c65a464d7420b80363f8d1cc5556bbaf63c..f4e250873549f5d9f875082ac0c0ff469705393d 100644
--- a/src/components/side-nav-bar.vue
+++ b/src/components/side-nav-bar.vue
@@ -1,11 +1,7 @@
 <template>
   <div class="side_nav_bar">
     <h3 class="side_nav_bar_title" @click="titleAction">
-      <img
-        :src="require('../assets/imgs/' + imgSrc + '.png')"
-        width="20"
-        style="margin-right: 10px;"
-      />
+      <img :src="titleIcon" width="20" style="margin-right: 10px;" />
       <span v-text="title"></span>
     </h3>
     <ul class="side_nav_bar_list">
@@ -31,6 +27,10 @@ export default {
       type: String,
       default: () => "我的服务",
     },
+    titleIcon: {
+      type: String,
+      default: () => require("../assets/imgs/tool_fuwu.png"),
+    },
     titlePath: {
       type: String,
       default: () => "",
diff --git a/src/components/table-filter.vue b/src/components/table-filter.vue
new file mode 100644
index 0000000000000000000000000000000000000000..877974990000a00f636f25bff2a49f28c5f05ae2
--- /dev/null
+++ b/src/components/table-filter.vue
@@ -0,0 +1,204 @@
+<template>
+  <ul
+    class="ces_filter_container"
+    ref="filterContainer"
+    v-if="filterList && filterData && filterToggle"
+    v-show="show"
+  >
+    <li v-for="(item, index) in filterList" :key="'f_l_' + index">
+      <div class="ces_filter_name">
+        <span v-text="item.name + '：'"></span>
+      </div>
+      <ul class="ces_filter_data">
+        <li
+          v-for="(v, i) in item.data"
+          :key="'f_l_d_' + index + '_' + i"
+          v-show="filterToggle[item.prop] || i < filterLength"
+          :style="{
+            'margin-top': i < filterLength ? '0' : '10px',
+          }"
+        >
+          <a
+            :class="{ current: isCurrentFilter(item.prop, v) }"
+            @click.prevent="selectFilter(item.prop, v)"
+            v-text="v"
+          ></a>
+        </li>
+
+        <div
+          class="toggle_bar"
+          v-if="item.data.length > filterLength"
+          @click="filterToggleAction(item.prop)"
+        >
+          <span>{{ filterToggle[item.prop] ? "收起" : "展开" }}</span>
+          <i
+            :class="
+              filterToggle[item.prop]
+                ? 'el-icon-caret-bottom'
+                : 'el-icon-caret-top'
+            "
+          ></i>
+        </div>
+      </ul>
+    </li>
+  </ul>
+</template>
+
+<script>
+export default {
+  props: {
+    filterList: {
+      type: Array,
+      default: [],
+    },
+    show: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data: () => ({
+    filterData: null, // 筛选条件
+    filterToggle: null, // 控制筛选条件的展开和收起
+    filterLength: 0, // 每行最多可容纳多少个过滤条件
+  }),
+  watch: {
+    filterList: {
+      handler(val) {
+        this.initFilterData();
+      },
+      deep: true,
+    },
+    show(value) {
+      if (value) {
+        this.getFilterLength();
+      }
+    },
+  },
+  methods: {
+    initFilterData() {
+      if (this.filterList && this.filterList.length) {
+        this.filterData = {};
+        this.filterToggle = {};
+        this.filterList.forEach((item) => {
+          this.$set(this.filterData, item.prop, []);
+          this.$set(this.filterToggle, item.prop, false);
+        });
+      }
+    },
+    getFilterLength() {
+      if (this.show) {
+        this.$nextTick(() => {
+          let width =
+            this.$refs.filterContainer.getBoundingClientRect().width -
+            20 * 2 - // 两侧padding
+            100 - // 左侧标题
+            20 - // 距左侧标题的边距
+            110; // 折叠按钮的宽度
+
+          this.filterLength = Math.floor(width / 110);
+          // console.log("每行最多可容纳" + this.filterLength + "个filter");
+        });
+      }
+    },
+    filterToggleAction(prop) {
+      this.$set(this.filterToggle, prop, !this.filterToggle[prop]);
+    },
+    isCurrentFilter(prop, filter) {
+      return (
+        this.filterData &&
+        this.filterData[prop] &&
+        this.filterData[prop].indexOf(filter) > -1
+      );
+    },
+    selectFilter(prop, filter) {
+      if (this.isCurrentFilter(prop, filter)) {
+        this.filterData[prop].splice(this.filterData[prop].indexOf(filter), 1);
+      } else {
+        this.filterData[prop].push(filter);
+      }
+
+      this.$emit("filter-change", this.filterData);
+    },
+  },
+  mounted() {
+    this.initFilterData();
+
+    window.addEventListener("resize", this.getFilterLength);
+  },
+  destroyed() {
+    window.removeEventListener("resize", this.getFilterLength);
+  },
+};
+</script>
+
+<style scoped>
+.ces_filter_container {
+  padding: 14px 19px;
+  border: 1px solid #e3e5ef;
+  border-radius: 6px;
+  margin: 0 0 10px;
+}
+.ces_filter_container > li {
+  display: flex;
+  justify-content: flex-start;
+  align-items: flex-start;
+  padding-top: 12px;
+}
+.ces_filter_name {
+  width: 100px;
+  height: 30px;
+  flex-shrink: 0;
+  text-align: right;
+  font-size: 14px;
+  line-height: 30px;
+  font-weight: bold;
+  color: #1a2236;
+}
+.ces_filter_data {
+  width: calc(100% - 120px);
+  min-height: 42px;
+  padding-right: 110px;
+  box-sizing: border-box;
+  margin-left: 20px;
+  flex-grow: 1;
+  display: inline-flex;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+  align-items: flex-start;
+  padding-bottom: 11px;
+  position: relative;
+}
+.ces_filter_container > li:not(:last-child) > .ces_filter_data {
+  border-bottom: 1px solid #e9ecf3;
+}
+.ces_filter_data > li {
+  flex-shrink: 0;
+  padding-right: 20px;
+}
+.ces_filter_data > .toggle_bar {
+  height: 30px;
+  position: absolute;
+  top: 0;
+  right: 0;
+  font-size: 14px;
+  line-height: 30px;
+  color: #0f2683;
+  cursor: pointer;
+}
+.ces_filter_data > li > a {
+  display: block;
+  height: 30px;
+  width: 90px;
+  box-sizing: border-box;
+  border-radius: 12px;
+  text-align: center;
+  cursor: pointer;
+  font-size: 14px;
+  line-height: 30px;
+  color: #58617a;
+}
+.ces_filter_data > li > a.current {
+  background-color: #515fe7;
+  color: #f4f7fc;
+}
+</style>
diff --git a/src/components/table-um.vue b/src/components/table-um.vue
index 1aa76d41bda624fdfc59b7f857f5b4fca55bf040..b20155a10365b19d05aa3b9131fd7e6d83de4c27 100644
--- a/src/components/table-um.vue
+++ b/src/components/table-um.vue
@@ -7,7 +7,7 @@
           v-if="filterList && filterList.length"
           size="small"
           style="float: left;"
-          @click="filterAction"
+          @click="showFliterList = !showFliterList"
         >
           {{ showFliterList ? "收起" : "筛选" }}
           <i
@@ -30,53 +30,17 @@
           prefix-icon="el-icon-search"
           v-if="searchShow"
           v-model="search"
-          placeholder="请输入账号、中文名"
-          style="max-width:220px;"
-          size="mini"
+          :placeholder="inputPlaceholder"
+          style="width:180px;"
           @input="searchVal"
           class="ces_toolbar_inp"
         ></el-input>
       </div>
-      <ul
-        class="ces_filter_container"
-        ref="filterContainer"
-        v-if="filterList && filterData && filterToggle"
-        v-show="showFliterList"
-      >
-        <li v-for="(item, index) in filterList" :key="'f_l_' + index">
-          <div class="ces_filter_name">
-            <span v-text="item.name + '：'"></span>
-          </div>
-          <ul class="ces_filter_data">
-            <li
-              v-for="(v, i) in item.data"
-              :key="'f_l_d_' + index + '_' + i"
-              v-show="filterToggle[item.prop] || i < filterLength"
-            >
-              <a
-                :class="{ current: isCurrentFilter(item.prop, v) }"
-                @click.prevent="selectFilter(item.prop, v)"
-                v-text="v"
-              ></a>
-            </li>
-
-            <div
-              class="toggle_bar"
-              v-if="item.data.length > filterLength"
-              @click="filterToggleAction(item.prop)"
-            >
-              <span>{{ filterToggle[item.prop] ? "收起" : "展开" }}</span>
-              <i
-                :class="
-                  filterToggle[item.prop]
-                    ? 'el-icon-caret-bottom'
-                    : 'el-icon-caret-top'
-                "
-              ></i>
-            </div>
-          </ul>
-        </li>
-      </ul>
+      <v-apaas-table-filter
+        :show="showFliterList"
+        :filter-list="filterList"
+        @filter-change="filterChange"
+      ></v-apaas-table-filter>
       <el-table
         :data="selectedTabsPage"
         :size="size"
@@ -139,6 +103,28 @@
                   </em>
                 </em>
 
+                <em v-if="btn.type == 'goods-shelf'">
+                  <em
+                    v-if="scope.row.state == 0"
+                    class="cur_pointer"
+                    style="color: #0f2683"
+                    @click="handleClick(btn.type, scope.row)"
+                  >
+                    上架
+                  </em>
+                  <em
+                    v-if="scope.row.state == 1"
+                    class="cur_pointer"
+                    style="color: #0f2683"
+                    @click="handleClick(btn.type, scope.row)"
+                  >
+                    下架
+                  </em>
+                  <em v-if="scope.row.state == 2">
+                    下架
+                  </em>
+                </em>
+
                 <em
                   class="cur_pointer"
                   v-else-if="btn.label == '删除' && btn.local"
@@ -265,12 +251,14 @@ import tableSelect from "@/components/table-select";
 import helper from "@/services/helper";
 import DConfirm from "@/components/dialog-remove";
 import tableUmhref from "@/components/table-umhref";
+import tableFilter from "@/components/table-filter";
 export default {
   components: {
     "v-apaas-table-input": tableInput,
     "v-apaas-table-select": tableSelect,
     "v-apaas-table-umhref": tableUmhref,
     "d-confirm": DConfirm,
+    "v-apaas-table-filter": tableFilter,
   },
   props: {
     // 表格型号：mini,medium,small
@@ -297,6 +285,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    inputPlaceholder: {
+      type: String,
+      default: "请输入账号、中文名",
+    },
     url: {
       type: String,
       default: "",
@@ -401,19 +393,10 @@ export default {
       search: "",
       times: null,
       showFliterList: false,
-      filterData: null, // 筛选条件
-      filterToggle: null, // 控制筛选条件的展开和收起
-      filterLength: 0, // 每行最多可容纳多少个过滤条件
     };
   },
   mounted() {
     this.getDataFromApiSync();
-    this.initFilterData();
-
-    window.addEventListener("resize", this.getFilterLength);
-  },
-  destroyed() {
-    window.removeEventListener("resize", this.getFilterLength);
   },
   watch: {
     refreshInit: {
@@ -429,12 +412,6 @@ export default {
       },
       deep: true,
     },
-    filterList: {
-      handler(val) {
-        this.initFilterData();
-      },
-      deep: true,
-    },
   },
   methods: {
     //本地删除
@@ -561,52 +538,8 @@ export default {
     getTableData() {
       return this.selectedTabsPage;
     },
-    isCurrentFilter(prop, filter) {
-      return (
-        this.filterData &&
-        this.filterData[prop] &&
-        this.filterData[prop].indexOf(filter) > -1
-      );
-    },
-    filterAction() {
-      this.showFliterList = !this.showFliterList;
-      this.getFilterLength();
-    },
-    getFilterLength() {
-      if (this.showFliterList) {
-        this.$nextTick(() => {
-          let width =
-            this.$refs.filterContainer.getBoundingClientRect().width -
-            20 * 2 - // 两侧padding
-            100 - // 左侧标题
-            20 - // 距左侧标题的边距
-            110; // 折叠按钮的宽度
-
-          this.filterLength = Math.floor(width / 110);
-          // console.log("每行最多可容纳" + this.filterLength + "个filter");
-        });
-      }
-    },
-    filterToggleAction(prop) {
-      this.$set(this.filterToggle, prop, !this.filterToggle[prop]);
-    },
-    initFilterData() {
-      if (this.filterList && this.filterList.length) {
-        this.filterData = {};
-        this.filterToggle = {};
-        this.filterList.forEach((item) => {
-          this.$set(this.filterData, item.prop, []);
-          this.$set(this.filterToggle, item.prop, false);
-        });
-      }
-    },
-    selectFilter(prop, filter) {
-      if (this.isCurrentFilter(prop, filter)) {
-        this.filterData[prop].splice(this.filterData[prop].indexOf(filter), 1);
-      } else {
-        this.filterData[prop].push(filter);
-      }
-      console.log(this.filterData);
+    filterChange(filter) {
+      console.log(filter);
     },
   },
 };
@@ -761,9 +694,6 @@ em {
 .ces_toolbar .ces_toolbar_btn {
   margin-right: 10px;
 }
-.ces_toolbar .ces_toolbar_inp {
-  margin-right: 10px;
-}
 .ces-pagination {
   margin-top: 20px;
   padding-bottom: 20px;
@@ -796,75 +726,6 @@ em {
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-.ces_filter_container {
-  background-color: #f7f8f9;
-  padding: 14px 19px;
-  border: 1px solid #e3e5ef;
-  border-radius: 6px;
-  margin: 0 0 10px;
-}
-.ces_filter_container > li {
-  display: flex;
-  justify-content: flex-start;
-  align-items: flex-start;
-  padding-top: 12px;
-}
-.ces_filter_name {
-  width: 100px;
-  height: 30px;
-  flex-shrink: 0;
-  text-align: right;
-  font-size: 14px;
-  line-height: 30px;
-  font-weight: bold;
-  color: #1a2236;
-}
-.ces_filter_data {
-  width: calc(100% - 120px);
-  padding-right: 110px;
-  box-sizing: border-box;
-  margin-left: 20px;
-  flex-grow: 1;
-  display: inline-flex;
-  flex-wrap: wrap;
-  justify-content: flex-start;
-  align-items: flex-start;
-  padding-bottom: 11px;
-  position: relative;
-}
-.ces_filter_container > li:not(:last-child) > .ces_filter_data {
-  border-bottom: 1px solid #e9ecf3;
-}
-.ces_filter_data > li {
-  flex-shrink: 0;
-  padding-right: 20px;
-}
-.ces_filter_data > .toggle_bar {
-  height: 30px;
-  position: absolute;
-  top: 0;
-  right: 0;
-  font-size: 14px;
-  line-height: 30px;
-  color: #0f2683;
-  cursor: pointer;
-}
-.ces_filter_data > li > a {
-  display: block;
-  height: 30px;
-  width: 90px;
-  box-sizing: border-box;
-  border-radius: 12px;
-  text-align: center;
-  cursor: pointer;
-  font-size: 14px;
-  line-height: 30px;
-  color: #58617a;
-}
-.ces_filter_data > li > a.current {
-  background-color: #515fe7;
-  color: #f4f7fc;
-}
 .ces_page_item {
   display: flex;
   justify-content: flex-end;
diff --git a/src/pages/fwglList.vue b/src/pages/fwglList.vue
index cd6962d793b814ac986ea7787b531cfed670662f..5b29afdf5d6abf5e1097bdd4a29b5a04631a7bcc 100644
--- a/src/pages/fwglList.vue
+++ b/src/pages/fwglList.vue
@@ -6,7 +6,7 @@
         <el-breadcrumb-item>{{ pathName }}</el-breadcrumb-item>
       </el-breadcrumb>
     </div>
-    <div class="table_container">
+    <div class="main_container">
       <ces-table
         class="r_yhgl_table"
         size="mini"
@@ -392,10 +392,9 @@ export default {
           },
         ];
       }
-
+      
       // Error
       else {
-        this.headers = [];
         throw Error("The page doesn't exist");
       }
     },
@@ -468,14 +467,14 @@ export default {
 .list_container {
   padding: 0 20px;
 }
-.table_container {
+.main_container {
   height: calc(100% - 75px);
   padding: 15px 20px;
   border-radius: 10px;
   overflow: hidden;
   background-color: #fff;
 }
-.table_container .ces-table-page {
+.main_container .ces-table-page {
   margin-top: 42px;
 }
 </style>
diff --git a/src/pages/yygl.vue b/src/pages/yygl.vue
index 3e94daac94e1ea29a749fc4c680d9011dcd2890e..d11411402e6e7a8e7ef322396c770bed60f27e1e 100644
--- a/src/pages/yygl.vue
+++ b/src/pages/yygl.vue
@@ -2,6 +2,8 @@
   <div class="yygl_container">
     <side-nav-bar
       :nav-list="navList"
+      title="我的应用"
+      :title-icon="require('../assets/imgs/tool_yingyong.png')"
       :title-path="navList[0] && navList[0].path"
     ></side-nav-bar>
     <div class="main_container">
diff --git a/src/pages/yyglList.vue b/src/pages/yyglList.vue
index 863d78b1eff51a08774e2553f22edb2022f911b5..c5fbfeb36c8173eb13fb81626f949cd826c3deec 100644
--- a/src/pages/yyglList.vue
+++ b/src/pages/yyglList.vue
@@ -6,19 +6,229 @@
         <el-breadcrumb-item>{{ pathName }}</el-breadcrumb-item>
       </el-breadcrumb>
     </div>
-    <div class="table_container"></div>
+    <div class="main_container card" v-if="listType == 'card'">
+      <div class="filter_contaner">
+        <div class="filter_action">
+          <el-button
+            v-if="filterList && filterList.length"
+            size="small"
+            @click="showFliterList = !showFliterList"
+          >
+            {{ showFliterList ? "收起" : "筛选" }}
+            <i
+              class="el-icon--right"
+              :class="
+                showFliterList ? 'el-icon-caret-bottom' : 'el-icon-caret-top'
+              "
+            ></i>
+          </el-button>
+          <el-input
+            v-model="search"
+            prefix-icon="el-icon-search"
+            placeholder="请输入应用名称"
+            style="width:180px;"
+            @input="searchChange"
+            class="ces_toolbar_inp"
+          ></el-input>
+        </div>
+        <table-filter
+          :show="showFliterList"
+          :filter-list="filterList"
+          @filter-change="filterChange"
+          style="margin-top: 5px;"
+        ></table-filter>
+      </div>
+      <app-list
+        :data="appList"
+        :card-type="cardType"
+        @deployment-action="deploymentAction"
+        @delete-action="deleteAction"
+      ></app-list>
+      <div class="flex_grow"></div>
+      <comments-pagination
+        :total="100"
+        :page-sizes="pageSizes"
+        :page-size="pageSize"
+        :current-page="currentPage"
+        @size-change="changePageSize"
+        @current-change="changeCurrentPage"
+      ></comments-pagination>
+    </div>
+    <div class="main_container" v-if="listType == 'table'">
+      <ces-table
+        class="r_yhgl_table"
+        size="mini"
+        url="tableData"
+        input-placeholder="请输入应用名称"
+        empty-text="暂时没数据"
+        :detailsUrl="detailsUrl"
+        :border="false"
+        :headers="headers"
+        :searchShow="true"
+        :autoAdd="false"
+        :stripe="true"
+        :pageSizeShow="true"
+        :filterList="filterList"
+        :isIndex="false"
+        @action-approval="approvalItem"
+        @action-delete="deleteItem"
+        @action-edit="editItem"
+        @off-line="offLine"
+        @goods-shelf="goodsShelf"
+        style="margin-top: 44px;"
+      ></ces-table>
+    </div>
+    <dialog-action
+      ref="myConfirm"
+      :confirm-options="confirmOptions"
+    ></dialog-action>
   </div>
 </template>
 
 <script>
+import tableFilter from "@/components/table-filter";
+import appList from "@/components/app-list";
 import cesTable from "@/components/table-um";
 import dialogAction from "@/components/dialog-action";
+import commentsPagination from "@/components/comments-pagination";
 import { mapState } from "vuex";
 
 export default {
+  components: {
+    tableFilter,
+    appList,
+    cesTable,
+    dialogAction,
+    commentsPagination,
+  },
   data: () => ({
     level: 0, // 用户等级
     type: 0, // 访问的页面
+    listType: "",
+    cardType: "",
+    showFliterList: false,
+    filterList: [
+      {
+        name: "在线状态",
+        prop: "zxzt",
+        data: ["平台应用", "开发者应用", "未上架"],
+      },
+      {
+        name: "应用类型",
+        prop: "yylx",
+        data: ["基础工具", "通用工具", "业务应用"],
+      },
+      {
+        name: "业务领域",
+        prop: "ywly",
+        data: [
+          "公安应用",
+          "应急应用",
+          "政务服务应用",
+          "金融应用",
+          "交通应用",
+          "旅游应用",
+        ],
+      },
+      {
+        name: "是否支持开发",
+        prop: "sfzckf",
+        data: ["全部", "支持开发", "不支持开发"],
+      },
+    ],
+    appList: [
+      {
+        id: 1000001,
+        img:
+          "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
+        name: "mapvideos",
+        version: "V2.0",
+        time: "2019-04-11 12:50:30",
+      },
+      {
+        id: 1000002,
+        img:
+          "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
+        name: "语音识别",
+        version: "V2.0",
+        time: "2019-04-11 12:50:30",
+      },
+      {
+        id: 1000003,
+        img:
+          "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
+        name: "轨迹绘制",
+        version: "V2.0",
+        time: "2019-04-11 12:50:30",
+      },
+      {
+        id: 1000004,
+        img:
+          "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
+        name: "轨迹绘制",
+        version: "V2.1",
+        time: "2019-04-11 12:50:30",
+      },
+      {
+        id: 1000005,
+        img:
+          "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
+        name: "轨迹绘制",
+        version: "V2.2",
+        time: "2019-04-11 12:50:30",
+      },
+      {
+        id: 1000006,
+        img:
+          "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
+        name: "轨迹绘制",
+        version: "V2.3",
+        time: "2019-04-11 12:50:30",
+      },
+      {
+        id: 1000007,
+        img:
+          "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
+        name: "轨迹绘制",
+        version: "V2.4",
+        time: "2019-04-11 12:50:30",
+      },
+      {
+        id: 100000,
+        img:
+          "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
+        name: "轨迹绘制",
+        version: "V2.5",
+        time: "2019-04-11 12:50:30",
+      },
+      {
+        id: 1000009,
+        img:
+          "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
+        name: "轨迹绘制",
+        version: "V2.6",
+        time: "2019-04-11 12:50:30",
+      },
+      {
+        id: 1000010,
+        img:
+          "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
+        name: "轨迹绘制",
+        version: "V2.7",
+        time: "2019-04-11 12:50:30",
+      },
+    ],
+    search: "",
+    pageSizes: [10, 50, 100],
+    pageSize: 10,
+    currentPage: 1,
+    confirmOptions: {
+      title: "",
+      message: "",
+      btnCancelText: "",
+      btnSubmitText: "",
+      item: null,
+    },
   }),
   computed: {
     ...mapState({
@@ -27,31 +237,324 @@ export default {
     pathName() {
       return this.yyglNav[this.level][this.type];
     },
+    detailsUrl() {
+      let url = "";
+
+      if (this.level == 0 && this.type == 1) {
+        url = `/fwgl/${this.level}/${this.type}/applyserviceedit/`;
+      } else {
+        url = `/fwgl/${this.level}/${this.type}/servicedetail/`;
+      }
+
+      return url;
+    },
   },
-  components: {
-    cesTable,
-    dialogAction,
+  methods: {
+    searchChange(value) {
+      console.log(value);
+    },
+    filterChange(filter) {
+      console.log(filter);
+    },
+    deploymentAction(item) {
+      console.log("deployment " + item.name);
+    },
+    deleteAction(item) {
+      if (this.cardType === 0) {
+        this.confirmOptions.title = "删除提示";
+        this.confirmOptions.message =
+          "您需要先进行应用商店下架申请，应用处于下架状态时才能进行删除操作。";
+        this.confirmOptions.btnCancelText = "";
+        this.confirmOptions.btnSubmitText = "";
+        this.confirmOptions.confirmSubmit = () => {
+          console.log("deleteItem - " + item.name);
+          this.$refs.myConfirm.hideModel();
+        };
+      } else if (this.cardType === 1) {
+        this.confirmOptions.title = "是否删除部署的应用";
+        this.confirmOptions.message =
+          "该操作会导致正在调用该应用的用户被迫终止对应用的调用，删除前需向正在调用该应用的用户发送通知，自通知发送之日起，2日后应用将被删除。";
+        this.confirmOptions.btnCancelText = "";
+        this.confirmOptions.btnSubmitText = "发送通知";
+        this.confirmOptions.confirmSubmit = () => {
+          console.log("deleteItem - " + item.name);
+          this.$refs.myConfirm.hideModel();
+        };
+      }
+
+      this.$refs.myConfirm.showModel();
+    },
+    changePageSize(value) {
+      this.pageSize = value;
+      this.currentPage = 1;
+    },
+    changeCurrentPage(value) {
+      this.currentPage = value;
+    },
+    approvalItem(item) {
+      console.log("approval --- " + item.id);
+    },
+    deleteItem(item) {
+      console.log("delete --- " + item.id);
+    },
+    editItem(item) {
+      console.log("edit --- " + item.id);
+      /* this.$router.push(
+        `/fwgl/${this.level}/${this.type}/serviceedit/${item.id}`
+      ); */
+    },
+    offLine(item) {
+      console.log("off line --- " + item.id);
+    },
+    goodsShelf(item) {
+      console.log("goods shelf", item.state);
+    },
   },
-  methods: {},
   created() {
     this.level = parseInt(this.$route.params.level);
     this.type = parseInt(this.$route.params.type);
+
+    let level = this.level;
+    let type = this.type;
+
+    // 普通用户 --- 应用仓库 card列表形式
+    if (level === 0 && type === 0) {
+      this.listType = "card";
+      this.cardType = 0;
+    }
+    // 普通用户 --- 我部署的应用
+    else if (level === 0 && type === 1) {
+      this.listType = "card";
+      this.cardType = 1;
+    }
+    // 普通用户 --- 申请的应用 card列表形式
+    else if (level === 0 && type === 2) {
+      this.listType = "table";
+
+      this.headers = [
+        { label: "应用名称", prop: "name", type: "href", align: "left" },
+        { label: "应用版本", prop: "date", type: "", align: "center" },
+        { label: "应用类型", prop: "address", type: "", align: "center" },
+        { label: "业务领域", prop: "address", type: "", align: "center" },
+        { label: "在线区域", prop: "address", type: "", align: "center" },
+        { label: "申请类型", prop: "address", type: "", align: "center" },
+        { label: "申请时间", prop: "address", type: "", align: "center" },
+        { label: "申请状态", prop: "address", type: "", align: "center" },
+      ];
+    }
+    // 普通用户 --- 审批的应用
+    else if (level === 0 && type === 3) {
+      this.listType = "table";
+
+      this.headers = [
+        { label: "应用名称", prop: "name", type: "href", align: "left" },
+        { label: "应用版本", prop: "date", type: "", align: "center" },
+        { label: "应用类型", prop: "address", type: "", align: "center" },
+        { label: "业务领域", prop: "address", type: "", align: "center" },
+        { label: "在线区域", prop: "address", type: "", align: "center" },
+        { label: "申请类型", prop: "address", type: "", align: "center" },
+        { label: "审批时间", prop: "address", type: "", align: "center" },
+        { label: "审批状态", prop: "address", type: "", align: "center" },
+        {
+          label: "操作",
+          type: "Button",
+          align: "center",
+          width: 160,
+          btnList: [
+            {
+              type: "action-approval",
+              label: "审批",
+              line: "|",
+            },
+            {
+              type: "action-delete",
+              label: "删除",
+            },
+          ],
+        },
+      ];
+    }
+
+    // 组织管理员 --- 应用仓库管理
+    else if (level === 1 && type === 0) {
+      this.listType = "table";
+      this.headers = [
+        { label: "应用名称", prop: "name", type: "href", align: "left" },
+        { label: "应用版本", prop: "date", type: "", align: "center" },
+        { label: "应用类型", prop: "address", type: "", align: "center" },
+        { label: "业务领域", prop: "address", type: "", align: "center" },
+        { label: "在线状态", prop: "address", type: "", align: "center" },
+        { label: "创建时间", prop: "address", type: "", align: "center" },
+        {
+          label: "操作",
+          type: "Button",
+          align: "center",
+          width: 160,
+          btnList: [
+            {
+              type: "goods-shelf",
+            },
+          ],
+        },
+      ];
+    }
+    // 组织管理员 --- 部署的应用
+    else if (level === 1 && type === 1) {
+      this.listType = "table";
+      this.headers = [
+        { label: "应用名称", prop: "name", type: "href", align: "left" },
+        { label: "应用版本", prop: "date", type: "", align: "center" },
+        { label: "应用类型", prop: "address", type: "", align: "center" },
+        { label: "业务领域", prop: "address", type: "", align: "center" },
+        { label: "上架区域", prop: "address", type: "", align: "center" },
+        { label: "部署时间", prop: "address", type: "", align: "center" },
+        { label: "部署区域", prop: "address", type: "", align: "center" },
+      ];
+    }
+    // 组织管理员 --- 应用审批管理
+    else if (level === 1 && type === 2) {
+      this.listType = "table";
+      this.headers = [
+        { label: "应用名称", prop: "name", type: "", align: "left" },
+        { label: "应用版本", prop: "date", type: "", align: "center" },
+        { label: "应用类型", prop: "address", type: "", align: "center" },
+        { label: "业务领域", prop: "address", type: "", align: "center" },
+        { label: "在线区域", prop: "address", type: "", align: "center" },
+        { label: "申请类型", prop: "address", type: "", align: "center" },
+        { label: "审批时间", prop: "address", type: "", align: "center" },
+        { label: "申请状态", prop: "address", type: "", align: "center" },
+        {
+          label: "操作",
+          type: "Button",
+          align: "center",
+          width: 160,
+          btnList: [
+            {
+              type: "action-approval",
+              label: "审批",
+              line: "|",
+            },
+            {
+              type: "action-delete",
+              label: "删除",
+            },
+          ],
+        },
+      ];
+    }
+
+    // 超级管理员 --- 平台应用管理
+    else if (level === 2 && type === 0) {
+      this.listType = "table";
+      this.headers = [
+        { label: "应用名称", prop: "name", type: "href", align: "left" },
+        { label: "应用版本", prop: "date", type: "", align: "center" },
+        { label: "应用类型", prop: "address", type: "", align: "center" },
+        { label: "业务领域", prop: "address", type: "", align: "center" },
+        { label: "在线状态", prop: "address", type: "", align: "center" },
+        { label: "所属组织", prop: "address", type: "", align: "center" },
+        {
+          label: "操作",
+          type: "Button",
+          align: "center",
+          width: 240,
+          btnList: [
+            {
+              type: "action-edit",
+              label: "编辑",
+              line: "|",
+            },
+            {
+              type: "off-line",
+              label: "下线",
+              line: "|",
+            },
+            {
+              type: "action-delete",
+              label: "删除",
+            },
+          ],
+        },
+      ];
+    }
+    // 超级管理员 --- 应用部署管理
+    else if (level === 2 && type === 1) {
+      this.listType = "table";
+      this.headers = [
+        { label: "应用名称", prop: "name", type: "href", align: "left" },
+        { label: "应用版本", prop: "date", type: "", align: "center" },
+        { label: "应用类型", prop: "address", type: "", align: "center" },
+        { label: "业务领域", prop: "address", type: "", align: "center" },
+        { label: "上架区域", prop: "address", type: "", align: "center" },
+        { label: "所属组织", prop: "address", type: "", align: "center" },
+        { label: "部署时间", prop: "address", type: "", align: "center" },
+        { label: "部署区域", prop: "address", type: "", align: "center" },
+      ];
+    }
+    // 超级管理员 --- 应用审批管理
+    else if (level === 2 && type === 2) {
+      this.listType = "table";
+      this.headers = [
+        { label: "应用名称", prop: "name", type: "", align: "left" },
+        { label: "应用版本", prop: "date", type: "", align: "center" },
+        { label: "应用类型", prop: "address", type: "", align: "center" },
+        { label: "业务领域", prop: "address", type: "", align: "center" },
+        { label: "在线区域", prop: "address", type: "", align: "center" },
+        { label: "申请类型", prop: "address", type: "", align: "center" },
+        { label: "审批时间", prop: "address", type: "", align: "center" },
+        { label: "申请状态", prop: "address", type: "", align: "center" },
+        {
+          label: "操作",
+          type: "Button",
+          align: "center",
+          width: 160,
+          btnList: [
+            {
+              type: "action-approval",
+              label: "审批",
+              line: "|",
+            },
+            {
+              type: "action-delete",
+              label: "删除",
+            },
+          ],
+        },
+      ];
+    }
+
+    // Error
+    else {
+      throw Error("The page doesn't exist");
+    }
   },
 };
 </script>
 
 <style scoped>
 .list_container {
+  height: 100%;
   padding: 0 20px;
 }
-.table_container {
+.main_container {
   height: calc(100% - 75px);
   padding: 15px 20px;
   border-radius: 10px;
   overflow: hidden;
   background-color: #fff;
 }
-.table_container .ces-table-page {
-  margin-top: 42px;
+.main_container.card {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: stretch;
+}
+.flex_grow {
+  flex-grow: 1;
+}
+.filter_action {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
 }
 </style>
diff --git a/static/data.json b/static/data.json
index ca971b710d01c531315f88c8c73680dd55f150c3..83a6fcf475fc3d74314600a40563a635fc5a1975 100644
--- a/static/data.json
+++ b/static/data.json
@@ -27,7 +27,7 @@
         "name": "王小虎",
         "address": "0",
         "id": "ssss22",
-        "state": 0
+        "state": 2
       }
     ],
     "tableData1": [