Merge pull request #184 from yuchenyao/dev-0.9.0

Add new homepage including workspace、demos、videos
WeBankFinTech · Jun 30, 2020 · cca8725 · cca8725
2 parents 5abf908 + 34b75c3
commit cca8725
Show file tree

Hide file tree

Showing 11 changed files with 526 additions and 256 deletions.
diff --git a/web/src/commonData/i18n/common/en.json b/web/src/commonData/i18n/common/en.json
@@ -103,6 +103,32 @@
             "deleteWtss": "Delete the scheduler project at the same time?",
             "noData": "No data please add"
         },
+        "workspace": {
+          "createWorkspace": "Create Workspace",
+          "searchWorkspace": "Search Workspace",
+          "workspaceList": "Workspace List",
+          "editWorkspace": "Edit",
+          "newWorkspace": "New Workspace",
+          "editor": "Edit Workspace",
+          "workName": "Name",
+          "department": "Department",
+          "selectDepartment": "Please Select Department",
+          "label": "Label",
+          "addLabel": "Add Label",
+          "description": "Description",
+          "pleaseInputWorkspaceDesc": "Please Input Workspace Description",
+          "createdSuccess": "Successfully created!",
+          "createdFailed": "Created failed!",
+          "display": "Display",
+          "tableDisplay": "Table",
+          "cardDisplay": "Card",
+          "createTime": "CreateTime"
+        },
+        "GLY": {
+          "ALTY": "Demos",
+          "KSRM": "Quick Start",
+          "HYP": "Change"
+        },
         "workflow": {
             "workflow": "Workflow",
             "createWorkflow": "Create workflow",

diff --git a/web/src/commonData/i18n/common/zh.json b/web/src/commonData/i18n/common/zh.json
@@ -17,7 +17,8 @@
             "nameLength": "名称长度不能大于",
             "validNameDesc": "必须以字母开头，且只支持字母、数字、下划线",
             "project": "工程",
-            "feedback": "反馈"
+            "feedback": "反馈",
+            "validNameExist": "名称不能重复"
         },
         "project": {
             "projectName": "工程名",
@@ -103,6 +104,32 @@
             "deleteWtss": "是否同时删除scheduler工程?",
             "noData": "暂无数据请添加"
         },
