合并

src/App.vue

 <template>
-  <div id="app">
+  <div id="app" :class="{ is_fwgl: isFwgl }">
     <bd-menu class="outmenu"></bd-menu>
     <router-view />
   </div>
 </template>
 
 <script>
-import bdMenu from './components/menu' 
+import bdMenu from "./components/menu";
 export default {
   data: () => ({}),
-  components:{
-    bdMenu
+  computed: {
+    isFwgl() {
+      return this.$route.name && this.$route.name.indexOf("fwgl") > -1;
     },
-  methods: {
-   
   },
-  created() {
-    
-  }
+  components: {
+    bdMenu,
+  },
+  methods: {},
+  created() {},
 };
 </script>
 
 <style scoped>
-.outmenu{
+.outmenu {
   position: fixed;
   top: 0;
   left: 0;
   z-index: 99;
 }
-#app{
+#app {
   background-color: #f6f7fb;
   padding-bottom: 20px;
 }
+</style>
 
+<style>
+.is_fwgl {
+  padding-bottom: 0 !important;
+}
+.is_fwgl .decor {
+  display: none !important;
+}
 </style>

src/components/codes.vue

@@ -22,7 +22,7 @@ export default {
 
   mounted() {
     this.aceEditor = ace.edit(this.$refs.ace, {
-      maxLines: 36,
+      maxLines: 38,
       minLines: 10,
       fontSize: 14,
       mode: this.acemodePath,

src/components/commodity.vue

+<template>
+  <div class="commodity">
+    <el-row>
+      <el-col :span="24">
+        <div class="com_title">水路货物周转量情况</div>
+      </el-col>
+      <el-col :span="12">
+        <div class="com_item">
+          <span class="com_item_title">提供机构：</span>
+          <span class="com_data">北京比格数据</span>
+        </div>
+        <div class="com_item">
+          <span class="com_item_title">发布时间：</span>
+          <span class="com_data">2020-03-12 18:31:12</span>
+        </div>
+        <div class="com_item">
+          <span class="com_item_title">更新时间：</span>
+          <span class="com_data">2020-03-12 18:31:12</span>
+        </div>
+        <div class="com_item">
+          <span class="com_item_title">数据领域：</span>
+          <span class="com_data">经济建设</span>
+        </div>
+        <div class="com_item">
+          <span class="com_item_title">服务类型：</span>
+          <span class="com_data">综合应用服务</span>
+        </div>
+        <div class="com_item">
+          <span class="com_item_title">资源摘要：</span>
+          <span
+            class="com_data"
+          >提供视频监控的空间分布展示和视频监控直播的服务提供视频监控的空间分布展示和视频监控直播的服务提供视频监控的空间分布展示和视频监控直播的服务</span>
+        </div>
+        <div class="com_item">
+          <span class="com_item_title">开放级别：</span>
+          <span class="com_data">
+            <el-tag size="small">共享</el-tag>
+          </span>
+        </div>
+        <div class="com_item">
+          <span class="com_item_title">浏览次数：</span>
+          <span class="com_data_view">99999</span>
+          <span class="com_item_title">获取次数：</span>
+          <span class="com_data_get">99999</span>
+        </div>
+      </el-col>
+      <el-col :span="12">
+        <div class="com_item">
+          <span class="com_item_title">规格：</span>
+          <span class="com_data">综合应用服务</span>
+        </div>
+        <div class="com_item">
+          <span class="com_item_title">规格说明：</span>
+          <span class="com_data">综合应用服务</span>
+        </div>
+        <div class="com_item">
+          <span class="com_item_title">购买方式：</span>
+          <span class="com_data">综合应用服务</span>
+        </div>
+        <div class="com_item">
+          <span class="com_item_title">购买时长：</span>
+          <span class="com_data">
+            <el-input-number v-model="num" @change="handleChange" size="small" :min="1" :max="10" label="描述文字"></el-input-number>月
+          </span>
+        </div>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+export default {
+  components: {},
+  data: () => ({
+    num: 1
+  }),
+  computed: {},
+  watch: {},
+  methods: {},
+  mounted() {}
+};
+</script>
+
+<style scoped>
+.commodity {
+  padding: 10px;
+}
+.com_title {
+  font-size: 22px;
+}
+.com_item {
+  font-size: 16px;
+  line-height: 26px;
+  margin-top: 10px;
+  color: #51ac14;
+  display: flex;
+  align-self: start;
+}
+.com_item_title {
+  width: 80px;
+}
+.com_data {
+  display: inline-block;
+  width: calc(100% - 90px);
+  color: #f1ac14;
+}
+.com_data_view {
+  color: #f1ac14;
+  margin-right: 10px;
+}
+.com_data_get {
+  color: #f1ac14;
+}
+</style>
+

src/components/side-nav-bar.vue

+<template>
+  <div class="side_nav_bar">
+    <h3 class="side_nav_bar_title">
+      <img :src="require('../assets/imgs/tool_fuwu.png')" width="20" style="margin-right: 10px;" />
+      <span v-text="title"></span>
+    </h3>
+    <ul class="side_nav_bar_list">
+      <li
+        v-for="(nav, index) in navList"
+        :class="{ current: $route.path.indexOf(nav.path) > -1 }"
+        :key="'nav' + index"
+        @click="navAction(nav)"
+      >
+        <span v-text="nav.name"></span>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "sideNavBar",
+  props: {
+    title: {
+      type: String,
+      default: () => "我的服务",
+    },
+    navList: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  methods: {
+    navAction(nav) {
+      this.$router.push(nav.path);
+    },
+  },
+};
+</script>
+
+<style scoped>
+.side_nav_bar {
+  background-color: #0d1847;
+}
+.side_nav_bar_title {
+  height: 40px;
+  background-color: #182665;
+  border-radius: 10px;
+  overflow: hidden;
+  margin: 20px 15px 20px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.side_nav_bar_title > span {
+  font-size: 16px;
+  color: #c3caf8;
+}
+.side_nav_bar_list > li {
+  padding: 12px 10px 12px 42px;
+  border-left: 5px solid #0d1847;
+  font-size: 14px;
+  line-height: 24px;
+  color: #e6ebfe;
+  cursor: pointer;
+}
+.side_nav_bar_list > li:hover,
+.side_nav_bar_list > li.current {
+  border-left: 5px solid #e56600;
+  background-color: #182665;
+  color: #e6ebfe;
+}
+</style>

src/components/table-um.vue

@@ -31,7 +31,7 @@
           v-if="searchShow"
           v-model="search"
           placeholder="请输入账号、中文名"
-          style="max-width:180px;"
+          style="max-width:220px;"
           size="mini"
           @input="searchVal"
           class="ces_toolbar_inp"
@@ -99,6 +99,7 @@
           :label="item.label"
           :width="item.width"
           :align="item.align"
+          :min-width="item.minWidth"
           :render-header="item.require ? renderHeader : null"
         >
           <template slot-scope="scope">
@@ -108,18 +109,22 @@
                 <em
                   v-if="btn.label == '删除' || btn.label == '移除'"
                   :class="btn.type"
+                  style="color: #830f53"
                   @click="handleRemove(scope.row, btn.label)"
-                  >{{ btn.label }}</em
                 >
+                  {{ btn.label }}
+                </em>
                 <em
                   v-else
                   :class="btn.type"
+                  style="color: #0f2683"
                   @click="handleClick(btn.type, scope.row)"
-                  >{{ btn.label }}</em
                 >
-                <em v-if="btn.line" style="padding:0 20px;color:#edf0ff">{{
-                  btn.line
-                }}</em>
+                  {{ btn.label }}
+                </em>
+                <em v-if="btn.line" style="padding:0 20px;color:#edf0ff">
+                  {{ btn.line }}
+                </em>
               </b>
             </span>
             <!--href 链接-->

src/pages/example_commodity.vue

+<template>
+  <div class="com_ex">
+    <block-radius>
+      <Commodity :datas="datas" />
+    </block-radius>
+  </div>
+</template>
+
+<script>
+// @ is an alias to /src
+import Commodity from "@/components/commodity.vue";
+import BlockRadius from "@/components/block-radius";
+export default {
+  components: {
+    Commodity,
+    BlockRadius
+  },
+  data: () => ({
+    datas: {
+
+    }
+  }),
+  mounted() {
+  },
+  methods: {}
+};
+</script>
+<style scoped>
+.com_ex {
+  margin-top: 100px;
+  padding: 20px;
+}
+</style>
\ No newline at end of file

src/pages/example_table.vue

@@ -11,9 +11,9 @@
       :searchShow="true"
       :addRowBtn="addRowBtn"
       :autoAdd="false"
-      :isDialog="true"
-      :isSelection="true"
-      :isIndex="true"
+      :isDialog="false"
+      :isSelection="false"
+      :isIndex="false"
       :confirmOptions="confirmOptions"
       :detailsUrl="detailsUrl"
       @primary-edit="editItem"
@@ -21,6 +21,7 @@
       :stripe="true"
       :pageSizeShow="true"
       :filterList="filterList"
+      cellClassName="cell_width"
     ></ces-table>
     <h3>可编辑表格，供服务测试用</h3>
     <ces-table
@@ -74,7 +75,7 @@ import cesTable from "@/components/table-um";
 export default {
   data: () => ({
     headers: [
-      { label: "服务url", prop: "date", type: "href", align: "left" },
+      { label: "服务url", prop: "date", type: "href", align: "left",minWidth: "50%" },
       { label: "服务名称", prop: "name", type: "href", align: "center" },
       { label: "中文名", prop: "address", type: "href", align: "right" },
       {

src/pages/fwgl.vue

+<template>
+  <div class="fwgl_container">
+    <side-nav-bar :nav-list="navList"></side-nav-bar>
+    <div class="main_container">
+      <router-view
+        :key="'type_' + $route.params && $route.params.type"
+      ></router-view>
+    </div>
+  </div>
+</template>
+
+<script>
+import sideNavBar from "@/components/side-nav-bar";
+
+export default {
+  components: {
+    sideNavBar,
+  },
+  data: () => ({
+    navList: [],
+    userLevel: 0,
+  }),
+  computed: {},
+  methods: {},
+  mounted() {
+    this.navList = [
+      // 普通用户
+      {
+        level: 0,
+        name: "注册发布的服务",
+        path: "/fwgl/list/0/注册发布的服务",
+      },
+      {
+        level: 0,
+        name: "申请的服务",
+        path: "/fwgl/list/1/申请的服务",
+      },
+      {
+        level: 0,
+        name: "审批的服务",
+        path: "/fwgl/list/2/审批的服务",
+      },
+      {
+        level: 0,
+        name: "云资源服务",
+        path: "/fwgl/list/3/云资源服务",
+      },
+      // 组织管理员
+      {
+        level: 1,
+        name: "组织服务管理",
+        path: "/fwgl/list/4/组织服务管理",
+      },
+      {
+        level: 1,
+        name: "服务审批管理",
+        path: "/fwgl/list/5/服务审批管理",
+      },
+      {
+        level: 1,
+        name: "云资源管理",
+        path: "/fwgl/list/6/云资源管理",
+      },
+      // 超级管理员
+      {
+        level: 2,
+        name: "平台服务管理",
+        path: "/fwgl/list/7/平台服务管理",
+      },
+      {
+        level: 2,
+        name: "服务审批管理",
+        path: "/fwgl/list/8/服务审批管理",
+      },
+      {
+        level: 2,
+        name: "云资源管理",
+        path: "/fwgl/list/9/云资源管理",
+      },
+    ].filter((nav) => nav.level === this.userLevel);
+
+    this.$router.push(this.navList[0].path);
+  },
+  /* updated() {
+    if (this.$route.params && this.$route.params.type === undefined) {
+      this.$router.push(this.navList[0].path);
+    }
+  }, */
+};
+</script>
+
+<style scoped>
+.fwgl_container {
+  height: calc(100vh - 84px);
+  display: flex;
+  justify-content: flex-start;
+  align-items: stretch;
+}
+.side_nav_bar {
+  width: 180px;
+  flex-shrink: 0;
+}
+.main_container {
+  width: calc(100% - 180px);
+  flex-grow: 1;
+  flex-shrink: 1;
+  background-color: #f6f7fb;
+}
+</style>

src/pages/fwglList.vue

+<template>
+  <div class="list_container">
+    <el-breadcrumb separator="/" class="bread_crumb">
+      <el-breadcrumb-item>我的服务</el-breadcrumb-item>
+      <el-breadcrumb-item>{{ $route.params.name }}</el-breadcrumb-item>
+    </el-breadcrumb>
+    <div class="table_container">
+      <ces-table
+        class="r_yhgl_table"
+        size="mini"
+        :border="false"
+        :headers="headers"
+        url="tableData"
+        :searchShow="true"
+        :autoAdd="false"
+        :isDialog="true"
+        :confirmOptions="confirmOptions"
+        :detailsUrl="detailsUrl"
+        @primary-edit="editItem"
+        @sold-out="soldOutItem"
+        :emptyText="emptyText"
+        :stripe="true"
+        :pageSizeShow="true"
+        :filterList="filterList"
+      ></ces-table>
+    </div>
+  </div>
+</template>
+
+<script>
+import cesTable from "@/components/table-um";
+export default {
+  data: () => ({
+    headers: [],
+    url: "",
+    detailsUrl: "ss/",
+    confirmOptions: {
+      title: "提示", //提示
+      message: "确认删除该条数据？", //""
+      btnCancelText: "取消", //取消
+      btnSubmitText: "确定", //确定
+    },
+    emptyText: "暂时没数据",
+    filterList: [
+      {
+        name: "服务类型",
+        prop: "fwlx",
+        data: ["数据服务", "时空服务", "视频服务", "感知服务", "综合服务"],
+      },
+      {
+        name: "服务领域",
+        prop: "fwly",
+        data: [
+          "数据服务",
+          "时空服务",
+          "视频服务",
+          "感知服务",
+          "综合服务",
+          "数据服务2",
+          "时空服务2",
+          "视频服务2",
+          "感知服务2",
+          "综合服务2",
+          "感知服务3",
+          "综合服务3",
+        ],
+      },
+      {
+        name: "开放程度",
+        prop: "kfcd",
+        data: ["数据服务", "时空服务", "视频服务", "感知服务", "综合服务"],
+      },
+      {
+        name: "服务状态",
+        prop: "fwzt",
+        data: ["数据服务", "时空服务", "视频服务", "感知服务", "综合服务"],
+      },
+    ],
+  }),
+  components: {
+    cesTable,
+  },
+  methods: {
+    editItem(item) {
+      console.log(item);
+    },
+    soldOutItem(item) {
+      console.log(item);
+    },
+  },
+  mounted() {
+    this.headers = [];
+
+    this.headers.push(
+      { label: "服务名称", prop: "name", type: "href", align: "left" },
+      { label: "服务url", prop: "date", type: "href", align: "center" },
+      { label: "开放程度", prop: "address", type: "href", align: "center" },
+      { label: "服务描述", prop: "address", type: "href", align: "left" },
+      { label: "注册发布时间", prop: "address", type: "href", align: "center" },
+      { label: "服务类型", prop: "address", type: "href", align: "center" }
+    );
+
+    switch (parseInt(this.$route.params.type)) {
+      case 0:
+        this.headers.push({
+          label: "操作",
+          type: "Button",
+          align: "center",
+          width: 240,
+          btnList: [
+            {
+              type: "primary-edit",
+              label: "编辑",
+              line: "|",
+            },
+            {
+              type: "sold-out",
+              label: "申请下架",
+              line: "|",
+            },
+            {
+              type: "primary-del",
+              label: "删除",
+            },
+          ],
+        });
+        break;
+      case 1:
+        this.headers.push(
+          { label: "申请状态", prop: "address", type: "href", align: "center" },
+          {
+            label: "操作",
+            type: "Button",
+            align: "center",
+            width: 160,
+            btnList: [
+              {
+                type: "sold-out",
+                label: "取消",
+                line: "|",
+              },
+              {
+                type: "primary-del",
+                label: "删除",
+              },
+            ],
+          }
+        );
+        break;
+      case 2:
+        this.headers.push(
+          { label: "审批时间", prop: "address", type: "href", align: "center" },
+          { label: "审批状态", prop: "address", type: "href", align: "center" },
+          {
+            label: "操作",
+            type: "Button",
+            align: "center",
+            width: 160,
+            btnList: [
+              {
+                type: "sold-out",
+                label: "审批",
+                line: "|",
+              },
+              {
+                type: "primary-del",
+                label: "删除",
+              },
+            ],
+          }
+        );
+        break;
+    }
+  },
+};
+</script>
+
+<style scope>
+.list_container {
+  height: 100%;
+  overflow: hidden;
+}
+.bread_crumb {
+  margin: 20px;
+  font-size: 14px;
+}
+.table_container {
+  height: calc(100% - 75px);
+  padding: 15px 20px;
+  margin: 0 20px;
+  border-radius: 10px;
+  overflow: hidden;
+  background-color: #fff;
+}
+.table_container .ces-table-page {
+  margin-top: 42px;
+}
+</style>

src/pages/fwzc_fwcs.vue

@@ -171,14 +171,14 @@
 </template>
 
 <script>
-import blockRadius from "@/components/block-radius";
-import cesTable from "@/components/table-um";
-import codes from "@/components/codes";
+import BlockRadius from "@/components/block-radius";
+import CesTable from "@/components/table-um";
+import Codes from "@/components/codes";
 export default {
   components: {
-    blockRadius,
-    cesTable,
-    "v-apaas-code": codes
+    BlockRadius,
+    CesTable,
+    "v-apaas-code": Codes
   },
   data: () => ({
     btnList: [

src/router/index.js

 import Vue from "vue";
 import Router from "vue-router";
 
+import Index from "@/pages/index";
+import workPlace from "@/pages/workPlace";
 Vue.use(Router);
 
+const originalPush = Router.prototype.push;
+Router.prototype.push = function push(location, onResolve, onReject) {
+  if (onResolve || onReject)
+    return originalPush.call(this, location, onResolve, onReject);
+  return originalPush.call(this, location).catch((err) => err);
+};
+
 export default new Router({
   routes: [
     {
       path: "/",
-      redirect: "/index"
+      redirect: "/index",
     },
     {
       path: "/index",
@@ -25,11 +34,6 @@ export default new Router({
           name: "servicedetail",
           component: () => import("@/pages/serviceDetail"),
         },
-      {
-        path: "/serviceedit",
-        name: "serviceedit",
-        component: () => import("@/pages/serviceEdit"),
-      },
         {
           path: "/fwzc", // 服务注册
           name: "fwzc",
@@ -39,36 +43,54 @@ export default new Router({
             {
               path: "/fwzc/fwcs", // 服务注册/服务测试
               name: "fwcs",
-            component: () => import("@/pages/fwzc_fwcs")
+              component: () => import("@/pages/fwzc_fwcs"),
             },
-        ]
-      }
-      ]
+          ],
+        },
+        {
+          path: "/fwgl", // 服务注册
+          name: "fwgl",
+          // redirect: "/fwgl/list",
+          component: () => import("@/pages/fwgl"),
+          children: [
+            {
+              path: "/fwgl/list/:type/:name", // 服务注册/服务测试
+              name: "fwglList",
+              component: () => import("@/pages/fwglList"),
+            },
+          ],
+        },
+      ],
     },
     {
       path: "/example_table", // 表格实例
       name: "example_table",
-      component: () => import("@/pages/example_table")
+      component: () => import("@/pages/example_table"),
     },
     {
       path: "/example_upload", // 表格实例
       name: "example_upload",
-      component: () => import("@/pages/example_upload")
+      component: () => import("@/pages/example_upload"),
     },
     {
       path: "/example_code", // 编辑器实例
       name: "example_code",
-      component: () => import("@/pages/example_code")
+      component: () => import("@/pages/example_code"),
     },
     {
       path: "/example_icon", // svg 实例
       name: "example_icon",
-      component: () => import("@/pages/example_icon")
+      component: () => import("@/pages/example_icon"),
     },
     {
       path: "/example_topology", // 拓扑图实例
       name: "example_topology",
       component: () => import("@/pages/example_topology")
+    },
+    {
+      path: "/example_commodity", // 商品详情实例
+      name: "example_commodity",
+      component: () => import("@/pages/example_commodity")
     }
   ]
 });