修改

src/api/resContainerInstance.js

@@ -82,3 +82,10 @@ export function listAllResHost() {
     method: 'get'
   })
 }
+// 获取跳转地址
+export function getUrl(type) {
+  return request({
+    url: '/rescontainerinstance/getUrl/' + type,
+    method: 'get'
+  })
+}

src/views/containerManage/containerManage/index.vue

@@ -202,7 +202,7 @@
             <span>{{ scope.row.createDate | transformDateByFormat('YYYY-MM-DD HH:mm') }}</span>
           </template>
         </el-table-column>
-        <el-table-column label="操作" class-name="small-padding fixed-width" width="100px">
+        <el-table-column label="操作" class-name="small-padding fixed-width" width="170px">
           <template slot-scope="scope">
             <el-button
               :class="commonField.updateClass"
@@ -216,6 +216,12 @@
               :size="commonField.size"
               @click="handleDelete(scope.row)"
             >关机</el-button>
+            <el-button
+              :class="commonField.delClass"
+              :type="commonField.typeParent"
+              :size="commonField.size"
+              @click="handlejump(scope.row)"
+            >跳转</el-button>
           </template>
         </el-table-column>
       </el-table>
@@ -239,6 +245,7 @@ import {
   updateResContainerInstance,
   exportResContainerInstance,
   getListUser,
+  getUrl,
   listAllResHost } from '@/api/resContainerInstance'
 import { ListAllResQuotaTemplate } from '@/api/resQuotaTemplate'
 import { listAllResPublicImage } from '@/api/resPublicImage'