+        "workspace": {
+          "createWorkspace": "创建工作空间",
+          "searchWorkspace": "搜索工作空间",
+          "workspaceList": "工作空间列表",
+          "editWorkspace": "编辑",
+          "newWorkspace": "新建工作空间",
+          "editor": "编辑工作空间",
+          "workName": "工作空间名",
+          "department": "归属部门",
+          "selectDepartment": "请选择部门",
+          "label": "标签",
+          "addLabel": "添加标签",
+          "description": "描述",
+          "pleaseInputWorkspaceDesc": "请输入工作空间描述",
+          "createdSuccess": "工作空间创建成功！",
+          "createdFailed": "工作空间创建失败！",
+          "display": "展示方式",
+          "tableDisplay": "列表展示",
+          "cardDisplay": "图标展示",
+          "createTime": "创建时间"
+        },
+        "GLY": {
+          "ALTY": "案例体验",
+          "KSRM": "快速入门",
+          "HYP": "换一批"
+        },
         "workflow": {
             "workflow": "工作流",
             "createWorkflow": "创建工作流",

diff --git a/web/src/js/component/vue-process/style/index.scss b/web/src/js/component/vue-process/style/index.scss
@@ -400,7 +400,7 @@ $mask-color: rgba(55, 55, 55, .6);
 
         .designer-control-header {
             background: #5c5c5c;
-            background-image: linear-gradient(top, #5c5c5c, #3e3e3e);
+            background-image: linear-gradient(to top, #5c5c5c, #3e3e3e);
             height: 8px;
             border-left: 1px solid #5c5c5c;
             border-right: 1px solid #5c5c5c;

diff --git a/web/src/js/service/router.js b/web/src/js/service/router.js
@@ -29,13 +29,22 @@ const router = new VueRouter({
     {
       path: '',
       name: 'layout',
-      redirect: '/project',
+      redirect: '/newhome',
       component: Layout,
       meta: {
         title: 'DataSphere Studio',
         publicPage: true, // 权限公开
       },
       children: [
+        {
+          path: 'newhome',
+          name: 'Newhome',
+          meta: {
+            title: 'DataSphere Studio',
+            publicPage: true,
+          },
+          component: () => import('../view/newhome/index.vue'),
+        },
         {
           path: 'home',
           name: 'Home',

diff --git a/web/src/js/view/newhome/images/workspace.png b/web/src/js/view/newhome/images/workspace.png
diff --git a/web/src/js/view/newhome/index.vue b/web/src/js/view/newhome/index.vue
@@ -1,3 +1,15 @@
 <template>
-  <div>首页</div>
+  <div>
+    <workspace />
+  </div>
 </template>
+
+<script>
+import workspace from './module/workspace';
+
+export default {
+  components: {
+    workspace: workspace.component
+  }
+}
+</script>
diff --git a/web/src/js/view/newhome/module/caseAndIntroduction/index.vue b/web/src/js/view/newhome/module/caseAndIntroduction/index.vue
@@ -6,30 +6,29 @@
         <div class="admin-left-content">
           <div class="content-box" v-for="(item, index) in demos" :key="index">
             <div style="width: 30%;margin: auto;">
-              <img style="width: 100%;margin-top:10px" :src="getsrc(item,index)" alt />
+              <img style="width: 100%;margin-top:10px" :src="getsrc(item)" alt />
             </div>
 
             <div style="margin-top: 15px;">
-              <h3 style="font-size: 12px;text-align: center;margin-bottom: 25px;">{{index}}</h3>
-              <div class="demo-item" v-for="(text,index) in item" :key="index">
+              <h3 style="font-size: 12px;text-align: center;margin-bottom: 25px;">{{item.title}}</h3>
+              <div class="demo-item" v-for="(text, index) in item.demoInstances" :key="index">
                 <a class="demo-title" :href="filterValid(text.url)">{{text.title}}</a>
-
               </div>
             </div>
           </div>
         </div>
       </div>
-      <div class="admin-box-right">
+      <!-- <div class="admin-box-right">
         <p class="title">{{$t('message.GLY.KSRM')}}</p>
         <div class="admin-box-video">
-          <div v-for="(item,index) in data.videos" :key="index" class="video-item" @click="play(item)">
+          <div v-for="(item, index) in videos" :key="index" class="video-item" @click="play(item)">
             <video width="100%" height="100" controls>
               <source :src="item.url" type="video/mp4" />
             </video>
             <h3 class="video-title">{{item.title}}</h3>
           </div>
         </div>
-      </div>
+      </div> -->
     </div>
     <Modal
       v-model="showVideo"
@@ -44,41 +43,54 @@
   </div>
 </template>
 <script>
+import api from '@/js/service/api';
+
 export default {
-  props: {
-    applist: Array,
-    data: Object
-  },
   data() {
+    const src = {
+      workflow: require("../../images/edit1.png"),
+      application: require("../../images/333.png"),
+      visualization: require("../../images/111.png"),
+      工作流: require("../../images/edit1.png"),
+      应用场景: require("../../images/333.png"),
+      可视化: require("../../images/111.png")
+    };
     return {
+      src,
       menuurl: [
         {title: 'Schedulis',url: '/workspaceHome/scheduleCenter',icon: 'fi-schedule'},
         {title: 'Scriptis',url: '/home',icon: 'fi-scriptis'},
         {title: 'Workflow',url: '/project',icon: 'fi-workflow1'},
       ],
       showVideo: false,
       video: {},
-      demos: {
-
-      }
+      demos: [],
+      videos: []
     }
   },
-  watch: {
-    data(val) {
-      let temDemo = {workflow: '',
-        application: '',
-        visualization: '',
-        工作流: '',
-        应用场景: '',
-        可视化: '',}
-      Object.keys(temDemo).map((key) => {
-        if (this.data.demos[key]) {
-          this.demos[key] = this.data.demos[key]
-        }
-      })
-    }
+  created() {
+    // this.getVideos();
+    this.getDemos();
   },
   methods: {
+    getDemos() {
+      this.loading = true;
+      api.fetch('dss/workspaces/demos', {}, 'get').then((res) => {
+        this.demos = res.demos;
+        this.loading = false;
+      }).catch(() => {
+        this.loading = false;
+      });
+    },
+    getVideos() {
+      this.loading = true;
+      api.fetch('dss/workspaces/videos', {}, 'get').then((res) => {
+        this.videos = res.videos;
+        this.loading = false;
+      }).catch(() => {
+        this.loading = false;
+      });
+    },
     // 过滤a标签url，防止XSS
     filterValid(url) {
       const reg = /^(http|ftp|https):\/\/[\w\-_]+(\.[\w\-_]+)+([\w\-\.,@?^=%&:/~\+#]*[\w\-\@?^=%&/~\+#])?/;
@@ -88,17 +100,8 @@ export default {
         return 'javascript:;';
       }
     },
-    getsrc(v, index) {
-      let src = {
-        workflow: require("../images/edit1.png"),
-        application: require("../images/333.png"),
-        visualization: require("../images/111.png"),
-        工作流: require("../images/edit1.png"),
-        应用场景: require("../images/333.png"),
-        可视化: require("../images/111.png"),
-
-      };
-      return src[index];
+    getsrc(item) {
+      return this.src[item.name];
     },
     play(item) {
       this.showVideo = true;
@@ -123,7 +126,7 @@ export default {
     display: flex;
     justify-content: space-between;
     .admin-box-left {
-      padding: 10px;
+      padding: 0px 10px;
       // width: 70%;
       flex: 1;
       .content-box {