更新

src/layout/common/menus.vue

@@ -5,7 +5,7 @@
         <el-menu :default-active="$route.path" router class="el-menu-demo" mode="horizontal">
           <el-menu-item index="/news/index">新闻动态</el-menu-item>
           <el-menu-item index="/achievement/index?col_name=平台建设&&display=0">成果展示</el-menu-item>
-          <el-menu-item index="/service/index">计算服务</el-menu-item>
+          <el-menu-item index="/service/detail?title=吉林超算">计算服务</el-menu-item>
           <el-menu-item index="/communication/index">交流互动</el-menu-item>
           <el-menu-item index="/partisan/index">党建学苑</el-menu-item>
         </el-menu>

src/views/demand/index.vue

@@ -56,7 +56,6 @@ export default {
 
     async search() {
       console.log(this.id);
-
       let res = await this.fetch(this.id);
       this.$set(this, `form`, res.data);
     },

src/views/service/detail.vue

@@ -26,19 +26,19 @@
               </el-col>
             </el-col>
             <el-col :span="18" class="right">
-              <span v-if="columnName == '资源介绍'">
+              <span v-if="columnName == '吉林超算'">
                 <resources :columnName="columnName"></resources>
               </span>
-              <span v-else-if="columnName == '账号申请'">
+              <span v-else-if="columnName == '超算应用'">
                 <apply :columnName="columnName"></apply>
               </span>
-              <span v-else-if="columnName == '计算登录'">
+              <span v-else-if="columnName == '运行动态'">
                 <sign :columnName="columnName"></sign>
               </span>
-              <span v-else-if="columnName == '应用领域'">
+              <span v-else-if="columnName == '超算课堂'">
                 <application :columnName="columnName"></application>
               </span>
-              <span v-else-if="columnName == '应用案例'">
+              <!-- <span v-else-if="columnName == 'AI社区'">
                 <cases :columnName="columnName"></cases>
               </span>
               <span v-else-if="columnName == '运行动态'">
@@ -46,7 +46,7 @@
               </span>
               <span v-else-if="columnName == '超算讲堂'">
                 <forum :columnName="columnName"></forum>
-              </span>
+              </span> -->
               <span v-else-if="columnName == 'AI社区'">
                 <community :columnName="columnName"></community>
               </span>
@@ -84,30 +84,23 @@ export default {
     top,
     menus,
     foot,
-    resources, //资源介绍
-    apply, //账号申请
-    sign, //计算登录
-    application, //应用领域
-    cases, //应用案例
-    funct, //运行动态
-    forum, //超算讲堂
+    resources, //吉林超算
+    apply, //超算应用
+    sign, //运行动态
+    application, //超算课堂
+    // cases, //应用案例
+    // funct, //运行动态
+    // forum, //超算讲堂
     community, //AI社区
   },
   data: function() {
     return {
-      menuList: [
-        { name: '资源介绍' },
-        { name: '账号申请' },
-        { name: '计算登录' },
-        { name: '应用领域' },
-        { name: '应用案例' },
-        { name: '运行动态' },
-        { name: '超算讲堂' },
-        { name: 'AI社区' },
-      ],
+      menuList: [{ name: '吉林超算' }, { name: '超算应用' }, { name: '运行动态' }, { name: '超算课堂' }, { name: 'AI社区' }],
       menuColor: 'rgb(5,73,130)',
       menuIndex: '0',
       columnName: '',
+      //吉林超算
+     
     };
   },
   created() {
@@ -116,36 +109,24 @@ export default {
   methods: {
     // 选择栏目
     changeColumn() {
-      if (this.col_name == '资源介绍') {
+      if (this.col_name == '吉林超算') {
         this.menuIndex = 0;
         this.columnName = this.col_name;
         this.menuColor = 'rgb(5,73,130)';
-      } else if (this.col_name == '账号申请') {
+      } else if (this.col_name == '超算应用') {
         this.menuIndex = 1;
         this.columnName = this.col_name;
         this.menuColor = 'rgb(5,73,130)';
-      } else if (this.col_name == '计算登录') {
+      } else if (this.col_name == '运行动态') {
         this.menuIndex = 2;
         this.columnName = this.col_name;
         this.menuColor = 'rgb(5,73,130)';
-      } else if (this.col_name == '应用领域') {
+      } else if (this.col_name == '超算课堂') {
         this.menuIndex = 3;
         this.columnName = this.col_name;
         this.menuColor = 'rgb(5,73,130)';
-      } else if (this.col_name == '应用案例') {
-        this.menuIndex = 4;
-        this.columnName = this.col_name;
-        this.menuColor = 'rgb(5,73,130)';
-      } else if (this.col_name == '运行动态') {
-        this.menuIndex = 5;
-        this.columnName = this.col_name;
-        this.menuColor = 'rgb(5,73,130)';
-      } else if (this.col_name == '超算讲堂') {
-        this.menuIndex = 6;
-        this.columnName = this.col_name;
-        this.menuColor = 'rgb(5,73,130)';
       } else if (this.col_name == 'AI社区') {
-        this.menuIndex = 7;
+        this.menuIndex = 4;
         this.columnName = this.col_name;
         this.menuColor = 'rgb(5,73,130)';
       }

src/views/service/parts/apply.vue

@@ -1,5 +1,5 @@
 <template>
-  <div id="apply">
+  <div id="resources">
     <el-row>
       <el-col :span="24" class="style">
         <el-col :span="24" class="top">
@@ -7,7 +7,12 @@
           <span>{{ columnName }}</span>
         </el-col>
         <el-col :span="24" class="info">
-          详情
+          <el-col :span="6" class="list" @click.native="clickBtn(item.title)" v-for="(item, index) in list" :key="index">
+            <el-link :underline="false">
+              <el-image :src="item.pic"></el-image>
+              <p>{{ item.title }}</p>
+            </el-link>
+          </el-col>
         </el-col>
       </el-col>
     </el-row>
@@ -17,13 +22,24 @@
 <script>
 import { mapState, createNamespacedHelpers } from 'vuex';
 export default {
-  name: 'apply',
+  name: 'resources',
   props: {
     columnName: null,
   },
   components: {},
   data: function() {
-    return {};
+    return {
+      list: [
+        {
+          pic: require('@/assets/lingyu.png'),
+          title: '应用领域',
+        },
+        {
+          pic: require('@/assets/anli.png'),
+          title: '应用案例',
+        },
+      ],
+    };
   },
   created() {},
   methods: {},
@@ -60,4 +76,26 @@ export default {
     }
   }
 }
+
+.list {
+  width: 215px;
+  min-height: 150px;
+  margin: 0 10px 30px 0;
+  text-align: center;
+  background-color: #034980;
+
+  .el-image {
+    padding: 30px 0 0 0;
+    height: 50px;
+  }
+  p {
+    font-size: 25px;
+    color: #ffffff;
+    letter-spacing: 2px;
+    padding: 20px 0;
+  }
+}
+.list:nth-child(4n) {
+  margin: 0 0 30px 0;
+}
 </style>

src/views/service/parts/resources.vue

@@ -7,7 +7,12 @@
           <span>{{ columnName }}</span>
         </el-col>
         <el-col :span="24" class="info">
-          详情
+          <el-col :span="6" class="list" @click.native="clickBtn(item.title)" v-for="(item, index) in list" :key="index">
+            <el-link :underline="false">
+              <el-image :src="item.pic"></el-image>
+              <p>{{ item.title }}</p>
+            </el-link>
+          </el-col>
         </el-col>
       </el-col>
     </el-row>
@@ -23,7 +28,22 @@ export default {
   },
   components: {},
   data: function() {
-    return {};
+    return {
+      list: [
+        {
+          pic: require('@/assets/ziyuan.png'),
+          title: '资源介绍',
+        },
+        {
+          pic: require('@/assets/shenqing.png'),
+          title: '账号申请',
+        },
+        {
+          pic: require('@/assets/denglu.png'),
+          title: '计算登录',
+        },
+      ],
+    };
   },
   created() {},
   methods: {},
@@ -60,4 +80,26 @@ export default {
     }
   }
 }
+
+.list {
+  width: 215px;
+  min-height: 150px;
+  margin: 0 10px 30px 0;
+  text-align: center;
+  background-color: #034980;
+
+  .el-image {
+    padding: 30px 0 0 0;
+    height: 50px;
+  }
+  p {
+    font-size: 25px;
+    color: #ffffff;
+    letter-spacing: 2px;
+    padding: 20px 0;
+  }
+}
+.list:nth-child(4n) {
+  margin: 0 0 30px 0;
+}
 </style>

src/views/service/parts/sign.vue

@@ -2,12 +2,34 @@
   <div id="sign">
     <el-row>
       <el-col :span="24" class="style">
-        <el-col :span="24" class="top">
+        <el-col :span="24" class="topTitle">
           <span></span>
           <span>{{ columnName }}</span>
         </el-col>
         <el-col :span="24" class="info">
-          详情
+          <el-col :span="24" class="top">
+            <el-col :span="6" class="left"> 当前状态</el-col>
+            <el-col :span="10" class="under">
+              <el-radio v-model="radio" label="1">活跃用户</el-radio>
+              <el-radio v-model="radio" label="2">活跃节点</el-radio>
+              <el-radio v-model="radio" label="3">活跃应用</el-radio>
+            </el-col>
+            <el-col :span="8" class="right">更新时间：2020-5-19_00:00:00</el-col>
+          </el-col>
+          <el-col :span="24" class="table">
+            BIAOGER
+          </el-col>
+          <!--
+          <el-col :span="24">
+            <el-table :data="tableData" border style="width: 100%">
+              <el-table-column prop="name" label="用户" align="center"> </el-table-column>
+              <el-table-column prop="yingxing" label="运行作业" align="center"> </el-table-column>
+              <el-table-column prop="paidui" label="排队作业" align="center"> </el-table-column>
+              <el-table-column prop="heshu" label="运行核数" align="center"> </el-table-column>
+              <el-table-column prop="diaduiheshu" label="排队核数" align="center"> </el-table-column>
+              <el-table-column prop="huoyue" label="活跃结点" align="center"> </el-table-column>
+            </el-table>
+          </el-col> -->
         </el-col>
       </el-col>
     </el-row>
@@ -23,7 +45,7 @@ export default {
   },
   components: {},
   data: function() {
-    return {};
+    return { resource: '', tableData: [{ name: '测试', yingxing: '0', heshu: '0', diaduiheshu: '230', huoyue: 'era' }] };
   },
   created() {},
   methods: {},
@@ -42,7 +64,7 @@ export default {
 <style lang="less" scoped>
 .style {
   padding: 0 20px;
-  .top {
+  .topTitle {
     height: 35px;
     margin: 20px 0;
     border-bottom: 1px dashed #ccc;
@@ -60,4 +82,63 @@ export default {
     }
   }
 }
+
+.info {
+  border-top: 2px solid #054982;
+  background-image: linear-gradient(0deg, #c4e0ec, #f0f7fa);
+  height: 500px;
+  .top {
+    height: 50px;
+    line-height: 50px;
+    border-bottom: 2px solid #0a3f70;
+    .left {
+      float: left;
+      width: 100px;
+      text-align: center;
+      font-size: 18px;
+      color: #005293;
+      font-weight: 600;
+      margin: 0 120px 0 0;
+    }
+    .under {
+      float: left;
+    }
+    .right {
+      float: right;
+    }
+  }
+}
+/deep/.el-radio {
+  color: #606266;
+  cursor: pointer;
+  margin-right: 30px;
+  font-size: 18px;
+  color: #000;
+  font-weight: 600;
+}
+/deep/.el-radio__label {
+  font-size: 16px;
+  padding-left: 10px;
+}
+/deep/.el-table--border {
+  background-image: linear-gradient(0deg, #c4e0ec, #f0f7fa);
+  border: 1px solid #93a7b7;
+}
+
+/deep/ .el-table--enable-row-transition .el-table__body td {
+  background-image: linear-gradient(0deg, #c4e0ec, #f0f7fa);
+  border: 1px solid #93a7b7;
+}
+
+/deep/ .el-table--border td,
+.el-table--border th,
+.el-table__body-wrapper .el-table--border.is-scrolling-left ~ .el-table__fixed {
+  border-right: 1px solid #93a7b7;
+  background-image: linear-gradient(0deg, #c4e0ec, #f0f7fa);
+}
+
+/deep/ .el-table td,
+.el-table th.is-leaf {
+  border-bottom: 1px solid #93a7b7;
+}
 </style>