@@ -253,12 +260,12 @@ export default {
       total: 6,
       // 容器实例表格数据
       resContainerInstanceList: [
-        {dockerName: 'test_nginx',dockerLabel: '1',superiName: '学生1',dockerCpu: '11',dockerMemory: '12',dockerDisk: '32',dockerGpu: '22',hostName: '主机1',imageName: '通义-文本生成图像大模型-中英文-通用领域',dockerStatus: '1',remarks: '-',createName:'管理员',createDate: '2024-08-27 14:21'},
-        {dockerName: 'test_nginx2',dockerLabel: '3',superiName: '学生2',dockerCpu: '34',dockerMemory: '54',dockerDisk: '65',dockerGpu: '32',hostName: '主机2',imageName: 'BERT文本分割-中文-通用领域',dockerStatus: '1',remarks: '-',createName:'管理员',createDate: '2024-07-21 16:13'},
-        {dockerName: 'test_nginx3',dockerLabel: '8',superiName: '学生4',dockerCpu: '65',dockerMemory: '4',dockerDisk: '52',dockerGpu: '6',hostName: '主机3',imageName: 'RexUniNLU零样本通用自然语言理解-中文-base',dockerStatus: '1',remarks: '-',createName:'管理员',createDate: '2024-08-02 09:43'},
-        {dockerName: 'test_nginx4',dockerLabel: '1',superiName: '学生5',dockerCpu: '234',dockerMemory: '3',dockerDisk: '18',dockerGpu: '9',hostName: '主机4',imageName: 'mPLUG视觉问答模型-中文-base',dockerStatus: '1',remarks: '-',createName:'管理员',createDate: '2024-08-07 14:16'},
-        {dockerName: 'test_nginx5',dockerLabel: '9',superiName: '学生6',dockerCpu: '67',dockerMemory: '8',dockerDisk: '48',dockerGpu: '18',hostName: '主机5',imageName: '通义-文本生成图像大模型-中英文-通用领域',dockerStatus: '1',remarks: '-',createName:'管理员',createDate: '2024-08-19 12:20'},
-        {dockerName: 'test_nginx',dockerLabel: '1',superiName: '学生7',dockerCpu: '4',dockerMemory: '4',dockerDisk: '32',dockerGpu: '22',hostName: '主机6',imageName: 'AnyText多语言视觉文字生成与编辑模型',dockerStatus: '1',remarks: '-',createName:'管理员',createDate: '2024-08-27 14:21'},
+        {jumpType:'ollama', dockerName: 'test_nginx',dockerLabel: '1',superiName: '学生1',dockerCpu: '11',dockerMemory: '12',dockerDisk: '32',dockerGpu: '22',hostName: '主机1',imageName: '通义-文本生成图像大模型-中英文-通用领域',dockerStatus: '1',remarks: '-',createName:'管理员',createDate: '2024-08-27 14:21'},
+        {jumpType:'jupyter', dockerName: 'test_nginx2',dockerLabel: '3',superiName: '学生2',dockerCpu: '34',dockerMemory: '54',dockerDisk: '65',dockerGpu: '32',hostName: '主机2',imageName: 'BERT文本分割-中文-通用领域',dockerStatus: '1',remarks: '-',createName:'管理员',createDate: '2024-07-21 16:13'},
+        {jumpType:'ollama', dockerName: 'test_nginx3',dockerLabel: '8',superiName: '学生4',dockerCpu: '65',dockerMemory: '4',dockerDisk: '52',dockerGpu: '6',hostName: '主机3',imageName: 'RexUniNLU零样本通用自然语言理解-中文-base',dockerStatus: '1',remarks: '-',createName:'管理员',createDate: '2024-08-02 09:43'},
+        {jumpType:'jupyter', dockerName: 'test_nginx4',dockerLabel: '1',superiName: '学生5',dockerCpu: '234',dockerMemory: '3',dockerDisk: '18',dockerGpu: '9',hostName: '主机4',imageName: 'mPLUG视觉问答模型-中文-base',dockerStatus: '1',remarks: '-',createName:'管理员',createDate: '2024-08-07 14:16'},
+        {jumpType:'ollama', dockerName: 'test_nginx5',dockerLabel: '9',superiName: '学生6',dockerCpu: '67',dockerMemory: '8',dockerDisk: '48',dockerGpu: '18',hostName: '主机5',imageName: '通义-文本生成图像大模型-中英文-通用领域',dockerStatus: '1',remarks: '-',createName:'管理员',createDate: '2024-08-19 12:20'},
+        {jumpType:'jupyter', dockerName: 'test_nginx',dockerLabel: '1',superiName: '学生7',dockerCpu: '4',dockerMemory: '4',dockerDisk: '32',dockerGpu: '22',hostName: '主机6',imageName: 'AnyText多语言视觉文字生成与编辑模型',dockerStatus: '1',remarks: '-',createName:'管理员',createDate: '2024-08-27 14:21'},
       ],
       // 负责人数据
       superintendentList: [],
@@ -559,6 +566,15 @@ export default {
         }
       })
     },
+    handlejump(item) {
+
+      getUrl(item.jumpType).then(res => {
+        if (res.code === 200){
+          window.open(res.data, '_blank');
+        }
+      })
+
+    },
     /** 删除按钮操作 */
     handleDelete(row) {
       const id = row.businessId

src/views/homePage/index.vue

 <template>
 <div class="homePage_module">
-  <div class="header">
-    <el-select v-model="host" size="small" placeholder="请选择">
-      <el-option
-        v-for="item in hostOptions"
-        :key="item.businessId"
-        :label="item.hostIp"
-        :value="item.businessId"
-      />
-    </el-select>
-    <div class="header_title">控制台</div>
-    <div class="header_time">
-      <img :src="timePng" class="timePng">
-      <span>{{currentTime}}</span>
-    </div>
-  </div>
+<!--  <div class="header">-->
+<!--    <el-select v-model="host" size="small" placeholder="请选择">-->
+<!--      <el-option-->
+<!--        v-for="item in hostOptions"-->
+<!--        :key="item.businessId"-->
+<!--        :label="item.hostIp"-->
+<!--        :value="item.businessId"-->
+<!--      />-->
+<!--    </el-select>-->
+<!--    <div class="header_title">控制台</div>-->
+<!--    <div class="header_time">-->
+<!--      <img :src="timePng" class="timePng">-->
+<!--      <span>{{currentTime}}</span>-->
+<!--    </div>-->
+<!--  </div>-->
   <div class="first_row">
 <!--    <div class="timeCard">-->
 <!--      <div class="title">系统运行时间</div>-->
@@ -33,7 +33,7 @@
     </div>
     <div class="cpuCard">
       <div class="top">
-        <div class="title">CPU核数</div>
+        <div class="title">CPU</div>
         <div class="value">32核</div>
       </div>
       <div class="bottom">
@@ -56,10 +56,22 @@
       <img :src="GpuImg" class="Img">
       <div class="echarts_value">6.6%</div>
     </div>
-    <div class="averageLoad_card">
-      <div class="title">TPS</div>
-      <div class="value">15</div>
-      <img :src="averageLoadImg" class="averageLoadImg">
+    <div class="tpsCard">
+      <div>
+            <el-select v-model="host" size="small" style="width: 100%" placeholder="请选择">
+              <el-option
+                v-for="item in hostOptions"
+                :key="item.businessId"
+                :label="item.hostIp"
+                :value="item.businessId"
+              />
+            </el-select>
+      </div>
+      <div class="averageLoad_card">
+        <div class="title">TPS</div>
+        <div class="value">15</div>
+        <img :src="averageLoadImg" class="averageLoadImg">
+      </div>
     </div>
   </div>
   <div class="second_row">
@@ -941,16 +953,31 @@ export default {
         line-height: 28px;
       }
     }
+    .tpsCard{
+      width: 248px;
+      height: 204px;
+      display: flex;
+      flex-direction: column; /* 设置为列方向，使子元素上下排列 */
+      justify-content: space-between;
+    }
+    .topCard{
+      width: 248px;
+      height: 30px;
+      background: #ffffff;
+      border: 1px solid #ecf0f1;
+      border-radius: 4px;
+      box-shadow: 0px 0px 25px 0px rgba(19,101,198,0.15);
+    }
     .averageLoad_card{
       text-align: center;
       width: 248px;
-      height: 204px;
+      height: 160px;
       background: #ffffff;
       border: 1px solid #ecf0f1;
       border-radius: 4px;
       box-shadow: 0px 0px 25px 0px rgba(19,101,198,0.15);
       .title{
-        margin: 25px 0 43px;
+        margin: 15px 0 23px;
         height: 18px;
         font-size: 14px;
         font-family: Microsoft YaHei, Microsoft YaHei-400;
@@ -959,13 +986,13 @@ export default {
         line-height: 18px;
       }
       .value{
-        margin-bottom: 32px;
-        height: 32px;
+        margin-bottom: 15px;
+        height: 22px;
         font-size: 24px;
         font-family: Microsoft YaHei, Microsoft YaHei-700;
         font-weight: 700;
         color: #333333;
-        line-height: 32px;
+        line-height: 22px;
       }
       .averageLoadImg{
 

src/views/myStorage/index.vue

@@ -5,25 +5,48 @@
     <div class="card_content">
     <div class="card_item">
       <div class="card_itemName">存储空间名称</div>
-      <div class="card_itemValue">catarc-res</div>
+      <img :src="nameImg" class="Img">
+<!--      <div class="card_itemValue">catarc-res</div>-->
+      <div class="card_itemValue">
+      <el-select v-model="host" size="small"  placeholder="请选择">
+        <el-option
+          v-for="item in hostOptions"
+          :key="item.businessId"
+          :label="item.hostIp"
+          :value="item.businessId"
+        />
+      </el-select>
+      </div>
     </div>
     <div class="card_item">
       <div class="card_itemName">读取权限</div>
+      <img :src="readImg" class="Img">
       <div class="card_itemValue">私有</div>
     </div>
     <div class="card_item">
-      <div class="card_itemName">总存储量（不含ECS快照）</div>
-      <div class="card_itemValue">8.12GB</div>
+      <el-row>
+        <el-col :span="12">
+          <div class="card_itemName">总存储量</div>
+          <img :src="storageImg" class="Img">
+          <div class="card_itemValue">8.12GB</div>
+        </el-col>
+        <el-col :span="12">
+          <div class="card_itemName">已用存储</div>
+          <img :src="storageImg" class="Img">
+          <div class="card_itemValue">3.46GB</div>
+        </el-col>
+      </el-row>
     </div>
     <div class="card_item">
       <div class="card_itemName">创建时间</div>
+      <img :src="timeImg" class="Img">
       <div class="card_itemValue">2024年8月9日 13:04</div>
     </div>
   </div>
   </div>
   <div class="table_content">
     <div class="tableHeader">
-      <i class="el-icon-d-arrow-left" @click="handleGoBack"></i>
+      <i v-if="pathName !== '/'" class="el-icon-d-arrow-left" @click="handleGoBack"></i>
     <div class="path">当前路径：{{pathName2 ? pathName + '/' + pathName2  :pathName}}</div>
     </div>
     <el-table
@@ -33,6 +56,8 @@
       <el-table-column type="index" label="序号" width="90" />
       <el-table-column label="文件名称" prop="name" :show-overflow-tooltip="true">
         <template slot-scope="scope">
+          <i v-if="scope.row.level === 3" class="el-icon-document"></i>
+          <i v-else class="el-icon-folder"></i>
           <span style="color: #2288ff;cursor: pointer"  @click="handleChose(scope.row)">
             {{ scope.row.name }}</span>
         </template>
@@ -51,11 +76,19 @@
 </template>
 
 <script>
+import {listAll} from "@/views/homePage/apis";
+
 export default {
   name: "index",
   data() {
     return{
-      pathName: '',
+      host: '',
+      hostOptions: [],
+      nameImg: require('@/assets/image/cunchu.png'),
+      readImg: require('@/assets/image/duqu.png'),
+      storageImg: require('@/assets/image/zongliang.png'),
+      timeImg: require('@/assets/image/shijian.png'),
+      pathName: '/',
       pathName2: '',
       dataList: [
         {name: 'video',updateTime: '2024-08-21 09:31:25',id: 1,level: 1},
@@ -81,9 +114,16 @@ export default {
   created() {
   },
   mounted() {
+    this.getHostOptions()
     this.showDataList = this.dataList.filter(item => item.level === 1)
   },
   methods:{
+    getHostOptions() {
+      listAll().then(res=> {
+        this.hostOptions = res.data
+        this.host = res.data[0].businessId
+      })
+    },
     getList() {
 
     },
@@ -103,7 +143,7 @@ export default {
         this.pathName2 = ''
         this.showDataList = this.dataList.filter(item => item.level === list[0].level - 1 && item.id === list[0].id - 1)
       }else if(list[0].level  === 2) {
-        this.pathName = ''
+        this.pathName = '/'
         this.showDataList = this.dataList.filter(item => item.level === 1)
       }
     }
@@ -118,6 +158,12 @@ export default {
     font-weight: bold;
   }
   .table_content{
+    .el-icon-folder{
+      font-size: 20px;
+    }
+    .el-icon-document{
+      font-size: 20px;
+    }
     .tableHeader{
       display: flex;
       align-items: center;
@@ -147,21 +193,28 @@ export default {
       align-items: center;
     }
     .card_item{
-      width: 270px;
-      height: 100px;
-      display: flex;
-      flex-direction: column;
-      justify-content: space-between;
-      background-color: rgb(247, 249, 250);
+      width: 384px;
+      height: 204px;
+      background: #ffffff;
+      border: 1px solid #ecf0f1;
       border-radius: 4px;
-      padding: 12px;
+      box-shadow: 0px 0px 25px 0px rgba(19,101,198,0.15);
+      text-align: center;
       .card_itemName{
-        font-size: 18px;
-        color: #555555;
+        padding: 25px 0;
+        font-size: 14px;
+        font-weight: 400;
+        color: #666666;
+      }
+      .Img{
+        width: 56px;
+        height: 56px;
       }
       .card_itemValue{
+        padding: 25px 0;
         font-size: 24px;
-        font-weight: bold;
+        font-family: Microsoft YaHei, Microsoft YaHei-700;
+        font-weight: 700;
         color: #333333;
       }
     }